@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#203039;background:#f8faf9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #20a78e;outline-offset:4px}header{height:94px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfe5e3;background:#fff}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:#17352f;font-size:12px;font-weight:800;letter-spacing:1.3px}.brand span span{display:block;font-size:21px;letter-spacing:2px}.brand-icon{font-size:47px;font-weight:400;line-height:1}.header-note{color:#71807c;font-size:14px}.studio-label{font-size:12px;letter-spacing:2px}.studio-label span{margin-left:15px;background:#e9f0ed;padding:7px;border-radius:5px}main{max-width:1600px;margin:auto;padding:38px 4% 20px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:29px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#287d68;margin:0 0 10px}h1{font-family:Manrope,sans-serif;font-size:36px;letter-spacing:-1.5px;line-height:1.2;margin:0 0 10px;font-weight:600}.heading p:not(.eyebrow){font-size:15px;color:#74817f;margin:0}.quiet{background:none;border:0;color:#5f726b;font-size:14px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:stretch}.viewer{position:relative;min-height:660px;background:radial-gradient(ellipse at 45% 40%,#f8faf9 0,#edf2ef 70%,#e7efea 100%);border:1px solid #dbe4de;border-radius:15px;overflow:hidden}.viewer-top{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:2}.live-label{font-size:10px;font-weight:700;letter-spacing:2px;color:#527969}.segmented{display:flex;background:#ffffffc9;border:1px solid #dce6e0;padding:4px;border-radius:9px}.segmented button{border:0;background:none;padding:9px 12px;font-size:12px;border-radius:6px;color:#697771}.segmented button.active{background:#244e41;color:white;box-shadow:0 2px 6px #244e4120}canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.preview-caption{position:absolute;bottom:98px;left:30px;pointer-events:none;display:flex;flex-direction:column;gap:7px}.preview-caption span:first-child{font-size:14px;font-weight:600}.preview-caption span:last-child{font-size:12px;color:#6d7e75}.viewer-bottom{position:absolute;left:24px;right:24px;bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:10px}.viewer-bottom>span{font-size:12px;color:#6b7e73}.viewer-bottom>div{display:flex;gap:6px}.viewer-bottom button{border:1px solid #d8e3da;background:#ffffffb0;color:#415f51;border-radius:7px;min-width:33px;height:34px;font-size:17px}.viewer-bottom #dimensions{font-size:11px;padding:0 10px;margin-right:6px}.viewer-bottom button.active{background:#dcebe3}.viewer:fullscreen{height:100vh;border-radius:0}aside{background:#fff;border:1px solid #e0e5e2;border-radius:14px;padding:24px}.panel-heading{display:flex;justify-content:space-between;align-items:center}.panel-heading .eyebrow{font-size:10px;letter-spacing:1.2px;margin:0}.step-count{font-size:10px;color:#829089}.control-section{padding:23px 0;border-bottom:1px solid #e9edeb}.control-section.last{border:0;padding-bottom:0}h2{font-size:16px;font-weight:600;margin:0 0 18px;display:flex;align-items:center;gap:10px}h2 span{font-size:10px;color:#6e8e7e;background:#eef4f0;padding:6px;border-radius:50%}.presets{display:flex;gap:6px;margin-bottom:20px}.presets button{flex:1;border:1px solid #e0e7e2;border-radius:6px;background:#fff;color:#6b7b72;font-size:12px;padding:9px 5px}.presets button.active{border-color:#357b63;background:#edf5f0;color:#28694e}.dimension-label{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:12px 0 4px}.dimension-label>div{display:flex;align-items:center;border:1px solid #e0e6e1;border-radius:5px;padding:4px 8px}.dimension-label input{width:63px;border:0;font-size:13px;color:#233c30;text-align:right;background:transparent;-moz-appearance:textfield}.dimension-label span{font-size:11px;color:#8a958f;margin-left:5px}input[type=range]{width:100%;accent-color:#35795e;height:15px;cursor:pointer;margin:8px 0}.help{font-size:11px;line-height:1.6;color:#7d8982;margin:10px 0 0}.choice-heading{display:flex;justify-content:space-between;gap:15px;font-size:12px;align-items:center}.choice-heading strong{font-size:11px;font-weight:500;color:#728277}.swatches{display:flex;gap:12px;margin:14px 0}.swatch{width:37px;height:37px;background:var(--swatch);border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #dce2de}.swatch.active{box-shadow:0 0 0 2px #347d60}.check{display:flex;align-items:center;gap:7px;font-size:12px;color:#667a6c}.check input{accent-color:#347d60;width:15px;height:15px}.glass-heading{margin-top:22px}.glass-options{display:flex;gap:8px;margin-top:12px}.glass-options button{display:flex;flex:1;align-items:center;justify-content:center;gap:7px;border:1px solid #e0e6e2;border-radius:6px;padding:9px 4px;font-size:12px;background:white;color:#627568}.glass-options button.active{border-color:#347d60;background:#edf5ef;color:#245b41}.glass-options i{width:17px;height:20px;border-radius:3px;box-shadow:inset 0 0 0 1px #789a9a30}.clear{background:linear-gradient(135deg,#e3f1f0,#fff)}.blue{background:linear-gradient(135deg,#72aeca,#d5edf5)}.neutral{background:linear-gradient(135deg,#9ca9ae,#e6e9e9)}output{background:#edf3ef;padding:5px 9px;border-radius:4px;font-size:12px}.range-labels{display:flex;justify-content:space-between;font-size:10px;color:#8a948e}.design-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;background:white;border:1px solid #e0e6e2;border-radius:11px;padding:24px 27px;margin-top:22px}.design-summary>div{display:flex;flex-direction:column;gap:7px}.design-summary>div>span:not(.eyebrow){font-size:11px;color:#829086}.design-summary strong{font-size:13px;font-weight:500}.design-summary .summary-title strong{font-family:Manrope,sans-serif;font-size:19px;font-weight:600}.design-summary .eyebrow{font-size:9px;margin:0}.design-summary button{background:#285f47;color:white;border:0;border-radius:7px;padding:16px 18px;font-size:13px}.design-summary button span{margin-left:24px}.bottom-note{text-align:center;font-size:10px;color:#8a978d;margin:18px 0}#status{text-align:center;font-size:13px;color:#285f47}footer{display:flex;justify-content:space-between;margin:10px 4% 25px;font-size:10px;letter-spacing:1px;color:#8c9990}@media(min-width:1500px){.viewer{min-height:710px}}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 310px;gap:15px}aside{padding:18px}.viewer-top{left:16px;right:16px;flex-wrap:wrap}.live-label{display:none}.viewer-bottom{left:15px;right:15px;flex-wrap:wrap}.design-summary{flex-wrap:wrap}.header-note{display:none}}@media(max-width:720px){header{height:75px}.studio-label{font-size:9px}.brand{font-size:9px}.brand span span{font-size:17px}.brand-icon{font-size:36px}main{padding-top:25px}.heading{align-items:flex-start;gap:10px}h1{font-size:27px;letter-spacing:-1px}.heading p:not(.eyebrow){font-size:13px;max-width:240px}.eyebrow{font-size:9px}.quiet{font-size:11px;white-space:nowrap;margin-top:20px}.workspace{display:flex;flex-direction:column}.viewer{min-height:450px}.viewer-top{justify-content:center}.preview-caption{left:20px;bottom:105px}.viewer-bottom>span{width:100%;font-size:11px}.viewer-bottom{justify-content:center;bottom:16px}.viewer-bottom>span{text-align:center}aside{padding:22px}.panel-heading .eyebrow{font-size:11px}.control-section{padding:22px 0}.help{font-size:12px}.choice-heading,.dimension-label,.check{font-size:14px}.presets button,.glass-options button{font-size:13px}.design-summary{gap:23px;padding:22px}.summary-title{width:100%}.design-summary button{width:100%}.design-summary>div{max-width:100%}footer span:last-child{display:none}.bottom-note{line-height:1.7}}
.inspiration{display:flex;align-items:center;gap:22px;margin-top:22px;border-radius:11px;overflow:hidden;background:#eef3ef}.inspiration img{width:170px;height:105px;object-fit:cover}.inspiration p{font-size:16px;margin:6px 0}.inspiration a{font-size:12px;color:#507362}.inspiration .eyebrow{font-size:10px}.presets button,.dimension-label,.dimension-label input,.choice-heading,.check,.glass-options button,.segmented button,.viewer-bottom #dimensions,.design-summary button{font-size:14px}.help,.range-labels,.choice-heading strong,.dimension-label span,.step-count,.design-summary>div>span:not(.eyebrow),.bottom-note{font-size:12px}.viewer-bottom{flex-wrap:wrap}.viewer{min-height:760px}.design-summary strong{font-size:14px}@media(max-width:720px){.viewer{min-height:460px}.inspiration{gap:14px}.inspiration img{width:110px;height:115px}.inspiration p{font-size:14px}.inspiration>div{padding-right:10px}}

/* Shop integration */
.embedded header,.embedded footer,.embedded .inspiration{display:none}.embedded main{padding:24px 18px;max-width:none}.embedded body{background:#f3f5f7}.glass-options{flex-wrap:wrap}.glass-options button{min-width:80px}.aqua{background:linear-gradient(135deg,#75b5b6,#e0f3ec)}.brown{background:linear-gradient(135deg,#a8907b,#eee3d5)}.email-design{display:inline-flex;background:#f57917;color:#10233e;padding:15px 18px;border-radius:6px;text-decoration:none;font-size:14px;font-weight:700}.design-summary{flex-wrap:wrap}.design-summary button{background:#10233e}.segmented button.active{background:#10233e}.eyebrow{color:#8f3b00}input[type=range],.check input{accent-color:#d96000}.live-label{color:#3e5872}.presets button.active,.glass-options button.active{border-color:#d96000;color:#813600;background:#fff3e8}.swatch.active{box-shadow:0 0 0 2px #d96000}.viewer{background:radial-gradient(ellipse at 45% 40%,#fff 0,#edf2f7 70%,#e5edf5 100%)}.viewer-top{flex-wrap:wrap}.heading p:not(.eyebrow){line-height:1.65}.embedded h1{font-size:28px}.eyebrow,.live-label,.studio-label,.panel-heading .eyebrow{font-size:12px}.design-summary .eyebrow{font-size:12px}.brand{color:#10233e}@media(max-width:720px){.email-design{width:100%;justify-content:center}.embedded main{padding:18px 10px}.embedded h1{font-size:23px}.glass-options button{font-size:14px}.step-count{display:none}}