:root{--ink:#202524;--muted:#68716e;--line:#e2e7e5;--surface:#fff;--bg:#f7f9f8;--accent:#286d68;--accent-soft:#eef7f5;--red:#b42336;--radius:18px;--shadow:0 1px 3px #17302a07,0 5px 18px #17302a03}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,select,summary{cursor:pointer}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:12px;min-height:38px;padding:8px 13px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:550;text-decoration:none;box-shadow:0 1px 2px #172c2608;transition:background .15s,border-color .15s,box-shadow .15s}button:hover,.button:hover{background:#f3f6f5;border-color:#c4ceca}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,.button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #75c5c180;outline-offset:2px}.primary{background:var(--ink);border-color:var(--ink);color:#fff}.primary:hover{background:#34413c}.quiet{background:transparent;box-shadow:none;border-color:transparent}.outline{background:#fff}header{height:99px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4%;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:27px;text-decoration:none;color:var(--ink)}.brand img{display:block;width:99px;height:60px;object-fit:contain}.brand>span{font-weight:650;font-size:17px;letter-spacing:-.3px;line-height:1.4;border-left:1px solid var(--line);padding-left:25px}.brand small{display:block;font-weight:400;font-size:12px;color:var(--muted);letter-spacing:0;margin-top:3px}.header-actions{display:flex;align-items:center;gap:10px}main{max-width:1680px;margin:auto;padding:30px 4% 0}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.eyebrow{font-size:12px;letter-spacing:1.2px;font-weight:600;color:var(--muted);margin:0 0 7px}h1{font-size:30px;letter-spacing:-1px;line-height:1.2;font-weight:650;margin:0}.status-badge{display:inline-flex;align-items:center;border:1px solid #cce1d9;border-radius:10px;background:#edf6f2;color:#316650;padding:5px 9px;font-size:12px;white-space:nowrap}.status-badge.is-error{border-color:#efc7cd;background:#fff0f2;color:var(--red)}.workspace{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(390px,1fr);gap:26px;align-items:start}.visual-column{position:sticky;top:24px;min-width:0;border:1px solid var(--line);background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.stage{height:clamp(450px,65vh,690px);position:relative;background:#f4f6f5;overflow:hidden}#viewer{position:absolute;inset:0}canvas{display:block;touch-action:none}.stage-top{position:absolute;top:22px;left:23px;right:23px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}.stage-top strong{display:block;font-size:16px;font-weight:600}.stage-top span:not(.pill){font-size:13px;color:var(--muted);display:block;margin-top:4px}.pill{height:26px;background:#ffffffc9;border:1px solid #dce3df;border-radius:10px;font-size:12px;white-space:nowrap;padding:3px 8px;color:var(--muted)}.measure-height{position:absolute;left:18px;top:46%;writing-mode:vertical-rl;transform:rotate(180deg);border-left:1px solid #bfcac5;padding-left:8px;font:12px ui-monospace,monospace;color:var(--muted)}.measure-width{position:absolute;left:50%;bottom:81px;transform:translateX(-50%);border-top:1px solid #bfcac5;padding:8px 30px 0;font:12px ui-monospace,monospace;color:var(--muted);white-space:nowrap}.view-tools{position:absolute;bottom:20px;left:15px;right:15px;display:flex;gap:0;justify-content:center}.view-tools button{font-size:13px;background:#fffffff0;backdrop-filter:blur(12px);border-radius:0;border-right:0;min-height:38px;padding:8px 12px}.view-tools button:first-child{border-radius:12px 0 0 12px}.view-tools button:last-child{border-radius:0 12px 12px 0;border:1px solid var(--ink);background:var(--ink);color:white}.view-tools button[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--accent)}.stage-warning{position:absolute;top:90px;left:20px;right:20px;padding:13px;font-size:14px;background:#fff1f3;border:1px solid #efc7cd;border-radius:12px;color:var(--red)}.viewer-caption{display:flex;justify-content:space-between;gap:10px;padding:13px 18px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}.live-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 18px;padding:17px 0;border-top:1px solid var(--line)}.live-specs>div+div{border-left:1px solid var(--line);padding-left:14px}.live-specs span{display:block;font-size:12px;color:var(--muted)}.live-specs strong{display:block;font-size:15px;font-weight:600;margin-top:5px;letter-spacing:-.3px}.configuration{min-width:0}.control-section{padding:23px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px}.control-section:last-child{margin-bottom:0}.control-section>h2{font-size:18px;letter-spacing:-.35px;font-weight:650;line-height:1.4;margin:0 0 6px}.intro{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 18px}.composition-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.composition-card{position:relative;display:block;text-align:left;min-height:123px;padding:13px 9px;border-radius:13px;box-shadow:none;border-color:#dce3df;transition:background .15s,border-color .15s}.composition-card[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}.composition-card[aria-pressed=true]:after{content:'✓';position:absolute;top:7px;right:7px;border-radius:50%;width:16px;height:16px;display:grid;place-content:center;background:var(--accent);color:white;font-size:11px}.composition-card svg{display:block;width:100%;height:43px;margin:0 0 10px}.composition-card strong{font-size:14px;line-height:1.3;display:block;font-weight:550}.composition-card small{display:block;font-size:12px;line-height:1.35;margin-top:6px;color:var(--muted);font-weight:400}.composition-card:disabled{opacity:1;color:#7d8581;background:#fafbfa;border-color:#edf0ee}.composition-card:disabled svg{opacity:.4}.composition-card:disabled small{color:#858e88}.composition-card.incompatible[aria-pressed=true]{background:#fff2f4;border-color:var(--red);box-shadow:0 0 0 1px var(--red)}.composition-card.incompatible[aria-pressed=true]:after{background:var(--red);content:'!'}.composition-card.incompatible[aria-pressed=true] small{color:var(--red)}.legend{display:flex;gap:20px;font-size:12px;color:var(--muted);margin:14px 0}.help{font-size:13px;color:var(--muted);line-height:1.6;margin:8px 0}.field-error{font-size:14px;color:var(--red);line-height:1.5;margin:8px 0}.field-error:empty{display:none}.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}label,legend{display:block;font-size:14px;font-weight:550;margin:15px 0 7px}input:not([type=color]),select{width:100%;min-width:0;height:42px;border:1px solid #d8dfdb;background:white;border-radius:11px;color:var(--ink);padding:8px 11px;font-size:14px;box-shadow:0 1px 2px #142a2006}select{padding-right:25px}input:hover,select:hover{border-color:#b8c5bf}input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--red);background:#fffafb;box-shadow:0 0 0 1px #b4233620}.notice{padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#f8faf9;font-size:14px;line-height:1.6;color:#5c6861;margin:16px 0}.notice.danger{background:#fff5f6;border-color:#eac5cd;color:var(--red)}.configuration>.danger{margin-top:0}.derived{padding:13px 15px;background:#f6f9f7;border:1px solid #e4ece7;border-radius:12px;font-size:14px;margin-top:19px}.derived p{margin:3px 0;font-variant-numeric:tabular-nums}.supply-inline{padding:17px 21px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--radius);background:#f0f4f2}.supply-inline h3{font-size:14px;margin:0 0 6px;font-weight:600}.supply-inline p{font-size:13px;color:var(--muted);margin:5px 0;line-height:1.6}.supply-inline strong{display:block;color:var(--ink);font-weight:550;margin-bottom:3px}.unboxed{padding:0;margin:17px 0;border:0}.unboxed legend{margin-top:0;margin-bottom:11px}.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.swatches button{display:block;border-radius:12px;padding:10px 3px;font-size:12px;line-height:1.4;box-shadow:none;border:1px solid var(--line)}.swatches button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-soft)}.swatches i{display:block;width:27px;height:27px;border:1px solid #0002;border-radius:50%;box-shadow:inset 0 2px 3px #fff5;margin:0 auto 8px}.swatches span{display:block}.detail-heading{padding-top:18px;margin-top:22px;border-top:1px solid var(--line)}h3{font-size:16px;font-weight:600;margin:20px 0 12px}.summary-section{border:1px solid var(--line);background:white;border-radius:var(--radius);padding:27px;margin-top:27px;box-shadow:var(--shadow)}.summary-section>h2{font-size:24px;font-weight:650;letter-spacing:-.7px;margin:0 0 8px}.summary-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:24px}.result-card{min-width:0;border:1px solid var(--line);border-radius:13px;padding:19px}.result-card>h3{margin:0 0 14px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}th{font-size:12px;font-weight:550;text-align:left;color:var(--muted);background:#f7f9f8}th,td{border-bottom:1px solid var(--line);padding:11px 10px;vertical-align:top}td:not(:first-child),th:not(:first-child){text-align:right;white-space:nowrap}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fafcfb}.technical-details{border:1px solid var(--line);border-radius:13px;padding:0 18px;font-size:14px;margin-top:16px;overflow:hidden}.technical-details summary{font-size:14px;font-weight:550;padding:17px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:15px}.technical-details summary::-webkit-details-marker{display:none}.technical-details summary:after{content:'+';font-weight:400;color:var(--muted);font-size:20px}.technical-details[open] summary:after{content:'−'}.technical-details[open]{padding-bottom:16px}.technical-details p{font-size:13px;line-height:1.7;color:var(--muted)}.prices-note{padding:17px 20px;border:1px solid var(--line);border-radius:13px;background:#f8faf9;margin-top:20px;font-size:14px}.prices-note span{display:block;font-size:12px;color:var(--muted);margin-top:5px}footer{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:12px;padding:23px 2px 30px}dialog{border:1px solid var(--line);border-radius:17px;padding:25px;width:570px;max-width:calc(100vw - 28px);max-height:90vh;color:var(--ink);box-shadow:0 18px 70px #102a2330}dialog::backdrop{background:#17251f66;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:18px}.dialog-head h2{font-size:21px;letter-spacing:-.4px;margin:0}.dialog-head button{border:0;box-shadow:none;font-size:24px;padding:0;min-width:32px}.dialog-head+p{font-size:14px;color:var(--muted)}input[type=color]{width:100%;height:36px;display:block;margin-bottom:22px;border:1px solid var(--line);border-radius:10px}#saved{font-size:14px;color:var(--muted)}#error{position:absolute;left:12%;right:12%;top:40%;padding:18px;background:white;border:1px solid var(--line);border-radius:12px;font-size:14px}[hidden]{display:none!important}@media(max-width:1200px){main{padding-left:3%;padding-right:3%}.workspace{grid-template-columns:minmax(0,1fr) minmax(370px,1fr);gap:20px}.control-section{padding:19px}.composition-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.live-specs{gap:8px;margin:0 13px}.live-specs>div+div{padding-left:8px}.live-specs strong{font-size:13px}.viewer-caption{padding:12px 14px;flex-wrap:wrap}.stage{height:510px}}@media(max-width:800px){header{height:86px;padding:0 5%}.brand{gap:16px}.brand img{width:82px;height:50px}.brand>span{padding-left:16px;font-size:15px}.brand small{display:none}.header-actions{gap:4px}.header-actions .button{display:none}main{padding:23px 4% 0}.page-heading{gap:12px}.page-heading h1{font-size:25px}.status-badge{font-size:11px;white-space:normal;max-width:120px;text-align:center}.workspace{display:flex;flex-direction:column;gap:18px}.visual-column{position:relative;top:0;width:100%}.stage{height:360px}.configuration{width:100%}.control-section{padding:20px}.composition-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.summary-grid{grid-template-columns:1fr;gap:15px}.summary-section{padding:20px}.live-specs strong{font-size:15px}.summary-section>h2{font-size:23px}.stage-top{top:18px;left:18px;right:18px}.stage-top strong{font-size:15px}.view-tools button{font-size:12px}.two{gap:12px}footer{flex-direction:column;gap:5px}.result-card{padding:14px}}@media(max-width:440px){.composition-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.supply-inline .two{grid-template-columns:1fr;gap:7px}.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.swatches button{display:flex;align-items:center;justify-content:start;gap:9px;padding:9px}.swatches i{margin:0;flex-shrink:0;width:24px;height:24px}.swatches span{text-align:left}.live-specs strong{font-size:13px}.page-heading .eyebrow{font-size:11px}.page-heading h1{font-size:23px}.stage{height:340px}.control-section{padding:17px}.header-actions button{font-size:13px}.two{gap:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.heading-type{font-weight:400;color:var(--muted)}.control-section>h2{margin-bottom:15px}.composition-card{min-height:108px}.supply-inline .two{gap:12px}.help:empty{display:none}.summary-section>.intro{margin-bottom:12px}@media(max-width:440px){.heading-type{display:block;font-size:19px;margin-top:5px}}

/* Consistent select chevrons and a dedicated, non-overlapping viewer toolbar. */
select,select[aria-invalid=true]{appearance:none;-webkit-appearance:none;border-radius:16px;min-height:46px;height:auto;padding:11px 46px 11px 15px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23515e58' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:16px 16px}select:disabled{cursor:not-allowed;opacity:.55}select[aria-invalid=true]{background-color:#fffafb}#viewer{top:64px;bottom:8px}.viewer-toolbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px;border-top:1px solid var(--line);background:#fff;z-index:2}.dimension-tools{display:flex;gap:7px;min-width:0}.dimension-chip{min-height:40px;border-radius:14px;padding:8px 10px;background:#f7f9f8;box-shadow:none;gap:8px;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.dimension-chip svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}.dimension-chip:hover{border-color:var(--accent);background:var(--accent-soft)}.viewer-toolbar .view-tools{position:static;display:flex;gap:6px;flex-shrink:0}.viewer-toolbar .view-tools button{width:40px;height:40px;min-height:40px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 1px 2px #172c2608;position:relative}.viewer-toolbar .view-tools button svg{width:19px;height:19px;display:block}.viewer-toolbar .view-tools button:hover{background:#f1f5f3;border-color:#c0cdc6}.viewer-toolbar .view-tools #open{background:var(--ink);border-color:var(--ink);color:white}.viewer-toolbar .view-tools button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);box-shadow:none}.viewer-toolbar .view-tools #open[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:white}.icon-control:before{content:attr(data-label);position:absolute;bottom:calc(100% + 10px);right:0;background:#24342d;color:white;padding:6px 9px;border-radius:10px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}.icon-control:hover:before,.icon-control:focus-visible:before{opacity:1}.viewer-caption{border-top:0;padding-top:0}input:not([type=color]){border-radius:16px}@media(max-width:1100px) and (min-width:801px){.viewer-toolbar{flex-wrap:wrap;justify-content:center}.dimension-tools{justify-content:center}.viewer-toolbar .view-tools{justify-content:center}}@media(max-width:440px){.viewer-toolbar{padding:12px 10px;gap:10px;flex-wrap:wrap;justify-content:center}.dimension-tools{gap:6px}.dimension-chip{padding:8px;font-size:12px}.viewer-toolbar .view-tools{gap:5px}.viewer-toolbar .view-tools button{height:38px;width:38px;min-height:38px;padding:9px}}@media(forced-colors:active){select{appearance:auto;background-image:none}}

/* Main section surfaces use shadow without a contour. */
.control-section,.visual-column,.summary-section,.supply-inline{border:0;box-shadow:0 2px 8px #17302a06,0 8px 28px #17302a05}


.action-bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 4%;background:#fffffff2;backdrop-filter:blur(16px);box-shadow:0 3px 15px #17302a08}.action-left,.action-right{display:flex;align-items:center;gap:9px}.action-left svg{width:18px;height:18px}.action-right .primary{padding:11px 20px}.action-bar #action-feedback{position:absolute;top:100%;left:4%;margin:8px 0 0;background:#24342d;color:white;padding:8px 12px;border-radius:12px;font-size:13px;max-width:85vw;box-shadow:var(--shadow)}.visual-column{top:94px}html{scroll-padding-top:95px}.compact-summary{padding:13px 18px;margin:0;border-top:1px solid var(--line);font-size:14px;font-weight:550;line-height:1.5}.viewer-caption{padding-top:2px}.quote-summary{background:var(--accent-soft);padding:14px;border-radius:12px;font-size:15px}dialog>p{font-size:14px;color:var(--muted)}textarea{font:13px/1.6 ui-monospace,monospace;width:100%;resize:vertical;border:1px solid var(--line);padding:10px;border-radius:12px;margin-bottom:16px;overflow-wrap:anywhere}textarea:focus-visible{outline:3px solid #75c5c180;outline-offset:2px}.action-left .quiet:disabled{opacity:.45}#copy-status,#quote-status{font-size:13px}@media(max-width:800px){.action-bar{padding:10px 4%;gap:8px;flex-wrap:wrap}.action-left,.action-right{gap:5px}.action-bar button,.action-bar .button{font-size:12px;padding:9px 10px}.action-right .primary{padding:10px 13px}.visual-column{top:0}.compact-summary{font-size:13px}.action-bar #action-feedback{font-size:12px}html{scroll-padding-top:130px}}@media(max-width:480px){.action-left,.action-right{width:100%}.action-right{justify-content:end}.action-right .primary{flex:1}.action-bar{row-gap:5px}.action-left button{flex:1}.action-bar #action-feedback{max-width:92vw}}

/* Palbox selection controls */
.select-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;padding:13px 18px;border:1px solid #d6dfdc;border-radius:18px;background:#fff;color:#21332f;text-align:left;font:inherit;font-size:16px;font-weight:400;cursor:pointer;box-shadow:0 1px 2px #162c2410}
.select-trigger:after{content:"";width:7px;height:7px;border-right:1.5px solid #536760;border-bottom:1.5px solid #536760;transform:rotate(45deg);flex:none;margin:-4px 3px 0 8px}
.select-trigger[aria-expanded="true"]:after{transform:rotate(225deg);margin-top:4px}
.select-trigger:hover{border-color:#91aaa2;background:#fcfdfd}.select-trigger:focus-visible,.direction-segments button:focus-visible{outline:3px solid #75c5c180;outline-offset:3px}.select-trigger[aria-invalid="true"]{border-color:#ba3b3b}
.select-menu{position:fixed;z-index:1000;overflow-y:auto;padding:6px;border:1px solid #e7eeeb;border-radius:20px;background:#fff;box-shadow:0 16px 40px #16392c26,0 3px 10px #16392c0d;box-sizing:border-box;overscroll-behavior:contain}
.select-menu [role="option"]{position:relative;padding:12px 38px 12px 12px;min-height:44px;box-sizing:border-box;border-radius:14px;font-size:15px;line-height:1.4;cursor:pointer;color:#243a32}
.select-menu [role="option"][aria-selected="true"]{background:#edf8f5;color:#246b62;font-weight:550}.select-menu [aria-selected="true"]:after{content:"✓";position:absolute;right:14px;font-weight:600}.select-menu [role="option"]:hover,.select-menu [role="option"].is-active{background:#e5f3ef}.select-menu [role="option"][aria-disabled="true"]{color:#96a19c;background:transparent;cursor:not-allowed}
.direction-segments{display:flex;gap:6px;padding:5px;border-radius:20px;background:#f0f4f2}.direction-segments button{flex:1;min-height:44px;border:0;border-radius:15px;background:transparent;color:#61736b;font:inherit;font-size:15px;cursor:pointer}.direction-segments button[aria-pressed="true"]{background:#e1f3ef;color:#246b62;box-shadow:0 1px 4px #244c3214;font-weight:550}.direction-segments button[aria-pressed="true"]:after{content:" ✓";margin-left:8px}
select[hidden],.select-menu[hidden]{display:none!important}

/* White page, quiet grey groups and borderless white controls. */
:root{--bg:#fff;--group:#f7f7f9;--line:#e4e4ea;--muted:#6c6d75}
header{border-bottom:0}
.control-section,.supply-inline,.summary-section,.visual-column{background:var(--group);border:0;box-shadow:none}
.composition-card,.swatches button,.result-card,.technical-details,.prices-note{background:#fff;border:0;box-shadow:none}
.composition-card:hover,.swatches button:hover{background:#f9fdfc}
.composition-card[aria-pressed=true],.swatches button[aria-pressed=true]{background:#dff1ed;border:0;box-shadow:none}
.composition-card:disabled{background:#ffffff80;border:0;color:#85858f}
.composition-card:disabled small{color:#85858f}
.composition-card.incompatible[aria-pressed=true]{background:#ffeaee;border:0;box-shadow:none}
input:not([type=color]),input[type=color],select,.select-trigger,textarea{background-color:#fff;border:0;box-shadow:none}
.select-trigger:hover,input:hover,select:hover{background-color:#fcfdfd}
.select-trigger[aria-invalid=true],input[aria-invalid=true],select[aria-invalid=true]{background-color:#fff0f2;box-shadow:inset 0 0 0 2px #b42336}
.select-menu{border:0;box-shadow:0 12px 36px #2025341c,0 2px 8px #2025340a}
.direction-segments{background:#fff}
.direction-segments button[aria-pressed=true]{background:#dff1ed;box-shadow:none}
button,.button{border:0;box-shadow:none}
.action-right .outline{background:var(--group)}
.viewer-toolbar,.compact-summary,.viewer-caption,.live-specs{background:var(--group);border-top:0}
.dimension-chip,.viewer-toolbar .view-tools button{background:#fff;border:0;box-shadow:none}
.pill,.status-badge,.stage-warning,.notice,.derived,dialog,#error{border:0}
.notice,.derived,.prices-note{background:#fff}
.notice.danger{background:#fff0f2}
dialog{background:var(--group)}
.dialog-head button{background:transparent}
th{background:#f7f7fa}
@media(forced-colors:active){.composition-card,.swatches button,.select-trigger,input,select,textarea,.direction-segments button{border:1px solid ButtonText}.composition-card[aria-pressed=true],.swatches button[aria-pressed=true],.direction-segments button[aria-pressed=true]{outline:2px solid Highlight}}

.stage{background:var(--group)}

/* Architectural presentation with a separate technical view. */
#viewer{inset:0}.stage{height:clamp(480px,70vh,760px)}.stage-top{align-items:flex-start;z-index:2}.stage-top>div:first-child{padding:9px 12px;border-radius:14px;background:#ffffffc9;backdrop-filter:blur(12px)}.scene-switch{display:flex;gap:3px;padding:4px;border-radius:14px;background:#ffffffcf;backdrop-filter:blur(12px);pointer-events:auto}.scene-switch button{padding:7px 10px;min-height:32px;font-size:12px;border-radius:10px;background:transparent;color:#62645e}.scene-switch button[aria-pressed=true]{background:#fff;color:#24382e;box-shadow:0 1px 6px #20253016}.stage-warning{z-index:3}
@media(max-width:800px){.stage{height:440px}.stage-top{left:14px;right:14px;top:14px}.stage-top>div:first-child{padding:7px 9px}.stage-top strong{font-size:14px}.stage-top span:not(.pill){font-size:12px}.scene-switch button{padding:7px 8px}}
@media(max-width:440px){.stage{height:410px}.stage-top{gap:6px}.scene-switch button{font-size:11px;padding:7px}}

/* Reveal the prepared scene once, then ease into the product framing. */
.viewer-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--group);color:var(--muted);font-size:13px;z-index:4}.loading-orbit{width:34px;height:34px;border:2px solid #dce7e4;border-top-color:var(--accent);border-radius:50%;animation:loading-turn 1s linear infinite}@keyframes loading-turn{to{transform:rotate(360deg)}}#viewer-stage #viewer{opacity:0;transition:opacity .5s ease}#viewer-stage.is-ready #viewer{opacity:1}#viewer-stage:not(.is-ready) .stage-top{visibility:hidden}@media(prefers-reduced-motion:reduce){.loading-orbit{animation:none}#viewer-stage #viewer{transition:none}}

/* Shared configuration, two ways to work. */
.config-mode{display:flex;gap:5px;padding:5px;background:var(--group);border-radius:18px;margin-bottom:16px}.config-mode button{flex:1;background:transparent;border-radius:14px;padding:11px}.config-mode button[aria-pressed=true]{background:#fff;color:var(--accent);box-shadow:0 1px 5px #20352c08}.guided-panel{display:flex;flex-direction:column;background:var(--group);border-radius:var(--radius);padding:22px;min-height:600px;max-height:calc(100vh - 120px)}.guide-head h2{font-size:19px;margin:0;letter-spacing:-.4px}.guide-head .help{font-size:12px}.guide-summary{font-size:13px;color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--line)}.guide-messages{flex:1;overflow-y:auto;min-height:50px;max-height:430px;scroll-behavior:smooth;overscroll-behavior:contain}.guide-message{padding:12px 15px;background:#fff;border-radius:16px;font-size:14px;line-height:1.55;white-space:pre-wrap;margin:0 24px 12px 0;overflow-wrap:anywhere}.guide-message.user{background:var(--accent-soft);margin:0 0 12px 24px}.guide-offline{background:#fff;border-radius:16px;padding:18px;margin:12px 0 24px;font-size:14px}.guide-offline p{color:var(--muted);line-height:1.6}.guide-offline>div{display:flex;flex-wrap:wrap;gap:6px}.guide-offline #guide-back{background:var(--accent-soft);color:var(--accent)}.guide-choices{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.guide-choices button{font-size:13px;text-align:left}.guide-actions{display:flex;gap:8px}.guide-actions button{font-size:12px}#guide-form{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}#guide-form label{width:100%;margin-bottom:0}#guide-input{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:0;min-height:90px}#guide-input:disabled{opacity:.65}#guide-send{padding:9px 20px}.is-guided{position:sticky;top:94px}@media(max-width:800px){.is-guided{position:static}.guided-panel{min-height:440px;max-height:none}.guide-messages{max-height:320px}}
#guide-input{width:100%;resize:vertical;max-height:160px;border:0;border-radius:16px;padding:14px 16px;color:var(--ink);background:#fff}#guide-input:focus-visible{outline:3px solid #75c5c180;outline-offset:2px}.guide-head,.guide-summary,.guide-offline,.guide-choices,.guide-actions,#guide-form{flex-shrink:0}
/* Guided studio: the scene is the workspace; controls float above it. */
.guide-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#guide-toggle{width:38px;height:38px;padding:9px;flex-shrink:0}
#guide-toggle svg{width:20px;height:20px;transition:transform .2s}
.guide-collapsed #guide-toggle svg{transform:rotate(180deg)}
body.guided-active{overflow:hidden;height:100dvh;background:#e9e5dd}
.guided-active header{position:fixed;inset:20px auto auto 26px;height:48px;padding:0;background:transparent;border:0;z-index:22}
.guided-active .brand{gap:0}.guided-active .brand img{width:88px;height:48px}
.guided-active .brand>span,.guided-active .header-actions,.guided-active .page-heading,.guided-active .summary-section,.guided-active footer{display:none}
.guided-active main{max-width:none;margin:0;padding:0}
.guided-active .workspace{display:block;position:fixed;inset:0}
.guided-active .visual-column{position:absolute;inset:0;width:100%;height:100%;border-radius:0;box-shadow:none;overflow:hidden}
.guided-active .stage{height:100%;width:100%;border-radius:0}
.guided-active .visual-column>.compact-summary,.guided-active .viewer-caption,.guided-active .live-specs{display:none}
.guided-active .stage-top{top:96px;left:28px;right:auto}
.guided-active .stage-top>div:first-child{display:none}
.guided-active .scene-switch{background:#ffffffc9}
.guided-active .configuration{position:static}
.guided-active .config-mode{position:fixed;left:144px;top:22px;width:250px;z-index:23;margin:0;background:#ffffffb8;backdrop-filter:blur(18px);box-shadow:0 4px 24px #22262208}
.guided-active .config-mode button{font-size:14px;padding:8px 13px}
.guided-active .action-bar{position:fixed;inset:22px 24px auto auto;padding:5px;gap:4px;background:#ffffffc9;backdrop-filter:blur(18px);border-radius:18px;z-index:23;box-shadow:0 4px 24px #22262208;flex-wrap:nowrap}
.guided-active .action-left,.guided-active .action-right{width:auto;gap:4px}
.guided-active .action-bar #share-config,.guided-active .action-bar #restore-config{display:none}
.guided-active .action-bar button,.guided-active .action-bar .button{font-size:14px;padding:10px 14px;min-height:40px}
.guided-active .action-right .outline{background:transparent}
.guided-active .guided-panel{position:fixed;top:96px;right:24px;bottom:24px;width:360px;min-height:0;max-height:680px;padding:22px;z-index:20;border-radius:24px;background:#fffffff0;backdrop-filter:blur(24px);box-shadow:0 12px 55px #25292212;overflow:auto;overscroll-behavior:contain}
.guided-active .guide-head h2{font-size:18px;font-weight:550}
.guided-active .guide-summary{font-size:13px;margin:15px 0 14px;padding-bottom:14px;border-color:#2025240c}
.guided-active .guide-messages{min-height:0;max-height:none;flex:1 0 80px}
.guided-active .guide-message{background:#f3f4f2;padding:12px 14px;margin-right:15px;font-size:14px}
.guided-active .guide-message.user{background:var(--accent-soft);margin-right:0;margin-left:15px}
.guided-active .guide-offline{padding:0;margin:14px 0 22px;background:transparent;font-size:14px}
.guided-active .guide-offline p{font-size:14px;line-height:1.6}
.guided-active .guide-offline #guide-back{background:#edf5f2}
.guided-active .guide-offline #guide-retry{font-size:12px;padding:8px 0;min-height:30px}
.guided-active #guide-form{position:relative;display:block;flex-shrink:0;margin-top:12px}
.guided-active #guide-form label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.guided-active #guide-input{display:block;resize:none;min-height:96px;max-height:150px;padding:15px 68px 15px 16px;background:#f2f3f2;border-radius:20px;margin:0;font-size:14px}
.guided-active #guide-send{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;border-radius:50%;padding:0;line-height:1;transition:background .15s,opacity .15s}.guided-active #guide-send svg{display:block;width:20px;height:20px;flex:none}.guided-active #guide-send:disabled{background:#dfe2e0;color:#8b918d;opacity:1}

.guided-active .guide-choices button{background:#f3f4f2;padding:8px 11px}
.guided-active .guide-actions{flex-wrap:wrap}
.guided-active .viewer-toolbar{position:absolute;left:28px;bottom:24px;z-index:6;display:flex;gap:18px;width:auto;padding:8px;background:#ffffffcf;backdrop-filter:blur(18px);border-radius:20px;box-shadow:0 4px 24px #22262208}
.guided-active .dimension-chip,.guided-active .viewer-toolbar .view-tools button{background:transparent}
.guided-active .stage-warning{top:154px;left:28px;right:auto;max-width:calc(100% - 450px)}
.guided-active.guide-collapsed .guided-panel{top:auto;bottom:24px;max-height:none;padding:16px 20px}
.guided-active.guide-collapsed .guided-panel>:not(.guide-head){display:none!important}
@media(max-width:1050px) and (min-width:801px){.guided-active .guided-panel{width:320px;padding:18px}.guided-active .config-mode{width:220px;left:130px}.guided-active .action-bar button,.guided-active .action-bar .button{padding:10px}.guided-active .action-left{display:none}.guided-active .viewer-toolbar{gap:5px}}
@media(max-width:800px){
 .guided-active header{top:14px;left:16px;height:38px}.guided-active .brand img{width:69px;height:38px}
 .guided-active .config-mode{top:14px;left:auto;right:16px;width:225px;padding:4px}
 .guided-active .action-bar{top:76px;right:16px;left:auto;background:transparent;box-shadow:none;backdrop-filter:none;padding:0}
 .guided-active .action-bar .action-left,.guided-active #quote-config{display:none}
 .guided-active .action-bar .button{background:#ffffffcf;padding:8px 13px;min-height:34px}
 .guided-active .stage-top{top:76px;left:16px}.guided-active .scene-switch button{font-size:12px}
 .guided-active .guided-panel{top:auto;right:12px;left:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;height:44dvh;max-height:390px;padding:16px 18px;border-radius:22px}
 .guided-active .guide-head h2{font-size:16px}.guided-active .guide-head .help{margin-top:3px}
 .guided-active .guide-summary{margin:8px 0;padding-bottom:8px;font-size:12px}
 .guided-active .guide-messages{flex:1 0 0;min-height:0}
 .guided-active .guide-offline{margin:8px 0;font-size:14px}.guided-active .guide-offline p{margin:6px 0}
 .guided-active .guide-offline strong{display:none}
 .guided-active #guide-form{margin-top:8px}.guided-active #guide-input{min-height:76px;height:76px;padding-top:12px}
 .guided-active .viewer-toolbar{left:16px;bottom:calc(min(44dvh,390px) + 24px);padding:5px;gap:6px;border-radius:16px}
 .guided-active .dimension-chip{padding:7px;min-height:34px;font-size:12px}.guided-active .viewer-toolbar .view-tools button{width:34px;height:34px;min-height:34px}
 .guided-active .stage-warning{top:126px;left:16px;right:16px;max-width:none}
 .guided-active.guide-collapsed .guided-panel{height:auto;padding:12px 18px}
 .guided-active.guide-collapsed .viewer-toolbar{bottom:106px}
}
@media(prefers-reduced-motion:reduce){.guide-messages{scroll-behavior:auto}}
.guided-active .config-mode button{flex:1 0 auto;white-space:nowrap}

/* Keep only useful controls and measurements around the viewer. */
.page-heading:has(#configuration-status[hidden]){display:none}
#direction-wrap{margin-top:18px}

/* Give the product two thirds of the desktop workspace. */
@media(min-width:801px){body:not(.guided-active) .workspace{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}.composition-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* One toolbar with the brand next to the configuration actions. */
.action-bar>.brand{flex:none;margin-right:16px}.action-bar>.brand img{width:82px;height:50px}.action-bar>.action-left{margin-right:auto}
.guided-active .action-bar{backdrop-filter:none}.guided-active .action-bar>.brand{position:fixed;top:20px;left:26px;margin:0}.guided-active .action-bar>.brand img{width:88px;height:48px}.guided-active .action-bar>.action-left{margin-right:0}
@media(max-width:800px){.guided-active .action-bar>.brand{top:14px;left:16px}.guided-active .action-bar>.brand img{width:69px;height:38px}}
@media(max-width:480px){body:not(.guided-active) .action-bar{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px}body:not(.guided-active) .action-bar>.brand{margin:0}body:not(.guided-active) .action-bar>.brand img{width:64px;height:40px}body:not(.guided-active) .action-bar>.action-left{width:auto;min-width:0;margin:0}body:not(.guided-active) .action-bar>.action-right{grid-column:1/-1}body:not(.guided-active) .action-left button{padding:8px 6px}}

/* Floating viewer islands replace the bottom information strip. */
.visual-column{container-type:inline-size}
body:not(.guided-active) .stage{height:clamp(560px,calc(100dvh - 145px),920px)}
body:not(.guided-active) .viewer-toolbar{position:absolute;inset:auto 20px 20px;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:12px;padding:0;border:0;background:none;box-shadow:none;z-index:3;pointer-events:none}
body:not(.guided-active) .viewer-toolbar>div{pointer-events:auto;background:#fffffff0;backdrop-filter:blur(16px);box-shadow:0 3px 18px #2025240c;border:0;border-radius:18px}
body:not(.guided-active) .dimension-tools{display:grid;grid-template-columns:auto auto;gap:2px 4px;padding:10px;justify-content:start}
.island-label{grid-column:1/-1;font-size:12px;line-height:1.3;color:var(--muted);padding:0 6px 3px}
body:not(.guided-active) .dimension-chip{background:transparent;border-radius:12px;padding:6px;min-height:34px;gap:5px}
body:not(.guided-active) .dimension-chip:hover{background:var(--accent-soft)}
body:not(.guided-active) .viewer-toolbar .live-specs{display:flex;justify-self:start;gap:16px;margin:0;padding:12px 16px;align-items:center;min-height:70px}
body:not(.guided-active) .live-specs>div+div{border:0;padding:0}
body:not(.guided-active) .live-specs strong{font-size:13px;white-space:nowrap;margin-top:3px;letter-spacing:0;font-variant-numeric:tabular-nums}
body:not(.guided-active) .viewer-toolbar .view-tools{padding:7px;gap:3px}
body:not(.guided-active) .viewer-toolbar .view-tools button{width:36px;height:36px;min-height:36px;padding:8px;background:transparent;border-radius:12px}
body:not(.guided-active) .viewer-toolbar .view-tools #open{background:var(--ink);color:#fff}
body:not(.guided-active) .viewer-toolbar .view-tools button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
body:not(.guided-active) .viewer-toolbar .view-tools #open[aria-pressed=true]{background:var(--accent);color:#fff}
.guided-active .island-label{display:none}
@container(max-width:700px){body:not(.guided-active) .viewer-toolbar{grid-template-columns:1fr auto;gap:8px;inset:auto 14px 14px}body:not(.guided-active) .viewer-toolbar .live-specs{grid-row:1;grid-column:1/-1;min-height:0;padding:10px 14px}body:not(.guided-active) .dimension-tools{grid-row:2;grid-column:1;justify-self:start}body:not(.guided-active) .viewer-toolbar .view-tools{grid-row:2;grid-column:2}}
@media(max-width:800px){body:not(.guided-active) .stage{height:clamp(520px,78svh,720px)}}
@media(max-width:380px){body:not(.guided-active) .viewer-toolbar{left:10px;right:10px;gap:5px}body:not(.guided-active) .dimension-tools{padding:8px 6px}body:not(.guided-active) .dimension-chip{font-size:12px;padding:5px 3px;gap:3px}body:not(.guided-active) .viewer-toolbar .view-tools{padding:5px;gap:1px}body:not(.guided-active) .viewer-toolbar .view-tools button{width:32px;height:34px;min-height:34px;padding:7px}}

@container(max-width:400px){body:not(.guided-active) .dimension-tools{padding:8px;gap:2px 3px}body:not(.guided-active) .dimension-chip{font-size:12px;gap:3px;padding:5px 3px}body:not(.guided-active) .dimension-chip svg{width:14px;height:14px}body:not(.guided-active) .viewer-toolbar .view-tools{padding:6px;gap:2px}body:not(.guided-active) .viewer-toolbar .view-tools button{width:32px;height:34px;min-height:34px;padding:7px}}

/* Client-supplied glass is separate from the Palbox catalogue. */
.glass-card{margin-top:20px}.glass-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.glass-head h3{margin:0}.glass-badge{font-size:13px;font-weight:550;line-height:1.5;padding:6px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}.glass-supply{font-size:14px;line-height:1.6;margin:12px 0 16px;color:var(--muted)}.glass-supply strong{font-weight:550;color:var(--ink)}.glass-specification{font-size:14px;font-weight:500;margin:0 0 10px}.glass-footnote{font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0 0}.glass-card #weight-note{margin-bottom:0}

/* Keep the mode switch anchored while the workspace changes around it. */
body .config-mode,body.guided-active .config-mode{position:fixed;top:94px;right:4%;left:auto;width:300px;height:50px;margin:0;padding:5px;z-index:24;background:#f7f7faed;backdrop-filter:blur(18px);box-shadow:0 3px 18px #2025240c}
body .config-mode button,body.guided-active .config-mode button{flex:1 1 0;min-width:0;font-size:14px;padding:8px 10px;white-space:nowrap}
body:not(.guided-active) .configuration{padding-top:0}
body:not(.guided-active) .config-mode{position:relative;inset:auto;width:min(300px,100%);margin:0 0 16px auto;z-index:1}
body.guided-active .guided-panel{top:160px;right:4%}
@media(max-width:800px){body .config-mode,body.guided-active .config-mode{top:132px;right:4%;width: min(300px,92%)}body.guided-active .guided-panel{top:auto}body:not(.guided-active) main{padding-top:30px}body:not(.guided-active) .configuration{padding-top:0}}