/* ==========================================================================
   Trycord public website.

   The composition is built from depth. Charcoal planes sit at different
   distances from the reader - some flat on the page, some tilted and
   overlapping, some framed inside a device - and flame light runs along the
   edges where the planes meet. The backgrounds in assets/backgrounds are the
   brand's own art: the geometry of the mark, the eclipse, and the horizon, so
   the site is lit by the same pictures the product is.

   Orange is a signal, not a background. It marks the one action on a screen,
   the word a headline turns on, the light along an edge, the edge of a code
   block, and the page a reader is on. Surfaces carry everything else. Glass is
   kept for what floats over the page: the masthead, its menus, the product
   window, and the paired panels.

   Every colour, type size, space, radius, shadow, duration and easing comes from
   css/design-tokens.css, which is generated from the asset library. This file
   declares the composition and nothing the library owns.

   Load order: design-tokens.css, then this file.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/trycord-assets/fonts/manrope-latin-wght-normal.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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/trycord-assets/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/trycord-assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
}

* { box-sizing: border-box; }

:root {
  color-scheme: dark;

  /* Composition: how wide the page reads, how tall the masthead is, and the
     display sizes the marketing pages need. These belong to this site, not to
     the library. */
  --header-h: 68px;
  --content-w: 1180px;
  --prose-w: 70ch;

  --display-2xl: clamp(2.6rem, 6vw, 4.5rem);
  --display-xl: clamp(2.2rem, 4.4vw, 3.4rem);
  --display-lg: clamp(2rem, 3.4vw, 2.7rem);
  --display-md: clamp(1.5rem, 2.6vw, 2rem);
  --display-sm: clamp(1.2rem, 1.9vw, 1.45rem);

  /* Monumental type: the size a poster is set at. It is used where a section
     wants to be read from across the room, and nowhere else. */
  --display-monument: clamp(2.6rem, 6.6vw, 5.2rem);
  --display-monument-sm: clamp(2.3rem, 5.2vw, 3.8rem);

  /* The page's rhythm. The library owns the scale a component is built from;
     how much air a section carries is this site's own decision, so the size of
     that air is declared here rather than taken from a token that does not
     exist. */
  --section-pad: clamp(var(--space-9), 7vw, 6rem);
  --page-pad: clamp(var(--space-9), 6vw, 5rem);
  --block-pad: clamp(var(--space-8), 5vw, 4.5rem);

  /* The brand's own backgrounds. They are pictures, so they are named here
     once and used by path everywhere else. */
  --bg-planes: url("/assets/backgrounds/app-default.jpg");
  --bg-horizon: url("/assets/backgrounds/login.jpg");
  --bg-eclipse: url("/assets/backgrounds/ambient-eclipse.jpg");
  --bg-glyph: url("/assets/backgrounds/chat.jpg");
  --bg-curves: url("/assets/backgrounds/settings.jpg");

  --glow-a: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --glow-b: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --tint: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --tint-strong: color-mix(in srgb, var(--color-accent) 18%, transparent);
  --hairline: color-mix(in srgb, var(--color-border) 70%, transparent);
  --seam: linear-gradient(90deg,
    var(--color-accent) 0%,
    color-mix(in srgb, var(--color-accent) 30%, transparent) 46%,
    transparent 100%);
  /* The light that runs along an edge. It is the flame, thinned. */
  --wave-ember: color-mix(in srgb, var(--color-accent) 34%, transparent);
  --wave-warm: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface-sunken));

  --cutout: var(--color-background);
}

:root,
:root[data-theme="trycord"] {
  --color-on-accent: color-mix(in srgb, var(--color-accent) 18%, black);
}
:root[data-theme="light"] {
  --color-accent: var(--tc-brand-strong);
  --color-accent-hover: color-mix(in srgb, var(--tc-brand-strong) 88%, black);
  --color-accent-active: color-mix(in srgb, var(--tc-brand-strong) 78%, black);
  --color-on-accent: var(--tc-text-on-brand);
}

html {
  height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--space-3));
}

body { margin: 0; }

body {
  background:
    radial-gradient(900px 480px at 86% -10%, var(--glow-a), transparent 60%),
    var(--color-background);
  background-attachment: fixed;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

h1, h2, h3 {
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;
  text-wrap: balance;
}
p { text-wrap: pretty; }

.display {
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.wrap {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.center { text-align: center; }
.meta { color: var(--color-text-muted); font-size: var(--text-xs); }
.mt-5 { margin-top: var(--space-5); }
.mono { font-family: var(--font-mono); font-size: 0.92em; overflow-wrap: anywhere; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.plain-list a { color: var(--color-text-primary); display: inline-block; padding-block: var(--space-1); }
.plain-list a:hover { color: var(--color-accent); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: var(--space-2);
  z-index: var(--z-toast);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-2); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}
.kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 2px;
  background: var(--color-accent);
}

.op-field {
  display: inline;
  padding: 1px 5px;
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--tint);
  color: var(--color-accent);
  font-size: var(--text-sm);
}

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}


/* ==========================================================================
   The masthead and its menus
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background: color-mix(in srgb, var(--color-background) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 -1px 0 0 var(--hairline);
}
/* The seam under the masthead: the one place the signal runs the full width
   of every page. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--seam);
  opacity: 0.85;
  pointer-events: none;
}

.masthead {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-primary);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand .mark { width: 30px; height: 30px; color: var(--color-accent); flex: 0 0 auto; }
.brand-word { line-height: 1; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.nav-group { position: relative; }

.nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}
/* A menu that is open, or one being hovered, shows its place with the seam. */
.nav-trigger::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out);
}
.nav-trigger:hover { color: var(--color-text-primary); }
.nav-trigger:hover::after,
.nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-trigger .chevron { width: 14px; height: 14px; transition: transform var(--duration-fast) var(--ease-out); }
.nav-trigger[aria-expanded="true"] { color: var(--color-text-primary); }
.nav-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: var(--z-popover);
  min-width: 240px;
  padding: var(--space-2);
  background: color-mix(in srgb, var(--color-surface-elevated) 84%, transparent);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.nav-trigger[aria-expanded="true"] + .nav-menu { display: block; }

