:root { color-scheme: dark; --bg:#071018; --surface:#0e1b26; --border:rgba(156,190,207,.16); --text:#eef7f9; --muted:#89a2af; --green:#42e8a4; --blue:#50b9ff; --red:#ff6577; --amber:#ffc66d; --shadow:0 24px 70px rgba(0,0,0,.3); }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--text); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:radial-gradient(circle at 12% 8%,rgba(33,123,139,.14),transparent 30%),radial-gradient(circle at 88% 22%,rgba(78,73,169,.12),transparent 28%),var(--bg); }
h1,h2,p { margin:0; } h1 { font-size:clamp(25px,3vw,38px); letter-spacing:-.04em; } h2 { font-size:21px; letter-spacing:-.025em; }
.eyebrow { color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.16em; margin-bottom:6px; }
.ambient { position:fixed; pointer-events:none; filter:blur(80px); opacity:.18; border-radius:50%; }.ambient-one { width:280px;height:280px;background:#19d99a;top:-140px;right:20%; }.ambient-two { width:240px;height:240px;background:#297dff;bottom:5%;left:-130px; }
.brand,.realtime-header,.identity,.card-heading,.button-row,.metric-row { display:flex; align-items:center; }.brand { gap:14px; }
.brand-mark { width:44px;height:44px;display:flex;align-items:center;justify-content:center;gap:3px;border:1px solid rgba(66,232,164,.35);border-radius:14px;background:rgba(66,232,164,.08);margin-bottom:18px; }.brand .brand-mark { margin:0; }.brand-mark span { width:3px;border-radius:3px;background:var(--green); }.brand-mark span:nth-child(1),.brand-mark span:nth-child(5){height:11px}.brand-mark span:nth-child(2),.brand-mark span:nth-child(4){height:23px}.brand-mark span:nth-child(3){height:31px}
.realtime-shell { width:min(1180px,calc(100% - 40px));margin:0 auto;padding:34px 0 50px;position:relative; }.realtime-header { justify-content:space-between;gap:20px;margin-bottom:28px; }.identity { gap:12px;color:var(--muted);font-size:12px; }.identity strong { color:var(--text); }
.service-layout { display:grid;grid-template-columns:1fr 1fr;gap:18px; }.speech-card,.access-card { border:1px solid var(--border);background:rgba(14,27,38,.9);box-shadow:var(--shadow);border-radius:20px; }.speech-card { padding:24px; }.card-heading { justify-content:space-between;gap:15px;margin-bottom:23px; }.state-pill { padding:6px 9px;border-radius:999px;color:var(--muted);background:rgba(137,162,175,.08);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; }.state-pill.active { color:var(--blue);background:rgba(80,185,255,.09); }.state-pill.success { color:var(--green);background:rgba(66,232,164,.09); }.state-pill.error { color:var(--red);background:rgba(255,101,119,.09); }
label { display:block;color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.02em; }.field-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; } input,select,textarea { width:100%;margin-top:7px;border:1px solid var(--border);border-radius:11px;background:#09151e;color:var(--text);font:inherit;padding:11px 12px;outline:none; }.field-grid select,select { height:43px; } input:focus,select:focus,textarea:focus { border-color:rgba(80,185,255,.55);box-shadow:0 0 0 3px rgba(80,185,255,.08); } textarea { resize:vertical;min-height:94px;line-height:1.5; }.text-field { position:relative;margin-top:14px; }.text-field span { position:absolute;right:10px;bottom:9px;color:var(--muted);font-size:9px; }
.button-row { gap:9px;margin:18px 0; } button { border:0;border-radius:11px;padding:11px 15px;color:var(--text);font-weight:700;cursor:pointer; }.primary-button { background:var(--green);color:#071018; }.secondary-button,.quiet-button { border:1px solid var(--border);background:rgba(137,162,175,.07);color:var(--muted); }.quiet-button { display:inline-flex;align-items:center;padding:8px 11px;border-radius:11px;font-size:10px;text-decoration:none; } button:disabled { opacity:.45;cursor:not-allowed; }
.metric-row { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px; }.metric-row div { padding:12px;border:1px solid rgba(156,190,207,.09);border-radius:12px;background:rgba(4,12,18,.35); }.metric-row span { display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px; }.metric-row strong { font-size:18px; }.metric-row small { display:block;color:var(--muted);font-size:9px;line-height:1.45;margin-top:6px; }
.metric-row.tts-metrics { grid-template-columns:repeat(3,1fr); }
.transcript { min-height:115px;padding:15px;border:1px solid var(--border);border-radius:12px;background:#061017;color:#c7d8df;line-height:1.55;white-space:pre-wrap;overflow:auto; }.transcript[dir="rtl"] { text-align:right;font-size:18px; }
.alert { margin:0 0 18px;padding:12px 14px;border-radius:11px;font-size:12px; }.alert.error { color:#ffdce1;background:#421923;border:1px solid rgba(255,101,119,.34); }.alert.warning { color:#fff0d2;background:#3b2d17;border:1px solid rgba(255,198,109,.34); }
footer { margin-top:18px;color:var(--muted);font-size:10px;text-align:center; }
.access-page { display:grid;place-items:center;padding:24px; }.access-card { width:min(430px,100%);padding:34px; }.access-copy { color:var(--muted);font-size:13px;line-height:1.55;margin:12px 0 22px; }.access-form { display:grid;gap:15px; }.access-form button { margin-top:4px;background:var(--green);color:#071018; }
@media(max-width:800px){.service-layout{grid-template-columns:1fr}.realtime-header{align-items:flex-start;flex-direction:column}.identity{width:100%;justify-content:space-between}.realtime-shell{width:min(100% - 24px,1180px);padding-top:20px}}
@media(max-width:480px){.metric-row.tts-metrics{grid-template-columns:1fr}}