html{scroll-behavior:smooth}body{background:var(--bg);overflow-x:hidden}.wrap{width:min(1200px,100% - 40px);margin-inline:auto}.hero{isolation:isolate;background:radial-gradient(1200px 760px at 50% 45%, #4a1693 0%, #22094f 50%, var(--bg) 85%);place-items:center;min-height:100svh;padding:96px 20px 104px;display:grid;position:relative;overflow:hidden}@media (prefers-color-scheme:light){.hero{background:radial-gradient(1200px 760px at 50% 45%, #ffe2f8 0%, #e7ddff 50%, var(--bg) 85%)}}.rays{z-index:-3;opacity:.9;background:repeating-conic-gradient(from 0deg at 50% 50%, var(--ray-a) 0 6deg, transparent 6deg 15deg, var(--ray-b) 15deg 21deg, transparent 21deg 30deg);animation:180s linear infinite spin;position:absolute;inset:-60%}@keyframes spin{to{transform:rotate(1turn)}}.collage{z-index:-2;pointer-events:none;transform:translate3d(var(--px,0px), var(--py,0px), 0);transition:transform .9s cubic-bezier(.2,.7,.2,1);position:absolute;inset:-8%}.collage .drift{animation:46s ease-in-out infinite alternate drift;position:absolute;inset:0}.collage.paused .drift{animation-play-state:paused}@keyframes drift{0%{transform:translate(-1.6%,-1.2%)rotate(-.6deg)}to{transform:translate(1.6%,1.2%)rotate(.6deg)}}.collage .t{transform:translate(-50%, -50%) rotate(var(--r));filter:drop-shadow(0 14px 26px #0803208c);position:absolute}.collage .t img,.collage .t video{width:100%;height:auto;display:block}.collage .t video{opacity:0;transition:opacity .6s;position:absolute;inset:0}.collage .t.on video{opacity:1}.hero:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(ellipse 74% 78% at 50% 51%, rgba(var(--glow), 1) 0%, rgba(var(--glow), .95) 34%, rgba(var(--glow), .8) 46%, rgba(var(--glow), .55) 62%, rgba(var(--glow), .28) 78%, rgba(var(--glow), .1) 90%, rgba(var(--glow), 0) 100%);position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.rays,.collage .drift{animation:none}.collage{transition:none}}.sparkle{z-index:-1;background:#fff;border-radius:50%;width:3px;height:3px;position:absolute;box-shadow:0 0 8px 2px #fff8}.hero .copy{text-align:center;max-width:760px}.hero h1{width:min(720px,100%);margin:0 auto;font-size:0}.hero .line{text-shadow:0 2px 18px rgba(var(--glow), .9);margin:18px 0 40px;font-family:Fredoka;font-size:clamp(22px,2.8vw,34px);font-weight:600;font-stretch:115%;line-height:1.15}.cta{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:22px;display:flex}.cta .mac{flex-direction:column;align-items:center;gap:14px;display:flex}.pill{color:#fff;letter-spacing:.01em;white-space:nowrap;background:linear-gradient(#ff8be8,#ff2ad4 48%,#c40fa8 52%,#ff4fd8);border-radius:999px;align-items:center;gap:12px;padding:18px 32px;font-family:Fredoka;font-size:20px;font-weight:700;font-stretch:125%;text-decoration:none;transition:transform .15s,box-shadow .15s;display:inline-flex;box-shadow:0 0 0 3px #fff,0 0 0 5px #2a0a6a,0 10px 0 5px #2a0a6a,0 18px 40px #ff2ad473}a.pill:hover{transform:translateY(-2px)}a.pill:active{transform:translateY(3px);box-shadow:0 0 0 3px #fff,0 0 0 5px #2a0a6a,0 6px 0 5px #2a0a6a,0 12px 30px #ff2ad466}.pill.is-soon{cursor:default;user-select:none}.pill svg{width:22px;height:22px}.direct{color:var(--mu);font-size:13px}.soon{cursor:default;user-select:none;white-space:nowrap;color:var(--fa);background:#ffffff0f;border-radius:999px;align-items:center;gap:10px;padding:18px 28px;font-family:Fredoka;font-size:18px;font-weight:600;font-stretch:125%;display:inline-flex;box-shadow:inset 0 0 0 1.5px #ffffff24}@media (prefers-color-scheme:light){.soon{background:#3a0f6a0d;box-shadow:inset 0 0 0 1.5px #3a0f6a24}}.soon .pix{letter-spacing:.16em;background:#ffffff14;border-radius:6px;padding:3px 7px;font-size:9px}.req{color:var(--mu);font-size:13px}.works{flex-direction:column;align-items:center;gap:16px;margin-top:64px;display:flex}.works .pix{color:var(--fa);letter-spacing:.2em;font-size:11px}.works ul{gap:36px;margin:0;padding:0;list-style:none;display:flex}.works li{color:var(--mu);flex-direction:column;align-items:center;gap:10px;font-size:14px;display:flex}.logo{border-radius:16px;place-items:center;width:64px;height:64px;display:grid;overflow:hidden;box-shadow:0 10px 24px #08032066}.logo.am img{width:64px;height:64px;display:block}.logo.sp{background:#000}.logo.sp img{width:41px;height:41px;display:block}.logo.fo{background:linear-gradient(160deg,#3f8cff,#1b5fe0);box-shadow:inset 0 2px #fff5,0 10px 24px #08032066}.logo.fo svg{width:35px;height:35px}section{padding:112px 0}.final{isolation:isolate;text-align:center;background:radial-gradient(1200px 760px at 50% 45%, #4a1693 0%, #22094f 50%, var(--bg) 85%);padding:170px 20px 180px;position:relative;overflow:hidden}.final:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(ellipse 78% 92% at 50% 50%, rgba(var(--glow), 1) 0%, rgba(var(--glow), .95) 34%, rgba(var(--glow), .8) 46%, rgba(var(--glow), .55) 62%, rgba(var(--glow), .28) 78%, rgba(var(--glow), .1) 90%, rgba(var(--glow), 0) 100%);position:absolute;inset:0}.final h2{margin:0 0 34px}.final .cta{z-index:2;position:relative}@media (width<=820px){.final{padding:110px 16px 120px}}.kicker{color:var(--pink);margin-bottom:16px;font-size:20px;display:block}.head{text-align:center;margin-bottom:44px}h2{margin:0 0 14px;font-family:Fredoka;font-size:clamp(30px,4vw,52px);font-weight:700;font-stretch:125%;line-height:1.05}.sub{color:var(--mu);max-width:48ch;margin:0 auto;font-size:18px}.screen{aspect-ratio:16/10;isolation:isolate;background:#1b2b44 50%/cover no-repeat;border-radius:22px;width:min(1040px,100%);margin-inline:auto;position:relative;overflow:hidden;box-shadow:0 0 0 10px #1a1530,0 0 0 11px #ffffff1c,0 40px 90px #08032099,0 0 140px #8a3cff40}@media (prefers-color-scheme:light){.screen{box-shadow:0 0 0 10px #1a1530,0 0 0 11px #ffffff1c,0 40px 90px #1c0f4547}}.screen>video.wall{object-fit:cover;z-index:-1;width:100%;height:100%;position:absolute;inset:0}.menubar{z-index:5;color:#fff;-webkit-backdrop-filter:blur(18px)saturate(1.4);background:#1c283c47;align-items:center;gap:18px;height:28px;padding:0 14px;font-size:13px;display:flex;position:absolute;inset:0 0 auto}.menubar b{font-weight:700}.menubar .right{align-items:center;gap:14px;margin-left:auto;display:flex}.led{align-items:flex-end;gap:1.5px;height:13px;display:flex}.led i{width:2.5px;height:var(--h);background:var(--c);transform-origin:bottom;animation:1.1s ease-in-out infinite alternate bob;animation-delay:var(--d);border-radius:1px;display:block}@keyframes bob{0%{transform:scaleY(.45)}to{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.led i{animation:none}}.try .desk{position:absolute;inset:28px 0 0}.try .placed{cursor:grab;touch-action:none;user-select:none;filter:drop-shadow(0 22px 34px #00000073);position:absolute;top:44%;left:50%;transform:translate(-50%,-50%)}.try .placed.dragging{cursor:grabbing}.try .placed img,.try .placed video{pointer-events:none;-webkit-user-drag:none;width:100%;height:auto;display:block}.try .placed video{position:absolute;inset:0}.try .placed.enter{animation:.55s cubic-bezier(.2,.9,.25,1.15) both land}@keyframes land{0%{opacity:0;transform:translate(-50%,-38%)scale(.86)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@media (prefers-reduced-motion:reduce){.try .placed.enter{animation-duration:10ms}}.hint{z-index:4;pointer-events:none;color:#fff;-webkit-backdrop-filter:blur(10px);background:#0d073073;border-radius:999px;padding:6px 12px;font-size:12px;transition:opacity .4s;position:absolute;bottom:112px;left:50%;transform:translate(-50%)}.hint.gone{opacity:0}.dock{z-index:6;background:linear-gradient(#ffffff4d,#ebf0ff38);border-radius:22px;align-items:center;gap:6px;max-width:calc(100% - 28px);padding:8px 10px;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 1px #ffffff59,0 10px 30px #00000040}.dock .strip{scrollbar-width:none;scroll-snap-type:x proximity;gap:6px;margin-top:-8px;padding-top:8px;display:flex;overflow-x:auto}.dock .strip::-webkit-scrollbar{display:none}.dock button{cursor:pointer;scroll-snap-align:start;background:0 0;border:0;border-radius:14px;flex:none;place-items:center;width:64px;height:64px;padding:6px;transition:transform .15s,background .15s;display:grid;position:relative}.dock button:hover{background:#ffffff24;transform:translateY(-5px)scale(1.1)}.dock button img{filter:drop-shadow(0 3px 5px #00000059);max-width:100%;max-height:100%}.dock button.on:after{content:"";background:#fff;border-radius:50%;width:4px;height:4px;position:absolute;bottom:-1px}.dock .dice{background:#ff2ad438;border-radius:16px;width:56px;height:56px;margin-left:4px;box-shadow:inset 0 0 0 1px #ff8ce880}.dock .dice svg{width:26px;height:26px}.dock .sep{background:#ffffff59;flex:none;align-self:stretch;width:1px;margin:6px 2px}.demo{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:48px;width:min(1040px,100%);margin:0 auto;display:grid}.demo .chat{background:var(--card);min-height:230px;box-shadow:inset 0 0 0 1px var(--ln);border-radius:26px;flex-direction:column;justify-content:center;gap:18px;padding:28px;display:flex}.demo .who{color:var(--fa);align-self:flex-end;font-size:11px}.demo .bubble{color:#fff;background:linear-gradient(135deg,#1b3cff,#8a3cff);border-radius:20px 20px 6px;align-self:flex-end;max-width:94%;min-height:1.4em;margin:0;padding:14px 18px;font-size:19px;line-height:1.4}.demo .caret{vertical-align:-.16em;background:#fff;width:2px;height:1.05em;margin-left:2px;animation:1s step-end infinite blink;display:inline-block}.demo.is-building .caret,.demo.built .caret{opacity:0;animation:none}@keyframes blink{50%{opacity:0}}.building{color:#fff;white-space:nowrap;background:#201c34e0;border-radius:999px;align-items:center;gap:8px;padding:8px 16px;font-family:Fredoka;font-size:15px;font-weight:600;font-stretch:115%;display:inline-flex;box-shadow:0 0 0 1px #ffffff1f,0 10px 30px #00000059}.building svg{width:15px;height:15px;animation:1.6s ease-in-out infinite twinkle}@keyframes twinkle{50%{opacity:.45;transform:scale(.82)}}.demo .building{opacity:0;align-self:flex-start;transition:opacity .3s,transform .3s;transform:translateY(6px)}.demo.is-building .building{opacity:1;animation:1.2s ease-in-out infinite pillpulse;transform:none}@keyframes pillpulse{50%{box-shadow:0 0 0 1px #ffffff2e,0 0 26px #8a3cff80,0 10px 30px #00000059}}.demo .stage{height:440px;position:relative}.demo .stage:before{content:"";z-index:-1;background:radial-gradient(closest-side,#8a3cff4d,#ff4fd81a 60%,#0000);border-radius:50%;position:absolute;inset:8% 4%}.demo .stage img{object-fit:contain;opacity:0;filter:drop-shadow(0 22px 34px #08032080);width:100%;height:100%;transition:opacity .3s,transform .3s ease-in;display:block;transform:translateY(16px)scale(.92)}.demo.built .stage img{opacity:1;transition:opacity .35s,transform .52s cubic-bezier(.2,.9,.25,1.15);transform:none}.picks{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px;display:flex}.picks button{cursor:pointer;font:inherit;color:var(--mu);background:var(--card);box-shadow:inset 0 0 0 1px var(--ln);border:0;border-radius:999px;padding:8px 14px;font-size:13px;transition:color .2s,background .2s}.picks button:hover{color:var(--tx)}.picks button.on{color:#fff;box-shadow:none;background:linear-gradient(135deg,#1b3cff,#8a3cff)}@media (prefers-reduced-motion:reduce){.demo .caret,.demo.is-building .building,.building svg{animation:none}.demo .stage img,.demo.built .stage img{transition:opacity .5s;transform:none}}.cards{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:72px;display:grid}.card{background:var(--card);box-shadow:inset 0 0 0 1px var(--ln);border-radius:22px;grid-template-rows:minmax(64px,auto) auto auto 1fr;align-content:start;gap:16px;margin:0;padding:18px;display:grid}.card q{quotes:"“" "”";color:#fff;background:linear-gradient(135deg,#1b3cff,#8a3cff);border-radius:16px 16px 16px 5px;place-self:start;max-width:100%;padding:10px 14px;font-size:14.5px;line-height:1.35}.card .arrow{color:var(--fa);align-items:center;gap:8px;font-size:10px;display:flex}.card .arrow:after{content:"";background:var(--ln);flex:1;height:1px}.card .art{height:250px}.card .art img{object-fit:contain;filter:drop-shadow(0 14px 22px #08032073);width:100%;height:100%;display:block}.card:hover .art img{animation:3.2s ease-in-out infinite float}@keyframes float{50%{transform:translateY(-8px)rotate(-1deg)}}@media (prefers-reduced-motion:reduce){.card:hover .art img{animation:none}}.card b{font-family:Fredoka;font-size:17px;font-weight:700;font-stretch:120%}.steps{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin:56px auto 0;display:flex}.step{background:var(--card);box-shadow:inset 0 0 0 1px var(--ln);border-radius:999px;align-items:center;gap:12px;padding:12px 18px 12px 12px;line-height:1.25;display:flex}.step i{color:#fff;background:linear-gradient(135deg,#00d6ff,#8a3cff 60%,#ff4fd8);border-radius:50%;flex:none;place-items:center;width:30px;height:30px;font-family:Fredoka;font-style:normal;font-weight:700;display:grid}.step b{font-family:Fredoka;font-size:16px;font-weight:600;font-stretch:115%}.step span{color:var(--mu);font-size:13px}.chev{color:var(--fa);font-size:20px}@media (width<=820px){.hero{min-height:100svh;padding:88px 16px}.hero:before{background:radial-gradient(ellipse 80% 50% at 50% 50%, rgba(var(--glow), .96) 0%, rgba(var(--glow), .9) 55%, rgba(var(--glow), .35) 82%, rgba(var(--glow), 0) 100%)}.pill{padding:16px 26px;font-size:18px}.soon{padding:14px 22px;font-size:16px}.works{gap:12px;margin-top:44px}.works .pix{font-size:12px}.works ul{gap:26px}.works li{gap:8px;font-size:13px}.logo{border-radius:13px;width:52px;height:52px}.logo.am img{width:52px;height:52px}.logo.sp img{width:33px;height:33px}.logo.fo svg{width:29px;height:29px}section{padding:84px 0}.screen{border-radius:14px;box-shadow:0 0 0 6px #1a1530,0 0 0 7px #ffffff1c,0 24px 60px #0803208c}.menubar{gap:12px;height:22px;font-size:11px}.menubar .menus{display:none}.try .desk{inset:22px 0 0}.try .screen{aspect-ratio:4/5;overflow:hidden}.hint{bottom:12px}.try .wrap>.dock{background:var(--card);max-width:100%;box-shadow:inset 0 0 0 1px var(--ln);margin:16px auto 0;position:static;transform:none}.dock button:hover{transform:none}.demo{grid-template-columns:1fr;gap:20px}.demo .chat{gap:14px;min-height:0;padding:20px}.demo .bubble{font-size:16px}.demo .stage{height:340px}.cards{grid-template-columns:1fr 1fr;gap:14px}.card{padding:14px}.card .art{height:190px}.card q{font-size:13px}.steps{flex-direction:column;gap:8px}.chev{transform:rotate(90deg)}}@media (width<=480px){.cards{grid-template-columns:1fr}.card .art{height:230px}}
