/* Nibi website: "Sticker Storybook" (see concepts/concept-5.html and IDEAS.md).
   A picture book told with die-cut stickers. Fredoka (headings, buttons) and Nunito (text) are
   self-hosted under the SIL OFL (assets/fonts/OFL.txt); chapter titles use the system's hand
   lettering (Segoe Print on Windows). Light follows the system unless the visitor picks a theme
   (html[data-theme]). Calm mode (html.calm) and prefers-reduced-motion give a still page. */

@font-face { font-family: "Fredoka"; src: url("assets/fonts/fredoka-latin-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("assets/fonts/nunito-latin-var.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  --idle: #b9a7ff; --thinking: #8fb8ff; --working: #6fd6c2; --needs: #ffc56b; --done: #8be38b; --error: #ff8a80; --sleeping: #a99fd6;
  --pink: #ff8fc0; --lemon: #ffe27a; --lilac: #b9a7ff;
  --pet-ink: #2f2433;

  --paper: #fbf4e6; --page: #fffaf0; --card: #ffffff; --wash: #eadfc8;
  --text: #2f2433; --muted: #66576a; --line: #2f2433; --die: #ffffff;
  --night: #2c2650; --night-text: #f6efe0; --night-muted: #d9d0ee;
  --code-bg: #2a2340;
  --tint-needs: #fff1d9; --tint-needs-line: #e8b860; --ink-needs: #6e4300;
  --grain: rgba(47, 36, 51, 0.06);
  --sc-sky: #e3f0f7; --sc-cloud: #ffffff; --sc-hill: #cfe7b8; --sc-stars: 0;

  --die-shadow: 0 0 0 6px var(--die), 0 0 0 9px var(--line), 5px 9px 0 6px rgba(47, 36, 51, 0.14);
  --out: 3px solid var(--line);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hand: "Segoe Print", "Ink Free", "Bradley Hand", "Comic Sans MS", cursive;
  --display: "Fredoka", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
  --font: "Nunito", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16122a; --page: #201a38; --card: #2a2449; --wash: #0d0a1c;
    --text: #f3ecdc; --muted: #cbc1e0; --line: #0b0816; --die: #e9dfc6;
    --night: #0e0b20; --night-text: #f6efe0; --night-muted: #d9d0ee;
    --code-bg: #0f0c20;
    --tint-needs: #3a2e1a; --tint-needs-line: #8a6a2f; --ink-needs: #ffd89a;
    --grain: rgba(255, 255, 255, 0.035);
    --sc-sky: #2b2654; --sc-cloud: #4a4378; --sc-hill: #3d5a4c; --sc-stars: 1;
    --die-shadow: 0 0 0 6px var(--die), 0 0 0 9px var(--line), 5px 9px 0 6px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #16122a; --page: #201a38; --card: #2a2449; --wash: #0d0a1c;
  --text: #f3ecdc; --muted: #cbc1e0; --line: #0b0816; --die: #e9dfc6;
  --night: #0e0b20; --night-text: #f6efe0; --night-muted: #d9d0ee;
  --code-bg: #0f0c20;
  --tint-needs: #3a2e1a; --tint-needs-line: #8a6a2f; --ink-needs: #ffd89a;
  --grain: rgba(255, 255, 255, 0.035);
  --sc-sky: #2b2654; --sc-cloud: #4a4378; --sc-hill: #3d5a4c; --sc-stars: 1;
  --die-shadow: 0 0 0 6px var(--die), 0 0 0 9px var(--line), 5px 9px 0 6px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 86px; overflow-x: clip; }
body {
  margin: 0; color: var(--text); font: 500 17.5px/1.68 var(--font); overflow-x: clip;
  background: var(--paper) radial-gradient(var(--grain) 1px, transparent 1.2px) 0 0 / 5px 5px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--pink); }
