@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600&display=swap');
:root{color-scheme:dark;--ink:#070a0a;--panel:#0d1211;--paper:#f4f7f1;--muted:rgba(235,244,239,.54);--line:rgba(235,244,239,.14);--lime:#c9ff3d;--cyan:#58e7f2;--pink:#ff4fd8;--orange:#ff8a3d}*{box-sizing:border-box}[hidden]{display:none!important}html,body{min-width:320px;min-height:100%;margin:0;background:var(--ink)}body{overflow-x:hidden;color:var(--paper);font-family:"Space Grotesk",sans-serif}button,input,select{font:inherit}button{color:inherit;cursor:pointer}.studio{min-height:100svh;padding:0 clamp(12px,2.6vw,40px) max(100px,env(safe-area-inset-bottom));background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),radial-gradient(circle at 92% 8%,rgba(88,231,242,.12),transparent 22%),radial-gradient(circle at 6% 80%,rgba(255,79,216,.1),transparent 20%),#070a0a;background-size:44px 44px,44px 44px,auto,auto,auto}.studio-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:70px;border-bottom:1px solid var(--line)}.studio-head__back{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);color:var(--paper);text-decoration:none}.studio-head__brand{display:flex;align-items:center;gap:10px;color:var(--paper);font-family:"Archivo Black",sans-serif;text-decoration:none}.studio-head__brand img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(88,231,242,.35))}.studio-head__brand span{display:grid;font-size:.86rem;line-height:.9}.studio-head__brand small{margin-top:6px;color:var(--cyan);font:500 .4rem "Space Grotesk",sans-serif;letter-spacing:.15em}.studio-head__status{justify-self:end;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.44rem;letter-spacing:.13em}.studio-head__status i{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px currentColor}.studio.is-ready .studio-head__status i{background:var(--lime)}
.transport{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:minmax(160px,1fr) auto auto auto auto minmax(240px,1fr);align-items:center;gap:12px;min-height:82px;padding:10px 0;border-bottom:1px solid var(--line);background:rgba(7,10,10,.9);backdrop-filter:blur(18px)}.project-name{display:grid;gap:5px;min-width:0}.project-name span,.transport__number span,.transport__position span{color:var(--muted);font-size:.4rem;letter-spacing:.12em}.project-name input{width:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;color:var(--paper);font-family:"Archivo Black",sans-serif;font-size:clamp(.75rem,1.5vw,1.1rem);text-overflow:ellipsis}.transport__main{display:flex;gap:5px}.transport button{min-width:40px;min-height:40px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:.56rem;font-weight:600;letter-spacing:.08em}.transport button:hover,.transport button:focus-visible{border-color:var(--cyan);color:var(--cyan)}.transport__play{border-color:var(--lime)!important;background:var(--lime)!important;color:#071008!important;font-size:.9rem!important}.transport__play[aria-pressed=true]{background:transparent!important;color:var(--lime)!important;box-shadow:0 0 24px rgba(201,255,61,.16)}.transport button[aria-pressed=true]:not(.transport__play){border-color:var(--pink);color:var(--pink)}.transport__number{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px;width:62px}.transport__number span{grid-column:1/-1}.transport__number input{width:100%;padding:0;border:0;outline:0;background:transparent;color:var(--paper);font-family:"Archivo Black",sans-serif;font-size:1rem}.transport__number b{align-self:end;color:var(--muted);font-size:.48rem}.transport__position{display:grid;gap:4px;min-width:72px}.transport__position strong{font-family:"Archivo Black",sans-serif;font-size:.9rem}.transport__actions{justify-self:end;display:flex;gap:5px}.transport__actions button{padding:0 10px}.transport__record i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--pink)}.transport__record[aria-pressed=true] i{animation:record-pulse .8s steps(2,end) infinite}
.studio-mode{display:flex;gap:5px;padding:18px 0 0}.studio-mode button{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 15px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--muted);font-size:.48rem;font-weight:600;letter-spacing:.1em}.studio-mode button span{font-size:.9rem}.studio-mode button[aria-selected=true]{border-color:var(--cyan);background:rgba(88,231,242,.07);color:var(--paper)}.studio-view{max-width:1500px;margin:auto}.view-head{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:clamp(28px,5vw,68px) 0 24px}.view-head span{color:var(--lime);font-size:.45rem;letter-spacing:.15em}.view-head h1,.view-head h2{margin:8px 0 0;font-family:"Archivo Black",sans-serif;font-size:clamp(2rem,5vw,5rem);line-height:.82}.view-head label{display:grid;gap:7px;color:var(--muted);font-size:.42rem;letter-spacing:.12em}.view-head select{min-width:70px;padding:8px;border:1px solid var(--line);background:var(--panel);color:var(--paper)}.view-head>output{color:var(--cyan);font-family:"Archivo Black",sans-serif}.bar-map{display:grid;grid-template-columns:repeat(4,1fr);width:min(58vw,900px);padding-left:190px}.bar-map span{color:var(--muted);font-size:.42rem}
.sequencer{border:1px solid var(--line);background:rgba(7,10,10,.72);box-shadow:0 30px 90px rgba(0,0,0,.26)}.channel-row{--track:var(--cyan);display:grid;grid-template-columns:190px repeat(16,minmax(32px,1fr));gap:5px;align-items:center;min-width:890px;padding:10px;border-bottom:1px solid var(--line)}.channel-row:last-child{border-bottom:0}.channel-row:nth-child(2){--track:var(--pink)}.channel-row:nth-child(3){--track:var(--lime)}.channel-row:nth-child(4){--track:var(--orange)}.channel-row:nth-child(5){--track:#a78bfa}.channel-id{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;min-width:0;padding-right:8px}.channel-id>span{display:grid;place-items:center;width:34px;height:34px;border:1px solid color-mix(in srgb,var(--track) 45%,transparent);color:var(--track);font-family:"Archivo Black",sans-serif;font-size:.56rem}.channel-id strong,.channel-id small{display:block}.channel-id strong{font-family:"Archivo Black",sans-serif;font-size:.65rem}.channel-id small{margin-top:3px;color:var(--muted);font-size:.37rem;letter-spacing:.08em}.channel-id button{width:28px;height:28px;padding:0;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:.45rem}.channel-id button.is-muted{border-color:var(--pink);color:var(--pink)}.step{position:relative;aspect-ratio:1;min-width:0;padding:0;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035)}.step:nth-child(4n+2){border-left-color:rgba(255,255,255,.35)}.step::after{content:"";position:absolute;inset:26%;background:var(--track);opacity:0;transform:scale(.4) rotate(45deg);transition:opacity 100ms ease,transform 140ms ease}.step.is-active{border-color:color-mix(in srgb,var(--track) 68%,transparent);background:color-mix(in srgb,var(--track) 12%,transparent);box-shadow:inset 0 0 16px color-mix(in srgb,var(--track) 12%,transparent)}.step.is-active::after{opacity:1;transform:scale(1) rotate(45deg)}.step.is-current{outline:2px solid var(--paper);outline-offset:-2px}.sequence-tools{display:flex;align-items:center;gap:7px;padding:14px 0}.sequence-tools button{min-height:38px;padding:0 12px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:.44rem;letter-spacing:.1em}.sequence-tools button:hover{border-color:var(--lime);color:var(--lime)}.sequence-tools p{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--muted);font-size:.4rem;letter-spacing:.11em}.sequence-tools i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.piano-roll{display:grid;grid-template-columns:58px repeat(16,minmax(34px,1fr));min-width:700px;border:1px solid var(--line);overflow:hidden}.piano-roll__note{display:grid;place-items:center;min-height:34px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#e9eee7;color:#090c0b;font-family:"Archivo Black",sans-serif;font-size:.48rem}.piano-roll__note.is-black{background:#171c1b;color:var(--paper)}.piano-cell{min-height:34px;padding:0;border:0;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}.piano-cell:nth-child(4n+2){border-left:1px solid rgba(255,255,255,.25)}.piano-cell.is-active{background:linear-gradient(90deg,var(--pink),var(--cyan));box-shadow:inset 0 0 0 4px rgba(7,10,10,.45)}.piano-cell.is-current{filter:brightness(1.5)}.studio-keyboard{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:12px}.studio-keyboard button{min-height:62px;border:1px solid var(--line);background:linear-gradient(#eef3ed,#aeb9b4);color:#080b0a;font-family:"Archivo Black",sans-serif;font-size:.58rem}.studio-keyboard button.is-black{background:linear-gradient(#1a201f,#080a0a);color:var(--paper)}.studio-keyboard button:active,.studio-keyboard button.is-pressed{background:var(--lime);color:#071008}
.mixer-rack{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));border:1px solid var(--line)}.mixer-channel{--track:var(--cyan);display:grid;gap:14px;padding:18px;border-right:1px solid var(--line);background:rgba(7,10,10,.7)}.mixer-channel:nth-child(2){--track:var(--pink)}.mixer-channel:nth-child(3){--track:var(--lime)}.mixer-channel:nth-child(4){--track:var(--orange)}.mixer-channel:nth-child(5){--track:#a78bfa;border-right:0}.mixer-channel header{display:flex;align-items:center;gap:9px}.mixer-channel header span{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--track);color:var(--track);font-family:"Archivo Black",sans-serif;font-size:.5rem}.mixer-channel header strong{font-family:"Archivo Black",sans-serif;font-size:.65rem}.mixer-channel label{display:grid;gap:6px;color:var(--muted);font-size:.4rem;letter-spacing:.1em}.mixer-channel input{accent-color:var(--track)}.mixer-channel output{color:var(--paper);font-size:.5rem}.mixer-channel__buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px}.mixer-channel button{min-height:34px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:.44rem}.mixer-channel button[aria-pressed=true]{border-color:var(--track);color:var(--track);background:color-mix(in srgb,var(--track) 9%,transparent)}.master-fx{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:20px;align-items:center;padding:20px;border:1px solid var(--line);border-top:0;background:linear-gradient(90deg,rgba(88,231,242,.06),rgba(255,79,216,.04))}.master-fx div{display:grid}.master-fx span{color:var(--lime);font-size:.4rem;letter-spacing:.12em}.master-fx strong{margin-top:5px;font-family:"Archivo Black",sans-serif}.master-fx label{display:grid;grid-template-columns:1fr auto;gap:6px;color:var(--muted);font-size:.4rem;letter-spacing:.1em}.master-fx input{grid-column:1/-1;width:100%;accent-color:var(--cyan)}.master-fx output{color:var(--paper)}.studio-foot{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding:16px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.4rem;letter-spacing:.12em}.studio-foot span:first-child{color:var(--lime)}
@keyframes record-pulse{50%{opacity:.25}}@media(max-width:1050px){.transport{grid-template-columns:1fr auto auto auto}.project-name{grid-column:1}.transport__position{display:none}.transport__actions{grid-column:1/-1;justify-self:stretch}.transport__actions button{flex:1}.view-head{align-items:start;flex-direction:column}.bar-map{display:none}.sequencer,.piano-roll{overflow-x:auto}.mixer-rack{overflow-x:auto}.mixer-channel{min-width:160px}.master-fx{grid-template-columns:repeat(2,1fr)}.master-fx>div{grid-column:1/-1}}@media(max-width:650px){.studio{padding-inline:8px}.studio-head{grid-template-columns:auto 1fr auto}.studio-head__brand{justify-self:center}.studio-head__brand span{font-size:.72rem}.studio-head__status span{display:none}.transport{gap:7px}.project-name{min-width:120px}.transport__main button{min-width:38px}.transport__number{width:52px}.transport__number:nth-of-type(2){display:none}.studio-mode{display:grid;grid-template-columns:repeat(3,1fr)}.studio-mode button{justify-content:center;min-width:0;padding:0 5px;font-size:.38rem}.view-head{padding-top:38px}.view-head h1,.view-head h2{font-size:clamp(2rem,12vw,3.4rem)}.channel-row{grid-template-columns:150px repeat(16,32px);min-width:735px}.channel-id{grid-template-columns:30px 1fr auto}.channel-id>span{width:30px;height:30px}.sequence-tools{flex-wrap:wrap}.sequence-tools p{width:100%;margin-left:0}.studio-keyboard button{min-height:52px;font-size:.45rem}.master-fx{grid-template-columns:1fr}.master-fx>div{grid-column:auto}.studio-foot span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}