.nav-menu a {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
}
.nav-menu a:hover { background: var(--color-surface-hover); text-decoration: none; }
.nav-menu a strong { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.nav-menu a span { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }

.nav-menu--wide { left: 50%; transform: translateX(-50%); min-width: 540px; padding: var(--space-4); }
.nav-menu--wide .nav-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-4);
}
.nav-menu-foot {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-1);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
}
.nav-menu-foot p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }

.masthead-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

/* The actions that only make sense on a narrow screen: the masthead keeps one
   button there, and the rest live in the menu that opens under it. */
.nav-mobile-actions { display: none; }

@media (max-width: 700px) {
  .masthead-actions .btn-ghost { display: none; }
  .nav-mobile-actions {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) 0 var(--space-2);
    border-top: 1px solid var(--hairline);
    margin-top: var(--space-2);
  }
  .nav-mobile-actions .btn { width: 100%; }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-circle);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--color-accent); border-color: var(--color-border-strong); }
.theme-toggle .icon { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  flex: 0 0 auto;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu-toggle .icon { width: 20px; height: 20px; }


/* ==========================================================================
   Buttons and links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; border-color: var(--color-accent); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: transparent;
}
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); border-color: transparent; }
.btn-ghost { background: transparent; border-color: var(--color-border-strong); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.cta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  padding-block: var(--space-1);
  margin-block: calc(-1 * var(--space-1));
}
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }


/* ==========================================================================
   The home page: the hero
   ========================================================================== */

/* The hero is the brand's own geometry, at the size of a page: the planes of
   the mark laid out flat, with the flame along their edges. The picture sits
   behind everything and the headline is set over the quiet part of it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(var(--space-9), 7vw, 6rem) 0 clamp(var(--space-10), 7vw, 6.5rem);
  border-bottom: 1px solid var(--hairline);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg-planes) right center / cover no-repeat;
  opacity: 0.9;
}
/* The darkening that keeps the type readable over the picture. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--color-background) 6%, color-mix(in srgb, var(--color-background) 72%, transparent) 46%, transparent 82%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-background) 55%, transparent), transparent 40%);
  pointer-events: none;
}
/* The pictures are dark. The light theme keeps the surfaces and the light. */
:root[data-theme="light"] .hero::before { display: none; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(var(--space-8), 4vw, var(--space-10));
  align-items: center;
}

/* The headline is set like a poster: large, tight, and in capitals. One word
   carries the flame, and the rest is the page's own white. */
.hero h1 {
  font-size: var(--display-monument);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--space-6);
  max-width: 12ch;
}
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero .lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 46ch;
  margin: 0 0 var(--space-7);
}
.hero .cta { margin-bottom: var(--space-6); }

/* The small marks under the actions: the page's own index, in the way a
   gallery shows where it is. */
.marks { display: flex; align-items: center; gap: var(--space-3); }
.marks__line {
  width: 56px;
  height: 1px;
  background: var(--color-border-strong);
}
.marks__dots { display: flex; gap: 6px; }
.marks__dots span {
  width: 6px; height: 6px;
  border-radius: var(--radius-circle);
  background: var(--color-border-strong);
}
.marks__dots span:first-child { background: var(--color-accent); }

/* The framed composition of overlapping previews.
   A thin rectangle sits behind the cards, the way a mount frames a picture,
   and the cards themselves are turned a few degrees so they read as objects
   on a table rather than as boxes on a page. */
.stack {
  position: relative;
  min-width: 0;
  min-height: 540px;
  padding: var(--space-6) 0 var(--space-8);
}
.stack__frame {
  position: absolute;
  inset: 0 var(--space-2) var(--space-4) var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  pointer-events: none;
}
.stack__card {
  position: absolute;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
}
.stack__card--back {
  right: -6px;
  top: -6px;
  z-index: 1;
  transform: rotate(4deg);
}
.stack__card--front {
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 80%;
  transform: rotate(-2.5deg);
}

/* A device: a frame around a screen. The desktop one is the product window;
   the phone one is the mobile module, which the product ships as its own
   composition rather than a narrow copy of the desk. */
.device { position: relative; }
.device--phone {
  width: 196px;
  padding: 8px;
  border-radius: 28px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-sunken);
}
.device--phone .device__screen {
  border-radius: 22px;
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid var(--hairline);
}
.device--desktop { width: 100%; }

/* The phone's own chrome: the app bar the mobile module puts on every screen,
   a list of channels, and the bar of destinations along the bottom. */
.mock-speaker {
  width: 44px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  margin: 0 auto var(--space-2);
}
.mock-appbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  background: var(--color-surface);
}
.mock-appbar .mark { width: 18px; height: 18px; color: var(--color-accent); flex: 0 0 auto; }
.mock-appbar__name { font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.2; }
.mock-appbar__sub { font-size: 9px; color: var(--color-text-muted); line-height: 1.2; }
.mock-body { padding: var(--space-2) 0; min-height: 168px; }
.mock-label {
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.mock-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.mock-row .hash { color: var(--color-text-muted); }
.mock-row--active { background: var(--tint-strong); color: var(--color-text-primary); font-weight: var(--weight-semibold); }
.mock-badge {
  margin-left: auto;
  min-width: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-align: center;
}
.mock-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--hairline);
  background: var(--color-surface);
}
.mock-tabs span {
  display: grid;
  place-items: center;
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
}
.mock-tabs .icon { width: 16px; height: 16px; }
.mock-tabs .is-active { color: var(--color-accent); }

