/* radicalsign.dev: home page + one profile page per Radical */
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url(fonts/poppins-semibold.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url(fonts/poppins-bold.woff2) format("woff2")}

:root{
  --purple:#6250EC;--purple-ink:#5240D8;--lav:#B5AAFF;--lav-soft:#EFEDFF;
  --ink:#191826;--muted:#4A4760;--line:#E6E3F5;--tint:#F7F6FF;
  --night:#15112E;
  --display:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gut:clamp(16px,5vw,48px);
  --r-lg:32px;--r-md:22px;
  --shadow:0 1px 2px rgba(25,24,38,.06),0 14px 34px -14px rgba(66,50,180,.24);
  --shadow-hi:0 2px 4px rgba(25,24,38,.06),0 26px 50px -18px rgba(66,50,180,.36);
}
/* each Radical: main color, text-safe ink, soft tint, signature-move card gradient */
.c-oobo{--c:#FF8A1F;--ci:#A3480A;--cs:#FFF0E3;--m1:#B04E0C;--m2:#7F3505}
.c-zeeto{--c:#1DBF73;--ci:#0A7542;--cs:#E4F7EC;--m1:#0B7F49;--m2:#065A33}
.c-bix{--c:#2E7CF6;--ci:#1C5FCF;--cs:#E7F0FE;--m1:#1A57C2;--m2:#143E92}
.c-towry{--c:#E8384F;--ci:#BE1F37;--cs:#FDE8EB;--m1:#C2223A;--m2:#8C1426}
.c-vinesy{--c:#FFC531;--ci:#7E5A00;--cs:#FFF6DB;--m1:#8C6400;--m2:#644700}
/* each pose's width / height, so a Radical can be fitted inside any box */
.p-oobo-jump{--a:.715}.p-zeeto-leap{--a:.874}.p-bix-hop{--a:.683}.p-towry-hop{--a:.684}.p-vinesy-hop{--a:.876}
.p-oobo-bounce{--a:1.077}.p-zeeto-spin{--a:1.152}.p-bix-flip{--a:1.068}.p-towry-stretch{--a:.561}.p-vinesy-bong{--a:1.487}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 1.0625rem/1.65 var(--body);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
p,figure,blockquote{margin:0}
p,li{text-wrap:pretty}
a{color:inherit}
.wrap{width:min(100% - 2*var(--gut),1180px);margin-inline:auto}
.nw{white-space:nowrap}
.keep{display:inline-block} /* words stay together when they fit on one line, and wrap inside when they don't */

:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.nav a:focus-visible,.crumbs a:focus-visible,.brand:focus-visible{border-radius:8px}
.on-dark :focus-visible{outline-color:#fff}
.skip{position:absolute;left:12px;top:-80px;z-index:10;background:#fff;color:var(--purple-ink);font:600 1rem var(--display);padding:12px 18px;border-radius:12px;box-shadow:var(--shadow)}
.skip:focus{top:12px}

/* ---------- header ---------- */
.bar{padding-block:20px}
.bar--dark{background:var(--night);color:#fff}
.bar--light{background:var(--cs)}
.bar__in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 28px}
.brand img{width:clamp(168px,9vw + 110px,214px)}
.nav{display:flex;flex-wrap:wrap;gap:4px clamp(18px,2.6vw,34px);font:600 .9375rem/1 var(--display)}
.nav a{text-decoration:none;padding:10px 0;opacity:.82;transition:opacity .2s}
.nav a:hover{opacity:1;text-decoration:underline 2px;text-underline-offset:7px}
.bar--light .nav a{opacity:1;color:var(--muted)}
.bar--light .nav a:hover{color:var(--ink)}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;text-align:center;
  background:radial-gradient(130% 75% at 50% 100%,#3D2DA6 0%,#251C63 42%,var(--night) 78%);
  padding-top:clamp(40px,6vw,76px)}
/* the root's long stroke slides left as the screen narrows, so it always runs beside the text */
.root{position:absolute;z-index:-1;left:clamp(-90px,(100% - 1300px)*.5,0px);right:0;top:14px;bottom:16%;filter:drop-shadow(0 0 16px rgba(143,123,255,.7))}
.root svg{width:100%;height:100%;overflow:visible}
.root path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.root .r1{stroke:#6E5BFF;stroke-width:14;opacity:.55}
.root .r2{stroke:#C9C0FF;stroke-width:3;opacity:.55}
.sparks i{position:absolute;z-index:-1;width:7px;height:7px;border-radius:50%;background:var(--s);box-shadow:0 0 14px 3px var(--s);animation:twinkle 5s ease-in-out infinite}
.pill{display:inline-flex;align-items:center;gap:10px;font:600 .8125rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#E4DFFF}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#3DDC92;box-shadow:0 0 0 4px rgba(61,220,146,.2);animation:pulse 2.4s ease-in-out infinite}
.hero h1{margin:22px auto 0;max-width:18ch;font-size:clamp(2.6rem,1.3rem + 5.6vw,5.4rem);line-height:1.02;letter-spacing:-.04em}
.glow{background:linear-gradient(90deg,#FF7A8A,#FFA552,#FFD45E,#3DDC92,#6AA6FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin:22px auto 0;max-width:36em;font-size:clamp(1.0625rem,1rem + .4vw,1.3rem);color:#D6D1FF}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:999px;font:600 1rem/1 var(--display);text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--purple-ink);box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
.btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}

/* the five stand on one shared scale: each column is as wide as its picture's source */
.lineup{position:relative;isolation:isolate;display:grid;grid-template-columns:1424fr 1444fr 1454fr 1303fr 1635fr;align-items:end;gap:clamp(4px,2.4vw,30px);
  width:min(100% - 2*var(--gut),980px);margin:clamp(36px,6vw,68px) auto 0;padding-bottom:clamp(34px,5vw,66px)}
.lineup::before{content:"";position:absolute;z-index:-1;left:-12%;right:-12%;bottom:0;height:70%;background:radial-gradient(50% 46% at 50% 82%,rgba(156,138,255,.5),transparent 72%)}

/* a Radical that hops gently, with a shadow on the ground below that shrinks as it rises */
.toy{position:relative;isolation:isolate}
.toy img{width:100%;animation:hop 4.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.toy::after{content:"";position:absolute;z-index:-1;left:16%;right:16%;bottom:-13%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,6,40,.42),transparent);animation:shadow 4.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.hero .toy::after,.make__art--games .toy::after{background:radial-gradient(closest-side,rgba(5,3,20,.7),transparent)}
/* inside a .fit box, a Radical takes up to --bw of its width and --bh of its height */
.fit{container-type:size}
.fit .toy{width:min(var(--bw),var(--bh) * var(--a))}

/* ---------- sections ---------- */
.section{padding-block:clamp(72px,10vw,136px)}
.section--tint{background:linear-gradient(180deg,var(--tint),#F1EFFF)}
.section--short{padding-block:clamp(48px,6vw,80px)}
.head{max-width:46rem;margin-bottom:clamp(40px,6vw,72px)}
.head--center{text-align:center;margin-inline:auto}
.eyebrow{display:block;font:600 .8125rem/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--purple-ink);margin-bottom:14px}
.head h2,.h2{font-size:clamp(2.1rem,1.3rem + 2.8vw,3.4rem)}
.head p{margin-top:18px;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);color:var(--muted)}
.head--center p{margin-inline:auto;max-width:38em}

/* world facts */
.world{list-style:none;margin:0 0 clamp(56px,8vw,104px);padding:0;display:grid;gap:16px}
@media(min-width:760px){.world{grid-template-columns:repeat(3,1fr);gap:20px}}
.world li{background:#fff;border-radius:var(--r-md);padding:24px 24px 26px;box-shadow:var(--shadow);display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;align-content:start}
.world .ico{width:44px;height:44px;border-radius:14px;background:var(--lav-soft);display:grid;place-items:center}
.world .ico svg,.world .ico img{width:26px;height:26px}
.world h3{font-size:1.25rem;letter-spacing:-.01em}
.world p{grid-column:1/-1;color:var(--muted);font-size:.975rem;line-height:1.55}

/* traits + catchphrase */
.traits{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.traits li{font:600 .875rem/1 var(--display);padding:9px 14px;border-radius:999px;background:var(--cs);color:var(--ci);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 45%,transparent)}
.say{margin-top:24px;padding-left:20px;border-left:4px solid var(--c);font:600 clamp(1.25rem,1.1rem + .6vw,1.6rem)/1.3 var(--display);letter-spacing:-.01em}

/* ---------- home: the five cards ---------- */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:20px;justify-content:center;grid-auto-rows:1fr;grid-template-columns:repeat(4,minmax(0,125px))}
/* each card spans 2 half-columns, so a short last row can start half a card in and sit centred */
.card{grid-column:span 2;position:relative;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hi)}
.card__art{--bw:64cqw;--bh:72cqh;position:relative;isolation:isolate;aspect-ratio:1;background:var(--cs);display:grid;place-items:center;padding-bottom:8%}
.card__art::before{content:"";position:absolute;z-index:-1;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 40%,transparent 70%)}
.card__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.card .eyebrow{color:var(--ci);margin-bottom:6px;font-size:.75rem}
.card h3{font-size:1.75rem}
.card .traits{margin-top:12px;gap:6px}
.card .traits li{font-size:.75rem;padding:7px 10px}
.card__say{margin-top:14px;font:600 .975rem/1.4 var(--display);color:var(--ink)}
.card__go{margin-top:auto;padding-top:18px;font:600 .9375rem/1 var(--display);color:var(--ci);text-decoration:none}
.card__go::after{content:"";position:absolute;inset:0;border-radius:var(--r-md)}
.card__go:focus-visible{outline:none}
.card:focus-within{outline:3px solid var(--purple);outline-offset:4px}
.card__go span{display:inline-block;transition:transform .2s}
.card:hover .card__go span{transform:translateX(4px)}
.card:nth-child(5){grid-column:2/span 2}
@media(min-width:720px){.cards{grid-template-columns:repeat(6,minmax(0,125px))}.card:nth-child(5){grid-column:span 2}.card:nth-child(4){grid-column:2/span 2}}
@media(min-width:1180px){.cards{grid-template-columns:repeat(10,minmax(0,125px))}.card:nth-child(4){grid-column:span 2}}
@media(max-width:599px){
  .cards{grid-template-columns:1fr}
  .card,.card:nth-child(5){grid-column:auto;flex-direction:row}
  .card__art{aspect-ratio:auto;width:118px;flex:none;--bw:70cqw;--bh:64cqh}
  .card__body{padding:18px 18px 20px}
}

/* ---------- Question Loop ---------- */
.loop{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.loop li{position:relative;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow);padding:22px 22px 24px;border-top:5px solid var(--c);
  display:grid;grid-template-columns:68px 1fr;column-gap:16px;align-content:start}
.loop .toy{grid-row:span 4;align-self:center}
.loop .toy img{width:68px;height:68px;object-fit:contain}
.loop .toy::after{display:none}
.loop__n{font:600 .75rem/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ci)}
.loop__verb{font:700 1.5rem/1.15 var(--display);letter-spacing:-.02em}
.loop__say{font:600 .975rem/1.4 var(--display);color:var(--ci);margin-top:4px}
.loop__what{color:var(--muted);font-size:.9375rem;line-height:1.5;margin-top:6px}
.loop li:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-17px;width:12px;height:12px;border-right:3px solid var(--lav);border-bottom:3px solid var(--lav);transform:translateX(-50%) rotate(45deg)}
@media(min-width:1000px){
  .loop{grid-template-columns:repeat(5,1fr);gap:24px}
  .loop li{grid-template-columns:1fr;text-align:left;padding:26px 22px 28px}
  .loop .toy{grid-row:auto;margin-bottom:16px;align-self:start}
  .loop .toy img{width:84px;height:84px;object-position:left bottom}
  .loop li:not(:last-child)::after{left:auto;right:-19px;top:50%;bottom:auto;transform:translateY(-50%) rotate(-45deg)}
}
.rootglow{margin-top:clamp(44px,6vw,72px);display:grid;gap:18px 40px;align-items:center;padding:28px clamp(22px,4vw,44px);border-radius:var(--r-lg);background:var(--night);color:#DCD7FF}
.rootglow strong{color:#fff;font-family:var(--display);font-weight:600}
.rootglow__bar{height:16px;border-radius:99px;background:linear-gradient(90deg,#E8384F,#FF8A1F 18%,#FFC531 34%,#1DBF73 50%,#2E7CF6 66%,#6250EC 86%,#8F7BFF);box-shadow:0 0 28px rgba(143,123,255,.55)}
@media(min-width:820px){.rootglow{grid-template-columns:minmax(200px,1fr) 2fr}}

/* ---------- Games & Apps ---------- */
.make{display:grid;gap:22px}
@media(min-width:820px){.make{grid-template-columns:1fr 1fr;gap:26px}}
.make__card{border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column}
.make__art{--h:clamp(190px,22vw,240px);height:var(--h);position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.make__art--games{background:radial-gradient(90% 90% at 50% 100%,#3D2DA6,var(--night));gap:5%;padding-bottom:30px}
.make__art--games .toy{width:min(25%,(var(--h) - 84px) * var(--a))} /* never taller than the panel */
.make__art--apps{background:linear-gradient(160deg,#F3F1FF,#E4E0FF);align-items:center}
.make__art--apps svg{width:min(78%,340px,(var(--h) - 24px)*1.6);height:auto;filter:drop-shadow(0 18px 24px rgba(66,50,180,.22))}
.make__body{padding:28px clamp(22px,3vw,34px) 32px}
.make__body h3{font-size:clamp(1.9rem,1.5rem + 1.2vw,2.4rem);margin-top:16px}
.make__body p{margin-top:10px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:8px;font:600 .75rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--purple-ink);background:var(--lav-soft);padding:8px 12px;border-radius:999px}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--purple);animation:pulse 2.4s ease-in-out infinite}

/* ---------- footer ---------- */
.foot{background:var(--night);color:#CFC9F2;padding-block:56px 36px}
.foot__in{display:grid;gap:28px}
.foot__brand img{width:200px}
.foot__tag{margin-top:12px;font:600 1.0625rem/1.4 var(--display);color:#fff}
.foot .nav{color:#fff}
.foot__small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:.875rem;color:#A9A2D6}
@media(min-width:820px){.foot__in{grid-template-columns:1fr auto;align-items:center}}

/* ---------- profile page ---------- */
.phero{background:linear-gradient(180deg,var(--cs) 0%,color-mix(in srgb,var(--cs) 30%,#fff) 70%,#fff 100%);padding-block:20px clamp(24px,4vw,48px);overflow:hidden}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.875rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:#A5A1BC}
.crumbs a{color:var(--ci);text-decoration:none;font-weight:600}
.crumbs a:hover{text-decoration:underline}
.phero__grid{display:grid;gap:24px 56px;align-items:center;margin-top:clamp(20px,4vw,40px)}
@media(min-width:900px){.phero__grid{grid-template-columns:1.05fr .95fr}}
.phero .eyebrow{color:var(--ci)}
.phero h1{font-size:clamp(4.2rem,2rem + 9vw,8.5rem);line-height:.92;letter-spacing:-.05em;color:var(--ci)}
.phero__lead{margin-top:20px;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);color:var(--muted);max-width:30em}
.phero .say{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.15rem);margin-top:28px}
.chips{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{background:#fff;border-radius:16px;padding:12px 18px;box-shadow:var(--shadow);font-weight:500}
.chips b{display:block;font:600 .6875rem/1.6 var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--ci)}
.chips i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c);margin-right:7px;vertical-align:-1px}
.stage{--bw:60cqw;--bh:64cqh;position:relative;isolation:isolate;width:100%;max-width:540px;aspect-ratio:1;margin-inline:auto;display:grid;place-items:center;padding-bottom:7%}
.stage::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:50%;
  background:radial-gradient(circle,#fff 0 36%,color-mix(in srgb,var(--c) 13%,#fff) 36.5% 54%,color-mix(in srgb,var(--c) 7%,#fff) 54.5% 70%,transparent 70.5%)}
/* little floating marks around the Radical: ticks, question marks, arrows, plus signs, notes */
.deco{position:absolute;width:clamp(26px,4vw,40px);color:var(--c);animation:float 5s ease-in-out infinite}
.deco path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.deco circle{fill:currentColor}
.c-vinesy .deco{color:#F2B100}

.split{display:grid;gap:36px 64px;align-items:start}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.prose p{color:var(--muted);font-size:1.125rem;margin-top:18px;max-width:34em}
.tcards{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tcards li{background:#fff;border-radius:var(--r-md);padding:22px 24px;box-shadow:var(--shadow);border-left:5px solid var(--c)}
.tcards h3{font-size:1.3rem;letter-spacing:-.015em;color:var(--ci)}
.tcards p{margin-top:4px;color:var(--muted)}

.bento{display:grid;gap:20px}
@media(min-width:900px){.bento{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto}.bento__move{grid-row:span 2}}
.bento article{border-radius:var(--r-lg);padding:clamp(26px,3vw,38px);background:#fff;box-shadow:var(--shadow)}
.bento .eyebrow{color:var(--ci);margin-bottom:10px}
.bento h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem)}
.bento p{margin-top:12px;color:var(--muted)}
.bento .bento__move{background:linear-gradient(150deg,var(--m1),var(--m2));color:#fff;display:flex;flex-direction:column}
.bento__move .eyebrow{color:#fff}
.bento__move p{color:#fff}
.subjects{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.subjects li{font:600 .8125rem/1 var(--display);padding:9px 13px;border-radius:999px;background:var(--cs);color:var(--ci)}

/* signature move, drawn as four steps; the last one is white */
.moves{list-style:none;margin:auto 0 0;padding:40px 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.moves li{display:grid;justify-items:center;gap:12px;font:600 .8125rem/1 var(--display);color:color-mix(in srgb,var(--c) 22%,#fff);letter-spacing:.08em}
.moves b{position:relative;isolation:isolate;display:grid;place-items:center;width:clamp(48px,7vw,84px);aspect-ratio:1;color:#fff;font:700 clamp(1.25rem,1rem + 1vw,1.75rem)/1 var(--display);letter-spacing:0}
.moves b::before{content:"";position:absolute;z-index:-1;inset:0;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);transform:rotate(var(--r,0deg))}
.moves li:last-child b{color:var(--ci)}
.moves li:last-child b::before{background:#fff}
/* Bix: tumbling squares that count */
.c-bix .moves b::before{border-radius:16px}
/* Oobo: a ring rolling forward (the ring's own rotation turns the bright patch), then a lens that zooms in on a hidden detail */
.c-oobo .moves b::before{border-radius:50%;box-shadow:none;background:conic-gradient(rgba(255,255,255,.7) 0 14%,rgba(255,255,255,.24) 0);
  -webkit-mask:radial-gradient(circle,transparent 0 38%,#000 39%);mask:radial-gradient(circle,transparent 0 38%,#000 39%)}
.c-oobo .moves li:last-child b::before{background:#fff;transform:scale(1.12)}
.c-oobo .moves li:last-child b::after{content:"";width:30%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 40%,transparent)}
/* Zeeto: a spinning cone that ends up pointing the way */
.c-zeeto .moves b::before{box-shadow:none;background:rgba(255,255,255,.26);clip-path:polygon(50% 6%,94% 94%,6% 94%)}
/* Towry: stretching taller, ring by ring */
.c-towry .moves b::before{left:27%;right:27%;top:auto;height:var(--h,40%);border-radius:10px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 10px,rgba(255,255,255,.5) 10px 12px)}
.c-towry .moves li:last-child b::before{background:repeating-linear-gradient(0deg,#fff 0 10px,color-mix(in srgb,var(--c) 30%,#fff) 10px 12px)}
/* Vinesy: a hop, then bongs with rings of sound */
.c-vinesy .moves b::before{inset:36% 12% 0;border-radius:50% 50% 14% 14%/90% 90% 14% 14%;transform:translateY(var(--y,0))}
.c-vinesy .moves li{gap:22px} /* room for the sound rings below the bell */
.c-vinesy .moves b::after{content:"";position:absolute;z-index:-2;left:-4%;right:-4%;bottom:-9%;height:30%;border-radius:50%;border:2px solid rgba(255,255,255,var(--o1,0));outline:2px solid rgba(255,255,255,var(--o2,0));outline-offset:5px}

.friends{list-style:none;margin:0;padding:0;display:grid;gap:18px}
@media(min-width:600px){.friends{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.friends{grid-template-columns:repeat(4,1fr)}}
.friends li{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
.friend__art{background:var(--cs);height:150px;display:grid;place-items:center;padding-bottom:10px;position:relative;isolation:isolate}
.friend__art .toy img{height:104px;width:auto}
.friend__body{padding:18px 20px 22px}
.friend__body h3{font-size:1.4rem}
.friend__body h3 span{display:block;font:600 .75rem/1.6 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ci);margin-bottom:2px}
.friend__body p{margin-top:8px;color:var(--muted);font-size:.975rem;line-height:1.55}

.pn{display:grid;gap:16px;align-items:stretch}
@media(min-width:860px){.pn{grid-template-columns:1fr auto 1fr}}
.pn__item{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;background:var(--cs);border-radius:var(--r-md);padding:18px 22px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.pn__item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pn__item .toy{width:min(72px,84px * var(--a))}
.pn__item .toy::after{display:none}
.pn__next{grid-template-columns:1fr auto;text-align:right}
.pn__next .toy{order:2}
.pn__dir{display:block;font:600 .75rem/1.6 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ci)}
.pn__name{display:block;font:700 1.5rem/1.15 var(--display);letter-spacing:-.02em}
.pn__role{display:block;font-size:.875rem;color:var(--muted);margin-top:2px}
.pn__all{align-self:center;justify-self:center;text-decoration:none;font:600 .9375rem/1 var(--display);color:var(--purple-ink);padding:16px 22px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);background:#fff;transition:box-shadow .2s}
.pn__all:hover{box-shadow:inset 0 0 0 1.5px var(--purple)}

/* ---------- motion ---------- */
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
@keyframes shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.78);opacity:.5}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--t,0deg))}50%{transform:translateY(-8px) rotate(var(--t,0deg))}}

@media(max-width:899px){
  .phero__grid .stage{order:-1;max-width:340px}
}
@media(max-width:699px){
  .root{left:-26%;top:10px}
  .sparks i:nth-child(3),.sparks i:nth-child(5),.sparks i:nth-child(7){display:none}
  .bar__in{justify-content:center}
  .nav{justify-content:center;font-size:.875rem}
  .foot .nav{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}