/* Kinepip ($KINEPIP) — Multi-Page Illustrated World with Dual-Atmosphere Theme System:
   - Light Theme ("Sunlit Day"): Bright sunlit zen garden & crystal conservatory sky, warm seafoam-cream surfaces, petrol-ink cartoon borders.
   - Dark Theme ("Midnight Vortex"): Deep bioluminescent twilight vortex sky, obsidian-teal surfaces, glowing cyan-mint borders. */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fredoka-latin.woff2") format("woff2");
}

:root {
  /* Sunlit Day (Light Mode Default) */
  --sky-bg: #D8F5EE;
  --bg: #F2FBF8;
  --bg-2: #E1F6F0;
  --surface: rgb(242 251 248 / 0.92);
  --surface-2: rgb(225 246 240 / 0.95);
  --ink: #07262B;
  --muted: #2E565B;
  --line: #9CD4C8;
  --pip: #2CC4AE;
  --pip-ink: #095860;
  --cap: #123E46;
  --ring: #B6EFE3;
  --ring-line: rgb(7 38 43 / 0.16);
  --foam: #E8FBF6;
  --good: #0E7A53;
  --bad: #B23A48;

  /* Hero & Page Header surface tokens (change with Light/Dark!) */
  --hero-surface: rgb(242 252 249 / 0.90);
  --hero-border: #07262B;
  --hero-shadow: #2CC4AE;
  --hero-ink: #062328;
  --hero-title-shadow: #8CE8D8;
  --hero-sub: #1B4A50;
  --hero-kicker: #085A62;
  --ca-bg: rgb(219 245 238 / 0.85);
  --ca-border: rgb(7 38 43 / 0.45);
  -- ticker-bg: #C5F1E6;
  --ticker-bg: #C5F1E6;
  --ticker-ink: #07262B;
  --ticker-border: #07262B;
  --mini-bg: rgb(242 251 248 / 0.88);
  --mini-border: #07262B;
  --mini-ink: #07262B;
  --mini-label: #095860;
  --bubble-grad: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.85), rgb(110 232 212 / 0.32) 48%, rgb(14 95 102 / 0.14) 78%, rgb(255 255 255 / 0.55) 100%);
  --bubble-border: rgb(7 38 43 / 0.35);

  --day-opacity: 1;
  --night-opacity: 0;

  --radius: 24px;
  --wrap: 1200px;
  --gutter: clamp(14px, 3.8vw, 40px);
  --display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-bg: #051A20;
    --bg: #061C21;
    --bg-2: #0B282F;
    --surface: rgb(7 29 35 / 0.88);
    --surface-2: rgb(11 40 47 / 0.92);
    --ink: #E6FBF6;
    --muted: #93BDBA;
    --line: #1E4F57;
    --pip: #63E0CC;
    --pip-ink: #8CEFDF;
    --cap: #0E3038;
    --ring: #0B3A41;
    --ring-line: rgb(232 251 246 / 0.24);
    --good: #4FDB9E;
    --bad: #FF8A96;

    --hero-surface: rgb(7 32 38 / 0.84);
    --hero-border: #E8FBF6;
    --hero-shadow: #041519;
    --hero-ink: #E8FBF6;
    --hero-title-shadow: #041519;
    --hero-sub: #D5F5EE;
    --hero-kicker: #7CE8D3;
    --ca-bg: rgb(4 21 25 / 0.62);
    --ca-border: rgb(232 251 246 / 0.52);
    --ticker-bg: #051B20;
    --ticker-ink: #E8FBF6;
    --ticker-border: #E8FBF6;
    --mini-bg: rgb(7 38 43 / 0.68);
    --mini-border: rgb(232 251 246 / 0.48);
    --mini-ink: #E8FBF6;
    --mini-label: #7CE8D3;
    --bubble-grad: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.65), rgb(140 240 220 / 0.22) 45%, rgb(29 126 122 / 0.08) 75%, rgb(255 255 255 / 0.35) 100%);
    --bubble-border: rgb(232 251 246 / 0.55);

    --day-opacity: 0;
    --night-opacity: 1;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --sky-bg: #051A20;
  --bg: #061C21;
  --bg-2: #0B282F;
  --surface: rgb(7 29 35 / 0.88);
  --surface-2: rgb(11 40 47 / 0.92);
  --ink: #E6FBF6;
  --muted: #93BDBA;
  --line: #1E4F57;
  --pip: #63E0CC;
  --pip-ink: #8CEFDF;
  --cap: #0E3038;
  --ring: #0B3A41;
  --ring-line: rgb(232 251 246 / 0.24);
  --good: #4FDB9E;
  --bad: #FF8A96;

  --hero-surface: rgb(7 32 38 / 0.84);
  --hero-border: #E8FBF6;
  --hero-shadow: #041519;
  --hero-ink: #E8FBF6;
  --hero-title-shadow: #041519;
  --hero-sub: #D5F5EE;
  --hero-kicker: #7CE8D3;
  --ca-bg: rgb(4 21 25 / 0.62);
  --ca-border: rgb(232 251 246 / 0.52);
  --ticker-bg: #051B20;
  --ticker-ink: #E8FBF6;
  --ticker-border: #E8FBF6;
  --mini-bg: rgb(7 38 43 / 0.68);
  --mini-border: rgb(232 251 246 / 0.48);
  --mini-ink: #E8FBF6;
  --mini-label: #7CE8D3;
  --bubble-grad: radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.65), rgb(140 240 220 / 0.22) 45%, rgb(29 126 122 / 0.08) 75%, rgb(255 255 255 / 0.35) 100%);
  --bubble-border: rgb(232 251 246 / 0.55);

  --day-opacity: 0;
  --night-opacity: 1;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
  overflow-x: clip;
}
body {
  margin: 0;
  background-color: var(--sky-bg);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--display);
  overflow-x: clip;
  position: relative;
  min-height: 100dvh;
  transition: background-color 0.35s ease, color 0.25s ease;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--pip-ink); }
:focus-visible { outline: 3px solid var(--pip); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-weight: 700; line-height: 1.06; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; position: relative; z-index: 2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 80; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* ============================================================================
   Dual-Layer Full-Bleed Illustrated Page Backdrop (Sunlit Day ⇄ Midnight Vortex)
   Switching theme visibly crossfades the entire illustrated world & sky!
   ============================================================================ */
.page-backdrop {
  position: fixed;
  inset: -24px;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(calc((var(--mx, 0.5) - 0.5) * -14px), calc((var(--my, 0.5) - 0.5) * -10px), 0) scale(1.03);
  transition: transform 0.25s ease-out;
}
.page-backdrop::before,
.page-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 0.45s ease;
}
/* Day mode layer: day art under the light wash */
.page-backdrop::before {
  background-image:
    linear-gradient(180deg, rgb(216 248 240 / 0.18) 0%, rgb(198 243 233 / 0.34) 52%, rgb(224 249 243 / 0.58) 100%),
    var(--bg-art-day, url("/img/bg-home-day.webp"));
  opacity: var(--day-opacity);
}
/* Night mode layer: night art under the dark wash */
.page-backdrop::after {
  background-image:
    linear-gradient(180deg, rgb(4 17 21 / 0.36) 0%, rgb(6 26 32 / 0.54) 50%, rgb(4 17 21 / 0.78) 100%),
    var(--bg-art-night, url("/img/bg-home-vortex.webp"));
  opacity: var(--night-opacity);
}

