:root {
  --bg: #0b1220;
  --panel: #101a33;
  --text: #e6eaf2;
  --muted: #9fb0d1;
  --accent: #7aa2ff;
  --accent-2: #22d3ee;
  --border: #223153;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: radial-gradient(80rem 60rem at 10% -10%, #142046 0%, #080d1a 55%, #060a16 100%),
              linear-gradient(180deg, #0a1224, #060a14);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1100px, 92%); margin-inline: auto; }
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,13,26,0.6);
  backdrop-filter: saturate(130%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display:flex; align-items:center; gap:18px; padding:14px 0; }
.nav a.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; }
.nav img.logo { width:28px; height:28px; }
.nav .spacer { flex:1 }
.nav .menu { display:flex; gap:12px; flex-wrap:wrap; }
.nav .menu a {
  padding:8px 12px; border-radius: 10px; border: 1px solid transparent;
}
.nav .menu a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(34,211,238,.15), rgba(122,162,255,.15));
  border-color: var(--border);
}
.nav .tools { display:flex; gap:6px; }
button.icon {
  background: var(--panel); color: var(--text); border:1px solid var(--border);
  border-radius: 10px; padding:8px 10px; cursor:pointer; box-shadow: var(--shadow);
}
button.icon:hover { transform: translateY(-1px); }
main .hero {
  display:grid; grid-template-columns: 1.2fr 1fr; gap:26px; align-items:center;
  padding: 44px 0 12px;
}
@media (max-width: 900px) {
  main .hero { grid-template-columns: 1fr; padding-top: 28px; }
}
.card {
  background: linear-gradient(180deg, rgba(29,45,85,.38), rgba(16,26,51,.65));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px; box-shadow: var(--shadow);
}
.grid { display:grid; gap:16px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
}
.kbd { border:1px solid var(--border); background:rgba(0,0,0,.4); padding:2px 6px; border-radius:6px; }
ul.clean { padding-left: 1rem; }
footer {
  border-top:1px solid var(--border); margin-top: 30px; padding: 18px 0 30px; color: var(--muted);
}
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid var(--border); padding:10px; text-align:left; }
.badge { padding:4px 8px; border:1px solid var(--border); border-radius:20px; font-size:12px; }
.btn {
  display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(122,162,255,.22), rgba(34,211,238,.18));
  color: var(--text); text-decoration:none; box-shadow: var(--shadow);
}
.btn:hover { transform: translateY(-1px); }
figure.hero-art { margin:0; }
figure.hero-art img { width:100%; border-radius: 14px; border:1px solid var(--border); }
pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
pre {
  background: #0a1226; border: 1px solid var(--border); border-radius: 12px; padding: 14px; overflow:auto;
}
.alert { background:#091226; border:1px solid var(--border); border-left:4px solid var(--accent-2); padding:12px 14px; border-radius:12px; }
.small { color: var(--muted); font-size: .95rem; }
hr.soft { border: none; border-top:1px solid var(--border); margin: 16px 0; }

:root.light {
  --bg: #f7f9fc;
  --panel: #ffffff;
  --text: #0b1220;
  --muted: #475569;
  --accent: #3b82f6;
  --accent-2: #06b6d4;
  --border: #e5e7eb;
  --shadow: 0 10px 25px rgba(2,6,23,.08);
}
body.light {
  background: radial-gradient(60rem 40rem at 50% -20%, #f0f7ff 0%, #f9fbff 50%, #ffffff 100%);
}