:root {
  --void: #06080f; --panel: #0d1322;
  --line: rgba(180, 200, 255, 0.10);
  --ink: #f4f6fb; --ink-dim: #9aa5bf; --ink-faint: #5a6480;
  --gold: #f5a623; --gold-hi: #ffd37e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--void); color: var(--ink);
  font-family: 'Satoshi', 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; }
a { color: inherit; text-decoration: none; }

.g-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(20px, 5vw, 64px);
  background: rgba(6, 8, 15, 0.8); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.g-back { color: var(--gold); }
.g-crumb { color: var(--ink-faint); }

.g-main { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px) 120px; }

.g-hero { padding: clamp(70px, 12vh, 130px) 0 30px; }
.g-tag { font-size: 12px; letter-spacing: 0.14em; color: var(--gold); }
.g-hero h1 {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(3rem, 9vw, 5.6rem); line-height: 1; letter-spacing: -0.02em;
  margin: 22px 0 30px;
}
.g-lede { color: var(--ink-dim); font-size: 1.15rem; }

.g-sec { padding: 46px 0; border-top: 1px solid var(--line); margin-top: 46px; }
.g-sec h2 {
  font-family: 'Clash Display', sans-serif; font-weight: 500;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin-bottom: 22px;
  display: flex; align-items: baseline; gap: 16px;
}
.g-num { font-size: 0.55em; color: var(--gold); font-weight: 400; }
.g-sec p { color: var(--ink-dim); margin-bottom: 16px; }
.g-sec strong, .g-sec em { color: var(--ink); }
.g-sec ul { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
.g-sec li { color: var(--ink-dim); padding-left: 22px; position: relative; }
.g-sec li::before { content: '▸'; position: absolute; left: 0; color: var(--gold); }

.g-tree, .g-code {
  background: #04060c; border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 26px; font-size: 13px; letter-spacing: 0.02em; line-height: 1.9; color: var(--ink-dim);
  overflow-x: auto; margin: 18px 0;
}
.g-code { color: var(--gold-hi); }

.g-foot {
  margin-top: 80px; padding-top: 30px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 12px;
}
.g-foot a { color: var(--gold); }
.g-dim { color: var(--ink-faint); }