:root{
  --bg:#15131a; --bg2:#1d1a24; --card:#211e29; --text:#eae6f0; --sub:#a79fbd; --line:#332e40;
  --mod:#2a2534; --modtx:#c9b8ff; --modbd:#4a3f66; --codebg:#2a2534;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding:0 0 60px; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.55;
}
a{color:var(--mono); text-decoration:none}
a:hover{text-decoration:underline}
header{
  padding:36px 20px 0; background:linear-gradient(160deg,var(--bg2),var(--bg));
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
  backdrop-filter:blur(6px);
}
header .kicker{color:var(--accent2); font-size:.85rem; text-transform:uppercase; letter-spacing:1.5px}
header h1{margin:6px 0 8px; font-size:1.7rem; letter-spacing:.3px}
header p{color:var(--sub); max-width:640px; margin:0 0 20px}
nav.tabs{display:flex; gap:6px; max-width:760px; margin:0 auto; padding:0 20px}
nav.tabs a{
  flex:1; text-align:center; padding:12px 10px; color:var(--sub); font-weight:600;
  font-size:.9rem; border-bottom:2px solid transparent; text-decoration:none;
}
nav.tabs a.active, nav.tabs a:hover{color:var(--accent2); border-bottom-color:var(--accent)}
main{max-width:760px; margin:0 auto; padding:0 20px}
section{padding-top:28px}
section.hidden{display:none}
h2{margin:44px 0 12px; font-size:1.2rem; color:var(--accent2); border-left:3px solid var(--accent); padding-left:10px}
h2:first-of-type{margin-top:24px}
h3{margin:22px 0 8px; font-size:1.02rem; color:var(--text)}
p{color:#d6d0e3}
.quick{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin:14px 0}
.quick ol,.quick ul{margin:6px 0; padding-left:20px}
.quick li{margin:4px 0}
table{width:100%; border-collapse:collapse; margin:10px 0; font-size:.92rem}
th,td{text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--accent2); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.5px}
code,.l{
  background:var(--codebg); color:var(--mono); padding:1px 6px; border-radius:5px;
  font-family:"SF Mono",Consolas,monospace; font-size:.85em;
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media(max-width:560px){.grid2,.grid3{grid-template-columns:1fr}}
.box{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px}
.box h4{margin:0 0 6px; font-weight:600; color:var(--accent); font-size:.95rem}
.box p{margin:4px 0; font-size:.9rem; color:var(--sub)}
.callout{
  background:linear-gradient(135deg,var(--card),var(--bg2)); border:1px solid var(--line);
  border-radius:10px; padding:16px 18px; margin:12px 0;
}
.algo{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:8px}
.tower{display:flex; flex-direction:column; align-items:center; gap:2px; position:relative}
.op{width:40px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; flex-shrink:0}
.op.mod{background:var(--mod); color:var(--modtx); border:1px solid var(--modbd)}
.op.car{background:var(--accent); color:#1a1420}
.arrow{color:var(--sub); font-size:.9rem; line-height:1}
.use{color:#d6d0e3; font-size:.88rem; margin:8px 0 0}
footer{
  max-width:760px; margin:50px auto 0; padding:20px; border-top:1px solid var(--line);
  color:var(--sub); font-size:.85rem;
}
.kbd{display:inline-block; background:var(--codebg); border:1px solid var(--line); border-radius:5px; padding:1px 7px; font-size:.82em; font-family:monospace}
.tag{display:inline-block; background:var(--codebg); color:var(--accent2); border-radius:20px; padding:2px 10px; font-size:.75rem; margin-right:6px}
.swatch{display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:middle}
.hubgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0}
@media(max-width:560px){.hubgrid{grid-template-columns:1fr}}
.hubcard{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px;
  display:block; color:var(--text); transition:border-color .15s, transform .15s;
}
.hubcard:hover{border-color:var(--accent); transform:translateY(-2px); text-decoration:none}
.hubcard h3{margin:0 0 6px; font-size:1.1rem; color:var(--text); display:flex; align-items:center}
.hubcard p{margin:0; color:var(--sub); font-size:.9rem}