:root{
  --bg:#eef1ff;
  --panel:#ffffff;
  --muted:#5a6480;
  --ink:#0b1635;
  --brand:#4f6dff;
  --accent:#9fb6ff;
  --shadow:0 20px 50px rgba(11,22,53,.14);
  --radius:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font:16px/1.6 'Space Grotesk','Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  color:var(--ink);
  background:radial-gradient(1200px 900px at 14% 12%, rgba(79,109,255,.16), transparent 45%), radial-gradient(1200px 900px at 82% 18%, rgba(159,182,255,.14), transparent 52%), var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none; font-weight:600;}
.page{max-width:960px; margin:0 auto; padding:22px clamp(16px,5vw,32px);}
.shell{background:var(--panel); border:1px solid rgba(16,24,40,.08); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; margin-top:18px;}
header{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; letter-spacing:-0.01em;}
.brand svg{width:34px; height:34px;}
.crumbs{font-size:14px; color:var(--muted);}
h1{margin:12px 0 6px; font-size:30px; letter-spacing:-0.01em;}
h2{margin:18px 0 8px; font-size:20px; letter-spacing:-0.01em;}
h3{margin:12px 0 6px; font-size:17px;}
p{margin:6px 0;}
ul{margin:8px 0 12px 18px; color:var(--muted);}
li{margin:4px 0;}
.muted{color:var(--muted);}
.footer{margin:24px 0 12px; color:var(--muted);}
.footer a{color:var(--brand); font-weight:600;}
.card{background:var(--panel); border:1px solid rgba(16,24,40,.08); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);}
button.back{border:1px solid rgba(16,24,40,.12); background:#fff; border-radius:12px; padding:8px 14px; cursor:pointer; font:inherit; color:var(--ink); font-weight:600;}