.citry-landing-page {
  overflow-x: hidden;
}

.citry-landing__nav-drawer {
  display: none;
}

.landing-shell {
  --landing-bg: #f4f8fc;
  --landing-bg-deep: #e5eef8;
  --landing-ink: #0b1729;
  --landing-muted: #4e6076;
  --landing-faint: #70849c;
  --landing-line: rgb(21 69 112 / 14%);
  --landing-panel: rgb(255 255 255 / 100%);
  --landing-panel-solid: #f9fbfe;
  --landing-blue: #276df2;
  --landing-cyan: #00a9a6;
  --landing-violet: #7457ef;
  --landing-warm: #df6d46;
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 12%, rgb(39 109 242 / 12%), transparent 28rem),
    radial-gradient(circle at 86% 28%, rgb(0 169 166 / 9%), transparent 34rem),
    var(--landing-bg);
  color: var(--landing-ink);

  /* The shell is wider than the content. Interacting with editor notes
    can trigger scrollIntoView(), shifting the whole page sideways.
    This prevents it. */
  overflow-x: clip;
}

[data-theme="dark"] .landing-shell {
  --landing-bg: #050914;
  --landing-bg-deep: #0a1122;
  --landing-ink: #f3f7ff;
  --landing-muted: #a7b6cc;
  --landing-faint: #7588a5;
  --landing-line: rgb(127 181 255 / 15%);
  --landing-panel: rgb(11 19 36 / 100%);
  --landing-panel-solid: #0b1324;
  --landing-blue: #6d9eff;
  --landing-cyan: #4de0d5;
  --landing-violet: #a18aff;
  --landing-warm: #ff9776;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing-shell {
    --landing-bg: #050914;
    --landing-bg-deep: #0a1122;
    --landing-ink: #f3f7ff;
    --landing-muted: #a7b6cc;
    --landing-faint: #7588a5;
    --landing-line: rgb(127 181 255 / 15%);
    --landing-panel: rgb(11 19 36 / 100%);
    --landing-panel-solid: #0b1324;
    --landing-blue: #6d9eff;
    --landing-cyan: #4de0d5;
    --landing-violet: #a18aff;
    --landing-warm: #ff9776;
  }
}

.landing-skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.65rem 0.9rem;
  border-radius: 0.5rem;
  background: var(--landing-ink);
  color: var(--landing-bg);
  transform: translateY(-160%);
}

.landing-skip:focus {
  transform: translateY(0);
}

.landing-main {
  position: relative;
  padding-top: 4rem;
}

.landing-content {
  position: relative;
  z-index: 2;
}

/* A class that sets `display` beats the [hidden] default, which would
   otherwise leave every panel on screen once the script hides one. */
.landing-shell [hidden] {
  display: none !important;
}

.landing-content a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.landing-content .heading-anchor,
.landing-content .heading-anchor:visited {
  color: inherit;
  text-decoration: none;
}

.landing-hero,
.landing-section,
.landing-final {
  width: min(76rem, calc(100% - 3rem));
  margin-inline: auto;
}

.landing-hero {
  position: relative;
  min-height: min(54rem, calc(100svh - 4rem));
  display: grid;
  align-content: center;
  padding: clamp(4.5rem, 10vh, 8rem) 0 6rem;
}

/* A blueprint grid behind the hero, drawn entirely in CSS: two repeating
   line gradients and one accent glow, with no payload and no script. It
   bleeds past the page column to reach the window edges, and the mask
   fades it out before it reaches the copy, so contrast is never the
   reader's problem. */
.landing-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8rem -50vw -6rem;
  background:
    radial-gradient(
      circle at 14% 6%,
      color-mix(in srgb, var(--landing-blue), transparent 76%),
      transparent 42%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 2.25rem,
      var(--landing-line) 2.25rem calc(2.25rem + 1px)
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 2.25rem,
      var(--landing-line) 2.25rem calc(2.25rem + 1px)
    );
  mask-image: radial-gradient(
    130% 105% at 6% 0%,
    rgb(0 0 0 / 90%) 0%,
    rgb(0 0 0 / 40%) 46%,
    transparent 76%
  );
  pointer-events: none;
}

.landing-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.landing-hero__copy {
  min-width: 0;
  margin-top: -2rem;
}

.landing-hero__code {
  min-width: 0;
  margin-top: -2.5rem;
}

.landing-hero__code pre {
  max-height: 35rem;
  font-size: 0.72rem;
}

.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.4rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--landing-line);
  border-radius: 999px;
  background: var(--landing-panel);
  color: var(--landing-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.landing-eyebrow::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--landing-cyan);
  box-shadow: 0 0 1rem var(--landing-cyan);
}

/* Sized for a sentence rather than a phrase: the cap holds it to three
   lines beside the code panel instead of stacking one word per row. */
.landing-content .landing-hero h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.9rem, 5.6vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.landing-hero__lede {
  max-width: 43rem;
  margin: 1.5rem 0 0;
  color: var(--landing-muted);
  font-size: clamp(1.12rem, 2vw, 1.4rem);
  line-height: 1.62;
}

.landing-hero__lede strong {
  color: var(--landing-ink);
  font-weight: 620;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Two weights, not two boxes. The primary action is a solid, slightly
   raised control; the secondary is quiet until the pointer reaches it, so
   the pair reads as a decision rather than a toolbar. */
.landing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 3rem;
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--landing-muted);
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.landing-content .landing-button:hover,
.landing-content .landing-button:focus-visible {
  background: color-mix(in srgb, var(--landing-ink), transparent 94%);
  color: var(--landing-ink);
}

