:root { color-scheme: light; font: 17px/1.6 system-ui, sans-serif; color: #202b3c; background: #fff; }
body { margin: 0; }
main { max-width: 1100px; padding: 36px 24px; margin: auto; }
a { color: #2459ce; text-underline-offset: 4px; }
.brand { color: #202b3c; font-weight: 750; text-decoration: none; font-size: 23px; }
h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; margin: 24px 0 16px; letter-spacing: -.02em; }
p { max-width: 860px; color: #4e607b; }
.recording-note { font-size: 14px; }
video { display: block; width: 100%; max-height: 65vh; background: #172033; border: 1px solid #d4deeb; margin-top: 24px; }
nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 28px 0; }
.button { display: inline-block; border-radius: 4px; padding: 10px 20px; background: #2459ce; color: white; font-weight: 650; text-decoration: none; }
a:focus-visible, video:focus-visible { outline: 3px solid #2459ce; outline-offset: 4px; }
@media (max-width: 480px) { main { padding: 24px 16px; } nav { gap: 18px; } }

.transcript { border-top: 1px solid #d4deeb; margin-top: 28px; padding-top: 20px; }
.transcript summary { cursor: pointer; font-weight: 650; color: #2459ce; }
.transcript ol { padding-left: 24px; }
.transcript li { margin: 24px 0; }
.transcript p { margin: 6px 0; }
.transcript summary:focus-visible { outline: 3px solid #2459ce; outline-offset: 4px; }