/* PLC hero: approved four-stage demonstration, isolated from the page. */
.plc-hero { width:100%; max-width:720px; min-width:0; margin:0 auto; container:plc-hero / inline-size; --line:#51788b; }
.plc-hero button { font:inherit; touch-action:manipulation; }
.plc-stage { display:flex; flex-direction:column; position:relative; margin:20px 0 0; isolation:isolate; }
.plc-stage::before { content:""; position:absolute; inset:0 0 2%; z-index:-1; background:linear-gradient(#27a5a810 1px,transparent 1px),linear-gradient(90deg,#27a5a810 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(ellipse at 51% 48%,#000 38%,transparent 73%); }
.plc-stage::after { content:""; position:absolute; z-index:-1; inset:15% 0 10% 30%; background:radial-gradient(ellipse,#27a5a80b,transparent 70%); }
.plc-drawing { order:2; display:block; width:100%; height:auto; overflow:visible; }
.plc-machine { fill:none; stroke:var(--line); stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round; }
.plc-trace { fill:none; stroke:url(#plc-teal-line); stroke-width:2.8; }
.plc-trace circle { fill:white; stroke:var(--teal); stroke-width:1.8; }
.plc-signal { fill:#27a5a8; opacity:0; }
.plc-signal-halo { fill:#27a5a8; opacity:.12; }
.plc-node circle { fill:var(--teal); }
.plc-node path { fill:none; stroke:var(--teal); stroke-width:1.4; }
.plc-node text { fill:#486979; font-size:12px; font-weight:650; letter-spacing:.13em; }
.plc-part-body { fill:#fbfdfd; }
.plc-part-window { fill:#f0f8f8; }
.plc-hmi-text { fill:var(--teal-ink); stroke:none; font-size:8px; font-weight:650; letter-spacing:.08em; }
.plc-story-card { order:1; position:relative; width:44%; min-height:13.875rem; margin:0 12.5% -210px auto; border:1px solid #dce8eb; border-radius:15px; background:rgba(255,255,255,.95); box-shadow:0 18px 42px -20px #103d5725; backdrop-filter:blur(16px); }
.plc-card-pane { position:relative; padding:1rem 1.125rem .8125rem; min-height:13.875rem; display:flex; flex-direction:column; }
.plc-pane-eyebrow { display:flex; justify-content:space-between; color:var(--teal-ink); font-size:.6rem; font-weight:650; letter-spacing:.13em; }
.plc-card-pane h2 { margin:7px 0 10px; font-size:1.13rem; font-weight:600; letter-spacing:-.025em; line-height:1.2; }
.plc-pane-copy { margin:0; font-size:.75rem; line-height:1.5; color:var(--muted); }
.plc-pane-footer { flex-wrap:wrap; margin-top:auto; padding-top:10px; border-top:1px solid #e8eff1; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.5625rem; letter-spacing:.04em; color:#526b78; }
.plc-state-dot { display:flex; align-items:center; gap:5px; font-weight:650; color:var(--teal-ink); white-space:nowrap; }
.plc-state-dot::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.plc-plan-flow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin:15px 0; color:var(--teal-ink); }
.plc-plan-flow span { min-width:0; flex-wrap:wrap; display:flex; align-items:center; gap:7px; font-size:.6rem; letter-spacing:.06em; }
.plc-plan-flow i { flex-shrink:0; min-width:1.6em; min-height:1.6em; display:grid; place-items:center; border:1px solid #c8e0e2; width:25px; height:25px; border-radius:50%; font-size:.5625rem; font-style:normal; }
.plc-plan-flow b { color:#8cacb6; font-size:.8125rem; font-weight:400; }
.plc-code { display:block; margin:0; font:clamp(.625rem,1.5cqi,.75rem)/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#294f61; white-space:pre-wrap; overflow-wrap:anywhere; }
.plc-code-line { display:block; opacity:0; }
.plc-ln { display:inline-block; width:19px; color:#71828d; user-select:none; }
.plc-kw { color:#805691; }
.plc-value-old { color:#157c80; }
.plc-value-old.plc-replaced { color:#73838a; text-decoration:line-through; font-size:.85em; }
.plc-value-new { margin-left:6px; color:#126e73; font-weight:700; background:#e9f6f3; border-radius:3px; padding:1px 3px; }
.plc-checks { list-style:none; margin:1px 0 7px; padding:0; display:grid; gap:10px; }
.plc-checks li { display:flex; align-items:center; gap:8px; font-size:.7rem; color:#526b78; }
.plc-checks i { display:grid; place-items:center; width:17px; height:17px; border:1px solid #dce8eb; border-radius:50%; font-style:normal; font-size:.65rem; }
.plc-checks b { margin-left:auto; font-size:.55rem; font-weight:500; letter-spacing:.03em; font-variant-numeric:tabular-nums; }
.plc-checks li[data-state="done"] { color:var(--teal-ink); }
.plc-checks li[data-state="done"] i { background:#e9f6f3; border-color:#a1cdd0; }
.plc-checks li[data-state="running"] { color:var(--ink); }
.plc-result-strip { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; min-height:38px; margin:-19px 7% 16px; font-size:.6rem; letter-spacing:.1em; color:var(--muted); }
.plc-result-values { display:flex; gap:11px; align-items:baseline; letter-spacing:0; white-space:nowrap; }
.plc-metric { font-size:1.13rem; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink); }
.plc-metric small { font-size:.7rem; color:var(--muted); }
#plc-optimized-time { color:var(--teal-ink); }
.plc-gain { color:var(--teal-ink); background:#edf7f5; border-radius:12px; padding:3px 7px; font-size:.625rem; }
.plc-steps { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,4.5rem),1fr)); gap:24px; margin:0 7%; padding:0; }
.plc-steps li { min-width:0; }
.plc-hero .plc-step { position:relative; display:flex; align-items:flex-start; flex-direction:column; gap:5px; width:100%; padding:14px 0 7px; border:0; border-radius:0; color:#637b87; background:transparent; font-size:.625rem; font-weight:600; letter-spacing:.1em; }
.plc-step::before,.plc-step::after { content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:#dce8eb; }
.plc-step::after { background:var(--teal); transform:scaleX(var(--progress,0)); transform-origin:left; }
.plc-step[aria-current="step"] { color:var(--ink); }
.plc-step[aria-current="step"] .plc-step-number { color:var(--teal-ink); }
.plc-step[data-complete="true"]::after { opacity:.4; }
.plc-step > span, .plc-step small { max-width:100%; overflow-wrap:anywhere; }
.plc-step small { font-size:.6875rem; font-weight:400; letter-spacing:0; color:var(--muted); }
.plc-step-number { font-size:.6rem; font-weight:500; color:#637b87; font-variant-numeric:tabular-nums; }
.plc-hero .plc-step:hover { background:transparent; color:var(--teal-ink); }
.plc-hero .plc-step:active { transform:none; }
.plc-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin:37px 7% 0; }
.plc-buttons { margin-left:auto; display:flex; gap:6px; flex-shrink:0; }
.plc-hero button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 13px; border:1px solid transparent; border-radius:24px; color:var(--ink); background:transparent; cursor:pointer; font-size:.75rem; }
.plc-hero button:hover { background:#f0f6f7; }
.plc-hero button:active { background:#e5f0f2; transform:scale(.96); }
.plc-hero button:focus-visible { outline:2px solid #126e73; outline-offset:3px; }
.plc-hero button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#plc-pause { border-color:#e0e9ec; background:#f8fbfb; }
.plc-hero [hidden] { display:none !important; }
.plc-hero noscript p { text-align:center; font-size:.8rem; color:var(--muted); }
@container plc-hero (max-width:680px) {
  .plc-stage { margin-top:20px; }
  .plc-story-card { width:min(22.5rem,calc(100% - 16px)); min-height:13.625rem; margin:6px auto -32px; }
  .plc-card-pane { padding:.875rem .9375rem .75rem; min-height:13.625rem; }
  .plc-code { font-size:.6875rem; line-height:1.55; }
  .plc-card-pane h2 { font-size:1rem; }
  .plc-plan-flow span { gap:4px; }
  .plc-plan-flow i { width:22px; height:22px; }
  .plc-result-strip { margin:-2px 5% 14px; font-size:.51rem; letter-spacing:.05em; }
  .plc-result-values { gap:6px; }
  .plc-metric { font-size:.94rem; }
  .plc-gain { font-size:.55rem; padding:2px 5px; }
  .plc-steps { grid-template-columns:repeat(auto-fit,minmax(min(100%,3.5rem),1fr)); margin:0 5%; gap:13px; }
  .plc-hero .plc-step { font-size:.52rem; letter-spacing:.04em; padding:11px 0 5px; }
  .plc-step small { font-size:.5625rem; }
  .plc-step-number { font-size:.55rem; }
  .plc-controls { margin:23px 3% 0; align-items:flex-start; gap:8px; }
  .plc-hero button { padding:0 10px; font-size:.6875rem; }
  #plc-replay-label { display:none; }
  #plc-replay { min-width:44px; }
  .plc-buttons { gap:3px; }
}
@container plc-hero (max-width:360px) { .plc-steps { gap:8px; margin-inline:3%; } .plc-value-old.plc-replaced { display:none; } .plc-value-new { margin-left:0; } .plc-controls { margin-left:1%; margin-right:1%; } }
@container plc-hero (min-width:500px) and (max-width:680px) { .plc-story-card { margin-bottom:-124px; } }
@media (prefers-reduced-transparency:reduce) { .plc-story-card { background:white; backdrop-filter:none; } }
@media (prefers-contrast:more) { .plc-story-card { background:white; border-color:#51788b; } .plc-step::before { background:#51788b; } .plc-hero button { border-color:#51788b; } }
@media (prefers-reduced-motion:reduce) { .plc-hero button:active { transform:none; } }