/* The layer of the theme not in use waits for site.js to add .bg-both after load, so it never competes with the
   first paint; it is in cache well before anyone flips the theme. */
:root[data-theme="dark"]:not(.bg-both) .page-backdrop::before,
:root:not([data-theme="dark"]):not(.bg-both) .page-backdrop::after { background-image: none; }

/* Swap shows its own scene in both themes, with lighter washes so the art reads clearly; the cards
   on top carry their own surfaces, so text stays legible. */
.page-backdrop.scene::before {
  background-image:
    linear-gradient(180deg, rgb(216 248 240 / 0.04) 0%, rgb(198 243 233 / 0.14) 55%, rgb(224 249 243 / 0.38) 100%),
    var(--bg-art-day);
}
.page-backdrop.scene::after {
  background-image:
    linear-gradient(180deg, rgb(4 17 21 / 0.08) 0%, rgb(6 26 32 / 0.24) 50%, rgb(4 17 21 / 0.6) 100%),
    var(--bg-art-night);
}

/* Rising & Poppable Glass Bubbles */
.bubble-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.glass-bubble {
  position: absolute;
  bottom: -90px;
  left: var(--bx, 50%);
  width: var(--bs, 48px);
  height: var(--bs, 48px);
  border-radius: 50%;
  background: var(--bubble-grad);
  border: 1.5px solid var(--bubble-border);
  box-shadow: inset 0 0 12px rgb(255 255 255 / 0.4), 0 4px 16px rgb(7 38 43 / 0.18);
  animation: bubble-rise var(--bd, 18s) linear var(--bdel, 0s) infinite;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.glass-bubble::after {
  content: "";
  position: absolute;
  top: 16%;
  left: 20%;
  width: 26%;
  height: 16%;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.82);
  transform: rotate(-28deg);
}
.glass-bubble:hover { transform: scale(1.12); }
.glass-bubble.popped { transform: scale(1.65); opacity: 0; pointer-events: none; }
@keyframes bubble-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.82; }
  50% { transform: translateY(-52vh) translateX(18px); }
  90% { opacity: 0.82; }
  100% { transform: translateY(-112vh) translateX(-14px); opacity: 0; }
}

/* ============================================================================
   Buttons & Chips (Cartoon sticker borders & offset shadows)
   ============================================================================ */
.btn {
  --b: var(--ink); --f: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px;
  border: 2.5px solid var(--b); border-radius: 999px; background: var(--b); color: var(--f);
  font: 600 1.02rem/1 var(--display); text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--pip); transition: transform .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.btn:hover { color: var(--f); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--pip); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--pip); }
.btn.ghost { --f: var(--ink); background: var(--surface); }
.btn.ghost:hover { color: var(--ink); }
.btn.small { min-height: 42px; padding: 0 15px; font-size: .92rem; box-shadow: 3px 3px 0 var(--pip); }
.btn.full-btn { width: 100%; min-height: 52px; font-size: 1.08rem; white-space: normal; text-align: center; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.wallet-top[data-connected="true"] { background: var(--bg-2); border-color: var(--pip-ink); }

.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 600 .9rem/1 var(--display); cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s, background .12s;
}
.chip:hover { transform: translate(-1px, -1px); background: var(--bg-2); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: 2px 2px 0 var(--pip); }
.chip-row, .preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.preset-row small { color: var(--muted); font-weight: 600; }

/* Inputs */
.input-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.at-prefix { font: 700 1.25rem var(--mono); color: var(--pip-ink); padding-left: 4px; }
.text-input {
  flex: 1 1 180px; min-width: 0; min-height: 46px; padding: 0 14px;
  border: 2.5px solid var(--ink); border-radius: 14px; background: var(--bg); color: var(--ink);
  font: 500 1rem var(--display);
}
.text-input.mono-input { font-family: var(--mono); font-size: .94rem; }
.text-input.big-input { font-size: 1.35rem; font-weight: 700; min-height: 52px; }
.field-label { display: block; font-weight: 600; margin-bottom: 6px; }

/* ============================================================================
   Floating Pill Navbar & Dojo Sky Theme Switcher
   ============================================================================ */
.top {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 40;
  padding: 0 var(--gutter);
}
.top .wrap {
  width: min(100%, var(--wrap));
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 66px;
  padding: 7px 14px;
  background: var(--surface);
  backdrop-filter: blur(14px);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--ink);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .02em;
  margin-right: auto;
  flex-shrink: 0;
}
.brand svg { width: 42px; height: 42px; flex-shrink: 0; }
/* Page label beside the brand on Swap / Market ("KINEPIP | swap"). */
.brand-page { display: inline-block; padding-left: 10px; border-left: 2px solid var(--line); font-size: .9em; font-weight: 600; letter-spacing: .01em; color: var(--pip-ink); line-height: 1.15; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: .94rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.nav a[aria-current="page"] { background: var(--ink); color: var(--bg); box-shadow: 2px 2px 0 var(--pip); }
.nav a:not([aria-current]):hover { background: var(--bg-2); }
.tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Dojo Sky Theme Switcher Pill (Day / Night / Auto) */
.theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink);
  font: 600 .88rem/1 var(--display);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.12s ease, background 0.15s ease;
}
.theme-pill:hover { transform: translate(-1px, -1px); background: var(--bg); }
.theme-pill svg { width: 20px; height: 20px; flex-shrink: 0; }

.icon-btn {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-2); }
.icon-btn svg { width: 20px; height: 20px; }
.menu-btn { display: none; }

/* Tablet & Mobile Navigation Drawer (<= 1320px: eight links plus the tools need the full width) */
@media (max-width: 1320px) {
  .menu-btn { display: inline-grid; }
  .nav {
    position: fixed;
    top: calc(max(10px, env(safe-area-inset-top)) + 74px);
    left: var(--gutter);
    right: var(--gutter);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 16px;
    background: var(--surface);
    backdrop-filter: blur(18px);
    border: 2.5px solid var(--ink);
    border-radius: 24px;
    box-shadow: 7px 7px 0 var(--ink);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
  }
  .nav:not(.open) { display: none; }
  .nav a {
    font-size: 1.06rem;
    padding: 12px 16px;
    min-height: 46px;
    border: 1.5px solid var(--line);
    background: var(--bg);
    justify-content: center;
  }
  .tools .buy { display: none; }
}
/* Swap, Market and Launch are apps: the site's links always live in the menu there, a dropdown under the
   menu button on wide screens and the same drawer on phones. */
