/* The landing page. One device everywhere, taken from the loop posters: a rounded frame of flat colour
   holding square, flat panels (split blocks, grid paper, mono stamps, big icons bleeding off the edge).
   No drop shadows, no tape. Still icons by default; the few loops that play are only ever on screen. */



.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sec-head .h2 { text-wrap: balance; }


/* ── Frames and panels ───────────────────────────────────────────────────── */
.frame { position: relative; border-radius: var(--radius-l); padding: clamp(10px, 2vw, 28px); display: grid; gap: clamp(10px, 1.6vw, 20px); }
.frame.ink { background: var(--ink); }
.panel { position: relative; isolation: isolate; overflow: hidden; min-width: 0; background: var(--white); }
.panel.sun { background: var(--sun); } .panel.sky { background: var(--sky); } .panel.pink { background: var(--pink); } .panel.grass { background: var(--grass); }
.paper-grid { background-color: var(--white); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; }
.stamp { font: 13px var(--mono); padding: 4px 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); background: var(--white); color: var(--ink); white-space: nowrap; }
.stats { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 14px; margin: 0; }
.stats dt, .stats dd { margin: 0; font: 13px var(--mono); }
.stats dt { opacity: 0.6; }

/* ── Hero: the sticker riot ───────────────────────────────────────────────── */
.hero3 { padding: clamp(12px, 2vw, 24px) 0 0; }
.hvr { position: relative; min-height: min(84vh, 800px); display: grid !important; place-items: center; padding: clamp(80px, 10vw, 130px) 20px !important; overflow: hidden; }
.hvr-crowd { position: absolute; inset: 20px; z-index: 1; }
.rioter { position: absolute; width: clamp(40px, calc(var(--s) * 1%), 120px); rotate: var(--r); cursor: default; }
.rioter .stk { width: 100%; }
.stk { position: relative; display: inline-block; aspect-ratio: 1; }
.stk > img, .stk > .sprite { position: absolute; inset: 0; width: 100%; height: 100%; }
.stk > .sprite { opacity: 0; background-repeat: no-repeat; }
.stk.live > .sprite { opacity: 1; }
.stk.live > img { opacity: 0; }
/* The copy sits in the middle; the Ideas panel has other ways to set it. */
.hvr-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 640px; padding: clamp(20px, 3vw, 36px); background: var(--white); border-radius: 30px 16px 34px 14px / 16px 30px 14px 34px; box-shadow: 0 0 0 2.5px var(--ink), 5px 6px 0 var(--ink); }
.hero-type { margin: 0; }
.wm-r { display: block; width: min(500px, 82vw); height: auto; margin: 2px auto -2%; }
.hvr-copy .lede { font-size: clamp(16px, 1.3vw, 19px); color: var(--mute); max-width: 30em; margin: 12px 0 0; text-wrap: pretty; }
.hvr-copy .btns { margin-top: 20px; justify-content: center; }
.pip { animation: pip 0.45s cubic-bezier(0.3, 1.7, 0.5, 1); }
@media (max-width: 760px) {
  .hvr { min-height: 0; padding: 120px 12px 140px !important; }
  .rioter { width: clamp(44px, calc(var(--s) * 2.2%), 72px); }
  .hvr-copy .btns { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 8px; }
}
/* Stickers that sit still and can be dragged about (the footer loungers, the peekers). */
.st { position: absolute; height: auto; aspect-ratio: 1; rotate: var(--r, 0deg); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.08)); user-select: none; -webkit-user-drag: none; }

