/* DARK CASE UI - @rondesignlab's Vexto case study (their pinned post 3, Dc6PietDNcd) as a working interface system.
   Near-black ground, flat cards barely lighter, light Helvetica-style statements that end in one white phrase on a
   selection block with an accent caret, split-tone numbers, thin noisy charts, a metadata row on every screen,
   smoky glass over graded photos and maps. Its daylight twin is their Payrix post (DeCVR68jBEg).

   Load, in this order:
     palettes.css   (the 14 palettes; put data-palette="<name>" on <html>; default for this look: apricot)
     fonts.css      (the loud display fonts; this look uses --f-druk only)
     frost-glass.css(the shared glass material: .fg.smoke for glass over photos and maps)
     case-ui.css    (this file)
   and at the end of <body>: case-charts.js (charts), frost-glass.js (optional rim refraction).
   Body: <body class="dc">. The system light/dark setting decides; there is no theme switch.

   MEASURED on Vexto (3200 px slides; screen px in brackets for a 1440 px page):
     ground #0D0D0D (42% of pixels)       card #191919, radius 0.035 x card width (14 px on a 400 px card)
     statement grey #6E6E6E (3.8:1)       statement highlight: weight 400 vs 300 and white, on a block that fades
     selection block -> #141414 at caret   in from the left (#0D -> #14) and ends at the caret
     caret: 2 px line #E09A5E (amber),    square ends 10 px, detached by a 12 px gap   [1.5 px line, 4 px squares]
     metadata row: a SQUARE dot #B6B6B6, "00.1", section name, logo right, a dashed hairline below (8 on / 20 off)
     charts: grey line ~2.5 px [1 px], white stretch ~5 px [1.5 px], dots 14 px [6 px], band #1B1B1B from the
     stretch's start level down, reference line #C2C2C2 dashed, gridlines #242424 dashed, axis labels #848484.
     accent: an amber orange #E09A5E - #EE9632 (closest palette: apricot). */

