html { color-scheme: dark; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080d22;
  color: #f6f3ff;
  line-height: 1.65;
}
a { color: #e9c46a; }
.guide-shell { width: min(1040px, calc(100% - 32px)); margin: 0 auto; }
.guide-header {
  padding: 22px 0;
  border-bottom: 1px solid rgba(233, 196, 106, 0.24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { color: #fff; text-decoration: none; font-weight: 800; letter-spacing: 0.03em; }
.guide-nav { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.95rem; }
.guide-hero { padding: 64px 0 34px; max-width: 820px; }
.eyebrow { color: #e9c46a; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
h1 { margin: 10px 0 18px; font-size: clamp(2.15rem, 5vw, 4.3rem); line-height: 1.04; letter-spacing: 0; }
h2 { margin: 38px 0 10px; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.18; }
h3 { margin: 24px 0 8px; font-size: 1.1rem; }
p { color: #d7d9ec; }
.lede { font-size: 1.15rem; color: #f0ecff; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 26px 0 46px; }
.guide-card {
  display: block;
  padding: 18px;
  border: 1px solid rgba(233, 196, 106, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  text-decoration: none;
}
.guide-card strong { display: block; color: #fff; font-size: 1.05rem; }
.guide-card span { display: block; margin-top: 6px; color: #c9cbe0; }
.guide-article { max-width: 760px; padding-bottom: 56px; }
.note, .cta {
  margin: 28px 0;
  padding: 18px;
  border: 1px solid rgba(233, 196, 106, 0.28);
  border-radius: 8px;
  background: rgba(233, 196, 106, 0.08);
}
.cta strong { display: block; margin-bottom: 6px; color: #fff; }
.cta a {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #e9c46a;
  color: #10162d;
  font-weight: 800;
  text-decoration: none;
}
.toc { padding-left: 20px; }
.toc li { margin: 6px 0; color: #d7d9ec; }
.guide-footer { border-top: 1px solid rgba(233, 196, 106, 0.18); padding: 28px 0 40px; color: #aeb4d4; font-size: 0.95rem; }
@media (max-width: 720px) {
  .guide-header { align-items: flex-start; flex-direction: column; }
  .guide-hero { padding-top: 42px; }
}