:root{--ground:oklch(22% .035 265);--ground-deep:oklch(14% .03 268);--panel:oklch(17% .028 267);--hairline:oklch(70% .03 265/.12);--ink:oklch(97% .005 265);--ink-soft:oklch(64% .025 265);--readout:oklch(81% .15 76);--accent-perfect:oklch(72% .15 240);--accent-best:oklch(70% .19 350);--bokeh-violet:oklch(46% .15 300/.26);--bokeh-indigo:oklch(44% .13 268/.22);--bokeh-blue:oklch(50% .11 232/.16);--glow:oklch(10% .03 268/.55);--focus:oklch(78% .14 240);--ramp-1-from:oklch(66% .2 296);--ramp-1-to:oklch(60% .19 266);--ramp-2-from:oklch(68% .22 350);--ramp-2-to:oklch(62% .2 316);--ramp-3-from:oklch(70% .16 246);--ramp-3-to:oklch(75% .14 210);--ramp-4-from:oklch(79% .16 76);--ramp-4-to:oklch(83% .15 92);--ramp-5-from:oklch(68% .16 160);--ramp-5-to:oklch(64% .15 148);--block-h:1.75rem;--radius:6px;--lift:0;--gutter:1rem;--column:34rem}*{box-sizing:border-box}body{background:linear-gradient(var(--ground), var(--ground-deep));min-height:100dvh;color:var(--ink);flex-direction:column;align-items:center;margin:0;padding:0;font-family:system-ui,sans-serif;display:flex;position:relative;overflow-x:hidden}body:before{z-index:-1;background:radial-gradient(28rem 28rem at 12% 8%, var(--bokeh-violet), transparent 70%), radial-gradient(34rem 34rem at 88% 22%, var(--bokeh-indigo), transparent 70%), radial-gradient(30rem 30rem at 20% 92%, var(--bokeh-blue), transparent 70%);content:"";pointer-events:none;position:fixed;inset:0}.skip-link{border-radius:var(--radius);background:var(--panel);min-height:44px;color:var(--ink);align-items:center;padding:.5rem 1rem;display:flex;position:absolute;left:-100vw}.skip-link:focus{position:static}main{width:min(var(--column), 100%);padding:0 var(--gutter);flex-direction:column;flex:1;align-items:center;display:flex;position:relative}.hud{width:100%;padding-top:var(--gutter);justify-content:space-between;align-items:center;display:flex}h1{color:var(--ink-soft);letter-spacing:.3em;text-transform:uppercase;margin:0;font-size:.7rem;font-weight:700}.restart{border:1px solid var(--hairline);background:var(--panel);width:44px;height:44px;color:var(--ink-soft);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:color .12s ease-out,border-color .12s ease-out;display:flex}.restart:hover{border-color:var(--focus);color:var(--ink)}.restart:focus-visible{border-color:var(--focus);color:var(--ink);outline:2px solid var(--focus);outline-offset:2px}.restart svg{stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round}.readout{color:var(--readout);font-variant-numeric:tabular-nums;letter-spacing:.02em;margin:.35rem 0 .6rem;font-size:3.25rem;font-weight:800;line-height:1}.field{cursor:pointer;touch-action:manipulation;flex:1;width:100%;min-height:16rem;position:relative;overflow:hidden}.field:focus-visible{border-radius:var(--radius);outline:2px solid var(--focus);outline-offset:-2px}.tower{transform:translateY(calc(var(--lift) * var(--block-h)));transition:transform .14s ease-out;position:absolute;inset:0}.block,.slider{bottom:calc(var(--i,0) * var(--block-h));height:var(--block-h);border-radius:var(--radius);box-shadow:0 2px 6px var(--glow);position:absolute}.block:nth-child(5n+1){background:linear-gradient(100deg, var(--ramp-1-from), var(--ramp-1-to))}.block:nth-child(5n+2){background:linear-gradient(100deg, var(--ramp-2-from), var(--ramp-2-to))}.block:nth-child(5n+3){background:linear-gradient(100deg, var(--ramp-3-from), var(--ramp-3-to))}.block:nth-child(5n+4){background:linear-gradient(100deg, var(--ramp-4-from), var(--ramp-4-to))}.block:nth-child(5n+5){background:linear-gradient(100deg, var(--ramp-5-from), var(--ramp-5-to))}.slider{background:linear-gradient(100deg, var(--ramp-3-from), var(--ramp-3-to));box-shadow:0 0 0 1px var(--ink), 0 4px 14px var(--glow);transform:translateY(calc(var(--lift) * var(--block-h)));transition:transform .14s ease-out}[data-status=over] .slider{opacity:.3}.stats{width:100%;padding:.75rem 0 var(--gutter);gap:.6rem;display:flex}.stat{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--panel);flex-direction:column;flex:1;gap:.15rem;margin:0;padding:.6rem .75rem;display:flex}.stat-label{color:var(--ink-soft);letter-spacing:.14em;text-transform:uppercase;font-size:.65rem;font-weight:600}.stat-value{font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:800;line-height:1}.stat-perfect .stat-value{color:var(--accent-perfect)}.stat-best .stat-value{color:var(--accent-best)}.stat:has([data-best][hidden]){opacity:.35}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}