@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fonts/pixelify-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/silkscreen-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/silkscreen-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/space-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/space-mono-700-latin.woff2") format("woff2"); }

/* ============================================================
   HELLO GAGA — elevated arcade-brutalism
   Tokens
   ============================================================ */
:root {
  --yellow: #ffcc01;
  --yellow-2: #ffd633;
  --yellow-deep: #f2b600;
  --blue: #1ea0f2;
  --blue-deep: #0672ba;
  --coral: #fe9b33;
  --indigo: #5161ff;
  --live: #ff2e4d;

  --ink: #101014;
  --ink-2: #1b1922;
  --muted: #6a6975;
  --paper: #fff9ec;
  --white: #ffffff;
  --cream: #fff3cf;

  --line: 3px solid var(--ink);
  --sh-sm: 4px 4px 0 var(--ink);
  --sh: 6px 6px 0 var(--ink);
  --sh-lg: 10px 10px 0 var(--ink);
  --sh-blue: 6px 6px 0 var(--blue);
  --sh-coral: 6px 6px 0 var(--coral);
  --sh-indigo: 8px 8px 0 var(--indigo);

  --f-pixel: "Pixelify Sans", "Silkscreen", monospace;
  --f-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --f-chip: "Silkscreen", monospace;
  --f-mono: "Space Mono", ui-monospace, monospace;
  --f-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1200px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);

  /* Immersive shell geometry. JS overrides --immersive-viewport-top/-left/
     -width/-height with the measured VisualViewport rect when the browser
     exposes it. Without that API the shell falls back to the layout viewport
     origin at full width, and to this height chain (dvh where supported, else
     vh). Fallbacks live in the var() defaults so an unmeasured axis can never
     inherit a stale value from a previous measurement. */
  --immersive-viewport-fallback: 100vh;
}

@supports (height: 100dvh) {
  :root { --immersive-viewport-fallback: 100dvh; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* pixel grid + grain atmosphere */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(16, 16, 20, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 16, 20, 0.045) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button,  input { font: inherit; }
button { cursor: pointer; }
img,  svg { display: block; max-width: 100%; }

/* The HTML hidden attribute must always win over component display rules
   (e.g. .btn { display: inline-flex }); otherwise controls such as the
   "Return to chat" resume button would show before a session exists. */
[hidden] { display: none !important; }
::selection { background: var(--yellow); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 80;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  font-family: var(--f-chip);
  font-size: 11px;
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: calc(28px + var(--safe-area-left));
  padding-right: calc(28px + var(--safe-area-right));
}

/* ============================================================
   Shared atoms
   ============================================================ */
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--live);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 46, 77, 0.6);
  animation: pulse 1.6s ease-out infinite;
  flex: none;
}

.btn {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-sh: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--line);
  box-shadow: 5px 5px 0 var(--btn-sh);
  font-family: var(--f-chip);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 15px 20px;
  min-height: 50px;
  transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease;
}
.btn:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--btn-sh);
}
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--btn-sh); }
/* --blue-deep on white clears WCAG AA (~5.1:1); plain --blue was ~2.85:1. */
.btn--primary { --btn-bg: var(--blue-deep); --btn-fg: var(--white); }
.btn--sm  { min-height: 44px; padding: 11px 15px; font-size: 11px; box-shadow: 4px 4px 0 var(--btn-sh); }

/* ============================================================
   Ticker
   ============================================================ */
.ticker {
  background: var(--ink);
  color: var(--yellow);
  border-bottom: var(--line);
  overflow: hidden;
  white-space: nowrap;
}
.ticker__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.ticker__group { display: flex; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 26px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ticker__item::after { content: "✦"; color: var(--coral); margin-left: 26px; }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--yellow);
  border-bottom: var(--line);
  padding-top: var(--safe-area-top);
}
.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: calc(var(--container) + 56px);
  margin: 0 auto;
  padding: 12px calc(28px + var(--safe-area-right)) 12px calc(28px + var(--safe-area-left));
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand img {
  width: 44px; height: 44px;
  image-rendering: pixelated;
  border: var(--line);
  background: var(--white);
}
.brand span {
  font-family: var(--f-pixel);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
}
.nav__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  background: var(--ink);
  color: var(--white);
  border-radius: 2px;
}
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__links a {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-chip);
  font-size: 11px;
  text-transform: uppercase;
  padding: 9px 11px;
  min-height: 44px;
  border: 2px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.nav__mobile-only { display: none; }
