:root{
  --bg:#0d0d0f;--bg2:#141417;--bg3:#1b1b20;--line:#26262c;
  --text:#eceae5;--muted:#9d9a94;--faint:#8a877f;
  --accent:#89a9ff;--ok:#7ddba4;--warn:#ffb27a;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;padding:clamp(1.25rem,4vw,3rem);max-width:1000px;margin-inline:auto;
  background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased}

.kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3.2rem);
  letter-spacing:-.028em;line-height:1.04;margin:.4rem 0 .7rem}
.sub{color:var(--muted);max-width:64ch;margin:0 0 1.5rem;text-wrap:pretty}

.status{font-size:.88rem;color:var(--muted);margin:0 0 1.5rem;min-height:1.5em}
.status[data-kind=ok]{color:var(--ok)}
.status[data-kind=warn]{color:var(--warn)}

.stage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
@media(max-width:720px){.stage{grid-template-columns:1fr}}

#pad{width:280px;height:280px;max-width:100%;border:1px solid var(--line);border-radius:10px;
  background:#000;touch-action:none;cursor:crosshair;display:block}
.pad-row{display:flex;align-items:flex-end;gap:1rem;margin-top:.85rem}
.preview-wrap{display:flex;flex-direction:column;gap:.35rem}
.tiny{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.preview{width:84px;height:84px;border:1px solid var(--line);border-radius:6px;background:#000;overflow:hidden}

button{font:inherit;font-size:.85rem;font-weight:500;padding:.5rem 1.1rem;border-radius:6px;
  border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;
  transition:border-color .16s,color .16s}
button:hover{border-color:var(--accent);color:var(--accent)}
button:focus-visible,#pad:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.guess-box{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.25rem}
#guess{font-family:var(--serif);font-weight:400;font-size:5rem;line-height:1;
  font-variant-numeric:tabular-nums}
#confidence{color:var(--muted);font-size:.9rem}

.bars{display:grid;gap:.3rem}
.bar{display:grid;grid-template-columns:1.25rem minmax(0,1fr) 2.25rem;gap:.6rem;align-items:center;
  font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.bar__t{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.bar__t i{display:block;height:100%;background:var(--line);border-radius:3px;
  transition:width .22s ease}
.bar--best{color:var(--text)}
.bar--best .bar__t i{background:var(--accent)}
.bar__p{text-align:right;font-variant-numeric:tabular-nums}

.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:2rem}
.metrics div{background:var(--bg2);padding:1rem}
.metrics b{display:block;font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1.1;
  font-variant-numeric:tabular-nums}
.metrics span{display:block;margin-top:.3rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}