.dtl{--dtl-yellow:#ffd33d;--dtl-ink:#20221f;--dtl-line:#b8b8af;padding-block:48px 72px;color:var(--ink,#242520)}.dtl h1,.dtl h2{font-family:var(--display,Arial,sans-serif);line-height:.95;letter-spacing:-.035em}.dtl h1{font-size:clamp(42px,7vw,76px);margin:10px 0 18px}.dtl h2{font-size:clamp(30px,4vw,48px);margin:5px 0}.dtl-intro{max-width:840px;border-bottom:4px solid var(--dtl-ink);padding-bottom:28px}.dtl-intro>p:not(.eyebrow){font-size:18px;line-height:1.65;max-width:720px}.dtl-note,.dtl-nojs{background:#e7e7df;border-left:4px solid var(--dtl-yellow);padding:14px 16px;font-size:13px}.dtl-module{padding:44px 0;border-bottom:1px solid var(--dtl-line)}.dtl-heading{margin-bottom:25px}.dtl-grid,.dtl-diff-layout{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:34px;align-items:center}.dtl-controls{display:grid;gap:15px;background:#e7e7df;padding:20px}.dtl-controls label{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font:700 13px var(--mono,monospace)}.dtl-controls input[type=range]{grid-column:1/-1;width:100%;accent-color:#a68100}.dtl-controls input[type=number]{width:105px;padding:7px}.dtl-controls output{color:#5a4800}.dtl-play{justify-self:start;background:var(--dtl-ink);color:#fff;border:0;padding:12px 15px;font-weight:700;cursor:pointer}.dtl-play[aria-pressed=true]{background:#675400}.dtl-status{font-size:13px;line-height:1.5;margin:0}.dtl-gear-stage{min-height:270px;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#2e302c,#151613)}.dtl-gear{position:absolute;border:13px dotted var(--dtl-yellow);border-radius:50%;display:grid;place-items:center;color:#fff;font:700 10px var(--mono,monospace);will-change:transform}.dtl-pinion{height:66px;width:66px;left:23%;top:45%}.dtl-spur{height:151px;width:151px;left:43%;top:19%;border-color:#dbdbd4}.dtl-ratio-readout{position:absolute;right:7%;bottom:10%;color:#fff;text-align:right;display:grid;gap:2px}.dtl-ratio-readout b{font-size:23px;color:var(--dtl-yellow)}.dtl-ratio-readout span,.dtl-ratio-readout small{font:9px var(--mono,monospace);text-transform:uppercase}.dtl-ratio-readout small{color:#d4d4ca;margin-top:5px}.dtl-explain{max-width:950px;font-size:15px;line-height:1.7;margin:23px 0 0}.dtl-explain a{color:inherit;text-decoration-color:#a68100}.dtl-explain code,.dtl-equation{background:#f0f0eb;padding:2px 5px}.dtl-choice,.dtl-controls fieldset{border:0;padding:0;margin:0;display:flex;gap:22px;flex-wrap:wrap;font-size:14px}.dtl-choice legend,.dtl-controls legend{font:700 11px var(--mono,monospace);text-transform:uppercase;margin-bottom:10px}.dtl-choice label,.dtl-controls fieldset label{display:flex;gap:7px;align-items:center}.dtl-car{height:270px;margin-top:25px;background:#e7e7df;position:relative;overflow:hidden}.dtl-motor-box,.dtl-center{position:absolute;z-index:2;background:var(--dtl-ink);color:#fff;padding:11px;text-align:center;font:700 12px var(--mono,monospace)}.dtl-motor-box{left:43%;top:40%}.dtl-motor-box span{font-size:9px;color:var(--dtl-yellow)}.dtl-center{left:45%;top:67%;opacity:0}.dtl-axle{position:absolute;left:12%;right:12%;height:16px;border-top:5px solid #85857d;display:flex;justify-content:space-between;align-items:center}.dtl-axle i{height:43px;width:43px;border:7px solid #85857d;border-radius:50%;background:#f8f8f3}.dtl-axle b{font:10px var(--mono,monospace);text-transform:uppercase}.dtl-front-axle{top:17%}.dtl-rear-axle{top:81%;border-color:var(--dtl-yellow)}.dtl-rear-axle i{border-color:var(--dtl-yellow)}.dtl-shaft{position:absolute;background:var(--dtl-yellow);height:5px;left:50%;width:5px;top:50%;transform-origin:left center}.dtl-rear-path{transform:rotate(90deg);width:82px}.dtl-front-path{display:none}.dtl-car.is-4wd .dtl-front-path{display:block;transform:rotate(-90deg);width:82px}.dtl-car.is-4wd .dtl-front-axle,.dtl-car.is-4wd .dtl-front-axle i{border-color:var(--dtl-yellow)}.dtl-car.is-4wd .dtl-center{opacity:1}.dtl-diff-visual{height:210px;background:#e7e7df;display:flex;align-items:center;justify-content:center;gap:0}.dtl-wheel{height:120px;width:66px;background:#2e302c;border:8px solid #151613;display:grid;place-items:center;color:#fff;font:9px var(--mono,monospace);text-align:center;position:relative}.dtl-wheel b{font-size:18px;color:var(--dtl-yellow)}.dtl-wheel small{font-size:7px}.dtl-wheel::after{content:'';position:absolute;bottom:-17px;left:12px;height:5px;width:var(--speed-width,50%);background:var(--dtl-yellow)}.dtl-left-wheel{--speed-width:var(--left-speed-width)}.dtl-right-wheel{--speed-width:var(--right-speed-width)}.dtl-diff-case{height:92px;width:150px;border:9px solid var(--dtl-yellow);background:var(--dtl-ink);color:#fff;display:grid;place-items:center;text-align:center}.dtl-diff-case b{font:700 17px var(--mono,monospace);color:var(--dtl-yellow)}.dtl-diff-case span{font-size:10px}.dtl-diff-visual.is-open.is-turn .dtl-left-wheel{transform:rotate(12deg)}.dtl-diff-visual.is-open.is-turn .dtl-right-wheel{transform:rotate(-5deg)}.dtl-diff-visual.is-open.is-split .dtl-left-wheel{animation:dtl-spin .55s linear infinite}.dtl-diff-visual.is-locked .dtl-wheel{border-color:var(--dtl-yellow)}.dtl-equation{display:inline-block;margin-top:18px;font:700 13px var(--mono,monospace)}.dtl-nojs{margin-top:32px}.dtl-nojs strong{color:#614d00}@keyframes dtl-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.dtl *{animation:none!important;transition:none!important}}@media(max-width:640px){.dtl{padding-block:30px 50px}.dtl-intro>p:not(.eyebrow){font-size:16px}.dtl-grid,.dtl-diff-layout{grid-template-columns:1fr;gap:20px}.dtl-module{padding:32px 0}.dtl-gear-stage{min-height:240px}.dtl-pinion{left:17%}.dtl-spur{left:37%}.dtl-ratio-readout{right:5%;bottom:5%}.dtl-choice{gap:12px}.dtl-car{height:245px}.dtl-motor-box{left:37%}.dtl-center{left:40%}.dtl-axle{left:7%;right:7%}}
/* Layered, code-native mechanism drawings. Existing data hooks remain on moving groups. */
.dtl-gear-stage{min-height:320px;border:1px solid #42453f;background:#171916}.dtl-gear-svg,.dtl-car svg{display:block;width:100%;height:100%}.dtl-gear-svg{position:absolute;inset:0}.dtl-gear{transform-box:fill-box;transform-origin:center}.dtl-gear-label text{fill:#fff;font:700 9px var(--mono,monospace);letter-spacing:1px;text-anchor:middle}.dtl-power-line{fill:none;stroke:var(--dtl-yellow);stroke-width:7;stroke-linecap:round;stroke-dasharray:5 8}.dtl-inline-diff{fill:#252824;stroke:#d6d7cf;stroke-width:4}.dtl-svg-caption{fill:#d6d7cf;font:700 9px var(--mono,monospace);letter-spacing:1px}.dtl-ratio-readout{z-index:2;padding:9px 10px;background:rgba(16,18,16,.86);border-left:3px solid var(--dtl-yellow)}
.dtl-car{height:auto;aspect-ratio:720/340;margin-top:25px;border:1px solid #b8b8af;background:#e7e7df}.dtl-chassis{fill:#292c28;stroke:#111;stroke-width:7}.dtl-deck{fill:#d9d9d1;stroke:#777a70;stroke-width:3}.dtl-wheel-set path{fill:#171916;stroke:#5b5f58;stroke-width:5}.dtl-car .dtl-motor-box rect{fill:#20221f;stroke:#ffd33d;stroke-width:3}.dtl-car .dtl-motor-box text{fill:#fff;font:700 13px var(--mono,monospace);text-anchor:middle}.dtl-car .dtl-motor-box text+text{fill:#ffd33d;font-size:8px}.dtl-car .dtl-shaft{fill:none;stroke:#ffd33d;stroke-width:9;stroke-linecap:round;stroke-dasharray:3 8}.dtl-car .dtl-front-path{display:none}.dtl-car .dtl-center{opacity:0}.dtl-car .dtl-center rect{fill:#20221f;stroke:#ffd33d;stroke-width:2}.dtl-car .dtl-center text{fill:#fff;font:700 8px var(--mono,monospace);text-anchor:middle}.dtl-car .dtl-axle path{stroke:#767a72;stroke-width:9}.dtl-car .dtl-axle circle{fill:#e7e7df;stroke:#767a72;stroke-width:8}.dtl-car .dtl-axle text{fill:#2d302c;font:700 10px var(--mono,monospace);letter-spacing:1px;text-anchor:middle}.dtl-car .dtl-rear-axle path,.dtl-car .dtl-rear-axle circle{stroke:#ffd33d}.dtl-car.is-4wd .dtl-front-path{display:block}.dtl-car.is-4wd .dtl-center{opacity:1}.dtl-car.is-4wd .dtl-front-axle path,.dtl-car.is-4wd .dtl-front-axle circle{stroke:#ffd33d}
.dtl-diff-visual{min-height:245px;padding:20px;gap:0;border:1px solid #b8b8af;background:linear-gradient(145deg,#eeeee8,#d9d9d1)}.dtl-wheel{height:142px;width:82px;border-radius:11px;background:repeating-linear-gradient(90deg,#1b1d1b 0 9px,#393d38 9px 13px);border:7px solid #121312;box-shadow:inset 0 0 0 5px #747a70;z-index:1}.dtl-wheel::before{content:'';width:42px;height:42px;border-radius:50%;background:#d8d8cf;border:7px solid #252824;box-shadow:inset 0 0 0 6px #ffd33d}.dtl-wheel b{z-index:1}.dtl-wheel::after{bottom:-16px;left:13px;border:1px solid #554900}.dtl-diff-case{height:160px;width:min(42vw,220px);max-width:220px;overflow:visible;background:none;border:0;color:inherit}.dtl-diff-case .dtl-halfshaft{stroke:#343733;stroke-width:10}.dtl-ring{fill:#292c28;stroke:#ffd33d;stroke-width:6}.dtl-side-gear{fill:#d7d8cf;stroke:#111;stroke-width:5}.dtl-spider{stroke:#ffd33d;stroke-width:7}.dtl-diff-word{fill:#292c28;font:700 12px var(--mono,monospace);letter-spacing:2px;text-anchor:middle}.dtl-diff-visual.is-locked .dtl-ring,.dtl-diff-visual.is-locked .dtl-spider{stroke:#e7b42b}.dtl-diff-visual.is-open.is-split .dtl-left-wheel{animation:dtl-spin .55s linear infinite}.dtl-diff-visual.is-open.is-turn .dtl-left-wheel{transform:rotate(5deg)}.dtl-diff-visual.is-open.is-turn .dtl-right-wheel{transform:rotate(-3deg)}
@media(max-width:640px){.dtl-gear-stage{min-height:245px}.dtl-gear-svg{width:150%;left:-25%}.dtl-ratio-readout{right:4px;bottom:4px}.dtl-car{aspect-ratio:720/390}.dtl-diff-visual{min-height:210px;padding:10px}.dtl-wheel{width:66px;height:124px}.dtl-diff-case{width:132px}.dtl-diff-case text{font-size:12px}}
/* SVG hook corrections against legacy dotted-gear rules. */
.dtl-gear-stage .dtl-gear{position:static!important;border:0!important;border-radius:0!important;color:inherit!important;font:inherit!important;display:block!important;width:auto!important;height:auto!important;left:auto!important;top:auto!important}.dtl-gear-stage .dtl-pinion,.dtl-gear-stage .dtl-spur{transform-origin:center!important}.dtl-car .dtl-motor-box,.dtl-car .dtl-center,.dtl-car .dtl-axle,.dtl-car .dtl-shaft{position:static!important;background:transparent!important;width:auto!important;height:auto!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important}.dtl-car.is-4wd .dtl-front-path{display:block!important;transform:none!important}.dtl-diff-case{display:block!important}