:root{color-scheme:light;font:13px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:#253b55}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;background:transparent;overflow:hidden}
button,input,select{font:inherit}button,select,label{touch-action:manipulation}
main{width:100%;height:100%;display:flex;flex-direction:column;min-height:0;background:transparent}
.viewer-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 28px 12px;flex:0 0 auto}
.eyebrow{font-size:10px;letter-spacing:.12em;color:#7890ac;font-weight:650}
h1{font-size:23px;letter-spacing:-.04em;line-height:1.25;margin:5px 0 6px;color:#192c45}
.viewer-header p{margin:0;color:#71849c;font-size:12px}
.focus-control{display:flex;align-items:center;gap:9px;font-size:11px;color:#71849c;white-space:nowrap}
select{padding:8px 30px 8px 12px;border:1px solid #d9e3ef;border-radius:8px;background:#fff;color:#294b77;cursor:pointer;font-size:12px;min-height:36px}
.part-filters{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0;padding:0 28px 10px;flex:0 0 auto}
.part-filters legend{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.part-filters label{position:relative;cursor:pointer}
.part-filters input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.part-filters span{display:block;border:1px solid #dce4ee;border-radius:18px;padding:5px 11px;color:#8595a8;background:#fff;font-size:11px}
.part-filters input:checked+span{background:#edf4ff;border-color:#cfdef3;color:#315e99}
.part-filters input:disabled+span{opacity:.45}
.part-filters input:focus-visible+span,select:focus-visible,button:focus-visible{outline:2px solid #3378cf;outline-offset:2px}
.model-stage{flex:1 1 auto;min-height:0;position:relative;background:transparent}
canvas{width:100%;height:100%;display:block;background:transparent;touch-action:pan-y;cursor:grab;outline-offset:-3px}
canvas:active{cursor:grabbing}canvas:focus-visible{outline:2px solid #3278ce}
.camera-controls{position:absolute;right:23px;bottom:13px;display:flex;gap:6px}
.camera-controls button{width:34px;height:34px;display:grid;place-content:center;line-height:1;border:1px solid #cfdeef;border-radius:50%;background:#ffffffec;color:#345473;font-size:21px;cursor:pointer}
.camera-controls button:hover{background:#eaf2ff}
footer{display:flex;justify-content:space-between;gap:12px;padding:9px 28px 16px;color:#7e90a8;font-size:10px;flex:0 0 auto}
#viewer-status{position:absolute;top:44%;left:0;right:0;text-align:center;padding:0 24px;margin:0;color:#71849c;font-size:13px;pointer-events:none}
main[data-state=ready] #viewer-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
main[data-state=error] .camera-controls{display:none}
html.model-hero-view .viewer-header,html.model-hero-view .part-filters,html.model-hero-view footer{display:none}
html.model-hero-view .camera-controls{right:16px;bottom:14px}
@media(max-width:600px){.viewer-header{padding:15px 14px 11px;gap:10px;align-items:flex-start}h1{font-size:20px}.eyebrow{font-size:9px}.viewer-header p{font-size:10px;max-width:200px}.focus-control{flex-direction:column;align-items:flex-start;gap:4px;font-size:9px;padding-top:2px}select{font-size:11px;padding:6px 18px 6px 8px;min-height:33px}.part-filters{padding:0 14px 6px;gap:5px}.part-filters span{padding:5px 9px;font-size:10px}footer{padding:7px 14px 12px;font-size:9px}.camera-controls{right:14px;bottom:10px}.camera-controls button{width:34px;height:34px}}

/* Embedded in its own design article: keep controls, avoid a repeated title. */
html.model-embed-view .viewer-header>div{display:none}
html.model-embed-view .viewer-header{justify-content:flex-end;padding:8px 28px 6px}
html.model-embed-view .focus-control{flex-direction:row;align-items:center;gap:8px;padding-top:0}
@media(max-width:600px){html.model-embed-view .viewer-header{padding:7px 14px 6px}}