:root{
  color-scheme:light;
  --font-ui:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-copy:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --page:#f7fbff;
  --page-warm:#fffaf2;
  --surface:#ffffff;
  --surface-soft:#f3f7ff;
  --surface-lilac:#f5f0ff;
  --surface-pink:#fff0f6;
  --surface-mint:#edfbf5;
  --ink:#18213b;
  --ink-strong:#10162a;
  --muted:#687490;
  --line:#dfe8f4;
  --line-strong:#cdd9e8;
  --blue:#5079f6;
  --blue-edge:#365dcc;
  --purple:#8a67f5;
  --purple-edge:#6e4bd4;
  --pink:#ff70aa;
  --pink-edge:#d94f88;
  --orange:#ff9d5c;
  --orange-edge:#d97a3e;
  --yellow:#ffd75a;
  --yellow-edge:#d7ad2d;
  --mint:#56d4a0;
  --mint-edge:#32aa7c;
  --cyan:#58d0ef;
  --cyan-edge:#31a6c4;
  --success:#1e9d6b;
  --danger:#db5572;
  --warning:#b77113;
  --shadow-soft:0 18px 50px rgba(45,75,118,.12);
  --shadow-card:0 10px 0 rgba(85,107,145,.08),0 26px 60px rgba(48,74,112,.12);
  --shadow-float:0 16px 30px rgba(58,72,120,.16);
  --focus:0 0 0 4px rgba(80,121,246,.22);
  --header-bg:rgba(247,251,255,.94);
  --nav-bg:#ffffff;
  --star:#ffbf3d;
  --headline-1a:#1768d7;
  --headline-1b:#0797b4;
  --headline-2a:#5b62df;
  --headline-2b:#b94fa6;
  --headline-3a:#d66b35;
  --headline-3b:#d64378;
  --headline-shadow:none;
  --radius-sm:14px;
  --radius-md:22px;
  --radius-lg:32px;
  --radius-xl:42px;
  --content:min(1180px,calc(100vw - 32px));
  --tap:48px;
}

html[data-theme="night"]{
  color-scheme:dark;
  --page:#151b34;
  --page-warm:#1b1b36;
  --surface:#202845;
  --surface-soft:#1b2340;
  --surface-lilac:#2a2350;
  --surface-pink:#38223f;
  --surface-mint:#173b36;
  --ink:#f8f9ff;
  --ink-strong:#ffffff;
  --muted:#b9c4de;
  --line:#35405f;
  --line-strong:#465271;
  --blue:#7f9cff;
  --blue-edge:#526bd2;
  --purple:#ab8cff;
  --purple-edge:#765ed0;
  --pink:#ff8dbb;
  --pink-edge:#d65d90;
  --orange:#ffb071;
  --orange-edge:#d77f47;
  --yellow:#ffe078;
  --yellow-edge:#c9a53d;
  --mint:#70e0b3;
  --mint-edge:#3bb78b;
  --cyan:#78def4;
  --cyan-edge:#3aacc5;
  --success:#69d8aa;
  --danger:#ff8ca3;
  --warning:#ffd27a;
  --shadow-soft:0 22px 58px rgba(2,6,22,.32);
  --shadow-card:0 10px 0 rgba(5,8,25,.2),0 28px 64px rgba(2,6,22,.34);
  --shadow-float:0 18px 34px rgba(1,4,18,.34);
  --focus:0 0 0 4px rgba(127,156,255,.3);
  --header-bg:rgba(21,27,52,.94);
  --nav-bg:#202845;
  --star:#ffd75c;
  --headline-1a:#76dcff;
  --headline-1b:#66efcf;
  --headline-2a:#aab8ff;
  --headline-2b:#d7a7ff;
  --headline-3a:#ffc07f;
  --headline-3b:#ff91bd;
  --headline-shadow:none;
}

html[data-theme="auto"]{color-scheme:light}
@media(prefers-color-scheme:dark){
  html[data-theme="auto"]{
    color-scheme:dark;
    --page:#151b34;--page-warm:#1b1b36;--surface:#202845;--surface-soft:#1b2340;--surface-lilac:#2a2350;--surface-pink:#38223f;--surface-mint:#173b36;
    --ink:#f8f9ff;--ink-strong:#ffffff;--muted:#b9c4de;--line:#35405f;--line-strong:#465271;
    --blue:#7f9cff;--blue-edge:#526bd2;--purple:#ab8cff;--purple-edge:#765ed0;--pink:#ff8dbb;--pink-edge:#d65d90;--orange:#ffb071;--orange-edge:#d77f47;--yellow:#ffe078;--yellow-edge:#c9a53d;--mint:#70e0b3;--mint-edge:#3bb78b;--cyan:#78def4;--cyan-edge:#3aacc5;
    --success:#69d8aa;--danger:#ff8ca3;--warning:#ffd27a;--shadow-soft:0 22px 58px rgba(2,6,22,.32);--shadow-card:0 10px 0 rgba(5,8,25,.2),0 28px 64px rgba(2,6,22,.34);--shadow-float:0 18px 34px rgba(1,4,18,.34);--focus:0 0 0 4px rgba(127,156,255,.3);--header-bg:rgba(21,27,52,.94);--nav-bg:#202845;--star:#ffd75c;--headline-1a:#76dcff;--headline-1b:#66efcf;--headline-2a:#aab8ff;--headline-2b:#d7a7ff;--headline-3a:#ffc07f;--headline-3b:#ff91bd;--headline-shadow:none;
  }
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--page);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100svh;font-family:var(--font-copy);color:var(--ink);background:var(--page);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit}
button,a,select{touch-action:manipulation}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{color:inherit}
::selection{background:rgba(138,103,245,.24)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.icon{width:1.25em;height:1.25em;flex:0 0 auto}

.page-shell{position:relative;min-height:100svh;isolation:isolate;background:radial-gradient(circle at 10% 10%,rgba(88,208,239,.18),transparent 24rem),radial-gradient(circle at 90% 8%,rgba(255,112,170,.14),transparent 22rem),linear-gradient(180deg,var(--page),var(--page-warm));}
.page-shell::before,.page-shell::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:999px;filter:none;opacity:.7}
.page-shell::before{width:22rem;height:22rem;left:-8rem;bottom:8vh;background:radial-gradient(circle,rgba(86,212,160,.17),transparent 66%)}
.page-shell::after{width:19rem;height:19rem;right:-7rem;top:36vh;background:radial-gradient(circle,rgba(138,103,245,.14),transparent 66%)}

