/* Hero product demo: the app itself, drawn at the product's own sizes.
   Measurements follow the product's web app (208px sidebar, 48px bars, an 880px
   transcript column, hairline boxes with a hard offset shade, Helvetica Light);
   the colours are this site's. Scripted by demo.js. */

.demo-wrap {
  --d-bg: #fffcf8;
  --d-surface: #ffffff;
  --d-alt: #f8f1e7;
  --d-line: #ebdfd0;
  --d-line-strong: #d9cbb9;
  --d-ink: #08090a;
  --d-ink-2: rgb(8 9 10 / 0.68);
  --d-ink-3: rgb(8 9 10 / 0.45);
  --d-brand: #52b788;
  --d-brand-ink: #2d7a56;
  --d-brand-soft: rgb(82 183 136 / 0.12);
  --d-brand-line: rgb(82 183 136 / 0.42);
  --d-shade-sm: 3px 3px 0 rgb(8 9 10 / 0.11);
  --d-shade-md: 5px 5px 0 rgb(8 9 10 / 0.14);
  --d-shade-lg: 7px 7px 0 rgb(8 9 10 / 0.18);

  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: var(--window);
  text-align: left;
}

/* ---------- The stage ----------
   The hero closes on a full-bleed Cerulean band, the colour the page ends on
   too. Behind the window runs the corpus field (site.js): the company's text
   seen from far away, where a passage is highlighted in Mint for each source
   the answer cites. The band's foot is left for the step cards that lap up
   over it (styles.css). */

.demo-stage {
  position: relative;
  width: 100%;
  margin-top: clamp(4.5rem, min(10.5vw, 19vh), 12rem);
  margin-top: clamp(4.5rem, min(10.5vw, 19svh), 12rem);
  padding: clamp(3.5rem, 5.5vw, 4.5rem) 0 calc(var(--steps-lap) + clamp(2rem, 3.5vw, 2.75rem));
  text-align: left;
  /* The window keeps the product's own width on a laptop and grows a little on
     a large monitor, where the sections under it are far wider */
  --window: clamp(70rem, 64vw, 84rem);
}
.demo-stage::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--cerulean);
}
.demo-stage > .corpus { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }

/* A macOS window, rounded like the real one. It casts the site's own hard
   offset shade, in ink on Cerulean, the way the buttons do. */
.demo-card {
  overflow: hidden;
  border-radius: 11px;
  background: var(--d-bg);
  box-shadow: 0 0 0 1px var(--ink), 12px 12px 0 var(--ink);
}

/* ---------- Browser toolbar (Safari) ---------- */

.demo-chrome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 18px 0 20px;
  border-bottom: 1px solid rgb(0 0 0 / 0.13);
  background: linear-gradient(#f7f6f5, #f0efed);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8);
  color: #5d5c5a;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.demo-chrome svg { display: block; flex: none; }

.bw-left { display: flex; align-items: center; }
.bw-lights { display: flex; gap: 8px; margin-right: 22px; }
.bw-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px #e0443e; }
.bw-lights i:nth-child(2) { background: #febc2e; box-shadow: inset 0 0 0 0.5px #dea123; }
.bw-lights i:nth-child(3) { background: #28c840; box-shadow: inset 0 0 0 0.5px #1aab29; }
.bw-sidebar { width: 19px; height: 15px; margin-right: 22px; }
.bw-back, .bw-forward { width: 9px; height: 15px; }
.bw-back { margin-right: 20px; }
.bw-forward { color: #bcbbb9; }

.bw-center { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bw-shield { width: 15px; height: 17px; }
.bw-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 32px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.065);
}
.bw-url {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: #2f2e2d;
}
.bw-url svg { width: 9px; height: 11px; color: #7b7a78; }
.bw-page, .bw-reload { position: absolute; top: 50%; transform: translateY(-50%); }
.bw-page { left: 10px; width: 15px; height: 13px; }
.bw-reload { right: 9px; width: 14px; height: 14px; }

.bw-right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.bw-share { width: 16px; height: 18px; margin-top: -2px; }
.bw-plus { width: 14px; height: 14px; }
.bw-tabs { width: 17px; height: 17px; }

/* ---------- App shell ---------- */

.demo-app {
  position: relative;
  display: flex;
  height: 700px;
  overflow: hidden;
  background: var(--d-bg);
  color: var(--d-ink);
  font-family: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  cursor: default;
}
.demo-app [hidden] { display: none !important; }
/* Hierarchy comes from size, case and space, as in the product; emphasis is one step up from Light */
.demo-app strong { font-weight: 400; }
.demo-app svg { display: block; }

.d-eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-ink-3);
}

/* A box: hairline, paper, and a shade offset down-right */
.d-box {
  border: 1px solid var(--d-line-strong);
  background: var(--d-surface);
  box-shadow: var(--d-shade-sm);
}

.d-logo { display: inline-block; flex: none; width: 10px; height: 10px; object-fit: contain; }

.d-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
/* Documents get their source's mark in a square tile where a person gets an avatar */
.d-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--d-line);
  background: var(--d-bg);
}
.d-tile .d-logo { width: 13px; height: 13px; }

