/* ============================================================
   CrowStudies shared design system
   Tokens, site chrome, and the components every course uses.
   ============================================================ */

:root{
  --ground:#090b12;
  --card:#111521;
  --card-2:#171c2a;
  --well:#0d111b;
  --line:#273045;
  --line-strong:#3a4762;
  --ink:#edf1fa;
  --ink-2:#bcc5d7;
  --ink-3:#7d8aa3;

  --brand:#a78bfa;
  --brand-shelf:#6d55c9;
  --brand-soft:#211c3d;

  --good:#45d6b5;
  --good-shelf:#278c79;
  --good-soft:#102d2a;
  --bad:#fb7185;
  --bad-shelf:#bd4a5c;
  --bad-soft:#321921;

  --gold:#d8b66a;
  --gold-shelf:#9c7b36;

  --key-white:#e8ecf4;
  --key-white-2:#b8c0d2;
  --key-black:#171c2a;
  --key-black-2:#06080d;

  --shelf:2px;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0e111c; --card:#181d2c; --card-2:#1f2536; --well:#121724;
    --line:#2c3448; --line-strong:#3b455f;
    --ink:#eef1fa; --ink-2:#b3bcd4; --ink-3:#7f8aa6;
    --brand:#7c66ff; --brand-shelf:#4b34c9; --brand-soft:#252048;
    --good:#25c77c; --good-shelf:#12915a; --good-soft:#12301f;
    --bad:#ff5f77; --bad-shelf:#bf3049; --bad-soft:#33141c;
    --gold:#ffbe45; --gold-shelf:#c98a08;
    --key-white:#e8ecf7; --key-white-2:#b9c1d6; --key-black:#1b2032; --key-black-2:#080b14;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0e111c; --card:#181d2c; --card-2:#1f2536; --well:#121724;
  --line:#2c3448; --line-strong:#3b455f;
  --ink:#eef1fa; --ink-2:#b3bcd4; --ink-3:#7f8aa6;
  --brand:#7c66ff; --brand-shelf:#4b34c9; --brand-soft:#252048;
  --good:#25c77c; --good-shelf:#12915a; --good-soft:#12301f;
  --bad:#ff5f77; --bad-shelf:#bf3049; --bad-soft:#33141c;
  --gold:#ffbe45; --gold-shelf:#c98a08;
  --key-white:#e8ecf7; --key-white-2:#b9c1d6; --key-black:#1b2032; --key-black-2:#080b14;
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Space Grotesk", -apple-system, "Segoe UI", sans-serif;
  font-weight:500;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3{ font-family:"Space Grotesk",sans-serif; font-weight:650; margin:0; text-wrap:balance; letter-spacing:-0.025em; }
a{ color:var(--brand); }
button{ font-family:inherit; touch-action:manipulation; -webkit-tap-highlight-color:transparent; cursor:pointer; }
button:focus-visible, select:focus-visible, a:focus-visible, input:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
[hidden]{ display:none !important; }

/* ---------- site chrome ---------- */
.sitehead{
  border-bottom:2px solid var(--line);
  background:var(--card);
}
.sitehead .inner{
  max-width:940px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.wordmark{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  font-family:"Space Grotesk",sans-serif; font-weight:650; font-size:20px; letter-spacing:-0.025em;
}
.wordmark-icon{
  width:30px; height:30px; flex:none; display:block; background:currentColor;
  -webkit-mask:url("crow.svg") center/contain no-repeat;
  mask:url("crow.svg") center/contain no-repeat;
}
.sitenav{ display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.sitenav a{
  text-decoration:none; color:var(--ink-2); font-size:15px; font-weight:800;
  padding:8px 12px; border-radius:6px;
}
.sitenav a:hover{ background:var(--glass-lift); color:var(--ink); }
.sitenav a[aria-current="page"]{ background:var(--brand-soft); color:var(--brand); }
/* Signed out this is a button that says so. Signed in it becomes the round
   badge of initials that opens the account menu. */
.authbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px;
  padding:8px 16px; border:1px solid color-mix(in srgb,var(--brand) 55%,transparent); border-radius:8px;
  background:var(--brand); color:#fff; white-space:nowrap;
  font:650 15px/1 "Space Grotesk",sans-serif;
  box-shadow:0 2px 0 var(--brand-shelf);
  transition:filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.authbtn:hover{ filter:brightness(1.07); }
.authbtn:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--brand-shelf); }
.authbtn:disabled{ opacity:.65; cursor:wait; }
.authbtn.auth-pending{ color:transparent; box-shadow:none; background:var(--card-2); border-color:var(--line-strong); }
.authbtn.auth-pending::after{
  content:''; position:absolute; width:14px; height:14px; border:2px solid var(--ink-3);
  border-right-color:transparent; border-radius:50%; animation:spin .85s linear infinite;
}
.authbtn.auth-pending{ position:relative; }
.authbtn.signed-in{
  width:38px; height:38px; min-height:0; padding:0; border-radius:50%; gap:0;
  background:var(--brand-soft); color:var(--brand); box-shadow:none;
  border-color:color-mix(in srgb,var(--brand) 55%,var(--line));
  font:800 13px/1 "Space Grotesk",sans-serif;
}
.authbtn.signed-in:hover{ filter:none; background:var(--brand); color:#fff; }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* Every menu that opens over the page uses this one entrance. */
.account-popover,.section-popover{ animation:pop-in .2s cubic-bezier(.22,1,.36,1) both; }
.account-popover{ position:fixed; z-index:30; width:210px; padding:8px; border:1px solid var(--line-strong); border-radius:10px; background:var(--card); box-shadow:0 18px 40px #0008; }
.account-popover strong{ display:block; padding:9px 10px 11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:750 14px/1.2 "Space Grotesk",sans-serif; }
.account-popover button{ width:100%; border:0; border-radius:6px; padding:10px; background:transparent; color:var(--ink-2); text-align:left; font-family:inherit; font-weight:750; font-size:13px; line-height:1; }
.account-popover button:hover:not(:disabled){ background:var(--well); color:var(--ink); }
.account-popover button:disabled{ opacity:.45; cursor:default; }
.account-popover button.danger:hover{ color:var(--bad); }
@keyframes pop-in{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }

.sitefoot{
  max-width:940px; margin:0 auto; padding:34px 16px 44px;
  color:var(--ink-3); font-size:14px; font-weight:700;
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}
.sitefoot a{ color:var(--ink-3); }

/* ---------- chunky buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid color-mix(in srgb, var(--brand) 55%, transparent); border-radius:7px;
  font-family:"Space Grotesk",sans-serif;
  font-weight:650; font-size:17px; letter-spacing:0;
  padding:16px 26px;
  background:var(--brand); color:#fff; text-decoration:none;
  box-shadow:0 var(--shelf) 0 var(--brand-shelf);
  transition:transform .18s ease, box-shadow .18s ease, filter .24s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(var(--shelf)); box-shadow:0 0 0 var(--brand-shelf); }
.btn.wide{ width:100%; }
.btn.good{ background:var(--good); box-shadow:0 var(--shelf) 0 var(--good-shelf); }
.btn.good:active{ box-shadow:0 0 0 var(--good-shelf); }
.btn.bad{ background:var(--bad); box-shadow:0 var(--shelf) 0 var(--bad-shelf); }
.btn.bad:active{ box-shadow:0 0 0 var(--bad-shelf); }
.btn.ghost{
  background:var(--card); color:var(--ink-2);
  border:1px solid var(--line); border-bottom-width:2px;
  box-shadow:none; padding:14px 24px;
}
.btn.ghost:active{ transform:translateY(2px); border-bottom-width:2px; margin-bottom:2px; }
.btn.sm{ font-size:15px; padding:10px 15px; border-radius:6px; }
.home-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.home-tabs .btn.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.course-tabs{ display:flex; gap:8px; margin:18px 0 16px; }
.course-tab{
  flex:1; min-height:46px; padding:10px 14px; border:1px solid var(--line-strong); border-radius:7px;
  background:var(--card); color:var(--ink-2); font-size:16px; font-weight:800;
}
.course-tab.active{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 3px 0 var(--brand-shelf); }
.course-tab:not(.active):hover{ color:var(--brand); border-color:var(--brand); background:var(--brand-soft); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn:disabled:active{ transform:none; }

.iconbtn{
  border:none; background:transparent; color:var(--ink-3);
  font-size:24px; line-height:1; padding:6px 10px; border-radius:6px;
  font-family:"Space Grotesk",sans-serif;
}
.iconbtn:hover{ color:var(--ink); background:var(--glass-lift); }

/* ---------- hub ---------- */
.hub{ max-width:940px; margin:0 auto; padding:26px 16px 10px; }
.hubhero{ padding:18px 0 30px; max-width:60ch; }
.hubhero h1{ font-size:42px; line-height:1.05; margin-bottom:12px; }
.hubhero p{ font-size:18px; color:var(--ink-2); margin:0; }
.hublabel{
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin:26px 0 12px;
}
.hubgrid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.subject{
  display:flex; flex-direction:column; gap:8px;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--s);
  border-radius:8px; padding:20px; text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, transform .06s ease, background .15s ease;
}
a.subject:hover{ border-color:var(--s); background:var(--glass-lift); backdrop-filter:var(--frost-lift); -webkit-backdrop-filter:var(--frost-lift); }
a.subject:active{ transform:translateY(3px); border-bottom-width:2px; margin-bottom:3px; }
.subject .mark{
  width:46px; height:46px; border-radius:7px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--s) 16%, var(--card));
  border:2px solid color-mix(in srgb, var(--s) 45%, var(--line));
  color:var(--s); margin-bottom:4px;
}
.subject .mark svg{ width:26px; height:26px; }
.subject h3{ font-size:22px; }
.subject p{ margin:0; font-size:15px; color:var(--ink-3); }
.subject .tagline{
  margin-top:6px; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--s);
}
/* The two halves of the site, side by side, before anything else. */
.hubdoors{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.door{
  display:flex; flex-direction:column; gap:9px; padding:24px;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--s);
  border-radius:10px; text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, transform .06s ease, background .15s ease;
}
.door:hover{ border-color:var(--s); background:var(--glass-lift); backdrop-filter:var(--frost-lift); -webkit-backdrop-filter:var(--frost-lift); }
.door:active{ transform:translateY(3px); }
.door .mark{
  width:52px; height:52px; border-radius:9px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--s) 16%, var(--card));
  border:2px solid color-mix(in srgb, var(--s) 45%, var(--line));
  color:var(--s); margin-bottom:4px;
}
.door h2{ font-size:27px; line-height:1.1; }
.door p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--ink-2); }
.door .tagline{
  margin-top:auto; padding-top:10px; font-size:12.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--s);
}
/* Plain cards in a grid, for describing rather than linking. */
.subject.plain{ border-left-color:var(--line); }
.subject.plain .tagline{ color:var(--ink-3); }

