:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#f2ede4;--ink-dim:#a49c8e;--bg:#14131a;--edge:#2b2833}*{box-sizing:border-box}body{background:radial-gradient(120% 90% at 50% 0%, #1e1b28 0%, var(--bg) 62%);min-height:100dvh;color:var(--ink);flex-direction:column;margin:0;padding:1rem 1rem 2rem;font-family:system-ui,sans-serif;line-height:1.6;display:flex}main{flex-direction:column;flex:1;justify-content:center;width:100%;max-width:44rem;margin:0 auto;display:flex}a{color:var(--ink-dim)}header nav{letter-spacing:.16em;text-transform:uppercase;max-width:44rem;margin:0 auto;font-size:.8rem}header nav a{text-decoration:none}h1{letter-spacing:-.02em;margin:.4rem 0 .25rem;font-size:clamp(1.9rem,8vw,2.9rem);font-weight:600}.grid{touch-action:none;flex-direction:column;gap:clamp(.4rem,1.6vw,.75rem);display:flex}.row{gap:clamp(.4rem,1.6vw,.75rem);display:flex}.pad{--hue:calc(186 + var(--column) * 25);--light:calc(21% + var(--octave) * 6%);--velocity:.8;aspect-ratio:1;border:1px solid hsl(var(--hue) 25% 32%);background:hsl(var(--hue) 34% var(--light));min-width:0;color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:clamp(.5rem,2.2vw,.9rem);flex:1;padding:0;transition:background .7s,box-shadow .7s,border-color .7s,transform .16s}.pad:hover{border-color:hsl(var(--hue) 40% 46%)}.pad:focus-visible{outline-offset:2px;outline:2px solid #ffd9a0}.pad.is-lit{background:hsl(var(--hue) 72% calc(var(--light) + 32%));border-color:hsl(var(--hue) 85% 70%);box-shadow:0 0 calc(12px + var(--velocity) * 34px) hsl(var(--hue) 90% 60% / calc(.3 + var(--velocity) * .5)), inset 0 0 20px hsl(var(--hue) 90% 74% / .35);transition-duration:30ms,30ms,30ms,90ms;animation:none;transform:scale(.965)}.pad__key{letter-spacing:.08em;color:hsl(var(--hue) 30% 72%);opacity:.45;font-size:clamp(.6rem,2.4vw,.8rem);transition:opacity .3s;display:block}.pad:hover .pad__key{opacity:.85}.pad.is-lit .pad__key{color:hsl(var(--hue) 65% 18%);opacity:.8}@keyframes invite{0%,to{box-shadow:0 0 0 hsl(var(--hue) 70% 60% / 0);transform:scale(1)}3.33%{box-shadow:0 0 16px hsl(var(--hue) 70% 60% / .4);transform:scale(1.05)}10%{box-shadow:0 0 0 hsl(var(--hue) 70% 60% / 0);transform:scale(1)}}.pad{animation:3.9s ease-in-out infinite backwards invite;animation-delay:calc(var(--order) * .26s)}.controls{flex-wrap:wrap;gap:.5rem 2rem;margin-top:1.5rem;display:flex}.control{flex:12rem;align-items:center;gap:.75rem;margin:0;display:flex}.control label{letter-spacing:.14em;text-transform:uppercase;min-width:3.2rem;color:var(--ink-dim);font-size:.78rem}.control input[type=range]{accent-color:#d8a56a;flex:1;min-width:0}.aside{color:var(--ink-dim)}@media (prefers-reduced-motion:reduce){.pad,.pad.is-lit{animation:none;transform:none}}