/* Fill backwards only: once a fade ends the element is back on its own styles */
.d-fade { animation: dFadeUp 160ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.d-shimmer {
  display: block;
  background: linear-gradient(90deg, var(--d-alt) 0%, #ecdfce 50%, var(--d-alt) 100%);
  background-size: 200% 100%;
  animation: dShimmer 1.4s linear infinite;
}
.d-pulse {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--d-brand);
  animation: dPulse 1.4s ease-in-out infinite;
}
.d-caret::after, .d-caret-bar {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: var(--d-ink);
  vertical-align: -0.15em;
  animation: dCaret 1s step-end infinite;
}

/* ---------- Sidebar ---------- */

.d-side {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 208px;
  border-right: 1px solid var(--d-line);
  background: var(--d-surface);
}
.d-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--d-line);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.d-brand svg { width: 20px; height: 20px; }

.d-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 0; }
.d-nav span {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-2);
}
.d-nav .is-active { background: var(--d-ink); color: var(--floral-white); }

.d-history { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 16px; }
.d-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-ink-3);
}
.d-new {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: -6px;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
.d-new.is-pressed { background: var(--d-alt); color: var(--d-ink); }
.d-history ul { list-style: none; flex: 1; min-height: 0; margin-top: 6px; padding: 0 12px 8px; overflow: hidden; }
.d-history li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 8px;
  font-size: 13px;
  color: var(--d-ink-2);
}
.d-history li span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d-history li time { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--d-ink-3); }
.d-history li.is-active { background: var(--d-alt); color: var(--d-ink); }
.d-history li[data-scenario] { cursor: pointer; }
.d-side-foot { flex: none; padding: 12px 16px; border-top: 1px solid var(--d-line); font-size: 11px; color: var(--d-ink-3); }

/* ---------- Main column ---------- */

.d-main { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* The see-through top bar. Content scrolls under it. */
.d-top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 48px;
  padding: 0 24px;
  border-bottom: 1px solid var(--d-line);
  background: rgb(255 252 248 / 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
}
.d-top-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-ink-2); }
.d-top-brand { display: none; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; }
.d-top-brand svg { width: 18px; height: 18px; }
.d-top-right { display: flex; align-items: center; gap: 14px; }
/* The customer's wordmark, as the product shows it in the bar */
.d-org {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.d-org svg { width: 13px; height: 13px; }
.d-rule { width: 1px; height: 16px; background: var(--d-line); }
.d-me { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--d-ink-2); white-space: nowrap; }
.d-me .d-avatar { width: 28px; height: 28px; background: var(--d-ink); font-size: 11px; }

.d-scroll { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding-top: 48px; }

/* ---------- Empty state: a new chat ---------- */

.d-empty { display: flex; flex: 1; align-items: center; justify-content: center; padding: 32px 24px; }
.d-empty-inner { width: 100%; max-width: 42rem; }
.d-empty-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.d-mark-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--d-line);
  background: var(--d-surface);
  box-shadow: var(--d-shade-sm);
}
.d-mark-lg svg { width: 26px; height: 26px; }
.d-empty-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 8px;
  margin-top: 16px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.3;
}
.d-empty-title .d-org { font-size: 23px; }
.d-empty-title .d-org svg { width: 17px; height: 17px; }
.d-empty-sub { margin-top: 6px; max-width: 28rem; font-size: 14px; line-height: 1.45; color: var(--d-ink-2); }

