:root{--navy:#07192b;--blue:#0b2e4b;--cream:#f2eadb;--orange:#ff6a2b;--yellow:#ffc64b;--sky:#8cb9d2;--line:#2b4b63}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--cream);font-family:Arial,"Microsoft YaHei",sans-serif}
.skip{position:fixed;left:-999px}
.skip:focus{left:1rem;top:1rem;background:white;color:#000;padding:.6rem;z-index:99}
body>header{height:76px;padding:0 3vw 0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(7,25,43,.95);backdrop-filter:blur(12px);z-index:30}
.station{display:flex;align-items:center;gap:.7rem;color:inherit;text-decoration:none}
.station>i{width:12px;height:12px;border-radius:50%;background:var(--orange);box-shadow:0 0 15px var(--orange)}
.station span{display:flex;flex-direction:column}
.station b{font-size:1.1rem}
.station small{font:9px monospace;color:var(--sky)}
.topnav{display:flex;align-items:center;gap:clamp(.75rem,1.5vw,1.7rem)}
.topnav a{color:var(--sky);text-decoration:none;font-size:.76rem;transition:color .2s}
.topnav a:hover,.topnav a:focus{color:var(--yellow)}
.clock{font:10px monospace}
.rail{position:fixed;left:0;top:76px;bottom:0;width:48px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;background:var(--navy);z-index:15}
.rail a{color:var(--sky);text-decoration:none;font:10px monospace;writing-mode:vertical-rl}
.hero{margin-left:48px;min-height:760px;padding:4vw;display:grid;grid-template-columns:1fr .75fr;grid-template-rows:1fr auto;gap:3vw;position:relative;overflow:hidden}
.signal-stage{position:relative;display:grid;place-items:center;min-height:620px}
.ring{position:absolute;border:1px solid var(--line);border-radius:50%}
.ring-a{width:580px;height:580px}
.ring-b{width:420px;height:420px;border-color:var(--orange)}
.ring-c{width:260px;height:260px;border-style:dashed}
.dial{width:190px;height:190px;border-radius:50%;background:var(--cream);color:var(--navy);display:grid;place-content:center;text-align:center;z-index:2}
.dial span{font:5rem/1 Georgia}
.dial b{font:1.5rem Georgia;color:var(--orange)}
.dial small{font:9px monospace}
.ticks{position:absolute;inset:8%;border-radius:50%;animation:spin 45s linear infinite}
.ticks i{position:absolute;width:8px;height:8px;background:var(--yellow);border-radius:50%;left:50%;top:0;transform-origin:0 250px}
.ticks i:nth-child(2){transform:rotate(45deg)}
.ticks i:nth-child(3){transform:rotate(90deg)}
.ticks i:nth-child(4){transform:rotate(135deg)}
.ticks i:nth-child(5){transform:rotate(180deg)}
.ticks i:nth-child(6){transform:rotate(225deg)}
.ticks i:nth-child(7){transform:rotate(270deg)}
.ticks i:nth-child(8){transform:rotate(315deg)}
@keyframes spin{to{transform:rotate(360deg)}
}
.hero-copy{display:flex;flex-direction:column;justify-content:center}
.hero-copy>p,.program-head>span{font:10px monospace;color:var(--orange);letter-spacing:.12em}
.hero h1{font-size:clamp(3.3rem,5.6vw,6rem);line-height:.94;margin:1.4rem 0}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-copy>span{line-height:1.7;color:#adc4d2}
.hero-copy>a{margin-top:2rem;color:var(--cream);font-weight:bold}
.hero-status{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.hero-status div{padding:1rem;border-right:1px solid var(--line);font:10px monospace}
.hero-status b{color:var(--orange);margin-right:1rem}
.broadcast-strip{margin-left:48px;background:var(--orange);color:var(--navy);padding:1rem 3vw;display:flex;gap:2.5rem;white-space:nowrap;overflow:hidden;font:10px monospace}
.program{margin-left:48px;padding:7vw 4vw;border-bottom:1px solid var(--line)}
.program-head{display:grid;grid-template-columns:.25fr 1fr .5fr;gap:2vw;margin-bottom:3rem}
.program-head h2{font-size:clamp(2.7rem,5vw,5.2rem);line-height:.95;margin:0}
.program-head p{line-height:1.7;margin:0;color:#a9bfcc}
.signal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.signal-grid article{border:1px solid var(--line);padding:1.4rem;min-height:250px}
.signal-grid b{font:2rem monospace;color:var(--orange)}
.signal-grid p{line-height:1.75;color:#b4c7d2}
.transmission-image{margin-left:48px;padding:3vw;background:var(--cream);color:var(--navy)}
.transmission-image>div{height:650px;background-image:linear-gradient(180deg,rgba(7,25,43,.08),rgba(7,25,43,.7)),url("images/signal-room.webp");background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;flex-direction:column;color:white}
.transmission-image>p{font:10px monospace}
.transmission-image>p b{color:var(--orange)}
.shift{background:var(--cream);color:var(--navy)}
.shift .program-head p{color:#536a78}
.shift-list article{display:grid;grid-template-columns:1fr .2fr 1fr 1.1fr;gap:1rem;align-items:center;border-top:1px solid #9ba8af;padding:1.4rem}
.shift-list header{display:flex;flex-direction:column}
.shift-list header b{font:9px monospace;color:var(--orange)}
.shift-list header span{font-size:1.1rem;font-weight:bold}
.shift-list i{height:2px;background:var(--orange);position:relative}
.shift-list i:after{content:"";position:absolute;right:0;top:-4px;border-left:8px solid var(--orange);border-top:5px solid transparent;border-bottom:5px solid transparent}
.shift-list p{line-height:1.65}
.roles{background:var(--orange);color:var(--navy)}
.program-head.inverse>span{color:var(--navy)}
.program-head.inverse>p{color:#3b3d3a}
.role-console{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.role-console article{background:var(--navy);color:var(--cream);padding:1.5rem;min-height:270px;position:relative}
.lamp{width:10px;height:10px;background:var(--yellow);border-radius:50%;box-shadow:0 0 12px var(--yellow);position:absolute;right:1.2rem;top:1.2rem}
.role-console article>b{font:10px monospace;color:var(--orange)}
.role-console p{line-height:1.75;color:#aec3ce}
.role-console small{color:var(--yellow)}
.topic-wave{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.topic-wave article{padding:1.3rem;border-top:4px solid var(--orange);background:var(--blue)}
.topic-wave span{font:9px monospace;color:var(--sky)}
.topic-wave p{line-height:1.7}
.topic-wave b{display:block;font-size:.75rem;color:var(--yellow);margin:.5rem 0}
.myths{background:var(--cream);color:var(--navy)}
.myths .program-head p{color:#536a78}
.myth-board{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.myth-board article{border:1px solid #9ca7ad;padding:1.3rem}
.myth-board header{display:flex;justify-content:space-between;gap:1rem}
.myth-board header b{font:9px monospace;color:var(--orange)}
.myth-board header span{font-weight:bold}
.myth-board p{line-height:1.75}
.studio-image{margin-left:48px;padding:3vw;background:var(--orange)}
.studio-image>div{height:600px;background-image:linear-gradient(180deg,rgba(7,25,43,.05),rgba(7,25,43,.6)),url("images/creative-studio.webp");background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;flex-direction:column}
.future{background:var(--blue)}
.future ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.future li{display:grid;grid-template-columns:.18fr 1fr;gap:1rem;border:1px solid var(--line);padding:1.3rem}
.future li>b{font:2rem monospace;color:var(--orange)}
.future h3{margin:.2rem 0}
.future p{line-height:1.7;color:#b8cbd5}
.guide-console{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.guide-console article{border:1px solid var(--line);padding:1.3rem}
.guide-console b{font:10px monospace;color:var(--orange)}
.guide-console p{line-height:1.7;color:#b5c7d1}
.faq details{border-top:1px solid var(--line);padding:1.3rem 0}
.faq summary{cursor:pointer;font-size:1.1rem;font-weight:bold}
.faq details p{max-width:850px;line-height:1.8;color:#b3c5cf}
.closing{margin-left:48px;text-align:center;padding:9vw 10vw;background:var(--yellow);color:var(--navy)}
.mini-dial{width:100px;height:100px;margin:0 auto 2rem;border:2px solid var(--navy);border-radius:50%;display:grid;place-items:center;font:2rem Georgia}
.closing span{font:10px monospace}
.closing h2{font-size:clamp(3rem,6vw,6.5rem);line-height:1.05}
.closing p{font-weight:bold}
footer{margin-left:48px;padding:2rem 3vw;display:flex;align-items:center;justify-content:space-between}
footer p,footer>small{font-size:.75rem;color:#98afbd}
@media(max-width:950px){.topnav,.clock{display:none}
.hero{grid-template-columns:1fr}
.signal-stage{min-height:560px}
.program-head{grid-template-columns:1fr}
.signal-grid,.role-console{grid-template-columns:1fr 1fr}
.topic-wave,.guide-console{grid-template-columns:1fr 1fr}
.shift-list article{grid-template-columns:1fr .15fr 1fr}
.shift-list p{grid-column:1/-1}
.future ol{grid-template-columns:1fr}
}
@media(max-width:620px){body>header{padding:0 1rem}
.rail{display:none}
.hero,.broadcast-strip,.program,.transmission-image,.studio-image,.closing,footer{margin-left:0}
.hero{padding:3rem 1.2rem}
.signal-stage{min-height:430px}
.ring-a{width:380px;height:380px}
.ring-b{width:290px;height:290px}
.ring-c{width:200px;height:200px}
.ticks{display:none}
.hero-status{grid-template-columns:1fr}
.program{padding:4.5rem 1.2rem}
.signal-grid,.role-console,.topic-wave,.myth-board,.guide-console{grid-template-columns:1fr}
.transmission-image,.studio-image{padding:1rem}
.transmission-image>div,.studio-image>div{height:430px}
.shift-list article{grid-template-columns:1fr}
.shift-list i{display:none}
.future li{grid-template-columns:.2fr 1fr}
footer{flex-direction:column;align-items:flex-start;gap:1rem}
}