* { box-sizing: border-box; }
:root {
  --paper:#fdfdfb; --ink:#16150f; --muted:#5c584a; --faint:#8b8778;
  --accent:#8a1f11; --rule:#d8d4c6; --hair:#eae6d8; --good:#1d6b2f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  --lt:#f2ece0; --dk:#b9906b;
}
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif);
  font-size:18px; line-height:1.55; }
.sheet { max-width:53rem; margin:0 auto; padding:2.6rem 2rem 6rem; }
.narrow { max-width:44rem; }

.masthead { display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  flex-wrap:wrap; font-family:var(--mono); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--rule);
  padding-bottom:.6rem; margin-bottom:2.2rem; }
.masthead a { color:var(--muted); text-decoration:none; margin-left:1.1rem;
  padding-bottom:.35rem; border-bottom:2px solid transparent; }
.masthead a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.masthead a.on { color:var(--accent); border-bottom-color:var(--accent); }
.masthead .who { color:var(--muted); }

h1 { font-size:2.3rem; line-height:1.15; font-weight:400; margin:0 0 .8rem;
  letter-spacing:-.012em; max-width:30ch; text-wrap:balance; }
h2 { font-family:var(--mono); font-size:.92rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:400; color:var(--accent); margin:2.4rem 0 .7rem; }
p { margin:0 0 .9rem; max-width:66ch; }
a { color:var(--accent); }
b { font-weight:600; font-variant-numeric:tabular-nums; }
.lede { font-size:1.08rem; line-height:1.6; }
.small { font-size:.92rem; color:var(--muted); }

