/* FDE Academy design system. One fixed color meaning site-wide. */
:root{
  --bg:#ffffff; --surface:#f6f7f9; --surface-2:#eceff3; --text:#1a1d23; --muted:#5b6472; --border:#d9dde3;
  --accent:#2563eb; --accent-ink:#ffffff;
  /* meaning colors */
  --c-client:#2563eb; --c-system:#15803d; --c-ai:#7c3aed; --c-data:#c2410c; --c-ext:#6b7280; --c-fail:#dc2626; --c-warn:#b45309;
  --c-client-bg:#dbeafe; --c-system-bg:#dcfce7; --c-ai-bg:#ede9fe; --c-data-bg:#ffedd5; --c-ext-bg:#e5e7eb; --c-fail-bg:#fee2e2; --c-warn-bg:#fef3c7;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --r:10px;
}
[data-theme="dark"]{
  --bg:#0f1218; --surface:#181c24; --surface-2:#222833; --text:#e8eaee; --muted:#9aa3b2; --border:#2a303b;
  --accent:#6ea0ff; --accent-ink:#0f1218;
  --c-client:#6ea0ff; --c-system:#4ade80; --c-ai:#a78bfa; --c-data:#fb923c; --c-ext:#9ca3af; --c-fail:#f87171; --c-warn:#fbbf24;
  --c-client-bg:#1e2a45; --c-system-bg:#16301f; --c-ai-bg:#2a2147; --c-data-bg:#3a2314; --c-ext-bg:#2a2f38; --c-fail-bg:#3d1a1a; --c-warn-bg:#3a2d10;
}
*{box-sizing:border-box}
html{font-size:17px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:46rem;margin:0 auto;padding:0 var(--s2)}
.wide{max-width:60rem;margin:0 auto;padding:0 var(--s2)}
h1{font-size:2.2rem;line-height:1.2;margin:.3em 0}
h2{font-size:1.5rem;line-height:1.3;margin:2.2em 0 .5em}
h3{font-size:1.15rem;margin:1.5em 0 .4em}
p,li{max-width:68ch}
code{font-family:var(--mono);background:var(--surface-2);padding:.1em .35em;border-radius:4px;font-size:.9em}
.muted{color:var(--muted)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.8rem var(--s2);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:10}
.topbar .brand{font-weight:700;text-decoration:none;color:var(--text)}
.topbar nav{display:flex;gap:1rem;align-items:center}
button,.btn{font:inherit;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:.45rem .9rem;border-radius:8px;min-height:44px}
button:hover,.btn:hover{background:var(--surface-2)}
button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600;text-decoration:none;display:inline-flex;align-items:center}
button:disabled{opacity:.5;cursor:not-allowed}
.progressbar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.progressbar>div{height:100%;background:var(--c-system);width:0;transition:width .3s}
.kicker{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.meta{display:flex;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.pill{display:inline-block;font-size:.75rem;font-weight:600;padding:.1rem .55rem;border-radius:999px;border:1px solid var(--border);background:var(--surface)}
.pill.free{background:var(--c-system-bg);color:var(--c-system);border-color:var(--c-system)}

/* callouts */
.callout{border-left:4px solid var(--accent);background:var(--surface);padding:.8rem 1rem;border-radius:0 var(--r) var(--r) 0;margin:1.2rem 0}
.callout.field{border-color:var(--c-warn);background:var(--c-warn-bg)}
.callout.hook{border-color:var(--c-fail);background:var(--c-fail-bg)}
.callout strong.label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem}

/* figure / diagram */
figure.fig{margin:1.5rem 0;padding:var(--s2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
figure.fig figcaption{font-size:.9rem;color:var(--muted);margin-top:.5rem}
svg.diagram{width:100%;height:auto;display:block}
svg.diagram text{font-family:var(--font);font-size:14px;fill:var(--text)}
svg.diagram .small{font-size:12px;fill:var(--muted)}
.node rect,.node circle,.node path{stroke-width:2;transition:opacity .25s,stroke-width .25s,filter .25s}
.node.client rect{fill:var(--c-client-bg);stroke:var(--c-client)}
.node.system rect{fill:var(--c-system-bg);stroke:var(--c-system)}
.node.ai rect{fill:var(--c-ai-bg);stroke:var(--c-ai)}
.node.data rect{fill:var(--c-data-bg);stroke:var(--c-data)}
.node.ext rect{fill:var(--c-ext-bg);stroke:var(--c-ext)}
.node.fail rect{fill:var(--c-fail-bg);stroke:var(--c-fail)}
.node.warn rect{fill:var(--c-warn-bg);stroke:var(--c-warn)}
.edge{fill:none;stroke:var(--muted);stroke-width:2;transition:stroke .25s,stroke-width .25s,opacity .25s}
.edge.dashed{stroke-dasharray:6 5}
svg.diagram .dim{opacity:.28}
svg.diagram .node.active rect{stroke-width:4;filter:drop-shadow(0 0 6px var(--accent))}
svg.diagram .edge.active{stroke:var(--accent);stroke-width:4}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.8rem;color:var(--muted);margin-top:.6rem}
.legend span::before{content:"";display:inline-block;width:.8em;height:.8em;border-radius:3px;margin-right:.35em;vertical-align:-1px;border:2px solid}
.legend .l-client::before{background:var(--c-client-bg);border-color:var(--c-client)}
.legend .l-system::before{background:var(--c-system-bg);border-color:var(--c-system)}
.legend .l-ai::before{background:var(--c-ai-bg);border-color:var(--c-ai)}
.legend .l-data::before{background:var(--c-data-bg);border-color:var(--c-data)}
.legend .l-fail::before{background:var(--c-fail-bg);border-color:var(--c-fail)}

/* stepper */
fx-stepper{display:block}
.stepper-ctl{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.8rem}
.stepper-cap{margin-top:.6rem;padding:.7rem .9rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;min-height:4.2rem}
.stepper-cap b{display:block}
.stepper-count{margin-left:auto;font-size:.85rem;color:var(--muted)}

/* tabs / compare */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.bar-row{display:grid;grid-template-columns:9rem 1fr 3rem;gap:.6rem;align-items:center;margin:.35rem 0;font-size:.9rem}
.bar-row .track{background:var(--surface-2);border-radius:5px;height:18px;overflow:hidden}
.bar-row .fill{height:100%;background:var(--c-client);width:0;transition:width .5s}
.bar-row .fill.alt{background:var(--c-system)}
.bar-row .fill.ai{background:var(--c-ai)}
.bar-row .fill.data{background:var(--c-data)}
.bar-row .fill.warn{background:var(--c-warn)}
@media(max-width:600px){.bar-row{grid-template-columns:6.5rem 1fr 2.5rem}}

/* quiz / predict */
fx-quiz,fx-predict{display:block;margin:1.4rem 0;padding:var(--s2);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.q-title{font-weight:600;margin:0 0 .6rem}
.opt{display:block;width:100%;text-align:left;margin:.35rem 0;background:var(--bg)}
.opt[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.opt.right{border-color:var(--c-system);background:var(--c-system-bg)}
.opt.wrong{border-color:var(--c-fail);background:var(--c-fail-bg)}
.fb{margin-top:.6rem;padding:.6rem .8rem;border-radius:8px;background:var(--bg);border:1px solid var(--border)}
.fb.ok{border-color:var(--c-system)}
.fb.no{border-color:var(--c-fail)}
.reveal[hidden]{display:none}
.reveal{margin-top:.8rem;padding:.8rem 1rem;background:var(--bg);border:1px solid var(--c-ai);border-radius:8px}

/* scenario */
fx-scenario{display:block;margin:1.4rem 0;padding:var(--s2);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.meters{display:flex;gap:1rem;margin-bottom:.6rem;flex-wrap:wrap}
.meter{flex:1;min-width:8rem;font-size:.8rem}
.meter .track{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin-top:.2rem}
.meter .fill{height:100%;background:var(--c-system);transition:width .4s}
.meter.risk .fill{background:var(--c-warn)}
.say{padding:.7rem .9rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;margin:.5rem 0}
.say .who{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}

/* index */
.hero{padding:var(--s5) 0 var(--s3)}
.hero p.lead{font-size:1.2rem;color:var(--muted)}
.mod{margin:2rem 0}
.chap{display:flex;gap:.8rem;align-items:center;padding:.65rem .8rem;border:1px solid var(--border);border-radius:8px;margin:.4rem 0;background:var(--surface);text-decoration:none;color:var(--text)}
.chap:hover{border-color:var(--accent)}
.chap .num{font-variant-numeric:tabular-nums;color:var(--muted);width:2rem}
.chap .t{flex:1}
.chap.locked{opacity:.85}
.chap.soon{opacity:.55;pointer-events:none}
.price{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin:1.5rem 0}
.price>div{border:1px solid var(--border);border-radius:var(--r);padding:1.2rem;background:var(--surface)}
.price .amt{font-size:2rem;font-weight:700}
footer{margin:var(--s5) 0 var(--s4);color:var(--muted);font-size:.85rem;border-top:1px solid var(--border);padding-top:var(--s2)}
.pager{display:flex;justify-content:space-between;gap:1rem;margin:2rem 0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.topbar,.stepper-ctl,button{display:none}}

/* sort / decode / review */
.match-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.8rem;margin-top:.8rem}
.match-col{background:var(--bg);border:1px dashed var(--border);border-radius:8px;padding:.5rem}
.decode-btn{display:inline;min-height:0;padding:.05rem .35rem;margin:0 .1rem;border-radius:5px;border:1px solid var(--c-warn);background:var(--c-warn-bg);color:var(--text)}
.decode-btn[data-sig="good"]{border-color:var(--c-system);background:var(--c-system-bg)}
.decode-btn[data-sig="flag"]{border-color:var(--c-fail);background:var(--c-fail-bg)}
.decode-btn[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent)}
fx-decode{display:block;margin:1.4rem 0;padding:var(--s2);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
fx-decode .posting{background:var(--bg);padding:.8rem 1rem;border-radius:8px;border:1px solid var(--border);line-height:2}
.flashcard{padding:1.2rem;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin:1rem 0}
table.t{border-collapse:collapse;width:100%;font-size:.9rem;margin:1rem 0}
table.t th,table.t td{border:1px solid var(--border);padding:.45rem .6rem;text-align:left;vertical-align:top}
table.t th{background:var(--surface-2)}

fx-tree,fx-assess{display:block;margin:1.4rem 0;padding:var(--s2);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.rate-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.4rem 0;border-bottom:1px solid var(--border)}
.rate{display:flex;gap:.25rem}
.rate button{min-width:44px;padding:.3rem}
.rate button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}

/* progress sidebar: left, collapsible */
.side{position:fixed;left:0;top:var(--topbar-h,4.3rem);bottom:0;width:17.5rem;background:var(--bg);border-right:1px solid var(--border);padding:.8rem .9rem 2rem;overflow-y:auto;z-index:8;transform:translateX(-102%);transition:transform .2s}
body.side-open .side{transform:none}
.side-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.4rem}
.side-chap{margin:.8rem 0 .25rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.side-links{font-size:.85rem;margin:.8rem 0 .2rem}
.sr{position:absolute;left:-9999px}
@media(min-width:1000px){
  body.side-open main.wrap{margin-left:max(19rem,calc((100vw + 19rem - 46rem)/2));margin-right:auto}
  body.side-open .wide{margin-left:19rem;margin-right:auto}
}
@media(max-width:999px){body.side-open .side{box-shadow:4px 0 24px rgba(0,0,0,.3);width:min(86vw,20rem)}}
/* diagrams: never clip text, scroll on small screens */
figure.fig{overflow-x:auto}
svg.diagram{overflow:visible;min-width:560px}
details.rv{border:1px solid var(--border);border-radius:8px;padding:.5rem .8rem;margin:.4rem 0;background:var(--bg)}
details.rv summary{cursor:pointer;font-weight:600}
fx-quizset,fx-chapter-review{display:block;margin:1rem 0}
fx-quizset{padding:var(--s2);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}

/* tokens, budget, embed map, rag sim */
.fx-ta{width:100%;font:inherit;padding:.6rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}
.fx-num{width:7rem;font:inherit;padding:.3rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text)}
fx-tokens,fx-budget,fx-embed-map,fx-ragsim{display:block;margin:1.4rem 0;padding:var(--s2);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.tok-view{margin:.6rem 0;line-height:2.1;font-family:var(--mono);font-size:.9rem;word-break:break-word}
.tok{padding:.1rem .12rem;border-radius:3px;border-bottom:2px solid transparent}
.t0{background:var(--c-client-bg);border-color:var(--c-client)}.t1{background:var(--c-system-bg);border-color:var(--c-system)}.t2{background:var(--c-ai-bg);border-color:var(--c-ai)}.t3{background:var(--c-data-bg);border-color:var(--c-data)}.t4{background:var(--c-warn-bg);border-color:var(--c-warn)}
.tok-ctl{display:flex;gap:1rem;flex-wrap:wrap;margin:.6rem 0}
.bud-bar{display:flex;height:34px;border-radius:8px;overflow:hidden;border:2px solid var(--border);background:var(--bg);margin:.6rem 0}
.bud-bar.over{border-color:var(--c-fail)}
.seg{height:100%;min-width:2px}
.seg.sys,.seg-l.sys{background:var(--c-ext)}.seg.hist,.seg-l.hist{background:var(--c-client)}.seg.docs,.seg-l.docs{background:var(--c-data)}.seg.usr,.seg-l.usr{background:var(--c-system)}.seg.out,.seg-l.out{background:var(--c-ai)}
.seg-l{padding-left:.3rem;border-left:12px solid;background:none!important;border-color:inherit}
.legend .seg-l.sys{border-color:var(--c-ext)}.legend .seg-l.hist{border-color:var(--c-client)}.legend .seg-l.docs{border-color:var(--c-data)}.legend .seg-l.usr{border-color:var(--c-system)}.legend .seg-l.out{border-color:var(--c-ai)}
.bud-row{display:grid;grid-template-columns:11rem 1fr 5rem;gap:.6rem;align-items:center;margin:.3rem 0;font-size:.9rem}
.bud-row input[type=range]{width:100%}
@media(max-width:600px){.bud-row{grid-template-columns:7rem 1fr 4rem}}
.qrow{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
.qrow .opt{width:auto;margin:0}
.qrow label{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .5rem;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.pt circle{stroke-width:2;transition:r .2s}
.pt.c0 circle{fill:var(--c-client-bg);stroke:var(--c-client)}.pt.c1 circle{fill:var(--c-ai-bg);stroke:var(--c-ai)}.pt.c2 circle{fill:var(--c-system-bg);stroke:var(--c-system)}.pt.c3 circle{fill:var(--c-data-bg);stroke:var(--c-data)}
.pt.hit circle{r:9;stroke-width:4}.pt:not(.hit) text{opacity:.7}
.cl-0{fill:var(--c-client)}.cl-1{fill:var(--c-ai)}.cl-2{fill:var(--c-system)}.cl-3{fill:var(--c-data)}
.qpt path{fill:var(--accent);stroke:var(--text);stroke-width:1.5}.qpt .qt{font-weight:700;font-size:12px}
.embed-res{margin:.6rem 0;padding-left:1.4rem}
.badge{display:inline-block;margin-left:.35rem;padding:0 .4rem;border-radius:999px;font-size:.65rem;font-weight:700;vertical-align:1px;border:1px solid}
.badge.new{color:var(--c-ai);border-color:var(--c-ai);background:var(--c-ai-bg)}
.badge.upd{color:var(--c-warn);border-color:var(--c-warn);background:var(--c-warn-bg)}
.badge.free{color:var(--c-system);border-color:var(--c-system);background:var(--c-system-bg)}
fx-embed-map,fx-budget,fx-ragsim,fx-tokens{overflow-x:auto}
.co-grid{align-items:start}

/* top bar polish: quiet links, brand mark, clear sign-in button */
.topbar{padding:.65rem var(--s2);backdrop-filter:saturate(1.2) blur(8px);background:color-mix(in srgb,var(--bg) 88%,transparent)}
.topbar .brand{display:inline-flex;align-items:center;font-size:1.05rem;letter-spacing:-.01em}
.topbar .brand::before{content:"";display:inline-block;width:1.05rem;height:1.05rem;border-radius:5px;margin-right:.55rem;background:linear-gradient(135deg,var(--c-client),var(--c-ai))}
.topbar nav{gap:.15rem;flex-wrap:wrap;justify-content:flex-end}
.topbar nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.92rem;padding:.4rem .7rem;border-radius:8px;transition:background .15s,color .15s}
.topbar nav a:hover{color:var(--text);background:var(--surface-2)}
.topbar nav a[href$="login.html"],.topbar nav a[data-account-link]{color:var(--accent);border:1px solid var(--accent);margin-left:.4rem;font-weight:600}
.topbar nav a[href$="login.html"]:hover,.topbar nav a[data-account-link]:hover{background:var(--accent);color:var(--accent-ink)}
.topbar nav button{min-height:36px;padding:.3rem .75rem;margin-left:.3rem;font-size:.9rem;border-radius:8px}
a.btn,a.btn:hover{text-decoration:none}
a.btn:not(.primary){color:var(--text)}
.side-links a,.side a.sl,.pager a{text-decoration:none}
.side-links a{color:var(--accent);font-weight:500}
.side-links a:hover{text-decoration:underline}
.topbar nav a:focus-visible{outline:3px solid var(--accent)}
@media(max-width:700px){.topbar nav a{padding:.35rem .5rem;font-size:.85rem}.topbar{align-items:flex-start;gap:.4rem}}
.topbar .brand{white-space:nowrap}
.hero p:has(> .btn){display:flex;flex-wrap:wrap;gap:.6rem}
.btn,a.btn{white-space:normal;text-align:center}
@media(max-width:700px){
  .topbar{align-items:center}
  .topbar nav a[href^="#"]:not([href="#pricing"]){display:none}
}

/* real logo mark in the top bar */
.topbar .brand::before{background:url(../brand/mark.svg) center/contain no-repeat;border-radius:0;width:1.7rem;height:1.7rem;margin-right:.6rem}

/* progress panel: clean accordion rows */
.side{padding:.9rem .75rem 2rem}
.side-head{padding:0 .35rem}
.side .progressbar{height:5px;margin:.45rem .35rem .2rem}
.side-chap{padding:0 .35rem;margin:.7rem 0 .15rem}
.side-links{display:flex;flex-wrap:wrap;gap:.2rem .9rem;padding:0 .35rem;margin:.9rem 0 .4rem;font-size:.8rem}
.side-links a{color:var(--muted);text-decoration:none}
.side-links a:hover{color:var(--accent);text-decoration:underline}
.side-list{margin-top:.5rem}
.side-mod-d{border-top:1px solid var(--border);padding:.2rem 0}
.side-mod-d>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.45rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted);padding:.5rem .35rem;border-radius:7px}
.side-mod-d>summary::-webkit-details-marker{display:none}
.side-mod-d>summary:hover{background:var(--surface-2)}
.side-mod-d>summary::before{content:"";flex:none;width:.4rem;height:.4rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.side-mod-d[open]>summary::before{transform:rotate(45deg)}
.side-mod-d .cnt{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none}
.side-row{display:grid;grid-template-columns:1rem 1fr auto;gap:.45rem;align-items:baseline;padding:.34rem .4rem;border-radius:7px;text-decoration:none;color:var(--text);font-size:.84rem;line-height:1.3}
a.side-row:hover{background:var(--surface-2)}
.side-row.now{background:var(--surface-2);font-weight:600;color:var(--accent)}
.side-row .ic{text-align:center;font-size:.8rem}
.side-row.done .ic{color:var(--c-system);font-weight:700}
.side-row.soon{color:var(--muted);opacity:.75}
.side-row .tag{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.tag.free{color:var(--c-system)}.tag.new{color:var(--c-ai)}.tag.upd{color:var(--c-warn)}
/* top bar: wrap instead of overflowing on small screens */
.topbar nav{flex-wrap:wrap;row-gap:.25rem}
@media(max-width:700px){.topbar nav{flex-wrap:wrap}.topbar nav button{padding:.25rem .6rem;min-height:34px}.topbar nav a{padding:.3rem .45rem}}

/* light/dark switch */
button.theme-switch{position:relative;width:52px;min-width:52px;height:28px;min-height:28px;padding:0;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);display:inline-flex;align-items:center;justify-content:space-between;cursor:pointer;margin-left:.3rem;overflow:hidden}
button.theme-switch:hover{background:var(--surface-2);border-color:var(--accent)}
.theme-switch .ts-ic{width:15px;height:15px;margin:0 6px;position:relative;z-index:1;color:var(--muted);flex:none;transition:color .2s}
.theme-switch .ts-knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .22s ease;z-index:0}
.theme-switch[aria-checked="true"] .ts-knob{transform:translateX(24px)}
.theme-switch[aria-checked="false"] .ts-sun,.theme-switch[aria-checked="true"] .ts-moon{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.theme-switch .ts-knob{transition:none}}
.topbar nav button.theme-switch{min-height:28px;padding:0}

.side-row .tags{display:flex;gap:.45rem;justify-content:flex-end;align-items:baseline}