/* The watch player, shared by the public watch page and the admin preview.
   Its own sheet because both apps need it and they load different stylesheets;
   duplicating three hundred lines in each is how they drift apart. */

/* ------------------------------------------------------------- player */

/* .kp is added by js/player.js once it has taken over. Everything below only
   applies then, so a browser without it keeps the native controls rather than
   a styled shell with nothing driving it. */
.kp { position: relative; background: #000; overflow: hidden; }
.kp video { max-height: none; }
.kp video { display: block; width: 100%; height: 100%; }
.kp.is-full { border-radius: 0; }
.kp.is-full video { height: 100vh; object-fit: contain; }

.kp-ui { position: absolute; inset: 0; pointer-events: none; }
.kp-ui > * { pointer-events: auto; }

/* Brand mark, floating top-right.
   Same treatment as .brand in site.css — the dot carries the accent gradient
   through background-clip — so it reads as the site's mark rather than a
   lookalike, and picks up each tube's accent without knowing about tubes.
   pointer-events: none or it would eat clicks meant for the video. */
.kp-logo {
  position: absolute; top: .7rem; right: .85rem; z-index: 4;
  pointer-events: none; user-select: none;
  font-size: .95rem; font-weight: 900; letter-spacing: -.045em; line-height: 1;
  color: rgba(255, 255, 255, .92);
  /* Footage is arbitrary — white text alone disappears over a bright frame. */
  text-shadow: 0 1px 10px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .5);
  transition: opacity .25s var(--ease);
}
.kp-logo-dot {
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Fades with the controls: it is branding, not an overlay to sit through. */
.kp.is-idle .kp-logo { opacity: .38; }
.kp.is-full .kp-logo { top: 1.1rem; right: 1.3rem; font-size: 1.1rem; }

/* Big play button, gone the moment it starts. */
.kp-big {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: rgba(0, 0, 0, .48); color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  /* Rim light plus a drop shadow: without the inset the disc has no edge over
     dark footage and reads as a floating glyph rather than a button. */
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 44px -8px rgba(0, 0, 0, .85),
              inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: scale .18s var(--ease-out), background .18s var(--ease),
              box-shadow .18s var(--ease), opacity .25s var(--ease);
}
/* .kp-big sets display:grid, and a class selector outranks the UA stylesheet's
   [hidden] { display: none } — so `big.hidden = true` in the player did nothing
   and the disc only ever went away when the idle timer faded it. Opacity alone
   also leaves it clickable, which put an invisible button over the middle of
   the picture. */
.kp-big[hidden] { display: none; }
.kp-big svg { width: 34px; height: 34px; fill: currentColor; margin-left: 3px; }
.kp-big:hover { scale: 1.06; background: var(--accent); color: #180508; }
/* While playing the disc is a hint rather than a call to action: faded over the
   picture, solid the moment it is pointed at. Paused, it stays fully lit. */
.kp.is-playing .kp-big { opacity: .32; }
.kp.is-playing .kp-big:hover,
.kp.is-playing .kp-big:focus-visible { opacity: 1; }

.kp-spinner {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: kpSpin .8s linear infinite;
}
@keyframes kpSpin { to { transform: rotate(360deg); } }

/* Control bar */
.kp-bar {
  position: absolute; inset: auto 0 0 0; padding: 3.2rem .85rem .7rem;
  /* Three stops rather than two: a straight linear fade to transparent leaves a
     visible horizontal seam where the scrim ends, which is the single thing
     that makes an overlay look pasted on. */
  background: linear-gradient(to top,
    rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .72) 38%, rgba(0, 0, 0, .28) 68%, transparent 100%);
  transition: opacity .25s var(--ease), translate .25s var(--ease);
}
.kp.is-idle .kp-bar { opacity: 0; translate: 0 12px; }
.kp.is-idle { cursor: none; }
.kp.is-idle .kp-big { opacity: 0; }
/* Faded out is not gone: without this a tap in the lower strip of a touch
   screen still lands on whatever control is invisibly sitting there, which is
   why the bar seemed to do random things on a phone. */
.kp.is-idle .kp-bar, .kp.is-idle .kp-big { pointer-events: none; }

.kp-row { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.kp-spacer { flex: 1; }

.kp-btn {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: #fff;
  transition: background .15s var(--ease), scale .15s var(--ease);
}
.kp-btn svg { width: 21px; height: 21px; fill: currentColor; }
.kp-btn:hover { background: rgba(255, 255, 255, .16); scale: 1.05; }
.kp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kp-time { color: #fff; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums;
           margin-left: .3rem; white-space: nowrap; }
.kp-time .kp-dur { color: rgba(255, 255, 255, .65); }

/* Volume: the slider slides out on hover, so the bar stays uncluttered. */
.kp-volume { display: flex; align-items: center; }
.kp-vol {
  width: 0; opacity: 0; margin: 0; height: 4px; cursor: pointer;
  appearance: none; border-radius: 999px;
  background: linear-gradient(to right, #fff var(--fill, 100%), rgba(255,255,255,.3) var(--fill, 100%));
  transition: width .22s var(--ease-out), opacity .18s var(--ease), margin .22s var(--ease-out);
}
.kp-volume:hover .kp-vol, .kp-vol:focus-visible { width: 74px; opacity: 1; margin: 0 .5rem 0 .1rem; }
.kp-vol::-webkit-slider-thumb {
  appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff;
}
.kp-vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }

/* Seek bar */
.kp-scrub { position: relative; padding: .55rem 0; cursor: pointer; touch-action: none; }
.kp-scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.kp-track {
  position: relative; height: 4px; border-radius: 999px;
  /* Darker than the buffered fill by a wide margin. These two were .28 and .4,
     close enough that "how much has loaded" was invisible on most footage. */
  background: rgba(255, 255, 255, .18);
  transition: height .15s var(--ease);
}
.kp-scrub:hover .kp-track, .kp.is-scrubbing .kp-track { height: 6px; }
.kp-buffered {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: rgba(255, 255, 255, .5); border-radius: 999px;
  transition: width .25s linear;
}
.kp-played {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--accent-grad); border-radius: 999px;
}
.kp-knob {
  position: absolute; top: 50%; left: 0; translate: -50% -50%;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .15s var(--ease);
  /* Rides the played edge without needing its own position update. */
  left: var(--knob, 0);
}
.kp-scrub:hover .kp-knob, .kp.is-scrubbing .kp-knob { opacity: 1; }

/* Scrub preview: one sprite sheet, sliced. */
.kp-preview {
  position: absolute; bottom: calc(100% + .1rem); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  pointer-events: none;
}
.kp-thumb {
  width: 168px; aspect-ratio: 16 / 9; border-radius: 6px; background-color: #000;
  background-repeat: no-repeat;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .85);
}
.kp-preview.no-thumb .kp-thumb { display: none; }
/* Same trap as .kp-big: display:flex above outranks the UA [hidden] rule, so
   `preview.hidden = true` did nothing and the scrub thumbnail stayed on screen
   after the pointer had left the bar. */
