:root{--ink: #04070a;--ink-2: #0a1118;--line: rgba(160, 210, 230, .14);--line-strong: rgba(170, 225, 245, .32);--text: #e9f3f6;--muted: rgba(205, 225, 232, .58);--faint: rgba(205, 225, 232, .34);--ice: #78dcff;--amber: #ffb35c;--cell: 30px;--spring: cubic-bezier(.34, 1.56, .64, 1);--ease: cubic-bezier(.22, 1, .36, 1);--serif: "Instrument Serif", "Times New Roman", serif;--sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;color-scheme:dark}*{box-sizing:border-box;margin:0}html,body{height:100%;background:var(--ink);overflow:hidden;overscroll-behavior:none}body{font-family:var(--sans);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}.app{position:fixed;inset:0;display:grid;place-items:center}.backdrop{position:absolute;inset:-10%;background:radial-gradient(60% 45% at 50% 30%,rgba(40,120,150,.18),transparent 70%),radial-gradient(120% 90% at 50% 50%,var(--ink-2),var(--ink) 70%)}.stage{position:relative;display:grid;grid-template-columns:auto auto auto;align-items:start;gap:calc(var(--cell) * .9);transition:opacity .5s var(--ease),transform .7s var(--spring),filter .5s var(--ease)}.app[data-screen=intro] .stage{opacity:.55;transform:scale(.97)}.app[data-screen=end] .stage{opacity:.3;transform:scale(.97);filter:saturate(.7)}.app[data-screen=paused] .stage{opacity:.45}.column{display:flex;flex-direction:column;align-items:center}.well-frame{position:relative}.well{display:block}.gauge{position:absolute;top:calc(var(--cell) * .9);bottom:calc(var(--cell) * .6);right:calc(var(--cell) * -.2);width:4px;border-radius:4px;background:var(--line);overflow:hidden}.gauge i{position:absolute;left:0;right:0;bottom:0;height:100%;transform-origin:bottom;transform:scaleY(0);background:linear-gradient(to top,var(--ice),#f5d38a 60%,var(--amber));box-shadow:0 0 10px #ffb35c8c;transition:transform .25s linear}.sediment-frame{margin-top:calc(var(--cell) * -.42);width:calc(var(--cell) * 10);height:calc(var(--cell) * 1.55);border-radius:0 0 calc(var(--cell) * .4) calc(var(--cell) * .4);overflow:hidden;background:linear-gradient(to bottom,#141e26e6,#080c10f2);box-shadow:inset 0 1px 0 var(--line-strong),0 calc(var(--cell) * .4) calc(var(--cell)) #00000073}.sediment{display:block;width:100%;height:100%}.panel{display:flex;flex-direction:column;gap:calc(var(--cell) * .8);width:calc(var(--cell) * 4.6);padding-top:calc(var(--cell) * .7)}.slot{display:flex;flex-direction:column;gap:10px}.label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:500}.preview{width:100%;aspect-ratio:168 / 96;border-radius:14px;background:linear-gradient(160deg,#78c8e612,#78c8e604);box-shadow:inset 0 0 0 1px var(--line)}.queue{display:flex;flex-direction:column;gap:10px}.preview.small{width:78%;opacity:.75}.stats{display:grid;gap:14px}.stats div{display:flex;flex-direction:column;gap:2px}.stats dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:500}.stats dd{font-family:var(--sans);font-weight:500;font-size:calc(var(--cell) * .9);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.stats div{position:relative}.float-bonus{position:absolute;left:0;top:-4px;pointer-events:none;font-size:13px;font-weight:600;color:#e9f8ff;padding:2px 8px;border-radius:999px;white-space:nowrap;background:radial-gradient(circle at 30% 30%,#ffffff59,#78dcff1f 70%);box-shadow:inset 0 0 0 1px #c8f0ff8c}.stats dd.bump{animation:bump .45s var(--spring)}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.14);color:#fff}to{transform:scale(1)}}.icon-button{position:absolute;top:max(14px,env(safe-area-inset-top));width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:#96d2e60f;box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s var(--spring),color .2s,background .2s}.icon-button:hover{color:var(--text);background:#96d2e61f}.icon-button:active{transform:scale(.88)}.icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mute{right:max(16px,env(safe-area-inset-right))}.pause{right:calc(max(16px,env(safe-area-inset-right)) + 50px)}.mute .off,.mute.muted .on{display:none}.mute.muted .off{display:block}.app[data-screen=intro] .pause,.app[data-screen=end] .pause{opacity:0;pointer-events:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}.overlay>*{transform:translateY(18px) scale(.98);transition:transform .7s var(--spring)}.app[data-screen=intro] .intro,.app[data-screen=paused] .paused,.app[data-screen=end] .end{opacity:1;pointer-events:auto}.app[data-screen=intro] .intro>*,.app[data-screen=paused] .paused>*,.app[data-screen=end] .end>*{transform:none}.intro-inner{text-align:center;max-width:30rem;display:flex;flex-direction:column;align-items:center;gap:18px}.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ice);opacity:.85}h1{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(64px,16vw,132px);line-height:.9;letter-spacing:-.02em}h2{font-family:var(--serif);font-weight:400;font-size:56px}.lede{font-size:16px;line-height:1.6;color:var(--muted)}.hint{font-size:12px;color:var(--faint);line-height:1.9;max-width:24rem}kbd{font-family:var(--sans);font-size:11px;padding:2px 7px;border-radius:6px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong);background:#96d2e60d;white-space:nowrap}.primary{margin-top:6px;padding:14px 34px;border-radius:999px;font-weight:500;font-size:15px;color:#021016;background:linear-gradient(180deg,#b6ecff,#6fd2f5);box-shadow:0 10px 30px #5ac8f047,inset 0 1px #ffffffb3;transition:transform .4s var(--spring),box-shadow .3s}.primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px #5ac8f061,inset 0 1px #ffffffb3}.primary:active{transform:scale(.94)}.ghost{padding:13px 22px;border-radius:999px;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong);transition:transform .4s var(--spring),background .2s}.ghost:hover{background:#96d2e614}.ghost:active{transform:scale(.94)}.touch-only{display:none}@media(pointer:coarse){.touch-only{display:block}.pointer-only{display:none}}.end-inner{display:flex;gap:clamp(24px,6vw,72px);align-items:center}.core{display:flex;flex-direction:column;align-items:center;gap:10px}.core canvas{width:auto;height:min(62vh,560px);border-radius:18px;box-shadow:0 30px 60px #0000008c,inset 0 0 0 1px var(--line)}.core figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}.end-text{display:flex;flex-direction:column;gap:18px}.big-score{font-family:var(--serif);font-size:clamp(64px,12vw,120px);line-height:.9;font-variant-numeric:tabular-nums}.end-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px}.end-stats div{display:flex;flex-direction:column;gap:3px}.end-stats dd{font-family:var(--serif);font-size:28px;line-height:1;font-variant-numeric:tabular-nums}.end-stats dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}.record{font-size:13px;color:var(--muted);margin-top:-8px}.record.new{color:var(--amber);font-weight:500;letter-spacing:.04em}.ghost.quiet{box-shadow:none;color:var(--muted)}.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.actions .primary{margin-top:0}.fallback{position:absolute;bottom:24px;color:var(--muted);font-size:14px;padding:0 24px;text-align:center}@media(max-aspect-ratio:4/5){.stage{grid-template-columns:1fr 1fr;grid-template-areas:"left right" "col col";gap:10px calc(var(--cell) * .5);padding-top:max(56px,calc(env(safe-area-inset-top) + 44px))}.panel-left{grid-area:left}.panel-right{grid-area:right}.column{grid-area:col}.panel{width:auto;padding-top:0;flex-direction:row;align-items:center;gap:12px}.panel-left .slot{width:calc(var(--cell) * 2.7);gap:4px}.panel-right{justify-content:flex-end}.panel-right .slot{gap:4px}.queue{flex-direction:row;align-items:center;gap:6px}.queue .preview{width:calc(var(--cell) * 2.2)}.queue .preview.small{width:calc(var(--cell) * 1.15)}.stats{gap:6px}.stats div{flex-direction:row;align-items:baseline;gap:6px}.stats dd{font-size:calc(var(--cell) * .7)}.stats div:nth-child(3){display:none}.label{font-size:10px;letter-spacing:.12em}.icon-button{top:max(10px,env(safe-area-inset-top));width:36px;height:36px}.end-inner{flex-direction:column;gap:18px}.core canvas{height:min(38vh,32svh)}.end-stats{gap:12px 18px}.end-stats dd{font-size:22px}.stats div:first-child{flex-direction:column;align-items:flex-start;gap:0}.end-text{align-items:center;text-align:center}}
