/* The video itself is the gesture surface; no separate window chrome. */
.persistent-player { z-index:20; background:#000; color:#fff; overflow:hidden; border-radius:10px; transform-origin:0 0; }
.persistent-player[hidden] { display:none; }
.player-stage { position:relative; width:100%; }
.player-pip-notice { display:none; }
.persistent-player[data-pip="true"] .player-pip-notice { display:grid; place-items:center; position:absolute; inset:0; padding:20px; background:#111; color:#bbb; font-size:13px; text-align:center; pointer-events:none; }
.player-controls .player-pip[hidden] { display:none; }
.player-ambient-layer { display:none; position:fixed; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.player-ambient { position:absolute; pointer-events:none; mask-image:radial-gradient(ellipse closest-side,#000 0%,#000e 20%,#0009 45%,#0004 65%,#0001 83%,transparent 100%); }
.player-ambient-bitmap { display:block; width:100%; height:100%; opacity:.3; image-rendering:auto; }
/* A static, tiled grain softens 8-bit gradient bands without a per-frame noise pass. */
.player-ambient::after { content:""; position:absolute; inset:0; opacity:.035; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23n)' d='M0 0h128v128H0z'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
@media (min-width:701px) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  body[data-player-ambient="true"] { isolation:isolate; }
  body[data-player-ambient="true"] > .player-ambient-layer:not([hidden]) { display:block; }
  body[data-player-ambient="true"] > .topbar { background:#0f0f0f40; }
}
.persistent-player[data-mode="mini"] { z-index:65; border-radius:12px; box-shadow:0 6px 28px #0008,0 0 0 1px #ffffff18; }
body.sidebar-open .persistent-player { z-index:20; }
.persistent-player-media { position:relative; aspect-ratio:16/9; width:100%; background:#000; }
.persistent-player-media video { display:block; position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.persistent-player[data-mobile-drag="true"] .persistent-player-media video { touch-action:none; }
.persistent-player-media video:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
.player-dragging video { cursor:grabbing; }
.watch-background { position:fixed; z-index:5; inset:0 0 0 calc(var(--sidebar-width) + var(--safe-area-left)); overflow:hidden; background:var(--canvas); padding:var(--watch-home-top,var(--header-height)) var(--safe-area-right) var(--safe-area-bottom) 0; pointer-events:none; }
.watch-background-content { max-width:1560px; margin:0 auto; padding:18px 24px 48px; }
body[data-watch-transition] .workspace { position:relative; z-index:6; background:var(--canvas); }
body[data-watch-transition] .persistent-player { z-index:65; }
@media (max-width:900px) { .watch-background { left:0; padding-left:var(--safe-area-left); } }
@media (max-width:700px) {
  .watch-background { padding-top:var(--watch-home-top,calc(56px + var(--safe-area-top))); padding-bottom:var(--mobile-nav-height); }
  .watch-background-content { padding:0 0 24px; }
  .watch-background .discovery-heading { display:none; }
  body[data-page='watch'][data-watch-transition] .topbar { display:flex; height:calc(56px + var(--safe-area-top)); opacity:var(--watch-reveal,0); pointer-events:none; }
}
.player-seek-feedback { position:absolute; z-index:1; top:0; bottom:64px; width:40%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px; background:radial-gradient(ellipse at center,#0009,#0000 75%); color:#fff; text-align:center; font-size:13px; font-weight:600; text-shadow:0 1px 4px #000; pointer-events:none; }
.player-seek-feedback[data-side="left"] { left:0; }
.player-seek-feedback[data-side="right"] { right:0; }
.player-seek-feedback::before { content:'››'; font-size:34px; line-height:1; letter-spacing:2px; }
.player-seek-feedback[data-side="left"]::before { content:'‹‹'; }
.player-controls { position:absolute; z-index:2; inset:0; opacity:1; visibility:visible; transition:opacity .16s,visibility .16s; pointer-events:none; }
.player-controls::before { content:''; position:absolute; inset:0; background:linear-gradient(#0008,#0002 35%,#0002 60%,#0009); }
.persistent-player[data-controls="hidden"] .player-controls { opacity:0; visibility:hidden; }
.player-controls button, .player-close { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; padding:0; border:0; border-radius:50%; color:#fff; background:transparent; pointer-events:auto; cursor:pointer; filter:drop-shadow(0 1px 3px #0007); touch-action:manipulation; }
.player-controls button:hover, .player-close:hover { background:#ffffff1a; }
.player-controls button:focus-visible, .player-seek:focus-visible, .player-speed:focus-visible, .player-close:focus-visible { outline:2px solid #fff; outline-offset:-3px; }
.player-controls button:disabled { opacity:.3; cursor:default; }
.player-controls svg, .player-close svg { width:24px; height:24px; }
.player-top-controls { position:absolute; inset:2px 4px auto; display:flex; align-items:center; gap:8px; }
.player-video-title { min-width:0; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:15px; font-weight:600; visibility:hidden; }
.player-transport { position:absolute; top:50%; left:50%; display:flex; align-items:center; gap:32px; transform:translate(-50%,-50%); }
.player-transport .player-toggle { width:58px; height:58px; background:#0005; }
.player-toggle svg { width:38px; height:38px; }
.player-buffering { position:absolute; left:calc(50% - 15px); top:calc(50% - 15px); width:30px; height:30px; border:3px solid #ffffff40; border-top-color:#fff; border-radius:50%; animation:spin .75s linear infinite; pointer-events:none; }
.persistent-player[data-buffering="true"] .player-toggle svg { visibility:hidden; }
.player-bottom-controls { position:absolute; inset:auto 4px 14px 12px; display:flex; align-items:center; gap:2px; height:36px; }
.player-bottom-controls button { width:36px; height:36px; }
.player-time { flex:1; font-size:12px; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 1px 3px #000; }
.player-timeline { position:absolute; bottom:0; left:12px; right:12px; height:20px; pointer-events:auto; }
.player-track { position:absolute; inset:9px 0 auto; height:3px; background:#ffffff55; }
.player-track span { position:absolute; top:0; bottom:0; left:0; width:0; }
.player-buffered { background:#ffffff80; }
.player-progress { background:#ff1744; }
.player-seek { position:absolute; inset:0; width:100%; height:20px; margin:0; padding:0; border:0; border-radius:0; background:transparent; appearance:none; -webkit-appearance:none; color:#ff1744; cursor:pointer; touch-action:none; }
.player-seek::-webkit-slider-runnable-track { height:3px; background:transparent; }
.player-seek::-webkit-slider-thumb { width:12px; height:12px; margin-top:-4.5px; border:0; border-radius:50%; background:#ff1744; -webkit-appearance:none; }
.player-seek::-moz-range-track { height:3px; background:transparent; }
.player-seek::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:#ff1744; }
.player-seek:disabled { opacity:.4; cursor:default; }
.player-settings { position:absolute; z-index:4; top:48px; right:12px; width:230px; max-width:calc(100% - 24px); max-height:calc(100% - 60px); overflow-y:auto; padding:14px; border:1px solid #ffffff24; border-radius:12px; background:#202020f5; box-shadow:0 8px 24px #0006; pointer-events:auto; }
.player-settings label { display:flex; align-items:center; justify-content:space-between; gap:16px; color:#fff; font-size:13px; }
.player-speed { min-width:76px; min-height:40px; border:1px solid #666; border-radius:7px; padding:4px 8px; background:#303030; color:#fff; font-size:16px; }
.persistent-player-media video::-webkit-media-controls-fullscreen-button { display:none; }
.persistent-player[data-fullscreen="true"] { z-index:1000; border-radius:0; box-shadow:none; }
.persistent-player[data-fullscreen-fallback="true"] { left:var(--player-viewport-left,0px)!important; top:var(--player-viewport-top,0px)!important; width:var(--player-viewport-width,100vw)!important; height:var(--player-viewport-height,100dvh)!important; }
.persistent-player[data-fullscreen="true"] .persistent-player-media { aspect-ratio:auto; height:100%; }
.persistent-player[data-fullscreen="true"] .player-stage { height:100%; }
.persistent-player[data-landscape-rotated="true"] .player-stage { position:absolute; top:0; left:100%; width:var(--player-landscape-width,100dvh); height:var(--player-landscape-height,100dvw); transform-origin:0 0; transform:rotate(90deg); }
.persistent-player[data-fullscreen="true"] video { cursor:default; }
.persistent-player[data-fullscreen="true"] .player-top-controls { top:max(6px,var(--safe-area-top)); left:max(12px,var(--safe-area-left)); right:max(12px,var(--safe-area-right)); }
.persistent-player[data-fullscreen="true"] .player-video-title { visibility:visible; }
.persistent-player[data-fullscreen="true"] .player-transport { gap:64px; }
.persistent-player[data-fullscreen="true"] .player-toggle { width:72px; height:72px; }
.persistent-player[data-fullscreen="true"] .player-toggle svg { width:44px; height:44px; }
.persistent-player[data-fullscreen="true"] .player-bottom-controls { bottom:calc(26px + var(--safe-area-bottom)); left:max(20px,var(--safe-area-left)); right:max(16px,var(--safe-area-right)); }
.persistent-player[data-fullscreen="true"] .player-timeline { bottom:calc(8px + var(--safe-area-bottom)); left:max(20px,var(--safe-area-left)); right:max(20px,var(--safe-area-right)); }
.persistent-player[data-fullscreen="true"] .player-time { font-size:14px; }
.persistent-player[data-landscape-rotated="true"] .player-top-controls { top:max(6px,var(--safe-area-left),var(--safe-area-right)); left:max(12px,var(--safe-area-top)); right:max(12px,var(--safe-area-bottom)); }
.persistent-player[data-landscape-rotated="true"] .player-bottom-controls { bottom:26px; left:max(20px,var(--safe-area-top)); right:max(16px,var(--safe-area-bottom)); }
.persistent-player[data-landscape-rotated="true"] .player-timeline { bottom:8px; left:max(20px,var(--safe-area-top)); right:max(20px,var(--safe-area-bottom)); }
.persistent-player:fullscreen { left:0!important; top:0!important; width:100%!important; height:100%!important; }
.persistent-player:-webkit-full-screen { left:0!important; top:0!important; width:100%!important; height:100%!important; }
.player-close { position:absolute; z-index:3; right:4px; top:4px; background:#0009; }
.player-dragging .player-close { opacity:0; pointer-events:none; }
.persistent-player-media .loading-state { position:absolute; inset:0; min-height:0; padding:12px; font-size:13px; text-align:center; }
.persistent-player-error { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:48px 12px 12px; overflow:auto; font-size:12px; text-align:center; }
.persistent-player-error p { margin:0; }
.video-player.persistent-player-anchor { aspect-ratio:16/9; padding:0; }
.persistent-player-anchor > button { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
@media (max-width:700px) { .persistent-player[data-mode="full"] { border-radius:0; } }
@media (prefers-reduced-motion:reduce) { .persistent-player .player-controls { transition:none; } }

/* Desktop transport stays at the bottom; touch layouts keep their own controls. */
.player-desktop-toolbar, .player-desktop-settings, .player-volume, .player-theater { display:none; }
.persistent-player[data-desktop-controls="true"] { border-radius:16px; container-type:inline-size; }
.persistent-player[data-desktop-controls="true"] video { cursor:pointer; }
.persistent-player[data-desktop-controls="true"][data-controls="hidden"] video { cursor:none; }
/* Catch clicks throughout the desktop control strip, including gaps and padding.
   Keep it behind the actual controls and let the picture above retain its gestures. */
.persistent-player[data-desktop-controls="true"] .player-controls::after { content:""; position:absolute; z-index:-1; left:0; right:0; bottom:0; height:80px; pointer-events:auto; cursor:default; }
.persistent-player[data-desktop-controls="true"] .player-desktop-toolbar { pointer-events:auto; cursor:default; }
.persistent-player[data-desktop-controls="true"] .player-controls::before { background:linear-gradient(transparent 62%,#0001 78%,#0008); }
.persistent-player[data-desktop-controls="true"] .player-top-controls { inset:16px 20px auto; pointer-events:none; }
.persistent-player[data-desktop-controls="true"] .player-video-title { font-size:18px; font-weight:500; text-shadow:0 1px 3px #000; }
.persistent-player[data-desktop-controls="true"] .player-bottom-controls,
.persistent-player[data-desktop-controls="true"] .player-mobile-settings { display:none; }
.persistent-player[data-desktop-controls="true"] .player-desktop-toolbar { --control-size:44px; --control-gap:8px; position:absolute; left:12px; right:12px; bottom:10px; height:var(--control-size); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.player-toolbar-left, .player-toolbar-right, .player-skip-controls { display:flex; align-items:center; min-width:0; }
.player-toolbar-left { gap:var(--control-gap); }
.player-toolbar-right { gap:4px; padding:0 6px; }
.persistent-player[data-desktop-controls="true"] .player-controls button { width:var(--control-size,44px); height:var(--control-size,44px); border-radius:50%; background:transparent; filter:none; transition:background .14s; }
.persistent-player[data-desktop-controls="true"] .player-controls button:hover { background:#ffffff24; }
.persistent-player[data-desktop-controls="true"] .player-controls button:focus-visible { outline-offset:-3px; }
.persistent-player[data-desktop-controls="true"] .player-toolbar-left > .player-toggle,
.persistent-player[data-desktop-controls="true"] .player-skip-controls,
.persistent-player[data-desktop-controls="true"] .player-volume,
.persistent-player[data-desktop-controls="true"] .player-time,
.persistent-player[data-desktop-controls="true"] .player-toolbar-right { background:#0006; border-radius:999px; }
.persistent-player[data-desktop-controls="true"] .player-toolbar-left > .player-toggle:hover { background:#ffffff30; }
.persistent-player[data-desktop-controls="true"] .player-controls svg { width:26px; height:26px; }
.persistent-player[data-desktop-controls="true"] .player-toggle svg { width:30px; height:30px; }
.persistent-player[data-desktop-controls="true"] .player-time { display:flex; align-items:center; justify-content:center; height:var(--control-size); padding:0 16px; flex:none; font-size:14px; font-weight:600; white-space:nowrap; }
.persistent-player[data-desktop-controls="true"] .player-timeline { left:14px; right:14px; bottom:57px; height:18px; }
.persistent-player[data-desktop-controls="true"] .player-track { top:7px; height:4px; border-radius:999px; overflow:hidden; transition:height .12s,top .12s; background:#ffffff60; }
.persistent-player[data-desktop-controls="true"] .player-timeline:hover .player-track { top:7px; height:5px; }
.persistent-player[data-desktop-controls="true"] .player-seek { height:18px; color:#f03; }
.persistent-player[data-desktop-controls="true"] .player-progress { background:#f03; }
.persistent-player[data-desktop-controls="true"] .player-seek::-webkit-slider-thumb { background:#f03; width:13px; height:13px; margin-top:-5px; }
.persistent-player[data-desktop-controls="true"] .player-seek::-moz-range-thumb { background:#f03; width:13px; height:13px; }
.persistent-player[data-desktop-controls="true"] .player-volume { display:flex; align-items:center; }
.player-volume-slider { width:0; min-width:0; height:18px; padding:0; margin:0; border:0; border-radius:0; opacity:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; pointer-events:none; transition:width .15s,opacity .15s,margin .15s; }
.player-volume:hover .player-volume-slider, .player-volume:focus-within .player-volume-slider { width:64px; margin-right:12px; opacity:1; pointer-events:auto; }
.player-volume-slider::-webkit-slider-runnable-track { height:3px; background:linear-gradient(to right,#fff var(--volume,100%),#ffffff50 var(--volume,100%)); }
.player-volume-slider::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:12px; height:12px; border:0; border-radius:50%; background:#fff; margin-top:-4.5px; }
.player-volume-slider::-moz-range-track { height:3px; background:#ffffff50; }
.player-volume-slider::-moz-range-progress { height:3px; background:#fff; }
.player-volume-slider::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:#fff; }
.player-volume-slider:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.persistent-player[data-desktop-controls="true"] .player-theater { display:grid; }
.persistent-player[data-desktop-controls="true"] .player-settings { top:auto; bottom:78px; right:14px; width:280px; padding:8px 0; max-height:calc(100% - 98px); border:0; border-radius:16px; background:#242424f5; box-shadow:0 4px 24px #0005; }
.persistent-player[data-desktop-controls="true"] .player-desktop-settings { display:block; }
.persistent-player[data-desktop-controls="true"] .player-controls .player-setting-option { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; min-height:44px; height:auto; padding:10px 18px; border-radius:0; font-size:13px; text-align:left; filter:none; }
.player-setting-option span:last-child { white-space:nowrap; color:#ddd; }
.player-setting-option.is-selected { font-weight:600; }
.player-seek-tooltip { position:absolute; z-index:3; bottom:38px; display:flex; flex-direction:column; align-items:center; gap:6px; transform:translateX(-50%); pointer-events:none; }
.player-seek-thumbnail { display:block; width:auto; max-width:100%; height:auto; border:2px solid #fff; border-radius:9px; background:#171717; box-shadow:0 3px 14px #0008; }
.player-seek-time { padding:4px 9px; border-radius:12px; background:#171717eb; color:#fff; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.4; }
.persistent-player[data-desktop-controls="true"] .player-seek-tooltip { bottom:86px; }
.persistent-player[data-desktop-controls="true"][data-fullscreen="true"] { border-radius:0; }
.persistent-player[data-desktop-controls="true"][data-fullscreen="true"] .player-theater { display:none; }
.persistent-player[data-desktop-controls="true"][data-fullscreen="true"] .player-desktop-toolbar { left:24px; right:24px; bottom:12px; }
.persistent-player[data-desktop-controls="true"][data-fullscreen="true"] .player-timeline { left:26px; right:26px; bottom:59px; }
.persistent-player[data-desktop-controls="true"][data-fullscreen="true"] .player-settings { bottom:80px; right:26px; }
.persistent-player[data-desktop-controls="true"][data-fullscreen="true"] .player-seek-tooltip { bottom:88px; }
.persistent-player[data-desktop-controls="true"] .player-controls [hidden] { display:none; }
@container (max-width:560px) {
  .persistent-player[data-desktop-controls="true"] .player-desktop-toolbar { --control-size:34px; --control-gap:4px; gap:8px; left:8px; right:8px; }
  .persistent-player[data-desktop-controls="true"] .player-time { padding:0 9px; font-size:12px; }
  .persistent-player[data-desktop-controls="true"] .player-toolbar-right { gap:0; padding:0 4px; }
  .persistent-player[data-desktop-controls="true"] .player-controls svg { width:22px; height:22px; }
  .persistent-player[data-desktop-controls="true"] .player-timeline { bottom:47px; }
  .persistent-player[data-desktop-controls="true"] .player-volume:hover .player-volume-slider,
  .persistent-player[data-desktop-controls="true"] .player-volume:focus-within .player-volume-slider { width:36px; margin-right:8px; }
  .persistent-player[data-desktop-controls="true"] .player-volume:hover + .player-time,
  .persistent-player[data-desktop-controls="true"] .player-volume:focus-within + .player-time { display:none; }
}
@media (prefers-reduced-motion:reduce) { .player-volume-slider, .player-track { transition:none!important; } }