/* Animated light and semantic traces extend the accepted layout and brand. */
.motion-title-line{display:inline-block;transform-origin:left center;max-width:100%}
.motion-ready .hero-art{transition:transform 480ms cubic-bezier(.2,.65,.2,1);transform-origin:79% 49%;will-change:transform}
.motion-hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;transition:transform 500ms cubic-bezier(.2,.65,.2,1)}
.motion-portal-light{position:absolute;left:68%;top:8%;width:24%;height:70%;background:radial-gradient(ellipse,rgba(184,218,255,.52),rgba(233,193,118,.12) 42%,transparent 71%);mix-blend-mode:screen;opacity:0;transform-origin:50% 60%}
.motion-portal-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round}
.motion-gate-outline{stroke:#e1ba6e;stroke-width:.65;opacity:.18}
.motion-gate-travel{stroke:#fff0b9;stroke-width:1.8;opacity:.8;filter:drop-shadow(0 0 3px #d7ac54)}
.motion-ground-travel{stroke:#73a3d8;stroke-width:.8;opacity:.35}
.motion-gate-language{position:absolute;left:66%;top:51%;max-width:30%;overflow:hidden;white-space:nowrap;opacity:0;font:500 13px/1.8 var(--sans);letter-spacing:.15em;color:#15477d;text-shadow:0 0 18px #fff;background:rgba(255,255,255,.7);padding:8px 15px;border:1px solid #d8bd88;border-radius:6px;box-shadow:0 5px 25px #c8d8ef77}
.motion-gate-opening .motion-portal-light{background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(153,202,255,.35) 44%,transparent 72%)}
.motion-page-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#b99155,#527cb3 48%,#0f57ad);transform:scaleX(0);transform-origin:left;opacity:.72;pointer-events:none}
.motion-toggle{position:relative;right:auto;bottom:auto;z-index:28;display:flex;flex-shrink:0;align-items:center;gap:8px;border:1px solid #d3deeb;border-radius:24px;min-height:39px;padding:8px 14px;background:rgba(255,255,255,.94);box-shadow:0 5px 18px #102b4e0b;backdrop-filter:blur(12px);color:#60738d;font:11px/1.3 var(--sans);letter-spacing:.03em}
.motion-toggle-dot{width:5px;height:5px;background:#2866aa;border-radius:50%;box-shadow:0 0 0 3px #e9f1fb}
.motion-toggle[aria-pressed="false"] .motion-toggle-dot{background:#93a1b2;box-shadow:none}
.motion-toggle:disabled{opacity:.85}
.experience{position:relative}
.motion-language-packet{position:absolute;z-index:12;left:0;top:0;opacity:0;pointer-events:none;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 12px;border-radius:4px;border:1px solid #d9bd89;background:#fffdf8;color:#8c682d;font:11px/1.6 var(--sans);box-shadow:0 5px 14px #a4804212}
.motion-ready .language-connector{min-height:172px}
.motion-ready .connector-line{opacity:0}
.motion-ready .language-core{z-index:2;line-height:1.5;padding:0 17px}
.motion-semantic-orbit{position:absolute;left:-20px;right:-20px;top:2px;width:calc(100% + 40px);height:150px;fill:none;overflow:visible;stroke-linecap:round;pointer-events:none}
.motion-path-base{stroke-width:.6;opacity:.38}
.motion-path-base.gold{stroke:#c59c56}.motion-path-base.blue{stroke:#5484bb}
.motion-semantic-forward{stroke:#c09546;stroke-width:1.35}
.motion-semantic-return{stroke:#1c69bb;stroke-width:1.35}
.motion-semantic-dot{opacity:0;stroke:none;transform-origin:0 0}
.motion-semantic-dot.gold{fill:#d2a755;filter:drop-shadow(0 0 4px #ddbd7c)}
.motion-semantic-dot.blue{fill:#2475cb;filter:drop-shadow(0 0 4px #a7c7ef)}
.motion-ready .connector-caption{bottom:-1px;z-index:3;background:white;padding:2px 5px;font-size:10px;max-width:100%;line-height:1.7;text-align:center}
.motion-ready .editor{position:relative}
.motion-ready #workspace[data-state="running"] .editor::after{content:"";position:absolute;top:0;left:0;width:140px;height:2px;background:linear-gradient(90deg,transparent,#8ab9ee,transparent);animation:runtime-trace 2s linear infinite;pointer-events:none}
@keyframes runtime-trace{from{transform:translateX(-150px)}to{transform:translateX(950px)}}
.motion-ready .code-line{transform-origin:left center}
.motion-ready #world-content.world-reveal{animation:none}
.motion-ready .gate-transition{display:none}
body[data-motion="off"] .motion-hero-fx,body[data-motion="reduced"] .motion-hero-fx{opacity:0}
body[data-motion="off"] .motion-semantic-forward,body[data-motion="off"] .motion-semantic-return,body[data-motion="reduced"] .motion-semantic-forward,body[data-motion="reduced"] .motion-semantic-return{opacity:0}
body[data-motion="off"] .hero-art,body[data-motion="reduced"] .hero-art{transition:none;will-change:auto}
body[data-motion="off"] #workspace[data-state="running"] .editor::after,body[data-motion="reduced"] #workspace[data-state="running"] .editor::after{animation:none;display:none}
body[data-motion="off"] .motion-hero-fx{transition:none}
@media(max-width:1050px){.motion-semantic-orbit{left:-10px;right:-10px;width:calc(100% + 20px)}.motion-gate-language{font-size:11px;left:70%;top:51%;letter-spacing:.06em;padding:6px 10px}}
@media(max-width:760px){.motion-portal-trace{display:none}.motion-portal-light{left:64%;top:auto;bottom:11%;height:33%;width:36%}.motion-gate-language{left:42%;top:auto;bottom:21%;max-width:55%;font-size:11px;padding:6px 10px}.motion-toggle{right:12px;bottom:12px;padding:8px 11px;min-height:36px;font-size:10px}.motion-ready .language-connector{min-height:140px}.motion-semantic-orbit{width:min(310px,100%);left:50%;right:auto;top:-9px;transform:translateX(-50%);height:140px}.motion-ready .language-core{font-size:31px;padding:0 17px}.motion-ready .connector-caption{font-size:9px;bottom:-4px}.motion-language-packet{font-size:9px;max-width:180px;padding:4px 8px}.motion-ready .hero-art{will-change:auto}}
@media(prefers-reduced-motion:reduce){.motion-title-line,.motion-hero-fx,.motion-semantic-orbit,.motion-language-packet,.motion-toggle{transition:none}.motion-hero-fx,.motion-semantic-forward,.motion-semantic-return,.motion-language-packet{display:none}}
@media(max-width:760px){.motion-ready .hero h1{font-size:clamp(36px,10.7vw,42px)}}
body[data-motion="off"] *,body[data-motion="off"] *::before,body[data-motion="off"] *::after{transition:none;animation:none}

.motion-ready .header-inner nav{margin-left:auto}
@media(max-width:390px){.motion-ready .section-heading h2{font-size:25px}}
@media(max-width:760px){.motion-ready .header-inner{gap:9px}.motion-ready .header-inner nav{gap:10px}.motion-toggle{position:relative;right:auto;bottom:auto;width:42px;min-width:42px;min-height:42px;padding:5px;gap:0;border-radius:8px;box-shadow:none;justify-content:center;text-align:center}.motion-toggle-dot{display:none}.motion-toggle-label{display:block;max-width:22px;line-height:1.25;word-break:break-all}}