/* Particle site styles. Offline: no network URLs; fonts are self-hosted in assets/fonts (OFL, see LICENSES there). Tokens first, then base, then components.
   Contrast ratios for every text/surface pair: design/DESIGN.md (computed by tools/contrast.py). */

/* ---------- Fonts (self-hosted, latin subset): Atkinson Hyperlegible for body and UI, Pixelify Sans for big titles ---------- */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/pixelify-sans-latin-600-normal.woff2") format("woff2"); }

/* ---------- Tokens: light (default) ---------- */
:root {
  color-scheme: light;
  --bg: #EFEAE0;            /* page: warm, slightly dimmed off-white (never pure white) */
  --surface: #FAF7F1;       /* cards, sections that hold text: one step lighter, still not white */
  --raised: #FCFAF5;        /* menus, composer, pricing highlight */
  --text: #2A2723;          /* soft near-black */
  --muted: #6B655C;
  --accent: #DDA954;        /* dawn gold, a notch deeper and calmer: action fills only */
  --accent-edge: #A87A30;   /* defines the gold button edge on light */
  --accent-text: #2A1E08;   /* text on accent */
  --link: #7A4A14;          /* accent as text */
  --secondary: #544A9E;     /* nebula violet, desaturated: highlights, focus */
  --secondary-soft: #E8E5F1;/* user bubble, tags */
  --accent-soft: #F1E4C6;   /* notices */
  --border: #E2DCCF;        /* hairlines, decorative */
  --border-strong: #8C8579; /* input edges, 3:1 UI */
  --success: #2A6A40;
  --warning: #9A4019;
  --focus: #544A9E;
  --star: 42, 39, 35;       /* rgb for starfield dots */
  --star-alpha: 0.22;
  --sky: radial-gradient(120% 80% at 50% 0%, #E8E2E6 0%, var(--bg) 60%); /* hero wash */
  --shadow-1: 0 1px 2px rgba(42, 39, 35, .05);
  --shadow-2: 0 6px 20px rgba(42, 39, 35, .06);
  /* Light mode calms the dawn art: a gentle dim on the scene layer only (never on text or bubbles) */
  --scene-filter: brightness(.88) saturate(.86);
  --scene-veil: rgba(96, 72, 44, .10);
  /* Pixel art (assets/pixel): dawn scenes and light icon sheet; stars hidden over the app scene */
  --scene-phone: url("pixel/scene3-dawn-phone.png");
  --scene-wide: url("pixel/scene3-dawn-wide.png");
  --icons: url("pixel/icons-16-light.png");
  --icons-x: url("pixel/icons-x16-light.png");
  --ground: url("pixel/ground-strip-light.png");
  --band-edge: url("pixel/band-edge-light.png");
  --scene-stars: hidden;

  /* Type */
  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Pixelify Sans", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* big titles only */
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, Menlo, monospace;
  --fs-sm: 0.9375rem;   /* 15 px: captions, legal only */
  --fs-body: 1.0625rem; /* 17 px */
  --fs-lead: 1.25rem;   /* 20 px */
  --fs-h4: 1.25rem;
  --fs-h3: 1.5rem;
  --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --lh-body: 1.6;
  --lh-tight: 1.15;
  --measure: 68ch;

  /* Spacing: 4 px base */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --gutter: 1rem;
  --container: 72rem;

  /* Radius by role */
  --r-sm: 6px;   /* inputs, tags */
  --r-md: 12px;  /* cards, bubbles */
  --r-lg: 20px;  /* hero panels, composer */
  --r-pill: 999px; /* buttons */

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
}

/* ---------- Tokens: dark (system), unless the user forced light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0D0F1F; --surface: #151831; --raised: #1E2241;
    --text: #ECEAF6; --muted: #AAA7C6;
    --accent: #F2BE5C; --accent-edge: #F2BE5C; --accent-text: #1E1606; --link: #F2BE5C;
    --secondary: #A9A1FF; --secondary-soft: #272B55; --accent-soft: #3A2F1A;
    --border: #2B3056; --border-strong: #6D7099;
    --success: #6FD49A; --warning: #FF9F7E; --focus: #A9A1FF;
    --star: 236, 234, 246; --star-alpha: 0.55;
    --sky: radial-gradient(120% 80% at 50% 0%, #1C1F44 0%, var(--bg) 65%);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, .35);
    --scene-phone: url("pixel/scene3-night-phone.png"); --scene-wide: url("pixel/scene3-night-wide.png");
    --icons: url("pixel/icons-16.png"); --scene-stars: visible;
    --icons-x: url("pixel/icons-x16.png"); --ground: url("pixel/ground-strip-dark.png"); --band-edge: url("pixel/band-edge-dark.png"); --scene-filter: none; --scene-veil: transparent;
  }
}

/* ---------- Tokens: dark (forced by the toggle) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D0F1F; --surface: #151831; --raised: #1E2241;
  --text: #ECEAF6; --muted: #AAA7C6;
  --accent: #F2BE5C; --accent-edge: #F2BE5C; --accent-text: #1E1606; --link: #F2BE5C;
  --secondary: #A9A1FF; --secondary-soft: #272B55; --accent-soft: #3A2F1A;
  --border: #2B3056; --border-strong: #6D7099;
  --success: #6FD49A; --warning: #FF9F7E; --focus: #A9A1FF;
  --star: 236, 234, 246; --star-alpha: 0.55;
  --sky: radial-gradient(120% 80% at 50% 0%, #1C1F44 0%, var(--bg) 65%);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, .35);
  --scene-phone: url("pixel/scene3-night-phone.png"); --scene-wide: url("pixel/scene3-night-wide.png");
  --icons: url("pixel/icons-16.png"); --scene-stars: visible;
    --icons-x: url("pixel/icons-x16.png"); --ground: url("pixel/ground-strip-dark.png"); --band-edge: url("pixel/band-edge-dark.png"); --scene-filter: none; --scene-veil: transparent;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font);
  overflow-x: hidden;           /* guard: no horizontal scroll */
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(ul, ol)[class] { list-style: none; padding: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 650; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.025em; }
/* Pixel display face: page titles, hero headings and Our Story slide titles only (never body, buttons or small text).
   It runs wider than the body face, so no negative tracking and a slightly smaller scale. */
h1, .story h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; overflow-wrap: break-word; }
h1 { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.5rem); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p, li { max-width: var(--measure); text-wrap: pretty; }
.lead { font-size: var(--fs-lead); color: var(--muted); }
.small { font-size: var(--fs-sm); }
.muted { color: var(--muted); }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
code, kbd, pre { font-family: var(--mono); font-size: 0.94em; }
pre { background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-4); overflow-x: auto; }
.flow > * + * { margin-top: var(--s-4); } /* vertical rhythm inside text blocks */

/* ---------- Accessibility helpers ---------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--raised); color: var(--text); padding: var(--s-2) var(--s-4);
  border: 2px solid var(--focus); border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--s-4); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout: container and sections ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-8); background: var(--bg); } /* solid: stars never show through */
.section--surface { background: var(--surface); border-block: 1px solid var(--border); }
.section__head { margin-bottom: var(--s-6); max-width: 44rem; }
.section__head > * + * { margin-top: var(--s-3); }
@media (min-width: 48rem) { :root { --gutter: 1.5rem; } .section { padding-block: var(--s-9); } }

/* ---------- Header and nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; gap: var(--s-4); min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text); text-decoration: none; font-weight: 650; font-size: 1.125rem; }
.brand svg { width: 28px; height: 28px; color: var(--accent-edge); }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.nav__list { display: none; gap: var(--s-1); }
.nav__list a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-pill); color: var(--muted); text-decoration: none; }
.nav__list a:hover { color: var(--text); background: var(--secondary-soft); }
.nav__list a[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav__toggle { display: inline-flex; } /* menu button on phones */
.nav[data-open="true"] .nav__list {
  display: flex; flex-direction: column; position: absolute; inset: 4rem 0 auto 0;
  background: var(--raised); border-bottom: 1px solid var(--border); padding: var(--s-3) var(--gutter); box-shadow: var(--shadow-2);
}
@media (min-width: 68rem) {
  .nav__list, .nav[data-open="true"] .nav__list { display: flex; flex-direction: row; position: static; background: none; border: 0; padding: 0; box-shadow: none; }
  .nav__toggle { display: none; }
}
.theme-toggle { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding-block: var(--s-7); color: var(--muted); font-size: var(--fs-sm); }
.site-footer .grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.site-footer h2 { font-size: 1rem; color: var(--text); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.site-footer .legal { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2); justify-content: center;
  min-height: 2.75rem; padding: 0.625rem 1.25rem; border-radius: var(--r-pill);
  border: 1px solid transparent; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent-edge); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.btn--secondary { background: var(--raised); color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--secondary-soft); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--secondary-soft); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--raised); color: var(--muted); border-color: var(--border-strong); cursor: not-allowed; } /* calm, still readable (muted on raised passes AA) */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--shadow-1); }
.card > * + * { margin-top: var(--s-3); }
.card h3 { font-size: var(--fs-h4); }
.card__icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--secondary-soft); color: var(--secondary); }
.tag { display: inline-block; padding: 0.125rem 0.625rem; border-radius: var(--r-pill); background: var(--secondary-soft); color: var(--text); font-size: var(--fs-sm); }
.tag--planned { background: var(--accent-soft); }

/* ---------- Hero (starfield lives behind it, text sits on .hero__panel) ---------- */
.hero { position: relative; isolation: isolate; background: var(--sky); padding-block: var(--s-8) var(--s-8); overflow: hidden; }
.hero__panel {
  position: relative; max-width: 46rem; margin-inline: auto; text-align: center;
  background: color-mix(in srgb, var(--bg) 92%, transparent); border-radius: var(--r-lg); padding: var(--s-6) var(--s-4);
}
.hero__panel > * + * { margin-top: var(--s-4); }
.hero__panel .lead { margin-inline: auto; }
.hero__panel .btn-row { justify-content: center; margin-top: var(--s-6); }
@media (min-width: 48rem) { .hero { padding-block: var(--s-9); } .hero__panel { padding: var(--s-7) var(--s-6); } }

/* ---------- Feature grid and two-column ---------- */
.grid-features { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid-features { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.two-col { display: grid; gap: var(--s-6); align-items: center; }
.two-col > * { min-width: 0; }
@media (min-width: 56rem) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--s-8); } .two-col--flip > :first-child { order: 2; } }

/* ---------- Pricing ---------- */
.pricing { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .pricing { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.price-card--featured { background: var(--raised); border: 2px solid var(--secondary); box-shadow: var(--shadow-2); }
.price-card__price { font-size: 2.5rem; font-weight: 650; line-height: 1; letter-spacing: -0.02em; }
.price-card__price small { font-size: var(--fs-body); font-weight: 400; color: var(--muted); }
.price-card ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.price-card li { padding-left: 1.5rem; position: relative; }
.price-card li::before { content: ""; position: absolute; left: 0.25rem; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--secondary); }
.price-card .btn { margin-top: auto; }
.price-card .badge { align-self: flex-start; margin: 0; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--secondary-soft); color: var(--text); font-size: var(--fs-sm); font-weight: 600; }

/* ---------- FAQ (details/summary) ---------- */
.faq { display: grid; gap: var(--s-3); max-width: 48rem; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-4) var(--s-5); font-weight: 600; display: flex; justify-content: space-between; gap: var(--s-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 0.25em;
  background: var(--icons-x) -32px 0 / 256px 16px no-repeat; image-rendering: pixelated;
}
.faq details[open] summary::after { background-position: -48px 0; }
.faq details > :not(summary) { padding: 0 var(--s-5) var(--s-4); color: var(--muted); }

/* ---------- Notice (honest placeholder labels) ---------- */
.notice { background: var(--accent-soft); color: var(--text); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }

/* ---------- Forms (static) ---------- */
.field { display: grid; gap: var(--s-2); }
.input { width: 100%; min-height: 2.75rem; padding: 0.625rem 0.875rem; background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--r-sm); }

/* ---------- App shell mock: rail, thread, bubbles, composer ---------- */
.app { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 4rem); background: var(--bg); }
.app__rail { display: none; background: var(--surface); border-right: 1px solid var(--border); padding: var(--s-4); }
.app__rail ul { list-style: none; padding: 0; display: grid; gap: var(--s-1); margin-top: var(--s-4); }
.app__rail a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__rail a:hover, .app__rail a[aria-current="page"] { background: var(--secondary-soft); color: var(--text); }
@media (min-width: 56rem) { .app { grid-template-columns: 17rem 1fr; } .app__rail { display: block; } }
.app__main { display: flex; flex-direction: column; min-width: 0; }
.thread { flex: 1; width: 100%; max-width: 46rem; margin-inline: auto; padding: var(--s-5) var(--gutter); display: flex; flex-direction: column; gap: var(--s-5); }
.msg { max-width: 100%; }
.msg--user { align-self: flex-end; max-width: 85%; background: var(--secondary-soft); color: var(--text); padding: var(--s-3) var(--s-4); border-radius: var(--r-md) var(--r-md) var(--s-1) var(--r-md); }
.msg--assistant { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--s-3); align-items: start; }
.msg--assistant .msg__avatar { width: 1.75rem; height: 1.75rem; color: var(--accent-edge); margin-top: 0.15rem; }
.msg--assistant .msg__body > * + * { margin-top: var(--s-3); }
.msg--assistant .msg__body { min-width: 0; }
.composer-wrap { position: sticky; bottom: 0; padding: var(--s-3) var(--gutter) var(--s-4); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.composer {
  max-width: 46rem; margin-inline: auto; display: flex; align-items: flex-end; gap: var(--s-2);
  background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); box-shadow: var(--shadow-2);
}
.composer textarea { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; padding-block: var(--s-2); min-height: 2.75rem; }
.composer textarea:disabled { color: var(--muted); cursor: not-allowed; }
.composer textarea:disabled::placeholder { color: var(--muted); opacity: 1; }
.composer .btn { flex: none; }
.composer__note { max-width: 46rem; margin: var(--s-2) auto 0; text-align: center; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Starfield layer (space.js). Only inside .hero or .page-sky, never behind body text ---------- */
.starfield { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.page-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--sky); }
/* Rule: anything that holds paragraphs (.section, .card, .hero__panel, .thread) has a solid or near-solid
   surface, so stars never sit directly under text. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print { .starfield, .page-sky, .site-header, .composer-wrap { display: none; } }

/* ==========================================================================
   Wave 2 components (frontend-builder). Extends the tokens and components above.
   ========================================================================== */

