/* ─────────────────────────────────────────────────────────────────────────────
   Dark is the native theme: the lime measures 11.77:1 on near-black and only
   1.63:1 on white. So the lime stays a *surface* in both themes -- filled, with
   near-black text on top, it is 11.77:1 either way -- and wherever it has to be
   read as text it drops to #5c7615, the same hue at 5.18:1 on white. That is
   what --accent-text is for. The dividing line is size: anything thin enough
   to be read as a mark -- a link, a 2px rule, an eyebrow -- is ink and uses
   --accent-text. Only areas big enough to carry near-black text on top stay
   --lime: the download button and the step numbers.
   ───────────────────────────────────────────────────────────────────────── */
:root, :root[data-theme="dark"] {
  --lime:        #abdb25;
  --lime-hi:     #bce62f;
  --accent-text: #abdb25;
  --ink:         #0f0f0f;
  --bg:          #0f0f0f;
  --panel:       #171717;
  --panel-2:     #1c1c1c;
  --line:        #262626;
  --line-hi:     #333333;
  --title:       #ffffff;
  --body:        #cccccc;
  --muted:       #999999;
  --quiet:       #666666;
  --bloom:       rgba(171, 219, 37, .13);
  --tint:        rgba(171, 219, 37, .05);

  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
}

:root[data-theme="light"] {
  --accent-text: #5c7615;   /* 5.18:1 on white; the lime itself is 1.63:1 */
  --bg:          #ffffff;
  --panel:       #f7f7f7;
  --panel-2:     #f2f2f2;
  --line:        #e4e4e4;
  --line-hi:     #cccccc;
  --title:       #333333;
  --body:        #595959;
  --muted:       #6e6e6e;
  --quiet:       #8a8a8a;
  --bloom:       rgba(171, 219, 37, .22);
  --tint:        rgba(171, 219, 37, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--accent-text); text-decoration-color: color-mix(in srgb, var(--accent-text) 45%, transparent); }
p { margin: 0 0 1em; }

.wrap { max-width: 940px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 720px; margin-inline: auto; }

h1, h2, h3 { color: var(--title); line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -.02em; margin: 0 0 .3em; }
h3 { font-size: 1.05rem; margin: 2em 0 .3em; }

.eyebrow {
  font: 600 .72rem/1 var(--mono); letter-spacing: .18em;
  color: var(--accent-text); text-transform: uppercase; margin: 0 0 1.1em;
}
section { padding: 92px 0; border-top: 1px solid var(--line); }

/* ── Theme switch ─────────────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; flex: none;
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--line-hi); border-radius: 9px;
  cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--title); border-color: var(--accent-text); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
/* Each icon shows the theme you would switch *to*, so only one is ever drawn. */
:root[data-theme="dark"]  .theme-toggle .i-dark  { display: none; }
:root[data-theme="light"] .theme-toggle .i-light { display: none; }

.hero .theme-toggle { position: absolute; top: 0; right: 22px; }

/* Screenshots follow the switch. The settings window matches the page so it
   sits in it naturally; the main window shows the opposite theme, so whichever
   way the switch is thrown a visitor still sees that both exist. */
:root[data-theme="dark"]  .on-light { display: none; }
:root[data-theme="light"] .on-dark  { display: none; }

/* ── Sticky bar, appears once the hero button is gone ─────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%); transition: transform .25s ease;
}
.topbar.show { transform: none; }
.topbar .wrap { display: flex; align-items: center; gap: 12px; height: 58px; }
.topbar img { width: 26px; height: 26px; }
.topbar b { color: var(--title); font-size: .95rem; }
.topbar .grow { flex: 1; }
.topbar .btn { padding: 8px 18px; font-size: .88rem; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 104px 0 0; overflow: hidden; border: 0; }
.hero::before {          /* one soft lime bloom behind the mark, nothing more */
  content: ""; position: absolute; left: 50%; top: -180px;
  width: 780px; height: 520px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--bloom), transparent 72%);
  pointer-events: none;
}
.hero .wrap { position: relative; text-align: center; }
.hero img.mark { width: 72px; height: 72px; }
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  letter-spacing: -.035em; margin: .3em 0 .22em;
}
.hero h1 .lime { color: var(--accent-text); }
.lede {
  font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: var(--body);
  max-width: 30em; margin: 0 auto 2em;
}