.nav__links a:hover,  .nav__links a:focus-visible {
  background: var(--white);
  border-color: var(--ink);
  outline: none;
}
.nav__cta { margin-left: 2px; }
.nav__menu-btn {
  display: none;
  margin-left: auto;
  background: var(--white);
  border: var(--line);
  box-shadow: var(--sh-sm);
  font-family: var(--f-chip);
  font-size: 11px;
  text-transform: uppercase;
  padding: 11px 14px;
  min-height: 44px;
  transition: transform 90ms ease, box-shadow 90ms ease, filter 90ms ease;
}
.nav__menu-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); filter: brightness(0.94); }

/* ============================================================
   Section scaffolding
   ============================================================ */
.section-eyebrow {
  display: inline-block;
  font-family: var(--f-chip);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--blue-deep);
  background: var(--cream);
  border: 2px solid var(--ink);
  padding: 6px 12px;
  box-shadow: var(--sh-sm);
  margin-bottom: 20px;
}
.feature__icon {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  font-size: 26px;
  background: var(--cream);
  border: var(--line);
  box-shadow: var(--sh-sm);
  margin-bottom: 18px;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--white);
  padding: clamp(48px, 6vw, 76px) 0 calc(28px + var(--safe-area-bottom));
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
  gap: 40px;
}
.brand--invert img { background: var(--ink); }
.brand--invert span { color: var(--white); }
.footer__brand p { margin: 18px 0; color: rgba(255,255,255,0.62); font-size: 15.5px; max-width: 360px; }
.footer__contact {
  display: grid;
  gap: 5px;
  margin: 0;
  color: rgba(255,255,255,0.62);
  font-family: var(--f-mono);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}
.footer__mail {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__col h2 {
  margin: 4px 0 16px;
  font-family: var(--f-chip);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--yellow);
}
.footer__col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  color: rgba(255,255,255,0.74);
  font-size: 15px;
  transition: color 120ms ease;
}
.footer__col a:hover { color: var(--white); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-family: var(--f-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.56);
}
.footer__age { color: var(--yellow); }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,46,77,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(255,46,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,46,77,0); }
}
/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1119px) {
  .nav__links {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    padding-top: 10px;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { background: var(--white); border: 2px solid var(--ink); }
  /* 1fr | auto | 1fr keeps the LIVE chip on the true horizontal center of the
     bar no matter how wide the brand or the Menu button are; the opened menu
     panel spans the full second row. */
  .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .brand { justify-self: start; }
  .nav__menu-btn { display: inline-flex; justify-self: end; }
  .nav__cta { display: none; }
  .nav__live { margin-left: 0; justify-self: center; }
  .nav__links { grid-column: 1 / -1; }
}

@media (min-width: 981px) and (max-height: 700px) {
  .topbar, 
  .ticker {
    display: none;
  }

  .nav {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .topbar,  .ticker { display: none; }
  .container {
    padding-left: calc(18px + var(--safe-area-left));
    padding-right: calc(18px + var(--safe-area-right));
  }
  .ticker__item { padding-inline: 18px; }
  .nav {
    padding: 10px calc(18px + var(--safe-area-right)) 10px calc(18px + var(--safe-area-left));
  }
  .nav__mobile-only { display: flex; }
  .brand span { font-size: 19px; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *,  *::before,  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Top utility bar (legal / quick links) — shared chrome
   ============================================================ */
.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.66);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: calc(var(--container) + 56px);
  margin: 0 auto;
  padding: 7px 28px;
}
.topbar__tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__links { display: flex; gap: 4px; flex: none; }
.topbar__links a {
  font-family: var(--f-chip);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--white);
  padding: 5px 9px;
  border: 2px solid transparent;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.topbar__links a:hover,  .topbar__links a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--yellow);
  color: var(--yellow);
  outline: none;
}
.topbar__links a[aria-current="page"] {
  color: var(--ink);
  background: var(--yellow);
  border-color: var(--yellow);
}

/* ============================================================
   Document / legal / support pages
   ============================================================ */
.doc-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  border-bottom: var(--line);
  padding: clamp(46px, 7vw, 86px) 0 clamp(38px, 5vw, 60px);
}
.doc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 204, 1, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 204, 1, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}
.doc-hero__inner { position: relative; z-index: 1; }
.doc-hero .section-eyebrow {
  color: var(--yellow);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--yellow);
  box-shadow: 4px 4px 0 var(--yellow);
}
.doc-hero h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(34px, 5.5vw, 66px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.doc-hero__meta {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.58);
}
.doc-hero__meta b { color: var(--yellow); font-weight: 700; }
.doc-hero__lead {
  margin: 20px 0 0;
  max-width: 700px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
}

