*{box-sizing:border-box}
  /* tenti brand v0.1 palette, from /brand, overrides the lab tokens on this page */
  :root{
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F4F4; --line:#E4EAE9;
    --ink:#1C2B2A; --ink-soft:#5A6E6C; --label:#8B9A98;
    --acc:#12706A; --acc-ink:#0B4F4A; --acc-soft:#D8EDE9;
    --starter:#FF7A64; --starter-ink:#C74E3B; --starter-soft:#FFE9E4;
    --dino:#5FBF63; --dino-soft:#E4F5E4;
    --world:#3E9FE0; --world-soft:#E1F0FA;
    --num:#FFB43D; --num-soft:#FFF2DC;
    --side:#A97BE0; --side-soft:#F0E7FB;
    --basebox:#8A6544; --basebox-deep:#6E4E33;
    --cta:#12706A; --cta-deep:#0B4F4A; --cta-text:#FFFFFF;
    --link:#0B4F4A; --link-hover:#12706A;
    --slot-line:#E4EAE9; --lbar-track:rgba(28,43,42,.12);
    --code-bg:#1C2B2A; --code-ink:#E8F0EE;
    --shadow:0 2px 6px rgba(28,43,42,.06),0 10px 28px rgba(28,43,42,.07);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#131F1E; --surface:#1A2827; --surface-2:#223231; --line:#2F4341;
      --ink:#E8F0EE; --ink-soft:#9FB4B1; --label:#7E938F;
      --acc:#3FA79F; --acc-ink:#7ECBC4; --acc-soft:#12302D;
      --starter:#FF8B77; --starter-ink:#FFB0A2; --starter-soft:#402420;
      --dino:#6FCB73; --dino-soft:#1D3320;
      --world:#5BAFE8; --world-soft:#16293A;
      --num:#FFC262; --num-soft:#3A2E14;
      --side:#B98FE8; --side-soft:#2C2140;
      --basebox:#7A5A3C; --basebox-deep:#5E4429;
      --cta:#3FA79F; --cta-deep:#2E8B84; --cta-text:#0E1B1A;
      --link:#7ECBC4; --link-hover:#A6DED9;
      --slot-line:#233533; --lbar-track:rgba(232,240,238,.14);
      --code-bg:#0E1918; --code-ink:#DCE8E5;
      --shadow:0 2px 6px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.35);
    }
  }
  
  html,body{margin:0;padding:0}
  body{
    background:radial-gradient(var(--slot-line) 1.2px, transparent 1.4px) 0 0/34px 34px, var(--bg);
    color:var(--ink);font-family:"Nunito",system-ui,sans-serif;font-size:16px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:940px;margin:0 auto;padding:40px 22px 60px}
  header.top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .wordmark{font-family:"Fredoka",sans-serif;font-weight:600;font-size:1.5rem;margin:0}
  .wordmark .ai{color:var(--acc-ink);font-weight:500}
  .lab-tag{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-ink);background:var(--acc-soft);border-radius:6px;padding:3px 9px}
  h1{font-family:"Fredoka",sans-serif;font-weight:600;font-size:2rem;margin:10px 0 8px}
  .sub{color:var(--ink-soft);max-width:74ch;margin:0 0 24px}
  h2{font-family:"Fredoka",sans-serif;font-weight:500;font-size:1.3rem;margin:36px 0 8px}
  p{color:var(--ink-soft);max-width:65ch}
  p strong{color:var(--ink)}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px;margin:14px 0}
  .card svg{width:100%;height:auto;display:block;min-width:640px}
  .dl{font-family:"JetBrains Mono",monospace;font-size:10px;fill:var(--label)}
  .dls{font-family:"JetBrains Mono",monospace;font-size:8.5px;fill:var(--label)}
  .dlead{stroke:var(--ink-soft);stroke-width:.8;opacity:.55;fill:none}
  table{border-collapse:collapse;width:100%;font-size:.88rem}
  th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
  th{font-family:"JetBrains Mono",monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--label)}
  td.num{font-family:"JetBrains Mono",monospace;white-space:nowrap}
  tr.tot td{font-weight:700;color:var(--ink);border-top:2px solid var(--line)}
  .note{font-size:.86rem;color:var(--ink-soft);border-left:3px solid var(--acc);padding:7px 12px;background:var(--surface-2);border-radius:0 8px 8px 0;margin:14px 0;max-width:78ch}
  .credits{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-soft);text-align:center}
  .credits .heart{color:var(--starter)}
  @media (max-width:700px){.card{overflow-x:auto}}