/* Print Buddy: the online designer (design.html only; linked after site.css).
   DESIGNER 3 (22 Oct 2026, Junaid: "think like Apple is designing a UI and then design the UI and UX for the online designer").
   Rewritten from scratch on the site's tokens (--primary, --ink, --panel, --tint, --line, --muted, --ring, --card-sh, one corner
   --radius, small parts --radius-sm, weights 400 to 600, Montserrat). docs/STYLE-GUIDE.md "Designer 3" is the recipe.
   Order: the start page; the app shell (bar, tools, panel, stage, inspector); panel contents; inspector controls; the stage's
   floating parts (selection bar, pages, view, drawing bar); menus and popovers; Preview, Check and Finish, Start From Scratch;
   the font and colour pickers; tablets; phones. */

/* ======================================================================== the start page */
.dz{padding-top:22px;padding-bottom:60px}
.dz-pick{padding:0 0 64px}
.dz-intro{max-width:780px;margin:34px auto 30px;text-align:center;display:grid;justify-items:center}
.dz-intro .eyebrow{margin:0}
.dz-intro h1{font-size:40px;font-weight:500;letter-spacing:-.6px;line-height:1.12;margin:10px 0 14px;text-wrap:balance}
.dz-intro h1 .nw{white-space:nowrap}
.dz-intro>p{font-size:15px;line-height:1.6;color:var(--muted);max-width:600px;margin:0}
.dz-staffnote{margin:18px 0 0;font-size:12px;font-weight:500;line-height:1.45;color:var(--accent);background:var(--accent-tint,#F6EEEA);border-radius:var(--radius-sm);padding:6px 12px}
.dz-starts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1080px;margin:0 auto 44px}
.dz-start{display:grid;align-content:start;justify-items:start;gap:8px;text-align:left;background:#fff;border:0;border-radius:var(--radius);box-shadow:var(--card-sh);padding:24px 24px 20px;font:inherit;color:var(--ink);text-decoration:none;cursor:pointer;transition:box-shadow .2s,transform .2s}
.dz-start:hover{box-shadow:0 0 0 2px rgba(var(--prgb),.14),0 10px 28px rgba(25,32,38,.10);transform:translateY(-2px)}
.dz-start:focus-visible{outline:0;box-shadow:var(--ring)}
.dz-start-ic{width:52px;height:52px;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center;margin:0 0 6px}
.dz-start b{font-size:17px;font-weight:500}
.dz-start>span:not(.dz-start-ic){font-size:13px;line-height:1.55;color:var(--muted)}
.dz-start em{font-style:normal;display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:500;color:var(--primary)}
.dz-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 16px}
.dz-sec-h h2{font-size:21px;font-weight:500;margin:0}
.dz-sec-h span{font-size:12.5px;color:var(--muted)}
.dz-mine{margin:0 0 40px}
.dz-mine-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.dz-minecard{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;background:#fff;border-radius:var(--radius);box-shadow:var(--card-sh);padding:10px 8px 10px 10px}
.dz-mine-im{display:grid;place-items:center;width:72px;height:56px;background:var(--panel);border-radius:var(--radius-sm);overflow:hidden}
.dz-mine-im img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(25,32,38,.18))}
.dz-mine-t{min-width:0;display:grid;gap:2px}
.dz-mine-t a{color:var(--ink);text-decoration:none;display:block;min-width:0;overflow:hidden}
.dz-mine-k{font-size:10.5px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-mine-im .dz-scr-art{width:68px;height:48px;filter:none}
.dz-mine-t b{font-size:13.5px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-mine-t small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-minecard .dz-ib{width:32px;height:32px;flex:none;align-self:center;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:none;transition:background .15s,color .15s}
.dz-minecard .dz-ib:hover{background:#FDECEA;color:var(--danger)}
.dz-minecard .dz-ib:focus-visible{outline:0;box-shadow:var(--ring)}
.dz-prodbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 22px;scroll-margin-top:90px}
.dz-famnav{display:inline-flex;gap:2px;background:var(--panel);border-radius:var(--radius);padding:3px;flex-wrap:wrap}
.dz-famnav button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:0;border-radius:var(--radius-sm);background:transparent;font:inherit;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.dz-famnav button span{font-size:11.5px;color:var(--muted);font-weight:400}
.dz-famnav button:hover{color:var(--ink)}
.dz-famnav button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(25,32,38,.08),0 0 0 .5px rgba(25,32,38,.06)}
.dz-find{display:flex;align-items:center;gap:8px;width:280px;max-width:100%;height:40px;padding:0 12px;border-radius:var(--radius);background:var(--panel);color:var(--muted);margin:0;cursor:text}
.dz-find:focus-within{background:#fff;box-shadow:var(--ring)}
.dz-find input{border:0;background:transparent;height:100%;flex:1;min-width:0;font:inherit;font-size:13.5px;color:var(--ink);padding:0}
.dz-find input:focus{outline:0}
.dz-fam{margin:0 0 38px}
.dz-fam[hidden],.dz-prod[hidden]{display:none}
.dz-prods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 18px}
.dz-prod{display:grid;gap:10px;align-content:start;color:var(--ink);text-decoration:none}
.dz-prod-im{display:block;aspect-ratio:4/3;background:#EBEDEF;border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s}
.dz-prod-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.dz-prod:hover .dz-prod-im{box-shadow:0 0 0 2px rgba(var(--prgb),.14),0 8px 22px rgba(25,32,38,.10)}
.dz-prod:hover .dz-prod-im img{transform:scale(1.03)}
.dz-prod:focus-visible{outline:0}.dz-prod:focus-visible .dz-prod-im{box-shadow:var(--ring)}
.dz-prod-t{display:grid;gap:2px}
.dz-prod-t b{font-size:14px;font-weight:500;line-height:1.3}
.dz-prod-t small{font-size:12px;color:var(--muted);line-height:1.4}
.dz-prod-n{font-size:12px;font-weight:500;color:var(--primary)}
.dz-none{color:var(--muted);padding:20px 0}
/* desktop (22 Oct 2026, Junaid: "on desktop it should be full width"): the words on the left, the three ways in as rows on the
   right, across the whole page width */
@media (min-width:1001px){
  .dz-heroband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center;margin:30px 0 52px}
  .dz-intro{text-align:left;justify-items:start;margin:0;max-width:none}
  .dz-intro h1{font-size:46px;letter-spacing:-.8px;margin:12px 0 16px}
  .dz-intro>p{max-width:520px;font-size:15.5px}
  .dz-starts{grid-template-columns:1fr;max-width:none;margin:0;gap:12px}
  .dz-start{grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"ic t go" "ic d go";column-gap:18px;row-gap:3px;align-items:center;padding:20px 22px}
  .dz-start-ic{grid-area:ic;margin:0}
  .dz-start b{grid-area:t}
  .dz-start>span:not(.dz-start-ic){grid-area:d}
  .dz-start em{grid-area:go;margin:0;white-space:nowrap}
  .dz-staffnote{display:inline-block}
}
@media (max-width:1240px){.dz-prods{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1000px){.dz-prods{grid-template-columns:repeat(3,minmax(0,1fr))}.dz-starts{grid-template-columns:1fr;max-width:620px}.dz-start{grid-template-columns:52px minmax(0,1fr);column-gap:16px;padding:18px}.dz-start-ic{grid-row:span 3;margin:0}.dz-start em{margin-top:2px}}
@media (max-width:700px){.dz-prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.dz-intro{margin:18px auto 22px}.dz-intro h1{font-size:28px}.dz-intro>p{font-size:14px}.dz-prodbar{flex-direction:column;align-items:stretch}.dz-famnav{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.dz-famnav::-webkit-scrollbar{display:none}.dz-famnav button{flex:none}.dz-find{width:auto}}
@media (max-width:420px){.dz-start{grid-template-columns:42px minmax(0,1fr);column-gap:14px;padding:16px 16px 14px}.dz-start-ic{width:42px;height:42px}.dz-start-ic svg{width:22px;height:22px}.dz-start b{font-size:15.5px}.dz-start>span:not(.dz-start-ic){font-size:12.5px}.dz-starts{gap:10px;margin-bottom:32px}} body.dz-app .topbar,body.dz-app .site-head,body.dz-app .chrome-ph,body.dz-app footer.ft2,body.dz-app .totop,body.dz-app .chatw{display:none!important}
body.dz-app{background:#E9ECEE;overflow:hidden}
html:has(body.dz-app){overflow:hidden}
body.dz-app main.dz{max-width:none;width:auto;margin:0;padding:0;position:fixed;inset:0;z-index:40;overflow:hidden}
body.dz-noscroll{overflow:hidden}
.dz3{--dz-bar:56px;--dz-tabs:72px;--dz-pw:304px;--dz-iw:292px;--dz-stage:#E9ECEE;--dz-hair:rgba(25,32,38,.09);--dz-float:0 0 0 .5px rgba(25,32,38,.08),0 2px 6px rgba(25,32,38,.06),0 12px 32px rgba(25,32,38,.14);height:100%;display:grid;grid-template-rows:var(--dz-bar) minmax(0,1fr);color:var(--ink);font-size:13px}
.dz3[hidden]{display:none}
:where(.dz3) button:where(:not(.btn)){font:inherit;color:inherit}
.dz3 .btn{font-family:inherit}
.dz3 :focus-visible{outline:0;box-shadow:var(--ring)}
/* the title bar: back, the product and its size, undo and redo with the saved state, Preview and Check and Finish */
.dz-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:0 12px 0 8px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--dz-hair);position:relative;z-index:20}
.dz-bar-l{display:flex;align-items:center;gap:8px;min-width:0}
.dz-doc{display:flex;align-items:center;gap:8px;min-width:0}
.dz-doc-n{font-size:15px;font-weight:500;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px}
.dz-doc-size{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px 0 10px;border:0;border-radius:var(--radius-sm);background:transparent;font-size:12.5px;color:var(--muted);white-space:nowrap;cursor:pointer}
.dz-doc-size:hover:not(:disabled){background:var(--panel);color:var(--ink)}
.dz-doc-size.one{cursor:default}.dz-doc-size.one svg{display:none}
.dz-bar-c{display:flex;align-items:center;gap:2px}
.dz-saved{display:inline-flex;align-items:center;gap:5px;min-width:76px;padding-left:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.dz-saved svg{color:var(--ok,var(--success))}
.dz-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dz-bar-r{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.dz-finish{height:36px;padding:0 16px;gap:8px;font-size:13px;white-space:nowrap}
/* buttons the studio shares */
.dz3 .dz-ib,.dz-menu .dz-ib,.dz-modal .dz-ib{width:34px;height:34px;flex:none;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;transition:background .15s}
.dz3 .dz-ib:hover,.dz-modal .dz-ib:hover{background:var(--panel)}
.dz3 .dz-ib:disabled{opacity:.35;cursor:default;background:transparent}
.dz-btn2{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 13px;border:0;border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s}
.dz-btn2:hover:not(:disabled){background:var(--tint)}
.dz-btn2:disabled{opacity:.45;cursor:default}
.dz-btn2 svg{flex:none;color:var(--icon,var(--ink))}
.dz-btn2.sm{height:30px;padding:0 10px;font-size:12px}
.dz-btn2.wide{width:100%}
.dz-btn2.danger{color:var(--danger)}.dz-btn2.danger svg{color:var(--danger)}
.dz-btn2.danger:hover{background:#FDECEA}
.dz-btn2.dark{background:rgba(255,255,255,.12);color:#fff}.dz-btn2.dark svg{color:#fff}.dz-btn2.dark:hover{background:rgba(255,255,255,.2)}
/* the body: tools, panel, stage, inspector */
.dz-body{display:grid;grid-template-columns:var(--dz-tabs) var(--dz-pw) minmax(0,1fr) var(--dz-iw);min-height:0;position:relative}
.dz3.dz-collapsed .dz-body{grid-template-columns:var(--dz-tabs) 0 minmax(0,1fr) var(--dz-iw)}
.dz3.dz-collapsed .dz-panel{visibility:hidden;border:0}
/* the tools: icon above a short name, the open one on a tint tile with its icon in the theme colour (never a bar down the side) */
.dz-tabs{display:flex;flex-direction:column;gap:2px;padding:10px 8px;background:#fff;border-right:1px solid var(--dz-hair);overflow-y:auto;scrollbar-width:none;min-height:0}
.dz-tabs::-webkit-scrollbar{display:none}
.dz-tabs button{display:grid;justify-items:center;gap:5px;padding:10px 2px 8px;border:0;border-radius:var(--radius);background:transparent;color:var(--muted);font-size:10.5px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.dz-tabs button svg{color:var(--icon,var(--ink));opacity:.78;transition:color .15s,opacity .15s}
.dz-tabs button:hover{background:var(--panel);color:var(--ink)}
.dz-tabs button:hover svg{opacity:1}
.dz-tabs button[aria-selected="true"]{background:var(--tint);color:var(--ink);font-weight:500}
.dz-tabs button[aria-selected="true"] svg{color:var(--primary);opacity:1}
/* the panel */
.dz-panel{display:flex;flex-direction:column;min-height:0;min-width:0;background:#fff;border-right:1px solid var(--dz-hair);overflow:hidden}
.dz-grab{display:none}
.dz-panel-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 12px 10px 18px;flex:none}
.dz-panel-h h3{font-size:16px;font-weight:500;margin:0;letter-spacing:-.1px}
.dz-panel-h p{font-size:12px;color:var(--muted);margin:3px 0 0;line-height:1.4}
.dz-panel-b{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 18px 40px;overscroll-behavior:contain;scrollbar-width:thin}
.dz-pane{display:none}.dz-pane.on{display:block}
.dz-sub{display:none}.dz-sub.on{display:block}
/* the stage: the page on plain grey with a soft paper shadow */
.dz-stage{position:relative;min-width:0;min-height:0;background:var(--dz-stage);container-type:inline-size;overflow:hidden}
.dz-canvaswrap{position:absolute;inset:0;overflow:auto;display:grid;place-items:center;padding:44px 56px 116px;scrollbar-width:thin}
.dz3.dz-1side .dz-canvaswrap{padding-bottom:84px}
.dz-canvaswrap canvas{display:block;touch-action:none}
/* the stage owns every pinch: two fingers zoom the design, never the browser page (23 Oct 2026) */
.dz-stage{touch-action:pan-x pan-y}
#dzStudio canvas,#dzStudio img,#dzQL img,#dzFinishModal img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none}
.dz-canvaswrap{place-items:safe center}
.dz-canvaswrap.dz-hand{cursor:grab}
.dz-canvaswrap.dz-hand .upper-canvas{cursor:grab!important}
.dz-canvaswrap.dz-panning,.dz-canvaswrap.dz-panning .upper-canvas{cursor:grabbing!important}
.dz-canvasbox{display:block;box-shadow:0 1px 2px rgba(25,32,38,.08),0 14px 44px rgba(25,32,38,.18);background:#fff;line-height:0}
.dz-canvaswrap .canvas-container{margin:0 auto}
.dz-canvaswrap.dz-dropping{box-shadow:inset 0 0 0 3px rgba(var(--prgb),.35)}
.dz-err{padding:24px;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dz3.dz-drawing .dz-canvasbox{box-shadow:0 0 0 2px rgba(var(--prgb),.4),0 14px 44px rgba(25,32,38,.18)}
/* the inspector */
.dz-insp{min-height:0;overflow-y:auto;overflow-x:hidden;background:#fff;border-left:1px solid var(--dz-hair);overscroll-behavior:contain;scrollbar-width:thin}

/* ======================================================================== panel contents */
.dz-h{display:block;font-size:12.5px;font-weight:500;color:var(--ink);margin:22px 0 9px;letter-spacing:0;text-transform:none}
.dz-h small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:2px;line-height:1.4}
.dz-hint{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0}
.dz-note{font-size:12px;line-height:1.5;color:var(--ink);background:var(--panel);border-radius:var(--radius);padding:9px 12px;margin:0 0 12px}
.dz-foot{font-size:12px;line-height:1.5;color:var(--muted);margin:16px 0 0}
.dz-search{position:relative;display:block;margin:0}
.dz-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.dz3 .dz-search input,.dz-modal .dz-search input{width:100%;height:38px;border:0;border-radius:var(--radius);background:var(--panel);padding:0 12px 0 34px;font:inherit;font-size:13px;color:var(--ink)}
.dz3 .dz-search input:focus,.dz-modal .dz-search input:focus{outline:0;background:#fff;box-shadow:var(--ring)}
/* chips: pills on the panel grey, tint with the ring when chosen */
.dz-chips,.dz-scrollchips,.dz3 .dzg-chips{display:flex;flex-wrap:wrap;gap:6px}
.dz-scrollchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:10px -18px 0;padding:2px 18px 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent)}
.dz-scrollchips::-webkit-scrollbar{display:none}
.dz-chips button,.dz-scrollchips button,.dz3 .dzg-chips button{flex:none;height:30px;padding:0 12px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font-size:12px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .15s}
.dz-chips button:hover,.dz-scrollchips button:hover,.dz3 .dzg-chips button:hover{background:var(--tint)}
.dz-chips button.on,.dz-scrollchips button[aria-pressed="true"],.dz3 .dzg-chips button.on{background:var(--tint);box-shadow:var(--ring);font-weight:500}
/* Designs: the blank page, the gallery's search and folded filters, the designs two across */
.dz-blankrow{margin:0 0 12px}
.dz-blank{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px 8px 8px;border:0;border-radius:var(--radius);background:var(--panel);text-align:left;cursor:pointer;transition:background .15s}
.dz-blank:hover{background:var(--tint)}
.dz-blank-im{width:40px;height:40px;flex:none;border-radius:var(--radius-sm);background:#fff;display:grid;place-items:center;color:var(--primary);box-shadow:inset 0 0 0 1px var(--line)}
.dz-blank b{display:block;font-size:13px;font-weight:500}
.dz-blank small{display:block;font-size:11.5px;color:var(--muted)}
.dz3 .dzg-tools{display:flex;gap:8px;margin:0 0 4px}
.dz3 .dzg-tools .dz-search{flex:1;min-width:0}
.dz3 .dzg-tools .dzg-q{display:block;width:100%;max-width:none;height:38px;border:0;border-radius:var(--radius);background:var(--panel);padding:0 12px 0 34px;font:inherit;font-size:13px;color:var(--ink)}
.dz3 .dzg-tools .dzg-q:focus{outline:0;background:#fff;box-shadow:var(--ring)}
.dzg-fbtn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;border:0;border-radius:var(--radius);background:var(--panel);font-size:12.5px;font-weight:500;cursor:pointer;flex:none}
.dzg-fbtn:hover{background:var(--tint)}
.dzg-fbtn[aria-expanded="true"]{background:var(--tint)}
.dzg-fn{font-style:normal;min-width:18px;height:18px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-size:10.5px;font-weight:500;display:inline-grid;place-items:center;padding:0 5px}
.dzg-filters{display:grid;gap:7px;padding:4px 0 6px}
.dzg-filters[hidden]{display:none}
.dzg-lbl{font-size:11.5px;font-weight:500;color:var(--muted);margin:6px 0 0}
.dz3 .dzg-cols{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.dz3 .dzg-cols button{width:26px;height:26px;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(25,32,38,.12)}
.dz3 .dzg-cols button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary)}
.dz3 .dzg-cols .dzg-any{width:auto;padding:0 10px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font-size:11.5px;font-weight:500;color:var(--ink)}
.dz3 .dzg-count{display:block;font-size:11.5px;color:var(--muted);margin:8px 0 8px}
.dz3 .dzg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
.dz3 .dzg-t{display:grid;gap:3px;justify-items:stretch;text-align:left;padding:0;border:0;border-radius:var(--radius);background:transparent;cursor:pointer}
.dz3 .dzg-t .dz-tplimg{display:block;aspect-ratio:1;background:var(--panel);border:0;border-radius:var(--radius);padding:9px;margin:0 0 5px;overflow:hidden;transition:background .15s,box-shadow .15s}
.dz3 .dzg-t .dz-tplimg img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;box-shadow:none;border:0;border-radius:0;background:transparent;filter:drop-shadow(0 1px 3px rgba(25,32,38,.2))}
.dz3 .dzg-t:hover .dz-tplimg{background:var(--tint)}
.dz3 .dzg-t.on .dz-tplimg{background:var(--tint);box-shadow:var(--ring)}
.dz3 .dzg-t .dzg-n{font-size:12px;font-weight:500;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz3 .dzg-t .dzg-p{font-size:11px;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a card's words never push past the card (6 Nov 2026: a grid item's min-content width is its whole nowrap line, so "Thank You Card, English Suite" ran into the next card) */
.dz3 .dzg-t>*{min-width:0;max-width:100%}
/* Details: one field under another, labels above, panel-grey boxes that turn white with the ring */
.dz-form{display:grid;gap:12px}
.dz-fld{display:grid;gap:6px;margin:0}
.dz-fld>span{font-size:12px;font-weight:500;color:var(--ink)}
.dz-fld.unused>span{color:var(--muted);font-weight:500}
.dz3 input[type=text],.dz3 input[type=number],.dz3 textarea,.dz3 select:not(.raw),.dz-menu input[type=number],.dz-modal input[type=number]{width:100%;min-width:0;height:38px;border:0;border-radius:var(--radius);background-color:var(--panel);padding:0 11px;font:inherit;font-size:13px;font-weight:400;color:var(--ink);box-shadow:none}
.dz3 textarea{height:auto;min-height:64px;padding:9px 11px;line-height:1.45;resize:vertical}
.dz3 select:not(.raw){padding-right:30px;background-position:right 10px center}
.dz3 input:focus,.dz3 textarea:focus,.dz3 select:focus,.dz-menu input:focus,.dz-modal input:focus{outline:0;background-color:#fff;box-shadow:var(--ring);border:0}
.dz3 input::placeholder,.dz3 textarea::placeholder{color:#9AA5AE}
.dz-guests{background:var(--panel);border-radius:var(--radius);padding:10px 12px;margin:0 0 6px}
html.dzlb .dz-guests{margin:0} /* the Lightbox pane spaces its blocks with its own gap */
.dz-guests .dz-h{margin-top:2px}
.dz3 .dz-guests textarea{background:#fff}
.dz-guests .dz-row{display:flex;align-items:center;gap:10px;margin-top:8px;padding:0;background:none}
.dz-guests .btn-ghost{min-height:32px;height:auto;padding:4px 12px;font-size:12px;line-height:1.25}
.dz-gnote{font-size:12px;color:var(--muted)}
/* Text: big type buttons, combinations, effects */
.dz-addtext{display:grid;gap:8px}
.dz-addtext button{display:block;width:100%;text-align:left;border:0;border-radius:var(--radius);background:var(--panel);padding:12px 14px;cursor:pointer;color:var(--ink);transition:background .15s}
.dz-addtext button:hover{background:var(--tint)}
.dz-addtext b{font-size:21px;font-weight:500;letter-spacing:-.3px}
.dz-addtext span{font-size:15px;font-weight:500}
.dz-addtext small{font-size:12.5px;color:var(--ink)}
.dz-pairs,.dz-combos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dz-pair,.dz-combo{display:grid;gap:3px;align-content:center;text-align:left;border:0;border-radius:var(--radius);background:var(--panel);padding:11px 10px;cursor:pointer;color:var(--ink);min-height:62px;min-width:0;transition:background .15s}
.dz-pair:hover,.dz-combo:hover{background:var(--tint)}
.dz-pair.on{background:var(--tint);box-shadow:var(--ring)}
.dz-pair b,.dz-combo b{font-size:16px;font-weight:500;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-pair span,.dz-combo span{font-size:11px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-combo{text-align:center;justify-items:center}.dz-combo b{font-size:17px;max-width:100%}.dz-combo span{max-width:100%}
[data-pv]{transition:opacity .2s}
.dz-styles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dz-styles button{min-height:58px;padding:6px 8px;border:0;border-radius:var(--radius);background:var(--panel);cursor:pointer;display:grid;place-items:center;font-size:16px;color:var(--primary);transition:background .15s}
.dz-styles button:hover{background:var(--tint)}
.st-outline{color:transparent;-webkit-text-stroke:1px var(--primary);font-weight:500;letter-spacing:.5px}
.st-shadow{font-weight:500;text-shadow:1px 2px 3px rgba(0,0,0,.28)}
.st-spaced{font-size:11px;font-weight:500;letter-spacing:3px;color:var(--accent-ink,var(--accent))}
.st-script{font-size:21px}
/* Elements: shapes and icons as tiles, drawings and pictures three across with a name */
.dz-shapes,.dz-icons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.dz-shapes button,.dz-icons button{aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:var(--radius-sm);background:var(--panel);color:var(--icon,var(--ink));cursor:grab;transition:background .15s}
.dz-shapes button:hover,.dz-icons button:hover{background:var(--tint)}
.dz-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dz-art{display:grid;gap:5px;justify-items:stretch;border:0;border-radius:var(--radius);background:transparent;padding:0;cursor:grab;text-align:left}
.dz-art img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--panel);border-radius:var(--radius);padding:9px;box-sizing:border-box;transition:background .15s}
.dz-art:hover img{background:var(--tint)}
.dz-art span{font-size:10.5px;font-weight:500;color:var(--ink);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-qr{display:flex;gap:8px}
.dz-qr input{flex:1}
.dz-qr .dz-btn2{height:38px}
/* Uploads: drop zones, then the files two across */
.dz-drop{display:grid;justify-items:center;text-align:center;gap:6px;border:1.5px dashed var(--tint-dk);border-radius:var(--radius);padding:18px 16px;margin:0 0 10px;background:#fff;transition:background .15s,border-color .15s}
.dz-drop.drag{border-color:rgba(var(--prgb),.55);background:var(--tint)}
.dz-drop-ic{width:40px;height:40px;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center;margin-bottom:2px}
.dz-drop b{font-size:13.5px;font-weight:500}
.dz-drop>span:not(.dz-drop-ic){font-size:12px;line-height:1.5;color:var(--muted)}
.dz-drop .dz-btn2{margin-top:4px}
.dz-drop small{font-size:11.5px;color:var(--muted)}
.dz-uploads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 0}
.dz-up{display:grid;gap:6px;min-width:0}
.dz-up-im{display:grid;place-items:center;aspect-ratio:1;background:var(--panel);border-radius:var(--radius);padding:8px;overflow:hidden}
.dz-up-im img{max-width:100%;max-height:100%;object-fit:contain}
.dz-up-n{font-size:12px;font-weight:500}
.dz-up-a{display:flex;align-items:center;gap:4px}
.dz-up-a .dz-btn2{flex:1}
/* Draw: five tools as tiles, colour, thickness */
.dz-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dz-tool{display:grid;justify-items:center;gap:5px;padding:10px 2px 8px;border:0;border-radius:var(--radius);background:var(--panel);font-size:11px;font-weight:500;color:var(--ink);cursor:pointer;transition:background .15s}
.dz-tool svg{color:var(--icon,var(--ink))}
.dz-tool:hover{background:var(--tint)}
.dz-tool[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);font-weight:500}
.dz-tool[aria-pressed="true"] svg{color:var(--primary)}
#dzDrawOpts .dzi-sl{margin-top:16px}
#dzDrawOpts .dz-btn2.wide{margin-top:8px;height:38px}
/* Layers: rows top first, the picked ones tinted; drag to restack */
.dz-layers{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dz-layer{display:grid;grid-template-columns:16px 28px minmax(0,1fr) auto auto;align-items:center;gap:6px;min-height:42px;padding:3px 4px 3px 4px;border-radius:var(--radius);cursor:pointer;transition:background .12s;position:relative}
.dz-layer:hover{background:var(--panel)}
.dz-layer.on{background:var(--tint)}
.dz-layer.off .dz-l-n,.dz-layer.off .dz-l-ic{opacity:.45}
.dz-layer.drag{opacity:.4}
.dz-layer.dropt::before,.dz-layer.dropb::after{content:"";position:absolute;left:6px;right:6px;height:2px;border-radius:var(--radius-sm);background:var(--primary)}
.dz-layer.dropt::before{top:-1px}.dz-layer.dropb::after{bottom:-1px}
.dz-l-grip{color:#A8B2BA;cursor:grab;display:grid;place-items:center}
.dz-l-ic{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--panel);display:grid;place-items:center;color:var(--icon,var(--ink))}
.dz-layer.on .dz-l-ic{background:#fff}
.dz-l-n{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.dz-l-g{color:var(--primary);display:inline-grid}
.dz-layer .dz-ib{width:28px;height:28px;color:var(--muted)}
.dz-layer .dz-ib.on{color:var(--primary)}
.dz-layacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 4px}
/* Style: the three parts, colour wells, schemes, gradients, textures, patterns */
.dz-seg{display:inline-flex;gap:2px;background:var(--panel);border-radius:var(--radius);padding:2px}
.dz-seg>button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:30px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:transparent;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.dz-seg>button:hover{color:var(--ink)}
.dz-seg>button[aria-selected="true"],.dz-seg>button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(25,32,38,.10),0 0 0 .5px rgba(25,32,38,.06)}
.dz-seg.ico>button{padding:0;height:32px}
.dz-seg.ico>button svg{color:var(--icon,var(--ink))}
.dz-seg.sm>button{height:24px;padding:0 9px;font-size:11px}
.dz-seg.dark{background:rgba(255,255,255,.12)}
.dz-seg.dark>button{color:rgba(255,255,255,.75)}
.dz-seg.dark>button[aria-selected="true"]{background:#fff;color:var(--ink)}
.dz-subtabs{display:flex;width:100%;margin:0 0 6px}
.dz-colacts{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 2px}
.dz-colbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;transition:background .15s}
.dz-colbtn:hover{background:var(--tint)}
.dz-colbtn svg{flex:none;color:var(--primary)}
.dz-wells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.dz-well{display:grid;justify-items:center;gap:6px;padding:10px 4px 8px;border:0;border-radius:var(--radius);background:var(--panel);cursor:pointer;font-size:11.5px;font-weight:500;color:var(--ink);transition:background .15s}
.dz-well:hover{background:var(--tint)}
.dz-well i{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(25,32,38,.14),0 1px 2px rgba(25,32,38,.1)}
.dz-well.sm{padding:6px 4px 5px;gap:4px;font-size:10.5px}.dz-well.sm i{width:22px;height:22px}
.dz-pals{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dz-pal{display:grid;gap:6px;border:0;border-radius:var(--radius);background:var(--panel);padding:8px 8px 7px;cursor:pointer;text-align:left;transition:background .15s}
.dz-pal:hover{background:var(--tint)}
.dz-pal.on{background:var(--tint);box-shadow:var(--ring)}
.dz-pal-c{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;height:20px;border-radius:var(--radius-sm);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(25,32,38,.08)}
.dz-pal-c i{display:block}
.dz-pal-n{font-size:11.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-fontrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dz-sws{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dz-sw{width:28px;height:28px;flex:none;border:0;border-radius:50%;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(25,32,38,.14);transition:transform .12s}
.dz-sw:hover{transform:scale(1.1)}
.dz-sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary)}
.dz-sw.dz-sw-orig{background:conic-gradient(#C9A35A 0 25%,#E9D9B8 0 50%,#B07F3C 0 75%,#F3E7CF 0)}
.dz-grads{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.dz-grad{aspect-ratio:1;border:0;border-radius:var(--radius-sm);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(25,32,38,.08);transition:transform .12s}
.dz-grad:hover{transform:scale(1.06)}
.dz-texs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dz-tex{display:grid;gap:5px;border:0;border-radius:var(--radius);background:transparent;padding:0;cursor:pointer;font-size:11px;color:var(--ink);text-align:center}
.dz-tex img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);display:block;box-shadow:inset 0 0 0 1px rgba(25,32,38,.08)}
.dz-tex:hover img{opacity:.9}
.dz-tex.on img{box-shadow:var(--ring)}
.dz-texrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin:12px 0 0}
.dz-patrow{display:grid;gap:12px;margin:12px 0 0}
.dzc-more{position:relative;width:28px;height:28px;border-radius:50%;border:0;padding:0;cursor:pointer;background:conic-gradient(#E53935,#FB8C00,#FDD835,#43A047,#1E88E5,#8E24AA,#E53935);flex:none}
.dzc-more i{position:absolute;inset:5px;border-radius:50%;background:var(--c,transparent);box-shadow:0 0 0 2px #fff}
.dzc-more:hover{box-shadow:var(--ring)}

/* ======================================================================== inspector controls */
.dzi-h{display:flex;align-items:center;gap:10px;padding:14px 12px 12px 16px;border-bottom:1px solid var(--dz-hair);position:sticky;top:0;background:#fff;z-index:2}
.dzi-h>div{min-width:0;flex:1;display:grid;gap:1px}
.dzi-h b{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzi-h small{font-size:11.5px;color:var(--muted);line-height:1.35}
.dzi-ic{width:34px;height:34px;flex:none;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center}
.dzi-ic.sm{width:28px;height:28px}
.dzi-done{flex:none;height:30px;padding:0 12px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font-size:12px;font-weight:500;cursor:pointer}
.dzi-done:hover{background:var(--tint)}
.dzi-tabs{display:flex;margin:12px 16px 2px}
.dzi-b{padding:14px 16px 32px}
.dzi-b[hidden]{display:none}
.dzi-l{display:grid;gap:7px;font-size:12px;font-weight:500;color:var(--ink);margin:0 0 16px;min-width:0}
.dzi-lh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dzi-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start;margin:0 0 4px}
.dzi-row>.dzi-l{margin-bottom:12px}
.dzi-row>.dz-btn2{width:100%}
.dzi-b>.dzi-row:has(>.dz-btn2){margin:0 0 8px}
.dzi-row2{display:flex;gap:8px}
.dzi-row2 .dz-seg{flex:1}
.dzi-sp{display:block;visibility:hidden}
.dz3 .dzi-row>.dzi-l>.dz-btn2{width:100%;height:38px}
.dzi-note{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;line-height:1.45;color:var(--muted);background:var(--panel);border-radius:var(--radius);padding:8px 10px;margin:-6px 0 16px}
.dzi-note svg{flex:none;color:var(--primary);margin-top:1px}
.dz-tog{width:42px;height:36px;border:0;border-radius:var(--radius);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--icon,var(--ink))}
.dz-tog:hover{background:var(--tint)}
.dz-tog[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);color:var(--primary)}
.dz-step{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;height:38px;background:var(--panel);border-radius:var(--radius)}
.dz-step button{height:38px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--icon,var(--ink));border-radius:var(--radius)}
.dz-step button:hover{background:var(--tint)}
.dz3 .dz-step input{height:38px;background:transparent;text-align:center;padding:0;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.dz3 .dz-step input::-webkit-inner-spin-button,.dz3 .dz-step input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.dz-unit{position:relative;display:block}
.dz-unit i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font-weight:400;pointer-events:none}
.dzi-sl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;margin:0 0 14px}
.dzi-sl>span{font-size:12px;font-weight:500;color:var(--ink)}
.dzi-sl output{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.dzi-sl input[type=range]{grid-column:1/-1;width:100%;height:22px;margin:0;accent-color:var(--primary);background:transparent;padding:0}
.dz-swrow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;margin:0;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;position:relative}
.dz-swrow input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.dz-switch{width:38px;height:22px;flex:none;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#D9DFE3;position:relative;transition:background .2s}
.dz-switch::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .2s cubic-bezier(.3,.7,.4,1)}
.dz-swrow input:checked+.dz-switch{background:var(--primary)}
.dz-swrow input:checked+.dz-switch::after{transform:translateX(16px)}
.dz-swrow input:focus-visible+.dz-switch{box-shadow:var(--ring)}
.dzi-sws{border-top:1px solid var(--dz-hair);margin:0 0 12px}
.dzi-sws .dz-swrow{border-bottom:1px solid var(--dz-hair)}
.dzi-aligns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dzi-aligns .dz-seg{display:flex}
.dzi-dist{display:flex;margin-top:8px}
.dzi-dist>button{gap:6px;padding:0 8px;font-size:11.5px}
.dzi-layers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dzi-layers button{display:grid;justify-items:center;gap:3px;padding:8px 2px 6px;border:0;border-radius:var(--radius);background:var(--panel);font-size:10.5px;font-weight:500;color:var(--ink);cursor:pointer}
.dzi-layers button:hover{background:var(--tint)}
.dzi-layers svg{color:var(--icon,var(--ink))}
.dzi-crops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dzi-crops button{height:40px;border:0;border-radius:var(--radius);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--icon,var(--ink))}
.dzi-crops button:hover{background:var(--tint)}
.dzi-crops button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);color:var(--primary)}
/* Transparency for pictures (23 Oct 2026): tiles of a box fading each way, a short name under each */
.dzi-fades{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dzi-fades button{display:grid;justify-items:center;align-content:start;gap:3px;min-height:54px;padding:7px 2px 6px;border:0;border-radius:var(--radius);background:var(--panel);cursor:pointer;color:var(--icon,var(--ink));font-size:10px;font-weight:500;line-height:1.15;text-align:center}
.dzi-fades button span{color:var(--ink)}
.dzi-fades button:hover{background:var(--tint)}
.dzi-fades button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);color:var(--primary)}
.dzi-fades button[aria-pressed="true"] span{color:var(--primary)}
.dz-gradrow{display:grid;grid-template-columns:58px minmax(0,1fr) 58px;gap:8px;align-items:center}
.dz-gradprev{height:30px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px rgba(25,32,38,.08)}
.dz-popbtn{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;height:38px;padding:0 11px;border:0;border-radius:var(--radius);background:var(--panel);font-size:13px;font-weight:400;cursor:pointer;text-align:left}
.dz-popbtn:hover{background:var(--tint)}
.dz-popbtn svg{color:var(--muted);flex:none}
.dzi-link{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:4px 0;font-size:12.5px;font-weight:500;color:var(--primary);cursor:pointer;margin:0}
.dzi-link:hover{text-decoration:underline;text-underline-offset:3px}
.dzi-tip{display:flex;gap:10px;align-items:flex-start;background:var(--panel);border-radius:var(--radius);padding:12px;margin:4px 0 10px}
.dzi-tip .dzi-ic{background:#fff}
.dzi-tip p{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.dzi-tip b{color:var(--ink);font-weight:500}
/* the font button and the search list it opens */
.dzf-btn{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:40px;padding:8px 11px;border:0;border-radius:var(--radius);background:var(--panel);color:var(--ink);font-size:14px;font-weight:500;cursor:pointer;text-align:left;min-width:0}
.dzf-btn:hover{background:var(--tint)}
.dzf-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dzf-btn svg{flex:none;color:var(--muted)}

/* ======================================================================== the stage's floating parts */
/* the bar over whatever is picked (iOS edit-menu style): white capsule, icons, a hairline between groups */
/* Corel Draw style handles on the page (design.html placeHandles, 23 Oct 2026): the arrow of a fade or a gradient on the selected
   piece; hollow = see-through end, solid = solid end, diamond = midpoint, colour dots = the gradient's colours */
.dz-hdl{position:absolute;left:0;top:0;pointer-events:none;z-index:8;overflow:visible}
.dz-hdl .hl-bg{stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.85}
.dz-hdl .hl{stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:4 3}
.dz-hdl .hn{pointer-events:all;cursor:grab;stroke-width:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));touch-action:none}
.dz-hdl .hn:active{cursor:grabbing}
.dz-hdl .hn:hover{stroke-width:3}
.dz-hdl .see{fill:#fff;stroke:var(--ink)}
.dz-hdl .solid{fill:var(--ink);stroke:#fff}
.dz-hdl .mid{fill:#fff;stroke:var(--ink)}
.dz-hdl .centre{fill:var(--primary);stroke:#fff}
.dz-hdl .col{stroke:#fff}
.dzi-gtype{margin:6px 0 2px}
.dz-float{position:absolute;left:0;top:0;z-index:12;display:flex;align-items:center;gap:1px;padding:4px;background:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);box-shadow:var(--dz-float);transition:opacity .12s;white-space:nowrap}
.dz-float[hidden]{display:none}
.dz-float.dz-hide{opacity:0;pointer-events:none}
.dz-float button{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .12s}
.dz-float button:hover{background:var(--panel)}
.dz-float button[aria-pressed="true"]{color:var(--primary);background:var(--tint)}
.dz-float .dzf-fmt{width:auto;display:inline-flex;gap:5px;padding:0 12px 0 10px;font-size:12.5px;font-weight:500;background:var(--tint)}
.dzf-sep{display:block;width:1px;height:20px;background:var(--line);margin:0 3px}
.dzf-lbl{font-size:12px;font-weight:500;padding:0 6px 0 10px;color:var(--ink)}
/* pages: a thumbnail of each side, the open one ringed */
.dz-pages{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:6;display:flex;gap:6px;padding:6px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--radius);box-shadow:var(--dz-float)}
.dz-pages[hidden]{display:none}
.dz-page{display:grid;justify-items:center;gap:4px;padding:5px 7px 3px;border:0;border-radius:var(--radius-sm);background:transparent;cursor:pointer;transition:background .15s}
.dz-page:hover{background:var(--panel)}
.dz-page-im{display:block;height:40px;width:auto;max-width:96px;background:#fff;box-shadow:0 0 0 1px rgba(25,32,38,.1),0 1px 3px rgba(25,32,38,.12);overflow:hidden;transition:box-shadow .15s}
.dz-page-im img{width:100%;height:100%;object-fit:cover;display:block}
.dz-page[aria-selected="true"] .dz-page-im{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary)}
.dz-page-n{font-size:11px;font-weight:500;color:var(--muted)}
.dz-page[aria-selected="true"] .dz-page-n{color:var(--ink);font-weight:500}
.dz-page-add .dz-page-im{display:grid;place-items:center;background:transparent;box-shadow:none;outline:1.5px dashed var(--line-strong,#B8C0C8);outline-offset:-1.5px;color:var(--muted)}
.dz-page-add:hover .dz-page-im{outline-color:var(--primary);color:var(--primary)}
.dz-page-add .dz-page-n{color:var(--primary)}
/* view: zoom, guides, shortcuts */
.dz-view{position:absolute;right:16px;bottom:16px;z-index:6;display:flex;align-items:center;gap:1px;padding:4px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);box-shadow:var(--dz-float)}
.dz3 .dz-view .dz-ib{width:32px;height:32px;border-radius:50%}
.dz-zoom{min-width:52px;height:32px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:transparent;font-size:12px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;cursor:pointer}
.dz-zoom:hover{background:var(--panel)}
.dz-zpop{min-width:272px}
/* the edges: a word or logo over the safe line (design.html edgeCheck) */
.dz-edge{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:7px 7px 7px 13px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--attn-tint);color:var(--ink);box-shadow:var(--dz-float),inset 0 0 0 1px var(--attn-line);font-size:12.5px;line-height:1.35}
.dz-edge[hidden]{display:none}
/* Undo and Redo on the page itself, phones only (the title bar has no room there): a white capsule at the top left with the words,
   greyed when there is nothing to step to; the safe-area notice and the draw bar sit a row lower on phones (Junaid, 25 Oct 2026) */
.dz-hist{display:none}
/* outline and drop shadow: a switch row, the settings under it in a quiet box (25 Oct 2026) */
.dzi-fx{padding:2px 0 6px}
.dz-edge svg{flex:none;color:var(--attn)}
.dz-edge b{font-weight:500}
.dz-edge.cut{background:#FBEAE8;color:#6E211B}
.dz-edge.cut svg{color:var(--danger)}
.dz-edge button{flex:none;height:28px;padding:0 12px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;color:inherit;font:inherit;font-size:12px;font-weight:500;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.dz-edge button:hover{background:#FFFDF8}
@media (max-width:860px){.dz-edge{top:10px;border-radius:var(--radius);corner-shape:round;align-items:flex-start;padding:8px 8px 8px 12px}.dz-edge span{flex:1}}
.dz-edgefix{margin:14px 0 4px;padding:14px 16px;border-radius:var(--radius);background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line)}
.dz-edgefix>b{display:block;font-size:13.5px;font-weight:500;margin:0 0 8px}
.dz-edgefix ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.dz-edgefix li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px}
.dz-edgefix em{font-style:normal;color:var(--danger);font-weight:500}
.dz-edgefix .dz-btn2{background:#fff;height:30px;flex:none}
.dz-edgefix .btn{height:38px}
/* Leave the Designer? (the browser's Back button) */
.dz-leave{max-width:400px;padding:28px 26px 24px;text-align:center}
.dz-leave-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius);background:var(--tint);color:var(--icon,var(--ink));margin:0 auto 12px}
.dz-leave h2{font-size:18px;font-weight:500;margin:0 0 6px}
.dz-leave p{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 18px}
.dz-leave .dz-fin-btns{justify-content:center}
/* leaving (23 Oct 2026): the account offer for guests, and the honey state when the browser had no room to save */
.dz-leave{max-width:440px}
.dz-leave-acct{display:grid;gap:10px;margin:-4px 0 18px;padding:14px 16px;border-radius:var(--radius);background:var(--tint);text-align:left}
.dz-leave-acct[hidden]{display:none}
.dz-leave-acct p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.dz-leave-acct p b{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:2px}
.dz-leave-acct span{display:flex;flex-wrap:wrap;gap:8px}
#dzLeaveModal.fail .dz-leave-ic{background:var(--attn-tint);color:var(--attn)}
#dzLeaveModal.fail .dz-leave-acct{background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line)}
.dz-saved.fail{color:var(--attn)}
.dz-saved.fail svg{color:var(--attn)}
.dz-zsl{display:grid;grid-template-columns:auto minmax(0,1fr) auto 44px;align-items:center;gap:4px;margin:0 0 6px}
.dz-zsl input[type=range]{width:100%;accent-color:var(--primary)}
.dz-zsl output{font-size:12px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.dz-menu.dz-zpop>button svg{visibility:visible;color:var(--icon,var(--ink))}
.dz-zpop>button kbd{margin-left:auto;font:inherit;font-size:11px;color:var(--muted)}
.dz-zp{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0 2px}
.dz-zp button{height:30px;border:0;border-radius:var(--radius-sm);background:var(--panel);font:inherit;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer}
.dz-zp button:hover{background:var(--tint)}
.dz-vsep{width:1px;height:18px;background:var(--line);margin:0 3px}
.dz3 #dzGuidesBtn.off{color:var(--muted)}
.dz3 #dzGuidesBtn.off svg{opacity:.5}
@media (min-width:861px){@container (max-width:720px){.dz-view{top:14px;bottom:auto;right:14px}}}
/* while drawing: a pill at the top of the stage names the tool and offers Done */
.dz-drawbar{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:8px;padding:5px 5px 5px 14px;background:var(--primary);color:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);box-shadow:var(--dz-float);font-size:12.5px;font-weight:500}
.dz-drawbar[hidden]{display:none}
.dz-drawbar .dz-dot{width:12px;height:12px;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.dz-drawbar button{height:28px;padding:0 13px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;color:var(--ink);font-size:12px;font-weight:500;cursor:pointer}

/* ======================================================================== menus and popovers */
.dz-menu{position:fixed;z-index:130;min-width:220px;max-width:min(320px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;padding:6px;background:#fff;border-radius:var(--radius);box-shadow:0 0 0 .5px rgba(25,32,38,.1),0 12px 40px rgba(20,30,40,.18),0 2px 6px rgba(20,30,40,.08);font-size:13px;color:var(--ink)}
.dz-menu-h{font-size:11.5px;font-weight:500;color:var(--muted);margin:4px 8px 6px}
.dz-menu>button{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:4px 10px 4px 8px;border:0;border-radius:var(--radius-sm);background:transparent;font:inherit;font-size:13px;color:var(--ink);text-align:left;cursor:pointer}
.dz-menu>button:hover{background:var(--panel)}
.dz-menu>button svg{color:var(--primary);visibility:hidden;flex:none}
.dz-menu>button[aria-checked="true"]{font-weight:500}
.dz-menu>button[aria-checked="true"] svg{visibility:visible}
.dz-menu-note{font-size:11.5px;line-height:1.45;color:var(--muted);margin:6px 8px 4px;padding-top:6px;border-top:1px solid var(--line)}
.dz-menu-cu{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;align-items:end;padding:4px 8px 6px}
.dz-menu-cu label{display:grid;gap:3px;font-size:11px;font-weight:500;color:var(--muted)}
.dz-menu-cu input{height:32px}
.dz-menu-cu .dz-btn2{height:32px}
.dz-pop{padding:10px 12px;min-width:260px}
.dz-pop .dz-menu-h{margin:2px 0 6px}
.dz-pop .dz-swrow{border-bottom:1px solid var(--line);margin-bottom:6px}
.dz-legend{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px}
.dz-legend li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;font-size:12px;color:var(--muted);line-height:1.35}
.dz-legend b{display:block;color:var(--ink);font-weight:500;font-size:12.5px}
.dz-legend i{display:block;height:0;border-top:2px solid rgba(42,42,51,.55)}
.dz-legend i.safe{border-top:2px dashed #3B7D5A}
.dz-legend i.bleed{border-top:2px dashed var(--danger)}
.dz-legend i.fold{border-top:2px dashed #3E7CB1}
.dz-legend i.keep{height:10px;border:1.5px dashed var(--danger);background:rgba(181,71,63,.1)}
.dz-keys{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:7px}
.dz-keys li{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;font-size:12px;color:var(--muted)}
.dz-keys li>span{display:flex;gap:3px}
.dz-keys kbd{font:inherit;font-size:11px;font-weight:500;color:var(--ink);background:var(--panel);border-radius:var(--radius-sm);padding:2px 7px;min-width:22px;text-align:center;box-shadow:inset 0 -1px 0 rgba(25,32,38,.08)}

/* ======================================================================== Preview, Check and Finish, Start From Scratch */
.dz-ql{position:fixed;inset:0;z-index:150;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(18,22,27,.86);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);color:#fff;animation:dzFade .2s ease}
.dz-ql[hidden]{display:none}
@keyframes dzFade{from{opacity:0}to{opacity:1}}
.dz-ql-load{grid-row:1/-1;place-self:center;font-size:14px;color:rgba(255,255,255,.75)}
.dz-ql-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 0 24px}
.dz-ql-top b{display:block;font-size:15px;font-weight:500}
.dz-ql-top span{font-size:12.5px;color:rgba(255,255,255,.6)}
.dz-ql-x{width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.dz-ql-x:hover{background:rgba(255,255,255,.2)}
.dz-ql-stage{display:grid;place-items:center;padding:24px;perspective:1800px;min-height:0}
.dz-ql-card{position:relative;max-height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1);cursor:pointer}
.dz-ql-card:not(.flip){cursor:default}
.dz-ql-card.flipped{transform:rotateY(180deg)}
.dz-ql-face{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;box-shadow:0 2px 6px rgba(0,0,0,.25),0 30px 80px rgba(0,0,0,.45);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;opacity:0;transition:opacity .25s}
.dz-ql-face.on{opacity:1}
.dz-ql-card.flip .dz-ql-face{opacity:1}
.dz-ql-card.flip .dz-ql-face.f1{transform:rotateY(180deg)}
.dz-ql-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 16px 26px}
.dz-ql-bar .btn{height:38px;padding:0 18px;gap:8px;font-size:13px}
.dz-ql-bar .dz-btn2{height:38px}
.dz-modal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:20px;background:rgba(18,22,27,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:dzFade .18s ease}
.dz-modal[hidden]{display:none}
.dz-modal-box{position:relative;width:min(940px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:var(--radius);box-shadow:0 30px 90px rgba(10,16,22,.35);color:var(--ink)}
.dz-modal-x{position:absolute;right:12px;top:12px;z-index:2}
.dz-lead{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 16px}
.dz-fin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dz-fin-load{padding:60px 20px;text-align:center;color:var(--muted);margin:0}
.dz-fin-pv{background:var(--panel);display:grid;gap:18px;align-content:center;padding:34px 28px}
.dz-fin-pv figure{margin:0;display:grid;justify-items:center;gap:8px}
.dz-fin-pv img{max-width:100%;max-height:260px;object-fit:contain;box-shadow:0 1px 2px rgba(25,32,38,.1),0 10px 28px rgba(25,32,38,.16);background:#fff}
.dz-fin-pv figcaption{font-size:11.5px;font-weight:500;color:var(--muted)}
.dz-fin-r{padding:34px 32px 28px}
.dz-fin-r h2{font-size:24px;font-weight:500;margin:6px 0 8px;letter-spacing:-.3px}
.dz-checks{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.dz-checks li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;padding:10px 12px;border-radius:var(--radius);background:var(--panel)}
.dz-checks li svg{flex:none;margin-top:1px}
.dz-checks li.ok svg{color:var(--ok,var(--success))}
.dz-checks li.warn{background:var(--attn-bg,#FBF3E6)}
.dz-checks li.warn svg{color:var(--attn,#B7791F)}
.dz-confirm{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;font-weight:500;margin:0;cursor:pointer}
.dz-confirm input{width:16px;height:16px;margin:2px 0 0;flex:none;accent-color:var(--primary)}
.dz-fin-btns{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.dz-fin-btns .btn{height:40px;padding:0 18px;gap:8px;font-size:13px}
.dz-fin-btns .btn:disabled{opacity:.45;cursor:default}
.dz-fin-btns .dz-btn2{height:40px}
.dz-fin-msg{font-size:12.5px;color:var(--muted);margin:12px 0 0;line-height:1.5}
.dz-fin-btns .btn.dz-busy:disabled{opacity:1;cursor:progress}
.dz-fin-prog{display:block;height:4px;margin:0 0 7px;border-radius:var(--bar-r);background:var(--panel);overflow:hidden}
.dz-fin-prog i{display:block;height:100%;border-radius:inherit;background:var(--primary);transition:width .5s ease}
.dz-ok{color:var(--ok,var(--success))}
.dz-scr-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:6px 0 10px}
.dz-scr-size{display:grid;justify-items:center;align-content:end;gap:8px;padding:12px 8px 10px;background:#fff;border-radius:var(--radius);font-size:11.5px;font-weight:500;text-align:center;cursor:pointer;position:relative;min-height:112px}
.dz-scr-size input{position:absolute;opacity:0;pointer-events:none}
.dz-scr-size:has(input:checked){box-shadow:var(--ring);background:var(--tint)}
.dz-scr-shape{display:grid;place-items:center;max-width:64px;max-height:58px;width:64px;background:#fff;box-shadow:0 0 0 1px rgba(25,32,38,.18),0 2px 6px rgba(25,32,38,.1)}
.dz-scr-shape:where([style*="aspect-ratio"]){width:auto;height:58px}
.dz-scr-shape.round{border-radius:50%}
/* the size tiles draw the product at its real proportions (scrArt in design.html, 23 Oct 2026) */
.dz-scr-art{display:block;width:150px;height:104px;max-width:100%;filter:drop-shadow(0 2px 4px rgba(25,32,38,.1))}
.dz-scr-art .pg{fill:#fff;stroke:rgba(25,32,38,.22);stroke-width:.7}
.dz-scr-art .bk{fill:#EEF1F4;stroke:rgba(25,32,38,.16);stroke-width:.7}
.dz-scr-art .ln{fill:#D5DBE0}
.dz-scr-art .ac{fill:var(--primary);opacity:.55}
.dz-scr-art .im{fill:#E4E9EE}
.dz-scr-art .tb{fill:none;stroke:#D5DBE0;stroke-width:.7}
.dz-scr-art .lf{fill:none;stroke:var(--primary);stroke-width:.8;stroke-linecap:round;opacity:.6}
.dz-scr-art .fd{stroke:#3E7CB1;stroke-width:.7;stroke-dasharray:2 1.6;fill:none}
.dz-scr-art .hole{fill:#EEF1F4;stroke:rgba(25,32,38,.22);stroke-width:.6}
.dz-scr-art .ft{fill:#9AA5AE}
.dz-scr-size:has(input:checked) .dz-scr-art .pg{stroke:var(--primary)}
.dz-ql-card.round .dz-ql-face{background:transparent;box-shadow:none;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}
.dz-scr-shape.cu{width:48px;height:48px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1.5px var(--tint-dk);background:transparent;color:var(--primary)}
.dz-scr-cu{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dz-scr-cu[hidden]{display:none}
.dz-scr-cu .dz-hint{grid-column:1/-1;margin:-6px 0 4px}
.dz-modal .dzi-l{margin:0}

/* ======================================================================== the font and colour pickers (fonts.js, colour-tools.js) */
.dzf-pop{position:fixed;z-index:120;display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);box-shadow:0 0 0 .5px rgba(25,32,38,.1),0 12px 40px rgba(20,30,40,.18),0 2px 6px rgba(20,30,40,.08);overflow:hidden}
.dzf-top{padding:10px 10px 6px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.dzf-q{width:100%;min-height:38px;border:0;border-radius:var(--radius);background:var(--panel);padding:8px 10px;font:inherit;font-size:13px;color:var(--ink)}
.dzf-q:focus{outline:none;box-shadow:var(--ring);background:#fff}
.dzf-chips{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.dzf-chips::-webkit-scrollbar{display:none}
.dzf-chips button{flex:none;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:500;padding:6px 10px;cursor:pointer}
.dzf-chips button:hover{color:var(--ink)}
.dzf-chips button.on{background:var(--tint);color:var(--ink);font-weight:500}
.dzf-list{overflow-y:auto;overscroll-behavior:contain;padding:4px 6px 10px;min-height:0}
.dzf-h{font-size:11.5px;font-weight:500;color:var(--muted);margin:10px 6px 4px}
.dzf-f{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;border:0;border-radius:var(--radius-sm);background:transparent;padding:6px 8px;cursor:pointer;color:var(--ink);font:inherit;text-align:left}
.dzf-f:hover{background:var(--panel)}
.dzf-f.on{background:var(--tint)}
.dzf-f svg{flex:none;color:var(--primary)}
.dzf-n{font-size:18px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dzf-none{font-size:13px;color:var(--muted);padding:14px 8px}
/* the colour picker (Colour Picker 2): block O at the end of this file */
@media (max-width:700px){.dzf-pop{left:12px!important;right:12px;width:auto!important}}

/* ======================================================================== laptops and tablets (861 to 1199 px) */
/* The inspector floats over the right of the stage only while something is picked; the page settings live in the title bar. */
@media (max-width:1199px){
  .dz3{--dz-pw:280px}
  .dz-body{grid-template-columns:var(--dz-tabs) var(--dz-pw) minmax(0,1fr)}
  .dz3.dz-collapsed .dz-body{grid-template-columns:var(--dz-tabs) 0 minmax(0,1fr)}
  .dz-insp{position:absolute;right:12px;top:12px;bottom:12px;width:var(--dz-iw);z-index:14;border:0;border-radius:var(--radius);box-shadow:0 0 0 .5px rgba(25,32,38,.08),0 18px 44px rgba(25,32,38,.2);display:none}
  .dz3.dz-has-sel .dz-insp{display:block}
  .dz-bar-r .dz-btn2 span{display:none}
  .dz-bar-r .dz-btn2{width:36px;padding:0}
}
@media (min-width:861px) and (max-width:1060px){.dz-saved{display:none}}

/* ======================================================================== phones (860 px and under) */
/* The canvas fills the screen; the tools are a tab bar along the bottom; the panel and the inspector rise as sheets above it and
   the page shrinks to the space left, so nothing ever scrolls away. */
@media (max-width:860px){
  /* the cookie card (site.css .ckb) sits above the bottom tool bar, never over it (audit, 24 Oct 2026) */
  body.dz-app .ckb{bottom:calc(68px + env(safe-area-inset-bottom,0px));left:12px;width:calc(100vw - 24px);max-height:calc(100vh - 140px)}
  .dz3{--dz-bar:52px;--dz-tb:58px;--dz-sheet:52vh;grid-template-rows:var(--dz-bar) minmax(0,1fr) calc(var(--dz-tb) + env(safe-area-inset-bottom,0px))}
  .dz-body{display:contents}
  .dz-bar{grid-template-columns:minmax(0,1fr) auto;padding:0 8px 0 4px;gap:6px}
  .dz-bar-c{display:none}
  .dz-doc{flex-direction:column;align-items:flex-start;gap:0}
  .dz-doc-n{font-size:14px;max-width:100%}
  .dz-doc-size{height:28px;padding:0 4px 0 0;font-size:11.5px}
  .dz-doc-size:hover:not(:disabled){background:transparent}
  .dz-bar-r{gap:6px}
  .dz-finish{height:34px;padding:0 13px;font-size:12.5px}
  .dz-finish span{font-size:0}.dz-finish span::before{content:"Finish";font-size:12.5px}
  .dz-stage{grid-row:2;grid-column:1}
  .dz-canvaswrap{padding:58px 14px 84px}
  .dz-hist{display:flex;position:absolute;left:10px;top:10px;z-index:9;gap:2px;padding:3px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);box-shadow:var(--dz-float)}
  .dz-hist button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px 0 10px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:transparent;color:var(--ink);font-size:12.5px;font-weight:500;cursor:pointer;transition:background .15s,opacity .15s}
  .dz-hist button svg{color:var(--icon,var(--ink))}
  .dz-hist button:disabled{opacity:.38;cursor:default}
  .dz-hist button:not(:disabled):active{background:var(--panel)}
  .dz-stage.dz-settling .dz-hist{opacity:0}
  .dz-edge,.dz-drawbar{top:56px}
  .dz3.dz-1side .dz-canvaswrap{padding-bottom:70px}
  .dz3.dz-sheet-panel .dz-canvaswrap,.dz3.dz-sheet-insp .dz-canvaswrap{padding-bottom:calc(var(--dz-sheet) + 14px)}
  .dz3.dz-sheet-panel .dz-pages,.dz3.dz-sheet-insp .dz-pages,.dz3.dz-sheet-panel .dz-view,.dz3.dz-sheet-insp .dz-view{display:none}
  .dz-tabs{grid-row:3;grid-column:1;flex-direction:row;gap:0;padding:4px 4px env(safe-area-inset-bottom,0px);border:0;border-top:1px solid var(--dz-hair);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow-x:auto;z-index:25}
  .dz-tabs{overflow:hidden}
  .dz-tabs button{flex:1 1 0;min-width:0;padding:7px 0 5px;gap:3px;font-size:9.5px;letter-spacing:-.1px;border-radius:var(--radius)}
  .dz-tabs button span{max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}
  .dz-tabs button svg{width:21px;height:21px}
  .dz-tabs button[aria-selected="true"]{background:transparent}
  .dz-panel,.dz-insp{position:fixed;left:0;right:0;bottom:calc(var(--dz-tb) + env(safe-area-inset-bottom,0px));height:var(--dz-sheet);top:auto;width:auto;z-index:24;display:flex;flex-direction:column;border:0;border-radius:var(--radius) var(--radius) 0 0;background:#fff;box-shadow:0 -1px 0 var(--dz-hair),0 -12px 32px rgba(25,32,38,.14);transform:translateY(calc(100% + 80px));transition:transform .32s cubic-bezier(.32,.72,0,1);visibility:visible}
  .dz-insp{display:block;overflow-y:auto}
  .dz3.dz-sheet-panel .dz-panel,.dz3.dz-sheet-insp .dz-insp{transform:none}
  .dz3.dz-collapsed .dz-panel{visibility:visible}
  .dz-grab{display:block;width:36px;height:5px;border-radius:var(--bar-r);background:#D3D9DE;margin:7px auto 0;flex:none}
  .dz-panel-h{padding:8px 8px 6px 16px}
  .dz-panel-h p{display:none}
  .dz-panel-h .dz-ib svg{transform:rotate(-90deg)}
  .dz-panel-b{padding:2px 16px 28px}
  .dzi-h{padding:12px 10px 10px 14px}
  .dz-pages{bottom:12px;left:10px;transform:none;padding:4px;gap:4px}
  .dz-page-im{height:32px}
  .dz-view{right:10px;bottom:12px}
  .dz3 .dz-view .dz-ib{width:30px;height:30px}
  .dz-keysbtn{display:none!important}
  .dz-zoom{min-width:44px}
  .dz3 .dzg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dz-arts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dz-shapes,.dz-icons{grid-template-columns:repeat(8,minmax(0,1fr))}
  .dz-float button{width:38px;height:38px}
  .dz-fin{grid-template-columns:1fr}
  .dz-fin-pv{padding:24px 18px;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .dz-fin-pv img{max-height:160px}
  .dz-fin-r{padding:22px 18px 22px}
  .dz-modal{padding:0;align-items:end}
  .dz-modal-box{max-height:92vh;border-radius:var(--radius) var(--radius) 0 0}
}
@media (max-width:560px){.dz3 .dzg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dz-arts{grid-template-columns:repeat(3,minmax(0,1fr))}.dz-shapes,.dz-icons{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:380px){.dz-bar-r .dz-btn2{display:none}.dz-tabs button{font-size:9px;letter-spacing:-.2px}.dz-tabs button svg{width:20px;height:20px}}

/* ======================================================================== logos, pairings, colour modes (22 Oct 2026, round 124) */
.dz-elmode{margin:0 0 12px}
.dz-elmode .dz-seg,.dz-lg-opts .dz-seg{display:flex;width:100%}
.dz-pair{position:relative}
.dz-pair.has-new{padding-right:34px}
.dz-new{position:absolute;right:6px;top:7px;font-style:normal;font-size:9.5px;font-weight:500;letter-spacing:.3px;color:var(--primary);background:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:1px 6px}
.dz-pair-n{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}
#dzPairCats,#dzComboCats{margin:0 -18px 10px}
.dz-lg-fields{margin:0 0 14px}
.dz-lg-opts{display:grid;grid-template-columns:1fr;gap:0}
.dz-lg-opts .dzi-l{margin:0 0 12px}
.dz-lg-opts .dz-seg>button{padding:0 8px;font-size:12px}
#dzLgCats{margin-top:2px}
.dz-lg-icons{margin-top:6px}
.dz-lg-icons button{display:inline-flex;align-items:center;gap:5px}
.dz-lg-icons button svg{color:var(--icon,var(--ink))}
.dz-lg-icons[hidden]{display:none}
.dz-logos{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;margin:12px 0 14px}
.dz-lg{display:grid;gap:5px;border:0;background:transparent;padding:0;cursor:pointer;text-align:left}
.dz-lg-im{display:grid;place-items:center;aspect-ratio:4/3;background:#fff;border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line);padding:8px;overflow:hidden;transition:box-shadow .15s}
.dz-lg-im:empty{background:var(--panel);box-shadow:none}
.dz-lg-im img{max-width:100%;max-height:100%;object-fit:contain}
.dz-lg:hover .dz-lg-im{box-shadow:inset 0 0 0 1px var(--tint-dk),0 0 0 3px rgba(var(--prgb),.08)}
.dz-lg-n{font-size:11.5px;font-weight:500;color:var(--ink)}
.dz-lg-save{height:38px;margin:0 0 4px}
.dz-mylogo{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;background:var(--panel);border-radius:var(--radius);padding:10px}
.dz-mylogo-im{display:grid;place-items:center;width:64px;height:48px;background:#fff;border-radius:var(--radius-sm);padding:4px}
.dz-mylogo-im img{max-width:100%;max-height:100%;object-fit:contain}
.dz-mylogo b{display:block;font-size:13px;font-weight:500}
.dz-mylogo small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-mylogo-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 16px}
.dz-mylogo-acts .dz-ib{width:30px;height:30px;margin-left:auto;color:var(--muted)}
.dz3.dz-logo-mode [data-dztab="templates"]{display:none}
.dz-lg-pv figure span{display:grid;place-items:center;width:100%;aspect-ratio:3/2;border-radius:var(--radius);padding:16px}
.dz-lg-pv .dz-lg-light{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.dz-lg-pv .dz-lg-dark{background:#1E2328}
.dz-lg-pv img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:none!important;background:transparent!important}
.dz-lg-use{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.dz-lg-use .dz-btn2{text-decoration:none}
@media (max-width:860px){
  .dz-tabs{overflow-x:auto!important;scrollbar-width:none}
  .dz-tabs button{flex:1 0 46px!important}
  .dz-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){.dz-logos{grid-template-columns:1fr 1fr}}

/* ---- Photo Library (22 Oct 2026): stock photos and icons from Magnific, through server/worker/src/stock.js; Uploads tab ---- */
.dz-stock{margin-top:18px;padding-top:14px;border-top:1px solid var(--dz-hair)}
.dz-stock .dz-stock-kind{display:flex;width:100%;margin:0 0 10px}
.dz-stock .dz-stock-kind button{flex:1}
.dz-stock .dz-search{margin:0 0 8px}
.dz-stock .dz-scrollchips{margin:0 0 6px}
.dz-stock .dz-hint:empty{display:none}
.dz-stock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dz-stock-grid.icons{grid-template-columns:repeat(4,minmax(0,1fr))}
.dz-stk{position:relative;display:block;aspect-ratio:4/3;padding:0;border:0;border-radius:var(--radius-sm);background:var(--panel);overflow:hidden;cursor:pointer;transition:box-shadow .15s}
.dz-stock-grid.icons .dz-stk{aspect-ratio:1;padding:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--dz-hair)}
.dz-stk img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.dz-stock-grid.icons .dz-stk img{object-fit:contain}
.dz-stk:hover{box-shadow:0 0 0 2px rgba(var(--prgb),.18)}
.dz-stk:hover img{transform:scale(1.04)}
.dz-stock-grid.icons .dz-stk:hover img{transform:none}
.dz-stk:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.dz-stk.busy::after{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;border:2px solid rgba(var(--prgb),.25);border-top-color:var(--primary);animation:dzSpin .8s linear infinite}
.dz-stk.busy img{opacity:.45}
.dz-stk.sk{cursor:default;background:linear-gradient(90deg,var(--panel) 30%,#fff 50%,var(--panel) 70%);background-size:220% 100%;animation:dzSk 1.3s linear infinite}
@keyframes dzSk{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes dzSpin{to{transform:rotate(360deg)}}
#dzStockMore{margin-top:10px}
@media (prefers-reduced-motion:reduce){.dz-stk.sk,.dz-stk.busy::after{animation:none}.dz-stk img{transition:none}}
@media (max-width:860px){.dz-stock-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dz-stock-grid.icons{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---- Design With AI (22 Oct 2026, on hold behind settings.designAi; server/worker/src/design-ai.js) ---- */
.dz-start[hidden],.dz-blank[hidden]{display:none}
.dz-blankrow .dz-aibtn{margin-top:6px}
.dz-aibtn .dz-blank-im{color:var(--primary)}
.dz-ai{width:min(620px,100%);padding:30px 30px 26px}
.dz-ai h2{margin:6px 0 6px}
.dz-ai .dz-lead{margin:0 0 16px}
.dz-ai .dz-note{margin:0 0 14px}
.dz-ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin:0 0 12px}
.dz-ai input[type=text],.dz-ai textarea{width:100%;min-width:0;height:38px;border:0;border-radius:var(--radius);background-color:var(--panel);padding:0 11px;font:inherit;font-size:13px;font-weight:400;color:var(--ink);box-shadow:none}
.dz-ai textarea{height:auto;min-height:72px;padding:9px 11px;line-height:1.45;resize:vertical}
.dz-ai input:focus,.dz-ai textarea:focus{outline:0;background-color:#fff;box-shadow:var(--ring)}
.dz-ai input::placeholder,.dz-ai textarea::placeholder{color:#9AA5AE}
.dz-ai .dzi-l{margin:14px 0 8px}
.dz-ai-styles{display:flex;flex-wrap:wrap;gap:6px}
.dz-ai-styles button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);font-weight:500}
.dz-ai .dz-seg{display:flex;width:100%;margin-top:8px}.dz-ai .dz-seg button{flex:1}
.dz-ai .dz-hint{margin:12px 0 0}
.dz-ai-msg:empty{display:none}
.dz-ai-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 0}
.dz-ai-acts .btn{display:inline-flex;align-items:center;gap:8px}
.dz-spin{display:inline-block;width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:dzSpin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.dz-spin{animation:none}}
@media (max-width:560px){.dz-ai{padding:22px 16px 20px}.dz-ai-grid{grid-template-columns:1fr}}
/* the product bar is a column on phones: no wrapping, so the family strip keeps to the page width and scrolls inside it (22 Oct 2026) */
@media (max-width:700px){.dz-prodbar{flex-wrap:nowrap}.dz-famnav{max-width:100%;min-width:0}}

/* ---- Details: Fill In From My Account (23 Oct 2026) ---- */
.dz-acct{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;background:var(--panel);border-radius:var(--radius)}
.dz-acct .dz-btn2{display:inline-flex;align-items:center;gap:7px}
.dz-acct small{font-size:11.5px;color:var(--muted)}

/* Font Combinations (Text tool, 23 Oct 2026): ready-made words drawn in the design's colours on the page's own background */
.dz-tcs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 16px}
.dz-tc{display:block;border:0;background:transparent;padding:0;cursor:pointer;min-width:0}
.dz-tc-im{display:grid;place-items:center;aspect-ratio:4/3;background:#fff;border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line);padding:6px;overflow:hidden;transition:box-shadow .15s}
.dz-tc-im:empty{background:var(--panel)!important;box-shadow:none}
.dz-tc-im img{max-width:100%;max-height:100%;object-fit:contain}
.dz-tc:hover .dz-tc-im,.dz-tc:focus-visible .dz-tc-im{box-shadow:inset 0 0 0 1px var(--tint-dk),0 0 0 3px rgba(var(--prgb),.08)}
@media (max-width:900px){.dz-tcs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.dz-tcs{grid-template-columns:1fr 1fr}}
.dz-tcs .dz-empty,.dz-logos .dz-empty{grid-column:1/-1;margin:6px 0;font-size:12.5px;color:var(--muted)}
/* My Brand in Uploads (logos light and dark, brand elements) and the address layout switch (23 Oct 2026) */
.dz-bpics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.dz-bpic{display:grid;place-items:center;aspect-ratio:1;padding:8px;border:0;border-radius:var(--radius-sm);background:var(--panel);cursor:pointer}
.dz-bpic.dark{background:var(--ink)}
.dz-bpic img{max-width:100%;max-height:100%;object-fit:contain;-webkit-touch-callout:none}
.dz-bpic:hover{box-shadow:0 0 0 2px var(--primary)}
.dz-addr-seg{display:flex;margin:6px 0 0}
.dz-addr-seg button{flex:1}
/* Logo tool: Name on Two Lines (23 Oct 2026) */
.dz-lgsplit{margin:4px 0 14px}
.dz-lgsplit-k{display:block;font-size:12px;font-weight:500;color:var(--ink);margin:0 0 6px}
.dz-lgsplit-o{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.dz-lgsplit-o button{flex:none;display:grid;justify-items:center;align-content:center;gap:2px;min-width:92px;max-width:170px;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;text-align:center}
.dz-lgsplit-o button[aria-pressed="true"]{background:#fff;box-shadow:0 0 0 2px var(--primary)}
.dz-lgsplit-o i{font-style:normal;font-size:10.5px;font-weight:500;color:var(--muted);margin-bottom:2px}
.dz-lgsplit-o b{font-size:13px;font-weight:500;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-lgsplit-o small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.2;max-width:100%;overflow-wrap:anywhere}   /* 7.5 pt, and the whole hint shows (was 9 px and cut off with dots; overnight audit, 6 Nov 2026) */

/* ==== CREATE AN ACCOUNT, SET UP MY BRAND (23 Oct 2026, Junaid: "tell them to create an account... it will be easier"): a card under the
   start page intro (icon tile or their logo, title, one line, buttons), a tip at the top of Details that can be hidden, and a line in
   Check and Finish. Signed out: Create a Free Account / Sign In; signed in with no brand: Set Up My Brand; brand set: Your Brand Is
   Ready (start page only). ==== */
.dz-brandcta{width:100%;max-width:560px;margin:24px 0 0}
.dz-bc{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;background:#fff;border-radius:var(--radius);box-shadow:var(--card-sh);padding:16px 18px;text-align:left}
.dz-bc-ic,.dz-bc-logo{grid-row:span 2;align-self:start;width:46px;height:46px;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center;overflow:hidden}
.dz-bc-logo{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.dz-bc-logo img{max-width:82%;max-height:82%;object-fit:contain}
.dz-bc-t b{display:block;font-size:15px;font-weight:500;color:var(--ink)}
.dz-bc-t span{display:block;font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:3px}
.dz-bc-a{grid-column:2;display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.dz-bc .btn{height:34px;padding:0 14px;font-size:12.5px}
.dz-bc .dz-btn2{height:34px;padding:0 13px;font-size:12.5px}
.dz-bc.ready{grid-template-columns:46px minmax(0,1fr) auto}
.dz-bc.ready .dz-bc-a{grid-column:3;grid-row:1/span 2;margin:0;align-self:center}
.dz-bc.details{display:block;position:relative;box-shadow:none;background:var(--tint);padding:12px 36px 12px 13px;margin:0 0 12px}
.dz-bc.details .dz-bc-t b{font-size:13px}
.dz-bc.details .dz-bc-t span{font-size:12px;color:var(--ink);opacity:.8}
.dz-bc.details .dz-bc-a{margin-top:9px}
.dz-bc.details .btn,.dz-bc.details .dz-btn2{height:30px;padding:0 11px;font-size:12px}
.dz-bc.details .dz-btn2{background:#fff}
.dz-bc-x{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:var(--radius-sm);background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.dz-bc-x:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.dz-fin-acct{font-size:12.5px;line-height:1.55;color:var(--ink);background:var(--tint);border-radius:var(--radius-sm);padding:9px 12px;margin:14px 0 0}
.dz-fin-acct a{color:var(--primary);font-weight:500}
@media (max-width:1000px){.dz-brandcta{margin:20px auto 0}}
@media (max-width:520px){.dz-bc.ready{grid-template-columns:46px minmax(0,1fr)}.dz-bc.ready .dz-bc-a{grid-column:2;grid-row:auto;margin-top:10px}}

/* ==== THE MY BRAND TOOL (23 Oct 2026, Junaid: "my branding, my style on the designer page... all their logos, all the variations"):
   one solid button that puts the whole brand on the design, then Logos (tiles with the light or dark ground they are made for and
   a label under), Colours (round swatches), Fonts (each set in itself), Brand Pictures, Details, Edit My Brand. Without a brand: the
   account card and what it gives. Uploads keeps one row that opens it (.dz-bt-go). ==== */
.dz-bt-all{width:100%;gap:9px;margin:2px 0 0}
.dz-bt-all svg{width:18px;height:18px;flex:none}
.dz-bt-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 10px}
.dz-bt-logo{display:grid;gap:6px;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:var(--ink);text-align:center}
.dz-bt-logo>span{display:grid;place-items:center;aspect-ratio:4/3;padding:10px;border-radius:var(--radius-sm);background:var(--panel);transition:box-shadow .15s}
.dz-bt-logo.dark>span{background:var(--ink)}
.dz-bt-logo img{max-width:100%;max-height:100%;object-fit:contain;-webkit-touch-callout:none}
.dz-bt-logo:hover>span,.dz-bt-logo:focus-visible>span{box-shadow:0 0 0 2px var(--primary)}
.dz-bt-logo:focus-visible{outline:0}
.dz-bt-logo small{font-size:11px;line-height:1.35;color:var(--muted)}
.dz-bt-cols{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.dz-bt-col{width:34px;height:34px;border-radius:50%;border:0;padding:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(25,32,38,.14);cursor:pointer;transition:box-shadow .15s}
.dz-bt-col:hover,.dz-bt-col:focus-visible{outline:0;box-shadow:inset 0 0 0 1px rgba(25,32,38,.14),0 0 0 2px #fff,0 0 0 4px var(--primary)}
.dz-bt-fonts{display:grid;gap:8px;margin:0 0 10px}
.dz-bt-fonts button{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:11px 12px;border:0;border-radius:var(--radius-sm);background:var(--panel);cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.dz-bt-fonts button:hover{box-shadow:0 0 0 2px var(--primary)}
.dz-bt-fonts b{font-size:17px;font-weight:500;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-bt-fonts small{flex:none;font-size:11px;color:var(--muted)}
.dz-bt-det{margin:0 0 10px;display:grid;gap:6px}
.dz-bt-det div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;font-size:12px;line-height:1.45}
.dz-bt-det dt{color:var(--muted)}
.dz-bt-det dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.dz-bt-edit{display:flex;align-items:center;justify-content:space-between;margin:22px 0 4px;padding:12px 0 0;border-top:1px solid var(--dz-hair,var(--line));font-size:12.5px;font-weight:500;color:var(--primary);text-decoration:none}
.dz-bt-get{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.dz-bt-get li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:12.5px;line-height:1.45;color:var(--ink)}
.dz-bt-get svg{color:var(--primary);margin-top:1px}
.dz-bc.tab{display:block;position:relative;box-shadow:none;background:var(--tint);padding:13px}
.dz-bc.tab .dz-bc-t b{font-size:13.5px}
.dz-bc.tab .dz-bc-t span{font-size:12px;color:var(--ink);opacity:.8}
.dz-bc.tab .dz-bc-a{margin-top:10px}
.dz-bc.tab .btn,.dz-bc.tab .dz-btn2{height:32px;padding:0 12px;font-size:12px}
.dz-bc.tab .dz-btn2{background:#fff}
.dz-bt-go{display:grid;grid-template-columns:22px minmax(0,1fr) 16px;gap:10px;align-items:center;width:100%;margin:16px 0 4px;padding:12px;border:0;border-radius:var(--radius);background:var(--tint);cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.dz-bt-go>svg:first-child{width:22px;height:22px;color:var(--primary)}
.dz-bt-go b{display:block;font-size:12.5px;font-weight:500}
.dz-bt-go small{display:block;font-size:11.5px;line-height:1.4;color:var(--muted);margin-top:1px}
.dz-bt-go:hover{box-shadow:0 0 0 2px var(--primary)}
.dz-bt-all{height:auto;min-height:46px;padding:10px 14px;line-height:1.25;text-align:left}

/* ==== Design Online plug-ins (23 Oct 2026, js/designs/x-*.js): one block per group, each group writes only between its own markers ==== */

/* x-plugins A start: quick start, matching, tour, versions, ask us */
/* a product drawn at its real proportions: the sheet on a soft panel frame (shared by the three-step start, Make Matching, versions) */
.dzx-a-frame{position:relative;display:grid;place-items:center;width:100%;background:var(--panel);border-radius:var(--radius);overflow:hidden;transition:background .15s,box-shadow .15s}
.dzx-a-sheet{position:relative;display:block;background:#fff;border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 0 0 .5px rgba(25,32,38,.10),0 1px 2px rgba(25,32,38,.08),0 8px 20px rgba(25,32,38,.12);transition:transform .2s ease,box-shadow .2s ease}
.dzx-a-sheet.two{overflow:visible;box-shadow:5px 5px 0 0 #E1E6EA,5px 5px 0 .5px rgba(25,32,38,.08),0 0 0 .5px rgba(25,32,38,.10),0 1px 2px rgba(25,32,38,.08),0 8px 20px rgba(25,32,38,.12)}
.dzx-a-sheet.two img{border-radius:var(--radius-sm)}
.dzx-a-sheet.round,.dzx-a-sheet.round img{border-radius:50%}
.dzx-a-sheet img{display:block;width:100%;height:100%;object-fit:cover;-webkit-touch-callout:none;user-select:none}
.dzx-a-sheet.live img{animation:dzFade .3s ease}
.dzx-a-sheet.wait{background:linear-gradient(90deg,#F1F4F6 30%,#fff 50%,#F1F4F6 70%);background-size:220% 100%;animation:dzSk 1.3s linear infinite}
/* the More menu's plug-in items show their icons (the host's menu hides icons for its tick lists) */
.dz-menu>button[data-xm] svg{visibility:visible;color:var(--icon,var(--ink));opacity:.85}
.dzx-a-pill{font-style:normal;display:inline-block;margin-left:8px;vertical-align:2px;padding:2px 8px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--tint);color:var(--primary);font-size:10.5px;font-weight:500;letter-spacing:.2px}

/* the sheets: Design in Three Steps, Make Matching Pieces (X.modal, wide) */
.dz-xmodal.dzx-a-qs .dz-modal-box,.dz-xmodal.dzx-a-mt .dz-modal-box{padding:0}
.dzx-a-qs-in{display:flex;flex-direction:column;min-height:100%}
.dzx-a-qs-h{padding:30px 64px 0 32px}
.dzx-a-qs-h h2{font-size:26px;font-weight:500;margin:6px 0 6px;letter-spacing:-.3px}
.dzx-a-qs-h .dz-lead{max-width:640px;margin:0}
.dzx-a-steps{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:18px 0 0;padding:0}
.dzx-a-steps button{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px 0 4px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:transparent;font:inherit;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.dzx-a-steps button:disabled{cursor:default}
.dzx-a-steps button:not(:disabled):hover{background:var(--panel);color:var(--ink)}
.dzx-a-steps i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11.5px;font-weight:500;background:var(--panel);color:var(--muted)}
.dzx-a-steps .on button{color:var(--ink);font-weight:500}
.dzx-a-steps .on i{background:var(--primary);color:#fff}
.dzx-a-steps .done i{background:var(--tint);color:var(--primary)}
.dzx-a-stepln{width:26px;height:1px;background:var(--line)}
.dzx-a-qs-b{flex:1;padding:24px 32px 28px}
.dzx-a-qs-f{position:sticky;bottom:0;z-index:3;margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 32px calc(14px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-top:1px solid var(--line)}
.dzx-a-qs-f .btn{height:40px;padding:0 18px;gap:8px;font-size:13px}
.dzx-a-qs-f .btn:disabled{opacity:.45;cursor:default}
.dzx-a-qs-f .dz-btn2{height:40px;padding:0 14px}
.dzx-a-qs-sum,.dzx-a-qs-tip{font-size:12.5px;color:var(--muted);text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dzx-a-qs-f>.dzx-a-qs-sum:first-child{text-align:left}
.dzx-a-qs .dz-h,.dzx-a-mt .dz-h{margin:26px 0 12px}
.dzx-a-qs .dzx-a-h:first-child,.dzx-a-mt .dz-h:first-child{margin-top:0}
.dzx-a-showall{display:flex;margin:20px auto 0}
/* step 1: products */
.dzx-a-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:20px 14px}
.dzx-a-prod{display:grid;align-content:start;gap:3px;padding:0;border:0;background:transparent;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.dzx-a-prod .dzx-a-frame{margin:0 0 7px}
.dzx-a-prod:hover .dzx-a-frame{background:var(--tint)}
.dzx-a-prod:hover .dzx-a-sheet{transform:translateY(-2px)}
.dzx-a-prod[aria-pressed="true"] .dzx-a-frame{background:var(--tint);box-shadow:var(--ring)}
.dzx-a-prod:focus-visible{outline:0}.dzx-a-prod:focus-visible .dzx-a-frame{box-shadow:var(--ring)}
.dzx-a-prod b{font-size:13px;font-weight:500;line-height:1.3}
.dzx-a-prod small{font-size:11.5px;line-height:1.4;color:var(--muted)}
/* step 2: the business */
.dzx-a-trades{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.dzx-a-trade{display:grid;justify-items:center;align-content:start;gap:8px;padding:14px 8px 12px;border:0;border-radius:var(--radius);background:var(--panel);font:inherit;font-size:12px;font-weight:500;line-height:1.3;color:var(--ink);text-align:center;cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-a-trade-ic{width:40px;height:40px;border-radius:var(--radius);background:#fff;color:var(--primary);display:grid;place-items:center}
.dzx-a-trade:hover{background:var(--tint)}
.dzx-a-trade[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);font-weight:500}
.dzx-a-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dzx-a-fld{display:grid;gap:6px;margin:0;min-width:0}
.dzx-a-form .dzx-a-fld.wide{grid-column:1/-1}
.dzx-a-fld>span{font-size:12px;font-weight:500;color:var(--ink)}
.dzx-a-fld input{width:100%;min-width:0;height:40px;border:0;border-radius:var(--radius);background:var(--panel);padding:0 12px;font:inherit;font-size:13.5px;color:var(--ink)}
.dzx-a-fld input:focus{outline:0;background:#fff;box-shadow:var(--ring)}
.dzx-a-fld input::placeholder{color:#9AA5AE}
.dzx-a-logo{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;margin:20px 0 0;padding:12px 14px;border:1.5px dashed var(--tint-dk);border-radius:var(--radius);background:#fff;font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
button.dzx-a-logo:hover{background:var(--tint);border-color:rgba(var(--prgb),.45)}
.dzx-a-logo.has{border:0;background:var(--panel);cursor:default}
.dzx-a-logo-ic{width:44px;height:44px;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center;justify-self:center}
.dzx-a-logo-im{width:52px;height:52px;border-radius:var(--radius-sm);background:#fff;display:grid;place-items:center;padding:6px;box-shadow:0 0 0 .5px rgba(25,32,38,.1)}
.dzx-a-logo-im img{max-width:100%;max-height:100%;object-fit:contain}
.dzx-a-logo-t{display:grid;gap:2px;min-width:0}
.dzx-a-logo-t b{font-size:13px;font-weight:500}
.dzx-a-logo-t small{font-size:12px;line-height:1.45;color:var(--muted)}
.dzx-a-logo-a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dzx-a-logo-a .dz-btn2{background:#fff}
/* step 3: a style and six designs */
.dzx-a-row{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.dzx-a-lbl{flex:none;width:42px;font-size:12px;font-weight:500;color:var(--ink)}
.dzx-a-row .dz-chips{flex:1;min-width:0}
.dzx-a-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px;margin:20px 0 0}
.dzx-a-card{position:relative;display:grid;align-content:start;gap:3px;padding:0;border:0;background:transparent;font:inherit;color:var(--ink);text-align:left;cursor:pointer;animation:dzxARise .35s ease both;animation-delay:calc(var(--i,0) * 45ms)}
.dzx-a-card .dzx-a-frame{margin:0 0 8px}
.dzx-a-card:hover .dzx-a-frame,.dzx-a-card:focus-visible .dzx-a-frame{background:var(--tint);box-shadow:var(--ring)}
.dzx-a-card:focus-visible{outline:0}
.dzx-a-card:hover .dzx-a-sheet{transform:translateY(-3px);box-shadow:0 0 0 .5px rgba(25,32,38,.10),0 2px 4px rgba(25,32,38,.08),0 16px 32px rgba(25,32,38,.16)}
.dzx-a-card-t b{display:block;font-size:13.5px;font-weight:500;line-height:1.3}
.dzx-a-card-t small{display:block;font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:1px}
.dzx-a-open{position:absolute;left:50%;bottom:12px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-size:12px;font-weight:500;white-space:nowrap;opacity:0;transform:translate(-50%,6px);transition:opacity .18s,transform .18s;pointer-events:none;box-shadow:0 6px 16px rgba(25,32,38,.2)}
.dzx-a-card:hover .dzx-a-open,.dzx-a-card:focus-visible .dzx-a-open{opacity:1;transform:translate(-50%,0)}
.dzx-a-morerow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:24px 0 0}
.dzx-a-morerow .dz-hint{margin:0}
/* step 2, What Goes On It: the Use My Brand switch, the words of a label or an occasion, the plain page */
.dzx-a-ub{align-items:center;gap:16px;margin:0 0 22px;padding:10px 14px;border-radius:var(--radius);background:var(--panel)}
.dzx-a-ub>span{display:grid;gap:2px;min-width:0}
.dzx-a-ub b{font-size:13px;font-weight:500}
.dzx-a-ub small{font-size:12px;line-height:1.45;font-weight:400;color:var(--muted)}
.dzx-a-ub.off{cursor:default}
.dzx-a-ub.off .dz-switch{opacity:.45}
.dzx-a-fld textarea{width:100%;min-width:0;border:0;border-radius:var(--radius);background:var(--panel);padding:10px 12px;font:inherit;font-size:13.5px;line-height:1.45;color:var(--ink);resize:vertical}
.dzx-a-fld textarea:focus{outline:0;background:#fff;box-shadow:var(--ring)}
.dzx-a-fld textarea::placeholder{color:#9AA5AE}
.dzx-a-plain{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;padding:14px 16px;border-radius:var(--radius);background:var(--panel)}
.dzx-a-plain-ic{width:44px;height:44px;border-radius:var(--radius);background:#fff;color:var(--primary);display:grid;place-items:center}
.dzx-a-plain-t{display:grid;gap:2px;min-width:0}
.dzx-a-plain-t b{font-size:13px;font-weight:500}
.dzx-a-plain-t small{font-size:12px;line-height:1.5;color:var(--muted)}
@keyframes dzxARise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Make Matching Pieces: tick the products, then open the new designs */
.dzx-a-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:20px 14px}
.dzx-a-mcard{position:relative;display:grid;align-content:start;gap:3px;cursor:pointer}
.dzx-a-mcard input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.dzx-a-mcard .dzx-a-frame{margin:0 0 7px}
.dzx-a-mcard:hover .dzx-a-frame{background:var(--tint)}
.dzx-a-mcard:has(input:checked) .dzx-a-frame{background:var(--tint);box-shadow:var(--ring)}
.dzx-a-mcard:has(input:focus-visible) .dzx-a-frame{box-shadow:var(--ring)}
.dzx-a-mcard b{font-size:13px;font-weight:500;line-height:1.3}
.dzx-a-mcard small{font-size:11.5px;color:var(--muted)}
.dzx-a-tick{position:absolute;right:9px;top:9px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff;color:transparent;box-shadow:inset 0 0 0 1.5px var(--tint-dk),0 1px 2px rgba(25,32,38,.08);transition:background .15s,color .15s,box-shadow .15s}
.dzx-a-mcard:has(input:checked) .dzx-a-tick{background:var(--primary);color:#fff;box-shadow:none}
.dzx-a-mcard.made{cursor:default}
.dzx-a-mcard.made .dzx-a-frame{opacity:.7}
.dzx-a-mcard.made .dzx-a-tick{background:var(--tint);color:var(--primary);box-shadow:none}
.dzx-a-done{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border-radius:var(--radius);background:var(--tint);margin:0 0 18px}
.dzx-a-done-ic{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ok,var(--success));display:grid;place-items:center}
.dzx-a-done b{display:block;font-size:14px;font-weight:500}
.dzx-a-done small{display:block;font-size:12.5px;color:var(--ink);opacity:.8;line-height:1.5;margin-top:2px}
.dzx-a-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.dzx-a-setc{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:var(--radius);background:#fff;box-shadow:var(--card-sh)}
.dzx-a-setim{width:64px;height:48px;border-radius:var(--radius-sm);background:var(--panel);display:grid;place-items:center;overflow:hidden}
.dzx-a-setim img{max-width:88%;max-height:84%;object-fit:contain;box-shadow:0 1px 3px rgba(25,32,38,.18)}
.dzx-a-sett{display:grid;min-width:0}
.dzx-a-sett b{font-size:13px;font-weight:500;line-height:1.3}
.dzx-a-sett small{font-size:11.5px;color:var(--muted)}

/* blocks in Check and Finish: Make Matching Pieces, Ask Us to Tidy It */
.dzx-a-fin{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border-radius:var(--radius);background:var(--panel)}
.dzx-a-fin-ic{width:38px;height:38px;border-radius:var(--radius-sm);background:#fff;color:var(--primary);display:grid;place-items:center}
.dzx-a-fin-t b{display:block;font-size:13px;font-weight:500}
.dzx-a-fin-t small{display:block;font-size:12px;line-height:1.45;color:var(--muted);margin-top:1px}
.dzx-a-fin .dz-btn2{background:#fff}
.dzx-a-ask{display:grid;grid-template-columns:38px minmax(0,1fr) 24px;align-items:start;gap:12px;padding:12px;border-radius:var(--radius);background:var(--panel);cursor:pointer;transition:background .15s,box-shadow .15s;margin:0 0 4px}
.dzx-a-ask:hover{background:var(--tint)}
.dzx-a-ask input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.dzx-a-ask:has(input:checked){background:var(--tint);box-shadow:var(--ring)}
.dzx-a-ask:has(input:focus-visible){box-shadow:var(--ring)}
.dzx-a-ask-ic{width:38px;height:38px;border-radius:var(--radius-sm);background:#fff;color:var(--primary);display:grid;place-items:center}
.dzx-a-ask-t b{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:500}
.dzx-a-ask-t em{font-style:normal;font-size:12px;font-weight:500;color:var(--primary)}
.dzx-a-ask-t small{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:2px}
.dzx-a-ask-box{width:22px;height:22px;margin-top:8px;border-radius:var(--radius);display:grid;place-items:center;background:#fff;color:transparent;box-shadow:inset 0 0 0 1.5px var(--tint-dk)}
.dzx-a-ask:has(input:checked) .dzx-a-ask-box{background:var(--primary);color:#fff;box-shadow:none}

/* the first-visit tour: a soft spotlight and a coach card */
.dzx-a-tour{position:fixed;inset:0;z-index:150;animation:dzFade .2s ease}
.dzx-a-spot{position:fixed;border-radius:var(--radius);box-shadow:0 0 0 9999px rgba(18,22,27,.46),0 0 0 2px rgba(255,255,255,.65),0 0 28px 6px rgba(255,255,255,.18);transition:left .32s cubic-bezier(.32,.72,0,1),top .32s cubic-bezier(.32,.72,0,1),width .32s cubic-bezier(.32,.72,0,1),height .32s cubic-bezier(.32,.72,0,1);pointer-events:none}
.dzx-a-spot.none{box-shadow:0 0 0 9999px rgba(18,22,27,.46)}
.dzx-a-coach{position:fixed;width:min(320px,calc(100vw - 24px));padding:18px 18px 16px;border-radius:var(--radius);background:#fff;color:var(--ink);box-shadow:0 0 0 .5px rgba(25,32,38,.08),0 12px 40px rgba(10,16,22,.28);transition:left .32s cubic-bezier(.32,.72,0,1),top .32s cubic-bezier(.32,.72,0,1);outline:0}
.dzx-a-coach-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.dzx-a-coach-n{font-size:11.5px;font-weight:500;color:var(--primary);letter-spacing:.2px}
.dzx-a-coach-skip{border:0;background:transparent;padding:4px 0;min-height:28px;font:inherit;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer}
.dzx-a-coach-skip:hover{color:var(--ink);text-decoration:underline}
.dzx-a-coach h3{font-size:17px;font-weight:500;margin:0 0 6px;letter-spacing:-.1px}
.dzx-a-coach p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}
.dzx-a-coach-dots{display:flex;gap:5px;margin:14px 0 0}
.dzx-a-coach-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:width .2s,background .2s}
.dzx-a-coach-dots i.on{width:18px;background:var(--primary)}
.dzx-a-coach-btns{display:flex;justify-content:flex-end;gap:8px;margin:-6px 0 0}
.dzx-a-coach-btns .btn{height:36px;padding:0 16px;font-size:13px}
.dzx-a-coach-btns .dz-btn2{height:36px}
/* What's This: a small tip beside a tool */
.dzx-a-tip{position:fixed;z-index:145;width:max-content;max-width:240px;padding:10px 12px;border-radius:var(--radius);background:var(--primary);color:#fff;box-shadow:0 10px 28px rgba(10,16,22,.25);pointer-events:none;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.dzx-a-tip.up{transform:translateY(4px)}
.dzx-a-tip.on{opacity:1;transform:none}
.dzx-a-tip-k{display:block;font-size:10.5px;font-weight:500;letter-spacing:.3px;color:rgba(255,255,255,.62);margin:0 0 2px}
.dzx-a-tip b{display:block;font-size:12.5px;font-weight:500;margin:0 0 2px}
.dzx-a-tip span:last-child{display:block;font-size:12px;line-height:1.45;color:rgba(255,255,255,.86)}

/* Version History */
.dz-xmodal.dzx-a-vh .dz-modal-box{width:min(640px,100%)}
.dzx-a-vh-h{font-size:24px;font-weight:500;margin:6px 40px 6px 0;letter-spacing:-.3px}
.dzx-a-vsave{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin:18px 0 6px;padding:14px;border-radius:var(--radius);background:var(--panel)}
.dzx-a-vsave .dzx-a-fld input{background:#fff}
.dzx-a-vsave .btn{height:40px;padding:0 16px;gap:8px;font-size:13px;white-space:nowrap}
.dzx-a-vlist{list-style:none;margin:12px 0 0;padding:0;display:grid}
.dzx-a-vrow{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 4px;border-bottom:1px solid var(--line)}
.dzx-a-vrow:last-child{border-bottom:0}
.dzx-a-vim{width:56px;height:56px;border-radius:var(--radius-sm);background:var(--panel);display:grid;place-items:center}
.dzx-a-vsheet{display:block;background:#fff;overflow:hidden;box-shadow:0 0 0 .5px rgba(25,32,38,.12),0 1px 3px rgba(25,32,38,.12)}
.dzx-a-vsheet img{display:block;width:100%;height:100%;object-fit:cover}
.dzx-a-vt{display:grid;gap:2px;min-width:0}
.dzx-a-vt b{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-a-vt small{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:11.5px;color:var(--muted)}
.dzx-a-vtag{font-style:normal;font-size:10.5px;font-weight:500;color:var(--muted);background:var(--panel);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:1px 7px}
.dzx-a-va{display:flex;align-items:center;gap:2px}
.dzx-a-va .dz-btn2{margin-right:4px}
.dzx-a-vnone{display:grid;justify-items:center;gap:8px;padding:28px 12px;color:var(--muted);text-align:center}
.dzx-a-vnone svg{color:var(--primary);opacity:.8}
.dzx-a-vnone p{margin:0;font-size:13px;max-width:340px;line-height:1.5}
.dzx-a-vfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.dzx-a-vfoot .dz-hint{margin:0}

/* phones and narrow windows: the sheets rise from the bottom (the host's .dz-modal rules), one column of fields, two of tiles */
@media (max-width:1000px){.dzx-a-trades{grid-template-columns:repeat(3,minmax(0,1fr))}.dzx-a-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .dzx-a-qs-h{padding:24px 56px 0 18px}
  .dzx-a-qs-h h2{font-size:22px}
  .dzx-a-steps{margin-top:14px;gap:4px}
  .dzx-a-steps li:not(.on) button span{display:none}
  .dzx-a-steps button{padding:0 8px 0 4px}
  .dzx-a-stepln{width:14px}
  .dzx-a-qs-b{padding:18px 18px 22px}
  .dzx-a-qs-f{padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));gap:10px}
  .dzx-a-qs-f .dzx-a-qs-sum{display:none}
  .dzx-a-qs-f .dzx-a-qs-tip{text-align:right}
  .dzx-a-prods,.dzx-a-mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .dzx-a-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .dzx-a-trades{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .dzx-a-trade{grid-template-columns:34px minmax(0,1fr);justify-items:start;align-items:center;gap:10px;padding:8px 10px;text-align:left}
  .dzx-a-trade-ic{width:34px;height:34px}
  .dzx-a-trade-ic svg{width:19px;height:19px}
  .dzx-a-form{grid-template-columns:1fr;gap:12px}
  .dzx-a-logo{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .dzx-a-logo-im{width:44px;height:44px}
  .dzx-a-logo-a{grid-column:1/-1;justify-content:flex-start}
  .dzx-a-row{align-items:flex-start;gap:10px}
  .dzx-a-lbl{padding-top:7px}
  .dzx-a-open{display:none}
  .dzx-a-fin{grid-template-columns:38px minmax(0,1fr)}
  .dzx-a-fin .dz-btn2{grid-column:2;justify-self:start}
  .dzx-a-vsave{grid-template-columns:1fr}
  .dzx-a-vrow{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .dzx-a-vim{width:48px;height:48px}
  .dzx-a-va{grid-column:2}
  .dzx-a-tip{max-width:220px}
}
@media (max-width:400px){.dzx-a-stepln{display:none}.dzx-a-steps{gap:2px}.dzx-a-trade{font-size:11.5px;padding:8px}.dzx-a-trade-ic{width:30px;height:30px}.dzx-a-qs-f .dz-btn2{padding:0 10px}.dzx-a-qs-f .btn{padding:0 14px}}
@media (prefers-reduced-motion:reduce){.dzx-a-card,.dzx-a-tour,.dzx-a-sheet.live img{animation:none}.dzx-a-spot,.dzx-a-coach{transition:none}}
/* x-plugins A end */

/* x-plugins B start: live check, tidy up, colour tools */
/* Live Print Check (js/designs/x-livecheck.js): honey badges on the page's corners, a popover with Fix, the status in the page
   inspector and beside Check and Finish; honey --attn tokens for every warning, never a bar down the side */
.dz-ov-check{transition:opacity .15s}
.dz-ov-check.dzx-b-moving{opacity:0}
.dzx-b-badge{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;border:0;border-radius:50%;background:var(--attn);color:#fff;display:grid;place-items:center;cursor:pointer;pointer-events:auto;box-shadow:0 0 0 2px #fff,0 2px 8px rgba(25,32,38,.28);transition:transform .15s,box-shadow .15s;animation:dzxbIn .22s cubic-bezier(.3,.7,.4,1.3)}
@media (max-width:860px){.dzx-b-badge{width:28px;height:28px;margin:-14px 0 0 -14px}}   /* a thumb can reach it (audit, 24 Oct 2026) */
.dzx-b-badge[hidden]{display:none}
.dzx-b-badge b{font-size:11px;font-weight:500;line-height:1}
.dzx-b-badge:hover{transform:scale(1.1)}
.dzx-b-badge:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--attn-ring)}
.dzx-b-badge.on{box-shadow:0 0 0 2px #fff,0 0 0 6px var(--attn-ring),0 2px 8px rgba(25,32,38,.28)}
@keyframes dzxbIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.dzx-b-pop{position:absolute;left:0;top:0;z-index:13;width:300px;max-width:calc(100% - 20px);padding:12px 12px 10px 14px;background:#fff;border-radius:var(--radius);box-shadow:0 0 0 .5px rgba(25,32,38,.1),0 14px 40px rgba(20,30,40,.18);font-size:12.5px;color:var(--ink)}
.dzx-b-pop[hidden]{display:none}
.dzx-b-poph{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.dzx-b-poph>div{flex:1;min-width:0;display:grid;gap:1px}
.dzx-b-poph b{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-b-poph small{font-size:11.5px;color:var(--muted)}
.dzx-b-poph .dz-ib{width:30px;height:30px;color:var(--muted)}
.dzx-b-popic{width:30px;height:30px;flex:none;border-radius:var(--radius);background:var(--attn-tint);color:var(--attn);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--attn-line)}
.dzx-b-popl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dzx-b-popl li{padding:10px 12px;border-radius:var(--radius-sm);background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line)}
.dzx-b-popl p{margin:0 0 9px;font-size:12.5px;line-height:1.5}
.dzx-b-popb{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dzx-b-popb .dz-btn2{background:#fff;box-shadow:0 0 0 1px rgba(25,32,38,.08)}
.dzx-b-popb .dz-btn2:hover{background:#FFFDF8}
.dzx-b-popb .dzx-b-fix{font-weight:500}
.dzx-b-leave{margin-left:auto;font-size:12px;color:var(--muted)}
.dzx-b-swp{display:inline-block;width:14px;height:14px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(25,32,38,.16)}
.dzx-b-popn{margin:9px 2px 0;font-size:11px;line-height:1.45;color:var(--muted)}
/* the page inspector: the switch, then the status */
.dzx-b-lc{gap:6px}
.dzx-b-lc>.dz-swrow{min-height:32px;font-size:12px;font-weight:500}
.dzx-b-chip{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:var(--radius);background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-b-chip>svg{flex:none}
.dzx-b-chip>span{flex:1;min-width:0;display:grid;gap:1px}
.dzx-b-chip b{font-size:13px;font-weight:500}
.dzx-b-chip small{font-size:11.5px;font-weight:400;color:var(--muted);line-height:1.4}
.dzx-b-chip.ok>svg:first-child{color:var(--primary)}
.dzx-b-chip.ok{cursor:default}
.dzx-b-chip.warn{background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line)}
.dzx-b-chip.warn>svg:first-child{color:var(--attn)}
.dzx-b-chip.warn>svg:last-child{color:var(--muted)}
.dzx-b-chip.warn:hover{box-shadow:inset 0 0 0 1px var(--attn-line),0 0 0 3px var(--attn-ring)}
.dzx-b-chip:focus-visible{outline:0;box-shadow:var(--ring)}
.dzx-b-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:1px}
.dzx-b-list button{display:grid;gap:1px;width:100%;padding:7px 10px 7px 24px;border:0;border-radius:var(--radius-sm);background:transparent;font:inherit;font-size:12px;color:var(--ink);text-align:left;cursor:pointer;position:relative}
.dzx-b-list button::before{content:"";position:absolute;left:10px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--attn)}
.dzx-b-list button:hover{background:var(--panel)}
.dzx-b-list span{min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-b-list em{font-style:normal;font-weight:400;color:var(--muted);font-size:11px}
.dzx-b-list small{font-size:11.5px;color:var(--muted)}
.dzx-b-lc .dz-hint{margin:6px 0 0}
/* the title bar, beside Check and Finish */
.dzx-b-bar{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-b-bar[hidden]{display:none}
.dzx-b-bar svg{flex:none}
.dzx-b-bar.ok svg{color:var(--primary)}
.dzx-b-bar.ok:hover{background:var(--panel)}
.dzx-b-bar.warn{background:var(--attn-tint);color:var(--ink);box-shadow:inset 0 0 0 1px var(--attn-line)}
.dzx-b-bar.warn svg{color:var(--attn)}
.dzx-b-bar.warn:hover{box-shadow:inset 0 0 0 1px var(--attn-line),0 0 0 3px var(--attn-ring)}
.dzx-b-bar-n{font-weight:500}
.dzx-b-bar:focus-visible{outline:0;box-shadow:var(--ring)}
@media (max-width:1199px){.dzx-b-bar-t{display:none}.dzx-b-bar{padding:0 11px 0 9px}}
@media (max-width:860px){.dzx-b-bar.ok{display:none}.dzx-b-bar{height:32px;padding:0 9px 0 7px;gap:4px}}
/* a short dark note with Undo */
.dzx-b-toast{position:fixed;left:50%;bottom:28px;z-index:140;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 32px));padding:9px 9px 9px 18px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-size:13px;font-weight:500;line-height:1.4;box-shadow:0 12px 32px rgba(0,0,0,.25);opacity:0;transform:translate(-50%,12px);transition:opacity .2s,transform .2s;pointer-events:none}
.dzx-b-toast:not(:has(button)){padding-right:18px}
.dzx-b-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dzx-b-toast button{flex:none;height:30px;padding:0 14px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:rgba(255,255,255,.15);color:#fff;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.dzx-b-toast button:hover{background:rgba(255,255,255,.24)}
@media (max-width:860px){.dzx-b-toast{bottom:calc(78px + env(safe-area-inset-bottom));border-radius:var(--radius);corner-shape:round;padding-left:14px}}
/* the field Fix sends people to (Your Details) */
.dzx-b-hl{box-shadow:var(--ring)!important;background:#fff!important}
/* Tidy Up (js/designs/x-tidy.js) */
.dzx-b-tidybtn svg,.dzx-b-eyebtn svg{color:var(--primary)}
.dz-hint.dzx-b-tight{margin:6px 0 0}
.dz-menu>button[data-xm^="dzxb"] svg{visibility:visible;color:var(--primary)}
/* Colour tools (js/designs/x-colour.js): Match a Colour, From Your Logo, the print colour note, the sampler */
.dzx-b-col{gap:8px}
.dzx-b-col>.dz-btn2:not(.wide){justify-self:start}
.dzx-b-logo{display:grid;gap:8px;margin:4px 0 0}
.dzx-b-sub{font-size:11.5px;font-weight:500;color:var(--muted)}
.dzx-b-logo .dzi-link{justify-self:start}
.dzx-b-logo .dzi-link svg{color:var(--primary)}
.dzx-b-logo .dz-btn2 svg{color:var(--primary)}
.dzx-b-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 8px;align-items:start;min-width:0;max-width:100%;box-sizing:border-box;margin:4px 0 0;padding:10px 10px 10px 11px;border-radius:var(--radius);background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line);font-weight:400}
.dzx-b-note-ic{color:var(--attn);margin-top:1px;display:grid}
.dzx-b-note p{margin:0;font-size:12px;font-weight:500;line-height:1.45;color:var(--ink)}
.dzx-b-note .dzx-b-safe{grid-column:1/-1;justify-self:start}
.dzx-b-safe{display:inline-flex;align-items:center;gap:7px;height:30px;max-width:100%;min-width:0;padding:0 11px 0 7px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;box-shadow:0 0 0 1px rgba(25,32,38,.08);font:inherit;font-size:12px;font-weight:500;color:var(--ink);white-space:nowrap;cursor:pointer}
.dzx-b-safe>span:last-child{overflow:hidden;text-overflow:ellipsis}
.dzx-b-safe:hover{background:#FFFDF8}
.dzx-b-pair{display:inline-flex;flex:none}
.dzx-b-pair i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1.5px #fff,inset 0 0 0 1px rgba(25,32,38,.14)}
.dzx-b-pair i+i{margin-left:-4px}
.dzx-b-samp{position:absolute;inset:0;z-index:20;cursor:crosshair;pointer-events:auto}
.dzx-b-samph{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:6px 6px 6px 14px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;box-shadow:var(--dz-float);font-size:12.5px;font-weight:500;color:var(--ink);cursor:default;white-space:nowrap}
.dzx-b-samph svg{flex:none;color:var(--primary)}
.dzx-b-samph span{overflow:hidden;text-overflow:ellipsis}
.dzx-b-samph button{flex:none;height:28px;padding:0 12px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font:inherit;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer}
.dzx-b-samph button:hover{background:var(--tint)}
.dzx-b-loupe{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;box-shadow:var(--dz-float);pointer-events:none}
.dzx-b-loupe[hidden]{display:none}
.dzx-b-loupe i{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(25,32,38,.16)}
.dzx-b-loupe b{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
/* x-plugins B end */

/* x-plugins C start: picture tools, background removal */
/* inspector: Picture (Move, Replace), Background, Adjust */
.dzx-c-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.dzx-c-btns .dz-btn2{height:38px;padding:0 10px}
.dzx-c-btns .dz-btn2:only-child{grid-column:1/-1}
.dzx-c-btns svg,.dzx-c-bgsec .dz-btn2 svg{flex:none;color:var(--icon,var(--ink))}
.dzx-c-pic .dz-hint,.dzx-c-bgsec .dz-hint{margin:2px 0 0;font-weight:400}
.dzx-c-state{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:7px 10px;border-radius:var(--radius);background:var(--tint);font-size:11.5px;font-weight:500;color:var(--ink)}
.dzx-c-link{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:500;color:var(--primary);cursor:pointer;white-space:nowrap}
.dzx-c-link:hover{text-decoration:underline;text-underline-offset:3px}
.dzx-c-link:focus-visible{outline:0;box-shadow:var(--ring);border-radius:var(--radius-sm)}
.dzx-c-bgsec .dz-btn2.wide{height:38px}
.dzx-c-bgsec .dzx-c-link{justify-self:start;margin-top:2px}
.dzx-c-cutuse{display:flex}
.dzx-c-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--tint);color:var(--primary);font-size:10.5px;font-weight:500}
.dzx-c-looks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dzx-c-looks button{display:grid;gap:4px;padding:4px 4px 6px;border:0;border-radius:var(--radius);background:var(--panel);cursor:pointer;font:inherit;font-size:10px;font-weight:500;line-height:1.15;color:var(--ink);text-align:center}
.dzx-c-looks canvas{display:block;width:100%;aspect-ratio:7/5;height:auto;border-radius:var(--radius-sm);background-color:#fff;background-image:conic-gradient(#ECEEF0 25%,#fff 0 50%,#ECEEF0 0 75%,#fff 0);background-size:8px 8px}
.dzx-c-looks button:hover{background:var(--tint)}
.dzx-c-looks button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);color:var(--primary)}
.dzx-c-looks button:focus-visible{outline:0;box-shadow:var(--ring)}
.dzx-c-duos{display:grid;gap:10px;padding:10px 12px;border-radius:var(--radius);background:var(--panel)}
.dzx-c-duo{display:grid;gap:6px;font-size:11.5px;font-weight:500}
.dzx-c-duo .dz-sws{gap:6px}
.dzx-c-duo .dz-sw{width:24px;height:24px}
.dzx-c-duo .dz-sw.on{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--primary)}
.dzx-c-sl{margin:0 0 6px}
.dzx-c-sl:first-of-type{margin-top:4px}
.dzx-c-sl input[type=range]{background:linear-gradient(var(--line),var(--line)) center/1px 10px no-repeat}
/* Move Picture: the layer over the stage and its pill */
.dz-ov.dzx-c-pan{pointer-events:auto;touch-action:none;cursor:grab;z-index:20}
.dz-ov.dzx-c-pan.grab{cursor:grabbing}
.dzx-c-pancv{position:absolute;left:0;top:0;pointer-events:none}
.dzx-c-panbar{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:calc(100% - 24px);padding:5px 5px 5px 12px;background:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);box-shadow:var(--dz-float);cursor:default;white-space:nowrap}
.dzx-c-panlbl{display:flex;align-items:center;gap:9px;min-width:0;color:var(--ink)}
.dzx-c-panlbl svg{flex:none;color:var(--primary)}
.dzx-c-panlbl>span{display:grid;line-height:1.2;min-width:0}
.dzx-c-panlbl b{font-size:12.5px;font-weight:500}
.dzx-c-panlbl small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.dzx-c-sep{width:1px;height:22px;background:var(--dz-hair,var(--line));margin:0 2px;flex:none}
.dzx-c-zoom{display:flex;align-items:center;gap:2px}
.dzx-c-zoom input[type=range]{width:110px;height:22px;margin:0 2px;accent-color:var(--primary);background:transparent;padding:0}
.dzx-c-zoom output{min-width:40px;font-size:12px;font-weight:500;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.dzx-c-zb{width:32px;height:32px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--icon,var(--ink));display:grid;place-items:center;cursor:pointer}
.dzx-c-zb:hover{background:var(--panel)}
.dzx-c-zb:focus-visible,.dzx-c-done:focus-visible{outline:0;box-shadow:var(--ring)}
.btn.sm.dzx-c-done{height:32px;padding:0 14px 0 11px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);gap:6px;font-size:12.5px;display:inline-flex;align-items:center}
.dz3.dzx-c-panning .dz-float,.dz3.dzx-c-panning #dzHandles,.dz3.dzx-c-panning .dz-edge,.dz3.dzx-c-panning .dz-view,.dz3.dzx-c-panning #dzSides{display:none!important}
@media (max-width:860px){.dzx-c-panbar{top:10px;padding:4px 4px 4px 10px}.dzx-c-panlbl small{display:none}.dzx-c-zoom input[type=range]{width:84px}}
@media (max-width:440px){.dzx-c-panlbl,.dzx-c-sep{display:none}.dzx-c-panbar{padding-left:4px;gap:2px}.dzx-c-zoom output{min-width:34px}.dzx-c-zoom input[type=range]{width:72px}}
/* drop a file on a picture: the frame is named */
.dz-ov.dzx-c-drop{pointer-events:none;opacity:0;transition:opacity .12s}
.dz-ov.dzx-c-drop.on{opacity:1}
.dzx-c-dropf{position:absolute;left:0;top:0;transform-origin:0 0;border-radius:var(--radius-sm);box-shadow:0 0 0 2.5px var(--primary),0 0 0 6px rgba(var(--prgb),.18);background:rgba(var(--prgb),.10);display:grid;place-items:center}
.dzx-c-dropf.round{border-radius:50%}
.dzx-c-droppill{display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 12px);padding:7px 13px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-size:12px;font-weight:500;box-shadow:0 6px 18px rgba(25,32,38,.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the checkerboard behind clear pictures */
.dzx-c-chk,.dzx-c-pv[data-bg="checks"] .dzx-c-pvbox{background-color:#fff;background-image:conic-gradient(#E7EAED 25%,#fff 0 50%,#E7EAED 0 75%,#fff 0);background-size:14px 14px}
.dzx-c-upcut{position:absolute;right:6px;top:6px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--icon,var(--ink));display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(25,32,38,.16),0 0 0 .5px rgba(25,32,38,.08);transition:background .15s,color .15s}
.dzx-c-upcut:hover{background:#fff;color:var(--primary)}
.dzx-c-upcut:focus-visible{outline:0;box-shadow:var(--ring)}
.dzx-c-chk .dzx-c-upcut{color:var(--primary)}
/* a note under the logo drop zone and in My Brand */
.dzx-c-prompt{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:start;margin:0 0 10px;padding:12px;border-radius:var(--radius);background:var(--tint)}
.dzx-c-prompt b{display:block;font-size:12.5px;font-weight:500;color:var(--ink)}
.dzx-c-prompt span:not(.dzx-c-cutic){display:block;font-size:11.5px;line-height:1.45;color:var(--ink);opacity:.82;margin-top:2px}
.dzx-c-pbtns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:9px}
.dzx-c-pbtns .dz-btn2{background:#fff}
.dz-bt-logos+.dzx-c-brand{margin-top:10px}
.dzx-c-cutic{width:44px;height:44px;flex:none;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center}
.dzx-c-cutic.sm{width:34px;height:34px;border-radius:var(--radius);background:#fff}
/* the Remove the Background window */
.dz-xmodal.dzx-c-cutm .dz-modal-box{width:min(860px,100%);padding:26px 26px 22px}
.dzx-c-cuth{display:flex;gap:14px;align-items:flex-start;margin:0 36px 18px 0}
.dzx-c-cuth h2{font-size:18px;font-weight:500;margin:1px 0 4px;color:var(--ink)}
.dzx-c-cuth p{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0;max-width:58ch}
.dzx-c-cutgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}
.dzx-c-pv{display:grid;grid-template-columns:1fr 1fr;gap:10px;--dzx-page:#F4F1EA}
.dzx-c-pv figure{margin:0;display:grid;gap:6px;min-width:0}
.dzx-c-pv figcaption{font-size:11.5px;font-weight:500;color:var(--muted);text-align:center}
.dzx-c-pvbox{display:grid;place-items:center;aspect-ratio:1;padding:12px;border-radius:var(--radius);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(25,32,38,.07)}
.dzx-c-pv[data-bg="white"] .dzx-c-pvbox{background:#fff}
.dzx-c-pv[data-bg="dark"] .dzx-c-pvbox{background:var(--ink)}
.dzx-c-pv[data-bg="page"] .dzx-c-pvbox{background:var(--dzx-page)}
.dzx-c-pvbox img,.dzx-c-pvbox canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;-webkit-user-drag:none}
.dzx-c-pvbox canvas{max-width:100%;max-height:100%}
.dzx-c-ctl{display:grid;gap:2px;min-width:0}
.dzx-c-modes{display:flex;margin:0 0 4px}
.dzx-c-modeline{font-size:12px;line-height:1.5;color:var(--muted);margin:4px 0 14px;min-height:36px}
.dzx-c-ctl .dzi-sl{margin-bottom:12px}
.dzx-c-ctl .dzi-sws{margin:0 0 14px}
.dzx-c-ctl .dz-swrow span{display:grid;gap:1px}
.dzx-c-ctl .dz-swrow small{font-size:11px;font-weight:400;color:var(--muted)}
.dzx-c-ctl [data-holesrow][hidden]{display:none}
.dzx-c-ctl>.dzi-l{margin-bottom:10px}
.dzx-c-bgs{display:flex}
.dzx-c-bgs>button{padding:0 6px}
.dzx-c-stat{min-height:18px;font-size:12px;line-height:1.45;color:var(--muted);margin:2px 0 12px}
.dzx-c-stat.warn{color:var(--ink);background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line);border-radius:var(--radius);padding:8px 10px}
.dzx-c-cutbtns{display:flex;flex-wrap:wrap;gap:8px}
.dzx-c-cutbtns .btn{display:inline-flex;align-items:center;gap:7px}
.dzx-c-cutbtns .btn[disabled]{opacity:.8;cursor:progress}
.dzx-c-cutbtns .dz-btn2{height:auto;min-height:40px}
.dzx-c-orig{justify-self:start;margin-top:12px}
.dzx-c-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:dzxCSpin .8s linear infinite}
@keyframes dzxCSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dzx-c-spin{animation:none}.dz-ov.dzx-c-drop{transition:none}}
@media (max-width:760px){.dz-xmodal.dzx-c-cutm .dz-modal-box{padding:20px 16px 18px}.dzx-c-cutgrid{grid-template-columns:1fr;gap:14px}.dzx-c-cuth{margin:0 34px 14px 0;gap:12px}.dzx-c-cuth .dzx-c-cutic{width:38px;height:38px;border-radius:var(--radius)}.dzx-c-cuth h2{font-size:16.5px}.dzx-c-modeline{min-height:0}.dzx-c-cutbtns .btn{flex:1;justify-content:center}}
/* x-plugins C end */

/* x-plugins D start: curved text, precision */
/* Curve and Text Effects (js/designs/x-curvedtext.js): tiles on the panel grey, tint and ring when chosen */
.dzx-d-curve .dzi-lh output,.dzx-d-out{font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.dzx-d-ctiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dzx-d-ctiles button,.dzx-d-fx button{display:grid;justify-items:center;align-content:center;gap:4px;min-height:58px;padding:8px 4px 7px;border:0;border-radius:var(--radius);background:var(--panel);cursor:pointer;color:var(--icon,var(--ink));font:inherit;font-size:10.5px;font-weight:500;line-height:1.15;text-align:center;transition:background .15s,box-shadow .15s}
.dzx-d-ctiles button span{color:var(--ink)}
.dzx-d-ctiles button:hover,.dzx-d-fx button:hover{background:var(--tint)}
.dzx-d-ctiles button[aria-pressed="true"],.dzx-d-fx button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);color:var(--primary)}
.dzx-d-ctiles button[aria-pressed="true"] span,.dzx-d-fx button[aria-pressed="true"] small{color:var(--primary)}
.dzx-d-bend{margin:12px 0 0}
.dzx-d-bend .dzi-sl{margin:0}
.dzx-d-ends{display:flex;justify-content:space-between;font-size:10.5px;font-weight:500;color:var(--muted);margin:2px 0 0}
.dzx-d-side{display:flex;margin:12px 0 0}
.dzx-d-curve .dz-hint.dzx-d-tight{margin:6px 0 12px;font-weight:400}
.dzx-d-curve .dzi-sl{margin:0 0 12px}
.dzx-d-curve .dz-btn2.wide{height:36px;margin:0 0 4px}
.dzx-d-curve .dz-btn2 svg{width:17px;height:17px}
.dzx-d-note{margin:10px 0 0;font-weight:400}
.dzx-d-fx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dzx-d-fx button{min-height:62px;gap:5px;padding:9px 3px 7px}
.dzx-d-fx small{font-size:10px;font-weight:500;color:var(--ink);white-space:nowrap}
.dzx-d-fxs{display:inline-block;font-size:19px;line-height:1.15;letter-spacing:.2px;max-width:100%;overflow:visible}
.dzx-d-fx.dk button{background:var(--ink)}
.dzx-d-fx.dk button:hover{background:#34475A}
.dzx-d-fx.dk button[aria-pressed="true"]{background:var(--ink)}
.dzx-d-fx.dk small{color:#fff}
.dzx-d-fxopts{display:grid;gap:8px;margin:12px 0 0;font-weight:400}
.dzx-d-sub{font-size:12px;font-weight:500;color:var(--ink)}
.dzx-d-fxopts .dzi-sl{margin:4px 0 0}
/* Rulers, guides and grid (js/designs/x-precision.js): white over the page, the panel grey beyond, millimetres from the trim's top left */
.dzx-d-ov{left:0;top:0}
.dzx-d-ov[hidden]{display:none}
.dzx-d-rt,.dzx-d-rl{position:absolute;display:block;pointer-events:auto;touch-action:none;z-index:2;box-shadow:0 0 0 .5px rgba(25,32,38,.06)}
.dzx-d-rt{cursor:row-resize}
.dzx-d-rl{cursor:col-resize}
.dzx-d-rt[hidden],.dzx-d-rl[hidden],.dzx-d-rc[hidden]{display:none}
.dzx-d-rc{position:absolute;left:0;top:0;z-index:3;display:grid;place-items:center;background:rgba(244,246,247,.98);box-shadow:inset -1px -1px 0 rgba(25,32,38,.13);font-size:7.5px;font-weight:500;letter-spacing:.3px;color:var(--muted);pointer-events:none}
.dzx-d-glines{position:absolute;left:0;top:0;z-index:1}
.dzx-d-g{position:absolute;pointer-events:auto;touch-action:none}
.dzx-d-gx{width:9px;cursor:col-resize}
.dzx-d-gy{height:9px;cursor:row-resize}
.dzx-d-g::after{content:"";position:absolute;background:rgba(26,140,214,.85)}
.dzx-d-gx::after{left:4px;top:0;bottom:0;width:1px}
.dzx-d-gy::after{top:4px;left:0;right:0;height:1px}
.dzx-d-g:hover::after,.dzx-d-g.drag::after{background:#1A8CD6;box-shadow:0 0 0 .5px #1A8CD6}
.dzx-d-g.hot::after{background:#E0457B}
.dzx-d-ov.dzx-d-drawing .dzx-d-g{pointer-events:none}
.dzx-d-glab{position:absolute;z-index:4;padding:3px 9px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:rgba(31,42,54,.9);color:#fff;font-size:11px;font-weight:500;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.dzx-d-glab[hidden]{display:none}
.dz-stage.dzx-d-hasrulers .dz-edge{top:30px}
@media (min-width:861px){@container (max-width:720px){.dz-stage.dzx-d-hasrulers .dz-view{top:30px}}}
@media (max-width:860px){.dz-stage.dzx-d-hasrulers .dz-pages{left:24px}}
.dz3 .dz-view .dzx-d-vbtn.on{color:var(--primary)}
.dzx-d-pop{width:288px}
.dzx-d-pop .dzx-d-sws{border-top:0;margin:0}
.dzx-d-pg .dzx-d-sws{margin:2px 0 6px;font-weight:500}
.dzx-d-pop .dz-swrow{margin-bottom:0}
.dzx-d-gsrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 2px;font-size:12.5px;font-weight:500;color:var(--ink)}
.dzx-d-grow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 0}
.dzx-d-grow span{font-size:12px;font-weight:400;color:var(--muted)}
.dzx-d-grow .dz-btn2[disabled]{opacity:.45}
.dzx-d-pg .dz-hint.dzx-d-tight,.dzx-d-pop .dz-hint.dzx-d-tight{margin:10px 0 0;font-weight:400}
/* Size and Position: small labelled number boxes, two across */
.dzx-d-num .dzi-lh small{font-size:11px;font-weight:400;color:var(--muted)}
.dzx-d-nums{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.dzx-d-nf{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;height:38px;padding:0 10px 0 0;border-radius:var(--radius);background:var(--panel);cursor:text;min-width:0;transition:background .15s,box-shadow .15s}
.dzx-d-nf:focus-within{background:#fff;box-shadow:var(--ring)}
.dzx-d-nf i{display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:500;color:var(--muted)}
.dzx-d-nf em{font-style:normal;font-size:11.5px;font-weight:400;color:var(--muted)}
.dz3 .dzx-d-nf input,.dz3 .dzx-d-nf input:focus{height:36px;padding:0 4px 0 0;background:transparent;box-shadow:none;font-variant-numeric:tabular-nums;font-weight:500;-moz-appearance:textfield}
.dz3 .dzx-d-nf input::-webkit-inner-spin-button,.dz3 .dzx-d-nf input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.dzx-d-nf.off{opacity:.55;cursor:default}
.dzx-d-safe .dz-seg>button:disabled{opacity:.4;cursor:default}
.dzx-d-nums .dz-btn2{height:38px;width:100%}
.dzx-d-num .dz-swrow{margin-top:8px;border-top:1px solid var(--dz-hair);border-bottom:1px solid var(--dz-hair)}
.dzx-d-num .dz-hint.dzx-d-tight{margin:8px 0 0;font-weight:400}
.dzx-d-space .dzx-d-nf{grid-template-columns:40px minmax(0,1fr) auto}
.dzx-d-sp{display:flex;margin:0}
.dzx-d-sp>button{padding:0 8px;gap:6px;font-size:11.5px}
.dzx-d-space .dz-hint.dzx-d-tight{margin:8px 0 0;font-weight:400}
/* x-plugins D end */

/* x-plugins E start: shape tools, cut lines */
/* the stage layer (x-shapes.js DZXE): what a mode is drawing and the pill at the top; input comes from the editor itself */
.dz-ov-e{pointer-events:none;overflow:hidden}
.dzx-e-svg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.dzx-e-pl-bg{fill:none;stroke:#fff;stroke-width:3.5;opacity:.85}
.dzx-e-pl{fill:none;stroke:var(--primary);stroke-width:1.5}
.dzx-e-a{fill:#fff;stroke:var(--primary);stroke-width:1.5;filter:drop-shadow(0 1px 1.5px rgba(25,32,38,.3))}
.dzx-e-a.on{fill:var(--primary);stroke:#fff}
.dzx-e-a.first{stroke:#E5007E}
.dzx-e-a.first.hot{fill:#E5007E;stroke:#fff}
.dzx-e-h{fill:#fff;stroke:var(--primary);stroke-width:1.5}
.dzx-e-hl{stroke:var(--primary);stroke-width:1;opacity:.65}
.dzx-e-cpv-bg{fill:none;stroke:#fff;stroke-width:3.2;opacity:.92}
.dzx-e-cpv{fill:none;stroke:#E5007E;stroke-width:1.5;stroke-dasharray:6 3.5;stroke-linejoin:round}
.dzx-e-rb{fill:none;stroke:#E5007E;stroke-width:1;stroke-dasharray:3 3;opacity:.75}
.dzx-e-size{font:500 11px Montserrat,Arial,sans-serif;fill:#E5007E;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.dzx-e-pill{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:2;pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:5px 5px 5px 14px;background:var(--primary);color:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);box-shadow:var(--dz-float);font-size:12.5px;line-height:1.3;white-space:nowrap}
.dzx-e-pill[hidden]{display:none}
.dzx-e-pill>b{display:flex;align-items:center;gap:7px;flex:none;font-weight:500}
.dzx-e-pill-h{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12px;opacity:.72}
.dzx-e-pill-b{display:flex;flex:none;gap:3px}
.dzx-e-pill-b button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:background .15s}
.dzx-e-pill-b button:hover:not(:disabled){background:rgba(255,255,255,.22)}
.dzx-e-pill-b button:disabled{opacity:.38;cursor:default}
.dzx-e-done{flex:none;height:28px;padding:0 15px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;color:var(--ink);font:inherit;font-size:12px;font-weight:500;cursor:pointer}
.dzx-e-moding .dz-edge{display:none!important}
.dzx-e-spin{display:inline-block;width:14px;height:14px;flex:none;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:dzxe-spin .7s linear infinite}
@keyframes dzxe-spin{to{transform:rotate(360deg)}}
.dzx-e-busy{cursor:progress!important;opacity:.75}
/* shape tools in the inspector */
.dzx-e-sec .dz-hint{margin:2px 0;font-weight:400}
.dzx-e-sec>.dz-btn2{margin-top:2px}
.dzx-e-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dzx-e-op{display:grid;justify-items:center;gap:5px;padding:11px 4px 9px;border:0;border-radius:var(--radius);background:var(--panel);color:var(--ink);font:inherit;font-size:11.5px;font-weight:500;cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-e-op svg{color:var(--primary)}
.dzx-e-op:hover{background:var(--tint)}
.dzx-e-op:focus-visible{outline:0;box-shadow:var(--ring)}
.dzx-e-btns{display:flex;flex-wrap:wrap;gap:6px}
.dzx-e-btns .dz-btn2{flex:1 1 auto}
.dzx-e-none{position:relative;background:#fff}
.dzx-e-none::after{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1.5px;border-radius:var(--radius-sm);background:#C2463B;transform:translateX(-50%) rotate(45deg)}
.dzx-e-redo{margin:-4px 0 16px}
/* the Cut Lines tool */
.dzx-e-lead{margin:0 0 14px}
.dzx-e-auto{background:var(--tint);border-radius:var(--radius);padding:14px 14px 12px}
.dzx-e-auto-h{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;margin:0 0 12px}
.dzx-e-tile{width:44px;height:44px;flex:none;border-radius:var(--radius);background:#fff;color:var(--primary);display:grid;place-items:center}
.dzx-e-auto-h b{display:block;font-size:13.5px;font-weight:500;color:var(--ink)}
.dzx-e-auto-h span{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--ink);opacity:.78}
.dzx-e-auto .dzi-sl{margin:0 0 4px}
.dzx-e-auto .dz-swrow{min-height:36px;font-size:12px}
.dzx-e-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
.dzx-e-go{width:100%;margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.dzx-e-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dzx-e-types button{display:grid;justify-items:center;gap:4px;padding:10px 4px 8px;border:0;border-radius:var(--radius);background:var(--panel);color:var(--ink);font:inherit;font-size:11.5px;font-weight:500;cursor:pointer;transition:background .15s}
.dzx-e-types button svg{color:#E5007E}
.dzx-e-types button:hover{background:var(--tint)}
.dzx-e-types button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);font-weight:500}
.dzx-e-types.sm button{padding:8px 4px 7px;font-size:11px}
.dzx-e-dep{margin:14px 0 0}
.dzx-e-dep .dz-seg,.dzx-e-cutsec .dz-seg{display:grid;grid-template-columns:1fr 1fr}
.dzx-e-dep .dz-hint{margin:2px 0 0;font-weight:400}
.dzx-e-list{display:grid;gap:2px}
.dzx-e-row{display:grid;grid-template-columns:36px minmax(0,1fr) 32px 32px;align-items:center;gap:6px;padding:6px 4px 6px 6px;border-radius:var(--radius)}
.dzx-e-row:hover{background:var(--panel)}
.dzx-e-mini{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--panel);display:grid;place-items:center}
.dzx-e-row:hover .dzx-e-mini{background:#fff}
.dzx-e-row.warn .dzx-e-mini{background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line)}
.dzx-e-rt{min-width:0}
.dzx-e-rt b{display:block;font-size:12.5px;font-weight:500;color:var(--ink)}
.dzx-e-rt b em{margin-left:4px;font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted)}
.dzx-e-rt small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;line-height:1.4;color:var(--muted)}
.dzx-e-row.warn small{color:var(--attn)}
.dzx-e-empty{display:flex;align-items:center;gap:10px;margin:0;padding:12px;border-radius:var(--radius);background:var(--panel);font-size:12px;line-height:1.45;color:var(--muted)}
.dzx-e-empty svg{flex:none}
.dzx-e-pane .dzi-tip{margin-top:18px}
.dz-tabs button[data-dztab="cut"][hidden]{display:none}
/* a cut line picked: its own controls */
.dzx-e-state{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 8px 8px 10px;border-radius:var(--radius);background:var(--panel);font-size:12px;line-height:1.4;color:var(--ink)}
.dzx-e-state>svg{flex:none;color:var(--primary)}
.dzx-e-state>span{flex:1;min-width:0}
.dzx-e-state.warn{background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line)}
.dzx-e-state.warn>svg{color:var(--attn)}
.dzx-e-state .dz-btn2{flex:none;background:#fff}
.dzx-e-warn{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:9px 10px;border-radius:var(--radius);background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line);font-size:12px;line-height:1.45;color:var(--ink)}
.dzx-e-warn>svg{flex:none;margin-top:1px;color:var(--attn)}
.dzx-e-warn[hidden]{display:none}
.dzx-e-cutsec>.dz-btn2{margin:0 0 12px}
.dzx-e-cutsec .dzi-note{margin:0 0 16px}
.dzx-e-cutsec .dzi-sl+.dz-btn2{margin-top:-4px}
/* Check and Finish, Preview */
.dzx-e-fin{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;padding:12px;border-radius:var(--radius);background:var(--panel)}
.dzx-e-fin-pvs{display:grid;gap:8px}
.dzx-e-fin-pv{position:relative;margin:0;width:96px;max-height:132px;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(25,32,38,.1),0 4px 12px rgba(25,32,38,.08)}
.dzx-e-fin-pv img,.dzx-e-fin-pv svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.dzx-e-fin-t{min-width:0}
.dzx-e-fin-t b{display:block;margin:0 0 3px;font-size:13.5px;font-weight:500;color:var(--ink)}
.dzx-e-fin-t span{display:block;font-size:12.5px;line-height:1.5;color:var(--ink)}
.dzx-e-fin-t .dzx-e-fin-n{margin-top:4px;font-size:12px;color:var(--muted)}
.dzx-e-fin-w{margin:10px 0 0}
.dzx-e-fin-w:empty{display:none}
.dzx-e-fin.sug{grid-template-columns:44px minmax(0,1fr);align-items:center;background:var(--tint)}
.dzx-e-fin.sug .dz-btn2{margin-top:10px;background:#fff}
.dzx-e-cutpv{display:grid;justify-items:center;gap:16px;max-width:100%}
.dzx-e-cutpv img{display:block;max-width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.5)) drop-shadow(0 0 .5px rgba(255,255,255,.7))}
.dzx-e-cutpv p{margin:0;font-size:12.5px;color:rgba(255,255,255,.7)}
@media (max-width:860px){
  .dzx-e-pill{top:10px;gap:6px;padding:4px 4px 4px 12px;max-width:calc(100% - 16px)}
  .dzx-e-pill-h{display:none}
  .dzx-e-pill-b button{padding:0 9px}
}
@media (max-width:420px){
  .dzx-e-pill>b{font-size:0;gap:0}
  .dzx-e-pill>b svg{width:18px;height:18px}
  .dzx-e-pill-b button svg{display:none}
  .dzx-e-fin{grid-template-columns:72px minmax(0,1fr);gap:10px}
  .dzx-e-fin-pv{width:72px}
  .dzx-e-tools{gap:4px}
}
/* x-plugins E end */

/* x-plugins F start: finishes, real-life preview, fold preview */
/* Finishes (x-finishes.js): the finish tiles, the Finishes tool, Preview With Finishes, Check and Finish */
.dzx-f-sec{margin:4px 0 16px}
.dzx-f-sec>.dzi-l{margin-bottom:8px}
.dzx-f-lead{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:-4px}
.dzx-f-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 12px}
.dzx-f-tiles button{display:grid;justify-items:center;align-content:start;gap:6px;min-width:0;padding:10px 2px 8px;border:0;border-radius:var(--radius);background:var(--panel);font:inherit;font-size:10.5px;font-weight:500;line-height:1.2;color:var(--ink);text-align:center;cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-f-tiles button:hover{background:var(--tint)}
.dzx-f-tiles button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);font-weight:500}
.dzx-f-tiles button span{display:block;width:100%;padding:0 2px}
.dzx-f-sw{display:block;width:26px;height:26px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(25,32,38,.14),inset 0 1px 1px rgba(255,255,255,.6)}
.dzx-f-sw.none{background:#fff linear-gradient(135deg,transparent 46%,rgba(25,32,38,.28) 47%,rgba(25,32,38,.28) 53%,transparent 54%)}
.dzx-f-sw.white{background:#fff repeating-linear-gradient(135deg,transparent 0 3px,rgba(120,132,145,.28) 3px 4px)!important;box-shadow:inset 0 0 0 1px rgba(25,32,38,.2)}
.dzx-f-sw.uv{box-shadow:inset 0 0 0 1px rgba(25,32,38,.16),inset 0 -3px 6px rgba(120,150,175,.25)}
.dzx-f-note{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;line-height:1.45;color:var(--ink);background:var(--tint);border-radius:var(--radius);padding:8px 10px;margin:0 0 10px}
.dzx-f-note svg{flex:none;color:var(--primary);margin-top:1px}
.dzx-f-warn{list-style:none;margin:8px 0 10px;padding:0;display:grid;gap:6px}
.dzx-f-warn li{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.45;color:var(--ink);background:var(--attn-tint,#FBF3E6);box-shadow:inset 0 0 0 1px var(--attn-line,rgba(183,121,31,.28));border-radius:var(--radius);padding:8px 10px}
.dzx-f-warn li svg{flex:none;color:var(--attn,#B7791F);margin-top:1px}
.dzx-f-warn li span{flex:1;min-width:0}
.dzx-f-warn li .dz-btn2{flex:none;height:28px;background:#fff}
.dzx-f-warnp{font-size:11.5px;line-height:1.45;background:var(--attn-tint,#FBF3E6);box-shadow:inset 0 0 0 1px var(--attn-line,rgba(183,121,31,.28));border-radius:var(--radius-sm);padding:7px 9px}
.dzx-f-pane .dz-h:first-of-type{margin-top:18px}
.dzx-f-hero{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:center;background:var(--panel);border-radius:var(--radius);padding:12px}
.dzx-f-hero p{margin:0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.dzx-f-hero p b{display:block;color:var(--ink);font-weight:500;font-size:12.5px;margin-bottom:2px}
.dzx-f-hcard{position:relative;width:86px;height:56px;border-radius:3px;background:linear-gradient(160deg,var(--ink),#1E2935);box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 18px rgba(25,32,38,.22);overflow:hidden;transform:rotate(-6deg)}
.dzx-f-hcard i{position:absolute;display:block}
.dzx-f-hcard .g{left:10px;top:11px;width:20px;height:20px;border-radius:50%;background:linear-gradient(115deg,#8B6B2E,#C9A452 25%,#F6E3A1 42%,#B8923F 60%,#EFD88F 78%,#8B6B2E);background-size:220% 220%;animation:dzxFShine 3.6s ease-in-out infinite}
.dzx-f-hcard .l1{left:10px;top:37px;width:44px;height:4px;border-radius:2px;background:linear-gradient(115deg,#8B6B2E,#F6E3A1 45%,#B8923F);background-size:220% 220%;animation:dzxFShine 3.6s ease-in-out infinite}
.dzx-f-hcard .l2{left:10px;top:45px;width:30px;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.dzx-f-hcard .u{right:-14px;top:-10px;width:48px;height:48px;border-radius:50%;background:linear-gradient(115deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.34) 48%,rgba(255,255,255,.04) 62%),rgba(255,255,255,.06);background-size:240% 240%;animation:dzxFShine 3.6s ease-in-out infinite;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
@keyframes dzxFShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.dzx-f-empty{display:flex;gap:9px;align-items:center;font-size:12px;line-height:1.45;color:var(--muted);background:var(--panel);border-radius:var(--radius);padding:11px 12px;margin:0}
.dzx-f-empty svg{flex:none;color:var(--primary)}
.dzx-f-grp{background:var(--panel);border-radius:var(--radius);padding:4px;margin:0 0 8px}
.dzx-f-grph{display:flex;align-items:center;gap:9px;padding:6px 6px 6px 8px;font-size:12.5px}
.dzx-f-grph .dzx-f-sw{width:20px;height:20px}
.dzx-f-grph b{font-weight:500}
.dzx-f-grph span{color:var(--muted);font-size:11.5px;margin-right:auto}
.dzx-f-rm{border:0;background:none;padding:4px 6px;font:inherit;font-size:11.5px;font-weight:500;color:var(--muted);cursor:pointer;border-radius:var(--radius-sm)}
.dzx-f-rm:hover{color:var(--danger);background:rgba(181,71,63,.08)}
.dzx-f-row{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 8px 6px 10px;border:0;border-radius:var(--radius-sm);background:#fff;font:inherit;font-size:12px;color:var(--ink);text-align:left;cursor:pointer;margin-top:3px;transition:box-shadow .15s}
.dzx-f-row:hover{box-shadow:var(--ring)}
.dzx-f-row span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-f-row small{flex:none;color:var(--muted);font-size:11px}
.dzx-f-row svg{flex:none;color:var(--muted)}
.dzx-f-cols{margin:0 0 12px}
.dzx-f-match{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);background:var(--panel);border-radius:var(--radius);padding:6px 6px 6px 10px;margin:0}
.dzx-f-match i{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(25,32,38,.15)}
.dzx-f-match span{flex:1;min-width:0}
.dzx-f-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dzx-f-panels button{display:grid;justify-items:center;gap:6px;padding:12px 4px 9px;border:0;border-radius:var(--radius);background:var(--panel);font:inherit;font-size:10.5px;font-weight:500;line-height:1.2;color:var(--ink);cursor:pointer;transition:background .15s}
.dzx-f-panels button:hover{background:var(--tint)}
.dzx-f-panels svg{color:var(--primary)}
.dzx-f-prod{margin:16px 0 4px;background:#fff;border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--line);padding:12px 13px}
.dzx-f-prod:empty{display:none}
.dzx-f-prod p{margin:6px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.dzx-f-prod p b{color:var(--ink);font-weight:500}
.dzx-f-prodh{display:flex;align-items:center;gap:8px;font-size:12.5px}
.dzx-f-prodh svg{color:var(--primary)}
.dzx-f-prodh b{font-weight:500}
/* On Your Order (23 Oct 2026): the finish the order carries and an Add tile for each finish the product sells, with its price */
.dzx-f-order .dz-h{margin-top:14px}
.dzx-f-adds{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:8px 0 0}
.dzx-f-add{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:9px;min-width:0;padding:10px;border:0;border-radius:var(--radius);background:var(--panel);font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-f-add:hover{background:var(--tint)}
.dzx-f-add[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring)}
.dzx-f-add .dzx-f-sw{width:22px;height:22px}
.dzx-f-add span{display:grid;gap:2px;min-width:0}
.dzx-f-add b{font-size:12px;font-weight:500;line-height:1.3}
.dzx-f-add small{font-size:11px;line-height:1.35;color:var(--muted)}
.dzx-f-ordnow{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:10px;padding:11px 12px;border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.dzx-f-ordnow b{display:block;font-size:12.5px;font-weight:500}
.dzx-f-ordnow small{display:block;font-size:11px;line-height:1.4;color:var(--muted)}
.dzx-f-ordacts{grid-column:1/-1;display:flex;gap:6px}
.dzx-f-order .dzi-link{margin-top:6px}
/* Check and Finish */
.dzx-f-fin{background:var(--panel);border-radius:var(--radius);padding:14px 16px}
.dzx-f-finh{display:flex;gap:12px;align-items:flex-start}
.dzx-f-finh b{display:block;font-size:13px;font-weight:500;line-height:1.35}
.dzx-f-finh small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.dzx-f-ic{width:34px;height:34px;flex:none;border-radius:var(--radius-sm);background:#fff;color:var(--primary);display:grid;place-items:center}
.dzx-f-finl{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.dzx-f-finl li{display:flex;gap:9px;align-items:center;font-size:12px;line-height:1.4}
.dzx-f-finl .dzx-f-sw{width:18px;height:18px}
.dzx-f-finl b{font-weight:500}
.dzx-f-fin .dz-hint{margin:10px 0 0}
.dzx-f-fin .dzx-f-prod{margin:12px 0 0}
.dzx-f-fine{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;background:var(--attn-tint,#FBF3E6);box-shadow:inset 0 0 0 1px var(--attn-line,rgba(183,121,31,.28));border-radius:var(--radius);padding:10px 12px;font-size:12px;line-height:1.45}
.dzx-f-fine>svg{flex:none;color:var(--attn,#B7791F);margin-top:1px}
.dzx-f-fine b{display:block;font-weight:500}
.dzx-f-fine span{display:block;color:var(--ink);opacity:.8}
.dzx-f-fine p{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.dzx-f-chip{height:28px;padding:0 10px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;font:inherit;font-size:11.5px;font-weight:500;color:var(--ink);cursor:pointer;box-shadow:0 0 0 1px var(--attn-line,rgba(183,121,31,.28))}
.dzx-f-chip:hover{box-shadow:var(--ring)}
.dzx-f-made{display:block;margin-top:4px;color:var(--muted)}
/* Preview, With Finishes */
/* the host marks Preview with .dz-ql-x while a plug-in view shows, the same class as the close button: keep the overlay full screen */
.dz-ql.dz-ql-x{width:auto;height:auto;border-radius:0;background:rgba(18,22,27,.86);display:grid;place-items:normal;cursor:auto}
.dz-ql.dz-ql-x:hover{background:rgba(18,22,27,.86)}
.dzx-f-pv{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:10px}
.dzx-f-pvst{position:relative;width:100%;height:100%;min-height:220px;display:grid;place-items:center;perspective:1400px;touch-action:none}
.dzx-f-tilt{--rx:0deg;--ry:0deg;--lx:50%;--ly:50%;--sx:0px;--sy:16px;position:relative;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25),var(--sx) var(--sy) 50px rgba(0,0,0,.45);will-change:transform}
.dzx-f-tilt.round{border-radius:50%}
.dzx-f-base{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;-webkit-user-drag:none;user-select:none}
.dzx-f-layers{position:absolute;inset:0;pointer-events:none}
.dzx-f-layer{position:absolute;inset:0;-webkit-mask-image:var(--m);mask-image:var(--m);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.dzx-f-layer.foil{background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.6) 47.5%,rgba(255,255,255,0) 55%),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.05) 1px 2px),linear-gradient(115deg,var(--ramp));background-size:300% 300%,auto,320% 320%;background-position:var(--lx) var(--ly),0 0,var(--lx) var(--ly)}
.dzx-f-layer.uv{background:linear-gradient(115deg,rgba(255,255,255,0) 41%,rgba(255,255,255,.4) 46%,rgba(255,255,255,.62) 47.5%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 55%),linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 60%,rgba(255,255,255,.14));background-size:300% 300%,auto;background-position:var(--lx) var(--ly),0 0}
.dzx-f-layer.white{background:#fff;box-shadow:inset 0 0 0 9999px rgba(255,255,255,.96)}
.dzx-f-layer.edge{background:rgba(0,0,0,.5);-webkit-mask-image:var(--m),var(--m);mask-image:var(--m),var(--m);-webkit-mask-position:.8px 1.2px,0 0;mask-position:.8px 1.2px,0 0;-webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%;-webkit-mask-composite:source-out;mask-composite:subtract;opacity:.75}
.dzx-f-paper{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.14) 48%,rgba(255,255,255,0) 62%);background-size:300% 300%;background-position:var(--lx) var(--ly)}
.dzx-f-pvfloor{position:absolute;left:50%;bottom:4%;width:46%;height:22px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.35),rgba(0,0,0,0));filter:blur(6px);pointer-events:none;opacity:.6}
.dzx-f-pvbar{display:flex;align-items:center;justify-content:center;gap:10px 16px;flex-wrap:wrap;max-width:100%}
.dzx-f-pvhint{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12px;color:rgba(255,255,255,.7)}
.dzx-f-pvsum{margin:0;font-size:12px;color:rgba(255,255,255,.55);max-width:520px;text-align:center}
.dz-ql.dzx-f-pvon .dz-ql-bar>.dz-seg:not(.dz-ql-modes),.dz-ql.dzx-f-pvon [data-qlflip]{display:none}
@media (max-width:860px){.dzx-f-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.dzx-f-pvsum{display:none}}
@media (max-width:360px){.dzx-f-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.dzx-f-panels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.dzx-f-hcard i{animation:none!important}}
/* Spot UV side panel (x-finishes.js): side switch, five ways, picking, layers list, own layer upload */
.dzx-f-arrive{display:flex;align-items:center;gap:9px;margin:0 0 4px;padding:10px 8px 10px 12px;border-radius:var(--radius);background:var(--tint);font-size:12.5px;font-weight:500;line-height:1.4;color:var(--ink)}
.dzx-f-arrive>svg{flex:none;color:var(--primary)}
.dzx-f-arrive span{flex:1;min-width:0}
.dzx-f-x{width:28px;height:28px;flex:none;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.dzx-f-x:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.dzx-f-uv .dz-h{margin-top:18px}
.dzx-f-sideseg{display:flex;width:100%;margin:0 0 16px}
.dzx-f-sideseg>button{flex:1}
.dzx-f-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-left:6px;vertical-align:middle}
.dzx-f-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dzx-f-way{position:relative;display:grid;justify-items:start;align-content:start;gap:3px;min-width:0;padding:11px 10px 10px;border:0;border-radius:var(--radius);background:var(--panel);font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-f-way:hover{background:var(--tint)}
.dzx-f-way[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring)}
.dzx-f-way b{font-size:12px;font-weight:500;line-height:1.3}
.dzx-f-way small{font-size:11px;line-height:1.35;color:var(--muted)}
.dzx-f-way:last-child{grid-column:1/-1;grid-template-columns:32px minmax(0,1fr);column-gap:10px;align-items:center}
.dzx-f-way:last-child .dzx-f-wic{grid-row:1/3;margin:0}
.dzx-f-way .dzx-f-dot{position:absolute;right:9px;top:9px;margin:0}
.dzx-f-wic{width:32px;height:32px;border-radius:var(--radius-sm);background:#fff;color:var(--primary);display:grid;place-items:center;margin:0 0 5px}
.dzx-f-way[aria-pressed="true"] .dzx-f-wic{background:#fff}
.dzx-f-wbody{margin:8px 0 0;padding:12px;border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.dzx-f-wbody .dz-hint:first-child{margin-top:0}
.btn.dzx-f-wide{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;font-size:13px}
.dzx-f-count{margin:8px 0 0;font-size:12px;color:var(--muted);text-align:center}
.dzx-f-llist{display:grid;gap:4px;max-height:340px;overflow:auto;margin:0 -2px;padding:0 2px}
.dz-swrow.dzx-f-lrow{justify-content:flex-start;gap:10px;min-height:48px;padding:6px 8px;border-radius:var(--radius-sm);background:var(--panel)}
.dz-swrow.dzx-f-lrow:hover{background:var(--tint)}
.dz-swrow.dzx-f-lrow.dis{opacity:.6;cursor:default}
.dzx-f-lth{width:36px;height:36px;flex:none;border-radius:var(--radius-sm);background:#fff;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;overflow:hidden;color:var(--muted)}
.dzx-f-lth img{max-width:30px;max-height:30px;display:block;object-fit:contain}
.dzx-f-lnm{flex:1;min-width:0;display:grid;gap:1px}
.dzx-f-lnm b{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-f-lnm small{font-size:11px;font-weight:400;color:var(--muted)}
.dzx-f-drop{display:grid;justify-items:center;gap:4px;width:100%;padding:18px 12px;border:1.5px dashed rgba(25,32,38,.22);border-radius:var(--radius);background:var(--panel);font:inherit;color:var(--ink);cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-f-drop svg{color:var(--primary)}
.dzx-f-drop b{font-size:13px;font-weight:500}
.dzx-f-drop small{font-size:11.5px;color:var(--muted)}
.dzx-f-drop:hover,.dzx-f-drop.over{background:var(--tint);box-shadow:var(--ring);border-color:transparent}
.dzx-f-bw{display:flex;gap:9px;align-items:flex-start;margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.dzx-f-bw b{color:var(--ink);font-weight:500}
.dzx-f-bw .k{width:18px;height:18px;flex:none;margin-top:1px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#111 0 50%,#fff 50%);box-shadow:inset 0 0 0 1px rgba(25,32,38,.25)}
.dzx-f-uplcard{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center}
.dzx-f-uplim{display:block;width:76px;max-height:76px;border-radius:var(--radius-sm);background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.dzx-f-uplim img{display:block;width:100%;height:100%;object-fit:contain}
.dzx-f-uplcard b{display:block;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-f-uplcard small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.dzx-f-uplacts{display:flex;gap:6px;margin-top:8px}
.dzx-f-off{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--radius);background:var(--panel);font-size:12px;line-height:1.45}
.dzx-f-off>svg{flex:none;color:var(--muted);margin-top:1px}
.dzx-f-off b{display:block;font-weight:500}
.dzx-f-off span{display:block;color:var(--muted);margin:2px 0 4px}
.dz-drawbar.dzx-f-pickbar{gap:10px;top:62px;max-width:calc(100% - 24px)}
.dz-drawbar.dzx-f-pickbar svg{flex:none;color:#fff}
.dz-drawbar.dzx-f-pickbar span,.dz-drawbar.dzx-f-pickbar b{white-space:nowrap}
.dz-drawbar.dzx-f-pickbar b{font-weight:500;padding:3px 9px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:rgba(255,255,255,.16)}
.dz-drawbar.dzx-f-pickbar{width:max-content;background:var(--primary);padding:7px 7px 7px 16px;font-size:13.5px;box-shadow:0 0 0 4px rgba(150,205,255,.35),var(--dz-float);animation:dzxPickIn .35s ease}
.dz-drawbar.dzx-f-pickbar span{white-space:normal;line-height:1.3}
.dz-drawbar.dzx-f-pickbar button{height:32px;padding:0 16px;font-size:13px}
.dzx-f-picking .dz-canvaswrap canvas{cursor:pointer}
@keyframes dzxPickIn{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.dz-drawbar.dzx-f-pickbar{animation:none}}
@media (max-width:700px){
  .dz-drawbar.dzx-f-pickbar{left:12px;right:12px;top:12px;transform:none;width:auto;max-width:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:4px;align-items:center;border-radius:var(--radius);padding:10px 10px 10px 14px;animation:none}
  .dz-drawbar.dzx-f-pickbar span{grid-column:2;font-size:13px}
  .dz-drawbar.dzx-f-pickbar b{grid-column:2;grid-row:2;justify-self:start;font-size:12px}
  .dz-drawbar.dzx-f-pickbar button{grid-column:3;grid-row:1/3}
}
.dzx-f-pagepick .dz-modal-box{width:min(720px,100%)}
.dzx-f-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:14px}
.dzx-f-pages button{display:grid;justify-items:center;gap:6px;padding:10px;border:0;border-radius:var(--radius);background:var(--panel);font:inherit;font-size:12px;color:var(--ink);cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-f-pages button:hover{background:var(--tint);box-shadow:var(--ring)}
.dzx-f-pages .im{display:grid;place-items:center;width:100%;min-height:110px}
.dzx-f-pages canvas{max-width:100%;max-height:150px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
@media (max-width:360px){.dzx-f-ways{grid-template-columns:1fr}.dzx-f-way{grid-template-columns:32px minmax(0,1fr);column-gap:10px;align-items:center}.dzx-f-way .dzx-f-wic{grid-row:1/3;margin:0}}
/* In Real Life (x-mockups.js): scenes drawn in CSS; 1em = 1 per cent of the scene's width, set from script */
.dzx-f-rl{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:12px}
.dzx-f-rlbar{display:flex;justify-content:center;max-width:100%;overflow-x:auto;scrollbar-width:none}
.dzx-f-rlbar::-webkit-scrollbar{display:none}
.dzx-f-rlbar .dz-seg>button{white-space:nowrap}
.dzx-f-rlname{font-size:12.5px;color:rgba(255,255,255,.75)}
.dzx-f-rlst{width:100%;height:100%;min-height:180px;display:grid;place-items:center}
.dzx-f-rlnote{margin:0;font-size:11.5px;color:rgba(255,255,255,.55);text-align:center}
.dzx-f-scene{position:relative;overflow:hidden;border-radius:var(--radius);background:#D9D4CC;box-shadow:0 2px 6px rgba(0,0,0,.3),0 30px 80px rgba(0,0,0,.45);isolation:isolate;user-select:none;-webkit-user-select:none;color:var(--ink)}
.dzx-f-scene>*{position:absolute}
.dzx-f-scene img{-webkit-user-drag:none;pointer-events:none}
.dzx-f-bg{inset:0}
.dzx-f-bg.oak{background:repeating-linear-gradient(0deg,transparent 0 21.85em,rgba(70,42,18,.28) 21.85em 22em,rgba(255,240,215,.12) 22em 22.1em,transparent 22.1em 44em),var(--tx-grain),linear-gradient(100deg,rgba(255,236,205,.18),rgba(0,0,0,.08)),#C79C6C;background-size:auto,140em auto,auto,auto}
.dzx-f-bg.linen{background:repeating-linear-gradient(0deg,rgba(90,80,70,.035) 0 .12em,transparent .12em .32em),repeating-linear-gradient(90deg,rgba(90,80,70,.03) 0 .12em,transparent .12em .3em),var(--tx-paper),linear-gradient(160deg,#F5F2EC,#E7E2D9);background-size:auto,auto,40em 40em,auto}
.dzx-f-bg.plaster{background:var(--tx-plaster),linear-gradient(120deg,#F5F1EB,#E6E0D7 70%,#DED7CD);background-size:60em 60em,auto}
.dzx-f-bg.room{background:linear-gradient(90deg,#ECE8E2 0%,#F7F5F1 42%,#FFFFFF 68%,#F2EFEA 100%)}
.dzx-f-bg.kitchen{background:linear-gradient(180deg,#E9E5DE,#DAD4CB)}
.dzx-f-bg.concrete{background:var(--tx-stone),var(--tx-paper),linear-gradient(135deg,#D9D6D1,#C5C1BB);background-size:120em auto,40em 40em,auto}
.dzx-f-bg.wallsoft{background:radial-gradient(120% 100% at 28% 8%,#F5F0E9,#E4DCD2 68%,#D8CFC3)}
.dzx-f-light{inset:0;pointer-events:none;z-index:40;background:radial-gradient(110% 85% at 12% -5%,rgba(255,247,232,.30),rgba(255,247,232,0) 58%),radial-gradient(150% 130% at 50% 45%,rgba(0,0,0,0) 58%,rgba(20,12,4,.22))}
.dzx-f-light.soft{background:radial-gradient(110% 85% at 15% -5%,rgba(255,250,240,.25),rgba(255,250,240,0) 60%),radial-gradient(160% 140% at 50% 45%,rgba(0,0,0,0) 62%,rgba(20,12,4,.16))}
.dzx-f-leafsh{opacity:.15;filter:blur(.7em);mix-blend-mode:multiply;pointer-events:none;z-index:30}
.dzx-f-leafsh.tl{left:-8em;top:-6em;width:48em;height:34em}
.dzx-f-leafsh.tr{right:-10em;top:-8em;width:52em;height:36em;transform:scaleX(-1)}
/* a printed piece */
.dzx-f-pc{position:absolute;transform-origin:50% 50%;z-index:10}
.dzx-f-pcf{position:absolute;inset:0;overflow:hidden;background:#fff}
.dzx-f-pcf img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill}
.dzx-f-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(128deg,rgba(255,255,255,.24),rgba(255,255,255,0) 36%,rgba(0,0,0,0) 72%,rgba(0,0,0,.07)),var(--tx-paper);background-size:auto,30em 30em}
.dzx-f-pc.flat .dzx-f-sheen{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,0) 30%,rgba(255,255,255,.06) 55%,rgba(0,0,0,.05)),linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%),var(--tx-paper);background-size:auto,auto,30em 30em}
.dzx-f-pc.stuck .dzx-f-sheen{background:linear-gradient(125deg,rgba(255,255,255,.38),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 64%,rgba(255,255,255,.14) 74%,rgba(0,0,0,.05))}
.dzx-f-stk{position:absolute;inset:0;background:#F3F0E9;box-shadow:0 .02em .05em rgba(0,0,0,.28)}
/* coffee, seen from above */
.dzx-f-cup{z-index:20}
.dzx-f-cup>i{position:absolute;display:block;border-radius:50%}
.dzx-f-cup .sau{inset:0;background:radial-gradient(circle,#F6F4F0 0 57%,#E2DFD8 62%,#FBFAF7 65%,#EFECE6 86%,#D9D4CC 100%);box-shadow:1.3em 1.9em 2.8em rgba(40,28,15,.30),inset -.4em -.6em 1em rgba(0,0,0,.05)}
.dzx-f-cup .hd{left:69%;top:44%;width:24%;height:11%;border-radius:1em;background:linear-gradient(180deg,#FFFFFF,#E2DED7);box-shadow:.4em .7em .9em rgba(40,28,15,.25);transform:rotate(28deg)}
.dzx-f-cup .cp{left:20%;top:20%;width:60%;height:60%;background:radial-gradient(circle,transparent 0 76%,#FFFFFF 79%,#F2F0EC 90%,#E0DCD5 100%);box-shadow:.6em .9em 1.4em rgba(40,28,15,.26)}
.dzx-f-cup .cf{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 46% 44%,#7E563B 0,#5D3C27 28%,#40281A 58%,#2C1A10 76%,#6E4A31 88%,#B48660 97%)}
.dzx-f-cup .gl{position:absolute;left:28%;top:24%;width:22%;height:12%;border-radius:50%;background:rgba(255,255,255,.35);filter:blur(.35em);transform:rotate(-30deg)}
/* a pen */
.dzx-f-pen{border-radius:999px;background:linear-gradient(180deg,#56616E 0%,#26303A 38%,#12171C 62%,#2E3843 100%);box-shadow:.35em .6em .9em rgba(30,20,10,.32);z-index:22}
.dzx-f-pen>i{position:absolute;display:block}
.dzx-f-pen .tip{left:-8%;top:18%;width:9%;height:64%;clip-path:polygon(0 50%,100% 0,100% 100%);background:linear-gradient(180deg,#EEF0F2,#9AA2AA 60%,#CDD2D6)}
.dzx-f-pen .band{left:60%;top:0;bottom:0;width:4%;background:linear-gradient(180deg,#F3E6BE,#B8964F 55%,#E7D39E)}
.dzx-f-pen .clip{left:66%;top:-26%;width:28%;height:34%;border-radius:.3em;background:linear-gradient(180deg,#F4F6F8,#AEB5BC);box-shadow:.1em .2em .3em rgba(0,0,0,.25)}
.dzx-f-sprig{z-index:18;filter:drop-shadow(.3em .5em .45em rgba(30,20,10,.22));overflow:visible}
.dzx-f-plant{z-index:16;filter:drop-shadow(.6em .5em .8em rgba(30,20,10,.18));overflow:visible}
/* on the wall */
.dzx-f-win{left:2em;top:-6em;width:34em;height:80em;background:linear-gradient(180deg,rgba(255,252,244,.6),rgba(255,252,244,.12));transform:skewX(-18deg);filter:blur(1.4em);opacity:.8;pointer-events:none}
.dzx-f-side{left:13em;right:13em;top:50em;bottom:-2em;background:var(--tx-grain),linear-gradient(180deg,#C9A47A,#AC8258);background-size:90em auto,auto;box-shadow:0 2.2em 3.4em rgba(0,0,0,.25),0 -.1em .3em rgba(0,0,0,.08);z-index:12}
.dzx-f-side>i{position:absolute;display:block}
.dzx-f-side .top{left:-1em;right:-1em;top:-1.3em;height:1.5em;border-radius:.3em;background:linear-gradient(180deg,#DDBE96,#B78E62);box-shadow:0 .6em 1em rgba(0,0,0,.18)}
.dzx-f-side .door{top:1.4em;bottom:2em;width:47.5%;box-shadow:inset 0 0 0 .08em rgba(60,35,15,.28),inset 0 .3em .6em rgba(255,240,220,.12)}
.dzx-f-side .door.l{left:1.5%}.dzx-f-side .door.r{right:1.5%}
.dzx-f-side .door::after{content:"";position:absolute;top:2.4em;width:.5em;height:3.6em;border-radius:.3em;background:linear-gradient(90deg,#E9ECEF,#9AA2AA)}
.dzx-f-side .door.l::after{right:1.2em}.dzx-f-side .door.r::after{left:1.2em}
.dzx-f-books{left:18em;top:44.6em;width:15em;height:4.2em;z-index:14}
.dzx-f-books>i{position:absolute;left:0;display:block;height:1.35em;border-radius:.15em;box-shadow:.2em .3em .5em rgba(0,0,0,.18)}
.dzx-f-books>i:nth-child(1){bottom:0;width:15em;background:linear-gradient(180deg,#8FA391,#6F8873)}
.dzx-f-books>i:nth-child(2){bottom:1.35em;left:.6em;width:13.2em;background:linear-gradient(180deg,#F1EBDF,#D9D0C0)}
.dzx-f-books>i:nth-child(3){bottom:2.7em;left:.2em;width:12em;background:linear-gradient(180deg,#C98762,#A96A48)}
.dzx-f-hang{z-index:15}
.dzx-f-hang>i{position:absolute;display:block}
.dzx-f-hang .bar{left:-.7em;right:-.7em;height:1.1em;border-radius:.2em;background:linear-gradient(180deg,#D8BA92,#A98159);box-shadow:0 .35em .55em rgba(0,0,0,.25);z-index:12}
.dzx-f-hang .bar.t{top:-.55em}.dzx-f-hang .bar.b{bottom:-.55em}
.dzx-f-hang .str{left:18%;right:18%;top:-6em;height:5.6em;background:linear-gradient(to top right,transparent calc(50% - .05em),rgba(70,58,45,.75) 50%,transparent calc(50% + .05em)) left/50% 100% no-repeat,linear-gradient(to top left,transparent calc(50% - .05em),rgba(70,58,45,.75) 50%,transparent calc(50% + .05em)) right/50% 100% no-repeat}
.dzx-f-hang .nail{left:50%;top:-6.4em;width:.8em;height:.8em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#C4C9CE,#5A6066);transform:translateX(-50%);box-shadow:.1em .2em .3em rgba(0,0,0,.35)}
/* in a room */
.dzx-f-roomwin{left:80em;top:5em;width:26em;height:39em;background:linear-gradient(90deg,transparent 48.5%,#FBFAF8 48.5% 51.5%,transparent 51.5%),linear-gradient(0deg,transparent 48.5%,#FBFAF8 48.5% 51.5%,transparent 51.5%),linear-gradient(180deg,#E6F0F8,#F6FAFD 70%,#EEF3EE);box-shadow:inset 0 0 0 .8em #FBFAF8,inset 0 0 0 1.05em #E2DED8,-2em 0 8em rgba(255,255,255,.9)}
.dzx-f-floor{left:0;right:0;top:46em;bottom:0;overflow:hidden;perspective:40em;perspective-origin:50% -8em}
.dzx-f-floor>i{position:absolute;left:-70%;right:-70%;top:0;height:115%;transform-origin:50% 0;transform:rotateX(70deg);background:repeating-linear-gradient(90deg,rgba(90,58,30,.30) 0 .12em,transparent .12em 9em),var(--tx-grain),linear-gradient(180deg,#DCC19C,#C9A57A);background-size:auto,70em auto,auto}
.dzx-f-skirt{left:0;right:0;top:45.2em;height:1.3em;background:linear-gradient(180deg,#FFFFFF,#E7E3DD);box-shadow:0 .3em .6em rgba(0,0,0,.08);z-index:2}
.dzx-f-floorlight{right:-8em;top:50em;width:44em;height:16em;background:radial-gradient(closest-side,rgba(255,250,238,.55),rgba(255,250,238,0));transform:skewX(-30deg);pointer-events:none;z-index:3}
.dzx-f-roller{z-index:15}
.dzx-f-roller>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;box-shadow:2.4em -.6em 4em rgba(0,0,0,.10),0 0 0 .04em rgba(0,0,0,.08)}
.dzx-f-roller>i{position:absolute;display:block}
.dzx-f-roller .rsheen{inset:0;background:linear-gradient(90deg,rgba(0,0,0,.07),rgba(255,255,255,.07) 26%,rgba(255,255,255,0) 55%,rgba(0,0,0,.09)),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 20%)}
.dzx-f-roller .rail{left:-.45em;right:-.45em;top:-.55em;height:.75em;border-radius:.4em;background:linear-gradient(180deg,#F3F5F7,#9EA6AE);box-shadow:0 .15em .3em rgba(0,0,0,.2)}
.dzx-f-roller .base{left:-1.5em;right:-1.5em;bottom:-2.7em;height:2.9em;border-radius:1.3em 1.3em .6em .6em;background:linear-gradient(180deg,#F5F7F8 0%,#CDD2D7 38%,#9AA1A8 72%,#D6DADE 100%);box-shadow:0 .5em .7em rgba(0,0,0,.25)}
.dzx-f-roller .ft{bottom:-3.25em;width:3.4em;height:.6em;border-radius:.3em;background:linear-gradient(180deg,#5A6068,#33383E)}
.dzx-f-roller .ft.l{left:-.8em}.dzx-f-roller .ft.r{right:-.8em}
.dzx-f-roller .rsh{left:-5em;right:-5em;bottom:-4.4em;height:2.6em;background:radial-gradient(closest-side,rgba(0,0,0,.36),rgba(0,0,0,0));filter:blur(.4em)}
/* on a jar */
.dzx-f-wtiles{left:0;right:0;top:0;height:46em;background:repeating-linear-gradient(0deg,rgba(150,140,128,.45) 0 .18em,transparent .18em 3.6em),repeating-linear-gradient(90deg,rgba(150,140,128,.4) 0 .18em,transparent .18em 7.2em),linear-gradient(115deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%),linear-gradient(180deg,#F1EEE8,#E1DCD3);filter:blur(.22em)}
.dzx-f-counter{left:0;right:0;top:46em;bottom:0;background:var(--tx-stone),linear-gradient(180deg,#F3F0EB,#DCD7CF);background-size:110em auto,auto;box-shadow:inset 0 .25em 0 rgba(255,255,255,.7),0 -.2em .5em rgba(0,0,0,.1)}
.dzx-f-jar{z-index:15}
.dzx-f-jar>i,.dzx-f-jar .body>i{position:absolute;display:block}
.dzx-f-jar .lid{left:4%;right:4%;top:0;border-radius:.6em .6em .3em .3em;background:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 .1em,transparent .1em .45em),linear-gradient(90deg,#8A6A2E,#E8CF8E 28%,#B8923F 52%,#F3E3B0 74%,#8A6A2E);box-shadow:0 .25em .35em rgba(0,0,0,.25);z-index:3}
.dzx-f-jar .neck{left:9%;right:9%;border-radius:.2em;background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.65) 30%,rgba(255,255,255,.15) 70%,rgba(0,0,0,.08));z-index:2}
.dzx-f-jar .body{position:absolute;left:0;right:0;border-radius:20% 20% 13% 13% / 10% 10% 7% 7%;overflow:hidden;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 .1em rgba(255,255,255,.55),inset .9em 0 1.5em rgba(255,255,255,.22),inset -.9em 0 1.7em rgba(0,0,0,.14)}
.dzx-f-jar .honey{left:.25em;right:.25em;top:9%;bottom:.25em;border-radius:16% 16% 12% 12% / 8% 8% 6% 6%;background:radial-gradient(ellipse at 36% 42%,#F8C963,#E3A034 42%,#B9691C 82%,#94501A);box-shadow:inset 0 .4em .6em rgba(255,230,160,.45)}
.dzx-f-jar .lab{position:absolute;left:0;right:0}
.dzx-f-jar .lab>.wrap{position:absolute;display:block;max-width:none}
.dzx-f-jar .glass{inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 8%,rgba(255,255,255,0) 15%,rgba(255,255,255,0) 79%,rgba(255,255,255,.26) 86%,rgba(255,255,255,0) 92%),linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,0) 16%,rgba(0,0,0,0) 82%,rgba(0,0,0,.24)),linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 18%)}
.dzx-f-jar .jsh{left:-12%;right:-34%;bottom:-1.3em;height:2.6em;background:radial-gradient(closest-side,rgba(70,40,10,.38),rgba(70,40,10,0));filter:blur(.35em);z-index:-1}
.dzx-f-dipper{left:62em;top:57em;width:26em;height:2.2em;transform:rotate(-7deg);z-index:20;filter:drop-shadow(.5em .7em .5em rgba(40,25,10,.28))}
.dzx-f-dipper>i{position:absolute;display:block}
.dzx-f-dipper .h{left:5em;right:0;top:.65em;height:.9em;border-radius:.5em;background:linear-gradient(180deg,#E2C39A,#B88B5A 60%,#9C7247)}
.dzx-f-dipper .k{left:0;top:0;width:6em;height:2.2em;border-radius:1.1em;background:repeating-linear-gradient(90deg,#C99A66 0 .5em,#8E6438 .5em .8em),linear-gradient(180deg,#E3C291,#A87A4A)}
/* on a notebook */
.dzx-f-nb{z-index:12;border-radius:.6em 1.3em 1.3em .6em;background:var(--tx-paper),linear-gradient(135deg,#465650,#2D3833);background-size:30em 30em,auto;box-shadow:0 .1em .2em rgba(0,0,0,.35),1em 1.7em 2.8em rgba(20,15,10,.32);transform:rotate(-5deg)}
.dzx-f-nb>i{position:absolute;display:block}
.dzx-f-nb .band{right:3.4em;top:-.1em;bottom:-.1em;width:.9em;background:linear-gradient(90deg,#15191B,#3A4145,#15191B);box-shadow:.1em 0 .2em rgba(0,0,0,.3);z-index:12}
.dzx-f-nb .pages{right:-.4em;top:.5em;bottom:.5em;width:.55em;border-radius:0 .35em .35em 0;background:repeating-linear-gradient(0deg,#F6F3EC 0 .12em,#D9D3C7 .12em .18em);z-index:-1}
/* standing on a table, with its envelope */
.dzx-f-tablecloth{left:0;right:0;top:44em;bottom:0;background:repeating-linear-gradient(0deg,rgba(90,80,70,.04) 0 .1em,transparent .1em .28em),repeating-linear-gradient(90deg,rgba(90,80,70,.035) 0 .1em,transparent .1em .26em),var(--tx-paper),linear-gradient(180deg,#E9E3DA,#F6F3EE 45%,#EFEAE3);background-size:auto,auto,40em 40em,auto;box-shadow:0 -.15em .35em rgba(0,0,0,.08)}
.dzx-f-lay{z-index:8;transform-origin:50% 60%}
.dzx-f-env{position:absolute;inset:0;border-radius:.25em;background:var(--tx-paper),linear-gradient(160deg,rgba(255,255,255,.4),rgba(0,0,0,.04)),var(--env);background-size:30em 30em,auto,auto;box-shadow:.4em .7em 1.1em rgba(40,28,15,.26),0 .05em .1em rgba(0,0,0,.2)}
.dzx-f-env>i{position:absolute;display:block}
.dzx-f-env .flap{inset:0;clip-path:polygon(0 0,100% 0,50% 56%);background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(0,0,0,.07));filter:drop-shadow(0 .1em .1em rgba(0,0,0,.2))}
.dzx-f-env::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .05em),rgba(0,0,0,.09) 50%,transparent calc(50% + .06em)) left bottom/50% 60% no-repeat,linear-gradient(to top left,transparent calc(50% - .05em),rgba(0,0,0,.09) 50%,transparent calc(50% + .06em)) right bottom/50% 60% no-repeat}
.dzx-f-env .seal{left:50%;top:54%;width:4em;height:4em;border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 .4em rgba(255,255,255,.12),inset .25em .35em .5em rgba(255,255,255,.28),inset -.25em -.35em .5em rgba(0,0,0,.32),.2em .3em .45em rgba(0,0,0,.3)}
.dzx-f-stand{z-index:14;perspective:70em}
.dzx-f-stand>i{position:absolute;display:block}
.dzx-f-stand .lean{position:absolute;inset:0;transform-origin:50% 100%;transform:rotateX(9deg);transform-style:preserve-3d}
.dzx-f-stand .cast{left:6%;top:3%;width:96%;height:94%;background:rgba(40,28,15,.17);filter:blur(1.9em);transform:translate(2.8em,-.4em) skewX(-6deg);z-index:-1}
.dzx-f-stand .contact{left:-4%;right:-4%;bottom:-.7em;height:1.5em;background:radial-gradient(closest-side,rgba(30,20,10,.45),rgba(30,20,10,0));filter:blur(.25em)}
@media (max-width:600px){.dzx-f-scene{border-radius:var(--radius)}.dzx-f-rlnote{font-size:11px}}
.dzx-f-crease{position:absolute;top:0;bottom:0;width:1.6em;margin-left:-.8em;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.07) 42%,rgba(255,255,255,.35) 52%,rgba(0,0,0,.03) 60%,rgba(0,0,0,0))}
.dzx-f-rlst{overflow:hidden;display:flex;align-items:center;justify-content:center}
.dzx-f-rlst>.dzx-f-scene{flex:none}
.dzx-f-scene.crop{border-radius:0;box-shadow:none}
.dzx-f-leafsh.wall{opacity:.11;z-index:1;top:-4em;right:-6em}
/* Folded (x-fold3d.js): the sheet in CSS 3D, panels nested at their hinges */
.dzx-f-fold{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;gap:10px}
.dzx-f-fst{position:relative;width:100%;height:100%;min-height:220px;perspective:1600px;perspective-origin:50% 40%;cursor:grab;touch-action:none;overflow:hidden}
.dzx-f-fst.drag{cursor:grabbing}
.dzx-f-cam{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;z-index:1}
.dzx-f-model{position:absolute;left:0;top:0;transform-style:preserve-3d}
.dzx-f-pn{position:absolute;left:0;top:0;transform-style:preserve-3d}
.dzx-f-pn.r{left:100%;transform-origin:0 50%}
.dzx-f-pn.l{left:auto;right:100%;transform-origin:100% 50%}
.dzx-f-face{position:absolute;inset:0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}
.dzx-f-face.bk{transform:rotateY(180deg)}
.dzx-f-face img{position:absolute;top:0;height:100%;max-width:none;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.dzx-f-face .sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,20,1),rgba(10,14,20,.85));opacity:0;pointer-events:none}
.dzx-f-face.plain{background:linear-gradient(160deg,#FFFFFF,#F1EFEA)}
.dzx-f-tp{position:absolute;transform-origin:50% 0;transform-style:preserve-3d}
.dzx-f-fshadow{position:absolute;z-index:0;left:50%;top:78%;width:52%;height:34px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.42),rgba(0,0,0,0));filter:blur(8px);pointer-events:none}
.dzx-f-fbar{display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;max-width:100%}
.dzx-f-fname{font-size:12.5px;font-weight:500;color:#fff}
.dzx-f-fsl{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;color:rgba(255,255,255,.7)}
.dzx-f-fsl input{width:180px;accent-color:#fff;margin:0}
.dzx-f-fcap{margin:0;min-height:1.4em;font-size:12px;color:rgba(255,255,255,.6);text-align:center}
@media (max-width:600px){.dzx-f-fsl input{width:130px}.dzx-f-fbar{gap:8px 10px}}
/* x-plugins F end */

/* x-plugins G start: names and numbers in bulk */
/* the tool: four steps down the panel, each a hairline section with a tinted number; honey for anything to look at */
.dzx-g-tab{position:relative}
.dzx-g-badge{position:absolute;top:5px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-size:9.5px;font-weight:500;font-style:normal;line-height:17px;text-align:center;box-shadow:0 0 0 2px #fff;pointer-events:none}
.dzx-g-badge[hidden]{display:none}
.dzx-g-intro{font-size:12px;line-height:1.55;color:var(--muted);margin:0 0 6px}
.dzx-g-step{padding:16px 0 18px;border-top:1px solid var(--line)}
.dzx-g-intro+.dzx-g-step,.dzx-g-intro+.dz-note+.dzx-g-step{border-top:0;padding-top:10px}
.dzx-g-sh{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.dzx-g-n{width:22px;height:22px;flex:none;border-radius:50%;background:var(--tint);color:var(--primary);font-size:11px;font-weight:500;font-style:normal;display:grid;place-items:center}
.dzx-g-step.done .dzx-g-n{background:var(--primary);color:#fff}
.dzx-g-sh b{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--ink)}
.dzx-g-sh em{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap}
.dzx-g-hint{font-size:11.5px;line-height:1.5;color:var(--muted);margin:0 0 10px}
.dzx-g-drop{border-radius:var(--radius);transition:box-shadow .15s}
.dzx-g-drop.drag{box-shadow:0 0 0 2px rgba(var(--prgb),.45)}
.dz3 textarea.dzx-g-ta{min-height:132px;font-size:12.5px;line-height:1.55;white-space:pre-wrap;overflow-x:hidden;resize:vertical;tab-size:4}
.dzx-g-use[hidden]{display:none}
.dz3 textarea.dzx-g-ta::placeholder{color:#8E9AA4;line-height:1.7}
.dzx-g-status{font-size:11.5px;line-height:1.5;color:var(--muted);margin:7px 0 10px}
.dzx-g .btn{height:40px;padding:0 16px;gap:8px;font-size:13px}
.dzx-g .btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.dzx-g-use{width:100%}
.dzx-g-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dzx-g-acts .dz-btn2{flex:1 1 auto}
.dzx-g-link{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:500;color:var(--primary);cursor:pointer;text-decoration:none}
.dzx-g-link:hover{text-decoration:underline;text-underline-offset:3px}
.dzx-g-mini-w{border-radius:var(--radius);background:var(--panel);overflow:hidden}
.dzx-g-mini{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11.5px;color:var(--ink)}
.dzx-g-mini th,.dzx-g-mini td{padding:7px 9px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-g-mini th{font-weight:500;color:var(--muted);font-size:11px}
.dzx-g-mini td{border-top:1px solid #fff}
.dzx-g-mini td i{color:var(--muted)}
.dzx-g-mini .dzx-g-mc{width:34px;color:var(--muted);text-align:right}
.dzx-g-more{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted);margin:8px 2px 0}
.dzx-g-more .dzx-g-link{margin:0;font-size:11.5px}
.dzx-g-link.danger{color:var(--danger)}
.dzx-g-sw{margin-top:6px;border-bottom:1px solid var(--line)}
.dzx-g-map{display:grid;gap:14px}
.dzx-g-fld{display:grid;gap:4px;margin:0}
.dzx-g-fld>span{font-size:12px;font-weight:500;color:var(--ink)}
.dzx-g-fld>small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 3px}
.dzx-g-fld.unused>span{color:var(--muted);font-weight:500}
.dz3 .dzx-g-fld.on select{background-color:var(--tint);font-weight:500}
.dz3 .dzx-g-fld.on select:focus{background-color:#fff}
.dzx-g-nf{display:grid;gap:12px;margin-top:10px}
.dzx-g-pre{gap:6px}
.dzx-g-g3,.dzx-g-g2{display:grid;gap:8px}
.dzx-g-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dzx-g-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dzx-g-g3 label,.dzx-g-g2 label{display:grid;gap:5px;min-width:0;margin:0}
.dzx-g-g3 span,.dzx-g-g2 span{font-size:11.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-g-nums{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:26px}
.dzx-g-nums span{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--tint);color:var(--primary);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;white-space:pre}
.dzx-g-nums i{font-style:normal;font-size:11.5px;color:var(--muted);padding:0 2px}
.dzx-g-sum{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius);background:var(--panel);margin:0 0 10px}
.dzx-g-sum>b{font-size:30px;font-weight:500;line-height:1;letter-spacing:-.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.dzx-g-sum>span{display:grid;font-size:13px;font-weight:500;color:var(--ink);line-height:1.35}
.dzx-g-sum em{font-style:normal;font-size:11.5px;font-weight:400;color:var(--muted)}
.dzx-g-flag{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:var(--radius);background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line);color:var(--ink);margin:0 0 10px}
.dzx-g-flag>svg{flex:none;color:var(--attn);margin-top:1px}
.dzx-g-flag>div{display:grid;gap:3px;min-width:0}
.dzx-g-flag b{font-size:12.5px;font-weight:500}
.dzx-g-flag span{font-size:12px;line-height:1.5}
.dzx-g-flag .dzx-g-link{margin:3px 0 0;justify-self:start;color:var(--attn)}
.dzx-g-flag .dzx-g-tip{color:var(--muted);font-size:11.5px}
.dzx-g-flag.sm{margin:8px 0 0;font-size:12px;line-height:1.5}
.dzx-g-okl,.dzx-g-chk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);margin:0 0 10px}
.dzx-g-okl svg{flex:none;color:var(--ok,var(--success))}
.dzx-g-chk{color:var(--muted)}
.dzx-g-spin{width:13px;height:13px;flex:none;border-radius:50%;border:2px solid var(--tint-dk);border-top-color:var(--primary);animation:dzSpin .8s linear infinite}
.dzx-g-go{display:grid;gap:8px;margin-top:4px}
.dzx-g-go .btn{width:100%}
/* the way in from Your Details */
.dzx-g-cta{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px 12px;align-items:center;margin:8px 0 0;padding:13px 14px;border-radius:var(--radius);background:var(--panel)}
.dzx-g-cta-ic{width:36px;height:36px;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center}
.dzx-g-cta b{display:block;font-size:12.5px;font-weight:500}
.dzx-g-cta small{display:block;font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:1px}
.dzx-g-cta .dz-btn2{grid-column:2;justify-self:start;background:#fff}
.dzx-g-cta .dz-btn2:hover{background:var(--tint)}
/* Check and Finish */
.dzx-g-fin{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px 12px;align-items:center;padding:13px 14px;border-radius:var(--radius);background:var(--panel)}
.dzx-g-fin-ic{width:40px;height:40px;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center}
.dzx-g-fin b{display:block;font-size:13px;font-weight:500}
.dzx-g-fin span:not(.dzx-g-fin-ic){display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:2px}
.dzx-g-fin .dz-btn2{grid-column:2;justify-self:start;background:#fff}
.dzx-g-fin .dz-btn2:hover{background:var(--tint)}
/* the windows: Every Copy, Your List, Make All Copies */
.dzx-g-m .dz-modal-box{padding:28px 28px 24px}
.dzx-g-m h2{font-size:22px;font-weight:500;letter-spacing:-.2px;margin:4px 0 6px}
.dzx-g-m .dz-lead{margin:0}
.dzx-g-m .btn{height:40px;padding:0 18px;gap:8px;font-size:13px}
.dzx-g-m .btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.dzx-g-m .dz-btn2{height:40px}
.dzx-g-cvh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-right:34px}
.dzx-g-cvh>div:first-child{min-width:0;flex:1 1 320px}
.dzx-g-cvh .dz-seg>button{height:32px;padding:0 12px}
.dzx-g-cvh .dz-seg b{font-weight:500;color:var(--ink);margin-left:2px;font-variant-numeric:tabular-nums}
.dzx-g-cvb{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;margin-top:20px;align-items:start}
.dzx-g-stage{display:flex;align-items:center;justify-content:center;height:min(46vh,420px);padding:26px;border-radius:var(--radius);background:var(--panel);position:relative;overflow:hidden}
.dzx-g-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;border-radius:var(--radius-sm);box-shadow:0 1px 2px rgba(25,32,38,.10),0 10px 30px rgba(25,32,38,.16);background:#fff;transition:opacity .2s;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
.dzx-g-stage img:not([src]){opacity:0}
.dzx-g-stage.round img{border-radius:50%}
.dzx-g-stage.busy::after{content:"";position:absolute;right:14px;bottom:14px;width:14px;height:14px;border-radius:50%;border:2px solid var(--tint-dk);border-top-color:var(--primary);animation:dzSpin .8s linear infinite}
.dzx-g-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px}
.dzx-g-pn{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.dzx-g-pn b{color:var(--ink);font-weight:500}
.dzx-g-pn .dz-ib{width:36px;height:36px;background:var(--panel)}
.dzx-g-pn .dz-ib:hover:not(:disabled){background:var(--tint)}
.dzx-g-pn .dz-ib:disabled{opacity:.35;cursor:default}
.dzx-g-vals{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.dzx-g-val{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;min-height:28px;padding:5px 11px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font-size:12.5px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dzx-g-val em{font-style:normal;font-size:11px;font-weight:500;color:var(--muted)}
.dzx-g-val i{color:var(--muted)}
.dzx-g-big .dzx-g-flag{margin:12px 0 0}
.dzx-g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;align-content:start;max-height:min(62vh,560px);overflow-y:auto;padding:3px;margin:-3px;overscroll-behavior:contain;scrollbar-width:thin}
.dzx-g-th{position:relative;display:grid;gap:6px;min-width:0;padding:8px 8px 7px;border:0;border-radius:var(--radius);background:var(--panel);color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-g-th[hidden]{display:none}
.dzx-g-th:hover{background:var(--tint)}
.dzx-g-th.on{background:var(--tint);box-shadow:var(--ring)}
.dzx-g-th .im{display:grid;place-items:center;width:100%;border-radius:var(--radius-sm);overflow:hidden}
.dzx-g-th .im img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(25,32,38,.2));-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
.dzx-g-th .im.sk,.dzx-g-strip .im.sk{background:linear-gradient(100deg,#E9EDF0 30%,#F4F6F7 50%,#E9EDF0 70%);background-size:220% 100%;animation:dzxgSk 1.3s ease-in-out infinite}
.dzx-g-th small{font-size:11.5px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-g-th small b{font-weight:500;color:var(--muted);margin-right:6px;font-variant-numeric:tabular-nums}
.dzx-g-th .fl{position:absolute;right:11px;top:11px;width:20px;height:20px;border-radius:50%;background:var(--attn);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.dzx-g-th .fl[hidden]{display:none}
.dzx-g-th.flag{background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line)}
.dzx-g-th.flag.on{box-shadow:inset 0 0 0 1px var(--attn-line),var(--ring)}
.dzx-g-cvf{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.dzx-g-fine{flex:1 1 240px;font-size:12px;line-height:1.5;color:var(--muted);margin:0}
@keyframes dzxgSk{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* Your List as a table */
.dzx-g-tw{max-height:min(52vh,480px);overflow:auto;margin-top:18px;border-radius:var(--radius);background:var(--panel);overscroll-behavior:contain}
.dzx-g-tbl{border-collapse:separate;border-spacing:0;min-width:100%}
.dzx-g-tbl th,.dzx-g-tbl td{padding:4px 3px;vertical-align:middle}
.dzx-g-tbl thead th{position:sticky;top:0;z-index:1;background:var(--tint);padding-top:8px;padding-bottom:8px}
.dzx-g-tbl .rn{width:34px;padding-left:10px;font-size:11px;font-weight:500;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.dzx-g-tbl .rx{width:38px;padding-right:8px}
.dzx-g-thc{display:flex;align-items:center;gap:2px}
.dzx-g-tbl input{width:100%;min-width:150px;height:34px;border:0;border-radius:var(--radius-sm);background:#fff;padding:0 10px;font:inherit;font-size:12.5px;color:var(--ink)}
.dzx-g-tbl thead input{background:transparent;font-weight:500;min-width:120px}
.dzx-g-tbl thead input:hover{background:rgba(255,255,255,.6)}
.dzx-g-tbl input:focus{outline:0;background:#fff;box-shadow:var(--ring)}
.dzx-g-tbl .dz-ib{width:28px;height:28px;color:var(--muted)}
.dzx-g-tbl .dz-ib:hover{background:#fff;color:var(--danger)}
.dzx-g-tacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.dzx-g-tacts .dz-btn2{height:34px}
.dzx-g-tcount{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Make All Copies */
.dzx-g-mk .dz-modal-box{width:min(640px,100%)}
.dzx-g-strip{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0 16px;padding:22px 18px 16px;border-radius:var(--radius);background:var(--panel)}
.dzx-g-strip figure{flex:0 1 150px;min-width:0;margin:0;display:grid;gap:8px;justify-items:center}
.dzx-g-strip .im{display:grid;place-items:center;width:100%;border-radius:var(--radius-sm);overflow:hidden}
.dzx-g-strip .im img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(25,32,38,.14)) drop-shadow(0 6px 14px rgba(25,32,38,.12));-webkit-user-drag:none}
.dzx-g-strip figcaption{max-width:100%;font-size:11.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-g-plus{flex:none;height:30px;padding:0 11px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;font-size:12px;font-weight:500;line-height:30px;color:var(--muted)}
.dzx-g-mk .dz-confirm{margin:14px 0 0}
.dzx-g-prog{margin:16px 0 0}
.dzx-g-prog[hidden]{display:none}
.dzx-g-bar{height:8px;border-radius:var(--bar-r);background:var(--panel);overflow:hidden}
.dzx-g-bar i{display:block;width:0;height:100%;border-radius:inherit;background:var(--primary);transition:width .25s ease}
.dzx-g-prog p{font-size:12px;color:var(--muted);margin:8px 0 0;font-variant-numeric:tabular-nums}
.dzx-g-mk .dz-fin-msg .dzx-g-link{margin:0 0 0 6px}
@media (prefers-reduced-motion:reduce){.dzx-g-th .im.sk,.dzx-g-strip .im.sk,.dzx-g-spin,.dzx-g-stage.busy::after{animation:none}}
@media (max-width:860px){
  .dzx-g-badge{top:2px}
  .dzx-g-m .dz-modal-box{padding:22px 16px 18px}
  .dzx-g-m h2{font-size:19px}
  .dzx-g-cvh{padding-right:30px}
  .dzx-g-cvb{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:14px}
  .dzx-g-stage{height:min(36vh,300px);padding:16px}
  .dzx-g-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible;margin:0;padding:0}
  .dzx-g-cvf{position:sticky;bottom:-18px;z-index:2;background:#fff;margin:18px -16px -18px;padding:12px 16px 14px}
  .dzx-g-cvf .btn,.dzx-g-cvf .dz-btn2{flex:1 1 140px;white-space:nowrap}
  .dzx-g-fine{flex-basis:100%}
  .dzx-g-strip{gap:10px;padding:16px 12px 12px}
  .dzx-g-tbl input{min-width:128px}
}
@media (max-width:560px){.dzx-g-cvf .btn,.dzx-g-cvf .dz-btn2{flex-basis:100%}.dzx-g-cvf .btn{order:-1}.dzx-g-cvf .dzx-g-fine{order:-2}}
@media (max-width:400px){.dzx-g-th{padding:6px 6px 5px}.dzx-g-th .fl{right:8px;top:8px}.dzx-g-strip .dzx-g-plus{display:none}}
/* x-plugins G end */

/* the plug-in host: More menu, overlays, modals (design.html window.DZX) */
.dz-ovl{position:absolute;left:0;top:0;width:0;height:0;z-index:7;pointer-events:none}
.dz-ov{position:absolute;left:0;top:0}
.dz-xmodal .dz-modal-box{width:min(760px,100%);padding:28px}
.dz-xmodal.wide .dz-modal-box{width:min(1100px,100%)}
.dz-fin-x{margin:14px 0 18px}
.dz-ql-modes{margin-right:auto}

/* picture and logo frames like Canva's (js/designs/x-frames.js, 23 Oct 2026): the card at the top of the panel for an empty spot */
.dzx-fr-card{display:grid;justify-items:start;gap:6px;margin:0 0 14px;padding:16px;border-radius:var(--radius);background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-dk)}
.dzx-fr-card b{font-size:15px;font-weight:500;color:var(--ink)}
.dzx-fr-card p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.dzx-fr-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius);background:#fff;color:var(--primary);box-shadow:var(--card-sh,0 1px 3px rgba(25,32,38,.12))}
.dzx-fr-btns{display:grid;gap:6px;width:100%;margin-top:6px}
.dzx-fr-btns .btn,.dzx-fr-btns .dz-btn2{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.dzx-fr-card .dzx-fr-tip{font-size:11.5px}
.dz-up[draggable="true"]{cursor:grab}

/* x-plugins H start: modes, layouts, smart QR */
/* Simple Tools and All Tools (js/designs/x-modes.js): tools outside Simple fold away (never with the hidden attribute, which other
   plug-ins keep for their own gating); the switch sits at the foot of the rail, at the end of the bottom bar on phones */
.dz3.dzx-h-simple .dz-tabs [data-dztab].dzx-h-adv{display:none}
.dz-tabs .dzx-h-mode{position:relative;margin-top:auto;color:var(--muted)}
.dz-tabs .dzx-h-mode::before{content:"";position:absolute;left:14px;right:14px;top:-1px;height:1px;background:var(--dz-hair)}
.dz-tabs .dzx-h-mode svg{color:var(--primary);opacity:.9}
.dz-tabs .dzx-h-mode:hover svg{opacity:1}
/* the precision aids stay off the page in Simple */
.dz3.dzx-h-simple #dzxRulersBtn,.dz3.dzx-h-simple .dzx-d-pg,.dz3.dzx-h-simple .dzx-d-arr{display:none!important}
@media (max-width:860px){
  .dz3 .dz-tabs button.dzx-h-mode{margin-top:0;flex:0 0 auto!important;padding-left:7px;padding-right:7px}
  .dz-tabs .dzx-h-mode::before{left:0;right:auto;top:12px;bottom:12px;width:1px;height:auto}
  /* the bar scrolls sideways when the tools do not fit: a soft fade at the edge that has more */
  .dz-tabs.dzx-h-mr::after,.dz-tabs.dzx-h-ml::before{content:"";position:sticky;flex:0 0 28px;align-self:stretch;pointer-events:none;z-index:1}
  .dz-tabs.dzx-h-mr::after{right:-4px;margin-left:-28px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.97) 80%)}
  .dz-tabs.dzx-h-ml::before{left:-4px;margin-right:-28px;background:linear-gradient(270deg,rgba(255,255,255,0),rgba(255,255,255,.97) 80%)}
}
@media (max-width:400px){.dz3.dzx-h-simple .dz-tabs button:not(.dzx-h-mode){flex-basis:38px!important}}
@media (max-width:360px){.dz3.dzx-h-simple .dz-tabs button{font-size:8.6px;letter-spacing:-.25px}.dz3 .dz-tabs button.dzx-h-mode{padding-left:5px;padding-right:5px}}

/* Try Another Layout (js/designs/x-layouts.js): six live previews a page, panel tiles, tint and ring on hover */
.dzx-h-laym .dz-modal-box{width:min(840px,100%);padding:26px 26px 20px}
.dzx-h-lay-h{display:flex;align-items:center;gap:16px;margin:0 40px 16px 0}
.dzx-h-lay-now{flex:none;display:block;height:58px;max-width:96px;border-radius:var(--radius-sm);background:var(--panel);overflow:hidden;box-shadow:0 1px 2px rgba(25,32,38,.1),0 4px 12px rgba(25,32,38,.1)}
.dzx-h-lay-now img{display:block;width:100%;height:100%;object-fit:contain}
.dzx-h-lay-h h2{font-size:19px;font-weight:500;letter-spacing:-.2px;margin:0 0 4px}
.dzx-h-lay-h p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.dzx-h-lay-side{display:flex;width:max-content;margin:0 0 14px}
.dzx-h-lay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dzx-h-lt{display:grid;gap:2px;min-width:0;padding:12px;border:0;border-radius:var(--radius);background:var(--panel);font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-h-lt:hover,.dzx-h-lt:focus-visible{background:var(--tint);box-shadow:var(--ring);outline:0}
.dzx-h-lt-im{display:flex;align-items:center;justify-content:center;height:168px;min-width:0;margin:0 0 8px}
.dzx-h-lt-im img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;background:#fff;box-shadow:0 1px 2px rgba(25,32,38,.1),0 8px 20px rgba(25,32,38,.13);-webkit-user-drag:none;user-select:none}
.dzx-h-lt-im.none::after{content:"No preview";font-size:11.5px;color:var(--muted)}
.dzx-h-lt b{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-h-lt small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzx-h-spin{width:20px;height:20px;border-radius:50%;border:2px solid rgba(var(--prgb),.2);border-top-color:var(--primary);animation:dzSpin .8s linear infinite}
.dzx-h-lay-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.dzx-h-lay-f .dz-btn2{height:36px}
.dzx-h-lay-f .dz-btn2:disabled{opacity:.4;cursor:default}
.dzx-h-lay-n{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}
.dzx-h-laypg .dz-btn2.wide{height:38px}
.dzx-h-laypg .dz-hint{margin:2px 0 0;font-weight:400}
.dz-blank.dzx-h-layrow{margin:0 0 12px} /* no negative margin (6 Nov 2026): the two start rows sit 12 px apart like the rest of the pane */
.dz-blank.dzx-h-layrow[hidden]{display:none}
.dzx-h-toast{position:fixed;left:50%;bottom:28px;z-index:170;display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:var(--radius);background:var(--ink);color:#fff;font-size:12.5px;line-height:1.45;box-shadow:0 12px 34px rgba(10,16,22,.3);opacity:0;transform:translate(-50%,10px);transition:opacity .2s,transform .2s}
.dzx-h-toast.show{opacity:1;transform:translate(-50%,0)}
.dzx-h-toast span{flex:1 1 220px;min-width:0}
.dzx-h-toast button{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:var(--radius);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.dzx-h-toast button:hover{background:rgba(255,255,255,.22)}
@media (max-width:860px){.dzx-h-toast{bottom:calc(72px + env(safe-area-inset-bottom,0px));flex-wrap:wrap;width:calc(100vw - 32px)}.dzx-h-toast span{flex-basis:100%}}
@media (max-width:760px){
  .dzx-h-laym .dz-modal-box{padding:20px 16px 16px}
  .dzx-h-lay-h{margin:0 36px 14px 0;gap:12px}.dzx-h-lay-h h2{font-size:17px}.dzx-h-lay-h p{font-size:12px}.dzx-h-lay-now{height:46px}
  .dzx-h-lay-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dzx-h-lt{padding:10px}.dzx-h-lt-im{height:124px;margin-bottom:6px}
  .dzx-h-lay-f .dz-btn2{padding:0 10px}
}
@media (max-width:380px){.dzx-h-lt-im{height:104px}.dzx-h-lay-n{font-size:11px}.dzx-h-lay-f .dz-btn2{font-size:12px}}

/* Smart QR codes (js/designs/x-qr.js): the kind tiles, the small forms, the summary, honey warnings, the caption */
.dzx-h-gone{display:none!important}
.dzx-h-what{margin-bottom:12px}
.dzx-h-qk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dzx-h-qk button{display:grid;justify-items:center;align-content:center;gap:5px;min-width:0;min-height:58px;padding:8px 4px 7px;border:0;border-radius:var(--radius);background:var(--panel);color:var(--ink);font:inherit;font-size:10.5px;font-weight:500;line-height:1.2;text-align:center;cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-h-qk button svg{color:var(--icon,var(--ink));opacity:.8}
.dzx-h-qk button:hover{background:var(--tint)}
.dzx-h-qk button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);font-weight:500}
.dzx-h-qk button[aria-pressed="true"] svg{color:var(--primary);opacity:1}
.dzx-h-qf{display:grid}
.dzx-h-fl{margin-bottom:12px}
.dzx-h-fl>span{display:flex;align-items:baseline;gap:6px}
.dzx-h-fl em{font-style:normal;font-size:11px;font-weight:500;color:var(--muted)}
.dzx-h-seg{display:flex;width:100%}
.dzx-h-seg>button{flex:1 1 auto;padding:0 7px}
.dzx-h-chips{display:flex;flex-wrap:wrap;gap:6px}
.dzx-h-chips button{height:30px;padding:0 12px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font:inherit;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-h-chips button:hover{background:var(--tint)}
.dzx-h-chips button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);font-weight:500}
.dzx-h-from{display:grid;grid-template-columns:14px minmax(0,1fr);gap:2px 6px;align-items:start;margin:-5px 0 14px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.dzx-h-from>svg{margin-top:2px;color:var(--primary)}
.dzx-h-from button,.dzx-h-lnk{border:0;background:none;padding:0;font:inherit;font-size:11.5px;font-weight:500;color:var(--primary);cursor:pointer;white-space:nowrap;text-align:left}
.dzx-h-from button{grid-column:2;justify-self:start;margin-top:2px}
.dzx-h-from button:hover,.dzx-h-lnk:hover{text-decoration:underline;text-underline-offset:3px}
.dzx-h-lnk{display:inline-flex;align-items:center;gap:5px;margin:-4px 0 14px}
.dzx-h-lead{margin:0 0 10px}
.dzx-h-vc{display:grid;margin:0 0 4px;border-top:1px solid var(--dz-hair)}
.dzx-h-vr{padding:9px 0 10px;border-bottom:1px solid var(--dz-hair)}
.dzx-h-vt{display:flex;align-items:center;gap:9px;margin:0;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer}
.dzx-h-vt input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--primary);cursor:pointer}
.dzx-h-vt i{display:inline-flex;margin-left:auto;color:var(--primary);font-style:normal}
.dzx-h-vr:not(.on) .dzx-h-vt{color:var(--muted);font-weight:500}
.dz3 .dzx-h-vr input[type=text]{margin-top:7px}
.dz3 .dzx-h-vr textarea{margin-top:7px;min-height:56px}
.dzx-h-sum{display:flex;align-items:center;gap:8px;margin:2px 0 10px;padding:9px 10px 9px 11px;border-radius:var(--radius);background:var(--tint);font-size:12px;font-weight:500;line-height:1.4;color:var(--ink)}
.dzx-h-sum>svg{flex:none;color:var(--primary)}
.dzx-h-sum span{flex:1;min-width:0;overflow-wrap:anywhere}
.dzx-h-test{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--primary);text-decoration:none;white-space:nowrap}
.dzx-h-test:hover{text-decoration:underline;text-underline-offset:3px}
.dzx-h-warn{display:grid;grid-template-columns:16px minmax(0,1fr);gap:4px 8px;align-items:start;margin:0 0 10px;padding:9px 11px;border-radius:var(--radius);background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line);font-size:12px;font-weight:400;line-height:1.45;color:var(--ink)}
.dzx-h-warn>svg{margin-top:1px;color:var(--attn)}
.dzx-h-warn .dz-btn2{grid-column:2;justify-self:start;height:30px;margin-top:4px;padding:0 11px;background:#fff;font-size:12px}
.dz3 .dzx-h-capbtn{height:36px;margin-top:4px}
.dzx-h-caphint{margin:6px 0 14px}
.dzx-h-capok{display:flex;align-items:center;gap:8px;margin:4px 0 14px;font-size:12px;font-weight:500;color:var(--ink)}
.dzx-h-capok>svg{flex:none;color:var(--primary)}
.dzx-h-capok span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dzx-h-capok .dz-btn2{height:30px;padding:0 11px;font-size:12px}
/* adding one: a tile for each kind in Elements, and the card in Your Details on business cards */
.dzx-h-qadd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 12px}
.dzx-h-qadd button{display:grid;justify-items:center;align-content:center;gap:5px;min-width:0;min-height:60px;padding:9px 4px 8px;border:0;border-radius:var(--radius);background:var(--panel);font:inherit;font-size:11px;font-weight:500;line-height:1.2;color:var(--ink);text-align:center;cursor:pointer;transition:background .15s}
.dzx-h-qadd button svg{color:var(--icon,var(--ink));opacity:.8;transition:color .15s,opacity .15s}
.dzx-h-qadd button:hover{background:var(--tint)}
.dzx-h-qadd button:hover svg{color:var(--primary);opacity:1}
.dzx-h-or{margin:0 0 6px;font-size:11.5px;color:var(--muted)}
.dzx-h-qcta{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px 12px;align-items:center;margin:8px 0 0;padding:13px 14px;border-radius:var(--radius);background:var(--panel)}
.dzx-h-qcta-ic{width:36px;height:36px;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center}
.dzx-h-qcta b{display:block;font-size:12.5px;font-weight:500}
.dzx-h-qcta small{display:block;margin-top:1px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.dzx-h-qcta .dz-btn2{grid-column:2;justify-self:start;background:#fff}
.dzx-h-qcta .dz-btn2:hover{background:var(--tint)}
/* x-plugins H end */

/* Start From Scratch in two steps (23 Oct 2026, Junaid: "no way for me to go back... too crowded... double click... open"): 1. a tile per
   product drawn at its real shape, search and family chips; 2. the sizes with All Products to go back and the button always in view */
.dz-scratch{width:min(920px,100%);height:min(760px,calc(100vh - 40px));padding:28px 30px 0;display:flex;flex-direction:column;overflow:hidden}
.dz-scratch h2{font-size:26px;font-weight:500;margin:6px 0 6px;letter-spacing:-.3px}
#dzScratchBody{display:flex;flex-direction:column;flex:1;min-height:0}
.dz-scr-top{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:12px;align-items:center;margin:14px 0 4px}
.dz-scr-top .dz-search{margin:0}
.dz-scr-fams{margin:0;padding:2px 2px 4px}
.dz-scr-grid{flex:1;min-height:0;overflow-y:auto;padding:0 4px 12px 0;margin-top:4px;scrollbar-width:thin}
.dz-scr-h{display:flex;align-items:baseline;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink);margin:16px 2px 8px}
.dz-scr-h span{font-weight:400;color:var(--muted)}
.dz-scr-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dz-scr-p{display:grid;justify-items:center;align-content:start;gap:8px;padding:12px 10px 12px;border:0;border-radius:var(--radius);background:var(--panel);cursor:pointer;text-align:center;color:var(--ink);transition:background .12s,box-shadow .12s}
.dz-scr-p:hover,.dz-scr-p:focus-visible{background:var(--tint);box-shadow:var(--ring);outline:0}
.dz-scr-pa .dz-scr-art{width:124px;height:86px}
.dz-scr-pt{display:grid;gap:2px}
.dz-scr-pt b{font-size:13px;font-weight:500;line-height:1.3}
.dz-scr-pt small{font-size:11.5px;color:var(--muted)}
.dz-scr-none{padding:30px 4px}
.dz-scr-tip{margin:0;padding:10px 0 16px;border-top:1px solid var(--line,#E6E9EC);font-size:12px}
.dz-scr-back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px 0 8px;margin:0 0 12px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer}
.dz-scr-back:hover{background:var(--tint)}
.dz-scratch .dz-scr-sizes{flex:none;overflow-y:auto;min-height:0;margin:10px 0 8px;padding:2px}
.dz-scratch .dz-scr-size{min-height:150px;align-content:center}
#dzScratchBody:has(.dz-scr-back) .dz-scr-sizes{flex:1 1 auto;align-content:start}
.dz-scr-mine{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;margin:10px 0 2px;border-radius:var(--radius);background:var(--tint)}
.dz-scr-mine-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius);background:#fff;color:var(--primary)}
.dz-scr-mine b{display:block;font-size:13px;font-weight:500}
.dz-scr-mine small{font-size:11.5px;color:var(--muted)}
.dz-scr-mine-b{display:flex;gap:6px;flex-wrap:wrap}
.dz-scr-mine-b .dz-btn2{height:34px;padding:0 14px;display:inline-flex;align-items:center}
.dz-scr-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 20px;margin-top:auto;border-top:1px solid var(--line,#E6E9EC);background:#fff}
.dz-scr-pickd{font-size:12.5px;color:var(--muted)}
.dz-scr-go{height:42px;gap:8px;font-size:13px;margin:0}
@media (max-width:760px){
  .dz-scratch{height:92vh;padding:22px 16px 0}
  .dz-scratch h2{font-size:21px}
  .dz-scr-top{grid-template-columns:1fr;gap:8px}
  .dz-scr-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dz-scr-pa .dz-scr-art{width:104px;height:72px}
  .dz-scr-mine{grid-template-columns:auto minmax(0,1fr)}
  .dz-scr-mine-b{grid-column:1/-1}
  .dz-scr-foot{padding-bottom:max(16px,env(safe-area-inset-bottom))}
}

/* Carry On Where You Left Off (23 Oct 2026): the design edited last, above the start cards */
.dz-resume{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;margin:18px 0 6px;padding:14px 18px 14px 14px;background:#fff;border-radius:var(--radius);box-shadow:var(--card-sh)}
.dz-resume-im{display:grid;place-items:center;width:96px;height:68px;border-radius:var(--radius-sm,8px);background:var(--panel);overflow:hidden;color:var(--primary)}
.dz-resume-im img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.dz-resume-t{display:grid;gap:2px;min-width:0}
.dz-resume-t .eyebrow{margin:0}
.dz-resume-t b{font-size:16px;font-weight:500}
.dz-resume-t small{font-size:12.5px;color:var(--muted)}
.dz-resume-a{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dz-resume-a .btn,.dz-resume-a .dz-btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;min-height:40px;padding:0 16px;font-size:13px;line-height:1.2;white-space:nowrap}
.dz-resume-a .btn svg{flex:none}
.dz-resume-a .dz-btn2{border-radius:var(--radius);background:var(--panel);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;border:0}
.dz-resume-a .dz-btn2:hover{background:var(--tint)}
@media (max-width:760px){.dz-resume{grid-template-columns:auto minmax(0,1fr);margin:0 0 14px}.dz-resume-a{grid-column:1/-1;justify-content:stretch}.dz-resume-a>*{flex:1 1 auto;justify-content:center}.dz-resume-a>.btn{flex-grow:2}.dz-resume-im{width:76px;height:56px}}

/* Save, Save As a New Copy, Rename and the leaving window (23 Oct 2026, Junaid: "save as... once you exit, ask them... or discard") */
.dz-savegrp{display:inline-flex;align-items:center;margin-left:4px}
.dz3 .dz-savebtn{height:34px;padding:0 12px;gap:6px;border-radius:var(--tag-r) 0 0 var(--tag-r);font-size:12.5px;font-weight:500}
.dz3 .dz-savemore{height:34px;width:30px;padding:0;justify-content:center;border-radius:0 var(--tag-cut) var(--tag-r) 0;corner-shape:var(--tag-shape);margin-left:1px}
.dz-saved.dirty{color:var(--muted)}
.dz3 #dzTitle{cursor:text;border-radius:var(--radius);padding:1px 4px;margin-left:-4px;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz3 #dzTitle:hover{background:var(--panel)}
.dz-menu kbd{margin-left:auto;font:inherit;font-size:11px;color:var(--muted)}
.dz-leave{position:relative;max-width:460px}
.dz-leave .dz-modal-x{position:absolute;top:12px;right:12px}
.dz-leave-ic.warn{background:var(--attn-tint);color:var(--attn)}
.dz-leave .dz-name-l{display:grid;gap:6px;text-align:left;margin:0 0 16px;font-size:12px;font-weight:500}
.dz-leave .dz-name-l input,.dz-namem .dz-name-l input{height:42px;padding:0 12px;border:0;border-radius:var(--radius-sm,8px);background:var(--panel);font:inherit;font-size:14px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line,#E2E6EA)}
.dz-leave .dz-name-l input:focus,.dz-namem .dz-name-l input:focus{outline:0;box-shadow:var(--ring)}
.dz-leave-btns{display:grid;gap:8px;margin:0 0 6px}
.dz-leave-btns .btn,.dz-leave-btns .dz-btn2{height:42px;justify-content:center;width:100%}
.dz3 .dz-leave-discard,.dz-leave-discard{color:var(--danger,#A6402E)}
.dz-btn-danger{background:var(--danger,#A6402E)!important;border-color:var(--danger,#A6402E)!important}
.dz-leave-stay{display:block;margin:12px auto 0;padding:6px 10px;border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--primary);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dz-namem .dz-modal-box{width:min(460px,100%);padding:28px 26px 22px}
.dz-namem h2{font-size:20px;font-weight:500;margin:6px 0 6px}
.dz-namem .dz-name-l{display:grid;gap:6px;margin:14px 0 4px;font-size:12px;font-weight:500}
.dz-namem .dz-hint{margin:0 0 16px}
@media (max-width:760px){.dz3 .dz-savebtn span{display:none}.dz3 .dz-savebtn{padding:0 9px}.dz3 #dzTitle{max-width:150px}}
/* Share for approval (group K, js/designs/x-share.js, 23 Oct 2026): the window from More and Check and Finish. A white sheet in the
   figure-card pattern (tint icon tile, eyebrow, h2 at 500, the words under a hairline); fields on the panel grey that turn white with
   --ring; status chips green for Approved, honey (--attn) for a change asked for or a changed design, the theme tint while waiting */
.dzx-k-m .dz-modal-box{width:min(620px,100%);padding:28px 28px 24px}
/* every plug-in's More menu item shows its icon (the host hides menu icons unless a choice is ticked) */
.dz-menu>button[data-xm] svg{visibility:visible;color:var(--primary)}
.dzx-k-head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;margin:0 36px 0 0}
.dzx-k-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius);background:var(--tint);color:var(--primary)}
.dzx-k-k{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.dzx-k-head h2{margin:3px 0 0;font-size:21px;font-weight:500;line-height:1.2;letter-spacing:-.2px;text-wrap:balance}
.dzx-k-lead{font-size:13px;line-height:1.55;color:var(--muted);margin:14px 0 0;padding:0 0 16px;border-bottom:1px solid var(--line)}
.dzx-k-pv{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;margin:16px 0 0;padding:20px 18px 14px;border-radius:var(--radius);background:var(--panel)}
.dzx-k-pv figure{margin:0;display:grid;justify-items:center;gap:7px;min-width:0}
.dzx-k-th{display:block;height:104px;max-width:220px;background:#fff;border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 1px 2px rgba(25,32,38,.10),0 8px 22px rgba(25,32,38,.14)}
.dzx-k-th.round{border-radius:50%}
.dzx-k-th img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
.dzx-k-pv figcaption{font-size:11.5px;font-weight:500;color:var(--muted)}
.dzx-k-how{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dzx-k-how li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 10px;align-items:start;padding:12px;border-radius:var(--radius);background:#fff;box-shadow:var(--card-sh,0 1px 2px rgba(25,32,38,.05),0 8px 20px -14px rgba(25,32,38,.18))}
.dzx-k-n{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius);background:var(--tint);color:var(--primary)}
.dzx-k-how b{font-size:12.5px;font-weight:500;line-height:1.3;color:var(--ink)}
.dzx-k-how small{font-size:11.5px;line-height:1.45;color:var(--muted)}
.dzx-k-form{display:grid;gap:12px;margin:18px 0 0}
.dzx-k-form label{display:grid;gap:6px;margin:0}
.dzx-k-form label>span{font-size:12px;font-weight:500;color:var(--ink)}
.dzx-k-form label small{font-weight:400;color:var(--muted);margin-left:4px}
.dzx-k-m input[type=text],.dzx-k-m input[type=email],.dzx-k-m textarea{width:100%;min-width:0;height:40px;border:0;border-radius:var(--radius);background:var(--panel);padding:0 12px;font:inherit;font-size:13.5px;color:var(--ink);box-shadow:none;transition:background .15s,box-shadow .15s}
.dzx-k-m textarea{height:auto;min-height:74px;padding:10px 12px;line-height:1.5;resize:vertical}
.dzx-k-m input[type=text]:focus,.dzx-k-m input[type=email]:focus,.dzx-k-m textarea:focus{outline:0;background:#fff;box-shadow:var(--ring)}
.dzx-k-m input::placeholder,.dzx-k-m textarea::placeholder{color:#9AA5AE}
.dzx-k-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.dzx-k-m .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;font-size:13px}
.dzx-k-m .btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.dzx-k-m .dz-btn2{height:36px}
.dzx-k-m a.dz-btn2{text-decoration:none}
.dzx-k-msg{font-size:12.5px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.dzx-k-msg:empty{display:none}
.dzx-k-msg.bad{color:var(--attn)}
.dzx-k-fine{font-size:11.5px;line-height:1.5;color:var(--muted);margin:14px 0 0}
.dzx-k-fine.c{text-align:center;margin-top:8px}
/* shared: the state, the link, the ways to send it */
.dzx-k-state{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:16px 0 0;font-size:12.5px;color:var(--muted)}
.dzx-k-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--tint);color:var(--primary);font-size:12px;font-weight:500;white-space:nowrap}
.dzx-k-chip.ok{background:var(--success-tint);color:var(--ok,var(--success))}
.dzx-k-chip.attn{background:var(--attn-tint);color:var(--attn);box-shadow:inset 0 0 0 1px var(--attn-line)}
.dzx-k-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:16px 0 0}
.dzx-k-url{display:flex;align-items:center;gap:8px;min-width:0;height:42px;margin:0;padding:0 0 0 12px;border-radius:var(--radius);background:var(--panel);color:var(--icon,var(--ink));cursor:text}
.dzx-k-url svg{flex:none}
.dzx-k-m .dzx-k-url input[type=text]{height:42px;padding:0 12px 0 0;background:transparent;font-size:13px;text-overflow:ellipsis}
.dzx-k-m .dzx-k-url input[type=text]:focus{background:transparent;box-shadow:none}
.dzx-k-url:focus-within{background:#fff;box-shadow:var(--ring)}
.dzx-k-acts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.dzx-k-note{display:grid;gap:3px;margin:16px 0 0;padding:13px 14px;border-radius:var(--radius);background:var(--tint)}
.dzx-k-note.attn{background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line)}
.dzx-k-note b{font-size:13px;font-weight:500;color:var(--ink)}
.dzx-k-note span{font-size:12.5px;line-height:1.5;color:var(--muted)}
.dzx-k-note .dz-btn2,.dzx-k-note .btn{justify-self:start;margin-top:8px}
.dzx-k-note.attn .dz-btn2{background:#fff}
.dzx-k-note.attn .dz-btn2:hover{background:var(--attn-ring)}
/* the replies */
.dzx-k-rsec{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.dzx-k-rh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dzx-k-rh h3{margin:0;font-size:13px;font-weight:500;color:var(--ink)}
.dzx-k-reps{list-style:none;margin:6px 0 0;padding:0;max-height:min(38vh,340px);overflow-y:auto;overscroll-behavior:contain}
.dzx-k-reps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.dzx-k-reps li:last-child{border-bottom:0}
.dzx-k-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--panel);color:var(--ink);font-size:12px;font-weight:500}
.dzx-k-reps li.ok .dzx-k-av{background:var(--success-tint);color:var(--ok,var(--success))}
.dzx-k-reps li.chg .dzx-k-av{background:var(--attn-tint);color:var(--attn)}
.dzx-k-who{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0;min-height:34px}
.dzx-k-who b{font-size:13px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.dzx-k-who time{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.dzx-k-pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);font-size:11.5px;font-weight:500;white-space:nowrap}
.dzx-k-pill.ok{background:var(--success-tint);color:var(--ok,var(--success))}
.dzx-k-pill.attn{background:var(--attn-tint);color:var(--attn)}
.dzx-k-said{margin:6px 0 0;padding:9px 12px;border-radius:var(--radius);background:var(--panel);font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.dzx-k-empty{margin:10px 0 2px;font-size:12.5px;color:var(--muted)}
.dzx-k-earlier{margin:10px 0 0;padding:10px 12px;border-radius:var(--radius);background:var(--panel)}
.dzx-k-earlier summary{cursor:pointer;font-size:12.5px;font-weight:500;color:var(--ink)}
.dzx-k-earlier .dzx-k-reps{max-height:none}
.dzx-k-earlier .dzx-k-said{background:#fff}
.dzx-k-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.dzx-k-foot>span{font-size:12px;color:var(--muted)}
.dzx-k-foot>div{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
/* Check and Finish */
.dzx-k-fin{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px 12px;align-items:center;padding:13px 14px;border-radius:var(--radius);background:var(--panel)}
.dzx-k-fin-ic{width:40px;height:40px;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center}
.dzx-k-fin b{display:block;font-size:13px;font-weight:500;color:var(--ink)}
.dzx-k-fin span:not(.dzx-k-fin-ic):not(.dzx-k-chip){display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:2px}
.dzx-k-fin .dz-btn2{grid-column:2;justify-self:start;background:#fff}
.dzx-k-fin .dz-btn2:hover{background:var(--tint)}
.dzx-k-fin.on{grid-template-columns:minmax(0,1fr);gap:8px}
.dzx-k-fin.on .dz-btn2{grid-column:1}
.dzx-k-fin-top{display:flex}
@media (max-width:860px){
  .dzx-k-m .dz-modal-box{padding:22px 16px 18px}
  .dzx-k-head{margin-right:34px}
  .dzx-k-head h2{font-size:18.5px}
  .dzx-k-th{height:86px}
}
@media (max-width:560px){
  .dzx-k-how{grid-template-columns:minmax(0,1fr);gap:8px}
  .dzx-k-how li{padding:10px 12px}
  .dzx-k-link{grid-template-columns:minmax(0,1fr)}
  .dzx-k-btns .btn,.dzx-k-btns .dz-btn2,.dzx-k-link .btn{width:100%}
  .dzx-k-acts .dz-btn2{flex:1 1 auto}
  .dzx-k-foot>div{margin-left:0;width:100%}
  .dzx-k-foot>div .dz-btn2{flex:1 1 auto}
  .dzx-k-who time{margin-left:0;width:100%}
}

/* Arrange explained (23 Oct 2026): a small drawing beside each kind of alignment */
.dzi-arr{gap:8px}
.dzi-explain{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center;margin:0 0 2px}
.dzi-explain svg{display:block;background:var(--panel);border-radius:var(--radius)}
.dzi-explain .pg{fill:#fff;stroke:rgba(25,32,38,.28);stroke-width:1;stroke-dasharray:2.5 2}
.dzi-explain .pc{fill:var(--primary);opacity:.32}
.dzi-explain .ln{stroke:var(--primary);stroke-width:1.2;stroke-dasharray:2 1.6;fill:none}
.dzi-explain .gp{stroke:var(--primary);stroke-width:1.1;fill:none;stroke-linecap:round}
.dzi-explain b{display:block;font-size:12.5px;font-weight:500;color:var(--ink)}
.dzi-explain small{display:block;font-size:11.5px;line-height:1.45;font-weight:400;color:var(--muted)}

/* contact lines that do not match (23 Oct 2026) */
.dzi-match{display:grid;gap:8px;padding:12px;margin:4px 0 12px;border-radius:var(--radius);background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line)}
.dzi-match span{font-size:12px;line-height:1.45;color:var(--ink)}
.dzi-match .dz-btn2{justify-content:center;gap:6px}
/* the quiet one-tap beside it (24 Oct 2026): Use This Colour for All Contact Lines, a text button in --primary, no box */
.dzi-match .dz-linkb{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 6px;border:0;border-radius:var(--radius);background:none;font:inherit;font-size:12px;font-weight:500;color:var(--primary);cursor:pointer}
.dzi-match .dz-linkb:hover{text-decoration:underline}
.dzi-match .dz-linkb:focus-visible{outline:2px solid var(--primary);outline-offset:1px}

/* the View menu (23 Oct 2026, Junaid: "do we need a ruler? show ruler, hide ruler, show cut lines"): one place for every on-screen aid */
.dz-viewpop{width:300px}
.dz-viewpop .dz-swrow{padding:7px 0}
.dz-viewpop .dz-swrow small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:1px}
.dz-viewpop .dz-vsub{margin:2px 0 6px 0}
.dz-viewpop details{margin:2px 0 4px}
.dz-viewpop summary{font-size:12px;color:var(--primary);cursor:pointer;list-style:none}
.dz-viewpop summary::-webkit-details-marker{display:none}
.dz-viewpop hr{border:0;border-top:1px solid var(--line,#E6E9EC);margin:6px 0}
.dz-viewpop .dz-menu-note{border-top:0;margin-top:2px;padding-top:4px}
/* x-plugins O start: Colour Picker 2 and dragging colours onto the page (colour-tools.js) */
.dzc-pop{position:fixed;z-index:121;display:flex;flex-direction:column;height:min(640px,calc(100vh - 24px));background:#fff;border-radius:var(--radius);box-shadow:0 0 0 .5px rgba(25,32,38,.1),0 12px 40px rgba(20,30,40,.18),0 2px 6px rgba(20,30,40,.08);overflow:hidden;color:var(--ink);font-size:13px;transition:opacity .16s}
.dzc-pop.dzc-dim{opacity:.18}
.dzc-pop.dzc-away{visibility:hidden}
.dzc-grab{display:none}
.dzc-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 0 14px}
.dzc-head b{font-size:13px;font-weight:500}
.dzc-done{height:28px;padding:0 12px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font:inherit;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer}
.dzc-done:hover{background:var(--tint)}
.dzc-done:focus-visible,.dzc-ib:focus-visible,.dzc-tg:focus-visible,.dzc-pill:focus-visible,.dzc-tabs button:focus-visible{outline:0;box-shadow:var(--ring)}
.dzc-pick{flex:none;display:grid;gap:10px;padding:10px 12px 0}
/* the square: strength left to right, brightness bottom to top; the strip: the hue */
.dzc-sv{position:relative;height:clamp(104px,19vh,156px);border-radius:var(--radius-sm);background:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,var(--hc,#F00));box-shadow:inset 0 0 0 1px rgba(25,32,38,.08);touch-action:none;cursor:crosshair;outline:0}
.dzc-sv:focus-visible{box-shadow:var(--ring)}
.dzc-th{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--c,#fff);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(25,32,38,.22),0 2px 6px rgba(0,0,0,.28);pointer-events:none}
.dzc-sv.on .dzc-th,.dzc-hue.on .dzc-th{transform:scale(1.12)}
.dzc-hue{position:relative;height:14px;margin:0 9px;border-radius:var(--bar-r);background:linear-gradient(to right,#F00 0%,#FF0 16.67%,#0F0 33.33%,#0FF 50%,#00F 66.67%,#F0F 83.33%,#F00 100%);box-shadow:inset 0 0 0 1px rgba(25,32,38,.08);touch-action:none;cursor:pointer;outline:0}
.dzc-hue::before{content:"";position:absolute;left:-9px;right:-9px;top:-8px;bottom:-8px}
.dzc-hue .dzc-th{top:50%}
.dzc-hue:focus-visible{box-shadow:var(--ring)}
.dzc-line{display:flex;align-items:center;gap:6px;min-width:0}
.dzc-cmp{flex:none;display:flex;width:58px;height:34px;border-radius:var(--radius-sm);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(25,32,38,.12);background:#fff linear-gradient(45deg,#E3E5E8 25%,transparent 25%,transparent 75%,#E3E5E8 75%) 0 0/10px 10px,linear-gradient(45deg,#E3E5E8 25%,transparent 25%,transparent 75%,#E3E5E8 75%) 5px 5px/10px 10px}
.dzc-cmp>*{flex:1;display:block;border:0;padding:0;margin:0;background:var(--c,transparent);min-width:0}
.dzc-old{cursor:pointer}
.dzc-old:disabled{cursor:default}
.dzc-old:not(:disabled):hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.dzc-new{cursor:grab;-webkit-touch-callout:none;user-select:none}
.dzc-cmp .none{background:linear-gradient(135deg,transparent 46%,#D23 46%,#D23 54%,transparent 54%)}
.dzc-hex{flex:1;min-width:0;height:34px;border:0;border-radius:var(--radius-sm);background:var(--panel);padding:0 9px;font:inherit;font-size:13px;font-family:ui-monospace,Consolas,monospace;color:var(--ink);text-transform:uppercase}
.dzc-hex:focus{outline:none;box-shadow:var(--ring);background:#fff}
.dzc-tg{flex:none;height:34px;padding:0 9px;border:0;border-radius:var(--radius-sm);background:var(--panel);font:inherit;font-size:11.5px;font-weight:500;color:var(--muted);cursor:pointer}
.dzc-tg:hover{color:var(--ink)}
.dzc-tg[aria-pressed="true"]{background:var(--tint);color:var(--ink)}
.dzc-ib{flex:none;width:34px;height:34px;border:0;border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.dzc-ib:hover{background:var(--tint)}
.dzc-rgb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dzc-rgb[hidden]{display:none}
.dzc-rgb label{display:flex;align-items:center;gap:6px;height:34px;padding:0 4px 0 9px;border-radius:var(--radius-sm);background:var(--panel);min-width:0}
.dzc-rgb label:focus-within{box-shadow:var(--ring);background:#fff}
.dzc-rgb span{font-size:10.5px;font-weight:500;color:var(--muted)}
.dzc-rgb input{flex:1;min-width:0;width:100%;border:0;background:transparent;font:inherit;font-size:13px;font-family:ui-monospace,Consolas,monospace;color:var(--ink);outline:0;padding:0}
/* five lighter, your colour, five darker: one strip like a paint card */
.dzc-ts{display:flex;height:30px;border-radius:var(--radius-sm);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(25,32,38,.1)}
.dzc-ts:empty{display:none}
.dzc-ts button{position:relative;flex:1;min-width:0;border:0;padding:0;background:var(--c);cursor:pointer;-webkit-touch-callout:none;user-select:none}
.dzc-ts button:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.dzc-ts button.base::before{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(25,32,38,.25)}
.dzc-ts button.on::after,.dzc-sw.on::after{content:"";position:absolute;inset:0;background:center/15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E")}
.dzc-ts button.on.lt::after,.dzc-sw.on.lt::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B3A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E")}
.dzc-ts button.base.on::before{display:none}
.dzc-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dzc-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 9px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font:inherit;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer}
.dzc-pill:hover{background:var(--tint)}
.dzc-pill svg{flex:none;color:var(--icon,var(--ink))}
.dzc-save.done{background:var(--tint)}
.dzc-nofill i{width:16px;height:16px;border-radius:50%;background:#fff linear-gradient(135deg,transparent 44%,#D23 44%,#D23 56%,transparent 56%);box-shadow:inset 0 0 0 1px rgba(25,32,38,.18)}
.dzc-nofill[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring)}
.dzc-safe:empty{display:none}
.dzc-note{margin:0}
/* the sets: tabs in the air, scrolling sideways */
.dzc-tabs{flex:none;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:10px 12px 8px;border-bottom:1px solid var(--line);-webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 22px),transparent)}
.dzc-tabs::-webkit-scrollbar{display:none}
.dzc-tabs button{flex:none;height:28px;padding:0 10px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer}
.dzc-tabs button:hover{color:var(--ink)}
.dzc-tabs button[aria-selected="true"]{background:var(--tint);color:var(--ink);font-weight:500}
.dzc-body{flex:1 1 auto;min-height:84px;overflow-y:auto;overscroll-behavior:contain;padding:2px 12px 14px}
.dzc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 7px;font-size:11.5px;font-weight:500;color:var(--muted)}
.dzc-link{border:0;background:none;padding:2px 0;font:inherit;font-size:11.5px;font-weight:500;color:var(--primary);cursor:pointer}
.dzc-link:hover{text-decoration:underline}
.dzc-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.dzc-sw{position:relative;aspect-ratio:1;min-width:28px;border:0;border-radius:50%;padding:0;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(25,32,38,.14);transition:transform .12s,box-shadow .12s;-webkit-touch-callout:none;user-select:none}
.dzc-sw:hover{transform:scale(1.1)}
.dzc-sw:focus-visible{outline:0;box-shadow:var(--ring)}
.dzc-sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary)}
.dzc-sw b{position:absolute;right:-3px;top:-3px;width:16px;height:16px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 1.5px #fff}
.dzc-edit .dzc-sw{animation:dzcWob .9s ease-in-out infinite alternate}
.dzc-edit .dzc-sw.on::after{display:none}
@keyframes dzcWob{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.dzc-edit .dzc-sw{animation:none}}
.dzc-empty{margin:12px 0 10px;font-size:12px;line-height:1.5;color:var(--muted)}
.dzc-hint{display:flex;align-items:center;gap:7px;margin:14px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted)}
.dzc-hint svg{flex:none;color:var(--icon,var(--muted))}
/* Colour Schemes: panel tiles, tint and ring when chosen */
.dzc-schs{display:grid;gap:6px}
.dzc-sch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px;padding:7px 8px 7px 4px;border-radius:var(--radius);background:var(--panel);cursor:pointer;transition:background .15s,box-shadow .15s}
.dzc-sch:hover{background:var(--tint)}
.dzc-sch.on{background:var(--tint);box-shadow:var(--ring)}
.dzc-sch-n{min-width:0;display:grid;gap:1px;border:0;background:none;padding:2px 6px;text-align:left;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;border-radius:var(--radius-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dzc-sch-n:focus-visible{outline:0;box-shadow:var(--ring)}
.dzc-sch-n small{font-size:10.5px;font-weight:500;color:var(--muted)}
.dzc-sch-c{display:flex;gap:5px}
.dzc-sch-c .dzc-sw{width:28px;height:28px;flex:none}
.dzc-use{grid-column:1/-1;background:#fff}
.dzc-use:hover:not(:disabled){background:#fff;box-shadow:var(--ring)}
/* dragging a colour: the dot under the pointer (above a finger), the piece outlined with its name */
html.dzc-dragging,html.dzc-dragging *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
.dzc-ghost{position:fixed;left:0;top:0;z-index:200;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff,0 0 0 3.5px rgba(25,32,38,.18),0 8px 22px rgba(20,30,40,.32);pointer-events:none}
.dzc-ghost.touch{width:44px;height:44px;margin:-22px 0 0 -22px}
.dzc-drop{position:fixed;z-index:119;border-radius:var(--radius-sm);box-shadow:0 0 0 2px var(--primary),0 0 0 6px rgba(var(--prgb),.16);background:rgba(var(--prgb),.06);pointer-events:none;transition:left .08s,top .08s,width .08s,height .08s}
.dzc-drop[hidden]{display:none}
.dzc-drop b{position:absolute;left:-2px;bottom:100%;margin-bottom:6px;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 5px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-size:11.5px;font-weight:500;white-space:nowrap;box-shadow:0 4px 12px rgba(20,30,40,.2)}
.dzc-drop b i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1.5px #fff}
.dzc-drop.low b,.dzc-drop.bg b{bottom:auto;top:8px;left:8px;margin:0}
.dzc-drop.bg{border-radius:var(--radius-sm);box-shadow:inset 0 0 0 2px var(--primary),inset 0 0 0 6px rgba(var(--prgb),.16);background:rgba(var(--prgb),.05)}
.dzc-drop.no{box-shadow:0 0 0 2px var(--muted);background:rgba(25,32,38,.04)}
.dzc-drop.no b{background:var(--muted)}
.dzc-drop.no b i{display:none}
#dzStudio .dz-sw,#dzStudio .dz-well,#dzStudio .dz-pal-c i{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* phones: a bottom sheet, the square and the strip big enough for a thumb */
.dzc-pop.dzc-sheet{left:0;right:0;top:auto;bottom:0;width:auto;height:clamp(420px,64vh,580px);max-height:calc(100vh - 56px);border-radius:var(--radius) var(--radius) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -10px 40px rgba(20,30,40,.22),0 0 0 .5px rgba(25,32,38,.1);animation:dzcUp .22s cubic-bezier(.2,.8,.2,1)}
.dzc-sheet .dzc-grab{display:block;position:absolute;left:50%;top:6px;width:38px;height:4px;margin-left:-19px;border-radius:var(--radius-sm);background:rgba(25,32,38,.2)}
.dzc-sheet .dzc-head{padding:16px 12px 0 16px;touch-action:none}
.dzc-sheet .dzc-sv{height:clamp(110px,18vh,160px)}
.dzc-sheet .dzc-hue{height:24px;margin:0 14px}
.dzc-sheet .dzc-th{width:26px;height:26px;margin:-13px 0 0 -13px}
.dzc-sheet .dzc-hue::before{left:-14px;right:-14px;top:-10px;bottom:-10px}
.dzc-sheet .dzc-ts{height:34px}
.dzc-sheet .dzc-grid{gap:8px}
.dzc-sheet .dzc-tabs button{height:32px}
@keyframes dzcUp{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
/* x-plugins O end */

/* x-plugins P start: my logo, logo versions, My Brands in the designer, help under the fields (23 Oct 2026) */
/* help under every Details field (js/designs/field-hints.js) and the address and name layouts */
.dz-fhint{display:block;font-size:11.5px;font-weight:400;line-height:1.45;color:var(--muted);margin:1px 0 2px}
.dz-fld.unused .dz-fhint{opacity:1}
.dz-lay{display:grid;gap:6px;margin:-4px 0 2px}
.dz-lay-k{font-size:12px;font-weight:500;color:var(--ink)}
.dz-lay .dz-addr-seg{margin:0}
.dz-lay .dz-addr-seg button{padding:0 6px;font-size:12px}
/* My Logo in the Logo tool: both versions, each on its own ground */
.dz-mylogo2{background:var(--panel);border-radius:var(--radius);padding:10px 10px 2px;margin:0 0 14px}
.dz-ml-h{display:flex;align-items:flex-start;gap:8px}
.dz-ml-h>div{flex:1;min-width:0}
.dz-ml-h b{display:block;font-size:13px;font-weight:500}
.dz-ml-h small{display:block;font-size:11.5px;line-height:1.4;color:var(--muted)}
.dz-ml-h .dz-ib{width:30px;height:30px;color:var(--muted)}
.dz-ml-vers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 0}
.dz-ml-vers figure{display:grid;gap:4px;margin:0;text-align:center}
.dz-ml-vers span{display:grid;place-items:center;aspect-ratio:4/3;padding:8px;border-radius:var(--radius-sm)}
.dz-ml-vers .lt{background:#fff repeating-conic-gradient(rgba(0,0,0,.035) 0 25%,transparent 0 50%) 0 0/12px 12px}
.dz-ml-vers .dk{background:var(--ink)}
.dz-ml-vers img{max-width:100%;max-height:100%;object-fit:contain;-webkit-touch-callout:none;user-select:none}
.dz-ml-vers figcaption{font-size:11px;color:var(--muted)}
.dz-mylogo2 .dz-mylogo-acts{margin:8px 0 8px}
.dz-mylogo2 .dz-btn2{background:#fff}
.dz-mylogo2 .dz-btn2:hover{background:var(--tint)}
.dz-lg-pv .dz-lg-light{background:#F4F5F6 repeating-conic-gradient(rgba(0,0,0,.035) 0 25%,transparent 0 50%) 0 0/16px 16px;box-shadow:none}
.dz-lg-pv .dz-lg-dark{background:var(--ink)}
.dz-lg-tobrand{margin:14px 0 0;height:38px}
.dz-lg-tobrand svg{width:17px;height:17px;flex:none}
/* My Brand tool: Designing For, the logo versions, Make One For Me */
.dz-bt-for{display:grid;gap:5px;margin:0 0 12px}
.dz-bt-for-k{font-size:11.5px;font-weight:500;color:var(--muted)}
.dz-bt-pick{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 12px 6px 6px;border:0;border-radius:var(--radius);background:var(--panel);font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:box-shadow .15s,background .15s}
.dz-bt-pick:hover,.dz-bt-pick[aria-expanded="true"]{background:var(--tint)}
.dz-bt-pick:focus-visible{outline:0;box-shadow:var(--ring)}
.dz-bt-pick b{flex:1;min-width:0;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-bt-pick>svg{flex:none;color:var(--muted)}
.dz-bt-for-lg{flex:none;display:grid;place-items:center;width:48px;height:36px;padding:4px;border-radius:var(--radius);background:#fff;overflow:hidden}
.dz-bt-for-lg.dark{background:var(--ink)}
.dz-bt-for-lg img{max-width:100%;max-height:100%;object-fit:contain;-webkit-touch-callout:none}
.dz-bt-for-lg.ph{font-size:15px;font-weight:500;color:var(--primary)}
.dz-menu.dz-bfor{min-width:250px}
.dz-menu.dz-bfor>button{min-height:48px;gap:10px}
.dz-menu.dz-bfor .dz-bt-for-lg{width:42px;height:32px;background:var(--panel)}
.dz-menu.dz-bfor .dz-bt-for-lg.dark{background:var(--ink)}
.dz-bfor-n{flex:1;min-width:0;display:grid;gap:1px}
.dz-bfor-n small{font-size:11px;font-weight:400;color:var(--muted)}
.dz-menu-link{display:flex;align-items:center;gap:8px;margin:4px 0 0;padding:9px 10px 7px 8px;border-top:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--primary);text-decoration:none}
.dz-menu-link svg{flex:none}
.dz-bt-miss{display:grid;align-content:center;justify-items:center;gap:5px;aspect-ratio:4/3;min-height:0;padding:8px;border-radius:var(--radius-sm);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.dz-bt-miss.dark{background:var(--ink);box-shadow:none}
.dz-bt-miss b{font-size:11.5px;font-weight:500;line-height:1.3;color:var(--ink)}
.dz-bt-miss small{font-size:10.5px;line-height:1.35;color:var(--muted)}
.dz-bt-miss.dark b{color:#fff}
.dz-bt-miss.dark small{color:rgba(255,255,255,.7)}
.dz-bt-miss .dz-btn2{background:#fff;height:28px;padding:0 9px;font-size:11.5px}
.dz-bt-logos>.dz-bt-miss:only-child{grid-column:1/-1;aspect-ratio:auto;padding:16px}
.dz-bt-make{margin:0 0 10px;padding:12px;border-radius:var(--radius);background:var(--tint)}
.dz-bt-make .dz-h{margin:0 0 8px}
.dz-bt-make .dz-hint{margin:0 0 8px}
.dz-bt-opts{display:grid;gap:8px;margin:0 0 6px}
.dz-bt-opt{display:grid;gap:3px;padding:8px;border-radius:var(--radius-sm);background:#fff}
.dz-bt-opt-sw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0 0 3px}
.dz-bt-opt-sw span{display:grid;place-items:center;aspect-ratio:4/3;padding:6px;border-radius:var(--radius)}
.dz-bt-opt-sw .lt{background:#F3F4F5;box-shadow:inset 0 0 0 1px var(--line)}
.dz-bt-opt-sw .dk{background:var(--ink)}
.dz-bt-opt-sw img{max-width:100%;max-height:100%;object-fit:contain;-webkit-touch-callout:none}
.dz-bt-opt b{font-size:12.5px;font-weight:500}
.dz-bt-opt small{font-size:11px;line-height:1.4;color:var(--muted)}
.dz-bt-opt .dz-btn2{justify-self:start;margin-top:4px}
/* the logo in its spot (js/designs/x-mylogo.js): the card at the top of the logo's inspector */
.dzx-p-card{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:10px;margin:0 0 14px;padding:14px;border-radius:var(--radius);background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-dk)}
.dzx-p-h{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center}
.dzx-p-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius);background:#fff;color:var(--primary);box-shadow:var(--card-sh,0 1px 3px rgba(25,32,38,.12))}
.dzx-p-h b{display:block;font-size:13.5px;font-weight:500;color:var(--ink)}
.dzx-p-h small{display:block;font-size:11.5px;line-height:1.4;color:var(--muted)}
.dzx-p-vers,.dzx-p-set-v{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dzx-p-ver{display:grid;gap:4px;min-width:0;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-align:center;cursor:pointer}
.dzx-p-ver>span{display:grid;place-items:center;aspect-ratio:4/3;padding:8px;border-radius:var(--radius-sm);background:#fff;transition:box-shadow .15s}
.dzx-p-ver.dk>span{background:var(--ink)}
.dzx-p-ver img{max-width:100%;max-height:100%;object-fit:contain;-webkit-touch-callout:none}
.dzx-p-ver small{font-size:10.5px;line-height:1.3;color:var(--muted)}
.dzx-p-ver:hover>span{box-shadow:0 0 0 2px var(--tint-dk)}
.dzx-p-ver[aria-pressed="true"]>span{box-shadow:0 0 0 2px var(--primary)}
.dzx-p-ver[aria-pressed="true"] small{color:var(--primary);font-weight:500}
.dzx-p-ver:focus-visible{outline:0}
.dzx-p-ver:focus-visible>span{box-shadow:var(--ring)}
.dzx-p-ver.none{cursor:default}
.dzx-p-ver.none>span{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--tint-dk)}
.dzx-p-ver.none.dk>span{background:rgba(31,42,54,.5)}
.dzx-p-ver.none i{font-style:normal;font-size:11px;color:var(--muted)}
.dzx-p-ver.none.dk i{color:#fff}
.dz-swrow.dzx-p-auto{min-height:44px;padding:4px 10px;border-radius:var(--radius-sm);background:#fff}
.dzx-p-auto span{display:grid;gap:1px}
.dzx-p-auto small{font-size:11px;font-weight:400;line-height:1.35;color:var(--muted)}
.dzx-p-tip{margin:0;font-size:11.5px;line-height:1.45;color:var(--muted)}
.dzx-p-swapbtn{height:36px;background:#fff}
.dzx-p-swapbtn[aria-expanded="true"]{box-shadow:0 0 0 1px var(--tint-dk)}
.dzx-p-swap{display:grid;gap:12px}
.dzx-p-swap[hidden]{display:none}
.dzx-p-set{display:grid;gap:6px}
.dzx-p-set-k{font-size:12px;font-weight:500;color:var(--ink)}
.dzx-p-set-k small{display:inline;margin-left:6px;font-size:11px;font-weight:400;color:var(--muted)}
.dzx-p-more{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.dzx-p-more .dz-btn2{background:#fff;height:36px;padding:0 8px;font-size:12px}
/* x-plugins P end */

/* ---- x-ncrink.js: Printed Ink on NCR pads (23 Oct 2026). Three tiles, the cheapest first; the note under them carries the price
   difference from the engine. ---- */
.dzx-ink{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0 0}
.dzx-ink button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px 8px;border:0;border-radius:var(--radius);background:var(--card,#fff);box-shadow:0 0 0 1px var(--line,#E3E7EB);cursor:pointer;font:inherit;color:var(--ink,var(--ink));text-align:center}
.dzx-ink button[aria-checked="true"]{box-shadow:var(--ring,0 0 0 2px var(--primary));background:var(--page-bg,#F5F7F8)}
.dzx-ink i{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.dzx-ink-black i{background:#1A1A1A}
.dzx-ink-grey i{background:linear-gradient(135deg,#1A1A1A 0 33%,#7A7A7A 33% 66%,#D4D4D4 66%)}
.dzx-ink-colour i{background:conic-gradient(#D2463C,#E8A317,#3E9A5B,#2F6FB0,#8A4FB0,#D2463C)}
.dzx-ink b{font-size:12px;font-weight:500;line-height:1.2}
.dzx-ink small{font-size:10.5px;line-height:1.3;color:var(--muted,#6B7785)}
.dzx-ink-note{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--muted,#6B7785)}
.dzx-ink-start{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--radius);background:var(--card,#fff);box-shadow:var(--card-sh,0 1px 3px rgba(0,0,0,.08))}
.dzx-ink-start b{font-size:14px;font-weight:500}
.dzx-ink-start span{font-size:12.5px;line-height:1.45;color:var(--muted,#6B7785)}
.dzx-ink-fin{margin:10px 0 0;font-size:13px;line-height:1.5}


/* x-plugins Q start: spacing while dragging, drag and drop from the panel */
/* Spacing While Dragging (js/designs/x-spacing.js): gap lines one screen pixel thick in the smart guides' pink, small pill labels in mm;
   an equal gap is a pink band with a solid pill and an equals mark; Alt measures from the picked piece to the one under the pointer */
.dz-ov.dzx-q-gaps{pointer-events:none}
.dzx-q-gaps svg{position:absolute;left:0;top:0;overflow:visible;shape-rendering:crispEdges}
.dzx-q-lab{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 7px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:#fff;color:#B8285E;box-shadow:0 0 0 1px #E0457B,0 2px 6px rgba(25,32,38,.14);font:500 10.5px/1 Montserrat,system-ui,sans-serif;letter-spacing:.1px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dzx-q-lab.eq{background:#D23A70;color:#fff;box-shadow:0 2px 8px rgba(210,58,112,.32)}
.dzx-q-lab.eq i{display:block;width:7px;height:3px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;box-sizing:content-box}
body.dzx-q-alt .dz-float{opacity:0;pointer-events:none}
/* Drag and Drop From the Panel (js/designs/x-dragdrop.js): a ghost of the tile under the pointer, the page ringed while it is over the
   stage (a frame shows x-frames' own highlight), the tile it came from faded; tiles never offer the browser's long-press menu */
.dzx-q-ghost{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;border-radius:var(--radius);background:#fff;overflow:hidden;opacity:.94;box-shadow:0 0 0 .5px rgba(25,32,38,.1),0 6px 16px rgba(25,32,38,.14),0 18px 40px rgba(25,32,38,.18);will-change:transform}
.dzx-q-ghost.over{opacity:.86;box-shadow:0 0 0 2px var(--primary),0 10px 28px rgba(25,32,38,.22)}
.dzx-q-ghost.onframe{opacity:.8;transform-origin:0 0}
.dzx-q-ghost.back{transition:transform .2s cubic-bezier(.32,.72,0,1),opacity .2s}
.dzx-q-ghost.drop{transition:opacity .14s;opacity:0}
.dzx-q-ghost-in{transform-origin:0 0}
.dzx-q-ghost-in>*{box-sizing:border-box}
.dz-ov.dzx-q-drop{pointer-events:none;opacity:0;transition:opacity .12s}
.dz-ov.dzx-q-drop.on{opacity:1}
.dzx-q-dropf{position:absolute;box-shadow:0 0 0 2px var(--primary),0 0 0 7px rgba(var(--prgb),.16);background:rgba(var(--prgb),.05)}
body.dzx-q-dragging,body.dzx-q-dragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
body.dzx-q-dragging .dz-canvaswrap canvas,body.dzx-q-dragging .dz-ovl,body.dzx-q-dragging .dz-ovl *{pointer-events:none!important}
.dzx-q-src{opacity:.45;transition:opacity .12s}
.dz-panel :is([data-addtext],[data-addstyle],[data-addcontact],[data-tc],[data-combo],[data-bfont],[data-shape],[data-icon],[data-art],[data-pic],[data-qadd],[data-stki],[data-bpic],[data-logo],[data-tpl],.dz-up,.dz-mylogo),.dz-panel :is([data-tc],[data-logo],[data-pic],[data-art],[data-stki],[data-bpic],[data-tpl],.dz-up,.dz-mylogo) img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media (prefers-reduced-motion:reduce){.dzx-q-ghost.back,.dzx-q-ghost.drop,.dz-ov.dzx-q-drop,.dzx-q-src{transition:none}}
/* x-plugins Q end */

/* opening a design (23 Oct 2026): the page stays hidden until it sits at its size on the screen, then fades in; a soft line says why */
.dz-stage .canvas-container{transition:opacity .18s ease}
.dz-stage.dz-settling .canvas-container,.dz-stage.dz-settling .dz-pages,.dz-stage.dz-settling .dz-ov{opacity:0}
.dz-stage.dz-settling::after{content:"Setting up your page";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:13px;color:var(--muted);letter-spacing:.2px;pointer-events:none}
/* Trace to vector (group N): js/designs/x-trace.js, Turn Into a Vector */
/* the inspector: Vector after Background on a picture, at the top of a vector piece */
.dzx-tv-sec .dz-btn2.wide{height:38px}
.dzx-tv-sec .dz-btn2 svg{flex:none;color:var(--icon,var(--ink))}
.dzx-tv-sec .dz-hint{margin:2px 0 0;font-weight:400}
.dzx-tv-use{display:flex}
.dzx-tv-use>button{flex:1}
.dzx-tv-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--tint);color:var(--primary);font-size:10.5px;font-weight:500}
.dzx-tv-acts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:2px}
.dzx-tv-acts:empty{display:none}
.dzx-tv-link{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:500;color:var(--primary);cursor:pointer;white-space:nowrap}
.dzx-tv-link:hover{text-decoration:underline;text-underline-offset:3px}
.dzx-tv-link:focus-visible{outline:0;box-shadow:var(--ring);border-radius:var(--radius-sm)}
/* Uploads: the pen on each picture, the Vector mark */
.dz-up-im{position:relative}
.dzx-tv-up{position:absolute;right:38px;top:6px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--icon,var(--ink));display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(25,32,38,.16),0 0 0 .5px rgba(25,32,38,.08);transition:background .15s,color .15s}
.dzx-tv-up:hover{background:#fff;color:var(--primary)}
.dzx-tv-up:focus-visible{outline:0;box-shadow:var(--ring)}
.dz-up-im:not(:has(.dzx-c-upcut)) .dzx-tv-up{right:6px}
.dzx-tv-chip{position:absolute;left:6px;bottom:6px;display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:#fff;color:var(--primary);font-size:10px;font-weight:500;letter-spacing:.2px;box-shadow:0 1px 3px rgba(25,32,38,.14);pointer-events:none}
/* cards under the logo drop zone and in My Brand */
.dzx-tv-card{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:start;margin:0 0 10px;padding:12px;border-radius:var(--radius);background:var(--tint)}
.dzx-tv-card b{display:block;font-size:12.5px;font-weight:500;color:var(--ink)}
.dzx-tv-card div>span{display:block;font-size:11.5px;line-height:1.45;color:var(--ink);opacity:.82;margin-top:2px}
.dzx-tv-cic{width:34px;height:34px;flex:none;border-radius:var(--radius);background:#fff;color:var(--primary);display:grid;place-items:center}
.dzx-tv-cbtns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:9px}
.dzx-tv-cbtns .dz-btn2{background:#fff}
.dzx-tv-cbtns .dz-btn2:hover{background:var(--panel)}
.dz-bt-logos+.dzx-tv-brand,.dzx-c-brand+.dzx-tv-brand{margin-top:10px}
/* a logo that is a vector already has its background left out: the white box note steps aside */
#dzxCutLogo[hidden],.dz-pane:has(#dzxTvLogo[data-mode="done"]) #dzxCutLogo{display:none}
/* the window: Before and After on the left, the settings on the right */
.dz-xmodal.dzx-tv-m .dz-modal-box{width:min(920px,100%);padding:26px 26px 22px}
.dzx-tv-head{display:flex;gap:14px;align-items:flex-start;margin:0 36px 18px 0}
.dzx-tv-ic{width:44px;height:44px;flex:none;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center}
.dzx-tv-head h2{font-size:18px;font-weight:500;margin:1px 0 4px;color:var(--ink)}
.dzx-tv-head p{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0;max-width:62ch}
.dzx-tv-head p.dzx-tv-honest{margin-top:2px;font-size:12px}
.dzx-tv-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}
.dzx-tv-left{min-width:0}
.dzx-tv-pv{display:grid;grid-template-columns:1fr 1fr;gap:10px;--dzx-tv-page:#F4F1EA}
.dzx-tv-pv figure{margin:0;display:grid;gap:6px;min-width:0}
.dzx-tv-pv figcaption{font-size:11.5px;font-weight:500;color:var(--muted);text-align:center}
.dzx-tv-box{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(25,32,38,.07);cursor:zoom-in;-webkit-touch-callout:none;user-select:none}
.dzx-tv-pv.zoom .dzx-tv-box{cursor:zoom-out}
.dzx-tv-pv[data-bg="checks"] .dzx-tv-box{background-color:#fff;background-image:conic-gradient(#E7EAED 25%,#fff 0 50%,#E7EAED 0 75%,#fff 0);background-size:14px 14px}
.dzx-tv-pv[data-bg="white"] .dzx-tv-box{background:#fff}
.dzx-tv-pv[data-bg="dark"] .dzx-tv-box{background:var(--ink)}
.dzx-tv-pv[data-bg="page"] .dzx-tv-box{background:var(--dzx-tv-page)}
.dzx-tv-zin{position:absolute;inset:12px;transform-origin:var(--zx,50%) var(--zy,50%);transition:transform .28s cubic-bezier(.3,.7,.4,1)}
.dzx-tv-pv.zoom .dzx-tv-zin{transform:scale(3.5)}
.dzx-tv-zin img,.dzx-tv-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.dzx-tv-zin img{object-fit:contain;-webkit-user-drag:none}
.dzx-tv-svg svg{display:block;width:100%;height:100%}
.dzx-tv-pv.outline .dzx-tv-svg path{fill:none!important;stroke:#E0457B;stroke-width:1px;vector-effect:non-scaling-stroke}
.dzx-tv-pv[data-bg="dark"].outline .dzx-tv-svg path{stroke:#FF8DB4}
.dzx-tv-wait{position:absolute;inset:0;display:none;place-items:center;background:rgba(255,255,255,.55)}
.dzx-tv-after.busy .dzx-tv-wait{display:grid}
.dzx-tv-spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--tint-dk,#D5DEE3);border-top-color:var(--primary);animation:dzxTvSpin .8s linear infinite}
@keyframes dzxTvSpin{to{transform:rotate(360deg)}}
.dzx-tv-zoomhint{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 0;font-size:11.5px;color:var(--muted)}
.dzx-tv-zoomhint svg{flex:none;opacity:.8}
.dzx-tv-stat{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:12px 0 0;padding:9px 12px;border-radius:var(--radius);background:var(--panel);font-size:12px;font-weight:500;color:var(--ink);min-height:38px}
.dzx-tv-chips{display:flex;flex-wrap:wrap;gap:4px}
.dzx-tv-chips i,.dzx-tv-dots i{display:block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(25,32,38,.16)}
.dzx-tv-notes:empty{display:none}
.dzx-tv-notes{display:grid;gap:6px;margin-top:8px}
.dzx-tv-note{margin:0;padding:8px 10px;border-radius:var(--radius);background:var(--attn-tint);box-shadow:inset 0 0 0 1px var(--attn-line);font-size:12px;line-height:1.45;color:var(--ink)}
.dzx-tv-ctl{display:grid;min-width:0}
.dzx-tv-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dzx-tv-cols button{display:grid;justify-items:start;gap:6px;min-width:0;padding:9px 10px 8px;border:0;border-radius:var(--radius);background:var(--panel);font:inherit;font-size:12px;color:var(--ink);text-align:left;cursor:pointer;transition:background .15s}
.dzx-tv-cols button b{font-weight:500}
.dzx-tv-cols button:hover{background:var(--tint)}
.dzx-tv-cols button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);color:var(--primary)}
.dzx-tv-cols button:focus-visible{outline:0;box-shadow:var(--ring)}
.dzx-tv-dots{display:flex;gap:3px;min-height:14px;align-items:center}
.dzx-tv-dots em{font-style:normal;font-size:10.5px;font-weight:500;color:var(--muted)}
.dzx-tv-n{margin:12px 0 0}
.dzx-tv-n[hidden]{display:none}
.dzx-tv-line{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0 14px}
.dzx-tv-ctl .dzi-sl{margin-bottom:2px}
.dzx-tv-ends{display:flex;justify-content:space-between;font-size:10.5px;font-weight:500;color:var(--muted);margin:0 0 2px}
.dzx-tv-hint{font-size:11.5px;line-height:1.45;color:var(--muted);margin:2px 0 14px}
.dzx-tv-sws{margin:0 0 14px}
.dzx-tv-sws .dz-swrow span{display:grid;gap:1px}
.dzx-tv-sws .dz-swrow small{font-size:11px;font-weight:400;color:var(--muted)}
.dzx-tv-sws .dz-swrow.off{cursor:default}
.dzx-tv-sws .dz-swrow.off .dz-switch{opacity:.45}
.dzx-tv-ctl>.dzi-l{margin-bottom:12px}
.dzx-tv-bgs{display:flex}
.dzx-tv-bgs>button{padding:0 6px;flex:1}
.dzx-tv-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dzx-tv-btns .btn{display:inline-flex;align-items:center;gap:7px}
.dzx-tv-btns .btn[disabled]{opacity:.55;cursor:progress}
.dzx-tv-btns .dz-btn2{height:auto;min-height:40px}
.dzx-tv-orig{justify-self:start;margin-top:12px}
@media (prefers-reduced-motion:reduce){.dzx-tv-spin{animation:none}.dzx-tv-zin{transition:none}}
@media (max-width:760px){.dz-xmodal.dzx-tv-m .dz-modal-box{padding:20px 16px 18px}.dzx-tv-grid{grid-template-columns:1fr;gap:14px}.dzx-tv-head{margin:0 34px 14px 0;gap:12px}.dzx-tv-head .dzx-tv-ic{width:38px;height:38px;border-radius:var(--radius)}.dzx-tv-head h2{font-size:16.5px}.dzx-tv-btns .btn{flex:1;justify-content:center}.dzx-tv-zin{inset:8px}}
/* Trace to vector (group N) end */
/* ---- x-garment.js: clothing and caps (23 Oct 2026). Garment colour swatches in the page pane, the shirt and cap drawings in Preview,
   the garment line in Check and Finish. ---- */
.dzx-gar-sw{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0 0}
.dzx-gar-sw button{aspect-ratio:1;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center}
.dzx-gar-sw i{width:100%;height:100%;border-radius:50%;background:var(--g);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.dzx-gar-sw button[aria-checked="true"]{box-shadow:var(--ring,0 0 0 2px var(--primary))}
.dzx-gar-sw button[aria-checked="true"] i{transform:scale(.8)}
.dzx-gar-sw button:focus-visible{outline:2px solid var(--primary,var(--primary));outline-offset:2px}
.dzx-gar-now{margin:8px 0 0;font-size:12.5px;font-weight:500}
.dzx-gar-pv{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end;max-width:760px;margin:0 auto}
.dzx-gar-pv.one{grid-template-columns:1fr;max-width:460px}
.dzx-gar-pv figure{margin:0;text-align:center}
.dzx-gar-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.12))}
.dzx-gar-pv figcaption{margin-top:6px;font-size:12px;color:var(--muted,#6B7785)}
.dzx-gar-pvnote{margin:12px auto 0;max-width:560px;text-align:center;font-size:12px;line-height:1.45;color:var(--muted,#6B7785)}
.dzx-gar-fin{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:13px;line-height:1.5}
.dzx-gar-dot{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--g);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.dzx-gar-pv.long{max-width:820px}
/* merchandise on the product (24 Oct 2026, x-garment.js + merch-scenes.js): the shirt, cap, mug... drawn behind the page; the page
   is the print area, so it loses its paper shadow */
.dz-onprod .dz-canvasbox{position:relative;isolation:isolate;box-shadow:none;background:transparent}
.dzx-scene{position:absolute;z-index:-1;pointer-events:none;overflow:hidden;filter:drop-shadow(0 10px 26px rgba(25,32,38,.16))}
@media (max-width:760px){.dzx-gar-pv{gap:10px}}

/* x-plugins T start: copy, cut and paste (x-clipboard.js) */
/* the menu from the floating bar's clipboard button and from a right-click on the page: icons in the icon colour, shortcuts on the right */
.dz-menu.dzx-t-menu{min-width:236px}
.dz-menu.dzx-t-menu>button svg{visibility:visible;color:var(--icon,var(--ink))}
.dz-menu.dzx-t-menu>button[aria-disabled="true"]{opacity:.42;cursor:default}
.dz-menu.dzx-t-menu>button[aria-disabled="true"]:hover{background:transparent}
.dz-menu.dzx-t-menu kbd{white-space:nowrap}
.dzx-t-sep{display:block;height:1px;background:var(--line);margin:5px 8px}
.dzx-t-anchor{position:fixed;width:1px;height:1px;pointer-events:none;opacity:0}
/* Arrange: Copy and Paste (Copy, Cut, Paste in a row; Copy to the Other Side, or Copy to Every Side and a chip per side) */
.dzx-t-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dzx-t-row3>.dz-btn2{padding:0 8px;min-width:0}
.dzx-t-chips{display:flex;flex-wrap:wrap;gap:6px}
.dz-hint.dzx-t-hint{margin:0;font-weight:400}
/* THE ONE MENU (28 Oct 2026): right-click, long press and the floating bar's More open it. A row of five tiles (icon over a short
   label) for the actions used most, then short groups under small headings; a pressed plug-in row (Move Picture on) reads in primary */
.dzx-t-quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0 0 2px}
.dzx-t-quick>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:54px;padding:6px 2px;border:0;border-radius:var(--radius-sm);background:transparent;font:inherit;font-size:11.5px;line-height:1.15;color:var(--ink);cursor:pointer;text-align:center}
.dzx-t-quick>button:hover{background:var(--panel)}
.dzx-t-quick>button svg{color:var(--icon,var(--ink))}
.dzx-t-quick>button[aria-disabled="true"]{opacity:.42;cursor:default}
.dzx-t-quick>button[aria-disabled="true"]:hover{background:transparent}
.dzx-t-quick>button span{overflow-wrap:anywhere}
.dzx-t-gh{font-size:11px;font-weight:500;color:var(--muted);margin:6px 10px 2px}
.dz-menu.dzx-t-menu>button[aria-pressed="true"],.dz-menu.dzx-t-menu>button[aria-pressed="true"] svg{color:var(--primary);font-weight:500}
.dz-menu.dzx-t-menu>button>span{flex:1;min-width:0}
/* phones and touch screens have no keys to press; the tiles are a little taller to tap */
@media (hover:none),(max-width:860px){.dz-menu.dzx-t-menu kbd{display:none}.dzx-t-quick>button{min-height:60px}}
/* x-plugins T end */

/* x-plugins V start: Even Out the Space (js/designs/x-trim.js), Replace It or Add This Too (js/designs/x-replace.js) (23 Oct 2026) */
/* Space Around It in the picture inspector: a small before-and-after drawing, one line, the button; once even, the slider with its
   three named stops under the track and Put Back the Original */
.dzx-v-sec{display:grid;gap:8px;min-width:0}
.dzx-v-sec[hidden]{display:none}
.dzx-v-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--tint);color:var(--primary);font-size:10.5px;font-weight:500}
.dzx-v-dia{display:block;width:100%;height:auto;max-height:64px;padding:6px 8px;border-radius:var(--radius-sm);background:var(--panel)}
.dzx-v-dia .pg{fill:#fff;stroke:rgba(42,42,51,.22);stroke-width:1;stroke-dasharray:3 2}
.dzx-v-dia .ink{fill:rgba(var(--prgb),.22);stroke:var(--primary);stroke-width:1}
.dzx-v-dia .ar{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dzx-v-note{margin:0;font-size:12px;line-height:1.45;color:var(--muted)}
.dzx-v-sec .dz-btn2.wide{height:38px}
.dzx-v-sec .dz-btn2 svg{flex:none;color:var(--icon,var(--ink))}
.dzi-sl.dzx-v-sl{margin:2px 0 0}
.dzx-v-stops{position:relative;height:24px;margin:-2px 0 0}
.dzx-v-stops button{position:absolute;top:0;left:calc(8px + (100% - 16px) * var(--f));transform:translateX(-50%);height:22px;padding:0 7px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:none;color:var(--muted);font:inherit;font-size:11px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.dzx-v-stops button:first-child{left:0;transform:none}
.dzx-v-stops button:hover{color:var(--ink);background:var(--panel)}
.dzx-v-stops button[aria-pressed="true"]{color:var(--primary);font-weight:500;background:var(--tint)}
.dzx-v-stops button:focus-visible{outline:0;box-shadow:var(--ring)}
.dzx-v-hint{margin:0}
.dzx-v-link{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:500;color:var(--primary);cursor:pointer;white-space:nowrap}
.dzx-v-link:hover{text-decoration:underline;text-underline-offset:3px}
.dzx-v-link:focus-visible{outline:0;box-shadow:var(--ring);border-radius:var(--radius-sm)}
/* the offer under the logo drop zone when a logo arrives with uneven space */
.dzx-v-card{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:start;margin:0 0 10px;padding:12px;border-radius:var(--radius);background:var(--tint)}
.dzx-v-card b{display:block;font-size:12.5px;font-weight:500;color:var(--ink)}
.dzx-v-card div>span{display:block;margin-top:2px;font-size:11.5px;line-height:1.45;color:var(--ink);opacity:.82}
.dzx-v-cic{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius);background:#fff;color:var(--primary)}
.dzx-v-cbtns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:9px}
.dzx-v-cbtns .dz-btn2{background:#fff}
.dzx-v-cbtns .dz-btn2:hover{background:var(--panel)}
/* Replace It or Add This Too: a small white card beside the tile or the drop point */
.dzx-v-pop{position:fixed;left:0;top:0;z-index:165;display:grid;gap:12px;width:296px;max-width:calc(100vw - 24px);padding:15px 15px 13px;border-radius:var(--radius);background:#fff;box-shadow:0 14px 38px rgba(16,24,32,.2),0 0 0 .5px rgba(16,24,32,.1);opacity:0;transform:translateY(4px) scale(.98);transition:opacity .14s,transform .14s}
.dzx-v-pop.show{opacity:1;transform:none}
.dzx-v-pop-h{display:grid;gap:3px;margin:0}
.dzx-v-pop-h b{font-size:13.5px;font-weight:500;line-height:1.3;color:var(--ink)}
.dzx-v-pop-h span{font-size:12px;line-height:1.45;color:var(--muted)}
.dzx-v-pop-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dzx-v-pop-btns .btn,.dzx-v-pop-btns .dz-btn2{height:38px;padding:0 10px;gap:6px;font-size:12.5px;font-weight:500}
.dzx-v-pop-btns svg{flex:none}
.dzx-v-rem{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);cursor:pointer;user-select:none}
.dzx-v-rem input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--primary)}
/* the old piece ringed on the page while the card is open */
.dz-ov.dzx-v-rings{pointer-events:none;opacity:0;transition:opacity .12s}
.dz-ov.dzx-v-rings.on{opacity:1}
.dzx-v-ring{position:absolute;left:0;top:0;transform-origin:0 0;border-radius:var(--radius-sm);box-shadow:0 0 0 2px var(--primary),0 0 0 6px rgba(var(--prgb),.16);background:rgba(var(--prgb),.06);animation:dzxVRing 1.6s ease-in-out infinite}
@keyframes dzxVRing{50%{box-shadow:0 0 0 2px var(--primary),0 0 0 9px rgba(var(--prgb),.08)}}
/* the toast with a button (Undo, Add Another Instead, Even It Out, Ask Me Each Time) */
.dzx-v-toast{position:fixed;left:50%;bottom:28px;z-index:150;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(580px,calc(100vw - 32px));padding:8px 8px 8px 18px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-size:13px;font-weight:500;line-height:1.4;box-shadow:0 12px 32px rgba(0,0,0,.25);opacity:0;transform:translate(-50%,12px);transition:opacity .2s,transform .2s;pointer-events:none}
.dzx-v-toast:not(:has(button)){padding-right:18px}
.dzx-v-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dzx-v-toast span{min-width:0}
.dzx-v-toast button{flex:none;height:32px;padding:0 14px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:rgba(255,255,255,.15);color:#fff;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.dzx-v-toast button:hover{background:rgba(255,255,255,.25)}
.dzx-v-toast button:focus-visible{outline:2px solid #fff;outline-offset:1px}
@media (max-width:860px){.dzx-v-toast{bottom:calc(78px + env(safe-area-inset-bottom));border-radius:var(--radius);corner-shape:round;padding-left:14px;flex-wrap:wrap}.dzx-v-pop{width:min(320px,calc(100vw - 24px))}}
@media (prefers-reduced-motion:reduce){.dzx-v-pop,.dzx-v-toast,.dz-ov.dzx-v-rings{transition:none}.dzx-v-ring{animation:none}}
/* x-plugins V end */
/* x-spot: Print Inks for spot-colour merchandise (js/designs/x-spot.js) */
.dzx-spot-k{margin:8px 0 0;font-size:12.5px}
.dzx-spot-sw{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:6px 0 8px}
.dzx-spot-sw button{aspect-ratio:1;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center}
.dzx-spot-sw i{width:100%;height:100%;border-radius:50%;background:var(--g);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.dzx-spot-sw button[aria-checked="true"]{box-shadow:var(--ring,0 0 0 2px var(--primary))}
.dzx-spot-sw button[aria-checked="true"] i{transform:scale(.8)}
.dzx-spot-sw button:focus-visible{outline:2px solid var(--primary,var(--primary));outline-offset:2px}
.dzx-spot-pv{display:grid;gap:14px;max-width:760px;margin:0 auto}
.dzx-spot-pv figure{margin:0;text-align:center}
.dzx-spot-pv img{max-width:100%;height:auto;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.dzx-spot-pvnote{margin:12px auto 0;max-width:560px;text-align:center;font-size:12px;line-height:1.45;color:var(--muted,#6B7785)}
.dzx-spot-fin{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;margin:10px 0 0;font-size:13px;line-height:1.5}
.dzx-spot-dot{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--g);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}


/* Find It Fast, Even All Over and Drop Shadow (24 Oct 2026): the jump tiles at the top of Elements, the transparency tiles four
   across, the whole-piece slider with quick amounts, and the shadow looks drawn as a small card with its shadow */
.dz-elgo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 6px}
.dz-elgo button{display:grid;justify-items:center;gap:4px;min-height:58px;padding:9px 2px 7px;border:0;border-radius:var(--radius);background:var(--panel);cursor:pointer;color:var(--icon,var(--ink));font-size:11px;font-weight:500;line-height:1.15;text-align:center}
.dz-elgo button span{color:var(--ink)}
.dz-elgo button:hover{background:var(--tint)}
.dzi-fades{grid-template-columns:repeat(4,minmax(0,1fr))}
.dzi-even{margin:12px 0 4px}
.dzi-even .dzi-sl{margin-bottom:8px}
.dzi-evq{margin:0 0 6px}
.dzi-shadow{margin-top:4px}
.dzi-shs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0 14px}
.dzi-shs button{display:grid;justify-items:center;gap:6px;min-height:58px;padding:11px 2px 7px;border:0;border-radius:var(--radius);background:var(--panel);cursor:pointer;font-size:11px;font-weight:500;color:var(--ink)}
.dzi-shs button:hover{background:var(--tint)}
.dzi-shs button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring);color:var(--primary)}
.dzi-shpv{display:block;width:26px;height:18px;border-radius:var(--radius-sm);background:#fff}
/* Colour Shades of a background (24 Oct 2026): the picture itself in eight shades */
.dz-bghues{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin:0 0 10px}
.dz-bghues button{padding:0;border:0;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:1;background:var(--panel);cursor:pointer}
.dz-bghues button img{display:block;width:100%;height:100%;object-fit:cover}
.dz-bghues button[aria-pressed="true"]{box-shadow:var(--ring)}
/* Check and Finish: the print file page by page, finish pages solid ink on white (x-finishes.js, 24 Oct 2026) */
.dzx-f-file{margin:16px 0 0}
.dzx-f-pgs{list-style:none;margin:8px 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px 10px}
.dzx-f-pgs li{display:grid;gap:5px;align-content:start}
.dzx-f-pg{display:grid;place-items:center;width:100%;background:#fff;box-shadow:0 0 0 1px rgba(25,32,38,.12),0 1px 3px rgba(25,32,38,.1);overflow:hidden}
.dzx-f-pg img{width:100%;height:100%;object-fit:contain;display:block}
.dzx-f-pg i{display:block;width:100%;height:100%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.dzx-f-pgs small{font-size:11px;line-height:1.3;color:var(--muted)}
.dzx-f-pgs small b{font-weight:500;color:var(--ink);margin-right:2px}
/* Barcodes (js/designs/x-barcode.js): the box under QR Code in Elements, a note that turns honey when the number is wrong */
.dzx-bc{display:grid;grid-template-columns:minmax(88px,auto) minmax(0,1fr) auto;gap:6px;align-items:center}
.dzx-bc select,.dzx-bc input{height:36px;border:0;border-radius:var(--radius-sm);background:var(--panel);padding:0 10px;font:inherit;font-size:12.5px;color:var(--ink);min-width:0}
.dzx-bc select:focus,.dzx-bc input:focus{outline:0;background:#fff;box-shadow:var(--ring)}
.dzx-bc-note{margin:6px 0 14px;font-size:11.5px;line-height:1.45;color:var(--muted);min-height:16px}
.dzx-bc-note.warn{color:var(--attn)}
/* For This Product (js/designs/elements-kinds.js): ready-made pieces show a line icon in place of a thumbnail */
.dz-art.dz-piece .dz-piece-ic{display:grid;place-items:center;width:100%;aspect-ratio:4/3;border-radius:var(--radius-sm);background:var(--tint);color:var(--primary)}
.dz-art.dz-piece .dz-piece-ic svg{width:26px;height:26px}
/* Design in Three Steps: the note for products whose designs are still on their way (25 Oct 2026) */
.dzx-a-soon{margin:22px 0 4px;padding:16px 18px;border-radius:var(--radius);background:var(--panel)}
.dzx-a-soon b{display:block;font-size:14px;font-weight:500;margin:0 0 4px}
.dzx-a-soon p{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--muted)}
.dzx-a-soon-b{display:flex;gap:8px;flex-wrap:wrap}
.dzx-a-soon-b .dz-btn2{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--radius);background:#fff;color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;border:0;box-shadow:0 0 0 1px var(--line)}


/* Design Online for every product (25 Oct 2026) */
.dz-prod-soon{color:var(--muted);font-weight:400}
.dz-scr-pt .dz-soon{font-size:11px;color:var(--muted);opacity:.85}
.dz-soon-line{margin:2px 0 14px;padding:10px 14px;border-radius:var(--radius);background:var(--panel)}
.dzx-a-prod .dzx-a-soonline{font-size:11px;color:var(--muted);opacity:.85}

/* Beta badge (24 Oct 2026): beside the design name in the title bar; Settings > Design Services designBeta */
.dz-bar-l{position:relative}
.dz-beta{flex:none;font:500 10px/1 var(--font,Montserrat),sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--primary);background:var(--tint);border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:5px 8px;cursor:help}
.dz-beta:hover,.dz-beta:focus-visible{box-shadow:0 0 0 2px var(--ring)}
.dz-beta[hidden]{display:none}
.dz-beta-tip{position:absolute;top:calc(100% + 8px);left:0;z-index:60;max-width:300px;display:grid;gap:4px;background:var(--panel,#fff);box-shadow:var(--card-sh);border-radius:var(--radius);padding:12px 14px;font-size:12px;line-height:1.45;color:var(--ink)}
.dz-beta-tip b{font-weight:500;font-size:13px}
@media (max-width:600px){.dz-beta{padding:4px 6px;font-size:9px}}

/* NOTIFICATIONS (24 Oct 2026, js/notices.js): the bell in the title bar beside More Tools, with the same copper count; the panel itself is
   drawn by site.css. Share status chips on Your Designs cards: Approved by ... (green), Change Asked by ... (honey). */
.dz3 .dz-ib[data-notif]{position:relative}
.dz3 .dz-ib[data-notif][hidden]{display:none}
.dz3 .dz-ib[data-notif] .nf-badge{top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;font-size:10px;border-width:2px;border-color:var(--card,#fff)}
.dz-mine-chip{display:inline-flex;align-items:center;justify-self:start;max-width:100%;height:20px;margin-top:3px;padding:0 8px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--tint);color:var(--primary)}
.dz-mine-chip.ok{background:var(--success-tint);color:var(--ok,var(--success))}
.dz-mine-chip.chg,.dz-mine-chip.old{background:var(--attn-tint);color:var(--attn);box-shadow:inset 0 0 0 1px var(--attn-line)}

/* x-plugins M start: Match Colours (js/designs/x-matchcolour.js, 24 Oct 2026): Colours From Your Design, the page dropper, Match Text to This Picture, Copy Style */
.dzx-m{display:grid;gap:8px}
.dzx-m-grp{display:grid;gap:6px}
.dzx-m-sws{gap:7px}
.dzx-m-tight{margin:2px 0 0}
.dzx-m-load{margin:0;color:var(--muted)}
.dzx-m-sw{position:relative;width:28px;height:28px;flex:none;border:0;border-radius:50%;padding:0;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(25,32,38,.14);transition:transform .12s}
.dzx-m-sw:hover{transform:scale(1.1)}
.dzx-m-sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary)}
.dzx-m-sw.pale{box-shadow:inset 0 0 0 1px rgba(25,32,38,.14),0 0 0 2px #fff,0 0 0 3.5px var(--attn-line)}
.dzx-m-sw.pale.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary)}
.dzx-m-sw.pale i{position:absolute;right:-4px;bottom:-4px;width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1.5px #fff,inset 0 0 0 1px rgba(25,32,38,.2)}
.dzx-m-eye{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;margin-left:2px;border:0;border-radius:50%;background:var(--panel);color:var(--primary);cursor:pointer;transition:background .12s,box-shadow .12s}
.dzx-m-eye:hover{background:var(--tint)}
.dzx-m-eye.on{background:var(--tint);box-shadow:var(--ring)}
.dzx-m-card .dzx-m-go svg{color:var(--primary)}
.dzx-m-chips{display:flex;flex-wrap:wrap;gap:6px}
.dzx-m-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 6px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font-size:12px;font-weight:500;color:var(--ink)}
.dzx-m-chip i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(25,32,38,.16)}
.dzx-m-ths{display:flex;gap:6px;overflow-x:auto;padding:2px}
.dzx-m-th{flex:none;width:46px;height:46px;padding:4px;border:0;border-radius:var(--radius);background:var(--panel);cursor:pointer}
.dzx-m-th img{display:block;width:100%;height:100%;object-fit:contain}
.dzx-m-th[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring)}
.dzx-m-sty{display:grid;gap:8px}
.dzx-m-use{justify-self:start}
.dzx-m-use svg{color:var(--primary)}
.dzc-pop .dzx-m-pickhost{margin:2px 0 4px}
.dzc-pop .dzx-m-sw,.dzc-pop .dzx-m-eye{width:24px;height:24px}
.dzc-pop .dzx-m-sw.pale i{width:11px;height:11px}
/* the page dropper: a layer over the stage with its own cursor, a magnifier and Cancel */
.dzx-m-drop{position:absolute;inset:0;z-index:20;touch-action:none;pointer-events:auto;-webkit-user-select:none;user-select:none}
.dzx-m-hint{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:6px 6px 6px 14px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;box-shadow:var(--dz-float);font-size:12.5px;font-weight:500;color:var(--ink);cursor:default;white-space:nowrap}
.dzx-m-hint svg{flex:none;color:var(--primary)}
.dzx-m-hint span{overflow:hidden;text-overflow:ellipsis}
.dzx-m-hint button{flex:none;height:28px;padding:0 12px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font:inherit;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer}
.dzx-m-hint button:hover{background:var(--tint)}
.dzx-m-loupe{position:absolute;left:0;top:0;z-index:2;display:grid;justify-items:center;gap:6px;pointer-events:none}
.dzx-m-loupe[hidden]{display:none}
.dzx-m-loupe canvas{width:88px;height:88px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(25,32,38,.25),var(--dz-float);image-rendering:pixelated}
.dzx-m-loupe b{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 4px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;box-shadow:var(--dz-float);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.dzx-m-loupe b i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(25,32,38,.18)}
@media (max-width:860px){#dzStudio.dzx-m-picking #dzProps,#dzStudio.dzx-m-picking #dzPanel{visibility:hidden}}
/* x-plugins M end */

/* x-plugins N: x-cmyk.js (24 Oct 2026) Print Colour row in the colour picker, the Check and Finish line */
.dzc-cmyk{display:grid;gap:6px;min-width:0}
.dzc-cmyk-top{display:flex;align-items:center;gap:8px;min-height:18px}
.dzc-cmyk-t{font-size:11.5px;font-weight:500;color:var(--muted)}
.dzc-cmyk-cmp{display:inline-flex;width:44px;height:18px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(25,32,38,.14)}
.dzc-cmyk-cmp[hidden],.dzc-cmyk-est[hidden]{display:none}
.dzc-cmyk-cmp i{flex:1;display:block}
.dzc-cmyk-est{font-size:10.5px;font-weight:500;color:var(--muted)}
.dzc-cmyk-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dzc-cmyk-in label{display:flex;align-items:center;gap:5px;height:34px;padding:0 3px 0 8px;border-radius:var(--radius-sm);background:var(--panel);min-width:0}
.dzc-cmyk-in label:focus-within{box-shadow:var(--ring);background:#fff}
.dzc-cmyk-in span{font-size:10.5px;font-weight:500;color:var(--muted)}
.dzc-cmyk-in input{flex:1;min-width:0;width:100%;border:0;background:transparent;font:inherit;font-size:13px;font-family:ui-monospace,Consolas,monospace;color:var(--ink);outline:0;padding:0;-moz-appearance:textfield}
.dzc-cmyk-in input::-webkit-outer-spin-button,.dzc-cmyk-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dzc-cmyk-note:empty{display:none}
.dzc-cmyk-note .dzc-note{margin:0}
.dzc-cmykmode .dzc-safe{display:none}
.dzx-cmyk-fin{margin:10px 0 0;font-size:13px;line-height:1.5}
/* x-plugins N end */

/* x-plugins MS: x-multiselect.js (24 Oct 2026) Select Multiple: the bar, the picks on the page, the Layers tick boxes */
.dzm-bar{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:13;display:flex;align-items:center;gap:2px;max-width:calc(100% - 24px);padding:4px;background:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);box-shadow:var(--dz-float);font-size:13px;color:var(--ink)}
.dzm-top{display:contents}
.dzm-n{order:1;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 6px;font-weight:500;white-space:nowrap}
.dzm-n i{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff}
.dzm-lnk{order:2;height:34px;padding:0 10px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:transparent;color:var(--primary);font:inherit;font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .12s}
.dzm-lnk:hover:not(:disabled){background:var(--tint)}
.dzm-lnk:disabled{opacity:.4;cursor:default}
.dzm-acts{order:4;display:flex;align-items:center;gap:1px;min-width:0;margin-left:4px;padding:0 2px 0 6px;border-left:1px solid var(--dz-hair);overflow-x:auto;scrollbar-width:none}
.dzm-acts::-webkit-scrollbar{display:none}
.dzm-acts button{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background .12s}
.dzm-acts button[hidden]{display:none}
.dzm-acts button span{display:none}
.dzm-acts button:hover:not(:disabled){background:var(--panel)}
.dzm-acts button:disabled{opacity:.35;cursor:default}
.dzm-acts button[data-m="del"]{color:var(--danger)}
.dzm-done{order:5;height:34px;margin-left:4px;padding:0 18px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.dzm-done:hover{filter:brightness(1.08)}
.dzm-bar button:focus-visible{outline:0;box-shadow:var(--ring)}
.dzm-pick{position:absolute;box-sizing:border-box;border:2px solid var(--primary);border-radius:var(--radius-sm);background:rgba(var(--prgb),.08);pointer-events:none}
.dzm-badge{position:absolute;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(25,32,38,.28);pointer-events:none}
.dzm-on #dzFloat,.dzm-on #dzHandles{display:none!important}
.dzm-on .upper-canvas{cursor:pointer!important}
.dz-canvaswrap{-webkit-touch-callout:none}
.dzm-on .dz-canvaswrap{-webkit-user-select:none;user-select:none}
/* Layers: the Select Multiple button and a tick box on each row while the mode is on */
.dzm-lay-btn{grid-column:1 / -1;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.dzm-lay-btn[aria-pressed="true"]{background:var(--tint);color:var(--primary)}
.dz-layer.dzm-row{grid-template-columns:26px 28px minmax(0,1fr) auto auto}
.dz-layer.dzm-row .dz-l-grip{display:none}
.dzm-tick{display:grid;place-items:center;width:22px;height:22px;margin-left:2px;border-radius:50%;background:#fff;color:transparent;box-shadow:inset 0 0 0 1.5px #A8B2BA;transition:background .12s,box-shadow .12s}
.dzm-tick.on{background:var(--primary);color:#fff;box-shadow:none}
/* the multi inspector */
.dzm-insp-p{margin:2px 0 8px;font-size:12px;font-weight:400;line-height:1.45;color:var(--muted)}
.dzm-insp .dz-btn2{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.dzm-insp-g{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.dzm-insp .dzm-red{color:var(--danger)}
.dz-menu [data-dzm-al][aria-disabled="true"],.dz-menu [data-dzm-st][aria-disabled="true"]{opacity:.4;cursor:default}
@media (max-width:860px){
  .dzm-bar{left:10px;right:10px;top:auto;bottom:12px;transform:none;max-width:none;flex-direction:column;align-items:stretch;gap:2px;padding:6px 6px 4px;border-radius:var(--radius);corner-shape:round}
  .dzm-top{display:flex;align-items:center;gap:2px}
  .dzm-n{flex:1;min-width:0;height:44px;padding:0 6px 0 6px;overflow:hidden;text-overflow:ellipsis}
  .dzm-lnk{height:44px;padding:0 12px;font-size:13px}
  .dzm-done{height:40px;padding:0 20px;font-size:13px}
  .dzm-acts{margin:0;padding:0;border-left:0;gap:0}
  .dzm-acts button{grid-template-rows:auto auto;align-content:center;gap:2px;flex:1 1 auto;width:auto;min-width:40px;padding:0 2px;height:56px;border-radius:var(--radius-sm)}
  .dzm-acts button span{display:block;font-size:10px;font-weight:500;line-height:1.1;letter-spacing:-.1px}
  .dzm-on .dz-pages,.dzm-on .dz-view{display:none}
  .dzm-body .toast,.dzm-body .dzx-b-toast,.dzm-body .dzx-h-toast{top:calc(112px + env(safe-area-inset-top,0px));bottom:auto}
}
/* x-plugins MS end */

/* x-plugins FS: x-fullscreen.js (24 Oct 2026) Full Screen and Focus Mode: the title bar button, nothing outside the designer while in focus, the Home Screen tip */
.dzx-fs-btn[aria-pressed="true"]{background:var(--tint);color:var(--primary)}
/* Focus Mode (iPhone, or anywhere the Fullscreen API refused): the site's chrome goes, the title bar tightens, the designer takes the full dynamic viewport inside the safe areas */
html.dzx-focus .nbar,html.dzx-focus .topbar,html.dzx-focus .site-head,html.dzx-focus .chrome-ph,html.dzx-focus .chatw,html.dzx-focus .ckb,html.dzx-focus .dz-beta,html.dzx-focus .dz-beta-tip{display:none!important}
html.dzx-focus body.dz-app main.dz{top:0;bottom:auto;height:100vh;height:100dvh;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
html.dzx-focus .dz3{--dz-bar:48px}
html.dzx-focus .dz-bar{padding-left:4px}
.dzx-fs-tip{position:fixed;left:50%;top:66px;transform:translateX(-50%);z-index:125;display:flex;align-items:center;gap:10px;width:min(440px,calc(100vw - 24px));padding:10px 6px 10px 14px;background:#fff;border-radius:var(--radius);box-shadow:var(--dz-float,0 12px 32px rgba(25,32,38,.14));font-size:12.5px;line-height:1.4;color:var(--ink)}
.dzx-fs-tip>svg{flex:none;color:var(--primary)}
.dzx-fs-tip span{flex:1;min-width:0}
.dzx-fs-tip b{font-weight:500}
.dzx-fs-tip .dz-ib{width:34px;height:34px;flex:none;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);display:inline-grid;place-items:center;cursor:pointer}
@media (max-width:860px){
  html.dzx-focus .dz3{--dz-bar:44px}
  html.dzx-focus .dz-doc-n{font-size:13.5px}
  html.dzx-focus .dz-doc-size{height:22px;font-size:11px}
  html.dzx-focus .dz-edge,html.dzx-focus .dz-drawbar{top:48px}
  .dz-bar-r .dzx-fs-btn{width:32px}
}
/* x-plugins FS end */

/* x-plugins H: x-handles.js (24 Oct 2026) the floating bar fits the screen (buttons that do not fit sit in More) and the edge notice has a sensible width */
.dz-float{width:max-content}
.dz-float .dzf-ovf{position:absolute!important;width:34px;height:34px;margin:0;opacity:0;pointer-events:none}
.dz-float .dzf-off{display:none!important}
.dz-menu.dzf-ovm{min-width:200px}
.dz-menu.dzf-ovm>button svg{visibility:visible;color:var(--ink)}
.dz-menu.dzf-ovm>button.on{font-weight:500;color:var(--primary)}
.dz-menu.dzf-ovm>button.on svg{color:var(--primary)}
@media (max-width:860px){
  .dz-float .dzf-ovf{width:38px;height:38px}
  .dz-edge{width:min(320px,calc(100vw - 32px));max-width:none;box-sizing:border-box}
}
/* x-plugins H end */

/* x-plugins PB: x-piecebar.js (24 Oct 2026) the piece bar on phones: the bottom bar swaps to the picked piece's options as tiles with a Done tick,
   each tile a short sheet holding only that control (the inspector, filtered), the float pill shrunk to Edit, Duplicate, Delete and More */
.dzp-bar{display:none}
.dzp-flipbox .dzp-flip{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dzp-flipbox .dz-btn2{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.dzp-flipbox .dz-btn2[aria-pressed="true"]{background:var(--tint);color:var(--primary)}
.dz-menu.dzp-ovm{min-width:210px}
.dz-menu.dzp-ovm>button svg{visibility:visible;color:var(--ink)}
.dz-menu.dzp-ovm>button.on,.dz-menu.dzp-ovm>button.on svg{color:var(--primary);font-weight:500}
.dz-menu.dzp-ovm>button[aria-disabled="true"]{opacity:.4;cursor:default}
@media (max-width:860px){
  /* the bar sits in the tool bar's grid cell and covers it while something is picked; Select Multiple's own bar and drawing take it away */
  .dz3.dz-has-sel>.dzp-bar{display:flex}
  .dz3.dzm-on>.dzp-bar,.dz3.dz-has-sel>.dzp-bar[hidden]{display:none}
  .dzp-bar{grid-row:3;grid-column:1;z-index:26;align-items:stretch;min-width:0;padding:0 0 env(safe-area-inset-bottom,0px);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--dz-hair);overflow:hidden}
  .dzp-tiles{flex:1;display:flex;align-items:stretch;min-width:0;padding:0 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
  .dzp-tiles::-webkit-scrollbar{display:none}
  .dzp-tiles button{flex:none;display:grid;justify-items:center;align-content:center;gap:3px;min-width:62px;padding:6px 7px 5px;border:0;border-radius:var(--radius);background:transparent;color:var(--muted);font:inherit;font-size:10px;font-weight:500;letter-spacing:-.1px;white-space:nowrap;cursor:pointer;scroll-snap-align:start;transition:color .15s}
  .dzp-tiles button svg{width:22px;height:22px;color:var(--icon,var(--ink));opacity:.8;transition:color .15s,opacity .15s}
  .dzp-tiles button:active{background:var(--panel)}
  .dzp-tiles button[aria-pressed="true"]{color:var(--ink);font-weight:500}
  .dzp-tiles button[aria-pressed="true"] svg{color:var(--primary);opacity:1}
  .dzp-done{flex:none;align-self:center;width:38px;height:38px;margin:0 10px 0 4px;border:0;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(25,32,38,.18)}
  .dzp-done:active{filter:brightness(1.08)}
  .dzp-bar button:focus-visible{outline:0;box-shadow:var(--ring)}
  /* the short sheet: the inspector at 40 vh with only the open tile's blocks; a grab line and the tile's name instead of the full header and tabs */
  .dz3.dzp-compact{--dz-sheet:40vh}
  .dz3.dzp-compact .dz-insp .dzi-h,.dz3.dzp-compact .dz-insp .dzi-tabs{display:none}
  .dzp-filter .dzi-b>.dzp-hide{display:none!important}
  .dzp-filter .dzi-b{padding:8px 16px 18px}
  .dzp-filter .dzi-b.dzp-empty{display:none}
  .dzp-head{position:sticky;top:0;z-index:2;background:#fff;padding:0 8px 0 16px}
  .dzp-grab{display:block;width:36px;height:5px;border-radius:var(--bar-r);background:#D3D9DE;margin:7px auto 0}
  .dzp-head-r{display:flex;align-items:center;gap:8px;min-height:40px}
  .dzp-head-r b{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dzp-head-r .dz-ib{width:34px;height:34px;color:var(--muted)}
  .dzp-filter .dzi-l{margin-bottom:12px}
  /* the float pill: only Edit, Duplicate, Delete and More show; the rest stay in the bar for More to click */
  .dz-float.dzp-trim .dzp-off,.dz-float.dzp-trim .dzf-sep,.dz-float.dzp-trim .dzf-lbl{display:none!important}
  .dz-float.dzp-trim [data-pmore]{width:38px;height:38px}
}
/* x-plugins PB end */

/* Add Your Details (24 Oct 2026): the brand's lines as chips with their thin icons, in the Brand tool */
#dzDetails button[data-addcontact]{display:inline-flex;align-items:center;gap:6px}
#dzDetails button[data-addcontact] svg{flex:none}

.dz-det-bar{display:flex;gap:8px;margin-top:10px;align-items:center}.dz-det-bar .btn{flex:1}
/* Design With AI: what to do (new or improve), and an error you cannot miss */
.dz-ai-mode{display:flex;width:100%;margin:2px 0 12px}
.dz-ai-mode>button{flex:1}
.dz-ai-mode>button:disabled{opacity:.45;cursor:not-allowed}
.dz-ai-ideas{margin:0 0 12px}
.dz-ai-msg.dz-ai-err{margin:0 0 12px;padding:10px 12px;border-radius:var(--radius);background:color-mix(in srgb,var(--attn,#B45309) 12%,#fff);color:var(--ink);font-size:13px;line-height:1.45;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--attn,#B45309) 45%,#fff)}

/* Pictures tool (26 Oct 2026, js/designs/x-studiopics.js): the studio's approved photos with search and kind chips */
.dzx-pics .dz-search{margin:0 0 10px}.dzx-pics .dzg-chips{margin:0 0 8px}.dzx-pics .dzg-count{margin:0 0 8px}
.dzx-pics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dzx-pics-grid .dzx-pic img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ======================================================================== KITTL LOOK (27 Oct 2026; Junaid: "there's an online UI kit for
   online designer, Kittl, I like that... apply that on the designer"). The shell takes the Kittl editor's language on our own tokens
   (Montserrat, --ink, --primary, --panel, --tint): a soft grey workspace that runs the full width, the tools rail docked on the left, the
   tool panel and the inspector as FLOATING cards over the workspace (rounded, a soft shadow, inset from the edges), the selection
   toolbar as one bar across the TOP of the workspace (never over the piece), the pages strip and the zoom capsule floating at the foot,
   pill buttons in the title bar. Corners: --dz-r for floating cards and --dz-rb for buttons, defined once here (the no-px-corners rule
   is kept by keeping them tokens). Phones keep the bottom tab bar and the sheets. docs/STYLE-GUIDE.md "Kittl look". */
.dz3{--dz-r:var(--radius);--dz-rb:var(--radius-sm);--dz-stage:#F1F2F4;--dz-card:0 0 0 .5px rgba(25,32,38,.07),0 2px 6px rgba(25,32,38,.05),0 16px 40px -12px rgba(25,32,38,.22)}
.dz-bar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--dz-hair);padding:0 14px 0 10px}
.dz-doc-n{font-size:15px;font-weight:500}
.dz-doc-size{border-radius:var(--dz-rb)}
.dz3 .dz-ib,.dz-menu .dz-ib,.dz-modal .dz-ib{border-radius:var(--dz-rb)}
.dz-btn2{border-radius:var(--dz-rb);height:36px;padding:0 14px}
.dz-btn2.sm{height:30px}
.dz-finish{height:38px;padding:0 18px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-weight:500}
.dz-finish:hover{background:var(--ink)}
.dz-finish svg{color:#fff}
.dz-savegrp .dz-savebtn{border-radius:var(--dz-rb) 0 0 var(--dz-rb)}
.dz-beta{border-radius:var(--tag-radius);corner-shape:var(--tag-shape)}
/* desktop (861 px and up): the rail docked, the panel and the inspector float over the workspace */
@media (min-width:861px){
  .dz-body{grid-template-columns:var(--dz-tabs) minmax(0,1fr);background:var(--dz-stage)}
  .dz3.dz-collapsed .dz-body{grid-template-columns:var(--dz-tabs) minmax(0,1fr)}
  .dz-tabs{padding:10px 8px;background:#fff;border-right:1px solid var(--dz-hair)}
  .dz-tabs button{padding:9px 2px 7px;border-radius:var(--dz-rb);font-size:10.5px}
  .dz-tabs button[aria-selected="true"]{background:var(--tint)}
  .dz-stage{grid-column:2;grid-row:1}
  .dz-panel{position:absolute;left:calc(var(--dz-tabs) + 12px);top:12px;bottom:12px;width:var(--dz-pw);z-index:14;border:0;border-radius:var(--dz-r);box-shadow:var(--dz-card);background:#fff}
  .dz3.dz-collapsed .dz-panel{visibility:hidden}
  .dz-panel-h{padding:16px 10px 8px 18px}
  .dz-panel-h h3{font-size:15px;font-weight:500}
  .dz-insp{position:absolute;right:12px;top:12px;bottom:12px;width:var(--dz-iw);z-index:14;border:0;border-radius:var(--dz-r);box-shadow:var(--dz-card);background:#fff;display:block}
  .dzi-h{border-radius:var(--dz-r) var(--dz-r) 0 0}
  /* the page keeps clear of the floating cards; fit() reads this padding */
  .dz-canvaswrap{padding:76px calc(var(--dz-iw) + 32px) 112px calc(var(--dz-pw) + 32px)}
  .dz3.dz-collapsed .dz-canvaswrap{padding-left:40px}
  .dz3.dz-1side .dz-canvaswrap{padding-bottom:90px}
  /* the selection toolbar: one bar across the top of the workspace, centred between the cards, never over the piece */
  .dz-float{left:50%!important;top:14px!important;transform:translateX(-50%);padding:5px;border-radius:var(--dz-r);box-shadow:var(--dz-card);max-width:calc(100% - var(--dz-pw) - var(--dz-iw) - 56px)}
  .dz3.dz-collapsed .dz-float{max-width:calc(100% - var(--dz-iw) - 72px)}
  .dz-float button{border-radius:var(--dz-rb)}
  .dz-float .dzf-fmt{border-radius:var(--dz-rb)}
  .dz-edge{top:66px}
  .dz-drawbar{top:66px}
  .dz-pages{bottom:18px;left:calc(var(--dz-pw) + 16px + (100% - var(--dz-pw) - var(--dz-iw) - 32px) / 2);transform:translateX(-50%);border-radius:var(--dz-r);box-shadow:var(--dz-card);background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .dz3.dz-collapsed .dz-pages{left:calc(12px + (100% - var(--dz-iw) - 24px) / 2)}
  .dz-view{right:calc(var(--dz-iw) + 28px);bottom:18px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--dz-card);border-radius:var(--tag-radius);corner-shape:var(--tag-shape)}
  .dz-canvasbox{box-shadow:0 1px 2px rgba(25,32,38,.08),0 24px 60px -18px rgba(25,32,38,.28)}
}
/* laptops (861 to 1199 px): the inspector floats only while something is picked, as before; the view capsule sits at the right edge */
@media (min-width:861px) and (max-width:1199px){
  .dz-insp{display:none}
  .dz3.dz-has-sel .dz-insp{display:block}
  .dz-canvaswrap{padding-right:40px}
  .dz3.dz-has-sel .dz-canvaswrap{padding-right:calc(var(--dz-iw) + 32px)}
  .dz-view{right:16px}
  .dz-pages{left:calc(var(--dz-pw) + 16px + (100% - var(--dz-pw) - 28px) / 2)}
  .dz3.dz-collapsed .dz-pages{left:50%}
  .dz-float{max-width:calc(100% - var(--dz-pw) - 56px)}
}
/* rounded parts inside the cards */
.dz-panel .dz-search input,.dz3 .dzg-tools .dzg-q,.dz3 input[type=text],.dz3 input[type=number],.dz3 textarea,.dz3 select:not(.raw){border-radius:var(--dz-rb)}
.dz-blank,.dz-addtext button,.dz-pair,.dz-combo,.dz-styles button,.dz-pal,.dz-well,.dz-tool,.dz-drop,.dz-up-im,.dz3 .dzg-t .dz-tplimg,.dz-art img,.dz-note,.dz-guests,.dz-layer,.dzi-note,.dz-edgefix,.dz-checks li{border-radius:var(--dz-rb)}
.dz-seg{border-radius:var(--dz-rb)}
.dz-seg>button{border-radius:var(--radius-sm)}
.dz-step,.dz-tog,.dzi-layers button,.dzi-crops button,.dz-menu,.dzf-pop,.dz-modal-box,.dz-pop{border-radius:var(--dz-r)}
.dz-menu>button{border-radius:var(--dz-rb)}
.dz-step,.dz-tog,.dzi-layers button,.dzi-crops button{border-radius:var(--dz-rb)}
/* a segmented control whose words do not fit on one line wraps instead of running out of its box (Name and Job Title on Details) */
.dz-panel .dz-seg:not(.ico)>button,.dz-insp .dz-seg:not(.ico)>button{white-space:normal;height:auto;min-height:30px;padding:4px 8px;line-height:1.2;font-size:11.5px;text-align:center}
/* phones: the sheets take the card corners at the top, the selection bar sits under the undo capsule */
@media (max-width:860px){
  .dz-panel,.dz-insp{border-radius:var(--dz-r) var(--dz-r) 0 0;box-shadow:0 -8px 30px rgba(25,32,38,.16)}
  .dz-float{border-radius:var(--dz-r)}
  .dz-float button{border-radius:var(--dz-rb)}
  .dz-finish{height:34px;padding:0 14px}
}

/* FILL IN MY DETAILS (27 Oct 2026, Junaid: "when you click on a template it auto fills in with your details... make that optional... they
   can first analyse the design"): a template opens with its example words; this white capsule over the page offers the fill. The fill
   itself is one undo step. Settings, Design Services, "Fill in my details automatically" brings the old behaviour back. */
.dz-edge.dz-fill{background:#fff;color:var(--ink);box-shadow:var(--dz-float),inset 0 0 0 1px rgba(0,0,0,.08);gap:8px}
.dz-edge.dz-fill svg{color:var(--primary)}
.dz-edge.dz-fill span{flex:1 1 auto;min-width:0}
.dz-edge.dz-fill #dzFillYes{background:var(--primary);color:#fff;box-shadow:none}
.dz-edge.dz-fill .dz-fill-no{background:transparent;box-shadow:none;font-weight:500;color:var(--ink-2,var(--ink))}
@media (max-width:860px){ .dz-edge.dz-fill{top:auto;bottom:92px;flex-wrap:wrap;justify-content:flex-end;padding:10px 12px;border-radius:var(--radius)} .dz-edge.dz-fill span{flex-basis:100%} }
/* Design Brain (x-brain.js). BUDDY AI PANEL (29 Oct 2026, Junaid: "the most useless panel ever"; docs/STYLE-GUIDE.md "Buddy AI panel"):
   Ask Buddy on a tinted card, the result card after every action, one-tap rows (icon tile, title, one-line promise), style chips, layout
   tiles with a drawing, and house disclosure rows with a chevron. One gap per stack: .dzb holds 20 px between sections, each section 10 px. */
.dzbrain{display:grid;gap:20px;min-width:0;padding-top:4px}
.dzbrain .dz-hint{margin:0;overflow-wrap:anywhere}
.dzb-k{display:block;flex:none;font-size:10.5px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--eyebrow-ink,var(--muted))}
.dzb-sec{display:grid;gap:10px;min-width:0}
.dzb-h{margin:0;font-size:12.5px;font-weight:500;color:var(--ink)}
.dzb-ask{display:grid;gap:10px;padding:14px;background:var(--tint);border-radius:var(--dz-r,var(--radius))}
.dzb-ask-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dzb-live{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dzb-live::before{content:"";width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--muted) 60%,#fff)}
.dzb-live.on::before{background:#2E8B57}
.dzb-ask-f{position:relative;display:block;margin:0}
.dzb-ask-f textarea{display:block;width:100%;min-height:64px;resize:vertical;padding:11px 48px 11px 12px;border:1px solid var(--field-line,var(--line));border-radius:var(--radius);background:#fff;color:var(--ink);font:inherit;font-size:13px;line-height:1.45}
.dzb-ask-f textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--field-ring,0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent))}
.dzb-go{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:var(--primary);color:#fff;cursor:pointer}
.dzb-go:disabled{opacity:.45;cursor:default}
.dzb-ideas{display:flex;flex-wrap:wrap;gap:6px}
.dzb-ideas button,.dzb-styles button{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;color:var(--ink);font:inherit;font-size:12px;font-weight:500;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.dzb-styles button{background:var(--panel);box-shadow:none}
.dzb-ideas button:hover,.dzb-styles button:hover{background:var(--tint)}
.dzb-styles{display:flex;flex-wrap:wrap;gap:6px}
.dzb-styles button[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring)}
.dzb-acts{display:grid;gap:6px}
.dzb-act{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:56px;padding:10px 12px;border:0;border-radius:var(--radius);background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.dzb-act:hover{background:var(--tint)}
.dzb-act-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--radius-sm,8px);background:#fff;color:var(--icon,var(--ink))}
.dzb-act-t{display:grid;gap:2px;min-width:0;flex:1 1 auto;padding-top:1px}
.dzb-act-t b,.dzb-lay b{font-size:13px;font-weight:500;line-height:1.3}
.dzb-act-t small,.dzb-lay small{font-size:11.5px;line-height:1.45;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dzb-layouts{display:grid;gap:6px}
.dzb-lay{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:64px;padding:10px 12px;border:0;border-radius:var(--radius);background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.dzb-lay:hover{background:var(--tint)}
.dzb-lay svg{flex:none;width:64px;height:46px}
.dzb-lay svg .pg{fill:#fff;stroke:var(--line);stroke-width:1.5}
.dzb-lay svg rect:not(.pg){fill:color-mix(in srgb,var(--muted) 45%,#fff)}
.dzb-lay svg rect.h{fill:var(--icon,var(--ink))}
.dzb-lay>span{display:grid;gap:2px;min-width:0;flex:1 1 auto}
.dzb-result{display:grid;gap:12px;padding:14px;border-radius:var(--dz-r,var(--radius));background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.dzb-result.busy{display:flex;align-items:center;gap:12px}
.dzb-result.busy>div{display:grid;gap:2px}
.dzb-result.busy b{font-size:13px;font-weight:500}
.dzb-result.busy small{font-size:11.5px;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dzb-result .dz-spin{flex:none;border-color:color-mix(in srgb,var(--primary) 25%,transparent);border-top-color:var(--primary)}
.dzb-result-h{display:flex;align-items:flex-start;gap:10px}
.dzb-result-h>svg{flex:none;margin-top:2px;color:#2E8B57}
.dzb-result.err .dzb-result-h>svg{color:var(--attn-ink,#8A5A00)}
.dzb-result-h>div{display:grid;gap:2px;min-width:0;flex:1 1 auto}
.dzb-x{flex:none;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--icon,var(--ink));cursor:pointer}
.dzb-x:hover{background:var(--panel)}
.dzb-result-h b{font-size:13px;font-weight:500;line-height:1.4}
.dzb-ba{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dzb-ba figure{margin:0;display:grid;gap:4px;min-width:0}
.dzb-ba img{width:100%;height:auto;aspect-ratio:auto;max-height:120px;object-fit:contain;background:var(--panel);border-radius:var(--radius-sm,8px)}
.dzb-ba figcaption{font-size:11px;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dzb-lines{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dzb-lines li{display:grid;gap:2px;padding-left:14px;position:relative}
.dzb-lines li::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--primary)}
.dzb-lines b{font-size:12px;font-weight:500;line-height:1.45}
.dzb-lines small{font-size:11.5px;line-height:1.45;color:color-mix(in srgb,var(--muted) 78%,var(--ink));overflow-wrap:anywhere}
.dzb-note{margin:0;font-size:12px;line-height:1.5;padding:9px 11px;background:var(--panel);border-radius:var(--radius-sm,8px)}
.dzb-result-a,.dzb-row{display:flex;flex-wrap:wrap;gap:6px}
.dzb-result-a .dz-btn2,.dzb-row .dz-btn2{height:auto;min-height:34px;flex:1 1 auto}
.dzb-folds{display:grid;border-top:1px solid var(--line)}
.dzb-fold{border-bottom:1px solid var(--line)}
.dzb-fold>summary{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 2px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;list-style:none}
.dzb-fold>summary::-webkit-details-marker{display:none}
.dzb-fold>summary::marker{content:""}
.dzb-fold>summary .dzb-ic{margin-left:auto;flex:none;color:var(--icon,var(--ink));transition:transform .18s}
.dzb-fold[open]>summary .dzb-ic{transform:rotate(90deg)}
.dzb-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--panel);font-size:11px;font-weight:500}
.dzb-fold-b{display:grid;gap:12px;padding:2px 0 16px}
.dzb-order{margin:0;padding-left:20px;display:grid;gap:6px;font-size:12px;line-height:1.5}
.dzb-order b{font-weight:500;margin-right:6px;text-transform:capitalize}
.dzb-foot{padding-bottom:4px}
.dzbrain-switch{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;font-weight:500;cursor:pointer}
.dzbrain-switch input{margin-top:3px;accent-color:var(--primary);flex:none}
.dzbrain-switch small{display:block;color:color-mix(in srgb,var(--muted) 78%,var(--ink));font-size:11.5px;font-weight:400;line-height:1.5;margin-top:4px}
.dzbrain-selected{padding:12px;background:var(--panel);border-radius:var(--radius);min-width:0;display:grid;gap:8px}
.dzbrain-selected>b{font-size:12.5px;font-weight:500;overflow-wrap:anywhere}
.dzbrain-field{display:grid;gap:6px;font-size:12px;color:var(--ink);margin:0}
.dzbrain-field select{width:100%;min-width:0;min-height:40px;padding:8px;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);background:#fff;font:inherit}
.dzbrain-finding{border-top:1px solid var(--line);padding-top:12px;min-width:0}
.dzbrain-finding:first-child{border-top:0;padding-top:0}
.dzbrain-finding>b{font-size:12.5px;font-weight:500;display:block;overflow-wrap:anywhere}
.dzbrain-finding p{color:color-mix(in srgb,var(--muted) 78%,var(--ink));font-size:11.5px;line-height:1.5;margin:6px 0 10px}
.dzbrain-finding>div{display:flex;gap:6px;flex-wrap:wrap}
.dzbrain-kind{display:block;text-transform:capitalize;color:color-mix(in srgb,var(--muted) 78%,var(--ink));font-size:10.5px;margin-bottom:5px}
.dzbrain-preview .dz-modal-box{max-width:1040px}
.dzbrain-pvhead h2{font-size:22px;font-weight:500;margin:8px 0}
.dzbrain-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0}
.dzbrain-compare figure{margin:0;min-width:0;display:grid;align-content:start;gap:12px}
.dzbrain-compare figcaption{font-size:12.5px;font-weight:500}
.dzbrain-compare img{width:100%;height:auto;max-height:420px;object-fit:contain;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.dzbrain-notice{font-size:12px;line-height:1.55;padding:10px;background:var(--panel);border-radius:var(--radius)}
@media(max-width:620px){.dzbrain-compare{grid-template-columns:1fr;gap:16px}.dzb-ask-f textarea,.dzbrain-field select{font-size:16px}.dzbrain-compare img{max-height:300px}.dzb-ideas button,.dzb-styles button{min-height:34px}}

/* DESIGNER POLISH (28 Oct 2026, Junaid's styling audit): phones keep every tool name whole in the bottom bar (it scrolls sideways with a
   soft fade, the open tool scrolled into view), the Beta badge leaves the crowded phone title alone, a close button over a picture sits
   on a white disc, segmented choices in the Details panel wrap instead of running out of the panel. */
.dz-modal-x{background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(20,24,28,.16);border-radius:50%}
.dz-addr-seg button{white-space:normal;line-height:1.25;min-height:36px}
@media (max-width:860px){
  .dz-tabs{overflow-x:auto!important;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
  .dz-tabs button{flex:1 0 auto!important;min-width:54px;padding:7px 6px 5px;scroll-snap-align:start}
  .dz-tabs button span{overflow:visible;text-overflow:clip;max-width:none}
}
@media (max-width:600px){.dz-bar .dz-beta,.dz-bar-l .dz-beta{display:none}}

/* ---- DESIGNER AUDIT (28 Oct 2026, tools/audit/designer-run.mjs): small grey words on the panels were 3.3 to 4.3 to 1; one deeper
   muted shade for hints, slider values and plain notes, the same mix the shop uses on tints ---- */
.dz-fhint,#dz output,#dz small:not([class]){color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
/* element tile names wrap to two lines, never "Facebook Circ..." (28 Oct 2026, the social media set) */
.dz-art span{white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-wrap:balance;text-align:center}

/* ---- YOUR RECENT AI DESIGNS (29 Oct 2026, js/designs/x-aikeep.js): every Design With AI draft kept; a row of pictures in the window,
   a card under Your Designs on the start page. Tiles in the panel language: --panel ground, the ring when hovered or focused, names
   wrap (never cut short), min-height not height. ---- */
.dzx-aik{display:grid;gap:10px;margin:18px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
.dzx-aik-h{display:grid;gap:2px}
.dzx-aik-h b{font-size:14px;font-weight:500;color:var(--ink)}
.dzx-aik-h span{font-size:12.5px;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dzx-aik-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.dzx-aik-c{position:relative;min-width:0}
.dzx-aik-open{display:grid;gap:6px;width:100%;min-height:100%;padding:8px;border:0;border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.dzx-aik-open:hover,.dzx-aik-open:focus-visible{box-shadow:0 0 0 2px var(--ring);outline:0}
.dzx-aik-open:disabled{opacity:.6;cursor:progress}
.dzx-aik-im{display:grid;place-items:center;min-height:74px;border-radius:var(--radius-sm);overflow:hidden;background:color-mix(in srgb,var(--panel) 60%,#FFFFFF)}
.dzx-aik-im img{max-width:100%;max-height:96px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(25,32,38,.18))}
.dzx-aik-none{font-size:12px;color:var(--muted);padding:8px;text-align:center}
.dzx-aik-t{display:grid;gap:1px;min-width:0}
.dzx-aik-t b{font-size:12.5px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.dzx-aik-t small{font-size:11.5px;line-height:1.3;color:color-mix(in srgb,var(--muted) 78%,var(--ink));overflow-wrap:anywhere}
.dzx-aik-x{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(20,24,28,.16);color:var(--ink);cursor:pointer}
.dzx-aik-x:hover,.dzx-aik-x:focus-visible{box-shadow:0 0 0 2px var(--ring);outline:0}
.dzx-aik-card .dz-mine-t b,.dzx-aik-card .dz-mine-t small{white-space:normal;text-overflow:clip}
@media (max-width:480px){.dzx-aik-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- DESIGNS STAY WITH US (29 Oct 2026, Junaid: "it's our system, they cannot design and take it away"; WORKLOG 198 rule): the larger
   pictures of a design (Preview, Check and Finish) carry the proof watermark on screen, as every customer download does, and the browser's
   Print shows a note instead of the design. The editing canvas itself is the working surface. ---- */
.dz-ql-card,.dz-fin-pv:not(.dz-lg-pv) figure{position:relative}
.dz-ql-card::after,.dz-fin-pv:not(.dz-lg-pv) figure::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='160'%3E%3Cg font-family='Montserrat,Arial,sans-serif' font-size='17' font-weight='400' letter-spacing='1' fill='%23838B93' fill-opacity='.13' text-anchor='middle'%3E%3Ctext x='50' y='46' transform='rotate(-35 50 40)'%3EPROOF%3C/text%3E%3Ctext x='150' y='126' transform='rotate(-35 150 120)'%3EPROOF%3C/text%3E%3C/g%3E%3C/svg%3E");background-size:200px 160px}
.dz-fin-pv:not(.dz-lg-pv) figure::after{bottom:auto;aspect-ratio:auto;height:calc(100% - 28px)}
@media print{
  body.dz-app>*{display:none!important}
  body.dz-app::before{content:"Designs made in the Print Buddy online designer are printed by Print Buddy. Order your design to have it printed.";display:block;padding:40px;font:500 16px/1.5 Montserrat,Arial,sans-serif;color:var(--ink)}
}

/* ---- LOGO READY FOR PRINT (29 Oct 2026, js/designs/x-logoprep.js): the note under the logo drop zone ---- */
.dzx-lp{display:grid;gap:6px;margin:8px 0 0;padding:10px 12px;border-radius:var(--radius-sm);background:var(--panel);font-size:12.5px;line-height:1.45;color:var(--ink)}
.dzx-lp p{margin:0;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dzx-lp-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dzx-lp-row b{font-weight:500}
.dzx-lp-link{border:0;background:none;padding:2px 0;font:inherit;font-weight:500;color:var(--primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.dzx-lp-link:focus-visible{box-shadow:0 0 0 2px var(--ring);outline:0;border-radius:var(--radius-sm)}
.dzx-lp .dzx-lp-warn{color:var(--ink);background:var(--attn-tint);border-radius:var(--radius-sm);padding:6px 8px}
.dzx-lp .dz-btn2{justify-self:start}

/* ---- THE OWNER TEMPLATE EDITOR (29 Oct 2026, js/designs/x-owneredit.js): design.html?edit=1 for the owner. A bar across the top (the
   designer moves down under it), This Is in the inspector and the floating bar, and the role labels of Show Roles ---- */
.dzo-bar{position:fixed;top:0;left:0;right:0;z-index:60;min-height:52px;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:6px 14px;padding-top:max(6px,env(safe-area-inset-top,0px));background:var(--ink);color:#fff;font-size:12.5px;line-height:1.3;box-shadow:0 1px 0 rgba(255,255,255,.06)}
html.dz-owner body.dz-app main.dz{top:var(--dzo-h,52px)}
.dzo-id{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;min-width:0;flex:1}
.dzo-k{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#C9D3DC}
.dzo-id b{font-weight:500;font-size:14px}
.dzo-n{font-weight:500;color:#fff}
.dzo-st{color:#C9D3DC;font-size:12px}
.dzo-acts{display:flex;align-items:center;gap:6px;flex:none}
.dzo-b{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-weight:500;cursor:pointer;white-space:nowrap}
.dzo-b:hover{background:rgba(255,255,255,.16)}
.dzo-b .dzo-s{display:none}
.dzo-b[aria-pressed="true"]{background:rgba(255,255,255,.2)}
.dzo-b:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dzo-b.dzo-go{background:var(--logo,var(--logo));color:var(--ink)}
.dzo-b.dzo-go:hover{filter:brightness(1.06)}
html.dz-owner-busy .dzo-b{opacity:.55;pointer-events:none}
@media (max-width:900px){
  .dzo-bar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;padding:6px 10px;min-height:100px}
  html.dz-owner body.dz-app main.dz{top:var(--dzo-h,100px)}
  .dzo-id{gap:0 8px}.dzo-st{flex-basis:100%}
  .dzo-acts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .dzo-b{flex-direction:column;justify-content:center;gap:2px;min-height:44px;padding:4px 2px;font-size:11px;line-height:1.2}
  .dzo-b .dzo-l{display:none}.dzo-b .dzo-s{display:block}
}
html.dzx-focus .dzo-bar{display:none}
/* the designer's windows (Check and Finish, Preview, Design With AI...) live inside main.dz (z-index 40), so while one is open the owner bar drops
   under it; the window then covers the whole screen and scrolls as it does for customers (29 Oct 2026, Junaid: "stuck, can not scroll up to see the design") */
html:has(.dz-modal:not([hidden])) .dzo-bar{z-index:30}
html.dzx-focus.dz-owner body.dz-app main.dz{top:0}
.dzo-this{display:grid;gap:6px;margin:4px 0 12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--panel)}
.dzo-this label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--ink)}
.dzo-this select.dzo-sel{-webkit-appearance:menulist;appearance:auto;width:100%;min-height:36px;border:1px solid var(--field-line,var(--line));border-radius:var(--radius-sm);background:#fff;color:var(--ink);font:inherit;font-size:13px;padding:0 8px}
.dzo-this select.dzo-sel:focus-visible{box-shadow:var(--field-ring,0 0 0 2px var(--focus));outline:0}
.dzo-this .dz-hint{margin:0}
.dzo-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;max-height:min(60vh,420px);overflow:auto}
.dzo-menu button[aria-checked="true"]{background:var(--tint);font-weight:500}
.dz-ov-ownroles{position:absolute;inset:0;pointer-events:none;z-index:6}
.dzo-role{position:absolute;box-sizing:border-box;height:17px;max-width:140px;padding:0 6px;border-radius:var(--radius-sm);background:rgba(255,255,255,.92);border:1px dashed #6B7A88;color:var(--ink);font:500 10.5px/15px Montserrat,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzo-role.on{background:var(--ink);border:1px solid var(--ink);color:#fff}
.dzo-h{margin:0 0 6px;font-size:18px;font-weight:500}.dzo-h small{display:block;font-size:12.5px;font-weight:400;color:var(--muted)}
.dzo-rows{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.dzo-rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--panel)}
.dzo-rows li>span:not(.dzo-tag){grid-column:2;font-size:12px;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dzo-rows li>b{grid-column:2;font-weight:500}
.dzo-rows li>.dz-btn2{grid-column:3;grid-row:1 / span 2}
.dzo-rows li.dzo-none{display:block;font-size:13px}
.dzo-tag{grid-row:1 / span 2;justify-self:start;display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;font-size:11px;font-weight:500;color:var(--ink)}
.dzo-tag.live{background:var(--ink);color:#fff}
@media (max-width:480px){.dzo-rows li{grid-template-columns:minmax(0,1fr) auto}.dzo-tag{grid-row:auto;grid-column:1 / -1}.dzo-rows li>span:not(.dzo-tag),.dzo-rows li>b{grid-column:1}.dzo-rows li>.dz-btn2{grid-column:2;grid-row:2 / span 2}}

/* ---- LOGO SHAPES (29 Oct 2026, js/designs/x-owneredit.js, x-logoshapes.js): the owner bar's Logo Shape row (Every Shape and six sample
   shapes, a dot where that group has the owner's own version) and Show All Shapes (a card per shape, front and back, Your Version or The
   Brain; as a dialog, or the whole window with ?shapes=1) ---- */
.dzo-shapes{flex-basis:100%;display:flex;align-items:center;gap:6px 10px;min-width:0;padding-top:6px;border-top:1px solid rgba(255,255,255,.1)}
.dzo-chips{display:flex;gap:4px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none}
.dzo-chips::-webkit-scrollbar{display:none}
.dzo-c{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;flex:none}
.dzo-c:hover{background:rgba(255,255,255,.16)}
.dzo-c[aria-pressed="true"]{background:#fff;color:var(--ink)}
.dzo-c:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dzo-ci{display:inline-block;box-sizing:border-box;border:1.5px solid currentColor;border-radius:var(--radius-sm);flex:none}
.dzo-ci.all{border-style:dashed}
.dzo-dot{width:7px;height:7px;border-radius:50%;background:var(--logo,var(--logo));flex:none}
.dzo-dot.draft{background:transparent;box-shadow:inset 0 0 0 1.5px var(--logo,var(--logo))}
.dzo-b.dzo-all{min-height:32px;flex:none}
@media (max-width:900px){
  .dzo-shapes{flex-wrap:wrap;gap:6px}
  .dzo-shapes>.dzo-k{display:none}
  .dzo-chips{flex-basis:100%}
  .dzo-b.dzo-all{flex-direction:row;min-height:36px;padding:0 12px;font-size:12px;flex:1 1 100%;justify-content:center}
}
.dzls .dzo-h{margin-bottom:4px}
.dzls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:12px}
.dzls-card{display:grid;gap:8px;align-content:start;padding:12px;border-radius:var(--radius-sm);background:var(--panel)}
.dzls-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-height:24px}
.dzls-h b{font-weight:500;font-size:14px;color:var(--ink)}
.dzls-ico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--ink)}
.dzls-ico i{display:block;box-sizing:border-box;border:1.5px solid currentColor;border-radius:var(--radius-sm)}
.dzls-r{font-size:12px;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dzls-tag{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;font-size:11px;font-weight:500;color:var(--ink)}
.dzls-tag.own{background:var(--ink);color:#fff}
.dzls-tag.draft{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
.dzls-pics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;min-height:90px}
.dzls-pics figure{margin:0;display:grid;gap:4px}
.dzls-pics img{display:block;width:100%;height:auto;border-radius:var(--radius-sm);background:#fff;box-shadow:0 1px 3px rgba(31,42,54,.14)}
.dzls-pics figcaption{font-size:11.5px;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dzls-wait{align-self:center;justify-self:center;font-size:12px;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dzls-card>.dz-btn2{justify-self:start}
.dz-modal.dzls-modal .dz-modal-box{width:min(1100px,calc(100vw - 32px))}
.dzls-page{position:fixed;inset:0;z-index:80;overflow:auto;padding:20px 16px 32px;box-sizing:border-box;background:var(--page-bg,#F3F5F7)}
.dzls-page .dzls{max-width:1400px;margin:0 auto}
.dzls-page .dzls-grid{grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px}
.dzls-page .dzls-pics{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
html.dzls-on body{overflow:hidden}
@media (max-width:480px){.dzls-grid,.dzls-page .dzls-grid{grid-template-columns:minmax(0,1fr)}.dzls-page .dzls-pics{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.dzls-page{padding:14px 16px 24px}}
/* ---- PICTURE FRAMES AND COLLAGES (29 Oct 2026, js/designs/frames.js + js/designs/x-frames.js): Elements tiles drawn in the ink of the page on the
   panel grey (the .dz-art tile), names on two lines, never cut; the collage tiles and sliders; the inspector's frame card ---- */
.dzx-pf .dz-h:first-child{margin-top:4px}
.dzx-pf-grid{margin-top:10px}
.dzx-pf-t{cursor:grab}
.dzx-pf-ic,.dz-art span.dzx-pf-ic{display:grid;place-items:center;aspect-ratio:1;overflow:visible;-webkit-line-clamp:none;background:var(--panel);border-radius:var(--radius);color:var(--ink);transition:background .15s}
.dzx-pf-ic svg{width:62%;height:auto;aspect-ratio:1}
.dzx-pf-t:hover .dzx-pf-ic,.dzx-cl-t:hover .dzx-cl-ic{background:var(--tint)}
.dzx-pf-t[aria-pressed="true"] .dzx-pf-ic,.dzx-cl-t[aria-pressed="true"] .dzx-cl-ic{background:var(--tint);box-shadow:var(--ring)}
.dzx-pf-n,.dz-art span.dzx-pf-n{text-align:center;font-size:10.5px;font-weight:500;color:var(--ink);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance;white-space:normal}
.dzx-cl-opts{display:grid;gap:10px;margin:10px 0 12px}
.dzx-cl-opts .dz-seg{display:flex}
.dzx-cl-sl{display:grid;grid-template-columns:62px minmax(0,1fr) 46px;align-items:center;gap:10px;font-size:12px;font-weight:500;color:var(--ink);margin:0 0 10px}
.dzx-cl-opts .dzx-cl-sl{margin:0}
.dzx-cl-sl input{width:100%;accent-color:var(--primary)}
.dzx-cl-sl output{font-size:11.5px;font-weight:500;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.dzx-cl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dzx-cl-grid.sm{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dzx-cl-t{display:grid;gap:4px;border:0;background:transparent;padding:0;cursor:pointer;text-align:left;min-width:0}
.dzx-cl-ic{display:grid;place-items:center;background:var(--panel);border-radius:var(--radius);padding:10px 8px;color:var(--ink);transition:background .15s}
.dzx-cl-ic svg{width:100%;height:auto;max-width:120px}
.dzx-cl-grid.sm .dzx-cl-ic{padding:6px}
.dzx-cl-t small{font-size:10.5px;color:var(--muted);line-height:1.2}
.dzx-pf-ins{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0}
.dzx-pf-ins>*,.dzx-pf-pick,.dzx-pf{min-width:0}
.dzx-pf-cur{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 12px 8px 8px;border:0;border-radius:var(--radius);background:var(--panel);cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.dzx-pf-cur:hover{background:var(--tint)}
.dzx-pf-cur .dzx-pf-ic{width:40px;flex:none;background:#fff}
.dzx-pf-cur>span:nth-child(2){flex:1 1 auto;display:grid;gap:2px;min-width:0}
.dzx-pf-cur b{font-size:12.5px;font-weight:500}
.dzx-pf-cur small{font-size:11.5px;font-weight:500;color:var(--muted)}
.dzx-pf-cur>svg{flex:none;color:var(--muted);transition:transform .15s}
.dzx-pf-cur[aria-expanded="true"]>svg{transform:rotate(180deg)}
.dzx-pf-pick{margin:0 0 16px}
.dzx-pf-pick .dz-scrollchips{margin-top:0}
.dzx-pf-ins .dz-seg{display:flex}
.dzx-pf-sws{display:flex;flex-wrap:wrap;gap:8px}
/* More Colours after a frame's swatches, Extra Thick fitting the row, the style row under it (3 Nov 2026, x-frames.js) */
.dzx-pf-sws .dzx-pf-more{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.dzx-pf-sws .dzx-pf-more:hover{box-shadow:inset 0 0 0 1px var(--primary);color:var(--primary)}
.dzx-pf-bw{flex-wrap:wrap}
.dzx-pf-ins .dz-seg.sm+.dz-seg.sm{margin-top:6px}
.dzx-pf-sws .dz-sw[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(25,32,38,.14),0 0 0 2px #fff,0 0 0 4px var(--primary)}
.dzx-pf-btns{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px}
.dzx-pf-btns .btn,.dzx-pf-btns .dz-btn2{display:inline-flex;align-items:center;gap:6px}
@media (max-width:560px){.dzx-pf-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.dzx-cl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dzx-pf-sws .dz-sw{width:32px;height:32px}}
.dzx-cl-t .dzx-pf-n{text-align:left}
/* Easier Turning (js/designs/x-rotatesnap.js, 29 Oct 2026): the angle capsule beside the rotate handle (free = white, a 15 degree step = a tint of
   the primary, a magnet angle = solid primary) and the Quick Angles row under the Rotate box */
.dzx-rs{position:absolute;left:0;top:0;z-index:13;display:flex;align-items:baseline;gap:8px;padding:6px 13px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;color:var(--ink);box-shadow:var(--dz-float);font:500 13px/1.2 Montserrat,system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .1s,background .12s,color .12s}
.dzx-rs.on{opacity:1}
.dzx-rs .dzx-rs-hint{font-size:10.5px;font-weight:500;color:var(--muted);transition:none}
.dzx-rs .dzx-rs-hint:empty{display:none}
.dzx-rs[data-k="step"]{background:rgba(var(--prgb),.14);color:var(--primary-dk);box-shadow:0 0 0 1px rgba(var(--prgb),.35),var(--dz-float)}
.dzx-rs[data-k="magnet"]{background:var(--primary);color:#fff;box-shadow:0 2px 10px rgba(var(--prgb),.35)}
.dzx-rs[data-k="step"] .dzx-rs-hint{color:inherit;opacity:.75}
.dzx-rs[data-k="magnet"] .dzx-rs-hint{color:#fff;opacity:.8}
.dzx-rs-row{margin:0 0 14px}
.dzx-rs-h{font-size:12px;font-weight:500;color:var(--ink);margin:0 0 7px}
.dzx-rs-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dzx-rs-b .dz-btn2{width:100%;padding:0 8px;min-width:0}
.dzx-rs-b .dz-btn2:last-child:nth-child(odd){grid-column:1 / -1}
.dzx-rs-left svg{transform:scaleX(-1)} /* the rotate icon turns clockwise; Turn Left gets its mirror */
.dzx-rs-b .dz-btn2:disabled{opacity:.45;cursor:not-allowed}
.dzx-rs-b.two .dz-btn2:last-child:nth-child(odd){grid-column:auto}

/* Handles choice and Fit Box to Text (29 Oct 2026, x-canvahandles.js, x-fitbox.js) */
.dzx-fb{display:flex;flex-direction:column;gap:8px}
.dzx-fb .dz-btn2{width:100%;justify-content:center}
.dzx-hc-row{padding-bottom:6px}
.dzx-hc-seg{display:flex;width:100%}
.dzx-hc-seg button{flex:1 1 0;min-width:0}

/* AI at work (30 Oct 2026, js/designs/x-aiwork.js): the stage shown while Design With AI runs. Inside the window after the wait line,
   or a floating card over the page for Ask Buddy. Soft blocks draw themselves in on the little page, a light sweeps across, steps tick. */
.dzx-aiwork{margin:12px 0 4px;padding:14px;border-radius:var(--radius,12px);background:var(--page-bg,#F3F5F7);color:var(--ink,var(--ink))}
.dzx-aiwork-float{position:fixed;z-index:90;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(440px,calc(100vw - 24px));margin:0;background:var(--card,#fff);box-shadow:0 10px 30px -8px rgba(25,32,38,.35),0 2px 6px rgba(25,32,38,.12);animation:dzxAwUp .18s ease-out}
@keyframes dzxAwUp{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.dzx-aw-stage{display:flex;gap:16px;align-items:flex-start}
.dzx-aw-page{flex:none;max-width:160px;max-height:160px;width:auto;height:auto;overflow:hidden;border-radius:var(--radius-sm)}
.dzx-aw-sheet{fill:#fff;stroke:rgba(42,42,51,.14)}
.dzx-aw-p{fill:var(--primary,var(--primary));opacity:0;transform-box:fill-box;transform-origin:center;animation:dzxAwIn 11s ease-in-out infinite}
.dzx-aw-logo{fill:var(--logo,var(--logo))}.dzx-aw-title{fill:var(--ink,var(--ink))}.dzx-aw-sub,.dzx-aw-line{fill:rgba(42,42,51,.32)}.dzx-aw-pic{fill:rgba(var(--prgb),.28)}.dzx-aw-band{fill:var(--primary,var(--primary))}
@keyframes dzxAwIn{0%{opacity:0;transform:scale(.7)}6%{opacity:1;transform:scale(1.04)}9%{transform:scale(1)}78%{opacity:1}90%,100%{opacity:0;transform:scale(.96)}}
.dzx-aw-scan{fill:rgba(140,165,39,.22);animation:dzxAwScan 2.6s ease-in-out infinite}
@keyframes dzxAwScan{0%{transform:translateX(0)}100%{transform:translateX(130%)}}
.dzx-aw-side{flex:1 1 auto;min-width:0}
.dzx-aw-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 8px}.dzx-aw-head b{font-weight:500;font-size:14px}.dzx-aw-sec{font-size:11.5px;opacity:.6;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.dzx-aw-bar{height:6px;border-radius:var(--bar-r);background:rgba(42,42,51,.1);overflow:hidden;margin:0 0 10px}
.dzx-aw-bar i{display:block;height:100%;border-radius:var(--bar-r);background:linear-gradient(90deg,var(--primary,var(--primary)),var(--logo,var(--logo)));transition:width .5s ease;position:relative;overflow:hidden}
.dzx-aw-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:dzxAwShine 1.4s linear infinite}
@keyframes dzxAwShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.dzx-aw-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.dzx-aw-steps li{display:flex;align-items:center;gap:8px;opacity:.45;transition:opacity .3s}.dzx-aw-steps li.now,.dzx-aw-steps li.done{opacity:1}
.dzx-aw-steps li i{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(42,42,51,.3);position:relative;transition:background .3s,border-color .3s}
.dzx-aw-steps li.now i{border-color:var(--primary,var(--primary));border-top-color:transparent;animation:dzxAwSpin .9s linear infinite}
.dzx-aw-steps li.done i{background:var(--primary,var(--primary));border-color:var(--primary,var(--primary))}
.dzx-aw-steps li.done i::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
@keyframes dzxAwSpin{to{transform:rotate(360deg)}}
.dzx-aw-note{margin:10px 0 0;font-size:12px;opacity:.7}
.dzx-aiwork.is-done{transition:opacity .4s;opacity:.7}
@media (max-width:600px){.dzx-aw-stage{gap:12px}.dzx-aw-page{max-width:96px;max-height:96px}.dzx-aw-steps{font-size:12px;gap:4px}}
@media (prefers-reduced-motion:reduce){.dzx-aw-p{animation:none;opacity:1}.dzx-aw-scan,.dzx-aw-bar i::after,.dzx-aw-steps li.now i{animation:none}.dzx-aw-steps li.now i{border-top-color:var(--primary,var(--primary))}.dzx-aiwork-float{animation:none}}

/* ==== TAGS IN THE DESIGNER (31 Oct 2026, Junaid: no pills anywhere). The shape tokens live in site.css (TAGS (NO PILLS)): every capsule here
   is the die-cut label (--tag-radius / --tag-shape, switchable with html[data-tag]); round icon buttons, colour discs and the coach dots stay
   circles. Chosen chips are solid ink with a fine top highlight; the status tags are small capitals with a diamond mark; the switch knob is
   squared; counts in the mono face. ==== */
html :is(.dz-chips button.on,.dz-scrollchips button[aria-pressed="true"],.dz3 .dzg-chips button.on,.dzg-chips button.on,.dzf-chips button.on,.dzx-h-chips button[aria-pressed="true"],.dzb-styles button[aria-pressed="true"]){background:var(--tag-on-bg);color:var(--tag-on-ink);box-shadow:var(--tag-on-sh)}
html :is(.dz-chips button,.dz-scrollchips button,.dzg-chips button,.dzf-chips button,.dzx-h-chips button,.dzb-styles button,.dzb-ideas button):not(.on):not([aria-pressed="true"]):hover{box-shadow:var(--tag-hover)}
html :is(.dzo-tag,.dzls-tag,.dzx-a-vtag){text-transform:uppercase;letter-spacing:.07em;font-size:10px;font-weight:500}
html :is(.dzo-tag,.dzls-tag)::before{content:"";flex:none;width:5px;height:5px;margin-right:7px;background:currentColor;transform:rotate(45deg)}
html :is(.dzg-fn,.dzb-count,.dzx-g-badge){font-family:var(--tag-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
html .dz-switch::after{border-radius:var(--knob-r);corner-shape:var(--knob-shape)}

/* ======================================================================== EASY STUDIO (31 Oct 2026; Junaid: "a very easy to use online designer
   where every customer can design something without any effort"; js/designs/x-easy.js; docs/DESIGNER-EASY-STUDIO-2026-10-31.md;
   docs/STYLE-GUIDE.md "Easy Studio"). The studio carries .dz-easy: a checklist pane (Make It Yours) instead of the tool rail on desktop, the
   tool panel docked as the first column with Back, the right-hand card only while a piece is picked or the Pages row asks for it, a three-step
   bar in the title bar, words on the floating bar's core buttons; on phones six tabs of its own and icon-only Undo and Redo. Pro Tools (the
   classic shell) keeps every rule above this block. Rows and tiles are the card pattern (tinted tile, title, one quiet line, chevron). */
.dz3:not(.dz-easy) .dz-tabs [data-dztab="steps"],.dz3:not(.dz-easy) .dz-tabs [data-dztab="add"],.dz3:not(.dz-easy) .dze-tab,.dz-easy .dze-rail,.dz-easy .dz-tabs [data-dztab="steps"],.dz-easy .dz-tabs [data-dztab="add"]{display:none}
.dze-list{display:grid;gap:6px}
.dze-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto 16px;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 10px 10px 10px;border:0;border-radius:var(--dz-r);background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.dze-row:hover{background:var(--tint)}
.dze-row:focus-visible{outline:none;box-shadow:var(--ring)}
.dze-ic{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--radius-sm);background:#fff;color:var(--icon,var(--ink))}
.dze-tick{display:none;position:absolute;right:-5px;top:-5px;width:18px;height:18px;border-radius:50%;background:#2E8B57;color:#fff;place-items:center;box-shadow:0 0 0 2px var(--panel)}
.dze-row.done .dze-tick{display:grid}
.dze-t{display:grid;gap:2px;min-width:0}
.dze-t b{font-size:13.5px;font-weight:500;line-height:1.25}
.dze-t small{font-size:11.5px;line-height:1.4;color:color-mix(in srgb,var(--muted) 78%,var(--ink));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dze-st{display:flex;align-items:center;gap:4px}
.dze-dot{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.dze-dot.big{width:22px;height:22px}
.dze-thumb{width:44px;height:30px;object-fit:contain;background:#fff;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--line);padding:2px}
.dze-row>svg:last-child{color:var(--muted)}
.dze-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--dz-hair)}
.dze-pro{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.dze-pro .dze-ic{background:var(--panel)}
.dze-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dze-tile{display:grid;gap:10px;justify-items:start;align-content:start;min-height:104px;padding:12px;border:0;border-radius:var(--dz-r);background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.dze-tile:hover{background:var(--tint)}
.dze-tile:focus-visible{outline:none;box-shadow:var(--ring)}
.dze-tile .dze-ic{width:36px;height:36px}
.dze-tile b{display:block;font-size:13px;font-weight:500;line-height:1.25}
.dze-tile small{display:block;margin-top:2px;font-size:11px;line-height:1.4;color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
.dze-steps{display:none;align-items:center;gap:2px;margin-right:10px;padding:3px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel)}
.dze-steps button{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 6px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer}
.dze-steps button:hover{color:var(--ink)}
.dze-steps button i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;color:var(--ink);font-style:normal;font-size:11px;font-weight:500;box-shadow:inset 0 0 0 1px var(--line)}
.dze-steps button[aria-current="step"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(25,32,38,.08)}
.dze-steps button[aria-current="step"] i{background:var(--primary);color:#fff;box-shadow:none}
.dze-steps button.dze-done i{background:#2E8B57;color:#fff;box-shadow:none}
.dze-pdone.dz-btn2{margin-left:auto}
.dze-rail span,.dze-tab span{display:block}
@media (min-width:1200px){ .dz-easy .dze-steps{display:inline-flex} }
/* room in the title bar: under 1700 px only the current step keeps its word; under 1600 px the Saved note goes while the steps show */
@media (min-width:1200px) and (max-width:1699px){ .dz-easy .dze-steps button:not([aria-current]) span{display:none} .dz-easy .dze-steps button:not([aria-current]){padding-right:6px} }
@media (min-width:1200px) and (max-width:1599px){ .dz-easy .dze-steps~.dz-saved{display:none} }
@media (min-width:861px){
  .dz-easy .dz-tabs{display:none}
  .dz-easy .dz-body{grid-template-columns:var(--dz-pw) minmax(0,1fr)}
  .dz-easy.dz-collapsed .dz-body{grid-template-columns:0 minmax(0,1fr)}
  .dz-easy .dz-panel{position:static;grid-column:1;grid-row:1;width:auto;left:auto;top:auto;bottom:auto;border-radius:0;box-shadow:none;border-right:1px solid var(--dz-hair);visibility:visible}
  .dz-easy.dz-collapsed .dz-panel{display:none}
  .dz-easy .dz-stage{grid-column:2}
  .dz-easy .dz-canvaswrap,.dz-easy.dz-collapsed .dz-canvaswrap{padding:76px 40px 112px}
  .dz-easy.dz-1side .dz-canvaswrap{padding-bottom:90px}
  .dz-easy .dz-insp{display:none}
  .dz-easy.dz-has-sel .dz-insp,.dz-easy.dz-easy-page .dz-insp{display:block}
  .dz-easy.dz-has-sel .dz-canvaswrap,.dz-easy.dz-easy-page .dz-canvaswrap{padding-right:calc(var(--dz-iw) + 32px)}
  .dz-easy .dz-pages,.dz-easy.dz-collapsed .dz-pages{left:50%}
  .dz-easy.dz-has-sel .dz-pages,.dz-easy.dz-easy-page .dz-pages{left:calc((100% - var(--dz-iw) - 24px) / 2)}
  .dz-easy .dz-view{right:16px}
  .dz-easy.dz-has-sel .dz-view,.dz-easy.dz-easy-page .dz-view{right:calc(var(--dz-iw) + 28px)}
  .dz-easy .dz-float,.dz-easy.dz-collapsed .dz-float{max-width:calc(100% - 72px)}
  .dz-easy.dz-has-sel .dz-float{max-width:calc(100% - var(--dz-iw) - 72px)}
  .dz-easy .dz-panel-h{padding:14px 10px 8px 18px}
  .dz-easy #dzPanelX{display:inline-flex;align-items:center;width:auto;height:32px;padding:0 10px 0 6px;gap:3px;font-size:12.5px;font-weight:500;line-height:1;white-space:nowrap;color:var(--ink)}
  .dz-easy.dz-easy-steps #dzPanelX{display:none}
  .dz-easy .dz-float button[data-lbl]{width:auto;padding:0 10px 0 8px;border-radius:var(--dz-rb);display:inline-flex;align-items:center;gap:6px}
  .dz-easy .dz-float button[data-lbl]::after{content:attr(data-lbl);font-size:12px;font-weight:500}
  .dz-easy .dz-float button.dzf-edit{background:var(--tint);color:var(--primary)}
  .dz-easy .dz-float button.dzf-edit:hover{background:color-mix(in srgb,var(--tint) 70%,var(--primary) 30%)}
}
@media (max-width:860px){
  .dz-easy .dz-tabs>button:not(.dze-tab){display:none}
  .dz-easy .dz-hist{padding:2px}
  .dz-easy .dz-hist button{font-size:0;width:40px;padding:0;justify-content:center;gap:0}
  .dz-easy .dz-hist button svg{width:19px;height:19px}
}
/* simpler still (31 Oct 2026, WORKLOG 313; Junaid: "everyone thinks I have overdone it"): the piece card shows the everyday controls and folds
   the rest under More Options; the floating bar keeps Edit, Duplicate, Delete and More; the brand card waits at the foot of Your Details; the
   start page has three doors and two quiet links */
.dz-easy #dzProps:not(.dze-more) .dze-later{display:none!important}
.dze-moreopt{justify-content:space-between;margin-top:6px;color:var(--primary)}
.dze-moreopt svg{transition:transform .15s}
#dzProps.dze-more .dze-moreopt svg{transform:rotate(90deg)}
/* the start page as one question: the intro centred over the product picker; the doors become a quiet strip under the products */
.dze-start .dz-heroband{display:block;margin:0}
.dze-start .dz-intro{text-align:center;justify-items:center;margin:30px auto 26px;max-width:780px}
.dze-start .dz-intro h1{font-size:40px;letter-spacing:-.6px;margin:10px 0 12px}
.dze-start .dz-intro>p{max-width:600px;font-size:15px}
.dze-ways{max-width:1080px;margin:48px auto 0}
.dze-ways .dz-sec-h span{text-align:right}
.dze-start .dz-starts{display:flex;flex-wrap:wrap;gap:8px;max-width:none;margin:0}
.dze-start .dz-start{display:inline-flex;grid-template-columns:none;grid-template-areas:none;align-items:center;gap:10px;min-height:48px;padding:8px 16px 8px 10px;box-shadow:inset 0 0 0 1px var(--line);transform:none}
.dze-start .dz-start:hover{box-shadow:inset 0 0 0 1px var(--line),var(--card-sh);transform:none;background:var(--tint)}
.dze-start .dz-start-ic{width:32px;height:32px;margin:0;border-radius:var(--radius-sm)}
.dze-start .dz-start-ic svg{width:17px;height:17px}
.dze-start .dz-start b{font-size:13.5px}
.dze-start .dz-start>span:not(.dz-start-ic),.dze-start .dz-start em{display:none}
.dze-start .dz-start .dz-tag,.dze-start .dz-start .dz-start-tag{display:none}
.dze-start .dz-mine{margin:40px 0 0}
/* the brand card on the start page is one slim row: icon, one line, a small button */
.dze-start .dz-bc.start{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 10px;max-width:720px}
.dze-start .dz-bc.start .dz-bc-a{margin:0;flex:none}
.dze-start .dz-bc.start .dz-bc-ic,.dze-start .dz-bc.start .dz-bc-logo{width:36px;height:36px;flex:none}
.dze-start .dz-bc.start .dz-bc-t{flex:0 1 auto;min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dze-start .dz-bc.start .dz-bc-t b{font-size:14px}
.dze-start .dz-bc.start .dz-bc-t span,.dze-start .dz-bc.start .dz-bc-t p{display:none}
.dze-start .dz-bc.start .btn,.dze-start .dz-bc.start button,.dze-start .dz-bc.start a.dz-btn2{margin:0;height:34px;padding:0 12px;font-size:12.5px;white-space:nowrap}
@media (max-width:700px){ .dze-start .dz-bc.start{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px 12px} .dze-start .dz-bc.start .dz-bc-a{grid-column:2} }
@media (max-width:700px){ .dze-start .dz-intro{margin:18px auto 18px} .dze-start .dz-intro h1{font-size:28px} .dze-ways{margin-top:36px} .dze-ways .dz-sec-h{flex-direction:column;align-items:flex-start;gap:4px} .dze-ways .dz-sec-h span{text-align:left} .dze-start .dz-start{flex:1 1 calc(50% - 4px)} }
@media (min-width:861px){
  .dz-easy .dz-float [data-fa="fwd"],.dz-easy .dz-float [data-fa="bwd"],.dz-easy .dz-float [data-fa="lock"]{display:none}
  .dz-easy .dz-pane[data-dzpane="details"] .dz-form>.dz-bc{order:99}
}
/* the head of the start page as a hero band (31 Oct 2026, Junaid: "work on the css of the top bit rather than keeping it basic"): a tinted
   card with a soft glow, the question and one line, the product search as a big white field, the brand line, and three real product photos
   fanned like a hand of cards (the frames keep their size before the pictures land, so the page never shifts) */
.dze-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:28px 20px 26px;margin:14px 0 26px;border-radius:var(--radius);background:linear-gradient(135deg,var(--tint) 0%,#fff 64%);box-shadow:var(--card-sh);overflow:hidden}
.dze-hero::before{content:"";position:absolute;right:-140px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--primary) 14%,transparent),transparent 72%);pointer-events:none}
.dze-hero-copy{position:relative;min-width:0}
.dze-start .dze-hero .dz-intro{margin:0;text-align:left;justify-items:start;max-width:none}
.dze-start .dze-hero .dz-intro h1{font-size:34px;margin:8px 0 10px}
.dze-start .dze-hero .dz-intro>p{font-size:14.5px;max-width:520px}
.dze-hero-find{width:100%;max-width:520px;height:52px;margin:18px 0 0;padding:0 16px;background:#fff;color:var(--muted);box-shadow:0 1px 2px rgba(25,32,38,.06),inset 0 0 0 1px var(--line)}
.dze-hero-find:focus-within{box-shadow:var(--ring)}
.dze-hero-find input{font-size:15px}
.dze-hero-find svg{color:var(--primary);width:18px;height:18px}
.dze-start .dze-hero .dz-bc.start{margin-top:16px;padding:0;max-width:520px;background:transparent;box-shadow:none}
.dze-hero-art{position:relative;height:170px;display:flex;justify-content:center;align-items:center;gap:10px}
.dze-ha{display:block;flex:none;width:150px;aspect-ratio:4/3;background:#EBEDEF;border-radius:var(--radius);box-shadow:0 10px 28px -10px rgba(25,32,38,.35),0 0 0 4px #fff;overflow:hidden;transform-origin:50% 100%}
.dze-ha.card{width:150px;aspect-ratio:85/55}
.dze-ha.tall{width:104px;aspect-ratio:148/210}
.dze-ha.wide{width:150px;aspect-ratio:148/105}
.dze-ha:nth-child(1){transform:rotate(-7deg) translateY(8px)}
.dze-ha:nth-child(2){transform:translateY(-4px);z-index:1}
.dze-ha:nth-child(3){transform:rotate(7deg) translateY(8px)}
.dze-ha img{width:100%;height:100%;object-fit:cover;display:block}
.dz-bc a.dz-btn2,.dz-bc a.btn{text-decoration:none}
@media (min-width:1001px){
  .dze-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;padding:44px 52px 40px;margin:26px 0 30px;align-items:center;min-height:320px}
  .dze-start .dze-hero .dz-intro h1{font-size:44px;letter-spacing:-.8px}
  .dze-hero-art{height:260px;gap:0}
  .dze-ha,.dze-ha.card,.dze-ha.wide{width:200px}
  .dze-ha.tall{width:150px}
  .dze-ha:nth-child(1){transform:rotate(-8deg) translate(34px,22px)}
  .dze-ha:nth-child(2){transform:translateY(-12px)}
  .dze-ha:nth-child(3){transform:rotate(8deg) translate(-34px,22px)}
}
/* laptops: the fan scales down so it never reaches the words */
@media (min-width:1001px) and (max-width:1240px){ .dze-hero-art{transform:scale(.64);transform-origin:60% 50%} .dze-hero{gap:12px;padding-right:32px} }
/* a product card showing its first ready-made design instead of a mock-up photo: the design sits whole on the grey tile */
.dze-start .dz-prod.dze-design-pic .dz-prod-im img{object-fit:contain;padding:10%;background:#EBEDEF}
@media (max-width:700px){
  .dze-hero{padding:22px 16px 20px;gap:18px}
  .dze-hero-art{order:-1;height:118px;gap:8px}
  .dze-ha,.dze-ha.card,.dze-ha.wide{width:31%;box-shadow:0 6px 16px -8px rgba(25,32,38,.3),0 0 0 3px #fff}
  .dze-ha.tall{width:21%;box-shadow:0 6px 16px -8px rgba(25,32,38,.3),0 0 0 3px #fff}
  .dze-hero-find{height:48px}
}
/* Design With AI, direct mode (1 Nov 2026): the picks window reuses the quick start's cards; its actions row and idea line */
.dzx-ai-picks .dz-lead{margin:4px 0 14px}
.dzx-ai-picks .dz-ai-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.dzx-ai-picks .dz-foot{margin-top:12px}
.dzx-ai-picks .dzx-a-card-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* PICTURES LIBRARY PAGING 2026-11-02 (js/designs/x-studiopics.js; Junaid: "I have loads of pictures approved but I cannot see a single picture"):
   the Pictures pane pages through the studio library. Upload Your Own strip at the top (the customer's own photos one tap away), a count on
   each chip, the count line, a quiet note when nothing matches and Show More Pictures under the grid. Tiles keep their shape while their
   thumbnails load, so the grid does not jump. */
/* the words and the button share one row where the pane is wide (the phone sheet) and stack in the narrow desktop panel: the words grow 999 times
   faster, so on a row they take the room, and the button wrapped onto its own line takes the whole width */
.dzx-pics-own{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;padding:10px 10px 10px 12px;background:var(--page-bg,#F4F5F6);border-radius:var(--radius)}
.dzx-pics-own-t{display:grid;gap:2px;min-width:0;flex:999 1 170px}
.dzx-pics-own-t b{font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.3}
.dzx-pics-own-t small{font-size:11.5px;color:var(--muted);line-height:1.35}
.dzx-pics-own .dz-btn2{flex:1 0 auto;background:#fff;box-shadow:var(--card-sh)}
.dzx-pics-own .dz-btn2:hover:not(:disabled){background:var(--tint)}
.dzx-pics .dzg-chips button .dzx-pics-cn{font-weight:400;color:var(--muted);margin-left:2px;font-variant-numeric:tabular-nums}
.dzx-pics .dzg-chips button.on .dzx-pics-cn{color:inherit;opacity:.75}
.dzx-pics .dzg-count{font-variant-numeric:tabular-nums}
.dzx-pics-grid .dzx-pic img{background:var(--panel);height:auto}
.dzx-pics-grid .dzx-pics-note{grid-column:1/-1;margin:6px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.dzx-pics-grid[aria-busy="true"]{opacity:.7;transition:opacity .15s}
.dzx-pics-more{margin:12px 0 4px}
.dzx-pics-more .dz-btn2{width:100%}
/* CHANGE CASE AND MENU GROUPS 2026-11-02 */
/* Change Case (js/designs/x-changecase.js): four small buttons under Alignment, each showing what it does (Aa, AA, aa, Aa Bb) */
.dzx-cc-seg{display:flex;width:100%}
.dzx-cc-seg>button{padding:0 6px;font-size:12.5px;font-weight:500;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.dzx-cc-seg>button[aria-pressed="true"]{color:var(--primary)}
.dzx-cc-n{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:1px}
/* its menu from the floating bar's More: the sample letters in front of each name */
.dz-menu.dzx-cc-menu>button{gap:10px}
.dzx-cc-g{flex:none;min-width:40px;font-weight:500;font-size:12.5px;color:var(--ink)}
.dz-menu.dzx-cc-menu>button[aria-checked="true"] .dzx-cc-g{color:var(--primary)}
/* the More menu in groups (design.html moreMenuHtml): a small heading per group and a hairline between groups; plain on phones too */
.dz-menu-gh{font-size:11px;font-weight:500;color:var(--muted);margin:6px 10px 2px}
.dz-menu-gh:first-child{margin-top:4px}
.dz-menu-sep{display:block;height:1px;background:var(--line);margin:5px 8px}
@media (max-width:860px){.dz-menu.dz-more-menu{overscroll-behavior:contain}.dz-menu.dz-more-menu>button{min-height:40px}}
/* BASIC AND PRO OPTIONS 2026-11-02 (js/designs/x-basic.js; docs/DESIGNER-OPTIONS-PLAN-2026-11-02.md): in the Easy Studio (html.dzb-easy) the
   blocks a basic customer does not need (.dzb-pro) fold in their box (.dzb-box) under one More Options button at its foot (.dzb-more, the same
   quiet wide button as the piece card's .dze-moreopt); .dzb-open shows them again in place. Pro Tools shows everything and no button. */
html.dzb-easy .dzb-box:not(.dzb-open)>.dzb-pro{display:none!important}
html:not(.dzb-easy) .dzb-more{display:none!important}
html.dzb-easy #dzFull,html.dzb-easy #dzKeysBtn{display:none!important}
.dzb-more{justify-content:space-between;margin-top:12px;color:var(--primary);border-radius:var(--radius-sm)}
.dzb-more svg{flex:none;transition:transform .15s}
.dzb-open>.dzb-more svg{transform:rotate(90deg)}
.dzb-open>.dzb-pro:not(hr){animation:dzbIn .18s ease-out}
@keyframes dzbIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.dz-menu>button.dzb-more{justify-content:space-between;min-height:32px;margin:6px 0 2px;padding:4px 10px;background:var(--panel);color:var(--primary);font-size:12.5px;font-weight:500}
.dz-menu>button.dzb-more svg{visibility:visible;color:var(--primary)}
.dzi-b>.dzb-more{margin-top:8px}
@media (prefers-reduced-motion:reduce){.dzb-open>.dzb-pro:not(hr){animation:none}.dzb-more svg{transition:none}}
/* INSPECTOR FLOATS, FRAME TAKE-OUT 2026-11-02 (Junaid: "as soon as it opens the element shifts... when you close it the element moves aside").
   The piece card floats over the workspace: picking or unpicking never changes the canvas padding, so the page never moves or rescales
   (js/designs/x-inspfloat.js pans the view only when the picked piece would sit under the card). The page strip, the view capsule and the
   floating bar step aside for the card instead. */
@media (min-width:861px){
  .dz-easy.dz-has-sel .dz-canvaswrap,.dz-easy.dz-easy-page .dz-canvaswrap{padding-right:40px}
}
@media (min-width:861px) and (max-width:1199px){
  .dz3:not(.dz-easy).dz-has-sel .dz-canvaswrap{padding-right:40px}
  .dz3:not(.dz-easy).dz-has-sel .dz-view{right:calc(var(--dz-iw) + 28px)}
  .dz3:not(.dz-easy).dz-has-sel .dz-pages{left:calc(var(--dz-pw) + 16px + (100% - var(--dz-pw) - var(--dz-iw) - 32px) / 2)}
  .dz3:not(.dz-easy).dz-collapsed.dz-has-sel .dz-pages{left:calc(12px + (100% - var(--dz-iw) - 24px) / 2)}
  .dz3:not(.dz-easy).dz-has-sel .dz-float{max-width:calc(100% - var(--dz-pw) - var(--dz-iw) - 72px)}
}
/* the photo in a frame: Take Photo Out of Frame and Remove Photo (js/designs/x-frames.js, the Frame Shape card) */
.dzx-pf-photo{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dzx-pf-photo .dz-btn2{flex:1 1 140px;justify-content:center;gap:6px;border-radius:var(--radius-sm)}
/* PICTURE SPOTS 2026-11-02 (js/designs/x-picspot.js; Junaid: "When I tap on a picture placeholder, I want the option to upload a file, select from
   the library... picture placeholders like Canva"). The chooser card by an empty spot (.dzx-ps-card in the overlay picspot; phones: the tool sheet
   "picspot", .dzx-ps.pane), the library window (.dzx-ps-pm, the Pictures tool's search and grid inside), the card by a picture that lands on the page
   (.dzx-ps-offer; phones .strip above the bottom bar), the rings of Put It in a Placeholder (.dzx-ps-ring) and its hint (.dzx-ps-hint). The spot's
   own look is drawn on the canvas (x-picspot.js paint), not here. */
.dz-ov.dzx-ps-ov{z-index:30;pointer-events:none}
.dzx-ps-card,.dzx-ps-offer{position:absolute;left:0;top:0;pointer-events:auto;background:#fff;border-radius:var(--radius);box-shadow:var(--dz-float,0 12px 32px rgba(25,32,38,.16));color:var(--ink);font-size:13px}
.dzx-ps-card{width:288px;max-width:calc(100vw - 32px);padding:12px;animation:dzxPsIn .14s ease-out}
@keyframes dzxPsIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.dzx-ps-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:0 0 10px}
.dzx-ps-h>span{display:grid;gap:2px;min-width:0}
.dzx-ps-h b{font-size:13.5px;font-weight:500;line-height:1.3}
.dzx-ps-h small{font-size:11.5px;color:var(--muted);line-height:1.35}
.dzx-ps-h .dz-ib{width:30px;height:30px;margin:-4px -4px 0 0;color:var(--muted)}
.dzx-ps-tiles{display:grid;gap:6px}
.dzx-ps-t{display:flex;align-items:center;gap:10px;min-height:48px;width:100%;padding:7px 10px 7px 7px;border:0;border-radius:var(--radius-sm);background:var(--page-bg,#F4F5F6);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .15s,box-shadow .15s}
.dzx-ps-t:hover{background:var(--tint)}
.dzx-ps-t:focus-visible,.dzx-ps-th:focus-visible,.dzx-ps-rm:focus-visible,.dzx-ps-ob:focus-visible,.dzx-ps-ring:focus-visible{outline:0;box-shadow:var(--ring)}
.dzx-ps-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-sm);background:#fff;color:var(--primary);box-shadow:var(--card-sh)}
.dzx-ps-tw{display:grid;gap:1px;min-width:0}
.dzx-ps-tw b{font-size:12.5px;font-weight:500;line-height:1.3}
.dzx-ps-tw small{font-size:11.5px;color:var(--muted);line-height:1.35}
.dzx-ps-sec{margin:12px 0 0}
.dzx-ps-sec>b{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin:0 0 6px}
.dzx-ps-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:2px 2px 4px}
.dzx-ps-th{flex:none;width:52px;height:52px;padding:0;border:0;border-radius:var(--radius-sm);background:var(--panel) center/cover no-repeat;overflow:hidden;cursor:pointer;box-shadow:inset 0 0 0 1px var(--dz-hair,rgba(25,32,38,.09))}
.dzx-ps-th img{width:100%;height:100%;object-fit:cover;display:block}
.dzx-ps-th:hover{box-shadow:var(--ring)}
.dzx-ps-rm{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:36px;margin:10px 0 0;padding:0 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:500;cursor:pointer}
.dzx-ps-rm:hover{background:var(--panel);color:var(--ink)}
/* phones: the same choices in the tool sheet, a little bigger to tap */
.dzx-ps.pane .dzx-ps-t{min-height:56px}
.dzx-ps.pane .dzx-ps-th{width:60px;height:60px}
/* the library window: the Pictures tool's search, chips and grid, four across */
.dz-xmodal.dzx-ps-pm .dz-modal-box{width:min(820px,100%);padding:24px 24px 20px}
.dzx-ps-pmh{margin:0 40px 14px 0}
.dzx-ps-pmh h2{margin:0 0 4px;font-size:18px;font-weight:500;color:var(--ink)}
.dzx-ps-pmh p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.dzx-ps-pm .dzx-pics .dz-search{margin:0 0 10px}
.dzx-ps-pm .dzg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.dzx-ps-pm .dzg-chips button{flex:none;height:30px;padding:0 12px;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font:inherit;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap}
.dzx-ps-pm .dzg-chips button.on{font-weight:500;box-shadow:var(--ring)}
.dzx-ps-pm .dzx-pics-shapes{margin-top:-2px}
.dzx-ps-pm .dzg-count{display:block;font-size:11.5px;color:var(--muted);margin:0 0 8px;font-variant-numeric:tabular-nums}
.dzx-ps-pm .dzx-pics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.dzx-ps-pm .dzx-pic{display:grid;gap:5px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;text-align:left;cursor:pointer;font:inherit}
.dzx-ps-pm .dzx-pic img{border-radius:var(--radius-sm);transition:box-shadow .15s}
.dzx-ps-pm .dzx-pic:hover img,.dzx-ps-pm .dzx-pic:focus-visible img{box-shadow:var(--ring)}
.dzx-ps-pm .dzx-pic:focus-visible{outline:0}
.dzx-ps-pm .dzx-pic span{font-size:11.5px;color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
.dzx-ps-pm .dzx-pics-more{margin:12px 0 0}
.dzx-ps-none{display:grid;justify-items:start;gap:10px;padding:18px;border-radius:var(--radius);background:var(--page-bg,#F4F5F6)}
.dzx-ps-none p{margin:0;font-size:13px;line-height:1.5;color:var(--ink)}
@media (max-width:760px){.dz-xmodal.dzx-ps-pm .dz-modal-box{padding:20px 16px 16px}.dzx-ps-pm .dzx-pics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:980px){.dzx-ps-pm .dzx-pics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* a picture that lands on the page: where should it go? */
.dzx-ps-offer{width:max-content;max-width:min(560px,calc(100vw - 32px));padding:10px 10px 10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;animation:dzxPsIn .14s ease-out}
.dzx-ps-oh{font-size:12.5px;font-weight:500;line-height:1.3}
.dzx-ps-obs{display:flex;flex-wrap:wrap;gap:6px}
.dzx-ps-ob{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border:0;border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font:inherit;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s}
.dzx-ps-ob:hover{background:var(--tint)}
.dzx-ps-ob.main{background:var(--primary);color:#fff}
.dzx-ps-ob.main:hover{background:var(--primary-dk,var(--primary))}
.dzx-ps-offer.strip{position:fixed;left:12px;right:12px;top:auto;bottom:calc(var(--dz-tabs,72px) + 10px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;z-index:60;display:grid;gap:8px;padding:12px}
.dzx-ps-offer.strip .dzx-ps-obs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dzx-ps-offer.strip .dzx-ps-ob{justify-content:center;min-height:44px;white-space:normal;text-align:center;line-height:1.25;padding:4px 8px}
/* Put It in a Placeholder: a ring on every spot and frame, and the hint */
.dzx-ps-ring{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:auto;padding:0;border:0;border-radius:var(--radius-sm);background:rgba(var(--prgb,54,92,112),.08);box-shadow:0 0 0 2px var(--primary),0 0 0 6px rgba(var(--prgb,54,92,112),.18);cursor:pointer;animation:dzxPsRing 1.6s ease-in-out infinite}
.dzx-ps-ring.round{border-radius:50%}
.dzx-ps-ring.empty{background:rgba(var(--prgb,54,92,112),.14)}
.dzx-ps-ring:hover{background:rgba(var(--prgb,54,92,112),.22)}
@keyframes dzxPsRing{0%,100%{box-shadow:0 0 0 2px var(--primary),0 0 0 6px rgba(var(--prgb,54,92,112),.18)}50%{box-shadow:0 0 0 2px var(--primary),0 0 0 10px rgba(var(--prgb,54,92,112),.08)}}
.dzx-ps-hint{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:31;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:6px 6px 6px 12px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;box-shadow:var(--dz-float,0 12px 32px rgba(25,32,38,.16));font-size:12.5px;font-weight:500;color:var(--ink)}
.dzx-ps-hint svg{flex:none;color:var(--primary)}
.dzx-ps-hint span{min-width:0}
@media (prefers-reduced-motion:reduce){.dzx-ps-card,.dzx-ps-offer{animation:none}.dzx-ps-ring{animation:none}}

/* FIRST PAINT 2026-11-02 (Junaid: "first it shows the old layout, then the page shifts to the new header"): design.html's head script marks
   <html data-dzwait data-dzshell="easy|pro">; until js/designs/x-easy.js (parsed last) has given the start page its shape, the old shape stays
   out of sight, and in the Easy shell the classic rail and docked panel never paint before the plug-in adds .dz-easy. The space is kept
   (visibility, not display), so nothing below jumps when it appears. The head script lifts data-dzwait after 4 s whatever happens. */
html[data-dzwait] #dzPick:not(.dze-start){visibility:hidden}
html[data-dzshell="easy"] .dz-studio:not(.dz-easy):not([hidden]) .dz-tabs,
html[data-dzshell="easy"] .dz-studio:not(.dz-easy):not([hidden]) .dz-panel{visibility:hidden}

/* BRAND CARD ON THE START PAGE 2026-11-02 (Junaid: "make this look better and more elegant"): the Your Brand Is Ready row in the hero band is a
   glass card: the logo in a white tile with a ring, a small eyebrow, the brand's own name, its colours as dots, one quiet Edit My Brand button
   with a chevron. design.html brandCta("start"), state ready. */
.dz-bc.dz-bc-elegant{grid-template-columns:56px minmax(0,1fr) auto;column-gap:16px;align-items:center;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 34px -20px rgba(25,32,38,.35);
  border:1px solid rgba(255,255,255,.85);padding:12px 14px 12px 12px;border-radius:var(--radius)}
.dz-bc.dz-bc-elegant .dz-bc-logo,.dz-bc.dz-bc-elegant .dz-bc-ic{width:56px;height:56px;grid-row:1;align-self:center;background:#fff;box-shadow:0 0 0 1px var(--line),0 6px 16px -10px rgba(25,32,38,.4)}
.dz-bc.dz-bc-elegant .dz-bc-logo img{max-width:78%;max-height:78%}
.dz-bc.dz-bc-elegant .dz-bc-t{min-width:0}
.dz-bc.dz-bc-elegant .dz-bc-eyebrow{display:block;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:2px}
.dz-bc.dz-bc-elegant .dz-bc-t b{font-size:16px;font-weight:500;color:var(--ink);line-height:1.25;overflow:hidden;text-overflow:clip;white-space:nowrap}
.dz-bc.dz-bc-elegant .dz-bc-t span{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:4px}
.dz-bc-dots{display:inline-flex;gap:4px;align-items:center}
.dz-bc-dots i{display:block;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(25,32,38,.08)}
.dz-bc.dz-bc-elegant .dz-bc-a{grid-column:3;grid-row:1;margin:0;align-self:center}
.dz-bc-edit{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 14px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);
  background:var(--tint);color:var(--primary);font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,transform .15s}
.dz-bc-edit:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}
.dz-bc-edit:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.dz-bc-edit svg{transition:transform .15s}
.dz-bc-edit:hover svg{transform:translateX(2px)}
@media (max-width:520px){.dz-bc.dz-bc-elegant{grid-template-columns:48px minmax(0,1fr)}.dz-bc.dz-bc-elegant .dz-bc-logo,.dz-bc.dz-bc-elegant .dz-bc-ic{width:48px;height:48px}
  .dz-bc.dz-bc-elegant .dz-bc-a{grid-column:2;grid-row:auto;margin-top:8px}.dz-bc.dz-bc-elegant .dz-bc-t b{white-space:normal}}
.dz-bc.dz-bc-elegant .btn,.dz-bc.dz-bc-elegant .dz-btn2{height:36px;padding:0 14px;font-size:12.5px}
.dz-bc.dz-bc-elegant .dz-bc-ic{color:var(--primary);background:#fff}
/* ======================================================================== SIMPLE STUDIO (3 Nov 2026; js/designs/x-simple.js; Junaid: "I want the
   whole designer to be built again... make it convenient for the customers; the features we do not need go into the advanced build"; the
   research docs/DESIGNER-COMPETITOR-RESEARCH-2026-11-02.md part 10 and the drawings in docs/reviews/competitors-2026-11-02). html.dzs keys every
   rule; .dz-easy is the basic shell (the Simple Studio), the classic rail (Pro Tools) is the advanced build. A rail of eight named tools
   with the panel docked beside it; the toolbar above the page; Front and Back beside the page; guide lines with words; one lime Next. */
html.dzs .dz-easy .dze-steps{display:none!important}
html.dzs .dz-easy #dzBeta{display:none}
html.dzs .dz-easy .dzx-b-bar,html.dzs .dz-easy .dzx-b-badge{display:none!important}
html.dzs .dz-easy .dz-bar .btn.dz-finish.dzs-next{background:var(--lime,var(--logo));border-color:var(--lime,var(--logo));color:#1E2A14;font-weight:500;padding:0 20px;box-shadow:none}
html.dzs .dz-easy .dz-bar .btn.dz-finish.dzs-next:hover{background:color-mix(in srgb,var(--lime,var(--logo)) 86%,#1E2A14 14%);color:#1E2A14}
.dzs-rail,.dzs-guides,.dzs-chips{display:none}
.dzs-rail[hidden],.dzs-guides[hidden],.dzs-chips[hidden],.dzs-top[hidden]{display:none!important}
@media (min-width:861px){
  html.dzs .dz-easy .dz-body{grid-template-columns:76px var(--dz-pw) minmax(0,1fr)}
  html.dzs .dz-easy.dz-collapsed .dz-body{grid-template-columns:76px 0 minmax(0,1fr)}
  html.dzs .dz-easy .dzs-rail{display:flex;flex-direction:column;gap:2px;grid-column:1;grid-row:1;padding:8px 6px;background:#fff;border-right:1px solid var(--dz-hair);overflow-y:auto;scrollbar-width:none;min-height:0}
  html.dzs .dz-easy .dz-panel{grid-column:2}
  html.dzs .dz-easy .dz-stage{grid-column:3}
  html.dzs .dz-easy #dzPanelX{display:none}
  .dzs-rail button{position:relative;display:grid;justify-items:center;gap:4px;padding:9px 2px 7px;border:0;border-radius:var(--radius);background:transparent;color:var(--ink);font:inherit;font-size:10.5px;font-weight:500;line-height:1.1;cursor:pointer;transition:background .15s}
  .dzs-rail button svg{color:var(--icon,var(--ink))}
  .dzs-rail button:hover{background:var(--panel)}
  .dzs-rail button:focus-visible{outline:none;box-shadow:var(--ring)}
  .dzs-rail button[aria-selected="true"]{background:var(--tint);font-weight:500}
  .dzs-rail button[aria-selected="true"] svg{color:var(--primary)}
  .dzs-rail .dzs-more{margin-top:auto;color:var(--muted)}
  .dzs-tick{position:absolute;top:5px;right:9px;display:grid;place-items:center;width:13px;height:13px;border-radius:50%;background:#2E8B57;color:#fff}
  .dzs-tick svg{color:#fff!important;stroke-width:2.5}
  .dzs-mark{position:absolute;top:4px;right:6px;padding:1px 5px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--attn,#B7791F);color:#fff;font-size:9px;font-weight:500;font-style:normal;line-height:1.3}
  /* the page keeps the room: the right-hand card shows only from More (studio.dzs-card) */
  html.dzs .dz-easy.dz-has-sel:not(.dzs-card) .dz-insp{display:none}
  html.dzs .dz-easy.dz-has-sel:not(.dzs-card) .dz-canvaswrap{padding-right:40px} /* the same room as with nothing picked: the page never moves on a pick */
  html.dzs .dz-easy.dz-has-sel:not(.dzs-card) .dz-view{right:16px}
  html.dzs .dz-easy.dz-has-sel:not(.dzs-card) .dz-float{max-width:calc(100% - 72px)}
  html.dzs .dz-easy .dz-float{display:none!important}
  .dzx-t-menu .dzs-all{font-weight:500} /* one bar: the toolbar above the page carries every action on a desktop (3 Nov 2026) */
  html.dzs .dz-easy .dz-canvaswrap{padding-top:90px}
  html.dzs .dz-easy .dz-guides,html.dzs .dz-easy .dzs-guides{display:flex;position:absolute;left:16px;bottom:16px;z-index:6;align-items:center;gap:14px;padding:7px 12px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--radius);box-shadow:var(--dz-float);font-size:12px;color:var(--muted)}
  .dzs-swl{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500;cursor:pointer}
  .dzs-swl input{position:absolute;opacity:0;width:1px;height:1px}
  .dzs-swl i{position:relative;display:inline-block;width:30px;height:18px;border-radius:var(--knob-r);corner-shape:var(--knob-shape);background:#C9CFD6;transition:background .15s}
  .dzs-swl i::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
  .dzs-swl input:checked+i{background:#2E8B57}
  .dzs-swl input:checked+i::after{left:14px}
  .dzs-swl input:focus-visible+i{box-shadow:var(--ring)}
  html.dzs .dz-easy .dz-stage.dzx-d-hasrulers .dzs-guides{left:40px}
  /* a narrow workspace (the rail takes 76 px): the view capsule stays at the foot (an older container rule lifted it to the top and a later rule
     kept its bottom, which stretched it into a tall white column), and the sentence beside the switch gives way under 1200 px */
  html.dzs .dz-easy .dz-view{top:auto;bottom:16px}
  html.dzs .dz-easy .dz-stage.dzx-d-hasrulers .dz-view{top:auto}
  html.dzs .dz-easy .dzs-chips{display:block}
}
@media (min-width:1200px){
  html.dzs .dz-easy .dz-pages:not([hidden]){left:auto;right:24px;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;gap:8px;padding:8px}
  html.dzs .dz-easy.dz-has-sel.dzs-card .dz-pages:not([hidden]),html.dzs .dz-easy.dz-easy-page .dz-pages:not([hidden]){right:calc(var(--dz-iw) + 36px);left:auto}
  html.dzs .dz-easy .dz-page-im{height:56px;max-width:120px}
  html.dzs .dz-easy .dz-canvaswrap,html.dzs .dz-easy.dz-has-sel:not(.dzs-card) .dz-canvaswrap{padding-right:170px}
}
.dzs-top{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:1px;padding:4px;max-width:calc(100% - 24px);background:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);box-shadow:var(--dz-float);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.dzs-g{display:inline-flex;align-items:center;gap:1px;padding:0 4px;border-right:1px solid var(--dz-hair)}
.dzs-g:last-child{border-right:0}
.dzs-b{display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}
.dzs-b i{font-style:italic;font-weight:500}
.dzs-b:hover{background:var(--panel)}
.dzs-b.on{background:var(--tint);color:var(--primary)}
.dzs-b:focus-visible{outline:none;box-shadow:var(--ring)}
.dzs-b.dzs-word{width:auto;display:inline-flex;gap:6px;padding:0 10px;font-size:12.5px;font-weight:500}
.dzs-aa{font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--ink)} /* Change Case on the Simple Studio toolbar (x-simple.js) */
.dzs-fnt{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;min-width:150px;height:32px;padding:0 8px 0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.dzs-fnt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.dzs-num{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 2px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.dzs-num b{min-width:30px;text-align:center;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.dzs-num .dzs-b{width:26px;height:26px;font-weight:500}
.dzs-sw{display:block;width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1px var(--line),inset 0 0 0 2px #fff}
.dzs-pop{position:absolute;z-index:13;display:grid;grid-template-columns:repeat(6,30px);gap:6px;padding:10px;background:#fff;border-radius:var(--radius);box-shadow:var(--dz-float)}
.dzs-pop button[data-c]{width:30px;height:30px;border:0;border-radius:50%;box-shadow:0 0 0 1px var(--line),inset 0 0 0 2px #fff;cursor:pointer}
.dzs-pop button[data-c]:hover{box-shadow:0 0 0 2px var(--primary),inset 0 0 0 2px #fff}
.dzs-pop-more{grid-column:1 / -1;height:30px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--primary);font:inherit;font-size:12px;font-weight:500;cursor:pointer}
.dzs-chips{position:absolute;inset:0;z-index:5;pointer-events:none}
.dzs-chip{position:absolute;padding:2px 6px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;box-shadow:0 0 0 1px var(--line);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;white-space:nowrap}
.dzs-chip.b{color:#2D8FA8}
.dzs-chip.s{color:#3E8A4A;transform:translateX(6px)}
@media (min-width:861px) and (max-width:1199px){ html.dzs .dz-easy .dzs-legend{display:none} }
@media (max-width:860px){
  .dzs-top{top:12px;left:12px;right:12px;transform:none;max-width:none;justify-content:flex-start}
  html.dzs .dz-easy .dz-hist{top:60px}
}
/* Review Your Design (Simple Studio round 2, 3 Nov 2026): three things to double-check and the untouched example words, before the tick */
.dzs-review{margin:14px 0 4px;padding:14px 16px;border-radius:var(--radius);background:var(--panel)}
.dzs-review>b{display:block;font-size:13px;font-weight:500;margin-bottom:8px}
.dzs-review ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dzs-review li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45}
.dzs-review li svg{flex:none;margin-top:3px;color:#2E8B57}
/* the basic shell keeps the review short: Make Matching Pieces, Need a Yes First and the press-ink note wait in Pro Tools' window */
html.dzs[data-dzshell="easy"] #dzFinishModal .dz-fin-x[data-xfin="matching"],html.dzs[data-dzshell="easy"] #dzFinishModal .dz-fin-x[data-xfin="share"],html.dzs[data-dzshell="easy"] #dzFinishModal .dz-fin-x[data-xfin="cmyk"]{display:none}
/* Simple Studio round 4 (3 Nov 2026): Highlight empty text, the price capsule, eight tools along a phone's foot */
.dz-ov-empty{position:absolute;inset:0;pointer-events:none}
.dzs-empty{position:absolute;transform-origin:0 0;border:1px dashed rgba(45,143,168,.75);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
html.dzs .dz3:not(.dz-easy) .dz-ov-empty{display:none}
.dzs-price{display:none;align-items:center;gap:7px;height:32px;padding:0 12px 0 10px;margin-left:8px;border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;color:var(--ink);font-size:12.5px;text-decoration:none;white-space:nowrap}
.dzs-price b{font-weight:500}
.dzs-price:hover{background:var(--tint)}
.dzs-price[hidden]{display:none!important}
@media (min-width:1100px){ html.dzs .dz-easy .dzs-price{display:inline-flex} }
@media (max-width:860px){
  html.dzs .dz-easy .dz-tabs{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  html.dzs .dz-easy .dz-tabs>button.dze-tab{flex:0 0 74px!important;min-width:74px;padding-left:2px;padding-right:2px;font-size:10.5px;letter-spacing:0}
  html.dzs .dz-easy .dz-tabs>button.dze-tab span{white-space:nowrap}
}
/* CLUTTER (3 Nov 2026, docs/DESIGNER-CLUTTER-AUDIT-2026-11-03.md; Junaid: "fix all above"): what the Basic designer no longer shows. html.dzb-easy is
   set by x-basic.js while the Easy Studio is on; Pro Tools (no class) shows everything. Numbers are the audit's items. */
html.dzb-easy .dzb-off{display:none!important}                                                            /* tier off in x-basic.js */
html.dzs .dz3.dzx-c-panning .dzs-top{display:none}                                                         /* Move Picture: its own bar is the only bar */
html.dzb-easy .dz-fhint{display:none}                                                                      /* 1, 3 */
html.dzb-easy [data-dzpane="details"] > .dz-hint,html.dzb-easy [data-dzpane="details"] #dzFields > .dz-hint{display:none}   /* 2 */
html.dzb-easy #dzFields .dzx-g-cta{display:none}                                                           /* 4, 21 Names and Numbers */
html.dzb-easy .dzx-h-qcta small{display:none}                                                              /* 4 */
html.dzb-easy [data-dzpane="details"] .dz-bc .dz-bc-t span{display:none}                                   /* 5 the brand offer keeps its button */
html.dzb-easy #dzProps .dzi-l:has(> #dzPRemBack) > .dz-hint,html.dzb-easy #dzProps .dzi-l:has(> #dzPAddBack) > .dz-hint{display:none}   /* 6 */
html.dzb-easy .dzx-b-lc .dz-hint,html.dzb-easy .dzx-b-tidy .dz-hint,html.dzb-easy .dzx-h-laypg .dz-hint,html.dzb-easy .dzx-b-col p{display:none}   /* 7, 8, 9, 11 */
html.dzb-easy #dzProps .dzi-tip{display:none}                                                              /* 12 */
html.dzb-easy .dzi-arr .dzi-explain small,html.dzb-easy .dzx-t-hint,html.dzb-easy .dzx-t-menu .dz-menu-note{display:none}   /* 15 */
html.dzb-easy .dz-pane .dz-h small{display:none}                                                           /* 20 */
html.dzb-easy [data-dzpane="text"] .dz-h small{display:block}                                              /* 20: Text keeps "Add one, then type over it." */
html.dzb-easy [data-dzpane="style"] .dz-hint,html.dzb-easy [data-dzpane="elements"] .dz-hint{display:none}   /* 20 */
html.dzb-easy [data-dzer="tool-bulk"],html.dzb-easy #dzFinishModal .dz-fin-x[data-xfin="bulk"]{display:none}   /* 21 */
html.dzb-easy .dz-studio:not(.dzs-fin) [data-dzer="tool-finishes"],html.dzb-easy .dz-studio:not(.dzs-fin) .dzx-f-sec{display:none}   /* 22 */
html.dzb-easy #dzProps .dzi-l:has(> [data-brain-open]){display:none}                                       /* 23 */
html.dzb-easy .dz-view > button:not(#dzZoomOut):not(#dzZoomLbl):not(#dzZoomIn){display:none}              /* 24, 25 */
html.dzb-easy #dzProps .dzx-d-num,html.dzb-easy #dzProps .dzi-row:has(> [data-rot90]),html.dzb-easy #dzProps .dzi-row:has(> #dzCopyStyle),
html.dzb-easy #dzProps .dzi-row:has(> #dzDup),html.dzb-easy #dzProps .dzx-fb,html.dzb-easy #dzProps .dzx-t-sec,html.dzb-easy #dzProps .dzx-e-sec,
html.dzb-easy #dzProps [data-layer="front"],html.dzb-easy #dzProps [data-layer="back"]{display:none}       /* 26 */
html.dzb-easy #dzProps .dzi-l:has(> .dzi-fades){display:none}                                             /* 28 */
html.dzb-easy #dzProps .dzi-l:has(> .dz-colacts){display:none}                                             /* 31 */
html.dzb-easy #dzFinishModal .dz-fin-acct{display:none}                                                    /* 19 */
html.dzb-easy #dzComboCats,html.dzb-easy #dzTcCats{display:none}                                           /* 36 */
html.dzb-easy [data-dzpane="elements"] > .dzs-off{display:none}                                            /* 33 one group at a time */
html.dzb-easy .dzs-cap > button:nth-child(n+25){display:none}                                              /* 33, 34 */
html.dzb-easy .dzs-cap[data-dzs-n="12"] > button:nth-child(n+13){display:none}
html.dzb-easy .dzs-more{margin-top:8px}
html.dzb-easy #dzElGo [data-elgo][aria-pressed="true"],html.dzb-easy #dzElGo [data-dzxgo][aria-pressed="true"]{background:var(--tint);color:var(--ink)}

/* ---- CP: Change Them Together (js/designs/x-commonprops.js, 3 Nov 2026): the settings several picked pieces share ---- */
.dzcp{display:flex;flex-direction:column;gap:12px;margin:2px 0 6px}
.dzcp-top b{display:block;font-weight:500;color:var(--ink)}.dzcp-top small{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--muted);font-weight:400}
.dzcp-g{display:flex;flex-direction:column;gap:10px;padding:12px 0 0;border-top:1px solid var(--line)}
.dzcp-h{margin:0;font-size:11.5px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}.dzcp-h small{text-transform:none;letter-spacing:0;font-weight:400;margin-left:4px}
.dzcp .dzi-l{margin:0}
.dzcp-col{display:flex;align-items:center;gap:10px;width:100%;justify-content:flex-start;text-align:left}.dzcp-col span{flex:1}.dzcp-col small{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.dzcp-sw{display:block;flex:none;width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 1px var(--line),inset 0 0 0 2px #fff}
.dzcp-sw.mixed,.dzs-sw.mixed{background:conic-gradient(#C8553D 0 25%,#E9B44C 0 50%,#2D8FA8 0 75%,#4F6D3A 0)}
.dzs-sw.line{border-radius:4px;height:6px;margin:6px 0}
.dzcp-step input::placeholder{color:var(--muted)}
.dzcp .dz-seg button[aria-pressed="true"]{background:var(--tint);color:var(--ink)}

/* Template names wrap (4 Nov 2026): the AI Creative Studio names are long ("Spice And Share | Horizontal") and ran into the next card; a card may
   shrink to its column, the name wraps and is never cut (docs/STYLE-GUIDE.md, names are never cut) */
.dz3 .dzg-t{min-width:0}
.dz3 .dzg-t .dzg-n{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}

/* ONE SIDE AT A TIME (5 Nov 2026, design.html sideChoice): Use This Design For, Both Sides / Front Only / Back Only */
.dz-sidepick{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:rgba(31,42,53,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dz-sp-box{width:min(520px,100%);padding:22px;border-radius:16px;background:#fff;box-shadow:0 18px 50px rgba(31,42,53,.22);color:var(--ink);font-family:Montserrat,system-ui,sans-serif}
.dz-sp-h{display:block;font-size:18px;font-weight:500}
.dz-sp-p{margin:6px 0 16px;font-size:13px;line-height:1.5;color:#5C6873}
.dz-sp-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dz-sp-opts button{display:grid;justify-items:center;gap:6px;padding:14px 8px;border:0;border-radius:12px;background:#F2F1ED;color:var(--ink);font:inherit;text-align:center;cursor:pointer}
.dz-sp-opts button:hover,.dz-sp-opts button:focus-visible{background:#fff;box-shadow:0 0 0 2px var(--logo);outline:0}
.dz-sp-opts b{font-size:13px;font-weight:500}
.dz-sp-opts small{font-size:11px;color:#8A929A;line-height:1.35}
.dz-sp-ic{display:flex;gap:4px}
.dz-sp-ic i{display:block;width:26px;height:17px;border-radius:3px;background:#fff;box-shadow:inset 0 0 0 1px #C9CED3}
.dz-sp-ic i.on{background:var(--primary);box-shadow:none}
.dz-sp-opts button[data-sp="both"] .dz-sp-ic i{background:var(--primary);box-shadow:none}
.dz-sp-x{margin-top:14px;width:100%}
@media (max-width:480px){ .dz-sp-opts{grid-template-columns:1fr} }
.dz-tplfronts{margin-top:18px}
.dz-sp-opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.dz-sp-ic.blank i.on{background:#fff;box-shadow:inset 0 0 0 1.5px var(--primary)}
@media (max-width:480px){ .dz-sp-opts.two{grid-template-columns:1fr} }

/* ======== PICTURE INTO A PLACEHOLDER (6 Nov 2026; js/designs/x-picdrop.js): the spot a loose picture is dragged over, with its label ======== */
.dzx-pd-ring{pointer-events:none;display:flex;align-items:center;justify-content:center}
.dzx-pd-tag{padding:4px 8px;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font:500 12px/1.3 Montserrat,Arial,sans-serif;white-space:nowrap}
.dzx-pd{display:grid;gap:6px;justify-items:start}

/* CHECK SPELLING (6 Nov 2026, js/designs/x-spell.js): the wavy lines are a layer over the page (never part of the design or the print file), the
   suggestions a small card at the word; colours from the theme's warning tokens, corners the tokens */
.dzx-sp-layer{position:absolute;left:0;top:0;pointer-events:none;z-index:4;overflow:visible}
.dzx-sp-layer path{fill:none;stroke:var(--warning);stroke-width:1.3;stroke-linecap:round;opacity:.95}
.dzx-sp-pop{position:fixed;z-index:1200;width:min(280px,calc(100vw - 16px));background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-menu,0 10px 28px rgba(0,0,0,.14));padding:12px;display:grid;gap:10px}
.dzx-sp-w{display:flex;align-items:baseline;gap:8px;margin:0;font-size:12px;color:var(--muted)}
.dzx-sp-w b{font-size:15px;font-weight:500;color:var(--ink);text-decoration:underline wavy var(--warning);text-underline-offset:3px;overflow-wrap:anywhere}
.dzx-sp-sug{display:flex;flex-wrap:wrap;gap:6px}
.dzx-sp-sug i{font-style:normal;font-size:12px;color:var(--muted)}
.dzx-sp-s,.dzx-sp-chip{min-height:32px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:var(--tint);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.dzx-sp-s:hover,.dzx-sp-chip:hover{background:var(--line)}
.dzx-sp-s:focus-visible,.dzx-sp-chip:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.dzx-sp-act{display:flex;gap:6px;flex-wrap:wrap}
.dzx-sp-act .dz-btn2{flex:1 1 auto}
.dzx-sp-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dzx-sp-chip{text-decoration:underline wavy var(--warning);text-underline-offset:3px}
@media (max-width:899px),(pointer:coarse){.dzx-sp-s,.dzx-sp-chip,.dzx-sp-act .dz-btn2{min-height:44px}}
/* 9 Nov 2026 (launch audit F20): the On the Product view shrank to its content (150 px wide on a 1920 px screen, the mug barely visible);
   it takes the room the preview has: up to 760 px for two views, 560 px for one, never wider than the screen or taller than the window */
.dzx-gar-pv{width:min(100%,760px)}.dzx-gar-pv.one{width:min(100%,560px);max-width:560px}.dzx-gar-pv.long{width:min(100%,820px)}
.dzx-gar-pv .dzx-gar-svg{max-height:calc(100vh - 260px);width:100%}
/* THE FOLDING SHEET at Check and Order (x-tentsheet.js, 9 Nov 2026): the flat sheet drawn to scale beside a line on how it is printed and folded */
.dzx-ts{display:flex;gap:18px;align-items:center;margin:4px 0 14px;padding:14px;border-radius:var(--radius);background:var(--panel,#F8F7F4)}
.dzx-ts-sheet{flex:none;width:96px;display:flex;flex-direction:column;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.dzx-ts-p{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.dzx-ts-im{position:absolute;inset:0;display:block}.dzx-ts-im img{width:100%;height:100%;object-fit:cover;display:block}
.dzx-ts-back .dzx-ts-im{transform:rotate(180deg)}
.dzx-ts-p em{position:relative;z-index:1;font-style:normal;font-size:8.5px;line-height:1.2;text-align:center;padding:2px 3px;background:rgba(255,255,255,.86);border-radius:var(--radius-sm,3px);color:var(--ink)}
.dzx-ts-p:not(.dzx-ts-flap) em{position:absolute;bottom:3px;left:3px;right:3px}
.dzx-ts-flap{background:repeating-linear-gradient(135deg,#F2F1EC 0 4px,#fff 4px 8px)}
.dzx-ts-c{height:0;border-top:1.5px dashed #9A9AA5}
.dzx-ts-t b{display:block;font-size:14px;font-weight:500;margin:0 0 4px}.dzx-ts-t p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media (max-width:480px){.dzx-ts{flex-direction:column;align-items:flex-start}}

/* YOUR OWN SIZE, YOUR OWN SHAPE (9 Nov 2026): the shape choice under Your Own Size for stickers and labels */
.dz-menu-cu .dz-cu-shape{grid-column:1/-1;order:2;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 2px}
.dz-cu-shape button{display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card,#fff);color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.dz-cu-shape button[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.dz-cu-shape i{flex:none;width:16px;height:12px;border:1.5px solid currentColor;border-radius:2px}
.dz-cu-shape i.cs-c{width:14px;height:14px;border-radius:50%}