:root{
  --bg:#17171B;--surface:#1F1F24;--card:#2A2A31;--purple:#7B2FBE;--purple-light:#9B4DDB;--purple-dim:#3D1766;
  --gold:#FFB800;--text:#FFFFFF;--text-2:#9C9CA6;--divider:#35353C;--border:#3E3E46;--red:#E53935;--green:#4CAF50;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--font);overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.1}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--purple-light);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-64px;z-index:100;background:var(--purple);padding:8px 16px;border-radius:999px;text-decoration:none;transition:top .15s}
.skip-link:focus{top:8px}
.wrap{width:100%;max-width:1152px;margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:816px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--font);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,transform .2s var(--ease)}
.btn--primary{background:var(--purple);color:var(--text)}
.btn--primary:hover{background:var(--purple-light)}
.btn--ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn--ghost:hover{border-color:var(--purple-light);color:var(--purple-light)}
.btn--sm{min-height:44px;padding:0 20px;font-size:15px}
.btn--lg{min-height:56px;padding:0 32px;font-size:17px}
.btn:active{transform:translateY(1px)}
.ico-b{width:20px;height:20px}
.link{display:inline-block;margin-top:16px;color:var(--purple-light);font-weight:600;text-underline-offset:4px}
.link:hover{color:var(--text)}

/* sections */
.section{padding:64px 0;position:relative}
.section--band{background:var(--surface);border-block:1px solid var(--divider)}
.section__head{max-width:640px;margin-bottom:48px}
.section__head--center{margin-inline:auto;text-align:center}
h2{font-size:clamp(32px,6vw,48px)}
h3{font-size:20px;line-height:1.25}
.eyebrow{color:var(--purple-light);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.sub{color:var(--text-2);font-size:18px;margin-top:16px}
.lead{color:var(--text-2);font-size:19px;max-width:520px;margin-top:24px}
.fine{color:var(--text-2);font-size:14px;margin-top:16px}

/* hero */
.hero{padding:32px 0 48px;overflow:hidden}
.hero__grid{display:grid;gap:64px;align-items:center}
.hero__title{font-size:clamp(40px,10vw,72px);line-height:1.04}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block}
.js .w>span{transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:calc(var(--i)*70ms + 150ms)}
.js .is-in .w>span,.js .w.in>span{transform:none}
.hero__stage{position:relative;display:flex;justify-content:center;padding:8px 0 16px}
.hero__disc{position:absolute;left:50%;top:50%;width:min(420px,88vw);aspect-ratio:1;margin:-210px 0 0 -210px;border-radius:50%;background:var(--purple-dim)}
.hero__ring{position:absolute;left:50%;top:50%;width:min(420px,88vw);aspect-ratio:1;margin:-210px 0 0 -210px;border-radius:50%;border:2px solid var(--purple);opacity:0;animation:pulse 4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.tilt{position:relative;z-index:2;transition:transform .25s var(--ease);will-change:transform}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.toast{position:absolute;z-index:3;display:none;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px 16px 12px 12px;font-size:14px;line-height:1.3;white-space:nowrap;animation:float 5s ease-in-out infinite}
.toast img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.toast b{display:block}
.toast span{color:var(--text-2)}
.toast--a{left:-56px;top:7%}
.toast--b{right:-56px;bottom:12%;animation-delay:-2.5s}
.hero__dots{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.hero__dots i{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background-color .3s,width .3s var(--ease)}
.hero__dots i.on{background:var(--purple-light);width:24px;border-radius:999px}

/* scroll reveal */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
.js .rv.in{opacity:1;transform:none}

/* showcase */
.showcase{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:16px 24px 32px;margin:0 -24px;scrollbar-width:none}
.showcase::-webkit-scrollbar{display:none}
.showcase__item{flex:none;scroll-snap-align:center}
.showcase__item--c{order:-1}

/* marquee */
.marquee{overflow:hidden;margin-top:16px}
.marquee__track{display:flex;flex-wrap:wrap;gap:16px;padding:0 24px}
.js .marquee__track{flex-wrap:nowrap;width:max-content;padding:0;animation:mq 60s linear infinite}
.js .marquee__track--b{animation-duration:45s}
.js .marquee--rev .marquee__track{animation-direction:reverse}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.js .marquee__track>*{margin-right:16px}
.js .marquee__track{gap:0}
.ccard{flex:none;width:208px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:8px 8px 16px;transition:border-color .2s}
.ccard:hover{border-color:var(--purple-light)}
.ccard__img{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--purple-dim)}
.ccard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ccard:hover .ccard__img img{transform:scale(1.06)}
.ccard__t{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 8px 0}
.ccard__t b{font-size:17px;white-space:nowrap}
.tag{font-size:12px;font-weight:600;padding:4px 8px;border-radius:999px;background:var(--purple-dim);color:var(--text);white-space:nowrap}
.ccard p{padding:8px 8px 0;color:var(--text-2);font-size:15px;line-height:1.4;white-space:normal}
.pill{flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-weight:600;font-size:17px;white-space:nowrap}
.pill--p{background:var(--purple-dim);border-color:var(--purple)}

/* faq */
.faq{display:grid;gap:8px}
details{background:var(--card);border:1px solid var(--border);border-radius:16px;transition:border-color .2s,opacity .5s var(--ease),transform .5s var(--ease)}
details:hover,details[open]{border-color:var(--purple-light)}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 24px;font-weight:600;font-size:18px;cursor:pointer;border-radius:16px}
summary::-webkit-details-marker{display:none}
.chev{flex:none;width:24px;height:24px;color:var(--purple-light);transition:transform .3s var(--ease)}
details[open] .chev{transform:rotate(180deg)}
.ans{overflow:hidden}
.ans p{padding:0 24px 24px;color:var(--text)}

/* download */
.dl{display:grid;gap:40px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:24px;padding:32px 24px;overflow:hidden}
.dl__art{display:flex;justify-content:center;gap:16px}
.dl__art img{width:96px;height:128px;object-fit:cover;border-radius:16px;border:1px solid var(--border);animation:float 6s ease-in-out infinite}
.dl__art img:nth-child(2){margin-top:32px;animation-delay:-2s}
.dl__art img:nth-child(3){animation-delay:-4s}
.dl h2{font-size:clamp(32px,6vw,44px)}
.dl .btn{margin-top:32px}
.dl__copy{text-align:center}
.dl__copy .sub{max-width:420px;margin-inline:auto}

/* footer */
.site-footer{border-top:1px solid var(--divider);padding:48px 0;background:var(--surface)}
.site-footer__inner{display:grid;gap:16px;justify-items:start}
.site-footer__line,.site-footer__copy{color:var(--text-2);font-size:15px}
.site-footer__links{display:flex;flex-wrap:wrap;gap:8px 24px}
.site-footer__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-decoration:none}
.site-footer__links a:hover{color:var(--purple-light)}