/* The wide strip that sits under the hero. Its columns are divided by rules
   rather than by gaps, and it carries facts, not numbers. */
.strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.strip__cell {
  padding: var(--space-6);
  border-left: 1px solid var(--hairline);
}
.strip__cell:first-child { border-left: 0; }
.strip__cell b {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.strip__cell span {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}
.strip__cell .kicker { margin-bottom: var(--space-3); }

@media (max-width: 900px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__cell:nth-child(3) { border-left: 0; }
  .strip__cell:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  .strip { grid-template-columns: 1fr; }
  .strip__cell { border-left: 0; }
  .strip__cell:nth-child(n + 2) { border-top: 1px solid var(--hairline); }
}


/* ==========================================================================
   Sections
   ========================================================================== */

main { counter-reset: section; }

.section {
  counter-increment: section;
  position: relative;
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--hairline);
}
.section:first-of-type { border-top: 0; }

/* A plane is a full-width band of the deeper surface. It is used for the one
   section that argues for the server, so the page changes register there and
   comes back to the charcoal afterwards. */
.section--plane {
  background: var(--color-surface-sunken);
  border-top: 0;
}
.section--plane::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--seam);
}

/* The head of a section: the number in the margin, the title beside it, and the
   explanation on the right. The children are placed by hand rather than by
   their order, so they sit where they belong whatever order the page was
   written in. */
.section-head {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(var(--space-4), 3vw, var(--space-7));
  row-gap: var(--space-2);
  align-items: end;
  margin: 0 0 var(--space-8);
}
.section-head::before {
  content: counter(section, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.section-head .kicker { grid-column: 2; grid-row: 1; margin-bottom: 0; }
.section-head h2 { grid-column: 2; grid-row: 2; font-size: var(--display-lg); line-height: 1.1; margin: 0; }
.section-head > p:not(.kicker) {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: end;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}
/* A section with nothing to explain has no third column, so the title takes the
   whole width. */
.section-head:not(:has(> p:not(.kicker))) h2 { grid-column: 2 / -1; }

/* A statement head puts a long sentence across the page, with its explanation
   underneath it, rather than beside it. */
.section-head--statement h2 {
  grid-column: 2 / -1;
  grid-row: 2;
  font-size: var(--display-xl);
  line-height: 1.04;
  max-width: 20ch;
}
.section-head--statement > p:not(.kicker) {
  grid-column: 2 / -1;
  grid-row: 3;
  align-self: start;
  max-width: 60ch;
  margin-top: var(--space-5);
}

@media (max-width: 900px) {
  .section-head {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    align-items: start;
  }
  .section-head::before { grid-row: 1 / span 2; }
  .section-head .kicker { grid-column: 2; grid-row: 1; }
  .section-head h2 { grid-column: 2; grid-row: 2; }
  .section-head > p:not(.kicker) { grid-column: 2; grid-row: 3; margin-top: var(--space-2); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--block-pad);
  align-items: center;
}
/* The pair where one half is a code sample. The sample gets the wider half, so
   a line of code is not cut off at the edge of its column. */
.split--code { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

/* A headline inside a split reads as a statement, not a chapter title. */
.split h2 { font-size: var(--display-lg); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 var(--space-3); }

/* A feature list is ruled rows, not boxes. The icon is a small square on the
   right, so the text keeps the room. */
.features { display: grid; border-top: 1px solid var(--hairline); }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--hairline);
}
.feature-copy { min-width: 0; }
.feature-copy h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.feature-copy p { margin: 0; color: var(--color-text-secondary); max-width: 62ch; }
.feature-copy .text-link { margin-top: var(--space-2); }
.feature-icon {
  width: 48px;
  height: 48px;
  justify-self: end;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--tint);
}
.feature-icon .icon { width: 22px; height: 22px; color: var(--color-accent); }

.steps { display: grid; counter-reset: step; border-top: 1px solid var(--hairline); }
.step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--hairline);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-accent);
}
.step h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.step p { margin: 0; color: var(--color-text-secondary); max-width: 64ch; }

/* A code callout: the sample on the right, its caption above it, and a seam
   down its left edge so it reads as a specimen, not as page text. */
.code-callout { margin: 0; min-width: 0; }
.code-callout figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.code-callout figcaption::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
}
.code-callout pre { margin: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
/* A group of four is two by two, and a group of three is three across, so no
   group is left with one card on its own row. */
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .cards--2, .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cards, .cards--2, .cards--3 { grid-template-columns: 1fr; }
}

/* A card is a solid plane with a hairline edge and a faint seam along its top.
   The cards are content, not controls, so they do not lift on hover. */
.card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-5);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--seam);
  opacity: 0.3;
}
.card .feature-icon { width: 48px; height: 48px; justify-self: start; margin-bottom: var(--space-4); }
.card .feature-icon .icon { width: 22px; height: 22px; }
.card h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.card p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.card .tag {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.tag--shipped { background: var(--color-success-muted); color: var(--color-success); }
.tag--progress { background: var(--color-warning-muted); color: var(--color-warning); }
.tag--planned { background: var(--color-info-muted); color: var(--color-info); }
.tag--unavailable { background: var(--color-danger-muted); color: var(--color-danger); }

/* The closing band: a charcoal plane, not an orange slab. The orange is kept
   for the one button that asks the reader to do something. */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: var(--block-pad);
  background: var(--color-surface-sunken);
}
.band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--seam);
  z-index: 1;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(560px 260px at 100% 0%, var(--glow-a), transparent 70%);
  pointer-events: none;
}
/* The closing band carries the brand's eclipse behind it, so the last thing on
   the page is a picture of the brand rather than a slab of colour. */
