:root {
  --bg: #fbfaf7;
  --panel: #ffffff;
  --ink: #1b1d26;
  --muted: #5c6070;
  --line: #e2e0d8;
  --accent: #293973;
  --accent-ink: #ffffff;
  --link: #2f46a0;
  --key-bg: #f1f0ec;
  --key-ink: #a33d06;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --note-bg: #fff6dd;
  --note-line: #e8cf87;
  --page: #ffffff;
  --radius: 10px;
  --wide: 1080px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12141b;
    --panel: #1a1d27;
    --ink: #e8e8ee;
    --muted: #a3a7b6;
    --line: #2c3040;
    --accent: #8ea2ff;
    --accent-ink: #0f1433;
    --link: #a9b8ff;
    --key-bg: #262a37;
    --key-ink: #ffb27a;
    --note-bg: #2b2616;
    --note-line: #6b5a26;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.55; font-size: 17px; }
a { color: var(--link); }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -0.02em; margin: 0 0 0.5rem; }
h2 { font-size: 1.6rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.4rem; }
p, li { max-width: 68ch; }
/* Keys and commands: always a monospace font (so that l, I, and 1 differ)
   and a highlight color. */
code, kbd { font-family: var(--mono); font-size: 0.9em; color: var(--key-ink); }
kbd {
  font-weight: 600; display: inline-block; min-width: 1.6em; padding: 0.05em 0.45em; text-align: center;
  background: var(--key-bg); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  white-space: nowrap;
}
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }

/* Header and footer */
.top { border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 2; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.brand.small { font-size: 1rem; margin: 0 0 0.5rem; }
.brand picture { display: flex; }
.brand img { object-fit: contain; }
.top nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.top nav a { color: var(--ink); text-decoration: none; padding: 0.4rem 0.7rem; border-radius: 6px; }
.top nav a:hover, .top nav a[aria-current] { background: var(--key-bg); }
.top nav a.buy { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.bottom { border-top: 1px solid var(--line); margin-top: 5rem; padding: 2.5rem 0 3rem; color: var(--muted); font-size: 0.95rem; }
.bottom .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1.5rem; }
.bottom h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.6rem; color: var(--ink); }
.bottom nav a { display: block; color: var(--muted); text-decoration: none; padding: 0.15rem 0; }
.bottom nav a:hover { color: var(--ink); }
@media (max-width: 720px) { .bottom .cols { grid-template-columns: 1fr 1fr; } }

/* Buttons */
.button {
  display: inline-block; padding: 0.7rem 1.2rem; border-radius: 8px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--accent); color: var(--accent); background: transparent; font-size: 1rem; cursor: pointer;
}
.button.primary { background: var(--accent); color: var(--accent-ink); }
.button[disabled] { opacity: 0.45; cursor: not-allowed; }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0 0.5rem; }

/* Home page */
.hero { padding-top: 4rem; padding-bottom: 2rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.hero .lead { font-size: 1.25rem; color: var(--muted); }
.hero .fine { font-size: 0.9rem; color: var(--muted); }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding-top: 2.5rem; gap: 2rem; } }
.typing { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.typing ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.typing li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.75rem; align-items: baseline; }
.typing .k { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: baseline; }
.typing span.what { color: var(--muted); }
.score-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; }
.score-foot .caption { margin: 0.25rem 0; }
.button.watch span { font-size: 0.8em; margin-right: 0.3em; }

/* The typing demo: a window of the app in a dialog, played back from a
   recording. It is always light, as the app's page is. */
