[data-ob-theme="pipeline-vault"] {
  --pv-storage: #fcd34d;
  --pv-payload: #f9a8d4;
  --pv-success: #6ee7b7;
}

@media (prefers-color-scheme: light) {
  [data-ob-theme="pipeline-vault"] {
    --pv-storage: #805000;
    --pv-payload: #98235e;
    --pv-success: #096044;
  }
}

[data-ob-theme="pipeline-vault"] body {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--ob-color-border) 18%, transparent) 1px, transparent 1px);
  background-size: 80px 100%;
}

[data-ob-theme="pipeline-vault"] .ob-section > .ob-cover { display: none; }
[data-ob-theme="pipeline-vault"] .ob-title { color: var(--ob-color-text); text-wrap: balance; }

.pv-hero { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 2rem; padding-block: 2rem; }
.pv-hero-copy { min-width: 0; }
.pv-route { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 1rem; color: var(--ob-color-accent-soft); font: 0.65rem / 1.8 var(--ob-font-mono); border-inline: 1px solid var(--ob-color-border); }
.pv-route span { padding: 0.5rem; background: var(--ob-color-page); border-block: 1px solid currentColor; }
.pv-route i { font: normal 1.5rem / 1 var(--ob-font-mono); }
[data-ob-theme="pipeline-vault"] .pv-title-slot .ob-title { font-family: var(--ob-font-mono); letter-spacing: -0.06em; font-size: clamp(2rem, 4.5vw, 3.6rem); }
.pv-lede { max-width: 60ch; color: var(--ob-color-muted); font-size: 1.1rem; }
.pv-kicker,
.pv-article-label,
.pv-panel-title { font: 0.75rem / 1.8 var(--ob-font-mono); }
.pv-kicker,
.pv-article-label { color: var(--ob-color-accent-soft); }
.pv-kicker { letter-spacing: 0.08em; }
.pv-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 1.5rem; font: 0.8rem / 1.8 var(--ob-font-mono); }
.pv-hero-actions a:first-child { padding: 0.65rem 1rem; border: 1px solid var(--ob-color-accent-border); border-radius: 6px; }

.pv-console,
.pv-panel { overflow: hidden; border: 1px solid var(--ob-color-border); border-radius: 0; background: var(--ob-color-surface); }
.pv-console { box-shadow: 6px 6px 0 var(--ob-color-border); }
.pv-console-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--ob-color-border); background: var(--ob-color-page); font: 0.7rem / 1.8 var(--ob-font-mono); color: var(--ob-color-muted); }
.pv-console-tabs span { padding: 0.6rem 1rem; border-right: 1px solid var(--ob-color-border); }
.pv-console-tabs span:first-child { border-bottom: 2px solid var(--ob-color-accent-soft); color: var(--ob-color-accent-soft); }
.pv-panel-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--ob-color-border); color: var(--ob-color-muted); }
.pv-status { color: var(--pv-success); font-weight: 500; }
.pv-lab-intro { padding: 1.5rem 1.5rem 0; }
[data-ob-theme="pipeline-vault"] .ob-prose .pv-lab h2 { margin: 0 0 1rem; border: 0; padding: 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.15; }
.pv-lab-intro p { max-width: 65ch; color: var(--ob-color-muted); }

