@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap";:root{color:#24202b;scroll-behavior:smooth;background:#fffdf9;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{margin:0;overflow-x:hidden}a{color:inherit;text-decoration:none}.cursor-layer{pointer-events:none;z-index:100;position:fixed;inset:0}.joy-cursor{will-change:transform;filter:drop-shadow(0 7px 7px #0002);z-index:2;line-height:1;position:absolute;top:0;left:0}.trail-bit{color:#ff7192;z-index:1;font-size:18px;animation:.72s ease-out forwards poof;position:absolute}.trail-bit:nth-child(3n){color:#f9ae35}.trail-bit:nth-child(2n){color:#a17aff}@keyframes poof{0%{opacity:.9;scale:.6}to{opacity:0;translate:0 -25px;scale:1.5}}nav{justify-content:space-between;align-items:center;max-width:1200px;height:82px;margin:auto;padding:0 28px;display:flex}.brand{letter-spacing:-1.2px;font-size:22px;font-weight:700}.brand span{color:#ff6a83;margin-right:3px}.nav-links{color:#625d66;gap:30px;font-size:14px;font-weight:500;display:flex}.nav-button,.primary{color:#fff;background:#292430;border-radius:100px;padding:13px 18px;font-size:14px;font-weight:600}.nav-button b{margin-left:7px;font-size:18px}.hero{text-align:center;isolation:isolate;background:radial-gradient(circle at 50% 44%,#fff0c7 0,#fff9e9 27%,#0000 58%);min-height:625px;padding:93px 20px 40px;position:relative}.eyebrow,.section-kicker{letter-spacing:1.3px;color:#766f7b;font-family:DM Mono,monospace;font-size:11px;font-weight:500}.eyebrow{background:#fff;border:1px solid #f0e8da;border-radius:20px;align-items:center;gap:7px;padding:8px 12px;display:inline-flex;box-shadow:0 4px 15px #4e361008}.eyebrow i{background:#ff7590;border-radius:50%;width:7px;height:7px}.hero h1,.how h2,.play h2{letter-spacing:-4.6px;margin:24px 0 20px;font-size:clamp(48px,6vw,80px);font-weight:700;line-height:1.01}.hero h1 em,.how h2 em,.play h2 em{color:#ff687f;font-family:Fraunces,serif;font-weight:500}.hero p{color:#716a75;max-width:455px;margin:0 auto 27px;font-size:17px;line-height:1.55}.primary{align-items:center;gap:20px;padding:16px 22px;font-size:15px;transition:all .2s;display:inline-flex;box-shadow:0 9px #e6dbca}.primary:hover{transform:translateY(-2px);box-shadow:0 11px #e6dbca}.primary span{font-size:21px}.hero-doodles>*{position:absolute}.doodle{color:#ffc54d;font-family:Fraunces;font-size:35px}.doodle.one{top:26%;left:17%;transform:rotate(15deg)}.doodle.two{color:#ff8297;top:43%;right:17%}.doodle.three{color:#91cda2;font-size:29px;bottom:18%;left:24%}.orbit{filter:drop-shadow(0 12px 10px #5d4b2730);font-size:62px;animation:3s ease-in-out infinite float;top:23%;right:21%}@keyframes float{50%{translate:0 -13px;rotate:5deg}}.scroll-note{letter-spacing:1.2px;color:#a0988c;font-family:DM Mono;font-size:10px;position:absolute;bottom:26px;left:0;right:0}.scroll-note span{margin-left:5px;font-size:16px}.how{background:#f5f0e9;padding:105px max(28px,50vw - 560px)}.how h2{margin-top:17px;font-size:52px}.steps{grid-template-columns:repeat(3,1fr);gap:17px;margin-top:49px;display:grid}.steps article{background:#fffdf9;border-radius:18px;min-height:205px;padding:28px;transition:transform .2s;position:relative}.steps article:hover{transform:translateY(-5px)}.steps article>span{color:#ff7188;font-family:DM Mono;font-size:11px}.steps h3{letter-spacing:-.5px;margin:33px 0 7px;font-size:19px}.steps p{color:#756e77;max-width:220px;margin:0;font-size:14px;line-height:1.5}.steps b{color:#f4b534;font-size:22px;position:absolute;bottom:18px;right:21px}.play{padding:105px max(28px,50vw - 560px) 87px}.play-heading{justify-content:space-between;align-items:end;margin-bottom:38px;display:flex}.play h2{margin:14px 0 0;font-size:52px}.play-heading p{color:#77707a;max-width:225px;margin:0 0 6px;font-size:14px;line-height:1.5}.studio{border:1px solid #e9e2d9;border-radius:23px;grid-template-columns:1.08fr .92fr;display:grid;overflow:hidden;box-shadow:0 17px 42px #6e4f1a0d}.controls{background:#fff;padding:30px}.control-label{margin-bottom:12px;font-size:13px;font-weight:700;display:block}.control-label b{float:right;color:#ff6c86;font-family:DM Mono;font-weight:400}.character-grid{grid-template-columns:repeat(4,1fr);gap:9px;display:grid}.character{cursor:pointer;background:#fff;border:1px solid #eee8df;border-radius:12px;height:80px;padding:5px;transition:all .18s}.character:hover,.character.selected{border-color:#ff738a;box-shadow:0 0 0 2px #ffe2e8}.character span{font-size:29px;display:block}.character small{color:#5f5962;font-size:10px;font-weight:600}.divider{background:#eee9e1;height:1px;margin:25px 0}input[type=range]{accent-color:#ff7088;width:100%}.pills{gap:7px;display:flex}.pills button,.effects button{cursor:pointer;color:#716a73;background:#fff;border:1px solid #e9e3db;border-radius:9px;padding:9px 13px;font-family:inherit;font-size:12px;font-weight:600}.pills .active,.effects .active{color:#e9506c;background:#fff1f4;border-color:#ff7088}.toggle-row{justify-content:space-between;align-items:center;margin:26px 0;display:flex}.toggle-row label{font-size:13px;font-weight:700;display:block}.toggle-row small{color:#88818a;font-size:11px}.toggle{cursor:pointer;background:#dad6d2;border:0;border-radius:20px;width:48px;height:27px;padding:3px;transition:all .2s}.toggle i{background:#fff;border-radius:50%;width:21px;height:21px;transition:all .2s;display:block}.toggle.on{background:#ff7189}.toggle.on i{transform:translate(21px)}.effects{gap:7px;display:flex}.effects button{text-transform:capitalize;flex:1}.effects span{color:#ff6e86;margin-right:4px}.preview{background:var(--preview);background-image:radial-gradient(#ffffff82 1px,#0000 1px);background-size:15px 15px;min-height:520px;position:relative;overflow:hidden}.preview-label{letter-spacing:1px;font-family:DM Mono;font-size:10px;position:absolute;top:22px;left:24px}.live-dot{background:#55c275;border-radius:50%;width:7px;height:7px;margin-right:5px;display:inline-block}.preview-content{text-align:center;position:absolute;top:47%;left:0;right:0;transform:translateY(-50%)}.preview-cursor{filter:drop-shadow(0 11px 10px #3b462434);line-height:1;animation:2.8s ease-in-out infinite float;display:block}.preview h3{letter-spacing:-.7px;margin:20px 0 6px;font-size:20px}.preview p{color:#5a5b55;margin:0;font-size:13px;line-height:1.6}.mini-spark{color:#fff;opacity:.9;font-size:28px;position:absolute}.s1{top:20%;left:18%;transform:rotate(20deg)}.s2{color:#ff82a0;top:33%;right:20%}.preview-footer{letter-spacing:-.4px;border-top:1px solid #fff8;padding-top:12px;font-size:12px;font-weight:700;position:absolute;bottom:21px;left:24px;right:24px}.preview-footer span{float:right;color:#ff7490}.embed{color:#fff;background:#292430;border-radius:16px;justify-content:space-between;align-items:center;margin-top:19px;padding:19px 21px;display:flex}.embed>div{align-items:center;gap:14px;display:flex}.code-icon{color:#ffc64f;background:#3d3746;border-radius:8px;padding:10px;font-family:DM Mono;font-size:11px}.embed h3{margin:0 0 3px;font-size:14px}.embed p{color:#beb7c3;margin:0;font-size:12px}.embed button{color:#2f2936;cursor:pointer;background:#fff;border:0;border-radius:9px;padding:11px 14px;font-family:inherit;font-size:12px;font-weight:700}.embed button.copied{color:#1f5430;background:#a9e6bc}.embed button span{margin-left:5px;font-size:17px}footer{color:#77707a;justify-content:space-between;align-items:center;max-width:1120px;margin:auto;padding:31px 0;font-size:12px;display:flex}footer .brand{color:#28232e}footer p{margin:0}footer>span{color:#a199a1;font-family:DM Mono;font-size:10px}@media (width<=720px){.cursor-layer{display:none}nav{height:70px;padding:0 18px}.nav-links{display:none}.nav-button{padding:10px 13px;font-size:12px}.hero{min-height:570px;padding-top:74px}.hero h1{letter-spacing:-2.8px}.hero p{font-size:15px}.orbit{font-size:47px;top:18%;right:9%}.doodle.one{top:28%;left:9%}.doodle.two{top:53%;right:10%}.doodle.three{bottom:17%;left:12%}.how,.play{padding:74px 18px}.how h2,.play h2{letter-spacing:-2.7px;font-size:42px}.steps{grid-template-columns:1fr;margin-top:32px}.steps article{min-height:150px}.steps h3{margin-top:20px}.play-heading{display:block}.play-heading p{margin-top:15px}.studio{grid-template-columns:1fr}.controls{padding:22px}.preview{min-height:370px}.embed{flex-direction:column;align-items:flex-start;gap:14px}.embed button{width:100%}footer{flex-wrap:wrap;gap:12px;padding:28px 18px}footer p{display:none}.character-grid{gap:6px}.character{height:72px}.hero h1 br{display:none}}@media (pointer:coarse){.cursor-layer{display:none}}.click-control{margin-top:24px}.click-control small{color:#8b848d;margin-left:5px;font-weight:400}.test-site{background:#fffaf4;border:1px solid #e9e2d9;border-radius:18px;margin-top:48px;padding:22px}.test-heading{justify-content:space-between;align-items:start;gap:20px;display:flex}.test-heading h3{letter-spacing:-.8px;margin:8px 0 5px;font-size:21px}.test-heading p{color:#77707a;max-width:380px;margin:0;font-size:13px;line-height:1.5}.test-heading code{color:#8a6370;white-space:nowrap;background:#fff0f3;border-radius:6px;padding:7px 8px;font:10px DM Mono,monospace}.test-site iframe{background:#fff;border:1px solid #eee6dc;border-radius:11px;width:100%;height:280px;margin-top:19px}@media (width<=720px){.test-heading{display:block}.test-heading code{text-overflow:ellipsis;max-width:100%;margin-top:14px;display:inline-block;overflow:hidden}}