*{box-sizing:border-box}html{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#183330;background:#f9fbfb}body{margin:0}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:3px solid #168071;outline-offset:4px}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}.app{max-width:1530px;margin:auto;padding:0 42px}header{min-height:76px;border-bottom:1px solid #dce5e4;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:14px;letter-spacing:.14em;font-weight:700}.brand strong{display:inline-flex;margin-left:6px;background:#183e38;color:white;padding:8px 9px;letter-spacing:0}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.15em;color:#58716d}.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0 22px}.intro .eyebrow{margin:0 0 8px}h1{font-size:clamp(25px,2.6vw,36px);line-height:1.12;letter-spacing:-.04em;margin:0;font-weight:600}.intro-note{font-size:14px;line-height:1.55;color:#627672;margin:0}.configurator{display:grid;grid-template-columns:minmax(0,1fr) 354px;gap:25px;align-items:start}.visual-column{min-width:0;position:sticky;top:18px}.viewer{position:relative;height:605px;background:radial-gradient(ellipse at 48% 38%,#f4f8f9 0,#e3edef 64%,#cedbdd 100%);border:1px solid #d4dfdf;border-radius:8px;overflow:hidden}canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}canvas:active{cursor:grabbing}.view-label{position:absolute;top:27px;left:28px;display:flex;flex-direction:column;gap:7px;pointer-events:none}.view-label>.eyebrow{font-size:10px;letter-spacing:.15em}.view-label strong{font-size:23px;font-weight:500;letter-spacing:-.03em}.view-label>span:last-child{font-size:14px;color:#58706e}.view-presets{position:absolute;top:24px;right:23px;padding:4px;background:#ffffffd9;border:1px solid #ccd8d7;border-radius:6px;display:flex;gap:3px}.view-presets button{border:0;background:none;padding:9px 12px;font-size:14px;border-radius:3px;min-height:36px}.view-presets button.active{background:#1b423b;color:white}.tools{position:absolute;right:23px;top:50%;transform:translateY(-50%);background:#ffffffeb;border:1px solid #cbd7d9;border-radius:6px;display:flex;flex-direction:column;padding:4px;box-shadow:0 3px 16px #102d3410}.tools button{width:41px;height:43px;border:0;background:none;font-size:26px}.tools button:hover{background:#e5efed;border-radius:3px}.tool-divider{height:1px;background:#dce3e4;margin:2px 6px}.view-footer{position:absolute;bottom:22px;left:27px;right:23px;display:flex;justify-content:space-between;gap:12px;align-items:center}.view-footer p{font-size:14px;line-height:1.6;color:#46605c;margin:0;pointer-events:none}.view-footer p>span{font-size:12px;color:#687c79}.auto{background:#ffffffd9;border:1px solid #c6d4d5;border-radius:5px;min-height:42px;padding:8px 12px;font-size:14px;display:flex;align-items:center;gap:7px}.auto>span{font-size:21px}.auto[aria-pressed=true]{background:#173d39;color:#fff}.under-view{display:flex;justify-content:space-between;padding:14px 2px;gap:14px;color:#687b77;font-size:12px}.under-view>span:first-child{letter-spacing:.11em;font-size:10px}.options{padding:0 0 0 1px;min-width:0}.option-section{border-bottom:1px solid #dce5e3;padding:0 0 23px;margin-bottom:23px}.section-title{display:flex;align-items:center;gap:10px;margin:0 0 13px}.step{font-size:11px;font-weight:700;background:#eaf0ee;color:#5c7570;display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;flex-shrink:0}.section-title h2{font-size:16px;font-weight:600;margin:0;letter-spacing:-.01em}.materials{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.material{min-height:46px;border:1px solid #d0ddda;border-radius:5px;background:#fff;font-size:15px}.material.selected{border:1px solid #214c41;color:#fff;background:#214c41}.material:hover:not(.selected){background:#edf4f0}.profiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}.profiles button{position:relative;text-align:left;border:1px solid #d0ddda;border-radius:5px;background:#fff;padding:15px 12px 12px;min-width:0}.profiles button.selected{border:2px solid #295846;padding:14px 11px 11px;background:#f1f6f2}.profiles svg{display:block;width:80%;height:27px;margin-bottom:14px;fill:none;stroke:#5a7670;stroke-width:2.2;stroke-linejoin:round}.profiles strong{font-size:14px;display:block;font-weight:600;margin-bottom:5px}.profiles small{display:block;color:#677e77;font-size:12px;line-height:1.5}.check{position:absolute;right:8px;top:8px;width:16px;height:16px;background:#275641;color:white;border-radius:50%;text-align:center;line-height:16px;font-size:11px;visibility:hidden}.profiles .selected .check{visibility:visible}.color-count{margin-left:auto;font-size:12px;color:#657b75}.colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 7px}.color{min-height:82px;border:1px solid transparent;border-radius:6px;background:transparent;padding:7px 3px 5px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:13px;line-height:1.35}.color>span{height:36px;width:36px;display:block;border-radius:50%;border:1px solid #0002;background:linear-gradient(135deg,#ffffff40,transparent 50%,#00000015),var(--swatch);position:relative;box-shadow:inset 0 1px 1px #fff3}.color[aria-pressed=true]{background:#eaf2ed;border-color:#bad0c3}.color[aria-pressed=true]>span:after{content:'✓';color:white;text-shadow:0 1px 3px #000;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px}.color:hover{background:#ecf2f0}.colors-section{padding-bottom:16px;margin-bottom:17px}.selection-note{display:flex;gap:11px;align-items:flex-start}.mini-swatch{background:#bdc5c8;width:9px;height:38px;flex:0 0 9px;border-radius:2px;margin-top:2px}.selection-note strong{font-size:14px;line-height:1.5;font-weight:600}.selection-note p{font-size:14px;color:#5f746e;line-height:1.6;margin:5px 0 0}.color-note{font-size:12px;line-height:1.5;color:#788984;margin:13px 0 0 20px}.detail{display:flex;gap:23px;align-items:center;margin:7px 0 23px;padding:19px 23px;background:#eef4f1;border-radius:6px}.detail-title{font-size:11px;letter-spacing:.12em;font-weight:700;white-space:nowrap;color:#456b5b}.detail p{font-size:14px;line-height:1.6;color:#48645a;margin:0}footer{border-top:1px solid #d8e0e1;display:flex;justify-content:space-between;gap:24px;padding:19px 0 26px;font-size:12px;line-height:1.6;color:#607479}footer span:last-child{text-align:right}.error{position:absolute;inset:25% 10%;padding:24px;background:white;border:1px solid #c3d1d3;line-height:1.6;font-size:16px;z-index:4}@media(max-width:1150px){.app{padding:0 25px}.configurator{grid-template-columns:minmax(0,1fr) 314px;gap:20px}.viewer{height:615px}.view-presets{top:auto;bottom:91px;left:24px;right:auto}.view-label{left:24px}.view-footer{left:23px}.auto{font-size:12px}.profiles strong{font-size:14px}.profiles small{font-size:12px}}@media(max-width:850px){.app{padding:0 18px}header{min-height:65px}.brand{font-size:12px;letter-spacing:.08em}header>.eyebrow{font-size:10px;max-width:120px;line-height:1.5;text-align:right}.intro{padding:22px 0 18px}.intro .eyebrow{font-size:10px;letter-spacing:.12em}h1{font-size:28px}.intro-note{display:none}.configurator{display:flex;flex-direction:column;gap:16px}.visual-column{position:static;width:100%}.viewer{height:430px}.view-label{top:20px;left:20px}.view-label strong{font-size:21px}.view-label>span:last-child{font-size:13px}.view-presets{top:20px;bottom:auto;right:17px;left:auto}.view-presets button{padding:7px 10px;font-size:13px}.tools{right:13px}.tools button{width:34px;height:36px;font-size:23px}.view-footer{bottom:17px;left:20px;right:14px}.view-footer p{font-size:12px}.view-footer p>span{font-size:11px}.under-view{padding:12px 1px}.under-view>span:last-child{font-size:11px}.options{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:20px}.option-section{margin:0;padding-bottom:18px}.colors-section{grid-column:1/-1}.colors{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.selection-note{grid-column:1/-1}.color-note{grid-column:1/-1;margin:-9px 0 0 20px}.color-note br{display:none}.color{font-size:12px}.detail{margin-top:22px;display:block;padding:16px}.detail p{margin-top:8px}footer{display:block;padding-top:14px}footer span{display:block}footer span:last-child{text-align:left;margin-top:5px}}@media(max-width:540px){.viewer{height:415px}.view-presets{top:auto;bottom:76px;left:16px;right:auto}.view-label{top:19px;left:18px}.view-footer{left:16px}.view-footer p>span{max-width:155px;display:block}.auto{font-size:12px;padding:7px 9px;min-height:38px}.options{display:block}.option-section{margin-bottom:19px;padding-bottom:19px}.section-title{margin-bottom:12px}.profiles button{padding:13px}.profiles button.selected{padding:12px}.profiles svg{width:70%;height:25px;margin-bottom:10px}.profiles strong{font-size:15px}.profiles small{font-size:13px}.colors{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.color{font-size:13px;min-height:84px}.color>span{height:38px;width:38px}.selection-note{margin-top:2px}.color-note{margin:12px 0 0 20px}.under-view>span:first-child{font-size:9px}.intro{padding-top:18px}h1{font-size:27px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}@media(min-resolution:2dppx){.view-label strong{-webkit-font-smoothing:antialiased}}
/* Photorealistic view and shared photo/3D navigation. */
.mode-switch{display:inline-flex;align-items:center;gap:4px;border:1px solid #cad9d3;border-radius:6px;background:#fff;padding:4px;margin-bottom:14px;flex-shrink:0}.mode-switch a{display:block;padding:10px 14px;min-height:39px;border-radius:3px;font-size:14px;text-decoration:none;line-height:19px;color:#4b685f}.mode-switch a[aria-current=page]{background:#234e41;color:#fff}.mode-switch a:hover:not([aria-current]){background:#edf4ef}.mode-switch a:focus-visible{outline:3px solid #168071;outline-offset:3px}.photo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}.photo-toolbar .mode-switch{margin-bottom:0}.photo-presets{display:flex;align-items:center;gap:3px}.photo-presets button{background:transparent;border:0;color:#61786e;font-size:14px;min-height:40px;padding:9px 11px;border-radius:4px}.photo-presets button.active{background:#e9f1ec;color:#214a3c}.photo-viewer{height:auto;min-height:0;aspect-ratio:3/2;border-radius:7px;background:#e7eeeb;isolation:isolate}.photo-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:zoom-in;outline-offset:-4px}.photo-stage.zoomed{cursor:grab}.photo-stage.zoomed:active{cursor:grabbing}.photo-stage img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center center;user-select:none;-webkit-user-drag:none;will-change:transform}.photo-tools{right:15px;top:auto;bottom:15px;transform:none;z-index:3}.photo-tools button{width:34px;height:35px;font-size:23px}.photo-caption{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 2px 9px}.photo-caption>div{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap}.photo-caption strong{font-size:19px;font-weight:500;letter-spacing:-.025em}.photo-caption #profile-view{color:#61776e;font-size:14px}.simulation-label{font-size:11px;color:#697f76;white-space:nowrap;background:#ebf1ed;border:1px solid #dfe8e2;padding:5px 7px;border-radius:3px}.photo-help{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:0 2px 13px}.photo-help p{font-size:12px;color:#73867d;line-height:1.55;margin:0}.photo-help p br{display:none}.photo-help #zoom-level{font-size:12px;color:#6f8579}.photo-loading{position:absolute;inset:0;z-index:2;background:#eaf1edeF;display:grid;place-items:center;font-size:14px;color:#456456}.photo-viewer .error{inset:auto 8%;top:50%;transform:translateY(-50%);z-index:4;background:#fffffff5;border-radius:6px;margin:0;padding:18px}.photo-viewer .error p{margin:0 0 12px}.photo-viewer .error button{font-size:14px;padding:10px 15px;border:1px solid #315b48;border-radius:4px;background:#315b48;color:#fff}@media(max-width:1150px){.photo-toolbar{flex-wrap:wrap;gap:8px}.photo-caption>div{gap:5px}.photo-caption #profile-view{display:block;width:100%;font-size:13px}.photo-caption strong{font-size:18px}}@media(max-width:850px){.photo-toolbar{flex-wrap:nowrap}.photo-viewer{height:auto;min-height:0;aspect-ratio:3/2}.photo-caption>div{gap:10px}.photo-caption #profile-view{display:inline;width:auto}.photo-help{padding-bottom:0}.photo-caption{padding-top:14px}.photo-tools{right:12px;bottom:12px;flex-direction:row;gap:0;padding:3px;background:#ffffffe8}.photo-tools button{width:34px;height:34px;font-size:22px}.photo-tools .tool-divider{height:22px;width:1px;align-self:center;margin:0 3px}.photo-caption #profile-view{font-size:14px}}@media(max-width:540px){.mode-switch a{font-size:13px;padding:8px 11px;min-height:36px}.photo-toolbar{gap:8px;margin-bottom:10px;flex-wrap:wrap}.photo-presets button{padding:8px 9px;font-size:13px;min-height:36px}.photo-caption{align-items:flex-start;padding-top:13px;gap:8px}.photo-caption>div{gap:4px}.photo-caption #profile-view{display:block;width:100%;font-size:13px}.photo-caption strong{font-size:18px}.simulation-label{font-size:10px;padding:5px 6px}.photo-help p br{display:block}.photo-help p{font-size:11px}.photo-tools{right:9px;bottom:9px}.photo-tools button{width:29px;height:29px;font-size:20px}}@media(prefers-reduced-motion:reduce){.photo-stage img{scroll-behavior:auto}}