:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #090b10; color: #edf2ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0%, #20345c 0, transparent 34rem), #090b10; }
main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0; }
header { margin-bottom: 28px; }
.eyebrow { color: #86efac; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 800; }
h1 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 4.5rem); line-height: .95; letter-spacing: -0.06em; }
p { color: #a8b3cf; }
.panel { border: 1px solid rgba(148, 163, 184, .24); background: rgba(15, 23, 42, .78); border-radius: 24px; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.controls { display: grid; gap: 18px; margin-bottom: 20px; }
label { display: grid; gap: 8px; color: #dbeafe; font-weight: 700; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #cbd5e1; }
select, button { border: 1px solid rgba(148, 163, 184, .32); border-radius: 14px; padding: 12px 14px; background: #0f172a; color: #f8fafc; font: inherit; }
button { cursor: pointer; background: linear-gradient(135deg, #2563eb, #7c3aed); border: 0; font-weight: 800; }
button:disabled { cursor: not-allowed; opacity: .45; background: #334155; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
h2 { margin: 0 0 14px; }
.transcript { min-height: 170px; font-size: 1.35rem; line-height: 1.55; white-space: pre-wrap; }
.muted { color: #64748b; }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; }
.metrics div { padding: 16px; border-radius: 18px; background: rgba(2, 6, 23, .52); border: 1px solid rgba(148, 163, 184, .16); }
dt { color: #94a3b8; font-size: .82rem; }
dd { margin: 8px 0 0; font-size: 1.45rem; font-weight: 900; }
@media (max-width: 820px) { .grid, .metrics { grid-template-columns: 1fr; } }