*{box-sizing:border-box}body{margin:0;background:#f4f4f4;color:#20222a;font:14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;height:100dvh;overflow:hidden}button,input,select{font:inherit}button,select{border:0;border-radius:12px;min-height:44px;cursor:pointer}button{background:#ececf0;color:inherit;padding:8px 14px}button:hover{filter:brightness(.94)}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #da9b44;outline-offset:3px}button[aria-pressed=true]{background:#edf2ff;color:#171c2a}h1,h2,p{margin:0}.workspace{position:fixed;inset:0}#stage{position:absolute;inset:100px 0 100px;touch-action:none}canvas{display:block;width:100%;height:100%}.summary{position:absolute;left:24px;top:20px;width:420px;pointer-events:none}h1{font-size:34px;letter-spacing:-1px}h1 small{font-size:17px;letter-spacing:.3px;margin-right:6px}.stats{display:flex;gap:8px;margin-top:10px}.stats>div{flex:1;border-radius:15px;background:#ffffffdc;padding:8px 13px}.stats small{display:block;font-size:10px;letter-spacing:1.7px;color:#929db5}.stats b{font-size:21px;font-variant-numeric:tabular-nums}.stats span{color:#96a1b8;font-size:14px}#stepCount{color:#ae792b}.eyebrow{font-size:10px;letter-spacing:1px;color:#a67738;margin-top:14px}#guide{margin-top:7px;max-width:330px;background:#ffffffdf;border-radius:14px;padding:14px}#guide h3{font-size:15px}#guide p{font-size:12px;margin-top:5px;color:#5d626e}.scene-hint{position:absolute;left:25px;bottom:95px;font-size:11px;color:#9399a6}.control-panel{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 32px));background:#303441f5;color:#f8f9ff;padding:14px 18px;border-radius:24px;box-shadow:0 16px 35px #0003}.label,.view-label{font-size:10px;letter-spacing:1.7px;font-weight:700;color:#a3aec6}.play-row{display:flex;align-items:center;gap:9px}.control-panel button{background:#424653;color:#dbe2f2}.play-row>button{width:44px;padding:0;font-size:24px}.play-row>button.primary{background:#645344;color:#ffd496;font-size:20px}.current{flex:1;min-width:0}.current h2{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.current span{font-size:11px;color:#a1aecb}.label{display:block;margin-top:9px}#steps{display:flex;justify-content:space-between;height:20px}#steps button{background:transparent;color:#98a5c2;padding:0;min-height:20px;border-radius:3px;width:26px;font:12px ui-monospace,monospace}#steps button[aria-pressed=true]{color:#ffd493;font-weight:bold}#timeline{width:100%;height:12px;accent-color:#f1c98e;display:block;margin:2px 0 8px}.view-label{margin-bottom:4px}.bottom-row{display:flex;gap:7px}.bottom-row>button{padding:0;width:42px;min-height:37px;font-size:21px}.view-switch{display:flex;flex:1;background:#414552;border-radius:12px;padding:3px}.view-switch button{flex:1;min-height:32px;padding:3px;font-size:12px;background:transparent}.view-switch button[aria-pressed=true],.bottom-row>button[aria-pressed=true]{background:#edf2ff;color:#171c2a}.secondary{display:flex;align-items:center;gap:6px;margin-top:8px}.secondary button{font-size:11px;min-height:25px;padding:3px 8px}.secondary label{margin-left:auto;font-size:11px;color:#b1bad0}.secondary select{background:#424653;color:#e4e9f5;min-height:25px;font-size:11px;padding:2px 5px}#loading{position:absolute;inset:45% 20%;text-align:center;pointer-events:none}#detailbox{position:absolute;right:24px;top:300px;width:310px;height:240px;border:1px solid #cdd0d8;border-radius:16px;overflow:hidden;background:#f4f4f4;box-shadow:0 12px 25px #0002}#detailbox b{position:absolute;left:10px;top:9px;font-size:10px;pointer-events:none}#detailclose{position:absolute;right:3px;top:2px;background:transparent;z-index:2}#detailstage{height:100%;touch-action:none}dialog{width:min(700px,94vw);max-height:90dvh;border:0;border-radius:20px;padding:20px;color:#252a36;background:#fff}dialog::backdrop{background:#181c2d99}.dialog-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}dialog h2{font-size:22px}dialog p{margin:12px 0;color:#727987;font-size:13px}dialog a{color:#815f33}[hidden]{display:none!important}@media(max-width:650px){.summary{left:16px;top:14px;width:calc(100% - 32px)}h1{font-size:28px}h1 small{font-size:13px}.stats{gap:5px;margin-top:7px}.stats>div{padding:6px 10px}.stats b{font-size:18px}.stats small{font-size:8px}.stats span{font-size:11px}#stage{inset:152px 0 262px}#guide{width:100%;padding:8px;margin-top:5px;max-height:100px;overflow:auto;pointer-events:auto}#guide h3{font-size:12px}#guide p{font-size:10px}.eyebrow{margin-top:8px;font-size:8px}.control-panel{bottom:10px;width:calc(100% - 20px);padding:10px 12px;border-radius:20px}.current h2{font-size:14px}.current span{font-size:10px}.scene-hint{display:none}#detailbox{right:12px;top:250px;width:190px;height:170px}.secondary button{min-height:26px}.bottom-row{gap:5px}.bottom-row>button{width:34px}.play-row{gap:7px}dialog{padding:15px}}@media(max-height:690px){#stage{top:105px;bottom:245px}#guide{max-height:75px}.secondary{margin-top:4px}.control-panel{bottom:5px;padding-top:8px;padding-bottom:8px}.summary{top:8px}h1{font-size:24px}.stats{margin-top:3px}}


/* Timeline markers and scrubber use equally spaced stage coordinates. */
#steps{position:relative;margin:0 7px}#steps button{position:absolute;transform:translateX(-50%)}
/* Reuse each stage marker so ticks stay aligned with its number and progress point. */
#steps button::after{content:"";position:absolute;top:34px;left:50%;width:1px;height:6px;background:currentColor;transform:translateX(-50%);pointer-events:none}
@media(max-width:650px){
 #stage{top:210px;bottom:132px}
 .with-detail #stage{left:8px;right:auto;width:115px;top:220px;bottom:auto;height:155px;z-index:3;border:1px solid #d5d8df;border-radius:12px;overflow:hidden}
 .with-detail #detailbox{left:4px;right:4px;top:210px;bottom:132px;width:auto;height:auto;box-shadow:none;border:0;border-radius:0}
 .with-detail #detailbox b{left:132px;right:36px;font-size:9px}
 .with-detail #detailclose{right:8px}
}
@media(max-width:650px) and (max-height:700px){
 #stage{top:190px;bottom:116px}
 .with-detail #stage{top:197px;width:84px;height:108px}
 .with-detail #detailbox{top:190px;bottom:116px}
 .with-detail #detailbox b{left:102px;font-size:8px}
}
@media(min-width:651px) and (max-height:550px){
 .control-panel{left:auto;right:10px;transform:none;width:340px;bottom:10px;padding:10px 12px}
 .summary{width:calc(100% - 380px);left:16px;top:10px}
 .summary h1{font-size:22px}.summary h1 small{font-size:12px}
 .stats{max-width:320px}.stats>div{padding:3px 10px}.stats b{font-size:16px}
 #guide{max-width:260px;max-height:78px;padding:8px;margin-top:3px;overflow:auto;pointer-events:auto}
 #guide h3{font-size:11px}#guide p{font-size:10px}
 #stage{top:185px;bottom:12px;left:0;right:355px}
 .scene-hint{display:none}
 .with-detail #stage{width:100px;height:125px;top:auto;bottom:12px;z-index:3;border:1px solid #d5d8df;border-radius:10px;overflow:hidden}
 .with-detail #detailbox{top:185px;bottom:12px;left:0;right:355px;width:auto;height:auto;box-shadow:none;border:0}
 .with-detail #detailbox b{left:110px;font-size:9px}

}





/* Compact controls: replay stays next to play; view modes no longer fill the row. */
.bottom-row{align-items:center}.view-switch{flex:0 1 210px;margin-right:auto}.view-switch button{min-width:58px}#replay{font-size:22px}.play-row>button{flex-shrink:0}
@media(max-width:650px){.view-switch{flex-basis:160px}.play-row>button{width:36px}.play-row{gap:6px}}

/* View tools belong to the preview; the lower panel contains only step controls. */
.scene-tools{position:absolute;top:24px;right:24px;z-index:4;padding:6px;background:#ffffffed;border:1px solid #e0e2e8;border-radius:16px;box-shadow:0 6px 20px #0001;gap:6px}
.scene-tools .view-switch{flex:0 0 148px;background:#e7e9ee;margin:0}
.scene-tools .view-switch button{color:#5d6577;min-height:32px}
.scene-tools .view-switch button[aria-pressed=true]{background:#fff;color:#202632;box-shadow:0 1px 4px #0001}
.scene-tools>button{width:36px;min-height:38px;background:#eef0f4;color:#5d6577}
.scene-tools>button[aria-pressed=true]{background:#303441;color:#fff}

@media(max-width:650px){
 .scene-tools{top:216px;right:12px;padding:4px;gap:5px;border-radius:13px}
 .scene-tools .view-switch{flex-basis:136px}
 #stage{top:274px}
 .with-detail #stage{top:284px}
 .with-detail #detailbox{top:274px}

}
@media(max-width:650px) and (max-height:700px){
 .scene-tools{top:198px}
 #stage,.with-detail #detailbox{top:250px}
 .with-detail #stage{top:258px}

}
@media(min-width:651px) and (max-height:550px){
 .scene-tools{top:auto;bottom:12px;right:367px;padding:4px}
 #stage,.with-detail #detailbox{bottom:68px}
 .with-detail #stage{bottom:68px}

}

/* Keep the live instruction beside playback, with a stable height during actions. */
.control-panel #guide{max-width:none;width:100%;height:56px;max-height:none;margin:20px 0 0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:auto;pointer-events:auto;scrollbar-width:thin}
.control-panel #guide h3{margin:0;font-size:13px;color:#f1ce95}
.control-panel #guide p{font-size:12px;line-height:1.6;color:#c3ccdc;margin-top:4px}
.control-panel .label{margin-top:6px}
.control-panel #timeline{margin-bottom:4px}
#stage{bottom:237px}.scene-hint{bottom:232px}
@media(max-width:650px){
 .scene-tools{top:122px}
 #stage,.with-detail #detailbox{top:178px;bottom:235px}
 .with-detail #stage{top:188px;bottom:auto}
 .control-panel #guide{height:80px;padding:0}

}
@media(max-width:650px) and (max-height:700px){
 .scene-tools{top:106px}
 #stage,.with-detail #detailbox{top:162px;bottom:227px}
 .with-detail #stage{top:172px}

}
@media(min-width:651px) and (max-height:550px){
 #stage,.with-detail #detailbox{top:110px;bottom:68px}
 .with-detail #stage{top:auto;bottom:68px}
 .control-panel #guide{height:80px}
}

.hardware-badge{position:absolute;top:0;left:0;right:auto;bottom:auto;width:max-content;visibility:hidden;z-index:4;display:flex;align-items:center;gap:10px;max-width:calc(100% - 48px);padding:9px 14px;border-radius:30px;background:#d4d4d4;color:#000;box-shadow:none;pointer-events:none}
.hardware-description{display:flex;align-items:baseline;gap:7px;min-width:0}.hardware-name{font-size:13px;white-space:nowrap}
.hardware-progress{display:flex;align-items:center;gap:8px;white-space:nowrap}.hardware-count{font-size:17px;color:inherit;font-variant-numeric:tabular-nums}
@media(max-width:650px){.hardware-badge{gap:7px;padding:8px 11px}.hardware-description{gap:5px}.hardware-name{font-size:12px}.hardware-progress{margin-left:auto;gap:6px}.hardware-count{font-size:15px}}

@media(min-width:651px) and (max-height:550px){.hardware-description{flex-wrap:wrap;gap:2px 6px}.hardware-progress{margin-left:auto}.hardware-name{font-size:12px}}

.hardware-badge.hardware-compact{width:164px;flex-wrap:wrap;border-radius:16px;gap:4px 7px;padding:7px 10px}.hardware-compact .hardware-description{flex:1;flex-wrap:wrap;gap:1px 5px}.hardware-compact .hardware-progress{width:100%;border-left:0;padding-left:0;margin:0;justify-content:space-between}.hardware-compact .hardware-name{font-size:12px}

/* One continuous scene, with a light floating controller above it. */
#stage{inset:0;width:100%;height:100%}
.summary{z-index:4}
.control-panel{z-index:10;background:rgba(255,255,255,.8);color:#20222a;border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 32px #20222a12,0 1px 3px #20222a08;-webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15)}
.control-panel button{background:rgba(229,232,238,.8);color:#5d6577}
.control-panel .play-row>button.primary{background:#303441;color:#fff}
.control-panel .label{color:#727987}
.control-panel #guide h3{color:#303441}
.control-panel #guide p{color:#5d6577}
.control-panel #steps button{background:transparent;color:#727987}
.control-panel #steps button[aria-pressed=true]{color:#20222a}
.control-panel #timeline{color-scheme:light;accent-color:#20222a}
.control-panel #timeline:focus-visible,.control-panel #steps button:focus-visible{outline-color:#20222a}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .control-panel{background:rgba(255,255,255,.96)}
}
@media(max-width:650px),(min-width:651px) and (max-height:550px){
 .with-detail #detailbox{inset:0;width:100%;height:100%;border:0;border-radius:0}
}
@media(max-width:650px){
 .with-detail #detailbox b{top:180px}
 .with-detail #detailclose{top:172px}
}
@media(max-width:650px) and (max-height:700px){
 .with-detail #detailbox b{top:164px}
 .with-detail #detailclose{top:156px}
}
@media(min-width:651px) and (max-height:550px){
 .with-detail #detailbox b{top:112px}
 .with-detail #detailclose{top:104px;right:367px}
}

/* Direction cues are projected from the actual rotating hardware, not screen-clockwise icons. */
#rotationCue{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:hidden}
#rotationCue path{stroke-linecap:round;stroke-linejoin:round}
#rotationCue .rotation-halo{fill:none;stroke:#fff;stroke-opacity:.95;stroke-width:6}
#rotationCue .rotation-arc{fill:none;stroke:#20222a;stroke-width:2.25}
#rotationCue .rotation-head{fill:#20222a;stroke:#fff;stroke-width:1.5}

/* View controls sit just above the console, outside its progress surface. */
.control-panel .scene-tools{position:absolute;left:auto;right:0;top:auto;bottom:calc(100% + 10px);margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;justify-content:flex-start}
.control-panel .scene-tools>button{width:38px;min-height:38px}
.control-panel .scene-tools>button[aria-pressed=true]{background:#303441;color:#fff}
.control-panel .scene-tools>.view-style{display:inline-flex;align-items:center;justify-content:center;width:38px;padding:0;border:1px solid transparent}
.control-panel .scene-tools>.view-style[aria-pressed=true]{background:#303441;color:#fff;border-color:#303441;box-shadow:none}



/* Keep the view-reset symbol centered independently of font glyph metrics. */
#reset{display:inline-flex;align-items:center;justify-content:center}
#help{display:inline-flex;align-items:center;justify-content:center}

.brand-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
#materialsOpen{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;min-height:38px;padding:8px 12px;font-size:12px;background:#ffffffdc;border:1px solid #e0e2e8}
#partsDialog{width:min(860px,94vw);padding:0;max-height:90dvh;overflow:hidden}
#partsDialog[open]{display:flex;flex-direction:column}
#partsDialog>.dialog-title{flex-shrink:0;margin:0;padding:16px 20px;border-bottom:1px solid #e7e9ee}
.catalog-body{overflow:auto;padding:20px}
#catalogGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.material-item{min-width:0;border:1px solid #e4e7ec;border-radius:14px;overflow:hidden;padding:0 12px 12px;background:#fff}
.material-item img{display:block;width:calc(100% + 24px);height:auto;aspect-ratio:4/3;object-fit:contain;margin:0 -12px 10px;background:#f1f3f5}
.material-item h3{font-size:14px;margin:0;color:#20222a}
.material-quantity{display:block;margin-top:6px;font-size:15px;font-variant-numeric:tabular-nums}


#helpDialog h3{font-size:15px;margin:18px 0 4px}
#helpDialog p{line-height:1.75;margin:8px 0}
@media(max-width:650px){
 #partsDialog>.dialog-title{padding:12px 14px}
 .catalog-body{padding:14px}
 #catalogGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .material-item h3{font-size:13px}
}

/* Wide windows use the side space instead of covering the model's lower half. */
@media(min-width:1200px) and (min-height:551px){
 .control-panel{left:auto;right:24px;top:50%;bottom:auto;transform:translateY(-50%);width:clamp(360px,26vw,400px);padding:18px}
 .control-panel #guide{height:auto;min-height:72px;max-height:min(240px,30dvh)}
 .control-panel #guide h3{font-size:14px}
 .control-panel #guide p{font-size:14px;line-height:1.65}
}

/* The component diagram is primary; the caption is only its name and count. */
.part-details{position:absolute;z-index:8;width:280px;display:flex;flex-direction:column;gap:6px;padding:4px;border:1px solid #ffffffc9;border-radius:16px;background:#ffffffed;backdrop-filter:blur(18px);box-shadow:0 12px 36px #20222a1c}
.part-details>button{position:absolute;right:2px;top:2px;width:36px;min-height:36px;padding:0;background:transparent;border-radius:0;font-size:21px;color:#697080}
.part-details>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:12px;background:#f1f3f5}
.part-details-copy{display:flex;align-items:baseline;justify-content:center;gap:6px;max-width:100%;padding:0 4px 4px}
.part-details h3{min-width:0;margin:0;font-size:12px;line-height:1.5;font-weight:500;overflow-wrap:anywhere}
.part-details .part-quantity{flex-shrink:0;margin:0;font-size:12px;line-height:1.5;font-weight:500;color:#20222a}
.part-details .part-code,.part-details .part-location{display:none}
.part-details.compact{width:180px;gap:6px;padding:4px}
.part-details.compact h3,.part-details.compact .part-quantity{font-size:11px}
@media(max-width:650px){.part-details{width:min(232px,calc(100vw - 24px));gap:6px}.part-details.compact{width:min(180px,calc(100vw - 24px))}}

/* The marketing embed uses the same player with only its progress console. */
.marketing-embed .summary,
.marketing-embed .scene-tools,
.marketing-embed .scene-hint {display:none}
.marketing-embed .play-row>button.primary {background:#17191c;color:#fff}

/* Avoid stale backdrop-filter tiles above the animated WebGL canvas in embeds. */
.marketing-embed .control-panel {background:rgba(255,255,255,.96);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 4px 18px #20222a0a}