/* ==========================================================================
   WeCaseStudy Decision Lab v1.0.0 — styles
   Mirrors Caseline "Obsidian Editorial" tokens. Inside Caseline every token
   resolves to the theme's own variable (light/dark follow the theme); in
   Ariana's neutral shell the fallbacks reproduce the same look.
   Prefix: dlab- (never "dl"). Also styles the neutral .sk-* family.
   ========================================================================== */

/* Fonts are only downloaded when the theme does not supply its own. */
@font-face { font-family: "DLab Display"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "DLab Text"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

.dlab {
  --d-bg: var(--bg, #06070c);
  --d-bg-2: var(--bg-2, #0a0c15);
  --d-surface: var(--surface, rgba(255, 255, 255, .045));
  --d-surface-2: var(--surface-2, rgba(255, 255, 255, .075));
  --d-edge: var(--edge, rgba(255, 255, 255, .12));
  --d-edge-2: var(--edge-2, rgba(255, 255, 255, .2));
  --d-tx: var(--tx, #eef1f8);
  --d-tx-2: var(--tx-2, #bcc4d6);
  --d-tx-3: var(--tx-3, #8b93a5);
  --d-accent: var(--accent, #6366f1);
  --d-violet: var(--violet, #a855f7);
  --d-cyan: var(--cyan, #22d3ee);
  --d-link: #a5b4fc;
  --d-btn: #4f46e5;
  --d-btn-tx: #ffffff;
  --d-ok: #34d399;
  --d-ok-bg: rgba(52, 211, 153, .12);
  --d-warn: #fbbf24;
  --d-warn-bg: rgba(251, 191, 36, .12);
  --d-bad: #f87171;
  --d-bad-bg: rgba(248, 113, 113, .12);
  --d-unk: #cbd5e1;
  --d-unk-bg: rgba(148, 163, 184, .14);
  --d-key: rgba(99, 102, 241, .16);
  --d-shadow: var(--shadow-sm, 0 10px 30px rgba(0, 0, 0, .4));
  --d-r: var(--r, 18px);
  --d-r-sm: var(--r-sm, 12px);
  --d-font-display: var(--font-display, "DLab Display", "Bricolage Grotesque", Arial, sans-serif);
  --d-font: var(--font-sans, "DLab Text", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif);
  --d-gap: clamp(.875rem, 1.3vw, 1.25rem);
  --d-ease: cubic-bezier(.22, .8, .3, 1);
  color-scheme: dark;
}
.dlab[data-mode="light"] {
  --d-bg: var(--bg, #f6f7fb);
  --d-bg-2: var(--bg-2, #eceef6);
  --d-surface: var(--surface, #ffffff);
  --d-surface-2: var(--surface-2, #ffffff);
  --d-edge: var(--edge, #e2e6f0);
  --d-edge-2: var(--edge-2, #ccd2e2);
  --d-tx: var(--tx, #0c1020);
  --d-tx-2: var(--tx-2, #464f68);
  --d-tx-3: var(--tx-3, #5c6478);
  --d-accent: var(--accent, #4f46e5);
  --d-link: #4338ca;
  --d-btn: #4338ca;
  --d-ok: #047857;
  --d-ok-bg: #ecfdf5;
  --d-warn: #92400e;
  --d-warn-bg: #fffbeb;
  --d-bad: #b91c1c;
  --d-bad-bg: #fef2f2;
  --d-unk: #475569;
  --d-unk-bg: #f1f5f9;
  --d-key: #eef2ff;
  --d-shadow: var(--shadow-sm, 0 6px 20px rgba(14, 20, 40, .09));
  color-scheme: light;
}
/* Before the script runs: follow the theme or the OS. */
html[data-theme="light"] .dlab:not([data-mode]) { color-scheme: light; }
@media (prefers-color-scheme: light) {
  .dlab:not([data-mode]):not(.dlab--hosted) {
    --d-bg: #f6f7fb; --d-bg-2: #eceef6; --d-surface: #fff; --d-surface-2: #fff; --d-edge: #e2e6f0; --d-edge-2: #ccd2e2;
    --d-tx: #0c1020; --d-tx-2: #464f68; --d-tx-3: #5c6478; --d-link: #4338ca; --d-btn: #4338ca;
    --d-ok: #047857; --d-ok-bg: #ecfdf5; --d-warn: #92400e; --d-warn-bg: #fffbeb; --d-bad: #b91c1c; --d-bad-bg: #fef2f2; --d-unk: #475569; --d-unk-bg: #f1f5f9; --d-key: #eef2ff;
  }
}

/* ---------------------------------------------------------------- base */
.dlab {
  box-sizing: border-box;
  max-width: var(--wrap, 84rem);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--gut, clamp(1rem, 3.5vw, 2.5rem));
  background: var(--d-bg);
  color: var(--d-tx);
  font-family: var(--d-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.dlab:not(.dlab--hosted) { border-radius: var(--d-r); }
.dlab *, .dlab *::before, .dlab *::after { box-sizing: border-box; }
.dlab h2, .dlab h3, .dlab h4 { font-family: var(--d-font-display); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .6em; color: var(--d-tx); }
.dlab h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 700; }
.dlab h3 { font-size: 1.125rem; font-weight: 650; }
.dlab h4 { font-size: 1rem; font-weight: 650; }
.dlab p { margin: 0 0 .9em; }
.dlab ul, .dlab ol { margin: 0 0 1em; padding-inline-start: 1.25em; }
.dlab li { margin-block: .2em; }
.dlab a { color: var(--d-link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.dlab a:hover { text-decoration-thickness: 2px; }
.dlab :focus-visible { outline: 3px solid var(--d-link); outline-offset: 2px; border-radius: 6px; }
.dlab [hidden] { display: none !important; }
.dlab small, .dlab .dlab-muted { color: var(--d-tx-3); }
.dlab code { font-size: .875em; background: var(--d-surface-2); padding: .1em .35em; border-radius: 6px; }
.dlab-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dlab-section { margin-block: clamp(2rem, 4vw, 3.25rem); scroll-margin-top: 5rem; }
.dlab-section > header { margin-bottom: 1.1rem; }
.dlab-section > header p { color: var(--d-tx-2); max-width: 46rem; }
.dlab-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--d-tx-3); margin: 0 0 .5rem; }
.dlab-lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--d-tx-2); max-width: 48rem; }
.dlab-crumbs { font-size: .875rem; color: var(--d-tx-3); margin-bottom: 1rem; }
.dlab-crumbs a { color: var(--d-tx-2); }
.dlab-prose { max-width: 46rem; color: var(--d-tx-2); }
.dlab-prose strong { color: var(--d-tx); }
.dlab-prose h2, .dlab-prose h3 { margin-top: 1.4em; }

/* ------------------------------------------------------------ buttons */
.dlab .dlab-btn, .dlab .sk-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .55rem 1rem; border-radius: 999px;
  font: 600 .9375rem/1.2 var(--d-font); cursor: pointer; text-decoration: none;
  background: var(--d-btn); color: var(--d-btn-tx); border: 1px solid transparent;
  transition: background-color .18s var(--d-ease), box-shadow .18s var(--d-ease), border-color .18s;
}
.dlab .dlab-btn:hover, .dlab .sk-button:hover { background: color-mix(in srgb, var(--d-btn) 86%, #000); }
.dlab .dlab-btn--ghost { background: transparent; color: var(--d-tx); border-color: var(--d-edge-2); }
.dlab .dlab-btn--ghost:hover { background: var(--d-surface-2); border-color: var(--d-tx-3); }
.dlab .dlab-btn--small { min-height: 36px; padding: .35rem .8rem; font-size: .875rem; }
.dlab .dlab-btn--danger { background: transparent; color: var(--d-bad); border-color: currentColor; }
.dlab .dlab-btn[disabled], .dlab .dlab-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.dlab .dlab-btn svg, .dlab-icon { width: 1.1em; height: 1.1em; flex: none; }
.dlab-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dlab .dlab-linkbtn { background: none; border: 0; padding: .25rem 0; color: var(--d-link); font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; min-height: 32px; }

/* -------------------------------------------------------------- badges */
.dlab-badge {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 650; line-height: 1.4; border: 1px solid var(--d-edge-2);
  color: var(--d-tx-2); background: var(--d-surface); max-width: 100%;
}
.dlab-badge svg { flex: none; }
.dlab-badge svg { width: .95em; height: .95em; }
.dlab-badge--ok { color: var(--d-ok); background: var(--d-ok-bg); border-color: color-mix(in srgb, var(--d-ok) 40%, transparent); }
.dlab-badge--warn { color: var(--d-warn); background: var(--d-warn-bg); border-color: color-mix(in srgb, var(--d-warn) 40%, transparent); }
.dlab-badge--bad { color: var(--d-bad); background: var(--d-bad-bg); border-color: color-mix(in srgb, var(--d-bad) 40%, transparent); }
.dlab-badge--unk { color: var(--d-unk); background: var(--d-unk-bg); }
.dlab-badge--documented { color: var(--d-ok); }
.dlab-badge--adaptation { color: var(--d-link); }
.dlab-badge--custom { color: var(--d-warn); }
.dlab-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }

/* --------------------------------------------------------------- cards */
.dlab .dlab-card, .dlab .sk-card {
  background: var(--d-surface); border: 1px solid var(--d-edge); border-radius: var(--d-r);
  padding: clamp(1rem, 2vw, 1.4rem); box-shadow: none;
}
.dlab-card h3 { margin-bottom: .35rem; }
.dlab-grid { display: grid; gap: var(--d-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.dlab-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.dlab-takeaway { border-inline-start: 4px solid var(--d-accent); background: var(--d-surface); border-radius: var(--d-r-sm); padding: 1rem 1.2rem; max-width: 50rem; margin-block: 1.25rem; }
.dlab-takeaway h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--d-tx-3); margin-bottom: .4rem; }
.dlab-takeaway p { margin: 0; color: var(--d-tx); }

/* path cards */
.dlab-path { display: flex; flex-direction: column; gap: .6rem; position: relative; }
.dlab-path.is-selected { border-color: var(--d-accent); box-shadow: 0 0 0 1px var(--d-accent); }
.dlab-path__kind { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d-tx-3); }
.dlab-path__summary { color: var(--d-tx-2); font-size: .9375rem; margin: 0; }
.dlab-path__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .4rem; }
.dlab-metrics { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; margin: .2rem 0; font-size: .9rem; }
.dlab-metrics dt { color: var(--d-tx-3); }
.dlab-metrics dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--d-tx); }
.dlab-metrics .is-unknown { color: var(--d-unk); font-weight: 500; }
.dlab-note { font-size: .875rem; color: var(--d-tx-3); }

/* ------------------------------------------------------------- notices */
.dlab .dlab-notice, .dlab .sk-notice { border: 1px solid var(--d-edge-2); border-inline-start: 4px solid var(--d-link); background: var(--d-surface); border-radius: var(--d-r-sm); padding: .8rem 1rem; margin-block: .8rem; color: var(--d-tx-2); }
.dlab .dlab-notice--warn { border-inline-start-color: var(--d-warn); }
.dlab .dlab-notice--bad, .dlab .sk-error { border: 1px solid var(--d-bad); border-inline-start-width: 4px; background: var(--d-bad-bg); color: var(--d-tx); border-radius: var(--d-r-sm); padding: .8rem 1rem; }
.dlab-notice strong { color: var(--d-tx); }

/* -------------------------------------------------------------- tables */
.dlab-tablewrap { overflow-x: auto; border: 1px solid var(--d-edge); border-radius: var(--d-r-sm); background: var(--d-surface); }
.dlab .dlab-table, .dlab .sk-table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.dlab-table caption { text-align: start; padding: .7rem .9rem; font-weight: 600; color: var(--d-tx-2); caption-side: top; }
.dlab-table th, .dlab-table td { padding: .55rem .9rem; border-bottom: 1px solid var(--d-edge); text-align: start; vertical-align: top; }
.dlab-table thead th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--d-tx-3); font-weight: 700; background: var(--d-bg-2); }
.dlab-table tbody th { font-weight: 600; color: var(--d-tx); }
.dlab-table td.num, .dlab-table th.num { text-align: end; white-space: nowrap; }
.dlab-table tr:last-child td, .dlab-table tr:last-child th { border-bottom: 0; }
.dlab-table .is-key th, .dlab-table .is-key td { background: var(--d-key); }
.dlab-table .is-key th::before { content: ""; display: inline-block; width: 4px; height: 1em; background: var(--d-accent); margin-inline-end: .5rem; vertical-align: -.1em; border-radius: 2px; }
/* stacked on phones: every cell carries its column label */
@media (max-width: 40rem) {
  .dlab-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dlab-table--stack, .dlab-table--stack tbody, .dlab-table--stack tr, .dlab-table--stack th, .dlab-table--stack td { display: block; width: 100%; }
  .dlab-table--stack tr { border-bottom: 1px solid var(--d-edge-2); padding: .4rem 0; }
  .dlab-table--stack td, .dlab-table--stack tbody th { border: 0; padding: .25rem .9rem; display: flex; justify-content: space-between; gap: 1rem; text-align: end; }
  .dlab-table--stack td::before { content: attr(data-label); color: var(--d-tx-3); font-weight: 500; text-align: start; }
  .dlab-table--stack tbody th { font-size: .95rem; display: block; text-align: start; }
  .dlab-table--stack caption { display: block; width: 100%; }
  .dlab-table--stack td:empty { display: none; }
  .dlab-table--stack td:has(ul), .dlab-table--stack td:has(.dlab-field), .dlab-table--stack td:has(.dlab-chiplist) { display: block; text-align: start; }
  .dlab-table--stack td:has(ul)::before, .dlab-table--stack td:has(.dlab-field)::before { display: block; margin-bottom: .2rem; }
  .dlab-table--stack tr.dlab-group th { padding-top: .6rem; }
  .dlab-table--stack td.dlab-td-block { display: block; text-align: start; }
  .dlab-table--stack td.dlab-td-block::before { display: block; margin-bottom: .2rem; }
  .dlab-table--stack td > * { min-width: 0; overflow-wrap: anywhere; }
  .dlab-tablewrap { overflow-x: visible; }
}

/* ------------------------------------------------------------- forms */
.dlab label, .dlab legend { font-weight: 600; font-size: .9rem; color: var(--d-tx); }
.dlab .dlab-field, .dlab .sk-field { display: grid; gap: .3rem; }
.dlab input[type="text"], .dlab input[type="number"], .dlab input[type="date"], .dlab input[type="search"], .dlab select, .dlab textarea {
  width: 100%; min-height: 44px; padding: .5rem .7rem; border-radius: 10px;
  border: 1px solid var(--d-edge-2); background: var(--d-bg-2); color: var(--d-tx); font: 500 .95rem/1.3 var(--d-font);
}
.dlab textarea { min-height: 5rem; resize: vertical; }
.dlab input[type="number"] { font-variant-numeric: tabular-nums; }
.dlab input[aria-invalid="true"], .dlab select[aria-invalid="true"] { border-color: var(--d-bad); box-shadow: 0 0 0 1px var(--d-bad); }
.dlab input:disabled { opacity: .55; }
.dlab .dlab-help { font-size: .8125rem; color: var(--d-tx-3); font-weight: 400; }
.dlab .dlab-err { font-size: .8125rem; color: var(--d-bad); font-weight: 600; }
.dlab fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.dlab-check { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 500; cursor: pointer; }
.dlab-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--d-btn); }
/* segmented control from radio buttons */
.dlab-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--d-edge-2); border-radius: 999px; padding: 3px; gap: 2px; background: var(--d-bg-2); }
.dlab-seg label { position: relative; display: inline-flex; }
.dlab-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dlab-seg span { display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .85rem; border-radius: 999px; font-weight: 600; font-size: .875rem; color: var(--d-tx-2); }
.dlab-seg input:checked + span { background: var(--d-btn); color: var(--d-btn-tx); }
.dlab-seg input:focus-visible + span { outline: 3px solid var(--d-link); outline-offset: 1px; }
.dlab-question { display: grid; gap: .45rem; padding: .8rem 0; border-bottom: 1px solid var(--d-edge); }
.dlab-question:last-child { border-bottom: 0; }
@media (min-width: 48rem) { .dlab-question { grid-template-columns: 1fr auto; align-items: center; } }

/* ------------------------------------------------------------ toolbar */
.dlab-toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; padding: .75rem 1rem; border: 1px solid var(--d-edge); border-radius: var(--d-r); background: var(--d-surface); margin-bottom: 1rem; }
.dlab-toolbar__group { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dlab-toolbar select { width: auto; min-width: 7rem; }
.dlab-status { font-size: .875rem; color: var(--d-tx-3); }
.dlab-status.is-unsaved { color: var(--d-warn); font-weight: 600; }

/* --------------------------------------------------------------- tabs */
.dlab-tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--d-edge-2); margin-bottom: 1.1rem; overscroll-behavior-x: contain; }
.dlab-tabs [role="tab"] { flex: none; min-height: 44px; padding: .55rem .9rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--d-tx-2); font: 600 .9rem/1.2 var(--d-font); cursor: pointer; white-space: nowrap; }
.dlab-tabs [role="tab"][aria-selected="true"] { color: var(--d-tx); border-bottom-color: var(--d-accent); }
.dlab-tabs [role="tab"]:hover { color: var(--d-tx); }
.dlab-panel:focus-visible { outline-offset: 6px; }

/* ----------------------------------------------------- diff and bars */
.dlab-diff-head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; justify-content: space-between; margin-bottom: .8rem; }
.dlab-diff-head .dlab-field { min-width: min(100%, 18rem); }
.dlab-delta { font-weight: 700; white-space: nowrap; }
.dlab-delta--up::before { content: "▲ "; font-size: .7em; }
.dlab-delta--down::before { content: "▼ "; font-size: .7em; }
.dlab-chiplist { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.dlab-chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 30px; padding: .15rem .6rem; border-radius: 999px; border: 1px dashed var(--d-edge-2); background: transparent; color: var(--d-tx-2); font: 500 .8rem/1.2 var(--d-font); cursor: pointer; }
.dlab-chip:hover { border-style: solid; color: var(--d-tx); }
.dlab-chip[aria-expanded="true"] { border-style: solid; border-color: var(--d-accent); color: var(--d-tx); }
.dlab-inline-edit { margin: .5rem 0 .25rem; padding: .75rem; border: 1px solid var(--d-edge-2); border-radius: var(--d-r-sm); background: var(--d-bg-2); }
.dlab-added { color: var(--d-ok); }
.dlab-removed { color: var(--d-bad); }
.dlab-added::before { content: "+ "; font-weight: 700; }
li.dlab-added, li.dlab-removed { list-style: none; margin-inline-start: -1.1em; }
.dlab-removed::before { content: "− "; font-weight: 700; }
.dlab-bar { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr auto; gap: .6rem; align-items: center; font-size: .875rem; margin: .3rem 0; }
.dlab-bar__track { height: .7rem; background: var(--d-surface-2); border-radius: 999px; overflow: hidden; }
.dlab-bar__fill { height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--d-accent), var(--d-violet)); border-radius: inherit; }
.dlab-bar__fill.is-over { background: repeating-linear-gradient(45deg, var(--d-bad), var(--d-bad) 6px, color-mix(in srgb, var(--d-bad) 70%, #000) 6px, color-mix(in srgb, var(--d-bad) 70%, #000) 12px); }
.dlab-bar__val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* timeline */
.dlab-timeline { display: grid; gap: .3rem; }
.dlab-tl-row { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr; gap: .6rem; align-items: center; font-size: .85rem; }
.dlab-tl-track { position: relative; height: 1.5rem; background: var(--d-surface); border-radius: 6px; }
.dlab-tl-span { position: absolute; top: .2rem; bottom: .2rem; left: var(--s, 0%); width: var(--len, 2%); min-width: 6px; border-radius: 4px; background: var(--d-accent); }
.dlab-tl-span.is-recurring { background: repeating-linear-gradient(90deg, var(--d-cyan), var(--d-cyan) 8px, transparent 8px, transparent 12px); opacity: .85; }
.dlab-tl-span.is-late { background: var(--d-bad); }
.dlab-tl-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--d-tx-3); }
@media (max-width: 40rem) { .dlab-tl-row { grid-template-columns: 1fr; gap: .15rem; } }

/* steps */
.dlab-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; counter-reset: dlab-step; }
.dlab-steps > li { counter-increment: dlab-step; display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--d-edge); border-radius: var(--d-r-sm); background: var(--d-surface); }
.dlab-steps > li::before { content: counter(dlab-step); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--d-surface-2); font-weight: 700; font-size: .8rem; color: var(--d-tx-2); }
.dlab-steps h3, .dlab-steps h4 { margin: 0 0 .15rem; font-size: .95rem; }
.dlab-steps p { margin: 0; font-size: .85rem; color: var(--d-tx-3); }
.dlab-steps .is-origin { font-size: .75rem; }

