/* All three concepts share the approved particle atmosphere and original layout. */
.concept-core .particle-atmosphere,.concept-shield .particle-atmosphere,.concept-flow .particle-atmosphere{opacity:.4}
.security-art{margin:0;min-width:0;position:relative;align-self:center;perspective:1000px}
.security-art svg{display:block;width:100%;aspect-ratio:1;overflow:visible}
.security-art figcaption{text-align:center;position:relative;margin:0;font:8px/1.8 var(--mono);color:#8994a4}
.concept-links{display:flex;justify-content:center;gap:20px;margin-bottom:5px}
.concept-links a{padding:6px 2px;color:#8e99a8}.concept-links a[aria-current=page]{color:#e4eaf1}.concept-links a:hover{color:#fff}
.motion-toggle{border:0;background:none;font:8px/1.8 var(--mono);color:#a1a1aa;cursor:pointer;padding:5px 10px;min-height:30px}
.motion-toggle:focus-visible{outline:2px solid #b7c9e1;outline-offset:3px}.motion-toggle:hover{color:#fff}
.core-volume{transform-origin:300px 285px;animation:core-drift 12s ease-in-out infinite;animation-play-state:paused}
.core-code{animation:code-breathe 7s ease-in-out infinite;animation-play-state:paused}
.shield-volume{transform-origin:300px 300px;animation:shield-tilt 12s ease-in-out infinite;animation-play-state:paused}
.shield-light{animation:shield-inspect 8s ease-in-out infinite;animation-play-state:paused}
.code-strands{animation:strand-drift 9s ease-in-out infinite;animation-play-state:paused}
.inspection-plane{animation:plane-light 7s ease-in-out infinite;animation-play-state:paused}
.motion-active svg g,.motion-active .shield-light{animation-play-state:running}
@keyframes core-drift{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes code-breathe{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes shield-tilt{0%,100%{transform:perspective(800px) rotateY(-8deg) rotateZ(-3deg)}50%{transform:perspective(800px) rotateY(8deg) rotateZ(1deg)}}
@keyframes shield-inspect{0%,100%{transform:translateY(-50px);opacity:.15}50%{transform:translateY(95px);opacity:.65}}
@keyframes strand-drift{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@keyframes plane-light{0%,100%{opacity:.55}50%{opacity:1}}
/* A normal thin terminal caret in the grey introduction, including after typing. */
.hero-description{padding-inline-end:.5em}
.hero-description .type-cursor.underscore:after{bottom:-.08em;width:1px;height:.95em;left:.15em;background:currentColor;animation:terminal-caret 1s step-end infinite;animation-play-state:paused}
.hero-description .terminal-rest{display:inline-block;position:relative;width:0;overflow:visible;transform:translateX(.15em);font-weight:400;animation:terminal-caret 1s step-end infinite;animation-play-state:paused}
.type-system .hero-description:not([data-type-state=complete]) .terminal-rest{visibility:hidden}
.hero-motion-active .hero-description .terminal-rest,.hero-motion-active .hero-description .type-cursor:after{animation-play-state:running}
.hero-description .type-cursor.cursor-finished{animation:none}
@keyframes terminal-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(max-width:760px){.security-art{width:min(100%,410px);justify-self:center;margin:-12px 0 -10px}.concept-core .hero,.concept-shield .hero,.concept-flow .hero{padding-bottom:32px;gap:12px}.concept-links{gap:25px}}
@media(prefers-reduced-motion:reduce){.security-art *,.hero-description .terminal-rest,.hero-description .type-cursor:after{animation:none!important;transform:none!important}}
/* Reserve controls before script enhancement; showing Pause must not move the page. */
.security-art figcaption{min-height:65px}
/* Code-to-brand sequences: the logo uses the official, unchanged vector paths. */
.core-volume,.core-code,.shield-volume,.shield-light,.code-strands,.inspection-plane{animation:none}
.core-volume,.core-code,.shield-volume,.morph-logo,.core-shell,.core-kernel{transition:opacity .45s ease,transform .65s cubic-bezier(.2,.7,.2,1);transform-origin:300px 285px;transform-box:view-box}
.morph-logo{opacity:0;transform:scale(.4)}
.security-art[data-phase=transform] .shield-volume,.security-art[data-phase=brand] .shield-volume{opacity:0;transform:scale(.7) rotateY(55deg)}
.security-art[data-phase=transform] .core-shell{opacity:.1;transform:scale(.18) rotate(80deg)}
.security-art[data-phase=transform] .shell-1{transform:scale(.25) rotate(-80deg)}
.security-art[data-phase=transform] .core-kernel{opacity:.4;transform:scale(.45) rotate(45deg)}
.security-art[data-phase=brand] .core-volume,.security-art[data-phase=brand] .core-code{opacity:0;transform:scale(.35)}
.security-art[data-phase=brand] .morph-logo{opacity:1;transform:scale(1)}
.security-art[data-phase=reset] .core-volume,.security-art[data-phase=reset] .core-code,.security-art[data-phase=reset] .shield-volume{opacity:.1;transform:scale(.8)}
.replay-motion,.demo-presets button{font:9px/1.6 var(--mono);color:#b5c2cf;background:transparent;border:1px solid #35414e;border-radius:3px;padding:7px 12px;cursor:pointer}
.replay-motion{margin-bottom:9px}.replay-motion:hover,.demo-presets button:hover{border-color:#889cab;color:#fff}
.replay-motion:focus-visible,.demo-presets button:focus-visible{outline:2px solid #b7c9e1;outline-offset:3px}
[data-concept=core] figcaption,[data-concept=shield] figcaption{min-height:102px}
/* Rapid Matrix-style columns, clipped to the illustration; no flashing backdrop. */
.matrix-rain{opacity:.7}.rain-column{animation:matrix-fall 1.8s linear infinite;animation-play-state:paused}
.rain-1{animation-duration:1.3s;animation-delay:-.7s}.rain-2{animation-duration:2.1s;animation-delay:-1.2s}.rain-3{animation-duration:1.5s;animation-delay:-.3s}.rain-4{animation-duration:1.7s;animation-delay:-1s}
@keyframes matrix-fall{from{transform:translateY(-190px)}to{transform:translateY(190px)}}
[data-concept=flow]{--demo-ink:#a3b6c4}[data-concept=flow][data-verdict=reviewed]{--demo-ink:#7cdaa7}[data-concept=flow][data-verdict=flagged]{--demo-ink:#f18d96}
[data-concept=flow] .inspection-plane{color:var(--demo-ink)}[data-concept=flow] .inspection-plane path{stroke:currentColor}
[data-concept=flow] .code-strands text{font-size:9px;fill:var(--demo-ink)}
.demo-controls{min-height:85px;margin-top:-16px;margin-bottom:6px}.demo-presets{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}.demo-presets button[aria-pressed=true]{background:#17212b;border-color:#74899c;color:#eef4f8}
.demo-status{min-height:18px;margin:7px 0 3px;font:9px/1.8 var(--mono);color:var(--demo-ink)}.demo-note{font:6px/1.8 var(--mono);letter-spacing:.07em;color:#8d9aa8;margin:0}
[data-concept=flow] figcaption{min-height:150px}
.security-art:not(.motion-active) .core-volume,.security-art:not(.motion-active) .core-shell,.security-art:not(.motion-active) .core-code,.security-art:not(.motion-active) .shield-volume,.security-art:not(.motion-active) .morph-logo{transition:none}
@media(prefers-reduced-motion:reduce){.security-art *{transition:none!important}.matrix-rain{opacity:.25}}
.stream-input{animation:code-cross 2.1s linear infinite;animation-play-state:paused}
.motion-active .stream-input{animation-play-state:running}
@keyframes code-cross{0%{transform:translateX(-55px);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateX(365px);opacity:0}}
/* Keep the additional demo controls within a compact desktop hero. */
@media(min-width:761px){.security-art svg{max-height:480px}}
/* Fixed-camera 3D volume; glyph color is assigned in XYZ after the exit plane. */
.telemetry-chart{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.42));border-radius:18px;overflow:hidden}
.flow-stage{position:relative;width:100%;max-width:100%;aspect-ratio:640/400;margin-inline:auto}
.flow-stage svg{width:100%;height:100%;max-height:none}
.hud-spline{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hud-pulse{transform-box:fill-box;transform-origin:center}
.motion-active .hud-pulse{animation:hud-pulse 1.8s ease-in-out infinite}
.motion-active .hud-scan{animation:hud-scan 3.2s linear infinite}
@keyframes hud-pulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes hud-scan{from{transform:translateY(0)}to{transform:translateY(168px)}}
.flow-volume{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.flow-stage[data-render-state=ready] svg{visibility:hidden}
[data-concept=flow][data-verdict=mixed]{--demo-ink:#a3b6c4}
.demo-presets{gap:7px}.demo-presets button{padding:7px 10px}

/* The coding sculpture takes the right half; no object, glass or enclosing frame. */
.concept-flow .flow-stage{max-width:100%;aspect-ratio:640/400}
.concept-flow .flow-stage svg{aspect-ratio:640/400}
.flow-stage[data-render-state=fallback] canvas{visibility:hidden}
.telemetry-copy{margin:0 0 8px;text-align:left}
.telemetry-copy p{margin:0}
@media(min-width:761px){.concept-flow .hero{grid-template-columns:minmax(0,1.15fr) minmax(240px,.92fr);gap:28px;padding-top:48px;padding-bottom:36px;align-items:center}.concept-flow .flow-stage{max-width:100%}.concept-flow .flow-stage svg{max-height:340px}.concept-flow .security-art{width:min(100%,520px);justify-self:end}.concept-flow .security-art figcaption{min-height:0}}
@media(max-width:820px){.concept-flow .security-art{width:min(100%,520px)}}
.concept-flow .demo-controls{margin-top:8px}


/* Real code-editor bar caret instead of a permanently visible typed pipe. */
.precision-home .hero-description .terminal-rest{font-size:0;animation:none!important;transform:none}
.precision-home .hero-description .terminal-rest::after{content:"";display:inline-block;vertical-align:baseline;font-size:12px;width:3px;height:1em;background:currentColor;animation:mg-coding-caret .85s steps(1,end) infinite;animation-play-state:paused}
.precision-home .hero-motion-active .hero-description .terminal-rest::after{animation-play-state:running}
.precision-home .hero-description .type-cursor.vertical:after{width:3px;height:.95em;bottom:-.05em;animation:mg-coding-caret .85s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){.precision-home .hero-description .terminal-rest::after{animation:none!important}}