/* ---------------------------------------------------------------------------
   Denote website — shared stylesheet.
   Used by the landing page (index.html) and the docs site (added in B3).

   Color tokens are ported verbatim from the app's dark theme in
   `src/renderer/src/globals.css`. The website renders in dark mode only.

   Body sits on --surface-raised (the app's canonical "working canvas" tone)
   rather than --background (near-black), so there is visible dark color
   instead of a flat black sheet.

   Type scale is intentionally larger than the in-app policy: the app's
   typography is tuned for a dense product UI; the marketing surface needs
   bigger type to read. Iterate later if needed.
   --------------------------------------------------------------------------- */

/* ---------- Tokens (ported from globals.css `.dark`) ---------- */

:root {
  --background: 222 16% 4%;
  --foreground: 210 20% 98%;
  --card: 222 14% 12%;
  --card-foreground: 210 20% 98%;
  --muted: 222 12% 16%;
  --muted-foreground: 215 20% 65%;
  --border: 222 12% 18%;
  --input: 222 12% 22%;
  --ring: 217 91% 60%;
  --surface: 222 14% 7%;
  --surface-raised: 222 13% 10%;
  --separator: 222 14% 11%;
  --accent-blue: 217 91% 60%;
  --accent-blue-foreground: 213 94% 68%;
  --accent-violet: 263 70% 68%;
  --code-keyword: 264 70% 72%;
  --code-string: 32 85% 70%;
  --code-function: 168 55% 62%;

  --gray-1: 214 32% 91%;
  --gray-2: 213 23% 75%;
  --gray-3: 215 20% 65%;
  --gray-4: 215 16% 47%;
  --gray-5: 215 19% 35%;
  --gray-6: 215 25% 27%;
  --gray-7: 217 33% 17%;

  --max-prose: 600px;
  --max-content: 1280px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Reset (minimal) ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: hsl(var(--surface-raised));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: hsl(var(--accent-blue));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: hsl(var(--accent-blue-foreground));
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Layout shells ---------- */

.shell {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 32px;
}

.shell-prose {
  max-width: var(--max-prose);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Top bar (uses .shell for max-width + edge alignment) ---------- */

.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-logo {
  height: 24px;
  width: auto;
  display: block;
}

.topbar-nav {
  display: flex;
  gap: 12px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--gray-2));
  background: transparent;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.icon-button:hover {
  background: hsl(var(--card));
  border-color: hsl(var(--gray-6));
  color: hsl(var(--gray-1));
  text-decoration: none;
}

.icon-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---------- Hero (two-column) ---------- */

.hero {
  padding-top: 80px;
  padding-bottom: 152px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}

.hero-text {
  max-width: 560px;
}

.hero-tagline {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: hsl(var(--foreground));
}

.hero-subhead {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: hsl(var(--gray-3));
  margin: 0 0 40px;
}

.hero-media {
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--card));
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--gray-4));
  font-family: var(--font-mono);
  font-size: 14px;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- CTA button (shared) ---------- */

.cta-button {
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: hsl(var(--background));
  background: hsl(var(--gray-1));
  border: 1px solid hsl(var(--gray-1));
  border-radius: 6px;
  padding: 10px 22px;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.cta-button:hover {
  background: hsl(var(--foreground));
  border-color: hsl(var(--foreground));
  color: hsl(var(--background));
  text-decoration: none;
}

.cta-button:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ---------- Section primitives ---------- */

.section {
  padding-top: 152px;
  padding-bottom: 152px;
}

.section-tight {
  padding-top: 104px;
  padding-bottom: 104px;
}

.section-heading {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: hsl(var(--foreground));
}

.section-heading-centered {
  text-align: center;
}

.section-description {
  font-size: 18px;
  line-height: 1.55;
  color: hsl(var(--gray-3));
  margin: 0 0 56px;
  max-width: 720px;
}

/* ---------- Pitch (standalone section, two-column) ---------- */

.pitch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.pitch {
  font-size: 18px;
  line-height: 1.55;
  color: hsl(var(--gray-3));
  margin: 0;
  max-width: 520px;
}

.pitch-lede {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.pitch-illustration {
  aspect-ratio: 4 / 3;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--card));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--gray-4));
  font-family: var(--font-mono);
  font-size: 13px;
  margin: 0;
}

.pitch-illustration img,
.pitch-illustration svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Feature grid ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 64px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-thumb {
  aspect-ratio: 16 / 10;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--card));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--gray-4));
  font-family: var(--font-mono);
  font-size: 13px;
}

.feature-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px;
  color: hsl(var(--foreground));
}

.feature-body {
  font-size: 16px;
  line-height: 1.55;
  color: hsl(var(--gray-3));
  margin: 0;
}

/* ---------- Pairs-with-Claude-Code section ---------- */

.pairs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.pairs-body {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.pairs-body p {
  margin: 0 0 18px;
  color: hsl(var(--gray-2));
  font-size: 17px;
  line-height: 1.65;
}

.pairs-body p:last-of-type {
  margin-bottom: 0;
}

.pairs-download {
  margin-top: 28px;
}

.pairs-screenshot {
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--card));
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--gray-4));
  font-family: var(--font-mono);
  font-size: 14px;
  margin: 0;
}

.pairs-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Closing CTA ---------- */