.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);background:var(--header-bg)}
.site-header-inner{width:var(--content);min-height:76px;margin:auto;display:flex;align-items:center;gap:24px;padding:10px 0}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--font-ui);font-weight:900;letter-spacing:-.02em;color:var(--ink-strong)}
.brand-mark{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,var(--yellow),var(--orange));box-shadow:0 5px 0 var(--orange-edge),0 10px 24px rgba(255,157,92,.24);transform:translateY(-2px)}
.brand-mark .brand-symbol{width:25px;height:25px;position:relative;z-index:1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.2))}
.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-size:1.03rem}.brand-copy small{margin-top:5px;font-size:.68rem;font-weight:800;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.desktop-nav{display:flex;align-items:center;gap:5px;margin-left:auto}
.nav-link{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 13px;border-radius:14px;text-decoration:none;color:var(--muted);font-weight:800;font-size:.9rem;transition:background .16s ease,color .16s ease,transform .16s ease}
.nav-link[aria-current="page"],.nav-link:hover{color:var(--ink-strong);background:var(--surface)}
.nav-link:active{transform:translateY(1px)}
.header-actions{display:flex;align-items:center;gap:10px}
.theme-control{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 5px 18px rgba(48,74,112,.08)}
.theme-option{width:38px;height:38px;border:0;border-radius:12px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s ease}
.theme-option[aria-pressed="true"]{background:var(--surface-lilac);color:var(--purple)}
.theme-option:hover{color:var(--ink)}
.theme-option:active{transform:translateY(1px)}
.profile-button{min-height:46px;display:inline-flex;align-items:center;gap:8px;padding:0 15px;border:1px solid var(--line);border-radius:15px;background:var(--surface);text-decoration:none;font-weight:900;font-size:.88rem;box-shadow:0 5px 18px rgba(48,74,112,.08)}

.main-wrap{width:var(--content);margin:auto;padding:clamp(28px,5vw,64px) 0 112px}
.kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 15px;color:var(--purple);font-size:.76rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.kicker-dot{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px color-mix(in srgb,var(--mint) 18%,transparent)}
.display-title{margin:0;font-family:var(--font-ui);font-size:clamp(3.15rem,4.9vw,4.7rem);line-height:1;letter-spacing:-.05em;color:var(--ink-strong)}
.section-title{margin:0;font-family:var(--font-ui);font-size:clamp(1.8rem,3.05vw,3.05rem);line-height:1;letter-spacing:-.035em;color:var(--ink-strong)}
.headline-gradient{overflow:visible}
.headline-gradient .headline-line{display:block;width:max-content;max-width:100%;padding:.11em .025em .055em;margin:0 -.025em;line-height:1.08;white-space:nowrap;background:linear-gradient(100deg,var(--headline-1a),var(--headline-1b));background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:var(--headline-shadow)}
.headline-gradient .headline-line:nth-child(2){background-image:linear-gradient(100deg,var(--headline-2a),var(--headline-2b))}
.headline-gradient .headline-line:nth-child(3){background-image:linear-gradient(100deg,var(--headline-3a),var(--headline-3b))}
.headline-gradient .headline-line + .headline-line{margin-top:.015em}
@media(forced-colors:active){.headline-gradient .headline-line{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;text-shadow:none}}
.copy{color:var(--muted);line-height:1.7}

.button{min-height:var(--tap);border:0;border-radius:16px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:950;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.button-primary{color:#fff;background:linear-gradient(180deg,#688cff,var(--blue));box-shadow:0 6px 0 var(--blue-edge),0 14px 26px rgba(80,121,246,.22)}
.button-secondary{color:var(--ink-strong);background:var(--surface);border:1px solid var(--line);box-shadow:0 5px 0 color-mix(in srgb,var(--line-strong) 72%,transparent),0 12px 24px rgba(48,74,112,.08)}
.button-mint{color:#12382b;background:linear-gradient(180deg,#7ce6bb,var(--mint));box-shadow:0 6px 0 var(--mint-edge),0 14px 26px rgba(86,212,160,.2)}
.button:hover{filter:saturate(1.05) brightness(1.01)}
.button:active{transform:translateY(4px)}
.button-primary:active{box-shadow:0 2px 0 var(--blue-edge),0 8px 18px rgba(80,121,246,.18)}
.button-mint:active{box-shadow:0 2px 0 var(--mint-edge),0 8px 18px rgba(86,212,160,.16)}
.button-secondary:active{box-shadow:0 1px 0 var(--line-strong),0 6px 14px rgba(48,74,112,.06)}

.soft-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.badge{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 11px;border-radius:999px;background:var(--surface-lilac);color:var(--purple);font-size:.78rem;font-weight:900}

.mobile-nav{position:fixed;z-index:50;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));display:none;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px;border:1px solid var(--line);border-radius:22px;background:var(--nav-bg);box-shadow:0 18px 44px rgba(33,49,80,.2)}
.mobile-nav a{min-width:0;min-height:54px;border-radius:16px;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:.64rem;font-weight:850}
.mobile-nav a svg{width:21px;height:21px}.mobile-nav a[aria-current="page"]{background:var(--surface-lilac);color:var(--purple)}

button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--focus)}

