/* Dark mode + the appearance switch. Linked after index.html's <style>, so it only adds:
   nothing here changes the light look. The <head> script sets html[data-theme] to the resolved
   theme (light | dark) before first paint; src/theme.js keeps it live and draws the switch.
   Dark: near-black neutral ground, surfaces a step lighter, hairlines instead of shadows,
   a slightly brighter blue for text and strokes on dark. */

/* ---------- scene tokens (graph + function machine), light = the original INK colours ---------- */
:root{
  --sc-blue:#1d85ff; --sc-graphite:#3b3f46; --sc-graphite-fill:#3b3f46; --sc-steel:#8a9099; --sc-violet:#5b5bd6;
  --sc-blue2:#2f6fe4; --sc-gold:#e0b400; --sc-green:#1f9d6b; --sc-guide:#0a62d0; --sc-ring:#fff;
}

/* ---------- dark tokens: chosen Dark, or System on a dark device (also without JS) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#101012; --surface:#1c1c1f; --surface-2:#26262a; --surface-3:#303035;
    --ink:#f5f5f7; --ink-2:#d2d2d7; --ink-3:#a1a1a6; --ink-4:#86868b;
    --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.08);
    --accent:#2f8fff; --accent-ink:#6cb2ff; --accent-soft:rgba(47,143,255,.16); --accent-line:rgba(108,178,255,.5);
    --accent-2-soft:rgba(242,221,32,.2);
    --good:#3ccf7f; --good-soft:rgba(60,207,127,.14); --good-line:rgba(60,207,127,.45);
    --bad:#ff6b63; --bad-soft:rgba(255,107,99,.14); --bad-line:rgba(255,107,99,.45);
    --glass:rgba(38,38,42,.72);
    --lift:0 0 0 1px rgba(255,255,255,.07); --lift-sm:0 0 0 1px rgba(255,255,255,.06);
    --sc-blue:#3d9bff; --sc-graphite:#d0d3d9; --sc-graphite-fill:#55595f; --sc-steel:#9097a1; --sc-violet:#8f8fff;
    --sc-blue2:#5b93ff; --sc-guide:#6cb2ff; --sc-ring:#1c1c1f;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101012; --surface:#1c1c1f; --surface-2:#26262a; --surface-3:#303035;
  --ink:#f5f5f7; --ink-2:#d2d2d7; --ink-3:#a1a1a6; --ink-4:#86868b;
  --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.08);
  --accent:#2f8fff; --accent-ink:#6cb2ff; --accent-soft:rgba(47,143,255,.16); --accent-line:rgba(108,178,255,.5);
  --accent-2-soft:rgba(242,221,32,.2);
  --good:#3ccf7f; --good-soft:rgba(60,207,127,.14); --good-line:rgba(60,207,127,.45);
  --bad:#ff6b63; --bad-soft:rgba(255,107,99,.14); --bad-line:rgba(255,107,99,.45);
  --glass:rgba(38,38,42,.72);
  --lift:0 0 0 1px rgba(255,255,255,.07); --lift-sm:0 0 0 1px rgba(255,255,255,.06);
  --sc-blue:#3d9bff; --sc-graphite:#d0d3d9; --sc-graphite-fill:#55595f; --sc-steel:#9097a1; --sc-violet:#8f8fff;
  --sc-blue2:#5b93ff; --sc-guide:#6cb2ff; --sc-ring:#1c1c1f;
}
:root[data-theme="light"]{color-scheme:light}
.theme-snap,.theme-snap *,.theme-snap *::before,.theme-snap *::after{transition:none!important}

/* ================= the switch ================= */
.theme-sw{position:relative;display:inline-flex;align-items:center}
.theme-btn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);transition:background .2s,color .2s}
.theme-btn:hover,.theme-btn[aria-expanded="true"]{color:var(--ink);background:rgba(0,0,0,.05)}
.theme-btn .ic{width:19px;height:19px}
.theme-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;min-width:168px;padding:6px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 12px 32px -12px rgba(20,32,56,.3);display:grid;gap:2px}
.theme-menu[hidden]{display:none}
.theme-menu button{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink-2);text-align:left}
.theme-menu button:hover,.theme-menu button:focus-visible{background:rgba(0,0,0,.05);color:var(--ink);outline:none}
.theme-menu button:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-line)}
.theme-menu button span{flex:1}
.theme-menu .ic{width:18px;height:18px}
.theme-menu .tk{color:var(--accent-ink);opacity:0;stroke-width:2.4}
.theme-menu [aria-checked="true"]{color:var(--ink)}
.theme-menu [aria-checked="true"] .tk{opacity:1}
/* wide: segmented pill, 32px high, 28px icon buttons, a raised chip slides to the choice */
.theme-seg{position:relative;display:inline-flex;align-items:center;gap:0;height:32px;padding:2px;border-radius:99px;background:rgba(0,0,0,.05);--i:0}
.theme-chip{position:absolute;top:2px;left:2px;width:28px;height:28px;border-radius:50%;background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.1),0 1px 6px -2px rgba(0,0,0,.12);transform:translateX(calc(var(--i) * 28px));transition:transform .32s var(--spring)}
.theme-seg [role=radio]{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);transition:color .2s}
.theme-seg [role=radio]:hover{color:var(--ink)}
.theme-seg [role=radio][aria-checked="true"]{color:var(--ink)}
.theme-seg [role=radio] .ic{width:16px;height:16px;stroke-width:1.9}
.theme-seg [role=radio]:focus-visible{outline:2px solid var(--accent-line);outline-offset:1px}
.theme-btn{display:none}
/* phones: one icon button that opens the menu */
@media (max-width:720px){
  .theme-seg{display:none}
  .theme-btn{display:grid;width:32px;height:32px}
  .theme-btn .ic{width:18px;height:18px}
}

