@font-face{font-family:Fredoka;src:url(../fonts/Fredoka.ttf) format("truetype");font-display:swap;font-weight:300 700}@font-face{font-family:Nunito;src:url(../fonts/Nunito.ttf) format("truetype");font-display:swap;font-weight:200 1000}:root{font-family:Nunito,sans-serif;color:#f7f6ff;background:#0b1028;font-synthesis:none;--accent: #ffe27a;--muted: #bdc5e0;--progress: 0%;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 75% 37%,#262455 0,transparent 48%),#0b1028;min-width:320px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-underline-offset:5px}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}::selection{background:#ffe27a;color:#0b1028}::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{background:#4b5073;border-radius:8px}::-webkit-scrollbar-track{background:#0b1028}.demo-header,.demo-footer,main{width:min(1200px,calc(100% - 96px));margin-inline:auto}.demo-header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff16}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 25px Fredoka,sans-serif}.brand img{object-fit:contain}.back-link{font-size:14px;font-weight:800;color:var(--muted);text-decoration:none}.back-link span{margin-left:12px;color:var(--accent);font-size:23px}.back-link:hover{color:#fff}.showcase{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:50px;min-height:690px;padding:38px 0 30px}.story{padding-bottom:12px}h1{font:600 clamp(40px,4.5vw,65px) / 1.05 Fredoka,sans-serif;letter-spacing:-.025em;margin:0 0 23px;max-width:650px;text-wrap:balance}h1 span{color:var(--accent)}.intro{font-size:18px;line-height:1.65;color:var(--muted);margin:0 0 34px}.scene-copy{min-height:203px;max-width:465px;border-top:1px solid #ffffff21;padding-top:24px}.scene-copy h2{font:500 26px/1.2 Fredoka,sans-serif;margin:0 0 10px;text-wrap:balance}.scene-copy p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}.scene-copy ul{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;padding:0;margin:16px 0 0;color:#e2e7ff;font-size:13px;font-weight:800}.scene-copy li:before{content:"✓";color:var(--accent);margin-right:6px}.playback{display:flex;gap:22px;align-items:center;margin-top:22px}.primary-control{display:flex;gap:12px;align-items:center;border:0;background:#ffe27a;color:#352300;padding:15px 23px;min-height:50px;border-radius:12px;font-weight:900;box-shadow:0 5px #b9780f;transition:background .15s,transform .15s}.primary-control:hover{background:#ffedac}.primary-control:active{transform:translateY(3px);box-shadow:0 2px #b9780f}#play-symbol{width:16px;font-size:19px;line-height:1}.next-control{border:0;background:transparent;color:#f7f6ff;font-size:14px;font-weight:800;min-height:48px;padding:8px 0}.next-control span{margin-left:10px;color:var(--accent)}.next-control:hover{text-decoration:underline;text-underline-offset:5px}.demo-note{color:#a6b2d1;font-size:12px;line-height:1.5;max-width:380px;margin:21px 0 0}.device-stage{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;isolation:isolate}.phone{position:relative;width:280px;padding:7px;border-radius:39px;background:linear-gradient(130deg,#9b9cab,#353641 28%,#999bac 57%,#252733);box-shadow:20px 32px 62px #02040d99,-3px 0 #b2b1c426,0 0 0 1px #e3e4ef5c;transform:rotate(3deg);transition:transform .65s cubic-bezier(.16,1,.3,1)}.phone:hover{transform:rotate(0)}.phone-screen{position:relative;width:100%;aspect-ratio:1080/2376;border:5px solid #080b12;border-radius:32px;overflow:hidden;background:#0c2034}.phone-screen img{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top}.phone-screen[data-scene="6"] img{object-fit:cover;object-position:top;height:auto;min-height:100%}.side-key{position:absolute;right:-4px;top:125px;width:4px;height:61px;background:#666776;border-radius:0 3px 3px 0}.orbit{position:absolute;width:420px;height:420px;border:1px solid #9182d42a;border-radius:50%;top:85px;z-index:-1;transform:rotateX(15deg) rotate(-25deg)}.orbit-two{width:510px;height:510px;top:38px;border-style:dashed;border-color:#9182d419}.spark{position:absolute;color:var(--accent);font-size:39px}.spark-one{right:35px;top:55px;transform:rotate(15deg)}.spark-two{left:35px;bottom:100px;font-size:29px;color:#9f93ed}figcaption{display:flex;align-items:center;gap:8px;color:#d4d9f0;font-size:12px;font-weight:800;margin-top:24px}.screen-indicator{width:6px;height:6px;border-radius:50%;background:#68e2cc}#scene-count{margin-left:18px;color:#a6b2d1;font-variant-numeric:tabular-nums}.scene-navigation{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid #ffffff21;border-bottom:1px solid #ffffff21}.scene-navigation button{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 5px 19px;background:transparent;color:#aeb9d7;border:0;min-height:93px;font-size:12px;font-weight:800;transition:background .2s,color .2s}.scene-navigation button:hover{color:#fff;background:#ffffff06}.scene-icon{height:25px;font:500 25px/1 Fredoka,sans-serif}.search-icon{font-size:31px}.scene-navigation button[aria-current]{color:var(--accent);background:#ffe27a08}.step-progress{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--accent)}.scene-navigation button[aria-current] .step-progress{width:var(--progress)}.demo-footer{display:flex;justify-content:space-between;color:#a6b2d1;font-size:12px;padding-block:22px 30px}.demo-footer span:first-child{color:#d1d7ed}.noscript{padding:15px;color:var(--muted)}@media(min-width:1500px){.showcase{min-height:740px}.phone{width:305px}}@media(max-width:1000px){.demo-header,.demo-footer,main{width:calc(100% - 56px)}.showcase{gap:25px;min-height:650px}.phone{width:255px}.orbit{width:330px;height:330px}.orbit-two{width:390px;height:390px}.spark-one{right:0}.spark-two{left:0}.intro{font-size:16px}.scene-copy h2{font-size:24px}.scene-copy p{font-size:15px}.scene-navigation button{font-size:11px}}@media(max-width:700px){.demo-header,.demo-footer,main{width:calc(100% - 36px)}.demo-header{height:76px}.brand{font-size:22px;gap:6px}.brand img{width:36px;height:36px}.back-link{font-size:0}.back-link span{font-size:27px}.showcase{grid-template-columns:1fr;gap:0;padding-top:30px;min-height:auto}.story{display:contents}h1{text-align:center;font-size:42px;margin-bottom:16px}.intro{text-align:center;font-size:15px;margin:0 0 28px}.device-stage{grid-row:3;margin:0 0 24px}.phone{width:min(255px,65vw);transform:rotate(2deg)}.orbit{width:300px;height:300px;top:100px}.orbit-two{width:335px;height:335px;top:82px}.spark-one{right:calc(50% - 158px);top:40px}.spark-two{left:calc(50% - 155px);bottom:100px}.scene-copy{grid-row:4;min-height:185px;padding-top:20px;max-width:100%}.scene-copy h2{font-size:26px}.scene-copy p{font-size:15px;max-width:50ch}.scene-copy ul{font-size:12px}.playback{grid-row:5;margin-top:10px;justify-content:space-between}.demo-note{grid-row:6;margin-bottom:0}.scene-navigation{grid-template-columns:repeat(4,1fr);margin-top:5px}.scene-navigation button{min-height:83px;padding-block:14px;font-size:10px}.scene-navigation button:nth-child(n+5){border-top:1px solid #ffffff12}.demo-footer{font-size:10px;gap:20px;padding-block:20px}.desktop-break{display:none}figcaption{margin-top:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.phone{transform:none}}