@media(max-width:980px){.desktop-nav{display:none}.site-header-inner{min-height:68px}.main-wrap{padding-top:32px}.mobile-nav{display:grid}.profile-button span{display:none}.profile-button{width:46px;padding:0;justify-content:center}}
@media(max-width:560px){:root{--content:min(100% - 20px,1180px);--radius-lg:26px;--radius-xl:32px}.site-header-inner{gap:10px}.brand-copy small{display:none}.header-actions{margin-left:auto}.theme-control{gap:2px;padding:3px}.theme-option{width:34px;height:34px}.profile-button{display:none}.main-wrap{padding-bottom:104px}.button{min-height:52px}.display-title{font-size:clamp(2.35rem,11.5vw,3.25rem)}.headline-gradient .headline-line{line-height:1.1;padding-top:.12em}}
@media(max-width:360px){.brand-copy strong{font-size:.94rem}.brand-mark{width:38px;height:38px;border-radius:13px}.theme-option{width:31px;height:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.button,.soft-card,.theme-control,.mobile-nav{box-shadow:none}.brand-mark{box-shadow:none;border:1px solid CanvasText}}

.header-actions-push{margin-left:auto}

/* UI-0005 — multilingual controls + semantic motion + headline system */
.language-picker{position:relative}
.language-picker>summary{list-style:none;width:46px;min-height:46px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:0 5px 18px rgba(48,74,112,.08);cursor:pointer;color:var(--ink-strong);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.language-picker>summary::-webkit-details-marker{display:none}.language-picker>summary::marker{content:""}.language-picker>summary:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--purple) 34%,var(--line));background:var(--surface-lilac);box-shadow:0 7px 22px rgba(48,74,112,.12)}
.language-current-flag{width:28px;height:19px;display:block;border-radius:5px;object-fit:cover;box-shadow:0 1px 0 rgba(255,255,255,.55),0 2px 7px rgba(30,44,74,.16)}
.language-menu{position:absolute;z-index:80;right:0;top:calc(100% + 10px);width:214px;padding:8px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-float);transform-origin:top right;animation:menu-pop .18s ease both}
.language-menu::before{content:"";position:absolute;right:18px;top:-6px;width:11px;height:11px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.language-menu a{position:relative;min-height:48px;display:grid;grid-template-columns:30px 1fr 20px;align-items:center;gap:9px;padding:0 10px;border-radius:13px;text-decoration:none;color:var(--ink);font-size:.84rem;transition:background .14s ease,transform .14s ease,color .14s ease}
.language-menu a:hover{background:var(--surface-lilac);transform:translateX(2px)}.language-menu a[aria-current="true"]{background:var(--surface-lilac);color:var(--purple)}.language-menu-flag{width:26px;height:17px;display:block;border-radius:4px;object-fit:cover;box-shadow:0 1px 4px rgba(30,44,74,.14)}.language-menu a::after{content:"";justify-self:center;color:var(--mint);font-weight:950;font-size:.86rem}.language-menu a[aria-current="true"]::after{content:"✓"}
@keyframes menu-pop{from{opacity:0;transform:translateY(-5px) scale(.97)}to{opacity:1;transform:none}}

.motion-brand .brand-mark{position:relative;overflow:hidden;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease}.motion-brand:hover .brand-mark{transform:translateY(-4px) rotate(-5deg) scale(1.04);box-shadow:0 7px 0 var(--orange-edge),0 14px 30px rgba(255,157,92,.3)}
.brand-mark .brand-symbol{animation:brand-breathe 3.8s ease-in-out infinite}.brand-glint{position:absolute;inset:-35%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.78) 49%,transparent 60%);transform:translateX(-70%) rotate(12deg);animation:brand-glint 5.2s ease-in-out infinite}
@keyframes brand-breathe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.09) rotate(5deg)}}@keyframes brand-glint{0%,62%,100%{transform:translateX(-70%) rotate(12deg);opacity:0}70%{opacity:1}82%{transform:translateX(72%) rotate(12deg);opacity:0}}

.nav-link .icon{transition:transform .18s cubic-bezier(.2,.8,.2,1),color .18s ease}.nav-link:hover .icon{transform:translateY(-2px) rotate(-6deg) scale(1.12);color:var(--purple)}
.profile-button{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.profile-button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 30%,var(--line));box-shadow:0 8px 24px rgba(48,74,112,.13)}
.theme-option .icon{transition:transform .2s cubic-bezier(.2,.8,.2,1)}.theme-option:hover .icon{transform:rotate(10deg) scale(1.12)}.theme-option[aria-pressed="true"] .icon{animation:theme-icon-pop .28s cubic-bezier(.2,.9,.25,1.35)}
@keyframes theme-icon-pop{0%{transform:scale(.72) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}

.button{position:relative;overflow:hidden}.button::after{content:"";position:absolute;inset:-80% -35%;background:linear-gradient(110deg,transparent 44%,rgba(255,255,255,.35) 50%,transparent 56%);transform:translateX(-62%);opacity:0;pointer-events:none}.button:hover::after{animation:button-sheen .62s ease}.button .icon{transition:transform .16s ease}.button:hover .icon{transform:translateX(3px)}.button-secondary:hover .icon{transform:scale(1.08) rotate(-4deg)}
@keyframes button-sheen{0%{opacity:0;transform:translateX(-62%)}22%{opacity:1}100%{opacity:0;transform:translateX(62%)}}

.ambient-shapes{position:fixed;inset:76px 0 0;z-index:-1;pointer-events:none;overflow:hidden}.shape{position:absolute;display:block;opacity:.34;filter:none;will-change:transform}.shape-one{width:22px;height:22px;left:5vw;top:16vh;border-radius:7px;background:var(--yellow);transform:rotate(18deg);animation:ambient-a 8s ease-in-out infinite}.shape-two{width:17px;height:17px;right:9vw;top:23vh;border-radius:50%;background:var(--pink);animation:ambient-b 10s ease-in-out infinite}.shape-three{width:26px;height:12px;left:11vw;bottom:19vh;border-radius:999px;background:var(--mint);transform:rotate(-18deg);animation:ambient-b 9s ease-in-out infinite reverse}.shape-four{width:16px;height:26px;right:5vw;bottom:24vh;border-radius:9px;background:var(--cyan);transform:rotate(24deg);animation:ambient-a 11s ease-in-out infinite reverse}.shape-five{width:13px;height:13px;right:35vw;top:8vh;border:3px solid var(--purple);border-radius:4px;transform:rotate(45deg);animation:ambient-c 7s ease-in-out infinite}
@keyframes ambient-a{0%,100%{transform:translate3d(0,0,0) rotate(18deg)}50%{transform:translate3d(0,-15px,0) rotate(30deg)}}@keyframes ambient-b{0%,100%{transform:translate3d(0,0,0) rotate(-18deg)}50%{transform:translate3d(9px,-12px,0) rotate(-5deg)}}@keyframes ambient-c{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(-10px) rotate(90deg)}}

