:root{--keys-width:calc(10 * 2.75rem + 9 * .4rem)}body{color:#f2f2f7;background:#0b0b12;margin:0;padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}main{max-width:52rem;margin:0 auto}a{color:#7db4ff}.header-row{display:flow-root;position:relative}.instrument-header{margin-left:0}.instrument-header h1{margin:0}.opening-prompt{color:#f2f2f7;font-size:1.1rem;font-weight:600}.opening-prompt[hidden]{display:none}.opening-prompt__stab{color:#4d9dff}.opening-prompt__fx{color:#ff6b6b}.opening-prompt__melody{color:#4de0a0}.tempo-readout,.drop-readout,.arrangement-readout{color:#9a9ab0;margin-top:.25rem;font-size:.85rem}.arrangement-control{gap:.5rem;margin-top:.75rem;display:flex}.arrangement-control__button{cursor:pointer;color:#f2f2f7;opacity:.55;background:#2a2a38;border:none;border-radius:.4rem;flex:none;padding:.5rem 1.1rem;font-family:inherit;font-size:.85rem;font-weight:700;transition:opacity 80ms ease-out,transform 80ms ease-out}.arrangement-control__button[aria-pressed=true]{opacity:1;color:#0b0b12;background:#4d9dff;transform:translateY(-2px)}.audio-visualizer{width:var(--keys-width);background:#000;border-radius:.75rem;margin:0 auto;position:absolute;inset:0;overflow:hidden}.audio-visualizer__canvas{width:100%;height:100%;display:block}.instrument-stage{width:fit-content;margin:1.5rem auto 0;position:relative}.dj-deck{margin-right:2rem;position:absolute;top:0;bottom:0;right:100%}.dj-deck__body{box-sizing:border-box;aspect-ratio:1;background:linear-gradient(155deg,#24242f,#15151d);border:1px solid #34343f;border-radius:.75rem;justify-content:center;align-items:center;width:auto;height:min(100%,max(0px,50vw - 18rem));display:inline-flex;position:relative;box-shadow:0 .6rem 1.4rem #00000073}.dj-deck__platter{box-sizing:border-box;background:#1c1c26;border:.4rem solid #2a2a38;border-radius:50%;justify-content:center;align-items:center;width:90%;height:90%;display:flex;box-shadow:inset 0 0 .6rem #0009,0 .25rem .6rem #00000059}.dj-deck__disc{box-sizing:border-box;background:repeating-radial-gradient(circle,#0b0b12 0 .14rem,#23232f .14rem .45rem);border-radius:50%;width:82%;height:82%;position:relative}.dj-deck__disc:before{content:"";background:#ff6b6b;border-radius:50%;width:12%;height:12%;position:absolute;top:14%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 .4rem #ff6b6bb3}.dj-deck__disc:after{content:"";background:#c7c7d6;border-radius:50%;width:22%;height:22%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dj-deck__tonearm{transform-origin:100% 0;background:linear-gradient(#c7c7d6,#8f8fa0);border-radius:.2rem;width:2%;height:42%;position:absolute;top:6%;right:7%;transform:rotate(30deg)}.dj-deck__tonearm:before{content:"";background:#2a2a38;border-radius:.15rem;width:1.3rem;height:.65rem;position:absolute;bottom:-.35rem;left:-.45rem}.dj-deck__tonearm:after{content:"";background:#2a2a38;border:.14rem solid #3a3a48;border-radius:50%;width:1.3rem;height:1.3rem;position:absolute;top:-.45rem;right:-.45rem}@keyframes dj-deck-spin{to{transform:rotate(360deg)}}.dj-deck__disc--spin-right{animation:1.6s linear infinite dj-deck-spin}.dj-deck__disc--spin-left{animation:1.6s linear infinite reverse dj-deck-spin}@media (prefers-reduced-motion:reduce){.dj-deck__disc--spin-right,.dj-deck__disc--spin-left{animation:none}}.pitch-shifter{align-items:center;margin-left:2rem;display:flex;position:absolute;top:0;bottom:0;left:100%}.pitch-shifter__track{box-sizing:border-box;background:linear-gradient(155deg,#24242f,#15151d);border:1px solid #34343f;border-radius:.7rem;width:1.4rem;height:100%;position:relative;box-shadow:inset 0 0 .6rem #00000080,0 .6rem 1.4rem #00000073}.pitch-shifter__knob{background:linear-gradient(#c7c7d6,#8f8fa0);border:1px solid #3a3a48;border-radius:.3rem;width:2.2rem;height:1rem;transition:bottom .12s ease-out;position:absolute;bottom:0%;left:50%;transform:translate(-50%,50%)}.keyboard-overlay{user-select:none;max-width:var(--keys-width);flex-direction:column;gap:1rem;display:flex}.keyboard-overlay__section-heading{align-items:center;gap:.6rem;margin-bottom:.4rem;display:flex}.keyboard-overlay__section-label{text-transform:uppercase;letter-spacing:.06em;color:var(--section-color,#f2f2f7);white-space:nowrap;font-size:.75rem;font-weight:700}.keyboard-overlay__section-divider{background:var(--section-color,#2a2a38);opacity:.5;flex:1;height:1px}.keyboard-overlay__section--fx{--section-color:#ff6b6b}.keyboard-overlay__section--stab{--section-color:#4d9dff}.keyboard-overlay__section--atmosphere{--section-color:#b28dff}.keyboard-overlay__section--melody{--section-color:#4de0a0}.keyboard-overlay__section--riser{--section-color:#ffd24d}.keyboard-overlay__section--transport{--section-color:#c7c7d6}.keyboard-overlay__row{gap:.4rem;display:flex}.keyboard-overlay__row--split{justify-content:space-between;gap:1.5rem}.keyboard-overlay__row--center{justify-content:center}.keyboard-overlay__row-heading{gap:1.5rem;margin-bottom:.4rem;display:flex}.keyboard-overlay__row-heading .keyboard-overlay__section-heading{flex:1;margin-bottom:0}.keyboard-overlay__key-group{gap:.4rem;display:flex}.keyboard-overlay__section--transport{flex-direction:column;align-self:flex-start;display:flex}.keyboard-overlay__key{aspect-ratio:1;background:var(--key-color,#2a2a38);color:#0b0b12;opacity:.55;border-radius:.4rem;flex:none;justify-content:center;align-items:center;width:2.75rem;font-size:.9rem;font-weight:700;transition:opacity 80ms ease-out,transform 80ms ease-out;display:flex}.keyboard-overlay__key--active{opacity:1;transform:translateY(-2px)}.keyboard-overlay__key--fx{--key-color:#ff6b6b}.keyboard-overlay__key--stab{--key-color:#4d9dff}.keyboard-overlay__key--atmosphere{--key-color:#b28dff}.keyboard-overlay__key--melody{--key-color:#4de0a0}.keyboard-overlay__key--riser{--key-color:#ffd24d}.keyboard-overlay__key--transport{--key-color:#c7c7d6}.keyboard-overlay__key--wide{width:auto;padding:0 1.4rem}