*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#e9e5dc;color:#41413b;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}canvas{display:block;width:calc(100% - 300px);height:100%;touch-action:none;outline:none;cursor:grab}canvas.dragging{cursor:grabbing}canvas.writing{cursor:crosshair}canvas[data-keyboard="true"]:focus-visible{outline:1px solid #aaa88f;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}#error{position:absolute;top:45%;left:15%;right:35%;font:14px/1.6 system-ui}#error[hidden]{display:none}
#builder{position:fixed;right:0;top:0;bottom:0;width:300px;display:flex;flex-direction:column;background:#f6f5f0;border-left:1px solid #d7d5cd;font-size:12px}header{padding:30px 24px 23px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:9px;letter-spacing:2px;color:#88877f}h1{font-size:17px;letter-spacing:-.5px;font-weight:500;margin:8px 0 0}h1 span{font-size:11px;color:#a5a297;letter-spacing:0}.live-dot{width:5px;height:5px;background:#8c977b;border-radius:50%}.panel-scroll{overflow:auto;flex:1;padding:0 24px;scrollbar-width:thin;scrollbar-color:#cbc8bf transparent}details{border-top:1px solid #deddd5}summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:19px 0;font-size:12px;font-weight:500}summary::-webkit-details-marker{display:none}summary span{font-size:9px;color:#a19d91;font-variant-numeric:tabular-nums}details[open] summary{color:#20221b}.section-body{padding:0 0 18px}label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:13px 0;color:#74746b;font-size:11px}label.range{flex-wrap:wrap;gap:8px}output{font-size:10px;color:#57584e;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;width:100%;height:2px;margin:5px 0 10px;background:#d9d7ce;border-radius:2px;cursor:ew-resize}input[type=range]::-webkit-slider-thumb{appearance:none;background:#777e6a;width:10px;height:10px;border:2px solid #f6f5f0;border-radius:50%;box-shadow:0 0 0 1px #777e6a}input[type=color]{appearance:none;width:29px;height:23px;border:1px solid #d4d2c7;border-radius:4px;background:none;padding:3px;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:1px}input[type=checkbox]{accent-color:#777e6a}select{font:11px inherit;color:#4c4e43;max-width:150px;border:1px solid #deddd4;background:transparent;border-radius:4px;padding:6px 8px}button{font:11px inherit;border:1px solid #d9d7cc;background:transparent;color:#575b4c;border-radius:5px;padding:9px 12px;cursor:pointer}button:hover{background:#ecebe3}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #7f8a6e;outline-offset:4px}.note{color:#aaa69b;font-size:10px;line-height:1.5}footer{padding:18px 24px 20px;border-top:1px solid #deddd5}footer button{width:100%}footer p{font-size:9px;color:#a09c90;line-height:1.7;margin:12px 0 0;text-align:center}@media(max-width:740px),(max-width:1000px) and (orientation:portrait){canvas{width:100%;height:58%}#builder{top:58%;width:100%;border-left:0;border-top:1px solid #d7d5cd}header{padding:14px 22px}header h1{margin:3px 0 0;font-size:14px}.panel-scroll{padding:0 22px}footer{padding:9px 22px;display:flex;align-items:center;gap:14px}footer button{width:auto;white-space:nowrap}footer p{margin:0;text-align:left}}