.landing-button:focus-visible {
  outline: 2px solid var(--landing-blue);
  outline-offset: 2px;
}

/* The arrow leans forward on hover, so the button answers the pointer
   without the whole control jumping under it. */
.landing-button__arrow {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  transition: transform 160ms ease;
}

.landing-button:hover .landing-button__arrow,
.landing-button:focus-visible .landing-button__arrow {
  transform: translateX(0.15rem);
}

.landing-content .landing-button--primary {
  padding: 0 1.35rem;
  background: var(--landing-blue);
  color: #fff;
  font-weight: 600;
  /* A hairline of light along the top edge and a shadow tinted with the
     button's own colour, so it sits on the page rather than on top of it. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    0 6px 16px -8px color-mix(in srgb, var(--landing-blue), transparent 25%);
  transition: 0.2s;
}

.landing-content .landing-button--primary:hover,
.landing-content .landing-button--primary:focus-visible {
  background: color-mix(in srgb, var(--landing-blue), #000 12%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    0 10px 12px -10px color-mix(in srgb, var(--landing-blue), transparent 10%);
}

[data-theme="dark"] .landing-content .landing-button--primary:hover,
[data-theme="dark"] .landing-content .landing-button--primary:focus-visible {
  background: color-mix(in srgb, var(--landing-blue), #fff 12%);
}

/* The channels the project actually lives on, under the install line. */
.social-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.landing-social {
  margin-top: 0.9rem;
  margin-left: -0.5rem;
}

.social-links__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  color: var(--landing-faint);
  transition: color 140ms ease, background 140ms ease;
}

.landing-content .social-links__link:hover,
.landing-content .social-links__link:focus-visible {
  background: color-mix(in srgb, var(--landing-ink), transparent 94%);
  color: var(--landing-ink);
}

.landing-social--footer {
  margin-left: 0.25rem;
}

.landing-social--footer .social-links__link {
  width: 1.9rem;
  height: 1.9rem;
}

/* Reads as a terminal line rather than a form field: a prompt mark, the
   command, and a copy control that only colours in on hover. */
.landing-install {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.1rem;
  padding: 0 0.5rem 0 1rem;
  min-height: 3.25rem;
  border: 1px solid var(--landing-line);
  border-radius: 0.6rem;
  background: var(--landing-panel-solid);
}

.landing-install code {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  overflow-x: auto;
  color: var(--landing-ink);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  white-space: nowrap;
}

.landing-install code::before {
  content: "$";
  color: var(--landing-blue);
  user-select: none;
}

.landing-copy {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 2.25rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--landing-faint);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  transition: background 140ms ease, color 140ms ease;
}

.landing-copy:hover,
.landing-copy:focus-visible {
  background: color-mix(in srgb, var(--landing-blue), transparent 90%);
  color: var(--landing-ink);
}

.landing-sponsor-belt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem 2rem;
  width: min(76rem, calc(100% - 3rem));
  margin-inline: auto;
  padding: 1.25rem 0;
  border-block: 1px solid var(--landing-line);
}

.landing-sponsor-belt h2 {
  margin: 0;
  color: var(--landing-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-sponsor-belt ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-sponsor-belt a {
  display: inline-flex;
  align-items: center;
  border-radius: 0.35rem;
}

.landing-sponsor-belt a:focus-visible {
  outline: 2px solid var(--landing-blue);
  outline-offset: 0.3rem;
}

.landing-sponsor-belt img {
  display: block;
  width: auto;
  height: 3.5rem;
}

.landing-section {
  padding: clamp(5rem, 10vw, 9rem) 0;
  border-top: 1px solid var(--landing-line);
}

/* A full-width band on the deeper surface. Breaking out of the page
   column stops every section from arriving at the same width and tone;
   the page hides sideways overflow, so the viewport-width trick here
   cannot introduce a horizontal scrollbar. */
.landing-section--band {
  width: auto;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.5rem, calc(50vw - 38rem));
  border-top: 0;
  background: var(--landing-bg-deep);
}

/* The facts section is deliberately the quietest one on the page. */
.landing-section--plain {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.landing-content .landing-section--plain h2 {
  max-width: 34ch;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing: -0.015em;
}

.landing-section--plain .landing-trust-grid {
  margin-top: 2rem;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.landing-section__kicker {
  margin: 0 0 1rem;
  color: var(--landing-blue);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-content .landing-section h2,
.landing-content .landing-final h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--landing-ink);
  font-size: clamp(2.1rem, 3.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.landing-content .headerlink {
  color: var(--landing-faint);
  font-size: 0.4em;
  text-decoration: none;
  vertical-align: middle;
  opacity: 0;
}

.landing-content h2:hover .headerlink,
.landing-content .headerlink:focus-visible {
  opacity: 1;
}

.landing-section__intro {
  max-width: 42rem;
  margin: 1.4rem 0 0;
  color: var(--landing-muted);
  font-size: 1.1rem;
  line-height: 1.7;
}

.landing-extension-story {
  max-width: 54rem;
  margin: clamp(2.5rem, 6vw, 5rem) auto 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--landing-line);
  border-left: 0.3rem solid var(--landing-blue);
  border-radius: 0.9rem;
  background: var(--landing-panel-solid);
  box-shadow: 0 2rem 6rem rgb(18 48 84 / 8%);
}

.landing-extension-story blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--landing-ink);
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  font-style: italic;
  line-height: 1.65;
}

.landing-extension-story blockquote p,
.landing-extension-story__attribution,
.landing-extension-story__attribution p {
  margin: 0;
}

.landing-extension-story__attribution {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  color: var(--landing-muted);
  font-size: 0.9rem;
  font-weight: 650;
}

.landing-extension-story__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--landing-line);
  border-radius: 50%;
  object-fit: cover;
}

