:root {
  color-scheme: dark;
  --surface-canvas: #0b0b0c;
  --surface-player: #000000;
  --surface-panel: #151516;
  --surface-raised: #202022;
  --surface-active: #29292c;
  --surface-header: rgba(11, 11, 12, 0.94);
  --surface-control: rgba(255, 255, 255, 0.1);
  --surface-control-hover: rgba(255, 255, 255, 0.14);
  --surface-marker: rgba(0, 0, 0, 0.68);
  --surface-controls-end: rgba(0, 0, 0, 0.88);
  --text-primary: #f5f5f5;
  --text-secondary: #b8b8bd;
  --text-tertiary: #a3a3aa;
  --border-subtle: #303034;
  --accent-primary: #ff4e45;
  --accent-hover: #ff675f;
  --focus-ring: #ffffff;
  --status-error: #ff7b75;
  --space-half: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --type-title: 1.25rem;
  --type-section: 1rem;
  --type-body: 1rem;
  --type-label: 0.875rem;
  --type-meta: 0.75rem;
  --type-compact: 0.6875rem;
  --radius-frame: 0.75rem;
  --radius-panel: 0.75rem;
  --radius-row: 0.5rem;
  --radius-control: 0.5rem;
  --radius-thumb: 0.375rem;
  --radius-pill: 1.5rem;
  --radius-key: 0.25rem;
  --motion-micro: 120ms;
  --motion-standard: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-player: 0 1rem 3rem rgba(0, 0, 0, 0.32);
  --line-base: 0.0625rem;
  --size-header: 4.25rem;
  --size-touch: 2.75rem;
  --size-brand-mark: 2.25rem;
  --size-icon: 1.375rem;
  --size-icon-small: 1.125rem;
  --size-volume: 5rem;
  --size-speed-tall: 3rem;
  --size-speed-compact: 3.5rem;
  --size-thumb-desktop: 7rem;
  --size-thumb-mobile: 6.5rem;
  --size-row: 5rem;
  --size-row-intrinsic: 5.25rem;
  --size-active-stripe: 0.1875rem;
  --layout-content-max: 100rem;
  --layout-rail-min: 20rem;
  --layout-rail-max: 24rem;
  --layout-state-max: 30rem;
  --layout-list-offset: 11rem;
  --leading-body: 1.5;
  --leading-title: 1.25;
  --leading-label: 1.35;
  --weight-label: 600;
  --weight-action: 650;
  --weight-brand: 750;
  --tracking-tight: -0.02em;
  font-family: Geist, Aptos, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { background: var(--surface-canvas); }

body {
  min-inline-size: 20rem;
  min-block-size: 100dvh;
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

button, input, select { font: inherit; }
button { touch-action: manipulation; }
img, video { display: block; max-inline-size: 100%; }

.skip-link {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 100;
  translate: 0 -160%;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--text-primary);
  color: var(--surface-canvas);
}
.skip-link:focus { translate: 0; }

:focus-visible {
  outline: 0.125rem solid var(--focus-ring);
  outline-offset: 0.125rem;
}

.app-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(12rem, 40rem) auto;
  align-items: center;
  gap: var(--space-5);
  min-block-size: var(--size-header);
  padding: var(--space-3) clamp(var(--space-4), 3vw, var(--space-8));
  border-block-end: var(--line-base) solid color-mix(in srgb, var(--border-subtle) 72%, transparent);
  background: var(--surface-header);
  backdrop-filter: blur(1rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: max-content;
  color: var(--text-primary);
  font-size: var(--type-section);
  font-weight: var(--weight-brand);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  inline-size: var(--size-brand-mark);
  block-size: var(--size-brand-mark);
  border-radius: var(--radius-control);
  background: var(--accent-primary);
}
.brand__mark img { inline-size: var(--space-5); filter: brightness(0); }

.search { position: relative; inline-size: 100%; }
.search label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search img {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-4);
  inline-size: var(--size-icon-small);
  translate: 0 -50%;
  filter: invert(1);
  opacity: 0.64;
  pointer-events: none;
}
.search input {
  inline-size: 100%;
  min-block-size: var(--size-touch);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--size-touch);
  border: var(--line-base) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-panel);
  color: var(--text-primary);
}
.search input::placeholder { color: var(--text-tertiary); }
.search input:focus { border-color: var(--text-secondary); }

.library-count {
  color: var(--text-secondary);
  font-size: var(--type-label);
  font-weight: var(--weight-label);
  white-space: nowrap;
}

