:root {
  --bg: #0a0a0f;
  --bg-2: #0f1018;
  --fg: #f4f1ea;
  --fg-dim: #a9a4b3;
  --fg-mute: #6f6a78;
  --accent: #ffb86b;
  --accent-2: #ff5e87;
  --accent-3: #7a7bff;
  --border: rgba(255, 255, 255, 0.08);
  --card: rgba(255, 255, 255, 0.035);
  --radius: 18px;
  --maxw: 980px;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

body {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(122, 123, 255, 0.18), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(255, 94, 135, 0.16), transparent 60%),
    var(--bg);
  -webkit-tap-highlight-color: transparent;
}

a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

/* Non-interactive headline shouldn't trigger selection / iOS magnifier on tap */
.title, .brand, .wordmark {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- Background FX ---------- */
.mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px) saturate(140%);
  opacity: 0.55;
}
.blob {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.b1 { background: var(--blob-1, #ff5e87); top: -10%; left: -8%; animation: float1 22s ease-in-out infinite; }
.b2 { background: var(--blob-2, #7a7bff); bottom: -18%; right: -10%; animation: float2 28s ease-in-out infinite; }
.b3 { background: var(--blob-3, #ffb86b); top: 40%; left: 55%; width: 380px; height: 380px; animation: float3 26s ease-in-out infinite; opacity: 0.7; }

@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(60px,40px) scale(1.08);} }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-50px,-30px) scale(1.05);} }
@keyframes float3 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-40px,20px) scale(0.96);} }

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Layout ---------- */
.topbar, .hero, .foot { position: relative; z-index: 2; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 48px);
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-size: 15px;
  letter-spacing: -0.01em;
  font-weight: 600;
  border-radius: 12px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: transform .15s ease, background .2s ease;
}
.brand:hover { transform: translateY(-1px); }
.brand:hover .logo-mark { transform: rotate(-6deg) scale(1.05); }

.logo-mark {
  display: inline-flex;
  width: 26px; height: 26px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 95%, transparent),
    color-mix(in srgb, var(--accent-2) 95%, transparent));
  box-shadow:
    0 4px 14px -6px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .25s cubic-bezier(.2,1.4,.4,1), box-shadow .25s ease;
}
.logo-mark svg { display: block; overflow: visible; }
.logo-mark .lm-base  { fill: transparent; }
.logo-mark .lm-glyph {
  fill: #fff;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.10));
}

.wordmark { display: inline-flex; align-items: baseline; }
.wordmark .wm-name { letter-spacing: -0.015em; }
.wordmark .wm-tld {
  color: var(--fg-mute);
  font-weight: 500;
  margin-left: 1px;
  letter-spacing: -0.01em;
}
.meta { display: flex; gap: 10px; align-items: center; }

