:root { color-scheme: dark; font: 16px/1.55 system-ui, sans-serif; background: #121a27; color: #f5f7fa; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 800px; margin: auto; padding: 24px 20px 40px; }
h1 { margin: 4px 0; font-size: clamp(26px, 5vw, 36px); line-height: 1.2; }
h2 { font-size: 20px; margin-bottom: 6px; }
p { margin: 12px 0; }
a { color: #b5d5ff; text-underline-offset: 3px; }
.eyebrow, .note, footer { color: #b3c0d2; font-size: 14px; }
nav, .actions, footer { display: flex; flex-wrap: wrap; gap: 10px; }
nav { margin: 24px 0; }
nav a { padding: 9px 12px; border: 1px solid #637a99; border-radius: 6px; text-decoration: none; }
nav a[aria-current="page"] { color: #121a27; background: #b5d5ff; border-color: #b5d5ff; }
.video-js { width: 100%; height: 280px; margin: 18px 0; }
button { font: 600 16px system-ui, sans-serif; border: 1px solid #b5d5ff; background: #b5d5ff; color: #121a27; padding: 12px 16px; border-radius: 6px; cursor: pointer; }
button.secondary { background: transparent; color: #b5d5ff; }
button:disabled { opacity: .5; cursor: wait; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #ffda89; outline-offset: 4px; }
#result { font-weight: 600; color: #ffda89; }
pre { font: 13px/1.6 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: #1f2c40; padding: 16px; border-radius: 6px; }
code { overflow-wrap: anywhere; }
details { border-top: 1px solid #425169; padding: 16px 0; }
summary { cursor: pointer; font-weight: 600; }
footer { border-top: 1px solid #425169; padding-top: 20px; gap: 12px 24px; }
@media (max-width: 480px) { main { padding: 20px 14px; } .video-js { height: 220px; } nav a { flex: 1 1 100%; } }