/* deriva.dev: Tide, Deriva's visual identity (H:\Deriva\deriva\assets\brand and
   .claude/todo/08x/identity.md in the Deriva repo). Light and dark themes share one
   layout; only the tokens below change. Without data-theme the system preference
   decides; assets/theme.js sets data-theme when the visitor picks one. */

@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/stix-two-text-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/stix-two-text-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/stix-two-text-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/stix-two-text-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/stix-two-text-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
}

/* Tide, dark */
:root,
:root[data-theme="dark"] {
  --bg: #0d1416;
  --panel: #121b1e;
  --deep: #0a1012;
  --teal-panel: #142326;
  --line: #1e2b2f;
  --text: #dbe7e5;
  --muted: #8ea3a3;
  --accent: #5bb8a9;
  --on-accent: #0d1416;
  --ring-outer: #5e88ad;
  --ring-second: #4f9ca6;
  --ring-inner: #6cc5a9;
  --core: #a8ecd1;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 48px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

/* Tide, light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f2f6f5;
    --panel: #ffffff;
    --deep: #e9f0ee;
    --teal-panel: #e3eeec;
    --line: #dce5e3;
    --text: #1c2027;
    --muted: #56676a;
    --accent: #2a7680;
    --on-accent: #ffffff;
    --ring-outer: #4a78a0;
    --ring-second: #34858f;
    --ring-inner: #2f9c7f;
    --core: #1f7a5f;
    --shadow: 0 1px 2px rgb(16 40 44 / 0.06), 0 18px 48px rgb(16 40 44 / 0.12);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f2f6f5;
  --panel: #ffffff;
  --deep: #e9f0ee;
  --teal-panel: #e3eeec;
  --line: #dce5e3;
  --text: #1c2027;
  --muted: #56676a;
  --accent: #2a7680;
  --on-accent: #ffffff;
  --ring-outer: #4a78a0;
  --ring-second: #34858f;
  --ring-inner: #2f9c7f;
  --core: #1f7a5f;
  --shadow: 0 1px 2px rgb(16 40 44 / 0.06), 0 18px 48px rgb(16 40 44 / 0.12);
  color-scheme: light;
}

/* Theme-specific images: .on-dark shows in the dark theme, .on-light in the light one */
.on-light {
  display: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .on-light {
    display: block;
  }
  :root:not([data-theme="dark"]) .on-dark {
    display: none;
  }
}
:root[data-theme="light"] .on-light {
  display: block;
}
:root[data-theme="light"] .on-dark {
  display: none;
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
img,
svg {
  max-width: 100%;
}
h1,
h2,
h3 {
  font-family: "STIX Two Text", Georgia, serif;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.4rem);
}
h3 {
  font-size: 1.3rem;
}
p {
  margin: 0;
}
code,
pre,
.mono {
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}
:not(pre) > code {
  font-size: 0.88em;
  background: var(--teal-panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}
[hidden] {
  display: none !important;
}
/* Holds the ring paths that every mark on the page refers to (<use href="#ring-...">) */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 20;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 8px;
}
.skip:focus {
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 720px) {
  .wrap {
    padding: 0 32px;
  }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: "STIX Two Text", Georgia, serif;
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
}
.brand svg {
  width: 30px;
  height: 30px;
  flex: none;
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a,
.theme-toggle {
  color: var(--muted);
  text-decoration: none;
  font: 500 0.92rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav a:hover,
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--line);
}
.nav a[aria-current="page"] {
  color: var(--text);
}
.nav svg {
  width: 17px;
  height: 17px;
  flex: none;
}
@media (max-width: 480px) {
  .nav .label-wide {
    display: none;
  }
}

/* Mark colours (inline SVG; path data from deriva-mark-*.svg) */
.mark {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark .r-inner {
  stroke: var(--ring-inner);
}
.mark .r-second {
  stroke: var(--ring-second);
}
.mark .r-outer {
  stroke: var(--ring-outer);
}
.mark .core {
  stroke: var(--core);
}
.mark .core-fill {
  fill: var(--core);
  stroke: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover {
  border-color: var(--accent);
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn.primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--text));
}

/* Hero */
.hero {
  padding: 56px 0 40px;
}
.hero .wrap {
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 880px) {
  .hero {
    padding: 88px 0 72px;
  }
  .hero .wrap {
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
  }
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 0.8rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 7px 12px;
}
.status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ring-inner);
}
.hero h1 {
  font-size: clamp(3.6rem, 10vw, 6rem);
  letter-spacing: -0.01em;
  margin: 22px 0 10px;
}
.tagline {
  font: 500 clamp(0.95rem, 2.2vw, 1.12rem)/1.5 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--accent);
}
.lede {
  margin-top: 18px;
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 34em;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.hero-figure {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 620px;
}
.hero-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.callout polyline {
  fill: none;
  stroke: var(--muted);
  stroke-width: 0.3;
  stroke-dasharray: 0.9 0.9;
}
.callout circle {
  fill: var(--bg);
  stroke-width: 0.6;
}
.callout text {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 4.6px;
  fill: var(--text);
}
.callout .sub {
  font-size: 3.3px;
  fill: var(--muted);
}
.callout .c-outer circle {
  stroke: var(--ring-outer);
}
.callout .c-second circle {
  stroke: var(--ring-second);
}
.callout .c-inner circle {
  stroke: var(--ring-inner);
}
.callout .c-core circle {
  stroke: var(--core);
}
/* Hero animation (only with html.js-anim, which theme.js leaves off under reduced
   motion). The rings wait for site.js (.live) so the settled mark does not flash
   first, and the labels appear once the rings have settled (.settled). If site.js
   never runs, the keyframes below show both after a moment anyway. */
@keyframes appear {
  to {
    opacity: 1;
  }
}
.js-anim .hero-figure .rings {
  opacity: 0;
  animation: appear 0.01s linear 1.2s forwards;
}
.js-anim .hero-figure.live .rings {
  opacity: 1;
  animation: none;
}
.js-anim .hero-figure .callout g {
  opacity: 0;
  animation: appear 0.6s ease 2.4s forwards;
}
.js-anim .hero-figure.live .callout g {
  animation: none;
  transition: opacity 0.6s ease;
}
.js-anim .hero-figure.live.settled .callout g {
  opacity: 1;
}
.js-anim .hero-figure.live.settled .callout .c-second {
  transition-delay: 0.12s;
}
.js-anim .hero-figure.live.settled .callout .c-inner {
  transition-delay: 0.24s;
}
.js-anim .hero-figure.live.settled .callout .c-core {
  transition-delay: 0.36s;
}

/* Sections */
.section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 880px) {
  .section {
    padding: 96px 0;
  }
}
.eyebrow {
  font: 500 0.8rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.section-intro {
  max-width: 40em;
  color: var(--muted);
  margin-top: 14px;
  font-size: 1.06rem;
}

/* How it works */
.steps {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  gap: 16px;
  counter-reset: step;
}
@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}
.steps li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  position: relative;
}
.steps .step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.steps .step-head svg {
  width: 40px;
  height: 40px;
  flex: none;
}
.steps .step-num {
  font: 500 0.78rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}