/* ── Posters ─────────────────────────────────────────────────────────────── */
.wall { columns: 4 230px; column-gap: clamp(10px, 1.6vw, 20px); }
@media (max-width: 620px) { .wall { columns: 2; } .pc-meta { padding: 8px 8px 8px 8cqi; font-size: 11px; } }
.pc {
  position: relative; break-inside: avoid; margin: 0 0 clamp(10px, 1.6vw, 20px); overflow: hidden; isolation: isolate;
  background-color: var(--c, var(--white)); color: var(--ink); display: flex; flex-direction: column; container-type: inline-size;
}
.pc[hidden] { display: none; }
.pc.sun { --c: var(--sun); } .pc.sky { --c: var(--sky); } .pc.pink { --c: var(--pink); } .pc.grass { --c: var(--grass); } .pc.paper { --c: var(--white); }
.pc.sky, .pc.grass, .pc.pink.t-head { color: var(--white); }
.pc .open { position: absolute; inset: 0; z-index: 4; border: 0; background: transparent; cursor: pointer; }
.pc .open:focus-visible { outline: 3px solid var(--sun); outline-offset: -3px; border-radius: 0; }
.pc .open:hover ~ .art img, .pc .open:hover ~ .big { transform: rotate(-4deg) scale(1.04); }
.pc .art img, .pc .big { transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
/* The title always fits on its longest word: --len is that word's length, set by home.js. */
.pc-title { font-weight: 650; letter-spacing: -0.05em; line-height: 0.92; padding: 8cqi 8cqi 0; position: relative; z-index: 1; font-variation-settings: "opsz" 96;
  font-size: min(15cqi, calc(158cqi / var(--len, 8))); }
.pc-meta { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 12px 8cqi; font: 12px var(--mono); position: relative; z-index: 5; margin-top: auto; }
.pc img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* pile: a jittered 4 × 3 handful, spread over the whole poster */
.t-pile { aspect-ratio: 3 / 4; }
.t-pile .art { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); place-items: center; padding: 4cqi 4cqi 0; }
.t-pile .art img { width: 116%; max-width: none; aspect-ratio: 1; height: auto; }
/* split: white over a block of colour, one icon bleeding off the corner (the coffee loop poster) */
.pc.t-split { aspect-ratio: 3 / 4; background: var(--white); color: var(--ink); }
.t-split .split { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: var(--c); z-index: -1; }
.t-split .stats { padding: 4cqi 8cqi 0; }
.t-split .big { position: absolute; width: 86%; aspect-ratio: 1; right: -12%; bottom: -8%; }
.t-split .pc-meta { color: var(--ink); }
/* paper: grid paper, pixel marks, a stamp and a filename (the lightbulb poster) */
.pc.t-paper { aspect-ratio: 3 / 4; color: var(--ink); background-color: var(--white); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 25% 25%; background-position: -1px -1px; }
.t-paper .mk { position: absolute; background: var(--c); }
.t-paper .stamp { position: absolute; right: 6cqi; top: 7cqi; font-size: 12px; }
.t-paper .big { position: absolute; width: 62%; aspect-ratio: 1; left: 19%; top: 21%; }
.t-paper .fname { margin-top: auto; padding: 0 8cqi; font: 500 min(11cqi, calc(140cqi / var(--len, 8))) var(--mono); letter-spacing: -0.03em; position: relative; z-index: 1; }
.t-paper .pc-meta { margin-top: 0; }
/* head: solid colour, the name big, one icon bleeding off the bottom (the celebrate poster) */
.t-head { aspect-ratio: 4 / 5; }
.t-head .big { position: absolute; width: 92%; aspect-ratio: 1; left: 16%; bottom: -16%; }
/* grid: a neat 3 × 3 specimen sheet */
.t-grid .art { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqi; padding: 6cqi 7cqi 0; }
.t-grid .art img { width: 100%; aspect-ratio: 1; }
.t-grid .pc-title { font-size: min(10cqi, calc(110cqi / var(--len, 8))); }
/* count: a big number, the name, a row of four */
.t-count .num { font: 600 34cqi/0.82 var(--mono); letter-spacing: -0.06em; padding: 8cqi 7cqi 0; }
.t-count .pc-title { font-size: min(10cqi, calc(110cqi / var(--len, 8))); padding-top: 3cqi; }
.t-count .art { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqi; padding: 7cqi 5cqi 0; }
.t-count .art img { width: 100%; aspect-ratio: 1; }

/* The poster filter dock: only shown while the wall is on screen. */
.dock {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 80; display: flex; gap: 6px; align-items: center;
  max-width: calc(100vw - 24px); transition: opacity 0.25s, transform 0.25s;
}
.dock.away { opacity: 0; transform: translate(-50%, 20px); pointer-events: none; }
.dock .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 5px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 2px var(--ink); }
.dock .pills::-webkit-scrollbar { display: none; }
.dock .pill { height: 38px; flex-shrink: 0; }
body[data-variant] .variants { bottom: 80px; }
@media (prefers-reduced-motion: reduce) { .dock, .pc .art img, .pc .big { transition: none; } }

/* Group sheet: previews from the flat sheet, like the browse grid. */
dialog.sheet { width: min(920px, calc(100vw - 24px)); max-height: min(86vh, 900px); border: 0; border-radius: var(--radius-l); padding: 0; background: var(--white); color: var(--ink); }
dialog.sheet::backdrop { background: rgba(22, 22, 22, 0.55); }
dialog.sheet[open] { animation: pop 0.35s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes pop { from { transform: scale(0.94) translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }
.sheet-head { position: sticky; top: 0; display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--white); z-index: 1; border-bottom: 1px solid var(--line); }
.sheet-head .h3 { flex: 1; }
.sheet-head button { border: 0; background: var(--paper-2); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: grid; place-items: center; }
.sheet-head button img { width: 22px; height: 22px; }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 16px; }

