.piston-story{isolation:isolate;aspect-ratio:1000/680;overflow:hidden}
.piston-story>img,.piston-story>video,.piston-story>.engine-overlay{height:auto;aspect-ratio:1000/850}
.piston-story>.engine-overlay{position:absolute;inset:0;width:100%;height:auto;pointer-events:none;overflow:visible;z-index:2}
.engine-overlay path,.engine-overlay circle{vector-effect:non-scaling-stroke}
.engine-overlay .construction{fill:none;stroke:#c7c3b8;stroke-width:1;opacity:.55}
.engine-overlay .hidden-construction{fill:none;stroke:#bcb8ae;stroke-width:.9;stroke-dasharray:3 4;opacity:.55}
.engine-overlay .active-line{fill:none;stroke:var(--gold);stroke-width:1.25}
.engine-overlay .joint{fill:var(--gold);stroke:none}
.engine-overlay text{font-family:var(--body);fill:var(--ink);font-size:var(--annotation-font,28px);paint-order:stroke;stroke:#080808;stroke-width:4;stroke-linejoin:round}
.engine-overlay .measure-value{font-family:var(--display);font-size:var(--annotation-value,40px);fill:var(--gold);letter-spacing:-.02em}
.engine-overlay .measure-caption{fill:#bbb7ae}
.engine-overlay .measure-leader{fill:none;stroke:#aaa69a;stroke-width:1;opacity:.7}
.engine-overlay .nominal-sweep{stroke:none;fill:var(--gold);opacity:.025}
.valve-story{aspect-ratio:auto;min-width:0;container-type:inline-size;container-name:valve-visual}
.valve-render{position:relative;width:100%;aspect-ratio:1.6;overflow:hidden}
.valve-frame{position:absolute;width:110%;left:-6%;top:-3%;aspect-ratio:1000/850}
.valve-frame>img,.valve-frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.valve-timing{display:grid;grid-template-columns:1.18fr 1fr;gap:24px;align-items:center;width:100%;max-width:500px;margin:8px auto 0}
.timing-diagram{width:100%;height:auto;overflow:visible;display:block}
.timing-diagram .baseline,.timing-diagram .tick{fill:none;stroke:#4b4a44;stroke-width:1}
.timing-diagram .inlet-profile{fill:none;stroke:var(--gold);stroke-width:1.65}
.timing-diagram .exhaust-profile{fill:none;stroke:#c3beb1;stroke-width:1.65}
.timing-diagram .timing-hand{stroke:#a8a397;stroke-width:1;opacity:.5;fill:none}
.timing-diagram text{font-family:var(--body);font-size:var(--timing-font,26px);fill:#aaa69c}
.timing-diagram .angle{font-family:var(--display);font-size:var(--timing-angle,42px);fill:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.timing-values{display:grid;gap:22px;align-content:center}
.timing-values strong{display:block;font:500 27px/1.15 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.025em}
.timing-values strong .unit{font-size:18px;letter-spacing:0}
.story .timing-values p{font-size:14px;line-height:1.4;margin:7px 0 0;color:#b9b4a8}
.story .timing-values .inlet-label{color:var(--gold)}
.story .timing-values .timing-cycle{color:#aaa69e;margin-top:0}
@media(min-width:701px) and (max-width:1000px){.valve-timing{gap:14px}.timing-values strong{font-size:25px}.timing-values{gap:18px}}
@media(max-width:700px){
 .valve-timing{grid-template-columns:1fr;gap:10px;max-width:340px;margin:0 auto 0}
 .timing-diagram{width:min(245px,87%);margin:auto}
 .timing-values{grid-template-columns:1fr 1fr;column-gap:25px;row-gap:13px;width:100%;max-width:285px;margin:auto;text-align:center}
 .timing-values .timing-cycle{grid-column:1/-1;text-align:center}
 .timing-values strong{font-size:25px}.timing-values strong .unit{font-size:17px}
 .valve-render{aspect-ratio:1.5}.valve-frame{width:110%;left:-6%;top:-3%}
 .valve-story{padding-bottom:5px}
}
@media(prefers-reduced-motion:reduce){.engine-overlay,.timing-diagram{transition:none}}
.story .timing-context .timing-phase{color:var(--ink);font-size:14px;line-height:1.4;margin:0 0 5px}
.story .timing-context .timing-cycle{margin:0;color:var(--quiet)}
@media(max-width:700px){.timing-context{grid-column:1/-1;text-align:center}}

/* Respond to the space inside this component, including half-width desktop
   windows. Keep a readable dial and move its readouts underneath when needed. */
@container valve-visual (max-width:420px){
 .valve-timing{grid-template-columns:1fr;gap:12px;max-width:340px;margin:8px auto 0}
 .timing-diagram{width:min(245px,87%);margin:auto}
 .timing-values{grid-template-columns:1fr 1fr;column-gap:25px;row-gap:13px;width:100%;max-width:285px;margin:auto;text-align:center}
 .timing-context{grid-column:1/-1;text-align:center}
}