:root{--ink:oklch(97% .008 250);--ink-dim:oklch(65% .02 260);--ink-faint:oklch(48% .02 260);--ground:oklch(13% .014 265);--glow:oklch(84% .12 210);--hair:oklch(100% 0 0/.09);--hair-lit:oklch(100% 0 0/.18);--pane:oklch(100% 0 0/.04);--gutter:clamp(1rem, 3.5vw, 2rem);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased;grid-template:1fr/1fr;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5;display:grid;overflow:hidden}body>*{grid-area:1/1}header,footer{z-index:1;padding:clamp(.9rem, 2.5vw, 1.4rem) var(--gutter);pointer-events:none;justify-content:space-between;align-items:center;gap:1rem;display:flex}header>*,footer>*{pointer-events:auto}header{align-self:start}footer{flex-wrap:wrap;align-self:end}h1{color:var(--ink-dim);letter-spacing:.32em;text-transform:uppercase;margin:0;font-size:.7rem;font-weight:500}h1:before{vertical-align:.1em;content:"";background:var(--glow);width:.4em;height:.4em;box-shadow:0 0 .75rem var(--glow);border-radius:50%;margin-inline-end:.9em;display:inline-block}nav a{color:var(--ink-faint);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;text-decoration:none;transition:color .2s}nav a:hover,nav a:focus-visible{color:var(--ink)}#stage{cursor:crosshair;touch-action:none;position:relative;overflow:hidden}#stage:after{content:"";pointer-events:none;background:radial-gradient(120% 80% at 50% 45%,oklch(30% .03 260/.22) 0%,oklch(6% .01 265/0) 55%,oklch(6% .01 265/.55) 100%);position:absolute;inset:0}#field{width:100%;height:100%;position:absolute;inset:0}#invitation{inset-inline:0;color:var(--ink-dim);letter-spacing:.06em;text-align:center;pointer-events:none;margin:0;font-size:clamp(.8rem,2.2vw,.95rem);transition:opacity .7s;position:absolute;top:50%;translate:0 -50%}#invitation strong{color:var(--ink);letter-spacing:-.02em;margin-block-end:.55rem;font-size:clamp(1.6rem,6vw,2.6rem);font-weight:300;display:block}#stage[data-played=true] #invitation{opacity:0}#readout{bottom:clamp(4.5rem,11vh,6rem);left:var(--gutter);font-variant-numeric:tabular-nums;pointer-events:none;flex-direction:column;transition:opacity .4s;display:flex;position:absolute}#stage:not([data-playing=true]) #readout{opacity:.22}#stage[data-beat=true]:not([data-playing=true]) #readout{opacity:.6}#note{color:var(--glow);letter-spacing:-.03em;font-size:clamp(2.4rem,8vw,3.4rem);font-weight:200;line-height:1}#detail{min-height:1.2em;color:var(--ink-faint);letter-spacing:.2em;text-transform:uppercase;font-size:.65rem}#preview{top:4rem;right:var(--gutter);border:1px solid var(--hair);opacity:.65;pointer-events:none;border-radius:10px;width:min(28vw,10rem);position:absolute;scale:-1 1;box-shadow:0 1rem 2.5rem oklch(0% 0 0/.45)}.controls{flex-wrap:wrap;justify-content:center;gap:.4rem;max-width:100%;display:flex}button{font:inherit;color:var(--ink-dim);letter-spacing:clamp(.05em,.4vw,.1em);cursor:pointer;background:var(--pane);border:1px solid var(--hair);-webkit-backdrop-filter:blur(14px)saturate(140%);backdrop-filter:blur(14px)saturate(140%);border-radius:999px;padding:.5rem clamp(.7rem,2.6vw,1rem);font-size:clamp(.62rem,2.4vw,.7rem);transition:color .18s,border-color .18s,background-color .18s}button:disabled{color:var(--ink-faint);cursor:default;opacity:.5}button:hover:not(:disabled){color:var(--ink);border-color:var(--hair-lit)}button[aria-pressed=true]{color:var(--glow);border-color:oklch(84% .12 210/.45)}:focus-visible{outline:1px solid var(--glow);outline-offset:3px}.status,.hint{color:var(--ink-faint);letter-spacing:.08em;margin:0;font-size:.65rem}.status{color:var(--ink-dim);text-align:center;flex:8rem}.hint{text-align:end}kbd{font:inherit;color:var(--ink-dim);border:1px solid var(--hair);border-radius:4px;padding:.1em .4em;font-size:.95em}@media (width<=46rem){.hint{display:none}footer{justify-content:center;padding-inline:.75rem}#readout{bottom:clamp(4rem,10vh,5rem)}#preview{width:min(34vw,8rem);top:3.5rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important}}