@font-face{font-family:"Russo One";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/russo-one.8a6b754cd3.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/manrope.8c2def024c.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/*
  SoundButtons: 27 sound-button styles (pair with shared/buttons.js).

  THEMING CONTRACT
  Every style reads its colours from six custom properties. Set them on the
  mount container (or any ancestor, or on the returned `root`); each style has
  its own default look as the fallback, so leaving them unset is fine.

    --sb-main    the body colour (dome, jelly, balloon, box, bulb...)
    --sb-deep    shadow / side of main (darker, same hue)
    --sb-light   highlight of main (lighter, same hue)
    --sb-accent  a contrasting second colour (LEDs, ink, sprinkles, ball...)
    --sb-ink     outlines, eyes, text, dark parts (must be dark)
    --sb-paper   light surfaces (paper, keys, faces, label background)

  Optional: --sb-ring  focus ring colour (defaults to --sb-ink).
  Inside a style these are read as --_m --_d --_l --_a --_k --_p; extra shades
  are derived with color-mix(in oklab, ...). Particles use the same tokens.

  Size: the art is em-based (14em = button width) and the font size comes from
  container units, so the button fills the width of whatever holds it
  (works from ~90px to ~240px). Give the container a definite width.
*/

/* ───────── root + press target ───────── */
.sbx {
  --sbn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sbn-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative; display: block; width: 100%;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}
.sbx > .sb, .sbx > .bit { font-size: calc(100cqw / 14); }

.sb {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; height: auto;
  padding: 0; margin: 0; border: 0; background: none; color: inherit;
  font-family: inherit; line-height: 1;
  cursor: pointer; border-radius: 28%; outline: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .3s cubic-bezier(.2,.9,.25,1);
}
.sb * { pointer-events: none; }
.sb:focus-visible { outline: 3px solid var(--sb-ring, var(--_k)); outline-offset: 5px; }
@media (hover: hover) { .sb:hover { transform: translateY(-3px); } }

.sb-idle, .art { position: absolute; inset: 0; display: block; }
.art span, .art i, .art b, .art svg, .art canvas { position: absolute; display: block; }
.art svg { overflow: visible; }
.art svg.sb-svg { left: 0; top: 0; width: 100%; height: 100%; }

/* idle motion: cheap, transform-only, paused offscreen (.sb-off) */
.sb-idle { animation: none 4s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.sb-idle-bob { animation-name: sb-bob; animation-duration: 3.4s; }
.sb-idle-sway { animation-name: sb-sway; animation-duration: 4.2s; }
.sb-idle-breathe { animation-name: sb-breathe; animation-duration: 3.2s; }
.sb-idle-hop { animation-name: sb-hop; animation-duration: 1.6s; animation-timing-function: steps(1, end); animation-direction: normal; }
.sb-idle-rattle { animation-name: sb-rattle; animation-duration: 5.5s; animation-timing-function: linear; animation-direction: normal; }
.sbx.sb-off .sb-idle { animation-play-state: paused; }
@keyframes sb-bob { from { transform: translateY(0); } to { transform: translateY(-2.2%); } }
@keyframes sb-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes sb-breathe { from { transform: scale(1, 1); } to { transform: scale(1.018, .985); } }
@keyframes sb-hop { 0%, 60%, 100% { transform: translateY(0); } 70%, 90% { transform: translateY(-2.5%); } }
@keyframes sb-rattle {
  0%, 84%, 100% { transform: rotate(0); }
  86% { transform: rotate(-2.4deg); } 88% { transform: rotate(2.2deg); }
  90% { transform: rotate(-1.6deg); } 92% { transform: rotate(1deg); } 94% { transform: rotate(0); }
}

/* optional label (opts.label) */
.sb-label {
  position: relative; overflow: hidden; display: block;
  width: max-content; max-width: 100%; margin: .45rem auto 0;
  padding: .3em .9em .36em; border-radius: 999px;
  font: 800 .95rem/1.2 "Nunito", sans-serif; letter-spacing: .01em; text-align: center;
  white-space: nowrap; text-overflow: ellipsis;
  background: var(--_p); color: var(--_k);
  box-shadow: inset 0 0 0 2px var(--_m);
}
.sb-bar {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; display: block;
  background: var(--_m); transform-origin: 0 50%; transform: scaleX(0);
}

/* ───────── particles (inherit the style's tokens) ───────── */
.bit { position: absolute; left: 0; top: 0; display: block; pointer-events: none; z-index: 4; will-change: transform, opacity; }
.bit svg { width: 100%; height: 100%; display: block; }
.bit-spark { width: 1.1em; height: 1.1em; background: var(--_a); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.bit-star { width: 1.2em; height: 1.2em; background: var(--_p); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
.bit-jelly { width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--_p) 95%, transparent), color-mix(in oklab, var(--_m) 85%, transparent) 50%, color-mix(in oklab, var(--_d) 90%, transparent)); }
.bit-ring { width: 5.2em; height: 5.2em; border-radius: 50%; border: .2em solid color-mix(in oklab, var(--_p) 85%, transparent); }
.bit-air { width: 1.5em; height: .26em; border-radius: 1em; background: color-mix(in oklab, var(--_p) 95%, transparent); }
.bit-squeak { width: 1.4em; height: .7em; border: .22em solid var(--_d); border-color: var(--_d) transparent transparent; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.bit-clay { width: .8em; height: .7em; border-radius: 45% 55% 50% 50%; background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--_m) 60%, var(--_l)), var(--_d)); }
.bit-crumb { width: .8em; height: .62em; border-radius: 30% 55% 40% 60%; }
.bit-line { width: 1.9em; height: .32em; border-radius: .2em; background: var(--_k); }
.bit-note { width: 1.9em; height: 1.9em; color: var(--_d); }
.bit-dust { width: 1.1em; height: 1.1em; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--_p) 95%, transparent), transparent 70%); }
.bit-sugar { width: .75em; height: .75em; border-radius: 50%; background: radial-gradient(circle, var(--_p) 30%, transparent 72%); }
.bit-click { width: 1.2em; height: .24em; border-radius: .2em; background: color-mix(in oklab, var(--_a) 55%, white); }
.bit-drop { width: .8em; height: 1em; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 35%, color-mix(in oklab, var(--_k) 12%, white), color-mix(in oklab, var(--_k) 60%, white) 60%, var(--_k)); }
.bit-spr { width: 1em; height: .36em; border-radius: 1em; }
.bit-px { width: .75em; height: .75em; }
.bit-tri { width: 1.1em; height: 1.1em; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bit-ring2 { width: 4.2em; height: 1.4em; border-radius: 50%; border: .16em solid color-mix(in oklab, var(--_p) 80%, transparent); }
.bit-hit { width: 1.3em; height: .26em; border-radius: .2em; background: var(--_p); }
.bit-puff { width: 1.7em; height: 1.7em; border-radius: 50%; background: radial-gradient(circle at 42% 40%, color-mix(in oklab, var(--_p) 92%, transparent) 0, color-mix(in oklab, var(--_p) 55%, transparent) 45%, transparent 70%); }
.bit-arc { width: 1.1em; height: 3em; border-radius: 50%; border: .3em solid transparent; border-right-color: var(--_a); }
.bit-conf { width: .9em; height: .45em; border-radius: .12em; }
.bit-goo { width: 1.1em; height: 1.2em; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, var(--_l), var(--_m) 55%, var(--_d)); }
.bit-ink { width: .8em; height: .8em; border-radius: 50%; background: var(--_a); }
.bit-dash { width: 1.4em; height: .24em; border-radius: .2em; background: var(--_p); }
.bit-bean { width: .95em; height: 1.1em; border-radius: 50%; background: radial-gradient(circle at 38% 32%, color-mix(in oklab, var(--_a) 45%, white), var(--_a) 60%); }

/* ───────── 01 Аркадна куполна ───────── */
.sb-s01 { --_m: var(--sb-main, #e0242b); --_d: var(--sb-deep, #8a0c14); --_l: var(--sb-light, #ff9a8f); --_a: var(--sb-accent, #ffc93d); --_k: var(--sb-ink, #2b303a); --_p: var(--sb-paper, #fff7cf); }
.sb-s01 .a1-side { left: .6em; top: 6.6em; width: 12.8em; height: 7.2em; border-radius: 50%;
  background: linear-gradient(90deg, color-mix(in oklab, var(--_k) 50%, black), var(--_k) 22%, color-mix(in oklab, var(--_k) 82%, white) 50%, color-mix(in oklab, var(--_k) 85%, black) 78%, color-mix(in oklab, var(--_k) 45%, black));
  box-shadow: 0 1.1em 1.4em -.5em color-mix(in oklab, color-mix(in oklab, var(--_k) 50%, black) 65%, transparent); }
.sb-s01 .a1-base { left: .6em; top: 5.4em; width: 12.8em; height: 7.2em; border-radius: 50%;
  background: radial-gradient(ellipse 60% 60% at 50% 40%, color-mix(in oklab, var(--_k) 72%, white) 0, color-mix(in oklab, var(--_k) 86%, white) 55%, var(--_k) 100%);
  box-shadow: inset 0 .2em .15em rgba(255,255,255,.28), inset 0 -.25em .4em rgba(0,0,0,.35); }
.sb-s01 .a1-well { left: 2.7em; top: 6.4em; width: 8.6em; height: 4.6em; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, color-mix(in oklab, var(--_k) 10%, black) 0, color-mix(in oklab, var(--_k) 45%, black) 70%, color-mix(in oklab, var(--_k) 80%, black) 100%);
  box-shadow: inset 0 .45em .6em rgba(0,0,0,.85), 0 .12em .05em rgba(255,255,255,.14); }
.sb-s01 .a1-glow { left: 2.7em; top: 6.4em; width: 8.6em; height: 4.6em; border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse at 50% 55%, color-mix(in oklab, var(--_a) 65%, white), color-mix(in oklab, var(--_m) 55%, transparent) 45%, transparent 75%); }
.sb-s01 .a1-skirt { left: 3.1em; top: 4.4em; width: 7.8em; height: 6.2em;
  border-radius: 0 0 3.9em 3.9em / 0 0 1.9em 1.9em;
  background: linear-gradient(180deg, transparent 55%, color-mix(in oklab, var(--_d) 40%, transparent)),
    linear-gradient(90deg, color-mix(in oklab, var(--_d) 85%, black) 0, color-mix(in oklab, var(--_m) 60%, var(--_d)) 16%, var(--_m) 38%, color-mix(in oklab, var(--_m) 50%, var(--_l)) 52%, color-mix(in oklab, var(--_m) 82%, var(--_d)) 70%, var(--_d) 100%); }
.sb-s01 .a1-top { left: 3.1em; top: 2.5em; width: 7.8em; height: 3.8em; border-radius: 50%;
  background: radial-gradient(ellipse 70% 75% at 42% 34%, var(--_l) 0, color-mix(in oklab, var(--_m) 75%, var(--_l)) 32%, var(--_m) 66%, color-mix(in oklab, var(--_m) 45%, var(--_d)) 100%);
  box-shadow: inset 0 -.35em .45em color-mix(in oklab, var(--_d) 50%, transparent), inset 0 .18em .2em color-mix(in oklab, var(--_l) 60%, transparent); }
.sb-s01 .a1-shine { left: 16%; top: 12%; width: 42%; height: 34%; border-radius: 50%; transform: rotate(-10deg);
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%); }
.sb-s01 .a1-led { width: .6em; height: .6em; border-radius: 50%; background: color-mix(in oklab, var(--_k) 55%, black);
  box-shadow: inset 0 .1em .12em rgba(0,0,0,.7), 0 .07em .02em rgba(255,255,255,.12); }
.sb-s01 .a1-led b { inset: 0; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 40% 35%, var(--_p), var(--_a) 55%, color-mix(in oklab, var(--_a) 60%, var(--_m)));
  box-shadow: 0 0 .45em .08em color-mix(in oklab, var(--_a) 80%, transparent); }

/* ───────── 02 Желе ───────── */
.sb-s02 { --_m: var(--sb-main, #86d628); --_d: var(--sb-deep, #468e0a); --_l: var(--sb-light, #d6ff82); --_a: var(--sb-accent, #fffaa0); --_k: var(--sb-ink, #1d4400); --_p: var(--sb-paper, #ffffd7); }
.sb-s02 .j-shadow { left: 1.8em; top: 11.3em; width: 10.4em; height: 2.2em; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--_d) 55%, transparent), color-mix(in oklab, var(--_k) 25%, transparent) 60%, transparent); }
.sb-s02 .j-body { left: 1.6em; top: 2.4em; width: 10.8em; height: 10em; overflow: hidden;
  border-radius: 46% 46% 40% 40% / 58% 58% 42% 42%;
  background: radial-gradient(ellipse 70% 60% at 50% 72%, color-mix(in oklab, var(--_l) 94%, transparent), color-mix(in oklab, var(--_m) 84%, transparent) 45%, color-mix(in oklab, var(--_d) 90%, transparent) 100%);
  box-shadow: inset 0 -.9em 1.4em color-mix(in oklab, color-mix(in oklab, var(--_d) 70%, black) 45%, transparent), inset 0 .5em .9em color-mix(in oklab, var(--_p) 45%, transparent); }
.sb-s02 .j-rib { inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1.35em, color-mix(in oklab, var(--_k) 7%, transparent) 1.35em 2.7em); }
.sb-s02 .j-core { left: 22%; top: 34%; width: 56%; height: 50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--_p) 60%, transparent), transparent); }
.sb-s02 .j-fill { inset: 0; clip-path: inset(100% 0 0 0);
  background: linear-gradient(to top, color-mix(in oklab, var(--_a) 70%, transparent), color-mix(in oklab, var(--_p) 25%, transparent) 70%, transparent); }
