:root{
    --bg:#EAEDE9; --surface:#F8F9F6; --surface-2:#DFE4DE; --sunk:#E3E7E2;
    --ink:#131E1A; --ink-2:#48584F; --ink-3:#7A8A83;
    --line:#C9D1C9; --line-2:#B2BDB4;
    --head-bg:#1C342C; --head-ink:#F1F5F0; --head-ink-2:#9BB2A7; --head-line:#2E4C41;
    --a:#A82A21; --a-soft:#F2DEDB; --a-lift:#F0A79C;
    --b:#15564F; --b-soft:#D7E6E2; --b-lift:#7FD3C6;
    --gold:#8C6A1E; --gold-soft:#F0E6CA;
    --good:#276B4C; --warn:#8A5A12;
    --btn-bg:#1C342C; --btn-ink:#F1F5F0;
    --r:11px;
    --shadow:0 1px 2px rgba(19,30,26,.07), 0 8px 20px -14px rgba(19,30,26,.35);
    --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#0F1614; --surface:#18211E; --surface-2:#232E29; --sunk:#111917;
      --ink:#E9EEE9; --ink-2:#A6B4AD; --ink-3:#74847D;
      --line:#2A3833; --line-2:#3B4C45;
      --head-bg:#1A2421; --head-ink:#EAEFE9; --head-ink-2:#92A59C; --head-line:#2D3B35;
      --a:#E5867A; --a-soft:#39211E; --a-lift:#F0A79C;
      --b:#5FB8AC; --b-soft:#16302C; --b-lift:#7FD3C6;
      --gold:#D8B463; --gold-soft:#322A16;
      --good:#63BE8E; --warn:#D8A95C;
      --btn-bg:#E4EBE5; --btn-ink:#101917;
      --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -16px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0F1614; --surface:#18211E; --surface-2:#232E29; --sunk:#111917;
    --ink:#E9EEE9; --ink-2:#A6B4AD; --ink-3:#74847D;
    --line:#2A3833; --line-2:#3B4C45;
    --head-bg:#1A2421; --head-ink:#EAEFE9; --head-ink-2:#92A59C; --head-line:#2D3B35;
    --a:#E5867A; --a-soft:#39211E; --a-lift:#F0A79C;
    --b:#5FB8AC; --b-soft:#16302C; --b-lift:#7FD3C6;
    --gold:#D8B463; --gold-soft:#322A16;
    --good:#63BE8E; --warn:#D8A95C;
    --btn-bg:#E4EBE5; --btn-ink:#101917;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -16px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box}
  [hidden]{display:none!important}
  html{height:100%}
  /* min-height, not height: a fixed-height body caps the sticky scoreboard's
     containing block at one viewport, so it scrolls away on a long game. */
  body{
    min-height:100%;
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--font); font-size:15px; line-height:1.45;
    -webkit-text-size-adjust:100%;
  }
  .wrap{max-width:1020px; margin:0 auto; padding:0 16px 0}
  h1,h2,h3{margin:0; font-weight:600; text-wrap:balance}
  button{font-family:inherit; font-size:inherit; color:inherit; cursor:pointer}
  button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--gold); outline-offset:2px
  }
  .lbl{
    font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--ink-3)
  }
  .num-t{font-variant-numeric:tabular-nums}
  .spacer{flex:1}

  /* ---------- scoreboard ---------- */
  .board{
    background:var(--head-bg); color:var(--head-ink);
    position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
    box-shadow:0 10px 24px -20px rgba(0,0,0,.9);
  }
  .board-in{max-width:1020px; margin:0 auto; padding:12px 16px 12px}
  .board-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
  .brand{font-size:13px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--head-ink-2)}
  .mini{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--head-ink-2)}
  .mini input{
    width:5.2em; padding:4px 6px; text-align:right;
    font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums;
    color:var(--head-ink); background:rgba(255,255,255,.07);
    border:1px solid var(--head-line); border-radius:6px;
  }
  .ghost{
    background:transparent; border:1px solid var(--head-line); color:var(--head-ink-2);
    padding:5px 10px; border-radius:7px; font-size:12px; font-weight:500;
  }
  .ghost:hover{color:var(--head-ink); border-color:var(--head-ink-2)}
  .ghost[data-armed="1"]{
    background:rgba(216,180,99,.16); border-color:rgba(216,180,99,.6);
    color:#EFD79B; font-weight:600;
  }

  .scores{display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:10px; margin-top:8px}
  .sc{min-width:0}
  .sc.r{text-align:right}
  .sc-name{
    display:block; width:100%; border:0; background:transparent; padding:0;
    font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.02em;
    color:var(--head-ink); border-bottom:1px dashed transparent; text-overflow:ellipsis;
  }
  .sc.r .sc-name{text-align:right}
  .sc-name:hover,.sc-name:focus{border-bottom-color:var(--head-ink-2); outline:none}
  .sc-total{
    font-size:clamp(34px,11vw,52px); font-weight:700; line-height:.95;
    letter-spacing:-.025em; font-variant-numeric:tabular-nums;
  }
  .sc[data-t="a"] .sc-total{color:var(--a-lift)}
  .sc[data-t="b"] .sc-total{color:var(--b-lift)}
  .sc-meld{display:inline-flex; align-items:baseline; gap:5px; margin-top:4px; font-size:11.5px; color:var(--head-ink-2)}
  .sc-meld b{font-family:var(--mono); font-weight:600; color:var(--head-ink); font-size:12.5px}
  .dash{width:1px; min-height:54px; align-self:stretch; background:var(--head-line)}

  .strip{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-top:10px; padding-top:9px; border-top:1px solid var(--head-line);
    font-size:12px; color:var(--head-ink-2);
  }
  .strip .lbl{color:var(--head-ink-2); font-size:10px}
  .rec{display:flex; align-items:baseline; gap:7px; font-family:var(--mono); font-variant-numeric:tabular-nums}
  .rec b{font-size:15px; font-weight:600}
  .rec[data-t="a"] b{color:var(--a-lift)}
  .rec[data-t="b"] b{color:var(--b-lift)}
  .rec span{font-family:var(--font); font-size:11.5px}
  .rec-dash{color:var(--head-line)}
  .sync{
    display:inline-flex; align-items:center; gap:6px; font-size:11px;
    color:var(--head-ink-2); white-space:nowrap;
  }
  .sync::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--head-ink-2); flex:0 0 auto;
  }
  .sync[data-s="shared"]::before{background:#6FD39C}
  .sync[data-s="wait"]::before{background:#D8B463}
  .sync[data-s="local"]::before{background:#D8B463}
  .sync[data-s="readonly"]::before{background:#E5867A}

  /* ---------- room code ---------- */
  .room-tag{
    display:inline-flex; align-items:baseline; gap:6px;
    padding:3px 9px; border-radius:7px;
    background:rgba(255,255,255,.07); border:1px solid var(--head-line);
    font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--head-ink-2);
  }
  .room-tag b{
    font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:.12em;
    color:var(--gold); text-transform:none;
  }
  .h2h-tag{font-size:11px; color:var(--head-ink-2); font-variant-numeric:tabular-nums}

  /* ---------- lobby ---------- */
  .lobby{padding-block:22px 0}
  .lobby-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:14px; align-items:start}
  @media (max-width:700px){ .lobby-grid{grid-template-columns:1fr} }
  .lcard{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    box-shadow:var(--shadow); padding:18px 18px 20px;
    display:flex; flex-direction:column; gap:11px;
    border-top:3px solid var(--a);
  }
  .lcard.alt{border-top-color:var(--b)}
  .lcard h2{font-size:17px; letter-spacing:-.01em}
  .lcard p{margin:0; font-size:12.5px; color:var(--ink-3); max-width:44ch}
  .lfield{
    display:flex; flex-direction:column; gap:5px;
    font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--ink-3);
  }
  .lfield input{
    padding:11px 12px; border-radius:8px;
    background:var(--sunk); border:1px solid var(--line-2); color:var(--ink);
    font-family:var(--font); font-size:16px; font-weight:500; letter-spacing:0;
    text-transform:none;
  }
  .lfield input::placeholder{color:var(--ink-3); opacity:.65}
  .code-in{
    font-family:var(--mono)!important; font-size:26px!important; font-weight:600!important;
    text-align:center; letter-spacing:.34em!important; text-indent:.34em;
    text-transform:uppercase;
  }
  .lcard .commit{width:100%; justify-content:center; margin-top:3px}
  .lcard .commit.quiet{
    background:transparent; color:var(--ink); border:1px solid var(--line-2); box-shadow:none;
  }
  .lcard .commit.quiet:hover{border-color:var(--ink-3); filter:none}
  .lcard .commit[data-busy="1"]{opacity:.55}
  .lerr{
    font-size:12px; color:var(--a); display:flex; gap:6px; align-items:flex-start;
  }
  .lerr::before{content:"!"; font-family:var(--mono); font-weight:700}
  .lobby-note{
    margin:16px 0 0; font-size:11.5px; color:var(--ink-3); max-width:64ch;
  }

  /* ---------- head to head ---------- */
  .h2h{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
  .h2h-pair{display:flex; align-items:baseline; gap:7px; min-width:0; flex-wrap:wrap}
  .h2h-n{font-weight:500; overflow:hidden; text-overflow:ellipsis}
  .h2h-n.lead{font-weight:600}
  .h2h-v{font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.09em}
  .h2h-rec{font-family:var(--mono); font-weight:600; color:var(--ink)}

  /* ---------- tabs ---------- */
  .tabs{
    max-width:1020px; margin:0 auto; padding:0 16px;
    display:flex; gap:2px; align-items:flex-end;
  }
  .tab{
    appearance:none; background:transparent; border:0;
    border-bottom:2px solid transparent;
    padding:9px 14px 8px; margin-bottom:-1px;
    font-size:13px; font-weight:600; letter-spacing:.02em;
    color:var(--head-ink-2);
  }
  .tab:hover{color:var(--head-ink)}
  .tab[aria-selected="true"]{
    color:var(--head-ink); border-bottom-color:var(--gold);
  }
  .tab .badge{
    display:inline-block; margin-left:7px; padding:1px 6px; border-radius:999px;
    background:rgba(255,255,255,.1); color:inherit;
    font-family:var(--mono); font-size:10.5px; font-weight:600; font-variant-numeric:tabular-nums;
  }

  .winner{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-top:10px; padding:9px 12px; border-radius:8px;
    background:rgba(216,180,99,.14); border:1px solid rgba(216,180,99,.4);
    color:#E8C77E; font-size:13px; font-weight:600;
  }
  .winner .lbl{color:inherit; opacity:.7}
  .winner button{
    background:rgba(216,180,99,.16); border:1px solid rgba(216,180,99,.5); color:#EFD79B;
    padding:5px 11px; border-radius:7px; font-size:12px; font-weight:600;
  }
  .winner button:hover{background:rgba(216,180,99,.28)}
  .winner button.quiet{background:transparent; border-color:rgba(216,180,99,.3); color:#C9AE78; font-weight:500}

  /* ---------- entry ---------- */
  .entry{padding-block:18px 0}
  .entry-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px}
  .entry-head h2{font-size:15px; letter-spacing:.02em}
  .entry-head h2 span{font-family:var(--mono); font-weight:600}
  .editing{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--warn); font-weight:600}
  .editing button{
    background:transparent; border:1px solid currentColor; color:inherit;
    border-radius:6px; padding:2px 8px; font-size:11px;
  }

  .panels{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media (max-width:760px){ .panels{grid-template-columns:1fr} }

  .panel{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    box-shadow:var(--shadow); overflow:hidden;
  }
  .panel[data-t="a"]{border-top:3px solid var(--a)}
  .panel[data-t="b"]{border-top:3px solid var(--b)}
  .p-head{
    display:flex; align-items:baseline; gap:10px;
    padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-2);
  }
  .p-name{font-weight:600; font-size:14px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .panel[data-t="a"] .p-name{color:var(--a)}
  .panel[data-t="b"] .p-name{color:var(--b)}
  .p-sum{font-family:var(--mono); font-weight:600; font-size:17px; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
  .p-proj{font-size:11px; color:var(--ink-3); font-family:var(--mono)}
  .p-body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:12px}

  .field{display:flex; flex-direction:column; gap:7px}
  .f-top{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
  .f-hint{font-size:11px; color:var(--ink-3); font-weight:400; letter-spacing:0; text-transform:none}
  .f-row{display:flex; align-items:stretch; gap:8px; flex-wrap:wrap}
  input.num{
    width:104px; flex:0 0 auto; padding:8px 10px; text-align:right;
    font-family:var(--mono); font-size:19px; font-weight:600; font-variant-numeric:tabular-nums;
    color:var(--ink); background:var(--sunk);
    border:1px solid var(--line-2); border-radius:8px;
  }
  .field.minus input.num{color:var(--a)}
  .chips{display:flex; gap:6px; flex-wrap:wrap; align-items:stretch; flex:1 1 auto}
  .chip{
    flex:1 1 auto; min-width:46px; min-height:42px; padding:0 6px;
    background:var(--surface); border:1px solid var(--line-2); border-radius:8px;
    font-family:var(--mono); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
    color:var(--ink-2);
  }
  .chip:hover{border-color:var(--ink-3); color:var(--ink)}
  .chip:active{background:var(--surface-2); transform:translateY(1px)}
  .chip::before{content:"+"; opacity:.5}
  .field.minus .chip::before{content:"−"; opacity:.9; color:var(--a)}
  .chip.sign{flex:0 0 auto; min-width:40px; color:var(--ink-3)}
  .chip.sign::before{content:none}
  .field.minus .chip.sign{background:var(--a); border-color:var(--a); color:var(--surface)}
  .chip.clear{
    flex:0 0 auto; min-width:auto; padding:0 9px; font-family:var(--font);
    font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  }
  .chip.clear::before{content:none}

  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
  @media (max-width:420px){ .steps{grid-template-columns:1fr} }
  .step{
    background:var(--sunk); border:1px solid var(--line); border-radius:8px;
    padding:7px 8px 8px; display:flex; flex-direction:column; gap:4px; align-items:center;
  }
  .step .lbl{font-size:10px; text-align:center; line-height:1.25}
  .step.bonus .lbl{color:var(--gold)}
  .step-ctl{display:flex; align-items:center; gap:2px; width:100%}
  .step-ctl button{
    flex:0 0 auto; width:34px; height:34px; border-radius:7px;
    background:var(--surface); border:1px solid var(--line-2);
    font-size:17px; font-weight:600; line-height:1; color:var(--ink-2);
    display:grid; place-items:center;
  }
  .step-ctl button:hover{color:var(--ink); border-color:var(--ink-3)}
  .step-ctl button:disabled{opacity:.35; cursor:default}
  .step-v{flex:1 1 auto; text-align:center; font-family:var(--mono); font-size:19px; font-weight:600; font-variant-numeric:tabular-nums}
  .step-v[data-zero="1"]{color:var(--ink-3)}

  .r3flag{
    display:flex; align-items:center; gap:7px; padding:6px 9px;
    background:var(--sunk); border:1px solid var(--line); border-radius:8px;
    font-size:11.5px; color:var(--ink-2); cursor:pointer;
  }
  .r3flag input{accent-color:var(--a); width:15px; height:15px; margin:0}

  .outbtn{
    width:100%; min-height:44px; padding:0 12px; border-radius:8px;
    background:var(--surface); border:1px dashed var(--line-2); color:var(--ink-2);
    font-weight:600; font-size:13.5px; letter-spacing:.02em;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .outbtn:hover{border-color:var(--ink-3); color:var(--ink)}
  .outbtn .v{font-family:var(--mono); font-size:12px; opacity:.6}
  .outbtn[aria-pressed="true"]{background:var(--gold-soft); border:1px solid var(--gold); color:var(--gold)}
  .outbtn[aria-pressed="true"] .v{opacity:.85}
  .note{font-size:11.5px; color:var(--warn); display:flex; gap:6px; align-items:flex-start}
  .note::before{content:"!"; font-weight:700; font-family:var(--mono)}

  /* ---------- commit ---------- */
  .commitbar{
    position:sticky; bottom:0; z-index:30; margin-top:14px;
    padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to top,var(--bg) 62%,rgba(0,0,0,0));
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .commit-note{flex:1 1 140px; font-size:11.5px; color:var(--ink-3); min-width:0}
  .commit{
    flex:0 0 auto; min-height:48px; padding:0 22px; border-radius:9px; border:1px solid var(--btn-bg);
    background:var(--btn-bg); color:var(--btn-ink);
    font-weight:600; font-size:15px; letter-spacing:.02em; box-shadow:var(--shadow);
  }
  .commit:hover{filter:brightness(1.12)}
  .commit:disabled{opacity:.4; cursor:default; filter:none}

  /* ---------- lists ---------- */
  .hist,.series{padding-block:8px 0}
  .series{margin-top:20px; padding-top:20px; border-top:1px solid var(--line)}
  .list-head{display:flex; align-items:baseline; gap:10px; margin-bottom:8px}
  .list-head h2{font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
  .list-head .cnt{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
  .rows{display:flex; flex-direction:column; gap:6px}
  .empty{padding:16px; border:1px dashed var(--line-2); border-radius:var(--r); font-size:13px; color:var(--ink-3); text-align:center}
  .row{
    display:grid; grid-template-columns:32px 1fr 1fr 58px; gap:10px; align-items:center;
    background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:8px 10px;
  }
  .row.edit{border-color:var(--warn); box-shadow:0 0 0 1px var(--warn) inset}
  .rn{font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:center}
  .cell{min-width:0}
  .cell-top{display:flex; align-items:baseline; gap:7px}
  .cell-d{font-family:var(--mono); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
  .cell[data-t="a"] .cell-d{color:var(--a)}
  .cell[data-t="b"] .cell-d{color:var(--b)}
  .cell-run{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
  .cell-sum{font-size:11px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .acts{display:flex; gap:4px; justify-content:flex-end}
  .acts button{
    width:26px; height:26px; border-radius:6px; background:transparent;
    border:1px solid var(--line-2); color:var(--ink-3);
    display:grid; place-items:center; font-size:12px; line-height:1;
  }
  .acts button:hover{color:var(--ink); border-color:var(--ink-3)}
  .acts button[data-armed="1"]{
    background:var(--a); border-color:var(--a); color:var(--surface); font-weight:700;
  }
  @media (max-width:560px){
    .row{grid-template-columns:28px 1fr 46px; grid-template-areas:"n a x" "n b x"; row-gap:5px}
    .rn{grid-area:n; align-self:start; padding-top:2px}
    .cell[data-t="a"]{grid-area:a}
    .cell[data-t="b"]{grid-area:b}
    /* Scoped to .row: unscoped, this leaks onto the .acts inside .grow, which
       has no area named "x", and drops its button onto a second line. */
    .row .acts{grid-area:x; align-self:center}
  }

  /* ---------- leaderboard ---------- */
  .lb,.games{padding-block:18px 0}
  .games{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
  .lb-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .lb-t{
    width:100%; border-collapse:collapse; font-size:13.5px;
    font-variant-numeric:tabular-nums;
  }
  .lb-t th{
    text-align:left; padding:0 10px 7px; border-bottom:1px solid var(--line-2);
    font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--ink-3); white-space:nowrap;
  }
  .lb-t td{padding:9px 10px; border-bottom:1px solid var(--line)}
  .lb-t .c-rank{width:38px; text-align:center}
  .lb-t .c-n{text-align:right; width:70px}
  .lb-t tbody tr:last-child td{border-bottom:0}
  .lb-rank{
    font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:center;
  }
  /* The top three carry the ranking, so only they get weight. */
  .lb-t tr[data-top="1"] .lb-rank{color:var(--gold); font-weight:600}
  .lb-team{font-weight:600; display:flex; align-items:center; gap:8px; min-width:0}
  .lb-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .lb-here{
    flex:0 0 auto; padding:1px 7px; border-radius:999px;
    background:var(--gold-soft); color:var(--gold);
    font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  }
  .lb-w{font-family:var(--mono); font-weight:600; text-align:right; color:var(--good)}
  .lb-l{font-family:var(--mono); text-align:right; color:var(--ink-3)}
  .lb-pct{font-family:var(--mono); text-align:right; color:var(--ink-2)}
  .lb-note{margin:12px 0 0; font-size:11.5px; color:var(--ink-3); max-width:62ch}
  .lb-note em{font-style:normal; font-family:var(--mono); color:var(--ink-2)}

  .grow{
    /* four children: winner, score, date, remove button */
    display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center;
    background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:7px 10px;
    font-size:12.5px;
  }
  .grow-w{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .grow-w[data-t="a"]{color:var(--a)}
  .grow-w[data-t="b"]{color:var(--b)}
  .grow-s{font-family:var(--mono); font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
  .grow-d{font-size:11px; color:var(--ink-3); white-space:nowrap}

  /* ---------- reference ---------- */
  .ref{padding-block:22px 28px; border-top:1px solid var(--line); margin-top:22px}
  .ref h2{font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px}
  .ref-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px}
  .ref-col h3{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px}
  .ref-col dl{margin:0; display:grid; grid-template-columns:1fr auto; gap:3px 10px; font-size:12.5px}
  .ref-col dt{color:var(--ink-2); min-width:0}
  .ref-col dd{margin:0; font-family:var(--mono); font-weight:500; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink)}
  .ref-col dd.g{color:var(--gold)}
  .ref-note{margin:14px 0 0; font-size:11.5px; color:var(--ink-3); max-width:62ch}
  .ref-note a{color:var(--ink-2)}

  /* ---------- read-only ---------- */
  body.ro .panels,body.ro .commitbar{opacity:.5; pointer-events:none}
  body.ro .acts,body.ro .winner button{display:none}