/* Cairn — site tokens and the forty lines of component CSS this page needs.
   The design system stylesheet in the handoff is reference only; vendoring it
   would be more surface than a single static page can justify. */

:root {
  color-scheme: dark;

  /* ground */
  --bg:          #161826;
  --surface:     color-mix(in srgb, #232532 55%, #161826);
  --panel:       #232532;

  /* ink */
  --text:        #e9e9ed;
  --text-muted:  #cfd3e5;
  --text-dim:    #9397ab;
  --text-faint:  #75798c;
  --text-ghost:  #595d6c;

  /* rules and hairlines */
  --rule:        color-mix(in srgb, #e9e9ed 16%, transparent);
  --hairline:    #3f424d;

  /* roles */
  --accent:      #9184d9;
  --accent-lit:  #b5abfc;
  --accent-mid:  #968ae0;
  --blocked:     oklch(0.72 0.105 70);
  --blocked-tint: oklch(0.72 0.105 70 / 0.13);

  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* space (0.7x density scale, inherited from the product) */
  --s-1: 3px;  --s-2: 6px;  --s-3: 8px;  --s-4: 11px;
  --s-6: 17px; --s-8: 22px;

  /* radii + elevation: an edge, then ambient darkness */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
  --e-1: 0 0 0 1px #3f424d;
}

@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, figure, pre { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lit); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

code, pre, .mono { font-family: var(--mono); }

.wrap { max-width: 1100px; margin: 0 auto; padding-inline: 40px; }

/* Every divider fades to transparent 48px from each end -- a background strip,
   never a border, so the fade spans the full width. */
section {
  background: linear-gradient(to right,
    transparent, var(--rule) 48px,
    var(--rule) calc(100% - 48px), transparent) no-repeat top / 100% 1px;
  padding-top: 64px;
  padding-bottom: 96px;
}

h2 { font-size: 34px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.lede { font-size: 16px; color: var(--text-dim); max-width: 64ch; text-wrap: pretty; margin-top: var(--s-6); }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }

/* --- buttons: outlined, never filled --------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font); font-weight: 500; font-size: 14px; line-height: 1.2;
  padding: var(--s-2) calc(var(--s-3) * 1.2);
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--text);
  cursor: pointer; text-decoration: none;
}
.btn-primary { color: var(--accent); border-color: var(--accent); }
.btn-primary:hover  { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.btn-primary:active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.btn-secondary { border-color: var(--rule); }
.btn-secondary:hover  { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.btn-secondary:active { background: color-mix(in srgb, var(--text) 14%, transparent); }

/* --- nav ------------------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-6) 40px; max-width: 1100px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); margin-right: auto; color: var(--text); }
.brand:hover { color: var(--text); }
.brand svg { width: 17px; height: 17px; fill: var(--accent); }
.brand b { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.nav a.link { font-size: 14px; color: var(--text); }
.nav a.link:hover { color: var(--accent); }
.nav a.gh { color: var(--text-dim); }

/* --- hero ------------------------------------------------------------------ */
.hero { padding: 80px 40px 96px; max-width: 1100px; margin: 0 auto; }
.kicker { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-8); }
.kicker i { display: block; width: 22px; height: 1px; background: var(--accent); }
.kicker span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
h1 { font-size: 56px; line-height: 1.06; font-weight: 500; letter-spacing: -0.03em; max-width: 19ch; }
.tagline { font-size: 18px; line-height: 1.6; color: var(--text-muted); max-width: 62ch; text-wrap: pretty; margin: var(--s-8) 0 44px; }

/* --- the install block ----------------------------------------------------- */
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-md); margin-bottom: var(--s-4); }
.seg label { padding: 7px 12px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.seg label + label { border-left: 1px solid var(--rule); }
.seg input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.seg label:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.seg label:has(:checked) { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.seg label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }

.strip { display: flex; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
/* The command wraps rather than scrolling out of sight. The handoff asked for
   nowrap plus a horizontal scroll "so it stays copy-pasteable", but wrapping is
   visual only -- the copied string is one line either way -- and a command
   clipped at the right edge is a command the reader cannot check before running
   it. min-width: 0 because a flex item defaults to min-width auto, which would
   otherwise let a long command push the strip past the page. */
.strip .cmd {
  flex: 1;
  min-width: 0;
  padding: var(--s-4) var(--s-6);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-muted);
}
.strip .cmd .p { color: var(--accent-lit); user-select: none; margin-right: var(--s-3); }
.strip { align-items: stretch; }
.strip .copy { flex: none; align-self: stretch; border-radius: 0 var(--r-md) var(--r-md) 0; border: 0; border-left: 1px solid var(--hairline); color: var(--accent); }
.strip .copy:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Only the checked tab's command is shown. No JS required for the swap. */
.cmd[data-for] { display: none; }
.install:has(#t-macos:checked)   .cmd[data-for="macos"],
.install:has(#t-linux:checked)   .cmd[data-for="linux"],
.install:has(#t-windows:checked) .cmd[data-for="windows"],
.install:has(#t-docker:checked)  .cmd[data-for="docker"] { display: block; }

.after { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4); margin-top: var(--s-4); font-size: 13px; color: var(--text-dim); }
.after a { font-size: 12.5px; }
.facts { margin-top: var(--s-8); font-size: 12.5px; color: var(--text-faint); }
.facts s { text-decoration: none; color: var(--hairline); margin: 0 var(--s-3); }

/* --- two-column blocks ----------------------------------------------------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 940px; margin-top: 44px; }
.col h3.sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--s-4); }
.col p { font-size: 15px; line-height: 1.65; }

/* --- concept --------------------------------------------------------------- */
.concept { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 44px; }
.chead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.chead h3 { font-size: 21px; font-weight: 500; }
.chead .legend { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.closing { margin-top: var(--s-8); font-size: 14px; color: var(--text-dim); text-wrap: pretty; }

/* state: a panel. a panel reads as a record. */
.panel { background: var(--panel); border-radius: var(--r-lg); padding: var(--s-6) var(--s-8) var(--s-8); box-shadow: var(--e-1), inset 2px 0 0 var(--blocked); }
.panel .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
.panel .top .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.statusmark { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--blocked); }
.statusmark i { width: 8px; height: 8px; background: var(--blocked); transform: rotate(45deg); }
.field { margin-bottom: var(--s-6); }
.key { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: var(--s-2); }
.val { font-size: 14px; line-height: 1.6; color: #e4e7f5; text-wrap: pretty; }
.promoted { padding: var(--s-4) var(--s-6); border-radius: var(--r-md); background: var(--blocked-tint); margin-bottom: var(--s-6); }
.promoted .key { color: var(--blocked); }
.promoted .val { font-size: 15px; color: var(--text); }
.byline { font-size: 12px; color: var(--text-faint); }

/* worklog: a rail. a rail reads as a history. no card. */
.rail { padding-left: var(--s-3); background: linear-gradient(to bottom, transparent, var(--rule) 20px, var(--rule) calc(100% - 20px), transparent) no-repeat 6px 0 / 1px 100%; }
.entry { display: grid; grid-template-columns: 11px minmax(0, 1fr); gap: var(--s-6); padding-bottom: var(--s-8); }
.dot { width: 5px; height: 5px; border-radius: 50%; margin: 6px 0 0 3px; background: var(--text-ghost); }
.dot.moved { background: var(--accent-mid); }
.dot.blocked { width: 7px; height: 7px; border-radius: 0; background: var(--blocked); transform: rotate(45deg); margin-left: 2px; }
.ring { width: 11px; height: 11px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline); margin-top: 3px; }
.meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.meta .who { font-size: 12.5px; color: var(--text-muted); }
.meta .at { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-ghost); }
.chip { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--text) 6%, transparent); }
.chip.toblocked { background: var(--blocked-tint); }
.chip .arrow { color: var(--text-faint); margin: 0 2px; }
.chip .to-active { color: var(--accent-mid); }
.chip .to-blocked { color: var(--blocked); }
.tried { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin-top: var(--s-2); text-wrap: pretty; }
.outcome { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); margin-top: var(--s-2); text-wrap: pretty; }
.collapsed { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }

