/* Dispatch site: the pieces the homepage and the desktop prototype share. Tokens for day and night, the Tahoe window,
   and the three demos (Mac app, browser with the extension, Grokbot) plus the Kindle they all send to. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* Night. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #0a84ff;
  --label: rgba(255, 255, 255, 0.9);
  --secondary: rgba(255, 255, 255, 0.55);
  --tertiary: rgba(255, 255, 255, 0.32);
  --sep: rgba(255, 255, 255, 0.09);
  --win: rgba(28, 28, 30, 0.82);
  --win-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 36px 90px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.28);
  --side: rgba(255, 255, 255, 0.07);
  --side-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --pane: rgba(255, 255, 255, 0.035);
  --hover: rgba(255, 255, 255, 0.06);
  --on: rgba(255, 255, 255, 0.14);
  --control: rgba(255, 255, 255, 0.1);
  --control-edge: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --field: rgba(255, 255, 255, 0.06);
  --card: rgba(255, 255, 255, 0.07);
  --card-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  --web: #17171a;
  --web-bar: #26262a;
  --web-tab: #36363b;

  --ink: #fff;
  --ink-2: rgba(255, 255, 255, 0.9);
  --ink-3: rgba(255, 255, 255, 0.6);
  --glass: rgba(20, 20, 24, 0.42);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --solid: #fff;
  --solid-ink: #000;

  --bg: #000;
}

/* Day. */
:root[data-theme="light"] {
  color-scheme: light;
  --accent: #007aff;
  --label: rgba(0, 0, 0, 0.88);
  --secondary: rgba(0, 0, 0, 0.5);
  --tertiary: rgba(0, 0, 0, 0.28);
  --sep: rgba(0, 0, 0, 0.09);
  --win: rgba(243, 243, 246, 0.86);
  --win-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), inset 0 0 0 0.5px rgba(255, 255, 255, 0.8), 0 36px 90px rgba(40, 50, 90, 0.26), 0 8px 24px rgba(40, 50, 90, 0.12);
  --side: rgba(255, 255, 255, 0.66);
  --side-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 4px rgba(0, 0, 0, 0.08);
  --pane: rgba(255, 255, 255, 0.72);
  --hover: rgba(0, 0, 0, 0.04);
  --on: rgba(0, 0, 0, 0.08);
  --control: rgba(0, 0, 0, 0.06);
  --control-edge: inset 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  --field: rgba(0, 0, 0, 0.045);
  --card: #fff;
  --card-edge: inset 0 0 0 1px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05);
  --web: #fbfaf7;
  --web-bar: #f1f1f4;
  --web-tab: #fff;

  --ink: #1d1d1f;
  --ink-2: rgba(0, 0, 0, 0.74);
  --ink-3: rgba(0, 0, 0, 0.5);
  --glass: rgba(255, 255, 255, 0.5);
  --glass-edge: rgba(0, 0, 0, 0.1);
  --solid: #1d1d1f;
  --solid-ink: #fff;

  --bg: #fff;
}

/* The page is black at night and white by day. No wallpaper, no gradients. */
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

