/* channel: the series grid, and an episode on YouTube (the platform's own chrome, dark theme) */
.ch-grid{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:33px; container-type:size; display:grid; place-items:center; }
/* the tiles size from the frame (an ancestor container): as large as fits, three across, two down */
.ch-tiles{ display:grid; gap:8px; grid-template-columns:repeat(3, min(calc((100cqw - 16px) / 3), calc((100cqh - 8px) / 2 * 16 / 9))); }
.ch-grid figure{ margin:0; aspect-ratio:16 / 9; border-radius:14px; overflow:clip; box-shadow:0 18px 30px -22px rgba(0,0,0,.45); }
.ch-grid img{ display:block; width:100%; height:100%; object-fit:cover; }

.yt{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:33px; display:grid; place-items:center; }
.yt-win{ zoom:var(--yt-z, .8); width:1280px; height:740px; background:#0f0f0f; color:#f1f1f1; border-radius:14px; overflow:hidden;
  font:400 14px/1.4 Roboto, "Helvetica Neue", Arial, sans-serif; box-shadow:0 40px 70px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.yt svg{ width:24px; height:24px; display:block; }
.yt-top{ height:56px; display:flex; align-items:center; gap:16px; padding:0 16px; }
.yt-i{ width:40px; height:40px; display:grid; place-items:center; }
.yt-logo{ display:flex; align-items:center; gap:4px; }
.yt-logo i{ width:30px; height:21px; border-radius:6px; background:#ff0033; display:grid; place-items:center; color:#fff; }
.yt-logo i svg{ width:14px; height:14px; }
.yt-logo b{ font:700 19px/1 Roboto, Arial, sans-serif; letter-spacing:-.04em; }
.yt-logo small{ font-size:10px; color:#aaa; align-self:flex-start; margin-top:2px; }
.yt-search{ margin:0 auto; width:540px; height:40px; display:flex; align-items:center; border:1px solid #303030; border-radius:40px; overflow:hidden; }
.yt-search span{ flex:1; padding:0 16px; color:#aaa; font-size:16px; }
.yt-search i{ width:64px; height:100%; display:grid; place-items:center; background:#222; border-left:1px solid #303030; }
.yt-right{ display:flex; align-items:center; gap:8px; }
.yt-me{ width:32px; height:32px; border-radius:99px; background:linear-gradient(135deg, #888, #444); }
.yt-main{ display:grid; grid-template-columns:1fr 402px; gap:24px; padding:16px 24px 0; }
.yt-player{ position:relative; aspect-ratio:16 / 9; border-radius:12px; overflow:hidden; background:#000; }
.yt-player img{ width:100%; height:100%; object-fit:cover; display:block; }
.yt-ctrl{ position:absolute; left:0; right:0; bottom:0; padding:0 12px 6px; background:linear-gradient(transparent, rgba(0,0,0,.65)); }
.yt-bar{ height:4px; background:rgba(255,255,255,.3); margin-bottom:6px; }
.yt-bar i{ display:block; width:26%; height:100%; background:#ff0033; position:relative; }
.yt-bar i::after{ content:""; position:absolute; right:-6px; top:-4px; width:12px; height:12px; border-radius:99px; background:#ff0033; }
.yt-btns{ display:flex; align-items:center; gap:14px; color:#fff; }
.yt-btns em{ font-style:normal; font-size:13px; }
.yt-sp{ flex:1; }
.yt-title{ margin:12px 0 0; font:700 20px/1.35 Roboto, Arial, sans-serif; }
.yt-row{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.yt-av{ width:40px; height:40px; border-radius:99px; background:#1b1d20; color:#f1f1f1; display:grid; place-items:center; }
.yt-av svg{ width:26px; height:auto; }
.yt-ch b{ display:flex; align-items:center; gap:4px; font-size:16px; }
.yt-ch b svg, .yt-card small svg{ width:13px; height:13px; color:#aaa; display:inline-block; }
.yt-ch small{ display:block; color:#aaa; font-size:12px; }
.yt-sub{ height:36px; padding:0 16px; border-radius:36px; background:#f1f1f1; color:#0f0f0f; display:grid; place-items:center; font-weight:500; }
.yt-pill{ height:36px; padding:0 16px; border-radius:36px; background:#272727; display:flex; align-items:center; gap:6px; font-weight:500; }
.yt-pill svg{ width:20px; height:20px; }
.yt-about{ margin-top:12px; padding:12px; border-radius:12px; background:#272727; }
.yt-about b{ font-size:14px; }
.yt-about p{ margin:4px 0 0; color:#f1f1f1; }
.yt-up{ margin:0 0 8px; font-weight:500; font-size:16px; }
.yt-card{ display:grid; grid-template-columns:168px 1fr; gap:8px; margin-bottom:8px; }
.yt-card img{ width:168px; aspect-ratio:16 / 9; object-fit:cover; border-radius:8px; display:block; }
.yt-card b{ display:block; font-size:14px; line-height:1.4; font-weight:500; }
.yt-card small{ display:flex; align-items:center; gap:4px; color:#aaa; font-size:12px; }
/* the thumbnails, a touch brighter on screen (meeting feedback, 7 Oct) */
.ch-grid img, .yt-player img, .yt-card img{ filter:brightness(1.07) saturate(1.12); }

/* the channel's home page */
.yt-home .yt-body{ height:684px; overflow:hidden; padding:0 24px; }
.yt-banner{ position:relative; height:96px; border-radius:16px; overflow:hidden; display:grid; grid-template-columns:repeat(5, 1fr); background:#000; }
.yt-banner img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.62) saturate(1.1); }
.yt-banner-in{ position:absolute; inset:0; display:flex; align-items:center; gap:28px; padding:0 40px; background:linear-gradient(90deg, rgba(0,0,0,.85) 30%, rgba(0,0,0,.1)); color:#fff; }
.yt-wm svg{ width:230px; height:auto; display:block; }
.yt-banner-in p{ margin:0; font:500 20px/1.2 Roboto, Arial, sans-serif; letter-spacing:-.01em; max-width:330px; }
.yt-head{ display:flex; gap:20px; align-items:center; padding:12px 0 0; }
.yt-av--big{ width:84px; height:84px; flex:none; }
.yt-av--big svg{ width:58px; }
.yt-head h1{ margin:0; display:flex; align-items:center; gap:6px; font:700 30px/1.1 Roboto, Arial, sans-serif; letter-spacing:-.02em; }
.yt-head h1 svg{ width:18px; height:18px; color:#aaa; }
.yt-head p{ margin:4px 0 0; color:#aaa; font-size:14px; }
.yt-head .yt-desc{ color:#aaa; }
.yt-head .yt-sub{ display:inline-grid; margin-top:8px; height:32px; }
.yt-tabs{ display:flex; gap:26px; border-bottom:1px solid #303030; margin-top:8px; font-weight:500; font-size:15px; color:#aaa; }
.yt-tabs b, .yt-tabs span{ padding:10px 0; }
.yt-tabs b{ color:#f1f1f1; box-shadow:inset 0 -2px #f1f1f1; }
.yt-shelves{ position:relative; }
.yt-shelf{ position:absolute; inset:0 0 auto 0; opacity:0; visibility:hidden; translate:0 8px; transition:opacity .45s cubic-bezier(0.32, 0.72, 0, 1), translate .45s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s .45s; }
.yt-shelf.is-on{ position:relative; opacity:1; visibility:visible; translate:none; transition-delay:0s; }
.yt-shelf h2{ display:flex; align-items:center; gap:14px; margin:12px 0 10px; font:700 19px/1.2 Roboto, Arial, sans-serif; }
.yt-all{ display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:500; color:#f1f1f1; background:#272727; border-radius:18px; padding:6px 12px 6px 8px; }
.yt-all svg{ width:16px; height:16px; }
.yt-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:12px 12px; }
.yt-v{ margin:0; }
.yt-th{ display:block; aspect-ratio:16 / 9; border-radius:10px; overflow:hidden; background:#222; }
.yt-th img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(1.07) saturate(1.12); }
.yt-v figcaption{ padding-top:7px; }
.yt-v b{ display:block; font-size:13px; line-height:1.3; font-weight:500; }
.yt-v small{ display:flex; align-items:center; gap:4px; color:#aaa; font-size:12px; line-height:1.4; }
.yt-v small svg{ width:12px; height:12px; color:#aaa; }
/* the watch page with a choice of featured video */
.yt-feat{ display:none; }
.yt-feat.is-on{ display:grid; animation:yt-in .5s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes yt-in{ from{ opacity:0; } }
.yt-chips{ display:flex; gap:8px; margin-bottom:12px; }
.yt-chips b, .yt-chips span{ padding:6px 12px; border-radius:8px; background:#272727; font-size:14px; font-weight:500; white-space:nowrap; }
.yt-chips b{ background:#f1f1f1; color:#0f0f0f; }
.yt-next{ height:668px; overflow:hidden; }
@media (prefers-reduced-motion: reduce){ .yt-shelf, .yt-feat.is-on{ transition:none; animation:none; } }

/* the channel as a scrolling page, light theme, on the deck's own background */
.yt--light .yt-win{ background:#fff; color:#0f0f0f; box-shadow:0 30px 60px -36px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06); }
.yt--light .yt-search{ border-color:#d3d3d3; } .yt--light .yt-search i{ background:#f8f8f8; border-color:#d3d3d3; } .yt--light .yt-search span{ color:#606060; }
.yt--light .yt-logo small, .yt--light .yt-head p, .yt--light .yt-tabs{ color:#606060; }
.yt--light .yt-me{ background:linear-gradient(135deg, #ddd, #aaa); }
.yt--light .yt-sub{ background:#0f0f0f; color:#fff; }
.yt--light .yt-tabs{ border-color:#e5e5e5; } .yt--light .yt-tabs b{ color:#0f0f0f; box-shadow:inset 0 -2px #0f0f0f; }
.yt--light .yt-all{ background:#f2f2f2; color:#0f0f0f; }
.yt--light .yt-head h1 svg, .yt--light .yt-by svg{ color:#606060; }
.yt-scroll{ height:684px; overflow-y:auto; overscroll-behavior:contain; padding:0 24px 40px; scrollbar-width:thin; cursor:grab; }
.yt-scroll.is-drag{ cursor:grabbing; user-select:none; }
.yt-scroll .yt-banner{ margin-top:4px; }
.yt-sec{ max-width:1020px; }
.yt-sec h2{ display:flex; align-items:center; gap:14px; margin:26px 0 4px; font:700 22px/1.2 Roboto, Arial, sans-serif; }
.yt-secline{ margin:0 0 16px; color:#606060; font-size:14px; max-width:640px; }
.yt-li{ display:grid; grid-template-columns:420px 1fr; gap:18px; margin-bottom:18px; }
.yt-li .yt-th{ position:relative; border-radius:12px; }
.yt-li .yt-th em{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.8); color:#fff; font:500 12px/1 Roboto, Arial, sans-serif; font-style:normal; padding:3px 5px; border-radius:4px; }
.yt-li h3{ margin:2px 0 6px; font:400 19px/1.3 Roboto, Arial, sans-serif; }
.yt-li .yt-meta{ margin:0; color:#606060; font-size:12px; }
.yt-by{ display:flex; align-items:center; gap:8px; margin:10px 0; color:#606060; font-size:12px; }
.yt-av--s{ width:24px; height:24px; } .yt-av--s svg{ width:15px; }
.yt-text{ margin:0; color:#606060; font-size:13px; line-height:1.45; max-width:440px; }
/* behind the scenes: ten shots on the frame, one large and the rest around it */
.yt-bts{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:33px; display:grid; gap:8px;
  grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:repeat(4, minmax(0, 1fr)); }
.yt-bts figure{ margin:0; position:relative; border-radius:14px; overflow:clip; }
.yt-bts img{ width:100%; height:100%; object-fit:cover; display:block; }
.yt-bts figcaption{ position:absolute; left:10px; bottom:8px; color:#fff; font:500 11px/1.2 var(--shell, Geist, sans-serif); text-shadow:0 1px 6px rgba(0,0,0,.5); }
.yt-bts-0{ grid-column:1 / 3; grid-row:1 / 3; }
.yt-bts-1{ grid-column:3 / 5; grid-row:1 / 2; }
.yt-bts-9{ grid-column:3 / 5; grid-row:4 / 5; }
.yt-bts{ grid-auto-flow:dense; } .yt-bts-5{ grid-column:span 2; }

/* a fuller list row: schedule line, badges, key moments */
.yt-li{ grid-template-columns:500px 1fr; gap:20px; margin-bottom:22px; }
.yt-li h3{ font-size:20px; }
.yt-text{ max-width:560px; font-size:13px; }
.yt-badges{ display:flex; gap:6px; margin:10px 0 0; }
.yt-badges span{ font:500 12px/1 Roboto, Arial, sans-serif; color:#606060; background:#f2f2f2; border-radius:4px; padding:4px 6px; }
.yt-badges span:first-child{ color:#0f0f0f; }
.yt-moments{ margin-top:12px; max-width:600px; }
.yt-moments p{ margin:0 0 8px; font-size:12px; color:#606060; }
.yt-moments ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.yt-moments li{ display:grid; grid-template-columns:64px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:start; }
.yt-moments img{ grid-row:1 / 3; width:64px; aspect-ratio:16 / 9; object-fit:cover; border-radius:4px; display:block; }
.yt-moments b{ font-size:12px; font-weight:500; line-height:1.3; }
.yt-moments span{ font-size:12px; color:#065fd4; }
.yt-moments{ max-width:640px; }
.yt-moments ol{ gap:10px; }
.yt-moments li{ display:flex; flex-direction:column; gap:4px; }
.yt-moments img{ width:100%; border-radius:6px; }
.yt-moments b{ font-size:12px; line-height:1.25; }

/* five photos: one large on the left, four in a two by two */
.yt-bts[data-n="5"]{ grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr)); }
.yt-bts[data-n="5"] figure{ grid-column:auto; grid-row:auto; }
.yt-bts[data-n="5"] .yt-bts-0{ grid-column:1 / 3; grid-row:1 / 3; }
.yt-bts figcaption{ font-size:12px; }

/* posters: finished portrait artwork shown whole, in rows, as large as the frame allows */
.yt-posters{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:33px; container-type:size; display:grid; place-items:center; }
.yt-pg{ display:grid; gap:10px; grid-template-columns:repeat(var(--cols), min(calc((100cqw - (var(--cols) - 1) * 10px) / var(--cols)), calc((100cqh - 10px) / 2 * 2 / 3))); }
.yt-pg figure{ margin:0; aspect-ratio:2 / 3; border-radius:10px; overflow:clip; box-shadow:0 18px 30px -22px rgba(0,0,0,.45); animation:yt-pin .7s cubic-bezier(0.32, 0.72, 0, 1) calc(var(--k) * .05s) both; }
.yt-pg img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes yt-pin{ from{ opacity:0; translate:0 14px; } }
@media (prefers-reduced-motion: reduce){ .yt-pg figure{ animation:none; } }