[data-reveal]{opacity:0;transform:translateY(18px) scale(.99);transition:opacity .52s ease,transform .58s cubic-bezier(.2,.8,.2,1)}[data-reveal].is-visible{opacity:1;transform:none}.reveal-delay-1{transition-delay:.08s}.reveal-delay-2{transition-delay:.15s}.reveal-delay-3{transition-delay:.22s}
.motion-tilt{transform-style:preserve-3d;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease}.motion-tilt.tilt-nw{transform:perspective(850px) rotateX(2.1deg) rotateY(-2.1deg) translateY(-3px)}.motion-tilt.tilt-ne{transform:perspective(850px) rotateX(2.1deg) rotateY(2.1deg) translateY(-3px)}.motion-tilt.tilt-sw{transform:perspective(850px) rotateX(-2.1deg) rotateY(-2.1deg) translateY(-3px)}.motion-tilt.tilt-se{transform:perspective(850px) rotateX(-2.1deg) rotateY(2.1deg) translateY(-3px)}
.motion-lift{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease}
@media(hover:hover) and (pointer:fine){.motion-lift:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--purple) 24%,var(--line));box-shadow:0 13px 0 color-mix(in srgb,var(--line-strong) 28%,transparent),0 34px 68px rgba(48,74,112,.14)}html[data-theme="night"] .motion-lift:hover{box-shadow:0 10px 0 rgba(5,8,25,.18),0 34px 72px rgba(1,4,18,.38)}}
@media(hover:hover) and (pointer:fine) and (prefers-color-scheme:dark){html[data-theme="auto"] .motion-lift:hover{box-shadow:0 10px 0 rgba(5,8,25,.18),0 34px 72px rgba(1,4,18,.38)}}

/* UI-0015 — artifact-free theme switching.
   Never animate the entire page with CSS filter: a filtered compositing layer can reveal
   a pale raster edge during Light/Night swaps. Chrome uses a root View Transition; other
   browsers get a full-viewport wash that extends beyond the viewport edge. */
html.theme-changing .page-shell{animation:none!important;filter:none!important}
html.theme-changing *,html.theme-changing *::before,html.theme-changing *::after{
  transition-property:transform,opacity!important;
}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.34s;
  animation-timing-function:cubic-bezier(.22,.7,.2,1);
}
::view-transition-old(root){animation-name:school-theme-old}
::view-transition-new(root){animation-name:school-theme-new}
@keyframes school-theme-old{to{opacity:0}}
@keyframes school-theme-new{from{opacity:0}}
html.theme-transition-fallback::after{
  content:"";position:fixed;inset:-6px;z-index:2147483646;pointer-events:none;
  background:var(--page);opacity:0;animation:school-theme-fallback .36s cubic-bezier(.22,.7,.2,1) both;
}
@keyframes school-theme-fallback{0%{opacity:.18}100%{opacity:0}}
.mobile-nav a .icon{transition:transform .16s ease}.mobile-nav a:active .icon{transform:translateY(-2px) scale(1.12)}

@media(max-width:1180px){.site-header-inner{gap:16px}.desktop-nav{gap:2px}.nav-link{padding:0 10px}}
@media(max-width:560px){.language-picker>summary{width:42px;min-height:42px;border-radius:13px}.language-current-flag{width:25px;height:17px}.language-menu{right:0;width:204px}.header-actions{gap:6px}.ambient-shapes{inset:68px 0 0}.shape{opacity:.22}}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important}.brand-mark .brand-symbol,.brand-glint,.shape{animation:none!important}.motion-tilt,.motion-tilt.tilt-nw,.motion-tilt.tilt-ne,.motion-tilt.tilt-sw,.motion-tilt.tilt-se,.motion-lift{transform:none!important}.language-menu{animation:none!important}}


