:root{color-scheme:dark;--ink:#101217;--muted:#b6b7bc;--red:#ff4b31;--white:#f5f1e9;--line:#36383d;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 12%,#303139,#17191d 68%);color:var(--white);font-family:"Noto Sans KR","Malgun Gothic",Arial,sans-serif}
button,select,a{font:inherit;color:inherit}
button,select{cursor:pointer}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #ff795c;outline-offset:2px}
button,a{-webkit-tap-highlight-color:transparent}
.shell{width:min(1432px,100%);margin:auto;padding:29px 47px 36px}
.topline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 4px 12px;color:#d1cfd0;font:600 11px var(--mono);letter-spacing:.16em}
.topline i{display:inline-block;width:7px;height:7px;margin-right:7px;background:var(--red);box-shadow:0 0 10px #ff4b316e;border-radius:50%}
.topline b{color:var(--red)}
.cabinet{padding:15px 15px 0;background:linear-gradient(164deg,#3c3d43 0%,#292a2e 35%,#1c1d22 100%);border:1px solid #52545b;border-bottom-color:#0d0d11;border-radius:26px;box-shadow:0 24px 65px #0008,inset 0 1px 0 #ffffff22}
.bezel{border-radius:19px;background:#08090b;padding:10px;box-shadow:inset 0 3px 8px #000,0 1px 0 #ffffff29}
.screen{height:min(67vh,690px);min-height:530px;position:relative;isolation:isolate;border-radius:13px;overflow:hidden;background:#0c1119}
.panel{height:100%}.panel[hidden]{display:none}
.hero{position:relative;display:grid;place-items:center;background:linear-gradient(180deg,#080b142d,#090c1670 54%,#090d17b8),url('assets/seoul-night.webp') 50% 52%/cover}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #0206119c}
.title{position:relative;z-index:1;width:min(65%,720px);height:auto;margin-top:-32px;filter:drop-shadow(0 13px 23px #000b)}
.ticker{position:absolute;z-index:2;bottom:0;left:0;right:0;background:#101218ee;display:flex;align-items:stretch;min-height:50px;border-top:1px solid #ffffff30}
.ticker span{display:grid;place-items:center;background:#e83b29;color:#fff;padding:8px 23px;font-size:14px;white-space:nowrap;font-weight:800}
.ticker p{margin:0;padding:12px 18px;align-self:center;font-weight:700;line-height:1.35}
.channel-bug{position:absolute;z-index:3;top:17px;left:18px;background:#11131be8;border:1px solid #ffffff46;padding:6px 9px;color:#fff;font:700 11px var(--mono);letter-spacing:.12em;pointer-events:none}
.switch-effect{position:absolute;z-index:4;inset:0;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#f1ede846 3px 5px),#080b18b8}
.switching .switch-effect{animation:channel .28s ease-out}
@keyframes channel{0%{opacity:.85;transform:scaleY(.97)}60%{opacity:.17}100%{opacity:0}}
.control-deck{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:15px 15px 17px}
.speaker{height:27px;width:min(125px,100%);background:repeating-linear-gradient(0deg,#0f1114 0 2px,#393a3f 2px 4px);border-radius:5px}
.channels{display:flex;gap:7px}
.channels button,.intro-link,.sound{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid #4c4d54;box-shadow:inset 0 1px 0 #ffffff1a,0 3px 0 #101014;background:#212227;border-radius:5px;padding:10px 13px;font-size:13px;font-weight:700;white-space:nowrap}
.channels small,.sound span{font:600 10px var(--mono);color:#c1c2c9}.sound{justify-self:end;padding:10px 11px}
.channels :is(button,a):hover,.sound:hover{background:#383941}
.channels [aria-pressed=true]{border-color:#ff6249;background:#442924;color:#fff}
.channels [aria-pressed=true] small,.sound[aria-pressed=true] span{color:#ff8d77}
.factions{display:grid;grid-template-rows:minmax(0,1fr) auto}
.faction-hero{position:relative;display:flex;align-items:end;padding:26px 30px 25px;background-size:cover;background-position:center;gap:24px}
.faction-copy{flex:1;min-width:0}
.faction-logo{display:block;width:min(230px,100%);height:clamp(95px,20vh,172px);object-fit:contain;object-position:left center}
.faction-copy h2{font-size:clamp(20px,3vw,34px);margin:8px 0 5px;line-height:1.15}
.faction-copy p{font-size:14px;line-height:1.5;margin:0;max-width:385px;color:#edebed}
.faction-members{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;width:53%}
.member{display:block;text-align:left;min-width:0;background:#15181ef2;border:1px solid #ffffff44;padding:0;border-radius:4px;overflow:hidden}
.member img{display:block;width:100%;aspect-ratio:1.5;object-fit:cover}
.member span{display:block;font-size:12px;font-weight:700;padding:7px 6px}
.faction-nav{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;padding:1px;background:#45464c}
.faction-nav button{background:#16191f;border:0;min-height:56px;font-size:12px;font-weight:700;padding:8px 4px}
.faction-nav button[aria-pressed=true]{background:#f5f0e6;color:#201f24;box-shadow:inset 0 -3px var(--red)}
.member:hover,.faction-nav button:hover:not([aria-pressed=true]){background:#373941}
.records{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,24%)}
.record-display{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;background:#0c1018}
.record-image{width:100%;height:100%;object-fit:contain;display:block;min-height:0}
.record-info{display:flex;justify-content:space-between;gap:14px;padding:11px 17px;background:#15171e;border-top:1px solid var(--line)}
.record-facts{min-width:0}
.record-facts h2{font-size:21px;margin:0 0 3px}.record-facts h2 small{color:#ff8b77;font-size:12px;margin-left:7px}
.record-facts p{margin:0;color:#dddde2;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.record-facts .record-quote{color:#e7cfc8;margin-top:4px}
.states{display:flex;align-self:center;gap:3px;flex-shrink:0}
.states button{background:#252832;border:1px solid #464853;padding:6px 8px;font-size:12px}
.states button[aria-pressed=true]{border-color:#ff6955;background:#4c2b2c}
.record-directory{display:flex;flex-direction:column;padding:14px 11px;background:#191b22;border-left:1px solid var(--line);min-height:0}
.record-directory label{font-size:15px;font-weight:800;margin-bottom:8px}
.record-directory select{width:100%;background:#23262f;border:1px solid #555862;padding:6px;font-size:12px}
.record-list{margin-top:8px;overflow:auto;display:grid;gap:5px}
.record-list button{display:flex;align-items:center;gap:7px;background:#242631;border:1px solid transparent;text-align:left;padding:4px;font-size:12px}
.record-list button[aria-pressed=true]{background:#35282c;border-color:#ff6955}
.record-list img{width:49px;height:33px;object-fit:cover;flex:none}
.reader{background:#000}
.reader-bar{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:#15161b;border-bottom:1px solid #34363b}
.reader-bar a,.reader-end a{text-decoration:none;font-weight:700}
.reader-bar a:hover,.reader-end a:hover{text-decoration:underline}
.pages{width:min(100%,640px);margin:auto}
.pages img{display:block;width:100%;height:auto}
.reader-end{text-align:center;padding:30px 12px 45px}
@media(max-width:950px){.shell{padding:20px}.control-deck{gap:8px;padding-inline:6px}}
@media(max-width:700px){.shell{padding:14px 7px 18px}.topline{font-size:9px;letter-spacing:.08em}.cabinet{padding:5px 5px 0;border-radius:12px}.bezel{padding:4px;border-radius:9px}.screen{min-height:0;height:auto;border-radius:6px}.panel{height:auto}.hero{min-height:400px;min-height:clamp(355px,65svh,515px)}.title{width:86%}.ticker span{padding:8px 10px;font-size:12px}.ticker p{font-size:12px;padding:9px 9px}.ticker{min-height:45px}.channel-bug{top:9px;left:9px;font-size:9px}.control-deck{grid-template-columns:minmax(0,1fr) auto;padding:8px 2px 10px;gap:4px}.speaker{display:none}.channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.channels button,.intro-link{padding:6px 1px;min-height:40px;flex-direction:column;gap:2px;font-size:10px}.sound{font-size:9px;padding:6px;gap:3px}.sound span{font-size:8px}.faction-hero{display:block;padding:38px 12px 12px;min-height:350px}.faction-copy p{font-size:12px}.faction-logo{width:135px;height:105px}.faction-members{margin-top:13px;width:100%;gap:4px}.member span{font-size:10px;padding:5px 2px}.faction-nav{grid-template-columns:repeat(4,minmax(0,1fr))}.faction-nav button{min-height:37px;font-size:10px}.records{display:flex;flex-direction:column}.record-display{grid-template-rows:auto auto}.record-image{height:auto;aspect-ratio:1.46;object-fit:contain}.record-info{display:block;padding:8px 9px}.states{margin-top:8px}.record-directory{padding:8px;border-left:0;border-top:1px solid var(--line)}.record-directory label{display:none}.record-list{grid-template-columns:repeat(4,minmax(0,1fr));max-height:128px;gap:3px}.record-list button{display:block;font-size:10px}.record-list img{width:100%;height:35px}.reader-bar{padding:8px 12px}}
@media (prefers-reduced-motion:reduce){.switching .switch-effect{animation:none}}

/* Tube TV power and channel transitions */
.hero-copy{position:relative;z-index:1;width:min(86%,720px);margin-top:-30px;text-align:center}
.hero-copy h1{margin:0;font-size:0}
.hero-copy .title{width:100%;margin:0}
.world{max-width:475px;margin:18px auto 0;padding:0 10px;color:#f5f2ec;font-size:14px;line-height:1.65;text-wrap:pretty;text-shadow:0 2px 7px #000,0 0 16px #000}
.media-controls{justify-self:end;display:flex;align-items:center;gap:6px}
.power{font-size:18px;line-height:15px;color:#e7e2d9;min-width:36px}
.power[aria-pressed=true]{color:#ff9b84;border-color:#ff6955}
.sound:disabled{opacity:.42;cursor:default}
.standby{position:absolute;z-index:5;inset:0;display:none;place-items:center;background:radial-gradient(ellipse at center,#1a1c24,#0b0c11 75%);box-shadow:inset 0 0 70px #000}
[data-power=off] .standby{display:grid}
[data-power=off] :is(.channel-bug,.panel,.switch-effect){visibility:hidden}
[data-power=off] .channels{opacity:.45}
.standby button{display:grid;justify-items:center;gap:11px;min-width:120px;color:#e5e1dc;border:0;background:transparent;font-size:13px;font-weight:750;letter-spacing:.04em;padding:16px}
.standby button span{display:grid;place-items:center;width:58px;height:58px;border:1px solid #615e64;border-radius:50%;font-size:31px;background:#1d1f26;line-height:1;color:#ff715b}
.standby button:hover span{border-color:#ff715b}
.switch-effect{overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 3px,#bbc3e030 3px 5px),#10131b81}
.switch-effect::before{content:"";position:absolute;inset:-55%;background:url('assets/static.png') repeat;opacity:.6;filter:contrast(1.8);mix-blend-mode:screen}
.switch-effect::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 21%,#e0e7ff66 22% 25%,transparent 27% 62%,#e0e7ff45 63% 68%,transparent 70%)}
.switching .switch-effect::before{animation:static-drift .28s steps(5) both}
@keyframes static-drift{from{transform:translate(-8%,2%)}to{transform:translate(13%,-12%)}}
@media(max-width:700px){.hero-copy{width:86%;margin-top:-20px}.world{font-size:12px;margin-top:13px;padding:0 5px}.media-controls{gap:3px}.power{min-width:24px;font-size:15px}.cabinet[data-power=off] .screen{min-height:clamp(355px,65svh,515px)}}
@media(prefers-reduced-motion:reduce){.switching .switch-effect::before{animation:none}}

.power-icon{display:block;width:19px;height:19px}
.standby .power-icon{width:28px;height:28px}
body.reading{overflow:hidden}
.reader-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--white);overflow:auto;overscroll-behavior:contain}
.reader-dialog::backdrop{background:#000}
.reader-dialog .reader-bar .sound{justify-self:auto}
.reader-dialog .reader-end .sound{display:inline-flex}


@media(max-width:700px){
  .topline{font-size:10px}
  .channel-bug{min-height:32px;font-size:11px}
  .control-deck{grid-template-columns:1fr;gap:8px;padding:9px 4px 10px}
  .channels{gap:4px}
  .channels button,.intro-link{min-height:47px;font-size:12px;line-height:1.15;text-align:center;padding-inline:1px}
  .media-controls{gap:6px}
  .media-controls .sound,.reader-bar .sound{font-size:12px;min-height:44px;padding:8px}
  .sound span{font-size:10px}
  .power{min-width:44px}
  .ticker p,.ticker span{font-size:13px}
  .world{font-size:14px;line-height:1.55}
  .faction-copy h2{font-size:25px}
  .faction-copy p{font-size:14px;line-height:1.6}
  .faction-nav button{min-height:45px;font-size:12px;line-height:1.2;word-break:keep-all}
  .member span,.record-list button{font-size:12px}
  .record-facts p{font-size:14px;line-height:1.55}
  .record-info{padding:12px}
  .states button,.record-directory select{font-size:13px;min-height:44px}
  .record-list button{min-height:53px}
}

.news-dock{position:absolute;z-index:2;inset:auto 0 0}
.news-dock .ticker{position:static}
.news-topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#3c414d;border-top:1px solid #3c414d}
.news-topics button{min-height:46px;padding:7px 4px;border:0;background:#171a22;color:#e9e7e5;font-size:14px;font-weight:700;line-height:1.25;word-break:keep-all}
.news-topics button:hover{background:#2c303b}
.news-topics button[aria-pressed=true]{background:#3d282a;box-shadow:inset 0 -3px var(--red);color:#fff}
.news-topics button:focus-visible{outline-offset:-3px}
.hero-copy{margin-top:-65px}
.hero.report-open:not([hidden]){display:flex;align-items:center;padding:54px clamp(20px,9vw,130px) 114px}
.hero.report-open::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,#0b101cf5,#0b101caa)}
.news-report{position:relative;z-index:1;width:min(100%,640px);max-height:100%;overflow:auto;scrollbar-color:#555d70 transparent}
.news-report .news-category{font-size:13px;font-weight:800;color:#ff907d;margin:0 0 10px}
.news-report h2{margin:0 0 18px;font-size:clamp(26px,4vw,45px);line-height:1.16;word-break:keep-all}
.news-report p{margin:0 0 10px;color:#f0edeb;font-size:16px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:700px){
  .hero{min-height:clamp(405px,65svh,515px)}
  .hero-copy{margin-top:-52px}
  .hero.report-open:not([hidden]){padding:64px 15px 0;display:block;min-height:0}
  .report-open .news-dock{position:relative;margin:15px -15px 0}
  .news-report h2{font-size:25px;margin-bottom:13px}
  .news-report p{font-size:14px;line-height:1.65}
  .news-topics button{min-height:46px;font-size:12px}
}