/* Shared styling for every page of the site.

   The palette is taken from the product's own dark interface so a screenshot
   sits on the page without a visible seam between chrome and content. */

:root {
  --bg: #0b1117;
  --panel: #131c26;
  --panel-soft: #0f1720;
  --line: #1f2c3a;
  --text: #dce3ea;
  --muted: #8b9bad;
  --accent: #7ee787;
  --link: #79b8ff;
  --seed: #e3a008;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1080px;
}

* { box-sizing: border-box; }

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

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- site header and navigation ---- */

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 60px;
}

.wordmark {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

/* The menu sits beside the wordmark at the reading-start edge. Under
   dir="rtl" the flex row reverses on its own, so the Hebrew pages get the
   menu on the right without a second rule. */
.topbar nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
}

.topbar nav a:hover { color: var(--text); }
.topbar nav a[aria-current="page"] { color: var(--accent); }

/* Pushed to the far edge, opposite the menu, in either direction. */
.langswitch {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.langswitch a {
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 11px;
  white-space: nowrap;
}

.langswitch a:hover { color: var(--text); border-color: var(--muted); }
.langswitch a[aria-current="true"] { color: var(--text); border-color: var(--muted); }

/* ---- headline block ---- */

.hero { padding: 64px 0 30px; }

/* The questions the sheet opens with, and the answer under them. */
.answer {
  color: var(--accent);
  font-size: clamp(17px, 2.1vw, 20px);
  font-weight: 600;
  line-height: 1.45;
  max-width: 64ch;
  margin: 0 0 20px;
}

/* The one line that answers the questions above it. Larger than the rest of
   the answer, because on this page it carries the whole promise on its own. */
.answer-lead {
  font-size: clamp(20px, 2.7vw, 26px);
  margin-bottom: 4px;
}

/* Pictures follow the opening directly, with no heading between. */
.showcase {
  padding-top: 8px;
  border-top: 0;
}

/* ---- right-to-left pages ----
   The stylesheet is written with logical properties where direction
   matters, so these are the only places that need stating. */

[dir="rtl"] .cmd {
  direction: ltr;
  text-align: left;
}

[dir="rtl"] .chips { direction: rtl; }

[dir="rtl"] .notice,
[dir="rtl"] .try {
  border-left-width: 1px;
  border-right: 3px solid var(--accent);
}

h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.1;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.lede {
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--text);
  max-width: 60ch;
  margin: 0 0 28px;
}

.sub { color: var(--muted); max-width: 62ch; }

/* ---- terminal-styled command block ---- */

.cmd {
  font-family: var(--mono);
  font-size: 15px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 16px 18px;
  margin: 0 0 12px;
  overflow-x: auto;
  white-space: pre;
}

.cmd .prompt { color: var(--muted); user-select: none; }
.cmd .out { color: var(--muted); }

/* ---- content sections ---- */

section { padding: 44px 0; border-top: 1px solid var(--line); }

h2 {
  font-size: 26px;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

h3 { font-size: 19px; margin: 28px 0 8px; }

p { max-width: 68ch; }

a { color: var(--link); }

.muted { color: var(--muted); }

/* ---- side-by-side prose, so a section fills its width ----
   A single column of text down the left leaves the right half of a wide
   screen empty. Prose blocks that belong together sit beside each other
   instead, the way the printed one-pager sets them. */

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px 40px;
  align-items: start;
}

.duo p,
.cols p,
.card p { max-width: none; }

.duo h3 { margin-top: 0; }

/* ---- two-column grid used for capability lists ---- */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 22px;
}

.card h3 { margin-top: 0; }
.card p { margin-bottom: 0; }

/* ---- language and framework chips ---- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }

.chips li {
  font-family: var(--mono);
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--text);
  background: var(--panel);
}

/* ---- slideshow ----
   Slides stack in the document and one is shown at a time. Without
   JavaScript every slide stays visible, so the page still reads as a
   captioned list of pictures. */

.slides { margin: 0; }

.slides figure {
  margin: 0 0 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-soft);
}

.slides img { display: block; width: 100%; height: auto; }

.slides figcaption {
  padding: 14px 18px;
  font-size: 15px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.slides figcaption b { color: var(--text); font-weight: 600; }

/* ---- an embedded interactive page ----
   Wider than the text column: the embedded page lays itself out in two
   columns up to 1180px and stacks them below 960px, so it is given its own
   natural width, centred, rather than squeezed into the reading width. The
   height is a floor for when the embedded page cannot be measured; embed.js
   replaces it with the page's real height wherever it can read it. */
.demo {
  width: min(1180px, calc(100vw - 48px));
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-soft);
}

.demo iframe {
  display: block;
  width: 100%;
  height: 1100px;
  border: 0;
  background: var(--bg);
}

.demo figcaption {
  padding: 14px 18px;
  font-size: 15px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.demo figcaption b { color: var(--text); font-weight: 600; }

[dir="rtl"] .demo { left: auto; right: 50%; transform: translateX(50%); }

/* Applied by script once slide navigation is available. */
.slides.is-live figure { display: none; margin-bottom: 0; }
.slides.is-live figure.on { display: block; }

.slidenav {
  display: none;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
}

.slides.is-live + .slidenav { display: flex; }

.slidenav button {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
}

.slidenav button:hover { border-color: var(--muted); }

.dots { display: flex; gap: 8px; margin-left: auto; }

.dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
}

.dots button[aria-current="true"] { background: var(--accent); border-color: var(--accent); }

/* ---- banner marking unbuilt or illustrative material ---- */

.notice {
  border: 1px solid var(--seed);
  border-left-width: 3px;
  border-radius: 6px;
  background: rgba(227, 160, 8, 0.07);
  padding: 16px 18px;
  margin: 0 0 26px;
}

.notice b { color: var(--seed); }
.notice p { margin: 6px 0 0; max-width: 68ch; }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seed);
  border: 1px solid var(--seed);
  border-radius: 3px;
  padding: 2px 7px;
  vertical-align: middle;
}

/* A feature that runs but is not public yet. Green, not amber: this is an
   invitation to try something, not a warning about something broken. */
.tag.testing { color: var(--accent); border-color: var(--accent); }

/* The standing invitation that rides every in-testing feature. */
.try {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  padding: 18px 20px;
  margin: 26px 0 0;
}

.try p { margin: 0; max-width: none; }
.try b { color: var(--accent); }

/* Placeholder standing in for a capture that has not been taken. */
.pending {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 24px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  background: repeating-linear-gradient(
    45deg, var(--panel-soft), var(--panel-soft) 12px, var(--panel) 12px, var(--panel) 24px
  );
}

/* ---- contact and footer ---- */

.contact {
  font-size: 19px;
  font-family: var(--mono);
}

footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 60px;
  color: var(--muted);
  font-size: 14px;
}

footer a { color: var(--muted); }