/* ---------- Header actions, menu and theme toggle ---------- */
.brand span { letter-spacing: -0.01em; }
.nav__list { margin-right: var(--s-2); }
.header-action { display: none; }
/* Signed-in only / signed-out only (html[data-auth] is set in <head> from the stored session) */
html:not([data-auth="in"]) [data-auth-in], html[data-auth="in"] [data-auth-out] { display: none !important; }
.nav__extra { display: block; }
.btn.theme-toggle { width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; flex: none; }
.btn.nav__toggle { min-height: 2.75rem; padding: 0.5rem 0.875rem; }
.theme-toggle svg, .nav__toggle svg { width: 1.25rem; height: 1.25rem; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: block; }
.theme-toggle[aria-pressed="true"] .icon-moon { display: none; }
@media (min-width: 68rem) {
  .header-action { display: inline-flex; }
  .nav__extra { display: none; }
  .btn.nav__toggle { display: none; }
}

/* ---------- Footer extras ---------- */
.site-footer .brand { margin-bottom: var(--s-3); }
.site-footer .legal { max-width: none; }

/* ---------- Page hero (smaller band on inner pages, same quiet sky) ---------- */
.hero--page { padding-block: var(--s-7); }
.hero--page .hero__panel { max-width: 50rem; }
@media (min-width: 48rem) { .hero--page { padding-block: var(--s-8); } }
.hero__panel .notice { text-align: left; }

/* ---------- Terminal panel (home hero, static sample) ---------- */
.terminal {
  max-width: 40rem; margin: var(--s-6) auto 0; text-align: left;
  background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); overflow: hidden; position: relative;
}
.terminal__bar, .terminal__foot {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4);
  background: var(--surface); color: var(--muted); font-size: var(--fs-sm);
}
.terminal__bar { border-bottom: 1px solid var(--border); }
.terminal__foot { border-top: 1px solid var(--border); }
.terminal__bar svg { width: 1.25rem; height: 1.25rem; color: var(--accent-edge); }
.terminal__log { padding: var(--s-4); display: grid; gap: var(--s-3); font-family: var(--mono); font-size: 1rem; line-height: 1.5; }
.terminal__log li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-2); max-width: none; }
.who { color: var(--muted); }
.who--particle { color: var(--secondary); font-weight: 600; }
.ok { color: var(--success); white-space: nowrap; }
@media (max-width: 30rem) { .terminal__log li { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Facts row ---------- */
.facts { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); }
.fact__figure { font-size: 2rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; }
.fact p { margin-top: var(--s-2); color: var(--muted); }
.facts-note { margin-top: var(--s-5); }

/* ---------- Idea list with icons ---------- */
.ideas { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .ideas { grid-template-columns: repeat(3, 1fr); } }
.ideas li > * + * { margin-top: var(--s-3); }
.ideas h3 { font-size: var(--fs-h4); }
.card__icon svg { width: 1.375rem; height: 1.375rem; }

/* ---------- Two-up grid, rows, lists, steps ---------- */
.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
.list { display: grid; gap: var(--s-3); }
.list > li { position: relative; padding-left: 1.5rem; }
.list > li::before { content: ""; position: absolute; left: 0.25rem; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--secondary); }
.steps { counter-reset: step; display: grid; gap: var(--s-4); max-width: 48rem; }
.steps > li { counter-increment: step; position: relative; padding-left: 3.25rem; min-height: 2.25rem; padding-top: 0.2rem; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--secondary-soft); color: var(--secondary); font-weight: 650;
}
.rows { display: grid; border-top: 1px solid var(--border); max-width: 48rem; }
.rows > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); padding-block: var(--s-4); border-bottom: 1px solid var(--border); max-width: none; }
.rows > li .tag { margin-left: auto; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.status { display: flex; gap: var(--s-2); align-items: baseline; color: var(--muted); }
.status::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--secondary); transform: translateY(-0.1em); }
.status strong { color: var(--text); font-weight: 600; }
.more { display: inline-block; margin-top: var(--s-5); font-weight: 600; }

/* ---------- Definition rows (use cases) ---------- */
.dl { display: grid; gap: var(--s-1) var(--s-5); }
.dl dt { font-weight: 600; }
.dl dd { margin: 0 0 var(--s-3); max-width: var(--measure); }
@media (min-width: 48rem) { .dl { grid-template-columns: 12rem 1fr; gap: var(--s-4) var(--s-5); } .dl dd { margin: 0; } }

/* ---------- Content column and closing band ---------- */
.prose { max-width: 48rem; }
.prose > * + * { margin-top: var(--s-4); }
.prose > h3 { margin-top: var(--s-6); }
.cta { text-align: center; }
.cta > .container > * + * { margin-top: var(--s-4); }
.cta p { margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: var(--s-5); }
.contact-card .email { font-size: var(--fs-lead); font-weight: 600; }
.paper__title { font-size: var(--fs-h4); line-height: 1.3; }

/* ---------- Pricing extras ---------- */
.price-card h2 { font-size: var(--fs-h3); }
.price-card .tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.price-card .btn { align-self: flex-start; }

/* ---------- Sign-in placeholder over the page sky ---------- */
.signin .card { margin-inline: auto; box-shadow: var(--shadow-2); }

/* ---------- App shell ---------- */
.app--full { min-height: 100vh; min-height: 100dvh; }
.app__rail { flex-direction: column; gap: var(--s-4); }
.app__rail .brand svg { width: 24px; height: 24px; }
.rail__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.rail__group h2 { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); padding-inline: var(--s-3); }
.rail__group ul { margin-top: var(--s-2); }
.rail__note { margin-top: auto; font-size: var(--fs-sm); color: var(--muted); padding: var(--s-3); border-top: 1px solid var(--border); }
.app__rail .btn { width: 100%; }
.app__rail .btn.rail__close { width: 2.75rem; padding: 0; flex: none; }
.rail__close svg { width: 1.25rem; height: 1.25rem; }
.app__rail[data-open="true"] {
  display: flex; position: fixed; inset: 0 auto 0 0; width: min(18rem, 86vw); z-index: 70;
  overflow-y: auto; box-shadow: var(--shadow-2);
}
@media (min-width: 56rem) {
  .app__rail, .app__rail[data-open="true"] { display: flex; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; width: auto; box-shadow: none; }
  .rail__close, .rail-toggle { display: none; }
  .app__rail .btn.rail__close, .app__bar .btn.rail-toggle { display: none; }
}
.app__bar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--gutter); min-height: 4rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--border);
}
.app__bar .spacer { margin-left: auto; }
.model-badge {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.375rem 0.875rem;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-weight: 650;
}
.model-badge svg { width: 1.25rem; height: 1.25rem; color: var(--accent-edge); }
.btn.rail-toggle { width: 2.75rem; padding: 0; flex: none; }
.rail-toggle svg { width: 1.25rem; height: 1.25rem; }
.back-link { white-space: nowrap; }
@media (max-width: 30rem) { .back-link .long { display: none; } .app__bar .tag { display: none; } }
.thread > .notice { align-self: center; text-align: center; font-size: var(--fs-sm); }
.exchange { display: flex; flex-direction: column; gap: var(--s-4); scroll-margin-top: 5rem; }
.exchange + .exchange { padding-top: var(--s-5); border-top: 1px solid var(--border); }
.checks { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }
.checks li { position: relative; padding-left: 1.5rem; }
.checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.approve { border-left: 3px solid var(--secondary); padding-left: var(--s-3); font-weight: 600; }
.composer .btn.send { width: 2.75rem; padding: 0; }
.send svg { width: 1.25rem; height: 1.25rem; }
.composer-wrap { z-index: 30; }

/* Spacing utilities and paper card (wave 2) */
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mb-5 { margin-bottom: var(--s-5); }
.paper { max-width: 40rem; margin: var(--s-6) auto 0; background: var(--raised); box-shadow: var(--shadow-2); position: relative; }
.app__rail a.brand { display: inline-flex; padding: var(--s-1) var(--s-2); color: var(--text); background: none; }
.btn.back-link { gap: 0; }

/* ---------- QA wave 3 fixes ---------- */
/* Tap targets: 44 px or more (findings 4, 5, 14, 16) */
.nav__list a, .app__rail li a { min-height: 2.75rem; display: flex; align-items: center; }
.app__rail li a { display: block; line-height: 1.6; padding-block: calc((2.75rem - 1.6em) / 2); }
.brand { min-height: 2.75rem; }
.more { min-height: 2.75rem; padding-block: 0.5rem; }
.site-footer ul { gap: 0; }
.site-footer a { display: inline-block; padding-block: 0.625rem; }
/* Footer links and note at body-small 16 px; legal stays 15 px (finding 8) */
.site-footer ul, .site-footer .grid p { font-size: 1rem; }
.site-footer .legal { font-size: var(--fs-sm); }
/* Current page marker with a shape, not only weight (findings 9, 10) */
.nav__list a[aria-current="page"], .header-action[aria-current="page"] { background: var(--secondary-soft); color: var(--text); }
/* Contact email link (finding 1) */
.contact-card .email a { display: inline-block; min-height: 2.75rem; padding-block: 0.5rem; overflow-wrap: normal; word-break: normal; }
/* Phone menu: the last extra item keeps a button look (finding 7) */
@media (max-width: 67.99rem) {
  .nav[data-open="true"] .nav__extra--cta a {
    margin-top: var(--s-2); justify-content: center; font-weight: 600; color: var(--text);
    background: var(--raised); border: 1px solid var(--border-strong);
  }
}
/* App shell drawer backdrop (finding 3) */
.rail-scrim { display: none; }
.app__rail[data-open="true"] + .rail-scrim { display: block; position: fixed; inset: 0; z-index: 60; background: rgb(13 15 31 / .45); }
@media (min-width: 56rem) { .app__rail[data-open="true"] + .rail-scrim { display: none; } }

/* ==========================================================================
   Wave 4: chat home (index.html) and consumer product pages. Extends the tokens above.
   ========================================================================== */

/* ---------- Chat home: sidebar ---------- */
.chat .app__rail { gap: var(--s-2); padding: var(--s-3); }
.rail__item {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 2.75rem;
  padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text); text-align: left; text-decoration: none; font-weight: 500; line-height: 1.3;
}
.rail__item svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--muted); }
.rail__item:hover:not([disabled]) { background: var(--secondary-soft); }
.rail__item[disabled] { color: var(--muted); cursor: not-allowed; }
.rail__item[aria-current="true"] { background: var(--secondary-soft); font-weight: 600; }
.rail__group { margin-top: var(--s-3); }
.chat .rail__group ul { margin-top: var(--s-1); gap: 0; }
.chat .app__rail li a.rail__item { display: flex; padding-block: var(--s-2); color: var(--muted); }
.chat .app__rail li a.rail__item:hover { color: var(--text); }
.rail__bottom { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border); }
.chat .app__rail .rail__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 var(--s-2); }
.chat .rail__links a.rail__item { font-size: var(--fs-sm); }
.rail__item.theme-toggle .icon-sun { display: none; }
.rail__item.theme-toggle[aria-pressed="true"] .icon-sun { display: block; }
.rail__item.theme-toggle[aria-pressed="true"] .icon-moon { display: none; }
.chat .rail__note { border-top: 0; padding: var(--s-2) var(--s-3) 0; margin-top: 0; }
@media (min-width: 56rem) { .app.chat { grid-template-columns: 16.5rem 1fr; } }

/* ---------- Chat home: top bar ---------- */
.chat .app__bar { border-bottom-color: transparent; }
.app__bar .btn { min-height: 2.75rem; padding: 0.5rem 1rem; }
.app__bar .btn.theme-toggle, .app__bar .btn.rail-toggle { width: 2.75rem; padding: 0; }
@media (max-width: 30rem) {
  .app__bar .bar-theme { display: none; }
  .app__bar .btn { padding-inline: 0.75rem; }
  .model-badge { padding-inline: 0.625rem; }
}

/* ---------- Chat home: views ---------- */
.chat__main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat__main > [hidden] { display: none !important; }
.chat-home {
  position: relative; isolation: isolate; overflow: hidden; flex: 1; display: grid; place-items: center;
  padding: var(--s-7) var(--gutter); background: var(--sky); min-height: 22rem;
}
.chat-home__panel {
  position: relative; text-align: center; max-width: 40rem; width: 100%;
  background: color-mix(in srgb, var(--bg) 92%, transparent); border-radius: var(--r-lg); padding: var(--s-6) var(--s-4);
}
.chat-home h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.25rem); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-5); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding: 0.5rem 1rem;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--raised); color: var(--text);
  font-weight: 500; transition: background-color var(--t-fast) var(--ease);
}
.chip svg { width: 1.125rem; height: 1.125rem; color: var(--secondary); flex: none; }
.chip:hover:not([disabled]) { background: var(--secondary-soft); }
.chip[disabled] { color: var(--muted); cursor: not-allowed; }
.chip[disabled] svg { color: var(--muted); }
.chat .thread { padding-top: var(--s-6); padding-bottom: var(--s-6); }
.chat .thread:focus { outline: none; }
.msg__body ol, .msg__body ul:not([class]) { padding-left: 1.4rem; display: grid; gap: var(--s-1); }
.msg__body pre { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.msg--user pre { background: var(--raised); margin-top: var(--s-2); }
.msg__actions { display: flex; gap: var(--s-1); }
.msg--assistant .msg__body > .msg__actions { margin-top: var(--s-1); }
.icon-btn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--muted);
}
.icon-btn svg { width: 1.125rem; height: 1.125rem; }
.icon-btn[disabled] { cursor: not-allowed; }

/* ---------- Image placeholder (described picture, never a real image) ---------- */
.imgph { max-width: 22rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.imgph__art { aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--secondary-soft), var(--accent-soft)); display: grid; place-items: center; color: var(--secondary); }
.imgph__art svg { width: 100%; height: 100%; }
.imgph__art svg.imgph__icon { width: 3rem; height: 3rem; }
.imgph figcaption { padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); color: var(--muted); }
.imgph .btn-row { padding: 0 var(--s-4) var(--s-3); gap: var(--s-2); }
.imgph .btn { padding: 0.375rem 0.875rem; font-size: var(--fs-sm); }

/* ---------- Composer ---------- */
.composer .icon-btn { flex: none; }
.chat .composer { padding-left: var(--s-2); }

