.mechanism-mode-tabs{display:flex;gap:22px;padding:0 24px;border-bottom:1px solid #cdd9c0;background:#e7eddb}.mechanism-mode-tabs>button{padding:15px 2px 13px;border-bottom:3px solid transparent;font:600 13px var(--sans);color:#80936e;text-align:left}.mechanism-mode-tabs>button[aria-selected=true]{border-color:#a44866;color:#3d623e}.mechanism-mode-tabs span{font:8px var(--mono);display:block;margin-top:5px;color:#93a380}.mechanism-chapters{display:grid;grid-template-columns:repeat(var(--chapters),minmax(0,1fr));gap:14px;background:#f4f5e9;padding:0 22px;border-bottom:1px solid #d5dfc9}.mechanism-chapters>button{padding:15px 0 13px;text-align:left;font:11px/1.5 var(--sans);border-bottom:3px solid transparent;color:#819472}.mechanism-chapters>button>span{font:8px var(--mono);display:block;margin-bottom:5px;color:#acb69b}.mechanism-chapters>button[aria-selected=true]{color:#9c4b65;border-color:#a44866}.mechanism-chapters>button[aria-selected=true]>span{color:#a44866}.mechanism-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr)}.mechanism-visual{min-width:0;background:#eef2e3;padding:18px 18px 16px;border-right:1px solid #d6e0c7}.mechanism-visual-top{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#8a9b7a;font:7px/1.5 var(--mono)}.mechanism-visual-top button{font:8px var(--mono);color:#a15c71;white-space:nowrap;padding:5px 0}.mechanism-svg{width:100%;height:auto;display:block;margin:17px 0 8px}.mechanism-svg text{font:13px var(--mono);fill:#536f48;pointer-events:none}.mechanism-svg .micro-label{font-size:10px;fill:#899b76}.mechanism-svg .micro-big{font:500 25px var(--head);fill:#976079}.mechanism-svg .carrier-symbol{font-size:9px;fill:#f8f6e6}.mechanism-svg .mechanism-box{fill:#fbfcf0;stroke:#bccdad;stroke-width:2}.mechanism-svg .micro-wire{stroke:#849e71;stroke-width:3;fill:none}.mechanism-svg .micro-axis{stroke:#c0ccb2;stroke-width:1.5;fill:none}.mechanism-svg .micro-curve{stroke:#a34e6a;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}.mechanism-svg .micro-digital{stroke:#a34e6a;stroke-width:3;fill:none;stroke-linejoin:round}.mechanism-svg .mechanism-arrow{stroke:#a18b59;stroke-width:2;fill:none}.mechanism-svg .micro-flow{stroke-dasharray:7 7;animation:micro-flow 1.4s linear infinite}.mechanism-svg .thermal-carrier{fill:#a65476;animation:micro-carrier var(--carrier-duration,1.7s) ease-in-out infinite alternate}.mechanism-svg .water-molecule{animation:micro-water 2s ease-in-out infinite alternate}.mechanism-svg .serial-bit{fill:#a9b99b;animation:micro-bit 4.8s linear infinite}.mechanism-svg .micro-valid{fill:#4c8a58}.mechanism-svg .micro-invalid{fill:#b34160;font-weight:600}.mechanism-svg .piezo-bend{transform-origin:335px 205px;animation:micro-bend .7s ease-in-out infinite alternate}.mechanism-svg .micro-vibration{animation:micro-wave 1.4s ease-in-out infinite alternate}.mechanism-svg .zone-moving{animation:micro-person 2.7s ease-in-out infinite alternate}.mechanism-svg .charge-carrier{animation:micro-charge 2s ease-in-out infinite alternate}.mechanism-svg .micro-gear{transform-origin:590px 232px;animation:micro-gear 3s linear infinite}.mechanism-svg .air-particle{fill:#779a83;animation:micro-air 1s ease-in-out infinite alternate}.sensor-story.motion-off .mechanism-svg *{animation-play-state:paused!important}.mechanism-controls{background:#fafbf0;border:1px solid #d4dfc3;border-radius:7px;padding:14px}.mechanism-controls>div+div{margin-top:12px}.mechanism-controls label{display:flex;justify-content:space-between;gap:12px;font:10px var(--mono);color:#788d67}.mechanism-controls output{color:#a14a68;font:600 11px var(--mono);white-space:nowrap}.mechanism-controls input{width:100%;accent-color:#a44866;margin:15px 0 3px}.mechanism-controls button{border:1px solid #c6d5b7;border-radius:4px;background:#e6edda;padding:8px 11px;font:10px var(--mono);color:#526f46;margin-top:10px}.mechanism-controls>p{font:10px/1.8 var(--mono);color:#5d7a4f;margin:12px 0 0}.comparison-controls{display:flex;gap:9px;flex-wrap:wrap}.comparison-controls>button{font-size:9px}.comparison-controls button:disabled{opacity:.35}.mechanism-caption{font:11px/1.7 var(--sans);color:#7a8c69;padding:0 4px;margin:13px 0 0}.mechanism-simulation-note{display:block;font:8px/1.6 var(--mono);color:#9ca98c;margin:12px 4px 0}.mechanism-explanation{padding:25px 24px;background:#fcfbf2;min-width:0}.mechanism-explanation>.eyebrow{font-size:8px;color:#ab6278;line-height:1.7}.mechanism-explanation>h3{font:600 29px/1.15 var(--head);color:#3d6341;margin:15px 0 18px}.mechanism-explanation>p{font:12px/1.85 var(--sans);color:#718563;margin:0 0 15px}.mechanism-formula{background:#e7edda;border-left:3px solid #9eaf82;border-radius:3px;padding:14px;margin:18px 0}.mechanism-formula>span{display:block;font:7px var(--mono);letter-spacing:1px;color:#92a37b;margin-bottom:10px}.mechanism-formula>strong{display:block;font:500 11px/1.8 var(--mono);color:#4d7148;overflow-wrap:anywhere}.mechanism-explanation>.mechanism-note{font:10px/1.8 var(--sans);color:#99a58a;margin-top:16px}.mechanism-playback{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px 23px;border-top:1px solid #d4dfc4;background:#f8f8ec}.mechanism-playback>div{display:flex;gap:9px;align-items:center}.mechanism-playback button{font:10px var(--mono);padding:10px 15px}.mechanism-playback button:disabled{opacity:.35}.mechanism-playback span{font:9px var(--mono);color:#889b77;margin-left:6px}.mechanism-playback small{font:8px/1.6 var(--mono);color:#92a37e}.mechanism-source{display:block;margin-top:9px}.examine-element{display:block;margin-top:9px;font:9px var(--mono);padding:6px 0;color:#a15a73}.detailed-working>.story-footer{justify-content:end;padding-top:13px;padding-bottom:13px}.mechanism-mode-tabs button:focus-visible,.mechanism-chapters button:focus-visible,.mechanism-playback button:focus-visible,.mechanism-controls button:focus-visible{outline:2px solid #a54c6b;outline-offset:3px}
@keyframes micro-flow{to{stroke-dashoffset:-28}}@keyframes micro-carrier{to{transform:translate(8px,-5px)}}@keyframes micro-water{to{transform:translate(8px,8px);opacity:.55}}@keyframes micro-bit{0%,8%{fill:#a44866;transform:translateY(-3px)}12%,100%{fill:#a9b99b;transform:translateY(0)}}@keyframes micro-bend{to{transform:scaleX(.94)}}@keyframes micro-wave{to{transform:translateY(3px)}}@keyframes micro-person{to{transform:translateY(65px)}}@keyframes micro-charge{to{transform:translateX(19px)}}@keyframes micro-gear{to{transform:rotate(360deg)}}@keyframes micro-air{to{transform:translateX(9px)}}
@media(min-width:1600px){.mechanism-explanation{padding:32px}.mechanism-explanation>h3{font-size:35px}.mechanism-explanation>p{font-size:14px}.mechanism-formula>strong{font-size:12px}}
@media(max-width:1150px){.mechanism-body{grid-template-columns:minmax(0,1.1fr) minmax(260px,1fr)}.mechanism-explanation{padding:22px 18px}.mechanism-explanation>h3{font-size:27px}.mechanism-explanation>p{font-size:11px}.mechanism-visual{padding:14px 11px}.mechanism-chapters{padding:0 16px;gap:10px}.mechanism-chapters button{font-size:10px}.mechanism-visual-top{font-size:6px}.mechanism-visual-top button{font-size:7px}.mechanism-playback{padding:15px}.mechanism-playback small{font-size:7px}}
@media(max-width:750px){.mechanism-body{grid-template-columns:1fr}.mechanism-visual{border-right:0;border-bottom:1px solid #d6e0c7;padding:17px 12px}.mechanism-explanation{padding:25px 20px}.mechanism-explanation>h3{font-size:31px}.mechanism-explanation>p{font-size:13px}.mechanism-visual-top{font-size:7px}.mechanism-visual-top button{font-size:8px}.mechanism-mode-tabs{padding:0 16px;gap:18px}.mechanism-mode-tabs>button{font-size:11px}.mechanism-mode-tabs span{font-size:7px;max-width:180px;line-height:1.6}.mechanism-chapters{gap:7px;padding:0 12px}.mechanism-chapters>button{font-size:9px;overflow-wrap:anywhere}.mechanism-controls label{font-size:9px}.mechanism-controls p{font-size:9px}.mechanism-playback{align-items:start;flex-direction:column;gap:10px}.mechanism-playback>div{width:100%}.mechanism-playback #mechanismPlay{flex:1}.mechanism-formula>strong{font-size:11px}.mechanism-simulation-note{font-size:7px}}
@media(prefers-reduced-motion:reduce){.mechanism-svg *{animation:none!important;transition:none!important}}
.mechanism-svg .wave-scan{fill:none;stroke:#c5b370;stroke-width:2;stroke-dasharray:4 5;animation:micro-scan 4s linear infinite}@keyframes micro-scan{to{transform:translateX(535px)}}