/*fern-site-stylesheet*/:root {
  --header-height: 60px;
  --header-height-real: 60px;
  --mobile-header-height-real: 60px;
  --content-width: 800px;
  --sidebar-width: 260px;
  --page-width: 100vw;
  --logo-height: 30px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fcfdff;
  --accent-2: #f7f8ff;
  --accent-3: #eff1ff;
  --accent-4: #e4e8ff;
  --accent-5: #d7ddff;
  --accent-6: #c7cfff;
  --accent-7: #b2bcf9;
  --accent-8: #96a1f2;
  --accent-9: #7379fd;
  --accent-10: #686dec;
  --accent-11: #595bd8;
  --accent-12: #282b64;

  --accent-a1: #0055ff03;
  --accent-a2: #0020ff08;
  --accent-a3: #0020ff10;
  --accent-a4: #0026ff1b;
  --accent-a5: #0027ff28;
  --accent-a6: #0025ff38;
  --accent-a7: #0022ec4d;
  --accent-a8: #001be069;
  --accent-a9: #000bfc8c;
  --accent-a10: #0009df97;
  --accent-a11: #0003c3a6;
  --accent-a12: #000447d7;

  --accent-contrast: #fff;
  --accent-surface: #f5f6ffcc;
  --accent-indicator: #7379fd;
  --accent-track: #7379fd;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.003 277.5);
      --accent-2: oklch(98.1% 0.0093 277.5);
      --accent-3: oklch(96.1% 0.0184 277.5);
      --accent-4: oklch(93.7% 0.0354 277.5);
      --accent-5: oklch(90.5% 0.0521 277.5);
      --accent-6: oklch(86.4% 0.0677 277.5);
      --accent-7: oklch(80.9% 0.087 277.5);
      --accent-8: oklch(73.3% 0.1185 277.5);
      --accent-9: oklch(63.8% 0.1926 277.5);
      --accent-10: oklch(59.8% 0.1875 277.5);
      --accent-11: oklch(54.1% 0.186 277.5);
      --accent-12: oklch(32.1% 0.0999 277.5);

      --accent-a1: color(display-p3 0.0235 0.349 1 / 0.012);
      --accent-a2: color(display-p3 0.0196 0.1451 0.8784 / 0.032);
      --accent-a3: color(display-p3 0.0078 0.1294 0.9412 / 0.063);
      --accent-a4: color(display-p3 0.0039 0.1176 0.9255 / 0.102);
      --accent-a5: color(display-p3 0.0039 0.1294 0.9255 / 0.153);
      --accent-a6: color(display-p3 0.0039 0.1294 0.9294 / 0.216);
      --accent-a7: color(display-p3 0.0039 0.1098 0.8549 / 0.295);
      --accent-a8: color(display-p3 0.0039 0.0902 0.8157 / 0.404);
      --accent-a9: color(display-p3 0 0.0392 0.9294 / 0.546);
      --accent-a10: color(display-p3 0 0.0275 0.8196 / 0.589);
      --accent-a11: color(display-p3 0 0.0118 0.7255 / 0.651);
      --accent-a12: color(display-p3 0 0.0078 0.2588 / 0.84);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9608 0.9647 1 / 0.8);
      --accent-indicator: oklch(63.8% 0.1926 277.5);
      --accent-track: oklch(63.8% 0.1926 277.5);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8e8c99;
  --grayscale-track: #8e8c99;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.555 0.549 0.596);
      --grayscale-track: color(display-p3 0.555 0.549 0.596);
    }
  }
}