/* chip = unified pill look used by status + theme button */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg-dim);
  background: var(--card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: inherit;
  line-height: 1;
}
.pill { /* legacy alias */ }
.theme-chip {
  cursor: pointer;
  color: var(--fg);
  font-weight: 500;
  transition: transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.theme-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--fg) 22%, transparent);
  background: color-mix(in srgb, var(--fg) 6%, var(--card));
  box-shadow: 0 4px 18px -10px color-mix(in srgb, var(--fg) 40%, transparent);
}
.theme-chip:active { transform: translateY(0); }
.theme-chip:focus { outline: none; }
.theme-chip:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px color-mix(in srgb, var(--accent) 65%, transparent);
}
body.light .theme-chip { background: rgba(255,255,255,0.7); }
body.light .pill       { background: rgba(255,255,255,0.65); }
.led {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- Hero ---------- */
.hero {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(20px, 5vw, 48px) 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.kicker {
  color: var(--fg-mute);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin: 0;
  animation: rise 0.8s ease-out 0.05s both;
}

.title {
  font-family: var(--sans);
  font-weight: 600;
  /* Scale with the smaller of width/height so the headline never overflows vertically.
     Two lines of ~0.95 line-height ≈ 1.9× font-size — keep that under ~55% of viewport height. */
  font-size: clamp(56px, min(12vw, 26vh), 160px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 0;
  padding: 0 0.04em 0.16em;      /* bottom headroom for "g" descender under background-clip */
  overflow: visible;
  background: linear-gradient(180deg, #fffaf0 0%, #cdc6da 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rise 0.9s cubic-bezier(.2,.7,.1,1) 0.1s both;
}
.title .serif {
  font-family: var(--serif);
  font-weight: 400;
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 60%, var(--accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.title .italic { font-style: italic; }
.title .period {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

.phonetic {
  margin: -6px 0 0;
  color: var(--fg-mute);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  animation: rise 0.9s ease-out 0.15s both;
}

.defs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
  animation: rise 0.9s ease-out 0.2s both;
}
.def {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.def p { margin: 6px 0 0; color: var(--fg-dim); font-size: 15px; line-height: 1.55; }
.def em { color: var(--fg); font-style: italic; font-family: var(--serif); font-size: 1.05em; }
.def .lang {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-mute);
  font-weight: 600;
}

@media (max-width: 640px) {
  .defs { grid-template-columns: 1fr; }
}

/* ---------- Examples ---------- */
.examples { animation: rise 0.9s ease-out 0.25s both; }
.ex {
  appearance: none;
  width: 100%;
  text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  color: var(--fg);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.3vw, 26px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.ex:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }
.ex:active { transform: translateY(0); }
.ex-hint {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  color: var(--fg-mute);
  white-space: nowrap;
  letter-spacing: 0.04em;
}
#ex-text { transition: opacity .2s ease; }
#ex-text.swap { opacity: 0; }

/* ---------- CTA ---------- */
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  animation: rise 0.9s ease-out 0.3s both;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  font-family: inherit;
}
.cta:hover { transform: translateY(-1px); }
.cta.primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #1a1010;
  border-color: transparent;
  font-weight: 600;
}
.cta.primary:hover { filter: brightness(1.05); }
.cta.ghost:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); }

/* ---------- Footer ---------- */
.foot {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px clamp(20px, 5vw, 48px) 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}
.sig {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 520px;
}
.sig-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.sig-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--fg-dim);
  white-space: nowrap;
}
.sig-text a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,0.25);
  padding-bottom: 1px;
  transition: border-color .2s ease;
}
.sig-text a:hover { border-bottom-color: var(--accent); }
.poop { display: inline-block; animation: wobble 4s ease-in-out infinite; }
@keyframes wobble {
  0%,100% { transform: rotate(-6deg) translateY(0); }
  50%     { transform: rotate(6deg)  translateY(-2px); }
}

