:root {
  color-scheme: light;
  --paper: #eaeae2;
  --ink: #191a18;
  --muted: #565850;
  --rule: #94968b;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .56; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
::selection { color: var(--paper); background: var(--ink); }
.sheet { width: min(100%, 1500px); margin: 0 auto; padding: 17px clamp(18px, 4.5vw, 78px) 0; }
.utility, .section-rule, footer, figcaption, .plate-top, .eyebrow, label, dt, .level output, .monitor-list {
  font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .065em;
}
.utility, .utility-right, .identity, .section-rule, .section-rule > span, footer, footer > div, figcaption, .plate-top, .eyebrow { display: flex; align-items: center; }
.utility, .section-rule, footer, figcaption, .plate-top { justify-content: space-between; }
.utility { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 9px 0; }
.identity { gap: 11px; font-weight: 700; }
.utility-right { gap: clamp(12px, 4vw, 65px); }
.clock { font-variant-numeric: tabular-nums; }
.masthead { margin: 0; padding: 0 0 1.1%; line-height: 0; }
.masthead svg { width: 100%; display: block; overflow: visible; fill: var(--ink); }
.masthead text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 750; font-size: 185px; letter-spacing: -.059em; }
.section-rule { border-block: 1px solid var(--ink); padding: 8px 0; font-size: 10px; }
.section-rule > span { gap: 8px; }
.section-rule b { font: inherit; }
.section-rule a { text-underline-offset: 3px; }
.dot, .square { background: var(--ink); width: 8px; height: 8px; display: inline-block; flex: none; }
.dot { border-radius: 50%; }
.dot.hollow { border: 1.5px solid var(--ink); background: transparent; }
#live-dot:not(.hollow) { background: #ca332c; }
.eyebrow { gap: 9px; margin: 0; font-weight: 600; }
.square { width: 7px; height: 7px; }
.gate-layout, .receiver-layout, .desk-layout { display: grid; align-items: center; padding: clamp(23px, 2.7vw, 46px) 0; }
.gate-layout { grid-template-columns: minmax(0, 1.19fr) minmax(0, .81fr); gap: clamp(32px, 7vw, 110px); }
figure { margin: 0; }
.signal-plate { background: var(--ink); color: var(--paper); isolation: isolate; position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1.52; }
.signal-print { width: 100%; height: 100%; object-fit: contain; }
.plate-top, .signal-plate figcaption { position: absolute; z-index: 1; left: 16px; right: 16px; font-size: 9px; letter-spacing: .1em; }
.plate-top { top: 14px; }.signal-plate figcaption { bottom: 14px; }
.plate-top span:first-child { font-size: 13px; font-weight: 800; letter-spacing: -.04em; }
.gate-copy { max-width: 450px; width: 100%; }
h2, h3, p { overflow-wrap: anywhere; }
h2 { font-size: clamp(54px, 6.5vw, 110px); line-height: .94; letter-spacing: -.076em; margin: 18px 0 16px; }
.period { letter-spacing: -.04em; }
.intro { font-size: clamp(16px, 1.36vw, 21px); line-height: 1.38; letter-spacing: -.019em; max-width: 36ch; margin: 0 0 23px; }
form > label { display: block; margin-bottom: 7px; }
input[type=password], select { width: 100%; background: transparent; border: 1px solid var(--ink); border-radius: 0; padding: 12px 14px; min-height: 45px; color: var(--ink); font-size: 16px; }
input::placeholder { color: var(--muted); }
.solid, .outline { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; border: 1px solid var(--ink); border-radius: 0; padding: 11px 15px; font-weight: 650; font-size: 16px; text-align: left; letter-spacing: -.025em; }
.solid { background: var(--ink); color: var(--paper); }
.outline { color: var(--ink); background: transparent; }
.solid:hover:not(:disabled) { background: #353630; }.outline:hover:not(:disabled) { background: #d8d8ce; }
form .solid, form .outline { margin-top: 8px; }
.solid > span:last-child:not(:first-child), .outline > span { font-size: 1.1em; }
.feedback { margin: 9px 0 0; font-size: 14px; font-weight: 550; }
.feedback:empty, .help:empty { display: none; }
footer { gap: 12px; border-top: 1px solid var(--ink); padding: 12px 0 17px; font-size: 9px; }
footer > div { gap: 8px; }.tiny-mark { font: 18px/.8 Helvetica, sans-serif; }.bars { display: inline-block; width: 28px; height: 11px; background: repeating-linear-gradient(to right,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 7px); }
.receiver-layout { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: clamp(34px, 6.5vw, 105px); }
.sleeve-frame { width: 100%; max-width: 500px; }
.sleeve { aspect-ratio: 1; background: var(--ink); border: 1px solid var(--ink); }
.sleeve img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sleeve-frame figcaption { margin-top: 7px; font-size: 9px; }
.record h2 { margin: 18px 0 7px; font-size: clamp(48px, 5.25vw, 84px); line-height: .98; }
#artist { font-size: clamp(22px, 2.35vw, 37px); letter-spacing: -.05em; margin: 0; }
.credits { margin: clamp(22px, 3vw, 48px) 0 23px; border-block: 1px solid var(--rule); }
.credits > div { display: grid; grid-template-columns: minmax(max-content, 20%) 1fr; align-items: baseline; gap: 12px; padding: 9px 0; }
.credits > div + div { border-top: 1px solid var(--rule); }
dt { color: var(--muted); }dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.receiver-controls { display: flex; align-items: center; gap: clamp(18px, 3vw, 54px); }
.tune { width: auto; justify-content: flex-start; min-width: 156px; gap: 12px; }
.play-symbol { width: 0; height: 0; border-block: 6px solid transparent; border-left: 10px solid var(--paper); }
.tune.active .play-symbol { background: var(--paper); width: 10px; height: 10px; border: 0; }
.level { flex: 1; max-width: 230px; min-width: 60px; }.level > div { display:flex; justify-content:space-between; }
input[type=range] { appearance: none; width: 100%; margin: 0; background: transparent; height: 24px; cursor: pointer; accent-color: var(--ink); }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 8px; height: 17px; margin-top: -7px; background: var(--ink); border: 0; border-radius: 0; }
input[type=range]::-moz-range-track { height: 2px; background: var(--ink); }input[type=range]::-moz-range-thumb { width: 8px; height: 17px; border: 0; border-radius: 0; background: var(--ink); }
.desk-layout { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 8vw, 140px); }
.desk-info h2 { font-size: clamp(45px, 5.8vw, 80px); }.monitor { border-top: 1px solid var(--ink); padding-top: 14px; }
.monitor strong { display: block; font-size: 24px; letter-spacing: -.04em; margin-top: 10px; }.monitor p:not(.eyebrow) { margin: 4px 0; }
h3 { font-size: 27px; letter-spacing: -.05em; margin: 0 0 5px; }.help { font-size: 14px; line-height: 1.4; color: var(--muted); margin: 5px 0 12px; }
fieldset { padding: 0; margin: 0; border: 0; }.choice { display: flex; gap: 9px; align-items: center; border-top: 1px solid var(--rule); padding: 11px 0; font: inherit; letter-spacing: -.01em; text-transform: none; cursor: pointer; }
.choice input { accent-color: var(--ink); margin: 0; width: 17px; height: 17px; }.choice small { margin-left: auto; font: 10px var(--mono); white-space: nowrap; }.choice span { overflow-wrap: anywhere; }
#switch-form { border-top: 1px solid var(--ink); margin-top: 28px; padding-top: 17px; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 1480px) { .signal-plate { max-height: 490px; } }
@media (max-width: 720px) {
  .sheet { padding-top: 12px; }.utility, .section-rule, .eyebrow { font-size: 9px; }.channel { display: none; }
  .masthead { padding: 1% 0 2%; }.gate-layout, .receiver-layout, .desk-layout { grid-template-columns: 1fr; gap: 24px; }
  .gate-layout { padding: 18px 0 25px; }.gate-copy { max-width: none; }.signal-plate { aspect-ratio: 2.65; }
  .signal-print { width: 80%; min-height: 0; max-height: 100%; }.plate-top, .signal-plate figcaption { font-size: 8px; left: 10px; right: 10px; }.plate-top { top: 8px; }.signal-plate figcaption { bottom: 8px; }
  h2 { margin: 12px 0; }.intro { margin-bottom: 18px; max-width: 46ch; }
  .receiver-layout { padding: 18px 0 23px; gap: 22px; }.sleeve-frame { max-width: min(390px, 82vw, 42svh); margin: 0 auto; }
  .record h2 { margin-top: 11px; }.credits { margin: 16px 0; }
  .receiver-controls { justify-content: space-between; }.level { max-width: 190px; }.footer-end .bars { display: none; }
}
@media (max-width: 370px) { footer { font-size: 8px; }.identity { gap: 5px; }.level label, .level output { font-size: 9px; } }