/* Zahy design renderer: shared by the home page showcase and the workspace. */
/* Every size is the same component; sizes come from the box, text from container units, so one design
   scales to any canvas (and to full pixels on export). */
.dz{position:relative;overflow:hidden;container-type:size;background:var(--bg);color:var(--tx);font-family:var(--f-display);direction:rtl;isolation:isolate}
.dz .deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.dz .L{position:absolute;z-index:2;font-size:3cqmin}
/* (the font-size scales the line box with the design, so a thumbnail lays out exactly like the export) */
.dz .logo{display:flex}
.dz .bgp{position:absolute;inset:0;background:center/cover no-repeat}
.dz .bgt{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 50%,transparent),color-mix(in srgb,var(--bg) 72%,transparent) 55%,color-mix(in srgb,var(--bg) 92%,transparent))}
.dz .logo img{display:block;height:var(--lh,9cqmin);width:auto;max-width:34cqw;object-fit:contain}
/* on dark backgrounds the uploaded logo sits on a light plate, so a logo that shares the background colour stays visible */
.dz:not(.light) .logo.plate{background:rgba(255,255,255,.94);padding:1.3cqmin 1.9cqmin;border-radius:2.2cqmin;box-shadow:0 1cqmin 3cqmin rgba(0,0,0,.18)}
.dz .logo .wm{display:inline-flex;align-items:center;gap:1.4cqmin;font-weight:700;font-size:calc(var(--lh,9cqmin) * .42);white-space:nowrap}
.dz .logo .wm i{width:calc(var(--lh,9cqmin) * .62);height:calc(var(--lh,9cqmin) * .62);border-radius:28%;background:var(--ac);display:block}
.dz .txt h3{margin:0;font-weight:700;font-size:var(--hs,8.6cqmin);line-height:1.22;letter-spacing:0;text-wrap:balance}
.dz .txt .kick{font-weight:500;font-size:3.4cqmin;opacity:.85;margin-bottom:1.6cqmin}
.dz .txt .cta{display:inline-block;margin-top:3.2cqmin;font-weight:700;font-size:3.2cqmin;padding:1.3cqmin 3.6cqmin;border-radius:99px;background:var(--ac);color:var(--actx)}
.dz .photo{border-radius:50%;z-index:2}
.dz .photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;box-shadow:0 0 0 1cqmin var(--actx),0 2cqmin 6cqmin rgba(0,0,0,.25)}
.dz .photo .nm{position:absolute;left:50%;bottom:-2cqmin;transform:translateX(-50%);white-space:nowrap;font-weight:700;font-size:3cqmin;padding:.9cqmin 2.6cqmin;border-radius:99px;background:var(--actx);color:var(--ac)}
.dz .badge{font-weight:800;font-size:4.8cqmin;padding:1.5cqmin 3.6cqmin;border-radius:99px;background:var(--ac);color:var(--actx);white-space:nowrap}
.dz.t-num .badge{background:none;color:var(--ac2);font-size:var(--ns,17cqmin);padding:0;line-height:1;letter-spacing:-.02em}
.dz .cbar{position:absolute;inset:auto 0 0 0;z-index:3;display:flex;justify-content:center;align-items:center;gap:4.2cqmin;padding:2.3cqmin 4cqmin;font-family:var(--f-body);font-weight:500;font-size:2.7cqmin;direction:rtl;white-space:nowrap}
.dz .cbar span{display:inline-flex;align-items:center;gap:1.2cqmin;direction:ltr;unicode-bidi:isolate}
.dz .cbar span.ar{direction:rtl}
.dz .cbar svg{width:1.15em;height:1.15em;flex:none}
.dz .cbar.icons-filled svg{padding:.22em;width:1.6em;height:1.6em;border-radius:50%;background:var(--ac);color:var(--actx)}
.dz .cbar.solid{background:var(--barbg);color:var(--bartx)}
.dz .cbar.glass{background:rgba(255,255,255,.16);color:var(--tx);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.dz.light .cbar.glass{background:rgba(22,22,24,.06);box-shadow:inset 0 1px 0 rgba(22,22,24,.08)}
.dz .cbar.clear{background:transparent;color:var(--tx)}
.dz .cbar.none{display:none}
/* stories keep the bar above the app's bottom UI (the lowest 17.7% is covered), as a floating pill */
.dz.a-tall .cbar{inset:auto 6cqw 18.5cqh 6cqw;border-radius:99px;font-size:3.1cqmin;padding:2.4cqmin 4cqmin}
.dz.a-tall .cbar.clear{inset-block-end:18.5cqh}
.dz.a-banner .cbar{font-size:4.2cqmin;padding:2.4cqmin 4cqmin}
/* the editor's per-element choices (engine.js applyOverride) */
.dz .L[data-ovf],.dz .L[data-ovf] *{font-family:var(--ov-font)!important}
.dz .L[data-ovc] h3,.dz .L[data-ovc] .kick,.dz .L[data-ovc] .ln,.dz .L[data-ovc] .w1,.dz .L[data-ovc] .w2,.dz .L[data-ovc] .k-fi,.dz .L[data-ovc].badge,.dz .L[data-ovc] .tx,.dz .L[data-ovc] .nm{color:var(--ov-color)!important;-webkit-text-fill-color:var(--ov-color)}
/* (touch-action: a finger on an element moves the element, it doesn't scroll the page) */
.dz.editing .L{cursor:grab;outline:1.5px dashed transparent;outline-offset:4px;border-radius:6px;touch-action:none}
.dz.editing .L:hover{outline-color:rgba(139,61,255,.55)}
.dz.editing .L.drag{cursor:grabbing;outline-color:transparent}
.dz.editing .L.is-locked{cursor:not-allowed}
.dz.editing .L.is-locked:hover{outline-color:rgba(22,22,24,.35)}
.dz.editing [contenteditable]{outline:0;cursor:text}
.dz.editing [contenteditable]:focus{box-shadow:0 0 0 2px rgba(139,61,255,.45);border-radius:6px}

/* covers and banners: the content lives in the safe area, its own container, so cq units follow that area */
.dz .sbox{position:absolute;container-type:size;z-index:2}
/* profile pictures: the logo (or wordmark) alone, big, inside the circle the platform crops to */
.dz.avatar .logo img{height:var(--lh,52cqmin);max-width:96cqw}
.dz.avatar .logo .wm{flex-direction:column;gap:5cqmin;font-size:15cqmin;white-space:normal;text-align:center;line-height:1.2}
.dz.avatar .logo .wm i{width:34cqmin;height:34cqmin}
.dz.avatar:not(.light) .logo.plate{padding:6cqmin;border-radius:50%}
/* editor guides: the safe area of the size, and the unsafe edges shaded */
.dz .guide{position:absolute;z-index:9;pointer-events:none;border:2px dashed rgba(255,255,255,.85);outline:2px dashed rgba(0,0,0,.35);outline-offset:-4px;box-shadow:0 0 0 100vmax rgba(255,59,92,.16)}
.dz .guide.circle{border-radius:50%}
/* AI image designs: the picture is the design; a soft shade keeps the text readable where it sits */
.dz .art{position:absolute;inset:0;background:center/cover no-repeat}
.dz .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.32) 30%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 74%,rgba(0,0,0,.5) 100%)}
.dz.t-img.a-wide .scrim,.dz.t-img.a-banner .scrim{background:linear-gradient(270deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,0) 70%),linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,0) 30%)}
.dz.t-img{--tx:#FFFFFF;color:#FFFFFF}
.dz.t-img .txt h3,.dz.t-img .txt .kick,.dz.t-img .logo .wm{text-shadow:0 .3cqmin 2.2cqmin rgba(0,0,0,.5)}
.dz.t-img .badge{box-shadow:0 1cqmin 3cqmin rgba(0,0,0,.3)}
/* A picture with the featured person in it: they are the hero in the middle, so the title sits over their torso
   under a shade that rises from the bottom (wide sizes keep the shade on the right, where the text is) */
.dz.has-person:not(.a-wide):not(.a-banner) .scrim{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 46%,rgba(0,0,0,.55) 68%,rgba(0,0,0,.82) 100%)}