.top.app-nav .menu-btn { display: inline-grid; }
.top.app-nav .nav {
  position: fixed;
  top: calc(max(10px, env(safe-area-inset-top)) + 74px);
  right: var(--gutter);
  left: auto;
  width: min(440px, calc(100vw - 2 * var(--gutter)));
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  backdrop-filter: blur(18px);
  border: 2.5px solid var(--ink);
  border-radius: 24px;
  box-shadow: 7px 7px 0 var(--ink);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  z-index: 50;
}
.top.app-nav .nav:not(.open) { display: none; }
.top.app-nav .nav a { font-size: 1.06rem; padding: 12px 16px; min-height: 46px; border: 1.5px solid var(--line); background: var(--bg); justify-content: center; }
.top.app-nav .nav a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 560px) { .top.app-nav .nav { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .top .wrap { min-height: 60px; padding: 6px 10px; gap: 6px; }
  .brand { font-size: 1.12rem; gap: 6px; }
  .brand svg { width: 36px; height: 36px; }
  .nav { grid-template-columns: 1fr; }
  .tools .wallet-top { padding: 0 11px; font-size: .82rem; min-height: 38px; }
  .theme-pill { padding: 0 10px; min-height: 38px; font-size: .82rem; }
  .icon-btn { width: 40px; height: 40px; }
}
/* Small phones: brand, theme, wallet and menu must share one row. The theme pill goes icon-only (its aria-label
   still names it) and the wallet button shrinks with an ellipsis instead of pushing the menu off screen. */
@media (max-width: 420px) {
  .top .wrap { gap: 4px; }
  .brand { flex-shrink: 0; }
  .tools { gap: 6px; min-width: 0; flex-shrink: 1; }
  .theme-pill [data-theme-label] { display: none; }
  .theme-pill { padding: 0 9px; }
  .tools .wallet-top { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 34px; padding: 0 10px; }
  .icon-btn { flex-shrink: 0; }
  /* On Swap / Market the logo stands in for the wordmark so the page label and the wallet both fit. */
  .brand:has(.brand-page) .brand-name { display: none; }
  .brand:has(.brand-page) .brand-page { border-left: 0; padding-left: 0; }
}
@media (max-width: 370px) {
  .brand-name { display: none; }
  .brand-page { border-left: 0; padding-left: 0; }
}

/* Theme Icon States (2-state only: Day / Light vs Night / Dark) */
.theme-face .eye-open, .theme-face .eye-shut { display: none; }
:root:not([data-theme="dark"]) .theme-face .eye-open { display: inline; }
:root[data-theme="dark"] .theme-face .eye-shut { display: inline; }
:root.theme-vt::view-transition-old(root), :root.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* During the theme reveal the page must already be in its final colours when the browser captures it, so the
   circle uncovers the finished theme instead of colours still fading through their CSS transitions. */
:root.theme-swap *, :root.theme-swap *::before, :root.theme-swap *::after { transition: none !important; }

/* Page-to-page navigation: a quick cross-fade with the header held still (browsers without it just navigate). */
@view-transition { navigation: auto; }
header.top { view-transition-name: site-header; }
:root.theme-vt header.top { view-transition-name: none; } /* the theme reveal sweeps the header too */
::view-transition-group(root) { animation-duration: .2s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
::view-transition-group(site-header) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Ring tunnel helper (adapts to Light & Dark theme!) */
.rings {
  background-color: var(--ring);
  background-image: repeating-radial-gradient(circle at var(--rx, 22%) var(--ry, 18%), transparent 0 11px, var(--ring-line) 11px 13px);
}

/* Shared card surface */
.card-surface {
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  padding: clamp(18px, 3.2vw, 34px);
  box-shadow: 6px 6px 0 var(--ink);
  min-width: 0;
}

/* ============================================================================
   Hero Section (Adapts to Sunlit Day & Midnight Vortex!)
   ============================================================================ */
.hero { position: relative; padding: clamp(22px, 4.5vw, 52px) 0 clamp(32px, 5.5vw, 64px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center; gap: clamp(20px, 3.5vw, 32px); }
.hero-copy {
  background: var(--hero-surface);
  backdrop-filter: blur(14px);
  border: 2.5px solid var(--hero-border);
  border-radius: 28px;
  padding: clamp(20px, 3.5vw, 38px);
  box-shadow: 8px 8px 0 var(--hero-shadow);
  color: var(--hero-ink);
  min-width: 0;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: clamp(.78rem, 2vw, .9rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hero-kicker);
}
.hero h1 {
  font-size: clamp(2.8rem, 8.5vw, 6.4rem);
  margin: 8px 0 6px;
  color: var(--hero-ink);
  text-shadow: 4px 4px 0 var(--hero-title-shadow);
  overflow-wrap: anywhere;
}
.hero .lead { font-size: clamp(1.25rem, 2.8vw, 1.9rem); font-weight: 600; color: var(--hero-ink); }
.hero .body { max-width: 44ch; margin-top: 12px; color: var(--hero-sub); font-size: clamp(1rem, 2vw, 1.1rem); }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-mascot-col { display: grid; gap: 12px; justify-items: center; min-width: 0; }
.hero-pip-frame {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  border: 3.5px solid var(--hero-border);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 9px 9px 0 var(--hero-shadow);
  background: var(--ring);
  cursor: pointer;
  user-select: none;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.16s ease-out, box-shadow 0.2s ease;
}
/* Original looks (photo cutout and vector): same mascot in both themes, and only this scene changes with the page
   backdrop (day art in Day mode, night art in Night mode). Both images are the home backdrop's, so they're already cached. */
.hero-pip-frame.scene-bg {
  background: url("/img/bg-home-day.webp") center / cover no-repeat;
  transition: transform 0.16s ease-out, box-shadow 0.2s ease, background-image 0.45s ease;
}
:root[data-theme="dark"] .hero-pip-frame.scene-bg { background-image: url("/img/bg-home-vortex.webp"); }
.hero-pip-frame:hover {
  box-shadow: 11px 14px 0 var(--pip);
}
.hero-stage-inner,
.hero-pip-frame img,
.hero-pip-frame svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mascot-speech {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 4;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin-inline: auto;
  background: rgb(7 38 43 / 0.9);
  color: #E8FBF6;
  border: 2px solid #7CE8D3;
  border-radius: 999px;
  padding: 6px 14px;
  font: 600 .86rem/1.25 var(--display);
  text-align: center;
  box-shadow: 3px 3px 0 #041519;
  pointer-events: none;
}
.mascot-fx {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.fx-particle {
  position: absolute;
  font: 700 1.25rem/1 var(--display);
  color: #7CE8D3;
  text-shadow: 2px 2px 0 #041519;
  animation: fx-burst 0.85s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes fx-burst {
  0% { transform: translate(0, 0) scale(0.6); opacity: 1; }
  100% { transform: translate(var(--tx, 0px), var(--ty, -60px)) scale(1.25); opacity: 0; }
}
.hero-pip-frame.mascot-pop .hero-stage-inner {
  animation: mascot-bounce 0.42s cubic-bezier(.34,1.56,.64,1);
}
.hero-pip-frame.mascot-slash .hero-stage-inner {
  animation: mascot-slash-move 0.45s cubic-bezier(.22,1,.36,1);
}
@keyframes mascot-bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.06) translateY(-8px) rotate(-1.5deg); }
  100% { transform: scale(1); }
}
@keyframes mascot-slash-move {
  0% { transform: scale(1); }
  30% { transform: scale(1.08) rotate(3deg) translateX(6px); }
  65% { transform: scale(1.03) rotate(-2deg) translateX(-4px); }
  100% { transform: scale(1); }
}
.hero-style-bar,
.hero-pose-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 520px;
}
.pose-chip {
  background: var(--bg-2);
  font-size: .84rem;
  min-height: 34px;
  padding: 0 12px;
}

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-pip-frame { width: min(92%, 390px); }
}

