/* Zehet theme: semantic colors shared by the portfolio and case pages. */
:root {
--bg:#F8F9FB; --surface:#FFFFFF; --surface-raised:#FFFFFF; --surface-soft:#F1F2F5; --fill:#E6E7EB; --fill-2:#D8DADF; --sep:#D8DADF;
--ink:#000328; --ink-2:#646B7A; --ink-3:#646B7A; --ink-high:#646B7A; --carbon:#000328; --on-carbon:#F8F9FB;
--live:#9A58FF; --accent:#9A58FF; --accent-hover:#B37DFF; --accent-active:#7F3FE0; --highlight:#DDC8FF; --highlight-ink:#000328; --selection:#DDC8FF; --divider:#D8DADF;
--glass-top:rgba(255,255,255,.82); --glass-bot:rgba(241,242,245,.72); --lens:#E6E7EB; --lens-top:rgba(230,231,235,.92); --lens-bot:rgba(216,218,223,.9); --lens-edge:rgba(0,3,40,.07);
--primary-hover:#181C3E;
--brand-gradient:linear-gradient(135deg,#9B56FC 7%,#653DC5 23%,#3D2B9D 36%,#242085 46%,#1C1C7C 53%,#000328 97%);
}
:root[data-theme="dark"] {
--bg:#000328; --surface:#0B0F31; --surface-raised:#181C3E; --surface-soft:#181C3E; --fill:#282D50; --fill-2:#3C4268; --sep:#282D50;
--ink:#F8F9FB; --ink-2:#ABB0C8; --ink-3:#ABB0C8; --ink-high:#CFD1E1; --carbon:#F8F9FB; --on-carbon:#000328;
--highlight:#6530B8; --highlight-ink:#F8F9FB; --selection:#4B248A; --divider:#7B82A3;
--glass-top:rgba(40,45,80,.8); --glass-bot:rgba(11,15,49,.76); --lens:#3C4268; --lens-top:rgba(60,66,104,.9); --lens-bot:rgba(40,45,80,.9); --lens-rim:rgba(248,249,251,.16); --lens-edge:rgba(0,3,40,.35);
--primary-hover:#FFFFFF;
}
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) {
--bg:#000328; --surface:#0B0F31; --surface-raised:#181C3E; --surface-soft:#181C3E; --fill:#282D50; --fill-2:#3C4268; --sep:#282D50;
--ink:#F8F9FB; --ink-2:#ABB0C8; --ink-3:#ABB0C8; --ink-high:#CFD1E1; --carbon:#F8F9FB; --on-carbon:#000328;
--highlight:#6530B8; --highlight-ink:#F8F9FB; --selection:#4B248A; --divider:#7B82A3;
--glass-top:rgba(40,45,80,.8); --glass-bot:rgba(11,15,49,.76); --lens:#3C4268; --lens-top:rgba(60,66,104,.9); --lens-bot:rgba(40,45,80,.9); --lens-rim:rgba(248,249,251,.16); --lens-edge:rgba(0,3,40,.35);
--primary-hover:#FFFFFF;
} }