/* the brand frame picker (home page and workspace): sketches of the logo place and the contact strip */
.fr-grid{display:grid;gap:6px;margin-bottom:10px}.fr-grid:last-child{margin-bottom:2px}
.fr-grid.c3{grid-template-columns:repeat(3,1fr)}.fr-grid.c2{grid-template-columns:repeat(2,1fr)}.fr-grid.c4{grid-template-columns:repeat(4,1fr);gap:5px}
.fr-grid button{border:0;background:#FAF9F7;border-radius:12px;padding:5px 5px 6px;display:grid;gap:5px;justify-items:center;font-size:12px;font-weight:600;color:#3A3A3E;box-shadow:inset 0 0 0 1px rgba(22,22,24,.07);cursor:pointer}
.fr-grid button:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(22,22,24,.16)}
.fr-grid button[aria-checked="true"]{background:#F6F2FF;box-shadow:inset 0 0 0 1.5px var(--violet,#8B3DFF);color:var(--violet,#8B3DFF)}
.fm{position:relative;width:100%;border-radius:8px;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,#5B3BFF 0,transparent 60%),linear-gradient(160deg,#20184A,#0F0C24);color:#fff}
.c3 .fm{aspect-ratio:5/4}.c4 .fm{aspect-ratio:4/3}.c2 .fm{aspect-ratio:16/4}
.fm .lg{position:absolute;top:10%;display:flex;align-items:center;gap:3px;padding:3px 5px;border-radius:5px;background:rgba(255,255,255,.95)}
.fm .lg i{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#2E40FF,#8B3DFF 55%,#FF4D9A)}.fm .lg b{width:16px;height:3px;border-radius:2px;background:#2A2550}
.fm .lg.right{right:8%}.fm .lg.left{left:8%}.fm .lg.center{left:50%;transform:translateX(-50%)}
.fm .tl{position:absolute;inset:42% 14% auto;display:grid;gap:4px;justify-items:center}
.fm .tl i{height:4px;width:100%;border-radius:2px;background:rgba(255,255,255,.75)}.fm .tl i+i{width:65%;background:rgba(255,255,255,.4)}
.fm .cb{position:absolute;inset:auto 0 0 0;display:flex;justify-content:center;align-items:center;gap:9px;padding:5px 6px;color:#fff}
.c4 .fm .cb,.c2 .fm .cb{inset:auto 6% 50% 6%;transform:translateY(50%);border-radius:99px;padding:4px 5px;gap:6px}
.c2 .fm .cb{inset-inline:22%;gap:12px}
.fm .cb svg{width:11px;height:11px;flex:none}
.c4 .fm .cb svg{width:10px;height:10px}
.fm .cb.solid{background:#fff;color:#2A2550}
.fm .cb.glass{background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);backdrop-filter:blur(4px)}
.fm .cb.clear{background:transparent}
.fm .cb.none{visibility:hidden}
.fm .cb.filled svg{box-sizing:content-box;padding:3px;border-radius:50%;background:var(--violet,#8B3DFF);color:#fff}
.fm .off{position:absolute;inset:auto 6% 50% 6%;transform:translateY(50%);height:18px;border-radius:99px;border:1.5px dashed rgba(255,255,255,.35)}