/* JetBrains Mono, served from this site (SIL Open Font License 1.1: fonts/jetbrains-mono/OFL.txt).
   A variable font: each file covers weights 300 to 600 for one range of characters. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono/jetbrains-mono-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono/jetbrains-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono/jetbrains-mono-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono/jetbrains-mono-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --bg: #030308;
  --surface: #15151d;
  --surface-raised: #1b1b25;
  --editor: #0f0f15;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  --text: #ededf2;
  --muted: #a1a1b3;
  --faint: #7c7c8f;
  --accent: #8b75ff;
  --accent-soft: rgba(139, 117, 255, 0.14);
  --green: #66d9a6;
  --green-soft: rgba(102, 217, 166, 0.12);

  --tok-kw: #a998ff;
  --tok-type: #b9c6ff;
  --tok-str: #66d9a6;
  --tok-num: #e2bd7a;
  --tok-fn: #ededf2;
  --tok-com: #737387;

  --sans: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --radius: 14px;
  --header: 100px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 30;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

.skip-link:focus { top: 12px; }

/* Typography */

h1, h2, h3 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); text-wrap: balance; }
h3 { font-size: 1.1rem; letter-spacing: -0.01em; line-height: 1.3; }

.eyebrow {
  margin-bottom: 16px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead {
  max-width: 38em;
  margin-top: 18px;
  color: var(--muted);
  font-size: 1.08rem;
}

.note {
  margin-top: 20px;
  color: var(--faint);
  font-size: 0.9rem;
}

code { font-family: var(--mono); font-size: 0.9em; }

:not(pre) > code {
  padding: 0.12em 0.4em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

/* Buttons and chips */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(150, 150, 210, 0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, transform 0.18s;
}

.btn:hover { background: rgba(150, 150, 210, 0.4); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  border-color: #fff;
  background: #fff;
  color: #0a0a12;
}

.btn--primary:hover { border-color: #e6e6f2; background: #e6e6f2; }
.btn--sm { padding: 9px 16px; font-size: 0.9rem; }

/* A white disc with an arrow sits inset on the left; on hover it grows left to right until it fills the button. */
.btn--fill {
  --disc: 34px;
  --inset: 5px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: calc(var(--disc) + 2 * var(--inset) + 2px);
  padding: 0 26px 0 calc(var(--disc) + var(--inset) + 12px);
  transition: background-color 0.18s, transform 0.18s, border-color 0.5s;
}

/* The white layer carries its own dark copy of the label (data-label), so the text
   changes colour exactly where the fill has reached it. */
.btn--fill::before {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  background: #fff;
  color: #0a0a12;
  clip-path: inset(var(--inset) calc(100% - var(--disc) - var(--inset)) var(--inset) var(--inset) round 999px);
  transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.2, 1);
}

.btn--fill::after {
  content: "";
  position: absolute;
  left: var(--inset);
  top: var(--inset);
  width: var(--disc);
  height: var(--disc);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a0a12' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1);
}

.btn--fill:hover, .btn--fill:focus-visible, .btn--fill:active { border-color: #fff; }

.btn--fill:hover::before, .btn--fill:focus-visible::before, .btn--fill:active::before {
  clip-path: inset(0 0 0 0 round 999px);
}

.btn--fill:hover::after, .btn--fill:focus-visible::after, .btn--fill:active::after { transform: translateX(3px); }
.btn:disabled { opacity: 0.6; cursor: default; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  white-space: nowrap;
}

.chip--in-progress { border-color: rgba(102, 217, 166, 0.35); background: var(--green-soft); color: var(--green); }
.chip--dot { white-space: normal; }
.chip--in-progress::before, .chip--dot::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.chip--experimental { border-color: rgba(139, 117, 255, 0.4); background: var(--accent-soft); color: #c2b6ff; }

/* Header: a floating rounded bar that shrinks once the page is scrolled (site-header.js sets .is-scrolled). */

.site-header {
  --shrink: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  position: sticky;
  top: 0;
  z-index: 20;
  /* Fixed height: the bar shrinks inside it, so the page below never moves. */
  height: var(--header);
  padding: 16px 20px 0;
  pointer-events: none;
  transition: padding var(--shrink);
}

/* The bar is at least 1280px wide and grows when its contents need more room (longer labels, as in
   a translated page), so the links never press against the actions. When even the whole width is
   not enough, site-header.js folds the links into the menu (.nav-collapsed, below). */
.site-header__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 56px;
  width: fit-content;
  min-width: min(1280px, 100%);
  max-width: 100%;
  min-height: 78px;
  padding-inline: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 40px;
  background: rgba(16, 16, 24, 0.55);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9);
  pointer-events: auto;
  transition:
    min-width var(--shrink),
    min-height var(--shrink),
    padding var(--shrink),
    column-gap var(--shrink),
    background-color var(--shrink),
    border-color var(--shrink),
    box-shadow var(--shrink);
}

.site-header.is-scrolled { padding-top: 10px; }

.site-header.is-scrolled .site-header__row {
  /* Wide enough for the side columns to stay equal: the links remain centred and the
     actions keep their distance from the last link. */
  min-width: min(1120px, 100%);
  min-height: 56px;
  padding-inline: 24px;
  column-gap: 44px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(16, 16, 24, 0.84);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.95), 0 0 60px -30px rgba(139, 117, 255, 0.5);
}

.is-scrolled .site-nav__links { gap: 26px; }
.is-scrolled .nav-link { font-size: 0.94rem; }
.is-scrolled .site-nav__actions, .is-scrolled .site-nav__session { gap: 18px; }
.is-scrolled .pill { padding-block: 5px; }
.is-scrolled .brand__mark { width: 19px; height: 19px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* Wordmark: a thin band of light crosses the letters once on load and again on hover. */
.brand > span {
  background: linear-gradient(100deg, var(--text) 42%, #fff 48%, #b5a6ff 52%, var(--text) 58%) 100% 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.site-header .brand > span { animation: brand-sheen 1.3s cubic-bezier(0.4, 0, 0.2, 1) 0.5s backwards; }

/* The band only travels on the way in; on leave it resets out of sight. */
.brand:hover > span { background-position: 0 0; transition: background-position 1s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes brand-sheen {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.brand__mark {
  width: 22px;
  height: 22px;
  /* In the header the mark turns with the scroll position (site-header.js sets --brand-spin) and eases to a stop. */
  transform: rotate(var(--brand-spin, 0deg));
  transition: width var(--shrink, 0s), height var(--shrink, 0s), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The diamond is symmetric, so a quarter turn lands on the same shape. */
.brand:hover .brand__mark { transform: rotate(calc(var(--brand-spin, 0deg) + 90deg)); }
.brand__mark path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.brand__mark .brand__core { fill: var(--accent); stroke: none; }

/* On desktop the nav's two groups sit directly in the header grid: links centred, actions right. */
.site-nav { display: contents; }

.site-nav__links { position: relative; isolation: isolate; display: flex; gap: 36px; transition: gap var(--shrink); }

/* Highlight that slides under the link being hovered or focused (site-header.js sets --hl-x and --hl-w). */
.site-nav__links::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1;
  width: var(--hl-w, 0);
  height: 38px;
  border: 1px solid rgba(139, 117, 255, 0.45);
  border-radius: 999px;
  background: var(--accent-soft);
  opacity: 0;
  transform: translate(var(--hl-x, 0), -50%) scale(0.92);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    height var(--shrink),
    opacity 0.2s;
  pointer-events: none;
}

.site-nav__links.has-highlight::before { opacity: 1; transform: translate(var(--hl-x, 0), -50%); }
.site-nav__links.is-jumping::before { transition: none; }
.is-scrolled .site-nav__links::before { height: 32px; }

/* The other links step back so the current one stands out. */
.site-nav__links.has-highlight .nav-link { color: var(--faint); }
.site-nav__links .nav-link:hover, .site-nav__links .nav-link.is-highlighted { color: #fff; }

.nav-link {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, font-size var(--shrink, 0s);
}

.nav-link:hover { color: var(--muted); }
.nav-link[aria-current="page"] { color: #b5a6ff; }

/* Outline of the documentation, shown while "Documentation" is hovered or focused.
   It hangs from the link list (not the item) so the links keep the list as their offset parent. */
.nav-menu {
  position: absolute;
  right: -28px;
  top: 100%;
  width: 480px;
  /* Transparent bridge down to the edge of the bar, so the pointer can travel to the panel. */
  padding-top: 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease 0.1s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, visibility 0s 0.3s, padding var(--shrink);
}

.is-scrolled .nav-menu { padding-top: 28px; }

/* .is-open is set by site-header.js when the link is clicked, so the outline also works without a pointer. */
.nav-item--menu:is(:hover, :focus-within, .is-open) .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Set by site-header.js right after a section is chosen: stays closed until the pointer leaves. */
.nav-item--menu.is-dismissed .nav-menu { opacity: 0; visibility: hidden; transition: none; }

.nav-menu__panel {
  padding: 16px 16px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: #101018;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
}

/* The outline is drawn as a tree: a root node, a trunk running down from it and one branch per section.
   --trunk is the x of the trunk (the centre of the root node) and --branch the y where each branch leaves it. */
.nav-menu__panel { --trunk: 15px; --branch: 23px; --tree-line: rgba(255, 255, 255, 0.32); }

.nav-menu__root {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
  font-weight: 600;
}

.nav-menu__root::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
  transform: rotate(45deg);
}

.nav-menu__list { position: relative; margin-left: var(--trunk); padding-top: 6px; }

/* Trunk: from the root node down to the first section, then one segment beside each section. */
.nav-menu__list::before, .nav-menu__list li::before {
  content: "";
  position: absolute;
  left: 0;
  border-left: 1px solid var(--tree-line);
}

.nav-menu__list::before { top: -9px; height: 15px; }
.nav-menu__list li::before { top: 0; bottom: 0; }

.nav-menu__list li {
  position: relative;
  padding-left: 28px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Branch from the trunk to the section. */
.nav-menu__list li::after {
  content: "";
  position: absolute;
  left: 0;
  top: var(--branch);
  width: 18px;
  border-top: 1px solid var(--tree-line);
  transition: border-color 0.15s;
}

/* The last section closes the trunk with a rounded elbow instead of a T. */
.nav-menu__list li:last-child::before {
  bottom: auto;
  width: 18px;
  height: var(--branch);
  border-bottom: 1px solid var(--tree-line);
  border-bottom-left-radius: 9px;
  transition: border-bottom-color 0.15s;
}

.nav-menu__list li:last-child::after { display: none; }

.nav-menu__list a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background-color 0.15s;
}

/* Node where the branch meets the section. */
.nav-menu__list a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: calc(var(--branch) - 2.5px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #101018;
  box-shadow: 0 0 0 1px var(--tree-line);
  transition: background-color 0.15s, box-shadow 0.15s;
}

.nav-menu__list a:hover, .nav-menu__list a:focus-visible { background: rgba(255, 255, 255, 0.06); }
.nav-menu__list a:hover::before, .nav-menu__list a:focus-visible::before { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.nav-menu__list li:hover::after { border-top-color: var(--accent); }
.nav-menu__list li:last-child:hover::before { border-bottom-color: var(--accent); }

.nav-menu__list span { grid-row: span 2; padding-top: 3px; color: var(--accent); font-family: var(--mono); font-size: 0.74rem; }
.nav-menu__list strong { font-size: 0.95rem; font-weight: 500; }
.nav-menu__list small { color: var(--muted); font-size: 0.84rem; line-height: 1.4; }

/* The section being read stays marked in the outline (docs-pages.js sets aria-current). */
.nav-menu__list a[aria-current] { background: var(--accent-soft); }
.nav-menu__list a[aria-current]::before { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.nav-menu__list a[aria-current] strong { color: var(--text); }
.nav-menu__list li:has(a[aria-current])::after { border-top-color: var(--accent); }

/* The language guide sits under the documentation tree, its sections laid out in rows of three. */
.nav-menu__tree + .nav-menu__tree { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.nav-menu__list--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: 0; }
.nav-menu__list--grid::before,
.nav-menu__list--grid li::before,
.nav-menu__list--grid li::after,
.nav-menu__list--grid a::before { display: none; }
.nav-menu__list--grid li { padding-left: 0; }
.nav-menu__list--grid a { gap: 0 8px; padding: 8px 10px; }
.nav-menu__list--grid span { grid-row: auto; }
.nav-menu__list--grid strong { font-size: 0.9rem; white-space: nowrap; }

/* The branches come in one after another when the menu opens. */
.nav-item--menu:is(:hover, :focus-within, .is-open) .nav-menu__list li { opacity: 1; transform: none; }
.nav-item--menu:is(:hover, :focus-within, .is-open) .nav-menu__list li:nth-child(1) { transition-delay: 0.05s; }
.nav-item--menu:is(:hover, :focus-within, .is-open) .nav-menu__list li:nth-child(2) { transition-delay: 0.1s; }
.nav-item--menu:is(:hover, :focus-within, .is-open) .nav-menu__list li:nth-child(3) { transition-delay: 0.15s; }
.nav-item--menu:is(:hover, :focus-within, .is-open) .nav-menu__list li:nth-child(4) { transition-delay: 0.2s; }
.nav-item--menu:is(:hover, :focus-within, .is-open) .nav-menu__list li:nth-child(5) { transition-delay: 0.25s; }
.nav-item--menu:is(:hover, :focus-within, .is-open) .nav-menu__list li:nth-child(6) { transition-delay: 0.3s; }
.nav-item--menu:is(:hover, :focus-within, .is-open) .nav-menu__list li:nth-child(7) { transition-delay: 0.35s; }
.nav-item--menu:is(:hover, :focus-within, .is-open) .nav-menu__list li:nth-child(8) { transition-delay: 0.4s; }

.site-nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 28px; transition: gap var(--shrink); }
.site-nav__session { display: flex; align-items: center; gap: 28px; transition: gap var(--shrink); }
.nav-user { font-weight: 500; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  border: 1px solid #3a3a4a;
  border-radius: 999px;
  background: #15151d;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, padding var(--shrink, 0s);
}

.pill:hover { border-color: #6a6a80; }

/* Sign-up pill with a provider shortcut in front of the label: each logo is its own link. */
.pill--providers {
  --signup-border-angle: 0deg;
  position: relative;
  isolation: isolate;
  gap: 6px;
  padding-left: 10px;
  border-color: transparent;
  background: transparent;
  cursor: default;
}

/* A restrained violet/blue light travels around the outline, matching the landing's glow. */
@property --signup-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.pill--providers::before,
.pill--providers::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.pill--providers::before {
  z-index: -2;
  inset: -1px;
  background: conic-gradient(
    from var(--signup-border-angle),
    rgba(139, 117, 255, 0.14) 0deg,
    rgba(139, 117, 255, 0.14) 205deg,
    #8b75ff 255deg,
    #a99aff 278deg,
    #6e7cff 300deg,
    rgba(139, 117, 255, 0.14) 332deg,
    rgba(139, 117, 255, 0.14) 360deg
  );
  animation: signup-border-orbit 5.5s linear infinite;
}

.pill--providers::after {
  z-index: -1;
  inset: 1px;
  background: #15151d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.pill--providers:hover::before {
  filter: brightness(1.2);
}

.pill--providers:hover {
  border-color: transparent;
}

.pill--providers > * {
  position: relative;
  z-index: 1;
}

@keyframes signup-border-orbit {
  to { --signup-border-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .pill--providers::before { animation: none; }
}

.pill__provider {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transition: background-color 0.15s;
}

.pill__provider:hover { background: rgba(255, 255, 255, 0.14); }
.pill__provider svg { width: 16px; height: 16px; }
.pill__label { display: inline-flex; align-items: center; gap: 10px; margin-left: 4px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }

/* Hero */

.hero {
  position: relative;
  padding-top: clamp(56px, 11vh, 128px);
  overflow: hidden;
  text-align: center;
}

.hero__content { position: relative; z-index: 2; }

.hero__kicker {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  margin-top: 14px;
  /* JetBrains Mono is wider than a proportional font: this size keeps the title on one line on a
     desktop screen, so the install window below stays in the first screen. */
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-wrap: balance;
}

.hero h1 span { font-weight: 300; }

.hero__lead {
  max-width: 54rem;
  margin: 22px auto 0;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.55;
  text-wrap: balance;
}

.hero__note { margin-top: 12px; color: var(--muted); font-size: 0.9rem; }

/* What the last version added, as a link to the guide: one line, so the install window stays in the first screen. */
.hero__news {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 14px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.hero__news:hover, .hero__news:focus-visible { color: var(--text); border-color: rgba(102, 217, 166, 0.45); }
.hero__news code { font-size: 0.85em; }

.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.actions--center { justify-content: center; }

/* Hero stage: glowing dome and the install window */

.hero__stage {
  position: relative;
  margin-top: 4px;
  padding: clamp(48px, 5vw, 96px) 16px clamp(80px, 10vw, 160px);
}

.orb {
  position: absolute;
  left: 50%;
  top: 0;
  width: 132%;
  min-width: 900px;
  aspect-ratio: 2 / 1.15;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse 62% 58% at 50% 6%,
    rgba(150, 150, 200, 0.92) 0%,
    rgba(112, 116, 214, 0.95) 26%,
    #4a3fe6 52%,
    #2a1bb8 74%,
    #160c6e 100%
  );
  filter: blur(34px);
}

/* Platforms badge, bottom right of the first screen (the hero starts under the header), so it is
   visible without scrolling; on a hero shorter than the screen it stays inside the hero.
   Only Windows 11 has been tested: the others are dimmed. */

.platforms {
  position: absolute;
  top: min(calc(100svh - var(--header) - 64px), calc(100% - 64px));
  right: clamp(16px, 4vw, 56px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px 7px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(3, 3, 8, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.platforms__label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.platforms__list {
  display: flex;
  gap: 12px;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--line-strong);
  list-style: none;
}

.platforms__item { position: relative; display: grid; color: var(--text); }
.platforms__item svg { width: 16px; height: 16px; fill: currentColor; transition: opacity 0.2s; }
.platforms__item.is-untested svg { opacity: 0.35; }
.platforms__item.is-untested:hover svg { opacity: 0.7; }

.platforms__item::after {
  content: attr(data-tip);
  position: absolute;
  right: -8px;
  bottom: calc(100% + 12px);
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.68rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}

.platforms__item:hover::after { opacity: 1; transform: none; }

/* Positioning statement under the hero */

.statement { padding: 88px 0; border-top: 1px solid var(--line); text-align: center; }

.statement p {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-wrap: balance;
}

.statement span { display: block; }
.statement__not { color: var(--faint); font-weight: 300; }
.statement__is { margin-top: 10px; font-weight: 500; }
.statement__is em { color: #b5a6ff; font-style: normal; }

/* Editor window */

.window {
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--editor);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 70px -30px rgba(139, 117, 255, 0.35);
  overflow: hidden;
}

.window__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.window__dots { display: flex; flex: none; gap: 7px; }
.window__dots i { width: 10px; height: 10px; border-radius: 50%; background: #2c2c3a; }

.window__tabs {
  display: flex;
  flex: 1;
  align-self: stretch;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.window__tabs::-webkit-scrollbar { display: none; }

.window__tab {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.8rem;
  white-space: nowrap;
}

button.window__tab { cursor: pointer; }

.window__tab-icon { flex: none; width: 14px; height: 14px; margin-right: 8px; border-radius: 2px; }
button.window__tab:hover { color: var(--text); }
button.window__tab:focus-visible { outline-offset: -3px; }

.window__tab.is-active,
.window__tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text); }

/* Sliding underline (code-window.js sets --ind-x and --ind-w). Without JavaScript the tabs keep their own border. */
.js .window__tabs--slide { position: relative; }
.js .window__tabs--slide .window__tab[aria-selected="true"] { border-bottom-color: transparent; }

.js .window__tabs--slide::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--ind-w, 0);
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(139, 117, 255, 0.7);
  transform: translateX(var(--ind-x, 0));
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .window__tabs--slide.is-jumping::after { transition: none; }

/* The newly shown command fades in. */
.install__window [role="tabpanel"]:not([hidden]) { animation: panel-in 0.32s ease-out; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(4px); }
}

.window__flag { margin-left: auto; }

.copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.copy:hover { border-color: rgba(255, 255, 255, 0.32); color: var(--text); }
.copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

.code {
  margin: 0;
  padding: 20px 20px 22px;
  overflow-x: auto;
  counter-reset: line;
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.75;
  tab-size: 4;
}

.code code { font-size: inherit; }

.line {
  display: block;
  position: relative;
  min-height: 1.75em;
  padding-left: 3.4em;
  counter-increment: line;
}

.line::before {
  content: counter(line);
  position: absolute;
  left: 0;
  width: 2em;
  color: #54546a;
  text-align: right;
  user-select: none;
}

.window__status {
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.74rem;
}

.tok-kw { color: var(--tok-kw); }
.tok-type { color: var(--tok-type); }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-fn { color: var(--tok-fn); }
.tok-com { color: var(--tok-com); font-style: italic; }

/* Sections */

.section { padding: 112px 0; border-top: 1px solid var(--line); }
.section__head { max-width: 46rem; }

/* Vision */

.goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 64px;
  border-top: 1px solid var(--line);
}

.goal { padding: 32px 32px 8px 0; }
.goal + .goal { padding-left: 32px; border-left: 1px solid var(--line); }

.goal__index { color: var(--faint); font-family: var(--mono); font-size: 0.8rem; }
.goal h3 { margin-top: 20px; font-size: 1.3rem; }
.goal p { margin-top: 12px; color: var(--muted); }
.goal .chip { margin-top: 18px; }

/* Code section */

.code-section__window { margin-top: 48px; }
.code-section__window .code { min-height: 19.5em; }

/* Install */

.install__window {
  position: relative;
  width: min(640px, 100%);
  margin: 0 auto;
  text-align: left;
  scroll-margin-top: calc(var(--header) + 24px);
}
.install__window .code { min-height: 6.6em; }

/* Shell commands get a prompt instead of line numbers; it is not part of what gets copied. */
code[data-lang="sh"] .line { padding-left: 1.4em; }
code[data-lang="sh"] .line::before { content: "$"; width: auto; color: var(--accent); text-align: left; }

.install__hint {
  position: relative;
  padding: 10px 20px 10px 44px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.85rem;
}

/* Info sign in the accent colour (an SVG mask, so it takes the colour from the background). */
.install__hint::before {
  content: "";
  position: absolute;
  left: 20px;
  top: calc(10px + 0.75em - 8px);
  width: 16px;
  height: 16px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm0 3.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7h2v5.5H7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm0 3.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM7 7h2v5.5H7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ecosystem areas */

.areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}

.area {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  padding: 32px;
  background: var(--bg);
  transition: background-color 0.2s;
}

.area:hover { background: #0e0e13; }

.area__icon {
  display: grid;
  grid-row: span 3;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
}

.area__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.area h3 { align-self: center; }
.area p { color: var(--muted); font-size: 0.97rem; }
.area .chip { justify-self: start; margin-top: 10px; }

/* Playground */

.playground-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
}

.checklist { margin-top: 28px; }

.checklist li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.97rem;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.35em;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--accent);
  transform: rotate(45deg);
}

.playground__panes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.playground__editor { min-width: 0; }
.playground__output { padding: 18px 20px; border-left: 1px solid var(--line); background: #0c0c11; }

.playground__label {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.playground__message { margin-top: 12px; color: var(--muted); font-size: 0.88rem; line-height: 1.6; }
.playground__message--result { color: var(--text); font-family: var(--mono); white-space: pre-wrap; }

.playground__input {
  display: block;
  width: 100%;
  min-height: 12em;
  padding: 20px;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.75;
  resize: vertical;
}

/* Roadmap */

.roadmap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 64px;
}

.phase {
  position: relative;
  padding: 36px 24px 0 0;
  border-top: 1px solid var(--line-strong);
}

.phase::before {
  content: "";
  position: absolute;
  left: 0;
  top: -6px;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--faint);
  border-radius: 50%;
  background: var(--bg);
}

.phase--in-progress::before {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 0 5px var(--green-soft);
}

.phase--done::before { border-color: var(--accent); background: var(--accent); }

.phase__number { color: var(--faint); font-family: var(--mono); font-size: 0.76rem; }
.phase h3 { margin-top: 10px; }
.phase p { margin-top: 8px; color: var(--muted); font-size: 0.94rem; }
.phase .chip { margin-top: 16px; }
.phase--planned h3 { color: #c9c9d6; }

/* Call to action */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 44px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: radial-gradient(520px circle at 100% 0%, rgba(139, 117, 255, 0.12), transparent 70%), var(--surface);
}

.cta p { max-width: 34em; margin-top: 10px; color: var(--muted); }
.cta .actions { margin-top: 0; }

/* Footer */

.site-footer { padding: 64px 0 40px; border-top: 1px solid var(--line); }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.site-footer__about { max-width: 26em; margin-top: 16px; color: var(--muted); font-size: 0.94rem; }

.site-footer__title {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer__links { margin-top: 14px; }
.site-footer__links li + li { margin-top: 8px; }
.site-footer__links a { color: var(--muted); font-size: 0.94rem; }
.site-footer__links a:hover { color: var(--text); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.86rem;
}

/* Legal links: in the footer of every page, with the button that reopens the cookie preferences. */

.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legal-links a,
.legal-links button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.legal-links a:hover,
.legal-links button:hover { color: var(--text); }
.legal-links [aria-current="page"] { color: var(--text); }

.pg-foot .pg-foot__legal { flex: 1 1 100%; justify-content: center; }
.pg-foot .pg-foot__legal a { text-decoration: none; }

.auth-page .legal-foot { padding-top: 18px; text-align: center; }
.auth-page .legal-links { justify-content: center; }

.legal-foot {
  padding: 24px 0 32px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.86rem;
}

/* Documentation page */

.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; padding-block: 72px 112px; }

.docs__toc { position: sticky; top: calc(var(--header) + 32px); align-self: start; }
.docs__toc ol { margin-top: 14px; border-left: 1px solid var(--line); }
.docs__toc a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 1px solid transparent; color: var(--muted); font-size: 0.92rem; }
.docs__toc a:hover { color: var(--text); }
.docs__toc a[aria-current] { border-left-color: var(--accent); color: var(--text); }

.docs__article { max-width: 46rem; }
.docs__article h1 { font-size: clamp(2.2rem, 4.5vw, 3.1rem); letter-spacing: -0.035em; }
.docs__article > section { margin-top: 72px; }
.docs__article h2 { font-size: 1.6rem; }
.docs__article h3 { margin-top: 28px; }
.docs__article p { margin-top: 16px; color: var(--muted); }
.docs__article strong { color: var(--text); font-weight: 600; }
.docs__article a:not(.btn) { color: #b5a6ff; text-decoration: underline; text-underline-offset: 3px; }
.docs__article .window { margin-top: 24px; box-shadow: none; }
.docs__article .roadmap { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; }
.docs__article .phase { padding: 0 0 32px 30px; border-top: 0; border-left: 1px solid var(--line-strong); }
.docs__article .phase::before { left: -6px; top: 4px; }
.docs__article .phase:last-child { padding-bottom: 0; }
.docs__article .phase h3 { margin-top: 6px; }
.docs__article .phase p { margin-top: 6px; }

/* In the documentation each phase also lists what is available today and what comes next. */
.phase__details {
  display: grid;
  gap: 18px;
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.docs__article .phase__group h4 {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.phase__list { margin-top: 10px; }
.phase__list li { position: relative; padding-left: 20px; color: var(--muted); font-size: 0.94rem; }
.phase__list li + li { margin-top: 8px; }

/* A filled dot for what exists, a hollow one for what is still to come. */
.phase__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.phase__group--available .phase__list li::before { background: var(--green); }
.phase__group--next .phase__list li::before { border: 1.5px solid var(--faint); }

.callout {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid rgba(139, 117, 255, 0.3);
  border-radius: 12px;
  background: var(--accent-soft);
}

.docs__article .callout p { margin-top: 0; color: #d6cfff; }

.status-list { margin-top: 24px; border-top: 1px solid var(--line); }

.status-list > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.status-list dt { padding-top: 2px; }
.status-list dd { margin: 0; color: var(--muted); }
.status-list li + li { margin-top: 6px; }

.bullets { margin-top: 16px; }
.bullets li { position: relative; padding-left: 20px; color: var(--muted); }
.bullets li + li { margin-top: 8px; }
.bullets li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Two columns that set the project against what it is not. */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.compare__col {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.compare__title {
  margin-top: 0;
  color: var(--faint);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compare__col ul { margin-top: 16px; }
.compare__col li { position: relative; padding-left: 22px; color: var(--muted); font-size: 0.95rem; }
.compare__col li + li { margin-top: 10px; }
.compare__col li::before { position: absolute; left: 0; top: 0; font-family: var(--mono); }
.compare__col--not li::before { content: "\00d7"; color: var(--faint); }
.compare__col--is li::before { content: "+"; color: var(--green); }

/* The steps a program goes through, in order. */
.pipeline { margin-top: 24px; border-top: 1px solid var(--line); counter-reset: step; }

.pipeline > li {
  position: relative;
  padding: 18px 0 18px 50px;
  border-bottom: 1px solid var(--line);
  counter-increment: step;
}

.pipeline > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.pipeline strong { display: block; }
.pipeline p { margin-top: 4px; font-size: 0.95rem; }

/* FAQ: each question opens its answer in place. */
.docs__article .faq__group {
  margin-top: 40px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.faq { margin-top: 12px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  position: relative;
  padding: 18px 40px 18px 0;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

/* A plus that turns into a minus while the answer is open. */
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--muted);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item summary:hover::before, .faq__item summary:hover::after,
.faq__item[open] summary::before, .faq__item[open] summary::after { background: var(--accent); }

.faq__answer { padding: 0 40px 20px 0; }
.faq__answer > :first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq__item summary::before, .faq__item summary::after { transition: none; }
}

/* With JavaScript each section is a page of its own (docs-pages.js shows one at a time and adds the pager). */

/* The side index is hidden with the paging: the Documentation outline in the header and the pager
   already move between the sections. It stays in the markup, which the header outline reads. */
.js .docs { display: block; }
.js .docs__toc { display: none; }
.js .docs--paged .docs__article { margin-inline: auto; }

/* The legal pages are not paged, so they keep their side index too. */
.js .docs--legal { display: grid; }
.js .docs--legal .docs__toc { display: block; }
.js .docs--legal .docs__article { margin-inline: 0; }

.docs__article--paged > section { margin-top: 0; }
.docs__article--paged > .callout + section { margin-top: 72px; }
.docs__article--paged > section:not(:first-of-type) > h2 { font-size: clamp(2rem, 4.2vw, 2.8rem); letter-spacing: -0.035em; }

.docs__pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.docs__article .docs__pager a {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.docs__article .docs__pager a:hover { border-color: var(--line-strong); background: var(--surface); }
.docs__pager small { color: var(--faint); font-size: 0.8rem; }
.docs__pager strong { font-weight: 500; }
.docs__pager-next { grid-column: 2; text-align: right; }

/* Account pages */

.auth-page { display: flex; flex-direction: column; min-height: 100vh; }

.auth {
  display: grid;
  flex: 1;
  place-items: center;
  padding: 48px 24px 96px;
  background: radial-gradient(560px circle at 50% 30%, rgba(139, 117, 255, 0.13), transparent 70%);
}

.auth__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 410px;
  padding: 36px 32px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--surface);
}

.auth__card h1 { font-size: 1.7rem; }

/* Back button in the header of the account pages (auth.js returns to the previous page of the site). */
.site-header__back { grid-column: 3; justify-self: end; gap: 8px; padding: 8px 18px 8px 14px; font-size: 0.9rem; }
.site-header__back:hover { border-color: #6a6a80; }
.site-header__back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s; }
.site-header__back:hover svg { transform: translateX(-3px); }

/* Log in: the NEXORA mark draws itself in a panel the same size as the form. */

.auth__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 410px));
  gap: 24px;
  justify-content: center;
  width: 100%;
}

.auth__split .auth__card { max-width: none; }

.auth__art { display: grid; place-items: center; }

.auth__logo { width: 100%; overflow: visible; }

.auth__logo path { fill: none; stroke-linejoin: round; stroke-linecap: round; }

.auth__logo-outline,
.auth__logo-inner,
.auth__logo-guide {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: logo-draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.auth__logo-outline { stroke: var(--accent); stroke-width: 0.4; filter: drop-shadow(0 0 0.6px rgba(139, 117, 255, 0.9)); }
/* Dashed, so they cannot be drawn with the dash offset: they fade in once the outline is drawn. */
.auth__logo .auth__logo-guide {
  stroke: rgba(181, 166, 255, 0.35);
  stroke-width: 0.12;
  stroke-dasharray: 0.04 0.02;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: logo-fade 0.8s ease-out 1.1s forwards;
}
.auth__logo-inner { stroke: #b5a6ff; stroke-width: 0.22; animation-duration: 0.9s; animation-delay: 1.5s; }

.auth__logo .auth__logo-core {
  fill: var(--accent);
  stroke: none;
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 12px 12px;
  animation: logo-core 0.7s cubic-bezier(0.22, 1, 0.36, 1) 2.2s forwards;
}

/* A short bright stroke keeps running along the outline once the mark is drawn. */
.auth__logo-trace {
  stroke: #fff;
  stroke-width: 0.4;
  stroke-dasharray: 0.1 0.9;
  opacity: 0;
  filter: drop-shadow(0 0 0.8px #b5a6ff);
  animation: logo-trace 3.2s linear 2.6s infinite;
}

@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes logo-fade { to { opacity: 1; } }
@keyframes logo-core { to { opacity: 1; transform: scale(1); } }
@keyframes logo-trace {
  0% { stroke-dashoffset: 1; opacity: 0.9; }
  100% { stroke-dashoffset: 0; opacity: 0.9; }
}

/* Sign up has more fields than Log in: tighter spacing keeps the whole page in one screen. */
.auth--compact { padding: 12px 24px 20px; }
.auth--compact .auth__card { padding: 20px 28px; }
.auth--compact .auth__captcha { margin-top: 8px; font-size: 0.74rem; }
.auth--compact .auth__card h1 { font-size: 1.45rem; }
.auth--compact .auth__lead { margin-top: 4px; font-size: 0.9rem; }
.auth--compact .auth__legal { margin-top: 10px; font-size: 0.74rem; line-height: 1.5; }
.auth--compact .auth__providers { gap: 8px; margin-top: 16px; }
.auth--compact .auth__providers .btn { padding-block: 9px; font-size: 0.92rem; }
.auth--compact .auth__divider { margin-top: 12px; }
.auth--compact .auth__card label { margin-top: 10px; font-size: 0.84rem; }
.auth--compact .auth__divider + label { margin-top: 6px; }
.auth--compact .auth__card input { margin-top: 6px; padding: 8px 12px; }
.auth--compact .auth__help { margin-top: 4px; font-size: 0.78rem; }
.auth--compact .auth__card > .btn { margin-top: 16px; padding-block: 10px; }
.auth--compact .auth__foot { margin-top: 12px; font-size: 0.86rem; }
.auth-page .auth--compact + .legal-foot { padding-block: 12px 16px; }

/* Sign up on laptop screens (1366×768 and alike): the whole form, its button included, above the
   fold. The art gives up some width, so the card is wider and its legal text takes fewer lines.
   Log in is shorter and already fits. */
@media (min-width: 881px) and (max-height: 820px) {
  .auth--signup .auth__split { grid-template-columns: minmax(0, 320px) minmax(0, 520px); }
  .auth--signup { padding-top: 6px; }
  .auth--signup .auth__card { padding-block: 14px; }
  .auth--signup .auth__legal { margin-top: 8px; line-height: 1.4; }
  .auth--signup .auth__providers { margin-top: 12px; }
  .auth--signup .auth__providers .btn { padding-block: 7px; }
  .auth--signup .auth__divider { margin-top: 8px; }
  .auth--signup .auth__card label { margin-top: 6px; }
  .auth--signup .auth__card input { padding-block: 7px; }
  .auth--signup .auth__card > .btn { margin-top: 12px; padding-block: 8px; }
  .auth--signup .auth__foot { margin-top: 8px; }
}

@media (max-width: 880px) {
  .auth__split { grid-template-columns: minmax(0, 410px); }
  .auth__art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth__logo-trace { display: none; }
}
.auth__lead { margin-top: 8px; color: var(--muted); font-size: 0.95rem; }
.auth__card label { margin-top: 20px; font-size: 0.88rem; font-weight: 500; }

.auth__card input {
  margin-top: 8px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.auth__card input:focus-visible { outline-offset: 0; border-color: var(--accent); }
.auth__help { margin-top: 6px; color: var(--faint); font-size: 0.84rem; }

.auth__error {
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 120, 140, 0.4);
  border-radius: 10px;
  background: rgba(255, 90, 110, 0.1);
  color: #ffb4c0;
  font-size: 0.9rem;
}

.auth__card .btn { margin-top: 24px; }

.auth__providers { display: grid; gap: 10px; margin-top: 24px; }
.auth__providers .btn { gap: 10px; margin-top: 0; }
.auth__providers svg { width: 18px; height: 18px; }

.auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  color: var(--faint);
  font-size: 0.84rem;
}

.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__divider + label { margin-top: 14px; }
.auth__foot { margin-top: 20px; color: var(--muted); font-size: 0.9rem; text-align: center; }
.auth__foot a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Playground (playground.html): the site header on top, then two editor windows like the ones on
   the home page, the code on the left and what the interpreter answered on the right. */

.pg-page { display: flex; flex-direction: column; height: 100vh; min-height: 640px; overflow: hidden; }

.pg {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: 4px clamp(16px, 2.5vw, 40px) 12px;
}

/* A faint version of the home page's dome, behind the windows. */
.pg-glow {
  position: absolute;
  left: 50%;
  top: 40px;
  z-index: -1;
  width: min(1100px, 90%);
  height: 70%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(112, 116, 214, 0.28), rgba(74, 63, 230, 0.12) 45%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.pg-head { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }

.pg-head__title { display: flex; align-items: center; gap: 14px; }

/* The same play mark as the Run button, in a soft accent tile. */
.pg-head__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(139, 117, 255, 0.4);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(157, 139, 255, 0.28), rgba(106, 82, 255, 0.12));
  box-shadow: 0 8px 24px -10px rgba(139, 117, 255, 0.8);
}

.pg-head__icon svg { width: 16px; height: 16px; fill: #c9bfff; }
.pg-head h1 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.pg-head__title p { margin-top: 2px; color: var(--muted); font-size: 0.86rem; }

/* Pill on the right: a live dot, what runs the code, and its version. */
.pg-head__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(21, 21, 29, 0.7);
  color: var(--muted);
  font-size: 0.82rem;
}

.pg-head__status:not(:has([data-version]:not([hidden]))) { padding-right: 14px; }

.pg-head__version {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: #c9bfff;
  font-family: var(--mono);
  font-size: 0.74rem;
}

.pg-head__live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pg-live 2.4s ease-out infinite;
}

@keyframes pg-live {
  0% { box-shadow: 0 0 0 0 rgba(102, 217, 166, 0.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(102, 217, 166, 0); }
}

/* Green only once the server says the playground is on (view.js sets data-state). Without
   JavaScript nobody asks the server, so the pill is not shown at all. */
.pg-head__status:not([data-state="live"]) .pg-head__live { background: var(--faint); animation: none; }
:root:not(.js) .pg-head__status { display: none; }

.pg-grid {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px 20px;
  min-height: 0;
  margin-top: 16px;
}

.pg-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* The topics of the guide go in a row of their own, under the results window and as wide as it, so
   the editor and the results keep the same height. */
.pg-topics { grid-column: 2; align-self: start; }
/* Under the editor, at the height of the topics: the first line of text lines up with the pills. */
.pg-note { grid-column: 1; align-self: start; max-width: 52rem; margin: 0; padding-top: 5px; color: var(--faint); font-size: 0.76rem; line-height: 1.5; }
.pg-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pg-note a:hover { color: var(--text); }
.pg-bar { flex: none; min-height: 50px; padding-left: 6px; }
.pg-bar .window__tab { font-size: 0.86rem; }

/* Editor window */

.pg-file { flex: none; }

.pg-examples { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; color: var(--faint); font-size: 0.8rem; }

.pg-examples select {
  min-width: 0;
  max-width: 15.5rem;
  padding: 5px 30px 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--editor) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23a1a1b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 12px;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.pg-examples select:hover:not(:disabled), .pg-examples select:focus-visible { border-color: rgba(139, 117, 255, 0.7); }
.pg-examples select:disabled { opacity: 0.55; cursor: default; }

.pg-description {
  flex: none;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.8rem;
  line-height: 1.5;
}

.pg-description:empty { display: none; }

.pg-toolbar {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 12px 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.pg-help { flex: 1 1 16rem; color: var(--faint); font-size: 0.74rem; line-height: 1.8; }

.pg-help kbd {
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--editor);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
}

/* Read by screen readers (the editor is described by this paragraph), not shown. */
.pg-help__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pg-actions { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; }

.pg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 17px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.2s, transform 0.15s, opacity 0.15s;
}

.pg-btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.32); background: #23232f; }
.pg-btn:active:not(:disabled) { transform: translateY(1px); }
.pg-btn:disabled { opacity: 0.5; cursor: default; }
.pg-btn svg { width: 12px; height: 12px; fill: currentColor; }

.pg-btn--ghost { border-color: transparent; background: none; color: var(--muted); }
.pg-btn--ghost:hover:not(:disabled) { border-color: var(--line-strong); background: none; color: var(--text); }

.pg-btn--primary {
  padding-inline: 18px;
  border-color: transparent;
  background: linear-gradient(135deg, #9d8bff, #6a52ff);
  color: #fff;
  box-shadow: 0 6px 22px -8px rgba(139, 117, 255, 0.9);
}

.pg-btn--primary:hover:not(:disabled) { border-color: transparent; background: linear-gradient(135deg, #ab9cff, #7660ff); box-shadow: 0 8px 28px -8px rgba(139, 117, 255, 1); }
.pg-btn.is-loading { opacity: 1; }
.pg-btn--primary.is-loading { animation: pg-pulse 1.1s ease-in-out infinite; }

@keyframes pg-pulse { 50% { box-shadow: 0 0 0 4px rgba(139, 117, 255, 0.25), 0 6px 22px -8px rgba(139, 117, 255, 0.9); } }

.pg-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(139, 117, 255, 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pg-spin 0.7s linear infinite;
}

@keyframes pg-spin { to { transform: rotate(360deg); } }

/* Editor: a textarea on top of a highlighted copy of the same text. Both must use exactly the
   same font, size, line height and padding, or the caret would drift away from the letters. */

.pg-editor {
  --pg-font: 0.95rem;
  --pg-line: 1.75;
  display: flex;
  flex: 1;
  min-height: 0;
  background: var(--editor);
  transition: box-shadow 0.2s;
}

.pg-editor:focus-within { box-shadow: inset 0 0 0 1px rgba(139, 117, 255, 0.55); }

.pg-gutter {
  flex: none;
  min-width: 3.4em;
  padding: 16px 0;
  color: #4a4a5e;
  font-family: var(--mono);
  font-size: var(--pg-font);
  line-height: var(--pg-line);
  text-align: right;
  overflow: hidden;
  user-select: none;
}

.pg-line { display: block; padding: 0 12px 0 8px; }
.pg-line--error { background: rgba(255, 90, 110, 0.14); color: #ff9db0; box-shadow: inset 2px 0 0 #ff6b84; }

.pg-code { position: relative; flex: 1; min-width: 0; }

.pg-highlight, .pg-input {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 16px 18px 16px 6px;
  border: 0;
  font-family: var(--mono);
  font-size: var(--pg-font);
  font-variant-ligatures: none;
  letter-spacing: 0;
  line-height: var(--pg-line);
  tab-size: 4;
  white-space: pre;
  word-wrap: normal;
}

.pg-highlight { color: var(--text); overflow: hidden; pointer-events: none; }

.pg-input {
  width: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
  caret-color: #fff;
  outline: none;
  overflow: auto;
  resize: none;
}

.pg-input::selection { background: rgba(139, 117, 255, 0.38); color: transparent; }

.tok-builtin { color: #9fd4ff; }
.tok-op { color: #b9b9c9; }
.tok-reserved { color: #ff9db0; text-decoration: underline dotted; }

/* Results window */

.pg-tabs { display: flex; align-self: stretch; }
.pg-tab { gap: 8px; font-family: var(--sans); font-size: 0.84rem; font-weight: 500; }

.pg-count {
  min-width: 1.5em;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 107, 132, 0.2);
  color: #ffb4c0;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  text-align: center;
}

/* One line saying what happened, with a dot in the colour of the outcome. */
.pg-status {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  margin: 12px 12px 0;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.pg-status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}

.pg-status[data-tone="ok"] { border-color: rgba(102, 217, 166, 0.3); background: var(--green-soft); color: var(--text); }
.pg-status[data-tone="ok"]::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.pg-status[data-tone="error"] { border-color: rgba(255, 107, 132, 0.35); background: rgba(255, 107, 132, 0.08); color: var(--text); }
.pg-status[data-tone="error"]::before { background: #ff6b84; box-shadow: 0 0 10px #ff6b84; }
.pg-status[data-tone="limit"], .pg-status[data-tone="service"] { border-color: rgba(226, 189, 122, 0.4); background: rgba(226, 189, 122, 0.08); color: #f0dcb0; }
.pg-status[data-tone="limit"]::before, .pg-status[data-tone="service"]::before { background: #e2bd7a; }
.pg-status[data-tone="busy"] { border-color: rgba(139, 117, 255, 0.35); }
.pg-status[data-tone="busy"]::before { background: var(--accent); animation: pg-blink 0.9s ease-in-out infinite; }

@keyframes pg-blink { 50% { opacity: 0.3; } }

.pg-notice {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 8px 12px 0;
  padding: 8px 14px;
  border: 1px solid rgba(139, 117, 255, 0.35);
  border-radius: 12px;
  background: var(--accent-soft);
  color: #d6cfff;
  font-size: 0.84rem;
}

.pg-notice span { flex: 1 1 12rem; }

.pg-link {
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pg-panel { flex: 1; min-height: 0; overflow: auto; }

.pg-panel, .pg-input { scrollbar-width: thin; scrollbar-color: #34344a transparent; }

.pg-empty, .pg-stale { padding: 18px; color: var(--faint); font-size: 0.86rem; line-height: 1.6; }

/* Nothing to show yet: a quiet placeholder in the middle of the panel. */
.pg-empty { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 100%; max-width: 22rem; margin-inline: auto; text-align: center; }
.pg-empty[hidden] { display: none; }

.pg-empty::before {
  content: "";
  width: 44px;
  height: 44px;
  border: 1px solid rgba(139, 117, 255, 0.35);
  border-radius: 14px;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.2v9.6L12.6 8Z' fill='%23b5a6ff'/%3E%3C/svg%3E") no-repeat center / 18px;
}

#panel-diagnostics .pg-empty::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23b5a6ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pg-stale { padding-bottom: 0; color: #e2bd7a; }

.pg-output {
  margin: 0;
  padding: 16px 18px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.7;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
  animation: pg-in 0.3s ease-out;
}

@keyframes pg-in { from { opacity: 0; transform: translateY(4px); } }

.pg-diagnostics { padding: 12px; }
.pg-diagnostic { animation: pg-in 0.3s ease-out; }
.pg-diagnostic + .pg-diagnostic { margin-top: 8px; }

.pg-diagnostic__go {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid #ff6b84;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.pg-diagnostic__go:hover:not(:disabled) { border-color: var(--line-strong); border-left-color: #ff6b84; background: var(--surface-raised); }
.pg-diagnostic__go:disabled { cursor: default; }
.pg-diagnostic--contract .pg-diagnostic__go, .pg-diagnostic--runtime .pg-diagnostic__go { border-left-color: #e2bd7a; }

.pg-diagnostic__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pg-diagnostic__category { color: var(--faint); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; }
.pg-diagnostic__code { color: #c2b6ff; font-family: var(--mono); font-size: 0.78rem; }
.pg-diagnostic__title { font-weight: 600; }
.pg-diagnostic__where { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 0.76rem; }
.pg-diagnostic__label { color: var(--text); }
.pg-diagnostic__note { color: var(--muted); font-size: 0.8rem; }
.pg-diagnostic__hint { color: var(--green); font-size: 0.8rem; }

/* Footer */

.pg-foot {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  width: 100%;
  padding: 2px clamp(16px, 2.5vw, 40px) 12px;
  color: var(--faint);
  font-size: 0.76rem;
  line-height: 1.5;
}

.pg-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pg-foot a:hover { color: var(--text); }
/* Inline pills in a balanced block: when they do not fit in one line, the lines get the same number
   of pills (4 and 4) instead of leaving one alone on the second line. */
.pg-topics { font-size: 0.76rem; line-height: 1.5; text-align: center; text-wrap: balance; }
.pg-topics a { display: inline-block; margin: 2px 0; padding: 3px 10px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.pg-topics a:hover { border-color: rgba(139, 117, 255, 0.6); color: var(--text); }
.pg-noscript { padding: 16px 18px; color: #f0dcb0; }

@media (max-width: 1100px) {
  .pg-help { display: none; }
}

@media (max-width: 900px) {
  /* Windows stack; the page scrolls instead of the panels. */
  .pg-page { height: auto; overflow: visible; }
  .pg { padding: 4px 16px 12px; }
  .pg-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 20px; }
  .pg-topics { grid-column: auto; margin-top: -10px; }
  .pg-note { grid-column: auto; order: 1; margin-top: -8px; padding-top: 0; }
  .pg-editor { flex: none; height: 52vh; min-height: 300px; }
  .pg-panel { flex: none; min-height: 220px; max-height: 60vh; }
  .pg-actions { width: 100%; margin-left: 0; }
  .pg-actions .pg-btn { flex: 1 1 auto; justify-content: center; }
  .pg-examples .pg-examples__label { display: none; }
  .pg-foot { padding-inline: 16px; }
}

@media (max-width: 440px) {
  /* The four buttons do not fit in one row: two rows of two, in the order they are read. */
  .pg-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The busy button says so itself ("Running", "Checking"); the spinner would take a whole cell. */
  .pg-actions .pg-spinner { display: none; }
}

/* Language guide (guide.html) reuses the documentation layout. */

.guide-output { margin-top: 0; border-top: 1px solid var(--line); background: #0b0b10; }
.guide-output::before { content: "Output"; display: block; padding: 8px 16px 0; color: var(--faint); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.guide-output--error::before { content: "nex check"; }
.guide-output pre { margin: 0; padding: 6px 16px 14px; color: var(--muted); font-family: var(--mono); font-size: 0.8rem; line-height: 1.6; white-space: pre; overflow-x: auto; }
.guide table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 0.92rem; }
.guide th, .guide td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); text-align: left; vertical-align: top; }
.guide th { color: var(--faint); font-family: var(--mono); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }
.guide td:first-child { color: var(--text); white-space: nowrap; }

/* Legal pages: the documentation layout, without its paging (the sections are inside .legal__body). */

.legal__meta { margin-top: 14px; color: var(--faint); font-family: var(--mono); font-size: 0.78rem; }
.legal__body > section { margin-top: 56px; }
.legal__body h2 { font-size: 1.45rem; }
.legal__body ul { margin-top: 12px; padding-left: 1.2em; color: var(--muted); list-style: disc; }
.legal__body li + li { margin-top: 6px; }
.legal__body .callout { margin-top: 28px; }

/* A piece of information the owner still has to provide. */
.placeholder {
  padding: 0.05em 0.4em;
  border: 1px dashed rgba(255, 196, 92, 0.6);
  border-radius: 6px;
  background: rgba(255, 196, 92, 0.1);
  color: #ffd27a;
  font-family: var(--mono);
  font-size: 0.86em;
}

.legal-table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.legal-table th,
.legal-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); text-align: left; vertical-align: top; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table th { color: var(--faint); font-family: var(--mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; }
.legal-table td:first-child { min-width: 8.5em; color: var(--text); }
.legal-table td code { white-space: nowrap; }

/* Honeypot: off screen and out of the tab order, so only bots fill it in. */
.auth__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.auth__captcha { margin-top: 12px; color: var(--faint); font-size: 0.78rem; line-height: 1.5; }
/* The status region is always in the page so screen readers announce it; empty, it takes no room. */
.auth__captcha:empty { margin-top: 0; }
.auth__captcha button { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth__captcha button:hover { color: var(--text); }

.auth__legal { margin-top: 18px; color: var(--faint); font-size: 0.8rem; line-height: 1.55; }
.auth__legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* Cookie banner and preferences panel (js/consent.js). Accepting and rejecting look the same. */

.consent-banner {
  position: fixed;
  left: 16px;
  right: auto;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: 0;
  padding: 20px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(21, 21, 29, 0.94);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.consent-banner__body { flex: 1 1 26rem; }
.consent-banner__title { font-size: 1rem; }
.consent-banner p { margin-top: 6px; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.consent-banner a,
.consent-panel a { color: #b5a6ff; text-decoration: underline; text-underline-offset: 3px; }
.consent-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.consent-panel {
  width: min(640px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 28px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.consent-panel::backdrop { background: rgba(3, 3, 8, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.consent-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.consent-panel__head h2 { font-size: 1.3rem; }

.consent-panel__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.consent-panel__close:hover { color: var(--text); }
.consent-panel__intro { margin-top: 12px; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }

.consent-cat { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--editor); }
.consent-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.consent-cat__name { font-weight: 600; }
.consent-cat__always { color: var(--green); font-family: var(--mono); font-size: 0.74rem; }
.consent-cat__desc { margin-top: 6px; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.consent-cat__details { margin-top: 10px; font-size: 0.84rem; }
.consent-cat__details summary { color: var(--muted); cursor: pointer; }
.consent-cat__details summary:hover { color: var(--text); }

.consent-cookies { margin-top: 10px; }
.consent-cookies li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.consent-cookies span { color: var(--faint); line-height: 1.5; }

.consent-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s;
}

.consent-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s, background-color 0.18s;
}

.consent-switch:checked { border-color: var(--accent); background: var(--accent); }
.consent-switch:checked::before { background: #fff; transform: translateX(20px); }

.consent-panel__status { margin-top: 18px; color: var(--faint); font-size: 0.82rem; }
.consent-panel__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Entrance animation (set by main.js only on elements that start below the fold) */

/* Neighbours that enter together are staggered: main.js sets --reveal-delay on each one. */
[data-reveal] {
  transition:
    opacity 0.8s ease var(--reveal-delay, 0s),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
}

.reveal-pending { opacity: 0; transform: translateY(36px) scale(0.985); }

/* Section titles (main.js adds .fx-head, splits the h2 into .fx-word spans and sets .is-shown). */
.fx-head .eyebrow::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;
  margin-right: 0;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(139, 117, 255, 0.8);
  vertical-align: middle;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1), margin-right 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-head.is-shown .eyebrow::before { width: 28px; margin-right: 12px; }

.fx-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.55em) rotate(3deg);
  transform-origin: 0 100%;
  transition:
    opacity 0.7s ease,
    filter 0.8s ease,
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.18s + var(--i) * 0.07s);
}

.fx-head.is-shown .fx-word { opacity: 1; filter: blur(0); transform: none; }

/* Responsive */

/* Below this width the full nav no longer fits in the bar, so it collapses into a menu. */
/* Collapsed header: a toggle opens the links and the actions as a panel under the bar.
   site-header.js sets .nav-collapsed on <html> below 1180px, and above it whenever the links and
   the actions do not fit side by side. */
.nav-collapsed { --header: 84px; }

.nav-collapsed .nav-toggle { display: inline-flex; border-radius: 50%; }

.nav-collapsed .site-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px 24px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  background: #101018;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
}

.nav-collapsed .site-nav.is-open { display: flex; }
.nav-collapsed .site-nav__links { flex-direction: column; gap: 0; }
.nav-collapsed .site-nav__links .nav-link { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; transition: color 0.15s, padding 0.25s; }
.nav-collapsed .site-nav__links .nav-link:hover { padding-left: 10px; color: #b5a6ff; }
.nav-collapsed .site-nav__links::before { display: none; }
.nav-collapsed .nav-menu { display: none; }
.nav-collapsed .site-nav__actions { flex-direction: column; align-items: stretch; gap: 16px; padding-top: 20px; }
.nav-collapsed .site-nav__session .pill { justify-content: center; padding-block: 9px; }
.nav-collapsed .site-nav__session { justify-content: space-between; }

.nav-collapsed .site-header { padding-inline: 14px; }
.nav-collapsed .site-header.is-scrolled { padding-inline: 26px; }
.nav-collapsed .site-header__row { display: flex; flex-wrap: wrap; row-gap: 0; width: auto; min-height: 62px; padding-inline: 22px; }
.nav-collapsed .site-header.is-scrolled .site-header__row { min-height: 50px; padding-inline: 18px; }

/* While site-header.js measures whether the full bar fits, nothing animates. */
.nav-measuring .site-header, .nav-measuring .site-header * { transition: none !important; }

/* Without JavaScript there is no toggle: on narrow screens the links wrap under the brand instead. */
@media (max-width: 1180px) {
  html:not(.js) { --header: 84px; }
  html:not(.js) .site-header { height: auto; padding-inline: 14px; }
  html:not(.js) .site-header__row { display: flex; flex-wrap: wrap; row-gap: 0; width: auto; min-height: 62px; padding: 10px 22px; border-radius: 28px; }
  html:not(.js) .site-nav { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 4px; }
  html:not(.js) .site-nav__links { flex-wrap: wrap; gap: 4px 20px; }
  html:not(.js) .site-nav__links::before { display: none; }
  html:not(.js) .nav-menu { display: none; }
}

@media (max-width: 960px) {
  .hero { padding-top: 28px; }
  .playground-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .section { padding: 80px 0; }

  .goals { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .goal, .goal + .goal { padding: 28px 0; border-left: 0; }
  .goal + .goal { border-top: 1px solid var(--line); }

  .roadmap { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .phase { padding: 0 0 32px 30px; border-top: 0; border-left: 1px solid var(--line-strong); }
  .phase::before { left: -6px; top: 4px; }
  .phase:last-child { padding-bottom: 0; }

  .docs { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 48px 80px; }
  .docs__toc { position: static; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .container { padding-inline: 20px; }
  .areas { grid-template-columns: minmax(0, 1fr); }
  .area { padding: 24px 20px; }
  .playground__panes { grid-template-columns: minmax(0, 1fr); }
  .playground__output { border-left: 0; border-top: 1px solid var(--line); }
  .cta { padding: 28px 22px; }
  .code { padding: 16px 14px 18px; font-size: 0.78rem; }
  .line { padding-left: 2.8em; }
  .line::before { width: 1.6em; }
  .window__dots { display: none; }
  .window__bar { flex-wrap: wrap; row-gap: 0; }
  .window__tab { min-height: 44px; }
  .window__flag { margin: 0 0 10px; }
  /* The four install tabs share the bar, so none of them hides behind the copy button. */
  .install__window .window__bar { gap: 8px; padding-inline: 10px; }
  .install__window .window__tab { flex: 1 1 0; justify-content: center; padding: 0 3px; }
  .install__window .window__tab-icon { margin-right: 5px; }
  .install__window .copy { gap: 5px; padding: 5px 8px; }
  .status-list > div { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .actions .btn { flex: 1 1 auto; }
  .platforms { position: static; width: fit-content; margin: -56px auto 40px; }
  .consent-banner { left: 10px; right: auto; bottom: 10px; width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 18px; }
  .consent-banner__actions,
  .consent-panel__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .consent-panel { padding: 22px 18px; }
}

@media (max-width: 359px) {
  .install__window .window__tab-icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------------
   The extension for Visual Studio Code: the logo in the hero, drawn in dots,
   and the command that installs it.

   The Visual Studio Code logo is a trademark of Microsoft. It is used here only
   to point at the editor the extension is for.
   --------------------------------------------------------------------------- */

/* The logo of the editor, next to the install window. */
.hero__vscode {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(640px, 100%);
  margin: 44px auto 0;
}

/* The logo: a grid of dots, and the button that copies the command. */
.vscode-dots {
  display: grid;
  place-items: center;
  width: clamp(104px, 11vw, 150px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vscode-dots:hover {
  transform: none;
}

.vscode-dots:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}

.vscode-dots__svg { width: 100%; height: 100%; overflow: visible; }

/* The dots are the logo of Visual Studio Code, in the blues of its own icon. */
.vscode-dots__dot {
  fill: color-mix(in srgb, #1f9cf0, #b3e5fc calc(var(--near, 0) * 100%));
  opacity: calc(0.9 + 0.1 * var(--near, 0));
  r: calc(1.15px + 0.6px * var(--near, 0));
  transform-box: fill-box;
  transform-origin: center;
  transition: r 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), fill 0.3s, opacity 0.3s;
}

/* Before the logo is shown, the dots are not there yet. */
.vscode-dots--pending .vscode-dots__dot { opacity: 0; transform: scale(0.1); }

/* And they come in one after another when the logo appears. */
[data-vscode-dots].is-visible .vscode-dots__dot {
  animation: vscode-dot-in 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) backwards;
  animation-delay: calc(var(--i) * 2ms);
}

@keyframes vscode-dot-in {
  from { opacity: 0; transform: scale(0.1); }
}

/* The little note that says the command is already in the clipboard. It comes out above the logo
   and is as wide as it, and it floats: it must not move the logo. */
.vscode-dots__hint {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(10, 10, 18, 0.94);
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.vscode-dots__hint.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* On a wide screen the logo sits beside the install window, at its height. */
@media (min-width: 1101px) {
  .hero__stage {
    display: grid;
    grid-template-columns: 1fr min(640px, 100%) 1fr;
    column-gap: 20px;
    align-items: center;
  }
  .install__window { grid-column: 2; }
  .hero__vscode {
    grid-column: 3;
    justify-self: start;
    width: auto;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vscode-dots--pending .vscode-dots__dot { opacity: 0.9; transform: none; }
  [data-vscode-dots].is-visible .vscode-dots__dot { animation: none; }
  .vscode-dots:hover { transform: none; }
}