:root {
  color-scheme: dark light;

  /* ---------------------------------------------------------------- type: three families, three jobs */
  --f-ui: "Inter Tight", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;   /* stands in for Helvetica Neue Light */
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;          /* metadata, indices, axes, tables */
  --f-loud: var(--f-druk, "Druk Wide", "Druk", "Archivo", sans-serif);               /* the loud one: 32 px and up only */
  --font: var(--f-ui);                                                                /* frost-glass.css reads this */

  --t-hero: clamp(2.25rem, 1.05rem + 4.6vw, 5.5rem);    /* 36 -> 88  landing statement */
  --t-stmt: clamp(1.875rem, 1.25rem + 2.3vw, 3.25rem);  /* 30 -> 52  app and section statements */
  --t-title: clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem);  /* 28 -> 44  two-tone section titles */
  --t-num-xl: clamp(3rem, 1.9rem + 3.6vw, 5.5rem);      /* 48 -> 88  hero numbers */
  --t-num-l: clamp(2.25rem, 1.95rem + .9vw, 2.75rem);   /* 36 -> 44  KPI numbers */
  --t-num-m: 1.75rem;                                    /* 28        small numbers (still large text) */
  --t-h: 1rem;            /* 16  card titles */
  --t-body: 1rem;         /* 16  body */
  --t-small: .875rem;     /* 14  UI labels, table cells */
  --t-cap: .8125rem;      /* 13  captions, legends */
  --t-meta: .75rem;       /* 12  mono metadata */
  --t-axis: .6875rem;     /* 11  mono axis labels: the floor (Apple's 11 pt minimum) */

  /* ---------------------------------------------------------------- DARK: Vexto, the primary appearance */
  --ground: #0C0D0C;
  --card: #1A1B1A;
  --card-2: #212221;          /* nested tiles, inputs */
  --card-3: #2C2D2C;          /* pressed, selected rows */
  --sel: #1C1D1C;             /* where the selection block ends, at the caret */
  --ink: #FFFFFF;
  --ink-2: #B6B6B6;           /* metadata row, secondary text: 9.6:1 on ground, 8:1 on cards */
  --ink-3: #8C8C8C;           /* small grey copy, axes, captions: 5.8:1 ground, 5.2:1 card */
  --grey: #6E6E6E;            /* statement grey + dim digits: 3.8:1 ground, 3.4:1 card. LARGE TEXT ONLY (24 px+) */
  --hair: #262726;            /* dashed gridlines and rules */
  --hair-2: #353635;          /* solid hairlines: table rows, outlines, ruler ticks */
  --chart-line: #626362;      /* the thin grey data line */
  --ref: #C2C2C2;             /* dashed reference line */
  --band: rgba(255,255,255,.055);
  --area: rgba(255,255,255,.022);
  --acc: var(--p-accent-on-dark, #E2AA68);   /* caret, accent strokes, small accent text */
  --acc-text: color-mix(in srgb, var(--acc) 86%, #fff);   /* small accent words on tinted surfaces (chart deltas, glass): a touch lighter so the dimmest palette (clay) keeps 4.5:1 */
  --acc-fill: var(--p-accent, #D78B30);      /* the ONE primary button per screen */
  --on-acc: var(--p-on-accent, #000);
  --ok: #4CC27A;              /* status, always paired with a shape (check / triangle) and a word */
  --bad: #F0524A;
  --focus: var(--acc);
  --lift: 0 30px 60px -32px rgba(0,0,0,.85);
  --map-filter: none;
  --photo-filter: none;
  --ghost-word: #151615;      /* the giant pale wordmark (decoration) */

  /* ---------------------------------------------------------------- shape (measured ratios) */
  --r-card: 14px;             /* 0.035 x a 400 px card: nearly square */
  --r-tile: 12px;
  --r-glass: 18px;            /* smoky glass: 0.045 x width */
  --r-media: 16px;
  --r-field: 10px;
  --hit: 44px;                /* touch target; 36 on desktop (>= 28) */

  /* ---------------------------------------------------------------- rhythm: 4 pt */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --gutter: 16px;

  /* ---------------------------------------------------------------- motion (Emil Kowalski / Apple: fast, no bounce in UI) */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms; --t: 220ms; --t-slow: 420ms;
}
@media (min-width: 640px) { :root { --gutter: clamp(24px, 4vw, 64px); } }
@media (min-width: 1024px) { :root { --hit: 36px; } }

/* ---------------------------------------------------------------- LIGHT: the Payrix daylight twin */
@media (prefers-color-scheme: light) {
  :root {
    --ground: #EDEDED;
    --card: #FFFFFF;
    --card-2: #F5F5F5;
    --card-3: #E7E7E7;
    --sel: #D9D9D9;
    --ink: #0D0D0D;
    --ink-2: #4A4A4A;
    --ink-3: #5F5F5F;          /* 5.4:1 on ground, 6.4:1 on white */
    --grey: #7C7C7C;           /* 3.6:1 ground, 4.2:1 white: LARGE TEXT ONLY */
    --hair: #D0D0D0;
    --hair-2: #C4C4C4;
    --chart-line: #A3A3A3;
    --ref: #3A3A3A;
    --band: rgba(0,0,0,.05);
    --area: rgba(0,0,0,.02);
    --acc: var(--p-accent-on-light, #8B581B);
    --acc-text: color-mix(in srgb, var(--p-accent-on-light, #8B581B) 82%, #000);   /* hot palettes (ember, tangerine) sit at 4.5:1 exactly; this keeps margin */
    --ok: #1E7A43;
    --bad: #C0332B;
    --lift: 0 24px 50px -30px rgba(0,0,0,.28);
    --map-filter: grayscale(1) invert(1) brightness(1.06) contrast(.78);
    --photo-filter: grayscale(1) brightness(1.75) contrast(.62);
    --ghost-word: #E2E2E2;
  }
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.dc { margin: 0; min-height: 100dvh; background: var(--ground); color: var(--ink);
  font: 400 var(--t-body)/1.5 var(--f-ui); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01" 0; overflow-x: clip; }
.dc :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:where(.dc) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.dc) :where(h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd) { margin: 0; }
:where(.dc) :where(ul, ol) { padding: 0; list-style: none; }
:where(.dc) :where(a) { color: inherit; }
:where(.dc) :where(img) { display: block; max-width: 100%; }
.dc ::selection { background: var(--sel); color: var(--ink); }
.dc b, .dc strong { font-weight: 500; color: var(--ink); }
.dc svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dc-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; }
.dc-skip { position: absolute; left: var(--s2); top: -80px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
  background: var(--ink); color: var(--ground); border-radius: 999px; text-decoration: none; font-size: var(--t-small); }
.dc-skip:focus { top: var(--s2); }

/* ---------------------------------------------------------------- type */
.dc-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.dc-body { font-size: var(--t-body); line-height: 1.55; color: var(--ink-3); max-width: 62ch; }
.dc-body.lg { font-size: 1.125rem; }
.dc-cap { font-size: var(--t-cap); line-height: 1.45; color: var(--ink-3); }
.dc-meta { font: 400 var(--t-meta)/1.3 var(--f-mono); color: var(--ink-2); letter-spacing: .01em; }
.dc-eyebrow { font: 400 var(--t-meta)/1.2 var(--f-mono); color: var(--ink-3); letter-spacing: .02em; }

/* the statement: big light grey words that end in a white phrase on a selection block, with a caret */
.dc-stmt { font: 300 var(--t-stmt)/1.2 var(--f-ui); letter-spacing: -0.03em; color: var(--grey); text-wrap: pretty; max-width: 22ch; }
.dc-stmt.hero { font-size: var(--t-hero); line-height: 1.16; letter-spacing: -0.035em; max-width: 20ch; }
.dc-stmt.sm { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.dc-stmt .hl, .dc-two .hl {
  color: var(--ink); font-weight: 400; white-space: nowrap;   /* one line per highlight; for two lines use two .hl + two carets */
  padding: .04em .2em .1em .45em; margin-left: -.45em;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--sel) 55%, transparent) 30%, var(--sel) 100%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* the caret: a thin accent line with two detached square ends, like a text cursor (put it right after .hl) */
.dc-caret { display: inline-block; position: relative; width: 1.5px; height: 1.18em; margin-left: .02em; vertical-align: -.24em; background: var(--acc); }
.dc-caret::before, .dc-caret::after { content: ""; position: absolute; left: 50%; width: max(4px, .07em); height: max(4px, .07em); background: var(--acc); transform: translateX(-50%); }
.dc-caret::before { top: calc(-1 * max(4px, .07em) - .07em); }
.dc-caret::after { bottom: calc(-1 * max(4px, .07em) - .07em); }
.dc-caret.live { animation: dc-blink 1.1s steps(1) 4; }
@keyframes dc-blink { 50% { opacity: 0; } }
/* the opening quote: two short vertical ticks above the first letter */
.dc-q { display: block; width: .17em; height: .24em; margin: 0 0 .12em .04em; min-width: 9px; min-height: 13px;
  background: linear-gradient(90deg, var(--ink) 0 32%, transparent 32% 68%, var(--ink) 68%); }

/* two-tone title: a grey line, then the white line ("Smart Telemetry / Tracking Pods") */
.dc-two { font: 300 var(--t-title)/1.12 var(--f-ui); letter-spacing: -0.025em; color: var(--ink); }
.dc-two .dim { display: block; color: var(--grey); }

/* split-tone numbers: "142,580" with 580 in grey; "31.3 B" */
.dc-num { font: 300 var(--t-num-l)/1 var(--f-ui); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.dc-num.xl { font-size: var(--t-num-xl); }
.dc-num.m { font-size: var(--t-num-m); letter-spacing: -0.03em; }
.dc-num .lo { color: var(--grey); }
.dc-num .unit { font-size: max(.75rem, .3em); letter-spacing: 0; margin-left: .3em; color: var(--ink-2); font-weight: 400; }
.dc-num .sup { font-size: max(.6875rem, .28em); vertical-align: .95em; letter-spacing: 0; margin-left: .2em; color: var(--ink-2); font-weight: 400; }

/* the loud font (Druk): section openers, a hero word, a giant number, the closer. Never under 32 px, never UI */
.dc-loud { font-family: var(--f-loud); font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: max(2rem, var(--loud-size, 5rem)); line-height: .86; letter-spacing: -0.01em; color: var(--ink); }
.dc-loud.ghost { color: var(--ghost-word); user-select: none; pointer-events: none; }
.dc-closer { overflow: clip; line-height: .8; }
.dc-closer .dc-loud { display: block; font-size: 19.5vw; margin-bottom: -.17em; white-space: nowrap; }

/* ---------------------------------------------------------------- the metadata row (every screen) */
.dc-hrow { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3) var(--s5);
  min-height: 40px; padding-bottom: var(--s3); font: 400 var(--t-meta)/1.2 var(--f-mono); color: var(--ink-2); }
.dc-hrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--hair) 0 40%, transparent 40%) 0 0 / 10px 1px repeat-x; }
.dc-hrow .sq { width: 5px; height: 5px; background: var(--ink-2); }
.dc-hrow .sq.acc { background: var(--acc); }
.dc-hrow .idx { min-width: 4ch; }
.dc-hrow .name { font-family: var(--f-ui); font-size: var(--t-cap); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-hrow .name b { font-weight: 400; color: var(--ink); }
.dc-hrow .end { justify-self: end; display: flex; align-items: center; gap: var(--s3); }
@media (max-width: 639px) { .dc-hrow { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--s2) var(--s3); } .dc-hrow .name { text-align: left; } }

/* ---------------------------------------------------------------- surfaces */
.dc-card { position: relative; background: var(--card); border-radius: var(--r-card); padding: var(--s5); min-width: 0; }
@media (min-width: 1024px) { .dc-card { padding: var(--s6); } }
.dc-card.tight { padding: var(--s4); }
.dc-card.bare { background: none; padding: 0; }
.dc-card.inset { background: var(--card-2); }
a.dc-card, button.dc-card { display: block; text-decoration: none; color: inherit; text-align: left; transition: background-color var(--t) var(--ease), transform var(--t-fast) var(--ease); }
a.dc-card:hover, button.dc-card:hover { background: var(--card-2); }
a.dc-card:active, button.dc-card:active { transform: scale(.99); }
@media (prefers-color-scheme: light) { .dc-card { box-shadow: 0 1px 0 rgba(0,0,0,.03); } }

.dc-chead { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); min-width: 0; }
.dc-chead > :first-child { min-width: 0; flex: 1; }
.dc-ctitle { font: 400 var(--t-h)/1.3 var(--f-ui); color: var(--ink); letter-spacing: -0.01em; }
.dc-csub { font-size: var(--t-cap); line-height: 1.4; color: var(--ink-3); margin-top: 2px; }

/* icon button (the arrow in every card's corner) */
.dc-ibtn { width: var(--hit); height: var(--hit); flex: none; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink-2);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.dc-ibtn:hover { background: var(--card-2); color: var(--ink); }
.dc-ibtn:active { transform: scale(.94); }
.dc-ibtn.on-ground:hover { background: var(--card); }

/* the media frame: a graded photo or a map, with glass on top */
.dc-media { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--card); isolation: isolate; min-width: 0; }
.dc-media > img, .dc-media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }   /* the box gets its size from min-height, aspect-ratio or the grid row */
.dc-media.map > img { filter: var(--map-filter); }
.dc-media.photo > img { filter: var(--photo-filter); }
.dc-media.wash::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--p-glow-core, #765C2F); mix-blend-mode: color; opacity: .55; }
@media (prefers-color-scheme: light) { .dc-media.wash::after { opacity: .3; } }
.dc-media > .over { position: absolute; z-index: 2; }
.dc-media .fg-icon { color: #fff; }
@media (prefers-color-scheme: light) { .dc-media .fg-icon { color: var(--ink); background: rgba(255,255,255,.7); } }

/* smoky glass over a photo or map. The MATERIAL comes from frost-glass.css (.fg.smoke); this only sizes it and
   gives it the light-appearance twin. Use <div class="fg smoke dc-glass">. Keep data cards flat (.dc-card). */
.dc-glass { --fg-r: var(--r-glass); padding: var(--s4) var(--s5); color: #fff; }
.dc-glass .dc-ctitle, .dc-glass .dc-num { color: #fff; }
.dc-glass .dc-cap, .dc-glass .dc-csub { color: #C9C9C9; }
.dc-glass .dc-num .lo { color: #8E8E8E; }
/* .dense: thicker smoke for glass that carries a chart or small text (HIG Materials: "thicker materials, which are
   more opaque, can provide better contrast for text and other elements with fine features") */
.dc .fg.smoke.dc-glass.dense { --fg-tint: rgba(16,17,16,.74); }
.dc-glass svg.chart .dlt { color: #D2D2D2; }
@media (prefers-color-scheme: light) {
  .dc .fg.smoke.dc-glass { --fg-tint: rgba(250,250,250,.76); --fg-veil: .08; --fg-rim: .5; --fg-haze: rgba(255,255,255,.3); color: var(--ink); }
  .dc .fg.smoke.dc-glass.dense { --fg-tint: rgba(250,250,250,.88); }
  .dc-glass svg.chart .dlt { color: var(--ink-2); }
  .dc .fg.smoke.dc-glass .dc-ctitle, .dc .fg.smoke.dc-glass .dc-num { color: var(--ink); }
  .dc .fg.smoke.dc-glass .dc-cap, .dc .fg.smoke.dc-glass .dc-csub { color: var(--ink-2); }
  .dc .fg.smoke.dc-glass .dc-num .lo { color: var(--grey); }
}

/* ---------------------------------------------------------------- KPI tiles, deltas, status */
.dc-kpi { display: grid; gap: var(--s3); align-content: start; }
.dc-kpi .label { font-size: var(--t-cap); color: var(--ink-2); line-height: 1.3; }
.dc-delta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 400 var(--t-meta)/1.2 var(--f-mono); color: var(--ink-2); }
.dc-delta::before { content: ""; width: 7px; height: 6px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dc-delta.down::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.dc-delta.flat::before { height: 1.5px; clip-path: none; }
.dc-delta.attn { color: var(--acc); }
.dc-delta .vs { color: var(--ink-3); }

.dc-stat { display: flex; align-items: center; gap: var(--s3); }
.dc-stat .shape { width: 14px; height: 14px; flex: none; display: grid; place-items: center; }
.dc-stat .shape.ok { border-radius: 50%; background: var(--ok); }
.dc-stat .shape.ok::after { content: ""; width: 6px; height: 3px; border: solid var(--ground); border-width: 0 0 1.6px 1.6px; transform: translateY(-1px) rotate(-45deg); }
.dc-stat .shape.bad { background: var(--bad); clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.dc-stat .dc-num { margin-left: auto; }

.dc-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
  font: 400 var(--t-meta)/1 var(--f-ui); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair-2); }
.dc-tag.ok { color: var(--ok); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent); }
.dc-tag.bad { color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); }
.dc-tag.attn { color: var(--acc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent); }
.dc-tag.example { font-family: var(--f-mono); color: var(--ink-3); box-shadow: none; border: 1px dashed var(--hair-2); }
.dc-tag::before { content: none; }
.dc-tag.ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dc-tag.bad::before { content: ""; width: 7px; height: 6px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dc-tag.attn::before { content: ""; width: 5px; height: 5px; background: currentColor; }

/* ---------------------------------------------------------------- charts (drawn by case-charts.js) */
.dc-figure { display: grid; gap: var(--s3); min-width: 0; }
.dc-figure figcaption { font-size: var(--t-cap); color: var(--ink-3); line-height: 1.45; }
.dc-figure figcaption b { color: var(--ink); font-weight: 400; }
svg.chart { display: block; width: 100%; overflow: visible; color: var(--ink-3);
  --c-line: var(--chart-line); --c-hl: var(--ink); --c-acc: var(--acc); --c-grid: var(--hair); --c-ref: var(--ref);
  --c-band: var(--band); --c-area: var(--area); --c-axis: var(--ink-3); }
svg.chart .grid { stroke: var(--c-grid); stroke-width: 1; stroke-dasharray: 3 5; }
svg.chart .grid.dotted { stroke: var(--c-hl); stroke-opacity: .35; stroke-dasharray: 1 5; }
svg.chart .line { stroke: var(--c-line); stroke-width: 1; }
svg.chart .line.faint { stroke-opacity: .55; }
svg.chart :is(polyline, line).hl { stroke: var(--c-hl); stroke-width: 1.5; }
svg.chart :is(polyline, line).hl.soft { stroke-opacity: .4; stroke-width: 1; }
svg.chart :is(polyline, line).hl.dotted { stroke-opacity: .55; stroke-dasharray: 1 5; stroke-width: 1.5; }
svg.chart line.hl.tick { stroke-width: 2; }
svg.chart :is(polyline, line).acc { stroke: var(--c-acc); stroke-width: 1.5; }
svg.chart .ref { stroke: var(--c-ref); stroke-width: 1; stroke-dasharray: 6 5; stroke-opacity: .6; }
svg.chart .ref.target { stroke-opacity: .35; }
svg.chart .band { fill: var(--c-band); }
svg.chart .band.acc { fill: color-mix(in srgb, var(--c-acc) 12%, transparent); stroke: none; }
@media (prefers-color-scheme: light) { svg.chart .band.acc { fill: color-mix(in srgb, var(--c-acc) 7%, transparent); } }   /* keeps small accent labels at 4.5:1 for every palette */
svg.chart .area { fill: var(--c-area); }
svg.chart .dot { fill: var(--c-hl); }
svg.chart .lens { fill: var(--c-hl); fill-opacity: .12; stroke: var(--c-hl); stroke-opacity: .45; }
svg.chart .bar { fill: var(--c-line); }
svg.chart .bar.hl { fill: var(--c-hl); stroke: none; }
svg.chart .bar.acc { fill: var(--c-acc); stroke: none; }
svg.chart .base { stroke: var(--hair-2); stroke-width: 1; }
svg.chart .tick-mark { stroke: var(--c-line); stroke-width: 1; }
svg.chart .thumb { fill: var(--card-3); stroke: var(--c-hl); stroke-opacity: .5; }
/* chart text is coloured through `color` + fill: currentColor, so contrast tools read the real colour. A halo the
   colour of the surface knocks the noisy trace out from behind every label (theirs sit right on the noise) */
svg.chart { --halo: var(--ground); }
.dc-card svg.chart { --halo: var(--card); }
.dc-card.inset svg.chart { --halo: var(--card-2); }
svg.chart text { fill: currentColor; paint-order: stroke fill; stroke: var(--halo); stroke-width: 6px; stroke-linejoin: round; }
.dc-glass svg.chart text { stroke-width: 0; }
.dc-glass svg.chart .band.acc { fill: color-mix(in srgb, var(--c-acc) 7%, transparent); }
svg.chart .ax { font: 400 var(--t-axis) var(--f-mono); color: var(--c-axis); }
svg.chart .val { font: 300 .9375rem var(--f-ui); color: var(--c-hl); letter-spacing: -0.02em; }
svg.chart .dlt { font: 400 var(--t-axis) var(--f-mono); color: var(--ink-2); }
svg.chart .dlt.acc { color: var(--acc-text); }
/* draw-in (data-draw): once, on first view, 700 ms; never in the app's daily screens */
svg.chart.pending polyline.line, svg.chart.pending polyline.hl, svg.chart.pending polyline.acc { stroke-dasharray: 1; stroke-dashoffset: 1; }
svg.chart.drawing polyline.line, svg.chart.drawing polyline.hl, svg.chart.drawing polyline.acc { stroke-dasharray: 1; animation: dc-draw .7s var(--ease) both; }
svg.chart.drawing polyline.hl { animation-delay: .25s; }
@keyframes dc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.dc-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t-cap); color: var(--ink-2); }
.dc-legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.dc-legend i { width: 8px; height: 8px; flex: none; background: var(--ink); }
.dc-legend i.acc { background: var(--acc); }
.dc-legend i.line { background: var(--chart-line); }

/* ---------------------------------------------------------------- tables: tabular mono numbers, hairlines, right-aligned */
.dc-table-wrap { min-width: 0; overflow-x: auto; }
.dc-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.dc-table caption { text-align: left; }
.dc-table th { font: 400 var(--t-meta)/1.3 var(--f-ui); color: var(--ink-3); text-align: left; padding: 0 var(--s3) var(--s3); white-space: nowrap;
  background: linear-gradient(90deg, var(--hair-2) 0 40%, transparent 40%) 0 100% / 8px 1px repeat-x; }
.dc-table td { padding: var(--s3); border-bottom: 1px solid var(--hair); vertical-align: middle; color: var(--ink); }
.dc-table tr > :first-child { padding-left: 0; }
.dc-table tr > :last-child { padding-right: 0; }
.dc-table .num, .dc-table th.num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.dc-table .id { font-family: var(--f-mono); color: var(--ink-2); }
.dc-table .sub { display: block; font-size: var(--t-cap); color: var(--ink-3); }
.dc-table tbody tr { transition: background-color var(--t) var(--ease); }
.dc-table tbody tr:hover { background: color-mix(in srgb, var(--card-2) 60%, transparent); }
.dc-sort { display: inline-flex; align-items: center; gap: 4px; min-height: var(--hit); min-width: var(--hit); color: inherit; font: inherit; }
.dc-table th.num .dc-sort { justify-content: flex-end; }
.dc-sort::after { content: ""; width: 6px; height: 4px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: .6; }
th[aria-sort="ascending"] .dc-sort::after { clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: 1; }
th[aria-sort="descending"] .dc-sort::after { opacity: 1; }
/* phones: each row becomes a small stacked record (HIG: prefer a list in compact width) */
@media (max-width: 639px) {
  .dc-table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dc-table.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--hair); }
  .dc-table.stack td { border: 0; padding: 0; }
  .dc-table.stack td[data-label]::before { content: attr(data-label) "  "; font: 400 var(--t-meta) var(--f-ui); color: var(--ink-3); }
  .dc-table.stack .num { text-align: left; }
  .dc-table.stack td.end { grid-column: 2; grid-row: 1 / span 3; align-self: center; text-align: right; }
}