.btn {
  display: inline-block; padding: 15px 38px; border-radius: 9px;
  background: var(--lime); color: var(--ink);
  font: 700 1.02rem/1 var(--sans); text-decoration: none;
  border: 1px solid transparent; transition: background .15s ease;
}
.btn:hover { background: var(--lime-hi); }
.btn-ghost {
  background: transparent; color: var(--body);
  border-color: var(--line-hi); font-weight: 600;
}
.btn-ghost:hover { background: var(--panel); color: var(--title); }
.sub { color: var(--muted); font-size: .87rem; margin: 1.1em 0 0; }
.sub a { color: var(--muted); }

/* ── The two downloads ──────────────────────────────────────────────────────
   Never the same weight. Two buttons that look equally important stop the
   reader to make them choose, and this particular choice depends on a fact
   most people do not have to hand -- which graphics card is in the machine.
   One filled button and one ghost says which to take without hiding the other.

   docs/pick.js swaps the two around where it can see an NVIDIA card, so the
   recommendation is not the same for everyone. Order is set in CSS rather than
   in markup so that the HTML can stay in the order that is right when no
   JavaScript runs at all.
   ──────────────────────────────────────────────────────────────────────── */
.pick { margin-top: 30px; }
.pick-row { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 620px) {
  .pick-row { flex-direction: row; justify-content: center; align-items: stretch; }
  .pick-row-left { justify-content: flex-start; }
}
.pick-row.gpu-first .pick-cpu { order: 2; }

.pick-btn { padding: 12px 30px; text-align: center; }
.pick-btn small {
  display: block; margin-top: 4px;
  font: 400 .74rem/1.3 var(--sans); opacity: .74;
}
.pick-label { font: inherit; }

/* The line that names the reader's own card. It is the only sentence on the
   page about them rather than about the app, which is exactly why it gets to
   sit above the buttons instead of under them. */
.pick-read { margin: 0 0 14px; font-size: .9rem; color: var(--body); }
.pick-read b { color: var(--accent-text); font-weight: 600; }
/* --muted, not --quiet, which is what this asked for first. At .78rem it is the
   smallest text on the page, and --quiet lands at 3.34:1 on the dark background
   and 3.45:1 on the light one -- both short of the 4.5:1 that small text needs.
   --muted is 6.73:1 and 5.10:1. Measured with contrast_ratio() in kara.py, the
   same function the app uses on its own palette. */
.pick-private {
  display: block; margin-top: 4px;
  color: var(--muted); font-size: .78rem;
}

/* What the GPU build becomes on a machine that cannot use it: still reachable,
   no longer an invitation to spend 572 MB finding that out. */
.pick-aside { font-size: .84rem; color: var(--muted); align-self: center; }
.pick-aside:hover { color: var(--title); }

/* ── The hero shot ────────────────────────────────────────────────────────
   The app, photographed, where a CSS mockup of the app used to animate. The
   mockup carried a stage, a caret, a level meter and a keycap, all of which
   existed only here; they are gone with it.

   A drop shadow and nothing else. The PNG already has its corners cut to
   transparency (see tools/screenshots.py), so a border or a radius here would
   fight the shape rather than follow it.
   ──────────────────────────────────────────────────────────────────────── */
.demo { margin: 40px auto 0; max-width: 320px; }
.app-shot, .shots img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .5));
}
:root[data-theme="light"] .app-shot,
:root[data-theme="light"] .shots img {
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .22));
}

