:root { color-scheme: dark; --bg:#0c1118; --panel:#141d27; --line:#2a3a49; --text:#f3f7fa; --muted:#b9c7d2; --accent:#81c6ff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--accent); text-underline-offset:.18em; }
.site-header,.site-footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem max(1rem,calc((100vw - 1080px)/2)); border-bottom:1px solid var(--line); }
.site-header nav,.site-footer { display:flex; gap:1rem; flex-wrap:wrap; }
.site-footer { border-top:1px solid var(--line); border-bottom:0; color:var(--muted); }
.brand { font-size:1.1rem; font-weight:750; color:var(--text); text-decoration:none; }
.page { width:min(1080px,calc(100% - 2rem)); margin:2rem auto 4rem; }
.breadcrumb,.eyebrow,.status { color:var(--muted); font-size:.85rem; }
.breadcrumb { display:flex; gap:.55rem; margin-bottom:2rem; }
.eyebrow { letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
h1 { max-width:800px; margin:.2rem 0 1rem; font-size:clamp(2.1rem,6vw,4rem); line-height:1.05; }
h2 { line-height:1.2; }
.lead { max-width:760px; color:#d8e3eb; font-size:1.2rem; }
.latest,.about,.topic-nav,.guide-cta { margin-top:2.5rem; padding:clamp(1rem,3vw,2rem); border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; }
.section-heading h2 { margin:.1rem 0 .7rem; }
.video-list { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); }
.video-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:.8rem; background:#0e151d; }
.video-card video { display:block; width:100%; min-height:200px; max-height:480px; background:#03070b; }
.video-copy { padding:1rem; }
.video-copy h3 { margin:.1rem 0 .4rem; }
.video-copy time { color:var(--muted); font-size:.9rem; }
.empty,.status[data-state="error"] { color:var(--muted); }
.topic-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:1rem; margin-top:2rem; }
.topic-card { padding:1.25rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.topic-card h2 { margin:.3rem 0 .7rem; }
.topic-card h2 a { color:var(--text); }
.card-link { display:inline-block; margin-top:.5rem; }
.topic-nav div { display:flex; flex-wrap:wrap; gap:.7rem 1.2rem; }
.guide-cta { border-color:#44759a; }
.button { display:inline-block; margin-top:.5rem; padding:.7rem 1rem; border-radius:.6rem; background:#b7e1ff; color:#08131c; font-weight:750; text-decoration:none; }
@media(max-width:600px) { .site-header { align-items:flex-start; flex-direction:column; } .section-heading { align-items:flex-start; flex-direction:column; } .video-card video { min-height:170px; } }