/* ---------------------------------------------------------------- controls */
/* pills and filter chips: the shared glass pill (.fg-pill from frost-glass.css), sized for this look */
.dc .fg-pill { min-height: var(--hit); padding: 0 var(--s4); font: 400 var(--t-small)/1 var(--f-ui); gap: var(--s2); white-space: nowrap; }
.dc .fg-pill svg.i { width: 16px; height: 16px; }
.dc .fg-pill.sm { min-height: 28px; padding: 0 var(--s3); font-size: var(--t-cap); }
.dc span.fg-pill { cursor: default; }
@media (prefers-color-scheme: light) { .dc .fg-pill { color: #3F4448; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)); box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.05); }
  .dc .fg-pill[aria-pressed="true"], .dc .fg-pill[aria-selected="true"], .dc .fg-pill.on { background: var(--ink); color: #fff; } }
.dc-chips { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }

/* underline tabs over a dashed hairline (their section rule with the short white dash) */
.dc-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--s5); position: relative; min-width: 0; }
.dc-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--hair-2) 0 40%, transparent 40%) 0 0 / 8px 1px repeat-x; }
.dc-tabs [role="tab"] { position: relative; min-height: var(--hit); min-width: var(--hit); padding: 0 2px; font: 400 var(--t-small)/1 var(--f-ui); color: var(--ink-3); transition: color var(--t) var(--ease); }
.dc-tabs [role="tab"]:hover { color: var(--ink-2); }
.dc-tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
.dc-tabs [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); z-index: 1; }

