.badge{border:1px solid color-mix(in srgb, var(--cobalt) 40%, var(--line));background:color-mix(in srgb, var(--cobalt) 12%, var(--bg));max-width:100%;color:var(--text);border-radius:999px;align-items:center;gap:10px;margin-bottom:22px;padding:6px 14px 6px 6px;font-size:.92rem;text-decoration:none;transition:border-color .2s,background .2s;display:inline-flex}.badge:hover{border-color:var(--cobalt);background:color-mix(in srgb, var(--cobalt) 20%, var(--bg))}.badge>span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.badge__tag{background:var(--btn-bg);color:var(--btn-text);font:700 .75rem var(--body);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;flex:none;padding:3px 10px}.badge svg{color:var(--link);flex:none;transition:transform .2s}.badge:hover svg{transform:translate(3px)}.stats{border-radius:var(--r);background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;margin-top:40px;display:grid;overflow:hidden}.stat{background:var(--bg);flex-direction:column;gap:6px;padding:26px 24px;display:flex}.stat b{font:800 clamp(2.2rem, 4.6vw, 3.2rem)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:linear-gradient(100deg, var(--text), var(--link));color:#0000;-webkit-background-clip:text;background-clip:text}.stat span{color:var(--text-2);font-size:.95rem}.features>.eyebrow{margin-bottom:14px}.chapter{background:radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--cobalt) 16%, transparent), transparent 70%), var(--bg);border-top:1px solid var(--line);padding:clamp(80px,11vw,150px) 0 clamp(40px,6vw,80px);position:relative}.chapter__head{text-align:center;justify-items:center;display:grid}.chapter__title{letter-spacing:-.045em;font-size:clamp(2.6rem,7.5vw,6rem);font-weight:800;line-height:.95}.chapter__lede{max-width:52ch;color:var(--text-2);margin-top:22px;font-size:clamp(1.05rem,1.8vw,1.25rem)}.scrolly{gap:32px;margin-top:clamp(40px,6vw,80px);display:grid}.scrolly__stage{display:none}.step{padding:8px 0 40px}.step h3{margin-bottom:16px;font-size:clamp(1.7rem,3.2vw,2.4rem)}.step p:not(.step__num){color:var(--text-2);max-width:46ch}.step__num{font:700 .85rem var(--body);letter-spacing:.14em;color:var(--link);margin-bottom:14px}.step__media{margin-top:28px}@media (width>=960px){.scrolly{grid-template-columns:7fr 5fr;align-items:start;gap:64px}.scrolly__stage{display:block;position:sticky;top:calc(50vh - min(22vw,250px))}.scrolly__frames{display:grid}.scrolly__frames>.shot{opacity:0;grid-area:1/1;transition:opacity .55s,transform .7s cubic-bezier(.2,.7,.2,1);transform:scale(.985)translateY(10px)}.scrolly__frames>.shot.is-active{opacity:1;transform:none}.scrolly__dots{justify-content:center;gap:8px;margin:18px 0 0;padding:0;list-style:none;display:flex}.scrolly__dots li{background:var(--line);border-radius:99px;width:8px;height:8px;transition:width .35s cubic-bezier(.2,.7,.2,1),background .3s}.scrolly__dots li.is-active{background:var(--cobalt);width:28px}.step{opacity:.35;flex-direction:column;justify-content:center;min-height:78vh;padding:0;transition:opacity .4s;display:flex}.step.is-active{opacity:1}.step__media{display:none}}.demo-wrap{background:var(--bg-2);border-block:1px solid var(--line);padding:clamp(80px,10vw,140px) 0;overflow:hidden}.demo__head{max-width:760px}.demo__lede{color:var(--text-2);max-width:54ch;margin-top:18px}.demo{box-shadow:var(--shadow);color:#eff3fa;isolation:isolate;background:radial-gradient(80% 90% at 15% 20%,#4c7eff52,#0000 70%),#0b0f16;border-radius:28px;gap:24px;margin-top:clamp(36px,5vw,56px);padding:clamp(18px,3vw,36px);display:grid}:root[data-theme=light] .demo{background:radial-gradient(80% 90% at 15% 20%,#4c7eff73,#0000 70%),#121a28}.demo__card{align-content:start;gap:18px;display:grid}.demo__cover{aspect-ratio:1;width:min(100%,340px);transform:scale(var(--cover-scale,.94));border-radius:18px;transition:transform .5s cubic-bezier(.34,1.4,.5,1);overflow:hidden;box-shadow:0 30px 60px -24px #000c}.demo.is-playing .demo__cover{--cover-scale:1}.demo__cover svg{width:100%;height:100%;display:block}.demo__moon{transform-origin:150px 150px;animation:6s ease-in-out infinite paused moon}.demo.is-playing .demo__moon{animation-play-state:running}@keyframes moon{50%{transform:translate(14px,8px)scale(1.04)}}.demo__title{font:700 1.35rem var(--display);letter-spacing:-.02em;align-items:center;gap:10px;display:flex}.demo__artist{color:#a9b6cc;font-size:.95rem}.eq{align-items:flex-end;gap:2px;width:16px;height:14px;display:inline-flex}.eq i{background:#a7c3ff;border-radius:2px;flex:1;height:30%}.demo.is-playing .eq i{animation:.9s ease-in-out infinite eq}.demo.is-playing .eq i:nth-child(2){animation-duration:.75s;animation-delay:-.3s}.demo.is-playing .eq i:nth-child(3){animation-duration:1.05s;animation-delay:-.6s}@keyframes eq{0%,to{height:25%}50%{height:100%}}.seek{cursor:pointer;touch-action:none;--p:0;outline:none;height:28px;position:relative}.seek__track{background:#a9b6cc40;border-radius:99px;height:4px;transition:height .25s cubic-bezier(.34,1.5,.5,1);position:absolute;top:50%;left:0;right:0;overflow:hidden;transform:translateY(-50%)}.seek__fill{height:100%;width:calc(var(--p) * 100%);border-radius:inherit;background:#a7c3ff}.seek__thumb{top:50%;left:calc(var(--p) * 100%);background:#fff;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;transition:transform .25s cubic-bezier(.34,1.5,.5,1);position:absolute;transform:scale(0);box-shadow:0 2px 8px #00000080}.seek:hover .seek__thumb,.seek:focus-visible .seek__thumb,.seek.is-dragging .seek__thumb{transform:scale(1)}.seek.is-dragging .seek__track,.seek:focus-visible .seek__track{height:10px}.seek__bubble{bottom:calc(100% + 4px);left:calc(var(--p) * 100%);color:#0b1020;font:600 .8rem var(--body);font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;background:#fff;border-radius:8px;padding:3px 8px;transition:opacity .2s,transform .25s cubic-bezier(.34,1.5,.5,1);position:absolute;transform:translate(-50%)translateY(6px)scale(.8)}.seek.is-dragging .seek__bubble{opacity:1;transform:translate(-50%)translateY(0)scale(1)}.seek:focus-visible{outline-offset:4px;border-radius:8px;outline:2px solid #a7c3ff}.demo__times{color:#a9b6cc;font-variant-numeric:tabular-nums;justify-content:space-between;font-size:.85rem;display:flex}.demo__transport{justify-content:center;align-items:center;gap:22px;display:flex}.demo__btn{color:#eff3fa;cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;width:48px;height:48px;transition:background .2s,transform .2s;display:grid}.demo__btn:hover{background:#ffffff14}.demo__btn:active{transform:scale(.9)}.demo__play{color:#0b1020;cursor:pointer;background:#fff;border:0;border-radius:50%;place-items:center;width:72px;height:72px;transition:transform .35s cubic-bezier(.34,1.6,.5,1);display:grid;box-shadow:0 12px 30px -10px #a7c3ffb3}.demo__play:hover{transform:scale(1.05)}.demo__play:active{transform:scale(.92)}.demo__btn:focus-visible,.demo__play:focus-visible{outline-offset:3px;outline:2px solid #a7c3ff}.pp{width:24px;height:26px;margin-left:4px;transition:margin .3s cubic-bezier(.34,1.4,.5,1);position:relative}.pp i{background:currentColor;width:50%;transition:clip-path .34s cubic-bezier(.34,1.4,.5,1);position:absolute;top:0;bottom:0}.pp i:first-child{clip-path:polygon(0 0,100% 25%,100% 75%,0 100%);left:0}.pp i:last-child{clip-path:polygon(0 25%,100% 50%,100% 50%,0 75%);right:0}.demo.is-playing .pp{margin-left:0}.demo.is-playing .pp i:first-child{clip-path:polygon(10% 0,72% 0,72% 100%,10% 100%)}.demo.is-playing .pp i:last-child{clip-path:polygon(28% 0,90% 0,90% 100%,28% 100%)}.demo__lyrics{height:clamp(300px,46vw,440px);position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 22% 78%,#0000);mask-image:linear-gradient(#0000,#000 22% 78%,#0000)}.lyrics{will-change:transform;margin:0;padding:0;list-style:none}.lyrics button{text-align:left;width:100%;font:700 clamp(1.35rem, 2.6vw, 2.1rem)/1.25 var(--display);letter-spacing:-.02em;color:#eff3fa47;cursor:pointer;transform-origin:0;background:0 0;border:0;padding:8px 0;transition:color .35s,transform .45s cubic-bezier(.34,1.3,.5,1);display:block;transform:scale(.96)}.lyrics button:hover{color:#eff3fab3}.lyrics button:focus-visible{outline-offset:2px;border-radius:6px;outline:2px solid #a7c3ff}.lyrics li.is-current button{color:#fff;transform:none}.lyrics li.is-past button{color:#eff3fa73}.demo__note{color:var(--text-2);max-width:70ch;margin-top:18px;font-size:.9rem}@media (width>=900px){.demo{grid-template-columns:minmax(280px,380px) 1fr;align-items:center;gap:56px}}.more{padding:clamp(80px,10vw,130px) 0 40px}.more .section-title{margin-bottom:40px}.tile__icon{background:color-mix(in srgb, var(--cobalt) 16%, transparent);width:42px;height:42px;color:var(--link);border-radius:12px;place-items:center;margin-bottom:16px;display:inline-grid}.tile{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .25s}.tile:hover{border-color:color-mix(in srgb, var(--cobalt) 45%, var(--line));transform:translateY(-4px)}@media (width>=760px){.bento{grid-template-columns:repeat(3,1fr)}.tile--wide,.bento .tile--accent{grid-column:span 2}}.stats+.features{padding-top:clamp(64px,8vw,110px)}.notes-box{max-width:820px;margin-bottom:20px;position:relative}.notes-box .notes{margin-bottom:0}.notes-box.is-clamped .notes{max-height:520px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,#0000);mask-image:linear-gradient(#000 70%,#0000)}.notes__more{margin-top:14px}@media (prefers-reduced-motion:reduce){.scrolly__frames>.shot,.step,.tile,.demo__cover,.lyrics button,.pp,.pp i,.seek__track,.seek__thumb,.seek__bubble,.badge svg{transition:none!important}.demo .eq i,.demo__moon{animation:none!important}}@media (width<=480px){.badge{font-size:.82rem}.stats{grid-template-columns:1fr 1fr}.stat{padding:20px 16px}}.hero h1{font-size:clamp(2.9rem,7.4vw,6.4rem)}.hero h1 .line{display:block}.pillars{gap:16px;margin-top:clamp(28px,4vw,48px);display:grid}.pillar{border:1px solid var(--line);background:linear-gradient(140deg, color-mix(in srgb, var(--cobalt) 16%, var(--bg-2)), var(--bg-2) 62%);color:var(--text);border-radius:24px;flex-direction:column;gap:14px;padding:clamp(24px,3vw,36px);text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .3s;display:flex;position:relative;overflow:hidden}.pillar--b{background:linear-gradient(140deg, color-mix(in srgb, #9b7bff 18%, var(--bg-2)), var(--bg-2) 62%)}.pillar:hover{border-color:color-mix(in srgb, var(--cobalt) 50%, var(--line));box-shadow:0 24px 50px -30px var(--glow);transform:translateY(-4px)}.pillar__num{font:800 clamp(6rem, 12vw, 9rem)/1 var(--display);letter-spacing:-.06em;color:color-mix(in srgb, var(--text) 7%, transparent);pointer-events:none;position:absolute;top:-18px;right:22px}.pillar h2{flex-wrap:wrap;align-items:center;gap:10px 12px;font-size:clamp(1.6rem,3vw,2.3rem);display:flex}.pillar h2 .pill{margin:0;font-size:.75rem}.pillar p{color:var(--text-2);max-width:46ch}.pillar__chips{flex-wrap:wrap;gap:8px;display:flex}.pillar__chips li{border:1px solid var(--line);background:color-mix(in srgb, var(--bg) 60%, transparent);border-radius:999px;padding:6px 12px;font-size:.88rem}.pillar__go{color:var(--link);align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-weight:600;display:inline-flex}.pillar__go svg{transition:transform .2s}.pillar:hover .pillar__go svg{transform:translate(4px)}@media (width>=860px){.pillars{grid-template-columns:1fr 1fr}}.section-lede{color:var(--text-2);max-width:52ch;margin-top:16px;font-size:clamp(1.05rem,1.8vw,1.25rem)}.features .section-lede{margin-bottom:clamp(48px,7vw,96px)}.features .section-title+.section-lede{margin-top:18px}@media (prefers-reduced-motion:reduce){.pillar,.pillar__go svg{transition:none!important}}
