@font-face{font-family:Super Shiny;src:url(/h1-font.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{--bg-void:#0a0e2a;--bg-smoke:#141834;--bg-haze:#1c2148;--accent-pulse:#ff018f;--accent-uv:#7b2fff;--accent-cyan:#00e5ff;--oppo-cyan:#2e70ff;--accent-ember:#fc0;--oppo-ember:#39ff14;--rel-ally:#00e5ff;--rel-opposite:#ff018f;--rel-outlier:#fc0;--rel-neutral:#7b2fff;--text-primary:#f0f0ff;--text-secondary:#a0a4cc;--text-dim:#5a5e88;--bubble-wash:#e8e6df;--font-display:"Super Shiny", "Space Grotesk", sans-serif;--font-heading:"Space Grotesk", sans-serif;--font-body:"Inter", sans-serif;--font-mono:"JetBrains Mono", monospace;font:16px/145% var(--font-body);letter-spacing:.18px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text-primary);background:var(--bg-void);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn-wrapper{--rad:32px;--color-wrapper-border:var(--text-primary);--color-btn-bg:var(--accent-pulse);--color-btn-text:#000;--color-btn-text-shadow:#ffffffd1;--color-btn-inset-shadow:var(--accent-uv);--color-layer-a:var(--accent-uv);--color-layer-b:var(--accent-cyan);--color-overlay-text:#000;--color-overlay-glow:#fff;--color-overlay-shadow:#fff4;--color-overlay-highlight:#fff5;overflow-clip-margin:4px;border:2px solid var(--color-wrapper-border);border-radius:var(--rad);filter:saturate(.65)brightness(1.8);justify-content:center;align-self:center;align-items:center;width:fit-content;font-family:Inter,sans-serif;font-size:1.5rem;font-weight:600;display:flex;position:relative;overflow:clip}.one{--color-layer-a:var(--accent-uv);--color-layer-b:var(--accent-cyan)}.two{--color-layer-a:var(--oppo-cyan);--color-layer-b:var(--accent-pulse)}.three{--color-layer-a:var(--oppo-ember);--color-layer-b:var(--accent-pulse)}.gradient-btn{z-index:-1;border-radius:var(--rad);font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:.15rem;color:var(--color-btn-text);background-color:var(--color-btn-bg);box-shadow:inset 0 0 10px 9px var(--color-btn-inset-shadow);text-shadow:0 1px 3px var(--color-btn-text-shadow);cursor:pointer;mix-blend-mode:color-dodge;background-size:200% 200%;border:none;justify-content:center;align-items:center;gap:.75rem;padding:12px 36px;transition:color .3s,text-shadow .3s;display:flex;position:relative}.oneBtn{background-color:var(--accent-pulse);box-shadow:inset 0 0 10px 9px var(--accent-uv)}.twoBtn{background-color:var(--accent-cyan);box-shadow:inset 0 0 10px 9px var(--oppo-cyan)}.threeBtn{background-color:var(--accent-ember);box-shadow:inset 0 0 10px 9px var(--oppo-ember)}.gradient-btn svg,.text-overlay svg{flex-shrink:0;width:30px;height:30px}.gradient-btn:after{content:"";pointer-events:none;border-radius:var(--rad);mix-blend-mode:difference;z-index:1;background-size:200% 200%;width:100%;height:100%;position:absolute;top:0;left:0}.gradient-layer{pointer-events:none;aspect-ratio:1;background:radial-gradient(ellipse at 65% 180%, var(--color-layer-a), var(--color-layer-b), var(--color-layer-a), var(--color-layer-b), var(--color-layer-a), var(--color-layer-b), var(--color-layer-a), var(--color-layer-b), var(--color-layer-a), var(--color-layer-b), var(--color-layer-a));mix-blend-mode:difference;width:500%;animation:8s linear infinite rotate;position:absolute;left:-160px}.gradient-layer:last-child{mix-blend-mode:color-dodge}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.text-overlay{pointer-events:none;z-index:2;border-radius:var(--rad);font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:.15rem;color:var(--color-overlay-text);text-shadow:0 0 4px var(--color-overlay-glow);box-shadow:inset 0 -4px 4px 0 var(--color-overlay-shadow), inset 0 4px 4px 0 var(--color-overlay-highlight);mix-blend-mode:multiply;justify-content:center;align-items:center;gap:.75rem;padding:12px 36px;transition:transform .3s;animation:5s infinite opacityPulse;display:flex;position:absolute}.btn-wrapper:hover .text-overlay{transform:scale(1.1)}.btn-wrapper:hover .gradient-btn{color:#0000;text-shadow:0 0 #0000}.btn-wrapper:active .text-overlay{transform:scale(.95)}.btn-wrapper:active .gradient-btn{color:#0000;text-shadow:0 0 #0000}.light{pointer-events:none;z-index:1;aspect-ratio:1;filter:blur(5px);background-color:#fff5;border-radius:50px;width:80%;height:1.9rem;animation:3s ease-in-out infinite pulse;position:absolute}@keyframes pulse{0%,to{opacity:1}50%{opacity:.1}}@keyframes opacityPulse{0%,to{opacity:1}50%{opacity:.5}}body{margin:0}#root{text-align:center;box-sizing:border-box;flex-direction:column;width:100%;min-height:100svh;display:flex}.hero-content{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;display:flex;position:relative}.hero-stack{flex-direction:column;align-items:center;gap:24px;width:100%;display:flex}.hero-stack>.hero-message{justify-content:center;align-items:center;max-width:22em;min-height:4.5em;margin:0;display:flex}.hero-stack>.hero-action{justify-content:center;align-items:center;min-height:48px;display:flex}.confetti2d{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.hero-content>:not(.confetti2d):not(.song-name):not(.star-announcement){z-index:1;position:relative}.song-name,.star-announcement{z-index:1}.confetti-piece{width:calc(34px * var(--size));aspect-ratio:20/16;margin:calc(-17px * var(--size)) 0 0 calc(-17px * var(--size));animation:confetti-drift var(--drift-dur) ease-in-out infinite;animation-delay:var(--drift-delay);will-change:transform;position:absolute}.confetti-piece svg{width:100%;height:100%;transform:rotate(var(--rot));opacity:.85;animation:confetti-pulse var(--pulse-dur) ease-in-out infinite;animation-delay:var(--pulse-delay);display:block}.confetti-piece.is-glow svg{filter:drop-shadow(0 0 6px)}@keyframes confetti-drift{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-6px)rotate(3deg)}}@keyframes confetti-pulse{0%,to{opacity:.42}50%{opacity:.95}}.confetti2d--end .confetti-piece svg{opacity:.55}.confetti2d--end .confetti-piece{animation-duration:calc(var(--drift-dur) * 1.6)}.confetti2d--end .confetti-piece svg{animation-duration:calc(var(--pulse-dur) * 1.5)}@keyframes confetti-settle{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(5px)rotate(-2deg)}}.confetti2d--end .confetti-piece{animation-name:confetti-settle}@media (width<=1024px){.confetti-piece{width:calc(24px * var(--size));margin:calc(-12px * var(--size)) 0 0 calc(-12px * var(--size))}}.confetti2d--bokeh{z-index:0;transition:opacity 1.2s}.confetti2d--bokeh.is-dimmed{opacity:.35}.bokeh-orb{width:calc(38px * var(--size));aspect-ratio:1;margin:calc(-19px * var(--size)) 0 0 calc(-19px * var(--size));background:radial-gradient(circle at center, currentColor 0%, color-mix(in srgb, currentColor 55%, transparent) 42%, transparent 72%);filter:blur(var(--blur));opacity:.32;animation:confetti-drift var(--drift-dur) ease-in-out infinite, bokeh-breathe var(--pulse-dur) ease-in-out infinite;animation-delay:var(--drift-delay), var(--pulse-delay);will-change:transform, opacity;border-radius:50%;position:absolute}@keyframes bokeh-breathe{0%,to{opacity:.2}50%{opacity:.44}}@media (width<=1024px){.bokeh-orb{width:calc(26px * var(--size));margin:calc(-13px * var(--size)) 0 0 calc(-13px * var(--size))}}@media (prefers-reduced-motion:reduce){.confetti-piece,.confetti-piece svg,.bokeh-orb{animation:none}.confetti-piece svg{opacity:.7}}.star-announcement{text-align:center;font-family:var(--font-heading);color:var(--accent-pulse);text-shadow:0 0 24px #ff018f99;pointer-events:none;margin:0;padding:0 16px;font-size:32px;font-weight:600;animation:.6s ease-out both star-phrase-in;position:absolute;top:28%;left:50%;transform:translate(-50%)}@media (width<=1024px){.star-announcement{font-size:28px}}@keyframes star-phrase-in{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.song-name{text-align:center;font-family:var(--font-heading);color:var(--text-primary);text-shadow:0 0 24px #fff9;pointer-events:none;margin:0;padding:0 16px;font-size:24px;font-weight:600;animation:.6s ease-out both song-phrase-in;position:absolute;top:28%;left:50%;transform:translate(-50%)}@media (width<=1024px){.song-name{font-size:28px}}@keyframes song-phrase-in{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.fade-to-black{opacity:0;pointer-events:none;z-index:10;background:#000;transition:opacity 2s ease-in;position:absolute;inset:0}.fade-to-black.active{opacity:1}.page-footer{color:var(--text-secondary);flex-direction:row;justify-content:space-between;padding:20px;display:flex}h2{font-family:var(--font-heading);font-weight:500}h1{font-family:var(--font-display);color:var(--accent-pulse);letter-spacing:-1.5px;text-shadow:0 0 24px #ff018f99;margin:15px 0 -.18em;font-size:clamp(64px,13vw,200px);font-weight:400;line-height:1.05}@media (width<=1024px){h1{margin:10px 0 -.15em}}h2{color:var(--text-secondary);letter-spacing:-.24px;margin:0 0 8px;font-size:28px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}a{text-decoration:none}.dialogue{color:var(--text-primary);font-size:16px;font-weight:100;font-family:var(--font-body)}.footer-text{font-family:var(--font-mono);color:var(--text-dim);font-size:12px;font-weight:100}.card-under{z-index:1;opacity:1;background:radial-gradient(ellipse at center, color-mix(in srgb, var(--bubble-color,var(--rel-neutral)) 75%, transparent) 0%, color-mix(in srgb, var(--bubble-color,var(--rel-neutral)) 45%, transparent) 40%, color-mix(in srgb, var(--bubble-color,var(--rel-neutral)) 18%, transparent) 68%, transparent 88%);border-radius:50px;padding:12px;transition:opacity 2s ease-in}.card{z-index:1;background:0 0;border-radius:70px;justify-content:center;align-self:center;align-items:center;width:fit-content;min-width:250px;height:fit-content;margin:0 auto;display:flex;position:relative}.card-content{margin:15px}.card-under.faded{opacity:0}code,.counter{font-family:var(--font-mono);color:var(--text-primary);border-radius:4px;display:inline-flex}code{background:var(--bg-smoke);padding:4px 8px;font-size:15px;line-height:135%}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}