.d-suggest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.d-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 80px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.d-suggestion:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--d-shade-md);
  border-color: var(--d-brand-line);
  background: #f8fcf9;
}
.d-suggestion > svg { flex: none; width: 12px; height: 12px; margin-top: 2px; color: var(--d-ink-3); }
.d-suggestion .d-eyebrow { display: block; letter-spacing: 0.1em; }
.d-suggestion-q { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--d-ink-2); }

/* ---------- Composer ---------- */

.d-composer {
  position: relative;
  min-height: 54px;
  padding: 15px 80px 15px 16px;
  border: 1px solid var(--d-line);
  background: var(--d-surface);
  box-shadow: var(--d-shade-sm);
  font-size: 14.5px;
  line-height: 22px;
  transition: border-color 0.12s ease;
}
.d-empty .d-composer { margin-top: 16px; }
.d-composer.is-focus { border-color: var(--d-ink); }
.d-placeholder { color: var(--d-ink-3); }
/* An empty field keeps to one line, like a textarea's placeholder */
.d-composer:not(.has-text) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d-composer.has-text .d-placeholder { display: none; }
.d-caret-bar { display: none; height: 1.15em; margin: 0 1px 0 0; vertical-align: -0.2em; }
.d-composer.is-focus .d-caret-bar { display: inline-block; }
.d-composer.has-text .d-caret-bar { margin: 0 0 0 1px; }

.d-send {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  background: var(--d-alt);
  color: var(--d-ink-3);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.12s ease, color 0.12s ease;
}
.d-composer.has-text .d-send { background: var(--d-ink); color: var(--floral-white); box-shadow: var(--d-shade-sm); }
.d-send.is-live { background: var(--d-ink); color: var(--floral-white); }
.d-composer .d-send.is-pressed { transform: translate(2px, 2px); box-shadow: none; }

.d-dock { flex: none; width: 100%; max-width: 880px; margin: 0 auto; padding: 8px 24px 20px; }

/* ---------- Transcript ---------- */

.d-thread { flex: none; width: 100%; max-width: 880px; margin: 0 auto; padding: 32px 24px 12px; }
.d-user { margin-bottom: 28px; }
.d-user .d-eyebrow { margin-bottom: 8px; }
.d-question { font-size: 17px; font-weight: 400; line-height: 1.625; letter-spacing: -0.025em; }

.d-who { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 8px; }
.d-who-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--d-line);
  background: var(--d-surface);
}
.d-who-tile svg { width: 13px; height: 13px; }
.d-phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding: 2px 8px;
  border: 1px solid var(--d-brand-line);
  background: var(--d-brand-soft);
  color: var(--d-brand-ink);
  font-size: 10px;
  font-weight: 400;
}

/* Research trace: open while the run is live, one line once the answer starts */
.d-trace { margin-bottom: 16px; overflow: hidden; }
.d-trace-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }
.d-trace-status { display: flex; align-items: center; justify-content: center; flex: none; width: 14px; height: 14px; color: var(--d-brand-ink); }
.d-trace-status svg { width: 14px; height: 14px; }
.d-trace-status .d-pulse { width: 8px; height: 8px; }
.d-trace-title { flex: none; font-size: 12px; font-weight: 400; }
.d-trace-meta { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: var(--d-ink-3); }
.d-chevron { flex: none; width: 14px; height: 14px; color: var(--d-ink-3); transition: transform 0.15s ease; }
.d-trace.is-open .d-chevron { transform: rotate(180deg); }

.d-steps { display: none; list-style: none; padding: 12px 14px; border-top: 1px solid var(--d-line); }
.d-trace.is-open .d-steps { display: block; }
.d-step { position: relative; display: flex; gap: 12px; padding-bottom: 12px; }
.d-step:last-child { padding-bottom: 0; }
.d-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 20px;
  width: 1px;
  height: calc(100% - 8px);
  background: var(--d-line);
}
.d-step-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border: 1px solid var(--d-line);
  background: var(--d-surface);
  color: var(--d-ink-2);
}
.d-step-icon svg { width: 12px; height: 12px; }
.d-step-body { flex: 1; min-width: 0; }
.d-step-kind { font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-ink-3); }
.d-thought { margin-top: 2px; font-size: 12.5px; line-height: 1.625; color: var(--d-ink-2); }
.d-thought.d-caret::after { background: var(--d-ink-2); }
.d-step-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.d-step-label { font-size: 12.5px; font-weight: 400; }
.d-step-sum { font-size: 11px; color: var(--d-ink-3); }
.d-step-row .d-shimmer { align-self: center; width: 64px; height: 10px; }

