*{box-sizing:border-box}body{margin:0;color:#292a28;background:#f5f5f2;font:14px/1.5 Arial,'Microsoft YaHei',sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:focus-visible,a:focus-visible{outline:2px solid #db513c;outline-offset:3px}button:disabled{opacity:.3;cursor:default}header{height:84px;background:white;border-bottom:1px solid #e6e6e2;display:flex;align-items:center;padding:0 36px;gap:70px}.brand{display:flex;align-items:center;gap:10px;font-size:29px;font-weight:900;letter-spacing:-1px;text-decoration:none;color:#20211f}.brand span{font-size:14px;font-weight:700;letter-spacing:1px;margin-top:7px}.brand i{width:9px;height:9px;border-radius:50%;background:#e9583e;margin:8px 0 0 4px}.head-title{font-size:14px}.head-title span{color:#b3b3aa;margin:0 20px}.head-title b{font-weight:400;color:#92938b;font-size:12px}.text-button{margin-left:auto;font-size:12px}.app{height:calc(100dvh - 84px);min-height:680px;display:grid;grid-template-columns:minmax(0,1fr) 382px}.stage{position:relative;overflow:hidden;background:#f2f2ef}.stage-top{position:absolute;z-index:1;top:34px;left:36px;right:30px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.stage-top button{pointer-events:auto}.eyebrow{font-size:10px;letter-spacing:1.7px;color:#919287}h1{font-size:25px;letter-spacing:1px;font-weight:400;margin:9px 0}.small-button{background:#ffffffb5;border:1px solid #dddeda;border-radius:3px;padding:8px 12px;font-size:12px}.view-label{position:absolute;left:36px;top:130px;display:flex;align-items:center;gap:8px;font-size:11px;color:#87897e;pointer-events:none}.live-dot{width:5px;height:5px;border-radius:50%;background:#7b8b52}.sep{margin:0 7px;color:#c0c2b9}#viewer{width:100%;height:100%;touch-action:none}canvas{display:block;width:100%;height:100%}#loading{position:absolute;left:35%;top:45%;color:#96968a}.view-tools{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);display:flex;gap:4px;align-items:center;background:#ffffffed;border:1px solid #deded7;box-shadow:0 5px 18px #00000004;border-radius:6px;padding:7px;white-space:nowrap}.view-tools button{min-width:36px;height:33px;font-size:16px;border-radius:3px}.view-tools button:nth-last-child(-n+2){font-size:12px;padding:0 9px}.view-tools button.active{background:#e9ece3;color:#4b6040}.view-tools span{height:18px;width:1px;background:#ddd;margin:0 6px}.stage-bottom{position:absolute;bottom:22px;left:36px;right:30px;display:flex;justify-content:space-between;color:#9b9d92;font-size:10px}.stage-bottom span:last-child{letter-spacing:1px}.stage-bottom i{margin:0 12px;font-style:normal}.measure{position:absolute;bottom:151px;left:50%;transform:translateX(-50%);font:11px Arial;letter-spacing:1px;color:#818677;background:#f2f2efdb;padding:4px 14px;border-bottom:1px solid #bac0ac;white-space:nowrap}.panel{background:white;border-left:1px solid #e1e2dc;display:flex;flex-direction:column;overflow:hidden}.panel-title{padding:27px 28px 18px}.panel-title h2{font-size:23px;font-weight:500;margin:7px 0}.panel-title p{font-size:12px;color:#95958a;margin:0}.tabs{display:flex;border-bottom:1px solid #e6e6df;padding:0 28px;gap:27px}.tabs button{font-size:12px;color:#999a90;padding:16px 0 12px;position:relative}.tabs button.active{color:#33372f}.tabs button.active:after{content:'';position:absolute;bottom:-1px;height:2px;left:0;right:0;background:#e75b42}.panel-content{padding:22px 28px;overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:#ddded5 white}h3{font-size:13px;font-weight:500;margin:0 0 14px}h3 span{float:right;color:#a0a095;font-size:11px}.label-row{display:flex;justify-content:space-between}.label-row>span{font-size:10px;color:#a0a095}.presets{display:grid;grid-template-columns:1fr 1fr;gap:9px}.preset{border:1px solid #e3e4dd;background:#fafaf8;border-radius:4px;text-align:left;padding:13px}.preset.active{border-color:#797f6a;background:#f2f4ed}.preset b{font-size:12px;font-weight:400;display:block;margin-top:13px}.preset small{font-size:10px;color:#929686;display:block;margin-top:3px}.mini{display:block;width:67px;height:37px;border:1px solid #777e68;background:repeating-linear-gradient(90deg,transparent 0,transparent 21px,#8c947d 21px,#8c947d 22px),linear-gradient(0deg,transparent 48%,#8c947d 48%,#8c947d 51%,transparent 51%),#b6bea2;box-shadow:3px -3px 0 #dde1d2;transform:skewY(-3deg);margin:4px auto 0}.p1{width:27px;background:linear-gradient(0deg,transparent 48%,#8c947d 48%,#8c947d 51%,transparent 51%),#b6bea2}.p2{height:20px;margin-top:21px;width:88px}.p3{height:41px;width:45px;margin-top:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 9px,#8c947d 9px,#8c947d 10px),linear-gradient(90deg,transparent 48%,#8c947d 48%,#8c947d 51%,transparent 51%),#e1e5d7}.section-line{height:1px;background:#edede7;margin:22px 0}.step-row{display:flex;justify-content:space-between;align-items:center;margin:19px 0;font-size:12px}.step-row small{display:block;font-size:10px;color:#a0a094;margin-top:3px}.stepper{display:flex;border:1px solid #dddeda;border-radius:3px;align-items:center}.stepper button{width:30px;height:32px}.stepper b{width:25px;text-align:center;font-size:12px;font-weight:400}.select-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:14px 0;color:#777b6c}.select-row select{width:145px;padding:8px 10px;border:1px solid #dedfd7;background:#fff;border-radius:3px;color:#45483d;font-size:12px}.summary{border-top:1px solid #e7e8e0;padding:18px 28px 15px;background:white}.size-summary{display:flex;justify-content:space-between;font-size:10px;color:#9a9c91}.size-summary b{font-size:11px;color:#555b4a;font-weight:400}.summary-line{display:flex;justify-content:space-between;align-items:center;margin:15px 0 10px}.summary-line .eyebrow{font-size:9px;letter-spacing:0}.summary-line strong{display:block;font-size:24px;font-weight:400;line-height:1.2;margin-top:4px}.summary-line strong small{font-size:11px;color:#8c9082}.primary{background:#e9593e;color:white;padding:14px 20px;border-radius:3px;font-size:13px;min-width:155px;text-align:left}.primary span{float:right;margin-left:25px}.summary-foot{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#a6a89d}.summary-foot button{font-size:10px;padding:0;text-decoration:underline}.hint{font-size:12px;color:#969b8b;line-height:1.9}.colors{display:grid;grid-template-columns:repeat(4,1fr);gap:17px 9px;margin:24px 0}.color{font-size:10px;padding:0;color:#878e7a}.color i{display:block;width:42px;height:42px;border-radius:50%;margin:0 auto 8px;border:1px solid #00000010;position:relative}.color.active i:after{content:'';position:absolute;inset:-5px;border:1px solid #333b2b;border-radius:50%}.check-row{font-size:12px;display:flex;align-items:center;gap:7px;color:#6c735e;margin:19px 0}input[type=checkbox]{accent-color:#687850}.choices{display:flex;gap:10px}.choices button{border:1px solid #dedfd5;border-radius:3px;padding:11px 20px;font-size:12px}.choices button.active{border-color:#7b8668;background:#f2f5ec}.cell-map{display:grid;gap:5px;margin:18px 0 8px}.cell-map button{min-height:37px;background:#eef0e8;border:1px solid #dadfce;font-size:10px;color:#7b846b}.cell-map button.active{border-color:#e35b42;background:#fbf0e9;color:#c04d37}.link{font-size:11px;color:#697755;text-decoration:underline;padding:0}.function-options{display:grid;gap:9px;margin:23px 0}.function-options button{border:1px solid #e1e4d8;text-align:left;padding:13px;border-radius:4px}.function-options button.active{border-color:#8b947c;background:#f5f7f0}.function-options b{font-size:12px;font-weight:400}.function-options span{display:block;font-size:10px;color:#979e8c;margin-top:5px}dialog{border:0;border-radius:8px;padding:35px;width:min(500px,90vw);max-height:85vh;color:#383e2f}dialog::backdrop{background:#24301970;backdrop-filter:blur(3px)}dialog h2{font-weight:400}dialog p,dialog li{font-size:14px;line-height:1.9;color:#7b836d}#close{position:absolute;right:10px;top:4px;font-size:27px}.modal-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:23px}.modal-buttons button{padding:12px 16px;background:#f0f2eb;border-radius:3px}.modal-buttons .primary{background:#e9593e}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#333c2c;color:white;padding:12px 20px;font-size:13px;border-radius:4px;opacity:0;pointer-events:none;z-index:9;transition:opacity .2s}@media(min-width:1500px){.app{grid-template-columns:1fr 410px}.panel-content{padding:26px 32px}.preset{padding:17px}}@media(max-width:1050px){header{gap:35px;padding:0 25px}.head-title b{display:none}.app{grid-template-columns:minmax(0,1fr) 335px}.stage-top{left:24px}.stage-top h1{font-size:20px}.stage-top .small-button{font-size:10px}.panel-title,.summary{padding-left:22px;padding-right:22px}.panel-content{padding:20px 22px}.stage-bottom span:last-child{display:none}.view-label{left:24px}.primary{min-width:140px}}@media(max-width:700px){header{height:66px;padding:0 18px;gap:20px}.brand{font-size:25px}.brand span{font-size:11px}.brand i{width:6px;height:6px}.head-title{font-size:11px}.head-title span{display:none}.text-button{font-size:10px}.app{height:auto;min-height:0;display:flex;flex-direction:column}.stage{height:52dvh;min-height:355px}.stage-top{top:19px;left:20px;right:18px}.eyebrow{font-size:8px}.stage-top h1{font-size:19px;margin-top:5px}.small-button{padding:6px 8px}.view-label{top:88px;left:20px;font-size:9px}.view-tools{bottom:27px;padding:4px}.view-tools button{height:28px;min-width:32px}.stage-bottom{bottom:7px;left:20px;font-size:8px}.measure{bottom:76px;font-size:9px}.panel{border-left:0;border-top:1px solid #ddd}.panel-title{padding:20px 22px 5px}.panel-title h2{font-size:20px}.panel-title p{display:none}.panel-title .eyebrow{display:none}.tabs{padding:0 22px;gap:35px}.panel-content{max-height:420px;padding:20px 22px}.presets{grid-template-columns:repeat(4,1fr);gap:7px}.preset{padding:10px 5px}.preset b{font-size:10px}.preset small{font-size:9px}.mini{transform:scale(.7);transform-origin:center;height:37px;margin-left:auto;margin-right:auto}.p2{width:68px;height:20px}.p3{height:41px}.summary{position:sticky;bottom:0;z-index:2;box-shadow:0 -5px 18px #00000003;padding:12px 22px}.summary-line{margin:10px 0}.summary-line strong{font-size:21px}.summary-line .eyebrow{display:none}.summary-foot{font-size:9px}.summary-line .primary{padding:11px 18px}.colors{grid-template-columns:repeat(6,1fr)}.color i{width:36px;height:36px}.function-options{grid-template-columns:repeat(3,1fr)}.function-options span{line-height:1.8}.section-line{margin:18px 0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Readable controls at desktop and touch sizes. */
body{font-size:16px}.head-title,.text-button,.small-button{font-size:14px}.eyebrow{font-size:12px}.view-label,.stage-bottom,.measure{font-size:12px}.tabs button,h3,.step-row,.select-row,.select-row select,.preset b,.function-options b,.check-row,.choices button,.primary{font-size:14px}.preset small,.label-row>span,.step-row small,.hint,.color,.link,.function-options span,.size-summary,.size-summary b,.summary-foot,.summary-foot button,.cell-map button{font-size:12px}.stepper b{font-size:14px}.summary-line .eyebrow{font-size:12px}.summary-line strong small{font-size:12px}.summary-foot{gap:12px}.summary-foot span{text-align:right}.stage-bottom{gap:20px}.head-title b{font-size:12px}@media(max-width:700px){.head-title{font-size:12px}.text-button{font-size:12px}.stage-top .eyebrow{font-size:10px}.stage-top .small-button{font-size:12px}.view-label,.measure{font-size:11px}.stage-bottom{font-size:10px}.presets{grid-template-columns:repeat(2,1fr)}.preset b{font-size:14px}.preset small{font-size:12px}.mini{transform:none}.summary-foot,.summary-foot button{font-size:11px}.summary-line .primary{font-size:14px}.colors{grid-template-columns:repeat(4,1fr)}.function-options{grid-template-columns:1fr}.stage-top h1{font-size:18px}.brand{gap:6px}.brand span{font-size:10px}header{gap:14px}.primary{min-width:150px}}
/* Reference-aligned configurator workspace. */
body{background:white;color:#111}header{height:80px;padding:0 22px;gap:45px}.brand i{background:#111}.head-title{color:#777}.topbar{height:51px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #bbb;margin:0 16px;font-size:13px}.topbar>span{color:#777}.topbar>div{display:flex;gap:10px}.topbar button{border:1px solid #aaa;border-radius:20px;padding:6px 15px;font-size:12px}.topbar>b{font-weight:500}.app{height:calc(100dvh - 131px);grid-template-columns:300px minmax(0,1fr);min-height:640px}.panel{grid-column:1;grid-row:1;border:0}.stage{grid-column:2;grid-row:1;background:white}.panel-title{display:none}.tabs{padding:0 16px;gap:0;justify-content:space-between}.tabs button{flex:1;padding:13px 0;color:#111}.tabs button[data-tab="function"]{order:2}.tabs button[data-tab="color"]{order:3}.tabs button.active:after{background:#111;height:3px}.panel-content{padding:14px 17px}.panel-content [data-page="structure"]{display:flex;flex-direction:column}.panel-content [data-page="structure"][hidden]{display:none}[data-page="structure"]>.label-row,[data-page="structure"]>.presets{display:none}[data-page="structure"]>.section-line:first-of-type{display:none}#size-options{order:-2}.select-row{display:none}[data-page="structure"]>h3:has(span){display:none}.size-group{margin:0 0 20px}.size-group h3{font-size:14px;margin-bottom:6px}.size-group>div{display:flex;gap:4px}.size-group button{flex:1;min-width:0;border:1px solid #333;padding:7px 2px;font-size:12px}.size-group button.active{color:white;background:#111}.section-line{margin:14px 0;background:#eee}.step-row{margin:12px 0}.step-row small{display:none}.stepper{border-color:#bbb}.stage-top{top:8px;left:12px;right:16px}.stage-top>div{display:none}.stage-top .small-button{background:white;font-size:12px;border-radius:0;border:0}.view-label{top:17px;left:auto;right:20px}.stage-bottom{bottom:15px;left:22px;color:#777}.stage-bottom span:last-child{display:none}.view-tools{bottom:auto;top:45px;left:auto;right:16px;transform:none;box-shadow:none;background:white;border-radius:0;border:0;gap:3px}.view-tools button.active{background:#111;color:white}.measure{bottom:95px;background:#ffffffda;color:#333;border-color:#777}.summary{padding:16px 17px;border-top:0}.summary-line{display:flex;flex-direction:column-reverse;gap:12px;align-items:stretch}.summary-line>div{display:flex;align-items:center;justify-content:space-between}.summary-line strong{font-size:19px}.primary{background:#111;color:white;border-radius:25px;text-align:center}.primary span{float:none;margin-left:12px}.summary-foot{font-size:11px}.summary-foot span{font-size:10px}.summary-foot button{font-size:11px}.size-summary{display:block}.size-summary b{display:block;margin-top:6px}.colors{grid-template-columns:repeat(4,1fr)}.color.active i:after{border-color:#111}.function-options button.active,.choices button.active{border-color:#111;background:#f2f2f2}.cell-map button.active{border-color:#111;background:#efee9e;color:#111}.grow{position:absolute;width:34px;height:34px;border-radius:50%;border:1px solid #a0a5a9;background:#ffffffcf;color:#636a70;font-size:23px;line-height:1;z-index:1}.grow.up{top:28%;left:50%}.grow.left{left:13%;top:54%}.grow.right{right:13%;top:54%}.grow:hover{background:#111;color:white}.grow:disabled{visibility:hidden}.live-dot{background:#666}.modal-buttons .primary{background:#111}.choices button{font-size:13px}.step-row{font-size:14px}.hint{color:#777}.cell-map button{color:#555}.view-tools button{border:1px solid #ccc;border-radius:50%;height:34px;min-width:34px}.view-tools button:nth-last-child(-n+2){border-radius:18px}.view-tools span{display:none}@media(max-width:1050px){.app{grid-template-columns:280px minmax(0,1fr)}.view-label{display:none}}@media(max-width:700px){header{height:64px;padding:0 16px;gap:14px}.topbar{height:44px;font-size:11px;margin:0 12px}.topbar>span{display:none}.topbar button{font-size:11px;padding:5px 10px}.app{height:auto;display:flex;flex-direction:column;min-height:0}.stage{height:48dvh;min-height:330px;order:0}.panel{order:1;border-top:1px solid #aaa}.stage-top{top:6px;left:5px}.view-tools{top:6px;right:7px;gap:3px}.view-tools button{height:29px;min-width:29px;font-size:14px}.view-tools button:nth-last-child(-n+2){font-size:11px;padding:0 6px}.grow.up{top:22%}.grow.left{left:5%}.grow.right{right:5%}.measure{bottom:37px;font-size:10px}.stage-bottom{bottom:10px;left:16px;font-size:10px}.tabs{padding:0 16px}.panel-content{max-height:390px;padding:18px 20px}.size-group{margin-bottom:17px}.size-group button{padding:9px 2px;font-size:13px}.summary{padding:14px 20px;border-top:1px solid #ddd;position:static}.size-summary{display:flex;justify-content:space-between}.size-summary b{margin:0}.summary-line{flex-direction:row;align-items:center}.summary-line>div{gap:15px}.summary-line .eyebrow{display:none}.summary-line strong{font-size:20px}.summary-line .primary{padding:11px 20px}.summary-foot span{font-size:10px}.colors{grid-template-columns:repeat(6,1fr)}.choices button{font-size:14px}.function-options{grid-template-columns:repeat(3,1fr)}.head-title{font-size:11px}.brand span{font-size:10px}}

.door-motion-choices{display:flex;gap:6px}.door-motion-choices button{flex:1;padding:10px 8px}#door-motion-panel[hidden]{display:none}

#axis-sizes{margin-top:22px}.axis-size-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;margin:10px 0}.axis-size-row select{font-size:14px;width:125px;padding:8px;border:1px solid #aaa;background:white;color:#222}.axis-heading{margin-top:22px}#axis-sizes h3 span{font-size:11px;float:none;display:block;margin-top:4px}