:root{font-family:"Microsoft YaHei",Arial,sans-serif;color:#293136;background:#f6f5f2;font-synthesis:none;--ink:#293136;--muted:#86857e;--gold:#a98139;--line:#dedbd4}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #bb9042;outline-offset:4px}button:disabled,select:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}
header{display:flex;align-items:center;justify-content:space-between;height:70px;padding:0 4vw;border-bottom:1px solid var(--line)}.brand{color:var(--ink);text-decoration:none;font-size:25px;letter-spacing:3px;font-weight:700}.brand span{font-size:11px;font-weight:400;letter-spacing:1px;margin-left:15px}.header-note{font-size:11px;color:var(--muted)}
main{max-width:1560px;margin:auto;padding:32px 4vw 20px}.heading{margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold)}h1{font-size:34px;font-weight:500;margin:13px 0 10px;letter-spacing:.5px}h1 span{margin-left:.4em;color:#a68445}.heading p{font-size:13px;color:var(--muted);margin:0;line-height:1.8}
.showcase{display:grid;grid-template-columns:minmax(0,1fr) 280px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#f1efea}.stage{height:clamp(500px,68svh,680px);min-width:0;position:relative;overflow:hidden;background:#e7ecf0}#canvas-host{position:absolute;inset:0;touch-action:pan-y}canvas{display:block;width:100%;height:100%}#poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;background:#e7ecf0}.scene-label{position:absolute;top:23px;left:26px;display:grid;gap:7px;pointer-events:none;color:#686b68;z-index:2}.scene-label b{font:500 11px Arial;letter-spacing:2px}.scene-label span{font-size:10px;color:#9a9990}.live-badge{position:absolute;top:25px;right:25px;display:flex;gap:7px;align-items:center;font-size:9px;color:#96988f;z-index:2;pointer-events:none}.live-badge i{width:5px;height:5px;border-radius:50%;background:#9b9f87}.live-badge.inspecting i{background:#b68e47}.live-badge.paused i{background:#b0aca3}
#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;padding:15px 20px;border:1px solid var(--line);border-radius:8px;background:#faf9f6ed;color:#79766d;font-size:12px;max-width:85%;text-align:center}
.viewer-controls{position:absolute;bottom:22px;left:24px;display:flex;gap:10px;z-index:3}.viewer-controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d2cfc6;border-radius:7px;background:#faf9f6ed;font-size:11px;padding:9px 13px;min-height:36px;white-space:nowrap}.viewer-controls button:hover{background:#fff;border-color:#aab0aa}.camera-presets{display:flex;gap:4px;padding:3px;border:1px solid #d2cfc6;border-radius:8px;background:#faf9f6ed}.camera-presets button{min-height:30px;border:0;background:transparent;padding:6px 10px}.camera-presets button[aria-pressed="true"]{background:#e9dfc8;color:#715724;box-shadow:inset 0 0 0 1px #c4a56c}#play{min-width:72px}#play>span:first-child{font-size:13px}#interaction{display:none}.orbit-hint{position:absolute;bottom:72px;left:25px;margin:0;font-size:10px;color:#79848b;pointer-events:none;z-index:2}
.structure-card{padding:31px 25px 25px;border-left:1px solid var(--line);background:#f9f8f5;display:flex;flex-direction:column;min-width:0}.card-kicker{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#aaa18e;font:10px Arial;letter-spacing:1.3px}#part-number{font-size:15px;color:#af8b49}.part-heading{display:flex;align-items:flex-start;gap:8px;margin-top:28px}h2{font-size:24px;font-weight:500;line-height:1.5;letter-spacing:.3px;margin:0;flex:1}#clear-part{border:0;background:transparent;font:22px Arial;color:#938976;padding:3px}#part-description{font-size:12px;line-height:2;color:#85857e;margin:22px 0 0}.part-spec{border-top:1px solid var(--line);padding-top:23px;margin-top:27px}.part-spec>span{font-size:10px;color:#a48852;letter-spacing:1px}.part-spec p{font-size:11px;line-height:1.95;color:#8b8980;margin:10px 0 0}.part-selector{margin-top:auto;padding-top:34px}.part-selector label{display:block;font-size:10px;color:#999182;margin-bottom:10px}.part-selector select{width:100%;border:0;border-bottom:1px solid #d5d0c4;background:transparent;padding:10px 21px 10px 0;line-height:1.5;font-size:11px;border-radius:0;cursor:pointer}.part-selector>p{margin:13px 0 0;color:#aaa59a;font-size:9px;line-height:1.7}.structure-card.has-selection{background:#f7f5ee}.structure-card.has-selection h2{color:#685331}
.part-connector{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:visible;opacity:0}.part-connector.active{opacity:1}.part-connector path{fill:none;stroke:#a77931;stroke-width:1}.part-connector circle{fill:#c7953f;stroke:#fff;stroke-width:2}.part-tag{position:absolute;z-index:3;pointer-events:none;border:1px solid #b89a66;background:#fffdf5ed;border-radius:4px;padding:9px 12px;box-shadow:0 3px 16px #5d4e2810;min-width:98px}.part-tag span{display:block;font-size:11px;color:#73592a}.part-tag small{display:block;font:8px Arial;color:#aaa08b;margin-top:5px;letter-spacing:.5px}
footer{font-size:9px;color:#a2a098;margin-top:12px}.debug-controls{margin-top:16px;display:flex;gap:15px;align-items:center;font-size:11px}.debug-controls input{width:380px}.debug-controls button{padding:8px;background:#fff;border:1px solid var(--line)}
.embedded header,.embedded .heading,.embedded footer{display:none}.embedded main{padding:0;max-width:none}.embedded .showcase{border:0;border-radius:0}.embedded .stage{height:630px}.poster-capture header,.poster-capture .heading,.poster-capture .structure-card,.poster-capture .scene-label,.poster-capture .live-badge,.poster-capture .viewer-controls,.poster-capture .orbit-hint,.poster-capture footer{display:none}.poster-capture main{padding:0;max-width:none}.poster-capture .showcase{display:block;border:0;border-radius:0}.poster-capture .stage{height:100svh}
@media(pointer:coarse){#interaction{display:inline-flex}.orbit-hint{font-size:9px}.live-badge{display:none}}
@media(max-width:1100px){.showcase{grid-template-columns:minmax(0,1fr) 250px}.structure-card{padding:28px 22px}.orbit-hint{bottom:71px;left:25px;right:auto}.live-badge{display:none}}
@media(max-width:760px){header{height:58px;padding:0 20px}.header-note{font-size:10px}main{padding:24px 16px}.heading{margin-bottom:20px}h1{font-size:28px}.heading p{font-size:12px}.showcase{grid-template-columns:1fr}.stage,.embedded .stage{height:510px}.structure-card{border-left:0;border-top:1px solid var(--line);padding:23px 24px;min-height:310px}.part-heading{margin-top:14px}h2{font-size:22px}#part-description{margin-top:12px}.part-spec{margin-top:18px;padding-top:16px}.part-selector{padding-top:21px}.card-kicker{font-size:9px}.scene-label{top:20px;left:21px}.viewer-controls{bottom:20px;left:20px;right:20px;gap:6px}.viewer-controls button{padding:9px 11px;font-size:10px}.orbit-hint{bottom:68px;left:21px;font-size:9px}.part-tag{padding:7px 9px;min-width:85px}.part-tag small{display:none}.part-connector path{stroke-width:.8}.embedded .structure-card{min-height:310px}.debug-controls input{width:160px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(max-width:760px){.viewer-controls{display:grid;grid-template-columns:auto 1fr;gap:7px}.camera-presets{order:-1;grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.camera-presets button{padding:7px 5px;min-height:32px}#interaction{justify-self:end;min-width:90px}.orbit-hint{bottom:113px}}

/* Responsive controls live below the canvas so translations never cover it. */
:root{font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",Arial,sans-serif}
header{height:auto;min-height:70px;gap:20px;padding-top:12px;padding-bottom:12px}
.brand{flex:none}
.header-note{max-width:48%;font-size:12px;line-height:1.6;text-align:right;overflow-wrap:anywhere}
.heading h1,.heading p,.structure-card h2,.structure-card p,.card-kicker,.part-selector label{overflow-wrap:anywhere;hyphens:auto}
.heading h1{line-height:1.3}
.heading h1 [data-i18n="heading"]{margin-left:0;color:inherit}
.heading p{font-size:14px}
.showcase{grid-template-columns:minmax(0,1fr) minmax(270px,300px);grid-template-areas:"stage card" "toolbar card";grid-template-rows:auto auto;align-items:stretch}
.stage{grid-area:stage;height:clamp(460px,58svh,560px)}
.embedded .stage{height:540px}
.structure-card{grid-area:card;padding:28px 24px;min-width:0}
.structure-card h2{font-size:24px;line-height:1.4;min-width:0}
.part-heading{gap:10px;margin-top:20px}
#clear-part{flex:none;width:44px;min-width:44px;min-height:44px;padding:6px;border:1px solid var(--line);border-radius:6px;font-size:24px}
#part-description{font-size:14px;line-height:1.85;margin-top:16px;color:#64665f}
.part-spec{padding-top:18px;margin-top:22px}
.part-spec>span{font-size:12px;line-height:1.6;letter-spacing:.03em;color:#876729}
.part-spec p{font-size:13px;line-height:1.8;color:#67675f}
.part-selector{padding-top:24px}
.part-selector label{font-size:12px;color:#746d5d}
.part-selector select{display:block;min-width:0;max-width:100%;min-height:46px;padding:10px 30px 10px 10px;border:1px solid #c9c4b8;border-radius:6px;background:#fff;font-size:14px;color:var(--ink)}
.part-selector>p{font-size:12px;line-height:1.7;color:#736f64}
.card-kicker{font-size:10px;line-height:1.6;letter-spacing:.06em}
#part-number{flex:none}
.viewer-toolbar{grid-area:toolbar;min-width:0;padding:16px 20px 14px;border-top:1px solid var(--line);background:#f4f3ef}
.viewer-toolbar .viewer-controls{position:static;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;gap:9px;min-width:0}
.viewer-controls button{white-space:normal;overflow-wrap:anywhere;hyphens:auto;line-height:1.5;min-width:0;min-height:44px;padding:10px 12px;font-size:12px}
.viewer-toolbar .camera-presets{order:0;grid-column:auto;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:3px}
.camera-presets button{font-size:12px;min-height:44px;padding:8px}
.viewer-toolbar #play{min-width:88px}
.viewer-toolbar #interaction{justify-self:stretch;min-width:0;max-width:160px}
.viewer-toolbar .orbit-hint{position:static;margin:10px 0 0;font-size:12px;line-height:1.7;color:#677078;overflow-wrap:anywhere}
.scene-label{max-width:calc(100% - 42px)}
.scene-label b,.scene-label span{line-height:1.6;overflow-wrap:anywhere}
.scene-label span{font-size:11px;color:#727b80}
.part-tag{width:126px;min-width:0;max-width:calc(100% - 24px);padding:9px 11px;overflow-wrap:anywhere;hyphens:auto}
.part-tag span{line-height:1.5}
.part-tag small{line-height:1.5;overflow-wrap:anywhere}
.debug-controls{flex-wrap:wrap}
.debug-controls label{min-width:0;max-width:100%;display:flex;flex-wrap:wrap;gap:8px}
.debug-controls input{max-width:100%}
footer{font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.poster-capture .viewer-toolbar{display:none}
.poster-capture .stage{height:100svh}
@media(max-width:1100px) and (min-width:901px){
 .showcase{grid-template-columns:minmax(0,1fr) 270px}
 .structure-card{padding:24px 20px}
 .viewer-toolbar .viewer-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .viewer-toolbar .camera-presets{order:-1;grid-column:1/-1}
 .viewer-toolbar #play,.viewer-toolbar #interaction{max-width:none;width:100%}
}
@media(max-width:900px){
 .showcase{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "toolbar" "card";grid-template-rows:auto auto auto}
 .stage,.embedded .stage{height:clamp(380px,68vw,500px)}
 .structure-card,.embedded .structure-card{min-height:0;border-left:0;border-top:1px solid var(--line);padding:24px}
 .structure-card h2{font-size:24px}
 .part-selector{padding-top:20px}
 .viewer-toolbar .viewer-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .viewer-toolbar .camera-presets{order:-1;grid-column:1/-1}
 .viewer-toolbar #play,.viewer-toolbar #interaction{max-width:none;width:100%}
 .viewer-toolbar{padding:14px 20px}
}
@media(max-width:480px){
 header{min-height:60px;padding:10px 16px;gap:14px}
 .brand{font-size:22px;letter-spacing:2px}
 .brand span{font-size:10px;margin-left:6px;letter-spacing:0}
 .header-note{font-size:11px}
 main{padding:24px 12px 18px}
 .heading h1{font-size:28px;line-height:1.3}
 .heading h1 span{margin-left:0}
 .stage,.embedded .stage{height:clamp(370px,105vw,440px)}
 .scene-label{left:18px;top:18px;gap:4px}
 .scene-label b{font-size:10px;letter-spacing:.08em}
 .viewer-toolbar{padding:12px}
 .viewer-toolbar .viewer-controls{gap:8px}
 .camera-presets button{font-size:12px;padding:9px 5px}
 .viewer-toolbar .orbit-hint{font-size:11px}
 .structure-card,.embedded .structure-card{padding:22px 18px}
 .structure-card h2{font-size:23px}
 #part-description{margin-top:12px}
 .part-spec{margin-top:18px;padding-top:16px}
 .part-tag{width:100px;padding:7px 8px}
}
@media(min-width:481px) and (max-width:759px){.part-tag{width:100px}}
@media(pointer:fine) and (max-width:1100px){.viewer-toolbar #play{grid-column:1/-1}}