:root {
  --bg: #0b0f14;
  --panel: #10161f;
  --panel-2: #0e141b;
  --text: #e6edf3;
  --muted: #a7b3c0;
  --link: #8ab4ff;
  --link-visited: #b39ddb;
  --accent: #7dd3fc;
  --accent-2: #a78bfa;
  --border: #1f2a36;
  --success: #4ade80;
  --danger: #f87171;
  --warning: #fbbf24;
  --shadow: 0 8px 24px rgba(0,0,0,.45);
  --radius: 16px;
  --maxw: 1100px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(180deg, var(--bg), #0a0d12 420px); color: var(--text); font-family: var(--sans); line-height: 1.6; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--link-visited); }
.header { position: sticky; top: 0; background: rgba(13,18,25,.7); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); z-index:50; }
.nav { display:flex; align-items:center; gap:1rem; max-width: var(--maxw); margin:0 auto; padding:.75rem 1rem; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.4px; }
.brand .logo { width:28px; height:28px; border-radius:8px; background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-2)); box-shadow: var(--shadow); }
.navlinks { display:flex; gap:.75rem; flex-wrap:wrap; margin-left:auto; }
.navlinks a { padding:.45rem .7rem; border-radius:10px; border:1px solid transparent; }
.navlinks a:hover { background: var(--panel-2); border-color: var(--border); text-decoration: none; }
#menu-toggle { display:none; }
@media (max-width: 760px) {
  #menu-toggle { display:inline-flex; }
  #navlinks { display:none; }
  #navlinks[data-open="true"] { display:flex; width:100%; margin-top:.5rem; }
}
main { max-width: var(--maxw); margin: 1rem auto 3rem; padding: 0 1rem; }
.hero { background: radial-gradient(1200px 400px at 10% -20%, rgba(117,104,255,.15), transparent), radial-gradient(1200px 400px at 90% -20%, rgba(125,211,252,.12), transparent), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.hero h1 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin:.2rem 0 .75rem; }
.hero p { color: var(--muted); margin:0 0 1rem; }
.cta-row { display:flex; gap:.75rem; flex-wrap:wrap; }
.card { background: linear-gradient(180deg, var(--panel), #0c1219); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
input[type="search"] { width:100%; padding:.75rem .9rem; border-radius:12px; background:#0b1118; color:var(--text); border:1px solid var(--border); outline:none; }
.kbd { font-family: var(--mono); border:1px solid var(--border); border-bottom-width:3px; padding:.1rem .4rem; border-radius:6px; background:#0c1219; color:var(--muted); font-size:.9rem; }
.button { display:inline-flex; align-items:center; gap:.5rem; background: linear-gradient(180deg, #121a24, #0c1219); border:1px solid var(--border); border-radius:12px; padding:.6rem .9rem; color:var(--text); cursor:pointer; box-shadow: var(--shadow); }
.button:hover { background:#0f1722; text-decoration:none; }
footer { max-width: var(--maxw); margin: 2rem auto; padding: 0 1rem 3rem; color: var(--muted); }
h1, h2, h3 { line-height:1.2; }
blockquote { margin:1rem 0; padding:.8rem 1rem; border-left:3px solid var(--accent-2); background:#0c1219; color:var(--muted); border-radius:8px;}
.table { width:100%; border-collapse: collapse; overflow:hidden; border-radius:10px; border:1px solid var(--border); }
.table th, .table td { padding:.6rem .75rem; border-bottom:1px solid var(--border); }
.table th { text-align:left; color:var(--muted); background:#0b1118; }
.layout { display:grid; gap:1rem; grid-template-columns:260px 1fr; }
@media (max-width: 900px) { .layout { grid-template-columns:1fr; } .sidebar { order:2; } .content { order:1; } }
.sidebar { position: sticky; top: 72px; height: fit-content; }
.badge { display:inline-block; padding:.2rem .5rem; border-radius:999px; background:#0b1118; border:1px solid var(--border); color:var(--muted); font-size:.85rem; }
.footer-links { display:flex; gap:1rem; flex-wrap:wrap; }
.skip-link { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; padding:.5rem; background:#111827; border-radius:8px; }