:root{
  --bg:#F5F7F4; --surface:#FFFFFF; --surface2:#EDF1EE;
  --ink:#1C2422; --muted:#5C6B66; --line:#D8E0DB; --line-strong:#9FAFA8;
  --accent:#0E7C66; --accent-soft:#DCEEE8; --accent-ink:#0A5D4D;
  --amber:#B07C1F; --amber-soft:#F6ECD6; --amber-ink:#8A6114;
  --error:#B3403A; --error-soft:#F4DEDC;
  --entry:#0E7C66; --focus:#0E7C66;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101514; --surface:#1A211E; --surface2:#212A26;
    --ink:#E6EDE9; --muted:#93A39C; --line:#2C3733; --line-strong:#4A5A53;
    --accent:#3FBFA0; --accent-soft:#173A32; --accent-ink:#7FDCC4;
    --amber:#D9A441; --amber-soft:#3A2F16; --amber-ink:#E8C57C;
    --error:#E07B72; --error-soft:#40201D;
    --entry:#3FBFA0; --focus:#3FBFA0;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101514; --surface:#1A211E; --surface2:#212A26;
  --ink:#E6EDE9; --muted:#93A39C; --line:#2C3733; --line-strong:#4A5A53;
  --accent:#3FBFA0; --accent-soft:#173A32; --accent-ink:#7FDCC4;
  --amber:#D9A441; --amber-soft:#3A2F16; --amber-ink:#E8C57C;
  --error:#E07B72; --error-soft:#40201D;
  --entry:#3FBFA0; --focus:#3FBFA0;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important} /* beats element display rules like .diff-row{display:flex} */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
body{background:var(--bg); color:var(--ink); font-family:"Instrument Sans",system-ui,sans-serif; margin:0; padding:0 16px 48px;}
.wrap{max-width:1060px; margin:0 auto;}
header{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; padding:28px 0 6px;}
h1{font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:600; font-size:2.1rem; margin:0; letter-spacing:.01em;}
.tagline{color:var(--muted); font-size:.95rem; max-width:52ch;}
.contract-banner{display:flex; align-items:center; gap:10px; background:var(--accent-soft); color:var(--accent-ink); border-radius:8px; padding:9px 14px; font-size:.88rem; margin:14px 0 22px; line-height:1.4;}
.contract-banner .seal{font-family:"Newsreader",serif; font-style:italic; font-weight:600; white-space:nowrap;}
main{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start;}
@media(max-width:860px){ main{grid-template-columns:1fr;} .rail{order:2} }

/* board */
.board-col{display:flex; flex-direction:column; gap:16px; min-width:0;}
.mode-row{display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:560px; margin:0 auto; width:100%; flex-wrap:wrap;}
.mode-chip{font-family:"Spline Sans Mono",monospace; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border-radius:6px; padding:5px 10px;}
.mode-chip.free{color:var(--muted); background:var(--surface2);}
.mode-switch{display:flex; gap:8px;}
.btn.slim{padding:6px 12px; font-size:.82rem;}
.diff-row{display:flex; align-items:center; gap:10px; max-width:560px; margin:0 auto; width:100%;}
.diff-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted);}
.diff-pills{display:flex; gap:6px; flex-wrap:wrap;}
.diff-pill{font-family:inherit; font-size:.78rem; font-weight:600; padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer;}
.diff-pill:hover{border-color:var(--accent);}
.diff-pill.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);}
.diff-pill:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.btn.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);}
.key-hint{font-size:.68rem; border:1px solid currentColor; border-radius:3px; padding:0 4px; opacity:.65; margin-left:2px;}
.grid{display:grid; grid-template-columns:repeat(9,1fr); aspect-ratio:1; width:100%; max-width:560px; margin:0 auto;
  border:2.5px solid var(--line-strong); border-radius:6px; overflow:hidden; background:var(--surface); user-select:none;}
.cell{position:relative; display:flex; align-items:center; justify-content:center;
  font-family:"Spline Sans Mono",ui-monospace,monospace; font-size:clamp(1rem,3.4vw,1.65rem); font-weight:500;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; background:var(--surface);}
.grid{position:relative;}
.grid.loading::after{content:"Certifying a fair puzzle…"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--surface) 78%, transparent); color:var(--accent-ink);
  font-family:"Newsreader",serif; font-style:italic; font-size:1rem; z-index:5;}
