:root{
  --ink:#14181c; --ink2:#4a545e; --line:#c9cfd4; --bg:#eef1f3; --card:#fff;
  --accent:#1d6b3f; --accent2:#c92b2f; --pill:#e2e7ea; --shadow:0 1px 2px rgba(20,24,28,.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:.86rem;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 b{color:var(--ink);font-variant-numeric:tabular-nums}
main{max-width:1180px;margin:0 auto;padding:1rem;display:grid;gap:1rem;
  grid-template-columns:minmax(0,1fr) 280px;grid-template-areas:"stage card" "controls card" "spec spec"}
.stage{grid-area:stage}
.controls{grid-area:controls}
.card{grid-area:card}
.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:#a3b1bd;border-radius:7px;
  touch-action:pan-y}
.lanename{margin:.6rem 0 .1rem;font-weight:600}
.msg{margin:.1rem 0 0;color:var(--ink2);min-height:1.4em}
.fail{color:var(--accent2);font-weight:600}
.row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.45rem 0}
.row label{min-width:5.6rem;font-size:.86rem;color:var(--ink2)}
.row output{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
input[type=range]{flex:1 1 200px;min-width:140px;accent-color:var(--accent)}
select{padding:.28rem .4rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
button{font:inherit;padding:.34rem .7rem;border:1px solid var(--line);border-radius:7px;
  background:#f7f9fa;color:var(--ink);cursor:pointer}
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:#175733}
.buttons{gap:.4rem}
.hint{font-size:.8rem;color:var(--ink2);margin:.5rem 0 0}
.cite{color:var(--accent);white-space:nowrap}
table{width:100%;border-collapse:collapse;font-size:.83rem}
th,td{text-align:left;padding:.18rem .3rem;border-bottom:1px solid #e6eaec}
th{color:var(--ink2);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}
td.n{width:2.2rem;color:var(--ink2);font-variant-numeric:tabular-nums}
td.sc{width:2.6rem;font-weight:700;font-variant-numeric:tabular-nums}
td.sc.ace{color:var(--accent)}
td.sc.cap{color:var(--accent2)}
td.ob{color:var(--ink2);font-size:.78rem}
tr.here{background:#eaf3ee}
tr.here td.n{color:var(--accent);font-weight:700}
.doc{font-size:.82rem;color:var(--accent);margin:.2rem 0 .5rem}
blockquote{margin:0 0 .7rem;padding:.55rem .75rem;background:#f5f7f8;border-left:3px solid var(--line);
  border-radius:0 6px 6px 0;font-size:.85rem;color:var(--ink2)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cols ul{margin:0;padding-left:1.1rem;font-size:.82rem;color:var(--ink2)}
.cols li{margin:.18rem 0}
.modal{position:fixed;inset:0;background:rgba(20,24,28,.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:640px;width:100%;
  box-shadow:0 10px 40px rgba(20,24,28,.3)}
.sheet ul{padding-left:1.1rem}
.sheet li{margin:.25rem 0}
footer{max-width:1180px;margin:0 auto;padding:0 1rem 2rem;color:var(--ink2);font-size:.8rem}
@media (max-width:880px){
  main{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "controls" "card" "spec"}
  .cols{grid-template-columns:1fr}
}
@media (prefers-color-scheme:dark){
  :root{--ink:#e8ecef;--ink2:#a2adb6;--line:#333c44;--bg:#14181c;--card:#1b2126;
    --accent:#4fbd7f;--accent2:#ef6a6d;--pill:#252d34;--shadow:0 1px 2px rgba(0,0,0,.4)}
  button{background:#232b31;color:var(--ink)}
  button:hover{background:#2b343b}
  button.primary{color:#0d1417}
  button.primary:hover{background:#69cd93}
  select{background:#232b31;color:var(--ink)}
  blockquote{background:#212930}
  th,td{border-bottom-color:#2a333a}
  tr.here{background:#20302a}
  canvas{background:#5b6a76}
}