/* buttons: ONE primary (accent fill, black text) per screen; everything else ghost or quiet */
.dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--hit); padding: 0 var(--s5);
  border-radius: 999px; font: 500 var(--t-small)/1 var(--f-ui); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease); }
@media (max-width: 1023px) { .dc-btn { min-height: 48px; padding: 0 var(--s6); font-size: .9375rem; } }
.dc-btn:active { transform: scale(.97); }
.dc-btn.primary { background: var(--acc-fill); color: var(--on-acc); }
.dc-btn.primary:hover { filter: brightness(1.07); }
.dc-btn.ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.dc-btn.ghost:hover { background: var(--card-2); }
.dc-btn.quiet { color: var(--ink); background: var(--card-2); }
.dc-btn.quiet:hover { background: var(--card-3); }
.dc-btn.text { padding: 0 var(--s2); color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 4px; }
.dc-btn.text:hover { text-decoration-color: currentColor; }
.dc-btn[disabled], .dc-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.dc-btn svg.i { width: 16px; height: 16px; }

/* fields */
.dc-field { display: grid; gap: var(--s2); min-width: 0; }
.dc-field > label, .dc-field .label { font-size: var(--t-cap); color: var(--ink-2); }
.dc-input, .dc-select { width: 100%; min-height: max(var(--hit), 40px); padding: 0 var(--s4); border-radius: var(--r-field); border: 1px solid var(--hair-2);
  background: var(--card-2); color: var(--ink); font: 400 1rem/1.2 var(--f-ui); transition: border-color var(--t) var(--ease); }
