:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#192c36;background:#f5f4ee;line-height:1.55;font-size:16px}*{box-sizing:border-box}body{margin:0}main{max-width:1200px;margin:auto;padding:32px 28px}h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.1;letter-spacing:-.035em;margin:.45rem 0 1rem}h2{font-size:1.15rem;margin:0 0 .6rem}h3{font-size:1rem;margin:.2rem 0}p{margin:.55rem 0}.eyebrow{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:750;color:#37545c}.intro{max-width:720px;color:#40545b}.top{display:flex;justify-content:space-between;align-items:center;gap:16px}.badge{border:1px solid #62777b;border-radius:99px;padding:5px 12px;font-size:.78rem;white-space:nowrap}.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;margin-top:24px}.viewer-card,.panel{background:#fff;border:1px solid #c5ceca;border-radius:16px;overflow:hidden}.toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:14px;background:#eef1ed}button{min-height:44px;border:1px solid #6c7c80;border-radius:8px;background:#fff;color:#192c36;padding:9px 13px;font:inherit;font-size:.88rem;cursor:pointer;font-weight:650}button:hover{background:#e3eeeb}button[aria-pressed=true]{background:#194e53;color:white;border-color:#194e53}:focus-visible{outline:3px solid #b64e08;outline-offset:3px}.scene{position:relative;height:390px;background:#132b35;touch-action:none;outline-offset:-4px}.scene canvas{display:block;width:100%;height:100%}.scene:focus-visible{outline-color:#ffd27a}.sensor-titles{position:absolute;inset:15px 8px auto;display:grid;grid-template-columns:1fr 1fr;pointer-events:none;color:#fff;background:#132b35;text-align:center;font-weight:700;font-size:.9rem}.sensor-titles span{display:block;color:#b8d6d8;font-size:.72rem;font-weight:500}.scene-note{position:absolute;bottom:10px;left:12px;right:12px;color:#c9dfe1;background:#132b35;text-align:center;font-size:.73rem;pointer-events:none}.callouts{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px;border-bottom:1px solid #d5deda}.callout{border-left:3px solid #bb5b16;padding-left:10px;font-size:.87rem}.callout:last-child{border-color:#266f89}.callout strong{display:block}.tools{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px}.instructions{padding:0 16px 16px;color:#40545b;font-size:.8rem}.panel{padding:21px;align-self:start}.step{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;font-weight:750;color:#37545c}.layer-text{margin-top:16px}.layer-text article{padding:12px 0;border-top:1px solid #c5ceca;font-size:.91rem}.principle{margin-top:20px;padding:17px;background:#e7eeea;border-radius:12px;font-size:.9rem}.principle strong{display:block}.sources{font-size:.8rem;margin-top:22px;color:#40545b}.sources a{color:#174f6b;overflow-wrap:anywhere}.sources code{overflow-wrap:anywhere}details{margin-top:14px}summary{cursor:pointer;font-weight:650;min-height:44px;align-content:center}.fallback{position:absolute;top:90px;left:20px;right:20px;color:white;text-align:center}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}footer{margin-top:22px;font-size:.79rem;color:#40545b}@media(max-width:800px){main{padding:20px 16px}.layout{grid-template-columns:1fr;gap:16px}.scene{height:330px}.panel{padding:18px}.top{align-items:flex-start}.badge{font-size:.68rem;padding:4px 8px}.toolbar{padding:10px;gap:6px}.toolbar button{flex:1;padding:8px 5px;font-size:.8rem}.callouts{padding:12px;gap:10px}.sensor-titles{font-size:.78rem}.intro{font-size:.93rem}.tools button{flex:1;font-size:.78rem;padding:8px}.tools{gap:6px;padding:12px}.sources{font-size:.78rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.sensor-titles{display:block}.callouts{grid-template-columns:1fr}.scene{height:430px}.guide article{padding:12px 0;border-bottom:1px solid #c5ceca}.sources a,.callout a,.panel a,.guide a{color:#174f6b}.model-note{font-size:.85rem;color:#40545b}@media(max-width:800px){.scene{height:330px}.top{flex-wrap:wrap}}

/* Transport owns its button sizing, colors and wrapping; layer selection and
   specialist view settings remain separate named groups. */
#layer-transport{border-bottom:1px solid #c5ceca}
#layer-transport .iot-transport{padding:12px 16px}
@media(max-width:800px){#layer-transport .iot-transport{padding:12px}}