:root{
  --bg:#E9ECEE;--surface:#FFFFFF;--line:#D3D9DD;--ink:#151B20;--muted:#5A6670;--accent:#1D6F65;--rail:#1B2328;
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root{--bg:#101518;--surface:#182025;--line:#2C373E;--ink:#E4EAED;--muted:#98A5AD;--accent:#4DB8A8;--rail:#0B0F11}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-body)}
a{color:var(--accent)}
.top{background:var(--rail);color:#fff;padding:14px 16px}
.top .in{max-width:820px;margin:0 auto;display:flex;align-items:center;gap:12px}
.mark{width:34px;height:34px;border:2px solid #fff;display:grid;place-items:center;font:700 15px var(--f-display);letter-spacing:.04em}
.name{font:700 20px/1 var(--f-display);letter-spacing:.02em}
.name small{display:block;font:500 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-top:3px}
main{max-width:820px;margin:24px auto 48px;padding:0 16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px 28px 32px}
h1,h2{font-family:var(--f-display);line-height:1.15;margin:0}
h1{font-size:34px;margin-bottom:4px}
h2{font-size:21px;margin:28px 0 6px}
.meta{color:var(--muted);font-size:14px;margin-bottom:20px}
p,li{max-width:70ch}
ul{padding-left:22px}
footer{max-width:820px;margin:0 auto 40px;padding:0 16px;color:var(--muted);font-size:13px;display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:560px){.card{padding:20px 16px 24px}h1{font-size:28px}}