*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;color:#171717;background:#f5f5f3;font-size:16px}header{min-height:76px;background:#080808;color:white;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}header a{color:inherit;text-decoration:none;font-size:14px}header span{letter-spacing:.16em;font-size:14px}button{font:inherit;cursor:pointer;border:1px solid #ccc;background:white;border-radius:5px;padding:11px 13px;color:#171717}button:hover{background:#e8e8e5}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #b6650c;outline-offset:2px}main{display:grid;grid-template-columns:300px minmax(300px,1fr) 270px;min-height:calc(100vh - 76px)}aside{padding:24px;background:#fff}aside:first-child{border-right:1px solid #ddd}h1{font-size:26px;font-weight:500;letter-spacing:-.04em;margin:0 0 10px}h2{font-size:17px;font-weight:600;margin:0 0 18px}h2 b{font-size:12px;color:#8a6b3d;letter-spacing:.1em;margin-right:12px}.intro,.hint{font-size:14px;line-height:1.6;color:#666}.intro{margin-bottom:24px}section{padding:22px 0;border-top:1px solid #ddd}label{display:block;font-size:14px;line-height:1.4;margin-bottom:14px}input,select,textarea{display:block;width:100%;min-width:0;margin-top:7px;padding:10px;border:1px solid #ccc;border-radius:4px;font:inherit;background:#fff;color:#111}textarea{resize:vertical}.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.shapes{display:flex;flex-wrap:wrap;gap:7px}.shapes button{font-size:14px;flex:1}.upload{margin-top:18px}.workspace{min-width:0;padding:24px;position:sticky;top:0;height:calc(100vh - 10px);display:flex;flex-direction:column;max-height:1100px}.canvas-bar{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#666;margin-bottom:16px;flex-wrap:wrap}.stage{background:#050505;flex:1;min-height:320px;display:flex;align-items:center;justify-content:center;padding:25px;border-radius:6px;overflow:hidden}#canvas{display:block;width:100%;height:100%;max-height:78vh;touch-action:none}#canvas [data-id]{cursor:move}#status{font-size:14px;line-height:1.5;color:#555;min-height:42px}.properties{border-left:1px solid #ddd}fieldset{border:0;margin:0;padding:0;min-width:0}fieldset:disabled{opacity:.45}.danger{margin-top:22px;color:#a62424;width:100%}[hidden]{display:none!important}@media(max-width:1100px){main{grid-template-columns:270px 1fr}.properties{grid-column:1/-1;border-top:1px solid #ddd}.workspace{height:85vh}.properties fieldset{max-width:600px}}@media(max-width:650px){header{flex-wrap:wrap;padding:16px}header span{display:none}main{display:flex;flex-direction:column}.workspace{position:relative;order:-1;height:60vh;padding:14px}.stage{min-height:200px;padding:12px}aside{padding:20px}header button{font-size:14px}}