.d-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.d-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: min(100%, 21.5rem);
  padding: 3px 8px;
  border: 1px solid var(--d-line);
  background: rgb(248 241 231 / 0.7);
  font-size: 11px;
  color: var(--d-ink-2);
  white-space: nowrap;
}
.d-item b { font-weight: 400; color: var(--d-ink); }
.d-item .d-dim { color: var(--d-ink-3); }
.d-item .d-clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.d-more { align-self: center; font-size: 11px; color: var(--d-ink-3); }

/* Two placeholder lines until the first words of the answer arrive */
.d-wait { display: grid; gap: 8px; padding-top: 4px; }
.d-wait .d-shimmer { height: 14px; width: 75%; }
.d-wait .d-shimmer + .d-shimmer { width: 50%; }

.d-answer { font-size: 14.5px; line-height: 1.7; }
.d-answer > * + * { margin-top: 0.85em; }
.d-answer .d-lead { padding-left: 12px; border-left: 2px solid var(--d-brand); font-size: 15.5px; line-height: 1.65; }
.d-answer ul { list-style: none; }
.d-answer li { position: relative; padding-left: 16px; }
.d-answer li + li { margin-top: 0.3em; }
.d-answer li::before { content: ""; position: absolute; left: 2px; top: 0.75em; width: 4px; height: 4px; background: var(--d-ink-3); }
.d-answer q { quotes: "\201C" "\201D"; padding: 1px 4px; background: var(--d-brand-soft); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Inline citation: a chip that opens the quoted source */
.d-cite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  padding: 1px 6px;
  border: 1px solid var(--d-brand-line);
  background: var(--d-brand-soft);
  color: var(--d-brand-ink);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 16px;
  vertical-align: 1px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
  animation: dFadeIn 140ms ease-out backwards;
}
.d-cite:hover, .d-cite.is-open { border-color: var(--d-brand); background: rgb(82 183 136 / 0.2); }
.d-cite-who { opacity: 0.7; }

.d-sources { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--d-line); }
.d-sources-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-ink-3);
}
.d-sources-head .d-logo { width: 12px; height: 12px; }
.d-showall { display: none; align-items: center; gap: 4px; margin-left: auto; letter-spacing: 0; text-transform: none; }
.d-showall svg { width: 12px; height: 12px; }
.d-sources ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.d-source { display: flex; gap: 10px; min-width: 0; padding: 10px 12px; }
.d-source > .d-avatar, .d-source > .d-tile { margin-top: 2px; }
.d-source-body { flex: 1; min-width: 0; }
.d-source-line { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.d-source-line .d-n { font-family: var(--font-mono); font-weight: 400; color: var(--d-ink-3); }
.d-source-line .d-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; }
.d-source-line svg { flex: none; width: 12px; height: 12px; margin-left: auto; color: var(--d-ink-3); }
.d-source-meta { display: flex; align-items: center; gap: 5px; margin-top: 1px; font-size: 11px; color: var(--d-ink-3); }
.d-source-meta span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d-source-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.625;
  color: var(--d-ink-2);
}
.d-usage { margin-top: 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--d-ink-3); }

/* ---------- Citation card and the replay's pointer ---------- */

.d-card {
  position: absolute;
  z-index: 5;
  width: 320px;
  max-width: calc(100% - 24px);
  padding: 12px;
  border: 1px solid var(--d-line-strong);
  background: var(--d-surface);
  box-shadow: var(--d-shade-lg);
  font-size: 12px;
  pointer-events: none;
  animation: dFadeIn 100ms ease-out backwards;
}
.d-card-head { display: flex; align-items: center; gap: 8px; }
.d-card-head > .d-logo { width: 12px; height: 12px; }
.d-card-id { flex: 1; min-width: 0; }
.d-card-name, .d-card-meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d-card-name { font-size: 12px; font-weight: 400; }
.d-card-meta { font-size: 10.5px; color: var(--d-ink-3); }
.d-card-text { margin-top: 8px; line-height: 1.625; color: var(--d-ink-2); }
.d-card-open { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; font-weight: 400; color: var(--d-brand-ink); }
.d-card-open svg { width: 12px; height: 12px; }

