:root{--brightness:.5;--bg-hue:250}*{box-sizing:border-box}body{color:#f2f0ff;background:radial-gradient(circle at 50% calc(20% + var(--brightness) * 40%), hsl(calc(var(--bg-hue) + var(--brightness) * 40) 70% 22%), hsl(calc(var(--bg-hue) - 20) 60% 8%) 70%);-webkit-user-select:none;user-select:none;min-height:100vh;margin:0;padding:clamp(1rem,4vw,2rem);font-family:system-ui,sans-serif;line-height:1.6;transition:background .4s ease-out}main{text-align:center;max-width:40rem;margin:0 auto}a{color:#c9c2ff}h1{letter-spacing:.05em;margin-bottom:.25rem;font-size:2.5rem}.hint{opacity:.85;min-height:1.6em;transition:opacity .6s ease-out}.hint.played{opacity:0}.note{opacity:.7;font-size:.95rem}.instrument{touch-action:none;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(.25rem,1.5cqw,1rem);padding:2rem 0;display:flex;container-type:inline-size}.pad{--glow:.35;appearance:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(circle at 35% 30%, hsl(calc(var(--bg-hue) + 60) 90% calc(55% + var(--glow) * 30%)), hsl(calc(var(--bg-hue) + 60) 70% 30%));width:clamp(2.25rem,8cqw,4.5rem);height:clamp(2.25rem,8cqw,4.5rem);box-shadow:0 0 calc(var(--glow) * 2.5rem) hsl(calc(var(--bg-hue) + 60) 90% 65% / var(--glow)), inset 0 0 .4rem #ffffff4d;color:#1a1330;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;transition:transform .15s ease-out,box-shadow .15s ease-out,background .15s ease-out;animation:3.2s ease-in-out infinite idle;display:flex;transform:translateY(0)scale(1)}.pad:first-child{animation-delay:0s}.pad:nth-child(2){animation-delay:-.4s}.pad:nth-child(3){animation-delay:-.8s}.pad:nth-child(4){animation-delay:-1.2s}.pad:nth-child(5){animation-delay:-1.6s}.pad:nth-child(6){animation-delay:-2s}.pad:nth-child(7){animation-delay:-2.4s}.pad:nth-child(8){animation-delay:-2.8s}.pad.active{--glow:1;animation-play-state:paused;transform:translateY(-.4rem)scale(1.12)}.keycap{opacity:.75;font-size:.85rem}@keyframes idle{0%,to{box-shadow:0 0 calc(var(--glow) * 2.5rem) hsl(calc(var(--bg-hue) + 60) 90% 65% / var(--glow))}50%{box-shadow:0 0 calc((var(--glow) + .15) * 2.5rem) hsl(calc(var(--bg-hue) + 60) 90% 65% / calc(var(--glow) + .15))}}@media (prefers-reduced-motion:reduce){.pad{transition:none;animation:none}body{transition:none}}@media (forced-colors:active){.pad{border:.15rem solid buttonborder}.pad.active{border-color:highlight}}