:root{color-scheme:light dark;--bg: #f6f7fb;--card: #ffffff;--text: #1a1a1a;--muted: #666;--accent: #2563eb;--border: #e5e7eb;--danger: #dc2626;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--page-pad-x: 1rem;--page-pad-y: 1rem;--touch-min: 44px}@media(prefers-color-scheme:dark){:root{--bg: #0f1115;--card: #171a21;--text: #f3f4f6;--muted: #9ca3af;--accent: #60a5fa;--border: #2d3340}}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-text-size-adjust:100%}.app{width:100%;max-width:402px;margin:0 auto;min-height:100dvh;padding:calc(var(--page-pad-y) + var(--safe-top)) calc(var(--page-pad-x) + var(--safe-right)) calc(var(--page-pad-y) + var(--safe-bottom) + .5rem) calc(var(--page-pad-x) + var(--safe-left))}.login-screen{width:100%;max-width:402px;margin:0 auto;min-height:100dvh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--page-pad-y) + var(--safe-top)) calc(var(--page-pad-x) + var(--safe-right)) calc(var(--page-pad-y) + var(--safe-bottom) + .5rem) calc(var(--page-pad-x) + var(--safe-left));background:var(--bg)}.login-card{width:100%;display:flex;flex-direction:column;gap:0}.login-header{border-bottom:none;padding-bottom:0;margin-bottom:1.25rem}.login-brand{margin:.2rem 0 .85rem;font-size:2.15rem;letter-spacing:-.03em;line-height:1.05}.login-slogan{font-size:1.35rem;line-height:1.25;margin:0 0 .55rem;letter-spacing:-.025em;font-weight:700}.login-tagline{margin:0;font-size:.92rem;line-height:1.45;color:var(--muted)}.login-form{display:flex;flex-direction:column;gap:.75rem;margin:0;padding:1rem;background:var(--card);border:1px solid var(--border);border-radius:12px}.login-form .field,.login-form label.field{display:flex;flex-direction:column;gap:.4rem;margin:0;font-weight:600}.login-form .field span{font-size:.9rem;font-weight:600;color:var(--text)}.login-form input[type=password],.login-form input[type=text]{width:100%;min-height:var(--touch-min);margin:0;padding:.75rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:16px;line-height:1.3;-webkit-appearance:none;appearance:none}.login-form button{width:100%;margin:0}.login-card>.status{margin:.85rem 0 0;min-height:0}.login-credit{margin:1.35rem 0 0;padding-top:1rem;border-top:1px solid var(--border);font-size:.78rem;line-height:1.45;color:var(--muted);text-align:center}.login-credit-name{font-weight:650;color:var(--text)}.login-credit-studio{font-weight:650;color:var(--accent)}.login-credit-sep{color:var(--muted)}.app-header{margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--border)}.app-header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.55rem}.app-header-brand{min-width:0;flex:1 1 auto}.app-kicker{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.app-studio{margin:.15rem 0 0;font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:var(--accent);line-height:1.2}button.logout-btn{flex:0 0 auto;width:var(--touch-min);min-width:var(--touch-min);height:var(--touch-min);padding:0}.logout-icon{display:block;flex-shrink:0}.app-header h1{font-size:1.5rem;line-height:1.2;margin:0 0 .4rem;letter-spacing:-.02em}.app-header .hint{margin:0;font-size:.88rem}h2{font-size:1rem;margin:0 0 .75rem}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;margin-bottom:.875rem}.status{color:var(--muted);min-height:1.5rem;margin:.75rem 0}.load-progress{display:flex;flex-direction:column;gap:.45rem;margin:0 0 .85rem}.load-progress-track{width:100%;height:8px;border-radius:999px;background:var(--border);overflow:hidden}.load-progress-bar{height:100%;width:0%;border-radius:inherit;background:var(--accent);transition:width .18s ease-out}.load-progress.is-initializing .load-progress-bar{width:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 35%,transparent) 0%,var(--accent) 45%,color-mix(in srgb,var(--accent) 35%,transparent) 100%);background-size:200% 100%;animation:load-shimmer 1.1s linear infinite;transition:none}@keyframes load-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.load-progress-meta{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}.load-spinner{width:.95rem;height:.95rem;border:2px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite;flex:0 0 auto}@media(prefers-reduced-motion:reduce){.load-progress-bar{transition:none}.load-progress.is-initializing .load-progress-bar{animation:none;background:var(--accent)}.load-spinner{animation:none;border-top-color:transparent;opacity:.7}}.actions{display:flex;flex-direction:column;gap:.75rem}.actions.horizontal{flex-direction:row;flex-wrap:wrap}button,.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:.85rem 1.1rem;font-size:1rem;border:none;border-radius:10px;background:var(--accent);color:#fff;cursor:pointer;touch-action:manipulation;min-height:var(--touch-min);text-align:center}button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed}button.secondary,.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}button.recording,.btn.recording{background:var(--danger)}button.compact,.btn.compact{width:auto;min-width:var(--touch-min);flex:0 0 auto}textarea{width:100%;min-height:140px;padding:.75rem;font-size:1rem;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);resize:vertical}pre{margin:0;white-space:pre-wrap;word-break:break-word;font-size:.85rem;color:var(--muted)}.hint{font-size:.9rem;color:var(--muted)}.hint code{font-size:.85em}.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.75rem;background:var(--border);margin-right:.35rem;margin-bottom:.35rem}.badge.cached{background:color-mix(in srgb,#16a34a 22%,transparent);color:#15803d}.badge.online{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}@media(prefers-color-scheme:dark){.badge.cached{color:#86efac}}label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.35rem}select,input[type=password],input[type=text]{width:100%;padding:.75rem;font-size:1rem;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);margin-bottom:.75rem;min-height:var(--touch-min)}.check-row{display:flex;align-items:flex-start;gap:.65rem;font-weight:500;margin:.25rem 0 0;cursor:pointer}.check-row input{width:auto;min-height:auto;margin:.2rem 0 0;flex:0 0 auto}.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.85rem;padding:.3rem;border-radius:12px;background:color-mix(in srgb,var(--border) 65%,transparent)}.mode-toggle-btn{width:100%;min-height:2.5rem;padding:.45rem .6rem;border:none;border-radius:9px;background:transparent;color:var(--muted);font-size:.9rem;font-weight:600;box-shadow:none}.mode-toggle-btn.is-active{background:var(--card);color:var(--text);box-shadow:0 1px 2px color-mix(in srgb,#000 12%,transparent)}.mode-toggle-btn:disabled{opacity:.55}.compare-summary{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}.compare-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:0 0 .85rem;padding:0}.compare-step{display:flex;align-items:center;justify-content:center;min-height:2.25rem;padding:.35rem .4rem;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--muted);font-size:.78rem;font-weight:650;text-align:center}.compare-step.is-current{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));background:color-mix(in srgb,var(--accent) 14%,var(--bg));color:var(--text)}.compare-step.is-done{border-color:color-mix(in srgb,#16a34a 45%,var(--border));color:#15803d}.compare-prep{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.65rem}.badge.compare-badge{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent);width:fit-content}.compare-clip{display:flex;flex-direction:column;gap:.55rem;margin:0 0 .85rem;padding:.75rem;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--bg) 70%,var(--card))}.compare-clip-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}.compare-audio{width:100%;min-height:40px}.compare-mic-prompt{margin:0 0 .5rem;font-weight:600}.compare-upload-row{margin-bottom:.875rem}.meta.inline-meta{margin-top:0}.compare-grid{position:relative;display:grid;gap:.875rem;margin-top:1rem}.compare-grid.is-busy>.compare-col:not(.is-busy){opacity:.55}.compare-col h3{margin:0;font-size:.95rem}.compare-col-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.compare-col textarea{min-height:140px}.compare-busy{display:flex}@media(prefers-color-scheme:dark){.compare-step.is-done{color:#86efac}}.mic-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin-bottom:.75rem}.mic-row .mic-select-wrap{flex:1 1 100%;min-width:0}.mic-row select{margin-bottom:0}.mic-meter{display:none;width:100%;height:8px;border-radius:999px;background:var(--border);overflow:hidden;margin:0 0 .75rem}.mic-meter.is-active{display:block}.mic-meter-bar{height:100%;width:0%;background:var(--accent);transition:width 60ms linear}.model-section-hint{margin:0 0 .75rem}.demo-gate{margin:0 0 .85rem;padding:.85rem;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,var(--bg))}.demo-gate.is-unlocked{border-color:color-mix(in srgb,#16a34a 45%,var(--border));background:color-mix(in srgb,#16a34a 10%,var(--bg))}.demo-gate-title{margin:0 0 .35rem;font-size:.95rem;font-weight:700}.demo-gate .hint{margin:0 0 .55rem}.demo-unlock-row{display:flex;gap:.5rem;align-items:stretch;margin-bottom:.45rem}.demo-unlock-row input{flex:1 1 auto;min-width:0;margin-bottom:0}.demo-unlock-row button.compact{flex:0 0 auto;width:auto;min-width:5.5rem;padding-inline:.85rem}.demo-unlocked-note{margin:0!important;color:#15803d}@media(prefers-color-scheme:dark){.demo-unlocked-note{color:#86efac}}.model-list{display:flex;flex-direction:column;gap:.5rem;margin:0 0 .25rem}button.model-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.35rem;width:100%;min-height:0;margin:0;padding:.75rem .85rem;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);text-align:left;font:inherit;line-height:1.35;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button.model-card:disabled{opacity:.55}button.model-card.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 3px 0 0 var(--accent)}.model-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;min-width:0}.model-card-name{flex:1 1 auto;min-width:0;font-weight:650;font-size:.95rem;overflow-wrap:anywhere}.model-card-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25rem;flex:0 1 auto;max-width:45%}.model-card-badges .badge{margin:0;white-space:nowrap}.model-card-meta{display:flex;flex-wrap:wrap;gap:.35rem}.model-chip{display:inline-flex;align-items:center;padding:.15rem .45rem;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--card) 70%,transparent);font-size:.72rem;line-height:1.2;color:var(--muted);white-space:nowrap}.model-card-best{margin:0;font-size:.8rem;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.meta{font-size:.85rem;color:var(--muted);margin-top:.5rem}.transcript-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem;align-items:stretch}.transcript-actions button{flex:1 1 calc(50% - .375rem);min-width:8rem}.transcript-wrap{position:relative}.transcript-wrap.is-busy textarea{opacity:.45}.busy-overlay{display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;gap:.75rem;border-radius:10px;background:color-mix(in srgb,var(--card) 72%,transparent);backdrop-filter:blur(2px);pointer-events:none;z-index:1}.transcript-wrap.is-busy .busy-overlay{display:flex}.spinner{width:2.25rem;height:2.25rem;border:3px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite}.busy-label{font-size:.95rem;font-weight:600;color:var(--text)}.record-sticky{position:sticky;bottom:calc(.5rem + var(--safe-bottom));z-index:2}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation:none;border-top-color:transparent;opacity:.7}.mic-meter-bar{transition:none}}@media(min-width:640px){.app,.login-screen{max-width:560px;--page-pad-x: 1.25rem}.app-header h1{font-size:1.5rem}.actions{flex-direction:row;flex-wrap:wrap}.actions>button,.actions>.btn{width:auto;flex:1 1 auto}.mic-row .mic-select-wrap{flex:1 1 220px}.model-list{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}button.model-card{height:100%}.model-card-best{-webkit-line-clamp:3;line-clamp:3}.transcript-actions button.copy-btn{min-width:11.5rem;flex:0 1 auto}.transcript-actions button.clear-btn{margin-left:auto;flex:0 0 auto;width:auto}.compare-grid{grid-template-columns:1fr 1fr;align-items:start}.compare-col textarea{min-height:160px}}