.subject.soon{ opacity:.72; }
.subject.soon .tagline{ color:var(--ink-3); }

/* ---------- course shell ---------- */
.app{ max-width:620px; margin:0 auto; padding:14px 16px 140px; overflow-x:clip; }
.screen{ display:none; }
.screen.active{ display:block; }
/* Course chrome is shared context. Keep it fixed while only the swapped content enters. */
.screen[data-screen="home"].active > :not(.coursecrumb):not(.coursehero):not(.course-tabs),
.screen[data-screen="extra"].active [data-f="extraBody"] > *{
  animation:screen-in .22s cubic-bezier(.2,.75,.28,1) backwards;
}
@keyframes screen-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
/* A fresh question or teaching screen inside a session. */
[data-f="question"].is-fresh{ animation:screen-in .26s cubic-bezier(.2,.75,.28,1) backwards; }

.topbar{ display:flex; align-items:center; gap:12px; padding:6px 0 14px; }
.progresstrack{
  flex:1; height:18px; border-radius:999px; background:var(--well); overflow:hidden;
  box-shadow:inset 0 2px 0 rgba(0,0,0,0.06);
}
.progressfill{
  height:100%; width:0%; border-radius:999px; background:var(--good);
  box-shadow:inset 0 4px 0 rgba(255,255,255,0.28);
  transition:width .35s cubic-bezier(.22,1,.36,1);
}
.attempts{ display:flex; gap:5px; align-items:center; }
.attempts i{ display:block; width:18px; height:7px; background:var(--bad); border-radius:1px; }
.attempts i.spent{ background:var(--line-strong); opacity:.6; }

.coursehero{ display:flex; align-items:center; gap:14px; padding:8px 4px 18px; }
.coursehero .logo{
  width:48px; height:48px; border-radius:7px; flex:none;
  background:var(--brand); box-shadow:0 2px 0 var(--brand-shelf);
  display:grid; place-items:center; color:#fff;
}
.coursehero h1{ font-size:32px; line-height:1.05; }
.coursehero p{ margin:4px 0 0; font-size:15px; color:var(--ink-3); font-weight:700; }