.cell:nth-child(9n){border-right:none}
.cell:nth-child(n+73){border-bottom:none}
.cell.br3{border-right:1.8px solid var(--line-strong)}
.cell.bb3{border-bottom:1.8px solid var(--line-strong)}
.cell.given{color:var(--ink); font-weight:600;}
.cell.entry{color:var(--entry);}
.cell.sel{outline:2.5px solid var(--focus); outline-offset:-2.5px; z-index:2;}
.cell.same{background:var(--surface2);}
.cell.conflict{color:var(--error); background:var(--error-soft);}
.cell.p-unit{background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface));}
.cell.p-evidence{background:var(--accent-soft); box-shadow:inset 0 0 0 1.5px var(--accent);}
.cell.p-target{background:var(--amber-soft); box-shadow:inset 0 0 0 2px var(--amber); animation:pulse 1.4s ease-in-out infinite;}
.cell.p-wrong{background:var(--error-soft); box-shadow:inset 0 0 0 2px var(--error); animation:pulseErr 1.4s ease-in-out infinite;}
@keyframes pulse{50%{box-shadow:inset 0 0 0 4px var(--amber)}}
@keyframes pulseErr{50%{box-shadow:inset 0 0 0 4px var(--error)}}
@media(prefers-reduced-motion:reduce){.cell{animation:none!important}}

/* pad */
.pad{display:grid; grid-template-columns:repeat(10,1fr); gap:8px; max-width:560px; margin:0 auto; width:100%;}
.pad button{font-family:"Spline Sans Mono",monospace; font-size:1.15rem; font-weight:500; padding:10px 0 6px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px;}
.pad button:hover{border-color:var(--accent)}
.pad button:focus-visible, .btn:focus-visible, .seg button:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.pad .rem{font-size:.62rem; color:var(--muted); font-family:"Instrument Sans",sans-serif;}
.pad button.done{opacity:.35}
.board-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.btn{font-family:"Instrument Sans",sans-serif; font-size:.92rem; font-weight:600; padding:10px 18px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer;}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--bg);}
.btn.amber{background:var(--amber); border-color:var(--amber); color:var(--bg);}
.btn:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.4; cursor:default; filter:none;}

/* rail */
.rail{display:flex; flex-direction:column; gap:18px;}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px;}
.panel h2{font-family:"Newsreader",serif; font-style:italic; font-weight:600; font-size:1.15rem; margin:0 0 10px;}
.panel .sub{color:var(--muted); font-size:.85rem; line-height:1.45; margin:0 0 12px;}
.seg{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.seg button{flex:1; padding:9px 4px; font-size:.82rem; font-weight:600; background:var(--surface); color:var(--muted); border:none; cursor:pointer; font-family:inherit;}
.seg button.on{background:var(--accent); color:var(--bg);}
.seg button+button{border-left:1px solid var(--line)}
.more-details{margin-top:12px;}
.more-details summary{cursor:pointer; font-size:.8rem; font-weight:600; color:var(--accent-ink); list-style-position:inside;}
.more-details summary:hover{text-decoration:underline;}
.more-details summary:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.more-details[open] summary{margin-bottom:8px;}
.tt-name{color:var(--ink); font-weight:600;}
.tt-plain{display:block; font-size:.78rem; color:var(--muted); line-height:1.4;}
.techs{margin:0; padding:0; list-style:none; font-size:.83rem; color:var(--muted); display:flex; flex-direction:column; gap:8px;}
.techs li{padding-left:1.3em; position:relative;}
.techs li::before{content:"✓"; color:var(--accent); font-weight:700; position:absolute; left:0; top:0;}
.techs li.off{opacity:.42}
.techs li.off::before{content:"✗"; color:var(--muted);}

.cert{border-left:3px solid var(--accent);}
.cert .stamp{font-family:"Newsreader",serif; font-style:italic; color:var(--accent-ink); font-size:.9rem; margin-bottom:10px;}
.cert table{width:100%; border-collapse:collapse; font-size:.85rem;}
.cert td{padding:5px 0; color:var(--muted); vertical-align:top;}
.cert td:last-child{text-align:right; font-family:"Spline Sans Mono",monospace; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; padding-left:10px;}
.cert tr+tr td{border-top:1px dashed var(--line);}
.cert .zero{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-size:.85rem; color:var(--accent-ink); font-weight:600;}

.board-proof{max-width:560px; width:100%; margin:0 auto;}
.proof .stage{display:none; margin-top:12px; padding:12px 14px; border-radius:8px; background:var(--surface2); font-size:.87rem; line-height:1.5;}
.proof .stage.show{display:block;}
.proof .tech-name{font-family:"Spline Sans Mono",monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--amber-ink); background:var(--amber-soft); display:inline-block; padding:2px 8px; border-radius:4px; margin-bottom:8px;}
.proof .stage.err{background:var(--error-soft); color:var(--ink);}
.proof-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.ladder-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:12px;}
.qed{display:none; text-align:center; padding:26px 18px;}
.qed.show{display:block}
.qed .big{font-family:"Newsreader",serif; font-style:italic; font-weight:600; font-size:2rem; color:var(--accent-ink);}
.qed p{color:var(--muted); font-size:.9rem;}
.qed-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}