.band--eclipse {
  background: var(--color-surface-sunken) no-repeat;
  background-image: var(--bg-eclipse);
  background-size: cover;
  background-position: center;
  border-color: var(--hairline);
}
.band--eclipse::after {
  background:
    radial-gradient(560px 260px at 100% 0%, var(--glow-a), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-background) 35%, transparent), color-mix(in srgb, var(--color-background) 78%, transparent));
}
:root[data-theme="light"] .band--eclipse { background-image: none; }

.band h2 { font-size: var(--display-lg); margin: 0 0 var(--space-3); max-width: 22ch; }
.band p { margin: 0 0 var(--space-6); max-width: 62ch; font-size: var(--text-lg); color: var(--color-text-secondary); }

/* A pill is the shape the brand's own wordmark has, so the one action on a
   page is sometimes set in it. */
.btn--pill {
  border-radius: var(--radius-pill);
  padding-inline: var(--space-8);
}


/* ==========================================================================
   The cinematic band
   ========================================================================== */

/* A full-width band with the type set like a poster and the product floating
   in front of it. The picture behind it is the brand's own horizon, darkened
   so the type stays readable. */
.cinema {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-surface-sunken);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(var(--space-10), 8vw, 7rem) 0;
}
.cinema::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg-horizon) center center / cover no-repeat;
}
/* The darkening over the picture. It is heavy on the left, where the type
   sits, and light on the right, where the cards float. */
.cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--color-background) 88%, transparent) 12%, color-mix(in srgb, var(--color-background) 62%, transparent) 52%, color-mix(in srgb, var(--color-background) 78%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-background) 45%, transparent), transparent 30%, color-mix(in srgb, var(--color-background) 70%, transparent));
  pointer-events: none;
}
:root[data-theme="light"] .cinema::before { display: none; }

.cinema__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: end;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-11));
}
.cinema__head h2 {
  font-size: var(--display-monument-sm);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0;
}
.cinema__head h2 em { font-style: normal; color: var(--color-accent); }
.cinema__head p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* The floating cards. Each one is a different height and a different depth,
   and they lean on each other the way objects on a table do. */
.floaters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.floater {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.floater:nth-child(2) { margin-top: var(--space-8); }
.floater:nth-child(3) { margin-top: var(--space-4); }
.floater__screen {
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--hairline);
}
/* The cards hold the client's own interface, at the size a card can carry. */
.floater__screen .mini-channel-group { padding: 0; }
.floater__screen .mini-channel { padding: 3px var(--space-2); font-size: var(--text-xs); }
.floater__screen .mini-channel-label { font-size: 9px; padding: 0 var(--space-2) var(--space-2); }
.floater__screen .mini-messages { padding: 0; gap: var(--space-3); }
.floater__screen .mini-msg { grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-2); }
.floater__screen .mini-avatar { width: 22px; height: 22px; font-size: 10px; }
.floater__screen .mini-msg-head .who { font-size: var(--text-xs); }
.floater__screen .mini-msg p { font-size: 10px; line-height: 1.4; }
.floater__screen .mini-members { padding: 0; background: none; border-left: 0; }
.floater__screen .mini-member { padding: 2px 0; }
.floater__screen .mini-member .who { font-size: var(--text-xs); }
.floater__screen .mini-member .role { font-size: 9px; }
.floater__body { padding: var(--space-4); }
.floater__body h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); }
.floater__body p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
/* The small round control in the corner of a card, the way a gallery carries
   one. */
.floater__control {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
}
.floater__control .icon { width: 15px; height: 15px; }

@media (max-width: 760px) {
  .cinema__head { grid-template-columns: 1fr; }
  .floaters { grid-template-columns: 1fr; }
  .floater:nth-child(2), .floater:nth-child(3) { margin-top: 0; }
}


/* ==========================================================================
   The framed product sheet
   ========================================================================== */

/* The large preview: a browser-like frame around what is really there. It is
   the biggest object on the page and it is meant to be looked at. */
.showcase {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.showcase__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline);
  background: var(--color-surface-sunken);
}
.showcase__dots { display: flex; gap: 6px; }
.showcase__dots span {
  width: 9px; height: 9px;
  border-radius: var(--radius-circle);
  background: var(--color-border-strong);
}
.showcase__url {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 2px var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.showcase__body { background: var(--color-surface-sunken); }
.showcase__body pre { margin: 0; border: 0; border-radius: 0; background: transparent; }


/* ==========================================================================
   Light that runs along the edge
   ========================================================================== */

/* The flame, wrapped around a section's edge rather than laid across it. */
.streak {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(42px);
  opacity: 0.5;
  z-index: -1;
}
.streak--ember { background: var(--wave-ember); }
.streak--warm { background: var(--wave-warm); }


/* ==========================================================================
   Editorial pages
   ========================================================================== */

/* Oversized type, set in lines that are broken by hand rather than by the
   width of a column. The space around it does the work. */
.editorial__type {
  font-size: var(--display-monument-sm);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0;
}
.editorial__type span { display: block; }
.editorial__type em { font-style: normal; color: var(--color-accent); }
.editorial__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 5vw, var(--space-11));
  align-items: start;
}
.editorial__copy { max-width: 46ch; }
.editorial__copy p { color: var(--color-text-secondary); font-size: var(--text-lg); line-height: var(--leading-relaxed); }

/* The asymmetric arrangement: a tall phone rises above a wider window, and
   the two overlap rather than sitting in a grid. */
.asym {
  position: relative;
  min-height: 380px;
}
.asym__item { position: absolute; }
.asym__item--phone { right: 4%; top: 0; z-index: 2; }
.asym__item--wide { left: 0; bottom: 0; z-index: 1; width: 78%; }

@media (max-width: 900px) {
  .editorial__body { grid-template-columns: 1fr; }
  .asym { min-height: 0; display: grid; gap: var(--space-5); }
  .asym__item { position: static; width: auto !important; }
}


