:root { color-scheme: light; font-family: system-ui, sans-serif; color: #172033; background: #f5f7fb; }
body { margin: 0; }
.page { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
input { min-width: 18rem; min-height: 2.5rem; font-size: 1rem; }
button { min-height: 2.5rem; padding: 0 .9rem; font-size: 1rem; font-weight: 700; color: #fff; background: #173e8c; border: 0; border-radius: .25rem; }
.result-card { margin-top: 1rem; padding: 1rem; background: #fff; border: 1px solid #b7c1d8; border-radius: .5rem; }
.result-card h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.result-card.active-card { border-color: #173e8c; box-shadow: 0 0 0 3px #c9d8ff; }
.result-card.unavailable-card { border-color: #a33a3a; }
.card-metadata, .time-label, .card-status { color: #44516a; }
.clip-context { white-space: pre-wrap; }
.player-frame { width: min(100%, 640px); min-width: min(100%, 480px); aspect-ratio: 16 / 9; background: #000; }
.youtube-player-host, .player-frame iframe { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; border: 0; }
.playback-controls { display: flex; flex-wrap: wrap; gap: .4rem; }
.result-card button { margin: .2rem; }
.result-card button:disabled { opacity: .5; cursor: not-allowed; }