/* UI-0009 — shared authorship footer */
.site-footer{padding:32px 0 112px;color:var(--muted);font-size:.76rem}
.footer-wrap{padding-top:0;padding-bottom:0}
.footer-inner{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px 30px;padding-top:24px;border-top:1px solid var(--line)}
.footer-tagline,.footer-credit,.footer-copyright{min-width:0}
.footer-credit{display:flex;align-items:center;justify-content:center;gap:.38em;flex-wrap:wrap;color:var(--muted)}
.footer-credit strong{color:var(--ink);font-weight:850}
.footer-credit a{position:relative;color:var(--purple);font-weight:850;text-decoration:none;text-underline-offset:3px;transition:color .16s ease,transform .16s ease}
.footer-credit a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(.35);transform-origin:center;opacity:.48;transition:transform .16s ease,opacity .16s ease}
.footer-credit a:hover{color:var(--blue)}
.footer-credit a:hover::after,.footer-credit a:focus-visible::after{transform:scaleX(1);opacity:.9}
.footer-dot{opacity:.58}
.footer-copyright{text-align:right;white-space:nowrap}
html[data-theme="night"] .footer-credit strong{color:var(--ink-strong)}
@media(max-width:980px){.site-footer{padding-bottom:120px}.footer-inner{grid-template-columns:1fr auto}.footer-credit{grid-column:1/-1;grid-row:2;justify-content:flex-start}.footer-copyright{grid-column:2;grid-row:1}}
@media(max-width:600px){.footer-inner{grid-template-columns:1fr;text-align:center;gap:9px}.footer-tagline,.footer-credit,.footer-copyright{grid-column:1;grid-row:auto;text-align:center}.footer-credit{justify-content:center}.footer-copyright{white-space:normal}.footer-dot{display:none}}


/* UI-0010 — compact professional footer + favicon-synchronised brand mark */
.site-footer{padding:28px 0 30px}
.footer-inner{gap:12px 26px;padding-top:20px}
.footer-credit strong{font-weight:600}
.footer-credit a{font-weight:650}
.brand-mark{isolation:isolate}
.brand-mark .brand-symbol{width:26px;height:26px}
html[data-theme="night"] .brand-mark .brand-symbol{filter:drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 3px 7px rgba(75,69,190,.14))}
@media(max-width:980px){.site-footer{padding:26px 0 calc(96px + env(safe-area-inset-bottom))}.footer-inner{padding-top:19px}}
@media(max-width:600px){.site-footer{padding-top:24px}.footer-inner{gap:8px;padding-top:18px}.footer-credit{line-height:1.55}}

/* UI-0015 — School floating ribbon navigation (2026).
   One restrained navigation material layer: centre has depth, the side wings fade into the page.
   No dependency, no full-width hard bar, and blur is desktop-only / feature-gated. */
.site-header{
  --header-ribbon:color-mix(in srgb,var(--header-bg) 96%,transparent);
  --header-wing:color-mix(in srgb,var(--header-bg) 72%,transparent);
  --header-line:color-mix(in srgb,var(--line-strong) 68%,transparent);
  --header-shadow:rgba(52,72,112,.12);
  position:sticky;top:0;z-index:40;
  border:0;background:transparent;
  isolation:isolate;
}
.site-header::before{
  content:"";position:absolute;z-index:-2;pointer-events:none;
  top:0;bottom:0;left:50%;
  width:min(calc(var(--content) + 260px),calc(100vw - 8px));
  transform:translateX(-50%);
  border-radius:0 0 34px 34px;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb,var(--header-wing) 30%,transparent) 5%,
    color-mix(in srgb,var(--header-wing) 76%,transparent) 12%,
    var(--header-ribbon) 22%,
    var(--header-ribbon) 78%,
    color-mix(in srgb,var(--header-wing) 76%,transparent) 88%,
    color-mix(in srgb,var(--header-wing) 30%,transparent) 95%,
    transparent 100%);
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--header-line) 58%,transparent),0 12px 34px -28px var(--header-shadow);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
  transition:background .22s ease,box-shadow .24s ease,opacity .22s ease;
}
.site-header::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;bottom:-16px;width:min(calc(var(--content) + 90px),calc(100vw - 34px));height:24px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--header-shadow) 62%,transparent) 0%,color-mix(in srgb,var(--header-shadow) 24%,transparent) 34%,transparent 72%);
  opacity:.34;
  transition:opacity .22s ease,transform .24s ease;
}
.site-header-inner{position:relative;z-index:1;min-height:76px;padding:10px 0;}
.site-header.is-scrolled::before{
  --header-ribbon:color-mix(in srgb,var(--header-bg) 99%,transparent);
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--header-line) 72%,transparent),0 17px 42px -27px color-mix(in srgb,var(--header-shadow) 82%,#000 18%);
}
.site-header.is-scrolled::after{opacity:.48;transform:translateX(-50%) scaleX(.96)}
html[data-theme="night"] .site-header{--header-shadow:rgba(1,5,22,.48);--header-line:rgba(126,145,199,.36)}
@media(prefers-color-scheme:dark){html[data-theme="auto"] .site-header{--header-shadow:rgba(1,5,22,.48);--header-line:rgba(126,145,199,.36)}}

/* A single blur layer is enough for the navigation hierarchy; no nested glass filters. */
@media(min-width:981px){
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .site-header::before{-webkit-backdrop-filter:blur(13px) saturate(118%);backdrop-filter:blur(13px) saturate(118%)}
  }
}

/* The active item sits on the floating ribbon rather than looking like a second flat navbar. */
.nav-link[aria-current="page"]{box-shadow:0 5px 16px rgba(48,74,112,.07)}
html[data-theme="night"] .nav-link[aria-current="page"]{box-shadow:0 6px 18px rgba(0,0,0,.16)}
@media(prefers-color-scheme:dark){html[data-theme="auto"] .nav-link[aria-current="page"]{box-shadow:0 6px 18px rgba(0,0,0,.16)}}

@media(max-width:1180px){
  .site-header::before{width:min(calc(100vw - 6px),calc(var(--content) + 150px));border-radius:0 0 28px 28px}
  .site-header::after{width:min(calc(100vw - 24px),calc(var(--content) + 86px))}
}
@media(max-width:980px){
  .site-header::before{width:100vw;border-radius:0 0 24px 24px;background:linear-gradient(90deg,transparent 0%,var(--header-wing) 5%,var(--header-ribbon) 15%,var(--header-ribbon) 85%,var(--header-wing) 95%,transparent 100%)}
  .site-header::after{width:calc(100vw - 34px)}
  .site-header-inner{min-height:68px}
}
@media(max-width:560px){
  .site-header::before{border-radius:0 0 20px 20px;background:linear-gradient(90deg,transparent 0%,var(--header-wing) 3%,var(--header-ribbon) 11%,var(--header-ribbon) 89%,var(--header-wing) 97%,transparent 100%)}
  .site-header::after{width:calc(100vw - 26px);opacity:.28}
}
@media(forced-colors:active){
  .site-header::before{background:Canvas;border-bottom:1px solid CanvasText;box-shadow:none}
  .site-header::after{display:none}
}

