@font-face{font-family:"Archivo Black";src:url(../assets/fonts/archivo-black-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#0a0a0b;--panel:#141619;--panel-2:#1c1f23;--panel-3:#262a2f;--line:#2f3338;--line-2:#3d4248;
  --text:#eef3f9;--muted:#aab1bd;--dim:#8a919c;
  --pink:#ff3d64;--pink-2:#ff6b8a;--blue:#4d7cff;--blue-2:#7d9fff;--sun:#f9b60f;--green:#3ddc97;
  --r:12px;--r-sm:8px;
  --display:"Archivo Black",Impact,"Arial Black",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --topbar:60px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 45% at 10% 0%,rgba(255,61,100,.12),transparent 70%),radial-gradient(35% 40% at 95% 5%,rgba(77,124,255,.14),transparent 70%),radial-gradient(30% 35% at 60% 100%,rgba(249,182,15,.06),transparent 70%)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue-2)}
h1,h2,h3{margin:0;font-weight:400}
h2{font:400 15px/1.2 var(--display);text-transform:uppercase;letter-spacing:.04em}
h3{font:700 12px/1.3 var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--sun);color:#000;padding:10px 14px;border-radius:8px;z-index:200;font-weight:700}
.skip:focus{top:10px}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:6px}
kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--panel-2);font:600 11px/1.5 var(--body);text-align:center;color:var(--text)}
.hint{color:var(--muted);font-size:12.5px;margin:0 0 10px}
.eyebrow{font:700 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--sun);margin:0 0 10px}
.count{font:600 12px var(--body);color:var(--muted);letter-spacing:0;margin-left:4px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid transparent;font:700 13.5px/1 var(--body);letter-spacing:.01em;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s var(--ease),background .15s,border-color .15s,color .15s,box-shadow .2s;user-select:none}
.btn svg{width:17px;height:17px;flex:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:#e11d48;color:#fff;box-shadow:0 6px 24px -8px rgba(255,61,100,.7)}
.btn-primary:hover{background:#be123c}
.btn-ghost{background:var(--panel-2);border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--blue-2);background:var(--panel-3)}
.btn-ghost[aria-pressed="true"]{border-color:var(--sun);color:var(--sun);background:rgba(249,182,15,.1)}
.btn-sm{min-height:34px;padding:0 13px;font-size:12.5px}
.btn-xs{min-height:30px;padding:0 11px;font-size:12px}
.btn-lg{min-height:52px;padding:0 28px;font-size:16px}
.btn:disabled,.icon-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-rec .dot{width:10px;height:10px;border-radius:50%;background:var(--pink)}
.btn-rec{background:var(--panel-2);border-color:var(--line-2)}
.btn-rec[aria-pressed="true"]{background:var(--pink);color:#fff;border-color:var(--pink)}
.btn-rec[aria-pressed="true"] .dot{background:#fff;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--panel-2);cursor:pointer;font-weight:800;transition:border-color .15s,background .15s}
.icon-btn:hover{border-color:var(--blue-2)}
.icon-btn svg{width:18px;height:18px}
.icon-btn.sm{width:30px;height:30px;border-radius:8px}
.icon-btn.sm svg{width:15px;height:15px}
.icon-btn.danger:hover{border-color:var(--pink);color:var(--pink-2)}
.row-btns{display:flex;gap:6px;align-items:center}
.row-btns.wrap{flex-wrap:wrap}

/* Inputs */
input[type=search],input[type=text],input[type=number],select,textarea{background:var(--panel-2);border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:7px 10px;min-height:36px;width:100%}
textarea{resize:vertical;font-weight:700}
select{cursor:pointer}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sun);outline-offset:1px}
input[type=color]{width:100%;height:34px;padding:2px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel-2);cursor:pointer}
input[type=range]{width:100%;accent-color:var(--pink);height:22px;cursor:pointer}
input[type=checkbox]{accent-color:var(--pink);width:16px;height:16px;vertical-align:-3px;margin-right:6px}
label{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:8px}
label output{float:right;color:var(--text);font-variant-numeric:tabular-nums}
.field{display:grid;gap:10px}
.field.two{grid-template-columns:1fr 1fr}
.field.three{grid-template-columns:1fr 1fr 1fr}

