/* A presentation canvas: alignment guides, type and palette. */
.hero-animated{position:relative;isolation:isolate;padding-top:48px;padding-bottom:48px;--hero-px:0px;--hero-py:0px}
.hero-atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-atmosphere:before{content:'';position:absolute;inset:30% -10% -8%;background:radial-gradient(ellipse at 23% 65%,#d3e1fa85,transparent 47%),radial-gradient(ellipse at 82% 58%,#eadccb66,transparent 44%);pointer-events:none}
.hero-grid{position:absolute;inset:80px -4% -80px;background-image:linear-gradient(#6085d212 1px,transparent 1px),linear-gradient(90deg,#6085d212 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 70%,#000 15%,#0009 47%,transparent 76%);transform:perspective(1100px) rotateX(16deg) translate3d(calc(var(--hero-px)*-.35),calc(var(--hero-py)*-.35),0);transform-origin:center 90%}
.hero-atmosphere:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--canvas) 0%,transparent 28%,transparent 75%,var(--canvas) 100%);pointer-events:none}
.hero-routes{position:absolute;width:100%;height:100%;inset:0;color:#4976e4;stroke-width:1.1;overflow:visible}
.hero-route-base{stroke:#96b0e3;opacity:.35}.hero-route-flow{stroke:#4476e5;stroke-width:1.7;stroke-dasharray:38 680;stroke-linecap:round;opacity:.55}.hero-route-fine{stroke:#90a9d5;stroke-dasharray:3 8;opacity:.3}.hero-routes circle{fill:var(--canvas);stroke:#6a91e2;stroke-width:1;opacity:.55}
.hero-cross{position:absolute;width:14px;height:14px;color:#527ddd;opacity:.42}.hero-cross:before,.hero-cross:after{content:'';position:absolute;background:currentColor}.hero-cross:before{width:14px;height:1px;top:6px}.hero-cross:after{height:14px;width:1px;left:6px}.cross-one{left:12%;top:17%}.cross-two{right:13%;top:23%;width:10px;transform:rotate(45deg)}.cross-three{left:6%;top:76%}.cross-four{right:8%;top:85%}
.hero-animated h1,.hero-animated>.lead,.hero-animated>.button,.hero-animated>.hero-notes,.hero-animated>.demo-note{position:relative;z-index:4}
.hero-animated h1{max-width:960px;margin-inline:auto;text-wrap:balance}.hero-animated h1 span{display:inline-block;position:relative}.hero-animated h1 span:after{content:'';position:absolute;left:2%;right:2%;bottom:-7px;height:2px;background:linear-gradient(90deg,transparent,#799cf180,transparent);transform-origin:left}
.hero-animated>.lead{margin-top:25px}.hero-animated .hero-scene{margin-top:64px;height:456px;max-width:1240px}
.hero-animated .hero-main{border:1px solid #ffffff99;box-shadow:0 30px 65px -20px #23416b46,0 6px 14px #223c6612;transform:translate(calc(-50% + var(--hero-px)),var(--hero-py)) rotate(-2deg)}
.hero-animated .hero-side{box-shadow:0 16px 40px -14px #27416c32;transition:box-shadow .3s}.hero-animated .side-left{left:20px;top:58px;transform:translate(calc(var(--hero-px)*-.65),calc(var(--hero-py)*-.65)) rotate(-9deg);background:#fcfcf9}.hero-animated .side-right{right:20px;top:72px;transform:translate(calc(var(--hero-px)*-.45),calc(var(--hero-py)*-.45)) rotate(8deg);background:#f2e7dc}
.hero-editor-frame{position:absolute;width:688px;height:398px;left:50%;top:-16px;transform:translateX(-50%) rotate(-2deg);border:1px solid #668bf445;border-radius:13px;pointer-events:none;z-index:1}
.hero-editor-frame>i{position:absolute;width:7px;height:7px;background:var(--canvas);border:1px solid #527dea;box-shadow:0 0 0 3px #f7f8fa80}.hero-editor-frame>i:nth-child(1){left:-4px;top:-4px}.hero-editor-frame>i:nth-child(2){right:-4px;top:-4px}.hero-editor-frame>i:nth-child(3){left:-4px;bottom:-4px}.hero-editor-frame>i:nth-child(4){right:-4px;bottom:-4px}
.hero-ruler{position:absolute;opacity:.3}.ruler-top{left:28px;right:28px;top:-12px;height:5px;background:repeating-linear-gradient(90deg,#6784b5 0 1px,transparent 1px 12px)}.ruler-left{left:-12px;top:28px;bottom:28px;width:5px;background:repeating-linear-gradient(0deg,#6784b5 0 1px,transparent 1px 12px)}
.hero-type-token,.hero-palette-token{position:absolute;z-index:4;border:1px solid #dce4f4;background:#fff;box-shadow:0 13px 28px -11px #244a922b;pointer-events:none}
.hero-type-token{left:97px;top:-48px;width:77px;height:83px;border-radius:12px;padding:12px 14px;transform:rotate(-10deg)}.hero-type-token>span{font-family:Georgia,serif;font-size:31px;line-height:1.1;letter-spacing:-.07em;display:block;color:#2855db;text-align:left}.hero-type-token>i{display:block;height:2px;background:#b8c9ec;margin-top:8px;width:100%}.hero-type-token>i:last-child{width:60%;margin-top:5px;background:#d8e2f3}
.hero-palette-token{right:78px;top:-36px;padding:11px;display:flex;gap:5px;align-items:center;border-radius:30px;transform:rotate(9deg)}.hero-palette-token i{display:block;width:20px;height:20px;border-radius:50%;background:#2855db;border:2px solid #fff;box-shadow:0 0 0 1px #00000008}.hero-palette-token i:nth-child(2){background:#92acef}.hero-palette-token i:nth-child(3){background:#e2c8ae}.hero-palette-token i:nth-child(4){background:#e5eee7}.hero-palette-token>span{font-size:21px;line-height:1;color:#7f9adc;margin-left:4px}
.hero-cursor-token{position:absolute;right:220px;top:305px;width:33px;height:37px;z-index:5;pointer-events:none;color:#5883ef;filter:drop-shadow(0 3px 5px #23448528)}.hero-cursor-token svg{display:block;width:100%;height:100%}
.hero-animated .prompt-chip{bottom:21px;border-color:#d4dff3;border-radius:13px;box-shadow:0 8px 32px #385dae17;background:#fff}.hero-animated .chip-check{box-shadow:0 0 0 4px #2855db05}.hero-animated .hero-notes{margin-top:4px}.hero-animated .demo-note{margin-top:16px}
@keyframes hero-slide-rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes hero-left-drift{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes hero-right-drift{0%,100%{translate:0 0}50%{translate:0 8px}}
@keyframes hero-type-drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:3px -8px;rotate:3deg}}
@keyframes hero-palette-drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:-3px 7px;rotate:-3deg}}
@keyframes hero-route-travel{from{stroke-dashoffset:720}to{stroke-dashoffset:0}}
@keyframes hero-cursor-nudge{0%,100%{translate:0 0}40%,65%{translate:-10px -9px}}
@keyframes hero-underline{from{scale:0 1;opacity:0}to{scale:1 1;opacity:1}}
@keyframes hero-light-drift{from{transform:translate3d(-12px,8px,0)}to{transform:translate3d(14px,-12px,0)}}
@media(prefers-reduced-motion:no-preference){
.hero-atmosphere:before{animation:hero-light-drift 16s ease-in-out infinite alternate}
.hero-animated .hero-main{animation:hero-slide-rise .85s cubic-bezier(.22,1,.36,1) both}.hero-animated h1 span:after{animation:hero-underline 1.2s .2s both}.hero-animated .side-left{animation:hero-left-drift 7s ease-in-out infinite}.hero-animated .side-right{animation:hero-right-drift 8s ease-in-out infinite}.hero-type-token{animation:hero-type-drift 7s ease-in-out infinite}.hero-palette-token{animation:hero-palette-drift 8s ease-in-out infinite}.hero-route-flow{animation:hero-route-travel 13s linear infinite}.hero-cursor-token{animation:hero-cursor-nudge 6s ease-in-out infinite}
.hero-animated[data-motion-paused] *,.hero-animated[data-motion-paused] .hero-atmosphere:before{animation-play-state:paused!important}
}
@media(max-width:1099px) and (min-width:769px){.hero-animated .hero-scene{height:440px;max-width:1000px}.hero-editor-frame{width:608px;height:394px}.hero-type-token{left:62px;top:-38px}.hero-palette-token{right:44px;top:-30px}.hero-cursor-token{right:15%;top:310px}.hero-animated .side-left{left:-18px}.hero-animated .side-right{right:-18px}}
@media(max-width:768px) and (min-width:521px){.hero-animated{padding-top:36px}.hero-animated .hero-scene{height:408px;margin-top:65px}.hero-editor-frame{width:538px;height:343px;top:-14px}.hero-animated .side-left{left:-74px;top:53px}.hero-animated .side-right{right:-74px;top:62px}.hero-type-token{left:28px;top:-43px;width:64px;height:72px;padding:10px 12px}.hero-type-token>span{font-size:27px}.hero-palette-token{right:28px;top:-33px;padding:9px}.hero-palette-token i{width:17px;height:17px}.hero-cursor-token{right:14%;top:277px}.hero-grid{background-size:48px 48px}}
@media(max-width:520px){
.hero-animated{padding-top:29px;padding-bottom:33px}.hero-animated h1{font-size:36px;line-height:1.2}.hero-animated h1 span{display:block}.hero-animated h1 span:after{bottom:-5px;left:12%;right:12%}.hero-animated>.lead{margin-top:24px}.hero-animated .hero-scene{height:344px;margin-top:65px}.hero-grid{inset:150px -10% -60px;background-size:40px 40px;mask-image:linear-gradient(transparent,#000b 48%,#000a 85%,transparent);transform:none}.hero-routes{width:900px;left:50%;transform:translateX(-50%);opacity:.6}.cross-one{left:8%;top:3%}.cross-two{right:6%;top:34%}.cross-three,.cross-four{display:none}.hero-animated .hero-main{width:calc(100% - 46px);height:230px;transform:translateX(-50%) rotate(-3deg)}.hero-animated .side-left{left:-49px;top:136px;transform:rotate(-9deg)}.hero-animated .side-right{right:-49px;top:142px;transform:rotate(9deg)}.hero-editor-frame{width:calc(100% - 28px);height:248px;top:-9px;transform:translateX(-50%) rotate(-3deg);border-radius:10px}.hero-ruler{display:none}.hero-type-token{left:25px;top:-38px;width:49px;height:53px;padding:7px 10px;border-radius:9px;z-index:3}.hero-type-token>span{font-size:23px}.hero-type-token>i{height:1px;margin-top:4px}.hero-type-token>i:last-child{margin-top:3px}.hero-palette-token{right:22px;top:-30px;padding:8px;gap:4px;z-index:3}.hero-palette-token i{width:15px;height:15px;border-width:1px}.hero-palette-token>span{font-size:17px;margin-left:2px}.hero-cursor-token{width:26px;height:30px;right:32px;top:207px}.hero-animated .prompt-chip{bottom:15px;max-width:calc(100% - 40px)}.hero-animated .hero-notes{margin-top:0}.hero-animated .demo-note{max-width:310px;padding:0 12px;line-height:1.6;margin:16px auto 0}.hero-animated .side-left,.hero-animated .side-right{animation:none}.hero-route-flow{animation-duration:18s}
}
@media(max-width:350px){.hero-animated h1{font-size:33px}.hero-animated .hero-main{width:calc(100% - 36px);height:210px}.hero-editor-frame{width:calc(100% - 20px);height:228px}.hero-animated .hero-scene{height:325px}.hero-animated .side-left{top:117px}.hero-animated .side-right{top:123px}.hero-cursor-token{top:190px;right:27px}.hero-palette-token{right:18px}.hero-type-token{left:20px}}
@media(prefers-reduced-motion:reduce){.hero-animated *{animation:none!important;transition:none!important}.hero-animated .hero-main{transform:translateX(-50%) rotate(-2deg)}.hero-grid{transform:none}.hero-route-flow{stroke-dasharray:none;opacity:.12}}