:root{--ink: #0a0a0a;--paper: #ffffff;--sans: "Futura", "Avenir Next", "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}body:not(.touch) .touch-only{display:none}body.touch .keys{display:none}.sketch{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.sketch-frame{opacity:0;animation:boil .375s steps(1,end) infinite}.sketch-frame.f0{animation-delay:0s}.sketch-frame.f1{animation-delay:.125s}.sketch-frame.f2{animation-delay:.25s}@keyframes boil{0%,33.32%{opacity:1}33.33%,to{opacity:0}}#hud{position:fixed;top:34px;left:38px;display:flex;flex-direction:column;gap:26px;pointer-events:none;user-select:none}#hud:before,#hints:before{content:"";position:absolute;z-index:-1;inset:-60px -140px -50px -80px;background:radial-gradient(72% 72% at 24% 32%,#fffffff7 55%,#fff0)}#hints:before{inset:-30px -80px;background:radial-gradient(60% 90% at 50% 50%,#fffffff0 40%,#fff0)}.stat .row{display:flex;align-items:baseline;gap:8px}.num{font-size:72px;line-height:.82;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.num.sm{font-size:34px}.of{font-size:19px;letter-spacing:.04em;opacity:.45}.stat .rule{position:relative;height:9px;width:132px;margin:9px 0 5px}.stat.tight .rule{display:none}.label{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.62}.stat.tight .label{margin-top:4px}.num.bump{animation:bump .24s ease-out}@keyframes bump{0%{transform:translateY(3px) scale(.94)}60%{transform:translateY(-1px) scale(1.02)}to{transform:none}}#hints{position:fixed;bottom:30px;left:50%;transform:translate(-50%);display:flex;gap:26px;align-items:center;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.72;pointer-events:none;user-select:none;white-space:nowrap}.hint{display:inline-flex;align-items:center;gap:7px}.key{position:relative;display:inline-grid;place-items:center;min-width:25px;height:25px;padding:0 7px;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}.key.wide{min-width:48px}.card{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .5s ease}.card.hidden{opacity:0;visibility:hidden}.card-inner{position:relative;padding:46px 62px 40px;text-align:center;background:#fffffff5}.card h1{margin:0;font-size:58px;font-weight:500;letter-spacing:.02em}.card p{margin:16px auto 0;max-width:30ch;font-size:13.5px;line-height:1.85;letter-spacing:.09em;text-transform:uppercase;opacity:.66}.press{margin-top:30px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;animation:blink 1.9s steps(1,end) infinite}.press b{font-weight:500}@keyframes blink{0%,62%{opacity:.85}63%,to{opacity:.2}}#toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:15px;letter-spacing:.3em;text-transform:uppercase;opacity:0;transition:opacity .25s ease;pointer-events:none}#toast.show{opacity:.9}#stick{position:fixed;width:0;height:0;pointer-events:none;opacity:.75;transition:opacity .2s ease}#stick.hidden{opacity:0}.stick-base{position:absolute;left:50%;top:50%;width:124px;height:124px;transform:translate(-50%,-50%)}.stick-knob{position:absolute;left:50%;top:50%;width:26px;height:26px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%)}#pads{position:fixed;right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px));display:none;flex-direction:column-reverse;align-items:center;gap:16px}body.touch #pads{display:flex}.pad{position:relative;display:grid;place-items:center;width:92px;height:92px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;transition:transform .12s ease}.pad.small{width:60px;height:60px;font-size:9px;opacity:.6}.pad.hit{transform:scale(.9)}#panel{position:fixed;top:34px;right:38px;width:186px;padding:16px 18px 18px;display:flex;flex-direction:column;gap:11px;background:#ffffffeb;transition:opacity .25s ease}#panel.hidden{opacity:0;visibility:hidden}.panel-title{font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.5;margin-bottom:2px}#panel label{display:grid;grid-template-columns:62px 1fr;align-items:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}#panel input[type=range]{-webkit-appearance:none;appearance:none;height:14px;background:transparent;cursor:pointer}#panel input[type=range]::-webkit-slider-runnable-track{height:1.5px;background:var(--ink);opacity:.35}#panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--ink)}@media(max-width:760px),(max-height:560px){#hud{top:calc(18px + env(safe-area-inset-top,0px));left:calc(20px + env(safe-area-inset-left,0px));gap:14px}.num{font-size:44px}.num.sm{font-size:24px}.of{font-size:14px}.stat .rule{width:88px;margin:6px 0 3px}.label{font-size:9.5px;letter-spacing:.2em}#hints{bottom:calc(14px + env(safe-area-inset-bottom,0px));gap:16px;font-size:9.5px;letter-spacing:.16em;flex-wrap:wrap;justify-content:center;max-width:78vw}.card-inner{padding:32px 28px 26px}.card h1{font-size:38px}.card p{font-size:11px;line-height:1.7;letter-spacing:.07em}.press{margin-top:22px}#panel{display:none}}
