:root {
  --bg: var(--desk);
  --bg-2: var(--desk-2);
  --surface: var(--sheet-solid);
  --muted: var(--ink-2);
  --line: var(--rule-strong);
  --grid: var(--grid-line);
  --grid-axis: var(--axis);
  --band: var(--glass-strong);
  --band-ink: var(--ink);
  --x: var(--term-var);
  --c: var(--v-model);
  --fee: var(--e1);
  --rate: var(--e2);
  --ok-bg: var(--go-soft);
  --amber: var(--look);
  --amber-bg: var(--look-soft);
  --hint-bg: var(--act-soft);
  --p9: var(--mark-coral);
  --p15: var(--mark-sky);
  --p23: var(--mark-amber);
  --andy: var(--v-model);
  --plot: var(--learner);
  --focus: var(--act);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Lexend, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}
body.kp-open { padding-bottom: 280px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.loading { padding: 40px 16px; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 1.6rem; font-weight: 700; }
.lbl { display: block; font-weight: 600; font-size: 0.95rem; margin: 10px 0 6px; }
.sub { color: var(--muted); margin: 6px 0 0; }
.msg { min-height: 1.5em; margin: 10px 0 0; font-weight: 500; }
.msg.notyet { color: var(--amber); }
.msg.ok { color: var(--ok); }
.msg.info { color: var(--muted); }

.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--band);
  color: var(--band-ink);
  min-height: 60px;
  flex-wrap: wrap;
}
.bar .brand { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.bar-title { font-weight: 600; flex: 1; min-width: 0; }
.me { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--me) 35%, transparent); padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 0.9rem; }
.me-glyph { width: 32px; height: 32px; display: grid; place-items: center; background: var(--me); border-radius: 50%; font-size: 1.1rem; }
.back { color: var(--band-ink); }

.btn {
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 12px;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--line);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn.primary { background: var(--act); color: var(--on-act); box-shadow: 0 3px 0 var(--act-edge); }
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--act-edge); }
.btn.quiet { background: transparent; box-shadow: none; color: var(--act); text-decoration: underline; text-underline-offset: 3px; }
.btn.ghost, .ghost { background: transparent; box-shadow: none; border: 0; cursor: pointer; min-height: 44px; padding: 8px 12px; font-weight: 600; color: inherit; }
.btn:disabled { opacity: 0.45; cursor: default; }

.field {
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  width: 100%;
}
.field:focus { border-color: var(--act); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--act) 30%, transparent); }
.field.big { font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; }
.field.small { width: 4.5em; min-height: 44px; text-align: center; display: inline-block; padding: 6px; }
.field.drop { width: auto; display: inline-block; min-height: 44px; padding: 6px 8px; }
.field.cell { min-height: 44px; padding: 6px 8px; text-align: center; }
.field.fee { border-color: color-mix(in srgb, var(--fee) 60%, var(--line)); }
.field.rate { border-color: color-mix(in srgb, var(--rate) 60%, var(--line)); }
.mi { width: 100%; }
.preview { min-height: 1.6em; margin-top: 6px; color: var(--muted); font-size: 1.1rem; }

.center { display: grid; place-items: start center; padding: 32px 16px; }
.intro { width: min(560px, 100%); }
.intro.wide { width: min(760px, 100%); }
.stack { display: grid; gap: 4px; margin-top: 16px; }
.stack .btn { justify-self: start; margin-top: 8px; }
fieldset { border: 0; padding: 0; margin: 18px 0; }
.avatars, .colors { display: flex; flex-wrap: wrap; gap: 10px; }
.avatars legend, .colors legend { width: 100%; }
.tile {
  min-height: 56px;
  min-width: 96px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 0;
  background: var(--surface);
  box-shadow: 0 3px 0 var(--line);
  cursor: pointer;
  font-weight: 500;
}
.tile span { font-size: 1.5rem; }
.tile.on { background: var(--act); color: var(--on-act); box-shadow: 0 3px 0 var(--act-edge); }
.tile.color .sw { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); display: inline-block; box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
.tile.color.on { outline: 3px solid var(--sw); outline-offset: 2px; }

.home { padding: 24px 16px 48px; max-width: 980px; margin: 0 auto; }
.assigns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
.assign {
  text-align: left;
  border: 0;
  cursor: pointer;
  border-radius: 18px;
  padding: 20px;
  min-height: 190px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr;
  gap: 6px 12px;
  color: #fff;
  box-shadow: 0 5px 0 rgba(0,0,0,.25);
}
.assign:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.assign-kicker { font-size: 0.85rem; opacity: 0.85; grid-column: 1; }
.assign-name { font-size: 1.45rem; font-weight: 700; grid-column: 1; }
.assign-graph { grid-column: 2; grid-row: 1 / 4; align-self: center; width: 110px; }
.assign-graph path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.assign-status { grid-column: 1; align-self: end; font-weight: 600; background: rgba(255,255,255,.18); padding: 4px 10px; border-radius: 999px; justify-self: start; }
.switch { margin-top: 28px; }