.closing {
  text-align: center;
  /* Dark gap before the band, matching the layers->owl gap (192px): the owl's
     152px bottom padding + this 40px = 192px. Margin (not padding) keeps the
     gap dark, outside the blue band. */
  margin-top: 40px;
  /* No standard section padding: this band runs to the page bottom (the footer
     lives in the fine print below), so it owns its vertical space. */
  padding-top: 0;
  padding-bottom: 0;
  /* Gradient band: a blue spotlight from top-center over the CTA, a soft
     violet bloom in the lower-right corner, on a blue->indigo diagonal base. */
  background:
    radial-gradient(100% 120% at 50% -12%, hsl(217 55% 18%), transparent 60%),
    radial-gradient(80% 100% at 88% 108%, hsl(264 42% 16%), transparent 62%),
    linear-gradient(150deg, hsl(217 38% 14%), hsl(243 30% 11%));
}

.closing .section-heading {
  margin: 0;
}

/* Single centered column: the "Try it" CTA centered in the band, with the fine
   print (copyright) pinned at the bottom. */
.closing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-height: 420px;
  padding: clamp(48px, 6vw, 72px) 0;
}

.closing-try__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.closing-fineprint {
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--gray-4));
}

.closing-fineprint a {
  color: hsl(var(--gray-3));
  text-decoration: none;
}

.closing-fineprint a:hover {
  color: hsl(var(--gray-1));
}

@media (max-width: 768px) {
  .closing-inner {
    min-height: 0;
  }
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid hsl(var(--border));
  padding: 24px 0;
  background: hsl(var(--surface));
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: hsl(var(--gray-4));
}

.footer-row a {
  color: hsl(var(--gray-3));
  text-decoration: none;
}

.footer-row a:hover {
  color: hsl(var(--gray-1));
}

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  .shell,
  .shell-prose {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 64px;
    padding-bottom: 104px;
    gap: 48px;
  }

  .hero-tagline {
    font-size: 40px;
  }

  .hero-subhead {
    font-size: 19px;
    margin-bottom: 32px;
  }

  .pairs-grid,
  .pitch-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .section {
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .section-tight {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section-heading {
    font-size: 26px;
  }

  .section-description {
    font-size: 16px;
    margin-bottom: 48px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .feature-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .shell,
  .shell-prose {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-tagline {
    font-size: 34px;
  }
}

/* ===========================================================================
   Landing: centered hero, full-width app shot, owl comparison, faux terminal.
   The hero is a centered text column. The owl comparison contrasts
   prompt-to-output tools with Denote's work-everything-in-between flow.
   (Layers-journey styles live in their own block, just below.)
   =========================================================================== */

/* ---------- Shared bits ---------- */

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: hsl(var(--accent-blue-foreground));
  margin: 0 0 20px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--surface));
  color: hsl(var(--gray-2));
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: hsl(var(--gray-4));
}

.chip--accent {
  border-color: hsl(var(--accent-blue) / 0.5);
  background: hsl(var(--accent-blue) / 0.12);
  color: hsl(var(--accent-blue-foreground));
}

.chip--accent svg {
  color: hsl(var(--accent-blue-foreground));
}

/* ---------- Hero ambient background (gradient wash) ---------- */
/* Promoted from explorations/bg-ribbon-v2.html ("Wash only"). A blue wash on
   the page background: a pronounced top glow fading into the body tone by
   ~880px, so there's no seam with the sections below. The top glow uses the
   accent-blue hue (217) directly, matching the in-app layer-gradient idiom.
   The radial's horizontal radius is 120% (of viewport width) so the blue
   spreads wide across the top, mirroring the prototype; the vertical radius is
   pinned in px so it can't blow up on the tall page body. */

.landing {
  background:
    radial-gradient(120% 960px at 50% -96px, hsl(217 44% 14%), transparent 62%) no-repeat,
    linear-gradient(180deg, hsl(222 24% 9%), hsl(var(--surface-raised)) 880px) no-repeat,
    hsl(var(--surface-raised));
}

/* ---------- Hero (thread) ---------- */

.hero-thread {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 96px;
  padding-bottom: 64px;
}

.hero-thread__text {
  max-width: 760px;
}

.hero-thread__title {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: hsl(var(--foreground));
}

.hero-thread__sub {
  font-size: 20px;
  line-height: 1.45;
  color: hsl(var(--gray-3));
  margin: 24px auto 36px;
  max-width: 560px;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* ---------- Hero "Request beta access" button (shimmer border) ---------- */
/* Doc-link-style dark tinted fill (mirrors .lj-doclink) with an animated
   gradient border: a conic ring whose bright blue->violet arc rotates slowly
   for a subtle shimmer. The ring lives on a masked ::before so the button fill
   can stay translucent over the hero wash. Shimmer pauses for reduced motion. */

@property --beta-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.cta-beta {
  text-decoration: none;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: hsl(var(--gray-1));
  background: hsl(217 30% 9% / 0.6);
  border: 0;
  border-radius: 8px;
  padding: 11px 24px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.cta-beta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--beta-angle),
    hsl(217 38% 30% / 0.75) 0deg,
    hsl(217 92% 66%) 45deg,
    hsl(264 80% 70%) 75deg,
    hsl(217 38% 30% / 0.75) 135deg,
    hsl(217 38% 30% / 0.75) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cta-beta::before {
    animation: cta-beta-shimmer 6s linear infinite;
  }
}

@keyframes cta-beta-shimmer {
  to {
    --beta-angle: 360deg;
  }
}

.cta-beta:hover {
  background: hsl(217 36% 13% / 0.7);
  color: hsl(var(--foreground));
}

.cta-beta:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ---------- Full-width app shot (anchor-grade glow + bleed) ---------- */

.app-stage {
  position: relative;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 24px 32px 0;
}

.app-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -30px;
  width: 78%;
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    hsl(var(--accent-blue) / 0.22),
    transparent 70%
  );
  filter: blur(44px);
  z-index: 0;
}

.app-shot {
  position: relative;
  z-index: 1;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--surface));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}

