/* Keep the document in ordinary flow. Only decorative layers take a small scroll impulse. */
.kinetic-layer{translate:0 var(--scroll-lift,0px);rotate:var(--scroll-lean,0deg);transform-origin:50% 50%}
.system-figure:before{background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,48%),#637e6e3d,transparent 66%);transition:opacity .4s}
.system-map .map-wire{stroke:#75897d;transition:stroke .4s}.system-figure:is(:hover,:focus-within) .map-wire{stroke:#a3bbad}
.chapter-heading,.section-heading{position:relative}.chapter-heading:after,.section-heading:after{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,#d6e3db,transparent);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.motion-seen.chapter-heading:after,.motion-seen.section-heading:after{animation:rule-arrive 1.5s cubic-bezier(.18,.7,.2,1) both}.motion-seen.impact-facts dt{animation:fact-light 1.4s ease-out both}
.section-glyph svg{animation:glyph-turn 36s linear infinite}.chapter-number{transition:text-shadow .3s,color .3s}.chapter-heading:hover .chapter-number{color:#e4ece7;text-shadow:0 0 12px #acc6b788}
.gateway-orbits{animation:gateway-drift 19s ease-in-out infinite paused}.gateway-orbits ellipse{transform-origin:311px 194px;animation:orbit-turn 26s linear infinite paused}.gateway-orbits ellipse:nth-child(2){animation-direction:reverse;animation-duration:34s}.gateway-core{animation:core-breathe 5.5s ease-in-out infinite paused;transform-origin:311px 194px}
.sketch-sheets>path{transform-origin:299px 190px;animation:sheet-fan 7s ease-in-out infinite paused}.sketch-sheets>path:nth-child(2){animation-delay:-3.5s;animation-direction:reverse}.data-figure .signal-path{animation-duration:5s}.data-figure .event-field circle{animation-duration:4s}
.diagram-in-view .gateway-orbits ellipse,.diagram-in-view .gateway-core,.diagram-in-view .sketch-sheets>path{animation-play-state:running}
/* Tactile collage layers: respond to hover and keyboard focus without moving the text. */
.side-visual .assembly-paper,.side-visual .assembly-tape,.side-visual .trillboards-mark,.side-visual .aleqth-mark{transition:translate .65s cubic-bezier(.2,.8,.2,1),rotate .65s cubic-bezier(.2,.8,.2,1),filter .65s}
.side-card:is(:hover,:focus-within) .paper-one{translate:-8px 4px;rotate:-3deg}.side-card:is(:hover,:focus-within) .paper-two{translate:8px -5px;rotate:4deg}.side-card:is(:hover,:focus-within) .assembly-tape{translate:3px -5px;rotate:5deg}.side-card:is(:hover,:focus-within) :is(.trillboards-mark,.aleqth-mark){translate:0 -6px;filter:drop-shadow(0 10px 12px #0008)}
.side-visual:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,50%),#b8cec117,transparent 55%);opacity:0;transition:opacity .45s}.side-card:is(:hover,:focus-within) .side-visual:after{opacity:1}
.text-link svg,.source-link .source-icon,.article-cta svg{transition:translate .3s}.text-link:hover svg,.text-link:focus-visible svg,.source-link:hover .source-icon,.source-link:focus-visible .source-icon{translate:3px -3px}.source-link:hover .article-cta svg{translate:3px -3px}.demo-button:active,.demo-replay:active{translate:0 1px}
/* Routing is an illustration of the common interface, with manually selectable model paths. */
.gateway-controls,.cache-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 12px}.gateway-controls[hidden],.cache-controls[hidden]{display:none}.gateway-controls>span,.cache-controls>span{font:10px/1.5 CourierPrime,monospace;letter-spacing:.07em;color:#abbab1;margin-right:auto}.gateway-controls .demo-button,.cache-controls .demo-button{min-height:38px;padding:8px 12px}
.route-status,.cache-status{font:12px/1.7 CourierPrime,monospace;color:#c0d0c7;min-height:42px;margin:0 0 16px}.gateway-figure [data-model]{transition:opacity .4s}.gateway-figure[data-route=image] [data-model=text],.gateway-figure[data-route=text] [data-model=image]{opacity:.8}.gateway-figure[data-route=image] [data-model=image] rect,.gateway-figure[data-route=text] [data-model=text] rect{fill:#2c3b32;stroke:#cdddd4}.model-stream{stroke:#d4e2da;stroke-width:2;fill:none;stroke-dasharray:16 120;filter:drop-shadow(0 0 4px #a6c3b2);animation:model-flow 3.2s linear infinite paused}.diagram-in-view .model-stream{animation-play-state:running}.gateway-figure[data-route=image] .model-stream[data-model=text],.gateway-figure[data-route=text] .model-stream[data-model=image]{opacity:.12;animation-play-state:paused}
.gateway-mobile [data-model]{transition:border-color .4s,opacity .4s,background .4s}.gateway-figure[data-route=image] .gateway-mobile [data-model=image],.gateway-figure[data-route=text] .gateway-mobile [data-model=text]{border-color:#c3d6cb;background:#2b3630}.gateway-mobile .mobile-core{position:relative}.gateway-mobile .mobile-core:after{content:'';position:absolute;inset:-13px;border:1px solid #93ae9e55;border-radius:50%;rotate:-25deg;scale:1.12 .82;animation:orbit-turn 18s linear infinite paused}.diagram-in-view .mobile-core:after{animation-play-state:running}
/* The cache sequence runs on its own clock once requested. */
.cache-path{stroke:#b1cabb;stroke-width:2;fill:none;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 5px #8db29c)}.cache-figure[data-cache-phase=lookup] .cache-lookup{animation:trace-route .7s ease-out forwards}.cache-figure[data-cache-phase=execute] .cache-execute{animation:trace-route .75s ease-out forwards}.cache-figure[data-cache-phase=store] .cache-store{animation:trace-route .8s ease-out forwards}.cache-figure[data-cache-phase=hit] .cache-lookup{stroke-dashoffset:0;opacity:1}.cache-figure[data-cache-phase=execute] .cache-worker rect,.cache-figure[data-cache-phase=store] .cache-result rect,.cache-figure[data-cache-phase=hit] .cache-result rect{fill:#2b352f;stroke:#cdddd4;filter:drop-shadow(0 0 9px #779d8755)}
.cache-mobile .mobile-dependency,.cache-mobile .map-endpoints>span{transition:border-color .4s,background .4s}.cache-figure[data-cache-phase=execute] .cache-mobile [data-cache-branch=miss],.cache-figure[data-cache-phase=hit] .cache-mobile [data-cache-branch=hit],.cache-figure[data-cache-phase=store] .cache-mobile .mobile-dependency:last-child{border-color:#cdddd4;background:#2b352f}.cache-controls .demo-button[aria-busy=true]{border-color:#b1c8bb}.cache-controls .demo-button:disabled{cursor:wait;opacity:.8}
.upgrade-ready .gated-node rect,.upgrade-ready .dependency-node rect{animation:eligibility-light 1.2s ease-out both}.upgrade-ready .dependency-node rect{animation-delay:.18s}.symbol-resolved .symbol-definition{animation:definition-arrive .75s cubic-bezier(.2,.8,.2,1) both}.symbol-resolved .resolution-path{background:linear-gradient(90deg,#5d786825,transparent);background-size:200% 100%;animation:resolution-pass 1.2s ease-out both}
@keyframes rule-arrive{0%{transform:scaleX(0);opacity:.8}65%{transform:scaleX(1);opacity:.7}100%{transform:scaleX(1);opacity:0}}
@keyframes fact-light{0%{text-shadow:0 0 0 transparent}45%{text-shadow:0 0 20px #93b6a255}100%{text-shadow:0 0 0 transparent}}
@keyframes glyph-turn{to{rotate:360deg}}@keyframes orbit-turn{to{transform:rotate(360deg)}}
@keyframes core-breathe{0%,100%{filter:drop-shadow(0 0 9px #72978144)}50%{filter:drop-shadow(0 0 23px #93b5a177)}}
@keyframes sheet-fan{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(0,-8px) rotate(-4deg)}}
@keyframes model-flow{to{stroke-dashoffset:-272}}
@keyframes trace-route{0%{stroke-dashoffset:1;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes eligibility-light{0%{filter:drop-shadow(0 0 0 transparent)}35%{filter:drop-shadow(0 0 12px #b7cec166)}100%{filter:drop-shadow(0 0 0 transparent)}}
@keyframes definition-arrive{0%{translate:0 6px}100%{translate:0 0}}
@keyframes resolution-pass{from{background-position:100% 0}to{background-position:0 0}}
@media(max-width:650px){.gateway-controls>span,.cache-controls>span{font-size:10px}.gateway-controls .demo-button,.cache-controls .demo-button{font-size:11px;min-height:44px}.route-status,.cache-status{font-size:12px}.gateway-mobile{padding-top:30px}.cache-controls{gap:6px}}
.motion-paused .kinetic-layer{translate:none!important;rotate:none!important}.motion-paused .side-card *{translate:none!important;rotate:none!important}.motion-paused .system-figure:before{background-position:50% 50%}.motion-paused .model-stream{animation:none!important}.page-sleeping *,.page-sleeping *:before,.page-sleeping *:after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.kinetic-layer{translate:none!important;rotate:none!important}.side-card *{translate:none!important;rotate:none!important}.gateway-orbits ellipse,.gateway-core,.sketch-sheets>path,.model-stream,.section-glyph svg,.chapter-heading:after,.section-heading:after,.impact-facts dt,.mobile-core:after{animation:none!important}.text-link svg,.source-link .source-icon,.article-cta svg{transition:none;translate:none!important}}
/* Details stay in the flow of the portfolio, with native disclosure semantics. */
.project-notes{margin:26px 0 22px;border-top:1px solid #64766c66;border-bottom:1px solid #64766c66;min-width:0}.project-notes summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 0;color:#cadad1;cursor:pointer;font:13px/1.7 CourierPrime,monospace}.project-notes summary::-webkit-details-marker{display:none}.project-notes summary>span{font-size:21px;flex:none;transition:rotate .3s}.project-notes[open] summary>span{rotate:45deg}.project-notes summary:hover{color:#e7eeea}.project-notes-body{padding:2px 0 24px}.project-notes-body h5,.prototype-list h4{font:400 20px/1.4 CourierPrime,monospace;letter-spacing:-.025em;margin:24px 0 10px;color:#d8e4dd}.project-notes-body p{font:15px/1.8 Arial,sans-serif;color:#bcc4bf;margin:12px 0 20px}.project-notes-body .notes-source{font:12px/1.7 CourierPrime,monospace;color:#abb6b0;margin:22px 0 0}.project-notes[open] .project-notes-body{animation:notes-arrive .35s ease-out both}.inline-diff{border-left:1px solid #8fa99a;padding:12px 0 12px 17px;margin:24px 0;background:linear-gradient(90deg,#32433930,transparent);white-space:pre-wrap}.inline-diff>span{display:block;font:10px/1.7 CourierPrime,monospace;color:#a8b8af;margin-bottom:13px}.inline-diff code{font:15px/1.8 CourierPrime,monospace}.inline-diff del{color:#bf8eaa;text-decoration:none}.inline-diff ins{color:#d8e4dd;text-decoration:none}.prototype-list{list-style:none;padding:0;margin:0}.prototype-list li+li{border-top:1px solid #54655b44;padding-top:4px}.prototype-notes{max-width:65ch}.project-notes-body a{text-decoration-color:#6f8076}.project-notes-body a:hover{text-decoration-color:#cadbd1}
@keyframes notes-arrive{from{translate:0 5px}to{translate:0 0}}
@media(max-width:650px){.project-notes summary{font-size:12px;min-height:48px}.project-notes-body p{font-size:14px}.project-notes-body h5,.prototype-list h4{font-size:19px}.prototype-notes{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.project-notes[open] .project-notes-body{animation:none}.project-notes summary>span{transition:none}}