/* ==========================================================================
   Zoetrope by ZingLab — design system
   One set of tokens and components for every page: the three editors share
   the app shell (app bar, menus, tool strip, options bar, panel dock, status
   bar), and the marketing pages share the same palette, type and controls.
   ========================================================================== */

:root{
  /* surfaces, darkest → lightest */
  --z-bg:#0e0e10;          /* pasteboard behind the canvas */
  --z-bg-1:#141416;        /* app chrome: app bar, status bar */
  --z-bg-2:#1a1a1d;        /* panels */
  --z-bg-3:#212125;        /* inputs, panel headers */
  --z-bg-4:#29292e;        /* hover */
  --z-bg-5:#323238;        /* pressed / selected */
  --z-line:#26262b;        /* hairlines between regions */
  --z-line-2:#34343b;      /* control borders */
  --z-line-3:#45454d;
  --z-text:#ececef;
  --z-text-2:#a3a3ad;
  --z-text-3:#6c6c76;
  --z-accent:#4f8cff;
  --z-accent-2:#6c9fff;
  --z-accent-ink:#ffffff;
  --z-accent-soft:rgba(79,140,255,.14);
  --z-accent-line:rgba(79,140,255,.6);
  --z-danger:#f05252;
  --z-warn:#f5a524;
  --z-ok:#34c77b;
  --z-playhead:#ff5b5b;
  --z-pro-1:#f7cf7a;
  --z-pro-2:#e38f3c;
  /* app identity colors — used for app icons only */
  --z-app-gif:#2dd4bf;
  --z-app-creator:#fbbf24;
  --z-app-animator:#a78bfa;

  --z-sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --z-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --z-r-sm:4px; --z-r:6px; --z-r-lg:10px;
  --z-shadow-pop:0 12px 32px -8px rgba(0,0,0,.6), 0 0 0 1px var(--z-line-2);
  --z-shadow-dialog:0 30px 80px -20px rgba(0,0,0,.75), 0 0 0 1px var(--z-line-2);
  --z-appbar-h:40px; --z-options-h:38px; --z-status-h:26px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--z-bg-2);color:var(--z-text);font-family:var(--z-sans);
  font-size:12px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss01';
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--z-accent-2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--z-accent);outline-offset:1px}
::selection{background:var(--z-accent);color:#fff}
[hidden]{display:none !important}
.z-mono{font-family:var(--z-mono);font-variant-numeric:tabular-nums}
.z-dim{color:var(--z-text-2)}
.z-faint{color:var(--z-text-3)}
.z-num{font-variant-numeric:tabular-nums}
.z-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.z-grow{flex:1;min-width:0}

/* thin, quiet scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--z-bg-5) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--z-bg-5);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--z-line-3);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}

/* ---------- brand ---------- */
.z-logo{display:inline-flex;align-items:center;gap:8px;color:var(--z-text);text-decoration:none;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.z-logo:hover{text-decoration:none}
.z-mark{width:20px;height:20px;flex:none;display:block}
.z-logo .z-logo-by{font-weight:500;color:var(--z-text-3);font-size:11px;letter-spacing:0}

/* ---------- buttons ---------- */
.z-btn{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:28px;padding:0 10px;border-radius:var(--z-r-sm);border:1px solid var(--z-line-2);
  background:var(--z-bg-3);color:var(--z-text);font-size:12px;font-weight:500;white-space:nowrap;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s;text-decoration:none;
}
.z-btn:hover{background:var(--z-bg-4);border-color:var(--z-line-3);text-decoration:none}
.z-btn:active{background:var(--z-bg-5)}
.z-btn:disabled,.z-btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.z-btn.primary{background:var(--z-accent);border-color:var(--z-accent);color:var(--z-accent-ink)}
.z-btn.primary:hover{background:var(--z-accent-2);border-color:var(--z-accent-2)}
.z-btn.ghost{background:transparent;border-color:transparent;color:var(--z-text-2)}
.z-btn.ghost:hover{background:var(--z-bg-4);color:var(--z-text)}
.z-btn.danger{color:var(--z-danger)}
.z-btn.danger:hover{border-color:var(--z-danger)}
.z-btn.block{width:100%}
.z-btn.sm{height:24px;padding:0 8px;font-size:11.5px}
.z-btn.lg{height:36px;padding:0 16px;font-size:13px;border-radius:var(--z-r)}
.z-btn.xl{height:44px;padding:0 22px;font-size:14px;font-weight:600;border-radius:var(--z-r)}
.z-btn svg{width:15px;height:15px;flex:none}
.z-icon-btn{
  appearance:none;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;flex:none;
  border:1px solid transparent;border-radius:var(--z-r-sm);background:transparent;color:var(--z-text-2);cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.z-icon-btn:hover{background:var(--z-bg-4);color:var(--z-text)}
.z-icon-btn:active{background:var(--z-bg-5)}
.z-icon-btn.active,.z-icon-btn[aria-pressed="true"]{background:var(--z-accent-soft);color:var(--z-accent-2);border-color:transparent}
.z-icon-btn:disabled{opacity:.35;pointer-events:none}
.z-icon-btn svg{width:16px;height:16px}
.z-icon-btn.sm{width:22px;height:22px}
.z-icon-btn.sm svg{width:14px;height:14px}
.z-icon-btn.bordered{border-color:var(--z-line-2);background:var(--z-bg-3)}

/* ---------- form controls ---------- */
.z-input,.z-select,.z-textarea{
  height:26px;width:100%;min-width:0;padding:0 8px;border-radius:var(--z-r-sm);
  background:var(--z-bg);border:1px solid var(--z-line-2);color:var(--z-text);font-size:12px;
  transition:border-color .12s;
}
.z-textarea{height:auto;min-height:64px;padding:6px 8px;resize:vertical;line-height:1.4}
.z-input:hover,.z-select:hover,.z-textarea:hover{border-color:var(--z-line-3)}
.z-input:focus,.z-select:focus,.z-textarea:focus{outline:none;border-color:var(--z-accent)}
.z-input.mono{font-family:var(--z-mono);font-size:11.5px}
.z-select{appearance:none;padding-right:22px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center}
.z-select option{background:var(--z-bg-2);color:var(--z-text)}
input[type=number].z-input::-webkit-inner-spin-button{opacity:.4}

.z-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;min-width:0}
.z-field:last-child{margin-bottom:0}
.z-field > label,.z-label{font-size:11px;color:var(--z-text-2);display:flex;align-items:center;justify-content:space-between;gap:8px}
.z-label .z-val{color:var(--z-text);font-variant-numeric:tabular-nums;font-family:var(--z-mono);font-size:10.5px}
.z-row{display:flex;gap:8px;align-items:center}
.z-row > .z-field{flex:1;margin-bottom:0}
.z-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.z-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.z-inline{display:flex;align-items:center;gap:6px}
.z-hint{font-size:11px;color:var(--z-text-3);line-height:1.45;margin:6px 0 0}
.z-hint.warn{color:var(--z-warn)}
.z-sep{height:1px;background:var(--z-line);margin:10px 0;border:0}
.z-vsep{width:1px;align-self:stretch;background:var(--z-line-2);margin:6px 4px;flex:none}

/* range slider */
.z-range{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer;margin:0}
.z-range::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--z-accent) 0 var(--p,50%),var(--z-bg-5) var(--p,50%) 100%)}
.z-range::-moz-range-track{height:3px;border-radius:3px;background:var(--z-bg-5)}
.z-range::-moz-range-progress{height:3px;border-radius:3px;background:var(--z-accent)}
.z-range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.5)}
.z-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.z-range:focus-visible{outline:none}
.z-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--z-accent-soft),0 0 0 1px var(--z-accent)}