.dark {
  --accent-1: #000;
  --accent-2: #0d0f1f;
  --accent-3: #1b1d47;
  --accent-4: #252666;
  --accent-5: #2f3178;
  --accent-6: #393c88;
  --accent-7: #45499c;
  --accent-8: #5257b9;
  --accent-9: #7379fd;
  --accent-10: #686cef;
  --accent-11: #a1adff;
  --accent-12: #dae0ff;

  --accent-a1: #00000000;
  --accent-a2: #6b7cff1f;
  --accent-a3: #6169ff47;
  --accent-a4: #5d5fff66;
  --accent-a5: #6469ff78;
  --accent-a6: #6b71ff88;
  --accent-a7: #7178ff9c;
  --accent-a8: #7178ffb9;
  --accent-a9: #747afffd;
  --accent-a10: #6f73ffef;
  --accent-a11: #a1adff;
  --accent-a12: #dae0ff;

  --accent-contrast: #fff;
  --accent-surface: #1a1e3e80;
  --accent-indicator: #7379fd;
  --accent-track: #7379fd;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0255 277.5);
      --accent-2: oklch(17.7% 0.0329 277.5);
      --accent-3: oklch(25.7% 0.0765 277.5);
      --accent-4: oklch(31.1% 0.1093 277.5);
      --accent-5: oklch(35.5% 0.1192 277.5);
      --accent-6: oklch(39.9% 0.1235 277.5);
      --accent-7: oklch(44.8% 0.1333 277.5);
      --accent-8: oklch(50.5% 0.1527 277.5);
      --accent-9: oklch(63.8% 0.1926 277.5);
      --accent-10: oklch(59.8% 0.1926 277.5);
      --accent-11: oklch(77.6% 0.1416 277.5);
      --accent-12: oklch(91.3% 0.0466 277.5);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.4353 0.502 1 / 0.118);
      --accent-a3: color(display-p3 0.4 0.4275 1 / 0.267);
      --accent-a4: color(display-p3 0.3804 0.3882 1 / 0.385);
      --accent-a5: color(display-p3 0.4078 0.4235 1 / 0.455);
      --accent-a6: color(display-p3 0.4431 0.4588 1 / 0.514);
      --accent-a7: color(display-p3 0.4627 0.4824 1 / 0.593);
      --accent-a8: color(display-p3 0.4627 0.4863 1 / 0.702);
      --accent-a9: color(display-p3 0.4745 0.4941 1 / 0.961);
      --accent-a10: color(display-p3 0.4549 0.4667 1 / 0.906);
      --accent-a11: color(display-p3 0.6549 0.6941 1 / 0.977);
      --accent-a12: color(display-p3 0.8667 0.8863 1 / 0.989);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1098 0.1176 0.2353 / 0.5);
      --accent-indicator: oklch(63.8% 0.1926 277.5);
      --accent-track: oklch(63.8% 0.1926 277.5);
    }
  }
}


