:root {
    --bg: #0f1216;
    --panel: #161a21;
    --panel-2: #1b2029;
    --line: #262d39;
    --line-soft: #1f2530;
    --text: #dee4ee;
    --muted: #8c95a6;
    --faint: #5d6575;
    --x: #ff6b6b;   /* part 1 — foundations */
    --y: #7bd88f;   /* part 2 — building blocks */
    --z: #62a8ff;   /* part 3 — motion & space */
    --w: #ffb454;   /* part 4 — interaction */
    --g: #c792ea;   /* part 5 — game dev */
    --run: #69d58c;
    --err: #ff7575;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --disp: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.65;
  }
  ::selection { background: rgba(98,168,255,.28); }

  /* ---------- header ---------- */
  .hdr {
    position: sticky; top: 0; z-index: 50;
    background: rgba(15,18,22,.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .hdr-row {
    max-width: 1240px; margin: 0 auto;
    padding: 12px 24px 10px;
    display: flex; align-items: center; gap: 16px;
  }
  .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .triad { display: inline-flex; gap: 3px; }
  .triad i { width: 8px; height: 8px; border-radius: 2px; display: block; }
  .triad i:nth-child(1) { background: var(--x); }
  .triad i:nth-child(2) { background: var(--y); }
  .triad i:nth-child(3) { background: var(--z); }
  .brand b {
    font-family: var(--disp); font-weight: 600; font-size: 17px;
    letter-spacing: .01em; white-space: nowrap;
  }
  .brand b span { color: var(--muted); font-weight: 500; }
  .hdr-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  select.jump {
    appearance: none;
    background: var(--panel-2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%238c95a6" fill="none" stroke-width="1.5"/></svg>') no-repeat right 10px center;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--mono); font-size: 12.5px;
    padding: 8px 30px 8px 12px;
    max-width: 320px;
    cursor: pointer;
  }
  select.jump:hover { border-color: #364050; }
  select.jump:focus-visible { outline: 2px solid var(--z); outline-offset: 1px; }
  .navbtn {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--line); border-radius: 8px;
    font-family: var(--mono); font-size: 12.5px;
    padding: 8px 14px; cursor: pointer;
    transition: border-color .15s, color .15s;
  }
  .navbtn:hover:not(:disabled) { border-color: #3a4554; }
  .navbtn:disabled { opacity: .35; cursor: default; }
  .navbtn:focus-visible { outline: 2px solid var(--z); outline-offset: 1px; }

  /* signature: the course rail */
  .rail {
    max-width: 1240px; margin: 0 auto;
    padding: 0 24px 12px;
    display: flex; gap: 5px;
  }
  .rail button {
    flex: 1; height: 5px; border: 0; border-radius: 3px;
    background: var(--seg, #2a313d);
    opacity: .32; cursor: pointer; padding: 0;
    transition: opacity .15s, transform .15s;
  }
  .rail button:hover { opacity: .75; transform: scaleY(1.6); }
  .rail button.done { opacity: .6; }
  .rail button.cur { opacity: 1; transform: scaleY(1.8); box-shadow: 0 0 10px var(--seg); }
  .rail button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

  /* ---------- main ---------- */
  main { max-width: 1240px; margin: 0 auto; padding: 40px 24px 80px; }
  .tut-head { margin-bottom: 8px; }
  .eyebrow {
    font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pc, var(--z));
    display: flex; align-items: center; gap: 10px;
  }
  .eyebrow .count { color: var(--muted); letter-spacing: .06em; }
  .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--pc, var(--z)); border-radius: 1px; }
  h1.tut-title {
    font-family: var(--disp); font-weight: 700;
    font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1;
    letter-spacing: -.015em; margin: 10px 0 6px;
  }
  .tut-tagline { color: var(--muted); font-size: 17px; max-width: 760px; margin: 0 0 14px; }

  /* ---------- blocks ---------- */
  .block { margin-top: 44px; }
  .block + .block { border-top: 1px solid var(--line-soft); padding-top: 40px; }
  .prose { max-width: 820px; }
  .prose h3 {
    font-family: var(--disp); font-weight: 600; font-size: 21px;
    letter-spacing: -.01em; margin: 0 0 10px;
  }
  .prose p { margin: 0 0 14px; color: #c6cdd9; }
  .prose strong { color: var(--text); }
  .prose ul { margin: 0 0 14px; padding-left: 22px; color: #c6cdd9; }
  .prose li { margin: 4px 0; }
  .prose code {
    font-family: var(--mono); font-size: .86em;
    background: var(--panel-2); border: 1px solid var(--line-soft);
    border-radius: 5px; padding: 1px 6px; color: #a8d3ff;
  }
  .prose .tip {
    border-left: 3px solid var(--pc, var(--z));
    background: linear-gradient(90deg, rgba(255,255,255,.03), transparent 70%);
    border-radius: 0 8px 8px 0;
    padding: 10px 16px; margin: 18px 0 0;
    color: #c6cdd9; font-size: 15px;
  }
  .prose .tip b { color: var(--pc, var(--z)); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 4px; }

  /* ---------- lab (code + viewport) ---------- */
  .lab {
    margin-top: 22px;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 14px;
  }
  .pane {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .pane-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 0 10px 0 14px; height: 42px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
    flex: none;
  }
  .pane-label {
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .16em; color: var(--muted);
  }
  .pane-bar .sp { flex: 1; }
  .tbtn {
    background: transparent; color: var(--muted);
    border: 1px solid var(--line); border-radius: 7px;
    font-family: var(--mono); font-size: 12px;
    padding: 5px 11px; cursor: pointer;
    transition: color .15s, border-color .15s;
  }
  .tbtn:hover { color: var(--text); border-color: #3a4554; }
  .tbtn:focus-visible, .run:focus-visible { outline: 2px solid var(--z); outline-offset: 1px; }
  .run {
    background: var(--run); color: #0c1410;
    border: 0; border-radius: 7px;
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    padding: 6px 14px; cursor: pointer;
    transition: filter .15s, transform .05s;
  }
  .run:hover { filter: brightness(1.1); }
  .run:active { transform: translateY(1px); }
  .editor { height: 400px; }

  .scene-wrap { position: relative; height: 400px; background: #0c0f14; }
  .lab.fullscreen {
    position: fixed; inset: 0; z-index: 9999;
    margin: 0; padding: 12px; gap: 12px;
    background: var(--bg);
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    border-radius: 0;
  }
  .lab.fullscreen .pane { border-radius: 8px; }
  .lab.fullscreen .editor { height: calc(100vh - 24px - 42px); }
  .lab.fullscreen .scene-wrap { height: calc(100vh - 24px - 42px); }
  .scene-host, .scene-mount { position: absolute; inset: 0; }
  .scene-mount:focus { outline: 2px solid var(--w); outline-offset: -2px; }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: #3a4252; flex: none; }
  .dot.running { background: var(--run); box-shadow: 0 0 8px rgba(105,213,140,.7); }
  .dot.error { background: var(--err); box-shadow: 0 0 8px rgba(255,117,117,.7); }
  .status-txt { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .scene-error {
    position: absolute; inset: 0; z-index: 5;
    background: rgba(15,18,22,.93);
    padding: 18px; overflow: auto;
  }
  .scene-error b { color: var(--err); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; }
  .scene-error pre {
    font-family: var(--mono); font-size: 12.5px; color: #ffb3b3;
    white-space: pre-wrap; margin: 10px 0 0;
  }

  /* ---------- bottom nav ---------- */
  .foot-nav {
    margin-top: 70px; display: grid;
    grid-template-columns: 1fr 1fr; gap: 14px;
  }
  .foot-card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 12px; padding: 16px 18px;
    text-align: left; cursor: pointer; color: var(--text);
    transition: border-color .15s, background .15s;
  }
  .foot-card:hover:not(:disabled) { border-color: #3a4554; background: var(--panel-2); }
  .foot-card:disabled { opacity: 0; pointer-events: none; }
  .foot-card small { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); display: block; margin-bottom: 6px; }
  .foot-card span { font-family: var(--disp); font-weight: 600; font-size: 17px; }
  .foot-card.next { text-align: right; }
  .foot-card:focus-visible { outline: 2px solid var(--z); outline-offset: 1px; }

  @media (max-width: 920px) {
    .lab { grid-template-columns: 1fr; }
    .hdr-row { flex-wrap: wrap; }
    .hdr-controls { margin-left: 0; width: 100%; }
    select.jump { flex: 1; max-width: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rail button, .navbtn, .tbtn, .run, .foot-card { transition: none; }
  }