.uq { text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:2px; text-underline-offset:.2em; }
.bigstats { display:flex; gap:2.4rem; flex-wrap:wrap; margin:2rem 0 1.4rem;
  padding:1.3rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.bigstats .bs { flex:1 1 11rem; min-width:10rem; }
.bigstats b { display:block; font-size:2.5rem; line-height:1; font-weight:400;
  letter-spacing:-.02em; color:var(--accent); font-variant-numeric:tabular-nums; }
.bigstats span { display:block; margin-top:.5rem; font-size:.85rem; line-height:1.5;
  color:var(--muted); max-width:24ch; }

.btn { display:inline-block; font:inherit; font-size:.95rem; padding:.5rem 1.2rem;
  border:1px solid var(--ink); background:var(--paper); color:var(--ink); cursor:pointer;
  text-decoration:none; }
.btn.p { background:var(--ink); color:var(--paper); }
.btn:disabled { opacity:.35; cursor:default; }
.btn.ghost { border-color:var(--rule); color:var(--muted); }
.row { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }

input[type=text], input[type=number] { font:inherit; font-size:1rem; padding:.45rem .6rem;
  border:1px solid var(--rule); background:#fff; color:var(--ink); width:100%; max-width:22rem; }
label { display:block; font-family:var(--mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:1.1rem 0 .3rem; }

/* ── board ─────────────────────────────────────────────────────────────── */
.board { position:relative; width:min(420px,88vw); aspect-ratio:1; user-select:none;
  border:1px solid var(--rule); }
.squares { position:absolute; inset:0; display:grid; grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr); }
.sq { position:relative; }
.sq.light { background:var(--lt); } .sq.dark { background:var(--dk); }
.sq.last::after { content:""; position:absolute; inset:0; background:#c9a02733; }
.sq.sel::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 3px var(--accent); }
.sq.dot::before { content:""; position:absolute; left:50%; top:50%; width:26%; height:26%;
  transform:translate(-50%,-50%); border-radius:50%; background:#16150f38; }
.sq.dot:has(.rk)::before, .sq.dot::before { pointer-events:none; }
.sq .rk, .sq .fl { position:absolute; font:9px var(--mono); color:#00000055; }
.sq .rk { left:2px; top:1px; } .sq .fl { right:2px; bottom:0; }
.pieces { position:absolute; inset:0; pointer-events:none; }
.pc { position:absolute; width:12.5%; height:12.5%; transition:transform .19s cubic-bezier(.3,.8,.3,1);
  will-change:transform; }
.pc svg { width:100%; height:100%; display:block; }
.pc.gone { opacity:0; transition:opacity .2s; }
@media (prefers-reduced-motion: reduce) { .pc { transition:none; } }

/* ── test ──────────────────────────────────────────────────────────────── */
.stage { display:flex; gap:2.2rem; align-items:flex-start; flex-wrap:wrap; margin-top:1.4rem; }
.side { flex:1 1 17rem; min-width:15rem; }
.side .stm { font-size:1.15rem; margin:0 0 .3rem; }
.pickline { font-family:var(--mono); font-size:.95rem; margin:1rem 0; min-height:1.4em; }
.tally { display:flex; gap:.28rem; margin:1rem 0 .4rem; }
.tally i { width:1.5rem; height:.3rem; background:var(--hair); display:block; }
.tally i.done { background:var(--ink); }
.counter { font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; color:var(--faint); }

/* ── study ─────────────────────────────────────────────────────────────── */
.protos { display:flex; flex-wrap:wrap; gap:2rem; margin-top:1.4rem; }
.proto { width:min(300px,88vw); }
.proto .board { width:100%; }
.proto .ctl { display:flex; align-items:center; justify-content:center; gap:.8rem;
  margin:.5rem 0 .3rem; font-family:var(--mono); font-size:.8rem; }
.proto .ctl button { font:inherit; border:1px solid var(--rule); background:var(--paper);
  color:var(--accent); cursor:pointer; padding:.1rem .55rem; }
.proto .pos { color:var(--faint); min-width:6.5rem; text-align:center; }
.proto .mv { font-size:.86rem; line-height:1.9; }
.proto .mv button { font:inherit; border:none; background:none; color:var(--ink);
  cursor:pointer; padding:.04rem .22rem; font-weight:600; }
.proto .mv button.cur { background:var(--ink); color:var(--paper); }

/* ── tables & bars ─────────────────────────────────────────────────────── */
table { border-collapse:collapse; font-size:.9rem; width:100%; max-width:38rem; margin:.6rem 0 1.4rem; }
th { text-align:left; font-family:var(--mono); font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-weight:400;
  border-bottom:1px solid var(--rule); padding:.3rem .8rem .3rem 0; }
td { padding:.32rem .8rem .32rem 0; border-bottom:1px solid var(--hair);
  font-variant-numeric:tabular-nums; }
td.hit { color:var(--good); } td.miss { color:var(--accent); }
.bars { max-width:36rem; margin:1rem 0 1.6rem; }
.bar { display:grid; grid-template-columns:11rem 1fr auto; gap:.7rem; align-items:center;
  margin-bottom:.45rem; font-size:.88rem; }
.bar .lb { color:var(--muted); } .bar .tr { background:var(--hair); height:.75rem; }
.bar .fl { background:var(--ink); height:100%; }
.bar.you .fl { background:var(--accent); }
.bar .vl { font-family:var(--mono); font-size:.78rem; }

.score { font-size:3.2rem; line-height:1; margin:.2rem 0 .2rem; font-variant-numeric:tabular-nums; }
.codebox { font-family:var(--mono); font-size:1.5rem; letter-spacing:.22em; padding:.7rem 1rem;
  border:1px dashed var(--rule); display:inline-block; margin:.4rem 0 .8rem; }
.steps { list-style:none; padding:0; margin:1.4rem 0; max-width:40rem; }
.steps li { border-top:1px solid var(--hair); padding:1rem 0; display:flex; gap:1rem;
  align-items:baseline; }
.steps li:last-child { border-bottom:1px solid var(--hair); }
.steps .n { font-family:var(--mono); font-size:.8rem; color:var(--faint); width:1.4rem; }
.steps .t { flex:1; }
.steps .t .h { font-size:1.05rem; }
.steps .t .d { font-size:.88rem; color:var(--muted); }
.steps .done { color:var(--good); font-family:var(--mono); font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; }
.note { border-left:2px solid var(--rule); padding-left:1rem; color:var(--muted);
  font-size:.92rem; margin:1.4rem 0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── concept library ───────────────────────────────────────────────────── */
.masthead .brand { color:var(--accent); text-decoration:none; margin:0; font-weight:600;
  font-size:.95rem; }
.crumb { font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 .6rem; } .crumb a { color:var(--muted); text-decoration:none; }
h1.tight { margin-bottom:.3rem; }
.err { color:var(--accent); }

.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin:1.6rem 0; }
.card { display:block; background:var(--paper); padding:1.3rem 1.4rem 1.1rem; text-decoration:none;
  color:var(--ink); transition:background .12s; }
.card:hover { background:#faf8f2; }
.card .mini { margin:0 0 .95rem; max-width:15.5rem; }
.card .mini .board { width:100%; pointer-events:none; border-color:var(--hair); }
.card .mini .rk, .card .mini .fl { display:none; }
.card .ct { display:flex; justify-content:space-between; align-items:baseline; gap:.8rem; }
.card .nm { font-size:1.16rem; letter-spacing:-.008em; }
.card .rate { font-family:var(--mono); font-size:.9rem; color:var(--accent); }
.card .gl { font-size:.9rem; color:var(--muted); line-height:1.5; margin:.5rem 0 .8rem;
  max-width:none; }
.card .sig { display:flex; flex-wrap:wrap; gap:.9rem; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.06em; color:var(--faint); text-transform:uppercase; }
.card .foot { margin-top:.9rem; display:flex; align-items:center; gap:.7rem; }
.card .prog { font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; color:var(--muted);
  text-transform:uppercase; }
.card .prog.new { color:var(--faint); }
.card .pbar { flex:1; height:.22rem; background:var(--hair); }
.card .pbar span { display:block; height:100%; background:var(--ink); }

.sigbar { display:flex; flex-wrap:wrap; gap:1.4rem; padding:.9rem 0; margin:1rem 0 1.6rem;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--muted);
  text-transform:uppercase; }
.sigbar b { color:var(--ink); font-size:.86rem; }
.sigbar .mo { text-transform:none; letter-spacing:0; color:var(--faint); }
.cta { margin:2rem 0 1rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }

/* ── drill feedback ────────────────────────────────────────────────────── */
.fb { display:none; margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--rule); }
.fb.on { display:block; }
.verdict { font-size:1.2rem; margin:0 0 .5rem; }
.verdict.good { color:var(--good); } .verdict.bad { color:var(--accent); }
.fbline { font-size:.96rem; line-height:1.55; margin:0 0 1rem; }
.humanbars { margin:1rem 0 1.2rem; }
.hb-h { font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .5rem; }
.hb { display:grid; grid-template-columns:3.4rem 1fr 2.6rem; gap:.6rem; align-items:center;
  margin-bottom:.3rem; font-size:.85rem; }
.hb .mv { font-weight:600; } .hb.best .mv { color:var(--accent); }
.hb .tr { background:var(--hair); height:.65rem; }
.hb .fl { display:block; height:100%; background:var(--faint); }
.hb.best .fl { background:var(--accent); }
.hb .vl { font-family:var(--mono); font-size:.8rem; color:var(--muted); text-align:right; }
.tally i.hit { background:var(--good); }

.linebox { display:none; margin:2.4rem 0 0; padding-top:1.4rem; border-top:1px solid var(--rule); }
.linebox.on { display:block; }
.lb-h { font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .8rem; }
.linebox .board { width:min(300px,86vw); }
.linebox .ctl { display:flex; align-items:center; gap:.8rem; margin:.5rem 0;
  font-family:var(--mono); font-size:.8rem; max-width:300px; justify-content:center; }
.linebox .ctl button { font:inherit; border:1px solid var(--rule); background:var(--paper);
  color:var(--accent); cursor:pointer; padding:.1rem .55rem; }
.linebox .pos { color:var(--faint); min-width:6.5rem; text-align:center; }
.linebox .mv { font-size:.88rem; line-height:1.9; max-width:34rem; }
.linebox .mv button { font:inherit; border:none; background:none; color:var(--ink);
  cursor:pointer; padding:.04rem .22rem; font-weight:600; }
.linebox .mv button.cur { background:var(--ink); color:var(--paper); }

.bignum { font-size:3.6rem; line-height:1; margin:.4rem 0 .2rem; font-variant-numeric:tabular-nums; }
.bignum span { font-size:1.6rem; color:var(--muted); }
table.research { max-width:none; font-size:.86rem; }
table.research .mo { color:var(--muted); font-size:.8rem; }
table.research tr.hl td { background:#8a1f110d; }
table.research tr.hl td:first-child { box-shadow:inset 2px 0 0 var(--accent); }

.pred { color:var(--muted); font-size:.92em; }
.board.live { touch-action:none; }
.board.live .sq { cursor:grab; }
.pc.drag { transition:none; z-index:5; cursor:grabbing; }
.trybox .mv { font-size:.92rem; line-height:1.9; color:var(--faint); }
.trybox .mv button { font:inherit; border:none; background:none; color:var(--ink);
  cursor:pointer; padding:.04rem .3rem; font-weight:600; }
.trybox .mv button:hover { color:var(--accent); }
.trybox .mv button.cur { background:var(--ink); color:var(--paper); }

/* ── learn hub ──────────────────────────────────────────────────────────── */
.hero { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem;
  flex-wrap:wrap; }
.hero h1 { margin-bottom:.4rem; }
.hero .lede { max-width:38ch; }

.ring { position:relative; width:84px; height:84px; flex:none; }
.ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring circle { fill:none; stroke-width:7; }
.ring .rbg { stroke:var(--hair); }
.ring .rfg { stroke:var(--accent); stroke-linecap:round; transition:stroke-dasharray .6s ease; }
.ring .rv { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:1.15rem; color:var(--ink); }
.ring .rv i { font-style:normal; font-size:.78rem; color:var(--faint); margin-left:1px; }

.statstrip { display:flex; flex-wrap:wrap; gap:1.4rem; margin:1.6rem 0 1.2rem;
  padding:.75rem 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); }
.statstrip b { font-size:.95rem; color:var(--ink); letter-spacing:0; }
.statstrip .muted { color:var(--faint); }

.uptop { display:flex; align-items:center; gap:1rem; text-decoration:none;
  background:var(--ink); color:var(--paper); padding:1rem 1.3rem; border-radius:10px;
  margin:1.4rem 0 1.8rem; transition:transform .15s ease, box-shadow .15s ease; }
.uptop:hover { transform:translateY(-1px); box-shadow:0 6px 18px #16150f22; }
.uptop .k { font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.62; }
.uptop .v { font-size:1.12rem; flex:1; }
.uptop .go { font-size:1.3rem; opacity:.7; }

.modules { display:flex; flex-direction:column; gap:.6rem; }
.mod { display:flex; align-items:center; gap:1rem; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--hair); border-radius:12px; padding:.85rem 1rem;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.mod:hover { border-color:var(--rule); transform:translateY(-1px); box-shadow:0 4px 14px #16150f0f; }
.mod .num { flex:none; width:1.9rem; height:1.9rem; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-family:var(--mono); font-size:.8rem;
  background:var(--lt); color:var(--muted); }
.mod.done .num { background:var(--good); color:#fff; }
.mod.going .num, .mod.studied .num { background:var(--ink); color:var(--paper); }
.mod .thumb { flex:none; width:62px; height:62px; }
.mod .thumb .board { width:62px; border:none; }
.mod .thumb .rk, .mod .thumb .fl { display:none; }
.mod .body { flex:1; min-width:0; display:flex; flex-direction:column; gap:.22rem; }
.mod .top { display:flex; align-items:baseline; gap:.6rem; }
.mod .nm { font-size:1.05rem; font-weight:400; }
.mod .bl { font-size:.86rem; color:var(--muted); }
.mod .pbar { display:block; height:4px; background:var(--hair); border-radius:2px;
  overflow:hidden; max-width:22rem; }
.mod .pbar i { display:block; height:100%; background:var(--ink); border-radius:2px; }
.mod.done .pbar i { background:var(--good); }
.mod .st { font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; color:var(--faint); }

.pill { font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .6rem; border-radius:99px; border:1px solid var(--rule); color:var(--muted); }
.pill.t-standard { border-color:#1d6b2f55; color:var(--good); }
.pill.t-hardest { border-color:#8a1f1155; color:var(--accent); }

/* ── tutorial card ──────────────────────────────────────────────────────── */
.tut { border:1px solid var(--rule); border-radius:12px; padding:1.2rem 1.3rem;
  background:#fff; margin:1.4rem 0 1.8rem; }
.tut h3 { font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:400; margin:0 0 .8rem; }
.tut ol { margin:0; padding-left:0; list-style:none; counter-reset:tut; }
.tut li { counter-increment:tut; display:flex; gap:.8rem; padding:.5rem 0; align-items:flex-start; }
.tut li::before { content:counter(tut); flex:none; width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--lt); color:var(--muted); font-family:var(--mono); font-size:.8rem;
  display:flex; align-items:center; justify-content:center; }
.tut li .tx { display:flex; flex-direction:column; gap:.15rem; }
.tut li .tx b { font-weight:600; font-size:1rem; }
.tut li .tx span { font-size:.9rem; color:var(--muted); }
.crumb { max-width:none; overflow:hidden; }
.tut .row { margin-top:1rem; }
.tuthint { font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; color:var(--faint);
  text-decoration:none; border-bottom:1px dotted var(--rule); }
.sigdrawer { margin:2rem 0 0; border-top:1px solid var(--hair); padding-top:1rem; }
.sigdrawer summary { font-family:var(--mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); cursor:pointer; }
.sigdrawer summary:hover { color:var(--accent); }
.sigdrawer .sigbar { margin-top:.8rem; }
.donecard { border:1px solid var(--rule); border-radius:12px; background:#fff;
  padding:1.6rem 1.5rem; margin:1.4rem 0 2rem; }
.donecard .k { font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--good); }
.donecard .score { font-size:2.8rem; line-height:1.1; margin:.3rem 0 .2rem;
  font-variant-numeric:tabular-nums; }
.donecard .score i { font-style:normal; font-size:1.3rem; color:var(--faint); }
.donecard .lede { font-size:1rem; margin-bottom:1.2rem; }