/* cheese.video: the OneTwoCheese look in one family. Warm paper, Plus Jakarta Sans throughout (heavy and tight
   for titles, tabular for numbers), and cheese yellow for the one thing to do. Loaded from Google Fonts in pages.ts. */

:root {
  color-scheme: light;
  --paper: rgb(249, 249, 246);
  --card: #fff;
  --well: #f1f0ea;
  --ink: rgb(42, 42, 39);
  --ink-2: rgb(110, 108, 101);
  --ink-3: rgb(138, 136, 128);
  --line: rgba(42, 42, 39, 0.1);
  --amber: #e8a500;
  --cheese-ink: #2a2106;
  --danger: #c4554d;
  --hairline: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 10px -4px rgba(0, 0, 0, 0.06);
  --focus: var(--cheese-ink);
  --wash: rgba(42, 42, 39, 0.05);
  --pressed: inset 0 1px 2px rgba(42, 42, 39, 0.08), inset 0 0 0 1px rgba(42, 42, 39, 0.04);
  --track: inset 0 1px 2px rgba(42, 42, 39, 0.12);
  --dash: rgba(42, 42, 39, 0.16);
  --underline: rgba(42, 42, 39, 0.3);
  --edge: rgba(0, 0, 0, 0.08);
  --chip-hover: #fdfdfb;
  --ok: #2f8f4e;
  --drop-hot: #fff6d6;
  --toast: rgb(42, 42, 39);
  --toast-ink: #fff;
  --glow: 0 10px 26px -8px rgba(214, 150, 0, 0.6);
  --stage-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06), 0 24px 48px -20px rgba(42, 42, 39, 0.35);
  --ring: 0 0 0 1px rgba(170, 115, 0, 0.5), 0 0 0 4px rgba(255, 204, 51, 0.35);
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Night, following the device's setting. The cheese yellow itself never changes: its gradients are the
   same as by day. What keeps it a good yellow is the ground under it: a warm brown-black, since yellow
   on neutral grey goes muddy and green. Its glow is smaller (a wide yellow halo on dark smears), and
   the amber accent leans a touch more yellow so it reads as cheese, not orange. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #151411;
    --card: #1f1e1a;
    --well: #0f0e0c;
    --ink: #eeece5;
    --ink-2: #aeaba1;
    --ink-3: #8b887f;
    --line: rgba(238, 236, 229, 0.09);
    --amber: #fcc419;
    --danger: #ec8a82;
    --hairline: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px -4px rgba(0, 0, 0, 0.45);
    --focus: #ffd447;
    --wash: rgba(238, 236, 229, 0.06);
    --pressed: inset 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    --track: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    --dash: rgba(238, 236, 229, 0.15);
    --underline: rgba(238, 236, 229, 0.35);
    --edge: rgba(255, 255, 255, 0.07);
    --chip-hover: #26251f;
    --ok: #5cc27f;
    --drop-hot: #2a2413;
    --toast: #2b2a25;
    --toast-ink: #f4f2ea;
    --glow: 0 10px 28px -10px rgba(255, 190, 20, 0.35);
    --stage-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 48px -20px rgba(0, 0, 0, 0.8);
    --ring: 0 0 0 1px rgba(255, 212, 71, 0.7), 0 0 0 4px rgba(255, 212, 71, 0.16);
  }
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; min-height: 100svh;
  background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: #ffe27a; color: var(--cheese-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Nav ---- */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 28px; height: 28px; }
.wordmark { font: 700 21px/1 var(--sans); letter-spacing: -0.04em; }

/* ---- The cheese: the one glossy thing on a page ---- */
.cheese {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px 13px 20px; border: 0; border-radius: 10px;
  font: 500 17px/1.2 var(--sans); letter-spacing: -0.2px; color: var(--cheese-ink);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 75%),
    linear-gradient(180deg, #ffe27a 0%, #ffdb5c 14%, #ffd447 30%, #ffcd33 48%, #ffc726 66%, #ffc21a 84%, #f5b70c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(120, 80, 0, 0.18),
    0 0 0 1px rgba(170, 115, 0, 0.32),
    0 1px 3px rgba(170, 115, 0, 0.25),
    var(--glow);
  cursor: pointer;
  transition: filter 150ms ease-out, transform 120ms ease-out;
}
.cheese svg { width: 19px; height: 19px; }
.cheese:active { transform: scale(0.97); }
@media (hover: hover) { .cheese:hover { filter: brightness(1.04) saturate(1.05); } }