.steps p {
  color: var(--muted);
  font-size: 0.98rem;
}
.steps .phases {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  font: 400 0.75rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--text);
  background: var(--teal-panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
}

/* Studio screenshot */
.shot {
  margin: 40px 0 0;
}
.shot .frame {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.shot .bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--deep);
}
.shot .bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.shot .bar span {
  margin-left: 10px;
  font: 400 0.75rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--muted);
}
.shot img {
  width: 100%;
  height: auto;
  vertical-align: bottom; /* no gap under the image; display stays with .on-dark/.on-light */
}
.shot figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Get started */
.quick {
  margin-top: 36px;
  display: grid;
  gap: 28px;
}
@media (min-width: 880px) {
  .quick {
    grid-template-columns: 1fr 1.35fr;
    gap: 48px;
    align-items: start;
  }
}
.needs {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
}
.needs li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--muted);
}
.needs li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--ring-inner);
  flex: none;
  transform: translateY(-1px);
}
.needs strong {
  color: var(--text);
  font-weight: 600;
}
.more {
  margin-top: 22px;
}

/* Code */
.code {
  position: relative;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 14px 0 0;
}
.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--text);
}
.code .c {
  color: var(--muted);
}
.code .p {
  color: var(--accent);
  user-select: none;
}
.copy {
  position: absolute;
  top: 8px;
  right: 8px;
  font: 500 0.72rem/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.code:hover .copy,
.copy:focus-visible,
.copy.done {
  opacity: 1;
}
@media (hover: none) {
  .copy {
    opacity: 1;
  }
}
.copy:hover {
  color: var(--text);
}

/* Numbered command steps */
.cmds {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: cmd;
  display: grid;
  gap: 18px;
}
.cmds > li {
  counter-increment: cmd;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0 14px;
  min-width: 0;
}
.cmds > li::before {
  content: counter(cmd);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--ring-second);
  color: var(--text);
  font: 500 0.8rem/25px "IBM Plex Mono", ui-monospace, monospace;
  text-align: center;
  grid-row: span 2;
}
.cmds > li > * {
  grid-column: 2;
  min-width: 0;
}
.cmds .code {
  margin-top: 8px;
}
.cmds .what {
  font-weight: 600;
  padding-top: 2px;
}
.cmds .what span {
  font-weight: 400;
  color: var(--muted);
}

