/* Everside TV in the OS's grammar. The channel module (Codex's) draws the header, the player, the stage and the panel;
   this sheet gives them the shell's voice: ink and bone, hairlines, mono eyebrows, pixel type for numbers, the green
   pixel for live, chips at 30px with 4px corners, no blue. Scoped to the scene's host so it outranks the module's own
   rules wherever it loads; the module's file stays untouched. */
#rot .rc-channel { font-family: var(--sans); }
#rot .rc-channel button:focus-visible, #rot .rc-channel a:focus-visible, #rot .rc-channel video:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
/* the header: the network's name, the three intents as chips, the count in mono, the remote a chip */
#rot .rc-header { gap: 22px; min-height: 40px; }
#rot .rc-header h2 { gap: 10px; font: 600 15px/1 var(--sans); letter-spacing: -.01em; color: var(--bone); }
#rot .rc-pixel { width: 6px; height: 6px; border-radius: 1px; background: var(--g); box-shadow: 0 0 10px var(--g); animation: rt-tv-live 3s ease-in-out infinite; }
@keyframes rt-tv-live { 0%, 100% { box-shadow: 0 0 6px var(--g); } 50% { box-shadow: 0 0 14px var(--g); } }
#rot .rc-tv-word { display: inline-grid; place-items: center; padding: 3px 6px 2px; border: 1px solid rgba(255, 250, 248, .3); border-radius: 4px; font: 800 12px/1 'Doto', var(--mono); letter-spacing: .12em; color: var(--bone); }
#rot .rc-intents { gap: 6px; }
#rot .rc-intents button { min-height: 30px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); color: var(--bone-70); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: color .2s ease, border-color .2s ease, background .2s ease; }
#rot .rc-intents button:hover { color: var(--bone); border-color: rgba(255, 250, 248, .3); }
#rot .rc-intents button[aria-pressed="true"] { color: var(--bone); border-color: rgba(255, 250, 248, .55); background: rgba(21, 22, 26, .8); }
#rot .rc-header-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
#rot .rc-count { font: 700 12px/1 'Doto', var(--mono); letter-spacing: .06em; color: var(--bone-70); font-variant-numeric: tabular-nums; }
#rot .rc-remote, #rot .rc-preview, #rot .rc-makers { min-height: 30px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); color: var(--bone-70) !important; font: 500 10px/1 var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
#rot .rc-remote:hover, #rot .rc-preview:hover, #rot .rc-makers:hover { color: var(--bone) !important; border-color: rgba(255, 250, 248, .3); }
#rot .rc-remote svg, #rot .rc-remote img, #rot .rc-makers img { width: 13px; height: 13px; }
#rot .rc-preview::before { content: ''; width: 5px; height: 5px; border-radius: 1px; background: rgba(255, 250, 248, .3); }
/* the player: a screen behind a hairline, the channel bug in pixel type */
#rot .rc-viewer { border: 1px solid var(--line); border-radius: 8px; background: #08090c; box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .95); }
#rot .rc-channel-bug { border: 1px solid rgba(255, 250, 248, .14); border-radius: 4px; background: rgba(13, 15, 19, .82); color: var(--bone); padding: 6px 9px 4px; display: inline-flex; align-items: baseline; gap: 6px; }
#rot .rc-channel-bug > span { font: 500 8px/1 var(--mono); letter-spacing: .14em; color: var(--bone-45); }
#rot .rc-channel-bug > strong { font: 800 22px/1 'Doto', var(--mono); letter-spacing: .02em; }
#rot .rc-caption .rc-eyebrow, #rot .rc-eyebrow { font: 500 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
#rot .rc-piece-heading h3 { font: 600 clamp(17px, 1.9vw, 26px)/1.25 var(--sans); letter-spacing: -.02em; color: var(--bone); }
#rot .rc-creator-link small { color: var(--bone-45); font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
#rot .rc-creator-link .rc-avatar { border-radius: 5px; border: 1px solid rgba(255, 250, 248, .22); }
#rot .rc-follow { min-height: 30px; height: 30px; padding: 0 12px; border: 1px solid rgba(255, 250, 248, .28); border-radius: 4px; background: rgba(14, 15, 18, .35); color: var(--bone); font: 500 10px/1 var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; }
#rot .rc-follow[aria-pressed="true"] { border-color: var(--g); color: var(--bone); }
#rot .rc-follow[aria-pressed="true"]::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 1px; background: var(--g); box-shadow: 0 0 8px var(--g); margin-right: 8px; vertical-align: 1px; }
#rot .rc-world { border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); font: 500 10px/1 var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-70); min-height: 30px; padding: 0 10px; }
#rot .rc-provenance .prov-rail { color: var(--bone-45); }
/* the rail of actions beside the screen: small glyphs, mono words, bone when on */
#rot .rc-actions { gap: 6px; }
#rot .rc-actions button { gap: 6px; min-height: 48px; padding: 6px 0; color: var(--bone-45); font: 500 8.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; border-radius: 4px; transition: color .2s ease, background .2s ease; }
#rot .rc-actions button:hover { color: var(--bone); background: rgba(255, 250, 248, .04); }
#rot .rc-actions img, #rot .rc-actions svg { width: 20px; height: 20px; padding: 0; }
#rot .rc-actions [aria-pressed="true"], #rot .rc-actions [aria-expanded="true"] { color: var(--bone); }
#rot .rc-action-divider { margin: 4px 14px; background: var(--line); }
#rot .rc-footer { font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); }
#rot .rc-message { color: var(--bone-70); }
#rot .rc-up-next { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); color: var(--bone-70); font: inherit; }
#rot .rc-up-next:hover { color: var(--bone); border-color: rgba(255, 250, 248, .3); }
#rot .rc-up-next img, #rot .rc-up-next .rc-avatar { width: 18px; height: 18px; border-radius: 3px; }
/* the empty screen speaks like the OS */
#rot .rc-empty h3 { font: 600 24px/1.25 var(--sans); letter-spacing: -.02em; color: var(--bone); }
#rot .rc-empty p { color: var(--bone-70); }
/* the creator panel beside the screen */
#rot .rc-panel { border: 1px solid var(--line); border-radius: 8px; background: rgba(21, 22, 26, .96); }
#rot .rc-panel-head { border-bottom: 1px solid var(--line); }
#rot .rc-panel-head .rc-eyebrow::before { width: 5px; height: 5px; border-radius: 1px; box-shadow: 0 0 8px var(--g); }
#rot .rc-maker-heading h3 { font: 600 17px/1.25 var(--sans); }
#rot .rc-maker-heading .rc-avatar { border-radius: 5px; }
#rot .rc-bio { color: var(--bone-70); font-size: 13px; }
/* the stage: the selected channel, an ink slab with the number in pixel type */
#rot .rc-tv-stage { border: 1px solid var(--line); border-radius: 8px; background: rgba(21, 22, 26, .82); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .95); }
#rot .rc-tv-number > span { font: 500 9.5px/1.2 var(--mono); letter-spacing: .2em; color: var(--bone-45); }
#rot .rc-tv-number > strong { font: 800 clamp(56px, 6.2vw, 84px)/1 'Doto', var(--mono); letter-spacing: .02em; color: var(--bone); margin: 8px 0 18px 0; }
#rot .rc-tv-maker .rc-avatar { border-radius: 6px; border: 1px solid rgba(255, 250, 248, .3); }
#rot .rc-tv-maker .rc-eyebrow { font-size: 9px; color: var(--bone-45); }
#rot .rc-tv-maker h3 { font: 600 clamp(20px, 2vw, 26px)/1.15 var(--sans); letter-spacing: -.02em; color: var(--bone); }
#rot .rc-tv-bio { color: var(--bone-70); font: 400 13px/1.55 var(--sans); }
#rot .rc-tv-watch { border: 1px solid var(--bone); background: var(--bone); color: var(--ink) !important; padding: 0 14px; min-height: 34px; height: 34px; border-radius: 4px; font: 600 12px/1 var(--sans) !important; gap: 8px; }
#rot .rc-tv-watch:hover { background: #fff; }
#rot .rc-tv-profile { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--bone-70) !important; font: 500 10px/1 var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; }
#rot .rc-tv-profile:hover { color: var(--bone) !important; border-color: rgba(255, 250, 248, .3); }
#rot .rc-tv-companions > span { font: 500 8.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
#rot .rc-tv-screen { border: 1px solid rgba(255, 250, 248, .18); border-radius: 6px; box-shadow: 0 0 0 4px rgba(0, 0, 0, .25), 0 18px 40px -20px rgba(0, 0, 0, .9); }
#rot .rc-tv-screen-controls > span { font: 500 8.5px/1.3 var(--mono); letter-spacing: .14em; color: var(--bone-70); }
#rot .rc-tv-screen-controls button { border: 1px solid rgba(255, 250, 248, .28); border-radius: 4px; background: rgba(13, 15, 19, .8); color: var(--bone); font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; min-height: 28px; padding: 0 9px; }
#rot .rc-tv-preview-gate button { border: 1px solid rgba(255, 250, 248, .35); border-radius: 4px; background: rgba(13, 15, 19, .8); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone); }
#rot .rc-tv-program-info .rc-eyebrow { font-size: 9px; color: var(--bone-45); }
#rot .rc-tv-program-info h4 { font: 500 16px/1.35 var(--sans); color: var(--bone); }
#rot .rc-tv-pieces-toggle { border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); color: var(--bone-70) !important; font: 500 10px/1 var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; min-height: 30px; padding: 0 10px; }
#rot .rc-tv-pieces-toggle span { font: 700 12px/1 'Doto', var(--mono); color: var(--bone); }
#rot .rc-tv-like { border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); width: 48px; min-height: 48px; font: 500 8.5px/1 var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); }
#rot .rc-tv-like img { width: 18px; height: 18px; }
#rot .rc-tv-like[aria-pressed="true"] { color: var(--bone); border-color: rgba(240, 78, 78, .6); background: rgba(240, 78, 78, .08); }
#rot .rc-tv-pieces button { border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); }
#rot .rc-tv-pieces button[aria-pressed="true"] { border-color: rgba(255, 250, 248, .6); }
#rot .rc-tv-pieces button > span:last-child { font: 500 10px/1.35 var(--sans); color: var(--bone-70); }
@media (prefers-reduced-motion: reduce) { #rot .rc-pixel { animation: none; } }

/* ── the like: the scene answers. A wave from the heart through everything, each thing nudged away and back on its own
   delay; a light from the heart; the heart pops and throws pixels; the set in the dock blinks. ── */
#rot .rt-wave { animation: rt-wave .52s cubic-bezier(.2, .8, .2, 1) var(--wd, 0ms) both; }
@keyframes rt-wave { 0% { translate: 0 0; } 35% { translate: var(--wx, 0px) var(--wy, 0px); } 100% { translate: 0 0; } }
#rot .rt-pop { animation: rt-pop .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rt-pop { 0% { scale: 1; } 30% { scale: 1.3; } 62% { scale: .96; } 100% { scale: 1; } }
.rt-like-light { position: fixed; inset: 0; z-index: 60; pointer-events: none; mix-blend-mode: screen; opacity: 0; transform-origin: var(--cx, 50%) var(--cy, 50%); background: radial-gradient(460px 460px at var(--cx, 50%) var(--cy, 50%), rgba(255, 250, 248, .3), rgba(240, 78, 78, .07) 45%, transparent 70%); animation: rt-like-light .62s ease-out forwards; }
@keyframes rt-like-light { 0% { opacity: 0; transform: scale(.5); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }
.rt-like-burst { position: fixed; z-index: 61; width: 0; height: 0; pointer-events: none; }
.rt-like-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 1px; background: var(--bone); animation: rt-like-px .5s steps(6, end) forwards; }
.rt-like-burst i.r { background: var(--r); }
@keyframes rt-like-px { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)); } }
#dock svg rect.rt-blink { animation: rt-blink .45s steps(2, end) 2; }
@keyframes rt-blink { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { #rot .rt-wave, #rot .rt-pop, .rt-like-light, .rt-like-burst i, #dock svg rect.rt-blink { animation: none; } }

/* ── the starting screen: a creator's channel, opened like a Wii channel. Their newest piece full-bleed behind a scrim,
   the channel number in pixel type, the name, the mark and where they post, one line of now, Start and Back. ── */
#ostvstart { position: fixed; inset: 0; z-index: 40; background: #0E0F12; color: var(--bone); font-family: var(--sans); opacity: 0; transition: opacity .45s ease; }
#ostvstart.on { opacity: 1; }
#ostvstart.off { opacity: 0; transition-duration: .42s; }
#ostvstart .ts-art { position: absolute; inset: 0; overflow: hidden; }
#ostvstart .ts-art img, #ostvstart .ts-art video { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; filter: saturate(.9) brightness(.82); transform: scale(1.05); animation: ts-drift 14s ease-out forwards; }
#ostvstart .ts-art video { z-index: 1; }
@keyframes ts-drift { to { transform: scale(1); } }
#ostvstart .ts-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(14, 15, 18, .97) 0, rgba(14, 15, 18, .72) 26%, rgba(14, 15, 18, .12) 56%, rgba(14, 15, 18, .38) 100%); }
#ostvstart .ts-top, #ostvstart .ts-body { position: absolute; left: 48px; right: 48px; z-index: 3; opacity: 0; transform: translateY(10px); transition: opacity .5s ease .4s, transform .6s var(--os-settle, cubic-bezier(.2, .8, .2, 1)) .4s; }
#ostvstart .ts-top { top: 34px; display: flex; justify-content: space-between; align-items: flex-start; transition-delay: .5s; }
#ostvstart.on .ts-top, #ostvstart.on .ts-body { opacity: 1; transform: none; }
#ostvstart.going .ts-top, #ostvstart.going .ts-body { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .35s ease; }
#ostvstart .ts-ch { display: grid; gap: 8px; }
#ostvstart .ts-ch small { font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--bone-45); }
#ostvstart .ts-ch b { font: 800 clamp(48px, 6vw, 96px)/1 'Doto', var(--mono); letter-spacing: .02em; color: var(--bone); }
#ostvstart .ts-esc { display: inline-flex; align-items: center; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
#ostvstart kbd { border: 1px solid var(--line); border-radius: 3px; padding: 3px 5px; color: var(--bone-70); font: 500 10px/1 var(--mono); letter-spacing: .06em; }
#ostvstart .ts-body { bottom: 64px; display: grid; grid-template-columns: 64px minmax(0, 760px); gap: 16px 18px; align-items: end; }
#ostvstart .ts-ava { width: 64px; height: 64px; border-radius: 8px; border: 1px solid rgba(255, 250, 248, .35); object-fit: cover; background: #1b1c21; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .9); display: grid; place-items: center; font: 700 26px/1 'Doto', var(--mono); color: var(--bone); }
#ostvstart .ts-id { display: grid; gap: 10px; min-width: 0; }
#ostvstart .ts-eyebrow, #ostvstart .ts-now { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-70); }
#ostvstart .ts-now { color: var(--bone-45); }
#ostvstart .px { width: 6px; height: 6px; border-radius: 1px; background: var(--bone-45); flex: none; }
#ostvstart .px.g { background: var(--g); box-shadow: 0 0 8px var(--g); } #ostvstart .px.bone { background: var(--bone); } #ostvstart .px.dim { background: rgba(255, 250, 248, .25); }
#ostvstart .ts-name { margin: 0; font: 700 clamp(30px, 4vw, 56px)/1.02 var(--sans); letter-spacing: -.03em; color: var(--bone); overflow-wrap: anywhere; }
#ostvstart .ts-bio { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--bone-70); max-width: 64ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ostvstart .ts-actions { grid-column: 2; display: flex; align-items: center; gap: 10px; }
#ostvstart .ts-start { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border: 1px solid var(--bone); border-radius: 4px; background: var(--bone); color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; transition: background .2s ease, transform .2s ease; }
#ostvstart .ts-start:hover { background: #fff; } #ostvstart .ts-start:active { transform: scale(.97); }
#ostvstart .ts-start kbd { border-color: rgba(14, 15, 18, .35); color: var(--ink); margin-left: 2px; }
#ostvstart .ts-play { width: 0; height: 0; border-left: 8px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
#ostvstart .ts-back { height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .4); color: var(--bone-70); font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
#ostvstart .ts-back:hover { color: var(--bone); border-color: rgba(255, 250, 248, .35); }
#ostvstart .ts-count { margin-left: 6px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
#ostvstart button:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
/* the zoom: the card's art grows to the screen and dissolves onto the start screen beneath */
.ts-zoom { position: fixed; z-index: 41; transform-origin: 50% 50%; border-radius: 6px; overflow: hidden; background: #0a0b0f center / cover no-repeat; pointer-events: none; will-change: transform, opacity; box-shadow: 0 0 0 1px rgba(255, 250, 248, .35), 0 40px 120px -30px rgba(0, 0, 0, 1); transition: transform .64s cubic-bezier(.62, 0, .12, 1), border-radius .45s ease .1s, opacity .44s ease; }
.ts-zoom.go { transform: translate(var(--tx), var(--ty)) scale(var(--s)); border-radius: 0; }
.ts-zoom.out { opacity: 0; }
/* the way back: the same zoom mirrored, the art shrinking into the card it came from, then gone */
.ts-zoom.back { transition: transform .64s cubic-bezier(.88, 0, .38, 1), border-radius .45s ease, opacity .34s ease; }
@media (max-width: 720px) { #ostvstart .ts-top, #ostvstart .ts-body { left: 20px; right: 20px; } #ostvstart .ts-body { bottom: 40px; grid-template-columns: 48px minmax(0, 1fr); } #ostvstart .ts-ava { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { #ostvstart, #ostvstart .ts-top, #ostvstart .ts-body, .ts-zoom { transition: none; } #ostvstart .ts-art img, #ostvstart .ts-art video { animation: none; transform: none; } }

/* the lineup chip, admin only: the door from TV to the pile */
#rot .rc-header .rc-lineup { height: 30px; padding: 0 12px 0 10px; border-radius: 4px; border: 1px solid rgba(255,250,248,.16); background: transparent; color: #FFFAF8; font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-right: 10px; transition: border-color .18s, background .18s; }
#rot .rc-header .rc-lineup .px { width: 6px; height: 6px; border-radius: 1px; display: inline-block; background: #2BB673; }
#rot .rc-header .rc-lineup:hover, #rot .rc-header .rc-lineup:focus-visible { border-color: rgba(255,250,248,.4); background: rgba(255,250,248,.06); outline: none; }

/* what a caption said, said properly: the episode in pixel type, the tools in the maker's own words */
#rot .tv-credit { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
/* on TV the episode sits on the title's own line, where a programme guide prints it, not wedged against the maker's face */
#rot .rc-piece-heading > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; min-width: 0; }
#rot .rc-piece-heading > div > .rc-eyebrow { flex-basis: 100%; }
#rot .rc-piece-heading > div > h3 { flex: 0 1 auto; min-width: 0; }
#rot .rc-piece-heading > div > .tv-credit { margin: 0 0 8px; }
#rot .tv-credit .tv-ep { font: 800 13px/1 'Doto', var(--mono); letter-spacing: .06em; color: var(--bone); border: 1px solid rgba(255,250,248,.24); border-radius: 4px; padding: 4px 7px 3px; font-variant-numeric: tabular-nums; }
#rot .tv-credit .tv-made { font: 500 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-40, rgba(255,250,248,.42)); }
#rot .cp-work-copy .tv-credit { margin-top: 4px; }
#rot .cp-work-copy .tv-credit .tv-ep { font-size: 11px; padding: 3px 5px 2px; }
#rot .cp-work-copy .tv-credit .tv-made { font-size: 9px; letter-spacing: .1em; }
@media (max-width: 720px) { #rot .tv-credit .tv-made { display: none; } }

/* the frame hugs the picture: the stage steps back to a soft bleed of the piece's own light, and a hairline frame the
   exact ratio of the piece sits centred in it, carrying the channel bug and the tuning note on its corners. The two
   lengths come from everside-os-tv-frame.js as registered properties, so the settle between shapes is one transition
   on the viewer that every consumer follows; the media itself is centred with inset and margin, no transform, so the
   tune-in animation Codex runs on it (which owns transform) cannot move it. */
@property --tvf-w { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --tvf-h { syntax: '<length>'; inherits: true; initial-value: 0px; }
#rot .rc-viewer.tv-framed, #rot .rc-tv-screen.tv-framed { border-color: transparent; background: transparent; box-shadow: none; transition: --tvf-w .6s var(--os-settle, cubic-bezier(.22, .8, .22, 1)), --tvf-h .6s var(--os-settle, cubic-bezier(.22, .8, .22, 1)); }
#rot .rc-viewer.tv-framed::before { opacity: .6; filter: blur(46px) brightness(.26) saturate(1.1); }
#rot .rc-viewer.tv-framed > .rc-video, #rot .rc-viewer.tv-framed > .rc-tv-poster, #rot .rc-viewer.tv-framed > .rc-embed,
#rot .rc-tv-screen.tv-framed > .rc-video, #rot .rc-tv-screen.tv-framed > .rc-tv-poster, #rot .rc-tv-screen.tv-framed > .rc-embed {
  position: absolute; inset: 0; margin: auto; width: var(--tvf-w); height: var(--tvf-h); max-width: 100%; max-height: 100%;
  object-fit: cover; border-radius: 8px; overflow: hidden; background: #08090c;
}
#rot .rc-viewer.tv-framed > .rc-tv-poster, #rot .rc-tv-screen.tv-framed > .rc-tv-poster { opacity: .85; }
#rot .tv-framed > .rc-embed { display: grid; place-items: center; }
#rot .tv-framed > .rc-embed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; z-index: 0; }
#rot .tv-framed > .rc-embed > button { position: relative; z-index: 1; }
#rot .tv-framed > .rc-embed iframe { z-index: 2; }
#rot .tv-frame {
  position: absolute; inset: 0; margin: auto; width: var(--tvf-w); height: var(--tvf-h); max-width: 100%; max-height: 100%;
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 250, 248, .03);
  pointer-events: none; z-index: 2;
}
/* the bug and the tuning note ride the frame's corners */
#rot .rc-viewer.tv-framed > .rc-channel-bug { top: calc(50% - var(--tvf-h) / 2 + 14px); right: calc(50% - var(--tvf-w) / 2 + 16px); }
#rot .rc-viewer.tv-framed > .rc-buffering { left: calc(50% - var(--tvf-w) / 2 + 14px); top: calc(50% - var(--tvf-h) / 2 + 14px); }
/* while the shape is unknown or still settling, the picture is letterboxed in the frame, never cropped to it */
#rot .tv-framed.tv-fitting > .rc-video, #rot .tv-framed.tv-fitting > .rc-tv-poster, #rot .tv-framed.tv-fitting > .rc-embed > img { object-fit: contain; }
/* an embed's button waits for its picture: while the shape is unknown or settling there is no lone button in an empty frame */
#rot .tv-framed > .rc-embed > button { transition: opacity .3s ease; }
#rot .tv-framed.tv-fitting > .rc-embed > button { opacity: 0; pointer-events: none; }
/* under the tune-in static the frame snaps to the new shape; nobody sees it move, and the picture lands already framed */
#rot .tv-framed.tv-snap { transition: none !important; }
/* the old piece's clone, which the tune-in fades on top, keeps the card it had (its lengths are frozen on it) */
#rot .rc-viewer.tv-framed > .rc-tv-transition-old { position: absolute; inset: 0; margin: auto; width: var(--tvf-w); height: var(--tvf-h); max-width: 100%; max-height: 100%; border-radius: 8px; overflow: hidden; background: #08090c; }
#rot .rc-viewer.tv-framed > .rc-tv-transition-old > .rc-video, #rot .rc-viewer.tv-framed > .rc-tv-transition-old > .rc-embed, #rot .rc-viewer.tv-framed > .rc-tv-transition-old > .rc-tv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#rot .rc-viewer.tv-framed > .rc-tv-transition-old > .rc-embed > img { object-fit: cover; opacity: .8; }
@media (prefers-reduced-motion: reduce) { #rot .rc-viewer.tv-framed, #rot .rc-tv-screen.tv-framed { transition: none; } }