@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=Fraunces:ital,opsz,wght@1,9..144,600&family=Space+Mono:wght@400;700&display=swap');
:root{--bg:#fff3e0;--ink:#1d1033;--a:#ff3d7f;--b:#00c2b2;--c:#ffc62b;--d:#6c3cff;--e:#2f7bff;--card:#fff;--ease:cubic-bezier(.34,1.56,.64,1);--sm:cubic-bezier(.22,1,.36,1)}
body.e70{--bg:#f8e7c8;--a:#e2552a;--b:#b68a1f;--c:#f3a712;--d:#7a3b1a;--e:#4f7a28}
body.e00{--bg:#eef3ff;--a:#3a6bff;--b:#9fb4ff;--c:#7ad7ff;--d:#1c2a8a;--e:#c0c8d8}
body.e10{--bg:#f4ffe6;--a:#ff6b3d;--b:#8fdc2a;--c:#b8f04a;--d:#24603a;--e:#2fb3ff}
body.e20{--bg:#f6f0ff;--a:#a46bff;--b:#ff9ec7;--c:#c9a7ff;--d:#3d2a7a;--e:#5fd3b5}
body.e90{--bg:#e9fbff;--a:#ff2bd6;--b:#00e0b8;--c:#d4ff3a;--d:#3a1cff;--e:#00a6ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Bricolage Grotesque",system-ui,sans-serif;transition:background .6s var(--sm);overflow-x:hidden}
a{color:inherit}
.mono{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
em,.it{font-family:Fraunces,serif;font-style:italic;font-weight:600}
/* top */
.bar{background:var(--ink);color:#fff;text-align:center;padding:8px}
.bar b{background:var(--c);color:var(--ink);border-radius:20px;padding:2px 10px;margin-right:8px}
header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;padding:14px 40px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:2px solid var(--ink)}
.logo{font-weight:800;font-size:26px;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo i{display:inline-block;width:26px;height:26px;border-radius:7px;background:var(--a);box-shadow:3px 3px 0 var(--ink);position:relative}
.logo i:after{content:"";position:absolute;width:8px;height:6px;background:var(--a);border:2px solid var(--ink);top:-7px;left:7px;border-radius:2px 2px 0 0}
nav{display:flex;gap:22px}nav a{text-decoration:none;font-weight:700}nav a:hover{color:var(--a)}
.era{margin-left:auto;display:flex;align-items:center;gap:4px;background:var(--ink);padding:4px;border-radius:40px}
.era span{color:#fff;padding:0 10px}
.era button{all:unset;cursor:pointer;color:#fff;font:700 13px "Space Mono";padding:7px 14px;border-radius:30px;transition:.3s var(--sm)}
.era button[aria-pressed=true]{background:var(--c);color:var(--ink)}
/* buttons */
.pill{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:60px;padding:14px 24px;font:700 15px "Bricolage Grotesque";background:var(--c);color:var(--ink);text-decoration:none;box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pill:hover{box-shadow:7px 7px 0 var(--ink)}.pill.ghost{background:transparent;box-shadow:none}.pill:active{transform:translate(3px,3px)!important;box-shadow:1px 1px 0 var(--ink)}
/* hero */
.hero{position:relative;min-height:88vh;padding:80px 40px 40px;overflow:hidden}
.hero h1{font-size:clamp(64px,10.5vw,168px);line-height:.86;letter-spacing:-.045em;margin:24px 0 0;font-weight:800;position:relative;z-index:2}
.hero h1 em{color:var(--a);letter-spacing:-.02em}
.hero h1 .ln{display:block;overflow:hidden}.hero h1 .ln>span{display:inline-block;animation:rise 1s var(--sm) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.12s}.hero h1 .ln:nth-child(3)>span{animation-delay:.24s}
.hero .sub{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-top:40px;position:relative;z-index:2;border-top:2px solid var(--ink);padding-top:24px}
.hero .sub p{font-size:22px;max-width:520px;margin:0}
.float{position:absolute;z-index:1;will-change:transform}
.float svg{display:block;filter:drop-shadow(8px 10px 0 rgba(29,16,51,.9))}
.spin{animation:spin 18s linear infinite}.bob{animation:bob 4s ease-in-out infinite}
/* marquee */
.marquee{background:var(--a);color:#fff;border-block:2px solid var(--ink);overflow:hidden;white-space:nowrap;font:800 34px "Bricolage Grotesque";padding:14px 0;transform:rotate(-1.5deg);margin:20px -20px}
.marquee div{display:inline-block;animation:mq 26s linear infinite}.marquee span{margin:0 26px}.marquee span:nth-child(odd){font-family:Fraunces;font-style:italic;color:var(--c)}
/* sections */
section.s{padding:110px 40px}.eyebrow{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:40px}
h2.big{font-size:clamp(44px,6vw,92px);letter-spacing:-.04em;line-height:.92;margin:0 0 50px;font-weight:800}h2.big em{color:var(--d)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat{position:relative;border:2px solid var(--ink);border-radius:26px;padding:26px;min-height:260px;text-decoration:none;background:var(--card);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease);box-shadow:0 0 0 var(--ink)}
.cat:hover{transform:translate(-6px,-6px) rotate(-.6deg);box-shadow:10px 10px 0 var(--ink)}
.cat .n{position:absolute;top:22px;right:22px;border:2px solid var(--ink);border-radius:30px;padding:4px 10px}
.cat h3{font-size:34px;letter-spacing:-.03em;margin:0;position:absolute;bottom:24px;left:26px}
.cat .art{position:absolute;right:-10px;bottom:30px;transition:transform .6s var(--ease)}.cat:hover .art{transform:rotate(-10deg) scale(1.12)}
.cat.soon{background:transparent;border-style:dashed}
.dark{background:var(--ink);color:#fff;border-radius:40px;margin:0 20px}.dark h2.big em{color:var(--c)}.dark .eyebrow{border-color:#fff4}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
/* chest */
.chest{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;border:2px solid var(--ink);border-radius:30px;padding:40px;background:var(--b)}
.chest h3{font-size:46px;margin:0;letter-spacing:-.03em}#pick{font-size:22px;min-height:30px}
.shake{animation:shake .6s var(--sm)}
/* reveal */
.rv{opacity:0;transform:translateY(60px);transition:opacity .9s var(--sm),transform .9s var(--sm)}.rv.in{opacity:1;transform:none}
/* footer */
footer{margin-top:100px;background:var(--ink);color:#fff;padding:60px 40px 30px}
footer .huge{margin-bottom:30px;font-size:clamp(60px,12vw,190px);font-weight:800;letter-spacing:-.05em;line-height:.8}footer .huge em{color:var(--a)}
footer p{max-width:760px;opacity:.8;font-size:14px}
/* cursor */
.cur{position:fixed;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--a);mix-blend-mode:multiply;pointer-events:none;z-index:999;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s}
.cur.big{width:64px;height:64px;background:var(--c)}
@media (hover:none){.cur{display:none}}
/* category browser */
.phead{padding:70px 40px 30px}.phead h1{font-size:clamp(56px,9vw,140px);letter-spacing:-.05em;line-height:.85;margin:16px 0 0}.phead h1 em{color:var(--a)}
.tabs{display:flex;gap:10px;flex-wrap:wrap;padding:0 40px 20px}
.tabs button{all:unset;cursor:pointer;border:2px solid var(--ink);border-radius:40px;padding:10px 18px;font-weight:700}
.tabs button[aria-pressed=true]{background:var(--ink);color:#fff}
.browser{display:grid;grid-template-columns:260px 1fr;gap:30px;padding:10px 40px}
.facets{position:sticky;top:90px;align-self:start}
.facet{margin-bottom:22px}.facet .mono{display:block;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{all:unset;cursor:pointer;font-size:14px;font-weight:700;border:2px solid var(--ink);border-radius:30px;padding:5px 12px;background:var(--card);transition:transform .3s var(--ease),background .2s}
.chip:hover{transform:translateY(-2px)}.chip[aria-pressed=true]{background:var(--a);color:#fff}
.chip:focus-visible,.pill:focus-visible,.tabs button:focus-visible,.era button:focus-visible{outline:3px solid var(--e);outline-offset:3px}
.tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.tools select{font:700 14px "Bricolage Grotesque";border:2px solid var(--ink);border-radius:30px;padding:8px 14px;background:var(--card)}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.item{border:2px solid var(--ink);border-radius:22px;background:var(--card);overflow:hidden;text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease);animation:pop .5s var(--ease) both}
.item:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)}
.item .pic{height:140px;display:grid;place-items:center;border-bottom:2px solid var(--ink);position:relative}
.item .pic .badge{position:absolute;top:10px;left:10px;background:var(--ink);color:#fff;border-radius:20px;padding:3px 8px;font-size:10px}
.item .bd{padding:14px}.item h4{margin:0 0 6px;font-size:18px;letter-spacing:-.02em}.item .meta{font-size:12px;opacity:.75}
.item .pr{display:flex;justify-content:space-between;margin-top:10px;font-weight:800}
.exbadge{display:inline-block;background:var(--a);color:#fff;border-radius:8px;padding:4px 10px;font:700 11px "Space Mono";letter-spacing:.1em}
.empty{padding:40px;border:2px dashed var(--ink);border-radius:20px;text-align:center}
/* toy page */
.toy{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;padding:20px 40px}
.stage{position:relative;border:2px solid var(--ink);border-radius:32px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c) 70%,#fff),var(--c));overflow:hidden;padding:24px;box-shadow:10px 10px 0 var(--ink)}
.stage:before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 110%,#fff3 0 6deg,transparent 6deg 12deg);animation:spin 60s linear infinite}
.stage svg{position:relative;width:100%;height:auto;display:block}
.part{transform-box:fill-box;transform-origin:center;transition:transform .9s var(--ease),opacity .5s var(--sm)}
.mode{display:flex;justify-content:space-between;align-items:center;position:relative;margin-top:10px}
.switch{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px}
.track{width:84px;height:44px;border:2px solid var(--ink);border-radius:40px;background:var(--card);position:relative}
.track:after{content:"";position:absolute;top:4px;left:4px;width:32px;height:32px;border-radius:50%;background:var(--a);border:2px solid var(--ink);box-sizing:border-box;transition:transform .5s var(--ease)}
.switch[aria-pressed=true] .track{background:var(--b)}.switch[aria-pressed=true] .track:after{transform:translateX(40px);background:var(--d)}
.sndb{all:unset;cursor:pointer;border:2px solid var(--ink);border-radius:30px;padding:8px 14px;background:var(--card);font-weight:700}
#bot.truck .head{transform:translate(0,92px) scale(.6)}
#bot.truck .chest{transform:translate(0,78px) scale(1.7,.6)}
#bot.truck .armL{transform:translate(55px,40px) rotate(-35deg) scale(.4,.8);transition-delay:.08s}
#bot.truck .armR{transform:translate(-55px,40px) rotate(35deg) scale(.4,.8);transition-delay:.12s}
#bot.truck .legL{transform:translate(-50px,8px) rotate(90deg) scale(.5,.75);transition-delay:.04s}
#bot.truck .legR{transform:translate(50px,8px) rotate(90deg) scale(.5,.75);transition-delay:.1s}
#bot .wheel{transform:scale(0);opacity:0}
#bot.truck .wheel{transform:none;opacity:1;transition-delay:.35s}#bot.truck .wheel:nth-of-type(2){transition-delay:.45s}#bot.truck .wheel:nth-of-type(3){transition-delay:.55s}
#bot.truck .shadow{transform:scale(1.5,1)}
.jolt{animation:jolt .9s var(--ease)}
.facts{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);border-radius:20px;overflow:hidden;margin:20px 0}
.facts div{padding:14px;border-bottom:2px solid var(--ink)}.facts div:nth-child(odd){border-right:2px solid var(--ink)}
.facts div:nth-last-child(-n+2){border-bottom:0}.facts b{display:block;font-size:20px}
.gauge{border:2px solid var(--ink);border-radius:24px;padding:20px;background:var(--card)}
.needle{transform-origin:110px 110px;transform:rotate(-90deg);transition:transform 1.8s var(--ease)}.gauge.in .needle{transform:rotate(-15deg)}
table{width:100%;border-collapse:separate;border-spacing:0;border:2px solid var(--ink);border-radius:20px;overflow:hidden;background:var(--card)}
th,td{padding:14px 16px;text-align:left;border-bottom:2px solid #1d103322}th{background:var(--ink);color:#fff}
tr:hover td{background:color-mix(in srgb,var(--c) 30%,#fff)}
.trust{display:inline-block;height:10px;border-radius:8px;background:var(--b);vertical-align:middle;margin-right:8px;transform-origin:left;animation:grow 1.4s var(--sm) both}
@keyframes rise{from{transform:translateY(105%)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{50%{transform:translateY(-14px)}}
@keyframes mq{to{transform:translateX(-50%)}}@keyframes shake{20%,60%{transform:rotate(-2deg) scale(1.02)}40%,80%{transform:rotate(2deg)}}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(20px)}}@keyframes jolt{30%{transform:scaleY(.92) translateY(8px)}60%{transform:scaleY(1.04) translateY(-6px)}}
@keyframes grow{from{transform:scaleX(0)}}
@media (max-width:900px){.cats,.split,.toy,.browser,.chest{grid-template-columns:1fr}.facets{position:static}nav{display:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}.float{transform:none!important}.cur{display:none}}

.era button{padding:7px 9px}