/* Day and night swap with a circle that opens from the toggle. */
html.theme-vt::view-transition-old(root) { animation: none; }
html.theme-vt::view-transition-new(root) { animation: vt-reveal 0.9s cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes vt-reveal { from { clip-path: circle(0 at var(--vt-x) var(--vt-y)); } to { clip-path: circle(150vmax at var(--vt-x) var(--vt-y)); } }

/* ---- App icons, drawn in CSS so they scale with font-size ---- */
.app-icon { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 1em; height: 1em; font-size: 28px; border-radius: 23%; overflow: hidden; }
.app-icon svg { width: 100%; height: 100%; }
.app-icon.dispatch { color: #fff; background: #000; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3); }

/* A name in a sentence with its app icon straight after it. The two never split across lines. */
.with-icon { white-space: nowrap; }
.with-icon > img, .cycle { width: 1.5em; height: 1.5em; margin: -0.5em 0 -0.5em 0.1em; vertical-align: 0.08em; -webkit-user-drag: none; }
/* One slot, several browsers: each takes its turn, rising in and out. */
.cycle { position: relative; display: inline-block; }
.cycle img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: cycle 8s infinite; -webkit-user-drag: none; }
.cycle img:nth-child(2) { animation-delay: 2s; }
.cycle img:nth-child(3) { animation-delay: 4s; }
.cycle img:nth-child(4) { animation-delay: 6s; }
/* Firefox's logo has no tile of its own, so it gets one to sit level with the app icons. */
.cycle img.bare { inset: 10%; width: 80%; height: 80%; padding: 9%; box-sizing: border-box; border-radius: 24%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
@keyframes cycle { 0% { opacity: 0; transform: translateY(35%) scale(0.8); } 4%, 25% { opacity: 1; transform: none; } 29%, 100% { opacity: 0; transform: translateY(-35%) scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .cycle img { animation: none; } .cycle img:first-child { opacity: 1; } }

/* ---- Tahoe window ---- */
.tw { position: relative; display: grid; min-width: 0; border-radius: 26px; overflow: hidden; color: var(--label); font-size: 13px; line-height: 1.3; letter-spacing: -0.003em; text-align: left;
  background: var(--win); -webkit-backdrop-filter: blur(50px) saturate(180%); backdrop-filter: blur(50px) saturate(180%); box-shadow: var(--win-shadow); cursor: default; user-select: none; -webkit-user-select: none; }
.tw button { border: 0; background: none; padding: 0; cursor: default; }
.tw :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.ic { flex-shrink: 0; }

.lights { display: flex; gap: 8px; padding: 0 4px; }
.light { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 999px; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.22); }
.light.close { background: #ff5f57; }
.light.min { background: #febc2e; }
.light.zoom { background: #28c840; }
.light svg { width: 9px; height: 9px; opacity: 0; fill: none; stroke: rgba(0, 0, 0, 0.6); stroke-width: 1.4; stroke-linecap: round; }
.lights:hover .light svg { opacity: 1; }
.light:active { filter: brightness(0.8); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px !important; border-radius: 999px; background: var(--control) !important; box-shadow: var(--control-edge); font-size: 13px; font-weight: 500; white-space: nowrap; }
.btn:active { filter: brightness(0.9); }
.btn.prominent { background: var(--accent) !important; color: #fff; box-shadow: none; }
.btn:disabled { opacity: 0.5; }
.capsule { display: grid; place-items: center; width: 36px; height: 30px; border-radius: 999px; background: var(--control) !important; box-shadow: var(--control-edge); }
.capsule:active { filter: brightness(0.9); }
.spinner { width: 13px; height: 13px; flex-shrink: 0; border-radius: 999px; border: 2px solid var(--tertiary); border-top-color: var(--label); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.shimmer { background: linear-gradient(90deg, var(--field) 20%, var(--on) 50%, var(--field) 80%); background-size: 200% 100%; animation: shimmer 1s linear infinite; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* Drawings: a real Dispatch drawing used as a mask, so its line is the colour of the text around it. */
.art { display: block; width: 100%; height: 100%; min-height: 0; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }

/* ---- Dispatch for Mac ---- */
.app { grid-template-columns: 206px minmax(0, 1fr); }
.app-side { display: flex; flex-direction: column; min-height: 0; margin: 8px; padding: 14px 8px 6px; border-radius: 18px; background: var(--side); box-shadow: var(--side-edge); }
.app-side .lights { padding: 0 6px 14px; }
.side-search { display: flex; align-items: center; gap: 6px; margin: 0 2px 6px; padding: 5px 8px; border-radius: 8px; color: var(--secondary); background: var(--field); }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.side-scroll::-webkit-scrollbar { display: none; }
.side-section { margin: 10px 8px 3px; font-size: 11px; font-weight: 600; color: var(--tertiary); }
.side-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px !important; border-radius: 9px; text-align: left; }
.side-row:hover { background: var(--hover); }
.side-row[aria-current="true"] { background: var(--on); }
.side-row .ic { color: var(--accent); }
.side-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-row em { font-style: normal; font-size: 12px; color: var(--tertiary); font-variant-numeric: tabular-nums; }
.side-foot { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 2px; color: var(--secondary); }
.side-foot button { display: flex; align-items: center; gap: 6px; padding: 4px 6px !important; border-radius: 7px; white-space: nowrap; }
.side-foot button:hover { background: var(--hover); color: var(--label); }

.app-main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.app-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px 8px; }
.app-title { display: grid; line-height: 1.2; margin-right: auto; min-width: 0; }
.app-title strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-title small { font-size: 11px; color: var(--secondary); }
.app-status { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: 12px; color: var(--secondary); background: var(--control); animation: pop 0.25s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: scale(0.94); } }
.app-body { display: grid; grid-template-columns: minmax(230px, 38%) minmax(0, 1fr); min-height: 0; }
.list { min-height: 0; padding: 0 6px 8px 2px; overflow-y: auto; scrollbar-width: none; }
.list::-webkit-scrollbar { display: none; }
.row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; }
.row:hover { background: var(--hover); }
.row.on { background: var(--accent); color: #fff; }
.row.glow { animation: row-glow 2.2s ease-out; }
@keyframes row-glow { 0% { background: color-mix(in srgb, var(--accent) 60%, transparent); transform: scale(0.96); } 25% { transform: none; } }
.thumb { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; padding: 4px; box-sizing: border-box; border-radius: 7px; background: var(--field); color: var(--label); }
.row.on .thumb { background: rgba(255, 255, 255, 0.2); color: #fff; }
.row-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.row-text strong { font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-text small { font-size: 12px; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.on .row-text small { color: rgba(255, 255, 255, 0.8); }
.row-end { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; color: var(--tertiary); }
.row.on .row-end { color: rgba(255, 255, 255, 0.85); }
.row-send { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; color: var(--accent); opacity: 0; }
.row:hover .row-send, .row.on .row-send, .app.compact .row-send { opacity: 1; }
.row-send:hover { background: var(--control) !important; }
.row.on .row-send { color: #fff; }
.row-n { font-size: 12px; font-variant-numeric: tabular-nums; }
.list-empty { margin: 40px 16px; text-align: center; color: var(--tertiary); }

.detail { min-height: 0; padding: 4px 16px 16px; overflow-y: auto; scrollbar-width: none; border-top-left-radius: 16px; background: var(--pane); box-shadow: inset 1px 0 0 var(--sep), inset 0 1px 0 var(--sep); }
.detail::-webkit-scrollbar { display: none; }
.detail-art { display: grid; place-items: center; height: clamp(96px, 26cqh, 190px); margin: 12px 0 14px; padding: 10px; box-sizing: border-box; border-radius: 10px; background: var(--field); }
.detail h3 { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; user-select: text; -webkit-user-select: text; }
.detail-by { margin: 6px 0 0; color: var(--secondary); }
.detail-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.detail-note { margin: 10px 0 0; font-size: 12px; color: var(--secondary); }
.group-label { margin: 18px 4px 6px; font-size: 12px; font-weight: 600; color: var(--secondary); }
.form { border-radius: 12px; background: var(--card); box-shadow: var(--card-edge); }
.form div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding: 9px 12px; }
.form div + div { box-shadow: inset 0 1px 0 var(--sep); }
.form dt { color: var(--secondary); }
.form dd { margin: 0; }
.app-main { container-type: size; }

/* A collection: its cover, its three drawings, and Send. */
.cover { position: relative; display: block; aspect-ratio: 5 / 8; border-radius: 6px; text-align: center; color: var(--label); background: var(--card); box-shadow: var(--card-edge), 0 8px 22px rgba(0, 0, 0, 0.16); container-type: inline-size; }
.cover-in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 4cqw; height: 100%; padding: 10cqw 9cqw 9cqw; box-sizing: border-box; }
/* Laid out as the app composes a cover: masthead over a rule, the drawing, the title, then the date line. */
.cover-mast { font-size: 5.6cqw; font-weight: 700; letter-spacing: 0.36em; margin-right: -0.36em; }
.cover-mast::after { content: ""; display: block; width: 24cqw; height: 1px; margin: 3.5cqw auto 0; background: currentColor; }
.cover-title { font-family: Georgia, "Times New Roman", serif; font-size: 12cqw; line-height: 1.02; font-weight: 700; }
.cover-meta { font-size: 3.3cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.col { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 14px; }
.col > .cover { width: clamp(120px, 38%, 190px); align-self: flex-start; }
.col-info { flex: 1; min-width: 150px; }
.cover-options { display: flex; gap: 8px; }
.cover-option { width: 56px; padding: 0 !important; border-radius: 6px; }
.cover-option .cover { box-shadow: var(--card-edge); }
.cover-option .cover-in { grid-template-rows: minmax(0, 1fr); padding: 10cqw; }
.cover-option.shimmer .cover { visibility: hidden; }
.cover-option[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--accent); }
.col-info .btn { margin-top: 12px; }

/* The library on its own, floating beside the browser. */
.app.compact { grid-template-columns: minmax(0, 1fr); }
.app.compact .app-side, .app.compact .detail { display: none; }
.app.compact .app-body { grid-template-columns: minmax(0, 1fr); }
.app.compact .app-bar { padding-left: 14px; }
.app.compact .list { padding: 0 8px 8px; }
.app .app-bar .lights { display: none; }
.app.compact .app-bar .lights { display: flex; padding-right: 6px; }

/* ---- The browser, with Send to Dispatch in the toolbar ---- */
.browser { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); background: var(--web-bar); }
.br-tabs { display: flex; align-items: flex-end; gap: 10px; height: 40px; padding: 0 12px 0 14px; }
.br-tabs .lights { align-self: center; padding-right: 6px; }
.br-tab { display: flex; align-items: center; gap: 8px; max-width: 250px; height: 31px; padding: 0 10px 0 12px; border-radius: 10px 10px 0 0; background: var(--web-tab); font-size: 12px; }
.br-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-tab i { width: 14px; height: 14px; flex-shrink: 0; border-radius: 4px; background: #b4532a; }
.br-tab .ic, .br-plus { color: var(--secondary); }
.br-plus { align-self: center; }
.br-tools { display: flex; align-items: center; gap: 12px; padding: 7px 14px; background: var(--web-tab); box-shadow: inset 0 -1px 0 var(--sep); color: var(--secondary); }
.br-url { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--field); color: var(--label); font-size: 12.5px; }
.br-url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-url .ic { color: var(--secondary); }
.br-ext-wrap { position: relative; display: flex; }
.br-ext { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; }
.br-ext:hover { background: var(--hover) !important; }
.br-ext .app-icon { font-size: 20px; }
.br-ext::after { content: ""; position: absolute; right: 1px; bottom: 1px; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 999px; font-size: 9px; font-weight: 700; color: #fff; transform: scale(0); transition: transform 0.25s var(--spring); }
.br-ext[data-state="busy"]::after { background: #8e8e93; transform: none; content: "…"; line-height: 0.4; }
.br-ext[data-state="done"]::after { background: #30d158; transform: none; content: "✓"; }
.br-ext.hint { animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent); } }
.br-pop { position: absolute; z-index: 3; top: calc(100% + 8px); right: -8px; width: 230px; padding: 10px 12px; border-radius: 13px; color: var(--label); background: var(--win); -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%);
  box-shadow: 0 0 0 0.5px var(--glass-edge), 0 14px 44px rgba(0, 0, 0, 0.3); animation: pop 0.2s var(--ease-out); }
.br-pop strong { display: block; }
.br-pop span { display: block; margin-top: 2px; font-size: 12px; color: var(--secondary); }
.br-avatar { width: 22px; height: 22px; border-radius: 999px; background: #e0567a; }
.br-page { overflow-y: auto; scrollbar-width: none; background: var(--web); color: var(--label); user-select: text; -webkit-user-select: text; }
.br-page::-webkit-scrollbar { display: none; }
.br-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; box-shadow: inset 0 -1px 0 var(--sep); font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: 0.02em; }
.br-nav em { padding: 3px 9px; border-radius: 999px; font: 600 11px var(--font); letter-spacing: 0; color: #b4532a; background: color-mix(in srgb, #b4532a 14%, transparent); }
.br-article { width: min(560px, 100% - 56px); margin: 0 auto; padding: 30px 0 60px; font-family: var(--serif); }
.br-kicker { margin: 0; font: 600 11px var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: #b4532a; }
.br-article h1 { margin: 10px 0 0; font-size: clamp(26px, 3.2cqw, 38px); line-height: 1.08; letter-spacing: -0.015em; }
.br-byline { margin: 12px 0 0; font: 13px var(--font); color: var(--secondary); }
.br-lede { margin: 18px 0 22px !important; padding-bottom: 20px; font-size: 19px !important; line-height: 1.45 !important; font-style: italic; color: var(--secondary); box-shadow: inset 0 -1px 0 var(--sep); }
.br-article p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; }
.browser { container-type: inline-size; }

/* ---- Grokbot ---- */
.grok { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.gk-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; box-shadow: inset 0 -1px 0 var(--sep); }
.gk-logo { width: 34px; height: 34px; margin: -4px -2px; flex-shrink: 0; -webkit-user-drag: none; }
.gk-name { display: grid; line-height: 1.2; }
.gk-name strong { font-size: 14px; }
.gk-name small { font-size: 11px; color: var(--secondary); }
.gk-thread { display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow-y: auto; scrollbar-width: none; }
.gk-thread::-webkit-scrollbar { display: none; }
.gk-thread > * { animation: slide-in 0.4s var(--ease-out); }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } }
.bubble { align-self: flex-start; max-width: 86%; margin: 0; padding: 8px 12px; border-radius: 16px; background: var(--control); line-height: 1.4; }
.bubble.you { align-self: flex-end; background: var(--accent); color: #fff; }
.gk-quiet { margin: 2px 4px; font-size: 12px; color: var(--tertiary); }
.gk-card { padding: 12px; border-radius: 16px; background: var(--card); box-shadow: var(--card-edge); }
.gk-card.done { opacity: 0.6; }
.gk-from { display: flex; align-items: center; gap: 10px; }
.gk-from i { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px; font-style: normal; font-weight: 700; color: #fff; background: var(--tone, #b4532a); }
.gk-from div { display: grid; gap: 1px; min-width: 0; }
.gk-from small { font-size: 12px; color: var(--secondary); }
.gk-from strong { font-size: 14px; line-height: 1.2; }
.gk-jev { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 12px; color: var(--secondary); }
.gk-jev b { flex: 1; height: 4px; border-radius: 4px; background: linear-gradient(to right, #30d158 var(--score), var(--on) var(--score)); }
.gk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.gk-actions .btn { justify-content: center; padding: 7px 8px !important; }
.gk-actions .prominent { grid-column: 1 / -1; }
.gk-mode { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px 12px; box-shadow: inset 0 1px 0 var(--sep); font-size: 12px; color: var(--secondary); }
.seg { display: flex; padding: 2px; border-radius: 999px; background: var(--control); }
.seg button { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--secondary); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--label); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
:root[data-theme="dark"] .seg button[aria-pressed="true"], :root:not([data-theme]) .seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.2); }

/* ---- The Kindle: where everything ends up. E-ink stays e-ink, day or night. ---- */
.kindle { position: relative; aspect-ratio: 0.72; padding: 5.5% 5.5% 15%; box-sizing: border-box; border-radius: 7% / 5%; container-type: inline-size;
  background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 30px 70px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.25); cursor: default; user-select: none; -webkit-user-select: none; }
.kindle::after { content: "kindle"; position: absolute; left: 0; right: 0; bottom: 4.5%; text-align: center; font-size: 5.5cqw; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.28); }
.k-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; padding: 4cqw 5cqw; box-sizing: border-box; border-radius: 1.5cqw; overflow: hidden; color: #161616; background: #e9e6dd; font-family: var(--serif); box-shadow: inset 0 0 6cqw rgba(0, 0, 0, 0.08); }
.k-screen.flash { animation: eink 0.7s steps(1) both; }
@keyframes eink { 0% { filter: invert(1); } 28% { filter: contrast(0.4); } 46% { filter: none; } }
.k-top { display: flex; justify-content: space-between; padding-bottom: 2.5cqw; border-bottom: 1px solid rgba(0, 0, 0, 0.35); font: 600 4.2cqw var(--font); }
.k-new { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: 2.5cqw; padding: 4cqw 0 3cqw; min-height: 0; }
.k-new > small { font: 700 3.6cqw var(--font); letter-spacing: 0.16em; }
.k-cover { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 2cqw; height: 100%; aspect-ratio: 5 / 7; max-width: 100%; padding: 4cqw; box-sizing: border-box; border: 1.5px solid #161616; text-align: center; }
.k-cover b { font: 700 3.8cqw var(--font); letter-spacing: 0.3em; margin-right: -0.3em; }
.k-cover strong { font-family: Georgia, "Times New Roman", serif; font-size: 6.4cqw; line-height: 1.05; }
/* Nothing drawn for it (a file, or something Grokbot sent): the title takes the middle. */
.k-cover.plain { grid-template-rows: auto minmax(0, 1fr) auto; }
.k-cover.plain strong { align-self: center; font-size: 8cqw; }
.k-cover em { font: 3.6cqw var(--font); font-style: normal; }
.k-lib { margin: 0; padding: 2.5cqw 0 0; list-style: none; border-top: 1px solid rgba(0, 0, 0, 0.35); font-size: 4.3cqw; line-height: 1.25; }
.k-lib li { display: flex; gap: 2cqw; padding: 0.8cqw 0; white-space: nowrap; }
.k-lib li span { overflow: hidden; text-overflow: ellipsis; }
.k-lib li::before { content: "•"; }
.k-empty { align-self: center; text-align: center; font-size: 5cqw; }

/* ---- Questions: one list, used on the page and in the Help window. It takes its colours from where it sits. ---- */
.faq { --faq-line: color-mix(in srgb, currentColor 14%, transparent); }
.faq details { border-top: 1px solid var(--faq-line); }
.faq details:last-child { border-bottom: 1px solid var(--faq-line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 1em 0; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font-size: 1.35em; font-weight: 400; line-height: 0.8; opacity: 0.55; transition: transform 0.2s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-a { max-width: 64ch; padding: 0 2em 1.2em 0; line-height: 1.5; opacity: 0.78; user-select: text; -webkit-user-select: text; }
.faq-a p { margin: 0 0 0.7em; }
.faq-a ol { display: grid; gap: 0.55em; margin: 0; padding-left: 1.3em; }
/* Solid, not glass: it is read over other windows. */
.help { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: var(--web); }
.help-bar { display: flex; align-items: center; gap: 10px; padding: 13px 14px 11px; box-shadow: inset 0 -1px 0 var(--sep); font-size: 14px; }
.help-body { padding: 4px 18px 18px; overflow-y: auto; scrollbar-width: none; }
.help-body::-webkit-scrollbar { display: none; }
.help .faq details:first-child { border-top: 0; }

/* ---- The pointer that runs each demo until you take over ---- */
.cursor { position: absolute; z-index: 9400; left: 50%; top: 100%; width: 28px; height: 28px; margin: -5px 0 0 -8px; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); transition: left 0.85s cubic-bezier(0.45, 0, 0.2, 1), top 0.85s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s, transform 0.12s; }
.cursor.pressed { transform: scale(0.86); }
.demo-status { position: absolute; left: 50%; bottom: 0; margin: 0; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; font-size: 12px; white-space: nowrap; color: var(--ink-2); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.demo-status:empty { display: none; }

/* ---- Waitlist ---- */
.waitlist { max-width: 480px; margin-top: 28px; }
.waitlist-field { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 18px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
.waitlist-field input { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; outline: none; }
.waitlist-field input::placeholder { color: var(--ink-3); }
.waitlist-field button { flex-shrink: 0; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--solid); color: var(--solid-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.waitlist-field button:disabled { opacity: 0.6; cursor: progress; }
.waitlist-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist-note { margin: 10px 0 0 18px; font-size: 13px; color: #d0342c; text-shadow: none; }
:root[data-theme="dark"] .waitlist-note, :root:not([data-theme]) .waitlist-note { color: #ff8a80; }
.waitlist-done { margin: 0; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); font-size: 15px; text-shadow: none; }

.theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 999px; color: var(--ink); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 1px var(--glass-edge); cursor: pointer; }
:root[data-theme="light"] .icon-moon, :root:not([data-theme="light"]) .icon-sun { display: none; }