.dc-input::placeholder { color: var(--ink-3); }
.dc-input:hover, .dc-select:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--hair-2)); }
.dc-input:focus-visible, .dc-select:focus-visible { border-color: var(--focus); outline-offset: 1px; }
.dc-select { appearance: none; -webkit-appearance: none; padding-right: var(--s10);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.dc-field .help { font-size: var(--t-cap); color: var(--ink-3); }
.dc-field.error .dc-input { border-color: var(--bad); }
.dc-field .msg { display: none; align-items: center; gap: var(--s2); font-size: var(--t-cap); color: var(--bad); }
.dc-field.error .msg { display: flex; }
.dc-field .msg::before { content: ""; width: 8px; height: 7px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: none; }
@media (prefers-color-scheme: light) { .dc-input, .dc-select { background-color: #fff; } }

.dc-switch { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 44px; height: 26px; border-radius: 999px; position: relative; cursor: pointer;
  background: var(--card-3); box-shadow: inset 0 0 0 1px var(--hair-2); transition: background-color var(--t) var(--ease); }
.dc-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-3);
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease); }
.dc-switch:checked { background: var(--ink); }
.dc-switch:checked::after { transform: translateX(18px); background: var(--ground); }
.dc-row { display: flex; align-items: center; gap: var(--s3); min-height: 48px; }
.dc-row .txt { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- navigation */
/* sidebar: numbered sections 01, 02 ... (their roadmap indices). Desktop only; phones get the tab bar */
.dc-side { display: none; }
@media (min-width: 1024px) {
  .dc-side { display: flex; flex-direction: column; gap: var(--s6); position: sticky; top: 0; height: 100dvh; padding: var(--s6) var(--s4) var(--s6) var(--s6); }
}
.dc-brand { display: flex; align-items: center; gap: var(--s3); font: 400 1.0625rem/1 var(--f-ui); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; min-height: var(--hit); }
.dc-mark { width: 22px; height: 22px; flex: none; color: var(--ink); }
.dc-nav { display: grid; gap: 2px; }
.dc-nav-h { font: 400 var(--t-axis)/1 var(--f-mono); color: var(--ink-3); padding: var(--s4) var(--s3) var(--s2); letter-spacing: .02em; }
.dc-nav a { display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: 0 var(--s3); border-radius: 10px; text-decoration: none;
  font-size: var(--t-small); color: var(--ink-2); transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.dc-nav a .n { font: 400 var(--t-meta)/1 var(--f-mono); color: var(--ink-3); min-width: 2.2ch; }
.dc-nav a:hover { background: var(--card); color: var(--ink); }
.dc-nav a[aria-current="page"] { background: var(--card); color: var(--ink); }
.dc-nav a[aria-current="page"] .n { color: var(--acc); }
.dc-nav a .count { margin-left: auto; font: 400 var(--t-meta)/1 var(--f-mono); color: var(--ink-3); }

/* phone tab bar: a floating smoky capsule; the current tab is a white disc (Vexto's phone) */
.dc-tabbar { position: fixed; z-index: 30; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: 2px; padding: 6px; --fg-r: 999px; border-radius: 999px; }
.dc-tabbar a { display: grid; justify-items: center; gap: 2px; min-width: 60px; min-height: 52px; padding: 4px 6px 2px; border-radius: 22px; text-decoration: none; color: #DADADA; font: 400 var(--t-axis)/1.1 var(--f-ui); }
.dc-tabbar a .disc { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; transition: background-color var(--t) var(--ease); }
.dc-tabbar a[aria-current="page"] { color: #fff; }
.dc-tabbar a[aria-current="page"] .disc { background: #fff; color: #0C0D0C; }
@media (prefers-color-scheme: light) { .dc .dc-tabbar.fg.smoke { --fg-tint: rgba(250,250,250,.72); }
  .dc-tabbar a { color: #3A3A3A; } .dc-tabbar a[aria-current="page"] { color: #0D0D0D; } .dc-tabbar a[aria-current="page"] .disc { background: #0D0D0D; color: #fff; } }
@media (min-width: 1024px) { .dc-tabbar { display: none; } }

/* command bar: looks like a field, opens the palette (Ctrl/Cmd + K) */
.dc-cmd { display: inline-flex; align-items: center; gap: var(--s3); min-height: var(--hit); min-width: 0; padding: 0 var(--s2) 0 var(--s4); border-radius: 999px;
  background: var(--card); color: var(--ink-3); font-size: var(--t-small); text-align: left; transition: background-color var(--t) var(--ease); }
.dc-cmd:hover { background: var(--card-2); }
.dc-cmd .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-kbd { font: 400 var(--t-axis)/1 var(--f-mono); color: var(--ink-2); padding: 5px 7px; border-radius: 6px; background: var(--card-3); white-space: nowrap; }
.dc-palette { width: min(640px, calc(100vw - 32px)); max-height: min(560px, 80dvh); margin: 12dvh auto auto; padding: 0; border: 0; border-radius: 18px;
  background: var(--card); color: var(--ink); box-shadow: var(--lift), 0 0 0 1px var(--hair-2); overflow: hidden; }
.dc-palette::backdrop { background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dc-palette[open] { animation: dc-pop var(--t) var(--ease); }
@keyframes dc-pop { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.dc-palette .top { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--hair); }
.dc-palette input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; color: var(--ink); font: 300 1.25rem/1.2 var(--f-ui); letter-spacing: -0.01em; }
.dc-palette input:focus-visible { outline: none; }
.dc-palette .list { padding: var(--s2); overflow: auto; max-height: 420px; }
.dc-palette .group { font: 400 var(--t-axis)/1 var(--f-mono); color: var(--ink-3); padding: var(--s3) var(--s3) var(--s2); }
.dc-res { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px; padding: 0 var(--s3); border-radius: 10px; color: var(--ink); text-align: left; font-size: var(--t-small); }
.dc-res:hover, .dc-res[aria-selected="true"] { background: var(--card-2); }
.dc-res .hint { margin-left: auto; font: 400 var(--t-axis)/1 var(--f-mono); color: var(--ink-3); }

/* ---------------------------------------------------------------- feedback */
.dc-toast { position: fixed; z-index: 40; left: 50%; bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px)); width: min(440px, calc(100vw - 32px));
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: 14px;
  background: var(--card-3); color: var(--ink); box-shadow: var(--lift); font-size: var(--t-small);
  transform: translate(-50%, 12px); opacity: 0; visibility: hidden; transition: transform var(--t-slow) var(--ease), opacity var(--t) var(--ease), visibility 0s linear var(--t-slow); }
.dc-toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform var(--t-slow) var(--ease), opacity var(--t) var(--ease), visibility 0s; }
.dc-toast .sq { width: 6px; height: 6px; background: var(--acc); flex: none; }
.dc-toast .txt { flex: 1; min-width: 0; }
@media (min-width: 1024px) { .dc-toast { left: auto; right: var(--s6); bottom: var(--s6); transform: translateY(12px); } .dc-toast.show { transform: none; } }
@media (prefers-color-scheme: light) { .dc-toast { background: #0D0D0D; color: #fff; } .dc-toast .dc-btn.text { color: #fff; } }

/* empty state: a statement, not an illustration */
.dc-empty { display: grid; gap: var(--s4); justify-items: start; padding: var(--s6) 0; }
.dc-empty .dc-stmt { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); max-width: 18ch; }

/* ---------------------------------------------------------------- case-study parts */
/* key-value rows (their "Typographic Styles | We created a versatile ..."): a short white dash over the label,
   an accent rule over the text, a dashed hairline across */
.dc-kv { display: grid; gap: 0; }
.dc-kv > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s6) 0 var(--s8); position: relative; }
.dc-kv > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--hair) 0 40%, transparent 40%) 0 0 / 8px 1px repeat-x; }
.dc-kv dt { font-size: var(--t-small); color: var(--ink); position: relative; padding-top: var(--s3); }
.dc-kv dt::before { content: ""; position: absolute; left: 0; top: -24px; width: 24px; height: 1.5px; background: var(--ink); }
.dc-kv dd { font-size: var(--t-small); line-height: 1.55; color: var(--ink-3); max-width: 46ch; position: relative; }
@media (min-width: 640px) {
  .dc-kv > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s8); }
  .dc-kv dd::before { content: ""; position: absolute; left: 0; top: -24px; width: min(120px, 40%); height: 1.5px; background: var(--acc); }
}

