/* ============================================================
   PESKEL — design tokens
   Monochrome UI. Color lives ONLY in the data (party identity).
   Two themes: scoped via [data-theme] on each frame root.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --font-ui:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* gallery chrome (neutral, theme-independent) */
  --page:#E9E9EC;
  --page-ink:#16161A;
  --page-ink2:#6B6B73;
  --page-hair:rgba(0,0,0,.10);

  /* candidate / party palette — sober, distinguishable, works light+dark.
     These are the ONLY saturated colors in the product. */
  --p-crimson:#C0455A;
  --p-blue:#3563C9;
  --p-green:#2C8C6A;
  --p-ochre:#C98A34;
  --p-violet:#7A5BC0;
  --p-teal:#2E8FA8;
  --p-null:#9A9AA2;
}

/* ---------- LIGHT (owner's default) ---------- */
[data-theme="light"]{
  --bg:#F4F4F6;
  --surface:#FFFFFF;
  --surface-2:#F7F7F9;
  --surface-sunken:#EFEFF2;
  --ink:#0B0B0D;
  --ink-2:#5B5B63;
  --ink-3:#9A9AA2;
  --hair:rgba(10,10,13,.085);
  --hair-2:rgba(10,10,13,.14);
  --glass:rgba(255,255,255,.72);
  --glass-edge:rgba(255,255,255,.9);
  --glass-blur:saturate(160%) blur(22px);
  --solid-ink:#0B0B0D;       /* primary button bg */
  --on-solid:#FFFFFF;         /* primary button text */
  --shadow-sm:0 1px 2px rgba(10,10,13,.05), 0 1px 1px rgba(10,10,13,.04);
  --shadow-md:0 8px 24px -8px rgba(10,10,13,.16), 0 2px 6px rgba(10,10,13,.06);
  --shadow-lg:0 30px 70px -24px rgba(10,10,13,.30), 0 8px 20px -10px rgba(10,10,13,.14);
  --track:rgba(10,10,13,.07);
  --glow:transparent;
}

/* ---------- DARK (deep, futuristic) ---------- */
[data-theme="dark"]{
  --bg:#08080A;
  --surface:#141417;
  --surface-2:#191A1E;
  --surface-sunken:#0E0E11;
  --ink:#F4F4F6;
  --ink-2:#9C9CA6;
  --ink-3:#67676F;
  --hair:rgba(255,255,255,.08);
  --hair-2:rgba(255,255,255,.15);
  --glass:rgba(22,23,27,.62);
  --glass-edge:rgba(255,255,255,.10);
  --glass-blur:saturate(150%) blur(24px);
  --solid-ink:#F4F4F6;
  --on-solid:#0B0B0D;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 30px -10px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:0 40px 90px -30px rgba(0,0,0,.8), 0 10px 30px -12px rgba(0,0,0,.6);
  --track:rgba(255,255,255,.09);
  --glow:rgba(255,255,255,.04);
}

*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--page);
  color:var(--page-ink);
  font-family:var(--font-ui);
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--page-ink);color:#fff}

/* ===================== GALLERY CHROME ===================== */
.gallery{max-width:1440px;margin:0 auto;padding:40px 40px 120px}
.gx-top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  flex-wrap:wrap;margin-bottom:14px;
}
.gx-mark{display:flex;align-items:center;gap:13px}
.gx-mark .word{font-size:30px;font-weight:800;letter-spacing:-.045em;color:var(--page-ink)}
.gx-kicker{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--page-ink2);
}
.gx-lede{
  max-width:680px;margin:18px 0 0;font-size:16.5px;line-height:1.62;color:#3a3a42;
  text-wrap:pretty;
}
.gx-lede b{color:var(--page-ink);font-weight:700}

.gx-rationale{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin:30px 0 8px;border:1px solid var(--page-hair);border-radius:18px;overflow:hidden;
  background:#fff;
}
.gx-rationale .cell{padding:20px 22px;border-right:1px solid var(--page-hair)}
.gx-rationale .cell:last-child{border-right:0}
.gx-rationale .ct{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--page-ink2);margin-bottom:9px;
}
.gx-rationale .cb{font-size:13.5px;line-height:1.5;color:#33333a}
.gx-rationale .cb b{color:var(--page-ink);font-weight:700}

.gx-sec{margin-top:64px}
.gx-sec-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.gx-sec-num{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--page-ink2);position:relative;top:7px;flex:0 0 auto}
.gx-sec-title{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--page-ink)}
.gx-sec-sub{font-size:14.5px;color:var(--page-ink2);max-width:640px;margin:2px 0 26px;line-height:1.55}

.gx-frames{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.gx-frame-label{
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--page-ink2);
}
.gx-flip{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--page-hair);background:#fff;border-radius:999px;
  padding:5px 11px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--page-ink);
  transition:background .15s, border-color .15s;
}
.gx-flip:hover{border-color:var(--page-ink2)}
.gx-flip .dot{width:11px;height:11px;border-radius:50%;
  background:conic-gradient(#0b0b0d 0 50%, #f4f4f6 50% 100%);border:1px solid var(--page-hair)}

/* ===================== DEVICE FRAMES ===================== */
/* phone */
.phone{
  width:392px;flex:0 0 392px;border-radius:54px;padding:11px;
  background:var(--bg);
  box-shadow:var(--shadow-lg), 0 0 0 1.5px var(--hair-2);
  position:relative;
}
[data-theme="dark"].phone{box-shadow:var(--shadow-lg), 0 0 0 1.5px rgba(255,255,255,.10)}
.phone-screen{
  position:relative;border-radius:44px;overflow:hidden;background:var(--bg);
  height:812px;padding-top:40px;
}
.phone-island{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:118px;height:33px;background:#000;border-radius:20px;z-index:60;
}

/* web window */
.web{
  flex:1 1 720px;min-width:560px;border-radius:18px;overflow:hidden;
  background:var(--bg);box-shadow:var(--shadow-lg), 0 0 0 1px var(--hair-2);
}
.web-bar{
  display:flex;align-items:center;gap:14px;padding:13px 18px;
  background:var(--surface);border-bottom:1px solid var(--hair);
}
.web-lights{display:flex;gap:8px}
.web-lights i{width:12px;height:12px;border-radius:50%;background:var(--hair-2)}
.web-url{
  flex:1;max-width:420px;margin:0 auto;text-align:center;
  background:var(--surface-sunken);border-radius:8px;padding:7px 14px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2);
}
.web-url b{color:var(--ink)}
.web-screen{height:792px;overflow:hidden;position:relative}

/* generic scroll region inside a frame */
.app .scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.scroll{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:0;height:0}

/* ===================== LOGO MARK ===================== */
.pk-mark{display:block;flex:0 0 auto}
.pk-mark .sq{}