.kp-preview[hidden] { display: none; }
.kp-preview-time {
  padding: .1rem .4rem; border-radius: 4px; background: rgba(0, 0, 0, .82);
  color: #fff; font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Settings menu */
.kp-menu-wrap { position: relative; }
.kp-menu {
  position: absolute; bottom: calc(100% + .5rem); right: 0; z-index: 5;
  min-width: 200px; padding: .35rem; border-radius: 12px;
  background: rgba(16, 16, 20, .82);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  /* Hairline highlight along the top edge, so the panel reads as glass lit from
     above rather than a flat grey rectangle. */
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .1);
}
.kp-mi {
  display: flex; align-items: center; width: 100%; gap: .5rem;
  padding: .5rem .6rem; border: 0; border-radius: 6px; cursor: pointer;
  background: none; color: #fff; font: 600 .84rem/1 var(--font); text-align: left;
}
.kp-mi { transition: background .12s var(--ease); }
.kp-mi:hover { background: rgba(255, 255, 255, .13); }
.kp-mi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kp-mi[aria-checked="true"] { color: #fff; }
.kp-val, .kp-tick { margin-left: auto; color: rgba(255, 255, 255, .6); font-weight: 700; }
.kp-tick { color: var(--accent); }
.kp-back { color: rgba(255, 255, 255, .7); border-bottom: 1px solid rgba(255,255,255,.12);
           border-radius: 0; margin-bottom: .2rem; }

/* Keyboard shortcuts sheet */
.kp-sheet {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center;
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kp-sheet-card {
  max-width: min(28rem, 88%); max-height: 84%; overflow: auto;
  padding: 1rem 1.1rem; border-radius: 14px;
  background: rgba(16, 16, 20, .94); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .9);
}
.kp-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kp-sheet-x {
  border: 0; background: none; color: rgba(255, 255, 255, .7);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.kp-sheet-x:hover { color: #fff; }
.kp-sheet-card dl { margin: .8rem 0 0; display: grid; gap: .4rem; }
.kp-sheet-card dl > div { display: flex; gap: .8rem; align-items: baseline; }
.kp-sheet-card dt { min-width: 6.5rem; }
.kp-sheet-card dd { margin: 0; color: rgba(255, 255, 255, .74); font-size: .88rem; }
.kp-sheet-card kbd {
  display: inline-block; padding: .12rem .4rem; border-radius: 5px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16);
  font: 700 .76rem/1.4 var(--font); white-space: nowrap;
}

/* Share-clip maker panel — reuses the .kp-sheet backdrop + card. */
.kp-clip-at { margin: .8rem 0 .2rem; color: rgba(255, 255, 255, .78); font-size: .86rem; line-height: 1.4; }
.kp-clip-at b { color: #fff; font-variant-numeric: tabular-nums; }
.kp-clip-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; }
.kp-clip-row > span { color: rgba(255, 255, 255, .7); font-size: .84rem; font-weight: 700; }
.kp-seg { display: inline-flex; gap: .25rem; padding: .2rem; border-radius: 10px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.kp-seg button {
  border: 0; background: none; color: rgba(255, 255, 255, .8); cursor: pointer;
  padding: .34rem .6rem; border-radius: 7px; font: 700 .8rem/1 var(--font);
  transition: background .12s var(--ease), color .12s var(--ease);
}
.kp-seg button:hover { color: #fff; }
.kp-seg button.on { background: var(--accent); color: #180508; }
.kp-clip-make {
  margin-top: 1.1rem; width: 100%; border: 0; border-radius: 10px; cursor: pointer;
  padding: .62rem 1rem; font: 800 .9rem/1 var(--font);
  background: var(--accent-grad, var(--accent)); color: #180508;
  transition: filter .15s var(--ease), opacity .15s var(--ease);
}
.kp-clip-make:hover { filter: brightness(1.06); }
.kp-clip-make:disabled { opacity: .6; cursor: progress; }
.kp-clip-msg { display: block; margin-top: .7rem; min-height: 1.1em;
  color: rgba(255, 255, 255, .72); font-size: .82rem; }

/* End-of-video suggestions: one large, three small. */
.kp-next {
  position: absolute; inset: 0; z-index: 7;
  display: flex; flex-direction: column; gap: .6rem;
  padding: clamp(.7rem, 3%, 1.4rem);
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* The face question on the end screen. Same class as the page copy, restated
   dark because it sits over the video rather than over the page. */
.kp-face {
  flex: 0 0 auto; margin: 0 0 .5rem; padding: .45rem .7rem;
  border-radius: 9px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: #fff;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.kp-face .facevote-q { font-size: .85rem; }
.kp-face .facevote-btn { border-color: rgba(255, 255, 255, .24); color: #fff; }
.kp-face .facevote-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.kp-face .facevote-status { color: rgba(255, 255, 255, .6); font-size: .78rem; }
/* Below this the end screen has no room for it and the suggestions matter more. */
@media (max-height: 420px) { .kp-face { display: none; } }

/* "Rate this video" on the end screen.
 *
 * Bigger than the face question next to it, because it is the ask most likely
 * to be answered by somebody who has just watched to the end, and because the
 * stars are the only control here that is worth aiming at with a thumb.
 *
 * The widget itself is styled in site.css and reused as-is; only the colours
 * are restated, since this copy sits over video rather than over the page. */
.kp-rate {
  flex: 0 0 auto; margin: 0 0 .5rem; padding: .55rem .8rem;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08); color: #fff;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.kp-rate-q { font-size: .95rem; font-weight: 800; }
.kp-rate .rate-widget { font-size: 1.5rem; }
/* Unlit stars need to read against video, which the page's muted grey does
   not — over a bright frame it disappears entirely. */
.kp-rate .rate-widget label { color: rgba(255, 255, 255, .38); }
.kp-rate-msg { color: rgba(255, 255, 255, .72); font-size: .78rem; }
@media (max-height: 420px) { .kp-rate { display: none; } }

.kp-next-head {
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; font-weight: 800; font-size: .9rem; flex: 0 0 auto;
}
.kp-next-replay {
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08);
  color: #fff; border-radius: 999px; padding: .28rem .7rem; cursor: pointer;
  font: 700 .8rem/1 var(--font);
}
.kp-next-replay:hover { background: rgba(255, 255, 255, .18); }
/* The large one carries the same weight as the three stacked beside it. */
.kp-next-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: .6rem; }
.kp-next-rest { display: grid; grid-template-rows: repeat(4, 1fr); gap: .45rem; min-height: 0; }

.kp-next-card {
  display: flex; gap: .55rem; align-items: center; min-height: 0;
  color: #fff; text-decoration: none; border-radius: 10px;
  padding: .35rem; background: rgba(255, 255, 255, .06);
  border: 1px solid transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease), scale .15s var(--ease);
}
.kp-next-card:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255,255,255,.2); scale: 1.015; }
.kp-next-card.is-big { flex-direction: column; align-items: stretch; padding: .5rem; }

.kp-next-shot {
  position: relative; flex: 0 0 auto; border-radius: 7px; overflow: hidden;
  background: #000; aspect-ratio: 16 / 9; width: 104px;
}
.kp-next-card.is-big .kp-next-shot { width: auto; flex: 1 1 auto; min-height: 0; }
.kp-next-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-next-time {
  position: absolute; right: .25rem; bottom: .25rem;
  padding: .05rem .3rem; border-radius: 4px; background: rgba(0, 0, 0, .78);
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.kp-next-text { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.kp-next-title {
  font-size: .8rem; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kp-next-meta {
  display: flex; gap: .5rem; align-items: center;
  font-size: .7rem; font-weight: 600; color: rgba(255, 255, 255, .62);
  font-variant-numeric: tabular-nums;
}
.kp-next-star { color: var(--accent); }
.kp-next-card.is-big .kp-next-text { flex: 0 0 auto; padding: .15rem .1rem 0; }
.kp-next-card.is-big .kp-next-title { font-size: .95rem; }
.kp-next-card.is-big .kp-next-meta { font-size: .76rem; }

/* Four rows in the space three used, so the thumbnails have to give a little. */
@media (max-width: 900px) {
  .kp-next-shot { width: 88px; }
  .kp-next-title { -webkit-line-clamp: 1; }
}

/* Below this the two-column split leaves nothing readable in either column. */
@media (max-width: 560px) {
  .kp-next-grid { grid-template-columns: 1fr; }
  .kp-next-rest { grid-template-rows: repeat(2, 1fr); }
  .kp-next-rest .kp-next-card:nth-child(n+3) { display: none; }
}

@media (max-width: 620px) {
  .kp-thumb { width: 124px; }
  .kp-big { width: 62px; height: 62px; }
  .kp-time { font-size: .76rem; }
  .kp-vol { display: none; }
  /* The skip buttons cost width the row does not have on a phone. Picture-in-
     picture is the thing worth losing for them: it is close to useless on a
     handset, and skipping is hardest there — a fingertip on a 300px progress
     bar is about four seconds per pixel. */
  .kp-pip { display: none; }
}
/* ---------------------------------------------------------- HD badge
   The current-quality chip, YouTube's tell that a quality control exists.
   A button: clicking it opens the quality menu. */
.kp-hd {
  align-self: center; margin: 0 .15rem;
  padding: .18rem .42rem; border-radius: 5px; cursor: pointer;
  background: none; color: #fff; border: 1px solid rgba(255, 255, 255, .34);
  font: 800 .72rem/1 var(--font); letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.kp-hd:hover { background: rgba(255, 255, 255, .16); }
.kp-hd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* HD tints to the accent, so "you are watching in HD" reads at a glance. */
.kp-hd.is-hd { color: #180508; background: var(--accent); border-color: transparent; }
.kp-hd[hidden] { display: none; }

/* ------------------------------------------------- "most replayed" graph
   Sits on top of the scrub track, rising from its centre line. Subtle at
   rest, full and bright while the bar is hovered or dragged — the same
   reveal YouTube uses. Two layers: a dim silhouette and the accent-coloured
   watched portion, clipped by the player as it plays. */
.kp-heat {
  position: absolute; left: 0; right: 0; bottom: 50%; height: 30px; z-index: 1;
  pointer-events: none;
  opacity: .4; transform: scaleY(.42); transform-origin: bottom;
  transition: opacity .18s var(--ease), transform .18s var(--ease-out);
}
.kp-heat[hidden] { display: none; }
.kp-heat svg { display: block; width: 100%; height: 100%; }
.kp-heat-base { fill: rgba(255, 255, 255, .38); }
.kp-heat-play { fill: var(--accent); }
.kp-scrub:hover .kp-heat, .kp.is-scrubbing .kp-heat { opacity: 1; transform: scaleY(1); }

/* Chapter markers — the audience peaks as clickable ticks on the track. */
.kp-chapters { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.kp-chap {
  position: absolute; top: 50%; translate: -50% -50%;
  width: 14px; height: 18px; padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; display: grid; place-items: center;
}
.kp-chap > span {
  width: 3px; height: 10px; border-radius: 2px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
  transition: height .15s var(--ease), width .15s var(--ease), background .15s var(--ease);
}
.kp-chap:hover > span, .kp-chap:focus-visible > span {
  height: 15px; width: 4px; background: var(--accent);
}

/* --------------------------------------------------- double-tap seek ripple
   Touch only: a soft flash over the tapped half with a chevron and the
   accumulated seconds. Driven by the .is-on class the player toggles. */
.kp-ripple {
  position: absolute; top: 0; bottom: 0; width: 42%; z-index: 6;
  display: grid; place-items: center; pointer-events: none; color: #fff;
}
.kp-ripple[hidden] { display: none; }
.kp-ripple-l { left: 0;  border-radius: 0 999px 999px 0 / 0 60% 60% 0; }
.kp-ripple-r { right: 0; border-radius: 999px 0 0 999px / 60% 0 0 60%; }
.kp-ripple-in {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  font: 800 .78rem/1 var(--font); text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.kp-ripple-in svg { width: 30px; height: 30px; }
.kp-ripple.is-on { animation: kpRipple .6s var(--ease-out); }
.kp-ripple.is-on .kp-ripple-in { animation: kpRippleArrows .6s var(--ease-out); }
@keyframes kpRipple {
  0% { background: rgba(255, 255, 255, 0); }
  28% { background: rgba(255, 255, 255, .17); }
  100% { background: rgba(255, 255, 255, 0); }
}
@keyframes kpRippleArrows { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* -------------------------------------------------------------- ambient
   A blurred wash of the video's own colour, cast just past the player edges.
   Behind the video (paint order), shown only when switched on. */
.kp-ambient {
  position: absolute; inset: -9%; width: 118%; height: 118%; z-index: 0;
  pointer-events: none; opacity: 0;
  filter: blur(58px) saturate(1.7); transform: scale(1.03);
  transition: opacity .5s var(--ease);
}
.kp video { position: relative; z-index: 1; }
.kp-ui { z-index: 2; }
/* overflow:visible lets the wash spill past the edges; border-radius:inherit
   keeps the video's own corners rounded once the shell stops clipping them. */
.kp.ambient-on { overflow: visible; }
.kp.ambient-on video { border-radius: inherit; }
.kp.ambient-on .kp-ambient { opacity: .55; }

/* ------------------------------------------------------------ miniplayer
   The docked corner copy. The shell itself goes position:fixed; a holder of
   equal height keeps the flow from collapsing, and a 1px sentinel stays put
   to report the original position. */
.kp-sentinel { width: 100%; height: 1px; margin: 0; pointer-events: none; }
.kp-mini-holder { width: 100%; }
.kp.is-mini {
  position: fixed; z-index: 60; right: 16px; bottom: 16px; left: auto; top: auto;
  width: min(400px, 86vw); height: auto; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 55px -12px rgba(0, 0, 0, .82);
  animation: kpMiniIn .22s var(--ease-out);
}
@keyframes kpMiniIn { from { opacity: .3; transform: translateY(22px) scale(.95); } to { opacity: 1; transform: none; } }
/* The full control bar is too much at this size — keep the picture, the big
   play toggle, and the two corner buttons. */
.kp.is-mini .kp-bar, .kp.is-mini .kp-logo, .kp.is-mini .kp-ambient { display: none; }
.kp-mini-x, .kp-mini-expand {
  position: absolute; top: 6px; z-index: 7; width: 30px; height: 30px;
  display: none; place-items: center; cursor: pointer;
  border: 0; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 1.25rem; line-height: 1;
}
.kp-mini-x:hover, .kp-mini-expand:hover { background: rgba(0, 0, 0, .78); }
.kp.is-mini .kp-mini-x { display: grid; right: 6px; }
.kp.is-mini .kp-mini-expand { display: grid; left: 6px; }
.kp-mini-expand svg { width: 16px; height: 16px; fill: currentColor; }

/* -------------------------------------------------------------- theater
   Give the player the whole content column and drop the rail beneath it,
   capping the height so a wide screen does not make it taller than the view. */
.watch.is-theater { grid-template-columns: minmax(0, 1fr); }
.watch.is-theater .player-shell { max-width: calc(84vh * 16 / 9); margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .kp-bar, .kp-track, .kp-btn, .kp-big, .kp-vol, .kp-heat, .kp-ambient { transition: none; }
  .kp-spinner { animation-duration: 2s; }
  .kp.is-mini, .kp-ripple.is-on, .kp-ripple.is-on .kp-ripple-in { animation: none; }
}