/* Quire Writer on the same dark stage as its video: four slow lights in the colours the app
   gives Typst, LaTeX, Quarto and Markdown, Geist for every word, and Instrument Serif italic
   for the phrase each heading lands on. The app itself appears in VS Code Dark Modern. */
@font-face { font-family: "Geist"; src: url(fonts/geist.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geist-mono.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(fonts/instrument-serif-italic.woff2) format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #060709;
  --raised: #0c0d11;
  --line: rgb(255 255 255 / 0.09);
  --line-2: rgb(255 255 255 / 0.16);
  --text: #f4f4f6;
  --muted: #a8a8b3;
  --faint: #8c8c97;
  --accent: #9db8ff;
  --blue: #5b8cff;
  --green: #3fbf74;
  --pink: #e2559c;
  --orange: #f27a3d;
  --ok: #4ade80;
  --series: var(--blue);
  /* VS Code Dark Modern, as the app draws it (web/style.css) */
  --app-chrome: #181818;
  --app-editor: #1f1f1f;
  --app-border: #2b2b2b;
  --app-widget: #313131;
  --app-fg: #cccccc;
  --app-strong: #e7e7e7;
  --app-muted: #9d9d9d;
  --app-btn: #0078d4;
  --app-sel: #264f78;
  --app-lineno: #6e7681;
  --ins: rgb(156 204 44 / 0.3);
  --del: rgb(255 40 40 / 0.32);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --paper: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.66 3.14a.5.5 0 0 1 .69.72l-8.5 8a.5.5 0 0 1-.7-.01l-3.5-3.5a.5.5 0 0 1 .71-.71l3.15 3.16z'/%3E%3C/svg%3E");
  scrollbar-color: rgb(255 255 255 / 0.18) transparent;
  scroll-behavior: smooth;
}
:root[data-lang="tex"] { --series: var(--green); }
:root[data-lang="qmd"] { --series: var(--pink); }
:root[data-lang="md"] { --series: var(--orange); }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; caret-color: var(--accent); }
::selection { background: rgb(91 140 255 / 0.38); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
a { color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgb(157 184 255 / 0.5); }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { font-weight: 650; text-wrap: balance; margin: 0; letter-spacing: -0.035em; }
h1 em, h2 em { font: italic 400 1.1em/0.95 var(--serif); letter-spacing: -0.01em; color: var(--accent); padding-right: 0.04em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
code { font: 0.88em var(--mono); }
svg.i { width: 16px; height: 16px; flex: none; fill: currentColor; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The stage: four lights drifting behind everything, a grid that fades out, a vignette. */
.stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.stage { --o: min(72vmax, 1400px); }
.stage i { position: absolute; width: var(--o); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--c) 30%, transparent) 0%, color-mix(in oklab, var(--c) 10%, transparent) 36%, transparent 68%); animation: drift 34s ease-in-out infinite alternate; }
.stage i:nth-child(1) { --c: var(--blue); left: calc(var(--o) * -0.33); top: calc(var(--o) * -0.42); }
.stage i:nth-child(2) { --c: var(--pink); right: calc(var(--o) * -0.39); top: calc(var(--o) * -0.3); animation-duration: 41s; animation-delay: -9s; }
.stage i:nth-child(3) { --c: var(--green); right: calc(var(--o) * -0.25); bottom: calc(var(--o) * -0.53); animation-duration: 38s; animation-delay: -17s; }
.stage i:nth-child(4) { --c: var(--orange); left: calc(var(--o) * -0.36); bottom: calc(var(--o) * -0.58); animation-duration: 45s; animation-delay: -4s; opacity: 0.8; }
.stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px); background-size: 96px 96px; mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 10%, transparent 75%); }
.stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, rgb(0 0 0 / 0.6)); }
@keyframes drift { to { transform: translate(6vmax, 5vmax) scale(1.08); } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 16px/1 var(--sans); padding: 15px 24px; border-radius: 999px; text-decoration: none; color: #fff; border: 1px solid rgb(255 255 255 / 0.18); background: linear-gradient(180deg, #3f6cf0 0%, #2a52d6 100%); box-shadow: 0 12px 34px rgb(61 109 250 / 0.38), inset 0 1px 0 rgb(255 255 255 / 0.32); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 16px 42px rgb(61 109 250 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.32); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: rgb(255 255 255 / 0.04); border-color: var(--line-2); box-shadow: none; color: var(--text); }
.btn.ghost:hover { background: rgb(255 255 255 / 0.08); }
.btn .i { width: 18px; height: 18px; }

/* Top bar */
.band { position: sticky; top: 0; z-index: 10; background: rgb(6 7 9 / 0.7); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid var(--line); }
.top { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font: 650 18px/1 var(--sans); letter-spacing: -0.02em; white-space: nowrap; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand small { font: 500 13px/1 var(--sans); letter-spacing: 0; color: var(--faint); margin-left: 4px; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 4px; font: 500 15px/1 var(--sans); }
.top nav a { color: var(--muted); text-decoration: none; padding: 9px 12px; border-radius: 999px; transition: color 0.2s, background-color 0.2s; }
.top nav a:hover { color: var(--text); background: rgb(255 255 255 / 0.06); }
.top nav .btn { color: #fff; padding: 10px 16px; margin-left: 8px; font-size: 14px; box-shadow: 0 8px 22px rgb(61 109 250 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.32); }
.top nav .btn:hover { color: #fff; background: linear-gradient(180deg, #3f6cf0 0%, #2a52d6 100%); }

/* Hero */
.hero { text-align: center; padding-top: clamp(56px, 6vw, 80px); }
.hero h1 { font-size: clamp(42px, 6vw, 82px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 700; }
.hero h1 > span { display: block; }
.hero h1 em { font-size: 1.04em; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); max-width: 37em; margin: 28px auto 0; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.fine { font-size: 15px; color: var(--faint); margin-top: 16px; }
.formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.formats li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; font: 500 15px/1 var(--sans); color: var(--text); border: 1px solid color-mix(in oklab, var(--c) 45%, transparent); background: color-mix(in oklab, var(--c) 10%, transparent); }
.formats li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }

.film { position: relative; max-width: 1120px; margin: 48px auto 0; }
.film::before { content: ""; position: absolute; inset: 12% 0 -8%; z-index: -1; background: radial-gradient(ellipse at 30% 50%, rgb(91 140 255 / 0.4), transparent 60%), radial-gradient(ellipse at 75% 60%, rgb(226 85 156 / 0.22), transparent 60%); filter: blur(60px); }
.film-frame { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: #000; box-shadow: 0 50px 140px rgb(0 0 0 / 0.7); }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.film-play { position: absolute; inset: 0; width: 100%; border: 0; background: none; cursor: pointer; }
.film-play::after { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / 0); transition: background-color 0.3s; }
.film-play:hover::after { background: rgb(255 255 255 / 0.04); }
.film-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.film figcaption { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--faint); max-width: 44em; margin-inline: auto; }

/* The hero speaks once: its lines rise in order when the page opens. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 1.1s var(--ease) both; }
  .rise:nth-child(2) { animation-delay: 0.12s; }
  .lede.rise { animation-delay: 0.24s; }
  .formats.rise { animation-delay: 0.3s; }
  .actions.rise { animation-delay: 0.34s; }
  .fine.rise { animation-delay: 0.4s; }
  .film.rise { animation: film 1.4s var(--ease) 0.42s both; }
  /* As the film scrolls into view it lies down flat, the way the window rises in the video. */
  @supports (animation-timeline: view()) {
    .film.rise { animation: film-scroll linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  }
  .way:hover kbd { transform: translateY(3px); box-shadow: 0 1px 0 #101115, 0 6px 16px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.14); }
}
@keyframes rise { from { opacity: 0; transform: translateY(0.5em); filter: blur(8px); } }
@keyframes film { from { opacity: 0; transform: perspective(1800px) translateY(80px) rotateX(18deg) scale(0.94); } }
@keyframes film-scroll { from { transform: perspective(1800px) translateY(70px) rotateX(22deg) scale(0.9); } }

/* Sections */
section { padding: clamp(88px, 11vw, 150px) 0 0; }
section h2, #demo h2 { font-size: clamp(34px, 4.8vw, 64px); line-height: 1.02; }
.sub { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 38em; margin-top: 18px; text-wrap: pretty; }
.center { text-align: center; }
.center .sub { margin-inline: auto; }

/* The review demo: a small Quire window in Dark Modern */
#demo { padding-top: clamp(88px, 11vw, 140px); }
.demo { position: relative; margin: 44px 0 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: var(--app-editor); color: var(--app-fg); font: 15px/1.45 var(--sans); box-shadow: 0 50px 140px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(0 0 0 / 0.5); }
.d-top { display: flex; align-items: stretch; gap: 16px; background: var(--app-chrome); border-bottom: 1px solid var(--app-border); padding-left: 16px; min-height: 48px; }
.d-title { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; color: var(--app-strong); white-space: nowrap; }
.d-title::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: 20px 0 #febc2e, 40px 0 #28c840; margin-right: 46px; flex: none; }
.d-title small { font-weight: 400; color: var(--app-muted); }
.d-files { display: flex; margin-left: auto; overflow-x: auto; }
.d-files button { background: none; border: 0; border-left: 1px solid var(--app-border); color: var(--app-muted); font: 500 14px/1 var(--sans); padding: 0 18px; cursor: pointer; white-space: nowrap; transition: color 0.2s, background-color 0.2s; }
.d-files button:hover { color: var(--app-strong); background: rgb(255 255 255 / 0.04); }
.d-files button[aria-pressed="true"] { color: var(--app-strong); background: var(--app-editor); box-shadow: inset 0 2px 0 var(--series); }
.d-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.85fr); }
.pane { min-width: 0; }
.pane + .pane { border-left: 1px solid var(--app-border); }
.p-head { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-muted); padding: 14px 18px 10px; }
.p-head b { color: var(--app-strong); font-weight: 600; }