/* roadmap 01 / 02 / 03: a phase pill, a big light number on a bar that fades in from the left, an accent caret */
.dc-road { display: grid; gap: var(--s8); counter-reset: none; }
@media (min-width: 900px) { .dc-road { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.dc-road .step { display: grid; gap: var(--s4); align-content: start; justify-items: start; min-width: 0; }
.dc-road .bar { justify-self: stretch; }
.dc-road .bar { position: relative; display: flex; align-items: center; min-height: 72px; padding-left: var(--s5);
  background: linear-gradient(90deg, transparent, var(--sel)); }
.dc-road .bar .dc-num { font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); position: relative; }
.dc-road .bar .dc-num::before { content: ""; position: absolute; left: -14px; top: .08em; width: 5px; height: 5px; background: var(--acc); }
.dc-road .bar::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1.5px; background: var(--acc); }
.dc-road .step.done .bar::after { display: none; }
.dc-road .desc { font-size: var(--t-small); line-height: 1.55; color: var(--ink-3); max-width: 30ch; }

/* sprint ruler with nodes and "We are here" (their slide 15). Horizontal from 900 px, vertical on phones */
.dc-ruler { position: relative; display: grid; gap: var(--s4); padding-top: 56px; }
.dc-ruler .track { position: relative; height: 56px; border-block: 1px dashed var(--hair-2);
  background: repeating-linear-gradient(90deg, var(--hair-2) 0 1px, transparent 1px 9px) 0 50% / 100% 22px no-repeat; }