.demo-dialog {
  --bg: #fbfaf7; --panel: #ffffff; --ink: #1b1d26; --muted: #5c6070; --line: #e2e0d8;
  --accent: #293973; --key-bg: #f1f0ec; --key-ink: #a33d06;
  --win-bg: #e9e8e4; --win-bar: #f4f3ef; --win-line: #d6d4cc; --key-hot: #293973;
  --mode: #0a6fd8; --mode-insert: #1f8a3a; --mode-visual: #b4570b;
  color-scheme: light; color: var(--ink); background: var(--bg);
  border: 0; border-radius: 14px; padding: 12px 20px 18px;
  /* As wide as the screen allows, but short enough to show it all: the
     page (112 x 68) takes the height that the other parts leave. */
  width: min(1120px, calc(100vw - 24px), calc((100vh - 340px) * 1.64 + 82px));
  max-width: none; max-height: calc(100vh - 24px); overflow: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.demo-dialog::backdrop { background: rgba(10, 12, 20, 0.6); }
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 10px; }
.demo-head h2 { font-size: 1.05rem; margin: 0; }
.demo-head .close {
  font: inherit; font-size: 1.6rem; line-height: 1; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
}
.demo-head .close:hover { background: var(--key-bg); color: var(--ink); }
@media (max-width: 600px) { .demo-dialog { padding: 8px 10px 12px; } }
.demo { margin: 0; }
.demo .win {
  border-radius: 12px; overflow: hidden; border: 1px solid var(--win-line);
  background: var(--win-bg); box-shadow: 0 24px 60px -24px rgba(15, 20, 51, 0.45);
}
.demo .titlebar {
  position: relative; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--win-bar); border-bottom: 1px solid var(--win-line); font-size: 0.85rem; color: var(--muted); font-weight: 600;
}
.demo .lights { position: absolute; left: 12px; display: flex; gap: 8px; }
.demo .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.demo .lights i:nth-child(2) { background: #febc2e; }
.demo .lights i:nth-child(3) { background: #28c840; }
.demo .canvas { position: relative; padding: clamp(8px, 2vw, 20px); background: var(--win-bg); }
.demo .page {
  display: block; width: 100%; height: auto; aspect-ratio: 112 / 68; background: #fff; border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.demo .music { fill: #000; }
.demo .sel rect { fill: rgba(10, 132, 255, 0.15); }
.demo .caret { fill: rgba(10, 132, 255, 0.85); }
.demo[data-mode="insert"] .caret, .demo[data-mode="replace"] .caret { fill: rgba(40, 180, 70, 0.9); }
/* The key caps go at the top left of the page, where it has no music. */
.demo .keycaps {
  position: absolute; left: clamp(14px, 3.5vw, 40px); top: clamp(14px, 3.5vw, 40px);
  display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-start; max-width: 34%; overflow: hidden;
  pointer-events: none;
}
.demo .keycaps kbd {
  font-size: clamp(0.75rem, 1.5vw, 1rem); flex: none; padding: 0.25em 0.6em; min-width: 2em;
  background: rgba(27, 29, 38, 0.82); color: #fff; border: 0; border-radius: 7px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); opacity: 0.55; transition: opacity 0.4s;
}
.demo .keycaps kbd:nth-last-child(-n+3) { opacity: 0.8; }
.demo .keycaps kbd.new { opacity: 1; background: var(--key-hot); animation: pop 0.18s ease-out; }
@keyframes pop { from { transform: translateY(4px) scale(0.92); } to { transform: none; } }
.demo .toast {
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); padding: 0.4rem 0.9rem;
  background: rgba(0, 0, 0, 0.75); color: #fff; border-radius: 6px; font-size: 0.9rem;
}
.demo .statusbar {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 28px; padding: 0 12px;
  background: var(--win-bar); border-top: 1px solid var(--win-line);
  font-family: var(--mono); font-size: 0.82rem; white-space: pre; overflow: hidden;
}
.demo .status { overflow: hidden; text-overflow: ellipsis; }
.demo .status .mode { font-weight: 700; color: var(--mode); }
.demo[data-mode="insert"] .status .mode, .demo[data-mode="replace"] .status .mode { color: var(--mode-insert); }
.demo[data-mode="visual"] .status .mode { color: var(--mode-visual); }
.demo .status svg.note { height: 1.35em; vertical-align: -0.35em; fill: currentColor; }
.demo .hint { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.demo figcaption { margin-top: 1rem; display: grid; gap: 0.75rem; }
.demo .cap { font-size: 1.15rem; min-height: 3.2em; margin: 0; max-width: none; }
.demo .controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.demo .controls button {
  font: inherit; font-size: 0.9rem; padding: 0.35rem 0.8rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
}
.demo .progress { flex: 1 1 160px; height: 8px; border-radius: 4px; background: var(--key-bg); cursor: pointer; position: relative; }
.demo .progress i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; background: var(--accent); }
.demo .count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; min-width: 5.5em; text-align: right; }
@media (max-width: 600px) {
  .demo .hint { display: none; }
  .demo .statusbar { font-size: 0.72rem; }
  .demo .keycaps { position: static; margin-top: 8px; max-width: none; justify-content: flex-start; }
  .demo .keycaps kbd { font-size: 0.8rem; }
}

.score { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 1rem 0 0.5rem; }
.score img { display: block; width: 100%; height: auto; }
.caption { font-size: 0.9rem; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.card h3 { margin-top: 0; }
.card p { margin: 0; color: var(--muted); }

/* Text pages */
.page { padding-top: 2.5rem; }
.page > .wrap > p.lead { font-size: 1.2rem; color: var(--muted); }
.draft, .soon { background: var(--note-bg); border: 1px solid var(--note-line); border-radius: 8px; padding: 0.7rem 1rem; max-width: none; }
.price { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.price .card .amount { font-size: 2.4rem; font-weight: 700; color: var(--ink); margin: 0.2rem 0 0; }
.price .card .tax { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.6rem; }
.price ul { padding-left: 1.2rem; margin: 0 0 1rem; color: var(--muted); }
dl.faq dt { font-weight: 700; margin-top: 1.4rem; }
dl.faq dd { margin: 0.3rem 0 0; max-width: 68ch; }
form.box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: 0.75rem; max-width: 560px; }
form.box label { font-weight: 600; }
form.box input, form.box textarea { font: inherit; padding: 0.6rem 0.7rem; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; }
form.box textarea { font-family: var(--mono); font-size: 0.85rem; min-height: 6rem; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.85rem; color: var(--muted); font-weight: 600; }

/* Key page */
.keytools { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin: 1.25rem 0; }
.keytools input { font: inherit; padding: 0.55rem 0.75rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); min-width: min(100%, 320px); }
.modes { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.modes a { text-decoration: none; padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 0.95rem; }
.keys h3 { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.keys table { table-layout: fixed; }
.keys td.k { width: 14rem; white-space: nowrap; }
.keys td.k .or { color: var(--muted); padding: 0 0.2rem; }
.keys td.cmd { width: 9rem; }
@media (max-width: 600px) { .keys td.k { width: auto; white-space: normal; } }

/* Work with an AI agent (home and features pages) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 1.5rem; } }
.split h2 { margin-top: 0; }
.agent-band { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.points { padding-left: 1.2rem; }
.points li { margin: 0.35rem 0; }
.sample {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin: 0 0 1rem; font-size: 0.85rem; line-height: 1.6; overflow-x: auto;
}
.sample code { color: var(--ink); font-size: 1em; white-space: pre; }
.sample .c { color: var(--muted); }
.sample .p { color: var(--key-ink); }
.sample-label { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.35rem; font-weight: 600; }
.card pre { margin: 0.75rem 0 0; font-size: 0.8rem; overflow-x: auto; }
.card pre code { white-space: pre; }

/* The agent demo: the chat at the left, the page at the right. It is
   always light, as the typing demo is. */
.agent-dialog { width: min(1240px, calc(100vw - 24px)); }
.agent-demo .stage { display: grid; grid-template-columns: minmax(280px, 2fr) 3fr; gap: 14px; align-items: stretch; }
.agent-demo .chat {
  background: var(--panel); border: 1px solid var(--win-line); border-radius: 12px; padding: 12px;
  overflow-y: auto; height: min(62vh, 560px); display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem;
}
.agent-demo .chat > * { flex: none; }
.agent-demo .win { align-self: start; }
.agent-demo .msg p { margin: 0; max-width: none; }
.agent-demo .msg.user { align-self: flex-end; max-width: 88%; background: var(--accent); color: #fff; padding: 0.5rem 0.8rem; border-radius: 12px 12px 2px 12px; }
.agent-demo .msg.agent { max-width: 95%; }
.agent-demo .msg.call { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow: hidden; font-size: 0.82rem; }
.agent-demo .tool { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--line); font-family: var(--mono); overflow-wrap: anywhere; }
.agent-demo .tool .server { color: var(--muted); }
.agent-demo .tool .arg { color: var(--muted); }
.agent-demo pre { margin: 0; padding: 0.35rem 0.6rem; font-family: var(--mono); font-size: 0.78rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 11em; overflow-y: auto; }
.agent-demo pre.text { color: var(--key-ink); border-bottom: 1px solid var(--line); }
.agent-demo pre.reply { color: var(--muted); }
.agent-demo .msg.new { animation: rise 0.25s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.agent-demo .note { color: var(--muted); }
.agent-demo figcaption { margin-top: 0.9rem; display: grid; gap: 0.6rem; }
.agent-demo figcaption p { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: none; }
@media (max-width: 760px) {
  .agent-demo .stage { grid-template-columns: 1fr; }
  .agent-demo .chat { height: 38vh; order: 2; }
}
@media (prefers-reduced-motion: reduce) { .agent-demo .msg.new { animation: none; } }

/* Docs */
.docnav { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.docnav a { text-decoration: none; padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 0.95rem; }
.docnav a[aria-current] { background: var(--key-bg); font-weight: 600; }
.doc pre { font-family: var(--mono); font-size: 0.85rem; line-height: 1.45; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem 1rem; overflow-x: auto; }
.doc pre code { font-size: inherit; color: var(--ink); }
.doc pre .you { color: var(--muted); }
.doc table { margin: 0.75rem 0 1.25rem; }
.doc td code { white-space: nowrap; }
.doc td.cmd { width: 9rem; }
.doc .tool h3 { font-family: var(--mono); color: var(--key-ink); font-size: 1.05rem; }
.doc .tool dl { margin: 0.4rem 0 0; display: grid; grid-template-columns: 11rem 1fr; gap: 0.3rem 1rem; }
.doc .tool dt code { font-weight: 600; }
.doc .tool dd { margin: 0; color: var(--muted); }
.doc .opt { color: var(--muted); font-size: 0.85rem; }
.doc ol.steps > li { margin-bottom: 1rem; }
@media (max-width: 600px) { .doc td code { white-space: normal; } .doc .tool dl { grid-template-columns: 1fr; } }
a.card { text-decoration: none; color: var(--ink); }
a.card h3 { color: var(--link); }
a.card:hover { border-color: var(--link); }