/* ---- Chips: small white buttons on a hairline ---- */
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px;
  border: 0; border-radius: 8px; background: var(--card); box-shadow: var(--hairline);
  font: 500 14px/1 var(--sans); color: var(--ink); white-space: nowrap; cursor: pointer;
  transition: transform 120ms ease-out, background-color 150ms ease-out;
}
.chip svg { width: 16px; height: 16px; color: var(--ink-3); }
.chip:active { transform: scale(0.97); }
@media (hover: hover) { .chip:hover { background: var(--chip-hover); } .chip:hover svg { color: var(--ink); } }
.chip.icon { width: 36px; padding: 0; justify-content: center; }
.chip.done svg { color: var(--ok); }

/* ---- The squiggle under a word, in amber ---- */
.squiggle { position: relative; display: inline-block; isolation: isolate; }
.squiggle svg { position: absolute; left: -3%; bottom: -4px; width: 106%; height: 16px; color: var(--amber); z-index: -1; overflow: visible; }

/* ---- Coming soon, with the way in for early access ---- */
.soon { display: grid; place-items: center; min-height: calc(100svh - 52px); padding: 24px 16px 96px; }
.soon-inner { display: flex; flex-direction: column; align-items: center; width: min(520px, 100%); text-align: center; }
.soon-mark { width: 88px; height: 88px; margin-bottom: 28px; }
.soon-eyebrow { margin: 0 0 12px; font: 600 13px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.soon h1 { margin: 0; font: 800 48px/1.08 var(--sans); letter-spacing: -0.035em; text-wrap: balance; }
.soon-lede { max-width: 30ch; margin: 18px 0 0; font: 400 18px/1.5 var(--sans); color: var(--ink-2); text-wrap: pretty; }

.early { width: min(360px, 100%); margin-top: 44px; }
.early summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px;
  font: 500 15px/1.2 var(--sans); color: var(--ink-2); list-style: none; cursor: pointer;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.early summary::-webkit-details-marker { display: none; }
.early summary::after {
  content: ""; width: 7px; height: 7px; margin: -3px 0 0 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg);
  transition: transform 200ms var(--ease), margin 200ms var(--ease);
}
.early[open] summary { color: var(--ink); }
.early[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
@media (hover: hover) { .early summary:hover { color: var(--ink); background: var(--wash); } }
.early-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.early[open] .early-form { animation: rise 320ms var(--ease) both; }
.early-form .error { margin: 0; font: 400 14px/1.4 var(--sans); color: var(--danger); text-align: left; }
.early-form .cheese { width: 100%; }
.field {
  width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--card); box-shadow: var(--hairline);
  font: 400 16px/1 var(--sans); color: var(--ink);
}
.field:focus { outline: none; box-shadow: var(--ring); }

/* The page comes in top to bottom, once. */
.soon-inner > * { animation: rise 560ms var(--ease) both; }
.soon-inner > :nth-child(2) { animation-delay: 60ms; }
.soon-inner > :nth-child(3) { animation-delay: 120ms; }
.soon-inner > :nth-child(4) { animation-delay: 180ms; }
.soon-inner > :nth-child(5) { animation-delay: 260ms; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 640px) {
  .soon h1 { font-size: 38px; }
  .soon-lede { font-size: 17px; }
  .soon-mark { width: 72px; height: 72px; }
}

/* ---- Library ---- */
.library { width: min(880px, 100%); margin: 0 auto; padding: 40px 32px 96px; }

.drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 64px 24px 56px; border-radius: 12px;
  background: var(--well);
  box-shadow: var(--pressed);
  text-align: center;
  transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.drop::after {
  content: ""; position: absolute; inset: 6px; border-radius: 7px;
  border: 1.5px dashed var(--dash); pointer-events: none;
  transition: border-color 200ms var(--ease);
}
.drop h1 { margin: 0; font: 800 56px/1.05 var(--sans); letter-spacing: -0.04em; text-wrap: balance; }
.drop .hint { margin: 0; font: 500 13px/1.3 var(--sans); color: var(--ink-3); }
body.dragging .drop { background: var(--drop-hot); box-shadow: inset 0 1px 2px rgba(170, 115, 0, 0.12), inset 0 0 0 1px rgba(170, 115, 0, 0.18); }
body.dragging .drop::after { border-color: var(--amber); }

.videos { margin: 40px 0 0; padding: 0; list-style: none; }
.videos-empty { margin: 32px 0 0; text-align: center; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.video {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.video:first-child { border-top: 1px solid var(--line); }
.video.entering { animation: enter 320ms var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(-6px); } }

.thumb {
  position: relative; display: block; width: 128px; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 6px; background: var(--well);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--edge); }