/* ==========================================================================
   A row of figures
   ========================================================================== */

/* The strip of figures. The groups are separated by rules, not by gaps, so the
   row reads as one instrument panel. */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.figures__cell {
  padding: var(--space-7) var(--space-6);
  border-left: 1px solid var(--hairline);
}
.figures__cell:first-child { border-left: 0; padding-left: 0; }
.figures__cell b {
  display: block;
  font-size: var(--display-md);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--space-2);
}
.figures__cell b em { font-style: normal; color: var(--color-accent); }
.figures__cell span {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 26ch;
}
@media (max-width: 900px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .figures__cell:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  .figures { grid-template-columns: 1fr; }
  .figures__cell { border-left: 0; padding-left: 0; }
  .figures__cell:nth-child(n + 2) { border-top: 1px solid var(--hairline); }
}

.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}


/* ==========================================================================
   The product window, and the miniature client that goes in it
   ========================================================================== */

/* The product window is the one place the glass does real work: the page's glow
   is behind it, and its chrome is a pane in front of that. It carries the same
   ember seam as the masthead, along its top edge. */
.app-window {
  position: relative;
  border: 1px solid var(--glass-edge, var(--color-border-strong));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--color-surface-elevated) 84%, transparent);
  box-shadow:
    inset 0 1px 0 0 var(--glass-sheen, transparent),
    0 40px 90px -50px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
}
.app-window::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--seam);
  z-index: 1;
}
.app-titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--color-surface-elevated) 55%, transparent);
}
.app-titlebar .dot { width: 10px; height: 10px; border-radius: var(--radius-circle); background: var(--color-border-strong); }
.app-titlebar .app-url {
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.mini-client {
  display: grid;
  grid-template-columns: 56px 200px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 420px;
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
  font-size: var(--text-base);
}
.app-window--tall .mini-client { height: min(74vh, 620px); }

.mini-rail {
  background: var(--color-surface-sunken);
  border-right: 1px solid var(--hairline);
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  overflow-y: auto;
}
.mini-rail-brand { width: 26px; height: 26px; color: var(--color-accent); margin-bottom: var(--space-2); flex: 0 0 auto; }
.mini-rail-btn {
  position: relative;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  cursor: pointer;
}
.mini-rail-btn:hover { background: var(--color-surface-hover); }
.mini-rail-btn[aria-current="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.mini-rail-btn[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.mini-rail-btn.is-joined::after {
  content: "";
  position: absolute;
  right: -3px; bottom: -3px;
  width: 12px; height: 12px;
  border-radius: var(--radius-circle);
  background: var(--color-success);
  border: 2px solid var(--color-surface-sunken);
}

.mini-channels {
  background: var(--color-surface);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mini-community {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}
.mini-community .mini-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-community p { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.mini-channel-group { padding: var(--space-3) var(--space-2); overflow-y: auto; }
.mini-channel-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 var(--space-2) var(--space-2);
}
.mini-channel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
}
.mini-channel:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.mini-channel[aria-current="true"] { background: var(--tint-strong); color: var(--color-text-primary); font-weight: var(--weight-semibold); }
.mini-channel .hash { color: var(--color-text-muted); font-weight: var(--weight-medium); }

.mini-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-background);
}
.mini-main-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}
.mini-main-head .mini-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); }
.mini-main-head p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* The list scrolls, and a scroll area that cuts a message in half looks broken.
     A soft edge says there is more below. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent 100%);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mini-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); }
.mini-avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-circle);
  display: grid;
  place-items: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--color-on-accent);
  background: var(--color-accent);
}
.mini-msg-head { display: flex; align-items: baseline; gap: var(--space-2); }
.mini-msg-head .who { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.mini-msg-head .when { font-size: var(--text-xs); color: var(--color-text-muted); }
.mini-msg p { margin: 2px 0 0; color: var(--color-text-secondary); font-size: var(--text-base); line-height: var(--leading-normal); }

.mini-members {
  background: var(--color-surface);
  border-left: 1px solid var(--hairline);
  padding: var(--space-3) var(--space-3);
  overflow-y: auto;
  min-width: 0;
}
.mini-client.has-members { grid-template-columns: 56px 200px minmax(0, 1fr) 172px; }
.mini-member { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-1); border-radius: var(--radius-md); }
.mini-member .who { font-size: var(--text-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-member .role { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-muted); }
.mini-presence { width: 8px; height: 8px; border-radius: var(--radius-circle); flex: 0 0 auto; background: var(--color-text-muted); }
.presence-online { background: var(--color-success); }
.presence-idle { background: var(--color-warning); }
.presence-dnd { background: var(--color-danger); }
.presence-offline { background: var(--color-border-strong); }

.mini-avatar.av-0 { background: var(--color-accent); }
.mini-avatar.av-1 { background: color-mix(in srgb, var(--color-accent) 58%, var(--color-info)); }
.mini-avatar.av-2 { background: color-mix(in srgb, var(--color-accent) 58%, var(--color-success)); }
.mini-avatar.av-3 { background: color-mix(in srgb, var(--color-accent) 62%, var(--color-warning)); }
.mini-avatar.av-4 { background: color-mix(in srgb, var(--color-accent) 62%, var(--color-danger)); }
.mini-avatar.av-5 { background: color-mix(in srgb, var(--color-accent) 45%, var(--color-text-muted)); }

.demo-controls { display: grid; gap: var(--space-5); }
.control-group { display: grid; gap: var(--space-2); }
.mini-composer {
  border-top: 1px solid var(--hairline);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.mini-composer input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-base);
}
.mini-composer input::placeholder { color: var(--color-text-muted); }

.mini-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--hairline);
  background: var(--color-surface-sunken);
}