a:hover { text-decoration-thickness: 3px; }
code { font-family: var(--mono); font-size: 0.86em; background: color-mix(in srgb, var(--lemon) 35%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--line) 30%, transparent); border-radius: 8px; padding: 0.05em 0.4em; overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0 0 12px; line-height: 1.15; }
h1 { font: 600 clamp(2.3rem, 1.4rem + 3.7vw, 4rem)/1.08 var(--display); letter-spacing: -0.005em; }
h2 { font: 700 clamp(1.7rem, 1.2rem + 2vw, 2.55rem)/1.22 var(--hand); }
h3 { font: 600 1.2rem/1.25 var(--display); }
p { margin: 0 0 14px; }
strong, b { font-weight: 800; }
:focus-visible { outline: 4px solid var(--pink); outline-offset: 4px; border-radius: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -70px; z-index: 60; background: var(--lemon); color: var(--pet-ink); font: 600 1rem/1 var(--display); padding: 12px 18px; border-radius: 999px; border: var(--out); transition: top 0.2s var(--pop); }
.skip:focus { top: 12px; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; position: relative; }
.wrap.narrow { max-width: 860px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ic-h { vertical-align: -4px; margin-right: 8px; }
.note { font-size: 0.98rem; color: var(--muted); }
.section-lead { font-size: 1.1rem; color: var(--muted); max-width: 44em; }


/* ---------- the sun guide: flies to the chapter in view and lights it up (main.js) ---------- */
@property --mk { syntax: "<number>"; inherits: true; initial-value: 0; }
:root { --mk-on: 0.95; --mk-read: 0.42; --glow: rgba(255, 205, 96, 0.5); }
html.is-dark, .chapter.night { --mk-on: 0.4; --mk-read: 0.2; --glow: rgba(255, 214, 120, 0.22); }
.chapter.night { --glow: rgba(214, 220, 255, 0.2); }
.guide { display: none; }
.js .guide { display: block; position: absolute; left: 0; top: 0; z-index: 20; width: var(--g, 68px); height: var(--g, 68px); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; }
@media (min-width: 1500px) { .js .guide { --g: 80px; } }
@media (max-width: 1100px) { .js .guide { --g: 58px; } }
@media (max-width: 600px) { .js .guide { --g: 48px; } }
.guide-in, .g-face, .g-rays, .g-glow { position: absolute; inset: 0; }
.guide-in { transform-origin: 50% 85%; transition: transform 0.35s var(--pop); }
.guide:hover .guide-in { transform: rotate(-10deg) scale(1.06); }
.guide.land .guide-in { animation: g-land 0.65s var(--pop); }
@keyframes g-land { 0% { transform: scale(1.14, 0.84); } 35% { transform: translateY(-16%) scale(0.94, 1.08); } 70% { transform: scale(1.04, 0.97); } 100% { transform: none; } }
.g-face { transition: transform 0.75s var(--pop), opacity 0.45s; }
.g-face svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.g-rays { animation: spin 24s linear infinite; }
.g-rays svg { fill: none; stroke: #f0a030; stroke-width: 5; stroke-linecap: round; }
.g-shadow { fill: rgba(47, 36, 51, 0.2); }
.sun-die, .moon-die { fill: var(--die); stroke: var(--pet-ink); stroke-width: 2.5; }
.sun-disc { fill: var(--lemon); stroke: var(--pet-ink); stroke-width: 3; }
.sun-face { fill: none; stroke: var(--pet-ink); stroke-width: 3; stroke-linecap: round; }
.sun-cheek { fill: var(--pink); opacity: 0.7; }
.eye-wink { opacity: 0; }
.guide.wink .eye-l { opacity: 0; }
.guide.wink .eye-wink { opacity: 1; }
.moon-disc { fill: #f6efd9; stroke: var(--pet-ink); stroke-width: 3; }
.moon-crater { fill: #ddd2b2; stroke: rgba(47, 36, 51, 0.35); stroke-width: 1.5; }
.g-glow { inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 244, 194, 0.55), rgba(255, 244, 194, 0)); animation: g-pulse 4s ease-in-out infinite; }
@keyframes g-pulse { 50% { opacity: 0.45; } }
.g-moon { opacity: 0; transform: rotate(-200deg) scale(0.3) translateY(40%); }
.guide.is-moon .g-sun { opacity: 0; transform: rotate(200deg) scale(0.3) translateY(40%); }
.guide.is-moon .g-moon { opacity: 1; transform: none; }
.g-star { position: absolute; z-index: 19; width: 16px; height: 16px; pointer-events: none; fill: var(--lemon); stroke: var(--pet-ink); stroke-width: 1.5; stroke-linejoin: round; opacity: 0; animation: g-star 1.6s ease-out forwards; }
@keyframes g-star { 0% { opacity: 0; transform: scale(0) rotate(0); } 25% { opacity: 1; transform: scale(1.15) rotate(40deg); } 70% { opacity: 1; transform: scale(0.9) rotate(70deg); } 100% { opacity: 0; transform: translateY(-14px) scale(0.5) rotate(110deg); } }
/* what the guide lights up: a warm glow on the heading, a highlighter sweep under one phrase */
.js .guide-h { position: relative; isolation: isolate; }
.js .guide-h::before { content: ""; position: absolute; z-index: -1; inset: -26px -36px -26px -56px; pointer-events: none; background: radial-gradient(70% 75% at 0% 45%, var(--glow), transparent 72%); opacity: 0; transition: opacity 0.9s ease-out; }
.js .guide-h.g-from-r::before { inset: -26px -56px -26px -36px; background: radial-gradient(70% 75% at 100% 45%, var(--glow), transparent 72%); }
.g-lit .guide-h::before { opacity: 1; }
.js .mark { --mk: 0; background: linear-gradient(rgb(255 226 122 / var(--mk)), rgb(255 226 122 / var(--mk))) no-repeat 0 90% / 0% 0.42em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.15s, --mk 0.7s; }
.g-lit .mark { --mk: var(--mk-on); background-size: 100% 0.42em; }
.g-read .mark { --mk: var(--mk-read); background-size: 100% 0.42em; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { html { scroll-padding-top: 80px; } }

/* ---------- the "stays on your PC" badge ---------- */
.badge { flex: none; width: 200px; height: 200px; border-radius: 50%; }
.badge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.badge-die { fill: var(--die); stroke: var(--pet-ink); stroke-width: 3; }
.badge-disc { fill: var(--lemon); stroke: var(--pet-ink); stroke-width: 3; }
.badge-ring { transform-box: view-box; transform-origin: 100px 100px; animation: spin 20s linear infinite; }
.badge:hover .badge-ring { animation-play-state: paused; }
.badge-text { font: 600 17px var(--display); letter-spacing: 0.06em; fill: var(--pet-ink); }
.badge-core { fill: var(--working); stroke: var(--pet-ink); stroke-width: 3; }
.badge-lock { fill: none; stroke: var(--pet-ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.badge-lg { width: 210px; height: 210px; filter: drop-shadow(5px 8px 0 rgba(0, 0, 0, 0.3)); }
.badge-sm { width: 118px; height: 118px; filter: drop-shadow(3px 5px 0 rgba(47, 36, 51, 0.18)); }
.night-art { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.night-art .napping { flex: 1 1 240px; max-width: 320px; }
.dl-row { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 10px 0 8px; }
.dl-row .btn { margin: 0; }
@media (max-width: 600px) { .badge-lg { width: 168px; height: 168px; } .badge-sm { width: 104px; height: 104px; } }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2.5px solid var(--wash); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .top { background: var(--paper); } }
.top-row { display: flex; align-items: center; gap: 12px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 700 1.55rem/1 var(--hand); color: var(--text); text-decoration: none; }
.brand-pet { transition: transform 0.5s var(--pop); }
.brand:hover .brand-pet { transform: rotate(-14deg) scale(1.12); }
.brand-sm { font-size: 1.15rem; }
.top nav { margin-left: auto; }
.nav { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 6px 11px; border-radius: 999px; color: var(--muted); text-decoration: none; font: 600 0.95rem/1.3 var(--display); transition: background-color 0.2s, color 0.2s, transform 0.3s var(--pop); }
.nav a:hover { background: var(--card); color: var(--text); transform: translateY(-2px) rotate(-3deg); }
.top-tools { display: flex; align-items: center; gap: 8px; }
/* Arcade version switch: off here; the arcade page shows it on. */
.ver-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px 4px 6px; border-radius: 999px; border: 2.5px solid var(--line); background: var(--card); color: var(--text); font-weight: 700; font-size: 0.88rem; text-decoration: none; white-space: nowrap; }
.ver-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--wash); border: 2.5px solid var(--line); flex: none; transition: background .2s ease; }
.ver-knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.ver-switch:hover .ver-track, .ver-switch:focus-visible .ver-track { background: var(--lemon); }
.ver-switch:hover .ver-knob, .ver-switch:focus-visible .ver-knob { transform: translateX(6px); }
.ver-switch:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
@media (max-width: 640px) { .ver-lbl { display: none; } .ver-switch { padding: 4px; } }
@media (prefers-reduced-motion: reduce) { .ver-track, .ver-knob { transition: none; } }
.ver-link { display: inline-flex; align-items: center; min-height: 38px; padding: 4px 12px; border-radius: 999px; border: 2.5px dashed var(--line); background: var(--card); color: var(--text); font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.ver-link:hover { border-style: solid; }
.icon-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%; border: 2.5px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; padding: 0; transition: transform 0.35s var(--pop); }
.icon-btn:hover { transform: rotate(-14deg) scale(1.08); }
.icon-btn .ic { width: 20px; height: 20px; }
#theme-btn .ic-sun, #motion-btn .ic-play { display: none; }
html.is-dark #theme-btn .ic-sun { display: block; }
html.is-dark #theme-btn .ic-moon { display: none; }
html.calm #motion-btn .ic-pause { display: none; }
html.calm #motion-btn .ic-play { display: block; }
@media (max-width: 1100px) { .top nav { display: none; } .top-tools { margin-left: auto; } }


/* ---------- buttons: candy stickers ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 3px solid var(--line); background: var(--card); color: var(--text); font: 600 1.05rem/1.1 var(--display); text-decoration: none; cursor: pointer; box-shadow: 4px 5px 0 var(--line); transition: transform 0.25s var(--pop), box-shadow 0.2s; }
.btn:hover { transform: translate(-2px, -3px) rotate(-2deg); box-shadow: 6px 8px 0 var(--line); }
.btn:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--line); }
.btn[disabled] { opacity: 0.55; cursor: default; transform: none; }
.btn-pink { background: var(--pink); color: var(--pet-ink); }
.btn-lemon { background: var(--lemon); color: var(--pet-ink); }
.btn-white { background: var(--card); }
.btn-sm { min-height: 42px; padding: 8px 16px; font-size: 0.97rem; box-shadow: 3px 4px 0 var(--line); }
.btn-lg { min-height: 56px; padding: 14px 28px; font-size: 1.1rem; }
.btn-xl { min-height: 64px; padding: 16px 36px; font-size: 1.22rem; }
.btn-xl .ic { width: 24px; height: 24px; }

/* ---------- hero ---------- */
.hero { padding: 34px 0 30px; position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 46px; align-items: center; }
.byline { font: 1.08rem/1.4 var(--hand); color: var(--muted); margin-bottom: 14px; }
.hl { background: var(--lemon); color: var(--pet-ink); border: var(--out); border-radius: 16px; padding: 0 0.16em; display: inline-block; transform: rotate(-2deg); box-shadow: 3px 4px 0 var(--line); }
.subtitle { font: 600 1.3rem/1.35 var(--display); margin: 18px 0 12px; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 34em; }
.drop::first-letter { float: left; font: 600 3.3em/0.85 var(--display); margin: 6px 10px 0 0; color: var(--pet-ink); background: var(--pink); border: var(--out); border-radius: 14px; padding: 4px 10px 8px; }
.cta { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0 14px; }
.meta { font-size: 0.94rem; color: var(--muted); }

.stage { margin: 0; }
.picture { position: relative; border-radius: 34px; background: var(--page); border: var(--out); box-shadow: var(--die-shadow); transform: rotate(1.2deg); margin: 10px; }
.scene { display: block; width: 100%; height: auto; overflow: visible; }
.sc-sky { fill: var(--sc-sky); transition: fill 0.5s; }
.sc-stars { fill: var(--lemon); opacity: var(--sc-stars); }
.sc-cloud { fill: var(--sc-cloud); stroke: var(--pet-ink); stroke-width: 2.5; }
.sc-hill { fill: var(--sc-hill); stroke: var(--pet-ink); stroke-width: 3; }
.sc-grass { fill: none; stroke: var(--pet-ink); stroke-width: 2.4; stroke-linecap: round; }
.cloud { animation: cloud 34s linear infinite; }
@keyframes cloud { from { transform: translateX(-80px); } to { transform: translateX(560px); } }
.hero-pet { cursor: pointer; }
.say { position: absolute; left: 18px; top: 16px; z-index: 2; font: 600 1rem/1.25 var(--display); color: var(--pet-ink); background: #fff; border: 3px solid var(--pet-ink); border-radius: 18px 18px 18px 4px; padding: 8px 13px; box-shadow: 3px 3px 0 var(--pet-ink); max-width: 58%; transform: rotate(-2deg); transform-origin: 10% 100%; }
.say.bump { animation: bubble 0.45s var(--pop); }
@keyframes bubble { from { transform: rotate(-2deg) scale(0.5); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
.heart { position: absolute; width: 30px; height: 30px; pointer-events: none; z-index: 3; animation: heart-up 1.2s ease-out forwards; }
.heart path { fill: var(--pink); stroke: var(--pet-ink); stroke-width: 2; }
@keyframes heart-up { from { transform: translate(0, 0) scale(0.4); opacity: 1; } to { transform: translate(var(--dx, 0), -140px) scale(1.15) rotate(var(--r, 0deg)); opacity: 0; } }

/* the Flock in the hero */
.fl { cursor: pointer; transform-box: fill-box; transform-origin: center; animation: fly 7s ease-in-out infinite; transition: opacity 0.4s, scale 0.5s var(--pop); }
.fl-2 { animation-duration: 9s; animation-delay: -3s; } .fl-3 { animation-duration: 8s; animation-delay: -5s; }
.fl .spin { transform-box: fill-box; transform-origin: center; transition: transform 0.6s var(--pop); }
.fl.poked .spin { transform: rotate(360deg) scale(1.3); }
.fl .ring { fill: none; stroke: var(--working); stroke-width: 4; }
.fl.dashed .ring { stroke-dasharray: 6 6; }
@keyframes fly { 25% { transform: translate(22px, -14px); } 50% { transform: translate(-8px, -30px); } 75% { transform: translate(-22px, -8px); } }
[data-mood="idle"] .fl, [data-mood="sleeping"] .fl,
[data-mood="thinking"] .fl-2, [data-mood="thinking"] .fl-3,
[data-mood="done"] .fl-3, [data-mood="error"] .fl-2, [data-mood="error"] .fl-3 { opacity: 0; scale: 0; pointer-events: none; }
[data-mood="thinking"] .fl-1 .ring { stroke: var(--thinking); }
[data-mood="needs"] .fl-1 .ring { stroke: var(--needs); stroke-width: 6; animation: ring-pulse 0.8s ease-in-out infinite; }
[data-mood="done"] .fl .ring { stroke: var(--done); }
[data-mood="error"] .fl-1 .ring { stroke: var(--error); }
@keyframes ring-pulse { 50% { stroke-width: 9; } }

.stage-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 26px 0 10px; }
.stage-cap strong { font: 600 1.05rem/1 var(--display); }
.mood-dot { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--line); background: var(--mc, var(--working)); }
.moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mood-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 2.5px solid var(--line); background: var(--card); color: var(--text); font: 600 0.88rem/1 var(--display); cursor: pointer; transition: transform 0.25s var(--pop); }
.mood-btn:hover { transform: translateY(-3px) rotate(-4deg); }
.mood-btn[aria-pressed="true"] { background: var(--mc); color: var(--pet-ink); box-shadow: 2px 3px 0 var(--line); }
.sw { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--pet-ink); background: var(--mc); }
.play-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.hint { margin: 12px 0 0; text-align: center; font: 0.98rem/1.4 var(--hand); color: var(--muted); }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 30px; } }