.dark {
  --grayscale-1: #121113;
  --grayscale-2: #1a191b;
  --grayscale-3: #232225;
  --grayscale-4: #2b292d;
  --grayscale-5: #323035;
  --grayscale-6: #3c393f;
  --grayscale-7: #49474e;
  --grayscale-8: #625f69;
  --grayscale-9: #6f6d78;
  --grayscale-10: #7c7a85;
  --grayscale-11: #b5b2bc;
  --grayscale-12: #eeeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f5f4f609;
  --grayscale-a3: #ebeaf814;
  --grayscale-a4: #eee5f81d;
  --grayscale-a5: #efe6fe25;
  --grayscale-a6: #f1e6fd30;
  --grayscale-a7: #eee9ff40;
  --grayscale-a8: #eee7ff5d;
  --grayscale-a9: #eae6fd6e;
  --grayscale-a10: #ece9fd7c;
  --grayscale-a11: #f5f1ffb7;
  --grayscale-a12: #fdfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6f6d78;
  --grayscale-track: #6f6d78;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.07 0.067 0.074);
      --grayscale-2: color(display-p3 0.101 0.098 0.105);
      --grayscale-3: color(display-p3 0.138 0.134 0.144);
      --grayscale-4: color(display-p3 0.167 0.161 0.175);
      --grayscale-5: color(display-p3 0.196 0.189 0.206);
      --grayscale-6: color(display-p3 0.232 0.225 0.245);
      --grayscale-7: color(display-p3 0.286 0.277 0.302);
      --grayscale-8: color(display-p3 0.383 0.373 0.408);
      --grayscale-9: color(display-p3 0.434 0.428 0.467);
      --grayscale-10: color(display-p3 0.487 0.48 0.519);
      --grayscale-11: color(display-p3 0.707 0.7 0.735);
      --grayscale-12: color(display-p3 0.933 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f5f4f609;
      --grayscale-a3: #ebeaf814;
      --grayscale-a4: #eee5f81d;
      --grayscale-a5: #efe6fe25;
      --grayscale-a6: #f1e6fd30;
      --grayscale-a7: #eee9ff40;
      --grayscale-a8: #eee7ff5d;
      --grayscale-a9: #eae6fd6e;
      --grayscale-a10: #ece9fd7c;
      --grayscale-a11: #f5f1ffb7;
      --grayscale-a12: #fdfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.434 0.428 0.467);
      --grayscale-track: color(display-p3 0.434 0.428 0.467);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(115, 121, 253, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(115, 121, 253, 1);
  --background: rgba(0, 0, 0, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #000;
}

.fern-prose ul {
  list-style-type: disc;
}

.fern-prose ul li::before {
  content: none;
}

.fern-callout h4 {
  margin-top: 0px;
}

/* ---------------------------------------------------------------------------
   Relay demo launchers (fern/components/RelayDemo.tsx)

   Styles for the RelayDemo and RelayDemoCard components, which link out to the
   live demo at explore.withpersona.com/relay. All of it lives here rather than
   in the component because the launcher needs hover states and a keyframe
   animation, and because Fern server-side renders custom components: there is
   no client-side JavaScript to lean on.

   Every class is prefixed `relay-demo` so nothing here can collide with Fern's
   own styles. The `.fern-prose` selectors below exist only to win against
   Fern's prose link and image rules, which are more specific than a bare class.
   --------------------------------------------------------------------------- */

.relay-demo {
  margin: 1.75rem 0;
}

/* The launcher's first element: the page's own heading sits above it, so this
   carries no title of its own. */
.relay-demo__description {
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 64ch;
  opacity: 0.72;
}

/* The whole window is one link. Fern underlines prose links, so this has to
   out-specify `.fern-prose a` rather than rely on the bare class. */
.relay-demo a,
.relay-demo-card,
.fern-prose .relay-demo a,
.fern-prose a.relay-demo-card {
  color: inherit;
  text-decoration: none;
}

.relay-demo__surface {
  background: #ffffff;
  border: 1px solid #dfe3ea;
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 10px 28px -16px rgba(16, 24, 40, 0.22);
  display: block;
  margin-top: 0.75rem;
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.relay-demo__surface:hover {
  border-color: #7379fd;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 18px 40px -18px rgba(16, 24, 40, 0.3);
  transform: translateY(-2px);
}

.relay-demo__surface:focus-visible,
.relay-demo__chip:focus-visible,
.relay-demo-card:focus-visible {
  outline: 2px solid #7379fd;
  outline-offset: 2px;
}

/* Browser chrome. Sells "this is a real site you can open" in a way a bare
   screenshot does not, and gives the launch affordance a permanent home so it
   is visible on touch devices too, not only on hover. */
.relay-demo__chrome {
  align-items: center;
  background: #f7f8fa;
  border-bottom: 1px solid #e6e8ee;
  display: flex;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
}

.relay-demo__dots {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.relay-demo__dot {
  background: #d3d7e0;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.relay-demo__url {
  background: #ffffff;
  border: 1px solid #e6e8ee;
  border-radius: 999px;
  color: #6f7686;
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  min-width: 0;
  overflow: hidden;
  padding: 3px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relay-demo__open {
  align-items: center;
  background: #7379fd;
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  gap: 4px;
  line-height: 1.4;
  padding: 5px 10px;
  transition: background 0.18s ease;
}

.relay-demo__surface:hover .relay-demo__open {
  background: #5a61f0;
}
.relay-demo__surface:focus-within .relay-demo__open {
  background: #5a61f0; outline: none;
}

.relay-demo__open-icon {
  flex: 0 0 auto;
}

/* `stretch` is what makes the panel run the full height of the window rather
   than sitting in it as a card: the rail fills the row and the panel fills the
   rail.

   The background is the sample site's own page color, sampled from the
   screenshot itself. It shows wherever the screenshot does not reach, which is
   below it whenever the panel's steps are the taller of the two. Without it
   that gap would be a white void instead of more of the page. */
.relay-demo__body {
  align-items: stretch;
  background: #f1f4f8;
  display: flex;
}

/* The screenshot keeps its own aspect ratio. */
.relay-demo__shot {
  flex: 1 1 auto;
  min-width: 0;
}

.relay-demo__shot img,
.fern-prose .relay-demo__shot img {
  border: 0;
  border-radius: 0;
  display: block;
  height: auto;
  margin: 0;
  width: 100%;
}

/* The rail reserves the column and pulls itself left over the screenshot with
   a negative margin; `display: flex` is what lets the panel inside it stretch
   to the full height. `z-index` rather than DOM order alone, so the overlap
   paints predictably. */
.relay-demo__rail {
  display: flex;
  flex: 0 0 44%;
  margin-left: -34px;
  max-width: 322px;
  min-width: 210px;
  position: relative;
  z-index: 1;
}

/* The panel itself, following the geometry of the demo's own Activity panel
   (.activity-help-panel in persona-dashboard-explore): full height, flush to
   the right edge, one border down its left side, and a shadow thrown inward
   across the screenshot. That shadow plus the overlap is what separates it
   from the sample site behind it. */
.relay-demo__panel {
  background: #ffffff;
  border-left: 1px solid #e3e6ed;
  box-shadow: -6px 0 24px -10px rgba(16, 24, 40, 0.3);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 0.625rem 0.6875rem 0.75rem;
  position: relative;
}

/* The collapse handle, centered on the panel's left edge the way the demo
   centers its own (.activity-help-btn). Decoration here, but it is the
   clearest signal that this is a panel sitting on top of the page rather than
   part of it. */
.relay-demo__panel-tab {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e3e6ed;
  border-radius: 5px 0 0 5px;
  border-right: 0;
  color: #8b90a0;
  display: flex;
  height: 30px;
  justify-content: center;
  left: -13px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
}

.relay-demo__panel-head {
  align-items: center;
  color: #8b90a0;
  display: flex;
  font-size: 10px;
  font-weight: 600;
  gap: 5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A live indicator beside the panel's title. It takes the same accent as the
   timeline dots: one accent in the panel, so nothing in it reads as a status
   the reader is meant to decode. */
.relay-demo__pulse {
  animation: relay-demo-pulse 2s ease-in-out infinite;
  background: #7379fd;
  border-radius: 50%;
  flex: 0 0 auto;
  height: 6px;
  width: 6px;
}

/* `flex: 1` so the steps take the height the footer does not: the timeline
   stays at the top of the panel and the footer stays at the bottom, however
   tall the screenshot beside it happens to be. */
.relay-demo__steps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.6875rem;
  margin-top: 0.625rem;
}

/* Each step is a node on a vertical timeline: a dot at its top left, and a
   line running from that dot down to the next one. Giving every step its own
   line segment means the line is always exactly as long as the step is tall,
   however the copy wraps, with no measuring.

   The steps fill in one after another over about two and a half seconds, so
   the launcher previews the demo's "watch each step happen in real time"
   panel. Pure CSS, because the component is server-rendered.

   It runs ONCE and stays, rather than looping. A loop has to blank the panel
   to start over, and a reader who looks during that gap sees an empty box
   that reads as broken. Filling in once and holding costs the replay and is
   never wrong.

   `backwards` matters twice over: it holds the first keyframe (hidden)
   through the animation's delay, so a step does not flash before its turn,
   and because the base state below is the FINISHED state, the animation needs
   no `forwards` to stay put. That also means a reader whose browser never
   runs the animation still sees the whole timeline. */
.relay-demo__step {
  animation: relay-demo-step 0.45s ease-out backwards;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 1.0625rem;
  position: relative;
}

/* Sits on the timeline where the step's title starts, with the connector
   below picking up just under it. Every step gets the same dot, including the
   last: the panel is showing a sequence of calls, not grading them, and a
   differently colored final entry invites a reader to look for a meaning that
   is not there. */
.relay-demo__step-dot {
  background: #7379fd;
  border-radius: 50%;
  height: 7px;
  left: 0;
  position: absolute;
  top: 4px;
  width: 7px;
}

/* The connector, drawn from this step's dot down through the gap to the next
   step's dot. It grows just after its own step appears and just before the
   next one does, so the line looks like it is pulling the next step into
   view. `bottom` is the negative of the steps' gap.

   The color is deliberately darker than a hairline divider would be: the line
   is the shape of this panel, not a separator, and at a lighter value it
   disappears against the panel entirely. */
.relay-demo__step-line {
  animation: relay-demo-line 0.4s ease-out 0.35s backwards;
  background: #c3cadb;
  bottom: -0.6875rem;
  left: 2.5px;
  position: absolute;
  top: 12px;
  transform: scaleY(1);
  transform-origin: top;
  width: 2px;
}

.relay-demo__step--last .relay-demo__step-line {
  display: none;
}

.relay-demo__step-title {
  color: #1c2024;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.relay-demo__step-meta {
  align-items: center;
  color: #7b8194;
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  gap: 4px;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.relay-demo__step-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px;
}

.relay-demo__step-sep {
  opacity: 0.55;
}

/* The snippet a step carries, shown open. `pre-wrap`, not `pre`: the block is
   only about 45 characters wide at the panel's widest, so a long line has to
   wrap rather than be clipped at the edge, where it would lose the end of the
   line silently. */
.relay-demo__code {
  background: #1c2333;
  border-radius: 5px;
  color: #c8cfe0;
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  line-height: 1.65;
  margin-top: 4px;
  overflow-wrap: break-word;
  padding: 6px 7px;
  white-space: pre-wrap;
}

/* One step every 0.7s, with its connector drawn in the gap between that step
   and the next, so the order on screen is dot, line, next dot. */
.relay-demo__step:nth-child(2) {
  animation-delay: 0.7s;
}

.relay-demo__step:nth-child(3) {
  animation-delay: 1.4s;
}

.relay-demo__step:nth-child(4) {
  animation-delay: 2.1s;
}

.relay-demo__step:nth-child(2) .relay-demo__step-line {
  animation-delay: 1.05s;
}

.relay-demo__step:nth-child(3) .relay-demo__step-line {
  animation-delay: 1.75s;
}

@keyframes relay-demo-step {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes relay-demo-line {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes relay-demo-pulse {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}

/* The panel's footer, the last thing in it. The negative margins are the
   panel's own padding, so the rule above it reaches both edges the way the
   real panel's does. It is held at the bottom by the steps growing above it,
   not by anything here. */
.relay-demo__panel-note {
  border-top: 1px solid #eceef3;
  color: #9298a8;
  font-size: 9.5px;
  line-height: 1.5;
  margin: 0.625rem -0.6875rem -0.75rem;
  padding: 6px 0.6875rem;
}

/* The use-case row: one link per sample site. Real links rather than toggles,
   so they work without JavaScript and can be opened in their own tab. */
.relay-demo__scenarios {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

/* `nowrap` so the lead-in wraps as a phrase: it reads into the first chip, and
   broken across two lines it stops doing that. */
.relay-demo__scenarios-label {
  opacity: 0.6;
  white-space: nowrap;
}

.relay-demo__chip {
  align-items: center;
  border: 1px solid #dfe3ea;
  border-radius: 999px;
  display: inline-flex;
  gap: 4px;
  line-height: 1.5;
  padding: 2px 9px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.relay-demo__chip:hover {
  background: rgba(115, 121, 253, 0.08);
  border-color: #7379fd;
}

/* Compact launcher, for pages where the full window would crowd the content. */
.relay-demo-card {
  align-items: center;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  display: flex;
  gap: 0.875rem;
  margin: 1.5rem 0;
  padding: 0.75rem;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.relay-demo-card:hover {
  border-color: #7379fd;
  box-shadow: 0 8px 22px -14px rgba(16, 24, 40, 0.3);
}

.relay-demo-card__thumb,
.fern-prose img.relay-demo-card__thumb {
  border: 1px solid #e6e8ee;
  border-radius: 6px;
  display: block;
  flex: 0 0 132px;
  height: auto;
  margin: 0;
  width: 132px;
}

.relay-demo-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.relay-demo-card__title {
  align-items: center;
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 5px;
  line-height: 1.4;
}

.relay-demo-card__description {
  font-size: 0.8125rem;
  line-height: 1.5;
  opacity: 0.72;
}

/* Stack the window on narrow screens: the panel's copy needs the full width to
   stay readable. Stacked, the panel sits under the screenshot rather than down
   its side, so its edge and shadow move to the top and the side handle goes
   away, having no screenshot to its left to point at. */
@media (max-width: 720px) {

  .relay-demo__body {
    flex-direction: column;
  }

  .relay-demo__rail {
    flex: 1 1 auto;
    margin-left: 0;
    max-width: none;
  }

  .relay-demo__panel {
    border-left: 0;
    border-top: 1px solid #e3e6ed;
    box-shadow: 0 -6px 24px -10px rgba(16, 24, 40, 0.3);
  }

  .relay-demo__panel-tab {
    display: none;
  }

  .relay-demo__open {
    font-size: 11px;
  }

}

@media (max-width: 560px) {

  .relay-demo-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .relay-demo-card__thumb,
  .fern-prose img.relay-demo-card__thumb {
    flex: 0 0 auto;
    width: 100%;
  }

}

/* The window stays light in dark mode: it is a view into another site, and the
   screenshot inside it is light. Only the framing is toned down. */
html.dark .relay-demo__surface {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

html.dark .relay-demo__surface:hover {
  border-color: #7379fd;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
}
html.dark .relay-demo__surface:focus-visible {
  border-color: #7379fd;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8); outline: none;
}

html.dark .relay-demo__chip,
html.dark .relay-demo-card {
  border-color: rgba(255, 255, 255, 0.18);
}

html.dark .relay-demo__chip:hover,
html.dark .relay-demo-card:hover {
  border-color: #7379fd;
}
html.dark .relay-demo__chip:focus-visible,
html.dark .relay-demo-card:focus-visible {
  border-color: #7379fd; outline: none;
}

html.dark .relay-demo-card__thumb,
html.dark .fern-prose img.relay-demo-card__thumb {
  border-color: rgba(255, 255, 255, 0.14);
}

@media (prefers-reduced-motion: reduce) {

  .relay-demo__step,
  .relay-demo__step-line,
  .relay-demo__pulse {
    animation: none;
  }

  .relay-demo__step {
    opacity: 1;
  }

  .relay-demo__surface,
  .relay-demo__chip,
  .relay-demo-card,
  .relay-demo__open {
    transition: none;
  }

  .relay-demo__surface:hover {
    transform: none;
  }

}