:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#263334;background:#f5f5f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background-color:#f5f5f0;background-image:linear-gradient(#28383909 1px,transparent 1px),linear-gradient(90deg,#28383909 1px,transparent 1px);background-size:28px 28px}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.46}button:focus-visible{outline:3px solid #178cc9;outline-offset:3px} .hidden{display:none!important}.app-shell{max-width:1536px;margin:auto;padding:0 48px 30px}.topbar{height:82px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d9dedc}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.055em;font-size:23px}.brand-icon{background:#243738;color:#c8f1ec;border-radius:10px;width:36px;height:36px;display:grid;place-items:center;font-size:28px;line-height:1}.brand-light{font-weight:400;color:#768482}.top-actions{display:flex;align-items:center;gap:22px}.edition,.eyebrow,.stage-label,.panel-index,.rail-label,.connection-label,.level-progress,.parts-count,.step-counter,.live-indicator,.bottom-note,.palette small,.level-tile small{font-size:10px;font-weight:800;letter-spacing:.14em}.edition{color:#9ba7a4}.button{border:1px solid #cfd7d4;background:#fff;color:#293b3c;border-radius:9px;padding:11px 15px;font-weight:750;font-size:13px;box-shadow:0 2px 0 #e6ebe8;white-space:nowrap}.button:hover:not(:disabled){background:#edf7f6;border-color:#8cb5b5}.button.subtle{background:transparent;box-shadow:none}.button.primary{color:#fff;background:#233c3d;border-color:#233c3d;box-shadow:0 3px 0 #142d2e}.button.primary:hover:not(:disabled){background:#345656}.intro-line{display:flex;align-items:center;justify-content:space-between;padding-top:30px;color:#46998e}.level-progress{color:#879692}.heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:14px 0 27px}.stage-label{color:#eb826b;margin-bottom:7px}h1{font-size:clamp(38px,4vw,61px);letter-spacing:-.07em;line-height:1.02;margin:0;font-weight:850;color:#223434}.objective{margin:13px 0 0;font-size:16px;line-height:1.5;color:#63716f}.level-button{margin-bottom:6px}.level-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:-6px 0 22px}.level-tile{text-align:left;border:1px solid #d5ded9;background:#fff;border-radius:12px;padding:12px;display:grid;gap:4px;color:#263b3a}.level-tile.current{border-color:#3b9b94;box-shadow:inset 0 0 0 1px #3b9b94}.level-tile>span{font-weight:900;color:#49a598;font-size:12px}.level-tile strong{font-size:13px}.level-tile small{color:#929d99}.game-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(450px,1fr);gap:16px;align-items:stretch}.track-card,.work-card,.control-card{background:#fff;border:1px solid #dbe2df;border-radius:16px;box-shadow:0 8px 26px #253b3310}.track-card,.work-card{min-height:493px}.card-heading{display:flex;align-items:center;justify-content:space-between;padding:23px 25px 19px;gap:8px}.panel-index{color:#9ca9a4}h2{font-size:19px;letter-spacing:-.035em;margin:4px 0 0;color:#243637}.live-indicator{color:#8c9c95;display:flex;align-items:center;gap:7px}.live-dot{width:7px;height:7px;background:#60bc9d;border-radius:50%;box-shadow:0 0 0 4px #e8f6ef}.track-wrap{margin:0 17px;border-radius:12px;background:#f4f7f3;overflow:hidden;border:1px solid #e8eeea}.track-wrap svg{display:block;width:100%;height:auto;min-height:310px}.track-surface{fill:#f4f7f3}.track-rail{fill:none;stroke:#344849;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}.rail-tick{fill:#bfd0cb}.sensor-marker line{stroke:#a6b7b4;stroke-width:2;stroke-dasharray:3 4}.sensor-marker>circle:not(.sensor-core){fill:#fff;stroke:#2d4749;stroke-width:3}.sensor-marker .sensor-core{fill:#bdd6d2}.sensor-marker text,.mechanism text,.exit-label,.start-label{font-family:inherit;font-size:10px;fill:#6f8983;font-weight:800;letter-spacing:.07em}.sensor-marker.on>circle:not(.sensor-core){stroke:#008ee2;fill:#d6f2ff}.sensor-marker.on .sensor-core{fill:#008ee2}.mechanism rect{fill:#fff;stroke:#263c3d;stroke-width:3;transition:fill .15s,stroke .15s}.mechanism path{stroke:#e78971;stroke-width:4;stroke-linecap:round;transition:opacity .15s}.mechanism.on rect{stroke:#078de5;fill:#dcf2ff}.mechanism.on path{opacity:0}.ball{transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .16s;filter:drop-shadow(0 5px 2px #1d303028)}.ball.round>circle:first-child{fill:#ef7964;stroke:#3c4948;stroke-width:2}.ball.diamond>rect{fill:#eebc4a;stroke:#3c4948;stroke-width:2}.ball-detail{fill:none;stroke:#fff8;stroke-width:3}.track-footer{display:flex;justify-content:space-between;gap:20px;padding:19px 25px;color:#7c8985;font-size:12px}.step-counter{color:#668780;white-space:nowrap}.work-help{font-size:12px;color:#798985;margin:0 25px 14px;line-height:1.5}.work-help strong{color:#476665}.parts-count{color:#4f9d90;white-space:nowrap}.palette{display:flex;gap:8px;margin:0 25px 18px;min-height:65px}.palette-item{min-width:84px;flex:1;display:flex;gap:5px;align-items:center;flex-direction:column;background:#f7f9f7;border:1px solid #dce5e0;border-radius:9px;padding:7px;color:#304747;font-weight:800;font-size:11px}.palette-item:hover:not(:disabled),.palette-item.selected{border-color:#0992da;background:#e8f6fd}.palette small{color:#9aa9a2;font-size:8px}.part-symbol{font-size:19px;line-height:19px;font-weight:900;color:#378f8b}.bench-scroll{overflow-x:auto;margin:0 17px;padding:2px}.bench{min-width:490px;position:relative;display:grid;grid-template-columns:98px minmax(260px,1fr) 98px;gap:8px;min-height:252px;padding:16px 8px;border:1px solid #e1e9e4;border-radius:11px;background-color:#f8faf7;background-image:radial-gradient(#becbc372 1px,transparent 1px);background-size:16px 16px}.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}.wire{fill:none;stroke:#9fb3b0;stroke-width:3;stroke-linecap:round;transition:stroke .15s;filter:drop-shadow(0 1px 0 #fff)}.wire.on{stroke:#008fe5;stroke-width:4;stroke-dasharray:9 5;animation:flow .5s linear infinite;filter:drop-shadow(0 0 5px #35b8ff)}@keyframes flow{to{stroke-dashoffset:-14}}.terminal-rail{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-start;gap:16px;align-items:stretch}.rail-label{text-align:center;font-size:8px;color:#a6b3ae;white-space:nowrap;margin-bottom:3px}.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,70px);gap:8px;position:relative;z-index:3}.slot{min-width:0}.empty-slot{width:100%;height:100%;background:#ffffffa8;color:#a9b8b2;border:1px dashed #c9d7d0;border-radius:10px;display:grid;place-items:center;font-size:22px}.empty-slot:hover{color:#068fe1;border-color:#068fe1;background:#e9f7fd}.chip{display:flex;align-items:center;justify-content:space-between;position:relative;border:1px solid #bfcfc8;background:#fff;border-radius:9px;height:53px;box-shadow:0 3px 0 #e5ede8;min-width:0}.part-chip{height:70px}.chip.chosen{outline:2px solid #098ee3;outline-offset:1px}.chip.on{border-color:#078fe3;background:#edf9ff}.chip-select{border:0;background:none;color:#314847;display:flex;align-items:center;justify-content:center;flex-direction:column;flex:1;min-width:0;padding:2px;gap:2px}.chip-symbol{font-size:20px;font-weight:850;color:#488e8c;line-height:1}.chip-name{font-size:9px;font-weight:800;line-height:1.1;text-align:center;overflow:hidden;text-overflow:ellipsis;max-width:100%}.terminal-chip .chip-name{font-size:9px}.chip-inputs,.chip-outputs{display:flex;flex-direction:column;align-items:center;justify-content:space-around;height:100%;position:relative}.port{height:15px;width:15px;flex:none;padding:0;border:2px solid #506c6b;background:#fff;border-radius:50%;position:relative;z-index:4;box-shadow:0 0 0 2px #fff}.port.input{margin-left:-8px}.port.output{margin-right:-8px}.port span{position:absolute;top:17px;left:50%;transform:translateX(-50%);font-size:7px;font-weight:900;color:#8d9e99;pointer-events:none}.port.on,.port.pending{background:#0496e8;border-color:#067fc4;box-shadow:0 0 0 4px #bcecff,0 0 10px #35b9f9}.port.pending{animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 7px #bcecff,0 0 15px #35b9f9}}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 25px 8px;min-height:53px}.selection-bar p{margin:0;color:#647975;font-size:11px;line-height:1.35}.text-button{border:0;background:transparent;color:#c96858;text-decoration:underline;font-size:11px;font-weight:750;white-space:nowrap}.connection-list{padding:0 25px 16px;min-height:34px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}.connection-label{color:#9aa8a1;font-size:9px;margin-right:4px}.connection-empty{color:#adbab3;font-size:10px}.wire-pill{border:1px solid #d4e2dd;border-radius:20px;background:#f6faf8;color:#627d77;font-size:10px;padding:4px 8px;font-weight:700}.wire-pill:hover{color:#c35e4d;border-color:#edb9ab}.wire-pill span{color:#d1735e}.control-card{margin-top:16px;padding:18px 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.controls{display:flex;gap:8px;flex-wrap:wrap}.feedback{display:flex;align-items:center;gap:10px;flex:1;min-width:220px;color:#68817c;font-size:12px;line-height:1.45}.feedback-icon{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e6f1ee;color:#498f83;font-weight:900}.feedback.failure,.feedback.invalid{color:#a75548}.feedback.failure .feedback-icon,.feedback.invalid .feedback-icon{color:#b85d4b;background:#fff0eb}.feedback.success{color:#40836b}.feedback.success .feedback-icon{color:#348d6f;background:#e4f4e8}.success-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:12px;border-top:1px solid #e8eeea}.success-actions span{margin-right:auto;font-size:12px;color:#4a886d;font-weight:800}.bottom-note{display:flex;justify-content:space-between;gap:15px;margin:21px 5px;color:#a1ada6;font-size:9px;line-height:1.5}.bottom-note b{color:#d8a286}@media(max-width:1150px){.app-shell{padding:0 24px 25px}.game-layout{grid-template-columns:minmax(0,1fr)}.track-card,.work-card{min-height:auto}.track-wrap svg{max-height:350px}.work-card{padding-bottom:4px}.bench{min-height:250px}.control-card{align-items:flex-start}}@media(max-width:650px){.app-shell{padding:0 12px 20px}.topbar{height:65px}.brand{font-size:18px}.brand-icon{width:30px;height:30px}.edition{display:none}.top-actions .button{padding:8px;font-size:11px}.intro-line{padding-top:23px}.eyebrow{font-size:9px}.heading-row{align-items:flex-start;margin-bottom:20px}.heading-row .button{padding:8px;font-size:11px}.objective{font-size:13px}.level-picker{grid-template-columns:repeat(2,1fr)}.game-layout{gap:10px}.card-heading{padding:17px 16px 14px}.track-wrap{margin:0 9px}.track-wrap svg{min-height:180px}.track-footer{padding:11px 16px;font-size:11px}.live-indicator{font-size:8px}.work-help{margin:0 16px 12px}.palette{margin:0 16px 13px}.bench-scroll{margin:0 9px}.selection-bar{padding:12px 16px 7px}.connection-list{padding:0 16px 14px}.control-card{padding:13px;gap:13px}.controls{width:100%;display:grid;grid-template-columns:1fr 1fr}.controls .button{font-size:12px;padding:9px 5px}.feedback{min-width:0}.bottom-note span:last-child{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(max-width:650px){body.testing .control-card{position:sticky;bottom:0;z-index:9;box-shadow:0 -5px 18px #253b3322}.bottom-note{padding-bottom:12px}}
@media(max-width:650px){.track-card{position:static;box-shadow:0 8px 26px #253b3310}.bench{min-width:0;grid-template-columns:68px minmax(0,1fr) 68px;gap:3px;padding:12px 4px}.slots{gap:3px;grid-template-rows:repeat(3,60px)}.part-chip{height:60px}.chip-name,.terminal-chip .chip-name{font-size:7px}.chip-symbol{font-size:16px}.port{width:13px;height:13px}.port.input{margin-left:-7px}.port.output{margin-right:-7px}.rail-label{font-size:6px}}
/* The introductory instruction stays next to the only movable part. */
.coach{display:flex;align-items:center;gap:12px;margin:0 25px 12px;padding:12px 14px;border-radius:10px;background:#e8f6fb;border:1px solid #b8dfef;color:#275773;font-size:13px;line-height:1.4;font-weight:650}
.coach-step{flex:none;padding:5px 7px;border-radius:6px;background:#168bc3;color:white;font-size:11px;font-weight:850;white-space:nowrap}
.palette{flex-wrap:wrap;min-height:76px}
.palette-item{flex:1 1 135px;min-height:76px;flex-direction:row;justify-content:flex-start;text-align:left;gap:11px;padding:10px 12px;background:#eef8fc;border:2px solid #94d2eb;font-size:14px}
.palette-item:hover:not(:disabled),.palette-item.selected{background:#d9f1fd;border-color:#068fe1}
.palette-item:disabled{background:#f4f6f4;border-color:#e0e8e2}
.part-symbol{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:9px;background:#fff;color:#0789c7;font-size:27px;line-height:1}
.part-details{display:flex;flex-direction:column;gap:4px;min-width:0}
.part-details strong{font-size:15px;color:#24484f}
.palette small{font-size:10px;letter-spacing:0;color:#617c85;font-weight:650;white-space:nowrap}
.palette-action{margin-left:auto;border-radius:6px;background:#168bc3;color:white;padding:6px 8px;font-size:10px;font-weight:850;white-space:nowrap}
.palette-item:disabled .palette-action{display:none}
.rail-label{font-size:9px;color:#658a86}
@media(max-width:650px){.coach{margin:0 16px 12px;font-size:12px}.palette-item{flex-basis:135px;min-width:0}.palette-action{padding:5px;font-size:9px}.part-symbol{width:36px;height:36px;font-size:23px}.palette small{font-size:9px}.rail-label{font-size:8px}}
/* A one-sentence model of the machine, followed by its live consequence. */
.how-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-9px 0 22px;padding:11px 16px;border:1px solid #cfe1da;border-radius:11px;background:#edf7f2;color:#365952;font-size:12px;font-weight:700}
.how-strip span:not(.how-label):not(.how-arrow){display:flex;align-items:center;gap:7px}
.how-strip b{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#2f9b86;color:white;font-size:11px}
.how-label{font-size:10px;letter-spacing:.13em;color:#478f7f;font-weight:900;margin-right:6px}.how-arrow{color:#85aaa0}.jump-link{color:#236c94;text-decoration:underline;font-weight:800;margin-left:auto;white-space:nowrap}
.track-footer{margin:12px 17px 16px;padding:15px 16px;align-items:center;border-radius:9px;background:#eef6f3;color:#355f58;font-size:14px;font-weight:700;line-height:1.4}
.track-card.is-failure .track-footer{background:#fff0eb;color:#aa5649}.track-card.is-success .track-footer{background:#e7f5e9;color:#397b5d}
.step-counter{font-size:11px;font-weight:900;color:inherit;opacity:.75}
.tutorial-bench{min-height:150px;align-items:center;grid-template-columns:98px minmax(0,1fr) 98px}
.tutorial-bench .slots{display:flex;align-items:center;justify-content:center}
.tutorial-bench .slot{width:min(100%,170px);height:86px}
.tutorial-bench .part-chip{height:86px;border:2px solid #1494d3;background:#f1faff}
.tutorial-bench .empty-slot{border:2px dashed #118bd0;background:#e8f6fc;color:#168bc3;font-size:36px}
.tutorial-bench .terminal-chip{height:70px;border-color:#72aaa4}
.tutorial-bench .port{width:22px;height:22px;border-color:#057eac;background:#e9f7ff}
.tutorial-bench .port.input{margin-left:-11px}.tutorial-bench .port.output{margin-right:-11px}
@media(max-width:650px){.how-strip{margin:-7px 0 12px;padding:9px 11px;gap:6px 9px;font-size:10px}.how-label{width:100%;margin:0}.how-strip b{width:17px;height:17px;font-size:10px}.how-arrow{display:none}.jump-link{margin-left:0}.track-wrap svg{min-height:0}.track-footer{margin:9px 9px 10px;padding:11px 12px;font-size:12px}.tutorial-bench{grid-template-columns:68px minmax(0,1fr) 68px;min-height:132px}.tutorial-bench .slot{height:82px}.tutorial-bench .part-chip{height:82px}.tutorial-bench .terminal-chip{height:65px}.tutorial-bench .port{width:23px;height:23px}.tutorial-bench .port.input{margin-left:-12px}.tutorial-bench .port.output{margin-right:-12px}}
.work-run{display:none}
@media(max-width:650px){.game-layout{display:flex;flex-direction:column}.work-card{order:1}.track-card{order:2}.work-run{display:block;width:calc(100% - 32px);margin:0 16px 16px;padding:13px}.work-card .connection-list{padding-bottom:12px}}
.view-switch{display:none}
@media(max-width:650px){body.testing .view-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%}.view-switch .button{padding:7px;font-size:11px;background:#eef7f3}}