:root{--mx:clamp(16px,4vw,22px);--bg:#0b0b0c;--fg:#f5f7fa;--muted:#a6adbb;--brand:#f2d12e;--card:#121317;--ring:rgba(242,209,46,.35)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;color:var(--fg);background:var(--bg)}
a{color:inherit}
.container{max-width:980px;margin-inline:auto;padding:24px}
.header{display:flex;gap:16px;align-items:center;padding:20px 0}
.header h1{margin:0;font-size:clamp(22px,4vw,28px);letter-spacing:.2px}
.header .tagline{color:var(--muted);font-size:14px;margin-top:4px}
.nav{display:flex;gap:12px;margin-left:auto}
.nav a{padding:8px 12px;border:1px solid #1f232b;border-radius:999px;text-decoration:none}
.nav a:hover{border-color:var(--ring);box-shadow:0 0 0 4px var(--ring)}
.hero{display:grid;gap:18px;padding:24px;border:1px solid #1f232b;background:var(--card);border-radius:20px}
.hero h2{margin:.2em 0;font-size:clamp(24px,6vw,34px)}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{border:1px dashed #2a2f3a;border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted)}
.grid{display:grid;gap:16px}
@media(min-width:840px){.grid{grid-template-columns:1.2fr .8fr}}
.card{border:1px solid #1f232b;background:#0e0f13;border-radius:16px;padding:16px}
.card h3{margin-top:0}
.kv{display:grid;grid-template-columns:140px 1fr;gap:8px 12px}
.kv div{padding:6px 0;border-bottom:1px dotted #1f232b}
.kv b{color:#e8eaee}
.footer{color:var(--muted);font-size:12px;padding:40px 0}
button, .btn{cursor:pointer;background:var(--brand);color:#191a1f;border:0;border-radius:12px;padding:10px 14px;font-weight:700}
input{background:#0a0b0e;border:1px solid #1f232b;border-radius:12px;padding:10px 12px;color:var(--fg);width:100%}
form{display:grid;gap:8px}
pre{white-space:pre-wrap;word-wrap:break-word}
.hide{display:none}
blockquote{margin:0;border-left:3px solid #2f3340;padding-left:12px;color:#c3c8d2}
.small{font-size:12px;color:var(--muted)}
hr{border:0;border-top:1px solid #1f232b;margin:16px 0}