.watch-shell {
  inline-size: min(100%, var(--layout-content-max));
  margin-inline: auto;
  padding: clamp(var(--space-4), 2vw, var(--space-8));
}

.watch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--layout-rail-min), var(--layout-rail-max));
  align-items: start;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}

.watch-main { min-inline-size: 0; }

.video-stage {
  position: relative;
  display: grid;
  overflow: hidden;
  aspect-ratio: var(--video-aspect, 16 / 9);
  border-radius: var(--radius-frame);
  background: var(--surface-player);
  box-shadow: var(--shadow-player);
  isolation: isolate;
}
.video-stage.is-tall {
  inline-size: min(100%, var(--video-tall-inline, 100%));
  margin-inline: auto;
}
.video-stage.is-tall .player-controls { padding-inline: var(--space-2); }
.video-stage.is-tall .control-row { gap: 0; }
.video-stage.is-tall #previous,
.video-stage.is-tall .volume-control input { display: none; }
.video-stage.is-tall .time-display { margin-inline: 0; font-size: var(--type-compact); }
.video-stage.is-tall .speed-select { inline-size: var(--size-speed-tall); }
.video-stage:fullscreen { inline-size: 100%; block-size: 100%; max-block-size: none; aspect-ratio: auto; }
.video-stage > * { grid-area: 1 / 1; }
.video-stage video { inline-size: 100%; block-size: 100%; object-fit: contain; }
.video-stage.is-loading video { visibility: hidden; }
.player-poster {
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  background: var(--surface-player);
}
.video-stage:not(.is-loading) .player-poster,
.player-poster[hidden] { display: none; }

.player-state {
  z-index: 1;
  place-self: center;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-inline-size: var(--layout-state-max);
  padding: var(--space-6);
  color: var(--text-secondary);
  text-align: center;
  pointer-events: none;
}
.player-state[hidden] { display: none; }
.player-state img { inline-size: 2rem; filter: invert(1); opacity: 0.76; }
.player-state strong { color: var(--text-primary); font-size: var(--type-section); }
.player-state span { font-size: var(--type-label); }

.player-controls {
  z-index: 2;
  align-self: end;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4) var(--space-3);
  background: linear-gradient(to bottom, transparent, var(--surface-controls-end));
  transition: opacity var(--motion-standard) var(--ease-out), transform var(--motion-standard) var(--ease-out);
}
.video-stage.is-empty .player-controls { display: none; }

.progress {
  inline-size: 100%;
  block-size: var(--space-5);
  margin: 0;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.control-row { display: flex; align-items: center; gap: var(--space-1); min-inline-size: 0; }
.control-row__end { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }

.icon-button, .text-button {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--size-touch);
  min-block-size: var(--size-touch);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--motion-micro) var(--ease-out), transform var(--motion-micro) var(--ease-out), color var(--motion-micro) var(--ease-out);
}
.icon-button:hover, .text-button:hover { background: var(--surface-control-hover); }
.icon-button:active, .text-button:active { transform: scale(0.96); }
.icon-button[aria-pressed="true"], .text-button[aria-pressed="true"] { background: var(--accent-primary); color: var(--surface-player); }
.icon-button:disabled, .text-button:disabled { cursor: not-allowed; opacity: 0.38; }
.icon-button img { inline-size: var(--size-icon); filter: invert(1); }
.icon-button[aria-pressed="true"] img { filter: brightness(0); }
.text-button { grid-auto-flow: column; gap: var(--space-2); padding-inline: var(--space-3); font-size: var(--type-label); font-weight: var(--weight-action); }
.text-button img { inline-size: var(--size-icon-small); filter: invert(1); }
.text-button[aria-pressed="true"] img { filter: brightness(0); }

