:root{
  --bg:#f5f7fb; --card:#ffffff; --text:#14324a; --muted:#627487;
  --brand:#0e8e9b; --brand-dark:#0b5f76; --line:#dfe7ef; --soft:#eef8f8;
  --danger:#b42318; --danger-soft:#fff3f2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,"Segoe UI",Tahoma,sans-serif;background:var(--bg);color:var(--text);line-height:1.75}
.wrap{max-width:980px;margin:auto;padding:28px 18px 60px}
.hero{background:linear-gradient(135deg,#ffffff 0%,#eef8f8 100%);border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:0 14px 40px rgba(25,55,80,.08)}
.brand{font-size:42px;font-weight:800;letter-spacing:-1px;margin:0}
.brand span{color:var(--brand)}
.tag{margin:6px 0 0;color:var(--muted)}
nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
nav a,.btn{display:inline-block;text-decoration:none;padding:11px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);font-weight:700}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;margin-top:22px;box-shadow:0 8px 28px rgba(25,55,80,.05)}
h1,h2,h3{line-height:1.3}
h2{margin-top:0;font-size:28px}
h3{margin-top:26px;font-size:20px}
p,li{color:#314b61}
small,.muted{color:var(--muted)}
ul{padding-inline-start:22px}
.notice{padding:16px 18px;border-radius:14px;background:var(--soft);border:1px solid #cde9e9}
.dangerbox{padding:18px;border-radius:14px;background:var(--danger-soft);border:1px solid #f4c7c3}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lang{border-top:1px solid var(--line);margin-top:28px;padding-top:26px}
footer{text-align:center;color:var(--muted);padding-top:28px;font-size:14px}
code{background:#eef2f5;padding:2px 6px;border-radius:6px}
@media(max-width:700px){.grid{grid-template-columns:1fr}.hero{padding:24px}.card{padding:22px}.brand{font-size:34px}}