.mini-client[data-density="compact"] { font-size: var(--text-sm); }
.mini-client[data-density="compact"] .mini-messages { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.mini-client[data-density="compact"] .mini-channel { padding: var(--space-1) var(--space-2); }

.mini-loading,
.mini-empty,
.mini-error {
  display: grid;
  place-content: center;
  gap: var(--space-3);
  text-align: center;
  min-height: 320px;
  padding: var(--space-8);
  color: var(--color-text-secondary);
}
.mini-spinner {
  width: 26px; height: 26px;
  margin: 0 auto;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-circle);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   The demo page's controls, and the panels beside them
   ========================================================================== */

.demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: start;
}
.demo-side { display: grid; gap: var(--space-5); position: sticky; top: calc(var(--header-h) + var(--space-6)); }
.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-5);
}
.panel h2 { margin: 0 0 var(--space-3); font-size: var(--text-md); font-weight: var(--weight-bold); }
.panel p { margin: 0 0 var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.panel p:last-child { margin-bottom: 0; }

.seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.seg button {
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.seg button:hover[aria-pressed="false"] { color: var(--color-text-primary); }

.field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.switch-row span { font-size: var(--text-sm); color: var(--color-text-secondary); }

.switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--color-border-strong); position: relative; transition: background var(--duration-fast) var(--ease-out); }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--radius-circle); background: var(--color-background); transition: transform var(--duration-fast) var(--ease-out); }
.switch input:checked + .track { background: var(--color-accent); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--color-accent); outline-offset: 2px; }


/* ==========================================================================
   Pages and prose
   ========================================================================== */

.page { padding-bottom: var(--section-pad); }

/* The head of a page. A short ember tick sits on its bottom rule, which is the
   only decoration a document page carries. The title is set large and in
   capitals, the way a section of a long document announces itself. */
.page-head {
  position: relative;
  padding: var(--page-pad) 0 var(--space-8);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-9);
}
.page-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 2px;
  background: var(--color-accent);
}
.page-head h1 {
  font-size: var(--display-monument-sm);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
  max-width: 18ch;
}
.page-head .lede {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 62ch;
}

/* The legal pages are read, not looked at. Their titles are set the way a
   document sets a title - in sentence case, at a document's size - and the
   page carries no picture and no cinema. */
[data-crumbs="Legal"] .page-head h1 {
  font-size: var(--display-lg);
  font-weight: 800;
  text-transform: none;
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  max-width: 26ch;
}

.prose-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: clamp(var(--space-8), 5vw, var(--space-11));
  align-items: start;
}
.prose { max-width: var(--prose-w); min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font-size: var(--display-sm);
  line-height: 1.25;
  margin: var(--space-10) 0 var(--space-3);
  scroll-margin-top: var(--space-6);
}
/* A section of a document opens with a short ember tick, so a long page has
   landmarks without boxes. */
.prose h2::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: var(--space-4);
  background: var(--color-accent);
}
.prose h3 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-2); scroll-margin-top: var(--space-6); }
.prose p, .prose li { color: var(--color-text-secondary); font-size: var(--text-lg); line-height: 1.7; }
.prose p { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { padding-left: var(--space-6); display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  overflow-wrap: break-word;
}
pre {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: var(--text-base);
  line-height: 1.6;
}
pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 1em;
  white-space: pre;
  overflow-wrap: normal;
}

/* A code block with a copy button in the corner. The button sits inside the
   block's own padding, so it never covers the first line of the code. */
pre.has-copy { position: relative; padding-right: var(--space-10); }
.copy-button {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-height: 32px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-fast) ease, color var(--duration-fast) ease;
}
pre.has-copy:hover .copy-button,
pre.has-copy:focus-within .copy-button { opacity: 1; }
.copy-button:hover { color: var(--color-text); }
.copy-button.is-done { color: var(--color-accent); opacity: 1; }
.copy-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  opacity: 1;
}
/* A reader on a touch screen cannot hover, so the button is always there - and
   it is as tall as a finger can reach. */
@media (hover: none) {
  .copy-button { opacity: 1; min-height: 40px; }
}
@media (max-width: 700px) {
  .copy-button { min-height: 40px; }
}

/* A finger is bigger than a cursor. The controls that are small on a desk are as
   tall as a thumb on a phone, and the ones that are already large enough are left
   alone. */
@media (max-width: 700px) {
  .btn-sm { min-height: 40px; }
  .mini-channel { min-height: 44px; }
  .mini-rail-btn { width: 44px; height: 44px; }
  .text-link { min-height: 40px; }
  /* A segmented control is a row of buttons, so each one has to be a target
     rather than a stripe. */
  .seg button { min-height: 40px; padding-inline: var(--space-4); }
}

/* The way back: where this page sits in the site, and what is next. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.crumbs a { color: var(--color-text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent); text-decoration: underline; }
.crumbs a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.crumbs [aria-current="page"] { color: var(--color-text); }
.crumbs__sep { color: var(--color-text-muted); }

.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 700px) {
  .pager { grid-template-columns: 1fr; }
}
.pager__link {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.pager__link:hover { border-color: var(--color-accent); background: var(--color-surface-hover); }
.pager__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pager__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pager__title { font-weight: 600; color: var(--color-text); }
.pager__link--next { text-align: right; }

/* The project's own contact points, in a legal page. They are written out rather
   than left as a field, so the page says who to write to. An operator running
   their own instance replaces them.

   The line is allowed to wrap - it holds a label and an address, and on a phone
   the two of them do not fit on one line - but the address is not broken across
   lines, so it stays copyable. */
.op-contact {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
  overflow-wrap: break-word;
}

.prose .draft-note {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-warning) 55%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-secondary);
  margin: var(--space-5) 0;
}
.prose blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-2) var(--space-5);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-secondary);
}

