@font-face{font-family:Station Mono;src:url("./media/station-mono.woff2") format("woff2");font-display:swap}
:root{color-scheme:dark;--bg:#09282b;--panel:#123a3b;--ink:#eee9d4;--muted:#b2c0b0;--line:#446365;--yellow:#e6c56c;--mono:"Station Mono",Consolas,monospace;--sans:system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 68% 12%,#17474a 0%,transparent 50%),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 4px),var(--bg);color:var(--ink);font-family:var(--sans)}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
a,button,input,textarea,select{-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.shell{width:min(1320px,calc(100% - 96px));margin-inline:auto}
.skip{position:absolute;left:1rem;top:-6rem;background:var(--yellow);color:var(--bg);padding:1rem;z-index:5}
.skip:focus{top:1rem}
.mast{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}
.mark{display:flex;gap:.35rem;align-items:center;font:900 21px/1 var(--sans);letter-spacing:-.07em;white-space:nowrap}
.mark>span{color:var(--yellow)}
.mark .mark-icon{display:grid;place-items:center;width:26px;height:22px;border:1px solid;border-radius:3px;margin-right:5px;font:11px var(--mono)}
nav{display:flex;align-items:center;gap:clamp(12px,2.5vw,40px);font:12px var(--mono);color:var(--muted)}
nav a{padding:10px 0}
nav a:hover,footer a:hover{color:var(--yellow)}
.station-id,.eyebrow,.station-mark,.tag,footer{font:11px var(--mono);letter-spacing:.09em}
.station-id{white-space:nowrap;color:var(--yellow)}
.station-id i,.receiver-foot i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);margin-right:7px;box-shadow:0 0 9px #e6c56899}
.hero{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(50px,7vw,105px) 0 62px;scroll-margin-top:12px}
.eyebrow{display:flex;align-items:center;gap:11px;color:var(--yellow);font-weight:700}
.eyebrow span{border:1px solid #e6c56872;padding:4px 6px}
h1{font-size:clamp(54px,7.6vw,121px);line-height:.96;letter-spacing:-.082em;margin:17px 0 18px;font-weight:950;white-space:nowrap}
h1 span{color:var(--yellow)}
.series{font-size:clamp(25px,3vw,44px);font-weight:760;letter-spacing:-.055em;line-height:1.04;margin:0}
.tagline{color:var(--muted);max-width:32ch;margin:19px 0 25px;line-height:1.55}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap}
.button{display:inline-flex;gap:10px;align-items:center;justify-content:center;min-height:44px;padding:9px 13px;font:700 12px/1.35 var(--mono);border:1px solid var(--yellow);border-radius:3px}
.solid{background:var(--yellow);color:#12292a}
.solid:hover{background:#f3d78c}
.outline{color:var(--yellow);background:transparent}
.outline:hover{background:#e6c5681a}
.station-mark{display:block;margin-top:30px;color:var(--yellow)}
.station-mark span{color:var(--muted)}
.receiver{min-width:0;scroll-margin-top:16px;position:relative;border:1px solid #69807a;border-radius:23px 23px 18px 18px;padding:clamp(10px,1.8vw,23px) clamp(10px,1.8vw,23px) 0;background:linear-gradient(155deg,#526662 0%,#303f3e 17%,#2b3a3a 77%,#1b292a 100%);box-shadow:inset 0 2px 3px #bec8b559,0 17px 34px #0006;margin-bottom:29px}
.receiver-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(49px,6vw,76px);gap:clamp(7px,1.5vw,19px);align-items:stretch}
.screen{position:relative;width:100%;min-width:0;isolation:isolate;aspect-ratio:4/3;overflow:hidden;border:clamp(5px,1vw,12px) solid #142120;border-radius:7% / 10%;background:#061c20;box-shadow:0 0 0 1px #849284,0 0 0 3px #283937}
.screen>div,.screen video{width:100%;height:100%;position:absolute;inset:0}
.screen video{background:#061619;object-fit:contain}
.station-screen{background:linear-gradient(0deg,#061f23 0%,#061f2380 24%,transparent 55%),url("./media/tanaka.png") center 48%/cover,#0d2d32}
.station-screen::before,.signal-screen::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#0004 3px 5px);box-shadow:inset 0 0 45px 8px #0009}
.osd,.screen-time,.station-caption,.signal-caption{position:absolute;color:#f0d786;font-family:var(--mono);text-shadow:0 2px 3px #001717}
.osd{top:6%;left:6%;right:6%;display:flex;justify-content:space-between;font-size:clamp(10px,1.2vw,16px)}
.station-caption{bottom:10%;left:6%;display:grid;gap:5px}
.station-caption span{font-size:clamp(8px,.85vw,12px)}
.station-caption b{font-size:clamp(19px,2.6vw,38px);letter-spacing:-.05em}
.screen-time{right:6%;bottom:5%;font-size:clamp(8px,.85vw,12px)}
.signal-screen{background:#142d35 url("./media/noise.svg") center/220px;box-shadow:inset 0 0 95px #021717}
.signal-caption{inset:14% 4%;display:grid;align-content:center;text-align:center;background:#061f26dd}
.signal-caption span{font-size:clamp(10px,1.25vw,17px)}
.signal-caption h2{font-size:clamp(15px,2.35vw,35px);margin:8px 0;letter-spacing:-.06em}
.signal-caption p{font-size:clamp(9px,1.05vw,15px);margin:0;line-height:1.5;color:var(--ink)}
.receiver-controls{display:flex;flex-direction:column;align-items:center;gap:7px}
.grille{width:90%;flex:1;min-height:10px;margin:3px 0 6px;background:repeating-linear-gradient(0deg,#4b5b57 0 1px,#1a2929 2px 5px,transparent 6px 8px);border-radius:2px}
.channel-label,.receiver-foot{color:#c1c6b5;font:9px var(--mono);letter-spacing:.06em}
.receiver-controls output{display:block;padding:5px 6px;border:1px inset #536462;border-radius:3px;background:#101f20;color:var(--yellow);font:700 clamp(13px,1.7vw,24px) var(--mono)}
.tuner{display:flex;gap:3px}
.tuner button,.power{min-width:29px;min-height:32px;border:1px solid #697d79;border-radius:4px;background:linear-gradient(#405857,#2b3d3e);color:var(--ink)}
.tuner button:hover,.power:hover{color:var(--yellow);border-color:var(--yellow)}
.power{display:grid;place-items:center;margin-top:4px;min-width:39px;font-size:18px}
.receiver-foot{height:clamp(24px,3.4vw,44px);display:flex;align-items:center;justify-content:space-between;gap:4px}
.receiver-foot b{color:#ece3c3}.receiver-foot i{width:5px;height:5px;margin:0}
.tune-status{position:absolute;top:100%;left:0;font:11px/1.4 var(--mono);color:var(--muted);margin:10px 0 0}
.archive{border-top:1px solid var(--line);padding:31px 0 52px;scroll-margin-top:16px}
.archive-head{display:flex;justify-content:space-between;align-items:end;gap:13px;margin-bottom:22px}
.archive h2{font-size:clamp(27px,4vw,52px);letter-spacing:-.065em;line-height:1.03;margin:10px 0 0}
.tag{color:var(--yellow);white-space:nowrap}
.episodes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tape{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);background:#102f31;border-radius:5px;overflow:hidden}
.tape:hover,.tape[aria-current]{border-color:var(--yellow)}
.tape-cover{aspect-ratio:1.65;display:grid;place-items:center;position:relative;background:#192829;overflow:hidden}
.tape-cover img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 42%;opacity:.82}
.tape-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#021a22b9,transparent 65%)}
.tape-cover span{position:absolute;z-index:1;bottom:8px;left:10px;color:var(--yellow);font:700 13px var(--mono);text-shadow:0 1px 4px #000}
.tape-text{padding:11px;display:flex;flex-direction:column;flex:1;gap:8px}
.tape strong{font-size:15px;line-height:1.23}
.tape small{font:10px/1.4 var(--mono);color:var(--muted);margin-top:auto}
footer{display:flex;justify-content:space-between;gap:15px;padding:20px 0 28px;border-top:1px solid var(--line);color:var(--muted)}
@media(max-width:1000px){.shell{width:calc(100% - 48px)}.episodes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:740px){.shell{width:calc(100% - 32px)}.mast{min-height:60px;padding:10px 0;gap:6px 12px;flex-wrap:wrap}.station-id{display:none}.hero{grid-template-columns:1fr;padding-top:40px;gap:28px}.series br{display:none}.station-mark{margin-top:22px}.episodes{grid-template-columns:repeat(2,minmax(0,1fr))}.receiver-controls{gap:4px}.tuner button{min-width:22px}.receiver-body{grid-template-columns:minmax(0,1fr) 49px}}
@media(max-width:380px){.mast nav{gap:9px;font-size:10px}.tag{font-size:9px}.eyebrow{font-size:10px}.receiver-foot{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.standby-screen .signal-caption{padding:8px;gap:3px}
.standby-screen .signal-caption p{max-width:32ch;margin-inline:auto}
.receiver-menu,.media-controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:8px 0 10px;border-top:1px solid #687b73;font:11px/1.25 var(--mono);color:var(--ink)}
.receiver-menu label,.media-controls label,.media-controls span{color:#d4dbc9}
.receiver-menu select{min-width:0;max-width:100%;flex:1 1 175px;min-height:39px;padding:6px;background:#11282a;color:var(--ink);border:1px solid #829086;border-radius:4px;font:inherit}
.receiver-menu .button{font-size:11px;min-height:39px}
.media-controls button{min-height:40px;padding:6px 8px;border:1px solid #829086;border-radius:4px;background:#11282a;color:var(--ink);font:inherit}
.media-controls button:hover,.media-controls button[aria-pressed="true"]{color:var(--yellow);border-color:var(--yellow)}
.media-controls label{display:flex;align-items:center;gap:6px}
.media-controls input{width:clamp(61px,7vw,100px);accent-color:var(--yellow);margin:0}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 24px}
.footer-links button{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;padding:0}
.footer-links button:hover{color:var(--yellow)}
#welcome{width:min(630px,calc(100% - 32px));max-height:calc(100% - 32px);padding:clamp(8px,1.6vw,20px);border:1px solid #72847b;border-radius:19px;background:#304344;color:var(--ink);box-shadow:0 20px 80px #000a}
#welcome::backdrop{background:#06171be8}
.welcome-screen{position:relative;isolation:isolate;overflow:hidden;padding:clamp(18px,5vw,44px);border:5px solid #172725;border-radius:6% / 8%;background:#0c3034;box-shadow:inset 0 0 45px #00171a}
.welcome-screen::before,.welcome-screen::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.welcome-screen::before{background:repeating-linear-gradient(0deg,transparent 0 3px,#0003 3px 5px),linear-gradient(145deg,#31575875,transparent 60%)}
.welcome-screen::after{background:url("./media/noise.svg") center/220px;opacity:0}
.welcome-jp,.welcome-line{font:12px var(--mono);letter-spacing:.1em;color:var(--yellow)}
.welcome-jp{margin:clamp(14px,4vw,30px) 0 7px}
.welcome-screen h2{font-size:clamp(24px,5vw,49px);letter-spacing:-.06em;line-height:1.04;margin:0}
.welcome-line{margin:14px 0 23px;color:var(--muted)}
.welcome-line span{color:var(--yellow)}
.welcome-actions{display:flex;gap:8px;flex-wrap:wrap}
#welcome[open] .welcome-screen{animation:crt-on 340ms ease-out both}
#welcome[open] .welcome-screen::after{animation:vhf-lock 650ms ease-out both}
@keyframes crt-on{from{transform:scaleY(.08);opacity:.35}to{transform:scaleY(1);opacity:1}}
@keyframes vhf-lock{0%{opacity:.25;transform:translateY(-6%)}100%{opacity:0;transform:translateY(0)}}
@media(max-width:740px){.receiver-menu .button,.receiver-menu select,.media-controls button{min-height:44px}.receiver-menu{display:grid;grid-template-columns:minmax(0,1fr)}.receiver-menu select{width:100%;font:16px var(--sans);appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--yellow) 50%),linear-gradient(135deg,var(--yellow) 50%,transparent 50%);background-position:right 14px center,right 9px center;background-size:5px 5px;background-repeat:no-repeat}.receiver-menu .button{justify-self:start}}
@media(prefers-reduced-motion:reduce){#welcome[open] .welcome-screen,#welcome[open] .welcome-screen::after{animation:none}}
#static-id{z-index:2;pointer-events:none}
.live-summary{display:grid;gap:5px;padding:8px 0 11px;border-top:1px solid #687b73;color:var(--ink);font:11px/1.4 var(--mono)}
.live-summary b,.on-air{color:var(--yellow);letter-spacing:.08em}
.live-summary b{display:inline-block;min-width:5ch}
.subtitle-control{flex-wrap:wrap}
.subtitle-control select{min-width:0;max-width:100%;min-height:38px;padding:5px 8px;border:1px solid #829086;border-radius:4px;background:#11282a;color:var(--ink);font:inherit}
.subtitle-note{font:11px/1.45 var(--mono);color:#d4dbc9;margin:0 0 9px}
.subtitle-note:empty{display:none}
video::cue{color:#fff;background-color:transparent;font-family:system-ui,sans-serif;font-size:clamp(14px,1.5vw,20px);font-weight:700;text-shadow:1px 2px 2px #000,-1px -1px 1px #000,1px -1px 1px #000,-1px 1px 1px #000}
video::cue(.palabra:past){color:#ffdb62}
.guide-hint{display:none;color:var(--muted);font:11px/1.4 var(--mono)}
@media(max-width:740px){.guide-hint{display:block}}
.guide .archive-head{flex-wrap:wrap}
.guide .tag{white-space:normal}
.guide-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:#102f31}
.guide table{width:100%;border-collapse:collapse;font:12px/1.45 var(--mono);min-width:640px}
.guide th,.guide td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.guide thead th,.guide tbody th{color:var(--yellow)}
.guide td:nth-last-child(-n+3){white-space:nowrap}
.guide tr:last-child td,.guide tbody tr:last-child th{border-bottom:0}
.guide-details{margin-top:12px;font:12px var(--mono)}
.guide-details summary{color:var(--yellow);padding:10px 0;cursor:pointer}
.guide-details table{min-width:390px}
@media(max-width:740px){.subtitle-control select{font:16px var(--sans);min-height:44px}.guide table{font-size:11px}}
.screen>.subtitle-overlay{inset:auto 6% max(18%,37px);width:auto;height:auto;z-index:3;pointer-events:none;text-align:center;color:#fff;font:700 clamp(14px,2.1vw,20px)/1.24 var(--sans);text-wrap:balance;overflow-wrap:anywhere;line-break:strict;text-shadow:1px 2px 2px #000,-1px -1px 1px #000,1px -1px 1px #000,-1px 1px 1px #000,0 0 3px #000}
.subtitle-overlay .palabra-activa{color:#ffdb62}
.subtitle-overlay:lang(ja){white-space:pre-line}
.channel-station{background:#09282b}.channel-station img{display:block;width:100%;height:100%;object-fit:contain}

#inaugural{width:min(980px,96vw);max-height:96dvh;padding:clamp(.75rem,2vw,1.5rem);overflow:auto;color:var(--ink);background:var(--bg);border:1px solid var(--yellow);border-radius:4px}
#inaugural::backdrop{background:#031416ee}
.inaugural-head{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
.inaugural-head h2{font-size:clamp(1rem,3vw,1.6rem);line-height:1.2;margin:.3rem 0}
.inaugural-head .eyebrow{font-size:.7rem;margin:0}
.inaugural-screen{position:relative;background:#000}
#inaugural-player{display:block;width:100%;max-height:65dvh}
.inaugural-tools{display:flex;gap:.75rem;align-items:end;flex-wrap:wrap;margin-top:1rem}
.inaugural-tools label{display:grid;gap:.3rem;font-size:.85rem}
.inaugural-tools select{max-width:100%;padding:.5rem;background:var(--panel);color:var(--ink);border:1px solid var(--line)}
@media(max-width:600px){.inaugural-head{align-items:flex-start;flex-direction:column}.inaugural-head .button{padding:.55rem .7rem}.inaugural-tools{align-items:stretch;flex-direction:column}.inaugural-tools select{width:100%}}
@media(orientation:landscape) and (max-height:500px){.inaugural-head h2{font-size:1rem}.inaugural-head .eyebrow{display:none}#inaugural-player{max-height:70dvh}.inaugural-head{margin-bottom:.5rem}}
.inaugural-screen>.subtitle-overlay{position:absolute;inset:auto 6% max(18%,37px);width:auto;height:auto;z-index:3;pointer-events:none;text-align:center;color:#fff;font:700 clamp(14px,2.1vw,20px)/1.24 var(--sans);text-wrap:balance;overflow-wrap:anywhere;line-break:strict;text-shadow:1px 2px 2px #000,-1px -1px 1px #000,1px -1px 1px #000,-1px 1px 1px #000,0 0 3px #000}
.power-label{max-width:65px;text-align:center;color:var(--ink);font:10px/1.3 var(--mono)}
.receiver.is-off .screen{background:#000}
.receiver.is-off .screen>:not(#crt-shutdown){visibility:hidden!important}
.receiver.is-off .receiver-foot i{background:#26332e;box-shadow:none}
.screen>#crt-shutdown{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none;background:#000}
#inaugural .inaugural-head{flex-wrap:wrap}