.test-panel { margin-top: 28px; padding: 16px; background: var(--hint-bg); border-radius: 14px; }
.test-panel h2 { font-size: 1.1rem; }
.test-block { margin-top: 12px; }
.test-block h3 { font-size: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { min-height: 36px; border: 0; border-radius: 8px; background: var(--surface); padding: 4px 10px; cursor: pointer; font-size: 0.85rem; box-shadow: 0 2px 0 var(--line); }

.items { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; background: var(--bg-2); scrollbar-width: thin; }
.navgroup { display: flex; gap: 4px; align-items: center; padding: 4px 8px 4px 4px; border-radius: 12px; flex-shrink: 0; }
.navgroup.p9 { background: color-mix(in srgb, var(--p9) 16%, transparent); }
.navgroup.p15 { background: color-mix(in srgb, var(--p15) 16%, transparent); }
.navgroup.p23 { background: color-mix(in srgb, var(--p23) 18%, transparent); }
.navgroup.andy { background: color-mix(in srgb, var(--andy) 16%, transparent); }
.navpage { font-size: 0.8rem; font-weight: 700; padding: 0 6px; white-space: nowrap; }
.nav {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
  position: relative;
  padding: 0 10px;
}
.nav.cur { background: var(--act); color: var(--on-act); }
.nav.done:not(.cur) { background: var(--ok-bg); color: var(--ok); }
.nav .tick { font-size: 0.75rem; margin-left: 3px; }


svg.costgraph { width: 100%; height: auto; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
svg .paper { fill: var(--surface); }
svg .g { stroke: var(--grid); stroke-width: 1; }
svg .g.axis { stroke: var(--grid-axis); stroke-width: 2; }
svg .tick { fill: var(--muted); font-size: 14px; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; font-family: Lexend, system-ui, sans-serif; }
svg .axisname { fill: var(--ink); font-size: 16px; font-weight: 600; font-style: italic; font-family: Lexend, system-ui, sans-serif; }
svg .hit { fill: transparent; cursor: crosshair; }
svg .colhint { fill: color-mix(in srgb, var(--c) 18%, transparent); }
svg .vline { stroke: var(--plot); stroke-width: 3; }
svg .vline.solved { stroke: var(--ok); }
svg .arrowhead { fill: var(--plot); }
svg .pt circle { fill: var(--plot); stroke: var(--surface); stroke-width: 2; }
svg .pt text, svg .vertex text { font-size: 15px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; font-family: Lexend, system-ui, sans-serif; }
svg .pt.bad circle { fill: var(--amber); }
svg .vertex rect { fill: var(--x); stroke: var(--surface); stroke-width: 2; }
svg .vertex.bad rect { fill: var(--amber); }
svg .vertex.ok rect { fill: var(--ok); }
svg .pt.bad text, svg .vertex.bad text { fill: var(--amber); }
svg .cursor { fill: none; stroke: var(--focus); stroke-width: 3; }
svg .given-line { stroke: var(--ink); stroke-width: 2.5; }
svg.given .arrowhead { fill: var(--ink); }
svg .given-dot { fill: var(--ink); }
svg .ctitle { font-size: 14px; font-weight: 700; fill: var(--ink); font-family: Lexend, system-ui, sans-serif; }
svg .cost-line { stroke: var(--ink); stroke-width: 3; }
svg.costgraph .arrowhead { fill: var(--ink); }
svg .rise { fill: color-mix(in srgb, var(--rate) 22%, transparent); stroke: var(--rate); stroke-width: 2; stroke-dasharray: 4 3; }
svg .rise-label { fill: var(--rate); font-size: 12px; font-weight: 700; font-family: Lexend, system-ui, sans-serif; }
svg .fee-dot { fill: var(--fee); }
svg .fee-label { fill: var(--fee); font-size: 12px; font-weight: 700; font-family: Lexend, system-ui, sans-serif; }

.companion.moves ol { margin: 6px 0 0; padding-left: 20px; }
table.vt { border-collapse: collapse; width: 100%; }
table.vt caption { text-align: left; font-size: 0.85rem; color: var(--muted); padding-bottom: 6px; caption-side: top; }
table.vt th { font-size: 0.9rem; padding: 6px; background: var(--bg-2); }
table.vt td { padding: 4px; position: relative; }
table.vt tr.ok td .field { border-color: var(--ok); background: var(--ok-bg); }
table.vt tr.bad td .field { border-color: var(--amber); }
.rowok { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--ok); font-weight: 700; }
.eqref { margin-top: 10px; font-size: 1.05rem; }

.linked .tx, .linked .katex .tx { color: var(--x); font-weight: 700; }
.linked .tc, .linked .katex .tc { color: var(--c); font-weight: 700; }
.linked .tfee { color: var(--fee); font-weight: 700; }
.linked .trate { color: var(--rate); font-weight: 700; }

.actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
.result { font-size: 1.25rem; font-weight: 700; margin: 0; }
.result.ok { color: var(--ok); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.choice { min-height: 48px; min-width: 64px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); cursor: pointer; font-weight: 600; }
.choice.on { border-color: var(--act); background: color-mix(in srgb, var(--act) 14%, var(--surface)); }
.choice.eqc { font-size: 1.05rem; }
.known { margin: 0 0 6px; color: var(--muted); font-weight: 600; }
.template { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 1.25rem; margin: 6px 0; }
.template .bar { font-size: 1.8rem; font-weight: 300; }
.template .tx { color: var(--x); font-weight: 700; font-style: italic; }
.tpl-lhs { font-style: italic; }
.sign { min-width: 44px; min-height: 44px; border-radius: 10px; border: 0; background: var(--bg-2); font-size: 1.3rem; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.frame { font-size: 1.1rem; line-height: 2.4; margin: 6px 0; }

.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.debug { font-size: 0.8rem; color: var(--muted); margin-top: 12px; }

.andy-prompt { margin: 0 0 14px; font-size: 1.05rem; max-width: 820px; }
.andy-graph { background: var(--surface); padding: 12px; border-radius: 16px; flex: 1 1 340px; max-width: min(640px, calc(100vh - 200px)); }
.andy .problem { margin-top: 0; }
.andy .coach { border-top-color: var(--andy); }
.andy-t th[scope=row] { text-align: center; }
.andy-t .cellmi .field { font-size: 0.95rem; min-height: 44px; padding: 6px; }
.andy-t .cellmi .preview { display: none; }
.andy-t td { min-width: 90px; }

.quiz { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.quiz-head { margin-bottom: 16px; }
.qcount { font-weight: 600; color: var(--muted); margin: 10px 0 0; }
.quiz-item { background: var(--surface); border-radius: 16px; padding: 16px; border-top: 6px solid var(--act); }
.qpart + .qpart { margin-top: 18px; }
.qtex { font-size: 1.3rem; margin: 4px 0 8px; }
.quiz-graph { max-width: 420px; margin: 8px 0; }
.context { margin: 0 0 6px; }

.done { max-width: 860px; margin: 0 auto; padding: 28px 16px; }
.trend { font-size: 1.15rem; font-weight: 600; color: var(--ok); }
.help-map ol { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.help-map li { padding: 10px 12px; border-radius: 10px; display: grid; gap: 2px; }
.hm-num { font-weight: 700; }
.hm-band { font-size: 0.85rem; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.legend span { font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.b4 { background: color-mix(in srgb, var(--ok) 28%, var(--surface)); }
.b3 { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }
.b2 { background: color-mix(in srgb, var(--act) 14%, var(--surface)); }
.b1 { background: color-mix(in srgb, var(--amber) 20%, var(--surface)); }
.blank { background: var(--bg-2); color: var(--muted); }
.scores { font-weight: 600; }

.keypad { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-2); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(0,0,0,.18); z-index: 20; }
.kp-inner { max-width: 520px; margin: 0 auto; display: grid; gap: 6px; }
.kp-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.kp-key { min-height: 46px; border: 0; border-radius: 10px; background: var(--surface); font-size: 1.15rem; font-weight: 600; cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.kp-key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.kp-key.done { background: var(--act); color: var(--on-act); box-shadow: 0 3px 0 var(--act-edge); }

@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: 1.35rem; }
  .problem { font-size: 1.25rem; }
  .problem .eq { font-size: 1.15rem; }
  .companion { flex: 1 1 100%; }
  .bar-title { display: none; }
}


body {
  background: var(--desk);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
.bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--glass-strong); color: var(--ink);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--lens);
}
.bar .brand { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; gap: 10px; }
.brand .word-act { color: var(--act-ink); }
.stones-mark { width: 30px; height: 30px; display: block; background: url(/ds/hopscotch-stones.svg) center / contain no-repeat; }
:root[data-theme="dark"] .stones-mark { background-image: url(/ds/hopscotch-stones-dark.svg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stones-mark { background-image: url(/ds/hopscotch-stones-dark.svg); } }
.back { color: var(--ink); }
.me { background: color-mix(in srgb, var(--me) 22%, transparent); }

.btn { background: var(--key); color: var(--on-key); box-shadow: var(--key-shadow); border-radius: var(--r-key); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--key-pressed); }
.btn.primary { background: var(--piece); color: var(--on-piece); box-shadow: var(--piece-shadow); }
.btn.primary:active:not(:disabled) { transform: translateY(5px); box-shadow: var(--piece-pressed); }
.btn.go { background: var(--go); color: var(--on-go); box-shadow: var(--go-shadow); }
.btn.go:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--go); }
.btn.quiet { color: var(--act-ink); }
.btn.ghost, .ghost { color: inherit; }
.field { background: var(--paper); border-color: var(--rule-strong); }
.tile, .chip, .nav, .seg, .sign, .kp-key { background: var(--key); color: var(--on-key); box-shadow: var(--key-shadow); }
.tile.on, .nav.cur, .kp-key.done { background: var(--piece); color: var(--on-piece); box-shadow: var(--piece-small); }
.seg.on { background: var(--ink); color: var(--desk); box-shadow: 0 4px 0 var(--ink-2); }
.nav.done:not(.cur) { background: var(--go-soft); color: var(--go); box-shadow: 0 4px 0 color-mix(in srgb, var(--go) 40%, transparent); }
.items { background: transparent; }
.keypad { background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--lens); border-radius: 22px 22px 0 0; }

