/* 010 Cosmic Radio */
:root {
  --amber: #e5b66e;
  --ivory: #e9e1d2;
  --muted: #a9a69f;
  --night: #10161b;
  --panel: rgba(13, 17, 20, 0.72);
  --line: rgba(232, 220, 197, 0.2);
  --signal: 0.55;
  --update-progress: 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--night); color: var(--ivory); }
body { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, a { font: inherit; }
button { color: inherit; }
.room { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: #11171d; }
.room-image { position: absolute; inset: 0; z-index: -4; background: url('./assets/images/hero.png') center center / cover no-repeat; transform: scale(1.015); }
.room-vignette { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(5,8,10,.12) 0%, rgba(5,8,10,.16) 48%, rgba(5,8,10,.56) 78%, rgba(5,8,10,.78) 100%), linear-gradient(0deg, rgba(5,8,10,.65) 0%, transparent 32%, rgba(5,8,10,.12) 70%); }
.signal-glow { position: absolute; left: 25%; top: 42%; width: 26vw; height: 24vw; min-width: 240px; min-height: 220px; z-index: -2; border-radius: 50%; background: radial-gradient(circle, rgba(239,181,96,calc(.08 + var(--signal) * .08)), transparent 68%); filter: blur(20px); animation: breathe 7s ease-in-out infinite; pointer-events: none; }
.masthead { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: max(24px, env(safe-area-inset-top)) 30px 0; z-index: 4; }
.lab-link, .plain-button { color: rgba(242,235,221,.76); letter-spacing: .14em; font-size: 11px; text-decoration: none; text-transform: uppercase; }
.lab-link:hover { color: #fff; }
.masthead-actions { display: flex; gap: 8px; }
.plain-button { border: 1px solid rgba(235,225,208,.22); background: rgba(12,16,19,.34); min-width: 52px; height: 36px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(10px); }
.plain-button:hover, .plain-button:focus-visible { border-color: rgba(229,182,110,.65); outline: none; }
.receiver { position: absolute; right: clamp(28px, 6vw, 96px); top: 50%; width: min(420px, calc(100vw - 56px)); transform: translateY(-46%); padding: 30px 0 20px; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.eyebrow { margin: 0 0 10px; color: var(--amber); font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .19em; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 3.2vw, 44px); font-weight: 400; letter-spacing: .01em; }
.frequency { margin: 24px 0 4px; font: 300 clamp(52px, 7vw, 88px)/.9 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.06em; color: #f2e5cc; }
.frequency small { font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.station-line { display: flex; align-items: center; gap: 9px; min-height: 22px; font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; color: rgba(242,235,221,.78); }
.signal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 calc(5px + var(--signal) * 9px) rgba(229,182,110,.9); opacity: calc(.45 + var(--signal) * .5); }
.transmission { margin: 24px 0; padding: 19px 20px 20px; border-left: 1px solid rgba(229,182,110,.54); background: linear-gradient(90deg, rgba(12,16,19,.57), rgba(12,16,19,.08)); backdrop-filter: blur(4px); }
.transmission-label { margin: 0 0 8px; color: rgba(229,182,110,.72); font: 600 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
#transmission-text { margin: 0; max-width: 33em; font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.75; color: #eee5d7; }
.receiver-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.scan-button, .sound-button { min-height: 42px; border: 1px solid var(--line); background: rgba(13,17,20,.48); color: rgba(242,235,221,.86); cursor: pointer; backdrop-filter: blur(7px); letter-spacing: .07em; font-size: 11px; }
.scan-button { display: inline-flex; gap: 10px; align-items: center; padding: 0 17px; }
.sound-button { padding: 0 14px; }
.scan-button:hover, .scan-button:focus-visible, .sound-button:hover, .sound-button:focus-visible { border-color: rgba(229,182,110,.7); outline: none; background: rgba(31,29,24,.62); }
.scan-mark { display: block; width: 18px; height: 1px; background: var(--amber); position: relative; }
.scan-mark::after { content: ''; position: absolute; width: 4px; height: 4px; right: 2px; top: -2px; border-radius: 50%; background: var(--amber); }
.update-readout { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 14px; margin-top: 18px; color: rgba(220,215,205,.58); font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.update-readout strong { color: #e7d7ba; font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.update-track { grid-column: 1 / -1; display: block; height: 2px; overflow: hidden; background: rgba(235,225,208,.1); }
.update-track span { display: block; width: calc(var(--update-progress) * 100%); height: 100%; background: rgba(229,182,110,.62); transition: width .85s linear; }
.meter { width: 100%; height: 1px; margin-top: 12px; background: rgba(235,225,208,.12); overflow: hidden; }
.meter span { display: block; width: calc(var(--signal) * 100%); height: 100%; background: linear-gradient(90deg, rgba(229,182,110,.35), rgba(229,182,110,.9)); transition: width .9s ease; }
.last-seen { margin: 8px 0 0; color: rgba(220,215,205,.5); font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }
.info-panel { position: fixed; top: 0; right: 0; z-index: 10; width: min(430px, 100%); height: 100svh; padding: 76px 34px 38px; overflow: auto; background: rgba(13,17,20,.94); border-left: 1px solid rgba(235,225,208,.16); backdrop-filter: blur(18px); box-shadow: -24px 0 80px rgba(0,0,0,.25); }
.info-panel[hidden] { display: none; }
.info-panel h2 { margin: 0 0 20px; font-family: Georgia, "Yu Mincho", serif; font-size: 27px; font-weight: 400; line-height: 1.35; }
.info-panel p { color: rgba(235,229,218,.72); font-size: 13px; line-height: 1.9; }
.info-panel a { color: var(--amber); }
.info-close { position: absolute; right: 24px; top: 24px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; font-size: 21px; }
.data-list { margin: 24px 0; border-top: 1px solid var(--line); }
.data-list div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.data-list dt, .data-list dd { margin: 0; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(235,229,218,.68); }
.data-list dd { color: #e7d7ba; }
.source-note { font-size: 11px !important; color: rgba(235,229,218,.52) !important; }
.site-legal--010 { position: absolute; left: 30px; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 3; }
.site-legal--010 a, .site-legal--010 span { color: rgba(235,229,218,.48); }
.is-scanning .frequency, .is-scanning .station-line, .is-scanning .transmission { opacity: .42; filter: blur(.6px); }
.frequency, .station-line, .transmission { transition: opacity .22s ease, filter .22s ease; }
@keyframes breathe { 0%,100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@media (max-width: 760px) {
  .room { min-height: 100svh; }
  .room-image { background-position: 38% center; }
  .room-vignette { background: linear-gradient(0deg, rgba(6,9,11,.92) 0%, rgba(6,9,11,.6) 45%, rgba(6,9,11,.1) 76%); }
  .masthead { padding-left: 18px; padding-right: 18px; }
  .receiver { left: 18px; right: 18px; top: auto; bottom: max(72px, calc(env(safe-area-inset-bottom) + 62px)); width: auto; transform: none; padding: 0; }
  .frequency { font-size: clamp(46px, 15vw, 68px); margin-top: 16px; }
  .transmission { margin: 15px 0; padding: 13px 15px; }
  #transmission-text { font-size: 16px; line-height: 1.65; }
  .update-readout { margin-top: 13px; }
  .site-legal--010 { left: 18px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .signal-glow { left: 9%; top: 35%; }
}
@media (max-height: 690px) and (max-width: 760px) {
  h1 { display: none; }
  .receiver { bottom: max(58px, calc(env(safe-area-inset-bottom) + 52px)); }
  .frequency { margin-top: 8px; }
  .transmission { margin: 10px 0; }
  .last-seen { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .signal-glow { animation: none; }
  .update-track span { transition: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}