:root{color-scheme:dark;--bg:#0b1013;--panel:#131d22;--ink:#eff6f5;--muted:#a6bbb8;--accent:#98e5cb}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 system-ui,sans-serif}
a{color:var(--accent);text-underline-offset:4px}a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
header,main,footer{max-width:1080px;margin:auto;padding:28px}header{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #293c41}
.brand{font-weight:800;letter-spacing:.1em;text-decoration:none}.eyebrow{color:var(--accent);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
h1{font-size:clamp(38px,7vw,76px);line-height:1.06;letter-spacing:-.045em;margin:26px 0}h2{line-height:1.25}.intro{max-width:670px;color:var(--muted);font-size:20px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:40px 0}.card{background:var(--panel);border:1px solid #293c41;border-radius:16px;padding:28px}
.card h2{font-size:27px;margin:0 0 10px}.meta,footer{color:var(--muted)}.button{display:inline-block;background:var(--accent);color:#09251d;padding:10px 18px;border-radius:7px;font-weight:700;text-decoration:none;margin:10px 8px 0 0}
.note{border-left:3px solid var(--accent);padding:14px 20px;background:var(--panel)}article{max-width:800px}article h1{font-size:44px}article h2{margin-top:36px;font-size:25px}footer{font-size:14px;border-top:1px solid #293c41}code{overflow-wrap:anywhere}
@media(max-width:680px){.grid{grid-template-columns:1fr}header,main,footer{padding:22px}.card{padding:22px}}