/* A table in a document. The reader gets the same table on a phone as on a desk:
   it scrolls sideways inside its own box rather than pushing the page wide. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: 0 0 var(--space-5);
}
.prose th, .prose td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.prose th { color: var(--color-text-primary); }
.prose td { color: var(--color-text-secondary); }
@media (max-width: 700px) {
  .prose table { display: block; overflow-x: auto; }
}

.toc {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  font-size: var(--text-sm);
  max-height: calc(100dvh - var(--header-h) - var(--space-10));
  overflow-y: auto;
}
.toc-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.toc a {
  display: block;
  padding: var(--space-1) var(--space-3);
  border-left: 2px solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.toc a:hover { color: var(--color-text-primary); text-decoration: none; background: var(--color-surface); }
.toc a.is-active { color: var(--color-accent); border-left-color: var(--color-accent); }
.toc .toc-sub a { padding-left: var(--space-6); font-size: var(--text-xs); }

table.plain { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.plain th, table.plain td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }
table.plain th { color: var(--color-text-primary); }
table.plain td { color: var(--color-text-secondary); }

/* The licence table. The dependency list is the one thing on this page that people
   actually read to find out what they are shipping. */
.licence-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--text-sm); }
.licence-table th, .licence-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.licence-table thead th {
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.licence-table tbody th { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.licence-table tbody td { color: var(--color-text-secondary); font-family: var(--font-mono); }

.status-panel {
  margin-top: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.status-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.status-head h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.status-checked { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.status-table { width: 100%; border-collapse: collapse; }
.status-table th, .status-table td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  font-size: var(--text-sm);
}
.status-table thead th {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.status-table tbody th { color: var(--color-text-primary); font-weight: var(--weight-semibold); }
.status-table td { color: var(--color-text-secondary); }
.status-table tr:last-child th, .status-table tr:last-child td { border-bottom: 0; }
.status-when { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); }

/* The incident timeline. What the operator wrote, and nothing else - no invented
   uptime, no "everything is fine" banner that nobody wrote. */
.status-incidents { margin-top: var(--space-8); }
.status-incidents h2 { margin-bottom: var(--space-2); }
.incident-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.incident {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-surface);
}
.incident-head {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
}
.incident-title { font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.incident-summary { margin: var(--space-2) 0 0; color: var(--color-text-secondary); }
.incident-meta { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); }

.state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state--ok { background: var(--color-success-muted); color: var(--color-success); }
.state--warn { background: var(--color-warning-muted); color: var(--color-warning); }
.state--bad { background: var(--color-danger-muted); color: var(--color-danger); }
.state--unknown { background: var(--color-surface-hover); color: var(--color-text-muted); }

@media (max-width: 560px) {
  .status-table thead { display: none; }
  .status-table, .status-table tbody, .status-table tr, .status-table th, .status-table td {
    display: block;
    width: 100%;
  }
  .status-table tr {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
  }
  .status-table tbody tr:last-child { border-bottom: 0; }
  .status-table tbody th { padding: 0; border-bottom: 0; }
  .status-table td { padding: var(--space-1) 0 0; border-bottom: 0; }
  .status-table td:last-child { padding-top: var(--space-3); }
}


/* ==========================================================================
   The community directory
   ========================================================================== */

.dir-bar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: var(--space-6);
}
.dir-search { flex: 1 1 280px; min-width: 0; }
.dir-sort { flex: 0 0 auto; }
.dir-control {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-md);
}
.dir-control::placeholder { color: var(--color-text-muted); }
select.dir-control { width: auto; cursor: pointer; }

.dir-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(var(--space-6), 4vw, var(--space-9));
  align-items: start;
}

.dir-list { display: grid; gap: var(--space-3); }
.dir-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
  text-align: left;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.dir-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }
.dir-card[aria-current="true"] { border-color: var(--color-accent); box-shadow: var(--glow-accent); }
.dir-card h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.dir-card p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.dir-card .meta { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.community-mark {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--color-on-accent);
  background: var(--color-accent);
  overflow: hidden;
}
.community-mark img { width: 100%; height: 100%; object-fit: cover; }
.community-mark--lg { width: 72px; height: 72px; font-size: var(--text-2xl); }
.dir-card .chev { color: var(--color-text-muted); }

.dir-preview {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-6);
  min-height: 320px;
}
.dir-preview h2 { margin: 0 0 var(--space-1); font-size: var(--text-xl); }
.dir-preview .dir-preview-head { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-5); }
.dir-preview .dir-preview-desc { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0 0 var(--space-5); }
.dir-channel-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-1); }
.dir-channel-list li { display: flex; align-items: baseline; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); }
.dir-channel-list .hash { color: var(--color-text-muted); }
.dir-channel-list .topic { color: var(--color-text-muted); font-size: var(--text-xs); }
.dir-preview-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.dir-placeholder { color: var(--color-text-muted); font-size: var(--text-sm); }
.dir-note { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: var(--space-4); }

.dir-pager { display: flex; align-items: center; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }
.dir-pager .page-of { color: var(--color-text-secondary); font-size: var(--text-sm); }


/* ==========================================================================
   The changelog timeline
   ========================================================================== */

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.timeline > li { position: relative; padding-left: var(--space-8); }
.timeline > li::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px;
  width: 11px; height: 11px;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
}
.timeline > li::after {
  content: "";
  position: absolute;
  left: 10px; top: 24px; bottom: calc(-1 * var(--space-8));
  width: 1px;
  background: var(--hairline);
}
.timeline > li:last-child::after { display: none; }
.timeline .when { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.timeline h2, .timeline h3 { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-xl); }
.timeline ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); color: var(--color-text-secondary); }


/* ==========================================================================
   The footer
   ========================================================================== */

/* The footer is a plane of the deeper surface, with the seam along its top edge
   to match the masthead's. Its groups match the masthead's: the brand, then the
   six groups in three columns. */