.dc-ruler .done { position: absolute; left: 0; top: 0; bottom: 0; width: var(--at, 60%); background: linear-gradient(90deg, transparent, var(--band)); }
.dc-ruler .node { position: absolute; top: 50%; left: var(--x); width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--card-3); display: grid; place-items: center; }
.dc-ruler .node::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.dc-ruler .node.next { background: var(--card); box-shadow: inset 0 0 0 1px var(--hair-2); }
.dc-ruler .node.next::after { background: var(--ink-3); }
.dc-ruler .here { position: absolute; z-index: 1; left: var(--at, 60%); top: 0; transform: translateX(-50%); }
.dc-here { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s4); border-radius: 999px; white-space: nowrap;
  font: 400 var(--t-small)/1 var(--f-ui); color: var(--acc); background: var(--card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent), 0 0 24px -6px color-mix(in srgb, var(--acc) 45%, transparent); }
.dc-ruler .here::after { content: ""; position: absolute; left: 50%; top: 100%; height: 82px; border-left: 1px dashed var(--ink-3); z-index: -1; }
/* labels sit at their node's x (style="--x:34%"); the first one without --x is the row's name */
.dc-ruler .labels { position: relative; height: 14px; font: 400 var(--t-axis)/1 var(--f-mono); color: var(--ink-3); }
.dc-ruler .labels span { position: absolute; left: var(--x, 0); transform: translateX(-50%); white-space: nowrap; }
.dc-ruler .labels span:first-child { transform: none; }
@media (max-width: 639px) { .dc-ruler .labels span:first-child { display: none; } }

/* testimonial */
.dc-quote { display: grid; gap: var(--s5); align-content: start; }
.dc-portrait { width: 112px; aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden; background: var(--card-2); display: grid; place-items: center;
  font: 300 2.5rem/1 var(--f-ui); letter-spacing: -0.04em; color: var(--ink-2); }
.dc-portrait img { width: 100%; height: 100%; object-fit: cover; }
.dc-quote blockquote { font: 400 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.5 var(--f-ui); color: var(--ink-3); letter-spacing: -0.01em; max-width: 36ch; }
.dc-quote blockquote b { font-weight: 400; color: var(--ink); }
.dc-quote .who { display: flex; align-items: baseline; gap: var(--s3); }
.dc-quote .who p { font-size: var(--t-body); color: var(--ink); }
.dc-quote .who span { display: block; font-size: var(--t-cap); color: var(--ink-3); }
.dc-dots { display: inline-flex; gap: 5px; align-items: center; }
.dc-dots i { width: 4px; height: 4px; background: var(--acc); }
.dc-dots i + i { opacity: .7; }

/* type specimen */
.dc-spec .name { font: 300 clamp(3rem, 1.6rem + 6vw, 8rem)/1 var(--f-ui); letter-spacing: -0.045em; color: var(--ink); }
.dc-spec .name.mono { font-family: var(--f-mono); font-weight: 300; letter-spacing: -0.04em; }
.dc-weights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.dc-weights > div { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--hair); min-width: 0; font-size: var(--t-small); color: var(--ink-2); }
.dc-weights > div + div { border-left: 1px dashed var(--hair); padding-left: var(--s3); }
.dc-weights .k { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card-2); font: 400 var(--t-meta)/1 var(--f-mono); color: var(--ink-2); }

/* logo construction: dashed guides and measured spacing */
.dc-construct { position: relative; display: grid; place-items: center; min-height: 320px; overflow: hidden; }
.dc-construct .lockup { position: relative; }
.dc-construct .g { position: absolute; border: 0 dashed var(--hair-2); pointer-events: none; }
.dc-construct .g.h { left: -100vw; right: -100vw; border-top-width: 1px; }
.dc-construct .g.v { top: -100vh; bottom: -100vh; border-left-width: 1px; }
.dc-construct .m { position: absolute; font: 400 var(--t-axis)/1 var(--f-mono); color: var(--ink-3); white-space: nowrap; }
/* .ma anchors a pair of labels at a guide; it inherits the logo's font size, so em offsets match the mark */
.dc-construct .ma { position: absolute; top: 0; bottom: 0; width: 0; }
.dc-construct .ma .m.t { left: 6px; top: -26px; }
.dc-construct .ma .m.b { left: 6px; bottom: -26px; }
.dc-construct .corner { position: absolute; font-size: var(--t-cap); color: var(--ink-3); }

