:root { color-scheme: dark; --yellow:#ffc400; --ink:#0c0d0e; --panel:#202326; --paper:#f4f1e8; --steel:#9ba0a4; --cyan:#39bed1; }
* { box-sizing: border-box; }
body { margin:0; background:var(--ink); color:var(--paper); font:17px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { width:min(900px,calc(100% - 32px)); margin:0 auto; padding:42px 0 28px; }
.brand { display:flex; gap:18px; align-items:center; padding:20px 22px; color:#17191b; background:var(--yellow); border-radius:16px; }
.brand .mark { display:grid; place-items:center; width:64px; height:64px; background:#17191b; color:var(--yellow); border-radius:12px; font-size:34px; font-weight:900; }
.brand span,.eyebrow { font-weight:900; letter-spacing:.14em; font-size:.76rem; }
h1 { margin:0; font-size:clamp(1.55rem,5vw,2.5rem); line-height:1.08; }
h2 { margin:.2rem 0 1rem; font-size:clamp(1.8rem,5vw,3.2rem); line-height:1.08; }
h3 { margin:1.7rem 0 .35rem; color:var(--yellow); }
.panel { margin-top:24px; padding:clamp(22px,5vw,46px); background:linear-gradient(145deg,#24282b,var(--panel)); border:1px solid #4a4e51; border-radius:18px; }
.eyebrow { color:var(--cyan); }
nav { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
a { color:var(--yellow); font-weight:750; }
a.primary { display:inline-block; padding:12px 18px; color:#17191b; background:var(--yellow); border-radius:10px; text-decoration:none; }
.prose { max-width:760px; }
li { margin:.45rem 0; }
footer { padding:24px 4px; color:var(--steel); font-size:.85rem; }
@media (max-width:540px) { .brand { align-items:flex-start; } .brand .mark { width:52px; height:52px; flex:0 0 52px; } }