*{box-sizing:border-box;margin:0;padding:0}:root{--bone:#e3ddc9;--bone-light:#ede7d3;--bone-dark:#c9c2ad;--bone-darker:#a8a18c;--display-bg:#161310;--display-bg-soft:#24201b;--display-frame:#0a0908;--ink:#1a1612;--ink-soft:#4a4337;--ink-muted:#7a7363;--te-orange:#f04a1f;--te-orange-light:#ff6f3d;--te-orange-dark:#c43614;--display-red:#f32;--display-amber:#fa4;--te-blue:#1f6acc;--te-yellow:#ffcc1a;--te-cream-btn:#ddd5be;--sans:"Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;--mono:"JetBrains Mono", "Menlo", "Monaco", "Courier New", monospace;font:16px/1.5 var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--ink);background:var(--bone);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--bone);color:var(--ink);margin:0;padding:0}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}h1,h2,h3{letter-spacing:.5px;color:var(--ink);font-weight:700}p{margin:0}button{font-family:var(--sans);font-size:14px}input[type=range]{accent-color:var(--te-orange)}code{font-family:var(--mono);background:var(--bone-dark);color:var(--ink);border-radius:3px;padding:2px 6px;font-size:14px}.file-drop-zone{width:100%;min-height:100vh;transition:background-color .2s;position:relative}.file-drop-zone.active{background-color:#f04a1f14}.drop-overlay{z-index:1000;pointer-events:none;background-color:#14100cd9;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.drop-text{font-family:var(--mono);color:var(--te-orange-light);letter-spacing:4px;text-shadow:0 0 24px #f04a1f99;font-size:42px;font-weight:800;animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.pad-grid-wrap{justify-content:center;align-items:center;display:flex}.pad-grid{background:linear-gradient(180deg, var(--bone-dark), var(--bone-darker));border-radius:14px;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);gap:14px;width:480px;height:480px;padding:22px;display:grid;box-shadow:inset 0 2px 4px #0000002e,inset 0 -1px #fff6,0 8px 22px #3c321e40}.pad{background:linear-gradient(180deg, var(--bone-light), var(--bone));border:1px solid var(--bone-darker);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;justify-content:center;align-items:center;transition:transform 60ms,box-shadow .1s,background .1s;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffffb3,inset 0 -2px 4px #3c321e26,0 2px 4px #3c321e2e}.pad.empty .drop-hint{color:var(--bone-darker);letter-spacing:2.5px;font-size:10px;font-weight:700}.pad.loaded{background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));border-color:var(--te-orange-dark);box-shadow:inset 0 1px #ffdcc880,inset 0 -3px 6px #96280a66,0 3px 8px #f04a1f59}.pad:hover{transform:translateY(-1px);box-shadow:inset 0 1px #fffc,inset 0 -2px 4px #3c321e2e,0 4px 8px #3c321e40}.pad.loaded:hover{box-shadow:inset 0 1px #ffdcc899,inset 0 -3px 6px #96280a66,0 5px 12px #f04a1f80}.pad.selected{border:2px solid var(--te-blue);box-shadow:inset 0 0 0 1px #1f6acc4d,0 0 0 3px #1f6acc2e,0 4px 8px #3c321e40}.pad.active{background:linear-gradient(180deg, var(--te-yellow), var(--display-amber));border-color:var(--te-orange-dark);transform:scale(.94)translateY(1px);box-shadow:inset 0 2px 6px #b46e0080,0 0 22px #ffcc1ab3}.pad.loaded.active{background:linear-gradient(180deg, #ffe066, var(--te-yellow))}.sample-name{color:#fff;text-align:center;word-break:break-word;letter-spacing:.3px;text-shadow:0 1px 2px #781e0066;max-width:90%;padding:6px;font-size:11px;font-weight:700;line-height:1.2}.pad-corner{font-family:var(--mono);letter-spacing:.5px;pointer-events:none;font-size:9px;font-weight:700;position:absolute}.pad-number{color:var(--ink-muted);top:7px;left:9px}.pad.loaded .pad-number{color:#fff0dcd9}.pad-key{color:var(--ink);background:var(--bone-light);border:1px solid var(--bone-darker);border-radius:3px;padding:1px 6px;font-weight:800;top:6px;right:8px}.pad.loaded .pad-key{color:var(--te-orange-dark);background:#fff0dcf2;border-color:#96280a66}.pad.active .pad-number,.pad.active .pad-key{color:var(--ink);background:#ffffffd9;border-color:#b46e0080}.pad-add-btn{background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));border:1px solid var(--te-orange-dark);color:#fff;cursor:pointer;z-index:1;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:14px;font-weight:800;line-height:1;display:none;position:absolute;bottom:6px;right:6px;box-shadow:inset 0 1px #ffdcc880,0 1px 3px #96280a66}.pad-add-btn:hover{transform:translateY(-1px)}@media (width<=767px){.pad-add-btn{width:32px;height:32px;font-size:18px;display:flex;bottom:4px;right:4px}.pad-add-btn:before{content:"";position:absolute;inset:-6px}}.pad-mic-btn{color:#f0e6d2;cursor:pointer;z-index:1;background:linear-gradient(#6c5b3d,#4a3d28);border:1px solid #2e2516;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;padding:0;transition:transform 60ms,opacity .1s;display:flex;position:absolute;bottom:6px;left:6px;box-shadow:inset 0 1px #ffe6c840,0 1px 3px #281e0f80}.pad-mic-btn:hover{transform:translateY(-1px)}.pad-mic-btn:disabled{opacity:.3;cursor:not-allowed}.pad-mic-btn--stop{color:#fff;background:linear-gradient(#ff5040,#c01818);border-color:maroon;bottom:6px;left:6px}.rec-stop-square{background:#fff;border-radius:1px;width:9px;height:9px;display:block}@media (width<=767px){.pad-mic-btn{width:32px;height:32px;bottom:4px;left:4px}.pad-mic-btn:before{content:"";position:absolute;inset:-6px}}.pad.recording{background:linear-gradient(#ff6a4a,#c81818);border-color:maroon;animation:1.1s ease-in-out infinite pad-rec-pulse}.pad.recording .pad-number,.pad.recording .pad-key{color:#fff;background:#00000040;border-color:#fff6}.rec-elapsed{color:#fff;letter-spacing:1px;text-shadow:0 1px 2px #0006;font-size:11px;font-weight:800}@keyframes pad-rec-pulse{0%,to{box-shadow:inset 0 1px #ffffff4d,0 0 #ff503c99}50%{box-shadow:inset 0 1px #ffffff4d,0 0 0 6px #ff503c00}}@media (prefers-reduced-motion:reduce){.pad.recording{animation:none}}@media (width<=767px){.pad-grid{aspect-ratio:1;gap:8px;width:100%;max-width:100%;height:auto;padding:12px}.pad{border-radius:10px}.pad:before{content:"";position:absolute;inset:-4px}.pad-corner{font-size:8px}.pad-number{top:5px;left:6px}.pad-key{padding:0 4px;font-size:8px;top:4px;right:6px}.sample-name{padding:4px;font-size:9px}}.sample-display{background:var(--display-bg);border:1px solid var(--display-frame);border-radius:10px;padding:14px 16px;box-shadow:inset 0 2px 5px #00000080,0 4px 10px #3c321e2e,0 1px #ffffff80}.sample-display.empty{color:#4a4338;min-height:130px;font-family:var(--mono);letter-spacing:2.5px;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex}.display-label{color:var(--ink-muted);font-size:11px;font-family:var(--mono);letter-spacing:1px;text-overflow:ellipsis;white-space:nowrap;justify-content:space-between;margin-bottom:8px;display:flex;overflow:hidden}.display-label .label-tag{color:var(--te-orange-light);font-weight:700}.sample-display canvas{border:1px solid var(--display-frame);background:#0a0908;border-radius:5px;width:100%;height:90px;display:block;box-shadow:inset 0 1px 3px #0009}.trim-hint{font-family:var(--mono);color:var(--ink-muted);letter-spacing:1px;text-align:right;margin-top:4px;font-size:9px}.loop-controls{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.loop-btn{font-family:var(--mono);letter-spacing:1.2px;background:linear-gradient(180deg, var(--bone-light), var(--bone));border:1px solid var(--bone-darker);min-height:44px;color:var(--ink);cursor:pointer;border-radius:6px;padding:12px 16px;font-size:12px;font-weight:700;transition:all .12s;box-shadow:inset 0 1px #ffffffb3,0 2px 4px #3c321e33}.loop-btn:hover{border-color:var(--te-orange);color:var(--te-orange-dark);transform:translateY(-1px)}.loop-btn.playing{background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));border-color:var(--te-orange-dark);color:#fff;animation:1.5s ease-in-out infinite loop-pulse;box-shadow:inset 0 1px #ffdcc866,0 0 16px #f04a1f8c}@keyframes loop-pulse{0%,to{box-shadow:inset 0 1px #ffdcc866,0 0 16px #f04a1f8c}50%{box-shadow:inset 0 1px #ffdcc866,0 0 24px #f04a1fd9}}.set-btn{font-family:var(--mono);letter-spacing:1px;min-height:44px;color:var(--ink);cursor:pointer;background:linear-gradient(#fff7d8,#ffe066);border:1px solid #c9a020;border-radius:6px;padding:12px 14px;font-size:11px;font-weight:700;transition:all .12s;box-shadow:inset 0 1px #ffffffb3,0 2px 4px #3c321e33}.set-btn:hover{background:linear-gradient(#fff8c0,#ffcc1a);transform:translateY(-1px);box-shadow:inset 0 1px #ffffffb3,0 0 14px #ffcc1a99}.set-btn:active{transform:translateY(1px)}.trim-info{font-family:var(--mono);color:var(--ink-muted);align-items:center;gap:6px;margin-top:12px;font-size:11px;display:flex}.trim-marker{color:var(--te-yellow);letter-spacing:1px;background:#ffcc1a1f;border:1px solid #ffcc1a66;border-radius:3px;padding:1px 5px;font-size:9px;font-weight:700}.trim-time{color:var(--ink-soft);font-weight:700}.trim-arrow{color:var(--ink-muted)}.trim-badge{letter-spacing:1.5px;color:#fff;background:var(--te-orange);border-radius:3px;margin-left:6px;padding:2px 6px;font-size:9px;font-weight:700}.chop-badge{letter-spacing:1.5px;color:var(--ink);background:var(--te-yellow);border:1px solid #c9a020;border-radius:3px;margin-left:6px;padding:2px 6px;font-size:9px;font-weight:700}.duration-trimmed{font-weight:700;color:var(--te-orange-dark)!important}.install-btn{border:1px solid var(--te-orange-dark);background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));color:#fff;font-family:var(--mono);letter-spacing:1.5px;cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:10px;font-weight:700;transition:all .12s;display:inline-flex;box-shadow:inset 0 1px #ffdcc866,0 2px 4px #f04a1f4d}.install-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px #ffdcc866,0 4px 10px #f04a1f80}.install-icon{font-size:14px;line-height:1}.storage-badge{background:var(--display-bg);border:1px solid var(--display-frame);font-family:var(--mono);letter-spacing:1.2px;color:var(--ink-muted);border-radius:5px;align-items:center;gap:5px;padding:4px 9px;font-size:9px;font-weight:700;display:inline-flex;box-shadow:inset 0 1px 3px #00000080,0 1px #ffffff80}.storage-badge.moderate{color:var(--display-amber)}.storage-badge.tight{color:var(--display-red);border-color:var(--display-red);animation:1.4s ease-in-out infinite storage-pulse}@keyframes storage-pulse{0%,to{box-shadow:inset 0 1px 3px #00000080,0 0 #f326}50%{box-shadow:inset 0 1px 3px #00000080,0 0 8px #ff3322b3}}.storage-icon{font-size:10px}.storage-label{color:inherit;opacity:.75}.storage-pct{color:inherit;font-weight:800}.offline-badge{background:var(--display-bg);border:1px solid var(--display-frame);font-family:var(--mono);letter-spacing:1.5px;color:var(--display-amber);border-radius:5px;align-items:center;gap:5px;padding:4px 9px;font-size:9px;font-weight:700;display:inline-flex;box-shadow:inset 0 1px 3px #00000080,0 1px #ffffff80}.offline-dot{background:var(--display-amber);width:6px;height:6px;box-shadow:0 0 6px var(--display-amber);border-radius:50%;animation:1.6s ease-in-out infinite offline-pulse}@keyframes offline-pulse{0%,to{opacity:1}50%{opacity:.5}}@media (prefers-reduced-motion:reduce){.offline-dot{animation:none}}.transport-bar{padding-top:calc(18px + env(safe-area-inset-top));padding-right:calc(28px + env(safe-area-inset-right));padding-bottom:18px;padding-left:calc(28px + env(safe-area-inset-left));background:linear-gradient(180deg, var(--bone-light), var(--bone-dark));border-bottom:1px solid var(--bone-darker);justify-content:space-between;align-items:center;gap:24px;display:flex;box-shadow:0 4px 12px #3c321e2e}.transport-section{align-items:center;gap:16px;display:flex}.logo-section .logo-mark{color:var(--te-orange);text-shadow:0 1px #fff6;font-size:32px}.logo-title{font-family:var(--mono);color:var(--ink);letter-spacing:2px;font-size:14px;font-weight:800}.logo-sub{font-family:var(--mono);color:var(--ink-muted);letter-spacing:1px;font-size:10px}.controls-section{flex:1;justify-content:center}.transport-btn{border:1px solid var(--bone-darker);background:linear-gradient(180deg, var(--bone-light), var(--bone));width:46px;height:46px;color:var(--ink);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:16px;transition:all .12s;display:flex;box-shadow:inset 0 1px #ffffffb3,inset 0 -2px 4px #3c321e26,0 3px 6px #3c321e38}.transport-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px #fffc,inset 0 -2px 4px #3c321e26,0 4px 8px #3c321e47}.transport-btn:active{transform:translateY(1px);box-shadow:inset 0 2px 4px #3c321e40,0 1px 2px #3c321e2e}.transport-btn.play.active{background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));border-color:var(--te-orange-dark);color:#fff;box-shadow:inset 0 1px #ffdcc880,0 0 14px #f04a1f80,0 3px 6px #96280a4d}.transport-btn.record.active{background:linear-gradient(180deg, #f54, var(--display-red));color:#fff;border-color:#b81812;animation:1s infinite pulse-record;box-shadow:inset 0 1px #ffc8c880,0 0 14px #ff332280}@keyframes pulse-record{0%,to{opacity:1}50%{opacity:.7}}.bpm-control{box-sizing:border-box;background:var(--display-bg);border:1px solid var(--display-frame);border-radius:6px;flex-direction:column;justify-content:center;align-items:center;height:48px;margin-left:12px;padding:4px 14px;display:flex;box-shadow:inset 0 1px 3px #0009,0 1px #ffffff80}.bpm-control label{font-family:var(--mono);color:var(--ink-muted);letter-spacing:1.5px;font-size:9px}.bpm-control input{width:60px;color:var(--display-red);font-family:var(--mono);text-align:center;text-shadow:0 0 8px #f329;letter-spacing:1px;background:0 0;border:none;outline:none;font-size:22px;font-weight:700}.status-section{gap:18px}.status-item{box-sizing:border-box;background:var(--display-bg);border:1px solid var(--display-frame);border-radius:6px;flex-direction:column;justify-content:center;align-items:flex-end;height:48px;padding:4px 12px;display:flex;box-shadow:inset 0 1px 3px #0009,0 1px #ffffff80}.status-label{font-family:var(--mono);color:var(--ink-muted);letter-spacing:1.5px;font-size:9px}.status-value{font-family:var(--mono);line-height:1.15}.status-num{color:var(--display-red);text-shadow:0 0 8px #ff332280;font-size:22px;font-weight:700;line-height:1.15}.status-denom{color:var(--ink-muted);font-size:12px}.status-led{font-family:var(--mono);color:var(--ink-muted);letter-spacing:1.5px;border:1px solid var(--display-frame);background:var(--display-bg);border-radius:5px;align-items:center;gap:7px;padding:6px 12px;font-size:10px;font-weight:700;display:flex;box-shadow:inset 0 1px 3px #0009,0 1px #ffffff80}.status-led.on{color:var(--te-orange-light)}.led-dot{background:#2a2520;border-radius:50%;width:8px;height:8px;display:inline-block}.status-led.on .led-dot{background:var(--te-orange);box-shadow:0 0 8px var(--te-orange), 0 0 14px #f04a1f80;animation:.6s infinite blink-led}@keyframes blink-led{0%,to{opacity:1}50%{opacity:.5}}.settings-btn{border:1px solid var(--bone-darker);background:linear-gradient(180deg, var(--bone-light), var(--bone));width:44px;height:44px;color:var(--ink-soft);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;font-size:18px;line-height:1;display:flex;box-shadow:inset 0 1px #ffffffb3,0 2px 4px #3c321e2e}.settings-btn:hover{color:var(--te-orange);border-color:var(--te-orange)}@media (width<=767px){.transport-bar.tight{padding-top:calc(8px + env(safe-area-inset-top));padding-right:calc(12px + env(safe-area-inset-right));padding-bottom:8px;padding-left:calc(12px + env(safe-area-inset-left));gap:8px;height:auto;min-height:48px}.transport-bar.tight .controls-section{flex:none;justify-content:flex-start}.transport-bar.tight .settings-btn{margin-left:auto}.transport-bar.tight .logo-section .logo-mark{font-size:20px}.transport-bar.tight .logo-title{letter-spacing:1.5px;font-size:11px}.transport-bar.tight .controls-section{gap:8px}.transport-bar.tight .transport-btn{width:44px;height:44px;font-size:14px}.transport-bar.tight .bpm-control{height:40px;margin-left:4px;padding:2px 10px}.transport-bar.tight .bpm-control input{width:44px;height:22px;padding:0;font-size:18px}.transport-bar.tight .bpm-control label{letter-spacing:1px;font-size:8px}.transport-bar.tight .status-section{gap:6px}.transport-bar.tight .status-item{height:40px;padding:2px 8px}.transport-bar.tight .status-label{letter-spacing:1px;font-size:8px}.transport-bar.tight .status-num{font-size:14px}.transport-bar.tight .status-led{letter-spacing:1px;padding:4px 8px;font-size:9px}}@media (width<=374px){.transport-bar.tight{gap:6px;padding:8px}.transport-bar.tight .controls-section{gap:6px}.transport-bar.tight .logo-section .logo-mark{font-size:18px}.transport-bar.tight .logo-title{display:none}.transport-bar.tight .bpm-control{margin-left:0;padding:2px 6px}.transport-bar.tight .bpm-control input{width:36px;font-size:16px}.transport-bar.tight .status-section{gap:4px}.transport-bar.tight .status-item{padding:2px 6px}.transport-bar.tight .status-led{padding:4px 6px;font-size:0}.transport-bar.tight .status-led .led-dot{margin:0}}.sequencer{background:var(--display-bg);border:1px solid var(--display-frame);border-radius:12px;padding:18px 20px;box-shadow:inset 0 2px 6px #00000080,0 4px 12px #3c321e33,0 1px #ffffff80}.sequencer-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.sequencer-title{align-items:baseline;gap:12px;display:flex}.seq-label{font-family:var(--mono);color:var(--te-orange-light);letter-spacing:2px;font-size:11px;font-weight:700}.seq-target{font-family:var(--mono);color:var(--ink-muted);font-size:11px}.sequencer-actions{align-items:center;gap:14px;display:flex}.seq-clear{font-family:var(--mono);letter-spacing:1.5px;color:var(--ink-muted);cursor:pointer;background:0 0;border:1px solid #4a4338;border-radius:4px;padding:4px 10px;font-size:9px;font-weight:700;transition:all .15s}.seq-clear:hover{border-color:var(--display-red);color:var(--display-red)}.sequencer-bars{font-family:var(--mono);color:var(--ink-muted);grid-template-columns:repeat(4,1fr);gap:4px;font-size:10px;display:grid}.sequencer-bars span{text-align:center;letter-spacing:1px;width:60px}.sequencer-grid{grid-template-columns:repeat(16,1fr);gap:6px;display:grid}.step{aspect-ratio:1;cursor:pointer;background:linear-gradient(#2a2520,#1a1612);border:1px solid #3a3328;border-radius:4px;justify-content:center;align-items:flex-end;min-height:36px;padding-bottom:3px;transition:all .1s;display:flex;position:relative;box-shadow:inset 0 1px 2px #0006}.step.beat{background:linear-gradient(#332e26,#221d18);border-color:#4a4338}.step:hover:not(:disabled){border-color:var(--ink-muted)}.step.on{background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));border-color:var(--te-orange-dark);box-shadow:inset 0 1px #ffdcc866,0 0 10px #f04a1f66}.step.current{border-color:var(--te-yellow);box-shadow:0 0 10px #ffcc1a99}.step.on.current{background:linear-gradient(180deg, var(--te-yellow), var(--display-amber))}.step:disabled{opacity:.45;cursor:not-allowed}.step-num{font-family:var(--mono);color:var(--ink-muted);font-size:8px;font-weight:700}.step.on .step-num{color:#fff0dcd9}.step.beat .step-num{color:#9a9080}.seq-tabs{gap:5px;margin-bottom:10px;display:flex}.seq-tab{font-family:var(--mono);letter-spacing:1.5px;color:var(--ink-muted);cursor:pointer;background:linear-gradient(#2a2520,#1a1612);border:1px solid #3a3328;border-radius:5px;flex:1;padding:8px 0;font-size:10px;font-weight:700;transition:all .12s}.seq-tab.active{background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));border-color:var(--te-orange-dark);color:#fff;box-shadow:0 0 8px #f04a1f66}@media (width<=767px){.sequencer.mobile{border-radius:10px}.sequencer.mobile .sequencer-grid.mobile-grid{grid-template-columns:repeat(4,1fr);gap:8px}.sequencer.mobile .step{min-height:64px}.sequencer.mobile .step-num{font-size:10px}.sequencer.mobile .seq-tab{min-height:44px;padding:14px 0}}.mixer{background:linear-gradient(180deg, var(--bone-light), var(--bone));border:1px solid var(--bone-darker);border-radius:12px;flex-direction:column;gap:14px;min-height:280px;padding:18px 20px;display:flex;box-shadow:inset 0 1px #ffffffb3,0 4px 12px #3c321e2e}.mixer-empty{justify-content:center;align-items:center}.mixer-placeholder{text-align:center;color:var(--ink-muted)}.placeholder-icon{color:var(--bone-darker);font-size:42px}.placeholder-text{font-family:var(--mono);letter-spacing:2.5px;color:var(--ink-soft);margin-top:8px;font-size:12px;font-weight:700}.placeholder-sub{font-family:var(--mono);color:var(--ink-muted);margin-top:2px;font-size:10px}.mixer-header{justify-content:space-between;align-items:center;display:flex}.mixer-title{align-items:baseline;gap:10px;display:flex}.mixer-label{font-family:var(--mono);color:var(--te-orange);letter-spacing:2px;font-size:11px;font-weight:700}.mixer-padnum{font-family:var(--mono);color:var(--te-blue);letter-spacing:1px;font-size:11px;font-weight:700}.mixer-remove{border:1px solid var(--bone-darker);background:linear-gradient(180deg, var(--bone-light), var(--bone));width:26px;height:26px;color:var(--ink-soft);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:16px;line-height:1;display:flex;box-shadow:inset 0 1px #ffffffb3,0 1px 2px #3c321e33}.mixer-remove:hover{background:linear-gradient(180deg, #f54, var(--display-red));color:#fff;border-color:#b81812}.mixer-name{font-family:var(--mono);color:var(--display-red);background:var(--display-bg);border:1px solid var(--display-frame);word-break:break-all;text-shadow:0 0 6px #f326;border-radius:5px;padding:8px 12px;font-size:13px;box-shadow:inset 0 1px 3px #00000080}.mixer-meta{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.meta-item{background:var(--display-bg);border:1px solid var(--display-frame);border-radius:4px;flex-direction:column;align-items:center;padding:6px 4px;display:flex;box-shadow:inset 0 1px 3px #00000080}.meta-label{font-family:var(--mono);color:var(--ink-muted);letter-spacing:1.5px;font-size:9px}.meta-value{font-family:var(--mono);color:var(--display-amber);text-shadow:0 0 4px #fa46;font-size:13px;font-weight:700}.mixer-controls{flex-direction:column;gap:12px;margin-top:4px;display:flex}.knob-control{grid-template-columns:64px 1fr 44px;align-items:center;gap:12px;display:grid}.knob-control label{font-family:var(--mono);color:var(--ink-soft);letter-spacing:1.5px;font-size:10px;font-weight:700}.knob-control input[type=range]{cursor:pointer;width:100%}.knob-value{font-family:var(--mono);color:var(--te-orange-dark);text-align:right;font-size:12px;font-weight:700}.mixer-chop-tag{font-family:var(--mono);color:#fff;background:var(--te-orange);letter-spacing:1px;border-radius:3px;margin-left:8px;padding:2px 7px;font-size:10px;font-weight:700}.chop-section{border-top:1px dashed var(--bone-darker);flex-direction:column;gap:6px;margin-top:10px;padding-top:12px;display:flex}.chop-btn{font-family:var(--mono);letter-spacing:1.5px;background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));border:1px solid var(--te-orange-dark);color:#fff;cursor:pointer;border-radius:6px;padding:10px 16px;font-size:12px;font-weight:700;transition:all .12s;box-shadow:inset 0 1px #ffdcc866,0 2px 6px #f04a1f4d}.chop-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px #ffdcc866,0 4px 12px #f04a1f80}.chop-btn:active{transform:translateY(1px)}.chop-hint{font-family:var(--mono);color:var(--ink-muted);letter-spacing:.5px;font-size:9px;line-height:1.4}.tour-root{z-index:9000;pointer-events:none;position:fixed;inset:0}.tour-backdrop{-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);pointer-events:auto;cursor:pointer;background:#14100c8c;position:fixed;inset:0}.tour-spotlight{pointer-events:none;box-shadow:0 0 0 9999px #14100c8c, 0 0 0 3px var(--te-orange), 0 0 24px #f04a1f99;border-radius:10px;transition:all .25s cubic-bezier(.2,.8,.2,1);position:fixed}.tour-tooltip{background:linear-gradient(180deg, var(--bone-light), var(--bone));border:1px solid var(--bone-darker);pointer-events:auto;z-index:9001;color:var(--ink);border-radius:12px;padding:18px 20px;position:fixed;box-shadow:inset 0 1px #ffffffb3,0 12px 36px #14100c80,0 0 0 1px #f04a1f26}.tour-step-num{font-family:var(--mono);letter-spacing:2px;color:var(--te-orange);margin-bottom:8px;font-size:9px;font-weight:700}.tour-title{color:var(--ink);letter-spacing:.3px;margin:0 0 8px;font-size:18px;font-weight:800}.tour-body{color:var(--ink-soft);margin:0 0 14px;font-size:13px;line-height:1.6}.tour-progress{background:var(--bone-darker);border-radius:2px;height:3px;margin-bottom:14px;overflow:hidden}.tour-progress-fill{background:var(--te-orange);height:100%;transition:width .25s;box-shadow:0 0 6px #f04a1f80}.tour-actions{justify-content:space-between;align-items:center;gap:8px;display:flex}.tour-actions-right{gap:8px;display:flex}.tour-btn{font-family:var(--sans);cursor:pointer;letter-spacing:.5px;border-radius:6px;padding:8px 14px;font-size:12px;font-weight:600;transition:all .12s}.tour-skip{color:var(--ink-muted);background:0 0;border:none;text-decoration:underline}.tour-skip:hover{color:var(--ink-soft)}.tour-btn:not(.tour-skip):not(.tour-primary){border:1px solid var(--bone-darker);color:var(--ink-soft);background:0 0}.tour-btn:not(.tour-skip):not(.tour-primary):hover{border-color:var(--ink-soft);color:var(--ink)}.tour-primary{background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));border:1px solid var(--te-orange-dark);color:#fff;font-weight:700;box-shadow:inset 0 1px #ffdcc866,0 2px 6px #f04a1f59}.tour-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px #ffdcc866,0 4px 10px #f04a1f80}.tour-help-btn{border:1px solid var(--bone-darker);background:linear-gradient(180deg, var(--bone-light), var(--bone));width:36px;height:36px;color:var(--ink-soft);cursor:pointer;font-family:var(--sans);border-radius:50%;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:all .12s;display:flex;position:relative;box-shadow:inset 0 1px #ffffffb3,0 2px 4px #3c321e2e}.tour-help-btn:before{content:"";position:absolute;inset:-4px}.tour-help-btn:hover{color:var(--te-orange);border-color:var(--te-orange);transform:translateY(-1px)}.ios-guide-root{z-index:9500;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#14100c8c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.ios-guide-card{background:linear-gradient(180deg, var(--bone-light), var(--bone));border:1px solid var(--bone-darker);width:100%;max-width:420px;color:var(--ink);border-radius:14px;padding:22px 24px;box-shadow:inset 0 1px #ffffffb3,0 14px 40px #14100c8c}.ios-guide-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.ios-guide-header h3{color:var(--ink);margin:0;font-size:18px;font-weight:800}.ios-guide-close{border:1px solid var(--bone-darker);width:28px;height:28px;color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:50%;font-size:18px;line-height:1}.ios-guide-close:hover{background:var(--bone-darker);color:var(--ink)}.ios-guide-intro{color:var(--ink-soft);margin:0 0 16px;font-size:13px;line-height:1.6}.ios-guide-steps{flex-direction:column;gap:10px;margin:0 0 16px;padding:0;list-style:none;display:flex}.ios-guide-steps li{color:var(--ink);background:#f04a1f0f;border:1px solid #f04a1f33;border-radius:8px;align-items:center;gap:12px;padding:10px 12px;font-size:13px;line-height:1.5;display:flex}.ios-step-num{background:var(--te-orange);color:#fff;width:26px;height:26px;font-family:var(--mono);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:inline-flex}.ios-icon{background:var(--bone-light);border:1px solid var(--bone-darker);font-family:var(--sans);border-radius:4px;margin:0 2px;padding:0 6px;display:inline-block}.ios-guide-note{color:var(--ink-muted);margin:0 0 14px;font-size:11px;line-height:1.5}.ios-guide-ok{border:1px solid var(--te-orange-dark);background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));color:#fff;width:100%;font-family:var(--mono);letter-spacing:1.5px;cursor:pointer;border-radius:6px;padding:10px;font-size:12px;font-weight:700;transition:all .12s;box-shadow:inset 0 1px #ffdcc866,0 2px 6px #f04a1f4d}.ios-guide-ok:hover{transform:translateY(-1px)}.pwa-toast{z-index:9400;background:linear-gradient(180deg, var(--bone-light), var(--bone));border:1px solid var(--bone-darker);min-width:260px;max-width:320px;color:var(--ink);border-radius:10px;flex-direction:column;gap:10px;padding:14px 16px;display:flex;position:fixed;bottom:20px;right:20px;box-shadow:inset 0 1px #ffffffb3,0 10px 28px #14100c66}.pwa-toast-update{border-left:3px solid var(--te-orange)}.pwa-toast-offline{border-left:3px solid var(--te-yellow)}.pwa-toast-persist{border-left:3px solid var(--te-blue)}.pwa-toast-persist-denied{border-left:3px solid var(--display-amber)}.pwa-toast-body{flex-direction:column;gap:2px;display:flex}.pwa-toast-body strong{color:var(--ink);font-size:13px;font-weight:800}.pwa-toast-body span{color:var(--ink-muted);font-size:11px}.pwa-toast-actions{gap:8px;display:flex}.pwa-toast-btn{border:1px solid var(--bone-darker);background:linear-gradient(180deg, var(--bone-light), var(--bone));min-height:40px;color:var(--ink);font-family:var(--mono);letter-spacing:1px;cursor:pointer;border-radius:5px;flex:1;padding:12px 10px;font-size:11px;font-weight:700;transition:all .12s}.pwa-toast-btn:hover{border-color:var(--ink-soft)}.pwa-toast-btn.primary{border-color:var(--te-orange-dark);background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));color:#fff}.pwa-toast-btn.primary:hover{transform:translateY(-1px);box-shadow:0 3px 8px #f04a1f66}.startup-overlay{z-index:9700;background:var(--bone);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.startup-card{background:linear-gradient(180deg, var(--bone-light), var(--bone));border:1px solid var(--bone-darker);text-align:center;min-width:280px;max-width:400px;color:var(--ink);border-radius:14px;padding:28px 32px;box-shadow:inset 0 1px #ffffffb3,0 14px 40px #14100c59}.startup-icon{color:var(--te-orange);text-shadow:0 0 12px #f04a1f66;margin-bottom:8px;font-size:38px;animation:2s linear infinite spin;display:inline-block}.startup-icon.error{color:var(--display-red);text-shadow:0 0 12px #f326;animation:none}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.startup-card h3{color:var(--ink);margin:4px 0 6px;font-size:16px;font-weight:800}.startup-msg{font-family:var(--mono);color:var(--ink-soft);letter-spacing:.5px;margin:0 0 16px;font-size:12px}.startup-progress{background:var(--bone-darker);border-radius:3px;height:6px;overflow:hidden;box-shadow:inset 0 1px 2px #3c321e33}.startup-progress-fill{background:linear-gradient(90deg, var(--te-orange-light), var(--te-orange));height:100%;transition:width .18s;box-shadow:0 0 8px #f04a1f80}.startup-actions{justify-content:center;gap:8px;margin-top:4px;display:flex}.startup-btn{border:1px solid var(--bone-darker);background:linear-gradient(180deg, var(--bone-light), var(--bone));color:var(--ink);font-family:var(--mono);letter-spacing:1px;cursor:pointer;border-radius:6px;padding:8px 14px;font-size:11px;font-weight:700}.startup-btn.primary{border-color:var(--te-orange-dark);background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));color:#fff}.bottom-sheet-root{z-index:9200;pointer-events:none;position:fixed;inset:0}.bottom-sheet-backdrop{pointer-events:auto;cursor:pointer;background:#14100c66;position:absolute;inset:0}.bottom-sheet-card{background:linear-gradient(180deg, var(--bone-light), var(--bone));border-top:1px solid var(--bone-darker);pointer-events:auto;border-top-left-radius:18px;border-top-right-radius:18px;flex-direction:column;transition:transform .22s cubic-bezier(.2,.8,.2,1),height .22s cubic-bezier(.2,.8,.2,1);animation:.22s cubic-bezier(.2,.8,.2,1) sheet-up;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -10px 36px #14100c8c}.bottom-sheet-card.half{height:60vh;max-height:480px}.bottom-sheet-card.full{height:92vh}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.bottom-sheet-card{transition:none;animation:none}}.bottom-sheet-handle-area{cursor:grab;flex-shrink:0;padding:8px 0 4px}.bottom-sheet-handle-area:active{cursor:grabbing}.bottom-sheet-handle{background:var(--bone-darker);border-radius:2px;width:40px;height:4px;margin:0 auto}.bottom-sheet-header{border-bottom:1px solid var(--bone-darker);flex-shrink:0;justify-content:space-between;align-items:center;padding:4px 18px 10px;display:flex}.bottom-sheet-title{font-family:var(--mono);letter-spacing:2px;color:var(--ink);font-size:11px;font-weight:700}.bottom-sheet-close{border:1px solid var(--bone-darker);width:36px;height:36px;color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;font-size:20px;line-height:1;display:flex;position:relative}.bottom-sheet-close:before{content:"";position:absolute;inset:-4px}.bottom-sheet-body{-webkit-overflow-scrolling:touch;flex:1;padding:14px 18px 24px;overflow-y:auto}.settings-root{z-index:9300;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#14100c73;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.settings-card{background:linear-gradient(180deg, var(--bone-light), var(--bone));border-top:1px solid var(--bone-darker);width:100%;max-width:460px;color:var(--ink);border-top-left-radius:16px;border-top-right-radius:16px;padding:12px 18px 24px;animation:.22s cubic-bezier(.2,.8,.2,1) settings-up;box-shadow:0 -10px 32px #14100c73}@keyframes settings-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.settings-card{animation:none}}.settings-handle{background:var(--bone-darker);border-radius:2px;width:40px;height:4px;margin:0 auto 10px}.settings-header{border-bottom:1px solid var(--bone-darker);justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:10px;display:flex}.settings-header h3{color:var(--ink);margin:0;font-size:16px;font-weight:800}.settings-close{border:1px solid var(--bone-darker);width:28px;height:28px;color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:50%;font-size:18px;line-height:1}.settings-row{border-bottom:1px dashed var(--bone-darker);justify-content:space-between;align-items:center;gap:10px;padding:10px 0;display:flex}.settings-row:last-child{border-bottom:none}.settings-row-label{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.settings-row-label strong{color:var(--ink);font-size:13px}.settings-row-label span{color:var(--ink-muted);font-size:11px}.settings-action{border:1px solid var(--bone-darker);background:linear-gradient(180deg, var(--bone-light), var(--bone));color:var(--ink);font-family:var(--mono);letter-spacing:1px;cursor:pointer;border-radius:6px;flex-shrink:0;padding:8px 14px;font-size:11px;font-weight:700}.settings-action.primary{border-color:var(--te-orange-dark);background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));color:#fff}.settings-toggle{border:1px solid var(--bone-darker);background:var(--display-bg);color:var(--ink-muted);font-family:var(--mono);letter-spacing:1.5px;cursor:pointer;border-radius:6px;flex-shrink:0;min-width:56px;padding:6px 14px;font-size:10px;font-weight:800}.settings-toggle.on{background:linear-gradient(180deg, #f54, var(--display-red));color:#fff;border-color:#b81812;animation:1.2s ease-in-out infinite settings-pulse}@keyframes settings-pulse{0%,to{box-shadow:0 0 #f326}50%{box-shadow:0 0 8px #ff3322b3}}@media (prefers-reduced-motion:reduce){.settings-toggle.on{animation:none}}.audio-gate{z-index:9800;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:pointer;background:#14100cb3;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.audio-gate-card{background:linear-gradient(180deg, var(--bone-light), var(--bone));border:1px solid var(--bone-darker);text-align:center;width:100%;max-width:380px;color:var(--ink);border-radius:14px;padding:28px 24px;animation:.22s cubic-bezier(.2,.8,.2,1) gate-in;box-shadow:inset 0 1px #ffffffb3,0 14px 40px #14100c8c}@keyframes gate-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.audio-gate-card{animation:none}}.audio-gate-icon{margin-bottom:10px;font-size:42px}.audio-gate-card h3{color:var(--ink);margin:0 0 10px;font-size:18px;font-weight:800}.audio-gate-card p{color:var(--ink-soft);margin:0 0 18px;font-size:13px;line-height:1.6}.audio-gate-btn{border:1px solid var(--te-orange-dark);background:linear-gradient(180deg, var(--te-orange-light), var(--te-orange));color:#fff;width:100%;font-family:var(--mono);letter-spacing:1.5px;cursor:pointer;border-radius:8px;padding:12px;font-size:13px;font-weight:700;box-shadow:inset 0 1px #ffdcc866,0 3px 8px #f04a1f66}.audio-gate-btn:hover{transform:translateY(-1px)}.app{background:radial-gradient(ellipse at top, var(--bone-light) 0%, var(--bone) 60%, var(--bone-dark) 100%);flex-direction:column;min-height:100vh;display:flex}.app-main{flex-direction:column;flex:1;gap:22px;width:100%;max-width:1400px;margin:0 auto;padding:28px;display:flex}.workspace{grid-template-columns:minmax(480px,auto) 1fr;align-items:start;gap:26px;display:grid}.workspace-left,.workspace-right{flex-direction:column;gap:14px;display:flex}.workspace-bottom{width:100%}.section-label{font-family:var(--mono);color:var(--ink-soft);letter-spacing:2.5px;text-transform:uppercase;align-items:center;gap:8px;padding-left:4px;font-size:10px;font-weight:700;display:flex}.section-label .dot{background:var(--te-orange);border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 2px #f04a1f33}.hint-text{font-family:var(--mono);color:var(--ink-muted);text-align:center;letter-spacing:.5px;font-size:10px}@media (width<=767px){.app-main{gap:14px;padding:12px}.workspace{grid-template-columns:1fr;gap:14px}.section-label{letter-spacing:2px;font-size:9px}.hint-text{font-size:9px}.pad-grid-wrap{width:100%}}.mic-error-toast{color:#fff;z-index:9999;cursor:pointer;background:#c81818;border-radius:8px;max-width:90vw;padding:12px 18px;font-size:13px;font-weight:600;animation:.2s ease-out mic-toast-in;position:fixed;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0000004d}@keyframes mic-toast-in{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}