*{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:16px;line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1420px;margin:0 auto;padding:28px 24px 64px}

  /* ---------- header ---------- */
  header.top{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
  .wordmark{
    font-family:"Fredoka","Nunito Sans",sans-serif;font-weight:600;font-size:2.1rem;
    letter-spacing:.01em;display:flex;align-items:center;gap:11px;margin:0;
  }
  .wordmark .ai{color:var(--acc-ink);font-weight:500}
  .pup-mini{width:44px;height:44px;flex:0 0 auto}
  .lab-tag{
    font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--acc-ink);background:var(--acc-soft);
    border-radius:6px;padding:3px 9px;
  }
  .tagline{color:var(--ink-soft);max-width:72ch;margin:2px auto 24px;text-align:center}
  .tagline strong{color:var(--ink);font-weight:700}

  /* ---------- how it works ---------- */
  .how{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
  .how .step{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:13px 16px;display:flex;gap:12px;align-items:flex-start;
  }
  .how .k{
    font-family:"Fredoka",sans-serif;font-weight:600;flex:0 0 auto;
    width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:.95rem;
  }
  .how .step:nth-child(1) .k{background:var(--starter-soft);color:var(--starter-ink)}
  .how .step:nth-child(2) .k{background:var(--side-soft);color:var(--side-ink)}
  .how .step:nth-child(3) .k{background:var(--world-soft);color:var(--world-ink)}
  .how h3{margin:0 0 2px;font-size:.95rem;font-weight:800}
  .how p{margin:0;font-size:.85rem;color:var(--ink-soft)}

  /* ---------- workbench ---------- */
  .bench{display:grid;grid-template-columns:270px minmax(400px,1fr) minmax(380px,1.02fr);gap:20px;align-items:start}
  @media (max-width:1080px){.bench{grid-template-columns:270px 1fr}.ctx-col{grid-column:1/-1}}
  @media (max-width:760px){
    .bench{grid-template-columns:1fr}
    .how{grid-template-columns:1fr}
    .wrap{padding:20px 14px 48px}
  }

  .panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
  .panel-h{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:13px 16px;border-bottom:1px solid var(--line);
  }
  .panel-h h2{margin:0;font-family:"Fredoka",sans-serif;font-weight:500;font-size:1.05rem;letter-spacing:.01em}
  .panel-h .hint{font-size:.75rem;color:var(--ink-soft)}

  /* ---------- palette ---------- */
  .fam{padding:12px 14px 4px}
  .fam-label{
    display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:800;
    letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px;
  }
  .fam-label .swatch{width:10px;height:10px;border-radius:4px}
  .fam-label.p-starter{color:var(--starter-ink)}.fam-label.p-starter .swatch{background:var(--starter)}
  .fam-label.p-dino{color:var(--dino-ink)}.fam-label.p-dino .swatch{background:var(--dino)}
  .fam-label.p-world{color:var(--world-ink)}.fam-label.p-world .swatch{background:var(--world)}
  .fam-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding-bottom:8px}
  @media (max-width:760px){.fam-grid{grid-template-columns:repeat(5,1fr)}}

  .piece{
    position:relative;aspect-ratio:1;border-radius:14px;display:grid;place-items:center;
    font-size:1.5rem;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
    border:2.5px solid transparent;transition:transform .12s ease, opacity .15s ease;
    box-shadow:inset 0 -4px 0 rgba(0,0,0,.14), 0 2px 3px rgba(0,0,0,.1);
    overflow:hidden;
  }
  .piece::after{ /* silicone gloss */
    content:"";position:absolute;left:8%;right:8%;top:5%;height:38%;
    border-radius:10px 10px 40% 40%;
    background:linear-gradient(var(--gloss), transparent);
    pointer-events:none;
  }
  .piece>span:first-child{filter:drop-shadow(0 2px 1px rgba(0,0,0,.18))}
  .piece:hover{transform:translateY(-2px)}
  .piece:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
  .piece.p-starter{background:var(--starter-soft);border-color:var(--starter)}
  .piece.p-dino{background:var(--dino-soft);border-color:var(--dino)}
  .piece.p-world{background:var(--world-soft);border-color:var(--world)}
  .piece.used{opacity:.28;cursor:default;transform:none}
  .piece .nm{
    position:absolute;left:0;right:0;bottom:2px;text-align:center;
    font-size:.5rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px;
  }
  .palette-note{padding:4px 16px 14px;font-size:.75rem;color:var(--ink-soft)}

  /* ---------- play mat ---------- */
  .controls{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);
  }
  @media (max-width:480px){.controls{grid-template-columns:1fr}}
  .ctrl label{
    display:block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:4px;
  }
  .ctrl select{
    width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--line);
    background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:.88rem;font-weight:600;
  }
  .ctrl select:focus-visible{outline:3px solid var(--acc);outline-offset:1px}
  .app-note{grid-column:1/-1;margin:2px 0 0;font-size:.73rem;color:var(--ink-soft)}
  .ctrl.off{opacity:.4;pointer-events:none}

  .mat-shell{padding:16px 16px 6px}
  .examples{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
  .ex-label{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-right:2px}
  .exbtn{
    font-family:"Fredoka",sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.01em;
    border:1.5px solid var(--line);border-radius:999px;padding:5px 13px;cursor:pointer;
    background:var(--surface-2);color:var(--ink);transition:transform .1s ease, border-color .15s ease;
  }
  .exbtn:hover{transform:translateY(-1px);border-color:var(--acc)}
  .exbtn:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
  .exbtn.active{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-ink)}
  .gcell .piece.telling{
    transform:scale(1.13);z-index:3;
    box-shadow:0 0 0 3px var(--packc), 0 6px 16px rgba(0,0,0,.28), inset 0 -4px 0 rgba(0,0,0,.14);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .transport{display:flex;gap:8px;align-items:center;margin:0 0 12px}
  .tbtn{
    font-family:"Fredoka",sans-serif;font-weight:500;font-size:.85rem;letter-spacing:.02em;
    border:1.5px solid var(--line);border-radius:999px;padding:6px 15px;cursor:pointer;
    background:var(--surface);color:var(--ink);display:flex;gap:7px;align-items:center;
    transition:transform .1s ease, background .15s ease;
  }
  .tbtn:hover{transform:translateY(-1px)}
  .tbtn:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
  .tbtn.primary{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-ink)}
  .tbtn .ic{font-size:.8rem}
  .playstate{
    margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--acc-ink);background:var(--acc-soft);border-radius:6px;padding:3px 9px;
  }
  .playstate.paused{color:var(--ink-soft);background:var(--surface-2)}

  .bubble{
    position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
    padding:10px 14px;font-size:.9rem;margin:0 0 14px;min-height:44px;display:flex;align-items:center;
  }
  .bubble::after{
    content:"";position:absolute;left:34px;bottom:-8px;width:14px;height:14px;
    background:var(--surface-2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    transform:rotate(45deg);
  }
  .bubble .say{font-weight:700}
  .bubble.pop{animation:bpop .3s ease}
  @keyframes bpop{0%{transform:scale(.96)}60%{transform:scale(1.015)}100%{transform:scale(1)}}

  .mat{
    background:
      radial-gradient(var(--mat-dot) 1.2px, transparent 1.3px) 0 0/22px 22px,
      linear-gradient(160deg,var(--mat),var(--mat-deep));
    border-radius:18px;padding:16px 10px 14px;
  }
  .grid{
    display:grid;grid-template-columns:repeat(6,58px);grid-template-rows:repeat(3,58px);
    gap:7px;justify-content:center;
  }
  @media (max-width:440px){.grid{grid-template-columns:repeat(6,44px);grid-template-rows:repeat(3,44px);gap:5px}}
  .gcell{
    border-radius:13px;border:1.5px dashed transparent;position:relative;
    display:grid;place-items:center;transition:border-color .15s ease, background .15s ease;
  }
  .gcell.valid{border-color:var(--acc);animation:validpulse 1.4s ease infinite}
  @keyframes validpulse{0%,100%{background:transparent}50%{background:var(--acc-soft)}}
  .gcell .piece{width:100%;height:100%;aspect-ratio:auto;cursor:grab;
    box-shadow:inset 0 -4px 0 rgba(0,0,0,.14), 0 2px 3px rgba(0,0,0,.1)}
  .gcell .piece{font-size:1.35rem}
  .gcell .piece.snapin{animation:snapin .38s cubic-bezier(.34,1.56,.64,1)}
  @keyframes snapin{0%{transform:scale(.55)}100%{transform:scale(1)}}
  .gcell .piece.singing{animation:beatpulse 1.2s ease-in-out infinite}
  @keyframes beatpulse{0%,100%{transform:scale(1)}25%{transform:scale(1.06)}50%{transform:scale(1)}75%{transform:scale(1.06)}}
  /* top light bar — the box's chapter progress, in its pack colour */
  .lbar{position:absolute;top:6%;left:9%;right:9%;height:8px;border-radius:5px;
    background:var(--lbar-track);overflow:hidden;pointer-events:none;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
  .lbar i{display:block;height:100%;width:0;border-radius:5px;
    background:linear-gradient(rgba(255,255,255,.35), transparent 60%), var(--packc);
    box-shadow:0 0 12px var(--packc), 0 0 4px var(--packc)}

  .cellbase{
    grid-column:1;grid-row:2;position:relative;z-index:2;
    background:
      linear-gradient(var(--gloss), transparent 55%),
      linear-gradient(165deg,var(--basebox),var(--basebox-deep));
    border-radius:14px;display:grid;place-items:center;
    box-shadow:0 3px 0 rgba(0,0,0,.2), var(--shadow);
    transform:scale(1.14);
  }
  .cellbase svg{width:74%;height:74%}
  .cellbase .ring{
    position:absolute;inset:-3.5px;border-radius:17px;border:3px solid var(--acc);
    pointer-events:none;
  }
  .cellbase.playing .ring{animation:breathe 3s ease-in-out infinite}
  @keyframes breathe{0%,100%{opacity:.95;box-shadow:0 0 4px var(--acc)}50%{opacity:.55;box-shadow:0 0 12px var(--acc)}}
  .cellbase.paused .ring{opacity:.35;animation:none}
  .cellbase .eye{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
  @keyframes blink{0%,93.5%,100%{transform:scaleY(1)}95.5%,97.5%{transform:scaleY(.08)}}
  .cellbase.talk .ear-l{animation:wigl .5s ease}
  .cellbase.talk .ear-r{animation:wigr .5s ease}
  .ear-l,.ear-r{transform-box:fill-box;transform-origin:center}
  @keyframes wigl{0%,100%{transform:rotate(0)}45%{transform:rotate(-9deg)}}
  @keyframes wigr{0%,100%{transform:rotate(0)}45%{transform:rotate(9deg)}}

  .mat-caption{padding:12px 6px 10px;text-align:center;font-size:.78rem;color:var(--ink-soft);max-width:54ch;margin:0 auto}
  .mat-caption .acc{color:var(--acc-ink);font-weight:700}
  .mat-caption .sidec{color:var(--side-ink);font-weight:700}
  .statusline{
    margin:0 16px 16px;padding:9px 13px;border-radius:11px;background:var(--surface-2);
    font-size:.82rem;color:var(--ink-soft);display:flex;gap:8px;align-items:center;
  }
  .statusline .led{
    width:9px;height:9px;border-radius:50%;background:var(--acc);flex:0 0 auto;box-shadow:0 0 8px var(--acc);
  }

  /* ---------- context column ---------- */
  .ctx-col{display:grid;gap:20px}
  .copy-btn{
    font-family:"Nunito Sans",sans-serif;font-size:.75rem;font-weight:800;letter-spacing:.04em;
    border:none;border-radius:9px;padding:6px 12px;cursor:pointer;
    background:var(--acc-soft);color:var(--acc-ink);transition:transform .1s ease;
  }
  .copy-btn:hover{transform:translateY(-1px)}
  .copy-btn:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
  .copy-btn.copied{background:var(--dino-soft);color:var(--dino-ink)}

  .struct-body{padding:8px 16px 16px;font-size:.86rem}
  .struct-empty{color:var(--ink-soft);padding:16px 4px;font-style:italic}
  .srow{display:flex;gap:9px;align-items:baseline;padding:7px 4px;border-bottom:1px dashed var(--line)}
  .srow:last-child{border-bottom:none}
  .srow .pos{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--ink-soft);flex:0 0 64px}
  .srow .chip{
    font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    border-radius:6px;padding:2px 7px;flex:0 0 auto;
  }
  .chip.r-main{background:var(--acc-soft);color:var(--acc-ink)}
  .chip.r-side{background:var(--side-soft);color:var(--side-ink)}
  .srow .seed{color:var(--ink-soft);font-size:.8rem}
  .srow .bname{font-weight:800}
  .struct-meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:.7rem}
  .struct-meta span{background:var(--surface-2);border-radius:7px;padding:3px 9px;color:var(--ink-soft)}

  pre.prompt{
    margin:0;padding:16px 18px;background:var(--code-bg);color:var(--code-ink);
    font-family:"IBM Plex Mono",monospace;font-size:.76rem;line-height:1.6;
    border-radius:0 0 15px 15px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;
    max-height:560px;overflow-y:auto;
  }
  pre.prompt .c{color:var(--code-dim)}
  pre.prompt .h{color:var(--acc);font-weight:500}
  .flash{animation:flash .5s ease}
  @keyframes flash{0%{box-shadow:0 0 0 3px var(--acc)}100%{box-shadow:var(--shadow)}}
  @media (prefers-reduced-motion: reduce){
    *{transition:none!important;animation:none!important}
  }

  footer{
    margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
    font-size:.8rem;color:var(--ink-soft);
  }
  footer p{max-width:82ch;margin:0 auto}
  footer p + p{margin-top:10px}