/* zemix Studio overlay — only ever loaded on preview pages */
:root{--zs-uv:#9B7BFF;--zs-mint:#3FE0C5;--zs-ink:#0B0B10}
/* motion freeze while editing: everything visible, nothing moves */
html.zs-editing [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
/* animations jump to their final frame (never frozen half-way, never hidden) */
html.zs-editing *,html.zs-editing *::before,html.zs-editing *::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
/* whatever holds editable text is always visible while editing: no masks, no fades */
/* scroll-reveal masks never hide a FIELD slot; automatic text slots (t:) keep the site's own show/hide (menu, rotating items, rail labels) */
html.zs-editing :has(z-slot:not([data-z-edit^="t:"])):not(.menu,.menu *),html.zs-editing z-slot:not([data-z-edit^="t:"]):not(.menu *){-webkit-mask-image:none!important;mask-image:none!important;opacity:1!important;visibility:visible!important}
html.zs-editing .chrome{opacity:1!important}
html.zs-editing .forging{animation:none!important}
html.zs-editing .cursor{display:none!important}

z-slot[data-z-edit]{cursor:text;border-radius:4px;outline:1px dashed transparent;outline-offset:4px;transition:outline-color .4s}
z-slot[data-z-edit]:hover,z-slot[data-z-edit]:focus-visible{outline-color:rgba(155,123,255,.75)}
z-slot.zs-on{outline:1.5px solid var(--zs-uv)!important;background:rgba(155,123,255,.08);caret-color:var(--zs-mint)}
z-slot.zs-saving{outline:1.5px solid rgba(63,224,197,.5)!important}
z-slot.zs-ok{outline:1.5px solid var(--zs-mint)!important}
z-slot.zs-bad{outline:1.5px solid #ff6b81!important}
z-slot[data-z-money]{cursor:pointer;border-bottom:1.5px dotted rgba(63,224,197,.85)}
z-slot.zs-hl{background:rgba(63,224,197,.22);box-shadow:0 0 0 4px rgba(63,224,197,.22);border-radius:4px}


.zs-pop{position:absolute;z-index:2147483001;width:min(360px,calc(100vw - 24px));padding:22px;border-radius:18px;background:var(--zs-ink);border:1px solid rgba(63,224,197,.45);box-shadow:0 30px 80px rgba(0,0,0,.55);font-family:inherit}
.zs-pop-h{font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:#a9a6c4}
.zs-pop-v{font-size:34px;font-weight:600;margin:4px 0 8px}
.zs-pop-p{font-size:16px;color:#c9c6e0;margin:0 0 16px;text-wrap:balance}
/* every Studio control inside the site preview speaks the page's own type, never the browser's default bold */
.zs-pop button,.zs-pop input,.zs-tool,.zs-add,.zs-plus,.zs-ins,.zs-lockb,.zs-move{font-family:inherit;letter-spacing:.005em}
.zs-tool,.zs-add,.zs-plus{font-size:16px;font-weight:500;line-height:1;white-space:nowrap}
/* number field: our own stepper, the browser spinner is gone (arrow keys still step) */
.zs-step{position:relative}
.zs-pop-in{width:100%;height:52px;padding:0 112px 0 16px;border-radius:12px;border:1px solid rgba(155,123,255,.5);background:#14141c;color:#fff;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield;transition:border-color .5s cubic-bezier(.22,.8,.18,1)}
.zs-pop-in::-webkit-inner-spin-button,.zs-pop-in::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.zs-pop-in:focus{outline:2px solid var(--zs-mint);outline-offset:2px}
.zs-step-b{position:absolute;top:7px;width:40px;height:38px;display:grid;place-items:center;border-radius:9px;border:1px solid rgba(244,242,255,.16);background:rgba(244,242,255,.04);color:#f4f2ff;cursor:pointer;padding:0;transition:border-color .5s cubic-bezier(.22,.8,.18,1),background .5s cubic-bezier(.22,.8,.18,1)}
.zs-step-b::before,.zs-step-b.up::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
.zs-step-b.up::after{width:1.6px;height:12px}
.zs-step-b.down{right:52px}.zs-step-b.up{right:7px}
.zs-step-b:hover{border-color:rgba(63,224,197,.6);background:rgba(63,224,197,.08)}
.zs-step-b:focus-visible{outline:2px solid var(--zs-mint);outline-offset:2px}
/* one button family: same height, radius and type; the primary is filled mint, the secondary a quiet outline */
.zs-pop-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.zs-btn{display:inline-flex;align-items:center;justify-content:center;min-width:0;height:48px;padding:0 22px;border-radius:12px;border:1px solid transparent;font-size:16px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background .5s cubic-bezier(.22,.8,.18,1),border-color .5s cubic-bezier(.22,.8,.18,1),box-shadow .5s cubic-bezier(.22,.8,.18,1),color .5s}
.zs-btn:not(.ghost){background:var(--zs-mint);color:#04110E;border-color:var(--zs-mint);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 10px 26px -14px rgba(63,224,197,.55)}
.zs-btn:not(.ghost):hover{background:#6FEBD6;border-color:#6FEBD6}
.zs-btn.ghost{background:rgba(244,242,255,.03);color:#f4f2ff;border-color:rgba(244,242,255,.22);font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.zs-btn.ghost:hover{border-color:rgba(155,123,255,.6);background:rgba(155,123,255,.08)}
.zs-btn:focus-visible{outline:2px solid var(--zs-mint);outline-offset:3px}

.zs-card,.zs-block{position:relative}
.zs-card:hover{outline:1px solid rgba(155,123,255,.55);outline-offset:6px;border-radius:6px}
.zs-block:hover{outline:1px dashed rgba(155,123,255,.5);outline-offset:-6px}
.zs-tools{position:absolute;z-index:50;top:10px;right:10px;display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(11,11,16,.92);border:1px solid rgba(155,123,255,.45);opacity:0;pointer-events:none;transition:opacity .3s}
.zs-card:hover>.zs-tools,.zs-card:focus-within>.zs-tools,.zs-block:hover>.zs-tools,.zs-block:focus-within>.zs-tools{opacity:1;pointer-events:auto}
.zs-tools-block{top:18px;right:50%;transform:translateX(50%)}
.zs-tool{min-width:34px;height:32px;padding:0 10px;border-radius:8px;background:transparent;color:#f4f2ff;border:0;cursor:pointer}
.zs-tool:hover{background:rgba(155,123,255,.25)}
.zs-drag{opacity:.45}
.zs-add{display:block;margin:28px auto 0;height:52px;padding:0 28px;border-radius:999px;border:1.5px dashed rgba(63,224,197,.7);background:rgba(63,224,197,.06);color:#c8fff4;cursor:pointer}
.zs-add:hover{background:rgba(63,224,197,.14)}
.zs-plus{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);z-index:51;height:36px;padding:0 18px;border-radius:999px;background:var(--zs-ink);border:1px solid rgba(63,224,197,.6);color:#c8fff4;cursor:pointer;opacity:0;transition:opacity .3s}
.zs-block:hover>.zs-plus{opacity:1}

/* ===== round 5: scrollbars, pro mode handles, guides, «add a block here» ===== */
html{scrollbar-width:thin;scrollbar-color:rgba(63,224,197,.4) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{border-radius:8px;border:2px solid transparent;background:linear-gradient(180deg,rgba(155,123,255,.6),rgba(63,224,197,.6)) padding-box}
.zs-lockb,.zs-move{position:fixed;z-index:2147482000;width:32px;height:32px;border-radius:10px;border:1px solid rgba(155,123,255,.6);background:#14141c;color:#cbbcff;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.zs-lockb::before,.zs-move::before{content:"";position:absolute;inset:7px;background:currentColor;-webkit-mask:var(--zs-ico) center/contain no-repeat;mask:var(--zs-ico) center/contain no-repeat}
.zs-lockb{--zs-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 11h12v9H6z M9 11V8a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E")}
.zs-move{cursor:grab;border-color:rgba(63,224,197,.7);color:#a8f5e7;--zs-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 3v18 M3 12h18 M12 3l-3 3 M12 3l3 3 M12 21l-3-3 M12 21l3-3 M3 12l3-3 M3 12l3 3 M21 12l-3-3 M21 12l-3 3'/%3E%3C/svg%3E")}
.zs-move:active{cursor:grabbing}
html[data-zs-pro=unlocked] [data-zl]:hover{outline:1px dashed rgba(63,224,197,.55);outline-offset:6px}
html[data-zs-pro=locked] [data-zl]:hover{outline:1px dashed rgba(155,123,255,.45);outline-offset:6px}
.zs-dragging{outline:1px solid #3fe0c5 !important;outline-offset:6px}
.zs-overlap{outline:2px solid #ff6b81 !important;outline-offset:6px}
.zs-guide{position:fixed;z-index:2147481000;width:1px;background:#3fe0c5;box-shadow:0 0 0 1px rgba(63,224,197,.25);pointer-events:none}
.zs-overlap-note{position:fixed;z-index:2147482100;padding:6px 12px;border-radius:999px;background:#ff6b81;color:#14070b;font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;pointer-events:none}
.zs-ins{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:30;height:36px;padding:0 16px;border-radius:999px;border:1px dashed rgba(63,224,197,.7);background:rgba(10,10,14,.88);color:#bff8ec;font-family:inherit;font-size:16px;font-weight:500;line-height:1;cursor:pointer;opacity:0;transition:opacity .4s}
section:hover>.zs-ins,main:hover>.zs-ins,.zs-ins:focus-visible{opacity:1}
/* green light: the spot to fix, lit calmly (the editing mode switches animations off, so the light is still) */
.zs-gl{outline:2px solid var(--zs-mint)!important;outline-offset:6px!important;border-radius:6px;box-shadow:0 0 0 10px rgba(63,224,197,.14),0 0 46px rgba(63,224,197,.28)!important}