/* --- mcp ------------------------------------------------------------------- */
.mcp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 44px; }
pre.config { padding: var(--s-8); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); font-size: 13px; line-height: 1.75; color: var(--text-muted); overflow-x: auto; }
pre.config .k { color: var(--accent-lit); }
pre.config .s { color: #e4e7f5; }
.caps { list-style: none; }
.caps li { display: grid; grid-template-columns: 11px minmax(0, 1fr); gap: var(--s-4); font-size: 14px; color: var(--text-muted); margin-bottom: var(--s-4); }
.caps i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-mid); margin: 8px 0 0 3px; }
.cannot { margin-top: var(--s-8); padding: var(--s-6); border-radius: var(--r-md); background: var(--surface); }
.cannot h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blocked); margin-bottom: var(--s-4); }
.cannot p { font-size: 13.5px; color: var(--text-dim); text-wrap: pretty; }

/* --- quickstart ------------------------------------------------------------ */
.steps { display: flex; flex-direction: column; gap: 48px; max-width: 820px; margin-top: 44px; }
.step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.step .n { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.step h3 { font-size: 19px; font-weight: 500; margin-bottom: var(--s-3); }
.step p { font-size: 14.5px; color: var(--text-dim); max-width: 60ch; text-wrap: pretty; }
.step .strip { margin-top: var(--s-6); }
.step ul { margin-top: var(--s-6); font-size: 12.5px; color: var(--text-faint); }
.step ul li { margin-bottom: var(--s-2); text-wrap: pretty; }
.step .btns { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.note { margin-top: var(--s-6); font-size: 12.5px; color: var(--text-faint); text-wrap: pretty; }

/* --- absence --------------------------------------------------------------- */
.absence { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); max-width: 920px; margin-top: 44px; font-size: 14.5px; color: var(--text-faint); }
.absence s { text-decoration: none; color: var(--hairline); }
.oneuser { margin-top: 44px; font-size: 19px; line-height: 1.5; color: #e4e7f5; max-width: 52ch; text-wrap: pretty; }

/* --- footer ---------------------------------------------------------------- */
footer { background: linear-gradient(to right, transparent, var(--rule) 48px, var(--rule) calc(100% - 48px), transparent) no-repeat top / 100% 1px; padding: 44px 0 64px; }
.foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-8); }
.foot .fbrand { display: inline-flex; align-items: baseline; gap: var(--s-2); color: var(--text-dim); font-size: 16px; }
.foot .fbrand svg { width: 15px; height: 15px; fill: var(--text-dim); align-self: center; }
.foot a { font-size: 13px; color: var(--text-faint); }
.foot a:hover { color: var(--accent-lit); }
.foot .noanalytics { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--text-ghost); }

@media (max-width: 900px) {
  h1 { font-size: 40px; }
  /* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr), so the
     config block and the command strip -- both deliberately wider than the
     viewport and scrolling inside themselves -- would widen the whole page
     instead. */
  .two, .concept, .mcp { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  section { padding-bottom: 72px; }
}
@media (max-width: 620px) {
  h1 { font-size: 32px; }
  .wrap, .nav, .hero { padding-inline: 24px; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
fieldset.seg { margin: 0; padding: 0; }