.pv-lab .pv-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 1.75rem 1.5rem; padding: 0; }
.pv-stages li { position: relative; min-width: 0; padding: 1rem; border: 1px solid var(--ob-color-border); border-radius: 0; background: var(--ob-color-page); }
.pv-stages li:not(:last-child)::after { content: "\2192"; position: absolute; right: -1.3rem; top: 40%; color: var(--ob-color-accent-soft); }
.pv-stages :is(span, strong, small) { display: block; }
.pv-stages span { font: 0.65rem / 1.8 var(--ob-font-mono); color: var(--ob-color-subtle); }
.pv-stages strong { margin-block: 0.5rem; font: 600 clamp(0.8rem, 1.7vw, 1.1rem) / 1.6 var(--ob-font-mono); overflow-wrap: anywhere; color: var(--ob-color-accent-soft); }
.pv-stages li:nth-child(2) strong { color: var(--pv-payload); }
.pv-stages li:nth-child(3) strong { color: var(--pv-storage); }
.pv-stages small { color: var(--ob-color-muted); font-size: 0.75rem; }
.pv-stages [data-state="done"] { border-color: var(--pv-success); }
.pv-stages [data-state="active"] { border-color: var(--ob-color-accent-soft); box-shadow: inset 0 0 0 1px var(--ob-color-accent-soft); }
.pv-stages [data-state="error"] { border-style: dashed; border-color: var(--pv-payload); }
.pv-lab-controls { padding-inline: 1.5rem; }
.pv-lab-controls[hidden] { display: none; }
.pv-request-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--ob-color-border); border-radius: 6px; background: var(--ob-color-surface-raised); font: 0.8rem / 1.8 var(--ob-font-mono); }
.pv-request-line > span { color: var(--pv-success); }
.pv-request-line code { overflow-wrap: anywhere; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.pv-actions button { padding: 0.65rem 0.85rem; border: 1px solid var(--ob-color-accent-border); border-radius: 6px; color: var(--ob-color-accent-soft); background: var(--ob-color-surface-raised); font: 0.75rem / 1.8 var(--ob-font-mono); cursor: pointer; }
.pv-actions [data-pv-fetch] { background: var(--ob-color-accent); color: var(--ob-color-accent-contrast); }
.pv-actions :is([data-pv-save], [data-pv-load], [data-pv-clear]) { border-color: var(--pv-storage); color: var(--pv-storage); }
.pv-actions button:disabled { background: var(--ob-color-surface-raised); color: var(--ob-color-subtle); border-color: var(--ob-color-border); cursor: default; }
.pv-lab button:focus-visible,
.pv-hero-actions a:focus-visible,
.pv-roadmap a:focus-visible { outline: 2px solid var(--ob-color-accent-soft); outline-offset: 4px; }
.pv-feedback { min-height: 3em; color: var(--ob-color-muted); font-size: 0.85rem; }
.pv-inspector { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; margin: 1.5rem; }
.pv-inspector > * { min-width: 0; box-shadow: none; border-radius: 0; }
.pv-storage-panel { border-style: double; border-width: 4px; }
.pv-caption { padding: 0 1.25rem 1rem; margin-block: 0; color: var(--ob-color-subtle); font-size: 0.8rem; }
.pv-panel dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem 1rem; padding: 1.25rem; margin: 0; font: 0.75rem / 1.8 var(--ob-font-mono); }
.pv-panel dt { color: var(--pv-storage); }
.pv-panel dd { margin: 0; overflow-wrap: anywhere; }
.pv-panel .pv-metrics { border-bottom: 1px solid var(--ob-color-border); }
.pv-panel .pv-metrics dt { color: var(--ob-color-accent-soft); }
[data-ob-theme="pipeline-vault"] .pv-payload { margin: 0; padding: 1.25rem; min-height: 12rem; border: 0; border-radius: 0; background: #0b0f19; color: #f9a8d4; white-space: pre-wrap; overflow-wrap: anywhere; font: 0.75rem / 1.8 var(--ob-font-mono); }
.pv-roadmap { margin-block: 3rem; }
.pv-roadmap ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--ob-color-accent); list-style: none; }
.pv-roadmap li { position: relative; }
.pv-roadmap li::before { content: ""; position: absolute; left: -1.85rem; top: 2rem; width: 0.6rem; height: 0.6rem; background: var(--ob-color-accent-soft); }
.pv-roadmap a { display: grid; grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.5rem; align-items: center; box-sizing: border-box; padding: 1rem; border-bottom: 1px solid var(--ob-color-border); color: var(--ob-color-text); text-decoration: none; }
.pv-roadmap a:hover { background: var(--ob-color-surface-raised); }
.pv-roadmap span { display: block; font: 0.65rem / 1.8 var(--ob-font-mono); color: var(--ob-color-subtle); }
.pv-roadmap strong { display: block; margin-block: 0.75rem; font-size: 1.1rem; }
.pv-roadmap p { color: var(--ob-color-muted); font-size: 0.85rem; }

.pv-article-label { display: inline-block; margin-block: 0 0.75rem; padding: 0.2rem 0.65rem; border: 1px solid var(--ob-color-accent-border); border-radius: 6px; background: var(--ob-color-surface); }
[data-ob-theme="pipeline-vault"] .ob-series-parts-full { display: grid; gap: 1rem; }
[data-ob-theme="pipeline-vault"] .ob-part { padding: 1.25rem; border: 1px solid var(--ob-color-border); border-left: 3px solid var(--ob-color-accent); border-radius: 0; background: var(--ob-color-surface); }
[data-ob-theme="pipeline-vault"] .ob-series-parts-full > li:nth-child(2) .ob-part { border-left-color: #f59e0b; }
[data-ob-theme="pipeline-vault"] .ob-series-parts-full > li:nth-child(3) .ob-part { border-left-color: #ec4899; }
[data-ob-theme="pipeline-vault"] .ob-part:is(:hover, :focus-visible) { background: var(--ob-color-surface-raised); }
[data-ob-theme="pipeline-vault"] .ob-part-number { color: var(--ob-color-accent-soft); font-family: var(--ob-font-mono); }
[data-ob-theme="pipeline-vault"] .ob-post-header { padding-block: 1.5rem; border-bottom: 1px solid var(--ob-color-border); }
[data-ob-theme="pipeline-vault"] .ob-prose pre {
  --ob-color-text: #edf5ff;
  --ob-color-muted: #becbdd;
  --ob-color-subtle: #a5b6cd;
  --ob-color-surface: #161f30;
  --ob-color-border: #3b506b;
  --ob-color-accent-soft: #67e8f9;
}
[data-ob-theme="pipeline-vault"] .ob-line::before { opacity: 1; }
[data-ob-theme="pipeline-vault"] .ob-code-title { background: #161f30; color: #becbdd; }
[data-ob-theme="pipeline-vault"] .ob-prose :not(pre) > code { background: var(--ob-color-surface-raised); color: var(--ob-color-accent-soft); }
[data-ob-theme="pipeline-vault"] .ob-prose h2 { border-top: 1px solid var(--ob-color-border); padding-top: 1rem; }

@media (max-width: 900px) {
  .pv-inspector,
  .pv-roadmap a { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}
@media (max-width: 540px) {
  .pv-lab .pv-stages { grid-template-columns: minmax(0, 1fr); }
  .pv-stages li:not(:last-child)::after { content: "\2193"; right: 50%; top: auto; bottom: -1.5rem; }
  [data-ob-theme="pipeline-vault"] .ob-part { padding: 1rem; gap: 0.75rem; }
  .pv-inspector { margin: 1rem; }
  .pv-lab-intro { padding-inline: 1rem; }
  .pv-lab-controls { padding-inline: 1rem; }
  .pv-hero { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .pv-route { flex-direction: row; flex-wrap: wrap; border: 0; justify-content: start; }
  .pv-route i { transform: rotate(-90deg); }
  .pv-console { box-shadow: 3px 3px 0 var(--ob-color-border); }
}
@media print {
  [data-ob-theme="pipeline-vault"] body { background-image: none; }
  .pv-lab-controls { display: none; }
}