:root {
  color-scheme: dark;
  --bg: #111214;
  --panel: #1a1b1f;
  --panel-raised: #23252a;
  --text: #f4f3f1;
  --muted: #aaa8a6;
  --line: #383a40;
  --accent: #ff8f9d;
  --accent-ink: #260c12;
  --focus: #ffd3d9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--bg); }
body { color: var(--text); overflow-x: hidden; }
button, select { font: inherit; }
button, select { min-height: 44px; }
button { border: 0; border-radius: 10px; padding: 0 18px; background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer; }
button:focus-visible, select:focus-visible, video:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.shell { width: min(100%, 840px); margin: 0 auto; padding: calc(20px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.topbar { padding: 8px 0 18px; }
.eyebrow { margin: 0; color: var(--accent); font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.35rem, 4vw, 1.8rem); letter-spacing: -.03em; }
h2 { margin-bottom: 0; font-size: clamp(1.15rem, 3vw, 1.4rem); letter-spacing: -.02em; }
.video-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #0a0b0c; border-radius: 14px; }
video { display: block; width: 100%; height: 100%; object-fit: contain; }
.video-status { position: absolute; inset: 50% 16px auto; margin: 0; color: var(--muted); text-align: center; transform: translateY(-50%); pointer-events: none; }
.video-frame[data-ready="true"] .video-status { display: none; }
.sheet { margin-top: 12px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.episode-heading { display: grid; gap: 8px; padding-bottom: 18px; }
.fields { display: grid; gap: 12px; }
label { display: grid; gap: 8px; color: var(--muted); font-size: .82rem; font-weight: 650; }
select { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; background: var(--panel-raised); color: var(--text); }
select:disabled { opacity: .6; }
.status { min-height: 1.3em; margin: 16px 0 0; color: var(--muted); font-size: .82rem; }
.message { margin-top: 12px; padding: 28px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.message p { margin: 10px 0 18px; color: var(--muted); line-height: 1.5; }
[hidden] { display: none !important; }

@media (min-width: 640px) { .fields { grid-template-columns: repeat(3, 1fr); } }
@media (orientation: landscape) and (max-height: 600px) {
  .shell { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 16px; align-items: start; }
  .topbar, .message { grid-column: 1 / -1; }
  .topbar { padding-bottom: 0; }
  .sheet { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }