/* Small, finite moments; the logo and navigation remain stationary. */
.character-stage.is-arriving .aron{animation:character-arrive 850ms cubic-bezier(.2,.75,.25,1) both}
.character-stage.is-arriving .vito{animation:character-arrive 850ms 150ms cubic-bezier(.2,.75,.25,1) both}
@keyframes character-arrive{0%{opacity:0;translate:0 40px;scale:.94}65%{opacity:1;translate:0 -8px;scale:1.02}100%{opacity:1;translate:0 0;scale:1}}
.palette-playground{margin-bottom:52px}
.playground-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.playground-heading h3{font:500 clamp(20px,2vw,28px)/1.3 Unbounded,sans-serif;letter-spacing:-.7px;margin-top:12px}
.playground-heading>p{font-size:13px;color:#59565f;max-width:220px}
.palette-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.palette-controls button{display:inline-flex;align-items:center;gap:9px;border:1px solid #cbc6d1;background:transparent;color:#434343;border-radius:30px;padding:10px 15px;font-size:12px;cursor:pointer}
.palette-controls button[aria-pressed="true"]{background:#0F0B0F;border-color:#0F0B0F;color:#F6F3F0}
.palette-controls i{display:block;width:16px;height:16px;background:var(--chip);border:1px solid #9b959f;border-radius:50%}
.palette-controls button[aria-pressed="true"] i{outline:1px solid #F6F3F0;outline-offset:2px}
.playground-art{--sample-bg:#0F0B0F;--sample-text:#F6F3F0;--sample-accent:#B9A1FF;min-height:365px;padding:34px;position:relative;isolation:isolate;overflow:hidden;background:var(--sample-bg);color:var(--sample-text);transition:background-color 240ms,color 240ms}
.playground-art[data-theme="light"]{--sample-bg:#E5E4E6;--sample-text:#434343;--sample-accent:#9B79FF}
.playground-art[data-theme="lilac"]{--sample-bg:#B9A1FF;--sample-text:#2A2A2A;--sample-accent:#F6F3F0}
.playground-art[data-theme="violet"]{--sample-bg:#6214FF;--sample-text:#FFFFFF;--sample-accent:#D4C4FF}
.playground-art h3{font:500 clamp(28px,3.3vw,49px)/1.2 Unbounded,sans-serif;letter-spacing:-1.6px;margin:48px 0 55px;position:relative;z-index:2;max-width:70%}
.playground-art>img{position:absolute;right:7%;bottom:62px;width:23%;height:185px;object-fit:contain;transform:rotate(8deg);z-index:1}
.playground-ring{position:absolute;right:3%;top:20%;width:30%;aspect-ratio:1;border:2px solid var(--sample-accent);border-radius:50%}
.playground-foot{font-size:11px;position:relative;z-index:2}.playground-accent{position:absolute;left:0;bottom:0;height:10px;width:100%;background:var(--sample-accent)}
.playground-values{font-size:11px;color:#59565f;margin-top:14px;line-height:1.7}
.weight-control{margin-top:24px;border-top:1px solid #c9c7cc;padding-top:20px}
.weight-control>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center}.weight-control label{margin:0;color:#434343}.weight-control output{font-size:11px;color:#434343;white-space:nowrap}
.type-specimen input[type="range"]{display:block;width:100%;height:24px;margin:16px 0 7px;padding:0;border:0;accent-color:#6214FF;cursor:pointer}
.weight-scale{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#59565f;font-size:10px}
.weight-scale button{background:transparent;border:0;text-decoration:underline;text-underline-offset:3px;font-size:11px;color:#434343;cursor:pointer;padding:6px}
.motion-showcase{margin-bottom:44px}.motion-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.motion-card{min-width:0}.motion-toggle{display:block;width:100%;padding:0;border:0;background:#0F0B0F;color:#F6F3F0;text-align:left;cursor:pointer}
.motion-frame{display:block;position:relative;overflow:hidden;aspect-ratio:1.65;background:#0F0B0F}
.team-frame{display:flex;align-items:center}.team-frame img{display:block;width:100%;height:100%;object-fit:contain}
.motion-control{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;font-size:10px;border-top:1px solid #49424d}.motion-action{font-size:12px}
.motion-card figcaption{margin-top:17px}.motion-card h4{font-size:17px;margin:0 0 7px}.motion-card figcaption p{font-size:12px;color:#59565f}
.character-motion-frame{background:#B9A1FF;color:#2A2A2A}.character-motion-frame>.eyebrow{position:absolute;top:20px;left:22px;font-size:8px}
.character-motion-frame>img{position:absolute;height:53%;width:36%;object-fit:contain;bottom:15%;z-index:1}.motion-aron{left:15%;transform:rotate(-7deg)}.motion-vito{right:15%;transform:rotate(8deg)}
.motion-ground{position:absolute;bottom:13%;left:14%;width:72%;height:1px;background:#2A2A2A;opacity:.3}
.is-playing .motion-aron{animation:character-hop 1100ms ease-in-out both}.is-playing .motion-vito{animation:character-hop 1100ms 180ms ease-in-out both}
@keyframes character-hop{0%,100%{translate:0 0;scale:1}20%{translate:0 4px;scale:1.04 .94}48%{translate:0 -24px;scale:.97 1.03}73%{translate:0 1px;scale:1.03 .97}}
@media(max-width:1000px){.playground-heading{display:block}.playground-heading>p{margin-top:12px;max-width:none}.playground-art{min-height:330px;padding:28px}.playground-art h3{font-size:32px}.motion-grid{grid-template-columns:1fr}.motion-frame{aspect-ratio:1.9}}
@media(max-width:650px){.palette-controls{display:grid;grid-template-columns:1fr 1fr}.palette-controls button{padding:10px;font-size:11px;gap:8px}.playground-art{min-height:370px;padding:24px}.playground-art h3{max-width:100%;font-size:29px;letter-spacing:-1px;margin:32px 0 150px}.playground-art>img{height:125px;width:33%;bottom:52px;right:12%}.playground-ring{width:40%;top:auto;bottom:45px;right:8%}.playground-foot{font-size:10px}.weight-control>div:first-child{flex-wrap:wrap;gap:6px}.motion-control{padding:13px 12px}.motion-control>span:last-child{font-size:9px}}
@media(prefers-reduced-motion:reduce){.character-stage.is-arriving img{animation:none!important}.playground-art{transition:none}.is-playing .motion-aron,.is-playing .motion-vito{animation:gentle-greeting 700ms ease-out!important}@keyframes gentle-greeting{0%,100%{opacity:1}50%{opacity:.65}}}

/* Keep the colour invitation together; let the heading group wrap instead. */
.palette-playground .playground-heading{flex-wrap:wrap}
.palette-playground .playground-heading>p{max-width:none;white-space:nowrap;flex-shrink:0}

.secondary-palette{margin-top:52px;padding-top:12px;border-top:1px solid #c9c7cc}
.secondary-palette .palette-heading{margin-top:26px}
.secondary-palette .palette-heading h3{margin-top:12px}
.secondary-palette .palette-heading p{max-width:70ch}
.secondary-family{margin-top:28px}
.secondary-family h4{font-size:14px;font-weight:600;margin:0 0 12px}
.secondary-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.secondary-swatch{border:0;background:transparent;text-align:left;padding:0;color:#434343;cursor:pointer;min-width:0}
.secondary-swatch i{display:block;width:100%;height:100px;transition:transform 180ms ease}
.secondary-swatch span{display:block;margin-top:10px;font-size:12px;line-height:1.4}
.secondary-swatch small{display:flex;justify-content:space-between;margin-top:5px;font-size:10px}
.secondary-swatch b{font-weight:400}
@media(hover:hover){.secondary-swatch:hover i{transform:translateY(-4px)}}
@media(max-width:1100px){.secondary-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.secondary-swatches{gap:16px 10px}.secondary-swatch i{height:86px}.secondary-swatch span{font-size:11px}}