:root{color-scheme:dark;--bg: #08141f;--bg-elevated: rgba(10, 28, 44, .88);--bg-soft: rgba(15, 38, 58, .72);--border: rgba(145, 196, 255, .16);--border-strong: rgba(145, 196, 255, .3);--text: #eef7ff;--text-dim: #87a2be;--accent: #4ed0ff;--accent-strong: #2cf1c7;--danger: #ff8c8c}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--text);font-family:SF Pro Display,Segoe UI,sans-serif;background:radial-gradient(circle at top left,rgba(34,115,182,.32),transparent 32%),linear-gradient(180deg,#0d1c2a,#071018)}button,input,select{font:inherit}button{border:1px solid var(--border);border-radius:6px;background:#0b1c2ce0;color:var(--text);padding:.7rem 1rem;cursor:pointer}button:hover{border-color:var(--border-strong);background:#132a3feb}a{color:inherit}input,select{width:100%;border:1px solid var(--border);border-radius:5px;background:#04121cb3;color:var(--text);padding:.7rem .8rem}.accent-button{background:linear-gradient(135deg,#2ba6fff2,#2cf1c7eb);color:#05121b;border:none;font-weight:700}.app-shell{min-height:100vh;padding:1rem;display:flex;flex-direction:column;gap:1rem}.app-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-elevated);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}.app-brand-row{display:flex;align-items:center;gap:.7rem;min-width:0}.app-title{font-size:1.3rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.app-build{display:inline-flex;padding:.22rem .55rem;border:1px solid var(--border);border-radius:999px;color:var(--accent-strong);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;background:#0a1f2ee6}.header-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.6rem}.icon-button{width:2.8rem;min-width:2.8rem;height:2.8rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:999px;background:#0b1c2ce0;color:var(--text);text-decoration:none;font-weight:800;font-size:1rem}.icon-button:hover{border-color:var(--border-strong);background:#132a3feb}.session-name{color:var(--text-dim);font-size:.92rem}.session-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem}.session-status{color:var(--text-dim);font-size:.8rem}.welcome-shell{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}.welcome-card,.panel-card,.workspace-main,.sidebar-panel,.inspector-panel{border:1px solid var(--border);border-radius:10px;background:var(--bg-elevated);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.welcome-card{padding:1.2rem}.welcome-kicker{color:var(--accent-strong);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;margin-bottom:.8rem}.welcome-card h1{margin:0 0 .6rem;font-size:clamp(1.9rem,3vw,2.7rem)}.welcome-card p{color:var(--text-dim);line-height:1.5}.hero-actions,.inline-actions,.transport-buttons{display:flex;gap:.7rem;flex-wrap:wrap}.hero-actions{margin:1.3rem 0}.drop-zone{border:1px dashed var(--border-strong);border-radius:8px;padding:2.4rem 1rem;text-align:center;color:var(--text-dim)}.drop-zone.is-dragging{border-color:var(--accent);color:var(--text)}.draft-list{display:flex;flex-direction:column;gap:.7rem}.draft-row{display:flex;gap:.7rem}.recovery-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:1rem;background:#020a12bd;z-index:40}.recovery-dialog{width:min(34rem,100%);padding:1.25rem;border:1px solid var(--border-strong);border-radius:12px;background:var(--bg-elevated);box-shadow:0 18px 60px #0000004d}.recovery-dialog h2{margin:0 0 .6rem;font-size:1.4rem}.recovery-meta{display:flex;flex-direction:column;gap:.25rem;margin:.9rem 0 1.1rem;color:var(--text-dim);font-size:.9rem}.pwa-banner{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.8rem 1rem;margin-bottom:.8rem;border:1px solid var(--border-strong);border-radius:10px;background:#0d273ad1}.pwa-banner.is-passive{background:#091a27c7}.notice-banner{padding:.85rem 1rem;border:1px solid var(--border-strong);border-radius:10px;background:#0d273ad1;color:var(--text)}.notice-banner.is-danger{border-color:#ff8c8c73;background:#48171de0}.draft-open,.draft-delete,.list-item{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.draft-open,.list-item{flex:1}.draft-open small{color:var(--text-dim)}.draft-delete{color:var(--danger)}.workspace-grid{display:grid;gap:1rem;grid-template-columns:15rem minmax(0,1fr) 18rem;min-height:0}.sidebar-panel,.inspector-panel,.workspace-main{padding:1rem}.sidebar-panel,.inspector-panel{display:flex;flex-direction:column;gap:1rem}.workspace-main{display:flex;flex-direction:column;gap:1rem;min-width:0}.panel-card{padding:.9rem;background:var(--bg-soft)}.stack-list{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.75rem;max-height:18rem;overflow:auto}.list-item.is-active{border-color:#2cf1c78c;background:#0b3e52d1}.panel-heading{font-weight:700;margin-bottom:.8rem}.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}.field span{color:var(--text-dim);font-size:.82rem}.compact-field{margin-bottom:0}.toggle-field{display:flex;align-items:center;gap:.5rem;color:var(--text-dim)}.toggle-field input{width:auto}.detail-row,.transport-readout{display:flex;justify-content:space-between;gap:.75rem;color:var(--text-dim);font-size:.92rem}.inspector-action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.75rem}.transport-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.9rem;padding:.9rem 1rem;border:1px solid var(--border);border-radius:7px;background:#061521bd}.mixer-panel{display:flex;flex-direction:column;gap:.8rem;overflow:hidden}.mixer-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.mixer-summary{color:var(--text-dim);font-size:.84rem}.mixer-strip-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(9rem,1fr);gap:.75rem;overflow-x:auto;padding-bottom:.2rem}.mixer-strip{display:flex;flex-direction:column;gap:.7rem;padding:.8rem;border:1px solid var(--border);border-radius:8px;background:#081622c2;min-width:0}.mixer-strip.is-muted{opacity:.72}.mixer-strip-title{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-strong)}.mixer-range-field{display:flex;flex-direction:column;gap:.45rem;color:var(--text-dim);font-size:.82rem}.mixer-range-field input{padding:0}.mixer-toggle-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.sample-editor-shell,.pattern-editor-shell,.instrument-editor-shell{display:flex;flex-direction:column;gap:1rem;min-height:0}.pattern-editor-bar,.sample-editor-bar,.instrument-editor-bar,.sample-wave-toolbar,.sample-editor-footer{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.sample-editor-group,.sample-stats-inline{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.sample-stats-inline{color:var(--text-dim);font-size:.9rem}.sample-editor-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(18rem,.9fr);gap:1rem;min-height:0}.pattern-editor-layout,.instrument-editor-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(18rem,.8fr);gap:1rem;min-height:0}.pattern-grid-panel,.pattern-side-panel,.sample-wave-panel,.sample-generator-panel,.instrument-editor-main,.instrument-editor-side{display:flex;flex-direction:column;gap:.9rem}.pattern-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem}.pattern-status-chip{display:flex;flex-direction:column;gap:.2rem;padding:.7rem .8rem;border:1px solid var(--border);border-radius:8px;background:#081622c2}.pattern-status-chip span{color:var(--text-dim);font-size:.78rem}.pattern-grid-actions,.pattern-touch-actions{display:flex;flex-wrap:wrap;gap:.6rem}.pattern-grid-scroll{font-family:SF Mono,Menlo,monospace;font-size:11px;line-height:1.45;max-height:28rem;overflow:auto;background:#08111beb;border-radius:8px;padding:.65rem;outline:none;border:1px solid rgba(145,196,255,.14)}.pattern-grid-scroll:focus{border-color:#4ed0ffa6}.pattern-grid-table{border-collapse:collapse;width:100%}.pattern-grid-table thead tr{color:var(--text-dim);border-bottom:1px solid rgba(145,196,255,.14)}.pattern-grid-table th,.pattern-grid-table td{padding:.16rem .45rem;white-space:nowrap;text-align:left}.pattern-grid-table td{border-left:1px solid rgba(145,196,255,.08);cursor:default}.pattern-grid-table tr.is-cursor-row{background:#172442e6}.pattern-grid-table tr.is-playback-row{background:#10342cd1}.pattern-grid-table td.is-selected{background:#223d6361}.pattern-row-number{text-align:right;color:var(--text-dim)}.pattern-help-card{display:flex;flex-direction:column;gap:.25rem;padding:.8rem;border-radius:8px;border:1px solid rgba(145,196,255,.14);background:#081622c7;color:var(--text-dim)}.pattern-help-card strong{color:var(--text)}.pattern-preset-list{display:grid;gap:.55rem}.pattern-preset-button{display:flex;flex-direction:column;align-items:flex-start;gap:.22rem;text-align:left}.pattern-preset-button span{color:var(--text-dim);font-size:.82rem}.command-palette-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#03080db3;display:flex;align-items:flex-start;justify-content:center;padding:8vh 1rem 1rem;z-index:50}.command-palette{width:min(40rem,100%);display:flex;flex-direction:column;gap:.8rem}.command-palette-list{display:flex;flex-direction:column;gap:.45rem;max-height:20rem;overflow:auto}.command-palette-item{text-align:left}.instrument-editor-header,.instrument-editor-controls,.instrument-editor-fields{display:flex;gap:.75rem;flex-wrap:wrap}.keyzone-sample-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.6rem}.keyzone-sample-chip{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.65rem .75rem;border-radius:8px;border:1px solid rgba(145,196,255,.16);background:#07141fd1;text-align:left}.keyzone-sample-chip span{color:var(--text-dim);font-size:.83rem}.keyzone-sample-chip.is-active{border-color:#2cf1c78c;background:linear-gradient(180deg,#0f3542f0,#071925e6)}.instrument-editor-controls{color:var(--text-dim)}.instrument-editor-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}.envelope-graph{width:100%;height:18rem;border:1px solid var(--border);border-radius:9px;background:linear-gradient(180deg,#07141ff2,#061019d1),radial-gradient(circle at top right,rgba(78,208,255,.08),transparent 40%);touch-action:none}.envelope-grid-line{stroke:#91c4ff1f;stroke-width:.7}.envelope-line{fill:none;stroke:var(--accent-strong);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.envelope-point{fill:var(--accent);stroke:#041019;stroke-width:.8;cursor:pointer}.envelope-point.is-active{fill:var(--accent-strong)}.keyzone-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.45rem}.keyzone-cell{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;min-height:4.5rem;padding:.65rem .7rem;border-radius:8px;border:1px solid rgba(145,196,255,.12);background:#081825e0;text-align:left}.keyzone-cell span{color:var(--text-dim);font-size:.82rem}.keyzone-cell.is-active{border-color:#2cf1c78c;background:linear-gradient(180deg,#104252eb,#082332eb)}.sample-wave-canvas{width:100%;height:auto;border:1px solid var(--border);border-radius:16px;background:#050d15e6;touch-action:none}.waveform-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.5rem}@media(max-width:1100px){.workspace-grid,.welcome-shell{grid-template-columns:1fr}.app-header{flex-direction:column;align-items:flex-start}.sample-editor-layout,.pattern-editor-layout,.instrument-editor-layout{grid-template-columns:1fr}.keyzone-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}