:root{--ink:#222428;--muted:#73777e;--line:#e4e7e9;--pre:#5084b5;--pre-bg:#f6f8fb;--mid:#6c9669;--mid-bg:#f6f8f4;--post:#bf8460;--post-bg:#fcf8f4;--auto:#208759;--human:#c84f50;--wheelchair:#c3882d;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:var(--ink);background:#fff;line-height:1.55;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;padding:8px 13px;background:#fff;color:var(--ink);font-size:13px}button:hover{background:#f3f5f7;border-color:#b6c4d0}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #8baacb;outline-offset:4px}button:disabled{opacity:.5;cursor:default}.topbar{height:80px;border-bottom:1px solid #edf0f2;display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1600px)/2));gap:24px}.wordmark{font-weight:720;font-size:25px;letter-spacing:-1px;white-space:nowrap}.wordmark span{font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:16px}.topbar nav{display:flex;align-items:center;gap:28px;font-size:13px}.topbar a:hover{color:var(--pre)}main{max-width:1664px;margin:auto;padding:0 32px}.intro{padding:64px 0 44px;display:flex;justify-content:space-between;gap:32px;align-items:flex-end}.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.55px;color:#7b8189;margin:0 0 12px}h1{font-size:clamp(32px,3.3vw,49px);font-weight:660;line-height:1.15;letter-spacing:-1.7px;margin:0 0 17px}.lede{font-size:16px;color:#777c84;max-width:680px;margin:0}.color-system{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0;max-width:395px}.color-system span{font-size:11px;padding:8px 10px;border-radius:9px;background:var(--wash);color:var(--ink);border:1px solid color-mix(in srgb,var(--chip) 18%,white);white-space:nowrap}.color-system span:before{content:"";display:inline-block;background:var(--chip);width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:1px}.module{scroll-margin-top:24px;margin:0 0 70px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin:0 0 21px}.section-heading .eyebrow{margin-bottom:8px}.section-heading h2{font-size:24px;line-height:1.25;margin:0;font-weight:640;letter-spacing:-.5px}.section-heading>p{font-size:12px;color:var(--muted);margin:0;max-width:330px}.hardware-grid{display:grid;grid-template-columns:minmax(0,1.27fr) minmax(0,1fr) minmax(200px,.64fr);gap:18px;align-items:stretch}.video-card,.diagram-card,.description-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;min-width:0}.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 17px;font-size:12px;font-weight:600;border-bottom:1px solid #eff1f3}.quality,.subtle{font-size:10px;color:var(--muted);font-weight:400;letter-spacing:.1px}.hardware-media{position:relative;background:#f3f5f6;aspect-ratio:16/9;overflow:hidden}.hardware-media video{display:block;width:100%;height:100%;object-fit:contain}.video-error{position:absolute;inset:0;background:#f6f7f9;padding:25px;font-size:14px}.video-error[hidden]{display:none}.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:14px 13px;border-bottom:1px solid #eff1f3}.tour-actions button{font-size:11px;padding:7px 9px}.tour-actions label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}.tour-actions input{accent-color:var(--pre)}.component-nav{display:flex;gap:7px;flex-wrap:wrap;padding:19px 17px 5px}.component-nav button{font-size:11px;padding:7px 9px;border-color:#e9ecef}.component-nav button.active{background:#eef4fa;color:#2d5f86;border-color:#aec5d9}.source-note{padding:8px 18px 0;font-size:11px;color:var(--muted);line-height:1.65}.download-links{display:flex;gap:16px;padding:8px 18px 19px;font-size:11px;color:#547893}.download-links a:hover{text-decoration:underline}.diagram-card{background:#fcfcfd;display:flex;flex-direction:column}.diagram-card .card-top{background:white}.diagram-card svg{width:100%;display:block;max-height:500px}.hw-node{cursor:pointer;outline:none}.hw-node rect{fill:#fff;stroke:#d9dfe6;stroke-width:1.5;transition:fill .28s,stroke .28s}.hw-node text{fill:#272d35;font-family:Arial,sans-serif;font-size:17px;font-weight:600;pointer-events:none}.hw-node .sub{font-size:12px;font-weight:400;fill:#78818b}.hw-node.active rect,.hw-node:focus-visible rect{fill:#edf4fa;stroke:#5084b5;stroke-width:2.7}.hw-node.active text{fill:#305f86}.hw-node .port{fill:#f1f4f8;stroke:none}.hw-wire{stroke:#adbcca;stroke-width:2;fill:none}.hw-motion{stroke:#5084b5;stroke-width:3;fill:none;stroke-dasharray:4 32;animation:signal 2.2s linear infinite;opacity:.75}.hw-power{stroke:#c7b394}.hw-cut{stroke:#c84f50;stroke-width:2;stroke-dasharray:5 5;opacity:.65;fill:none}.hw-cut-x{stroke:#c84f50;stroke-width:3}.diagram-key{display:flex;justify-content:center;gap:13px;flex-wrap:wrap;padding:5px 10px 14px;font-size:9px;color:#89919a;margin-top:auto}.diagram-key span{display:flex;align-items:center;gap:5px}.live-dot{height:6px;width:6px;background:#5084b5;border-radius:50%}.cut-mark{color:#c84f50;font-style:normal;font-size:15px}.description-card{padding:28px 23px;background:#f7f9fc;display:flex;flex-direction:column}.description-card h3{font-size:25px;line-height:1.2;letter-spacing:-.7px;margin:0 0 15px;font-weight:620;overflow-wrap:anywhere}.description-card>p:not(.eyebrow){font-size:14px;color:#647180;margin:0 0 20px}.part-fact{padding:12px 0;border-top:1px solid #e1e8f0;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#6b7887}.part-fact strong{font-size:13px;font-weight:600;color:#2b4057;white-space:nowrap}.note-bottom{margin-top:auto;padding-top:28px;color:#71808e;font-size:12px}.note-bottom b{color:#3e5265;font-weight:600}.note-bottom p{font-size:11px;margin:7px 0 0;line-height:1.65}.projection-module{padding-top:4px}.projection-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px}.segmented{display:flex;border:1px solid var(--line);background:#f5f7f9;padding:4px;border-radius:12px;gap:3px}.segmented button{background:transparent;border-color:transparent;font-size:12px}.segmented button.active{background:white;border-color:#d9e3ee;color:#315f87;box-shadow:0 2px 4px #25385108}.duration-control{font-size:11px;display:flex;align-items:center;gap:12px;color:var(--muted);white-space:nowrap}.duration-control input{width:110px;accent-color:var(--pre)}#duration-value{min-width:28px;font-variant-numeric:tabular-nums}.projection-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(220px,.85fr);gap:20px}.animation-card{background:var(--pre-bg);border:1px solid #dfe7f0;border-radius:16px;overflow:hidden;position:relative}.animation-heading{display:flex;align-items:center;gap:14px;padding:18px 23px;background:#f8fafd;min-height:66px}.animation-heading>span:first-child{font-size:11px;color:#66839d;font-variant-numeric:tabular-nums}.animation-heading h3{font-size:16px;margin:0;font-weight:600}.animation-heading>span:last-child{font-size:10px;color:#8596a5;margin-left:auto}#projection-canvas{display:block;width:100%;height:auto;background:var(--pre-bg);touch-action:none;cursor:grab}#projection-canvas:active{cursor:grabbing}#projection-loading{position:absolute;top:180px;left:0;right:0;text-align:center;color:var(--muted);font-size:14px}.playback-controls{display:flex;gap:9px;align-items:center;padding:15px 18px;background:#fff;border-top:1px solid #e5ebf2}.playback-controls button{font-size:11px;padding:7px 11px;white-space:nowrap}.playback-controls input{width:100%;min-width:45px;accent-color:var(--pre)}#projection-clock{font-size:10px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:70px;text-align:right}.step-nav{display:grid;grid-template-columns:repeat(6,1fr);background:#fff;padding:0 15px 14px;gap:5px}.step-nav button{font-size:10px;padding:8px 3px;border:0;line-height:1.3;color:#7a8792;background:transparent}.step-nav button span{display:block;font-size:9px;margin-bottom:5px;opacity:.65}.step-nav button.active{background:#eaf1f8;color:#315f87}.projection-explainer{padding:28px 19px;display:flex;flex-direction:column;justify-content:space-between;gap:25px}.projection-explainer h3{font-size:25px;line-height:1.2;letter-spacing:-.5px;font-weight:570;margin:0 0 17px}.projection-explainer p{font-size:13px;color:#78828b;line-height:1.75}.geometry-legend{display:flex;flex-direction:column;gap:10px;font-size:11px;color:#617283}.geometry-legend span{display:flex;align-items:center;gap:8px}.geometry-legend i,.palette-note i{width:8px;height:8px;border-radius:50%;display:inline-block}.projection-explainer .provenance{font-size:10px;color:#89949f;border-top:1px solid #e6ebef;padding-top:17px;margin:0}.projection-explainer>a{font-size:11px;color:#5084b5}.result-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:20px}.result-strip.four{grid-template-columns:repeat(4,1fr)}.result-strip figure{margin:0}.result-strip .result-image{border-radius:12px;overflow:hidden;background:#f1f4f7;aspect-ratio:16/9;border:1px solid #e4e8ed}.result-strip img{width:100%;height:100%;object-fit:contain;display:block}.result-strip figcaption{font-size:12px;font-weight:540;margin:10px 0 0}.result-strip figcaption small{font-size:10px;color:#8b939b;display:block;font-weight:400;margin-top:4px}.result-note{color:#8a959e;font-size:11px;margin-top:18px}.palette-note{border-top:1px solid var(--line);padding:27px 0 40px;display:grid;grid-template-columns:.65fr 1.7fr 1fr;gap:25px;align-items:start}.palette-note h3{font-size:15px;font-weight:550;margin:0}.palette-note p{font-size:11px;color:var(--muted);margin:0}.palette-note>div{display:flex;flex-wrap:wrap;gap:8px 15px;font-size:10px;color:#7b8691}.palette-note span{display:flex;align-items:center;gap:6px}footer{border-top:1px solid #eef0f2;color:#969da4;padding:24px 32px;text-align:center;font-size:11px}footer a{color:#607f9b}@keyframes signal{to{stroke-dashoffset:-72}}@media(min-width:1800px){.diagram-card svg{max-height:570px}.hardware-media{margin:0}.description-card{padding:35px 29px}}@media(max-width:1150px){.hardware-grid{grid-template-columns:1.1fr 1fr .73fr;gap:12px}.description-card{padding:22px 16px}.description-card h3{font-size:21px}.quality{display:none}.intro{display:block}.color-system{justify-content:flex-start;margin-top:24px}.topbar nav{gap:15px}.wordmark span{display:none}.projection-layout{grid-template-columns:minmax(0,3fr) minmax(200px,1fr)}.tour-actions{flex-wrap:wrap}.diagram-card .subtle{display:none}}@media(max-width:850px){.topbar{padding:0 20px;height:70px}.topbar nav>a:first-child{display:none}main{padding:0 20px}.intro{padding:39px 0}.hardware-grid{grid-template-columns:1fr 1fr}.description-card{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr;gap:8px 28px}.description-card .eyebrow{grid-column:1/-1}.description-card h3{grid-column:1}.description-card>p:not(.eyebrow){grid-column:1}.description-card #part-facts{grid-column:2;grid-row:2/4}.note-bottom{grid-column:1/-1;padding-top:8px}.projection-layout{grid-template-columns:1fr}.projection-explainer{padding:5px;display:grid;grid-template-columns:2fr 1fr;gap:12px 25px}.projection-explainer h3{font-size:20px}.projection-explainer .provenance{grid-column:1/-1}.section-heading>p{display:none}.animation-heading>span:last-child{display:none}.palette-note{grid-template-columns:1fr 2fr}.palette-note>div{grid-column:1/-1}.result-strip.four{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.hardware-grid{grid-template-columns:1fr}.description-card{display:block;grid-column:auto}.diagram-card svg{max-height:480px}.topbar nav>a:nth-child(2){display:none}.topbar nav{gap:12px}.wordmark{font-size:22px}.section-heading h2{font-size:22px}.projection-toolbar{flex-direction:column;align-items:stretch;gap:12px}.segmented button{flex:1;font-size:11px}.duration-control{justify-content:flex-end}.projection-explainer{display:block}.projection-explainer>*{margin-bottom:16px}.step-nav{grid-template-columns:repeat(3,1fr)}.result-strip{grid-template-columns:1fr}.playback-controls{flex-wrap:wrap}.playback-controls input{flex:1}.animation-heading{padding:14px}.animation-heading h3{font-size:14px}.intro h1{font-size:35px}.palette-note{display:block}.palette-note p{margin:10px 0}.module{margin-bottom:45px}}@media(prefers-reduced-motion:reduce){.hw-motion{animation:none}*{scroll-behavior:auto!important;transition:none!important}}