:root{font-family:Arial,sans-serif;color:#253d39;background:#f7f8f5;font-synthesis:none;--green:#246658;--border:#e1e7e1}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;background:white;border:1px solid var(--border);border-radius:8px;padding:11px 15px;color:inherit}button:hover{background:#edf3ed;border-color:#a1b7aa}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #97bcad;outline-offset:2px}.primary{background:var(--green);color:white;border-color:var(--green)}.primary:hover{background:#1b5146}header{height:84px;padding:0 4%;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-size:22px;font-weight:700;letter-spacing:-1px}.logo{background:var(--green);color:white;width:38px;height:38px;border-radius:12px;text-align:center;line-height:34px;font-size:29px}.brand small{font-size:9px;letter-spacing:1px;color:#788780;border:1px solid var(--border);padding:5px;border-radius:4px;margin-left:8px}.actions{display:flex;gap:10px}main{max-width:1550px;margin:auto;padding:42px 4% 20px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;gap:20px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#6b8878}h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-1.2px;font-size:38px;margin:12px 0}p{color:#75827b;font-size:14px;line-height:1.6;margin:8px 0}.product-pill{white-space:nowrap;background:#eaf0e8;padding:12px 17px;border-radius:25px;font-size:12px}.studio{display:grid;grid-template-columns:250px minmax(280px,1fr) 250px;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:white;min-height:600px}.panel{padding:25px 20px}h2{font-size:14px;font-weight:600;margin:0 0 22px}.tools{border-right:1px solid var(--border)}.properties{border-left:1px solid var(--border)}.tool{display:flex;align-items:center;width:100%;text-align:left;gap:12px;margin:10px 0;padding:14px 10px}.tool b{font-size:23px;font-family:Georgia,serif;width:24px;text-align:center}.tool span{font-size:12px;font-weight:600;flex:1}.tool small{display:block;font-size:10px;font-weight:400;color:#7d8982;margin-top:5px}.tool i{font-style:normal;color:#91a098}.divider{height:1px;background:var(--border);margin:26px 0}#count{float:right;color:#85938a}.elements button{display:block;width:100%;text-align:left;margin-bottom:7px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elements button.active{background:#edf4ee;border-color:#8aac99}.tip{margin-top:28px;padding:15px;background:#f5f6ef;border-radius:8px}.tip strong{font-size:11px}.tip p{font-size:11px;margin-bottom:0}.workspace{background:#eff2ed;min-width:0;display:flex;flex-direction:column}.workbar,.workfooter{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;font-size:11px;color:#6d8074}.workbar button{font-size:11px;padding:7px 10px;background:transparent}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#719680;margin-right:5px}#canvas-wrap{width:100%;margin:auto;aspect-ratio:1;max-height:620px;background-image:radial-gradient(#cdd8cd .7px,transparent .7px);background-size:16px 16px;overflow:hidden}#canvas{width:100%;height:100%;touch-action:none}.workfooter{border-top:1px solid #e1e7df}.canvas-help{font-size:10px;text-align:center;padding:0 16px 12px;margin:0}label{display:block;font-size:11px;font-weight:600;margin:19px 0 8px}input,textarea,select{width:100%;background:#fff;border:1px solid #dce3dc;border-radius:6px;padding:10px;color:inherit;font-size:12px}textarea{resize:vertical}input[type=range]{padding:0;accent-color:var(--green)}small{font-size:10px;color:#849087;line-height:1.5}.row{display:flex;gap:12px}.row>div{flex:1;min-width:0}output{float:right;color:#738478}.danger{width:100%;color:#aa554a;margin-top:24px;font-size:12px}footer{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#89958c;margin-top:20px}#status{font-size:12px;color:var(--green);min-height:20px}#empty{font-size:12px}[hidden]{display:none!important}@media(min-width:1500px){.studio{grid-template-columns:270px minmax(280px,1fr) 270px}}@media(max-width:1050px){main{padding:28px 3%}.studio{grid-template-columns:210px minmax(260px,1fr)}.properties{grid-column:1/-1;border-left:0;border-top:1px solid var(--border)}#properties{max-width:520px}.intro{align-items:flex-start}.product-pill{font-size:10px}h1{font-size:32px}}@media(max-width:620px){header{height:auto;padding:16px;flex-wrap:wrap}.brand{font-size:20px}.actions{width:100%}.actions button{flex:1;font-size:12px}.intro{display:block}.product-pill{display:inline-block;margin-top:12px}h1{font-size:30px}.studio{display:flex;flex-direction:column}.tools{border-right:0;padding:20px}.tool{padding:10px}.tip{display:none}.divider{margin:18px 0}.workspace{order:0}.tools{order:1}.properties{order:2}.canvas-help{font-size:9px}footer{flex-direction:column;gap:8px}.elements{max-height:150px;overflow:auto}}
.konvajs-content{margin-inline:auto}
#library-dialog{width:min(780px,calc(100% - 28px));max-height:85dvh;padding:0;border:1px solid var(--border);border-radius:16px;color:#253d39;box-shadow:0 24px 100px #183a3033}#library-dialog::backdrop{background:#152b2366;backdrop-filter:blur(3px)}.library-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);gap:12px}.library-header h2{margin:0;font-family:Georgia,serif;font-size:24px;font-weight:400}.library-header button{font-size:24px;padding:4px 12px}.library-controls{padding:0 24px 20px}.library-controls>button{margin-top:16px;font-size:12px}.library-search-label{margin-top:16px}.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 24px 16px}.library-card{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;padding:18px 12px;background:#f7f8f5}.library-card img{width:100%;height:100px;object-fit:contain;mix-blend-mode:multiply}.library-card strong{font-size:12px;overflow-wrap:anywhere}.library-card small{font-size:11px}.library-card:hover{background:#edf4ee;border-color:#8aac99}#library-message{padding:0 24px 16px;font-size:12px;margin:0}.library-grid[aria-busy=true]{opacity:.6;pointer-events:none}@media(max-width:620px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:16px}.library-header{padding:16px}.library-header h2{font-size:20px}.library-controls{padding-inline:16px}.library-card img{height:85px}}
.product-picker{background:white;border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:20px}.product-picker label{margin-top:0}.product-picker select{max-width:720px}.product-picker details{margin-top:12px;font-size:12px}.product-picker summary{cursor:pointer}.product-picker p{white-space:pre-line;max-width:850px}#side-tabs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}#side-tabs button[aria-pressed=true]{background:var(--green);color:white}.product-pill{white-space:normal;max-width:420px}

#submit-dialog{width:min(800px,calc(100% - 28px));max-height:90dvh;padding:0;border:1px solid var(--border);border-radius:16px;color:#253d39}#submit-dialog::backdrop{background:#152b2366;backdrop-filter:blur(3px)}.submission-content{padding:20px 24px}.submission-content fieldset{border:0;margin:0;padding:0;min-width:0}.submission-content p{font-size:12px}.submit-previews{display:flex;gap:16px;flex-wrap:wrap}.submit-previews figure{margin:0;flex:1;min-width:140px;text-align:center}.submit-previews img{width:100%;max-height:260px;object-fit:contain;border:1px solid var(--border);background:white}.submit-previews figcaption{font-size:12px;margin-top:6px}.honeypot{position:absolute;left:-10000px;top:0;width:1px;height:1px;overflow:hidden}#submit-result a{color:var(--green);font-weight:bold}button:disabled{cursor:wait;opacity:.6}@media(max-width:620px){.actions{flex-wrap:wrap}.actions button{min-width:130px}}

/* Shop logo next to the introduction; actions remain in the top bar. */
header{height:auto;min-height:76px;padding-block:14px;justify-content:flex-end}.actions{flex-wrap:wrap;justify-content:flex-end}.actions button{white-space:nowrap}.intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}.intro .brand{justify-self:end}.brand img{display:block;width:300px;max-width:100%;height:auto}.intro .product-pill{grid-column:1/-1;justify-self:end}@media(max-width:620px){.intro{grid-template-columns:minmax(0,1fr) minmax(100px,35%);gap:12px}.intro .eyebrow{line-height:1.6;letter-spacing:1px}.intro h1{font-size:26px}.intro .brand{min-width:0}.intro .product-pill{margin-top:0}.actions{width:100%}}