.sb-s02 .j-bub { border-radius: 50%; border: .1em solid rgba(255,255,255,.6); background: rgba(255,255,255,.14); }
.sb-s02 .j-hi { left: 15%; top: 8%; width: 46%; height: 24%; border-radius: 50%; transform: rotate(-14deg);
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%); }
.sb-s02 .j-hi2 { right: 20%; top: 19%; width: .9em; height: .9em; border-radius: 50%; background: rgba(255,255,255,.85); }

/* ───────── 03 Фолио с мехурчета ───────── */
.sb-s03 { --_m: var(--sb-main, #8cb2de); --_d: var(--sb-deep, #3c64a0); --_l: var(--sb-light, #d6eaff); --_a: var(--sb-accent, #ffffff); --_k: var(--sb-ink, #1a385c); --_p: var(--sb-paper, #f0f8ff); }
.sb-s03 .bw-sheet { left: 1em; top: 1em; width: 12em; height: 12em; border-radius: 1.4em; transform: rotate(-4deg);
  background: linear-gradient(135deg, color-mix(in oklab, var(--_p) 66%, transparent), color-mix(in oklab, color-mix(in oklab, var(--_l) 70%, var(--_m)) 46%, transparent));
  box-shadow: inset 0 0 0 .12em rgba(255,255,255,.55), 0 .8em 1.4em -.5em color-mix(in oklab, var(--_k) 45%, transparent); }
.sb-s03 .bw-b { border-radius: 50%; }
.sb-s03 .bw-dome { inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.98) 0 8%, rgba(255,255,255,.38) 18%, color-mix(in oklab, var(--_l) 24%, transparent) 52%, color-mix(in oklab, var(--_m) 50%, transparent) 100%);
  box-shadow: inset -.2em -.3em .5em color-mix(in oklab, var(--_d) 38%, transparent), inset .1em .15em .2em rgba(255,255,255,.75), 0 .25em .35em color-mix(in oklab, var(--_d) 30%, transparent); }
.sb-s03 .bw-flat { inset: 10%; opacity: 0;
  background: radial-gradient(circle at 45% 45%, rgba(255,255,255,.35), color-mix(in oklab, color-mix(in oklab, var(--_m) 60%, var(--_l)) 40%, transparent));
  clip-path: polygon(50% 2%, 63% 18%, 88% 10%, 82% 36%, 99% 52%, 80% 64%, 86% 90%, 60% 82%, 46% 99%, 36% 80%, 10% 88%, 18% 62%, 1% 46%, 20% 36%, 12% 12%, 38% 20%); }

/* ───────── 04 Балон ───────── */
.sb-s04 { --_m: var(--sb-main, #7b46ea); --_d: var(--sb-deep, #52229f); --_l: var(--sb-light, #dcc2ff); --_a: var(--sb-accent, #a477ff); --_k: var(--sb-ink, #2e2442); --_p: var(--sb-paper, #ffffff); }
.sb-s04 .bl-shadow { left: 4.2em; top: 13.1em; width: 5.6em; height: 1em; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--_k) 38%, transparent), transparent); }
.sb-s04 .bl-float, .sb-s04 .bl-sq { inset: 0; }
.sb-s04 .bl-ball { left: 2.6em; top: .4em; width: 8.8em; height: 9.8em;
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background: radial-gradient(ellipse 60% 55% at 38% 32%, var(--_l) 0, color-mix(in oklab, var(--_m) 55%, var(--_l)) 28%, var(--_m) 58%, var(--_d) 100%);
  box-shadow: inset -.6em -.9em 1.4em color-mix(in oklab, color-mix(in oklab, var(--_d) 70%, black) 45%, transparent), inset .3em .4em .8em color-mix(in oklab, var(--_l) 25%, transparent); }
.sb-s04 .bl-hi { left: 18%; top: 12%; width: 26%; height: 36%; border-radius: 50%; transform: rotate(24deg);
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.8), rgba(255,255,255,0) 70%); }
.sb-s04 .bl-hi2 { left: 30%; top: 9%; width: 13%; height: 7%; border-radius: 50%; transform: rotate(-24deg); background: rgba(255,255,255,.9); }
.sb-s04 .bl-knot { left: 6.4em; top: 10.0em; width: 1.2em; height: .95em; border-radius: .25em;
  background: linear-gradient(180deg, color-mix(in oklab, var(--_m) 50%, var(--_d)), var(--_d)); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sb-s04 .bl-string { left: 6em; top: 10.8em; width: 2em; height: 4.6em; }
.sb-s04 .bl-string path { fill: none; stroke: var(--_k); stroke-width: 1.4; stroke-linecap: round; }

/* ───────── 05 Пластилин ───────── */
.sb-s05 { --_m: var(--sb-main, #35b293); --_d: var(--sb-deep, #21876d); --_l: var(--sb-light, #62d3b6); --_a: var(--sb-accent, #f07a33); --_k: var(--sb-ink, #0c2824); --_p: var(--sb-paper, #ffdcbe);
  --_dd: color-mix(in oklab, var(--_d) 55%, black); --_ll: color-mix(in oklab, var(--_l) 60%, white); }
.sb-s05 .cl-shadow { left: 1.8em; top: 10.6em; width: 10.6em; height: 2.2em; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--_k) 50%, transparent), transparent); }
.sb-s05 .cl-body { left: 1.4em; top: 1.8em; width: 11.2em; height: 9.8em; overflow: hidden;
  border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%;
  background: radial-gradient(ellipse 80% 70% at 42% 35%, var(--_l) 0, var(--_m) 45%, var(--_d) 100%);
  box-shadow: inset -.5em -.8em 1.4em color-mix(in oklab, var(--_dd) 45%, transparent), inset .4em .5em .9em color-mix(in oklab, var(--_ll) 22%, transparent); }
.sb-s05 .cl-tex { inset: 0; background-image: var(--sbn); background-size: 7em 7em; opacity: .28; }
.sb-s05 .cl-mark { border-radius: 50%; border-top: .14em solid color-mix(in oklab, var(--_dd) 28%, transparent); }
.sb-s05 .cl-dent { left: 0; top: 0; width: 4em; height: 3.4em; border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse at 50% 62%, color-mix(in oklab, var(--_dd) 38%, transparent), color-mix(in oklab, var(--_dd) 12%, transparent) 60%, transparent 74%);
  box-shadow: inset 0 .35em .45em color-mix(in oklab, var(--_dd) 45%, transparent), inset 0 -.25em .3em color-mix(in oklab, var(--_ll) 22%, transparent); }
.sb-s05 .cl-dent svg { inset: 8%; width: 84%; height: 84%; }
.sb-s05 .cl-dent svg * { fill: none; stroke: color-mix(in oklab, var(--_dd) 34%, transparent); stroke-width: 1.1; stroke-linecap: round; }
.sb-s05 .cl-snake { left: 1em; top: 11.1em; width: 12em; height: 2.6em; clip-path: inset(0 100% 0 0); }
.sb-s05 .cl-snake .s1 { fill: none; stroke: var(--_a); stroke-width: 7; stroke-linecap: round; }
.sb-s05 .cl-snake .s2 { fill: none; stroke: color-mix(in oklab, var(--_p) 55%, transparent); stroke-width: 2; stroke-linecap: round; transform: translate(-.5px, -1.6px); }

/* ───────── 06 Бонбон ───────── */
.sb-s06 { --_m: var(--sb-main, #e3173a); --_d: var(--sb-deep, #7a0a22); --_l: var(--sb-light, #fff4f5); --_a: var(--sb-accent, #ffffff); --_k: var(--sb-ink, #5a0a1e); --_p: var(--sb-paper, #fff6f7); }
.sb-s06 .cd-wr { inset: 0; width: 100%; height: 100%; }
.sb-s06 .cd-wr .fan { fill: color-mix(in oklab, var(--_p) 46%, transparent); stroke: color-mix(in oklab, var(--_p) 90%, transparent); stroke-width: 1.2; stroke-linejoin: round; }
.sb-s06 .cd-wr .pleat { fill: none; stroke: color-mix(in oklab, var(--_m) 35%, transparent); stroke-width: 1; }
.sb-s06 .cd-wr .knot { fill: color-mix(in oklab, var(--_p) 78%, transparent); }
.sb-s06 .cd-ball { left: 2.4em; top: 2.4em; width: 9.2em; height: 9.2em; border-radius: 50%; overflow: hidden;
  box-shadow: 0 .7em 1.1em -.4em color-mix(in oklab, var(--_k) 55%, transparent); }
.sb-s06 .cd-spin, .sb-s06 .cd-swirl { inset: 0; border-radius: 50%; }
.sb-s06 .cd-swirl {
  background:
    radial-gradient(circle, var(--_p) 0 13%, transparent 14%),
    repeating-conic-gradient(from 0deg, var(--_m) 0 21deg, var(--_l) 23deg 43deg, var(--_m) 45deg); }
.sb-s06 .cd-gl { inset: 0; border-radius: 50%;
  background:
    radial-gradient(ellipse 46% 32% at 36% 25%, rgba(255,255,255,.92), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 50%, transparent 56%, color-mix(in oklab, var(--_d) 30%, transparent) 100%);
  box-shadow: inset 0 -.5em .9em color-mix(in oklab, var(--_d) 35%, transparent), inset 0 .25em .35em rgba(255,255,255,.55); }
.sb-s06 .cd-glint { left: 8.3em; top: 8.1em; width: 1.2em; height: .7em; border-radius: 50%; transform: rotate(-35deg);
  background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0)); }

/* ───────── 07 Бисквита ───────── */
.sb-s07 { --_m: var(--sb-main, #dc9d50); --_d: var(--sb-deep, #94582a); --_l: var(--sb-light, #f0c27e); --_a: var(--sb-accent, #4a2612); --_k: var(--sb-ink, #46280a); --_p: var(--sb-paper, #ffe6b4); }
.sb-s07 .ck-wrap { left: 1.4em; top: 1.4em; width: 11.2em; height: 11.2em; filter: drop-shadow(0 .6em .55em color-mix(in oklab, var(--_k) 42%, transparent)); }
.sb-s07 .ck { inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 22% 34%, color-mix(in oklab, var(--_d) 35%, transparent) 0 .22em, transparent .3em),
    radial-gradient(circle at 68% 22%, color-mix(in oklab, var(--_p) 50%, transparent) 0 .2em, transparent .28em),
    radial-gradient(circle at 76% 60%, color-mix(in oklab, var(--_d) 30%, transparent) 0 .2em, transparent .28em),
    radial-gradient(circle at 38% 78%, color-mix(in oklab, var(--_p) 45%, transparent) 0 .18em, transparent .26em),
    radial-gradient(circle at 46% 42%, var(--_l) 0, var(--_m) 50%, color-mix(in oklab, var(--_m) 50%, var(--_d)) 82%, var(--_d) 100%);
  box-shadow: inset 0 -.5em .9em color-mix(in oklab, var(--_d) 40%, transparent), inset 0 .3em .5em color-mix(in oklab, var(--_p) 45%, transparent); }
.sb-s07 .ck-tex { inset: 0; background-image: var(--sbn); background-size: 6em 6em; opacity: .22; }
.sb-s07 .ck-chip { width: 1.5em; height: 1.15em; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--_a) 70%, var(--_l)), var(--_a) 60%, color-mix(in oklab, var(--_a) 65%, black));
  box-shadow: inset 0 .1em .08em color-mix(in oklab, var(--_p) 25%, transparent); }