.d-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: 17px;
  height: 21px;
  margin: -1px 0 0 -2px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.28));
  transform-origin: 2px 1px;
  transition: transform 640ms cubic-bezier(0.22, 0.8, 0.24, 1), scale 0.1s ease, opacity 0.2s ease;
  will-change: transform;
}
.d-cursor.is-on { opacity: 1; }
.d-cursor.is-down { scale: 0.88; }

/* ---------- Controls under the window ---------- */

.demo-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  width: 100%;
  max-width: var(--window);
  margin: clamp(2.25rem, 4vw, 3rem) auto 0;
}
.demo-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-tab {
  position: relative;
  padding: 5px 10px 6px;
  border: 1px solid rgb(8 9 10 / 0.55);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.demo-tab:hover { border-color: var(--ink); background: rgb(255 248 240 / 0.22); }
.demo-tab.is-active { border-color: var(--ink); background: var(--floral-white); box-shadow: 3px 3px 0 var(--ink); }
/* The active tab's rule fills as its run plays */
.demo-tab::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 3px;
  background: var(--mint-leaf);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  transition: transform 0.9s cubic-bezier(0.3, 0.6, 0.3, 1);
}
.demo-tab:not(.is-active)::after { transition: none; }
.demo-tab:focus-visible, .demo-pause:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.demo-aside { display: flex; align-items: center; gap: 0.9rem; }
.demo-note {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(8 9 10 / 0.72);
}
.demo-pause {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgb(8 9 10 / 0.55);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.demo-pause:hover { border-color: var(--ink); background: rgb(255 248 240 / 0.22); }
.demo-pause[hidden] { display: none; }
.demo-pause svg { width: 10px; height: 10px; }
.demo-pause .i-play, .demo-pause[aria-pressed="true"] .i-pause { display: none; }
.demo-pause[aria-pressed="true"] .i-play { display: block; }
.demo-pause[aria-pressed="true"] { border-color: var(--ink); background: var(--floral-white); box-shadow: 3px 3px 0 var(--ink); }

/* ---------- Motion ---------- */

@keyframes dFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes dFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes dShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes dCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- Narrower screens ---------- */

/* Below 900px the sidebar goes and the brand moves into the top bar */
@media (max-width: 900px) {
  .demo-app { height: 680px; }
  .d-side, .d-top-title, .d-me > span:last-child { display: none; }
  .d-top-brand { display: inline-flex; }
  /* The toolbar stops centring the address field and lets it take the room */
  .demo-chrome { grid-template-columns: auto minmax(0, 1fr) auto; }
  .demo-chrome .bw-sidebar, .demo-chrome .bw-shield { display: none; }
}

@media (max-width: 760px) {
  .demo-chrome { height: 48px; padding: 0 14px; }
  .demo-chrome .bw-share, .demo-chrome .bw-tabs { display: none; }
  .bw-lights { margin-right: 16px; }
  .bw-back { margin-right: 16px; }
  .demo-card { border-radius: 10px; box-shadow: 0 0 0 1px var(--ink), 7px 7px 0 var(--ink); }
  .d-top { padding: 0 16px; }
  .d-empty { padding: 24px 16px; }
  .d-thread { padding: 24px 16px 12px; }
  .d-dock { padding: 8px 16px 16px; }
  /* Two suggestions and two sources, one per row; the rest sit behind "Show all" */
  .d-suggest, .d-sources ol { grid-template-columns: 1fr; }
  .d-suggestion { min-height: 0; }
  .d-suggestion:nth-child(n + 3), .d-sources li:nth-child(n + 3) { display: none; }
  .d-showall { display: inline-flex; }
  .d-item .d-clip { display: none; }
}

@media (max-width: 560px) {
  .demo-app { height: 600px; }
  .demo-chrome { grid-template-columns: auto minmax(0, 1fr); }
  .demo-chrome .bw-back, .demo-chrome .bw-forward, .demo-chrome .bw-page, .bw-right { display: none; }
  .bw-lights { margin-right: 0; }
  .bw-field { padding: 0 28px 0 12px; }
  .d-empty-title { font-size: 20px; }
  .d-empty-title .d-org { font-size: 21px; }
  .d-top-right .d-rule, .demo-note { display: none; }
}