/* Website styles. Keep the original rule order for the artwork and motion. */

body{margin:0}
a{text-decoration:none;color:inherit}
.gt{background:linear-gradient(100deg,#a78bfa,#f472b6 65%,#fb9bc8);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;font:800 16px Manrope,sans-serif;color:#fff;background:linear-gradient(100deg,#7c3aed,#db2777);box-shadow:0 10px 40px rgba(219,39,119,.45);transition:transform .2s}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.ghost{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.card{position:relative;border-radius:28px;padding:32px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);overflow:hidden;transition:transform .25s}
.card:hover{transform:translateY(-6px) rotate(-.4deg)}
.ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 8px 24px rgba(168,85,247,.5)}
.ic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.logo{border-radius:50%;border:2px dashed rgba(255,255,255,.55);display:grid;place-items:center;font:800 10px Manrope,sans-serif;letter-spacing:.14em;color:#f9a8d4;background:rgba(255,255,255,.06)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)} }
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-14px) rotate(var(--r))} }
@keyframes pulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.06)} }
.tick{display:flex;width:max-content;animation:slide 28s linear infinite}
.float{animation:bob 6s ease-in-out infinite}
.moon{animation:pulse 7s ease-in-out infinite}
@media(max-width:860px){ .bento>*{grid-column:span 6} .hero h1{font-size:64px !important} }
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)} }
@keyframes spinr{from{transform:rotate(360deg)}to{transform:rotate(0deg)} }
@keyframes shim{to{background-position:600px 0} }
@keyframes slidebg{to{background-position:800px 0} }
@keyframes tw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)} }
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-34px)} }
@keyframes rise{from{opacity:0;transform:translateY(120px) scale(.9)}to{opacity:1;transform:none} }
.shim{background:linear-gradient(100deg,#a78bfa,#f472b6,#ffffff,#f472b6,#a78bfa);background-size:600px 100%;background-repeat:repeat-x;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 5s linear infinite}
.glowpill{background:linear-gradient(100deg,#7c3aed,#db2777,#7c3aed);background-size:800px 100%;animation:slidebg 6s linear infinite;box-shadow:0 0 60px rgba(219,39,119,.45)}
.tw{animation:tw 2.8s ease-in-out infinite}
.stg{position:relative;height:760px}
.orbit{position:absolute;left:50%;top:50%;width:0;height:0;animation:spin 90s linear infinite}
.slot{position:absolute;left:0;top:0;transform:rotate(var(--a)) translateY(-300px)}
.slot:hover,.slot:focus-within{z-index:10}
.comp{position:absolute;left:0;top:0;transform:rotate(calc(-1 * var(--a)))}
.upright{position:absolute;left:0;top:0;width:230px;margin:-140px 0 0 -115px;animation:spinr 90s linear infinite}
.stg:has(.pol:hover) .orbit,.stg:has(.pol:hover) .upright,.stg:focus-within .orbit,.stg:focus-within .upright{animation-play-state:paused}
.stg .cap{font-size:23px;line-height:1.1}
@media(max-width:900px){ .stg{transform:scale(.62);transform-origin:50% 0;height:470px} }
@media(max-width:560px){ .stg{transform:scale(.42);height:320px} }
.rise{position:relative;flex:0 0 300px;margin:0 -26px}
.rise:hover,.rise:focus-within{z-index:10}
.pol{position:relative;padding:14px 14px 22px;background:#fffaf5;border-radius:4px;transform:rotate(var(--r));box-shadow:0 30px 60px rgba(0,0,0,.55);transition:transform .55s cubic-bezier(.2,.9,.25,1.25),filter .4s,box-shadow .4s;cursor:pointer;outline:none}
.stg:has(.pol:hover) .pol,.stg:focus-within .pol{filter:brightness(.5) saturate(.7)}
.stg .pol:hover,.stg .pol:focus{filter:none;transform:rotate(0deg) scale(1.6);box-shadow:0 50px 100px rgba(0,0,0,.7),0 0 90px rgba(244,114,182,.55)}
.ph{aspect-ratio:1/1;display:grid;place-items:center;background:#efe3fb;color:#6d28d9;font:800 13px Manrope,sans-serif;letter-spacing:.12em;border:2px dashed #a78bfa}
.cap{margin-top:14px;font:600 28px Caveat,cursive;color:#3b1d5a}
@supports (animation-timeline:view()){ .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%} }
@keyframes ma{0%,3%{opacity:0;transform:translateY(12px)}7%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none} }
@keyframes mb{0%,27%{opacity:0;transform:translateY(12px)}31%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none} }
@keyframes mc{0%,50%{opacity:0;transform:translateY(12px)}54%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none} }
@keyframes md{0%,71%{opacity:0;transform:translateY(12px)}75%,94%{opacity:1;transform:none}99%,100%{opacity:0;transform:none} }
@keyframes ta{0%,10%{opacity:0}12%,25%{opacity:1}27%,100%{opacity:0} }
@keyframes tb{0%,56%{opacity:0}58%,69%{opacity:1}71%,100%{opacity:0} }
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1} }
.msg{display:flex;gap:10px;align-items:flex-start;opacity:0;animation-duration:18s;animation-iteration-count:infinite;animation-timing-function:ease}
.msg .nm{font-weight:800;font-size:14px}
.msg .tx{margin-top:2px;font-size:15px;line-height:1.45;color:#e5d6f7}
.av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font:800 14px Manrope,sans-serif;color:#fff}
.dots{display:flex;gap:5px;padding:10px 0}
.dots i{width:7px;height:7px;border-radius:50%;background:#f9a8d4;animation:dot 1.2s ease-in-out infinite}
html{scroll-padding-top:130px;scroll-behavior:smooth}
.hd{position:sticky;top:0;z-index:100;background:rgba(11,6,20,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:2px solid rgba(249,168,212,.6);box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 40px rgba(219,39,119,.25)}
.hr{max-width:1200px;margin:0 auto;padding:12px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.sgb{border-top:1px solid rgba(255,255,255,.14)}
.fl{height:2px;background:linear-gradient(90deg,transparent,#f472b6,#a78bfa,transparent);background-size:800px 100%;background-repeat:repeat-x;animation:slidebg 5s linear infinite}
.fl.r{animation-direction:reverse}
.sgm{overflow:hidden;padding:7px 0}
.sgt{animation-duration:45s}
.sgi{width:18px;height:18px;margin:0 28px;flex:none;fill:none;stroke:#f9a8d4;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nl{font-weight:600;color:#d9c8f2}
.nl:hover{color:#fff}
.cmd{width:150px;max-height:52px;overflow:hidden;border-radius:18px;background:linear-gradient(100deg,#7c3aed,#db2777);box-shadow:0 20px 50px rgba(219,39,119,.5);transition:width .4s ease,max-height .45s ease;cursor:pointer;outline:none}
.ch{padding:14px 22px;font:800 18px/24px Manrope,sans-serif;color:#fff;white-space:nowrap}
.cb{padding:0 22px 20px;font-size:14px;line-height:1.5;color:#fff0fa;opacity:0;transition:opacity .3s}
.cmd:hover,.cmd:focus{width:310px;max-height:280px}
.cmd:hover .cb,.cmd:focus .cb{opacity:1}
.cmd .bn{background:rgba(11,6,20,.55)}
.fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;align-items:start}
.fc{border-radius:26px;padding:16px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .25s,box-shadow .25s}
.fc:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(249,168,212,.5),0 20px 50px rgba(168,85,247,.25)}
.fc summary{list-style:none;cursor:pointer}
.fc summary::-webkit-details-marker{display:none}
.fh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 6px 0}
.fh h3{margin:0;font:600 24px Fraunces,serif}
.fc p{margin:8px 6px 0;line-height:1.55;color:#d3c0ee}
.more{display:block;margin:12px 6px 4px;font:800 12px Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f9a8d4}
.more::after{content:"Expand +"}
.fc[open] .more::after{content:"Collapse \2212"}
.fx{margin:10px 6px 6px;color:#d3c0ee;line-height:1.6;font-size:15px}
.fx a{display:inline-block;margin-top:10px;font-weight:800;color:#f9a8d4}
.cm{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pv{height:150px;border-radius:18px;padding:14px;overflow:hidden;background-color:#120a20;background-image:radial-gradient(220px 120px at 85% 0,rgba(219,39,119,.3),transparent 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pm{display:flex;gap:10px}
.pa{flex:none;width:34px;height:34px;border-radius:50%;background:#1a0f2e url(./media/7375b16d68d0ee077db35880a000d34a.png) center/72% no-repeat;box-shadow:inset 0 0 0 1.5px rgba(196,160,255,.55)}
.pt{font-size:14px;line-height:1.4;color:#e5d6f7}
.pt b{color:#fff}
.bt{font-size:9px;padding:2px 5px;border-radius:4px;background:#7c3aed;color:#fff;font-weight:800;vertical-align:middle}
.pb{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.bn{font-style:normal;font-weight:800;font-size:12px;padding:5px 11px;border-radius:7px;background:#7c3aed;color:#fff}
.bn.g{background:rgba(255,255,255,.14)}
.rc{font-style:normal;font-weight:800;font-size:12px;padding:4px 9px;border-radius:9px;background:rgba(168,85,247,.25);box-shadow:inset 0 0 0 1px rgba(196,160,255,.5);color:#f3e8ff}
.bd{font:800 10px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:rgba(244,114,182,.16);box-shadow:inset 0 0 0 1px rgba(249,168,212,.5);color:#f9a8d4;white-space:nowrap}
code{background:rgba(255,255,255,.1);padding:2px 7px;border-radius:6px;color:#f9d0e6;font:600 .88em ui-monospace,Menlo,monospace}
.dw{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.dn{position:sticky;top:130px;flex:0 0 230px;max-height:calc(100vh - 160px);overflow:auto;padding:18px;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:14px}
.dn b{display:block;margin:14px 0 6px;font:800 11px Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#f9a8d4}
.dn b:first-child{margin-top:0}
.dn a{display:block;padding:4px 0;color:#d9c8f2;font-weight:600}
.dn a:hover{color:#fff}
.dc{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;gap:18px}
.dd{padding:28px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#d9c8f2;line-height:1.65}
.dd h3{margin:0 0 8px;font:600 32px Fraunces,serif;color:#fff}
.dd h4{margin:20px 0 6px;font:800 12px Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f9a8d4}
.dd p{margin:8px 0}
.dd ol,.dd ul{margin:6px 0;padding-left:22px}
.dd li{margin:6px 0}
.dd b{color:#fff}
.dd a{color:#f9a8d4;font-weight:700}
@media(max-width:860px){ .dn{position:static;flex:1 1 100%;max-height:none} }
.hr{padding:20px 32px}
.nv{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nl{position:relative;padding:9px 18px;border-radius:999px;font-weight:700;color:#e5d6f7;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .25s,box-shadow .25s,color .25s}
.nl:hover,.nl.on{color:#fff;background:rgba(168,85,247,.25);box-shadow:inset 0 0 0 1px rgba(249,168,212,.7),0 0 20px rgba(244,114,182,.35)}
.nl::after{content:"\2726";position:absolute;right:-3px;top:-9px;font-size:11px;color:#f9a8d4;opacity:0;transform:scale(.3) rotate(-30deg);transition:opacity .25s,transform .35s}
.nl:hover::after,.nl.on::after{opacity:1;transform:none}
.st{width:12px;height:12px;flex:none;fill:#f9a8d4;filter:drop-shadow(0 0 5px #f472b6)}
.nb{padding:10px 20px;font-size:15px}
.crow{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.cbox{flex:1 1 300px;min-width:0;padding:18px 18px 20px;border-radius:24px;background:rgba(18,10,32,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 30px 70px rgba(0,0,0,.55),0 0 60px rgba(168,85,247,.35)}
.ccol{flex:0 0 144px;display:flex;flex-direction:column;justify-content:space-between}
.cw{position:relative;height:46px}
.c2{position:absolute;right:0;width:144px;max-height:46px;overflow:hidden;border-radius:16px;background:linear-gradient(100deg,#7c3aed,#db2777);box-shadow:0 10px 30px rgba(219,39,119,.4);transition:width .4s ease,max-height .45s ease;cursor:pointer;outline:none;z-index:1}
.c2.t{top:0}
.c2.b{bottom:0}
.c2 .ch{padding:11px 14px;font:800 15px/24px Manrope,sans-serif;white-space:nowrap}
.c2 .cb{padding:0 16px 14px}
.c2:hover,.c2:focus{width:300px;max-height:150px;z-index:10}
.c2:hover .cb,.c2:focus .cb{opacity:1}
.mn{background:rgba(88,101,242,.3);color:#d6d9ff;border-radius:4px;padding:0 3px;font-weight:700}
.rxw{min-height:30px;margin-top:6px}
.rx{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:9px;background:rgba(88,101,242,.28);box-shadow:inset 0 0 0 1px rgba(150,160,255,.7);font:800 13px Manrope,sans-serif;color:#e0e3ff;opacity:0;transform:scale(0);transform-origin:left center;animation-duration:18s;animation-iteration-count:infinite;animation-timing-function:ease}
.rxe{display:inline-block;font-size:16px;animation:eb 1.3s ease-in-out infinite}
@keyframes ra{0%,8%{opacity:0;transform:scale(0)}10%{opacity:1;transform:scale(1.45)}12%{transform:scale(.85)}13.5%{transform:scale(1.12)}15%,94%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(0)} }
@keyframes rb{0%,56%{opacity:0;transform:scale(0)}58%{opacity:1;transform:scale(1.45)}60%{transform:scale(.85)}61.5%{transform:scale(1.12)}63%,94%{opacity:1;transform:scale(1)}99%,100%{opacity:0;transform:scale(0)} }
@keyframes eb{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-5px) rotate(-10deg)}55%{transform:translateY(0) rotate(6deg)}70%{transform:translateY(-2px) rotate(0deg)} }
.fg{align-items:stretch}
.fc{position:relative;display:flex;flex-direction:column}
.fc[open]{z-index:30;box-shadow:inset 0 0 0 1px rgba(249,168,212,.6),0 20px 60px rgba(168,85,247,.35)}
.fc summary{flex:1}
.fh{min-height:64px;align-content:flex-start}
.fh h3{line-height:1.2}
.fc p{min-height:74px}
.fx{position:absolute;left:-1px;right:-1px;top:calc(100% - 10px);margin:0;padding:18px 22px 22px;border-radius:0 0 26px 26px;background:#17102a;box-shadow:inset 0 0 0 1px rgba(249,168,212,.6),0 30px 60px rgba(0,0,0,.6)}
.nv{gap:16px}
.nl{background:none;box-shadow:none;padding:8px 4px;display:inline-flex;align-items:center;gap:7px}
.nl:hover,.nl.on{background:none;box-shadow:none;color:#fff;text-shadow:0 0 14px rgba(244,114,182,.95)}
.nl.on{color:#f9a8d4}
.hi{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cbox{padding:14px 14px 16px;border-radius:20px}
.av{width:30px;height:30px;font-size:12px}
.msg .nm{font-size:13px}
.msg .tx{font-size:13.5px;line-height:1.4}
.rxw{min-height:24px;margin-top:3px}
.rx{padding:2px 8px;font-size:12px}
.rxe{font-size:14px}
.ccol{flex:0 0 124px}
.cw{height:34px}
.c2{width:124px;max-height:34px;border-radius:12px;background:rgba(18,10,32,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 30px rgba(168,85,247,.25)}
.c2 .ch{padding:7px 12px;font:800 13px/20px Manrope,sans-serif}
.c2 .cb{color:#e5d6f7;font-size:13px;padding:0 14px 12px}
.c2 .cb b{color:#fff}
.c2:hover,.c2:focus{width:270px;max-height:130px;box-shadow:inset 0 0 0 1px rgba(249,168,212,.6),0 0 30px rgba(244,114,182,.35)}
.fg{align-items:start}
.fc{display:block}
.fc[open]{z-index:auto}
.fc summary{flex:none}
.fx{position:static;top:auto;left:auto;right:auto;margin:12px 6px 6px;padding:14px 0 4px;border-radius:0;background:none;box-shadow:none;border-top:1px solid rgba(255,255,255,.14);overflow:hidden}
.fc[open] .fx{animation:fxo .45s ease}
@keyframes fxo{from{opacity:0;max-height:0;padding-top:0;margin-top:0}to{opacity:1;max-height:520px} }
.skip{position:absolute;left:12px;top:-90px;z-index:300;padding:10px 18px;border-radius:10px;background:#fff;color:#4c1d95;font-weight:800}
.skip:focus{top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid #f9a8d4;outline-offset:3px}
.fc summary:focus-visible{outline-offset:6px;border-radius:20px}
.mm{display:none}
.mm summary{list-style:none;cursor:pointer}
.mm summary::-webkit-details-marker{display:none}
.mb{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;min-height:44px;box-sizing:border-box;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);font-weight:800;color:#fff}
.mp{position:absolute;left:0;right:0;top:100%;padding:16px 24px 24px;background:rgba(11,6,20,.98);border-bottom:2px solid rgba(249,168,212,.6);display:flex;flex-direction:column;gap:4px}
.mp .nl{padding:12px 4px;min-height:44px;box-sizing:border-box;font-size:18px}
.mp .btn{justify-content:center;margin-top:8px}
.fg{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.sb{display:flex;align-items:center;gap:10px;max-width:640px;margin:0 0 10px;padding:6px 8px 6px 18px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.sb:focus-within{box-shadow:inset 0 0 0 2px #f9a8d4,0 0 30px rgba(244,114,182,.3)}
.sb input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:600 17px Manrope,sans-serif;padding:12px 4px}
.sb input::placeholder{color:#bfaedb}
.sx{border:0;border-radius:999px;padding:10px 16px;min-height:40px;background:rgba(255,255,255,.12);color:#fff;font:800 13px Manrope,sans-serif;cursor:pointer}
.sc{margin:0 0 30px;color:#bfaedb;font-weight:600;font-size:14px}
@media(max-width:860px){ .nv{display:none} .mm{display:block} .hr{padding:12px 18px;flex-wrap:nowrap} }
@media(max-width:560px){
.hero h1{font-size:44px !important}
h2:not(.ph2){font-size:clamp(34px,10vw,48px) !important}
#features,#commands,#previews,#invite,#docs{padding-left:16px !important;padding-right:16px !important}
.dd{padding:20px}
.crow{flex-direction:column}
.cbox{flex:none;width:100%;box-sizing:border-box}
.ccol{flex:none;flex-direction:row;flex-wrap:wrap;gap:8px}
.cw{flex:1 1 110px}
.c2{left:0;right:auto;width:100%}
.c2:hover,.c2:focus{width:calc(200% + 8px);max-width:calc(100vw - 60px)}
.btn{padding:14px 22px}
}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
@keyframes sm{from{opacity:0;translate:0 48px;scale:.97}to{opacity:1;translate:0 0;scale:1} }
@keyframes sl{from{opacity:0;translate:-70px 0}to{opacity:1;translate:0 0} }
@keyframes sq{from{opacity:0;translate:70px 0}to{opacity:1;translate:0 0} }
@keyframes pxa{from{translate:0 70px}to{translate:0 -70px} }
@keyframes pxb{from{translate:0 35px}to{translate:0 -35px} }
@keyframes pxc{from{translate:0 120px}to{translate:0 -120px} }
.rv,.fc,.dd{animation:sm linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
.rl{animation:sl linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
.rr{animation:sq linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
.pxa{animation:pxa linear both;animation-timeline:view();animation-range:cover}
.pxb{animation:pxb linear both;animation-timeline:view();animation-range:cover}
.pxc{animation:pxc linear both;animation-timeline:view();animation-range:cover}
}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-play-state:paused !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
.msg,.rx{opacity:1 !important;transform:none !important}
.msg.ty{display:none !important}
}
@media (pointer:fine){ html.rw-on, html.rw-on *{cursor:none !important} }
.rw-layer{position:fixed;inset:0;pointer-events:none;z-index:2147483000;overflow:hidden}
.rw-spark{position:fixed;pointer-events:none;line-height:1;text-shadow:0 0 8px currentColor}
.rw-fx{position:fixed;pointer-events:none}
.rw-wand{position:fixed;left:0;top:0;width:56px;height:56px;pointer-events:none;z-index:2147483001;opacity:0;transition:opacity .2s;will-change:transform;transform-origin:8px 8px}
.rw-wand svg{display:block;overflow:visible;filter:drop-shadow(0 0 6px rgba(244,114,182,.9))}
.sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background-size:420px 420px;background-image:radial-gradient(1px 1px at 42px 66px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 190px 20px,rgba(196,181,253,.7),transparent),radial-gradient(1.2px 1.2px at 300px 210px,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 120px 340px,rgba(249,168,212,.6),transparent),radial-gradient(1px 1px at 370px 380px,rgba(255,255,255,.5),transparent)}
.sky::before,.sky::after{content:"";position:absolute;inset:0}
.sky::before{background-size:610px 610px;background-image:radial-gradient(1px 1px at 80px 140px,rgba(255,255,255,.55),transparent),radial-gradient(1.2px 1.2px at 400px 60px,rgba(249,168,212,.55),transparent),radial-gradient(1px 1px at 520px 330px,rgba(196,181,253,.6),transparent),radial-gradient(1px 1px at 250px 500px,rgba(255,255,255,.5),transparent)}
.sky::after{background-size:880px 880px;background-image:radial-gradient(1.4px 1.4px at 160px 220px,rgba(255,255,255,.6),transparent),radial-gradient(1.2px 1.2px at 640px 120px,rgba(196,181,253,.6),transparent),radial-gradient(1.4px 1.4px at 480px 700px,rgba(249,168,212,.55),transparent)}
.sh{position:absolute;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#fff;scale:var(--k,1);box-shadow:0 0 6px 1px rgba(255,255,255,.8),0 0 14px 3px rgba(244,114,182,.4);animation:twk 4s ease-in-out infinite}
.sh::before,.sh::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.sh::before{width:22px;height:1.5px;background:linear-gradient(90deg,transparent,#fff,transparent)}
.sh::after{width:1.5px;height:22px;background:linear-gradient(180deg,transparent,#fff,transparent)}
@keyframes twk{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)} }
.cn{position:absolute;width:220px;height:150px;opacity:.6;animation:cnp 9s ease-in-out infinite}
@keyframes cnp{0%,100%{opacity:.45}50%{opacity:.85} }
.ss{position:absolute;top:4%;left:78%;width:120px;height:2px;background:linear-gradient(90deg,#fff,transparent);opacity:0;animation:shoot 17s linear infinite}
@keyframes shoot{0%,90%{opacity:0;transform:translate(0,0) rotate(-23deg)}91%{opacity:1}100%{opacity:0;transform:translate(-420px,180px) rotate(-23deg)} }


/* common.css */
/* Additional content only. Original animation styles remain untouched. */
.community-shell {max-width:1136px;margin:54px auto 70px;padding:0 32px;scroll-margin-top:140px}
.community-copy {margin-bottom:30px}
.community-copy .community-eyebrow {font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#f2afd7}
.community-copy h2 {font:600 clamp(34px,4vw,52px)/1.12 Fraunces,serif;margin:12px 0 20px}
.community-copy p {font-size:17px;line-height:1.7;color:#d3c0ee;max-width:720px}
.community-copy p a {color:#f7c8e5;text-decoration:underline;text-underline-offset:4px}
.community-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
.crunch-card {max-width:505px;margin:0;border-radius:20px;border:1px solid #69527e66;overflow:hidden;background:#160c24}
.crunch-card img {display:block;width:100%;height:auto}
.crunch-card figcaption {padding:20px 22px;color:#d3c0ee;font-size:14px;line-height:1.7}
.crunch-card strong {font:600 26px Fraunces,serif;color:#fff0fc}
.crunch-card small {display:block;margin-top:10px;color:#b4a1c7;font-size:12px;line-height:1.6}
.community-card {overflow:hidden;background:#211523;border:1px solid #70526380;border-radius:22px;max-width:505px;width:100%}
.invite-banner {display:block;width:100%;height:178px;object-fit:cover;object-position:center 30%}
.invite-body {padding:0 25px 25px}
.invite-icon {position:relative;margin-top:-40px;border:6px solid #211523;box-sizing:border-box;border-radius:50%;display:block}
.invite-body h3 {font:800 24px/1.4 Manrope,sans-serif;margin:14px 0 10px}
.invite-body h3 span {display:inline-block;vertical-align:middle;background:#ffffff14;border-radius:6px;padding:2px 7px;font:800 12px Manrope,sans-serif;margin-left:5px}
.invite-body p {color:#c8b8c8;font-size:16px;line-height:1.6;margin:8px 0}
.invite-body .invite-detail {font-size:13px;color:#a994ad}
.invite-url {display:block;margin:15px 0 22px;color:#ead9ed;font-size:15px}
.invite-join {display:block;background:#008b46;border-radius:10px;padding:13px 18px;text-align:center;color:white;font-weight:800;font-size:17px}
.invite-join:hover {background:#009d52}
.custom-request {display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:44px}
.custom-request h3 {font:600 30px Fraunces,serif;margin:0 0 10px}
.custom-request p {max-width:650px;color:#d3c0ee;font-size:15px;line-height:1.7;margin:0}
.custom-request .btn {flex-shrink:0}
@media(max-width:760px){
 .community-shell{padding:0 20px;margin:38px auto 46px}
 .community-grid{grid-template-columns:minmax(0,1fr);gap:26px}
 .community-card,.crunch-card{margin-left:auto;margin-right:auto}
 .custom-request{align-items:flex-start;flex-direction:column;gap:20px}
 .invite-banner{height:150px}
 .invite-body{padding:0 20px 20px}
}


/* balanced.css */
/* Balanced: compact introduction, clear actions, and a tidy feature grid. */
.hero {
  max-width: 1160px !important;
  padding-top: 26px !important;
  padding-bottom: 32px !important;
  gap: 32px !important;
}
.hero-copy {
  flex: 1 1 460px !important;
  min-width: 0 !important;
}
.hero .hero-copy h1 {
  font-size: clamp(54px, 6.2vw, 88px) !important;
  line-height: 1.02 !important;
  margin-top: 22px !important;
}
.hero-copy > p {
  max-width: 31rem !important;
  margin-top: 22px !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}
.hero-stage {
  flex: 1 1 470px !important;
  min-width: 0 !important;
}
.hero-actions {
  margin-top: 28px !important;
  gap: 12px !important;
}
.hero-actions .btn {
  padding: 14px 23px;
}
.hero-actions .ghost {
  background: rgba(167, 139, 250, .08);
  box-shadow: inset 0 0 0 1px rgba(220, 199, 255, .22);
}
.hero-facts {
  margin-top: 27px !important;
  gap: 12px 24px !important;
  font-size: 13px;
  color: #d0bfe9;
}
.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.feature-grid .fc {
  min-width: 0;
  padding: 14px;
  border-radius: 22px;
}
.feature-grid > .fc > summary {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.feature-grid .pv {
  height: 130px;
  border-radius: 14px;
}
/* The same preview space accommodates the tallest reviewed workflow. Keep the
   frame/keyframe definitions intact; only the surrounding card is normalized. */
.feature-grid > .fc > summary > .pv.story {
  height: 460px !important;
  min-height: 460px !important;
  flex: none;
}
.feature-grid > .fc > summary > .story-pagination {
  min-height: 31px;
  box-sizing: border-box;
  flex: none;
}
.feature-grid > .fc > summary > .fh {
  min-height: 55.2px;
  margin-top: 16px;
}
.feature-grid .fh h3 {
  font-size: 23px;
  line-height: 1.2;
}
.feature-grid > .fc > summary > p {
  min-height: 4.95em;
  font-size: 14px;
  line-height: 1.65;
}
.feature-grid .more {
  margin-top: 12px;
  letter-spacing: .1em;
}
.feature-grid > .fc > .fx {
  /* Expanded guidance grows in normal flow rather than overlaying the next row. */
  max-height: none;
  overflow: visible;
}
.community-grid {
  gap: 30px;
  align-items: center;
}
.community-copy {
  max-width: 45rem;
}
.community-copy p {
  line-height: 1.7;
}
.custom-request {
  border-top: 1px solid rgba(210, 185, 245, .2);
  padding-top: 26px;
}
.dw {
  gap: 30px;
}
.dd {
  padding: 26px;
  border-radius: 20px;
}
@media (max-width: 1050px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .hero {
    padding: 28px 20px 30px !important;
    gap: 18px !important;
  }
  .hero-copy,
  .hero-stage {
    flex-basis: 100% !important;
  }
  .hero .hero-copy h1 {
    font-size: clamp(48px, 11.5vw, 64px) !important;
  }
  .hero-copy > p {
    font-size: 17px !important;
  }
  .feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-grid .pv {
    height: 140px;
  }
  .community-grid {
    gap: 24px;
  }
  .dd {
    padding: 22px 19px;
  }
}