.legalese {
  font-size: 12px;
  color: var(--fg-mute);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.legalese .sep { opacity: .5; }

/* ---------- Animations ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

::selection { background: var(--accent); color: #1a1010; }

/* =========================================================
   LIGHT THEME (body.light) — warm, airy, playful
   Palette is driven by data-theme on <body>; defaults below.
   ========================================================= */
body.light {
  --bg: #f4ecdd;
  --fg: #1c1a17;
  --fg-dim: #5b554d;
  --fg-mute: #8b8479;
  --accent: #ff7a59;
  --accent-2: #ff4d8d;
  --accent-3: #6a5cff;
  --blob-1: #ffb199;
  --blob-2: #b7aeff;
  --blob-3: #ffe27a;
  --border: rgba(28, 26, 23, 0.10);
  --card: rgba(255, 255, 255, 0.55);
  background:
    radial-gradient(1100px 700px at 85% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, color-mix(in srgb, var(--accent-3) 18%, transparent), transparent 60%),
    var(--bg);
  transition: background-color .6s ease;
}

/* --- Theme palettes (light) — 24 variants --- */
body.light[data-theme="peach"]       { --bg:#f4ecdd; --accent:#ff7a59; --accent-2:#ff4d8d; --accent-3:#6a5cff; --blob-1:#ffb199; --blob-2:#b7aeff; --blob-3:#ffe27a; }
body.light[data-theme="mint"]        { --bg:#e9f3ea; --accent:#2fb380; --accent-2:#ff7a59; --accent-3:#3a8bff; --blob-1:#9be3c1; --blob-2:#a9d2ff; --blob-3:#ffd58a; }
body.light[data-theme="lilac"]       { --bg:#efeaf8; --accent:#8a5cff; --accent-2:#ff4d8d; --accent-3:#2fb380; --blob-1:#c7b7ff; --blob-2:#ffb7d0; --blob-3:#b7f0d8; }
body.light[data-theme="sky"]         { --bg:#e7f1f8; --accent:#3a8bff; --accent-2:#ff5e87; --accent-3:#ffb86b; --blob-1:#a8cfff; --blob-2:#ffc1cf; --blob-3:#ffdca1; }
body.light[data-theme="butter"]      { --bg:#fbf3da; --accent:#e6a100; --accent-2:#ff4d8d; --accent-3:#6a5cff; --blob-1:#ffe27a; --blob-2:#ffb7d0; --blob-3:#b7aeff; }
body.light[data-theme="bubblegum"]   { --bg:#fbe9ef; --accent:#ff4d8d; --accent-2:#6a5cff; --accent-3:#2fb380; --blob-1:#ffb1c8; --blob-2:#b7aeff; --blob-3:#a8e6c9; }
body.light[data-theme="sage"]        { --bg:#ecf0e6; --accent:#6b8e4e; --accent-2:#d4794a; --accent-3:#4a7fa8; --blob-1:#bfd49a; --blob-2:#f0c2a3; --blob-3:#b3d0e6; }
body.light[data-theme="terracotta"]  { --bg:#f5e7dc; --accent:#c85a3a; --accent-2:#d49a3a; --accent-3:#4a7fa8; --blob-1:#f0a98a; --blob-2:#f0d896; --blob-3:#a8c8df; }
body.light[data-theme="blush"]       { --bg:#fae9e6; --accent:#e25a7c; --accent-2:#c98a5a; --accent-3:#9a7fbf; --blob-1:#f5b7c6; --blob-2:#f0cba0; --blob-3:#c7b7e6; }
body.light[data-theme="ocean"]       { --bg:#e3eff0; --accent:#1f8a8a; --accent-2:#ff6b6b; --accent-3:#ffa94d; --blob-1:#9fd6d6; --blob-2:#ffb5b5; --blob-3:#ffd49b; }
body.light[data-theme="sunset"]      { --bg:#fbeadd; --accent:#ff6f4d; --accent-2:#c44dff; --accent-3:#ffb84d; --blob-1:#ffb89e; --blob-2:#e2a9ff; --blob-3:#ffd9a0; }
body.light[data-theme="forest"]      { --bg:#ebf0e3; --accent:#3a7d44; --accent-2:#d99a3a; --accent-3:#7a4a3a; --blob-1:#b0d49a; --blob-2:#f0c98a; --blob-3:#d4a890; }
body.light[data-theme="cherry"]      { --bg:#fbeae9; --accent:#d6314a; --accent-2:#3a8bff; --accent-3:#2fb380; --blob-1:#f5a5ad; --blob-2:#a8cfff; --blob-3:#9be3c1; }
body.light[data-theme="matcha"]      { --bg:#f1f0d9; --accent:#7ca84d; --accent-2:#d4794a; --accent-3:#8a5cff; --blob-1:#cce098; --blob-2:#f0bda3; --blob-3:#c7b7ff; }
body.light[data-theme="coral"]       { --bg:#fbeae3; --accent:#ff6b5e; --accent-2:#1f8a8a; --accent-3:#ffc14d; --blob-1:#ffb1a5; --blob-2:#9fd6d6; --blob-3:#ffe2a8; }
body.light[data-theme="denim"]       { --bg:#e6ecf3; --accent:#3a5a8a; --accent-2:#d4794a; --accent-3:#bfa14d; --blob-1:#a9bbd9; --blob-2:#f0bda3; --blob-3:#e2d49a; }
body.light[data-theme="mustard"]     { --bg:#f6efd6; --accent:#c89a1f; --accent-2:#6a5cff; --accent-3:#2fb380; --blob-1:#f0d57a; --blob-2:#b7aeff; --blob-3:#9be3c1; }
body.light[data-theme="rosequartz"]  { --bg:#f8eaef; --accent:#d46a8a; --accent-2:#8a7fbf; --accent-3:#7fb8a8; --blob-1:#f0b7c8; --blob-2:#c7b7e6; --blob-3:#a8d6c8; }
body.light[data-theme="arctic"]      { --bg:#e9f1f7; --accent:#4a9bd6; --accent-2:#ff6b8a; --accent-3:#8a5cff; --blob-1:#aacfe6; --blob-2:#ffb7c5; --blob-3:#c7b7ff; }
body.light[data-theme="honey"]       { --bg:#fbf0d6; --accent:#d4881f; --accent-2:#c85a3a; --accent-3:#3a8bff; --blob-1:#f0c87a; --blob-2:#f0a98a; --blob-3:#a8cfff; }
body.light[data-theme="flamingo"]    { --bg:#fbe6ea; --accent:#ff5e87; --accent-2:#ffa94d; --accent-3:#2fb380; --blob-1:#ffb1c5; --blob-2:#ffd49b; --blob-3:#9be3c1; }
body.light[data-theme="seafoam"]     { --bg:#e3f1ec; --accent:#3aaa8a; --accent-2:#ff7a59; --accent-3:#8a5cff; --blob-1:#9fe0c9; --blob-2:#ffb199; --blob-3:#c7b7ff; }
body.light[data-theme="plum"]        { --bg:#efe6ef; --accent:#8a3a6b; --accent-2:#d49a3a; --accent-3:#4a7fa8; --blob-1:#d4a9c8; --blob-2:#f0d896; --blob-3:#a8c8df; }
body.light[data-theme="lemonade"]    { --bg:#fbf6d6; --accent:#cfa31f; --accent-2:#ff5e87; --accent-3:#3a8bff; --blob-1:#f5e57a; --blob-2:#ffb1c5; --blob-3:#a8cfff; }
body.light[data-theme="apricot"]     { --bg:#fbeedd; --accent:#e88a3a; --accent-2:#7a5cff; --accent-3:#2fb380; --blob-1:#ffcfa0; --blob-2:#b7aeff; --blob-3:#9be3c1; }
body.light[data-theme="periwinkle"]  { --bg:#e8ecfb; --accent:#5a6ed4; --accent-2:#ff7a59; --accent-3:#2fb380; --blob-1:#b7c2f0; --blob-2:#ffb199; --blob-3:#9be3c1; }
body.light[data-theme="olive"]       { --bg:#eeebd6; --accent:#7a8a3a; --accent-2:#c85a3a; --accent-3:#4a7fa8; --blob-1:#cfd49a; --blob-2:#f0a98a; --blob-3:#a8c8df; }
body.light[data-theme="salmon"]      { --bg:#fbe6e0; --accent:#ff7466; --accent-2:#3a8b9a; --accent-3:#d4a93a; --blob-1:#ffb5a8; --blob-2:#a8d4dc; --blob-3:#f0d896; }
body.light[data-theme="cottoncandy"] { --bg:#f6e6f4; --accent:#e26ad6; --accent-2:#5cb3ff; --accent-3:#ffb86b; --blob-1:#f0b7e8; --blob-2:#a8cfff; --blob-3:#ffd9a8; }
body.light[data-theme="iceberg"]     { --bg:#e3eef0; --accent:#3aaab3; --accent-2:#7a5cff; --accent-3:#ff7a59; --blob-1:#9fd6dc; --blob-2:#c7b7ff; --blob-3:#ffb199; }
body.light[data-theme="dune"]        { --bg:#f3e8d2; --accent:#b88a3a; --accent-2:#c85a3a; --accent-3:#4a7fa8; --blob-1:#e6cf9a; --blob-2:#f0a98a; --blob-3:#a8c8df; }
body.light[data-theme="pistachio"]   { --bg:#eef2d8; --accent:#8aa850; --accent-2:#d46a8a; --accent-3:#4a7fa8; --blob-1:#cfdc98; --blob-2:#f0b7c8; --blob-3:#a8c8df; }
body.light[data-theme="lavenderhaze"]{ --bg:#f0eaf6; --accent:#9a7fbf; --accent-2:#ff7a59; --accent-3:#3aaab3; --blob-1:#c7b7e6; --blob-2:#ffb199; --blob-3:#9fd6dc; }
body.light[data-theme="clay"]        { --bg:#f0e3d4; --accent:#b8623a; --accent-2:#3a7d6b; --accent-3:#d4a93a; --blob-1:#e6a48a; --blob-2:#a8c7be; --blob-3:#f0d896; }
body.light[data-theme="seashell"]    { --bg:#f6ece6; --accent:#d46a5a; --accent-2:#3a8b9a; --accent-3:#bfa14d; --blob-1:#f0b7a8; --blob-2:#a8d4dc; --blob-3:#e2d49a; }
body.light[data-theme="tangerine"]   { --bg:#fbeada; --accent:#ff7a1f; --accent-2:#5cb3ff; --accent-3:#d6314a; --blob-1:#ffc796; --blob-2:#a8cfff; --blob-3:#f5a5ad; }

/* --- Theme palettes (dark) — 13 variants --- */
body:not(.light)[data-theme="midnight"]   { --bg:#0a0e1a; --accent:#5cc4ff; --accent-2:#ff5e87; --accent-3:#9a7fff; --blob-1:#1f3a8a; --blob-2:#7a3a8a; --blob-3:#3a8a7a; }
body:not(.light)[data-theme="obsidian"]   { --bg:#06070d; --accent:#4a9bff; --accent-2:#ff4d8d; --accent-3:#ffd66b; --blob-1:#2a3a8a; --blob-2:#8a2a5a; --blob-3:#8a6a2a; }
body:not(.light)[data-theme="crimson"]    { --bg:#160a0a; --accent:#ff5e5e; --accent-2:#ffc14d; --accent-3:#7a5cff; --blob-1:#8a1f1f; --blob-2:#8a6a1f; --blob-3:#3a2a8a; }
body:not(.light)[data-theme="forestnight"]{ --bg:#0a140e; --accent:#5fc28a; --accent-2:#ffb86b; --accent-3:#ff5e87; --blob-1:#1f5a3a; --blob-2:#8a5a1f; --blob-3:#8a2a4a; }
body:not(.light)[data-theme="nebula"]     { --bg:#0d0a1a; --accent:#c47aff; --accent-2:#ff5ea8; --accent-3:#5cc4ff; --blob-1:#4a2a8a; --blob-2:#8a2a6a; --blob-3:#2a6a8a; }
body:not(.light)[data-theme="cyberpunk"]  { --bg:#06060c; --accent:#ff2a8a; --accent-2:#2afff0; --accent-3:#ffe44d; --blob-1:#8a1f5a; --blob-2:#1f8a8a; --blob-3:#8a7a1f; }
body:not(.light)[data-theme="mocha"]      { --bg:#1a120e; --accent:#d4a37a; --accent-2:#ff7a59; --accent-3:#7fb8a8; --blob-1:#5a3a2a; --blob-2:#8a4a3a; --blob-3:#2a5a4a; }
body:not(.light)[data-theme="abyss"]      { --bg:#06121a; --accent:#3acfd5; --accent-2:#ff6b6b; --accent-3:#ffd66b; --blob-1:#1f5a6a; --blob-2:#8a3a3a; --blob-3:#8a6a2a; }
body:not(.light)[data-theme="eclipse"]    { --bg:#100a18; --accent:#ff8a3a; --accent-2:#7a5cff; --accent-3:#ff5e87; --blob-1:#8a4a1f; --blob-2:#3a2a8a; --blob-3:#8a2a5a; }
body:not(.light)[data-theme="carbon"]     { --bg:#0e0e10; --accent:#b8ff5e; --accent-2:#ff5ec4; --accent-3:#5ec4ff; --blob-1:#5a8a2a; --blob-2:#8a2a6a; --blob-3:#2a6a8a; }
body:not(.light)[data-theme="inkwell"]    { --bg:#0a0e18; --accent:#ffc96b; --accent-2:#5cc4ff; --accent-3:#ff7a89; --blob-1:#8a6a1f; --blob-2:#2a5a8a; --blob-3:#8a3a4a; }
body:not(.light)[data-theme="velvet"]     { --bg:#180a14; --accent:#ff7ab8; --accent-2:#ffc14d; --accent-3:#7fb8ff; --blob-1:#8a2a5a; --blob-2:#8a6a1f; --blob-3:#2a5a8a; }
body:not(.light)[data-theme="matrix"]     { --bg:#040a06; --accent:#3aff7a; --accent-2:#ffe44d; --accent-3:#5cc4ff; --blob-1:#1f6a3a; --blob-2:#8a7a2a; --blob-3:#2a5a8a; }

body.light .grain {
  opacity: 0.08;
  mix-blend-mode: multiply;
}

body.light .mesh.light-mesh {
  opacity: 0.65;
  filter: blur(70px) saturate(130%);
}
body.light .blob { mix-blend-mode: multiply; opacity: 0.55; transition: background-color .6s ease; }
body.light .b1 { background: var(--blob-1); }
body.light .b2 { background: var(--blob-2); }
body.light .b3 { background: var(--blob-3); }

body.light .brand .dot { box-shadow: 0 0 12px rgba(255, 122, 89, 0.6); }
body.light .pill { background: rgba(255, 255, 255, 0.65); }

body.light .title {
  background: linear-gradient(180deg, #1c1a17 0%, #4a4439 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.light .title .serif {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.light .title .period { color: var(--accent); -webkit-text-fill-color: var(--accent); }

body.light .cta.ghost {
  background: rgba(255, 255, 255, 0.6);
}
body.light .cta.ghost:hover {
  background: #fff;
  border-color: rgba(28, 26, 23, 0.18);
}
body.light .cta.primary { color: #fff5ef; }

body.light .sig-text a { border-bottom-color: rgba(28, 26, 23, 0.25); }
body.light ::selection { background: var(--accent); color: #fff; }

/* ---------- Minimal hero variant ---------- */
.hero-min {
  flex: 1 1 auto;
  min-height: 0;                                 /* allow children to shrink */
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 2.5vh, 22px);
  padding-top: clamp(12px, 4vh, 64px);
  padding-bottom: clamp(12px, 3vh, 48px);
}
.hero-min .title { text-align: center; }
.hero-min .cta-row { justify-content: center; }

.tagline {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--fg-dim);
  max-width: 640px;
  line-height: 1.35;
  animation: rise 0.9s ease-out 0.18s both;
}
.tagline em {
  font-style: italic;
  color: var(--fg);
  position: relative;
  padding: 0 1px;
}
.tagline em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 70%, transparent),
    color-mix(in srgb, var(--accent-2) 70%, transparent));
}
#tag-text { transition: opacity .25s ease; display: inline-block; }
#tag-text.swap { opacity: 0; }

/* ---------- Theme swatch in CTA ---------- */
.swatch {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-right: 2px;
}
.swatch i {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  transition: background-color .5s ease, transform .25s ease;
}
.swatch i:nth-child(1) { background: var(--accent); }
.swatch i:nth-child(2) { background: var(--accent-2); }
.swatch i:nth-child(3) { background: var(--accent-3); }
.theme-chip:hover .swatch i:nth-child(1) { transform: translateY(-1px); }
.theme-chip:hover .swatch i:nth-child(2) { transform: translateY(-2px); }
.theme-chip:hover .swatch i:nth-child(3) { transform: translateY(-1px); }

/* ---------- Surprise sparkle ---------- */
.spark {
  display: inline-block;
  font-size: 13px;
  color: var(--accent);
  animation: twinkle 2.4s ease-in-out infinite;
}
@keyframes twinkle {
  0%,100% { transform: rotate(0deg) scale(1);   opacity: 1; }
  50%     { transform: rotate(180deg) scale(1.25); opacity: .7; }
}
#surprise-btn:hover .spark { animation-duration: 0.9s; }

/* ---------- Shake utility (used by animations) ---------- */
.shake { animation: gm-shake 0.55s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes gm-shake {
  10%,90% { transform: translate3d(-1px,0,0); }
  20%,80% { transform: translate3d(2px,0,0); }
  30%,50%,70% { transform: translate3d(-5px,0,0); }
  40%,60% { transform: translate3d(5px,0,0); }
}

/* ---------- Global focus polish (matches theme) ---------- */
:focus { outline: none; }
button:focus-visible, a:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px color-mix(in srgb, var(--accent) 65%, transparent);
}


/* =========================================================
   MOBILE — everything above the fold, compact, tap-friendly
   ========================================================= */
@media (max-width: 640px) {
  body {
    height: 100dvh;            /* lock to viewport so footer always fits */
    min-height: 0;
    overflow: hidden;
  }

  .topbar {
    padding: 10px 14px 6px;
    gap: 8px;
    flex: 0 0 auto;
  }
  .brand { font-size: 14px; gap: 8px; padding: 2px 4px; margin: -2px -4px; min-width: 0; }
  .wordmark { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logo-mark { width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto; }
  .logo-mark svg { width: 20px; height: 20px; }

  .meta { gap: 6px; flex: 0 0 auto; }
  .chip { padding: 5px 10px; font-size: 11px; }
  /* Compact "outra cor" to just swatch dots on mobile */
  .theme-chip .chip-label { display: none; }
  .theme-chip { padding: 6px 8px; }
  .swatch i { width: 8px; height: 8px; }

  .hero-min {
    padding: 6px 16px 8px;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
  }

  /* Force the wordmark onto two lines — "ganda" / "merda." */
  .title {
    font-size: clamp(40px, min(14vw, 18vh), 80px);
    line-height: 0.98;
    padding: 0 0.04em 0.14em;     /* room for "g" tail */
    letter-spacing: -0.045em;
    word-spacing: 100vw;          /* force every word onto its own line */
    hyphens: none;
  }
  .title .serif { white-space: nowrap; }
  .title .period { word-spacing: normal; }

  .tagline {
    font-size: 16px;
    line-height: 1.3;
    padding: 0 8px;
  }

  .cta-row { gap: 10px; margin-top: 2px; flex-wrap: nowrap; }
  .cta { padding: 10px 14px; font-size: 13px; }

  .foot {
    padding: 8px 16px 12px;
    gap: 4px;
    flex: 0 0 auto;
  }
  .sig { max-width: 100%; }
  .sig-text { font-size: 12.5px; white-space: normal; }
  .sig-line { display: none; }
  .legalese { display: none; }

  /* Background FX is fine but cap blur for perf */
  .mesh { filter: blur(48px) saturate(130%); }
}

/* Very short viewports (landscape phones) */
@media (max-height: 640px) {
  .hero-min { padding-top: 4px; padding-bottom: 4px; gap: 10px; }
  .title { font-size: clamp(38px, 9vw, 64px); line-height: 0.98; padding-bottom: 0.12em; }
  .tagline { font-size: 14px; }
  .cta { padding: 8px 12px; font-size: 12.5px; }
  .foot { padding: 4px 16px 8px; }
}