/* 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:none}
@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}
}
.gpill{display:inline-block;padding:3px;border-radius:999px;background:linear-gradient(100deg,#7c3aed,#db2777,#7c3aed);box-shadow:0 0 50px rgba(219,39,119,.4);max-width:100%;box-sizing:border-box}
.bgc{position:absolute;left:50%;top:60%;width:980px;height:980px;margin:-490px 0 0 -490px;pointer-events:none;animation:spin 180s linear infinite;will-change:transform}
.spread{display:flex;justify-content:center;align-items:flex-end;min-height:450px;--sc:1.6}
.tc{position:relative;display:block;cursor:pointer;flex:0 0 230px;height:380px;margin:0 -34px;perspective:1400px;transform:rotate(var(--r)) translateY(var(--y));transition:transform .6s cubic-bezier(.2,.9,.25,1.1);outline:none}
.tc.c{flex-basis:262px;height:432px;z-index:3}
.tc:hover{transform:rotate(0deg) translateY(-26px) scale(1.08);z-index:10}
.tc::after{content:"";position:absolute;inset:-6px;border-radius:22px;box-shadow:0 0 46px 8px rgba(244,114,182,.65);opacity:0;transition:opacity .3s;pointer-events:none;z-index:-1}
.tc:hover::after{opacity:1}
.tin{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform .8s ease}
.tf,.tb{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;overflow:hidden;box-shadow:0 18px 36px rgba(0,0,0,.55)}
.tb{transform:rotateY(180deg)}
.tf svg,.tb svg{display:block;width:100%;height:100%}
.scrim{display:none}
.xl{display:none}
.rd:not(#t0):checked ~ .scrim{display:block;position:absolute;inset:-56px -32px -120px;z-index:8;background:rgba(8,3,18,.62);cursor:pointer}
.rd:not(#t0):checked ~ .xl{display:inline-flex;position:absolute;top:-34px;right:-12px;z-index:30;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font:800 13px Manrope,sans-serif;color:#fff;cursor:pointer}
#t1:checked ~ .spread .tc1{transform:translate(calc(-1 * var(--dx)),var(--dy)) rotate(0deg) scale(var(--sc));z-index:20}
#t1:checked ~ .spread .tc1 .tin{transform:rotateY(0deg);transition-delay:.25s}
#t1:checked ~ .spread .tc1::after{opacity:1}
#t1:focus-visible ~ .spread .tc1{outline:3px solid #f9a8d4;outline-offset:6px;border-radius:16px}
#t2:checked ~ .spread .tc2{transform:translate(calc(-1 * var(--dx)),var(--dy)) rotate(0deg) scale(var(--sc));z-index:20}
#t2:checked ~ .spread .tc2 .tin{transform:rotateY(0deg);transition-delay:.25s}
#t2:checked ~ .spread .tc2::after{opacity:1}
#t2:focus-visible ~ .spread .tc2{outline:3px solid #f9a8d4;outline-offset:6px;border-radius:16px}
#t3:checked ~ .spread .tc3{transform:translate(calc(-1 * var(--dx)),var(--dy)) rotate(0deg) scale(var(--sc));z-index:20}
#t3:checked ~ .spread .tc3 .tin{transform:rotateY(0deg);transition-delay:.25s}
#t3:checked ~ .spread .tc3::after{opacity:1}
#t3:focus-visible ~ .spread .tc3{outline:3px solid #f9a8d4;outline-offset:6px;border-radius:16px}
#t4:checked ~ .spread .tc4{transform:translate(calc(-1 * var(--dx)),var(--dy)) rotate(0deg) scale(var(--sc));z-index:20}
#t4:checked ~ .spread .tc4 .tin{transform:rotateY(0deg);transition-delay:.25s}
#t4:checked ~ .spread .tc4::after{opacity:1}
#t4:focus-visible ~ .spread .tc4{outline:3px solid #f9a8d4;outline-offset:6px;border-radius:16px}
#t5:checked ~ .spread .tc5{transform:translate(calc(-1 * var(--dx)),var(--dy)) rotate(0deg) scale(var(--sc));z-index:20}
#t5:checked ~ .spread .tc5 .tin{transform:rotateY(0deg);transition-delay:.25s}
#t5:checked ~ .spread .tc5::after{opacity:1}
#t5:focus-visible ~ .spread .tc5{outline:3px solid #f9a8d4;outline-offset:6px;border-radius:16px}
@media(max-width:900px){ .spread{zoom:.72;--sc:1.75} }
@media(max-width:560px){ .spread{zoom:.42;--sc:2.3} .bgc{width:620px;height:620px;margin:-310px 0 0 -310px} }
@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)} }
.cbox{height:332px;overflow:hidden}
.ccol{flex:0 0 172px;display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px;justify-content:space-between}
.ci{display:block;width:100%;box-sizing:border-box;text-align:left;border:0;border-radius:12px;padding:10px 12px;min-height:44px;background:rgba(18,10,32,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#c9b6e6;font:800 13px/20px Manrope,sans-serif;cursor:pointer;transition:box-shadow .2s,color .2s}
.ci:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(249,168,212,.55)}
.ci.on{cursor:default;color:#fff;background:linear-gradient(160deg,rgba(124,58,237,.4),rgba(18,10,32,.96));box-shadow:inset 0 0 0 1.5px rgba(249,168,212,.85),0 0 28px rgba(244,114,182,.35)}
.cid{margin-top:6px;font-size:12px;line-height:1.45;color:#e5d6f7;font-weight:600;overflow:hidden;animation:grow .45s ease forwards}
@keyframes grow{from{max-height:0;opacity:0}to{max-height:120px;opacity:1} }
.m{opacity:0;transform:translateY(8px);animation:min .45s ease forwards;animation-delay:var(--d,0s)}
@keyframes min{to{opacity:1;transform:none} }
.mr{display:flex;gap:8px;align-items:flex-start}
.mb2{min-width:0}
.cbox .nm{font-weight:800;font-size:13px}
.cbox .tx{margin-top:1px;font-size:13px;line-height:1.4;color:#e5d6f7}
.tyd{position:absolute;left:0;top:0;opacity:0;animation:tyd var(--l,1.4s) ease forwards;animation-delay:var(--d,0s)}
@keyframes tyd{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0} }
.rx2{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:2px 8px;border-radius:9px;background:rgba(88,101,242,.28);box-shadow:inset 0 0 0 1px rgba(150,160,255,.7);font:800 12px Manrope,sans-serif;color:#e0e3ff;opacity:0;animation:rxp .9s ease forwards;animation-delay:var(--d,0s)}
@keyframes rxp{0%{opacity:0;transform:scale(0)}35%{opacity:1;transform:scale(1.45)}55%{transform:scale(.85)}75%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)} }
.em{margin-top:6px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.06);border-left:3px solid #a78bfa}
.em b{color:#fff}
.et{font-weight:800;font-size:13px;color:#fff;margin-bottom:4px}
.ef{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:12px;color:#d9c8f2;line-height:1.5}
.ef span b{color:#f9a8d4;font-weight:800}
.bp{animation:press .4s ease forwards;animation-delay:var(--d,0s)}
@keyframes press{0%{transform:scale(1)}40%{transform:scale(.88);box-shadow:0 0 0 4px rgba(249,168,212,.7)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(249,168,212,0)} }
.tk{margin-top:6px;padding:8px 10px;border-radius:10px;background:#120a20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.tkh{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:800 11px Manrope,sans-serif;letter-spacing:.06em;color:#bfaedb}
.lk{color:#93c5fd;text-decoration:underline}
.sl{background:rgba(255,255,255,.12);border-radius:5px;padding:0 5px;font-weight:800;color:#fff}
@media(max-width:560px){ .ccol{flex:none;width:100%;justify-content:flex-start} .cbox{height:340px;min-height:0;flex:none;width:100%;box-sizing:border-box} }
@media (prefers-reduced-motion:reduce){
.m,.rx2,.cid{opacity:1 !important;transform:none !important;max-height:none !important}
.tyd{display:none !important}
}
.cbox{display:flex;flex-direction:column-reverse;overflow-x:hidden;overflow-y:auto;height:300px;padding:0 8px 0 14px;scrollbar-width:thin;scrollbar-color:rgba(249,168,212,.55) transparent}
.cbox::-webkit-scrollbar{width:6px}
.cbox::-webkit-scrollbar-thumb{background:rgba(249,168,212,.5);border-radius:6px}
.cin{margin-bottom:auto;min-width:0;padding:0 0 16px}
.cin>div:first-child{position:sticky;top:0;z-index:3;margin:0 !important;padding:14px 0 8px;background:#130a22}
.cin>div:nth-child(2){padding-top:2px}
.ad{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.cv{padding:8px 10px 8px 10px;border-radius:8px;background:rgba(255,255,255,.05);border-left:4px solid #680d04;font-size:12px;line-height:1.45;color:#e5d6f7}
.cv h5{margin:4px 0 0;font:800 14px Manrope,sans-serif;color:#fff}
.cv small{display:block;color:#bfaedb;font-size:10.5px;line-height:1.35}
.cv b{color:#fff}
.cv hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:6px 0}
.cv .q{margin:4px 0;padding-left:8px;border-left:2px solid rgba(255,255,255,.25);color:#cdbbe6;font-style:italic}
.bnr{height:44px;margin-bottom:6px;border-radius:6px;display:grid;place-items:center;background:linear-gradient(100deg,#4a0f0f,#7a1d2a 55%,#3b0a30);font:800 9px Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.thm{flex:none;width:42px;height:42px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#7a1d2a,#3b0a30);font:800 9px Manrope,sans-serif;color:rgba(255,255,255,.55)}
.tg{display:inline-block;margin:0 3px 3px 0;padding:0 5px;border-radius:4px;background:rgba(255,255,255,.12);font:600 10.5px ui-monospace,Menlo,monospace;color:#f9d0e6}
.of{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.of b{margin-top:4px;color:#f9a8d4}
.lb{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:7px;background:rgba(255,255,255,.14);font:800 11.5px Manrope,sans-serif;color:#fff}
.cf{border-left-color:#b4233a}
.pf{margin-top:6px;font-size:12px;line-height:1.45;color:#e5d6f7}
.pf b{color:#fff}
.sel{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:12px;color:#e5d6f7}
.bn.gr{background:#15803d}
.cin>div:nth-child(2){gap:0 !important}
.m{max-height:0;margin-top:0;overflow:hidden;animation-name:min2}
@keyframes min2{0%{max-height:0;margin-top:0;opacity:0;transform:translateY(8px)}1%{max-height:1800px;margin-top:8px}100%{max-height:1800px;margin-top:8px;opacity:1;transform:none} }
.tyd{position:static;max-height:0;overflow:hidden;animation-name:tyd2}
@keyframes tyd2{0%{opacity:0;max-height:0;margin-top:0}12%,88%{opacity:1;max-height:44px;margin-top:8px}100%{opacity:0;max-height:0;margin-top:0} }
@media (prefers-reduced-motion:reduce){ .m{margin-top:8px !important} }
.uo{position:relative;margin-top:6px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.06);border-left:4px solid #8a1c2c;font-size:12px;line-height:1.5;color:#e5d6f7}
.uo h4{margin:0;font:800 14px Manrope,sans-serif;color:#fff}
.uo h6{margin:10px 0 2px;font:800 12.5px Manrope,sans-serif;color:#fff}
.uo b{color:#fff}
.uo hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:10px 0 8px}
.uo .th{position:absolute;right:10px;top:10px;width:52px;height:52px;border-radius:10px;overflow:hidden}
.uo .th img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.uo .th i{position:absolute;left:4px;bottom:4px;padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.7);font:800 8px Manrope,sans-serif;font-style:normal;color:#fff}
.rl2{display:inline-block;margin:2px 4px 2px 0;padding:0 6px;border-radius:4px;font-weight:700}
.bn.bl{background:#5865f2}
.bn.rd{background:#d83c3e}
@media(max-width:900px){ #features h2{white-space:normal !important} }


/* 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;
  }
}


/* previews.css */
/* Message entrance, typing, reactions and clicks reuse the original keyframes. */
.feature-grid .pv.story{height:340px!important;min-height:340px;padding:0!important;display:flex;flex-direction:column;box-sizing:border-box;text-align:left}
.story{overflow:hidden;background-color:#120a20;color:#e5d6f7;font-family:Manrope,sans-serif}
.story-head{flex:none;display:flex;align-items:center;gap:7px;padding:12px 12px 9px;font:800 10px/1.35 Manrope,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#bfaedb;border-bottom:1px solid #ffffff0c}
.story-head>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-head small{margin-left:auto;letter-spacing:0;font-size:8px;color:#9b89b5;font-weight:600}
.story-dot{flex:none;width:6px;height:6px;border-radius:50%;background:#f472b6;box-shadow:0 0 10px #f472b6}
.story-viewport{flex:1;min-height:0;display:flex;flex-direction:column-reverse;overflow:hidden;padding:0 12px}
.story-track{min-width:0;flex:none;margin-bottom:auto;padding-bottom:12px}
.story .mr{gap:7px}
.story .av{height:25px;width:25px;font-size:10px}
.story .story-bot{background:#1a0f2e;box-shadow:inset 0 0 0 1.5px rgba(196,160,255,.55)}
.story .story-bot img{width:20px;height:auto;display:block}
.story .story-member img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.story .story-person{background:linear-gradient(140deg,#493365,#7d3c68);color:#e9d5ff}
.story .nm{font-weight:800;font-size:11px;line-height:1.4;color:#d5bffe;overflow-wrap:anywhere}
.story .story-bot+.mb2>.nm{color:#fff}
.story .bt{margin-left:4px;font-size:8px;padding:1px 4px}
.story .tx{font-size:12px;line-height:1.4;margin-top:1px;color:#e5d6f7;overflow-wrap:anywhere;white-space:pre-line}
.story .em{margin-top:4px;padding:6px 7px;border-left-width:3px}
.story .pb{gap:4px;margin-top:6px}
.story .bn{font-size:9px;padding:4px 6px;border-radius:5px}
.story .rx2{font-size:11px;padding:2px 6px;margin-top:5px}
.story-command{color:#e9d5ff;background:#7c3aed29;border-radius:3px;padding:1px 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.story-action{border-left:2px solid #bda0da55;padding-left:9px;color:#c9b7dd}
.story-action .tx{font-size:11px;color:#c9b7dd}
.story-action-label,.story-form small{font:700 9px/1.5 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#b99ccd}
.story-attachment{display:block;width:100%;height:auto;border-radius:5px;margin-top:4px}
.story .m,.story .tyd,.story .rx2,.story .bp,.story .dots i{animation-play-state:paused}
#dc-root .cbox .m,#dc-root .cbox .tyd,#dc-root .cbox .rx2,#dc-root .cbox .bp,#dc-root .cbox .dots i{animation-play-state:paused}
#dc-root .story .m,#dc-root .cbox .m{box-sizing:border-box;animation-name:story-message;animation-duration:.55s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
@keyframes story-message{from{max-height:0;margin-top:0;opacity:0;transform:translateY(4px)}to{max-height:var(--story-row-height,1800px);margin-top:8px;opacity:1;transform:none}}
#dc-root .cbox[data-story-static] .m,#dc-root .cbox[data-story-static] .rx2{animation:none!important;opacity:1!important;transform:none!important;max-height:none!important}
#dc-root .cbox[data-story-static] .m{margin-top:8px!important}
#dc-root .cbox[data-story-static] .tyd{display:none!important}
@media(prefers-reduced-motion:reduce){#dc-root .cbox .m,#dc-root .cbox .rx2{animation:none!important;opacity:1!important;transform:none!important;max-height:none!important}#dc-root .cbox .tyd{display:none!important}}
.story-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 24px}
.story-controls button{border:1px solid #d5b4ed40;border-radius:8px;background:#1c102a;color:#d9c7ec;padding:7px 11px;font:600 12px Manrope,sans-serif;cursor:pointer}
.story-controls button:hover{color:#fff;border-color:#f9a8d4a0}
.story-controls button:focus-visible{outline:2px solid #f9a8d4;outline-offset:3px}
.story-controls button[aria-pressed=true]{background:#432350;color:#fff}
.story-controls button:disabled{opacity:.55;cursor:default}
.crunch-card .crunch-story{height:355px;display:flex;flex-direction:column;box-sizing:border-box;background:rgba(18,10,32,.92)}
.crunch-story .story-head{padding:17px 18px 12px;font-size:11px}
.crunch-story .story-viewport{padding:0 18px}
.crunch-story .story-track{padding-bottom:20px}
.crunch-story .mr{gap:8px}
.crunch-story .av{width:30px;height:30px;font-size:12px}
.crunch-story .story-bot img{width:26px}
.crunch-story .nm{font-size:13px}
.crunch-story .tx{font-size:13px;line-height:1.4}
.crunch-card .story-controls{margin:15px 0 0}
.story[data-story-static] .m,.story[data-story-static] .rx2{animation:none!important;opacity:1!important;transform:none!important;max-height:none!important}
.story[data-story-static] .m{margin-top:8px!important}
.story[data-story-static] .tyd{display:none!important}
@media(prefers-reduced-motion:reduce){
 .story .m,.story .rx2{animation:none!important;opacity:1!important;transform:none!important;max-height:none!important}
 .story .m{margin-top:8px!important}
 .story .tyd{display:none!important}
}
@media(max-width:500px){.feature-grid .pv.story{height:340px!important;min-height:340px}.crunch-card .crunch-story{height:345px}}
.story-stage{position:relative;flex:1;min-height:0}
.story-frame{position:absolute;inset:0;padding:13px;box-sizing:border-box;opacity:0;transform:translateY(4px);pointer-events:none;animation:story-enter .55s cubic-bezier(.22,.61,.36,1) var(--enter) forwards,story-leave .18s ease-in var(--exit) forwards;animation-play-state:paused}
.story-frame.flow-last{animation:story-enter .55s cubic-bezier(.22,.61,.36,1) var(--enter) forwards;animation-play-state:paused}
@keyframes story-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes story-leave{from{opacity:1;transform:none;visibility:visible}to{opacity:0;transform:none;visibility:hidden}}
.story-frame .av img{width:100%;height:100%;object-fit:cover}
.story-frame .mb2{min-width:0;flex:1}
.story-frame .em>strong{font-size:12px;line-height:1.4;display:block}
.flow-note{font:500 10px/1.5 Manrope,sans-serif!important;color:#bfaedb;margin:10px 0 0!important;min-height:0!important}
.flow-profile{position:relative;padding:0 10px 12px;background:#19141f;border:1px solid #d5b4ed24;border-radius:10px;overflow:hidden}
.flow-banner{height:33px;margin:0 -10px;background:linear-gradient(110deg,#63396c,#2a204a)}
.flow-profile-avatar{width:36px;height:36px;object-fit:cover;border:3px solid #19141f;border-radius:50%;margin-top:-17px;position:relative;background:#26183b}
.flow-profile>strong{display:block;font:800 14px/1.5 Manrope,sans-serif;margin:1px 0}
.flow-profile>small{display:block;color:#9e8caf;font-size:9px;margin-bottom:9px}
.flow-profile>p{font:500 10px/1.5 Manrope,sans-serif!important;min-height:0!important;margin:3px 0!important;overflow-wrap:anywhere}
.flow-role-heading{color:#c6c0cb;font:600 10px/1.4 Manrope,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid #ffffff18;border-radius:6px;padding:5px 6px;margin-top:8px}
.flow-new-heading{border-color:#d09bea7d;background:#8c4f9c25}
.flow-role{display:inline-flex;align-items:center;gap:5px;font:600 10px/1.4 Manrope,sans-serif;color:#dacbe7;border:1px solid #ffffff22;border-radius:5px;padding:4px 6px;margin:5px 3px 0 0}
.flow-role i{width:7px;height:7px;border-radius:50%;background:#b48ae7}.flow-role.flow-pink i{background:#e178ac}
.flow-status{padding:6px 8px;border-radius:6px;background:#ffffff08;font-size:11px;overflow-wrap:anywhere}.flow-status small{display:block;font-size:9px;color:#af9abd;margin-bottom:4px}
.flow-or{font-size:9px;font-weight:800;color:#bda1cc;text-align:center;margin:5px}.flow-tag{display:inline-block;background:#ab7cab30;border-radius:4px;padding:2px 6px;font-size:11px}
.flow-dashboard{border:1px solid #bb9bcc28;border-radius:8px;background:#14101c;padding:10px}
.flow-editor-heading{font-size:13px;font-weight:800;margin-bottom:10px;color:#f2e7fa}
.flow-editor-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:8px;align-items:start}
.flow-field{margin-bottom:9px;min-width:0}.flow-field>span{font-size:9px;font-weight:700;color:#cdb6de;display:block;margin-bottom:4px}
.flow-field>div{min-height:26px;padding:6px;box-sizing:border-box;border:1px solid #c6a5dd30;border-radius:5px;background:#21172e;color:#eee0f6;font-size:10px;line-height:1.4;overflow-wrap:anywhere}
.flow-placeholder{color:#8e7b9b}.flow-upload-row{display:flex;gap:5px;flex-wrap:wrap}.flow-upload-row>span{font-size:8px;color:#bea7cf;flex:1;min-width:43px}.flow-upload-row b{display:block;border:1px dashed #c6a5dd55;border-radius:4px;padding:5px 3px;font-size:8px;margin-top:3px}
.flow-profile-preview>small{font-size:9px;display:block;margin-bottom:5px;color:#c7b2d6}.flow-profile-preview .flow-profile{padding:0 6px 8px}.flow-profile-preview .flow-banner{margin:0 -6px}.flow-profile-preview .flow-profile>strong{font-size:11px;overflow-wrap:anywhere}.flow-profile-preview .flow-profile>small{font-size:8px;margin:0}
.flow-savebar{display:flex;justify-content:space-between;align-items:center;gap:6px;border-top:1px solid #c7a7db25;margin-top:10px;padding-top:9px;color:#a38daf;font-size:9px;line-height:1.4}.flow-savebar .bn{flex:none}.flow-savebar .flow-success{color:#96d6ae}
.flow-value{display:block;animation:story-type .85s linear var(--d) both;animation-play-state:paused}
@keyframes story-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.flow-modal{background:#1b1424;border:1px solid #c4a3da40;border-radius:10px;padding:12px}.flow-modal>strong{display:block;font-size:13px}.flow-modal>small{display:block;font-size:9px;color:#bda6cc;margin:4px 0 12px}
.flow-file{border:1px dashed #bb9bcd50;background:#281b3440;border-radius:5px;font-size:10px;padding:7px;color:#dfcfeb;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px}.flow-file span{font-size:9px;color:#9fd1b2}.flow-modal-footer{display:flex;justify-content:flex-end;margin-top:10px}
.flow-two-fields{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px}
.flow-audit-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.flow-audit-fields>span{font-size:9px;color:#aa93be}.flow-audit-fields b{display:block;color:#ded0e9;font-size:10px;overflow-wrap:anywhere}.flow-audit-totals{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;border-top:1px solid #d4b6e52a;padding-top:8px}.flow-audit-totals>span{font-size:9px}.flow-audit-totals b{display:block;font-size:15px;color:#abddba}
.flow-published{font-size:9px;color:#ac97bd;margin-top:9px}.story .flow-watch{font-size:10px;line-height:1.4}.flow-watch span{color:#b49af3;overflow-wrap:anywhere}
.flow-video{border-left:3px solid #d6607d;background:#24192f;border-radius:5px;padding:8px;margin-top:8px}.flow-video>small{font-size:8px;color:#b8a4c7}.flow-video>strong{display:block;color:#cdb2ff;font-size:10px;line-height:1.45;margin:5px 0}.flow-video>div{position:relative}.flow-video img{width:100%;height:auto;display:block;border-radius:4px}.flow-video>div>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:white;background:#c52d3b;padding:3px 10px;border-radius:5px;font-size:11px}
.story[data-story-static] .story-frame{display:none!important;animation:none!important}.story[data-story-static] .flow-last{display:block!important;opacity:1!important;transform:none!important}.story[data-story-static] .flow-value{animation:none!important;clip-path:none!important}
.flow-video img{max-height:145px;object-fit:contain;background:#110b19}
.feature-grid .story[data-scene="YouTube & Reddit Feeds"]{height:390px!important;min-height:390px}
.feature-grid .story[data-scene="Partnerships"],.feature-grid .story[data-scene="Booster Role Customization"],.feature-grid .story[data-scene="Tickets"],.feature-grid .story[data-scene="Member Overview"],.feature-grid .story[data-scene="Moderation Commands"]{height:460px!important;min-height:460px}
.feature-grid .story[data-scene="Sticky Messages"]{height:390px!important;min-height:390px}
.story-frame .mr+.mr{margin-top:10px}
.flow-old-copy{opacity:.55}
.community-role-preview{margin-top:8px;padding:10px;text-align:center}
.community-role-preview>small{display:block;font-size:8px;color:#bda6cc}
.community-role-preview>strong{display:block;font-size:17px;line-height:1.5;margin:7px 0;background:linear-gradient(90deg,#fff,#ed4245);background-clip:text;-webkit-background-clip:text;color:transparent}
.community-custom-role{color:#f5b3ba}
.community-custom-role img{border-radius:3px}
.community-ad-banner{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:18px 8px;margin:8px 0;background:linear-gradient(120deg,#513e7b,#9e4d73);border-radius:6px;color:#fff;letter-spacing:.13em}
.community-ad-banner strong{font:700 18px/1.4 Manrope,sans-serif}
.community-ad-banner small{font-size:9px;letter-spacing:.07em}
.story-pagination{display:flex;justify-content:center;align-items:center;gap:2px;padding:7px 4px 2px;flex-wrap:wrap;cursor:default}
.story-page{appearance:none;border:0;background:none;padding:5px;width:19px;height:22px;display:grid;place-items:center;cursor:pointer;border-radius:7px;color:#cab4df}
.story-page>span{width:6px;height:6px;border-radius:50%;background:#a990bf70;transition:background .2s,transform .2s}
.story-page[aria-current=true]>span{background:#efb5ed;transform:scale(1.35)}
.story-page:hover>span{background:#fff0fa}.story-page:focus-visible{outline:2px solid #efb5ed;outline-offset:1px}
.story .bn,.cbox .bn{background:#5865f2;color:#fff;box-shadow:none}
.story .bn.btn-primary,.cbox .bn.btn-primary{background:#5865f2!important;color:#fff!important}
.story .bn.btn-secondary,.cbox .bn.btn-secondary{background:#4e5058!important;color:#fff!important}
.story .bn.btn-success,.cbox .bn.btn-success{background:#248046!important;color:#fff!important}
.story .bn.btn-danger,.cbox .bn.btn-danger{background:#da373c!important;color:#fff!important}
.story .bn.btn-dashboard{background:#b33641!important;color:#fff!important}
.story-mention,.story .mn,.cbox .mn{color:#c9cdfb;background:#5865f233;border-radius:3px;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.flow-overview-scroll{max-height:290px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#8f72ac #171020;padding-right:5px;outline-offset:2px}
.flow-overview-scroll:focus-visible{outline:2px solid #cca1f0}.flow-overview-section{margin-top:12px;font-size:11px;line-height:1.5}
.flow-overview-section h4,.flow-overview-section h5{font-size:12px;margin:9px 0 5px}.flow-overview-section p{font-size:11px!important;min-height:0!important;margin:4px 0!important}
.story-reply{font-size:10px;line-height:1.45;border-left:2px solid #8c7f9d;border-top:1px solid #8c7f9d55;border-radius:5px 0 0;padding:4px 7px;margin:0 0 7px;color:#bdadcc}
.story-score{font-size:11px;color:#e4cfef;margin-bottom:6px}.story-highlight{border:1px solid #78628755;border-left:3px solid #e8be69;border-radius:7px;background:#20172b;padding:9px}.story-highlight>small{display:block;margin-top:8px;font-size:9px;color:#bfa8d0}
.story[data-story-static][data-story-manual] .story-frame{display:none!important}
.story[data-story-static][data-story-manual] .story-frame[data-story-selected]{display:block!important;opacity:1!important;visibility:visible!important;transform:none!important}
.story[data-story-static][data-story-manual] .m:not([data-story-selected]){display:none!important}
@media(prefers-reduced-motion:reduce){.story-frame{display:none!important;animation:none!important}.story-frame.flow-last{display:block!important;opacity:1!important;transform:none!important}.flow-value{animation:none!important;clip-path:none!important}}

/* Examples remain readable if their animation controller cannot load. */
#dc-root .story:not([data-story-motion]) .m,#dc-root .story:not([data-story-motion]) .rx2,#dc-root .cbox:not([data-story-motion]) .m,#dc-root .cbox:not([data-story-motion]) .rx2{animation:none!important;opacity:1!important;transform:none!important;max-height:none!important}
#dc-root .story:not([data-story-motion]) .m,#dc-root .cbox:not([data-story-motion]) .m{margin-top:8px!important}
#dc-root .story:not([data-story-motion]) .tyd,#dc-root .cbox:not([data-story-motion]) .tyd{display:none!important}
.story:not([data-story-motion]) .story-frame{display:none!important;animation:none!important}
.story:not([data-story-motion]) .flow-last{display:block!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto}
.story:not([data-story-motion]) .flow-value{animation:none!important;clip-path:none!important}