:root {
  --bg: #f6f8fc;
  --bg-soft: #ffffff;
  --card: rgba(255,255,255,0.96);
  --text: #152033;
  --muted: #5f6f8f;
  --line: rgba(24, 39, 75, 0.08);
  --accent: #4f6bff;
  --accent-2: #0ea37f;
  --warn: #d98b00;
  --danger: #e25572;
  --shadow: 0 18px 48px rgba(47, 72, 136, 0.10);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",sans-serif;
  background: radial-gradient(circle at top left, #ffffff 0%, #eef3ff 30%, var(--bg) 72%);
  color:var(--text);
}
a{color:var(--text);text-decoration:none}
.shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{padding:28px 20px;border-right:1px solid var(--line);background:rgba(255,255,255,.84);backdrop-filter: blur(12px);position:sticky;top:0;height:100vh}
.brand{font-size:30px;font-weight:800;line-height:1.05;margin-bottom:28px;color:#14213d}
.brand span{font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
nav{display:flex;flex-direction:column;gap:8px}
nav a{padding:12px 14px;border-radius:14px;color:var(--muted);transition:.2s;background:transparent}
nav a.active, nav a:hover{background:rgba(79,107,255,.10);color:var(--accent)}
.content{padding:28px;display:flex;flex-direction:column;gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow)}
.hero{padding:36px;background:linear-gradient(135deg, rgba(79,107,255,.08), rgba(14,163,127,.06), rgba(255,255,255,.9))}
.hero.compact{padding:28px 30px}
.eyebrow{color:var(--accent-2);text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:800;margin:0 0 12px}
h1{font-size:56px;line-height:1.02;letter-spacing:-.04em;margin:0 0 16px;color:#101a31}
h2{font-size:28px;line-height:1.1;margin:0 0 14px;color:#14213d}
h3{font-size:20px;margin:0 0 10px;color:#1b2a49}
p, li{font-size:17px;line-height:1.7;color:var(--text)}
.lead{max-width:860px;color:var(--muted);font-size:20px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chips span{padding:10px 14px;border-radius:999px;background:rgba(79,107,255,.08);border:1px solid rgba(79,107,255,.16);color:#3147a8}
.grid{display:grid;gap:20px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.small p{min-height:72px;color:var(--muted)}
.small a{color:var(--accent-2);font-weight:700}
.stack{display:flex;flex-direction:column;gap:16px}.stack-item{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start}
.stack-item span{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--accent),#86a0ff);color:white;font-weight:800}
table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:white}th,td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:15px}th{background:#f5f8ff;color:#385089}
code{background:#f1f4fb;padding:3px 8px;border-radius:8px;color:#223563}
.warn{border-color:rgba(217,139,0,.18);background:linear-gradient(180deg, rgba(255,243,217,.8), rgba(255,255,255,.96))}
.success{border-color:rgba(14,163,127,.18);background:linear-gradient(180deg, rgba(228,251,245,.85), rgba(255,255,255,.96))}
ul,ol{padding-left:22px}
@media (max-width: 960px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;border-right:none;border-bottom:1px solid var(--line)}
  .grid.two,.grid.three{grid-template-columns:1fr}
  .content{padding:18px}
  h1{font-size:38px}
}