.statrow{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:22px; }
.stat{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--line-strong);
  border-radius:6px; padding:12px 10px; text-align:center;
}
.stat b{
  display:block; font-family:"Space Grotesk",sans-serif; font-weight:650; font-size:26px;
  line-height:1.1; font-variant-numeric:tabular-nums;
}
.stat span{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:800; }
.stat.streak b{ color:var(--gold); }
.stat.acc b{ color:var(--good); }

.pathhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 4px 12px; }
.pathhead h2{ font-size:22px; }

.path{ position:relative; display:flex; flex-direction:column; gap:6px; }
/* Short staggered entrance for the compact lesson rows. */
.path .unit{ animation:screen-in .24s cubic-bezier(.2,.75,.28,1) backwards; }
.path .unit:nth-child(1){ animation-delay:0.02s; }
.path .unit:nth-child(2){ animation-delay:0.04s; }
.path .unit:nth-child(3){ animation-delay:0.06s; }
.path .unit:nth-child(4){ animation-delay:0.08s; }
.path .unit:nth-child(5){ animation-delay:0.10s; }
.path .unit:nth-child(6){ animation-delay:0.12s; }
.path .unit:nth-child(7){ animation-delay:0.14s; }
.path .unit:nth-child(8){ animation-delay:0.16s; }
.path .unit:nth-child(9){ animation-delay:0.18s; }
.path .unit:nth-child(10){ animation-delay:0.20s; }

.unitrow{ position:relative; min-width:0; }
.unit{
  display:flex; align-items:center; gap:11px; width:100%; min-height:60px;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--u);
  border-radius:7px; padding:9px 106px 9px 11px; text-align:left;
  transition:border-color .15s ease, transform .06s ease, background .15s ease;
}
.unit:hover{ border-color:var(--u); background:var(--glass-lift); backdrop-filter:var(--frost-lift); -webkit-backdrop-filter:var(--frost-lift); }
.unit:active{ transform:translateY(2px); }
.disc{
  width:40px; height:40px; border-radius:7px; flex:none;
  background:color-mix(in srgb, var(--u) 16%, var(--card));
  border:1px solid color-mix(in srgb, var(--u) 45%, var(--line));
  display:grid; place-items:center; color:var(--u);
}
.disc svg{ width:24px; height:24px; }
.disc .script-pair{ display:block; white-space:nowrap; font-size:15px; letter-spacing:-.12em; line-height:1; }
.disc .music-pattern{ display:block; white-space:nowrap; font-family:"IBM Plex Mono","SFMono-Regular",monospace; font-size:14px; font-weight:600; letter-spacing:-.08em; line-height:1; }
.unit.done .disc{ background:var(--u); border-color:var(--u); color:#fff; }
.unit.next .disc{ background:var(--u); border-color:var(--u); color:#fff; box-shadow:0 0 0 4px color-mix(in srgb, var(--u) 22%, transparent); }
.utext{ display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:center; gap:8px; flex:1; min-width:0; }
.utext b{ font-family:"Space Grotesk",sans-serif; font-weight:650; font-size:17px; color:var(--ink); line-height:1.15; white-space:nowrap; }
.utext span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--ink-3); font-weight:700; }
.meter{ grid-column:1/-1; height:6px; border-radius:999px; background:var(--well); overflow:hidden; margin: -2px 12px 0 0; }
.meter i{ display:block; height:100%; border-radius:999px; background:var(--u); }
.unit-practice{
  position:absolute; z-index:2; right:10px; top:50%; transform:translateY(-50%);
  min-height:30px; padding:5px 7px; border:1px dashed var(--line-strong);
  border-radius:6px; background:transparent; color:var(--ink-3);
  font-family:"Space Grotesk",sans-serif; font-size:10px; font-weight:750;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .06s ease;
}
.unit-practice:hover{ color:var(--u); border-color:var(--u); background:color-mix(in srgb, var(--u) 7%, transparent); }
.unit-practice:active{ transform:translateY(calc(-50% + 2px)); }

@media (max-width:520px){
  .unit{ padding-right:108px; }
  .utext{ grid-template-columns:1fr; gap:1px; }
  .utext span{ white-space:normal; }
  .chev{ display:none; }
}

/* ---------- teaching card ---------- */
.newchip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-shelf); background:color-mix(in srgb, var(--gold) 22%, transparent);
  padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.teach h2{ font-size:32px; line-height:1.15; margin-bottom:10px; }
.teach .body{ font-size:18px; color:var(--ink-2); margin:0 0 18px; max-width:52ch; }
.demo{ background:var(--well); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:18px; }
.demo .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.demo .cap{ font-size:14px; color:var(--ink-3); margin:12px 0 0; font-weight:700; }
.practice-preview{
  margin:0 0 18px; padding:11px 13px; background:color-mix(in srgb, var(--brand) 10%, var(--well));
  border-left:3px solid var(--brand); border-radius:6px; color:var(--ink-2); font-size:15px; font-weight:750;
}
.practice-preview b{ color:var(--brand); }

/* ---------- questions ---------- */
.qtag{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:fit-content;
  color:var(--brand); background:color-mix(in srgb, var(--brand) 14%, var(--well));
  border:1px solid color-mix(in srgb, var(--brand) 42%, var(--line));
  border-left:4px solid var(--brand); border-radius:9px;
  padding:8px 13px 9px 11px; margin:0 0 18px;
  font-size:14px; font-weight:850; letter-spacing:.035em; text-transform:none;
  box-shadow:0 5px 14px color-mix(in srgb, var(--brand) 10%, transparent);
}
.qtag::before{
  content:'Current topic'; color:var(--ink-3); font-size:10px; font-weight:900;
  letter-spacing:.12em; line-height:1; text-transform:uppercase;
}
.qhead{ font-size:34px; line-height:1.15; margin:0 0 6px; }
.qsub{ margin:0 0 18px; color:var(--ink-3); font-size:16px; }
.speakbtn{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 16px; padding:8px 11px;
  background:var(--card); color:var(--ink-2); border:1px solid var(--line-strong); border-radius:8px;
  font-size:13px; font-weight:800;
}
.speakbtn::before{ content:'🔊'; font-size:14px; line-height:1; }
.speakbtn:hover{ color:var(--brand); border-color:var(--brand); background:var(--brand-soft); }

/* ---------- handwriting ---------- */
/* The character sits in a practice square with a centre cross and diagonals,
   the guide people actually learn to write on. Before this it floated in an
   empty panel with nothing to place it against. */