/* UI-0017 — header brand breathing room + professional secondary-button motion.
   The navigation may be wider than page content; the brand must never be flex-squeezed.
   Secondary actions use lift/elevation, not a sheen over text. */
:root{--header-content:min(1360px,calc(100vw - 28px))}
.site-header-inner{width:var(--header-content)}
.brand{flex:0 0 auto;min-width:max-content}
.brand-copy{flex:0 0 auto;white-space:nowrap}
.desktop-nav{flex:0 1 auto;min-width:0}
.header-actions{flex:0 0 auto}
.site-header::before{width:min(calc(var(--header-content) + 92px),calc(100vw - 6px))}
.site-header::after{width:min(calc(var(--header-content) + 24px),calc(100vw - 30px))}

.button{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,filter .2s ease,border-color .2s ease,background .2s ease}
.button-secondary::after{display:none}
@media(hover:hover) and (pointer:fine){
  .button-secondary:hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--purple) 28%,var(--line));
    background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--surface-lilac)),var(--surface));
    box-shadow:0 7px 0 color-mix(in srgb,var(--line-strong) 76%,transparent),0 18px 30px rgba(48,74,112,.13);
    filter:none;
  }
  html[data-theme="night"] .button-secondary:hover{
    border-color:color-mix(in srgb,var(--purple) 34%,var(--line));
    box-shadow:0 7px 0 color-mix(in srgb,var(--line-strong) 76%,transparent),0 18px 30px rgba(0,0,0,.22);
  }
  .button-secondary:hover .icon{transform:translateY(-1px) scale(1.08) rotate(-3deg)}
}
.button-secondary:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--line-strong) 78%,transparent),0 7px 14px rgba(48,74,112,.07)}

@media(max-width:1260px) and (min-width:981px){
  :root{--header-content:calc(100vw - 22px)}
  .site-header-inner{gap:13px}
  .desktop-nav{gap:1px}
  .nav-link{padding-inline:9px;font-size:.86rem}
  .header-actions{gap:7px}
}
@media(max-width:1040px) and (min-width:981px){
  .brand-copy small{display:none}
  .brand{gap:9px}
  .nav-link{padding-inline:8px;font-size:.84rem}
}
@media(max-width:560px){:root{--header-content:calc(100vw - 20px)}}
@media(prefers-color-scheme:dark){
  html[data-theme="auto"] .button-secondary:hover{border-color:color-mix(in srgb,var(--purple) 34%,var(--line));box-shadow:0 7px 0 color-mix(in srgb,var(--line-strong) 76%,transparent),0 18px 30px rgba(0,0,0,.22)}
}

/* UI-0020 — living School wordmark.
   The icon already owns the playful 3D motion; the wordmark adds a tiny composited colour swap,
   never a fast rainbow crawl. The duplicate colour layer is a pseudo-element, so the accessible
   DOM still contains one clean `Tyrus School` text node. */