/* Contract strip */
.ca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 12px 14px;
  border: 2px dashed var(--ca-border);
  border-radius: 16px;
  background: var(--ca-bg);
}
.ca .label { font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hero-kicker); }
.ca code { font: 600 .95rem var(--mono); flex: 1 1 12ch; overflow-wrap: anywhere; color: var(--hero-ink); }
.ca .note { flex: 1 1 100%; font-size: .88rem; color: var(--hero-sub); }

/* Ticker (Adapts to Light & Dark theme) */
.ticker {
  position: relative;
  z-index: 2;
  background: var(--ticker-bg);
  color: var(--ticker-ink);
  overflow: hidden;
  border-top: 2.5px solid var(--ticker-border);
  border-bottom: 2.5px solid var(--ticker-border);
}
.ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker ul { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.ticker li { display: flex; align-items: center; gap: 18px; padding: 13px 18px 13px 0; font-weight: 600; font-size: 1.1rem; white-space: nowrap; }
.ticker li::after { content: "^_^"; color: var(--pip-ink); font-weight: 700; }
@keyframes tick { to { transform: translateX(-50%); } }

/* Sections */
section.block { position: relative; z-index: 2; padding: clamp(36px, 6vw, 80px) 0; }
.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  padding: clamp(18px, 2.8vw, 28px);
  box-shadow: 6px 6px 0 var(--ink);
  margin-bottom: 26px;
}
.eyebrow { font-weight: 700; color: var(--pip-ink); letter-spacing: .06em; text-transform: uppercase; font-size: .86rem; }
.title { font-size: clamp(1.85rem, 4.6vw, 3.3rem); margin: 6px 0 10px; overflow-wrap: anywhere; }
.intro { font-size: 1.06rem; max-width: 62ch; color: var(--muted); }
.muted-inline { font-weight: 400; font-size: .92rem; color: var(--muted); }

/* ============================================================================
   X Origin Reference & Comment Screenshot Card
   ============================================================================ */
