@font-face {
  font-family: "DotGothic16";
  src: url("fonts/DotGothic16-subset.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

:root {
  --station-black: #05050b;
  --station-paper: #f7f4ec;
  --station-cyan: #58f4ff;
  --station-magenta: #ff4ccf;
  --station-yellow: #ffe45e;
  --station-red: #ff445d;
  --station-green: #9dff8c;
}

html { background: var(--station-black); }
body.page-c {
  color: var(--station-paper);
  background: var(--station-black);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

body.page-c::before { display: none; }
.station-main { position: relative; z-index: 2; overflow: clip; }
.station-noise { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.station-noise.is-rgb-shift { transform: translateX(2px); }
.station-scanlines { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .22; background: repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(0,0,0,.25) 2px, rgba(0,0,0,.25) 4px); }
.station-osd { position: fixed; inset: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); z-index: 20; pointer-events: none; color: var(--station-cyan); font: 400 .78rem/1.35 "DotGothic16", monospace; text-shadow: 2px 0 var(--station-magenta), -2px 0 rgba(0,255,255,.4); }
.station-osd__channel { position: absolute; top: 0; left: 0; display: flex; gap: .75rem; align-items: baseline; }
.station-osd__program { color: var(--station-paper); font-size: .68rem; letter-spacing: .08em; }
.station-osd__rec { position: absolute; top: 0; right: 0; color: var(--station-red); }
.station-osd__time { position: absolute; right: 0; bottom: 0; }
.station-osd__rec.is-dim { opacity: .2; }
.station-sound { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); left: max(1rem, env(safe-area-inset-left)); z-index: 30; padding: .5rem .7rem; color: var(--station-cyan); background: rgba(4,4,12,.72); border: 1px solid rgba(88,244,255,.5); font: 400 .72rem/1 "DotGothic16", monospace; letter-spacing: .1em; cursor: pointer; }
.station-sound.is-on { color: var(--station-black); background: var(--station-cyan); }
.station-sound:focus-visible { outline: 2px solid var(--station-yellow); outline-offset: 2px; }

.station-section { position: relative; display: grid; min-height: 108svh; align-items: center; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 7vw, 8rem); isolation: isolate; }
.station-gap { height: 55svh; }
.station-section__inner { position: relative; z-index: 2; width: min(100%, 58rem); min-width: 0; margin: 0 auto; }
.station-section__inner--wide { width: min(100%, 78rem); }
.station-kicker { margin: 0 0 1.2rem; color: var(--station-cyan); font: 400 .75rem/1.4 "DotGothic16", monospace; letter-spacing: .16em; }
.station-section h2 { margin: 0; color: var(--station-paper); font-size: clamp(2.2rem, 6vw, 5.8rem); font-weight: 500; letter-spacing: .04em; line-height: 1.25; text-shadow: 2px 0 rgba(0,255,255,.65), -2px 0 rgba(255,0,160,.5); }
.station-copy { max-width: 42rem; margin-top: 2rem; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 2.05; }
.station-copy p { margin: 0 0 1.4rem; }
.program-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); gap: clamp(2rem, 7vw, 7rem); align-items: end; }
.program-card { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: start; padding: 1rem; border: 1px solid rgba(255,255,255,.24); background: rgba(4,4,12,.72); font-size: .85rem; line-height: 1.55; }
.program-card img { width: 6.5rem; aspect-ratio: 1; object-fit: cover; }
.program-card p { margin: 0; }
.program-card__title { margin-bottom: .2rem !important; color: var(--station-yellow); font: 400 1rem/1.4 "DotGothic16", monospace; }
.program-card a, .live-buttons a { display: inline-block; margin-top: .75rem; padding: .45rem .65rem; color: var(--station-black); background: var(--station-cyan); font: 400 .72rem/1 "DotGothic16", monospace; text-decoration: none; }
.program-card small { display: block; margin-top: .7rem; color: rgba(255,255,255,.6); font-size: .68rem; }

