/*
  muplu · the toy tiles and their little animated scenes
  Copyright (c) 2026 Nicola Harvey. All rights reserved. https://muplu.com

  WHY THIS FILE EXISTS
  These tiles used to live in a <style> block in public/index.html and nowhere else,
  because there was nowhere else. With wings there are now five pages that show a toy
  tile (home, and one per wing), and a scene copied five times is a scene that is wrong
  in four places the first time anyone tweaks it. That is the same bug public/toys.json
  was created to kill, wearing different clothes. One file, one source.

  THE PALETTE IS SCOPED TO .toy ON PURPOSE.
  Each wing page sets its own environment (its own background, ink, type, pace). A toy's
  preview must NOT change colour just because of the room it hangs in: FLINCH's scene is
  FLINCH's scene in every wing. So the scene colours are declared on .toy itself, below,
  and the page's own --ink / --coral never reach in.

  What a wing MAY change is the tile's CHROME, by overriding these on its own .toy:
    --tile-ink     the border + hard shadow colour
    --tile-r       corner radius
    --tile-shadow  the offset of the hard shadow (0 for a soft wing)
    --tile-bg      the label background
  The nursery wing softens all four. The play wing leaves them alone. Nothing else about
  a tile is a wing's business.
*/

.toy{
  /* scene palette: fixed, never inherited from the page */
  --coral:#ff5d5d;
  --sky:#4aa8ff;
  --lime:#a8d949;
  --sun:#ffc93c;
  --ink:#17141f;

  /* tile chrome: a wing may override these four */
  --tile-ink:#17141f;
  --tile-r:28px;
  --tile-shadow:6px;
  --tile-bg:#fff;

  position:relative;display:block;text-decoration:none;color:var(--tile-ink);
  border:3px solid var(--tile-ink);border-radius:var(--tile-r);
  background:var(--tile-bg);overflow:hidden;
  box-shadow:0 var(--tile-shadow) 0 var(--tile-ink);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  opacity:0;animation:arrive .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.toy:nth-child(1){animation-delay:.05s}
.toy:nth-child(2){animation-delay:.15s}
.toy:nth-child(3){animation-delay:.25s}
.toy:nth-child(4){animation-delay:.35s}
.toy:nth-child(5){animation-delay:.45s}
@keyframes arrive{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.toy:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 calc(var(--tile-shadow) + 4px) 0 var(--tile-ink)}
.toy:active{transform:translateY(2px);box-shadow:0 3px 0 var(--tile-ink)}
.toy:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.scene{height:150px;position:relative;overflow:hidden;border-bottom:3px solid var(--tile-ink)}
.label{padding:14px 18px 16px}
/* h2 AND h3, because the heading level depends on the page, not on the tile. The home
   page spends its h2 on the wing headings, so its tiles are h3; a wing page's own
   heading is the h1, so its tiles are h2. Styling only h2 here is exactly the bug that
   shipped for a minute: every tile on the home page fell back to the browser default,
   which looks like nothing much and reads like a mistake. The tile looks the same either
   way, and that is the point of it being one file. */
.label h2,.label h3{margin:0;font-size:24px;font-weight:800;letter-spacing:.01em}
.label p{margin:2px 0 0;font-size:15px;font-weight:500;opacity:.66}

/* flinch scene: a dot that things whizz past */
.s-flinch{background:var(--ink)}
.s-flinch .player{position:absolute;left:50%;top:58%;width:16px;height:16px;margin:-8px;border-radius:50%;background:#fff;animation:shiver 1.4s linear infinite}
@keyframes shiver{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,-2px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}}
.s-flinch .shot{position:absolute;height:4px;width:56px;border-radius:2px;background:var(--coral)}
.s-flinch .shot:nth-child(2){top:44%;animation:whizz 1.1s linear infinite}
.s-flinch .shot:nth-child(3){top:66%;animation:whizz 1.7s linear .4s infinite reverse}
.s-flinch .shot:nth-child(4){top:54%;width:34px;background:var(--sun);animation:whizz .8s linear .2s infinite}
@keyframes whizz{from{left:-60px}to{left:110%}}

/* gravity scene: orbiting particles */
.s-gravity{background:#0b0d18}
.s-gravity i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--sky)}
.s-gravity i:nth-child(1){animation:orbit 2.6s linear infinite}
.s-gravity i:nth-child(2){width:5px;height:5px;background:#9ed0ff;animation:orbit 3.8s linear .6s infinite reverse}
.s-gravity i:nth-child(3){background:#fff;animation:orbit 1.9s linear .3s infinite}
.s-gravity i:nth-child(4){width:4px;height:4px;background:var(--sun);animation:orbit 4.6s linear 1s infinite}
.s-gravity .core{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:#fff;box-shadow:0 0 22px 6px rgba(74,168,255,.65)}
@keyframes orbit{from{transform:rotate(0) translateX(46px) rotate(0)}to{transform:rotate(360deg) translateX(46px) rotate(-360deg)}}

/* fluid scene: morphing blob */
.s-fluid{background:linear-gradient(135deg,#062a33,#0d4d56)}
.s-fluid .blob{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px;background:linear-gradient(135deg,var(--sky),var(--lime));filter:blur(1px);animation:morph 5s ease-in-out infinite;opacity:.9}
@keyframes morph{
  0%,100%{border-radius:58% 42% 55% 45%/50% 58% 42% 50%;transform:rotate(0)}
  33%{border-radius:45% 55% 40% 60%/60% 42% 58% 40%;transform:rotate(24deg) scale(1.06)}
  66%{border-radius:52% 48% 60% 40%/44% 56% 44% 56%;transform:rotate(-18deg) scale(.95)}
}

/* hushpaper scene: a paper moon and its little stars */
.s-paper{background:radial-gradient(120% 120% at 70% 20%,#fbf4de,#f4ecd6)}
.s-paper .moon{position:absolute;left:56%;top:46%;width:60px;height:60px;margin:-30px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#f7e08a,#f2d55c);box-shadow:0 0 24px 6px rgba(242,213,92,.5);animation:breathe 4.6s ease-in-out infinite}
.s-paper i{position:absolute;width:5px;height:5px;border-radius:50%;background:#c9a83a;opacity:.7}
.s-paper i:nth-child(2){left:24%;top:34%;animation:twinkle 2.4s ease-in-out infinite}
.s-paper i:nth-child(3){left:34%;top:66%;animation:twinkle 3.2s ease-in-out .6s infinite}
.s-paper i:nth-child(4){left:78%;top:70%;animation:twinkle 2.8s ease-in-out .3s infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.9}}

/* gather scene: snow falling onto a drift that has already been pushed about.
   The mound is deliberately lopsided, because a tidy one would say "this is how it
   should look" and the whole toy is that there is no should. */
.s-gather{background:linear-gradient(#6d6478,#413b4b);overflow:hidden}
.s-gather .drift{position:absolute;left:-6%;right:-6%;bottom:-34px;height:86px;background:#fdf8ee;
  border-radius:56% 40% 52% 46%/74% 66% 40% 46%;transform:rotate(-2deg)}
.s-gather i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fdf8ee;opacity:.9}
.s-gather i:nth-child(1){left:22%;animation:fall 3.6s linear infinite}
.s-gather i:nth-child(2){left:48%;animation:fall 4.6s linear -1.4s infinite}
.s-gather i:nth-child(3){left:69%;animation:fall 4.1s linear -2.7s infinite}
.s-gather i:nth-child(4){left:86%;animation:fall 5.2s linear -3.6s infinite}
@keyframes fall{from{top:-6px;opacity:0}12%{opacity:.9}80%{opacity:.9}to{top:118px;opacity:0}}

/* sandcastle scene: a warm beach under a soft sun, with a little tapered castle and a flag.
   The sibling of the gather scene, sunny where that one is dusk. */
.s-sand{background:linear-gradient(#9fd0e2,#e9dfbc 62%,#e6c079);overflow:hidden}
.s-sand .sun{position:absolute;right:16%;top:20%;width:26px;height:26px;border-radius:50%;
  background:#fff6d8;box-shadow:0 0 16px 6px rgba(255,240,190,.7)}
.s-sand .beach{position:absolute;left:-6%;right:-6%;bottom:-30px;height:78px;background:#e2bd72;
  border-radius:48% 44% 50% 46%/70% 64% 40% 44%}
.s-sand .castle{position:absolute;left:50%;bottom:20px;width:26px;height:30px;margin-left:-13px;
  background:#efd79b;border-radius:4px 4px 0 0}
.s-sand .castle::before{content:"";position:absolute;left:5px;right:5px;top:-12px;height:16px;
  background:#efd79b;border-radius:3px 3px 0 0}
.s-sand .flag{position:absolute;left:50%;bottom:52px;width:9px;height:7px;margin-left:-1px;
  background:#ef7a5a;clip-path:polygon(0 0,100% 50%,0 100%)}
.s-sand .flag::before{content:"";position:absolute;left:-1px;top:0;width:2px;height:14px;background:#8a6a3c}

/* wisp scene: a candlelit dark, a warm moon, and little wisps drifting upward like the
   ones the room lights together. The together wing's one tile. */
.s-wisp{background:radial-gradient(120% 100% at 50% 120%,#241639,#0c0918 72%);overflow:hidden}
.s-wisp .moon{position:absolute;left:50%;top:42%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#fff6dd,#e8c98a 60%,#c99a4e);
  box-shadow:0 0 26px 8px rgba(232,201,138,.4)}
.s-wisp i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe6ad;
  box-shadow:0 0 8px 2px rgba(232,184,102,.7);opacity:.85}
.s-wisp i:nth-child(2){left:26%;animation:rise 4.6s ease-in infinite}
.s-wisp i:nth-child(3){left:44%;animation:rise 5.8s ease-in -1.6s infinite}
.s-wisp i:nth-child(4){left:60%;animation:rise 5.1s ease-in -3.1s infinite}
.s-wisp i:nth-child(5){left:74%;animation:rise 6.4s ease-in -2.2s infinite}
.s-wisp i:nth-child(6){left:36%;animation:rise 5.4s ease-in -4s infinite}
@keyframes rise{from{bottom:-8px;opacity:0}18%{opacity:.9}82%{opacity:.9}to{bottom:150px;opacity:0}}

/* predator scene: a white comet lunging at red prey */
.s-predator{background:var(--ink);overflow:hidden}
.s-predator .comet{position:absolute;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(255,255,255,.7);animation:lunge 1.7s ease-in-out infinite}
.s-predator .prey{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(255,211,77,.55)}
.s-predator .prey:nth-child(2){right:24%;top:34%}
.s-predator .prey:nth-child(3){right:32%;top:64%}
.s-predator .prey:nth-child(4){right:18%;top:50%}
@keyframes lunge{0%{left:16%;transform:scale(1)}50%{left:76%;transform:scale(1.28)}100%{left:16%;transform:scale(1)}}

/* lucky dummy scene: a stickman tumbling through pegs */
.s-dummy{background:#fff3d6;position:relative}
.s-dummy .peg{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--ink);opacity:.22}
.s-dummy .peg:nth-child(1){left:24%;top:56%}
.s-dummy .peg:nth-child(2){left:50%;top:40%}
.s-dummy .peg:nth-child(3){left:72%;top:60%}
.s-dummy .dummy{position:absolute;left:46%;top:10%;width:6px;height:26px;background:var(--ink);border-radius:3px;transform-origin:50% 30%;animation:tumble 2.6s ease-in-out infinite}
.s-dummy .dummy::before{content:"";position:absolute;left:-3px;top:-12px;width:12px;height:12px;border-radius:50%;background:var(--ink)}
@keyframes tumble{0%,100%{transform:translateY(0) rotate(-16deg)}50%{transform:translateY(26px) rotate(26deg)}}

/* letterbox scene: warm morning paper and a pillar-box red envelope, with two letter
   tiles drifting off to be posted. The together wing's gentle distance game. */
.s-letterbox{background:linear-gradient(#fdf8ec,#f6ecd6);overflow:hidden}
.s-letterbox .env{position:absolute;left:50%;top:52%;width:74px;height:50px;margin:-25px 0 0 -37px;
  background:#c8402f;border:3px solid #2a2118;border-radius:9px}
.s-letterbox .env::before{content:"";position:absolute;left:4px;right:4px;top:4px;height:22px;
  background:linear-gradient(#a83322,#c8402f);clip-path:polygon(0 0,100% 0,50% 100%)}
.s-letterbox .lt{position:absolute;width:22px;height:22px;border-radius:6px;background:#fff;
  border:2.5px solid #2a2118;box-shadow:0 2px 0 #2a2118;
  font-family:'Baloo 2',ui-rounded,sans-serif;font-weight:800;font-size:13px;color:#2a2118;
  display:flex;align-items:center;justify-content:center;animation:lbdrift 5.2s ease-in-out infinite}
.s-letterbox .lt:nth-child(2){left:24%;top:30%;animation-delay:-1.4s}
.s-letterbox .lt:nth-child(3){left:64%;top:22%;animation-delay:-3.2s}
@keyframes lbdrift{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-9px) rotate(6deg)}}

/* rockpool scene: dusk water and three pools, gold and lilac shells surfacing in turn.
   Two hands the scene never shows: that is the game. */
.s-rockpool{background:linear-gradient(#123a4f,#0b1f2e 70%);overflow:hidden}
.s-rockpool .pl{position:absolute;background:radial-gradient(70% 60% at 50% 42%,#175070,#0f3346 72%);
  border:2.5px solid rgba(191,232,226,.4);border-radius:46% 54% 52% 48%/58% 52% 48% 42%}
.s-rockpool .pl:nth-child(1){left:12%;top:24%;width:64px;height:46px}
.s-rockpool .pl:nth-child(2){left:52%;top:16%;width:52px;height:40px}
.s-rockpool .pl:nth-child(3){left:34%;top:56%;width:58px;height:44px}
.s-rockpool .shl{position:absolute;width:11px;height:11px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  border:2px solid rgba(0,0,0,.35);animation:shellblink 3.8s ease-in-out infinite}
.s-rockpool .shl.g{background:#ffd9a0}
.s-rockpool .shl.v{background:#b98cff}
.s-rockpool .shl:nth-child(4){left:22%;top:36%}
.s-rockpool .shl:nth-child(5){left:62%;top:26%;animation-delay:-1.2s}
.s-rockpool .shl:nth-child(6){left:44%;top:66%;animation-delay:-2.4s}
.s-rockpool .shl:nth-child(7){left:30%;top:30%;animation-delay:-1.8s}
@keyframes shellblink{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* pounce scene: two chunky cards on the felt and a paw that cannot wait. */
.s-pounce{background:radial-gradient(110% 80% at 50% 0%,#2a2344,#1d1830 70%);overflow:hidden}
.s-pounce .pc{position:absolute;width:46px;height:60px;background:#fff;border:3px solid #17141f;
  border-radius:10px;box-shadow:0 4px 0 rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center}
.s-pounce .pc::after{content:"";width:24px;height:24px;border-radius:50%}
.s-pounce .pc.a{left:26%;top:26%;transform:rotate(-8deg)}
.s-pounce .pc.a::after{background:#ff8b3d}
.s-pounce .pc.b{left:52%;top:30%;transform:rotate(7deg);animation:cardpop 2.8s cubic-bezier(.34,1.56,.64,1) infinite}
.s-pounce .pc.b::after{background:#ff8b3d}
@keyframes cardpop{0%,100%{transform:rotate(7deg) scale(1)}12%{transform:rotate(3deg) scale(1.12)}24%{transform:rotate(7deg) scale(1)}}
.s-pounce .paw{position:absolute;right:14%;bottom:12%;width:34px;height:34px;border-radius:50%;
  background:#ffc93c;border:3px solid #17141f;box-shadow:0 3px 0 rgba(0,0,0,.4);
  animation:pawstamp 2.8s ease-in-out infinite}
.s-pounce .paw::before{content:"";position:absolute;left:4px;top:-8px;width:8px;height:8px;border-radius:50%;
  background:#ffc93c;border:2px solid #17141f;box-shadow:12px 0 0 -1px #ffc93c,12px 0 0 1px #17141f}
@keyframes pawstamp{0%,100%{transform:translateY(0) rotate(-6deg)}12%{transform:translateY(-10px) rotate(4deg)}24%{transform:translateY(0) rotate(-6deg)}}

/* THE "?" CURIOSITY AFFORDANCE.
   A tile is already one big <a> to play the thing, and you cannot nest an <a> inside an
   <a>. So a tile that also has an explainer page is wrapped in .toy-wrap, and the "?" is a
   SEPARATE sibling link sitting in the corner, above the tile. Clicking the tile plays;
   clicking the "?" opens the idea behind it. Hover (or focus, or tap) the "?" and a short
   teaser card appears. Scoped to .toy-wrap so only tiles that opt in are affected. */
.toy-wrap{position:relative;display:block}
.curio{
  position:absolute;top:10px;right:10px;z-index:4;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',ui-rounded,sans-serif;font-weight:800;font-size:15px;line-height:1;
  color:#eafcff;text-decoration:none;
  background:rgba(4,16,24,.72);border:1.5px solid rgba(127,212,208,.6);
  backdrop-filter:blur(3px);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  opacity:.75;transition:opacity .2s,transform .2s,box-shadow .2s;
}
/* a bigger invisible hit area so it is comfortable to tap on a phone */
.curio::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.curio:hover,.curio:focus-visible{opacity:1;transform:scale(1.08);box-shadow:0 0 16px rgba(127,212,208,.5);outline:none}
.curio .q{position:relative;z-index:1}
/* No hover teaser: the "?" is just a clean link to the explainer. It used to pop a card,
   but ten tiles all popping the same line was noise, so the popup is gone (18 Jul 2026).
   What it means is the aria-label ("Read the idea behind X") for a screen reader, and the
   universal "?" glyph for everyone else. */
@media (prefers-reduced-motion:reduce){.curio{transition:none}}

/* the mystery tile: a toy that has not hatched yet */
.toy.soon{border-style:dashed;box-shadow:none;background:transparent;cursor:default}
.toy.soon:hover{transform:none}
.s-soon{border-bottom:3px dashed var(--tile-ink);background:transparent}
.s-soon b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:56px;font-weight:800;opacity:.25;animation:wobble 2.8s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:translate(-50%,-50%) rotate(-8deg)}50%{transform:translate(-50%,-50%) rotate(8deg)}}

@media (prefers-reduced-motion: reduce){
  .toy,.toy *,.toy *::before,.toy *::after{animation:none!important;transition:none!important}
  .toy{opacity:1}
}

/* hunch scene: a big question mark under a dusk sky, with little thought-sparks
   orbiting it. The daily one: the "?" ticks side to side like a clock's second hand. */
.s-hunch{background:linear-gradient(#1c1538,#33244f 70%,#4a2c4d);overflow:hidden}
.s-hunch .mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);font-size:64px;font-weight:800;
  color:var(--sun);text-shadow:0 0 22px rgba(255,201,60,.45);animation:hunchtick 2.4s ease-in-out infinite}
@keyframes hunchtick{0%,100%{transform:translate(-50%,-54%) rotate(-7deg)}50%{transform:translate(-50%,-54%) rotate(7deg)}}
.s-hunch i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#f4edff;opacity:.8}
.s-hunch i:nth-child(2){animation:orbit 3.4s linear infinite}
.s-hunch i:nth-child(3){width:4px;height:4px;background:var(--coral);animation:orbit 4.8s linear -1.8s infinite reverse}
.s-hunch i:nth-child(4){width:4px;height:4px;background:var(--lime);animation:orbit 5.6s linear -3s infinite}

/* tend scene: a sprout growing out of shared soil under early stars, over and over.
   The stem rises, the bloom opens, it all breathes back down and begins again,
   because the garden's whole idea is that growing is the show. */
.s-tend{background:linear-gradient(#171130,#2b1f4a 62%,#3d2a52);overflow:hidden}
.s-tend .soil{position:absolute;left:-4%;right:-4%;bottom:-26px;height:56px;background:#3a2c22;
  border-radius:50% 44% 0 0/70% 60% 0 0}
.s-tend .stem{position:absolute;left:50%;bottom:26px;width:5px;margin-left:-2.5px;border-radius:3px;
  background:#5c8c44;transform-origin:50% 100%;animation:tendgrow 5.2s ease-in-out infinite}
@keyframes tendgrow{0%,12%{height:8px}55%,86%{height:64px}100%{height:8px}}
.s-tend .bloom{position:absolute;left:50%;bottom:82px;width:26px;height:26px;margin-left:-13px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#6b4a1f 0 26%,var(--sun) 30%);
  box-shadow:0 0 18px rgba(255,201,60,.35);transform:scale(0);animation:tendbloom 5.2s ease-in-out infinite}
@keyframes tendbloom{0%,50%{transform:scale(0)}62%,86%{transform:scale(1)}100%{transform:scale(0)}}
.s-tend .star{position:absolute;width:4px;height:4px;border-radius:50%;background:#f4edff;opacity:.6}
.s-tend .star:nth-child(4){left:22%;top:22%;animation:twinkle 3s ease-in-out infinite}
.s-tend .star:nth-child(5){left:76%;top:30%;animation:twinkle 3.8s ease-in-out .8s infinite}

/* delve scene: a dark winding shaft, one lantern sinking through it, strangers' camps aglow */
.s-delve{background:linear-gradient(#241e3e,#150f28 55%,#0a0812);overflow:hidden}
.s-delve::before,.s-delve::after{content:'';position:absolute;top:-6%;bottom:-6%;width:38%;background:#1d1733}
.s-delve::before{left:-14%;border-radius:0 46% 54% 0/0 60% 40% 0;transform:rotate(3deg)}
.s-delve::after{right:-14%;border-radius:46% 0 0 54%/60% 0 0 40%;transform:rotate(-3deg)}
.s-delve .lamp{position:absolute;left:50%;top:-12%;width:10px;height:10px;margin-left:-5px;border-radius:3px;
  background:#ffc93c;box-shadow:0 0 22px 9px rgba(255,201,60,.45);animation:delvesink 5.4s ease-in-out infinite}
@keyframes delvesink{0%{top:-12%;opacity:0}12%{opacity:1}86%{opacity:1}100%{top:104%;opacity:0}}
.s-delve i{position:absolute;width:6px;height:6px;border-radius:2px;background:#a8d949;
  box-shadow:0 0 12px 4px rgba(168,217,73,.35);opacity:.75;z-index:1}
.s-delve i:nth-child(2){left:26%;top:34%;animation:twinkle 3.2s ease-in-out infinite}
.s-delve i:nth-child(3){left:70%;top:62%;animation:twinkle 4.1s ease-in-out 1.1s infinite}
.s-delve i:nth-child(4){left:38%;top:82%;animation:twinkle 3.7s ease-in-out .5s infinite}

/* unfold scene: one point of light, breathing */
.s-unfold{background:#041018}
.s-unfold .pt{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#dffcff;box-shadow:0 0 18px 6px rgba(54,182,180,.75);animation:upulse 2.6s ease-in-out infinite;transition:opacity .6s}
.s-unfold .halo{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;border-radius:50%;border:1px solid rgba(54,182,180,.35);animation:ugrow 2.6s ease-in-out infinite;transition:opacity .6s}
@keyframes upulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes ugrow{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.4);opacity:0}}

/* UNFOLD'S MEANING, revealed on the tile.
   unfold is a piece of art, not a game, so its tile carries the idea it is built on.
   Hover it (or tab to it, or tap it on a phone) and the point of light dims and unfold's
   own words fade in over the night sky, like the thought behind the picture. The line is
   the artist's statement, verbatim from the piece. It lives here in scenes.css so the
   home tile and the immerse tile show it identically from one source.
   The text is REAL content (not aria-hidden), so a screen reader reads the meaning too;
   only the animated dots are decorative. pointer-events stay off it so the whole tile is
   still one clean click through to unfold. */
.s-unfold .u-meaning{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  margin:0;padding:0 18px;text-align:center;pointer-events:none;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:15px;line-height:1.55;letter-spacing:.01em;
  color:#eafcff;text-shadow:0 0 16px rgba(54,182,180,.55);
  opacity:0;transition:opacity .55s ease;
}
/* darken the sky behind the words so they read, only while they show */
.s-unfold::after{content:"";position:absolute;inset:0;background:#041018;opacity:0;transition:opacity .55s ease;pointer-events:none}
.toy:hover .s-unfold::after,.toy:focus-visible .s-unfold::after{opacity:.72}
.toy:hover .s-unfold .u-meaning,.toy:focus-visible .s-unfold .u-meaning{opacity:1}
.toy:hover .s-unfold .pt,.toy:hover .s-unfold .halo,
.toy:focus-visible .s-unfold .pt,.toy:focus-visible .s-unfold .halo{opacity:.25}
/* the point of light must sit ABOVE the darkening layer, the words above that */
.s-unfold .pt,.s-unfold .halo{z-index:1}
.s-unfold .u-meaning{z-index:2}
/* touch devices have no hover: show the line softly and always, so a phone can read it
   too. It sits over a permanently-dimmed sky, with the point of light glowing through. */
@media (hover:none){
  .s-unfold::after{opacity:.6}
  .s-unfold .u-meaning{opacity:.9}
  .s-unfold .pt,.s-unfold .halo{opacity:.5}
}
@media (prefers-reduced-motion:reduce){
  .s-unfold .u-meaning,.s-unfold::after,.s-unfold .pt,.s-unfold .halo{transition:none}
}

/* lanternfall scene: a thread is cut, the block falls, the light floats up */
.s-lanternfall{background:linear-gradient(#0d0a20,#1b1533 70%,#241b45);overflow:hidden}
.s-lanternfall .thread{position:absolute;left:62%;top:0;width:2px;height:34%;background:#6a6284;transform-origin:top;animation:lfsnap 4.4s ease-in-out infinite}
@keyframes lfsnap{0%,42%{opacity:1}46%,100%{opacity:0}}
.s-lanternfall .block{position:absolute;left:62%;top:34%;width:34px;height:16px;margin-left:-17px;border-radius:3px;background:#7a5a3a;animation:lffall 4.4s ease-in infinite}
@keyframes lffall{0%,44%{transform:translateY(0) rotate(0)}72%,100%{transform:translateY(150px) rotate(24deg);opacity:0}}
.s-lanternfall .lantern{position:absolute;left:30%;bottom:18%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#ffd76a;box-shadow:0 0 16px 5px rgba(255,215,106,.5);animation:lfrise 4.4s ease-out infinite}
@keyframes lfrise{0%,48%{transform:translateY(0);opacity:1}96%,100%{transform:translateY(-90px);opacity:0}}
.s-lanternfall .spark{position:absolute;left:8%;bottom:22%;width:9px;height:9px;border-radius:50%;background:#fff3cf;box-shadow:0 0 10px 3px rgba(255,215,106,.8);animation:lfarc 4.4s cubic-bezier(.2,.6,.6,1) infinite}
@keyframes lfarc{0%,14%{transform:translate(0,0);opacity:0}18%{opacity:1}42%{transform:translate(150px,-92px);opacity:1}46%,100%{transform:translate(170px,-98px);opacity:0}}

/* lore scene: four stars already joined, waiting for their story. The lines are an
   inline SVG background stretched to the box (preserveAspectRatio none) so they meet
   the %-placed star dots at any tile width; non-scaling-stroke keeps them thin. */
.s-lore{background:linear-gradient(#081428,#050d1c 60%,#02060f)}
.s-lore::before{content:'';position:absolute;inset:0;
  background:radial-gradient(60% 45% at 72% 18%, rgba(150,180,220,.10), transparent 70%)}
.s-lore::after{content:'';position:absolute;inset:0;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M24 68 L42 34 L62 52 L80 24' stroke='%23ffe9b0' stroke-opacity='.32' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.s-lore i{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#ffe9b0;
  box-shadow:0 0 12px 4px rgba(255,233,176,.35);animation:twinkle 3.6s ease-in-out infinite;z-index:1}
.s-lore i:nth-child(1){left:24%;top:68%}
.s-lore i:nth-child(2){left:42%;top:34%;animation-delay:.9s}
.s-lore i:nth-child(3){left:62%;top:52%;animation-delay:1.7s}
.s-lore i:nth-child(4){left:80%;top:24%;width:9px;height:9px;margin:-4.5px;animation-delay:.4s}
/* scurry scene: a moonlit maze corner; crumbs vanish ahead of a cream mouse dot
   while two cat eyes glow in pursuit. Append to muplu public/scenes.css.
   Tile markup: <div class="scene s-scurry" aria-hidden="true">
     <i class="crumb"></i><i class="crumb"></i><i class="crumb"></i>
     <b class="mouse"></b><b class="cat"></b></div> */
.s-scurry{background:linear-gradient(#241537,#120a1c 65%,#0a0612);overflow:hidden}
.s-scurry::before{content:'';position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,206,84,0) 46%,rgba(120,80,160,.35) 47%,rgba(120,80,160,.35) 49%,rgba(255,206,84,0) 50%),
    linear-gradient(90deg,rgba(120,80,160,0) 24%,rgba(120,80,160,.35) 25%,rgba(120,80,160,.35) 27%,rgba(120,80,160,0) 28%);
}
.s-scurry .crumb{position:absolute;top:47%;width:5px;height:5px;margin-top:-2px;border-radius:50%;
  background:#ffce54;box-shadow:0 0 8px 2px rgba(255,206,84,.4)}
.s-scurry .crumb:nth-child(1){left:46%;animation:scrnib 3.6s steps(1) infinite}
.s-scurry .crumb:nth-child(2){left:58%;animation:scrnib 3.6s steps(1) .45s infinite}
.s-scurry .crumb:nth-child(3){left:70%;animation:scrnib 3.6s steps(1) .9s infinite}
@keyframes scrnib{0%{opacity:1}38%{opacity:1}40%{opacity:0}92%{opacity:0}100%{opacity:1}}
.s-scurry .mouse{position:absolute;left:30%;top:47%;width:15px;height:11px;margin-top:-5px;border-radius:50% 60% 60% 50%;
  background:#f4e6cf;animation:scrrun 3.6s linear infinite}
.s-scurry .mouse::before{content:'';position:absolute;right:-2px;top:-4px;width:6px;height:6px;border-radius:50%;background:#f4e6cf}
.s-scurry .mouse::after{content:'';position:absolute;left:-9px;top:4px;width:10px;height:2px;border-radius:2px;background:rgba(244,230,207,.7)}
@keyframes scrrun{0%{transform:translateX(0)}50%{transform:translateX(90px)}50.01%{transform:translateX(90px) scaleX(-1)}100%{transform:translateX(0) scaleX(-1)}}
.s-scurry .cat{position:absolute;left:8%;top:44%;width:22px;height:16px;margin-top:-8px;border-radius:55% 55% 45% 45%;
  background:#241f2e;animation:scrchase 3.6s linear infinite}
.s-scurry .cat::before,.s-scurry .cat::after{content:'';position:absolute;top:5px;width:5px;height:4px;border-radius:50%;
  background:#ffb14a;box-shadow:0 0 7px 2px rgba(255,177,74,.55);animation:scrblink 3.6s steps(1) infinite}
.s-scurry .cat::before{right:4px}
.s-scurry .cat::after{right:12px}
@keyframes scrchase{0%{transform:translateX(0)}50%{transform:translateX(84px)}50.01%{transform:translateX(84px) scaleX(-1)}100%{transform:translateX(0) scaleX(-1)}}
@keyframes scrblink{0%,44%{opacity:1}46%,48%{opacity:.2}50%,100%{opacity:1}}
/* moonjar scene: a little glass jar of night, three resting moons and one falling.
   Append to muplu public/scenes.css.
   Tile markup: <div class="scene s-moonjar" aria-hidden="true">
     <b class="jar"></b><i class="m1"></i><i class="m2"></i><i class="m3"></i><i class="fall"></i></div> */
.s-moonjar{background:linear-gradient(#1c1738,#0b0a18 60%,#070610)}
.s-moonjar::before{content:'';position:absolute;inset:0;
  background:radial-gradient(50% 40% at 30% 25%, rgba(234,242,255,.08), transparent 70%)}
.s-moonjar .jar{position:absolute;left:50%;top:18%;width:34%;height:74%;margin-left:-17%;
  border:2px solid rgba(143,183,216,.55);border-top:none;border-radius:0 0 16px 16px}
.s-moonjar .jar::before{content:'';position:absolute;left:-8%;top:-6px;width:116%;height:0;
  border-top:2px dashed rgba(255,215,106,.4)}
.s-moonjar i{position:absolute;border-radius:50%}
.s-moonjar .m1{left:41%;bottom:12%;width:26px;height:26px;background:#f4e6cf;
  box-shadow:0 0 12px 3px rgba(244,230,207,.3)}
.s-moonjar .m2{left:54%;bottom:12%;width:17px;height:17px;background:#c9bfe0}
.s-moonjar .m3{left:47%;bottom:26%;width:13px;height:13px;background:#ffd76a;
  box-shadow:0 0 10px 3px rgba(255,215,106,.45)}
.s-moonjar .fall{left:50%;top:12%;width:11px;height:11px;margin-left:-5px;background:#8b93a5;
  animation:mjfall 3.2s cubic-bezier(.45,.05,.6,1) infinite}
@keyframes mjfall{0%{transform:translateY(0);opacity:0}12%{opacity:1}
  62%{transform:translateY(74px);opacity:1}68%,100%{transform:translateY(74px);opacity:0}}

/* comet scene: a planet, its dashed ring, and a comet swinging round it */
.s-comet{background:linear-gradient(#0d1430,#070b1a)}
.s-comet .pl{position:absolute;left:38%;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9fb8cf,#4a6f8f)}
.s-comet .ring{position:absolute;left:38%;top:50%;width:74px;height:74px;margin:-37px;border-radius:50%;
  border:1.5px dashed rgba(111,159,191,.5)}
.s-comet .orb{position:absolute;left:38%;top:50%;width:74px;height:74px;margin:-37px;
  animation:cometspin 3.4s linear infinite}
.s-comet .orb i{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:#ffe9b0;box-shadow:0 0 12px 4px rgba(255,233,176,.5)}
@keyframes cometspin{to{transform:rotate(360deg)}}
.s-comet .far{position:absolute;right:12%;top:22%;width:14px;height:14px;border-radius:50%;
  background:#7a5f9f;box-shadow:0 0 0 12px rgba(122,95,159,0),0 0 0 1.5px rgba(111,159,191,.35)}

/* murmur scene: a dusk sky and a drift of tiny birds */
.s-murmur{background:linear-gradient(#2a1a33,#5c2f4a 45%,#e8804f 78%,#1a1022 92%)}
.s-murmur .sun{position:absolute;left:50%;bottom:14%;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:#ffd9a0;box-shadow:0 0 18px 8px rgba(255,217,160,.4)}
.s-murmur i{position:absolute;width:0;height:0;border-style:solid;
  border-width:3px 0 3px 8px;border-color:transparent transparent transparent #1a1022;
  animation:murdrift 5s ease-in-out infinite}
.s-murmur i:nth-child(2){left:20%;top:24%}
.s-murmur i:nth-child(3){left:32%;top:30%;animation-delay:.4s}
.s-murmur i:nth-child(4){left:44%;top:20%;animation-delay:.8s}
.s-murmur i:nth-child(5){left:56%;top:32%;animation-delay:1.2s}
.s-murmur i:nth-child(6){left:66%;top:24%;animation-delay:1.6s}
.s-murmur i:nth-child(7){left:38%;top:40%;animation-delay:2s}
@keyframes murdrift{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(18px,-10px) rotate(6deg)}}

/* puddles scene: rain over a puddle, the duck riding it */
.s-puddles{background:linear-gradient(#8fb5c9 30%,#7d9fb2 31%,#7d9fb2)}
.s-puddles .pud{position:absolute;left:50%;top:62%;width:96px;height:34px;margin:-17px -48px;border-radius:50%;
  background:#4a7b95;border:2px solid rgba(230,244,250,.85);box-shadow:inset 0 3px 8px rgba(20,50,70,.3)}
.s-puddles .duck{position:absolute;left:50%;top:58%;width:22px;height:15px;margin-left:-14px;border-radius:50% 60% 55% 50%;
  background:#ffd94d;animation:puddbob 2.6s ease-in-out infinite}
.s-puddles .duck::before{content:'';position:absolute;right:-3px;top:-8px;width:11px;height:11px;border-radius:50%;background:#ffd94d}
.s-puddles .duck::after{content:'';position:absolute;right:-9px;top:-5px;width:0;height:0;
  border-style:solid;border-width:3px 0 3px 7px;border-color:transparent transparent transparent #ff9d2e}
@keyframes puddbob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.s-puddles b{position:absolute;width:1.5px;height:12px;background:rgba(220,237,245,.7);
  animation:puddrain 1.1s linear infinite}
.s-puddles b:nth-child(3){left:22%;animation-delay:0s}
.s-puddles b:nth-child(4){left:38%;animation-delay:.3s}
.s-puddles b:nth-child(5){left:62%;animation-delay:.6s}
.s-puddles b:nth-child(6){left:78%;animation-delay:.15s}
@keyframes puddrain{0%{top:-10%;opacity:0}12%{opacity:1}100%{top:96%;opacity:.3}}

/* bubbles scene: three bubbles on their way up */
.s-bubbles{background:linear-gradient(#9fd4f2,#d9f0fb)}
.s-bubbles i{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.8),rgba(255,255,255,.12) 60%);
  animation:bubrise 4.2s linear infinite}
.s-bubbles i:nth-child(1){left:24%;width:26px;height:26px;animation-delay:0s}
.s-bubbles i:nth-child(2){left:52%;width:38px;height:38px;animation-delay:1.3s}
.s-bubbles i:nth-child(3){left:74%;width:18px;height:18px;animation-delay:2.4s}
@keyframes bubrise{0%{top:104%;opacity:0}10%{opacity:1}92%{opacity:1}100%{top:-30%;opacity:0}}
.s-bubbles .sun{position:absolute;right:10%;top:12%;width:26px;height:26px;border-radius:50%;background:rgba(255,236,150,.9)}

/* tug scene: the rope, the knot straining between two lines */
.s-tug{background:linear-gradient(#24503c,#2c4a3b)}
.s-tug .rope{position:absolute;left:50%;top:-4%;width:6px;height:108%;margin-left:-3px;
  background:repeating-linear-gradient(-30deg,#d9b45c 0 6px,#c6a049 6px 12px)}
.s-tug .knot{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border-radius:50%;
  background:#d9b45c;border:3px solid #2c4a3b;box-shadow:0 0 0 2px #d9b45c;
  animation:tugpull 2.8s ease-in-out infinite}
@keyframes tugpull{0%,100%{transform:translateY(-26px)}50%{transform:translateY(26px)}}
.s-tug b{position:absolute;left:14%;right:14%;height:0;border-top:2.5px dashed rgba(255,93,93,.6)}
.s-tug b:first-child{top:22%;border-color:rgba(74,168,255,.6)}
.s-tug b:nth-child(2){top:78%}

/* ember scene: a small fire holding the dark */
.s-ember{background:radial-gradient(80% 70% at 50% 78%,rgba(255,157,60,.22),transparent 60%),linear-gradient(#1c1128,#140d1c)}
.s-ember .fl{position:absolute;left:50%;bottom:22%;width:26px;height:36px;margin-left:-13px;
  border-radius:50% 50% 46% 46%/62% 62% 38% 38%;background:linear-gradient(#ffd76a,#ff9d3c 55%,#ff5a28);
  animation:embflick 1.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes embflick{0%,100%{transform:scale(1) rotate(-2deg)}30%{transform:scale(1.08,1.14) rotate(2deg)}65%{transform:scale(.95,.96) rotate(-1deg)}}
.s-ember .logs{position:absolute;left:50%;bottom:18%;width:52px;height:8px;margin-left:-26px;border-radius:4px;
  background:#3a2a20;box-shadow:0 4px 0 -1px #2c1f18}
.s-ember i{position:absolute;left:50%;bottom:30%;width:4px;height:4px;border-radius:50%;background:#ffb35c;
  animation:embup 2.8s ease-out infinite}
.s-ember i:nth-child(3){margin-left:-10px;animation-delay:.5s}
.s-ember i:nth-child(4){margin-left:8px;animation-delay:1.2s}
.s-ember i:nth-child(5){margin-left:-2px;animation-delay:1.9s}
@keyframes embup{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-64px);opacity:0}}

/* THE INSIDE WING SCENES: plum, slightly wrong on purpose */
/* echo: you, and two fading yous chasing sparks */
.s-echoin{background:linear-gradient(#1b1430,#100c1a)}
.s-echoin i{position:absolute;width:14px;height:14px;border-radius:50%}
.s-echoin .you{left:22%;top:52%;background:#ffd9a0;animation:echorun 4s ease-in-out infinite}
.s-echoin .gh{background:#b9a6d8}
.s-echoin .g1{left:22%;top:52%;opacity:.5;animation:echorun 4s ease-in-out .5s infinite}
.s-echoin .g2{left:22%;top:52%;opacity:.25;animation:echorun 4s ease-in-out 1s infinite}
@keyframes echorun{0%,100%{transform:translate(0,0)}30%{transform:translate(90px,-22px)}65%{transform:translate(150px,16px)}}
.s-echoin .sp{position:absolute;width:9px;height:9px;background:#ffd76a;transform:rotate(45deg)}
.s-echoin .sp{left:62%;top:36%}
.s-echoin .s2{left:82%;top:60%}
/* blink: candle + a wisp that creeps only sometimes */
.s-blinkin{background:radial-gradient(70% 80% at 50% 60%,rgba(255,202,102,.16),transparent 65%),#120c1a}
.s-blinkin .candle{position:absolute;left:50%;top:52%;width:12px;height:24px;margin-left:-6px;background:#e8dcc8;border-radius:2px}
.s-blinkin .flame{position:absolute;left:50%;top:38%;width:10px;height:16px;margin-left:-5px;
  border-radius:50% 50% 45% 45%/65% 65% 35% 35%;background:#ffca66;animation:blflick 1.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes blflick{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12,1.2) rotate(3deg)}}
.s-blinkin .wisp{position:absolute;width:16px;height:30px;border-radius:50% 50% 40% 40%;background:rgba(198,190,214,.45)}
.s-blinkin .w1{left:16%;top:38%;animation:blcreep 5s steps(1) infinite,blslide 5s linear infinite}
.s-blinkin .w2{right:14%;top:52%;animation:blcreep 5s steps(1) 2.5s infinite,blslide2 5s linear infinite}
@keyframes blslide{0%{transform:translateX(0)}45%{transform:translateX(26px)}50%,100%{transform:translateX(26px)}}
@keyframes blslide2{0%,50%{transform:translateX(0)}95%{transform:translateX(-24px)}100%{transform:translateX(-24px)}}
@keyframes blcreep{0%,100%{opacity:.8}}
/* again: three objects, one blinks into a different colour */
.s-againin{background:#3a2e48}
.s-againin .obj{position:absolute;width:22px;height:22px;border-radius:6px;top:48%}
.s-againin .o1{left:22%;background:#7fd4d0}
.s-againin .o2{left:46%;background:#e8c67a;animation:agswap 4.2s steps(1) infinite}
.s-againin .o3{left:70%;background:#c9a0f0}
@keyframes agswap{0%,45%{background:#e8c67a;border-radius:6px}50%,95%{background:#e0604e;border-radius:50%}}
.s-againin .lid{position:absolute;inset:0;background:#17121f;animation:agblink 4.2s steps(1) infinite;opacity:0}
@keyframes agblink{46%,48%{opacity:1}49%,95%{opacity:0}96%,98%{opacity:1}}
/* faces: two blobs, one with eyes that appear */
.s-facesin{background:linear-gradient(#2b1f38,#1c1426)}
.s-facesin .blob{position:absolute;border-radius:50%;filter:blur(6px)}
.s-facesin .b1{left:20%;top:30%;width:56px;height:44px;background:rgba(120,100,150,.55)}
.s-facesin .b2{left:60%;top:48%;width:48px;height:40px;background:rgba(140,110,160,.5)}
.s-facesin .eyes{position:absolute;left:26%;top:41%;width:30px;height:12px;
  animation:facein 5s ease-in-out infinite}
.s-facesin .eyes::before,.s-facesin .eyes::after{content:'';position:absolute;top:0;width:7px;height:7px;border-radius:50%;background:#f0e8f6}
.s-facesin .eyes::before{left:0}
.s-facesin .eyes::after{right:0}
@keyframes facein{0%,25%{opacity:0}45%,100%{opacity:1}}
/* split: two selves mirrored over a dashed line */
.s-splitin{background:linear-gradient(90deg,#151d26,#181226 50%,#221530)}
.s-splitin .line{position:absolute;left:50%;top:8%;bottom:8%;width:0;border-left:2px dashed rgba(240,232,220,.35)}
.s-splitin i{position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%}
.s-splitin .sa{left:26%;background:#7fd4d0;animation:spwob 3.4s ease-in-out infinite}
.s-splitin .sb{right:26%;background:#c9a0f0;animation:spwob2 3.4s ease-in-out infinite}
@keyframes spwob{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,-14px)}}
@keyframes spwob2{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,-14px)}}
.s-splitin .hz{position:absolute;right:12%;top:24%;width:20px;height:20px;border-radius:50%;background:#e0604e;opacity:.85}
/* inkblot: a breathing symmetric blot */
.s-inkblotin{background:#efe6da}
.s-inkblotin .blot{position:absolute;left:50%;top:50%;width:64px;height:74px;margin:-37px -32px;
  background:#1a1220;border-radius:52% 48% 60% 40%/58% 62% 38% 42%;
  animation:blotbreathe 5s ease-in-out infinite}
.s-inkblotin .blot::before{content:'';position:absolute;left:-22px;top:14px;width:26px;height:34px;
  background:#1a1220;border-radius:60% 40% 55% 45%}
.s-inkblotin .blot::after{content:'';position:absolute;right:-22px;top:14px;width:26px;height:34px;
  background:#1a1220;border-radius:40% 60% 45% 55%}
@keyframes blotbreathe{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.06) rotate(1.5deg)}}

/* sprig: a little green leaper bouncing wall to wall up a stone well */
.s-sprig{background:linear-gradient(#3a4356,#1d2230)}
.s-sprig::before,.s-sprig::after{content:'';position:absolute;top:0;bottom:0;width:16%;background:#2b3140}
.s-sprig::before{left:0;border-right:3px solid rgba(22,27,38,.9)}
.s-sprig::after{right:0;border-left:3px solid rgba(22,27,38,.9)}
.s-sprig .leaf{position:absolute;left:16%;bottom:18%;width:15px;height:15px;border-radius:50%;
  background:var(--lime);z-index:2;animation:sprighop 2.8s ease-in-out infinite}
@keyframes sprighop{0%,12%{left:15%;bottom:16%}30%{left:50%;bottom:52%}
  48%,60%{left:76%;bottom:38%}78%{left:44%;bottom:78%}100%{left:15%;bottom:16%}}
.s-sprig .th{position:absolute;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent}
.s-sprig .th.l{left:16%;border-left:11px solid #c74848;top:30%}
.s-sprig .th.r{right:16%;border-right:11px solid #c74848;top:58%}
.s-sprig .wat{position:absolute;left:0;right:0;bottom:-4px;height:16px;background:rgba(56,110,150,.75);
  border-top:2px solid rgba(160,220,255,.6);animation:sprigwat 5s ease-in-out infinite}
@keyframes sprigwat{0%,100%{height:14px}50%{height:22px}}

/* chime: bells over a dusk hill, one always mid-swing */
.s-chime{background:linear-gradient(#241a44,#3a2c5a 62%,#5a3a5f)}
.s-chime .bell{position:absolute;top:12%;width:26px;height:24px;background:linear-gradient(135deg,#ffe9b0,#ffc93c 60%,#c98f1e);
  border-radius:46% 46% 12% 12%/60% 60% 14% 14%;transform-origin:50% -40%}
.s-chime .bell::after{content:'';position:absolute;left:50%;bottom:-4px;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:#ffe9b0}
.s-chime .bell:nth-child(1){left:18%;animation:chimeswing 3.2s ease-in-out infinite}
.s-chime .bell:nth-child(2){left:46%;top:20%;width:20px;height:19px;animation:chimeswing 2.6s ease-in-out .7s infinite}
.s-chime .bell:nth-child(3){left:70%;top:9%;width:30px;height:27px;animation:chimeswing 3.8s ease-in-out 1.3s infinite}
@keyframes chimeswing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.s-chime .hill{position:absolute;left:-6%;right:-6%;bottom:-36px;height:64px;background:#2c2050;
  border-radius:60% 45% 0 0/90% 70% 0 0}
.s-chime i{position:absolute;width:4px;height:4px;border-radius:50%;background:#f3ecff;opacity:.6}
.s-chime i:nth-child(5){left:10%;top:52%;animation:twinkle 2.6s ease-in-out infinite}
.s-chime i:nth-child(6){left:88%;top:44%;animation:twinkle 3.4s ease-in-out .8s infinite}

/* peep: a bush in a meadow, and someone keeps peeping out of it */
.s-peep{background:linear-gradient(#a5ddf5 52%,#a8d949 52%)}
.s-peep .who{position:absolute;left:50%;top:54%;width:34px;height:34px;margin-left:-17px;border-radius:50%;
  background:#ff9d76;animation:peeprise 3.6s ease-in-out infinite}
.s-peep .who::before{content:'';position:absolute;left:6px;top:12px;width:6px;height:6px;border-radius:50%;background:#17141f;
  box-shadow:16px 0 0 #17141f}
.s-peep .who::after{content:'';position:absolute;left:-4px;top:-6px;width:12px;height:12px;border-radius:50%;
  background:#ff9d76;box-shadow:26px 0 0 #ff9d76}
@keyframes peeprise{0%,18%{transform:translateY(26px)}34%,62%{transform:translateY(-8px)}78%,100%{transform:translateY(26px)}}
.s-peep .bush{position:absolute;left:50%;top:56%;width:74px;height:40px;margin-left:-37px;background:#78b83a;
  border-radius:48% 52% 46% 54%/95% 90% 30% 30%;z-index:2}
.s-peep .bush::before{content:'';position:absolute;left:-14px;top:10px;width:36px;height:30px;background:#78b83a;border-radius:50%}
.s-peep .bush::after{content:'';position:absolute;right:-12px;top:8px;width:34px;height:30px;background:#8fc93a;border-radius:50%}
.s-peep .sun{position:absolute;right:26%;top:9%;width:22px;height:22px;border-radius:50%;background:#ffec96}

/* patch: three folded bands of paper, each with a different artist's scribble */
.s-patch{background:#f4e9d7}
.s-patch .band{position:absolute;left:12%;right:12%;height:27%;background:#fffdf6;border:2px solid rgba(23,20,31,.75);border-radius:8px}
.s-patch .band.b1{top:7%}
.s-patch .band.b2{top:37%;border-style:dashed;animation:patchpeek 4.2s ease-in-out infinite}
.s-patch .band.b3{top:67%}
@keyframes patchpeek{0%,100%{opacity:.45}50%{opacity:1}}
.s-patch .sq{position:absolute;border-radius:50%;border:4px solid transparent}
.s-patch .sq.q1{left:38%;top:11%;width:22px;height:16px;border-top-color:#ff5d5d;transform:rotate(-8deg)}
.s-patch .sq.q2{left:44%;top:44%;width:28px;height:14px;border-bottom-color:#4aa8ff}
.s-patch .sq.q3{left:40%;top:74%;width:10px;height:14px;border-left-color:#78b83a;transform:rotate(14deg)}
.s-patch .sq.q4{left:53%;top:74%;width:10px;height:14px;border-right-color:#78b83a;transform:rotate(-14deg)}

/* seaglass: a bottle bobbing on a night sea, under a patient moon */
.s-seaglass{background:linear-gradient(#081720,#0e2531 55%,#153b47 55%)}
.s-seaglass .moon{position:absolute;right:14%;top:12%;width:20px;height:20px;border-radius:50%;background:#fdf3d0;
  box-shadow:0 0 16px 4px rgba(253,243,208,.4)}
.s-seaglass .bot{position:absolute;left:44%;top:40%;width:14px;height:26px;background:rgba(127,214,194,.85);
  border-radius:5px 5px 6px 6px;transform:rotate(12deg);animation:seabob 3.4s ease-in-out infinite}
.s-seaglass .bot::before{content:'';position:absolute;left:4px;top:-8px;width:6px;height:8px;background:#b98c5f;border-radius:2px}
.s-seaglass .bot::after{content:'';position:absolute;left:2px;top:9px;width:10px;height:11px;background:rgba(253,243,208,.9);border-radius:1px}
@keyframes seabob{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(15deg) translateY(-6px)}}
.s-seaglass .wv{position:absolute;left:-10%;right:-10%;height:18px;border-radius:50%;background:#174250;opacity:.9}
.s-seaglass .wv.w1{top:52%;animation:seawv 4.4s ease-in-out infinite}
.s-seaglass .wv.w2{top:64%;background:#1a4a58;animation:seawv 3.6s ease-in-out 1.1s infinite}
@keyframes seawv{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}

/* minute: your minute, drawn short against the world's quiet ring */
.s-minute{background:linear-gradient(#1c1329,#120c1c)}
.s-minute .ring{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px;border-radius:50%;
  border:5px solid rgba(239,232,245,.22)}
.s-minute .arc{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px;border-radius:50%;
  border:5px solid transparent;border-top-color:#e05fd0;border-right-color:#e05fd0;
  animation:minutehand 6s linear infinite}
@keyframes minutehand{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.s-minute .stone{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#cbb999,#7d6f58);animation:breathe 5.2s ease-in-out infinite}

/* CUCKOO: a clutch under a balance beam, one egg rocking because it does not belong */
.s-cuckoo{background:linear-gradient(#3a2740,#8a5545)}
.s-cuckoo .beam{position:absolute;left:20%;right:20%;top:20%;height:4px;border-radius:3px;
  background:#8a6448;transform-origin:50% 50%;animation:cuckbeam 4.4s ease-in-out infinite}
.s-cuckoo .beam::after{content:'';position:absolute;left:50%;top:-11px;width:6px;height:12px;
  margin-left:-3px;border-radius:3px;background:#6b4a3a}
.s-cuckoo .egg{position:absolute;bottom:9%;width:17%;padding-bottom:22%;
  border-radius:50% 50% 48% 48%;
  background:radial-gradient(circle at 38% 30%,#fdf1d8,#d0b58e)}
.s-cuckoo .egg.a{left:22%}
.s-cuckoo .egg.b{left:41.5%;background:radial-gradient(circle at 38% 30%,#f2e0bd,#bfa079);
  animation:cuckrock 2.6s ease-in-out infinite}
.s-cuckoo .egg.c{left:61%}
@keyframes cuckbeam{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes cuckrock{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* NETTLE: a stem with three leaves, and two things crawling in to eat it */
.s-nettle{background:radial-gradient(circle at 50% 60%,#3c2c1c 0%,#1b3020 62%,#12200f 100%)}
.s-nettle .lf{position:absolute;left:50%;bottom:20%;width:26%;height:11%;
  border-radius:0 60% 0 60%;background:#7fbf46;transform-origin:0% 50%}
.s-nettle .lf.a{transform:rotate(-150deg);animation:nettlesway 3.6s ease-in-out infinite}
.s-nettle .lf.b{transform:rotate(-90deg);background:#8ed24f;
  animation:nettlesway 3.6s ease-in-out infinite .3s}
.s-nettle .lf.c{transform:rotate(-30deg);background:#6aa63a;
  animation:nettlesway 3.6s ease-in-out infinite .6s}
.s-nettle .lf.b::after{content:'';position:absolute;left:-14%;top:-46%;width:34%;padding-bottom:34%;
  border-radius:50%;background:#ffd447}
.s-nettle .bug{position:absolute;width:9%;padding-bottom:11%;border-radius:50%}
.s-nettle .bug.x{background:#c98fd0;left:8%;bottom:26%;animation:nettlecrawl 4.2s linear infinite}
.s-nettle .bug.y{background:#e0783c;right:8%;bottom:40%;animation:nettlecrawl2 5s linear infinite}
@keyframes nettlesway{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}}
@keyframes nettlecrawl{0%{left:4%;opacity:0}12%{opacity:1}82%{left:40%;opacity:1}100%{left:44%;opacity:0}}
@keyframes nettlecrawl2{0%{right:4%;opacity:0}12%{opacity:1}82%{right:40%;opacity:1}100%{right:44%;opacity:0}}

/* SWORN: words surfacing and sinking, circling one that never comes */
.s-sworn{background:linear-gradient(#241a37,#171021)}
.s-sworn .wd{position:absolute;font-style:normal;font-weight:700;color:rgba(239,232,245,.7);
  font-size:13px;animation:swornfade 6s ease-in-out infinite}
.s-sworn .wd.a{left:14%;top:22%}
.s-sworn .wd.b{right:16%;top:34%;animation-delay:1.5s}
.s-sworn .wd.c{left:22%;bottom:26%;animation-delay:3s}
.s-sworn .wd.d{right:22%;bottom:38%;animation-delay:4.5s}
.s-sworn .lure{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-weight:800;font-size:19px;color:#e05fd0;opacity:.0;
  animation:swornlure 6s ease-in-out infinite}
@keyframes swornfade{0%,100%{opacity:.12}50%{opacity:.85}}
@keyframes swornlure{0%,72%,100%{opacity:0}84%{opacity:.9}}

/* DAPPLE: spots that breathe and drift, the reaction quietly running */
.s-dapple{background:radial-gradient(circle at 35% 40%,#16323a 0%,#0d1b1e 80%)}
.s-dapple .sp{position:absolute;border-radius:50%;background:#7fd8c8;
  animation:dapplebreathe 5s ease-in-out infinite}
.s-dapple .sp.a{left:16%;top:22%;width:14%;padding-bottom:14%}
.s-dapple .sp.b{left:44%;top:14%;width:10%;padding-bottom:10%;animation-delay:1s}
.s-dapple .sp.c{left:66%;top:38%;width:13%;padding-bottom:13%;background:#e8c86a;animation-delay:2s}
.s-dapple .sp.d{left:28%;top:52%;width:16%;padding-bottom:16%;animation-delay:3s}
.s-dapple .sp.e{left:56%;top:66%;width:11%;padding-bottom:11%;animation-delay:4s}
@keyframes dapplebreathe{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.25);opacity:1}}

/* DOLLOP: two drops falling into a pond, meeting, and a duck paddling through */
.s-dollop{background:linear-gradient(#a8d4de 0%,#a8d4de 34%,#2a5e74 35%,#1b3a4a 100%)}
.s-dollop .dr{position:absolute;width:10%;padding-bottom:13%;border-radius:50% 50% 60% 60%}
.s-dollop .dr.a{left:30%;background:#e05f5f;animation:dollopfall 3.4s ease-in infinite}
.s-dollop .dr.b{left:56%;background:#e8c84a;animation:dollopfall 3.4s ease-in infinite 1.7s}
.s-dollop .dm{position:absolute;left:40%;top:52%;width:18%;padding-bottom:18%;border-radius:50%;
  background:#e8894a;opacity:0;animation:dollopmeet 3.4s ease-out infinite}
.s-dollop .duck{position:absolute;left:8%;top:26%;width:16%;padding-bottom:11%;
  background:#f2efe6;border-radius:60% 60% 45% 45%;
  animation:dollopduck 7s linear infinite}
.s-dollop .duck::before{content:'';position:absolute;right:-8%;top:-58%;width:44%;padding-bottom:44%;
  background:#f2efe6;border-radius:50%}
.s-dollop .duck::after{content:'';position:absolute;right:-22%;top:-42%;width:26%;padding-bottom:16%;
  background:#e8964a;border-radius:2px}
.s-dollop .wave{position:absolute;left:0;right:0;top:33%;height:3px;background:rgba(238,247,242,.5)}
@keyframes dollopfall{0%,55%{transform:translateY(-40%);opacity:0}62%{opacity:1}
  86%{transform:translateY(280%);opacity:1}92%,100%{transform:translateY(300%);opacity:0}}
@keyframes dollopmeet{0%,86%{opacity:0;transform:scale(.4)}94%{opacity:.9;transform:scale(1.15)}100%{opacity:0;transform:scale(1.3)}}
@keyframes dollopduck{0%{transform:translateX(0)}50%{transform:translateX(380%)}
  50.01%{transform:translateX(380%) scaleX(-1)}100%{transform:translateX(0) scaleX(-1)}}

/* FOGHORN: a little boat feeling its way between rocks, fog breathing over it */
.s-foghorn{background:linear-gradient(#1b2836,#101720)}
.s-foghorn .boat{position:absolute;left:47%;bottom:12%;width:9%;padding-bottom:16%;
  background:#e8dfc8;border-radius:50% 50% 30% 30%/65% 65% 20% 20%;
  animation:fogboat 6s ease-in-out infinite}
.s-foghorn .rk{position:absolute;background:#3c4a54;border-radius:30% 55% 40% 50%}
.s-foghorn .rk.a{left:22%;top:30%;width:13%;padding-bottom:10%}
.s-foghorn .rk.b{right:20%;top:52%;width:10%;padding-bottom:8%}
.s-foghorn .fog{position:absolute;inset:-10%;
  background:radial-gradient(circle at 50% 78%,transparent 22%,rgba(24,32,42,.88) 60%);
  animation:fogbreathe 5s ease-in-out infinite}
@keyframes fogboat{0%,100%{transform:translateX(-16%) rotate(-5deg)}50%{transform:translateX(16%) rotate(5deg)}}
@keyframes fogbreathe{0%,100%{opacity:.95}50%{opacity:.75}}

/* PULSEMERGE: a jar of light, and the shapes are the whole point. The tile shows four
   rungs of the ladder as four different silhouettes rather than four coloured dots, which
   is exactly the thing that stops the game reading as everyone else's game. */
.s-pulsemerge{background:radial-gradient(circle at 50% 66%,#2e2947 0%,#201c2f 56%,#14121c 100%)}
.s-pulsemerge .o{position:absolute;filter:drop-shadow(0 0 7px currentColor)}
.s-pulsemerge .o::after{content:'';position:absolute;inset:0;border-radius:inherit;
  clip-path:inherit;background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,255,255,0) 55%)}
.s-pulsemerge .o.a{left:13%;top:26%;width:17%;padding-bottom:17%;border-radius:50%;
  background:#56c8f0;color:#56c8f0;animation:pulsedrift 3.6s ease-in-out infinite}
.s-pulsemerge .o.b{left:38%;top:14%;width:16%;padding-bottom:20%;color:#7d8ef5;
  background:#7d8ef5;border-radius:50% 50% 46% 46%/62% 62% 38% 38%;
  animation:pulsedrift 3.6s ease-in-out infinite .5s}
.s-pulsemerge .o.c{left:64%;top:24%;width:19%;padding-bottom:19%;color:#f06bb8;
  background:#f06bb8;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  animation:pulsedrift 3.6s ease-in-out infinite 1s}
.s-pulsemerge .o.d{left:26%;top:52%;width:19%;padding-bottom:19%;color:#f4776a;
  background:#f4776a;clip-path:polygon(50% 0,100% 33%,78% 100%,22% 100%,0 33%);
  animation:pulsefold 3.6s ease-in-out infinite 1.4s}
.s-pulsemerge .o.e{left:61%;top:52%;width:18%;padding-bottom:18%;color:#f5a03e;
  background:#f5a03e;
  clip-path:polygon(50% 0,61% 32%,95% 25%,72% 50%,95% 75%,61% 68%,50% 100%,39% 68%,5% 75%,28% 50%,5% 25%,39% 32%);
  animation:pulsespark 2.4s ease-in-out infinite}
@keyframes pulsedrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-11%)}}
@keyframes pulsefold{0%,100%{transform:scale(1)}44%{transform:scale(1.07)}}
@keyframes pulsespark{0%,100%{opacity:.72;transform:scale(.92) rotate(0)}50%{opacity:1;transform:scale(1.03) rotate(18deg)}}

/* ---------- the share button, on the home page and the six wing pages ----------

   THE TOYS DO NOT USE THIS. A toy is a fixed screen and its share button copies the look
   of that toy's own .muplu-home pill at runtime, so it needs no rule anywhere; see
   /share.js. These seven pages are documents that scroll, they have no such pill, and
   they all already load this file, so one rule dresses all seven.

   IT BORROWS THE PAGE'S INK RATHER THAN NAMING A COLOUR. Every wing sets its own
   environment and the home page is paper where play is night, so a hardcoded colour would
   be wrong in six rooms out of seven. currentColor plus a faded opacity is the same
   treatment the wings already give their own "← muplu" link, and it lands right on any
   background without this file knowing what that background is. */
.muplu-share{
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:14px;font-weight:700;line-height:1;
  color:inherit;background:none;cursor:pointer;
  border:1.5px solid currentColor;border-radius:999px;
  padding:7px 14px 7px 11px;
  opacity:.45;transition:opacity .15s;
  -webkit-tap-highlight-color:transparent;
}
/* The wings sit it beside their "← muplu" link. That row is a flex box rather than two
   inline siblings because TOGETHER declares its own .home as display:block, which wrapped
   the button onto the next line and dropped it into the middle of the page. Baseline
   alignment lines the link text up with the button label, and leaving .home's own margin
   alone keeps each wing's spacing below the row exactly as its author set it. */
.muplu-way-out{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.muplu-share:hover,.muplu-share:focus-visible{opacity:1}
.muplu-share svg{flex:0 0 auto}

.muplu-share-note{
  display:inline-block;margin-left:10px;font-size:13px;font-weight:600;
  color:inherit;opacity:0;transition:opacity .3s;
}
/* Snaps on, only fades off. A confirmation that fades IN is a confirmation that can fail
   to appear: a throttled or backgrounded tab stalls a transition at its start value, and
   "copied" would read as the button doing nothing. */
.muplu-share-note[data-on]{opacity:.75;transition:none}

/* INFOLD: the point, the ring that ripens around it, and the water coming up */
.s-infold{background:linear-gradient(#04131c,#020408)}
.s-infold .deep{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px;
  border-radius:50%;background:radial-gradient(circle,rgba(54,182,180,.22),transparent 68%)}
.s-infold .ring{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;
  border-radius:50%;border:2px solid transparent;border-top-color:#8fe6e4;border-right-color:#8fe6e4;
  animation:tideripe 5.4s ease-in-out infinite}
@keyframes tideripe{0%{transform:rotate(0);opacity:.35}55%{opacity:1}100%{transform:rotate(360deg);opacity:.35}}
.s-infold .pt{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;
  background:#c8f4f6;box-shadow:0 0 14px 5px rgba(140,230,236,.5);animation:breathe 4.6s ease-in-out infinite}
.s-infold .water{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(rgba(54,182,180,.06),rgba(54,182,180,.30));
  animation:tidein 7.8s ease-in-out infinite}
@keyframes tidein{0%,100%{transform:translateY(46%)}50%{transform:translateY(4%)}}

/* lattice scene: five rooms on a pentagon, three of them lighting in turn and the
   middle waking when the third arrives, because three of five is the whole idea. */
.s-lattice{background-color:#141127;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23ffc93c' stroke-opacity='.30' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M48 14 L80 38 L68 76 L28 76 L16 38 Z'/%3E%3Cpath d='M48 14 L68 76 M48 14 L28 76 M80 38 L28 76 M16 38 L68 76 M16 38 L80 38'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(#141127,#221c44 68%,#2b2450);
  background-repeat:no-repeat,no-repeat;background-position:center,center;background-size:104px 104px,cover}
.s-lattice i{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px;border-radius:50%;
  background:rgba(244,237,255,.28);box-shadow:0 0 0 1px rgba(244,237,255,.18)}
.s-lattice i:nth-child(1){transform:translate(0,-37px)}
.s-lattice i:nth-child(2){transform:translate(35px,-11px)}
.s-lattice i:nth-child(3){transform:translate(22px,30px)}
.s-lattice i:nth-child(4){transform:translate(-22px,30px)}
.s-lattice i:nth-child(5){transform:translate(-35px,-11px)}
.s-lattice i:nth-child(1),.s-lattice i:nth-child(3),.s-lattice i:nth-child(5){
  animation:latwake 4.2s ease-in-out infinite}
.s-lattice i:nth-child(3){animation-delay:.5s}
.s-lattice i:nth-child(5){animation-delay:1s}
.s-lattice .core{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 18px rgba(168,217,73,.55);opacity:.12;animation:latcore 4.2s ease-in-out infinite}
@keyframes latwake{0%,18%{background:rgba(244,237,255,.28);box-shadow:0 0 0 1px rgba(244,237,255,.18)}
  36%,88%{background:var(--sun);box-shadow:0 0 14px rgba(255,201,60,.7)}
  100%{background:rgba(244,237,255,.28);box-shadow:0 0 0 1px rgba(244,237,255,.18)}}
@keyframes latcore{0%,42%{opacity:.15;transform:scale(.8)}62%,88%{opacity:.9;transform:scale(1)}100%{opacity:.15;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){
  .s-lattice i,.s-lattice .core{animation:none}
  .s-lattice i:nth-child(1),.s-lattice i:nth-child(3),.s-lattice i:nth-child(5){
    background:var(--sun);box-shadow:0 0 14px rgba(255,201,60,.7)}
  .s-lattice .core{opacity:.9}}