/* Topbar */
.topbar{height:var(--topbar);display:flex;align-items:center;gap:16px;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(10,10,11,.9);backdrop-filter:blur(8px);position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);min-width:0}
.brand img{height:20px;width:auto}
.brand-tag{font:400 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--sun);padding:5px 8px;border-radius:5px;white-space:nowrap}
.modes{display:flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;margin-left:auto}
.mode-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:0 16px;height:36px;border-radius:999px;font:700 13px var(--body);cursor:pointer;color:var(--muted);transition:background .2s,color .2s}
.mode-btn svg{width:17px;height:17px}
.mode-btn[aria-selected="true"]{background:var(--text);color:#0a0a0b}
.mode-btn:hover:not([aria-selected="true"]){color:var(--text)}
.top-actions{display:flex;gap:8px;align-items:center;margin-left:auto}

main{height:calc(100% - var(--topbar))}
.mode{height:100%;display:grid;gap:12px;padding:12px;min-height:0}
.mode[hidden]{display:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-height:0;overflow:auto;padding:14px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.card:last-child{margin-bottom:0}

/* ART */
.art-mode{grid-template-columns:270px minmax(0,1fr) 340px}
.gallery-tools{display:grid;grid-template-columns:1fr 104px;gap:8px;margin-bottom:8px}
.gallery-hint{font-size:12px}
.gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gallery li{position:relative}
.gallery button{display:block;width:100%;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--panel-2);aspect-ratio:1;transition:transform .15s var(--ease),border-color .15s}
.gallery button:hover{transform:scale(1.04);border-color:var(--blue-2)}
.gallery button[aria-pressed="true"]{border-color:var(--sun)}
.gallery button[aria-pressed="true"]::after{content:"✓";position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:var(--sun);color:#000;font:800 12px/20px var(--body);text-align:center}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery .up-badge{position:absolute;left:4px;bottom:4px;font:700 9px var(--body);background:var(--blue);color:#fff;padding:2px 5px;border-radius:4px;text-transform:uppercase}

.stage-wrap{display:flex;flex-direction:column;min-width:0;min-height:0;gap:10px}
.stage-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px}
.seg{display:flex;gap:4px;align-items:center}
.seg select{width:auto;min-height:36px}
.tool-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border-radius:9px;border:1.5px solid var(--line-2);background:var(--panel-2);cursor:pointer;font-weight:700;font-size:12.5px}
.tool-btn svg{width:16px;height:16px}
.tool-btn[aria-pressed="true"]{border-color:var(--pink);background:rgba(255,61,100,.14);color:#fff}
.spacer{flex:1}
.doc-info{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
#stage-canvas,#overlay-canvas{grid-area:1/1;width:min(100%,calc(100vh - var(--topbar) - 110px));height:auto;aspect-ratio:1;max-height:100%}
#stage-canvas{background-color:#1a1c1f;background-image:linear-gradient(45deg,#24272b 25%,transparent 25%,transparent 75%,#24272b 75%),linear-gradient(45deg,#24272b 25%,transparent 25%,transparent 75%,#24272b 75%);background-size:24px 24px;background-position:0 0,12px 12px;border-radius:6px;box-shadow:0 30px 80px -30px rgba(255,61,100,.4),0 0 0 1px rgba(255,255,255,.06);touch-action:none;cursor:grab}
#stage-canvas:active{cursor:grabbing}
body[data-tool="crop"] #stage-canvas,body[data-tool="pick"] #stage-canvas{cursor:crosshair}
#overlay-canvas{pointer-events:none}
.empty{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:rgba(10,10,11,.72);backdrop-filter:blur(3px)}
.empty[hidden]{display:none}
.empty-card{max-width:520px;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:28px;box-shadow:0 30px 90px -30px rgba(77,124,255,.5)}
.empty-card h1{font:400 clamp(28px,4vw,40px)/1 var(--display);text-transform:uppercase;margin-bottom:16px;background:linear-gradient(90deg,#fff,var(--pink-2) 60%,var(--sun));-webkit-background-clip:text;background-clip:text;color:transparent}
.steps{margin:0 0 20px;padding-left:20px;color:var(--muted)}
.steps li{margin-bottom:6px}
.steps b{color:var(--text)}
.empty-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.crop-bar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line-2);border-radius:999px;padding:6px 8px 6px 16px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.crop-bar[hidden]{display:none}

.tools-panel{display:flex;flex-direction:column;padding:0;overflow:hidden}
.layers-box{padding:14px;border-bottom:1px solid var(--line);flex:none;max-height:50%;overflow:auto;scrollbar-gutter:stable}
.layers{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:4px}
.layer{display:grid;grid-template-columns:30px 40px minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px;border-radius:9px;border:1.5px solid transparent;background:var(--panel-2);cursor:pointer}
.layer[aria-current="true"]{border-color:var(--pink);background:rgba(255,61,100,.1)}
.layer .vis{width:30px;height:30px;border-radius:7px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.layer .vis[aria-pressed="false"]{opacity:.45}
.layer .vis svg{width:17px;height:17px}
.layer .thumb{width:40px;height:40px;border-radius:6px;background:#1a1c1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='5' height='5' fill='%2324272b'/%3E%3Crect x='5' y='5' width='5' height='5' fill='%2324272b'/%3E%3C/svg%3E");object-fit:contain}
.layer>div{min-width:0}
.layer .lname{display:block;font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer .lmeta{display:block;font-size:11px;color:var(--muted);font-weight:500}
.layer-props{border-top:1px dashed var(--line-2);padding-top:10px}
.layer-props[hidden]{display:none}
.tool-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:10px 12px;flex:none;border-bottom:1px solid var(--line)}
.tool-tabs button{border:1.5px solid var(--line-2);background:var(--panel-2);padding:6px 4px;border-radius:999px;font:700 12px var(--body);color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.tool-tabs button:hover{color:var(--text);border-color:var(--muted)}
.tool-tabs button[aria-selected="true"]{color:#fff;background:rgba(255,61,100,.18);border-color:var(--pink)}
.tool-body{flex:1;overflow:auto;padding:12px 14px 14px;min-height:0}
.tab-pane[hidden]{display:none}
.palette{display:flex;gap:4px;margin:0 0 10px;min-height:22px;flex-wrap:wrap}
.palette span,.swatch{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.2);display:inline-block}
.swatch{background:repeating-linear-gradient(45deg,#555 0 4px,#333 4px 8px)}
.key-swatch-row{display:flex;gap:6px;align-items:center;margin-top:4px}
#curves{width:100%;max-width:256px;aspect-ratio:1;display:block;margin:0 auto 10px;background:#0e0f11;border-radius:8px;border:1px solid var(--line-2);touch-action:none;cursor:pointer}
.grads{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.grads button{height:34px;border-radius:8px;border:2px solid transparent;cursor:pointer;font:700 11px var(--body);color:#fff;text-shadow:0 1px 3px #000}
.grads button[aria-checked="true"]{border-color:#fff}
.looks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.look{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:6px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--panel-2);cursor:pointer;font:700 12px var(--body);text-align:left;transition:border-color .15s,transform .15s var(--ease)}
.look:hover{border-color:var(--pink);transform:translateY(-1px)}
.look canvas,.look img{width:100%;aspect-ratio:1;border-radius:6px;background:#1a1c1f}
.look small{font-weight:500;color:var(--muted)}
.ex-result{margin-top:12px;font-size:12.5px}
.ex-result .ok{color:var(--green);font-weight:700}
.ex-result code{font-size:11.5px;background:var(--panel-3);padding:1px 5px;border-radius:4px}
.ex-result a.btn{margin-top:8px}

/* SOUND */
.sound-mode{grid-template-columns:270px minmax(0,1fr) 330px;position:relative}
.audio-gate{position:absolute;inset:0;z-index:15;display:grid;place-items:center;padding:20px;background:rgba(10,10,11,.8);backdrop-filter:blur(4px)}
.audio-gate[hidden]{display:none}
.audio-gate p{color:var(--muted)}
.inst-panel{display:flex;flex-direction:column;gap:10px}
.inst-panel .panel-head{margin-bottom:0}
.cats{display:flex;flex-wrap:wrap;gap:5px}
.cats button{border:1.5px solid var(--line-2);background:var(--panel-2);border-radius:999px;padding:4px 10px;font:600 11.5px var(--body);cursor:pointer;color:var(--muted)}
.cats button span{color:var(--dim);margin-left:3px}
.cats button[aria-selected="true"]{border-color:var(--blue-2);color:#fff;background:rgba(77,124,255,.2)}
.cats button[aria-selected="true"] span{color:#cfdaff}
.inst-list{list-style:none;margin:0;padding:0;flex:1;overflow:auto;min-height:120px;border-top:1px solid var(--line);padding-top:6px}
.inst-list button{display:flex;width:100%;justify-content:space-between;gap:8px;align-items:center;text-align:left;border:0;background:transparent;padding:7px 9px;border-radius:8px;cursor:pointer;font:600 13px var(--body);color:var(--text)}
.inst-list button:hover{background:var(--panel-2)}
.inst-list button[aria-current="true"]{background:rgba(255,61,100,.16);color:#fff;box-shadow:inset 3px 0 0 var(--pink)}
.inst-list small{color:var(--muted);font-weight:500;font-size:11px;white-space:nowrap}
.inst-list .grp{font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--sun);padding:10px 9px 4px}
.gm-bank{margin:0}
.gm-bank select{margin-top:4px}
.play-area{min-width:0;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:2px}
.inst-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.cur-name{font:400 clamp(24px,3vw,38px)/1 var(--display);text-transform:uppercase;margin-bottom:6px}
.inst-head .hint{margin:0}
.transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.transport .bpm{display:flex;align-items:center;gap:6px;margin:0}
.transport .bpm input{width:72px}
.transport .swing{margin:0;width:130px}
.beat-led{width:12px;height:12px;border-radius:50%;background:var(--panel-3);border:1px solid var(--line-2)}
.beat-led.on{background:var(--sun);box-shadow:0 0 12px var(--sun)}
.beat-led.on.down{background:var(--pink);box-shadow:0 0 14px var(--pink)}
.kb-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
.kb-controls label{margin:0;min-width:140px}
.oct{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--muted)}
.oct b{color:var(--text)}
.arp{display:flex;gap:6px;align-items:center}
.arp select{width:auto;min-height:34px;padding:4px 8px}
.keyboard-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;scrollbar-width:thin}
.keyboard{position:relative;height:170px;display:flex;min-width:640px;user-select:none;touch-action:none}
.key{position:relative;flex:1;border:1px solid #1a1a1a;border-radius:0 0 8px 8px;background:linear-gradient(#fafafa,#e6e9ee);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font:700 11px var(--body);color:#5a606a;transition:background .06s}
.key.black{position:absolute;top:0;height:62%;z-index:2;background:linear-gradient(#2a2d33,#0d0e10);color:#9aa3b0;border-color:#000;border-radius:0 0 6px 6px}
.key.on{background:linear-gradient(#ff8aa4,var(--pink));color:#fff}
.key.black.on{background:linear-gradient(var(--blue-2),var(--blue));color:#fff}
.key .kl{display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.key .kc{font-size:9.5px;opacity:.7;text-transform:uppercase}
.kb-hint{margin:-4px 4px 0}
.seq{background:var(--panel);margin:0}
.seq-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.seq-head h3{margin:0}
.seq-head label{display:flex;align-items:center;gap:6px;margin:0}
.seq-head select{width:auto;min-height:32px;padding:3px 8px}
.seq-head .hint{margin:0}
.seq-grid{display:grid;grid-template-columns:110px repeat(16,minmax(22px,1fr));gap:4px;overflow-x:auto}
.seq-grid .rl{display:flex;align-items:center;justify-content:space-between;gap:4px;font:600 12px var(--body);color:var(--muted);padding-right:4px;white-space:nowrap}
.seq-grid .rl button{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:2px 4px;border-radius:5px;font:600 12px var(--body)}
.seq-grid .rl button:hover{color:var(--text)}
.step{height:30px;border-radius:6px;border:1.5px solid var(--line-2);background:var(--panel-2);cursor:pointer;padding:0;transition:background .08s}
.step.q{background:#22262b}
.step[aria-pressed="true"]{background:var(--blue);border-color:var(--blue-2)}
.step.acc[aria-pressed="true"]{background:var(--pink);border-color:var(--pink-2)}
.step.now{box-shadow:0 0 0 2px var(--sun) inset}
.side-panel{display:flex;flex-direction:column;gap:0}
.takes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.take{background:var(--panel-3);border-radius:9px;padding:8px 10px;display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center}
.take b{font-size:12.5px}
.take small{color:var(--muted);font-size:11px;grid-column:1}
.take .row-btns{grid-row:1/3;grid-column:2}
.take audio{display:none}
.bt-name{font-weight:700;margin:8px 0 6px;word-break:break-all}
#bt-wave{width:100%;height:60px;background:#0e0f11;border-radius:8px;display:block;margin-bottom:8px}
.mixer{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.strip{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--panel-3);border-radius:9px;padding:8px 4px}
.strip b{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.strip .fader{writing-mode:vertical-lr;direction:rtl;width:22px;height:110px}
.strip .meter{width:6px;height:110px;background:#0e0f11;border-radius:3px;position:relative;overflow:hidden}
.strip .meter i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,var(--green),var(--sun) 75%,var(--pink))}
.strip .fm{display:flex;gap:4px;align-items:flex-end}
.strip .mute{width:28px;height:24px;border-radius:6px;border:1.5px solid var(--line-2);background:var(--panel-2);font:800 11px var(--body);cursor:pointer}
.strip .mute[aria-pressed="true"]{background:var(--sun);color:#000;border-color:var(--sun)}
.strip output{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fx-rack{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.fx{background:var(--panel-3);border-radius:9px;padding:8px 10px}
.fx-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fx-top b{font-size:12.5px}
.switch{position:relative;width:38px;height:22px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--panel-2);cursor:pointer;padding:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--muted);transition:transform .15s var(--ease),background .15s}
.switch[aria-checked="true"]{background:rgba(255,61,100,.25);border-color:var(--pink)}
.switch[aria-checked="true"]::after{transform:translateX(16px);background:var(--pink)}
.fx .field{gap:8px}
.fx label{margin-bottom:2px}

/* Overlays */
.toast-zone{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:100;pointer-events:none;width:min(92vw,460px)}
.toast{background:var(--panel-3);border:1px solid var(--line-2);border-left:4px solid var(--blue);color:var(--text);padding:10px 14px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);font-weight:600;animation:tin .25s var(--ease)}
.toast.ok{border-left-color:var(--green)}
.toast.err{border-left-color:var(--pink)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
.busy{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:rgba(10,10,11,.6);z-index:120;font-weight:700}
.busy[hidden]{display:none}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--line-2);border-top-color:var(--pink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line-2);border-radius:16px;padding:0;max-width:min(860px,94vw);width:100%;max-height:88vh;box-shadow:0 40px 120px rgba(0,0,0,.7)}
dialog::backdrop{background:rgba(5,5,6,.7);backdrop-filter:blur(3px)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
.dlg-head h2{font-size:18px}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:18px 20px 22px}
.help-grid dl{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;margin:0;align-items:center}
.help-grid dt{white-space:nowrap}
.help-grid dd{margin:0;color:var(--muted)}
.credits{padding:16px 22px 22px;color:var(--muted)}
.credits h3{margin:18px 0 8px}
.credits b{color:var(--text)}
.credits li{margin-bottom:8px}

/* Responsive */
@media (max-width:1280px){
  .art-mode{grid-template-columns:220px minmax(0,1fr) 320px}
  .sound-mode{grid-template-columns:230px minmax(0,1fr) 300px}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1020px){
  body{overflow:auto}
  main{height:auto}
  .mode{height:auto;grid-template-columns:1fr!important}
  .art-mode .stage-wrap{order:1}
  .art-mode .gallery-panel{order:2;max-height:none}
  .art-mode .tools-panel{order:3;overflow:visible}
  .layers-box{max-height:none}
  .gallery{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:88px;overflow-x:auto;padding-bottom:6px}
  #stage-canvas,#overlay-canvas{width:min(100%,640px)}
  .stage{padding:10px;min-height:300px}
  .sound-mode .inst-panel{max-height:420px}
  .play-area{overflow:visible}
  .audio-gate{position:fixed;top:var(--topbar)}
  .help-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .topbar{padding:0 10px;gap:8px}
  .brand img{height:14px}
  .brand-tag{display:none}
  .mode-btn{padding:0 11px}
  .mode-btn svg{display:none}
  #btn-credits{display:none}
  .mode{padding:8px;gap:8px}
  .stage-toolbar .tool-btn span{display:none}
  .doc-info{display:none}
  .help-grid{grid-template-columns:1fr}
  .seq-grid{grid-template-columns:84px repeat(16,26px)}
  .mixer{grid-template-columns:repeat(5,minmax(54px,1fr));overflow-x:auto}
  .empty-card{padding:20px}
  .field.three{grid-template-columns:1fr 1fr 1fr}
  .kb-controls label{min-width:120px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .spinner{animation:spin 1.6s linear infinite!important;animation-iteration-count:infinite!important;animation-duration:1.6s!important}
}
@media (forced-colors:active){.step[aria-pressed="true"],.key.on{forced-color-adjust:none}}

@media (min-width:1021px){.toast-zone{left:auto;right:16px;transform:none;width:360px}}
.rec-grid{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px 10px;align-items:center;margin-bottom:10px}
.rec-grid .rl{font:700 12px var(--body);color:var(--muted);margin:0}
.rec-grid .rc{margin:0;font-size:12px}
.rec-grid select{width:100%;min-height:34px}
.rec-grid .span2{grid-column:span 2}
.rec-grid .btn{justify-content:center;white-space:nowrap}
.play-area>*{flex:none}
@media (max-width:760px){.stage-toolbar{flex-wrap:wrap}.stage-toolbar #btn-export-quick{margin-left:auto}}
@media (max-width:640px){.toast:not(:last-child){display:none}.toast{font-size:14px;padding:8px 12px}}
.nf{display:grid;place-items:center;min-height:100vh;text-align:center}
.nf-box{display:grid;gap:14px;justify-items:center;padding:24px}
.nf-box img{max-width:70vw;height:auto}
.nf-box h1{font-family:var(--display);margin:8px 0 0}

/* Finishing & space */
.fin-card .fx-top h3{margin:0}
.fin-card.on{border-color:var(--pink)}
.fin-card>select{width:100%;margin-bottom:10px}
.fin-sec{border-top:1px solid var(--line);padding:6px 0}
.fin-sec summary{cursor:pointer;font:700 12.5px var(--body);color:var(--text);padding:6px 2px;border-radius:6px;list-style-position:inside}
.fin-sec[open] summary{margin-bottom:6px}
.fin-sec .field{gap:4px 10px}
.fin-sec label select{width:100%;margin-top:4px}
.fin-sec label.chk,.chk{display:flex;align-items:center;gap:8px;color:var(--text);margin:4px 0 8px}
#fin-preview{width:100%;justify-content:center;margin:8px 0 10px}
.fin-meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 8px}
.fin-meters div{background:var(--panel-3);border-radius:8px;padding:6px 8px;min-width:0;border:1px solid transparent}
.fin-meters div.ok{border-color:var(--green)}
.fin-meters div.warn{border-color:var(--sun)}
.fin-meters dt{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-meters dd{margin:2px 0 0;font:700 12.5px var(--body);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fin-graph{width:100%;height:70px;background:#0e0f11;border-radius:8px;display:block;margin-bottom:8px}
#fin-report{margin:0;overflow-wrap:anywhere}
.kb-mode{display:inline-flex;border:1.5px solid var(--line-2);border-radius:999px;overflow:hidden;vertical-align:middle}
.kb-mode button{border:0;background:transparent;color:var(--muted);font:700 12px var(--body);padding:6px 12px;cursor:pointer;min-height:32px}
.kb-mode button[aria-checked="true"]{background:var(--pink);color:#000}
.kb-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 4px 0}
.kb-bar .kb-hint{margin:0;flex:1 1 240px}
.help-grid dd{overflow-wrap:anywhere}
@media (max-width:640px){.fin-meters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.fin-sec .field.two{grid-template-columns:1fr}}