:root{--bg:#111112;--panel:#19191c;--field:#101013;--control:#222226;--control-hover:#2a2a2f;--line:#34343a;--line-strong:#5c5c66;--ink:#f5f1e8;--muted:#b7b0a3;--accent-green:#48dbb5;--accent-green-soft:#48dbb524;--accent-yellow:#ffd166;--accent-red:#ff6b6b;--mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;color:var(--ink);background:linear-gradient(180deg, #48dbb514, transparent 310px), radial-gradient(circle at 50% 0%, #ffd16614, transparent 330px), var(--bg);font-synthesis:none;letter-spacing:0;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--bg);min-width:320px}body{min-width:320px;min-height:100svh;margin:0}h1,h2,p{margin-block-start:0}h1{color:var(--ink);letter-spacing:0;font-size:clamp(2.4rem,4vw,4.7rem);line-height:.95}h2{color:var(--ink);letter-spacing:0;font-size:1.05rem;line-height:1.2}#root{min-height:100svh}.studio-shell{min-height:100svh;color:var(--ink);padding:24px}.topbar,.transport,.workspace-grid,.toast{width:min(1440px,100%);margin:0 auto}.topbar{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding:8px 0 20px;display:grid}.topbar h1{margin:0}.subtitle{max-width:760px;color:var(--muted)}.eyebrow{color:var(--accent-green);letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;font-size:.75rem;font-weight:800}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.icon-link,.version-chip,button{border:1px solid var(--line);background:var(--control);min-height:40px;color:var(--ink);font:inherit;border-radius:8px}.icon-link,button{cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:0 13px;text-decoration:none;display:inline-flex}.icon-link:hover,button:hover{border-color:var(--line-strong);background:var(--control-hover)}.icon-link:focus-visible,button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #48dbb559}.support{color:var(--accent-yellow)}.version-chip{color:var(--muted);font-family:var(--mono);align-items:center;padding:0 12px;font-size:.82rem;display:inline-flex}.toast{border:1px solid var(--line);background:var(--panel);min-height:44px;color:var(--muted);box-sizing:border-box;border-radius:8px;align-items:center;gap:10px;padding:0 14px;display:flex}.toast-success{color:var(--accent-green)}.toast-warning{color:var(--accent-red)}.transport{grid-template-columns:minmax(220px,.8fr) minmax(300px,1fr) minmax(220px,.7fr);align-items:end;gap:16px;padding:18px 0;display:grid}.project-title,.tempo-control,.collab-panel label,.mixer-strip label{color:var(--muted);gap:8px;font-size:.85rem;font-weight:700;display:grid}input{border:1px solid var(--line);background:var(--field);width:100%;min-height:40px;color:var(--ink);box-sizing:border-box;font:inherit;border-radius:8px}input[type=text],.project-title input,.collab-panel input,.paste-box textarea{padding:0 12px}.paste-box textarea{resize:vertical;min-height:112px;padding-block:10px}input[type=range]{accent-color:var(--accent-green)}.transport-buttons,.button-row,.toggle-pair{flex-wrap:wrap;gap:8px;display:flex}.primary{background:var(--accent-green-soft);border-color:#48dbb58c}.workspace-grid{grid-template-columns:minmax(0,1fr) minmax(310px,380px);align-items:start;gap:18px;display:grid}.sequencer-panel,.panel{-webkit-backdrop-filter:blur(12px);background:#1e1e2399;border:1px solid #ffffff1a;border-radius:12px;box-shadow:0 8px 32px #0000005e}.sequencer-panel{overflow:hidden}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:18px;display:flex}.panel-heading h2{margin:0}.panel-heading.compact{padding:15px}.step-count{width:min(520px,48vw);color:var(--muted);font-family:var(--mono);grid-template-columns:repeat(16,1fr);gap:4px;font-size:.72rem;display:grid}.step-count span{border:1px solid var(--line);border-radius:6px;place-items:center;min-width:0;min-height:24px;display:grid}.step-count .is-current{border-color:var(--accent-yellow);color:var(--accent-yellow)}.track-list{display:grid}.track-row{border-bottom:1px solid var(--line);grid-template-columns:minmax(150px,220px) minmax(460px,1fr);align-items:center;gap:14px;padding:14px 18px;display:grid}.track-row:last-child{border-bottom:0}.track-meta,.mixer-strip-title{align-items:center;gap:10px;min-width:0;display:flex}.track-meta div{min-width:0;display:grid}.track-meta strong,.mixer-strip-title strong{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track-meta span:not(.track-color){color:var(--muted);font-size:.82rem}.track-color{border-radius:7px;flex:none;width:13px;height:32px;box-shadow:0 0 24px}.step-grid{grid-template-columns:repeat(16,minmax(28px,1fr));gap:6px;display:grid}.step-cell{aspect-ratio:1;border-color:var(--line);background:var(--field);min-width:0;padding:0}.step-cell span{background:0 0;border-radius:999px;width:42%;height:42%}.step-cell.is-on{border-color:color-mix(in srgb, var(--track-color) 75%, white 0%);background:color-mix(in srgb, var(--track-color) 20%, var(--field))}.step-cell.is-on span{background:var(--track-color);box-shadow:0 0 18px var(--track-color)}.step-cell.is-current{outline:2px solid var(--accent-yellow);outline-offset:1px;animation:1s infinite pulse}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.side-panels{gap:18px;display:grid}.panel{padding-bottom:14px}.mixer-strip{border-bottom:1px solid var(--line);gap:10px;padding:14px 15px;display:grid}.mixer-strip:last-child{border-bottom:0}.toggle-pair{grid-template-columns:1fr 1fr;display:grid}.toggle-pair button.is-active{border-color:var(--accent-yellow);color:var(--accent-yellow)}.dimmed-note,.peer-count,.storage-meta{color:var(--muted);margin:0;font-size:.86rem}.import-summary,.import-failure-card,.import-report{border:1px solid var(--line);background:var(--field);border-radius:8px}.import-summary{gap:6px;padding:10px 12px;display:grid}.import-summary-line,.decision-line,.issue-card p,.import-failure-card p{color:var(--muted);margin:0;font-size:.84rem}.import-summary[data-state=imported-clean]{border-color:#48dbb573}.import-summary[data-state=imported-low-confidence],.import-failure-card{border-color:#ff6b6b8c}.import-report{overflow:hidden}.import-report summary{cursor:pointer;color:var(--ink);padding:10px 12px;font-size:.88rem;font-weight:700}.import-report-body{gap:10px;padding:0 12px 12px;display:grid}.issue-card{border:1px solid var(--line);background:var(--panel);border-radius:8px;gap:6px;padding:10px;display:grid}.issue-card strong,.import-failure-card strong{color:var(--ink);font-size:.88rem}.issue-info{border-color:#74b9ff59}.issue-warning{border-color:#ffd16659}.issue-error{border-color:#ff6b6b8c}.import-failure-card{gap:6px;padding:12px;display:grid}.collab-panel,.storage-panel{gap:12px;padding-inline:15px;display:grid}.drop-zone,.paste-box textarea{border:1px dashed var(--line);background:var(--field);border-radius:8px}.drop-zone{color:var(--muted);text-align:center;gap:4px;padding:14px 12px;display:grid}.drop-zone strong{color:var(--ink)}.drop-zone p{margin:0;font-size:.84rem}.drop-zone.is-active{background:#48dbb514;border-color:#48dbb58c}.paste-box{gap:6px;display:grid}.collab-panel .panel-heading,.storage-panel .panel-heading{margin-inline:-15px}.wide,.share-url{width:100%}.share-url{color:var(--accent-green);font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;justify-content:flex-start;font-size:.78rem;overflow:hidden}.debug-panel{border:1px solid var(--line);background:var(--panel);border-radius:8px;width:min(1440px,100%);margin:18px auto 0;overflow:hidden}.debug-panel summary{cursor:pointer;color:var(--ink);padding:12px 14px;font-weight:700}.debug-panel pre{color:var(--muted);font-family:var(--mono);margin:0;padding:0 14px 14px;font-size:.78rem;overflow:auto}@media (width<=1080px){.topbar,.transport,.workspace-grid{grid-template-columns:1fr}.topbar-actions{justify-content:flex-start}.track-row{grid-template-columns:1fr}.step-count{width:100%}}@media (width<=720px){.studio-shell{padding:14px}.topbar h1{font-size:2rem}.panel-heading,.track-row{padding:14px}.step-grid{gap:4px}.icon-link,button{width:100%}}.performance-zone{border-top:1px solid var(--line);background:#0000001a;padding:18px}.visualizer-container{border:1px solid var(--line);background:var(--field);border-radius:8px;height:100px;margin-top:20px;overflow:hidden}.live-pads{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;margin-top:12px;margin-bottom:20px;display:grid}.pad{aspect-ratio:1.2;border:1px solid var(--line);background:var(--control);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;transition:all .1s cubic-bezier(.4,0,.2,1);display:flex}.pad:hover{background:var(--control-hover);border-color:var(--line-strong)}.pad:active,.pad.is-active{background:color-mix(in srgb, var(--track-color) 40%, var(--control));border-color:var(--track-color);box-shadow:0 0 20px color-mix(in srgb, var(--track-color) 30%, transparent);transform:scale(.96)}.pad strong{color:var(--ink);font-size:.9rem}.key-hint{font-size:.7rem;font-family:var(--mono);opacity:.4;color:var(--muted);margin-bottom:4px;font-weight:800}.accelerometer-status{color:var(--muted);align-items:center;gap:10px;margin-bottom:12px;font-size:.75rem;display:flex}.mini-btn{background:var(--accent-green-soft);border-color:var(--accent-green);min-height:28px;color:var(--accent-green);padding:0 10px;font-size:.75rem}@media (width<=720px){.live-pads{grid-template-columns:repeat(3,1fr)}}.track-row.is-muted{opacity:.4;filter:grayscale(.8);transition:all .3s}.track-row.is-soloed{border-left:4px solid var(--accent-yellow);background:#ffe6000d}.track-name-row{align-items:center;gap:8px;margin-bottom:2px;display:flex}.badge{text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:1px 5px;font-size:.6rem;font-weight:900}.solo-badge{background:var(--accent-yellow);color:#000}.mute-badge{background:var(--accent-red);color:#fff}.mixer-selectors{grid-template-columns:1fr 1fr;gap:6px;margin:6px 0;display:grid}.mixer-sound-selector{color:var(--muted);border:1px solid var(--line);background:#00000040;border-radius:6px;align-items:center;gap:6px;padding:4px 8px;display:flex}.mixer-sound-selector select{color:var(--ink);cursor:pointer;background:0 0;border:none;width:100%;min-width:0;font-size:.78rem;font-weight:600}.mixer-sound-selector select:focus{outline:none}.mixer-label{color:var(--muted);gap:4px;font-size:.82rem;font-weight:700;display:grid}.fx-panel{padding-bottom:16px}.fx-body{gap:10px;padding:14px 15px;display:grid}.fx-row{grid-template-columns:70px 1fr;align-items:center;gap:10px;display:grid}.fx-row-select,.fx-row-toggle{gap:10px}.fx-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;font-size:.75rem;font-weight:800}.fx-row select{background:var(--field);border:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer;border-radius:6px;padding:4px 8px;font-size:.82rem}.fx-row select:focus{outline:2px solid #48dbb559}.fx-divider{background:var(--line);height:1px;margin:4px 0}.toggle-btn{border:1px solid var(--line);background:var(--control);color:var(--muted);cursor:pointer;text-align:center;border-radius:6px;width:60px;min-height:32px;padding:4px 12px;font-size:.8rem;font-weight:800;transition:all .15s}.toggle-btn.is-active{background:var(--accent-green-soft);border-color:var(--accent-green);color:var(--accent-green)}.fx-hint{color:var(--muted);border-left:2px solid var(--accent-green);background:#48dbb50f;border-radius:0 4px 4px 0;margin:0;padding:6px 8px;font-size:.75rem;line-height:1.4}.motion-dashboard{border:1px solid var(--accent-green-soft);background:#0006;border-radius:8px;grid-template-columns:1fr 1fr;gap:12px;width:100%;padding:10px;display:grid}.motion-stat{color:var(--ink);font-family:monospace;font-size:.75rem}.motion-stat span{color:var(--muted);text-transform:uppercase;font-size:.65rem;display:block}.motion-alert{text-align:center;background:var(--accent-yellow);color:#000;border-radius:4px;grid-column:span 2;padding:4px;font-size:.7rem;font-weight:900;animation:.2s infinite flash}@keyframes flash{0%{opacity:1}50%{opacity:.5}to{opacity:1}}