:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #101b28; color: #eff5f4; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse 65% 45% at 78% 4%, #1c3b43 0%, transparent 68%), #101b28; }
button, select, input, textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: min(940px, calc(100% - 40px)); margin: 0 auto; }
.topbar { height: 91px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ffffff17; }
.brand { display: flex; gap: 11px; align-items: center; font-size: 15px; font-weight: 800; letter-spacing: .15em; }
.brand strong { color: #67d4bd; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #57cbb3; color: #10232c; font-size: 23px; letter-spacing: 0; }
.top-label, .eyebrow { color: #77d9c2; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.top-label { color: #90a5aa; }
.hero { padding: 63px 0 39px; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #66dabe; box-shadow: 0 0 0 5px #66dabe22; }
h1 { margin: 20px 0 15px; font-size: clamp(45px, 7vw, 76px); line-height: 1.04; letter-spacing: -.065em; font-weight: 730; }
h1 em { font-style: normal; color: #6dd8bd; }
.hero p { max-width: 520px; color: #a9bcc4; font-size: 16px; line-height: 1.7; margin: 0; }
.recorder { border: 1px solid #ffffff22; border-radius: 22px; background: #172632; box-shadow: 0 24px 75px #06101962; padding: 28px; }
.recorder-head, .actions, .transcript-head, .footer-actions { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.status { display: flex; align-items: center; gap: 10px; min-height: 22px; font-size: 13px; font-weight: 650; color: #c1d1d3; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #809099; }
.status-dot.active { background: #58d2ad; box-shadow: 0 0 0 5px #58d2ad22; }
.status-dot.speaking { background: #f6c778; box-shadow: 0 0 0 5px #f6c77822; }
.status-dot.error { background: #ff8f83; }
.meter { height: 28px; display: flex; gap: 3px; align-items: center; }
.meter span { width: 3px; height: 5px; border-radius: 3px; background: #415a63; transition: height 80ms, background 80ms; }
.meter span.lit { background: #6ed8bd; }
.actions { margin: 25px 0 31px; }
.record-button { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 11px; background: #6bd6bb; color: #0d282e; font-weight: 760; box-shadow: 0 7px 21px #4cbaa626; }
.record-button:hover { background: #88e5cf; }
.record-button:disabled { cursor: wait; opacity: .6; }
.record-button.recording { background: #efaa91; color: #342421; }
.record-button.recording:hover { background: #f5bba6; }
.mic-icon { display: block; font-size: 17px; line-height: 1; }
.language-control, .token-control { display: flex; flex-direction: column; gap: 6px; color: #91a9ae; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
select, .token-control input { min-width: 152px; padding: 9px 13px; border: 1px solid #ffffff2b; border-radius: 9px; background: #213440; color: #f1f7f5; outline: none; }
.token-control input { width: min(275px, 100%); }
select:focus-visible, .token-control input:focus-visible, button:focus-visible, textarea:focus-visible { outline: 2px solid #74d8c2; outline-offset: 3px; }
select:disabled, .token-control input:disabled { opacity: .6; }
.transcript-head { margin-bottom: 10px; }
.transcript-head label { font-size: 14px; font-weight: 750; }
.transcript-head span { color: #8399a0; font-size: 12px; }
textarea { width: 100%; min-height: 275px; resize: vertical; padding: 20px 21px; border: 1px solid #ffffff20; border-radius: 13px; outline: none; background: #101e29; color: #e8f2f0; font-size: 17px; line-height: 1.68; }
textarea::placeholder { color: #728a91; }
textarea:focus { border-color: #6bd6bb88; }
.footer-actions { margin-top: 13px; color: #849aa0; font-size: 12px; }
.footer-actions > div { display: flex; gap: 4px; }
.text-button { border: 0; background: transparent; color: #82dac5; font-size: 12px; font-weight: 700; padding: 9px 10px; }
.text-button:hover { color: #b4f3e2; }
.footnote { margin: 19px 0 40px; text-align: center; color: #728991; font-size: 11px; }
@media (max-width: 620px) { .topbar { height: 72px; } .top-label { display: none; } .hero { padding: 44px 0 31px; } .recorder { padding: 18px; } .actions, .footer-actions { align-items: stretch; flex-direction: column; } .language-control, .token-control { align-self: stretch; } .token-control input { width: 100%; } .footer-actions > div { align-self: flex-end; } textarea { min-height: 250px; } }