/* story/story.css - everything under .st-stage (Builder B). Palette and font tokens come from page.css,
   always with literal fallbacks. Stage vars (px) are written by applyStageVars() in props.js; the
   fallbacks below match 390 x 844 (H 120). The state contract is in the header of props.js.
   Engine additions (story.js): .z-top/.z-under/.st-hexi.z-sand riders, .st-narrow bubble (--bn), .st-seek. */

.st-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  --w: 390px; --h: 195px; --H: 120px; --W: 75px; --D: 29px; --gy: 179px;
  --hexiW: 55px; --hexiH: 40px; --sW: 102px; --sH: 71px; --noodleH: 58px;
  font-family: var(--sv-sans, "Outfit", system-ui, sans-serif);
}
.st-stage svg text { font-family: var(--sv-mono, "DM Mono", ui-monospace, monospace); font-weight: 500; }
.st-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.st-world { position: absolute; inset: 0; }
.st-world.st-iris { will-change: clip-path; }

/* ------------------------------------------------------------ sets and layers */
.st-set { position: absolute; inset: 0; }
.st-set.st-off { display: none; }
.st-l-back, .st-l-wall, .st-l-deck, .st-l-sand, .st-l-strata { position: absolute; left: 0; top: 0; overflow: visible; }
.st-l-back, .st-tint { z-index: 1; }
.st-l-wall { z-index: 2; }
.st-l-deck, .st-l-strata { z-index: 3; }
.st-l-sand { z-index: 4; }
/* the dune planet brings its own dusk sky (it fades in from the strip's top edge, so the home ridges
   behind the strip do not show through on another planet), with the spec's honey tint over it */
.st-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(247, 168, 72, 0), rgba(247, 168, 72, .18) 32px, transparent 60%),
    linear-gradient(180deg, rgba(38, 27, 74, 0) 0%, rgba(52, 32, 86, .92) 24%, #5a3474 50%, #9a5068 76%, #c8714f);
}
/* every prop positions itself, wherever it is appended */
.st-set > div, .st-bench, .st-mo, .st-lamp, .st-printer, .st-pad, .st-airlock, .st-airlock-back, .st-wash, .st-mumble,
.st-diner, .st-ripple, .st-launch, .st-bookshelf, .st-tubes, .st-scope, .st-rocks, .st-cup { position: absolute; }
.st-set > div > svg, .st-bench > svg, .st-mo > svg, .st-lamp > svg, .st-pad > svg, .st-airlock > svg, .st-mumble > svg,
.st-ripple > svg, .st-launch > svg, .st-bookshelf > svg, .st-tubes > svg, .st-scope > svg, .st-rocks > svg, .st-cup > svg {
  position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; overflow: visible;
}

