/* Gedeelde scene-engine (lib/scene-engine.js): tokens, kader, tekstmaten, paneelchrome, bediening, mask en miniatuurbasis. Alleen transform en opacity bewegen.
   Familiekleuren: navy #20496b, papier #f7f9fc, oranje #ff6600 (alleen accent). Scène-specifieke stijl staat in het eigen bestand (src/<naam>-scene.css), geladen ná dit bestand. */
.cs{--cs-ink:#152c42;--cs-navy:#20496b;--cs-mu:#526b80;--cs-line:#c5d3df;--cs-wash:#e7eef5;--cs-orange:#ff6600;--cs-action:#c64a00;margin:0;padding:0;background:transparent;border:0;color:var(--cs-ink);font-family:'Public Sans',Arial,sans-serif;text-align:left;min-width:0;box-sizing:border-box}
.cs *{box-sizing:border-box}
.cs-svg{display:block;width:100%;height:auto;overflow:hidden}
.cs-thumb{--cs-ink:#152c42;--cs-navy:#20496b;--cs-mu:#526b80;--cs-line:#c5d3df;--cs-wash:#e7eef5;--cs-orange:#ff6600;display:block;width:100%;height:auto}
.cs-svg text,.cs-thumb text{font-family:'Public Sans',Arial,sans-serif;fill:var(--cs-ink);stroke:none;font-size:10.5px}
.cs-svg g[id],.cs-svg rect[id],.cs-svg path[id],.cs-svg line[id],.cs-svg circle[id]{transform-box:fill-box;transform-origin:center}
.cs-svg g[id].cs-camera{transform-box:view-box;transform-origin:0 0}
.cs-svg .cs-gone,.cs-thumb .cs-gone{opacity:0}
.cs-svg .cs-t,.cs-thumb .cs-t{font-size:10.5px}
.cs-svg .cs-s,.cs-thumb .cs-s{font-size:10px}
.cs-svg .cs-h,.cs-thumb .cs-h{font-size:12px;font-weight:700}
.cs-svg .cs-b,.cs-thumb .cs-b{font-weight:600}
.cs-svg .cs-mu,.cs-thumb .cs-mu{fill:var(--cs-mu)}
.cs-svg .cs-ink,.cs-thumb .cs-ink{fill:var(--cs-ink)}
.cs-svg .cs-m,.cs-thumb .cs-m{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:11px;font-variant-numeric:tabular-nums}
.cs-svg .cs-v,.cs-thumb .cs-v{font-weight:700}
.cs-svg .cs-sm,.cs-thumb .cs-sm{font-size:10px}
.cs-svg .cs-big,.cs-thumb .cs-big{font-size:24px;font-weight:700}
.cs-svg .cs-num,.cs-thumb .cs-num{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:10.5px;fill:var(--cs-mu);font-variant-numeric:tabular-nums}
.cs-svg .cs-lab,.cs-thumb .cs-lab{font-size:10.5px;font-weight:600;letter-spacing:.06em;fill:var(--cs-navy)}
.cs-svg .cs-tag,.cs-thumb .cs-tag{font-size:10px;fill:var(--cs-mu)}
.cs-svg .cs-pf,.cs-thumb .cs-pf{fill:#fff;stroke:none}
.cs-svg .cs-pfr,.cs-thumb .cs-pfr{fill:none;stroke:var(--cs-line);stroke-width:1}
.cs-svg .cs-ghost{fill:none;stroke:var(--cs-line);stroke-width:1;stroke-dasharray:4 3}
.cs-svg .cs-ph,.cs-thumb .cs-ph{fill:var(--cs-wash)}
.cs-svg .cs-grid,.cs-thumb .cs-grid{stroke:var(--cs-line);stroke-width:1}
.cs-svg .cs-sh,.cs-thumb .cs-sh{fill:var(--cs-ink);fill-opacity:.14}
.cs-svg .cs-ring,.cs-thumb .cs-ring{fill:none;stroke:var(--cs-navy);stroke-width:1.5}
.cs-svg .cs-lbl{font-size:34px;font-weight:600;fill:var(--cs-navy)}
.cs-bar-row{display:flex;gap:12px;align-items:center;padding:10px 12px}
.cs-bar-row[hidden],.cs-play[hidden]{display:none}
.cs-steps{display:flex;flex:1 1 auto;gap:8px;min-width:0;align-items:flex-start}
.cs-steps button{flex:1 1 0;min-width:0;min-height:0;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;word-break:normal;text-align:left;font:600 15px/1.25 'Public Sans',Arial,sans-serif;color:var(--cs-mu);background:none;border:0;padding:0 2px 15px;cursor:pointer;border-radius:0}
.cs-steps button b{font-weight:600;color:var(--cs-mu);margin-right:3px;font-variant-numeric:tabular-nums}
.cs-steps button[aria-pressed=true]{color:var(--cs-navy)}
.cs-steps button[aria-pressed=true] b{color:var(--cs-action)}
.cs-track{display:block;height:3px;background:var(--cs-line);margin-bottom:7px;overflow:hidden}
.cs-prog{display:block;height:100%;background:var(--cs-orange);transform-origin:0 50%;transform:scaleX(1)}
.cs-play{flex:0 0 40px;width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--cs-navy);background:#fff;border:1px solid var(--cs-navy);border-radius:2px;cursor:pointer}
.cs-ico{width:20px;height:20px;fill:currentColor;display:block}
.cs-ico path{display:none}
.cs[data-state=idle] .cs-i-play,.cs[data-state=paused] .cs-i-play,.cs[data-state=playing] .cs-i-pause,.cs[data-state=done] .cs-i-replay{display:block}
.cs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cs button{transition:transform 160ms cubic-bezier(.23,1,.32,1);touch-action:manipulation}
.cs button:active{transform:scale(.98)}
.cs button:focus-visible{outline:3px solid var(--cs-orange);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.cs-play:hover{background:var(--cs-wash)}.cs-steps button:hover{color:var(--cs-navy)}}
.cs-capbox{position:relative}
.cs .cs-caps{display:grid}
.cs .cs-cap{grid-area:1/1;visibility:hidden;margin:0;padding:0 12px;font-size:16px;line-height:1.5;color:var(--cs-ink);max-width:78ch;text-wrap:balance}
.cs[data-step="0"] .cs-cap[data-cs-cap="0"],.cs[data-step="1"] .cs-cap[data-cs-cap="1"],.cs[data-step="2"] .cs-cap[data-cs-cap="2"],.cs[data-step="3"] .cs-cap[data-cs-cap="3"]{visibility:visible}
.cs .cs-note{margin:6px 0 0;padding:0 12px 10px;font-size:12px;line-height:1.4;color:var(--cs-mu)}
@media(max-width:699px){
 .cs-bar-row{gap:8px;padding:10px 8px}
 .cs-steps{gap:4px}.cs-steps button{font-size:12px}.cs-steps button b{display:block;margin:0}
 .cs .cs-cap{font-size:14px;padding:0 8px}
 .cs .cs-note{padding:0 8px 10px}
}
@media(max-width:399px){.cs-steps button{font-size:11px}}
@media(max-width:359px){
 .cs-bar-row{flex-wrap:wrap}
 .cs-steps{flex:1 1 100%}
 .cs-play{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.cs *{animation:none!important;transition:none!important}}
/* Zachte rand bij de push-in; in het overzicht (data-cam=overview) geen mask, zodat panelen niet worden afgesneden. */
.cs[data-cam=push] .cs-svg{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent),linear-gradient(transparent,#000 12px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent),linear-gradient(transparent,#000 12px,#000 calc(100% - 24px),transparent);mask-composite:intersect;-webkit-mask-composite:source-in}