.clip-room{padding:clamp(1.25rem, 3vw, 2.5rem) var(--pad) clamp(2rem, 4vw, 3.5rem);background:var(--lime);position:relative;overflow:hidden}.clip-art{height:clamp(24rem,50vw,46rem);position:absolute;top:0;left:0;right:0}.clip-art-bg{object-fit:cover;object-position:center top;-webkit-mask-image:linear-gradient(#000 72%,#0000);mask-image:linear-gradient(#000 72%,#0000)}.clip-art-person{filter:drop-shadow(0 0 1.6rem #ffffdcb3);width:auto;height:clamp(30rem,54vw,52rem);position:absolute;top:1.25rem;right:clamp(1rem,6vw,7rem);-webkit-mask-image:linear-gradient(#000 44%,#0000 52%);mask-image:linear-gradient(#000 44%,#0000 52%)}.clip-title{flex-wrap:wrap;align-items:baseline;gap:.25rem 1.5rem;max-width:60%;margin-bottom:1rem;padding-top:clamp(.5rem,3vw,2.5rem);display:flex}.clip-title h1{font-size:clamp(3rem,10.5vw,11rem)}.clip-title p{margin:0;font-size:clamp(1.05rem,1.7vw,1.5rem);font-weight:700}.clip-title,.tv-filters,.tv-room,.clip-note{z-index:1;position:relative}.tv-filters{margin:0 calc(-1 * var(--pad)) clamp(1.25rem, 5vw, 5rem);padding:0 var(--pad) .3rem;scrollbar-width:none;gap:.5rem;display:flex;overflow-x:auto}.tv-filters button{border:var(--edge);color:var(--ink);cursor:pointer;font:inherit;background:#d4ff3fd1;border-radius:99px;flex:none;padding:.35em .9em;font-size:.9rem;font-weight:700}.tv-filters button:hover{background:#20101a1f}.tv-filters button[aria-pressed=true]{background:var(--ink);color:var(--lime)}.tv-room{grid-template-columns:minmax(0,1fr) minmax(19rem,25rem);align-items:start;gap:clamp(1rem,2vw,1.5rem);display:grid}.tv{border:clamp(8px, 1vw, 14px) solid var(--ink);background:var(--ink);border-radius:26px;overflow:hidden;box-shadow:10px 10px #20101a40}.tv-screen{aspect-ratio:16/9;background:#000;border-radius:14px;position:relative;overflow:hidden}.tv-screen iframe{border:0;width:100%;height:100%;display:block}.tv-poster{cursor:pointer;background:0 0;border:0;width:100%;height:100%;padding:0;display:block;position:relative}.tv-poster img{object-fit:cover;width:100%;height:100%;display:block}.tv-play{aspect-ratio:1;border:var(--edge);background:var(--lime);border-radius:50%;width:clamp(4rem,8vw,6.5rem);transition:transform .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tv-poster:hover .tv-play{transform:translate(-50%,-50%)scale(1.1)}.tv-play:after{content:"";border-style:solid;border-width:.9rem 0 .9rem 1.5rem;border-color:transparent transparent transparent var(--ink);position:absolute;top:50%;left:54%;transform:translate(-50%,-50%)}.tv-panel{color:var(--cream);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;padding:.9rem clamp(.5rem,1.2vw,1rem) .5rem;display:flex}.tv-now{flex:18rem;min-width:0}.tv-channel{color:var(--lime);font-family:var(--font-mono), monospace;font-size:.8rem;font-weight:700}.tv-now h2{overflow-wrap:anywhere;font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.1}.tv-now p{font-family:var(--font-mono), monospace;opacity:.8;margin:.25rem 0 0;font-size:.75rem}.tv-controls{gap:.5rem;display:flex}.tv-controls button{border:2px solid var(--cream);min-width:3rem;color:var(--cream);cursor:pointer;font:inherit;background:0 0;border-radius:12px;padding:.55em .8em;font-weight:700}.tv-controls button:hover:not(:disabled){background:var(--cream);color:var(--ink)}.tv-controls button:disabled{cursor:default;opacity:.35}.tv-controls .tv-random{border-color:var(--lime);background:var(--lime);color:var(--ink)}.tv-list{background:var(--ink);scrollbar-color:#fff4e84d transparent;scrollbar-width:thin;border-radius:20px;max-height:min(42rem,100svh - 11rem);margin:0;padding:.5rem;list-style:none;position:relative;overflow-y:auto}.tv-list button{width:100%;color:var(--cream);cursor:pointer;font:inherit;text-align:left;background:0 0;border:0;border-radius:12px;grid-template-columns:1.5rem 6.5rem minmax(0,1fr);align-items:center;gap:.6rem;padding:.45rem;display:grid}.tv-list button:hover{background:#fff4e81a}.tv-list button[aria-current=true]{background:var(--lime);color:var(--ink)}.tv-number{font-family:var(--font-mono), monospace;font-size:.75rem}.tv-list img{border-radius:7px;width:100%;height:auto;display:block}.tv-item{flex-direction:column;min-width:0;line-height:1.2;display:flex}.tv-item b{overflow-wrap:anywhere;font-size:.9em}.tv-item small{opacity:.75;margin-top:.15rem;font-size:.72em}.clip-note{max-width:48rem;margin:1.75rem 0 0;font-size:.85rem}@media (max-width:1000px){.tv-room{grid-template-columns:minmax(0,1fr)}.tv-list{max-height:26rem}.clip-art-person{display:none}.clip-title{max-width:none}}@media (prefers-reduced-motion:reduce){.tv-play{transition:none}}.tv-filters>.glide{z-index:1;background:var(--ink)}.tv-filters button{transition:background .15s}.tv-filters button span{z-index:2;position:relative}.tv-filters[data-glide] button[aria-pressed=true]{color:var(--ink);background:#d4ff3fd1}.tv-filters[data-glide] button[data-on]{color:var(--lime)}.tv-static{display:none}@media (prefers-reduced-motion:no-preference){.clip-art-bg{transform:translate(calc(var(--px,0) * .8rem), calc(var(--py,0) * .4rem)) scale(1.04);transition:transform .9s var(--room-ease)}.clip-art-person{translate:calc(var(--px,0) * -1.5rem) calc(var(--py,0) * -.5rem);transition:translate .9s var(--room-ease)}.tv-static{z-index:2;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.4 -0.8'/%3E%3C/filter%3E%3Crect width='240' height='240' fill='%23000'/%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");animation:.5s steps(8,end) forwards tv-snow;display:block;position:absolute;inset:0}@keyframes tv-snow{0%{filter:brightness(1.8);background-position:0 0}72%{opacity:1}to{filter:brightness(.9);opacity:0;background-position:160px -120px}}.tv-now{animation:tv-title var(--room-time) var(--room-ease) both}@keyframes tv-title{0%{opacity:0;translate:0 -.75rem}}@media (hover:hover){.tv-list button{transition:opacity .25s,background .15s}.tv-list img{z-index:1;transform-origin:0;transition:transform var(--room-time) var(--room-ease);position:relative}.tv-list button:hover img{transform:scale(1.18)}.tv-list:has(button:hover) button:not(:hover){opacity:.6}.tv{transition:translate var(--room-time) var(--room-ease)}.tv:hover{translate:-4px -4px}}@supports (animation-timeline:view()){.clip-note{animation:linear backwards rise;animation-timeline:view();animation-range:entry}}}