/* ------------------------------------------------------------ bench, Mo, lamp, printer */
.st-bench { z-index: 4; }
.st-bench svg * { vector-effect: non-scaling-stroke; }
.st-bench-spool {
  position: absolute; left: 47%; bottom: 28%; height: 50%; aspect-ratio: 1;
  border: 2px solid #3b2346; border-radius: 50%;
  background: radial-gradient(circle, #f5efdf 0 18%, #3b2346 19% 25%, #f7c948 26% 100%);
}

.st-mo { z-index: 5; }
.st-mo-eyes { transform-box: fill-box; transform-origin: center; animation: st-moblink 5.2s steps(1, end) infinite; }
@keyframes st-moblink { 0%, 92%, 100% { transform: scaleY(1); } 94%, 97% { transform: scaleY(.15); } }
.st-mo-bar { transform-box: fill-box; transform-origin: left; animation: st-scalex 3.4s steps(6, jump-none) infinite; }
.st-mo.busy .st-mo-bar { animation-duration: .6s; }
@keyframes st-scalex { from { transform: scaleX(.14); } to { transform: scaleX(1); } }
.st-mo-nap, .st-mo-rec { display: none; }
.st-mo.nap .st-mo-nap, .st-mo.rec .st-mo-rec { display: inline; }
.st-mo.nap .st-mo-face, .st-mo.rec .st-mo-face, .st-mo.nap .st-mo-rec { display: none; }
.st-mo-cursor, .st-mo-dot { animation: st-blink 1s steps(2, jump-none) infinite; }
.st-mo-cursor { animation-duration: .8s; }
@keyframes st-blink { from { opacity: 1; } to { opacity: .12; } }
.st-mo-tick {
  position: absolute; left: 12%; top: 14.1%; width: 64%; height: 58.7%;
  display: none; align-items: center; overflow: hidden;
  border-radius: 15% / 18%; background: #132a40;
}
.st-stage.st-ticker .st-mo.ticking .st-mo-tick { display: flex; }
.st-mo-tick i {
  display: inline-block; padding-left: 100%; white-space: nowrap; font-style: normal;
  color: #ffdc8f; font: 500 calc(var(--H) * .062)/1 var(--sv-mono, "DM Mono", ui-monospace, monospace);
  text-shadow: 0 0 6px rgba(247, 201, 72, .6);
  animation: st-tick 4.4s linear infinite;
}
@keyframes st-tick { to { transform: translateX(-100%); } }
.st-mo.tick-static .st-mo-tick { justify-content: center; }
.st-mo.tick-static .st-mo-tick i { padding: 0; animation: none; }

.st-lamp { z-index: 6; overflow: visible; }
.st-lamp.away { visibility: hidden; }
.st-bulb { fill: #5a4d78; }
.st-lamp.on .st-bulb, .st-lamp.lit .st-bulb { fill: #fff4d3; }
.st-lamp-halo, .st-lamp-cone { position: absolute; left: 50%; opacity: 0; transition: opacity .9s ease; }
.st-lamp-halo {
  top: 61%; width: 320%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 211, .95) 0 7%, rgba(255, 220, 130, .45) 16%, rgba(247, 201, 72, .16) 40%, transparent 68%);
}
.st-lamp-cone {
  top: 54%; width: 300%; height: 78%; translate: -50% 0;
  clip-path: polygon(37% 0, 63% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(255, 228, 140, .62), rgba(255, 228, 140, .14));
}
.st-lamp.on .st-lamp-halo { opacity: .6; transition: none; }
.st-lamp.lit .st-lamp-halo, .st-lamp.lit .st-lamp-cone { opacity: 1; }
.st-wash {
  z-index: 8; opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(60% 70% at var(--lx, 30%) 70%, rgba(247, 201, 72, .16), transparent);
}
.st-wash.lit { opacity: 1; }

.st-printer { z-index: 5; }
.st-printer > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.st-head { animation: st-print 2.6s steps(10, jump-none) infinite alternate; }
.st-printer.printing .st-head { animation-duration: .5s; }
@keyframes st-print { from { transform: translateX(-22px); } to { transform: translateX(22px); } }
.st-printer-bar { transform-box: fill-box; transform-origin: left; transform: scaleX(.3); }
.st-printer.printing .st-printer-bar { animation: st-scalex .5s steps(3, jump-none) infinite; }
.st-chamber { fill: #72d8cd; opacity: 0; transition: opacity .3s, fill .3s; }
.st-printer.printing .st-chamber { opacity: .13; }
.st-led { fill: #5a4d78; transition: fill .2s; }
.st-led-halo { fill: #f7c948; opacity: 0; }
.st-printer.ding .st-led { fill: #f7c948; }
.st-printer.ding .st-led-halo { opacity: .6; }
.st-printer.ding .st-chamber { fill: #f7c948; opacity: .3; }
.st-printer.jam { animation: st-shake .08s steps(2, jump-none) infinite; }
.st-printer.jam .st-head { animation: st-jam .08s steps(2, jump-none) infinite; }
.st-printer.jam .st-led, .st-printer.jam .st-led-halo { fill: #ff5a7a; animation: st-blink .32s steps(2, jump-none) infinite; }
.st-printer.jam .st-led-halo { opacity: .5; }
.st-printer.jam .st-chamber { fill: #ff5a7a; opacity: .2; }
@keyframes st-jam { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
@keyframes st-shake { from { transform: translateX(-1px) rotate(-.6deg); } to { transform: translateX(1px) rotate(.6deg); } }
/* printout: --p in 0..1; the window slides down while the art slides back up, so the bottom p
   of the print shows (layers growing up from the bed) using transforms only */
.st-printout { position: absolute; left: 30%; width: 40%; bottom: 31.25%; height: 32%; --p: 1; }
.st-pw, .st-pa { position: absolute; inset: 0; }
.st-pw { overflow: hidden; transform: translateY(calc((1 - var(--p)) * 100%)); }
.st-pa { transform: translateY(calc((var(--p) - 1) * 100%)); }
.st-pa > i { position: absolute; inset: 0; display: none; transform-origin: 50% 100%; }
.st-pa svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-printout.art-lamp .pa-lamp, .st-printout.art-hexi .pa-hexi, .st-printout.art-spaghetti .pa-spaghetti { display: block; }
.st-printout.wobble .st-pa > i { animation: st-wob .18s ease-in-out infinite alternate; }
@keyframes st-wob { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* ------------------------------------------------------------ jars, pad, airlock */
.st-jar { position: absolute; left: 0; top: 0; z-index: 16; width: calc(var(--H) * .12); aspect-ratio: 24 / 32; opacity: 0; }
.st-jar.on { opacity: 1; }
.st-jar svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.st-jar.st-slot { z-index: 4; transform-origin: 50% 100%; }
.st-jar.pop { animation: st-pop .45s ease-out; }
@keyframes st-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.18, .9); } 100% { transform: scale(1); } }
.st-jar-hum { opacity: 0; }
.st-jar.on .st-jar-hum { animation: st-hum 2.8s ease-in-out infinite alternate; }
@keyframes st-hum { from { opacity: .04; } to { opacity: .24; } }

.st-pad { z-index: 4; }
.st-pad-ring { opacity: .4; }
.st-pad-core { opacity: .3; }
.st-pad.charging .st-pad-ring, .st-pad.charging .st-pad-core { animation: st-ring 1.6s ease-in-out infinite; }
.st-pad.boost .st-pad-ring, .st-pad.boost .st-pad-core { animation: st-ring .6s ease-in-out infinite; }
@keyframes st-ring { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.st-pad-glow {
  position: absolute; left: 50%; bottom: 30%; width: 92%; height: 360%; translate: -50% 0; opacity: 0;
  background: radial-gradient(50% 60% at 50% 100%, rgba(114, 216, 205, .5), rgba(114, 216, 205, .12) 55%, transparent 75%);
}
.st-pad.charging .st-pad-glow { animation: st-ring 1.6s ease-in-out infinite; }
.st-pad.boost .st-pad-glow { animation: st-ring .6s ease-in-out infinite; }

.st-airlock { z-index: 12; }
.st-airlock-back {
  z-index: 5;
  clip-path: inset(17.2% 17.5% 0 17.5%);
  background:
    radial-gradient(40% 18% at 50% 24%, rgba(255, 90, 122, .3), transparent 70%),
    radial-gradient(1px 1px at 40% 50%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 62% 70%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 55% 32%, #fff 50%, transparent 60%),
    linear-gradient(180deg, #0b091c, #1b1639);
}
.st-door { transition: transform .5s cubic-bezier(.55, 0, .3, 1); }
.st-airlock.open .st-door { transform: translateY(-124px); }
.st-lock-light { fill: #72d8cd; transition: fill .2s; }
.st-airlock.cycling .st-lock-light { fill: #ff5a7a; animation: st-blink .32s steps(2, jump-none) infinite; }
.st-airlock.open .st-lock-light { fill: #6ee08f; animation: none; }
.st-port-star { opacity: 0; transform-box: fill-box; transform-origin: center; }
.st-airlock.flash .st-port-star { opacity: 1; animation: st-flash .32s ease-out; }
@keyframes st-flash { from { transform: scale(.3) rotate(-30deg); } to { transform: scale(1) rotate(0); } }

/* ------------------------------------------------------------ Hexi */
.st-hexi { position: absolute; left: 0; top: 0; z-index: 13; width: var(--hexiW); height: var(--hexiH); will-change: transform; }
.st-hexi svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.st-hexi.left svg { transform: scaleX(-1); }
.st-hexi::before {
  content: ""; position: absolute; left: -35%; right: -35%; top: -45%; bottom: -15%;
  background: radial-gradient(closest-side, rgba(114, 216, 205, .5), rgba(114, 216, 205, .14) 60%, transparent);
  opacity: 0; transition: opacity .4s;
}
.st-hexi.charged::before { opacity: 1; animation: st-ring 1.2s ease-in-out infinite; }
.st-hexi.walking .st-legs--a { animation: st-step .26s steps(2, jump-none) infinite; }
.st-hexi.walking .st-legs--b { animation: st-step .26s steps(2, jump-none) infinite reverse; }
@keyframes st-step { from { transform: translateY(0); } to { transform: translateY(-2.6px); } }
.st-legs { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .4s ease; }
.st-hexi-body { transition: transform .4s ease; }
.st-hexi.asleep .st-legs { transform: scaleY(.4); }
.st-hexi.asleep .st-hexi-body { transform: translateY(8px); }
.st-hexi-eyes circle { fill: #f7c948; transition: fill .25s; }
.st-hexi.charged .st-hexi-eyes circle { fill: #72d8cd; }
.st-hexi.spent .st-hexi-eyes circle { fill: #8a7fa6; }
.st-hexi.asleep .st-hexi-eyes circle { fill: #5a4d78; }
.st-hexi-joy { display: none; }
.st-hexi.happy .st-hexi-joy { display: inline; }
.st-hexi.happy .st-hexi-eyes { display: none; }
.st-hexi.charged .st-hexi-joy { stroke: #72d8cd; }
.st-hexi-tip { fill: #dc70ac; transition: fill .25s; }
.st-hexi.charged .st-hexi-tip { fill: #9ff3e8; }
.st-hexi-cap { display: none; }
.st-hexi.charged .st-hexi-cap { display: inline; }
.st-hexi-z { position: absolute; right: -14%; top: -18%; width: 50%; height: 50%; display: none; }
.st-hexi.asleep .st-hexi-z { display: block; }
.st-hexi-z i, .st-zzz i {
  position: absolute; left: 0; bottom: 0; opacity: 0; font-style: italic;
  color: #e2d8f6; font: italic 600 calc(var(--hexiW) * .3)/1 var(--sv-display, "Cormorant Garamond", Georgia, serif);
  animation: st-z 2.6s ease-out infinite;
}
.st-hexi-z i + i { animation-delay: 1.3s; font-size: calc(var(--hexiW) * .24); }
@keyframes st-z { 0% { transform: translate(0, 0); opacity: 0; } 18% { opacity: .95; } 100% { transform: translate(14px, -18px); opacity: 0; } }

/* ------------------------------------------------------------ actors (the engine moves the roots) */
.st-actor { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform; }
.st-actor.ready { visibility: visible; }
.st-spr { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 600% 100%; background-position: 0 0; }
.st-spr.flip { transform: scaleX(-1); }
.st-a-serah { width: var(--W); height: var(--H); z-index: 14; }
.st-a-ship { width: var(--sW); height: var(--sH); z-index: 17; }
.st-a-noodle { height: var(--noodleH); aspect-ratio: 223 / 308; z-index: 15; }
.st-a-overdue { height: calc(var(--H) * .3); aspect-ratio: 179 / 166; z-index: 5; }
.st-actor.z-parked { z-index: 9; }
.st-actor.z-sand { z-index: 10; }
.st-actor.z-cameo { z-index: 6; }
.st-hexi.z-sand { z-index: 10; }
.st-stage .z-top { z-index: 18; }
.st-stage .z-under { z-index: 8; }
.st-spr.sp-a-poses, .st-pilot.po-a { background-image: url(sprites/serah-a-poses.webp); }
.st-spr.sp-b-poses, .st-pilot.po-b { background-image: url(sprites/serah-b-poses.webp); }
.st-spr.sp-c-poses, .st-pilot.po-c { background-image: url(sprites/serah-c-poses.webp); }
.st-spr.sp-a-walk { background-image: url(sprites/serah-a-walk.webp); }
.st-spr.sp-b-walk { background-image: url(sprites/serah-b-walk.webp); }
.st-spr.sp-c-walk { background-image: url(sprites/serah-c-walk.webp); }
.st-spr.sp-ship { background-image: url(sprites/ship.webp); }
.st-spr.sp-noodle { background-image: url(sprites/noodle.webp); }
.st-spr.sp-overdue { background-image: url(sprites/overdue.webp); }
.st-pilot {
  position: absolute; left: 0; top: 0; display: none;
  background-repeat: no-repeat; background-size: 600% 200%; background-position: 0 0; transform-origin: 50% 100%;
}
.st-actor.aboard .st-pilot { display: block; }

/* ------------------------------------------------------------ fx (pool items, zap, z's) */
.st-fx { position: absolute; inset: 0; z-index: 20; }
.st-p { position: absolute; left: 0; top: 0; width: calc(var(--H) * .1); height: calc(var(--H) * .1); opacity: 0; will-change: transform, opacity; }
.st-p svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-p use { display: none; }
.st-p.k-heart .u-heart, .st-p.k-spark .u-spark, .st-p.k-star .u-star, .st-p.k-puff .u-puff, .st-p.k-zee .u-zee, .st-p.k-step .u-step { display: inline; }
.st-p.c-yellow { color: #f7c948; } .st-p.c-pink { color: #e872b1; } .st-p.c-teal { color: #72d8cd; }
.st-p.c-cream { color: #fff4d3; } .st-p.c-lav { color: #c9b4dc; } .st-p.c-sand { color: #f0bd5e; } .st-p.c-smoke { color: #9a90b0; }
.st-p.k-step.c-sand { color: #d9993f; }
.st-zap { position: absolute; left: 0; top: 0; z-index: 20; width: 100%; height: 100%; overflow: visible; }
.st-zap line { stroke-linecap: round; }
.st-zap .zo { stroke: #72d8cd; stroke-width: 2.4; }
.st-zap .zi { stroke: #fff; stroke-width: 1; }
.st-zap g, .st-zap .zh { display: none; }
.st-zap.n1 .z1, .st-zap.n2 .z1, .st-zap.n2 .z2, .st-zap.n3 .z1, .st-zap.n3 .z2, .st-zap.n3 .z3, .st-zap.n4 g, .st-zap.n4 .zh { display: inline; }
.st-zap .zh { fill: #e8fffb; opacity: .8; }
.st-zap.glow { filter: drop-shadow(0 0 4px #72d8cd); }
.st-zzz { position: absolute; width: 34px; height: 34px; }
.st-zzz i { font-size: 13px; animation-duration: 3.9s; }
.st-zzz i:nth-child(2) { font-size: 11px; animation-delay: 1.3s; }
.st-zzz i:nth-child(3) { font-size: 9px; animation-delay: 2.6s; }

/* ------------------------------------------------------------ desktop extras */
.st-launch, .st-bookshelf, .st-tubes, .st-scope, .st-rocks { z-index: 4; }
.st-padlight { animation: st-padb 1.2s ease-in-out infinite alternate; }
.st-padlight.b { animation-delay: -1.2s; }
@keyframes st-padb { from { opacity: .25; } to { opacity: 1; } }
.st-coil { animation: st-coil 2.4s ease-in-out infinite alternate; }
@keyframes st-coil { from { opacity: .65; } to { opacity: 1; } }
.st-scope-lens { animation: st-lens 3.2s steps(1, end) infinite; }
@keyframes st-lens { 0%, 86% { fill: #9ff3e8; } 88%, 94% { fill: #fff; } }
.st-flag { transform-box: fill-box; transform-origin: 0 50%; animation: st-flag 2.2s ease-in-out infinite alternate; }
@keyframes st-flag { from { transform: skewY(-5deg); } to { transform: skewY(4deg) scaleX(.92); } }
.st-bb { position: absolute; left: 0; top: 0; z-index: 7; width: 30px; height: 25px; }
.st-bb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-bb .bb-down { opacity: 0; animation: st-bbb .36s steps(1, end) infinite; }
.st-bb .bb-up { animation: st-bba .36s steps(1, end) infinite; }
@keyframes st-bba { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes st-bbb { 0% { opacity: 0; } 50% { opacity: 1; } }
.st-meteor {
  position: absolute; left: 0; top: 0; z-index: 1; width: 110px; height: 3px; margin: -1.5px 0 0 -110px;
  border-radius: 3px; transform-origin: 100% 50%; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(232, 114, 177, .4) 38%, rgba(247, 201, 72, .85) 76%, #fff4d3 93%, #fff);
}
.st-meteor b {
  position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 32%, #ffe48c 56%, rgba(247, 201, 72, 0) 74%);
}

/* ------------------------------------------------------------ the dune planet */
.st-mumble { z-index: 3; }
.st-mumble > svg { transform-origin: 50% 100%; animation: st-breathe 2.6s ease-in-out infinite alternate; }
@keyframes st-breathe { from { transform: scaleY(1); } to { transform: scaleY(1.04); } }
.st-eye-open { display: none; }
.st-mumble.peek .st-eye-open { display: inline; }
.st-mumble.peek .st-eye-shut { display: none; }
.st-mumble .st-zzz { left: 56%; top: -24%; width: 40%; height: 40%; }
.st-mumble .st-zzz i { color: #fff1d0; font-size: calc(var(--H) * .12); }
.st-mumble .st-zzz i:nth-child(2) { font-size: calc(var(--H) * .1); }
.st-mumble .st-zzz i:nth-child(3) { font-size: calc(var(--H) * .08); }
.st-ripple { z-index: 5; animation: st-ripple 7s ease-in-out infinite alternate; }
@keyframes st-ripple { from { transform: translateX(calc(var(--rd, 12px) * -1)); } to { transform: translateX(var(--rd, 12px)); } }
.st-diner { z-index: 7; }
.st-open { fill: #72d8cd; }
.st-hatch { transform-box: fill-box; transform-origin: 50% 0; transition: transform .3s cubic-bezier(.3, .7, .4, 1.3); }
.st-hatch.open { transform: scaleY(-.3); }   /* the 2D projection of a 100deg flip about the top edge */
.st-neon .ng { stroke-width: 4.5; opacity: 0; }
.st-neon path { stroke: #6e4762; transition: stroke .08s; }
.st-neon.on path { stroke: #ff8ac6; }
.st-neon.on .ng { opacity: .35; }
.st-neon.flicker { animation: st-neon .62s steps(1, end) both; }
.st-neon.flicker path { stroke: #ff8ac6; }
@keyframes st-neon { 0% { opacity: 1; } 19% { opacity: .15; } 39% { opacity: 1; } 58% { opacity: .15; } 77%, 100% { opacity: 1; } }
.st-tray { position: absolute; transform: translateX(var(--travel, 60px)); transition: transform .8s cubic-bezier(.3, .7, .3, 1); }
.st-tray.out { transform: none; }
.st-tray > i { position: absolute; bottom: 2px; border: 1.5px solid #3b2346; }
.st-tray-plate { left: 0; width: var(--tw, 40px); height: 4px; border-radius: 3px; background: linear-gradient(#fbf4e4, #c9b4dc); }
.st-tray-arm { left: var(--tw, 40px); right: 0; height: 3px; bottom: 2.5px; border-radius: 2px; background: repeating-linear-gradient(90deg, #d9cbe8 0 4px, #8f84a3 4px 6px); }
.st-tray .st-cup, .st-tray .st-jar { position: absolute; z-index: 1; }
.st-tray.cup-gone .st-cup, .st-tray.jar-gone .st-jar { visibility: hidden; }

/* ------------------------------------------------------------ bubble, caption, chip */
.st-bubble {
  position: absolute; left: 0; top: 0; z-index: 30;
  width: max-content; min-width: 120px; max-width: 200px; box-sizing: border-box; padding: 7px 10px;
  border: 2px solid var(--sv-out, #3b2346); border-radius: 14px;
  background: var(--sv-bubble, #fbf4e4); color: var(--sv-bubble-ink, #1d1735);
  font: 500 13px/1.3 var(--sv-sans, "Outfit", system-ui, sans-serif);
  box-shadow: 0 3px 0 rgba(11, 9, 28, .35);
  opacity: 0; --tail-y: 12px; --tail-x: 50%;
}
.st-stage.st-desk .st-bubble { min-width: 150px; max-width: 280px; font-size: 14.5px; }
.st-bubble.st-narrow { max-width: var(--bn, 132px); }
.st-bubble.st-c { padding: 5px 8px; font-size: 12px; line-height: 1.2; }
.st-bubble.st-w1 { max-width: 176px; } .st-bubble.st-w2 { max-width: 152px; } .st-bubble.st-w3 { max-width: var(--bt, 128px); }
.st-bubble::before, .st-bubble::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; }
.st-bubble[data-side="right"]::before { left: -14px; top: var(--tail-y); border-width: 8px 14px 8px 0; border-right-color: var(--sv-out, #3b2346); }
.st-bubble[data-side="right"]::after { left: -9.5px; top: calc(var(--tail-y) + 3px); border-width: 5px 10px 5px 0; border-right-color: var(--sv-bubble, #fbf4e4); }
.st-bubble[data-side="left"]::before { right: -14px; top: var(--tail-y); border-width: 8px 0 8px 14px; border-left-color: var(--sv-out, #3b2346); }
.st-bubble[data-side="left"]::after { right: -9.5px; top: calc(var(--tail-y) + 3px); border-width: 5px 0 5px 10px; border-left-color: var(--sv-bubble, #fbf4e4); }
.st-bubble[data-side="top"]::before { bottom: -14px; left: var(--tail-x); margin-left: -8px; border-width: 14px 8px 0; border-top-color: var(--sv-out, #3b2346); }
.st-bubble[data-side="top"]::after { bottom: -9.5px; left: var(--tail-x); margin-left: -5px; border-width: 10px 5px 0; border-top-color: var(--sv-bubble, #fbf4e4); }
.st-caption {
  position: absolute; inset: 0; z-index: 31; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; text-align: center; opacity: 0;
  color: var(--sv-ink, #f5efdf); font: 700 clamp(18px, calc(var(--h) * .14), 30px)/1.1 var(--sv-hand, "Caveat", "Caveat Fallback", cursive);
  text-shadow: 0 2px 10px rgba(11, 9, 28, .85), 0 0 2px rgba(11, 9, 28, .9);
}
.st-chip {
  position: absolute; left: 0; top: 0; z-index: 32; padding: 3px 10px; opacity: 0; white-space: nowrap;
  border: 1px solid rgba(201, 180, 220, .28); border-radius: 999px; background: rgba(11, 9, 28, .55);
  color: var(--sv-ink, #f5efdf); font: 600 15px/1.2 var(--sv-hand, "Caveat", "Caveat Fallback", cursive);
}
.st-stage.st-desk .st-chip { font-size: 18px; }
.st-chip.st-sm { padding: 2px 9px; font-size: 14px; }

/* ------------------------------------------------------------ pausing and the still tableau */
.st-stage.st-seek * { transition: none !important; }
.st-stage.st-paused *, .st-stage.st-paused *::before, .st-stage.st-paused *::after { animation-play-state: paused !important; }
.st-stage.st-still *, .st-stage.st-still *::before, .st-stage.st-still *::after { animation: none !important; transition: none !important; }
.st-stage.st-still .st-hexi-z i, .st-stage.st-still .st-zzz i { opacity: .8; }
.st-stage.st-still .st-hexi-z i + i, .st-stage.st-still .st-zzz i:nth-child(2) { transform: translate(8px, -10px); }
.st-stage.st-still .st-zzz i:nth-child(3) { transform: translate(15px, -19px); }
.st-stage.st-still .st-mo-tick { justify-content: center; }
.st-stage.st-still .st-mo-tick i { padding: 0; }
@media (prefers-reduced-motion: reduce) {
  .st-stage *, .st-stage *::before, .st-stage *::after { animation: none !important; transition: none !important; }
  .st-stage .st-hexi-z i, .st-stage .st-zzz i { opacity: .8; }
  .st-stage .st-hexi-z i + i, .st-stage .st-zzz i:nth-child(2) { transform: translate(8px, -10px); }
  .st-stage .st-zzz i:nth-child(3) { transform: translate(15px, -19px); }
  .st-stage .st-mo-tick { justify-content: center; }
  .st-stage .st-mo-tick i { padding: 0; }
}