.landing-extension-story__attribution a {
  color: inherit;
}

.landing-proof-grid,
.landing-error-grid,
.landing-human-grid,
.landing-trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
  margin-top: 3rem;
}

.landing-human-grid {
  margin-top: 2.5rem !important;
}

.landing-proof-grid > *,
.landing-error-grid > *,
.landing-human-grid > *,
.landing-trust-grid > * {
  min-width: 0;
}

.landing-code {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--landing-line);
  border-radius: 0.9rem;
  background: var(--landing-panel-solid);
  box-shadow: 0 2rem 6rem rgb(18 48 84 / 10%);
}

.landing-code__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--landing-line);
  color: var(--landing-faint);
  font-family: var(--font-mono);
  font-size: 0.6rem;
}

.landing-code__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 2px;
  background: var(--landing-blue);
}

.landing-code__bar span:last-child {
  margin-left: 0.15rem;
}

.landing-code .highlight,
.landing-code pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.landing-code pre {
  overflow: auto;
  padding: 1.25rem;
  font-size: 0.78rem;
  line-height: 1.65;
}

.landing-error-list {
  display: grid;
  gap: 0.6rem;
}

section[id="depth"] .landing-picker__row {
  padding: 0.7rem 0.85rem;
}

/* The caret only means something where a row opens its own panel, so it
   is absent from the layout until the list becomes an accordion. */
.landing-picker__caret {
  display: none;
  width: 1rem;
  height: 1rem;
  align-self: center;
  color: var(--landing-faint);
  transition: transform 160ms ease;
}

