:root {
  --bg: #f3f7f7;
  --bg-alt: #e7efee;
  --ink: #0e1720;
  --mute: #5e6c73;
  --line: #dceced;
  --deep-ocean: #0b2e3a;
  --teal: #115e63;
  --sea-glass: #77c8c0;
  --pale-aqua: #bfe7e2;
  --accent: #0f5c63;
  --accent-dark: #0b4a50;
  --button-text: #f7fbfb;
  --node-center-x: 78.5vw;
  --node-center-y: 50vh;
  --radial-center-offset-x: -4vw;
  --radial-center-offset-y: 4vh;
  --radial-center-x: calc(var(--node-center-x) + var(--radial-center-offset-x));
  --radial-center-y: calc(var(--node-center-y) + var(--radial-center-offset-y));
  --radial-center-inset-x: calc(var(--radial-center-x) + 7vw);
  --radial-center-inset-y: calc(var(--radial-center-y) + 7vh);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

::selection {
  background: var(--pale-aqua);
  color: var(--deep-ocean);
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  min-height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 5% 2%, rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0) 38%),
    radial-gradient(ellipse at var(--radial-center-x) var(--radial-center-y), rgba(132, 211, 204, 0.24) 0, rgba(171, 224, 218, 0.1) 28%, rgba(171, 224, 218, 0) 60%),
    linear-gradient(180deg, #f6f8f7 0%, #edf4f2 54%, #dce8e7 100%);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

body::before {
  inset: -7%;
  background:
    repeating-radial-gradient(
      circle at var(--radial-center-inset-x) var(--radial-center-inset-y),
      transparent 0 54px,
      rgba(17, 94, 99, 0.045) 55px 56px,
      transparent 57px 92px
    ),
    radial-gradient(ellipse at var(--radial-center-inset-x) var(--radial-center-inset-y), rgba(121, 202, 194, 0.13), transparent 54%);
  filter: blur(0.2px);
  transform-origin: var(--radial-center-inset-x) var(--radial-center-inset-y);
  animation: radial-pulse 20s ease-in-out infinite;
  will-change: transform;
}

body::after {
  inset: 0;
  opacity: 0.45;
  background:
    repeating-radial-gradient(
      ellipse 78% 42% at 2% 111%,
      transparent 0 37px,
      rgba(11, 74, 80, 0.052) 38px 39px,
      transparent 40px 62px
    ),
    repeating-radial-gradient(
      ellipse 52% 32% at 96% 104%,
      transparent 0 44px,
      rgba(255, 255, 255, 0.32) 45px 46px,
      transparent 47px 70px
    );
  mask-image: linear-gradient(to bottom, transparent 8%, rgba(0, 0, 0, 0.25) 38%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, rgba(0, 0, 0, 0.25) 38%, black 100%);
}

@keyframes radial-pulse {
  0%,
  100% {
    transform: scale(0.98);
  }

  50% {
    transform: scale(1.03);
  }
}

@keyframes node-glow-pulse {
  0%,
  100% {
    transform: scale(0.97);
  }

  55% {
    transform: scale(1.035);
  }
}

header,
main,
footer {
  position: relative;
  z-index: 1;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

header,
footer {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-inline: 40px;
  display: flex;
  align-items: center;
}

header {
  padding-top: 28px;
  padding-bottom: 24px;
}

footer {
  padding-top: 20px;
  padding-bottom: 28px;
  color: var(--mute);
  font-size: 12px;
}

.wordmark {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
}

.wordmark {
  color: var(--deep-ocean);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.view {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(3px);
  pointer-events: none;
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 420ms ease,
    visibility 0s linear 520ms;
}

.view.is-active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: none;
  transition-delay: 80ms, 80ms, 80ms, 0s;
}

.home-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 40px 48px;
}

.hero {
  width: 100%;
  max-width: 620px;
  pointer-events: auto;
}

.eyebrow,
.paper-kicker {
  display: block;
  margin-bottom: 22px;
  color: var(--mute);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin-bottom: 26px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.lede {
  max-width: 52ch;
  margin-bottom: 40px;
  color: var(--mute);
  font-size: 1.05rem;
  line-height: 1.65;
}

.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 52px;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 0;
  border-radius: 2px;
  background: var(--accent);
  color: var(--button-text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 180ms ease, transform 180ms ease;
}

.primary-button:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.primary-button svg {
  width: 14px;
  height: 14px;
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 21px;
  border: 1px solid rgba(15, 92, 99, 0.3);
  border-radius: 2px;
  background: rgba(247, 251, 251, 0.36);
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.secondary-button:hover {
  border-color: rgba(15, 92, 99, 0.55);
  background: rgba(247, 251, 251, 0.72);
  transform: translateY(-1px);
}

.secondary-button svg {
  width: 15px;
  height: 15px;
}

.contact-link {
  color: var(--mute);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}

.contact-link:hover {
  color: var(--ink);
  border-color: var(--sea-glass);
}

.noscript-dashboard-copy {
  max-width: 54ch;
  color: var(--mute);
  font-size: 13px;
  line-height: 1.6;
}

.noscript-dashboard-copy a {
  color: var(--accent-dark);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fact-number {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.3rem;
}

.fact-label {
  color: var(--mute);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

.ambient-node {
  position: fixed;
  top: 8vh;
  right: -3vw;
  z-index: 0;
  width: min(49vw, 760px);
  height: 84vh;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, black 54%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, black 54%, transparent 100%);
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

body[data-view="dashboard"] .ambient-node {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.ambient-node::before {
  content: "";
  position: absolute;
  inset: 15% 5%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(112, 198, 193, 0.15), rgba(174, 224, 220, 0.04) 44%, transparent 72%);
  filter: blur(28px);
  pointer-events: none;
  transition: opacity 240ms ease;
  animation: node-glow-pulse 16s ease-in-out infinite;
  will-change: transform;
}

.ambient-node.is-interacting::before {
  opacity: 0.7;
}

.node-viewer {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: auto;
  touch-action: none;
  filter:
    drop-shadow(0 16px 22px rgba(9, 54, 61, 0.19))
    drop-shadow(0 0 9px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 28px rgba(112, 204, 199, 0.3));
  transition: opacity 520ms ease, filter 220ms ease;
}

.node-viewer:focus-visible {
  outline: 1px solid rgba(17, 94, 99, 0.32);
  outline-offset: -16px;
}

.ambient-node.is-ready .node-viewer {
  opacity: 0.76;
}

.ambient-node.is-interacting .node-viewer {
  opacity: 0.88;
  filter:
    drop-shadow(0 18px 24px rgba(9, 54, 61, 0.22))
    drop-shadow(0 0 11px rgba(255, 255, 255, 1))
    drop-shadow(0 0 34px rgba(112, 204, 199, 0.36));
}

.paper-view {
  padding: 0 40px 20px;
}

.paper-shell {
  width: 100%;
  max-width: 960px;
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 48px;
  pointer-events: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.back-button {
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--mute);
  cursor: pointer;
  font-size: 13px;
  transition: color 180ms ease, border-color 180ms ease;
}

.back-button:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.back-button svg {
  width: 14px;
  height: 14px;
}

.paper-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: none;
  padding: 0 24px 72px 0;
}

.paper-scroll::-webkit-scrollbar {
  display: none;
}

.dashboard-view {
  padding: 0 40px 20px;
}

.dashboard-shell {
  width: 100%;
  max-width: 960px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  overflow: hidden;
  pointer-events: auto;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.dashboard-sidebar {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 0 4px 48px 0;
}

.dashboard-sidebar::-webkit-scrollbar,
.dashboard-scroll::-webkit-scrollbar {
  display: none;
}

.dashboard-sidebar .back-button {
  margin-bottom: 40px;
}

.dashboard-kicker {
  display: block;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-intro h1 {
  margin-bottom: 18px;
  font-size: clamp(1.75rem, 3vw, 2.15rem);
  line-height: 1.16;
}

.dashboard-intro > p {
  color: var(--mute);
  font-size: 13px;
  line-height: 1.65;
}

.dashboard-source {
  margin-top: 26px;
  margin-bottom: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.dashboard-external-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-dark);
  border-bottom: 1px solid rgba(15, 92, 99, 0.3);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.dashboard-external-link:hover {
  border-color: var(--accent);
}

.dashboard-external-link svg {
  width: 13px;
  height: 13px;
}

.dashboard-intro .dashboard-privacy-copy {
  margin-top: 20px;
  font-size: 10.5px;
  line-height: 1.55;
}

.dashboard-scroll {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: none;
  padding: 0 20px 72px 0;
}

.dashboard-scroll:focus-visible {
  outline: 1px solid rgba(17, 94, 99, 0.45);
  outline-offset: 5px;
}

.dashboard-embed-card {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(17, 94, 99, 0.13);
  border-radius: 10px;
  background: rgba(247, 251, 251, 0.7);
  box-shadow: 0 18px 54px rgba(8, 54, 61, 0.11);
}

.dashboard-viz-frame {
  position: relative;
  width: 100%;
  min-height: 587px;
  overflow: hidden;
  border-radius: 5px;
  background:
    radial-gradient(circle at 76% 18%, rgba(119, 200, 192, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(231, 239, 238, 0.96), rgba(243, 247, 247, 0.98));
}

.tableauPlaceholder {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 587px;
  margin: 0 auto;
}

.tableauPlaceholder object,
.tableauPlaceholder iframe {
  display: block;
  margin: 0 auto;
  border: 0;
}

.dashboard-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 240ms ease;
}

.dashboard-embed-card.is-loading .dashboard-preview,
.dashboard-embed-card.has-failed .dashboard-preview {
  opacity: 0.64;
}

.dashboard-embed-card.is-loaded .dashboard-preview {
  visibility: hidden;
  opacity: 0;
}

.dashboard-embed-status {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 3;
  max-width: calc(100% - 32px);
  padding: 8px 12px;
  border: 1px solid rgba(17, 94, 99, 0.13);
  border-radius: 999px;
  background: rgba(247, 251, 251, 0.9);
  color: var(--mute);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  transform: translateX(-50%);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.dashboard-embed-card.is-loaded .dashboard-embed-status {
  visibility: hidden;
  opacity: 0;
}

.dashboard-embed-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: min(360px, calc(100% - 40px));
  padding: 24px;
  border: 1px solid rgba(17, 94, 99, 0.16);
  border-radius: 6px;
  background: rgba(247, 251, 251, 0.96);
  box-shadow: 0 14px 42px rgba(8, 54, 61, 0.14);
  color: var(--mute);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  transform: translate(-50%, -50%);
}

.dashboard-embed-fallback[hidden] {
  display: none;
}

.dashboard-embed-fallback strong,
.dashboard-embed-fallback span {
  display: block;
}

.dashboard-embed-fallback strong {
  margin-bottom: 6px;
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 500;
}

.dashboard-embed-fallback a {
  display: inline-block;
  margin-top: 15px;
  color: var(--accent-dark);
  font-weight: 500;
}

.dashboard-noscript-preview {
  display: block;
  width: 100%;
  height: auto;
}

.markdown-body {
  max-width: 680px;
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.78;
}

.markdown-body > :first-child {
  margin-top: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  color: var(--ink);
  font-weight: 500;
  line-height: 1.25;
}

.markdown-body h1 {
  margin: 0 0 32px;
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.markdown-body h2 {
  margin: 56px 0 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 1.65rem;
}

.markdown-body h3 {
  margin: 36px 0 12px;
  font-size: 1.25rem;
}

.markdown-body h4 {
  margin: 28px 0 10px;
  font-size: 1.05rem;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body pre,
.markdown-body table {
  margin: 0 0 22px;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 1.35em;
}

.markdown-body li + li {
  margin-top: 7px;
}

.markdown-body a {
  color: var(--teal);
  text-underline-offset: 3px;
}

.markdown-body blockquote {
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--accent);
  color: var(--mute);
  font-style: italic;
}

.markdown-body code {
  padding: 0.14em 0.34em;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
}

.markdown-body pre {
  overflow-x: auto;
  padding: 20px;
  background: var(--deep-ocean);
  color: var(--button-text);
  line-height: 1.55;
}

.markdown-body pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.markdown-body hr {
  height: 1px;
  margin: 40px 0;
  border: 0;
  background: var(--line);
}

.markdown-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px 0;
}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

.markdown-body th,
.markdown-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.markdown-body th {
  color: var(--mute);
  font-weight: 600;
}

.markdown-body table:has(img) {
  table-layout: fixed;
}

.markdown-body table:has(img) th {
  color: var(--ink);
  text-align: center;
}

.markdown-body table:has(img) td {
  padding: 12px 8px;
  vertical-align: middle;
}

.markdown-body table:has(img) img {
  width: 100%;
  margin: 0 auto;
}

.markdown-body .references-section {
  color: var(--mute);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  line-height: 1.55;
}

.markdown-body .references-section h2 {
  margin-bottom: 14px;
  color: var(--teal);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.markdown-body .references-section p {
  margin-bottom: 10px;
  padding-left: 1.4em;
  text-indent: -1.4em;
}

.markdown-body .references-section h2 + p {
  margin-bottom: 18px;
  padding-left: 0;
  text-indent: 0;
  font-style: italic;
}

.markdown-body .references-section a {
  color: inherit;
}

.loading-copy,
.error-copy {
  color: var(--mute);
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

.liquid-cursor {
  --cursor-x: -80px;
  --cursor-y: -80px;
  --scene-left: -80px;
  --scene-top: -80px;
  --scene-origin-x: 0px;
  --scene-origin-y: 0px;
  --light-x: 0px;
  --light-y: 0px;
  --light-angle: -28deg;
  --light-energy: 0.58;
  --rim-energy: 0.72;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 52px;
  height: 52px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  border: 0;
  border-radius: 58% 42% 53% 47% / 44% 48% 52% 56%;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.22), transparent 33%),
    radial-gradient(circle at 72% 78%, rgba(13, 102, 111, 0.1), transparent 52%),
    rgba(196, 235, 232, 0.075);
  box-shadow:
    0 8px 20px rgba(6, 54, 63, 0.1),
    0 2px 6px rgba(6, 54, 63, 0.08),
    inset 7px 8px 16px rgba(255, 255, 255, 0.12),
    inset -8px -10px 17px rgba(5, 75, 83, 0.1);
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0);
  backdrop-filter: blur(0.55px) saturate(1.28) contrast(1.075) brightness(1.025);
  -webkit-backdrop-filter: blur(0.55px) saturate(1.28) contrast(1.075) brightness(1.025);
  will-change: transform, opacity;
  transition: opacity 150ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.liquid-cursor__refraction {
  position: absolute;
  top: var(--scene-top);
  left: var(--scene-left);
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  opacity: 0.58;
  filter: saturate(1.16) contrast(1.055) brightness(1.025);
  transform: scale(1.065);
  transform-origin: var(--scene-origin-x) var(--scene-origin-y);
  pointer-events: none !important;
}

.liquid-cursor__refraction,
.liquid-cursor__refraction * {
  pointer-events: none !important;
  user-select: none !important;
}

.liquid-cursor::before,
.liquid-cursor::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
}

.liquid-cursor::before {
  inset: 0;
  padding: 1.25px;
  opacity: var(--rim-energy);
  background: conic-gradient(
    from 212deg,
    transparent 0deg 25deg,
    rgba(255, 255, 255, 0.54) 42deg,
    rgba(255, 255, 255, 0.1) 68deg,
    transparent 104deg 172deg,
    rgba(4, 70, 79, 0.2) 212deg,
    transparent 250deg 302deg,
    rgba(255, 255, 255, 0.3) 328deg,
    transparent 352deg
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
}

.liquid-cursor::after {
  inset: 3px;
  opacity: var(--light-energy);
  background:
    radial-gradient(ellipse 35% 18% at 29% 22%, rgba(255, 255, 255, 0.86) 0 12%, rgba(255, 255, 255, 0.24) 46%, transparent 74%),
    radial-gradient(ellipse 28% 48% at 84% 62%, rgba(255, 255, 255, 0.18), transparent 72%),
    radial-gradient(ellipse 46% 22% at 55% 92%, rgba(7, 88, 97, 0.11), transparent 76%);
  filter: blur(0.25px);
  mix-blend-mode: screen;
  transform:
    translate3d(var(--light-x), var(--light-y), 0)
    rotate(var(--light-angle));
  transform-origin: 50% 50%;
  transition: opacity 180ms ease;
}

.liquid-cursor.is-visible {
  opacity: 1;
}

.liquid-cursor.is-interactive {
  --light-energy: 0.82;
  --rim-energy: 0.9;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.27), transparent 34%),
    radial-gradient(circle at 72% 78%, rgba(11, 100, 109, 0.14), transparent 54%),
    rgba(173, 226, 222, 0.11);
  box-shadow:
    0 9px 22px rgba(6, 54, 63, 0.13),
    0 2px 6px rgba(6, 54, 63, 0.09),
    inset 7px 8px 16px rgba(255, 255, 255, 0.15),
    inset -8px -10px 17px rgba(5, 75, 83, 0.12);
}

.liquid-cursor.is-pressed {
  --light-energy: 1;
  background-color: rgba(160, 219, 215, 0.15);
}

*,
*::before,
*::after,
*::backdrop {
  cursor: none !important;
}

html.dashboard-cursor,
html.dashboard-cursor *,
html.dashboard-cursor *::before,
html.dashboard-cursor *::after,
html.dashboard-cursor *::backdrop {
  cursor: auto !important;
}

html.dashboard-cursor button,
html.dashboard-cursor a {
  cursor: pointer !important;
}

html.dashboard-cursor .liquid-cursor {
  display: none;
}

@media (max-width: 700px) {
  header,
  footer {
    padding-inline: 24px;
  }

  header {
    padding-top: 22px;
    padding-bottom: 18px;
  }

  footer {
    padding-top: 16px;
    padding-bottom: 20px;
  }

  .home-view {
    padding: 24px 24px 34px;
  }

  .ambient-node {
    top: 13vh;
    right: -36vw;
    width: 92vw;
    height: 72vh;
    opacity: 0.56;
  }

  .paper-view {
    padding: 0 24px 12px;
  }

  .dashboard-view {
    padding: 0 24px 12px;
  }

  .paper-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 20px;
    padding-top: 18px;
  }

  .paper-scroll {
    padding-right: 8px;
    padding-bottom: 48px;
  }

  .dashboard-shell {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding-top: 18px;
  }

  .dashboard-shell::-webkit-scrollbar {
    display: none;
  }

  .dashboard-sidebar {
    overflow: visible;
    padding: 0 4px 32px 0;
  }

  .dashboard-sidebar .back-button {
    margin-bottom: 26px;
  }

  .dashboard-intro h1 {
    max-width: 12ch;
  }

  .dashboard-scroll {
    overflow: visible;
    padding: 0 4px 48px 0;
  }

  .dashboard-viz-frame,
  .tableauPlaceholder {
    min-height: 977px;
  }

  .facts {
    gap: 22px;
  }
}

@media (max-height: 700px) {
  .home-view {
    padding-top: 18px;
    padding-bottom: 24px;
  }

  .eyebrow {
    margin-bottom: 14px;
  }

  h1 {
    margin-bottom: 18px;
    font-size: clamp(1.8rem, 6vh, 2.5rem);
  }

  .lede {
    margin-bottom: 26px;
    font-size: 0.96rem;
  }

  .cta-row {
    margin-bottom: 30px;
  }

  .facts {
    padding-top: 18px;
  }

  .ambient-node {
    top: 7vh;
    height: 80vh;
  }

  .dashboard-sidebar .back-button {
    margin-bottom: 24px;
  }

}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .ambient-node::before {
    animation: none;
  }

  .view,
  .primary-button,
  .secondary-button,
  .liquid-cursor,
  .node-viewer,
  .dashboard-preview {
    transition: none;
  }

}