:root{--ink:#2a1446;--ink2:#5b4677;--paper:#faf6ff;--lilac:#efe6ff;--violet:#6a2cd8;--violet2:#8f5cf0;--peach:#ffb48a;--mint:#bff0dc;--line:#dccbf7;
--round:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Arial Rounded MT Bold",system-ui,sans-serif;--body:"Segoe UI",system-ui,-apple-system,"Noto Sans",sans-serif;--mono:ui-monospace,"Cascadia Code",Menlo,Consolas,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.7 var(--body)}
a{color:var(--violet)}h1,h2,h3,h4{font-family:var(--round);line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,7vw,5.6rem);font-weight:800}h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:800}h3{font-size:1.35rem}
.wrap{width:min(1180px,92vw);margin:auto}.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:99}
/* nav: a floating rounded rail */
.rail{position:sticky;top:14px;z-index:50;margin:14px auto 0;width:min(1180px,94vw);display:flex;align-items:center;gap:1rem;background:rgba(250,246,255,.92);backdrop-filter:blur(8px);border:2px solid var(--ink);border-radius:999px;padding:.45rem .5rem .45rem 1.2rem}
.mark{font-family:var(--round);font-weight:900;font-size:1.35rem;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.mark i{width:30px;height:30px;border-radius:50% 50% 50% 8px;background:conic-gradient(var(--violet),var(--peach),var(--violet2),var(--violet));display:inline-block}
.links{display:flex;gap:.2rem;margin-left:auto;list-style:none;padding:0;margin-block:0;align-items:center}
.links a,.links button{font:600 .95rem var(--round);color:var(--ink);text-decoration:none;padding:.5rem .85rem;border-radius:999px;border:0;background:none;cursor:pointer}
.links a:hover,.links button:hover,.links a[aria-current]{background:var(--lilac)}
.cta{background:var(--violet)!important;color:#fff!important}
.dd{position:relative}.dd ul{display:none;position:absolute;top:120%;left:0;min-width:260px;list-style:none;margin:0;padding:.6rem;background:#fff;border:2px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--violet)}
.dd.open ul{display:block}.dd ul a{display:block;border-radius:14px}.dd small{display:block;color:var(--ink2);font-weight:400}
.burger{display:none;margin-left:auto}
@media(max-width:900px){.burger{display:block;font:700 1rem var(--round);background:var(--ink);color:#fff;border:0;border-radius:999px;padding:.5rem 1rem}
.links{display:none;position:absolute;top:110%;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border:2px solid var(--ink);border-radius:26px;padding:.8rem}
.rail.open .links{display:flex}.dd ul{position:static;box-shadow:none;border:0}}
/* hero: orbit composition */
.hero{padding:5rem 0 4rem;display:grid;grid-template-columns:1.25fr .9fr;gap:3rem;align-items:center}
.eyebrow{font:700 .8rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.lede{font-size:1.25rem;color:var(--ink2);max-width:40ch}
.hero h1 em{font-style:normal;color:var(--violet);background:linear-gradient(transparent 62%,var(--peach) 62%)}
.orbit{aspect-ratio:1;position:relative;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--violet2),var(--violet) 55%,var(--ink));}
.orbit span{position:absolute;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:.4rem 1rem;font:700 .95rem var(--round);animation:float 6s ease-in-out infinite}
.orbit span:nth-child(1){top:8%;left:-6%}.orbit span:nth-child(2){top:40%;right:-8%;animation-delay:-2s;background:var(--mint)}.orbit span:nth-child(3){bottom:12%;left:4%;animation-delay:-4s;background:var(--peach)}.orbit span:nth-child(4){bottom:-2%;right:18%;animation-delay:-1s}
.orbit b{position:absolute;inset:28%;border-radius:50%;border:3px dashed rgba(255,255,255,.55)}
@keyframes float{50%{transform:translateY(-12px)}}
.btn{display:inline-block;font:700 1rem var(--round);padding:.85rem 1.5rem;border-radius:999px;border:2px solid var(--ink);text-decoration:none;color:var(--ink);background:#fff;cursor:pointer;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}.btn.p{background:var(--violet);color:#fff;border-color:var(--violet)}
.row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}
section{padding:4rem 0}.band{background:var(--ink);color:#f3ecff;border-radius:48px;padding:4rem 3rem;margin:2rem auto}
.band a{color:var(--peach)}.band .eyebrow{color:var(--peach)}
/* stripe list instead of cards */
.stripe{border-top:2px solid var(--ink)}.stripe>div{display:grid;grid-template-columns:90px 1fr 1.4fr;gap:2rem;padding:2rem 0;border-bottom:2px solid var(--line)}
.stripe .n{font:900 2.4rem var(--round);color:var(--violet2)}
.split{display:grid;grid-template-columns:1fr 1.3fr;gap:3rem}.sticky{position:sticky;top:110px;align-self:start}
.pagehead{padding:4.5rem 0 2.5rem;border-bottom:2px solid var(--ink)}.pagehead p{max-width:60ch;font-size:1.2rem;color:var(--ink2)}
.blob{display:inline-block;width:.8em;height:.8em;border-radius:50% 50% 50% 4px;background:var(--peach);margin-right:.3em}
.tabs [role=tablist]{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.tabs [role=tab]{font:700 1rem var(--round);padding:.7rem 1.2rem;border-radius:999px;border:2px solid var(--ink);background:#fff;cursor:pointer;color:var(--ink)}
.tabs [role=tab][aria-selected=true]{background:var(--violet);color:#fff;border-color:var(--violet)}
.panel{background:#fff;border:2px solid var(--ink);border-radius:36px;padding:2.5rem}.panel ul{padding-left:1.2rem}
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
details{border-bottom:2px solid var(--line);padding:1rem 0}summary{font:700 1.15rem var(--round);cursor:pointer;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";color:var(--violet);font-size:1.5rem}details[open] summary::after{content:"–"}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0}.filters button{font:600 .95rem var(--round);border:2px solid var(--ink);background:#fff;border-radius:999px;padding:.45rem 1rem;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff}
.res{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}.res article{background:#fff;border-radius:28px;padding:1.8rem;border:2px solid var(--line)}.res article:nth-child(3n+1){border-radius:28px 28px 28px 6px}
.tag{font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.1em;background:var(--lilac);padding:.2rem .6rem;border-radius:999px}
.facts{list-style:none;padding:0}.facts li{padding:.7rem 0;border-bottom:1px dashed var(--line)}
form{display:grid;gap:1rem}label{font:700 .95rem var(--round)}input,textarea,select{width:100%;font:inherit;padding:.8rem 1rem;border:2px solid var(--ink);border-radius:18px;background:#fff;color:var(--ink)}
textarea{min-height:150px}.chk{display:flex;flex-wrap:wrap;gap:.5rem}.chk label{font-weight:600;border:2px solid var(--line);border-radius:999px;padding:.4rem .9rem;display:flex;gap:.4rem;align-items:center;background:#fff}
.chk input{width:auto}.hp{position:absolute;left:-9999px}.status{font-weight:600;padding:.8rem 1rem;border-radius:16px;display:none}.status.ok{display:block;background:var(--mint)}.status.err{display:block;background:#ffe0d2}
.err-t{color:#a3271c;font-size:.9rem}
.mapbox{border:2px dashed var(--violet2);border-radius:30px;padding:2rem;background:repeating-linear-gradient(45deg,var(--lilac) 0 12px,#f6f0ff 12px 24px)}
footer{margin-top:4rem;background:var(--lilac);border-radius:48px 48px 0 0;padding:3rem 0 2rem}footer .cols{grid-template-columns:2fr 1fr 1fr}footer ul{list-style:none;padding:0}footer a{color:var(--ink)}
.linkbtn{background:none;border:0;color:var(--violet);text-decoration:underline;font:inherit;cursor:pointer;padding:0}
#cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:560px;background:#fff;border:2px solid var(--ink);border-radius:28px;padding:1.4rem;box-shadow:8px 8px 0 var(--violet);z-index:100;display:none}
#cookie.show{display:block}#cookie .row{margin-top:1rem}#cookie .btn{flex:1;text-align:center}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
@media(max-width:800px){.hero,.split,.cols,.res,footer .cols{grid-template-columns:1fr}.stripe>div{grid-template-columns:1fr;gap:.5rem}.band{padding:2.5rem 1.5rem;border-radius:32px}.sticky{position:static}.orbit{max-width:340px;margin:auto}}
/* === playground revision: bottom dock, giant rounded type, offset rounded sections === */
body{padding-bottom:120px;overflow-x:hidden}main,footer,.wrap>*{min-width:0}a,p,li{overflow-wrap:anywhere}
.rail{position:fixed;top:auto;bottom:14px;left:50%;transform:translateX(-50%);margin:0;width:min(1100px,calc(100vw - 20px));box-shadow:0 6px 0 var(--peach);background:rgba(255,252,255,.96)}
.rail nav{min-width:0;margin-left:auto}.dd ul{top:auto;bottom:130%}
.giant{font-size:clamp(2.8rem,10vw,8.5rem);font-weight:900;letter-spacing:-.045em;line-height:.92}.giant.small{font-size:clamp(2rem,6vw,4.5rem)}
.play-hero{padding:4rem 0 3rem;position:relative}.play-hero .lede{font-size:1.35rem}
.toys{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}.toys span{font:800 clamp(1rem,2.4vw,1.5rem) var(--round);padding:.9rem 1.6rem;border-radius:999px;background:var(--violet);color:#fff;transform:rotate(-3deg);animation:float 6s ease-in-out infinite}
.toys span:nth-child(2){background:var(--peach);color:var(--ink);transform:rotate(4deg);animation-delay:-2s}.toys span:nth-child(3){background:var(--mint);color:var(--ink);animation-delay:-4s}.toys span:nth-child(4){background:var(--ink);transform:rotate(2deg)}
@keyframes float{50%{translate:0 -10px}}
.bubbles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}.bubbles>div{background:#fff;border:2px solid var(--ink);border-radius:44px;padding:2rem;box-shadow:10px 10px 0 var(--peach)}
.bubbles>div:nth-child(even){transform:translateY(2.2rem);box-shadow:10px 10px 0 var(--violet2)}.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));padding-bottom:2.5rem}
.slab{margin:2.5rem 0 1rem;background:var(--violet);color:#fff;border-radius:56px 56px 56px 12px;padding:3rem clamp(1.4rem,4vw,3.5rem);box-shadow:14px 14px 0 var(--peach)}.slab .eyebrow{color:var(--peach)}.slab p{color:#efe6ff;font-size:1.2rem;max-width:60ch}
.band{box-shadow:-14px 14px 0 var(--peach);margin-left:clamp(0px,3vw,40px)}
.panel{box-shadow:12px 12px 0 var(--lilac)}
footer{background:none;padding:0}.foot{background:var(--lilac);border-radius:56px 12px 56px 56px;padding:3rem clamp(1.4rem,4vw,3rem);box-shadow:12px 12px 0 var(--violet)}
#cookie{bottom:96px;max-height:calc(100dvh - 120px);overflow:auto}
@media(max-width:900px){.links{top:auto;bottom:115%}.rail{padding:.4rem .4rem .4rem 1rem}}
@media(max-width:800px){.bubbles{grid-template-columns:1fr}.bubbles>div:nth-child(even){transform:none}.slab,.band,.foot{box-shadow:6px 6px 0 var(--peach);margin-left:0}.split{gap:1.5rem}#cookie{left:10px;right:10px}.tabs [role=tab]{padding:.6rem .9rem}}
.toybox{display:grid;gap:3rem;padding:3rem 0}.toy{background:#fff;border:2px solid var(--ink);border-radius:60px 60px 60px 14px;padding:clamp(1.5rem,4vw,3rem);box-shadow:14px 14px 0 var(--peach);width:min(860px,100%);scroll-margin-top:30px}
.toy:nth-child(even){justify-self:end;border-radius:60px 60px 14px 60px;box-shadow:-14px 14px 0 var(--violet2)}.toy .hook{font:800 1.4rem var(--round);color:var(--violet)}
.stack{display:grid;gap:2.5rem;max-width:900px}.formbubble{background:#fff;border:2px solid var(--ink);border-radius:48px;padding:clamp(1.3rem,4vw,3rem);box-shadow:12px 12px 0 var(--violet)}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.8rem}.chips li{background:var(--lilac);color:var(--ink);border-radius:28px;padding:.9rem 1.3rem;min-width:0;max-width:100%}.band .chips li{background:#3b2160;color:#f3ecff}
.tilt li:nth-child(odd){transform:rotate(-1.5deg);background:var(--peach)}.tilt li:nth-child(even){transform:rotate(1.5deg)}
.ask button{font-size:1.1rem;padding:.7rem 1.3rem}
.chat{grid-template-columns:1fr;max-width:820px}.chat article{border-radius:36px 36px 36px 8px!important;width:88%}.chat article:nth-child(even){justify-self:end;border-radius:36px 36px 8px 36px!important;background:var(--lilac)}
@media(max-width:800px){.toy,.toy:nth-child(even){box-shadow:6px 6px 0 var(--peach)}.chat article{width:100%}.tilt li{transform:none!important}}