.app-shot__bar {
  flex-shrink: 0;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border-bottom: 1px solid hsl(var(--separator));
  background: hsl(var(--surface-raised));
}

.app-shot__dots {
  display: flex;
  gap: 7px;
}

.app-shot__dots i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: hsl(var(--gray-6));
}

.app-shot__crumbs {
  position: relative;
  flex: 1;
  align-self: stretch;
}

.app-shot__crumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-size: 12.5px;
  color: hsl(var(--gray-4));
  font-family: var(--font-mono);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.app-shot__crumb.is-active {
  opacity: 1;
}

.app-shot__shots {
  position: relative;
  aspect-ratio: 1.842;
}

.app-shot__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.app-shot__slide.is-active {
  opacity: 1;
}

.app-shot__main {
  flex: 1;
  display: grid;
  grid-template-columns: 176px 1fr;
  min-height: 0;
}

.app-shot__rail {
  border-right: 1px solid hsl(var(--separator));
  background: hsl(var(--surface-raised));
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.app-shot__navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: hsl(var(--gray-3));
}

.app-shot__navitem svg {
  width: 15px;
  height: 15px;
  color: hsl(var(--gray-4));
}

.app-shot__navitem--active {
  background: hsl(var(--card));
  color: hsl(var(--gray-1));
}

.app-shot__navitem--active svg {
  color: hsl(var(--accent-blue-foreground));
}

.app-shot__rail-div {
  height: 1px;
  background: hsl(var(--separator));
  margin: 10px 6px;
}

.app-shot__canvas {
  position: relative;
  overflow: hidden;
  background-color: hsl(var(--surface));
  background-image: radial-gradient(hsl(var(--border)) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}

.app-shot__connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.app-shot__connectors path {
  fill: none;
  stroke: hsl(var(--accent-blue) / 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.node {
  position: absolute;
  width: 38%;
  max-width: 230px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}

.node--accent {
  border-color: hsl(var(--accent-blue) / 0.5);
  box-shadow:
    0 0 0 1px hsl(var(--accent-blue) / 0.25),
    0 8px 24px -8px rgba(0, 0, 0, 0.5);
}

.node__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--gray-1));
  margin-bottom: 10px;
}

.node__head svg {
  width: 15px;
  height: 15px;
  color: hsl(var(--accent-blue-foreground));
}

.node__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.node__row + .node__row {
  margin-top: 7px;
}

.node-1 { top: 12%; left: 4%; }
.node-2 { top: 40%; right: 5%; }
.node-3 { bottom: 9%; left: 16%; }

/* ---------- Owl comparison ---------- */

.owl-lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* "Fill the gap": two aligned tracks. The other-tools track has an empty
   striped void where the structural work would go; the Denote track fills
   that exact span with the layers, between Vision and the Spec outcome. */

.fill {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Centered label / logo above each diagram. */
.fill-head {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
}

.fill-logo { height: 28px; width: auto; display: block; }

.fill-label__them {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--gray-2));
}

.fill-track {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: stretch;
  gap: 16px;
}

.fill-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 10px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--card));
  font-size: 13.5px;
  font-weight: 500;
  color: hsl(var(--gray-1));
  text-align: center;
}

.fill-cap svg { width: 18px; height: 18px; color: hsl(var(--gray-4)); }

.fill-cap--accent {
  border-color: hsl(var(--accent-blue));
  background: hsl(var(--accent-blue) / 0.16);
  color: hsl(var(--accent-blue-foreground));
  box-shadow: 0 0 24px -6px hsl(var(--accent-blue) / 0.35);
}
.fill-cap--accent svg { color: hsl(var(--accent-blue-foreground)); }

/* Vision is a layer, styled like the middle segments — not the Spec outcome. */
.fill-cap--layer {
  border-color: hsl(var(--accent-blue) / 0.45);
  background: hsl(var(--accent-blue) / 0.06);
  color: hsl(var(--gray-1));
  box-shadow: 0 0 24px -6px hsl(var(--accent-blue) / 0.35);
}
.fill-cap--layer svg { color: hsl(var(--accent-blue-foreground)); }

.fill-bar { border-radius: 10px; min-height: 70px; }

.fill-bar--empty {
  border: 1px dashed hsl(var(--gray-6));
  background: repeating-linear-gradient(
    45deg,
    hsl(var(--muted)),
    hsl(var(--muted)) 7px,
    hsl(var(--surface)) 7px,
    hsl(var(--surface)) 14px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.fill-bar--empty span { font-size: 14px; font-style: italic; color: hsl(var(--gray-4)); text-align: center; }

.fill-bar--full {
  display: flex;
  border: 1px solid hsl(var(--accent-blue) / 0.45);
  border-radius: 10px;
  overflow: hidden;
  background: hsl(var(--accent-blue) / 0.06);
  box-shadow: 0 0 24px -6px hsl(var(--accent-blue) / 0.35);
}

.fill-seg {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px;
  border-right: 1px solid hsl(var(--accent-blue) / 0.22);
}
.fill-seg:last-child { border-right: 0; }
.fill-seg svg { width: 16px; height: 16px; color: hsl(var(--accent-blue-foreground)); }
.fill-seg span { font-size: 12.5px; font-weight: 500; color: hsl(var(--gray-1)); }

/* Per-element callouts: a connector line + text under each part. */
.fill-annos {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 16px;
  margin-top: 8px;
}
.fill-anno {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fill-anno__line {
  width: 2px;
  height: 26px;
  background: hsl(var(--gray-6));
  margin-bottom: 12px;
}
.fill-row--us .fill-anno__line { background: hsl(var(--accent-blue) / 0.45); }
.fill-anno__text {
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--gray-3));
  max-width: 240px;
}

/* ---------- Layer card mini-visuals (replace TODO thumbs) ---------- */

.layer-thumb {
  aspect-ratio: 16 / 10;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background:
    radial-gradient(hsl(var(--separator)) 1px, transparent 1px) -1px -1px / 18px 18px,
    hsl(var(--surface));
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
}

.skel {
  height: 8px;
  border-radius: 999px;
  background: hsl(var(--muted));
}
.skel.w-90 { width: 90%; }
.skel.w-75 { width: 75%; }
.skel.w-55 { width: 55%; }

.mini-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.mini-tree b {
  display: block;
  width: 64px;
  height: 18px;
  border-radius: 5px;
  background: hsl(var(--accent-blue) / 0.25);
  border: 1px solid hsl(var(--accent-blue) / 0.4);
}
.mini-tree .branch {
  display: flex;
  gap: 22px;
}
.mini-tree .branch b {
  background: hsl(var(--muted));
  border-color: hsl(var(--separator));
}

.mini-screen {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mini-screen .bar {
  height: 16px;
  border-radius: 5px;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--separator));
}
.mini-screen .zones {
  display: flex;
  gap: 8px;
}
.mini-screen .zones span {
  flex: 1;
  height: 52px;
  border-radius: 6px;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--separator));
}

