.clarity-scene{margin:0;min-width:0;background:#e4eef1;color:#142a34;border-top:4px solid #71c3d9;border-bottom:1px solid #b8cbd2;padding:26px 20px 18px;overflow:hidden}.clarity-scene figcaption{padding:0 8px}.clarity-scene figcaption strong{display:block;font-size:clamp(22px,2.5vw,34px);font-weight:500;letter-spacing:-.04em;line-height:1.2;margin-top:12px}.clarity-scene svg{width:100%;height:auto;display:block;overflow:visible}.clarity-note rect{fill:#fff;stroke:#8eafb9;stroke-width:1.5}.note-decision rect{fill:#d0e9ef;stroke:#236c80}.note-action rect{fill:#fbefcb;stroke:#b68e25}.clarity-note circle,.clarity-note path{fill:none;stroke:#236c80;stroke-width:2.5}.clarity-note .note-symbol{fill:#236c80;font:22px Arial}.note-title{fill:#142a34;font:22px Arial}.note-detail{fill:#4c626c;font:14px Arial}.clarity-bottom{fill:#345765;font:17px Arial}.clarity-trail{fill:none;stroke:#91b2bd;stroke-width:2;stroke-dasharray:5 8;opacity:0}.clarity-route{fill:none;stroke:#236c80;stroke-width:3}.clarity-signal{fill:#f2bf3f;stroke:#755411;stroke-width:1}.clarity-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;font-size:11px;color:#4c626c}.clarity-controls>div{display:flex;gap:8px}.clarity-controls button{background:transparent;color:#236c80;border:1px solid #93b5c1;font-size:12px;padding:8px 12px;min-height:44px;gap:0}.clarity-controls button:hover{transform:none;background:#d1e6ed}.clarity-scene.playing .note-question{animation:question-settle 4800ms both}.clarity-scene.playing .note-decision{animation:decision-settle 4800ms both}.clarity-scene.playing .note-action{animation:action-settle 4800ms both}.clarity-scene.playing .clarity-route{animation:path-connect 4800ms both}.clarity-scene.playing .clarity-trail{animation:trail-clear 4800ms both}.clarity-scene.playing .clarity-signal{animation:signal-connect 4800ms both}.clarity-scene.playing .signal-two{animation-delay:180ms}.clarity-scene.paused *{animation-play-state:paused!important}
@keyframes question-settle{0%,15%{transform:translate(12px,-48px) rotate(-8deg);transform-origin:110px 175px}55%,100%{transform:translate(0,0) rotate(0);transform-origin:110px 175px}}
@keyframes decision-settle{0%,25%{transform:translate(-20px,56px) rotate(8deg);transform-origin:300px 175px}68%,100%{transform:translate(0,0) rotate(0);transform-origin:300px 175px}}
@keyframes action-settle{0%,35%{transform:translate(4px,-32px) rotate(-5deg);transform-origin:490px 175px}78%,100%{transform:translate(0,0) rotate(0);transform-origin:490px 175px}}
@keyframes path-connect{0%,48%{stroke-dasharray:1;stroke-dashoffset:1}90%,100%{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes trail-clear{0%,25%{opacity:.8}70%,100%{opacity:0}}
@keyframes signal-connect{0%,65%{transform:translateY(-25px);opacity:0}85%,100%{transform:translateY(0);opacity:1}}
.engineering-explorer{padding:26px 0}.engineering-explorer>.hero-system{max-width:700px;margin:30px auto;background:#101820;padding:28px}.engineering-explorer summary{font-size:20px}.about-hero{grid-template-columns:1fr 1.15fr;gap:48px}.about-hero .lead{font-size:22px}.about-roadmap{gap:40px}.hero-new>.clarity-scene{align-self:center}.hero-new{grid-template-columns:1fr 1.1fr}
@media(max-width:800px){.about-hero,.hero-new{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding-top:28px}.about-hero h1,.hero-new h1{font-size:clamp(40px,10.8vw,58px);margin:12px 0 16px}.about-hero .lead,.hero-new .hero-lead{font-size:17px;line-height:1.5;margin-bottom:12px}.about-hero .actions,.hero-new .actions{margin-top:14px;gap:12px}.about-hero .button,.hero-new .button{font-size:12px;padding:12px 16px}.hero-foot{display:none}.clarity-scene{padding:18px 10px 12px}.clarity-scene figcaption strong{font-size:24px}.clarity-controls{font-size:10px;gap:8px;align-items:center}.clarity-controls button{padding:8px}.clarity-scene .eyebrow{font-size:9px}.hero-new>.clarity-scene{align-self:stretch}.about-hero .clarity-scene{order:0}.clarity-scene svg{margin-block:0}.about-vision{padding-block:48px}.about-principles{padding-bottom:45px}.engineering-explorer>.hero-system{padding:12px}.clarity-bottom{font-size:18px}}
@media(prefers-reduced-motion:reduce){.clarity-scene *{animation:none!important}.clarity-controls button{display:none}.clarity-trail{opacity:0}}
.clarity-scene{--blue:#236c80;--gold:#755411;--text:#142a34;--muted:#4c626c}
