
.yt{scroll-margin-top:var(--adp-space-4)}
.yt .adp-section-body{display:flex;flex-direction:column;gap:var(--adp-space-4)}
.yt-head{display:flex;align-items:center;gap:10px}
.yt-to{display:inline-flex;align-items:center;padding:12px;margin:-12px;border-radius:4px;text-decoration:none}
.yt-head .yt-to,.yt-sub .yt-to{margin:-12px -2px -12px -12px}
.yt-to:focus-visible{outline:2px solid var(--adp-accent);outline-offset:-4px}
.yt-to img{display:block;flex:none}


.yt-still{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;padding:0;margin:0;border:0;
  border-radius:var(--adp-radius);overflow:hidden;background:#140E0A;cursor:pointer;color:inherit}
.yt-still.is-tall{aspect-ratio:9/16}
.yt-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt-still::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,12,8,.42),rgba(20,12,8,0) 46%)}
.yt-play{position:relative;z-index:1;width:48px;height:48px;fill:none;stroke:#F7E8CD;stroke-width:1.5;stroke-linejoin:round;
  filter:drop-shadow(0 1px 6px rgba(20,12,8,.45));transition:transform .32s cubic-bezier(.16,1,.3,1)}
.yt-play circle{fill:rgba(28,18,12,.38)} .yt-play path{fill:#F7E8CD;stroke:none}
.yt-still:hover .yt-play{transform:scale(1.06)}
.yt-still:focus-visible{outline:2px solid var(--adp-accent);outline-offset:3px}
.yt-len{position:absolute;right:8px;bottom:8px;z-index:1;font:500 12px/1 var(--adp-font-controls);color:#F7E8CD;
  background:rgba(20,12,8,.62);padding:4px 6px;border-radius:3px;font-variant-numeric:tabular-nums}
.yt-player{display:block;width:100%;aspect-ratio:16/9;border:0;background:#140E0A}


.yt-screen{display:flex;justify-content:center;background:#140E0A;border-radius:var(--adp-radius) var(--adp-radius) 0 0;
  overflow:hidden;transition:height .5s cubic-bezier(.16,1,.3,1)}
.yt-screen .yt-still{border-radius:0}
.yt-stage{position:relative;width:100%}
.yt-slot{display:flex;justify-content:center}
.yt-screen[data-shape="tall"] .yt-still,.yt-screen[data-shape="tall"] .yt-player{width:62%;aspect-ratio:9/16}


.yt-float-bar{display:none}
.yt-screen.is-floating{position:relative}
.yt-screen.is-floating::after{content:"Playing in the small window";position:absolute;inset:0;display:grid;place-items:center;
  font:500 12px/1.3 var(--adp-font-controls);letter-spacing:.06em;text-transform:uppercase;color:rgba(247,232,205,.55)}
.yt-screen.is-floating .yt-stage{position:fixed;z-index:35;background:#140E0A;border-radius:10px;overflow:hidden;
  box-shadow:0 12px 32px rgba(20,12,8,.38),0 0 0 1px rgba(247,232,205,.10)}
.yt-screen.is-floating .yt-float-bar{display:flex;align-items:center;height:40px;color:#F7E8CD;touch-action:none;cursor:grab;
  user-select:none;-webkit-user-select:none}
.yt-screen.is-dragging .yt-float-bar{cursor:grabbing}
.yt-screen.is-dragging .yt-player{pointer-events:none}
.yt-grip{flex:1;display:flex;align-items:center;height:100%;padding-left:8px;opacity:.6}
.yt-float-btn{display:grid;place-items:center;width:44px;height:40px;padding:0;margin:0;border:0;background:none;color:inherit;cursor:pointer}
.yt-float-btn:focus-visible{outline:2px solid #F7E8CD;outline-offset:-6px;border-radius:6px}
.yt-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.yt-grip .yt-icon{stroke-width:2.6}
.yt-screen.is-floating .yt-still,.yt-screen.is-floating .yt-player{width:100%}
.yt-bezel{display:flex;align-items:center;background:#140E0A;border-radius:0 0 var(--adp-radius) var(--adp-radius);
  padding:7px 10px;margin-top:calc(-1 * var(--adp-space-4))}
.yt-now{display:flex;flex-direction:column;margin:calc(-1 * var(--adp-space-2)) 0 0}
.yt-now-title{font:400 var(--adp-size-heading,1.35rem)/1.2 var(--adp-font-display);color:var(--adp-ink);text-wrap:balance}

.yt-title{margin:var(--adp-space-2) 0 0;font:400 var(--adp-size-reading)/1.3 var(--adp-font-reading);color:var(--adp-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.yt-metas{display:block;margin:2px 0 0}
.yt-meta{display:block;font:400 var(--adp-size-small)/1.45 var(--adp-font-controls);color:var(--adp-ink-quiet);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt-row .yt-title{min-height:2.6em}
.yt-short .yt-title{min-height:2.7em}
.yt-mark{display:inline-block;margin-left:6px;padding:0 7px;border:1px solid var(--adp-hairline);border-radius:99px;
  font:500 11px/1.4 var(--adp-font-controls);letter-spacing:.02em;color:var(--adp-ink-quiet);vertical-align:1px}


.yt-rows{display:flex;flex-direction:column}
.yt-row{position:relative;display:grid;grid-template-columns:min(40%,148px) 1fr;gap:var(--adp-space-3);align-items:start;
  width:calc(100% + 2 * var(--adp-space-2));margin:0 calc(-1 * var(--adp-space-2));padding:var(--adp-space-3) var(--adp-space-2);
  border:0;border-top:1px solid var(--adp-hairline);border-radius:var(--adp-radius);background:none;text-align:left;cursor:pointer;
  color:inherit;font:inherit;transition:background-color .28s cubic-bezier(.16,1,.3,1),box-shadow .28s cubic-bezier(.16,1,.3,1)}
.yt-row:last-child{border-bottom:1px solid var(--adp-hairline)}
.yt-row .yt-title{margin-top:0}
.yt-row .yt-still{pointer-events:none}
.yt-row .yt-len{font-size:11px;right:5px;bottom:5px;padding:3px 5px}
.yt-row .yt-play{width:34px;height:34px}
.yt-row:focus-visible{outline:2px solid var(--adp-accent);outline-offset:2px}


.yt-sub{display:flex;align-items:center;gap:8px;margin:var(--adp-space-2) 0 calc(-1 * var(--adp-space-2))}
.yt-reel{display:flex;gap:var(--adp-space-3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--adp-space-4);
  margin-inline:calc(-1 * var(--adp-space-4));padding:6px var(--adp-space-4) var(--adp-space-2);scrollbar-width:none;overscroll-behavior-x:contain;
  align-items:flex-start}   
.yt-reel::-webkit-scrollbar{display:none}

.yt-short{flex:0 0 clamp(124px,36%,168px);min-width:0;scroll-snap-align:start;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.yt-short .yt-still{pointer-events:none}
.yt-short .yt-title{font-size:var(--adp-size-small);line-height:1.35}
.yt-short:focus-visible{outline:2px solid var(--adp-accent);outline-offset:3px}


.yt-row[aria-current="true"]{background:var(--adp-well);box-shadow:inset 0 0 0 1.5px var(--adp-accent);border-top-color:transparent}
.yt-row[aria-current="true"] + .yt-row{border-top-color:transparent}
.yt-row[aria-current="true"]:last-child{border-bottom-color:transparent}
.yt-short[aria-current="true"] .yt-still{outline:2px solid var(--adp-accent);outline-offset:3px}
[aria-current="true"] .yt-title{color:var(--adp-accent);font-weight:600}
[aria-current="true"] .yt-still::after{background:rgba(20,12,8,.62)}
[aria-current="true"] .yt-play,[aria-current="true"] .yt-len{display:none}
[aria-current="true"] .yt-still::before{content:"On the screen";position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  padding:0 6px;text-align:center;font:600 11px/1.25 var(--adp-font-controls);letter-spacing:.08em;text-transform:uppercase;color:#F7E8CD}


.yt-sound{display:inline-flex;align-items:center;gap:6px;height:44px;margin:-12px 0 -12px auto;padding:0 10px;border:0;background:none;
  color:#F7E8CD;font:500 12px/1 var(--adp-font-controls);letter-spacing:.04em;cursor:pointer}
.yt-sound[hidden]{display:none}
.yt-sound:focus-visible{outline:2px solid #F7E8CD;outline-offset:-8px;border-radius:6px}
.yt-sound[aria-pressed="false"] .yt-sound-word{color:#FFF}
.yt-sound:not([hidden]) + .yt-full-btn{margin-left:0}
.yt-sound-small[hidden]{display:none}


.yt-full-btn{display:grid;place-items:center;width:44px;height:44px;margin:-12px -10px -12px auto;padding:0;border:0;background:none;
  color:#F7E8CD;cursor:pointer}
.yt-full-btn:focus-visible{outline:2px solid #F7E8CD;outline-offset:-8px;border-radius:6px}
.yt-screen[data-shape="wide"] + .yt-bezel .yt-full-btn{display:none}
.yt-full-open,.yt-full-open body{overflow:hidden}
.yt-screen.is-full .yt-stage{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:#000}
.yt-screen.is-full .yt-float-bar{display:flex;justify-content:flex-end;flex:none;height:48px;padding-top:env(safe-area-inset-top);
  box-sizing:content-box;cursor:default;touch-action:auto}
.yt-screen.is-full .yt-grip,.yt-screen.is-full .yt-back{display:none}
.yt-screen.is-full .yt-float-btn{width:48px;height:48px;color:#FFF}
.yt-screen.is-full .yt-float-btn .yt-icon{width:34px;height:34px;padding:7px;border-radius:50%;background:rgba(255,255,255,.16);stroke-width:2}
.yt-screen.is-full .yt-slot{flex:1;min-height:0;align-items:center;padding-bottom:env(safe-area-inset-bottom)}
.yt-screen.is-full .yt-player,.yt-screen.is-full .yt-still{width:min(100vw,calc((100dvh - 48px - env(safe-area-inset-top) -
  env(safe-area-inset-bottom)) * 9 / 16));aspect-ratio:9/16}

@media (prefers-reduced-motion:reduce){.yt-screen,.yt-play,.yt-row{transition:none}}
@media (hover:hover){.yt-float-btn:hover{background:rgba(247,232,205,.08)}}