.origin-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(22px, 4vw, 44px); align-items: start; }
@media (max-width: 920px) { .origin-grid { grid-template-columns: 1fr; } }
.story p + p { margin-top: 12px; }
.story p { font-size: 1.06rem; }
.story .quiet { color: var(--muted); }
.name-quote { margin: 14px 0; padding: 12px 18px; border-left: 5px solid var(--pip); background: var(--bg-2); border-radius: 0 16px 16px 0; font-size: clamp(1.45rem, 4vw, 1.85rem); font-weight: 700; letter-spacing: -.01em; }
.facts { margin: 0; border-top: 2.5px solid var(--ink); }
.facts > div { display: grid; grid-template-columns: 62px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1.5px solid var(--line); align-items: center; }
.facts dt { width: 56px; height: 52px; display: grid; place-items: center; border-radius: 14px; border: 2.5px solid var(--bad); color: var(--bad); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; rotate: -5deg; background: var(--bg); }
.facts dd { margin: 0; font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
.facts dd strong { display: block; font-size: 1.12rem; }

.x-shot-wrap { width: 100%; min-width: 0; }
.x-shot-card { background: #000000; color: #E7E9EA; border: 2.5px solid var(--ink); border-radius: 24px; overflow: hidden; box-shadow: 7px 7px 0 var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.x-shot-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 10px 14px; background: #0B191E; border-bottom: 1px solid #2F3336; font-size: .75rem; }
.x-shot-pill { font-family: var(--mono); font-weight: 700; color: #63E0CC; letter-spacing: .05em; }
.x-shot-head a { color: #8FB8B3; text-decoration: none; font-family: var(--mono); overflow-wrap: anywhere; }
.x-shot-head a:hover { color: #FFFFFF; text-decoration: underline; }
.x-post { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 14px 16px; }
.x-post.reply-post { background: #071418; border-top: 1.5px solid #1E4E54; }
.x-avatar-col { display: flex; flex-direction: column; align-items: center; }
.x-av { width: 42px; height: 42px; object-fit: cover; border: 1px solid #2F3336; flex: none; }
.x-av.round { border-radius: 50%; }
.x-av.square { border-radius: 8px; }
.x-thread-line { width: 2px; flex: 1; background: #333639; margin-top: 6px; min-height: 24px; }
.x-post-body { min-width: 0; }
.x-user-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; line-height: 1.25; }
.x-user-row strong { color: #E7E9EA; font-size: .96rem; }
.x-verified { display: inline-grid; place-items: center; width: 16px; height: 16px; font-size: 10px; font-weight: 900; line-height: 1; flex-shrink: 0; }
.x-verified.blue { background: #1D9BF0; color: #FFFFFF; border-radius: 50%; }
.x-verified.gold { background: #E2B719; color: #000000; border-radius: 4px; }
.x-handle { color: #71767B; font-size: .86rem; }
.x-reply-badge { background: #123E46; color: #8CEFDF; font-family: var(--mono); font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.x-replying-to { color: #71767B; font-size: .84rem; margin-top: 2px; }
.x-replying-to a { color: #1D9BF0; text-decoration: none; }
.x-text { color: #E7E9EA; font-size: 1.12rem; margin: 8px 0 10px; overflow-wrap: anywhere; }
.x-text.x-big-reply { font-size: 1.55rem; font-weight: 700; color: #FFFFFF; margin: 6px 0 8px; }
.x-media-box { display: block; border-radius: 14px; overflow: hidden; border: 1px solid #2F3336; max-height: 360px; }
.x-media-box img { width: 100%; height: 100%; object-fit: cover; }
.x-meta-row { color: #71767B; font-size: .8rem; margin-top: 10px; line-height: 1.4; }
.x-meta-row b { color: #E7E9EA; }
@media (max-width: 420px) {
  .x-post { grid-template-columns: 34px 1fr; gap: 10px; padding: 12px; }
  .x-av { width: 34px; height: 34px; }
}

/* Card Pull-Up on Hover across Origin, Anatomy, Feature Doors, and Album Stickers */
.x-shot-card,
.anatomy-card,
.door {
  transition: transform 0.24s cubic-bezier(.22,1,.36,1), box-shadow 0.24s cubic-bezier(.22,1,.36,1);
}
.x-shot-card:hover,
.anatomy-card:hover,
.door:hover {
  transform: translateY(-10px);
  box-shadow: 8px 14px 0 var(--ink);
}
.anatomy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 26px;
}
.anatomy-card {
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 5px 5px 0 var(--ink);
  display: grid;
  gap: 10px;
  align-content: start;
}
.anat-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  font: 700 1rem var(--mono);
  box-shadow: 3px 3px 0 var(--pip);
}
.anatomy-card h3 { font-size: 1.25rem; }
.anatomy-card p { color: var(--muted); font-size: .96rem; }
@media (max-width: 980px) { .anatomy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .anatomy-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   Kinepip's World (Three feature doors)
   ============================================================================ */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.door { display: flex; flex-direction: column; border: 2.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--surface); backdrop-filter: blur(12px); box-shadow: 6px 6px 0 var(--ink); min-width: 0; }
.door .scene { aspect-ratio: 4 / 3; display: grid; place-items: center; border-bottom: 2.5px solid var(--ink); padding: 12px; }
.door .scene svg { height: 86%; width: auto; max-height: 190px; }
.door .text { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.door h3 { font-size: 1.55rem; }
.door p { color: var(--muted); font-size: .98rem; }
.door ul { margin: 2px 0 0; padding-left: 1.15em; color: var(--muted); font-size: .95rem; }
.door ul code { font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }
.door .btn { margin-top: auto; align-self: flex-start; }
.swap-scene { --rx: 70%; --ry: 30%; }
.launch-scene { --rx: 30%; --ry: 75%; }
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 90%; color: var(--mini-ink); }
.mini-stats div { border: 2px solid var(--mini-border); border-radius: 14px; padding: 9px 10px; background: var(--mini-bg); min-width: 0; }
.mini-stats span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mini-label); font-weight: 700; }
.mini-stats b { font: 600 .95rem var(--mono); overflow-wrap: anywhere; display: block; margin-top: 2px; }
@media (max-width: 960px) { .doors { grid-template-columns: 1fr; max-width: 580px; margin-inline: auto; } }

/* ============================================================================
   The Album & Stickers Grid
   ============================================================================ */
.album-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.scroll-sheet {
  border: 2.5px solid var(--ink);
  border-radius: 28px;
  background: var(--surface);
  backdrop-filter: blur(14px);
  padding: clamp(14px, 3vw, 32px);
  box-shadow: 7px 7px 0 var(--ink);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}
.sticker { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sticker .art {
  position: relative;
  background: var(--bg);
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  padding: 12px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transition: transform .18s ease;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink);
}
.sticker .art.album-art { padding: 0; }
.sticker .art.album-art svg,
.sticker .art.album-art img { width: 100%; height: 100%; object-fit: cover; }
.photo-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  width: fit-content;
  max-width: calc(100% - 20px);
  z-index: 2;
  background: rgb(7 38 43 / 0.88);
  color: #7CE8D3;
  border: 1.5px solid #7CE8D3;
  border-radius: 999px;
  padding: 3px 10px;
  font: 700 .7rem/1.2 var(--mono);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticker:nth-child(odd) .art { rotate: -0.6deg; }
.sticker:nth-child(even) .art { rotate: 0.6deg; }
.sticker .art {
  transition: transform 0.24s cubic-bezier(.22,1,.36,1), box-shadow 0.24s cubic-bezier(.22,1,.36,1), rotate 0.24s ease;
}
.sticker:hover .art,
.sticker:focus-within .art {
  transform: translateY(-10px) scale(1.02);
  rotate: 0deg;
  box-shadow: 6px 12px 0 var(--ink);
}
.sticker figcaption { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-weight: 500; min-width: 0; }
.sticker figcaption > div { min-width: 0; }
.sticker figcaption strong { display: block; font-size: 1.04rem; overflow-wrap: anywhere; }
.sticker figcaption span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.35; margin-top: 2px; }
.sticker .dl { flex: none; }
@media (max-width: 920px) { .scroll-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .scroll-sheet { grid-template-columns: 1fr; } }

/* ============================================================================
   Interactive Peeking Footer Cards + Footer
   Tucked behind the footer border by default; pull all the way up on hover/focus!
   ============================================================================ */
.pip-crowd {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(4px, 1.2vw, 14px);
  max-width: 1020px;
  margin: 0 auto -54px;
  padding: 64px 12px 0;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.crowd-head {
  position: relative;
  width: clamp(46px, 11vw, 122px);
  aspect-ratio: 1;
  padding: 0;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--ring);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  flex-shrink: 1;
  transform: translateY(42%) rotate(var(--tilt, 0deg));
  transition: transform 0.28s cubic-bezier(.22,1.25,.36,1), box-shadow 0.24s ease;
}
.crowd-head svg {
  width: 100%;
  height: 100%;
  display: block;
}
.crowd-tag {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  background: rgb(7 38 43 / 0.9);
  color: #7CE8D3;
  border: 1px solid #7CE8D3;
  border-radius: 999px;
  padding: 2px 6px;
  font: 700 .64rem/1.15 var(--mono);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.crowd-head:hover,
.crowd-head:focus-visible {
  transform: translateY(-22px) rotate(0deg) scale(1.08);
  z-index: 10;
  box-shadow: 6px 12px 0 var(--pip);
}
.crowd-head:hover .crowd-tag,
.crowd-head:focus-visible .crowd-tag {
  opacity: 1;
  transform: translateY(0);
}
.crowd-head [data-pupils] { transition: transform 0.08s linear; }
.foot { position: relative; z-index: 2; margin-top: 12px; }
.foot .wrap {
  position: relative;
  z-index: 3;
  background: var(--surface);
  backdrop-filter: blur(14px);
  border: 2.5px solid var(--ink);
  border-radius: 28px 28px 0 0;
  padding: clamp(24px, 4vw, 38px) clamp(16px, 3.5vw, 40px) calc(28px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 0 var(--ink);
  display: grid;
  gap: 16px;
}
.foot .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.foot .big { font-size: clamp(1.6rem, 4.8vw, 2.8rem); font-weight: 700; }
.foot .links { display: flex; flex-wrap: wrap; gap: 8px; }
.foot .fine { color: var(--muted); font-size: .92rem; max-width: 84ch; overflow-wrap: anywhere; }
.foot code { font-family: var(--mono); font-size: .88rem; overflow-wrap: anywhere; }

/* ============================================================================
   Page Heads for Dedicated Inner Pages (Adapts to Light & Dark theme!)
   ============================================================================ */
.page-head { position: relative; z-index: 2; padding-top: clamp(16px, 3vw, 32px); }
.page-head .wrap {
  background: var(--hero-surface);
  backdrop-filter: blur(14px);
  border: 2.5px solid var(--hero-border);
  border-radius: 28px;
  padding: clamp(20px, 3.8vw, 40px);
  box-shadow: 7px 7px 0 var(--hero-shadow);
  color: var(--hero-ink);
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}
.page-head h1 { font-size: clamp(2rem, 5.8vw, 3.8rem); text-shadow: 3px 3px 0 var(--hero-title-shadow); margin-top: 4px; color: var(--hero-ink); }
.page-head p { color: var(--hero-sub); font-size: clamp(1rem, 2vw, 1.12rem); margin-top: 8px; max-width: 54ch; }
.page-head code { font-family: var(--mono); background: var(--ca-bg); padding: 2px 6px; border-radius: 6px; color: var(--hero-kicker); font-weight: 600; }
.page-head svg { width: clamp(92px, 14vw, 148px); flex: none; }
@media (max-width: 640px) { .page-head svg { display: none; } }

/* ============================================================================
   Pipify Banner & Studio (/pipify/)
   ============================================================================ */
.pipify-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 2.5px solid var(--ink);
  border-radius: 24px;
  padding: 16px 20px;
  box-shadow: 5px 5px 0 var(--ink);
  margin-bottom: 26px;
}
.pipify-step { display: flex; align-items: center; gap: 12px; min-width: 0; }
.step-badge { background: var(--ink); color: var(--bg); font: 700 .76rem var(--mono); padding: 4px 10px; border-radius: 999px; flex-shrink: 0; }
.step-badge.out { background: var(--pip); color: #07262B; }
.step-av { width: 58px; height: 58px; border-radius: 16px; border: 2px solid var(--ink); overflow: hidden; flex: none; background: var(--ring); }
.step-av img, .step-av svg { width: 100%; height: 100%; object-fit: cover; }
.pipify-step strong { display: block; font-size: 1rem; }
.pipify-step small { color: var(--muted); font-size: .86rem; display: block; }
.pipify-arrow { font-size: 1.8rem; font-weight: 700; color: var(--pip-ink); }
@media (max-width: 640px) {
  .pipify-banner { flex-direction: column; align-items: stretch; }
  .pipify-arrow { align-self: center; transform: rotate(90deg); }
}

.maker { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(20px, 3.8vw, 44px); align-items: start; }
.stage { border: 2.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: 6px 6px 0 var(--ink); background: var(--ring); position: relative; touch-action: none; }
.stage canvas { width: 100%; height: auto; aspect-ratio: 1; cursor: grab; }
.stage canvas:active { cursor: grabbing; }
.stage .hint { position: absolute; left: 12px; right: 12px; bottom: 12px; width: fit-content; max-width: calc(100% - 24px); background: rgb(7 38 43 / .86); color: var(--foam); padding: 6px 12px; border-radius: 999px; font-size: .84rem; }
.x-lookup { border: 2.5px solid var(--ink); border-radius: 18px; padding: 14px; background: var(--bg-2); display: grid; gap: 10px; }
.x-card { margin-top: 14px; padding: 12px 16px; border: 2.5px solid var(--ink); border-radius: 16px; background: var(--surface); }
.x-badge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.x-badge span { color: var(--muted); font-family: var(--mono); font-size: .88rem; }
.drop { display: grid; gap: 4px; place-items: center; text-align: center; padding: 16px 14px; border: 2.5px dashed var(--muted); border-radius: 18px; cursor: pointer; background: var(--bg); }
.drop.over { border-color: var(--pip); background: var(--bg-2); }
.drop b { font-size: 1.02rem; }
.drop small { color: var(--muted); }
.controls { display: grid; gap: 16px; }
.two-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span, fieldset legend { font-weight: 600; font-size: .95rem; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 2px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .9rem; background: var(--bg); }
.check:has(input:checked) { border-color: var(--ink); background: var(--bg-2); font-weight: 600; }
.check input { width: 16px; height: 16px; accent-color: var(--pip-ink); flex-shrink: 0; }
input[type="range"] { width: 100%; accent-color: var(--pip-ink); min-height: 34px; }
.privacy { color: var(--muted); font-size: .88rem; }
.privacy code { font-family: var(--mono); }
@media (max-width: 900px) { .maker { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .two-sliders { grid-template-columns: 1fr; } }

/* ============================================================================
   Swap & Market Terminals
   ============================================================================ */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 2px solid currentColor; font-weight: 600; font-size: .86rem; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill.live { color: var(--good); }
.pill.wait { color: var(--muted); }
.pill.warn { color: var(--bad); }
.up-txt { color: var(--good); font-weight: 600; }
.down-txt { color: var(--bad); font-weight: 600; }

.token-bar { border: 2.5px solid var(--ink); border-radius: var(--radius); padding: clamp(14px, 2.5vw, 20px); background: var(--surface); backdrop-filter: blur(12px); box-shadow: 5px 5px 0 var(--ink); display: grid; gap: 14px; margin-bottom: 22px; }
.token-bar-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.token-bar-top code { font-family: var(--mono); font-size: .88rem; overflow-wrap: anywhere; }

.market-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 2.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--surface); backdrop-filter: blur(12px); box-shadow: 5px 5px 0 var(--ink); }
.stat { padding: 14px 16px; border-right: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); min-height: 92px; min-width: 0; }
.stat:nth-child(4n) { border-right: 0; }
.stat span { display: block; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stat b { display: block; margin-top: 6px; font: 600 clamp(1.02rem, 2vw, 1.24rem) var(--mono); overflow-wrap: anywhere; }
.stat small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2n) { border-right: 0; }
}
@media (max-width: 380px) {
  .market-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; }
}

.terminal-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, .88fr); gap: clamp(18px, 3vw, 30px); margin-top: 24px; align-items: start; }
@media (max-width: 960px) {
  .terminal-grid { grid-template-columns: 1fr; }
}

.chart-col { min-width: 0; }
.chart-box { border: 2.5px solid var(--ink); border-radius: var(--radius); padding: clamp(14px, 2.5vw, 20px); background: var(--surface); backdrop-filter: blur(12px); box-shadow: 5px 5px 0 var(--ink); min-width: 0; }
.chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.chart-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.chart-meta { display: block; color: var(--muted); font-family: var(--mono); font-size: .8rem; margin-top: 4px; }
.seg { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--bg); }
.seg button { min-height: 38px; padding: 0 12px; border: 0; background: transparent; color: var(--ink); font: 600 .88rem var(--display); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.chart { margin-top: 14px; height: clamp(220px, 34vw, 340px); display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.chart svg { width: 100%; height: 100%; cursor: crosshair; }
.buy-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.swap-card { border: 2.5px solid var(--ink); border-radius: var(--radius); padding: clamp(16px, 2.8vw, 22px); background: var(--surface-2); backdrop-filter: blur(14px); box-shadow: 6px 6px 0 var(--ink); display: grid; gap: 16px; min-width: 0; }
.swap-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.swap-card-head h2 { font-size: 1.45rem; }
.quote-box { border: 2px solid var(--line); border-radius: 16px; padding: 14px; background: var(--bg); display: grid; gap: 12px; min-width: 0; }
.quote-main span { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.quote-main b { display: block; font: 700 1.35rem var(--mono); margin-top: 2px; color: var(--pip-ink); overflow-wrap: anywhere; }
.quote-details { margin: 0; display: grid; gap: 6px; border-top: 1.5px solid var(--line); padding-top: 10px; font-size: .9rem; }
.quote-details > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; }
.quote-details dt { color: var(--muted); }
.quote-details dd { margin: 0; font-family: var(--mono); font-size: .84rem; text-align: right; overflow-wrap: anywhere; }
.slippage-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: .92rem; }
.fine-note { font-size: .84rem; color: var(--muted); line-height: 1.45; }
.fine-note code { font-family: var(--mono); overflow-wrap: anywhere; }

.route-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); }
.route-banner small { display: block; font-size: .74rem; text-transform: uppercase; color: var(--muted); }
.route-banner .arrow { font-size: 1.35rem; font-weight: 700; color: var(--pip-ink); }

/* ============================================================================
   Trade pages (/swap/, /market/): the card sits beside the intro, above the fold;
   on tablets and phones it follows the intro directly.
   ============================================================================ */
.trade-hero { position: relative; z-index: 2; padding-top: clamp(16px, 3vw, 32px); }
.trade-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-areas: "intro card" "side card";
  grid-template-rows: auto 1fr;
  gap: clamp(16px, 2.6vw, 28px);
  align-items: start;
}
.trade-intro { grid-area: intro; }
.trade-side { grid-area: side; display: grid; gap: 18px; min-width: 0; }
.trade-side > * { margin: 0; }
.trade-card { grid-area: card; }
@media (max-width: 960px) {
  .trade-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "card" "side"; grid-template-rows: auto; }
}

.hero-panel {
  background: var(--hero-surface);
  backdrop-filter: blur(14px);
  border: 2.5px solid var(--hero-border);
  border-radius: 28px;
  padding: clamp(18px, 3.2vw, 34px);
  box-shadow: 7px 7px 0 var(--hero-shadow);
  color: var(--hero-ink);
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  min-width: 0;
}
.hero-panel h1 { font-size: clamp(2rem, 4.8vw, 3.4rem); text-shadow: 3px 3px 0 var(--hero-title-shadow); margin-top: 4px; color: var(--hero-ink); }
.hero-panel p { color: var(--hero-sub); font-size: clamp(.98rem, 1.8vw, 1.08rem); margin-top: 8px; max-width: 52ch; }
.hero-panel > svg { width: clamp(84px, 11vw, 132px); flex: none; }
@media (max-width: 640px) { .hero-panel > svg { display: none; } }

.route-line { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; font-weight: 700; }
.chain-badge { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 12px; border: 2px solid var(--hero-border); border-radius: 999px; background: var(--ca-bg); font-size: .9rem; white-space: nowrap; }
.chain-badge small { font: 600 .78rem var(--mono); opacity: .75; }
.route-dots { flex: 1 1 40px; max-width: 120px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--hero-ink) 0 5px, transparent 5px 11px) 0 0 / 22px 3px; opacity: .55; animation: route-flow 1.1s linear infinite; }
@keyframes route-flow { to { background-position: 22px 0; } }

.trade-side .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trade-side .market-grid .stat:nth-child(odd) { border-right: 1.5px solid var(--line); }
.trade-side .market-grid .stat:nth-child(2n) { border-right: 0; }
.trade-side .token-bar { margin-bottom: 0; }

/* The card */
.trade-card { gap: 14px; }
.trade-card .swap-card-head { flex-wrap: nowrap; }
.gear-btn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 12px; background: var(--bg); color: var(--ink); cursor: pointer; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .15s; }
.gear-btn:hover { background: var(--bg-2); }
.gear-btn[aria-expanded="true"] { transform: rotate(60deg); background: var(--ink); color: var(--bg); }
.gear-btn svg { width: 20px; height: 20px; }
.slip-panel { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 2px dashed var(--line); border-radius: 14px; font-weight: 600; font-size: .9rem; }
.slip-panel[hidden] { display: none; }

.trade-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--bg); }
.trade-tabs button { min-height: 50px; border: 0; background: transparent; color: var(--ink); font: 700 1rem var(--display); cursor: pointer; display: grid; place-content: center; gap: 1px; line-height: 1.15; padding: 6px; transition: background .18s, color .18s; }
.trade-tabs button small { font: 600 .74rem var(--mono); color: var(--muted); }
.trade-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.trade-tabs button[aria-pressed="true"] small { color: inherit; opacity: .8; }

