.tv-gallery{--ease-out:cubic-bezier(.23,1,.32,1)}
.tv-gallery .crt-card{transition:transform 250ms var(--ease-out)}
/* Actual films inside a tactile CRT cabinet. All hardware ornament is hidden
   from assistive tech; screen, transport and viewer are real controls. */
.tv-transport{display:flex;gap:8px;align-items:center;flex:none;padding-bottom:8px}
.tv-transport button{height:48px;min-width:48px;border:1px solid #ffffff70;border-radius:0;background:none;color:#f1f0e9;font:700 20px Manrope,sans-serif;cursor:pointer;transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.tv-transport button:active{transform:scale(.97)}
.tv-gallery .films-inline-grid{padding:45px 24px 50px;margin:0 -4.95%;mask-image:none}
.tv-gallery .film-flow-track{gap:44px;align-items:center;padding:0 30px}
.tv-gallery .crt-card{flex:0 0 550px;width:550px;max-width:none;padding:0;background:none;color:#111110;overflow:visible}
.tv-gallery .crt-card:nth-child(odd){transform:rotate(-3deg)}
.tv-gallery .crt-card:nth-child(even){transform:rotate(3deg) translateY(18px)}
.crt-cabinet{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 70px;gap:14px 18px;padding:24px 20px 14px;border-radius:24px;background:linear-gradient(140deg,#d5d1bf,#aaa694 75%);border:2px solid #59584d;box-shadow:inset 0 3px 0 #eee9d5,inset -8px -9px 0 #0002,0 24px 30px -18px #41111699;isolation:isolate}
.crt-cabinet::before,.crt-cabinet::after{content:'';position:absolute;bottom:-10px;width:66px;height:13px;background:#272822;z-index:-1;border-radius:0 0 5px 5px}
.crt-cabinet::before{left:43px}.crt-cabinet::after{right:43px}
.crt-bezel{background:linear-gradient(135deg,#31332c,#64665a);padding:14px;border-radius:37px;box-shadow:inset 3px 4px 9px #000b,0 1px 0 #eee8cc;min-width:0}
.tv-gallery .crt-card .film-open{aspect-ratio:4/3;border-radius:26px;background:#080b0c;box-shadow:0 0 0 2px #0c100e;overflow:hidden}
.tv-gallery .crt-card video.film-live{aspect-ratio:auto;width:100%;height:100%;object-fit:cover;object-position:center;background:#080b0c}
.crt-glass{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,#fff2,transparent 35%,transparent 70%,#a1b7b110);box-shadow:inset 0 0 24px 5px #000a;z-index:1}
.tv-gallery .crt-card .film-play{left:14px;bottom:12px;width:38px;height:38px;background:#f1f0e9e8;z-index:2}
.crt-hardware{display:flex;flex-direction:column;align-items:center;gap:16px;padding:9px 0 0}
.crt-brand{font:400 22px/1 Display,sans-serif;letter-spacing:.03em;color:#303129}
.crt-dial{display:block;position:relative;width:53px;height:53px;flex:none;border-radius:50%;background:linear-gradient(135deg,#55594c,#1a1d18);border:3px solid #64685b;box-shadow:0 3px 4px #0005,inset 0 1px 2px #c1c3ae}
.crt-dial::before{content:'';position:absolute;width:8px;inset:5px auto 5px 19px;background:#999c85;border-radius:2px;box-shadow:2px 1px 2px #0009;transform:rotate(35deg)}
.crt-dial-small{width:40px;height:40px}.crt-dial-small::before{left:13px;width:7px;transform:rotate(-35deg)}
.crt-speaker{width:100%;min-height:64px;flex:1;background:repeating-linear-gradient(0deg,#43473b 0px,#43473b 2px,transparent 2px,transparent 6px);border-radius:3px}
.crt-led{width:7px;height:7px;border-radius:50%;background:#a41f23;border:1px solid #601014}
.crt-bottom{grid-column:1/-1;display:flex;justify-content:space-between;color:#35372f;font:700 8px/1.5 Manrope,sans-serif;letter-spacing:.13em;padding:0 7px}
.tv-gallery .crt-card:nth-child(3n+2) .crt-cabinet{background:linear-gradient(135deg,#444b46,#252c29);border-color:#151916;box-shadow:inset 0 2px 0 #768076,inset -7px -8px 0 #0003,0 24px 30px -18px #41111699}
.crt-card:nth-child(3n+2) :is(.crt-brand,.crt-bottom){color:#dedac8}
.crt-card:nth-child(3n+2) .crt-speaker{background:repeating-linear-gradient(0deg,#101612 0px,#101612 2px,transparent 2px,transparent 6px)}
.tv-gallery .crt-card .film-inline-caption{border:0;padding:12px 6px 0;margin-top:15px;color:#f1f0e9;align-items:center}
.tv-gallery .crt-card .film-inline-caption h3{font:700 15px/1.5 Manrope,sans-serif}
.tv-gallery .crt-card .film-inline-caption>span{color:#bcbcb5;font-weight:600}
@media(hover:hover) and (pointer:fine){.tv-transport button:hover{background:#f1f0e9;color:#111110}.tv-gallery .crt-card:hover{transform:rotate(0) translateY(-5px)}}
@media(max-width:899px){
 .tv-transport{padding:0}
 .tv-gallery .films-inline-grid{margin:0 -20px;padding:32px 12px 40px}
 .tv-gallery .film-flow-track{gap:25px;padding:0 12px}
 .tv-gallery .crt-card{width:86vw;flex-basis:86vw;max-width:470px}
 .crt-cabinet{padding:15px 12px 11px;grid-template-columns:minmax(0,1fr) 44px;gap:10px;border-radius:17px}
 .crt-bezel{padding:9px;border-radius:25px}
 .tv-gallery .crt-card .film-open{border-radius:17px}
 .crt-hardware{gap:10px;padding-top:4px}.crt-brand{font-size:17px}
 .crt-dial{width:35px;height:35px;border-width:2px}.crt-dial::before{left:12px;width:6px;inset-block:4px}
 .crt-dial-small{width:28px;height:28px}.crt-dial-small::before{left:9px;width:5px}
 .crt-speaker{min-height:30px}.crt-led{width:5px;height:5px}
 .crt-bottom{font-size:6px;letter-spacing:.04em;padding:0 2px}
 .tv-gallery .crt-card .film-inline-caption h3{font-size:13px}
 .tv-gallery .crt-card .film-play{width:32px;height:32px;left:9px;bottom:9px}
}
@media(prefers-reduced-motion:reduce){.tv-gallery .crt-card:nth-child(n),.tv-gallery .crt-card:hover{transform:none}}

/* A collection of sets, not recolors of a single cabinet. */
.tv-gallery .crt-card[data-tv-model=wood] .crt-cabinet{background:linear-gradient(95deg,#624733,#8a6446 30%,#694c35 65%,#513c2c);border:8px solid #372c24;border-radius:8px;padding:22px 18px 12px;grid-template-columns:minmax(0,1fr) 85px;box-shadow:inset 0 2px 0 #b18b66,0 22px 30px -18px #000b}
.crt-card[data-tv-model=wood] :is(.crt-brand,.crt-bottom){color:#edddbc}
.crt-card[data-tv-model=wood] .crt-hardware{border-left:1px solid #bb90684d;padding-left:13px}
.crt-card[data-tv-model=wood] .crt-dial{border-color:#998364;background:linear-gradient(120deg,#b4a48b,#6c5d4b)}
.crt-card[data-tv-model=wood] .crt-speaker{background:repeating-linear-gradient(90deg,#251d16 0,#251d16 3px,#8d7452 3px,#8d7452 6px)}
.tv-gallery .crt-card[data-tv-model=silver] .crt-cabinet{background:linear-gradient(165deg,#e0e1de,#a2a6a3 65%,#777e7b);border:2px solid #656b68;border-radius:10px;padding:18px 18px 10px;grid-template-columns:1fr;gap:12px;box-shadow:inset 0 2px 0 #fff,0 22px 30px -18px #000b}
.crt-card[data-tv-model=silver] .crt-bezel{border-radius:18px;padding:11px;background:#252c2d}
.tv-gallery .crt-card[data-tv-model=silver] .film-open{aspect-ratio:16/10;border-radius:14px}
.crt-card[data-tv-model=silver] .crt-hardware{display:flex;flex-direction:row;padding:2px 6px;gap:20px}
.crt-card[data-tv-model=silver] .crt-brand{color:#202b2b;margin-right:auto}
.crt-card[data-tv-model=silver] .crt-dial{width:29px;height:29px;border-color:#747d7c;background:linear-gradient(135deg,#d7dcd9,#727c79)}
.crt-card[data-tv-model=silver] .crt-dial::before{left:10px;width:4px;inset-block:3px;background:#303b3a}
.crt-card[data-tv-model=silver] .crt-speaker{min-height:24px;flex:0 0 95px;background:repeating-linear-gradient(90deg,#424d49 0,#424d49 2px,transparent 2px,transparent 5px)}
.crt-card[data-tv-model=silver] .crt-bottom{color:#26312b}
.tv-gallery .crt-card[data-tv-model=portable] .crt-cabinet{width:84%;margin:auto;background:linear-gradient(140deg,#bb633e,#88402c);border:3px solid #492b22;border-radius:40px 40px 30px 30px;grid-template-columns:1fr;padding:25px 20px 14px;box-shadow:inset 0 3px 0 #de9570,inset -6px -7px 0 #0002,0 22px 30px -18px #000b}
.crt-card[data-tv-model=portable] .crt-bezel{border-radius:45px;background:#473c31;padding:13px}
.tv-gallery .crt-card[data-tv-model=portable] .film-open{aspect-ratio:5/4;border-radius:35px}
.crt-card[data-tv-model=portable] .crt-hardware{flex-direction:row;padding:0 5px;gap:14px}
.crt-card[data-tv-model=portable] :is(.crt-brand,.crt-bottom){color:#f1dec0}
.crt-card[data-tv-model=portable] .crt-dial{width:32px;height:32px;border-color:#ac916e;background:#ddd1ad}
.crt-card[data-tv-model=portable] .crt-dial::before{left:10px;width:5px;background:#544a39}
.crt-card[data-tv-model=portable] .crt-dial-small{display:none}
.crt-card[data-tv-model=portable] .crt-speaker{min-height:23px;background:repeating-linear-gradient(0deg,#533021 0,#533021 2px,transparent 2px,transparent 5px)}
.crt-aerial{position:absolute;left:50%;top:-8px;width:35px;height:12px;background:#272a26;border-radius:50% 50% 0 0;transform:translateX(-50%)}
.crt-aerial::before,.crt-aerial::after{content:'';position:absolute;bottom:7px;left:50%;width:3px;height:53px;background:linear-gradient(90deg,#60675f,#dedfd8);transform-origin:bottom;border-radius:2px}
.crt-aerial::before{transform:rotate(-48deg)}.crt-aerial::after{transform:rotate(41deg);height:63px}
.tv-gallery .crt-card[data-tv-model=olive] .crt-cabinet{background:linear-gradient(135deg,#525c46,#303829);border-radius:13px;border:3px solid #23291d;grid-template-columns:60px minmax(0,1fr);box-shadow:inset 0 2px 0 #849172,0 22px 30px -18px #000b}
.crt-card[data-tv-model=olive] .crt-hardware{grid-column:1;grid-row:1}.crt-card[data-tv-model=olive] .crt-bezel{grid-column:2;grid-row:1}
.crt-card[data-tv-model=olive] :is(.crt-brand,.crt-bottom){color:#e6e9cd}
.crt-card[data-tv-model=olive] .crt-dial{width:42px;height:42px}.crt-card[data-tv-model=olive] .crt-dial::before{left:14px}
.tv-gallery .crt-card[data-tv-model=cream] .crt-cabinet{background:linear-gradient(140deg,#eee5c7,#bdb497);border-radius:30px;border-color:#7e775f;box-shadow:inset 0 3px 0 #fff4d5,0 22px 30px -18px #000b}
.crt-card[data-tv-model=cream] :is(.crt-brand,.crt-bottom){color:#464333}
.tv-gallery .films-inline-grid{padding-top:75px}
@media(max-width:899px){
 .tv-gallery .crt-card[data-tv-model=wood] .crt-cabinet{padding:12px 10px 9px;border-width:5px;grid-template-columns:minmax(0,1fr) 48px}
 .crt-card[data-tv-model=wood] .crt-hardware{padding-left:7px}
 .tv-gallery .crt-card[data-tv-model=silver] .crt-cabinet{padding:12px 10px 8px}
 .crt-card[data-tv-model=silver] .crt-hardware{gap:10px}.crt-card[data-tv-model=silver] .crt-speaker{flex-basis:50px}
 .tv-gallery .crt-card[data-tv-model=portable] .crt-cabinet{width:93%;padding:17px 12px 11px;border-radius:28px}
 .crt-card[data-tv-model=portable] .crt-hardware{gap:8px}
 .tv-gallery .crt-card[data-tv-model=olive] .crt-cabinet{grid-template-columns:40px minmax(0,1fr)}
 .crt-card[data-tv-model=olive] .crt-dial{width:31px;height:31px}.crt-card[data-tv-model=olive] .crt-dial::before{left:10px}
 .crt-aerial::before{height:36px}.crt-aerial::after{height:44px}
 .tv-gallery .films-inline-grid{padding-top:55px}
}

/* Circular television gallery. Scoped to the preview's upgraded film section. */
.tv-circular .films-heading{align-items:end;margin-bottom:12px}
.tv-circular .films-inline-grid{position:relative;height:580px;margin:0 -4.95%;padding:0;overflow:hidden;mask-image:none;isolation:isolate;user-select:none;touch-action:pan-y}
.tv-circular .film-flow-track{position:absolute;inset:0;width:100%;height:100%;padding:0;display:block;transform:none;will-change:auto}
.tv-circular .film-flow-track .crt-card{position:absolute;left:50%;top:58%;margin:0;max-width:none;transition:none;transform-origin:center;will-change:transform,opacity}
.tv-circular .film-flow-track .crt-card .crt-cabinet{pointer-events:none}
.tv-circular .film-flow-track .crt-card .film-open{pointer-events:auto}
.tv-circular .film-inline-caption{gap:8px}
.tv-circular .crt-card .film-inline-caption h3{font-size:12px;line-height:1.4}
.tv-circular .crt-card .film-inline-caption>span{font-size:10px}
.tv-circular .tv-carousel-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff25;padding-top:22px;color:#aaa99f;font:600 10px/1.6 Manrope,sans-serif;letter-spacing:.14em}
.tv-circular .tv-channel{color:#f1f0e9;font-variant-numeric:tabular-nums}
.tv-circular .crt-card[data-tv-model=wood] .crt-cabinet{border-width:5px;padding:16px 12px 10px;grid-template-columns:minmax(0,1fr) 52px;gap:10px}
.tv-circular .crt-card[data-tv-model=wood] .crt-hardware{padding-left:7px}
.tv-circular .crt-cabinet{padding:17px 14px 11px;grid-template-columns:minmax(0,1fr) 46px;gap:10px}
.tv-circular .crt-hardware{gap:10px}
.tv-circular .crt-brand{font-size:17px}
.tv-circular .crt-dial{width:36px;height:36px;border-width:2px}
.tv-circular .crt-dial:before{left:12px;width:6px;inset-block:4px}
.tv-circular .crt-dial-small{width:28px;height:28px}
.tv-circular .crt-dial-small:before{left:9px;width:5px}
.tv-circular .crt-speaker{min-height:32px}
.tv-circular .crt-bottom{font-size:6px;letter-spacing:.05em}
.tv-circular .crt-card[data-tv-model=olive] .crt-cabinet{grid-template-columns:42px minmax(0,1fr)}
.tv-circular .crt-card[data-tv-model=silver] .crt-hardware{gap:12px}
.tv-circular .crt-card[data-tv-model=silver] .crt-speaker{flex-basis:60px}
.tv-circular .crt-card[data-tv-model=silver] .crt-dial:before{left:10px;width:4px}
.tv-circular .crt-card[data-tv-model=portable] .crt-dial:before{left:10px;width:5px}
@media(max-width:760px){
 .tv-circular .films-heading{display:flex;gap:12px}
 .tv-circular .films-heading h2{font-size:40px}
 .tv-circular .tv-transport{gap:5px}
 .tv-circular .tv-transport button{min-width:38px;width:38px;height:44px;font-size:17px}
 .tv-circular .films-inline-grid{height:450px;margin:0 -20px;padding:0}
 .tv-circular .film-flow-track .crt-card{top:59%}
 .tv-circular .crt-card .film-inline-caption h3{font-size:11px}
 .tv-circular .crt-card .film-inline-caption>span{font-size:9px}
 .tv-circular .tv-carousel-footer{font-size:8px;letter-spacing:.08em;padding-top:17px}
 .tv-circular .tv-carousel-footer>span:last-child{display:none}
 .tv-circular .crt-card[data-tv-model=portable] .crt-cabinet{padding:14px 10px 9px}
 .tv-circular .crt-card[data-tv-model=silver] .crt-hardware{gap:8px}
 .tv-circular .crt-card[data-tv-model=silver] .crt-speaker{flex-basis:35px}
}

/* Real cabinet depth: five solid faces behind the original front panel. */
.tv-circular .film-flow-track .crt-card{transform-style:preserve-3d}
.tv-circular .crt-cabinet{transform-style:preserve-3d;isolation:auto;--cabinet-depth:58px;--case-side:#6d6858;--case-top:#a6a08c;--case-back:#3a3932;box-shadow:0 30px 28px -18px #000c}
.tv-circular .crt-card[data-tv-model=wood] .crt-cabinet{--case-side:#4b3424;--case-top:#815b3c;--case-back:#30271f}
.tv-circular .crt-card[data-tv-model=silver] .crt-cabinet{--case-side:#6c7573;--case-top:#bfc5c0;--case-back:#3e4543}
.tv-circular .crt-card[data-tv-model=portable] .crt-cabinet{--case-side:#81432c;--case-top:#c07c4a;--case-back:#512e23}
.tv-circular .crt-card[data-tv-model=olive] .crt-cabinet{--case-side:#303927;--case-top:#69775a;--case-back:#1e251b}
.tv-circular .crt-card[data-tv-model=cream] .crt-cabinet{--case-side:#8a8268;--case-top:#d8cfb0;--case-back:#56503f}
.crt-depth{position:absolute;display:block;pointer-events:none;box-sizing:border-box;backface-visibility:hidden;border:1px solid #0005}
.crt-depth-left,.crt-depth-right{top:0;bottom:0;width:var(--cabinet-depth);background:linear-gradient(90deg,#0002,transparent 35%,#0005),repeating-linear-gradient(0deg,transparent 0,transparent 9px,#0003 9px,#0003 11px),var(--case-side)}
.crt-depth-left{left:0;transform-origin:left center;transform:rotateY(90deg)}
.crt-depth-right{left:100%;transform-origin:left center;transform:rotateY(90deg);backface-visibility:visible}
.crt-depth-top,.crt-depth-bottom{left:0;right:0;height:var(--cabinet-depth);background:linear-gradient(0deg,#0002,transparent),var(--case-top)}
.crt-depth-top{top:0;transform-origin:center top;transform:rotateX(-90deg);backface-visibility:visible}
.crt-depth-bottom{top:100%;transform-origin:center top;transform:rotateX(-90deg);background:var(--case-back)}
.crt-depth-back{inset:0;transform:translateZ(calc(-1 * var(--cabinet-depth))) rotateY(180deg);background:var(--case-back);border-radius:12px}
.crt-depth-shade{position:absolute;inset:0;border-radius:inherit;background:#080a08;transform:translateZ(1px);pointer-events:none}
.tv-circular .crt-bezel{transform:translateZ(5px)}
.tv-circular .crt-hardware,.tv-circular .crt-bottom{transform:translateZ(3px)}
.tv-circular .tv-transport button{border-color:#ffffff35}
@media(max-width:760px){.tv-circular .crt-cabinet{--cabinet-depth:42px}}
.crt-depth-left{transform-origin:right center;transform:translateX(-100%) rotateY(-90deg)}
.crt-depth-shade{transform:translateZ(7px)}
.tv-circular .crt-cabinet{--cabinet-depth:90px}
@media(max-width:760px){.tv-circular .crt-cabinet{--cabinet-depth:60px}}
/* Opacity in will-change would flatten the cabinet's 3D faces. */
.tv-circular .film-flow-track .crt-card{will-change:transform}