.mini-doc {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: hsl(var(--gray-4));
}
.mini-doc .k { color: hsl(var(--code-keyword)); }
.mini-doc .s { color: hsl(var(--code-string)); }
.mini-doc .f { color: hsl(var(--code-function)); }

/* ---------- Faux Claude Code terminal ---------- */

.term {
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--surface));
  overflow: hidden;
  box-shadow: 0 20px 60px -24px rgba(0, 0, 0, 0.6);
}

.term__bar {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid hsl(var(--separator));
  background: hsl(var(--surface-raised));
}

.term__bar .app-shot__dots i { background: hsl(var(--gray-6)); }

.term__bar span {
  font-size: 12.5px;
  font-family: var(--font-mono);
  color: hsl(var(--gray-4));
}

.term__body {
  padding: 18px 18px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.9;
}

.term__line {
  margin: 0;
  color: hsl(var(--gray-2));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.term__line .prompt { color: hsl(var(--accent-blue-foreground)); }
.term__line .cmd { color: hsl(var(--code-function)); }
.term__line .ok { color: hsl(var(--code-function)); }
.term__line.muted { color: hsl(var(--gray-5)); }
.term__line .path { color: hsl(var(--code-string)); }

/* ---------- Landing thread responsive ---------- */

@media (max-width: 880px) {
  .hero-thread {
    padding-top: 56px;
    padding-bottom: 48px;
  }
  .hero-thread__title { font-size: 40px; }
  .hero-thread__sub { font-size: 18px; }
  .fill-track,
  .fill-annos { grid-template-columns: 116px 1fr 116px; gap: 10px; }
}

/* Narrow phones: the three middle segments can't sit side-by-side without
   clipping "Architecture", so stack them and trim the side caps. */
@media (max-width: 520px) {
  .fill-track,
  .fill-annos { grid-template-columns: 88px 1fr 88px; gap: 8px; }
  .fill-bar--full { flex-direction: column; }
  .fill-seg { border-right: 0; border-bottom: 1px solid hsl(var(--accent-blue) / 0.22); }
  .fill-seg:last-child { border-bottom: 0; }
}

@media (max-width: 720px) {
  .app-shot__main { grid-template-columns: 0 1fr; }
  .app-shot__rail { display: none; }
  .node { width: 44%; }
}

@media (max-width: 480px) {
  .hero-thread__title { font-size: 34px; }
}

/* =====================================================================
   LAYERS JOURNEY: agree.com "container per section" model.
   Five discrete tinted containers stacked with gaps. Nothing is sticky.
   The same project artifact lives in every container, always on the
   right, and bounces up into place as each container scrolls into view,
   so it reads as one object jumping down from container to container.
   Each container bakes its own --tint and accretion state; JS is just
   one IntersectionObserver toggling .is-in to fire the entrance.
   ===================================================================== */

.lj {
  position: relative;
  padding-bottom: 40px;
}

.lj-head {
  /* Match the inter-section gap above the owl heading (the .lj section's 40px
     bottom + the next .section's 152px top); the app-stage above has no bottom
     padding, so the full gap lives here. */
  padding-top: 192px;
  padding-bottom: 40px;
}

/* ---------- The stack of containers (gaps make them discrete) ---------- */

.lj-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lj-card {
  --tint: 217;
  display: flex;
  align-items: center;
  min-height: 60vh;
  padding: clamp(32px, 5vw, 72px);
  border-radius: 28px;
  border: 1px solid hsl(var(--tint) 40% 24% / 0.7);
  background:
    linear-gradient(
      150deg,
      hsl(var(--tint) 38% 13%) 0%,
      hsl(var(--tint) 32% 9%) 58%,
      hsl(var(--tint) 26% 8%) 100%
    );
}

/* Every container is Denote blue (--tint stays 217). The gradient is what
   varies: bloom position, size, intensity, and layer count all differ, so
   the stack feels hand-tuned rather than a tidy corner cycle. Spec is the
   brightest (payoff). Some cards carry a second, fainter light source. */
.lj-card--vision {
  background: radial-gradient(150% 135% at 28% 38%, hsl(var(--tint) 45% 15%), hsl(var(--tint) 30% 8%) 64%);
}
.lj-card--ontology {
  background:
    radial-gradient(85% 75% at 80% 16%, hsl(var(--tint) 52% 16%), transparent 68%),
    radial-gradient(125% 120% at 25% 92%, hsl(var(--tint) 36% 11%), hsl(var(--tint) 27% 7%) 72%);
}
.lj-card--architecture {
  background: radial-gradient(170% 85% at 58% 6%, hsl(var(--tint) 47% 15%), hsl(var(--tint) 29% 8%) 58%);
}
.lj-card--screens {
  background:
    radial-gradient(65% 60% at 86% 74%, hsl(var(--tint) 54% 17%), transparent 64%),
    radial-gradient(135% 125% at 22% 28%, hsl(var(--tint) 35% 11%), hsl(var(--tint) 27% 7%) 74%);
}
.lj-card--spec {
  background:
    radial-gradient(125% 115% at 48% 114%, hsl(var(--tint) 58% 18%), transparent 60%),
    radial-gradient(115% 120% at 78% 4%, hsl(var(--tint) 42% 13%), hsl(var(--tint) 28% 7%) 70%);
}

.lj-card__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* ---------- Text side ---------- */

.lj-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 480px;
}