/* slider + numeric readout in one row */
.z-slider{display:grid;grid-template-columns:1fr 52px;gap:8px;align-items:center}
.z-slider .z-input{height:22px;padding:0 6px;text-align:right;font-family:var(--z-mono);font-size:11px}

/* checkbox + switch */
.z-check{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--z-text);font-size:12px;user-select:none}
.z-check input{appearance:none;width:14px;height:14px;margin:0;border-radius:3px;border:1px solid var(--z-line-3);background:var(--z-bg);display:grid;place-items:center;cursor:pointer;flex:none}
.z-check input:checked{background:var(--z-accent);border-color:var(--z-accent)}
.z-check input:checked::after{content:'';width:8px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.z-switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;user-select:none}
.z-switch input{appearance:none;width:26px;height:15px;border-radius:15px;background:var(--z-bg-5);margin:0;cursor:pointer;position:relative;transition:background .15s;flex:none}
.z-switch input::after{content:'';position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:transform .15s}
.z-switch input:checked{background:var(--z-accent)}
.z-switch input:checked::after{transform:translateX(11px)}

/* segmented control */
.z-seg{display:inline-flex;padding:2px;gap:2px;background:var(--z-bg);border:1px solid var(--z-line-2);border-radius:var(--z-r-sm)}
.z-seg button{appearance:none;border:0;background:transparent;color:var(--z-text-2);height:22px;padding:0 8px;border-radius:3px;font-size:11.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.z-seg button:hover{color:var(--z-text)}
.z-seg button.active{background:var(--z-bg-5);color:var(--z-text);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.z-seg button svg{width:14px;height:14px}
.z-seg.block{display:flex}
.z-seg.block button{flex:1;justify-content:center}

/* keyboard hint */
.z-kbd{font-family:var(--z-sans);font-size:10.5px;color:var(--z-text-3);letter-spacing:.02em;white-space:nowrap}
kbd.z-key{display:inline-block;min-width:18px;padding:1px 5px;border-radius:3px;border:1px solid var(--z-line-2);border-bottom-width:2px;background:var(--z-bg-3);font-family:var(--z-sans);font-size:10.5px;color:var(--z-text);text-align:center;line-height:1.5}

/* badges */
.z-badge{display:inline-flex;align-items:center;gap:3px;height:16px;padding:0 5px;border-radius:3px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap}
.z-badge.pro{background:linear-gradient(135deg,var(--z-pro-1),var(--z-pro-2));color:#2a1702}
.z-badge.free{background:var(--z-bg-5);color:var(--z-text-2)}
.z-badge.new{background:var(--z-accent-soft);color:var(--z-accent-2)}

/* swatches + transparency */
.z-checker{
  background-color:#d6d7db;
  background-image:linear-gradient(45deg,#b8b9bf 25%,transparent 25%,transparent 75%,#b8b9bf 75%),
                   linear-gradient(45deg,#b8b9bf 25%,transparent 25%,transparent 75%,#b8b9bf 75%);
  background-size:8px 8px;background-position:0 0,4px 4px;
}
.z-checker.dark{background-color:#3a3a40;background-image:linear-gradient(45deg,#2c2c31 25%,transparent 25%,transparent 75%,#2c2c31 75%),linear-gradient(45deg,#2c2c31 25%,transparent 25%,transparent 75%,#2c2c31 75%)}

/* ==========================================================================
   APP SHELL
   ========================================================================== */
body.z-app{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;background:var(--z-bg-1);user-select:none}
body.z-app input,body.z-app textarea{user-select:text}

.z-appbar{
  height:var(--z-appbar-h);flex:none;display:flex;align-items:center;gap:6px;padding:0 8px 0 12px;
  background:var(--z-bg-1);border-bottom:1px solid var(--z-line);position:relative;z-index:30;
}
.z-appbar .z-logo{margin-right:6px;font-size:13px}
.z-appbar-title{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--z-text-2);font-size:12px}
.z-doc-name{appearance:none;background:transparent;border:1px solid transparent;border-radius:var(--z-r-sm);color:var(--z-text);font-weight:500;height:24px;padding:0 6px;min-width:60px;max-width:280px;text-align:center;font-size:12px}
.z-doc-name:hover{border-color:var(--z-line-2)}
.z-doc-name:focus{outline:none;border-color:var(--z-accent);background:var(--z-bg)}
.z-save-state{display:inline-flex;align-items:center;gap:5px;color:var(--z-text-3);font-size:11px;white-space:nowrap}
.z-save-state::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--z-ok)}
.z-save-state.dirty::before{background:var(--z-warn)}
.z-appbar-right{display:flex;align-items:center;gap:6px}

/* menubar */
.z-menubar{display:flex;align-items:center;gap:1px}
.z-menubar > button{appearance:none;border:0;background:transparent;color:var(--z-text-2);height:26px;padding:0 9px;border-radius:var(--z-r-sm);font-size:12px;cursor:default}
.z-menubar > button:hover,.z-menubar > button.open{background:var(--z-bg-4);color:var(--z-text)}

/* app switcher */
.z-apps{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--z-line);border-radius:var(--z-r);background:var(--z-bg)}
.z-app-link{display:flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 6px;border-radius:4px;color:var(--z-text-2);font-size:11.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.z-app-link:hover{background:var(--z-bg-4);color:var(--z-text);text-decoration:none}
.z-app-link.current{background:var(--z-bg-5);color:var(--z-text)}
.z-app-ico{width:16px;height:16px;border-radius:4px;display:grid;place-items:center;flex:none;color:#0b0b0d}
.z-app-ico svg{width:11px;height:11px;stroke-width:2.4}
.z-app-ico.gif{background:var(--z-app-gif)}
.z-app-ico.creator{background:var(--z-app-creator)}
.z-app-ico.animator{background:var(--z-app-animator)}

/* account button (filled in by zoetrope-auth.js) */
.zt-account{appearance:none;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px 0 4px;border:1px solid var(--z-line-2);border-radius:14px;background:var(--z-bg-3);color:var(--z-text);font-size:11.5px;font-weight:500;cursor:pointer;max-width:220px}
.zt-account:hover{border-color:var(--z-line-3);background:var(--z-bg-4)}
.zt-account.signed-out{padding:0 12px;background:transparent}
.zt-avatar{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--z-accent),#8b5cf6);color:#fff;font-size:10px;font-weight:700;flex:none;text-transform:uppercase}
.zt-acct-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* options bar */
.z-optionsbar{
  height:var(--z-options-h);flex:none;display:flex;align-items:center;gap:8px;padding:0 10px;
  background:var(--z-bg-2);border-bottom:1px solid var(--z-line);overflow-x:auto;overflow-y:hidden;white-space:nowrap;
}
.z-optionsbar::-webkit-scrollbar{height:0}
.z-opt-tool{display:flex;align-items:center;gap:7px;padding-right:10px;margin-right:2px;border-right:1px solid var(--z-line-2);height:22px;font-weight:600;font-size:12px}
.z-opt-tool svg{width:16px;height:16px;color:var(--z-text-2)}
.z-opt{display:flex;align-items:center;gap:6px;color:var(--z-text-2);font-size:11.5px}
.z-opt .z-input,.z-opt .z-select{height:24px;width:auto}
.z-opt input[type=number].z-input{width:54px;text-align:right;font-family:var(--z-mono);font-size:11px}
.z-opt .z-range{width:90px}

/* workspace */
.z-workspace{flex:1;min-height:0;display:flex;position:relative}
.z-toolbar{
  width:44px;flex:none;background:var(--z-bg-2);border-right:1px solid var(--z-line);display:flex;flex-direction:column;
  align-items:center;gap:2px;padding:8px 0;overflow-y:auto;overflow-x:hidden;
}
.z-toolbar .z-icon-btn{width:32px;height:32px;border-radius:5px;position:relative}
.z-toolbar .z-icon-btn svg{width:18px;height:18px}
.z-toolbar .z-tool-sep{width:22px;height:1px;background:var(--z-line-2);margin:5px 0;flex:none}
.z-colorwell{position:relative;width:34px;height:34px;margin-top:8px;flex:none}
.z-colorwell .z-cw{position:absolute;width:22px;height:22px;border-radius:4px;border:2px solid var(--z-bg-1);box-shadow:0 0 0 1px var(--z-line-3);cursor:pointer;padding:0}
.z-colorwell .z-cw.primary{left:0;top:0;z-index:2}
.z-colorwell .z-cw.secondary{right:0;bottom:0}
.z-colorwell .z-cw.transparent{background:var(--z-bg) !important}
.z-cw-actions{display:flex;gap:2px;margin-top:3px}
.z-cw-actions .z-icon-btn{width:16px;height:16px;border-radius:3px}
.z-cw-actions .z-icon-btn svg{width:11px;height:11px}

.z-stage{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;background:var(--z-bg)}
.z-viewport{flex:1;min-height:0;position:relative;overflow:hidden;cursor:crosshair;touch-action:none;outline:none}
.z-viewport:focus,.z-viewport:focus-visible{outline:none}
.z-viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.z-viewport.tool-hand,.z-viewport.panning{cursor:grab}
.z-viewport.panning.dragging{cursor:grabbing}
.z-viewport.tool-move{cursor:move}
.z-viewport.tool-zoom{cursor:zoom-in}
.z-viewport.tool-zoom.alt{cursor:zoom-out}
.z-viewport-empty{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}

.z-dock{
  width:284px;flex:none;background:var(--z-bg-2);border-left:1px solid var(--z-line);display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
}
.z-dock.wide{width:300px}
.z-panel{border-bottom:1px solid var(--z-line);flex:none}
.z-panel-head{
  height:30px;display:flex;align-items:center;gap:6px;padding:0 6px 0 10px;cursor:default;
  font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--z-text);user-select:none;
}
.z-panel-head .z-panel-title{flex:1;display:flex;align-items:center;gap:6px;cursor:pointer;min-width:0;white-space:nowrap}
.z-panel-head .z-panel-title::before{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--z-text-3);transition:transform .12s;flex:none}
.z-panel.collapsed .z-panel-title::before{transform:rotate(-90deg)}
.z-panel.collapsed .z-panel-body{display:none}
.z-panel-head .z-panel-actions{display:flex;align-items:center;gap:1px}
.z-panel-body{padding:4px 10px 12px}
.z-panel-body.flush{padding:0 0 6px}
.z-panel.grow{flex:1;min-height:170px;display:flex;flex-direction:column}
.z-panel.grow .z-panel-body{flex:1;min-height:0;overflow:auto}
.z-panel-tabs{flex:1;display:flex;align-items:stretch;gap:2px;height:100%;min-width:0}
.z-panel-tabs button{appearance:none;border:0;background:transparent;color:var(--z-text-3);font:inherit;font-weight:600;padding:0 8px;cursor:pointer;position:relative;white-space:nowrap}
.z-panel-tabs button:hover{color:var(--z-text-2)}
.z-panel-tabs button.active{color:var(--z-text)}
.z-panel-tabs button.active::after{content:'';position:absolute;left:8px;right:8px;bottom:0;height:2px;border-radius:2px;background:var(--z-accent)}
.z-tabbed .z-panel-head{padding-left:2px;border-bottom:1px solid var(--z-line)}
.z-tabbed .z-tab-pane > .z-panel-body{padding-top:8px}

.z-statusbar{
  height:var(--z-status-h);flex:none;display:flex;align-items:center;gap:0;padding:0 4px;
  background:var(--z-bg-1);border-top:1px solid var(--z-line);color:var(--z-text-2);font-size:11px;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;
}
.z-statusbar > span{display:inline-flex;align-items:center;gap:5px;padding:0 10px;height:100%;border-right:1px solid var(--z-line)}
.z-statusbar > span:last-child{border-right:0}
.z-statusbar .z-grow{border-right:0;overflow:hidden;text-overflow:ellipsis;color:var(--z-text-3)}
.z-statusbar svg{width:12px;height:12px}
.z-status-swatch{width:10px;height:10px;border-radius:2px;box-shadow:0 0 0 1px var(--z-line-3)}
.z-statusbar button{appearance:none;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0 2px;height:100%}
.z-statusbar button:hover{color:var(--z-text)}

/* ---------- menus / popovers ---------- */
.z-menu{
  position:fixed;z-index:1100;min-width:220px;max-width:320px;padding:4px;border-radius:var(--z-r);
  background:var(--z-bg-3);box-shadow:var(--z-shadow-pop);font-size:12px;color:var(--z-text);
  max-height:calc(100vh - 16px);overflow-y:auto;
}
.z-menu-item{display:flex;align-items:center;gap:8px;height:26px;padding:0 8px 0 6px;border-radius:4px;cursor:default;white-space:nowrap}
.z-menu-item .z-mi-check{width:14px;display:grid;place-items:center;color:var(--z-accent-2);flex:none}
.z-menu-item .z-mi-check svg{width:12px;height:12px}
.z-menu-item .z-mi-icon{width:14px;height:14px;color:var(--z-text-2);flex:none}
.z-menu-item .z-mi-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.z-menu-item .z-mi-key{color:var(--z-text-3);font-size:11px;margin-left:18px}
.z-menu-item .z-mi-sub{color:var(--z-text-3);display:grid}
.z-menu-item .z-mi-sub svg{width:12px;height:12px}
.z-menu-item:hover,.z-menu-item.hover{background:var(--z-accent);color:#fff}
.z-menu-item:hover .z-mi-key,.z-menu-item:hover .z-mi-icon,.z-menu-item:hover .z-mi-check,.z-menu-item:hover .z-mi-sub,
.z-menu-item.hover .z-mi-key,.z-menu-item.hover .z-mi-icon,.z-menu-item.hover .z-mi-check,.z-menu-item.hover .z-mi-sub{color:#fff}
.z-menu-item.disabled{opacity:.38;pointer-events:none}
.z-menu-sep{height:1px;background:var(--z-line-2);margin:4px 6px}
.z-menu-heading{padding:6px 8px 3px 28px;font-size:10.5px;color:var(--z-text-3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}

.z-popover{position:fixed;z-index:1050;padding:10px;border-radius:var(--z-r);background:var(--z-bg-3);box-shadow:var(--z-shadow-pop)}

/* ---------- tooltip ---------- */
.z-tip{
  position:fixed;z-index:1200;pointer-events:none;padding:5px 8px;border-radius:4px;background:#0a0a0c;color:var(--z-text);
  font-size:11.5px;box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 1px var(--z-line-2);white-space:nowrap;
  opacity:0;transform:translateY(2px);transition:opacity .1s,transform .1s;
}
.z-tip.show{opacity:1;transform:none}
.z-tip .z-kbd{margin-left:8px}
.z-tip small{display:block;color:var(--z-text-2);font-size:11px;margin-top:2px;white-space:normal;max-width:240px}

/* ---------- dialogs ---------- */
.z-dialog-layer{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,4,6,.6);backdrop-filter:blur(2px);animation:zFade .12s ease-out;
}
@keyframes zFade{from{opacity:0}}
@keyframes zRise{from{opacity:0;transform:translateY(6px) scale(.99)}}
.z-dialog{
  width:100%;max-width:440px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;
  background:var(--z-bg-2);border-radius:var(--z-r-lg);box-shadow:var(--z-shadow-dialog);animation:zRise .16s ease-out;
}
.z-dialog.wide{max-width:720px}
.z-dialog.xwide{max-width:960px}
.z-dialog-head{display:flex;align-items:center;gap:10px;padding:14px 14px 10px 18px}
.z-dialog-head h2{margin:0;font-size:14px;font-weight:600;flex:1}
.z-dialog-body{padding:4px 18px 16px;overflow:auto;min-height:0}
.z-dialog-body p{margin:0 0 10px;color:var(--z-text-2);line-height:1.55}
.z-dialog-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--z-line)}
.z-dialog-foot .z-grow{color:var(--z-text-3);font-size:11px}

/* ---------- toasts ---------- */
.z-toasts{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:1300;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.z-toast{
  pointer-events:auto;display:flex;align-items:center;gap:10px;min-height:34px;padding:6px 8px 6px 12px;border-radius:var(--z-r);
  background:#f2f2f4;color:#111114;font-size:12px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:zRise .16s ease-out;max-width:560px;
}
.z-toast.warn{background:#fde8c8}
.z-toast.error{background:#fcd4d4}
.z-toast button{appearance:none;border:0;background:rgba(0,0,0,.08);color:#111;font:inherit;font-weight:600;height:24px;padding:0 9px;border-radius:4px;cursor:pointer}
.z-toast button:hover{background:rgba(0,0,0,.14)}
.z-toast .z-toast-x{background:none;padding:0 4px;color:#555}

/* ---------- drop zone ---------- */
.z-drop{
  border:1px dashed var(--z-line-3);border-radius:var(--z-r);padding:18px 12px;text-align:center;color:var(--z-text-2);
  cursor:pointer;transition:border-color .12s,background .12s;font-size:12px;
}
.z-drop:hover,.z-drop.over{border-color:var(--z-accent);background:var(--z-accent-soft);color:var(--z-text)}
.z-drop b{display:block;color:var(--z-text);font-weight:600;margin-bottom:2px}
.z-drop svg{width:22px;height:22px;color:var(--z-text-3);margin-bottom:6px}
.z-drag-veil{position:fixed;inset:0;z-index:900;pointer-events:none;border:2px solid var(--z-accent);background:rgba(79,140,255,.08);display:none}
.z-drag-veil.on{display:block}

/* ---------- lists (layers etc.) ---------- */
.z-list{display:flex;flex-direction:column}
.z-list-row{
  display:flex;align-items:center;gap:6px;height:34px;padding:0 6px 0 4px;border-bottom:1px solid var(--z-line);cursor:default;position:relative;
}
.z-list-row:hover{background:var(--z-bg-3)}
.z-list-row.active{background:var(--z-accent-soft)}
.z-list-row.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--z-accent)}
.z-list-row .z-thumb{width:26px;height:26px;border-radius:3px;flex:none;box-shadow:0 0 0 1px var(--z-line-2);image-rendering:pixelated}
.z-list-row .z-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.z-list-row .z-name small{display:block;color:var(--z-text-3);font-size:10.5px}
.z-list-row input.z-rename{height:22px;font-size:12px}
.z-list-row.dim .z-thumb,.z-list-row.dim .z-name{opacity:.45}
.z-list-row.drop-above{box-shadow:inset 0 2px 0 var(--z-accent)}
.z-list-row.drop-below{box-shadow:inset 0 -2px 0 var(--z-accent)}
.z-list-row .z-icon-btn{width:22px;height:22px;color:var(--z-text-3)}
.z-list-row .z-icon-btn:hover{color:var(--z-text)}
.z-list-row .z-icon-btn svg{width:14px;height:14px}
.z-list-row .z-icon-btn.off{color:var(--z-text-3);opacity:.6}
.z-panel-foot{display:flex;align-items:center;gap:2px;padding:4px 6px;border-top:1px solid var(--z-line)}
.z-empty{padding:18px 12px;text-align:center;color:var(--z-text-3);font-size:11.5px;line-height:1.5}

/* ---------- palette swatches ---------- */
.z-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(20px,1fr));gap:3px}
.z-sw{aspect-ratio:1;border-radius:3px;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);padding:0;border:0}
.z-sw:hover{transform:scale(1.08);z-index:1}
.z-sw.primary{box-shadow:0 0 0 2px var(--z-bg-2),0 0 0 3.5px #fff;z-index:2}
.z-sw.secondary::after{content:'';position:absolute;right:2px;bottom:2px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #000}
.z-sw.drag-over{outline:2px solid var(--z-accent);outline-offset:1px}
.z-sw.locked::before{content:'';position:absolute;left:2px;top:2px;width:4px;height:4px;border-radius:1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6)}

/* ---------- color picker ---------- */
.z-picker{display:grid;grid-template-columns:1fr 14px;gap:8px}
.z-picker .z-sv{position:relative;height:118px;border-radius:4px;cursor:crosshair;touch-action:none;overflow:hidden}
.z-picker .z-sv canvas,.z-picker .z-hue canvas{width:100%;height:100%;display:block}
.z-picker .z-hue{position:relative;border-radius:3px;cursor:ns-resize;touch-action:none;overflow:hidden}
.z-picker .z-knob{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none}
.z-picker .z-hue-knob{position:absolute;left:-2px;right:-2px;height:4px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.55);transform:translateY(-50%);pointer-events:none}
.z-color-fields{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:4px;margin-top:8px}
.z-color-fields label{display:flex;flex-direction:column;gap:2px;font-size:9.5px;color:var(--z-text-3);text-transform:uppercase;letter-spacing:.06em;text-align:center}
.z-color-fields .z-input{height:22px;padding:0 4px;text-align:center;font-family:var(--z-mono);font-size:11px}

/* ---------- dialogs: misc ---------- */
.z-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.z-preset{appearance:none;border:1px solid var(--z-line-2);background:var(--z-bg-3);border-radius:var(--z-r);padding:10px 6px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--z-text)}
.z-preset:hover{border-color:var(--z-line-3);background:var(--z-bg-4)}
.z-preset.active{border-color:var(--z-accent);background:var(--z-accent-soft)}
.z-preset .z-preset-box{border:1.5px solid var(--z-text-3);border-radius:2px}
.z-preset b{font-size:11.5px;font-weight:600}
.z-preset small{font-size:10.5px;color:var(--z-text-3)}
.z-anchor{display:grid;grid-template-columns:repeat(3,22px);gap:3px}
.z-anchor button{appearance:none;width:22px;height:22px;border:1px solid var(--z-line-2);background:var(--z-bg-3);border-radius:3px;cursor:pointer;padding:0}
.z-anchor button.active{background:var(--z-accent);border-color:var(--z-accent)}
.z-preview-box{border-radius:var(--z-r);overflow:hidden;display:grid;place-items:center;min-height:160px;box-shadow:inset 0 0 0 1px var(--z-line)}
.z-preview-box canvas,.z-preview-box img{image-rendering:pixelated;max-width:100%;max-height:340px;display:block}

.z-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.z-proj{appearance:none;border:1px solid var(--z-line-2);background:var(--z-bg-3);border-radius:var(--z-r);padding:0;cursor:pointer;overflow:hidden;text-align:left;color:var(--z-text);position:relative}
.z-proj:hover{border-color:var(--z-accent-line)}
.z-proj .z-proj-thumb{aspect-ratio:4/3;display:grid;place-items:center;border-bottom:1px solid var(--z-line)}
.z-proj .z-proj-thumb img{max-width:78%;max-height:78%;image-rendering:pixelated;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.z-proj .z-proj-meta{padding:7px 9px 8px}
.z-proj .z-proj-meta b{display:block;font-weight:500;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.z-proj .z-proj-meta small{color:var(--z-text-3);font-size:10.5px}
.z-proj .z-proj-del{position:absolute;top:5px;right:5px;opacity:0;background:rgba(0,0,0,.6)}
.z-proj:hover .z-proj-del{opacity:1}

/* ==========================================================================
   TIMELINE (Pixel Art Animator) + program monitor transport
   ========================================================================== */
.z-monitor{height:38px;flex:none;display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--z-bg-1);border-top:1px solid var(--z-line)}
.z-monitor .z-tc{font-family:var(--z-mono);font-size:12.5px;color:var(--z-accent-2);letter-spacing:.02em;min-width:88px;font-variant-numeric:tabular-nums}
.z-monitor .z-tc small{display:block;font-size:10px;color:var(--z-text-3);letter-spacing:0;margin-top:-2px}
.z-transport{display:flex;align-items:center;gap:2px;margin:0 auto}
.z-transport .z-icon-btn{width:30px;height:28px}
.z-transport .z-play{width:38px;height:30px;border-radius:6px;background:var(--z-bg-4);color:var(--z-text)}
.z-transport .z-play:hover{background:var(--z-bg-5)}
.z-transport .z-play svg{width:15px;height:15px}
.z-monitor-right{display:flex;align-items:center;gap:4px;min-width:88px;justify-content:flex-end}

.z-timeline{--tl-h:248px;height:var(--tl-h);flex:none;display:flex;flex-direction:column;background:var(--z-bg-2);border-top:1px solid var(--z-line);position:relative;min-height:140px;max-height:70vh}
.z-tl-resize{position:absolute;top:-4px;left:0;right:0;height:8px;cursor:ns-resize;z-index:6}
.z-tl-resize:hover,.z-tl-resize.drag{background:linear-gradient(to bottom,transparent 3px,var(--z-accent) 3px,var(--z-accent) 5px,transparent 5px)}
.z-tl-bar{height:34px;flex:none;display:flex;align-items:center;gap:3px;padding:0 8px;border-bottom:1px solid var(--z-line)}
.z-tl-bar .z-tl-title{font-size:11px;font-weight:600;padding:0 8px 0 2px;color:var(--z-text)}
.z-tl-bar .z-input{height:24px}
.z-tl-bar .z-range{width:90px}
.z-tl-main{flex:1;min-height:0;display:grid;grid-template-columns:var(--tl-head,216px) minmax(0,1fr);grid-template-rows:26px minmax(0,1fr)}
.z-tl-corner{border-right:1px solid var(--z-line);border-bottom:1px solid var(--z-line);display:flex;align-items:center;gap:2px;padding:0 4px 0 10px;font-size:10.5px;color:var(--z-text-3);font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--z-bg-1)}
.z-tl-ruler{position:relative;overflow:hidden;border-bottom:1px solid var(--z-line);background:var(--z-bg-1);cursor:ew-resize;user-select:none}
.z-tl-ruler-inner{position:absolute;top:0;bottom:0;left:0}
.z-tl-tick{position:absolute;bottom:0;width:1px;background:var(--z-line-3)}
.z-tl-num{position:absolute;top:3px;font-size:10px;color:var(--z-text-3);font-family:var(--z-mono);transform:translateX(3px);white-space:nowrap}
.z-tl-range{position:absolute;top:0;height:6px;background:rgba(79,140,255,.55);border-radius:0 0 3px 3px}
.z-tl-range-shade{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.35);pointer-events:none;z-index:2}
.z-tl-head-marker{position:absolute;top:0;bottom:0;pointer-events:none;z-index:4}
.z-tl-head-marker::before{content:attr(data-f);position:absolute;top:2px;left:50%;transform:translateX(-50%);min-width:18px;height:16px;padding:0 4px;border-radius:3px;background:var(--z-playhead);color:#fff;font:600 10px/16px var(--z-mono);text-align:center}
.z-tl-head-marker::after{content:'';position:absolute;top:18px;bottom:0;left:50%;width:1px;background:var(--z-playhead)}
.z-tl-heads{overflow:hidden;border-right:1px solid var(--z-line);background:var(--z-bg-2)}
.z-tl-tracks{overflow:auto;position:relative;background:var(--z-bg)}
.z-tl-inner{position:relative;min-height:100%}
.z-tl-cols{position:absolute;top:0;bottom:0;left:0;pointer-events:none}
.z-tl-cur{position:absolute;top:0;bottom:0;background:rgba(255,91,91,.07);pointer-events:none}
.z-tl-playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--z-playhead);pointer-events:none;z-index:3}
.z-tl-row{height:42px;border-bottom:1px solid var(--z-line);position:relative}
.z-tl-row.active{background:rgba(79,140,255,.045)}
.z-tl-row.hidden-layer .z-clip{opacity:.4}
.z-tl-head{height:42px;display:flex;align-items:center;gap:1px;padding:0 6px 0 2px;border-bottom:1px solid var(--z-line);font-size:12px;cursor:default;position:relative}
.z-tl-head:hover{background:var(--z-bg-3)}
.z-tl-head.active{background:var(--z-accent-soft)}
.z-tl-head.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--z-accent)}
.z-tl-head .z-icon-btn{width:22px;height:22px;color:var(--z-text-3)}
.z-tl-head .z-icon-btn:hover{color:var(--z-text)}
.z-tl-head .z-icon-btn svg{width:14px;height:14px}
.z-tl-head .z-icon-btn.on{color:var(--z-text)}
.z-tl-head .z-tl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:4px}
.z-tl-head .z-tl-fx{color:#ffd166;display:grid}
.z-tl-head .z-tl-fx svg{width:13px;height:13px}
.z-tl-head.drop-above{box-shadow:inset 0 2px 0 var(--z-accent)}
.z-tl-head.drop-below{box-shadow:inset 0 -2px 0 var(--z-accent)}
.z-clip{position:absolute;top:4px;height:26px;border-radius:4px;background:linear-gradient(#3f5288,#35467a);border:1px solid #5a70b3;display:flex;align-items:center;gap:4px;overflow:hidden;cursor:grab;padding:0 3px;color:#d8e1ff;font-size:10.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.z-clip:active{cursor:grabbing}
.z-clip.sel{background:linear-gradient(#5a78cc,#4a66b6);border-color:#b7c8ff;box-shadow:0 0 0 1px #b7c8ff}
.z-clip.empty{background:rgba(90,112,179,.08);border-style:dashed;border-color:#4a5a88}
.z-clip canvas{height:20px;width:20px;image-rendering:pixelated;border-radius:2px;flex:none;background:#8e919b;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.z-clip .z-clip-len{white-space:nowrap;opacity:.8;font-family:var(--z-mono);font-size:10px}
.z-clip .z-h{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:2}
.z-clip .z-h.l{left:-1px}.z-clip .z-h.r{right:-1px}
.z-clip .z-h:hover{background:rgba(255,255,255,.25)}
.z-clip.invalid{outline:2px solid var(--z-danger)}
.z-keylane{position:absolute;left:0;right:0;bottom:2px;height:8px}
.z-key{position:absolute;top:0;width:8px;height:8px;margin-left:-4px;transform:rotate(45deg);background:#ffd166;border:1px solid #16161a;cursor:ew-resize;z-index:2}
.z-key.op{background:#5ee0e6}
.z-key.cur{box-shadow:0 0 0 2px rgba(255,255,255,.8)}
.z-tl-empty{position:absolute;left:12px;top:12px;color:var(--z-text-3);font-size:11.5px}

/* motion panel */
.z-prop{display:grid;grid-template-columns:18px 52px minmax(0,1fr) auto;gap:6px;align-items:center;margin-bottom:8px}
.z-prop > label{font-size:11px;color:var(--z-text-2)}
.z-watch{appearance:none;width:18px;height:18px;border:0;padding:0;border-radius:4px;background:transparent;color:var(--z-text-3);cursor:pointer;display:grid;place-items:center}
.z-watch svg{width:13px;height:13px}
.z-watch.on{color:#ffd166}
.z-keynav{display:flex;align-items:center;gap:0}
.z-keynav .z-icon-btn{width:18px;height:20px}
.z-keynav .z-icon-btn svg{width:12px;height:12px}
.z-keynav .z-kf{color:var(--z-text-3)}
.z-keynav .z-kf.on{color:#ffd166}
.z-xy{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.z-xy label{position:relative}
.z-xy label span{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--z-text-3);pointer-events:none}
.z-xy .z-input{padding:0 4px 0 18px;height:24px;font-family:var(--z-mono);font-size:11px;-moz-appearance:textfield}
.z-xy .z-input::-webkit-inner-spin-button,.z-xy .z-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.z-tabbed.grow{display:flex;flex-direction:column}
.z-tabbed.grow > div:last-child > div{min-height:0}
.z-fx{border:1px solid var(--z-line-2);border-radius:6px;margin-bottom:8px;background:var(--z-bg-3)}
.z-fx-head{display:flex;align-items:center;gap:6px;height:30px;padding:0 4px 0 8px}
.z-fx-head b{flex:1;font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.z-fx-head b svg{width:14px;height:14px;color:#ffd166}
.z-fx-body{padding:4px 10px 10px;border-top:1px solid var(--z-line)}
.z-fx.off .z-fx-body{opacity:.5}
.z-fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

body.z-no-panels .z-dock,body.z-no-panels .z-toolbar,body.z-no-panels .z-optionsbar{display:none}

/* narrow screens: editors are desktop-first, so the menus fold into one
   menu button and the panels become drawers */
.z-narrow-only{display:none !important}
@media (max-width: 860px){
  .z-narrow-only{display:inline-grid !important}
  .z-apps .z-app-link span{display:none}
  .z-apps .z-app-link{padding:0 5px}
  .z-appbar-title{visibility:hidden}
  .z-dock{position:absolute;right:0;top:0;bottom:0;z-index:20;transform:translateX(105%);transition:transform .18s;box-shadow:-20px 0 40px rgba(0,0,0,.5)}
  .z-dock.open{transform:none}
  .z-tl-main{--tl-head:132px}
  .z-monitor .z-tc{min-width:0}
  .z-monitor-right{min-width:0}
}
@media (max-width: 560px){
  .z-appbar .z-logo .z-logo-word{display:none}
  .z-apps{display:none}
  .z-site-nav .z-logo-by{display:none}
  .z-monitor .z-tc small,.z-monitor-right{display:none}
  .z-monitor .z-tc{font-size:11px}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}

/* ==========================================================================
   MARKETING SITE (landing, subscribe)
   ========================================================================== */
body.z-site{background:#0b0b0d;font-size:14px;line-height:1.6;color:var(--z-text)}
.z-site-nav{position:sticky;top:0;z-index:50;height:60px;display:flex;align-items:center;gap:22px;padding:0 max(24px,calc((100vw - 1180px)/2));
  background:rgba(11,11,13,.78);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.z-site-nav .z-logo{font-size:15px}
.z-site-nav .z-mark{width:22px;height:22px}
.z-site-links{display:flex;align-items:center;gap:4px;flex:1}
.z-site-links a{color:var(--z-text-2);padding:6px 10px;border-radius:6px;font-size:13.5px;font-weight:500}
.z-site-links a:hover{color:var(--z-text);text-decoration:none;background:rgba(255,255,255,.04)}
.z-site-nav .z-site-actions{display:flex;align-items:center;gap:8px}
.z-site-nav .zt-account{height:32px;border-radius:16px}
.z-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.z-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--z-accent-2);letter-spacing:.01em}
.z-h1{font-size:clamp(38px,5.6vw,68px);line-height:1.02;letter-spacing:-.035em;font-weight:700;margin:14px 0 18px}
.z-h2{font-size:clamp(28px,3.4vw,42px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:10px 0 14px}
.z-h3{font-size:18px;letter-spacing:-.01em;font-weight:600;margin:0 0 8px}
.z-lead{font-size:clamp(16px,1.6vw,19px);color:var(--z-text-2);line-height:1.55;max-width:640px;margin:0}
.z-grad{background:linear-gradient(92deg,#fff 20%,#b9c8ff 60%,#d9c2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.z-site-footer{border-top:1px solid rgba(255,255,255,.06);padding:36px 0 44px;color:var(--z-text-3);font-size:13px}
.z-site-footer .z-wrap{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;align-items:center}
.z-site-footer a{color:var(--z-text-2)}
.z-site-footer nav{display:flex;gap:18px;flex-wrap:wrap}
@media (max-width: 760px){
  .z-site-links{display:none}
  .z-site-nav{gap:12px;padding:0 16px}
  .z-wrap{padding:0 16px}
}