/* The colour and type values mirror the product's own tokens (packages/ui/src/tokens.css). Light only. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-hover: #f1f0ef;
  --fg: #2c2c2b;
  --fg-muted: #5f5e5a;
  --fg-secondary: #8e8b86;
  --border: #e6e5e3;
  --inverse: #2c2c2b;
  --inverse-hover: #1a1a19;
  --on-inverse: #ffffff;
  --accent: #2383e2;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
  --mono: "SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace;
  --radius: 10px;
  --header: 56px;
  --gutter: 32px;
  --measure: none;
  --frame-margin: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; }
code { font: 0.92em var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The top line */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header);
  padding: 0 var(--gutter);
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.mark img { border-radius: 6px; }
.top-nav { display: flex; align-items: center; gap: 24px; }
.top-nav a { font-size: 15px; color: var(--fg-muted); text-decoration: none; }
.top-nav a:hover, .top-nav a[aria-current] { color: var(--fg); }

/* The one control */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 24px;
  border-radius: var(--radius);
  background: var(--inverse);
  color: var(--on-inverse) !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.button:hover { background: var(--inverse-hover); }
.button.small { height: 34px; padding: 0 14px; border-radius: 8px; font-size: 14px; }

/* The one screen: the pitch on the left, the application on the right */
.hero {
  display: grid;
  grid-template-columns: minmax(250px, 17rem) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  height: calc(100svh - var(--header));
  padding: 0 0 0 var(--gutter);
}
.pitch h1 {
  margin: 0;
  font-size: clamp(30px, 2.5vw, 38px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lead {
  margin: 16px 0 0;
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.cta { margin: 24px 0 0; }

/* The faces of the application: a column of buttons, each with its glyph and its name */
.facets {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 32px 0 0;
  max-width: 17rem;
}
.facet {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 42px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.facet:hover { background: #f7f7f5; color: var(--fg); }
.facet[aria-selected="true"] {
  background: var(--bg-hover);
  border-color: #d5d3cf;
  color: var(--fg);
  box-shadow: none;
}
.facet-icon { width: 18px; height: 18px; flex: none; }

/* The application: as tall as the window allows, and free to run off the right edge */
.frames { display: grid; min-width: 0; height: calc(100svh - var(--header)); align-items: center; }
.frame {
  grid-area: 1 / 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  transition: opacity 0.25s ease;
}
.frame[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
.frame img {
  height: calc(100svh - var(--header) - 2 * var(--frame-margin));
  width: auto;
  max-width: none;
  flex: none;
}

/* The versions page */
.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.doc h1 { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -0.022em; }
.doc .lead { margin: 12px 0 28px; max-width: none; font-size: 17px; }
.release { padding: 28px 0 8px; border-top: 1px solid var(--border); }
.release-head { display: flex; align-items: baseline; gap: 14px; }
.release-head h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.015em; }
.release-head h2 a { text-decoration: none; }
.release-head time { font-size: 14px; color: var(--fg-secondary); }
.release .get { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; }
.release .get .fine { font-size: 14px; color: var(--fg-secondary); }
.release .body { margin-top: 16px; }
.release .body p { margin: 0 0 12px; }
.release .body h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 600; }
.release .body ol, .release .body ul { margin: 0 0 12px; padding-left: 26px; }
.release .body li { margin: 6px 0; }
.release .body strong { font-weight: 600; }
.install { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.install h2 { margin: 0 0 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.015em; }
.install ol { padding-left: 26px; }
.install li { margin: 6px 0; }
.foot {
  display: flex;
  gap: 24px;
  max-width: 720px;
  margin: 48px auto 0;
  padding: 0 24px;
  font-size: 13px;
  color: var(--fg-secondary);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--fg); }

/* Narrower windows: the pitch above the application, and the page may scroll */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .hero { gap: 32px; grid-template-columns: minmax(240px, 16rem) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; --header: 56px; }
  body { overflow-x: visible; }
  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    height: auto;
    min-height: 0;
    padding: 16px var(--gutter) 40px;
  }
  .pitch h1 { font-size: clamp(32px, 8vw, 40px); }
  .lead { font-size: 17px; max-width: none; }
  .facets { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 24px; max-width: none; }
  .frames { height: auto; }
  .frame img { height: auto; width: 100%; max-width: 100%; }
  .top-nav { gap: 14px; }
  .release-head { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .frame, .facet, .button { transition: none; }
}