:root {
  --bg: #0a0c10;
  --surface: #12151b;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #eef1f6;
  --text-2: #a7afbd;
  --text-3: #8b94a5;
  --accent: #0a84ff;
  --accent-text: #5aa9ff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --header: 60px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: #8ec5ff; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: calc(var(--header) + 16px); }

.container { max-width: 1248px; margin-inline: auto; padding-inline: 24px; }

.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 20;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
}
.skip:focus { top: 12px; color: #fff; }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 12, 16, 0.74);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.header-row { height: var(--header); display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; font-size: 18px; }
.brand:hover { color: var(--text); }
.site-nav { display: flex; gap: 24px; margin-left: auto; font-size: 15px; }
.site-nav a { color: var(--text-2); }
.site-nav a:hover { color: var(--text); }
@media (max-width: 900px) {
  .site-nav { display: none; }
  .header-row .button-small { margin-left: auto; }
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}
.button:hover { color: #fff; background: #2b95ff; }
.button svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.button-quiet { background: rgba(18, 21, 27, 0.8); border: 1px solid var(--line-strong); color: var(--text); }
.button-quiet:hover { color: var(--text); background: #1a1e26; }
.button-small { padding: 8px 15px; border-radius: 10px; font-size: 15px; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fine { margin: 0; font-size: 14px; color: var(--text-3); }

/* Hero */

.hero { position: relative; padding-top: 88px; }
.lanes { position: absolute; inset: 0 0 auto; width: 100%; height: 980px; pointer-events: none;
  /* They end at the app's window (site.js sets where): behind it on a wide screen, fading out where they'd run on
     beside it. */
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--lanes-fade, 100%), transparent var(--lanes-end, 100%));
  mask-image: linear-gradient(to bottom, #000 var(--lanes-fade, 100%), transparent var(--lanes-end, 100%)); }
.lanes-static { opacity: 0.5; }
.lanes-static path { fill: none; stroke-width: 3; }
.lanes-static circle { fill: var(--bg); stroke-width: 3; }
/* The lanes draw themselves in, top down at one speed (700 units a second), as a graph does when it loads: a branch
   starts when the lane it leaves gets there, and each commit appears as its lane reaches it. site.js then sends
   commits down them now and then (.lanes-flow). */
.lanes .lane { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: lane-draw linear forwards; }
.lane-blue { animation-duration: 1.457s; }
.lane-amber { animation-duration: 0.645s; }
.lane-pink { animation-duration: 0.73s; animation-delay: 0.771s; }
.lane-violet { animation-duration: 1.457s; animation-delay: 0.12s; }
.lane-teal { animation-duration: 0.903s; animation-delay: 0.449s; }
.lanes .node { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: node-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.node-1 { animation-delay: 0.2s; }
.node-2 { animation-delay: 0.314s; }
.node-3 { animation-delay: 0.645s; }
.node-4 { animation-delay: 1.159s; }
.node-5 { animation-delay: 0.363s; }
.node-6 { animation-delay: 0.85s; }
.node-7 { animation-delay: 1.352s; }
@keyframes lane-draw { to { stroke-dashoffset: 0; } }
@keyframes node-in { to { transform: scale(1); } }
.lane-ripple { transform-box: fill-box; transform-origin: center; }
/* A window too narrow for the lanes at the sides of the composition: they run down its edges, down to the app's window. */
.lanes.is-compact .lanes-static path, .lanes.is-compact .lanes-static circle { stroke-width: 2; }

/* Cards light up at the edge nearest the pointer, with a faint sheen inside (site.js sets where and how much). */
.glow-card { position: relative; }
.card-glow, .card-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--ga, 0); z-index: 2; }
.card-glow { padding: 1.5px; background: radial-gradient(260px circle at var(--gx, -999px) var(--gy, -999px), rgba(120, 175, 255, 0.95), rgba(120, 175, 255, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card-sheen { background: radial-gradient(420px circle at var(--gx, -999px) var(--gy, -999px), rgba(255, 255, 255, 0.035), transparent 70%); }

/* The hero, left alone: Kaern fetches a teammate's commit (pictures of the app over the hero; the new row flashes). */
.hero-fetch { position: absolute; inset: 0; pointer-events: none; }
.hero-fetch img { position: absolute; display: block; max-width: none; }
.hero-fetch-new { position: absolute; border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(90, 169, 255, 0.9); background: rgba(90, 169, 255, 0.12); opacity: 0; }

/* Download's merge commit: its hash (a new one with every commit that lands) and, now and then, a branch or tag. */
.merge-hash { position: absolute; top: -21px; left: calc(50% + 18px); font: 500 13px/18px ui-monospace, SFMono-Regular, Menlo, monospace; color: #8b93a3;
  letter-spacing: 0.02em; white-space: pre; pointer-events: none; }
.merge-hash::after { content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #8b93a3; opacity: var(--caret, 0); }
.merge-ref { position: absolute; top: -22px; right: calc(50% + 18px); display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px;
  border-radius: 6px; font: 600 12px/18px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; white-space: nowrap; pointer-events: none;
  color: color-mix(in srgb, var(--ref, #5aa9ff) 45%, white); background: color-mix(in srgb, var(--ref, #5aa9ff) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ref, #5aa9ff) 42%, transparent); opacity: 0; transform: translateX(6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.merge-ref.is-in { opacity: 1; transform: none; }
.merge-ref svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
@media (max-width: 480px) { .merge-ref { display: none; } }

/* Under the hood: the Command Log's rows arrive one by one (the picture moved a row at a time over #1e1e1e). */
.log-host { position: relative; }
.log-replay { position: absolute; overflow: hidden; pointer-events: none; background: #1e1e1e; }
.log-replay img { position: absolute; left: 0; max-width: none; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); }
.log-replay-cover { position: absolute; left: 0; right: 0; background: #1e1e1e; transition: top 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); }
.log-replay-flash { position: absolute; left: 0; right: 0; top: 0; background: rgba(90, 169, 255, 0.16); opacity: 0; }

/* The Download buttons (site.js): under the pointer or the keyboard's focus a branch comes in from the left and a commit
   runs down it (.is-on); as it lands (.is-merged) a commit appears on the button's edge, a light crosses the button
   (.is-sweep), it glows (.is-glow), and its arrow turns into a merge. */
.merge-button { position: relative; transition: box-shadow 0.4s ease; }
.merge-button.is-on { box-shadow: 0 0 0 1px rgba(120, 175, 255, 0.28), 0 8px 26px rgba(59, 130, 246, 0.26); }
.merge-button.is-glow { animation: merge-glow 1.1s ease-out; }
@keyframes merge-glow { 25% { box-shadow: 0 0 0 1.5px rgba(150, 195, 255, 0.85), 0 10px 36px rgba(59, 130, 246, 0.55); } }
.button-branch { position: absolute; right: 100%; bottom: 50%; width: 72px; height: 44px; overflow: visible; pointer-events: none; }
.button-branch .line { fill: none; stroke-width: 2; stroke-linecap: butt; stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset 0.35s cubic-bezier(0.3, 0, 0.2, 1); }
.merge-button.is-on .button-branch .line { stroke-dashoffset: 0; }
.button-branch .light { opacity: 0; }
.button-junction { position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; overflow: visible; pointer-events: none; }
.button-junction circle { stroke: var(--bg); stroke-width: 2; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.merge-button.is-merged .button-junction circle { transform: scale(1); }
.button-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.button-sheen::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-130%); }
.merge-button.is-sweep .button-sheen::before { animation: merge-sweep 0.75s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
@keyframes merge-sweep { to { transform: translateX(260%); } }
.button-icons { position: relative; display: inline-block; flex: none; width: 18px; height: 18px; }
.button-icons svg { position: absolute; inset: 0; transition: opacity 0.25s ease, transform 0.3s ease; }
.button-merge { opacity: 0; transform: translateY(-4px); }
.button-merge path { stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset 0.45s ease 0.08s; }
.button-merge circle { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.3s ease 0.25s; }
.merge-button.is-merged .button-arrow { opacity: 0; transform: translateY(6px); }
.merge-button.is-merged .button-merge { opacity: 1; transform: none; }
.merge-button.is-merged .button-merge path { stroke-dashoffset: 0; }
.merge-button.is-merged .button-merge circle { transform: scale(1); }

/* Hidden history (site.js): a faint commit graph under the page that the pointer lights up. It sits under everything
   (the cards are opaque) and fades out before text, where a soft patch of the page's color lies under the words
   (.history-halo); the light around the pointer goes over both. The hero has its own graph (.history-hero), laid out
   around its big lanes, whose commits grow near the pointer. */
.history, .history-hero, .history-glow { position: absolute; left: 0; width: 100%; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.history-glow { top: 0; }
.history, .history-hero { z-index: -3;
  -webkit-mask-image: radial-gradient(circle 230px at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
  mask-image: radial-gradient(circle 230px at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%); }
.history.is-lit, .history-hero.is-lit, .history-glow.is-lit { opacity: 1; }
.history svg, .history-hero svg { display: block; width: 100%; height: 100%; overflow: visible; }
.history path, .history-hero path { fill: none; stroke-width: 1.5; stroke-opacity: 0.32; }
.history circle, .history-hero circle { fill: var(--bg); stroke-width: 1.5; stroke-opacity: 0.5; }
.history-hero circle { transform-box: fill-box; transform-origin: center; transition: transform 0.25s ease; }
.history-glow { z-index: -1; background: radial-gradient(circle 320px at var(--mx, -999px) var(--my, -999px), rgba(120, 150, 255, 0.05), transparent 70%); }
.history-host { position: relative; }
.history-halo { position: absolute; z-index: -2; border-radius: 30px; background: var(--bg); filter: blur(14px); pointer-events: none; }

/* Main, down the page: above each section a line comes in and its commit pops up when the section comes into view;
   then now and then a commit runs down it (site.js). At the bottom, two branches merge into Download. */
.feature, .download { position: relative; }
.spine { position: absolute; top: 0; left: 50%; width: 24px; height: 124px; margin-left: -12px; overflow: visible; pointer-events: none; }
.spine-merge { top: -150px; width: min(360px, calc(100% - 32px)); height: 150px; margin-left: 0; transform: translateX(-50%); }
.spine .lanes-static { opacity: 0.75; }
.spine .lanes-static path { fill: none; stroke-width: 3; stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.3, 0, 0.2, 1); }
.spine .lanes-static circle { fill: var(--bg); stroke-width: 3; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s; }
.spine.is-in .lanes-static path { stroke-dashoffset: 0; }
.spine.is-in .lanes-static circle { transform: scale(1); }
/* A commit landing lights Download up from where it comes in: its top edge, and the card below it (behind its content). */
.download { isolation: isolate; }
.download-glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(140, 185, 255, 0) 22%, rgba(140, 185, 255, 0.95) 50%, rgba(140, 185, 255, 0) 78%) top / 100% 1.5px no-repeat,
    radial-gradient(ellipse 42% 58% at 50% 0%, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0) 100%); }
.hero-text { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.hero h1 { margin: 0; font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
.hero-lede { margin: 0; font-size: 21px; line-height: 1.5; color: var(--text-2); }
.hero-text .actions { margin-top: 6px; }
.hero-shot { position: relative; max-width: 1288px; margin: 64px auto 0; padding-inline: 24px; }
.hero-base { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.65)); }

/* The hero answers clicks: pictures of the app's other states go over it (.hero-layer), and areas that act as its
   rows and tabs (.k-area, with the live parts' controls below) sit on top (.hero-hits). --pt is one of the window's
   points at the size the picture shows. */
.hero-live { position: relative; --pt: 0.86px; }
.hero-layer, .hero-hits { position: absolute; inset: 0; }
.hero-layer { pointer-events: none; }
.hero-layer img { position: absolute; display: block; max-width: none; }

/* Facts */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 96px;
}
.facts > div { border-top: 1px solid var(--line); padding-top: 24px; }
.facts h2 { margin: 0 0 6px; font-size: 17px; font-weight: 650; }
.facts p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* Feature sections */

.feature { padding-top: 150px; }
.feature-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.kicker { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.feature-head h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; }
.lede { margin: 0; max-width: 620px; font-size: 18px; line-height: 1.55; color: var(--text-2); }

.tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.tablist button {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.tablist button:hover { color: var(--text); }
.tablist button[aria-selected="true"] { background: var(--accent-soft); border-color: rgba(90, 169, 255, 0.55); color: var(--text); }

.panel { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 22px; }
.panel[hidden] { display: none; }

.variants { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.variants button {
  padding: 7px 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.variants button:hover { color: var(--text); }
.variants button[aria-pressed="true"] { background: var(--accent); color: #fff; }

.stage {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 36px);
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.stage > img { grid-area: 1 / 1; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.stage .shot { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 24px 60px rgba(0, 0, 0, 0.5); }
.stage-window > img { filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.55)); }
@media (max-width: 700px) { .stage { aspect-ratio: 4 / 3; border-radius: 14px; } }
/* One picture that never changes: the stage takes its shape. */
.stage.stage-auto { aspect-ratio: auto; }
.stage-auto > img { width: 100%; height: auto; max-height: none; }

/* Pictures that change in place: a variant chosen, or the frames of a sequence. */
.js .stage > img[data-variant], .js .stage > img[data-frame] { opacity: 0; transition: opacity 0.45s ease; }
.js .stage > img.is-current { opacity: 1; }
.no-js .stage > img[data-variant]:not([data-variant="0"]), .no-js .stage > img[data-frame]:not([data-frame="0"]) { display: none; }

/* Bot updates: the folded row opens as a click on it does in Kaern (the opened run is its own picture). */
.stage[data-bots] { position: relative; }
.stage > img.bots-opened { opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.no-js .stage > img.bots-opened { display: none; }
.js .stage.is-open > img.bots-opened { opacity: 1; }
.js .stage.is-open > img[data-variant="0"].is-current { opacity: 0; }
.no-js .tablist, .no-js .variants, .no-js .steps { display: none; }

.steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.steps li { counter-increment: step; }
.steps button::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 650;
}
.steps button.is-current { color: var(--text); border-color: rgba(90, 169, 255, 0.55); }
.steps button.is-current::before { background: var(--accent); color: #fff; }

.caption { margin: 0; max-width: 700px; text-align: center; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.caption strong { color: var(--text); font-weight: 650; }

#hood .stage { margin-top: 36px; }
#hood .caption { margin: 18px auto 0; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px 0 0; padding: 0; list-style: none; }
.chips li { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; color: #c9cfda; }

/* Download and footer */

.download {
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-block: 64px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  max-width: 1200px;
}
.download h2 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.025em; }
.download > p:not(.fine) { margin: 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 1248px) { .download { margin-inline: 24px; } }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 56px;
  padding-bottom: 48px;
  font-size: 14px;
  color: var(--text-3);
}
.site-footer nav { display: flex; gap: 22px; }
.site-footer a { color: var(--text-3); }
.site-footer a:hover { color: var(--text); }

/* Live panes: parts of Kaern rebuilt in HTML with the app's own dark colors and sizes, so they work as in the app. */
.stage.stage-live { aspect-ratio: auto; }
.pane {
  width: 100%;
  max-width: 900px;
  border-radius: 12px;
  overflow: hidden;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.86);
  font: 12px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  text-align: left;
}
.pane-bar { height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.pane-info { margin-right: auto; color: rgba(255, 255, 255, 0.58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checkerboard {
  background-color: #1e1e1e;
  background-image: conic-gradient(#232324 25%, transparent 0 50%, #232324 0 75%, transparent 0);
  background-size: 18px 18px;
}
.pane-canvas { display: flex; justify-content: center; align-items: flex-start; padding: 20px 24px; min-height: 380px; }
.imgdiff-view { width: 100%; max-width: 760px; }
.imgdiff-view[hidden] { display: none; }
.pic { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 6px 22px rgba(0, 0, 0, 0.14); }
.twoup { display: flex; gap: 18px; align-items: flex-start; }
.twoup figure { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.twoup figcaption, .captions, .blend { font: 600 11.5px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: rgba(255, 255, 255, 0.58); }
.swipe { --split: 50%; position: relative; cursor: col-resize; touch-action: none; border-radius: 10px; user-select: none; -webkit-user-select: none; }
.swipe:focus-visible { outline-offset: 4px; border-radius: 12px; }
.swipe img { pointer-events: none; }
.swipe-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.swipe-before .pic { box-shadow: none; }
.swipe-line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 1.5px; margin-left: -0.75px; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.35); }
.knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.knob svg { fill: none; stroke: #3b3b3b; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.captions { display: flex; justify-content: space-between; margin-top: 8px; }
.onion { position: relative; }
.onion .onion-top { position: absolute; inset: 0; box-shadow: none; }
.blend { display: flex; align-items: center; gap: 10px; max-width: 420px; margin: 12px auto 0; }
.blend input { flex: 1; accent-color: #0a84ff; }
.no-js .imgdiff-view:not([data-view="swipe"]), .no-js .k-seg { display: none; }
@media (max-width: 700px) { .pane-canvas { padding: 14px; min-height: 0; } .twoup { gap: 10px; } }
@media (max-width: 480px) { .pane-info { display: none; } .pane-bar { justify-content: center; } }

/* Kaern's controls, shared by every live part (site.js: button(), area()). As in the app: filled buttons dim while
   pressed (plain buttons on macOS), plate buttons and rows light up under the pointer, and the pointer stays an
   arrow, except over diff lines that can be picked. */
.js .no-js-only { display: none; }
.k-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: #4a4a4d;
  box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font: 600 11.5px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  white-space: nowrap;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.k-button[hidden] { display: none; }
.k-button:active:not(:disabled) { opacity: 0.72; }
.k-button:disabled { opacity: 0.45; }
.k-button:focus-visible, .k-seg button:focus-visible { outline: 2px solid #5aa9ff; outline-offset: 1px; }
.k-primary { padding: 0 11px; background: #0a84ff; box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.45); color: #fff; }   /* PrimaryButton */
.k-primary:disabled { opacity: 0.4; }
.k-accent { background: #0a84ff; box-shadow: none; color: #fff; }                                             /* Mark Resolved */
.k-bar { padding: 0 10px; border-radius: 6px; font-size: 12px; }                                            /* BarButton, BlockButton */
.k-bar.k-primary { box-shadow: none; }
.k-hunk { height: 22px; border-radius: 6px; background: #1e1e1e; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); color: #5aa9ff; }
.k-hunk.k-on { background: #0a84ff; box-shadow: none; color: #fff; }                                        /* Unstage Hunk */
.k-hunk:disabled { opacity: 0.5; }
.k-link { height: auto; padding: 2px 5px; border-radius: 5px; background: transparent; box-shadow: none; color: inherit; font: inherit; }
.k-plate { width: 22px; height: 22px; padding: 0; border-radius: 6px; background: transparent; box-shadow: none; color: rgba(255, 255, 255, 0.58); }
.k-plate:hover, .k-plate:active:not(:disabled) { background: rgba(255, 255, 255, 0.07); opacity: 1; }
.k-toast { height: auto; margin-left: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.08); box-shadow: none; color: inherit; font: 700 12.5px/1.3 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.k-seg { flex: none; display: inline-flex; height: 24px; padding: 2px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); }
.k-seg button {
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  font: 600 11.5px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  white-space: nowrap;
  cursor: default;
}
.k-seg button[aria-pressed="true"] { background: #4a4a4d; color: rgba(255, 255, 255, 0.86); box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.45); }
.k-seg button:active { opacity: 0.72; }
.k-icon { flex: none; }
.k-icon.k-fill { fill: currentColor; }
.k-icon.k-stroke { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* Areas over a picture that act as the row or tab under them. A row lights up as Kaern's does, K.content plus
   K.hover (white at 7 %) whatever its own shade (--tint per row); a tab gets the tab bar's plate, 7 pt corners,
   2 pt in from the tab (4 at the bottom); a group's chip darkens its capsule a little (brightness −0.03 on a fill
   at 30–50 %), 6 pt in from the left, 4 from the right, 3 from the top and bottom. */
.k-area { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font: inherit; cursor: default; -webkit-tap-highlight-color: transparent; }
.k-area[hidden] { display: none; }
.k-area:focus-visible { outline: 2px solid #5aa9ff; outline-offset: -2px; }
.hero-row:hover:not([aria-selected="true"]), .hero-run:hover { background: rgba(255, 255, 255, var(--tint, 0.07)); }
.hero-tab::before { content: ""; position: absolute; inset: calc(2 * var(--pt)) calc(2 * var(--pt)) calc(4 * var(--pt)); border-radius: calc(7 * var(--pt)); }
.hero-tab:hover:not([aria-pressed="true"])::before { background: rgba(255, 255, 255, 0.07); }
.hero-chip::before { content: ""; position: absolute; inset: calc(3 * var(--pt)) calc(4 * var(--pt)) calc(3 * var(--pt)) calc(6 * var(--pt)); border-radius: calc(12 * var(--pt)); }
.hero-chip:hover::before { background: rgba(0, 0, 0, 0.04); }
.tile { flex: none; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; font: 700 10px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.tile-m { color: #ffb340; background: rgba(255, 159, 10, 0.18); }
.k-add { color: #4cd97b; }
.k-del { color: #ff7a70; }

/* Stage single lines: Kaern's review of one changed file (ReviewView, DiffViews), rebuilt. */
.review { position: relative; max-width: 980px; display: flex; flex-direction: column; }
.review[hidden] { display: none; }
.rv-top { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.rv-back { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 5px; color: #5aa9ff; font-size: 13px; font-weight: 600; }
.rv-back svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rv-file { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; }
.rv-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-counts { flex: none; font-size: 12px; font-weight: 600; }
.rv-meta { margin-left: auto; flex: none; color: rgba(255, 255, 255, 0.58); white-space: nowrap; }
.rv-hint { height: 30px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #232324; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 11.5px; color: rgba(255, 255, 255, 0.58); }
.rv-how { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-legend { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.rv-legend i { width: 10px; height: 10px; border-radius: 2px; }
.rv-legend .key-picked { background: rgba(10, 132, 255, 0.22); box-shadow: inset 3px 0 #0a84ff; }
.rv-legend .key-staged { margin-left: 8px; background: rgba(48, 209, 88, 0.2); }
.rv-diff {
  padding-bottom: 76px;  /* room for the bar with the picked lines */
  font: 12px/18px ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color: #e6e6e8;
  user-select: none;
  -webkit-user-select: none;
}
.rv-note { padding: 14px 16px; font: 12px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: rgba(255, 255, 255, 0.58); }
.hh { height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; background: #222b37; }
.hh-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: #9db6d8; }
.srow, .urow { display: flex; align-items: stretch; }
.srow > .rule { flex: none; width: 1px; background: rgba(255, 255, 255, 0.1); }
.side { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: stretch; }
.num { flex: none; box-sizing: content-box; width: 35px; padding: 1px 9px 1px 0; text-align: right; color: rgba(255, 255, 255, 0.58); }
.urow .num { width: 36px; padding-right: 10px; }
.mark { flex: none; width: 14px; padding-top: 1px; text-align: center; color: #4cd97b; font: 800 10px/18px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.marker { flex: none; width: 18px; padding-top: 1px; text-align: center; }
.code { flex: 1; min-width: 0; padding: 1px 12px 1px 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.add { background: rgba(48, 209, 88, 0.1); }
.add > .num { background: rgba(48, 209, 88, 0.2); }
.add > .marker { color: #4cd97b; }
.del { background: rgba(255, 69, 58, 0.1); }
.del > .num { background: rgba(255, 69, 58, 0.22); }
.del > .marker { color: #ff7a70; }
/* A missing side: 5 pt stripes every 10 pt. */
.side.empty { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 5px, transparent 5px 10px); }
.pickable { position: relative; cursor: pointer; }
.pickable:focus-visible { outline: 2px solid #5aa9ff; outline-offset: -2px; }
.pickable.picked { background: rgba(10, 132, 255, 0.22); }
.pickable.picked > .num { background: rgba(10, 132, 255, 0.22); color: #5aa9ff; font-weight: 700; }
.pickable.picked::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #0a84ff; z-index: 1; }
/* The bar with the picked lines, and Kaern's message after a discard, float over the bottom of the diff. */
.rv-float, .rv-toast { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; white-space: nowrap; }
.rv-float[hidden], .rv-toast[hidden] { display: none; }
.rv-float {
  gap: 8px;
  padding: 7px 8px 7px 14px;
  border-radius: 12px;
  background: rgba(44, 44, 48, 0.98);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
.rv-float > span { padding-right: 4px; font-size: 12.5px; font-weight: 600; }
.rv-toast {
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(236, 236, 240, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  color: #1d1d1f;
  font-size: 12.5px;
  font-weight: 600;
}
.rv-toast span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .rv-back, .rv-counts { display: none; }
  .rv-top { padding-left: 12px; }
  .rv-meta { display: none; }
  .rv-top .k-seg { margin-left: auto; }
}
@media (max-width: 480px) {
  .rv-float { padding-left: 8px; }
  .rv-float > span { display: none; }
  .urow .num { width: 24px; padding-right: 6px; }
}

/* Merge conflicts: Kaern's conflict screen (ConflictViews), rebuilt: the operation bar, the file's header with
   Keep … and Mark Resolved, each side with its conflict lines tinted, and the result with a bar on each open block. */
.conflicts { position: relative; max-width: 980px; display: flex; flex-direction: column; }
.conflicts[hidden] { display: none; }
.op-bar { height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 12px 0 16px; background: #3b2321; color: #ffb4ab; font-size: 12.5px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.op-bar.done { background: #1c3326; color: #8de0ad; }
.op-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-text b { font-weight: 600; }
.cf-top { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 12px 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cf-file { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.cf-doc { flex: none; margin-right: 2px; fill: none; stroke: rgba(255, 255, 255, 0.58); stroke-width: 1.1; stroke-linejoin: round; }
.cf-dir { color: rgba(255, 255, 255, 0.58); }
.cf-name { font-weight: 600; }
.cf-count { margin-right: auto; font-size: 11.5px; color: rgba(255, 255, 255, 0.58); white-space: nowrap; }
.cf-keep { display: flex; gap: 6px; }
.cf-sides { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cf-sides > .rule { flex: none; width: 1px; background: rgba(255, 255, 255, 0.1); }
.cf-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.cf-head { height: 30px; flex: none; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #252527; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 11.5px; color: rgba(255, 255, 255, 0.58); white-space: nowrap; overflow: hidden; }
.cf-head b { color: rgba(255, 255, 255, 0.86); font-weight: 600; }
.cf-head i { flex: none; width: 3px; height: 14px; border-radius: 2px; }
.cf-head i.ours { background: #28a745; }
.cf-head i.theirs { background: #0a84ff; }
.cf-lines { padding: 4px 0; font: 12px/20px ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; color: #e6e6e8; }
.cf-side .cf-lines { height: 228px; overflow: auto; overscroll-behavior: contain; }
.cf-line { display: flex; min-height: 20px; }
.cf-line .n { flex: none; width: 42px; padding-right: 10px; text-align: right; color: rgba(255, 255, 255, 0.58); }
.cf-line .t { flex: 1; min-width: 0; padding-right: 10px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.cf-lines[data-side="ours"] .hit { background: rgba(48, 209, 88, 0.14); }
.cf-lines[data-side="theirs"] .hit { background: rgba(10, 132, 255, 0.18); }
.cf-line.pick { background: rgba(10, 132, 255, 0.11); }
.cblock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0; padding: 7px 12px 7px 52px; background: #3b2321; color: #ffb4ab; font: 600 12px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
.cblock .k-icon { margin-left: -22px; }
.cblock > span { margin-right: 6px; }
.cpicked { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 52px; color: #5aa9ff; font: 600 11.5px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
@media (max-width: 700px) {
  .cf-sides { display: none; }
  .cf-top { padding: 8px 12px; }
  .cf-top .rv-back { display: none; }
  .cf-keep { width: 100%; flex-wrap: wrap; }
  .cblock, .cpicked { padding-left: 34px; }
  .cf-line .n { width: 26px; }
}

.not-found { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.not-found h1 { margin: 0; font-size: clamp(32px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.03em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lane, .node { animation: none; stroke-dashoffset: 0; transform: none; }
  .spine .lanes-static path, .spine .lanes-static circle { transition: none; stroke-dashoffset: 0; transform: none; }
  .merge-button, .button-branch .line, .button-junction circle, .button-icons svg, .button-merge path, .button-merge circle { transition: none; }
  .merge-button.is-glow, .merge-button.is-sweep .button-sheen::before { animation: none; }
  .js .stage > img[data-variant], .js .stage > img[data-frame] { transition: none; }
}