.trade-box { border: 2px solid var(--line); border-radius: 18px; background: var(--bg); padding: 12px 14px; display: grid; gap: 8px; min-width: 0; transition: border-color .15s; }
.trade-box:focus-within { border-color: var(--ink); }
.trade-box-top, .trade-box-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; font-size: .84rem; color: var(--muted); font-weight: 600; min-width: 0; }
.trade-box-top b, .trade-box-foot b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.chain-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; }
.chain-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pip); box-shadow: 0 0 0 2px var(--ink); }
.trade-box-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trade-amount { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--ink); font: 700 clamp(1.45rem, 4vw, 1.95rem) var(--mono); padding: 2px 0; outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-amount::placeholder { color: var(--muted); opacity: .55; }
output.trade-amount { display: block; color: var(--pip-ink); }
output.trade-amount.busy { opacity: .55; }
.token-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 48%; min-height: 40px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--surface); color: var(--ink); font: 700 .95rem var(--display); box-shadow: 2px 2px 0 var(--pip); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.token-pill { cursor: pointer; transition: transform .12s; }
button.token-pill:hover { transform: translate(-1px, -1px); }
.amt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.amt-chips button { min-height: 30px; padding: 0 11px; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 600 .8rem var(--display); cursor: pointer; transition: background .15s, border-color .15s; }
.amt-chips button:hover { border-color: var(--ink); background: var(--bg-2); }
.flip-btn { justify-self: center; margin: -13px 0; position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 13px; border: 2.5px solid var(--ink); background: var(--surface-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 2px 2px 0 var(--pip); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.flip-btn:hover { transform: rotate(180deg); }
.flip-btn svg { width: 20px; height: 20px; }
.trade-rows { border-top: 0; padding: 2px 4px 0; }
.trade-rows dd.up-txt { color: var(--good); }
.trade-rows dd.down-txt { color: var(--bad); }


@media (pointer: coarse) {
  .amt-chips button { min-height: 36px; padding: 0 13px; }
  .gear-btn, .flip-btn { width: 44px; height: 44px; }
}
@media (max-width: 420px) {
  .trade-box { padding: 10px 12px; }
  .token-pill { padding: 0 11px; font-size: .9rem; }
  .trade-tabs button { font-size: .94rem; }
}
.track-result { margin-top: 14px; padding-top: 10px; border-top: 1.5px solid var(--line); }

.note-box { margin-bottom: 22px; padding: 14px 18px; border: 2.5px dashed var(--pip-ink); border-radius: 18px; background: var(--surface); backdrop-filter: blur(12px); color: var(--ink); overflow-wrap: anywhere; }
.list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1.5px solid var(--line); }
.list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; justify-content: space-between; padding: 10px 0; border-bottom: 1.5px solid var(--line); font-size: .92rem; }
.list li > * { min-width: 0; }
.list code { font-family: var(--mono); font-size: .86rem; overflow-wrap: anywhere; word-break: break-all; }
.list small { color: var(--muted); }

