:root{
  --fg:#0a0a0a; --muted:#6b7280; --bg:#ffffff; --line:#e5e7eb;
  --accent:#111827; --accent-2:#111; --ring:#11182722; --brand:#0a0a0a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.55}
.wrap{max-width:980px;margin:0 auto;padding:24px}
header.wrap,footer.wrap{padding-top:28px;padding-bottom:28px}
h1{font-size:2.35rem;letter-spacing:-.015em;margin:.2rem 0 .8rem}
h2{font-size:1.6rem;margin:1.6rem 0 .6rem}
h3{font-size:1.1rem;margin:.9rem 0 .35rem}
p{margin:.6rem 0}
ul,ol{padding-left:1.2rem}
nav a{color:var(--fg);text-decoration:none;margin-right:12px}
nav a:hover{border-bottom:1px solid var(--fg)}
.sub{color:var(--muted)}
.small{font-size:.95rem;color:var(--muted)}
.tiny{font-size:.85rem;color:var(--muted)}
.btn{display:inline-block;padding:12px 16px;border:1px solid var(--accent);border-radius:10px;text-decoration:none;color:var(--fg);transition:transform .05s ease, box-shadow .2s ease;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px var(--ring)}
.btn.ghost{border-color:#c7cbd1;color:#111}
.link{text-decoration:none;border-bottom:1px solid var(--fg)}
hr{border:none;border-top:1px solid var(--line);margin:24px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.cards li,.box{border:1px solid var(--line);border-radius:14px;padding:14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.band{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f8fafc;border:1px solid var(--line);padding:0 6px;border-radius:6px}
.badge{display:inline-block;font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:#111;background:#fff}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--line);padding:10px;text-align:left;font-size:.98rem}
.table thead th{background:#f9fafb}
.notice{background:#f9fafb;border:1px dashed var(--line);padding:10px;border-radius:10px}
.hero{padding-top:6px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f8fafc;border:1px solid var(--line);padding:1px 5px;border-radius:6px}
footer.wrap{border-top:1px solid var(--line);margin-top:28px}