.writing{
  display:grid; gap:14px; justify-items:center;
  padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--well);
}
.writer-top{ display:flex; align-items:center; justify-content:center; width:100%; min-height:34px; }
.writer-stage{
  position:relative; width:min(320px,100%); aspect-ratio:1; border-radius:12px;
  border:1px solid var(--line-strong); background:var(--card);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.writer-stage::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--line-strong) calc(50% - .5px), var(--line-strong) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to right,  transparent calc(50% - .5px), var(--line-strong) calc(50% - .5px), var(--line-strong) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom left,  transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px));
}
.writerbox{ position:absolute; inset:0; touch-action:none; }
.writerbox svg{ display:block; width:100%; height:100%; }
/* The frame carries the state, so there is no separate badge appearing and
   disappearing and shifting everything under it. */
.writer-stage.locked .writerbox{ pointer-events:none; opacity:.45; filter:grayscale(.4); }
.writer-stage.watching{ border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent); }
.writer-stage.watching .writerbox{ pointer-events:none; opacity:1; filter:none; }
.writer-stage.ready{ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent); }
.writer-stage.done{ border-color:var(--good); box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 20%,transparent); }
.writer-status{
  min-height:38px; max-width:34ch; margin:0; text-align:center;
  color:var(--ink-2); font-size:14px; font-weight:700; line-height:1.35;
}
.writer-actions{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; width:100%; }
.writer-actions .btn{ flex:1 1 auto; min-width:128px; width:auto; padding:11px 14px; font-size:14px; }
.writer-actions .btn:disabled{ cursor:default; filter:saturate(.55); opacity:.65; }

/* The stroke hint, drawn here rather than by the writing library. */
.stroke-hint{ pointer-events:none; transition:opacity .4s ease; }
.stroke-hint.is-leaving{ opacity:0; }
.stroke-hint-shape{ fill:var(--gold); opacity:.28; }
.stroke-hint-travel{
  fill:none; stroke:var(--gold); stroke-width:34; stroke-linecap:round; stroke-linejoin:round; opacity:.95;
}
@media(max-width:560px){
  .writer-actions .btn{ min-width:0; }
}
.memory-switch{
  display:inline-flex; align-items:center; gap:10px; min-height:42px; padding:6px 8px 6px 12px;
  border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-2);
  cursor:pointer; font-size:13px; font-weight:800; line-height:1.1; user-select:none;
}
.memory-switch:hover{ border-color:var(--brand); }
.memory-switch .memory-label{ display:flex; flex-direction:column; gap:2px; }
.memory-switch small{ color:var(--ink-3); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.memory-switch input{ position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }
.memory-switch i{ position:relative; width:40px; height:23px; border-radius:999px; background:#3a4152; transition:background .18s ease; flex:0 0 auto; }
.memory-switch i::after{ content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#f4f6fb; box-shadow:0 1px 3px #0007; transition:transform .18s ease; }
.memory-switch input:checked + i{ background:var(--brand); }
.memory-switch input:checked + i::after{ transform:translateX(17px); }
.memory-switch:has(input:focus-visible){ outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent); outline-offset:2px; }
.memory-switch:has(input:disabled){ cursor:default; opacity:.62; }
.writing > .memory-switch{ display:flex; width:max-content; max-width:100%; margin:0 auto 14px; }
.choices{ display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:18px; }
.choices.tall{ grid-template-columns:1fr; }
.choice{
  background:var(--card); color:var(--ink);
  border:2px solid var(--line); border-bottom-width:5px;
  border-radius:16px; padding:20px 18px;
  font-size:19px; font-weight:800; text-align:center;
  transition:background .12s ease, border-color .12s ease, transform .06s ease;
}
.choice:hover:not(:disabled){ background:var(--card-2); border-color:var(--line-strong); }
.choice:active:not(:disabled){ transform:translateY(3px); border-bottom-width:2px; margin-bottom:3px; }
.choice:disabled{ cursor:default; }
.choice.correct{ background:var(--good-soft); border-color:var(--good); color:var(--good); }
.choice.wrong{ background:var(--bad-soft); border-color:var(--bad); color:var(--bad); animation:shake .34s ease; }
@keyframes shake{ 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-6px);} 45%{ transform:translateX(5px);} 70%{ transform:translateX(-3px);} }

.typerow{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.typein{
  flex:1; min-width:180px;
  background:var(--card); color:var(--ink);
  border:2px solid var(--line); border-bottom-width:5px; border-radius:16px;
  padding:18px 18px; font-family:"Space Grotesk",sans-serif; font-weight:650; font-size:20px;
}
.typein::placeholder{ color:var(--ink-3); font-weight:500; }
.typein.correct{ border-color:var(--good); color:var(--good); background:var(--good-soft); }
.typein.wrong{ border-color:var(--bad); color:var(--bad); background:var(--bad-soft); animation:shake .34s ease; }

.hintrow{ display:flex; justify-content:center; margin-top:20px; }
.hintbtn{
  border:none; background:transparent; color:var(--ink-3);
  font-size:15px; font-weight:800; text-decoration:underline; text-underline-offset:4px;
  padding:8px 12px; border-radius:10px;
}
.hintbtn:hover{ color:var(--brand); }

/* ---------- feedback sheet ---------- */
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--card-2); border-top:2px solid var(--line);
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(110%);
  /* Kept out of sight and out of the way while it is down, so it can never
     show under another screen or swallow a click meant for the page. */
  visibility:hidden; pointer-events:none;
  transition:transform .28s cubic-bezier(.22,1,.36,1), visibility 0s linear .28s;
}
.sheet.up{ transform:translateY(0); visibility:visible; pointer-events:auto; transition-delay:0s; }
.sheet.right{ background:var(--good-soft); border-top-color:var(--good); }
.sheet.wrong{ background:var(--bad-soft); border-top-color:var(--bad); }
.sheet-inner{ max-width:620px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.verdict{ display:flex; align-items:center; gap:12px; }
.vmark{
  width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif; font-size:24px; color:#fff; background:var(--ink-3);
}
.sheet.right .vmark{ background:var(--good); }
.sheet.wrong .vmark{ background:var(--bad); }
.verdict h3{ font-size:24px; line-height:1.1; }
.sheet.right .verdict h3{ color:var(--good-shelf); }
.sheet.wrong .verdict h3{ color:var(--bad-shelf); }
.explain{ margin:0; font-size:16px; font-weight:700; color:var(--ink-2); }
.sheet.right .explain{ color:var(--good-shelf); }
.sheet.wrong .explain{ color:var(--bad-shelf); }

/* ---------- results ---------- */
.result{ text-align:center; padding:26px 0 10px; }
.result h2{ font-size:38px; margin-bottom:6px; }
.result p{ color:var(--ink-3); font-size:17px; margin:0 0 26px; }
.prize{ width:120px; height:120px; margin:0 auto 18px; display:block; }
.resgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:28px; }

