:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4f0e8;background:#111321;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 79% 19%,#31304b 0,transparent 34%),radial-gradient(circle at 10% 69%,#1e3243 0,transparent 35%),#111321}.halo{position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:radial-gradient(#aaa 0.6px,transparent 0.6px);background-size:22px 22px;mask-image:linear-gradient(to bottom,black,transparent 75%)}.shell{max-width:1190px;margin:auto;padding:25px 34px;position:relative}.site-header,.instrument-top,footer{display:flex;justify-content:space-between;align-items:center;gap:18px;font:700 11px ui-monospace,SFMono-Regular,monospace;letter-spacing:.13em}.site-header{color:#a8a8b8}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:10px}.brand-icon{background:#fa826d;color:#211e2b;display:grid;place-items:center;width:34px;height:34px;font-size:24px;border-radius:9px}.experiment{color:#ec9c86}.hero{margin:78px 0 45px}.eyebrow{font:700 11px ui-monospace,monospace;letter-spacing:.18em;color:#e9a58e}.pulse,.lamp{display:inline-block;width:7px;height:7px;border-radius:50%;background:#a6d9b9;box-shadow:0 0 12px #a6d9b9;margin-right:10px}.hero h1{font-size:clamp(65px,10.5vw,134px);line-height:.88;letter-spacing:-.085em;margin:19px 0 25px;font-weight:800}.hero h1 em{font-style:normal;color:#fa826d}.hero p{max-width:570px;line-height:1.65;font-size:18px;color:#b7b8c6;margin:0}.instrument{border:1px solid #58596b;border-radius:20px;padding:23px;background:#252635;box-shadow:0 25px 75px #06071866}.instrument-top{color:#a4a3b6;font-size:10px;margin-bottom:24px}.sequencer-scroll{overflow-x:auto;padding-bottom:8px;scrollbar-color:#6e6e80 #252635}.sequencer{display:grid;grid-template-columns:115px repeat(16,minmax(34px,1fr));gap:8px;min-width:820px}.corner,.step-number,.track-name{font:700 10px ui-monospace,monospace;letter-spacing:.06em;color:#8f90a5;display:flex;align-items:center}.step-number{justify-content:center;padding-bottom:10px}.step-number.measure{color:#e8d6c2}.track-name{font-size:12px;color:#e9e7ed;gap:10px}.track-name span{font-size:20px;width:22px;text-align:center}.track-name.kick span{color:#f69781}.track-name.snare span{color:#e9ca88}.track-name.hat span{color:#9dcbb8}.track-name.bell span{color:#abb7ed}.step{aspect-ratio:1;border:1px solid #5a5b6d;border-radius:8px;background:#343648;cursor:pointer;position:relative;min-height:34px;transition:transform .12s,background .12s;touch-action:manipulation}.step.measure{border-left:3px solid #858698}.step:hover{transform:scale(1.08);border-color:#e9e7ed}.step:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:3px}.step[aria-pressed=true]{border-color:transparent}.step.kick[aria-pressed=true]{background:#f69781;box-shadow:0 0 18px #f6978150}.step.snare[aria-pressed=true]{background:#e9ca88;box-shadow:0 0 18px #e9ca8850}.step.hat[aria-pressed=true]{background:#9dcbb8;box-shadow:0 0 18px #9dcbb850}.step.bell[aria-pressed=true]{background:#abb7ed;box-shadow:0 0 18px #abb7ed50}.step.current::after{content:"";position:absolute;inset:-4px;border:2px solid #fff;border-radius:11px;pointer-events:none}.step-number.current{color:#fff}.transport{border-top:1px solid #4d4f60;margin-top:20px;padding-top:23px;display:flex;align-items:center;gap:30px;flex-wrap:wrap}.play{background:#fa826d;border:0;border-radius:9px;color:#252333;min-width:150px;padding:18px 24px;font:800 13px ui-monospace,monospace;letter-spacing:.07em;cursor:pointer}.play:hover{background:#ff9d88}.play:disabled{opacity:.6}.tempo,.volume{display:flex;align-items:center;gap:12px;font:700 11px ui-monospace,monospace;color:#c7c5ce;letter-spacing:.06em}.tempo output{color:#fff;min-width:25px;text-align:right}.tempo input{width:170px}.volume input{width:90px}input[type=range]{accent-color:#fa826d;cursor:pointer}.bottom{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;margin:55px 0 72px}.actions h2{font-size:28px;letter-spacing:-.05em;margin:0 0 10px}.actions>p{color:#aaaabb;line-height:1.55;font-size:14px;max-width:470px;margin:0 0 22px}.action-buttons{display:flex;flex-wrap:wrap;gap:9px}.action-buttons button{background:#303244;border:1px solid #55576a;border-radius:7px;color:#f0edf0;padding:12px 14px;font:700 11px ui-monospace,monospace;cursor:pointer}.action-buttons button:hover{border-color:#fa826d}#status{color:#e9ad9d;margin-top:16px;min-height:22px}.note{border:1px solid #56576c;background:#292c3d;border-radius:14px;padding:22px 26px;transform:rotate(1deg)}.note-icon{font-size:28px;color:#fa826d}.note p{font-size:22px;line-height:1.25;letter-spacing:-.05em;font-weight:750;margin:15px 0 33px}.note small{font:700 10px/1.6 ui-monospace,monospace;letter-spacing:.08em;color:#a8a9bb}footer{border-top:1px solid #484958;padding:23px 0;color:#85869b;font-size:10px}@media(max-width:760px){.shell{padding:20px}.hero{margin:68px 0 35px}.hero h1{font-size:clamp(62px,14vw,102px)}.hero p{font-size:16px}.instrument{padding:16px}.transport{gap:20px}.play{width:100%}.bottom{grid-template-columns:1fr;gap:30px;margin:45px 0 52px}.note{transform:none}footer{flex-direction:column;align-items:flex-start}.instrument-top{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Flexible mixer, revision 2 */
.mixer-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid #4d4f60;padding:17px 0 22px;margin-top:4px}
.mixer-tools label,.surprise-controls label{display:flex;align-items:center;gap:10px;color:#c7c5ce;font:700 11px ui-monospace,monospace;letter-spacing:.05em}
.mixer-tools select,.surprise-controls select{background:#303244;color:#f2eef0;border:1px solid #626274;border-radius:7px;padding:10px 12px;font:600 12px ui-monospace,monospace;cursor:pointer}
.mixer-tools button,.surprise-controls button{background:#fa826d;color:#242333;border:0;border-radius:7px;padding:12px 15px;font:800 11px ui-monospace,monospace;cursor:pointer;letter-spacing:.04em}
.mixer-tools button:hover,.surprise-controls button:hover{background:#ffa08a}
.mixer-tools button:disabled{opacity:.5;cursor:not-allowed}
.mixer-divider{height:27px;border-left:1px solid #595a6c;margin:0 5px}
.voice-count{color:#a2a2b2;font:700 10px ui-monospace,monospace;margin-left:auto}
.sequencer{grid-template-columns:150px repeat(var(--steps),minmax(34px,1fr));min-width:0}
.track-name{gap:7px;min-width:0}
.track-name .track-icon{font-size:19px;width:22px;text-align:center;color:var(--track-color)}
.track-name>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.remove-track{margin-left:auto;border:1px solid #59596a;background:#343648;border-radius:5px;color:#ccc5d0;cursor:pointer;padding:1px 6px;font:700 15px system-ui,sans-serif;line-height:1.2}
.remove-track:hover{border-color:#fa826d;color:#fff}
.step[aria-pressed=true]{background:var(--track-color);box-shadow:0 0 16px color-mix(in srgb,var(--track-color) 36%,transparent)}
.empty-mixer{grid-column:1/-1;border:1px dashed #6a6a7a;border-radius:9px;padding:35px;text-align:center;color:#b7b5c6;font-size:14px}
.surprise-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:5px 0 17px}
.surprise-controls select{min-width:152px}
.surprise-controls button{white-space:nowrap}
@media(max-width:760px){.mixer-tools{gap:10px}.mixer-divider{display:none}.voice-count{width:100%;margin-left:0}.mixer-tools label{flex:1 1 auto}.mixer-tools button{flex:1 1 auto}.surprise-controls label{width:100%}.surprise-controls select{flex:1}}

/* Mixer revision: keep complete names and controls visible while the notes scroll. */
.sequencer{--label-width:260px;position:relative;grid-template-columns:var(--label-width) repeat(var(--steps),minmax(34px,1fr));align-items:center}
.corner,.track-name{position:sticky;left:0;z-index:2;background:#252635;min-width:0;width:var(--label-width);box-shadow:7px 0 9px #15172255}
.corner{z-index:3;align-self:stretch}
.track-name{display:block;padding:7px 10px 7px 0;min-height:63px}
.voice-header,.voice-mix{display:flex;align-items:center;gap:6px;width:100%;min-width:0}
.voice-header{height:25px}
.track-name .track-icon{width:22px;flex:0 0 22px;font-size:18px;text-align:center;color:var(--track-color)}
.track-name .voice-name{width:auto;flex:1 1 auto;min-width:0;font-size:11px;text-align:left;letter-spacing:.06em;overflow:visible;text-overflow:clip;white-space:nowrap}
.voice-mix{margin-top:3px}
.voice-mix input[type=range]{flex:1 1 60px;min-width:35px;width:auto;margin:0;accent-color:var(--track-color);cursor:pointer}
.voice-mix .level-value{font:700 10px ui-monospace,monospace;color:#bcbacb;width:33px;flex:0 0 33px;text-align:right}
.mix-toggle{border:1px solid #55576c;background:#343648;color:#d7d4db;border-radius:4px;padding:3px 0;width:21px;flex:0 0 21px;font:700 10px ui-monospace,monospace;cursor:pointer}
.mix-toggle[aria-pressed=true]{background:var(--track-color);border-color:var(--track-color);color:#242333}
.step{width:min(100%,38px);height:38px;min-height:0;aspect-ratio:auto;align-self:center;justify-self:center}
.swing{display:flex;align-items:center;gap:10px;font:700 11px ui-monospace,monospace;color:#c7c5ce;letter-spacing:.06em}
.swing output{color:#fff;min-width:28px;text-align:right}.swing input{width:100px}
.follow{display:flex;align-items:center;gap:6px;font:700 10px ui-monospace,monospace;color:#b9b8c8;letter-spacing:.02em;cursor:pointer}
.follow input{accent-color:#fa826d}
@media(max-width:620px){.sequencer{--label-width:180px}.track-name{padding-right:6px}.track-name .voice-name{font-size:10px}.voice-mix{gap:4px}.voice-mix .level-value{width:28px;flex-basis:28px;font-size:9px}.mix-toggle{width:19px;flex-basis:19px}.transport .swing,.transport .volume,.transport .follow{width:100%}.swing input{flex:1}}