:root { color-scheme:light; --bg:#f5f6fa; --card:#fff; --ink:#151820; --muted:#687080; --line:#dfe3ea; --soft:#fff0f4; --brand:#ec174c; --cream:#f6e7bd; --gold:#dca54d; --red:#b7382d; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#0d1421; --card:#172235; --ink:#f2f5fa; --muted:#aab5c7; --line:#30405a; --soft:#311a29; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:var(--bg); color:var(--ink); font:15px/1.45 Arial,sans-serif; }
.site-header { height:52px; padding:0 clamp(16px,4vw,48px); display:flex; align-items:center; justify-content:space-between; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.site-link { border:1px solid var(--line); color:var(--ink); background:var(--card); padding:8px 12px; border-radius:9px; text-decoration:none; }
.site-link:hover { background:var(--soft); }
.tv-page { width:min(1500px,100%); margin:auto; padding:6px clamp(12px,3vw,40px) 56px; }
.set-and-schedule { display:grid; grid-template-columns:minmax(0,2.45fr) minmax(280px,1fr); gap:1.35rem; align-items:start; }
.tv-column { min-width:0; }
.tv-and-remote { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 108px; gap:10px; align-items:start; }
.tv-style-picker { display:flex; justify-content:center; align-items:center; gap:6px; margin:0 auto 8px; color:var(--muted); font-size:12px; }
.tv-style-picker span { margin-right:4px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.tv-style-picker button { border:1px solid var(--line); border-radius:999px; padding:6px 12px; color:var(--ink); background:var(--card); font-weight:700; cursor:pointer; }
.tv-style-picker button:hover,.tv-style-picker button:focus-visible { border-color:var(--brand); outline:none; }
.tv-style-picker button.active { border-color:var(--brand); color:#fff; background:var(--brand); }
.television { position:relative; width:100%; aspect-ratio:827/620; isolation:isolate; }
.tv-art { position:absolute; left:50%; top:0; width:var(--art-width); aspect-ratio:var(--art-ratio); transform:translateX(-50%); filter:drop-shadow(0 16px 15px rgba(0,0,0,.34)); }
.tv-background { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:fill; pointer-events:none; }
#tvVideo,.screen-static,.off-message { position:absolute; left:var(--screen-left); top:var(--screen-top); width:var(--screen-width); height:var(--screen-height); border-radius:var(--screen-radius); }
#tvVideo { z-index:2; object-fit:contain; background:#020302; }
.style-80s #tvVideo { object-fit:cover; }
.style-90s #tvVideo { object-fit:contain; }
.screen-static { z-index:5; opacity:0; pointer-events:none; display:block; overflow:hidden; background:#777; mix-blend-mode:normal; transition:opacity .35s ease-out; }
.screen-static img { width:100%; height:100%; display:block; object-fit:cover; }
.screen-static.active { opacity:1; transition:none; }
.off-message { z-index:4; display:grid; place-items:center; overflow:hidden; color:#bbc8b7; background:#090b0b; text-shadow:0 0 12px #9ff; transition:opacity .2s; }
.off-message::after { content:""; position:absolute; width:100%; height:3px; background:#fff; box-shadow:0 0 18px #fff; animation:shutdown .35s forwards; }
.television.is-on .off-message { opacity:0; visibility:hidden; }
.tv-stencil { display:none; }
.hardware-control { position:absolute; z-index:8; margin:0; padding:0; border:0; background:transparent; }
.hardware-control img { display:none; width:61%; height:auto; pointer-events:none; transform-origin:center; }
.style-80s .hardware-control>img { display:block; position:absolute; left:19.5%; top:0; }
.control-hit { position:absolute; top:0; bottom:0; z-index:2; width:34%; margin:0; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; outline:none; }
.control-hit:focus-visible { outline:1px dashed rgba(255,255,255,.72); outline-offset:-2px; }
.control-down { left:0; }
.control-up { right:0; }
.channel-control { left:var(--channel-left); top:var(--channel-top); width:var(--channel-width); height:var(--channel-height); }
.volume-control { left:var(--volume-left); top:var(--volume-top); width:var(--volume-width); height:var(--volume-height); }
.power-control { left:var(--power-left); top:var(--power-top); width:var(--power-width); height:var(--power-height); border:0; background:transparent; cursor:pointer; outline:none; }
.power-control:focus-visible { outline:1px dashed rgba(255,255,255,.72); outline-offset:-2px; }
.style-80s { --art-width:93.5%; --art-ratio:773/616; --screen-left:8.02%; --screen-top:7.79%; --screen-width:62.1%; --screen-height:58.44%; --screen-radius:12%/16%; --stencil-left:-1.68%; --stencil-top:-.32%; --stencil-width:99.35%; --stencil-height:78.57%; --brand-left:39%; --brand-top:73%; --channel-left:81.5%; --channel-top:13.31%; --channel-width:10.61%; --channel-height:8.12%; --volume-left:81.5%; --volume-top:26.95%; --volume-width:10.61%; --volume-height:8.12%; --power-left:87.25%; --power-top:62.6%; --power-width:5.4%; --power-height:6.6%; }
.style-90s { --art-width:84.65%; --art-ratio:700/580; --screen-left:15.75%; --screen-top:8.68%; --screen-width:67.49%; --screen-height:59.42%; --screen-radius:0; --stencil-left:0%; --stencil-top:0%; --stencil-width:97.14%; --stencil-height:77.59%; --brand-left:74%; --brand-top:76.5%; --channel-left:45.86%; --channel-top:79.31%; --channel-width:4.29%; --channel-height:3.45%; --volume-left:40%; --volume-top:79.31%; --volume-width:4.29%; --volume-height:3.45%; --power-left:57.71%; --power-top:77.59%; --power-width:5.72%; --power-height:6.73%; }
.style-2000s { --art-width:100%; --art-ratio:827/580; --screen-left:12.68%; --screen-top:8.67%; --screen-width:74.83%; --screen-height:60.95%; --screen-radius:0; --stencil-left:0%; --stencil-top:5.17%; --stencil-width:100%; --stencil-height:68.97%; --brand-left:72%; --brand-top:77%; --channel-left:48.13%; --channel-top:79.31%; --channel-width:3.63%; --channel-height:3.45%; --volume-left:43.17%; --volume-top:79.31%; --volume-width:3.63%; --volume-height:3.45%; --power-left:58.16%; --power-top:77.59%; --power-width:4.84%; --power-height:6.73%; }
.tv-remote { width:108px; height:180px; padding:11px 8px; border:3px solid #c8c8c8; border-radius:10px; background:linear-gradient(90deg,#7d7d7d 0,#cecece 49%,#afafaf); box-shadow:7px 8px 5px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:7px; }
.tv-remote button { width:86px; height:21px; margin:0 auto; padding:0; border:1px solid #000; border-radius:30px; color:#000; background:#707070; box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 1px rgba(255,255,255,.7); text-shadow:0 -1px 0 rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.3); font:700 11px/19px Arial,sans-serif; cursor:pointer; }
.tv-remote button:hover,.tv-remote button:active { background:#999; }
.tv-remote button.active { background:#999; box-shadow:inset 0 1px 4px rgba(0,0,0,.6); }
.tv-remote button:focus-visible { outline:1px dashed #111; outline-offset:2px; }
.tv-remote .remote-power { color:#b40000; }
.schedule-panel { min-height:0; padding:.9rem 1rem; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:var(--card); box-shadow:0 16px 42px rgba(15,25,45,.12); font-size:13px; }
.channel-display { display:flex; gap:.8rem; align-items:baseline; padding-bottom:.7rem; border-bottom:1px solid #7f6847; font-family:system-ui,sans-serif; }
.channel-display span { padding:.3rem .5rem; background:var(--red); font-weight:800; }
.channel-display strong { color:var(--brand); font-size:1.08rem; }
.now-playing span,.schedule-panel h3 { color:var(--muted); text-transform:uppercase; letter-spacing:.16em; font:700 .72rem system-ui,sans-serif; }
.now-playing { padding:.5rem 0 .2rem; }
.now-playing h2 { min-height:2.1em; margin:.3rem 0; font-size:clamp(1.08rem,1.7vw,1.45rem); }
.now-playing p { min-height:0; margin:.22rem 0; color:var(--muted); font-family:system-ui,sans-serif; }
.now-playing p:empty { display:none; }
.up-next { margin:.45rem 0 .25rem; padding:0; list-style:none; counter-reset:upnext; }
.up-next li { display:grid; grid-template-columns:1.65rem 1fr auto; gap:.4rem; padding:.38rem 0; border-bottom:1px dashed var(--line); font-family:system-ui,sans-serif; font-size:.76rem; }
.up-next li::before { counter-increment:upnext; content:counter(upnext,decimal-leading-zero); color:#c09652; }
.up-next time { color:#94866e; }
.bumper-label { color:#e28b62; font-style:italic; }
.effect-credit { position:fixed; left:0; bottom:14px; z-index:20000; padding:7px 10px; border:1px solid var(--line); border-left:0; border-radius:0 8px 8px 0; color:var(--muted); background:var(--card); box-shadow:0 5px 16px rgba(0,0,0,.16); text-decoration:none; font:600 11px/1.2 Arial,sans-serif; }
.effect-credit:hover,.effect-credit:focus-visible { color:var(--brand); outline:2px solid rgba(236,23,76,.25); outline-offset:2px; }
@keyframes shutdown { from{top:0} to{top:100%;opacity:0} }
@media (min-width:901px) and (min-height:620px) {
  body { overflow:hidden; }
  .tv-page { height:calc(100dvh - 52px); padding-top:2px; padding-bottom:4px; }
  .set-and-schedule { height:100%; }
  .tv-column { height:100%; display:flex; flex-direction:column; min-height:0; }
  .tv-style-picker { flex:0 0 30px; margin-bottom:0; }
  .tv-and-remote { flex:1 1 auto; }
  .television { width:100%; max-width:100%; min-height:0; margin:0 auto; }
  .schedule-panel { min-height:0; max-height:100%; padding:1rem 1.2rem; }
  .now-playing { padding:.75rem 0; }
  .now-playing h2 { font-size:clamp(1.15rem,1.8vw,1.65rem); }
  .up-next { margin-bottom:.25rem; }
  .up-next li { padding:.38rem 0; }
}
@media (max-width:900px) { .set-and-schedule{grid-template-columns:1fr}.schedule-panel{min-height:0}.tv-page{padding-inline:.3rem}.site-header{position:relative}.effect-credit{font-size:10px}.tv-and-remote{grid-template-columns:minmax(0,1fr) 92px;gap:3px}.tv-remote{width:88px;height:162px;padding:9px 5px}.tv-remote button{width:72px;font-size:10px} }
@media (prefers-reduced-motion:reduce) { .off-message::after{animation:none} }