:root{--bg: #0a0d13;--bg-wash: #0e1322;--panel: #131826;--panel-2: #1a2030;--panel-3: #232b3e;--well: #06080d;--line: #28324a;--line-soft: #1c2536;--ink: #eaeef7;--ink-2: #9aa6be;--ink-3: #5e6a83;--signal: #ffb02e;--signal-bright: #ffc55c;--signal-soft: rgba(255, 176, 46, .14);--sel: #2fd4c4;--play: #ff5c63;--radius: 16px;--radius-sm: 11px;--radius-xs: 8px;--shadow-panel: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -24px rgba(0, 0, 0, .9);--shadow-well: 0 2px 2px rgba(0, 0, 0, .6) inset, 0 0 0 1px rgba(0, 0, 0, .4) inset, 0 0 60px -12px rgba(255, 176, 46, .12) inset;--transition: .18s ease;--font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;color-scheme:dark;font-family:var(--font-display);line-height:1.5;font-weight:400;color:var(--ink);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background-color:var(--bg);background-image:radial-gradient(120% 80% at 80% -10%,rgba(255,176,46,.08),transparent 55%),radial-gradient(90% 70% at 0% 0%,rgba(47,92,212,.08),transparent 50%),linear-gradient(180deg,var(--bg-wash),var(--bg) 40%);background-attachment:fixed}#app{width:100%;max-width:1080px;margin:0 auto;padding:40px 24px 64px}.console{display:flex;flex-direction:column;gap:14px;animation:rise .5s ease both}.faceplate{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-panel)}.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand-mark{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--well)}.brand-text{display:flex;flex-direction:column;min-width:0}.brand-name{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}.brand-tag{font-size:12px;color:var(--ink-2);letter-spacing:.01em}.faceplate-status{display:inline-flex;align-items:center;gap:8px;flex:none;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#00000040;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px var(--signal-soft)}.drop-zone{position:relative;border:1.5px dashed var(--line);border-radius:var(--radius);padding:64px 32px;text-align:center;background:radial-gradient(80% 100% at 50% 0%,rgba(255,176,46,.05),transparent 70%),var(--panel);box-shadow:var(--shadow-panel);cursor:pointer;transition:border-color var(--transition),background-color var(--transition),transform var(--transition);animation:rise .5s ease .06s both}.drop-zone:hover,.drop-zone.dragover{border-color:var(--signal);background:radial-gradient(80% 100% at 50% 0%,rgba(255,176,46,.12),transparent 70%),var(--panel)}.drop-zone.dragover{transform:translateY(-2px)}.drop-zone-inner{display:flex;flex-direction:column;align-items:center;gap:6px}.drop-zone-glyph{width:96px;height:44px;margin-bottom:14px;color:var(--signal);opacity:.9}.drop-zone-glyph svg{display:block;width:100%;height:100%}.drop-zone-text{font-size:18px;font-weight:600;color:var(--ink)}.drop-zone-hint{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2)}.editor-container{display:none;flex-direction:column;gap:14px}.editor-container.active{display:flex;animation:rise .4s ease both}.file-info,.controls-panel,.effects-panel,.export-panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-panel)}.file-info{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px}.file-meta{display:flex;align-items:center;gap:12px;min-width:0}.file-badge{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-xs);background:var(--signal-soft);color:var(--signal);font-size:16px}.file-name{font-weight:600;color:var(--ink);word-break:break-all}.file-details{margin-left:8px;font-family:var(--font-mono);font-size:12px;color:var(--ink-2)}.scope{padding:0}.scope-bezel{padding:12px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-panel)}.waveform-container{position:relative;background-color:var(--well);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-well)}.waveform-canvas{display:block;width:100%;height:220px;cursor:crosshair}.playhead{position:absolute;top:0;width:2px;height:100%;background-color:var(--play);pointer-events:none;display:none}.time-display{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}.time-cell{display:flex;align-items:baseline;gap:8px;padding:12px 16px;background:var(--well)}.time-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--ink-3)}.time-value{font-family:var(--font-mono);font-size:17px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--signal);text-shadow:0 0 12px rgba(255,176,46,.35)}.controls-panel{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;padding:14px 18px}.control-group{display:flex;align-items:center;gap:10px}.control-group-end{margin-left:auto}.control-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1;border:1px solid transparent;border-radius:var(--radius-xs);cursor:pointer;transition:background-color var(--transition),border-color var(--transition),color var(--transition),transform var(--transition),box-shadow var(--transition)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg,var(--signal-bright),var(--signal));color:#1a1205;box-shadow:0 6px 18px -8px #ffb02eb3}.btn-primary:hover:not(:disabled){background:var(--signal-bright);box-shadow:0 8px 22px -8px #ffb02ed9}.btn-outline{background:transparent;border-color:#ffb02e80;color:var(--signal)}.btn-outline:hover:not(:disabled){background:var(--signal-soft);border-color:var(--signal)}.btn-ghost{background:var(--panel-2);border-color:var(--line);color:var(--ink)}.btn-ghost:hover:not(:disabled){background:var(--panel-3);border-color:var(--ink-3)}.btn-icon{padding:0;width:40px;height:40px;font-size:14px}.slider-container{display:flex;align-items:center;gap:12px}.slider{-webkit-appearance:none;appearance:none;width:128px;height:5px;border-radius:999px;background:var(--well);border:1px solid var(--line);outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--signal);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--signal),0 2px 6px #00000080;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition)}.slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 0 1px var(--signal),0 0 12px #ffb02e99}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--signal);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--signal);cursor:pointer}.slider-value{min-width:48px;text-align:right;font-family:var(--font-mono);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}.effects-panel{display:flex;flex-wrap:wrap;gap:12px;padding:14px}.effect-card{flex:1;min-width:220px;padding:16px;background:var(--panel-2);border-radius:var(--radius-sm);border:1px solid var(--line-soft)}.effect-title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}.effect-title:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal)}.effect-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}.export-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;background:radial-gradient(120% 120% at 100% 50%,rgba(255,176,46,.06),transparent 60%),var(--panel)}.export-info{color:var(--ink-2);font-size:13px}.select{padding:9px 12px;font-family:var(--font-display);font-size:13px;font-weight:500;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--panel-2);color:var(--ink);cursor:pointer;outline:none;transition:border-color var(--transition)}.select:hover{border-color:var(--ink-3)}.loading-overlay{position:fixed;inset:0;background:#06080dc7;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000}.loading-overlay.active{display:flex}.loading-card{display:flex;align-items:center;gap:16px;padding:20px 28px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 60px -20px #000000e6}.loading-spinner{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--signal);border-radius:50%;animation:spin .9s linear infinite}.loading-text{font-size:14px;color:var(--ink)}.btn:focus-visible,.slider:focus-visible,.select:focus-visible,.drop-zone:focus-visible{outline:2px solid var(--signal);outline-offset:2px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){#app{padding:24px 14px 48px}.faceplate{flex-direction:column;align-items:flex-start;gap:14px}.faceplate-status{align-self:stretch;justify-content:center}.time-display{grid-template-columns:repeat(2,1fr)}.controls-panel{flex-direction:column;align-items:stretch}.control-group{justify-content:space-between}.control-group-end{margin-left:0}.effects-panel{flex-direction:column}.export-panel{flex-direction:column;align-items:stretch;text-align:center}.export-panel .control-group{justify-content:center}}@media(prefers-reduced-motion:reduce){.console,.drop-zone,.editor-container.active{animation:none}.btn,.slider::-webkit-slider-thumb,.drop-zone{transition:none}}