/* ---------- Mock panels on product pages ---------- */
.mock {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5);
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: var(--s-4); min-width: 0;
}
.mock .msg--user { max-width: 90%; }
.mock .imgph { max-width: 18rem; }
.mock__head { display: flex; align-items: center; gap: var(--s-2); font-weight: 650; }
.mock__head svg { width: 1.25rem; height: 1.25rem; color: var(--secondary); }
.mock__list { display: grid; gap: var(--s-2); }
.mock__list li { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-sm); max-width: none; }
.mock__list svg { width: 1.125rem; height: 1.125rem; color: var(--muted); flex: none; }
.file-chip { align-self: flex-end; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.file-chip svg { width: 1.125rem; height: 1.125rem; color: var(--secondary); }
.memory { background: var(--accent-soft); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); }
.points { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.points h3 { font-size: 1.0625rem; }
.points p { color: var(--muted); }
.section__lead { color: var(--muted); font-size: var(--fs-lead); }

/* ---------- Terminal window ---------- */
.terminal__pre {
  margin: 0; border: 0; border-radius: 0; background: var(--raised); padding: var(--s-4);
  font-size: 0.9375rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.terminal__pre .p { color: var(--secondary); font-weight: 600; }
.terminal__pre code { font-size: inherit; } /* review 2, finding 15: 15 px, not 14 */

/* ---------- Pricing: four plans and compare table ---------- */
@media (min-width: 40rem) { .pricing--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .pricing--4 { grid-template-columns: repeat(4, 1fr); } }
.price-card .price-card__price small { display: block; margin-top: var(--s-2); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; min-width: 36rem; font-size: 1rem; }
.compare th, .compare td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--border); }
.compare thead th { font-weight: 650; background: var(--raised); }
.compare tbody th { font-weight: 500; }
.compare td { color: var(--muted); }
.compare tr:last-child > * { border-bottom: 0; }
.plan-box { max-width: 44rem; }
.plan-box > * + * { margin-top: var(--s-3); }

/* ---------- Help groups and link rows ---------- */
.faq-group + .faq-group { margin-top: var(--s-7); }
.faq-group h2 { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
.inline-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); }
.inline-links a { display: inline-block; padding-block: 0.625rem; }
.rail__item.theme-toggle { width: 100%; height: auto; justify-content: flex-start; padding: var(--s-2) var(--s-3); }

/* ==========================================================================
   Wave 5: the app (chat.html). Phone first: slide-out drawer with backdrop,
   top bar with Chat / Images tabs, empty state with suggestions near the composer.
   From 900 px the drawer is a fixed left panel with the same two halves.
   ========================================================================== */
.cx { min-height: 100vh; min-height: 100dvh; background: var(--bg); }
.cx__main { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; min-width: 0; }

/* Round buttons, pill button, avatar */
.round-btn {
  display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--raised); color: var(--text);
  box-shadow: var(--shadow-1); transition: background-color var(--t-fast) var(--ease);
}
button.round-btn:hover { background: var(--secondary-soft); }
.round-btn svg { width: 1.375rem; height: 1.375rem; }
.round-btn svg.px-ico { width: 32px; height: 32px; }
a.round-btn { text-decoration: none; }
a.round-btn:hover { background: var(--secondary-soft); }
.round-btn.theme-toggle .icon-sun { display: none; }
.round-btn.theme-toggle[aria-pressed="true"] .icon-sun { display: block; }
.round-btn.theme-toggle[aria-pressed="true"] .icon-moon { display: none; }
.pill-btn {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 3rem; padding: 0.625rem 1.375rem;
  border: 1px solid var(--accent-edge); border-radius: var(--r-pill); background: var(--accent); color: var(--accent-text);
  font-weight: 650; box-shadow: var(--shadow-1);
}
.pill-btn:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.pill-btn svg { width: 1.25rem; height: 1.25rem; flex: none; }
.pill-btn { white-space: nowrap; padding-inline: 1.125rem; }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--secondary-soft); color: var(--secondary); border: 1px solid var(--border);
}
.avatar svg { width: 1.375rem; height: 1.375rem; }

/* Top bar: menu and project name, account */
.topbar {
  position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--s-2); padding: var(--s-3) var(--gutter); background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.topbar__menu { justify-self: start; }
.topbar__account { justify-self: end; color: var(--secondary); }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--r-pill); background: var(--secondary-soft); border: 1px solid var(--border); }
.seg__tab {
  min-height: 2.75rem; min-width: 5.5rem; padding: 0.375rem 1.125rem; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted); font-weight: 600;
}
.seg__tab:hover { color: var(--text); }
.seg__tab[aria-selected="true"] { background: var(--raised); color: var(--text); box-shadow: var(--shadow-1); }

/* Drawer */
.drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(20rem, 86vw);
  display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border);
  padding: var(--s-4) var(--s-3) var(--s-3); box-shadow: var(--shadow-2);
  transform: translateX(-102%); visibility: hidden;
  transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.cx[data-open="true"] .drawer { transform: none; visibility: visible; transition: transform var(--t-med) var(--ease); }
.drawer-scrim {
  position: fixed; inset: 0; z-index: 60; border: 0; padding: 0; background: rgb(13 15 31 / .5);
  opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med); cursor: default;
}
.cx[data-open="true"] .drawer-scrim { opacity: 1; visibility: visible; transition: opacity var(--t-med) var(--ease); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 0 var(--s-2) var(--s-3) var(--s-3); }
.drawer__brand { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.drawer__brand svg { width: 1.75rem; height: 1.75rem; color: var(--accent-edge); }
.drawer__menu { display: grid; gap: 2px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.dr-item, .dr-chat {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 2.875rem; padding: var(--s-2) var(--s-3);
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); text-align: left;
  text-decoration: none; font-weight: 500; line-height: 1.3;
}
.dr-item:hover, .dr-chat:hover { background: var(--secondary-soft); }
.dr-item svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--text); }
.dr-item[aria-current="true"], .dr-chat[aria-current="true"] { background: var(--secondary-soft); font-weight: 650; }
.dr-tag { margin-left: auto; padding: 0.125rem 0.5rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
.drawer__recent { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-top: var(--s-3); }
.drawer__label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); padding: 0 var(--s-3) var(--s-1); }
.drawer__recent ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; list-style: none; padding: 0; }
.drawer__recent li, .dr-chat { min-width: 0; }
.dr-chat svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--muted); }
.dr-chat span:not(.sr-only):not(.pi) { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.drawer__all { padding: var(--s-2) var(--s-3); color: var(--muted); }
.drawer__bottom { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-2) 0; border-top: 1px solid var(--border); }
.drawer__bottom .pill-btn { margin-right: auto; }

/* Body: panels and views */
.cx__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.panel { flex: 1; display: flex; flex-direction: column; }
.panel[hidden], .panel > [hidden] { display: none !important; }
.panel:focus { outline: none; }
.empty {
  position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-6) var(--gutter) var(--s-3); background: var(--sky); min-height: 16rem; overflow: hidden;
}
.empty:focus { outline: none; }
.suggest { width: 100%; max-width: 46rem; margin-inline: auto; display: grid; gap: var(--s-2); }
.suggest__row {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 3rem; padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  text-align: left; font-weight: 500;
}
.suggest__row:hover { background: var(--secondary-soft); }
.suggest__row svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--secondary); }
.cx .thread { padding-top: var(--s-5); padding-bottom: var(--s-6); }
.cx .thread:focus { outline: none; }
.thread__kind { align-self: center; display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.25rem 0.75rem; border-radius: var(--r-pill); background: var(--secondary-soft); font-size: var(--fs-sm); }
.thread__kind svg { width: 1rem; height: 1rem; color: var(--secondary); }
.quote { margin: 0; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--secondary); border-radius: var(--r-sm); }

/* Image tiles (placeholders drawn in inline SVG, never real images) */
.tile { display: block; width: 100%; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); color: var(--text); text-align: left; font: inherit; }
.tile__art { display: block; aspect-ratio: 1 / 1; background: var(--secondary-soft); }
.tile__art svg { width: 100%; height: 100%; }
.tile__cap, .tile figcaption { display: block; padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.tile--btn:hover { border-color: var(--secondary); }
.tile--btn:hover .tile__cap { color: var(--text); }
.tile--chat { max-width: 20rem; }
.panel--images { padding: var(--s-4) var(--gutter) var(--s-5); width: 100%; max-width: 60rem; margin-inline: auto; }
.gallery-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-bottom: var(--s-4); }
.gallery-head h2 { font-size: var(--fs-h4); }
.gallery-head p { font-size: var(--fs-sm); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }

/* Composer */
.cx__composer { padding-top: var(--s-2); }
.cx-composer { align-items: center; border-radius: var(--r-pill); padding: var(--s-1); gap: var(--s-1); }
.cx-composer textarea { padding: 0.6rem var(--s-1); min-height: 2.75rem; line-height: 1.6; }
.voice-btn {
  display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--accent-edge); background: var(--accent); color: var(--accent-text);
}
.voice-btn[disabled] { cursor: not-allowed; }
.voice-btn svg { width: 1.375rem; height: 1.375rem; }
.composer__note[hidden] { display: none; }

/* Desktop: the drawer becomes a fixed left panel with the same two halves */
@media (min-width: 900px) {
  .cx { display: grid; grid-template-columns: 18rem minmax(0, 1fr); }
  .drawer, .cx[data-open="true"] .drawer {
    position: sticky; top: 0; height: 100vh; height: 100dvh; width: auto; transform: none; visibility: visible;
    box-shadow: none; transition: none;
  }
  .drawer-scrim, .cx[data-open="true"] .drawer-scrim { display: none; }
  .topbar__menu { visibility: hidden; }
}

/* Landing page (index.html) */
.card__icon svg { width: 1.375rem; height: 1.375rem; }
.teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.teaser > div > * + * { margin-top: var(--s-2); }

/* ==========================================================================
   Pixel art (assets/pixel, see its README). Whole-number scales only, pixelated.
   Accent only: never text or buttons. Night/dawn and icon sheets swap via the theme tokens above.
   ========================================================================== */
/* Scene: 2x. Phone scene (195 x 170) under 900 px, wide scene (480 x 170) from 900 px. */
.scene { --scene-w: 390px; position: relative; flex: none; height: 340px; overflow: hidden; pointer-events: none; }
.scene__art {
  position: absolute; bottom: 0; left: calc(50% - var(--scene-w) / 2); width: var(--scene-w); height: 340px;
  background: var(--scene-phone) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
/* Top of the scene melts into the page: page colour to transparent over 70 px (both themes, all scenes) */
.scene::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 70px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg), transparent);
}
/* App empty state: the scene is the lower part of the empty area, its ground meeting the composer */
.empty .scene { margin: 0 calc(-1 * var(--gutter)) calc(-1 * var(--s-3)); }
.empty .starfield { height: calc(100% - 340px); visibility: var(--scene-stars); } /* sky above the scene only */
/* Wider than the 2x art: under 900 px the wide scene sits behind the phone scene at the same alignment
   (the phone scene is the wide one shifted by 170 px). From 900 px (app empty state) and on the landing band the
   wide scene is shown once, centred, never repeated or mirrored: its left and right 160 px fade into the page
   colour, and beyond its 960 px there is only the page. */
.empty .scene { background: var(--scene-wide) calc(50% - 55px) 100% / 960px 340px no-repeat; image-rendering: pixelated; }
@media (min-width: 900px) {
  .empty .scene { --scene-w: 960px; background: none; }
  .empty .scene__art { background-image: var(--scene-wide); }
}
.scene--band .scene__art::before, .scene--band .scene__art::after,
.empty .scene__art::before, .empty .scene__art::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 160px; z-index: 1; pointer-events: none;
}
.scene--band .scene__art::before, .empty .scene__art::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.scene--band .scene__art::after, .empty .scene__art::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
@media (max-width: 899.98px) { .empty .scene__art::before, .empty .scene__art::after { content: none; } }
/* Landing: wide scene as a band under the hero text */
.hero.hero--scene { padding-bottom: 0; }
.scene--band { --scene-w: 960px; margin-top: var(--s-6); }
.scene--band .scene__art { background-image: var(--scene-wide); }

/* Chat open (data-band on .cx, site.js): the scene stays as a 100 px band under the top bar, never under text.
   It shows native rows 110 to 160 (cabin, observatory, lanterns, pond edge, companion on the path): the art is
   shifted 20 px below the band's bottom, so the companion's anchor becomes top 264 - 220 = 44 px in the band.
   The thread scrolls in its own region below the band; the composer stays at the bottom. */
