*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f2fafd;--surface:#fff;--text:#222;--text-secondary:#666;--accent:#40718f;--accent-hover:#315870;--border:#ddd;--button-active:#eee;--trim-overlay:#c8c8c88c;--handle-color:#d44;--cursor-color:#40718f;--marker-color:#e67300;--button-text:#fff;--save-color:#36824b;--save-color-active:#2a653a;--buffer-indicator:var(--accent);--time-bar-height:16px}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#15202b;--surface:#2a2a2a;--text:#fff;--text-secondary:#aaa;--accent:#6091b3;--accent-hover:#4a718f;--border:#444;--button-active:#111;--trim-overlay:#3232328c;--handle-color:#e44;--cursor-color:#6091b3;--marker-color:#f67300;--save-color:#2a653a;--save-color-active:#1a452a}}html,body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.4;overflow-x:hidden}h1{text-align:center;padding:8px 0 12px;font-size:18px;font-weight:600}#fileInput{display:none}.splash{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:24px;display:flex}.splash h1{padding:0;font-size:32px;font-weight:700}.splash p{color:var(--text-secondary);font-size:16px}.splash label{margin:1rem}.container{margin:0 auto;padding:12px}.file-section{text-align:center;margin-bottom:12px}.file-button{background:var(--accent);color:var(--button-text);cursor:pointer;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;transition:background .15s;display:inline-block}.file-button:active{background:var(--accent-hover)}.file-button input{display:none}.file-info{color:var(--text-secondary);margin-top:6px;font-size:13px}.spectrogram-section{margin-bottom:12px}.spectrogram-wrapper{border:1px solid var(--border);border-radius:6px;flex-direction:row;display:flex;overflow:hidden}.spectrogram-scroll-wrap{touch-action:pan-x;-webkit-overflow-scrolling:touch;flex:1;min-width:0;position:relative;overflow:auto hidden}.spectrogram-inner{min-width:100%;height:200px;position:relative;overflow:hidden}.time-ruler{height:var(--time-bar-height);-webkit-user-select:none;user-select:none;pointer-events:none;background:var(--surface);min-width:100%;position:relative;overflow:hidden}.time-tick{background:var(--border);width:1px;height:4px;position:absolute;top:0}.time-tick.major{background:var(--text-secondary);height:12px}.time-tick span{color:var(--text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums;padding:.25rem;font-size:9px;line-height:1;position:absolute}.spectrogram-inner canvas{height:200px;image-rendering:pixelated;display:block}.freq-axis{background:var(--surface);border-right:1px solid var(--border);pointer-events:none;flex-shrink:0;width:20px;position:relative}.freq-axis:before{content:"";height:var(--time-bar-height);display:block}.freq-label{color:var(--text-secondary);white-space:nowrap;font-size:9px;line-height:1;position:absolute;right:0;transform:translateY(-50%)}.trim-overlay-left,.trim-overlay-right{background:var(--trim-overlay);pointer-events:none;height:100%;position:absolute;top:0}.trim-overlay-left{left:0}.trim-overlay-right{right:0}.buffer-indicator{background:color-mix(in srgb, var(--buffer-indicator) 30%, transparent);pointer-events:none;z-index:5;height:100%;position:absolute;top:0}.start-buffer{border-right:2px solid var(--buffer-indicator)}.end-buffer{border-left:2px solid var(--buffer-indicator)}.trim-handle{background:var(--handle-color);cursor:ew-resize;z-index:10;touch-action:none;width:4px;height:100%;position:absolute;top:0}.trim-handle:before{content:"";width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.trim-handle:after{content:"";border:2px solid var(--handle-color);background:var(--surface);border-radius:3px;width:14px;height:28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.playback-cursor{background:var(--cursor-color);pointer-events:none;z-index:5;width:2px;height:100%;display:none;position:absolute;top:0}.playback-marker{background:var(--marker-color);pointer-events:none;z-index:4;width:2px;height:100%;display:none;position:absolute;top:0}.time-bar{color:var(--text-secondary);justify-content:space-between;padding:2px 4px;font-size:11px;display:flex}.playback-controls-container{flex-wrap:wrap;justify-content:center;align-items:center;column-gap:4rem;margin:8px 0;display:flex}.zoom-controls{justify-content:center;align-items:center;margin:8px 0;display:flex}.zoom-btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;width:40px;height:40px;color:var(--text);border-radius:8px;justify-content:center;align-items:center;font-size:20px;font-weight:600;display:flex}.zoom-btn:active{background:var(--button-active)}.zoom-level{color:var(--text-secondary);text-align:center;min-width:40px;font-size:13px}.playback-controls{justify-content:center;align-items:center;gap:16px;margin:10px 0;display:flex}.play-btn{background:var(--accent);width:52px;height:52px;color:var(--button-text);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:22px;transition:background .15s;display:flex}.play-btn:active{background:var(--accent-hover)}.rewind-btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;width:40px;height:40px;color:var(--text);border-radius:8px;justify-content:center;align-items:center;font-size:18px;display:flex}.rewind-btn:active{background:var(--button-active)}.time-display{font-variant-numeric:tabular-nums;color:var(--text-secondary);text-align:center;min-width:120px;font-size:14px}.settings{background:var(--surface);border:1px solid var(--border);border-radius:8px;max-width:500px;margin:12px auto;padding:14px}.setting-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:10px;padding:8px 0;display:flex}.setting-row:last-child{border-bottom:none}.setting-label{flex-shrink:0;font-size:14px}.setting-control{align-items:center;gap:8px;display:flex}.setting-value{color:var(--text-secondary);text-align:right;font-variant-numeric:tabular-nums;min-width:50px;font-size:13px}input[type=range]{appearance:none;background:var(--border);border-radius:3px;outline:none;width:120px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:22px;height:22px}input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}.save-section{text-align:center;margin:16px 0}.save-btn{background:var(--save-color);color:var(--button-text);cursor:pointer;border:none;border-radius:8px;padding:14px 32px;font-size:16px;font-weight:600;transition:background .15s;display:inline-block}.save-btn:active{background:var(--save-color-active)}.save-btn:disabled{background:var(--save-color-active);cursor:not-allowed}.loading-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.loading-overlay.visible{display:flex}.loading-overlay .loading-box{background:var(--surface);text-align:center;border-radius:12px;padding:24px 32px;font-size:15px}.loading-overlay .loading-box .spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;margin:0 auto 12px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}