/* devices: a CSS frame around a real screenshot of the product */
.dc-device { position: relative; background: #0A0A0B; padding: 1.6%; border-radius: 4.2% / 6%;
  box-shadow: inset 0 0 0 1.5px #4A4A4D, inset 0 0 0 3px #1A1A1C, var(--lift); }
.dc-device picture { display: block; }
.dc-device img { width: 100%; height: auto; border-radius: 2.8% / 4.2%; display: block; }
.dc-device.phone { padding: 2.6%; border-radius: 15% / 7%; }
.dc-device.phone img { border-radius: 12.5% / 5.8%; }
.dc-device.tilt { transform: perspective(1600px) rotateX(10deg) rotateY(-16deg) rotateZ(3deg); transform-origin: 60% 50%; }

/* merch: an ID badge and a stack of business cards, built in CSS */
.dc-badge { position: relative; width: min(260px, 70%); margin: 0 auto; background: #141514; color: #fff; border-radius: 16px; padding: var(--s4); display: grid; gap: var(--s3);
  box-shadow: var(--lift), inset 0 0 0 1px #2A2B2A; }
.dc-badge::before { content: ""; position: absolute; left: 50%; top: -46px; width: 22px; height: 52px; margin-left: -11px; border-radius: 6px 6px 0 0; background: linear-gradient(#2A2A2C, #121213); }
.dc-badge .slot { width: 46px; height: 6px; border-radius: 3px; background: var(--ground); margin: 0 auto; }
.dc-badge .pic { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #222; }
.dc-badge .pic img { width: 100%; height: 100%; object-fit: cover; }
.dc-badge .row { display: flex; justify-content: space-between; gap: var(--s3); font: 400 var(--t-axis)/1.4 var(--f-mono); color: #A9A9A9; }
.dc-badge .nm { font: 300 1.5rem/1.05 var(--f-ui); letter-spacing: -0.03em; color: #fff; }
.dc-bcards { position: relative; height: 300px; }
.dc-bcard { position: absolute; width: 230px; aspect-ratio: 1.75; border-radius: 6px; background: #131413; color: #fff; padding: var(--s4); box-shadow: 0 30px 40px -24px rgba(0,0,0,.8), inset 0 0 0 1px #262726;
  display: grid; align-content: space-between; }
.dc-bcard .dc-loud { --loud-size: 2.25rem; color: #EDEDED; }
.dc-bcard .dc-meta { color: #A9A9A9; }

/* ---------------------------------------------------------------- layout */
.dc-wrap { width: 100%; max-width: 1600px; margin: 0 auto; padding-inline: var(--gutter); }
.dc-sec { padding-block: clamp(64px, 9vw, 152px); }
.dc-sec.tight { padding-block: clamp(40px, 5vw, 80px); }
.dc-stack { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.dc-stack.lg { gap: var(--s8); }
.dc-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s6); min-width: 0; }
/* 12 columns on desktop, 6 on tablets, 1 on phones */
.dc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.dc-grid > * { min-width: 0; }
.dc-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .dc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dc-grid > * { grid-column: auto / span 6; }
  .dc-grid > .c-2, .dc-grid > .c-3, .dc-grid > .c-4 { grid-column: auto / span 3; }
}
@media (min-width: 1024px) {
  .dc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); }
  .dc-grid > * { grid-column: auto / span 12; }
  .dc-grid > .c-2 { grid-column: auto / span 2; } .dc-grid > .c-3 { grid-column: auto / span 3; } .dc-grid > .c-4 { grid-column: auto / span 4; }
  .dc-grid > .c-5 { grid-column: auto / span 5; } .dc-grid > .c-6 { grid-column: auto / span 6; } .dc-grid > .c-7 { grid-column: auto / span 7; }
  .dc-grid > .c-8 { grid-column: auto / span 8; } .dc-grid > .c-9 { grid-column: auto / span 9; }
  .dc-grid > .s-2 { grid-column-start: 2; } .dc-grid > .s-5 { grid-column-start: 5; } .dc-grid > .s-6 { grid-column-start: 6; } .dc-grid > .s-7 { grid-column-start: 7; }
}

/* app shell: sidebar + main on desktop; main + tab bar on phones */
.dc-app { display: block; }
@media (min-width: 1024px) { .dc-app { display: grid; grid-template-columns: 236px minmax(0, 1fr); } }
.dc-main { min-width: 0; padding: max(var(--s4), env(safe-area-inset-top)) var(--gutter) 120px; display: grid; gap: var(--s5); align-content: start; }
@media (min-width: 1024px) { .dc-main { padding: var(--s6) var(--s8) var(--s12) var(--s4); gap: var(--s6); } }
.dc-topbar { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.dc-topbar > .grow { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- the user's settings */
@media (prefers-reduced-motion: reduce) {
  /* no transitions at all: a 1 ms one still fires late and breaks code that measures text and then resizes it (found by the Neocheck build, 2026-10-05) */
  .dc *, .dc *::before, .dc *::after { animation: none !important; transition: none !important; }
  .dc-btn:active, .dc-ibtn:active, a.dc-card:active { transform: none; }
  svg.chart.pending polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .dc .fg.smoke.dc-glass, .dc .dc-tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card); color: var(--ink); }
  .dc .fg.smoke.dc-glass .dc-ctitle, .dc .fg.smoke.dc-glass .dc-num { color: var(--ink); }
  .dc-palette::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0,0,0,.75); }
}
@media (prefers-contrast: more) {
  :root { --grey: var(--ink-2); --ink-3: var(--ink-2); --hair: var(--hair-2); }
  .dc-card, .dc-media, .dc-cmd, .dc-input { box-shadow: inset 0 0 0 1px var(--ink-3); }
  .dc-stmt .hl { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
}
@media (forced-colors: active) {
  .dc-caret, .dc-caret::before, .dc-caret::after, .dc-hrow .sq, .dc-legend i { background: CanvasText; forced-color-adjust: none; }
}

/* ---------------------------------------------------------------- Savr: strictly black and white */
/* data-palette="mono": the white accent replaces orange; status is shape + luminance, never hue */
html[data-palette="mono"] { --ok: var(--ink); --bad: var(--ink); }
html[data-palette="mono"] .dc-delta.attn, html[data-palette="mono"] .dc-tag.attn { color: var(--ink); }
@media (prefers-color-scheme: light) { html[data-palette="mono"] { --acc-fill: #0E0E12; --on-acc: #FFFFFF; --acc: #0E0E12; } }