/* ================= phone ================= */
.phone{--pw:288px;width:var(--pw);font-size:calc(var(--pw)/22);aspect-ratio:1/2.06;position:relative;flex:none;text-align:left;line-height:1.3;user-select:none}
.phone__bezel{position:absolute;inset:0;background:var(--surface);border:1px solid var(--border);border-radius:2.4em;padding:.55em}
.phone__bezel::before,.phone__bezel::after{content:"";position:absolute;right:-.25em;width:.25em;background:var(--border);border-radius:0 2px 2px 0}
.phone__bezel::before{top:9em;height:3.6em}
.phone__bezel::after{top:14em;height:6em}
.phone__island{position:absolute;z-index:6;top:1.15em;left:50%;transform:translateX(-50%);width:6.4em;height:1.8em;background:#000;border-radius:999px}
.phone__screen{position:relative;width:100%;height:100%;background:var(--bg);border-radius:1.9em;overflow:hidden}
.status{position:absolute;z-index:5;top:0;left:0;right:0;height:3.6em;display:flex;align-items:center;justify-content:space-between;padding:.4em 2em 0;font-size:.85em;font-weight:600;background:var(--bg)}
.status__r{display:flex;align-items:center;gap:.4em}
.sig{width:1.2em;height:.8em;background:var(--text);clip-path:polygon(0 100%,0 70%,25% 70%,25% 100%,35% 100%,35% 45%,60% 45%,60% 100%,70% 100%,70% 0,100% 0,100% 100%)}
.bat{width:1.7em;height:.85em;border:1px solid var(--text);border-radius:.3em;position:relative}
.bat::after{content:"";position:absolute;inset:1px;right:30%;background:var(--text);border-radius:.15em}
.gbar{position:absolute;z-index:6;bottom:.5em;left:50%;transform:translateX(-50%);width:7em;height:.32em;border-radius:999px;background:var(--text);opacity:.6}
.scr{position:absolute;inset:0;padding-top:3.4em;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;overflow:hidden}
.scr.on{opacity:1;visibility:visible}
.ico-s{width:1.9em;height:1.9em}
.app-h{display:flex;align-items:center;justify-content:space-between;padding:.6em 1.2em .8em;position:relative;z-index:4;background:var(--bg)}
.app-h b{font-size:1.7em;font-style:italic;font-weight:800;letter-spacing:-.02em}
.app-h span{display:flex;gap:1em}
.app-h svg{width:1.9em;height:1.9em}
.av{position:relative;display:block;width:4em;height:4em;border-radius:50%;overflow:hidden;flex:none;background:var(--purple-dim)}
.av--s{width:2.7em;height:2.7em}
.av--l{width:6.6em;height:6.6em;border:.35em solid var(--bg);border-radius:50%;margin-top:-3.3em;overflow:hidden}
.av img,.cm img,.ring img{width:100%;height:100%;object-fit:cover}
.online{position:absolute;right:.05em;bottom:.05em;width:1em;height:1em;border-radius:50%;background:var(--green);border:.2em solid var(--bg)}

/* feed */
.feed{padding-bottom:7em;will-change:transform}
.scr--feed.play .feed{animation:feedscroll 9s 2.2s var(--ease) forwards}
@keyframes feedscroll{to{transform:translateY(-9em)}}
.stories{display:flex;gap:1em;padding:.3em 1.2em 1em;overflow:hidden}
.story{display:grid;justify-items:center;gap:.4em;flex:none;width:4.6em}
.story small{font-size:.8em;color:var(--text-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ring{display:block;width:4.6em;height:4.6em;border-radius:50%;padding:.22em;border:.2em solid var(--border)}
.ring.on{border-color:var(--purple)}
.ring img{border-radius:50%}
.scr--feed.play .ring.on{animation:ringpop .6s var(--ease) both}
.ring.on:nth-child(n){animation-delay:.2s}
@keyframes ringpop{from{transform:scale(.85);opacity:.4}}
.post{background:var(--card);margin:0 .8em;border-radius:1.2em;overflow:hidden}
.post__h{display:flex;align-items:center;gap:.8em;padding:.9em 1em}
.post__h b{font-size:1.05em}
.post__img{display:block;width:100%;aspect-ratio:4/3;max-height:14.5em;object-fit:cover;object-position:50% 70%}
.post__a{display:flex;gap:1em;padding:.9em 1em .2em}
.post__a .ico-s{width:2em;height:2em}
.liked{color:var(--purple-light)}
.scr--feed.play .liked{animation:heart .7s 1.2s var(--ease) both}
@keyframes heart{40%{transform:scale(1.35)}}
.post__likes{padding:.2em 1em 0;font-size:.95em;color:var(--text)}
.post__cap{padding:.3em 1em .6em;font-size:.95em}
.cms{display:grid;gap:.8em;padding:0 1em 1.1em}
.cm{display:flex;gap:.8em;align-items:flex-start;font-size:.95em}
.cm img{width:2.4em;height:2.4em;border-radius:50%;flex:none}
.cm p{background:var(--bg);border-radius:.4em 1em 1em 1em;padding:.55em .9em}
.cm b{display:block;font-size:.85em;color:var(--purple-light)}
.pnav{position:absolute;z-index:5;left:1em;right:1em;bottom:1.7em;height:3.7em;background:var(--card);border:1px solid var(--border);border-radius:999px;display:flex;align-items:center;justify-content:space-around;padding:0 .4em}
.pnav i{display:grid;place-items:center;width:3.4em;height:2.7em;border-radius:999px;color:var(--text-2);transition:background-color .3s,color .3s}
.pnav i.on{background:var(--purple);color:var(--text)}
.pnav svg{width:1.5em;height:1.5em}

/* dm */
.dm-h{display:flex;align-items:center;gap:.9em;padding:.6em 1.2em .9em;border-bottom:1px solid var(--divider);background:var(--bg);position:relative;z-index:4}
.dm-h .av{width:3.4em;height:3.4em;overflow:visible}
.dm-h .av img{border-radius:50%}
.dm-h b{display:block;font-size:1.1em}
.dm-h small{color:var(--green);font-size:.85em}
.dm-b{display:flex;flex-direction:column;gap:.7em;padding:1.2em 1em}
.bub{max-width:80%;padding:.7em 1em;border-radius:1.2em;font-size:1em}
.bub--them{background:var(--card);align-self:flex-start;border-bottom-left-radius:.3em}
.bub--me{background:var(--purple);align-self:flex-end;border-bottom-right-radius:.3em}
.dots{display:flex;gap:.35em;padding:.9em 1em;overflow:hidden}
.dots i{width:.6em;height:.6em;border-radius:50%;background:var(--text-2);animation:bounce 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{40%{transform:translateY(-.4em);background:var(--text)}}
.dm-in{position:absolute;left:1em;right:1em;bottom:1.7em;height:3.3em;display:flex;align-items:center;justify-content:space-between;padding:0 1.2em;background:var(--card);border:1px solid var(--border);border-radius:999px;color:var(--text-2);font-size:.95em}
.dm-in svg{color:var(--purple-light)}

/* profile */
.banner{height:8.5em;overflow:hidden;background:var(--purple-dim);margin-top:-.2em}
.banner img{width:100%;height:100%;object-fit:cover}
.scr--profile.play .banner img{animation:slowzoom 8s ease-out both}
@keyframes slowzoom{from{transform:scale(1.15)}}
.prof{padding:0 1.4em;display:grid;gap:.8em;justify-items:start}
.prof__n{display:flex;align-items:center;gap:.7em}
.prof__n b{font-size:1.5em}
.prof__bio{color:var(--text-2);font-size:.95em}
.stats{display:flex;gap:2.2em;padding:.5em 0}
.stats b{display:block;font-size:1.4em}
.stats small{color:var(--text-2)}
.chips{display:flex;flex-wrap:wrap;gap:.6em}
.chip{display:inline-flex;align-items:center;padding:.5em 1.1em;border-radius:999px;background:var(--card);border:1px solid var(--border);font-size:.95em;font-weight:600;transition:background-color .35s,border-color .35s}
.chip--s{padding:.2em .8em;font-size:.8em;background:var(--purple-dim);border-color:var(--purple);font-weight:500}
.chip.on,.chip.sel{background:var(--purple);border-color:var(--purple)}
.chips--s .chip{font-size:.85em;padding:.4em .9em}
.pbtn{display:grid;place-items:center;height:3.2em;padding:0 2em;border-radius:999px;background:var(--purple);font-weight:600;font-size:1em;border:0;color:inherit;font-family:inherit}
.pbtn--o{background:transparent;border:1px solid var(--border);width:100%;margin-top:.4em}

/* genres */
.pg-h{padding:1.6em 1.4em 1em;display:grid;gap:.4em}
.pg-h b{font-size:1.6em;line-height:1.15}
.pg-h span{color:var(--text-2);font-size:.95em}
.scr--genres .chips{padding:.4em 1.4em;gap:.7em}
.scr--genres .chip{font-size:1.05em;padding:.7em 1.3em}
.scr--genres .pbtn{position:absolute;left:1.4em;right:1.4em;bottom:2.2em}

/* phone sequencing */
.js .seq{opacity:0}
.js .play .seq{animation:pop .55s var(--ease) var(--d,0s) both}
.js .play .dots{animation:pop .4s var(--ease) var(--d) both,gone .2s linear var(--e) forwards}
@keyframes pop{from{opacity:0;transform:translateY(.8em) scale(.96)}to{opacity:1;transform:none}}
@keyframes gone{to{opacity:0;max-height:0;padding:0;margin:-.35em 0;transform:scale(.8)}}
.js .play .chip.seq{animation:pop .5s var(--ease) var(--d) both}


/* ===== brand, splash, top bar ===== */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand__img{width:36px;height:36px;border-radius:10px;object-fit:cover}
.topbar{position:fixed;inset:0 0 auto 0;z-index:50;height:64px;display:flex;align-items:center;padding:0 max(24px,env(safe-area-inset-left));transition:transform .35s var(--ease),background-color .25s,border-color .25s;border-bottom:1px solid transparent}
.topbar.is-solid{background:rgba(23,23,27,.9);border-bottom-color:var(--divider)}
.topbar.is-hidden{transform:translateY(-100%)}
main{padding-top:64px}
.splash{display:none}
.has-splash .splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg);animation:splashOut .5s ease 1.6s forwards}
.splash img{width:144px;height:144px;border-radius:32px;animation:logoIn .9s var(--ease) both}
@keyframes logoIn{from{opacity:0;transform:scale(.55)}60%{opacity:1}to{opacity:1;transform:scale(1)}}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
.has-splash .splash img{animation:logoIn .9s var(--ease) both,logoOut .5s ease 1.6s forwards}
@keyframes logoOut{to{transform:scale(1.15)}}

/* ===== floating dock ===== */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;padding:0 8px calc(12px + env(safe-area-inset-bottom));pointer-events:none}
.dock__in{position:relative;pointer-events:auto;max-width:100%;background:rgba(15,15,18,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.dock__list{position:relative;display:flex;align-items:center;gap:2px}
.dock__pill{position:absolute;left:0;top:6px;bottom:6px;width:0;border-radius:999px;background:linear-gradient(90deg,#7B2FBE,#6366F1);opacity:0;transition:transform .5s cubic-bezier(.34,1.45,.5,1),width .5s cubic-bezier(.34,1.45,.5,1),opacity .2s;will-change:transform,width}
.dock__a{position:relative;display:flex;align-items:center;justify-content:center;gap:0;height:44px;min-width:36px;padding:0 9px;border-radius:999px;text-decoration:none;color:#B4B4BE;font-weight:600;font-size:13px;line-height:1;white-space:nowrap;transition:color .2s,background-color .2s}
.dock__a svg{width:20px;height:20px;flex:none}
.dock__a span{display:block;max-width:0;overflow:hidden;opacity:0;transition:max-width .4s var(--ease),opacity .25s,margin .4s var(--ease)}
.dock__a:hover{color:#fff}
.dock__a[aria-current]{color:#fff}
.dock__a[aria-current] span{max-width:96px;opacity:1;margin-left:7px}
.dock__a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.dock__cta{margin-left:4px;background:var(--purple);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.dock__cta:hover{background:var(--purple-light)}
.dock__cta[aria-current]{background:#6366F1}
@media (min-width:860px){
  .dock__a{padding:0 14px;font-size:14px}
  .dock__a span{max-width:none;opacity:1;margin-left:8px}
  .dock__a[aria-current] span{max-width:none;margin-left:8px}
}
body{padding-bottom:0}
.site-footer{padding-bottom:calc(112px + env(safe-area-inset-bottom))}

/* ===== how it works: editorial timeline ===== */
.how{display:grid;gap:40px;align-items:start}
.steps{position:relative;display:grid}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px 24px;padding:0 0 56px;cursor:pointer}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:19px;top:60px;bottom:8px;width:1px;background:var(--divider)}
.step:last-child::before{display:none}
.step.is-done::before{background:var(--purple-light)}
.step__n{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:grid;place-items:center;font:700 13px/1 var(--font);letter-spacing:.04em;color:var(--text-2);transition:background-color .3s,border-color .3s,color .3s,transform .4s cubic-bezier(.34,1.45,.5,1)}
.step.is-active .step__n{background:var(--purple);border-color:var(--purple);color:#fff;transform:scale(1.12)}
.step.is-done .step__n{border-color:var(--purple-light);color:var(--purple-light)}
.step__k{display:block;font:600 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:12px}
.step h3{font-size:clamp(28px,5vw,40px);line-height:1.05;color:#6d6d78;transition:color .3s}
.step.is-active h3,.step:hover h3{color:var(--text)}
.step p.step__p,.step__b>p{color:var(--text-2);margin-top:14px;max-width:440px;font-size:17px}
.step:focus-visible{outline-offset:8px;border-radius:8px}
.how__phone{position:relative;display:flex;justify-content:center;order:-1}
.how__disc{position:absolute;left:50%;top:50%;width:min(340px,80vw);aspect-ratio:1;margin:-170px 0 0 -170px;border-radius:50%;background:var(--purple-dim)}
.how__phone .phone{position:relative}
@media (min-width:900px){
  .how{grid-template-columns:1.1fr .9fr;gap:80px}
  .step{padding-bottom:22vh;grid-template-columns:72px 1fr}
  .step:last-child{padding-bottom:12vh}
  .step__n{width:56px;height:56px;font-size:15px}
  .step::before{left:27px;top:80px;bottom:16px}
  .how__phone{order:0;position:sticky;top:120px}
}

/* ===== features: bento ===== */
.bento{display:grid;gap:12px;grid-template-columns:1fr}
.bt{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:260px;padding:24px;background:var(--bg);border:1px solid var(--divider);border-radius:20px;overflow:hidden;transition:border-color .25s,background-color .25s,opacity .5s var(--ease),transform .5s var(--ease)}
.bt:hover{border-color:var(--purple)}
.bt__t h3{font-size:20px}
.bt__t p{color:var(--text-2);font-size:15px;margin-top:8px;max-width:38ch}
.bt__ui{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;font-size:14px;line-height:1.35}
.bt--comments .bt__ui,.bt--dm .bt__ui,.bt--story .bt__ui,.bt--cast .bt__ui,.bt--prof .bt__ui{flex-direction:column;flex-wrap:nowrap}
.mc-cap{color:var(--text-2);padding-bottom:6px;border-bottom:1px solid var(--divider);width:100%}
.mc-cap b,.mc b{color:var(--text)}
.mc{display:flex;gap:10px;align-items:flex-start;color:var(--text-2);opacity:.999}
.mc img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.js .bt.in .mc{animation:mcIn .5s var(--ease) both}
.js .bt.in .mc:nth-of-type(1){animation-delay:.2s}.js .bt.in .mc:nth-of-type(2){animation-delay:.6s}.js .bt.in .mc:nth-of-type(3){animation-delay:1s}.js .bt.in .mc:nth-of-type(4){animation-delay:1.4s}
@keyframes mcIn{from{opacity:0;transform:translateY(8px)}}
.tdots{display:inline-flex;gap:4px;align-items:center;height:1em}
.tdots i{width:6px;height:6px;border-radius:50%;background:var(--purple-light);animation:td 1.2s ease-in-out infinite}
.tdots i:nth-child(2){animation-delay:.15s}.tdots i:nth-child(3){animation-delay:.3s}
@keyframes td{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.mb{max-width:80%;padding:9px 14px;border-radius:16px;background:var(--card);color:var(--text)}
.mb--me{align-self:flex-end;background:var(--purple);border-bottom-right-radius:4px}
.mb--them{border-bottom-left-radius:4px}
.sring{position:relative;width:76px;height:76px}
.sring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sring circle{fill:none;stroke-width:3}
.sring__bg{stroke:var(--divider)}
.sring__fg{stroke:var(--purple-light);stroke-linecap:round;stroke-dasharray:182;animation:ring 6s ease-in-out infinite}
@keyframes ring{0%{stroke-dashoffset:0}80%,100%{stroke-dashoffset:182}}
.sring img{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);border-radius:50%;object-fit:cover}
.sring__l{font-weight:700;color:var(--text)}
.sring__l small{display:block;font-weight:500;color:var(--text-2);font-size:13px}
.big{font-size:clamp(44px,7vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--text)}
.stack{display:flex}
.stack img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--bg);margin-left:-8px;transition:transform .3s var(--ease)}
.stack img:first-child{margin-left:0}
.bt:hover .stack img{transform:translateY(-4px)}
.bt:hover .stack img:nth-child(2){transition-delay:.04s}.bt:hover .stack img:nth-child(3){transition-delay:.08s}.bt:hover .stack img:nth-child(4){transition-delay:.12s}.bt:hover .stack img:nth-child(5){transition-delay:.16s}
.gc,.tp{padding:6px 14px;border-radius:999px;border:1px solid var(--border);color:var(--text-2);font-weight:600;font-size:14px;animation:sel 7s ease-in-out infinite;animation-delay:calc(var(--k)*.9s)}
@keyframes sel{0%,12%,100%{background:transparent;color:var(--text-2);border-color:var(--border)}20%,50%{background:var(--purple);color:#fff;border-color:var(--purple)}62%{background:transparent;color:var(--text-2);border-color:var(--border)}}
.pchip{display:flex;gap:12px;align-items:center;padding:10px 14px 10px 10px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.pchip img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.pchip b{display:flex;align-items:center;gap:8px;color:var(--text)}
.pchip em{font:500 12px/1 var(--font);font-style:normal;padding:3px 8px;border-radius:999px;background:var(--purple-dim);color:var(--text)}
.pchip small{display:block;color:var(--text-2);font-size:13px;margin-top:2px}
.shared{font:600 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--purple-light);display:flex;align-items:center;gap:8px}
.shared::before{content:"";width:24px;height:1px;background:var(--purple-light);transform-origin:left;animation:sh 3s var(--ease) infinite}
@keyframes sh{0%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
.tg{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.tg__l{font-weight:700;color:var(--text);margin-right:auto}
.tg__s{position:relative;display:grid;color:var(--text-2);font-weight:600;min-width:2em;text-align:right}
.tg__s>span{grid-area:1/1}
.tg__off{animation:tgoff 6s steps(1) infinite}
.tg__on{color:var(--purple-light);opacity:0;animation:tgon 6s steps(1) infinite}
@keyframes tgoff{0%{opacity:1}45%{opacity:0}90%{opacity:1}}
@keyframes tgon{0%{opacity:0}45%{opacity:1}90%{opacity:0}}
.tg__sw{position:relative;width:46px;height:26px;border-radius:999px;background:var(--divider);animation:swbg 6s ease-in-out infinite}
.tg__sw b{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;animation:swk 6s cubic-bezier(.34,1.45,.5,1) infinite}
@keyframes swk{0%,40%{transform:none}50%,90%{transform:translateX(20px)}100%{transform:none}}
@keyframes swbg{0%,40%{background:var(--divider)}50%,90%{background:var(--purple)}100%{background:var(--divider)}}
@media (min-width:640px){
  .bento{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .bento{grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(0,auto)}
  .bt--comments{grid-column:span 7;grid-row:span 2;min-height:440px;padding:32px}
  .bt--comments .bt__ui{gap:14px;font-size:16px}
  .bt--comments .mc img{width:36px;height:36px}
  .bt--dm{grid-column:span 5}
  .bt--story{grid-column:span 5}
  .bt--cast,.bt--genre,.bt--prof{grid-column:span 4}
  .bt--types{grid-column:span 7}
  .bt--spicy{grid-column:span 5}
  .bt--cast{background:var(--purple-dim);border-color:var(--purple-dim)}
  .bt--cast .bt__t p{color:#D8C8EC}
  .bt--cast .stack img{border-color:var(--purple-dim)}
}

/* ===== safety: rules + live demo ===== */
.safe{display:grid;gap:40px;align-items:start}
.rules{display:grid;border-top:1px solid var(--divider)}
.rule{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--divider)}
.rule__n{font:700 13px/1 var(--font);letter-spacing:.08em;color:var(--purple-light);padding-top:6px}
.rule h3{font-size:24px}
.rule p{color:var(--text-2);margin-top:8px;max-width:46ch}
.mod{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px;font-size:15px;overflow:hidden;min-height:380px}
.mod__bar{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--divider);font-weight:700}
.mod__live{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.mod__live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
.mod__cm{display:flex;gap:12px;align-items:flex-start;padding:16px 0;color:var(--text-2)}
.mod__cm img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.mod__cm b{color:var(--text)}
.mod__cm>div{flex:1;min-width:0}
.wd{display:inline-grid;color:var(--text)}
.wd>span{grid-area:1/1;transition:opacity .3s,filter .3s}
.wd__mask{opacity:0;color:var(--purple-light);font-weight:700}
[data-s="0"] .wd__raw{color:var(--red)}
[data-s="1"] .wd__raw,[data-s="2"] .wd__raw,[data-s="3"] .wd__raw,[data-s="4"] .wd__raw{opacity:0}
[data-s="1"] .wd__mask,[data-s="2"] .wd__mask,[data-s="3"] .wd__mask,[data-s="4"] .wd__mask{opacity:1}
.mod__rep{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:999px;font:600 13px/1 var(--font);color:var(--text-2);transition:background-color .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.mod__rep svg{width:14px;height:14px}
[data-s="3"] .mod__rep,[data-s="4"] .mod__rep{background:var(--red);border-color:var(--red);color:#fff}
[data-s="3"] .mod__rep{transform:scale(.94)}
.mod__qh{margin-top:4px;padding:14px 0 10px;border-top:1px solid var(--divider);font:600 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.mod__q{display:grid;gap:8px}
.q{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg);opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.q em{font-style:normal;color:var(--purple-light);font-weight:600;font-size:13px;white-space:nowrap}
[data-s="2"] .q1,[data-s="3"] .q1,[data-s="4"] .q1,[data-s="3"] .q2,[data-s="4"] .q2,[data-s="4"] .q3{opacity:1;transform:none}
.mod__toast{position:absolute;left:20px;right:20px;bottom:16px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:var(--red);color:#fff;font-weight:700;opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease),transform .4s cubic-bezier(.34,1.45,.5,1)}
.mod__toast svg{width:20px;height:20px}
[data-s="4"] .mod__toast{opacity:1;transform:none}
[data-s="4"] .q3{margin-bottom:56px}
@media (min-width:900px){
  .safe{grid-template-columns:1fr 1fr;gap:80px}
  .mod{position:sticky;top:120px}
}

/* responsive */
@media (min-width:600px){
  .toast{display:flex}
  .dl{padding:48px}
  .dl__art img{width:120px;height:160px}
  .site-footer__inner{grid-template-columns:auto 1fr auto;align-items:center;justify-items:start}
  .site-footer__copy{grid-column:1/-1}
}
@media (min-width:700px){.showcase{justify-content:center;overflow:visible;padding-inline:0;margin:0;gap:0}
  .showcase__item--c{order:0;margin:0 -24px;z-index:2}
  .showcase__item--l .par{transform:translateY(32px) rotate(-3deg)}
  .showcase__item--r .par{transform:translateY(32px) rotate(3deg)}
}
@media (min-width:900px){
  .hero{padding:80px 0 120px}
  .hero__grid{grid-template-columns:1.1fr .9fr}
  .dl{grid-template-columns:.8fr 1.2fr;padding:64px}
  .dl__copy{text-align:left}
  .dl__copy .sub{margin-inline:0}
  .section{padding:120px 0}
  .hero__stage{padding:16px 0 32px}
}
@media (max-width:599px){.toast--b{display:none}.hero__stage{padding-bottom:40px}.hero__disc,.hero__ring{margin-top:-190px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .seq{opacity:1;transform:none}
  .js .w>span{transform:none}
  .js .dots{display:none}
  .js .marquee__track{flex-wrap:wrap;width:auto;padding:0 24px;gap:16px}
  .js .marquee__track>*{margin:0}
  [data-clone]{display:none!important}
  .hero__ring{display:none}
  .has-splash .splash{display:none}
  .dock__pill{transition:none}
  .q{opacity:1;transform:none}
  .scr--feed .feed{transform:none}
}
@media (max-width:374px){.dock{padding-inline:4px}.dock__a{padding:0 6px;min-width:32px}.dock__a[aria-current] span{max-width:80px;margin-left:5px}}


/* ===== interactions: buttons, links, toast ===== */
button{font:inherit;color:inherit;cursor:pointer}
a[href],summary,.step,[data-share]{cursor:pointer}
.btn--primary:active{background:#6a25a6}
.btn--ghost:active{background:rgba(155,77,219,.14)}
.btn:focus-visible,.link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ico-b{width:20px;height:20px;flex:none}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:underline;text-decoration-thickness:1px}
.link:hover{text-decoration-thickness:2px}
.link:active{opacity:.7}
.link--btn{background:none;border:0;padding:0}
.fine-link{color:var(--purple-light);font-weight:600;text-underline-offset:3px}
.fine-link:hover{color:#fff}
.dock__a:active{transform:scale(.94)}
.dock__a:hover{background:rgba(255,255,255,.08)}
.dock__a[aria-current]:hover{background:transparent}
.site-footer__links a,.flink{text-underline-offset:4px}
.site-footer__links a:hover,.flink:hover{text-decoration:underline}
.flink{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;color:var(--text)}
.flink:hover{color:var(--purple-light)}
.dl__file{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:14px;font-size:15px;color:var(--text-2)}
.dl__file b{color:var(--text);font-weight:600}
.dl__file span{padding-left:12px;margin-left:12px;border-left:1px solid var(--border)}
.dl__row{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:8px}
.dl__row .link{margin-top:8px}
details.guide{margin-top:16px;background:transparent;border-color:var(--border)}
details.guide summary{min-height:48px;font-size:16px;padding:8px 20px}
.guide__ol{display:grid;gap:14px;padding:4px 20px 20px}
.guide__ol li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.guide__ol span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--purple-dim);font:700 13px/1 var(--font)}
.guide__ol p{padding:3px 0 0;font-size:15px;color:var(--text)}
.step{cursor:pointer}
.snack{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:300;max-width:min(420px,calc(100vw - 32px));padding:12px 20px;border-radius:999px;background:var(--card);border:1px solid var(--purple-light);color:var(--text);font-size:15px;line-height:1.35;text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:opacity .25s,transform .3s var(--ease),visibility 0s .3s;pointer-events:none}
.snack.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}

/* ===== features: clickable tiles ===== */
.bt{cursor:pointer}
.js .bt.rv.in:hover{transform:translateY(-4px)}
.bt:hover{border-color:var(--purple-light)}
.bt:active{border-color:var(--purple)}
.bt__open{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent}
.bt__open:focus-visible{outline:2px solid var(--purple-light);outline-offset:-2px}
.bt:has(.bt__open:focus-visible){border-color:var(--purple-light)}
.bt__more{position:absolute;right:16px;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:0;height:32px;padding:0 8px;border-radius:999px;background:var(--purple-dim);color:#fff;font:600 13px/1 var(--font);transition:background-color .2s,gap .25s var(--ease),padding .25s var(--ease)}
.bt__more em{font-style:normal;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .3s var(--ease),opacity .2s}
.bt__more svg{width:16px;height:16px}
.bt:hover .bt__more,.bt:has(.bt__open:focus-visible) .bt__more{background:var(--purple);gap:6px;padding:0 10px 0 12px}
.bt:hover .bt__more em,.bt:has(.bt__open:focus-visible) .bt__more em{max-width:80px;opacity:1}
@media (hover:none){.bt__more em{max-width:80px;opacity:1}.bt__more{gap:6px;padding:0 10px 0 12px}}
.bt__t{padding-right:44px}
.bt--cast .bt__more{background:var(--purple)}

/* ===== safety rows ===== */
.rule{position:relative;cursor:pointer;padding-right:56px;transition:background-color .2s,opacity .5s var(--ease),transform .5s var(--ease)}
.rule:hover{background:var(--surface)}
.rule:hover h3{color:var(--purple-light)}
.rule__open{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;background:transparent}
.rule__open:focus-visible{outline:2px solid var(--purple-light);outline-offset:-2px}
.rule__more{position:absolute;right:8px;top:50%;width:32px;height:32px;margin-top:-16px;display:grid;place-items:center;border-radius:50%;background:var(--purple-dim);transition:background-color .2s,transform .25s var(--ease)}
.rule__more svg{width:16px;height:16px}
.rule:hover .rule__more{background:var(--purple);transform:translateX(3px)}

/* ===== detail dialog ===== */
body.fm-lock{overflow:hidden}
.fm{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:16px}
.fm[hidden]{display:none}
.fm__bd{position:absolute;inset:0;background:rgba(8,8,10,.72);opacity:0;transition:opacity .25s}
.fm.is-open .fm__bd{opacity:1}
.fm__dlg{position:relative;display:flex;flex-direction:column;width:min(720px,100%);max-height:min(860px,100%);background:var(--surface);border:1px solid var(--border);border-radius:24px;overflow:hidden;opacity:0;transform:scale(.94) translateY(12px);transition:opacity .25s,transform .3s var(--ease)}
.fm.is-open .fm__dlg{opacity:1;transform:none}
.fm__dlg:focus{outline:none}
.fm__x{position:absolute;right:12px;top:12px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--border);transition:background-color .15s,border-color .15s}
.fm__x svg{width:20px;height:20px}
.fm__x:hover{background:var(--purple);border-color:var(--purple)}
.fm__x:focus-visible,.fm__b:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fm__scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.fm__stage{display:flex;justify-content:center;align-items:center;min-height:200px;padding:64px 24px 28px;background:var(--bg);border-bottom:1px solid var(--divider)}
.fm__stage>.bt{width:100%;max-width:440px;min-height:0;padding:0;border:0;background:transparent;overflow:visible;cursor:default;display:block;transform:none}
.fm__stage>.bt .bt__ui{font-size:16px;gap:12px;justify-content:center}
.fm__stage .mc img{width:36px;height:36px}
.fm__stage .big{font-size:72px}
.fm__stage .stack img{width:48px;height:48px}
.fm__stage .sring{width:112px;height:112px}
.fm__stage .gc,.fm__stage .tp{font-size:16px;padding:8px 18px}
.fm__stage .pchip img{width:56px;height:56px}
.fm__stage .tg{padding:18px 20px}
.fm__stage .mb{font-size:17px;padding:11px 18px}
.fm__stage .rmark{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:var(--purple-dim);color:#fff}
.fm__stage .rmark svg{width:52px;height:52px}
.fm__body{padding:28px 28px 8px}
.fm__body h2{font-size:clamp(28px,5vw,36px);margin-top:6px}
.fm__body p{color:var(--text);margin-top:14px;max-width:60ch}
.fm__list{display:grid;gap:10px;margin:20px 0 20px;padding:0}
.fm__list li{position:relative;padding-left:22px;color:var(--text-2);font-size:16px;line-height:1.5}
.fm__list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--purple-light)}
.fm__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--divider);background:var(--surface)}
.fm__b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--border);background:transparent;font-weight:600;font-size:15px;transition:background-color .15s,border-color .15s}
.fm__b svg{width:18px;height:18px}
.fm__b:hover{border-color:var(--purple-light);background:rgba(155,77,219,.14)}
.fm__b:active{background:rgba(155,77,219,.28)}
.fm__c{color:var(--text-2);font-size:14px}
.fm__body.swap{animation:fmSwap .3s var(--ease)}
@keyframes fmSwap{from{opacity:0;transform:translateY(8px)}}
@media (max-width:520px){.fm{padding:8px}.fm__b span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.fm__b{padding:0 14px}.fm__body{padding:24px 20px 4px}}
@media (prefers-reduced-motion:reduce){.fm__dlg{transform:none}.snack{transform:translate(-50%,0)}.js .bt.rv.in:hover{transform:none}}

/* ===== interactive demos ===== */
[hidden]{display:none!important}
.phone input{-webkit-user-select:text;user-select:text}
.ix-tag{position:absolute;z-index:8;display:grid;justify-items:center}
.ix-tag>*{grid-area:1/1}
.ix-try{font:700 11px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--purple);color:#fff;white-space:nowrap;pointer-events:none;box-shadow:0 0 0 0 rgba(155,77,219,.6);animation:tryPulse 2.4s ease-out infinite;transition:opacity .4s,visibility .4s}
@keyframes tryPulse{70%{box-shadow:0 0 0 8px rgba(155,77,219,0)}100%{box-shadow:0 0 0 0 rgba(155,77,219,0)}}
.ix-replay{opacity:0;visibility:hidden;min-height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);font:600 12px/1 var(--font);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;transition:opacity .4s,visibility .4s,border-color .15s}
.ix-replay:hover{border-color:var(--purple-light)}
.ix.is-touched>.ix-tag .ix-try,.ix.is-touched .mod__bar .ix-try{opacity:0;visibility:hidden;animation:none}
.ix.is-touched>.ix-tag .ix-replay,.ix.is-touched .mod__bar .ix-replay{opacity:1;visibility:visible}
.bt>.ix-tag{top:0;left:50%;transform:translateX(-50%)}
.bt>.ix-tag .ix-try,.bt>.ix-tag .ix-replay{border-radius:0 0 10px 10px}
.scr>.ix-tag{left:50%;bottom:6.2em;transform:translateX(-50%)}
.mod__bar .ix-tag{position:static}
button:focus-visible{outline:2px solid var(--purple-light);outline-offset:2px}
.scr button:focus-visible,.scr input:focus-visible{outline-offset:-2px}
.bump{display:inline-block;animation:bump .35s var(--ease)}
@keyframes bump{40%{transform:scale(1.4)}}

/* freeze autoplay once touched */
.js .touched.fz-all .seq,.js .touched .seq.fz-on{opacity:1;animation:none}
.js .touched .seq.fz-off,.js .touched .seq.dots{display:none}
.scr--feed.touched{display:flex;flex-direction:column}
.scr--feed.touched .app-h{flex:none}
.scr--feed.touched .feed{flex:1;min-height:0;overflow-y:auto;animation:none;scrollbar-width:none}
.scr--feed.touched .feed::-webkit-scrollbar{display:none}

/* feed phone */
.story{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.story .ring{transition:transform .2s var(--ease),border-color .3s}
.story:hover .ring{transform:scale(1.06)}
.story:active .ring{transform:scale(.94)}
.pa{display:grid;place-items:center;background:none;border:0;padding:.2em;margin:-.2em;border-radius:50%;color:inherit;cursor:pointer;transition:color .15s,transform .15s var(--ease)}
span.pa{cursor:default}
button.pa:hover{color:var(--purple-light)}
button.pa:active{transform:scale(.88)}
.post__likes{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.sp-t{display:inline-flex;align-items:center;gap:.5em;padding:.35em .8em .35em .65em;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-2);font-weight:600;font-size:.85em;line-height:1;cursor:pointer;transition:color .2s,border-color .2s,background-color .2s}
.sp-t::before{content:"";width:.7em;height:.7em;border-radius:50%;background:var(--divider);transition:background-color .2s}
.sp-t:hover{border-color:var(--gold);color:#fff}
.sp-t[aria-pressed="true"]{color:var(--gold);border-color:var(--gold);background:rgba(255,184,0,.1)}
.sp-t[aria-pressed="true"]::before{background:var(--gold)}
.mc-cap .sp-t{font-size:13px}
.ct.hot{color:var(--gold)}
.lk{display:inline-flex;align-items:center;gap:.3em;margin-left:auto;align-self:center;flex:none;min-height:1.9em;padding:.2em .4em;border:0;border-radius:999px;background:none;color:var(--text-2);font-size:.85em;line-height:1;cursor:pointer;transition:color .15s,transform .15s var(--ease)}
.lk svg{width:1.35em;height:1.35em}
.lk:hover{color:var(--text)}
.lk:active{transform:scale(.9)}
.lk[aria-pressed="true"]{color:var(--purple-light)}
.cm p{min-width:0}
.cform{display:flex;gap:.6em;align-items:center;margin:0 1em 1em;padding:.3em .3em .3em 1em;background:var(--bg);border:1px solid var(--border);border-radius:999px;transition:border-color .2s}
.cform:focus-within{border-color:var(--purple-light)}
.cform__i{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;font-size:.95em;outline:0;padding:.4em 0}
.cform__i::placeholder,.dm-in input::placeholder{color:var(--text-2)}
.cform__b{padding:.55em 1em;border:0;border-radius:999px;background:var(--purple);color:#fff;font-weight:600;font-size:.9em;line-height:1;cursor:pointer;transition:background-color .15s}
.cform__b:hover{background:var(--purple-light)}
.cform__b:active{background:#6a25a6}
.cform--t{width:100%;margin:0;font-size:14px}
.cform--t .cform__i{font-size:15px}
.cform--t .cform__b{display:grid;place-items:center;width:36px;height:36px;padding:0}
.cform--t .cform__b svg{width:18px;height:18px}

/* dm phone */
.scr--dm{display:flex;flex-direction:column}
.scr--dm .dm-h{flex:none}
.scr--dm .dm-b{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
.scr--dm .dm-b::-webkit-scrollbar{display:none}
.scr--dm .dm-in{position:relative;left:auto;right:auto;bottom:auto;flex:none;margin:0 1em 1.7em;gap:.4em;padding:0 .5em 0 1.2em;transition:border-color .2s}
.dm-in:focus-within{border-color:var(--purple-light)}
.dm-in input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;outline:0;padding:0}
.dm-send{display:grid;place-items:center;width:2.4em;height:2.4em;border:0;border-radius:50%;background:none;color:var(--purple-light);cursor:pointer;transition:background-color .15s,transform .15s var(--ease)}
.dm-send:hover{background:var(--purple-dim)}
.dm-send:active{transform:scale(.9)}
.dm-send svg{width:1.5em;height:1.5em}
.dm-b .bub{overflow-wrap:anywhere}
@media (pointer:coarse){.cform__i,.dm-in input,.bio-i{font-size:16px}}

/* profile phone */
.pron{cursor:default;font-family:inherit;color:inherit}
.prof.is-edit .pron{border-style:dashed;cursor:pointer}
.chips--s .chip{cursor:default;font-family:inherit;color:inherit}
.prof.is-edit .chips--s .chip{cursor:pointer}
.prof.is-edit .chips--s .chip:hover{border-color:var(--purple-light)}
.bio-i{width:100%;background:var(--card);border:1px solid var(--purple-light);border-radius:.8em;color:var(--text);font:inherit;font-size:.95em;padding:.5em .8em;outline:0}
.pbtn{cursor:pointer;transition:background-color .15s,border-color .15s,transform .15s var(--ease)}
.pbtn:hover{background:var(--purple-light)}
.pbtn--o:hover{background:transparent;border-color:var(--purple-light)}
.pbtn:active{transform:scale(.97)}
.pbtn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.pg-c{color:var(--purple-light);font-weight:600;font-size:.9em}
button.chip{font-family:inherit;color:inherit;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--purple);border-color:var(--purple)}
.scr--genres .chip:hover{border-color:var(--purple-light)}
.scr--genres .chip:active{transform:scale(.95)}

/* story viewer */
.sv{--top:14px;position:absolute;inset:0;z-index:9;border-radius:inherit;overflow:hidden;background:#000;color:#fff;font-size:15px;animation:svIn .25s var(--ease)}
.scr>.sv{--top:4.4em;font-size:1em}
@keyframes svIn{from{opacity:0;transform:scale(.96)}}
.sv__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.sv::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.55),transparent 30%,transparent 55%,rgba(0,0,0,.75));pointer-events:none}
.sv__top{position:absolute;z-index:3;left:0;right:0;top:0;padding:var(--top) 12px 0}
.sv__bars{display:flex;gap:4px}
.sv__bars i{position:relative;flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.sv__bars i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.sv__bars i.done::after{transform:none}
.sv__bars i.run::after{animation:svfill 3.2s linear forwards}
@keyframes svfill{to{transform:scaleX(1)}}
.sv__h{display:flex;align-items:center;gap:.6em;margin-top:.7em;font-weight:700}
.sv__f{margin-left:auto;padding:.4em .9em;border-radius:999px;border:1px solid rgba(255,255,255,.75);background:transparent;color:#fff;font-weight:600;font-size:.85em;line-height:1;cursor:pointer}
.sv__f[aria-pressed="true"]{background:var(--purple);border-color:var(--purple)}
.sv__x{display:grid;place-items:center;width:2.4em;height:2.4em;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;cursor:pointer}
.sv__n+.sv__x{margin-left:auto}
.sv__x svg{width:1.3em;height:1.3em}
.sv__x:hover{background:var(--purple)}
.sv__t{position:absolute;z-index:2;top:22%;bottom:22%;width:38%;padding:0;border:0;background:transparent;cursor:pointer}
.sv__t--p{left:0}.sv__t--n{right:0}
.sv__c{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:1em 1.2em 1.8em;font-weight:600;line-height:1.35;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.fm__stage{position:relative}
.fm__stage .sv{font-size:16px}

/* bento tiles */
.bt__ui{position:relative;z-index:3;pointer-events:none}
.bt__ui button,.bt__ui input,.bt__ui .dmlog,.bt__ui .cast-i{pointer-events:auto}
.js .bt.is-touched.rv.in:hover{transform:none}
.dmlog{display:flex;flex-direction:column;gap:8px;width:100%;max-height:150px;overflow-y:auto;scrollbar-width:thin}
.dmlog .mb{overflow-wrap:anywhere}
.ix.is-touched .mb--auto{display:none}
.mc-cap{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mc p{min-width:0}
.sring{padding:0;border:0;background:none;cursor:pointer;flex:none}
.sring img{transition:transform .25s var(--ease)}
.sring:hover img{transform:scale(1.06)}
.ix.is-touched .sring__fg{animation:none;stroke-dashoffset:0}
.sring.seen .sring__fg,.ix.is-touched .sring.seen .sring__fg{animation:none;stroke-dashoffset:182}
.stack .av-b{margin-left:-8px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.stack .av-b:first-child{margin-left:0}
.stack .av-b img{margin:0}
.bt:hover .stack img{transform:none}
.bt:hover .stack .av-b img{transform:translateY(-4px)}
.bt:hover .stack .av-b:nth-child(2) img{transition-delay:.04s}.bt:hover .stack .av-b:nth-child(3) img{transition-delay:.08s}.bt:hover .stack .av-b:nth-child(4) img{transition-delay:.12s}.bt:hover .stack .av-b:nth-child(5) img{transition-delay:.16s}
.stack .av-b[aria-pressed="true"] img{border-color:var(--purple-light);transform:translateY(-6px)}
.cast-i{display:flex;align-items:center;flex-wrap:wrap;gap:10px;width:100%;min-height:32px;font-size:14px;color:#D8C8EC}
.cast-i b{color:#fff}
.fol{padding:6px 14px;border-radius:999px;border:1px solid #fff;background:transparent;color:#fff;font:600 13px/1 var(--font);cursor:pointer;transition:background-color .15s,color .15s}
.fol[aria-pressed="true"]{background:#fff;color:var(--purple-dim)}
.fol:hover{background:rgba(255,255,255,.18)}
.fol[aria-pressed="true"]:hover{background:#fff}
button.gc,button.tp{background:transparent;font:600 14px/1.35 var(--font);cursor:pointer;transition:border-color .15s,transform .15s var(--ease)}
button.gc:hover,button.tp:hover{border-color:var(--purple-light);color:#fff}
button.gc:active,button.tp:active{transform:scale(.95)}
.gc[aria-pressed="true"],.tp[aria-pressed="true"]{background:var(--purple);color:#fff;border-color:var(--purple)}
.ix.is-touched .gc,.ix.is-touched .tp{animation:none}
.gc-c,.tp-q{flex-basis:100%;width:100%;min-height:1.4em;margin-top:4px;color:var(--text-2);font-size:14px}
.tp-q{color:var(--text)}
.pchip .pr-c{font:500 12px/1 var(--font);padding:3px 8px;border-radius:999px;background:var(--purple-dim);color:#fff;border:1px solid transparent;cursor:pointer}
.pchip .pr-c:hover{border-color:var(--purple-light)}
.pchip .bio-c{display:block;padding:2px 0 0;border:0;background:none;color:var(--text-2);font-size:13px;line-height:1.35;text-align:left;cursor:pointer}
.pchip .bio-c:hover{color:var(--text);text-decoration:underline dotted}
button.tg{font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .2s}
button.tg:hover{border-color:var(--purple-light)}
.tg__off,.tg__on,.tg__sw,.tg__sw b{animation:none}
.tg__sw{transition:background-color .25s}
.tg__sw b{transition:transform .3s cubic-bezier(.34,1.45,.5,1)}
.tg[aria-checked="true"] .tg__off{opacity:0}
.tg[aria-checked="true"] .tg__on{opacity:1}
.tg[aria-checked="true"] .tg__sw{background:var(--purple)}
.tg[aria-checked="true"] .tg__sw b{transform:translateX(20px)}
.sp-demo{display:grid;gap:10px;width:100%}
.fm__stage>.bt .dmlog{max-height:220px}

/* safety demo */
.mod__rep{background:transparent;cursor:pointer}
.mod__rep:hover{border-color:var(--purple-light);color:#fff}
.mod__rep:disabled{opacity:.65;cursor:default}
.mod__rep[aria-expanded="true"]{border-color:var(--purple-light);color:#fff}
.mod__pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-4px 0 12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.mod__pick span{flex-basis:100%;color:var(--text-2);font-size:13px}
.mod__pick button{min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:transparent;font:600 13px/1 var(--font)}
.mod__pick button:hover{border-color:var(--purple-light);background:rgba(155,77,219,.14)}
.mod__pick .cancel{color:var(--text-2);border-color:transparent}
.mod__ok{margin:-4px 0 12px;padding:10px 14px;border-radius:12px;background:rgba(76,175,80,.14);border:1px solid var(--green);font-size:14px;outline:0}
.mod__gone{font-style:italic}
.ftest{margin:4px 0 8px;padding-top:14px;border-top:1px solid var(--divider)}
.fm__stage>.ftest{width:100%;max-width:460px;margin:0;padding:0;border:0}
.ft{display:grid;gap:10px}
.ft__l{display:grid;gap:6px;font:600 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.ft__i{width:100%;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:400 16px/1.2 var(--font);letter-spacing:0;text-transform:none}
.ft__i:focus-visible{outline:2px solid var(--purple-light);outline-offset:1px}
.ft__m{display:inline-flex;justify-self:start;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--bg)}
.ft__m button{min-height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:600 14px/1 var(--font);transition:background-color .2s,color .2s}
.ft__m button:hover{color:#fff}
.ft__m button[aria-pressed="true"]{background:var(--purple);color:#fff}
.ft__o{min-height:48px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--divider);color:var(--text);overflow-wrap:anywhere;transition:border-color .2s}
.ft__o.is-block{border-color:var(--red);color:#ff8f8c}
.ft__o.is-flag{border-color:var(--gold)}
.fx-m{color:var(--purple-light);font-weight:700;letter-spacing:.06em}
.fx-f{background:rgba(255,184,0,.18);border-bottom:2px solid var(--gold);border-radius:2px}
.ft__n{margin:0;font-weight:600;font-size:14px;color:var(--text)}
.ft__x{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
.ft__x button{min-height:36px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text);font:500 13px/1 var(--font)}
.ft__x button:hover{border-color:var(--purple-light)}
.ft__x button:focus-visible,.ft__m button:focus-visible{outline:2px solid var(--purple-light);outline-offset:2px}
.ft__o.is-help{border-color:var(--green)}
.ft__help{padding:12px 14px;border-radius:12px;background:rgba(76,175,80,.14);border:1px solid var(--green);font-size:14px}
.ft__help[hidden]{display:none}
.ft__help p{margin:6px 0 0}
.ft__help a{color:var(--purple-light);text-decoration:underline;text-underline-offset:2px}
.site-footer__disc{grid-column:1/-1;margin:0;color:var(--text-2);font-size:13px}
.ft__s{min-height:1.5em;color:var(--text-2);font-size:14px}
.ft__r{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ft__h{font-size:13px;color:var(--text-2)}
.ft__b{min-height:40px;padding:0 20px;border:0;border-radius:999px;background:var(--purple);color:#fff;font-weight:600;transition:background-color .15s}
.ft__b:hover{background:var(--purple-light)}
.q.qd{flex-wrap:wrap;align-items:center}
.q__t{display:flex;justify-content:space-between;gap:12px;width:100%}
.q__a{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.q__a button{min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:transparent;font:600 13px/1 var(--font);transition:background-color .15s,border-color .15s}
.q__a button:hover{border-color:var(--purple-light);background:rgba(155,77,219,.14)}
.q__a [data-a="ban"]:hover{background:var(--red);border-color:var(--red)}
.q.st-banned em{color:#ff8f8c}
.q--log{border-style:dashed}
.mod.is-touched .q{opacity:1;transform:none}
.mod.is-touched .q.st-dismissed{opacity:.6}
.mod.is-touched .mod__q{padding-bottom:64px}
.mod:not(.is-touched) .mod__undo{display:none}
.mod__undo{margin-left:auto;padding:6px 14px;border:0;border-radius:999px;background:rgba(255,255,255,.22);color:#fff;font:700 13px/1 var(--font);cursor:pointer}
.mod__undo:hover{background:rgba(255,255,255,.34)}
.mod.is-touched .mod__toast{background:var(--purple)}
.mod.is-touched .mod__toast.is-ban{background:var(--red)}
.mod.is-touched .mod__toast.on{opacity:1;transform:none}
.mod.is-touched .mod__toast:not(.on){visibility:hidden}

/* hero dots as buttons */
.hero__dots{gap:0}
.hero__dots button{display:block;padding:10px 4px;border:0;background:none;cursor:pointer}
.hero__dots button:focus-visible{outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.ix-try{animation:none}}