main [hidden]{display:none!important}
#labPageTabs{display:flex;border-bottom:1px solid #cad4bd;margin:0 0 25px;gap:28px;scroll-margin-top:12px}
#labPageTabs>button{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:13px 3px 15px;color:#829273;border-bottom:3px solid transparent;text-align:left;font:10px var(--mono)}
#labPageTabs b{font:600 23px var(--head);color:#627a57}#labPageTabs span{grid-column:2;font:9px var(--mono)}#labPageTabs>button[aria-selected=true]{border-color:#a33d60;color:#a33d60}#labPageTabs>button[aria-selected=true] b{color:#355b41}
#sensorLaunch{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;background:#edeede;border-top:1px solid #d1dac3}#sensorLaunch b{display:block;font:600 17px var(--head);color:#476447}#sensorLaunch span{display:block;font:10px/1.6 var(--sans);color:#788769;margin-top:4px}#sensorLaunch button{white-space:nowrap;border:1px solid #bcccb1;padding:10px 12px;border-radius:5px;color:#476747;background:#fafbf0;font:10px var(--mono)}
#wiringSvg .sensor-story-hit{cursor:pointer;outline:none}#wiringSvg .sensor-story-hit>rect{pointer-events:all;stroke:transparent;stroke-width:2}#wiringSvg .sensor-story-hit>circle{fill:#f6f0d4;stroke:#b1ba96}#wiringSvg .sensor-story-hit>text{fill:#486748;font-size:12px;font-style:italic}#wiringSvg .sensor-story-hit:hover>rect,#wiringSvg .sensor-story-hit:focus>rect{stroke:#aa4a6a;fill:#b8587811;stroke-dasharray:5 4}
.story-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:28px 0 24px}.story-intro h2{font:600 37px/1.1 var(--head);margin:8px 0;color:#355a3f}.story-intro p{font:12px/1.7 var(--sans);color:#7a876e;margin:0}.story-intro>button{font:10px var(--mono);white-space:nowrap}
.story-layout{display:grid;grid-template-columns:192px minmax(0,1fr);gap:24px;align-items:start}.story-library{padding-top:14px}.story-library>.eyebrow{font-size:8px;display:block;margin:0 0 12px 5px}.story-library>button{display:flex;align-items:center;gap:10px;width:100%;padding:13px 9px;border-bottom:1px solid #d6ddc9;text-align:left;color:#6c7d5d;border-radius:5px}.story-library>button[aria-pressed=true]{background:#e3e9d6;color:#3b5e3e;box-shadow:inset 3px 0 #a34865}.story-library-number{font:9px var(--mono);color:#9bab8d}.story-library b{font:600 16px var(--head);display:block}.story-library small{font:8px var(--mono);display:block;margin-top:4px;color:#8b9a7d}.story-library i{margin-left:auto;font-style:normal;color:#9eac8d;font-size:12px}
.sensor-story{border:1px solid #cbd6bf;border-radius:12px;overflow:hidden;background:#faf9ef;box-shadow:0 8px 32px #304c3010}.story-deck-heading{display:flex;align-items:start;justify-content:space-between;gap:24px;padding:24px 28px 22px;background:#294a3a;color:#faf7e9}.story-kicker{font:9px var(--mono);color:#afc59e;letter-spacing:1px}.story-deck-heading h2{font:500 36px/1.15 var(--head);margin:10px 0 11px;max-width:620px}.story-deck-heading h2:focus{outline:none}.story-deck-heading p{font:9px var(--mono);letter-spacing:1.2px;color:#b4c39e;margin:0}.story-slide-count{font:400 44px var(--head);color:#d8c78f;line-height:1}.story-slide-count small{font:11px var(--mono);color:#92ac8a;margin:0 0 0 7px;white-space:nowrap}
.story-slide-tabs{display:grid;grid-template-columns:repeat(4,1fr);padding:0 22px;background:#f1f2e6;border-bottom:1px solid #d2ddc5;gap:14px}.story-slide-tabs>button{border-bottom:3px solid transparent;padding:15px 1px 13px;font:10px var(--sans);color:#8c9b7c;text-align:left}.story-slide-tabs span{font:8px var(--mono);margin-right:7px;color:#a1af90}.story-slide-tabs>button[aria-selected=true]{border-color:#a44865;color:#465e40}.story-slide-tabs>button[aria-selected=true] span{color:#a44865}
.story-slide-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);min-width:0}.story-visual{background:#eef1e3;padding:18px 18px 12px;min-width:0;border-right:1px solid #d9e0cd}.story-visual-header{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#7e916e;font:7px var(--mono);letter-spacing:.4px}.story-visual-header>button{font:8px var(--mono);color:#7b5360;padding:6px 0;white-space:nowrap}.sensor-anatomy{display:block;width:100%;height:auto;max-height:420px;margin:12px 0 3px;overflow:visible}.sensor-anatomy text{font:12px var(--mono);fill:#476342;pointer-events:none}.sensor-anatomy .white-label{fill:#ecf0dd;font-size:10px}.sensor-anatomy .story-value-label{font-size:11px;fill:#8d4660}.sensor-anatomy .body{stroke:#8ba07a;stroke-width:2}.sensor-anatomy .label-leader{stroke:#acb89b;stroke-width:1;fill:none;stroke-dasharray:3 3;pointer-events:none}.sensor-anatomy .story-hotspot{cursor:pointer;outline:none}.sensor-anatomy .story-hotspot>rect{fill:#fcfcf1;stroke:#c8d2b8;stroke-width:1}.sensor-anatomy .story-hotspot>circle{fill:#dfe7d0;stroke:none}.sensor-anatomy .hotspot-number{font-size:11px;fill:#59734c}.sensor-anatomy .story-hotspot>text:not(.hotspot-number){font-size:11px}.sensor-anatomy .story-hotspot.part-highlight>rect,.sensor-anatomy .story-hotspot:focus>rect,.sensor-anatomy .story-hotspot:hover>rect{stroke:#a64766;stroke-width:2}.sensor-anatomy .story-hotspot.part-highlight>circle{fill:#a64766}.sensor-anatomy .story-hotspot.part-highlight .hotspot-number{fill:#fff8e8}.sensor-anatomy .story-part-shape.part-highlight .body{stroke:#a64766;stroke-width:3;filter:drop-shadow(0 0 4px #a54b6233)}.sensor-anatomy .circuit-line{fill:none;stroke:#819a6c;stroke-width:3}.sensor-anatomy .signal-flow,.sensor-anatomy .sound-out,.sensor-anatomy .sound-back,.sensor-anatomy .feedback-flow{fill:none;stroke:#a58550;stroke-width:2;stroke-dasharray:7 7}.sensor-anatomy .sound-back{stroke:#a64d70}.sensor-anatomy .signal-flow,.sensor-anatomy .sound-out,.sensor-anatomy .feedback-flow{animation:story-flow 1.5s linear infinite}.sensor-anatomy .sound-back{animation:story-flow 1.5s linear infinite;animation-delay:.7s}.sensor-anatomy .servo-gear{animation:story-gear 7s linear infinite}.sensor-anatomy .piezo-disc{transform-origin:273px 235px;animation:story-vibrate .35s ease-in-out infinite alternate}.sensor-anatomy .led-rays{animation:story-glow 1.5s ease-in-out infinite}.sensor-anatomy .light-beams{animation:story-glow 2s ease-in-out infinite}.sensor-anatomy .moisture-drift{animation:story-drift 2.2s ease-in-out infinite}.sensor-anatomy .pir-person.example-active{animation:story-person 3s ease-in-out infinite alternate}.sensor-anatomy .pir-person:not(.example-active){opacity:.2}.sensor-story[data-slide="0"] .diagram-motion,.sensor-story[data-slide="0"] .signal-flow,.sensor-story[data-slide="0"] .feedback-flow,.sensor-story[data-slide="0"] .pir-person{animation:none!important}.sensor-story.motion-off .sensor-anatomy *{animation-play-state:paused!important}
.story-control{padding:13px 13px 10px;background:#fafbf0;border:1px solid #d7e0c9;border-radius:7px;margin-top:12px}.story-control>label{display:flex;align-items:center;justify-content:space-between;gap:15px;font:9px var(--mono);color:#718462}.story-control output{font:600 11px var(--mono);color:#984661;white-space:nowrap}.story-control input{width:100%;accent-color:#a44865;margin:14px 0 3px}.story-control>button{background:#e2e9d5;color:#46663e;border:1px solid #c7d4b8;padding:8px 14px;border-radius:4px;font:10px var(--mono);margin:12px 0 3px}.story-control p{font:10px/1.7 var(--mono);color:#6a7b5d;margin:8px 0 0}.story-diagram-note{text-align:center;font:8px/1.5 var(--mono);color:#94a385;margin:11px 0 0}
.story-explanation{padding:25px 23px 20px;min-width:0}.story-explanation>.eyebrow{font-size:8px;color:#a15a6d}.story-explanation h3{font:600 29px/1.1 var(--head);margin:13px 0;color:#3e613f}.story-slide-copy{font:13px/1.8 var(--sans);color:#708062;margin:0 0 18px}.story-part-detail{border-left:3px solid #b26a7c;background:#f0ece0;padding:12px 13px;margin:0 0 18px}.story-part-detail>span,.story-python>span{font:7px var(--mono);letter-spacing:1px;color:#9a8978;display:block}.story-part-detail b{font:600 16px var(--head);display:block;margin:7px 0;color:#6f4e57}.story-part-detail p{font:11px/1.7 var(--sans);color:#88746e;margin:0}.story-python{padding:12px 13px;background:#e7eddc;border-radius:6px;overflow:hidden}.story-python>span{color:#829771}.story-python pre{font:10px/1.8 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:#4a744b;margin:10px 0}.story-python small{font:8px/1.7 var(--mono);color:#8d9e7b;display:block}.story-teaching-note{font:10px/1.7 var(--sans);color:#8c987d;margin:14px 0 0}
.story-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid #d7dfc9;padding:17px 23px}.story-playback{display:flex;gap:8px;align-items:center}.story-playback button{font:10px var(--mono);padding:10px 15px}.story-playback button:disabled{opacity:.35}.story-try{font:10px var(--mono);color:#7e4a61}.story-try span{margin-left:10px}.story-sources{padding:13px 23px 15px;border-top:1px solid #e0e4d3;font:9px/1.8 var(--mono);color:#8b997b}.story-sources summary{cursor:pointer}.story-sources p{font:11px/1.7 var(--sans);max-width:760px}.story-sources a{color:#6c855b}.sensor-story button:focus-visible,#labPageTabs>button:focus-visible,.story-library button:focus-visible{outline:2px solid #a44865;outline-offset:3px}
@keyframes story-flow{to{stroke-dashoffset:-28}}@keyframes story-gear{to{transform:rotate(360deg)}}@keyframes story-vibrate{to{transform:scaleY(.8) translateY(3px)}}@keyframes story-glow{50%{filter:brightness(1.35);transform:translateY(-2px)}}@keyframes story-drift{50%{transform:translate(8px,9px);opacity:.4}}@keyframes story-person{to{transform:translateY(40px)}}
@media(min-width:1600px){.story-deck-heading h2{font-size:44px}.story-slide-copy{font-size:15px}.story-explanation{padding:32px}.story-explanation h3{font-size:35px}.story-control p{font-size:11px}}
@media(max-width:1150px){.story-layout{grid-template-columns:155px minmax(0,1fr);gap:16px}.story-library b{font-size:15px}.story-library small{font-size:7px}.story-library-number{display:none}.story-slide-body{grid-template-columns:minmax(0,1.25fr) minmax(220px,1fr)}.story-deck-heading h2{font-size:31px}.story-slide-tabs{padding:0 14px;gap:7px}.story-slide-tabs>button{font-size:8px}.story-visual{padding:13px 10px}.story-explanation{padding:20px 16px}.story-explanation h3{font-size:26px}.story-slide-copy{font-size:12px}.story-visual-header{font-size:6px}.story-visual-header>button{font-size:7px}}
@media(max-width:900px){.story-layout{grid-template-columns:1fr}.story-library{display:flex;overflow:auto;gap:8px;padding:0 0 8px}.story-library>.eyebrow{display:none}.story-library>button{flex:0 0 155px;border:1px solid #d6ddc9}.story-slide-body{grid-template-columns:minmax(0,1.3fr) minmax(230px,1fr)}.story-intro h2{font-size:32px}.story-intro p{font-size:11px}}
@media(max-width:650px){#labPageTabs{gap:16px;margin-bottom:20px}#labPageTabs>button{font-size:8px;gap:4px 7px}#labPageTabs b{font-size:21px}#labPageTabs span{font-size:7px;line-height:1.5}.story-intro{align-items:start;flex-direction:column;margin:20px 0}.story-intro h2{font-size:31px}.story-intro>.outline{padding:8px 0;border:0}.story-slide-body{grid-template-columns:1fr}.story-visual{border-right:0;border-bottom:1px solid #d9e0cd;padding:15px 10px}.story-explanation{padding:24px 20px}.story-explanation h3{font-size:31px}.story-slide-copy{font-size:13px}.story-deck-heading{padding:20px}.story-deck-heading h2{font-size:30px}.story-kicker{font-size:8px}.story-deck-heading p{font-size:7px;line-height:1.8}.story-slide-count{font-size:32px}.story-slide-count small{font-size:9px;display:block;margin-top:7px}.story-slide-tabs{padding:0 12px}.story-slide-tabs>button{font-size:8px;line-height:1.5}.story-slide-tabs span{display:block;margin-bottom:3px}.story-footer{align-items:start;flex-direction:column;padding:15px 20px;gap:20px}.story-playback{width:100%}.story-playback #storyPlay{flex:1}.story-try{font-size:10px}.story-visual-header{font-size:7px}.story-visual-header>button{font-size:8px}#sensorLaunch{align-items:start;flex-direction:column;gap:10px}#sensorLaunch>button{width:100%}.story-control>label{font-size:8px}}
@media(prefers-reduced-motion:reduce){.sensor-anatomy *{animation:none!important;transition:none!important}}
.sensor-anatomy .story-hotspot:focus-within>rect{stroke:#a64766;stroke-width:2}#wiringSvg .sensor-story-hit:focus-within>rect{stroke:#aa4a6a;fill:#b8587811;stroke-dasharray:5 4}
.sensor-anatomy .reverse-gear{animation-direction:reverse}.sensor-story:not([data-slide="2"]) .servo-gear{animation-play-state:paused}
.sensor-story[data-slide="0"] .sound-out,.sensor-story[data-slide="0"] .sound-back{opacity:.25}.sensor-story[data-slide="1"] .sound-back{opacity:.15;animation:none}.sensor-story[data-slide="2"] .sound-out{opacity:.3}