:root{
    --paper:#E7E0CC;
    --paper-dark:#DCD1AE;
    --card:#F1EBD9;
    --ink:#2B2A26;
    --ink-soft:#66604E;
    --border:#C6B98F;
    --terminal-bg:#1B2621;
    --terminal-bg-alt:#151E1A;
    --terminal-text:#8FBF9F;
    --terminal-dim:#557064;
    --staged:#5C7C97;
    --err:#B25640;

    --c1:#C1732E; --c1-dark:#9C5B22; --c1-tint:#F5E9DC; --c1-border:#E0C6A8;
    --c2:#4B7C59; --c2-dark:#3A5F45; --c2-tint:#E4EEE6; --c2-border:#C3D8CA;
    --c3:#3D6E91; --c3-dark:#2E5A78; --c3-tint:#E5EEF3; --c3-border:#B9CEDA;
    --c4:#6B5B73; --c4-dark:#54465B; --c4-tint:#ECE7ED; --c4-border:#D2C2DC;
    --c0:#3E8E82; --c0-dark:#2F6E64; --c0-tint:#E3F0EE; --c0-border:#BEDAD5;
    --cS:#C15F5F; --cS-dark:#9C4A4A; --cS-tint:#F5E0E0; --cS-border:#E3B8B8;

    --stick-1:118px;
    --stick-2:180px;

    --shadow: 0 2px 0 rgba(43,42,38,0.06), 0 10px 24px -14px rgba(43,42,38,0.35);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{ -webkit-text-size-adjust:100%; overscroll-behavior-y:none; }
  body{
    background: var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    overscroll-behavior-y:none;
  }
  ::selection{ background:var(--c1); color:#fff; }
  a{ color:var(--c3-dark); }
  h1,h2,h3{ font-family:'IBM Plex Slab', serif; margin:0; }
  code, .mono{ font-family:'IBM Plex Mono', monospace; }

  .wrap{ max-width:1180px; margin:0 auto; padding:24px 20px 80px; }

  /* ---------- Banner (slim, sticky) ---------- */
  header.docheader{
    position:sticky; top:0; z-index:30;
    display:flex; align-items:center; gap:12px;
    background: linear-gradient(135deg, var(--card) 0%, var(--paper) 55%, var(--c0-tint) 145%);
    border:1px solid var(--border); border-radius:10px;
    padding:12px 14px 15px; box-shadow:var(--shadow); margin-bottom:14px;
  }
  header.docheader::after{
    content:''; position:absolute; left:1px; right:1px; bottom:1px; height:4px;
    border-radius:0 0 9px 9px;
    background: linear-gradient(90deg, var(--c0), var(--c1), var(--c2), var(--c3), var(--c4), var(--cS));
  }
  .title-mark{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; margin-right:9px; flex:0 0 auto;
    background: linear-gradient(135deg, var(--c0), var(--c3));
    border-radius:8px; font-size:15px; vertical-align:middle;
    box-shadow:0 2px 5px rgba(43,42,38,0.25);
  }
  .title-tagline{
    font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft);
    background:rgba(255,255,255,0.45); border:1px solid var(--border);
    border-radius:20px; padding:4px 12px; white-space:nowrap; flex:0 0 auto;
  }
  @media (max-width:760px){ .title-tagline{ display:none; } }
  h1.title{
    font-size:clamp(17px,3.6vw,24px);
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
    display:flex; align-items:center;
  }
  .menu-wrap{ position:relative; flex:0 0 auto; margin-left:auto; }
  .menu-btn{
    background:var(--paper-dark); border:1px solid var(--border); border-radius:8px;
    width:40px; height:40px; font-size:17px; cursor:pointer; color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .15s ease, color .15s ease;
  }
  .menu-btn:hover{ border-color:var(--c0); color:var(--c0-dark); }
  .menu-panel{
    position:absolute; top:100%; right:0; margin-top:8px;
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    box-shadow:var(--shadow); padding:14px; min-width:190px;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .22s ease, opacity .18s ease;
    z-index:40;
  }
  .menu-panel.open{ max-height:300px; opacity:1; }
  .menu-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:8px; }

  /* ---------- Shared small toggle style (used inside the menu) ---------- */
  .prefs-toggle{ display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .prefs-btn{
    background:var(--paper); border:none; padding:8px 12px; font-size:13px;
    color:var(--ink-soft); cursor:pointer; min-height:36px; flex:1 1 0;
    display:flex; align-items:center; justify-content:center; gap:5px;
    border-right:1px solid var(--border); transition:background .15s ease, color .15s ease;
  }
  .prefs-btn:last-child{ border-right:none; }
  .prefs-btn.active{ background:var(--c1); color:#fff; }

  /* ---------- Shared guide pieces (step lists, panels, prompt cards) ---------- */
  .ptype-unsure-steps{ margin:0; padding:14px 14px 14px 32px; font-size:13.5px; color:var(--ink); }
  .ptype-unsure-steps li{ margin-bottom:12px; }
  .ptype-unsure-steps li:last-child{ margin-bottom:0; }
  .ptype-unsure-steps code{ background:var(--paper-dark); padding:1px 5px; border-radius:4px; font-size:12.5px; }
  .prompt-card{
    background:var(--paper-dark); border:1px solid var(--border); border-radius:8px;
    padding:11px 12px; margin:8px 0; display:flex; gap:10px; align-items:flex-start;
  }
  .prompt-card-text{ flex:1 1 auto; font-size:13.3px; color:var(--ink); line-height:1.5; font-style:italic; overflow-wrap:anywhere; }
  .prompt-card-text b{ font-style:normal; color:var(--c4-dark); }
  .copy-btn-inline.on-light{ border-color:var(--ink-soft); color:var(--ink-soft); }
  .copy-btn-inline.on-light:hover{ color:var(--ink); border-color:var(--ink); }
  .copy-btn-inline.on-light.copied{ color:var(--c2-dark); border-color:var(--c2-dark); }

  .ptype-panel{ display:none; }
  .ptype-panel.show{ display:block; }
  .ptype-note{
    display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:10.5px;
    text-transform:uppercase; letter-spacing:.05em; color:var(--c4-dark);
    background:var(--c4-tint); border:1px solid var(--c4-border); border-radius:5px;
    padding:2px 8px; margin-bottom:8px;
  }
  .optional-badge{
    display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:10px;
    text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
    background:var(--paper-dark); border:1px solid var(--border); border-radius:5px;
    padding:1px 7px; margin-left:8px; font-weight:400;
  }
  .skip-note{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:var(--c2-tint); border:1px solid var(--c2-border); border-radius:10px;
    padding:13px 16px; margin-bottom:14px; font-size:13.5px; color:var(--ink);
  }
  .skip-note-text{ flex:1 1 220px; }
  .skip-note-jump{
    background:var(--c2); color:#fff; border:none; border-radius:7px;
    padding:9px 14px; font-family:'IBM Plex Sans', sans-serif; font-size:13px; font-weight:600;
    cursor:pointer; min-height:38px; flex:0 0 auto;
  }
  .skip-note-jump:hover{ background:var(--c2-dark); }
  .done-note{
    display:flex; align-items:flex-start; gap:10px;
    background:var(--c0-tint); border:1px solid var(--c0-border); border-radius:10px;
    padding:13px 16px; margin:10px 0; font-size:13.8px; color:var(--ink);
  }
  .done-note b{ color:var(--c0-dark); }

  /* ---------- Chapters (stacked, always visible, collapsed by default) ---------- */
  .chapter{
    background:var(--card); border:1px solid var(--border); border-left:4px solid transparent;
    border-radius:10px; margin-bottom:12px;
  }
  .chapter.t1{ border-left-color:var(--c1); }
  .chapter.t2{ border-left-color:var(--c2); }
  .chapter.t3{ border-left-color:var(--c3); }
  .chapter.t4{ border-left-color:var(--c4); }
  .chapter.t0{ border-left-color:var(--c0); }
  .chapter.tS{ border-left-color:var(--cS); }
  .chapter-head{
    width:100%; display:flex; align-items:center; gap:12px; padding:15px 16px;
    background:var(--card); border:none; border-radius:10px 10px 0 0; cursor:pointer; text-align:left;
    font-family:'IBM Plex Slab', serif; font-size:16.5px; font-weight:700; color:var(--ink);
    min-height:52px; -webkit-tap-highlight-color:transparent;
  }
  .chapter.open .chapter-head{
    position:sticky; top:var(--stick-1); z-index:15;
    box-shadow:0 3px 8px rgba(43,42,38,0.12);
  }
  .chapter-icon{
    width:32px; height:32px; border-radius:8px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff;
  }
  .t1 .chapter-icon{ background:var(--c1); }
  .t2 .chapter-icon{ background:var(--c2); }
  .t3 .chapter-icon{ background:var(--c3); }
  .t4 .chapter-icon{ background:var(--c4); }
  .t0 .chapter-icon{ background:var(--c0); }
  .tS .chapter-icon{ background:var(--cS); }
  .chapter-chev{ margin-left:auto; color:var(--ink-soft); font-size:13px; transition:transform .2s ease; flex:0 0 auto; }
  .chapter.open .chapter-chev{ transform:rotate(180deg); }
  .chapter-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; border-radius:0 0 10px 10px; }
  .chapter.open .chapter-body{ max-height:20000px; }
  /* Once the open transition finishes, JS adds cb-visible so overflow no longer clips —
     overflow:hidden on this ancestor otherwise prevents position:sticky from working on
     anything nested inside it (e.g. the section headers below). Overflow is switched back
     to hidden immediately on close so the collapse animation still clips correctly. */
  .chapter-body.cb-visible{ overflow:visible; }
  .chapter-inner{ padding:0 16px 16px; }

  /* ---------- Sections ---------- */
  .tab-intro{ font-size:13px; color:var(--ink-soft); margin-bottom:14px; }
  .section{
    background:var(--paper); border:1px solid var(--border); border-radius:10px;
    margin-bottom:12px;
  }
  .section-head{
    width:100%; display:flex; align-items:center; gap:12px; padding:14px 16px;
    background:transparent; border:none; cursor:pointer; text-align:left;
    font-family:'IBM Plex Slab', serif; font-size:15.5px; font-weight:600; color:var(--ink);
    min-height:44px;
  }
  .section.open .section-head{
    position:sticky; top:var(--stick-2); z-index:14;
    background:var(--paper);
    box-shadow:0 3px 8px rgba(43,42,38,0.12);
    border-radius:10px 10px 0 0;
  }
  .section-num{
    flex:0 0 auto; width:26px; height:26px; border-radius:50%;
    color:#fff; font-family:'IBM Plex Mono', monospace; font-size:12px;
    display:flex; align-items:center; justify-content:center;
  }
  .t1 .section-num{ background:var(--c1); }
  .t2 .section-num{ background:var(--c2); }
  .t3 .section-num{ background:var(--c3); }
  .t4 .section-num{ background:var(--c4); }
  .t0 .section-num{ background:var(--c0); }
  .tS .section-num{ background:var(--cS); }
  .section.appendix .section-num{ background:none; color:var(--ink-soft); font-size:14px; }
  .section-head .chev{ margin-left:auto; color:var(--ink-soft); transition:transform .18s ease; font-size:13px; }
  .section.open .chev{ transform:rotate(180deg); }
  .section-body{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
  .section.open .section-body{ max-height:20000px; }
  /* Once the open transition finishes, JS adds sb-visible so overflow no longer clips —
     a safety net for any section content that somehow exceeds the 20000px cap above
     (mirrors the chapter-body/cb-visible pattern). Overflow is switched back to hidden
     before the close transition starts (see toggleSection/collapseAllSections), so the
     collapse animation still works. */
  .section-body.sb-visible{ overflow:visible; }
  .section-inner{ padding:0 16px 16px 54px; font-size:14.3px; }
  .section.appendix .section-inner{ padding-left:16px; }
  .section-inner p{ margin:0 0 10px; color:var(--ink-soft); }

  /* ---------- Code / command blocks ---------- */
  .cmd-block{
    background:var(--terminal-bg-alt); border-radius:8px; padding:10px 12px; margin:10px 0;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }
  .cmd-block code{ color:#EFE7CC; font-size:13.5px; flex:1 1 200px; overflow-wrap:anywhere; word-break:break-word; min-width:0; }
  .cmd-block .prompt-dot{ color:var(--terminal-text); }
  .run-btn{
    flex:0 0 auto; color:#fff; border:none; border-radius:6px; padding:6px 12px;
    font-family:'IBM Plex Mono', monospace; font-size:12px; cursor:pointer; min-height:32px;
    transition:background .15s ease, transform .1s ease;
  }
  .t1 .run-btn{ background:var(--c1); } .t1 .run-btn:hover{ background:var(--c1-dark); }
  .t2 .run-btn{ background:var(--c2); } .t2 .run-btn:hover{ background:var(--c2-dark); }
  .t3 .run-btn{ background:var(--c3); } .t3 .run-btn:hover{ background:var(--c3-dark); }
  .t4 .run-btn{ background:var(--c4); } .t4 .run-btn:hover{ background:var(--c4-dark); }
  .run-btn.ran{ background:var(--staged) !important; }
  .run-btn:active{ transform:scale(.96); }

  .zip-download{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin:16px 0 4px; padding:12px 14px;
    background:var(--c0-tint); border:1px solid var(--c0-border); border-radius:10px;
  }
  .zip-download p{ margin:0; font-size:13.5px; color:var(--ink-soft); flex:1 1 200px; }
  .zip-download-btn{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
    background:var(--c0); color:#fff; border:none; border-radius:7px;
    padding:8px 14px; font-family:'IBM Plex Sans', sans-serif; font-weight:600;
    font-size:13px; cursor:pointer; transition:background .15s ease, transform .1s ease;
  }
  .zip-download-btn:hover{ background:var(--c0-dark); }
  .zip-download-btn:active{ transform:scale(.96); }
  .zip-download-btn:disabled{ opacity:.6; cursor:default; }

  .copy-btn-inline{
    flex:0 0 auto; background:none; border:1px solid var(--terminal-dim); color:var(--terminal-dim);
    border-radius:6px; width:30px; height:30px; min-height:30px; font-size:13px; cursor:pointer;
    transition:color .15s ease, border-color .15s ease;
  }
  .copy-btn-inline:hover{ color:#EFE7CC; border-color:#EFE7CC; }
  .copy-btn-inline.copied{ color:#7FBF7F; border-color:#7FBF7F; }

  /* file-content blocks (not shell commands) */
  .file-block{ background:var(--terminal-bg-alt); border-radius:8px; margin:10px 0; overflow:hidden; }
  .file-block-head{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:7px 12px; background:rgba(255,255,255,0.04);
    font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--terminal-dim); letter-spacing:.04em;
  }
  .file-block pre{ margin:0; padding:10px 12px; color:#EFE7CC; font-family:'IBM Plex Mono', monospace; font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; }

  /* Pre-Made Starter Project "The files" section: fixed-size box with internal scroll, so long files don't push the page into endless scrolling */

  .starter-preview{
    display:block; width:100%; max-width:100%; height:440px; min-width:0;
    border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow); margin:10px 0 16px; background:#fff;
  }
  @media (max-width:560px){
    .starter-preview{ height:480px; }
  }

  .section-toggle-all{
    display:flex; align-items:center; gap:6px; margin:0 0 12px;
    font-family:'IBM Plex Sans', sans-serif; font-size:12.5px; color:var(--ink-soft);
  }
  .section-toggle-all button{
    background:none; border:none; padding:0; margin:0; cursor:pointer;
    color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px;
    font-size:12.5px; font-family:inherit;
  }
  .section-toggle-all button:hover{ color:var(--ink); }
  .section-toggle-all .sep{ color:var(--border); }

  .key-block{
    display:inline-flex; align-items:center; gap:6px; background:var(--paper-dark);
    border:1px solid var(--border); border-radius:6px; padding:5px 12px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; margin:4px 6px 4px 0;
  }

  .note{ font-size:13px; color:var(--ink-soft); border-left:3px solid var(--c1); padding:6px 0 6px 10px; margin:10px 0; }
  .warn{ font-size:13px; color:var(--ink); background:#F6E4DE; border-left:3px solid var(--err); border-radius:0 6px 6px 0; padding:8px 12px; margin:10px 0; }
  .ui-tag{ display:inline-block; background:var(--c3-tint); color:var(--c3-dark); border:1px solid var(--c3-border); border-radius:5px; padding:1px 7px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; }

  /* ---------- Tables ---------- */
  table.ref-table{ width:100%; border-collapse:collapse; font-size:13.5px; margin:10px 0; }
  table.ref-table th, table.ref-table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); }
  table.ref-table th{ font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
  table.ref-table td code{ background:var(--paper-dark); padding:1px 5px; border-radius:4px; font-size:12.5px; }

  .keyconcepts{ display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; font-size:13.5px; }
  @media (max-width:560px){ .keyconcepts{ grid-template-columns:1fr; } }
  .keyconcepts dt{ font-family:'IBM Plex Mono', monospace; color:var(--ink); font-weight:600; }
  .keyconcepts dd{ margin:0 0 10px; color:var(--ink-soft); }

  .cheat-list{ font-family:'IBM Plex Mono', monospace; font-size:13px; display:flex; flex-direction:column; gap:4px; }
  .cheat-list .cl-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 10px; border-radius:6px; background:var(--paper-dark); }
  .cheat-list .cl-cmd{ color:var(--ink); } .cheat-list .cl-desc{ color:var(--ink-soft); text-align:right; }

  .good-bad{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0; }
  @media(max-width:560px){ .good-bad{ grid-template-columns:1fr; } }
  .good-bad .gb-card{ border-radius:8px; padding:10px 12px; font-size:13px; }
  .good-bad .good{ background:var(--c2-tint); border:1px solid var(--c2-border); }
  .good-bad .bad{ background:#F6E4DE; border:1px solid #E3BEAF; }
  .good-bad h4{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-transform:uppercase; margin:0 0 6px; }
  .good-bad .good h4{ color:var(--c2-dark); } .good-bad .bad h4{ color:var(--err); }
  .good-bad ul{ margin:0; padding-left:18px; }

  .checklist{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
  .check-item{ display:flex; align-items:center; gap:9px; font-size:13.8px; padding:6px 8px; border-radius:6px; cursor:pointer; user-select:none; }
  .check-item:hover{ background:var(--paper-dark); }
  .check-item .box{ width:16px; height:16px; border:1.5px solid var(--border); border-radius:4px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; }
  .check-item.checked .box{ background:var(--c2); border-color:var(--c2); }
  .check-item.checked span.txt{ text-decoration:line-through; color:var(--ink-soft); }

  .flow-diagram{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--ink-soft); background:var(--paper-dark); border-radius:8px; padding:12px 16px; line-height:1.9; white-space:pre; overflow-x:auto; }

  footer{ text-align:center; font-size:12px; color:var(--ink-soft); margin-top:26px; }

  /* ---------- Terminal ---------- */
  .layout{ display:grid; grid-template-columns: 1.35fr 1fr; gap:22px; align-items:start; }
  body.mode-mobile .layout{ grid-template-columns: 1fr !important; }
  body.mode-pc .layout{ grid-template-columns: 1fr; transition:grid-template-columns .25s ease; }
  body.mode-pc.term-expanded .layout{ grid-template-columns: 1.35fr 1fr; }

  .terminal-window{ background:var(--terminal-bg); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; border:1px solid #0F1713; }
  .terminal-bar{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--terminal-bg-alt); }
  .dot{ width:10px; height:10px; border-radius:50%; }
  .dot.r{ background:#C1543D; } .dot.y{ background:#D2A03F; } .dot.g{ background:#5FA86A; }
  .terminal-title{ margin-left:8px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--terminal-dim); }
  .terminal-reset{ margin-left:auto; background:none; border:1px solid var(--terminal-dim); color:var(--terminal-dim); border-radius:5px; font-family:'IBM Plex Mono', monospace; font-size:11px; padding:4px 9px; cursor:pointer; }
  .terminal-reset:hover{ color:var(--terminal-text); border-color:var(--terminal-text); }
  .terminal-collapse-btn{ display:none; }
  body.mode-pc.term-expanded .terminal-collapse-btn{
    display:inline-flex; align-items:center; justify-content:center; margin-left:8px;
    background:none; border:1px solid var(--terminal-dim); color:var(--terminal-dim);
    border-radius:5px; width:24px; height:22px; cursor:pointer; font-size:13px; line-height:1;
  }
  body.mode-pc.term-expanded .terminal-collapse-btn:hover{ color:var(--terminal-text); border-color:var(--terminal-text); }

  #terminal-output{ height:315px; overflow-y:auto; padding:14px 16px 18px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--terminal-text); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  #terminal-output .line{ margin-bottom:10px; }
  #terminal-output .promptline{ color:#EFE7CC; display:flex; gap:6px; flex-wrap:wrap; }
  #terminal-output .promptline .p1{ color:#7FBF7F; } #terminal-output .promptline .p2{ color:var(--staged); }
  #terminal-output .out{ white-space:pre-wrap; margin-top:4px; color:var(--terminal-text); padding-left:2px; overflow-wrap:anywhere; }
  #terminal-output .out .new{ color:#7FBF7F; } #terminal-output .out .mod{ color:#D2A03F; } #terminal-output .out .del{ color:var(--err); } #terminal-output .out .dim{ color:var(--terminal-dim); }
  #terminal-output .welcome{ color:var(--terminal-dim); }
  .cursor{ display:inline-block; width:7px; height:14px; background:var(--terminal-text); animation:blink 1s steps(1) infinite; vertical-align:-2px; }
  @keyframes blink{ 50%{ opacity:0; } }
  .terminal-hint{ padding:10px 16px 14px; font-size:11.5px; color:var(--ink-soft); background:var(--card); border-top:1px solid var(--border); }

  /* Mobile drawer */
  .term-handle{ display:none; }
  .term-backdrop{ display:none; }
  body.mode-mobile{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.mode-mobile .terminal-pane{
    position:fixed !important; left:0; right:0; bottom:0; top:auto !important; z-index:60; margin:0; max-width:100%;
    transform:translateZ(0); will-change:transform;
  }
  body.mode-mobile .terminal-window{ border-radius:0; box-shadow:none; max-height:0; overflow:hidden; transition:max-height .3s ease; }
  body.mode-mobile .term-handle{
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px;
    background:var(--terminal-bg-alt); border-top:1px solid #0F1713; border-radius:14px 14px 0 0;
    box-shadow:0 -6px 20px rgba(0,0,0,0.28); cursor:pointer; min-height:52px; position:relative;
    -webkit-tap-highlight-color:transparent;
  }
  body.mode-mobile .term-handle::before{ content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:36px; height:4px; border-radius:2px; background:var(--terminal-dim); }
  body.mode-mobile .term-handle-text{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--terminal-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body.mode-mobile .term-handle-sub{ color:var(--terminal-dim); font-size:12px; }
  body.mode-mobile .term-handle-chevron{ color:var(--terminal-dim); font-size:13px; transition:transform .25s ease; flex:0 0 auto; }
  body.mode-mobile .terminal-pane.expanded .term-handle-chevron{ transform:rotate(180deg); }
  body.mode-mobile .terminal-pane.expanded .terminal-window{ max-height:calc(31.5vh - 52px); }
  body.mode-mobile #terminal-output{ height:max(115px, min(calc(31.5vh - 136px), 231px)); }
  body.mode-mobile .term-backdrop{ position:fixed; inset:0; background:rgba(27,38,33,0.35); z-index:55; opacity:0; pointer-events:none; transition:opacity .25s ease; }
  body.mode-mobile .terminal-pane.expanded ~ .term-backdrop, body.mode-mobile .terminal-pane.expanded + .term-backdrop{ opacity:1; pointer-events:auto; }

  body.mode-pc .terminal-pane{
    position:fixed; top:50%; right:16px; transform:translateY(-50%);
    width:auto; z-index:25;
  }
  body.mode-pc.term-expanded .terminal-pane{
    position:sticky; top:var(--stick-1); right:auto; transform:none; z-index:20;
  }
  body.mode-pc .term-backdrop{ display:none !important; }
  body.mode-pc .terminal-window{
    max-height:none; overflow:visible; border-radius:12px; box-shadow:var(--shadow);
    display:none;
  }
  body.mode-pc.term-expanded .terminal-window{ display:block; }

  body.mode-pc .term-handle{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    background:var(--terminal-bg); border:1px solid #0F1713; border-radius:10px;
    padding:16px 9px; box-shadow:var(--shadow); cursor:pointer;
  }
  body.mode-pc.term-expanded .term-handle{ display:none; }
  body.mode-pc .term-handle-text{
    writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
    font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--terminal-text);
    letter-spacing:.03em; white-space:nowrap;
  }
  body.mode-pc .term-handle-sub{ display:none; }
  body.mode-pc .term-handle-chevron{ color:var(--terminal-dim); font-size:12px; transform:rotate(90deg); }
  body.mode-pc{ padding-bottom:0 !important; }

  /* ============================================================
     Below here: the two-page layout, the pickers, and the
     starter project cards.
     ============================================================ */

  /* ---------- Page tabs ---------- */
  .tabs-wrap{
    position:sticky; top:66px; z-index:29;
    background:var(--paper); padding-bottom:10px; margin-bottom:4px;
  }
  .page-tabs{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
  }
  .page-tab{
    display:flex; align-items:center; gap:11px; text-align:left;
    background:var(--card); border:1.5px solid var(--border); border-radius:12px;
    padding:12px 15px; cursor:pointer; min-height:58px;
    font-family:'IBM Plex Sans', sans-serif; color:var(--ink);
    transition:border-color .15s ease, background .15s ease, transform .1s ease;
  }
  .page-tab:hover{ border-color:var(--c0); }
  .page-tab:active{ transform:scale(.99); }
  .page-tab.active{ border-color:var(--c0); background:var(--c0-tint); box-shadow:var(--shadow); }
  .page-tab-icon{
    width:34px; height:34px; flex:0 0 auto; border-radius:9px;
    display:flex; align-items:center; justify-content:center; font-size:17px;
    background:var(--paper-dark); color:var(--ink);
  }
  .page-tab.active .page-tab-icon{ background:var(--c0); color:#fff; }
  .page-tab-text{ display:flex; flex-direction:column; min-width:0; }
  .page-tab-text b{ font-family:'IBM Plex Slab', serif; font-size:15px; }
  .page-tab-text span{ font-size:12.3px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @media (max-width:620px){
    .page-tab{ padding:10px 12px; gap:9px; min-height:52px; }
    .page-tab-text b{ font-size:13.8px; }
    .page-tab-text span{ display:none; }
  }

  .page-panel{ display:none; }
  .page-panel.active{ display:block; }

  /* ---------- Page intro ---------- */
  .page-lede{
    font-size:15px; color:var(--ink-soft); margin:4px 0 16px; max-width:64ch;
  }
  .page-lede b{ color:var(--ink); }

  .step-label{
    display:flex; align-items:center; gap:8px; margin:22px 0 9px;
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.09em;
    text-transform:uppercase; color:var(--ink-soft);
  }
  .step-label::after{ content:''; flex:1 1 auto; height:1px; background:var(--border); }
  .step-label .step-n{
    width:19px; height:19px; border-radius:50%; background:var(--c0); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:10.5px;
  }

  /* ---------- Collapsible picker widget (env + project type) ---------- */
  .picker{ margin-bottom:6px; }
  .picker-summary{
    display:flex; align-items:center; gap:10px;
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    padding:11px 14px; min-height:46px; font-size:13.5px; color:var(--ink-soft);
  }
  .picker.open .picker-summary{ display:none; }
  .picker-summary b{ color:var(--ink); }
  .picker-summary .dim{ color:var(--ink-soft); }
  .picker-summary-main{ flex:1 1 auto; min-width:0; }
  .picker-change{
    flex:0 0 auto; background:none; border:1px solid var(--c4-border); border-radius:6px;
    padding:5px 10px; cursor:pointer; color:var(--c4-dark);
    font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  }
  .picker-change:hover{ background:var(--c4-tint); }
  .picker-flow{
    display:none; background:var(--card); border:1px solid var(--border);
    border-radius:10px; padding:15px;
  }
  .picker.open .picker-flow{ display:block; }
  .picker-title{ font-family:'IBM Plex Slab', serif; font-weight:600; font-size:15.5px; margin-bottom:3px; }
  .picker-sub{ font-size:13px; color:var(--ink-soft); margin-bottom:12px; }

  /* ---------- Big choice cards (used by both pickers) ---------- */
  .choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  @media (max-width:640px){ .choice-grid{ grid-template-columns:1fr; } }
  .choice-card{
    display:flex; align-items:flex-start; gap:11px; text-align:left;
    background:var(--paper); border:1.5px solid var(--border); border-radius:11px;
    padding:13px; cursor:pointer; font-family:'IBM Plex Sans', sans-serif; color:var(--ink);
    transition:border-color .15s ease, background .15s ease, transform .1s ease;
  }
  .choice-card:hover{ border-color:var(--c4); background:var(--c4-tint); }
  .choice-card:active{ transform:scale(.99); }
  .choice-card.active{ border-color:var(--c0); background:var(--c0-tint); }
  .choice-icon{ font-size:20px; flex:0 0 auto; line-height:1.3; }
  .choice-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .choice-label{ font-weight:600; font-size:14.5px; }
  .choice-sub{ font-size:12.5px; color:var(--c4-dark); font-family:'IBM Plex Mono', monospace; }
  .choice-who{ font-size:12.8px; color:var(--ink-soft); margin-top:4px; line-height:1.45; }

  .picker-help{
    display:block; margin-top:10px; background:none; border:none; cursor:pointer;
    color:var(--ink-soft); font-family:'IBM Plex Sans', sans-serif; font-size:13px;
    padding:7px 2px; text-decoration:underline; text-underline-offset:3px;
  }
  .picker-help:hover{ color:var(--ink); }

  /* ---------- Question flow ---------- */
  .quiz{ display:none; margin-top:10px; }
  .quiz.open{ display:block; }
  .quiz-step{
    background:var(--c3-tint); border:1px solid var(--c3-border); border-radius:11px; padding:15px;
  }
  .quiz-count{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--c3-dark); margin-bottom:7px;
  }
  .quiz-ask{ font-family:'IBM Plex Slab', serif; font-weight:600; font-size:15.5px; line-height:1.4; }
  .quiz-ask code{ background:rgba(255,255,255,.65); padding:1px 6px; border-radius:4px; font-size:13.5px; }
  .quiz-hint{ font-size:13px; color:var(--ink-soft); margin-top:6px; }
  .quiz-answers{ display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; }
  .quiz-answer{
    flex:1 1 190px; background:#fff; border:1.5px solid var(--c3-border); border-radius:9px;
    padding:12px 15px; cursor:pointer; min-height:46px;
    font-family:'IBM Plex Sans', sans-serif; font-size:14px; font-weight:600; color:var(--ink);
    transition:border-color .15s ease, background .15s ease;
  }
  .quiz-answer:hover{ border-color:var(--c3); background:var(--c3-tint); }

  /* ---------- Ready-made vs build kit ---------- */
  .flavour-row{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  @media (max-width:520px){ .flavour-row{ grid-template-columns:1fr; } }
  .flavour-btn{
    display:flex; align-items:center; gap:11px; text-align:left;
    background:var(--card); border:1.5px solid var(--border); border-radius:11px;
    padding:12px 14px; cursor:pointer; min-height:56px;
    font-family:'IBM Plex Sans', sans-serif; color:var(--ink);
    transition:border-color .15s ease, background .15s ease;
  }
  .flavour-btn:hover{ border-color:var(--cS); }
  .flavour-btn.active{ border-color:var(--cS); background:var(--cS-tint); }
  .flavour-icon{ font-size:19px; }
  .flavour-text{ display:flex; flex-direction:column; }
  .flavour-text b{ font-size:14.5px; }
  .flavour-text span{ font-size:12.5px; color:var(--ink-soft); }
  .flavour-blurb{ font-size:13px; color:var(--ink-soft); margin:9px 0 0; }

  /* ---------- Starter cards ---------- */
  .starter{
    background:var(--card); border:1px solid var(--border); border-left:4px solid var(--cS);
    border-radius:10px; margin-bottom:11px;
  }
  .starter-head{
    width:100%; display:flex; align-items:flex-start; gap:13px; padding:15px 16px;
    background:none; border:none; cursor:pointer; text-align:left;
    -webkit-tap-highlight-color:transparent;
  }
  .starter-icon{
    width:38px; height:38px; flex:0 0 auto; border-radius:10px; background:var(--cS-tint);
    border:1px solid var(--cS-border);
    display:flex; align-items:center; justify-content:center; font-size:19px;
  }
  .starter-headings{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
  .starter-name{
    font-family:'IBM Plex Slab', serif; font-weight:700; font-size:16.5px; color:var(--ink);
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  }
  .level{
    font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.05em;
    text-transform:uppercase; border-radius:5px; padding:2px 7px; font-weight:400;
  }
  .level-easiest{ background:var(--c2-tint); color:var(--c2-dark); border:1px solid var(--c2-border); }
  .level-step-up{ background:var(--c1-tint); color:var(--c1-dark); border:1px solid var(--c1-border); }
  .starter-tagline{ font-size:13.6px; color:var(--ink-soft); line-height:1.5; }
  .chip-row{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
  .chip{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-soft);
    background:var(--paper); border:1px solid var(--border); border-radius:5px; padding:2px 7px;
  }
  .chip.type-chip{ color:var(--c4-dark); background:var(--c4-tint); border-color:var(--c4-border); }
  .starter-chev{ flex:0 0 auto; color:var(--ink-soft); font-size:13px; transition:transform .2s ease; padding-top:4px; }
  .starter.open .starter-chev{ transform:rotate(180deg); }
  .starter-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
  .starter.open .starter-body{ max-height:none; }
  .starter-inner{ padding:0 16px 16px; }
  .starter-what{ font-size:14px; color:var(--ink-soft); margin:0 0 14px; }

  /* ---------- "What to do" block ---------- */
  .do-block{
    background:var(--c0-tint); border:1px solid var(--c0-border); border-radius:11px;
    padding:14px 16px; margin-bottom:14px;
  }
  .do-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
  .do-badge{
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.04em;
    background:var(--c0); color:#fff; border-radius:5px; padding:3px 9px;
  }
  .do-in{ font-size:13px; color:var(--ink-soft); }
  .do-change{
    margin-left:auto; background:none; border:1px solid var(--c0-border); border-radius:6px;
    padding:4px 10px; cursor:pointer; color:var(--c0-dark);
    font-family:'IBM Plex Mono', monospace; font-size:11px;
  }
  .do-change:hover{ background:#fff; }
  .do-steps{ margin:0; padding-left:20px; font-size:14px; color:var(--ink); }
  .do-steps li{ margin-bottom:7px; line-height:1.55; }
  .do-steps li:last-child{ margin-bottom:0; }
  .do-steps code{ background:rgba(255,255,255,.7); padding:1px 5px; border-radius:4px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; }
  .do-tip{ margin:11px 0 0; font-size:12.8px; color:var(--ink-soft); }
  .do-prompt{ margin:0; font-size:13.8px; color:var(--ink-soft); }

  /* ---------- Disclosure blocks ---------- */
  .drop{
    border:1px solid var(--border); border-radius:10px; background:var(--paper);
    margin-bottom:9px; overflow:hidden;
  }
  .drop > summary{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:12px 15px; cursor:pointer; list-style:none; min-height:44px;
    -webkit-tap-highlight-color:transparent;
  }
  .drop > summary::-webkit-details-marker{ display:none; }
  .drop > summary::after{ content:'▾'; margin-left:auto; color:var(--ink-soft); font-size:12px; transition:transform .2s ease; }
  .drop[open] > summary::after{ transform:rotate(180deg); }
  .drop > summary:hover{ background:var(--paper-dark); }
  .drop-title{ font-family:'IBM Plex Slab', serif; font-weight:600; font-size:14.5px; }
  .drop-note{ font-size:12.5px; color:var(--ink-soft); }
  .drop-body{ padding:2px 15px 15px; }
  .drop-lede{ font-size:13.5px; color:var(--ink-soft); margin:8px 0; }
  .drop-accent{ border-color:var(--c1-border); background:var(--c1-tint); }
  .drop-accent .drop-title{ color:var(--c1-dark); }
  .plain-list{ margin:0 0 12px; padding-left:20px; font-size:13.8px; color:var(--ink-soft); }
  .plain-list li{ margin-bottom:5px; }

  /* ---------- File list ---------- */
  .file-row{ border-top:1px solid var(--border); }
  .file-row:first-child{ border-top:none; }
  .file-row > summary{
    display:flex; align-items:center; gap:10px; padding:10px 4px; cursor:pointer;
    list-style:none; min-height:40px; -webkit-tap-highlight-color:transparent;
  }
  .file-row > summary::-webkit-details-marker{ display:none; }
  .file-row > summary::before{ content:'▸'; color:var(--ink-soft); font-size:11px; flex:0 0 auto; transition:transform .15s ease; }
  .file-row[open] > summary::before{ transform:rotate(90deg); }
  .file-row > summary:hover .file-name{ color:var(--c3-dark); }
  .file-name{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink); flex:0 0 auto; }
  .file-note{ font-size:12.3px; color:var(--ink-soft); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .file-note b{ color:var(--ink); }
  .file-lines{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-soft); flex:0 0 auto; }
  @media (max-width:560px){ .file-note{ display:none; } }
  .file-row .file-block pre{ max-height:340px; overflow:auto; overscroll-behavior:contain; }

  /* ---------- Rendered README ---------- */
  .readme{ font-size:14px; color:var(--ink); }
  .readme h2{ font-size:16px; margin:16px 0 8px; }
  .readme h3{ font-size:14.5px; margin:14px 0 6px; }
  .readme h4{ font-family:'IBM Plex Slab', serif; font-size:13.5px; margin:12px 0 5px; }
  .readme p{ margin:0 0 9px; color:var(--ink-soft); }
  .readme ul, .readme ol{ margin:0 0 11px; padding-left:21px; color:var(--ink-soft); }
  .readme li{ margin-bottom:5px; }
  .readme code{
    background:var(--paper-dark); padding:1px 5px; border-radius:4px;
    font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--ink);
  }
  .readme b{ color:var(--ink); }
  .readme blockquote{
    margin:10px 0; padding:8px 12px; font-size:13px; color:var(--ink-soft);
    border-left:3px solid var(--c1); background:var(--paper-dark); border-radius:0 6px 6px 0;
  }

  /* ---------- Customiser form ---------- */
  .cf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  @media (max-width:560px){ .cf-grid{ grid-template-columns:1fr; } }
  .cf{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; font-size:12.5px; color:var(--ink-soft); }
  .cf > span{ font-weight:600; }
  .cf input, .cf textarea,
  .cf-project input, .cf-project textarea{
    font-family:'IBM Plex Sans', sans-serif; font-size:13.5px; color:var(--ink);
    background:#fff; border:1px solid var(--c1-border); border-radius:8px;
    padding:9px 11px; width:100%; resize:vertical;
  }
  .cf input:focus, .cf textarea:focus,
  .cf-project input:focus, .cf-project textarea:focus{ outline:2px solid var(--c1); outline-offset:1px; }
  .cf-accent{ display:flex; align-items:center; gap:12px; margin:6px 0 14px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
  .swatches{ display:flex; gap:7px; }
  .swatch{ width:28px; height:28px; border-radius:8px; border:2px solid transparent; cursor:pointer; }
  .swatch.active{ border-color:var(--ink); }
  .cf-projects{ display:flex; flex-direction:column; gap:10px; }
  .cf-project{
    background:rgba(255,255,255,.55); border:1px solid var(--c1-border); border-radius:10px;
    padding:11px; display:flex; flex-direction:column; gap:7px;
  }
  .cf-project-head{
    display:flex; align-items:center; font-family:'IBM Plex Mono', monospace;
    font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--c1-dark);
  }
  .cf-remove{ margin-left:auto; background:none; border:1px solid var(--c1-border); border-radius:6px; width:24px; height:24px; cursor:pointer; color:var(--ink-soft); font-size:15px; line-height:1; }
  .cf-remove:hover{ color:var(--err); border-color:var(--err); }
  .cf-two{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  @media (max-width:520px){ .cf-two{ grid-template-columns:1fr; } }
  .cf-actions{ display:flex; gap:9px; flex-wrap:wrap; margin-top:12px; }
  .cf-add, .cf-reset{
    background:#fff; border:1px solid var(--c1-border); border-radius:8px; padding:9px 14px;
    font-family:'IBM Plex Sans', sans-serif; font-size:13px; font-weight:600;
    color:var(--c1-dark); cursor:pointer; min-height:38px;
  }
  .cf-add:hover, .cf-reset:hover{ background:var(--c1-tint); }
  .cf-reset{ color:var(--ink-soft); font-weight:400; }
  .cf-status{ font-size:12.5px; color:var(--ink-soft); margin:12px 0 0; }
  .cf-status code{ background:rgba(255,255,255,.7); padding:1px 5px; border-radius:4px; font-family:'IBM Plex Mono', monospace; font-size:12px; }

  /* ---------- Hand-off to the guide ---------- */
  .hand-off{ font-size:13.3px; color:var(--ink-soft); margin:14px 0 0; }
  .link-btn{
    background:none; border:none; padding:0; cursor:pointer; color:var(--c3-dark);
    font-family:'IBM Plex Sans', sans-serif; font-size:13.3px; font-weight:600;
    text-decoration:underline; text-underline-offset:3px;
  }
  .link-btn:hover{ color:var(--c3); }

  /* ---------- Reassurance strip ---------- */
  .reassure{
    display:flex; align-items:flex-start; gap:10px;
    background:var(--c2-tint); border:1px solid var(--c2-border); border-radius:10px;
    padding:12px 15px; margin:16px 0 4px; font-size:13.5px; color:var(--ink);
  }
  .reassure b{ color:var(--c2-dark); }

  /* ---------- Terminal only belongs on the guide ---------- */
  body:not(.on-guide) .terminal-pane,
  body:not(.on-guide) .term-backdrop{ display:none !important; }

  @media (max-width:620px){
    :root{ --stick-1:112px; --stick-2:168px; }
    .tabs-wrap{ top:60px; }
    .wrap{ padding:16px 14px 70px; }
    .starter-inner{ padding:0 12px 14px; }
    .drop-body{ padding:2px 12px 13px; }
    .drop > summary{ padding:11px 12px; }
  }

  .suggested{
    margin-left:auto; flex:0 0 auto; align-self:flex-start;
    font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--c2-dark);
    background:var(--c2-tint); border:1px solid var(--c2-border);
    border-radius:5px; padding:2px 6px;
  }

  /* ---------- Chapter headings ---------- */
  .chapter-headings{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .chapter-sub{
    font-family:'IBM Plex Sans', sans-serif; font-weight:400; font-size:12.6px;
    color:var(--ink-soft); line-height:1.4;
  }
  .chapter.open .chapter-sub{ display:none; }

  /* Keep the collapsed terminal handle from sitting on top of the chevrons. */
  @media (min-width:981px){
    body.mode-pc:not(.term-expanded) .layout > main{ padding-right:46px; }
  }