:root{
  --ink:#151a1e; --ink2:#4b555f; --line:#c8cfd5; --bg:#eef1f3; --card:#fff;
  --accent:#1d5f8f; --accent2:#c0392b; --gold:#b58b00; --pill:#e2e7ea;
  --shadow:0 1px 2px rgba(21,26,30,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
h1{font-size:1.45rem;margin:0;letter-spacing:-.01em}
h2{font-size:1.05rem;margin:0 0 .5rem;letter-spacing:-.01em}
h3{font-size:.82rem;margin:.9rem 0 .35rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink2)}
a{color:var(--accent)}
.top{padding:.9rem 1rem .7rem;background:var(--card);border-bottom:1px solid var(--line)}
.sub{margin:.15rem 0 .6rem;color:var(--ink2);font-size:.86rem}
.scoreline{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.pill{background:var(--pill);border-radius:999px;padding:.18rem .6rem;font-size:.82rem;
  color:var(--ink2)}
.pill[hidden]{display:none}
.pill b{color:var(--ink);font-variant-numeric:tabular-nums}
#modePill{background:var(--accent);color:#fff;font-weight:600}
main{max-width:1200px;margin:0 auto;padding:1rem;display:grid;gap:1rem;
  grid-template-columns:minmax(0,1fr) 300px;
  grid-template-areas:"stage card" "controls card" "controls marks" "spec spec"}
.stage{grid-area:stage}
.controls{grid-area:controls}
.card{grid-area:card}
.marks{grid-area:marks}
.spec{grid-area:spec}
section{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.85rem;
  box-shadow:var(--shadow)}
canvas{display:block;width:100%;height:auto;aspect-ratio:8/5;background:#9db2c6;border-radius:7px}
.stagebar{display:flex;flex-wrap:wrap;gap:.35rem;margin:.55rem 0 .1rem}
.tag{background:var(--pill);border-radius:6px;padding:.12rem .45rem;font-size:.78rem;
  color:var(--ink2)}
.tag b{color:var(--ink);font-variant-numeric:tabular-nums}
.click{color:var(--accent2);font-weight:700}
.click[hidden]{display:none}
.msg{margin:.35rem 0 0;color:var(--ink2);min-height:2.6em;font-size:.88rem}
.fail{color:var(--accent2);font-weight:600}
.fail[hidden]{display:none}
.row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.45rem 0}
.row label{min-width:5.8rem;font-size:.86rem;color:var(--ink2)}
.row output{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;min-width:5rem}
input[type=range]{flex:1 1 180px;min-width:130px;accent-color:var(--accent)}
select{padding:.28rem .4rem;border:1px solid var(--line);border-radius:6px;background:#fff;
  color:var(--ink);max-width:100%}
button{font:inherit;padding:.34rem .7rem;border:1px solid var(--line);border-radius:7px;
  background:#f7f9fa;color:var(--ink);cursor:pointer;touch-action:manipulation}
button:hover{background:#eef2f4}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary:hover{background:#174d74}
button[hidden]{display:none}
#drawBtn{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.buttons{gap:.4rem}
.hint{font-size:.8rem;color:var(--ink2);margin:.5rem 0 0}
.cite{color:var(--accent);white-space:nowrap;font-size:.92em}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th,td{text-align:left;padding:.18rem .3rem;border-bottom:1px solid #e6eaec}
th{color:var(--ink2);font-weight:600;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.05em}
td.n{width:2.6rem;color:var(--ink2);font-variant-numeric:tabular-nums}
td.sc{width:3.4rem;font-weight:700;font-variant-numeric:tabular-nums}
td.sc.ace{color:var(--accent)}
td.sc.cap{color:var(--accent2)}
td.ar{color:var(--ink2);font-variant-numeric:tabular-nums;letter-spacing:.02em}
tr.here{background:#e9f0f6}
tr.here td.n{color:var(--accent);font-weight:700}
#specWrap[hidden]{display:none}
.cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:.6rem}
.cols ul{margin:0;padding-left:1.05rem;font-size:.8rem;color:var(--ink2)}
.cols li{margin:.3rem 0}
.modal{position:fixed;inset:0;background:rgba(21,26,30,.55);display:flex;align-items:flex-start;
  justify-content:center;padding:1.2rem;overflow:auto;z-index:20}
.modal[hidden]{display:none}
.sheet{background:var(--card);border-radius:12px;padding:1.1rem 1.25rem;max-width:660px;
  width:100%;box-shadow:0 10px 40px rgba(21,26,30,.3)}
.sheet ul{padding-left:1.1rem}
.sheet li{margin:.25rem 0}
footer{max-width:1200px;margin:0 auto;padding:0 1rem 2rem;color:var(--ink2);font-size:.8rem}
@media (max-width:900px){
  main{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"stage" "controls" "card" "marks" "spec"}
  .cols{grid-template-columns:minmax(0,1fr)}
  .cols li{overflow-wrap:anywhere}
}
@media (max-width:400px){
  main{padding:.6rem}
  section{padding:.6rem}
  th{letter-spacing:0;font-size:.68rem}
  th,td{padding:.18rem .2rem}
  .marks table{font-size:.76rem}
  .marks{overflow-x:auto}
  .cite{white-space:normal}
}
@media (prefers-color-scheme:dark){
  :root{--ink:#e8ecef;--ink2:#a3aeb7;--line:#333c44;--bg:#14181c;--card:#1b2126;
    --accent:#5aa9de;--accent2:#ef6a6d;--gold:#e0b53a;--pill:#252d34;
    --shadow:0 1px 2px rgba(0,0,0,.4)}
  button{background:#232b31;color:var(--ink)}
  button:hover{background:#2b343b}
  button.primary{color:#0c1218}
  button.primary:hover{background:#79bde8}
  #modePill{color:#0c1218}
  select{background:#232b31;color:var(--ink)}
  th,td{border-bottom-color:#2a333a}
  tr.here{background:#1f2b34}
  canvas{background:#5d7285}
}