/* A preview cell cut from the flat sheet (site/previews/sheet.webp). */
.cell { display: block; width: var(--s, 72px); height: var(--s, 72px); border-radius: 12px; background-color: #f7f4ec; background-repeat: no-repeat; flex-shrink: 0; }
.cellbtn { border: 0; background: #f7f4ec; border-radius: 16px; padding: 8px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 11px var(--mono); color: var(--mute); min-width: 0; transition: transform 0.15s; }
.cellbtn span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cellbtn:hover, .cellbtn:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.cellbtn:active { transform: scale(0.95); }

/* ── Loops ────────────────────────────────────────────────────────────────── */
.loop-posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 28px; border-radius: var(--radius-l); background: var(--sun); }
.lp { position: relative; isolation: isolate; aspect-ratio: 3 / 4; overflow: hidden; display: flex; flex-direction: column; padding: 26px; min-width: 0; }
.lp .h3 { font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -0.045em; line-height: 0.98; position: relative; z-index: 2; }
.lp .big { position: absolute; }
.lp.one { background: var(--white); }
.lp.one .split { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: var(--grass); z-index: -1; }
.lp.one .stats { margin: 14px 0 0; }
.lp.one .big { width: 92%; aspect-ratio: 1; right: -12%; bottom: -6%; }
.lp.two { background-color: var(--white); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 100% 25%, 25% 100%; background-position: 0 -1px, -1px 0; }
.lp.two .mark { position: absolute; background: var(--grass); }
.lp.two .big { width: 60%; aspect-ratio: 1; left: 20%; top: 20%; }
.lp.two .stamp { position: absolute; right: 20px; top: 22px; }
.lp.two .foot { margin-top: auto; font: 500 clamp(22px, 2.2vw, 32px) var(--mono); letter-spacing: -0.02em; position: relative; padding: 0; }
.lp.three { background: var(--sky); }
.lp.three .h3 { color: var(--white); }
.lp.three .big { width: 96%; aspect-ratio: 1; left: 12%; bottom: -14%; }
@media (max-width: 900px) { .loop-posters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 12px; } .lp.three { display: none; } }
@media (max-width: 620px) { .loop-posters { grid-template-columns: minmax(0, 1fr); } .lp.two { display: none; } .lp { padding: 22px; } }