::selection { background:var(--selection); color:var(--ink); }
:root[data-theme="dark"] ::selection { background:var(--selection); color:var(--ink); }
:focus-visible { outline-color:var(--accent); }
.case:focus-visible { box-shadow:0 0 0 2px var(--accent); }
.hl { background-image:linear-gradient(var(--highlight),var(--highlight)); color:var(--highlight-ink); }
.chip { color:var(--ink); }
.dots button.on::before, .stephead .bar i, .step .line i { background:var(--accent); }
.step .dot { background:var(--surface); color:var(--ink); }
.step.on .dot, .step.did .dot { background:var(--surface); color:var(--ink); box-shadow:0 0 0 2px var(--accent); }
.acc p { color:var(--ink-high); }
.acc + .acc::before { border-color:var(--divider); }
.group { background:var(--fill); }
.plus { background:var(--surface); }
.tool .icon { background:var(--fill); }
.tool small { color:var(--ink-high); }
.card { background:var(--surface-raised); }
.card .go { background:var(--accent); color:#000328; }
.case .research-eye { color:var(--accent); }
@media(hover:hover) {
 .row:hover { background:var(--fill-2); }
 .card:hover .go { background:var(--accent-hover); }
 .btn.dark:hover, .nav .mail:hover, .out:hover, .visit:hover .out { background:var(--primary-hover); }
 .chip:hover { background:var(--fill-2); }
}
@media(prefers-color-scheme:dark) {
 :root:not([data-theme="light"]) ::selection { background:var(--selection); color:var(--ink); }
}

/* Brand mark in floating navigation, preserving original SVG colour. */
.nav .me img{object-fit:contain;filter:none;transform:none!important;border-radius:0}

.nav .me .brand-logo{display:block;width:36px;height:36px;flex:none;overflow:visible;shape-rendering:geometricPrecision;transform:none!important;filter:none;transition:none}
@media(max-width:700px){.nav .me .brand-logo{width:30px;height:30px}}

.nav .me img.brand-logo{display:block;width:36px;height:36px;object-fit:contain;image-rendering:auto;filter:none;transform:none!important;transition:none}
@media(max-width:700px){.nav .me img.brand-logo{width:30px;height:30px}}
#case-7edu-connect .media .bg{filter:none;object-position:center 58%}

.nav .sep{display:none!important}.nav .mail,.nav .mail:hover{background:#9A58FF;color:#FFFFFF}

/* Shared floating menu: glass stays behind the selection lens and controls. */
.nav,.nav.scrolled{width:430px;max-width:calc(100vw - 28px);background:transparent;justify-content:space-between}
.nav .links{flex:1;justify-content:space-evenly;min-width:0}
.nav .links a{padding-inline:12px}
.nav .me{background:transparent!important;box-shadow:none!important}
.nav .me img.brand-logo{transition:rotate .45s cubic-bezier(.22,.8,.3,1)!important;rotate:0deg}
@media(hover:hover){.nav .me:hover img.brand-logo{rotate:-9deg}}
@media(prefers-reduced-motion:reduce){.nav .me img.brand-logo{transition:none!important}}
@media(max-width:480px){.nav .links a{padding-inline:8px}}

/* Frosted capsule with the selection lens kept inside its stacking context. */
.nav,.nav.scrolled{padding-left:16px!important;background:linear-gradient(135deg,rgba(255,255,255,.44),rgba(245,246,250,.3));-webkit-backdrop-filter:blur(11px) saturate(145%);backdrop-filter:blur(11px) saturate(145%);isolation:isolate}
.nav::before{background:linear-gradient(140deg,rgba(255,255,255,.26),rgba(255,255,255,.05))!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(255,255,255,.4),0 5px 20px rgba(0,3,40,.12)!important}
.nav .mail,.nav .mail:hover{background:linear-gradient(180deg,#A56BFF 0%,#9A58FF 50%,#8D4CEE 100%)!important;border:0;box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 0 -1px 1px rgba(62,15,115,.14),0 2px 4px rgba(85,40,145,.12);transition:background .2s ease,transform .2s ease}
.nav .mail:active{transform:scale(.97);box-shadow:inset 0 1px 2px rgba(62,15,115,.15)}
.who i{width:5px;height:5px;background:#9A58FF;flex-shrink:0;animation:location-dot 1.9s ease-in-out infinite}
@keyframes location-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(154,88,255,.3)}50%{opacity:.4;box-shadow:0 0 0 4px rgba(154,88,255,0)}}
:root[data-theme="dark"] .nav{background:linear-gradient(135deg,rgba(40,45,80,.44),rgba(11,15,49,.3))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav{background:linear-gradient(135deg,rgba(40,45,80,.44),rgba(11,15,49,.3))}}
@media(prefers-reduced-motion:reduce){.who i{animation:none}}

/* Light-only presentation until theme switching is designed. */
:root{color-scheme:only light}.navbar .theme{display:none!important}