/* The product cards follow the supplied film's bevels, type and shared perspective. */
.graph-scene{grid-template-columns:27% 73%}
.graph-scene .scene-copy{padding-right:20px}
.graph-scene .scene-copy h2{font-size:clamp(2rem,3.8vw,4.25rem)}
.graph-view,.motion .graph-view{display:block;position:relative;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;margin:0;perspective:1600px}
.parameter-focus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:rotateX(7deg) rotateY(-13deg) rotateZ(8deg) scale(.92);transform-style:preserve-3d;transform-origin:55% 48%}
.pg-diagram{display:block;width:100%;height:100%;overflow:visible;fill:#f4f7fa;font-family:"Segoe UI",Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:0}
.pg-diagram .label{fill:#edf4fa}.pg-diagram .value-title{fill:#ffcf31;font-weight:700;font-size:14px}.pg-diagram .instance{fill:#ecf2f7;font-weight:700;font-size:13px}.pg-diagram .field{fill:#fff;font-size:15px}.pg-diagram .output{fill:#ffcf31;font-size:12px}.pg-diagram .action{fill:#eef7fb;font-size:9px;font-weight:600}.pg-diagram .object-title{fill:white;font-size:12.5px;font-weight:700}.pg-diagram .section{fill:#e9f0f5;font-size:12px;font-weight:600}.pg-diagram .connected{fill:#93f9b8;font-size:12px}.pg-diagram .current{fill:#8bceff;font-size:12px}.pg-diagram .meta{fill:#bfceda;font-size:9px}
.pg-wide .pg-node{filter:url(#wide-shadow)}.pg-phone .pg-node{filter:url(#phone-shadow)}
.pg-body{opacity:1;transform-origin:72% 55%}
.pg-node{transform-box:fill-box;transform-origin:center;transform:none;opacity:1}
.motion .pg-body{opacity:var(--pg-board,1)}
.motion .pg-node{transform:translate(calc(var(--fly-x) * (1 - var(--arrive))),calc(var(--fly-y) * (1 - var(--arrive)))) rotate(calc(var(--fly-r) * (1 - var(--arrive))));opacity:var(--arrive)}
.connection{stroke-dasharray:1 1;stroke-dashoffset:0}
.motion .pg-wires .connection{stroke-dashoffset:calc(1 - var(--value-link,1))}
.pg-terminal{opacity:1}.motion .pg-terminal{opacity:clamp(0,calc((var(--value-link,1) - .86) * 7.15),1)}
.parameter-overview{position:absolute;width:21%;left:1%;top:34%;padding:7px;background:var(--surface);border-radius:12px;box-shadow:0 14px 30px -15px #0005;z-index:1;transform:rotateY(-13deg) rotateZ(-2deg)}
.parameter-overview img{display:block;width:100%;height:auto;border-radius:6px}
.pg-phone{display:none}
.motion-off .graph-view{height:min(72vw,760px);min-height:380px;margin-block:24px}
.motion-off .parameter-focus{transform:none}
.motion-off .parameter-overview{transform:none}
html.motion .story{height:812.3svh}
@media(min-width:801px){html.motion .story{height:884svh}}
@media(max-width:1100px) and (min-width:801px){.graph-scene{grid-template-columns:24% 76%}.graph-scene .scene-copy h2{font-size:2rem}.parameter-focus{transform:rotateX(5deg) rotateY(-8deg) rotateZ(-1deg)}}
@media(max-width:800px){
 .graph-scene{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px;padding-block:18px}
 .graph-scene .scene-copy{padding-right:0}
 .graph-scene .scene-copy h2{font-size:clamp(1.8rem,5.6vw,2.4rem);max-width:18ch}
 .graph-scene .scene-copy h2 br{display:none}
 .pg-wide{display:none}.pg-phone{display:block}
 .parameter-focus{inset:0 0 14px;transform:rotateX(3deg) rotateY(-5deg);transform-origin:center}
 .parameter-overview{display:none}
 .motion-off .graph-view{height:auto;min-height:0;aspect-ratio:540/940;max-width:540px;justify-self:center;width:100%}
 html.motion .story{height:1182.4svh}
}
@media(prefers-reduced-motion:reduce){
 .parameter-focus{transform:none!important}
 .pg-node,.motion .pg-node{transform:none!important;opacity:1!important}
 .pg-body,.motion .pg-body,.pg-terminal,.motion .pg-terminal{opacity:1!important}
 .connection,.motion .connection{stroke-dashoffset:0!important}
}