.doc { padding: clamp(38px, 5vw, 70px) 0 clamp(60px, 7vw, 100px); }
.doc__grid {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
}
.doc__toc {
  position: sticky;
  top: 88px;
  align-self: start;
  /* A long TOC (terms has 26 entries) must scroll within the sticky viewport
     so the last items stay reachable on short desktop windows. */
  max-height: calc(100vh - 108px);
  overflow-y: auto;
}
.doc__toc summary {
  min-height: 44px;
  cursor: pointer;
  line-height: 44px;
}
.doc__toc h2 {
  display: inline;
  margin: 0;
  font-family: var(--f-chip);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.doc__toc ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.doc__toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  border-left: 3px solid transparent;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.doc__toc a:hover,  .doc__toc a.is-active {
  color: var(--ink);
  border-left-color: var(--yellow);
  background: var(--cream);
}

/* Prose */
.prose { max-width: 74ch; }
.prose > section { margin-bottom: 40px; }
.prose h2 {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 16px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  scroll-margin-top: 100px;
}
.prose h2 .num {
  flex: none;
  font-family: var(--f-pixel);
  font-size: 0.78em;
  color: var(--yellow);
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}
.prose h3 { font-family: var(--f-display); font-weight: 700; font-size: 19px; margin: 26px 0 8px; }
.prose p { margin: 0 0 14px; color: var(--ink-2); }
.prose ul,  .prose ol { margin: 0 0 16px; padding-left: 24px; color: var(--ink-2); }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--blue-deep); font-weight: 700; }
.prose a:not(.btn) { color: var(--blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 700; }
.prose hr { border: 0; border-top: var(--line); margin: 32px 0; }
.prose dl { margin: 0 0 16px; }
.prose dt { font-weight: 700; margin-top: 12px; }
.prose dd { margin: 4px 0 0; color: var(--muted); }
.prose h4 { font-family: var(--f-display); font-weight: 700; font-size: 16px; margin: 20px 0 6px; }
.prose table { width: 100%; border-collapse: collapse; border: var(--line); margin: 0 0 18px; font-size: 14.5px; }
.prose th,  .prose td { text-align: left; padding: 10px 12px; border: 1px solid var(--ink); vertical-align: top; }
.prose th { background: var(--cream); font-family: var(--f-chip); font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; }
.prose tbody tr:nth-child(even) { background: rgba(16, 16, 20, 0.035); }
.addendum { border-left: 4px solid var(--blue); padding-left: 18px; margin: 0 0 20px; }
.addendum:nth-of-type(2) { border-left-color: var(--coral); }
.addendum:nth-of-type(3) { border-left-color: var(--indigo); }
.addendum:nth-of-type(4) { border-left-color: var(--yellow-deep); }
.addendum h3 { margin-top: 0; }

.callout {
  border: var(--line);
  box-shadow: var(--sh-sm);
  background: var(--cream);
  padding: 18px 20px;
  margin: 0 0 20px;
  display: grid;
  gap: 6px;
}
.callout--warn { background: #fff0d6; box-shadow: 4px 4px 0 var(--coral); }
.callout--info { background: #e9f4ff; box-shadow: 4px 4px 0 var(--blue); }
.callout--alert { background: #ffe9ec; box-shadow: 4px 4px 0 var(--live); }
.callout__title { font-family: var(--f-chip); font-size: 12px; text-transform: uppercase; }
.callout p { margin: 0; font-size: 15.5px; }

.doc-cta {
  margin-top: 34px;
  padding: 24px 26px;
  border: var(--line);
  box-shadow: var(--sh);
  background: var(--paper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.doc-cta div { display: grid; gap: 4px; }
.doc-cta strong { font-family: var(--f-display); font-weight: 800; font-size: 18px; }
.doc-cta p { margin: 0; color: var(--muted); font-size: 15px; }

/* Support page */
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 26px;
}
.support-card {
  border: var(--line);
  box-shadow: var(--sh);
  background: var(--white);
  padding: 26px 24px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.support-card:nth-child(2) { box-shadow: var(--sh-blue); }
.support-card:nth-child(3) { box-shadow: var(--sh-coral); }
.support-card .feature__icon { margin-bottom: 14px; }
.support-card h2 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 800; font-size: 19px; }
.support-card p { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.support-card a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-chip);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--blue-deep);
}

@media (max-width: 900px) {
  .topbar__tag { display: none; }
  .topbar__inner { justify-content: center; }
  .doc__grid { grid-template-columns: 1fr; }
  .doc__toc {
    position: static;
    top: auto;
    /* Static (stacked) TOC: drop the sticky scroll box so it flows naturally. */
    max-height: none;
    overflow: visible;
    border: var(--line);
    box-shadow: var(--sh-sm);
    background: var(--cream);
    padding: 0;
  }
  .doc__toc summary { padding: 0 16px; }
  .doc__toc ol { margin: 0; padding: 0 10px 12px; }
  .support-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .topbar__links { flex-wrap: wrap; justify-content: center; gap: 2px; }
  .doc-cta { flex-direction: column; align-items: flex-start; }
}