/* ==========================================================================
   Zoetrope by ZingLab — shared design tokens + page chrome
   Tokens are lifted straight from the GIF Editor's own :root so the three
   tools read as one product. gif-editor/index.html keeps its own inline
   copy (untouched, to avoid any layout regression) — this file is for the
   landing page, Pixel Art Creator and Pixel Art Animator only.
   ========================================================================== */

:root{
  --ink:#0E1120;          /* deep optical-bench indigo */
  --ink-2:#161B30;
  --ink-3:#1E2540;
  --line:#2C3455;
  --paper:#EDEFF7;
  --dim:#8791B4;
  --mercury:#5CE1E6;      /* cyan channel */
  --magenta:#FF4FA3;      /* magenta channel */
  --amber:#FFC24B;
  --danger:#FF6B6B;
  --sans:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono:'Azeret Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--mercury);outline-offset:2px}
::selection{background:var(--mercury);color:var(--ink)}

/* ---------- top nav, shared by landing / creator / animator ---------- */
.zt-topnav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;border-bottom:1px solid var(--line);background:var(--ink-2);
  position:sticky;top:0;z-index:40;
}
.zt-brand{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.zt-brand h1{margin:0;font-size:20px;letter-spacing:.01em}
.zt-brand h1 em{font-style:normal;color:var(--mercury)}
.zt-brand small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.zt-nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.zt-nav-link{
  display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;
  text-decoration:none;color:var(--paper);font-size:13px;font-weight:600;
  border:1px solid transparent;transition:border-color .15s,background .15s;
}
.zt-nav-link:hover{border-color:var(--line);background:var(--ink-3)}
.zt-nav-link.current{border-color:var(--mercury);background:rgba(92,225,230,.08)}
.zt-badge{
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;padding:2px 7px;
  border-radius:999px;text-transform:uppercase;font-weight:700;
}
.zt-badge.free{background:rgba(92,225,230,.16);color:var(--mercury)}
.zt-badge.paid{background:rgba(255,194,75,.18);color:var(--amber)}

/* ---------- footer, shared ---------- */
.zt-footer{
  border-top:1px solid var(--line);padding:22px 24px;color:var(--dim);
  font-size:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.zt-footer a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.zt-footer a:hover{color:var(--paper)}

/* ---------- generic page shell ---------- */
.zt-page{max-width:1180px;margin:0 auto;padding:0 24px}
.zt-panel{
  background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:18px;
}
.zt-h2{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:0 0 12px}
.zt-btn{
  appearance:none;border:1px solid var(--line);background:var(--ink-3);color:var(--paper);
  padding:9px 14px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .15s,transform .05s;
}
.zt-btn:hover{border-color:var(--mercury)}
.zt-btn:active{transform:translateY(1px)}
.zt-btn.primary{background:var(--mercury);color:var(--ink);border-color:var(--mercury)}
.zt-btn.primary:hover{filter:brightness(1.08)}
.zt-btn.ghost{background:transparent}
.zt-btn.danger{border-color:var(--danger);color:var(--danger);background:transparent}
.zt-btn:disabled{opacity:.4;cursor:not-allowed}
.zt-field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.zt-field label{font-size:11px;color:var(--dim);display:flex;justify-content:space-between}
.zt-field input[type="range"]{width:100%}
.zt-field input[type="number"],.zt-field input[type="text"],.zt-field select{
  background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px;
}
.zt-row{display:flex;gap:10px}
.zt-row > *{flex:1}
.zt-swatch{
  width:28px;height:28px;border-radius:7px;border:2px solid var(--line);cursor:pointer;position:relative;
}
.zt-swatch.active{border-color:var(--mercury);box-shadow:0 0 0 2px rgba(92,225,230,.35)}
.zt-swatch.locked::after{
  content:'';position:absolute;inset:-6px;border:1px dashed var(--amber);border-radius:11px;
}
.zt-checker{
  background-image:
    linear-gradient(45deg,#33394f 25%,transparent 25%),
    linear-gradient(-45deg,#33394f 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#33394f 75%),
    linear-gradient(-45deg,transparent 75%,#33394f 75%);
  background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;
  background-color:#282e47;
}