/* ───────── 08 Комикс взрив ───────── */
.sb-s08 { --_m: var(--sb-main, #ffd23f); --_d: var(--sb-deep, #ff7a00); --_l: var(--sb-light, #fff3a0); --_a: var(--sb-accent, #ff3b2f); --_k: var(--sb-ink, #111111); --_p: var(--sb-paper, #ffffff); }
.sb-s08 .cm-svg { inset: 0; width: 100%; height: 100%; }
.sb-s08 .cm-y { fill: var(--_m); stroke: var(--_k); stroke-width: 3.4; stroke-linejoin: miter; }
.sb-s08 .cm-r { fill: var(--_a); stroke: var(--_k); stroke-width: 3; stroke-linejoin: miter; }
.sb-s08 .cm-dot { fill: var(--_d); }
.sb-s08 .cm-ww { left: 0; top: 0; width: 14em; height: 14em; display: grid !important; place-items: center; }
.sb-s08 .cm-w { position: relative !important;
  font: 400 2.15em/1 "Rubik Mono One", "Nunito", sans-serif; color: var(--_p); letter-spacing: -.02em;
  -webkit-text-stroke: .13em var(--_k); paint-order: stroke fill;
  text-shadow: .06em .09em 0 var(--_k); white-space: nowrap; }
.sb-s08 .sb-label { border-radius: .35em; box-shadow: 0 0 0 2.5px var(--_k); background: var(--_m); font-family: "Rubik Mono One", "Nunito", sans-serif; font-weight: 400; font-size: .78rem; padding: .45em .8em; }
.sb-s08 .sb-bar { background: var(--_k); }

/* ───────── 09 Клавиш на играчка-пиано ───────── */
.sb-s09 { --_m: var(--sb-main, #f2821a); --_d: var(--sb-deep, #b85200); --_l: var(--sb-light, #ffb04a); --_a: var(--sb-accent, #ffd23a); --_k: var(--sb-ink, #3a1a06); --_p: var(--sb-paper, #fbfbf6); }
.sb-s09 .pk-house { left: .6em; top: 1.2em; width: 12.8em; height: 12em; border-radius: 1.8em;
  background: linear-gradient(180deg, var(--_l), var(--_m) 60%, color-mix(in oklab, var(--_m) 70%, var(--_d)));
  box-shadow: inset 0 .2em .15em color-mix(in oklab, color-mix(in oklab, var(--_l) 45%, white) 60%, transparent), inset 0 -.4em .6em color-mix(in oklab, var(--_d) 35%, transparent), 0 .9em 1.3em -.5em color-mix(in oklab, color-mix(in oklab, var(--_d) 50%, black) 55%, transparent); }
.sb-s09 .pk-grille { left: 1.2em; top: .8em; width: 4.2em; height: 1.6em; border-radius: .4em;
  background: radial-gradient(circle, color-mix(in oklab, color-mix(in oklab, var(--_d) 60%, black) 55%, transparent) .17em, transparent .21em) 0 0 / .6em .6em; }
.sb-s09 .pk-bar { left: 6.4em; top: 1.2em; width: 5.2em; height: .85em; border-radius: .45em; background: color-mix(in oklab, var(--_d) 55%, black);
  box-shadow: inset 0 .12em .15em rgba(0,0,0,.5), 0 .08em 0 color-mix(in oklab, var(--_l) 40%, transparent); }
.sb-s09 .pk-fill { left: .15em; top: .15em; right: .15em; bottom: .15em; border-radius: .3em;
  background: linear-gradient(90deg, color-mix(in oklab, var(--_a) 40%, white), var(--_a)); transform-origin: 0 50%; transform: scaleX(0); }
.sb-s09 .pk-bed { left: 1.2em; top: 3.6em; width: 11.6em; height: 9em; border-radius: .4em .4em 1em 1em; background: var(--_k);
  box-shadow: inset 0 .3em .4em rgba(0,0,0,.6); }
.sb-s09 .pk-n, .sb-s09 .pk-face { background: linear-gradient(180deg, var(--_p), color-mix(in oklab, var(--_p) 92%, var(--_k)) 85%, color-mix(in oklab, var(--_p) 82%, var(--_k))); }
.sb-s09 .pk-n { top: 3.6em; width: 2.5em; height: 8.6em; border-radius: 0 0 .6em .6em; box-shadow: inset 0 -.8em .2em -.6em color-mix(in oklab, color-mix(in oklab, var(--_p) 55%, var(--_k)) 60%, transparent); }
.sb-s09 .pk-n.l { left: 1.35em; }
.sb-s09 .pk-n.r { left: 10.15em; }
.sb-s09 .pk-key { left: 4.05em; top: 3.6em; width: 5.9em; height: 8.6em; }
.sb-s09 .pk-face { left: 0; top: 0; width: 100%; height: 7.9em; border-radius: 0 0 .25em .25em; }
.sb-s09 .pk-lip { left: 0; top: 7.6em; width: 100%; height: 1em; border-radius: 0 0 .6em .6em; background: linear-gradient(180deg, color-mix(in oklab, var(--_p) 82%, var(--_k)), color-mix(in oklab, var(--_p) 68%, var(--_k))); }
.sb-s09 .pk-dot { left: 1.75em; top: 4.9em; width: 2.4em; height: 2.4em; border-radius: 50%; background: color-mix(in oklab, var(--_m) 85%, var(--_a));
  box-shadow: inset 0 -.15em .2em color-mix(in oklab, var(--_d) 35%, transparent); }
.sb-s09 .pk-dot svg { inset: 18%; width: 64%; height: 64%; fill: var(--_p); }
.sb-s09 .pk-blk { top: 3.6em; width: 1.6em; height: 4.8em; border-radius: 0 0 .35em .35em;
  background: linear-gradient(180deg, color-mix(in oklab, color-mix(in oklab, var(--_k) 55%, black) 85%, white), color-mix(in oklab, var(--_k) 20%, black));
  box-shadow: 0 .25em .3em rgba(0,0,0,.4), inset 0 -.35em .2em -.1em rgba(255,255,255,.14); }
.sb-s09 .pk-blk.l { left: 3.25em; }
.sb-s09 .pk-blk.r { left: 9.15em; }

/* ───────── 10 Стикер ───────── */
.sb-s10 { --_m: var(--sb-main, #1f9cff); --_d: var(--sb-deep, #0b4fb0); --_l: var(--sb-light, #86d6ff); --_a: var(--sb-accent, #ffd23f); --_k: var(--sb-ink, #3a2a00); --_p: var(--sb-paper, #ffffff); }
.sb-s10 .st-shadow { left: 2em; top: 2em; width: 10.2em; height: 10.2em; border-radius: 2.2em; background: color-mix(in oklab, color-mix(in oklab, var(--_d) 35%, black) 42%, transparent); filter: blur(.7em); }
.sb-s10 .st-rot { left: 1.7em; top: 1.7em; width: 10.6em; height: 10.6em; }
.sb-s10 .st-face { inset: 0; border-radius: 2.2em; background: var(--_p); clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%); }
.sb-s10 .st-art { inset: .75em; border-radius: 1.6em; overflow: hidden; background: radial-gradient(circle at 30% 25%, var(--_l), var(--_m) 55%, color-mix(in oklab, var(--_m) 50%, var(--_d))); }
.sb-s10 .st-ill { inset: 0; width: 100%; height: 100%; }
.sb-s10 .st-gloss { top: -20%; height: 140%; left: 0; width: 42%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.6) 45%, rgba(255,255,255,0) 72%); }
.sb-s10 .st-flap { left: 74%; top: 74%; width: 26%; height: 26%; clip-path: polygon(100% 0, 0 0, 0 100%);
  background: linear-gradient(135deg, var(--_p) 0, color-mix(in oklab, var(--_p) 90%, var(--_d)) 45%, color-mix(in oklab, var(--_p) 68%, var(--_d)) 100%); }
.sb-s10 .sb-label { transform: rotate(-3deg); border-radius: .7em; }

/* ───────── 11 Маршмелоу ───────── */
.sb-s11 { --_m: var(--sb-main, #f7c9d7); --_d: var(--sb-deep, #de95ad); --_l: var(--sb-light, #fff6f9); --_a: var(--sb-accent, #c47834); --_k: var(--sb-ink, #93304f); --_p: var(--sb-paper, #fde3eb); }
.sb-s11 .mm-shadow { left: 1.6em; top: 11.2em; width: 10.8em; height: 2.2em; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, color-mix(in oklab, var(--_k) 60%, black) 38%, transparent), transparent); }
.sb-s11 .mm-body { inset: 0; }
.sb-s11 .mm-side { left: 2em; top: 4.7em; width: 10em; height: 7.4em; overflow: hidden;
  border-radius: 0 0 46% 46% / 0 0 30% 30%;
  background: linear-gradient(90deg, var(--_d), var(--_m) 30%, color-mix(in oklab, var(--_m) 40%, var(--_l)) 50%, color-mix(in oklab, var(--_m) 80%, var(--_d)) 72%, var(--_d));
  box-shadow: inset 0 -.8em 1em color-mix(in oklab, color-mix(in oklab, var(--_d) 50%, var(--_k)) 25%, transparent); }
.sb-s11 .mm-top { left: 2em; top: 2.4em; width: 10em; height: 4.6em; border-radius: 50%; overflow: hidden;
  background: radial-gradient(ellipse at 45% 40%, var(--_l), color-mix(in oklab, var(--_p) 70%, var(--_l)) 55%, var(--_m));
  box-shadow: inset 0 -.25em .5em color-mix(in oklab, var(--_d) 30%, transparent), inset 0 .2em .3em rgba(255,255,255,.8); }
.sb-s11 .mm-pow { inset: 0; background-image: var(--sbn-w); background-size: 6em 6em; opacity: .55; }
.sb-s11 .mm-ts { inset: 0; opacity: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--_a) 85%, transparent), color-mix(in oklab, var(--_a) 20%, transparent) 38%, transparent 60%); }
.sb-s11 .mm-tt { inset: 0; opacity: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, color-mix(in oklab, color-mix(in oklab, var(--_a) 80%, white) 25%, transparent) 0, color-mix(in oklab, var(--_a) 75%, transparent) 55%, color-mix(in oklab, color-mix(in oklab, var(--_a) 70%, black) 92%, transparent) 100%); }

/* ───────── 12 Механичен клавиш ───────── */
.sb-s12 { --_m: var(--sb-main, #3c4048); --_d: var(--sb-deep, #1f2126); --_l: var(--sb-light, #555a65); --_a: var(--sb-accent, #ffb050); --_k: var(--sb-ink, #15171b); --_p: var(--sb-paper, #ffe2be); }
.sb-s12 .kc-plate { left: .7em; top: 3.2em; width: 12.6em; height: 10.4em; border-radius: 1.3em;
  background: linear-gradient(180deg, color-mix(in oklab, var(--_k) 86%, white), var(--_k));
  box-shadow: inset 0 .15em .1em rgba(255,255,255,.12), 0 .8em 1.2em -.4em color-mix(in oklab, color-mix(in oklab, var(--_k) 50%, black) 60%, transparent); }
.sb-s12 .kc-under { left: 1.2em; top: 3.6em; width: 11.6em; height: 9.6em; border-radius: 1em; opacity: 0;
  background: radial-gradient(ellipse at 50% 62%, color-mix(in oklab, var(--_a) 95%, transparent), color-mix(in oklab, var(--_a) 40%, transparent) 55%, transparent 76%); }
.sb-s12 .kc-shadow { left: 1.8em; top: 3.9em; width: 10.4em; height: 9.4em; border-radius: 1.4em; background: rgba(0,0,0,.6); filter: blur(.45em); }
.sb-s12 .kc-cap { left: 1.7em; top: 1.6em; width: 10.6em; height: 10.4em; }
.sb-s12 .kc-wall { inset: 0; border-radius: 1.5em;
  background: linear-gradient(180deg, color-mix(in oklab, var(--_m) 88%, white) 0, color-mix(in oklab, var(--_m) 50%, var(--_d)) 60%, var(--_d) 100%);
  box-shadow: inset 0 -.2em .2em rgba(0,0,0,.4), inset 0 .1em .05em rgba(255,255,255,.1); }
.sb-s12 .kc-top { left: .9em; top: .35em; width: 8.8em; height: 7.8em; border-radius: 1.3em;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, var(--_l), var(--_m) 60%, color-mix(in oklab, var(--_m) 75%, var(--_d)));
  box-shadow: inset 0 .14em .08em rgba(255,255,255,.18), inset 0 -.5em .7em rgba(0,0,0,.35), 0 .15em .2em rgba(0,0,0,.25); }
.sb-s12 .kc-leg { inset: 0; }
.sb-s12 .kc-leg b { inset: 0; display: grid !important; place-items: center; font: 900 4.4em/1 "Nunito", sans-serif; }
.sb-s12 .kc-l0 { color: color-mix(in oklab, var(--_p) 22%, transparent); }
.sb-s12 .kc-l1 { color: color-mix(in oklab, var(--_a) 55%, white); text-shadow: 0 0 .25em color-mix(in oklab, var(--_a) 75%, transparent); clip-path: inset(100% 0 0 0); }

/* ───────── 13 Гумено пате ───────── */
.sb-s13 { --_m: var(--sb-main, #ffd21f); --_d: var(--sb-deep, #eaa200); --_l: var(--sb-light, #fff27a); --_a: var(--sb-accent, #ff7a1a); --_k: var(--sb-ink, #2a6ac0); --_p: var(--sb-paper, #ffffff); }
.sb-s13 .dk-svg { inset: 0; width: 100%; height: 100%; }

/* ───────── 14 Поничка ───────── */
.sb-s14 { --_m: var(--sb-main, #ff86bd); --_d: var(--sb-deep, #e8509a); --_l: var(--sb-light, #ffaed5); --_a: var(--sb-accent, #ffd23f); --_k: var(--sb-ink, #46230f); --_p: var(--sb-paper, #f2c27c); }
.sb-s14 .dn-shadow { left: 2em; top: 11.6em; width: 10em; height: 1.9em; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--_k) 45%, transparent), transparent); }
.sb-s14 .dn-svg { inset: 0; width: 100%; height: 100%; }

/* ───────── 15 Течен метал ───────── */
.sb-s15 { --_m: var(--sb-main, #c9d2de); --_d: var(--sb-deep, #5c6676); --_l: var(--sb-light, #ffffff); --_a: var(--sb-accent, #dfe6ef); --_k: var(--sb-ink, #1b2533); --_p: var(--sb-paper, #f6f8fb); }
.sb-s15 .lm-shadow { left: 2.4em; top: 11.4em; width: 9.2em; height: 1.9em; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--_k) 55%, transparent), transparent); }
.sb-s15 .lm-cv { inset: 0; width: 100%; height: 100%; }
.sb-s15 .lm-fb { display: none !important; left: 2.4em; top: 2.2em; width: 9.2em; height: 9.2em; border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, var(--_l) 0 6%, var(--_a) 14%, color-mix(in oklab, var(--_m) 50%, var(--_d)) 40%, color-mix(in oklab, var(--_d) 50%, var(--_k)) 62%, var(--_m) 80%, var(--_d) 100%); }
.sb-s15 .sb.no-gl .lm-fb { display: block !important; }
.sb-s15 .sb.no-gl .lm-cv { display: none !important; }

