:root { --deep: #19152a; --panel: #211d36; --ink: #f3e9de; --muted: #918397; --line: rgba(243,233,222,.16); --accent: #ffad79; --signal: #c2e86e; --sky: #33295d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--deep); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }.radio-shell { max-width: 1480px; min-height: 100vh; margin: auto; padding: 0 5vw; overflow: hidden; }.project-nav { height: 84px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.back-link { color: var(--muted); }.back-link:hover { color: var(--ink); }.project-id { display: flex; gap: 15px; }.project-id span { color: var(--muted); }.project-id strong { color: var(--accent); font-weight: 400; }.nav-stamp { color: var(--muted); }.nav-stamp i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 11px var(--signal); }
.radio-layout { display: grid; grid-template-columns: minmax(295px, .72fr) minmax(540px, 1.28fr); gap: 8vw; align-items: center; min-height: calc(100vh - 84px); padding: 68px 0 82px; }.eyebrow, .station-copy > span, .tuner-label, .tuner-ticks, .audio-note, .broadcast-head, .broadcast-caption, .desk-count, .message-form button, .project-footer { font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.eyebrow { color: var(--accent); margin: 0 0 26px; }.signal-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border: 1px solid var(--signal); border-radius: 50%; box-shadow: 0 0 0 4px rgba(194,232,110,.11); }.radio-copy h1 { margin: 0 0 28px; font-size: clamp(64px, 8.7vw, 120px); line-height: .77; letter-spacing: -.1em; font-weight: 600; }.radio-copy h1 em, .desk-heading h2 em { color: var(--accent); font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -.1em; }.intro { max-width: 350px; color: var(--muted); font-size: 16px; line-height: 1.55; }.station-copy { margin-top: 45px; }.station-copy > span { color: var(--signal); font-size: 9px; }.station-copy h2 { margin: 13px 0 10px; font: 33px/.9 'Fraunces', Georgia, serif; letter-spacing: -.06em; }.station-copy p { max-width: 260px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }.tuner-wrap { max-width: 360px; margin-top: 35px; }.tuner-label { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; color: var(--muted); }.tuner-label strong { color: var(--accent); font: 31px/.8 'DM Mono', monospace; letter-spacing: -.09em; }.tuner-wrap input { width: 100%; accent-color: var(--accent); }.tuner-ticks { display: flex; justify-content: space-between; margin-top: 2px; color: #62566c; font-size: 9px; }.power-button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; width: min(100%, 360px); margin-top: 28px; padding: 15px 16px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: 10px 'DM Mono', monospace; text-align: left; text-transform: uppercase; letter-spacing: .08em; transition: background .2s, color .2s, transform .2s; }.power-button:hover, .power-button.is-on { background: var(--accent); color: var(--deep); transform: translateY(-2px); }.power-light { width: 7px; height: 7px; border-radius: 50%; background: #62566c; }.power-button.is-on .power-light { background: var(--signal); box-shadow: 0 0 12px var(--signal); }.audio-note { margin: 14px 0 0; color: #63576e; font-size: 9px; text-transform: none; letter-spacing: 0; }
.broadcast-column { min-width: 0; }.broadcast-head { display: flex; justify-content: space-between; padding-bottom: 15px; color: var(--muted); border-bottom: 1px solid var(--line); }.broadcast-card { --card-sky: var(--sky); position: relative; height: min(47vw, 535px); min-height: 410px; margin-top: 17px; overflow: hidden; border: 1px solid rgba(243,233,222,.2); background: var(--panel); box-shadow: 16px 18px 0 rgba(0,0,0,.15); transition: background .4s; }.broadcast-card:before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .25; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.13) 4px); mix-blend-mode: screen; }.broadcast-sky { position: absolute; inset: 0; background: radial-gradient(circle at 68% 38%, rgba(255,173,121,.13), transparent 21%), linear-gradient(165deg, var(--card-sky), var(--deep)); transition: background .5s; }.broadcast-moon { position: absolute; width: 190px; height: 190px; top: 14%; left: 18%; border-radius: 50%; background: #f6d5a6; box-shadow: 0 0 70px rgba(255,173,121,.24); }.broadcast-moon:after { content: ''; position: absolute; width: 210px; height: 210px; top: -9px; left: 22px; border-radius: 50%; background: var(--card-sky); transition: background .4s; }.broadcast-horizon { position: absolute; right: -5%; bottom: 23%; width: 75%; height: 27%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(15,13,28,.2), rgba(15,13,28,.9)); transform: rotate(-6deg); }.broadcast-orbit { position: absolute; border: 1px solid rgba(243,233,222,.18); border-radius: 50%; transform: rotate(27deg); }.orbit-a { width: 95%; height: 55%; left: -16%; top: 23%; }.orbit-b { width: 80%; height: 40%; left: 10%; top: 34%; transform: rotate(-32deg); }.spectrum { position: absolute; z-index: 3; display: flex; align-items: end; gap: 5px; left: 7%; right: 7%; bottom: 20%; height: 96px; opacity: .85; }.spectrum i { flex: 1; min-width: 2px; height: 20%; background: var(--signal); box-shadow: 0 0 10px rgba(194,232,110,.25); transition: height .12s; }.spectrum i:nth-child(3n) { background: var(--accent); }.broadcast-caption { position: absolute; z-index: 4; left: 7%; right: 7%; bottom: 7%; display: flex; justify-content: space-between; color: rgba(243,233,222,.68); }.broadcast-caption span:first-child { color: var(--accent); }.transmission-desk { margin-top: 70px; }.desk-heading { display: flex; align-items: end; justify-content: space-between; }.desk-heading .eyebrow { margin-bottom: 15px; }.desk-heading h2 { margin: 0; font-size: clamp(36px, 4.8vw, 63px); line-height: .84; letter-spacing: -.08em; }.desk-count { margin-bottom: 5px; color: var(--muted); }.message-form { display: flex; margin-top: 34px; border-bottom: 1px solid var(--line); }.message-form input { min-width: 0; flex: 1; padding: 14px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; }.message-form input::placeholder { color: #645a6e; }.message-form button { padding: 0 0 0 15px; border: 0; background: transparent; color: var(--accent); }.message-form button:hover { color: var(--signal); }.transmissions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 18px; }.transmission-empty { grid-column: 1 / -1; padding: 19px 0; color: var(--muted); font-size: 12px; }.transmission { min-height: 105px; padding: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }.transmission-top { display: flex; justify-content: space-between; color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }.transmission p { margin: 16px 0 0; font-family: 'Fraunces', Georgia, serif; font-size: 19px; line-height: 1; letter-spacing: -.04em; }.project-footer { display: flex; justify-content: space-between; padding: 25px 0; border-top: 1px solid var(--line); color: var(--muted); }.project-footer a { color: var(--ink); }.project-footer a:hover { color: var(--accent); }
@media (max-width: 920px) { .radio-layout { grid-template-columns: 1fr; gap: 65px; }.radio-copy { max-width: 560px; }.broadcast-card { height: min(70vw, 560px); }.transmission-desk { margin-top: 62px; } }
@media (max-width: 570px) { .radio-shell { padding: 0 19px; }.project-nav { height: 69px; }.project-id span, .nav-stamp { display: none; }.radio-layout { padding-top: 55px; }.radio-copy h1 { font-size: 80px; }.station-copy { margin-top: 37px; }.broadcast-card { height: 108vw; min-height: 390px; }.broadcast-moon { width: 125px; height: 125px; left: 12%; }.broadcast-moon:after { width: 145px; height: 145px; }.spectrum { gap: 3px; height: 76px; }.broadcast-caption { font-size: 8px; }.transmissions { grid-template-columns: 1fr; }.project-footer { flex-wrap: wrap; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { transition-duration: .01ms !important; } }
.desk-actions { display: flex; align-items: end; gap: 18px; }
.clear-notes { padding: 0 0 4px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.clear-notes:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 570px) { .desk-actions { align-items: center; justify-content: space-between; } }