.landing-picker__row {
  user-select: text;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.7rem;
  width: 100%;
  padding: 0.5rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--landing-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.landing-picker__row:hover,
.landing-picker__row:focus-visible,
.landing-picker__row.is-active {
  border-color: var(--landing-line);
  background: var(--landing-panel);
  color: var(--landing-ink);
}

.landing-picker__number {
  color: var(--landing-warm);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.landing-picker__blurb {
  font-size: 0.85rem;
}

/* The editor leads so this section changes the page's visual rhythm;
   the compact capability index stays visible beside the long source. */
.landing-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(15rem, 0.58fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.landing-editor__notes {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.landing-editor__hint {
  margin: 0 0 0.25rem;
  color: var(--landing-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-editor__note {
  display: grid;
  gap: 0.4rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.8rem;
  background: transparent;
  color: var(--landing-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: 140ms ease;
  transition-property: border-color, background, color, transform;
}

.landing-editor__note:hover,
.landing-editor__note:focus-visible,
.landing-editor__note.is-active {
  border-color: var(--landing-line);
  background: var(--landing-panel);
  color: var(--landing-ink);
  transform: translateX(-0.2rem);
}

.landing-editor__note span {
  color: var(--landing-blue);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.landing-editor__note strong {
  font-size: 0.92rem;
  line-height: 1.35;
}

.landing-editor__note small {
  color: var(--landing-muted);
  font-size: 0.79rem;
  line-height: 1.5;
}

.landing-editor__code {
  position: relative;
  overflow: visible;
  min-width: 0;
  isolation: isolate;
}

.landing-editor__code > .highlight {
  overflow: hidden;
  border-radius: 0 0 0.9rem 0.9rem;
}

.landing-editor__bar {
  background: color-mix(in srgb, var(--landing-panel-solid), var(--landing-bg) 22%);
}

.landing-editor__mode {
  margin-left: auto !important;
  color: var(--landing-blue);
  text-transform: uppercase;
}

.landing-editor__code > .highlight > pre {
  max-height: 46rem;
  padding: 1.2rem 1.35rem 2.5rem;
  font-size: 0.76rem;
  line-height: 1.62;
}

/* Buttons retain the lexer spans inside them, so resetting their chrome
   keeps the exact syntax colours and adds only the discoverable underline. */
.landing-editor__symbol {
  display: inline;
  margin: 0;
  padding: 0 0 0.04em;
  border: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--landing-blue), transparent 18%);
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: help;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
}

.landing-editor__symbol:hover,
.landing-editor__symbol:focus-visible,
.landing-editor__symbol.is-active {
  outline: 0;
  background: color-mix(in srgb, var(--landing-blue), transparent 80%);
  box-shadow: 0 0 0 0.13rem color-mix(in srgb, var(--landing-blue), transparent 80%);
}

.landing-editor__symbol--error {
  border-bottom: 0;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #f14c4c;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
}

.landing-editor__symbol--error:hover,
.landing-editor__symbol--error:focus-visible,
.landing-editor__symbol--error.is-active {
  background: rgb(241 76 76 / 12%);
  box-shadow: 0 0 0 0.13rem rgb(241 76 76 / 12%);
}

.landing-editor__definition:focus {
  outline: 0;
}

.landing-editor__definition.is-definition-flash {
  animation: landing-editor-definition 1.15s ease-out;
}

@keyframes landing-editor-definition {
  0%, 35% {
    background: color-mix(in srgb, var(--landing-cyan), transparent 55%);
    box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--landing-cyan), transparent 72%);
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}

.landing-editor__hover-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: visible;
  pointer-events: none;
}

.landing-editor__hover {
  position: absolute;
  width: min(29rem, calc(100% - 1.5rem));
  padding: 0.8rem 0.9rem;
  border: 1px solid #555;
  border-radius: 0.28rem;
  background: #202020;
  box-shadow: 0 0.8rem 2.2rem rgb(0 0 0 / 42%);
  color: #d4d4d4;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.45;
  pointer-events: auto;
}

.landing-editor__hover.is-error {
  border-color: #a1260d;
}

.landing-editor__hover.is-error .landing-editor__hover-signature {
  border-bottom-color: #6e342c;
  box-shadow: inset 0.2rem 0 #f14c4c;
}

.landing-editor__hover.is-error > strong {
  color: #f48771;
}

.landing-editor__hover-signature {
  margin: -0.8rem -0.9rem 0.75rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #3d3d3d;
  background: #181818;
  color: #d4d4d4;
  font-size: 0.76rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.landing-editor__hover-signature code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-mono);
  font-size: inherit;
  line-height: inherit;
  white-space: inherit;
}

/* These mirror the restrained VS Code dark-theme palette used by the
   reference hover while preserving Pygments' language-aware tokens. */
.landing-editor__hover-signature :is(.n, .nx, .nv) { color: #9cdcfe; }
.landing-editor__hover-signature :is(.nb, .kt, .nc) { color: #4ec9b0; }
.landing-editor__hover-signature :is(.k, .kd, .kn, .ow) { color: #c586c0; }
.landing-editor__hover-signature :is(.nf, .fm) { color: #dcdcaa; }
.landing-editor__hover-signature :is(.s, .s1, .s2) { color: #ce9178; }
.landing-editor__hover-signature :is(.mi, .mf) { color: #b5cea8; }
.landing-editor__hover-signature :is(.p, .o) { color: #d4d4d4; }

.landing-editor__hover strong {
  display: block;
  color: #f2f2f2;
  font-size: 0.78rem;
}

.landing-editor__hover p {
  margin: 0.35rem 0 0;
  color: #b8b8b8;
}

.landing-editor__hover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.65rem;
}

.landing-editor__hover a {
  color: #75beff;
  font-size: 0.74rem;
  text-decoration: none;
}

.landing-editor__hover a:hover,
.landing-editor__hover a:focus-visible {
  text-decoration: underline;
}

.landing-editor__hover > small {
  display: block;
  margin-top: 0.5rem;
  color: #929292;
  font-size: 0.68rem;
}

.landing-editor__hover kbd {
  padding: 0.05rem 0.2rem;
  border: 1px solid #555;
  border-radius: 0.2rem;
  background: #2d2d2d;
  color: #ddd;
  font-family: var(--font-mono);
  font-size: 0.64rem;
}

.landing-editor__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The annotated walkthrough: source on the left, one explanation on the
   right. Marked lines carry a dot in the gutter so a reader can see where
   there is something to point at. */
.landing-tour {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.landing-tour__code {
  min-width: 0;
}

.landing-tour__code pre {
  max-height: none;
  padding-left: 1.9rem;
  font-size: 0.78rem;
}

.landing-tour__line {
  position: relative;
  display: block;
  min-height: 1.2rem;
  cursor: help;
  transition: background 140ms ease;
}

.landing-tour__line:hover,
.landing-tour__line.is-active {
  background: color-mix(in srgb, var(--landing-blue), transparent 88%);
  box-shadow: inset 2px 0 0 var(--landing-blue);
}

.landing-tour__line[data-tour-start]::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.52em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--landing-blue);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--landing-blue), transparent 40%);
  animation: landing-tour-pulse 2.6s ease-out infinite;
}

@keyframes landing-tour-pulse {
  0%, 70% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--landing-blue), transparent 40%); }
  100% { box-shadow: 0 0 0 0.42rem color-mix(in srgb, var(--landing-blue), transparent 100%); }
}

.landing-tour__notes {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.landing-tour__hint {
  margin: 0;
  color: var(--landing-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-tour__note {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--landing-line);
  border-radius: 0.9rem;
  background: var(--landing-panel-solid);
  box-shadow: 0 1rem 2.5rem rgb(12 30 56 / 14%);
}

[data-theme="dark"] .landing-tour__note {
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 45%);
}

.landing-tour__note-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--landing-blue);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landing-tour__note strong {
  display: block;
  font-size: 1.02rem;
}

.landing-tour__note p {
  margin: 0.5rem 0 0;
  color: var(--landing-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.landing-tour__note code {
  padding: 0.08em 0.32em;
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--landing-blue), transparent 88%);
  color: var(--landing-ink);
  font-family: var(--font-mono);
  font-size: 0.85em;
  white-space: nowrap;
}

/* A panel belongs to the row above it on a small screen and to a column
   beside the list on a large one. The markup keeps each panel next to its
   own row either way; here the panels are lifted out of the flow so the
   rows stay stacked tight against each other. A panel left in the grid
   would span every row and hand its height back to them as gaps. */
.landing-picker {
  --landing-picker-rail: 20rem;
  --landing-picker-gutter: clamp(1.5rem, 4vw, 3rem);
  /* Held as one value: a minifier may drop the space between a var() and
     a following function, which would make the declaration invalid. */
  --landing-picker-columns: 20rem minmax(0, 1fr);
  position: relative;
  display: grid;
  grid-template-columns: var(--landing-picker-columns);
  gap: 0.4rem var(--landing-picker-gutter);
  align-content: start;
  /* Room for the tallest panel before the script measures the real one. */
  min-height: 26rem;
  margin-top: 3rem;
}

.landing-picker__item {
  display: contents;
}

.landing-picker .landing-picker__row {
  grid-column: 1;
}

.landing-picker .landing-picker__panel {
  position: absolute;
  top: 0;
  left: calc(var(--landing-picker-rail) + var(--landing-picker-gutter));
  right: 0;
}

.landing-diagnostics {
  display: grid;
  gap: 1rem;
  /* Both the wrapper and each panel need this. A grid item defaults to
     min-width:auto, which grows to the widest line of the error text and
     pushes the whole card past the right edge of the page instead of
     letting the message scroll inside it. */
  min-width: 0;
}

.landing-diagnostic {
  min-width: 0;
  padding: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--landing-warm), transparent 60%);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--landing-warm), transparent 92%);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.65;
}