/* ── The redrawn window ────────────────────────────────────────────────────
   Kara's own chrome, redrawn -- not the site's panel colours, the exact ones
   from kara.py's THEMES (bg_root/bg_header/text_title/log_dim/rec_status_text
   etc.), so it reads as the app rather than as a page decoration wearing its
   colours. Still a drawing, not a screenshot: what makes that honest is that
   demo.js only ever plays back a real capture (tools/capture_demo.py) with
   the app's own real wording ("Recorded 3.6s", "WRITING IT DOWN") -- nothing
   here is invented, only redrawn. Hidden by default; demo.js reveals it once
   real data has loaded and motion is okay.
   ──────────────────────────────────────────────────────────────────────── */
.win-fake {
  --k-bg:      #0f0f0f;  --k-header: #181818;  --k-title: #ffffff;
  --k-body:    #cccccc;  --k-dim:    #666666;  --k-idle-bar: #333333;
  --k-accent:  #abdb25;  --k-rec:    #ef4141;  --k-icon: #cccccc;
  --k-key-bg:  #1f1f1f;
  max-width: 320px; margin: 0 auto; text-align: left;
  background: var(--k-bg); border-radius: 10px; overflow: hidden;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .5));
}
:root[data-theme="light"] .win-fake {
  --k-bg:      #ffffff;  --k-header: #f2f2f2;  --k-title: #333333;
  --k-body:    #595959;  --k-dim:    #8a8a8a;  --k-idle-bar: #cccccc;
  --k-accent:  #5c7615;  --k-rec:    #c52c1f;  --k-icon: #595959;
  --k-key-bg:  #f2f2f2;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .22));
}
.win-fake-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 4px 11px 12px; background: var(--k-header);
  font: 600 15px var(--sans); color: var(--k-title);
}
.win-fake-mark { width: 20px; height: 20px; flex: none; }
.win-fake-title { flex: 1; }
.win-fake-icons {
  font-size: 13px; letter-spacing: 6px; color: var(--k-icon); padding-right: 8px;
}
.win-fake-model {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 20px 0; font: 9px var(--sans); color: var(--k-dim);
}
.win-fake-model .win-fake-mark { width: 15px; height: 15px; }
.win-fake-log { padding: 14px 16px 6px; min-height: 84px; }
.win-fake-log p { margin: 0; }
.win-fake-said {
  font: 11px/1.5 var(--sans); color: var(--k-title); margin: 6px 0 4px !important;
}
.win-fake-dim { font: 9px var(--sans); color: var(--k-dim); }
.win-fake-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px 16px;
}
.win-fake-key {
  font: 700 9px var(--mono); color: var(--k-body); background: var(--k-key-bg);
  border-radius: 8px; padding: 3px 8px; flex: none;
}
.win-fake-bars {
  flex: 1; min-width: 0; overflow: hidden;
  display: flex; align-items: center; gap: 3px; height: 26px;
}
.win-fake-bars i {
  flex: 1; min-width: 0; min-height: 2px; border-radius: 2px;
  background: var(--k-idle-bar);
}
.win-fake.is-listening .win-fake-bars i { background: var(--k-accent); }
.win-fake-status-wrap { display: flex; align-items: center; gap: 5px; flex: none; }
.win-fake-rec-dot {
  width: 6px; height: 6px; border-radius: 50%; background: transparent;
  transition: background .15s ease;
}
.win-fake.is-listening .win-fake-rec-dot { background: var(--k-rec); }
.win-fake-status {
  font: 700 9px var(--mono); letter-spacing: .03em; color: var(--k-dim);
}
.win-fake.is-listening .win-fake-status { color: var(--k-rec); }
.demo-caption { margin: 14px 0 0; font-size: .8rem; color: var(--quiet); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Backstop alongside demo.js's own check: whatever state the script left
     things in, a reader who asked for less motion never sees it play. */
  .win-fake { display: none !important; }
  .app-shot-group { display: block !important; }
}

/* ── Proof strip ──────────────────────────────────────────────────────────── */
.proof {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; margin-top: 66px;
}
.proof div { background: var(--bg); padding: 22px 18px; text-align: center; }
.proof b { display: block; color: var(--title); font-size: 1.5rem; letter-spacing: -.02em; }
.proof span { color: var(--muted); font-size: .82rem; }

