.tv-overview { display:grid; grid-template-columns:minmax(240px,.36fr) minmax(0,.64fr); gap:48px; align-items:start; }
.tv-intro-block { padding-top:20px; }
.tv-intro-block h1 { margin:0; font:600 64px/1.04 var(--display); letter-spacing:-.025em; }
.tv-lead { margin:22px 0 0; max-width:29ch; font:400 19px/1.6 var(--sans); color:var(--muted); }
.tv-photo-proof { width:248px; max-width:100%; margin:32px 0 0; }
.tv-photo-proof img { display:block; width:100%; height:auto; border-radius:3px; }
.tv-photo-proof figcaption { color:var(--muted); font:400 12px/1.5 var(--sans); margin-top:10px; }
.tv-demo-block { min-width:0; }
.tv-stage { position:relative; width:100%; aspect-ratio:1.16; isolation:isolate; background:#e8e4db; border-radius:3px; overflow:hidden; }
.tv-poster { display:block; width:100%; height:100%; object-fit:contain; }
.tv-viewport { position:absolute; inset:0; touch-action:pan-y; cursor:grab; }
.tv-viewport:active { cursor:grabbing; }
.tv-viewport canvas { display:block; width:100%; height:100%; }
.tv-stage[data-state="ready"] .tv-poster,.tv-stage[data-fallback-ready] .tv-poster { visibility:hidden; }
.tv-stage[data-state="error"] .tv-viewport { display:none; }
.tv-encoder { position:absolute; inset:0; z-index:2; pointer-events:none; --knob-x:70%; --knob-y:22%; --knob-w:54px; --knob-h:72px; --knob-gap:58px; }
.tv-encoder button { position:absolute; top:var(--knob-y); left:var(--knob-x); pointer-events:auto; transform:translate(-50%,-50%); padding:0; border:0; cursor:pointer; color:#364431; }
.tv-turn { width:44px; height:44px; border-radius:50%; background:#f4f1e8dc; touch-action:manipulation; transition:background 120ms ease,color 120ms ease; }
.tv-turn-left { margin-left:calc(-1 * var(--knob-gap)); }
.tv-turn-right { margin-left:var(--knob-gap); }
.tv-turn svg { display:block; width:21px; height:21px; margin:auto; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none; }
@media(hover:hover) and (pointer:fine) { .tv-turn:hover { background:#ded8ca; color:#925218; } }
.tv-turn:active { background:#d8c6a9; }
.tv-knob { width:var(--knob-w); height:var(--knob-h); border-radius:12px; background:transparent; touch-action:none; }
@media(hover:hover) and (pointer:fine) { .tv-knob:hover { box-shadow:inset 0 0 0 1px #8b63385c; } }
.tv-knob[data-pressed] { background:#9c692d17; }
.tv-encoder button:focus-visible { outline:2px solid #925218; outline-offset:3px; }
.tv-viewport:focus-visible { outline:2px solid var(--amber); outline-offset:-3px; }
.tv-context { display:grid; border-bottom:1px solid var(--keyline-soft); padding:23px 0 22px; }
/* The tallest real caption defines the row. Inactive captions remain inaccessible. */
.tv-context>div { grid-area:1/1; display:grid; grid-template-columns:124px minmax(0,1fr); gap:24px; align-content:start; }
.tv-context>div[aria-hidden="true"] { visibility:hidden; pointer-events:none; }
.tv-context h2 { margin:0; font:600 22px/1.25 var(--display); }
.tv-context p { margin:0; color:var(--muted); font:400 14px/1.65 var(--sans); max-width:56ch; }
.tv-demo-note { margin:12px 0 0; font:400 12px/1.6 var(--sans); color:var(--muted); }
.tv-flat-screen { position:absolute; width:80%; height:auto; left:10%; top:28%; image-rendering:pixelated; }
.tv-encoder[data-fallback] { --knob-x:50%; --knob-y:14%; --knob-w:44px; --knob-h:44px; --knob-gap:58px; }
.tv-encoder[data-fallback] .tv-knob { background:#c4ad72; border:2px solid #8f7850; border-radius:50%; }
.tv-notice { position:absolute; bottom:10px; left:15px; right:15px; margin:0; color:#364431; font:400 12px/1.4 var(--sans); }
.tv-page .capability-list>div { grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); }
.tv-page .story-section { margin-top:56px; }
@media(max-width:1100px) {
 .tv-overview { grid-template-columns:minmax(210px,.34fr) minmax(0,.66fr); gap:28px; }
 .tv-intro-block h1 { font-size:52px; }
 .tv-lead { font-size:17px; }
 .tv-photo-proof { width:210px; margin-top:24px; }
 .tv-context>div { grid-template-columns:1fr; gap:8px; }
}
@media(max-width:800px) {
 .tv-overview { grid-template-columns:1fr; gap:28px; }
 .tv-intro-block { display:grid; grid-template-columns:minmax(0,1fr) 148px; gap:14px 28px; padding:0; }
 .tv-intro-block h1 { grid-column:1; align-self:end; font-size:46px; }
 .tv-lead { grid-column:1; margin:0; max-width:40ch; }
 .tv-photo-proof { grid-column:2; grid-row:1/3; width:148px; margin:0; }
 .tv-photo-proof figcaption { font-size:12px; }
 .tv-demo-block { width:100%; max-width:660px; margin-inline:auto; }
 .tv-context>div { grid-template-columns:124px 1fr; gap:20px; }
 .tv-page .capability-list>div { grid-template-columns:1fr; }
}
@media(max-width:540px) {
 .tv-page .rail-nav { width:100%; justify-content:space-between; gap:8px; }
 .tv-intro-block { grid-template-columns:minmax(0,1fr) 104px; gap:12px 18px; }
 .tv-intro-block h1 { grid-column:1/-1; font-size:43px; }
 .tv-lead { grid-row:2; font-size:16px; line-height:1.6; }
 .tv-photo-proof { grid-row:2; width:104px; }
 .tv-stage { aspect-ratio:1; }
 .tv-context>div { grid-template-columns:1fr; gap:9px; }
 .tv-context { padding-block:18px; }
 .tv-context h2 { font-size:24px; }
 .tv-context p { font-size:14px; }
 .tv-page .story-section { margin-top:40px; }
}
@media(prefers-reduced-motion:reduce) { .tv-turn { transition:none; } }

@media(pointer:coarse) and (orientation:landscape) and (max-height:540px) {
 .tv-stage { aspect-ratio:auto; height:calc(100svh - 32px); }
}