.code { padding: 4px 18px 22px 0; }
.ln { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.ln > i { font: normal 13px/28px var(--mono); color: var(--app-lineno); text-align: right; padding-right: 18px; font-variant-numeric: tabular-nums; }
.ln > p { font: 14.5px/28px var(--mono); min-height: 28px; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--app-fg); }
.ln.cur > i { color: var(--app-strong); }
.ln.cur > p { background: rgb(255 255 255 / 0.035); box-shadow: -6px 0 0 rgb(255 255 255 / 0.035), 6px 0 0 rgb(255 255 255 / 0.035); }
.m { color: #569cd6; font-weight: 600; }
.k { color: #c586c0; }
.l { color: #4fc1ff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(79 193 255 / 0.4); }
.chg { cursor: pointer; }
.chg del { background: var(--del); color: #e8a8a8; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.chg ins { text-decoration: none; background: var(--ins); color: #fff; border-radius: 3px; padding: 0 2px; }
.chg.cur ins { box-shadow: 0 0 0 1.5px var(--app-btn); }
.chg:hover ins { background: rgb(156 204 44 / 0.45); }
.settle { animation: settle 1.1s var(--ease); }
@keyframes settle { from { background: rgb(156 204 44 / 0.4); box-shadow: 0 0 0 3px rgb(156 204 44 / 0.4); border-radius: 3px; } to { background: transparent; box-shadow: 0 0 0 3px transparent; } }

.review { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 10px; font: 13px var(--sans); }
.review .what { color: var(--app-muted); margin-right: auto; }
.rb { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 4px; background: var(--app-widget); color: #fff; padding: 6px 12px; font: 500 13px var(--sans); cursor: pointer; transition: background-color 0.15s; }
.rb:hover { background: #3c3c3c; }
.rb.yes { background: var(--app-btn); }
.rb.yes:hover { background: #026ec1; }
.rb svg { width: 14px; height: 14px; }

.preview { background: #2a2a2a; padding-bottom: 22px; }
.page { margin: 4px 22px 0; background: #fff; border-radius: 2px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.45); padding: 26px 26px 30px; font: 13.5px/1.5 var(--paper); color: #111; text-align: justify; hyphens: auto; }
.page h4 { font-size: 15px; margin: 0 0 8px; text-align: left; }
.page p + p { margin-top: 8px; }
.page mark { background: rgb(91 140 255 / 0.22); color: inherit; }
.page table { margin: 14px auto 4px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.page td, .page th { padding: 2px 14px; border-top: 0.75px solid #111; text-align: left; }
.page tr:last-child td { border-bottom: 0.75px solid #111; }
.page .cap { text-align: center; font-size: 11.5px; }

.chat { padding-bottom: 18px; }
.msg { padding: 0 18px; }
.msg + .msg { margin-top: 18px; }
.msg > b { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-muted); margin-bottom: 6px; }
.msg.me > p { background: #2b2b2b; border-radius: 6px; padding: 9px 11px; color: var(--app-strong); }
.msg p { font-size: 14.5px; line-height: 1.5; }
.plan { list-style: none; margin: 4px 0 10px; padding: 0; font-size: 14px; }
.plan li { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--app-strong); }
.plan li::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--app-strong); border-radius: 50%; margin: 0 3px; flex: none; }
.plan li.done { color: var(--app-muted); text-decoration: line-through; }
.plan li.done::before { width: 15px; height: 15px; margin: 0; border: 0; border-radius: 0; background: #89d185; mask: var(--check) center / contain no-repeat; }
.tool { display: flex; align-items: center; gap: 8px; color: var(--app-muted); padding: 4px 0; font-size: 14px; margin-bottom: 8px; }
.tool b { color: var(--app-strong); font-weight: 500; }
.tool span { margin-left: auto; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: rgb(137 209 133 / 0.14); color: #89d185; white-space: nowrap; }

.d-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: var(--app-chrome); border-top: 1px solid var(--app-border); color: var(--app-fg); padding: 8px 12px; font-size: 13px; }
.d-status .nav { display: inline-flex; align-items: center; gap: 2px; }
.sb { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-radius: 4px; color: var(--app-fg); padding: 5px 8px; cursor: pointer; font-size: 13px; }
.sb:hover:not(:disabled) { background: rgb(255 255 255 / 0.08); }
.sb:disabled { opacity: 0.4; cursor: default; }
.sb.all { background: var(--app-btn); color: #fff; font-weight: 500; padding: 6px 12px; }
.sb.all:hover:not(:disabled) { background: #026ec1; }
.sb.none { background: var(--app-widget); padding: 6px 12px; }
.d-status .grow { flex: 1; }
.d-status .dim { color: var(--app-muted); }

/* Three ways to ask */
.ways { margin-top: 56px; border-bottom: 1px solid var(--line); }
.way { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 470px); gap: 24px 48px; align-items: start; padding: 40px 0; border-top: 1px solid var(--line); }
.way h3 { font-size: 26px; letter-spacing: -0.03em; }
.way > p { color: var(--muted); max-width: 30em; }
.keys { margin-top: 16px; display: flex; gap: 8px; }
kbd { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; font: 500 16px/1 var(--sans); color: #ececf1; background: linear-gradient(180deg, #34363e 0%, #22242a 100%); box-shadow: 0 4px 0 #101115, 0 10px 24px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.14); }
.sample { border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-editor); color: var(--app-fg); font: 14.5px/1.7 var(--mono); box-shadow: 0 24px 60px rgb(0 0 0 / 0.5); overflow: hidden; }
.sample .chips { display: flex; gap: 6px; padding: 14px 16px 0; }
.chip { font: 500 12.5px/1 var(--sans); padding: 5px 8px; border-radius: 4px; border: 1px solid var(--app-widget); color: var(--app-muted); }
.sample .ask { padding: 10px 16px 0; font: 15px/1.5 var(--sans); color: var(--app-strong); }
.sample .send { display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 16px; font: 13px var(--sans); color: var(--app-muted); }
.sample .send span:last-of-type { flex: 1; }
.sample .send b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: var(--app-btn); color: #fff; }
.sample .send svg { transform: rotate(-90deg); }
.sample.ms { padding: 16px 18px; }
.sel { background: var(--app-sel); }
.inline { margin-top: 12px; border: 1px solid var(--app-btn); border-radius: 8px; background: #252526; padding: 10px 12px; font: 15px/1.3 var(--sans); color: var(--app-strong); display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.5); }
.inline span { flex: 1; }
.inline kbd, .hint kbd { min-width: 28px; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 13px; box-shadow: 0 2px 0 #101115, inset 0 1px 0 rgb(255 255 255 / 0.14); }
.ghost-text { color: #7b7b7b; font-style: italic; }
.caret { display: inline-block; width: 2px; height: 1.15em; background: #aeafad; vertical-align: -0.2em; margin: 0 1px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sample .hint { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; font: 13px var(--sans); color: var(--app-muted); }

/* Agents: the registry streams past */
.agents-sec .names { margin-top: 56px; display: grid; gap: 14px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.row { display: flex; gap: 12px; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .row { animation: stream 90s linear infinite; }
  .row:nth-child(2) { animation-direction: reverse; animation-duration: 110s; }
  .row:nth-child(3) { animation-duration: 100s; }
}
@keyframes stream { to { transform: translateX(-50%); } }
.agent { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.03); font: 500 17px/1 var(--sans); color: var(--muted); white-space: nowrap; }
.agent::before { content: attr(data-l); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--sans); color: var(--c); background: color-mix(in oklab, var(--c) 18%, transparent); border: 1px solid color-mix(in oklab, var(--c) 55%, transparent); }
.agent.hi { color: var(--text); border-color: var(--line-2); background: rgb(255 255 255 / 0.06); }
.agents-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font: 500 16px/1 var(--sans); color: var(--text); background: rgb(74 222 128 / 0.08); border: 1px solid rgb(74 222 128 / 0.28); }
.pill svg { color: var(--ok); }

/* Four kinds of document */
.kinds { margin-top: 56px; border-collapse: collapse; width: 100%; font-size: 17px; }
.kinds th, .kinds td { text-align: left; vertical-align: top; padding: 24px 0; border-top: 1px solid var(--line); }
.kinds tr:last-child > * { border-bottom: 1px solid var(--line); }
.kinds th { width: 230px; font: 600 22px/1.3 var(--sans); letter-spacing: -0.02em; }
.kinds th::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 16px var(--c); margin-right: 14px; vertical-align: 0.08em; }
.kinds td { color: var(--muted); }
.kinds td + td { width: 34%; padding-left: 40px; font-size: 15.5px; color: var(--faint); }
.export { margin-top: 32px; max-width: 38em; color: var(--muted); }

/* The comparison */
.compare { margin-top: 56px; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 17px; }
.compare th, .compare td { padding: 20px 16px; border-top: 1px solid var(--line); text-align: center; vertical-align: middle; }
.compare thead th { border-top: 0; font: 500 17px/1.25 var(--sans); color: var(--muted); padding-bottom: 18px; }
.compare thead th small { display: block; font-size: 13px; color: var(--faint); margin-top: 2px; }
.compare tbody th { text-align: left; font-weight: 500; color: var(--text); padding-left: 0; width: 38%; }
.compare .q { background: linear-gradient(180deg, rgb(91 140 255 / 0.16), rgb(91 140 255 / 0.06)); border-left: 1px solid rgb(91 140 255 / 0.4); border-right: 1px solid rgb(91 140 255 / 0.4); }
.compare thead .q { border-top: 1px solid rgb(91 140 255 / 0.4); border-radius: 18px 18px 0 0; color: var(--text); font-weight: 700; font-size: 19px; }
.compare tbody tr:last-child .q { border-bottom: 1px solid rgb(91 140 255 / 0.4); border-radius: 0 0 18px 18px; }
.compare thead .q img { width: 26px; height: 26px; border-radius: 6px; vertical-align: -0.4em; margin-right: 8px; }
.c-yes, .c-no { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.c-yes { background: rgb(74 222 128 / 0.14); border: 1px solid rgb(74 222 128 / 0.4); color: var(--ok); }
.c-yes svg, .c-no svg { width: 18px; height: 18px; }
.c-no { color: #6b6b75; }
.part { display: inline-block; font-size: 14px; color: var(--muted); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.03); white-space: nowrap; }
.keep { position: relative; padding-left: 28px; margin-top: 40px; font-size: 21px; line-height: 1.45; max-width: 36em; }
.keep span { color: var(--muted); }
.keep::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 18px var(--pink); }
.footnote { margin-top: 18px; font-size: 14px; color: var(--faint); }

/* Themes */
.switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
.switch button { border: 1px solid var(--line-2); background: rgb(255 255 255 / 0.03); color: var(--muted); padding: 10px 18px; border-radius: 999px; font: 500 15px/1 var(--sans); cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.switch button:hover { color: var(--text); background: rgb(255 255 255 / 0.07); }
.switch button[aria-pressed="true"] { color: #0b0b0f; background: var(--text); border-color: var(--text); }
.shots { position: relative; max-width: 1000px; margin: 32px auto 0; aspect-ratio: 1000 / 624; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 50px 140px rgb(0 0 0 / 0.7); background: #181818; }
.shots img.wide { object-fit: contain; object-position: center; }
.shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); transform: scale(1.02); }
.shots img.on { opacity: 1; transform: none; }
.shot-note { text-align: center; margin-top: 18px; font-size: 16px; color: var(--muted); min-height: 1.6em; }
.shot-note b { color: var(--text); font-weight: 600; }

/* Made for long documents */
.desk { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
.desk div { padding: 26px 0; border-top: 1px solid var(--line); }
.desk h3 { font-size: 21px; letter-spacing: -0.02em; }
.desk p { font-size: 16.5px; color: var(--muted); margin-top: 6px; }

/* Privacy */
.privacy { margin-top: clamp(88px, 11vw, 150px); padding: clamp(72px, 9vw, 120px) 0; background: rgb(12 13 17 / 0.75); border-block: 1px solid var(--line); }
.privacy .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 80px; align-items: start; }
.privacy h2 span { display: block; }
.online { list-style: none; margin: 0; padding: 0; }
.online li { padding: 18px 0; border-top: 1px solid var(--line); font-size: 16.5px; color: var(--muted); }
.online li:last-child { border-bottom: 1px solid var(--line); }
.online b { font: 600 17px var(--sans); color: var(--text); display: block; margin-bottom: 2px; }
.privacy .note { font-size: 15.5px; color: var(--faint); margin-top: 18px; }

/* Install */
#install { padding-bottom: clamp(88px, 11vw, 140px); }
.get { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 80px; margin-top: 56px; }
.get h3 { font-size: 24px; }
.get p { margin-top: 12px; color: var(--muted); }
.get p + h3 { margin-top: 36px; }
.get .btn { margin-top: 24px; }
.get .need { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.get .need h3 { font-size: 19px; }
pre { margin: 16px 0 0; padding: 16px 18px; background: var(--app-editor); border: 1px solid var(--app-border); border-radius: 10px; font: 13.5px/1.7 var(--mono); overflow-x: auto; color: var(--app-fg); }

.foot { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; border-top: 1px solid var(--line); padding: 28px 0; font-size: 15px; color: var(--faint); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.foot nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }

@media (max-width: 1060px) {
  .brand small { display: none; }
  .d-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .chat { grid-column: 1 / -1; order: -1; border-bottom: 1px solid var(--app-border); display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; padding-top: 14px; }
  .chat .p-head { padding-top: 2px; }
  .chat .msg + .msg { margin-top: 0; }
  .chat .plan { display: none; }
  .pane.chat + .pane { border-left: 0; }
  .way { grid-template-columns: 200px minmax(0, 1fr); }
  .way .sample { grid-column: 2; }
  .compare tbody th { width: 30%; }
}
@media (max-width: 860px) {
  .top nav a:not(.btn) { display: none; }
  .privacy .cols, .get, .desk { grid-template-columns: minmax(0, 1fr); }
  .d-top { flex-wrap: wrap; padding: 12px 0 0 16px; gap: 10px; }
  .d-files { margin-left: -16px; width: calc(100% + 16px); border-top: 1px solid var(--app-border); }
  .d-files button:first-child { border-left: 0; }
  .d-files button { padding: 13px 16px; }
  .d-body { grid-template-columns: minmax(0, 1fr); }
  .chat { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .chat .msg + .msg { margin-top: 4px; }
  .pane + .pane { border-left: 0; border-top: 1px solid var(--app-border); }
  .pane.chat + .pane { border-top: 0; }
  .d-status .dim { display: none; }
  .way { grid-template-columns: minmax(0, 1fr); padding: 32px 0; }
  .way .sample { grid-column: auto; }
  .kinds th { display: block; width: auto; padding-bottom: 6px; }
  .kinds td { display: block; padding: 0 0 10px; border-top: 0; }
  .kinds td + td { width: auto; padding: 0 0 24px; }
  .kinds tr:last-child > * { border-bottom: 0; }
  .kinds tr:last-child > :last-child { border-bottom: 1px solid var(--line); }
  .compare { font-size: 15px; }
  .compare th, .compare td { padding: 14px 6px; }
  .compare tbody th { width: auto; }
  .compare thead th { font-size: 14px; }
  .compare thead .q { font-size: 15px; }
  .compare thead .q img { display: none; }
  .c-yes, .c-no { width: 28px; height: 28px; }
  .part { font-size: 12px; padding: 4px 8px; white-space: normal; }
  .keep { font-size: 18px; }
  .foot nav { margin-left: 0; }
}
@media (max-width: 640px) {
  /* The comparison stacks: each row's label on its own line, the four answers under it. */
  .compare, .compare thead, .compare tbody { display: block; }
  .compare tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .compare thead td { display: none; }
  .compare tbody th { grid-column: 1 / -1; padding: 18px 0 6px; border-top: 1px solid var(--line); }
  .compare tbody td { border-top: 0; padding: 6px 4px 16px; }
  .compare thead th { padding: 12px 4px; }
  .compare thead .q { border-radius: 14px 14px 0 0; }
  .compare tbody tr:last-child .q { border-radius: 0 0 14px 14px; }
}
@media (max-width: 480px) {
  .hero h1 { letter-spacing: -0.04em; }
  .actions .btn { width: 100%; justify-content: center; }
  .review .what { flex-basis: 100%; }
  .d-title::before { display: none; }
  .d-status { gap: 6px; padding: 8px; }
  .code { padding-right: 12px; }
  .ln { grid-template-columns: 38px minmax(0, 1fr); }
  .ln > i { padding-right: 10px; }
  .page { margin: 4px 12px 0; padding: 20px 18px 22px; }
  .compare thead th small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .stage i, .settle, .caret { animation: none; }
  .shots img { transition: none; }
}

.foot .andesprit-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-block: 6px;
  color: inherit;
  font-size: 14px;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.foot .andesprit-footer-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.andesprit-footer-logo {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}