/* Motion enhances already-visible content; nothing depends on an animation to read. */
.reading-progress{position:fixed;inset:0 0 auto;height:3px;background:#92b66d;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 #cbd9bd;background:#203e35;color:#f7f8f3;font-size:22px;box-shadow:0 6px 24px #203e3522;z-index:40;cursor:pointer}.back-top[hidden]{display:none}.back-top:hover{background:#385d46;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 #ccd8c5;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:#759f44}.motion-control[aria-pressed=false]:before{background:#a0a89a}.motion-control:disabled{opacity:.7;cursor:default}
.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,#dce9c47a 0%,#edf2e430 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 #426a4540}.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%,#d9ecb155 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 #c3d1b6;border-radius:9px;background:#f7f9f099;color:#36523e;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:#566d57}.scenario-buttons{display:flex;flex-wrap:wrap;gap:8px}.scenario-buttons button{font:500 13px/1.4 var(--sans);background:#f7f9f099;color:#435e46;border:1px solid #c9d5bd;border-radius:24px;padding:10px 14px;min-height:44px;cursor:pointer}.scenario-buttons button[aria-pressed=true]{background:#fff;border-color:#628344;box-shadow:0 3px 12px #426a4512}.scenario-buttons button:hover{border-color:#628344}.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 #3b542b60}.sample-output-label span:last-child{color:#7c995c}
.faqs details{transition:background .25s ease}.faqs details[open]{background:#eef3e740}.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:#355a2c;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 #203e3510}.feature-grid article:hover .feature-icon{transform:translateY(-5px) rotate(-4deg);background:#e3edce}.steps article:hover .step-no{color:#345b37}.hero-product:hover{box-shadow:0 24px 65px -35px #243e3544}}
@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:#52723b;margin-top:6px}.release-note:before{content:'';width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#8fa964}.release-note:hover{text-decoration:underline;text-underline-offset:4px}
