:root {
  --bg:#2a0f1f;
  --panel:#3b1428;
  --text:#ffe6f1;
  --muted:#f2b6cf;
  --accent:#ff6fae;
  --radius:14px;
  font-family:Inter,system-ui,sans-serif;
}

body {
  margin:0;
  background:linear-gradient(180deg,#1f0a16,#2a0f1f);
  color:var(--text);
}

.layout {
  max-width:1200px;
  margin:auto;
  padding:20px;
  display:grid;
  grid-template-columns:1fr 260px;
  gap:20px;
}

.content {
  background:rgba(255,255,255,0.03);
  padding:26px;
  border-radius:var(--radius);
}

h2 { color:#fff; }

p {
  line-height:1.7;
  color:var(--muted);
}

a { color:var(--accent); }

.toc {
  background:var(--panel);
  padding:18px;
  border-radius:var(--radius);
  position:sticky;
  top:20px;
}

.toc h3 { color:var(--accent); margin-top:0; }

.toc a {
  display:block;
  padding:8px;
  margin-top:6px;
  text-decoration:none;
  color:var(--muted);
  border-radius:8px;
}

.toc a:hover {
  background:rgba(255,111,174,0.15);
  color:var(--accent);
}

.footer {
  margin-top:40px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:0.85rem;
  text-align:center;
  color:var(--muted);
}

@media (max-width:900px) {
  .layout { grid-template-columns:1fr; }
  .toc { order:-1; position:relative; }
}