:root { color-scheme:dark; font:17px/1.7 system-ui,sans-serif; color:#e9edff; background:#141b30; }
* { box-sizing:border-box; }
body { margin:0; }
main,body>header,body>footer { max-width:1000px; margin:auto; padding:24px; }
body>header,nav { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; }
body>header { justify-content:space-between; border-bottom:1px solid #394467; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; text-decoration:none; }
.brand img { width:56px; height:56px; }
a { color:#b8c9ff; text-underline-offset:4px; }
a:focus-visible { outline:3px solid #f5ce85; outline-offset:4px; }
nav a,footer a { display:inline-flex; align-items:center; min-height:44px; }
h1,h2,h3 { line-height:1.2; text-wrap:balance; }
h1 { font-size:clamp(32px,6vw,52px); max-width:820px; margin:16px 0 24px; letter-spacing:-.035em; }
h2 { font-size:28px; margin:0 0 16px; }
h3 { font-size:20px; margin:28px 0 10px; }
p { margin:0 0 18px; }
li { margin:10px 0; }
section { margin:48px 0; scroll-margin-top:24px; }
.eyebrow { color:#b5bfdf; font-size:14px; letter-spacing:.06em; }
.intro { font-size:20px; max-width:800px; }
.play { display:inline-flex; min-height:48px; align-items:center; padding:10px 22px; border-radius:12px; background:#b8c9ff; color:#141b30; text-decoration:none; font-weight:750; }
figure { margin:28px 0; }
figure img { display:block; max-width:100%; height:auto; border-radius:18px; }
figcaption { color:#b5bfdf; font-size:14px; margin-top:8px; }
.facts { display:grid; grid-template-columns:minmax(110px,1fr) 3fr; gap:0 20px; padding:22px; border:1px solid #394467; border-radius:16px; }
dt,dd { padding:10px 0; margin:0; border-bottom:1px solid #394467; }
dt { font-weight:650; }
.example { padding:20px; border-radius:12px; background:#202a46; }
.example code { font:700 25px/1.5 ui-monospace,monospace; white-space:nowrap; letter-spacing:4px; }
body>footer { border-top:1px solid #394467; color:#b5bfdf; font-size:14px; }
@media(max-width:480px) { main,body>header,body>footer { padding:20px; } .facts { grid-template-columns:1fr; padding:16px; } dt { border:0; padding-bottom:0; } dd { padding-top:4px; } }