.assign { color: var(--on-ultra); background: var(--b-ultra); box-shadow: var(--piece-shadow); border-radius: 22px; }
.assign.andy { color: var(--on-lagoon); background: var(--b-lagoon); box-shadow: 0 6px 0 color-mix(in srgb, var(--b-lagoon) 60%, #000); }
.assign-graph path { stroke: currentColor; }
.assign-status { background: color-mix(in srgb, currentColor 16%, transparent); }

.choice { background: var(--key); color: var(--on-key); border: 0; box-shadow: var(--key-shadow); }
.choice.on { background: var(--act-soft); color: var(--ink); box-shadow: 0 4px 0 var(--act), inset 0 0 0 2px var(--act); }
.problem, .qtex, .eqref { font-family: var(--font-math); }
.template .tx, .linked .tx { font-family: var(--font-var); font-style: italic; }
.msg.notyet { color: var(--look); }

.hop-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 0 0 12px; }
.hop-say { display: grid; gap: 6px; min-width: 0; }
.hop-say .hop-words { margin: 0; font-size: 1.2rem; }
.hop-say .hop-words + .hop-words { font-size: 1.05rem; }
.hop-rive { display: block; width: var(--hop-size); height: var(--hop-size); position: relative; flex: none; }
.hop-body { position: absolute; inset: 0; display: block; }
.hop-body canvas { position: absolute; top: 50%; left: 50%; width: calc(var(--hop-size) * var(--hop-canvas)); height: calc(var(--hop-size) * var(--hop-canvas)); transform: translate(-50%, -50%); pointer-events: none; }

.win-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-item);
  background: var(--go-soft); color: var(--ink);
  box-shadow: inset 4px 0 0 var(--go-mark);
}
.win-step b { color: var(--go); font-size: 1.2rem; margin-right: 6px; }
.seal {
  position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--go-mark); color: var(--on-go); font-weight: 800; font-size: 1.35rem;
}
.solved { display: grid; justify-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; position: relative; }
.stamp {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 22px 10px 10px; border-radius: var(--r-pill);
  background: var(--go); color: var(--on-go); box-shadow: var(--glass-lift), 0 6px 0 color-mix(in srgb, var(--go) 55%, #000);
  font: 700 clamp(1.6rem, 4.4vw, 2.2rem)/1.1 var(--font-ui);
  transform: rotate(-5deg);
}
.stamp .seal { width: 52px; height: 52px; font-size: 1.8rem; background: var(--ink); color: var(--go-mark); }
.stamp.gotit { background: var(--ha-sun); color: var(--on-look); box-shadow: var(--glass-lift), 0 6px 0 color-mix(in srgb, var(--ha-sun) 55%, #000); }
.stamp.gotit .seal { color: var(--ha-sun); }
.solved-sub { margin: 4px 0 0; color: var(--ink-2); font-size: 1.05rem; }
.solved .hop-row { justify-self: stretch; text-align: left; margin: 6px 0 0; }
.solved .btn.big { min-height: 56px; padding: 0 30px; font-size: 1.15rem; }
.coach.is-solved { --cc: var(--go-mark); }
.check-burst { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; }
.burst-host { position: relative; }

.confetti { position: absolute; inset: 50% auto auto 50%; width: 0; height: 0; pointer-events: none; }
.confetti i { position: absolute; width: 10px; height: 10px; left: -5px; top: -5px; border-radius: 3px; opacity: 0; background: var(--mark-coral); }
.confetti i:nth-child(5n+1) { background: var(--mark-sky); }
.confetti i:nth-child(5n+2) { background: var(--mark-amber); border-radius: 50%; }
.confetti i:nth-child(5n+3) { background: var(--go-mark); }
.confetti i:nth-child(5n+4) { background: var(--piece); border-radius: 50%; }

.theme-toggle {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-grid; place-items: center; background: var(--key); color: var(--ink); box-shadow: var(--key-shadow);
}
.theme-toggle:active { transform: translateY(3px); box-shadow: var(--key-pressed); }
.theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle svg path:only-child { fill: currentColor; stroke: none; }

.next-up { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .fresh .stamp { animation: stamp-in var(--t-stamp) var(--ease-spring) both; }
  .fresh .stamp .seal, .fresh.win-step .seal { animation: seal-in var(--t-seal) var(--ease-spring) both; }
  .fresh.win-step { animation: rise var(--t-quick) var(--ease-out) both; }
  .fresh .confetti i { animation: burst var(--t-confetti) 80ms var(--ease-out) both; }
  .fresh.win-step .confetti i { animation-duration: 800ms; }
  .fresh .solved-sub, .fresh .solved .hop-row, .fresh .solved .btn { animation: rise var(--t-arrive) 240ms var(--ease-out) both; }
  .nav.just { animation: seal-in var(--t-seal) var(--ease-spring); }
  .next-up { animation: arrive var(--t-arrive) var(--ease-glide) both; }
}
@keyframes stamp-in { 0% { transform: rotate(-22deg) scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-5deg) scale(1); opacity: 1; } }
@keyframes seal-in { 0% { transform: scale(0.3); } 100% { transform: scale(1); } }
@keyframes rise { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes arrive { 0% { transform: translateX(36px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(0.6); }
}
.win-step .confetti i { width: 6px; height: 6px; left: -3px; top: -3px; }
.hop-words {
  font-family: var(--font-voice); font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; color: var(--words-1);
  background-image: linear-gradient(100deg, var(--words-1) 0%, var(--words-2) 40%, var(--words-3) 60%, var(--words-4) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) { .hop-words { background-image: none; -webkit-text-fill-color: CanvasText; color: CanvasText; } }
.check-in { justify-self: stretch; display: grid; gap: 12px; margin-top: 4px; padding: 14px 16px; border-radius: var(--r-item); background: var(--desk-2); text-align: left; }
.fb-q p { margin: 0 0 8px; font-weight: 600; }
.fb-row { display: flex; gap: 10px; }
.fb-btn { min-width: 88px; min-height: 48px; border: 0; border-radius: var(--r-key); background: var(--key); color: var(--on-key); box-shadow: var(--key-shadow); font-weight: 600; cursor: pointer; }
.fb-btn:active { transform: translateY(3px); box-shadow: var(--key-pressed); }
.fb-btn.on { background: var(--piece); color: var(--on-piece); box-shadow: var(--piece-small); }
.fb-why { display: grid; gap: 6px; margin-top: 10px; }
.fb-why textarea { resize: vertical; min-height: 64px; }
.fb-why .btn { justify-self: start; min-height: 44px; }

.win-step { padding: 14px 16px; font-size: 1.1rem; }
.win-step b { font-size: 1.45rem; }
.win-step .seal { width: 48px; height: 48px; font-size: 1.6rem; }
@media (max-width: 600px) { .me-name { display: none; } .stamp { font-size: 1.5rem; } }
.miss { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--r-item); background: var(--look-soft); color: var(--ink); box-shadow: inset 4px 0 0 var(--ha-sun); font-size: 1.05rem; }
.miss b { color: var(--look); margin-right: 4px; }
.quiz-item .win-step { margin: 10px 0 12px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.plane { position: relative; width: 100%; }
.plane svg.grid { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; border-radius: var(--r-item); }
.plane svg.grid[role="img"] { cursor: grab; }
.plane svg.grid:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.plane-tools { position: absolute; top: 10px; right: 10px; display: grid; gap: 6px; }
.plane-tool { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--lens); color: var(--ink); font: 700 1.2rem/1 Lexend, system-ui, sans-serif; cursor: pointer; }
.plane-tool:disabled { opacity: 0.35; cursor: default; }
svg .aim circle { fill: color-mix(in srgb, var(--plot) 30%, transparent); }
svg .aim rect { fill: var(--plot); }
svg .aim text { fill: var(--on-act, #fff); font: 600 14px Lexend, system-ui, sans-serif; }
.plane-clear { position: absolute; left: 10px; bottom: 10px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--lens); color: var(--ink); font: 600 1rem/1 Lexend, system-ui, sans-serif; cursor: pointer; }
.plane svg.grid:focus:not(:focus-visible) { outline: none; }
.msg:empty { display: none; }
@media (max-width: 600px) { .problem { margin: 8px 0; } .coach { padding: 14px; } .hop-say .hop-words { font-size: 1.05rem; } .actions { margin-top: 8px; } }

.plane svg .paper { fill: var(--paper); }
.plane svg .g { stroke: color-mix(in srgb, var(--ink) 11%, transparent); stroke-width: 1; }
.plane svg .g.major { stroke: color-mix(in srgb, var(--ink) 22%, transparent); }
.plane svg .g.axis { stroke: color-mix(in srgb, var(--ink) 70%, transparent); stroke-width: 2; }
.plane svg .tick { stroke: var(--paper); }
.plane svg.grid { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
table.vt { table-layout: fixed; border-collapse: collapse; width: 100%; background: var(--paper); border-radius: var(--r-item); overflow: hidden; }
table.vt th, table.vt td { border: 1px solid var(--rule-strong); padding: 0; height: 52px; text-align: center; vertical-align: middle; position: relative; }
table.vt tr > :first-child { border-left: 0; }
table.vt tr > :last-child { border-right: 0; }
table.vt tbody tr:last-child > * { border-bottom: 0; }
table.vt thead th { border-top: 0; background: var(--paper); color: var(--ink); font: italic 600 1.3rem/1 var(--font-math); border-bottom: 2px solid var(--ink-3); }
table.vt:not(.andy-t) th, table.vt:not(.andy-t) td { width: 50%; }
table.vt td .field.cell, table.vt td input.cell { display: block; width: 100%; height: 52px; min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; font: 500 1.3rem/1 var(--font-math); color: var(--learner); padding: 0 8px; }
table.vt td .tc { font: 500 1.3rem/1 var(--font-math); color: var(--ink); }
table.vt td:focus-within { box-shadow: inset 0 0 0 3px var(--act); }
table.vt tr.ok td .field.cell { color: var(--ink); background: transparent; }
table.vt tr.bad td input.cell[data-col="y"] { box-shadow: inset 0 -3px 0 var(--ha-sun); }
table.vt .rowok { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--go); font-weight: 800; }
table.vt thead th .tx { color: inherit; }
table.vt tr:not(.ok) td input.cell:not([readonly]) { background: var(--desk-2); }
table.vt tr:not(.ok) td input.cell:not([readonly]):focus { background: var(--paper); outline: none; }.plane svg text.tick { font-size: 15px; fill: var(--ink-2); }
.plane svg .guide { stroke-width: 2.5; stroke-dasharray: 7 6; }
.plane svg .guide.gx { stroke: var(--e2); }
.plane svg .guide.gy { stroke: var(--e1); }
.plane svg .guide-pt { fill: none; stroke: var(--e1); stroke-width: 3; }

.bar {
  position: sticky; top: 12px; z-index: 10; margin: 12px 16px 0; padding: 8px 10px 8px 16px; min-height: 64px;
  border-radius: var(--r-dock); background: var(--glass-strong); color: var(--ink);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--lens-dock);
}
.bar .items { gap: 14px; }
.bar .navgroup, .bar .navgroup.p9, .bar .navgroup.p15, .bar .navgroup.p23, .bar .navgroup.andy { background: transparent; padding: 0; gap: 6px; }
.bar .navgroup + .navgroup { padding-left: 14px; box-shadow: inset 1px 0 0 var(--rule-strong); }
.nav.cur { box-shadow: var(--piece-small); }

.work { display: grid; grid-template-columns: minmax(0, 1fr); padding: 20px 16px 40px; }
.work > .sheet { position: relative; padding: 24px 28px 28px; isolation: isolate; }


.pager { margin-top: 18px; }

.workgrid { display: flex; flex-direction: column; gap: 18px; }
.problem { margin: 0; display: flex; align-items: baseline; gap: 14px; font-family: var(--font-math); font-size: 2rem; line-height: 1.2; }
.problem .eq { font-size: 1em; }
.pnum { font: 600 1.1rem/1 var(--font-ui); color: var(--ink-2); }
.wk-head { display: grid; gap: 6px; }
.andy-prompt { margin: 0; font-size: 1.1rem; line-height: 1.5; max-width: 60ch; }
.stage { display: contents; }
.gridwrap, .andy-graph { background: var(--v-graph-wash); border-radius: var(--r-sheet); padding: 12px; }
.gridwrap .plane svg.grid { box-shadow: none; border-radius: var(--r-item); }
.andy-graph svg.costgraph { background: var(--paper); border-radius: var(--r-item); display: block; width: 100%; height: auto; }
.tools { display: flex; gap: 8px; margin-bottom: 10px; }

.hopcol { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: center; gap: 12px; }
.hopcol .hop-rive { grid-column: 2; grid-row: 1; }
.hopcol .hop-say { grid-column: 1; grid-row: 1; display: grid; gap: 10px; justify-items: start; min-width: 0; }
.hopcol .hop-words { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.hopcol .hop-aside { min-height: 44px; padding: 0 18px; }
.hopcol .hop-say:not(:has(.hop-words)) .hop-aside { justify-self: start; }

.coach { min-width: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 8px 0; position: relative; }
.steps.single .step { grid-template-columns: minmax(0, 1fr); }
.steps:not(.single) .step:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 46px; bottom: -6px; width: 2px; border-radius: 1px; background: var(--rule-strong); }
.steps:not(.single) .step.is-done:not(:last-child)::after { background: var(--go-mark); }
.step > .stone { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; background: var(--key); color: var(--ink-2); box-shadow: 0 3px 0 var(--key-edge); margin-top: 2px; }
.step.is-now > .stone { background: var(--piece); color: var(--on-piece); box-shadow: 0 3px 0 var(--piece-edge); }
.step.is-done > .stone { background: var(--go-mark); color: var(--on-go); box-shadow: none; }
.step-line { margin: 0; min-height: 36px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-weight: 600; font-size: 1.05rem; }
.step.is-todo .step-line { color: var(--ink-3); }
.step.is-done .step-name { color: var(--ink-2); }
.step.is-now .step-name { color: var(--ink); }
.step-result { font-family: var(--font-math); font-weight: 600; color: var(--ink); font-size: 1.15rem; }
.step-win { color: var(--go); font-size: 1.2rem; }
.step-body { min-width: 0; }
.step-work { margin-top: 8px; }
.step-work.with-check { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.step-work .step-ui { flex: 1 1 200px; min-width: 0; }
.step-work .btn.primary { flex: none; min-height: 52px; }
.step-body .msg:empty { display: none; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.choice { background: var(--key); color: var(--on-key); box-shadow: var(--key-shadow); border: 0; border-radius: var(--r-piece); font-weight: 600; min-height: var(--key-height, 52px); padding: 8px 16px; cursor: pointer; }
.choice.on { background: var(--piece); color: var(--on-piece); box-shadow: 0 4px 0 var(--piece-edge); }
.choice:active { transform: translateY(3px); box-shadow: var(--key-pressed); }
.coach .mi .field { min-height: 52px; }

.companion { display: grid; gap: 10px; background: var(--v-table-wash); border-radius: var(--r-sheet); padding: 12px; }
.companion.moves { background: var(--desk-2); }
.companion.moves ol { margin: 6px 0 0; padding-left: 20px; }
.vt-eq { margin: 0; padding: 10px 12px; background: var(--paper); border-radius: var(--r-item); font-size: 1.3rem; text-align: center; }
.vt-eq .tx, table.vt th.cx, .vx { color: var(--e2-ink); }
.vt-eq .ty, table.vt th.cy, .vy { color: var(--e1-ink); }
table.vt th.cx, table.vt th.cy { font: italic 600 1.3rem/1 var(--font-var); }

.walk { display: grid; gap: 10px; }
.wl-sub { margin: 0; padding: 10px 12px; background: var(--paper); border-radius: var(--r-item); font: 500 1.35rem/1.3 var(--font-math); text-align: center; }
.wl-setup { margin: 0; font-weight: 600; }
.wl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 500 1.3rem/1.2 var(--font-math); padding: 6px 4px; }
.wl.is-done { color: var(--ink-2); }
.wl-ans { color: var(--ink); font-weight: 600; }
.wl-ans.vy { color: var(--e1-ink); }
.wl .mi.wl-in { width: auto; flex: 1 1 90px; max-width: 160px; }
.wl .mi.wl-in .field { min-height: 48px; font: 500 1.25rem/1 var(--font-math); text-align: center; color: var(--learner); }
.wl .btn.primary { min-height: 48px; }
.wl-win { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--go); font-weight: 700; }
.wl-win .seal { width: 30px; height: 30px; font-size: 1rem; }

.quiz-item, .test-panel {
  background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 0; border-radius: var(--r-sheet); box-shadow: var(--lens);
}
.solved { display: grid; justify-items: start; gap: 14px; padding: 4px 0; }
.solved .check-in { justify-self: stretch; }

@media (min-width: 960px) {
  .work { grid-template-columns: minmax(0, 1fr) 300px; max-width: 1600px; margin: 0 auto; padding: 22px 24px 40px; }
  .work > .pager, .work > .debug { grid-column: 1; }
  .work > .sheet { padding: 28px 32px 32px; min-height: calc(100vh - 140px); }
  .workgrid {
    display: grid; column-gap: 36px; row-gap: 18px; align-items: start;
    grid-template-columns: auto minmax(260px, 1fr);
    grid-template-areas: "head coach" "graph coach" "graph side" "graph .";
    grid-template-rows: auto auto auto 1fr;
  }
  .workgrid > .problem, .workgrid > .wk-head { grid-area: head; }
  .workgrid > .stage > .gridwrap, .workgrid > .stage > .andy-graph { grid-area: graph; width: min(calc(100vh - 230px), calc(100vw - 48px - 300px - 64px - 330px), 900px); }
  .workgrid > .stage > .companion { grid-area: side; max-width: 340px; }
  .workgrid > .coach { grid-area: coach; }
  .hopcol {
    position: absolute; z-index: 3; left: calc(100% - 24px); top: var(--hop-y, 28px); width: 316px;
    grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 14px;
    transition: top var(--t-glass, 420ms) var(--ease-glide, ease);
  }
  .hopcol .hop-rive { grid-column: 1; }
  .hopcol .hop-say { grid-column: 2; padding-top: 8px; }
  .hopcol .hop-words { font-size: 1.3rem; }
}
@media (max-width: 959px) {
  .bar { margin: 8px 8px 0; top: 8px; }
  .work { padding: 14px 10px 32px; }
  .work > .sheet { padding: 18px 16px 20px; }
  .workgrid > .problem, .workgrid > .wk-head { order: 0; }
  .workgrid > .hopcol { order: 1; }
  .workgrid > .coach { order: 2; }
  .workgrid > .stage > * { order: 3; }
  .problem { font-size: 1.6rem; }
  .gridwrap, .andy-graph { padding: 8px; }
}
@media (max-width: 600px) {
  .hopcol .hop-words { font-size: 1.05rem; }
  .wl { font-size: 1.15rem; }
}
.hop-rive.is-flying { transition: transform 700ms var(--ease-spring, cubic-bezier(.3,1.4,.5,1)); z-index: 30; }
.look-ring { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; box-shadow: 0 0 0 3px var(--act); pointer-events: none; z-index: 29; animation: look-pulse 1.4s ease-out infinite; }
@keyframes look-pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hop-rive.is-flying, .hopcol { transition: none; } .look-ring { animation: none; } }
.hop-rive, .hop-rive * { pointer-events: none; }
.msg:empty { display: none; }
.bar .items { flex: 1 1 0; min-width: 0; padding: 4px 2px 8px; background: transparent; overflow-x: auto; scrollbar-width: none; }
.bar .nav { min-height: 40px; min-width: 40px; }
@media (min-width: 960px) { .bar { flex-wrap: nowrap; } .bar.has-nav .bar-title { flex: none; } }
@media (max-width: 959px) { .bar.has-nav .bar-title { display: none; } .bar .items { order: 5; flex: 1 1 100%; } }
.vt-eq .tc, .wl-sub .tc { color: var(--ink); }
@media (max-width: 959px) {
  .bar { position: relative; top: 0; border-radius: var(--r-sheet); min-height: 0; padding: 6px 8px; gap: 8px; }
  .bar .items { padding-bottom: 6px; }
  .workgrid > .stage > .companion { order: 3; }
  .workgrid > .stage > .gridwrap, .workgrid > .stage > .andy-graph { order: 4; }
}

.assign { --ha-sun: #ffc24d; position: relative; overflow: hidden; min-height: 240px; padding: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr auto; isolation: isolate; }
.assign-name { font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.15; align-self: start; position: relative; z-index: 1; }
.assign-status { grid-row: 3; position: relative; z-index: 1; }
.assign-graph { grid-column: 2; grid-row: 1 / 4; align-self: stretch; width: auto; margin: -24px -24px -24px 0; display: grid; place-items: center end; }
.assign-graph svg { width: 100%; height: 100%; max-height: 260px; overflow: visible; }
.assign-graph path, .assign-graph rect, .assign-graph circle { stroke-width: initial; opacity: 1; }
.assign-graph .ha-grid path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .1; }
.assign-graph .ha-axis { fill: none; stroke: currentColor; stroke-width: 2; opacity: .35; }
.assign-graph .ha-ghost { fill: none; stroke: currentColor; stroke-width: 4; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .45; }
.assign-graph .ha-fold { fill: none; stroke: var(--ha-sun); stroke-width: 4; stroke-linecap: round; }
.assign-graph .ha-fold-tip { fill: none; stroke: var(--ha-sun); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.assign-graph .ha-sym { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 6 7; opacity: .5; }
.assign-graph .ha-glow { fill: none; stroke: currentColor; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; opacity: .12; }
.assign-graph .ha-v { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.assign-graph .ha-step, .assign-graph .ha-rise { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 7; opacity: .8; }
.assign-graph .ha-pt { fill: currentColor; stroke: var(--b-ultra); stroke-width: 4; }
.assign.andy .ha-pt { stroke: var(--b-lagoon); fill: var(--ha-sun); }
.assign-graph .ha-pt.e1, .assign-graph .ha-rows .e1 { fill: var(--e1); }
.assign-graph .ha-pt.e2, .assign-graph .ha-rows .e2 { fill: var(--hop-lsky, #8fd8ff); }
.assign-graph .ha-pt.e1, .assign-graph .ha-pt.e2 { stroke: currentColor; stroke-width: 4; }
.assign-graph .ha-vx { fill: var(--ha-sun); stroke: currentColor; stroke-width: 4; }
.assign-graph .ha-int { fill: currentColor; stroke: var(--b-lagoon); stroke-width: 5; }
.assign-graph .ha-rows rect { fill: color-mix(in srgb, currentColor 16%, transparent); stroke: color-mix(in srgb, currentColor 45%, transparent); stroke-width: 2; }
.assign-graph .ha-rows > path { fill: none; stroke: currentColor; stroke-width: 2; opacity: .35; }
.assign-graph .ha-trail { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; opacity: .4; }
@media (prefers-reduced-motion: no-preference) {
  .assign-graph .ha-v { stroke-dasharray: 400; stroke-dashoffset: 400; animation: ha-draw 900ms var(--ease-glide, cubic-bezier(.2,.8,.2,1)) 120ms forwards; }
  .assign-graph .ha-pt, .assign-graph .ha-vx, .assign-graph .ha-int { transform-box: fill-box; transform-origin: center; animation: ha-pop 420ms cubic-bezier(.3,1.5,.5,1) both; animation-delay: 700ms; }
  .assign:hover .ha-v, .assign:focus-visible .ha-v { animation: none; stroke-dashoffset: 0; }
  .assign:hover .ha-glow { opacity: .22; transition: opacity 240ms; }
}
@keyframes ha-draw { to { stroke-dashoffset: 0; } }
@keyframes ha-pop { from { transform: scale(0); } }
@media (max-width: 520px) { .assign { min-height: 200px; } .assign-graph svg { max-height: 200px; } }
.assign-graph .ha-grid, .assign-graph .ha-axis { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%); mask-image: linear-gradient(90deg, transparent 0, #000 45%); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 420px; }
.choices:has(> .choice:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices:has(> .choice:nth-child(3):last-child > .katex), .choices:has(> .choice:only-child) { grid-template-columns: minmax(0, 1fr); }
.choices > .choice { width: 100%; min-width: 0; justify-content: center; text-align: center; padding-inline: 10px; overflow-wrap: anywhere; }

.companion, .companion.is-walk { background: transparent; padding: 0; border-radius: 0; gap: 6px; }
.vt-eq, .wl-sub { background: transparent; border-radius: 0; padding: 8px 4px 10px; border-bottom: 1px solid var(--rule-strong); }
table.vt { background: transparent; border-radius: 0; }
table.vt th, table.vt td { border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid var(--rule); }
table.vt tr > :first-child { border-right: 1px solid var(--rule); }
table.vt thead th { background: transparent; border-bottom: 1px solid var(--rule-strong); }
table.vt tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
table.vt tr:not(.ok) td input.cell:not([readonly]) { background: transparent; box-shadow: inset 0 -3px 0 var(--act); }
.vt-check { justify-self: start; margin-top: 4px; min-height: 48px; }
.gridwrap, .andy-graph { background: transparent; padding: 0; }
.plane svg .pt text, .plane svg .vertex text { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
@media (max-width: 959px) { .vt-check { justify-self: stretch; } }
.plane-tools { top: auto; bottom: 10px; grid-auto-flow: column; }
.hop-rive.is-flying { transition: none; z-index: 30; will-change: transform; }
.hop-rive.is-hovering > * { animation: hop-hover 3.2s ease-in-out infinite; }
@keyframes hop-hover { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(2px, -5px); } 66% { transform: translate(-2px, -2px); } }
@media (prefers-reduced-motion: reduce) { .hop-rive.is-hovering > * { animation: none; } }
.navgroup.p9 { --sec: var(--p9); }
.navgroup.p15 { --sec: var(--p15); }
.navgroup.p23 { --sec: var(--p23); }
.navgroup.andy { --sec: var(--andy); }
.bar .navgroup { gap: 0; }
.bar .navgroup + .navgroup { padding-left: 10px; margin-left: 4px; box-shadow: none; }
.bar .nav.stone, .bar .nav.stone.cur, .bar .nav.stone.done:not(.cur) {
  min-width: 26px; width: 26px; min-height: 40px; padding: 0; display: grid; place-items: center;
  background: transparent; box-shadow: none; border-radius: 8px; color: inherit;
}
.nav.stone .st {
  display: block; width: 13px; height: 13px; border-radius: 4px 6px 5px 7px;
  background: color-mix(in srgb, var(--sec) 18%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sec) 70%, transparent);
  transform: rotate(-9deg) translateY(-3px); transition: transform 180ms var(--ease-spring, ease), width 180ms, height 180ms;
}
.nav.stone:nth-child(even) .st { transform: rotate(7deg) translateY(3px); border-radius: 6px 4px 7px 5px; }
.nav.stone.done .st { background: var(--sec); box-shadow: 0 2px 0 color-mix(in srgb, var(--sec) 55%, #000); }
.nav.stone.cur .st { width: 20px; height: 20px; background: var(--ink); box-shadow: 0 0 0 3px var(--bg, transparent), 0 0 0 5px var(--sec); }
.nav.stone:hover:not(.cur) .st { transform: rotate(0) translateY(0) scale(1.25); }
.nav.stone:focus-visible { outline: 2px solid var(--act); outline-offset: 0; }
.me { background: transparent; padding: 0 6px 0 0; gap: 8px; font-weight: 600; color: var(--ink); }
.me-stone { width: 14px; height: 14px; border-radius: 4px 6px 5px 7px; background: var(--me); transform: rotate(-9deg); flex: none; }
@media (max-width: 600px) { .me-name { display: inline; } .me { font-size: 0.85rem; } }
@media (prefers-reduced-motion: reduce) { .nav.stone .st { transition: none; } }
.bar .nav.cluster { display: none; }
.bar-title { font-weight: 500; color: var(--ink-2, var(--ink)); }
@media (min-width: 960px) {
  .hopcol { left: calc(100% + 18px); width: 286px; }
  .bar .nav.stone, .bar .nav.stone.cur, .bar .nav.stone.done:not(.cur) { min-width: 22px; width: 22px; }
}
@media (max-width: 959px) {
  .bar .items { justify-content: center; overflow: visible; }
  .bar .navgroup:not(.here) .nav.stone { display: none; }
  .bar .navgroup:not(.here) .nav.cluster {
    display: grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0; background: transparent; box-shadow: none; border-radius: 8px;
  }
  .nav.cluster span { display: grid; grid-template-columns: repeat(4, 6px); gap: 3px; transform: rotate(-6deg); }
  .nav.cluster i { width: 6px; height: 6px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sec) 75%, transparent); }
  .nav.cluster i.d { background: var(--sec); box-shadow: none; }
  .bar .navgroup.here .nav.stone, .bar .navgroup.here .nav.stone.cur, .bar .navgroup.here .nav.stone.done:not(.cur) { min-width: 24px; width: 24px; }
}
.step-line.step-ask { font-size: 1.2rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
@media (max-width: 959px) {
  .bar .navgroup + .navgroup { padding-left: 4px; margin-left: 0; }
  .bar .navgroup.here .nav.stone, .bar .navgroup.here .nav.stone.cur, .bar .navgroup.here .nav.stone.done:not(.cur) { min-width: 22px; width: 22px; }
  .bar .navgroup:not(.here) .nav.cluster { min-width: 36px; }
}
@media (max-width: 959px) { .bar .items { gap: 2px; } }
.bar .items .navgroup.navgroup { gap: 0; }
@media (max-width: 959px) {
  .hopcol .hop-say:not(:has(.hop-words)) { justify-items: end; }
  .hopcol .hop-say:not(:has(.hop-words)) .hop-aside { justify-self: end; }
}
.nav.stone.cur .st { width: 17px; height: 17px; box-shadow: 0 0 0 2px var(--bg, transparent), 0 0 0 4px var(--sec); transform: none; }
@media (max-width: 959px) { .bar .me { order: 2; margin-left: auto; } .bar .theme-toggle { order: 3; } }