.three-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 28px); margin-top: 32px; }
.three-panels h2 { font-size: 1.4rem; margin-bottom: 4px; }
.three-panels .intro { font-size: .94rem; }
@media (max-width: 980px) { .three-panels { grid-template-columns: 1fr; } }

/* Docs */
.docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(20px, 4.5vw, 56px); }
.toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 4px; }
.toc a { padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem; min-height: 38px; display: flex; align-items: center; }
.toc a:hover { background: var(--bg-2); color: var(--ink); }
.prose { max-width: 78ch; min-width: 0; }
.prose h2 { font-size: clamp(1.45rem, 3.6vw, 1.85rem); margin: 38px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line); scroll-margin-top: 96px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin: 22px 0 8px; color: var(--ink); }
.prose p, .prose li { font-size: 1rem; overflow-wrap: anywhere; line-height: 1.6; }
.prose p + p { margin-top: 12px; }
.prose ol, .prose ul { padding-left: 1.3em; display: grid; gap: 7px; margin: 10px 0; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--bg-2); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.prose pre { background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; overflow-x: auto; font-family: var(--mono); font-size: .85rem; margin: 12px 0; }
.prose pre code { background: none; padding: 0; }
.prose .doc-table-wrap { overflow-x: auto; margin: 14px 0; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; text-align: left; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1.5px solid var(--line); vertical-align: top; }
.prose th { background: var(--bg-2); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.prose tr:last-child td { border-bottom: 0; }
.prose .callout { border-left: 5px solid var(--pip); padding: 12px 16px; background: var(--bg-2); border-radius: 0 14px 14px 0; margin: 16px 0; }
@media (max-width: 820px) {
  .docs { grid-template-columns: 1fr; }
  .toc { position: static; grid-auto-flow: column; justify-content: start; overflow-x: auto; padding-bottom: 6px; }
  .toc a { white-space: nowrap; }
}

/* Touch Target Comfort Goal (~44x44 CSS px on touch devices per R10) */
@media (pointer: coarse) {
  .btn, .btn.small, .chip, .seg button, .check, .nav a, .toc a, .theme-pill, .icon-btn {
    min-height: 44px;
  }
}

/* Loader: shown from the first paint by theme-init.js (html.waking) and played in full by CSS alone (~2.4s), so it can
   never stick. html.woke (any tap / click / key, with no hint on screen) ends it at once. */
.loader { display: none; }
html.waking .loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden;
  height: 100vh; height: 100dvh;
  background: var(--ring); color: var(--hero-ink);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none;
  animation: loader-out .45s cubic-bezier(.4, 0, .2, 1) 1.95s forwards;
}
/* The ring tunnel, breathing outward behind Pip. */
html.waking .loader::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 18px, var(--ring-line) 18px 21px);
  animation: loader-rings 2.4s cubic-bezier(.2, .7, .3, 1) both;
}
html.waking.woke .loader { animation: loader-out .24s ease-out forwards; }
.loader-inner { position: relative; display: grid; justify-items: center; gap: 14px; padding: 16px; animation: loader-lift .45s cubic-bezier(.4, 0, .2, 1) 1.95s forwards; }
html.woke .loader-inner { animation: loader-lift .24s ease-out forwards; }
.loader-pip { width: clamp(140px, 36vmin, 230px); animation: loader-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.loader-pip svg { display: block; width: 100%; height: auto; transform-origin: 50% 92%; animation: loader-bob .8s ease-in-out .6s infinite alternate; }
.loader-pip [data-pupils] { transform-box: fill-box; transform-origin: center; animation: loader-blink 2.4s linear both; }
.loader p { position: relative; display: grid; margin: 0; font-weight: 600; font-size: clamp(1rem, 2.6vmin, 1.15rem); text-align: center; animation: loader-fade .35s ease .2s both; }
.loader p > span { grid-area: 1 / 1; }
.loader-waking { animation: loader-swap-out .25s ease 1.45s forwards; }
.loader-waking::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: loader-dots 1.2s steps(4, end) infinite; }
.loader-awake { opacity: 0; animation: loader-swap-in .3s cubic-bezier(.34, 1.56, .64, 1) 1.55s forwards; }
@keyframes loader-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes loader-lift { to { transform: translateY(-16px) scale(1.08); } }
@keyframes loader-pop { from { opacity: 0; transform: scale(.5) rotate(-10deg); } }
@keyframes loader-bob { to { transform: translateY(-7px) rotate(2deg) scaleY(1.02); } }
@keyframes loader-fade { from { opacity: 0; transform: translateY(8px); } }
@keyframes loader-rings { from { opacity: 0; transform: scale(.55); } 30% { opacity: 1; } to { opacity: 1; transform: scale(1.12); } }
@keyframes loader-blink { 0%, 34%, 40%, 66%, 72%, 100% { transform: scaleY(1); } 37%, 69% { transform: scaleY(.1); } }
@keyframes loader-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
@keyframes loader-swap-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes loader-swap-in { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); translate: -50% 0; background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 999px; font-weight: 600; z-index: 60; opacity: 0; transition: opacity .2s; pointer-events: none; box-shadow: 4px 4px 0 var(--pip); max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.waking .loader { display: none; }
  .ticker-track { width: auto; flex-wrap: wrap; }
  .ticker ul[aria-hidden="true"] { display: none; }
  .ticker ul { flex-wrap: wrap; }
  .glass-bubble { display: none; }
}
.chart .up { stroke: var(--good); fill: var(--good); }
.chart .down { stroke: var(--bad); fill: var(--bad); }
.chart .grid { stroke: var(--line); }
.chart .axis { fill: var(--muted); font-family: var(--mono); }