:root{--ink:#f2f4ff;--ink-dim:#a4a8c8;--ground:#0a0b14;--ground-lift:#161a2c;--edge:#2c3150;--drum:#f4785f;--bell:#f0a5d8;--noise:#4fd1c5;--glide:#8b9cff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--ground);min-height:100dvh;color:var(--ink);flex-direction:column;margin:0;font-family:Inter,Segoe UI,system-ui,sans-serif;display:flex;overflow-x:clip}header{z-index:1;padding:1rem 1.25rem;position:relative}nav a{color:var(--ink-dim);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;font-weight:600;text-decoration:none}nav a:hover,nav a:focus-visible{color:var(--ink)}main{flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;max-width:68rem;margin:0 auto;padding:0 1.25rem 2rem;display:flex;position:relative}.glow{z-index:0;aspect-ratio:1;width:min(78vw,40rem);opacity:calc(.18 + var(--breath,0) * .82);transform:translate(-50%, -50%) scale(calc(.78 + var(--breath,0) * .42));pointer-events:none;background:radial-gradient(circle,#7e92ff6b 0%,#0a0b1400 66%);border-radius:50%;position:absolute;top:50%;left:50%}h1{z-index:1;letter-spacing:-.03em;margin:0 0 .5rem;font-size:clamp(2rem,7vw,3.5rem);font-weight:800;position:relative}.invite{z-index:1;max-width:30rem;color:var(--ink-dim);text-align:center;text-wrap:balance;margin:0 0 2rem;font-size:clamp(.95rem,2.4vw,1.1rem);line-height:1.5;position:relative}kbd{border:1px solid var(--edge);background:var(--ground-lift);color:var(--ink);font:inherit;border-radius:.3em;padding:.1em .4em;font-size:.85em}.pads{z-index:1;width:100%;transform:scale(calc(.986 + var(--breath,0) * .014));grid-template-columns:repeat(4,1fr);gap:.9rem;display:grid;position:relative}.pad{border:1px solid color-mix(in srgb, var(--hue,#8b9cff) 32%, var(--edge));background:linear-gradient(180deg, #ffffff14 0%, #fff0 60%), color-mix(in srgb, var(--hue,#8b9cff) 11%, var(--ground-lift));min-height:clamp(8rem,22vh,15rem);color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 0 calc(var(--breath,0) * 1.6rem) color-mix(in srgb, var(--hue,#8b9cff) calc(var(--breath,0) * 22%), transparent);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:1.1rem;flex-direction:column;justify-content:center;align-items:center;gap:.3rem;padding:1rem .5rem;transition:border-color .12s;display:flex;position:relative;overflow:hidden}.pad[data-voice=drum]{--hue:var(--drum)}.pad[data-voice=bell]{--hue:var(--bell)}.pad[data-voice=noise]{--hue:var(--noise)}.pad[data-voice=glide]{--hue:var(--glide)}.pad[data-held]{border-color:var(--hue);box-shadow:0 0 0 1px var(--hue), 0 0 2.5rem #ffffff1f}.pad:hover{border-color:var(--hue)}.pad:focus-visible{outline:2px solid var(--hue);outline-offset:3px}.pad[data-held]:after{top:calc(100% - var(--pitch,.5) * 100%);background:var(--hue);height:2px;opacity:calc(.35 + var(--brightness,.5) * .65);content:"";position:absolute;left:0;right:0}.pad-ink{aspect-ratio:1;background:radial-gradient(circle, var(--hue) 0%, #fff0 70%);opacity:0;pointer-events:none;border-radius:50%;width:150%;margin:-75% 0 0 -75%;position:absolute;top:50%;left:50%}.pad-icon{width:clamp(2.2rem,6vw,3.2rem);height:clamp(2.2rem,6vw,3.2rem);color:var(--hue)}.pad-badge{color:var(--hue);opacity:.8;font-size:1rem;font-weight:800;line-height:1;position:absolute;top:.55rem;left:.7rem}.pad-name{color:var(--ink-dim);letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}.pad-hint{color:var(--ink-dim);letter-spacing:.04em;opacity:.7;font-size:.68rem}.controls{z-index:1;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;margin-top:1.6rem;display:flex;position:relative}.control{border:1px solid var(--edge);background:var(--ground-lift);min-height:2.75rem;color:var(--ink);font:inherit;cursor:pointer;border-radius:2rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:600;transition:border-color .12s,opacity .12s}.control[aria-pressed=true]{border-color:var(--glide);color:var(--glide)}.control-loop[data-loop-state=recording],.control-loop[data-loop-state=overdubbing]{border-color:var(--bell);color:var(--bell)}.control:disabled{cursor:default;opacity:.4}.control:focus-visible{outline:2px solid var(--glide);outline-offset:3px}.control:hover:not(:disabled){border-color:var(--ink-dim)}.beat-dot{background:var(--glide);width:.7rem;height:.7rem;opacity:calc(.18 + var(--breath,0) * .82);transform:scale(calc(.8 + var(--breath,0) * .5));border-radius:50%;margin-right:.4rem}.status{z-index:1;min-height:2.5rem;color:var(--ink-dim);text-align:center;margin:1rem 0 0;font-size:.85rem;position:relative}@media (width<=34rem){.pads{grid-template-columns:repeat(2,1fr)}.invite{margin-bottom:1.4rem}.pad{min-height:7.5rem}}@media (prefers-reduced-motion:reduce){.glow{opacity:.4;transform:translate(-50%,-50%)}.pads,.beat-dot{transform:none}.pad{box-shadow:none}}