/* pencil marks */
.cell .marks{position:absolute; inset:1px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); pointer-events:none;}
.cell .marks span{display:flex; align-items:center; justify-content:center; font-size:clamp(.45rem,1.25vw,.68rem); font-weight:400; color:var(--muted); line-height:1;}
footer{margin-top:34px; color:var(--muted); font-size:.8rem; max-width:70ch; line-height:1.5;}
.linkish{background:none; border:none; color:var(--accent-ink); font:inherit; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px;}

/* onboarding modal */
.modal-scrim{position:fixed; inset:0; background:color-mix(in srgb, #000 55%, transparent); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:16px; max-width:440px; width:100%; padding:28px 26px 22px; box-shadow:0 24px 60px rgba(0,0,0,.35);}
.ob-slide{display:flex; flex-direction:column;}
.ob-illo{width:120px; height:120px; object-fit:contain; align-self:center; margin-bottom:6px;}
.ob-eyebrow{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent-ink); font-weight:600; margin-bottom:6px;}
.modal h2{font-family:"Newsreader",serif; font-style:italic; font-weight:600; font-size:1.6rem; margin:0 0 10px; outline:none;}
.modal p{color:var(--muted); font-size:.95rem; line-height:1.6; margin:0;}
.modal p strong{color:var(--ink);}
.modal p em{color:var(--accent-ink); font-style:italic;}
/* technique info dots + demo modal */
.info-dot{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:6px;
  border-radius:50%; border:1px solid var(--accent); color:var(--accent-ink); background:var(--accent-soft);
  font:italic 700 .6rem Georgia,serif; cursor:pointer; vertical-align:1px; padding:0; line-height:1;}
.info-dot:hover{background:var(--accent); color:var(--bg);}
.info-dot:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.demo-modal{max-width:430px;}
.demo-plain{margin-bottom:2px !important;}
.demo-grid{display:grid; grid-template-columns:repeat(9,1fr); aspect-ratio:1; width:100%; margin:14px 0 4px;
  border:2px solid var(--line-strong); border-radius:4px; overflow:hidden; background:var(--surface);}
.d-cell{position:relative; display:flex; align-items:center; justify-content:center;
  font-family:"Spline Sans Mono",monospace; font-size:.95rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.demo-grid .d-cell:nth-child(9n){border-right:none}
.demo-grid .d-cell:nth-child(n+73){border-bottom:none}
.d-cell.d-br{border-right:1.6px solid var(--line-strong)}
.d-cell.d-bb{border-bottom:1.6px solid var(--line-strong)}
.d-given{font-weight:600; color:var(--ink);}
.d-place{color:var(--amber-ink); background:var(--amber-soft); font-weight:700; box-shadow:inset 0 0 0 1.5px var(--amber);}
.d-ev{background:var(--accent-soft); box-shadow:inset 0 0 0 1.5px var(--accent);}
.d-vic{background:var(--amber-soft); box-shadow:inset 0 0 0 1.5px var(--amber);}
.d-marks{position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);}
.d-marks span{display:flex; align-items:center; justify-content:center; font-size:.4rem; color:var(--muted); line-height:1;}
.d-marks .d-cut{color:var(--error); text-decoration:line-through; font-weight:700; font-size:.48rem;}
.d-marks .d-key{color:var(--accent-ink); font-weight:700; font-size:.48rem;}
.demo-why{font-size:.88rem !important;}
.demo-actions{margin-top:14px;}
.tech-link{border-bottom:1px dashed var(--accent); cursor:pointer;}

.ob-dots{display:flex; gap:7px; justify-content:center; margin:22px 0 16px;}
.ob-dot{width:8px; height:8px; border-radius:50%; background:var(--line-strong); opacity:.4;}
.ob-dot.on{background:var(--accent); opacity:1;}
.ob-actions{display:flex; justify-content:space-between; gap:10px;}
.ob-actions .btn{min-width:96px;}
@media(prefers-reduced-motion:no-preference){ .modal{animation:obIn .22s ease;} }
@keyframes obIn{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}

/* stats */
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.stat{background:var(--surface2); border-radius:8px; padding:10px 4px; text-align:center;}
.stat-n{font-family:"Spline Sans Mono",monospace; font-variant-numeric:tabular-nums; font-size:1.3rem; font-weight:600; color:var(--accent-ink);}
.stat-l{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:2px;}
.tech-met{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); font-size:.82rem; color:var(--muted);}
.tech-met .tm-count{font-family:"Spline Sans Mono",monospace; font-variant-numeric:tabular-nums; color:var(--accent-ink); font-weight:600;}
.tech-met strong{color:var(--ink); font-weight:600;}

