.play-page{--play-purple:#7b35ff;--play-blue:#32c5ff;--play-pink:#ff2f86;--burst-shape:polygon(50% 0,60% 36%,91% 14%,70% 45%,100% 54%,68% 61%,85% 96%,57% 70%,43% 100%,42% 68%,4% 88%,31% 58%,0 41%,35% 42%);color:#f1ede4;background:#0b0b0a;min-height:100svh}.play-nav{border-color:#f1ede440}.play-nav nav a[aria-current=page]{color:var(--acid);text-underline-offset:5px;text-decoration:underline}.play-hero{isolation:isolate;border-bottom:1px solid var(--rule);background:radial-gradient(circle at 78% 20%,#7b35ff3d,#0000 29%),radial-gradient(circle at 18% 90%,#ff5a2b2b,#0000 31%),#0b0b0a;padding:22px 3vw 28px;position:relative;overflow:hidden}.play-kicker{z-index:2;text-transform:uppercase;font:700 9px/1 var(--font-geist-mono);letter-spacing:.16em;opacity:.62;justify-content:space-between;display:flex;position:relative}.play-title-row{grid-template-columns:1.7fr 1fr;align-items:end;gap:5vw;padding-top:24px;display:grid}.play-title-row h1{z-index:2;letter-spacing:-.085em;text-transform:uppercase;margin:0;font-size:clamp(54px,7.2vw,108px);line-height:.76;position:relative}.play-title-row h1 em{color:var(--acid);text-transform:none;font-family:Georgia,serif;font-weight:400}.play-title-row p{max-width:330px;font:500 14px/1.35 var(--font-geist-sans);margin:8px 0 0}.hero-waveform{z-index:1;opacity:.88;pointer-events:none;width:73%;height:92%;position:absolute;inset:8% -3% 0 30%;-webkit-mask-image:linear-gradient(90deg,#0000 0% 16%,#00000029 34%,#000 66%);mask-image:linear-gradient(90deg,#0000 0% 16%,#00000029 34%,#000 66%)}.machine{padding:24px 3vw 32px}.machine-head{justify-content:space-between;align-items:end;gap:30px;margin-bottom:14px;display:flex}.machine-head span{text-transform:uppercase;font:700 8px/1 var(--font-geist-mono);letter-spacing:.14em;opacity:.55}.machine-head h2{text-transform:uppercase;letter-spacing:-.055em;margin:5px 0 0;font-size:clamp(25px,2.6vw,40px);line-height:.9}.transport{align-items:stretch;gap:8px;display:flex}.transport label{border:1px solid var(--rule);text-transform:uppercase;min-width:240px;font:700 8px/1 var(--font-geist-mono);letter-spacing:.1em;grid-template-columns:auto auto;gap:7px 12px;padding:10px 13px;display:grid}.transport .key-control{flex-direction:column;justify-content:center;align-items:stretch;gap:6px;min-width:112px;display:flex}.key-control select{width:100%;color:var(--acid);font:700 9px/1 var(--font-geist-mono);text-transform:uppercase;cursor:pointer;background:#0b0b0a;border:0;border-bottom:1px solid #f1ede459;border-radius:0;padding:2px 18px 3px 0}.transport output{color:var(--acid);justify-self:end}.transport input{width:100%;accent-color:var(--acid);grid-column:1/-1}.transport button,.preset-row button{border:1px solid var(--rule);cursor:pointer;text-transform:uppercase;font:800 9px/1 var(--font-geist-mono);letter-spacing:.1em;background:0 0}.clear-button{padding:0 18px}.play-button{color:#11110f;justify-content:space-between;align-items:center;min-width:120px;padding:0 18px;display:flex;background:var(--acid)!important;border-color:var(--acid)!important}.preset-row{grid-template-columns:repeat(4,1fr);margin-bottom:8px;display:grid}.preset-row button{color:#f1ede4;min-height:34px}.preset-row button+button{border-left:0}.preset-row button.active{color:#11110f;background:#f1ede4}.effects-strip{border:1px solid #f1ede459;grid-template-columns:54px repeat(2,minmax(0,1fr));align-items:stretch;margin:0 0 8px;display:grid}.effects-strip>span{color:var(--acid);text-transform:uppercase;font:800 8px/1 var(--font-geist-mono);letter-spacing:.14em;border-right:1px solid #f1ede440;place-items:center;display:grid}.effects-strip label{text-transform:uppercase;min-height:42px;font:700 8px/1 var(--font-geist-mono);letter-spacing:.1em;grid-template-columns:auto auto;align-items:center;gap:3px 14px;padding:7px 14px;display:grid}.effects-strip label+label{border-left:1px solid #f1ede440}.effects-strip output{color:var(--acid);justify-self:end}.effects-strip input{width:100%;accent-color:var(--acid);grid-column:1/-1}.note-grid{padding:5px 0}.note-row{grid-template-columns:120px repeat(16,minmax(0,1fr));min-height:36px;display:grid}.note-row>span{font:700 8px var(--font-geist-mono);opacity:.62;place-items:center;display:grid}.note-row button{cursor:pointer;background:0 0;border:0;min-width:0;position:relative}.note-row button:nth-of-type(4n+1){border-left:1px solid #f1ede461}.note-row button:last-child{border-right:1px solid #f1ede461}.note-row button:before{content:"";background:#343432;border-radius:50%;width:9px;height:9px;transition:width .13s,height .13s,background .13s,transform .13s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.note-row button:hover:before{background:#5a5955;width:13px;height:13px}.note-row button.on:before{background:var(--acid);width:28px;height:28px;clip-path:var(--burst-shape);transform:translate(-50%,-50%) rotate(var(--burst-rotation,0deg));border-radius:0}.note-row button.current:not(.on):before{background:#aaa9a5}.note-row button.on.current:before{filter:brightness(1.35)}.step-count{grid-template-columns:repeat(16,minmax(0,1fr));padding-left:120px;display:grid}.step-count span{text-align:center;font:600 7px var(--font-geist-mono);opacity:.38;padding-top:4px}.fx-head{justify-content:space-between;align-items:end;gap:20px;margin-top:22px;margin-bottom:8px;display:flex}.fx-head>div:first-child>span{text-transform:uppercase;font:700 8px/1 var(--font-geist-mono);letter-spacing:.14em;opacity:.55}.fx-head h3{text-transform:uppercase;letter-spacing:-.045em;margin:4px 0 0;font-size:22px;line-height:.9}.fx-head p{color:#f1ede494;font:500 11px/1.25 var(--font-geist-sans);margin:7px 0 0}.fx-head>div:last-child{display:flex}.fx-head button{border:1px solid var(--rule);color:#f1ede4;cursor:pointer;text-transform:uppercase;min-height:32px;font:800 8px/1 var(--font-geist-mono);letter-spacing:.1em;background:0 0;padding:0 14px}.fx-head .chaos-button{background:var(--acid);border-left:0;border-color:var(--acid);color:#11110f}.fx-grid{border-top:1px solid #f1ede42e;border-bottom:1px solid #f1ede42e;padding:5px 0}.fx-row{grid-template-columns:120px repeat(16,minmax(0,1fr));min-height:36px;display:grid}.fx-name{text-transform:uppercase;min-width:0;font:700 7px/1 var(--font-geist-mono);letter-spacing:.08em;color:#f1ede4ad;align-items:center;padding:0 9px;display:flex}.fx-row>button{cursor:pointer;background:0 0;border:0;min-width:0;position:relative}.fx-row>button:nth-of-type(4n+1){border-left:1px solid #f1ede457}.fx-row>button:last-child{border-right:1px solid #f1ede457}.fx-row>button:before{content:"";background:#343432;border-radius:50%;width:8px;height:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.fx-row>button:hover:before{background:#5a5955;width:12px;height:12px}.fx-row>button.on:before{background:var(--play-purple);width:28px;height:28px;clip-path:var(--burst-shape);transform:translate(-50%,-50%) rotate(var(--burst-rotation,0deg));border-radius:0}.fx-row:nth-child(2) button.on:before{background:var(--orange)}.fx-row:nth-child(3) button.on:before{background:var(--play-pink)}.fx-row:nth-child(4) button.on:before{background:var(--acid)}.fx-row>button.current:not(.on):before{background:#aaa9a5}.fx-row>button.on.current:before{filter:brightness(1.25)}.drum-machine{border-top:1px solid var(--rule);background:radial-gradient(circle at 15% 25%,#ff2f861f,#0000 28%),#070706}.drum-actions{align-items:center;gap:12px;display:flex}.drum-actions>span{margin-right:8px}.drum-actions .clear-button{color:#f1ede4;border:1px solid var(--rule);cursor:pointer;text-transform:uppercase;min-height:46px;font:800 9px/1 var(--font-geist-mono);letter-spacing:.1em;background:0 0}.drum-presets{grid-template-columns:repeat(4,1fr)}.drum-grid{border-top:1px solid #f1ede42e;border-bottom:1px solid #f1ede42e;padding:5px 0}.drum-row{grid-template-columns:120px 1fr;min-height:36px;display:grid}.live-pad{color:#f1ede4ad;cursor:pointer;text-transform:uppercase;font:700 7px/1 var(--font-geist-mono);letter-spacing:.08em;background:0 0;border:0;justify-content:flex-start;align-items:center;padding:0 9px;display:flex}.live-pad small{font:700 6px/1 var(--font-geist-mono);letter-spacing:.12em;opacity:0;margin-left:8px;transition:opacity .12s}.live-pad:hover small,.live-pad:focus-visible small{opacity:.55}.live-pad:active{transform:translate(2px)}.pad-0:hover,.pad-0:focus-visible{color:var(--acid)}.pad-1:hover,.pad-1:focus-visible{color:var(--orange)}.pad-2:hover,.pad-2:focus-visible{color:var(--play-blue)}.pad-3:hover,.pad-3:focus-visible{color:var(--play-pink)}.drum-steps{grid-template-columns:repeat(16,minmax(0,1fr));display:grid}.drum-steps button{cursor:pointer;background:0 0;border:0;min-width:0;position:relative}.drum-steps button:nth-child(4n+1){border-left:1px solid #f1ede457}.drum-steps button:last-child{border-right:1px solid #f1ede457}.drum-steps button:before{content:"";background:#343432;border-radius:50%;width:9px;height:9px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.drum-steps button:hover:before{background:#5a5955;width:13px;height:13px}.drum-steps button.on:before{background:var(--orange);width:28px;height:28px;clip-path:var(--burst-shape);transform:translate(-50%,-50%) rotate(var(--burst-rotation,0deg));border-radius:0}.drum-row:nth-child(2) .drum-steps button.on:before{background:var(--play-pink)}.drum-row:nth-child(3) .drum-steps button.on:before{background:var(--play-blue)}.drum-row:nth-child(4) .drum-steps button.on:before{background:var(--play-purple)}.drum-steps button.current:not(.on):before{background:#aaa9a5}.drum-steps button.on.current:before{filter:brightness(1.25)}.drum-note{grid-template-columns:auto 1fr;align-items:start;gap:16px;max-width:610px;margin:14px 0 0 auto;display:grid}.drum-note span{color:var(--acid);text-transform:uppercase;font:800 8px var(--font-geist-mono);letter-spacing:.14em}.drum-note p{font:450 15px/1.4 var(--font-geist-sans);opacity:.72;margin:0}.drum-note a{text-underline-offset:3px;text-decoration:underline}.drum-note a:hover{color:var(--acid)}.play-footer{border-top:1px solid var(--rule);background:var(--acid);color:#11110f;flex-direction:row;align-items:center;gap:20px;min-height:0;padding:28px 3vw}.play-footer img{filter:invert();width:48px}.play-footer p{margin-right:auto}.play-footer a{text-transform:uppercase;font:800 9px var(--font-geist-mono);letter-spacing:.1em}@media (width<=760px){.play-hero{padding-top:24px;padding-bottom:30px}.play-title-row{padding-top:32px;display:block}.play-title-row h1{font-size:20vw}.hero-waveform{opacity:.65;width:100%;height:72%;inset:10% -22% 18% 22%;-webkit-mask-image:linear-gradient(90deg,#0000 0% 25%,#000 72%);mask-image:linear-gradient(90deg,#0000 0% 25%,#000 72%)}.machine{padding:38px 3vw 55px}.machine-head{display:block}.transport{grid-template-columns:1fr 1fr;margin-top:25px;display:grid}.transport label{grid-column:1/-1;min-width:0}.transport .key-control{grid-column:auto;min-width:0}.transport button{min-height:48px}.preset-row{grid-template-columns:repeat(2,1fr)}.preset-row button:nth-child(3){border-left:1px solid var(--rule)}.preset-row button:nth-child(n+3){border-top:0}.effects-strip{grid-template-columns:44px 1fr}.effects-strip>span{grid-row:1/3}.effects-strip label+label{border-top:1px solid #f1ede440;border-left:0}.note-grid{overflow-x:auto}.note-row{grid-template-columns:92px repeat(16,minmax(0,1fr));min-width:790px}.note-row button{aspect-ratio:1}.step-count{display:none}.fx-head{align-items:start;margin-top:25px}.fx-head p{max-width:220px}.fx-grid{overflow-x:auto}.fx-row{grid-template-columns:92px repeat(16,minmax(0,1fr));min-width:790px;min-height:36px}.drum-actions{justify-content:space-between;margin-top:22px}.drum-actions>span{display:block}.drum-presets{grid-template-columns:repeat(2,1fr)}.drum-grid{overflow-x:auto}.drum-row{grid-template-columns:92px 1fr;min-width:790px;min-height:36px}.drum-steps{gap:0;padding:0}.live-pad{padding:0 9px;font-size:7px}.drum-note{margin-top:22px}.play-footer{min-height:0;padding:22px 4vw}.play-footer p{display:none}}@media (prefers-reduced-motion:reduce){.note-row button{transition:none}}