/* Motion enhances already-visible content; nothing depends on an animation to read. */
.reading-progress{position:fixed;inset:0 0 auto;height:3px;background:#626262;transform:scaleX(0);transform-origin:left;z-index:90;pointer-events:none}
.back-top{position:fixed;right:24px;bottom:24px;width:46px;height:46px;border-radius:50%;border:1px solid #DEE3E8;background:#111111;color:#F4F6F8;font-size:22px;box-shadow:0 6px 24px #11111122;z-index:40;cursor:pointer}.back-top[hidden]{display:none}.back-top:hover{background:#111111;translate:0 -3px}.motion-control{display:inline-flex;align-items:center;gap:8px;margin:16px 0;padding:8px 13px;min-height:44px;border:1px solid #DEE3E8;border-radius:24px;background:transparent;color:inherit;font:inherit;font-size:12px;cursor:pointer}.motion-control:before{content:'';width:7px;height:7px;border-radius:50%;background:#626262}.motion-control[aria-pressed=false]:before{background:#626262}.motion-control:disabled{opacity:.7;cursor:default}
/* Keep the page control above the support launcher at every viewport size. */
body:has(#chatbase-bubble-button) .back-top{bottom:92px}
.button,.mode-buttons button,.scenario-buttons button,.case-card,.feature-icon,.back-top{transition:transform .25s ease,translate .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}.button:active,.mode-buttons button:active,.scenario-buttons button:active{transform:scale(.97)}.button>span[aria-hidden],.case-card .arrow,.related a span{transition:transform .25s ease}.button:hover>span[aria-hidden],.case-card:hover .arrow,.related a:hover span{transform:translate(3px,-3px)}
.hero{position:relative;isolation:isolate}.hero:before{content:'';position:absolute;z-index:-1;right:-25px;top:32px;width:min(56vw,610px);height:580px;border-radius:50%;background:radial-gradient(ellipse,#DEE3E87a 0%,#F4F6F830 52%,transparent 72%);pointer-events:none}.hero-product{position:relative;transition:transform .45s ease,box-shadow .45s ease;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(1deg)}.hero-product.demo-playing{box-shadow:0 20px 70px -30px #62626240}.hero-product .output-note{position:relative;overflow:hidden}.hero-product.demo-playing .output-note:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 15%,#DEE3E855 45%,transparent 70%);animation:note-shine 1.8s ease both}.hero-product.demo-playing .voice-wave i{animation:voice-breathe .48s ease-in-out 4 alternate}.voice-wave i:nth-child(3n){animation-delay:-.21s}.voice-wave i:nth-child(4n){animation-delay:-.1s}.voice-wave i:nth-child(5n){animation-delay:-.34s}.hero-product.demo-playing .ready-check{animation:ready-pop .5s 1.25s both}.demo-control{display:flex;align-items:center;gap:9px;justify-content:center;width:100%;margin-top:18px;padding:10px 14px;min-height:44px;border:1px solid #DEE3E8;border-radius:9px;background:#F4F6F899;color:#111111;font:500 12px/1.5 var(--sans);cursor:pointer}.demo-control:hover{background:white}.demo-control .play-icon{font-size:11px}.demo-control:active{transform:scale(.99)}
.scenario-picker{margin:26px 0 18px}.scenario-picker>p{font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:10px;color:#626262}.scenario-buttons{display:flex;flex-wrap:wrap;gap:8px}.scenario-buttons button{font:500 13px/1.4 var(--sans);background:#F4F6F899;color:#111111;border:1px solid #DEE3E8;border-radius:24px;padding:10px 14px;min-height:44px;cursor:pointer}.scenario-buttons button[aria-pressed=true]{background:#FFFFFF;border-color:#626262;box-shadow:0 3px 12px #62626212}.scenario-buttons button:hover{border-color:#626262}.sample-original p{white-space:pre-wrap}.sample-output{min-height:248px}.sample-output-label span:last-child{display:inline-block}.sample-card{transition:box-shadow .35s ease}.sample-card:focus-within{box-shadow:0 16px 44px -26px #11111160}.sample-output-label span:last-child{color:#626262}
.faqs details{transition:background .25s ease}.faqs details[open]{background:#F4F6F840}.faqs details[open] summary:after{content:'+';transform:rotate(45deg)}.faqs summary:after{transition:transform .25s ease}.info-layout aside nav a[aria-current=location]{color:#111111;font-weight:650;text-decoration:underline;text-underline-offset:5px}
@media(hover:hover) and (pointer:fine){.case-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px #11111110}.feature-grid article:hover .feature-icon{transform:translateY(-5px) rotate(-4deg);background:#DEE3E8}.steps article:hover .step-no{color:#111111}.hero-product:hover{box-shadow:0 24px 65px -35px #11111144}}
@keyframes voice-breathe{from{transform:scaleY(.4);opacity:.6}to{transform:scaleY(1.3);opacity:1}}@keyframes note-shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes ready-pop{0%{transform:scale(.7)}65%{transform:scale(1.2)}100%{transform:scale(1)}}
@media(max-width:800px){.hero:before{right:0;width:100%;top:280px;max-height:500px}.hero-product{transform:none}.back-top{bottom:18px;right:16px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.hero-product{transform:none!important}.button:hover,.case-card:hover,.back-top:hover{transform:none;translate:none}}
html[data-motion=off]{scroll-behavior:auto}html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important}html[data-motion=off] .hero-product{transform:none}html[data-motion=off] .button:hover,html[data-motion=off] .case-card:hover,html[data-motion=off] .back-top:hover{transform:none;translate:none}
.demo-control:disabled{cursor:default;opacity:.55}
.release-note{display:inline-flex;align-items:center;gap:9px;font-size:12px;line-height:1.7;color:#626262;margin-top:6px}.release-note:before{content:'';width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#626262}.release-note:hover{text-decoration:underline;text-underline-offset:4px}