*{box-sizing:border-box}body{margin:0;background:#f6f5f1;color:#18232d;font-family:Rubik,"Segoe UI","Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #d9dddc;background:#fff;border-radius:10px;padding:10px 14px;color:#263540;font-size:13px;font-weight:600;transition:background .15s}button:hover{background:#eef1f1}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #22478b;outline-offset:3px}header{height:76px;background:#172733;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 34px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-size:18px;letter-spacing:2px;font-weight:750}.brand-mark{color:#f4c944;font-size:36px;line-height:1}.brand-sub{font-size:12px;color:#b2bec5;border-left:1px solid #4a5760;margin-left:8px;padding-left:20px;letter-spacing:1px;font-weight:400}.local-badge{font-size:12px;color:#c5d1d7;display:flex;gap:8px;align-items:center}.local-badge i{height:6px;width:6px;border-radius:50%;background:#f4c944}main{height:calc(100dvh - 76px);min-height:620px;display:grid;grid-template-columns:minmax(0,1fr) 354px;gap:0}.workspace{min-width:0;position:relative;display:flex;flex-direction:column;background:radial-gradient(ellipse at 45% 40%,#fff 0,#f1f2ed 85%);overflow:hidden}.viewer-title{display:flex;align-items:center;justify-content:space-between;padding:31px 34px 0;z-index:1}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#7d8a91}h1{font-size:32px;letter-spacing:2px;margin:9px 0 0;font-weight:650}h1 span{font-weight:400;font-size:15px;color:#8b959a;margin-left:12px;letter-spacing:.5px}#viewport{flex:1;min-height:0;position:relative;touch-action:none}canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:0;display:grid;place-items:center;color:#65757c;font-size:14px}#loading.error{padding:36px;color:#a72b21}.viewport-footer{display:flex;justify-content:space-between;gap:10px;padding:20px 34px 28px;color:#829097;font-size:11px}.viewport-footer>span:first-child{display:flex;align-items:center;gap:7px;color:#50636d}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#22478b}aside{border-left:1px solid #e1e5e3;background:#fff;padding:29px 26px 22px;overflow:auto}.panel-top h2{font-size:20px;font-weight:650;margin:12px 0 9px;letter-spacing:.3px}.panel-top p{font-size:12px;line-height:1.7;color:#7d898f;margin:0}.stats{display:flex;justify-content:space-between;padding:24px 0;border-bottom:1px solid #ebedeb;margin-bottom:25px}.stats div{display:flex;flex-direction:column;gap:5px;min-width:70px}.stats strong{font-size:27px;font-weight:600;font-variant-numeric:tabular-nums}.stats span{color:#8c969b;font-size:11px}.step-heading{display:flex;justify-content:space-between;align-items:center}.step-heading h3{font-size:20px;margin:8px 0 19px;font-weight:600}#step-fraction{background:#f2f4f3;color:#62737c;font-size:11px;border-radius:6px;padding:6px 9px;font-variant-numeric:tabular-nums}#timeline{width:100%;accent-color:#22478b;cursor:pointer;margin:0;height:20px}.range-labels{display:flex;justify-content:space-between;color:#99a1a4;font-size:10px;margin-top:3px;letter-spacing:1px}.transport{display:flex;gap:8px;margin-top:21px}.transport>button:first-child,.transport>button:last-child{width:43px;font-size:19px;padding:8px}.primary{background:#f4c944;border-color:#f4c944;flex:1}.primary:hover{background:#f5d364}.options{display:flex;justify-content:space-between;gap:5px;font-size:11px;align-items:center;color:#78868c;margin:18px 0}.options label{display:flex;align-items:center;gap:5px}.options select{border:0;background:#f3f5f4;border-radius:4px;padding:4px;color:#4a606c;font-size:11px}.options input{accent-color:#22478b}.overview{width:100%;font-size:12px;font-weight:400;color:#526873;padding:9px}.parts-panel{margin-top:26px;border-top:1px solid #ebedeb;padding-top:20px}.parts-title{display:flex;align-items:center;justify-content:space-between}.parts-title h3{font-size:13px;margin:0;font-weight:650}.parts-title>span{font-size:11px;color:#8a979d}#part-summary{font-size:11px;color:#8b959b;line-height:1.7;margin:9px 0 12px}#parts-list{display:grid;gap:8px;max-height:230px;overflow:auto}.part{display:flex;gap:10px;align-items:center;padding:8px 9px;background:#f6f7f5;border-radius:7px}.swatch{flex:0 0 25px;height:25px;border:1px solid #0002;border-radius:5px;box-shadow:inset 0 3px 0 #fff3}.part-detail{min-width:0;flex:1}.part-detail strong{display:block;font-size:11px;font-weight:550}.part-detail small{display:block;font-size:9px;color:#8a959a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:196px;margin-top:3px}.part b{font-size:12px;color:#5d727e;font-weight:500}.overview-card{padding:16px;border:1px dashed #dce3df;border-radius:8px;color:#78888e;font-size:12px;line-height:1.9}.source-note{margin-top:22px;display:flex;flex-direction:column;gap:6px;font-size:10px;color:#8d989d}.source-note small{font-size:10px;line-height:1.6;color:#a0a8ab}#integrity{color:#527564}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:850px){header{height:62px;padding:0 19px}.brand-sub{display:none}main{height:auto;min-height:0;grid-template-columns:1fr}.workspace{height:62dvh;min-height:400px}.viewer-title{padding:22px 20px 0}.viewer-title h1{font-size:26px}.viewport-footer{padding:14px 20px;font-size:10px}.viewport-footer>span:last-child{max-width:150px;text-align:right}aside{border-left:0;border-top:1px solid #e1e5e3;padding:25px}.stats{padding:17px 0;margin-bottom:20px}.panel-top{display:none}#parts-list{max-height:none}.source-note{padding-bottom:10px}}
.viewer-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}.viewer-actions button{padding:9px 13px;white-space:nowrap}

