:root{--bg: #09090b;--surface: #111113;--surface2: #1c1c1f;--surface3: #27272a;--border: #27272a;--text: #fafafa;--muted: #71717a;--accent: #3b82f6;--accent-hover: #60a5fa;--red: #ef4444;--red-soft: rgba(239, 68, 68, .15);--green: #22c55e;--green-soft: rgba(34, 197, 94, .12);--amber: #f59e0b;--amber-soft: rgba(245, 158, 11, .12);--radius: 10px;--radius-lg: 14px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}.app{max-width:720px;margin:0 auto;padding:2.5rem 1.25rem 4rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:1.6rem;font-weight:700;letter-spacing:-.03em}.header p{color:var(--muted);font-size:.9rem;margin-top:.3rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.model-bar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.9rem 1rem;margin-bottom:1.25rem}.model-bar label{font-size:.85rem;color:var(--muted);font-weight:500}.model-bar select{background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.4rem .6rem;font-size:.85rem;cursor:pointer}.device-tag{margin-left:auto;padding:.2rem .6rem;border-radius:999px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.device-tag.webgpu{background:var(--green-soft);color:var(--green)}.device-tag.wasm{background:var(--amber-soft);color:var(--amber)}.load-btn{padding:.4rem .9rem;border:none;border-radius:8px;background:var(--accent);color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s}.load-btn:hover{background:var(--accent-hover)}.load-btn:disabled{opacity:.4;cursor:not-allowed}.progress-section{margin-bottom:1.25rem}.progress-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;font-size:.78rem}.progress-row .name{color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.progress-track{flex:2;height:4px;background:var(--surface2);border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .15s}.progress-row .pct{color:var(--accent);min-width:3rem;text-align:right;font-variant-numeric:tabular-nums}.status{text-align:center;padding:.55rem 1rem;border-radius:8px;font-size:.85rem;margin-bottom:1.25rem}.status.ready{background:var(--green-soft);color:var(--green)}.status.error{background:var(--red-soft);color:var(--red)}.tabs{display:flex;border-bottom:1px solid var(--border)}.tab-btn{flex:1;padding:.65rem;text-align:center;background:none;border:none;color:var(--muted);font-size:.88rem;cursor:pointer;transition:all .15s;border-bottom:2px solid transparent}.tab-btn:hover{color:var(--text);background:var(--surface2)}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.tab-panel{padding:1.25rem}.recorder{display:flex;flex-direction:column;align-items:center}.rec-btn{width:72px;height:72px;border-radius:50%;border:3px solid var(--surface3);background:var(--surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.rec-btn:hover{border-color:#3a3a3e}.rec-btn .dot{width:26px;height:26px;background:var(--red);border-radius:50%;transition:all .2s}.rec-btn.active{border-color:var(--red);box-shadow:0 0 28px var(--red-soft);animation:rec-pulse 1.6s ease-in-out infinite}.rec-btn.active .dot{width:20px;height:20px;border-radius:4px}@keyframes rec-pulse{0%,to{box-shadow:0 0 18px var(--red-soft)}50%{box-shadow:0 0 36px var(--red-soft)}}.rec-timer{margin-top:.6rem;font-size:1.4rem;font-weight:300;font-variant-numeric:tabular-nums;color:var(--muted)}.rec-hint{font-size:.78rem;color:var(--muted);margin-top:.2rem}.waveform-canvas{width:100%;height:48px;margin-top:.75rem;border-radius:6px}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:2.5rem 1rem;text-align:center;cursor:pointer;transition:all .2s}.drop-zone:hover,.drop-zone.over{border-color:var(--accent);background:#3b82f60a}.drop-zone p{color:var(--muted);font-size:.88rem}.drop-zone .hl{color:var(--accent);font-weight:500}.file-tag{margin-top:.6rem;font-size:.82rem;color:var(--green);text-align:center}.primary-btn{display:block;width:100%;padding:.75rem;margin:1.25rem 0;border:none;border-radius:var(--radius);background:var(--accent);color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s}.primary-btn:hover{background:var(--accent-hover)}.primary-btn:disabled{opacity:.3;cursor:not-allowed}.spinner-area{text-align:center;padding:1.5rem}.spinner{width:30px;height:30px;border:3px solid var(--surface3);border-top-color:var(--accent);border-radius:50%;animation:spin .65s linear infinite;margin:0 auto .6rem}@keyframes spin{to{transform:rotate(360deg)}}.spinner-area p{color:var(--muted);font-size:.85rem}.partial{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:1.25rem;min-height:2.5rem;font-size:.92rem;line-height:1.65;color:var(--muted)}.result-bar{display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;border-bottom:1px solid var(--border)}.result-meta{font-size:.78rem;color:var(--muted)}.result-actions{display:flex;gap:.35rem}.act-btn{padding:.3rem .6rem;font-size:.78rem;border:1px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--text);cursor:pointer;transition:all .12s}.act-btn:hover{border-color:var(--accent);color:var(--accent)}.result-text{padding:1rem;font-size:.93rem;line-height:1.7;white-space:pre-wrap}.seg-toggle{border-top:1px solid var(--border)}.seg-toggle summary{padding:.7rem 1rem;font-size:.82rem;color:var(--muted);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.seg-toggle summary::-webkit-details-marker{display:none}.seg-list{padding:0 1rem .7rem}.seg-row{display:flex;gap:.75rem;padding:.35rem 0;font-size:.82rem;border-bottom:1px solid var(--border)}.seg-row:last-child{border-bottom:none}.seg-time{color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:110px}.history-header{display:flex;align-items:center;gap:.5rem;margin:2rem 0 .75rem}.history-header h2{font-size:1rem;font-weight:600}.count-badge{background:var(--surface2);padding:.12rem .45rem;border-radius:999px;font-size:.72rem;color:var(--muted);font-weight:400}.clear-btn{margin-left:auto;background:none;border:none;color:var(--muted);font-size:.78rem;cursor:pointer}.clear-btn:hover{color:var(--red)}.hist-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;margin-bottom:.5rem;cursor:pointer;transition:border-color .12s}.hist-item:hover{border-color:#3a3a3e}.hist-date{font-size:.75rem;color:var(--muted);margin-bottom:.25rem}.hist-preview{font-size:.85rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.empty{text-align:center;padding:2rem;color:var(--muted);font-size:.88rem}.locked{opacity:.35;pointer-events:none}