.lj-card__title {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: hsl(var(--foreground));
}

.lj-bullets {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.lj-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.45;
  color: hsl(var(--gray-2));
}

.lj-bullets svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  color: hsl(var(--tint) 88% 70%);
}

.lj-bullets code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: hsl(var(--gray-1));
}

.lj-doclink {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: hsl(var(--gray-2));
  background: hsl(var(--tint) 30% 8% / 0.5);
  border: 1px solid hsl(var(--tint) 40% 30% / 0.7);
  border-radius: 8px;
  padding: 8px 13px;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.lj-doclink:hover {
  background: hsl(var(--tint) 45% 16% / 0.6);
  border-color: hsl(var(--tint) 62% 46% / 0.85);
  color: hsl(var(--gray-1));
  text-decoration: none;
}

.lj-doclink:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.lj-doclink__cmd {
  font-family: var(--font-mono);
  color: hsl(var(--tint) 90% 74%);
}

.lj-doclink svg {
  width: 14px;
  height: 14px;
  color: hsl(var(--tint) 85% 68%);
  transition: transform 140ms ease;
}

.lj-doclink:hover svg {
  transform: translateX(2px);
}

/* ---------- Artifact side (always right; glow behind it) ---------- */

.lj-card__art {
  position: relative;
  display: flex;
  justify-content: center;
}

.lj-card__art::before {
  content: '';
  position: absolute;
  width: 82%;
  height: 72%;
  background: radial-gradient(
    ellipse at center,
    hsl(var(--tint) 80% 55% / 0.28),
    transparent 70%
  );
  filter: blur(48px);
  z-index: 0;
}

.lj-art {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  height: 420px;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--surface));
  box-shadow:
    0 0 0 1px hsl(var(--tint) 80% 55% / 0.2),
    0 30px 70px -24px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lj-art__bar {
  flex-shrink: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid hsl(var(--separator));
  background: hsl(var(--surface-raised));
}

.lj-art__dots {
  display: flex;
  gap: 6px;
}

.lj-art__dots i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: hsl(var(--gray-6));
}

.lj-art__crumb {
  font-family: var(--font-mono);
  font-size: 12px;
  color: hsl(var(--gray-4));
}

.lj-art__crumb b {
  color: hsl(var(--tint) 88% 74%);
  font-weight: 500;
}

.lj-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  background-color: hsl(var(--surface));
  background-image: radial-gradient(hsl(var(--border)) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: -1px -1px;
}

/* ====================== Per-layer artifact visuals ====================== */

/* Vision: a scratchpad note card. */
.lj-note {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 11px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.lj-note__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: hsl(var(--gray-1));
}

.lj-note__head svg {
  width: 16px;
  height: 16px;
  color: hsl(var(--tint) 88% 70%);
}

.lj-skel {
  height: 8px;
  border-radius: 999px;
  background: hsl(var(--muted));
}
.lj-skel.w-90 { width: 90%; }
.lj-skel.w-80 { width: 80%; }
.lj-skel.w-70 { width: 70%; }

/* Ontology: entity / persona / task cards. Mirrors the app's Ontology cards —
   a tinted media well with a faint type glyph on the left, then name +
   description + a dim metadata-count row on the right; one card carries the
   selected blue ring. */
.lj-oc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.lj-oc {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.lj-oc--sel {
  border-color: hsl(var(--tint) 80% 55%);
  box-shadow: 0 0 0 1px hsl(var(--tint) 80% 55% / 0.25);
}

.lj-oc__well {
  flex-shrink: 0;
  width: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--tint) 80% 55% / 0.08);
}

.lj-oc__well svg {
  width: 34px;
  height: 34px;
  color: hsl(var(--tint) 88% 70%);
  opacity: 0.4;
}

.lj-oc__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 14px;
}

.lj-oc__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: hsl(var(--gray-1));
}

.lj-oc__desc {
  font-size: 12px;
  line-height: 1.35;
  color: hsl(var(--gray-3));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lj-oc__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 3px;
}

.lj-oc__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: hsl(var(--gray-4));
}

.lj-oc__meta svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: hsl(var(--gray-4));
}

/* Architecture: a screen tree. Each node mirrors the app's ArchNode — a card
   with the screen name + a level badge (L1 blue / L2 violet / L3 muted) over a
   wireframe schematic of its template + variant. Hierarchy connectors are
   muted-gray rails with small terminal dots (the app's sitemap view). */
