:root {
    --bg-dark: #0a0a2e;
    --bg-medium: #16163a;
    --bg-card: #1e1e4a;
    --neon-green: #39ff14;
    --neon-cyan: #00f0ff;
    --neon-pink: #ff2d95;
    --neon-yellow: #ffe600;
    --neon-orange: #ff8c00;
    --neon-purple: #b44dff;
    --text-main: #d0d0e8;
    --text-dim: #8888aa;
    --border-color: #3a3a6e;
    --pixel-shadow: 4px 4px 0px rgba(0,0,0,0.5);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: calc(20px * var(--body-scale));
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* Scanline overlay */
  body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.06) 0px,
      rgba(0,0,0,0.06) 1px,
      transparent 1px,
      transparent 3px
    );
    pointer-events: none;
    z-index: 9999;
  }

  /* ── NAV ── */
  nav {
    /* sticky, not fixed: the bar then occupies its own height in normal flow, so
       content can never hide underneath it no matter how tall it grows (more nav
       rows on narrow screens, larger text in readable mode). Visually identical
       to the original fixed bar. */
    position: sticky;
    top: 0; left: 0; right: 0;
    background: var(--bg-dark);
    border-bottom: 3px solid var(--neon-cyan);
    z-index: 1000;
    /* 8px in the original — raised so the bar has room to centre the toggles. */
    padding: 15px 0;
    box-shadow: 0 4px 20px rgba(0,240,255,0.15);
  }
  nav .nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
  nav a {
    font-family: var(--font-display);
    /* 9px in the original — too small for the page's top bar. */
    font-size: calc(11px * var(--display-scale));
    color: var(--neon-cyan);
    text-decoration: none;
    padding: 6px 8px;
    border: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
    image-rendering: pixelated;
  }
  nav a:hover, nav a.active {
    border-color: var(--neon-cyan);
    background: rgba(0,240,255,0.1);
    box-shadow: 0 0 8px rgba(0,240,255,0.3);
  }
  /* The logo is a link back to the landing page (a <span> in the original), so
     the generic `nav a` chrome has to be neutralised on it. */
  nav a.nav-logo {
    font-family: var(--font-display);
    /* 11px in the original, raised with the nav links. */
    font-size: calc(13px * var(--display-scale));
    color: var(--neon-green);
    border-color: transparent;
    background: none;
    margin-right: 12px;
    text-shadow: 0 0 10px var(--neon-green);
  }
  nav a.nav-logo:hover {
    color: var(--neon-green);
    border-color: transparent;
    background: none;
    text-shadow: 0 0 16px var(--neon-green), 0 0 28px rgba(57,255,20,0.5);
  }

  /* ── MAIN ── */
  main {
    max-width: 900px;
    margin: 0 auto;
    padding: 90px 24px 60px;
  }

  /* ── HERO ── */
  .hero {
    text-align: center;
    padding: 60px 0 50px;
    position: relative;
  }
  .hero h1 {
    font-family: var(--font-brand);
    font-size: 28px;
    color: var(--neon-green);
    text-shadow: 0 0 20px var(--neon-green), 0 0 40px rgba(57,255,20,0.3);
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .hero .subtitle {
    font-size: calc(26px * var(--body-scale));
    color: var(--neon-cyan);
    margin-bottom: 12px;
  }
  .hero .tagline {
    font-size: calc(22px * var(--body-scale));
    color: var(--text-dim);
    max-width: 700px;
    margin: 0 auto;
  }
  .hero-pixel-art {
    margin: 30px auto 0;
    font-family: monospace;
    font-size: 10px;
    line-height: 1.1;
    color: var(--neon-cyan);
    text-shadow: 0 0 6px var(--neon-cyan);
    white-space: pre;
    letter-spacing: 2px;
  }

  /* ── SECTIONS ── */
  section {
    margin-bottom: 60px;
    padding-top: 20px;
  }

  h2 {
    font-family: var(--font-display);
    font-size: calc(18px * var(--display-scale));
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 3px dashed;
    line-height: 1.6;
  }
  h2 .section-num {
    display: inline-block;
    background: var(--neon-green);
    color: var(--bg-dark);
    padding: 2px 10px;
    margin-right: 10px;
    font-size: calc(14px * var(--display-scale));
    box-shadow: var(--pixel-shadow);
  }

  h3 {
    font-family: var(--font-display);
    font-size: calc(13px * var(--display-scale));
    color: var(--neon-yellow);
    margin: 28px 0 14px;
    line-height: 1.5;
  }

  p { margin-bottom: 16px; }

  /* ── PIXEL CARD ── */
  .pixel-card {
    background: var(--bg-card);
    border: 3px solid var(--border-color);
    padding: 24px;
    margin: 20px 0;
    box-shadow: var(--pixel-shadow);
    position: relative;
  }
  .pixel-card::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px;
    width: 12px; height: 12px;
    border-top: 3px solid var(--neon-cyan);
    border-left: 3px solid var(--neon-cyan);
  }
  .pixel-card::after {
    content: '';
    position: absolute;
    bottom: -3px; right: -3px;
    width: 12px; height: 12px;
    border-bottom: 3px solid var(--neon-cyan);
    border-right: 3px solid var(--neon-cyan);
  }

  .pixel-card.green { border-color: var(--neon-green); }
  .pixel-card.green::before, .pixel-card.green::after { border-color: var(--neon-green); }
  .pixel-card.pink { border-color: var(--neon-pink); }
  .pixel-card.pink::before, .pixel-card.pink::after { border-color: var(--neon-pink); }
  .pixel-card.purple { border-color: var(--neon-purple); }
  .pixel-card.purple::before, .pixel-card.purple::after { border-color: var(--neon-purple); }

  /* ── CODE BLOCKS ── */
  pre {
    background: #0d0d22;
    border: 2px solid var(--border-color);
    border-left: 4px solid var(--neon-green);
    padding: 16px 20px;
    margin: 14px 0 20px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: calc(19px * var(--body-scale));
    line-height: 1.5;
    color: var(--neon-green);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
  }
  pre .comment { color: var(--text-dim); }
  pre .cmd { color: var(--neon-yellow); }
  pre .flag { color: var(--neon-cyan); }
  pre .string { color: var(--neon-pink); }
  pre .key { color: var(--neon-orange); }
  pre .kw { color: var(--neon-purple); }

  code {
    font-family: var(--font-mono);
    background: rgba(57,255,20,0.08);
    color: var(--neon-green);
    padding: 1px 6px;
    border: 1px solid rgba(57,255,20,0.2);
  }

  /* ── COMPARISON TABLE ── */
  .compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
  }
  .compare-col {
    background: var(--bg-card);
    border: 3px solid var(--border-color);
    padding: 20px;
    box-shadow: var(--pixel-shadow);
  }
  .compare-col h4 {
    font-family: var(--font-display);
    font-size: calc(11px * var(--display-scale));
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid;
  }
  .compare-col.old h4 { color: var(--neon-pink); border-color: var(--neon-pink); }
  .compare-col.new h4 { color: var(--neon-green); border-color: var(--neon-green); }
  .compare-col ul {
    list-style: none;
    padding: 0;
  }
  .compare-col ul li {
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
  }
  .compare-col.old li::before { content: '✗ '; color: var(--neon-pink); position: absolute; left: 0; }
  .compare-col.new li::before { content: '▸ '; color: var(--neon-green); position: absolute; left: 0; }

  /* ── FLOW DIAGRAM ── */
  .flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0;
    font-family: var(--font-display);
    font-size: calc(10px * var(--display-scale));
  }
  .flow-step {
    background: var(--bg-card);
    border: 2px solid var(--neon-cyan);
    padding: 10px 14px;
    text-align: center;
    color: var(--neon-cyan);
    box-shadow: var(--pixel-shadow);
    min-width: 100px;
  }
  .flow-arrow {
    color: var(--neon-yellow);
    font-size: calc(18px * var(--body-scale));
    font-family: var(--font-body);
  }

  /* ── HIGHLIGHT BOX ── */
  .highlight-box {
    background: rgba(255,230,0,0.05);
    border: 2px solid var(--neon-yellow);
    border-left: 6px solid var(--neon-yellow);
    padding: 16px 20px;
    margin: 20px 0;
    font-size: calc(19px * var(--body-scale));
  }
  .highlight-box .label {
    font-family: var(--font-display);
    font-size: calc(10px * var(--display-scale));
    color: var(--neon-yellow);
    margin-bottom: 8px;
    display: block;
  }

  .highlight-box.tip { border-color: var(--neon-green); background: rgba(57,255,20,0.04); }
  .highlight-box.tip .label { color: var(--neon-green); }
  .highlight-box.warn { border-color: var(--neon-orange); background: rgba(255,140,0,0.04); }
  .highlight-box.warn .label { color: var(--neon-orange); }
  .highlight-box.levelup { border-color: var(--neon-purple); background: rgba(180,77,255,0.06); border-width: 3px; }
  .highlight-box.levelup .label { color: var(--neon-purple); }

  /* ── STEP COUNTER ── */
  .steps { counter-reset: step-counter; margin: 16px 0; }
  .step {
    counter-increment: step-counter;
    padding: 12px 0 12px 50px;
    position: relative;
    border-left: 2px dashed var(--border-color);
    margin-left: 18px;
  }
  .step::before {
    content: counter(step-counter);
    position: absolute;
    left: -19px;
    top: 10px;
    width: 34px; height: 34px;
    background: var(--neon-cyan);
    color: var(--bg-dark);
    font-family: var(--font-display);
    font-size: calc(12px * var(--display-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--pixel-shadow);
  }

  /* ── INLINE BADGE ── */
  .badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: calc(8px * var(--display-scale));
    padding: 3px 8px;
    margin: 0 4px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    vertical-align: middle;
  }
  .badge.must { background: var(--neon-pink); color: #fff; }
  .badge.mustnot { background: var(--neon-pink); color: #fff; }
  .badge.should { background: var(--neon-yellow); color: var(--bg-dark); }
  .badge.may { background: var(--neon-cyan); color: var(--bg-dark); }

  /* ── LINKS ── */
  a { color: var(--neon-cyan); text-decoration: none; border-bottom: 1px dashed var(--neon-cyan); }
  a:hover { color: #fff; text-shadow: 0 0 8px var(--neon-cyan); }

  /* ── SOP VISUAL ── */
  .sop-block {
    background: #0d0d22;
    border: 2px solid var(--neon-purple);
    padding: 20px;
    margin: 16px 0;
    position: relative;
  }
  .sop-block .sop-label {
    position: absolute;
    top: -12px;
    left: 16px;
    background: var(--neon-purple);
    color: #fff;
    font-family: var(--font-display);
    font-size: calc(9px * var(--display-scale));
    padding: 3px 10px;
    box-shadow: var(--pixel-shadow);
  }
  .sop-block .sop-line {
    padding: 3px 0;
  }
  .sop-block .sop-heading {
    color: var(--neon-yellow);
    font-weight: bold;
    margin-top: 10px;
  }
  .sop-block .sop-heading:first-child { margin-top: 0; }

  /* ── TERMINAL OUTPUT ── */
  .terminal-output {
    background: #050510;
    border: 2px solid #333;
    border-radius: 0;
    padding: 16px 20px;
    margin: 14px 0 20px;
    font-family: var(--font-mono);
    font-size: calc(18px * var(--body-scale));
    line-height: 1.5;
    color: #aaa;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
  }
  .terminal-output .t-agent { color: var(--neon-green); }
  .terminal-output .t-action { color: var(--neon-yellow); }
  .terminal-output .t-result { color: var(--neon-pink); }
  .terminal-output .t-dim { color: #666; }
  .terminal-output .t-bullet { color: var(--neon-green); }

  /* ── FOOTER ── */
  footer {
    text-align: center;
    padding: 40px 20px;
    border-top: 3px dashed var(--border-color);
    color: var(--text-dim);
    font-size: calc(18px * var(--body-scale));
  }
  footer a { color: var(--neon-cyan); }

  /* ── RESPONSIVE ── */
  @media (max-width: 700px) {
    .hero h1 { font-size: 18px; }
    h2 { font-size: calc(14px * var(--display-scale)); }
    nav a { font-size: calc(10px * var(--display-scale)); padding: 4px 6px; }
    .compare-grid { grid-template-columns: 1fr; }
    .flow { flex-direction: column; }
    .flow-arrow { transform: rotate(90deg); }
    main { padding: 80px 14px 40px; }
    pre { font-size: calc(16px * var(--body-scale)); }
    .terminal-output { font-size: calc(15px * var(--body-scale)); }
  }

  /* ── INFO TOOLTIP ── */
  .info-tip {
    position: relative;
    display: inline-block;
    cursor: help;
    font-family: var(--font-display);
    font-size: calc(9px * var(--display-scale));
    color: var(--neon-yellow);
    background: rgba(255,230,0,0.1);
    border: 1px solid var(--neon-yellow);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    vertical-align: middle;
    margin-left: 4px;
  }
  .info-tip .info-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    background: var(--bg-card);
    border: 2px solid var(--neon-yellow);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: calc(17px * var(--body-scale));
    line-height: 1.5;
    color: var(--text-main);
    text-align: left;
    z-index: 100;
    box-shadow: var(--pixel-shadow);
    transition: opacity 0.2s, visibility 0.2s;
    cursor: default;
  }
  .info-tip .info-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--neon-yellow) transparent transparent transparent;
  }
  .info-tip:hover .info-content {
    visibility: visible;
    opacity: 1;
  }
  @media (max-width: 700px) {
    .info-tip .info-content {
      width: 260px;
      left: 0;
      transform: translateX(-20px);
    }
  }

  /* The floating tooltip needs 160px of clear space either side of the badge,
     which does not exist on a narrow screen — the originals let it run off the
     viewport, and the larger body text pushed the badge further right, making it
     worse. Below 960px it becomes a centred overlay, which cannot overflow. */
  @media (max-width: 960px) {
    .info-tip .info-content {
      position: fixed;
      top: 50%;
      left: 50%;
      right: auto;
      bottom: auto;
      width: min(340px, calc(100vw - 32px));
      transform: translate(-50%, -50%);
      z-index: 2000;
    }
    .info-tip .info-content::after {
      display: none;
    }
  }

  /* ── ABOUT CARD ── */
  .about-card {
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    padding: 24px;
    margin: 40px 0 0;
    font-size: calc(18px * var(--body-scale));
    line-height: 1.6;
    color: var(--text-dim);
  }
  .about-card strong { color: var(--text-main); }
  .about-card .about-label {
    font-family: var(--font-display);
    font-size: calc(10px * var(--display-scale));
    color: var(--neon-cyan);
    margin-bottom: 10px;
    display: block;
  }
  .about-card .disclaimer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    font-size: calc(16px * var(--body-scale));
    color: #666;
  }

  /* ── FEEDBACK BUTTON ── */
  .feedback-btn {
    display: inline-block;
    font-family: var(--font-display);
    font-size: calc(9px * var(--display-scale));
    color: var(--neon-green);
    background: transparent;
    border: 2px solid var(--neon-green);
    padding: 8px 16px;
    cursor: pointer;
    box-shadow: var(--pixel-shadow);
    transition: all 0.15s;
    margin-top: 16px;
  }
  .feedback-btn:hover {
    background: var(--neon-green);
    color: var(--bg-dark);
    text-shadow: none;
  }

  /* ── LANGUAGE + FONT TOGGLES ── */
  /* The controls are the shared segmented styles in fonts.css, pinned to the
     viewport's top-right corner by .toggle-bar exactly as on the other pages.
     They used to sit inside .nav-inner, which meant they were dragged onto
     whichever line the nav happened to wrap to. Out of the flow, the nav only
     needs room reserved on the right (184px = the 162px control plus its 16px offset
     and a little slack) so the centred links never run underneath.
     max-width grows by the same amount, so the links keep their original usable
     width and still fit on one line. .toggle-bar carries a higher z-index than
     nav so it paints over the bar. */
  nav .nav-inner {
    max-width: 1320px;
    padding-right: 184px;
  }

  /* ── PIXEL DECORATION ── */
  .pixel-divider {
    text-align: center;
    margin: 40px 0;
    color: var(--neon-cyan);
    font-size: calc(14px * var(--body-scale));
    letter-spacing: 6px;
    opacity: 0.5;
  }


  /* Scroll reveal */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* The toggles sit inside <nav> (but outside .nav-inner, so they never join the
     links' flex wrapping) and are centred against the bar's full height. On the
     other page types .toggle-bar stays position:fixed — see fonts.css. */
  nav .toggle-bar {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 1;
  }

  /* With a sticky nav, main only needs a visual gap below the bar — no ladder of
     per-breakpoint clearance values, and nothing to retune when the nav grows. */
  main {
    padding-top: 40px;
  }

  /* Anchor targets must clear the sticky bar when a nav link is clicked. */
  section[id] {
    scroll-margin-top: 72px;
  }

  /* Below 900px there is no room to reserve a right-hand column, so the logo
     takes a row of its own and the pinned toggles sit in the empty space beside
     it. The links then start below both. */
  @media (max-width: 900px) {
    nav .nav-inner {
      max-width: 1100px;
      padding-right: 20px;
    }
    nav .nav-logo {
      flex: 0 0 100%;
      display: flex;
      align-items: center;
      min-height: 34px;
      margin-right: 0;
    }
    /* Multi-row nav: sit beside the logo row rather than centred on the stack. */
    nav .toggle-bar {
      top: 0;
      right: 8px;
      transform: none;
    }
    main {
      padding-top: 24px;
    }
    section[id] {
      scroll-margin-top: 8px;
    }
  }

  /* At phone widths the 13px logo would reach under the pinned toggles. */
  @media (max-width: 400px) {
    nav .nav-logo {
      font-size: calc(11px * var(--display-scale));
    }
  }

  /* ==========================================================================
     Extracted from inline style attributes on the original getting-started
     pages, so their font sizes participate in the pixel/readable switch.
     ========================================================================== */

  .guide-details-summary {
    cursor: pointer;
    color: var(--neon-cyan);
    font-family: var(--font-display);
    font-size: calc(9px * var(--display-scale));
    padding: 6px 0;
  }

  .guide-details-note {
    font-size: calc(14px * var(--body-scale));
    color: var(--text-dim);
    margin-top: 8px;
    line-height: 1.6;
  }

  .guide-back-wrap {
    max-width: 800px;
    margin: 20px auto;
    padding: 0 20px;
  }

  .guide-back-link {
    font-family: var(--font-display);
    font-size: calc(10px * var(--display-scale));
    color: var(--neon-green);
    text-decoration: none;
  }

  /* The guide's nav bar hosts both toggles side by side. */