.site-footer {
  position: relative;
  margin-top: auto;
  background: var(--color-surface-sunken);
  border-top: 1px solid var(--hairline);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--seam);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.4fr repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
}
.footer-brand { grid-row: span 2; }
.footer-brand p { max-width: 320px; margin: var(--space-4) 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.footer-brand .btn { align-self: flex-start; }
.footer-heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}
.footer-col { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-col a { color: var(--color-text-secondary); font-size: var(--text-sm); padding-block: var(--space-1); }
.footer-col a:hover { color: var(--color-text-primary); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}


/* ==========================================================================
   Not found, and the other recovery pages
   ========================================================================== */

.error-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(var(--space-10), 12vw, 160px) 0;
  display: grid;
  place-items: center;
  text-align: center;
}
/* The brand's eclipse behind the missing page: a picture, not a colour field,
   so the error still belongs to the site. The glow in front of it keeps the
   type readable. */
.error-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg-eclipse) center / cover no-repeat;
  opacity: 0.32;
  pointer-events: none;
}
:root[data-theme="light"] .error-hero::before { display: none; }
.error-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(620px 340px at 50% 30%, var(--glow-a), transparent 70%);
  pointer-events: none;
}
.error-hero .kicker { justify-content: center; }
.error-hero h1 { font-size: var(--display-xl); margin: 0 0 var(--space-4); }
.error-hero .lede { margin: 0 auto var(--space-8); max-width: 46ch; color: var(--color-text-secondary); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.error-hero .cta { justify-content: center; }
/* The two lists under the recovery buttons are read as lists, so they are left
   aligned even though the page is centred. */
.error-hero .split { text-align: left; max-width: 720px; margin: var(--space-9) auto 0; }


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .dir-layout { grid-template-columns: 1fr; }
  .dir-preview { position: static; }
  .demo-layout { grid-template-columns: 1fr; }
  .prose-layout { grid-template-columns: 1fr; }
  .toc { display: none; }
}

@media (max-width: 1000px) {
  .hero::before { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }

  .menu-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--space-3) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface-sunken);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-pop);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .site-header[data-menu-open="true"] .site-nav { display: flex; }
  .nav-group { width: 100%; border-bottom: 1px solid var(--hairline); }
  .nav-trigger { width: 100%; justify-content: space-between; padding: var(--space-4) var(--space-2); font-size: var(--text-lg); text-transform: none; }
  .nav-trigger::after { left: var(--space-2); right: var(--space-2); }
  .nav-menu,
  .nav-menu--wide { position: static; transform: none; min-width: 0; box-shadow: none; border: 0; background: none; padding: 0 0 var(--space-3) var(--space-4); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-menu a { padding: var(--space-2) var(--space-2); }
  .nav-menu--wide .nav-menu-grid { grid-template-columns: 1fr; }
  .nav-menu-foot { display: none; }
  .masthead-actions .btn-primary { display: none; }
  .masthead-actions { margin-left: 0; }
}

@media (max-width: 900px) {
  .fact-strip { gap: var(--space-4); }
  /* The framed composition is a picture on a wide screen and a pair of
     pictures on a narrow one. The cards stop overlapping and take turns. */
  .stack { display: grid; gap: var(--space-5); padding: 0; min-height: 0; }
  .stack__frame { display: none; }
  .stack__card { position: static; transform: none; }
  .stack__card--front { order: 1; width: auto; }
  .stack__card--back { order: 2; display: flex; justify-content: center; }
}

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; gap: var(--space-4); }
  .feature-icon { justify-self: start; width: 44px; height: 44px; }
  .feature-icon .icon { width: 22px; height: 22px; }
  .step { grid-template-columns: 48px minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .cta { flex-direction: column; align-items: stretch; }
  .cta .btn { text-align: center; }
  .mini-client,
  .mini-client.has-members { display: block; height: auto; }
  .mini-rail { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--hairline); overflow-x: auto; overflow-y: hidden; }
  .mini-rail-brand { margin-bottom: 0; }
  .mini-channels { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .mini-channel-group { max-height: 40vh; }
  .mini-members { display: none; }
  .mini-main { min-height: 320px; }
  .app-window--tall .mini-client { height: auto; }
  .band { padding: var(--space-8) var(--space-6); }
}

@media (max-width: 480px) {
  /* The headline keeps shrinking as the screen gets narrower. */
  :root {
    --display-2xl: clamp(2.1rem, 10.5vw, 2.5rem);
    --display-xl: clamp(2rem, 9vw, 2.3rem);
  }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .btn:active { transform: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ==========================================================================
   Glass fallback
   ========================================================================== */

/* A browser that cannot frost a pane gets a solid one. The panes are the
   masthead, the menus, the product window, the theme toggle and the split panels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .nav-menu,
  .app-window,
  .split .panel {
    background: var(--color-surface);
  }
}

/* The split panels are the paired halves of a section: glass over the page's
   glow, so they are the one place the glass appears outside the masthead and
   the product window. */
:root {
  --glass-edge: color-mix(in srgb, var(--color-border-strong) 62%, transparent);
  --glass-sheen: color-mix(in srgb, white 14%, transparent);
}
:root[data-theme="light"] {
  --glass-edge: color-mix(in srgb, var(--color-border-strong) 70%, transparent);
  --glass-sheen: color-mix(in srgb, white 70%, transparent);
}

.split .panel {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--color-surface) 66%, transparent);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 0 var(--glass-sheen),
    0 18px 40px -34px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.split .panel h2 { font-size: var(--display-md); margin: 0 0 var(--space-3); }
.split .panel p { color: var(--color-text-secondary); }
.split .panel .kicker { margin-bottom: var(--space-2); }

/* The theme toggle is a small piece of the same material, so it sits with the
   masthead rather than apart from it. */
.theme-toggle {
  background: color-mix(in srgb, var(--color-surface) 66%, transparent);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}