/* mood colour tokens */
[data-mood="idle"] { --mc: var(--idle); } [data-mood="thinking"] { --mc: var(--thinking); } [data-mood="working"] { --mc: var(--working); }
[data-mood="needs"] { --mc: var(--needs); } [data-mood="done"] { --mc: var(--done); } [data-mood="error"] { --mc: var(--error); } [data-mood="sleeping"] { --mc: var(--sleeping); }

/* ---------- Nibi drawing (hero and minis) ---------- */
.pet { overflow: visible; }
.pet .m-body { transform-box: fill-box; transform-origin: 50% 100%; }
.pet .m-antenna { transform-box: fill-box; transform-origin: 0% 100%; animation: antenna 1.9s ease-in-out infinite; }
.pet .pl { fill: none; stroke: var(--pet-ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.pet .bulb { fill: var(--lemon); stroke: var(--pet-ink); stroke-width: 2.6; }
.pet .die { fill: var(--die); }
.pet .blob { fill: var(--mc, var(--idle)); stroke: var(--pet-ink); stroke-width: 3; transition: fill 0.5s; }
.pet .shine { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: 0.7; }
.pet .ew { fill: #fff; stroke: var(--pet-ink); stroke-width: 2.4; }
.pet .pupil, .pet .ink { fill: var(--pet-ink); }
.pet .lid { transform-box: fill-box; transform-origin: center; transition: transform 0.08s; }
.pet.blink .lid { transform: scaleY(0.1); }
.pet .cheek { fill: var(--pink); opacity: 0.6; }
.pet .mo { fill: none; stroke: var(--pet-ink); stroke-width: 3; stroke-linecap: round; display: none; }
.pet .mo-o { fill: var(--pet-ink); stroke: none; }
.pet .mo-smile { display: inline; }
.pet .f-big, .pet .f-happy, .pet .f-closed, .pet .f-sad, .pet .fx { display: none; }
.pet .fx-dots { fill: #5f8ff0; }
.pet .fx-bang path { stroke: #e0901a; stroke-width: 5; stroke-linecap: round; } .pet .fx-bang circle { fill: #e0901a; }
.pet .fx-spark path { fill: var(--lemon); stroke: var(--pet-ink); stroke-width: 1.4; }
.pet .fx-z text { font: 700 17px var(--hand); fill: var(--pet-ink); }
.pet .fx-drop { fill: var(--thinking); stroke: var(--pet-ink); stroke-width: 1.4; }
.pet .fx-busy { fill: none; stroke: var(--pet-ink); stroke-width: 3; stroke-linecap: round; }
.pet .fx-phones .band { fill: none; stroke: var(--pet-ink); stroke-width: 4.5; }
.pet .fx-phones rect { fill: var(--pink); stroke: var(--pet-ink); stroke-width: 2.6; }
.pet .fx-hat path { fill: var(--pink); stroke: var(--pet-ink); stroke-width: 2.6; stroke-linejoin: round; }
.pet .fx-hat circle { fill: #fff; stroke: var(--pet-ink); stroke-width: 2.2; }

[data-mood="needs"] .f-open, [data-mood="done"] .f-open, [data-mood="error"] .f-open, [data-mood="sleeping"] .f-open { display: none; }
[data-mood="needs"] .f-big, [data-mood="done"] .f-happy, [data-mood="error"] .f-sad, [data-mood="sleeping"] .f-closed { display: inline; }
[data-mood="needs"] .mo-smile, [data-mood="error"] .mo-smile, [data-mood="sleeping"] .mo-smile, [data-mood="thinking"] .mo-smile { display: none; }
[data-mood="needs"] .mo-o, [data-mood="error"] .mo-frown, [data-mood="sleeping"] .mo-flat, [data-mood="thinking"] .mo-flat { display: inline; }
[data-mood="thinking"] .fx-dots, [data-mood="needs"] .fx-bang, [data-mood="done"] .fx-spark, [data-mood="sleeping"] .fx-z,
[data-mood="error"] .fx-drop, [data-mood="working"] .fx-busy, [data-fx="phones"] .fx-phones, [data-fx="hat"] .fx-hat { display: inline; }
[data-fx="hat"] .m-antenna { display: none; }

[data-mood="idle"] .m-body { animation: breathe 3s ease-in-out infinite; }
[data-mood="sleeping"] .m-body { animation: breathe 4.6s ease-in-out infinite; }
[data-mood="thinking"] .m-body { animation: sway 2.6s ease-in-out infinite; }
[data-mood="working"] .m-body { animation: bounce 0.7s ease-in-out infinite; }
[data-mood="needs"] .m-body { animation: wiggle 0.6s ease-in-out infinite; }
[data-mood="done"] .m-body { animation: hop 1.3s ease-in-out infinite; }
[data-mood="error"] .m-body { animation: shiver 0.45s linear infinite; }
[data-fx="phones"] .m-body { animation: sway 1.1s ease-in-out infinite; }
.pet.squish .m-body { animation: squish 0.7s var(--pop); }
.pet .fx-dots circle { animation: dot 1.2s ease-in-out infinite; }
.pet .fx-dots circle:nth-child(2) { animation-delay: 0.2s; } .pet .fx-dots circle:nth-child(3) { animation-delay: 0.4s; }
.pet .fx-z text { animation: floatz 2.4s ease-in-out infinite; } .pet .fx-z text + text { animation-delay: -1.2s; }
.pet .fx-spark path { transform-box: fill-box; transform-origin: center; animation: twinkle 1.5s ease-in-out infinite; }
.pet .fx-busy { animation: busy 0.35s steps(2) infinite; }
@keyframes antenna { 50% { rotate: 10deg; } }
@keyframes breathe { 50% { transform: scale(1.04, 0.96); } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(0) scale(1.05, 0.95); } 50% { transform: translateY(-8%) scale(0.96, 1.04); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg) translateY(-3%); } 75% { transform: rotate(7deg) translateY(-3%); } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-14%) scale(0.94, 1.06); } 80% { transform: translateY(0) scale(1.08, 0.92); } }
@keyframes shiver { 25% { transform: translateX(-2%); } 75% { transform: translateX(2%); } }
@keyframes squish { 25% { transform: scale(1.22, 0.78); } 50% { transform: scale(0.88, 1.15) translateY(-8%); } 75% { transform: scale(1.05, 0.96); } }
@keyframes dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes floatz { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(8px, -16px); opacity: 0; } }
@keyframes twinkle { 0%, 100% { transform: scale(0.6) rotate(0); opacity: 0.5; } 50% { transform: scale(1.1) rotate(25deg); opacity: 1; } }
@keyframes busy { 50% { transform: translateX(-3px); } }

.mini { display: inline-block; width: 64px; height: 64px; flex: none; }
.mini svg { width: 100%; height: 100%; display: block; }
.mini-lg { width: 120px; height: 120px; }
.mini-xl { width: 150px; height: 150px; }

/* ---------- chapters ---------- */
.band { padding: 34px 0; position: relative; z-index: 1; }
.chapter { padding: 46px 44px 50px; background: var(--page); border: 2.5px solid var(--line); border-radius: 8px 16px 10px 20px; box-shadow: 7px 9px 0 var(--wash); position: relative; transform-origin: left center; transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s; }
.js .chapter.closed { transform: perspective(1400px) rotateY(-20deg); opacity: 0; }
.chapter::after { content: ""; position: absolute; right: -2.5px; bottom: -2.5px; width: 42px; height: 42px; background: linear-gradient(135deg, var(--page) 50%, var(--wash) 50%); border-left: 2.5px solid var(--line); border-top: 2.5px solid var(--line); border-radius: 0 0 16px 0; }
.chap-no { display: inline-block; font: 600 0.9rem/1.2 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pet-ink); background: var(--lilac); border: 2.5px solid var(--line); border-radius: 999px; padding: 6px 13px; transform: rotate(-2deg); box-shadow: 2px 3px 0 var(--line); margin-bottom: 16px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split-rev { grid-template-columns: 1.1fr 0.9fr; margin-top: 40px; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 34px 0 10px; }
.h3-lg { font-size: 1.5rem; }

/* stickers */
.sticker { background: var(--card); color: var(--text); border: var(--out); border-radius: 24px; padding: 20px; box-shadow: var(--die-shadow); margin: 9px; transition: transform 0.4s var(--pop), box-shadow 0.3s; }
.sticker.guess { border-style: dashed; }
.stickers { list-style: none; padding: 0; margin: 10px 0 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stickers .sticker { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.stickers .sticker:nth-child(3n+1) { rotate: -1.6deg; } .stickers .sticker:nth-child(3n+2) { rotate: 1.2deg; } .stickers .sticker:nth-child(3n) { rotate: -0.6deg; }
.stickers .sticker:hover { rotate: 0deg; transform: translateY(-6px) scale(1.03); }
.stickers strong { font: 600 1.15rem/1.2 var(--display); }
.stickers span:not(.src) { color: var(--muted); font-size: 0.96rem; }
.sheet-title { font: 700 1.3rem/1.2 var(--hand); margin-top: 26px; }
.src { width: 44px; height: 44px; display: grid; place-items: center; border: var(--out); border-radius: 14px; color: var(--pet-ink); margin-bottom: 6px; transition: transform 0.4s var(--pop); }
.guess .src { border-style: dashed; }
.sticker:hover .src { transform: rotate(-10deg) scale(1.1); }
.src-claude { background: #f6c4a8; } .src-codex { background: #d2d8e2; } .src-antigravity { background: #c3d5ff; } .src-vscode { background: #b4dcfb; } .src-chatgpt { background: #bfeedd; }
.src-github { background: #dcd3f7; } .src-vercel { background: #e4e1ee; } .src-devpulse { background: #ffc9c4; } .src-calendar { background: #ffe1a8; } .src-music { background: #ffc9dc; }
.tag-inferred { align-self: flex-start; font: 600 0.75rem/1 var(--display); font-style: normal; border: 2px dashed var(--muted); color: var(--muted); border-radius: 999px; padding: 4px 9px; margin-top: 6px; }
.honesty { margin: 6px 0 34px; padding: 14px 18px; border-radius: 18px; border: 2.5px dashed color-mix(in srgb, var(--line) 50%, transparent); color: var(--muted); }
.honest-solid, .honest-dashed { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin: 0 4px 0 2px; background: var(--working); border: 2px solid var(--pet-ink); }
.honest-dashed { background: transparent; border: 2.5px dashed var(--working); }

/* screenshots as stuck-on photos */
.shot { margin: 0; }
.shot img { border-radius: 20px; border: 3px solid var(--line); box-shadow: 0 0 0 7px var(--die), 0 0 0 10px var(--line), 6px 12px 0 7px rgba(47, 36, 51, 0.14); background: var(--card); transition: transform 0.5s var(--pop); }
.shot figcaption { margin-top: 22px; font: 1rem/1.4 var(--hand); color: var(--muted); text-align: center; }
.tilt-l img { transform: rotate(-1.2deg); } .tilt-r img { transform: rotate(1.2deg); }
.shot:hover img { transform: rotate(0) scale(1.01); }
#watches .shot, .shot-narrow { max-width: 760px; margin: 10px auto 0; }
.shot-narrow { margin-top: 44px; }

/* how it works */
.how { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: none; }
.how .sticker { position: relative; padding-top: 30px; }
.how .sticker:nth-child(2) { rotate: 1deg; } .how .sticker:nth-child(1), .how .sticker:nth-child(3) { rotate: -1deg; }
.how .sticker:hover { rotate: 0deg; transform: translateY(-6px); }
.how p { color: var(--muted); margin: 0; }
.how-n { position: absolute; top: -22px; left: 18px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 700 1.3rem/1 var(--display); color: var(--pet-ink); background: var(--lemon); border: var(--out); box-shadow: 0 0 0 4px var(--die), 2px 3px 0 4px var(--line); }
.how .sticker:nth-child(2) .how-n { background: var(--pink); } .how .sticker:nth-child(3) .how-n { background: var(--working); }

/* moods sheet */
.mood-sheet { list-style: none; padding: 0; margin: 18px 0 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.mood-sheet li { flex: 0 1 calc(25% - 17px); display: flex; justify-content: center; }
.mood-card { width: calc(100% - 18px); display: grid; justify-items: center; text-align: center; gap: 4px; cursor: pointer; font: inherit; padding: 16px 12px 18px; }
.mood-card strong { font: 600 1.15rem/1.2 var(--display); }
.mood-card span:not(.mini) { color: var(--muted); font-size: 0.93rem; }
.mood-card .mini { width: 84px; height: 84px; }
.mood-sheet li:nth-child(odd) .mood-card { rotate: -1.5deg; } .mood-sheet li:nth-child(even) .mood-card { rotate: 1.5deg; }
.mood-card:hover, .mood-card:focus-visible, .mood-card.awake { rotate: 0deg; transform: translateY(-6px) scale(1.04); }
.mood-card .m-body, .mood-card .m-antenna, .mood-card .fx * { animation-play-state: paused; }
.mood-card:hover .m-body, .mood-card:focus-visible .m-body, .mood-card.awake .m-body,
.mood-card:hover .m-antenna, .mood-card.awake .m-antenna, .mood-card:hover .fx *, .mood-card.awake .fx * { animation-play-state: running; }

/* bell */
.steps { list-style: none; counter-reset: s; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }
.steps li { counter-increment: s; position: relative; padding-left: 50px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; border: var(--out); background: var(--needs); color: var(--pet-ink); display: grid; place-items: center; font: 700 1rem/1 var(--display); }
.steps li + li::after { content: ""; position: absolute; left: 17px; top: -14px; height: 14px; border-left: 3px dotted var(--muted); }
.demo { padding: 16px; rotate: 1deg; }
.demo-title { font: 700 1.15rem/1 var(--hand); margin: 2px 4px 12px; }
.desk { position: relative; aspect-ratio: 16 / 11; border-radius: 16px; border: 2.5px solid var(--line); overflow: hidden; background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--pink) 35%, transparent), transparent 45%), radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--working) 35%, transparent), transparent 50%), var(--sc-sky); }
.footsteps { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.footsteps path { fill: none; stroke: var(--text); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 14; opacity: 0; transition: opacity 0.3s; }
.desk.walking .footsteps path { opacity: 0.7; animation: march 0.9s linear infinite; }
@keyframes march { to { stroke-dashoffset: -30; } }
.win { position: absolute; background: #fff; color: var(--pet-ink); border: 2.5px solid var(--pet-ink); border-radius: 10px; overflow: hidden; box-shadow: 3px 4px 0 rgba(47, 36, 51, 0.25); transition: transform 0.5s var(--pop), box-shadow 0.3s; z-index: 2; }
.win-a { left: 5%; top: 7%; width: 50%; } .win-b { right: 5%; top: 16%; width: 42%; } .win-c { left: 22%; top: 46%; width: 46%; }
.win-bar { display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: #f3eee2; border-bottom: 2px solid var(--pet-ink); font: 700 0.72rem/1 var(--font); }
.win-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d8cfbf; }
.win-bar span { margin-left: 4px; }
.win-body { display: grid; gap: 5px; padding: 8px 9px 10px; min-height: 50px; }
.ln { height: 6px; border-radius: 3px; background: #ece5d6; } .ln.short { width: 60%; }
.ask { display: none; font: 700 0.72rem/1.25 var(--font); color: #6e4300; background: #fff1d9; border-radius: 6px; padding: 4px 6px; }
.win.waiting { border-color: #e0901a; animation: knock 0.9s ease-in-out infinite; }
.win.waiting .ask { display: block; }
.win.front { z-index: 4; transform: scale(1.06); box-shadow: 0 0 0 4px var(--needs), 0 14px 30px rgba(47, 36, 51, 0.3); animation: none; }
@keyframes knock { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px) rotate(-0.6deg); } 40% { transform: translateX(3px) rotate(0.6deg); } 60% { transform: translateX(-2px); } }
.desk-nibi { position: absolute; left: 0; top: 0; z-index: 5; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: default; transition: transform 1.1s cubic-bezier(0.45, 0, 0.3, 1); }
.desk-nibi:not([disabled]) { cursor: pointer; }
.desk-nibi .mini { width: 64px; height: 64px; }
.desk-nibi.hopping .mini { animation: hop-step 0.36s ease-in-out 3; }
@keyframes hop-step { 50% { transform: translateY(-14px); } }
.desk-bell { position: absolute; right: -14px; top: -8px; width: 28px; height: 28px; fill: var(--lemon); stroke: var(--pet-ink); stroke-width: 2; opacity: 0; transform: scale(0); transition: transform 0.4s var(--pop), opacity 0.2s; }
.desk-nibi.ringing .desk-bell { opacity: 1; transform: scale(1); animation: ring 0.45s ease-in-out infinite; }
@keyframes ring { 0%, 100% { rotate: -18deg; } 50% { rotate: 18deg; } }
.ding { position: absolute; z-index: 6; left: 0; top: 0; font: 700 1rem/1 var(--display); color: var(--pet-ink); background: var(--pink); border: 2.5px solid var(--pet-ink); border-radius: 10px; padding: 5px 8px; opacity: 0; transform: scale(0.3) rotate(8deg); transition: opacity 0.2s, transform 0.4s var(--pop); pointer-events: none; }
.ding.on { opacity: 1; transform: scale(1) rotate(8deg); }
.demo-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.demo-status { margin: 0; flex: 1 1 220px; font-size: 0.95rem; color: var(--muted); }

/* rules */
.rule { position: relative; padding-top: 30px; }
.rule:nth-child(1) { rotate: -1.2deg; } .rule:nth-child(2) { rotate: 0.8deg; } .rule:nth-child(3) { rotate: -0.6deg; }
.rule:hover { rotate: 0deg; transform: translateY(-6px); }
.rule-ic { position: absolute; right: 18px; top: -22px; width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; color: var(--pet-ink); border: var(--out); box-shadow: 0 0 0 4px var(--die), 2px 3px 0 4px var(--line); transition: transform 0.5s var(--pop); }
.rule:hover .rule-ic { transform: rotate(14deg) scale(1.1); }
.rule-ic .ic { width: 26px; height: 26px; stroke-width: 2.6; }
.pill { display: inline-block; font: 600 0.85rem/1 var(--display); padding: 6px 12px; border-radius: 999px; border: 2px solid var(--pet-ink); color: var(--pet-ink); margin-bottom: 12px; }
.rule-a .pill, .rule-a .rule-ic { background: var(--done); } .rule-b .pill, .rule-b .rule-ic { background: var(--needs); } .rule-c .pill, .rule-c .rule-ic { background: var(--error); }
.rule p { color: var(--muted); margin: 0; }
.checks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 36px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--done); border: 2.5px solid var(--pet-ink); }
.checks li::after { content: ""; position: absolute; left: 9px; top: 7px; width: 6px; height: 10px; border: solid var(--pet-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.checks-no li::before { background: var(--error); }
.checks-no li::after { left: 7px; top: 13px; width: 10px; height: 0; border-width: 0 0 2.5px 0; transform: none; }

/* a day */
.day { margin-top: 10px; }
.day-stage { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 4px 6px 18px; }
.day-say { flex: 1 1 240px; }
.day-say.swap { animation: bubble2 0.45s var(--pop); }
@keyframes bubble2 { from { transform: scale(0.85); opacity: 0.3; } to { transform: none; opacity: 1; } }
.day-time { font: 600 2.3rem/1 var(--display); margin: 0 0 6px; }
.day-text { margin: 0; font-size: 1.1rem; min-height: 3.4em; }
.day-play .ic-pause { display: none; }
.day-play[aria-pressed="true"] .ic-play { display: none; }
.day-play[aria-pressed="true"] .ic-pause { display: block; }
.day-strip { list-style: none; margin: 0; padding: 14px 8px 18px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(80px, 1fr); gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.day-strip li { scroll-snap-align: start; }
.moment { width: 100%; display: grid; justify-items: center; gap: 2px; padding: 10px 6px 12px; border-radius: 18px; border: 2.5px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; font: inherit; box-shadow: 0 0 0 4px var(--die), 0 0 0 6.5px var(--line); margin: 5px; min-width: 0; transition: transform 0.35s var(--pop); }
.moment:hover { transform: translateY(-4px) rotate(-2deg); }
.moment[aria-pressed="true"] { background: var(--mc); color: var(--pet-ink); transform: translateY(-5px); }
.moment .mini { width: 52px; height: 52px; }
.moment .m-body, .moment .m-antenna, .moment .fx * { animation-play-state: paused; }
.moment[aria-pressed="true"] .m-body, .moment[aria-pressed="true"] .m-antenna, .moment[aria-pressed="true"] .fx * { animation-play-state: running; }
.m-time { font: 600 1rem/1 var(--display); margin-top: 4px; }
.m-label { font-size: 0.84rem; font-weight: 800; opacity: 0.85; }

/* night page */
.chapter.night { background: var(--night); color: var(--night-text); --muted: var(--night-muted); --text: var(--night-text); }
.chapter.night::after { background: linear-gradient(135deg, var(--night) 50%, var(--wash) 50%); }
.chapter.night .chap-no { background: var(--lemon); }
.chapter.night .sticker { --card: #352e5e; --text: #f6efe0; --muted: #dcd3f0; --die: #e9dfc6; }
.chapter.night code { color: var(--night-text); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); }
.split-night { grid-template-columns: 1.1fr 0.9fr; margin-bottom: 26px; }
.napping { width: 100%; max-width: 380px; justify-self: center; overflow: visible; }
.napping .star { fill: var(--lemon); transform-box: fill-box; transform-origin: center; animation: tw 2.4s ease-in-out infinite; }
.napping .star:nth-child(2n) { animation-delay: -1s; } .napping .star:nth-child(3n) { animation-delay: -1.7s; }
.napping .nap-moon-die { fill: var(--die); } .napping .nap-moon { fill: #f3efe0; stroke: var(--pet-ink); stroke-width: 2.5; }
.napping .bed { fill: #4a4370; stroke: var(--night-text); stroke-width: 2.5; }
.napping .die { fill: var(--die); }
.napping .sl-body { fill: var(--sleeping); stroke: var(--pet-ink); stroke-width: 3; }
.napping .pl { fill: none; stroke: var(--pet-ink); stroke-width: 3.2; stroke-linecap: round; }
.napping .cheek { fill: var(--pink); opacity: 0.6; }
.napping .cap { fill: var(--pink); stroke: var(--pet-ink); stroke-width: 3; stroke-linejoin: round; }
.napping .pom { fill: #fff; stroke: var(--pet-ink); stroke-width: 2.5; }
.napping .sleeper { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 4.4s ease-in-out infinite; }
.zz { font: 700 26px var(--hand); fill: var(--lemon); animation: zz 3s ease-in-out infinite; }
.zz.z2 { animation-delay: -1s; font-size: 20px; } .zz.z3 { animation-delay: -2s; font-size: 16px; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 10px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(18px, -28px); } }
@keyframes tw { 50% { opacity: 0.3; transform: scale(0.6); } }
.privacy-table .sticker:first-child { rotate: -0.8deg; } .privacy-table .sticker:last-child { rotate: 0.6deg; }
.keep { display: grid; gap: 10px; margin: 6px 0 18px; }
.keep-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: 0.92rem; font-weight: 800; }
.keep-bar { height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 2.5px solid var(--pet-ink); overflow: hidden; }
.keep-fill { display: block; height: 100%; border-radius: 999px; transform-origin: left; transition: transform 1.2s var(--pop) 0.4s; }
.keep-14 { width: 15.5%; background: var(--working); } .keep-90 { width: 100%; background: var(--idle); }
.js .chapter.closed .keep-fill { transform: scaleX(0); }
.kv { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.kv li { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; font-size: 0.97rem; }
.kv li > span:first-child { font-weight: 800; }
.kv li > span:last-child { color: var(--muted); }

/* MCP */
.code { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 20px; margin: 6px 9px 22px; border-radius: 18px; background: var(--code-bg); color: #f6efe0; border: var(--out); box-shadow: 0 0 0 6px var(--die), 0 0 0 9px var(--line); }
.code pre { margin: 0; flex: 1; overflow-x: auto; }
.code code { background: none; border: 0; padding: 0; color: inherit; font-size: 0.92rem; white-space: pre; }
.copy { flex: none; }

/* living with Nibi */
.tray { list-style: none; margin: 0; padding: 4px 0 0; display: grid; gap: 0; border: 2.5px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--page); font: 600 0.97rem/1.2 var(--display); }
.tray li { padding: 9px 14px; border-bottom: 1.5px solid color-mix(in srgb, var(--line) 25%, transparent); }
.tray li:last-child { border-bottom: 0; border-top: 2px solid color-mix(in srgb, var(--line) 40%, transparent); }
.tray li:hover { background: color-mix(in srgb, var(--lilac) 30%, transparent); }
.cols-2 > .sticker:first-child { rotate: -0.8deg; } .cols-2 > .sticker:last-child { rotate: 0.6deg; }

/* install */
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--tint-needs); border: 2.5px solid var(--tint-needs-line); color: var(--ink-needs); }
.callout p { margin: 0; }
.callout .ic { margin-top: 3px; }
.reqs { margin-top: 32px; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.req-list li { padding-left: 22px; position: relative; color: var(--muted); }
.req-list li strong { color: var(--text); }
.req-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 11px; height: 11px; border-radius: 50%; background: var(--pink); border: 2px solid var(--pet-ink); }

/* FAQ */
.faq { display: grid; gap: 14px; margin-top: 20px; }
.faq details { padding: 0; }
.faq details:nth-child(odd) { rotate: -0.4deg; } .faq details:nth-child(even) { rotate: 0.4deg; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; font: 600 1.08rem/1.35 var(--display); position: relative; border-radius: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lemon); color: var(--pet-ink); border: 2.5px solid var(--pet-ink); font: 700 1.1rem/1 var(--display); transition: rotate 0.3s var(--pop); }
.faq details[open] summary::after { rotate: 45deg; background: var(--pink); }
.faq details p { padding: 0 20px 18px; margin: 0; color: var(--muted); }

/* download */
.band-download { padding: 50px 0 60px; }
.download { text-align: center; display: flex; flex-direction: column; align-items: center; }
.download p { color: var(--muted); max-width: 40em; }
.download .byline { margin-top: 10px; }
.download .btn { margin: 10px 0 8px; }
.download-blob { margin-bottom: 14px; }
.oneliner { width: min(100%, 640px); margin: 28px auto 0; padding: 22px 22px 10px; text-align: left; rotate: -0.4deg; }
.oneliner h3 { margin: 0 0 6px; }
.oneliner p { margin: 0 0 6px; max-width: none; }
.oneliner .code { margin: 8px 9px 18px; }
.oneliner .code .btn { margin: 0; }
.oneliner .note { margin: 0 0 10px; }

/* hero demo: the real renderer's antics (a still frame in calm mode) */
.hero-demo { display: flex; align-items: center; gap: 16px; margin: 20px 9px 0; padding: 10px 18px 10px 10px; max-width: 470px; rotate: -0.8deg; }
.hero-demo picture, .hero-demo img { display: block; flex: none; }
.hero-demo img { width: 150px; height: auto; }
.hero-demo figcaption { font: 1rem/1.4 var(--hand); color: var(--muted); }
.hero-demo figcaption strong { color: var(--text); }
.demo-still { display: none !important; }
html.calm .demo-anim { display: none; }
html.calm .demo-still { display: block !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-ok) .demo-anim { display: none; }
  html:not(.motion-ok) .demo-still { display: block !important; }
}

/* changelog, legal, footer */
.changes { padding-left: 1.2em; }
.changes li { margin-bottom: 10px; }
.changes li::marker { color: var(--pink); }
.legal { padding: 50px 0 70px; }
.legal .chapter { margin-top: 10px; }
.legal h1 { font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.25 var(--hand); }
.legal h2 { font-size: 1.4rem; margin-top: 28px; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.overline { display: inline-block; font: 600 0.9rem/1.2 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pet-ink); background: var(--lilac); border: 2.5px solid var(--line); border-radius: 999px; padding: 6px 13px; transform: rotate(-2deg); margin-bottom: 16px; }
.btn-secondary { background: var(--card); }
.foot { padding: 30px 0 40px; color: var(--muted); font-size: 0.95rem; position: relative; z-index: 1; border-top: 2.5px solid var(--wash); }
.foot-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }

/* "All versions on GitHub": the small link under the Download button */
.all-versions { margin: 0 0 4px; font-size: 0.95rem; }
.all-versions a { color: var(--muted); }

/* ---------- the download dialog (main.js opens it; the browser downloads the file meanwhile) ----------
   Nibi carries a present to the computer and hops; the bar is indeterminate, then done (we cannot read
   the real progress of a cross-origin download, so there is no percentage). Calm: only the steps. */
.dl-dialog { width: 620px; max-width: calc(100% - 8px); max-height: calc(100% - 12px); padding: 14px; border: 0; background: transparent; color: var(--text); overflow: auto; overscroll-behavior: contain; }
.dl-dialog::backdrop { background: rgba(22, 18, 42, 0.58); }
.dl-card { position: relative; margin: 9px 15px 15px 9px; padding: 24px 24px 18px; background: var(--card); border: var(--out); border-radius: 24px; box-shadow: var(--die-shadow); }
.dl-dialog[open] .dl-card { animation: dl-pop 0.45s var(--pop); }
.dl-x { position: absolute; top: 14px; right: 14px; z-index: 2; }
.dl-card h2 { margin: 6px 0 6px; padding-right: 44px; font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem); }
.dl-status { color: var(--muted); margin: 0 0 14px; min-height: 1.6em; }

