/* ==========================================================================
AiSMART Lab design system — brand.css (v0.3: theme toggle)
Source: lab PPT template (NAS /AiSMART_Lab/AiSMART_投影片模板.pptx)
Logo navy #002079 = --brand-950. Palette built in OKLCH (see ../PALETTE.md).
Serve from /assets/brand/ ; fonts in /assets/brand/fonts/.
========================================================================== */
/* ---- 1. Fonts (JetBrainsMono Nerd Font v3.5.1, OFL-1.1, Latin subset) ---- */
@font-face{font-family:"JetBrainsMono Nerd Font";src:url("fonts/JetBrainsMonoNerdFont-Regular.subset.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrainsMono Nerd Font";src:url("fonts/JetBrainsMonoNerdFont-Medium.subset.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrainsMono Nerd Font";src:url("fonts/JetBrainsMonoNerdFont-Bold.subset.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* ---- 2. Tokens ---- */
:root{
color-scheme:light dark;
/* 2a. Color scales (50–950) */
--brand-50:#F3F7FF; --brand-100:#E4EDFF; --brand-200:#C9DBFE; --brand-300:#A1C1FF; --brand-400:#719CF3; --brand-500:#497BE2; --brand-600:#2A5FD4; --brand-700:#1649C0; --brand-800:#0D3BA5; --brand-900:#052E8E; --brand-950:#002079;
--sky-50:#F0F8FF; --sky-100:#E0EFFB; --sky-200:#C6DEF2; --sky-300:#A3C6E2; --sky-400:#75A4C9; --sky-500:#4B87B2; --sky-600:#266F9F; --sky-700:#055C8C; --sky-800:#014C76; --sky-900:#013E62; --sky-950:#01314E;
--neutral-50:#F9FAFD; --neutral-100:#F2F4F8; --neutral-200:#E1E5ED; --neutral-300:#D0D4DC; --neutral-400:#9DA1A9; --neutral-500:#6D747F; --neutral-600:#4D535E; --neutral-700:#3B404B; --neutral-800:#262B36; --neutral-900:#181D26; --neutral-950:#080E1B;
--red-50:#FFF4F2; --red-100:#FEE7E3; --red-200:#FFCDC5; --red-300:#FFA698; --red-400:#ED7666; --red-500:#D84739; --red-600:#C50E08; --red-700:#A60000; --red-800:#8B0100; --red-900:#730100; --red-950:#5D0100;
--green-50:#EAFDED; --green-100:#DDF4E1; --green-200:#C1E6C7; --green-300:#9AD1A4; --green-400:#66B377; --green-500:#309750; --green-600:#017E38; --green-700:#00692D; --green-800:#025725; --green-900:#01481D; --green-950:#003915;
--amber-50:#FFF5E8; --amber-100:#FBEAD3; --amber-200:#F2D6B1; --amber-300:#E1BA83; --amber-400:#C89343; --amber-500:#AC7300; --amber-600:#8D5E03; --amber-700:#754E02; --amber-800:#624000; --amber-900:#503401; --amber-950:#402800;
--logo-navy:#002079; --logo-lightblue:#ACCEE9;
/* 2b. Semantic colors — light */
--color-bg:#FFFFFF;
--color-surface:var(--neutral-50);
--color-surface-muted:var(--neutral-100);
--color-surface-raised:#FFFFFF;
--color-border:var(--neutral-200);
--color-border-strong:var(--neutral-300);
--color-border-input:var(--neutral-500);
--color-text:var(--neutral-950);
--color-text-muted:var(--neutral-600);
--color-text-subtle:var(--neutral-500);
--color-heading:var(--brand-950); /* logo navy */
--color-primary:var(--brand-700);
--color-primary-hover:var(--brand-800);
--color-primary-active:var(--brand-900);
--color-on-primary:#FFFFFF;
--color-primary-subtle:var(--brand-100);
--color-on-primary-subtle:var(--brand-900);
--color-link:var(--brand-700);
--color-focus-ring:var(--brand-500);
--color-band:var(--brand-950); /* navy hero band, echoes template cover */
--color-on-band:#FFFFFF;
--color-on-band-muted:var(--brand-200);
--color-accent-sky:var(--sky-200);
--color-success:var(--green-700); --color-success-subtle:var(--green-100);
--color-warning:var(--amber-700); --color-warning-subtle:var(--amber-100);
--color-danger:var(--red-600); --color-danger-subtle:var(--red-100); --color-on-danger:#FFFFFF;
/* 2c. Type families */
--font-mono:"JetBrainsMono Nerd Font","JetBrains Mono","Noto Sans TC","Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",monospace;
--font-display:var(--font-mono); /* headings, nav, wordmark, numbers, UI labels */
--font-body:"Noto Sans TC","Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
/* 2d. Type scale — modular 1.2 (minor third), base 16px. Nothing below 13px. */
--fs-xs:0.8333rem; /* 13.33px labels, captions, badges (minimum) */
--fs-sm:0.9rem; /* 14.4px secondary UI text (off-scale helper) */
--fs-base:1rem; /* 16px body */
--fs-md:1.2rem; /* 19.2px lead, h4 */
--fs-lg:1.44rem; /* 23.04px h3 */
--fs-xl:1.728rem; /* 27.65px h2 */
--fs-2xl:2.0736rem; /* 33.18px h1 (mobile) */
--fs-3xl:2.4883rem; /* 39.81px h1 (desktop) */
--fs-4xl:2.986rem; /* 47.78px display */
--fs-h1:clamp(var(--fs-2xl), 1.6rem + 1.6vw, var(--fs-3xl));
--fs-display:clamp(var(--fs-2xl), 1.4rem + 2.6vw, var(--fs-4xl));
--lh-body:1.7; --lh-heading:1.25; --lh-ui:1.4;
--fw-regular:400; --fw-medium:500; --fw-bold:700;
--tracking-mono:-0.01em;
--measure:38em; /* ≈ 38 CJK chars / ~75 Latin chars */
/* 2e. Spacing — 4px base */
--space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem;
--space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;
--gutter:clamp(var(--space-5), 4vw, var(--space-10));
--container:72rem; /* 1152px */
/* 2f. Radius — hierarchy: small controls < cards < panels */
--radius-xs:2px; /* focus outline, code */
--radius-sm:4px; /* badges, inputs */
--radius-md:8px; /* buttons, list items */
--radius-lg:12px; /* cards, panels */
--radius-xl:20px; /* hero band / large media */
--radius-pill:999px;
/* 2g. Elevation — navy-tinted, 3 levels */
--shadow-1:0 1px 2px rgb(0 32 121 / .06), 0 0 0 1px rgb(0 32 121 / .04);
--shadow-2:0 4px 12px -2px rgb(0 32 121 / .10), 0 2px 4px rgb(0 32 121 / .06);
--shadow-3:0 16px 40px -8px rgb(0 32 121 / .18), 0 4px 8px rgb(0 32 121 / .06);
/* 2h. Motion */
--ease:cubic-bezier(.2,.7,.2,1); --dur-1:120ms; --dur-2:200ms;
--focus-ring:0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus-ring);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
/* Muted blue scale for dark surfaces and accents; light/logo tokens stay original. */
--brand-50:#EFF3F8; --brand-100:#DDE6F1; --brand-200:#C5D4E7; --brand-300:#A6BDD9; --brand-400:#859FBF; --brand-500:#6884A6; --brand-600:#4C6688; --brand-700:#384E6C; --brand-800:#2B3D56; --brand-900:#203047; --brand-950:#142034;
--color-bg:var(--neutral-950);
--color-surface:var(--neutral-900);
--color-surface-muted:var(--neutral-800);
--color-surface-raised:var(--neutral-900);
--color-border:var(--neutral-800);
--color-border-strong:var(--neutral-700);
--color-border-input:var(--neutral-500);
--color-text:var(--neutral-100);
--color-text-muted:var(--neutral-300);
--color-text-subtle:var(--neutral-400);
--color-heading:var(--brand-100);
--color-primary:var(--brand-300);
--color-primary-hover:var(--brand-200);
--color-primary-active:var(--brand-100);
--color-on-primary:var(--brand-950);
--color-primary-subtle:var(--brand-900);
--color-on-primary-subtle:var(--brand-200);
--color-link:var(--brand-200);
--color-focus-ring:var(--brand-400);
--color-band:var(--brand-950);
--color-on-band:#FFFFFF;
--color-on-band-muted:var(--brand-200);
--color-accent-sky:var(--sky-300);
--color-success:var(--green-300); --color-success-subtle:var(--green-900);
--color-warning:var(--amber-300); --color-warning-subtle:var(--amber-900);
--color-danger:var(--red-300); --color-danger-subtle:var(--red-900); --color-on-danger:var(--red-950);
--shadow-1:0 0 0 1px rgb(255 255 255 / .06);
--shadow-2:0 4px 14px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .06);
--shadow-3:0 16px 40px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .08);
}
}
/* Forced theme (aismart-theme = light|dark, set by i18n.js). Mirrors the media block above. */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark;
/* Muted blue scale for dark surfaces and accents; light/logo tokens stay original. */
--brand-50:#EFF3F8; --brand-100:#DDE6F1; --brand-200:#C5D4E7; --brand-300:#A6BDD9; --brand-400:#859FBF; --brand-500:#6884A6; --brand-600:#4C6688; --brand-700:#384E6C; --brand-800:#2B3D56; --brand-900:#203047; --brand-950:#142034;
--color-bg:var(--neutral-950);
--color-surface:var(--neutral-900);
--color-surface-muted:var(--neutral-800);
--color-surface-raised:var(--neutral-900);
--color-border:var(--neutral-800);
--color-border-strong:var(--neutral-700);
--color-border-input:var(--neutral-500);
--color-text:var(--neutral-100);
--color-text-muted:var(--neutral-300);
--color-text-subtle:var(--neutral-400);
--color-heading:var(--brand-100);
--color-primary:var(--brand-300);
--color-primary-hover:var(--brand-200);
--color-primary-active:var(--brand-100);
--color-on-primary:var(--brand-950);
--color-primary-subtle:var(--brand-900);
--color-on-primary-subtle:var(--brand-200);
--color-link:var(--brand-200);
--color-focus-ring:var(--brand-400);
--color-band:var(--brand-950);
--color-on-band:#FFFFFF;
--color-on-band-muted:var(--brand-200);
--color-accent-sky:var(--sky-300);
--color-success:var(--green-300); --color-success-subtle:var(--green-900);
--color-warning:var(--amber-300); --color-warning-subtle:var(--amber-900);
--color-danger:var(--red-300); --color-danger-subtle:var(--red-900); --color-on-danger:var(--red-950);
--shadow-1:0 0 0 1px rgb(255 255 255 / .06);
--shadow-2:0 4px 14px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .06);
--shadow-3:0 16px 40px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .08);
}
/* ---- 3. Base elements ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--color-bg);color:var(--color-text);
font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);font-kerning:normal;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--color-heading);line-height:var(--lh-heading);font-weight:var(--fw-bold);letter-spacing:var(--tracking-mono);margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)} h4{font-size:var(--fs-md)}
p{margin:0;max-width:var(--measure);text-wrap:pretty}
small{font-size:var(--fs-xs)}
a{color:var(--color-link);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--color-primary-hover)}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:3px;border-radius:var(--radius-xs)}
code,kbd,samp,pre{font-family:var(--font-mono);font-size:.9em}
img,svg{display:block;max-width:100%}
svg{flex:none}
.num,.spec{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
/* Skip link */
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:100;background:var(--color-surface-raised);color:var(--color-text);
padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);box-shadow:var(--shadow-3);font-family:var(--font-display);font-size:var(--fs-sm)}
.skip:focus{top:var(--space-3)}
/* ---- 4. Components ---- */
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-5);
border-radius:var(--radius-md);border:1px solid transparent;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-medium);
line-height:1;text-decoration:none;cursor:pointer;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.btn-primary{background:var(--color-primary);color:var(--color-on-primary)}
.btn-primary:hover{background:var(--color-primary-hover);color:var(--color-on-primary)}
.btn-primary:active{background:var(--color-primary-active)}
.btn-secondary{background:transparent;color:var(--color-text);border-color:var(--color-border-strong)}
.btn-secondary:hover{border-color:var(--color-text-subtle);color:var(--color-text)}
/* Status badge */
.badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);
font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:var(--lh-ui);
background:var(--color-surface-muted);color:var(--color-text-muted)}
.badge::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor}
.badge-success{background:var(--color-success-subtle);color:var(--color-success)}
.badge-warning{background:var(--color-warning-subtle);color:var(--color-warning)}
/* ---- 5. Shared header ---- */
.site-header{background:var(--color-bg);border-bottom:1px solid var(--color-border);position:relative;z-index:10}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:76px;padding-block:var(--space-3)}
.site-brand{display:flex;align-items:center;gap:var(--space-4);text-decoration:none;color:var(--color-text)}
.site-brand:hover{color:var(--color-text)}
.site-brand__logo{height:44px;width:auto}
.site-brand__logo--dark{display:none}
.site-brand__text{display:flex;flex-direction:column;padding-left:var(--space-4);border-left:1px solid var(--color-border);line-height:var(--lh-ui)}
.site-brand__name{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-base);color:var(--color-heading);letter-spacing:var(--tracking-mono)}
.site-brand__affil{font-size:var(--fs-xs);color:var(--color-text-muted)}
.site-nav ul{display:flex;gap:var(--space-1);list-style:none;margin:0;padding:0}
.site-nav a{display:flex;align-items:center;min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-md);
font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-text-muted);text-decoration:none;white-space:nowrap;
transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.site-nav a:hover{color:var(--color-text);background:var(--color-surface-muted)}
.site-nav a[aria-current="page"]{color:var(--color-primary);background:var(--color-primary-subtle)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .site-brand__logo--light{display:none}
:root:not([data-theme="light"]) .site-brand__logo--dark{display:block}
:root:not([data-theme="light"]) .site-nav a[aria-current="page"]{color:var(--color-on-primary-subtle)}
}
:root[data-theme="dark"] .site-brand__logo--light{display:none}
:root[data-theme="dark"] .site-brand__logo--dark{display:block}
:root[data-theme="dark"] .site-nav a[aria-current="page"]{color:var(--color-on-primary-subtle)}
/* ---- 6. Shared footer ---- */
.site-footer{margin-top:auto;border-top:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);font-size:var(--fs-sm)}
.site-footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-4) var(--space-10);padding-block:var(--space-8)}
.site-footer__brand{display:flex;flex-direction:column;gap:var(--space-1)}
.site-footer__name{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--color-heading);font-size:var(--fs-base)}
.site-footer__contact{font-family:var(--font-mono);font-size:var(--fs-sm)}
.site-footer a{color:var(--color-text-muted)}
.site-footer a:hover{color:var(--color-link)}
@media (max-width:720px){
.site-header__inner{flex-direction:column;align-items:stretch;gap:var(--space-2);padding-block:var(--space-3) var(--space-1)}
.site-brand__logo{height:38px}
.site-nav{margin-inline:calc(var(--space-3) * -1)}
.site-nav ul{overflow-x:auto;scrollbar-width:none}
.site-footer__inner{flex-direction:column;padding-block:var(--space-6)}
}
/* ---- 7. Motion preference ---- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ---- 8. Circuit hero (navy band, full-bleed PCB-trace pattern) ----
circuit-bg.svg: 2560×512 composed PCB art (src/gen_pcb.py).
True parallel bus offsets, circular 45° fillets, three depth levels, one footprint.
Cover fills the entire band; a soft radial mask dims art behind the heading.
Static by design. The legacy pulse is disabled because its path no longer matches. */
.hero--circuit{position:relative;isolation:isolate;overflow:hidden;background-color:var(--color-band);color:var(--color-on-band);
--hero-text-x:calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + 17rem)}
.hero--circuit::before,.hero--circuit::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-repeat:no-repeat;background-position:center;background-size:cover;
-webkit-mask-image:radial-gradient(ellipse 36rem 85% at var(--hero-text-x) 50%,rgb(0 0 0 / .32) 0,rgb(0 0 0 / .40) 60%,#000 100%);
mask-image:radial-gradient(ellipse 36rem 85% at var(--hero-text-x) 50%,rgb(0 0 0 / .32) 0,rgb(0 0 0 / .40) 60%,#000 100%)}
.hero--circuit::before{background-image:url("circuit-bg.svg")}
.hero--circuit::after{content:none}
.hero--circuit h1,.hero--circuit h2{color:var(--color-on-band)}
@media (max-width:720px){
.hero--circuit::before,.hero--circuit::after{
background-position:72% center;
-webkit-mask-image:radial-gradient(ellipse 95% 85% at 30% 50%,rgb(0 0 0 / .30) 0,rgb(0 0 0 / .4) 50%,#000 100%);
mask-image:radial-gradient(ellipse 95% 85% at 30% 50%,rgb(0 0 0 / .30) 0,rgb(0 0 0 / .4) 50%,#000 100%)}
}
@media (prefers-reduced-motion:reduce){.hero--circuit::after{display:none}}
/* ---- 9. Trace divider: thin trace with one 45° jog and a via at each end ----
(colour = --color-border-strong; .divider--accent for primary) */
.divider{height:17px;color:var(--color-border-strong);background:currentColor;
-webkit-mask:
radial-gradient(circle at 4px 12.5px,transparent 2.4px,#000 2.5px 3.6px,transparent 3.7px) 0 0/100% 100% no-repeat,
radial-gradient(circle at calc(100% - 4px) 4.5px,transparent 2.4px,#000 2.5px 3.6px,transparent 3.7px) 0 0/100% 100% no-repeat,
linear-gradient(#000,#000) 8px 12px/calc(50% - 16px) 1px no-repeat,
url("divider-jog.svg") 50% 0/16px 17px no-repeat,
linear-gradient(#000,#000) right 8px top 4px/calc(50% - 16px) 1px no-repeat;
mask:
radial-gradient(circle at 4px 12.5px,transparent 2.4px,#000 2.5px 3.6px,transparent 3.7px) 0 0/100% 100% no-repeat,
radial-gradient(circle at calc(100% - 4px) 4.5px,transparent 2.4px,#000 2.5px 3.6px,transparent 3.7px) 0 0/100% 100% no-repeat,
linear-gradient(#000,#000) 8px 12px/calc(50% - 16px) 1px no-repeat,
url("divider-jog.svg") 50% 0/16px 17px no-repeat,
linear-gradient(#000,#000) right 8px top 4px/calc(50% - 16px) 1px no-repeat}
.divider--accent{color:var(--color-primary)}
/* ---- 10. Language (中文 / EN) — see i18n.js ---- */
html:not([data-lang="en"]) .t[lang="en"],
html[data-lang="en"] .t[lang="zh-Hant"]{display:none!important}
html[lang="en"] body{line-height:1.6}
html[lang="en"] p{max-width:34em}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{letter-spacing:-.02em}
.lang-toggle{display:inline-flex;padding:2px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface)}
.lang-toggle button{appearance:none;border:0;background:transparent;min-width:44px;min-height:36px;padding:0 var(--space-3);border-radius:6px;
font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--color-text-muted);cursor:pointer;line-height:1}
.lang-toggle button:hover{color:var(--color-text)}
.lang-toggle button:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:1px}
html:not([data-lang="en"]) .lang-toggle [data-set-lang="zh"],
html[data-lang="en"] .lang-toggle [data-set-lang="en"]{background:var(--color-primary);color:var(--color-on-primary)}
.site-header__tools{display:flex;align-items:center;gap:var(--space-4)}
/* ---- 11. Theme toggle (自動 / 淺色 / 深色) — see i18n.js ----
One button, cycles auto -> light -> dark. Icon + label follow , so no flash. */
.theme-toggle{appearance:none;display:inline-flex;align-items:center;gap:var(--space-2);min-height:42px;padding:0 var(--space-3);margin:0;
border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-muted);
font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:1;cursor:pointer;white-space:nowrap;
transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.theme-toggle:hover{color:var(--color-text);border-color:var(--color-text-subtle)}
.theme-toggle:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
.theme-toggle svg{width:18px;height:18px;flex:none;display:none}
.theme-toggle__label > span{display:none}
html:not([data-theme-pref="light"]):not([data-theme-pref="dark"]) .theme-toggle [data-for="auto"],
html[data-theme-pref="light"] .theme-toggle [data-for="light"],
html[data-theme-pref="dark"] .theme-toggle [data-for="dark"]{display:inline}
html:not([data-theme-pref="light"]):not([data-theme-pref="dark"]) .theme-toggle svg[data-for="auto"],
html[data-theme-pref="light"] .theme-toggle svg[data-for="light"],
html[data-theme-pref="dark"] .theme-toggle svg[data-for="dark"]{display:block}
.site-prefs{display:inline-flex;align-items:center;gap:var(--space-2)}
@media (max-width:720px){
.site-header__inner{position:relative}
.lang-toggle{position:absolute;top:var(--space-3);right:var(--gutter)}
.site-brand{padding-right:6.5rem}
.site-header__tools{display:contents}
/* Prefs group (theme + language) pins top-right; the theme label collapses to its icon. */
.site-prefs{position:absolute;top:var(--space-3);right:var(--gutter)}
.site-prefs .lang-toggle{position:static}
.site-header__inner:has(.site-prefs) .site-brand{padding-right:9.75rem}
.theme-toggle{min-width:44px;justify-content:center;padding:0 var(--space-2)}
.theme-toggle__label{display:none}
}
@media (max-width:420px){.site-brand__affil{display:none}.site-brand__text{justify-content:center}}
/* Very narrow phones (≤359px): the logo already reads "AiSMART Lab"; drop the text so it never slides under the prefs group. */
@media (max-width:359px){.site-brand__text{display:none}.site-brand{min-width:0}}