/* Original RoadReady motion artwork. No video downloads, external runtime or tracking. */
.motion-visual{height:610px;isolation:isolate;background:#101c17;color:#f1f6ee;border:1px solid #d0ecd221;overflow:hidden;box-shadow:0 24px 65px #1b342914}
.scene-topline{position:absolute;top:19px;left:20px;right:17px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:4}.scene-topline>.mono{display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:.12em;color:#b9cfc1}.scene-topline i{width:5px;height:5px;background:#8decc3;border-radius:50%;box-shadow:0 0 12px #86eac188}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 11px;border:1px solid #d9f5e030;border-radius:30px;color:#eaf5eb;background:#172c23b3;font-size:10px;white-space:nowrap;backdrop-filter:blur(10px)}.motion-toggle:hover{background:#2a4939}.motion-toggle [data-motion-icon]{font-size:13px}.motion-toggle:disabled{opacity:.7;cursor:default}.motion-toggle:focus-visible,.scene-demo:focus-visible{outline-color:#99efc7}
.drive-stage{position:absolute;inset:0 0 var(--caption-height,228px);perspective:950px;overflow:hidden;background:radial-gradient(ellipse at 45% 45%,#294d39 0%,#183126 37%,#101c17 74%)}
.scene-halo{position:absolute;width:340px;height:340px;left:50%;top:48%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#8fe6b71b,transparent 68%)}.scene-orbit{position:absolute;left:50%;top:48%;border:1px solid #a4d9b910;border-radius:50%;width:400px;height:400px;transform:translate(-50%,-50%) rotateX(55deg) rotateZ(-25deg)}.orbit-two{width:570px;height:570px;border-style:dashed}
.road-world{position:absolute;left:50%;top:51%;width:600px;height:600px;margin:-300px;transform-style:preserve-3d;transform:translateY(var(--scroll-offset,0px)) rotateX(calc(56deg + var(--tilt-x,0deg))) rotateZ(calc(-31deg + var(--tilt-y,0deg))) scale(.83)}.world-drift{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateZ(-3deg)}.world-drift *{transform-style:preserve-3d}
.city-base,.city-base-edge{position:absolute;inset:25px;border-radius:65px}.city-base{background:linear-gradient(130deg,#adceb0,#96bba2);transform:translateZ(-3px);border:1px solid #d8efcb;box-shadow:12px 25px 50px #0005}.city-base-edge{background:#557f67;transform:translateZ(-19px);box-shadow:0 30px 60px #020e0a60}.city-road{position:absolute;inset:0;width:600px;height:600px;transform:translateZ(0)}.city-road path{fill:none}.road-edge{stroke:#d1dec3;stroke-width:100}.road-surface{stroke:#243b31;stroke-width:87}.road-markings{stroke:#b5cfb9;stroke-width:2;stroke-dasharray:15 16}.road-guide{stroke:#89eac0;stroke-width:3;stroke-dasharray:6 8;opacity:.8}.city-crossing{fill:#d7e8d0}
.city-garden{position:absolute;left:199px;top:213px;width:212px;height:177px;border-radius:22px;background:#82ad88;border:2px solid #c5ddbc;box-shadow:inset 0 0 0 7px #a8cb9c}.city-garden i{position:absolute;left:18px;top:95px;width:100px;height:6px;background:#c5dcba}.city-garden i:nth-child(2){left:115px;top:23px;width:6px;height:123px}.city-garden i:nth-child(3){left:15px;top:15px;width:70px;height:6px}
.city-block{position:absolute}.block-roof,.block-front,.block-side{position:absolute;display:block}.block-roof{inset:0;transform:translateZ(var(--block-h));background:linear-gradient(135deg,#faf6df,#dbe4c9);border:3px solid #edf3dc;border-radius:3px;box-shadow:inset 0 0 0 3px #a6bda04d}.block-roof b{position:absolute;inset:13px;background:repeating-linear-gradient(90deg,#568479 0 5px,#b1c8b4 5px 7px);border:3px solid #bcccb1;border-radius:2px;opacity:.9}.block-front{left:0;top:100%;width:100%;height:var(--block-h);transform-origin:top;transform:rotateX(90deg);background:repeating-linear-gradient(90deg,#b3c8a9 0 12px,#6b9183 12px 18px,#b3c8a9 18px 26px);border:5px solid #bbcdb0}.block-side{left:100%;top:0;width:var(--block-h);height:100%;transform-origin:left;transform:rotateY(-90deg);background:repeating-linear-gradient(0deg,#88a995 0 13px,#497768 13px 20px,#88a995 20px 28px);border:5px solid #91b39b}
.city-tree{position:absolute;width:var(--tree-size);height:var(--tree-size)}.tree-shadow{position:absolute;inset:5px;background:#355b4070;filter:blur(5px);border-radius:50%;transform:translateZ(1px)}.tree-crown{position:absolute;inset:0;border-radius:45% 55% 47% 53%;background:radial-gradient(circle at 30% 25%,#afd99b,#6b9b73 66%,#3d7459);border:1px solid #c3e3aa77;transform:translateZ(43px);box-shadow:5px 10px 12px #244b3e35}.tree-stem{position:absolute;left:calc(50% - 4px);top:50%;width:8px;height:42px;background:#5b7757;transform-origin:top;transform:rotateX(90deg)}.city-bench{position:absolute;left:302px;top:363px;width:27px;height:11px;background:repeating-linear-gradient(0deg,#f0ddbb 0 3px,#728371 3px 5px);transform:translateZ(11px);box-shadow:3px 5px 0 #344e39}
.city-sign{position:absolute;left:493px;top:303px;width:35px;height:35px;transform:translateZ(55px)}.city-sign span{position:absolute;inset:0;transform:rotateZ(31deg) rotateX(-56deg);background:#e6f6d4;color:#214837;border:3px solid #9dcd9f;border-radius:50%;display:grid;place-items:center;font-size:26px;line-height:1}.city-sign i{position:absolute;left:15px;top:18px;width:5px;height:53px;background:#5d7b65;transform-origin:top;transform:rotateX(-90deg)}
.drive-car{position:absolute;left:0;top:0;width:35px;height:69px;offset-path:path('M187 187H413Q443 187 443 217V383Q443 413 413 413H187Q157 413 157 383V217Q157 187 187 187Z');offset-distance:14%;offset-rotate:auto 90deg;offset-anchor:50% 50%;transform-style:preserve-3d}.drive-car>i{position:absolute;display:block}.car-shadow{inset:-5px;background:#031b14a0;filter:blur(6px);border-radius:15px;transform:translateZ(2px)}.car-body{inset:0;border-radius:11px 11px 9px 9px;background:linear-gradient(90deg,#54bb94,#b2ffda 38%,#71d9af 80%,#3ba580);transform:translateZ(17px);border:1px solid #c9ffe3;box-shadow:inset 0 0 0 2px #8debc5}.car-front,.car-back{left:0;width:35px;height:17px;transform-origin:top;transform:rotateX(90deg);background:#399b78;border-radius:3px}.car-front{top:0}.car-back{top:69px;background:#247654}.car-side{top:0;width:17px;height:69px;transform-origin:left;transform:rotateY(-90deg);background:linear-gradient(#58b88b,#368764);border-radius:3px}.side-left{left:0}.side-right{left:35px}.car-body b{position:absolute;display:block}.car-bonnet{top:5px;left:8px;right:8px;height:13px;border-top:1px solid #dafde3;border-bottom:1px solid #3eac843d}.car-windscreen{top:20px;left:4px;right:4px;height:12px;border-radius:6px 6px 1px 1px;background:linear-gradient(135deg,#1b493c,#112f2b 70%,#6cba9f);border:1px solid #8cdfb7;transform:translateZ(4px)}.car-roof{top:32px;left:5px;right:5px;height:16px;background:linear-gradient(90deg,#83dbb4,#c4ffe0,#77d2a8);border-radius:2px;transform:translateZ(5px)}.car-rear-window{top:49px;left:4px;right:4px;height:9px;background:#174c3d;border:1px solid #b1efce;border-radius:1px 1px 4px 4px}.car-headlights{top:1px;left:4px;right:4px;height:3px;background:linear-gradient(90deg,#f5ffdb 0 23%,transparent 23% 77%,#f5ffdb 77%);box-shadow:0 -3px 8px #e8ffbd33}.car-wheel{width:6px;height:13px;background:#142b23;border:1px solid #547967;border-radius:3px;transform:translateZ(7px)}.wheel-fl{left:-3px;top:12px}.wheel-fr{right:-3px;top:12px}.wheel-bl{left:-3px;bottom:11px}.wheel-br{right:-3px;bottom:11px}
.scene-chip{position:absolute;display:flex;gap:10px;align-items:center;z-index:3;border:1px solid #d1eed72b;background:#203b2ee0;backdrop-filter:blur(13px);padding:11px 14px 11px 10px;border-radius:13px;box-shadow:0 14px 30px #05150e26;pointer-events:none}.scene-chip small{display:block;font:7px ui-monospace,monospace;letter-spacing:.1em;color:#abc6b4;margin-bottom:3px}.scene-chip b{display:block;font-weight:500;font-size:11px;letter-spacing:-.02em;color:#f0f8ed}.chip-icon{height:29px;width:29px;display:grid;place-items:center;border-radius:50%;background:#8ee9bd;color:#1c4230;font-size:21px}.chip-observe{top:100px;left:19px;transform:rotate(-5deg)}.chip-reason{bottom:20px;right:19px;transform:rotate(4deg)}
.scene-caption{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:25px 25px 20px;background:linear-gradient(0deg,#101c17 85%,#101c17dd);border-top:1px solid #b0dfbf16}.scene-caption>.mono{display:flex;justify-content:space-between;gap:10px;font-size:7px;color:#9dbda9}.scene-caption h3{margin:14px 0 19px;font-size:29px;line-height:1.12;letter-spacing:-.04em}.scene-phases{display:flex;gap:8px}.scene-phases span{flex:1;padding-top:9px;border-top:2px solid #77a38d50;font:8px ui-monospace,monospace;letter-spacing:.03em;color:#b8cebe}.scene-phases span:first-child{border-color:#8de9bd;color:#a0f4c7}.scene-demo{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:42px;margin-top:11px;font-size:11px;color:#bbf2cd;text-align:left;border-top:1px solid #b0dfbf17}.scene-demo>span{font-size:20px}.scene-demo:hover{color:#fff}
.motion-ribbon{margin:15px 0 0;overflow:hidden;border-block:1px solid var(--line);padding:22px 0;background:var(--soft);user-select:none}.ribbon-track{display:flex;width:max-content;transform:translateX(-5%)}.ribbon-track>div{display:flex;align-items:center;gap:45px;padding-right:45px;flex-shrink:0}.ribbon-track span{font-size:clamp(20px,2.3vw,34px);letter-spacing:-.045em;line-height:1.2}.ribbon-track i{font-size:32px;font-style:normal;color:var(--mint-ink)}
.footer-motion{font-size:inherit;color:inherit;min-height:44px;display:flex;align-items:center;gap:10px;padding:4px 0}.footer-motion:hover{text-decoration:underline;text-underline-offset:4px}.footer-motion:disabled{opacity:.6;cursor:default}
.motion-heading{opacity:1}.motion-heading.is-motion-ready{transition:opacity .85s,transform .85s cubic-bezier(.2,.8,.2,1);transform:translateY(0)}html[data-motion=running] .motion-heading.is-motion-ready:not(.motion-entered){opacity:0;transform:translateY(25px)}
html[data-motion] .world-drift{animation:city-orbit 18s ease-in-out infinite alternate}html[data-motion] .drive-car{animation:drive-loop 20s linear infinite}html[data-motion] .road-guide{animation:guide-flow 3s linear infinite}html[data-motion] .scene-halo{animation:halo-breathe 7s ease-in-out infinite alternate}html[data-motion] .scene-chip{animation:chip-float 6s ease-in-out infinite alternate}html[data-motion] .chip-reason{animation-delay:-3s;animation-direction:alternate-reverse}html[data-motion] .ribbon-track{animation:ribbon-travel 32s linear infinite}html[data-motion] .scene-phases span{animation:study-phase 18s ease-in-out infinite}html[data-motion] .scene-phases span:nth-child(2){animation-delay:-12s}html[data-motion] .scene-phases span:nth-child(3){animation-delay:-6s}
html[data-motion] .feature-art .road-scene{animation:feature-breathe 9s ease-in-out infinite alternate}html[data-motion] .feature-art path[stroke-dasharray]{animation:lane-flow 4s linear infinite}.feature-art{perspective:900px}.feature-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,transparent 38%,#edffe426 47%,transparent 56%);transform:translateX(-120%)}html[data-motion] .feature-art:after{animation:feature-sheen 9s ease-in-out infinite}
html[data-motion=running] .phone{transform:perspective(1100px) translateY(var(--scroll-offset,0px)) rotateX(calc(4deg + var(--tilt-x,0deg))) rotateY(calc(-12deg + var(--tilt-y,0deg))) rotateZ(5deg);transition:transform .5s ease,box-shadow .5s}.phone-stage{perspective:1100px}html[data-motion] .phone-float{animation:phone-note-float 6s ease-in-out infinite alternate}
html[data-motion=running] .learning-curve .curve-draw{transition:none;stroke-dashoffset:calc(1 - var(--curve-progress,1))}.path-card{transition:background .4s,border-color .4s,transform .4s;border-radius:0 0 18px 18px}.path-card[data-path-active=true]{border-color:var(--mint-ink)}.path-card[data-path-active=true] .path-link{color:var(--mint-ink)}
@media(hover:hover) and (pointer:fine){html[data-motion=running] .article-card .card-art{transform:perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s,box-shadow .3s}html[data-motion=running] .article-card:hover .card-art{box-shadow:0 20px 34px #17372820}html[data-motion=running] .path-card:hover{transform:translateY(-6px)}html[data-motion=running] .about-photo img{transition:transform 1s}html[data-motion=running] .about-photo:hover img{transform:scale(1.04)}}
html[data-motion=paused] *,html[data-motion=paused] *:before,html[data-motion=paused] *:after{animation-play-state:paused!important}html[data-motion=paused] .motion-heading{opacity:1!important;transform:none!important}html[data-motion=paused] .learning-curve .curve-draw{stroke-dashoffset:0}html[data-motion=paused] .road-world{transform:rotateX(56deg) rotateZ(-31deg) scale(.83)}
[data-motion-visible=false] *,[data-motion-visible=false]:after{animation-play-state:paused!important}
@keyframes city-orbit{from{transform:rotateZ(-3deg) translateZ(0)}to{transform:rotateZ(5deg) translateZ(8px)}}@keyframes drive-loop{from{offset-distance:14%}to{offset-distance:114%}}@keyframes guide-flow{to{stroke-dashoffset:-56}}@keyframes halo-breathe{from{opacity:.45;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1.16)}}@keyframes chip-float{from{translate:0 0}to{translate:0 -12px}}@keyframes ribbon-travel{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes study-phase{0%,27%{border-color:#8de9bd;color:#a0f4c7}34%,94%{border-color:#77a38d50;color:#9fb4a5}100%{border-color:#8de9bd;color:#a0f4c7}}@keyframes feature-breathe{from{transform:scale(1.01) translateY(0)}to{transform:scale(1.055) translateY(-5px)}}@keyframes lane-flow{to{stroke-dashoffset:-52}}@keyframes feature-sheen{0%,25%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}@keyframes phone-note-float{from{translate:0 0}to{translate:0 -10px}}
@media(max-width:1150px){.motion-visual{height:560px}.road-world,html[data-motion=paused] .road-world{scale:.91}.scene-caption{padding:22px 22px 16px}.scene-caption h3{font-size:26px}.chip-observe{left:13px;top:91px}.chip-reason{right:13px;bottom:18px}}
@media(max-width:850px) and (min-width:601px){.motion-visual{height:520px}.scene-topline{left:13px;right:12px}.scene-topline>.mono{font-size:6px;gap:5px}.motion-toggle{font-size:9px;padding:6px 9px}.scene-caption{padding:19px 17px 13px}.scene-caption h3{font-size:24px}.scene-caption>.mono{font-size:6px}.scene-chip{padding:9px;gap:7px}.scene-chip b{font-size:9px}.scene-chip small{font-size:6px}.chip-icon{width:24px;height:24px;font-size:17px}.road-world,html[data-motion=paused] .road-world{scale:.79}.chip-observe{top:80px}.drive-stage{bottom:var(--caption-height,228px)}}
@media(max-width:600px){.motion-visual{height:560px;margin-inline:0}.scene-topline{left:16px;right:14px}.scene-topline>.mono{font-size:7px}.scene-caption{padding:22px 20px 16px}.scene-caption h3{font-size:27px}.road-world,html[data-motion=paused] .road-world{scale:.91}.drive-stage{bottom:var(--caption-height,228px)}.scene-chip{padding:10px;gap:8px}.scene-chip b{font-size:10px}.chip-observe{top:91px;left:15px}.chip-reason{right:14px;bottom:19px}.motion-ribbon{padding-block:19px;margin-top:5px}.ribbon-track>div{gap:27px;padding-right:27px}.ribbon-track i{font-size:26px}.footer-motion{order:4}}
@media(max-width:360px){.motion-visual{height:525px}.scene-topline>.mono{font-size:6px}.motion-toggle{font-size:9px;padding:7px 9px}.scene-caption{padding:19px 16px 13px}.scene-caption h3{font-size:24px}.road-world,html[data-motion=paused] .road-world{scale:.8}.chip-observe{left:12px;top:80px}.chip-reason{right:12px;bottom:12px}.scene-chip b{font-size:9px}.scene-chip small{font-size:6px}.drive-stage{bottom:var(--caption-height,228px)}}
@media(prefers-reduced-motion:reduce){.road-world{transform:rotateX(56deg) rotateZ(-31deg) scale(.83)!important}.motion-heading{opacity:1!important;transform:none!important}.learning-curve .curve-draw{stroke-dashoffset:0!important}.ribbon-track{transform:none}.phone{transform:rotate(5deg)!important}}
@supports not (offset-path:path('M0 0L1 1')){.drive-car{left:265px;top:153px;transform:rotate(90deg);animation:none!important}}
@media print{.motion-ribbon,.motion-toggle,.footer-motion{display:none!important}}

html[data-motion=paused] .js .reveal,html[data-motion=paused].js .reveal{opacity:1;transform:none;transition:none}html[data-motion=paused] .hero h1 .line>span{animation:none!important;opacity:1;transform:none}