.lj-arch {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lj-arch__node {
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  padding: 7px;
}

.lj-arch__node--root {
  border-color: hsl(var(--tint) 80% 55%);
  box-shadow: 0 0 0 1px hsl(var(--tint) 80% 55% / 0.25);
}

.lj-arch__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lj-arch__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: hsl(var(--gray-1));
}

/* Level badge (mirrors the app's LevelBadge palette). */
.lj-lvl {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 2px 4px;
  border-radius: 4px;
}
.lj-lvl--1 { background: hsl(var(--accent-blue) / 0.15); color: hsl(var(--accent-blue-foreground)); }
.lj-lvl--2 { background: hsl(var(--accent-violet) / 0.15); color: hsl(var(--accent-violet)); }
.lj-lvl--3 { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* Wireframe schematic — template + variant rendered as muted zones, like the
   app's PatternSchematic at node scale. */
.lj-wf {
  height: 42px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px;
  border-radius: 4px;
  background: hsl(var(--muted) / 0.2);
  overflow: hidden;
}

.lj-wf__bar {
  height: 6px;
  width: 55%;
  border-radius: 2px;
  background: hsl(var(--muted));
}

.lj-wf__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px;
}
.lj-wf__grid > span {
  border-radius: 2px;
  background: hsl(var(--muted));
}

.lj-wf__cols {
  flex: 1;
  display: flex;
  gap: 3px;
}
.lj-wf__main {
  flex: 2;
  border-radius: 2px;
  background: hsl(var(--muted));
}
.lj-wf__side {
  flex: 1;
  border-radius: 2px;
  background: hsl(var(--muted));
}

.lj-wf--list {
  justify-content: center;
  gap: 4px;
}
.lj-wf--list > span {
  height: 7px;
  border-radius: 2px;
  background: hsl(var(--muted));
}
.lj-wf--list > span:nth-child(even) { width: 82%; }

.lj-wf--detail {
  gap: 4px;
}
.lj-wf__block {
  flex: 1;
  border-radius: 2px;
  background: hsl(var(--muted));
}
.lj-wf__line {
  height: 6px;
  width: 70%;
  border-radius: 2px;
  background: hsl(var(--muted));
}

/* Hierarchy connectors. */
.lj-arch__stem {
  width: 1px;
  height: 16px;
  background: hsl(var(--muted-foreground) / 0.3);
}

.lj-arch__fork {
  position: relative;
  display: flex;
  gap: 18px;
  padding-top: 16px;
}

.lj-arch__fork::before {
  content: '';
  position: absolute;
  top: 0;
  left: 23%;
  right: 23%;
  height: 1px;
  background: hsl(var(--muted-foreground) / 0.3);
}

.lj-arch__leg {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lj-arch__leg::before {
  content: '';
  width: 1px;
  height: 16px;
  background: hsl(var(--muted-foreground) / 0.3);
  margin-top: -16px;
}

.lj-arch__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  margin-bottom: 4px;
}

/* Screens: a composed page (mirrors the app's compose canvas) — a bg-background
   frame holding bg-muted zones, each captioned with its lowercase region name
   and filled with the app's content-type chips (Lucide glyph + content label). */
.lj-compose {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--background));
}

.lj-zone {
  position: relative;
  border-radius: 6px;
  background: hsl(var(--muted));
  padding: 27px 8px 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lj-zone--body { flex: 2; }
.lj-zone--aside { flex: 1; }

.lj-zone__cap {
  position: absolute;
  left: 7px;
  top: 4px;
  font-size: 11px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}

.lj-zone__chips {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lj-cchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid hsl(var(--border) / 0.6);
  background: hsl(var(--background));
  font-size: 11px;
  font-weight: 500;
  color: hsl(var(--foreground) / 0.8);
}

.lj-cchip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}

.lj-zone-row {
  display: flex;
  gap: 8px;
  flex: 1;
  min-height: 120px;
}
.lj-zone-row > * { min-width: 0; }

/* Spec: the generated SPEC.md as a rendered markdown reader (mirrors the app's
   prose-invert view) — a title, the "generated from" note, and a few sections
   with prose. */
.lj-spec {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--surface-raised));
}

.lj-md__h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--gray-1));
}

.lj-md__quote {
  padding-left: 11px;
  border-left: 2px solid hsl(var(--border));
  font-size: 12.5px;
  font-style: italic;
  color: hsl(var(--gray-3));
}

.lj-md__sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lj-md__h2 {
  font-size: 13.5px;
  font-weight: 600;
  color: hsl(var(--gray-1));
}

/* ====================== Motion ====================== */
/* Visible by default (no JS, or reduced motion). When JS adds .js and the
   user allows motion, the artifact + text start hidden and animate in as
   the container crosses into view: the artifact "jumps" up into place. */

@media (prefers-reduced-motion: no-preference) {
  .lj.js .lj-anim {
    opacity: 0;
    transform: translateY(14px);
  }
  .lj.js .lj-art {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }

  .lj.js .lj-card.is-in .lj-anim {
    animation: lj-rise 460ms ease-out forwards;
  }
  .lj.js .lj-card.is-in .lj-anim:nth-child(1) { animation-delay: 50ms; }
  .lj.js .lj-card.is-in .lj-anim:nth-child(2) { animation-delay: 120ms; }
  .lj.js .lj-card.is-in .lj-anim:nth-child(3) { animation-delay: 190ms; }
  .lj.js .lj-card.is-in .lj-anim:nth-child(4) { animation-delay: 260ms; }

  .lj.js .lj-card.is-in .lj-art {
    animation: lj-jump 600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 120ms;
  }
}

