:root{--radius: 12px;--bg: #0f1115;--bg-light: #1a1d23;--fg: #d0d3da;--grid-primary: rgba(255, 255, 255, .12);--grid-secondary: rgba(255, 255, 255, .06);--accent: #7aa2f7;--axis-font: 11px Inter, system-ui, sans-serif;--axis-color: rgba(255, 255, 255, .6);--shadow: 0 4px 12px rgba(0, 0, 0, .3)}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:Inter,system-ui,sans-serif;background-color:#08090b;color:var(--fg);display:flex;justify-content:center;align-items:center;overflow:hidden}#app{background-color:var(--bg);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;width:90vw;max-width:1200px;border:1px solid var(--bg-light);position:relative}#drop-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#7aa2f733;border:2px dashed var(--accent);border-radius:var(--radius);display:flex;justify-content:center;align-items:center;z-index:10;pointer-events:none;opacity:0;transition:opacity .2s ease-in-out}#app.dragover #drop-overlay{opacity:1}#drop-message{color:var(--fg);font-size:1.5rem;font-weight:500;padding:16px 24px;background-color:var(--bg);border-radius:8px}.spectrogram-wrapper{display:flex;gap:8px;flex-grow:1}#visualization-container{position:relative;flex-grow:1;height:400px;cursor:grab}#visualization-container:active{cursor:grabbing}#selection-box{position:absolute;background-color:#7aa2f733;border:1px solid var(--accent);z-index:10;pointer-events:none;display:none}#info-overlay{position:absolute;top:8px;left:8px;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:4px;padding:4px 8px;font-size:12px;pointer-events:none;color:var(--fg);z-index:5;display:none}#info-overlay>p{font-weight:500}#tooltip{font-family:monospace;color:var(--accent)}canvas{display:block;width:100%;height:100%}#spectrogram-canvas{background-color:#000;border-radius:4px}#axes-canvas{position:absolute;top:0;left:0;pointer-events:none;z-index:2}#db-scale-container{width:50px;height:400px;position:relative}#db-scale-canvas{border-radius:4px}#time-axis-container{width:calc(100% - 58px);height:30px;margin-top:4px}#controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;background-color:var(--bg-light);padding:12px;border-radius:8px;margin-top:8px}#main-controls{grid-column:1 / -1;display:flex;gap:12px}.control-group{display:flex;flex-direction:column;gap:6px}.control-group.range-group{gap:2px}label{font-size:12px;font-weight:500;color:var(--axis-color)}label>span{font-weight:400;color:var(--fg)}button,select{background-color:var(--bg);color:var(--fg);border:1px solid var(--grid-primary);border-radius:6px;padding:8px 12px;font-size:14px;cursor:pointer;transition:background-color .2s,border-color .2s;display:flex;align-items:center;justify-content:center;gap:8px}button:hover,select:hover{background-color:#2a2d33;border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed;background-color:var(--bg-light);border-color:var(--grid-primary)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--bg);border-radius:3px;outline:none;margin-top:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent);cursor:pointer;border-radius:50%;border:2px solid var(--bg)}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--accent);cursor:pointer;border-radius:50%;border:2px solid var(--bg)}#status-container{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:8px 12px;background-color:var(--bg-light);border-radius:8px;min-height:40px}#status-progress-wrapper{display:flex;flex-direction:column;gap:4px;min-width:200px}#status-message{font-size:14px;color:var(--axis-color);text-align:right}#audio-info{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:12px;color:var(--axis-color)}#audio-info span{color:var(--fg);font-weight:500}#progress-bar{width:100%;height:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:4px;overflow:hidden;border:none}#progress-bar::-webkit-progress-bar{background-color:var(--bg)}#progress-bar::-webkit-progress-value{background-color:var(--accent);transition:width .1s linear}#progress-bar::-moz-progress-bar{background-color:var(--accent)}