.time-display {
  margin-inline: var(--space-2);
  color: var(--text-primary);
  font-size: var(--type-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.volume-control { display: flex; align-items: center; }
.volume-control input { inline-size: var(--size-volume); accent-color: var(--text-primary); }

.speed-select {
  min-block-size: var(--size-touch);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--surface-control);
  color: var(--text-primary);
  font-size: var(--type-meta);
  font-weight: var(--weight-action);
  cursor: pointer;
}
.speed-select option { background: var(--surface-panel); }

.video-info { padding-block: var(--space-5) var(--space-6); }
.video-info h1 { margin: 0; font-size: var(--type-title); line-height: var(--leading-title); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.video-meta { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--type-label); }
.shortcut-hint { margin: var(--space-3) 0 0; color: var(--text-tertiary); font-size: var(--type-meta); }
kbd { padding: var(--space-half) var(--space-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-key); background: var(--surface-panel); color: var(--text-secondary); font: inherit; }

.playlist-panel {
  min-inline-size: 0;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
}
.playlist-header { display: grid; gap: var(--space-3); padding: var(--space-4); border-block-end: var(--line-base) solid var(--border-subtle); }
.playlist-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.playlist-heading h2 { margin: 0; font-size: var(--type-section); }
.playlist-status { color: var(--text-secondary); font-size: var(--type-meta); }
.playlist-actions { display: flex; gap: var(--space-2); }

.playlist-list {
  display: grid;
  gap: var(--space-1);
  max-block-size: calc(100dvh - var(--layout-list-offset));
  margin: 0;
  padding: var(--space-2);
  overflow-y: auto;
  list-style: none;
  scrollbar-color: var(--surface-active) transparent;
}

.playlist-item { min-inline-size: 0; content-visibility: auto; contain-intrinsic-block-size: var(--size-row-intrinsic); }
.playlist-button {
  display: grid;
  grid-template-columns: var(--size-thumb-desktop) minmax(0, 1fr);
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: var(--size-row);
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-row);
  background: transparent;
  color: var(--text-primary);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--motion-standard) var(--ease-out), transform var(--motion-micro) var(--ease-out);
}
.playlist-button:hover { background: var(--surface-raised); }
.playlist-button:active { transform: scale(0.99); }
.playlist-button[aria-current="true"] { background: var(--surface-active); box-shadow: inset var(--size-active-stripe) 0 var(--accent-primary); }

.thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-thumb);
  background: var(--surface-raised);
}
.thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.thumb-fallback { display: grid; place-items: center; inline-size: 100%; block-size: 100%; }
.thumb-fallback img { inline-size: 1.5rem; block-size: 1.5rem; object-fit: contain; filter: invert(1); opacity: 0.42; }
.now-marker { position: absolute; inset: var(--space-1); display: grid; place-items: center; background: var(--surface-marker); color: var(--text-primary); font-size: var(--type-meta); font-weight: 700; }

.playlist-copy { min-inline-size: 0; align-self: center; }
.playlist-title { display: -webkit-box; overflow: hidden; color: var(--text-primary); font-size: var(--type-label); font-weight: var(--weight-action); line-height: var(--leading-label); -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.playlist-meta { display: block; margin-block-start: var(--space-2); color: var(--text-tertiary); font-size: var(--type-meta); }

.empty-state { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-5); color: var(--text-secondary); text-align: center; }
.empty-state[hidden] { display: none; }
.empty-state img { inline-size: 2rem; filter: invert(1); opacity: 0.58; }
.empty-state strong { color: var(--text-primary); }
.empty-state p { max-inline-size: 32rem; margin: 0; font-size: var(--type-label); }
.empty-state code { color: var(--text-primary); overflow-wrap: anywhere; }

.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.showcase { display: grid; gap: var(--space-8); max-inline-size: 70rem; margin: auto; padding: var(--space-8); }
.showcase__section { display: grid; gap: var(--space-4); }
.showcase__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-panel); background: var(--surface-panel); }

@media (max-width: 60rem) {
  .watch-layout { grid-template-columns: minmax(0, 1fr); }
  .playlist-list { max-block-size: none; }
}

@media (max-width: 44rem) {
  .app-header { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
  .search { grid-column: 1 / -1; grid-row: 2; }
  .library-count { justify-self: end; }
  .watch-shell { padding: var(--space-2); }
  .video-stage { border-radius: var(--radius-row); }
  .player-controls { padding-inline: var(--space-2); padding-block-end: var(--space-2); }
  .control-row { gap: 0; }
  .volume-control input, .shortcut-hint, .control-skip-wide { display: none; }
  .time-display { margin-inline: var(--space-1); }
  .speed-select { inline-size: var(--size-speed-compact); }
  .video-info { padding-inline: var(--space-2); }
  .playlist-button { grid-template-columns: var(--size-thumb-mobile) minmax(0, 1fr); }
}

@media (max-width: 24rem) {
  .brand__text { display: none; }
  .library-count { font-size: var(--type-meta); }
  #previous, .speed-select { display: none; }
  .time-display { margin-inline: 0; font-size: var(--type-compact); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .icon-button:active, .text-button:active, .playlist-button:active { transform: none; }
}