:root {
  --bg: #0a0612; --bg2: #100d1e; --gold: #f5c842; --pink: #ff6eb4;
  --white: #f0eaff; --muted: #9b94b3; --border: rgba(245,200,66,0.18);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--white);
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.7; padding: 0;
}
.wrap { max-width: 820px; margin: 0 auto; padding: 80px 28px 120px; }
.back { color: var(--gold); text-decoration: none; font-size: .9rem; letter-spacing: 1px; }
.back:hover { text-decoration: underline; }
.tag { display: inline-block; margin-top: 32px; color: var(--pink); font-size: .8rem; letter-spacing: 2px; }
h1 {
  font-family: 'Syne', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem); margin: 14px 0 8px; color: var(--gold);
  letter-spacing: -1px;
}
.updated { color: var(--muted); font-size: .85rem; margin-bottom: 36px; }
h2 {
  font-family: 'Syne', system-ui, sans-serif; font-weight: 700;
  font-size: 1.4rem; margin: 38px 0 12px; color: var(--white);
  border-left: 3px solid var(--gold); padding-left: 14px;
}
p, li { color: var(--white); margin-bottom: 14px; font-size: .98rem; }
ul, ol { padding-left: 22px; margin-bottom: 14px; }
strong { color: var(--gold); }
a { color: var(--pink); }
hr { border: 0; border-top: 1px solid var(--border); margin: 48px 0 24px; }
.footer-note { color: var(--muted); font-size: .82rem; }
.callout {
  border: 1px solid var(--border); background: var(--bg2);
  padding: 18px 20px; border-radius: 12px; margin: 22px 0;
}