.landing-diagnostic__type {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--landing-warm);
  font-weight: 700;
}

.landing-diagnostic__mutation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--landing-warm), transparent 75%);
  color: var(--landing-faint);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.landing-diagnostic__blurb {
  margin-left: auto;
  color: var(--landing-muted);
  letter-spacing: 0;
  text-transform: none;
}

/* The snippet sits above its error as its own card, styled like every
   other code block on the page. */
.landing-picker__panel {
  display: grid;
  min-width: 0;
}

/* Context for the snippet under it: what the capability is and what it
   does not promise, before the reader gets to the code. */
.landing-picker__note {
  margin-bottom: 0.6rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--landing-line);
  border-radius: 0.9rem;
  background: var(--landing-panel);
}

.landing-picker__note p,
.landing-picker__note ul {
  margin: 0;
  color: var(--landing-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.landing-picker__note p + p {
  margin-top: 0.7rem;
}

.landing-picker__note code {
  padding: 0.08em 0.32em;
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--landing-blue), transparent 88%);
  color: var(--landing-ink);
  font-family: var(--font-mono);
  font-size: 0.85em;
  white-space: nowrap;
}

.landing-picker__code {
  min-width: 0;
}

/* The real message carries its own line breaks and carets, so it keeps
   its whitespace and scrolls sideways rather than rewrapping. */
.landing-diagnostic pre {
  overflow-x: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--landing-ink);
  font-size: 0.72rem;
  line-height: 1.6;
  tab-size: 2;
}

.landing-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.landing-flow li {
  position: relative;
  min-height: 10rem;
  padding: 1.2rem;
  border: 1px solid var(--landing-line);
  background: var(--landing-panel);
}

.landing-flow li:nth-child(n + 2) {
  border-left: 0;
}

.landing-flow li:first-child {
  border-radius: 0.9rem 0 0 0.9rem;
}

.landing-flow li:last-child {
  border-radius: 0 0.9rem 0.9rem 0;
}

.landing-flow__step {
  display: block;
  color: var(--landing-blue);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.landing-flow strong {
  display: block;
  margin-top: 1.6rem;
  font-size: 1.15rem;
}

.landing-flow p {
  margin: 0.55rem 0 0;
  color: var(--landing-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.landing-capabilities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 3rem 0 0;
  padding: 0;
  border-top: 1px solid var(--landing-line);
  list-style: none;
}

.landing-capabilities li {
  padding: 1.35rem 1.35rem 1.35rem 0;
  border-bottom: 1px solid var(--landing-line);
}

.landing-capabilities li + li {
  padding-left: 1.35rem;
  border-left: 1px solid var(--landing-line);
}

.landing-capabilities strong {
  display: block;
  color: var(--landing-ink);
}

.landing-capabilities span {
  display: block;
  margin-top: 0.65rem;
  color: var(--landing-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.landing-composer {
  --composer-line: color-mix(in srgb, var(--landing-line) 86%, transparent);
  --composer-panel: color-mix(in srgb, var(--landing-panel) 94%, var(--landing-blue) 6%);
  --composer-stage-start: color-mix(in srgb, var(--landing-blue) 22%, var(--landing-bg-deep));
  --composer-stage-end: color-mix(in srgb, var(--landing-violet) 18%, var(--landing-bg-deep));
  overflow: clip;
  margin-top: 2.25rem;
  border: 1px solid var(--composer-line);
  border-radius: 1.15rem;
  background: var(--landing-panel);
  box-shadow: 0 1.5rem 4rem rgb(6 18 38 / 10%);
  color: var(--landing-ink);
}

.landing-composer button {
  font: inherit;
}

.landing-composer button {
  touch-action: manipulation;
}

.landing-composer button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--landing-blue) 42%, transparent);
  outline-offset: 2px;
}

.landing-composer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.landing-composer__bar {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--composer-line);
  background: color-mix(in srgb, var(--landing-panel) 96%, var(--landing-blue) 4%);
}

.landing-composer__bar-copy {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.35rem;
}

.landing-composer__bar p {
  margin: 0;
  color: var(--landing-muted);
  font-size: 0.82rem;
}

.landing-composer__bar h3 {
  margin: 0;
  color: var(--landing-ink);
  font-size: 0.95rem;
}