@keyframes lj-jump {
  0%   { opacity: 0; transform: translateY(40px) scale(0.97); }
  60%  { opacity: 1; transform: translateY(-8px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lj-rise {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

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

@media (max-width: 920px) {
  .lj-card {
    min-height: 0;
    padding: clamp(28px, 6vw, 44px);
    border-radius: 22px;
  }
  .lj-card__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  /* Artifact under the text; centred. Nothing sticky to break. */
  .lj-art { max-width: 420px; height: 400px; margin: 0 auto; }
  .lj-card__art::before { width: 70%; }
  .lj-head { padding-top: 112px; }
}

@media (max-width: 480px) {
  .lj-art { height: 380px; }
  /* Trip card: drop the relationships datapoint so the meta row stays calm */
  .lj-oc--sel .lj-oc__meta span:last-child { display: none; }
}

/* ===========================================================================
   Docs shell
   Two-column reading surface: sidebar (240px) + content (max ~720px prose).
   Topbar is three-zone (logo | Documentation pill | search). Mobile collapses
   the sidebar into a <dialog> drawer opened by a hamburger button.
   =========================================================================== */

.docs-body {
  background: hsl(var(--surface-raised));
}

.docs-skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  z-index: 10;
}

.docs-skip-link:focus {
  top: 8px;
}

/* ---------- Docs topbar ---------- */

.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: hsl(var(--surface-raised) / 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid hsl(var(--separator));
}

.docs-topbar-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.docs-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.docs-topbar-logo {
  display: inline-flex;
}

.docs-topbar-logo img {
  height: 24px;
  width: auto;
  display: block;
}

.docs-breadcrumb-sep {
  color: hsl(var(--gray-5));
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  user-select: none;
}

.docs-breadcrumb-link {
  color: hsl(var(--gray-2));
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0.005em;
}

.docs-breadcrumb-link:hover {
  color: hsl(var(--foreground));
  text-decoration: none;
}

.docs-breadcrumb-link:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: 3px;
}

.docs-topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.docs-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 260px;
  max-width: 100%;
  padding: 0 10px 0 32px;
  background: hsl(var(--input));
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  height: 34px;
  color: hsl(var(--gray-3));
  cursor: text;
  transition: border-color 120ms ease;
}

.docs-search:focus-within {
  border-color: hsl(var(--ring));
}

.docs-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: hsl(var(--gray-4));
  pointer-events: none;
}

.docs-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: hsl(var(--foreground));
  padding: 0;
  cursor: inherit;
}

.docs-search input::placeholder {
  color: hsl(var(--gray-4));
}

.docs-search-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: hsl(var(--gray-4));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1;
}

.docs-search-mobile {
  display: none;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  color: hsl(var(--gray-3));
  cursor: pointer;
}

.docs-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: hsl(var(--surface-raised));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  box-shadow: 0 12px 32px -8px hsl(0 0% 0% / 0.5);
  z-index: 20;
  padding: 4px;
}

.docs-search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: hsl(var(--foreground));
  font-size: 14px;
  line-height: 1.4;
}

.docs-search-result:hover,
.docs-search-result.is-active {
  background: hsl(var(--muted));
}

.docs-search-result-section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--gray-4));
  font-weight: 600;
}

.docs-search-result-title {
  font-weight: 600;
  color: hsl(var(--foreground));
}

.docs-search-result-snippet {
  font-size: 13px;
  color: hsl(var(--gray-3));
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.docs-search-result mark {
  background: hsl(var(--ring) / 0.25);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

.docs-search-empty {
  padding: 14px 12px;
  color: hsl(var(--gray-4));
  font-size: 13px;
}

.docs-search-mobile svg {
  width: 16px;
  height: 16px;
}

.docs-mobile-nav {
  display: none;
}

.docs-hamburger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  color: hsl(var(--gray-2));
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.docs-hamburger:hover {
  background: hsl(var(--card));
  color: hsl(var(--gray-1));
}

.docs-hamburger:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.docs-hamburger svg {
  width: 16px;
  height: 16px;
}

/* ---------- Docs layout ---------- */

.docs-layout {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.docs-sidebar {
  padding: 32px 24px 48px 0;
  border-right: 1px solid hsl(var(--separator));
  align-self: stretch;
}

.docs-sidebar-section {
  margin-bottom: 36px;
}

.docs-sidebar-section:last-child {
  margin-bottom: 0;
}

.docs-sidebar-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: hsl(var(--gray-4));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  padding: 0 10px;
}

.docs-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.docs-sidebar-link {
  display: block;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: hsl(var(--gray-3));
  text-decoration: none;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
}

.docs-sidebar-link:hover {
  background: hsl(var(--muted));
  color: hsl(var(--gray-1));
  text-decoration: none;
}

.docs-sidebar-link:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.docs-sidebar-link[aria-current='page'] {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-weight: 500;
}

/* ---------- Docs content ---------- */

.docs-content {
  padding: 56px 0 96px 64px;
  min-width: 0;
}

.docs-page-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  color: hsl(var(--foreground));
}

/* Prose: scoped to rendered markdown body only. */

.prose {
  max-width: 660px;
  font-size: 17px;
  line-height: 1.7;
  color: hsl(var(--gray-2));
}

.prose h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: hsl(var(--foreground));
  margin: 48px 0 16px;
}

.prose h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: hsl(var(--foreground));
  margin: 32px 0 12px;
}

.prose h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: hsl(var(--foreground));
  margin: 24px 0 8px;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre,
.prose table {
  margin: 0 0 20px;
}

.prose ul,
.prose ol {
  padding-left: 24px;
}

.prose li {
  margin: 4px 0;
}

.prose li > ul,
.prose li > ol {
  margin: 4px 0;
}

.prose a {
  color: hsl(var(--accent-blue));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  color: hsl(var(--accent-blue-foreground));
  text-decoration: none;
}