/* touch ergonomics */
.btn, .pad button, .seg button, .cell, .nyt-card{touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.pad button{min-height:44px;}
@media(max-width:600px){
  body{padding:0 10px calc(24px + env(safe-area-inset-bottom));}
  header{padding-top:18px;}
  h1{font-size:1.7rem;}
  .pad{gap:5px; grid-template-columns:repeat(5,1fr);}
  .pad button{min-height:48px; font-size:1.25rem;}
  .board-actions .btn{padding:12px 16px;}
}

/* fairness checker */
.crumbs{margin:4px 0 18px; font-size:.85rem;}
.crumbs a, .header-links a{color:var(--accent-ink); text-decoration:none; font-weight:600;}
.crumbs a:hover, .header-links a:hover{text-decoration:underline;}
.header-links{font-size:.85rem; margin-left:auto; display:flex; align-items:center; gap:14px;}
.theme-toggle{background:var(--surface); border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:1rem; line-height:1; padding:6px 9px;}
.theme-toggle:hover{border-color:var(--accent);}
.theme-toggle:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.install-btn{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);}
.checker-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
@media(max-width:860px){ .checker-main{grid-template-columns:1fr;} }
.checker-main .col{display:flex; flex-direction:column; gap:18px; min-width:0;}
.auto-badge, .premium-badge{font-family:"Instrument Sans",sans-serif; font-style:normal; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; border-radius:4px; padding:2px 7px; vertical-align:2px;}
.auto-badge{color:var(--accent-ink); background:var(--accent-soft);}
.premium-badge{color:var(--amber-ink); background:var(--amber-soft);}
textarea{width:100%; resize:vertical; background:var(--surface2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-family:"Spline Sans Mono",monospace; font-size:.85rem; line-height:1.5;}
textarea:focus-visible{outline:2px solid var(--focus); outline-offset:1px;}
.mono{font-family:"Spline Sans Mono",monospace; font-size:.92em;}
.nyt-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
@media(max-width:480px){ .nyt-cards{grid-template-columns:1fr;} }
.nyt-card{border:1px solid var(--line); border-radius:8px; background:var(--surface2); padding:12px 10px; text-align:center; cursor:pointer; font-family:inherit; color:var(--ink); display:flex; flex-direction:column; gap:4px;}
.nyt-card:hover{border-color:var(--line-strong);}
.nyt-card:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.nyt-card .nyt-tier{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);}
.nyt-card .nyt-verdict{font-family:"Newsreader",serif; font-style:italic; font-weight:600; font-size:1.25rem;}
.nyt-card.good .nyt-verdict{color:var(--accent-ink);}
.nyt-card.bad .nyt-verdict{color:var(--error);}
.nyt-card .nyt-detail{font-size:.74rem; color:var(--muted);}
.verdict-stamp{font-family:"Newsreader",serif; font-style:italic; font-weight:600; font-size:1.3rem; margin-bottom:8px;}
.verdict-stamp.good{color:var(--accent-ink);}
.verdict-stamp.bad{color:var(--error);}
.verdict-body{font-size:.9rem; line-height:1.55; color:var(--ink); margin-bottom:12px;}
.tier-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.tier-table td{padding:6px 8px 6px 0; border-top:1px dashed var(--line); color:var(--muted); vertical-align:top;}
.tier-table td:first-child{width:1.4em; font-weight:700;}
.tier-table tr.ok td:first-child{color:var(--accent);}
.tier-table tr.fail td:first-child{color:var(--error);}
.tier-table tr.ok td:nth-child(2){color:var(--ink); font-weight:600;}