.landing-composer__reset,
.landing-composer__palette button {
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--composer-line);
  border-radius: 0.5rem;
  background: var(--landing-panel);
  color: var(--landing-ink);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.landing-composer button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.landing-composer__layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.95fr) minmax(20rem, 1.65fr);
  height: 38rem;
  min-height: 31rem;
}

.landing-composer__palette {
  overflow: auto;
  min-width: 0;
  padding: 0.75rem;
  border-right: 1px solid var(--composer-line);
  background: var(--composer-panel);
}

.landing-composer__palette-group {
  margin-top: 0.65rem;
}

.landing-composer__palette-group:first-child {
  margin-top: 0;
}

.landing-composer__palette-group h4 {
  margin: 0 0 0.3rem;
  color: var(--landing-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-composer__palette-group ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-composer__palette-group li {
  min-width: 0;
}

.landing-composer__palette-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.15rem !important;
  padding: 0.28rem 0.45rem !important;
  text-align: left;
  touch-action: pan-y !important;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.landing-composer__palette-item:hover {
  border-color: color-mix(in srgb, var(--landing-blue) 45%, var(--composer-line));
  box-shadow: 0 0.35rem 1rem rgb(6 18 38 / 8%);
}

.landing-composer__palette-group li.is-drag-pending .landing-composer__palette-item,
.landing-composer__palette-group li.is-drag-source .landing-composer__palette-item {
  border-color: var(--landing-blue);
  background: color-mix(in srgb, var(--landing-blue) 10%, var(--landing-panel));
  box-shadow: 0 0.9rem 2rem rgb(6 18 38 / 20%);
  transform: scale(1.035) rotate(-1deg);
}

.landing-composer__palette-group li.is-drag-source .landing-composer__palette-item {
  opacity: 0.72;
}

.landing-composer__grip {
  display: grid;
  place-items: center;
  width: 1rem;
  min-height: 1.5rem;
  color: var(--landing-faint);
  cursor: grab;
  user-select: none;
}

.landing-composer__palette-item strong {
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-composer__workspace {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  min-width: 0;
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--landing-cyan) 24%, transparent), transparent 36%),
    radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--landing-violet) 20%, transparent), transparent 40%),
    radial-gradient(rgb(255 255 255 / 28%) 0.7px, transparent 0.7px),
    linear-gradient(145deg, var(--composer-stage-start), var(--composer-stage-end));
  background-size: auto, auto, 14px 14px, auto;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
}

.landing-composer__board {
  zoom: 0.8;
  position: relative;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(1.35rem, 3.8vw, 2.8rem);
  overflow-anchor: none;
  scrollbar-gutter: stable;
}

.landing-composer__canvas {
  display: grid;
  align-content: start;
  min-height: 100%;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border: 1px solid color-mix(in srgb, white 48%, var(--composer-line));
  border-radius: 0.9rem;
  background: Canvas;
  box-shadow:
    0 2rem 4.5rem rgb(5 15 38 / 28%),
    0 0.35rem 1rem rgb(5 15 38 / 18%),
    inset 0 0 0 1px rgb(255 255 255 / 42%);
  color: CanvasText;
}

.landing-composer__rendered-recipe {
  display: contents;
}

.landing-composer__rendered-recipe.is-just-placed > * {
  animation: landing-composer-arrive 220ms ease-out;
}

.landing-composer__canvas :where([data-citry-ui-part]) {
  max-inline-size: 100%;
}

.landing-composer__canvas [data-composer-inert-control] {
  cursor: default !important;
}

@keyframes landing-composer-arrive {
  from {
    opacity: 0;
    transform: translateY(0.45rem) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.landing-composer__drop {
  display: grid;
  place-items: center;
  gap: 0.2rem;
  width: 100%;
  min-width: min(100%, 7rem);
  min-height: 4.5rem;
  margin-block: 0.55rem;
  padding: 0.75rem;
  border: 1px dashed color-mix(in srgb, var(--landing-blue) 38%, var(--composer-line)) !important;
  border-radius: 0.65rem;
  border-color: color-mix(in srgb, var(--landing-blue) 38%, var(--composer-line)) !important;
  background: color-mix(in srgb, var(--landing-blue) 4%, var(--landing-panel)) !important;
  color: var(--landing-muted) !important;
  cursor: pointer !important;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
  font-size: 1rem;
}

.landing-composer__drop > strong {
  color: var(--landing-ink);
  font-size: 1.2rem;
}

.landing-composer__drop > small {
  max-width: 26rem;
  color: var(--landing-muted);
  font-size: 1rem;
  line-height: 1.45;
}

.landing-composer__drop--root {
  min-height: clamp(15rem, 45vh, 22rem);
  margin: 0;
}

.landing-composer__drop--flow {
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  border-width: 0 !important;
  opacity: 0;
  pointer-events: none !important;
  transition:
    max-height 180ms ease,
    min-height 180ms ease,
    margin 180ms ease,
    padding 180ms ease,
    opacity 120ms ease,
    flex-basis 180ms ease,
    inline-size 180ms ease;
}

.landing-composer__drop--flow[data-composer-drop-axis="inline"] {
  flex: 0 0 0;
  inline-size: 0;
  max-inline-size: 0;
}

.landing-composer[data-composer-dragging]
  .landing-composer__drop--flow.is-drag-near,
.landing-composer__drop--flow:focus-visible {
  min-height: 4rem;
  max-height: 5rem;
  margin-block: 0.4rem;
  padding: 0.65rem;
  border-width: 2px !important;
  opacity: 1;
  pointer-events: auto !important;
}

.landing-composer[data-composer-dragging]
  .landing-composer__drop--flow[data-composer-drop-axis="inline"].is-drag-near,
.landing-composer__drop--flow[data-composer-drop-axis="inline"]:focus-visible {
  flex-basis: clamp(4.5rem, 18%, 7rem);
  min-width: 4.5rem;
  min-height: 3rem;
  max-width: 7rem;
  max-height: 5rem;
  margin: 0 0.3rem;
}

.landing-composer__drop.is-selected,
.landing-composer__drop[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--landing-blue) 55%, var(--composer-line)) !important;
  background: color-mix(in srgb, var(--landing-blue) 7%, var(--landing-panel)) !important;
  color: var(--landing-ink) !important;
}

