:root { color-scheme: dark; --night: #111e2b; --walnut: #392f28; --metal: #ada79a; --amber: #efc67b; --ink: #f0ebe0; --muted: #b6bcbf; --rule: #41505b; --focus: #ffe1a0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: var(--ink); line-height: 1.55; }
button, input, textarea { font: inherit; }
button, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }
.station { width: min(1100px, calc(100% - 64px)); margin: 0 auto; padding: 58px 0 28px; }
.masthead { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 34px; }
.edition { color: var(--muted); margin: 0 0 8px; font-size: 15px; }
h1 { font: 400 clamp(35px, 4.6vw, 56px)/1.08 Georgia, "Times New Roman", serif; margin: 0; letter-spacing: -1.7px; }
.prototype { font-size: 14px; text-align: right; margin: 0 0 3px; color: var(--amber); flex-shrink: 0; }
.prototype span { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.receiver { border: 1px solid #635449; background: var(--walnut); padding: 17px 17px 0; border-radius: 14px 14px 8px 8px; box-shadow: 0 18px 38px #050e1666, inset 0 1px #ffffff14; }
.receiver-face { display: grid; grid-template-columns: 58px minmax(0, 1fr) 122px; gap: 24px; padding: 28px 26px; border-radius: 7px; background: linear-gradient(180deg, #bbb4a7, #989385); color: #27291f; border: 1px solid #cdc5b7; box-shadow: 0 3px 4px #0005; }
.speaker-grille { background: repeating-linear-gradient(0deg, transparent 0 6px, #504f43 6px 9px); border-radius: 6px; opacity: .75; margin: 10px 0; }
.display { min-height: 238px; background: #242923; border: 6px solid #4c4d40; border-radius: 5px; padding: 18px 24px 14px; color: #d6bb88; box-shadow: inset 0 3px 10px #0008, 0 1px #ded7c4; transition: color .3s, background .3s; }
.display.powered { background: #2f2b1c; color: var(--amber); }
.display-top, .display-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; }
.display-top { opacity: .85; }
.display-title { font: 400 clamp(27px, 3vw, 38px)/1.14 Georgia, "Times New Roman", serif; margin: 16px 0 8px; letter-spacing: -.4px; min-height: 44px; }
.display-caption { font-size: 13px; max-width: 48ch; margin: 0; opacity: .86; min-height: 40px; }
.tuner { height: 22px; margin: 16px 0 9px; position: relative; border-bottom: 1px solid #b7945355; background: repeating-linear-gradient(90deg, #b7945388 0 1px, transparent 1px 13px) bottom / 100% 7px no-repeat; }
.tuner i { position: absolute; height: 20px; width: 2px; left: 38%; top: 0; background: currentColor; }
.receiver-controls { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 2px 0 0; }
.power { border: 0; background: transparent; color: #24261f; padding: 0; display: flex; flex-direction: column; align-items: center; font-size: 13px; font-weight: 600; gap: 9px; min-width: 85px; }
.power-symbol { display: grid; place-items: center; height: 79px; width: 79px; font: 400 28px/1 sans-serif; background: linear-gradient(140deg, #4f5148, #272b26); color: #d5d1bb; border: 3px solid #717166; outline: 1px solid #ddd5c0; border-radius: 50%; box-shadow: 0 5px 5px #0005, inset 0 2px 2px #ffffff20; }
.power[aria-pressed="true"] .power-symbol { color: #ffda8a; box-shadow: 0 5px 5px #0005, inset 0 2px 2px #ffffff20; }
.power:active .power-symbol { transform: translateY(1px); }
.volume-control { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
input[type="range"] { width: 104px; min-height: 24px; accent-color: #343b30; cursor: pointer; }
.volume-control .quiet-button { color: #23271f; min-height: 34px; font-size: 12px; padding: 1px 10px; }
.receiver-foot { display: flex; justify-content: space-between; gap: 18px; color: #d2c6b5; font-size: 11px; padding: 12px 14px 13px; }
.notice { font-size: 13px; color: var(--muted); margin: 18px 4px 40px; min-height: 21px; }
.notice.error { color: #ffb9a6; }
.call-desk { display: grid; grid-template-columns: .85fr 1.15fr; column-gap: 70px; padding: 0 4px 35px; }
h2 { font: 400 29px/1.18 Georgia, "Times New Roman", serif; letter-spacing: -.4px; margin: 0 0 17px; }
.call-intro p { font-size: 15px; color: #d2d6d7; max-width: 35ch; margin: 0 0 16px; }
.call-intro .privacy-note { color: #a8b2b9; font-size: 12px; max-width: 43ch; }
form label { display: block; font-size: 13px; font-weight: 600; }
input[type="text"], input:not([type]), textarea { display: block; width: 100%; border: 1px solid #57636c; border-radius: 5px; background: #192a38; color: var(--ink); padding: 10px 12px; margin: 6px 0 16px; font-size: 14px; font-weight: 400; }
textarea { resize: vertical; min-height: 80px; }
input::placeholder, textarea::placeholder { color: #98a6b0; opacity: 1; }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.primary-button, .secondary-button, .hang-up { border-radius: 5px; border: 1px solid transparent; min-height: 43px; padding: 9px 16px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.primary-button { color: #302616; background: #e8c485; box-shadow: inset 0 1px #fff6; }
.primary-button:hover:enabled { background: #f6d596; }
.secondary-button { color: var(--ink); background: #263947; border-color: #63717a; }
.secondary-button:hover:enabled { background: #354958; }
.quiet-button { color: #d3d8da; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; padding: 9px 2px; min-height: 43px; font-size: 12px; }
.field-hint { color: var(--muted); font-size: 11px; line-height: 1.4; max-width: 23ch; }
.call-status { display: flex; align-items: center; gap: 10px; padding-bottom: 17px; border-bottom: 1px solid var(--rule); }
.call-status p { flex: 1; margin: 0; line-height: 1.45; }
.call-status strong { font-size: 15px; font-weight: 600; }
.call-status p span { display: block; font-size: 12px; color: var(--muted); }
.mic-indicator { background: #73818a; height: 10px; width: 10px; border-radius: 50%; flex-shrink: 0; }
.mic-indicator.enabled { background: #efc67b; box-shadow: 0 0 0 4px #efc67b17; }
.mic-indicator.speaking { background: #fae5b2; box-shadow: 0 0 0 5px #efc67b36; }
.hang-up { color: #f5c1ae; border-color: #855d53; background: transparent; padding: 6px 10px; min-height: 36px; font-size: 12px; }
.call-guidance { color: #c6ced2; font-size: 13px; margin: 16px 0; }
.speech-controls { display: flex; gap: 12px; align-items: center; margin-bottom: 23px; }
.speech-controls span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.message-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: -4px; }
.consent-panel { border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 20px; }
.checkbox-label { display: flex; align-items: start; gap: 10px; font-size: 13px; cursor: pointer; }
.checkbox-label input { width: 17px; height: 17px; margin: 3px 0; accent-color: #e8c485; flex-shrink: 0; }
.checkbox-label small { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }
.consent-panel button { margin-top: 16px; }
.conversation { border-top: 1px solid var(--rule); margin: 0 4px; }
details { border-bottom: 1px solid var(--rule); }
summary { padding: 17px 0; cursor: pointer; font-size: 13px; }
summary span { float: right; color: var(--muted); font-size: 11px; }
.transcript { max-height: 360px; overflow: auto; padding: 0 12px 18px 0; scrollbar-color: #667580 transparent; }
.transcript-entry { margin: 12px 0 18px; max-width: 78ch; }
.transcript-entry .speaker { font-size: 11px; font-weight: 600; color: var(--amber); display: flex; gap: 9px; }
.transcript-entry .speaker span { font-weight: 400; color: var(--muted); }
.transcript-entry p { margin: 4px 0 0; color: #dae0e2; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.empty-transcript, .timing-caption, #timings { font-size: 12px; color: var(--muted); }
.timing-caption { margin: 0 0 10px; }
#timings { padding-left: 20px; }
.page-footer { display: flex; justify-content: space-between; gap: 20px; margin: 25px 4px 0; color: #9aa7b0; font-size: 10px; }
.page-footer p { margin: 0; }
@media (max-width: 800px) { .station { width: min(700px, calc(100% - 36px)); padding-top: 32px; } .masthead { align-items: start; } .prototype { padding-top: 4px; font-size: 12px; } .prototype span { max-width: 15ch; margin-left: auto; } .receiver-face { grid-template-columns: minmax(0, 1fr) 100px; gap: 18px; padding: 20px; } .speaker-grille { display: none; } .call-desk { gap: 32px; grid-template-columns: .8fr 1.2fr; } .form-actions { align-items: start; flex-direction: column; gap: 10px; } .field-hint { max-width: none; } }
@media (max-width: 560px) { .station { width: calc(100% - 28px); padding-top: 28px; } .masthead { display: block; margin-bottom: 23px; } h1 { font-size: 39px; } .edition { font-size: 12px; } .prototype { text-align: left; margin-top: 15px; display: flex; gap: 10px; font-size: 11px; } .prototype span { max-width: none; margin: 0; font-size: 11px; } .receiver { padding: 9px 9px 0; border-radius: 10px; } .receiver-face { grid-template-columns: 1fr; padding: 12px; gap: 16px; } .display { padding: 14px 16px 12px; min-height: 225px; border-width: 4px; } .display-title { font-size: 32px; } .display-caption { font-size: 12px; } .display-top, .display-bottom { font-size: 10px; } .receiver-controls { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 8px 2px; } .power { flex-direction: row; gap: 10px; font-size: 12px; } .power-symbol { height: 48px; width: 48px; font-size: 23px; border-width: 2px; } .volume-control { width: auto; display: grid; grid-template-columns: auto auto; gap: 0 10px; font-size: 11px; } .volume-control label { grid-column: 1 / -1; } input[type="range"] { width: 95px; } .volume-control .quiet-button { font-size: 11px; min-height: 27px; padding: 0; } .receiver-foot { font-size: 9px; gap: 10px; padding: 10px 4px; } .receiver-foot span { max-width: 24ch; } .notice { margin-bottom: 30px; font-size: 11px; } .call-desk { display: block; } .call-intro { margin-bottom: 25px; } h2 { font-size: 28px; margin-bottom: 12px; } .call-intro p, .call-intro .privacy-note { max-width: none; } .call-intro p { font-size: 14px; } .form-actions { flex-direction: row; align-items: center; } .field-hint { font-size: 10px; } .page-footer { flex-direction: column; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.now-playing { font-size: 11px; margin: 15px 0 0; opacity: .9; overflow-wrap: anywhere; }
.listener-desk, .recordings-section { border-top: 1px solid var(--rule); margin: 0 4px; padding: 30px 0; }
.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.section-heading h2 { margin-bottom: 12px; }
.section-heading .quiet-button { padding-top: 0; }
.desk-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; margin-top: 22px; }
.privacy-note, .desk-status, #recordings-status { color: var(--muted); font-size: 12px; }
.desk-status.error { color: #ffb9a6; }
h3 { font-size: 14px; font-weight: 600; margin: 24px 0 12px; }
.desk-grid h3:first-child { margin-top: 0; }
.desk-grid form > button { margin-top: 16px; }
.desk-list { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; }
.desk-list li { border-bottom: 1px solid var(--rule); padding: 12px 0; overflow-wrap: anywhere; }
.desk-list p { margin: 5px 0; white-space: pre-wrap; }
.desk-list small { color: var(--muted); font-size: 11px; }
.desk-list a, .desk-list button { display: inline-block; margin-left: 14px; }
.desk-list li > button:first-of-type { margin-left: 0; }
#interest-options { border: 1px solid var(--rule); border-radius: 5px; margin: 20px 0 0; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#interest-options legend { color: var(--muted); font-size: 12px; padding: 0 5px; }
#interest-options span { text-transform: capitalize; }
.consent-panel > label:first-child { font-size: 13px; font-weight: 600; }
.operator-login { max-width: 580px; }
input[type="password"] { display: block; width: 100%; border: 1px solid #57636c; border-radius: 5px; background: #192a38; color: var(--ink); padding: 10px 12px; margin: 6px 0 16px; }
.operator-toggles, .operator-actions { display: flex; flex-wrap: wrap; gap: 20px; margin: 22px 0; }
.operator-page { max-width: 900px; }
@media (max-width: 650px) { .desk-grid { grid-template-columns: 1fr; gap: 28px; } .section-heading { flex-wrap: wrap; gap: 4px; } .desk-list a { margin-left: 0; display: block; } }

.operator-monitor { border-block: 1px solid var(--rule); padding: 0 0 18px; margin-bottom: 24px; }
.monitor-transcript { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; max-height: 160px; overflow: auto; }