.shelf { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.shelf-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
@media (max-width: 620px) { .shelf-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shelf-row button { position: relative; border: 0; background: var(--white); border-radius: 18px; padding: 10px; cursor: pointer; aspect-ratio: 1; display: grid; place-items: center; }
.shelf-row button img, .shelf-row button .sprite { width: 100%; height: 100%; grid-area: 1 / 1; }
.shelf-row button .sprite { opacity: 0; }
.shelf-row button.on .sprite { opacity: 1; }
.shelf-row button.on img { opacity: 0; }
.shelf-row button::after { content: ""; position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.shelf-row button.on::after { background: var(--grass); }
.shelf-row button:focus-visible { outline-offset: 2px; }

/* ── People: the builder playing itself, and the tones ───────────────────── */
/* Every box here has a fixed size, so nothing moves while the demo plays. */
.people-frame { background: var(--pink); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.8fr); grid-template-areas: "stage panel tones" "code code code"; }
.b-stage { grid-area: stage; } .b-panel { grid-area: panel; } .people-frame .tones { grid-area: tones; } .b-codep { grid-area: code; }
@media (max-width: 1080px) { .people-frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage panel" "code code" "tones tones"; } }
@media (max-width: 680px) { .people-frame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "panel" "code" "tones"; } }
.b-stage { background: var(--tile, #fff1c9); transition: background-color 0.6s; display: grid; grid-template-rows: auto 56px; justify-items: center; align-content: center; gap: 14px; padding: clamp(16px, 2.2vw, 26px); }
.b-badge { position: absolute; left: 14px; top: 14px; z-index: 2; font: 13px var(--mono); background: var(--white); padding: 4px 10px; border-radius: 999px; }
.b-avatar { position: relative; width: min(100%, 300px); aspect-ratio: 1; animation: breathe 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.b-avatar::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 1%; height: 6%; z-index: -1; border-radius: 50%; background: rgba(40, 20, 10, 0.16); filter: blur(4px); }
@keyframes breathe { 50% { scale: 1.012 0.992; } }
@media (prefers-reduced-motion: reduce) { .b-avatar { animation: none; } }
.b-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-avatar img[hidden] { display: none; }
.b-avatar.squish { animation: squish 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes squish { 0% { transform: scale(1, 1); } 30% { transform: scale(1.05, 0.94); } 60% { transform: scale(0.98, 1.03); } 100% { transform: scale(1, 1); } }
/* A new part drops in from above and settles. */
.b-avatar img.drop { animation: drop 0.55s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes drop { 0% { translate: 0 -9%; scale: 1.08; opacity: 0; } 55% { opacity: 1; } 100% { translate: 0 0; scale: 1; } }
.crowd img.drop { animation: pip 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes pip { 0% { scale: 0.86; } 100% { scale: 1; } }
/* The last four looks, newest first. */
.b-strip { display: grid; grid-template-columns: repeat(4, 56px); gap: 8px; }
.b-strip .mini { position: relative; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(22, 22, 22, 0.08); }
.b-strip .mini img { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-strip .mini.drop { animation: pip 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.b-strip .mini:not(:first-child) { opacity: 0.75; }
/* The code panel: the JSX for whatever's on the stage, one prop a line, the newest one lit up. */
.b-codep { background: var(--ink); color: #f3efe6; display: flex; flex-direction: column; }
.b-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 0; border-bottom: 1px solid #2c2c2c; font: 13px var(--mono); }
.b-bar b { font-weight: 400; padding: 11px 18px; background: #232323; box-shadow: inset 0 -2px 0 var(--pink); }
.b-live { display: inline-flex; align-items: center; gap: 6px; color: #9aa6b8; }
.b-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--grass); box-shadow: 0 0 0 3px rgba(37, 179, 77, 0.25); }
.b-code { margin: 0; height: calc(9 * 1.7em + 26px); overflow: hidden; padding: 13px 0; font: 14px/1.7 var(--mono); white-space: pre; counter-reset: bl; }
.b-code .ln { display: block; padding: 0 18px 0 0; border-left: 3px solid transparent; }
.b-code .ln::before { counter-increment: bl; content: counter(bl); display: inline-block; width: 2.4ch; margin: 0 14px 0 10px; text-align: right; color: #555; }
.b-code .ln.new { background: rgba(242, 102, 142, 0.16); border-left-color: var(--pink); animation: lnin 0.5s ease-out; }
.b-code .ln.dim { color: #777; }
@keyframes lnin { from { background: rgba(242, 102, 142, 0.45); } }
.b-code .t { color: #8cc8ff; } .b-code .s { color: #ffd166; }
@media (max-width: 620px) { .b-code { font-size: 12.5px; } }
/* Person / Pet switch. */
.b-kind { display: inline-grid; grid-auto-flow: column; background: var(--paper-2); border-radius: 999px; padding: 3px; font-size: 14px; font-weight: 600; }
.b-kind[hidden] { display: none; }
.b-kind span { padding: 5px 12px; border-radius: 999px; transition: background-color 0.3s, color 0.3s; }
.b-kind span[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.b-kind span.press { scale: 0.92; }
.b-panel { padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; gap: 14px; user-select: none; }
.b-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.b-panel .h3 { font-size: 22px; }
.b-shuffle { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--sun); font-size: 14px; transition: transform 0.12s; }
.b-shuffle img { width: 24px; height: 24px; }
.b-shuffle.press { transform: scale(0.9) rotate(-4deg); }
.b-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 4px; height: 76px; align-content: flex-start; overflow: hidden; }
/* The ink pill slides behind the picked tab. */
.b-ind { position: absolute; z-index: 0; border-radius: 999px; background: var(--ink); transition: left 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), top 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), width 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
.b-tabs button { position: relative; z-index: 1; border: 0; background: transparent; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 15px; color: var(--mute); transition: background-color 0.2s, color 0.2s; }
.b-tabs button[aria-selected="true"] { color: var(--white); }
.b-tabs button.press { scale: 0.92; }
.b-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.b-chips > * { aspect-ratio: 0.84; min-height: 0; overflow: hidden; }
.b-chips button { position: relative; border: 0; background: var(--paper); border-radius: 14px; padding: 0 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; font: 11px var(--mono); color: var(--mute); overflow: hidden; transition: transform 0.14s, box-shadow 0.2s; min-width: 0; }
.b-chips .lab { max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-chips .mini-av { position: relative; flex: 1 1 0; min-height: 0; width: 100%; display: block; }
.b-chips .mini-av img { position: absolute; inset: 4% 6% 0; width: 88%; height: 96%; object-fit: contain; }
.b-chips .ghost { border-radius: 14px; background: var(--paper); opacity: 0.4; }
.b-chips button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.b-chips button.press { transform: scale(0.9); }
.b-cursor { position: absolute; left: 0; top: 0; width: 28px; height: 28px; z-index: 9; pointer-events: none; opacity: 0; transition: opacity 0.3s, scale 0.1s ease-out; transform-origin: 3px 3px; will-change: transform; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); }
.b-cursor.on { opacity: 1; }
.b-cursor.click { scale: 0.88; }
.b-ripple { position: absolute; z-index: 8; width: 40px; height: 40px; margin: -16px 0 0 -16px; border-radius: 50%; border: 2.5px solid var(--ink); pointer-events: none; animation: ripple 0.55s ease-out forwards; }
@keyframes ripple { from { scale: 0.2; opacity: 0.9; } to { scale: 1.4; opacity: 0; } }

.tones { padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; gap: 14px; }
.tones-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tones .h3 { font-size: 22px; }
.swatches { display: flex; gap: 6px; }
.swatches button { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12); transition: transform 0.14s; }
.swatches button.press { transform: scale(0.85); }
.swatches button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.swatches .auto { background: conic-gradient(#f2c7a5 0 25%, #c98d63 0 50%, #9a603c 0 75%, #6b4029 0); }
.crowd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; align-content: start; }
.crowd img { width: 100%; aspect-ratio: 1; }
@media (max-width: 1080px) { .crowd { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
@media (max-width: 680px) { .crowd { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .b-avatar img.drop, .crowd img.drop, .b-strip .mini.drop, .b-ripple { animation: none; } }

/* ── All icons: search on top, groups down the side, the grid, an inspector ── */
.all-app { display: grid; grid-template-columns: 220px minmax(0, 1fr) 270px; grid-template-areas: "search search search" "side main insp"; gap: 18px 22px; padding: clamp(14px, 2vw, 24px); align-items: start; }
.search { grid-area: search; display: flex; align-items: center; gap: 12px; background: var(--white); border-radius: 999px; padding: 0 10px 0 14px; height: 62px; box-shadow: inset 0 0 0 2.5px var(--ink); cursor: text; }
.search:focus-within { box-shadow: inset 0 0 0 2.5px var(--ink), 0 0 0 5px var(--sun); }
.search img { width: 38px; height: 38px; flex-shrink: 0; rotate: -8deg; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; letter-spacing: -0.02em; outline: none; color: var(--ink); }
.search input::placeholder { color: #a39e92; font-weight: 400; }
.search input::-webkit-search-cancel-button { display: none; }
.search .count { font: 13px var(--mono); color: var(--ink); background: var(--sun); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.search .count:empty { display: none; }
.search kbd { font: 13px var(--mono); border-radius: 8px; padding: 4px 10px; background: var(--paper); box-shadow: inset 0 -2px 0 var(--line); color: var(--mute); margin-right: 4px; }
/* Groups: a quiet list, the picked one inked in. */
.all-side { grid-area: side; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 96px; }
.side-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 0; background: transparent; border-radius: 12px; padding: 5px 10px 5px 6px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; text-align: left; transition: background-color 0.15s, translate 0.15s; }
.side-item .cell { border-radius: 8px; background-color: transparent; }
.side-item .ic { width: 28px; text-align: center; font-size: 18px; color: var(--pink); }
.side-item .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item .n { font: 12px var(--mono); color: var(--mute); }
.side-item:hover { background: var(--paper); translate: 3px 0; }
.side-item[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.side-item[aria-pressed="true"] .n { color: var(--sun); }
.side-item[aria-pressed="true"] .cell { background-color: var(--white); }
/* The grid: icons only, no labels. Pick one to see it on the right. */
.all-main { grid-area: main; min-width: 0; }
.all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.tile { border: 0; aspect-ratio: 1; padding: 0; border-radius: 18px; background: #f7f4ec; cursor: pointer; display: grid; place-items: center; transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.15s, box-shadow 0.15s; }
.tile .cell { --s: 64px; background-color: transparent; }
.tile:hover { transform: translateY(-3px) rotate(-3deg); background: #fff3cf; }
.tile:active { transform: scale(0.92); }
.tile[aria-pressed="true"] { background: #fff3cf; box-shadow: inset 0 0 0 2.5px var(--ink); }
.all-note { margin: 14px 0 0; font: 14px var(--mono); color: var(--mute); }
.all-note:empty { display: none; }
/* Pages: back, numbers, next, as small clay pills under the grid. */
.pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
/* With one page the buttons are hidden but keep their space, so the browser stays the same height. */
.pager { min-height: 38px; }
.pager[hidden] { display: flex; visibility: hidden; }
.pager button { min-width: 38px; height: 38px; padding: 0 10px; border: 0; border-radius: 999px; background: #f4efe4; color: var(--ink); font: 650 15px var(--display); cursor: pointer; box-shadow: 0 2px 0 #e2d9c5; }
.pager button:hover:not([disabled]):not([aria-current]) { background: #fbe9a8; }
.pager button[aria-current="page"] { background: var(--ink); color: var(--white); box-shadow: none; }
.pager button[disabled] { opacity: 0.35; cursor: default; }
.pager .gap { padding: 0 2px; color: var(--mute); }
/* A looping preview in the inspector sits where the still would. */
.insp-art .sprite { display: block; }
@media (max-width: 620px) { .insp-art .sprite { width: 80px !important; height: 80px !important; } }
/* The inspector: the picked icon big, its tags, and the copy buttons. */
.all-insp { grid-area: insp; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; background: var(--paper); border-radius: 22px; padding: 16px; }
.all-insp[hidden] { display: none; }
.insp-art { display: grid; place-items: center; aspect-ratio: 1.2; background: var(--sun); border-radius: 16px; }
.insp-art .cell { --s: 128px; background-color: transparent; border-radius: 22px; }
.insp-name { font-size: 26px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.05; }
.insp-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font: 12px var(--mono); padding: 3px 9px; border-radius: 999px; background: var(--white); color: var(--mute); }
.tag.loop { background: #dff3e3; color: #146b2e; } .tag.tone { background: #fbe1d0; color: #8a4320; }
.insp-jsx { display: block; font: 12.5px/1.5 var(--mono); background: var(--ink); color: #f3efe6; padding: 8px 12px; border-radius: 10px; overflow-wrap: anywhere; }
.insp-jsx b { font-weight: 400; color: #8cc8ff; } .insp-jsx i { font-style: normal; color: #ffd166; }
.insp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1080px) {
  .all-app { grid-template-columns: minmax(0, 1fr) 240px; grid-template-areas: "search search" "side side" "main insp"; }
  .all-side { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 4px; margin: 0 calc(-1 * clamp(14px, 2vw, 24px)); padding: 0 clamp(14px, 2vw, 24px); }
  .all-side::-webkit-scrollbar { display: none; }
  .side-item { flex-shrink: 0; background: var(--paper); border-radius: 999px; padding: 4px 12px 4px 5px; }
  .side-item:hover { translate: 0 -2px; }
}
@media (max-width: 680px) {
  .all-app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "side" "insp" "main"; gap: 12px; }
  .search { height: 54px; } .search kbd { display: none; } .search img { width: 32px; height: 32px; }
  .all-insp { position: static; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art name" "art tags" "btns btns"; gap: 8px 12px; padding: 12px; }
  .insp-art { grid-area: art; aspect-ratio: 1; } .insp-art .cell { --s: 80px; }
  .insp-name { grid-area: name; font-size: 20px; align-self: end; } .insp-tags { grid-area: tags; align-self: start; }
  .insp-jsx { display: none; } .insp-btns { grid-area: btns; } .insp-btns .btn { flex: 1; }
  .all-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; } .tile .cell { --s: 52px; } .tile { border-radius: 14px; }
}

/* ── End: the whole box of clay ───────────────────────────────────────────── */
.end-sec { padding-top: clamp(90px, 10vw, 140px); }
/* The copy on the left; on the right a packing slip, taped on at a slight angle, listing what's inside. */
.box-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: center; gap: clamp(24px, 4vw, 60px); }
.box-cta .btns { justify-self: start; margin-top: 24px; }
.cta .end-p { margin: 14px 0 0; max-width: 26em; font-size: 18px; }
.slip { position: relative; justify-self: center; width: min(100%, 380px); padding: 26px 24px 30px; rotate: 2.5deg; background: #fffdf7; border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), 0 22px 30px -18px rgba(80, 50, 10, 0.55);
  /* A torn bottom edge. */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 8px 0, #000 7px, transparent 7.5px) bottom left / 16px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 8px 0, #000 7px, transparent 7.5px) bottom left / 16px 10px repeat-x; }
.slip-tape { position: absolute; top: -12px; left: 50%; width: 110px; height: 28px; translate: -50% 0; rotate: -4deg; background: rgba(255, 236, 170, 0.75); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.slip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 2px dashed #e4dccb; }
.slip-head b { font-size: 22px; font-weight: 780; letter-spacing: -0.03em; }
.slip-head .mono { font-size: 12px; color: var(--mute); }
.slip ul { list-style: none; margin: 10px 0 0; padding: 0; }
.slip li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0e9da; font-size: 17px; }
.slip li img { width: 26px; height: 26px; }
.slip li b { font: 600 15px var(--mono); }
.slip-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--mute); }
.slip-foot img { width: 24px; height: 24px; }
@media (max-width: 760px) {
  .box-cta { grid-template-columns: minmax(0, 1fr); }
  .slip { margin-top: 10px; rotate: 1.5deg; }
}

/* ── The clay desk diorama behind the riot ─────────────────────────────── */
.hero-frame.paint::before { display: none; }
.diorama { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }
.hvr-crowd { z-index: 2; }
.hvr-copy { z-index: 3; }

/* ── Stickers sitting in the page margins, where there's room ───────────── */
.margin-st { display: none; }
@media (min-width: 1420px) { .margin-st { display: block; position: absolute; width: 96px; z-index: 0; pointer-events: none; } .margin-st.l { left: calc(50% - 720px); rotate: -10deg; } .margin-st.r { right: calc(50% - 720px); rotate: 9deg; } }
/* ── Hero: the clay desk, with the phrase built into the scene ─────────── */
/* The scene is 16:9 and sits at the top of a slightly taller frame. The phrase "this site is made of clay" is
   built into the clip, so the page only adds the lede and buttons on the strip below the mat; the frame
   carries the scene's backdrop on below it (home.js sets --edge for each backdrop). */
.hvr { aspect-ratio: 16 / 10.5; min-height: 0; display: block !important; padding: 0 !important; }
.dio-box { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--floor, none) 0 100% / 100% 16% no-repeat, var(--edge, #ffffff); }
.dio-box .diorama { inset: 0 0 auto; height: auto; aspect-ratio: 16 / 9; }
.hvr-copy { position: absolute; inset: 0; z-index: 3; display: block; max-width: none; padding: 0; border-radius: 0; background: none !important; box-shadow: none !important; pointer-events: none; }
.hvr-copy > * { pointer-events: auto; }
.hvr-foot { position: absolute; left: 0; right: 0; top: 74%; display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
.hvr-copy .lede { color: var(--ink); font-weight: 500; font-size: clamp(14px, 1.2vw, 18px); max-width: 34em; margin: 0; text-wrap: balance; }
.hvr-copy .btns { margin-top: clamp(8px, 1.2vw, 16px); }
/* Narrow screens: the scene in its own window, zoomed in on the phrase, and the words below on the yellow. */
@media (max-width: 760px) {
  .hvr { aspect-ratio: auto; display: flex !important; flex-direction: column; align-items: center; padding: 28px 14px 142px !important; }
  .dio-box { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; margin: 0; border-radius: 26px 16px 30px 14px / 16px 26px 14px 30px; box-shadow: 0 0 0 2.5px var(--ink); }
  .dio-box .diorama { inset: 0; height: 100%; aspect-ratio: auto; scale: 1.55; translate: var(--mtx, 0) var(--mty, -4%); }
  .hvr-copy { display: contents; }
  .hvr-foot { position: static; padding: 0; margin-top: 22px; }
  .hvr-copy .lede { font-size: 16px; text-align: center; }
  /* The stickers make one row along the bottom. */
  .rioter { top: auto !important; bottom: -4px; left: var(--mx) !important; width: 62px; }
}

/* ── Hero decoration: six stickers on the strip below the scene ─────────── */
.rioter { position: absolute; width: clamp(56px, calc(var(--s) * 1%), 150px); rotate: var(--r); filter: drop-shadow(0 10px 8px rgba(40, 30, 10, 0.16)); }
/* Stickers that would sit on a prop in this scene stay out of it (home.js checks each scene). */
.rioter.clash { display: none; }

/* ── Die-cut stickers stuck over the hero frame's edges ────────────────── */
/* Each is a vinyl sticker: a fat white die-cut border that follows its shape, a clay icon popping out past
   the left end, a diagonal sheen, and a corner just starting to peel. Stuck on at an angle, half over the
   frame's edge. */
.hero3 { overflow-x: clip; }
.hero3 .wrap { position: relative; }
.hero-tags { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.htag { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px 10px 52px; border-radius: 999px; white-space: nowrap;
  font: 800 clamp(16px, 1.6vw, 22px)/1 var(--display); letter-spacing: -0.025em; color: var(--ink); background-color: var(--c);
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 38%, rgba(255, 255, 255, 0) 46%), linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 0 0 5px var(--white), 0 0 0 6.5px rgba(22, 22, 22, 0.08), 0 14px 20px -10px rgba(40, 30, 10, 0.5); rotate: var(--r); }
/* The icon sits on the sticker's left end and spills over it. */
.htag img { position: absolute; left: -14px; top: 50%; translate: 0 -54%; width: 62px; height: 62px; filter: drop-shadow(0 6px 5px rgba(40, 30, 10, 0.3)); }
/* The peeling corner: a curl of white backing at the right end. */
.htag::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 0 0 999px 0;
  background: linear-gradient(135deg, transparent 50%, #f1ece0 50%, #fff 75%); box-shadow: -3px -3px 6px -3px rgba(0, 0, 0, 0.25); }
.t-icons { --c: #ffb9cd; --r: -7deg; left: clamp(-10px, -0.8vw, -4px); top: 2px; }
.t-emojis { --c: #b6ddff; --r: 5deg; right: 6%; top: 0; }
.t-stickers { --c: #ffd84d; --r: -5deg; right: clamp(-16px, -1.2vw, -6px); top: 63%; }
@media (max-width: 760px) {
  .htag { font-size: 14px; padding: 6px 12px 7px 38px; box-shadow: 0 0 0 4px var(--white), 0 10px 14px -8px rgba(40, 30, 10, 0.5); }
  .htag img { width: 44px; height: 44px; left: -10px; }
  .htag::after { width: 14px; height: 14px; }
  .t-icons { left: 6px; top: -4px; }
  .t-emojis { right: 4px; top: -6px; }
  .t-stickers { top: auto; bottom: 90px; right: auto; left: 10px; }
}

/* ── The gift box, back on top of the box of clay section ──────────────── */
.box-cta .peek { z-index: 8; rotate: 9deg; filter: drop-shadow(0 14px 12px rgba(80, 40, 10, 0.3)); }
@media (max-width: 760px) { .box-cta .peek { width: 96px; top: -54px; right: 18px; } }

/* ── The free 60: on a shelf ───────────────────────────────────────────── */
.free-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); }
.free-cell { display: grid; place-items: center; aspect-ratio: 1; }
.free-cell img { width: 92%; height: auto; transition: translate 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.free-cell:hover img { translate: 0 -6%; }
.free-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(18px, 2.5vw, 30px); }
.free-note { font-size: 15px; color: var(--mute); }
@media (max-width: 760px) { .free-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* On a shelf: six rows on a cream wall, each row standing on a clay plank. */
.free-body { isolation: isolate; padding: clamp(18px, 3vw, 36px); border-radius: 30px; background: #fbf4e4; box-shadow: inset 0 0 0 2.5px var(--ink), 5px 6px 0 var(--ink); }
.free-grid { row-gap: 22px; }
.free-cell { position: relative; }
.free-cell::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -8px; height: 9px; z-index: -1; border-radius: 6px;
  background: linear-gradient(180deg, #e8a868, #c97f43); box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.45), 0 4px 6px -3px rgba(80, 40, 10, 0.45); }
.free-cell img { filter: drop-shadow(0 6px 4px rgba(60, 30, 5, 0.25)); }

/* ── Hero buttons: a small pink pill to buy, a plain link to see them all ── */
.hvr-foot .btn.solid { min-height: 44px; padding: 0 20px; font-size: 16px; }
.hvr-foot .btn.link { min-height: 44px; font-size: 16px; color: var(--ink); }
@media (max-width: 760px) { .hvr-copy .btns { display: flex; justify-content: center; gap: 14px; } }
/* On the sun-yellow ending, the link's underline is ink so it shows. */
.cta .btn.link { --u: var(--ink); color: var(--ink); }

/* On the coiled clay floor the words get a soft pale halo (not a card), so they read over the stripes. */
.hvr-copy .lede { font-weight: 600; text-shadow: 0 0 6px rgba(255, 253, 240, 0.95), 0 0 14px rgba(255, 253, 240, 0.85), 0 0 24px rgba(255, 253, 240, 0.6); }
.hvr-foot .btn.link { --u: var(--ink); text-shadow: 0 0 6px rgba(255, 253, 240, 0.95), 0 0 14px rgba(255, 253, 240, 0.8); }
@media (max-width: 760px) { .hvr-copy .lede, .hvr-foot .btn.link { text-shadow: none; } }

/* ── The group list: no taller than the grid beside it ─────────────────── */
/* home.js keeps --side-h at the height of the grid and its pages; the list scrolls inside that, with a soft
   fade at the bottom to show there's more. */
@media (min-width: 1081px) {
  .all-side { max-height: max(320px, var(--side-h, 520px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d8cfbb transparent; padding-right: 4px;
    -webkit-mask: linear-gradient(#000 calc(100% - 36px), transparent); mask: linear-gradient(#000 calc(100% - 36px), transparent); padding-bottom: 28px; }
}

/* The play-the-loop button, in the corner of the preview for icons that move. */
.insp-art { position: relative; }
.insp-play { position: absolute; right: 8px; bottom: 8px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ink);
  font: 600 13px var(--display); cursor: pointer; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); }
.insp-play::before { content: "▶"; font-size: 10px; margin-right: 6px; }
.insp-play[aria-pressed="true"]::before { content: "■"; }
.insp-play:hover { background: var(--white); }

/* Loops in the preview sit on the same cream tile as the still previews. */
.insp-art .insp-loop { border-radius: 22px; }

/* Browsing-size previews are the watermarked 256px images, on the same cream tile they're flattened onto. */
.cell.hi { background-color: #f7f4ec; }