.landing-composer[data-composer-dragging] .landing-composer__board {
  background: color-mix(in srgb, var(--landing-blue) 5%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--landing-blue) 32%, transparent);
}

.landing-composer__drop.is-drag-available:not(.landing-composer__drop--flow),
.landing-composer__drop--flow.is-drag-near {
  border-width: 2px !important;
  border-color: var(--landing-blue) !important;
  background: color-mix(in srgb, var(--landing-blue) 12%, var(--landing-panel)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--landing-blue) 12%, transparent);
  color: var(--landing-ink) !important;
}

.landing-composer__drop.is-drag-target {
  background: color-mix(in srgb, var(--landing-blue) 23%, var(--landing-panel)) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--landing-blue) 22%, transparent);
  transform: scale(1.01);
}

.landing-composer__drop.is-drag-unavailable {
  opacity: 0.32;
}

.landing-composer__drag-cue {
  position: sticky;
  z-index: 4;
  top: 0;
  width: fit-content;
  max-height: 0;
  margin: 0 auto;
  padding: 0rem 0.8rem;
  border-radius: 999px;
  background: var(--landing-blue);
  box-shadow: 0 0.7rem 1.6rem rgb(6 18 38 / 22%);
  color: white;
  font-size: 1rem;
  font-weight: 750;
  opacity: 0;
  transform: translateY(-0.8rem);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}

.landing-composer[data-composer-dragging] .landing-composer__drag-cue {
  max-height: 3rem;
  opacity: 1;
  transform: translateY(0);
  padding: 0.5rem 0.8rem;
}

.landing-composer__drag-ghost {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr);
  column-gap: 0.55rem;
  align-items: center;
  min-width: 11rem;
  max-width: 17rem;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--landing-blue);
  border-radius: 0.7rem;
  background: var(--landing-panel);
  box-shadow: 0 1.1rem 2.7rem rgb(6 18 38 / 28%);
  color: var(--landing-ink);
  font-size: 0.72rem;
  pointer-events: none;
}

.landing-composer__drag-ghost-grip {
  grid-row: 1 / span 2;
  color: var(--landing-blue);
  font-size: 1rem;
}

.landing-composer__drag-ghost strong {
  font-size: 0.78rem;
}

.landing-composer__drag-ghost small {
  margin-top: 0.1rem;
  color: var(--landing-muted);
  font-size: 0.62rem;
}

@media (max-width: 64rem) {
  .landing-composer__layout {
    grid-template-columns: minmax(15rem, 0.8fr) minmax(20rem, 1.4fr);
  }
}

@media (max-width: 44rem) {
  .landing-composer__bar {
    align-items: stretch;
    flex-direction: column;
  }

  .landing-composer__layout {
    display: block;
    height: auto;
  }

  .landing-composer__palette {
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--composer-line);
  }

  .landing-composer__workspace {
    min-height: 28rem;
    max-height: 38rem;
  }

  .landing-composer__board {
    min-height: 24rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-composer__palette-item,
  .landing-composer__drop,
  .landing-composer__drag-cue {
    transition: none;
  }

  .landing-composer__rendered-recipe.is-just-placed > * {
    animation: none;
  }
}

@media (forced-colors: active) {
  .landing-composer,
  .landing-composer__canvas,
  .landing-composer__palette-item {
    border-color: CanvasText;
  }

  .landing-composer__workspace,
  .landing-composer__canvas {
    background: Canvas;
    box-shadow: none;
  }

  .landing-composer__drop[aria-pressed="true"],
  .landing-composer__drop.is-drag-target,
  .landing-composer__drop.is-drag-available:not(.landing-composer__drop--flow),
  .landing-composer__drop--flow.is-drag-near,
  .landing-composer__palette-group li.is-drag-source .landing-composer__palette-item {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }
}

.landing-trust-card {
  height: 100%;
  padding: 1.4rem;
  border: 1px solid var(--landing-line);
  border-radius: 0.9rem;
  background: var(--landing-panel);
}

.landing-trust-card h3 {
  margin: 0;
  font-size: 1rem;
}

.landing-trust-card ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--landing-muted);
}

.landing-trust-card li {
  margin-top: 0.65rem;
  line-height: 1.55;
}

/* The acknowledgment grid reads as one texture of faces, so the portraits
   are much smaller here than on the People page and sit close together. */
.landing-shell .user-list {
  gap: 0.55rem;
}

.landing-shell .user .avatar-wrapper {
  width: 2.4em;
  height: 2.4em;
}

