:root{color-scheme:dark;--bg: #08080c;--fg: #ededf0;--dim: #8a8a96;--line: #23232c}*{box-sizing:border-box}body{margin:0;padding:24px clamp(16px,4vw,48px) 64px;background:var(--bg);color:var(--fg);font:14px/1.5 ui-monospace,SF Mono,Menlo,monospace}h1{font-size:15px;margin:0 0 8px;letter-spacing:.02em}header p{max-width:68ch;margin:0 0 6px;color:var(--dim)}header p b{color:var(--fg);font-weight:600}.sub{font-size:12px}.panel{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:18px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px}label{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:12px}input[type=range]{width:130px}button{padding:7px 12px;font:inherit;font-size:12px;font-weight:600;background:#17171d;color:inherit;border:1px solid var(--line);border-radius:6px;cursor:pointer}button:hover{border-color:#3a3a44}button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:transparent}.hint{color:var(--dim);font-size:11px;white-space:pre;min-width:30ch}#stage{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;position:relative;z-index:2}.cell{border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}.cell small{color:var(--dim);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.value{position:relative}.value .paint{position:absolute;inset:-6px 0;width:100%;height:calc(100% + 12px);pointer-events:none}#stage.offscreen{position:fixed;left:-30000px;top:0;width:auto;height:auto}.value{font-size:34px;font-weight:650;line-height:1.15;font-variant-numeric:tabular-nums;color:transparent;white-space:pre}.fail{color:#f77}