.empty .scene { transition: height 350ms cubic-bezier(0.2, 0.7, 0.2, 1), background-position 350ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.empty .scene__art { transition: bottom 350ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.cx[data-band="true"] .cx__main { height: 100vh; height: 100dvh; min-height: 0; }
.cx[data-band="true"] #panel-chat { min-height: 0; }
.cx[data-band="true"] .empty { flex: none; min-height: 0; padding: 0; background: var(--bg); z-index: 1; }
.cx[data-band="true"] .empty .starfield { display: none; }
.cx[data-band="true"] .empty .scene { height: 100px; margin: 0; background-position: calc(50% - 55px) calc(100% + 20px); }
.cx[data-band="true"] .empty .scene__art { bottom: -20px; }
.cx[data-band="true"] .empty .scene::after { height: 28px; }
.cx[data-band="true"] .thread {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; max-width: none;
  padding-inline: max(var(--gutter), calc((100% - 46rem) / 2 + var(--gutter)));
}
@media (prefers-reduced-motion: reduce) { .empty .scene, .empty .scene__art { transition: none; } }
/* Band bottom edge (under 900 px): a 4 px pixel ground line, 8 x 2 native tile at 2x, repeated on x only */
.cx[data-band="true"] .empty { padding-bottom: 4px; }
.cx[data-band="true"] .empty::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 2; pointer-events: none;
  background: var(--band-edge) 0 0 / 16px 4px repeat-x; image-rendering: pixelated;
}

/* Desktop, chat open (900 px and up): no top band. The wide scene is split into two side panels in their own grid
   columns beside the thread (which keeps its 46rem max width, centred). Left: native x 0 to 192 (meadow, windmill,
   farm, pond edge), its x 192 on the inner edge (x 145 while the panel is thin). Right: from native x 242 (path, companion, cabin, observatory,
   lanterns), its x 242 on the inner edge. Art at 2x, bottom on the composer line, never repeated: past the art
   there is only the page colour (and a faint starfield in dark mode). Top fades over 120 px, inner edge over 80 px,
   outer edge over 48 px. Under 1100 px only the right panel shows. */
.side { display: none; }
@media (min-width: 900px) {
  .cx[data-band="true"] .cx__main {
    display: grid; grid-template-columns: 0 minmax(0, 1fr) 208px; grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .cx[data-band="true"] .topbar { grid-column: 1 / -1; grid-row: 1; }
  .cx[data-band="true"] .cx__body { grid-column: 2; grid-row: 2; min-width: 0; }
  .cx[data-band="true"] .cx__composer { grid-column: 2; grid-row: 3; min-width: 0; }
  .cx[data-band="true"] .empty { display: none; }
  .cx[data-band="true"] .side--right { display: block; grid-column: 3; grid-row: 2 / 4; }
  .side {
    position: relative; min-width: 0; overflow: hidden; pointer-events: none; background: var(--bg);
    animation: side-in 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .side .starfield { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; visibility: var(--scene-stars); }
  .side__art {
    position: absolute; bottom: 0; height: 340px; background: var(--scene-wide) no-repeat; background-size: 960px 340px;
    image-rendering: pixelated;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 120px), linear-gradient(var(--fade-dir), transparent, #000 80px, #000 calc(100% - var(--outer-fade, 48px)), transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent, #000 120px), linear-gradient(var(--fade-dir), transparent, #000 80px, #000 calc(100% - var(--outer-fade, 48px)), transparent);
    mask-composite: intersect;
  }
  .side--left .side__art { --fade-dir: to left; right: 0; width: min(100%, 384px); background-position: right -576px bottom 0; }
  .side--right .side__art { --fade-dir: to right; left: 0; width: min(100%, 476px); background-position: -484px 100%; }
  .side .buddy { left: 48px; top: auto; bottom: 20px; z-index: 1; } /* wide anchor x 532 - 484; top 264 of 340 */
}
@media (min-width: 1100px) {
  .cx[data-band="true"] .cx__main { grid-template-columns: minmax(200px, 1fr) minmax(0, 46rem) minmax(200px, 1fr); }
  .cx[data-band="true"] .side--left { display: block; grid-column: 1; grid-row: 2 / 4; }
}
/* Thin left panel (under 300 px): show the windmill and the farm (native x 45 to 145) rather than the pond edge */
@media (min-width: 1100px) and (max-width: 1399.98px) {
  .side--left .side__art { --outer-fade: 24px; background-position: right -670px bottom 0; }
}
@keyframes side-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .side { animation: none; } }

/* Desktop panel: a 90 px strip of the wide scene at 1x under New chat (native rows 80 to 170: tree line, cabin,
   ground), wide x 124 to 411 across the 287 px panel. No companion. Review 2, finding 10: hidden when the panel is
   under 860 px tall, so Recent keeps all four chats. */
.drawer__scene { display: none; }
@media (min-width: 900px) and (min-height: 860px) {
  .drawer__scene {
    display: block; position: relative; flex: none; height: 90px; margin: var(--s-3) calc(-1 * var(--s-3)) calc(-1 * var(--s-3));
    background: var(--scene-wide) -124px -80px / 480px 170px no-repeat; image-rendering: pixelated; pointer-events: none;
  }
  .drawer__scene::after {
    content: ""; position: absolute; inset: 0 0 auto; height: 24px; pointer-events: none;
    background: linear-gradient(to bottom, var(--surface), transparent);
  }
}

/* Companion: 28 x 28 frames at 2x, anchored at the README point (phone 96,132; wide 266,132) */
.buddy {
  position: absolute; left: 192px; top: 264px; width: 56px; height: 56px;
  background: url("pixel/companion-sheet.png") 0 0 / 392px 56px no-repeat; image-rendering: pixelated;
  animation: buddy-awake 10s step-end infinite;
}
@media (min-width: 900px) { .empty .buddy { left: 532px; } }
.scene--band .buddy { left: 532px; }
.buddy[data-state="thinking"] { animation: buddy-think 0.8s step-end infinite; }
.buddy[data-state="asleep"] { animation: buddy-sleep 1.4s step-end infinite; }
/* Awake: slow bob (frames 1 and 3), blinks (frame 2) at 4.2 s and 9.6 s, so every 4 to 6 s */
@keyframes buddy-awake {
  0% { background-position: 0 0; }       8% { background-position: -112px 0; }
  16% { background-position: 0 0; }      24% { background-position: -112px 0; }
  32% { background-position: 0 0; }      42% { background-position: -56px 0; }
  44% { background-position: 0 0; }      52% { background-position: -112px 0; }
  60% { background-position: 0 0; }      68% { background-position: -112px 0; }
  76% { background-position: 0 0; }      84% { background-position: -112px 0; }
  92% { background-position: 0 0; }      96% { background-position: -56px 0; }
  98%, 100% { background-position: 0 0; }
}
@keyframes buddy-think { 0%, 100% { background-position: -168px 0; } 50% { background-position: -224px 0; } }
@keyframes buddy-sleep { 0%, 100% { background-position: -280px 0; } 50% { background-position: -336px 0; } }
@media (prefers-reduced-motion: reduce) {
  .buddy, .buddy[data-state] { animation: none !important; background-position: 0 0; }
}

/* Icons: 16 x 16 sheet at 2x (32 px). Order: README. Light theme uses the light sheet. */
.pi {
  --u: 32px; --i: 0; display: block; flex: none; width: var(--u); height: var(--u);
  background: var(--icons) calc(var(--u) * var(--i) * -1) 0 / calc(var(--u) * 16) var(--u) no-repeat; image-rendering: pixelated;
}
.pi--sm { --u: 16px; } /* 1x, tight spots */
.pi--images { --i: 0; }    .pi--projects { --i: 1; } .pi--memory { --i: 2; }    .pi--saved { --i: 3; }
.pi--terminal { --i: 4; }  .pi--plans { --i: 5; }    .pi--settings { --i: 6; }  .pi--new-chat { --i: 7; }
.pi--search { --i: 8; }    .pi--menu { --i: 9; }     .pi--account { --i: 10; }  .pi--chat { --i: 11; }
.pi--image-chat { --i: 12; } .pi--plus { --i: 13; }  .pi--mic { --i: 14; }      .pi--send { --i: 15; }
/* Second sheet (icons-x16, review 2): spark, team, chev-plus, chev-minus, mail, brick, lamp, trash, file */
.pi--spark, .pi--team, .pi--mail, .pi--brick, .pi--lamp, .pi--trash, .pi--file { background-image: var(--icons-x); }
.pi--spark { --i: 0; } .pi--team { --i: 1; } .pi--mail { --i: 4; } .pi--brick { --i: 5; }
.pi--lamp { --i: 6; }  .pi--trash { --i: 7; } .pi--file { --i: 8; }
/* Keep row and button heights as they were with the 22 px vector icons */
.dr-item .pi, .dr-chat .pi { margin-block: -1px; }
.dr-account { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border); }
.dr-email { padding: 0 var(--s-3) var(--s-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-btn .pi { margin-block: -4px; }

/* Image tiles: 64 x 64 art, centred, smallest whole-number scale that fills the tile (3x on phones) */
.tile__art--px { display: grid; place-items: center; overflow: hidden; container-type: inline-size; }
.tile__art--px img { width: 192px; max-width: none; height: auto; image-rendering: pixelated; }
@supports (width: round(up, 1px, 1px)) {
  .tile__art--px img { width: max(192px, round(up, 100cqw, 64px)); }
}

/* ==========================================================================
   Review 2: pixel accents on the marketing pages and fixes. Small doses that echo chat.html: icons, edges,
   dividers, empty spots and page heads only; never on type, buttons or behind paragraphs. Whole-number scales.
   ========================================================================== */
/* Heading with a pixel icon (section heads, plan cards, help topics) */
.px-head { display: flex; align-items: center; gap: var(--s-3); }
.px-head > h1, .px-head > h2 { margin: 0; }
.faq-group .px-head { margin-bottom: var(--s-4); }
.price-card .px-head { gap: var(--s-2); }

/* Pixel card edge: 2 px stepped border (notched corners) drawn with box-shadow steps, a 2 px violet tick in the
   top-left corner; gold edge only on the featured price card. */
.px-edge {
  --edge: var(--border); position: relative; border: 0; border-radius: 0;
  box-shadow: 0 -2px 0 0 var(--edge), 0 2px 0 0 var(--edge), -2px 0 0 0 var(--edge), 2px 0 0 0 var(--edge);
}
.px-edge::before {
  content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 8px; pointer-events: none;
  background: linear-gradient(var(--secondary), var(--secondary)) 0 0 / 8px 2px no-repeat,
              linear-gradient(var(--secondary), var(--secondary)) 0 0 / 2px 8px no-repeat;
}
.px-edge--gold { --edge: var(--accent-edge); }
.price-card--featured.px-edge {
  box-shadow: 0 -2px 0 0 var(--edge), 0 2px 0 0 var(--edge), -2px 0 0 0 var(--edge), 2px 0 0 0 var(--edge), var(--shadow-2);
}

/* Dithered section rule (features): a 4 px checker of 2 px cells where a surface section meets the page */
.px-dither .section--surface { position: relative; border-block: 0; }
.px-dither .section--surface::before, .px-dither .section--surface::after {
  content: ""; position: absolute; left: 0; right: 0; height: 4px; pointer-events: none;
  background: repeating-conic-gradient(var(--border) 0 25%, transparent 0 50%) 0 0 / 4px 4px;
}
.px-dither .section--surface::before { top: 0; }
.px-dither .section--surface::after { bottom: 0; }

/* Footer ground strip: the last thing on every page, the grass line along the very bottom edge (2x, repeats), one
   lantern standing on it on the right; fireflies in the dark strip. Pages with a footer fill the window, so nothing
   shows below the strip on short pages either. */
body:has(> .site-footer) { display: flex; flex-direction: column; }
body:has(> .site-footer) > main { flex: 1 0 auto; }
.site-footer { position: relative; padding-bottom: 0; margin-top: auto; }
.site-footer__ground {
  display: block; height: 32px; margin-top: var(--s-7); pointer-events: none;
  background: var(--ground) 0 0 / 128px 32px repeat-x; image-rendering: pixelated;
}
.site-footer::after {
  content: ""; position: absolute; bottom: 6px; width: 18px; height: 40px; pointer-events: none;
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  background: url("pixel/lantern.png") 0 0 / 18px 40px no-repeat; image-rendering: pixelated;
}

/* Companion cameo: one still frame at 2x (56 px). Never animated outside chat.html and the landing band. */
.cameo {
  display: block; flex: none; width: 56px; height: 56px; pointer-events: none;
  background: url("pixel/companion-sheet.png") 0 0 / 392px 56px no-repeat; image-rendering: pixelated;
}
.cameo--asleep { background-position: -280px 0; }
.cameo--center { margin-inline: auto; }
/* Contact: sits on the card's top edge */
.contact-card { position: relative; }
.contact-card .cameo { position: absolute; right: var(--s-6); bottom: calc(100% - 6px); margin: 0; }
/* Sign in: asleep beside Continue (above it on phones) */
.signin-row { align-items: center; }
.signin-row .cameo { order: -1; }
@media (min-width: 48rem) { .signin-row .cameo { order: 0; } }
/* Sign in: a stage page (one screen over the scene art), the card centred, spacing shrinks on short screens */
body.stage > main.signin { padding-block: var(--s-3); }
.signin__box { width: 100%; max-width: 30rem; max-height: 100%; overflow-y: auto; }
.signin .card { max-width: none; padding: var(--s-5); background: color-mix(in srgb, var(--surface) 94%, transparent); }
.signin .card > * + * { margin-top: var(--s-3); }
.signin [hidden] { display: none !important; }
body.stage .signin h1 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
.signin .field { gap: 0.2rem; }
.signin .auth-form > * + * { margin-top: var(--s-3); }
@media (max-height: 860px) {
  .signin .card { padding: var(--s-4); }
  .signin .card > * + *, .signin .auth-form > * + * { margin-top: var(--s-2); }
  .signin .lead { font-size: 0.95rem; }
}

/* Pricing compare table on phones: it scrolls inside its own box, with a fade on the right edge and a note.
   site.js sets data-end="true" once the last column is in view. */
.table-scroll { position: relative; }
.table-hint { display: none; margin-top: var(--s-2); }
@media (max-width: 39.99rem) {
  .table-scroll::after {
    content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 3.5rem; pointer-events: none;
    border-radius: 0 var(--r-md) var(--r-md) 0; background: linear-gradient(to left, var(--surface), transparent);
    transition: opacity var(--t-fast) var(--ease);
  }
  .table-scroll[data-end="true"]::after { opacity: 0; }
  .table-hint { display: block; }
}

/* Index feature cards and business cards: pixel icon in place of the line icon */
.card > .pi + h3 { margin-top: var(--s-3); }
/* Terminal title bar icon at 1x */
.terminal__bar .pi { margin-block: -2px; }

/* App drawer (review 2, finding 4): wordmark links home; a small Site row above the bottom bar */
a.drawer__brand { color: var(--text); text-decoration: none; min-height: 2.75rem; border-radius: var(--r-md); padding-inline: var(--s-1); margin-left: calc(-1 * var(--s-1)); }
a.drawer__brand:hover { background: var(--secondary-soft); }
.drawer__site { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) 0; border-top: 1px solid var(--border); }
.drawer__site .drawer__label { padding: 0 var(--s-2) 0 var(--s-3); }
.drawer__site ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.drawer__site a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-2); border-radius: var(--r-sm);
  color: var(--text); text-decoration: none; font-weight: 500;
}
.drawer__site a:hover { background: var(--secondary-soft); }

