@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  body { min-height: 100dvh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3 { overflow-wrap: break-word; }
  h1, h2, h3 { text-wrap: balance; line-height: 1.1; }
  p { text-wrap: pretty; }
  button { cursor: pointer; }
  dialog { padding: 0; border: 0; color: inherit; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --font-body: "Andika", ui-rounded, system-ui, sans-serif;
    --font-display: "Grandstander", ui-rounded, system-ui, sans-serif;

    --step--1: clamp(0.9rem, 0.86rem + 0.15vw, 0.98rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
    --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
    --step-3: clamp(2rem, 1.5rem + 2.6vw, 3.2rem);

    --gutter: 16px;
    --radius: 28px;
    --spring: cubic-bezier(0.3, 1.6, 0.5, 1);

    --paper: light-dark(#F4E9D8, #1C1729);
    --speck: light-dark(rgb(120 80 30 / 7%), rgb(255 230 190 / 4%));
    --lamp: light-dark(#FFF6E3, #3A2E48);
    --card: light-dark(#FFF8EC, #2A2340);
    --card-edge: light-dark(#E2CFAF, #120E1E);
    --ink: light-dark(#2A2350, #F7EEDF);
    --muted: light-dark(#6A5F7E, #B9AECB);
    --on-hot: #FFFFFF;
    --gold: #FFC93C;
    --gold-ink: #2A2350;
    --hot: #F2452E;
    --hot-edge: #B92E1B;
    --blue: #3550D8;
    --blue-edge: #23379C;
    --green: #1A9653;
    --green-edge: #11683A;
    --wood: #C99A62;
    --wood-edge: #A9783F;
    --wood-light: #E9CFA4;
    --wood-line: #E0C291;
    --danger: light-dark(#C2301B, #FF8C78);
    --scrim: rgb(42 35 80 / 45%);

    --p0: #F2452E; --p1: #FF8A1F; --p2: #FFD02B; --p3: #8BD34A; --p4: #1FA35B; --p5: #19B5B0;
    --p6: #3A9BF0; --p7: #3550D8; --p8: #8A4FD8; --p9: #FF6FAE; --p10: #FFFFFF; --p11: #26222E;
  }
}

@layer base {
  html { background: var(--paper); }
  body {
    font-family: var(--font-body); font-size: var(--step-0); color: var(--ink);
    background-color: var(--paper);
    background-image: radial-gradient(var(--speck) 1px, transparent 1.4px), radial-gradient(var(--speck) 1px, transparent 1.4px);
    background-size: 22px 22px, 31px 31px;
    background-position: 0 0, 11px 7px;
  }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
  a { color: inherit; text-underline-offset: 0.2em; }
  :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 12px; }
  ::selection { background: color-mix(in oklab, var(--p2) 50%, transparent); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }
}

@layer layout {
  main { display: block; min-height: 100dvh; }
  .grow { flex: 1 1 auto; }
}

@layer components {
  .skip { position: absolute; left: -999px; z-index: 10; }
  .skip:focus { left: var(--gutter); top: var(--gutter); background: var(--card); padding: 0.5rem 0.75rem; border-radius: 12px; }

  .toast {
    position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); z-index: 30; translate: -50% 0;
    background: var(--ink); color: var(--paper); padding: 0.7rem 1.2rem; border-radius: 1.4rem; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); text-align: center;
    font-family: var(--font-display); font-weight: 600; box-shadow: 0 10px 24px rgb(0 0 0 / 18%);
    animation: toast-in 280ms var(--spring) both, toast-out 400ms ease 3.2s forwards;
  }
  .toast-reward { top: calc(max(14px, env(safe-area-inset-top)) + 62px); background: var(--gold); color: var(--gold-ink); border: 3px solid var(--gold-ink); font-size: 1.15rem; }
  .toast-long { animation: toast-in 280ms var(--spring) both, toast-out 400ms ease 7s forwards; }
  @keyframes toast-in { from { opacity: 0; translate: -50% -12px; } }
  @keyframes toast-out { to { opacity: 0; visibility: hidden; } }

  /* ---------- shared controls ---------- */

  .icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .icon-fill { fill: currentColor; stroke: none; }
  .logo { width: 34px; height: 34px; flex: none; }

  .round {
    position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none;
    border: 0; border-radius: 50%; background: var(--card); color: var(--ink); text-decoration: none;
    box-shadow: 0 3px 0 var(--card-edge), 0 8px 18px rgb(90 55 20 / 10%);
    transition: transform 160ms var(--spring);
  }
  .round:active { transform: translateY(2px) scale(0.94); box-shadow: 0 1px 0 var(--card-edge); }
  .round[disabled] { opacity: 0.4; pointer-events: none; }
  .round-soft { width: 44px; height: 44px; box-shadow: none; background: var(--paper); }
  .round[data-sound] .icon-off { display: none; }
  .round[data-sound][aria-pressed="false"] .icon-on { display: none; }
  .round[data-sound][aria-pressed="false"] .icon-off { display: block; }
  .badge {
    position: absolute; top: -3px; right: -3px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
    display: grid; place-items: center; background: var(--hot); color: #fff; box-shadow: 0 0 0 3px var(--paper);
    font: 800 13px/1 var(--font-display);
  }

  .pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 58px; padding: 0 1.4rem;
    border: 0; border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none;
    font: 800 var(--step-1)/1 var(--font-display); white-space: nowrap;
    box-shadow: 0 4px 0 var(--card-edge), 0 10px 20px rgb(90 55 20 / 10%);
    transition: transform 160ms var(--spring), box-shadow 160ms ease;
  }
  .pill:active { transform: translateY(3px) scale(0.97); box-shadow: 0 1px 0 var(--card-edge); }
  .pill-hot { background: var(--hot); color: var(--on-hot); box-shadow: 0 5px 0 var(--hot-edge), 0 12px 24px rgb(242 69 46 / 28%); }
  .pill-hot:active { box-shadow: 0 1px 0 var(--hot-edge); }
  .pill-blue { background: var(--blue); color: #fff; box-shadow: 0 5px 0 var(--blue-edge); }
  .pill-green { background: var(--green); color: #fff; box-shadow: 0 5px 0 var(--green-edge); }
  .pill-ink { min-height: 46px; padding: 0 1.1rem; font-size: var(--step-0); background: var(--ink); color: var(--paper); box-shadow: none; }
  .pill-quiet { background: transparent; box-shadow: none; font-size: var(--step-0); }
  .pill-big { min-height: 68px; font-size: var(--step-2); }
  .pill[disabled] { opacity: 0.5; pointer-events: none; }
  .link-button { border: 0; background: none; padding: 0.6rem 0.2rem; min-height: 44px; color: var(--danger); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }

  .brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; font: 800 26px/1 var(--font-display); letter-spacing: -0.02em; min-height: 48px; }

  .round.lang { font: 800 var(--step-0)/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }

  /* ---------- toy box ---------- */

  .box { width: min(100%, 1180px); margin-inline: auto; padding: max(14px, env(safe-area-inset-top)) var(--gutter) 0; display: flex; flex-direction: column; min-height: 100dvh; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 4px; }
  .topbar-actions { display: flex; gap: 10px; }
  .intro { padding: 18px 4px 14px; }
  .intro h1 { font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.02em; }
  .intro p { color: var(--muted); font-size: var(--step-1); margin-top: 4px; }

  .toys { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .toy-card {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    aspect-ratio: 1 / 0.98; padding-bottom: 12px; overflow: hidden; border-radius: var(--radius);
    background: var(--card); color: var(--ink); text-decoration: none;
    box-shadow: 0 3px 0 var(--card-edge), 0 10px 22px rgb(90 55 20 / 10%);
    transition: transform 180ms var(--spring);
  }
  .toy-card:hover { transform: translateY(-3px) rotate(-1.5deg); }
  .toy-card:active { transform: scale(0.94); }
  .splash { position: absolute; top: 9%; left: 50%; width: 58%; aspect-ratio: 1; translate: -50% 0; border-radius: 46% 54% 50% 50% / 52% 44% 56% 48%; background: var(--splash); opacity: 0.3; }
  .toy-shadow { position: absolute; top: 60%; left: 50%; width: 50%; height: 9%; translate: -50% 0; border-radius: 50%; background: rgb(90 55 20 / 14%); }
  .toy-thumb { position: absolute; top: 3%; left: 50%; width: 72%; height: auto; aspect-ratio: 1; translate: -50% 0; object-fit: contain; }
  .toy-thumb:not([src]) { visibility: hidden; }
  .toy-thumb[src] { animation: pop-in 420ms var(--spring) both; }
  @keyframes pop-in { from { opacity: 0; transform: scale(0.6) translateY(12px); } }
  .toy-name { position: relative; font: 800 var(--step-1)/1.1 var(--font-display); }
  .wip { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--p2); color: #2A2350; box-shadow: 0 2px 0 #C79A00; }
  .wip .icon { width: 20px; height: 20px; }
  .toy-rocket { --splash: var(--p6); } .toy-dino { --splash: var(--p3); } .toy-car { --splash: var(--p0); } .toy-owl { --splash: var(--p8); }
  .toy-fish { --splash: var(--p1); } .toy-robot { --splash: var(--p5); } .toy-whale { --splash: var(--p7); } .toy-duck { --splash: var(--p2); }

  .strip { position: relative; display: block; height: 108px; margin: 22px 2px 0; text-decoration: none; color: var(--ink); }
  .plank { position: absolute; left: 0; right: 0; bottom: 26px; height: 15px; border-radius: 8px; background: var(--wood); box-shadow: 0 5px 0 var(--wood-edge), 0 12px 18px rgb(90 55 20 / 22%); }
  .strip-toys { position: absolute; left: 10px; bottom: 39px; display: flex; align-items: flex-end; gap: 0; }
  .strip-toys img { width: 64px; height: 64px; object-fit: contain; }
  .strip-toys img:nth-child(n + 4) { display: none; }
  .strip-label { position: absolute; right: 8px; bottom: 50px; display: inline-flex; align-items: center; gap: 4px; font: 800 var(--step-1)/1 var(--font-display); }

  @media (min-width: 700px) {
    .box { padding-inline: 32px; }
    .toys { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .strip-toys img { width: 84px; height: 84px; }
    .strip-toys img:nth-child(n + 4) { display: block; }
  }

  /* ---------- paint bench ---------- */

  .bench, .sent { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
  .bench-top { display: flex; align-items: center; gap: clamp(6px, 2vw, 10px); padding: max(12px, env(safe-area-inset-top)) var(--gutter) 0; position: relative; z-index: 2; }
  .done {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 58px; padding: 0 1.5rem 0 1.1rem; border: 0; border-radius: 999px;
    background: var(--hot); color: #fff; font: 800 var(--step-1)/1 var(--font-display);
    box-shadow: 0 5px 0 var(--hot-edge), 0 12px 22px rgb(242 69 46 / 30%);
    transition: transform 160ms var(--spring), opacity 200ms ease;
  }
  .done .icon { stroke-width: 3.2; }
  .done:active { transform: translateY(3px) scale(0.96); box-shadow: 0 1px 0 var(--hot-edge); }
  .done[disabled] { opacity: 0.35; pointer-events: none; }
  .done.ready { animation: nudge 2.4s ease-in-out 1.2s infinite; }
  @keyframes nudge { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-4deg) scale(1.04); } 90% { transform: rotate(4deg) scale(1.04); } 95% { transform: rotate(-2deg); } }

  .stage { position: relative; min-height: 0; background: radial-gradient(58% 52% at 50% 52%, var(--lamp) 0%, color-mix(in oklab, var(--lamp) 50%, transparent) 45%, transparent 75%); }
  .canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

  .coach {
    position: absolute; left: 50%; top: 12px; translate: -50% 0; width: min(calc(100% - 2 * var(--gutter)), 420px);
    display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 24px;
    background: #2A2350; color: #FFF8EC; box-shadow: 0 10px 24px rgb(42 35 80 / 30%);
    pointer-events: none; animation: toast-in 400ms var(--spring) both;
  }
  .coach .logo { width: 40px; height: 40px; }
  .coach p { font-size: var(--step--1); opacity: 0.88; }
  .coach .coach-big { font: 800 var(--step-1)/1.15 var(--font-display); opacity: 1; }
  .hand { position: absolute; left: 50%; top: 55%; width: 76px; pointer-events: none; animation: swipe 2.2s ease-in-out infinite; }
  .hand-dot { fill: rgb(255 111 174 / 45%); }
  .hand-fill { fill: #FFF8EC; stroke: #2A2350; stroke-width: 2.4; stroke-linejoin: round; }
  @keyframes swipe { 0%, 100% { transform: translate(-50px, 0); } 50% { transform: translate(30px, -30px); } }

  .nogl { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
  .nogl h1, .nogl h2 { font-size: var(--step-2); max-width: 18ch; }
  .nogl p { color: var(--muted); max-width: 32ch; }

  .paint-ui { padding: 0 10px calc(max(12px, env(safe-area-inset-bottom)) + 52px); display: grid; gap: 8px; position: relative; z-index: 2; }
  .tools { display: flex; align-items: center; gap: clamp(4px, 1.6vw, 8px); padding: 0 4px; }
  .tool {
    width: clamp(44px, 12vw, 52px); height: clamp(44px, 12vw, 52px); flex: none; border: 0; border-radius: 50%; display: grid; place-items: center;
    background: var(--card); color: var(--ink); box-shadow: 0 3px 0 var(--card-edge);
    transition: transform 160ms var(--spring), background 120ms ease;
  }
  .tool:active { transform: scale(0.9); }
  .tool[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 3px 0 #120E1E; }
  .tool[disabled] { opacity: 0.4; pointer-events: none; }
  .dot { display: block; border-radius: 50%; background: currentColor; }
  .dot-0 { width: 10px; height: 10px; } .dot-1 { width: 17px; height: 17px; } .dot-2 { width: 25px; height: 25px; }

  .trays { display: grid; gap: 8px; }
  .tray {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px 4px; justify-items: center;
    padding: 12px 8px 14px; border-radius: 30px; background: var(--wood);
    box-shadow: inset 0 3px 0 rgb(255 255 255 / 25%), 0 5px 0 var(--wood-edge), 0 14px 26px rgb(90 55 20 / 25%);
  }
  .pot {
    position: relative; width: min(48px, 100%); aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--pot);
    box-shadow: inset 0 -4px 0 rgb(0 0 0 / 14%), 0 0 0 2px rgb(90 55 20 / 35%);
    transition: transform 220ms var(--spring);
  }
  .pot:active { transform: scale(0.86); }
  .pot[aria-pressed="true"] { transform: translateY(-5px) scale(1.06); box-shadow: inset 0 -4px 0 rgb(0 0 0 / 14%), 0 0 0 4px #FFF8EC, 0 0 0 7px #2A2350; }
  .shine { position: absolute; top: 7px; left: 10px; width: 14px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 55%); rotate: -25deg; }
  .pot-0 { --pot: var(--p0); } .pot-1 { --pot: var(--p1); } .pot-2 { --pot: var(--p2); } .pot-3 { --pot: var(--p3); }
  .pot-4 { --pot: var(--p4); } .pot-5 { --pot: var(--p5); } .pot-6 { --pot: var(--p6); } .pot-7 { --pot: var(--p7); }
  .pot-8 { --pot: var(--p8); } .pot-9 { --pot: var(--p9); } .pot-10 { --pot: var(--p10); } .pot-11 { --pot: var(--p11); }
  .pot-12 { background: conic-gradient(#F2452E, #FF8A1F, #FFD02B, #8BD34A, #19B5B0, #3A9BF0, #8A4FD8, #FF6FAE, #F2452E); }
  .pot-13 { background: repeating-linear-gradient(100deg, #EED3A7 0 5px, #E2BF8A 5px 7px, #EED3A7 7px 12px); }

  .stickers { display: grid; grid-template-columns: 1fr; gap: 10px; background: var(--card); box-shadow: 0 4px 0 var(--card-edge), 0 14px 26px rgb(90 55 20 / 16%); }
  .stickers[hidden] { display: none; }
  .glyphs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; justify-items: center; }
  .glyph {
    width: 52px; height: 52px; border: 0; border-radius: 18px; display: grid; place-items: center; background: var(--paper);
    box-shadow: inset 0 -3px 0 rgb(90 55 20 / 12%); transition: transform 180ms var(--spring);
  }
  .glyph svg { width: 34px; height: 34px; }
  .glyph .g-fill { fill: var(--sticker, #FFFFFF); stroke: #2A2350; stroke-width: 1.4; }
  .glyph .g-white { fill: #FFFFFF; stroke: #2A2350; stroke-width: 1.4; }
  .glyph .g-ink { fill: #2A2350; }
  .glyph:active { transform: scale(0.9); }
  .glyph[aria-pressed="true"] { background: var(--p2); box-shadow: 0 0 0 3px #2A2350; }
  .sticker-hint { display: flex; align-items: center; gap: 10px; padding: 0 6px; color: var(--muted); font-size: var(--step--1); line-height: 1.3; }
  .mini-pot { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sticker, #fff); box-shadow: 0 0 0 2px rgb(90 55 20 / 35%), inset 0 -3px 0 rgb(0 0 0 / 12%); }

  .alive-ui, .sent-actions, .viewer-actions { display: grid; gap: 12px; padding: 0 var(--gutter) calc(max(18px, env(safe-area-inset-bottom)) + 52px); position: relative; z-index: 2; }
  .alive-ui[hidden] { display: none; }
  .alive-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .alive-row .pill { padding-inline: 0.8rem; font-size: var(--step-0); }

  .bench.is-alive .stage { background: repeating-conic-gradient(from 0deg at 50% 55%, rgb(255 208 43 / 22%) 0 10deg, transparent 10deg 20deg), radial-gradient(58% 52% at 50% 52%, var(--lamp) 0%, transparent 75%); }

  /* landscape (tablet, or a phone on its side): tools on the left, pots on the right */
  @media (min-width: 540px) and (min-aspect-ratio: 5/4) {
    .bench { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); }
    .bench-top { grid-column: 1 / -1; padding: max(20px, env(safe-area-inset-top)) 28px 0; }
    .bench .stage { grid-column: 2; grid-row: 2; }
    .paint-ui { display: contents; }
    .tools {
      grid-column: 1; grid-row: 2; align-self: center; margin-left: 24px; flex-direction: column; padding: 12px; border-radius: 40px;
      background: var(--card); box-shadow: 0 4px 0 var(--card-edge), 0 12px 24px rgb(90 55 20 / 12%);
    }
    .tools .tool { width: 58px; height: 58px; box-shadow: none; background: transparent; }
    .tools .tool[aria-pressed="true"] { background: var(--ink); }
    .tools .grow { flex: 0 0 2px; width: 70%; height: 2px; background: var(--card-edge); }
    .trays { grid-column: 3; grid-row: 2; align-self: center; margin: 0 24px 24px 0; display: flex; flex-direction: column; gap: 12px; }
    .tray { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 16px; border-radius: 36px; }
    .pot { width: 52px; }
    .pot[aria-pressed="true"] { transform: translateX(-5px) scale(1.1); }
    .stickers { grid-template-columns: 1fr; width: 220px; }
    .glyphs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .glyph { width: 56px; height: 56px; }
    .sticker-hint { display: none; }
    .alive-ui { grid-column: 1 / -1; grid-row: 2; align-self: end; justify-self: center; width: min(560px, 100%); }
  }

  /* short landscape (a phone on its side, a small tablet): tools in two columns and pots in four, so
     both fit beside the Toy and clear the hub button bottom-left */
  @media (min-width: 540px) and (min-aspect-ratio: 5/4) and (max-height: 640px) {
    .bench-top { padding-top: max(10px, env(safe-area-inset-top)); }
    .done { min-height: 52px; }
    .tools { display: grid; grid-template-columns: repeat(2, 48px); gap: 6px; align-self: start; margin: 8px 0 0 12px; padding: 10px; border-radius: 30px; }
    .tools .tool { width: 48px; height: 48px; }
    .tools .grow { display: none; }
    .trays { align-self: start; margin: 8px 12px 0 0; }
    .tray { grid-template-columns: repeat(4, 48px); gap: 8px; padding: 10px; border-radius: 26px; }
    .pot { width: 48px; }
    .stickers { width: auto; }
    .glyphs { gap: 6px; }
    .glyph { width: 48px; height: 48px; }
    .alive-ui { grid-column: 3; align-self: center; justify-self: end; width: min(230px, 34vw); padding: 0 12px 0 0; gap: 8px; }
    .alive-ui .alive-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .alive-ui .alive-row .pill { min-height: 48px; padding-block: 0; }
    .coach { padding: 10px 14px; }
    .coach { width: max-content; max-width: calc(100% - 16px); }
    .coach .logo, .coach p:not(.coach-big) { display: none; }
    .coach .coach-big { font-size: var(--step-0); }
    .coach { width: auto; max-width: 240px; }
    .hand { width: 56px; }
  }

  /* ---------- sheets and dialogs ---------- */

  .sheet {
    margin: auto auto 0; width: 100%; max-width: min(560px, 100%); max-height: 92dvh; border-radius: 32px 32px 0 0; background: var(--card); color: var(--ink);
    box-shadow: 0 -10px 30px rgb(42 35 80 / 25%);
  }
  .sheet[open] { animation: sheet-up 340ms var(--spring) both; }
  .sheet::backdrop { background: var(--scrim); }
  @keyframes sheet-up { from { transform: translateY(60px); opacity: 0; } }
  .sheet-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 22px max(26px, env(safe-area-inset-bottom)); }
  .sheet-body h2 { font-size: var(--step-2); }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; }
  .eyebrow { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: light-dark(#8A6A3C, #E3C38F); }
  .sheet-line { color: var(--muted); line-height: 1.45; }
  .sheet-note { color: var(--muted); font-size: var(--step--1); text-align: center; }
  .sheet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  [data-step] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  [data-step][hidden] { display: none; }
  .send-form { display: grid; gap: 16px; }
  .field { display: grid; gap: 6px; font-weight: 700; }
  .field small { font-weight: 400; color: var(--muted); }
  .field input { min-height: 56px; padding: 0 16px; border: 2px solid var(--card-edge); border-radius: 16px; background: light-dark(#fff, #1C1729); font-size: 1.15rem; }
  .field [aria-invalid="true"] { border-color: var(--danger); }
  .field .error { color: var(--danger); font-weight: 700; }
  .link-box { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 18px; background: var(--paper); }
  .link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .problem { display: flex; gap: 14px; align-items: flex-start; }
  .problem h2 { font-size: var(--step-1); }
  .problem-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: light-dark(#FFE3DD, #4A2330); color: var(--danger); }

  /* ---------- shelf ---------- */

  .shelf-page { min-height: 100dvh; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) var(--gutter) max(16px, env(safe-area-inset-bottom)); width: min(100%, 1100px); margin-inline: auto; }
  .shelf-page .topbar { justify-content: flex-start; gap: 14px; }
  .shelf-title h1 { font-size: var(--step-2); line-height: 1; }
  .shelf-title p { color: var(--muted); margin-top: 4px; }
  .shelf-title p:empty { display: none; }
  .cabinet {
    flex: 1; margin-top: 18px; border: 10px solid var(--wood); border-radius: 24px; padding: 0 6px;
    background: repeating-linear-gradient(90deg, var(--wood-light) 0 46px, var(--wood-line) 46px 48px);
    box-shadow: inset 0 8px 18px rgb(90 55 20 / 22%), 0 10px 24px rgb(90 55 20 / 20%);
    display: flex; flex-direction: column;
  }
  .rows {
    --row: 200px;
    list-style: none; padding: 0; margin: 0 -6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--row);
    background-image: linear-gradient(to bottom, transparent 0 calc(var(--row) - 22px), var(--wood) calc(var(--row) - 22px) calc(var(--row) - 6px), var(--wood-edge) calc(var(--row) - 6px) var(--row));
    background-size: 100% var(--row);
  }
  .slot { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 10px 6px 20px; }
  .slot-button { position: relative; z-index: 1; height: 100%; max-width: 100%; aspect-ratio: 1; border: 0; padding: 0; background: none; transition: transform 180ms var(--spring); }
  .slot-button:active { transform: scale(0.92) rotate(-3deg); }
  .slot-button img { width: 100%; height: 100%; object-fit: contain; }
  .slot-sent { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 0 0 3px var(--wood-light); }
  .slot-sent .icon { width: 17px; height: 17px; stroke-width: 3; }
  .empty { margin: auto; display: grid; justify-items: center; gap: 14px; padding: 32px 20px; text-align: center; }
  .empty[hidden] { display: none; }
  .empty-brush .logo { width: 110px; height: 110px; animation: sway 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes sway { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }
  .empty-title { font: 800 var(--step-2)/1.15 var(--font-display); max-width: 16ch; }
  .empty p:not(.empty-title) { color: light-dark(#5D5370, #4A3F60); max-width: 26ch; }
  @media (min-width: 700px) { .rows { --row: 230px; grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .viewer { width: 100%; height: 100%; max-width: none; max-height: none; background: var(--paper); }
  .viewer::backdrop { background: var(--paper); }
  .viewer-body { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(58% 48% at 50% 48%, var(--lamp) 0%, transparent 75%); }
  .viewer-top { display: flex; gap: 10px; padding: max(12px, env(safe-area-inset-top)) var(--gutter) 0; }
  .viewer .canvas { position: static; }

  /* ---------- sent toy ---------- */

  .sent-head { padding: max(18px, env(safe-area-inset-top)) 22px 0; display: grid; gap: 6px; justify-items: start; }
  .sent-head h1 { font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.02em; margin-top: 8px; max-width: 18ch; }
  .sent-head p { color: var(--muted); }
  .owner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; color: var(--muted); font-size: var(--step--1); }
  .hub-row { display: flex; justify-content: center; }
  .sent-foot { text-align: center; color: var(--muted); font-size: var(--step--1); }
  .hub-row { display: flex; justify-content: center; }
  @media (min-width: 540px) and (min-aspect-ratio: 5/4) {
    .sent { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: 1fr auto; }
    .sent-head { grid-column: 1; grid-row: 1; align-content: center; padding: 40px; }
    .sent .stage { grid-column: 2; grid-row: 1 / -1; }
    .sent-actions { grid-column: 1; grid-row: 2; padding: 0 40px 40px; }
  }
  @media (min-width: 540px) and (min-aspect-ratio: 5/4) and (max-height: 640px) {
    .sent { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr) auto; }
    .sent-head { padding: max(10px, env(safe-area-inset-top)) 16px 0; align-content: start; }
    .sent-head h1 { font-size: var(--step-2); }
    .sent .stage { grid-column: 2; grid-row: 1; }
    .sent-actions { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px max(10px, env(safe-area-inset-bottom)) 72px; }
    .sent-actions .alive-row { display: contents; }
    .sent-actions .pill, .sent-actions .button { min-height: 48px; flex: 1 1 auto; padding-inline: 0.8rem; font-size: var(--step-0); }
    .sent-actions .owner { flex: 1 0 100%; }
    .sent-foot, .hub-row { display: none; }
    .viewer-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px max(10px, env(safe-area-inset-bottom)) 72px; }
    .viewer-actions .alive-row { display: contents; }
    .viewer-actions .pill { min-height: 48px; flex: 1 1 auto; padding-inline: 0.8rem; font-size: var(--step-0); }
  }

  /* ---------- errors ---------- */

  .hero { width: min(100% - 2 * var(--gutter), 34rem); margin: 0 auto; padding-block: 18vh 4rem; display: grid; gap: 14px; justify-items: start; }
  .hero h1 { font-size: var(--step-3); }
  .lede { color: var(--muted); font-size: var(--step-1); }
  .button { display: inline-flex; align-items: center; min-height: 56px; padding: 0 1.4rem; border-radius: 999px; background: var(--hot); color: #fff; text-decoration: none; font: 800 var(--step-1)/1 var(--font-display); box-shadow: 0 5px 0 var(--hot-edge); }
}

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [hidden] { display: none !important; }
}

/* ---------- orders, crates and the shelf scene (growth item 21) ---------- */

@layer components {
  /* An Order: a picture card, no words. On the toy box it is a link to the bench; on the bench a strip over the stage. */
  .order {
    display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 10px 16px 10px 10px; border-radius: var(--radius);
    background: var(--card); color: var(--ink); text-decoration: none; border: 3px dashed var(--wood);
    box-shadow: 0 3px 0 var(--card-edge), 0 10px 22px rgb(90 55 20 / 10%);
    transition: transform 180ms var(--spring);
  }
  .order:active { transform: scale(0.97); }
  .order-toy { flex: none; width: 72px; height: 72px; display: grid; place-items: center; }
  .order-toy img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) opacity(0.28); }
  .order-toy img:not([src]) { visibility: hidden; }
  .ord-swatch {
    position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--pot, var(--p0));
    box-shadow: inset 0 -4px 0 rgb(0 0 0 / 14%), 0 0 0 3px #FFF8EC, 0 0 0 5px rgb(90 55 20 / 45%);
  }
  .ord-glyphs { display: flex; gap: 4px; margin-right: auto; }
  .ord-glyphs span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--paper); position: relative; }
  .ord-glyphs svg { width: 28px; height: 28px; }
  .ord-glyphs .g-fill { fill: #FFFFFF; stroke: #2A2350; stroke-width: 1.4; }
  .ord-glyphs .g-white { fill: #FFFFFF; stroke: #2A2350; stroke-width: 1.4; }
  .ord-glyphs .g-ink { fill: #2A2350; }
  .order-pips { display: flex; gap: 5px; }
  .order-pips i { width: 12px; height: 12px; border-radius: 50%; background: rgb(90 55 20 / 20%); }
  .order-pips i.on { background: var(--p2); box-shadow: 0 0 0 2px #2A2350; }
  .order > .icon { color: var(--muted); }
  /* The client (Ardi the squirrel) brings the Order: leaning on the card's top edge on the toy box (part of the link), a face-sized pose in the strip on the bench. */
  .order { position: relative; margin-top: 72px; }
  .client-ask { position: absolute; right: 18px; bottom: calc(100% - 22px); width: 85px; height: 96px; animation: client-bob 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
  @keyframes client-bob { 50% { translate: 0 -4px; rotate: -2deg; } }
  .client-poses { flex: none; width: 38px; height: 43px; margin: -6px 0 -6px -2px; }
  .client-poses img { display: none; width: 100%; height: 100%; }
  .order-strip:not(.has-met, .is-done) .pose-wait, .order-strip.has-met:not(.is-done) .pose-hope { display: block; }
  .order-strip.is-done .pose-cheer { display: block; animation: client-cheer 700ms var(--spring) both; transform-origin: 50% 100%; }
  @keyframes client-cheer { 0% { scale: 0.7; } 50% { scale: 1.2; translate: 0 -4px; } 100% { scale: 1; } }
  /* Alive keeps only her cheering face, in the stage's top corner: the acorn toast has the top middle. */
  .bench.is-alive .order-strip.is-done { opacity: 1; left: 10px; translate: none; padding: 0; background: none; box-shadow: none; animation: none; }
  .bench.is-alive .order-strip.is-done > :not(.client-poses) { display: none; }
  .bench.is-alive .order-strip.is-done .client-poses { width: 57px; height: 64px; margin: 0; }
  @media (min-width: 600px) {
    .order { margin-top: 100px; }
    .client-ask { width: 120px; height: 135px; bottom: calc(100% - 26px); }
    .client-poses { width: 50px; height: 56px; margin: -12px 0 -12px -4px; }
    .bench.is-alive .order-strip.is-done .client-poses { width: 80px; height: 90px; }
  }

  .order-strip {
    position: absolute; left: 50%; top: 10px; z-index: 1; translate: -50% 0; display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 999px; background: var(--card); box-shadow: 0 3px 0 var(--card-edge), 0 8px 18px rgb(90 55 20 / 14%);
    pointer-events: none; transition: opacity 200ms ease;
  }
  .order-strip[hidden] { display: none; }
  .bench.is-alive .order-strip { opacity: 0; }
  .order-strip .ord-swatch { width: 34px; height: 34px; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 14%), 0 0 0 2px #FFF8EC, 0 0 0 4px rgb(90 55 20 / 45%); }
  .order-strip .ord-glyphs span { width: 34px; height: 34px; border-radius: 10px; }
  .order-strip .ord-glyphs svg { width: 24px; height: 24px; }
  .ord-tick { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; display: none; place-items: center; border-radius: 50%; background: #1FA35B; color: #fff; box-shadow: 0 0 0 2px var(--card); }
  .ord-tick .icon { width: 14px; height: 14px; stroke-width: 3.6; }
  .ord-swatch.is-met .ord-tick { display: grid; animation: pop-in 320ms var(--spring) both; }
  .order-strip .ord-glyphs span.is-met .g-fill { fill: var(--p2); }
  .order-strip .ord-glyphs span.is-met::after {
    content: ""; position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 50%; background: #1FA35B no-repeat center / 12px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
    box-shadow: 0 0 0 2px var(--card); animation: pop-in 320ms var(--spring) both;
  }
  .order-strip.is-done { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-ink), 0 8px 18px rgb(90 55 20 / 20%); animation: nudge 1.6s ease-in-out infinite; }
  .done.order-ready { box-shadow: 0 5px 0 var(--hot-edge), 0 0 0 5px var(--p2), 0 12px 22px rgb(242 69 46 / 30%); }

  /* Crates: pot sets and sticker packs that open with paintings made. Locked means a padlock and dots, never a count. */
  .tool-crate { position: relative; }
  .new-dot { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 3px var(--card); }
  .tools .tool[aria-pressed="true"] .new-dot { box-shadow: 0 0 0 3px var(--ink); }
  .crates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; background: var(--card); box-shadow: 0 4px 0 var(--card-edge), 0 14px 26px rgb(90 55 20 / 16%); }
  .crates[hidden] { display: none; }
  .crate {
    position: relative; width: 100%; min-height: 64px; border: 0; border-radius: 18px; display: grid; place-items: center; background: var(--paper);
    box-shadow: inset 0 -3px 0 rgb(90 55 20 / 12%); transition: transform 180ms var(--spring);
  }
  .crate:active { transform: scale(0.94); }
  .crate[aria-pressed="true"] { background: var(--p2); box-shadow: 0 0 0 3px #2A2350; }
  .crate-pots { display: grid; grid-template-columns: repeat(2, 20px); gap: 4px; }
  .crate-pots i { width: 20px; height: 20px; border-radius: 50%; background: var(--c, #ddd); box-shadow: 0 0 0 2px rgb(90 55 20 / 35%), inset 0 -2px 0 rgb(0 0 0 / 14%); }
  .crate.is-locked .crate-pots { opacity: 0.25; filter: grayscale(0.6); }
  .crate-lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--ink); }
  .crate-lock[hidden] { display: none; }
  .crate-lock .icon { width: 24px; height: 24px; }
  .dots { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 56px; }
  .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgb(90 55 20 / 25%); }
  .dots i.on { background: var(--p2); box-shadow: 0 0 0 1.5px #2A2350; }
  .crate.shake { animation: shake 360ms ease; }
  @keyframes shake { 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 3px 0; } }
  .pack-lock {
    grid-column: span 3; width: 100%; height: 52px; border: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--paper); color: var(--ink); box-shadow: inset 0 -3px 0 rgb(90 55 20 / 12%);
  }
  .pack-lock .icon { width: 22px; height: 22px; }
  /* the crate button's second place, among the pots, for a phone on its side (the tool column has no room) */
  .pot-crate { display: none; }
  .pack-lock .dots { max-width: none; flex-wrap: nowrap; }

  @media (min-width: 540px) and (min-aspect-ratio: 5/4) {
    .crates { width: 220px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .order-strip { top: 8px; }
  }
  @media (min-width: 540px) and (min-aspect-ratio: 5/4) and (min-height: 641px) {
    /* with the sticker or crate tray open the pots go three to a row (never smaller than a finger), so both trays
       fit beside the Toy */
    .trays:has(.stickers:not([hidden]), .crates:not([hidden])) .pot { width: 48px; }
    .trays:has(.stickers:not([hidden]), .crates:not([hidden])) .tray:not(.stickers, .crates) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 14px; }
    .trays:has(.stickers:not([hidden])) .glyph { width: 48px; height: 48px; }
    .trays:has(.stickers:not([hidden])) .glyphs { gap: 8px; }
  }
  @media (min-width: 540px) and (min-aspect-ratio: 5/4) and (max-height: 640px) {
    /* a phone on its side: the tools keep main's two columns of three (the crate button moves in among the pots,
       into the row Rainbow and Wood leave half empty), and the trays scroll when stickers or crates open too */
    .trays { max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
    /* the scroller clips sideways too: room on the left for the chosen Pot, which steps out of its tray */
    .trays { padding-left: 14px; margin-left: -14px; }
    .trays::-webkit-scrollbar { display: none; }
    .trays > * { flex: none; }
    .tools .tool-crate { display: none; }
    .pot-crate {
      display: grid; place-items: center; grid-column: span 2; width: 100%; height: 48px; border: 0; border-radius: 24px;
      background: var(--card); color: var(--ink); box-shadow: 0 3px 0 var(--card-edge);
    }
    .pot-crate[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
    .pot-crate:active { transform: scale(0.94); }
    .tray.stickers { grid-template-columns: max-content; }
    .glyphs { grid-template-columns: repeat(4, 48px); }
    .pack-lock { grid-column: span 2; width: auto; }
    .crates { width: auto; grid-template-columns: repeat(3, 56px); gap: 6px; padding: 8px; }
    .crate { min-height: 56px; }
    .crate-pots { grid-template-columns: repeat(2, 16px); }
    .crate-pots i { width: 16px; height: 16px; }
    .pack-lock { height: 48px; }
    .order-strip { padding: 4px 8px; }
  }
  .order { max-width: 560px; margin-inline: auto; }
  @media (min-width: 700px) {
    .order { margin-bottom: 22px; }
  }
}

/* The Shelf scene: the Toys on planks in front of a wall. */
@layer components {
  .scene {
    position: relative; flex: 1; min-height: 180px; margin-top: 18px; border: 10px solid var(--wood); border-radius: 24px; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in oklab, var(--p5) 22%, var(--paper)) 0 62%, color-mix(in oklab, var(--wood-light) 70%, var(--paper)) 62% 100%);
    box-shadow: inset 0 8px 18px rgb(90 55 20 / 22%), 0 10px 24px rgb(90 55 20 / 20%);
  }
  .scene[hidden] { display: none; }
  .scene .canvas { touch-action: manipulation; }
  .scene-toggle .when-on { display: none; }
  .scene-toggle[aria-pressed="true"] .when-on { display: inline-grid; }
  .scene-toggle[aria-pressed="true"] .when-off { display: none; }
  .scene-toggle .when-off, .scene-toggle .when-on { place-items: center; }
  .scene-toggle[aria-pressed="false"] { background: var(--p2); box-shadow: 0 3px 0 #C79A00; color: #2A2350; }
}