.station-op { min-height: 100svh; background: #010108; }
.station-op__screen { position: relative; display: grid; place-items: center; width: min(90vw, 55rem); min-height: 55svh; margin: auto; color: var(--station-paper); text-align: center; }
.op-signal { position: absolute; top: 50%; left: 50%; width: .35rem; height: .35rem; background: #fff; transform: translate(-50%, -50%); }
.station-logo { width: min(88vw, 45rem); height: auto; color: var(--station-cyan); opacity: 0; }
.station-op__subcopy, .station-op__cue { opacity: 0; }
.station-op__subcopy { margin: 2rem 0 0; font-size: clamp(1rem, 2vw, 1.3rem); }
.station-op__cue { margin-top: 4.5rem; color: var(--station-yellow); font: 400 .85rem/1.4 "DotGothic16", monospace; animation: cue-blink 1.7s steps(2,end) infinite; }
@keyframes cue-blink { 50% { opacity: .3; } }

.station-documentary { background: rgba(7,8,10,.52); }
.station-documentary::after { position: absolute; inset: 0; z-index: 1; content: ""; opacity: .17; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.9) .7px, transparent .8px); background-size: 4px 4px; animation: film-wobble .16s steps(2,end) infinite; }
.documentary-copy { max-width: 43rem; margin: 4rem auto 0; color: #fff; font-size: clamp(1.2rem, 2.4vw, 2rem); line-height: 2.2; text-shadow: 1px 1px 0 #000; }
.documentary-copy p { margin: 0 0 1.5rem; }
.documentary-cut { display: inline-block; clip-path: inset(0 0 0 0); }
.documentary-cut.is-cut { clip-path: inset(0 48% 0 0); }
@keyframes film-wobble { 50% { transform: translate(1px, -1px); } }

.sports-set { position: relative; margin-bottom: 4rem; padding: 1.2rem; border: 1px solid var(--station-cyan); background: linear-gradient(135deg, #061b2b, #0c0620); box-shadow: 0 0 2rem rgba(88,244,255,.15); font: 400 .82rem/1.4 "DotGothic16", monospace; }
.sports-set__topline, .sports-ticker { display: flex; justify-content: space-between; gap: 1rem; color: var(--station-yellow); letter-spacing: .08em; }
.sports-scoreboard { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; padding: 1.1rem 1.5rem; background: #02040a; border: 3px solid rgba(255,255,255,.75); }
.sports-scoreboard strong { color: var(--station-cyan); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: .04em; }
.sports-scoreboard small { color: var(--station-paper); font-size: .75rem; }
.sports-scoreboard__status { color: var(--station-green); }
.sports-ticker { overflow: hidden; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.25); white-space: nowrap; }

.station-cooking { background: linear-gradient(125deg, #2a120b, #11100b 55%, #34200d); }
.cooking-set { position: relative; display: grid; place-items: center; width: min(100%, 50rem); height: 15rem; margin: 0 auto 4rem; overflow: hidden; background: linear-gradient(170deg, rgba(252,213,153,.35), rgba(61,27,11,.3)), repeating-linear-gradient(90deg, rgba(89,44,16,.4) 0 3px, transparent 3px 10px); border-radius: 50% 50% 1rem 1rem; box-shadow: inset 0 1rem 3rem rgba(255,230,162,.18), 0 2rem 4rem rgba(0,0,0,.3); }
.cooking-set__plate { display: grid; place-items: center; width: 10rem; height: 10rem; border: 1.3rem solid rgba(255,244,214,.75); border-radius: 50%; color: #6a2c14; background: #f5dba8; font: 400 3.5rem/1 "DotGothic16", monospace; box-shadow: 0 1rem 1.5rem rgba(0,0,0,.3); }
.cooking-set__label { position: absolute; bottom: 1rem; color: #ffe0a0; font: 400 .75rem/1 "DotGothic16", monospace; letter-spacing: .18em; }
.cooking-set__steam { position: absolute; top: 1rem; left: 45%; width: 2rem; height: 8rem; border-left: 3px solid rgba(255,255,255,.33); border-radius: 50%; transform: rotate(12deg); animation: steam 2.7s ease-in-out infinite; }
.cooking-set__steam--two { left: 57%; height: 6rem; transform: rotate(-10deg); animation-delay: -.8s; }
@keyframes steam { 50% { opacity: .25; transform: translateY(-1.3rem) rotate(20deg); } }

.station-shopping { background: radial-gradient(circle at 50% 25%, #fff2a0, #d87d16 30%, #5f120f 75%); }
.shopping-burst { display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; max-width: 60rem; margin: 0 auto 3rem; padding: 1.5rem; border: .6rem solid var(--station-yellow); outline: .25rem solid #db2d3d; background: repeating-conic-gradient(from 0deg, rgba(255,244,103,.9) 0 8deg, rgba(255,146,21,.65) 8deg 16deg); color: #9d1323; text-align: center; transform: rotate(-1deg); }
.shopping-burst span, .shopping-burst b { font: 400 clamp(1.3rem, 3vw, 2.4rem)/1 "DotGothic16", monospace; }
.shopping-burst strong { color: #fff; font-size: clamp(4rem, 13vw, 9rem); line-height: .85; text-shadow: .12em .12em 0 #d3233b; }
.shopping-burst em { font-size: clamp(1.2rem, 3vw, 2.2rem); font-style: normal; }
.shopping-burst b { grid-column: 1 / -1; margin-top: 1rem; padding: .55rem; color: #fff; background: #d3233b; }

.station-break { min-height: 50svh; padding: 4rem 1.25rem; background: #061b38; text-align: center; }
.station-break__bars { display: grid; grid-template-columns: repeat(7, 1fr); width: min(100%, 48rem); height: 7rem; margin: 0 auto 2rem; border: 5px solid #e9f4ff; }
.station-break__bars i:nth-child(1) { background: #f5f5f5; }.station-break__bars i:nth-child(2) { background: #ffe548; }.station-break__bars i:nth-child(3) { background: #54e4db; }.station-break__bars i:nth-child(4) { background: #58a8ff; }.station-break__bars i:nth-child(5) { background: #52de68; }.station-break__bars i:nth-child(6) { background: #ee70ad; }.station-break__bars i:nth-child(7) { background: #4d4d56; }
.station-break__message p { display: inline-block; margin: 0; padding: .6rem 1rem; color: #fff; background: #07101e; font: 400 1.1rem/1.4 "DotGothic16", monospace; }
.station-break__message span { display: block; margin-top: 2rem; line-height: 2; }

.station-cm { min-height: 100svh; color: #17131b; background: #f7f3ea; }
.station-cm__content { width: min(100%, 58rem); margin: auto; text-align: center; }
.station-cm .station-kicker { color: #713cff; }.station-cm h2 { color: #17131b; font-size: clamp(2rem, 5vw, 4.8rem); text-shadow: none; }
.station-cm .program-card { width: min(100%, 22rem); margin: 4rem auto 0; color: #17131b; border-color: rgba(23,19,27,.2); background: #fff; text-align: left; }

.station-quest { background: #120c29; }
.quest-window { width: min(100%, 62rem); margin: 0 auto 4rem; border: 5px solid #f8f6ff; background: #05030b; box-shadow: .65rem .65rem 0 #8e63ff; font: 400 clamp(1rem, 2vw, 1.3rem)/2 "DotGothic16", monospace; }
.quest-window__bar { display: flex; justify-content: space-between; padding: .6rem 1rem; color: #15101e; background: #f8f6ff; }.quest-window__bar span:last-child { color: #ff63b8; }
.quest-window__body { min-height: 14rem; padding: 2rem clamp(1rem, 4vw, 3rem); }.quest-line { min-height: 2em; margin: .5rem 0; color: #fff; }.quest-line.is-current { color: var(--station-yellow); }
.station-quest .program-card { border-color: #9e7eff; }.station-quest .program-card__title { color: #d1bfff; }

.station-live { background: rgba(4,14,18,.42); }.on-air-lamp { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 3rem; padding: .55rem .8rem; color: #fff; background: #7c1019; border: 2px solid #ff6f6f; font: 400 .85rem/1 "DotGothic16", monospace; letter-spacing: .1em; }.on-air-lamp span { width: .7rem; height: .7rem; border-radius: 50%; background: #ff253d; box-shadow: 0 0 1rem #ff253d; animation: rec-blink 2s steps(2,end) infinite; }
.live-monitor { display: grid; place-items: center; min-height: 17rem; border: 1px solid rgba(88,244,255,.7); background: linear-gradient(145deg, rgba(0,0,0,.35), rgba(34,111,110,.2)); color: var(--station-cyan); font: 400 1rem/1 "DotGothic16", monospace; }.live-monitor span { padding: .5rem; color: #fff; background: #a31b2b; }.live-monitor i { width: 3rem; height: 3rem; border: 2px solid var(--station-cyan); border-radius: 50%; }.live-monitor b { margin-top: 2rem; font-weight: 400; }
.live-buttons { display: flex; flex-wrap: wrap; gap: .7rem; }.live-buttons a { color: #fff; background: #15111c; border: 1px solid var(--station-cyan); }
@keyframes rec-blink { 50% { opacity: .25; } }

.station-ed { min-height: 100svh; padding: 0; display: block; background: #010108; }
.station-ed__screen { position: relative; display: grid; place-items: center; min-height: 100svh; overflow: hidden; transform-origin: center; }
.credits-stage { position: absolute; inset: 0; overflow: hidden; }.credits-roll { position: absolute; top: 100%; left: 10%; width: 80%; color: var(--station-paper); text-align: center; font-size: clamp(1rem, 2.1vw, 1.45rem); line-height: 2.25; }.credits-roll p { margin: 0 0 2.2rem; }
.crt-shutdown { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #dfffff; opacity: 0; transform-origin: center; }
.closing-copy { position: absolute; right: 0; bottom: 15%; left: 0; z-index: 4; margin: 0; color: #fff; font-size: clamp(2rem, 6vw, 5rem); text-align: center; text-shadow: 2px 0 var(--station-cyan), -2px 0 var(--station-magenta); opacity: 0; }.closing-copy b { font-weight: 500; }.closing-copy.is-period-only span { opacity: 0; }.closing-copy.is-period-only b { color: #fff; animation: period-pulse 2s steps(2,end) infinite; }
@keyframes period-pulse { 50% { opacity: .25; } }
@keyframes crt-off { 0% { transform: scale3d(1,1,1); filter: brightness(1); } 30% { transform: scale3d(1.05,1.4,1); filter: brightness(3); } 60% { transform: scale3d(1,.005,1); filter: brightness(6); } 100% { transform: scale3d(0,.005,1); filter: brightness(10); opacity: 0; } }

@media (max-width: 768px) {
  .station-osd { font-size: .66rem; }.station-osd__program { font-size: .58rem; }
  .station-section { min-height: 100svh; padding: 4rem 1rem; }.station-gap { height: 42svh; }.station-section__inner--wide { width: 100%; }.program-layout { grid-template-columns: 1fr; gap: 2rem; }.program-card { grid-template-columns: 5rem 1fr; }.program-card img { width: 5rem; }
  .station-documentary { min-height: 110svh; }.documentary-copy { margin-top: 2.5rem; font-size: 1.1rem; line-height: 2; }.documentary-copy p { margin-bottom: 1.2rem; }
  .sports-set { margin-bottom: 2.5rem; }.sports-set__topline, .sports-ticker { font-size: .68rem; }.sports-scoreboard { padding: .7rem; }.sports-scoreboard strong { font-size: 2rem; }.sports-ticker { white-space: normal; }
  .cooking-set { height: 11rem; margin-bottom: 2.5rem; }.cooking-set__plate { width: 7rem; height: 7rem; border-width: .8rem; font-size: 2.2rem; }
  .shopping-burst { grid-template-columns: 1fr 1.2fr 1fr; padding: .8rem; border-width: .35rem; }.shopping-burst strong { font-size: 4.5rem; }
  .station-break { min-height: 50svh; }.station-break__bars { height: 4rem; border-width: 3px; }.station-cm h2 { font-size: 2.1rem; }.quest-window { box-shadow: .35rem .35rem 0 #8e63ff; }.quest-window__body { min-height: 12rem; padding: 1.3rem .8rem; font-size: .9rem; }.live-monitor { min-height: 11rem; }
  .station-ed__screen { min-height: 100svh; }.credits-roll { left: 5%; width: 90%; font-size: .95rem; }.closing-copy { bottom: 12%; font-size: 2.2rem; }
  .station-scanlines { opacity: .12; }
}

@media (prefers-reduced-motion: reduce) {
  .station-noise { display: none; }
  .station-scanlines { opacity: .08; }
  .station-logo, .station-op__subcopy, .station-op__cue { opacity: 1; }
  .station-op__cue, .station-documentary::after, .cooking-set__steam, .on-air-lamp span, .closing-copy.is-period-only b { animation: none; }
  .documentary-cut.is-cut { clip-path: none; }.credits-roll { top: 22%; }.closing-copy { opacity: 1; }.crt-shutdown { display: none; }
}