/* ---------- Live chat (chat.js): stream cursor, stop button, search, real pictures ---------- */
.msg__text > * + * { margin-top: var(--s-3); }
.msg__text ol, .msg__text ul { padding-left: 1.4rem; display: grid; gap: var(--s-1); }
.msg__cursor { display: inline-block; width: 0.5em; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; background: currentColor; opacity: 0.7; animation: cursor-blink 1s step-end infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .msg__cursor { animation: none; } }
.voice-btn .stop-icon { display: none; }
.voice-btn[data-busy="true"] .pi { display: none; }
.voice-btn[data-busy="true"] .stop-icon { display: block; }
.msg__upgrade .btn { min-height: 2.75rem; padding: 0.5rem 1.1rem; text-decoration: none; }
.msg__actions .icon-btn[hidden] { display: none; }
.tile__art:not(.tile__art--px) img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile__art--gone { display: grid; place-items: center; padding: var(--s-4); text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.tile__dl { margin-left: var(--s-2); color: var(--link); font-weight: 600; }
.dr-search { padding: 0 var(--s-2) var(--s-2); }
.dr-search input { width: 100%; min-height: 2.75rem; padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--raised); color: var(--text); font: inherit; }
.dr-search[hidden], .drawer__all[hidden], .drawer__recent li[hidden] { display: none; }
.cx-composer textarea:focus-visible { outline: none; }
.cx-composer:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Accounts and billing ---------- */
.auth-tabs { display: flex; width: fit-content; }
.auth-form > * + * { margin-top: var(--s-4); }
.auth-form label { font-weight: 600; }
.auth-error { color: var(--warning); font-weight: 600; }
.auth-ok { background: var(--accent-soft); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.auth-check { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.auth-check[hidden] { display: none; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.acct { position: relative; }
.acct .round-btn { color: inherit; }
.acct__menu {
  position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 30; min-width: 15rem; max-width: min(20rem, 90vw);
  background: var(--raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  padding: var(--s-2); display: grid; gap: 2px;
}
.acct__menu[hidden] { display: none; }
.acct__email { font-weight: 600; padding: var(--s-2) var(--s-3) 0; overflow-wrap: anywhere; }
.acct__plan { padding: 0 var(--s-3) var(--s-2); border-bottom: 1px solid var(--border); margin-bottom: var(--s-1); }
.acct__item { text-align: left; background: none; border: 0; font: inherit; color: inherit; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); cursor: pointer; min-height: 2.75rem; }
.acct__item:hover, .acct__item:focus-visible { background: var(--secondary-soft); }
.acct__item[hidden] { display: none; }
.lock-card { max-width: 46rem; margin: 0 auto var(--s-3); background: var(--raised); text-align: center; }
.lock-card__title { font-size: var(--fs-h4); }
.lock-card .btn-row { justify-content: center; }
.lock-card__ok { max-width: 46rem; margin: 0 auto var(--s-3); text-align: center; }
.lock-card__ok[hidden], .lock-card[hidden], .composer[hidden] { display: none; }

/* ---------- Billing banner, account deletion, sign-up honeypot ---------- */
.btn--danger { background: var(--warning); color: var(--bg); border-color: var(--warning); }
.btn--danger:hover { background: color-mix(in srgb, var(--warning) 85%, var(--text)); }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; }
.acct__item--danger { color: var(--warning); }
.pay-banner { max-width: 46rem; margin: 0 auto var(--s-3); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); border: 1px solid var(--warning); }
.pay-banner p { margin: 0; font-weight: 600; }
.pay-banner[hidden] { display: none; }
.confirm-dialog { max-width: min(92vw, 30rem); color: var(--text); background: var(--raised); border-color: var(--border-strong); }
.confirm-dialog::backdrop { background: rgb(0 0 0 / 0.55); }
.confirm-dialog__title { font-size: var(--fs-h4); }
.confirm-dialog .btn-row { justify-content: flex-end; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot { min-height: 65px; }
.turnstile-slot[hidden] { display: none; }

/* ---------- Pages inside the chat screen: Memory, Projects, Settings ---------- */
.page { padding: var(--s-4) var(--gutter) var(--s-6); width: 100%; max-width: 46rem; margin-inline: auto; overflow-y: auto; }
.page > * + * { margin-top: var(--s-4); }
.page__head > * + * { margin-top: var(--s-2); }
.page__head h2 { font-size: var(--fs-h4); }
.page__list { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.page__list > li { display: flex; align-items: center; gap: var(--s-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); }
.page__list > li > :first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.page__list .tag { margin-right: var(--s-2); }
.page__list[hidden], .page [hidden] { display: none; }
.page__group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg, 12px); padding: var(--s-4); }
.page__group > * + * { margin-top: var(--s-3); }
.page__group h3 { font-size: var(--fs-h4, 1.25rem); }
.switch { display: flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; font-weight: 600; cursor: pointer; }
.switch input { width: 1.25rem; height: 1.25rem; accent-color: var(--secondary); flex: none; }
.cx[data-page-open="true"] .cx__composer { display: none; }

/* Share button, edit a sent message, follow-up chips, share dialog */
.acct.topbar__account { display: flex; align-items: center; gap: var(--s-1); }
.topbar__share[hidden] { display: none; }
.msg--user { position: relative; }
.msg__edit { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: var(--s-1); opacity: 0.55; color: var(--muted); }
.msg--user:hover .msg__edit, .msg__edit:focus-visible { opacity: 1; }
@media (hover: none) { .msg__edit { opacity: 0.8; } }
.msg--editing { width: min(100%, 36rem); }
.msg__editbox { width: 100%; min-height: 5rem; padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font: inherit; resize: vertical; }
.msg--editing .btn-row { justify-content: flex-end; margin-top: var(--s-2); }
.msg__followups { justify-content: flex-start; margin-top: var(--s-3); }
.msg__followups .chip { min-height: 2.5rem; padding: 0.4rem 0.9rem; font-size: var(--fs-sm); text-align: left; }
.confirm-dialog [hidden] { display: none; }
.confirm-dialog > * + * { margin-top: var(--s-3); }
.confirm-dialog .input { width: 100%; }
.share { max-width: 46rem; }
.share > * + * { margin-top: var(--s-4); }
.share__thread { display: flex; flex-direction: column; gap: var(--s-4); padding: 0; }
.share__thread[hidden], .share [hidden] { display: none; }

/* Files and photos: chips on messages and above the composer */
.file-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.file-chips[hidden], .composer__warn[hidden] { display: none; }
.msg--user .file-chips { margin-top: var(--s-2); }
.msg--user > .file-chips:first-child { margin-top: 0; }
.file-chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.25rem; max-width: 16rem; padding: 0.25rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--raised); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.file-chip > span:not(.pi), button.file-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.file-chip { cursor: pointer; }
button.file-chip:hover { background: var(--secondary-soft); }
.file-chip--pending { padding-right: 0.25rem; }
.file-chip__x { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.25rem; line-height: 1; }
.file-chip__x:hover { background: var(--secondary-soft); color: var(--text); }
.composer__files { max-width: 46rem; margin: 0 auto var(--s-2); }
.composer__warn { color: var(--warning); font-weight: 600; margin-bottom: var(--s-2); }
.msg__status { color: var(--muted); font-style: italic; }
a.acct__item { display: flex; align-items: center; text-decoration: none; }

/* Projects */
.topbar__start { justify-self: start; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.topbar__project { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.topbar__project[hidden] { display: none; }
.page__row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.page__row .input { flex: 1 1 14rem; min-width: 0; }
.page__textarea { width: 100%; min-height: 7rem; resize: vertical; }
.page__detail > * + * { margin-top: var(--s-4); }
.page__list button.page__open { background: none; border: 0; padding: var(--s-2) 0; font: inherit; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; width: 100%; }
.page__list button.page__open:hover { color: var(--link); }

/* Settings and voice */
fieldset.page__group { margin-inline: 0; min-width: 0; }
fieldset.page__group legend { padding: 0 var(--s-1); }
.page__keys { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.page__keys kbd { display: inline-block; min-width: 1.75rem; padding: 0.1rem 0.4rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--raised); font-size: var(--fs-sm); text-align: center; }
[data-mic][aria-pressed="true"] { background: var(--secondary-soft); color: var(--secondary); }
[data-mic][aria-disabled="true"] { opacity: 0.6; }
[data-speak][aria-pressed="true"] { color: var(--secondary); }
html[data-voice="off"] [data-mic], html[data-voice="off"] [data-speak] { display: none; }

/* Web search sources under a reply */
.msg__sources { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); }
.msg__sources-title { font-weight: 600; color: var(--muted); }
.msg__sources ol { margin-top: var(--s-1); padding-left: 1.4rem; display: grid; gap: var(--s-1); }
.msg__sources a { overflow-wrap: anywhere; }

/* Website controls (admin portal): switched-off features are hidden, and the announcement banner. */
html[data-off~="images"] [data-feature~="images"],
html[data-off~="files"] [data-feature~="files"],
html[data-off~="projects"] [data-feature~="projects"],
html[data-off~="memory"] [data-feature~="memory"],
html[data-off~="voice"] [data-feature~="voice"],
html[data-off~="voice"] [data-speak],
html[data-off~="share_links"] [data-feature~="share_links"],
html[data-off~="signups"] [data-feature~="signups"] { display: none !important; }
.announce { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--accent-soft); color: var(--text);
  border-bottom: 1px solid var(--border); font-size: var(--fs-sm); line-height: 1.4; }
.announce[hidden] { display: none; }
.announce__text { flex: 1; margin: 0; min-width: 0; }
.announce__text a { color: var(--link); font-weight: 600; margin-left: 6px; }
.announce__x { flex: none; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.25rem; line-height: 1;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.announce__x:hover { background: rgba(0, 0, 0, .06); }
.announce__x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Privacy and Terms pages */
.legal h2 { font-size: var(--fs-h3); margin-top: var(--s-6); }
.legal .notice h2.legal__short { font-size: var(--fs-h4); margin: 0 0 var(--s-2); }
.legal .notice ul { margin: 0; padding-left: 1.25rem; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: var(--s-1); }
.legal .table-wrap { overflow-x: auto; }
.legal table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); }
.legal th { color: var(--muted); font-weight: 600; }

/* ---------- Waiting line, code blocks and generative UI in replies (chat.js, genui.js) ---------- */
.buddy-say { position: absolute; left: 12px; right: 12px; bottom: 0; margin: 0; z-index: 1; font-size: var(--fs-sm); color: var(--muted); line-height: 1.3; }
.msg__status[data-rot], .buddy-say:not([hidden]) { animation: status-in var(--t-med) var(--ease); }
@keyframes status-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msg__status[data-rot], .buddy-say:not([hidden]) { animation: none; } }
.md-seg > * + * { margin-top: var(--s-3); }
.msg__text code { font-family: var(--mono); font-size: 0.92em; background: var(--secondary-soft); border-radius: 4px; padding: 0 0.25em; }
.msg__code { position: relative; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.msg__code pre { margin: 0; padding: var(--s-3) var(--s-4); overflow-x: auto; font-family: var(--mono); font-size: 0.875rem; line-height: 1.55; }
.msg__text .msg__code code { background: none; padding: 0; font-size: inherit; }
.msg__lang { display: block; padding: var(--s-1) var(--s-4); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--muted); }
.gx-alt { color: var(--muted); }
.gx { margin: 0; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); min-width: 0; max-width: 100%; }
.gx > * + * { margin-top: var(--s-3); }
.gx__title { font-weight: 650; }
.gx__note { color: var(--muted); font-size: var(--fs-sm); }
.gx__bar, .gx__tools { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.gx__canvas { position: relative; height: 260px; }
@media (min-width: 700px) { .gx__canvas { height: 300px; } }
.gx__key { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--muted); }
.gx__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.gx__swatch--up { background: var(--success); } .gx__swatch--down { background: var(--warning); margin-left: var(--s-2); }
.gx__search { flex: 1 1 10rem; min-width: 0; padding: var(--s-1) var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font: inherit; }
.gx__scroll { max-height: 22rem; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-sm); -webkit-overflow-scrolling: touch; }
.gx__scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gx__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.gx__table th, .gx__table td { padding: var(--s-2) var(--s-3); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.gx__table th { position: sticky; top: 0; background: var(--raised); z-index: 1; }
.gx__table td.gx__num { text-align: right; font-variant-numeric: tabular-nums; }
.gx__sort { all: unset; cursor: pointer; font-weight: 650; color: var(--text); }
.gx__sort::after { content: ""; display: inline-block; margin-left: 0.35em; color: var(--muted); }
th[aria-sort="ascending"] .gx__sort::after { content: "\25B2"; font-size: 0.7em; }
th[aria-sort="descending"] .gx__sort::after { content: "\25BC"; font-size: 0.7em; }
.gx__sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.gx__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--s-2); }
.gx__thumb { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--raised); color: var(--text); cursor: zoom-in; overflow: hidden; font: inherit; }
.gx__thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; image-rendering: auto; }
.gx__thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gx__cap { display: block; padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); text-align: left; }
.gx-lightbox { max-width: min(92vw, 56rem); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--raised); color: var(--text); }
.gx-lightbox::backdrop { background: rgba(10, 10, 20, 0.7); }
.gx-lightbox__img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; }
.gx-lightbox__cap { margin: var(--s-3) 0; text-align: center; }
.gx-lightbox__row { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }
.gx__diagram { overflow-x: auto; color: var(--text); }
.gx__diagram svg { display: block; margin: 0 auto; height: auto; }
.gx--file { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.gx--file > * + * { margin-top: 0; }
.gx__fileinfo { flex: 1 1 10rem; min-width: 0; }
.gx__filename { font-weight: 650; overflow-wrap: anywhere; }
.gx__form { display: grid; gap: var(--s-3); }
.gx__field { display: grid; gap: var(--s-1); }
.gx__field input[type="number"], .gx__field input[type="text"], .gx__field select { padding: var(--s-1) var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--raised); color: var(--text); font: inherit; max-width: 20rem; }
.gx__slider { display: flex; align-items: center; gap: var(--s-3); }
.gx__slider input { flex: 1; accent-color: var(--secondary); }
.gx__slideval { min-width: 3ch; font-variant-numeric: tabular-nums; }
.gx__result { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-sm); background: var(--secondary-soft); }
.gx__rvalue { font-weight: 650; font-variant-numeric: tabular-nums; }
.gx__btn { justify-self: start; }
.gx__quiz { display: grid; gap: var(--s-3); }
.gx__q { margin: 0; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); display: grid; gap: var(--s-1); }
.gx__q legend { font-weight: 650; padding: 0 var(--s-1); }
.gx__opt { display: flex; gap: var(--s-2); align-items: center; }
.gx__opt input { accent-color: var(--secondary); }
.gx__feedback--ok { color: var(--success); } .gx__feedback--no { color: var(--warning); }
.gx__score { font-weight: 650; }
.gx [hidden] { display: none !important; }

/* Thinking icons: favicons of the sites a reply reads rise above the companion's head as small pixel-framed chips
   (chat.js "sky"), then settle into the Sources list when the answer starts. Same anchors as .buddy. */
.sky {
  position: absolute; left: 220px; top: 262px; transform: translate(-50%, -100%); z-index: 2;
  display: flex; gap: 4px; pointer-events: none;
}
@media (min-width: 900px) { .empty .sky { left: 560px; } }
.side .sky { left: 76px; top: auto; bottom: 78px; transform: translateX(-50%); }
.sky__chip {
  display: grid; place-items: center; width: 24px; height: 24px; background: var(--raised);
  box-shadow: 0 -2px 0 0 var(--border-strong), 0 2px 0 0 var(--border-strong), -2px 0 0 0 var(--border-strong), 2px 0 0 0 var(--border-strong);
  margin: 2px; animation: sky-rise 600ms steps(6, end) both;
}
.sky__fav { width: 16px; height: 16px; image-rendering: pixelated; }
.sky[data-settling="true"] .sky__chip { animation: sky-settle 500ms steps(5, end) forwards; }
@keyframes sky-rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sky-settle { to { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sky__chip, .sky[data-settling="true"] .sky__chip { animation: none; }
  .sky[data-settling="true"] { visibility: hidden; }
}
/* Sources: favicon, title link, site name */
.msg__sources li { display: flex; gap: var(--s-2); align-items: flex-start; }
.msg__sources ol { list-style: none; padding-left: 0; }
.msg__fav { flex: none; width: 16px; height: 16px; margin-top: 0.2rem; image-rendering: pixelated; }
.msg__src { min-width: 0; }
.msg__site { color: var(--muted); }
.msg__sources--in { animation: sky-in 400ms var(--ease) both; }
@keyframes sky-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg__sources--in { animation: none; } }
.msg__status--step { margin-top: var(--s-2); }
.voice-note { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-sm); }
.tile--wait .tile__art { display: grid; place-items: center; min-height: 8rem; }

/* ==========================================================================
   World 2 (2026-10-28): nature scenes, motion layers, the living character, bubbles, stage pages, slides.
   Scenes are drawn by assets/world.js at whole-number scales (pixel README "World 3", anchors3.json).
   ========================================================================== */
