:root{
    --bg:#f6f4ee; --surface:#ffffff; --surface-2:#edeade; --line:#ddd7c8;
    --ink:#1c1f26; --muted:#5c6470;
    --object:#0f766e; --object-soft:#dcefec; --object-ink:#0b5450;
    --ref:#b45309; --ref-soft:#f6e3c2;
    --danger:#b91c1c; --danger-soft:#f6dede;
    --shadow: 0 1px 2px rgba(28,31,38,.04), 0 8px 24px -12px rgba(28,31,38,.18);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#11151c; --surface:#171c25; --surface-2:#1c2330; --line:#2a3140;
      --ink:#edf1f6; --muted:#93a1b4;
      --object:#2dd4bf; --object-soft:rgba(45,212,191,.12); --object-ink:#7fe9dc;
      --ref:#fbbf24; --ref-soft:rgba(251,191,36,.12);
      --danger:#fb7185; --danger-soft:rgba(251,113,133,.12);
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.55);
    }
  }
  :root[data-theme="dark"]{
    --bg:#11151c; --surface:#171c25; --surface-2:#1c2330; --line:#2a3140;
    --ink:#edf1f6; --muted:#93a1b4;
    --object:#2dd4bf; --object-soft:rgba(45,212,191,.12); --object-ink:#7fe9dc;
    --ref:#fbbf24; --ref-soft:rgba(251,191,36,.12);
    --danger:#fb7185; --danger-soft:rgba(251,113,133,.12);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.55);
  }
  *{box-sizing:border-box;}
  html{background:var(--bg);}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Hind Siliguri','Nirmala UI',system-ui,sans-serif;
    padding:0 20px; line-height:1.65;
  }
  .wrap{max-width:920px; margin:0 auto; padding-block:28px 80px;}
  .eyebrow{
    font-family:'Fraunces',serif; font-style:italic; font-weight:500;
    font-size:13px; letter-spacing:.03em; color:var(--object-ink);
    display:flex; align-items:center; gap:8px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ref);}
  h1,h2,h3{font-family:'Hind Siliguri',sans-serif; text-wrap:balance; margin:0;}
  h1{font-size:clamp(28px,5vw,42px); font-weight:700; line-height:1.25; margin-top:10px;}
  h2{font-size:clamp(21px,3.4vw,27px); font-weight:700;}
  p{margin:0;}
  .sub{color:var(--muted); font-size:16px; max-width:60ch;}
  code, .mono{font-family:'IBM Plex Mono',monospace;}

  /* ---------- hero code card ---------- */
  .hero{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center; margin-top:26px;}
  @media (max-width:720px){.hero{grid-template-columns:1fr;}}
  .code-card{
    background:var(--ink); color:#d7f7f1; border-radius:14px; padding:20px 22px;
    box-shadow:var(--shadow); font-family:'IBM Plex Mono',monospace; font-size:15px;
  }
  .code-card .ln{color:#6b7280; user-select:none; margin-right:14px;}
  .code-card .kw{color:#7fe9dc;} .code-card .str{color:#facc15;} .code-card .num{color:#f0abfc;}
  .code-card .cm{color:#8b96a8;}

  /* ---------- big idea strip ---------- */
  .bigidea{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:34px;}
  @media (max-width:640px){.bigidea{grid-template-columns:repeat(2,1fr);}}
  .bigidea .card{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:14px 14px 16px; box-shadow:var(--shadow);
  }
  .bigidea .num{font-family:'Fraunces',serif; font-weight:600; font-size:22px; color:var(--ref);}
  .bigidea .lbl{font-weight:700; margin-top:2px; font-size:15px;}
  .bigidea .d{color:var(--muted); font-size:13px; margin-top:4px;}

  /* ---------- stepper nav ---------- */
  .stepper{
    position:sticky; top:0; z-index:5; background:var(--bg);
    display:flex; gap:8px; overflow-x:auto; padding:16px 0; margin-top:30px;
    border-bottom:1px solid var(--line);
  }
  .stepper a{
    flex:0 0 auto; text-decoration:none; color:var(--muted); font-size:13px;
    font-family:'IBM Plex Mono',monospace; padding:7px 12px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface); white-space:nowrap;
  }
  .stepper a.active{color:var(--surface); background:var(--object); border-color:var(--object);}

  /* ---------- sections ---------- */
  section.step{margin-top:56px; scroll-margin-top:70px;}
  .step-head{display:flex; gap:14px; align-items:baseline;}
  .step-no{font-family:'Fraunces',serif; font-weight:600; font-size:30px; color:var(--line); line-height:1;}
  .prose{margin-top:14px; max-width:66ch; font-size:16px;}
  .prose + .prose{margin-top:10px;}
  .prose b{color:var(--ink);}

  .code-block{
    margin-top:16px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
    padding:12px 16px; font-family:'IBM Plex Mono',monospace; font-size:13.5px; color:var(--ink);
    overflow-x:auto; white-space:pre;
  }
  .cpy-note{
    margin-top:16px; border:1px dashed var(--ref); background:var(--ref-soft); border-radius:10px;
    padding:12px 16px; font-size:14px;
  }
  .cpy-note .tag{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; letter-spacing:.05em; color:var(--ref); text-transform:uppercase;}

  /* ---------- scene block ---------- */
  .scene-block{margin-top:20px;}
  .scene-block .bar{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
  .scene-block .bar .cap{font-size:12.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace;}
  .replay-btn{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; color:var(--object-ink);
    background:var(--object-soft); border:1px solid var(--object); border-radius:999px;
    padding:5px 12px; cursor:pointer;
  }
  .replay-btn:hover{filter:brightness(1.05);}
  .mem-scene{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden;}
  .mem-scene svg{display:block; width:100%; height:auto;}

  .mem-panel-bg{fill:var(--surface-2); stroke:var(--line);}
  .mem-panel-label{fill:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em;}
  .mem-name-box{fill:var(--surface); stroke:var(--ink); stroke-opacity:.28;}
  .mem-name-text{fill:var(--ink); font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:16px;}
  .mem-obj-box{fill:var(--object-soft); stroke:var(--object); stroke-width:1.4;}
  .mem-obj-box.is-danger{stroke:var(--danger); stroke-dasharray:5 4;}
  .mem-type{fill:var(--object-ink); font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px;}
  .mem-meta{fill:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:10.5px;}
  .mem-value{fill:var(--ink); font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:17px;}
  .mem-badge{fill:var(--surface); stroke:var(--muted);}
  .mem-badge-txt{fill:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;}
  .mem-arrow{fill:none; stroke:var(--ref); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:1000; stroke-dashoffset:0;}
  .mem-arrowhead{fill:var(--ref);}
  .mem-name-box, .mem-obj-box, .mem-badge, .mem-node{transform-box:fill-box; transform-origin:center;}
  .mem-scene.replaying .mem-arrow{animation:memDraw .9s ease;}
  .mem-scene.replaying .mem-name-box, .mem-scene.replaying .mem-obj-box, .mem-scene.replaying .mem-node{animation:memPop .5s ease;}
  @keyframes memDraw{from{stroke-dashoffset:1000;}to{stroke-dashoffset:0;}}
  @keyframes memPop{from{opacity:0; transform:translateY(7px);}to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion: reduce){
    .mem-scene.replaying .mem-arrow, .mem-scene.replaying .mem-name-box, .mem-scene.replaying .mem-obj-box, .mem-scene.replaying .mem-node{animation:none !important;}
  }

  /* ---------- compare grid ---------- */
  .compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;}
  @media (max-width:640px){.compare{grid-template-columns:1fr;}}
  .compare .col .tag2{
    display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;
    padding:3px 9px; border-radius:999px; margin-bottom:8px; letter-spacing:.04em;
  }
  .compare .col.before .tag2{background:var(--surface-2); color:var(--muted); border:1px solid var(--line);}
  .compare .col.after .tag2{background:var(--object-soft); color:var(--object-ink); border:1px solid var(--object);}

  /* ---------- flow diagram ---------- */
  .flow-wrap{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:14px; margin-top:18px; display:flex; justify-content:center;}
  .flow-wrap svg{max-width:360px; width:100%; height:auto;}
  .mem-node{fill:var(--surface-2); stroke:var(--line);}
  .mem-node.hot{fill:var(--object-soft); stroke:var(--object);}
  .flow-title{fill:var(--ink); font-family:'Hind Siliguri',sans-serif; font-weight:700; font-size:14px;}
  .flow-sub{fill:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:10.5px;}

  /* ---------- analogy ---------- */
  .analogy-card{
    margin-top:18px; background:linear-gradient(180deg, var(--surface), var(--surface-2));
    border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:var(--shadow);
  }

  /* ---------- sandbox ---------- */
  .sandbox{
    margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow); padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:18px;
  }
  @media (max-width:760px){.sandbox{grid-template-columns:1fr;}}
  .sandbox h3{font-size:15px; font-weight:700; margin-bottom:8px;}
  .lines{list-style:none; margin:0; padding:0; font-family:'IBM Plex Mono',monospace; font-size:13.5px;}
  .lines li{padding:6px 10px; border-radius:6px; color:var(--muted); border:1px solid transparent;}
  .lines li.done{color:var(--ink);}
  .lines li.current{background:var(--ref-soft); border-color:var(--ref); color:var(--ink); font-weight:600;}
  .sb-controls{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
  .btn{
    font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; cursor:pointer;
    border-radius:9px; padding:8px 14px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  }
  .btn.primary{background:var(--object); border-color:var(--object); color:#fff;}
  .btn:disabled{opacity:.45; cursor:not-allowed;}
  textarea#sb-script{
    width:100%; font-family:'IBM Plex Mono',monospace; font-size:13px; border-radius:9px;
    border:1px solid var(--line); background:var(--surface-2); color:var(--ink); padding:10px; resize:vertical; min-height:150px;
  }
  .sb-log{
    margin-top:10px; max-height:150px; overflow-y:auto; font-family:'IBM Plex Mono',monospace; font-size:12.5px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:8px 10px;
  }
  .sb-log div{padding:3px 0; color:var(--muted); border-bottom:1px dashed var(--line);}
  .sb-log div:last-child{border-bottom:none;}
  .sb-log div.ev-create{color:var(--object-ink);}
  .sb-log div.ev-rebind{color:var(--ref);}
  .sb-log div.ev-gc{color:var(--danger);}

  footer{margin-top:70px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}