/* Math playground: a stage, an equation, a play button. Nothing else competes for attention. */
.ar{display:flex;flex-direction:column;align-items:center;gap:18px;padding-block:28px 64px}
.ar-ops{display:flex;gap:10px}
.ar-ops button{width:60px;height:60px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1;cursor:pointer;transition:background-color .15s, transform .15s}
.ar-ops button:hover{transform:translateY(-2px)}
.ar-ops button[aria-pressed="true"]{background:var(--pip);border-color:var(--pip);color:var(--pip-ink)}

.ar-stage{width:100%;max-width:880px;height:auto;background:var(--surface);border:1px solid var(--line);border-radius:24px}

.ar-eq{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;font-family:var(--font-display);font-weight:700;font-size:clamp(38px, 7vw, 64px);line-height:1}
.ar-step{display:inline-flex;align-items:center;gap:6px}
.ar-step output{min-width:1.2ch;text-align:center;font-variant-numeric:tabular-nums}
.ar-step button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);font:700 20px/1 var(--font-body);cursor:pointer}
.ar-step button:hover{border-color:var(--ink-2);color:var(--ink)}
.ar-sym{color:var(--muted);font-weight:500}
.ar-ans{min-width:1.3ch;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.ar-ans.got{color:var(--ink);background:linear-gradient(transparent 62%, color-mix(in srgb, var(--pip) 70%, transparent) 62% 92%, transparent 92%)}
.ar-think{margin:-6px 0 0;min-height:1.5em;font-family:var(--font-code);font-size:18px;color:var(--ink-2)}
.ar-go{display:flex;align-items:center;gap:12px}
.ar-go .play{width:64px;height:64px}
.ar-go .play svg{width:24px;height:24px}
.ar-off{margin:18px 0 0;max-width:52ch;text-align:center;color:var(--ink-2);font-size:16.5px}
.ar-off b{color:var(--ink)}
.ar-next{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 22px;border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none}
.ar-next:hover{border-color:var(--ink-2)}
.ar-next span{font-family:var(--font-code);font-size:12.5px;color:var(--muted)}
.ar-next b{font-family:var(--font-display);font-size:18px}

/* things on the stage */
.ck circle{fill:#d9a35b}
.ck-b circle{fill:#e58f8f}
.ck .chip{fill:#5a3a1f}
.frame rect{fill:none;stroke:var(--line);stroke-width:2}
.frame.full rect{stroke:var(--done);fill:color-mix(in srgb, var(--done) 10%, transparent)}
.ground{stroke:var(--line);stroke-width:2;stroke-linecap:round}
.carrot .root{fill:#f08a24}
.carrot .leaf{fill:var(--done)}
.mu-fur{fill:#e9e6df;stroke:#cfcac0;stroke-width:1.5}
.mu-pink{fill:#f2a7b5}
.mu-teeth{fill:#fff;stroke:#cfcac0;stroke-width:1.5}
.critter .antenna{fill:none;stroke:var(--ink-2);stroke-width:2.5;stroke-linecap:round}
.cr-0 .cr-body{fill:var(--accent)} .cr-1 .cr-body{fill:var(--done)} .cr-2 .cr-body{fill:var(--pivot)} .cr-3 .cr-body{fill:var(--swap)} .cr-4 .cr-body{fill:#f08a24}
.critter .pip-mouth{stroke:#fff}
.count{fill:var(--ink);font-family:var(--font-display);font-weight:700;font-size:22px;text-anchor:middle;dominant-baseline:middle}
.count.left{text-anchor:start}
.count.old{fill:var(--muted);font-weight:500}
.count.mid{font-size:20px}
@media (prefers-color-scheme: dark){ .mu-fur{fill:#d8d5cd} }
@media (max-width: 560px){
  .ar{gap:14px;padding-block:18px 48px}
  .ar-ops button{width:52px;height:52px;font-size:28px}
  .ar-stage{border-radius:16px}
}

/* ten ideas in three groups: basics, next steps, advanced */
.ar-ops{flex-wrap:wrap;justify-content:center;gap:10px 22px}
.ar-group{display:flex;gap:8px}
.ar-ops button{width:auto;min-width:54px;height:54px;padding:0 14px;border-radius:27px;font-size:24px}
.ar-pair{display:inline-flex;align-items:center;gap:14px}
.count.right{text-anchor:end}
.count.small{font-size:17px;font-weight:500;fill:var(--ink-2)}
.tick-num{fill:var(--muted);font-family:var(--font-code);font-size:12.5px;text-anchor:middle}
.tick-num.below{fill:#2f6fb5}
.cold{fill:#d9ebfb}
.rod rect{fill:var(--accent);opacity:.9}
.rod line{stroke:var(--surface);stroke-width:1.5}
.rod.new rect{fill:var(--done)}
.one circle{fill:var(--accent)}
.one-b circle{fill:#e58f8f}
.crust{fill:#d9a35b}
.cheese{fill:#f6dc8a}
.slice{fill:#e9694a}
.pepperoni{fill:#b53a2a}
.cut{stroke:#fff8e6;stroke-width:3;stroke-linecap:round}
.seg.s0{fill:var(--accent)} .seg.s1{fill:var(--done)}
.bun circle:first-of-type,.bun ellipse{fill:#d8d5cd}
.bun > circle:not(.pip-pupil){fill:#d8d5cd}
.bun.baby ellipse,.bun.baby > circle:not(.pip-pupil){fill:#f2a7b5}
@media (prefers-color-scheme: dark){ .cold{fill:#16324d} .tick-num.below{fill:#7fb6ee} }
@media (max-width: 560px){ .ar-ops button{min-width:46px;height:46px;font-size:20px;padding:0 11px} .ar-group{gap:6px} }

/* percent, squares, balance, Pythagoras */
.hund{fill:var(--paper);stroke:var(--line);stroke-width:1}
.hund.on{fill:var(--pip);stroke:var(--pip)}
.tile.t0 rect{fill:var(--accent)} .tile.t1 rect{fill:var(--done)}
.tile-a{fill:var(--accent)} .tile-b{fill:var(--done)}
.hyp{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-dasharray:6 5}
.hyp-fill{fill:var(--pip)}
.tri{fill:var(--surface);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.beam{stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.stand{fill:var(--ink-2)}
.box rect{fill:var(--pivot)}
.box text{fill:#fff;font-family:var(--font-display);font-weight:700;font-size:34px;text-anchor:middle;dominant-baseline:central}
.ar-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.ar-links .ar-next{margin-top:0}

/* grade map and diary */
.pg{gap:22px}
.pg h1{font-size:clamp(30px, 5vw, 52px);letter-spacing:-.03em;text-align:center}
.pg h2{font-size:20px;font-family:var(--font-display)}
.pg h2 span{font-family:var(--font-code);font-size:14px;font-weight:400;color:var(--muted);margin-left:6px}
.pg-note{margin:0;max-width:56ch;text-align:center;color:var(--muted);font-size:14.5px}
.grade-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.grade-picker button{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:var(--font-display);font-size:22px;font-weight:700;cursor:pointer}
.grade-picker button[aria-pressed="true"]{background:var(--pip);border-color:var(--pip);color:var(--pip-ink)}
.topics{list-style:none;margin:0;padding:0;width:100%;max-width:720px;display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:10px}
.topic{display:flex;align-items:center;gap:10px;padding:16px 18px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);
  color:var(--ink);text-decoration:none;font-family:var(--font-display);font-size:19px;font-weight:700}
.topic::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--line);flex:none}
a.topic:hover{border-color:var(--ink-2)}
.topic.met::before{background:var(--pip);border-color:var(--pip)}
.topic.soon{color:var(--muted);background:transparent;border-style:dashed;font-weight:500}
.topic.soon small{margin-left:auto;font-family:var(--font-code);font-size:11.5px;font-weight:400}
.diary{width:100%;max-width:720px;display:flex;flex-direction:column;gap:10px}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chips-row .topic{padding:8px 14px;font-size:15.5px;border-radius:999px}
.quiet{color:var(--muted)}
.days{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:8px;max-width:420px}
.day{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:var(--font-code);font-size:13px;color:var(--muted);border:1.5px solid var(--line)}
.day.n1{background:color-mix(in srgb, var(--pip) 35%, transparent);border-color:transparent;color:var(--ink)}
.day.n2{background:color-mix(in srgb, var(--pip) 65%, transparent);border-color:transparent;color:var(--pip-ink)}
.day.n3{background:var(--pip);border-color:transparent;color:var(--pip-ink)}
.day.today{outline:2px solid var(--ink);outline-offset:2px}

/* curriculum */
.cur{max-width:980px}
.cur-count{margin:-8px 0 0;font-family:var(--font-code);font-size:15px;color:var(--muted)}
.cbar{width:100%;max-width:420px;height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.cbar i{display:block;height:100%;background:var(--pip);border-radius:5px}
.legend-row{list-style:none;margin:0;padding:0;display:flex;gap:18px;font-size:14px;color:var(--ink-2)}
.legend-row li{display:flex;align-items:center;gap:8px}
.legend-row .topic{width:16px;height:16px;padding:0;border-radius:50%;font-size:0}
.legend-row .topic::before{display:none}
.met-key{background:var(--pip);border-color:var(--pip)!important}
.next-key{border:2px dashed var(--pip)!important}
.soon-key{border:2px dashed var(--line)!important}
.curriculum{width:100%;display:flex;flex-direction:column;gap:30px;margin-top:6px}
.track h2{font-size:21px;margin-bottom:10px;display:flex;align-items:baseline;gap:10px}
.track h2 span{font-family:var(--font-code);font-size:13px;font-weight:400;color:var(--muted)}
.topics.tl{max-width:none;grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));gap:8px}
.tl .topic{padding:12px 14px;font-size:16px;border-radius:12px}
.topic.soon.next{border-color:var(--pip);color:var(--ink-2);font-weight:700}
.topic.soon.next small{color:var(--ink);background:var(--pip);border-radius:999px;padding:0 8px}
@media (max-width: 560px){ .topics.tl{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))} .tl .topic{font-size:15px} }