.landing-shell .user .avatar-wrapper img {
  filter: saturate(0.85);
}

.landing-maintainer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--landing-line);
}

.landing-maintainer__portrait .user-list {
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
}

.landing-maintainer__portrait .user .avatar-wrapper {
  width: 4.75rem;
  height: 4.75rem;
}

.landing-maintainer__name,
.landing-maintainer__role {
  margin: 0;
}

.landing-maintainer__name a {
  color: var(--landing-ink);
  font-size: 1.05rem;
  font-weight: 680;
  text-decoration: none;
}

.landing-maintainer__name a:hover {
  color: var(--landing-blue);
}

.landing-maintainer__role {
  margin-top: 0.25rem;
  color: var(--landing-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.landing-human-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.2rem;
  margin-top: 1.5rem;
  color: var(--landing-muted);
  font-size: 0.88rem;
}

.landing-final {
  padding: clamp(7rem, 14vw, 13rem) 0;
  text-align: center;
}

.landing-content .landing-final h2 {
  max-width: 13ch;
  margin-inline: auto;
  padding-bottom: 3rem;
}

.landing-final p {
  max-width: 38rem;
  margin: 1.3rem auto 0;
  color: var(--landing-muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.landing-final .landing-actions,
.landing-final .landing-install {
  justify-content: center;
  margin-inline: auto;
}

.landing-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: min(76rem, calc(100% - 3rem));
  margin-inline: auto;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--landing-line);
  color: var(--landing-faint);
  font-size: 0.78rem;
}

.landing-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 900px) {
  .landing-editor {
    grid-template-columns: 1fr;
  }

  /* The interaction itself leads on a small screen; the six summaries
     then remain available below it without shrinking the source. */
  .landing-editor__code {
    grid-row: 1;
  }

  .landing-editor__notes {
    position: static;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-tour {
    grid-template-columns: 1fr;
    position: relative;
  }

  .landing-tour__notes {
    position: static;
  }

  /* On a narrow screen the note follows the line it explains, so the
     reader never has to scroll away from the code to read it. */
  .landing-tour__notes.is-floating {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
  }

  .landing-tour__notes.is-floating .landing-tour__hint {
    display: none;
  }

  .landing-tour__notes.is-floating .landing-tour__note {
    box-shadow: 0 1rem 2.5rem rgb(6 18 38 / 28%);
  }

  /* The code panel keeps its place beside the copy, just smaller, until
     the columns get too narrow to read either of them. */
  .landing-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 1.5rem;
  }

  .landing-hero__code pre {
    padding: 0.9rem;
    font-size: 0.7rem;
    line-height: 1.5;
  }

  .landing-proof-grid,
  .landing-error-grid,
    .landing-human-grid,
  .landing-trust-grid {
    grid-template-columns: 1fr;
  }

  .landing-flow {
    grid-template-columns: 1fr;
  }

  .landing-flow li:nth-child(n + 2) {
    border-top: 0;
    border-left: 1px solid var(--landing-line);
  }

  .landing-flow li:first-child {
    border-radius: 0.9rem 0.9rem 0 0;
  }

  .landing-flow li:last-child {
    border-radius: 0 0 0.9rem 0.9rem;
  }

  .landing-capabilities {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-capabilities li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 720px) {
  .landing-hero__grid {
    grid-template-columns: 1fr;
  }

  .landing-hero__code {
    display: none;
  }
}

@media (max-width: 600px) {
  .landing-editor__notes {
    grid-template-columns: 1fr;
  }

  .landing-editor__code > .highlight > pre {
    padding-inline: 1rem;
    font-size: 0.7rem;
  }

  .landing-editor__hover {
    width: calc(100% - 1rem);
  }

  /* One column, and each panel sits under its own row, so a reader never
     has to look elsewhere on the page for the answer. */
  .landing-picker {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .landing-picker__item {
    display: block;
  }

  /* Back into the flow, directly under the row that opened it. */
  .landing-picker .landing-picker__panel {
    position: static;
    margin: 0.6rem 0 1.2rem;
  }

  .landing-picker .landing-picker__row {
    grid-template-columns: 1.75rem 1fr auto;
  }

  .landing-picker .landing-picker__caret {
    display: block;
  }

  .landing-picker .landing-picker__row.is-active .landing-picker__caret {
    transform: rotate(180deg);
    color: var(--landing-blue);
  }

  .landing-hero,
  .landing-section,
  .landing-final,
  .landing-footer {
    width: min(100% - 2rem, 76rem);
  }

  .landing-hero {
    min-height: 42rem;
    padding-top: 4rem;
  }

  .landing-hero__copy {
    width: 100%;
    margin-top: 0;
  }

  .landing-content .landing-hero h1 {
    font-size: clamp(2.6rem, 11vw, 3.6rem);
  }

  .landing-actions {
    align-items: stretch;
  }

  .landing-button {
    flex: 1 1 100%;
  }

  .landing-install {
    width: 100%;
    justify-content: space-between;
  }

  .landing-capabilities {
    grid-template-columns: 1fr;
  }

  .landing-capabilities li + li,
  .landing-capabilities li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .landing-footer {
    flex-direction: column;
  }

}

@media (max-width: 768px) {
  .citry-landing__nav-drawer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 70;
    transform: translateX(-100%);
  }

  body.djc-drawer-open .citry-landing__nav-drawer {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-shell *,
  .landing-shell *::before,
  .landing-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}