.resource-page,
.resource-page-family { background: #fff; color: #20242d; }

.resource-shell {
  width: min(calc(100% - 48px), 1280px);
  margin-inline: auto;
}

.resource-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(at 0% 0%, #001939 40%, #2a4f6a 100%);
  color: #fff;
}

.resource-hero::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(230, 235, 248, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(230, 235, 248, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  content: "";
  pointer-events: none;
}

.resource-hero-inner {
  position: relative;
  z-index: 1;
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(380px, .76fr);
  gap: clamp(40px, 7vw, 90px);
  align-items: center;
  padding-block: 54px;
}

.resource-hero-copy { max-width: 650px; }
.resource-hero h1 { margin: 0 0 16px; color: #fff; font-family: var(--font-body); font-size: 3.8rem; font-weight: 600; letter-spacing: 0; }
.resource-hero-copy p { max-width: 60ch; margin: 0; color: rgba(255, 255, 255, .75); font-size: 1rem; line-height: 1.7; }
.resource-hero-art { min-width: 0; }

.resource-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; }
.resource-actions a { color: #fff; font-size: .9rem; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .42); text-underline-offset: 4px; }
.resource-actions a:hover { text-decoration-color: #fff; }

.resource-diagram { display: block; width: 100%; height: auto; max-height: 300px; overflow: visible; }
.resource-sheet-shadow { fill: rgba(0, 14, 34, .28); }
.resource-sheet-back { fill: rgba(230, 235, 248, .05); stroke: #a8b8e6; stroke-width: 1.2; }
.resource-sheet-fold { fill: rgba(205, 214, 241, .12); stroke: #cdd6f1; stroke-width: 1.2; stroke-linejoin: round; }
.resource-sheet { fill: rgba(230, 235, 248, .07); stroke: #fff; stroke-width: 1.4; }
.resource-rule,
.resource-axis { fill: none; stroke: rgba(205, 214, 241, .5); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.resource-mesh { fill: rgba(205, 214, 241, .12); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.resource-mesh-line { fill: none; stroke: #a8b8e6; stroke-width: .85; stroke-linecap: round; stroke-linejoin: round; }
.resource-contour { fill: none; stroke-width: 2; }
.resource-contour--one { stroke: #cdd6f1; }
.resource-contour--two { stroke: #fff; }
.resource-contour--three { stroke: #a8b8e6; }
.resource-band { fill: rgba(205, 214, 241, .13); }
.resource-curve { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.resource-curve--soft { stroke: #a8b8e6; stroke-width: 1.4; }
.resource-connector { fill: none; stroke: #cdd6f1; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resource-flow-nodes { fill: #2a4f6a; stroke: #fff; stroke-width: 1.6; }
.resource-arrow-line { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resource-package { fill: rgba(205, 214, 241, .1); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.resource-package-line { fill: none; stroke: #a8b8e6; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.resource-check { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* The unanimated rules above are the complete final frame. Motion only stages it on load. */
@keyframes resource-motion-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes resource-motion-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .resource-diagram.motion-svg .resource-atlas-links .resource-connector {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: resource-motion-draw 1.05s cubic-bezier(.4, 0, .2, 1) 80ms 1 both;
  }
  .resource-diagram.motion-svg .resource-atlas-links .resource-flow-nodes {
    animation: resource-motion-reveal 280ms ease-out 920ms 1 both;
  }
  .resource-diagram.motion-svg .resource-atlas-package {
    animation: resource-motion-reveal 320ms ease-out 1.06s 1 both;
  }
  .resource-diagram.motion-svg .resource-atlas-package .resource-package-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: resource-motion-draw 360ms cubic-bezier(.4, 0, .2, 1) 1.14s 1 both;
  }
  .resource-diagram.motion-svg .resource-atlas-check .resource-check {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: resource-motion-draw 260ms cubic-bezier(.4, 0, .2, 1) 1.42s 1 both;
  }

  .resource-diagram.motion-svg .resource-docs-stack .resource-sheet-shadow {
    animation: resource-motion-reveal 180ms ease-out 1 both;
  }
  .resource-diagram.motion-svg .resource-docs-stack .resource-sheet-back {
    animation: resource-motion-reveal 220ms ease-out 60ms 1 both;
  }
  .resource-diagram.motion-svg .resource-docs-stack .resource-sheet-fold {
    animation: resource-motion-reveal 220ms ease-out 120ms 1 both;
  }
  .resource-diagram.motion-svg .resource-docs-stack .resource-sheet {
    animation: resource-motion-reveal 260ms ease-out 180ms 1 both;
  }
  .resource-diagram.motion-svg .resource-docs-stack .resource-rule {
    animation: resource-motion-reveal 260ms ease-out 380ms 1 both;
  }
  .resource-diagram.motion-svg .resource-docs-figure .resource-mesh {
    animation: resource-motion-reveal 240ms ease-out 500ms 1 both;
  }
  .resource-diagram.motion-svg .resource-docs-figure .resource-mesh-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: resource-motion-draw 500ms cubic-bezier(.4, 0, .2, 1) 520ms 1 both;
  }

  .resource-diagram.motion-svg .resource-tutorial-input {
    animation: resource-motion-reveal 240ms ease-out 40ms 1 both;
  }
  .resource-diagram.motion-svg .resource-tutorial-input .resource-curve {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: resource-motion-draw 380ms cubic-bezier(.4, 0, .2, 1) 70ms 1 both;
  }
  .resource-diagram.motion-svg .resource-tutorial-workflow .resource-connector {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: resource-motion-draw 420ms cubic-bezier(.4, 0, .2, 1) 280ms 1 both;
  }
  .resource-diagram.motion-svg .resource-tutorial-workflow .resource-arrow-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: resource-motion-draw 320ms cubic-bezier(.4, 0, .2, 1) 600ms 1 both;
  }
  .resource-diagram.motion-svg .resource-tutorial-step-nodes {
    animation: resource-motion-reveal 280ms ease-out 700ms 1 both;
  }
  .resource-diagram.motion-svg .resource-tutorial-result {
    animation: resource-motion-reveal 300ms ease-out 860ms 1 both;
  }
  .resource-diagram.motion-svg .resource-tutorial-result .resource-curve {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: resource-motion-draw 400ms cubic-bezier(.4, 0, .2, 1) 920ms 1 both;
  }

  .resource-diagram.motion-svg .resource-release-convergence .resource-connector {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: resource-motion-draw 680ms cubic-bezier(.4, 0, .2, 1) 60ms 1 both;
  }
  .resource-diagram.motion-svg .resource-release-convergence .resource-flow-nodes {
    animation: resource-motion-reveal 300ms ease-out 620ms 1 both;
  }
  .resource-diagram.motion-svg .resource-release-check .resource-check {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: resource-motion-draw 240ms cubic-bezier(.4, 0, .2, 1) 880ms 1 both;
  }
  .resource-diagram.motion-svg .resource-release-package {
    animation: resource-motion-reveal 300ms ease-out 980ms 1 both;
  }
  .resource-diagram.motion-svg .resource-release-package .resource-package-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: resource-motion-draw 360ms cubic-bezier(.4, 0, .2, 1) 1.04s 1 both;
  }
}

.docs-content-page { min-height: 70vh; background: #fff; }
.docs-content-page .docs-shot-frame { padding: 22px; }
.docs-content-page .docs-shot-frame .resource-diagram { max-height: none; }

.resource-directory { padding: 66px 0 86px; }
.resource-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.resource-directory-item { min-width: 0; display: flex; align-items: center; gap: 22px; padding: 28px 0; border-bottom: 1px solid #dce1e8; color: inherit; }
.resource-directory-item:hover { color: inherit; text-decoration: none; }
.resource-directory-copy { min-width: 0; display: grid; gap: 7px; }
.resource-directory-copy strong { color: #001939; font-size: 1.22rem; font-weight: 650; }
.resource-directory-copy span { max-width: 54ch; color: #5b626d; font-size: .92rem; line-height: 1.6; }
.resource-arrow,
.resource-lock { flex: 0 0 auto; margin-left: auto; color: #30487f; }
.resource-arrow { font-size: 1.35rem; transition: transform 160ms ease; }
.resource-lock { width: 20px; height: 20px; }
.resource-directory-item:hover .resource-arrow { transform: translateX(4px); }

.resource-page-family .resource-hero-inner {
  min-height: 172px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 48px;
  padding-block: 24px;
}
.resource-page-family .resource-hero-copy { max-width: 760px; }
.resource-page-family .resource-hero h1 { margin-bottom: 8px; font-size: 2rem; }
.resource-page-family .resource-hero-copy p { font-size: .92rem; line-height: 1.5; }
.resource-page-family .resource-actions { margin-top: 12px; }
.resource-page-family .resource-diagram { max-height: 96px; }

@media (max-width: 900px) {
  .resource-page .resource-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .resource-hero-copy { max-width: 720px; }
  .resource-page .resource-hero-art { width: min(100%, 680px); }
  .resource-hero h1 { font-size: 3.1rem; }
  .resource-page-family .resource-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 28px;
  }
  .resource-page-family .resource-hero h1 { font-size: 2rem; }
}

@media (max-width: 760px) {
  .resource-page-family .resource-hero-inner {
    min-height: 150px;
    grid-template-columns: 1fr;
    padding-block: 24px;
  }
  .resource-page-family .resource-hero-art { display: none; }
}

@media (max-width: 640px) {
  .resource-shell { width: min(calc(100% - 32px), 1280px); }
  .resource-page .resource-hero-inner { min-height: 0; padding-block: 42px; }
  .resource-hero h1 { font-size: 2.3rem; }
  .resource-page-family .resource-hero-inner { min-height: 150px; padding-block: 22px; }
  .resource-page-family .resource-hero h1 { font-size: 1.9rem; }
  .resource-directory { padding-block: 44px 62px; }
  .resource-directory-grid { grid-template-columns: 1fr; }
  .resource-directory-item { padding-block: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .resource-arrow { transition: none; }
  .resource-diagram.motion-svg * {
    animation: none !important;
    opacity: 1 !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
}