@font-face{font-family:Bodoni Moda;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/bodoni-moda-latin-400-normal-CIWtV3SY.woff2)format("woff2")}@font-face{font-family:Bodoni Moda;font-style:italic;font-weight:400;font-display:swap;src:url(/assets/bodoni-moda-latin-400-italic-DB-bun8K.woff2)format("woff2")}@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/hanken-grotesk-latin-400-normal-BG6hkEXj.woff2)format("woff2")}@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/hanken-grotesk-latin-600-normal-CIXX6EOa.woff2)format("woff2")}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--lacquer:#0e0b09;--lacquer-raised:#1a1612;--ivory:#f1e7d3;--ivory-press:#e2d5bb;--gilt:#d3aa5c;--parchment:#a39884;--moonlight:#8fb3c6;--pewter:#b8b2a6;--felt:#c97b6a;--hairline:#f1e7d324;--hairline-strong:#f1e7d347;--lamp:#a0622c33;--serif:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;--sans:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;--step--1:.8rem;--step-0:1rem;--step-1:1.25rem;--step-2:1.5625rem;--step-3:1.953rem;--step-4:2.441rem;--step-5:3.052rem;--step-6:3.815rem;--step-8:5.96rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--radius-key:3px 3px 10px 10px;--radius-panel:14px;--shadow-raised:0 18px 48px #0000008c, 0 2px 6px #0006;--lip:inset 0 -3px 0 #3c281429;--target:48px;--header:52px}*{box-sizing:border-box}html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(ellipse 70% 60% at 50% 62%, var(--lamp), transparent 70%), radial-gradient(ellipse at center, transparent 40%, #0009), var(--lacquer);color:var(--ivory);font:400 var(--step-0) / 1.45 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}.defs{position:absolute}#app{background:radial-gradient(ellipse 120% 70% at 50% 78%, var(--lamp), transparent 72%), var(--lacquer);width:100vw;height:100dvh;margin:0 auto;position:relative;overflow:hidden}@media (aspect-ratio>=2/3){body{place-items:center;display:grid}#app{width:calc((100dvh - 2 * var(--space-5)) * 9 / 19.5);height:calc(100dvh - 2 * var(--space-5));border-radius:22px;box-shadow:0 0 0 1px #f1e7d312,0 40px 120px #000000b3,0 0 160px #a0622c14}}h1,h2,h3{font-family:var(--serif);margin:0;font-weight:400;line-height:1.15}h2{font-size:var(--step-3);font-style:italic}h3{font-size:var(--step-1);color:var(--parchment);font-style:italic}p{margin:0}.hint{color:var(--parchment);font-size:.9375rem;line-height:1.5}.hint.small{font-size:var(--step--1)}.hint[hidden]{display:none}@media (hover:none) and (pointer:coarse){.keyboard-only{display:none}}.keys-hint{color:var(--ivory);letter-spacing:.08em}.screen{gap:var(--space-4);height:100%;padding:max(var(--space-5), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-right)) max(var(--space-5), env(safe-area-inset-bottom)) max(var(--space-5), env(safe-area-inset-left));flex-direction:column;display:flex;overflow-y:auto}.screen[hidden]{display:none}.bar{justify-content:space-between;align-items:center;gap:var(--space-4);min-height:var(--target);display:flex}.bar-actions{gap:var(--space-2);display:flex}.bar-actions button{padding-inline:var(--space-4)}.foot{gap:var(--space-3);text-align:center;justify-items:center;margin-top:auto;display:grid}.actions{justify-items:stretch;gap:var(--space-3);grid-auto-columns:1fr;grid-auto-flow:column;width:100%;display:grid}.actions button{padding-inline:var(--space-3)}.actions[hidden]{display:none}button{font:600 var(--step-0) / 1.2 var(--sans);color:var(--lacquer);background:var(--ivory);border-radius:var(--radius-key);box-shadow:var(--lip);min-height:var(--target);padding:var(--space-3) var(--space-5);cursor:pointer;touch-action:manipulation;border:1px solid #0000;transition:background-color .12s,transform 80ms}button:active:not(:disabled){background:var(--ivory-press);box-shadow:none;transform:translateY(1px)}button:disabled{opacity:.38;cursor:default}button.quiet{color:var(--ivory);border-color:var(--hairline-strong);box-shadow:none;background:0 0;font-weight:400}button.quiet:active:not(:disabled){background:#f1e7d314}button.danger{color:var(--felt)}button.danger:not(.quiet){background:var(--felt);color:var(--lacquer)}:focus-visible{outline:2px solid var(--gilt);outline-offset:3px}:focus:not(:focus-visible){outline:none}#title,#howto{cursor:pointer}#title{text-align:center;align-items:center}.title-mark{justify-items:center;gap:var(--space-3);margin-top:auto;animation:1.6s cubic-bezier(.2,.7,.2,1) both rise;display:grid}.fermata{width:4.5rem;height:2.55rem;fill:var(--gilt);margin-bottom:var(--space-1)}h1{font-size:var(--step-6);color:var(--gilt);letter-spacing:.01em;font-style:italic;line-height:1}.tagline{font-family:var(--serif);font-size:var(--step-1);color:var(--parchment)}.begin{font-size:var(--step-1);color:var(--ivory)}#title .foot{padding-bottom:var(--space-6);margin-top:auto;animation:1.6s cubic-bezier(.2,.7,.2,1) .5s both rise}@keyframes rise{0%{opacity:0;transform:translateY(6px)}}@media (prefers-reduced-motion:reduce){.title-mark,#title .foot{animation:none}}#pieces{margin:0;padding:0;list-style:none;display:grid}.piece{gap:var(--space-1);padding:var(--space-5) 0;border-top:1px solid var(--hairline);display:grid}.piece:last-child{border-bottom:1px solid var(--hairline)}.piece .composer,.credit .composer{font:italic var(--step-0) / 1.3 var(--serif);color:var(--parchment)}.piece .name{font:400 var(--step-2) / 1.15 var(--serif);color:var(--ivory);margin:0}.piece .opus{color:var(--parchment);font-size:.9375rem}.tiers{gap:var(--space-2);margin-top:var(--space-4);grid-template-columns:repeat(3,1fr);display:grid}.tiers button{padding:var(--space-3) var(--space-1) var(--space-2);color:var(--ivory);border:1px solid var(--hairline);white-space:nowrap;background:linear-gradient(#1d1814,#14110e);grid-template-rows:auto auto 1.75rem;align-content:start;justify-items:center;gap:2px;display:grid;box-shadow:inset 0 1px #f1e7d30d,inset 0 -3px #00000059}.tiers button:active:not(:disabled){background:#241e18}.tiers button small{font-size:var(--step--1);color:var(--parchment);font-weight:400}.tiers .best{color:var(--gilt);align-items:baseline;gap:.3em;display:flex}.tiers .best b{font:400 var(--step-2) / 1 var(--serif)}.tiers .best[data-grade]:not([data-grade=S]) b{color:var(--ivory)}.progress{background:var(--hairline);width:100%;height:2px;overflow:hidden}.progress[hidden]{display:none}#progress-bar{background:var(--gilt);width:0;height:100%;transition:width .2s}#list .foot{justify-items:stretch}#howto{text-align:center;align-items:center}#howto h2{margin-top:auto}.sketch{width:min(13rem,62%);box-shadow:0 0 0 1px var(--hairline);border-radius:6px}.sketch-note{fill:#f1e7d3}.sketch-label{fill:var(--parchment);font:italic 10px var(--serif);text-anchor:middle}.rules{gap:var(--space-2);text-align:left;max-width:21rem;margin:0;padding:0;list-style:none;display:grid}.rules b{color:var(--gilt);font:italic 400 1.0625rem var(--serif)}#play{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:none;background:var(--lacquer);position:relative;overflow:hidden}#field{touch-action:none;width:100%;height:100%;display:block}.pause{top:env(safe-area-inset-top);right:env(safe-area-inset-right);width:var(--header);height:var(--header);min-height:0;box-shadow:none;color:var(--parchment);fill:currentColor;background:0 0;border:none;place-items:center;padding:0;display:grid;position:absolute}.pause:active:not(:disabled){color:var(--ivory);background:0 0}.overlay{align-items:center;gap:var(--space-6);padding:var(--space-7) var(--space-5) max(var(--space-7), env(safe-area-inset-bottom));background:#0e0b09e6;flex-direction:column;display:flex;position:absolute;inset:0}.overlay[hidden]{display:none}.overlay h2{font-size:var(--step-4);margin-top:auto}.stack{gap:var(--space-3);width:min(18rem,100%);margin-top:auto;display:grid}#results{text-align:center;align-items:center}.results-main{justify-items:center;gap:var(--space-2);width:100%;margin-block:auto;display:grid}.result-piece{font:italic var(--step-1) / 1.3 var(--serif);color:var(--parchment)}.result-piece span{font:400 var(--step--1) var(--sans);margin-top:var(--space-1);display:block}.grade{font:400 clamp(6rem, 34vw, 9.3rem) / 1 var(--serif);color:var(--ivory);margin-top:var(--space-4)}.grade[data-grade=S]{color:var(--gilt)}.accuracy{font-size:var(--step-3);letter-spacing:-.01em;font-weight:600}.full-combo{font:italic var(--step-1) var(--serif);color:var(--gilt)}.full-combo[hidden]{display:none}.best-line{color:var(--parchment);font-size:.9375rem}.best-line.new{color:var(--gilt)}#counts{width:100%;margin:var(--space-5) 0 0;padding:var(--space-4) 0;border-block:1px solid var(--hairline);grid-template-columns:repeat(4,1fr);display:grid}#counts div{flex-direction:column-reverse;gap:2px;display:flex}#counts dt{font-size:var(--step--1);color:var(--parchment)}#counts dd{font-size:var(--step-2);margin:0;font-weight:600}#counts .perfect dd{color:var(--gilt)}#counts .great dd{color:var(--moonlight)}#counts .good dd{color:var(--pewter)}#counts .miss dd{color:var(--felt)}.max-combo{color:var(--parchment);font-size:.9375rem}.max-combo b{color:var(--ivory);font-weight:600}.group{gap:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--hairline);display:grid}.setting{gap:var(--space-2);display:grid}.setting-row{justify-content:space-between;align-items:center;gap:var(--space-4);min-height:var(--target);display:flex}.label{font-size:var(--step-0)}.setting output{text-align:right;font-weight:600}.setting>button{justify-self:start}.stepper{align-items:center;gap:var(--space-2);display:flex}.stepper button{width:var(--target);font-size:var(--step-1);padding:0}.stepper output{text-align:center;min-width:4.5rem}.segmented{border:1px solid var(--hairline-strong);border-radius:var(--radius-key);grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.segmented label{min-height:var(--target);cursor:pointer;color:var(--parchment);place-items:center;display:grid;position:relative}.segmented label+label{border-left:1px solid var(--hairline-strong)}.segmented input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.segmented label:has(:checked){background:var(--ivory);color:var(--lacquer);font-weight:600}.segmented label:has(:focus-visible){outline:2px solid var(--gilt);outline-offset:-4px}input[type=range]{appearance:none;width:100%;height:var(--target);cursor:pointer;--fill:50%;background:0 0;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--gilt) var(--fill), var(--hairline-strong) var(--fill));border-radius:2px;height:3px}input[type=range]::-moz-range-track{background:linear-gradient(to right, var(--gilt) var(--fill), var(--hairline-strong) var(--fill));border-radius:2px;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ivory);border:none;border-radius:50%;width:24px;height:24px;margin-top:-10.5px;box-shadow:0 2px 6px #00000080}input[type=range]::-moz-range-thumb{background:var(--ivory);border:none;border-radius:50%;width:24px;height:24px;box-shadow:0 2px 6px #00000080}input[type=range].at-default::-webkit-slider-runnable-track{background:var(--hairline-strong)}input[type=range].at-default::-moz-range-track{background:var(--hairline-strong)}input[type=range].at-default::-webkit-slider-thumb{background:var(--parchment)}input[type=range].at-default::-moz-range-thumb{background:var(--parchment)}.switch{cursor:pointer}.switch input{appearance:none;background:var(--hairline-strong);cursor:pointer;border-radius:1rem;flex:none;width:3.25rem;height:2rem;margin:0;transition:background-color .15s;position:relative}.switch input:after{content:"";background:var(--ivory);border-radius:50%;width:26px;height:26px;transition:transform .15s;position:absolute;top:3px;left:3px}.switch input:checked{background:var(--gilt)}.switch input:checked:after{transform:translate(1.25rem)}.keys{grid-template-columns:repeat(4, var(--target));gap:var(--space-3);display:grid}.keys button{width:var(--target);padding:0;font-weight:600}.keys button.binding{color:var(--gilt);border-color:var(--gilt);box-shadow:none;background:0 0}#settings .group:last-of-type .setting{justify-items:start}#settings-note[hidden]{display:none}.sticky{bottom:calc(-1 * max(var(--space-5), env(safe-area-inset-bottom)));margin-inline:calc(-1 * var(--space-5));padding:var(--space-6) var(--space-5) max(var(--space-5), env(safe-area-inset-bottom));background:linear-gradient(transparent, var(--lacquer) 40%);position:sticky}#settings-back,#back,#cal-cancel,#about-back{width:100%}#calibration .foot{justify-items:stretch}.lead{font-size:.9375rem}.pad{justify-content:center;align-items:center;gap:var(--space-2);min-height:15rem;max-height:26rem;padding:var(--space-5);text-align:center;border:1px solid var(--hairline-strong);border-radius:var(--radius-panel);cursor:pointer;touch-action:none;background:radial-gradient(circle at 50% 45%,#f1e7d30a,#0000 60%);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.pad.running{border-color:#d3aa5c8c}.pad.done{cursor:default;background:var(--lacquer-raised);border-color:var(--hairline)}.pulse{border:1px solid var(--gilt);opacity:0;pointer-events:none;border-radius:50%;width:11rem;height:11rem;margin:-5.5rem 0 0 -5.5rem;position:absolute;top:50%;left:50%}#cal-status{font:italic var(--step-3) / 1.2 var(--serif);position:relative}.pad.done #cal-status{font-size:var(--step-2)}#cal-count{color:var(--parchment);max-width:22rem;font-size:.9375rem;position:relative}.dots{margin-top:var(--space-3);gap:6px;display:flex;position:relative}.dots span{border:1px solid var(--hairline-strong);border-radius:50%;width:7px;height:7px}.dots span.on{background:var(--gilt);border-color:var(--gilt)}.pad.done .dots{display:none}.about-lead{font:var(--step-1) / 1.4 var(--serif)}#about .group>p:not(.hint){font-size:.9375rem;line-height:1.55}#about a{color:var(--ivory);-webkit-text-decoration-color:var(--hairline-strong);text-decoration-color:var(--hairline-strong);text-underline-offset:.18em}.credits{gap:var(--space-4);margin:0;padding:0;list-style:none;display:grid}.credit{gap:2px;display:grid}.credit .work{font:400 var(--step-1) / 1.25 var(--serif)}.credit .source{color:var(--parchment);font-size:.9375rem}.credit .work+.source{margin-top:var(--space-1)}.dialog{width:min(22rem, calc(100vw - 2 * var(--space-5)));padding:var(--space-5);border:1px solid var(--hairline);border-radius:var(--radius-panel);background:var(--lacquer-raised);color:var(--ivory);box-shadow:var(--shadow-raised)}.dialog::backdrop{background:#050403b8}.dialog form{gap:var(--space-3);display:grid}.dialog-title{font:italic var(--step-2) / 1.2 var(--serif)}.dialog .actions{margin-top:var(--space-3)}.rotate{z-index:10;gap:var(--space-4);background:var(--lacquer);color:var(--ivory);font:italic var(--step-1) var(--serif);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.rotate[hidden]{display:none}.toast{left:50%;bottom:max(var(--space-4), env(safe-area-inset-bottom));z-index:20;gap:var(--space-4);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-5);border:1px solid var(--hairline);border-radius:var(--radius-panel);background:var(--lacquer-raised);box-shadow:var(--shadow-raised);color:var(--ivory);white-space:nowrap;align-items:center;display:flex;position:fixed;transform:translate(-50%)}.toast button{color:var(--gilt);box-shadow:none;padding-inline:var(--space-4);background:0 0}.toast[hidden],body[data-screen=play] .toast{display:none}