.world { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.world__stage { position: absolute; }
.world__art { position: absolute; inset: 0; background: 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
/* Light mode: calm morning light. Dim and desaturate the art layer and veil the sky; the companion and its bubbles
   (z-index 1 and 2) sit above the veil, so text is never dimmed. Dark mode sets both tokens to none. */
.world__stage, .scene__art, .site-footer__ground { filter: var(--scene-filter, none); }
.world::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--scene-veil, transparent); pointer-events: none; }
.world__stage > i { position: absolute; display: block; image-rendering: pixelated; background-repeat: no-repeat; }
.world__ff {
  width: calc(32px * var(--s)); height: calc(32px * var(--s));
  background: url("pixel/fireflies-sheet.png") 0 0 / calc(256px * var(--s)) calc(32px * var(--s));
  animation: w-ff 1.8s steps(8) infinite;
}
@keyframes w-ff { to { background-position: calc(-256px * var(--s)) 0; } }
.world__smoke {
  width: calc(12px * var(--s)); height: calc(24px * var(--s));
  background: url("pixel/smoke-sheet.png") 0 0 / calc(72px * var(--s)) calc(24px * var(--s));
  animation: w-smoke 1.8s steps(6) infinite;
}
@keyframes w-smoke { to { background-position: calc(-72px * var(--s)) 0; } }
.world__glint {
  width: calc(24px * var(--s)); height: calc(6px * var(--s));
  background: url("pixel/shimmer-sheet.png") 0 0 / calc(96px * var(--s)) calc(6px * var(--s));
  animation: w-glint 2s steps(4) infinite;
}
@keyframes w-glint { to { background-position: calc(-96px * var(--s)) 0; } }
.world__leaf {
  width: calc(8px * var(--s)); height: calc(8px * var(--s)); opacity: 0;
  background: url("pixel/leaves-sheet.png") 0 0 / calc(48px * var(--s)) calc(8px * var(--s));
  animation: w-fall 16s linear infinite, w-leaf 0.9s steps(6) infinite;
}
@keyframes w-leaf { to { background-position: calc(-48px * var(--s)) 0; } }
@keyframes w-fall {
  0% { transform: translate(0, 0); opacity: 0; } 5% { opacity: 1; }
  50% { transform: translate(calc(var(--dx) * 0.4), calc(var(--dy) * 0.5)); }
  88% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .world__stage > i { animation: none !important; }
  .world__leaf { display: none; }
}

/* The living character (world.js Pet). Decoration: never blocks clicks, never over text columns. */
.pet {
  --ps: 2; position: absolute; left: 0; top: 0; z-index: 1; width: calc(28px * var(--ps)); height: calc(28px * var(--ps));
  margin: 0; padding: 0; border: 0; background: none; pointer-events: none; will-change: transform;
}
.pet[hidden] { display: none; }
.pet__body { width: 100%; height: 100%; }
.pet[data-dir="left"] .pet__body { transform: scaleX(-1); }
.pet__sprite { width: 100%; height: 100%; background: url("pixel/companion-sheet.png") 0 0 / auto 100% no-repeat; image-rendering: pixelated; }
button.pet { pointer-events: auto; cursor: pointer; border-radius: 8px; color: inherit; }
button.pet:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* White pixel bubble: 18 x 18 nine-slice at 2x */
.pet__bubble, .say {
  position: absolute; z-index: 2; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; min-height: 52px; padding: 0 4px; color: #1E1B2E; text-align: center;
  font: 600 0.875rem/1.3 var(--font); border: 12px solid transparent;
  border-image: url("pixel/bubble-9slice.png") 6 fill / 12px stretch; image-rendering: pixelated; pointer-events: none;
}
.pet__bubble[hidden] { display: none; }
.pet__dots { flex: none; width: 26px; height: 12px; background: url("pixel/bubble-dots-sheet.png") 0 0 / 104px 12px no-repeat; image-rendering: pixelated; animation: w-dots 0.8s steps(4) infinite; }
@keyframes w-dots { to { background-position: -104px 0; } }
.pet__say { margin: 0; max-width: none; overflow-wrap: anywhere; }
.pet__say[hidden] { display: none; }
.pet .sky.pet__sky { position: static; transform: none; left: auto; top: auto; bottom: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.pet__sky:empty { display: none; }
.pet__tail { position: absolute; top: calc(100% + 10px); width: 24px; height: 24px; background: url("pixel/bubble-tail-think.png") 0 0 / 24px 24px no-repeat; image-rendering: pixelated; }
.pet__bubble[data-tail="right"] .pet__tail { transform: scaleX(-1); }
.pet__bubble--side { flex-direction: row; flex-wrap: wrap; min-height: 44px; text-align: left; }
.pet__bubble--side .pet__tail { display: none; }
@media (prefers-reduced-motion: reduce) { .pet__dots { animation: none; } }

/* Landing speech bubble: pages through what Particle can do, one per press */
.say { bottom: calc(100% + 16px); left: 50%; width: min(17rem, calc(100vw - 2rem)); transform: translateX(-50%); font-size: 0.9375rem; padding: 2px 6px; }
.say::after {
  content: ""; position: absolute; top: calc(100% + 10px); left: calc(50% - 8px); width: 16px; height: 14px;
  background: url("pixel/bubble-tail-speech.png") 0 0 / 16px 14px no-repeat; image-rendering: pixelated;
}
.say__hint { display: block; margin-top: 2px; font-weight: 500; font-size: 0.8125rem; color: #555169; }
.say[data-pop="true"] { animation: say-pop 260ms steps(4, end); }
@keyframes say-pop { from { transform: translateX(-50%) scale(0.9); } to { transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .say[data-pop="true"] { animation: none; } }

/* ---------- Stage pages: header, one screen of art with content over it, small footer ---------- */
body.stage { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
body.stage > .site-header { flex: none; }
.stage__world { position: fixed; inset: 4rem 0 0 0; z-index: 0; }
body.stage > main { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s-4) var(--gutter); overflow: hidden; }
body.stage > .site-footer { position: relative; z-index: 1; flex: none; }
.stage-card {
  width: 100%; max-width: 40rem; margin-inline: auto; text-align: center; padding: var(--s-5);
  background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-2);
}
.stage-card > * + * { margin-top: var(--s-3); }
.stage-card .lead { margin-inline: auto; }
.stage-card .btn-row { justify-content: center; }
body.stage h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }

/* Landing */
body.stage > main.landing { justify-content: flex-start; padding-top: clamp(1rem, 5vh, 3.5rem); }
.landing .stage-card { max-width: 34rem; }
.landing .btn-row { margin-top: var(--s-4); }
/* Landing hero stays above the companion's bubble: the bubble's top sits 191 px above the footer on every size,
   so main keeps that zone (plus a gap) free and the card's text scrolls inside it when the screen is too short. */
body.stage > main.landing { padding-top: var(--s-4); padding-bottom: 13.25rem; }
.landing .stage-card { display: flex; flex-direction: column; max-height: 100%; min-height: 0; }
.landing .stage-card > * { flex: none; }
.landing .landing__text { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.landing .landing__text > * + * { margin-top: var(--s-3); }
.landing .landing__text .lead { font-size: 1rem; line-height: 1.55; max-width: 44rem; }
@media (min-width: 48rem) { .landing .stage-card { max-width: 50rem; padding: var(--s-4) var(--s-5); } }
@media (max-width: 47.99rem) {
  body.stage > main.landing { padding-top: var(--s-2); }
  .landing .stage-card { padding: var(--s-4) var(--s-4) var(--s-3); }
  .landing .stage-card > * + * { margin-top: var(--s-2); }
  .landing.landing h1 { font-size: 1.5rem; }
  .landing .landing__text > * + * { margin-top: var(--s-2); }
  .landing .landing__text .lead { font-size: 0.875rem; line-height: 1.45; }
  .landing .btn-row { margin-top: var(--s-3); gap: var(--s-2); flex-wrap: nowrap; }
  .landing .btn-row .btn { padding-inline: 0.75rem; font-size: 0.875rem; min-height: 40px; white-space: nowrap; }
}

/* Slides: one block per screen, sideways. The outgoing slide leaves to the left, the next comes in from the right. */
.slides { width: 100%; max-width: 46rem; margin-inline: auto; display: flex; flex-direction: column; min-height: 0; height: 100%; max-height: 40rem; gap: var(--s-3); }
.slides__head { flex: none; text-align: center; }
.slides__head > * {
  display: inline-block; padding: 0 0.5rem;
  text-shadow: 0 0 2px var(--bg), 0 0 6px var(--bg), 0 0 12px var(--bg), 0 0 20px var(--bg);
}
.slides__head .lead { display: table; margin: var(--s-1) auto 0; font-size: 1.0625rem; color: var(--text); }
.slides__view { position: relative; flex: 1 1 auto; min-height: 12rem; overflow: hidden; touch-action: pan-y; }
.slide {
  position: absolute; inset: 0; margin: auto; height: fit-content; max-height: 100%; overflow-y: auto;
  width: calc(100% - 8px); max-width: 40rem; text-align: center;
  background: color-mix(in srgb, var(--surface) 96%, transparent); padding: var(--s-5);
  transform: translateX(110%); visibility: hidden;
  transition: transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 480ms;
}
.slide[data-pos="prev"] { transform: translateX(-110%); }
.slide[data-pos="on"] { transform: none; visibility: visible; transition: transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.slide > * + * { margin-top: var(--s-3); }
.slide p, .slide li { margin-inline: auto; }
.slide > .pi { margin-inline: auto; }
.slide ul.list { text-align: left; max-width: 30rem; margin-inline: auto; }
.slide .btn-row { justify-content: center; }
.slide h2 { font-size: var(--fs-h3); }
.slide .faq { text-align: left; margin-inline: auto; }
.slides__nav { flex: none; display: flex; align-items: center; justify-content: center; gap: var(--s-3); }
.slides__dots { display: flex; align-items: center; gap: 6px; min-height: 2rem; padding: 0 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--bg) 84%, transparent); }
.slides__dot { display: block; width: 12px; height: 12px; padding: 0; border: 2px solid var(--border-strong); border-radius: 0; background: transparent; }
.slides__dot[aria-current="true"] { background: var(--secondary); border-color: var(--secondary); }
@media (prefers-reduced-motion: reduce) { .slide, .slide[data-pos="on"] { transition: none; } }

/* One-place navigation (stage.js): a marketing section slides in over the same art */
body.stage > main.is-out { position: absolute; left: 0; right: 0; pointer-events: none; }
/* the new panel sets up without its own inner motion; the scene is its own layer, so the panels moving over it
   never repaint it */
body.stage > main.is-in .slide, body.stage > main.is-in .flip__inner { transition: none; }
.stage__world { contain: strict; transform: translateZ(0); }

/* Pricing: flipping plan cards */
.plans { width: 100%; max-width: 64rem; display: grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flip { perspective: 1400px; min-width: 0; }
.flip__inner { position: relative; height: 24rem; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.flip[data-flipped="true"] .flip__inner { transform: rotateY(180deg); }
.flip__face {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); text-align: center;
  background: color-mix(in srgb, var(--surface) 97%, transparent); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow-y: auto;
}
.flip__face--back { transform: rotateY(180deg); }
.flip__face .px-head { justify-content: center; }
.flip__face ul { text-align: left; }
.flip__face .btn-row { justify-content: center; margin-top: auto; }
.flip__price { font-size: 1.75rem; font-weight: 650; line-height: 1.15; }
.flip__price small { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.flip__soon { margin-top: auto; align-self: center; padding: 0.375rem 1rem; border-radius: var(--r-pill); background: var(--accent-soft); font-weight: 650; }
.plans__more { margin-top: var(--s-3); text-align: center; max-width: none; align-self: stretch; width: 100%; }
.plans__more .link-btn { padding: 0.25rem 0.75rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--bg) 85%, transparent); }
@media (prefers-reduced-motion: reduce) { .flip__inner { transition: none; } }
@media (max-width: 56rem) {
  .plans { display: block; max-width: 24rem; margin-inline: auto; }
  .plans .flip:not([data-pos="on"]) { display: none; }
  .plans-nav { display: flex; }
}
@media (min-width: 56.01rem) { .plans-nav { display: none !important; } }
/* Short desktop screens (1280x720, 1366x768, 1280x800): all three cards and their buttons fit without scrolling */
@media (min-width: 56.01rem) and (max-height: 52rem) {
  .slides--wide { gap: var(--s-2); }
  .slides--wide .slides__head h1 { font-size: 2rem; line-height: 1.15; }
  .slides--wide .slides__head .lead { font-size: 0.9375rem; margin-top: 0; }
  .flip__face { gap: var(--s-2); padding: var(--s-3) var(--s-4); }
  .flip__face .px-head h2 { font-size: 1.75rem; }
  .flip__price { font-size: 1.375rem; }
  .flip__face .list li + li { margin-top: 0.125rem; }
  .flip__face .list li, .flip__face p { line-height: 1.4; }
  .plans__more { margin-top: var(--s-1); }
}
.compare-dialog { width: min(96vw, 52rem); max-height: 88vh; overflow: auto; }
.compare-dialog .table-wrap { margin-top: var(--s-3); }

/* Reading pages (Privacy, Terms): a centred panel that scrolls inside, over the art */
.reading { width: 100%; max-width: 46rem; max-height: 100%; overflow-y: auto; padding: var(--s-5); background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: var(--shadow-2); text-align: left; }
.reading:focus { outline: none; }

/* Support and contact over the art */
.stage-grid { width: 100%; max-width: 64rem; max-height: 100%; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); overflow-y: auto; align-content: center; padding: 4px; }
.stage-grid > .card { background: color-mix(in srgb, var(--surface) 96%, transparent); }

/* ---------- Footer: small, the art behind it, the grass strip as its bottom edge ---------- */
.site-footer { padding-block: 0; border-top: 0; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--text); margin-top: auto; }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--s-4); padding-top: var(--s-1); }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-3); list-style: none; padding: 0; margin: 0; }
.site-footer__links li { max-width: none; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--text); }
.site-footer .legal { margin: 0; padding: 0; border: 0; color: var(--muted); }
.site-footer__ground { margin-top: 0; height: 32px; }
.site-footer::after { bottom: 2px; }
body:not(.stage) .site-footer { background: var(--surface); }

/* ---------- Centering pass: icons inside buttons, labels beside icons ---------- */
.btn, .pill-btn, .chip, .dr-item, .file-chip, .acct__item { align-items: center; }
.btn .pi, .pill-btn .pi, .dr-item .pi, .chip .pi { align-self: center; margin-block: 0; }
.round-btn > .pi, .icon-btn > .pi, .voice-btn > .pi { margin: auto; }
.stage-card .px-head, .slide .px-head { justify-content: center; }

