:root{color-scheme:dark;--bg:#050711;--panel:#101529;--panel2:#210817;--line:#ffffff25;--text:#fff;--muted:#c3c8db;--a:#22d3a6;--b:#7c3cff;--pink:#ff2d85;--cyan:#41e8ff;--warn:#ffb142;--bad:#ff4d6d;--fontScale:1}
*{box-sizing:border-box;min-width:0}html,body{max-width:100vw;overflow-x:hidden}body{margin:0;padding:8px 8px 64px;background:radial-gradient(circle at 10% 0,#22d3a61d,transparent 30%),radial-gradient(circle at 90% 0,#ff2d851a,transparent 34%),var(--bg);color:var(--text);font-family:Inter,system-ui,Arial,sans-serif;font-size:calc(14px * var(--fontScale))}.wrap{width:100%;max-width:none;margin:0 auto}.box,.brandBar,.modalCard,.toolCard{border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,var(--panel),var(--panel2));box-shadow:0 14px 38px #0008;padding:12px;margin-bottom:10px}.tabs,.actions,.transport,.profile,.deckRow,.bank,.arrangeTools,.toolTabs,.brandInner{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.btn,.pill,.bankBtn,.toolTab{border:0;border-radius:999px;padding:9px 13px;background:#475071;color:#fff;font-weight:900;text-decoration:none;cursor:pointer}.btn:disabled{opacity:.45;cursor:not-allowed}.primary{background:linear-gradient(135deg,var(--a),var(--b));color:#04130f}.hot{background:linear-gradient(135deg,var(--pink),var(--b))}.cyan{background:linear-gradient(135deg,var(--cyan),var(--b));color:#061017}.warn{background:linear-gradient(135deg,var(--warn),#d16b00);color:#1c0d00}.active{outline:2px solid var(--a)}h1{font-size:clamp(24px,3vw,42px);line-height:1;margin:0 0 6px;letter-spacing:-.035em}h2{margin:0 0 8px;font-size:22px}h3{margin:0 0 8px}.muted,small,label{color:var(--muted)}input,select,textarea{background:#070a14;border:1px solid var(--line);border-radius:12px;color:#fff;padding:9px;font:inherit}textarea{width:100%;min-height:120px}.status,.note,.danger{padding:9px 11px;border-radius:14px;background:#22d3a61c;border:1px solid #22d3a655;color:#dfffee;font-weight:800;margin-top:8px}.note{background:#ffb1421c;border-color:#ffb14255;color:#ffe8b8}.danger{background:#ff4d6d1c;border-color:#ff4d6d55;color:#ffdce2}
.brandBar{padding:8px 12px}.brandInner{justify-content:space-between}.brandLeft{display:flex;align-items:center;gap:10px}.brandLogo{width:86px;height:70px;border-radius:16px;border:1px solid #ffffff2b;background:#050505}.brandWordmark{display:grid;place-items:center;text-align:center;font-size:17px;line-height:.9;font-weight:1000;font-style:italic;letter-spacing:-.04em;color:#fff;text-shadow:0 1px 0 #000}.brandWordmark span{font-size:12px;line-height:1.1;color:#e2ba57;letter-spacing:.08em;font-style:normal}.brandText .eyebrow{font-size:11px;font-weight:1000;letter-spacing:.14em;color:#e9c76d}.brandText p{margin:0;color:var(--muted);font-size:12px}.who{display:flex;gap:9px;align-items:center}.avatar{width:48px;height:48px;border-radius:15px;background:#0008;border:2px solid var(--pink);display:grid;place-items:center;overflow:hidden;font-weight:1000}.avatar img{width:100%;height:100%;object-fit:cover}
.toolStrip{border:1px solid var(--line);border-radius:18px;background:#0a0e1d;padding:8px 10px;margin-bottom:10px;box-shadow:0 10px 28px #0006}.toolTabs{justify-content:flex-start}.toolTab{background:#1d2441;border:1px solid #ffffff18}.toolTab:hover,.toolTab:focus{background:#2a3458;outline:none}.toolTab strong{color:#fff}.toolTab .mini{font-size:11px;color:#bac2da;margin-left:4px}.patternBadge{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:999px;background:linear-gradient(135deg,var(--a),var(--b));color:#05110e;font-weight:1000}
.workspace{display:grid;grid-template-columns:1fr;gap:10px}.workspace .box{margin-bottom:0}.gridWrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#050712;max-height:650px}.seq{min-width:1320px;padding:8px}.row{display:grid;grid-template-columns:185px 40px 40px 40px repeat(16,44px);gap:4px;align-items:center;margin:4px 0}.row.head{position:sticky;top:0;z-index:8;background:#050712;padding:3px 0}.trackName{font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;padding-left:11px}.tiny{border:1px solid var(--line);background:#171c31;color:#fff;border-radius:9px;height:34px;font-weight:900;cursor:pointer}.tiny.on{background:var(--pink)}.tiny.edit{background:#262b49}.step{height:34px;border:1px solid #ffffff24;border-radius:8px;background:#0e1325;cursor:pointer;position:relative}.step:nth-child(4n+7){border-left-color:#ffffff70}.step.v1{background:#1b4260}.step.v2{background:linear-gradient(135deg,#22d3a6,#2675ff)}.step.v3{background:linear-gradient(135deg,#ffb142,#ff2d85);box-shadow:0 0 12px #ff2d8540}.step.playing:after{content:"";position:absolute;inset:-3px;border:2px solid var(--warn);border-radius:10px}.pitchLane{display:grid;grid-template-columns:repeat(16,minmax(48px,1fr));gap:4px;overflow:auto;padding-bottom:2px}.pitchCell{display:grid;gap:3px;text-align:center}.pitchCell input{width:100%;padding:6px 4px}.workspaceTitle{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}.workspaceTitle p{margin:0}.transportDock{margin-top:0}.transport{gap:7px}.transport label{display:flex;gap:6px;align-items:center}.transport input[type=number]{width:78px}.transport input[type=range]{width:125px}.transportDock .transport{justify-content:flex-start}.transportDock .btn{padding:9px 14px}.transportMeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}.transportMeta .status{flex:1;margin:0;min-width:280px}.meter{height:12px;border-radius:999px;background:#0008;border:1px solid var(--line);overflow:hidden;min-width:140px}.meter>div{height:100%;width:0;background:linear-gradient(90deg,var(--a),var(--warn),var(--pink))}
.toolOverlay,.modal{position:fixed;inset:0;background:#000c;display:none;z-index:100000;align-items:flex-start;justify-content:center;padding:28px 16px;overflow:auto;backdrop-filter:blur(8px)}.toolOverlay.open,.modal.open{display:flex}.toolCard,.modalCard{width:min(1100px,96vw);max-height:88vh;overflow:auto;padding:16px}.toolCard.wide{width:min(1450px,97vw)}.modalCard{width:min(920px,96vw)}.toolHead,.modalHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid #ffffff18;padding-bottom:11px;margin-bottom:12px}.toolHead p,.modalHead p{margin:4px 0 0}.toolClose{flex:0 0 auto}.arrangement{display:flex;gap:8px;overflow:auto;padding:6px 2px 4px}.sectionCard{min-width:185px;border:1px solid var(--line);border-radius:15px;padding:9px;background:#ffffff08}.sectionCard.playing{outline:2px solid var(--warn)}.sectionCard input,.sectionCard select{width:100%;margin-top:4px}.sectionCard .actions{margin-top:7px}.sectionCard .btn{padding:6px 9px;font-size:11px}.songStats{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.stat{padding:6px 9px;border-radius:999px;background:#ffffff0d;border:1px solid var(--line);font-weight:900}.bankBtn{padding:8px 11px}.bankBtn.active{background:linear-gradient(135deg,var(--a),var(--b));color:#04130f}.presetGrid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:8px}.mixer{display:grid;gap:10px}.mixRow{display:grid;grid-template-columns:1fr 180px;gap:8px;align-items:center}.decks{display:grid;grid-template-columns:repeat(2,minmax(180px,280px));gap:18px;justify-content:center}.deck{aspect-ratio:1;border-radius:50%;border:7px solid #272b3d;background:radial-gradient(circle,#050505 0 12%,#1a1a1a 13% 18%,#070707 19% 34%,#181818 35% 38%,#070707 39% 55%,#191919 56% 59%,#050505 60% 100%);display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 2px #ffffff15,0 10px 30px #0008;user-select:none}.deck span{width:42%;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--b));display:grid;place-items:center;text-align:center;font-size:11px;font-weight:1000}.projectGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.info{font-size:12px;line-height:1.5;color:var(--muted)}.editorGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.field{display:grid;gap:6px}.field input,.field select{width:100%}.wide{grid-column:1/-1}.sampleTag{font-size:12px;color:#dfffee}
@media(max-width:1100px){.brandLogo{width:78px;height:58px}.presetGrid{grid-template-columns:repeat(2,minmax(120px,1fr))}.editorGrid{grid-template-columns:1fr 1fr}.projectGrid{grid-template-columns:1fr 1fr}.toolTab{flex:1 1 calc(33.333% - 8px)}.row{grid-template-columns:165px 38px 38px 38px repeat(16,42px)}}
@media(max-width:720px){body{padding:6px 6px 76px}.brandLeft{width:100%}.brandLogo{width:74px;height:54px}.toolTab{flex:1 1 calc(50% - 8px)}.editorGrid,.projectGrid{grid-template-columns:1fr}.presetGrid{grid-template-columns:1fr 1fr}.btn,.pill{width:auto}.row{grid-template-columns:145px 36px 36px 36px repeat(16,40px)}.transport label{width:100%;justify-content:space-between}.transport input[type=range]{flex:1}.mixRow{grid-template-columns:1fr}.decks{grid-template-columns:1fr 1fr}.toolOverlay,.modal{padding:12px 6px}}