/* The original composition, with a separate, optional layer of motion. */
.motion-study{position:relative;z-index:5;border:1px solid #91bbae38;background:#102226;padding:22px 24px;margin:-10px 0 28px;border-radius:5px}
.study-heading,.study-controls{display:flex;align-items:center;justify-content:space-between;gap:20px}.study-heading{margin-bottom:17px}.study-heading .eyebrow{color:#96baad}.study-heading>a{font-size:.8rem;color:#b2c7c0;display:flex;gap:12px}.study-heading>a:hover{color:var(--paper)}
.motion-options{display:flex;gap:6px;padding:4px;background:#091619;border:1px solid #9db7ac1a;border-radius:4px}.motion-options>button{background:transparent;color:#a5b9b3;padding:11px 20px;min-height:45px;border:1px solid transparent;border-radius:3px;font-size:.875rem;display:flex;align-items:center;gap:13px;transition:background .2s,color .2s}.motion-options>button>span{font:400 .7rem var(--mono);opacity:.65}.motion-options>button:hover{color:var(--paper);background:#ffffff08}.motion-options>button[aria-pressed=true]{color:#112b26;background:#c2dccf;border-color:#d0e8dc}.study-pause{display:flex;gap:10px;align-items:center;font-size:.8rem;background:transparent;border:1px solid #a2c6b63d;padding:11px 15px;min-height:44px;border-radius:3px;color:#cadcd4}.study-pause:hover{background:#ffffff0a}.study-description{margin-top:16px;font-size:.875rem;color:#99b2a9;line-height:1.7;max-width:820px}
.product-art{isolation:isolate}.atlas-art:before{content:'';position:absolute;inset:10%;background:radial-gradient(ellipse,#49997d1a,transparent 68%);pointer-events:none}.connection-map{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}.connection-path{fill:none;stroke:#addac3;stroke-width:1;opacity:.14}.connection-packet{fill:#d4f6df;filter:drop-shadow(0 0 3px #addab799)}.portfolio-core{z-index:2}.data-node{z-index:3}.orbit-point{z-index:1}.diagram-detail{padding:0 29px;margin:-2px 0 26px}.diagram-step{display:flex;align-items:center;gap:9px;border-top:1px solid #8db6a321;padding-top:13px;font:400 .7rem/1.6 var(--mono);color:#9cbcaf;min-height:33px}.diagram-led{width:5px;height:5px;border-radius:50%;background:#a5d9ca;flex-shrink:0;box-shadow:0 0 8px #a5d9ca33}.diagram-tick{margin-left:auto;font-size:.65rem;white-space:nowrap;color:#719889}.titan-card .diagram-step{color:#a3bdcc;border-color:#a3bdcc26}.titan-card .diagram-led{background:#b5d8ef}.titan-card .diagram-tick{color:#7e9dae}.titan-scan{position:absolute;top:40px;bottom:60px;width:1px;background:#d0eafa;z-index:3;opacity:.5;pointer-events:none;box-shadow:0 0 9px #a5ddff88}.titan-scan:before{content:'';position:absolute;top:0;bottom:0;right:1px;width:35px;background:linear-gradient(90deg,transparent,#a5ddff12)}.titan-scan:after{content:'';position:absolute;top:-2px;left:-2px;width:5px;height:5px;background:#d6edfa;border-radius:50%}.titan-glow{position:absolute;inset:40px 0 58px;background:radial-gradient(ellipse at var(--scan-x,35%) 50%,#6294b11c,transparent 52%);pointer-events:none}.train-zone,.test-zone,.chart-caption>span{transition:color .35s}.test-zone{z-index:4}.data-node[data-active=true]{border-color:#b4e2c299;color:#e4f7e9;background:#21493e}.chart-caption>span[data-active=true]{color:#f2f8fb}.chart-caption>span[data-active=false]{color:#7e99a6}
.explore-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.explore-controls[hidden],.explore-context[hidden]{display:none}.explore-controls>button{font:400 .75rem/1.4 var(--font);padding:9px 11px;min-height:38px;border-radius:3px;background:#0b1b1c;color:#a6c5b8;border:1px solid #9ec0ae38}.explore-controls>button:hover{border-color:#aecfbb99}.explore-controls>button[aria-pressed=true]{background:#bdd6c7;color:#18342b;border-color:#bdd6c7}.titan-card .explore-controls>button{background:#12242e;color:#b7cbd6;border-color:#9bbccc33}.titan-card .explore-controls>button[aria-pressed=true]{background:#bdd3df;color:#132a38}.explore-context{font-size:.8125rem;line-height:1.65;color:#99b6a9;margin-top:11px;min-height:44px;max-width:430px}.titan-card .explore-context{color:#a3bbc9}
.motion-dock{position:fixed;z-index:40;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;background:#f3f1eb;border-radius:40px;padding:6px;color:#13232d;box-shadow:0 5px 30px #0003;white-space:nowrap;font-size:12px}.motion-dock a{padding:9px 15px;min-height:37px;border-radius:30px;display:flex;gap:13px;align-items:center}.motion-dock a:hover{background:#e0e8df}.motion-dock a[aria-current]{background:#17372f;color:#e7f2e8}.motion-dock a:focus-visible{outline:2px solid #075c5a;outline-offset:2px}.site-footer{padding-bottom:95px}
body[data-motion-paused=true] .diagram-led{box-shadow:none;background:#728c81}body[data-motion-paused=true] .data-node,body[data-motion-paused=true] .chart-caption>span{transition:none}
@media(max-width:1150px){.diagram-detail{padding-inline:24px}.motion-options>button{padding-inline:14px}}
@media(max-width:900px){.motion-study{padding:20px}.study-controls{align-items:flex-start;flex-wrap:wrap;gap:14px}.motion-options{flex:1;justify-content:space-between}.motion-options>button{flex:1;justify-content:center}.study-pause{font-size:.75rem}.diagram-step{font-size:.65rem;gap:7px}.diagram-tick{font-size:.6rem}.diagram-detail{padding-inline:24px}}
@media(max-width:650px){.motion-study{padding:17px 15px;margin-top:0}.study-heading{gap:10px;align-items:flex-start}.study-heading .eyebrow{font-size:.65rem}.study-heading>a{font-size:.7rem;gap:6px}.study-controls{gap:12px}.motion-options{width:100%;flex-basis:100%;gap:3px;padding:3px}.motion-options>button{flex-direction:column;gap:2px;padding:8px 7px;font-size:.75rem;min-height:54px}.motion-options>button>span{font-size:.65rem}.study-pause{padding:8px 12px;min-height:40px}.study-description{font-size:.8125rem;margin-top:13px}.diagram-detail{padding-inline:23px;margin-bottom:24px}.diagram-step{font-size:.68rem}.motion-dock{bottom:10px;max-width:calc(100% - 20px);font-size:11px;gap:3px;padding:5px}.motion-dock a{padding:9px 12px;gap:8px}.site-footer{padding-bottom:90px}.explore-context{min-height:0}.explore-controls>button{min-height:42px}}
@media(max-width:370px){.diagram-detail{padding-inline:19px}.diagram-tick{display:none}.motion-options>button{font-size:.7rem;padding-inline:5px}.study-heading .eyebrow{max-width:135px}.study-heading>a{white-space:nowrap}.motion-dock a{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.data-node,.chart-caption>span{transition:none}}
@media print{.motion-study,.motion-dock{display:none}}
@media(max-width:650px){.site-header{gap:12px}.site-header .brand{min-width:0;flex-shrink:1}}