.brand-group{display:flex;align-items:center;gap:16px;min-width:0}.brand-logo{height:32px;width:auto;display:block;border-radius:4px}.brand-name{font-size:19px;letter-spacing:1.5px;font-weight:750}.brand-site{font-size:12px;color:#b2bec5;text-decoration:none;border-left:1px solid #4a5760;padding-left:16px;letter-spacing:.4px;white-space:nowrap}.brand-site:hover{color:#f4c944}
.build-layout.collapsed{grid-template-columns:minmax(0,1fr)}.build-layout.collapsed>aside{display:none}
.viewer-toolbar{position:absolute;top:10px;left:10px;right:10px;z-index:4;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:#ffffffee;border:1px solid #e2e6e3;box-shadow:0 6px 18px #17273314;backdrop-filter:blur(6px)}.viewer-toolbar button{flex:0 0 auto;width:32px;height:32px;padding:0;font-size:15px;line-height:1;border-radius:8px}.toolbar-steps{display:flex;align-items:center;gap:6px;flex:0 1 380px;min-width:190px}.toolbar-steps #step-slider{flex:1 1 auto;min-width:80px;height:20px;margin:0;accent-color:#22478b;cursor:pointer}.toolbar-step{font-size:12px;font-weight:650;color:#263540;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}.toolbar-count{font-size:10px;color:#8b959b;white-space:nowrap}.toolbar-actions{display:flex;gap:4px;margin-left:auto}.viewport-footer{padding-top:8px;padding-bottom:8px}
@media(max-width:1100px){.toolbar-step{max-width:110px}}
@media(max-width:850px){.brand-site{display:none}.toolbar-count{display:none}.viewer-toolbar button{width:36px;height:36px}.toolbar-steps #step-slider{height:24px}}
@media(max-width:560px){.toolbar-step{display:none}.viewport-footer span:last-child{display:none}.viewer-toolbar{left:6px;right:6px;top:6px;padding:5px 6px;gap:6px}}
@media(max-width:850px){.workspace{height:min(70dvh,640px);min-height:420px}}
@media(max-width:850px){body .guide-bar{flex-wrap:nowrap;gap:8px;padding:6px 12px;min-height:32px}body .guide-bar>a{flex:0 0 auto;font-size:10px}body .guide-bar #guide-identity{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}body .guide-bar #guide-kind{flex:0 0 auto;margin-left:0;font-size:9px;padding:3px 7px}}
@media(max-width:560px){.workspace{height:min(78dvh,700px);min-height:420px}}
@media(max-width:850px){body:has(.build-layout) .code-form{display:none}}
@media(max-width:850px){body:has(.build-layout)>header{height:62px;min-height:0;padding:0 16px;flex-wrap:nowrap;align-content:center;gap:10px}}

.unlock{max-width:520px;margin:8vh auto;padding:32px;background:#fff;border:1px solid #e1e5e0;border-radius:16px;box-shadow:0 10px 30px #17273312}.unlock h1{font-size:24px;margin:10px 0 6px;line-height:1.35}.unlock-meta{font-size:12px;color:#8b959b;margin:0 0 22px}.unlock-form{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}.unlock-form label{font-size:12px;color:#5d6b74}.unlock-form input{font-size:14px;padding:11px 12px;border:1px solid #d9dddc;border-radius:8px}.unlock-form button{background:#f4c944;border-color:#f4c944;padding:11px 14px}.unlock-status{font-size:12px;color:#a2692c;min-height:18px;margin:0}.card-lock{margin-left:6px;font-size:12px}

/* Brand overlay. Both viewers clear the canvas to transparent, so the watermark layer sits
   behind the model itself; nothing here accepts pointer events, and ?brand=off removes it. */
:root{--brand-watermark-opacity:.1;--brand-badge-opacity:.62}
#viewport>canvas{position:relative;z-index:1}
#loading{z-index:2}
.brand-watermark{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:var(--brand-watermark-opacity);pointer-events:none;user-select:none;transition:opacity .5s ease}
.brand-watermark img{display:block;width:clamp(150px,26%,300px);height:auto;filter:saturate(.9)}
.brand-watermark span{font-size:clamp(9px,.85vw,12px);font-weight:600;letter-spacing:.34em;color:#22478b;text-transform:lowercase}
.brand-badge{position:absolute;left:14px;bottom:12px;z-index:3;display:flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;border-radius:9px;background:#fffffff2;border:1px solid #e2e6e3;box-shadow:0 2px 10px #17273314;backdrop-filter:blur(6px);opacity:var(--brand-badge-opacity);pointer-events:none;user-select:none;transition:opacity .35s ease}
.brand-badge img{display:block;width:44px;height:22px;border-radius:3px}
.brand-badge span{font-size:10px;font-weight:600;letter-spacing:.14em;color:#4f636e}
#viewport.is-interacting .brand-watermark{opacity:0}
#viewport.is-interacting .brand-badge{opacity:.28}
@media(max-width:850px){.brand-badge{left:10px;bottom:9px;padding:4px 9px 4px 5px;gap:7px}.brand-badge img{width:38px;height:19px}}
@media(max-width:560px){.brand-badge{left:8px;bottom:8px;gap:6px;padding:4px 8px 4px 5px}.brand-badge img{width:34px;height:17px}.brand-badge span{font-size:9px;letter-spacing:.1em}.brand-watermark span{display:none}}
@media(prefers-reduced-motion:reduce){.brand-watermark,.brand-badge{transition:none}}