/* ── Beats ────────────────────────────────────────────────────────────────── */
/* Three explicit columns, not auto-fit: these are one sequence, and auto-fit
   was orphaning RELEASE onto its own row, which reads as an afterthought. */
.beats { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 0; margin: 0; list-style: none; }
@media (min-width: 700px) { .beats { grid-template-columns: repeat(3, 1fr); } }
.beats li {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 22px 24px; position: relative;
}
.beats li::after {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0;
  height: 2px; background: var(--accent-text); border-radius: 0 0 2px 2px;
}
.beats .n { font: 700 .72rem/1 var(--mono); letter-spacing: .16em; color: var(--accent-text); }
.beats b { display: block; color: var(--title); margin: .7em 0 .3em; font-size: 1.02rem; }

/* ── Shots ────────────────────────────────────────────────────────────────── */
.shots { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.shots figure { margin: 0; }
/* No border, no radius: the PNGs carry their own rounded corners as alpha
   (tools/screenshots.py cuts them), so a rectangle drawn around one would
   run straight across the curve. A shadow follows the shape instead. */
.shots img { width: 270px; display: block; }
.shots figcaption { color: var(--quiet); font-size: .8rem; margin-top: .7em; text-align: center; }

/* ── Table ────────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 560px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
td:first-child { color: var(--muted); }
th:nth-child(2), td:nth-child(2) { color: var(--title); font-weight: 600; background: var(--tint); }
th:nth-child(2) { color: var(--accent-text); }

/* ── Code, cards, steps ───────────────────────────────────────────────────── */
pre {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-text);
  border-radius: 8px; padding: 15px 18px; overflow-x: auto;
  font: .88rem/1.6 var(--mono); color: var(--title);
}
code { font-family: var(--mono); font-size: .92em; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 26px 24px; }
.card img { border: 1px solid var(--line); border-radius: 8px; display: block; width: 100%; }
.note { margin: 1.3em 0 0; font-size: .87rem; color: var(--muted); padding-left: 15px; border-left: 3px solid var(--accent-text); }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 1.2em 0 0; }
.steps > li { counter-increment: s; position: relative; padding-left: 44px; margin-bottom: 26px; }
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lime); color: var(--ink);
  font: 700 .85rem/28px var(--mono); text-align: center;
}
.steps strong { color: var(--title); }
kbd {
  font: .82em var(--mono); background: var(--panel-2); border: 1px solid var(--line-hi);
  border-bottom-width: 2px; border-radius: 5px; padding: 2px 7px; color: var(--title); white-space: nowrap;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
details { border-bottom: 1px solid var(--line); }
details summary {
  cursor: pointer; list-style: none; padding: 17px 30px 17px 0; position: relative;
  color: var(--title); font-weight: 600;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; position: absolute; right: 4px; top: 15px;
  color: var(--accent-text); font: 400 1.3rem/1 var(--mono);
}
details[open] summary::after { content: "\2212"; }
details p { margin: 0 0 18px; max-width: 62em; }

footer { border-top: 1px solid var(--line); padding: 40px 0 60px; color: var(--quiet); font-size: .88rem; text-align: center; }

/* ═════════════════════════════════════════════════════════════════════════════
   Install guide (install.html)
   ═════════════════════════════════════════════════════════════════════════ */

/* A plain banner instead of the hero: this page is read, not pitched. */
.page-head { position: relative; padding: 92px 0 54px; border-bottom: 1px solid var(--line); }
.page-head .wrap { position: relative; }
.page-head .theme-toggle { position: absolute; top: -46px; right: 22px; }
.page-head h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.03em; margin: .1em 0 .3em; }
.page-head .lede { margin-inline: 0; }
.crumb { font: 600 .78rem/1 var(--mono); letter-spacing: .04em; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent-text); }