/* ───────── 16 Пиксел 8-бит ───────── */
.sb-s16 { --_m: var(--sb-main, #33d17a); --_d: var(--sb-deep, #1e8a4c); --_l: var(--sb-light, #b4f7cf); --_a: var(--sb-accent, #ffd23f); --_k: var(--sb-ink, #1a1a2e); --_p: var(--sb-paper, #f0fff6); }
.sb-s16 .px-svg { left: 1em; top: 1em; width: 12em; height: 12em; }
.sb-s16 .sb-label { border-radius: 0; font: 400 .62rem/1.6 "Press Start 2P", "Nunito", monospace; padding: .65em .9em .55em; letter-spacing: 0;
  box-shadow: 0 -3px 0 var(--_k), 0 3px 0 var(--_k), -3px 0 0 var(--_k), 3px 0 0 var(--_k); margin-top: .7rem; }

/* ───────── 17 Оригами ───────── */
.sb-s17 { --_m: var(--sb-main, #d6327f); --_d: var(--sb-deep, #a51d5f); --_l: var(--sb-light, #f26aa9); --_a: var(--sb-accent, #ffcf3d); --_k: var(--sb-ink, #280f32); --_p: var(--sb-paper, #ffffff); }
.sb-s17 .og-shadow { left: 2.6em; top: 3.1em; width: 9.4em; height: 9.4em; border-radius: .3em; background: color-mix(in oklab, var(--_k) 36%, transparent); filter: blur(.6em); }
.sb-s17 .og-tilt { left: 2.3em; top: 2.1em; width: 9.4em; height: 9.4em; }
.sb-s17 .og-paper { inset: 0; perspective: 26em; }
.sb-s17 .og-base { inset: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.2) .1em, rgba(255,255,255,0) .14em) 0 0 / 1em 1em,
    linear-gradient(135deg, color-mix(in oklab, var(--_m) 70%, var(--_l)), color-mix(in oklab, var(--_m) 55%, var(--_d)) 60%, var(--_d)); }
.sb-s17 .og-crease { inset: 0; background:
    linear-gradient(45deg, transparent calc(50% - .04em), color-mix(in oklab, color-mix(in oklab, var(--_d) 60%, black) 25%, transparent) 50%, transparent calc(50% + .04em)),
    linear-gradient(-45deg, transparent calc(50% - .04em), color-mix(in oklab, color-mix(in oklab, var(--_d) 60%, black) 25%, transparent) 50%, transparent calc(50% + .04em)); }
.sb-s17 .og-ink { left: 33%; top: 33%; width: 34%; height: 34%; border-radius: 50%; clip-path: circle(0% at 50% 50%);
  background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--_a) 40%, white), var(--_a) 60%, color-mix(in oklab, var(--_a) 80%, var(--_d))); }
.sb-s17 .og-f { inset: 0; transform-style: preserve-3d; }
.sb-s17 .og-fr, .sb-s17 .og-bk { inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sb-s17 .og-fr { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.24) .1em, rgba(255,255,255,0) .14em) 0 0 / 1em 1em,
    linear-gradient(135deg, var(--_l), var(--_m) 60%, color-mix(in oklab, var(--_m) 60%, var(--_d))); }
.sb-s17 .og-bk { background: linear-gradient(135deg, var(--_p), color-mix(in oklab, var(--_p) 92%, var(--_m)) 60%, color-mix(in oklab, var(--_p) 80%, var(--_m))); }
.sb-s17 .sb-label { border-radius: .3em; clip-path: polygon(0 0, calc(100% - .7em) 0, 100% .7em, 100% 100%, 0 100%); }

/* ───────── 18 Стъклено топче ───────── */
.sb-s18 { --_m: var(--sb-main, #78b2e6); --_d: var(--sb-deep, #24569a); --_l: var(--sb-light, #ceecff); --_a: var(--sb-accent, #ff8a2b); --_k: var(--sb-ink, #0e3f6e); --_p: var(--sb-paper, #ffffff); }
.sb-s18 .mb-sh { left: 3.4em; top: 10.1em; width: 9em; height: 2.6em; border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in oklab, var(--_k) 50%, transparent), color-mix(in oklab, var(--_k) 18%, transparent) 70%, transparent); }
.sb-s18 .mb-caus { left: 38%; top: 22%; width: 38%; height: 52%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, color-mix(in oklab, var(--_a) 25%, white) 85%, transparent), color-mix(in oklab, color-mix(in oklab, var(--_a) 55%, white) 25%, transparent) 60%, transparent); }
.sb-s18 .mb-pos { inset: 0; }
.sb-s18 .mb-ball { left: 2.5em; top: 1.8em; width: 9em; height: 9em; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, color-mix(in oklab, var(--_l) 28%, transparent), color-mix(in oklab, var(--_m) 38%, transparent) 62%, color-mix(in oklab, var(--_d) 66%, transparent) 100%);
  box-shadow: inset 0 0 0 .1em rgba(255,255,255,.35); }
.sb-s18 .mb-core { inset: 8%; width: 84%; height: 84%; }
.sb-s18 .mb-core svg { inset: 0; width: 100%; height: 100%; }
.sb-s18 .mb-depth { inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 30%, color-mix(in oklab, color-mix(in oklab, var(--_m) 50%, var(--_l)) 32%, transparent) 70%, color-mix(in oklab, var(--_d) 55%, transparent) 100%);
  box-shadow: inset -.6em -.8em 1.2em color-mix(in oklab, color-mix(in oklab, var(--_d) 60%, black) 35%, transparent), inset .3em .3em .6em rgba(255,255,255,.18); }
