/* The hero demo: a small Chrome window, the website on the left and the browsertodo side panel
   docked on the right, as in real use. The panel is a faithful small copy of the extension's
   (apps/extension/static/sidepanel.css), with its own tokens. The sites are drawn to read as X,
   Gmail (inbox, thread and reply), a generic sign-up page and "Zoogle", each with its own
   colours (light and dark), and no real logos. */

.demo { margin: 0; position: relative; min-width: 0; }
.demo [hidden] { display: none !important; }

/* ---- Chrome ---- */
.win {
  --strip: color-mix(in srgb, var(--ink) 7%, var(--sheet));
  background: var(--sheet); border: 1px solid var(--line); border-radius: 0.9rem; box-shadow: var(--shadow); overflow: hidden;
}
.win svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.win-tabs { display: flex; align-items: flex-end; gap: 0.25rem; padding: 0.45rem 0.6rem 0; background: var(--strip); min-width: 0; }
.dots { display: inline-flex; gap: 0.35rem; align-self: center; margin: 0 0.45rem 0.3rem 0.1rem; }
.dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.w-tabs { display: flex; align-items: flex-end; gap: 0.15rem; min-width: 0; }
.w-tab {
  display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; max-width: 11.5rem; flex: 0 1 auto;
  padding: 0.38rem 0.75rem 0.45rem 0.6rem; border-radius: 0.55rem 0.55rem 0 0; font-size: 0.74rem; color: var(--ink-soft);
}
.w-tab > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-tab.is-active { background: var(--sheet); color: var(--ink); }
.w-tab.is-new { animation: tab-in 0.22s ease-out; }
@keyframes tab-in { from { max-width: 0; opacity: 0; padding-inline: 0; } }
/* The agent's tab group, as Chrome draws one: a coloured label, and a line under its tabs. */
.w-group { align-self: center; margin: 0 0.1rem 0.25rem 0.35rem; padding: 0.1rem 0.5rem; border-radius: 0.35rem; background: var(--brand); color: var(--on-brand); font-size: 0.66rem; font-weight: 700; white-space: nowrap; }
.w-tab.in-group { box-shadow: inset 0 -2px 0 var(--brand); }
.w-plus { align-self: center; margin: 0 0 0.3rem 0.3rem; color: var(--ink-faint); font-size: 1rem; line-height: 1; }
.fav {
  width: 1rem; height: 1rem; border-radius: 0.25rem; flex: none; display: grid; place-items: center;
  font: 800 0.6rem/1 var(--font); font-style: normal; color: #fff; background: #64748b;
}
.fav-x { background: #0f1419; }
.fav-mail { background: #0b57d0; }
.fav-nw { background: #18181b; }
.fav-zg { background: conic-gradient(#4f46e5 0 25%, #f43f5e 0 50%, #f5a524 0 75%, #10b981 0); }
.fav.is-loading { background: none; border: 2px solid color-mix(in srgb, var(--ink) 15%, transparent); border-top-color: var(--brand); border-radius: 50%; color: transparent; animation: spin 0.6s linear infinite; }
.win-tool { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); }
.w-nav { display: inline-flex; gap: 0.35rem; color: var(--ink-faint); }
.w-nav svg { width: 1rem; height: 1rem; }
.w-omni {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem;
  background: var(--strip); border-radius: 999px; font-size: 0.8rem; color: var(--ink); transition: box-shadow 0.15s;
}
.w-omni svg { width: 0.8rem; height: 0.8rem; color: var(--ink-faint); flex: none; }
.w-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-omni.is-typing { background: var(--sheet); box-shadow: 0 0 0 2px var(--brand); }
.w-omni.is-typing .w-url::after { content: ""; display: inline-block; width: 1px; height: 1em; background: var(--ink); margin-left: 1px; vertical-align: -0.15em; }
.w-ext { flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); }
.w-ext img { width: 1rem; height: 1rem; }

.win-body { display: grid; grid-template-columns: minmax(0, 1fr) 37%; height: 27.5rem; }

/* ---- The website ---- */
.page { position: relative; height: 100%; min-width: 0; overflow: hidden; container-type: inline-size; font-size: 13px; line-height: 1.35; }
.page.is-arriving > * { animation: page-in 0.3s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
.page .i { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.page .av { width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--av); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; text-transform: uppercase; }

/* Jev's pick: a brief amber ring, with how sure it was */
.page .ring { outline: 3px solid var(--spark); outline-offset: 2px; position: relative; z-index: 2; animation: ring-in 0.25s ease-out; }
/* Rows and lists that fill the width: the ring sits inside, so the page edge does not cut it. */
.page li.ring, .page ul.ring { outline-offset: -3px; }
@keyframes ring-in { from { outline-offset: 9px; outline-color: transparent; } }
.page .ring[data-pick]::after {
  content: attr(data-pick); position: absolute; right: -0.3rem; top: -1.6rem;
  background: var(--spark); color: #2a1a00; font: 600 11px/1 var(--mono); padding: 0.3rem 0.45rem; border-radius: 0.35rem; white-space: nowrap;
}
@keyframes arrive { from { background: var(--flash); } }

/* ---- The browsertodo side panel (tokens from apps/extension/static/ui.css) ---- */
.sp {
  --p-bg: #f6f6f8; --p-surface: #ffffff; --p-text: #1d1d24; --p-muted: #6a6a78; --p-faint: #9a9aa6; --p-border: #e0e0e7;
  --p-accent: #4f46e5; --p-accent-soft: #eeedfd; --p-on-accent: #ffffff; --p-ok: #15803d; --p-ok-soft: #e7f5ec;
  --p-jev: #fff1d6; --p-jev-ink: #7a4a00; --p-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--p-bg); color: var(--p-text); border-left: 1px solid var(--p-border);
  font: 12.5px/1.45 system-ui, "Segoe UI", sans-serif;
}
.sp p { margin: 0; }
.sp-top { background: var(--p-surface); border-bottom: 1px solid var(--p-border); }
.sp-status { display: flex; align-items: center; gap: 6px; padding: 7px 8px 3px 11px; font-size: 11.5px; }
.sp-status b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--p-ok); flex: none; }
.sp-av { margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #0f766e; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.sp-tabs { display: flex; padding: 0 5px; white-space: nowrap; overflow: hidden; }
.sp-tabs span { padding: 5px 8px 6px; color: var(--p-muted); font-weight: 500; border-bottom: 2px solid transparent; }
.sp-tabs .on { color: var(--p-text); border-bottom-color: var(--p-accent); }
.sp-live { display: none; width: 5px; height: 5px; border-radius: 50%; background: var(--p-accent); margin-left: 4px; vertical-align: 0.2em; animation: pulse 1.4s ease-in-out infinite; }
.sp-live.is-on { display: inline-block; }
@keyframes pulse { 50% { opacity: 0.3; } }

.sp-chat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sp-log {
  list-style: none; margin: 0; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px;
}
.sp-log::-webkit-scrollbar { display: none; }
/* Earlier messages scrolling up fade out under the tabs instead of being cut off. */
.sp-log { mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.sp-log:not(:empty) + .sp-empty { display: none; }
/* Without JS the finished first command is shown; keep its end in view. */
.demo:not(.is-live) .sp-log { justify-content: flex-end; }
.sp-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 3px; text-align: center; padding: 0 14px; color: var(--p-muted); font-size: 11.5px; }
.sp-empty b { color: var(--p-text); font-size: 12.5px; font-weight: 600; }
.sp-log > li { flex: none; animation: line-in 0.2s ease-out; }
@keyframes line-in { from { opacity: 0; transform: translateY(4px); } }
.sp .ev-user {
  align-self: flex-end; max-width: 88%; background: var(--p-accent-soft); color: var(--p-text);
  padding: 5px 10px; border-radius: 13px 13px 4px 13px; overflow-wrap: anywhere; margin-top: 4px;
}
.sp .ev-user.screen { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--p-muted); border: 1px dashed color-mix(in srgb, var(--p-accent) 40%, var(--p-border)); font-size: 11.5px; }
.sp .ev-user.screen svg { width: 14px; height: 14px; flex: none; color: var(--p-accent); fill: none; stroke: currentColor; stroke-width: 2; }
.sp .md { color: color-mix(in srgb, var(--p-text) 88%, var(--p-bg)); line-height: 1.5; overflow-wrap: break-word; }
.sp .md b { color: var(--p-text); font-weight: 600; }
.sp .md ul { margin: 3px 0 0; padding-left: 1.2em; }
.sp .md li { margin: 2px 0; }
.sp .md li::marker { color: var(--p-faint); }
.sp .md p { margin: 0 0 4px; }
.sp .md .draft { margin: 0; padding: 1px 0 1px 10px; border-left: 2px solid var(--p-border); color: var(--p-muted); white-space: pre-line; background: none; font-size: 12px; line-height: 1.5; }
.sp .md .streaming::after, .sp .md.streaming::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 3px; background: var(--p-accent); opacity: 0.6; animation: pulse 1s ease-in-out infinite; }
/* Tool steps: small and muted, one line each; three or more fold to "N steps" when the turn ends. */
.sp .ev-tool { font: 11px/1.4 var(--p-mono); color: var(--p-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: -3px 0; }
.sp .ev-tool b { color: var(--p-muted); font-weight: 500; }
.sp .ev-jev { margin: -2px 0 -2px 10px; display: flex; gap: 6px; align-items: center; font-size: 10.5px; }
.sp .ev-jev .ms { color: var(--p-faint); font-family: var(--p-mono); }
.sp .ev-fold { font-size: 11.5px; color: var(--p-muted); display: flex; align-items: baseline; gap: 6px; margin: -2px 0; }
.sp .ev-fold::before { content: "›"; color: var(--p-faint); width: 6px; }
.sp .ev-fold b { font-weight: 500; }
.sp .ev-fold code { font: 10.5px var(--p-mono); color: var(--p-faint); }
.sp .ev-clock { display: flex; align-items: center; gap: 6px; font: 11px var(--p-mono); color: var(--p-muted); font-variant-numeric: tabular-nums; }
.sp .ev-outcome { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; font-size: 11.5px; color: var(--p-muted); }
.sp .chip { display: inline-block; font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 10px; white-space: nowrap; font-weight: 500; }
.sp .chip.ok { background: var(--p-ok-soft); color: var(--p-ok); font-weight: 600; }
.sp .chip.jev { background: var(--p-jev); color: var(--p-jev-ink); font: 500 10.5px/18px var(--p-mono); }
.sp .spin { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--p-border); border-top-color: var(--p-accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* The composer, pinned to the bottom: the message on top, the controls below. */
.sp-composer { position: relative; flex: none; padding: 4px 8px 8px; }
.sp-composer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--p-bg)); }
.sp-now {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 6px 6px 10px;
  background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 11px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.05); transition: border-color 0.2s;
}
.sp-now[data-state="typing"], .sp-now[data-state="waiting"] { border-color: color-mix(in srgb, var(--p-accent) 55%, var(--p-border)); }
.sp-input { min-height: 38px; padding: 2px 2px 2px 0; font-size: 12.5px; line-height: 19px; overflow-wrap: anywhere; }
.sp-input .is-placeholder { color: var(--p-faint); }
.sp-now[data-state="typing"] .sp-input [data-slot="input"]::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; background: var(--p-accent); margin-left: 1px; vertical-align: -0.15em; }
.sp-bar { display: flex; align-items: center; gap: 4px; margin-left: -3px; }
.sp-bar svg { fill: none; stroke: currentColor; stroke-width: 2; }
.sp-model { min-width: 0; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; color: var(--p-muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.sp-model svg { width: 12px; height: 12px; flex: none; opacity: 0.8; }
.sp-mic { margin-left: auto; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--p-muted); }
.sp-mic svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.sp-mic.is-on { background: var(--p-accent); color: var(--p-on-accent); animation: listen 1s ease-in-out infinite; }
@keyframes listen { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--p-accent) 25%, transparent); } }
.sp-send {
  flex: none; min-width: 3.9rem; height: 30px; padding: 0 12px; border: 0; border-radius: 8px;
  background: var(--p-accent); color: var(--p-on-accent); font: 600 12.5px system-ui, "Segoe UI", sans-serif; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sp-send:hover:not(:disabled) { background: color-mix(in srgb, var(--p-accent) 85%, #000); }
.sp-send:focus-visible { outline: 3px solid var(--spark); outline-offset: 2px; }
.sp-send:disabled { opacity: 0.45; cursor: default; }

/* ---- Under the window: a small note ---- */
.demo-foot { margin: 0.55rem 0.2rem 0; }
.demo-note { font-size: 0.75rem; color: var(--ink-faint); padding-top: 0.15rem; }

/* ---- The cue: a note drawn over the window, pointing at Send ----
   .cue-text holds the final place and tilt and never animates, so script.js can measure it at
   any moment; the spring-in runs on .cue-pop inside it.
   Bright yellow display type with a thick navy outline and an indigo offset, and a drawn arrow
   that comes down Send's own column and lands on its top edge, clear of the composer's text.
   It's an annotation, not part of the site: it never takes a click, and it goes when Send is pressed. */
.win-body { position: relative; }
.cue {
  --cue-fill: #ffd21f; --cue-ink: #0d0f2b; --cue-drop: #4f46e5;
  /* One timeline: the text springs in, then the arrow draws, then its head shows. */
  --cue-enter: 0.45s; --cue-draw: 0.5s;
  position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cue-text {
  position: absolute; left: 31.5%; top: 58%; margin: 0;
  --cue-t: translate(-50%, -50%); --cue-rot: -6deg; transform: var(--cue-t) rotate(var(--cue-rot)); white-space: nowrap; text-align: center;
}
.cue-pop { display: grid; justify-items: center; gap: 0.35rem; animation: cue-in var(--cue-enter) cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.cue-word {
  font: 900 clamp(2.1rem, 3.3vw, 2.9rem)/0.9 var(--font); font-stretch: 112%; font-variation-settings: "wdth" 112;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--cue-fill); -webkit-text-stroke: 7px var(--cue-ink); paint-order: stroke fill;
  text-shadow: 0.08em 0.08em 0 var(--cue-drop);
}
.cue-text small {
  font: 800 0.95rem/1 var(--font); color: var(--cue-ink); background: var(--cue-fill); border: 2.5px solid var(--cue-ink); box-shadow: 3px 3px 0 var(--cue-drop);
  border-radius: 999px; padding: 0.3rem 0.7rem; transform: rotate(3deg);
}
.cue-arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cue-arrow path { fill: none; stroke: var(--cue-fill); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
/* The arrow is drawn like the text: yellow over a navy outline, so it reads on light and dark. */
.cue-arrow .halo { stroke: var(--cue-ink); stroke-width: 9.5; }
.cue-line, .cue-line-halo { stroke-dasharray: 1; animation: cue-draw var(--cue-draw) var(--cue-enter) ease-out both; }
.cue-head, .cue-head-halo { animation: cue-head 0.15s calc(var(--cue-enter) + var(--cue-draw)) ease-out both; }
@keyframes cue-in { from { opacity: 0; transform: rotate(-8deg) scale(0.6); } }
@keyframes cue-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cue-head { from { opacity: 0; } }
/* While the cue shows, the site dims a little so the note reads as a note. */
.win.is-cued .page::after { content: ""; position: absolute; inset: 0; z-index: 4; background: color-mix(in srgb, var(--sheet) 45%, transparent); }
.win.is-cued .sp-send { animation: glow 1.4s ease-out infinite; }
/* The column above Send stays clear of the typed command, so the arrow can come straight down onto Send. */
.demo.is-live .sp-input { padding-right: 4.3rem; }
@keyframes glow {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spark) 90%, transparent), 0 0 0 0 color-mix(in srgb, var(--p-accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--spark) 0%, transparent), 0 0 0 16px color-mix(in srgb, var(--p-accent) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .demo *, .demo *::before, .demo *::after { animation: none !important; transition: none !important; }
}
@media (prefers-color-scheme: dark) {
  .sp {
    --p-bg: #141418; --p-surface: #1c1c22; --p-text: #e9e9ef; --p-muted: #a3a3b1; --p-faint: #6f6f7d; --p-border: #2e2e37;
    --p-accent: #8b8cf6; --p-accent-soft: #26264a; --p-on-accent: #111118; --p-ok: #4ade80; --p-ok-soft: #173323;
    --p-jev: #3a2c12; --p-jev-ink: #ffcf73;
  }
  .sp-now { box-shadow: 0 4px 16px rgb(0 0 0 / 0.35); }
  .fav-x { background: #e7e9ea; color: #000; }
  .fav-nw { background: #f4f4f5; color: #18181b; }
}

/* ============================== X ============================== */
.site-x {
  --x-bg: #ffffff; --x-ink: #0f1419; --x-soft: #536471; --x-line: #eff3f4; --x-blue: #1d9bf0; --x-fill: #eff3f4; --flash: #e8f5fd;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); height: 100%; background: var(--x-bg); color: var(--x-ink);
}
.x-rail { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; padding-top: 1rem; }
.x-rail .i { width: 1.75em; height: 1.75em; }
.x-rail .on .i { stroke-width: 2.6; }
.x-fab { width: 2.9em; height: 2.9em; border-radius: 50%; background: var(--x-blue); color: #fff; display: grid; place-items: center; margin-top: 0.2rem; }
.x-fab .i { width: 1.35em !important; height: 1.35em !important; }
.x-main { border-left: 1px solid var(--x-line); border-right: 1px solid var(--x-line); min-width: 0; }
.x-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--x-line); }
.x-tabs span { text-align: center; padding: 1.05em 0 0.95em; font-size: 14.5px; font-weight: 500; color: var(--x-soft); position: relative; }
.x-tabs .on { color: var(--x-ink); font-weight: 700; }
.x-tabs .on::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 3.6em; height: 4px; border-radius: 2px; background: var(--x-blue); transform: translateX(-50%); }
.x-compose { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75em; padding: 0.9em 1.1em 0.7em; border-bottom: 1px solid var(--x-line); }
.x-box { border-radius: 0.5em; }
.x-text { font-size: 16px; line-height: 1.35; min-height: 2.9em; padding: 0.45em 0 0.3em; }
.x-text.is-empty { font-size: 19px; color: var(--x-soft); }
.x-tools { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--x-line); padding-top: 0.6em; }
.x-icons { display: flex; gap: 0.9em; color: var(--x-blue); }
.x-post { background: var(--x-blue); color: #fff; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 0.55em 1.2em; }
.x-text.is-empty + .x-tools .x-post { opacity: 0.5; }
.x-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75em; padding: 0.8em 1.1em; border-bottom: 1px solid var(--x-line); }
.x-item.is-new { animation: arrive 1.6s ease-out; }
.x-body p { margin: 0; }
.x-meta { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-meta span { color: var(--x-soft); }
.x-said { font-size: 14.5px; margin-top: 0.15em !important; }
.x-acts { display: flex; justify-content: space-between; max-width: 26em; margin-top: 0.55em !important; color: var(--x-soft); font-size: 12.5px; }
.x-acts span { display: inline-flex; align-items: center; gap: 0.35em; min-width: 3.5em; }
.x-side { display: none; padding: 0.7em 1.1em; }
.x-search { display: flex; align-items: center; gap: 0.6em; background: var(--x-fill); color: var(--x-soft); border-radius: 999px; padding: 0.7em 1em; }
.x-card { border: 1px solid var(--x-line); border-radius: 1em; padding: 0.8em 1em; margin-top: 1em; }
.x-card b { font-size: 17px; font-weight: 800; }
.x-card p { margin: 0.7em 0 0; font-weight: 700; }
.x-card small { display: block; color: var(--x-soft); font-weight: 400; font-size: 12px; }
@container (min-width: 780px) {
  .site-x { grid-template-columns: 4.2rem minmax(0, 1fr) 15rem; }
  .x-side { display: block; }
}
@container (max-width: 420px) {
  .site-x { grid-template-columns: minmax(0, 1fr); }
  .x-rail { display: none; }
  .x-main { border: 0; }
  .x-icons .i:nth-child(n + 4) { display: none; }
}

/* ============================== Gmail-style ============================== */
.site-gm {
  --g-bg: #f6f8fc; --g-panel: #ffffff; --g-ink: #1f1f1f; --g-soft: #5f6368; --g-line: #eceff1; --g-edge: #747775; --g-blue: #0b57d0;
  --g-compose: #c2e7ff; --g-sel: #d3e3fd; --g-search: #e9eef6; --g-read: #f2f6fc; --flash: #fff4d6;
  font-family: Roboto, Arial, "Segoe UI", sans-serif;
  height: 100%; background: var(--g-bg); color: var(--g-ink); display: flex; flex-direction: column;
}
.gm-top { display: flex; align-items: center; gap: 1em; padding: 0.55em 1em; }
.gm-top > .i { width: 1.6em; height: 1.6em; color: var(--g-soft); }
.gm-search { flex: 1; max-width: 34em; display: flex; align-items: center; gap: 0.8em; background: var(--g-search); border-radius: 2em; padding: 0.75em 1.1em; color: var(--g-soft); font-size: 14px; margin-left: 5.2em; }
.gm-top .av { margin-left: auto; width: 2.2em; height: 2.2em; }
.gm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 10em minmax(0, 1fr); }
.gm-rail { padding: 0.2em 0 0 0.6em; }
.gm-compose { display: inline-flex; align-items: center; gap: 0.8em; background: var(--g-compose); color: #001d35; border-radius: 1.2em; padding: 0.95em 1.2em 0.95em 1em; font-weight: 500; font-size: 14px; margin-bottom: 0.8em; }
.gm-rail ul { list-style: none; margin: 0; padding: 0; }
.gm-rail li { display: flex; align-items: center; gap: 1em; height: 2.35em; padding: 0 0.8em 0 1.2em; border-radius: 0 1.2em 1.2em 0; font-size: 13.5px; color: var(--g-ink); }
.gm-rail li b { margin-left: auto; font-size: 12px; }
.gm-rail li.on { background: var(--g-sel); font-weight: 700; }
.gm-main { background: var(--g-panel); border-radius: 1.1em 1.1em 0 0; margin-right: 1em; min-width: 0; overflow: hidden; }
.gm-tools { display: flex; align-items: center; gap: 1.4em; padding: 0.8em 1.2em 0.6em; color: var(--g-soft); }
.gm-range { margin-left: auto; font-size: 12px; }
.gm-cats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--g-line); }
.gm-cats span { display: flex; align-items: center; gap: 0.9em; padding: 0.95em 1.2em; font-size: 13.5px; color: var(--g-soft); font-weight: 500; }
.gm-cats .on { color: var(--g-blue); box-shadow: inset 0 -3px 0 var(--g-blue); }
.gm-list { list-style: none; margin: 0; padding: 0; }
.gm-list li {
  display: grid; grid-template-columns: auto auto 7.8em minmax(0, 1fr) 4.6em; align-items: center; gap: 0.6em;
  height: 2.75em; padding: 0 1.1em; border-bottom: 1px solid var(--g-line); font-size: 13.5px; background: var(--g-panel);
}
.gm-list li > .i { color: #9aa0a6; width: 1.3em; height: 1.3em; }
.gm-from { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--g-soft); }
.gm-sub b { color: var(--g-ink); }
.gm-list time { text-align: right; font-weight: 700; font-size: 12px; }
.gm-list li.is-read { background: var(--g-read); }
.gm-list li.is-read .gm-from, .gm-list li.is-read .gm-sub b, .gm-list li.is-read time { font-weight: 400; }
.gm-subj { font-size: 20px; font-weight: 400; margin: 0.3em 1.4em 0.9em 3.6em; }
.gm-chip { font-size: 11px; background: #ddd; color: #444; border-radius: 0.3em; padding: 0.1em 0.45em; vertical-align: 0.2em; }
.gm-msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9em; padding: 0 1.4em; font-size: 14px; }
.gm-msg p { margin: 0 0 0.7em; }
.gm-who time { float: right; color: var(--g-soft); font-size: 12px; }
.gm-who span, .gm-to { color: var(--g-soft); font-size: 12px; }
.gm-to { margin-top: -0.5em !important; }
@container (max-width: 560px) {
  .gm-body { grid-template-columns: minmax(0, 1fr); }
  .gm-rail { display: none; }
  .gm-main { margin: 0 0.6em; }
  .gm-search { margin-left: 0; }
  .gm-cats span:nth-child(3) { display: none; }
  .gm-cats { grid-template-columns: 1fr 1fr; }
  .gm-list li { grid-template-columns: auto 7.2em minmax(0, 1fr) 4.2em; padding: 0 0.8em; }
  .gm-list li > .i.cb { display: none; }
  .gm-subj { margin-left: 1.2em; }
}

/* ============================== A generic sign-up page ============================== */
.site-nw {
  --n-bg: #f4f4f6; --n-card: #ffffff; --n-ink: #18181b; --n-soft: #63636b; --n-teal: #0f766e; --n-teal-soft: #dff3f0; --n-ok: #15803d; --n-ok-soft: #dcfce7;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  height: 100%; background: var(--n-bg); color: var(--n-ink); display: flex; flex-direction: column;
}
.nw-top { display: flex; align-items: center; gap: 0.6em; padding: 0.9em 1.3em; font-weight: 700; font-size: 15px; }
.nw-mark { width: 1.7em; height: 1.7em; border-radius: 0.45em; background: var(--n-ink); color: var(--n-bg); display: grid; place-items: center; font-size: 13px; }
.nw-help { margin-left: auto; font-weight: 400; color: var(--n-soft); font-size: 13px; }
.nw-card { margin: 1.2em auto 0; width: min(24em, 88%); background: var(--n-card); border-radius: 1em; padding: 1.8em 1.6em; text-align: center; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 30px -18px rgb(0 0 0 / 0.3); }
.nw-card h4 { margin: 0.7em 0 0.35em; font-size: 20px; }
.nw-card p { margin: 0; color: var(--n-soft); font-size: 14px; line-height: 1.45; }
.nw-card p b { color: var(--n-ink); }
.nw-badge { width: 3.4em; height: 3.4em; border-radius: 50%; display: inline-grid; place-items: center; background: var(--n-teal-soft); color: var(--n-teal); font-size: 15px; font-weight: 800; }
.nw-badge .i { width: 1.6em; height: 1.6em; }
.nw-badge.ok { background: var(--n-ok-soft); color: var(--n-ok); font-size: 22px; animation: arrive 1s ease-out; }
.nw-link { display: inline-block; margin-top: 1em; color: var(--n-teal); font-weight: 600; font-size: 14px; }
@container (max-width: 480px) {
  .nw-card { margin-top: 0.4em; padding: 1.2em 1.1em; }
  .nw-card h4 { font-size: 18px; margin-top: 0.5em; }
  .nw-top { padding: 0.7em 1em; }
}
/* Taller than a phone's cropped page: grow, so scrolling never shows past its background. */
.site-nw { height: auto; min-height: 100%; padding-bottom: 1.2em; }
.nw-btn { display: inline-block; margin-top: 1.1em; background: var(--n-ink); color: var(--n-card); border-radius: 0.6em; padding: 0.7em 1.2em; font-weight: 600; font-size: 14px; }

/* ---- Each site's own dark theme ---- */
@media (prefers-color-scheme: dark) {
  .site-x { --x-bg: #000000; --x-ink: #e7e9ea; --x-soft: #71767b; --x-line: #2f3336; --x-fill: #202327; --flash: #0a2638; }
  .site-gm { --g-bg: #1b1b1b; --g-panel: #262626; --g-ink: #e3e3e3; --g-soft: #a8abb0; --g-line: #333; --g-edge: #8e918f; --g-blue: #a8c7fa; --g-compose: #004a77; --g-sel: #004a77; --g-search: #303134; --g-read: #202020; --flash: #3a3320; }
  .site-gm .gm-compose { color: #c2e7ff; }
  .site-gm .gm-chip { background: #444; color: #ddd; }
  .site-gm .gm-toast { background: #e3e3e3; color: #1f1f1f; }
  .site-gm .gm-toast span { color: #0b57d0; }
  .site-nw { --n-bg: #16171b; --n-card: #222329; --n-ink: #f4f4f5; --n-soft: #a1a1aa; --n-teal: #5eead4; --n-teal-soft: #11302d; --n-ok: #4ade80; --n-ok-soft: #12301f; }
}
/* The thread's Reply and Forward buttons, the reply box, and the "Message sent" toast */
.site-gm { position: relative; height: auto; min-height: 100%; }
.gm-acts { display: flex; gap: 0.7em; margin: 0.2em 0 0 4.5em; }
.gm-acts span { display: inline-flex; align-items: center; gap: 0.5em; border: 1px solid var(--g-edge); border-radius: 999px; padding: 0.55em 1.2em 0.55em 1em; font-weight: 500; color: var(--g-ink); }
.gm-reply { margin: 0.1em 1em 1em 4.5em; border-radius: 0.8em; background: var(--g-panel); box-shadow: 0 1px 3px rgb(0 0 0 / 0.2), 0 4px 10px -4px rgb(0 0 0 / 0.2); padding: 0.7em 0.9em 0.6em; }
.gm-rto { display: flex; align-items: center; gap: 0.3em; margin: 0 0 0.4em; color: var(--g-soft); }
.gm-rto .i:nth-child(2) { width: 0.9em; height: 0.9em; }
.gm-rcpt { margin-left: 0.4em; background: var(--g-search); color: var(--g-ink); border-radius: 999px; padding: 0.15em 0.65em; font-size: 12.5px; }
.gm-rtext { min-height: 6.2em; white-space: pre-line; font-size: 13.5px; line-height: 1.45; border-radius: 0.3em; padding: 0.25em 0.4em; margin: 0 -0.4em; }
.gm-rbar { display: flex; align-items: center; gap: 0.85em; margin: 0.5em 0 0; color: var(--g-soft); }
.gm-send { display: inline-flex; align-items: center; background: var(--g-blue); color: var(--g-panel); border-radius: 999px; font-weight: 600; margin-right: 0.3em; }
.gm-send > span { padding: 0.5em 0.6em 0.5em 1.1em; border-right: 1px solid color-mix(in srgb, var(--g-panel) 35%, transparent); }
.gm-send .i { width: 1em; height: 1em; margin: 0 0.45em 0 0.3em; }
.gm-rbin { margin-left: auto; }
.gm-msg.is-mine { border-top: 1px solid var(--g-line); padding-top: 0.9em; animation: arrive 1.2s ease-out; }
.gm-body-text { white-space: pre-line; }
.site-gm:has(.gm-toast) { padding-bottom: 4.5em; }
.gm-toast { position: absolute; left: 1em; bottom: 1em; z-index: 3; margin: 0; display: flex; align-items: center; gap: 1.3em; background: #303030; color: #f1f1f1; border-radius: 0.3em; padding: 0.85em 1.1em; font-size: 13px; box-shadow: 0 3px 8px rgb(0 0 0 / 0.3); animation: toast-in 0.25s ease-out; }
.gm-toast span { color: #a8c7fa; font-weight: 600; }
@keyframes toast-in { from { transform: translateY(1em); opacity: 0; } }
@container (max-width: 560px) {
  .gm-acts, .gm-reply { margin-left: 1.2em; }
  .gm-rbar .i:nth-child(n + 4) { display: none; }
  .gm-toast span + span { display: none; }
}
.gm-cta { display: inline-block; background: var(--g-blue); color: var(--g-panel); font-weight: 600; border-radius: 999px; padding: 0.55em 1.2em; }

/* ============================== Zoogle: a made-up search start page ============================== */
.site-zg {
  --z-bg: #ffffff; --z-ink: #1f1f1f; --z-soft: #5f6368; --z-line: #dfe1e5; --z-btn: #f8f9fa;
  font-family: Arial, "Segoe UI", sans-serif;
  height: 100%; background: var(--z-bg); color: var(--z-ink); display: flex; flex-direction: column;
}
.zg-top { display: flex; align-items: center; justify-content: flex-end; gap: 1.1em; padding: 0.8em 1em; font-size: 12.5px; }
.zg-top .av { width: 2.2em; height: 2.2em; font-size: 12px; }
.zg-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3em; padding: 0 1.2em 3.5em; }
.zg-word { margin: 0; font: 900 clamp(40px, 13cqi, 64px)/1 var(--font); font-stretch: 118%; font-variation-settings: "wdth" 118; letter-spacing: -0.05em; }
.zg-word span { display: inline-block; }
.zg-word .z0 { color: #4f46e5; }
.zg-word .z1 { color: #f43f5e; transform: translateY(-0.04em) rotate(-8deg); }
.zg-word .z2 { color: #f5a524; transform: translateY(0.03em) rotate(7deg); }
.zg-word .z3 { color: #4f46e5; }
.zg-word .z4 { color: #10b981; }
.zg-word .z5 { color: #f43f5e; }
.zg-box { width: min(100%, 30em); display: flex; align-items: center; gap: 0.7em; border: 1px solid var(--z-line); border-radius: 999px; padding: 0.8em 1.1em; color: var(--z-soft); box-shadow: 0 1px 6px rgb(32 33 36 / 0.12); font-size: 13.5px; }
.zg-box span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zg-btns { display: flex; gap: 0.7em; margin: 0; font-size: 12.5px; }
.zg-btns span { background: var(--z-btn); border: 1px solid var(--z-btn); border-radius: 0.35em; padding: 0.6em 1em; color: var(--z-ink); white-space: nowrap; }
.zg-foot { display: flex; gap: 1.4em; padding: 0.8em 1.2em; background: var(--z-btn); color: var(--z-soft); font-size: 12px; border-top: 1px solid var(--z-line); }
@container (max-width: 360px) { .zg-btns span + span { display: none; } }

@media (prefers-color-scheme: dark) {
  .site-zg { --z-bg: #1f1f1f; --z-ink: #e8eaed; --z-soft: #9aa0a6; --z-line: #5f6368; --z-btn: #303134; }
  .site-zg .zg-box { background: #303134; border-color: #303134; box-shadow: none; }
  .zg-word .z0, .zg-word .z3 { color: #8b8cf6; }
}

/* ---- Sizes ---- */
@media (max-width: 1080px) {
  .demo { max-width: 48rem; }
}
/* Phones: the page on top, the panel under it, as a narrow window would show them. */
@media (max-width: 640px) {
  .win-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 15.5rem 21rem; height: auto; }
  .page { font-size: 12px; }
  .sp { border-left: 0; border-top: 1px solid var(--p-border); font-size: 13px; }
  .sp-send { height: 44px; min-width: 5rem; font-size: 14px; border-radius: 10px; }
  .sp-mic { width: 44px; height: 44px; }
  .w-nav, .dots, .w-plus { display: none; }
  .w-tab { max-width: 9rem; }
  /* Narrow Chrome: only the current tab keeps its title. */
  .w-tab:not(.is-active) { padding-inline: 0.45rem; }
  .w-tab:not(.is-active) > span { display: none; }
  /* The cue sits over the chat, above the composer, on phones. */
  .cue-text { left: 50%; top: auto; bottom: 9rem; --cue-t: translate(-50%, 0); }
  .cue-word { font-size: 2.3rem; }
  .demo.is-live .sp-input { padding-right: 5.6rem; }
  .win.is-cued .page::after { content: none; }
  .win.is-cued .sp-chat::after { content: ""; position: absolute; inset: 0; z-index: 4; background: color-mix(in srgb, var(--p-bg) 55%, transparent); }
  .w-group { font-size: 0; padding: 0; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
}