.thumb .len {
  position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; border-radius: 3px;
  background: rgba(20, 20, 18, 0.72); color: #fff; font: 400 11px/1.3 var(--sans); font-variant-numeric: tabular-nums;
}

.video-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.video-title { overflow: hidden; font: 500 17px/1.3 var(--sans); letter-spacing: -0.2px; white-space: nowrap; text-overflow: ellipsis; }
a.video-title:hover { text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; }
.video-meta { font: 400 13px/1.3 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.video-meta .failed { color: var(--danger); }
.video-actions { display: flex; align-items: center; gap: 8px; }

/* Upload progress: a cheese-filled bar in a pressed track */
.progress { width: 180px; display: flex; align-items: center; gap: 10px; }
.progress-track { flex: 1; height: 6px; border-radius: 3px; background: var(--well); box-shadow: var(--track); overflow: hidden; }
.progress-fill {
  height: 100%; width: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0));
  background: linear-gradient(180deg, #ffe27a, #ffc21a); box-shadow: inset 0 -1px 0 rgba(120, 80, 0, 0.18);
  transition: transform 200ms linear;
}
.progress-n { width: 38px; text-align: right; font: 400 13px/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.busy { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--sans); color: var(--ink-2); }
.busy i { display: flex; gap: 4px; }
.busy i b { width: 5px; height: 5px; border-radius: 50%; background: #e8b020; animation: holes 1.2s ease-in-out infinite; }
.busy i b:nth-child(2) { animation-delay: 0.15s; }
.busy i b:nth-child(3) { animation-delay: 0.3s; }
@keyframes holes { 0%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 10;
  display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 10px;
  background: var(--toast); color: var(--toast-ink); font: 500 14px/1 var(--sans);
  box-shadow: 0 0 0 1px var(--edge), 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}
.toast svg { width: 16px; height: 16px; color: #ffd447; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---- Watch ---- */
.watch { width: min(1280px, 100%); margin: 0 auto; padding: 28px 32px 72px; }
.stage {
  --ar: 16 / 10;
  position: relative; margin: 0 auto;
  width: min(100%, calc((100svh - 230px) * var(--ar)));
  min-width: min(100%, 320px);
  aspect-ratio: var(--ar);
  border-radius: 8px; overflow: hidden; background: #141412;
  box-shadow: var(--stage-shadow);
}
.stage video { display: block; width: 100%; height: 100%; background: #141412; }
.stage .wait {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  color: rgba(255, 255, 255, 0.8); font: 400 14px/1.4 var(--sans); text-align: center; padding: 24px;
}
.stage .wait.failed { color: #ffb1aa; }
/* On the stage, "Getting it ready" is the whole message, so it's sized to be read from across the room. */
.stage .wait .busy { gap: 14px; font: 500 22px/1.2 var(--sans); letter-spacing: -0.2px; color: rgba(255, 255, 255, 0.86); }
.stage .wait .busy i { gap: 7px; }
.stage .wait .busy i b { width: 9px; height: 9px; background: #ffd447; }
@media (max-width: 640px) { .stage .wait .busy { gap: 12px; font-size: 18px; } .stage .wait .busy i b { width: 8px; height: 8px; } }
.about {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  width: min(100%, calc((100svh - 230px) * var(--ar))); min-width: min(100%, 320px);
  margin: 24px auto 0;
}
.about-text { min-width: 0; }
.title { margin: 0; font: 700 30px/1.2 var(--sans); letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
/* Renaming happens in the title itself: no box, just an underline that says "editable" on hover
   and turns cheese yellow while you type. */
.title[contenteditable] {
  cursor: text; caret-color: var(--amber);
  text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: 7px;
  text-decoration-color: transparent;
  transition: text-decoration-color 150ms ease-out;
}
@media (hover: hover) { .title[contenteditable]:hover { text-decoration-color: var(--underline); } }
.title[contenteditable]:focus { outline: none; text-decoration-style: solid; text-decoration-color: var(--amber); }
.meta { margin: 8px 0 0; font: 400 13px/1.4 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.meta span + span::before { content: "·"; margin: 0 8px; }
.about .actions { flex: none; display: flex; gap: 8px; padding-top: 4px; }

.missing { display: grid; place-items: center; gap: 12px; min-height: 60svh; text-align: center; padding: 24px; }
.missing h1 { margin: 0; font: 800 44px/1.1 var(--sans); letter-spacing: -0.035em; }
.missing p { margin: 0; color: var(--ink-2); }

/* ---- Player: our controls over the picture ----
   A dark scrim at the foot, white glyphs, and cheese yellow only where your place in the video is. */
.player { --ctl: rgba(255, 255, 255, 0.92); --ctl-dim: rgba(255, 255, 255, 0.62); -webkit-tap-highlight-color: transparent; }
.player video { cursor: pointer; }
.player.idle, .player.idle video { cursor: none; }

.big-play {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0;
  background: transparent; cursor: pointer;
  transition: opacity 200ms var(--ease);
}
.big-play-disc {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: var(--cheese-ink);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #ffe27a 0%, #ffd447 40%, #ffc21a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(120, 80, 0, 0.18),
    0 0 0 1px rgba(170, 115, 0, 0.35), 0 12px 32px -8px rgba(0, 0, 0, 0.45);
  transition: transform 160ms var(--ease), filter 150ms ease-out;
}
.big-play-disc svg { width: 30px; height: 30px; }
.big-play:active .big-play-disc { transform: scale(0.95); }
@media (hover: hover) { .big-play:hover .big-play-disc { transform: scale(1.04); filter: brightness(1.03); } }
.player.started .big-play, .player[data-state="playing"] .big-play { opacity: 0; pointer-events: none; }

.player-loading { position: absolute; left: 50%; top: 50%; display: flex; gap: 7px; transform: translate(-50%, -50%); opacity: 0; transition: opacity 200ms ease-out; pointer-events: none; }
.player-loading i { width: 9px; height: 9px; border-radius: 50%; background: #ffd447; animation: holes 1.1s ease-in-out infinite; }
.player-loading i:nth-child(2) { animation-delay: 0.14s; }
.player-loading i:nth-child(3) { animation-delay: 0.28s; }
.player.waiting .player-loading { opacity: 1; }

/* With a finger: back 10, play or pause, forward 10, as dark discs across the middle, up with the controls. */
.skip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: min(12vw, 72px); pointer-events: none; }
.skip-btn {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(12, 12, 10, 0.42); color: #fff; cursor: pointer; pointer-events: auto;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity 260ms var(--ease), transform 120ms ease-out;
}
.skip-btn svg { width: 32px; height: 32px; font-family: var(--sans); }
.skip-play { width: 68px; height: 68px; }
.skip-play svg { width: 30px; height: 30px; }
.skip-btn:active { transform: scale(0.9); }
.skip-btn:focus-visible { outline: 2px solid #ffd447; outline-offset: 2px; }
@media (pointer: fine) { .skip { display: none; } }
.player:not(.started) .skip-btn, .player.idle .skip-btn { opacity: 0; pointer-events: none; }

.controls {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 10px;
  background: linear-gradient(to top, rgba(12, 12, 10, 0.72) 0%, rgba(12, 12, 10, 0.38) 45%, rgba(12, 12, 10, 0) 100%);
  color: var(--ctl);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.player:not(.started) .controls { opacity: 0; pointer-events: none; }
.player.idle .controls { opacity: 0; transform: translateY(6px); pointer-events: none; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bar-side { display: flex; align-items: center; gap: 2px; min-width: 0; }

.ctl {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--ctl); cursor: pointer;
  transition: background-color 150ms ease-out, transform 120ms ease-out;
}
.ctl svg { width: 20px; height: 20px; }
.ctl:active { transform: scale(0.92); }
.ctl:focus-visible, .scrub:focus-visible, .big-play:focus-visible .big-play-disc { outline: 2px solid #ffd447; outline-offset: 2px; }
.big-play:focus-visible { outline: none; }
@media (hover: hover) { .ctl:hover { background: rgba(255, 255, 255, 0.12); } }
.ctl.pill { width: auto; min-width: 40px; height: 28px; padding: 0 9px; font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ctl.pill.on { background: rgba(255, 212, 71, 0.18); color: #ffd447; }
.ctl .w2 { transition: opacity 150ms ease-out; }
.ctl.quiet .w2 { opacity: 0; }

.time { margin-left: 6px; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ctl); white-space: nowrap; }
.time .sep { margin: 0 5px; color: var(--ctl-dim); }
.time .dur { color: var(--ctl-dim); }

/* Volume: a slim slider that opens beside the speaker */
.vol-wrap { display: flex; align-items: center; }
.vol {
  --v: 1;
  width: 0; height: 36px; margin: 0; opacity: 0; appearance: none; background: transparent; cursor: pointer;
  transition: width 220ms var(--ease), opacity 180ms ease-out, margin 220ms var(--ease);
}
.vol-wrap:hover .vol, .vol-wrap:focus-within .vol { width: 72px; margin: 0 6px 0 2px; opacity: 1; }
.vol::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff calc(var(--v) * 100%), rgba(255, 255, 255, 0.28) 0); }
.vol::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff calc(var(--v) * 100%), rgba(255, 255, 255, 0.28) 0); }
.vol::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.vol:focus-visible { outline: none; }
.vol:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #ffd447; }

/* Scrubber: a 4px line that thickens under the pointer; the played part is cheese */
.scrub { position: relative; height: 20px; margin: 0 4px 2px; cursor: pointer; touch-action: none; }
.scrub-track {
  position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.24);
  transition: height 150ms var(--ease), margin 150ms var(--ease);
}
.scrub.hovering .scrub-track, .scrub:focus-visible .scrub-track { height: 6px; margin-top: -3px; }
.scrub-buffered, .scrub-hover, .scrub-played { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); }
.scrub-buffered { background: rgba(255, 255, 255, 0.28); }
.scrub-hover { background: rgba(255, 255, 255, 0.3); opacity: 0; transition: opacity 120ms ease-out; }
.scrub.hovering .scrub-hover { opacity: 1; }
.scrub-played { background: linear-gradient(180deg, #ffe27a, #ffc21a); }
.scrub-knob {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: linear-gradient(180deg, #ffe27a, #ffc21a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(170, 115, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.35);
  transform: scale(0); transition: transform 150ms var(--ease);
  pointer-events: none;
}
.scrub.hovering .scrub-knob, .scrub:focus-visible .scrub-knob { transform: scale(1); }
.scrub.dragging .scrub-knob { transform: scale(1.15); }

/* Hover preview: the frame at that moment, with its time beneath */
.scrub-preview {
  position: absolute; bottom: 22px; left: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform: translate(-50%, 4px); opacity: 0; pointer-events: none;
  transition: opacity 140ms ease-out, transform 140ms var(--ease);
}
.scrub.hovering .scrub-preview { opacity: 1; transform: translate(-50%, 0); }
.scrub-frame { display: none; width: 176px; border-radius: 6px; background: #141412 no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 8px 24px -6px rgba(0, 0, 0, 0.6); }
.has-thumbs .scrub-frame { display: block; }
.scrub-time {
  padding: 4px 7px; border-radius: 5px; background: rgba(12, 12, 10, 0.82); color: #fff;
  font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums;
}

/* Quality menu: a small dark sheet above its button */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 2; min-width: 168px; padding: 5px;
  border-radius: 10px; background: rgba(28, 28, 26, 0.94); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 32px -8px rgba(0, 0, 0, 0.5);
  transform-origin: bottom right; animation: menu-in 160ms var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: scale(0.96) translateY(4px); } }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px 0 28px; border: 0; border-radius: 6px;
  position: relative; background: transparent; color: #fff; text-align: left; cursor: pointer;
  font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums;
}
.menu-item small { margin-left: auto; font: 500 12px/1 var(--sans); color: var(--ctl-dim); }
.menu-item[aria-checked="true"]::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #ffd447; }
.menu-item:hover, .menu-item:focus-visible { outline: none; background: rgba(255, 255, 255, 0.1); }
.player.menu-open .controls { opacity: 1; transform: none; pointer-events: auto; }

.player.fullscreen { width: 100%; height: 100%; border-radius: 0; background: #000; }
.player.fullscreen video { object-fit: contain; }
.player.fullscreen .controls { padding: 56px 24px 16px; }

@media (max-width: 640px) {
  .controls { padding: 24px 4px 2px; }
  .bar-side { gap: 0; }
  .time { margin-left: 2px; }
  .vol-wrap .vol { display: none; }
  .ctl.pip { display: none; }
  .scrub-frame { width: 128px; }
}

@media (max-width: 640px) {
  .nav { padding: 16px 16px 0; }
  .library { padding: 24px 16px 80px; }
  .drop { padding: 44px 16px 40px; }
  .drop h1 { font-size: 40px; }
  .video { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .thumb { width: 88px; }
  .video-actions { grid-column: 2; }
  .progress { width: 100%; }
  .watch { padding: 16px 16px 56px; }
  .stage, .about { width: 100%; }
  .about { flex-direction: column; gap: 16px; }
  .title { font-size: 26px; }
}

/* A phone on its side: the video gets the whole height, and the name and buttons wait below. */
@media (orientation: landscape) and (max-height: 520px) {
  body:has(.watch) .nav { display: none; }
  .watch { padding: 8px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left)); }
  .stage, .about { width: min(100%, calc((100svh - 16px) * var(--ar))); min-width: 0; }
  .about { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}