/* details */
.dlab details { border: 1px solid var(--d-edge); border-radius: var(--d-r-sm); background: var(--d-surface); margin-block: .5rem; }
.dlab summary { cursor: pointer; padding: .75rem 1rem; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: .5rem; }
.dlab details > :not(summary) { padding-inline: 1rem; }
.dlab details[open] > summary { border-bottom: 1px solid var(--d-edge); margin-bottom: .75rem; }
.dlab details > :last-child { padding-bottom: 1rem; }

/* ledger */
.dlab-ledger td input[type="number"] { min-width: 6.5rem; }
.dlab-ledger .dlab-check { min-height: 36px; }
.dlab-ledger tr.is-changed th { color: var(--d-link); }
.dlab-ledger tr.is-changed th::after { content: " · changed"; font-size: .75rem; font-weight: 500; color: var(--d-tx-3); }

/* artifacts preview */
.dlab-artifact { white-space: pre-wrap; font: 400 .85rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--d-bg-2); border: 1px solid var(--d-edge); border-radius: var(--d-r-sm); padding: 1rem; max-height: 26rem; overflow: auto; color: var(--d-tx-2); }

/* hub */
.dlab-hub-hero { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 64rem) { .dlab-hub-hero { grid-template-columns: 1.1fr 1fr; } }
.dlab-modes { display: grid; gap: var(--d-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.dlab-mode { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: inherit; }
.dlab-mode:hover { border-color: var(--d-edge-2); }
.dlab-mode h3 { color: var(--d-tx); }
.dlab-mode p { color: var(--d-tx-2); margin: 0; font-size: .925rem; }
.dlab-picker { display: grid; gap: .5rem; }
.dlab-picker a { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--d-edge); border-radius: var(--d-r-sm); background: var(--d-surface); text-decoration: none; color: var(--d-tx); min-height: 44px; }
.dlab-picker a:hover { border-color: var(--d-accent); }
.dlab-picker strong { font-weight: 650; }
.dlab-picker small { grid-column: 1; color: var(--d-tx-3); }
.dlab-example .dlab-field { max-width: 20rem; }

/* compact theme card (token) */
.dlab-card-token { font-family: var(--d-font); border: 1px solid var(--d-edge, #e2e6f0); border-radius: var(--d-r-sm, 12px); padding: 1rem 1.1rem; background: var(--d-surface, transparent); }
.dlab-card-token h3 { margin: 0 0 .4rem; font-size: 1rem; }
.dlab-card-token ul { margin: .4rem 0; padding-inline-start: 1.1em; }
.dlab-card-token p { margin: .3rem 0; font-size: .9rem; }

/* print — the browser's "Save as PDF" */
.dlab-print { display: none; }
@media print {
  body.dlab-printing * { visibility: hidden !important; }
  body.dlab-printing .dlab-print, body.dlab-printing .dlab-print * { visibility: visible !important; }
  body.dlab-printing .dlab-print { display: block; position: absolute; inset: 0 auto auto 0; width: 100%; color: #000; background: #fff; font: 11pt/1.45 Georgia, "Times New Roman", serif; padding: 0; }
  .dlab-print h1, .dlab-print h2, .dlab-print h3 { font-family: Arial, sans-serif; color: #000; break-after: avoid; }
  .dlab-print table { width: 100%; border-collapse: collapse; font-size: 9.5pt; break-inside: auto; }
  .dlab-print th, .dlab-print td { border: 1px solid #999; padding: 3px 5px; text-align: left; vertical-align: top; }
  .dlab-print tr { break-inside: avoid; }
  .dlab-print pre { white-space: pre-wrap; font: 9pt/1.4 Menlo, monospace; border: 1px solid #ccc; padding: 6px; }
  .dlab-print a { color: #000; }
  .dlab-print a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}

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

/* ==========================================================================
   v1.1 — stage pages: full-bleed hero and bands in Caseline's own language
   (obsidian, aurora fields, light streak, glass, gradient type, Bricolage).
   Motion: transform/opacity only, paused off-screen, in background tabs, while
   the pointer or focus is on the field, and for prefers-reduced-motion.
   ========================================================================== */
.dlab.dlab--stage { max-width: none; padding: 0; background: transparent; border-radius: 0; }
.dlab--stage > .dlab-notices { max-width: var(--wrap, 84rem); margin-inline: auto; padding-inline: var(--gut, 1rem); }
.dlab-wrap { max-width: var(--wrap, 84rem); margin-inline: auto; padding-inline: var(--gut, clamp(1rem, 3.5vw, 2.5rem)); }
.dlab-band { padding-block: clamp(3.5rem, 6.5vw, 6.5rem); background: var(--d-bg); }
.dlab-band--alt { background: var(--d-bg-2); }
.dlab-band + .dlab-band { border-top: 1px solid var(--d-edge); }
.dlab-sechead { max-width: 54rem; margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }
.dlab-sechead h2, .dlab-split h2 { font-size: clamp(1.9rem, 3.4vw, 4rem); line-height: 1.04; letter-spacing: -.032em; font-weight: 740; text-wrap: balance; margin-bottom: .8rem; }
.dlab-sechead p { color: var(--d-tx-2); font-size: clamp(1rem, 1.2vw, 1.15rem); max-width: 60ch; margin: 0; }
.dlab-kicker { display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1rem; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--d-tx-3); }
.dlab-kicker span { display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.55rem; padding: 0 .5rem; border-radius: 999px; color: #fff; letter-spacing: .04em; background: linear-gradient(98deg, #4f46e5, #7c3aed 55%, #0e7490); }

/* ---- hero (always dark, like Caseline's .hero.on-dark) */
.dlab-hero {
  position: relative; overflow: hidden; isolation: isolate; color: #eef1f8; background: #06070c; color-scheme: dark;
  --d-tx: #eef1f8; --d-tx-2: #c3cad9; --d-tx-3: #959db0; --d-edge: rgba(255, 255, 255, .12); --d-edge-2: rgba(255, 255, 255, .24);
  --d-surface: rgba(255, 255, 255, .05); --d-surface-2: rgba(255, 255, 255, .09); --d-link: #a5b4fc; --d-bg-2: #0a0c15;
  --d-ok: #34d399; --d-ok-bg: rgba(52, 211, 153, .12); --d-warn: #fbbf24; --d-warn-bg: rgba(251, 191, 36, .12); --d-bad: #f87171; --d-bad-bg: rgba(248, 113, 113, .12); --d-unk: #cbd5e1; --d-unk-bg: rgba(148, 163, 184, .14);
}
.dlab-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(48% 70% at 88% 12%, rgba(74, 92, 255, .95), transparent 62%),
    radial-gradient(46% 66% at 4% 96%, rgba(150, 84, 255, .62), transparent 62%),
    radial-gradient(34% 48% at 74% 96%, rgba(46, 211, 238, .34), transparent 66%),
    radial-gradient(30% 40% at 28% 8%, rgba(37, 99, 235, .32), transparent 68%);
}
.dlab-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 7, 12, .5), rgba(6, 7, 12, .2) 40%, rgba(6, 7, 12, .92) 97%); }
.dlab-hero__streak { position: absolute; inset: -40%; opacity: .26;
  background-image: linear-gradient(118deg, transparent calc(50% - 2px), rgba(255, 255, 255, .22) calc(50% - 1px), rgba(255, 255, 255, .72) 50%, rgba(255, 255, 255, .22) calc(50% + 1px), transparent calc(50% + 2px));
  animation: dlab-streak 18s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.dlab-hero__grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 62% at 72% 40%, #000 25%, transparent 78%); mask-image: radial-gradient(70% 62% at 72% 40%, #000 25%, transparent 78%); }
.dlab-hero__orb { position: absolute; width: 42vmax; height: 42vmax; border-radius: 50%; filter: blur(70px); opacity: .5; animation: dlab-float 24s ease-in-out infinite alternate; }
.dlab-hero__orb--a { top: -18vmax; right: -10vmax; background: radial-gradient(circle, rgba(99, 102, 241, .85), transparent 62%); }
.dlab-hero__orb--b { bottom: -22vmax; left: -14vmax; background: radial-gradient(circle, rgba(34, 211, 238, .5), transparent 62%); animation-duration: 30s; }
@keyframes dlab-streak { from { transform: translate(-16%, 10%); } to { transform: translate(18%, -12%); } }
@keyframes dlab-float { to { transform: translate3d(-5vmax, 4vmax, 0) scale(1.08); } }
.dlab-pill { display: inline-flex; align-items: center; margin: 0; border-radius: 999px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--d-tx-2); border: 1px solid var(--d-edge-2); background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dlab-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 12px #22d3ee; animation: dlab-pulse 2.4s ease-in-out infinite; }
@keyframes dlab-pulse { 50% { box-shadow: 0 0 2px #22d3ee, 0 0 18px 4px rgba(34, 211, 238, .55); } }
.dlab-hero__title em { font-style: normal; background: linear-gradient(98deg, #818cf8, #c084fc 35%, #22d3ee 65%, #818cf8); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: dlab-sheen 9s linear infinite; }
@keyframes dlab-sheen { to { background-position: 220% 0; } }
.dlab .dlab-btn--glow { color: #fff; border: 0; padding: .7rem 1.25rem; background: linear-gradient(98deg, #4f46e5, #7c3aed); box-shadow: 0 12px 40px rgba(99, 102, 241, .42), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.dlab .dlab-btn--glow:hover { background: linear-gradient(98deg, #4338ca, #6d28d9); box-shadow: 0 16px 50px rgba(99, 102, 241, .55), inset 0 0 0 1px rgba(255, 255, 255, .28); }
.dlab .dlab-btn--glass { color: #fff; padding: .7rem 1.25rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dlab .dlab-btn--glass:hover { background: rgba(255, 255, 255, .12); }
.dlab-btn svg { width: 1.1em; height: 1.1em; transition: transform .25s var(--d-ease); }
.dlab-btn:hover svg { transform: translateX(3px); }
.dlab-stats dd { margin: 0; font-family: var(--d-font-display); font-weight: 740; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(98deg, #fff, #c7d2fe); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dlab-stats dt { color: var(--d-tx-3); line-height: 1.3; }
.dlab-hero__vk a { color: var(--d-tx-2); }
.dlab-hero__tune output { font-family: var(--d-font-display); font-weight: 720; color: #fff; font-variant-numeric: tabular-nums; }

/* ---- the decision field */
.dlab-field { margin: 0; position: relative; }
.dlab-field__canvas { position: relative; overflow: hidden;
  background: radial-gradient(60% 80% at 15% 50%, rgba(34, 211, 238, .12), transparent 60%), radial-gradient(70% 90% at 90% 50%, rgba(129, 140, 248, .14), transparent 65%), rgba(10, 12, 21, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 90px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dlab-field__svg, .dlab-field__particles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dlab-field__branch { fill: none; stroke: url(#dlab-branch-grad); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .45; stroke-linecap: round; transition: opacity .35s var(--d-ease), stroke-width .35s var(--d-ease); }
.dlab-field__branch.is-best { opacity: .95; stroke-width: 3.2; }
.dlab-field.is-drawing .dlab-field__branch { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dlab-draw 1.5s var(--d-ease) forwards; }
.dlab-field.is-drawing .dlab-field__branch:nth-of-type(2) { animation-delay: .12s; }
.dlab-field.is-drawing .dlab-field__branch:nth-of-type(3) { animation-delay: .24s; }
.dlab-field.is-drawing .dlab-field__branch:nth-of-type(4) { animation-delay: .36s; }
.dlab-field.is-drawing .dlab-field__branch:nth-of-type(5) { animation-delay: .48s; }
@keyframes dlab-draw { to { stroke-dashoffset: 0; } }
.dlab-field.is-focus .dlab-field__branch { opacity: .14; }
.dlab-field.is-focus .dlab-field__branch.is-hot { opacity: 1; stroke-width: 3.6; }
.dlab-field__halo { transform-origin: 130px 300px; transform-box: view-box; animation: dlab-breathe 4.5s ease-in-out infinite; }
@keyframes dlab-breathe { 50% { transform: scale(1.18); opacity: .7; } }
.dlab-field__root, .dlab .dlab-field__node { position: absolute; transform: translateY(-50%); display: grid; text-align: start; color: #fff; background: rgba(9, 11, 20, .78); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: inherit; }
.dlab-field__root { left: 2.5%; border-color: rgba(34, 211, 238, .45); }
/* the paths stack in a column with an even gap; dlab-visuals.js bends each branch to its card */
.dlab .dlab-field__nodes { position: relative; z-index: 2; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.dlab .dlab-field__nodes .dlab-field__node { position: relative; left: auto; top: auto; width: auto; transform: none; }
.dlab .dlab-field__node { cursor: pointer; transition: transform .3s var(--d-ease), border-color .3s, box-shadow .3s; }
.dlab .dlab-field__node:hover, .dlab .dlab-field__node:focus-visible, .dlab .dlab-field__node.is-hot { transform: translateX(-5px); border-color: rgba(165, 180, 252, .65); }
.dlab .dlab-field__node.is-best { border-color: rgba(34, 211, 238, .7); box-shadow: 0 0 0 1px rgba(34, 211, 238, .35), 0 0 34px rgba(34, 211, 238, .22), 0 12px 30px rgba(0, 0, 0, .4); }
.dlab-field__k { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--d-tx-3); }
.dlab-field__name { font-weight: 650; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dlab-field__row { display: flex; align-items: baseline; white-space: nowrap; overflow: hidden; }
.dlab-field__v { font-family: var(--d-font-display); font-weight: 740; font-variant-numeric: tabular-nums; }
.dlab-field__d { font-weight: 650; color: var(--d-tx-3); font-variant-numeric: tabular-nums; }
.dlab-field__d.is-good { color: #34d399; }
.dlab-field__d.is-bad { color: #fca5a5; }
.dlab .dlab-field__node.is-best .dlab-field__best { display: inline-block; }
.dlab-field__metric { color: var(--d-tx-2); font-weight: 600; }
.dlab-field__scen { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.dlab-field__scen button { border: 0; border-radius: 999px; background: none; color: var(--d-tx-2); font-family: var(--d-font); font-weight: 600; line-height: 1; cursor: pointer; }
.dlab-field__scen button[aria-pressed="true"] { color: #06070c; background: #fff; }
.dlab-field__read b { color: #fff; }
@media (max-width: 47.99rem) {
  .dlab-field__canvas { min-height: 0; display: grid; gap: .5rem; padding: .8rem; }
  .dlab .dlab-field__nodes { margin: 0; width: auto; min-height: 0; padding: 0; gap: .5rem; }
  .dlab-field__svg, .dlab-field__particles { display: none; }
  .dlab-field__root, .dlab .dlab-field__node { position: relative; left: auto; top: auto !important; width: auto; transform: none; }
  .dlab .dlab-field__node { margin-inline-start: 1.1rem; }
  .dlab .dlab-field__node::before { content: ""; position: absolute; left: -1.1rem; top: -.5rem; bottom: 50%; width: .8rem; border-left: 2px solid rgba(129, 140, 248, .55); border-bottom: 2px solid rgba(129, 140, 248, .55); border-bottom-left-radius: 10px; }
  .dlab .dlab-field__node:hover, .dlab .dlab-field__node:focus-visible, .dlab .dlab-field__node.is-hot { transform: translateX(3px); }
  .dlab .dlab-field__node.is-best { margin-top: .5rem; }
}

/* ---- logo strip (official logos on light tiles, so every brand keeps its colours) */
.dlab-logostrip__view { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.dlab-logostrip__track { display: flex; flex: none; align-items: center; gap: clamp(2.4rem, 4.5vw, 4rem); margin: 0; padding: .8rem clamp(1.2rem, 2.25vw, 2rem); list-style: none; animation: dlab-marquee 42s linear infinite; }
.dlab-logostrip__view:hover .dlab-logostrip__track, .dlab-logostrip__view:focus-within .dlab-logostrip__track { animation-play-state: paused; }
@keyframes dlab-marquee { to { transform: translateX(-100%); } }

/* ---- bento decision tiles with live mini charts */
.dlab-bento { display: grid; gap: var(--d-gap); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dlab-tile, .dlab-evcard, .dlab-trust__item { position: relative; isolation: isolate; border-radius: 22px; border: 1px solid var(--d-edge); background: var(--d-surface); color: var(--d-tx); text-decoration: none; transition: transform .4s var(--d-ease), box-shadow .4s var(--d-ease), border-color .3s; }
.dlab-tile::after, .dlab-evcard::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity .4s var(--d-ease);
  background: linear-gradient(120deg, #22d3ee, #6366f1 45%, #a855f7);
  -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 exclude, linear-gradient(#000 0 0); }
.dlab-tile:hover, .dlab-tile:focus-visible, .dlab-evcard:hover, .dlab-evcard:focus-visible { transform: translateY(-5px); border-color: transparent; box-shadow: 0 24px 60px rgba(14, 20, 40, .28), 0 0 0 1px rgba(99, 102, 241, .08); }
.dlab-tile:hover::after, .dlab-tile:focus-visible::after, .dlab-evcard:hover::after, .dlab-evcard:focus-visible::after { opacity: 1; }
.dlab-tile { grid-column: span 2; display: flex; flex-direction: column; gap: .6rem; min-height: 21rem; padding: 1.35rem; overflow: hidden; }
.dlab-tile:nth-child(1), .dlab-tile:nth-child(2) { grid-column: span 3; }
/* an odd last row never leaves a lonely tile: one leftover spans the row, two share it */
.dlab-tile:nth-child(n+3):last-child:nth-child(3n) { grid-column: 1 / -1; }
.dlab-tile:first-child:nth-last-child(3n+1) ~ .dlab-tile:nth-last-child(-n+2):nth-child(n+3) { grid-column: span 3; }
.dlab-story__stage::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 2.1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); background: radial-gradient(circle at 1.1rem 50%, #f87171 0 4px, transparent 5px), radial-gradient(circle at 1.8rem 50%, #fbbf24 0 4px, transparent 5px), radial-gradient(circle at 2.5rem 50%, #34d399 0 4px, transparent 5px), rgba(255, 255, 255, .03); }
.dlab-story__screen { padding-top: 2.6rem !important; }
@media (max-width: 63.99rem) { .dlab-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dlab-tile, .dlab-tile:nth-child(1), .dlab-tile:nth-child(2) { grid-column: span 1; } }
@media (max-width: 39.99rem) { .dlab-bento { grid-template-columns: minmax(0, 1fr); } }
.dlab-tile__top { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.dlab-tile__domain, .dlab-evcard__domain { display: inline-flex; padding: .2rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--d-link); background: color-mix(in srgb, var(--d-link) 12%, transparent); border: 1px solid color-mix(in srgb, var(--d-link) 30%, transparent); }
.dlab-tile__state { font-size: .72rem; color: var(--d-tx-3); }
.dlab .dlab-tile__q { margin: 0; color: inherit; font-family: var(--d-font-display); font-size: clamp(1.2rem, 1.7vw, 1.55rem); font-weight: 680; line-height: 1.14; letter-spacing: -.015em; text-wrap: balance; }
.dlab-tile__meta { font-size: .85rem; color: var(--d-tx-3); }
.dlab-tile__glyph { order: 5; position: relative; display: block; height: 8.5rem; margin-top: auto; }
.dlab-tile__glyph svg { width: 100%; height: 100%; overflow: visible; }
.dlab-tile__go { order: 6; display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; font-size: .92rem; color: var(--d-link); }
.dlab-tile__go svg { width: 1.05em; height: 1.05em; transition: transform .3s var(--d-ease); }
.dlab-tile:hover .dlab-tile__go svg { transform: translateX(4px); }
.dlab-glyph-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dlab-glyph-line.is-base { stroke-dasharray: 4 5; opacity: .7; }
.dlab-glyph-bar { rx: 5; }
.dlab-glyph-lab { font: 600 10.5px var(--d-font); fill: var(--d-tx-2); }
.dlab-glyph-val { font: 700 10.5px var(--d-font); fill: var(--d-tx); font-variant-numeric: tabular-nums; }
.dlab-glyph-axis { stroke: var(--d-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dlab-glyph-grid { stroke: var(--d-edge); stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; }
.dlab-glyph.is-anim .dlab-glyph-dot { opacity: 0; animation: dlab-fadein .4s ease forwards; }
@keyframes dlab-fadein { to { opacity: 1; } }
.dlab-glyph-dot { fill: var(--d-bg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dlab-glyph.is-anim .dlab-glyph-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dlab-draw 1.4s var(--d-ease) forwards; }
.dlab-glyph.is-anim .dlab-glyph-line.is-base { stroke-dasharray: 1; }
.dlab-glyph.is-anim .dlab-glyph-bar { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; animation: dlab-grow .9s var(--d-ease) forwards; }
.dlab-glyph.is-anim .dlab-glyph-bar.is-v { transform: scaleY(0); transform-origin: center bottom; }
@keyframes dlab-grow { to { transform: none; } }

/* ---- scroll story */
.dlab-story { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
@media (min-width: 64rem) { .dlab-story { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.dlab-story__stage { position: sticky; top: calc(var(--dlab-sticky, 6.8rem) + 1rem); z-index: 1; height: clamp(17rem, min(36vw, calc(100svh - var(--dlab-sticky, 6.8rem) - 3rem)), 36rem); border-radius: 24px; overflow: hidden; color: #eef1f8;
  background: radial-gradient(60% 80% at 80% 10%, rgba(99, 102, 241, .45), transparent 62%), radial-gradient(50% 70% at 10% 100%, rgba(34, 211, 238, .22), transparent 62%), #0a0c15;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 80px rgba(6, 7, 12, .35); }
.dlab-story__screen { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.2rem); opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .55s var(--d-ease), transform .7s var(--d-ease); }
.dlab-story:not([data-active]) [data-screen="1"], .dlab-story[data-active="1"] [data-screen="1"], .dlab-story[data-active="2"] [data-screen="2"], .dlab-story[data-active="3"] [data-screen="3"], .dlab-story[data-active="4"] [data-screen="4"] { opacity: 1; transform: none; }
.dlab-story__steps { list-style: none; margin: 0; padding: 0; counter-reset: dlab-story; }
.dlab-story__steps li { counter-increment: dlab-story; position: relative; padding: 1.2rem 0 1.2rem 3.4rem; opacity: .86; transition: opacity .4s var(--d-ease); }
@media (min-width: 64rem) { .dlab-story__steps li { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; } }
.dlab-story__steps li::before { content: counter(dlab-story, decimal-leading-zero); position: absolute; left: 0; top: 1.25rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; font: 700 .8rem var(--d-font); color: var(--d-tx-2); background: var(--d-surface-2); border: 1px solid var(--d-edge); transition: background .4s, color .4s; }
@media (min-width: 64rem) { .dlab-story__steps li::before { top: calc(50% - 1.2rem); } }
.dlab-story__steps li.is-active { opacity: 1; }
.dlab-story__steps li.is-active::before { color: #fff; border-color: transparent; background: linear-gradient(135deg, #4f46e5, #7c3aed); box-shadow: 0 10px 30px rgba(99, 102, 241, .35); }
.dlab-story__steps h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); margin-bottom: .45rem; }
.dlab-story__steps p { color: var(--d-tx-2); margin: 0; max-width: 46ch; }
.dlab-mock { width: min(100%, 31rem); display: grid; gap: .6rem; font-size: clamp(.85rem, 1.05vw, .98rem); }
.dlab-mock__chip { display: inline-flex; margin: 0 .35rem .35rem 0; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #c3cad9; font-weight: 600; }
.dlab-mock__chip.is-on { color: #06070c; background: #fff; }
.dlab-mock--choose { display: block; }
.dlab-mock__q { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; padding: .6rem .8rem; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #c3cad9; }
.dlab-mock__q b { margin-inline-start: auto; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; color: #959db0; background: rgba(255, 255, 255, .06); }
.dlab-mock__q b + b { margin-inline-start: 0; }
.dlab-mock__q b.is-on { color: #06070c; background: #a5b4fc; }
.dlab-mock__row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .85rem; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: #c3cad9; }
.dlab-mock__row i { font-style: normal; }
.dlab-mock__row b { color: #fff; font-variant-numeric: tabular-nums; }
.dlab-mock__row b.up { color: #fca5a5; }
.dlab-mock__row b.down { color: #34d399; }
.dlab-mock__row.is-key { background: rgba(99, 102, 241, .2); border-color: rgba(129, 140, 248, .45); }
.dlab-story[data-active="2"] [data-screen="2"] .dlab-mock__row { animation: dlab-rowin .6s var(--d-ease) both; }
.dlab-story[data-active="2"] [data-screen="2"] .dlab-mock__row:nth-child(2) { animation-delay: .08s; }
.dlab-story[data-active="2"] [data-screen="2"] .dlab-mock__row:nth-child(3) { animation-delay: .16s; }
.dlab-story[data-active="2"] [data-screen="2"] .dlab-mock__row:nth-child(4) { animation-delay: .24s; }
.dlab-story[data-active="2"] [data-screen="2"] .dlab-mock__row:nth-child(5) { animation-delay: .32s; }
@keyframes dlab-rowin { from { opacity: 0; transform: translateX(-14px); } }
.dlab-mock__lab { color: #c3cad9; font-weight: 600; }
.dlab-mock__track { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.dlab-mock__thumb { position: absolute; top: 50%; left: 30%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(165, 180, 252, .35); }
.dlab-story[data-active="3"] .dlab-mock__thumb { animation: dlab-thumb 3.2s var(--d-ease) infinite alternate; }
@keyframes dlab-thumb { to { left: 72%; } }
.dlab-mock__curves svg { width: 100%; height: 6.5rem; }
.dlab-mock__curves path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.dlab-mock__curves .c1 { stroke: #22d3ee; }
.dlab-mock__curves .c2 { stroke: #a78bfa; }
.dlab-mock__curves .x { fill: #fff; }
.dlab-story[data-active="3"] .dlab-mock__curves .x { animation: dlab-pulse-dot 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dlab-pulse-dot { 50% { transform: scale(1.6); } }
.dlab-mock__note { color: #a5b4fc; font-weight: 600; }
.dlab-mock__tl { position: relative; height: 2.2rem; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.dlab-mock__tl i { position: absolute; top: .55rem; bottom: .55rem; left: var(--s); width: var(--l); border-radius: 6px; background: linear-gradient(90deg, #6366f1, #a855f7); transform-origin: left; }
.dlab-mock__tl i.is-r { background: repeating-linear-gradient(90deg, #22d3ee 0 8px, transparent 8px 12px); }
.dlab-story[data-active="4"] .dlab-mock__tl i { animation: dlab-grow-x .8s var(--d-ease) both; }
.dlab-story[data-active="4"] .dlab-mock__tl i:nth-child(2) { animation-delay: .2s; }
.dlab-story[data-active="4"] .dlab-mock__tl i:nth-child(3) { animation-delay: .4s; }
@keyframes dlab-grow-x { from { transform: scaleX(0); } }
.dlab-mock__badge { justify-self: start; padding: .4rem .8rem; border-radius: 999px; font-weight: 650; font-size: .8rem; color: #06070c; background: linear-gradient(98deg, #22d3ee, #a5b4fc); }

/* ---- evidence cards */
.dlab-evgrid { display: grid; gap: var(--d-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
@media (min-width: 64rem) { .dlab-evgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dlab-evcard { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; }
.dlab-evcard__domain { align-self: flex-start; }
.dlab .dlab-evcard__title { margin: 0; color: inherit; font-family: var(--d-font-display); font-size: 1.08rem; font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dlab-evcard__meta { font-size: .82rem; color: var(--d-tx-3); }
.dlab-evcard__go { margin-top: auto; padding-top: .3rem; font-weight: 650; font-size: .88rem; color: var(--d-link); }

/* ---- plan teaser: capacity collision */
.dlab-split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 64rem) { .dlab-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.dlab-split .dlab-lede { margin-bottom: 1.6rem; }
.dlab-capacity { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.dlab-capacity__chart { position: relative; display: flex; flex-direction: column-reverse; width: min(100%, 12rem); height: 21rem; margin-top: 2.6rem; }
.dlab-capacity__bar { position: relative; display: flex; justify-content: space-between; align-items: center; height: var(--h); padding: 0 .8rem; color: #fff; font-size: .8rem; border-top: 2px solid var(--d-bg-2); background: linear-gradient(90deg, #4f46e5, #6d28d9); transform-origin: bottom; }
.dlab-capacity__bar:nth-child(3) { background: linear-gradient(90deg, #0e7490, #0891b2); }
.dlab-capacity__bar.is-over { background: linear-gradient(90deg, #7c3aed, #9333ea); border-radius: 12px 12px 0 0; }
.dlab-capacity__bar:last-of-type { border-radius: 0 0 12px 12px; }
.dlab-capacity__bar b { font-weight: 650; }
.dlab-capacity__bar em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.dlab-capacity__chart::after { content: ""; position: absolute; left: 0; right: 0; bottom: 86.9%; top: 0; border-radius: 12px 12px 0 0; background: repeating-linear-gradient(45deg, rgba(248, 113, 113, .65) 0 6px, rgba(248, 113, 113, .2) 6px 12px); pointer-events: none; }
.dlab-capacity__line { position: absolute; left: -2.4rem; right: -2.4rem; bottom: var(--y); border-top: 2px dashed #f87171; z-index: 2; }
.dlab-capacity__line i { position: absolute; left: 100%; margin-left: .45rem; top: -.6rem; font-style: normal; font-size: .72rem; font-weight: 700; color: #f87171; white-space: nowrap; }
.dlab-capacity__flag { position: absolute; top: -2.6rem; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: .35rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; background: #dc2626; box-shadow: 0 10px 26px rgba(220, 38, 38, .35); }
.dlab-capacity figcaption { font-size: .8rem; color: var(--d-tx-3); text-align: center; max-width: 24rem; }
.dlab-js .dlab-capacity__bar { transform: scaleY(0); transition: transform .9s var(--d-ease); transition-delay: calc(var(--i) * .18s + .2s); }
.dlab-js .dlab-capacity__chart::after, .dlab-js .dlab-capacity__flag { opacity: 0; transition: opacity .5s var(--d-ease) 1s; }
.dlab-js .dlab-capacity.is-in .dlab-capacity__bar { transform: none; }
.dlab-js .dlab-capacity.is-in .dlab-capacity__chart::after, .dlab-js .dlab-capacity.is-in .dlab-capacity__flag { opacity: 1; }

/* ---- principles */
.dlab-trust { display: grid; gap: var(--d-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.dlab-trust__item { padding: 1.5rem; }
.dlab-trust__item svg { width: 34px; height: 34px; padding: 6px; margin-bottom: .9rem; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.dlab-trust__item h3 { font-size: 1.1rem; }
.dlab-trust__item p { color: var(--d-tx-2); margin: 0; font-size: .95rem; }
.dlab-trust__more { margin: 1.6rem 0 0; font-weight: 650; }

/* ---- scroll reveal (only once the script runs; elements on screen at load never fade) */
.dlab-js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--d-ease), transform .85s var(--d-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.dlab-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- page heroes (decision, practice, company) */
.dlab-hero .dlab-crumbs a { color: var(--d-tx-2); }
.dlab-hero .dlab-takeaway { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-inline-start: 4px solid #22d3ee; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dlab-hero .dlab-takeaway p { color: #fff; }
.dlab-hero .dlab-notice { background: rgba(255, 255, 255, .06); color: var(--d-tx-2); }
.dlab .dlab-hero__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.dlab .dlab-hero__facts li { margin: 0; }
.dlab-hero__facts li { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--d-tx-2); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.dlab-recordcard { padding: 1.4rem; border-radius: 22px; background: rgba(9, 11, 20, .7); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dlab-recordcard .dlab-metrics { font-size: .9rem; }
.dlab-recordcard .dlab-metrics dd { text-align: start; font-weight: 550; }
.dlab-recordcard .dlab-metrics { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }

/* ---- in-page section nav */
.dlab-subnav { position: sticky; top: var(--dlab-sticky, 6.8rem); z-index: 20; background: color-mix(in srgb, var(--d-bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--d-edge); }
.dlab-subnav ul { display: flex; gap: .25rem; margin: 0; padding: .45rem 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.dlab .dlab-subnav a { display: inline-flex; align-items: center; min-height: 38px; padding: .3rem .85rem; border-radius: 999px; white-space: nowrap; font-size: .86rem; font-weight: 600; color: var(--d-tx-2); text-decoration: none; transition: background .25s, color .25s; }
.dlab .dlab-subnav a:hover { color: var(--d-tx); background: var(--d-surface-2); }
.dlab .dlab-subnav a.is-current { color: #fff; background: linear-gradient(98deg, #4f46e5, #7c3aed); }
.dlab--stage .dlab-section { scroll-margin-top: calc(var(--dlab-sticky, 6.8rem) + 4rem); }
.dlab-path { overflow: hidden; }
.dlab .dlab-path.is-selected { border-color: transparent; box-shadow: 0 0 0 1.5px #818cf8, 0 18px 50px rgba(99, 102, 241, .22); }

/* ---- motion off: reduced-motion preference or the visitor's pause control */
/* loops stop; one-off entrances (draw-in, bars) finish at once instead of freezing half-drawn */
.dlab--still .dlab-hero__streak, .dlab--still .dlab-hero__orb, .dlab--still .dlab-pill__dot, .dlab--still .dlab-hero__title em,
.dlab--still .dlab-field__halo, .dlab--still .dlab-logostrip__track, .dlab--still .dlab-mock__thumb, .dlab--still .dlab-mock__curves .x { animation-play-state: paused !important; }
.dlab--still .dlab-field__branch, .dlab--still .dlab-glyph-line, .dlab--still .dlab-glyph-bar, .dlab--still .dlab-glyph-dot { animation: none !important; stroke-dashoffset: 0 !important; transform: none !important; }
.dlab--still .dlab-glyph-dot { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .dlab-js [data-reveal] { opacity: 1; transform: none; }
  .dlab-js .dlab-capacity__bar { transform: none; }
  .dlab-js .dlab-capacity__chart::after, .dlab-js .dlab-capacity__flag { opacity: 1; }
  .dlab-logostrip__view { overflow-x: auto; }
  .dlab-logostrip__track[aria-hidden="true"] { display: none; }
}

/* ---- v1.1 page body under a stage hero (decision, practice, company) */
.dlab-page { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.dlab-page > .dlab-section { margin-top: clamp(2.8rem, 5.5vw, 4.6rem); }
.dlab-page > .dlab-section:first-child { margin-top: clamp(1.2rem, 2.5vw, 2rem); }
.dlab-page > .dlab-section > header h2, .dlab-page > .dlab-section > h2, .dlab-page #dlab-workbench h2 { font-family: var(--d-font-display); font-size: clamp(1.55rem, 2.7vw, 2.35rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 720; text-wrap: balance; }
.dlab-page #dlab-paths-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr)); }
.dlab-take { display: grid; gap: 1rem 2.5rem; align-items: start; }
@media (min-width: 64rem) { .dlab-take { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.dlab-take .dlab-takeaway { margin: 0; }
.dlab-take__who { margin: 0; padding: 1.1rem 1.25rem; border-radius: var(--d-r); border: 1px solid var(--d-edge); background: var(--d-surface); color: var(--d-tx-2); }
.dlab-take__who strong { display: block; margin-bottom: .3rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--d-tx-3); }

/* ---- practice record */
.dlab-hero__co { display: block; margin-bottom: .35rem; font-size: .5em; letter-spacing: -.01em; background: linear-gradient(98deg, #818cf8, #c084fc 45%, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dlab-recordcard__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dlab-recordcard__ver { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--d-tx-3); }
.dlab-claimbar { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--d-edge); }
.dlab-claimbar__k { margin: 0 0 .55rem; font-size: .8rem; font-weight: 600; color: var(--d-tx-2); }
.dlab .dlab-claimbar__track { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dlab .dlab-claimbar__track li { flex: 1; height: 10px; margin: 0; border-radius: 4px; background: #64748b; transform-origin: left; }
.dlab-js .dlab-recordcard.is-in .dlab-claimbar__track li, .dlab:not(.dlab-js) .dlab-claimbar__track li { animation: dlab-grow-x .5s var(--d-ease) both; animation-delay: calc(.5s + var(--i) * 60ms); }
.dlab .dlab-claimbar__legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .74rem; color: var(--d-tx-3); }
.dlab .dlab-claimbar__legend li { margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
.dlab-claimbar__legend li::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: #64748b; }
.dlab .dlab-claimbar__track .is-verified, .dlab-claimbar__legend .is-verified::before { background: #34d399; }
.dlab .dlab-claimbar__track .is-source_checked, .dlab-claimbar__legend .is-source_checked::before { background: #22d3ee; }
.dlab .dlab-claimbar__track .is-disputed, .dlab-claimbar__legend .is-disputed::before { background: #f87171; }
.dlab .dlab-claimbar__track .is-unverified, .dlab-claimbar__legend .is-unverified::before { background: #fbbf24; }
.dlab-dossier { display: grid; gap: var(--d-gap); }
@media (min-width: 56rem) { .dlab-dossier { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dlab-dossier__item--wide { grid-column: 1 / -1; } }
.dlab .dlab-dossier__item { max-width: none; }
.dlab-dossier__item { padding: clamp(1.2rem, 2.4vw, 1.9rem); border-radius: var(--d-r); border: 1px solid var(--d-edge); background: var(--d-surface); }
.dlab-dossier__item h2 { font-family: var(--d-font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.02em; margin: 0 0 .7rem; }
.dlab-dossier__item .dlab-kicker { margin-bottom: .7rem; }
.dlab-dossier__item > :last-child { margin-bottom: 0; }
.dlab-dossier__item--editorial { border-style: dashed; background: linear-gradient(160deg, rgba(99, 102, 241, .1), transparent 60%), var(--d-surface); }
.dlab-cite { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; overflow-wrap: anywhere; }
.dlab-linkcards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.dlab-linkcard { position: relative; display: grid; gap: .3rem; padding: 1.1rem 3rem 1.1rem 1.2rem; border-radius: var(--d-r); border: 1px solid var(--d-edge); background: var(--d-surface); color: var(--d-tx); text-decoration: none; transition: border-color .25s var(--d-ease), transform .25s var(--d-ease), background-color .25s; }
.dlab-linkcard b { font-weight: 650; line-height: 1.3; }
.dlab-linkcard span { font-size: .85rem; color: var(--d-tx-3); }
.dlab-linkcard i { position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%; font-style: normal; color: var(--d-link); transition: transform .25s var(--d-ease); }
.dlab-linkcard:hover, .dlab-linkcard:focus-visible { border-color: rgba(129, 140, 248, .6); background: var(--d-surface-2); transform: translateY(-2px); }
.dlab-linkcard:hover i { transform: translateX(4px); }

/* ---- company hero: the logo with its documented areas orbiting it */
.dlab-cohero { position: relative; display: grid; justify-items: center; gap: 1.6rem; padding: clamp(1rem, 3vw, 2rem) 0; }
.dlab .dlab-cohero__orbit { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; max-width: 30rem; }
.dlab .dlab-cohero__orbit li { margin: 0; padding: .35rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--d-tx-2); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); animation: dlab-bob 5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
@keyframes dlab-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
.dlab--still .dlab-cohero__orbit li { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .dlab .dlab-cohero__orbit li, .dlab .dlab-claimbar__track li { animation: none; } }
@media (max-width: 47.99rem) {
  .dlab-capacity__line i { left: auto; right: 2.4rem; margin: 0; top: -1.45rem; }
}


/* ---- official logos (v1.1.1): no plates of white — each company's own reversed logo on dark
   surfaces, its standard logo on light ones, sized for equal visual weight (Logos::k). */
.dlab-logo { display: inline-flex; align-items: center; height: var(--lh, 24px); line-height: 0; flex: none; }
.dlab-logo img { display: block; height: 100%; width: auto; max-width: none; }
.dlab-logo__on-light { display: none !important; }
html[data-theme="light"] .dlab .dlab-logo__on-light { display: block !important; }
html[data-theme="light"] .dlab .dlab-logo__on-dark { display: none !important; }
.dlab-logo--text { height: auto; line-height: 1.1; font: 720 1.05rem var(--d-font-display); letter-spacing: -.01em; color: var(--d-tx); }

/* hub strip: a quiet monochrome row that comes to colour under the pointer */
.dlab .dlab-logostrip__track li { margin: 0; }
.dlab-logostrip__item { display: inline-flex; align-items: center; min-height: 44px; padding: .25rem .2rem; color: var(--d-tx-2); text-decoration: none; opacity: .58; filter: brightness(0) invert(1); transition: opacity .35s var(--d-ease), filter .35s var(--d-ease), transform .35s var(--d-ease); }
a.dlab-logostrip__item:hover, a.dlab-logostrip__item:focus-visible { opacity: 1; filter: none; transform: translateY(-2px); }
.dlab-logostrip__view { position: relative; }

/* evidence cards: the logo leads the card, the area chip sits beside it */
.dlab-evcard__logo { display: flex; align-items: center; min-height: 36px; margin-bottom: .15rem; }
.dlab-evcard { position: relative; isolation: isolate; }
.dlab-evcard::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; background: radial-gradient(70% 60% at 0% 0%, rgba(99, 102, 241, .16), transparent 70%); transition: opacity .4s var(--d-ease); pointer-events: none; }
.dlab-evcard:hover::after, .dlab-evcard:focus-visible::after { opacity: 1; }

/* decision hero: a company chip is just the logo on glass */

/* path cards: which company practice the path rests on */
.dlab-path__logo { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; min-height: 34px; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--d-edge); background: var(--d-surface); text-decoration: none; transition: border-color .25s var(--d-ease), background-color .25s var(--d-ease); }
.dlab-path__logo:hover, .dlab-path__logo:focus-visible { border-color: rgba(129, 140, 248, .6); background: var(--d-surface-2); }

/* record card and company hero: the logo on a lit glass plate */
.dlab-logoplate { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 60%); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 60px rgba(0, 0, 0, .4); }
.dlab-logoplate::before { content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(99, 102, 241, .38), rgba(34, 211, 238, .12) 55%, transparent); filter: blur(18px); animation: dlab-breathe 6s ease-in-out infinite; }
.dlab--still .dlab-logoplate::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .dlab-logoplate::before { animation: none; } }

/* ==========================================================================
   Hero geometry (v1.1.5). One unit, --hu, is one pixel of a 1280 x 640 design.
   On a desktop it is derived from the site's content width and from the
   height left under the site header, so the whole hero always fits one screen
   from a 13-inch laptop to a 32-inch monitor and lines up with the header's
   grid. Below 68.75rem the hero stacks and --hu is a plain pixel.
   ========================================================================== */
.dlab-hero { --hu: 1px; --dlab-head: 6.9rem; display: flex; flex-direction: column; padding-top: calc(18 * var(--hu)); }
@media (min-width: 68.75rem) {
  .dlab-hero {
    --hu: clamp(.8px, min(calc((min(100vw, var(--wrap, 84rem)) - 2 * var(--gut, 2.5rem)) / 1280), calc((100svh - var(--dlab-head)) / 640)), 1.5px);
    min-height: calc(100svh - var(--dlab-head));
  }
  .dlab-hero__inner { flex: 1; grid-template-columns: minmax(0, 8fr) minmax(0, 10fr); width: 100%; }
}
.dlab-hero__inner { position: relative; display: grid; align-items: center; gap: calc(32 * var(--hu)) calc(56 * var(--hu)); padding-bottom: calc(14 * var(--hu)); }
.dlab-hero .dlab-crumbs { margin: 0 0 calc(10 * var(--hu)); font-size: calc(12.5 * var(--hu)); line-height: 1.4; color: var(--d-tx-3); }
.dlab-pill { line-height: 1.2; gap: calc(9 * var(--hu)); padding: calc(7 * var(--hu)) calc(15 * var(--hu)); font-size: calc(11.5 * var(--hu)); }
.dlab-hero__title { margin: calc(14 * var(--hu)) 0 calc(14 * var(--hu)); font-family: var(--d-font-display); font-size: calc(62 * var(--hu)); font-weight: 760; line-height: 1; letter-spacing: -.036em; color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.dlab-hero--page .dlab-hero__title { font-size: calc(44 * var(--hu)); line-height: 1.06; }
.dlab-hero--page .dlab-hero__title--record { font-size: calc(36 * var(--hu)); line-height: 1.1; }
.dlab-hero__sub { max-width: 58ch; margin: 0 0 calc(18 * var(--hu)); font-size: calc(17 * var(--hu)); line-height: 1.5; color: var(--d-tx-2); }
.dlab-hero--page .dlab-hero__sub { font-size: calc(15.5 * var(--hu)); margin-bottom: calc(12 * var(--hu)); }
.dlab-hero .dlab-notice { margin: 0 0 calc(14 * var(--hu)); padding: calc(9 * var(--hu)) calc(13 * var(--hu)); font-size: calc(13 * var(--hu)); line-height: 1.45; }
.dlab-hero .dlab-badges { margin: 0 0 calc(14 * var(--hu)); }
.dlab-hero__cta { display: flex; flex-wrap: wrap; gap: calc(12 * var(--hu)); margin-bottom: calc(22 * var(--hu)); }
.dlab-hero--page .dlab-hero__cta { margin-bottom: calc(14 * var(--hu)); }
.dlab .dlab-hero .dlab-btn { min-height: max(40px, calc(46 * var(--hu))); padding: 0 calc(20 * var(--hu)); font-size: calc(15 * var(--hu)); }
.dlab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(20 * var(--hu)); margin: 0; }
.dlab-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: calc(4 * var(--hu)); padding-top: calc(10 * var(--hu)); border-top: 1px solid rgba(255, 255, 255, .14); }
.dlab-stats dd { font-size: calc(30 * var(--hu)); }
.dlab-stats dt { font-size: calc(12.5 * var(--hu)); }
.dlab-stats--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: calc(460 * var(--hu)); }
.dlab-hero__vk { margin: 0 0 calc(8 * var(--hu)); font-size: calc(12.5 * var(--hu)); letter-spacing: .02em; color: var(--d-tx-3); }
.dlab .dlab-hero__facts { gap: calc(8 * var(--hu)); margin: 0; }
.dlab-hero__facts li { gap: calc(7 * var(--hu)); min-height: calc(30 * var(--hu)); padding: 0 calc(12 * var(--hu)); border-radius: 999px; font-size: calc(12.5 * var(--hu)); font-weight: 600; }
.dlab-hero .dlab-logo { height: calc(var(--ln, 24) * var(--hu)); }

/* the decision field */
.dlab-hero .dlab-field__canvas { min-height: calc(340 * var(--hu)); border-radius: calc(20 * var(--hu)); }
.dlab .dlab-hero .dlab-field__nodes { margin-inline-start: 57%; width: 40.5%; min-height: calc(340 * var(--hu)); gap: calc(13 * var(--hu)); padding: calc(14 * var(--hu)) 0; }
.dlab-hero .dlab-field__root { width: 25%; padding: calc(9 * var(--hu)) calc(12 * var(--hu)); border-radius: calc(13 * var(--hu)); }
.dlab .dlab-hero .dlab-field__node { gap: calc(2 * var(--hu)); padding: calc(8 * var(--hu)) calc(12 * var(--hu)); border-radius: calc(13 * var(--hu)); }
.dlab-hero .dlab-field__k, .dlab-hero .dlab-field__row, .dlab-hero .dlab-field__root .dlab-field__v { line-height: 1.25; }
.dlab-hero .dlab-field__k { font-size: calc(10.5 * var(--hu)); }
.dlab-hero .dlab-field__name { font-size: calc(14 * var(--hu)); }
.dlab-hero .dlab-field__v { font-size: calc(19 * var(--hu)); }
.dlab-hero .dlab-field__d { margin-inline-start: calc(8 * var(--hu)); font-size: calc(12.5 * var(--hu)); }
.dlab-field__best { display: none; position: absolute; top: calc(-9 * var(--hu)); right: calc(10 * var(--hu)); padding: calc(2 * var(--hu)) calc(8 * var(--hu)); border-radius: 999px; font-size: calc(10 * var(--hu)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #06070c; background: linear-gradient(98deg, #22d3ee, #a5b4fc); }
.dlab-field__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(1 * var(--hu)) calc(14 * var(--hu)); margin-top: calc(8 * var(--hu)); font-size: calc(12 * var(--hu)); line-height: 1.3; color: var(--d-tx-3); }
.dlab-field__metric { grid-column: 1; }
.dlab-field__note { grid-column: 1; }
.dlab-field__scen { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.dlab-field__scen button { min-height: max(26px, calc(28 * var(--hu))); padding: 0 calc(11 * var(--hu)); font-size: calc(12 * var(--hu)); }
.dlab-field__read { position: absolute; z-index: 3; left: 2.5%; bottom: calc(12 * var(--hu)); width: 52%; font-size: calc(12 * var(--hu)); line-height: 1.4; color: var(--d-tx-2); pointer-events: none; }
.dlab-field__read:not(:empty) { padding: calc(7 * var(--hu)) calc(10 * var(--hu)); border-radius: calc(10 * var(--hu)); background: rgba(9, 11, 20, .82); }
.dlab-hero__tune { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(14 * var(--hu)); margin-top: calc(8 * var(--hu)); padding: calc(5 * var(--hu)) calc(14 * var(--hu)); border-radius: calc(12 * var(--hu)); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.dlab-hero__tune label { font-size: calc(12.5 * var(--hu)); font-weight: 500; color: var(--d-tx-2); white-space: nowrap; }
.dlab-hero__tune input[type="range"] { width: 100%; min-height: 24px; accent-color: #818cf8; }
/* filled in by the script; the space is held so nothing moves when it appears */
[data-pending] { visibility: hidden; }

/* the logo strip closes the hero, on the same grid */
.dlab-logostrip { position: relative; width: 100%; max-width: var(--wrap, 84rem); margin-inline: auto; padding: 0 var(--gut, 1rem) calc(10 * var(--hu)); }
.dlab-logostrip__k { margin: 0; padding-top: calc(9 * var(--hu)); border-top: 1px solid rgba(255, 255, 255, .1); text-align: center; font-size: calc(10.5 * var(--hu)); line-height: 1.2; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--d-tx-3); }
.dlab-logostrip__item { min-height: calc(42 * var(--hu)); }
.dlab .dlab-logostrip__track { margin: 0; padding-block: 0; }

/* record card and company hero */
.dlab-recordcard { padding: calc(20 * var(--hu)); }
.dlab-recordcard .dlab-metrics { font-size: calc(13 * var(--hu)); }
.dlab-recordcard__head { margin-bottom: calc(12 * var(--hu)); }
.dlab-logoplate { min-height: calc(62 * var(--hu)); padding: calc(10 * var(--hu)) calc(20 * var(--hu)); border-radius: calc(16 * var(--hu)); }
.dlab-logoplate--xl { min-height: calc(120 * var(--hu)); padding: calc(24 * var(--hu)) calc(40 * var(--hu)); border-radius: calc(26 * var(--hu)); }
.dlab-cohero { padding: 0; gap: calc(20 * var(--hu)); }

/* stacked: the hero is taller than a phone anyway, so type follows the width */
@media (max-width: 68.74rem) {
  .dlab-hero { padding-top: 1.5rem; }
  .dlab-hero__title { font-size: clamp(2.4rem, 7.4vw, 3.9rem); }
  .dlab-hero--page .dlab-hero__title { font-size: clamp(2rem, 5.8vw, 3rem); }
  .dlab-hero--page .dlab-hero__title--record { font-size: clamp(1.7rem, 4.8vw, 2.5rem); }
  .dlab-logostrip { padding-top: 1rem; }
}
@media (max-width: 47.99rem) {
  .dlab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlab .dlab-hero .dlab-field__nodes { margin: 0; width: auto; min-height: 0; padding: 0; gap: .6rem; }
  .dlab-hero .dlab-field__canvas { min-height: 0; }
  .dlab-hero .dlab-field__root { width: auto; }
  .dlab-field__read { position: static; width: auto; }
  .dlab-hero__tune { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .dlab-hero__tune label { white-space: normal; }
}
html[data-theme="light"] .dlab-capacity__line i { color: #b91c1c; }

/* ==========================================================================
   Form system (v1.1.6). Every control in the tool is one height, --d-ctl, and
   every row lines its controls up on their bottom edge, whatever the labels
   and help texts around them do.
   ========================================================================== */
.dlab { --d-ctl: 44px; --d-form-gap: 1rem; }
.dlab input[type="text"], .dlab input[type="number"], .dlab input[type="date"], .dlab input[type="search"], .dlab select { box-sizing: border-box; height: var(--d-ctl); min-height: var(--d-ctl); margin: 0; padding-block: 0; }
.dlab select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.2rem; text-overflow: ellipsis; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23959db0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: .7rem; }
.dlab .dlab-field, .dlab .sk-field { align-content: start; min-width: 0; }
.dlab label.dlab-sr + input, .dlab label.dlab-sr + select { margin-top: 0; }

/* fields in a grid share rows: label, control, help */
.dlab-grid:has(> .dlab-field) { row-gap: var(--d-form-gap); }
.dlab .dlab-grid > .dlab-field { grid-row: span 3; grid-template-rows: subgrid; row-gap: .3rem; align-content: normal; }
.dlab .dlab-grid > .dlab-field > label { align-self: end; }
.dlab-grid:has(> .dlab-field) + .dlab-tablewrap, .dlab-grid:has(> .dlab-field) + .dlab-actions { margin-top: var(--d-form-gap); }

/* a row of controls and buttons */
.dlab-actions { gap: .6rem; }
.dlab-actions--below { margin-block: var(--d-form-gap); }
.dlab-actions:has(> .dlab-field) { align-items: flex-end; gap: .6rem 1rem; }
.dlab-actions > .dlab-field { flex: 0 1 26rem; }
.dlab-actions:has(> .dlab-field) > .dlab-btn { min-height: var(--d-ctl); }
.dlab .dlab-check { min-height: var(--d-ctl); line-height: 1.25; }
.dlab .dlab-check input { flex: none; margin: 0; }
.dlab fieldset .dlab-check { display: flex; }
.dlab-diff-head { align-items: flex-end; }
.dlab-diff-head > div:first-child { flex: 1 1 100%; }

/* toolbar: one height across the segmented control, the select and the buttons */
.dlab .dlab-toolbar .dlab-btn { min-height: var(--d-ctl); }
.dlab-toolbar__group { gap: .6rem; }
.dlab-seg { box-sizing: border-box; min-height: var(--d-ctl); align-items: stretch; }

/* the resource table */
.dlab-restable th:nth-child(1) { width: 32%; }
.dlab-restable th:nth-child(2) { width: 14%; }
.dlab-restable th:nth-child(4) { width: 6rem; }
.dlab .dlab-restable td { vertical-align: top; padding-block: .6rem; }
.dlab .dlab-restable details { margin: 0; border-color: var(--d-edge-2); border-radius: 10px; background: var(--d-bg-2); }
.dlab .dlab-restable summary { box-sizing: border-box; min-height: calc(var(--d-ctl) - 2px); padding: .25rem .7rem; font-weight: 500; font-size: .95rem; }
.dlab .dlab-restable details[open] > summary { margin-bottom: .4rem; }
.dlab .dlab-restable .dlab-linkbtn { min-height: var(--d-ctl); }
@media (max-width: 40rem) {
  .dlab .dlab-restable td > .dlab-field, .dlab .dlab-restable td > details { flex: 1 1 60%; min-width: 0; text-align: start; }
  .dlab .dlab-restable td { align-items: center; }
  .dlab-actions > .dlab-field { flex: 1 1 100%; }
}

/* ledger: controls and the unknown box on one line */
.dlab .dlab-ledger td { vertical-align: middle; }
.dlab .dlab-ledger .dlab-check { min-height: var(--d-ctl); }

/* a card holding a form: one vertical rhythm */
.dlab legend { padding: 0; }
.dlab-card > h3 + .dlab-grid { margin-top: .4rem; }
.dlab-card > .dlab-grid + fieldset { margin-top: var(--d-form-gap); }
.dlab-card > fieldset legend { margin-bottom: .1rem; }
.dlab-card > fieldset + .dlab-actions, .dlab-card > .dlab-grid + .dlab-actions { margin-top: .5rem; }
#dlab-plan .dlab-actions:has(> .dlab-field) { margin-top: var(--d-form-gap); }