/* ---------- Chat (chat.html) with the World 2 art ---------- */
.cx__main { position: relative; isolation: isolate; }
.cx__main > .cx__body, .cx__main > .cx__composer { position: relative; z-index: 2; }
.cx__main > .topbar { z-index: 40; }
.cx:not([data-band="true"]) .topbar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cx:not([data-band="true"]) .empty { background: transparent; padding: 0; min-height: 8rem; }
.cx:not([data-band="true"]) .cx__composer { background: transparent; }
.cx:not([data-band="true"]) .composer__note { width: fit-content; max-width: calc(100% - 2rem); padding: 0.125rem 0.75rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--bg) 85%, transparent); }
.cx[data-band="true"] .cx__world, .cx[data-active-tab="images"] .cx__world, .cx[data-page-open="true"] .cx__world { display: none; }
.cx[data-active-tab="images"] .cx__body, .cx[data-page-open="true"] .cx__body { background: var(--bg); }
.empty__band { display: none; }
.cx[data-band="true"] .empty__band { display: block; position: relative; inset: auto; height: 100px; }
.cx[data-band="true"] .empty { padding: 0 0 4px; }
.cx[data-band="true"] .cx__body, .cx[data-band="true"] .cx__composer { background: var(--bg); }
/* The composer grows into a rounded box (not a pill) so long text is never clipped at the corners */
.cx-composer { align-items: flex-end; border-radius: 26px; }
.cx-composer textarea { padding: 0.6rem var(--s-2); }
@media (min-width: 900px) {
  .cx[data-band="true"] .side { display: block; position: relative; grid-row: 1 / 4; min-width: 0; overflow: hidden; }
  .cx[data-band="true"] .side--left { grid-column: 1; }
  .cx[data-band="true"] .side--right { grid-column: 3; }
  .cx[data-band="true"] .topbar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
  .cx[data-band="true"] .topbar > * { pointer-events: auto; }
  .cx[data-band="true"] .empty, .cx[data-band="true"] .empty__band { display: none; }
  .cx[data-band="true"] .cx__main { grid-template-columns: minmax(170px, 1fr) minmax(0, 46rem) minmax(170px, 1fr); }
  .cx[data-active-tab="images"] .side, .cx[data-page-open="true"] .side { display: none !important; }
}
/* Shared with me and the space switch in the drawer */
.dr-space { display: flex; gap: 2px; margin: 0 var(--s-2) var(--s-2); padding: 3px; border-radius: var(--r-pill); background: var(--secondary-soft); }
.dr-space[hidden] { display: none; }
.dr-space button { flex: 1; min-width: 0; min-height: 2.25rem; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-space button[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: var(--shadow-1); }
.drawer__shared { padding-top: var(--s-2); }
.drawer__shared[hidden] { display: none; }
.drawer__shared ul { display: grid; gap: 2px; list-style: none; padding: 0; }
.shared-note { max-width: 46rem; margin: 0 auto var(--s-3); text-align: center; }
.shared-note[hidden] { display: none; }
/* Settings: character and background pickers */
.picks { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.pick { display: grid; justify-items: center; gap: var(--s-1); width: 6.5rem; padding: var(--s-2); border: 2px solid var(--border); border-radius: var(--r-md); background: var(--raised); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.pick[aria-pressed="true"] { border-color: var(--secondary); background: var(--secondary-soft); font-weight: 650; }
.pick img { width: 64px; height: 64px; image-rendering: pixelated; }
.pick__sprite { width: 56px; height: 56px; background: 0 0 / auto 100% no-repeat; image-rendering: pixelated; }
.slides--wide { max-width: 64rem; max-height: none; height: auto; }
.term-mock { text-align: left; font-size: 0.875rem; line-height: 1.5; white-space: pre-wrap; }
.contact-card .px-head { justify-content: center; }
/* Support (support.html): the form and the ticket list on one screen over the art; scrolls inside on small screens */
body.stage > main > .stage-scroll { width: 100%; max-height: 100%; overflow-y: auto; padding: var(--s-2) 0; background: transparent; }
.stage-scroll .sp-head { text-align: center; }
.stage-scroll .sp-head > * { display: table; margin-inline: auto; padding: 0.15rem 0.75rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 84%, transparent); }
.stage-scroll .card { background: color-mix(in srgb, var(--surface) 96%, transparent); }

/* Picture editing overlay (picture-edit.js) in the World 2 look: pixel edge, pill buttons, gold primary */
html .ppe-back { background: rgb(13 15 31 / 0.6); }
html .ppe { border: 0; border-radius: 0; background: var(--surface); box-shadow: 0 -2px 0 0 var(--border-strong), 0 2px 0 0 var(--border-strong), -2px 0 0 0 var(--border-strong), 2px 0 0 0 var(--border-strong), var(--shadow-2); padding: var(--s-5); gap: var(--s-3); }
html .ppe-head h2 { font-size: var(--fs-h4); }
html .ppe-x { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--raised); }
html .ppe-img { border-radius: var(--r-sm); image-rendering: auto; }
html .ppe textarea { border-radius: var(--r-md); padding: var(--s-2) var(--s-3); min-height: 4.5rem; }
html .ppe-row { justify-content: center; }
html .ppe-row button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.5rem 1.25rem; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--raised); color: var(--text); font-weight: 600; }
html .ppe-row button:hover:not(:disabled) { background: var(--secondary-soft); }
html .ppe-row .ppe-go { background: var(--accent); border-color: var(--accent-edge); color: var(--accent-text); }
html .ppe-row .ppe-go:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
html .ppe-thumbs { justify-content: center; }
html .ppe-thumbs button[aria-current="true"] { border-color: var(--secondary); }
html .ppe-msg { text-align: center; }
.cx[data-shared="true"] .msg__edit, .cx[data-shared="true"] [data-retry], .cx[data-shared="true"] .msg__followups { display: none !important; }
.tile__edit { display: block; margin: var(--s-1) auto 0; font-size: var(--fs-sm); }
.pick[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ---------- Agent World pages (site/agents/*.html): a calm plain background, content on cards; the only pixel world is the hero on the index page ---------- */
body.agents { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg);
  background-image: radial-gradient(rgba(var(--star), 0.06) 1px, transparent 1.4px); background-size: 24px 24px; }
body.agents > main { flex: 1 0 auto; }
body.agents .section { background: transparent; padding-block: var(--s-5) var(--s-7); }
.ag { display: grid; gap: var(--s-5); max-width: 64rem; margin-inline: auto; }
.ag--narrow { max-width: 46rem; }
.ag > * + * { margin-top: 0; }
.ag-top { display: grid; gap: var(--s-3); }
.ag-top h1 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); margin: 0; }
.ag-top .lead { margin: 0; max-width: 46rem; font-size: var(--fs-body); }
.ag-top .btn-row { margin-top: var(--s-1); }
.ag-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--shadow-1); display: grid; gap: var(--s-3); min-width: 0; align-content: start; }
.ag-card > h2, .ag-card > header > h2, .ag-sec > h2 { font-family: var(--font); font-size: 1.375rem; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.ag-card > p, .ag-card header p { margin: 0; }
.ag-card h3 { font-family: var(--font); font-size: 1.125rem; margin: 0; }
.ag .help { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.ag-sec { display: grid; gap: var(--s-3); }
.ag-grid { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .ag-grid--2 { grid-template-columns: 1fr 1fr; } .ag-grid--cards { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }
.ag-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.ag-list > li { background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-1); min-width: 0; }
.ag-list > li p { margin: 0; }
.ag-list--plain > li { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: var(--s-2) 0; }
.ag-list--plain > li:last-child { border-bottom: 0; }
.ag pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font); margin: 0; }
.ag-form { display: grid; gap: var(--s-4); }
.ag-empty { margin: 0; color: var(--muted); }
.ag-empty a { font-weight: 600; }
.ag-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.ag-meta { color: var(--muted); font-size: var(--fs-sm); }
.ag-money { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.ag-stat { display: grid; gap: 2px; }
.ag-stats { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.ag .tag--ok { background: color-mix(in srgb, var(--success) 18%, var(--surface)); }
.ag .tag--warn { background: var(--accent-soft); }
.ag .tag--bad { background: color-mix(in srgb, var(--warning) 20%, var(--surface)); }
.ag details > summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.ag-nav { display: flex; flex-wrap: wrap; gap: var(--s-1); width: fit-content; max-width: 100%; padding: 4px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); }
.ag-nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--s-4); border-radius: var(--r-pill); color: var(--text); text-decoration: none; font-weight: 600; }
.ag-nav a:hover { background: var(--secondary-soft); }
.ag-nav a[aria-current="page"] { background: var(--secondary-soft); color: var(--text); }
/* Choice cards (wizard types, characters, budget presets, task timing) */
.ag-choices { display: grid; gap: var(--s-3); border: 0; padding: 0; margin: 0; min-width: 0; }
.ag-choices > legend { padding: 0; margin-bottom: var(--s-2); font-weight: 600; }
.ag-choices--small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .ag-choices--cards { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .ag-choices--small { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); } }
.ag-choice { position: relative; display: grid; gap: var(--s-1); align-content: start; padding: var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--raised); cursor: pointer; min-height: 2.75rem; }
.ag-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ag-choice:hover { border-color: var(--secondary); }
.ag-choice:has(input:checked) { border-color: var(--secondary); box-shadow: 0 0 0 2px var(--secondary); background: color-mix(in srgb, var(--secondary-soft) 55%, var(--raised)); }
.ag-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ag-choice__title { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: 1.0625rem; }
.ag-choice__title svg, .ag-ico { width: 24px; height: 24px; flex: none; color: var(--secondary); }
.ag-choice p, .ag-choice ul { margin: 0; }
.ag-choice ul { padding-left: 1.1rem; color: var(--muted); font-size: var(--fs-sm); }
.ag-choice .note { font-size: var(--fs-sm); color: var(--muted); }
.ag-choice--center { justify-items: center; text-align: center; }
.ag-sprite { width: 56px; height: 56px; background: 0 0 / auto 100% no-repeat; image-rendering: pixelated; }
/* Toggles (abilities) */
.ag-toggle { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--raised); cursor: pointer; }
.ag-toggle input { width: 1.375rem; height: 1.375rem; margin: 2px 0 0; accent-color: var(--secondary); grid-row: span 2; }
.ag-toggle strong { font-weight: 650; }
.ag-toggle span { color: var(--muted); font-size: var(--fs-sm); }
.ag-ok { display: inline-block; margin-left: var(--s-2); padding: 0 0.5rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--text); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
/* Wizard */
.wiz-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.wiz-progress li { height: 6px; border-radius: 3px; background: var(--border); }
.wiz-progress li[data-done] { background: var(--secondary); }
.wiz-step-label { margin: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.wiz-step > h2 { font-family: var(--font); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); margin: 0; }
.wiz-step { display: grid; gap: var(--s-4); }
.wiz-step[hidden] { display: none; }
.wiz-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.wiz-review { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.wiz-review dt { color: var(--muted); }
.wiz-review dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .wiz-review { grid-template-columns: 1fr; gap: 2px; } .wiz-review dd { margin-bottom: var(--s-2); } }
/* Agent header and agent cards */
.ag-who { display: flex; align-items: center; gap: var(--s-4); }
.ag-who .ag-sprite { width: 84px; height: 84px; flex: none; border-radius: var(--r-md); background-color: var(--secondary-soft); }
.ag-who h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); margin: 0; }
.ag-who p { margin: 0; }
.ag-agent-card { position: relative; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s-4); row-gap: var(--s-1); }
.ag-agent-card .ag-sprite { grid-row: span 3; border-radius: var(--r-sm); background-color: var(--secondary-soft); }
.ag-agent-card h3 a { text-decoration: none; color: var(--text); }
.ag-agent-card h3 a::after { content: ""; position: absolute; inset: 0; }
.ag-agent-card:hover { border-color: var(--secondary); }
/* The world hero (index): the only pixel world on these pages */
.agw-hero { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); background: var(--surface); }
.agw-hero__empty { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(26rem, calc(100% - 2rem)); margin: 0; text-align: center; display: grid; gap: var(--s-2); justify-items: center;
  background: color-mix(in srgb, var(--surface) 95%, transparent); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-2); }
.agw-hero__empty h2 { font-family: var(--font); font-size: 1.25rem; margin: 0; }
.agw-hero__empty p { margin: 0; color: var(--muted); }
.agw-hero__empty[hidden] { display: none; }
.agw-now { list-style: none; margin: 0; padding: var(--s-2) var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.agw-now:empty { display: none; }
.agworld { position: relative; width: 100%; aspect-ratio: 16 / 7; min-height: 15rem; max-height: 60vh; overflow: hidden; }
@media (max-width: 40rem) { .agworld { aspect-ratio: 4 / 5; max-height: 70vh; } .agw-hero__empty { top: 40%; } }
.agworld__scene { position: absolute; inset: 0; }
.agworld__crowd { position: absolute; inset: 0; pointer-events: none; }
.agent { --ps: 2; position: absolute; left: 0; top: 0; width: calc(28px * var(--ps)); height: calc(28px * var(--ps)); }
.agent__body, .agent__sprite { width: 100%; height: 100%; }
.agent[data-dir="left"] .agent__body { transform: scaleX(-1); }
.agent__sprite { background: 0 0 / auto 100% no-repeat; image-rendering: pixelated; }
.agent__name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; padding: 0 6px; border-radius: 4px; white-space: nowrap; font-size: 0.75rem; font-weight: 650; color: #1E1B2E; background: rgb(255 255 255 / 0.85); }
.agent__bubble {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 11rem;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 2px; color: #1E1B2E; font-size: 0.75rem; font-weight: 600; line-height: 1.25; text-align: center;
  border: 12px solid transparent; border-image: url("pixel/bubble-9slice.png") 6 fill / 12px stretch; image-rendering: pixelated;
}
.agent__bubble[hidden] { display: none; }
.agent__bubble--ok { color: #A33F12; }
/* Early access dialog */
.ea-dialog { max-width: min(92vw, 32rem); margin: auto; padding: var(--s-5); border-radius: var(--r-md); }
.ea-dialog ul { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s-1); }
.ea-dialog .btn-row { justify-content: flex-end; }
.ag-cards { list-style: none; padding: 0; margin: 0; }
.ag-steps { margin: 0; padding-left: 1.4rem; display: grid; gap: var(--s-2); }
#how:focus { outline: none; }
.ag-ex { padding-left: 1.1rem; margin: 0; }
fieldset.wiz-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.ag-stack { align-content: start; }
.ag-who > div { display: grid; gap: var(--s-1); }
/* end Agent World */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .cx[data-band="true"] .cx__main { grid-template-columns: 0 minmax(0, 1fr) 180px; }
  .cx[data-band="true"] .side--left { display: none; }
}
@media (max-width: 899.98px) { .cx[data-band="true"] .cx__main > .pet { z-index: 3; } }
button.pet .say { pointer-events: auto; cursor: pointer; }
.site-footer .site-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
.dr-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); margin: 0; padding: 0 var(--s-2) var(--s-1); max-width: none; }
.dr-links a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--s-2); border-radius: var(--r-sm); color: var(--text); font-weight: 600; text-decoration: none; }
.dr-links a:hover { background: var(--secondary-soft); }
.site-footer .site-footer__links, .site-footer .legal { font-size: var(--fs-sm); }
.flip__inner { height: min(24rem, max(17rem, 56vh)); }

