.system-scene{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;margin:22px 0}.system-heading{padding:26px 28px 10px}.system-heading .eyebrow{font-size:.68rem;margin-bottom:13px}.system-heading h3{font-size:1.65rem;margin-bottom:10px}.system-heading p{color:var(--muted);font-size:.91rem;max-width:680px}.system-choices{display:flex;gap:8px;flex-wrap:wrap;padding:4px 28px 20px}.system-choices button{background:var(--bg);color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:9px 13px;font-size:.8rem;min-height:40px}.system-choices button[aria-pressed=true]{border-color:var(--teal);background:var(--accentbg);color:var(--teal)}.system-stage{position:relative;border-block:1px solid var(--line);background:var(--bg);background-image:radial-gradient(var(--line) .7px,transparent .7px);background-size:22px 22px;padding:8px 10px 44px}.system-svg{display:block;width:100%;height:auto;overflow:visible}.system-mobile{display:none}.system-wires{color:var(--line)}.system-wires>path{stroke:var(--line);stroke-width:1.8;fill:none;stroke-dasharray:5 5}.system-wires>path.edge-complete{stroke:var(--teal);opacity:.45;stroke-dasharray:none}.system-wires>path.edge-active{stroke:var(--teal);opacity:1;stroke-width:2.5;stroke-dasharray:none}.component-box{fill:var(--surface);stroke:var(--line);stroke-width:1.5}.component-icon{stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.component-label{fill:var(--ink);font:500 12px Inter,system-ui,sans-serif}.component-state{fill:var(--muted);font:10px Inter,system-ui,sans-serif}.component-active .component-box{stroke:var(--teal);stroke-width:2}.component-touched .component-state{fill:var(--teal)}.packet-halo{fill:var(--teal);opacity:.17}.packet-core{fill:var(--ink);stroke:var(--teal);stroke-width:2}.red .packet-core{stroke:var(--danger)}.orange .packet-core{stroke:var(--orange)}.orange .packet-halo{fill:var(--orange)}.red .packet-halo{fill:var(--danger)}.system-payload{position:absolute;bottom:13px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:14px;font: .72rem ui-monospace,monospace}.system-payload span{color:var(--muted)}.system-payload b{color:var(--teal);font-weight:500;overflow-wrap:anywhere}.system-caption{padding:22px 28px 5px;min-height:115px}.system-caption strong{font:500 1rem var(--display);color:var(--teal)}.system-caption p{margin:7px 0 15px;font-size:.9rem;color:var(--muted);line-height:1.7}.system-player{align-items:center;gap:8px;padding:12px 28px 6px;flex-wrap:wrap}.system-player button,.system-player select{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:6px;padding:9px 12px;font-size:.84rem;min-height:42px}.system-player .system-play{background:var(--teal);color:var(--bg);border-color:var(--teal);min-width:90px;font-weight:600}.system-player label{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:.75rem;color:var(--muted)}.system-seek{align-items:center;gap:12px;padding:14px 28px 22px;font-size:.75rem;color:var(--muted)}.system-seek input{flex:1;min-width:60px;accent-color:var(--teal)}.system-seek output{white-space:nowrap;min-width:44px}.system-details{margin:0 28px 15px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}.system-details h4{font-size:1rem;color:var(--ink);margin-top:24px}.system-details li{margin:9px 0}.system-details ol{padding-left:20px}.component-index{display:flex;gap:12px 25px;flex-wrap:wrap;padding:0;list-style:none}.system-note{padding:0 28px 20px;color:var(--muted);font-size:.73rem;margin:0}.system-compact{margin:0;border:0;border-radius:0}.system-compact .system-heading{padding:20px 22px 8px}.system-compact .system-heading h3{font-size:1.2rem}.system-compact .system-choices{padding:0 22px 15px}.system-compact .system-stage{padding:0 5px 35px}.system-compact .system-caption{padding:18px 22px 0;min-height:105px}.system-compact .system-player{padding:8px 22px}.system-compact .system-seek{padding:6px 22px 18px}.system-compact .system-heading .eyebrow{display:none}.walkthrough-details{border:1px solid var(--line);border-radius:8px;padding:8px 18px;margin-top:20px}.scene-index{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:45px}.scene-index a{padding:10px 16px;border:1px solid var(--line);border-radius:25px;font-size:.82rem;color:var(--teal)}.motion-board{max-width:980px;margin:0 auto 70px;scroll-margin-top:100px}.motion-board>.section-head h2{font-size:1.8rem}.motion-board .system-heading{display:none}.motion-board .system-choices{padding-top:24px}.motion-feature{display:flex;align-items:center;justify-content:space-between;gap:25px;background:var(--surface);border:1px solid var(--teal);border-radius:12px;padding:25px;margin:38px 0}.motion-feature h2{font-size:1.5rem;margin:0 0 8px}.motion-feature p{color:var(--muted);font-size:.9rem;margin:0}.motion-feature a{flex-shrink:0}.system-scene button:focus-visible,.system-scene input:focus-visible,.system-scene select:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media(max-width:600px){.system-desktop{display:none}.system-mobile{display:block}.system-heading{padding:22px 18px 8px}.system-heading h3{font-size:1.4rem}.system-choices{padding:0 18px 18px;gap:7px}.system-choices button{font-size:.77rem;padding:8px 10px}.system-stage{padding:0 0 42px}.system-caption{padding:20px 18px 4px;min-height:120px}.system-player{padding:8px 18px;gap:6px}.system-player label{margin-left:0}.system-player button{padding:9px 11px}.system-seek{padding:12px 18px 20px}.system-details{margin-inline:18px}.system-note{padding-inline:18px}.system-payload{font-size:.65rem;left:15px;right:15px}.motion-board .section-head{flex-direction:column}.motion-feature{align-items:flex-start;flex-direction:column}.system-compact .system-mobile{display:none}.system-compact .system-desktop{display:block}.system-compact .system-svg{min-height:220px}.system-compact .system-caption{min-height:120px}.system-compact .component-label{font-size:14px}.system-compact .component-state{font-size:12px}}
@media(prefers-reduced-motion:reduce){.system-scene *{transition:none!important;animation:none!important}}
@media print{.system-player,.system-seek{display:none!important}.system-details{display:block}.system-stage{break-inside:avoid}}

[data-component]{cursor:pointer}[data-component]:focus-visible{outline:none}[data-component]:focus-visible .component-box{stroke:var(--orange);stroke-width:3}.component-touched[data-tone=red] .component-box{stroke:var(--danger)}.component-touched[data-tone=red] .component-state{fill:var(--danger)}.component-touched[data-tone=orange] .component-state{fill:var(--orange)}.system-wires>path[data-tone=red].edge-active{stroke:var(--danger)}.system-wires>path[data-tone=orange].edge-active{stroke:var(--orange)}
@media(max-width:1000px){.js .menu{display:grid;margin-left:auto}.main-nav{display:none;position:absolute;top:82px;left:0;right:0;margin:0;padding:20px;background:var(--surface);border-bottom:1px solid var(--line);align-items:stretch}.main-nav.open{display:flex;flex-direction:column;gap:0}.main-nav a{padding:12px}.main-nav .external{display:block}}
@media(max-width:760px){.main-nav{top:70px}}
@media(max-width:600px){.system-compact .system-mobile{display:block}.system-compact .system-desktop{display:none}.system-compact .system-svg{min-height:0}.system-mobile .component-label{font-size:14px}.system-mobile .component-state{font-size:11px}}

.packet-label{font:500 11px ui-monospace,monospace;fill:var(--ink);stroke:var(--bg);stroke-width:4px;paint-order:stroke;stroke-linejoin:round}.system-mobile .packet-label{font-size:13px}
.hero>*{min-width:0}.hero h1{overflow-wrap:anywhere}.scene-index a{max-width:100%;overflow-wrap:anywhere}
@media(max-width:360px){.hero h1{font-size:2rem}}

/* Compact learning player: keep the title, diagram, explanation and controls together. */
.system-scene{min-width:0;container-type:inline-size}
.system-heading{padding:20px 24px 7px}
.system-heading h3{font-size:clamp(1.35rem,2vw,1.65rem);margin-bottom:7px}
.system-heading p{line-height:1.55;margin-bottom:8px}
.system-choices{padding:3px 24px 12px}
.system-roadmap{display:flex;align-items:flex-start;gap:12px;margin:0 24px 14px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--muted);font-size:.76rem;line-height:1.5;overflow-wrap:anywhere}
.system-roadmap strong{flex:0 0 auto;color:var(--teal);font:.65rem ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.system-svg{max-width:100%}
.system-desktop{height:clamp(245px,31vh,320px)}
.system-desktop[data-node-count="1"],.system-desktop[data-node-count="2"],.system-desktop[data-node-count="3"]{height:clamp(205px,26vh,255px)}
.component-unused{opacity:.3}
.system-caption{display:grid;grid-template-columns:minmax(145px,.34fr) minmax(240px,1fr);gap:4px 20px;padding:14px 24px 5px;min-height:0}
.system-caption small{grid-column:1/-1;color:var(--teal);font:.66rem ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.system-caption p{margin:0 0 8px;line-height:1.55}
.system-player{position:sticky;top:80px;z-index:4;padding:9px 24px;gap:7px;flex-wrap:wrap;border-block:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px)}
.system-step-button{white-space:nowrap}
.system-player .system-seek{display:flex;flex:1 1 210px;min-width:175px;gap:8px;padding:0;margin-left:4px}
.system-player .system-seek output{min-width:92px;text-align:right}
.system-player .system-speed{margin-left:0}
.system-details{margin-top:8px}
.system-compact .system-roadmap{margin-inline:22px}
.system-compact .system-desktop{height:230px;min-height:0}
.system-compact .system-caption{min-height:0;padding-block:14px 4px}
.system-compact .system-player{padding-bottom:16px}

@media(max-width:800px){
 .system-desktop,.system-compact .system-desktop{display:none}
 .system-mobile,.system-compact .system-mobile{display:block;height:auto;min-height:0;max-width:100%}
 .system-heading{padding:18px 16px 6px}
 .system-heading p{font-size:.86rem}
 .system-choices{padding:2px 16px 12px}
 .system-roadmap,.system-compact .system-roadmap{display:grid;gap:4px;margin:0 16px 12px}
 .system-stage,.system-compact .system-stage{padding:0 0 40px;overflow:hidden}
 .system-caption,.system-compact .system-caption{grid-template-columns:minmax(0,1fr);padding:15px 16px 4px;min-height:0}
 .system-caption small{grid-column:auto}
 .system-player,.system-compact .system-player{top:69px;padding:9px 16px}
 .system-player .system-seek{order:6;flex-basis:100%;margin:3px 0 0}
 .system-player .system-speed{margin-left:auto}
}
@media(max-width:430px){
 .system-stage{padding-inline:5px}
 .system-player,.system-compact .system-player{padding-inline:12px}
 .system-step-button{flex:1 1 calc(50% - 8px)}
 .system-player .system-speed{width:100%;justify-content:space-between;margin-left:0}
 .system-player .system-seek output{min-width:86px}
}