/* Scoped updates from the supplied motion references. */
#parameter-graph{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:36px}
#parameter-graph .graph-view{height:auto;aspect-ratio:1040/850;overflow:visible;min-height:0}
#parameter-graph .parameter-focus{inset:0;transform:rotateX(7deg) rotateY(-13deg) rotateZ(8deg) scale(.96)}
.parameter-model-scene{display:flex;flex-direction:column;justify-content:center;gap:12px;padding-block:22px}
.parameter-model-scene .plant-heading h2{font-size:clamp(1.8rem,3.5vw,3.75rem)}
.parameter-demonstration{display:grid;grid-template-columns:55% 45%;align-items:center;min-height:0;flex:1;width:100%;max-width:1450px;perspective:1400px}
.parameter-model{position:relative;height:100%;min-height:0;min-width:0}
.parameter-model img,.parameter-model canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.parameter-model canvas{visibility:hidden}.parameter-model.ready canvas{visibility:visible}.parameter-model.ready img{visibility:hidden}
.parameter-controls{width:100%;height:100%;min-height:0;transform:rotateY(-15deg) rotateZ(-5deg);transform-origin:center}
.hero-parameter-cards{width:100%;height:100%;max-height:640px;filter:drop-shadow(6px 16px 10px #0003)}
.hero-value-card{opacity:.65;transition:opacity .18s}
.hero-value-card.active{opacity:1}.hero-value-card.active .parameter-number{fill:#b4ffc2}
.parameter-number{font-variant-numeric:tabular-nums}
.parameter-manual{display:none}.parameter-manual input{display:block;accent-color:var(--accent);width:100%;min-height:44px}
.motion-off .parameter-manual{display:block;width:min(360px,100%);font-size:.8125rem}
.motion-off .parameter-demonstration{height:min(600px,65vw);min-height:340px;flex:none}
.mark-fill{opacity:clamp(0,calc((var(--mark-progress,1) - .7) / .3),1)}
.mark-trace{stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,var(--mark-progress,1) / .7,1));opacity:clamp(0,calc((1 - var(--mark-progress,1)) / .2),1);filter:drop-shadow(0 0 2px #63e84780)}
@media(max-width:800px){
 #parameter-graph{grid-template-columns:1fr;gap:26px}
 #parameter-graph .graph-view{aspect-ratio:540/940;width:100%;max-width:520px;justify-self:center}
 #parameter-graph .parameter-focus{transform:rotateX(3deg) rotateY(-5deg)}
 .parameter-model-scene{padding:20px var(--gutter);gap:8px}
 .parameter-model-scene .plant-heading h2{font-size:clamp(1.7rem,6.2vw,2.6rem);max-width:23ch}
 .parameter-model-scene h2 br{display:none}
 .parameter-demonstration{grid-template-columns:49% 51%}
 .parameter-controls{transform:rotateY(-7deg) rotateZ(-3deg)}
 .hero-parameter-cards{overflow:visible}
 .motion-off .parameter-demonstration{height:440px;min-height:0}
}
@media(prefers-reduced-motion:reduce){.parameter-controls,#parameter-graph .parameter-focus{transform:none}.hero-value-card{transition:none}}
@media(max-width:800px){.parameter-controls{overflow:hidden;display:flex;align-items:center}.hero-parameter-cards{width:100%;height:auto;max-width:none;overflow:hidden}}
/* Focus moves down the parameter cards as each connected dimension changes. */
.parameter-controls{transform:rotateX(4deg) rotateY(-19deg) rotateZ(7deg);overflow:hidden;border-radius:14px}
.hero-parameter-cards{overflow:hidden;max-height:680px}
.hero-value-card{opacity:.72;transform-box:fill-box;transform-origin:center;transition:opacity .18s,transform .18s}
.hero-value-card.active{opacity:1;transform:translateX(-3px) scale(1.025)}
#parameter-graph .graph-view{background:color-mix(in srgb,var(--surface) 85%,#71867b 15%);border-radius:20px;box-shadow:0 22px 42px -28px #15271e55}
#parameter-graph .parameter-focus{inset:18px;transform:rotateX(7deg) rotateY(-13deg) rotateZ(8deg) scale(.9)}
.pg-wires .connection-underlay{stroke:#66521b;stroke-width:4.5px;stroke-opacity:.8}
[data-theme=dark] .pg-wires .connection-underlay{stroke:#182016;stroke-opacity:.9}
@media(max-width:800px){.parameter-controls{transform:rotateY(-8deg) rotateZ(5deg)}#parameter-graph .parameter-focus{inset:12px;transform:rotateX(3deg) rotateY(-5deg)}}
@media(prefers-reduced-motion:reduce){.parameter-controls{transform:none}.hero-value-card{transition:none;transform:none}}

/* Keep mobile scroll animation free of per-node blur-filter repainting. */
@media(max-width:800px){.pg-wide .pg-node,.pg-phone .pg-node,.hero-parameter-cards{filter:none}}

@media(max-width:800px){.model-view canvas,.model-fallback{transition:none}}

/* Static declarations remain compatible with the strict style-src policy. */
.pg-entry-0{--arrive:var(--pg-entry-0,1);--fly-x:-130px;--fly-y:-100px;--fly-r:-16deg}.pg-entry-1{--arrive:var(--pg-entry-1,1);--fly-x:40px;--fly-y:-150px;--fly-r:11deg}.pg-entry-2{--arrive:var(--pg-entry-2,1);--fly-x:-80px;--fly-y:100px;--fly-r:-10deg}.pg-entry-3{--arrive:var(--pg-entry-3,1);--fly-x:40px;--fly-y:160px;--fly-r:12deg}.pg-entry-4{--arrive:var(--pg-entry-4,1);--fly-x:70px;--fly-y:-160px;--fly-r:-12deg}.pg-entry-5{--arrive:var(--pg-entry-5,1);--fly-x:180px;--fly-y:40px;--fly-r:14deg}.pg-entry-6{--arrive:var(--pg-entry-6,1);--fly-x:-60px;--fly-y:170px;--fly-r:-9deg}