/* Topbar links, shared with index.html */
.topbar nav { display: flex; gap: 20px; margin-left: 8px; }
.topbar nav a { color: var(--muted); font-size: .88rem; text-decoration: none; }
.topbar nav a:hover, .topbar nav a[aria-current] { color: var(--title); }

.guide section { padding: 62px 0; }
.guide .steps > li { margin-bottom: 52px; }
.step-title { display: block; color: var(--title); font-size: 1.14rem; font-weight: 700; margin-bottom: .45em; }

/* A figure that holds a mockup or a real screenshot. */
.shot { margin: 1.4em 0 0; }
.shot figcaption { color: var(--quiet); font-size: .8rem; margin-top: .8em; }

/* ── Windows dialog mockups ───────────────────────────────────────────────────
   These reproduce dialogs Windows itself draws, so they keep Windows' own
   colours rather than following the site switch. A visitor has to recognise the
   real thing on their screen; recolouring it to match the page would defeat the
   only job these have. They are drawings, not photographs -- the captions say
   so, because a reader deserves to know which one they are looking at.
   ───────────────────────────────────────────────────────────────────────── */
.win {
  --w-bg:    #f3f3f3;
  --w-panel: #ffffff;
  --w-line:  #d9d9d9;
  --w-text:  #1b1b1b;
  --w-dim:   #5d5d5d;
  --w-blue:  #0067c0;
  background: var(--w-bg); color: var(--w-text);
  border: 1px solid var(--w-line); border-radius: 8px;
  font: 13px/1.5 "Segoe UI", system-ui, sans-serif;
  overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  max-width: 480px;
}
.win-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: var(--w-panel);
  border-bottom: 1px solid var(--w-line);
  font-size: 12px; color: var(--w-dim);
}
.win-bar .x { margin-left: auto; color: var(--w-dim); font-size: 13px; }
.win-body { padding: 20px 22px 6px; }
.win-body h4 { margin: 0 0 .6em; font-size: 1.24rem; font-weight: 600; color: var(--w-text); line-height: 1.25; }
.win-body p { margin: 0 0 .9em; color: var(--w-dim); }
.win-link { color: var(--w-blue); text-decoration: none; font-weight: 600; }
.win-meta { margin: 0 0 1em; font-size: 12.5px; color: var(--w-dim); }
.win-meta b { color: var(--w-text); font-weight: 600; }
.win-foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 16px 22px 18px; background: var(--w-bg);
}
.win-btn {
  padding: 6px 22px; border-radius: 5px; font-size: 13px;
  background: var(--w-panel); color: var(--w-text);
  border: 1px solid var(--w-line);
}
/* The button the reader is being told to press. */
.win-btn.go { background: var(--w-blue); border-color: var(--w-blue); color: #fff; font-weight: 600; }
/* Kara's own installer is Inno Setup, whose wizard is wider and has a task list. */
.win.wizard { max-width: 540px; }
.win .task { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px; color: var(--w-text); }
.win .box {
  flex: none; width: 15px; height: 15px; margin-top: 2px; border-radius: 3px;
  border: 1px solid #8a8a8a; background: var(--w-panel);
}
.win .box.on { background: var(--w-blue); border-color: var(--w-blue); position: relative; }
.win .box.on::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.win .bar-track { height: 7px; border-radius: 4px; background: #d2d2d2; overflow: hidden; margin: 4px 0 6px; }
.win .bar-fill  { height: 100%; background: var(--w-blue); border-radius: 4px; }
.win .path {
  font: 12px/1.5 var(--mono); color: var(--w-text);
  background: var(--w-panel); border: 1px solid var(--w-line);
  border-radius: 4px; padding: 7px 10px; word-break: break-all;
}

/* ── Callouts ─────────────────────────────────────────────────────────────── */
.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--accent-text);
  background: var(--tint); border-radius: 0 10px 10px 0;
  padding: 18px 22px; margin: 1.5em 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout b { color: var(--title); }

/* ── Compact download row ─────────────────────────────────────────────────── */
.dl-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 1.4em 0 0; }
.dl-row .meta { color: var(--muted); font-size: .85rem; }