@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--ink:#263d32;--muted:#7a847c;--green:#326d4f;--line:#e6eae4;--mint:#e7eee6;--paper:#fafbf8;--font:'DM Sans',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{transition:background .18s,transform .18s,border-color .18s}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:4px}button:disabled{cursor:wait;opacity:.6}a{color:inherit;text-decoration:none}.topbar{height:84px;border-bottom:1px solid var(--line);padding:0 4.2%;display:flex;align-items:center;justify-content:space-between;background:#fff}.brand{font:750 32px 'Manrope',sans-serif;letter-spacing:-1.5px;display:flex;align-items:center;gap:10px}.brand svg{width:32px;height:36px}.brand-divider{height:26px;width:1px;background:#dfe5dd;margin:0 13px}.studio-name{font:500 13px var(--font);letter-spacing:.3px}.header-right{display:flex;gap:34px;align-items:center}.saved{font-size:11px;color:#849083;display:flex;align-items:center;gap:7px}.saved>span:first-child,.live-label>span{width:5px;height:5px;background:#76a47b;border-radius:100%}.text-button{border:0;background:none;font-size:12px}.text-button span{margin-left:8px}main{max-width:1580px;margin:auto;padding:46px 4.2% 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.eyebrow{font-size:9px;letter-spacing:1.9px;font-weight:650;color:#7a8b78}.intro h1{font:600 clamp(24px,2.6vw,38px)/1.25 'Manrope',sans-serif;letter-spacing:-1.6px;margin:13px 0 10px}.intro h1>span{color:#78a77f}.intro p{color:#7b857e;font-size:13px;margin:0}.two-part-note{display:flex;align-items:center;gap:14px;color:#7c8877;font-size:11px;line-height:1.7;margin-right:10px}.note-symbol{font-size:47px;font-weight:400;color:#8d9f81}.workspace{display:grid;grid-template-columns:310px 1fr;border:1px solid #e0e5dd;border-radius:15px;overflow:hidden;background:white;box-shadow:0 9px 30px #263d3203}.editor{background:#fff;padding:23px 25px 0;z-index:2;max-height:800px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d7dfd4 transparent}.editor-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.editor-title h2{font-size:15px;letter-spacing:-.3px;margin:0;font-weight:650}.icon-button{background:none;border:0;border-radius:5px;font-size:22px;color:#7b877d;width:30px;height:30px}.icon-button:hover{background:var(--mint)}.panel-section{padding:0 0 21px;margin-bottom:20px;border-bottom:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-heading h3{font-size:11px;font-weight:650;margin:0}.section-heading>span{font-size:9px;color:#a5ada2;font-weight:500}.shape-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.shape-card{background:#fff;border:1px solid #e5e9e2;border-radius:8px;padding:6px 5px 9px;display:flex;flex-direction:column;align-items:center;gap:0;color:#818b7d;font-size:10px}.shape-card svg{width:51px;height:51px;fill:none;stroke:currentColor;stroke-width:1.2}.shape-card.active{border-color:#6c957a;background:#eef4ec;color:var(--green);box-shadow:0 0 0 .5px #6c957a}.shape-card:hover{background:#f4f6f0}.control{margin-top:20px}.control label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#657261;margin-bottom:8px}.control output{color:#3b503d;font-size:10px;background:#f1f4ef;padding:3px 7px;border-radius:4px;font-variant-numeric:tabular-nums}.range-labels{display:flex;justify-content:space-between;color:#a1a99c;font-size:9px;margin-top:5px}input[type=range]{display:block;width:100%;height:3px;appearance:none;background:linear-gradient(to right,#6d9475 0%,#6d9475 var(--range,45%),#e8ece4 var(--range,45%),#e8ece4 100%);border-radius:3px;cursor:pointer;margin:14px 0 10px}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#fff;border:2px solid #638a6c;border-radius:50%;box-shadow:0 1px 3px #0001}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:#fff;border:2px solid #638a6c;border-radius:50%}.dimension-fields{display:flex;gap:12px}.dimension-fields>label{width:50%;font-size:10px;color:#7d8878}.number-wrap{display:flex;align-items:center;border:1px solid #e2e7de;border-radius:6px;padding:9px 9px 9px 12px;margin-top:8px}.number-wrap:focus-within{border-color:#6c957a}.number-wrap input{width:100%;border:0;outline:none;color:#3d5140;background:transparent;font-size:13px;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}.number-wrap input::-webkit-inner-spin-button{appearance:none}.number-wrap span{font-size:10px;color:#9ca596}.toggle-line{display:flex;align-items:center;justify-content:space-between}.toggle-line strong{font-size:11px;font-weight:500}.toggle-line small{display:block;color:#939d8d;font-size:9px;margin-top:6px}.switch{position:relative;display:inline-block;width:30px;height:18px;flex-shrink:0}.switch input{opacity:0;width:100%;height:100%;position:absolute;margin:0}.switch>span:not(.sr-only){display:block;width:30px;height:18px;background:#dce3d7;border-radius:30px;pointer-events:none}.switch>span:before{content:'';display:block;position:absolute;width:12px;height:12px;left:3px;top:3px;background:white;border-radius:100%;transition:transform .2s}.switch input:checked+span{background:#67916f}.switch input:checked+span:before{transform:translateX(12px)}.switch input:focus-visible+span{outline:2px solid var(--green);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.swatches{display:flex;gap:11px}.swatch{position:relative;border:3px solid white;outline:1px solid transparent;width:27px;height:27px;border-radius:100%;background:var(--swatch);padding:0}.swatch.active{outline-color:#58745e}.swatch.active:after{content:'✓';color:white;font-size:12px}.swatch:hover{transform:scale(1.1)}.color-caption{display:flex;flex-direction:column;gap:6px;margin-top:12px}.color-caption>span:first-child{font-size:10px;color:#667a60}.color-caption>span:last-child{font-size:9px;color:#a1a99b}.section-heading .preview-only{font-size:7px;letter-spacing:1px}.colors-section{margin-bottom:0}.advanced{margin:0 -25px;font-size:11px}.advanced summary{cursor:pointer;padding:18px 25px;list-style:none;display:flex;justify-content:space-between;align-items:center;color:#6e7c67}.advanced summary::-webkit-details-marker{display:none}.advanced[open] summary span{transform:rotate(45deg)}.advanced-content{padding:0 25px 20px}.advanced-content>label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;margin:15px 0}.advanced-content select{max-width:130px;padding:6px 3px;border:1px solid var(--line);background:white;color:#5d7056;font-size:10px;border-radius:3px}.advanced-content p{font-size:10px;color:#929b8a;line-height:1.6}.preview-panel{position:relative;min-width:0;min-height:740px;background:#e9eee6;overflow:hidden}.preview-top{position:absolute;z-index:3;display:flex;align-items:center;justify-content:space-between;top:25px;left:28px;right:25px}.live-label{font-size:8px;letter-spacing:1.4px;color:#85917c;display:flex;align-items:center;gap:7px}.view-toggle{display:flex;padding:3px;border:1px solid #dce3d6;border-radius:7px;background:#edf1e9}.view-toggle button{background:none;border:0;border-radius:4px;font-size:10px;padding:8px 12px;color:#86917d}.view-toggle button.active{background:#fff;color:#48633e;box-shadow:0 2px 4px #2e42200b}.view-toggle button span{margin-left:5px}#viewport{position:absolute;inset:0 0 35px;touch-action:none}#viewport canvas{display:block;width:100%;height:100%;outline:none}#canvas-fallback{position:absolute;top:40%;left:20%;right:20%;line-height:1.8;text-align:center;color:#66785b}.model-name{position:absolute;left:32px;top:93px;pointer-events:none}.model-name>span{font-size:8px;color:#8c987f;letter-spacing:1.4px}.model-name h2{font:450 23px 'Manrope',sans-serif;letter-spacing:-.8px;margin:9px 0;color:#738566}.footprint{position:absolute;right:28px;bottom:104px;text-align:center;pointer-events:none}.footprint svg{width:71px;height:71px;fill:none;stroke:#95a58a;stroke-width:1}.footprint div{font-size:6px;letter-spacing:1px;color:#9aa78f;margin-top:5px}.footprint div span{display:block;font-size:8px;letter-spacing:0;margin-top:6px;color:#7c8e70}.dimension{position:absolute;pointer-events:none;color:#839475;font-size:9px}.dimension span{background:#e9eee6;padding:7px;white-space:nowrap}.dimension.vertical{height:37%;border-left:1px solid #becbb4;left:18%;top:36%;display:flex;align-items:center;justify-content:center;width:0}.dimension.vertical:before,.dimension.vertical:after{content:'';position:absolute;width:10px;height:1px;background:#becbb4;left:-5px}.dimension.vertical:before{top:0}.dimension.vertical:after{bottom:0}.dimension.vertical span{transform:rotate(-90deg)}.dimension.horizontal{width:30%;border-top:1px solid #becbb4;left:35%;bottom:116px;height:0;display:flex;justify-content:center;align-items:center}.dimension.horizontal:before,.dimension.horizontal:after{content:'';position:absolute;height:10px;width:1px;top:-5px;background:#becbb4}.dimension.horizontal:before{left:0}.dimension.horizontal:after{right:0}.preview-bottom{position:absolute;bottom:51px;left:28px;right:25px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.orbit-hint{font-size:9px;color:#96a08b;display:flex;align-items:center;gap:8px}.orbit-hint svg{width:20px;height:20px;color:#97a38d}.camera-controls{display:flex;gap:7px;pointer-events:auto}.camera-controls button{width:30px;height:30px;background:#f5f7f0;border:1px solid #dbe3d3;border-radius:6px;font-size:20px;color:#798d6a}.camera-controls button:hover{background:white}.preview-meta{position:absolute;bottom:0;left:0;right:0;height:35px;background:#e2e9dd;border-top:1px solid #dae3d4;display:flex;align-items:center;justify-content:space-between;padding:0 27px;font-size:8px;color:#89977c}.preview-meta i{display:inline-block;width:4px;height:4px;background:#7ba66b;border-radius:100%;vertical-align:middle;margin-right:5px}.download-bar{margin-top:19px;display:flex;align-items:center;justify-content:space-between;padding:23px 26px;border:1px solid #e0e5da;border-radius:11px;background:#fff;gap:24px}.download-intro{display:flex;align-items:center;gap:15px}.download-symbol{height:38px;width:38px;background:#f0f4eb;color:#65805b;display:grid;place-items:center;border-radius:100%;font-size:24px}.download-intro h2{font-size:13px;font-weight:600;margin:0 0 6px}.download-intro p{font-size:10px;color:#8e9787;margin:0}.print-stats{display:flex;gap:26px}.print-stats>div{display:flex;flex-direction:column;gap:6px}.print-stats>div>span{font-size:12px;color:#5b6c53;font-variant-numeric:tabular-nums}.print-stats small{font-size:8px;color:#9aa38f}.download-button{background:#345e46;color:#fff;display:flex;align-items:center;justify-content:center;gap:19px;border:0;border-radius:7px;padding:14px 20px;font-size:11px;box-shadow:0 2px 2px #29433112}.download-button svg{width:17px;height:17px}.download-button:hover{background:#254e36}.download-button:active{background:#1b422b}footer{padding:23px 0 25px;display:flex;justify-content:space-between;color:#a4ad9c;font-size:9px}footer>div{display:flex;gap:18px}footer button{font-size:9px;color:#809173;border:0;background:none;padding:0}footer button:hover{color:#345e46}dialog{border:1px solid #e0e8dc;border-radius:18px;padding:40px;max-width:530px;color:var(--ink);box-shadow:0 20px 100px #13261625}dialog::backdrop{background:#1b35244a;backdrop-filter:blur(4px)}dialog>.icon-button{position:absolute;right:15px;top:15px}dialog h2{font:600 28px/1.2 'Manrope',sans-serif;letter-spacing:-1px}dialog p,dialog li{font-size:13px;line-height:1.8;color:#6e7b65}dialog ol{padding-left:20px}dialog li{padding:6px 0 6px 6px}.help-note{background:#f0f4ec;padding:15px;border-radius:7px;font-size:11px!important}dialog>.download-button{margin-top:25px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#294c38;color:white;padding:13px 22px;border-radius:8px;font-size:12px;z-index:30;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}.control.disabled{opacity:.35}.control.disabled input{pointer-events:none}
@media(min-width:1450px){.workspace{grid-template-columns:335px 1fr}.editor{padding:26px 30px 0}.advanced{margin:0 -30px}.advanced summary{padding:18px 30px}.advanced-content{padding:0 30px 20px}.preview-panel{min-height:800px}}
@media(max-width:1100px){.workspace{grid-template-columns:280px 1fr}.editor{padding:22px 20px 0}.advanced{margin:0 -20px}.advanced summary{padding:18px 20px}.advanced-content{padding:0 20px 20px}.preview-top{left:22px;right:20px}.live-label{letter-spacing:.6px;font-size:7px}.view-toggle button{padding:7px 8px}.model-name{left:25px}.print-stats{gap:20px}.download-bar{gap:15px;padding:20px}.download-intro p{max-width:160px;line-height:1.6}.download-button{padding:13px 15px;gap:12px}.download-intro{gap:10px}footer>div>span{display:none}}
@media(max-width:800px){.topbar{height:70px;padding:0 5%}.brand{font-size:27px}.brand svg{width:27px}.brand-divider{margin:0 5px}.studio-name{font-size:11px}.saved{display:none}.header-right{gap:0}main{padding:30px 4% 0}.intro{margin-bottom:25px}.intro h1{font-size:28px;letter-spacing:-1px;max-width:370px}.two-part-note{display:none}.workspace{display:flex;flex-direction:column}.preview-panel{order:0;min-height:520px}.editor{order:1;max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:0 25px;padding:20px 25px 0}.editor-title{grid-column:1/-1;margin-bottom:25px}.panel-section{margin-bottom:20px}.colors-section{padding-bottom:20px}.advanced{grid-column:1/-1;margin:0 -25px}.preview-top{top:20px;left:20px;right:20px}.model-name{top:80px;left:23px}.model-name h2{font-size:20px}.footprint{bottom:87px;right:22px}.footprint svg{width:55px;height:55px}.dimension.horizontal{bottom:95px}.preview-bottom{bottom:47px;left:20px;right:20px}.preview-meta{padding:0 20px}.download-bar{flex-wrap:wrap;gap:20px}.download-intro{flex:1}.download-intro p{max-width:none}.print-stats{gap:20px}.download-button{width:100%;padding:16px}.download-bar>.download-button{font-size:12px}.download-symbol{width:34px;height:34px}footer{font-size:8px;gap:10px}footer>div{gap:12px}footer button{font-size:8px}}
@media(max-width:430px){.brand-divider,.studio-name{display:none}.intro h1{font-size:26px}.intro p{font-size:11px}.eyebrow{font-size:8px}.preview-panel{min-height:490px}.editor{gap:0 20px;padding:20px 20px 0}.editor-title{margin-bottom:20px}.shape-options{gap:4px}.shape-card{padding:4px 2px 7px;font-size:8px}.shape-card svg{width:40px;height:40px}.section-heading h3{font-size:10px}.section-heading .preview-only{font-size:6px}.control label{font-size:9px}.control output{font-size:8px;padding:3px 5px}.dimension-fields{gap:7px}.dimension-fields>label{font-size:8px}.number-wrap{padding:8px}.number-wrap input{font-size:12px}.toggle-line strong{font-size:10px}.toggle-line small{font-size:8px;max-width:85px;line-height:1.4}.swatches{gap:6px;flex-wrap:wrap}.swatch{width:23px;height:23px}.color-caption>span:last-child{font-size:8px}.advanced{margin:0 -20px}.advanced summary{padding:15px 20px}.preview-top{left:16px;right:16px}.live-label{font-size:6px;letter-spacing:.7px}.view-toggle button{font-size:9px;padding:7px}.model-name{left:20px;top:78px}.model-name h2{font-size:19px}.dimension.vertical{left:12%}.footprint{right:15px;bottom:91px}.footprint svg{width:45px;height:45px}.footprint div{font-size:5px}.orbit-hint{font-size:7px}.preview-bottom{left:16px;right:16px}.preview-meta{font-size:6px;padding:0 16px}.download-bar{padding:19px;gap:20px}.download-intro{flex-basis:100%}.print-stats{justify-content:space-between;width:100%}.download-intro p{font-size:10px}footer{flex-direction:column;align-items:center;gap:12px}dialog{padding:30px 25px;margin:auto 5%;max-width:90%}dialog h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.header-right>a{text-decoration:none}.header-right{gap:18px}
@media(max-width:700px){.topbar{height:auto;min-height:72px;gap:15px;flex-wrap:wrap;padding-top:15px;padding-bottom:15px}.header-right{gap:12px;flex-wrap:wrap}.header-right .saved{display:none}.header-right .text-button{font-size:10px}.studio-name{display:none}}