.text-label{display:flex;align-items:stretch;flex-direction:column;gap:8px}textarea,input[type=text]{width:100%;border:1px solid #d9d7cc;border-radius:4px;background:#faf9f5;color:#41413b;font:12px/1.5 inherit;padding:9px;resize:vertical;min-height:32px}textarea{min-height:65px;max-height:180px}button:disabled,input:disabled{opacity:.35;cursor:default}textarea:focus-visible,input[type=text]:focus-visible{outline:2px solid #7f8a6e;outline-offset:2px}

canvas.over-print{cursor:move}canvas.moving-print{cursor:grabbing}

#reset-work{margin-bottom:8px;border-color:transparent;color:#8a877b;font-size:10px}@media(max-width:740px),(max-width:1000px) and (orientation:portrait){footer{flex-wrap:wrap;gap:6px 12px}#reset-work{margin:0}footer p{flex-basis:100%}}

#clasp-action{margin-top:7px}#clasp-action[hidden]{display:none}#clasp-status:empty{display:none}#clasp-status{color:#78765e;font-size:10px}@media(max-width:740px),(max-width:1000px) and (orientation:portrait){#clasp-action{margin:0}#clasp-status{width:100%;text-align:left}}

canvas.over-band{cursor:grab}canvas.dragging-band{cursor:grabbing}

.mobile-sections,.mobile-panel-toggle{display:none}
@media(max-width:740px),(max-width:1000px) and (orientation:portrait){
 body{--panel-height:49dvh}
 canvas{height:calc(100% - var(--panel-height));width:100%}
 #builder{top:auto;bottom:0;height:var(--panel-height);border-radius:20px 20px 0 0;box-shadow:0 -6px 30px #35352a08;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}
 #builder header{padding:15px 18px 10px;flex-shrink:0}
 #builder header h1{font-size:14px;margin:0}
 #builder .eyebrow,#builder .live-dot{display:none}
 .mobile-panel-toggle{display:block;min-height:36px;padding:7px 13px;border-radius:20px;font-size:12px;background:#eeede6}
 .mobile-sections{display:flex;gap:6px;overflow-x:auto;flex-shrink:0;padding:3px 18px 12px;scrollbar-width:none}
 .mobile-sections::-webkit-scrollbar{display:none}
 .mobile-sections button{flex-shrink:0;min-height:40px;padding:9px 14px;border-radius:22px;font-size:12px;border-color:#deddd4}
 .mobile-sections button[aria-pressed=true]{color:#faf9f5;background:#34372e;border-color:#34372e}
 .panel-scroll{padding:0 18px;overscroll-behavior:contain;min-height:0}
 .panel-scroll details{border:0}
 .panel-scroll details:not([data-mobile-active=true]){display:none}
 .panel-scroll summary{display:none}
 .section-body{padding:0 0 14px}
 label{font-size:12px;margin:12px 0;min-height:36px}
 select{font-size:16px;min-height:40px;max-width:60%;padding:8px 10px}
 textarea,input[type=text]{font-size:16px}
 input[type=color]{width:42px;height:36px;padding:4px}
 input[type=checkbox]{width:20px;height:20px}
 input[type=range]{height:28px;margin:0;background:linear-gradient(#d9d7ce,#d9d7ce) center/100% 2px no-repeat;touch-action:pan-y}
 input[type=range]::-webkit-slider-thumb{width:22px;height:22px;border-width:4px}
 output{font-size:12px}
 footer{padding:10px 18px;gap:8px;flex-shrink:0;display:flex;flex-wrap:wrap}
 footer button{min-height:40px;flex:1;padding:8px;font-size:11px}
 #reset-work{flex:0 0 auto;width:100%;min-height:26px;padding:3px;order:3}
 footer p:not(#clasp-status){display:none}
 #clasp-status{margin:0;font-size:10px}
 body.panel-collapsed{--panel-height:calc(65px + env(safe-area-inset-bottom))}
 .panel-collapsed #builder header{height:65px;padding:12px 18px}
 .panel-collapsed .mobile-sections,.panel-collapsed .panel-scroll,.panel-collapsed footer{display:none}
}

#share-preset{margin-bottom:8px}#share-status{font-size:11px;margin:0 0 8px;color:#626d52}#share-status:empty{display:none}#share-link[hidden]{display:none}#share-link{margin-bottom:10px;font-size:12px} @media(max-width:740px),(max-width:1000px) and (orientation:portrait){#share-preset{margin:0;flex-basis:100%;min-height:36px}#share-status{display:block;width:100%;text-align:center;margin:0}#share-status:empty{display:none}#share-link{font-size:16px} }

@media(max-width:740px),(max-width:1000px) and (orientation:portrait){footer #share-preset,footer #reset-work{order:3;flex:1;min-height:32px;width:auto;flex-basis:40%;margin:0}footer #share-status,footer #share-link{order:4}}

html[data-mode=view] canvas{width:100%;height:100%}html[data-mode=view] #builder{display:none}#builder[hidden]{display:none}

/* Studio's quiet inspector. The outer workspace owns projects and publishing. */
html[data-managed=true] #builder{width:290px;background:#f4f2ec;border-left-color:#dcdad2;color:#272b25}
html[data-managed=true][data-mode=studio] canvas{width:calc(100% - 290px)}
html[data-managed=true] #builder header{padding:27px 24px 20px}
html[data-managed=true] #builder .eyebrow{font:9px monospace;letter-spacing:.12em;color:#85877c}
html[data-managed=true] #builder h1{font:normal 24px Georgia,serif;letter-spacing:-.8px;margin-top:7px}
html[data-managed=true] #builder .live-dot{background:#f15d36;width:4px;height:4px}
html[data-managed=true] #builder h1 span{display:none}
html[data-managed=true] summary{padding:20px 0;font-size:12px}
html[data-managed=true] label{font-size:11px;min-height:27px}
html[data-managed=true] input[type=range]{height:22px;background:linear-gradient(#d4d4c8,#d4d4c8) center/100% 2px no-repeat;touch-action:pan-y;margin:0}
html[data-managed=true] input[type=range]::-webkit-slider-thumb{width:15px;height:15px;background:#81886e;border:4px solid #f4f2ec;box-shadow:0 0 0 1px #81886e}
html[data-managed=true] select{min-height:36px;font-size:12px;border-radius:5px}
html[data-managed=true] button{min-height:38px;border-radius:5px}
html[data-managed=true] footer{padding:14px 24px;display:grid;grid-template-columns:1fr;gap:7px}
html[data-managed=true] #share-preset,html[data-managed=true] #reset-work,html[data-managed=true] footer>p:not(#clasp-status),html[data-managed=true] #share-link{display:none}
html[data-managed=true] #clasp-action{margin:0}
html[data-managed=true] footer button{font-size:11px;background:#eeede5;border-color:#dcdad2}
html[data-managed=true] footer #clasp-status{font-size:10px;margin:0}
@media(pointer:coarse){html[data-managed=true] label{min-height:38px}html[data-managed=true] input[type=range]{height:32px}html[data-managed=true] input[type=range]::-webkit-slider-thumb{width:22px;height:22px}html[data-managed=true] select{min-height:42px;font-size:16px}html[data-managed=true] input[type=color]{width:40px;height:36px}}
@media(max-width:740px),(max-width:1000px) and (orientation:portrait){html[data-managed=true][data-mode=studio] canvas{width:100%}html[data-managed=true] #builder{width:100%}html[data-managed=true] #builder header{padding:12px 18px 8px}html[data-managed=true] #builder h1{font:18px Georgia,serif;margin:0}html[data-managed=true] footer{display:flex;flex-wrap:wrap;padding:10px 18px;gap:8px}html[data-managed=true] footer button{flex:1}html[data-managed=true] #clasp-action{margin:0}html[data-managed=true] #builder .eyebrow{display:none}}

@media(min-width:741px) and (max-width:1000px) and (orientation:portrait){body{--panel-height:38dvh}#builder .panel-scroll{padding-left:24px;padding-right:24px}.section-body{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}.section-body>.note,.section-body>.text-label{grid-column:1/-1}html[data-managed=true] footer{padding:12px 24px}html[data-mode=view] canvas{height:100%;width:100%}}

/* Product design inspector: one part at a time, with physical dimensions. */
.mobile-sections{display:flex;flex-wrap:wrap;gap:5px;padding:0 20px 18px;flex-shrink:0}
.mobile-sections button{font:11px inherit;min-height:32px!important;border-radius:18px!important;padding:6px 11px}
.mobile-sections button[aria-pressed=true]{background:#30372d;color:#fff;border-color:#30372d}
.panel-scroll details:not([data-mobile-active=true]){display:none}
.panel-scroll summary{display:none}
.section-intro{font:italic 17px/1.4 Georgia,serif;color:#64695b;margin:8px 0 22px}
.format-options{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:20px}
.format-options button{text-align:left;padding:12px!important;font-size:13px;line-height:1.5}
.format-options small{display:block;font:10px monospace;opacity:.6;margin-top:4px}
.format-options button[aria-pressed=true]{border-color:#81886e;background:#e8eadd}
.unit-input{display:flex;align-items:center;border:1px solid #d9d7cc;border-radius:5px;padding-right:9px;background:#faf9f5}
.unit-input input{width:80px;min-height:36px;border:0;background:none;color:#34372e;font:12px monospace;padding:7px}
.unit-input small{color:#919183;font:10px monospace}
.design-readout{border-top:1px solid #deddd5;padding-top:14px;margin-top:18px;font:10px/1.8 monospace;color:#6b725f}
.alignment-tools{display:flex;gap:5px}.alignment-tools button{flex:1;padding:6px}
.design-toolbar{position:absolute;left:24px;top:22px;display:flex;gap:5px;z-index:2;padding:5px;border:1px solid #d6d4c8;border-radius:28px;background:#f6f5f0dc;backdrop-filter:blur(10px)}
.design-toolbar[hidden]{display:none}.design-toolbar button{border:0;border-radius:20px;min-height:36px;padding:8px 13px}
.design-toolbar button[aria-pressed=true]{background:#30372d;color:white}
.measure-layer{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:visible}
.measure-layer path{fill:none;stroke:#687358;stroke-width:1;stroke-dasharray:3 3}.measure-layer circle{fill:#687358}.measure-layer text{font:11px monospace;fill:#4a5340;text-anchor:middle;paint-order:stroke;stroke:#e9e5dc;stroke-width:5px;stroke-linejoin:round}
.prompt-dialog{width:min(660px,calc(100vw - 32px));max-height:90dvh;border:1px solid #d5d4ca;border-radius:16px;background:#f6f5f0;padding:26px;color:#34372e;box-shadow:0 30px 100px #20221b30}
.prompt-dialog::backdrop{background:#20221b50;backdrop-filter:blur(4px)}.prompt-heading{display:flex;align-items:start;justify-content:space-between;gap:16px}.prompt-dialog h2{font:normal 28px Georgia,serif;letter-spacing:-.7px;margin:10px 0}.prompt-dialog p{font:12px/1.6 system-ui;color:#7a7d70}.prompt-dialog textarea{font:12px/1.7 monospace;min-height:38vh;max-height:50vh;padding:16px}.prompt-actions{display:flex;align-items:center;gap:8px;margin-top:18px}.prompt-actions span{flex:1;font:11px system-ui}.prompt-actions #copy-prompt{background:#30372d;color:#fff}
@media(max-width:740px),(max-width:1000px) and (orientation:portrait){.mobile-sections{flex-wrap:nowrap;overflow-x:auto;padding:3px 18px 12px}.mobile-sections button{min-height:40px!important;flex-shrink:0}.design-toolbar{left:14px;top:14px}.design-toolbar button{min-height:40px;font-size:11px}.unit-input input{font-size:16px;min-height:42px}.section-intro,.format-options,.design-readout,.alignment-tools{grid-column:1/-1}.prompt-dialog textarea{font-size:16px}.prompt-dialog{padding:18px}.prompt-actions{flex-wrap:wrap}.prompt-actions span{flex-basis:100%}}
@media(max-width:740px),(max-width:1000px) and (orientation:portrait){html[data-managed=true] .design-toolbar{top:44px}}