:root {
  color-scheme: dark;
  --room: #171a18;
  --room-soft: #242925;
  --paper: #e7dcc3;
  --paper-dark: #cdbf9f;
  --ink: #1c1e1b;
  --cream: #f2ead8;
  --phosphor: #63ef76;
  --phosphor-dark: #174f25;
  --guide-red: #bd392d;
  --line: #5d594e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 8%, #33443e 0, transparent 28%),
    linear-gradient(140deg, var(--room) 0%, #292e2a 64%, #151816 100%);
  color: var(--cream);
  font-family: Arial, Helvetica, sans-serif;
}

button, input { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
.console { width: 100%; margin: 0; padding: clamp(12px, 1.4vw, 26px); }
.stage { --guide-width: clamp(340px, 22vw, 460px); position: relative; display: grid; grid-template-columns: var(--guide-width) minmax(0, 1fr); align-items: start; gap: clamp(18px, 1.8vw, 32px); }
.stage.guide-hidden { grid-template-columns: 0px minmax(0, 1fr); gap: 0; }
.stage.guide-hidden .channel-bar { transform: translateX(-100%); opacity: .18; pointer-events: none; visibility: hidden; transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .42s ease, visibility 0s linear .5s; }
.stage.guide-hidden .tv-wrap { width: min(100%, clamp(720px, calc((100dvh - 150px) * 1.5), 1560px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }

/* TV Guide */
.channel-bar {
  --guide-inset: clamp(14px, 1.5vw, 22px);
  width: var(--guide-width);
  position: sticky;
  top: 16px;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid #80745e;
  border-radius: 4px;
  background:
    radial-gradient(circle at 18% 28%, #715f4215 0 1px, transparent 1px) 0 0 / 6px 6px,
    var(--paper);
  padding: var(--guide-inset);
  color: var(--ink);
  box-shadow: 0 24px 60px #080a0888, inset 18px 0 35px #5b4d3520;
  scrollbar-color: #81765f #d9cdae;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .42s ease, visibility 0s;
}

.guide-tab { position: absolute; z-index: 7; top: 28px; left: var(--guide-width); display: grid; place-items: center; width: 38px; min-height: 48px; overflow: hidden; border: 1px solid #625845; border-left: 0; border-radius: 0 5px 5px 0; background: #e7dcc3; box-shadow: 2px 2px 0 #a39578, 0 6px 14px #080a0860; color: #2b2d28; cursor: pointer; transition: transform .5s cubic-bezier(.16, 1, .3, 1), background .3s ease, color .3s ease; will-change: transform; }
.guide-tab:active { box-shadow: inset 2px 2px 4px #aa9c81; }
.guide-tab-arrow, .guide-tab-icon { position: absolute; display: grid; place-items: center; transition: opacity .24s ease, transform .34s cubic-bezier(.16, 1, .3, 1); }
.guide-tab-arrow { font: 900 13px/1 Arial, sans-serif; }
.guide-tab-icon { gap: 1px; width: 27px; padding: 4px 2px 3px; border-radius: 2px; background: var(--guide-red); color: var(--cream); line-height: .75; opacity: 0; transform: scale(.62) rotate(-8deg); }
.guide-tab-icon b { font: 900 15px/1 "Arial Black", Impact, sans-serif; letter-spacing: -.08em; }
.guide-tab-icon i { font: 900 5px/1 Arial, sans-serif; font-style: normal; letter-spacing: .02em; }
.stage.guide-hidden .guide-tab { transform: translateX(calc(-1 * var(--guide-width))); background: #d9c9a7; }
.stage.guide-hidden .guide-tab-arrow { opacity: 0; transform: translateX(-9px) scale(.7); }
.stage.guide-hidden .guide-tab-icon { opacity: 1; transform: none; }

.guide-header { position: sticky; z-index: 3; top: calc(-1 * var(--guide-inset)); margin: calc(-1 * var(--guide-inset)) calc(-1 * var(--guide-inset)) 8px; padding: 12px var(--guide-inset) 10px; background: radial-gradient(circle at 18% 28%, #715f4215 0 1px, transparent 1px) 0 0 / 6px 6px, var(--paper); box-shadow: 0 5px 9px #5b4d3522; }
.guide-masthead { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; border-bottom: 3px double var(--ink); padding-bottom: 7px; }
.guide-logo { --tilt-x: 0deg; --tilt-y: 0deg; --shine-x: 50%; position: relative; display: grid; overflow: hidden; transform: perspective(280px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(-2deg); transform-style: preserve-3d; border-radius: 6px; background: linear-gradient(145deg, #d9483d, var(--guide-red) 58%, #9d241e); padding: 4px 7px 3px; box-shadow: inset 1px 1px 0 #ff9788, inset -2px -2px 0 #7e1e1a, 0 4px 0 #76211d, 2px 7px 10px #4e271c55; color: var(--cream); line-height: .78; text-align: center; transition: transform .18s ease-out, box-shadow .18s ease-out; will-change: transform; }
.guide-logo::after { position: absolute; inset: 0; background: radial-gradient(circle at var(--shine-x) 0%, #fff9e699 0 2%, #fff9e642 18%, transparent 44%); content: ""; opacity: .28; pointer-events: none; transition: opacity .18s ease; }
.guide-logo:hover { box-shadow: inset 1px 1px 0 #ffb6aa, inset -2px -2px 0 #7e1e1a, 0 5px 0 #76211d, 3px 10px 14px #4e271c77; }
.guide-logo:hover::after { opacity: .72; }
.guide-logo b { font: 900 24px/1 "Arial Black", Impact, sans-serif; letter-spacing: -.08em; }
.guide-logo span { font: 700 8px/1 Arial, sans-serif; letter-spacing: .04em; }
.guide-masthead > div:last-child { display: grid; gap: 2px; }
.guide-masthead strong { font: 900 clamp(19px, 1.7vw, 26px)/.95 "Arial Black", Impact, sans-serif; letter-spacing: -.04em; }
.guide-masthead span { font: 700 9px/1.2 Arial, sans-serif; }

.channel-tools { display: grid; gap: 5px; margin: 9px 0 0; }
.channel-tools-heading { display: block; width: 100%; grid-column: 1 / -1; color: #30312d; font: 700 11px Arial, sans-serif; letter-spacing: .06em; white-space: nowrap; }
.channel-tools-row { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; width: 100%; gap: 9px; }
.channel-tools input { width: 100%; min-height: 36px; border: 1px solid #514b3e; border-radius: 3px; background: #f1e8d4; color: #20221f; padding: 7px 9px; font: 14px Arial, sans-serif; }
.channel-tools input::placeholder { color: #686458; }
.guide-master-toggle { position: relative; min-width: 118px; min-height: 36px; border: 1px solid #5a5142; border-radius: 2px; background: linear-gradient(180deg, #d6ccb5, #9f957e); color: #34342f; padding: 7px 22px 7px 9px; box-shadow: inset 2px 2px 1px #f8efd9, inset -2px -2px 2px #756a56, 0 3px 0 #625947; cursor: pointer; font: 900 10px/1 "Courier New", monospace; letter-spacing: .02em; }
.guide-master-toggle:hover { filter: brightness(1.08); }
.guide-master-toggle:active, .guide-master-toggle.active { transform: translateY(2px); background: linear-gradient(180deg, #2f7942, #1a4d29); color: #f0ffed; box-shadow: inset 3px 3px 5px #12391e, inset -2px -2px 3px #4f9a60, 0 0 10px #41d75e7a; }
.guide-master-toggle.mixed { background: linear-gradient(180deg, #9c8139, #6f5a25); color: #fff4c7; box-shadow: inset 3px 3px 5px #493a18, 0 0 8px #ddbd4f70; }
.guide-master-toggle.active:not(:active) { transform: none; }
.guide-master-toggle i { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #372f28; box-shadow: inset 1px 1px 2px #17130f; }
.guide-master-toggle.active i { background: #78f58a; box-shadow: 0 0 7px #4bff68; }
.guide-master-toggle.mixed i { background: #ffe16f; box-shadow: 0 0 7px #ffd94d; }
.random-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.channels { display: grid; gap: 5px; }
.network { overflow: hidden; border: 1px solid #716956; border-radius: 3px; background: #eee4cd; box-shadow: 0 2px 0 #a39578; }
.network-summary { display: grid; grid-template-columns: minmax(0, 1fr) 36px; }
.network-single .network-summary { grid-template-columns: minmax(0, 1fr) 34px 36px; }
.network-header { display: grid; grid-template-columns: 74px minmax(0, 1fr) 18px; align-items: center; column-gap: 6px; width: 100%; min-height: 44px; border: 0; background: transparent; color: var(--ink); padding: 4px 6px; text-align: left; cursor: pointer; }
.network-header:hover, .network.open .network-header { background: #d8c9a7; }
.network-header:active { transform: translateY(1px); }
.network-single .network-header { grid-template-columns: 74px minmax(0, 1fr); }
.network-single .network-header:hover { background: linear-gradient(90deg, #f5ead1, #d8c9a7); box-shadow: inset 3px 0 0 var(--guide-red); }
.network-logo { display: grid; place-items: center; justify-self: center; width: 48px; height: 30px; transform: rotate(var(--logo-tilt, -1deg)); border: 2px solid var(--logo-ink, #ece6d7); border-radius: 3px; background: var(--logo-bg, #282b28); color: var(--logo-ink, #ece6d7); box-shadow: 2px 2px 0 #4d4638; font: 900 12px/1 "Arial Black", Impact, sans-serif; letter-spacing: -.05em; text-align: center; }
.network-logo.is-authentic { width: auto; max-width: 66px; height: 32px; border: 0; background: transparent; box-shadow: none; }
.network-logo.is-authentic img { display: block; width: auto; max-width: 66px; height: auto; max-height: 32px; object-fit: contain; }
.network-logo.is-authentic.network-logo-bet img { max-width: 54px; }
.network-logo.is-authentic.network-logo-cmt img { max-width: 45px; max-height: 34px; transform: scale(1.12); transform-origin: center; }
.network-logo.is-authentic.network-logo-playboy, .network-logo.is-authentic.network-logo-playboy img { width: 32px; height: 32px; }
.network-logo.is-authentic.network-logo-e { width: 30px; height: 26px; }
.network-logo.is-authentic.network-logo-e img { max-width: 28px; max-height: 26px; }
.network-logo.is-authentic.is-pair { grid-template-columns: 1fr 1fr; width: 64px; gap: 4px; }
.network-logo.is-authentic.is-pair img { max-width: 25px; }
.network-copy { min-width: 0; }
.network-copy strong { display: block; overflow-wrap: anywhere; font: 900 15px/1.05 "Arial Narrow", Arial, sans-serif; }
.network-chevron, .channel-disclosure { display: grid; place-items: center; color: transparent; font-size: 0; }
.network-chevron::before, .channel-disclosure::before { width: 0; height: 0; border-top: 8px solid #2b2d28; border-right: 6px solid transparent; border-left: 6px solid transparent; content: ""; filter: drop-shadow(0 1px 0 #fff8); }
.network-chevron::before, .channel-disclosure::before { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.network.open .network-chevron::before, .channel-disclosure[aria-expanded="true"]::before { transform: rotate(180deg); }

.network-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: .2; pointer-events: none; transition: grid-template-rows .3s cubic-bezier(.16, 1, .3, 1), opacity .22s ease, visibility 0s linear .3s; }
.network.open .network-panel { grid-template-rows: 1fr; visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s, 0s, 0s; }
.network-list { min-height: 0; overflow: hidden; }
.network-channel { border-top: 1px solid #9c9178; }
.network-single-channel { border-top: 1px solid #9c9178; }
.channel-summary { display: grid; grid-template-columns: minmax(0, 1fr) 34px 44px; align-items: stretch; }
.channel { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; min-height: 38px; border: 0; background: #f2e9d5; color: #1d1f1c; padding: 4px 9px; text-align: left; cursor: pointer; transition: transform .18s cubic-bezier(.16, 1, .3, 1), background .18s ease, box-shadow .18s ease; }
.channel:hover { z-index: 1; transform: translateX(3px); background: linear-gradient(90deg, #fff6df, #ece0c6); box-shadow: inset 3px 0 0 var(--guide-red), 0 2px 5px #4d46382c; }
.channel.active { background: var(--phosphor-dark); color: #eaf9e8; }
.channel.active:hover { background: linear-gradient(90deg, #246d34, #174f25); box-shadow: inset 3px 0 0 #a5ffab, 0 2px 5px #173b2060; }
.channel:active { transform: translateY(1px); }
.channel-num { font: 900 17px/1 "Arial Narrow", Arial, sans-serif; }
.channel-name { min-width: 0; overflow: hidden; font: 900 14px/1.1 "Arial Narrow", Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.channel-name small { display: block; margin-top: 3px; color: #696457; font: 700 10px/1 Arial, sans-serif; }
.channel:hover .channel-name small, .channel.active .channel-name small { color: #badabd; }
.channel-disclosure { min-width: 0; border: 0; border-left: 1px solid #9c9178; background: #ebe0c8; cursor: pointer; transition: background .15s ease; }
.channel-disclosure:hover { background: #d8c9a7; }
.channel-program-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: .2; pointer-events: none; transition: grid-template-rows .3s cubic-bezier(.16, 1, .3, 1), opacity .22s ease, visibility 0s linear .3s; }
.network-channel.open .channel-program-panel { grid-template-rows: 1fr; visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s, 0s, 0s; }
.channel-program-list { min-height: 0; overflow: hidden; }
.channel-program { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: stretch; border-top: 1px dotted #aaa087; background: #e8ddc4; }
.channel-program > span { min-width: 0; padding: 6px 10px 6px 32px; }
.channel-program-copy.has-mark { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 7px; align-items: center; padding-left: 8px; }
.channel-program-copy.has-mark strong, .channel-program-copy.has-mark small { grid-column: 2; }
.channel-program-mark { grid-row: 1 / span 2; width: 100%; max-height: 28px; object-fit: contain; }
.channel-program strong, .channel-program small { display: block; }
.channel-program strong { overflow: hidden; font: 800 12px/1.15 "Arial Narrow", Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.channel-program small { margin-top: 3px; color: #6c6659; font: 700 9px/1 "Courier New", monospace; }
.random-toggle { position: relative; display: grid; place-items: center; border-left: 1px solid #9c9178; background: #e4d8bd; cursor: pointer; }
.selector-switch { position: relative; display: grid; place-items: center; width: 25px; height: 22px; transform: translateY(1px); border: 1px solid #665f52; border-radius: 2px; background: linear-gradient(180deg, #8d8779, #afa795); box-shadow: inset 2px 2px 4px #5e594e, inset -1px -1px 2px #d8cfba, 0 3px 0 #726957; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.selector-switch::before { position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #4b443a; box-shadow: inset 0 1px 1px #26231f; content: ""; }
.random-toggle input:checked + .selector-switch { transform: translateY(2px); border-color: #1d5428; background: linear-gradient(180deg, #327542, #245c32); color: #f0faeb; box-shadow: inset 3px 3px 5px #173b20, inset -1px -1px 2px #56a366, 0 0 10px #42d45e8c; }
.random-toggle input:checked + .selector-switch::before { background: #78f58a; box-shadow: 0 0 7px #4bff68; }
.random-toggle input:indeterminate + .selector-switch { border-color: #826824; background: linear-gradient(180deg, #9c8139, #6f5a25); color: #fff4c7; box-shadow: inset 3px 3px 5px #493a18, 0 0 8px #ddbd4f70; }
.random-toggle input:indeterminate + .selector-switch::before { background: #ffe16f; box-shadow: 0 0 7px #ffd94d; }
.random-toggle input:focus-visible + .selector-switch { outline: 3px solid #285b34; outline-offset: 2px; }
.network[data-network="commercials"] { border-color: #4e6972; background: #dbe5e3; box-shadow: 0 2px 0 #738b8f; }
.network[data-network="commercials"] > .network-summary { background: linear-gradient(105deg, #426b79, #294b58 72%, #20363d); }
.network[data-network="commercials"] > .network-summary .network-header { min-height: 38px; color: #f4f7ef; }
.network[data-network="commercials"] > .network-summary .network-header:hover,
.network[data-network="commercials"].open > .network-summary .network-header { background: #557b87; }
.network[data-network="commercials"] > .network-summary .network-chevron::before { border-top-color: #f4f7ef; filter: drop-shadow(0 1px 0 #0008); }
.network[data-network="commercials"] > .network-summary .random-toggle { border-left-color: #6f8c94; background: #2a4650; }
.guide-empty { margin: 18px 2px; font: 700 12px Arial, sans-serif; }

/* CRT */
.tv-wrap { position: sticky; top: 12px; width: 100%; min-width: 0; will-change: transform; }
.photo-tv { position: relative; aspect-ratio: 3 / 2; filter: drop-shadow(12px 24px 22px #070907aa); }
.tv-photo-frame { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.screen { position: absolute; z-index: 1; top: 9.6%; left: 14.1%; overflow: hidden; width: 72.4%; height: 68.5%; border-radius: 10% / 9%; background: #0d100e; box-shadow: inset 0 0 38px #080908; }
.screen::after { position: absolute; z-index: 5; inset: 0; opacity: 0; background: repeating-linear-gradient(0deg, #e1e4dd 0 1px, #1d211e 1px 3px), repeating-linear-gradient(90deg, #b2b7b0 0 2px, #454c47 2px 5px); content: ""; mix-blend-mode: screen; pointer-events: none; }
.screen.fuzzing::after { animation: crt-fuzz .36s steps(3, end); }
.screen.playboy-scramble::before { position: absolute; z-index: 4; inset: -6% -10%; opacity: .88; background: repeating-linear-gradient(0deg, #020202f2 0 4%, #071419d9 4% 7%, transparent 7% 10%, #020202e8 10% 14%, transparent 14% 19%), repeating-linear-gradient(0deg, transparent 0 2px, #39dfffad 2px 5px, #ff285ab0 5px 8px, #ffe9578c 8px 11px, transparent 11px 15px), repeating-linear-gradient(90deg, #ea224bb5 0 13px, #25dfffaa 13px 27px, #3358e7a3 27px 41px, #f4d33f9c 41px 52px, #050505c7 52px 68px); background-size: 100% 100%, 100% 23px, 83px 100%; background-blend-mode: multiply, screen, screen; mix-blend-mode: screen; animation: playboy-scramble .72s steps(1, end) infinite; content: ""; pointer-events: none; }
iframe { display: block; width: 100%; height: 100%; border: 0; }
iframe#player { pointer-events: none; }
.scanlines, .screen-glow, .screen-status { position: absolute; inset: 0; pointer-events: none; }
.scanlines { z-index: 3; opacity: .48; background: repeating-linear-gradient(0deg, transparent 0 3px, #12151288 4px 5px); mix-blend-mode: multiply; }
.screen-glow { z-index: 4; background: radial-gradient(ellipse at center, transparent 53%, #080a088f 100%); box-shadow: inset 0 0 35px #b6ffc51d; }
.screen-status { z-index: 1; display: grid; place-content: center; gap: 7px; overflow: hidden; background-color: #777; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0 0 .2 .8 1 1'/%3E%3CfeFuncG type='discrete' tableValues='0 0 .2 .8 1 1'/%3E%3CfeFuncB type='discrete' tableValues='0 0 .2 .8 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; color: var(--cream); filter: grayscale(1) contrast(3.2); text-align: center; animation: tuning-static .1s steps(2, end) infinite; transition: opacity .3s ease; }
.screen-status::after { position: absolute; inset: -12% 0; opacity: .62; background: repeating-linear-gradient(0deg, transparent 0 18%, #080908b8 19% 24%, transparent 25% 42%); mix-blend-mode: multiply; animation: tuning-roll .72s linear infinite; content: ""; }
.screen-status.hidden { opacity: 0; animation-play-state: paused; }
.screen-status.hidden::after { animation-play-state: paused; }
.channel-osd { position: absolute; z-index: 6; top: 6%; right: 5%; display: grid; justify-items: end; max-width: 82%; transform: translateY(-5px); opacity: 0; color: var(--phosphor); pointer-events: none; text-align: right; text-shadow: 0 0 5px #35d052, 2px 2px 0 #102515; transition: opacity .2s ease, transform .2s ease; }
.channel-osd strong { font: 900 clamp(20px, 3.4vw, 49px)/1 "Courier New", monospace; letter-spacing: .04em; }
.channel-osd span { max-width: 100%; margin-top: 3px; overflow: hidden; font: 900 clamp(9px, 1.25vw, 17px)/1.1 "Courier New", monospace; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.channel-osd.visible { transform: none; opacity: 1; }
.network-bug { position: absolute; z-index: 6; bottom: 6%; left: 5%; display: flex; align-items: center; justify-content: center; height: 39px; opacity: .78; padding: 0; color: #f4eddb; filter: drop-shadow(1px 2px 2px #000c); font: 900 8px/1 "Arial Black", Impact, sans-serif; pointer-events: none; }
.network-bug img { display: block; width: auto; max-width: 72px; height: 100%; object-fit: contain; }
.network-bug img + img { max-width: 22px; }

.photo-controls { position: relative; display: grid; gap: 8px; margin: clamp(8px, 1vw, 15px) auto 0; width: min(92%, 820px); overflow: hidden; border: 1px solid #080a08; border-radius: 2px 2px 5px 5px; background: linear-gradient(180deg, #3d423e 0 21%, #242925 22% 100%); padding: 12px 14px 14px; box-shadow: inset 0 1px 0 #747b71, inset 0 -7px 12px #101310, 0 12px 25px #080a0877; }
.photo-controls::after { position: absolute; right: 10%; bottom: 7px; left: 10%; height: 3px; border-radius: 50%; background: #111411; box-shadow: 0 2px 3px #596058; content: ""; }
.cablebox-vents { display: flex; justify-content: center; gap: 7px; height: 10px; }
.cablebox-vents i { width: 27px; border-radius: 1px; background: repeating-linear-gradient(90deg, #101311 0 3px, #454b45 3px 5px); box-shadow: 0 1px 0 #737a70; }
.cablebox-display { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; min-height: 48px; gap: 10px; border: 2px solid #151916; border-radius: 1px; background: linear-gradient(105deg, #120d0d, #302424 58%, #191516); padding: 5px 12px; box-shadow: inset 0 0 16px #050606, 0 1px 0 #5e655e; }
.display-label, .cablebox-brand { color: #8b7d76; font: 900 8px/1 "Courier New", monospace; letter-spacing: .12em; }
.cablebox-brand { justify-self: end; color: #777a74; font-family: "Arial Narrow", Arial, sans-serif; letter-spacing: .03em; }
.cablebox-now-playing { min-width: 0; overflow: hidden; color: var(--phosphor); font: 900 13px/1.15 "Courier New", monospace; text-shadow: 0 0 7px #39c653; }
.cablebox-now-playing strong { display: inline-flex; min-width: max-content; gap: 9px; white-space: nowrap; }
.cablebox-now-playing.scrolling strong { padding-left: 100%; animation: now-playing-scroll 12s linear infinite; }
.cablebox-now-playing .now-playing-video { color: #c7dfc4; }
.cablebox-now-playing .now-playing-video:not(:empty)::before { content: "/ "; }
.cablebox-buttons { display: grid; grid-template-columns: minmax(82px, 110px) repeat(3, minmax(38px, 58px)) minmax(48px, 68px) minmax(100px, 130px); justify-content: center; gap: 8px; padding-bottom: 5px; }
.cablebox-buttons.playboy-controls .scramble-toggle { grid-column: 1 / -1; justify-self: end; width: 92px; }
.photo-controls button { min-width: 0; border: 1px solid #0c0e0d; border-radius: 5px; background: linear-gradient(145deg, #626962 0%, #444b45 42%, #292f2b 72%, #1b201d 100%); color: #f0eddf; box-shadow: inset 1px 1px 0 #899187, inset -3px -4px 4px #111512, 0 6px 0 #090c0a, 0 9px 13px #0507059c; cursor: pointer; font-family: "Courier New", monospace; transition: transform .14s cubic-bezier(.2, .8, .2, 1), box-shadow .14s ease, filter .14s ease; }
.photo-controls button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.photo-controls button:active { transform: translateY(5px); filter: brightness(.82); box-shadow: inset 4px 5px 7px #111512, inset -1px -1px 1px #697069, 0 1px 0 #090c0a, 0 2px 4px #05070580; }
.photo-controls button:disabled { opacity: .42; cursor: default; transform: none; }
.channel-step { display: grid; grid-template-columns: minmax(0, 1fr); place-items: start center; min-height: 46px; padding: 5px 2px 2px; }
.channel-step .control-arrow { position: relative; display: block; width: min(55px, 100%); aspect-ratio: 55 / 38; transition: filter .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1); }
.channel-step .control-arrow::before, .channel-step .control-arrow::after { position: absolute; top: calc(100% / 38); width: calc(100% * 29 / 55); height: calc(100% * 36 / 38); clip-path: polygon(100% 50%, 0 0, 0 100%); background: linear-gradient(145deg, #c2cbc0 0%, #748071 30%, #3e493e 66%, #1a211c 100%); content: ""; filter: drop-shadow(0 5px 0 #0b0e0c) drop-shadow(1px 0 0 #dbe4d8); }
.channel-step .control-arrow::before { left: 0; }
.channel-step .control-arrow::after { left: calc(100% * 20 / 55); }
.channel-back .control-arrow { transform: scaleX(-1); }
.channel-step:hover .control-arrow { filter: brightness(1.13); }
.photo-controls .channel-step:active { transform: translateY(5px); }
.channel-step:active .control-arrow { filter: brightness(.72); transform: translateY(4px); }
.channel-back:active .control-arrow { transform: scaleX(-1) translateY(4px); }
.channel-step small { margin-top: -1px; color: #b9beb6; font-size: 8px; font-weight: 700; }
.play-stop-button { display: grid; grid-template-columns: minmax(0, 1fr); place-items: start center; min-height: 46px; padding: 5px 2px 2px; }
.play-stop-button .control-play-symbol { display: block; width: min(39px, 100%); aspect-ratio: 39 / 38; clip-path: polygon(100% 50%, 0 0, 0 100%); background: linear-gradient(145deg, #c5cec0, #758072 42%, #3c463d 78%, #1a211c); filter: drop-shadow(0 5px 0 #0b0e0c) drop-shadow(1px 0 0 #e1e9dc); transition: clip-path .18s cubic-bezier(.16, 1, .3, 1), filter .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1); }
.play-stop-button:hover .control-play-symbol { filter: drop-shadow(0 5px 0 #0b0e0c) drop-shadow(1px 0 0 #f4fff0) brightness(1.12); }
.play-stop-button.playing .control-play-symbol { width: min(29px, 100%); aspect-ratio: 1; margin: 4px 0; clip-path: inset(0); background: linear-gradient(145deg, #d1dbca, #708069 43%, #2e3b30); }
.photo-controls .play-stop-button:active { transform: translateY(5px); }
.play-stop-button:active .control-play-symbol { transform: translateY(4px); filter: drop-shadow(0 1px 0 #0b0e0c) brightness(.72); }
.play-stop-button small { margin-top: -1px; color: #b9beb6; font-size: 8px; font-weight: 700; }
.photo-controls .random-button { display: grid; place-items: center; min-height: 48px; border-radius: 999px; padding: 9px 18px; }
.random-button span { font: 900 clamp(10px, 1vw, 15px)/1 "Arial Black", Impact, sans-serif; letter-spacing: 0; white-space: nowrap; }
.photo-controls #random-channel.active { transform: translateY(2px); border-color: #2b7840; background: linear-gradient(180deg, #22572e, #173b20); color: #e8ffe9; box-shadow: inset 4px 4px 8px #0f2a16, inset -2px -2px 5px #3b8a4c, 0 0 22px #4ce4699c; }
.photo-controls .seek-toggle, .photo-controls .scramble-toggle { position: relative; display: grid; place-items: center; min-height: 45px; padding: 5px 9px; }
.photo-controls .scramble-toggle[hidden] { display: none; }
.seek-toggle span, .scramble-toggle span { font: 900 11px/1 "Courier New", monospace; letter-spacing: .05em; }
.seek-toggle i, .scramble-toggle i { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #242824; box-shadow: inset 1px 1px 2px #090505; }
.photo-controls .seek-toggle.active { transform: translateY(2px); border-color: #2b7840; background: linear-gradient(180deg, #22572e, #173b20); color: #e8ffe9; box-shadow: inset 4px 4px 7px #0f2a16, inset -2px -2px 4px #3b8a4c, 0 0 12px #4ce46980; }
.seek-toggle.active i { background: #78f58a; box-shadow: 0 0 7px #4bff68; }
.photo-controls .scramble-toggle.active { transform: translateY(2px); background: linear-gradient(180deg, #5a3a20, #332012); color: #fff3d0; box-shadow: inset 4px 4px 7px #21130b, inset -2px -2px 4px #8e6034, 0 0 12px #f08d326e; }
.scramble-toggle.active i { background: #ff9b44; box-shadow: 0 0 7px #ff8a29, inset 1px 1px 1px #ffe1b8; }
.now-playing-video:empty { display: none; }
.current-random-toggle { position: relative; min-width: 100px; min-height: 44px; border: 1px solid #0c0e0d; border-radius: 2px; background: linear-gradient(180deg, #646a63, #292e2a); color: #f0eddf; padding: 5px 15px 5px 7px; box-shadow: inset 2px 2px 1px #828982, inset -2px -2px 2px #151916, 0 3px 0 #0c0e0d; cursor: pointer; font: 900 8px/1 "Courier New", monospace; white-space: nowrap; }
.current-random-toggle i { position: absolute; top: 6px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #292c29; }
.current-random-toggle.active { transform: translateY(2px); border-color: #2b7840; background: linear-gradient(180deg, #22572e, #173b20); box-shadow: inset 3px 3px 5px #0f2a16, 0 0 9px #4ce46972; }
.current-random-toggle.active i { background: #78f58a; box-shadow: 0 0 6px #4bff68; }
.current-random-toggle.mixed { background: linear-gradient(180deg, #78672f, #4f421c); color: #fff1b3; }
.current-random-toggle.mixed i { background: #ffe16f; box-shadow: 0 0 6px #ffd94d; }
.help-tooltip { position: fixed; z-index: 20; top: 0; left: 0; width: max-content; max-width: min(280px, calc(100vw - 16px)); transform-origin: 50% 100%; opacity: 0; border: 1px solid #718071; border-radius: 3px; background: #111713f2; padding: 8px 10px; box-shadow: 0 8px 24px #050705bb, inset 0 1px 0 #697169; color: #eff4e8; font: 700 12px/1.3 Arial, sans-serif; pointer-events: none; transition: opacity .16s ease, filter .16s ease; filter: blur(2px); }
.help-tooltip.visible { opacity: 1; filter: none; }
.tv-caption { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px 18px; margin: 15px 5% 0; font: 700 10px "Courier New", monospace; letter-spacing: .08em; }
.tv-caption a, .tv-caption summary { color: var(--phosphor); }
.tv-caption a { justify-self: end; padding: 8px 0; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cast-help summary { min-height: 44px; border: 1px solid #596159; border-radius: 1px; background: linear-gradient(180deg, #343a35, #202520); padding: 6px 10px; box-shadow: inset 1px 1px 0 #697169, inset -1px -1px 0 #101310, 0 3px 0 #0c0e0c; cursor: pointer; font: inherit; letter-spacing: inherit; }
.cast-help[open] summary { transform: translateY(1px); background: #173b20; box-shadow: inset 2px 2px 4px #0c2312; }
.cast-help { position: relative; }
.cast-help summary { display: grid; place-items: center; list-style: none; }
.cast-help summary::-webkit-details-marker { display: none; }
.cast-help summary { grid-template-columns: auto auto; gap: 12px; }
.cast-mark, .airplay-mark { display: inline-flex; align-items: center; color: var(--phosphor); }
.cast-mark svg, .airplay-mark svg { width: 24px; height: 24px; fill: currentColor; }
.youtube-link { display: inline-grid; place-items: center; width: 44px; min-height: 44px; opacity: .55; color: var(--phosphor); text-decoration: none; transition: opacity .18s ease, transform .18s ease; }
.youtube-link svg { display: block; width: 30px; height: 22px; fill: currentColor; }
.youtube-link:hover { opacity: .9; transform: translateY(-1px); }
.cast-card { position: absolute; z-index: 8; top: calc(100% + 8px); left: 0; display: grid; width: min(410px, 76vw); gap: 8px; border: 1px solid #5d655d; border-radius: 4px; background: #111713; padding: 13px; box-shadow: 0 14px 32px #050705cc; color: #e7eadf; font: 12px/1.4 Arial, sans-serif; letter-spacing: 0; }
.cast-card strong { color: var(--phosphor); font: 900 11px/1 "Courier New", monospace; letter-spacing: .08em; }
.cast-card small { color: #adb4ac; font-size: 11px; }
.cast-card em { color: var(--phosphor); font-style: normal; }

.photo-tv, .screen, #player, .tv-photo-frame, .guide-tab { backface-visibility: hidden; transform: translateZ(0); }

.network-header:focus-visible, .channel:focus-visible, .channel-disclosure:focus-visible, .photo-controls button:focus-visible, .channel-tools input:focus-visible, .tv-caption a:focus-visible, .guide-tab:focus-visible, .cast-help summary:focus-visible { outline: 3px solid var(--phosphor); outline-offset: 2px; }

@keyframes crt-fuzz {
  0% { opacity: .9; transform: translateX(-1%); }
  35% { opacity: .5; transform: translateX(1%); }
  70% { opacity: .8; transform: translateY(-1%); }
  100% { opacity: 0; transform: none; }
}

@keyframes tuning-static {
  0% { background-position: 0 0; transform: scale(1.02); }
  33% { background-position: 47px -83px; transform: scale(1.04) translateX(-1%); }
  66% { background-position: -91px 61px; transform: scale(1.03) translateX(1%); }
  100% { background-position: 123px 97px; transform: scale(1.02); }
}

@keyframes playboy-scramble {
  0%, 13% { opacity: .92; background-position: 0 0, 0 0, 0 0; clip-path: polygon(0 0,100% 0,100% 16%,8% 16%,8% 28%,100% 28%,100% 51%,0 51%,0 67%,91% 67%,91% 82%,0 82%); transform: translateX(-3%) skewX(-2deg); }
  14%, 31% { opacity: .7; background-position: 0 17px, 0 -11px, 29px 0; clip-path: polygon(0 0,100% 0,100% 11%,14% 11%,14% 38%,100% 38%,100% 58%,4% 58%,4% 73%,100% 73%,100% 100%,0 100%); transform: translateX(5%) skewX(3deg); }
  32%, 42% { opacity: .18; background-position: 0 -9px, 0 23px, -37px 0; clip-path: inset(0); transform: translateX(-1%); }
  43%, 65% { opacity: .86; background-position: 0 31px, 0 7px, 44px 0; clip-path: polygon(0 0,100% 0,100% 22%,0 22%,0 34%,89% 34%,89% 49%,0 49%,0 76%,100% 76%,100% 91%,6% 91%,6% 100%,0 100%); transform: translateX(-6%) skewX(-4deg); }
  66%, 72% { opacity: .1; background-position: 0 0, 0 -27px, 8px 0; clip-path: inset(0); transform: none; }
  73%, 100% { opacity: .94; background-position: 0 -19px, 0 38px, -21px 0; clip-path: polygon(0 0,100% 0,100% 14%,5% 14%,5% 43%,100% 43%,100% 62%,12% 62%,12% 77%,100% 77%,100% 100%,0 100%); transform: translateX(4%) skewX(2deg); }
}

@keyframes tuning-roll {
  to { transform: translateY(42%); }
}
@keyframes now-playing-scroll {
  to { transform: translateX(-100%); }
}

@media (max-width: 760px) {
  .stage, .stage.guide-hidden { grid-template-columns: 1fr; gap: 13px; }
  .channel-bar {
    max-height: min(72dvh, 900px);
    overflow: auto;
    clip-path: inset(0 0 0 0);
    transition: max-height .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1), clip-path .5s cubic-bezier(.16, 1, .3, 1), opacity .42s ease, padding .5s cubic-bezier(.16, 1, .3, 1), visibility 0s;
  }
  .stage.guide-hidden .channel-bar {
    max-height: 0;
    transform: translateY(-18px);
    clip-path: inset(0 0 100% 0);
    padding-block: 0;
    visibility: hidden;
    transition: max-height .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1), clip-path .5s cubic-bezier(.16, 1, .3, 1), opacity .42s ease, padding .5s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .5s;
  }
  .guide-tab, .stage.guide-hidden .guide-tab { position: relative; top: auto; right: auto; left: auto; order: -1; justify-self: end; margin-bottom: -13px; transform: translateY(13px); border: 1px solid #625845; border-radius: 5px 5px 0 0; }
  .tv-wrap { position: relative; z-index: 4; top: auto; order: -2; width: min(100%, 1040px); margin-inline: auto; padding-top: 0; background: none; }
  .channel-bar { position: relative; top: auto; width: min(100%, 900px); margin-inline: auto; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .stage { --guide-width: clamp(280px, 38vw, 320px); gap: 12px; }
  .guide-header { padding-inline: 12px; }
  .guide-masthead strong { font-size: 18px; }
  .guide-master-toggle { width: 100%; }
  .network-header { grid-template-columns: 68px minmax(0, 1fr) 18px; padding-inline: 5px; }
  .network-single .network-header { grid-template-columns: 68px minmax(0, 1fr); }
  .network-logo.is-authentic img { max-width: 62px; }
  .photo-controls { width: 100%; padding-inline: 7px; }
  .cablebox-buttons { grid-template-columns: minmax(72px, 1.2fr) repeat(3, 44px) minmax(45px, .8fr) minmax(96px, 1fr); gap: 4px; }
  .channel-step .control-arrow { width: min(37px, 100%); }
  .play-stop-button .control-play-symbol { width: min(28px, 100%); }
  .photo-controls .random-button, .channel-step, .play-stop-button, .photo-controls .seek-toggle, .current-random-toggle { min-height: 44px; padding-inline: 6px; }
  .channel-step, .play-stop-button { padding-inline: 2px; }
  .channel-step small, .play-stop-button small, .seek-toggle span, .current-random-toggle { font-size: 10px; }
  .random-button span { font-size: 12px; }
  .scramble-toggle span { font-size: 9px; }
}

@media (max-width: 680px) {
  .console { padding: 8px; }
  .stage { gap: 10px; }
  .photo-controls { gap: 5px; width: 100%; margin-top: 8px; padding: 6px 7px 9px; }
  .cablebox-vents { display: none; }
  .cablebox-display { grid-template-areas: "label brand" "now now"; grid-template-columns: minmax(0, 1fr) auto; min-height: 62px; gap: 4px 8px; padding: 7px; }
  .display-label { grid-area: label; }
  .cablebox-brand { grid-area: brand; }
  .cablebox-now-playing { grid-area: now; }
  .display-label, .cablebox-brand { font-size: 10px; }
  .cablebox-now-playing { font-size: 14px; }
  .cablebox-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .cablebox-buttons .random-button { grid-area: 1 / 1; min-height: 46px; padding-inline: 6px; }
  .cablebox-buttons .channel-back { grid-area: 1 / 2; min-height: 46px; }
  .cablebox-buttons .play-stop-button { grid-area: 1 / 3; min-height: 46px; }
  .cablebox-buttons .channel-next { grid-area: 1 / 4; min-height: 46px; }
  .cablebox-buttons .seek-toggle { grid-area: 2 / 1 / 3 / 3; min-height: 46px; }
  .cablebox-buttons .current-random-toggle { grid-area: 2 / 3 / 3 / 5; min-height: 46px; }
  .cablebox-buttons .current-random-toggle { min-width: 0; padding-inline: 8px 18px; font-size: 12px; }
  .random-button span, .channel-step small, .play-stop-button small, .seek-toggle span, .current-random-toggle { font-size: 12px; }
  .scramble-toggle span { font-size: 10px; }
  .network-bug { height: 30px; padding: 0; }
  .tv-caption { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 8px 0 0; }
  .tv-caption a { grid-column: auto; justify-self: end; display: inline-grid; width: 44px; min-height: 44px; padding: 0; }
  .cast-help { justify-self: start; }
  .cast-help summary { width: 64px; min-height: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding-inline: 6px; }
  .cast-mark svg, .airplay-mark svg { width: 20px; height: 20px; }
  .cast-card { right: 0; left: auto; }
  .channel-bar { --guide-inset: 12px; }
  .guide-header { padding-block: 10px 9px; }
  .guide-masthead strong { font-size: 20px; }
  .channel-tools input, .guide-master-toggle { min-height: 44px; }
  .guide-master-toggle { min-width: 96px; padding-inline: 8px 18px; }
  .channel, .network[data-network="commercials"] > .network-summary .network-header { min-height: 44px; }
  .network-header { grid-template-columns: 68px minmax(0, 1fr) 18px; column-gap: 6px; }
  .network-single .network-header { grid-template-columns: 68px minmax(0, 1fr); }
  .network-logo { width: 45px; }
  .network-logo.is-authentic { max-width: 62px; }
  .network-logo.is-authentic img { max-width: 62px; max-height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .photo-controls .cablebox-now-playing strong { min-width: 0; display: block; padding-left: 0; white-space: normal; overflow-wrap: anywhere; }
  .screen.fuzzing::after { animation: none; opacity: 0; }
  .screen.playboy-scramble::before { animation: none; opacity: .45; transform: none; }
  .screen-status, .screen-status::after { animation: none; transform: none; }
  .help-tooltip { transition: none; }
}

@media (hover: none) { .help-tooltip { display: none; } }