/* Research */
.research .wrap {
  display: grid;
  gap: 18px;
}
@media (min-width: 880px) {
  .research .wrap {
    grid-template-columns: 1fr 1.35fr;
    gap: 48px;
  }
}
.research p {
  color: var(--muted);
  font-size: 1.06rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 48px;
  color: var(--muted);
  font-size: 0.92rem;
}
.site-footer .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}
.site-footer .brand {
  font-size: 1.15rem;
}
.site-footer .brand svg {
  width: 24px;
  height: 24px;
}
.site-footer a {
  color: var(--muted);
}
.site-footer a:hover {
  color: var(--text);
}
.site-footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-left: auto;
}
.footnote {
  margin-top: 28px;
  font-size: 0.86rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.footnote .word {
  font-family: "STIX Two Text", Georgia, serif;
  font-style: italic;
  font-size: 1.12em;
}
.footnote .pronunciation {
  font-family: "STIX Two Text", "Times New Roman", serif;
  font-size: 1.08em;
  margin: 0 0.2em;
}

/* Guide */
.page-head {
  padding: 56px 0 8px;
}
.page-head h1 {
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  margin-top: 6px;
}
.page-head > p:not(.eyebrow) {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 38em;
}
.guide {
  display: grid;
  gap: 32px;
  padding: 32px 0 80px;
}
@media (min-width: 960px) {
  .guide {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
  }
}
.toc {
  font-size: 0.92rem;
}
@media (min-width: 960px) {
  .toc {
    position: sticky;
    top: 84px;
    align-self: start;
  }
}
.toc h2 {
  font: 500 0.78rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.toc ol ol {
  padding-left: 12px;
  margin: 2px 0 6px;
  border-left: 1px solid var(--line);
}
.toc a {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
}
.toc a:hover {
  color: var(--text);
  background: var(--panel);
}
@media (max-width: 959px) {
  .toc {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
  }
}
.doc {
  min-width: 0;
  max-width: 760px;
}
.doc > section + section {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.doc h2 {
  margin-bottom: 14px;
}
.doc h3 {
  margin: 36px 0 10px;
}
.doc p:not(.what),
.doc ul,
.doc ol:not(.cmds) {
  color: var(--muted);
  margin: 12px 0 0;
}
.doc li + li {
  margin-top: 6px;
}
.doc strong {
  color: var(--text);
  font-weight: 600;
}
.doc .cmds {
  margin-top: 20px;
}
.doc .cmds p {
  margin-top: 6px;
}
.note {
  max-width: 46em;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--ring-outer) 55%, var(--line));
  background: color-mix(in srgb, var(--ring-outer) 10%, var(--panel));
  border-radius: 12px;
  color: var(--text);
  font-size: 0.96rem;
}
.note strong {
  font-weight: 600;
}
.note p {
  color: var(--text);
  margin: 0;
}
.table-scroll {
  overflow-x: auto;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}
th,
td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
tr:last-child td {
  border-bottom: 0;
}
th {
  font: 500 0.75rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--deep);
}
td {
  color: var(--muted);
}
td:first-child {
  color: var(--text);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Docs (docs.deriva.dev, rendered by tools/docs/build.mjs): the guide's layout, with
   longer pages, so sections get a rule and the current page is marked in the nav */
.toc a[aria-current="page"] {
  color: var(--text);
  background: var(--panel);
  font-weight: 600;
}
.toc-more {
  margin: 14px 0 0;
  padding: 0 8px;
  font-size: 0.88rem;
}
.docs-body h2 {
  margin: 48px 0 12px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.docs-body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.docs-body h4 {
  font: 600 1rem/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  margin: 24px 0 6px;
}
.docs-body blockquote {
  margin: 16px 0 0;
  padding: 2px 16px;
  border-left: 3px solid var(--ring-second);
}
.docs-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 36px 0;
}
.docs-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.docs-body li > p {
  margin: 0;
}
.docs-body .code,
.docs-body .table-scroll {
  margin-top: 16px;
}
.docs-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
}
/* On phones the docs nav lists the pages only; the page's own sections follow below */
@media (max-width: 959px) {
  .docs-toc ol ol {
    display: none;
  }
}

