@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--ink:#233b36;--green:#236c55;--muted:#839089;--line:#e3e7df;--paper:#fafbf7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'DM Sans',sans-serif}button,input,select{font:inherit}button,a,select,input[type=range]{-webkit-tap-highlight-color:transparent}button{cursor:pointer}header{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 4%;gap:50px;background:#fff}.brand{font:800 24px Manrope,sans-serif;color:var(--ink);text-decoration:none;display:flex;gap:6px;align-items:center;letter-spacing:-1px}.logo{background:var(--green);color:#fff;border-radius:11px;width:36px;height:36px;text-align:center;line-height:30px;margin-right:7px}.brandlight{font-size:14px;font-weight:500;letter-spacing:-.3px;margin-top:5px}nav{display:flex;gap:25px;height:100%;align-items:center}nav button{border:0;background:transparent;color:#7a837d;font-size:13px;height:100%;position:relative}nav .navactive{color:var(--green);font-weight:700}nav .navactive:after{content:'';height:3px;background:var(--green);position:absolute;bottom:0;left:0;right:0}#savedCount{background:#f0f2ed;padding:1px 6px;border-radius:4px;font-size:10px;margin-left:4px}.headernote{font-size:11px;margin-left:auto;color:#7d8981;display:flex;gap:7px;align-items:center}.headernote i,.liveDot{width:6px;height:6px;border-radius:50%;background:#569a72;display:inline-block}main{max-width:1600px;margin:auto;padding:40px 4% 0}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2px;color:#69907b;font-weight:700}h1{font:750 32px Manrope,sans-serif;letter-spacing:-1.3px;margin:10px 0}h1 span{color:#54a87b}.heading p{margin:0;color:#7c8880;font-size:13px}.studiochip{font-size:10px;letter-spacing:1.4px;color:#88958b;background:#f1f4ed;padding:12px 16px;border-radius:7px}.studiochip span{color:var(--green);margin-right:8px}.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 6px 30px #233b3604}.settings{padding:24px;border-right:1px solid var(--line)}.sectiontitle{display:flex;gap:10px;color:#8d9c90;font-size:11px;align-items:center;margin-bottom:17px}.sectiontitle b{font-size:13px;color:var(--ink);font-weight:650}.sectiontitle>span{margin-left:auto;font-size:10px}.templates{display:grid;grid-template-columns:1fr 1fr;gap:9px}.template{border:1px solid #e6e9e2;border-radius:9px;background:#fff;text-align:left;padding:12px 11px 10px;display:flex;flex-direction:column;align-items:flex-start;transition:.2s}.template:hover{border-color:#99b5a4;background:#f9fcf8}.template.active{border:1.5px solid #4a8c67;background:#f1f7ee;padding:11.5px 10.5px 9.5px;position:relative}.template.active:after{content:'✓';position:absolute;top:8px;right:8px;font-size:10px;color:var(--green)}.template b{font-size:11px;margin-top:13px;font-weight:650}.template small{font-size:9px;color:#8d978e;margin-top:4px}.mini{height:32px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;transform:rotate(-9deg);box-shadow:0 4px 0 #a3b49e,0 6px 8px #233b3615;letter-spacing:1px;color:#f7faf3;background:#779b7b;padding:0 9px;border-radius:9px}.mini.tag:before{content:'◦';margin-right:5px}.mini.plate{background:#d5b584;color:#fff7e9;box-shadow:0 4px 0 #b99d74;transform:rotate(-6deg);border-radius:4px}.mini.coaster{width:35px;background:#c8b8dd;border-radius:50%;color:#fff;box-shadow:0 4px 0 #a696bf}.mini.photo{background:#e3dfcc;color:#a7a28b;box-shadow:0 4px 0 #c6c2b1;border-radius:3px;width:32px;font-size:25px}.divider{border-top:1px solid var(--line);padding-top:21px;margin-top:22px}.textbutton{margin-left:auto;background:none;border:0;font-size:10px;color:#819283}label{display:block;font-size:11px;font-weight:600;margin-bottom:8px}label>span{float:right;color:#9aa298;font-size:10px;font-weight:400}input[type=text],select{border:1px solid #e1e6dd;border-radius:6px;background:#fff;padding:10px 11px;width:100%;color:var(--ink);outline-color:#76a987}input[type=text]{font-size:13px}.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:17px 0 22px}select{font-size:11px;padding:9px 7px}.sliderlabel{display:flex;justify-content:space-between;align-items:center;margin-top:17px}.sliderlabel label{margin:0}.sliderlabel output{font-size:11px;background:#f1f4ed;padding:4px 7px;border-radius:4px;font-weight:650}.sliderlabel small{font-weight:400;color:#8d968c}input[type=range]{appearance:none;width:100%;height:3px;background:#e6ebdf;accent-color:var(--green);margin:14px 0 6px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:var(--green);border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #236c55}.sliderends{display:flex;justify-content:space-between;font-size:9px;color:#a2ab9e}.colorrow{display:flex;gap:24px;margin:23px 0 20px}.swatches{display:flex;gap:5px}.swatch{width:20px;height:20px;border-radius:50%;border:2px solid white;outline:1px solid transparent;padding:0}.swatch.active{outline-color:#588267}.swatch.custom{padding:0;width:20px;height:20px;overflow:hidden;cursor:pointer}.togglelabel{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:17px}.togglelabel span{float:none;color:var(--ink);font-size:11px;font-weight:500}.togglelabel small{display:block;color:#99a092;font-size:9px;margin-top:5px}.togglelabel input{appearance:none;width:29px;height:17px;border-radius:12px;background:#d2d9ce;cursor:pointer;position:relative}.togglelabel input:checked{background:var(--green)}.togglelabel input:after{content:'';position:absolute;left:3px;top:3px;width:11px;height:11px;border-radius:50%;background:white}.togglelabel input:checked:after{left:15px}.savebutton{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;background:white;font-size:11px;color:#526a58;margin-top:15px}.stagetop{height:53px;display:flex;justify-content:space-between;align-items:center;padding:0 25px;font-size:11px;border-bottom:1px solid var(--line)}.stagetop b{font-weight:600;margin-left:8px}.slash{color:#d5dbd0;margin:0 10px}#modelTitle{color:#9ba294}.badge{font-size:9px;letter-spacing:1px;border:1px solid #e3e7dc;border-radius:4px;padding:5px 7px;color:#939e8b}#viewport{height:482px;position:relative;background:#f0f2e9;touch-action:none}#viewport canvas{display:block;width:100%;height:100%}.viewbuttons{position:absolute;top:18px;left:19px;display:flex;z-index:1;background:#ffffffd9;border:1px solid #e0e5d7;padding:4px;border-radius:7px;gap:3px}.viewbuttons button{border:0;background:transparent;border-radius:4px;padding:7px 10px;font-size:11px;color:#7d8c74}.viewbuttons .selected{background:#e6eddf;color:#426c45}.dimension{position:absolute;bottom:68px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.5px;color:#7e8d6c;background:#f4f6eddd;padding:6px 11px;border:1px solid #dfe5d5;border-radius:5px;white-space:nowrap}.viewhint{position:absolute;bottom:20px;text-align:center;width:100%;font-size:10px;color:#98a28d;pointer-events:none}.viewhint span{padding:0 9px}.axis{position:absolute;right:25px;bottom:24px;font-size:10px;color:#8e9a82;text-align:center;display:flex;flex-direction:column;gap:4px}.axis b{color:#708c61}.stats{display:flex;gap:42px;padding:24px 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stats small{font-size:8px;color:#8a9785;letter-spacing:1px;display:block;margin-bottom:8px}.stats b{font-size:13px;font-weight:550}.stats b span{font-size:9px;font-weight:400;color:#a4ad9a;margin-left:4px}.statnote{margin-left:auto;align-self:center;font-size:11px;color:#8d9c82;font-style:italic}.exportbar{padding:23px 26px;display:flex;justify-content:space-between;align-items:center;gap:12px}.exportbar b{font-size:13px;font-weight:600}.exportbar p{font-size:10px;color:#929d89;margin:7px 0 0}.exportactions{display:flex;gap:8px;align-items:center}.exportactions select{width:130px;height:40px}#download{height:40px;background:var(--green);color:#fff;border:0;border-radius:6px;padding:0 18px;font-size:11px;white-space:nowrap}#download:hover{background:#18543f}.below{display:flex;gap:38px;padding:27px 4px;color:#8a9784;font-size:10px}.below b{font-size:9px;font-weight:500;background:#eaf0e3;border-radius:50%;padding:5px 6px;margin-right:8px;color:#7c926f}.belowright{margin-left:auto;font-size:8px;letter-spacing:1.3px}footer{padding:22px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;color:#98a18f}footer>span:first-child{font-weight:600;color:#65795b}footer i{font-style:normal;color:#9ca793;font-weight:400;margin-left:10px}dialog{border:1px solid var(--line);border-radius:15px;max-width:520px;width:90%;padding:30px;color:var(--ink);box-shadow:0 20px 100px #10261f30}dialog::backdrop{background:#203a3455;backdrop-filter:blur(5px)}dialog h2{font-family:Manrope;margin:0 0 20px}dialog p,dialog li{font-size:13px;line-height:1.8;color:#6b7c6e}dialog li{margin-bottom:12px}.close{float:right;border:0;background:#edf1e7;border-radius:50%;width:26px;height:26px}.saveditem{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.saveditem button{border:1px solid var(--line);background:#f1f6eb;border-radius:5px;padding:6px 10px;margin-left:5px;font-size:11px}.saveditem small{display:block;color:#99a38e;font-size:10px;margin-top:5px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#233b36;color:#fff;padding:13px 22px;border-radius:8px;opacity:0;transition:.2s;pointer-events:none;font-size:12px;z-index:10}#toast.show{opacity:1;transform:translate(-50%,0)}.hint{font-size:10px;line-height:1.6;color:#89977f}input[type=file]{max-width:100%;font-size:11px}button:focus-visible,a:focus-visible{outline:2px solid #48895d;outline-offset:3px}[hidden]{display:none!important}
@media(min-width:1450px){#viewport{height:515px}.settings{padding:26px}.workspace{grid-template-columns:350px 1fr}}@media(max-width:1100px){header{gap:30px}.headernote{display:none}.statnote{display:none}.stats{gap:30px}.exportbar{align-items:flex-start;flex-direction:column}.exportactions{width:100%}.exportactions select{flex:1}#download{flex:1}#viewport{height:480px}.belowright{display:none}}@media(max-width:750px){header{height:auto;min-height:75px;flex-wrap:wrap;gap:12px;padding:18px 5% 0}.brand{font-size:23px}nav{height:42px;width:100%;gap:25px}nav button{font-size:11px}main{padding:27px 4% 0}.heading{margin-bottom:22px}h1{font-size:25px;max-width:300px;line-height:1.3}.studiochip{display:none}.heading p{font-size:11px;line-height:1.6}.workspace{display:flex;flex-direction:column}.stagearea{display:contents}.stagetop{order:0;padding:0 14px}.badge{display:none}#viewport{order:1;height:330px}.settings{order:3;border-right:0;padding:22px}.stats{order:2;justify-content:space-between;padding:18px;gap:10px}.stats small{font-size:7px;letter-spacing:.4px}.stats b{font-size:11px}.exportbar{order:4;border-top:1px solid var(--line);padding:20px}.templates{grid-template-columns:repeat(4,1fr);gap:6px}.template{padding:9px 6px}.template.active{padding:8.5px 5.5px}.template b{font-size:9px}.template small{font-size:8px;line-height:1.5}.mini{font-size:11px;padding:0 6px}.sectiontitle{margin-bottom:16px}.below{gap:15px;flex-wrap:wrap;font-size:9px}.below b{margin-right:5px}footer{font-size:8px;gap:15px}.colorrow{gap:40px}.swatch{width:23px;height:23px}}
.mini.clicker{background:#537d69;box-shadow:0 4px 0 #e4e4d9,0 8px 0 #426454;transform:rotate(-8deg);margin-bottom:5px}.mini.imageclick{background:#e8c46f;box-shadow:0 4px 0 #eadfbc,0 8px 0 #ba9552;color:#fff9df;font-size:26px;margin-bottom:5px}.checkline{display:flex;align-items:center;gap:7px;font-size:11px;margin-top:14px}.checkline input{accent-color:var(--green)}#artPreview{display:flex;gap:10px;align-items:center;margin-top:14px;background:#f3f6ee;border:1px solid var(--line);padding:8px;border-radius:8px}#artThumbnail{max-width:70px;height:60px;object-fit:contain;background:repeating-conic-gradient(#e4e8df 0% 25%,white 0% 50%) 50%/12px 12px}#artStatus{font-size:10px;color:#839079}#artColors{display:flex;gap:8px;margin:12px 0}#artColors input{width:27px;height:27px;border:1px solid #d4dfca;border-radius:6px;padding:2px;cursor:pointer}.hardware{padding:10px;background:#f4f6ed;border-radius:7px;line-height:1.7}#clickerSettings .fieldrow{margin-top:10px}#clickerSettings{border-top:1px solid var(--line);margin-top:17px;padding-top:8px}.stagearea{min-width:0;display:flex;flex-direction:column}#viewport{flex:1;min-height:482px;max-height:820px}.exportbar{margin-top:auto}.templates{row-gap:12px}#clickerMetrics{color:#547a60}#artColors label{margin:0}.clicker-active #viewport{min-height:620px}@media(max-width:750px){.templates{grid-template-columns:repeat(3,1fr)}.stagearea{display:contents}#viewport,.clicker-active #viewport{flex:none;height:350px;min-height:350px;max-height:350px}.template b{font-size:10px}.template small{font-size:9px}.settings{max-height:none}}
.mini.letterkeys{gap:2px;padding:0;background:transparent;box-shadow:none;transform:rotate(-5deg)}.mini.letterkeys i{font-style:normal;background:#e5dec9;color:#4e6b53;border-radius:3px;padding:7px 4px;box-shadow:0 3px 0 #9ea990;font-size:10px}.templates{gap:9px}.template b{line-height:1.4}#letterInfo{margin:0 0 12px}@media(max-width:750px){.template small{font-size:8px}.mini.letterkeys{gap:1px}.mini.letterkeys i{padding:7px 3px;font-size:9px}}
.fontgallerybutton{border:0;background:none;padding:8px 0 0;color:#397252;font-size:10px;cursor:pointer}.fontdialog{max-width:800px;max-height:85vh}.fontgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px;max-height:52vh;overflow-y:auto;padding:3px}.fontcard{border:1px solid #e1e7dc;background:#fcfdf9;padding:16px 12px;border-radius:9px;text-align:left;display:flex;flex-direction:column;min-width:0;gap:6px;transition:border-color .15s}.fontcard:hover,.fontcard.active{border-color:#4e8d64;background:#eef5e8}.fontsample{display:block;font-size:24px;line-height:1.5;min-height:48px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-synthesis:none}.fontcard b{font-size:11px}.fontcard small{font-size:9px;color:#8e9b83}.fontcard.loading{opacity:.5;pointer-events:none}.fontsearch{width:100%;padding:11px 14px;border:1px solid #d9e3d2;border-radius:7px;outline-color:#6b946e;color:var(--ink);background:#fafcf6}#artStatus{overflow-wrap:anywhere;line-height:1.7}@media(max-width:750px){.fontgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fontsample{font-size:21px}.fontdialog{padding:24px 16px}.fontcard{padding:12px 9px}}

.exportactions{flex-wrap:wrap}#thanksButton{border:1px solid #cbdcce;background:#f3f8ee;color:var(--green);border-radius:7px;padding:10px 14px;font-size:11px;line-height:1.5;text-align:center;min-height:44px}#thanksButton:hover{background:#e6f0df}.thanksqr{display:block;width:100%;max-height:65vh;object-fit:contain;margin:18px auto;background:white}.saveqris{display:block;text-align:center;color:var(--green);font-weight:600;padding:12px;text-decoration:underline}#modalContent:has(.thanksqr) p{line-height:1.6;max-width:440px} @media(max-width:750px){#thanksButton{flex:1;min-width:150px}.exportactions{gap:8px}}