.brand-name{
  position:relative;
  display:inline-block;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(105deg,#1768d7 0%,#4f66e8 34%,#8a67f5 67%,#d94f88 100%);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:0 1px 0 rgba(255,255,255,.34),0 5px 14px rgba(80,121,246,.08);
  isolation:isolate;
}
.brand-name::after{
  content:attr(data-brand);
  position:absolute;inset:0;
  pointer-events:none;
  color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(105deg,#d66b35 0%,#f38a4d 27%,#ff70aa 60%,#8a67f5 100%);
  -webkit-background-clip:text;background-clip:text;
  opacity:0;
  transform:translateZ(0);
  animation:brand-name-swap 8.4s cubic-bezier(.45,0,.2,1) infinite;
  will-change:opacity;
}
@keyframes brand-name-swap{
  0%,22%,100%{opacity:0}
  45%,67%{opacity:.96}
}
html[data-theme="night"] .brand-name{
  background-image:linear-gradient(105deg,#76dcff 0%,#66efcf 35%,#aab8ff 68%,#ff91bd 100%);
  text-shadow:0 2px 13px rgba(118,220,255,.11);
}
html[data-theme="night"] .brand-name::after{
  background-image:linear-gradient(105deg,#ffe078 0%,#ffb071 30%,#ff8dbb 61%,#ab8cff 100%);
}
@media(prefers-color-scheme:dark){
  html[data-theme="auto"] .brand-name{background-image:linear-gradient(105deg,#76dcff 0%,#66efcf 35%,#aab8ff 68%,#ff91bd 100%);text-shadow:0 2px 13px rgba(118,220,255,.11)}
  html[data-theme="auto"] .brand-name::after{background-image:linear-gradient(105deg,#ffe078 0%,#ffb071 30%,#ff8dbb 61%,#ab8cff 100%)}
}
@media(prefers-reduced-motion:reduce){.brand-name::after{animation:none!important;opacity:0!important}}
@media(forced-colors:active){.brand-name,.brand-name::after{background:none!important;color:CanvasText!important;-webkit-text-fill-color:CanvasText!important;text-shadow:none!important}.brand-name::after{display:none}}


/* UI-0021 — PageSpeed integrity pass.
   Public content is paint-stable before JS, continuous decorative motion starts only after
   real user interaction, and mobile navigation contrast clears WCAG AA. */
:root{
  --nav-muted:#56627f;
  --nav-active:#6347c5;
  --chip-xp:#2f55c4;
  --chip-streak:#964707;
  --chip-word:#6544c2;
}
html[data-theme="night"]{--nav-muted:#b9c4de;--nav-active:#c2b0ff;--chip-xp:#9fb2ff;--chip-streak:#ffc07f;--chip-word:#c6afff}
@media(prefers-color-scheme:dark){html[data-theme="auto"]{--nav-muted:#b9c4de;--nav-active:#c2b0ff;--chip-xp:#9fb2ff;--chip-streak:#ffc07f;--chip-word:#c6afff}}
.mobile-nav a{color:var(--nav-muted)}
.mobile-nav a[aria-current="page"]{color:var(--nav-active)}
.scroll-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;pointer-events:none}
/* Above-the-fold content must never wait for IntersectionObserver to become visible. */
.hero [data-reveal],.materials-hero [data-reveal],.game-top[data-reveal]{opacity:1;transform:none;transition:none}
/* Idle animation is deliberately interaction-gated. This keeps first paint visually complete
   while preserving the living School motion as soon as a real visitor engages. */
html:not(.motion-live) .brand-mark .brand-symbol,
html:not(.motion-live) .brand-glint,
html:not(.motion-live) .brand-name::after,
html:not(.motion-live) .shape,
html:not(.motion-live) .float-chip,
html:not(.motion-live) .world-card::after,
html:not(.motion-live) .cloud-a,html:not(.motion-live) .cloud-b,
html:not(.motion-live) .sun-or-moon,html:not(.motion-live) .sun-or-moon span,
html:not(.motion-live) .world-stars i,html:not(.motion-live) .world-spark,
html:not(.motion-live) .world-island,html:not(.motion-live) .world-castle,
html:not(.motion-live) .tower-left,html:not(.motion-live) .tower-right,
html:not(.motion-live) .word-orb,html:not(.motion-live) .word-orb::after,
html:not(.motion-live) .mini-sheet-c,
html:not(.motion-live) .paper-front,html:not(.motion-live) .paper-spark,
html:not(.motion-live) .material-slide.is-active .material-paper,
html:not(.motion-live) .material-arrow{animation-play-state:paused!important}
/* Avoid permanent compositor reservations before an interaction actually needs them. */
.shape,.brand-name::after{will-change:auto}
.world-card.world-interactive{will-change:auto}
.world-motion-shell.is-world-hover .world-card.world-interactive{will-change:transform}


/* UI-0022 — responsive integrity pass.
   Small screens are first-class: no document-level horizontal drift, controls remain tappable,
   and compact header decisions preserve touch comfort instead of squeezing the brand/actions. */
html,body,.page-shell{max-width:100%;overflow-x:clip}
.main-wrap,.site-header-inner,.footer-inner{min-width:0}
.button{max-width:100%;text-align:center;line-height:1.18}

@media(max-width:560px){
  :root{--content:calc(100vw - 20px);--tap:52px}
  .site-header-inner{gap:6px}
  .brand{gap:7px;min-width:0}
  .brand-copy strong{font-size:.87rem}
  .header-actions{gap:4px;min-width:0}
  .language-picker>summary{width:44px;min-height:44px;border-radius:14px}
  .language-current-flag{width:26px;height:18px}
  .theme-control{gap:2px;padding:3px;border-radius:15px}
  .theme-option{width:44px;height:44px;border-radius:11px}
  .button{min-height:52px;padding-inline:16px;font-size:.92rem}
  .mobile-nav a{min-height:56px}
}
@media(max-width:360px){
  .brand-mark{width:38px;height:38px;border-radius:13px}
  .brand-copy strong{font-size:.72rem;letter-spacing:-.05em}
  .site-header-inner{gap:5px}
  .header-actions{gap:3px}
  .language-picker>summary{width:44px;min-height:44px}
  .theme-option{width:44px;height:44px}
}

/* UI-0024 — semantic School navigation colour system, cascade-corrected.
   Each destination owns a stable accent. The destination selectors deliberately match
   the specificity of the shared `.desktop-nav .nav-link` / `.mobile-nav a` fallback;
   UI-0023 used bare `.nav-*` selectors, so the shared blue fallback won the cascade. */
.desktop-nav .nav-link,
.mobile-nav a{
  --section-accent:#4f7ff2;
  --section-accent-2:#59c9e8;
  --section-tint-strength:12%;
  --section-border-strength:26%;
  --section-glow-strength:12%;
}
.desktop-nav .nav-home,.mobile-nav .nav-home{--section-accent:#2f82f6;--section-accent-2:#55c9ea}
.desktop-nav .nav-languages,.mobile-nav .nav-languages{--section-accent:#7557ee;--section-accent-2:#b26be8}
.desktop-nav .nav-subjects,.mobile-nav .nav-subjects{--section-accent:#0e9fc7;--section-accent-2:#39cdb8}
.desktop-nav .nav-materials,.mobile-nav .nav-materials{--section-accent:#d88a18;--section-accent-2:#ffb35f}
.desktop-nav .nav-games,.mobile-nav .nav-games{--section-accent:#df4f89;--section-accent-2:#ff7778}
.desktop-nav .nav-world,.mobile-nav .nav-world{--section-accent:#22a96f;--section-accent-2:#59d29c}

.desktop-nav .nav-link{
  position:relative;
  border:1px solid transparent;
  background:transparent;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:
    border-color .2s ease,
    box-shadow .22s ease,
    color .18s ease,
    transform .16s cubic-bezier(.2,.8,.2,1);
}
.desktop-nav .nav-link:hover,
.desktop-nav .nav-link[aria-current="page"]{
  color:var(--ink-strong);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--section-accent) var(--section-tint-strength),var(--surface)),
    color-mix(in srgb,var(--section-accent-2) var(--section-tint-strength),var(--surface)));
  border-color:color-mix(in srgb,var(--section-accent) var(--section-border-strength),var(--line));
  box-shadow:
    0 5px 0 color-mix(in srgb,var(--section-accent) 8%,transparent),
    0 10px 24px color-mix(in srgb,var(--section-accent) var(--section-glow-strength),transparent),
    inset 0 1px 0 rgba(255,255,255,.66);
}
.desktop-nav .nav-link[aria-current="page"]{
  --section-tint-strength:18%;
  --section-border-strength:36%;
  --section-glow-strength:16%;
}
.desktop-nav .nav-link .icon{color:currentColor}
.desktop-nav .nav-link:hover .icon,
.desktop-nav .nav-link[aria-current="page"] .icon{
  color:var(--section-accent);
  filter:drop-shadow(0 2px 5px color-mix(in srgb,var(--section-accent) 22%,transparent));
}
.desktop-nav .nav-link:active{
  transform:translateY(2px) scale(.985);
  box-shadow:
    0 2px 0 color-mix(in srgb,var(--section-accent) 10%,transparent),
    0 6px 14px color-mix(in srgb,var(--section-accent) 8%,transparent),
    inset 0 1px 0 rgba(255,255,255,.5);
}

html[data-theme="night"] .desktop-nav .nav-link,
html[data-theme="night"] .mobile-nav a{
  --section-tint-strength:15%;
  --section-border-strength:31%;
  --section-glow-strength:18%;
}
html[data-theme="night"] .desktop-nav .nav-link:hover,
html[data-theme="night"] .desktop-nav .nav-link[aria-current="page"]{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--section-accent) var(--section-tint-strength),var(--nav-bg)),
    color-mix(in srgb,var(--section-accent-2) var(--section-tint-strength),var(--nav-bg)));
  border-color:color-mix(in srgb,var(--section-accent) var(--section-border-strength),var(--line));
  box-shadow:
    0 5px 0 rgba(3,6,22,.18),
    0 12px 28px color-mix(in srgb,var(--section-accent) var(--section-glow-strength),transparent),
    inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="night"] .desktop-nav .nav-link[aria-current="page"]{
  --section-tint-strength:21%;
  --section-border-strength:39%;
  --section-glow-strength:22%;
}

@media(prefers-color-scheme:dark){
  html[data-theme="auto"] .desktop-nav .nav-link,
  html[data-theme="auto"] .mobile-nav a{
    --section-tint-strength:15%;
    --section-border-strength:31%;
    --section-glow-strength:18%;
  }
  html[data-theme="auto"] .desktop-nav .nav-link:hover,
  html[data-theme="auto"] .desktop-nav .nav-link[aria-current="page"]{
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--section-accent) var(--section-tint-strength),var(--nav-bg)),
      color-mix(in srgb,var(--section-accent-2) var(--section-tint-strength),var(--nav-bg)));
    border-color:color-mix(in srgb,var(--section-accent) var(--section-border-strength),var(--line));
    box-shadow:
      0 5px 0 rgba(3,6,22,.18),
      0 12px 28px color-mix(in srgb,var(--section-accent) var(--section-glow-strength),transparent),
      inset 0 1px 0 rgba(255,255,255,.07);
  }
  html[data-theme="auto"] .desktop-nav .nav-link[aria-current="page"]{
    --section-tint-strength:21%;
    --section-border-strength:39%;
    --section-glow-strength:22%;
  }
}

/* Mobile keeps the same learned colour language. The full 44px+ target remains unchanged. */
.mobile-nav a{
  border:1px solid transparent;
  transition:border-color .18s ease,color .18s ease,transform .14s ease,box-shadow .18s ease;
}
.mobile-nav a[aria-current="page"]{
  color:var(--ink-strong);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--section-accent) 15%,var(--surface)),
    color-mix(in srgb,var(--section-accent-2) 13%,var(--surface)));
  border-color:color-mix(in srgb,var(--section-accent) 29%,var(--line));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 5px 12px color-mix(in srgb,var(--section-accent) 11%,transparent);
}
.mobile-nav a[aria-current="page"] .icon{color:var(--section-accent)}
@media(hover:hover) and (pointer:fine){
  .mobile-nav a:hover{
    color:var(--ink-strong);
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--section-accent) 11%,var(--surface)),
      color-mix(in srgb,var(--section-accent-2) 9%,var(--surface)));
    border-color:color-mix(in srgb,var(--section-accent) 21%,var(--line));
  }
}
.mobile-nav a:active{transform:translateY(1px) scale(.985)}
html[data-theme="night"] .mobile-nav a[aria-current="page"]{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--section-accent) 22%,var(--nav-bg)),
    color-mix(in srgb,var(--section-accent-2) 18%,var(--nav-bg)));
  border-color:color-mix(in srgb,var(--section-accent) 36%,var(--line));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 15px color-mix(in srgb,var(--section-accent) 16%,transparent);
}
@media(prefers-color-scheme:dark){
  html[data-theme="auto"] .mobile-nav a[aria-current="page"]{
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--section-accent) 22%,var(--nav-bg)),
      color-mix(in srgb,var(--section-accent-2) 18%,var(--nav-bg)));
    border-color:color-mix(in srgb,var(--section-accent) 36%,var(--line));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 15px color-mix(in srgb,var(--section-accent) 16%,transparent);
  }
}

@media(forced-colors:active){
  .desktop-nav .nav-link,.desktop-nav .nav-link:hover,.desktop-nav .nav-link[aria-current="page"],
  .mobile-nav a,.mobile-nav a[aria-current="page"]{
    background:Canvas!important;color:CanvasText!important;border-color:CanvasText!important;box-shadow:none!important;
  }
  .desktop-nav .nav-link .icon,.mobile-nav a .icon{color:CanvasText!important;filter:none!important}
}