.stage{background:#242424}
main{grid-template-columns:340px minmax(300px,1fr)}
.properties{padding:18px 14px;margin-top:18px;border:1px solid #d2bb9c;border-left:3px solid #b78039;border-radius:5px;background:#faf8f4}
.properties h2{font-size:16px;margin-bottom:15px}.properties .hint{margin-bottom:10px}.properties input,.properties select,.properties textarea{background:#fff}.properties details{margin:15px 0}.properties summary{cursor:pointer;font-size:14px;margin-bottom:12px}
@media(max-width:650px){main{display:flex}.properties{padding:16px 12px}}
.vector-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:460px;overflow:auto;padding:3px}.vector-gallery button{padding:7px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px}.vector-gallery img{width:100%;height:66px;object-fit:contain;background:#d2d2d2;border-radius:3px}.vector-gallery span{font-size:12px;line-height:1.3;overflow-wrap:anywhere}.vector-gallery button:disabled{opacity:.5}
dialog{width:min(540px,94vw);max-height:90vh;overflow:auto;border:1px solid #ccc;border-radius:8px;padding:28px}dialog::backdrop{background:#0009}#close-order{float:right}#design-order>button[type=submit]{background:#111;color:#fff;width:100%}#order-error{color:#a62424}button:disabled{opacity:.4;cursor:default}
.properties #delete{margin:0 0 18px;background:#b42323;border:1px solid #b42323;color:#fff;font-weight:700;min-height:44px}.properties #delete:hover{background:#8e1919;border-color:#8e1919}
#canvas-delete{position:absolute;z-index:5;background:#b42323;border:1px solid #fff;color:#fff;font-weight:700;min-height:44px;box-shadow:0 2px 10px #0005}#canvas-delete:hover{background:#8e1919}
#canvas-delete{width:32px;height:32px;min-height:32px;padding:0;background:#fff;border:1px solid #e5c4c4;border-radius:50%;color:#c52222;font-size:25px;line-height:1;font-weight:500;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px #0003}#canvas-delete:hover{background:#fee;color:#a00}
.tool-group{border-top:1px solid #ddd}.tool-group>summary{padding:20px 4px;cursor:pointer;font-size:18px;font-weight:600;list-style:none;display:flex;align-items:center;justify-content:space-between}.tool-group>summary::-webkit-details-marker{display:none}.tool-group>summary::after{content:'+';font-size:24px;color:#91622b}.tool-group[open]>summary::after{content:'−'}.tool-group>section{padding:15px 0;border-top:0}.tool-group>section+section{border-top:1px solid #eee}.tool-group>summary:focus-visible{outline:2px solid #b6650c;outline-offset:2px}
.stage{position:relative;padding-top:65px}.canvas-toolbar{position:absolute;top:12px;right:12px;z-index:6;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 24px)}.canvas-toolbar button{font-size:13px;padding:8px 10px;min-height:36px;background:#fff}.canvas-toolbar button:disabled{background:#d0d0d0;opacity:.65}@media(max-width:650px){.stage{padding-top:64px}.canvas-toolbar{top:8px;right:8px;gap:4px}.canvas-toolbar button{padding:7px;font-size:12px}}

#canvas-delete{z-index:8}
.send-panel{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:end;background:#fff;border:1px solid #ddd;border-radius:6px;padding:15px}.send-panel label{grid-column:1/-1;margin:0}.send-panel textarea{margin:0;font-size:14px}.send-panel button{background:#111;color:#fff;min-height:44px}.workspace{max-height:none;min-height:680px}#status{min-height:22px;margin:10px 0}@media(max-width:650px){.workspace{height:auto;min-height:0}.stage{height:52vh;flex:none}.send-panel{grid-template-columns:1fr}.send-panel button{width:100%}}
#multi-tools{position:absolute;bottom:12px;left:12px;right:12px;z-index:6;background:#fff;padding:9px;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;font-size:13px}#multi-tools label{display:flex;align-items:center;gap:5px;margin:0}#multi-gap{width:65px;margin:0;padding:6px}#multi-tools button{font-size:13px;padding:8px}
.canvas-color{display:flex;align-items:center;gap:6px;background:#fff;border-radius:5px;padding:4px 8px;margin:0;font-size:13px}.canvas-color select{width:auto;margin:0;padding:5px;font-size:13px}.canvas-color select:disabled{opacity:.5}.stage{padding-top:105px}@media(max-width:650px){.stage{padding-top:110px}}
.canvas-scale{display:flex;align-items:center;gap:6px;background:#fff;border-radius:5px;padding:4px 8px;margin:0;font-size:13px}.canvas-scale input{width:100px;margin:0;padding:0}.canvas-scale output{min-width:36px}.stage{padding-top:135px}
.stage{padding-left:60px;padding-bottom:65px}.move-vertical,.move-horizontal{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;color:#fff;margin:0;font-size:18px}.move-vertical{left:15px;top:145px;bottom:65px;flex-direction:column;width:28px}.move-vertical input{writing-mode:vertical-lr;direction:ltr;height:100%;width:24px;min-height:50px;flex:1;margin:0;padding:0}.move-horizontal{left:60px;right:25px;bottom:18px}.move-horizontal input{flex:1;width:100%;margin:0;padding:0}.move-vertical input,.move-horizontal input{accent-color:#c17e32}.move-vertical input:disabled,.move-horizontal input:disabled{opacity:.3}#multi-tools{bottom:65px;left:60px}@media(max-width:650px){.stage{padding-left:45px;padding-bottom:60px;min-height:360px}.move-vertical{left:8px;top:140px;bottom:60px}.move-horizontal{left:45px;right:12px}}
.more-shapes{margin-top:12px}.more-shapes>summary{cursor:pointer;list-style:none;font-size:14px;padding:10px;border:1px solid #ccc;border-radius:5px;text-align:center}.more-shapes>summary::-webkit-details-marker{display:none}.more-shapes>summary::before{content:'+ ';font-weight:700}.more-shapes[open]>summary::before{content:'− '}.more-shapes>.shapes{margin-top:10px}

.permanent-tools>h2{padding:20px 4px 0;font-size:18px}.permanent-tools{padding-bottom:16px}#more-vectors{width:100%;margin-top:10px}

main>aside:first-child{overflow-anchor:none}.properties{overflow-anchor:none}
.zoom-controls{display:flex;gap:4px;align-items:center;flex-wrap:wrap;background:#fff;padding:5px;border-radius:5px}.canvas-toolbar{left:12px;right:12px;justify-content:flex-end}.zoom-controls{margin-right:auto}.canvas-toolbar #zoom-label{color:#111;font-size:13px}.send-panel #download-design{background:white;color:#111}

.design-area{min-width:0}.saved-designs{background:#fff;border:1px solid #ddd;border-radius:10px;padding:14px;margin-bottom:14px}.shelf-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.shelf-heading h2{margin:0;font-size:17px}.shelf-heading>div{display:flex;gap:6px}.shelf-heading button{min-width:40px}.template-strip{display:flex;gap:12px;overflow-x:auto;padding:12px 0;scroll-snap-type:x proximity}.template-strip>div,.template-strip>.blank-design{flex:0 0 140px;scroll-snap-align:start}.template-strip>div>button:first-child{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}.template-strip img{width:110px;height:80px;object-fit:contain;background:#eee}.template-strip span{overflow-wrap:anywhere}.template-strip .blank-design{min-height:120px;border-style:dashed}.template-admin summary{cursor:pointer;font-size:13px;color:#555}.template-admin[open]{max-width:420px}.design-steps{display:flex;justify-content:center;gap:12px;padding:12px;flex-wrap:wrap}.design-steps button{font-weight:700;min-height:44px}.design-area .workspace{top:12px}@media(max-width:650px){.design-steps{gap:5px}.design-steps button{font-size:12px;padding:8px}.template-strip>div,.template-strip>.blank-design{flex-basis:125px}}

/* Compact design shelf leaves more room for the canvas. */
.saved-designs{padding:8px 10px;margin-bottom:8px;border-radius:8px}.shelf-heading h2{font-size:14px}.shelf-heading button{min-width:32px;min-height:30px;padding:3px 8px;margin:0}.template-strip{gap:8px;padding:7px 0}.template-strip>div,.template-strip>.blank-design{flex-basis:104px}.template-strip img{width:80px;height:48px}.template-strip>div>button:first-child{padding:5px;gap:3px;font-size:11px;margin:0}.template-strip>div>button:last-child{font-size:11px;padding:2px 6px;margin:3px 0 0;min-height:24px}.template-strip .blank-design{min-height:78px;font-size:12px;padding:7px;margin:0}.template-admin summary{font-size:12px}.design-steps{gap:8px;padding:6px}.design-steps button{min-height:34px;padding:5px 12px;font-size:13px;margin:0}@media(max-width:650px){.template-strip>div,.template-strip>.blank-design{flex-basis:96px}.design-steps button{font-size:12px;padding:5px 8px}}

/* Dark studio theme, inspired by the supplied reference. */
:root{color-scheme:dark;--studio-bg:#0b0d0d;--studio-panel:#141717;--studio-line:#303535;--studio-text:#edf0ec;--studio-muted:#a5aeaa;--studio-accent:#d8eda6}
body{background:var(--studio-bg);color:var(--studio-text);font-family:Inter,Arial,sans-serif;font-size:14px}
header{background:var(--studio-bg);border-bottom:1px solid var(--studio-line);min-height:74px;padding:18px 28px}header span{color:var(--studio-accent);font-size:12px}header a{font-weight:600}
main{grid-template-columns:300px minmax(0,1fr)}aside{background:var(--studio-panel);padding:22px 16px}aside:first-child{border-color:var(--studio-line)}h1{font-size:23px}h2{font-size:15px}section{border-color:var(--studio-line);padding:18px 0}.intro,.hint,#status,.canvas-bar{color:var(--studio-muted)}label{font-size:13px}.hint{font-size:12px}input,select,textarea,.properties input,.properties select,.properties textarea{background:#222626;color:var(--studio-text);border-color:#3a4040;border-radius:6px}input[type=checkbox],input[type=range]{accent-color:var(--studio-accent)}button{background:#202424;border-color:#3a4040;color:var(--studio-text);border-radius:6px}button:hover{background:#303737;border-color:#65725b}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}
.design-steps{justify-content:flex-start;padding:8px 20px 8px 320px;border-bottom:1px solid var(--studio-line)}.design-steps button{background:transparent;border-color:transparent;color:var(--studio-muted);font-weight:500}.design-steps button:hover{color:var(--studio-accent);background:#1b2118}
.design-area{padding:18px 24px}.saved-designs{background:transparent;border:0;border-bottom:1px solid var(--studio-line);border-radius:0;padding:0 0 10px}.shelf-heading h2{font-size:13px;color:var(--studio-muted);font-weight:500}.template-admin summary{color:var(--studio-muted)}.template-strip img{background:#bfc2bf}.template-strip .blank-design{color:var(--studio-accent);background:#161c15;border-color:#404b34}
.design-area .workspace{padding:12px 0;min-height:680px;height:calc(100vh - 120px)}.stage{background:radial-gradient(ellipse at center,#171b19 0%,#0b0d0d 75%);border-radius:0}.canvas-bar{margin-bottom:10px;font-size:11px}.canvas-toolbar button,.canvas-toolbar button:disabled,.zoom-controls,.canvas-color,.canvas-scale,#multi-tools{background:#1d2321;color:var(--studio-text);border-color:var(--studio-line)}.canvas-toolbar #zoom-label{color:var(--studio-text)}.canvas-toolbar button:hover{background:#323d30}.canvas-toolbar{gap:5px}.canvas-color,.canvas-scale,.zoom-controls{border:1px solid var(--studio-line)}
.properties{background:#1a201b;border-color:#435039;border-left-color:var(--studio-accent)}.send-panel{background:var(--studio-panel);border-color:var(--studio-line)}.send-panel button,#design-order>button[type=submit]{background:var(--studio-accent);color:#11180d;border-color:var(--studio-accent);font-weight:600}.send-panel #download-design{background:#202820;color:var(--studio-accent);border-color:#566445}dialog{background:var(--studio-panel);color:var(--studio-text);border-color:var(--studio-line)}#order-error{color:#ff9696}.danger{color:#ff9696}summary{cursor:pointer}.tool-group{border-color:var(--studio-line)}
@media(max-width:900px){main{grid-template-columns:270px minmax(0,1fr)}.design-area{padding:12px}.design-steps{padding-left:282px}}
@media(max-width:650px){main{display:flex}.design-steps{padding:6px;justify-content:center}.design-area{padding:10px}.design-area .workspace{height:auto;min-height:0}aside{padding:18px}.stage{height:60vh;min-height:350px}header{padding:16px}.send-panel button{min-height:44px}}

body>.saved-designs{margin:0;padding:12px 28px;background:var(--studio-panel);border-bottom:1px solid var(--studio-line)}body>.saved-designs>label{display:inline-block;width:min(280px,65%);margin:4px 10px 8px 0;vertical-align:bottom}body>.saved-designs>#save-template{margin-bottom:8px;background:var(--studio-accent);color:#11180d;font-weight:600}body>.saved-designs .template-strip{max-width:100%}body>.saved-designs .template-admin{max-width:440px}@media(max-width:650px){body>.saved-designs{padding:12px}body>.saved-designs>label{width:100%}}

/* Give the drawing surface more vertical space. */
.design-area .workspace{height:auto;min-height:0}.design-area .stage{flex:none;height:78vh;min-height:560px}.design-area #canvas{max-height:none}.design-area{padding-left:16px;padding-right:16px}@media(max-width:650px){.design-area .stage{height:70vh;min-height:400px}.design-area{padding-left:8px;padding-right:8px}}

#font-previews{display:grid;gap:6px}#font-previews button{text-align:left;min-width:0;padding:10px}#font-previews span{display:block;font-size:23px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#font-previews small{display:block;color:var(--studio-muted);font-size:11px;margin-top:5px}#font-previews button[aria-pressed=true]{border-color:var(--studio-accent);background:#293126}#font-more{font-size:12px;margin:8px 0 14px}

.design-steps button{display:inline-flex;align-items:center;gap:10px;background:transparent;border:0;border-radius:4px;color:var(--studio-text);font-size:13px;font-weight:400;padding:7px 12px;min-height:40px}.step-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 25px;width:25px;height:25px;border:1px solid #444e35;border-radius:50%;color:var(--studio-accent);font-size:11px;font-weight:400;font-variant-numeric:tabular-nums}.design-steps button:hover .step-number{border-color:var(--studio-accent)}@media(max-width:650px){.design-steps button{gap:6px;padding:6px;font-size:12px}}

.numbered-heading{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}.send-panel>.numbered-heading{grid-column:1/-1;margin:0 0 4px}

#trace-preview{height:160px;background:#d2d2d2;margin:10px 0;padding:8px}#trace-preview svg{width:100%;height:100%}

#trace-preview{height:auto;background:transparent;color:var(--studio-accent);font-size:12px;padding:4px 0}
#material-dialog{width:min(1100px,96vw);padding:18px}#material-dialog::backdrop{background:#000c}.material-heading{display:flex;align-items:start;justify-content:space-between;gap:14px}.material-heading h2{margin:0}.material-heading .hint{margin:6px 0 14px}#material-scene{height:72vh;background:#303937;border-radius:8px;overflow:hidden}#material-scene>svg{width:100%;height:100%;display:block}#material-preview{border-color:var(--studio-accent);color:var(--studio-accent)}
/* Give the glass more room while retaining space for dimensions and controls. */
.design-area .stage{padding-right:12px;padding-left:50px;padding-bottom:55px}
@media(max-width:650px){.design-area .stage{padding-left:40px;padding-right:8px;padding-bottom:55px}}
/* Larger drawing area, with toolbar space preserved above the glass. */
.design-area .stage{height:88vh;min-height:640px;padding-left:42px;padding-right:6px;padding-bottom:48px}
@media(max-width:650px){.design-area .stage{height:80vh;min-height:480px;padding-left:36px;padding-right:5px;padding-bottom:48px}}
.quick-canvas-tools{padding:12px;margin-bottom:10px;background:var(--studio-panel);border:1px solid var(--studio-line);border-radius:8px}
.quick-heading,.quick-actions,#quick-selection{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.quick-heading{justify-content:space-between;margin-bottom:8px;font-size:13px}.quick-heading label{display:flex;gap:6px;align-items:center;margin:0;font-size:12px}.quick-heading input{width:auto;margin:0}.quick-actions>label{display:flex;align-items:center;gap:8px;margin:0;flex:1;min-width:180px}.quick-actions input{margin:0;width:100%}.quick-canvas-tools button{font-size:13px;padding:8px 10px}.quick-canvas-tools .hint{margin:8px 0 0}#quick-selection{border-top:1px solid var(--studio-line);padding-top:10px;margin-top:10px;font-size:12px}#quick-patterns{display:flex;flex-wrap:wrap;gap:6px;max-height:220px;overflow:auto;padding-top:10px}#quick-patterns button{display:flex;align-items:center;gap:6px}#quick-patterns img{width:45px;height:45px;object-fit:contain;background:#ddd}#quick-delete{color:#ffb5ac}#quick-size .canvas-scale{margin:0}
/* Icons share the label colour, including hover and disabled states. */
.action-icon{display:inline-block;vertical-align:middle;flex-shrink:0;margin-right:6px;pointer-events:none}
.has-action-icon{min-height:40px}
.quick-canvas-tools .has-action-icon{min-height:44px}
.guide-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.guide-nav button{font-size:12px;color:var(--studio-muted)}.guide-nav button[aria-current=step]{background:var(--studio-accent);color:#11180d;border-color:var(--studio-accent)}.design-guide h2{margin:8px 0 12px}.design-guide .pair{max-width:400px}.design-guide [data-guide-panel]>button{margin:8px 6px 0 0}.design-guide .hint{margin:8px 0}#guide-error{color:#ffb5ac;font-size:13px}#guide-error:empty{display:none}
/* Compact guide: navigation on one row and the active action on the next. */
.quick-canvas-tools{padding:8px 10px}
.quick-heading{margin-bottom:5px}
.guide-nav{margin-bottom:6px;gap:4px}
.guide-nav button{padding:5px 8px;min-height:32px}
.design-guide [data-guide-panel]{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.design-guide [data-guide-panel]>h2,.design-guide [data-guide-panel]>.hint{display:none}
.design-guide .pair{display:flex;gap:8px;max-width:none}
.design-guide .pair label{display:flex;align-items:center;gap:6px;margin:0;white-space:nowrap;font-size:12px}
.design-guide .pair input{width:86px;margin:0;padding:6px}
.design-guide [data-guide-panel]>button{margin:0;padding:6px 9px;min-height:34px}
#guide-text-tools .quick-actions>label{font-size:12px;min-width:150px}
#guide-text-tools .quick-actions input{max-width:190px;padding:6px}
#guide-text-tools .quick-actions button,#guide-pattern-tools>button{min-height:34px;padding:6px 9px}
#guide-pattern-tools{min-width:0}
#quick-hint{display:none}
#guide-error{margin:0}
@media(max-width:650px){.design-guide [data-guide-panel]{gap:5px}.design-guide .pair{gap:5px}.design-guide .pair input{width:70px}.guide-nav button{font-size:11px;padding:5px}.quick-heading{font-size:12px}}
/* Steps and current fields share a single row on wider workspaces. */
.design-guide{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.design-guide .guide-nav{margin:0;flex:0 0 auto}
.design-guide [data-guide-panel]{margin-left:auto;justify-content:flex-end}
.design-guide .guide-nav button{white-space:nowrap}
@media(max-width:650px){.design-guide{gap:6px}.design-guide [data-guide-panel]{margin-left:0;justify-content:flex-start}}
/* One top guide replaces the duplicate numbered steps above the canvas. */
.top-design-guide{padding:10px 20px;background:var(--studio-panel);border-bottom:1px solid var(--studio-line)}
.top-design-guide .guide-nav button{min-height:40px;padding:8px 12px}
.top-design-guide .guide-nav button::before{display:inline-block;margin-right:7px;font-size:18px;vertical-align:middle}
.top-design-guide [data-guide="0"]::before{content:'▦'}
.top-design-guide [data-guide="1"]::before{content:'T'}
.top-design-guide [data-guide="2"]::before{content:'◇'}
.top-design-guide [data-guide="3"]::before{content:'◉'}
.quick-canvas-tools .quick-heading{display:none}
.quick-canvas-tools:has(#quick-selection[hidden]){display:none}
.quick-canvas-tools #quick-selection{margin-top:0;padding-top:0;border-top:0}
@media(max-width:650px){.top-design-guide{padding:8px}.top-design-guide .guide-nav button{padding:6px 8px}}
/* Compact guide beside the canvas: fields left, navigation right. */
.design-area .top-design-guide{padding:7px 8px;margin-bottom:6px;gap:8px;border:1px solid var(--studio-line);border-radius:6px}
.design-area .top-design-guide [data-guide-panel]{order:0;margin-left:0;margin-right:auto;justify-content:flex-start}
.design-area .top-design-guide .guide-nav{order:1;margin-left:auto;gap:3px}
.design-area .top-design-guide .guide-nav button{min-height:32px;padding:5px 7px;font-size:11px}
.design-area .top-design-guide .guide-nav button::before{font-size:14px;margin-right:4px}
.design-area .top-design-guide [data-guide-panel]>button{min-height:32px;padding:5px 7px;font-size:11px}
.design-area .top-design-guide .pair input{width:72px;padding:5px}
.design-area .top-design-guide .pair label{font-size:11px}
.top-design-guide [data-guide="0.5"]::before{content:'□'}
#guide-margin-error{color:#ffb5ac;font-size:12px;margin:0}#guide-margin-error:empty{display:none}
.stage .canvas-dimensions{position:absolute;left:60px;bottom:49px;max-width:calc(100% - 80px);font-size:11px;line-height:1.4;color:var(--studio-muted);pointer-events:none;z-index:4}
@media(max-width:650px){.stage .canvas-dimensions{left:45px;max-width:calc(100% - 57px);font-size:10px}}
.stage .canvas-legend{position:absolute;right:25px;bottom:49px;max-width:42%;font-size:11px;line-height:1.4;text-align:right;color:var(--studio-muted);pointer-events:none;z-index:4}
.stage .canvas-dimensions{max-width:calc(55% - 60px)}
@media(max-width:650px){.stage .canvas-legend{right:12px;font-size:10px;max-width:40%}.stage .canvas-dimensions{max-width:calc(60% - 55px)}}
.workspace-visibility{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.workspace-visibility button{font-size:12px;padding:6px 10px;min-height:34px}
main.sidebar-hidden{grid-template-columns:minmax(0,1fr)}
/* Slim, always reachable sidebar handle and guide controls in their own bars. */
.sidebar-toggle-rail{position:sticky;top:8px;height:0;z-index:10;pointer-events:none}
.sidebar-collapse{position:absolute;left:278px;top:10px;width:24px;min-height:44px;padding:0;font-size:26px;pointer-events:auto;border-radius:5px}
.sidebar-toggle-rail.is-collapsed .sidebar-collapse{left:2px}
main.sidebar-hidden>.design-area{padding-left:32px}
.design-area .top-design-guide .guide-hide{order:2;margin-left:3px;font-size:11px;padding:5px 7px;min-height:32px}
.guide-show{font-size:12px;padding:7px 10px}
@media(max-width:900px){.sidebar-collapse{left:248px}}
@media(max-width:650px){.sidebar-collapse{left:2px;top:4px}.sidebar-toggle-rail{top:4px}.design-area{padding-left:32px}}
.design-area .guide-show{align-self:flex-end;margin:0 0 6px;padding:7px 12px;min-height:36px;border-color:var(--studio-accent);color:var(--studio-accent)}
.design-area .zoom-controls .guide-show{align-self:center;margin:0;padding:6px 8px;min-height:32px;font-size:11px;white-space:nowrap}
/* Keep the canvas toolbar flush with its top edge. */
.design-area .stage .canvas-toolbar{top:0;left:0;right:0;max-width:100%;padding:0;margin:0}
/* A consistent next action at the right edge of each active step. */
.design-area .top-design-guide [data-guide-panel]>#guide-size-done,
.design-area .top-design-guide [data-guide-panel]>#guide-margin-done,
.design-area .top-design-guide [data-guide-panel]>#guide-text-done,
.design-area .top-design-guide [data-guide-panel]>#guide-pattern-done,
.design-area .top-design-guide [data-guide-panel]>#guide-send{order:10;margin-left:auto;background:var(--studio-accent);color:#11180d;border-color:var(--studio-accent);white-space:nowrap}
.design-area .top-design-guide #guide-text-tools .quick-actions{flex-wrap:wrap}
.design-area .top-design-guide #guide-text-done{margin:0;min-height:34px;padding:6px 9px;background:var(--studio-accent);color:#11180d;border-color:var(--studio-accent);white-space:nowrap}
#quick-patterns{display:flex;flex-direction:column;gap:6px;max-height:250px}
.pattern-thumbnail-grid{display:grid;grid-template-columns:repeat(11,48px);gap:5px;max-width:100%}
#quick-patterns .pattern-thumbnail-grid button{width:48px;height:48px;min-height:48px;padding:3px;justify-content:center}
#quick-patterns .pattern-thumbnail-grid img{width:40px;height:40px;border-radius:3px}
.pattern-pages{display:flex;align-items:center;gap:8px;font-size:11px}
@media(max-width:900px){.pattern-thumbnail-grid{grid-template-columns:repeat(6,48px)}}
@media(max-width:450px){.pattern-thumbnail-grid{grid-template-columns:repeat(4,48px)}}
.quick-shape-grid{display:flex;flex-wrap:wrap;gap:5px;padding-bottom:6px;border-bottom:1px solid var(--studio-line)}
#quick-patterns .quick-shape-grid button{font-size:11px;padding:5px 7px;min-height:32px}
#quick-patterns{max-height:320px}
/* Sixteen previews per page with compact paging controls. */
.pattern-thumbnail-grid{grid-template-columns:repeat(8,48px)}
#quick-patterns .pattern-pages button{width:26px;height:26px;min-height:26px;padding:2px;font-size:13px;justify-content:center}
.pattern-pages{gap:5px}
@media(max-width:900px){.pattern-thumbnail-grid{grid-template-columns:repeat(6,48px)}}
@media(max-width:450px){.pattern-thumbnail-grid{grid-template-columns:repeat(4,48px)}}
/* Keep all previews on one horizontal row at every screen size. */
#quick-patterns .pattern-thumbnail-grid{display:flex;flex-wrap:nowrap;gap:5px;max-width:100%;overflow-x:auto;padding-bottom:4px}
#quick-patterns .pattern-thumbnail-grid button{flex:0 0 48px}
#guide-pattern-tools{max-width:100%}
/* Compact guided controls; wrap only when the available width requires it. */
.design-area .top-design-guide{gap:5px;padding:5px 6px}
.design-area .top-design-guide .guide-nav{gap:2px}
.design-area .top-design-guide .guide-nav button,
.design-area .top-design-guide [data-guide-panel]>button,
.design-area .top-design-guide .guide-hide,
.design-area .top-design-guide #guide-text-done,
.design-area .top-design-guide #guide-text-tools .quick-actions button,
.design-area .top-design-guide #guide-pattern-tools>button{min-height:30px;padding:4px 6px;font-size:11px}
.design-area .top-design-guide .guide-nav button::before{font-size:12px;margin-right:3px}
.design-area .top-design-guide .action-icon{width:14px;height:14px;margin-right:3px}
.design-area .top-design-guide [data-guide-panel],
.design-area .top-design-guide .pair,
.design-area .top-design-guide .quick-actions{gap:5px}
.design-area .top-design-guide .pair input{width:62px;padding:4px;font-size:12px}
.design-area .top-design-guide .pair label{gap:4px;font-size:11px}
.design-area .top-design-guide #guide-text-tools .quick-actions>label{min-width:120px;gap:4px;font-size:11px}
.design-area .top-design-guide #guide-text-tools .quick-actions input{width:125px;padding:4px;font-size:12px}
.design-area .top-design-guide #guide-no-text,
.design-area .top-design-guide #guide-skip-pattern{font-size:10px}
/* Compact navigation with selected-object controls directly on the canvas. */
.design-area .stage .canvas-toolbar{gap:4px}
.design-area .stage .canvas-toolbar button{min-height:28px;padding:4px 6px;font-size:11px}
.design-area .stage .canvas-toolbar .action-icon{width:14px;height:14px;margin-right:3px}
.design-area .stage .zoom-controls{padding:3px;gap:3px}
.design-area .stage .zoom-controls button{min-width:26px}
.design-area .stage .canvas-toolbar #zoom-label{font-size:11px}
.design-area .stage #quick-selection{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0;padding:4px 6px;border:1px solid var(--studio-line);border-radius:5px;background:#1d2321;font-size:11px}
.design-area .stage #quick-selection>span{display:none}
.design-area .stage #quick-size .canvas-scale{font-size:11px;padding:3px 5px;gap:4px}
.design-area .stage #quick-size input{width:90px}
.design-area .stage #quick-center{border-color:var(--studio-accent);color:var(--studio-accent)}
.quick-canvas-tools{display:none}
.design-area .stage .canvas-toolbar>.canvas-scale{margin:0;font-size:11px;padding:3px 5px;gap:4px}
.design-area .stage .canvas-toolbar>.canvas-scale input{width:90px}
.design-area .stage .canvas-toolbar>.zoom-controls{margin-right:0}
#material-scene{background:radial-gradient(ellipse at center,#f6f4ef,#d9d6cf);border:1px solid #c9c5bd}
.material-backgrounds{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}.material-backgrounds label{margin:0;font-size:12px}.material-backgrounds select{margin-top:3px;padding:6px}.material-backgrounds input{margin-top:3px;padding:5px;font-size:12px}.material-backgrounds [role=status]{font-size:12px;color:var(--studio-muted)}
.mobile-step-back,.mobile-object-dock{display:none}
@media(max-width:650px){
 body{padding-bottom:150px}main>aside:not([hidden]){position:fixed;inset:55px 0 0 0;z-index:20;overflow:auto;padding-bottom:160px}.sidebar-toggle-rail{z-index:25}.sidebar-collapse{position:fixed;top:8px;left:6px!important;width:44px;background:var(--studio-panel)}header{padding-left:58px}
 .design-area,.design-area .workspace,main.sidebar-hidden>.design-area{padding-left:6px;padding-right:6px;width:100%}
 .design-area .stage{height:65svh;min-height:380px;padding-top:100px}
 .design-area .top-design-guide .guide-nav{order:0;width:100%;justify-content:space-between}.guide-nav [data-guide]:not([aria-current]){display:none}.mobile-step-back{display:block}.design-area .top-design-guide [data-guide-panel]{order:1;width:100%}
 .design-area .top-design-guide button,.design-area .stage .canvas-toolbar button{min-height:40px!important}.design-area .top-design-guide input{font-size:16px!important}
 .mobile-object-dock{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:15;background:var(--studio-panel);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:6px;flex-wrap:wrap;border-top:1px solid var(--studio-line)}.mobile-object-dock:has(#quick-selection[hidden]){display:none}.mobile-object-dock #quick-selection{margin:0;padding:0;border:0;width:100%;gap:5px}.mobile-object-dock button{min-height:44px;font-size:12px;padding:6px}.mobile-object-dock #quick-selection>span{display:none}.mobile-object-dock label{margin:0;font-size:12px}.mobile-object-dock select{font-size:16px}
 .canvas-toolbar [data-pan],.canvas-toolbar #clipboard-copy,.canvas-toolbar #clipboard-paste{display:none}
 #material-scene{height:55svh}
}
.stage .pen-mode-toggle{position:absolute;z-index:12;font-size:12px;min-height:34px;padding:5px 9px;background:#202824;border:1px solid #e7ad53;color:#fff;border-radius:6px;box-shadow:0 2px 8px #0005}
.stage .canvas-file-menu{position:absolute;right:5px;top:4px;z-index:14;font-size:12px}
.canvas-file-menu>summary{cursor:pointer;list-style:none;background:#202824;border:1px solid var(--studio-line);border-radius:5px;padding:7px 9px}
.canvas-file-menu>summary::-webkit-details-marker{display:none}
.canvas-file-actions{position:absolute;right:0;top:100%;margin-top:4px;width:220px;display:grid;gap:4px;padding:6px;background:var(--studio-panel);border:1px solid var(--studio-line);box-shadow:0 5px 20px #0008;border-radius:6px}
.canvas-file-actions button{text-align:left;font-size:12px;padding:9px}
.design-area .stage .canvas-toolbar{padding-right:150px}
.stage .canvas-window-settings{position:absolute;right:6px;top:44px;width:min(320px,calc(100% - 12px));max-height:calc(100% - 105px);overflow:auto;z-index:13;background:var(--studio-panel);border:1px solid var(--studio-line);border-radius:7px;box-shadow:0 5px 20px #0008;padding:12px}
.window-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}.window-settings-heading button{padding:3px 9px;font-size:20px}.canvas-window-settings>section{padding:10px 0 0;border:0}.canvas-window-settings label{font-size:12px}
.clipboard-menu{position:relative;align-self:center;font-size:11px}
.clipboard-menu>summary{list-style:none;cursor:pointer;padding:6px;border:1px solid var(--studio-line);border-radius:5px;background:#1d2321}
.clipboard-menu>summary::-webkit-details-marker{display:none}
.clipboard-actions{position:absolute;top:100%;right:0;z-index:16;display:grid;min-width:110px;padding:5px;gap:4px;background:var(--studio-panel);border:1px solid var(--studio-line);border-radius:5px}
.design-area .stage .clipboard-actions #clipboard-copy,.design-area .stage .clipboard-actions #clipboard-paste{display:block}
.film-placement-settings{margin-top:14px;border-top:1px solid var(--studio-line)}
.film-placement-settings>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;padding:12px 0;font-size:14px}
.film-placement-settings>summary::-webkit-details-marker{display:none}
.film-placement-settings>summary::after{content:'+';font-size:22px;color:var(--studio-accent)}
.film-placement-settings[open]>summary::after{content:'−'}
.film-placement-content{padding:6px 0}
.design-area .stage .canvas-toolbar #clipboard-copy.direct-duplicate{display:inline-flex;align-items:center}
#canvas.copy-feedback [data-selection][stroke],#canvas.copy-feedback [data-selection] [stroke]{stroke:#65e59b!important}
#canvas.copy-feedback [data-resize]{stroke:#65e59b!important;fill:#c5ffdc!important}
.names-size-warning{color:#ff9f98;font-size:12px;line-height:1.5;border-left:3px solid #e65d53;padding:7px 10px;background:#491f1f}

/* Allow continuous mouse and touch dragging of range controls. */
input[type="range"]{touch-action:none;cursor:grab}
input[type="range"]:active{cursor:grabbing}

/* Compact mobile design shelf and guidance; canvas supports two-finger zoom. */
.template-save-actions{display:inline-flex;gap:6px;vertical-align:bottom;margin-bottom:8px}
.template-save-actions #save-template{background:var(--studio-accent);color:#11180d;font-weight:600}
.template-empty{align-self:center;max-width:240px;margin:0}
@media(max-width:650px){
 .template-save-actions{display:flex;width:100%;gap:6px}
 .template-save-actions button{flex:1;min-width:0;white-space:nowrap;font-size:11px;padding:8px 4px;min-height:40px;margin:0}
 .design-area .stage .canvas-toolbar #zoom-out,.design-area .stage .canvas-toolbar #zoom-in,.design-area .stage .canvas-toolbar #zoom-label{display:none}
 .design-area .top-design-guide{gap:4px;padding:6px}
 .design-area .top-design-guide .guide-nav{width:auto;flex:0 0 auto;gap:3px;margin:0}
 .design-area .top-design-guide [data-guide-panel]{width:auto;flex:1 1 220px;margin:0;gap:4px}
 .design-area .top-design-guide .pair{gap:4px}
 .design-area .top-design-guide .pair label{font-size:11px;gap:3px}
 .design-area .top-design-guide .pair input{width:56px;padding:5px 3px}
 .design-area .top-design-guide button{font-size:11px;padding:5px!important}
 .design-area .top-design-guide .guide-nav button::before{display:none}
}

@media(max-width:650px){
 .design-area .top-design-guide{display:grid;grid-template-columns:1fr auto}
 .design-area .top-design-guide .guide-nav{grid-column:1;grid-row:1;justify-content:flex-start}
 .design-area .top-design-guide .guide-hide{grid-column:2;grid-row:1;margin:0}
 .design-area .top-design-guide [data-guide-panel]{grid-column:1/-1;grid-row:2;width:100%;justify-content:flex-start}
 .design-area .top-design-guide #guide-size-done{margin-left:auto}
}

/* Phone workspace: fixed-height preview, ordinary scrolling controls below. */
@media(max-width:650px){
 body{padding-bottom:0}
 header{padding:10px 12px;min-height:44px}
 .sidebar-toggle-rail,.top-design-guide,.guide-show,.quick-canvas-tools{display:none!important}
 .design-area .workspace{display:flex;gap:8px;padding:0;position:static}
 .design-area .stage{position:sticky;top:0;z-index:16;height:52svh;min-height:300px;max-height:560px;padding:55px 8px 38px 30px;border:1px solid var(--studio-line);border-radius:8px}
 .design-area .workspace #designer-sidebar{position:static;inset:auto;display:block;width:100%;padding:12px;overflow:visible;order:0;border:0}
 .design-area .stage .canvas-toolbar{left:6px;right:auto;top:5px;max-width:calc(100% - 100px);padding:0;justify-content:flex-start;gap:3px}
 .design-area .stage .canvas-toolbar .zoom-controls,.design-area .stage .canvas-toolbar #redo{display:none}
 .design-area .stage>#undo{position:absolute;right:6px;top:5px;z-index:18;min-height:36px;font-size:11px;padding:6px}
 .stage .canvas-file-menu{right:6px;top:45px}
 .stage .canvas-file-menu>summary{font-size:11px;padding:6px}
 .stage .canvas-file-actions #zoom-fit{display:flex}
 .design-area .stage .move-vertical{top:80px;bottom:40px;left:4px}
 .design-area .stage .move-horizontal{left:30px;right:8px;bottom:6px}
 .stage .canvas-dimensions,.stage .canvas-legend{font-size:8px;bottom:28px;top:auto}
 .stage .mobile-object-dock{position:absolute;left:auto;right:8px;top:85px;bottom:auto;width:150px;max-width:48%;z-index:17;display:flex;flex-direction:column;padding:6px;gap:5px;border:1px solid var(--studio-line);border-radius:6px;background:#151c18ed}
 .mobile-object-dock:has(#quick-selection[hidden]){display:none}
 .mobile-object-dock #quick-selection{display:flex;flex-wrap:wrap;gap:4px;width:100%}
 .mobile-object-dock #quick-size,.mobile-object-dock #quick-copy,.mobile-object-dock #quick-rotate{display:none}
 .mobile-object-dock button{flex:1;min-height:34px;padding:4px;font-size:11px}
 .mobile-object-dock .canvas-scale{width:100%;display:flex;flex-wrap:wrap;padding:3px;gap:3px}
 .mobile-object-dock .canvas-scale input{width:100%;margin:3px 0;min-height:28px}
 #designer-sidebar .canvas-color{display:flex;gap:8px;align-items:center;margin-top:14px}
 #designer-sidebar .canvas-color select{flex:1}
 .design-area .stage #canvas{max-height:none}
 body>.saved-designs{padding:8px 10px}
 body>.saved-designs>label{margin:4px 0;width:100%}
 .design-area .send-panel{margin:0 8px 12px}
}
@media(max-width:650px){.stage .canvas-file-menu{z-index:22}.stage .canvas-window-settings{z-index:23}}

/* Minimal mobile selection controls. */
@media(max-width:650px){
 .stage .mobile-object-dock{inset:0;max-width:none;width:auto;padding:0;border:0;border-radius:0;background:transparent;pointer-events:none}
 .stage .mobile-object-dock #quick-selection{position:absolute;top:82px;right:8px;width:auto;margin:0;padding:0;background:transparent;pointer-events:auto}
 .stage .mobile-object-dock .canvas-scale{position:absolute;top:128px;right:8px;width:140px;max-width:45%;padding:0;margin:0;border:0;border-radius:0;background:transparent;font-size:0;pointer-events:auto}
 .stage .mobile-object-dock .canvas-scale #scale-value{display:none}
 .stage .mobile-object-dock .canvas-scale input{width:100%;margin:0;padding:0;background:transparent;border:0;box-shadow:none;min-height:32px}
}
@media(max-width:650px){aside #multi-tools{position:static;margin:0 0 16px;max-width:100%;transform:none}aside #multi-tools input{min-height:40px}}
/* Best-effort Print Screen notice; absent during ordinary editing and export. */
body.screenshot-mark::after{content:'VINYL FILMUR NORÐURLANDS';position:fixed;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10%;font-size:clamp(32px,7vw,100px);font-weight:700;line-height:1.25;color:#fff;background:#101713db;pointer-events:none;z-index:2147483647;}