.sb-s18 .mb-hl { left: 3.5em; top: 2.7em; width: 3em; height: 1.9em; border-radius: 50%; transform: rotate(-32deg);
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.35) 55%, rgba(255,255,255,0)); }
.sb-s18 .mb-hl2 { left: 4.1em; top: 3.05em; width: .9em; height: .55em; border-radius: 50%; transform: rotate(-32deg); background: #fff; }
.sb-s18 .mb-ref { left: 5.4em; top: 7.3em; width: 4.8em; height: 3em; border-radius: 50%; transform: rotate(-32deg);
  background: radial-gradient(ellipse 50% 40% at 50% 70%, rgba(255,255,255,.65), rgba(255,255,255,0) 100%); }

/* ───────── 19 Лице ───────── */
.sb-s19 { --_m: var(--sb-main, #ff9172); --_d: var(--sb-deep, #e65f3e); --_l: var(--sb-light, #ffc4ad); --_a: var(--sb-accent, #ff4f74); --_k: var(--sb-ink, #2a1630); --_p: var(--sb-paper, #ffffff); }
.sb-s19 .fc-svg { inset: 0; width: 100%; height: 100%; }
.sb-s19 .bit-note { color: color-mix(in oklab, var(--_d) 50%, var(--_k)); }

/* ───────── 20 Барабан ───────── */
.sb-s20 { --_m: var(--sb-main, #3a63e0); --_d: var(--sb-deep, #1b3594); --_l: var(--sb-light, #5b82f5); --_a: var(--sb-accent, #f0cb5c); --_k: var(--sb-ink, #141a33); --_p: var(--sb-paper, #fffaf0); }
.sb-s20 .dr-svg { inset: 0; width: 100%; height: 100%; }

/* ───────── 21 Пърдяща възглавница ───────── */
.sb-s21 { --_m: var(--sb-main, #f04f72); --_d: var(--sb-deep, #a3213f); --_l: var(--sb-light, #ffa6bb); --_a: var(--sb-accent, #ffd84a); --_k: var(--sb-ink, #4a0f22); --_p: var(--sb-paper, #fff1f4); }

/* ───────── 22 Клоунска тромба ───────── */
.sb-s22 { --_m: var(--sb-main, #f2333a); --_d: var(--sb-deep, #9e1220); --_l: var(--sb-light, #ff9a8c); --_a: var(--sb-accent, #f2b632); --_k: var(--sb-ink, #3a2208); --_p: var(--sb-paper, #fff3cf); }

/* ───────── 23 Кутия с изненада ───────── */
.sb-s23 { --_m: var(--sb-main, #2f6fe0); --_d: var(--sb-deep, #1b3f99); --_l: var(--sb-light, #8db4ff); --_a: var(--sb-accent, #ff4a3d); --_k: var(--sb-ink, #1a1530); --_p: var(--sb-paper, #fff4e0); }

/* ───────── 24 Слуз ───────── */
.sb-s24 { --_m: var(--sb-main, #6fdc45); --_d: var(--sb-deep, #2b9a2a); --_l: var(--sb-light, #d4ff9a); --_a: var(--sb-accent, #ff5ab4); --_k: var(--sb-ink, #0e3a14); --_p: var(--sb-paper, #f4ffe6); }

/* ───────── 25 Печат ───────── */
.sb-s25 { --_m: var(--sb-main, #e2462c); --_d: var(--sb-deep, #8e1d10); --_l: var(--sb-light, #ff9a7f); --_a: var(--sb-accent, #2443c6); --_k: var(--sb-ink, #1d1a2a); --_p: var(--sb-paper, #fbf6ea); }
.sb-s25 .ps-word { font-family: "Rubik Mono One", "Nunito", sans-serif; font-weight: 900; }

/* ───────── 26 Батут ───────── */
.sb-s26 { --_m: var(--sb-main, #13a6c8); --_d: var(--sb-deep, #0b6b86); --_l: var(--sb-light, #8fe6fa); --_a: var(--sb-accent, #ff6a2a); --_k: var(--sb-ink, #102a3a); --_p: var(--sb-paper, #ffffff); }

/* ───────── 27 Котешка лапа ───────── */
.sb-s27 { --_m: var(--sb-main, #f3a75f); --_d: var(--sb-deep, #b8692c); --_l: var(--sb-light, #ffd9ae); --_a: var(--sb-accent, #ff8fb1); --_k: var(--sb-ink, #4a2a18); --_p: var(--sb-paper, #fff4ea); }

@media (prefers-reduced-motion: reduce) {
  .sb { transition: none; }
  .sb-idle { animation: none !important; }
}

/* Класически кирилски форми (без българските locl варианти) */
*, *::before, *::after { font-feature-settings: "locl" 0; }

/* SoundButtons extension, group a: styles 28-36 (pairs with buttons-ext/a.js). Same --sb-* contract as buttons.css. */

/* ───────── 28 Събуфер ───────── */
.sb-s28 { --_m: var(--sb-main, #2f3542); --_d: var(--sb-deep, #171b23); --_l: var(--sb-light, #59627a); --_a: var(--sb-accent, #ff4a3d); --_k: var(--sb-ink, #121318); --_p: var(--sb-paper, #f4f1ea); }
.bit-s28-wave { width: 9em; height: 9em; border-radius: 50%; border: .26em solid color-mix(in oklab, var(--_a) 80%, transparent);
  box-shadow: 0 0 0 .12em color-mix(in oklab, var(--_p) 35%, transparent); }

/* ───────── 29 Анимационна бомба ───────── */
.sb-s29 { --_m: var(--sb-main, #ffc21a); --_d: var(--sb-deep, #d4920a); --_l: var(--sb-light, #ffe38a); --_a: var(--sb-accent, #e8432a); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #fff7df); }
.sb-s29 .s29-fz { transform-box: fill-box; transform-origin: 50% 50%; animation: s29-fz .17s steps(2, end) infinite alternate; }
@keyframes s29-fz { from { transform: scale(.82) rotate(0deg); } to { transform: scale(1.14) rotate(28deg); } }
.bit-s29-chunk { width: 1em; height: .8em; background: var(--_k); clip-path: polygon(10% 20%, 70% 0, 100% 55%, 60% 100%, 0 80%); }

/* ───────── 30 Метална тръба ───────── */
.sb-s30 { --_m: var(--sb-main, #ffc21a); --_d: var(--sb-deep, #d4920a); --_l: var(--sb-light, #ffe38a); --_a: var(--sb-accent, #e8432a); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #fffaf0); }
.sb-s30 .s30-hov { animation: s30-hov 2.8s ease-in-out infinite alternate; }
@keyframes s30-hov { from { transform: translateY(0); } to { transform: translateY(-2.4px); } }
.bit-s30-clang { width: 1.7em; height: 1em; background: var(--_p);
  clip-path: polygon(0 45%, 30% 0, 48% 38%, 74% 4%, 100% 52%, 70% 100%, 52% 62%, 26% 96%); }

/* ───────── 31 Кученце ───────── */
.sb-s31 { --_m: var(--sb-main, #e0a35c); --_d: var(--sb-deep, #9c6430); --_l: var(--sb-light, #f6d3a2); --_a: var(--sb-accent, #e8432a); --_k: var(--sb-ink, #2a1a10); --_p: var(--sb-paper, #fff4e4); }
.bit-s31-bark { width: 1.5em; height: .36em; border-radius: 1em; background: var(--_p); box-shadow: 0 .08em 0 color-mix(in oklab, var(--_k) 30%, transparent); }

/* ───────── 32 Звънче на рецепция ───────── */
.sb-s32 { --_m: var(--sb-main, #e8b43a); --_d: var(--sb-deep, #9c6a12); --_l: var(--sb-light, #ffe69a); --_a: var(--sb-accent, #e8432a); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #fffaf0); }
.bit-s32-ring { width: 9em; height: 3.2em; border-radius: 50%; border: .2em solid color-mix(in oklab, var(--_p) 85%, transparent); }
.sb-s32 .bit-note { color: var(--_p); }

/* ───────── 33 Полицейска лампа ───────── */
.sb-s33 { --_m: var(--sb-main, #3a3f4b); --_d: var(--sb-deep, #1c1f26); --_l: var(--sb-light, #6b7384); --_a: var(--sb-accent, #ffc21a); --_k: var(--sb-ink, #14161b); --_p: var(--sb-paper, #ffffff);
  --_r: #ff2e3b; --_b: #2f6bff; }
.bit-s33-fl { width: 3.4em; height: 3.4em; border-radius: 50%; }
.bit-s33-fl.r { background: radial-gradient(circle, #fff 0, color-mix(in oklab, var(--_r) 80%, transparent) 32%, transparent 70%); }
.bit-s33-fl.b { background: radial-gradient(circle, #fff 0, color-mix(in oklab, var(--_b) 80%, transparent) 32%, transparent 70%); }

/* ───────── 34 Въздушна сирена ───────── */
.sb-s34 { --_m: var(--sb-main, #3a62e0); --_d: var(--sb-deep, #2443a6); --_l: var(--sb-light, #a9bcf7); --_a: var(--sb-accent, #e8432a); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #fffaf0); }
.bit-s34-arc { width: 1.5em; height: 4.2em; border-radius: 50%; border: .34em solid transparent; border-right-color: var(--_p); }

/* ───────── 35 Камшик ───────── */
.sb-s35 { --_m: var(--sb-main, #b8743a); --_d: var(--sb-deep, #6e3d16); --_l: var(--sb-light, #e3ab72); --_a: var(--sb-accent, #ffc21a); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #fffaf0); }
.bit-s35-snap { width: 1.4em; height: .24em; border-radius: .2em; background: var(--_p); }

/* ───────── 36 Грамофонна плоча ───────── */
.sb-s36 { --_m: var(--sb-main, #f7efdb); --_d: var(--sb-deep, #d9c9a4); --_l: var(--sb-light, #ffffff); --_a: var(--sb-accent, #e8432a); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #fffaf0); }
.sb-s36 .s36-spin { transform-box: fill-box; transform-origin: 50% 50%; animation: s36-spin 1.8s linear infinite; }
.sb-s36.s36-hold .s36-spin { animation-play-state: paused; }
@keyframes s36-spin { to { transform: rotate(360deg); } }
.bit-s36-scr { width: 1.5em; height: .8em; background: var(--_p);
  clip-path: polygon(0 62%, 25% 8%, 50% 62%, 75% 8%, 100% 62%, 100% 92%, 75% 38%, 50% 92%, 25% 38%, 0 92%); }

/* idle loops pause offscreen and stop for reduced motion */
.sbx.sb-off .s29-fz, .sbx.sb-off .s30-hov, .sbx.sb-off .s36-spin { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sb-s29 .s29-fz, .sb-s30 .s30-hov, .sb-s36 .s36-spin { animation: none; }
}

/* SoundButtons extension, group b: styles 37–45 (pair with buttons-ext/b.js) */

/* ───────── 37 Цензура ───────── */
.sb-s37 { --_m: var(--sb-main, #ff5a7a); --_d: var(--sb-deep, #b8223f); --_l: var(--sb-light, #ffb3c2); --_a: var(--sb-accent, #ffc93d); --_k: var(--sb-ink, #1c1420); --_p: var(--sb-paper, #fffaf0); }
.bit-b37px { width: .8em; height: .8em; background: var(--_k); box-shadow: inset 0 0 0 .14em color-mix(in oklab, var(--_k) 60%, white); }

/* ───────── 38 Ръкопляскане ───────── */
.sb-s38 { --_m: var(--sb-main, #ffc93d); --_d: var(--sb-deep, #c98a12); --_l: var(--sb-light, #ffe69a); --_a: var(--sb-accent, #ff4f6d); --_k: var(--sb-ink, #2a1a0e); --_p: var(--sb-paper, #fff8e8); }

/* ───────── 39 Конфети ───────── */
.sb-s39 { --_m: var(--sb-main, #7b4dff); --_d: var(--sb-deep, #4a25b0); --_l: var(--sb-light, #c2adff); --_a: var(--sb-accent, #ffd23d); --_k: var(--sb-ink, #1e1438); --_p: var(--sb-paper, #fff6e0); }
.bit-b39str { width: 2.2em; height: 1em; border-radius: 50%; border: .24em solid transparent; border-top-color: var(--_a); background: none !important; }
.bit-b39pop { width: 3.4em; height: 3.4em; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--_p) 95%, transparent) 0 30%, color-mix(in oklab, var(--_a) 70%, transparent) 46%, transparent 70%); }

/* ───────── 40 Палец надолу ───────── */
.sb-s40 { --_m: var(--sb-main, #f4b26b); --_d: var(--sb-deep, #b9712e); --_l: var(--sb-light, #ffdcb2); --_a: var(--sb-accent, #4d8cff); --_k: var(--sb-ink, #2e1a0d); --_p: var(--sb-paper, #f6f1e8); }
.bit-b40tom { width: 1.5em; height: 1.35em; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 34% 30%, #ff9a7a 0, #e8341f 45%, #a3180d 100%);
  box-shadow: 0 0 0 .1em color-mix(in oklab, #5a0c06 70%, transparent); }
.bit-b40tom::after { content: ""; position: absolute; left: 32%; top: -14%; width: 36%; height: 30%; border-radius: 50% 50% 30% 30%; background: #3e9c3a; }

/* ───────── 41 Драматичната сцена ───────── */
.sb-s41 { --_m: var(--sb-main, #d8243a); --_d: var(--sb-deep, #8a0e20); --_l: var(--sb-light, #ff7d8a); --_a: var(--sb-accent, #f2c14e); --_k: var(--sb-ink, #120c16); --_p: var(--sb-paper, #fff3d6); }
.bit-b41dust { width: 1.3em; height: 1.3em; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--_p) 70%, transparent), transparent 70%); }

/* ───────── 42 Хартиено самолетче ───────── */
.sb-s42 { --_m: var(--sb-main, #43b6f0); --_d: var(--sb-deep, #1f78b4); --_l: var(--sb-light, #a9e2ff); --_a: var(--sb-accent, #ff8a3d); --_k: var(--sb-ink, #10283a); --_p: var(--sb-paper, #ffffff); }

/* ───────── 43 Боксова ръкавица ───────── */
.sb-s43 { --_m: var(--sb-main, #e5262f); --_d: var(--sb-deep, #8c0f17); --_l: var(--sb-light, #ff8b80); --_a: var(--sb-accent, #ffd13b); --_k: var(--sb-ink, #2a0d10); --_p: var(--sb-paper, #fff4ea); }

/* ───────── 44 Звънец ───────── */
.sb-s44 { --_m: var(--sb-main, #e9b949); --_d: var(--sb-deep, #a8761e); --_l: var(--sb-light, #ffe39a); --_a: var(--sb-accent, #ff9b2f); --_k: var(--sb-ink, #2a1d10); --_p: var(--sb-paper, #fff6df); }
.sb-s44 .bit-note { color: var(--_p); }

/* ───────── 45 Прозорец ───────── */
.sb-s45 { --_m: var(--sb-main, #2e9e6f); --_d: var(--sb-deep, #1b6646); --_l: var(--sb-light, #8fe0b8); --_a: var(--sb-accent, #ffd23d); --_k: var(--sb-ink, #12261c); --_p: var(--sb-paper, #ffffff); }
.bit-b45sh { width: 1em; height: .9em; clip-path: polygon(0 100%, 30% 0, 100% 64%);
  background: linear-gradient(135deg, #f4fcff, #a8dcf3 60%, #77bde0); }

/* SoundButtons extension, group c: styles 46–53 (pair with buttons-ext/c.js) */

/* ───────── 46 Сърце с монитор ───────── */
.sb-s46 { --_m: var(--sb-main, #ef3b5a); --_d: var(--sb-deep, #a1173a); --_l: var(--sb-light, #ff9fb2); --_a: var(--sb-accent, #48e0a0); --_k: var(--sb-ink, #2a0f1a); --_p: var(--sb-paper, #fff1f4); }
.bit-s46-heart { width: 1.3em; height: 1.2em; color: var(--_p); }

/* ───────── 47 Тъжен тромбон ───────── */
.sb-s47 { --_m: var(--sb-main, #f2b632); --_d: var(--sb-deep, #a8700f); --_l: var(--sb-light, #ffe39a); --_a: var(--sb-accent, #3a62e0); --_k: var(--sb-ink, #2a1c08); --_p: var(--sb-paper, #fff6dc); }
.sb-s47 .bit-note { color: var(--_p); }

/* ───────── 48 Малък барабан ───────── */
.sb-s48 { --_m: var(--sb-main, #e8432a); --_d: var(--sb-deep, #9b2213); --_l: var(--sb-light, #ff9a80); --_a: var(--sb-accent, #ffc21a); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #f7efdb); }

/* ───────── 49 Шамар ───────── */
.sb-s49 { --_m: var(--sb-main, #f6c39b); --_d: var(--sb-deep, #c9875c); --_l: var(--sb-light, #ffe4cc); --_a: var(--sb-accent, #e8432a); --_k: var(--sb-ink, #3a1e12); --_p: var(--sb-paper, #fff6ee); }
.sb-s49 .bit-line { background: var(--_p); }

/* ───────── 50 Ура-зверче ───────── */
.sb-s50 { --_m: var(--sb-main, #fff4e0); --_d: var(--sb-deep, #d9c39b); --_l: var(--sb-light, #ffffff); --_a: var(--sb-accent, #ff5a7a); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #ffffff); }

/* ───────── 51 Петел ───────── */
.sb-s51 { --_m: var(--sb-main, #f4ede0); --_d: var(--sb-deep, #c9b896); --_l: var(--sb-light, #ffffff); --_a: var(--sb-accent, #e8432a); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #fffaf0); }
.bit-s51-feather { width: 1.4em; height: 1.4em; color: color-mix(in oklab, var(--_m) 70%, var(--_p)); }
.sb-s51 .bit-arc { border-right-color: var(--_p); }

/* ───────── 52 Касов апарат ───────── */
.sb-s52 { --_m: var(--sb-main, #e0a72a); --_d: var(--sb-deep, #9a6a12); --_l: var(--sb-light, #ffe08a); --_a: var(--sb-accent, #2f9e6a); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #f7efdb); }
.sb-s52 .rg-dollar { font: 900 15px/1 "Nunito", "Rubik Mono One", sans-serif; }
.bit-s52-coin {
  width: 1.15em; height: 1.15em; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff3c4 0, color-mix(in oklab, #f7c948 80%, var(--_a)) 45%, color-mix(in oklab, #b8860b 85%, var(--_k)) 100%);
  box-shadow: inset 0 0 0 .1em color-mix(in oklab, #b8860b 70%, transparent);
}

/* ───────── 53 Хъркащ ───────── */
.sb-s53 { --_m: var(--sb-main, #f6c9a0); --_d: var(--sb-deep, #c98e60); --_l: var(--sb-light, #ffe6cf); --_a: var(--sb-accent, #3a62e0); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #f7efdb); }
.bit-s53-z { width: 1.6em; height: 1.6em; color: var(--_p); }
.bit-s53-drop { width: .55em; height: .55em; border-radius: 50%; background: color-mix(in oklab, var(--_l) 60%, white); }

/* SoundButtons extension, group d: styles 54-61 (art is inline SVG; these set default tokens + particles) */

/* 54 Повръщане */
.sb-s54 { --_m: var(--sb-main, #3aa0e8); --_d: var(--sb-deep, #1d5f9e); --_l: var(--sb-light, #9fd4ff); --_a: var(--sb-accent, #ff6f7d); --_k: var(--sb-ink, #1e1b2a); --_p: var(--sb-paper, #fff3dc); }
.bit-s54-gunk { width: .85em; height: .75em; border-radius: 50% 50% 45% 55% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #d6f37a, #8cc63a 58%, #5a8f1e); }

/* 55 Куркащо коремче */
.sb-s55 { --_m: var(--sb-main, #f25a3c); --_d: var(--sb-deep, #a8301c); --_l: var(--sb-light, #ff9e86); --_a: var(--sb-accent, #ffd23f); --_k: var(--sb-ink, #2a1712); --_p: var(--sb-paper, #fff1e2); }
.bit-s55-rum { width: 2em; height: .9em; background: var(--_k);
  clip-path: polygon(0 40%, 20% 10%, 40% 40%, 60% 10%, 80% 40%, 100% 10%, 100% 45%, 80% 75%, 60% 45%, 40% 75%, 20% 45%, 0 75%); }

/* 56 Грешен отговор */
.sb-s56 { --_m: var(--sb-main, #4b5cd6); --_d: var(--sb-deep, #27318a); --_l: var(--sb-light, #9ea9ff); --_a: var(--sb-accent, #ff3b30); --_k: var(--sb-ink, #14152a); --_p: var(--sb-paper, #fff6e8); }
.bit-s56-zap { width: 1.6em; height: .55em; background: var(--_a);
  clip-path: polygon(0 50%, 30% 0, 45% 55%, 70% 5%, 100% 50%, 70% 100%, 55% 45%, 30% 95%); }

/* 57 Римшот */
.sb-s57 { --_m: var(--sb-main, #e03a52); --_d: var(--sb-deep, #8e1428); --_l: var(--sb-light, #ff8ea0); --_a: var(--sb-accent, #ffd23f); --_k: var(--sb-ink, #221a14); --_p: var(--sb-paper, #fbf6ea); }
.bit-s57-glint { width: 1.1em; height: 1.1em; background: #fff2b0;
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }

/* 58 Ядно чукане */
.sb-s58 { --_m: var(--sb-main, #c4743a); --_d: var(--sb-deep, #7a3f17); --_l: var(--sb-light, #eab07c); --_a: var(--sb-accent, #e8432a); --_k: var(--sb-ink, #24160c); --_p: var(--sb-paper, #fff1df); }
.bit-s58-hit { width: 1.5em; height: .3em; border-radius: .2em; background: var(--_k); }

/* 59 Фотоапарат */
.sb-s59 { --_m: var(--sb-main, #e8d8b4); --_d: var(--sb-deep, #a8936a); --_l: var(--sb-light, #fff6e0); --_a: var(--sb-accent, #e8432a); --_k: var(--sb-ink, #1c1a1a); --_p: var(--sb-paper, #fffaf0); }
.bit-s59-ray { width: 1.7em; height: .28em; border-radius: .2em; background: color-mix(in oklab, var(--_p) 70%, white); }

/* 60 Клаксон */
.sb-s60 { --_m: var(--sb-main, #ffc21a); --_d: var(--sb-deep, #d4920a); --_l: var(--sb-light, #ffe38a); --_a: var(--sb-accent, #e8432a); --_k: var(--sb-ink, #1e1512); --_p: var(--sb-paper, #f7efdb); }
.bit-s60-honk { width: 1.2em; height: 3.2em; border-radius: 50%; border: .34em solid transparent; border-right-color: var(--_k); }

/* 61 Цвилещ кон */
.sb-s61 { --_m: var(--sb-main, #b8743e); --_d: var(--sb-deep, #6e3d18); --_l: var(--sb-light, #e2a874); --_a: var(--sb-accent, #ffc21a); --_k: var(--sb-ink, #22140a); --_p: var(--sb-paper, #fff4e2); }

/* funnysounds.lol · V5 world: a chunky toy tape recorder with a VU bridge (source: v5/style.css) */

:root {
  --tomato: #ea4a30;
  --tomato-deep: #c43320;
  --tomato-dark: #9c2516;
  --tomato-night: #6a160b;
  --sun: #ffc21a;
  --sun-deep: #d4920a;
  --teal: #16a6a1;
  --teal-deep: #0e6e6a;
  --teal-night: #09504d;
  --ivory: #f7efdb;
  --ivory-deep: #d9c9a4;
  --cobalt: #3a62e0;
  --cobalt-deep: #2443a6;
  --ink: #1e1512;
  --ink-soft: #4a2a20;

  --display: "Russo One", "Manrope", sans-serif;
  --body: "Manrope", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--tomato);
  scrollbar-color: var(--sun) var(--tomato-dark);
  -webkit-text-size-adjust: 100%;
}
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--tomato-dark); }
html::-webkit-scrollbar-thumb { background: var(--sun); border-radius: 8px; border: 3px solid var(--tomato-dark); }

body {
  margin: 0;
  background: var(--tomato);
  color: var(--ink);
  font: 500 1rem/1.45 var(--body);
  overflow-x: hidden;
}

::selection { background: var(--sun); color: var(--ink); }

h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; }
kbd { font: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.ico {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 10px; }

/* ───────────────────────── HERO ───────────────────────── */

.hero {
  position: relative;
  padding: clamp(18px, 3.4vw, 44px) var(--gutter) clamp(20px, 3vw, 36px);
  overflow: hidden;
}

.hero-in {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "stage" "bridge" "deck";
  gap: 14px;
}

.hero-head { grid-area: head; }

.h1 {
  font: 400 clamp(2.5rem, 8.4vw, 4.9rem)/.98 var(--display);
  text-wrap: balance;
  letter-spacing: -0.02em;
  color: var(--ivory);
  text-shadow: 0 3px 3px rgba(120, 22, 8, .55), 0 12px 26px rgba(90, 14, 4, .35);
}

.pitch {
  margin-top: 10px;
  font: 800 clamp(1.05rem, 2.3vw, 1.45rem)/1.25 var(--body);
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 28ch;
  text-wrap: balance;
}

.power {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 .78rem/1 var(--body);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
}
.lamp {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--tomato-night);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  animation: blink 1s steps(2, end) infinite;
}
.power.is-ready .lamp {
  animation: none;
  background: var(--sun);
  box-shadow: inset 0 -1px 2px rgba(150, 80, 0, .6), 0 1px 6px rgba(255, 194, 26, .6);
}
@keyframes blink { 50% { opacity: .25; } }

/* 3D stage */
.stage {
  grid-area: stage;
  position: relative;
  height: clamp(220px, 58vw, 320px);
  margin: 0 calc(var(--gutter) * -1);
}
.stage canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.stage-fallback { display: none; position: absolute; inset: 6% 8%; width: 84%; height: 88%; }
.stage.is-fallback canvas { display: none; }
.stage.is-fallback .stage-fallback { display: block; }
.fb-spk { transform-box: fill-box; transform-origin: center; }

/* VU bridge */
.bridge {
  grid-area: bridge;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 10px 8px;
  background: var(--tomato-deep);
  border-radius: 22px;
  box-shadow: inset 0 4px 10px rgba(80, 10, 0, .35);
}
.meter { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.meter-glass {
  position: relative;
  padding: 4px;
  background: var(--ink);
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(70, 10, 0, .35);
}
.meter-glass canvas {
  display: block; width: 100%;
  aspect-ratio: 1.3;
  border-radius: 8px;
}
/* the glass in front of the meter face: one sheen, nothing else */
.meter-glass::after {
  content: ""; position: absolute; inset: 4px; border-radius: 8px; pointer-events: none;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .12) 34%, rgba(255, 255, 255, 0) 35%),
    linear-gradient(0deg, rgba(60, 30, 10, .16), rgba(60, 30, 10, 0) 30%);
}
.meter-tag {
  font: 800 .7rem/1 var(--body);
  letter-spacing: .04em;
  color: var(--ivory);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Hero deck: the first row of keys */
.deck {
  grid-area: deck;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 8px;
  padding: 16px 10px 14px;
  background: var(--tomato-deep);
  border-radius: 28px;
  box-shadow: inset 0 5px 14px rgba(80, 10, 0, .38);
}
.deck .name { color: var(--ivory); }

@media (min-width: 640px) {
  .deck { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 20px 16px 16px; }
  .meter-tag { font-size: .8rem; }
}

@media (min-width: 960px) {
  .hero-in {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-areas: "head stage" "bridge stage" "deck deck";
    column-gap: 36px; row-gap: 22px;
    align-items: end;
  }
  .stage { height: 440px; margin: 0; align-self: stretch; }
  .bridge { gap: 10px; padding: 12px 12px 10px; }
  .meter-glass canvas { aspect-ratio: 1.55; }
  .deck { padding: 24px 24px 18px; gap: 16px 18px; }
}

/* ───────────────────────── KEYS ───────────────────────── */

.tone-sun    { --cap: var(--sun);    --skirt: var(--sun-deep); }
.tone-teal   { --cap: var(--teal);   --skirt: #0b7470; }
.tone-ivory  { --cap: var(--ivory);  --skirt: var(--ivory-deep); }
.tone-cobalt { --cap: var(--cobalt); --skirt: var(--cobalt-deep); }
.tone-ink    { --cap: #2c211d;       --skirt: #120c0a; }

.item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; min-width: 0;
}
.item[hidden] { display: none; }

.key {
  position: relative;
  display: block;
  width: 100%; max-width: 132px;
  aspect-ratio: 1;
  padding: 0; border: 0; background: none;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
}
.item--hero .key { max-width: 148px; }
.key:focus-visible { outline: none; }
.key:focus-visible .key-well { box-shadow: inset 0 6px 10px rgba(40, 5, 0, .55), 0 0 0 4px var(--sun); }

.key-ring { position: absolute; inset: 0; opacity: 0; transition: opacity .18s ease-out; pointer-events: none; }
.key-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rg-track { fill: none; stroke: rgba(90, 14, 4, .42); stroke-width: 5.5; }
.rg-fill  { fill: none; stroke: var(--sun); stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.rg-teeth { fill: none; stroke: var(--ivory); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: .1 5.9; opacity: .9; }
.key.is-playing .key-ring { opacity: 1; }

.key-body {
  position: absolute; inset: 9%;
  transition: translate .3s var(--ease-out);
  pointer-events: none;
}
.key-well {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--tomato-night);
  translate: 0 4px;
  box-shadow: inset 0 6px 10px rgba(40, 5, 0, .55);
}
.key-skirt {
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: var(--skirt);
  translate: 0 7px;
  box-shadow: 0 5px 9px rgba(60, 8, 0, .45);
}
.key-cap {
  position: absolute; inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 52%),
    var(--cap);
  box-shadow: inset 0 3px 3px rgba(255, 255, 255, .45), inset 0 -5px 8px rgba(0, 0, 0, .18);
  will-change: transform;
}
.mm {
  position: absolute; left: 21%; top: 21%;
  width: 58%; height: auto;
  overflow: hidden;
}
.mm-face { fill: var(--ivory); }
.tone-ivory .mm-face { fill: #ece0c2; }
.mm-arc  { fill: none; stroke: var(--ink); stroke-width: 1.7; }
.mm-red  { fill: none; stroke: #e2271a; stroke-width: 3.6; }
.mm-t    { stroke: var(--ink); stroke-width: 1.4; }
.mm-tr   { stroke: #e2271a; stroke-width: 1.4; }
.mm-needle line { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.mm-hub  { fill: var(--ink); }

.key-lamp {
  position: absolute; left: 50%; bottom: 17%;
  width: 11%; aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(30, 10, 5, .28);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.key-lamp::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe9a8 0 25%, #ff3b1f 60%);
  opacity: 0; transition: opacity .12s;
}
.tone-cobalt .key-lamp::after, .tone-teal .key-lamp::after { background: radial-gradient(circle at 40% 35%, #fff4c4 0 25%, var(--sun) 65%); }
.key.is-playing .key-lamp::after { opacity: 1; }

.key-waves { position: absolute; inset: 9%; pointer-events: none; }
.key-waves i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid transparent;
  border-left-color: var(--ivory); border-right-color: var(--ivory);
  opacity: 0;
}

.kbd {
  display: none;
  position: absolute; top: 2%; right: 2%;
  min-width: 22px; height: 22px; padding: 0 5px;
  place-items: center;
  border-radius: 7px;
  background: var(--ink); color: var(--ivory);
  font: 800 .7rem/1 var(--body);
  pointer-events: none;
}

@media (hover: hover) {
  .kbd { display: grid; }
  .key:hover .key-body { translate: 0 -3px; }
}

.name {
  font: 800 .92rem/1.15 var(--body);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  padding: 1px 6px;
  border-radius: 8px;
  transition: background .2s, color .2s;
}

/* ───────────────────────── BOARD ───────────────────────── */

.board {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) 12px 48px;
}
.sec-title {
  font: 400 clamp(1.7rem, 4.2vw, 2.6rem)/1.05 var(--display);
  letter-spacing: -0.01em;
  color: var(--ivory);
  text-shadow: 0 2px 3px rgba(120, 22, 8, .5);
  margin: 0 4px 14px;
  text-wrap: balance;
}
.controls {
  position: sticky; top: 0; z-index: 30;
  margin: 0 -12px 22px;
  padding: 10px 12px;
  background: var(--tomato-dark);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 12px 22px -10px rgba(70, 10, 0, .55);
}
.controls-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "search stop" "chips vol";
  gap: 10px;
  align-items: center;
}
@media (min-width: 960px) {
  .controls { top: 10px; margin: 0 0 26px; border-radius: 22px; padding: 12px; }
  .controls-in { grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) 140px auto; grid-template-areas: "search chips vol stop"; }
}

.search {
  grid-area: search;
  display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 6px 0 12px;
  background: var(--ivory);
  border-radius: 14px;
  color: var(--ink-soft);
  box-shadow: inset 0 3px 6px rgba(70, 25, 5, .28);
  transition: box-shadow .15s;
  min-width: 0;
}
.search:focus-within { box-shadow: inset 0 3px 6px rgba(70, 25, 5, .28), 0 0 0 3px var(--sun); }
.search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  font: 700 1rem var(--body);
  color: var(--ink);
  caret-color: var(--tomato);
  -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: #6b4a3a; opacity: 1; }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-clear {
  width: 34px; height: 34px; flex: none; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: rgba(30, 21, 18, .1); color: var(--ink);
  cursor: pointer;
}
.search-clear[hidden] { display: none; }
.search-clear .ico { width: 18px; height: 18px; }

.chips {
  grid-area: chips;
  display: flex; gap: 6px;
  overflow-x: auto; min-width: 0;
  padding: 2px 2px 6px;
  margin-bottom: -4px;
  scrollbar-width: thin;
  scrollbar-color: var(--sun) transparent;
  overscroll-behavior-x: contain;
}
.chips::-webkit-scrollbar { height: 5px; }
.chips::-webkit-scrollbar-thumb { background: var(--sun); border-radius: 4px; }
.chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px;
  border: 0; border-radius: 12px;
  background: var(--tomato-deep);
  color: var(--ivory);
  font: 800 .86rem/1 var(--body);
  letter-spacing: .02em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 -3px 4px rgba(60, 5, 0, .25), 0 3px 6px rgba(60, 5, 0, .25);
  transition: background .15s, color .15s, translate .15s var(--ease-out), box-shadow .15s;
}
.chip .ico { width: 15px; height: 15px; }
.chip[aria-pressed="true"] {
  background: var(--sun); color: var(--ink);
  translate: 0 2px;
  box-shadow: inset 0 -2px 3px rgba(120, 60, 0, .35), 0 1px 2px rgba(60, 5, 0, .25);
}
.chip[aria-pressed="true"] .ico path { fill: currentColor; }
@media (hover: hover) {
  .chip:not([aria-pressed="true"]):hover { background: var(--tomato-night); }
}

.vol {
  grid-area: vol;
  display: flex; align-items: center; gap: 8px;
  width: 140px;
  color: var(--ivory);
}
@media (min-width: 960px) { .vol { width: auto; } }
.vol.is-mute .vol-w, .vol.is-mute .vol-w2 { opacity: .2; }
.vol input {
  --v: 85%;
  flex: 1; min-width: 0;
  height: 32px; margin: 0;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}
.vol input:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.vol input::-webkit-slider-runnable-track {
  height: 10px; border-radius: 6px;
  background: linear-gradient(var(--sun), var(--sun)) 0 0 / var(--v) 100% no-repeat, var(--tomato-night);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4);
}
.vol input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 28px; margin-top: -9px;
  border: 0; border-radius: 7px;
  background: linear-gradient(90deg, transparent 45%, var(--ink) 45% 55%, transparent 55%) center / 100% 60% no-repeat, var(--ivory);
  box-shadow: 0 3px 6px rgba(40, 5, 0, .45), inset 0 -3px 4px rgba(0, 0, 0, .15);
}
.vol input::-moz-range-track { height: 10px; border-radius: 6px; background: var(--tomato-night); }
.vol input::-moz-range-progress { height: 10px; border-radius: 6px; background: var(--sun); }
.vol input::-moz-range-thumb {
  width: 22px; height: 28px; border: 0; border-radius: 7px;
  background: linear-gradient(90deg, transparent 45%, var(--ink) 45% 55%, transparent 55%) center / 100% 60% no-repeat, var(--ivory);
  box-shadow: 0 3px 6px rgba(40, 5, 0, .45);
}

.stop {
  grid-area: stop;
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 16px 0 12px;
  border: 0; border-radius: 14px;
  background: var(--ink); color: var(--ivory);
  font: 800 .92rem/1 var(--body);
  letter-spacing: .02em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  box-shadow: 0 6px 12px rgba(40, 5, 0, .4), inset 0 2px 2px rgba(255, 255, 255, .12);
  white-space: nowrap;
}
.stop .ico { color: var(--sun); }
.stop .ico rect { fill: currentColor; stroke: none; }

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 8px;
}
@media (min-width: 600px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 12px; } }
@media (min-width: 820px)  { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 16px; } }
@media (min-width: 1240px) { .grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* Ad slot: a cassette door */
.ad {
  grid-column: 1 / -1;
  position: relative;
  height: 100px;
  display: grid; place-items: center;
  border-radius: 20px;
  background: var(--tomato-deep);
  box-shadow: inset 0 6px 14px rgba(80, 10, 0, .38);
}
.ad[hidden] { display: none; }
.ad::before, .ad::after {
  content: ""; position: absolute; top: 50%;
  width: 40px; height: 40px; margin-top: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tomato-deep) 0 24%, var(--tomato-dark) 25% 100%);
}
.ad::before { left: 14%; }
.ad::after  { right: 14%; }
.ad-label {
  font: 800 .72rem/1 var(--body);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivory);
}
@media (min-width: 700px) { .ad { height: 90px; } }

/* Empty state */
.empty { text-align: center; padding: 36px 16px 20px; }
.empty[hidden] { display: none; }
.empty-art { width: 120px; height: 76px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.empty-art rect { fill: var(--tomato-deep); stroke: none; }
.empty-art circle { fill: var(--ivory); stroke: none; }
.empty-title { margin-top: 14px; font: 400 1.5rem/1.1 var(--display); color: var(--ivory); }
.empty-text { margin: 8px auto 0; max-width: 34ch; font-weight: 700; color: var(--ink); }
.empty-btn {
  margin-top: 16px; height: 44px; padding: 0 18px;
  border: 0; border-radius: 14px;
  background: var(--sun); color: var(--ink);
  font: 800 .95rem/1 var(--body);
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(60, 8, 0, .35);
}

/* ───────────────────────── TOAST ───────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
  translate: -50% 0;
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px 12px 14px;
  background: var(--ink); color: var(--ivory);
  border-radius: 16px;
  font: 800 .95rem/1.2 var(--body);
  letter-spacing: .01em;
  box-shadow: 0 14px 30px rgba(40, 5, 0, .45);
  opacity: 0; visibility: hidden;
  pointer-events: none;
}
.toast-led { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--sun); box-shadow: 0 1px 6px rgba(255, 194, 26, .7); }

/* ───────────────────────── MOTION ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lamp { animation: none; }
  .key-body, .chip, .act { transition: none; }

}

/* fill the row before the ad slot */
:has(> .ad) { grid-auto-flow: row dense; }


/* ═════════════════════════ FINISH: chrome + sections + pages ═════════════════════════ */

a { color: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.h1 {
  color: var(--ivory);
  text-shadow: 0 3px 3px rgba(120, 22, 8, .55), 0 12px 26px rgba(90, 14, 4, .35);
}
.h1--page { font-size: clamp(2.2rem, 6vw, 3.8rem); }

/* ───────── header ───────── */
.top { position: relative; z-index: 50; padding: 10px var(--gutter) 0; }
.top-in {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  min-height: 60px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-right: auto;
  text-decoration: none; color: var(--ink);
  font: 400 1.6rem/1 var(--display); letter-spacing: -0.01em;
}
.logo-mark { width: 40px; height: 28px; flex: none; filter: drop-shadow(0 3px 4px rgba(90, 14, 4, .35)); }
.top-nav { display: flex; align-items: center; gap: 18px; }
.top-nav ul { display: flex; gap: 4px; }
.top-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 12px;
  font: 800 .98rem/1 var(--body); color: var(--ink); text-decoration: none;
  transition: background .15s, color .15s;
}
@media (hover: hover) { .top-nav a:hover { background: var(--tomato-dark); color: var(--ivory); } }
.menu-btn {
  display: none; width: 48px; height: 48px; padding: 0; place-items: center;
  border: 0; border-radius: 14px; background: var(--ink); color: var(--ivory); cursor: pointer;
  box-shadow: 0 6px 12px rgba(60, 8, 0, .35);
}
.menu-btn .ico + .ico { display: none; }
.top.is-open .menu-btn .ico:first-of-type { display: none; }
.top.is-open .menu-btn .ico + .ico { display: block; }

@media (max-width: 859px) {
  .menu-btn { display: grid; }
  .top-nav {
    display: none;
    position: absolute; left: 12px; right: 12px; top: calc(100% + 6px);
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 10px; border-radius: 22px;
    background: var(--tomato-dark);
    box-shadow: 0 18px 30px rgba(60, 8, 0, .45);
  }
  .top.is-open .top-nav { display: flex; }
  .top-nav ul { flex-direction: column; gap: 2px; }
  .top-nav a { width: 100%; min-height: 50px; padding: 0 14px; color: var(--ivory); font-size: 1.1rem; }
}

/* ───────── hero tweaks ───────── */
.hero { padding-top: clamp(8px, 2vw, 24px); }
.deck .name {
  color: var(--ivory); text-decoration: none;
  min-height: 32px; display: inline-flex; align-items: center;
}
@media (hover: hover) { .deck .name:hover { background: var(--ink); color: var(--sun); } }

/* ───────── sound cell (library button in a moulded well) ───────── */
.cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; min-width: 0;
}
.cell[hidden] { display: none; }
.well {
  position: relative; width: 100%;
  padding: 9%;
  border-radius: 26%;
  background: var(--tomato-deep);
  box-shadow: inset 0 5px 12px rgba(80, 10, 0, .42), 0 1px 0 rgba(255, 220, 200, .25);
}
.slot { width: 100%; }
.nolib { font: 700 .8rem/1.2 var(--body); color: var(--ivory); text-align: center; padding: 30% 0; }
.well .kbd { top: 6px; right: 6px; z-index: 2; }

.tape { display: flex; align-items: center; gap: 5px; width: 72%; height: 14px; margin-top: 2px; }
.reel {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  background:
    radial-gradient(circle, var(--ink) 0 1.7px, transparent 2.2px),
    repeating-conic-gradient(var(--ivory) 0 50deg, var(--ivory-deep) 50deg 70deg);
  box-shadow: 0 1px 2px rgba(60, 8, 0, .35);
}
.spool { flex: 1; height: 4px; border-radius: 3px; background: var(--tomato-night); overflow: hidden; }
.spool b { display: block; height: 100%; background: var(--sun); transform: scaleX(0); transform-origin: 0 50%; }
.cell.is-playing .reel { animation: reel .7s linear infinite; }
.cell.is-playing .reel + .spool + .reel { animation-duration: 1s; }
@keyframes reel { to { transform: rotate(360deg); } }

.cell .name {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; max-width: 100%;
  padding: 2px 8px;
  color: var(--ink); text-decoration: none; text-align: center;
  font: 800 .95rem/1.15 var(--body);
}
a.name { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 2px; transition: text-decoration-color .15s, background .15s; }
@media (hover: hover) { a.name:hover { text-decoration-color: currentColor; } }

.acts { display: flex; justify-content: center; margin-top: auto; }
.act {
  position: relative;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--ink);
  cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.act::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: rgba(110, 20, 5, .22);
  transition: background .15s;
}
.act .ico { position: relative; width: 17px; height: 17px; }
.act:active::before { transform: scale(.9); }
.act[aria-pressed="true"] { color: var(--sun); }
.act[aria-pressed="true"]::before { background: var(--ink); }
.act[aria-pressed="true"] path { fill: currentColor; }
@media (hover: hover) {
  .act:hover { color: var(--ivory); }
  .act:hover::before { background: var(--ink); }
}
@media (max-width: 599px) { .act-dl { display: none; } }

.cell.is-linked .well { box-shadow: inset 0 5px 12px rgba(80, 10, 0, .42), 0 0 0 4px var(--sun); animation: linkpulse .9s ease-in-out 5; }
@keyframes linkpulse { 50% { box-shadow: inset 0 5px 12px rgba(80, 10, 0, .42), 0 0 0 4px rgba(255, 194, 26, .2); } }

/* ───────── picks: a big cassette ───────── */
.picks { max-width: 1240px; margin: 0 auto; padding: 8px 12px 48px; }
.tapebox {
  position: relative;
  padding: 14px 14px 22px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 18px 18px, #4a3a33 0 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 18px) 18px, #4a3a33 0 4px, transparent 4.5px),
    radial-gradient(circle at 18px calc(100% - 18px), #4a3a33 0 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #4a3a33 0 4px, transparent 4.5px),
    #2a1e1a;
  box-shadow: 0 18px 34px -12px rgba(70, 10, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .08);
}
.tapebox-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 18px; padding: 12px 14px 22px 18px;
  border-radius: 16px;
  background:
    linear-gradient(var(--tomato) 0 0) 0 100% / 100% 6px no-repeat,
    linear-gradient(var(--sun) 0 0) 0 calc(100% - 6px) / 100% 6px no-repeat,
    var(--ivory);
}
.tapebox-title { font: 400 clamp(1.3rem, 3vw, 1.8rem)/1.05 var(--display); color: var(--ink); }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--ivory-deep); }
.tab {
  min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  font: 800 .9rem/1 var(--body); cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--ink); color: var(--sun); }
.tapebox-note { margin: 14px 18px 18px; color: var(--ivory); font-weight: 700; font-size: .95rem; }
.pick-set {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px;
  padding: 0 6px;
}
.pick-set[hidden] { display: none; }
@media (min-width: 760px) { .pick-set { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 18px; padding: 0 18px; } }
.cell--pick .well { background: #3a2b25; box-shadow: inset 0 5px 12px rgba(0, 0, 0, .5); }
.cell--pick .name { color: var(--ivory); }
.cell--pick .spool { background: #120c0a; }

/* ───────── category rack: cassettes ───────── */
.cats { max-width: 1240px; margin: 0 auto; padding: 8px 12px 56px; }
.sec-sub { margin: -6px 4px 20px; font-weight: 700; color: var(--ink); }
.rack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
@media (min-width: 760px) { .rack { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 759px) { .rack > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.cas {
  --body-c: var(--sun); --win: var(--ink);
  position: relative;
  display: grid; grid-template-rows: auto 1fr; gap: 10px;
  min-height: 150px; padding: 12px 12px 16px;
  border-radius: 18px;
  background: var(--body-c);
  color: var(--ink); text-decoration: none;
  box-shadow: 0 10px 18px -6px rgba(70, 10, 0, .5), inset 0 -6px 0 rgba(0, 0, 0, .12), inset 0 2px 0 rgba(255, 255, 255, .35);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.cas--teal { --body-c: var(--teal); }
.cas--ivory { --body-c: var(--ivory); }
.cas--cobalt { --body-c: var(--cobalt); }
.cas--ink { --body-c: #2c211d; }
.cas-label {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px 14px; border-radius: 10px;
  background: var(--ivory);
  box-shadow: inset 0 -4px 0 var(--tomato);
}
.cas--ivory .cas-label { background: #fffaf0; }
.cas-name { font: 400 1.3rem/1 var(--display); color: var(--ink); }
.cas-n { font: 800 .82rem/1 var(--body); color: var(--ink-soft); }
.cas-win {
  align-self: end; justify-self: start;
  display: flex; align-items: center; justify-content: space-between;
  width: min(140px, 64%); height: 36px; padding: 0 10px;
  border-radius: 18px; background: var(--win);
}
.cas-win i {
  width: 22px; height: 22px; border-radius: 50%;
  background:
    radial-gradient(circle, var(--win) 0 3px, transparent 3.5px),
    repeating-conic-gradient(var(--ivory) 0 50deg, var(--ivory-deep) 50deg 70deg);
}
.cas--ink .cas-win { --win: #120c0a; }
.cas-go {
  position: absolute; right: 12px; bottom: 14px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: var(--sun);
}
.cas-go .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.cas--ink .cas-go { background: var(--sun); color: var(--ink); }
@media (hover: hover) {
  .cas:hover { transform: translateY(-5px) rotate(-1.2deg); box-shadow: 0 18px 26px -8px rgba(70, 10, 0, .55), inset 0 -6px 0 rgba(0, 0, 0, .12), inset 0 2px 0 rgba(255, 255, 255, .35); }
  .cas:hover .cas-win i { animation: reel 1s linear infinite; }
}
.cas:focus-visible { outline-color: var(--ink); }

/* ───────── parents: the speaker grille ───────── */
.parents { max-width: 1240px; margin: 0 auto; padding: 0 12px 56px; }
.grille {
  display: grid; gap: 28px;
  padding: clamp(26px, 4vw, 48px);
  border-radius: 34px;
  background-color: var(--teal-deep);
  background-image: radial-gradient(circle, var(--teal-night) 0 2px, transparent 2.5px);
  background-size: 14px 14px;
  box-shadow: inset 0 0 0 10px var(--sun), inset 0 14px 22px rgba(0, 30, 28, .45), 0 18px 30px -12px rgba(70, 10, 0, .5);
  color: var(--ivory);
}
@media (min-width: 900px) { .grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; } }
.sec-title--sun { color: var(--sun); text-shadow: 0 2px 3px rgba(0, 30, 28, .5); }
.about p { max-width: 62ch; margin-top: 12px; font-weight: 700; font-size: 1.02rem; line-height: 1.55; }
.about a { color: var(--ivory); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--sun); }
.faq-title { font: 400 1.4rem/1 var(--display); color: var(--ivory); margin: 4px 4px 14px; }
.faq details {
  margin-top: 10px;
  border-radius: 16px;
  background: var(--ivory);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ivory-deep), 0 8px 14px rgba(0, 30, 28, .35);
}
.faq summary {
  position: relative;
  display: flex; align-items: center; min-height: 52px;
  padding: 10px 52px 10px 16px;
  font: 800 1rem/1.25 var(--body);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq summary::before {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 16px; height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: var(--tomato-dark);
  transition: transform .3s var(--ease-out);
}
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0); }
.faq details p { padding: 0 16px 16px; color: var(--ink-soft); font-weight: 700; line-height: 1.5; max-width: 60ch; }

/* ───────── footer ───────── */
.foot {
  background: var(--ink); color: var(--ivory);
  padding: 40px var(--gutter) calc(48px + env(safe-area-inset-bottom));
}
.foot-in { max-width: 1240px; margin: 0 auto; display: grid; gap: 26px; }
@media (min-width: 860px) { .foot-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .foot-row { grid-column: 1 / -1; } }
.foot-brand { font: 400 2rem/1 var(--display); color: var(--sun); text-decoration: none; }
.foot-hint { margin-top: 12px; font-weight: 700; max-width: 52ch; line-height: 1.7; }
.foot-hint kbd, .specs kbd {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 5px;
  border-radius: 7px;
  background: var(--ivory); color: var(--ink);
  font: 800 .75rem/1 var(--body);
  vertical-align: 1px;
  box-shadow: 0 2px 0 var(--ivory-deep);
}
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.foot-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; color: var(--ivory); text-decoration: none;
}
@media (hover: hover) { .foot-nav a:hover { color: var(--sun); } }
.foot-row {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding-top: 20px; border-top: 2px solid #3a2b25;
}
.foot-note { font-weight: 700; font-size: .92rem; }
.foot-note a { color: var(--sun); text-underline-offset: 3px; }

/* ───────── inner pages ───────── */
.page { max-width: 1240px; margin: 0 auto; padding: 4px 12px 0; }
.page > .cats, .page > .parents { padding-left: 0; padding-right: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0 4px 6px; }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; font: 800 .9rem/1 var(--body); color: var(--ink); }
.crumbs li + li::before {
  content: ""; width: 7px; height: 7px; margin: 0 12px 0 6px;
  border-top: 2.4px solid var(--ink); border-right: 2.4px solid var(--ink);
  transform: rotate(45deg);
}
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; text-decoration-thickness: 2px; }

.solo { display: grid; gap: 22px; padding-bottom: 52px; }
@media (min-width: 900px) { .solo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; } }
.solo-toy {
  display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2.6vw, 28px);
  padding: clamp(16px, 3vw, 34px) clamp(12px, 3vw, 30px);
  border-radius: 40px;
  background: var(--tomato-deep);
  box-shadow: inset 0 8px 18px rgba(80, 10, 0, .4), 0 1px 0 rgba(255, 220, 200, .25);
}
.spk {
  flex: none;
  width: clamp(52px, 15vw, 128px); aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(5px, 1.3vw, 10px) solid var(--sun);
  background:
    radial-gradient(circle, var(--sun) 0 15%, transparent 16%),
    radial-gradient(circle, #0a5e5a 0 1.6px, transparent 2px) 0 0 / 8px 8px,
    var(--teal);
  box-shadow: 0 6px 10px rgba(60, 8, 0, .4), inset 0 4px 8px rgba(0, 40, 38, .45);
  will-change: transform;
}
.solo-slot { width: clamp(170px, 46vw, 250px); flex: none; }
@media (min-width: 900px) { .solo-slot { width: clamp(200px, 21vw, 260px); } .spk { width: clamp(64px, 7.5vw, 112px); } }
.cell--solo .name { display: none; }
.cell--solo .well { background: var(--tomato-dark); }
.cell--solo .tape { width: 64%; height: 18px; }
.cell--solo .reel { width: 17px; height: 17px; }
.cell--solo .spool { height: 6px; }
.solo-desc { margin-top: 14px; max-width: 46ch; font: 700 1.1rem/1.5 var(--body); color: var(--ink); }
.specs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.specs > div {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border-radius: 12px; background: var(--tomato-dark);
}
.specs > div[hidden] { display: none; }
.specs dt { font: 800 .8rem/1 var(--body); color: var(--ivory); }
.specs dd { font: 800 .95rem/1 var(--body); color: var(--sun); }
.specs dd a { color: var(--sun); text-underline-offset: 3px; }
@media (hover: none) { .spec-key { display: none !important; } }
.solo-acts { display: flex; flex-wrap: wrap; gap: 12px 10px; margin-top: 20px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 50px; padding: 0 20px 0 16px;
  border: 0; border-radius: 16px;
  background: var(--ink); color: var(--ivory);
  font: 800 1rem/1 var(--body); cursor: pointer;
  box-shadow: 0 6px 0 #000, 0 10px 18px rgba(60, 8, 0, .35);
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pill:active { transform: translateY(5px); box-shadow: 0 1px 0 #000, 0 4px 8px rgba(60, 8, 0, .35); }
.pill--sun { background: var(--sun); color: var(--ink); box-shadow: 0 6px 0 var(--sun-deep), 0 10px 18px rgba(60, 8, 0, .35); }
.pill--sun:active { box-shadow: 0 1px 0 var(--sun-deep), 0 4px 8px rgba(60, 8, 0, .35); }
.pill--fav[aria-pressed="true"] { color: var(--sun); }
.pill--fav[aria-pressed="true"] path { fill: currentColor; }
.solo-hint { margin-top: 16px; font-weight: 700; font-size: .92rem; color: var(--ink); }

.more { padding-bottom: 48px; }
.cat-head { padding: 4px 4px 22px; }
.cat-intro { margin-top: 12px; max-width: 56ch; font: 700 1.1rem/1.5 var(--body); color: var(--ink); }
.cat-count {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; margin-left: 4px;
  border-radius: 9px; background: var(--ink); color: var(--sun);
  font: 800 .85rem/1 var(--body); vertical-align: 1px;
}
.board--cat { padding: 0 0 48px; }
.parents--cat { padding: 0 0 48px; }

@media (prefers-reduced-motion: reduce) {
  .cell.is-playing .reel, .cas:hover .cas-win i { animation: none; }
  .cas, .pill { transition: none; }
  .cell.is-linked .well { animation: none; }
}

/* ═════════════════════════ FINAL BUILD (funnysounds.lol) ═════════════════════════ */

html { scroll-padding-top: 12px; }
body { text-rendering: optimizeLegibility; }
::-moz-selection { background: var(--sun); color: var(--ink); }

/* skip link */
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 16px; border-radius: 12px;
  background: var(--ink); color: var(--sun); font-weight: 800; text-decoration: none;
}
.skip:focus { top: 12px; }

/* logo: Funny Sounds + a toy-label .lol tag */
.logo-t { white-space: nowrap; }
.logo-tag {
  display: inline-block; margin-left: -4px; padding: 4px 7px 5px;
  border-radius: 7px; background: var(--ink); color: var(--sun);
  font: 800 .78rem/1 var(--body); letter-spacing: .02em;
  transform: rotate(-4deg) translateY(-6px);
  box-shadow: 0 3px 5px rgba(90, 14, 4, .35);
}
.logo-tag--foot { margin-left: 6px; background: var(--sun); color: var(--ink); vertical-align: 6px; }
@media (max-width: 380px) { .logo { font-size: 1.36rem; gap: 8px; } .logo-mark { width: 34px; height: 24px; } }
.top-nav a[aria-current="page"] { background: var(--ink); color: var(--sun); }

/* cards: reserve the button's square before the library mounts (CLS 0) */
.slot { position: relative; aspect-ratio: 1; }
.slot > .sbx { position: absolute; inset: 0; }
.slot-ph {
  position: absolute; inset: 8%; border-radius: 28%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%), var(--tomato-dark);
  box-shadow: inset 0 -6px 10px rgba(60, 5, 0, .35);
}
.cell[data-pal="0"] .slot-ph { background-color: #d4920a; }
.cell[data-pal="1"] .slot-ph { background-color: var(--teal-deep); }
.cell[data-pal="2"] .slot-ph { background-color: var(--cobalt-deep); }
.cell[data-pal="3"] .slot-ph { background-color: var(--ivory-deep); }

/* rack columns follow the real number of categories */
.rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .rack { grid-template-columns: repeat(var(--cm, 4), minmax(0, 1fr)); } .rack > :last-child:nth-child(odd) { grid-column: auto; } }
@media (min-width: 1060px) { .rack { grid-template-columns: repeat(var(--cw, 5), minmax(0, 1fr)); } }
.cas-name { text-wrap: balance; }

/* home bits */
.board .sec-sub { margin: -4px 4px 18px; max-width: 60ch; }
.stage.is-3d canvas { animation: stage-in .6s var(--ease-out) both; }
@keyframes stage-in { from { opacity: 0; transform: scale(.96); } }

/* sound page */
.solo-name { margin-top: 10px; font: 700 .95rem/1.3 var(--body); color: var(--ink); }
.solo-name strong { font-weight: 800; }
.solo-desc { max-width: 58ch; font-size: 1.06rem; }
.solo-uses { margin-top: 10px; font: 800 1rem/1.4 var(--body); color: var(--ink); }
.page > .ad { margin-bottom: 40px; }

/* empty states with links */
.empty-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
a.empty-btn { display: inline-flex; align-items: center; margin-top: 0; text-decoration: none; }
.empty-btn--ink { background: var(--ink); color: var(--ivory); }
.empty--fav { padding-top: 12px; }
.empty[hidden], .grid[hidden] { display: none; }
.cat-head--404 { padding-top: 24px; }
.board--cat .empty-links { margin-top: 28px; }

/* prose pages: moulded panels in the toy's body (ivory on deep tomato ≥ 4.7:1) */
.prose-wrap { display: grid; gap: 22px; padding-bottom: 48px; }
.panel {
  padding: clamp(22px, 4vw, 40px);
  border-radius: 32px;
  background: var(--tomato-deep);
  color: var(--ivory);
  box-shadow: inset 0 6px 16px rgba(80, 10, 0, .4), 0 1px 0 rgba(255, 220, 200, .25);
}
.panel-title { font: 400 clamp(1.3rem, 3vw, 1.7rem)/1.1 var(--display); color: var(--sun); margin: 28px 0 0; text-wrap: balance; }
.panel-title:first-child { margin-top: 0; }
.panel p { max-width: 68ch; margin-top: 10px; font-weight: 700; line-height: 1.6; }
.panel a { color: var(--ivory); text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (hover: hover) { .panel a:hover { color: var(--sun); } }
.panel-note { font-size: .9rem; opacity: .9; }
.panel .pill { text-decoration: none; }
.contact-mail { margin: 16px 0 8px; }
.contact-mail .pill { color: var(--ink); max-width: 100%; }
.contact-mail .pill span { overflow-wrap: anywhere; }
.ticks { margin-top: 12px; display: grid; gap: 10px; max-width: 68ch; }
.ticks li { position: relative; padding-left: 30px; font-weight: 700; line-height: 1.5; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .28em;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, var(--ink) 0 2.6px, transparent 3px), var(--sun);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}
.grille--page .sec-title--sun + p, .grille--page .ticks + p { margin-top: 16px; }
.grille--page .sec-title { margin-top: 30px; }
.grille--page .sec-title:first-child { margin-top: 0; }
.grille .ticks li { color: var(--ivory); }
.faq--page { padding: 8px 0 8px; max-width: 860px; }
.faq--page .sec-title { margin-bottom: 4px; }


/* footer */
.foot-h { margin: 0 0 4px; font: 800 .78rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--sun); }
.foot-nav { align-items: start; }
.foot-nav ul { display: block; }
.foot-mail { margin-top: 14px; }
.foot-mail a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--sun); font-weight: 800; text-decoration: none; }
.foot-mail a span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.foot-row { gap: 6px 24px; }
.foot-note { color: var(--ivory); }

@media (prefers-reduced-motion: reduce) {
  .stage.is-3d canvas { animation: none; }
}
.prose-wrap > * { min-width: 0; }
.grid--more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1060px) { .grid--more { grid-template-columns: repeat(6, minmax(0, 1fr)); } }