/* ===== Our Story (story.html) ===== */
.story { max-width: 42rem; padding: var(--s-4) var(--s-5); }
.story > * + * { margin-top: var(--s-2); }
.story p { text-align: left; max-width: none; line-height: 1.5; }
.story .story__eyebrow { margin: 0; text-align: center; font-size: var(--fs-sm); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.story h2 { margin-top: var(--s-1); font-size: 1.625rem; line-height: 1.2; text-wrap: balance; }
.story strong { font-weight: 650; }
.story--statement p { text-align: center; }
.story--statement .story__bold { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; color: var(--text); }
.story--statement .story__bold + .story__bold { margin-top: var(--s-3); }
.story--statement .story__bold + p:not(.story__bold) { margin-top: var(--s-4); }
.story__sign { margin-top: var(--s-6) !important; }
.story__sign p { margin: 0; }
.story__sign .story__name { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 700; letter-spacing: -0.02em; }
.story__sign .story__name + p { margin-top: var(--s-1); color: var(--muted); }
.slide[data-pos="on"] .story__sign { animation: story-pause 900ms ease-out 700ms both; }
@keyframes story-pause { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .slide[data-pos="on"] .story__sign { animation: none; } }
@media (max-height: 52rem), (max-width: 30rem) {
  .story { padding: var(--s-3) var(--s-4); }
  .story h2 { font-size: 1.375rem; }
  .story p { font-size: 0.9375rem; line-height: 1.45; }
  .story--statement .story__bold { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); }
  .story__sign { margin-top: var(--s-4) !important; }
}
/* ===== end Our Story ===== */

/* ===== Mobile and touch pass (qa/MOBILE-AUDIT.md) ===== */
/* Touch targets: every button and link outside running prose is at least 44 px on phones and tablets. */
@media (max-width: 64rem), (pointer: coarse) {
  .btn--sm, .msg__followups .chip, .file-chip, .dr-space button, .ag-nav a, .dr-links a, body .tm-tabs .seg__tab,
  .landing .btn-row .btn { min-height: 44px; }
  .link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .site-footer__links a { min-height: 44px; min-width: 44px; justify-content: center; }
  /* Slide dots: the square stays 12 px, the button around it is 44 px tall and as wide as the row allows
     (44 px with up to 5 dots; never under 24 px), so long decks still fit beside the arrows on a 360 px phone. */
  .slides__nav { gap: var(--s-2); max-width: 100%; }
  .slides__dots { flex: 0 1 auto; min-width: 0; gap: 0; min-height: 44px; padding: 0 4px; }
  .slides__dot { position: relative; flex: 0 1 44px; width: 44px; min-width: 24px; height: 44px; border: 0; background: transparent; }
  .slides__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid var(--border-strong); }
  .slides__dot[aria-current="true"] { background: transparent; }
  .slides__dot[aria-current="true"]::before { background: var(--secondary); border-color: var(--secondary); }
  .slides__arrow { flex: none; }
  /* a lone e-mail link: taller hit area without changing the line it sits on */
  a[href^="mailto:"], .ag p > a:only-child { display: inline-block; padding-block: 12px; }
}
/* Phones: the footer is one row (links scroll sideways, the copyright stays), so it stays small and the page
   content keeps the room. */
@media (max-width: 47.99rem) {
  .site-footer__row { flex-wrap: nowrap; justify-content: flex-start; gap: 0 var(--s-2); padding-top: 0; }
  .site-footer__row > nav { flex: 1 1 auto; min-width: 0; }
  .site-footer .site-footer__links { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; gap: 0;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .site-footer__links::-webkit-scrollbar { display: none; }
  .site-footer__links a { padding: 0 var(--s-2); white-space: nowrap; }
  .site-footer .legal { flex: none; white-space: nowrap; font-size: 0.8125rem; }
}
/* Pricing on phones and tablets: the plan card takes the room left between the title and the controls and scrolls
   inside itself, so the arrows, dots and "Compare plans" never sit over the card or behind the footer. */
@media (max-width: 56rem) {
  .slides--wide { height: 100%; max-height: 100%; }
  .slides--wide .slides__head .lead { font-size: 0.9375rem; line-height: 1.45; }
  .slides--wide .plans { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
  .plans .flip[data-pos="on"] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .plans .flip__inner { flex: 1 1 auto; min-height: 0; height: auto; max-height: 26rem; }
  .flip__face { padding: var(--s-4); gap: var(--s-2); }
  .plans__more { margin-top: 0; }
  /* the plan's button stays in view at the bottom of the card while its list scrolls */
  .flip__face .btn-row { position: sticky; bottom: calc(-1 * var(--s-4)); margin-bottom: calc(-1 * var(--s-4)); padding-block: var(--s-2) var(--s-4);
    background: color-mix(in srgb, var(--surface) 97%, transparent); }
}

/* ===== Roadmap (roadmap.html) and the landing alien ===== */
.rm .story__eyebrow { line-height: 1; }
.rm-chip {
  display: inline-block; padding: 3px 8px 2px; border: 2px solid currentColor; border-radius: 0;
  font: 700 0.75rem/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 2px 2px 0 0 color-mix(in srgb, currentColor 35%, transparent); background: var(--surface);
}
.rm-chip--live { color: var(--success); }
.rm-chip--next, .rm-chip--beta { color: var(--secondary); }
.rm-chip--later { color: var(--muted); }
.rm-list { list-style: none; margin: 0 auto; padding: 0; max-width: 32rem; text-align: left; }
.rm-list li { position: relative; margin: 0; padding: 0.3rem 0 0.3rem 1.25rem; line-height: 1.4; border-bottom: 2px dotted var(--border); }
.rm-list li:last-child { border-bottom: 0; }
.rm-list li::before { content: ""; position: absolute; left: 0; top: 0.8rem; width: 8px; height: 8px; background: var(--secondary); }
.rm .btn-row { justify-content: center; margin-top: var(--s-4); }
.rm--end p { text-align: center; }
@media (max-height: 52rem), (max-width: 30rem) {
  .rm-list li { padding-block: 0.2rem; font-size: 0.9375rem; }
  .rm-list li::before { top: 0.65rem; }
  .rm .btn-row { margin-top: var(--s-3); }
}

/* Landing alien: floats beside the character on its saucer; it and its bubble link to the roadmap. */
.alien {
  --ps: 2; position: absolute; left: 0; top: 0; z-index: 1; width: calc(28px * var(--ps)); height: calc(28px * var(--ps));
  color: inherit; text-decoration: none; border-radius: 8px;
}
.alien[hidden] { display: none; }
.alien:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.alien__float { display: block; width: 100%; height: 100%; animation: alien-float 2.4s ease-in-out infinite; }
.alien__sprite { display: block; width: 100%; height: 100%; background: url("pixel/alien-sheet.png") calc(-28px * 11 * var(--ps)) 0 / auto 100% no-repeat; image-rendering: pixelated; }
@keyframes alien-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.alien .say { width: min(15rem, calc(100vw - 2rem)); transform: translateX(calc(-50% + var(--shift, 0px))); pointer-events: auto; cursor: pointer; }
.alien .say::after { left: calc(50% - 8px - var(--shift, 0px)); }
.alien:hover .say { text-decoration: underline; text-underline-offset: 2px; }
main[data-turn="alien"] .pet .say, main[data-turn="pet"] .alien .say { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .alien__float { animation: none; } }
/* ===== end Roadmap ===== */

/* Agent pool: slider split */
.ag-split { margin-block: 1rem; }
.ag-split__bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: var(--raised, var(--border)); border: 1px solid var(--border); margin: .75rem 0; }
.ag-split__bar span { display: block; height: 100%; transition: width .15s; }
.ag-split__pool { background: var(--border-strong); opacity: .5; }
.ag-split__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.ag-split__list input[type=range] { width: 100%; }
.ag-split__dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .5rem; vertical-align: middle; }
.ag-split__foot { margin-top: 1rem; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Long addresses (webhook links) wrap instead of widening cards on phones */
.ag code, .ag .help { overflow-wrap: anywhere; }
.ag-grid > *, .ag-card { min-width: 0; }

/* Chat replies: headings, tables, quotes, links, rules (Markdown from the model) */
.msg__text .msg__h { font-family: var(--font); font-size: 1.2em; font-weight: 700; margin: var(--s-4) 0 0; line-height: 1.35; letter-spacing: 0; }
.msg__text h4.msg__h { font-size: 1.08em; }
.msg__text .msg__h:first-child { margin-top: 0; }
.msg__text a { color: var(--link, var(--accent)); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.msg__text blockquote { margin-inline: 0; margin-bottom: 0; padding: var(--s-1) var(--s-3); border-left: 3px solid var(--border-strong); color: var(--muted); }
.msg__text hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-3) 0; }
.msg__text ul ul, .msg__text ol ol, .msg__text ul ol, .msg__text ol ul { margin-top: var(--s-1); }
.msg__table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); max-width: 100%; }
.msg__table table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.msg__table th, .msg__table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.msg__table th { font-weight: 700; background: var(--raised, var(--surface)); }
.msg__table tr:last-child td { border-bottom: 0; }

/* Memory page: search, add, notes that open to their full text */
.mem-tools { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin: var(--s-3) 0; }
.mem-tools .input { flex: 1 1 200px; min-width: 0; }
.mem-add { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.mem-list .mem { display: block; padding: 0; }
.mem details { width: 100%; }
.mem summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); cursor: pointer; padding: var(--s-2) 0; min-height: 44px; list-style: none; }
.mem summary::-webkit-details-marker { display: none; }
.mem summary::before { content: "\25B8"; color: var(--muted); transition: transform .15s; }
.mem details[open] summary::before { transform: rotate(90deg); }
.mem__title { flex: 1 1 12rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.mem__date { color: var(--muted); font-size: 0.85rem; }
.mem__body { padding: 0 0 var(--s-3) var(--s-4); display: grid; gap: var(--s-2); }
.mem__text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.tag--gold { background: var(--accent-soft); color: var(--text); }

/* Agent World full screen: the world fills the monitor as a calm background */
.agw-full { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 5; background: color-mix(in srgb, var(--surface) 85%, transparent); }
.agw-hero:fullscreen, .agw-hero.is-full { border: 0; border-radius: 0; background: #000; display: flex; flex-direction: column; width: 100vw; height: 100vh; }
.agw-hero.is-full { position: fixed; inset: 0; z-index: 1000; }
.agw-hero:fullscreen [data-world-canvas], .agw-hero.is-full [data-world-canvas] { flex: 1; display: flex; }
.agw-hero:fullscreen .agworld, .agw-hero.is-full .agworld { flex: 1; aspect-ratio: auto; max-height: none; height: 100%; }
.agw-hero:fullscreen .agw-now, .agw-hero.is-full .agw-now { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.agw-hero:fullscreen .agw-full, .agw-hero.is-full .agw-full { opacity: .25; transition: opacity .2s; }
.agw-hero:fullscreen .agw-full:hover, .agw-hero:fullscreen .agw-full:focus-visible, .agw-hero.is-full .agw-full:hover { opacity: 1; }
.ag-soon { list-style: disc; }

/* Drag a picture or file over the chat: the message box lights up */
.cx__composer.is-drop .composer, .composer.is-drop { outline: 2px dashed var(--accent); outline-offset: 4px; }

/* Pictures Particle made: a clear Edit sign on the picture and beside Download */
.ppe-art { position: relative; }
.ppe-badge { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .35); background: rgb(13 15 31 / .72); color: #fff; font: 600 0.875rem/1 var(--font); cursor: pointer; backdrop-filter: blur(4px); transition: background .15s, transform .15s; }
.ppe-badge:hover, .ppe-badge:focus-visible { background: var(--accent); color: var(--accent-text); border-color: var(--accent-edge); }
.ppe-art .ppe-can { cursor: zoom-in; cursor: pointer; }
.tile__edit { margin-left: var(--s-2); color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse) { .ppe-badge { min-height: 44px; padding: 8px 14px; } }

/* Guides hub */
.guides-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); text-align: left; }
.guides-list li { color: var(--muted); }
.guides-list a { color: var(--link); }

.chat-del { max-width: min(28rem, calc(100vw - 32px)); border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--text); padding: 20px; box-shadow: var(--shadow-2); }
.chat-del::backdrop { background: rgb(0 0 0 / .5); }
.chat-del h2 { font-size: 1.15rem; margin: 0 0 8px; overflow-wrap: anywhere; }
.chat-del p { margin: 0 0 10px; color: var(--muted); }
.chat-del .btn-row { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Recent chats: options button (Rename, Delete) on each row */
.dr-chat-row { position: relative; display: flex; align-items: center; }
.dr-chat-row .dr-chat { flex: 1; min-width: 0; }
.dr-chat__more { flex: none; min-width: 36px; min-height: 36px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; opacity: .55; }
.dr-chat-row:hover .dr-chat__more, .dr-chat__more:focus-visible, .dr-chat__more[aria-expanded="true"] { opacity: 1; background: var(--raised, var(--surface)); color: var(--text); }
@media (pointer: coarse) { .dr-chat__more { min-width: 44px; min-height: 44px; opacity: .8; } }
.dr-chat-menu { position: absolute; right: 4px; top: 100%; z-index: 30; display: grid; min-width: 9rem; padding: 4px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-2); }
.dr-chat-menu button { text-align: left; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.dr-chat-menu button:hover, .dr-chat-menu button:focus-visible { background: var(--raised, var(--secondary-soft)); }
.dr-chat-menu__danger { color: #E5736B !important; }
:root[data-theme="light"] .dr-chat-menu__danger { color: #B3261E !important; }
.chat-del[open] { position: fixed; inset: 0; margin: auto; height: fit-content; }
/* Share in the chat top bar: icon plus a word, so it is easy to find (icon only on small phones) */
.topbar__share:not([hidden]) { width: auto; padding: 0 14px 0 10px; gap: 6px; display: inline-flex; align-items: center; border-radius: 999px; }
.topbar__share-label { font: 600 0.9rem/1 var(--font); }
@media (max-width: 380px) { .topbar__share-label { display: none; } .topbar__share:not([hidden]) { padding: 0; width: 44px; justify-content: center; } }

/* Pop-up boxes open in the middle of the screen. The reset above (* { margin: 0 }) removed the browser's centring. */
:where(dialog):modal { margin: auto; max-height: calc(100dvh - 32px); overflow: auto; }
/* Pricing: the plan a signed-in person already has */
.plan-owned { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 0; min-height: 44px; }
.plan-owned__tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-weight: 700; border: 1px solid var(--accent-edge); }
.plan-owned__tag::before { content: "\2713"; color: var(--accent-edge); }
.plan-owned a { color: var(--link); font-weight: 600; }