:root{
  --bg:#0b1020;
  --panel:#111831;
  --panel2:#161f3f;
  --text:#edf2ff;
  --muted:#aeb8d8;
  --line:#2a3764;
  --accent:#74c0fc;
  --accent2:#8ce99a;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  background:linear-gradient(180deg,#09101c 0%, #0c1428 100%);
  color:var(--text);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;overflow:auto;
  padding:24px 18px;border-right:1px solid var(--line);
  background:rgba(9,16,28,.88);backdrop-filter: blur(8px);
}
.brand{font-size:1.2rem;font-weight:800;letter-spacing:.03em;margin-bottom:8px}
.tag{font-size:.84rem;color:var(--muted);line-height:1.5;margin-bottom:24px}
.navgroup{margin:18px 0}
.navgroup h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:#90a4d4;margin:0 0 10px}
.navgroup a{display:block;padding:8px 10px;border-radius:10px;color:var(--text);margin:2px 0}
.navgroup a:hover,.navgroup a.active{background:var(--panel2);text-decoration:none}
.main{padding:32px}
.wrap{max-width:var(--max);margin:0 auto}
.hero{
  padding:28px;border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(135deg,rgba(116,192,252,.12),rgba(140,233,154,.08));
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#9cc7ff}
h1{font-size:clamp(2rem,5vw,3.7rem);line-height:1.05;margin:.35rem 0 1rem}
h2{font-size:1.8rem;margin:2.1rem 0 .7rem}
h3{font-size:1.2rem;margin:1.5rem 0 .5rem}
p, li{color:var(--text);line-height:1.72}
.lead{font-size:1.08rem;color:#dbe7ff}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:20px}
.card{
  grid-column:span 4;padding:18px;border:1px solid var(--line);
  border-radius:18px;background:rgba(17,24,49,.7)
}
.card h3{margin-top:0}
.note{
  padding:16px 18px;border-left:4px solid var(--accent2);
  background:rgba(140,233,154,.08);border-radius:12px;margin:18px 0
}
.warn{
  padding:16px 18px;border-left:4px solid #ffd43b;
  background:rgba(255,212,59,.09);border-radius:12px;margin:18px 0;color:#fff6cc
}
.diagram-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.diagram-grid img{width:100%;border-radius:16px;border:1px solid var(--line);background:white}
.panel{padding:24px;border:1px solid var(--line);border-radius:20px;background:rgba(17,24,49,.65);margin:22px 0}
.downloads a{display:inline-block;margin:0 10px 10px 0;padding:10px 14px;background:var(--panel2);border-radius:999px}
.doc p{margin:0 0 1rem}
.doc ul{padding-left:1.2rem}
.doc pre{white-space:pre-wrap;background:#0a1227;padding:16px;border-radius:14px;border:1px solid var(--line);overflow:auto}
.mini{color:var(--muted);font-size:.92rem}
table.claimmap{width:100%;border-collapse:collapse;font-size:.95rem}
.claimmap th,.claimmap td{border:1px solid var(--line);padding:10px;vertical-align:top}
.claimmap th{background:var(--panel2);text-align:left}
footer{margin:40px 0 16px;color:var(--muted);font-size:.9rem}
@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;border-right:none;border-bottom:1px solid var(--line)}
  .main{padding:20px}
  .card{grid-column:span 12}
}