@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#292824;font-synthesis:none;background:#f4f1ea;font-family:Manrope,Arial,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:3px;outline:2px solid #ba6c39}.app-shell{max-width:1920px;min-height:100vh;margin:auto}.site-header{border-bottom:1px solid #dedbd3;align-items:center;gap:30px;height:80px;padding:0 clamp(24px,4vw,70px);display:flex}.brand{color:#282722;letter-spacing:.095em;align-items:center;font:800 24px DM Sans,Arial,sans-serif;text-decoration:none;display:flex}.brand-mark{color:#bd713f;margin-right:13px;font-size:27px;line-height:1;transform:rotate(90deg)}.brand-dot{color:#b76b3c}.header-label{letter-spacing:.22em;color:#848077;border-left:1px solid #d8d4cb;padding-left:30px;font-size:10px;font-weight:800}.header-badge{letter-spacing:.14em;white-space:nowrap;color:#282722;border:1px solid #ddd8cf;border-radius:50px;margin-left:auto;padding:9px 12px;font-size:10px;font-weight:800;text-decoration:none}.header-badge:hover{color:#b76b3c;border-color:#b76b3c}.badge-dot{background:#b66b3e;border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}.workspace{grid-template-columns:minmax(255px,22%) minmax(420px,1fr) minmax(295px,23%);min-height:calc(100vh - 80px);display:grid}.intro{flex-direction:column;padding:clamp(36px,5vw,78px) clamp(26px,3vw,56px) 38px clamp(24px,4vw,70px);display:flex}.eyebrow{color:#a46340;letter-spacing:.2em;margin:0 0 22px;font-size:10px;font-weight:800}.intro h1{letter-spacing:-.065em;white-space:nowrap;margin:0;font-size:clamp(32px,3vw,58px);font-weight:800;line-height:1.09}.intro h1 em{color:#b86d3e;font-style:normal}.intro-copy{color:#726f67;max-width:310px;margin:28px 0 0;font-size:13px;line-height:1.85}.specs{border-top:1px solid #d9d4ca;margin-top:clamp(46px,9vh,108px)}.specs div{border-bottom:1px solid #d9d4ca;flex-direction:column;gap:3px;padding:16px 0;display:flex}.specs strong{letter-spacing:-.035em;font-size:20px;line-height:1.3}.specs span{color:#8a857d;font-size:11px}.intro-note{color:#9a948a;align-items:center;gap:10px;margin-top:auto;padding-top:30px;font-size:10px;line-height:1.5;display:flex}.note-line{background:#b56f48;flex:none;width:21px;height:1px;display:block}.viewer-panel{border-inline:1px solid #dedbd3;flex-direction:column;min-width:0;display:flex}.viewer-topline{letter-spacing:.2em;color:#827c73;justify-content:space-between;align-items:center;gap:15px;height:61px;padding:0 25px;font-size:9px;font-weight:800;display:flex}.viewer-topline span:last-child{color:#ab6c49;text-align:right}.viewer-stage{background:radial-gradient(at 55% 48%,#f7f4ef 0%,#eeeae2 66%,#e7e2d9 100%);flex:1;min-height:470px;position:relative;overflow:hidden}.viewer-stage canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.stage-grain{opacity:.09;pointer-events:none;background-image:repeating-linear-gradient(0deg,#0000 0 3px,#c9c3b8 4px 4.5px);position:absolute;inset:0}.loading,.viewer-error{z-index:3;color:#777168;justify-content:center;align-items:center;gap:12px;font-size:12px;display:flex;position:absolute;inset:0}.viewer-error{text-align:center;background:#f4f1ea;padding:30px}.viewer-error[hidden],.loading[hidden]{display:none}.spinner{border:2px solid #cfc8bb;border-top-color:#b66d42;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.view-label{z-index:2;pointer-events:none;color:#777168;letter-spacing:.2em;font-size:9px;font-weight:800;position:absolute;bottom:25px;left:25px}.viewer-toolbar{border-top:1px solid #dedbd3;justify-content:space-between;align-items:center;gap:8px;min-height:65px;padding:10px 15px 10px 20px;display:flex}.views{flex-wrap:wrap;gap:3px;display:flex}.view-button,.reset-button{color:#77736b;background:0 0;border:0;border-radius:7px;padding:10px 12px;font-size:11px;font-weight:700}.view-button:hover,.reset-button:hover{background:#ece8df}.view-button.active{color:#fff;background:#2b2926}.reset-button{font-size:22px;line-height:20px}.viewer-hint{color:#aaa49a;margin:0;padding:0 20px 19px;font-size:10px;line-height:1.4}.config-panel{flex-direction:column;padding:clamp(30px,4vw,65px) clamp(24px,3vw,52px) 30px;display:flex}.config-heading{justify-content:space-between;align-items:flex-start;display:flex}.config-heading .eyebrow{margin-bottom:9px}.config-heading h2{letter-spacing:-.05em;margin:0;font-size:29px;line-height:1.2}.config-heading>span{letter-spacing:.12em;color:#b0aaa0;font-size:10px;font-weight:800}.option-section{margin-top:36px}.option-header{justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:17px;display:flex}.option-header h3{margin:0;font-size:13px;font-weight:800}.option-header span{color:#9b6748;white-space:nowrap;font-size:11px}.swatch-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;display:grid}.swatch{aspect-ratio:1;background:0 0;border:2px solid #0000;border-radius:50%;padding:3px;display:block;position:relative}.swatch:before{content:"";background:var(--swatch-color);border:1px solid #0001;border-radius:50%;position:absolute;inset:3px}.swatch:hover{transform:translateY(-2px)}.swatch.active{border-color:#292824}.swatch.active:after{content:"✓";color:var(--check-color,#fff);place-items:center;font-size:13px;font-weight:800;display:grid;position:absolute;inset:0}.custom-color{color:#817d75;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:11px;display:flex}.custom-color input{cursor:pointer;background:0 0;border:1px solid #d6d0c6;border-radius:4px;width:39px;height:28px;padding:0}.section-rule{border-top:1px solid #ddd8cf;margin-top:31px}.section-rule+.option-section{margin-top:28px}.finish-options{gap:8px;display:flex}.finish-button{color:#777168;background:0 0;border:1px solid #d7d2ca;border-radius:7px;flex:1;padding:11px;font-size:11px;font-weight:700}.finish-button.active{color:#292824;background:#e9e4d9;border-color:#37342e}.selection-summary{flex-direction:column;gap:8px;margin-top:auto;padding:35px 0 14px;display:flex}.selection-summary span{letter-spacing:.18em;color:#a09a90;font-size:9px;font-weight:800}.selection-summary strong{letter-spacing:-.03em;font-size:17px}.share-button{color:#fff;text-align:left;background:#b97242;border:0;border-radius:7px;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:0 14px;font-size:11px;font-weight:800;display:flex}.share-button:hover{background:#a75f33}.share-button span{font-size:20px;font-weight:400}.config-footnote{color:#a6a096;margin:17px 0 0;font-size:10px;line-height:1.6}@media (width<=1200px){.workspace{grid-template-columns:minmax(230px,27%) minmax(400px,1fr)}.config-panel{border-top:1px solid #dedbd3;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;display:grid}.config-heading{grid-column:1/-1}.option-section{margin-top:30px}.section-rule{display:none}.selection-summary{margin-top:0}.config-footnote{align-self:center}.viewer-stage{min-height:590px}}@media (width<=700px){.site-header{gap:15px;height:65px;padding:0 20px}.brand{font-size:19px}.brand-mark{margin-right:7px;font-size:21px}.header-label{display:none}.header-badge{padding:7px 9px;font-size:8px}.workspace{flex-direction:column;display:flex}.intro{padding:36px 22px 26px}.intro h1{font-size:40px}.intro-copy{max-width:550px;margin-top:15px}.specs{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px;display:grid}.specs div{border:0;padding:8px 0}.specs strong{font-size:16px}.specs span{font-size:9px}.intro-note{padding-top:13px}.viewer-panel{border:1px solid #dedbd3;border-inline:0}.viewer-topline{height:45px;padding:0 17px;font-size:8px}.viewer-stage{flex:none;height:min(68vw,430px);min-height:315px}.view-label{font-size:8px;bottom:16px;left:18px}.viewer-toolbar{min-height:56px;padding:8px 10px}.view-button{padding:9px 8px;font-size:10px}.viewer-hint{padding:0 16px 12px}.config-panel{padding:35px 22px;display:block}.config-heading h2{font-size:27px}.option-section{margin-top:30px}.section-rule{margin-top:27px;display:block}.selection-summary{padding-top:35px}}@media (width<=390px){.view-button{padding:8px 5px;font-size:9px}.specs{gap:6px}.specs strong{font-size:14px}}@media (width>=701px){.intro h1{font-size:clamp(26px,2.15vw,44px)}}.swatch-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.swatch{aspect-ratio:auto;background:#f8f6f1;border:1px solid #ded8cf;border-radius:8px;flex-direction:column;justify-content:flex-start;align-items:center;gap:7px;width:100%;min-height:78px;padding:7px 3px 6px;display:flex}.swatch:before,.swatch:after{content:none}.swatch:hover{background:#f0ebe2;transform:none}.swatch.active{background:#f0ebe2;border:2px solid #39342f;padding:6px 2px 5px}.swatch-circle{background:var(--swatch-color);border:1px solid #0002;border-radius:50%;flex:none;width:29px;height:29px;display:block}.swatch-caption{text-align:center;color:#655f56;overflow-wrap:anywhere;width:100%;font-size:9px;font-weight:600;line-height:1.2;display:block}.swatch.active .swatch-caption{color:#2a2724;font-weight:800}#joint-options{grid-template-columns:repeat(3,minmax(0,1fr))}#joint-options .swatch{min-height:67px}