/* ================= dark: page chrome ================= */
:root[data-theme="dark"] body{background:var(--bg)}
:root[data-theme="dark"] .theme-btn:hover,:root[data-theme="dark"] .theme-btn[aria-expanded="true"],
:root[data-theme="dark"] .theme-menu button:hover,:root[data-theme="dark"] .theme-menu button:focus-visible{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .theme-seg{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .theme-chip{background:#3a3a40;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .theme-menu{background:var(--surface-2);box-shadow:0 16px 40px -12px rgba(0,0,0,.7)}
:root[data-theme="dark"] .top{background:rgba(16,16,18,.78)}
/* the logo: the official on-black variant (light "one", light frame lines; the yellow % stays) */
:root[data-theme="dark"] .brand .mark1{color:var(--ink)}
:root[data-theme="dark"] .brand .mark1 g{stroke:var(--ink)}
:root[data-theme="dark"] .tnav a.on,:root[data-theme="dark"] .tnav a:hover{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .tnav a.signin{background:#0b72e7;color:#fff}
:root[data-theme="dark"] .tnav a.signin:hover{background:#1d85ff}
:root[data-theme="dark"] .tnav a.signin.me{background:rgba(255,255,255,.08);color:var(--ink)}
:root[data-theme="dark"] :is(button,a,input):focus-visible{outline-color:var(--accent-line)}

/* buttons: primary = light pill on dark (Apple), brand blue stays blue */
:root[data-theme="dark"] .btn.primary{background:#f5f5f7;color:#1d1d1f;box-shadow:none}
:root[data-theme="dark"] .btn.primary:hover{background:#fff}
:root[data-theme="dark"] .btn.primary:disabled{background:#3a3a3f;color:#8e8e93}
:root[data-theme="dark"] .btn.primary.good{background:#0b72e7;color:#fff}
:root[data-theme="dark"] .btn.primary.good:hover{background:#1d85ff}
:root[data-theme="dark"] .brandbtn{background:#0b72e7!important;color:#fff!important;box-shadow:none!important}
:root[data-theme="dark"] .brandbtn:hover{background:#1d85ff!important}
:root[data-theme="dark"] .btn.ghost{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .btn.ghost:hover{background:rgba(255,255,255,.13)}

/* ================= dark: home ================= */
:root[data-theme="dark"] .r-card{background:var(--surface);border-color:var(--line-2)}
:root[data-theme="dark"] .r-card:hover{box-shadow:0 0 0 1px var(--line)}
:root[data-theme="dark"] .r-bar,:root[data-theme="dark"] .meter,:root[data-theme="dark"] .lcard .bar{background:rgba(255,255,255,.1)}
:root[data-theme="dark"] .r-go{background:#0b72e7;color:#fff}
:root[data-theme="dark"] .subjseg{background:rgba(255,255,255,.07)}
:root[data-theme="dark"] .subjseg button.on{background:var(--surface-3);color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.06)}

/* course art: the 3D icons are white-ground renders blended with multiply, so their stage stays a
   soft, slightly dimmed blue paper in dark mode (the art reads exactly as designed) */
:root[data-theme="dark"] .ccard4{background:var(--surface);border-color:var(--line-2)}
:root[data-theme="dark"] .ccard4:hover{box-shadow:0 0 0 1px var(--line)}
:root[data-theme="dark"] .ccard4 .stage{
  background:
    radial-gradient(60% 55% at 50% 58%,rgba(29,133,255,.18),rgba(29,133,255,0) 70%),
    linear-gradient(rgba(29,90,200,.08) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(29,90,200,.08) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg,#e3ebf8,#d3e1f5);
  box-shadow:none}
:root[data-theme="dark"] .ccard4 .stage::after{background:linear-gradient(180deg,rgba(227,235,248,0) 55%,rgba(227,235,248,.45))}
:root[data-theme="dark"] .ccard4 .pill{color:#424245;background:rgba(255,255,255,.82)}
:root[data-theme="dark"] .ccard4.soon{background:rgba(255,255,255,.03);border-color:var(--line-2)}
:root[data-theme="dark"] .ccard4.soon .stage{background:
    linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg,#c9ccd2,#bcc0c7)}
:root[data-theme="dark"] .ccard4.soon .stage::after{background:none}
:root[data-theme="dark"] .ccard4.soon .pill{color:#424245;background:rgba(255,255,255,.7)}
:root[data-theme="dark"] .ccard4 .glyph{color:var(--accent);background:linear-gradient(180deg,#2a2a2f,#222226);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .ccard4.soon .glyph{color:var(--ink-3)}
:root[data-theme="dark"] .ccard4 .st-ring{background:rgba(255,255,255,.9)}
:root[data-theme="dark"] .r-art,:root[data-theme="dark"] .cart-lg{background:linear-gradient(180deg,#e3ebf8,#d3e1f5);box-shadow:none}
:root[data-theme="dark"] .r-glyph{color:#0a62d0}
:root[data-theme="dark"] .ring svg circle:first-child{stroke:rgba(255,255,255,.14)}
:root[data-theme="dark"] .ccard4 .st-ring .ring svg circle:first-child{stroke:rgba(0,0,0,.1)}

/* older home pieces still in the stylesheet */
:root[data-theme="dark"] :is(.lcard,.ccard,.ccard3,.track,.chap){background:var(--surface);border-color:var(--line-2);box-shadow:none}
:root[data-theme="dark"] :is(.ccard3.soon,.lcard.soon){background:transparent}
:root[data-theme="dark"] .lcard .go,:root[data-theme="dark"] .track .stats span{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .ccard .ico,:root[data-theme="dark"] .track .chip-c{background:var(--surface-2)}
:root[data-theme="dark"] .hero-stage{background:#1a1a1d}
:root[data-theme="dark"] .resume2{background:var(--surface-2)}
:root[data-theme="dark"] .top .back:hover{background:rgba(255,255,255,.08)}

/* ================= dark: course page ================= */
:root[data-theme="dark"] .lrow{border-top-color:var(--line-2)}
:root[data-theme="dark"] button.lrow:hover{background:rgba(255,255,255,.035)}
:root[data-theme="dark"] button.lrow:active{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .lrow.next{background:color-mix(in srgb,var(--hue) 12%,var(--surface))}
:root[data-theme="dark"] .lrow em.up{color:#1d1d1f}
/* topic hues as text: lifted toward white so they pass AA on dark */
:root[data-theme="dark"] .chap-n,:root[data-theme="dark"] .lrow.next .lmark.num{color:color-mix(in srgb,var(--hue) 62%,#fff)}
:root[data-theme="dark"] .lrow.next .lmark.num{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--hue) 62%,#fff)}

/* ================= dark: lesson player ================= */
:root[data-theme="dark"] #lesson{background:var(--bg)}
:root[data-theme="dark"] .x{border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .x:hover{background:var(--surface-3)}
:root[data-theme="dark"] #segs i{background:rgba(255,255,255,.14)}
:root[data-theme="dark"] #segs i.now{background:var(--ink)}
:root[data-theme="dark"] #card{background:rgba(28,28,31,.96);border-color:rgba(255,255,255,.08);box-shadow:none}
:root[data-theme="dark"] .cfoot{background:rgba(28,28,31,.6)}
@media (max-width:720px){
  :root[data-theme="dark"] #card{background:var(--surface);border:0;border-top:1px solid var(--line-2);box-shadow:none}
  :root[data-theme="dark"] .cfoot{background:var(--surface)}
}
:root[data-theme="dark"] .kind.quiz,:root[data-theme="dark"] .kind.predict{color:#9d9dff}
:root[data-theme="dark"] .kind.flight{color:#4fc3e8}
:root[data-theme="dark"] .formula,:root[data-theme="dark"] .goal,:root[data-theme="dark"] .fb.info{background:var(--surface-2)}
:root[data-theme="dark"] .note{color:#d6e6ff}
:root[data-theme="dark"] .note.sky{background:rgba(79,195,232,.12);color:#cdeef8}
:root[data-theme="dark"] .note.sky .ic{color:#4fc3e8}
:root[data-theme="dark"] .recap li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%233ccf7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .prose table th{background:var(--surface-2);color:var(--ink-3)}
:root[data-theme="dark"] .prose table td{border-color:var(--line-2)}

/* glossary popover: a raised surface with a hairline */
:root[data-theme="dark"] #pop{background:var(--surface-3);color:var(--ink-2);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 16px 40px -10px rgba(0,0,0,.7)}
:root[data-theme="dark"] #pop b{color:var(--ink)}
:root[data-theme="dark"] #pop .eg{color:var(--ink-3)}

/* answers */
:root[data-theme="dark"] .opt{background:var(--surface-2);border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .opt:hover{border-color:rgba(255,255,255,.28)}
:root[data-theme="dark"] .opt .l{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .opt.sel{background:var(--surface-2);border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
:root[data-theme="dark"] .opt.sel .l{background:var(--ink);color:#1d1d1f}
:root[data-theme="dark"] .opt.right{background:var(--good-soft)}
:root[data-theme="dark"] .opt.wrong{background:var(--bad-soft)}
:root[data-theme="dark"] :is(.opt.right,.opt.wrong) .l{color:#101012}
:root[data-theme="dark"] .numrow{background:var(--surface-2);border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .numrow:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
:root[data-theme="dark"] .numrow.right{background:var(--good-soft);border-color:var(--good)}
:root[data-theme="dark"] .numrow.wrong{background:var(--bad-soft);border-color:var(--bad)}
:root[data-theme="dark"] .goal .dot{border-color:rgba(255,255,255,.25)}
:root[data-theme="dark"] .goal.met{background:var(--good-soft)}
:root[data-theme="dark"] .goal.met .dot svg{stroke:#101012}
:root[data-theme="dark"] .fb.good{color:#c8efd7}
:root[data-theme="dark"] .fb.bad{color:#ffd3cf}
:root[data-theme="dark"] .done-hero .badge{color:#101012}

/* shared hands-on tasks */
:root[data-theme="dark"] .slot{background:#0b72e7;box-shadow:none}
:root[data-theme="dark"] .slot.empty{background:transparent;border-color:rgba(255,255,255,.2)}
:root[data-theme="dark"] .tile{background:var(--surface-2);border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .tile:hover{border-color:var(--ink)}
:root[data-theme="dark"] :is(.testtab,.ftable) th{background:var(--surface-2)}
:root[data-theme="dark"] .ftable input{background:var(--surface-2);border-color:rgba(255,255,255,.16);color:var(--ink)}
:root[data-theme="dark"] .ftable td.ok input{background:var(--good-soft);border-color:var(--good);color:var(--good)}
:root[data-theme="dark"] .ftable td.no input{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
:root[data-theme="dark"] .sortrow{background:var(--surface-2)}
:root[data-theme="dark"] .sortrow.ok{background:var(--good-soft)}
:root[data-theme="dark"] .sortrow.no{background:var(--bad-soft)}

/* course-made task widgets of courses not yet checked in dark (their kits use light colours):
   a light worksheet panel inside the dark card, so they stay readable */
:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) .task > :not(.prompt):not(.opts):not(.numrow):not(.goal):not(.tiles):not(.ftable):not(.sort){
  --bg:#f5f5f7; --surface:#fff; --surface-2:#f4f4f6; --surface-3:#ececef;
  --ink:#1d1d1f; --ink-2:#424245; --ink-3:#6e6e73; --ink-4:#8a8a8f;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.05);
  --accent:#1d85ff; --accent-ink:#0a62d0; --accent-soft:rgba(29,133,255,.09); --accent-line:rgba(29,133,255,.35);
  --good:#1c8a4c; --good-soft:#e8f5ec; --bad:#d23b3b; --bad-soft:#fcecec;
  color-scheme:light;color:var(--ink);background:#f5f5f7;border-radius:16px;padding:12px}

/* HUD chips and the control dock: dark glass */
:root[data-theme="dark"] :is(.chip,#dock,.x){border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .ctl input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--accent) var(--fill,50%),rgba(255,255,255,.16) var(--fill,50%))}
:root[data-theme="dark"] .ctl input[type=range]::-moz-range-track{background:rgba(255,255,255,.16)}
:root[data-theme="dark"] :is(.stepper button,.seg){background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .stepper button:hover{background:rgba(255,255,255,.14)}
:root[data-theme="dark"] .seg button.on{background:var(--surface-3);box-shadow:none}

/* ================= dark: the lesson stage ================= */
/* the shared flat scenes (graph paper, function machine) draw with tokens and go dark;
   course scenes and 3D scenes keep their light colours, so the stage stays light paper for them */
:root[data-theme="dark"] #stage{background:#141416}
:root[data-theme="dark"] .flat-svg .paper{fill:#1c1c1f;stroke:rgba(255,255,255,.08);filter:none}
:root[data-theme="dark"] .flat-svg .grid{stroke:rgba(255,255,255,.11)}
:root[data-theme="dark"] .flat-svg .grid-minor{stroke:rgba(255,255,255,.045)}
:root[data-theme="dark"] .flat-svg .axis{stroke:var(--ink)}
:root[data-theme="dark"] .flat-svg :is(.axis-head,.axis-name){fill:var(--ink)}
:root[data-theme="dark"] .flat-svg .fn-rail{stroke:#3a3c41}
:root[data-theme="dark"] .flat-svg .fn-shell{fill:#232327;stroke:rgba(255,255,255,.1);filter:none}
:root[data-theme="dark"] .flat-svg .fn-mouth{fill:#0b0b0d}
:root[data-theme="dark"] .flat-svg .fn-box.tap:hover .fn-shell{stroke:var(--accent-line)}
:root[data-theme="dark"] .flat-svg .fn-ball circle{stroke:#1c1c1f}
/* pinned labels */
:root[data-theme="dark"] .lbl.tag > span{background:rgba(44,44,49,.94);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .lbl.tag.input > span{box-shadow:inset 3px 0 0 var(--sc-blue),0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .lbl.tag.output > span{box-shadow:inset 3px 0 0 var(--sc-graphite),0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .lbl.pin::before{box-shadow:0 0 0 3px rgba(20,20,22,.9)}
:root[data-theme="dark"] .lbl.pin > span{color:#1d1d1f}
:root[data-theme="dark"] .lbl.pin.soft > span{background:rgba(44,44,49,.95);color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .lbl.dim > span{background:rgba(44,44,49,.9)}
:root[data-theme="dark"] .lbl.hist > span{background:rgba(36,36,40,.95);box-shadow:0 0 0 1px rgba(255,255,255,.08)}

/* light paper island: courses whose scenes aren't checked in dark yet (data-course on <html>,
   set by src/theme.js; every built course is on the list now, so this is the safety net for new ones) */
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage){
  --bg:#f5f5f7; --surface:#fff; --surface-2:#f4f4f6; --surface-3:#ececef;
  --ink:#1d1d1f; --ink-2:#424245; --ink-3:#6e6e73; --ink-4:#a1a1a6;
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.05);
  --accent:#1d85ff; --accent-ink:#0a62d0; --accent-soft:rgba(29,133,255,.09); --accent-line:rgba(29,133,255,.35);
  --good:#1c8a4c; --good-soft:#e8f5ec; --bad:#d23b3b; --bad-soft:#fcecec;
  --sc-blue:#1d85ff; --sc-graphite:#3b3f46; --sc-graphite-fill:#3b3f46; --sc-steel:#8a9099; --sc-violet:#5b5bd6;
  --sc-blue2:#2f6fe4; --sc-guide:#0a62d0; --sc-ring:#fff;
  color-scheme:light;color:var(--ink);background:#e4e6ea}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) :is(.flat-svg .paper){fill:#fdfdfc;stroke:rgba(20,32,56,.08)}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .flat-svg .grid{stroke:rgba(40,60,90,.13)}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .flat-svg .grid-minor{stroke:rgba(40,60,90,.05)}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .flat-svg .fn-rail{stroke:#d7dade}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .flat-svg .fn-shell{fill:#fff;stroke:rgba(20,32,56,.08)}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .flat-svg .fn-mouth{fill:#2b2e33}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .flat-svg .fn-ball circle{stroke:#fff}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .lbl.tag > span{background:rgba(255,255,255,.92);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px -6px rgba(20,32,56,.3)}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .lbl.tag.input > span{box-shadow:inset 3px 0 0 var(--accent),0 1px 2px rgba(0,0,0,.08),0 4px 14px -6px rgba(20,32,56,.3)}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .lbl.tag.output > span{box-shadow:inset 3px 0 0 #3b3f46,0 1px 2px rgba(0,0,0,.08),0 4px 14px -6px rgba(20,32,56,.3)}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .lbl.pin::before{box-shadow:0 0 0 3px rgba(255,255,255,.9)}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .lbl.pin > span{color:#fff}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .lbl.pin.soft > span{background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 2px 8px -2px rgba(0,0,0,.2)}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .lbl.dim > span{background:rgba(255,255,255,.9)}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage) .lbl.hist > span{background:rgba(255,255,255,.94);box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 18px -8px rgba(20,32,56,.3)}

/* the lesson title and progress sit on the stage, so on light paper they use light ink too */
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #lesson) :is(#bar .ttl,#segs){
  --ink:#1d1d1f; --ink-3:#6e6e73; --accent:#1d85ff; color:var(--ink)}
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #lesson) #segs i:not(.done):not(.now){background:rgba(0,0,0,.09)}

/* @generated by the dark-mode palette script: every literal colour the lesson scenes and course kits use, with its dark partner
   (lightness flipped, hue kept; brand mids a touch brighter). Light mode never sets --c-*, so the literals are used as written. */
:root[data-theme="dark"]{
  --c-000000-10:rgba(242,242,242,0.08);
  --c-000000-12:rgba(242,242,242,0.096);
  --c-000000-14:rgba(242,242,242,0.112);
  --c-000000-16:rgba(242,242,242,0.128);
  --c-000000-18:rgba(242,242,242,0.144);
  --c-000000-20:rgba(242,242,242,0.16);
  --c-000000-22:rgba(242,242,242,0.176);
  --c-000000-25:rgba(242,242,242,0.2);
  --c-000000-4:rgba(242,242,242,0.032);
  --c-000000-5:rgba(242,242,242,0.04);
  --c-000000-6:rgba(242,242,242,0.048);
  --c-000000-7:rgba(242,242,242,0.056);
  --c-000000-8:rgba(242,242,242,0.064);
  --c-0a62d0:#3c8ff6;
  --c-137a50:#82e2bb;
  --c-142038-10:rgba(160,178,215,0.08);
  --c-142038-12:rgba(160,178,215,0.096);
  --c-142038-13:rgba(160,178,215,0.104);
  --c-142038-14:rgba(160,178,215,0.112);
  --c-142038-16:rgba(160,178,215,0.128);
  --c-142038-18:rgba(160,178,215,0.144);
  --c-142038-20:rgba(160,178,215,0.16);
  --c-142038-22:rgba(160,178,215,0.176);
  --c-142038-28:rgba(160,178,215,0.224);
  --c-142038-30:rgba(160,178,215,0.24);
  --c-142038-35:rgba(160,178,215,0.28);
  --c-142038-4:rgba(160,178,215,0.028);
  --c-142038-5:rgba(160,178,215,0.04);
  --c-142038-6:rgba(160,178,215,0.048);
  --c-142038-7:rgba(160,178,215,0.056);
  --c-142038-8:rgba(160,178,215,0.064);
  --c-142038-9:rgba(160,178,215,0.072);
  --c-14774f:#83e1bb;
  --c-157a52:#83e0bb;
  --c-1d1d1f:#d8d8da;
  --c-1d1d1f-16:rgba(216,216,218,0.128);
  --c-1d1d1f-25:rgba(216,216,218,0.2);
  --c-1d1d1f-26:rgba(216,216,218,0.208);
  --c-1d1d1f-42:rgba(216,216,218,0.336);
  --c-1d1d1f-78:rgba(216,216,218,0.624);
  --c-1d1d1f-80:rgba(216,216,218,0.64);
  --c-1d85ff:#3d96ff;
  --c-1d85ff-12:rgba(61,150,255,0.12);
  --c-1d85ff-25:rgba(61,150,255,0.25);
  --c-1d85ff-28:rgba(61,150,255,0.28);
  --c-1d85ff-35:rgba(61,150,255,0.35);
  --c-1d85ff-45:rgba(61,150,255,0.45);
  --c-1d85ff-5:rgba(61,150,255,0.05);
  --c-1d85ff-6:rgba(61,150,255,0.06);
  --c-1f9d6b:#55dda7;
  --c-1f9d6b-7:rgba(85,221,167,0.07);
  --c-24272c:#ced0d3;
  --c-283c5a-13:rgba(155,174,204,0.104);
  --c-2a2a2c:#cdcdcf;
  --c-2f3237:#c5c7ca;
  --c-2f6fe4:#4b82e8;
  --c-2f7fe0:#4d92e5;
  --c-3a2c22:#c9b7aa;
  --c-3aa0d8:#55addd;
  --c-3b3f46:#b9bbbf;
  --c-3b3f46-12:rgba(185,187,191,0.096);
  --c-3f97ff:#61aaff;
  --c-4646b8:#6b6bc7;
  --c-4b5058:#aaadb2;
  --c-5a4600:#f5da7e;
  --c-5a5f67:#9da0a5;
  --c-5aa6ff:#70b2ff;
  --c-5b5bd6:#7676dd;
  --c-5c4800:#f5db7e;
  --c-5d636b:#9a9ea2;
  --c-5f646c:#999ca1;
  --c-6aa8f5:#79b1f6;
  --c-6e6e73:#929295;
  --c-6e7179:#8e9094;
  --c-6e737b:#8d9094;
  --c-7d6300:#f4d975;
  --c-7d838c:#7e8288;
  --c-8a5a1e:#dba057;
  --c-8a6800:#f3d371;
  --c-8a6d00:#f3d871;
  --c-8a9099:#73777d;
  --c-8f7b4c:#b8a67a;
  --c-8f8672:#8f897e;
  --c-9aa0a8:#666a70;
  --c-9cc6fb:#76b0f9;
  --c-a08200-35:rgba(243,217,107,0.35);
  --c-a1a1a6:#67676b;
  --c-a1a6ae:#61656a;
  --c-a3a6ad:#626469;
  --c-a9b1bc:#555b63;
  --c-a9d0ff:#213a58;
  --c-b08c00:#ffd533;
  --c-b38f00:#ffd633;
  --c-b4262b:#db575b;
  --c-b42b2b:#d85a5a;
  --c-b5bbc4:#4e535a;
  --c-b89300:#ffd633;
  --c-b8bcc4:#4e5157;
  --c-b8bdc4:#4e5257;
  --c-b98d55:#c39e6e;
  --c-b9bec6:#4c5056;
  --c-b9bfc8:#4b4f56;
  --c-bba878:#c6b68e;
  --c-c3c8cf:#45494e;
  --c-c4372b:#da6258;
  --c-c4a23d:#cfb463;
  --c-c4c8cf:#44484d;
  --c-c6dfff:#1c3049;
  --c-c79c00:#ffd333;
  --c-c7c7cc:#47474b;
  --c-c99a4e:#d0a867;
  --c-c9a200:#ffd733;
  --c-c9a313:#edca45;
  --c-c9a64e:#d0b267;
  --c-c9bea8:#c8bda7;
  --c-c9c2a8:#c8c1a7;
  --c-c9ccd1:#434549;
  --c-c9cdd3:#414449;
  --c-c9ced6:#3e434a;
  --c-cfd4db:#3a3e45;
  --c-cfe0f4:#253242;
  --c-cfe3ff:#1a2c45;
  --c-d23b3b:#d95959;
  --c-d23b3b-60:rgba(217,89,89,0.6);
  --c-d2d2d7:#3e3e42;
  --c-d4a800:#ffd533;
  --c-d4b48a:#d9bc97;
  --c-d4d7dc:#393c41;
  --c-d4d8dd:#383c41;
  --c-d4d8de:#373b41;
  --c-d5d8dd:#383b40;
  --c-d5d9df:#363a40;
  --c-d6e8ff:#192a41;
  --c-d7dade:#373a3e;
  --c-d9a400:#ffcd33;
  --c-d9dde2:#34383d;
  --c-d9f0e5:#283b32;
  --c-dcc79a:#dac495;
  --c-dcebff:#18283e;
  --c-dcf1e7:#273930;
  --c-ddcda6:#d8c598;
  --c-dde1e7:#2f333a;
  --c-dfe2e7:#2f3238;
  --c-dfe3e8:#2e3338;
  --c-dff1e6:#26372d;
  --c-e0b400:#ffd733;
  --c-e1e5eb:#2b3037;
  --c-e2e3e7:#2f3135;
  --c-e2f3eb:#25352d;
  --c-e3e3e6:#313134;
  --c-e3e6ea:#2c3035;
  --c-e3efff:#16263b;
  --c-e4e4fa:#1d1d37;
  --c-e4e5e8:#2f3033;
  --c-e5484d:#e96569;
  --c-e6e9ee:#282c33;
  --c-e7d3b5:#dcbf93;
  --c-e7e2d9:#3a362f;
  --c-e8d27a:#ead685;
  --c-e8e2d6:#3c372e;
  --c-e9c27f:#eac585;
  --c-e9c440:#eccd5e;
  --c-e9cf8a:#e8ce87;
  --c-e9e9fb:#1b1b34;
  --c-e9ecf0:#272b31;
  --c-ece8df:#36332b;
  --c-eceef1:#26292e;
  --c-eceef2:#25282e;
  --c-ede4cc:#433c2b;
  --c-eef0f3:#24272c;
  --c-eef1f5:#23272d;
  --c-eef3fb:#1b2431;
  --c-eef5ff:#142235;
  --c-f0e4b6:#50482b;
  --c-f1dcbc:#4c3f2a;
  --c-f1f1f3:#252529;
  --c-f1f2f4:#242629;
  --c-f1f5fb:#1c232e;
  --c-f2dd20:#f4e23e;
  --c-f2f4f7:#22252a;
  --c-f3d9a4:#eeca81;
  --c-f3efe2:#353125;
  --c-f3f4f6:#222428;
  --c-f4e7c8:#463c26;
  --c-f4efe3:#353024;
  --c-f4f1ea:#302c24;
  --c-f4f4f6:#222227;
  --c-f4f8ff:#0d1b34;
  --c-f6f6f8:#202025;
  --c-f6f7f9:#1e2126;
  --c-f7e48d:#f6df7a;
  --c-f7efcf:#423c22;
  --c-fbe0e0:#3a1c1c;
  --c-fbefb8:#504822;
  --c-fbf1c4:#494220;
  --c-fbf8ef:#302b1b;
  --c-fbfaf7:#28241a;
  --c-fde7e8:#37191a;
  --c-fde8e8:#361818;
  --c-fdfdfc:#22221b;
  --c-ffffff:#1c1c1c;
  --c-ffffff-25:rgba(28,28,28,0.25);
  --c-ffffff-70:rgba(28,28,28,0.7);
  --c-ffffff-88:rgba(28,28,28,0.88);
  --c-ffffff-90:rgba(28,28,28,0.9);
  --c-ffffff-92:rgba(28,28,28,0.92);
  --c-ffffff-94:rgba(28,28,28,0.94)}
:root[data-theme="dark"] :where(#stage) :where([style*="--t-fill"]){fill:var(--t-fill)}
:root[data-theme="dark"] :where(#stage) :where([style*="--t-stroke"]){stroke:var(--t-stroke)}
:root[data-theme="dark"] :where(#stage) :where([style*="--t-stop-color"]){stop-color:var(--t-stop-color)}
/* light-paper island (courses not yet checked in dark, 3D): back to the literals */
:is(:root[data-theme="dark"]:not([data-course="arith"],[data-course="variables"],[data-course="functions"],[data-course="linsys"],[data-course="quadratics"],[data-course="transforms"],[data-course="exponential"],[data-course="fractions"],[data-course="graphing"],[data-course="inequalities"],[data-course="ratios"],[data-course="geometry"],[data-course="data"],[data-course="equations"],[data-course="powers"],[data-course="gears"]) #stage){
  --c-000000-10:initial;
  --c-000000-12:initial;
  --c-000000-14:initial;
  --c-000000-16:initial;
  --c-000000-18:initial;
  --c-000000-20:initial;
  --c-000000-22:initial;
  --c-000000-25:initial;
  --c-000000-4:initial;
  --c-000000-5:initial;
  --c-000000-6:initial;
  --c-000000-7:initial;
  --c-000000-8:initial;
  --c-0a62d0:initial;
  --c-137a50:initial;
  --c-142038-10:initial;
  --c-142038-12:initial;
  --c-142038-13:initial;
  --c-142038-14:initial;
  --c-142038-16:initial;
  --c-142038-18:initial;
  --c-142038-20:initial;
  --c-142038-22:initial;
  --c-142038-28:initial;
  --c-142038-30:initial;
  --c-142038-35:initial;
  --c-142038-4:initial;
  --c-142038-5:initial;
  --c-142038-6:initial;
  --c-142038-7:initial;
  --c-142038-8:initial;
  --c-142038-9:initial;
  --c-14774f:initial;
  --c-157a52:initial;
  --c-1d1d1f:initial;
  --c-1d1d1f-16:initial;
  --c-1d1d1f-25:initial;
  --c-1d1d1f-26:initial;
  --c-1d1d1f-42:initial;
  --c-1d1d1f-78:initial;
  --c-1d1d1f-80:initial;
  --c-1d85ff:initial;
  --c-1d85ff-12:initial;
  --c-1d85ff-25:initial;
  --c-1d85ff-28:initial;
  --c-1d85ff-35:initial;
  --c-1d85ff-45:initial;
  --c-1d85ff-5:initial;
  --c-1d85ff-6:initial;
  --c-1f9d6b:initial;
  --c-1f9d6b-7:initial;
  --c-24272c:initial;
  --c-283c5a-13:initial;
  --c-2a2a2c:initial;
  --c-2f3237:initial;
  --c-2f6fe4:initial;
  --c-2f7fe0:initial;
  --c-3a2c22:initial;
  --c-3aa0d8:initial;
  --c-3b3f46:initial;
  --c-3b3f46-12:initial;
  --c-3f97ff:initial;
  --c-4646b8:initial;
  --c-4b5058:initial;
  --c-5a4600:initial;
  --c-5a5f67:initial;
  --c-5aa6ff:initial;
  --c-5b5bd6:initial;
  --c-5c4800:initial;
  --c-5d636b:initial;
  --c-5f646c:initial;
  --c-6aa8f5:initial;
  --c-6e6e73:initial;
  --c-6e7179:initial;
  --c-6e737b:initial;
  --c-7d6300:initial;
  --c-7d838c:initial;
  --c-8a5a1e:initial;
  --c-8a6800:initial;
  --c-8a6d00:initial;
  --c-8a9099:initial;
  --c-8f7b4c:initial;
  --c-8f8672:initial;
  --c-9aa0a8:initial;
  --c-9cc6fb:initial;
  --c-a08200-35:initial;
  --c-a1a1a6:initial;
  --c-a1a6ae:initial;
  --c-a3a6ad:initial;
  --c-a9b1bc:initial;
  --c-a9d0ff:initial;
  --c-b08c00:initial;
  --c-b38f00:initial;
  --c-b4262b:initial;
  --c-b42b2b:initial;
  --c-b5bbc4:initial;
  --c-b89300:initial;
  --c-b8bcc4:initial;
  --c-b8bdc4:initial;
  --c-b98d55:initial;
  --c-b9bec6:initial;
  --c-b9bfc8:initial;
  --c-bba878:initial;
  --c-c3c8cf:initial;
  --c-c4372b:initial;
  --c-c4a23d:initial;
  --c-c4c8cf:initial;
  --c-c6dfff:initial;
  --c-c79c00:initial;
  --c-c7c7cc:initial;
  --c-c99a4e:initial;
  --c-c9a200:initial;
  --c-c9a313:initial;
  --c-c9a64e:initial;
  --c-c9bea8:initial;
  --c-c9c2a8:initial;
  --c-c9ccd1:initial;
  --c-c9cdd3:initial;
  --c-c9ced6:initial;
  --c-cfd4db:initial;
  --c-cfe0f4:initial;
  --c-cfe3ff:initial;
  --c-d23b3b:initial;
  --c-d23b3b-60:initial;
  --c-d2d2d7:initial;
  --c-d4a800:initial;
  --c-d4b48a:initial;
  --c-d4d7dc:initial;
  --c-d4d8dd:initial;
  --c-d4d8de:initial;
  --c-d5d8dd:initial;
  --c-d5d9df:initial;
  --c-d6e8ff:initial;
  --c-d7dade:initial;
  --c-d9a400:initial;
  --c-d9dde2:initial;
  --c-d9f0e5:initial;
  --c-dcc79a:initial;
  --c-dcebff:initial;
  --c-dcf1e7:initial;
  --c-ddcda6:initial;
  --c-dde1e7:initial;
  --c-dfe2e7:initial;
  --c-dfe3e8:initial;
  --c-dff1e6:initial;
  --c-e0b400:initial;
  --c-e1e5eb:initial;
  --c-e2e3e7:initial;
  --c-e2f3eb:initial;
  --c-e3e3e6:initial;
  --c-e3e6ea:initial;
  --c-e3efff:initial;
  --c-e4e4fa:initial;
  --c-e4e5e8:initial;
  --c-e5484d:initial;
  --c-e6e9ee:initial;
  --c-e7d3b5:initial;
  --c-e7e2d9:initial;
  --c-e8d27a:initial;
  --c-e8e2d6:initial;
  --c-e9c27f:initial;
  --c-e9c440:initial;
  --c-e9cf8a:initial;
  --c-e9e9fb:initial;
  --c-e9ecf0:initial;
  --c-ece8df:initial;
  --c-eceef1:initial;
  --c-eceef2:initial;
  --c-ede4cc:initial;
  --c-eef0f3:initial;
  --c-eef1f5:initial;
  --c-eef3fb:initial;
  --c-eef5ff:initial;
  --c-f0e4b6:initial;
  --c-f1dcbc:initial;
  --c-f1f1f3:initial;
  --c-f1f2f4:initial;
  --c-f1f5fb:initial;
  --c-f2dd20:initial;
  --c-f2f4f7:initial;
  --c-f3d9a4:initial;
  --c-f3efe2:initial;
  --c-f3f4f6:initial;
  --c-f4e7c8:initial;
  --c-f4efe3:initial;
  --c-f4f1ea:initial;
  --c-f4f4f6:initial;
  --c-f4f8ff:initial;
  --c-f6f6f8:initial;
  --c-f6f7f9:initial;
  --c-f7e48d:initial;
  --c-f7efcf:initial;
  --c-fbe0e0:initial;
  --c-fbefb8:initial;
  --c-fbf1c4:initial;
  --c-fbf8ef:initial;
  --c-fbfaf7:initial;
  --c-fde7e8:initial;
  --c-fde8e8:initial;
  --c-fdfdfc:initial;
  --c-ffffff:initial;
  --c-ffffff-25:initial;
  --c-ffffff-70:initial;
  --c-ffffff-88:initial;
  --c-ffffff-90:initial;
  --c-ffffff-92:initial;
  --c-ffffff-94:initial}

/* ================= dark: sign-in page (assets/auth.css) ================= */
:root[data-theme="dark"] .au-field,:root[data-theme="dark"] .au-digit{background:var(--surface-2);border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .au-field:focus,:root[data-theme="dark"] .au-digit:focus{border-color:var(--accent)}
:root[data-theme="dark"] .au-btn{background:#0b72e7}
:root[data-theme="dark"] .au-btn:hover{background:#1d85ff}
:root[data-theme="dark"] .au-btn:disabled{background:#3a3a3f;color:#8e8e93}
:root[data-theme="dark"] .au-btn.busy,:root[data-theme="dark"] .au-btn.busy:disabled{background:#0b72e7;color:#fff}
:root[data-theme="dark"] .au-btn.ghost{background:rgba(255,255,255,.08);color:var(--ink)}
:root[data-theme="dark"] .au-btn.ghost:hover{background:rgba(255,255,255,.13)}
:root[data-theme="dark"] .au-demo{color:var(--ink-2)}
/* the open menu sits above the docking subject tabs */
.top:has(.theme-menu:not([hidden])){z-index:60}