/* ---------- overlay ---------- */
.backdrop{ position:fixed; inset:0; background:rgba(14,17,28,.55); z-index:60; display:grid; place-items:center; padding:20px; }
.modal{ background:var(--card); border-radius:24px; padding:26px; max-width:460px; width:100%; border:2px solid var(--line); }
.modal h3{ font-size:24px; margin-bottom:10px; }
.modal p{ font-size:16.5px; color:var(--ink-2); margin:0 0 20px; }
.app-overlay{ position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:18px; background:rgba(4,6,12,.7); backdrop-filter:blur(6px); animation:overlay-in .2s ease both; }
.app-dialog{ width:min(100%,430px); background:var(--card); border:1px solid var(--line-strong); border-radius:14px; padding:22px; box-shadow:0 22px 60px #000a; animation:pop-in .28s cubic-bezier(.22,1,.36,1) both; }
.app-dialog h2{ font-size:25px; margin:0 0 8px; }
.app-dialog p{ color:var(--ink-2); line-height:1.45; margin:0 0 18px; }
.dialog-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:18px; }
.dialog-actions .btn{ width:auto; padding:11px 16px; font-size:15px; }
.dialog-input{ width:100%; border:1px solid var(--line-strong); border-radius:7px; background:var(--well); color:var(--ink); padding:12px; font:700 16px "Space Grotesk",sans-serif; }
.dialog-input:focus{ outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent); border-color:var(--brand); }
@keyframes overlay-in{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- generic content cards (lesson pages) ---------- */
.card{
  isolation:isolate;
  background:color-mix(in srgb,var(--card) 74%,transparent); border:2px solid var(--glass-edge); border-radius:20px;
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
  padding:22px; margin-bottom:16px;
}
.card h2{ font-size:27px; margin-bottom:8px; }
.card p{ font-size:16.5px; color:var(--ink-2); margin:0 0 14px; max-width:60ch; }
.card p:last-child{ margin-bottom:0; }
.card strong{ color:var(--ink); }
.pill{
  background:var(--card); border:2px solid var(--line); border-bottom-width:4px;
  border-radius:14px; padding:10px 14px; font-size:15px; font-weight:800; color:var(--ink-2);
}
.pill.active{ background:var(--brand); border-color:var(--brand); box-shadow:0 4px 0 var(--brand-shelf); border-bottom-width:2px; color:#fff; }

/* Moving between Home, Lessons and Studio. Browsers that support cross-document
   view transitions keep the header in place and cross-fade the page under it;
   the rest get the same settle-in animation on arrival. */
@view-transition{ navigation:auto; }
.sitehead{ view-transition-name:sitehead; }
@keyframes page-in{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
/* backwards, not both: an animation left filling forwards holds an identity
   matrix rather than `none`, and any transform makes the element the
   containing block for whatever is fixed inside it. That pinned the
   feedback sheet to the page instead of the viewport. */
main.hub,#app,.studio-shell{ animation:page-in .34s cubic-bezier(.2,.75,.28,1) backwards; }
::view-transition-old(root){ animation:vt-out .18s ease both; }
::view-transition-new(root){ animation:vt-in .28s cubic-bezier(.2,.75,.28,1) both; }
@keyframes vt-out{ from{ opacity:1; } to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }

/* Back out of a course to the full lesson list. */
.coursecrumb{ display:flex; padding:14px 4px 0; }
.crumblink{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px;
  padding:6px 13px 6px 10px; background:var(--card); color:var(--ink-2);
  font:800 13px/1 "Space Grotesk",sans-serif; text-decoration:none;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.crumblink:hover{ border-color:var(--brand); color:var(--brand); transform:translateX(-2px); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
@media (max-width:560px){
  .app{ padding:10px 12px 150px; }
  .hubhero h1{ font-size:32px; }
  .coursehero h1{ font-size:27px; }
  .qhead{ font-size:27px; }
  .choices{ grid-template-columns:1fr; }
  .disc{ width:50px; height:50px; border-radius:16px; }
  .utext b{ font-size:18px; }
  .teach h2{ font-size:26px; }
  .teach .body{ font-size:16.5px; }
  .path::before{ left:32px; }
  .result h2{ font-size:31px; }
}

/* ---------- restrained home ---------- */
.home-simple{ max-width:920px; padding-top:76px; padding-bottom:72px; }
.home-intro{ max-width:660px; margin:0 0 40px; }
.eyebrow{ margin:0 0 8px; color:var(--ink-3); font:800 11px/1.2 "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.home-intro h1{ margin:0; font-size:clamp(42px,7vw,72px); line-height:.98; letter-spacing:-.055em; }
.home-intro>p:last-child{ max-width:52ch; margin:18px 0 0; color:var(--ink-2); font-size:18px; line-height:1.55; }
.home-paths{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:52px; }
.home-path{ isolation:isolate; backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost); min-height:220px; display:flex; flex-direction:column; padding:24px; border:1px solid var(--glass-edge); border-radius:12px; text-decoration:none; color:var(--ink); background:var(--glass); transition:border-color .22s ease, background .22s ease, transform .22s ease; }
.home-path.learn{ border-top:3px solid var(--brand); }.home-path.make{ border-top:3px solid var(--good); }
.home-path:hover{ background:var(--glass-lift); transform:translateY(-2px); }.home-path.learn:hover{ border-color:var(--brand); }.home-path.make:hover{ border-color:var(--good); }
.home-path-kicker{ color:var(--ink-3); font:800 11px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.home-path h2{ margin:16px 0 8px; font-size:30px; }.home-path p{ margin:0; color:var(--ink-2); line-height:1.5; }
.home-path>span:last-child{ margin-top:auto; padding-top:22px; font:800 13px/1 "IBM Plex Mono",monospace; }.home-path.learn>span:last-child{color:var(--brand);}.home-path.make>span:last-child{color:var(--good);}
.home-section{ margin:0 0 52px; }.home-section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }.home-section-head h2,.home-how h2{ margin:0; font-size:25px; }
.course-links{ display:grid; border-top:1px solid var(--line); }
.course-links a{ display:grid; grid-template-columns:minmax(150px,.72fr) 1.5fr auto; gap:16px; align-items:center; padding:16px 4px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); transition:color .18s ease, padding .18s ease; }.course-links a:hover{ color:var(--brand); padding-left:10px; }.course-links b{font-size:16px;}.course-links span{color:var(--ink-3);font-size:14px;}.course-links i{font-style:normal;font-size:20px;}
.home-how{ display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; padding:24px 0 0; border-top:1px solid var(--line); }.home-how ol{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }.home-how li{ display:flex; gap:11px; align-items:center; color:var(--ink-2); }.home-how li b{ display:grid; place-items:center; width:25px;height:25px;border-radius:50%;background:var(--well);color:var(--brand);font:800 11px/1 "IBM Plex Mono",monospace; }
@media(max-width:620px){ .home-simple{padding-top:46px;}.home-paths,.home-how{grid-template-columns:1fr;}.home-path{min-height:190px;}.course-links a{grid-template-columns:1fr auto;gap:3px 12px;}.course-links span{grid-column:1;}.course-links i{grid-column:2;grid-row:1 / span 2;}.home-how{gap:18px;} }

/* Account settings is a compact identity card, not a generic form. */
.account-profile{display:flex;align-items:center;gap:13px;margin:18px 0;padding:13px;border:1px solid var(--line);border-radius:10px;background:var(--well)}.account-avatar{width:52px;height:52px;display:grid;place-items:center;flex:none;border-radius:50%;background:var(--brand-soft);border:2px solid var(--brand);background-size:cover;background-position:center;color:var(--brand);font:800 15px/1 "IBM Plex Mono",monospace}.account-profile b{display:block;font:700 17px/1.2 "Space Grotesk",sans-serif}.account-profile small{display:block;margin-top:4px;color:var(--ink-3);font:700 11px/1 "IBM Plex Mono",monospace}.authbtn.has-avatar{background-size:cover;background-position:center;color:transparent!important;text-shadow:none}

/* Course category tabs stay fully reachable on narrow phones. */
@media (max-width:560px){
  .home-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .home-tabs .btn{min-width:0;width:100%;padding:10px 8px;font-size:14px;}
}


/* ---------- animated topographic atmosphere ---------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
  ::view-transition-old(root),::view-transition-new(root){
    animation-duration:.52s;
    animation-timing-function:cubic-bezier(.16,1,.3,1);
  }
}
body{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(80% 70% at 8% 6%,#141632 0%,transparent 60%),
    radial-gradient(60% 65% at 92% 95%,#111a35 0%,transparent 62%),
    var(--ground);
}
.crow-topography{
  position:fixed; inset:0; z-index:0; width:100%; height:100%;
  pointer-events:none; opacity:0;
  mask-image:radial-gradient(ellipse 55% 48% at 50% 43%,rgba(0,0,0,.34),rgba(0,0,0,.70) 58%,#000 100%);
  -webkit-mask-image:radial-gradient(ellipse 55% 48% at 50% 43%,rgba(0,0,0,.34),rgba(0,0,0,.70) 58%,#000 100%);
  transition:opacity .8s cubic-bezier(.16,1,.3,1);
}
.crow-topography-outgoing{ opacity:0; transition:opacity 1.15s cubic-bezier(.16,1,.3,1); }

.sitehead{
  position:sticky; top:0; z-index:20;
  border-bottom-color:color-mix(in srgb,var(--line) 56%,transparent);
  background:color-mix(in srgb,var(--card) 62%,transparent);
  box-shadow:0 12px 34px rgba(4,7,18,.10);
}
/* One set of terms for every frosted surface, so Studio and the courses agree.
   Hovering thickens the frost and lets a little less through, rather than
   dropping an opaque slab over the terrain. */
:root{
  --glass:color-mix(in srgb,var(--card) 14%,transparent);
  --glass-lift:color-mix(in srgb,var(--card-2) 22%,transparent);
  --glass-deep:color-mix(in srgb,var(--card) 32%,transparent);
  --glass-edge:color-mix(in srgb,var(--line) 55%,transparent);
  --frost:blur(2px) saturate(110%);
  --frost-lift:blur(4px) saturate(116%);
  --frost-deep:blur(6px) saturate(118%);
}
.subject,.door,.stat,.unit,.demo,.course-tab,.speakbtn,.btn.ghost{
  isolation:isolate;
  background:var(--glass);
  border-color:var(--glass-edge);
  backdrop-filter:var(--frost);
  -webkit-backdrop-filter:var(--frost);
  transition:background .22s ease, border-color .22s ease;
}
.subject:hover,.door:hover,.unit:hover,.course-tab:not(.active):hover,.btn.ghost:hover{
  background:var(--glass-lift);
  backdrop-filter:var(--frost-lift);
  -webkit-backdrop-filter:var(--frost-lift);
}
@media (prefers-reduced-motion: reduce){
  .crow-topography{ transition:none; }
}


/* The terrain owns the entire viewport: no page-height seam or separate glow layer. */
body{
  min-height:100vh;
  background:var(--ground);
}

:root[data-theme="dusk"]{
  --ground:#15101d; --card:#241a31; --card-2:#30213f; --well:#1b1425;
  --line:#4b385d; --line-strong:#665076;
  --ink:#f5edf7; --ink-2:#d4c0d8; --ink-3:#a893ac;
  --brand:#d67cbe; --brand-shelf:#9e477f; --brand-soft:#3b1e40;
  --good:#59d1a4; --good-shelf:#2f9976; --good-soft:#15362f;
  --bad:#ff8695; --bad-shelf:#c25468; --bad-soft:#421d29;
  --gold:#e8bd68; --gold-shelf:#ad7b2e;
  --key-white:#f0e7f2; --key-white-2:#cbbbd1; --key-black:#2a1c31; --key-black-2:#100b14;
  color-scheme:dark;
}

/* Floating account UI must sit above the glass page layers. */
body > .account-popover{ position:fixed !important; z-index:60 !important; }
body > .app-overlay{ position:fixed !important; z-index:70 !important; }
.theme-dialog{ width:min(100%,520px); }
.theme-choices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:4px 0 18px; }
.theme-choice{ display:flex; align-items:center; gap:10px; min-height:74px; padding:10px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--well) 76%,transparent); color:var(--ink); text-align:left; }
.theme-choice:hover,.theme-choice.active{ border-color:var(--brand); background:color-mix(in srgb,var(--brand-soft) 56%,transparent); }
.theme-choice b,.theme-choice small{ display:block; }
.theme-choice b{ font-size:14px; }
.theme-choice small{ margin-top:3px; color:var(--ink-3); font-size:11px; font-weight:700; }
.theme-swatch{ width:30px; height:30px; flex:none; border:1px solid rgba(255,255,255,.20); border-radius:8px; background:linear-gradient(135deg,#f1f4fb 0 33%,#bac4da 33% 56%,#8090bd 56%); }
.theme-dark .theme-swatch{ background:linear-gradient(135deg,#0e111c 0 33%,#252048 33% 56%,#7c66ff 56%); }
.theme-light .theme-swatch{ background:linear-gradient(135deg,#fafbff 0 33%,#dbe2f0 33% 56%,#a78bfa 56%); }
.theme-dusk .theme-swatch{ background:linear-gradient(135deg,#15101d 0 33%,#3b1e40 33% 56%,#d67cbe 56%); }
@media(max-width:480px){ .theme-choices{ grid-template-columns:1fr; } }


/* Theme families: every palette has its own light and dark surface, not just a new accent. */
:root[data-theme="gruvbox-light"]{
  --ground:#fbf1c7; --card:#f2e5bc; --card-2:#ebdbb2; --well:#f9e9b5;
  --line:#d5c4a1; --line-strong:#bdae93;
  --ink:#3c3836; --ink-2:#665c54; --ink-3:#928374;
  --brand:#af3a03; --brand-shelf:#8f2f00; --brand-soft:#f2dca0;
  --good:#79740e; --good-shelf:#5e6108; --good-soft:#e7e2aa;
  --bad:#cc241d; --bad-shelf:#9d0006; --bad-soft:#f2c4ae;
  --gold:#b57614; --gold-shelf:#8a5b0a;
  --key-white:#fff7db; --key-white-2:#d8c99f; --key-black:#504945; --key-black-2:#282828;
  color-scheme:light;
}
:root[data-theme="gruvbox-dark"]{
  --ground:#282828; --card:#3c3836; --card-2:#504945; --well:#1d2021;
  --line:#665c54; --line-strong:#7c6f64;
  --ink:#ebdbb2; --ink-2:#d5c4a1; --ink-3:#a89984;
  --brand:#d79921; --brand-shelf:#b57614; --brand-soft:#55451c;
  --good:#b8bb26; --good-shelf:#98971a; --good-soft:#3f4820;
  --bad:#fb4934; --bad-shelf:#cc241d; --bad-soft:#552820;
  --gold:#fabd2f; --gold-shelf:#d79921;
  --key-white:#ebdbb2; --key-white-2:#bdae93; --key-black:#3c3836; --key-black-2:#1d2021;
  color-scheme:dark;
}
:root[data-theme="monokai-light"]{
  --ground:#fafafa; --card:#f0f0eb; --card-2:#e5e5de; --well:#f7f7f2;
  --line:#c9c9bd; --line-strong:#a9a99c;
  --ink:#272822; --ink-2:#55564b; --ink-3:#797a6d;
  --brand:#d81b60; --brand-shelf:#ad1457; --brand-soft:#f8d3df;
  --good:#618b00; --good-shelf:#4d7000; --good-soft:#e3edbc;
  --bad:#d35400; --bad-shelf:#a84300; --bad-soft:#f8d7bd;
  --gold:#9c7a00; --gold-shelf:#7c6200;
  --key-white:#fffefa; --key-white-2:#d8d8cf; --key-black:#3b3c35; --key-black-2:#191a17;
  color-scheme:light;
}
:root[data-theme="monokai-dark"]{
  --ground:#272822; --card:#3e3d32; --card-2:#49483e; --well:#1f201b;
  --line:#5a594d; --line-strong:#777568;
  --ink:#f8f8f2; --ink-2:#d2d2c9; --ink-3:#a6a69a;
  --brand:#f92672; --brand-shelf:#bd1450; --brand-soft:#542033;
  --good:#a6e22e; --good-shelf:#7cae16; --good-soft:#35451c;
  --bad:#fd971f; --bad-shelf:#c66b0f; --bad-soft:#57351a;
  --gold:#e6db74; --gold-shelf:#bcb051;
  --key-white:#f8f8f2; --key-white-2:#c5c5b7; --key-black:#3e3d32; --key-black-2:#1f201b;
  color-scheme:dark;
}
:root[data-theme="runner-light"]{
  --ground:#f5f8fb; --card:#e8eef5; --card-2:#dce6f0; --well:#ffffff;
  --line:#bfcddd; --line-strong:#8fa4ba;
  --ink:#17212d; --ink-2:#425364; --ink-3:#708193;
  --brand:#e5324a; --brand-shelf:#b51f34; --brand-soft:#f9d8de;
  --good:#008eab; --good-shelf:#006f87; --good-soft:#cbeef4;
  --bad:#e5324a; --bad-shelf:#b51f34; --bad-soft:#f9d8de;
  --gold:#e8a119; --gold-shelf:#b9780c;
  --key-white:#ffffff; --key-white-2:#cfdae5; --key-black:#263544; --key-black-2:#101820;
  color-scheme:light;
}
:root[data-theme="runner-dark"]{
  --ground:#101923; --card:#172532; --card-2:#213442; --well:#0b1219;
  --line:#395264; --line-strong:#51728a;
  --ink:#f3f8fb; --ink-2:#c4d4df; --ink-3:#91a9b8;
  --brand:#ff3e57; --brand-shelf:#c9253b; --brand-soft:#542333;
  --good:#2bc6d6; --good-shelf:#168c9a; --good-soft:#123b43;
  --bad:#ff5a70; --bad-shelf:#c93b4e; --bad-soft:#552330;
  --gold:#f7c94d; --gold-shelf:#be9227;
  --key-white:#f3f8fb; --key-white-2:#b7c8d5; --key-black:#20313d; --key-black-2:#0a1117;
  color-scheme:dark;
}
.theme-system .theme-swatch{ background:linear-gradient(135deg,#f5f8fb 0 33%,#b8c7d8 33% 56%,#202a35 56%); }
.theme-gruvbox-light .theme-swatch{ background:linear-gradient(135deg,#fbf1c7 0 33%,#d79921 33% 56%,#3c3836 56%); }
.theme-gruvbox-dark .theme-swatch{ background:linear-gradient(135deg,#282828 0 33%,#d79921 33% 56%,#ebdbb2 56%); }
.theme-monokai-light .theme-swatch{ background:linear-gradient(135deg,#fafafa 0 33%,#f92672 33% 56%,#272822 56%); }
.theme-monokai-dark .theme-swatch{ background:linear-gradient(135deg,#272822 0 33%,#a6e22e 33% 56%,#f92672 56%); }
.theme-runner-light .theme-swatch{ background:linear-gradient(135deg,#f5f8fb 0 33%,#e5324a 33% 56%,#008eab 56%); }
.theme-runner-dark .theme-swatch{ background:linear-gradient(135deg,#101923 0 33%,#ff3e57 33% 56%,#2bc6d6 56%); }


/* Compact theme chooser: one diagonal light/dark control per palette family. */
.theme-dialog{ width:min(100%,580px); }
.theme-choices{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:6px 0 14px; }
.theme-family{ min-width:0; }
.theme-family h3{ margin:0 0 7px; font-size:13px; line-height:1.1; color:var(--ink-2); text-align:center; }
.theme-pair{ position:relative; height:92px; overflow:hidden; border:1px solid var(--line-strong); border-radius:10px; background:var(--well); box-shadow:inset 0 1px rgba(255,255,255,.10); }
.theme-pair::after{ content:""; position:absolute; inset:-1px; z-index:3; pointer-events:none; background:linear-gradient(135deg,transparent 49.2%,rgba(255,255,255,.92) 49.7%,rgba(255,255,255,.92) 50.3%,transparent 50.8%); mix-blend-mode:overlay; }
.theme-mode{ position:absolute; inset:0; border:0; border-radius:0; padding:0; transition:filter .16s ease,transform .16s ease; }
.theme-mode:hover{ filter:brightness(1.09) saturate(1.08); }
.theme-mode:focus-visible{ outline:3px solid var(--brand); outline-offset:-4px; z-index:4; }
.theme-mode.light{ clip-path:polygon(0 0,100% 0,0 100%); }
.theme-mode.dark{ clip-path:polygon(100% 0,100% 100%,0 100%); }
.theme-family.active .theme-pair{ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 72%,transparent),inset 0 1px rgba(255,255,255,.18); }
.theme-family.active h3{ color:var(--brand); }
.theme-gruvbox .light{ background:linear-gradient(135deg,#fbf1c7 0 45%,#d79921 45% 72%,#af3a03 72%); }
.theme-gruvbox .dark{ background:linear-gradient(135deg,#282828 0 45%,#665c54 45% 70%,#d79921 70%); }
.theme-monokai .light{ background:linear-gradient(135deg,#fafafa 0 45%,#f92672 45% 70%,#a6e22e 70%); }
.theme-monokai .dark{ background:linear-gradient(135deg,#272822 0 42%,#a6e22e 42% 66%,#f92672 66%); }
.theme-runner .light{ background:linear-gradient(135deg,#f5f8fb 0 42%,#e5324a 42% 66%,#008eab 66%); }
.theme-runner .dark{ background:linear-gradient(135deg,#101923 0 42%,#ff3e57 42% 66%,#2bc6d6 66%); }
.theme-system-choice{ width:100%; margin:0 0 10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink-2); font-family:inherit; font-weight:700; font-size:13px; line-height:1.2; }
.theme-system-choice:hover,.theme-system-choice.active{ border-color:var(--brand); color:var(--brand); background:color-mix(in srgb,var(--brand-soft) 46%,transparent); }
@media(max-width:540px){ .theme-choices{ grid-template-columns:1fr; } .theme-pair{ height:70px; } .theme-family h3{text-align:left;} }

/* Only structural page roots sit over terrain; dynamic overlays keep their own depth. */
body > .sitehead,
body > main,
body > #app,
body > .sitefoot,
body > footer{ position:relative; z-index:1; }
body > .studio-upgrade-overlay,
body > .studio-practice-overlay,
body > .upgrade-slash{ position:fixed !important; z-index:80 !important; }

.theme-mode-label{ position:absolute; z-index:5; padding:4px 6px; border-radius:5px; background:rgba(9,12,18,.42); color:#fff; font:800 10px/1 "IBM Plex Mono",monospace; letter-spacing:.01em; text-shadow:0 1px 2px rgba(0,0,0,.65); pointer-events:none; opacity:.82; transition:opacity .16s ease,transform .16s ease,background .16s ease; }
.theme-mode.light .theme-mode-label{ top:9px; left:9px; }
.theme-mode.dark .theme-mode-label{ right:9px; bottom:9px; }
.theme-mode.light{ transform-origin:top left; }
.theme-mode.dark{ transform-origin:bottom right; }
.theme-mode.light:hover{ z-index:2; transform:translate(-2px,-2px) scale(1.035); }
.theme-mode.dark:hover{ z-index:2; transform:translate(2px,2px) scale(1.035); }
.theme-mode:hover .theme-mode-label,.theme-mode.active .theme-mode-label{ opacity:1; background:rgba(9,12,18,.66); transform:scale(1.05); }
.theme-mode:active{ filter:brightness(.94); }


/* The animated terrain reads the same palette tokens as the interface. */
:root{
  --terrain-glow-a:76,68,168; --terrain-glow-b:29,40,95;
  --terrain-major-a:99,142,255; --terrain-major-b:147,112,255; --terrain-major-c:86,188,238;
  --terrain-minor-a:104,143,224; --terrain-minor-b:129,111,218; --terrain-minor-c:81,158,212;
}
:root[data-theme="gruvbox-light"],:root[data-theme="gruvbox-dark"]{
  --terrain-glow-a:215,153,33; --terrain-glow-b:175,58,3;
  --terrain-major-a:250,189,47; --terrain-major-b:215,153,33; --terrain-major-c:184,187,38;
  --terrain-minor-a:213,196,161; --terrain-minor-b:215,153,33; --terrain-minor-c:175,58,3;
}
:root[data-theme="monokai-light"],:root[data-theme="monokai-dark"]{
  --terrain-glow-a:249,38,114; --terrain-glow-b:166,226,46;
  --terrain-major-a:249,38,114; --terrain-major-b:166,226,46; --terrain-major-c:230,219,116;
  --terrain-minor-a:253,151,31; --terrain-minor-b:166,226,46; --terrain-minor-c:249,38,114;
}
:root[data-theme="runner-light"],:root[data-theme="runner-dark"]{
  --terrain-glow-a:43,198,214; --terrain-glow-b:16,69,92;
  --terrain-major-a:43,198,214; --terrain-major-b:255,62,87; --terrain-major-c:247,201,77;
  --terrain-minor-a:70,163,183; --terrain-minor-b:255,62,87; --terrain-minor-c:43,198,214;
}