/* Keep design actions beside the product controls instead of in a separate bar. */
.product-picker{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}.product-fields{min-width:0}.product-picker .actions{justify-content:flex-end}.intro{margin-bottom:20px;row-gap:10px}main{padding-top:28px}@media(max-width:1050px){.product-picker{grid-template-columns:1fr;gap:14px}.product-picker .actions{justify-content:flex-start}}@media(max-width:620px){main{padding-top:18px}.product-picker{padding:16px;gap:16px}.product-picker .actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}.product-picker .actions button{min-width:0;padding:12px 8px}.product-picker .actions .primary{grid-column:1/-1}.product-picker select{font-size:16px}.intro .product-pill{font-size:11px;padding:8px 12px}.intro h1{font-size:25px;margin:8px 0}.workbar,.workfooter{padding:12px 16px}}

.canvas-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.workbar{gap:10px;flex-wrap:wrap}.workbar #canvas-delete{color:#a5372d;background:#fff5f3;border-color:#e4b9b3;min-height:44px}.workbar #canvas-delete:hover{background:#ffe5e0}@media(max-width:620px){.workbar>span{flex:1 0 100%}.canvas-actions{width:100%;justify-content:space-between}.canvas-actions button{min-height:44px}}

/* Zoom changes only the viewport, never the design coordinates. */
#canvas-wrap{overflow:auto;flex-shrink:0;contain:size}
#canvas{margin:auto}
.zoom-controls{display:flex;justify-content:center;align-items:center;gap:6px;padding:0 16px 10px}
.zoom-controls button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px;background:#fff}
.zoom-controls #zoom-reset{min-width:64px;font-size:12px;font-variant-numeric:tabular-nums}
.zoom-controls button:disabled{opacity:.4;cursor:default}