:root{--color-ink:oklch(90% .02 90);--color-ink-dim:oklch(68% .025 90);--color-ink-faint:oklch(48% .02 90);--color-paper:oklch(14% .015 120);--color-paper-veil:oklch(10% .012 120/.72);--color-rust:oklch(52% .13 40);--color-warn:oklch(66% .16 50);--color-focus:oklch(80% .06 90);--font-display:"Baskerville", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--text-xs:.68rem;--text-sm:.78rem;--text-md:.92rem;--text-display:clamp(3.4rem, 9vw, 7.5rem);--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.75rem;--space-xl:3rem;--ease-out:cubic-bezier(.2, .7, .2, 1);--dur-fast:.12s;--dur-slow:.4s;--rule:1px solid oklch(60% .02 90/.35);--radius:2px}html,body{background:var(--color-paper);height:100%;margin:0;overflow:hidden}body{font:400 var(--text-md)/1.45 var(--font-mono);color:var(--color-ink);-webkit-font-smoothing:antialiased}#view{width:100vw;height:100vh;image-rendering:pixelated;cursor:crosshair;display:block}#ui{pointer-events:none;position:fixed;inset:0}#ui section,#ui .hud{position:absolute;inset:0}#ui [hidden]{display:none}button,input{font:inherit}.kicker{margin:0 0 var(--space-sm);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink-dim)}.rust{background:var(--color-rust);vertical-align:.05em;width:.5em;height:.5em;margin-right:.7em;display:inline-block}.btn{pointer-events:auto;cursor:pointer;border:1px solid var(--color-ink-dim);border-radius:var(--radius);background:var(--color-ink);color:var(--color-paper);letter-spacing:.08em;text-transform:uppercase;font-size:var(--text-sm);transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);padding:.55em 1.2em}.btn:hover{background:oklch(96% .02 90)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.btn.ghost{color:var(--color-ink);background:0 0}.btn.ghost:hover{background:oklch(30% .02 120)}.menu{background:linear-gradient(90deg, var(--color-paper-veil) 0%, oklch(10% .012 120/.35) 55%, transparent 100%);align-items:flex-end;padding:clamp(1rem,5vw,4rem);display:flex}.menu-block{max-width:34rem}.title{margin:0 0 var(--space-md);font-family:var(--font-display);font-style:normal;font-weight:600;font-size:var(--text-display);letter-spacing:-.01em;text-transform:uppercase;transform-origin:0 100%;color:var(--color-ink);line-height:.86;transform:scaleX(.78)}.story{margin:0 0 var(--space-lg);max-width:30rem;color:var(--color-ink-dim);font-size:var(--text-sm)}.actions{align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.hint{font-size:var(--text-xs);color:var(--color-ink-faint);letter-spacing:.04em;max-width:26rem}.foot{margin:var(--space-lg) 0 0;font-size:var(--text-xs);color:var(--color-ink-faint)}.foot.loading{margin-top:var(--space-sm);color:var(--color-warn);min-height:1.2em}.btn:disabled{opacity:.5;cursor:default}.hud{padding:var(--space-md) var(--space-lg);font-size:var(--text-sm);text-shadow:0 1px 2px oklch(0% 0 0/.8)}.hud-top,.hud-bottom{left:var(--space-lg);right:var(--space-lg);justify-content:space-between;align-items:flex-end;gap:var(--space-md);display:flex;position:absolute}.hud-top{top:var(--space-md)}.hud-bottom{bottom:var(--space-md)}.gauge{align-items:baseline;gap:.6em;display:inline-flex}.gauge .k{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-ink-dim)}.gauge .v{font-variant-numeric:tabular-nums}.bar{border:1px solid var(--color-ink-dim);vertical-align:middle;width:7rem;height:5px;display:inline-block}.bar i{background:var(--color-ink);transform-origin:0;height:100%;transition:transform var(--dur-slow) linear;display:block}.bar.low i{background:var(--color-warn)}.prompt{color:var(--color-ink);letter-spacing:.06em;min-height:1.4em}.subtitle{text-align:center;max-width:44rem;color:var(--color-ink);opacity:0;transition:opacity var(--dur-slow) var(--ease-out);background:oklch(8% .01 120/.55);padding:.3em .8em;position:absolute;bottom:14%;left:50%;transform:translate(-50%)}.subtitle.on{opacity:1}.note{font-size:var(--text-xs);color:var(--color-warn);position:absolute;top:3.2rem;left:50%;transform:translate(-50%)}.pause,.end{background:var(--color-paper-veil);place-items:center;display:grid}.card{pointer-events:auto;width:min(30rem,92vw);padding:var(--space-lg);border:var(--rule);background:oklch(12% .012 120/.92)}.controls{margin:0 0 var(--space-lg);font-size:var(--text-sm);grid-template-columns:max-content 1fr;gap:.25em 1.2em;display:grid}.controls dt{color:var(--color-ink)}.controls dd{color:var(--color-ink-dim);margin:0}.row{align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.vol{font-size:var(--text-xs);color:var(--color-ink-dim);align-items:center;gap:.5em;display:inline-flex}.vol input{width:6rem;accent-color:var(--color-rust)}.end-title{margin:0 0 var(--space-sm);font-family:var(--font-display);letter-spacing:-.01em;font-size:2.2rem;font-style:normal;font-weight:600}.end-body{margin:0 0 var(--space-lg);color:var(--color-ink-dim);font-size:var(--text-sm)}.slate{background:oklch(8% .01 120/.5);place-items:center;display:grid}.slate-board{padding:var(--space-md);border:var(--rule);background:oklch(20% .02 100);box-shadow:0 20px 60px oklch(0% 0 0/.6)}.slate-board canvas{image-rendering:auto;max-width:90vw;height:auto;display:block}@media (width<=640px){.menu{background:var(--color-paper-veil);align-items:center}.hud-top,.hud-bottom{left:var(--space-md);right:var(--space-md)}.bar{width:4rem}}@media (prefers-reduced-motion:reduce){.btn,.bar i,.subtitle{transition:none}}.calibration{z-index:20;color:#d6d3c0;pointer-events:auto;background:#101613f5;border:1px solid #545b4d;width:min(355px,100vw - 40px);padding:20px;font:12px/1.5 ui-monospace,monospace;position:fixed;top:20px;bottom:20px;right:20px;overflow-y:auto}.calibration[hidden]{display:none}.calibration-title{justify-content:space-between;align-items:center;gap:12px;display:flex}.calibration h2{margin:0;font:18px Georgia,serif}.calibration p{color:#969e8d}.calibration button{color:inherit;cursor:pointer;font:inherit;background:#29332b;border:1px solid #53604e;padding:6px 8px}.calibration-presets{flex-wrap:wrap;gap:6px;margin:15px 0;display:flex}.calibration fieldset{border:0;border-top:1px solid #475140;margin:14px 0 0;padding:12px 0}.calibration legend{color:#bec7a9;padding-right:10px}.calibration label{grid-template-columns:1fr auto;gap:4px;margin-bottom:12px;display:grid}.calibration input{accent-color:#a9b48e;grid-column:1/-1;width:100%}.calibration output{color:#96a784}