.dl-stage { position: relative; height: 140px; margin: 0 52px 14px 0; border: 2.5px solid var(--line); border-radius: 18px; overflow: hidden; background: linear-gradient(var(--sc-sky) 72%, var(--sc-hill) 72%); }
.dl-pc { position: absolute; right: 12px; bottom: 8px; width: 112px; height: auto; }
.dl-pc .pc-die { fill: var(--die); }
.dl-pc .pc-frame { fill: var(--lilac); stroke: var(--pet-ink); stroke-width: 4; }
.dl-pc .pc-screen { fill: #e9f6ff; stroke: var(--pet-ink); stroke-width: 3; transition: fill 0.4s; }
.dl-pc .pc-stand { fill: none; stroke: var(--pet-ink); stroke-width: 5; stroke-linecap: round; }
.dl-pc .pc-check { fill: none; stroke: #2f7a3a; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 0.5s ease-out 0.15s; }
.dl-walker { position: absolute; left: 10px; bottom: 6px; width: 76px; height: 108px; }
.dl-walker .mini { position: absolute; left: 0; bottom: 0; width: 76px; height: 76px; }
.dl-gift { position: absolute; left: 18px; top: 0; width: 40px; height: 40px; z-index: 1; }
.dl-gift .g-box, .dl-gift .g-lid { fill: var(--pink); stroke: var(--pet-ink); stroke-width: 2.5; }
.dl-gift .g-band { fill: none; stroke: var(--lemon); stroke-width: 6; }
.dl-gift .g-ribbon { fill: var(--lemon); stroke: var(--pet-ink); stroke-width: 2.2; stroke-linejoin: round; }
.dl-dialog.run .dl-walker { animation: dl-walk 1.9s cubic-bezier(0.45, 0, 0.4, 1) forwards; }
.dl-dialog.run .dl-gift { animation: dl-carry 0.38s ease-in-out 5, dl-drop 0.6s ease-in 1.95s forwards; }
.dl-dialog.done .dl-walker { left: calc(100% - 212px); }
.dl-dialog.done .dl-gift { opacity: 0; }
.dl-dialog.done .pc-screen { fill: #d6f7d6; }
.dl-dialog.done .pc-check { stroke-dashoffset: 0; }

.dl-bar { height: 20px; margin: 0 0 6px; border: 2.5px solid var(--line); border-radius: 999px; background: var(--page); overflow: hidden; }
.dl-fill { display: block; width: 36%; height: 100%; border-radius: 999px; background: repeating-linear-gradient(-45deg, var(--pink) 0 10px, #ffb3d6 10px 20px); }
.dl-dialog.run .dl-fill { animation: dl-indet 1.15s ease-in-out infinite; }
.dl-dialog.done .dl-fill { animation: none; width: 100%; background: var(--done); transition: width 0.45s ease-out; }

.dl-steps { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 10px; }
.dl-steps li { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; background: var(--page); border: 2px solid color-mix(in srgb, var(--line) 35%, transparent); border-radius: 16px; line-height: 1.5; }
.dl-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lilac); color: var(--pet-ink); border: 2.5px solid var(--line); font: 700 0.95rem/1 var(--display); }
.dl-steps li:nth-child(2) .dl-n { background: var(--needs); } .dl-steps li:nth-child(3) .dl-n { background: var(--done); }
.dl-steps .ic { margin-top: 4px; }
.dl-links { margin: 0 0 10px; font-weight: 700; }
.dl-alt { margin: 0 0 2px; color: var(--muted); font-size: 0.95rem; }
.dl-card .code { margin: 6px 9px 20px; }
.dl-card .code .btn { margin: 0; }
.dl-card .code { flex-direction: column; align-items: stretch; }
.dl-card .code code { font-size: 0.85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.dl-card .code .copy { align-self: flex-end; }
.dl-close-row { margin: 0; text-align: right; }

.dl-dialog.still .dl-stage, .dl-dialog.still .dl-bar { display: none; }
html.calm .dl-stage, html.calm .dl-bar { display: none; }
@media (prefers-reduced-motion: reduce) { html:not(.motion-ok) .dl-stage, html:not(.motion-ok) .dl-bar { display: none; } }

@keyframes dl-pop { from { transform: scale(0.86) rotate(-2deg); opacity: 0; } }
@keyframes dl-walk { from { left: 10px; } to { left: calc(100% - 212px); } }
@keyframes dl-carry { 50% { transform: translateY(-4px) rotate(-5deg); } }
@keyframes dl-drop { 0% { transform: none; opacity: 1; } 45% { transform: translate(46px, -26px) rotate(18deg) scale(0.85); opacity: 1; } 100% { transform: translate(98px, 30px) rotate(40deg) scale(0.2); opacity: 0; } }
@keyframes dl-indet { from { transform: translateX(-105%); } to { transform: translateX(290%); } }

@media (max-width: 600px) {
  .dl-dialog { padding: 6px; }
  .dl-card { padding: 18px 14px 14px; }
  .dl-stage { margin-right: 0; margin-top: 40px; height: 128px; }
  .dl-pc { width: 96px; }
  .dl-dialog.done .dl-walker { left: calc(100% - 192px); }
  .dl-steps li { grid-template-columns: auto 1fr; padding: 9px 10px; }
  .dl-steps .ic { display: none; }
}
@keyframes dl-walk-sm { from { left: 10px; } to { left: calc(100% - 192px); } }
@media (max-width: 600px) { .dl-dialog.run .dl-walker { animation-name: dl-walk-sm; } }

/* confetti layer */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; }

/* scroll pop-ins */
.js .pop:not(.in) { opacity: 0; transform: translateY(26px) scale(0.95); }
.js .pop { transition: opacity 0.5s ease-out, transform 0.7s var(--pop), rotate 0.4s var(--pop), box-shadow 0.3s; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .split, .split-rev, .split-night, .cols-2, .cols-3, .how { grid-template-columns: 1fr; }
  .stickers { grid-template-columns: 1fr 1fr; }
  .mood-sheet li { flex-basis: calc(50% - 11px); }
  .chapter { padding: 36px 24px 40px; }
  .how { gap: 34px; }
  .req-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 14px; }
  .top-row { gap: 8px; height: 62px; }
  .brand { font-size: 1.35rem; }
  .icon-btn { width: 38px; height: 38px; }
  .ver-link { min-height: 34px; padding: 2px 9px; font-size: 0.8rem; }
  .top-tools .btn-sm { padding: 6px 12px; min-height: 38px; font-size: 0.9rem; }
  .band { padding: 22px 0; }
  .chapter { padding: 30px 16px 36px; border-radius: 6px 12px 8px 14px; }
  .stickers { grid-template-columns: 1fr; gap: 14px; }
  .mood-sheet { gap: 14px; }
  .mood-card { padding: 12px 8px 14px; }
  .mood-card .mini { width: 70px; height: 70px; }
  .picture { transform: none; margin: 9px 9px 9px; }
  .say { font-size: 0.88rem; max-width: 66%; left: 12px; top: 12px; }
  .cta .btn { flex: 1 1 100%; }
  .mood-btn { padding: 6px 10px 6px 7px; font-size: 0.82rem; }
  .code { flex-direction: column; align-items: stretch; }
  .kv li { grid-template-columns: 1fr; gap: 0; }
  .mini-lg { width: 92px; height: 92px; }
  .day-time { font-size: 1.9rem; }
  .win-bar span { font-size: 0.6rem; }
  .ask { font-size: 0.6rem; }
  .desk-nibi, .desk-nibi .mini { width: 48px; height: 48px; }
  .sticker { padding: 16px; }
  .shot img { box-shadow: 0 0 0 5px var(--die), 0 0 0 8px var(--line); }
}


/* ---------- calm: reduced motion or the header toggle ---------- */
html.calm *, html.calm *::before, html.calm *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
html.calm .pop, html.calm .chapter { opacity: 1 !important; transform: none !important; }
html.calm .keep-fill { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-ok) *, html:not(.motion-ok) *::before, html:not(.motion-ok) *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  html:not(.motion-ok) { scroll-behavior: auto; }
  html:not(.motion-ok) .pop, html:not(.motion-ok) .chapter { opacity: 1 !important; transform: none !important; }
  html:not(.motion-ok) .keep-fill { transform: none !important; }
}
/* paused while off screen (main.js toggles .live on bands) and in a hidden tab */
.js .band:not(.live) *, .js .hero:not(.live) *, html.hidden-tab * { animation-play-state: paused !important; }