.pw-card { cursor:pointer; align-items:center; }
.pw-card-toggle { padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; font:inherit; }
.pw-card button:focus-visible,.pw-stage:focus-visible { outline:2px solid #1b6ef3; outline-offset:3px; }
.pw-details[hidden],.pw-tabs[hidden],.pw-actions[hidden],.pw-examples[hidden] { display:none; }
.pw-scene-title { margin:15px 0 7px; color:#163b65; font-size:16px; }
.pw-points { margin:0; padding-left:19px; color:#42597a; font-size:15px; line-height:1.65; }
.pw-points li { margin-bottom:6px; }
.pw-examples { margin-top:13px; font-size:14px; color:#42597a; line-height:1.6; cursor:auto; }
.pw-examples summary { cursor:pointer; font-weight:700; color:#42658d; }
.pw-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; padding:4px; margin-bottom:9px; background:#f3f6fa; border:1px solid #e4ebf5; border-radius:9px; cursor:default; }
.pw-tabs button { border:0; border-radius:6px; padding:9px 2px; color:#536a86; background:transparent; font:700 11px/1.25 Inter,Arial,sans-serif; cursor:pointer; transition:background-color 150ms ease,color 150ms ease; }
.pw-tabs button:hover { background:#e7eef8; }
.pw-tabs button[aria-selected="true"] { background:#fff; color:#1557b7; box-shadow:0 1px 3px rgba(11,37,69,.1); }
.pw-tabs button:active,.pw-replay:active { transform:scale(.98); }
.pw-stage { overflow:hidden; border:1px solid #dce6f3; border-radius:10px; background:#f8fbff; cursor:auto; }
.pw-visual { position:relative; }
.pw-scene { display:block; width:100%; height:auto; }
.pw-scene text { fill:#42597a; font:600 17px Inter,Arial,sans-serif; }
.pw-ground { stroke:#bdcbb5; stroke-width:3; }
.pw-force text { fill:#7950a6; font-size:15px; }
.pw-wire { fill:none; stroke:#526b8b; stroke-width:4; stroke-linecap:round; }
.pw-switch { transform-origin:218px 83px; transform:rotate(-22deg); }
.pw-hot-wire { fill:none; stroke:#8495aa; stroke-width:5; stroke-linejoin:round; }
.pw-wire-glow { fill:#ffdfbd; opacity:0; }
.pw-current-group { opacity:0; }
.pw-current { fill:#2f7f63; offset-path:path('M140 83 H400 V235 H140 Z'); }
.pw-element { fill:none; stroke:#d77a1d; stroke-width:6; stroke-linejoin:round; }
.pw-water { fill:#c5e0f6; }
.pw-leader { fill:none; stroke:#d77a1d; stroke-width:2; }
.pw-thermometer-fill { transform-origin:450px 224px; transform:scaleY(.12); }
.pw-emitter { fill:#e88864; }
.pw-receiver { fill:#505766; }
.pw-radiation-waves { fill:none; stroke:#b85b46; stroke-width:3; stroke-dasharray:10 6; opacity:0; }
.pw-gap-line { fill:none; stroke:#9daec1; stroke-width:2; stroke-dasharray:4 5; }
.pw-mini-label { display:block; padding:3px 4px 7px; color:#42658d; font:700 10px/1.2 Inter,Arial,sans-serif; text-align:center; }
.pw-zoom { position:absolute; inset:0; width:100%; border:0; border-radius:10px; background:transparent; cursor:zoom-in; }
.pw-zoom span { position:absolute; right:7px; bottom:7px; padding:6px 8px; border-radius:5px; background:rgba(11,37,69,.72); color:white; font:700 10px/1 Inter,Arial,sans-serif; opacity:0; transform:translateY(4px); transition:opacity 160ms ease,transform 180ms cubic-bezier(.23,1,.32,1); pointer-events:none; }
.pw-visual:hover .pw-zoom span,.pw-zoom:focus-visible span { opacity:1; transform:none; }
.pw-visual:hover .pw-zoom { box-shadow:inset 0 0 0 1px #8bb6ef; }
.pw-zoom::before { content:'↗'; position:absolute; top:50%; left:50%; display:grid; place-items:center; width:30px; height:30px; margin:-15px; border-radius:50%; color:#1b6ef3; background:rgba(255,255,255,.94); font:800 17px Arial,sans-serif; opacity:0; pointer-events:none; }
.pw-card.read-completed .pw-zoom::before { content:'↙'; }
@media(hover:hover) and (pointer:fine) { .pw-zoom:hover::before { opacity:1; animation:nb-diagram-ripple 850ms cubic-bezier(.23,1,.32,1) 1; } }
.pw-card.read-completed .pw-zoom { cursor:zoom-out; }
.pw-card.read-completed .pw-mini-label { display:none; }
.pw-caption { display:none; min-height:107px; box-sizing:border-box; padding:12px 13px 14px; background:#fff; border-top:1px solid #e4ebf5; }
.pw-card.read-completed .pw-caption { display:block; }
.pw-pathway-name { color:#7950a6; font:800 17px/1.35 Inter,Arial,sans-serif; text-align:center; opacity:0; }
.pw-store-flow { display:grid; grid-template-columns:1fr auto 1fr; gap:9px; align-items:center; margin-top:10px; color:#42597a; font:700 12px/1.5 Inter,Arial,sans-serif; text-align:center; opacity:0; }
.pw-flow-arrow { color:#7950a6; font-size:22px; }
.pw-actions { display:flex; justify-content:space-between; align-items:center; margin-top:8px; cursor:default; }
.pw-play-state { color:#6b7d92; font-size:11px; }
.pw-replay { padding:3px 0 3px 8px; border:0; background:none; color:#1b6ef3; cursor:pointer; font:700 11px Inter,Arial,sans-serif; }
.pw-replay:hover { text-decoration:underline; }
.pw-playing .pw-cart-motion { animation:pw-push 14s cubic-bezier(.45,.03,.75,.55) 1 forwards; }
.pw-playing .pw-force { animation:pw-force 14s linear 1 forwards; }
.pw-playing .pw-switch { animation:pw-switch 14s cubic-bezier(.23,1,.32,1) 1 forwards; }
.pw-playing .pw-hot-wire { animation:pw-wire-hot 14s linear 1 forwards; }
.pw-playing .pw-wire-glow { animation:pw-glow 14s linear 1 forwards; }
.pw-playing .pw-current-group { animation:pw-current-show 14s linear 1 forwards; }
.pw-playing .pw-current { animation:pw-current-lap 2s 2s linear 4 forwards; }
.pw-playing .pw-current-b { animation-delay:2.4s; }
.pw-playing .pw-current-c { animation-delay:2.8s; }
.pw-playing .pw-water { animation:pw-warm-water 14s linear 1 forwards; }
.pw-playing .pw-thermometer-fill { animation:pw-temperature 14s cubic-bezier(.23,1,.32,1) 1 forwards; }
.pw-playing .pw-receiver { animation:pw-warm-plate 14s linear 1 forwards; }
.pw-playing .pw-radiation-waves { animation:pw-waves-show 14s linear 1 forwards,pw-wave-travel 1.6s 2s linear 5 forwards; }
.pw-playing .pw-pathway-name { animation:pw-explain 14s cubic-bezier(.23,1,.32,1) 1 forwards; }
.pw-playing .pw-store-flow { animation:pw-summary 14s cubic-bezier(.23,1,.32,1) 1 forwards; }
@keyframes pw-push { 0%,14%{transform:translateX(0)}60%,100%{transform:translateX(170px)} }
@keyframes pw-force { 0%,10%{opacity:0}15%,55%{opacity:1}60%,100%{opacity:0} }
@keyframes pw-switch { 0%,10%{transform:rotate(-22deg)}16%,100%{transform:rotate(0)} }
@keyframes pw-wire-hot { 0%,18%{stroke:#8495aa}60%,100%{stroke:#db693c} }
@keyframes pw-glow { 0%,20%{opacity:0}60%,100%{opacity:.8} }
@keyframes pw-current-show { 0%,16%{opacity:0}18%,65%{opacity:1}78%,100%{opacity:0} }
@keyframes pw-current-lap { to{offset-distance:100%} }
@keyframes pw-warm-water { 0%,15%{fill:#c5e0f6}60%,100%{fill:#f2c9a8} }
@keyframes pw-temperature { 0%,18%{transform:scaleY(.12)}60%,100%{transform:scaleY(.85)} }
@keyframes pw-warm-plate { 0%,18%{fill:#505766}60%,100%{fill:#b57558} }
@keyframes pw-waves-show { 0%,15%{opacity:0}18%,58%{opacity:1}64%,100%{opacity:0} }
@keyframes pw-wave-travel { to{stroke-dashoffset:-64} }
@keyframes pw-explain { 0%,62%{opacity:0;transform:translateY(5px)}69%,100%{opacity:1;transform:translateY(0)} }
@keyframes pw-summary { 0%,76%{opacity:0;transform:translateY(5px)}84%,100%{opacity:1;transform:translateY(0)} }
@media(max-width:640px) {
    .pw-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pw-tabs button { min-height:38px; font-size:12px; }
    .pw-card.read-completed .pw-diagram { width:min(100%,350px); }
    .pw-pathway-name { font-size:16px; }
    .pw-store-flow { font-size:11px; gap:5px; }
    .pw-caption { min-height:112px; padding:10px; }
}
@media(prefers-reduced-motion:reduce) {
    .pw-zoom:hover::before { animation:none; }
    .pw-card .pw-diagram,.pw-tabs button,.pw-zoom span { transition:none; }
    .pw-stage.pw-playing * { animation:none; }
    .pw-cart-motion { transform:translateX(170px); }
    .pw-force,.pw-current-group,.pw-radiation-waves { opacity:0; }
    .pw-switch { transform:rotate(0); }
    .pw-hot-wire { stroke:#db693c; }.pw-wire-glow { opacity:.8; }
    .pw-water { fill:#f2c9a8; }.pw-receiver { fill:#b57558; }
    .pw-thermometer-fill { transform:scaleY(.85); }
    .pw-pathway-name,.pw-store-flow { opacity:1; }
}