/* Studio section: two smaller views under the main Workspace shot */
.shot-pair {
  display: grid;
  gap: 28px;
  margin-top: 36px;
}
@media (min-width: 760px) {
  .shot-pair {
    grid-template-columns: 1fr 1fr;
  }
}
.shot-pair .shot {
  margin: 0;
}
.shot figcaption strong {
  color: var(--text);
  font-weight: 600;
}

/* Mermaid diagrams in the docs: tools/docs/build.mjs renders them to SVG at build time
   and strips Mermaid's own styles; these rules colour them with the Tide tokens, so the
   same SVG follows light and dark. Font and text placement are attributes on the SVG
   (as measured when rendered); set colours here, never sizes. */
.mermaid-diagram {
  margin: 16px 0 0;
  padding: 24px 16px;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-x: auto;
}
.mermaid-diagram svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.mermaid-diagram text {
  fill: var(--text);
}
.mermaid-diagram .node rect,
.mermaid-diagram .node polygon,
.mermaid-diagram .node circle,
.mermaid-diagram .node ellipse,
.mermaid-diagram .node path {
  fill: var(--panel);
  stroke: var(--ring-second);
  stroke-width: 1.5px;
}
.mermaid-diagram .node .label rect,
.mermaid-diagram .label-container + .label rect,
.mermaid-diagram .background {
  fill: none;
  stroke: none;
}
.mermaid-diagram .cluster rect {
  fill: var(--teal-panel);
  stroke: var(--line);
  stroke-width: 1px;
}
.mermaid-diagram .cluster-label text {
  fill: var(--muted);
}
.mermaid-diagram .flowchart-link,
.mermaid-diagram .edgePath path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5px;
}
.mermaid-diagram marker path,
.mermaid-diagram .arrowMarkerPath,
.mermaid-diagram .arrowheadPath {
  fill: var(--muted);
  stroke: none;
}
.mermaid-diagram .edgeLabel rect {
  fill: var(--deep);
}
.mermaid-diagram .node rect.label-container {
  rx: 6px;
  ry: 6px;
}
.mermaid-diagram .cluster rect {
  rx: 10px;
  ry: 10px;
}
/* One smaller shot alone takes the full width */
.shot-pair > :only-child {
  grid-column: 1 / -1;
}
/* Each studio shot links to its full-size image */
.shot .frame a img {
  cursor: zoom-in;
}