.prose strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.prose em {
  font-style: italic;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: hsl(var(--muted));
  color: hsl(var(--gray-1));
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 500;
}

.prose pre {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  padding: 16px 20px;
  overflow-x: scroll;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: hsl(var(--code-string));
}

.prose pre::-webkit-scrollbar {
  height: 10px;
}

.prose pre::-webkit-scrollbar-track {
  background: hsl(var(--muted));
  border-radius: 8px;
}

.prose pre::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 8px;
}

.prose pre::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--gray-4));
}

.prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: 400;
}

.prose blockquote {
  border-left: 2px solid hsl(var(--border));
  padding-left: 16px;
  color: hsl(var(--gray-3));
  font-style: normal;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose hr {
  border: 0;
  border-top: 1px solid hsl(var(--separator));
  margin: 48px 0;
}

.prose table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}

.prose thead th {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid hsl(var(--border));
}

.prose thead th + th {
  border-left: 1px solid hsl(var(--border));
}

.prose tbody td {
  text-align: left;
  padding: 10px 14px;
  vertical-align: top;
  border-bottom: 1px solid hsl(var(--border));
}

.prose tbody td + td {
  border-left: 1px solid hsl(var(--border));
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

.prose img {
  border-radius: 8px;
  border: 1px solid hsl(var(--border));
  margin: 24px 0;
}

/* ---------- Prism syntax highlighting ---------- */

.prose pre .token.comment,
.prose pre .token.prolog,
.prose pre .token.doctype,
.prose pre .token.cdata {
  color: hsl(var(--gray-5));
  font-style: italic;
}

.prose pre .token.punctuation {
  color: hsl(var(--gray-3));
}

.prose pre .token.property,
.prose pre .token.tag,
.prose pre .token.boolean,
.prose pre .token.number,
.prose pre .token.constant,
.prose pre .token.symbol,
.prose pre .token.deleted {
  color: hsl(var(--accent-blue-foreground));
}

.prose pre .token.selector,
.prose pre .token.string,
.prose pre .token.char,
.prose pre .token.builtin,
.prose pre .token.inserted,
.prose pre .token.regex {
  color: hsl(var(--code-string));
}

.prose pre .token.attr-name {
  color: hsl(var(--code-function));
}

.prose pre .token.operator,
.prose pre .token.entity,
.prose pre .token.url,
.prose pre .language-css .token.string,
.prose pre .style .token.string {
  color: hsl(var(--gray-2));
}

.prose pre .token.atrule,
.prose pre .token.attr-value,
.prose pre .token.keyword {
  color: hsl(var(--code-keyword));
}

.prose pre .token.function,
.prose pre .token.class-name {
  color: hsl(var(--code-function));
  font-weight: 500;
}

.prose pre .token.important,
.prose pre .token.variable {
  color: hsl(var(--code-string));
}

/* ---------- Docs drawer (mobile sidebar) ---------- */

.docs-drawer {
  margin: 0;
  padding: 0;
  max-width: 320px;
  width: 86%;
  height: 100vh;
  max-height: none;
  border: 0;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--surface-raised));
  color: hsl(var(--foreground));
  position: fixed;
  inset: 0 auto 0 0;

  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    overlay 180ms ease allow-discrete,
    display 180ms ease allow-discrete;
}

.docs-drawer[open] {
  opacity: 1;
  transform: translateX(0);
}

@starting-style {
  .docs-drawer[open] {
    opacity: 0;
    transform: translateX(-16px);
  }
}

.docs-drawer::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition:
    opacity 180ms ease,
    overlay 180ms ease allow-discrete,
    display 180ms ease allow-discrete;
}

.docs-drawer[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .docs-drawer[open]::backdrop {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-drawer,
  .docs-drawer::backdrop {
    transition: none;
  }
  .docs-drawer {
    transform: none;
  }
}

.docs-drawer-header {
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  border-bottom: 1px solid hsl(var(--separator));
}

.docs-drawer-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: hsl(var(--gray-3));
  cursor: pointer;
}

.docs-drawer-close:hover {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}

.docs-drawer-close svg {
  width: 18px;
  height: 18px;
}

.docs-drawer-nav {
  padding: 16px 20px 48px;
  overflow-y: auto;
  height: calc(100vh - 60px);
}

.docs-drawer-nav .docs-sidebar-nav {
  display: block;
}

/* ---------- Docs responsive ---------- */

@media (max-width: 1040px) {
  .docs-search {
    width: 180px;
  }
}

@media (max-width: 880px) {
  .docs-topbar-inner {
    padding: 0 20px;
  }

  .docs-topbar-logo img {
    height: 22px;
  }

  .docs-search {
    display: none;
  }

  .docs-search-mobile {
    display: inline-flex;
  }

  .docs-mobile-nav {
    display: flex;
    max-width: var(--max-content);
    margin: 0 auto;
    padding: 20px 20px 0;
  }

  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 20px;
  }

  .docs-sidebar {
    display: none;
  }

  .docs-content {
    padding: 24px 0 80px;
  }

  .docs-page-title {
    font-size: 30px;
    margin-bottom: 24px;
  }

  .prose {
    font-size: 16px;
  }

  .prose h2 {
    font-size: 22px;
    margin-top: 40px;
  }

  .prose h3 {
    font-size: 18px;
    margin-top: 28px;
  }
}

@media (max-width: 480px) {
  .docs-topbar-inner {
    padding: 0 16px;
  }

  .docs-pill {
    font-size: 12px;
    padding: 4px 10px;
  }

  .docs-layout {
    padding: 0 16px;
  }
}