:root{--bg:#fff;--fg:#14202b;--mut:#51606d;--ln:#e3e8ee;--ac:#0f766e;--ac2:#0b5a54;--card:#f6f9fb;--hero:linear-gradient(135deg,#e8f7f4 0%,#eef4ff 100%)}
@media (prefers-color-scheme:dark){:root{--bg:#0f1418;--fg:#e8eef2;--mut:#9fb0bd;--ln:#27323b;--ac:#4fd1c0;--ac2:#7fe3d6;--card:#161d23;--hero:linear-gradient(135deg,#10231f 0%,#111a2b 100%)}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--ac)}a:hover{color:var(--ac2)}a:focus-visible,button:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.skip{position:absolute;inset-inline-start:-999px}.skip:focus{inset-inline-start:8px;top:8px;background:var(--bg);padding:8px;z-index:9}
header,footer{padding:16px}header{border-bottom:1px solid var(--ln)}footer{border-top:1px solid var(--ln);margin-top:56px;color:var(--mut);font-size:.92rem}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;padding:0;font-size:.95rem}
nav a[aria-current=page]{font-weight:700;text-decoration:none}
.brand{font-weight:800;font-size:1.2rem;text-decoration:none;color:var(--fg);display:inline-flex;align-items:center;gap:8px}.brand svg{width:26px;height:26px}
main{padding-block:28px}h1{line-height:1.25;font-size:2rem}h2{margin-top:2.2rem;font-size:1.35rem}h3{margin-top:1.6rem}
.hero{background:var(--hero);border:1px solid var(--ln);border-radius:20px;padding:44px 28px;margin-block:8px 28px}
.hero h1{font-size:2.5rem;margin:0 0 8px}.hero p{font-size:1.15rem;color:var(--mut);margin:0 0 20px;max-width:620px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-block:24px}
.card{background:var(--card);border:1px solid var(--ln);border-radius:14px;padding:18px 20px}.card h2{margin:0 0 6px;font-size:1.05rem}.card p{margin:0;color:var(--mut)}
.links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:20px 0}.links a{display:inline-block;border:1px solid var(--ln);border-radius:999px;padding:6px 16px;text-decoration:none;background:var(--card)}.links a:hover{border-color:var(--ac)}
.card h2{margin-top:0}table{width:100%;table-layout:fixed;overflow-wrap:anywhere;border-collapse:collapse}td,th{border:1px solid var(--ln);padding:6px 10px;text-align:start}code{overflow-wrap:anywhere}
.notice{border:1px solid var(--ln);border-inline-start:4px solid var(--ac);padding:10px 14px;margin-block:16px;color:var(--mut)}
