:root{--bg:#f3f4f8;--paper:#ffffff;--ink:#1b1d2a;--muted:#5b6070;--line:#dfe2ec;--accent:#d7262f;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#14151d;--paper:#1c1e29;--ink:#eceef6;--muted:#a3a8bb;--line:#2e3142;--accent:#ff6b6b;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.strip{height:22px;background:var(--ink);background-image:repeating-linear-gradient(90deg,transparent 0 14px,var(--bg) 14px 24px,transparent 24px 38px);background-size:38px 8px;background-repeat:repeat-x;background-position:0 7px}
main{max-width:680px;margin:0 auto;padding:56px 24px 72px}
h1{font-size:clamp(2rem,6vw,2.8rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}
h2{font-size:1.15rem;margin:32px 0 8px}
p,li{color:var(--muted)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:28px}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
nav{display:flex;gap:20px;flex-wrap:wrap;margin-top:32px;font-size:.95rem}
footer{margin-top:40px;font-size:.85rem;color:var(--muted)}

.banner{display:block;width:100%;max-height:340px;object-fit:cover;background:#e3262f}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:16px;text-decoration:none;color:var(--ink)}
.brand img{width:56px;height:56px;border-radius:50%}
.brand span{font-weight:800;font-size:1.1rem}
.hero-logo{width:96px;height:96px;border-radius:50%;margin:-72px 0 16px;border:4px solid var(--bg);background:var(--bg)}
code{font-size:.9em;background:var(--bg);padding:1px 6px;border-radius:5px}