/* RupeeCase Derivatives and Quant School (Learn): styles. Built on the kit tokens (styles.css) and the Learn tokens
   (learn.css): --page, --page-2, --page-text, --page-muted, --page-faint, --page-line and the path colour --c.
   Light default, dark through html[data-theme="dark"], the same switch as learn.css and vis.css.
   Sections: 1. chart kit (instiv2-tools/derivatives/charts.mjs). Later sections (hub, module page, quiz) are added below
   by their own tasks, each under its own numbered banner.
   Rules: no inline styles in the markup, every colour comes from a token, navy is never a text colour, nothing under
   12 px on a phone, no animation. */

/* ===================================================================================================================
   1. chart kit
   =================================================================================================================== */
.dv-fig {
  --dv-c1: var(--c, #2F6FE0); --dv-c2: rgba(11,18,32,.40); --dv-c3: #087553; --dv-c4: #B45309; --dv-c5: #6D3FC9; --dv-c6: #0E7490;
  --dv-gain: #087553; --dv-loss: #C0352B;
  --dv-mono: var(--mono, "Azeret Mono", "JBM Fallback", ui-monospace, monospace);
  --dv-sans: Inter, "Inter Fallback", system-ui, -apple-system, sans-serif;
}
html[data-theme="dark"] .dv-fig {
  --dv-c2: rgba(226,233,246,.46); --dv-c3: #4BD9A0; --dv-c4: #F2B35C; --dv-c5: #B59CF6; --dv-c6: #5FD0E6;
  --dv-gain: #4BD9A0; --dv-loss: #FF8A8A;
}
/* the card (doubled class beats .lm-body figure and .lm-body figcaption from learn.css) */
.dv-fig.dv-fig {
  margin: 1.8em 0; padding: 16px 6px 14px; background: var(--page-2); border: 1px solid var(--page-line); border-radius: 18px;
  color: var(--page-text); container-type: inline-size; container-name: dvf; overflow-wrap: normal;
}
.dv-fig .dv-fig-t { margin: 0 8px 10px; padding: 0; font-size: 17px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; color: var(--page-text); }
.dv-fig > figcaption { margin: 10px 8px 0; font-size: 14px; line-height: 1.5; color: var(--page-muted); }
.dv-fig .dv-src { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--page-faint); }
/* a chart computed from a model, not drawn from market data: a tag above the title and the inputs in the caption */
.dv-fig .dv-model-tag { display: inline-block; margin: 0 8px 8px; padding: 3px 10px; border: 1px solid var(--page-faint); border-radius: 999px; font: 600 12px/1.4 var(--dv-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--page-text); }
.dv-fig .dv-model-in { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--page-muted); }
@media (min-width: 720px) { .dv-fig .dv-model-tag { margin-left: 4px; margin-right: 4px; } }
@media (min-width: 720px) { .dv-fig.dv-fig { padding: 20px 20px 16px; } .dv-fig .dv-fig-t, .dv-fig > figcaption { margin-left: 4px; margin-right: 4px; } }

/* svg frame: 360 units wide, never wider than 720 px; text sizes step down as the container grows so the type
   stays about 12 to 14 px on screen (the svg is scaled, the user unit is not a pixel) */
.dv-svg { --dv-fs: 13px; display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; overflow: visible; }
@container dvf (min-width: 400px) { .dv-svg { --dv-fs: 11px; } }
@container dvf (min-width: 470px) { .dv-svg { --dv-fs: 9.6px; } }
@container dvf (min-width: 560px) { .dv-svg { --dv-fs: 8.2px; } }

/* series tones: one custom property, read by lines, fills, bars, dots and labels */
.dv-t-c1 { --sc: var(--dv-c1); } .dv-t-c2 { --sc: var(--dv-c2); } .dv-t-c3 { --sc: var(--dv-c3); } .dv-t-c4 { --sc: var(--dv-c4); }
.dv-t-c5 { --sc: var(--dv-c5); } .dv-t-c6 { --sc: var(--dv-c6); } .dv-t-g { --sc: var(--dv-gain); } .dv-t-l { --sc: var(--dv-loss); }
.dv-t-m { --sc: var(--dv-c2); }

/* text (the .dv-svg prefix beats the generic svg text fill in learn.css) */
.dv-svg .dv-tx { fill: var(--page-faint); font: 500 var(--dv-fs) var(--dv-mono); font-variant-numeric: tabular-nums; }
.dv-svg .dv-lb { fill: var(--page-text); font: 500 var(--dv-fs) var(--dv-sans); }
.dv-svg .dv-muted { fill: var(--page-muted); }
.dv-svg .dv-strong { font-weight: 650; }
.dv-svg .dv-val { fill: var(--page-text); font-weight: 600; }
.dv-svg .dv-lb[class*="dv-t-"] { fill: var(--sc); font-weight: 600; }
.dv-svg .dv-halo { paint-order: stroke fill; stroke: var(--page-2); stroke-width: 3.2px; stroke-linejoin: round; }

/* axes, grid, zones */
.dv-svg .dv-grid { stroke: var(--page-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dv-svg .dv-zero { stroke: var(--page-faint); stroke-width: 1.4; }
.dv-svg .dv-axis { stroke: var(--page-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dv-svg .dv-tick { stroke: var(--page-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dv-svg .dv-zone { fill: var(--page-text); fill-opacity: .04; }
.dv-svg .dv-zone[class*="dv-t-"] { fill: var(--sc); fill-opacity: .08; }
.dv-svg .dv-ref { stroke: var(--page-faint); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.dv-svg .dv-ref[class*="dv-t-"] { stroke: var(--sc); }

/* lines, points, dots */
.dv-svg .dv-ln { fill: none; stroke: var(--sc, var(--dv-c1)); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dv-svg .dv-ln.dv-heavy { stroke-width: 2.6px; }
.dv-svg .dv-ln.dv-thin { stroke-width: 1.4px; }
.dv-svg .dv-dash { stroke-dasharray: 6 4; }
.dv-svg .dv-pt { fill: var(--page-2); stroke: var(--sc); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.dv-svg .dv-dot { fill: var(--sc, var(--dv-c1)); stroke: var(--page-2); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.dv-svg .dv-dot.dv-hollow { fill: var(--page-2); stroke: var(--sc); stroke-width: 2.2px; }

/* areas, fills, bars */
.dv-svg .dv-area { fill: var(--sc); fill-opacity: .14; stroke: none; }
.dv-svg .dv-fill { fill: var(--sc); fill-opacity: .12; stroke: none; }
.dv-svg .dv-fill.dv-fill-2 { fill-opacity: .22; }
.dv-svg .dv-bar { fill: var(--sc); fill-opacity: .88; stroke: none; }
.dv-svg .dv-lgbox { fill: var(--sc); fill-opacity: .55; stroke: var(--sc); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.dv-svg .dv-lgbox.dv-lg-add { fill-opacity: .85; }
.dv-svg .dv-lgbox.dv-lg-rem { fill: none; stroke-dasharray: 3 2; }
html[data-theme="dark"] .dv-svg .dv-area { fill-opacity: .2; }
html[data-theme="dark"] .dv-svg .dv-fill { fill-opacity: .2; }
html[data-theme="dark"] .dv-svg .dv-fill.dv-fill-2 { fill-opacity: .36; }

/* marks: spot, breakeven, flip level, walls */
.dv-svg .dv-mk { stroke: var(--page-muted); stroke-width: 1.2px; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.dv-svg .dv-mk-be { stroke-dasharray: 2 3; }
.dv-svg .dv-mk-wall { stroke-dasharray: 2 3; }
.dv-svg .dv-mk-flip { stroke: var(--dv-c4); }
.dv-svg .dv-mk[class*="dv-t-"] { stroke: var(--sc); }

/* open interest butterfly */
.dv-svg .dv-oib { fill: var(--sc); fill-opacity: .26; stroke: var(--sc); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.dv-svg .dv-oib.dv-oi-add { fill-opacity: .7; }
.dv-svg .dv-oib.dv-oi-rem { fill: none; stroke-dasharray: 3 2; }
.dv-svg .dv-tx.dv-in { fill: var(--page-text); }
/* a bar chart's value text set inside the end of its bar: the page ground colour reads on every tone, light and dark */
.dv-svg .dv-tx.dv-onbar { fill: var(--page-2); }

/* flow diagram */
.dv-svg .dv-node { fill: var(--page-2); stroke: var(--page-faint); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.dv-svg .dv-node[class*="dv-t-"] { fill: color-mix(in srgb, var(--sc) 11%, var(--page-2)); stroke: var(--sc); }
.dv-svg .dv-edge { fill: none; stroke: var(--page-muted); stroke-width: 1.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dv-svg .dv-arrowhead { fill: var(--page-muted); stroke: none; }

/* shared HTML parts */
.dv-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dv-fig .dv-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px;
  /* soft edges show that the table scrolls: a shadow at each end that fades once you reach it */
  background:
    linear-gradient(to right, var(--page-2) 30%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--page-2) 30%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--page-text) 16%, transparent), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--page-text) 16%, transparent), transparent) right center / 12px 100% no-repeat scroll;
}
.dv-fig .dv-scroll:focus-visible { outline: 2px solid var(--focus, var(--dv-c1)); outline-offset: 2px; }
.dv-fig .dv-note { margin: 10px 8px 0; font-size: 13px; line-height: 1.45; color: var(--page-muted); }

/* option chain and scenario grid: the learn.css table rules are beaten by prefixing .dv-fig and :nth-child(n) */
.dv-fig table.dv-chain, .dv-fig table.dv-sg { width: 100%; min-width: 0; margin: 0; border-collapse: collapse; font: 500 13px/1.25 var(--dv-mono); font-variant-numeric: tabular-nums; overflow-wrap: normal; word-break: normal; }
.dv-fig .dv-chain thead tr, .dv-fig .dv-chain thead th, .dv-fig .dv-sg thead tr, .dv-fig .dv-sg thead th { background: none; }
.dv-fig .dv-chain th, .dv-fig .dv-chain td, .dv-fig .dv-sg th, .dv-fig .dv-sg td {
  min-width: 0; padding: 8px 4px; border-bottom: 1px solid var(--page-line); text-align: right; white-space: nowrap; vertical-align: middle;
  font: 500 13px/1.25 var(--dv-mono); letter-spacing: 0; text-transform: none; color: var(--page-text);
}
.dv-fig .dv-chain tbody tr:nth-child(n) td, .dv-fig .dv-chain tbody tr:nth-child(n) th, .dv-fig .dv-sg tbody tr:nth-child(n) td { background-color: transparent; }
.dv-fig .dv-chain tbody tr:last-child td, .dv-fig .dv-chain tbody tr:last-child th, .dv-fig .dv-sg tbody tr:last-child td, .dv-fig .dv-sg tbody tr:last-child th { border-bottom: 0; }
.dv-fig .dv-chain th.dv-ch, .dv-fig .dv-sg th.dv-ch { font-size: 12px; font-weight: 600; color: var(--page-muted); border-bottom: 1px solid var(--page-faint); }
.dv-fig .dv-chain th.dv-gh, .dv-fig .dv-sg th.dv-gh { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--page-muted); border-bottom: 0; padding-bottom: 2px; }
.dv-fig .dv-chain th.dv-gh-c { box-shadow: inset 0 -2px 0 var(--dv-c1); }
.dv-fig .dv-chain th.dv-gh-p { box-shadow: inset 0 -2px 0 var(--dv-c4); }
.dv-fig .dv-chain th.dv-sk { text-align: center; font-weight: 650; background-color: transparent; border-left: 1px solid var(--page-line); border-right: 1px solid var(--page-line); }
.dv-fig .dv-chain thead th.dv-sk { vertical-align: bottom; font-size: 12px; font-weight: 600; color: var(--page-muted); border-bottom: 1px solid var(--page-faint); }
.dv-fig .dv-chain tbody tr:nth-child(n) td.dv-itm { background-color: color-mix(in srgb, var(--dv-c1) 8%, transparent); }
.dv-fig .dv-chain tr.dv-atm td, .dv-fig .dv-chain tr.dv-atm th { border-top: 1.5px solid var(--dv-c1); border-bottom: 1.5px solid var(--dv-c1); }
.dv-fig .dv-chain tr.dv-atm th.dv-sk { font-weight: 750; }
.dv-fig .dv-chain .dv-tag { display: block; margin-top: 2px; font: 700 12px/1.2 var(--dv-sans); letter-spacing: .04em; color: var(--dv-c1); }
.dv-fig .dv-chain .dv-tag.dv-tag-2 { color: var(--page-muted); font-weight: 600; letter-spacing: 0; }
html[data-theme="dark"] .dv-fig .dv-chain .dv-tag { color: var(--page-text); }
.dv-fig .dv-chain td.dv-oi-c { background-image: linear-gradient(to left, color-mix(in srgb, var(--dv-c1) 26%, transparent) var(--w, 0%), transparent var(--w, 0%)); }
.dv-fig .dv-chain td.dv-oi-p { background-image: linear-gradient(to right, color-mix(in srgb, var(--dv-c4) 26%, transparent) var(--w, 0%), transparent var(--w, 0%)); }
.dv-fig .dv-chain td.dv-max { font-weight: 750; box-shadow: inset 0 0 0 1.5px var(--page-text); }
.dv-fig .dv-chain tr.dv-spotrow td { position: relative; height: 24px; padding: 0; text-align: center; border: 0; background: none; }
.dv-fig .dv-chain tr.dv-spotrow td::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--page-muted); }
.dv-fig .dv-chain tr.dv-spotrow span { position: relative; padding: 0 8px; background: var(--page-2); font: 600 12px/1 var(--dv-sans); color: var(--page-text); }
.dv-w0 { --w: 0%; } .dv-w1 { --w: 5%; } .dv-w2 { --w: 10%; } .dv-w3 { --w: 15%; } .dv-w4 { --w: 20%; } .dv-w5 { --w: 25%; } .dv-w6 { --w: 30%; }
.dv-w7 { --w: 35%; } .dv-w8 { --w: 40%; } .dv-w9 { --w: 45%; } .dv-w10 { --w: 50%; } .dv-w11 { --w: 55%; } .dv-w12 { --w: 60%; } .dv-w13 { --w: 65%; }
.dv-w14 { --w: 70%; } .dv-w15 { --w: 75%; } .dv-w16 { --w: 80%; } .dv-w17 { --w: 85%; } .dv-w18 { --w: 90%; } .dv-w19 { --w: 95%; } .dv-w20 { --w: 100%; }
/* chain on a phone: with three or more columns a side the table is wider than the card (393 units for three, about 108 more
   for each further one). Below the card widths here only the strike, the OI and the price of each side stay (the ATM tag
   sits in the strike column); the rest comes back through "Show all columns", a details element placed before the table
   (charts.mjs chainTable), so the toggle needs no script. The card is the dvf container; one threshold per column count (the chain has five column kinds at most). */
.dv-fig .dv-allcols { display: none; margin: 0 8px 8px; }
.dv-fig .dv-gcomp { display: none; }
.dv-fig .dv-allcols summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--page-faint); border-radius: 999px; font: 600 13.5px/1 var(--dv-sans); color: var(--page-text); cursor: pointer; list-style: none; }
.dv-fig .dv-allcols summary::-webkit-details-marker { display: none; }
.dv-fig .dv-allcols summary:focus-visible { outline: 2px solid var(--focus, var(--dv-c1)); outline-offset: 2px; }
.dv-fig .dv-allcols .dv-ac-off, .dv-fig .dv-allcols[open] .dv-ac-on { display: none; }
.dv-fig .dv-allcols[open] .dv-ac-off { display: inline; }
@container dvf (max-width: 419px) {
  .dv-fig .dv-cn3 .dv-allcols { display: inline-flex; }
  .dv-fig .dv-cn3 .dv-xs, .dv-fig .dv-cn3 .dv-gfull { display: none; }
  .dv-fig .dv-cn3 .dv-gcomp { display: table-cell; }
  .dv-fig .dv-cn3 .dv-allcols[open] ~ .dv-scroll .dv-xs, .dv-fig .dv-cn3 .dv-allcols[open] ~ .dv-scroll .dv-gfull { display: table-cell; }
  .dv-fig .dv-cn3 .dv-allcols[open] ~ .dv-scroll .dv-gcomp { display: none; }
}
@container dvf (max-width: 529px) {
  .dv-fig .dv-cn4 .dv-allcols { display: inline-flex; }
  .dv-fig .dv-cn4 .dv-xs, .dv-fig .dv-cn4 .dv-gfull { display: none; }
  .dv-fig .dv-cn4 .dv-gcomp { display: table-cell; }
  .dv-fig .dv-cn4 .dv-allcols[open] ~ .dv-scroll .dv-xs, .dv-fig .dv-cn4 .dv-allcols[open] ~ .dv-scroll .dv-gfull { display: table-cell; }
  .dv-fig .dv-cn4 .dv-allcols[open] ~ .dv-scroll .dv-gcomp { display: none; }
}
@container dvf (max-width: 639px) {
  .dv-fig .dv-cn5 .dv-allcols { display: inline-flex; }
  .dv-fig .dv-cn5 .dv-xs, .dv-fig .dv-cn5 .dv-gfull { display: none; }
  .dv-fig .dv-cn5 .dv-gcomp { display: table-cell; }
  .dv-fig .dv-cn5 .dv-allcols[open] ~ .dv-scroll .dv-xs, .dv-fig .dv-cn5 .dv-allcols[open] ~ .dv-scroll .dv-gfull { display: table-cell; }
  .dv-fig .dv-cn5 .dv-allcols[open] ~ .dv-scroll .dv-gcomp { display: none; }
}

/* scenario grid */
.dv-fig .dv-sg th.dv-rh { text-align: left; font-weight: 600; color: var(--page-muted); padding-left: 8px; }
.dv-fig .dv-sg th.dv-corner { text-align: left; vertical-align: bottom; white-space: normal; font-family: var(--dv-sans); font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--page-muted); border-bottom: 1px solid var(--page-faint); padding: 6px 4px 8px 8px; }
.dv-fig .dv-sg th.dv-rh { width: 1%; padding-right: 6px; }
.dv-fig .dv-sg td.dv-n { font-size: 12.5px; }
.dv-fig .dv-sg tbody tr:nth-child(n) td.dv-n { text-align: center; padding: 8px 2px; border: 2px solid var(--page-2); }
.dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hg1 { background-color: color-mix(in srgb, var(--dv-gain) 10%, transparent); }
.dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hg2 { background-color: color-mix(in srgb, var(--dv-gain) 22%, transparent); }
.dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hg3 { background-color: color-mix(in srgb, var(--dv-gain) 36%, transparent); }
.dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hg4 { background-color: color-mix(in srgb, var(--dv-gain) 50%, transparent); }
.dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hl1 { background-color: color-mix(in srgb, var(--dv-loss) 10%, transparent); }
.dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hl2 { background-color: color-mix(in srgb, var(--dv-loss) 22%, transparent); }
.dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hl3 { background-color: color-mix(in srgb, var(--dv-loss) 36%, transparent); }
.dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hl4 { background-color: color-mix(in srgb, var(--dv-loss) 50%, transparent); }
html[data-theme="dark"] .dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hg1 { background-color: color-mix(in srgb, var(--dv-gain) 8%, transparent); }
html[data-theme="dark"] .dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hg2 { background-color: color-mix(in srgb, var(--dv-gain) 16%, transparent); }
html[data-theme="dark"] .dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hg3 { background-color: color-mix(in srgb, var(--dv-gain) 26%, transparent); }
html[data-theme="dark"] .dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hg4 { background-color: color-mix(in srgb, var(--dv-gain) 38%, transparent); }
html[data-theme="dark"] .dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hl1 { background-color: color-mix(in srgb, var(--dv-loss) 8%, transparent); }
html[data-theme="dark"] .dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hl2 { background-color: color-mix(in srgb, var(--dv-loss) 16%, transparent); }
html[data-theme="dark"] .dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hl3 { background-color: color-mix(in srgb, var(--dv-loss) 26%, transparent); }
html[data-theme="dark"] .dv-fig .dv-sg tbody tr:nth-child(n) td.dv-hl4 { background-color: color-mix(in srgb, var(--dv-loss) 38%, transparent); }
.dv-fig .dv-sg tbody tr:nth-child(n) td.dv-base { box-shadow: inset 0 0 0 2px var(--page-text); font-weight: 700; }

/* timeline */
.dv-tline { position: relative; margin: 0 8px; padding: 0 0 0 22px; list-style: none; }
/* the rail is drawn per item, from its dot down to the next dot, so it ends at the last dot */
.dv-tline > li:not(:last-child)::after { content: ""; position: absolute; left: -17px; top: 21px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--page-line); }
.dv-tline > li { position: relative; margin: 0; padding: 0 0 20px; }
.dv-tline > li:last-child { padding-bottom: 0; }
.dv-tline > li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--page-2); border: 2px solid var(--dv-c1); }
.dv-tline > li.dv-tline-g::before { background: var(--dv-gain); border-color: var(--dv-gain); }
.dv-tline > li.dv-tline-l::before { background: var(--dv-loss); border-color: var(--dv-loss); }
.dv-tline > li.dv-tline-c1::before { background: var(--dv-c1); }
.dv-tline time { display: block; font: 600 12.5px/1.4 var(--dv-mono); letter-spacing: .03em; color: var(--page-muted); }
.dv-tline b { display: block; margin-top: 2px; font-size: 16px; font-weight: 650; line-height: 1.35; color: var(--page-text); }
.dv-tline p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--page-muted); }
@media (min-width: 720px) {
  .dv-tline { padding-left: 0; }
  .dv-tline > li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 44px; }
  .dv-tline > li::before { left: 128px; }
  .dv-tline > li:not(:last-child)::after { left: 133px; }
  .dv-tline time { grid-row: 1 / span 3; text-align: right; padding-top: 2px; }
}

/* ===================================================================================================================
   2. school pages: hub, levels, tracks, questions, modules, quiz, payoff builder (instiv2-tools/build-derivatives.mjs,
      learn/deriv.js). Built on learn.css (the .lm and .lp tokens, lm-* and lp-* parts) and the kit; every colour is a
      token or a track colour, light and dark.
   =================================================================================================================== */
/* track colours: --c for borders and fills, --c-ink for text on the page (each reads at 4.5:1 on white; dark theme mixes
   towards white so the slate and green tracks still read on the dark page) */
[data-track="basics"] { --c: #2563EB; } [data-track="futures"] { --c: #0E7490; } [data-track="options"] { --c: #6D28D9; }
[data-track="option-chain"] { --c: #B45309; } [data-track="volatility"] { --c: #A21CAF; } [data-track="strategies"] { --c: #15803D; }
[data-track="arbitrage"] { --c: #4D7C0F; } [data-track="algo"] { --c: #475569; }
.dv, [data-track] { --c-ink: var(--c); }
html[data-theme="dark"] [data-track], html[data-theme="dark"] .dv { --c-ink: color-mix(in srgb, var(--c) 55%, #fff); }
.dv .dv-soon { border-style: dashed; }
.dv .dv-soon:hover { transform: none; border-color: var(--page-line); }
.dv a.dv-stop:hover, .dv a.lm-nx:hover { border-color: var(--c); }

/* hub hero: the photo plate (kit pg-hero), the question search and the chips */
.dv-hero .pg-hero-in { padding-bottom: clamp(30px, 6vh, 64px); }
.dv-hero .h-l { font-size: clamp(36px, 5.2vw, 76px); max-width: 15em; }
.dv-hero .sub { max-width: 36em; }
.dv-hero .sub.dv-sub2 { margin-top: 12px; font-size: clamp(15px, 1.1vw, 17px); }
.dv-hero .chips { margin-top: 22px; }
.dv-search { position: relative; margin: 24px 0 0; max-width: 680px; }
.dv-sbox { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 6px 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--line); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.dv-sbox:focus-within { border-color: rgba(214, 226, 255, .6); }
.dv-sbox svg { flex: none; width: 22px; height: 22px; color: var(--muted); }
.dv-sbox input { flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; background: transparent; color: var(--text); font: 500 16px/1.2 inherit; outline: none; }
.dv-sbox input::placeholder { color: var(--muted); }
.dv-sbox input::-webkit-search-cancel-button { filter: invert(1); }
.dv-sbox .btn { flex: none; min-height: 46px; padding: 0 18px; }
.dv-sstat { margin: 10px 6px 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.dv-res { list-style: none; margin: 10px 0 0; padding: 6px; border-radius: 20px; background: color-mix(in srgb, var(--ink) 94%, transparent); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.dv-res li > a, .dv-res li > div { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px; border-radius: 14px; color: var(--text); text-decoration: none; }
.dv-res li > a:hover, .dv-res li > a.is-sel { background: rgba(255, 255, 255, .08); }
.dv-res .dv-r-k { font: 500 12px/1.4 var(--mono, "Azeret Mono", monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dv-res b { font-size: 15.5px; font-weight: 650; line-height: 1.35; }
.dv-res small { font-size: 13px; color: var(--muted); }
.dv-res .is-soon b { color: var(--muted); font-weight: 600; }
.dv-res mark { background: rgba(127, 178, 255, .28); color: inherit; border-radius: 3px; padding: 0 1px; }

/* sections of the hub and the index pages */
.dv-sec { padding-top: clamp(44px, 6vw, 88px); }
.dv-more { margin: 18px 0 0; font-size: 15px; font-weight: 600; }
.dv-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--page-text); }
.dv-more svg, .dv-door svg, .dv-acc-all svg, .dv-place-link svg, .dv-qback svg, .dv-cq-more svg, .dv-myth-go svg { width: 15px; height: 15px; flex: none; }
.dv-doors-sec { padding-top: clamp(26px, 4vw, 48px); }
.dv-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dv-door { position: relative; display: grid; gap: 6px; align-content: start; min-height: 44px; padding: 20px 46px 20px 20px; border-radius: 18px; background: var(--page-2); border: 1px solid var(--page-line); color: var(--page-text); text-decoration: none; transition: border-color .25s, transform .3s var(--ease); }
.dv-door:hover { border-color: var(--page-faint); transform: translateY(-2px); }
.dv-door b { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.dv-door span { font-size: 14.5px; line-height: 1.5; color: var(--page-muted); }
.dv-door svg { position: absolute; right: 18px; top: 23px; color: var(--page-faint); }
.dv-place-link { margin: 14px 0 0; font-size: 15px; font-weight: 600; }
.dv-place-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--page-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* questions people ask: a grid on wide screens, a sideways strip on phones */
.dv-qcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dv-qcard { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 44px; padding: 18px; border-radius: 18px; background: var(--page-2); border: 1px solid var(--page-line); color: var(--page-text); text-decoration: none; box-sizing: border-box; }
a.dv-qcard:hover { border-color: var(--page-faint); }
.dv-qcard-k { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); }
.dv-qcard b { font-size: 16.5px; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; }
.dv-qcard-a { margin-top: auto; font-size: 14px; line-height: 1.5; color: var(--page-muted); }
.dv-qcard-a a { color: var(--page-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 719px) {
  .dv-qcards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 10px; scroll-padding: 0 var(--pad); }
  .dv-qcards > li { flex: 0 0 80%; scroll-snap-align: start; }
}

/* before you trade */
.dv-before-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(18px, 4vw, 48px); align-items: start; }
.dv-before-grid .dv-fig.dv-fig { margin: 0; }
.dv-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dv-facts li { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--page-2); border: 1px solid var(--page-line); }
.dv-facts b { font: 600 20px/1.2 var(--mono); letter-spacing: -0.01em; color: var(--page-text); }
.dv-facts span { font-size: 14.5px; line-height: 1.45; color: var(--page-muted); }
.dv-wont { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid var(--lm-amber); background: var(--lm-tint-amber); border-radius: 0 12px 12px 0; font-size: 15px; line-height: 1.55; color: var(--page-text); }

/* placement check */
.dv-place { padding-top: clamp(44px, 6vw, 88px); }
.dv-place-d { border: 1px solid var(--page-line); border-radius: 20px; background: var(--page-2); }
.dv-place-d > summary { list-style: none; cursor: pointer; display: grid; gap: 6px; min-height: 44px; padding: 20px 52px 20px 20px; position: relative; }
.dv-place-d > summary::-webkit-details-marker { display: none; }
.dv-place-d > summary::after { content: "+"; position: absolute; right: 20px; top: 18px; font: 400 26px/1 var(--mono); color: var(--page-faint); }
.dv-place-d[open] > summary::after { content: "\2212"; }
.dv-place-d > summary .kicker { margin: 0; }
.dv-place-d > summary b { font-size: clamp(19px, 2vw, 24px); font-weight: 700; letter-spacing: -0.02em; }
.dv-place-d > summary > span:last-child { font-size: 14.5px; color: var(--page-muted); }
.dv-pform { padding: 0 16px 18px; }
.dv-place-out { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--lm-tint-blue); font-size: 15.5px; line-height: 1.55; }
.dv-place-out a { font-weight: 650; color: var(--page-text); text-decoration: underline; text-underline-offset: 3px; }

/* the level by track map: a table from 861 px, four accordions below */
.dv-map-wrap { overflow-x: auto; }
.dv-map { width: 100%; border-collapse: separate; border-spacing: 6px; margin: 0 -6px; table-layout: fixed; }
.dv-map th, .dv-map td { padding: 0; text-align: center; vertical-align: middle; font-weight: 500; }
.dv-map thead th { padding: 6px 0; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--page-muted); }
.dv-map thead th:first-child { width: 30%; text-align: left; }
.dv-map thead a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.dv-map tbody th { text-align: left; }
.dv-map-t { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-text); font-size: 15px; font-weight: 650; line-height: 1.3; text-decoration: none; box-shadow: inset 4px 0 0 var(--c); }
.dv-map-t b { font: 500 12px/1 var(--mono); color: var(--page-faint); }
.dv-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 32%, var(--page-line)); background: color-mix(in srgb, var(--c) 9%, var(--page-2)); color: var(--page-text); text-decoration: none; transition: border-color .2s; }
a.dv-cell:hover { border-color: var(--c); }
.dv-cell b { font: 600 20px/1 var(--mono); }
.dv-cell small { font-size: 12px; color: var(--page-muted); }
.dv-cell-0 { border-style: dashed; background: transparent; color: var(--page-faint); font: 500 14px/1 var(--mono); }
.dv-map-acc { display: none; }
.dv-acc { border: 1px solid var(--page-line); border-radius: 16px; background: var(--page-2); margin: 0 0 10px; }
.dv-acc > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; min-height: 44px; padding: 16px 44px 16px 18px; position: relative; }
.dv-acc > summary::-webkit-details-marker { display: none; }
.dv-acc > summary::after { content: "+"; position: absolute; right: 18px; top: 14px; font: 400 22px/1 var(--mono); color: var(--page-faint); }
.dv-acc[open] > summary::after { content: "\2212"; }
.dv-acc > summary b { font-size: 17px; font-weight: 700; }
.dv-acc > summary span { font-size: 13.5px; color: var(--page-muted); }
.dv-acc-l { margin: 0 18px 10px; font-size: 14.5px; line-height: 1.5; color: var(--page-muted); }
.dv-acc ul { list-style: none; margin: 0; padding: 0 10px 6px; display: grid; gap: 6px; }
.dv-acc li a { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px 10px 16px; border-radius: 12px; border: 1px solid var(--page-line); background: var(--page); color: var(--page-text); text-decoration: none; box-shadow: inset 4px 0 0 var(--c); }
.dv-acc li b { font-size: 15px; font-weight: 650; }
.dv-acc li span { font-size: 13px; color: var(--page-muted); }
.dv-acc-all { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 18px 8px; font-size: 14.5px; font-weight: 650; color: var(--page-text); }
.dv-levels { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dv-levels .lm-nx { height: 100%; box-sizing: border-box; }
@media (max-width: 860px) { .dv-map-wrap { display: none; } .dv-map-acc { display: block; } .dv-levels { grid-template-columns: 1fr 1fr; } }

/* tools strip and myth checks */
.dv-tools, .dv-myths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.dv-myths { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dv-tool, .dv-myth { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 44px; padding: 16px 18px; box-sizing: border-box; border-radius: 16px; background: var(--page-2); border: 1px solid var(--page-line); color: var(--page-text); text-decoration: none; }
a.dv-tool { border-color: color-mix(in srgb, var(--accent, #2463EB) 45%, var(--page-line)); }
a.dv-tool:hover, a.dv-myth:hover { border-color: var(--page-faint); }
.dv-tool-k, .dv-myth-k { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--page-faint); }
a.dv-tool .dv-tool-k { color: var(--lm-green); }
.dv-tool b { font-size: 16px; font-weight: 650; }
.dv-tool span:last-child, .dv-myth-v { font-size: 14px; line-height: 1.5; color: var(--page-muted); }
.dv-myth q { font-size: 16px; font-weight: 650; line-height: 1.4; }
.dv-myth-v b { color: var(--page-text); }
.dv-myth-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding-top: 4px; font-size: 13.5px; font-weight: 650; }
.dv-soon-t { color: var(--page-faint); font-weight: 500; }

/* certificates, progress, sources */
.dv-ckinds { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dv-ckinds li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--page-2); border: 1px solid var(--page-line); }
.dv-ckinds b { font-size: 16px; font-weight: 700; }
.dv-ckinds span { font-size: 13.5px; line-height: 1.45; color: var(--page-muted); }
.dv-notnism { max-width: 760px; margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--page-muted); }
.dv-notnism a, .dv-nism a, .dv-lcert a, .dv-policy a { color: var(--page-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dv-certs .ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.dv-nism { margin-top: 18px; border: 1px solid var(--page-line); border-radius: 16px; background: var(--page-2); padding: 0 18px; }
.dv-nism > summary { cursor: pointer; min-height: 44px; padding: 14px 0; font-weight: 650; font-size: 15.5px; }
.dv-nism p { margin: 0 0 12px; font-size: 14px; color: var(--page-muted); line-height: 1.5; }
.dv-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.2em; }
.dv-tablewrap table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dv-tablewrap th, .dv-tablewrap td { padding: 10px 10px; border-bottom: 1px solid var(--page-line); text-align: left; vertical-align: top; }
.dv-tablewrap thead th { font-size: 12.5px; font-weight: 600; color: var(--page-muted); }
.dv-prog-t { margin: 0; font-size: 16px; line-height: 1.55; }
.dv-prog-t a { color: var(--page-text); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.dv-policy-l { max-width: 820px; margin: 0 0 18px; padding-left: 1.2em; font-size: 15.5px; line-height: 1.6; color: var(--page-text); }
.dv-policy-l li { margin: 0 0 8px; }
.dv-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.dv-links a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--page-line); background: var(--page-2); font-size: 14.5px; line-height: 1.4; text-decoration: none !important; }
@media (max-width: 860px) { .dv-before-grid { grid-template-columns: 1fr; } .dv-ckinds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 719px) { .dv-doors { grid-template-columns: 1fr; } .dv-sbox .btn { padding: 0 14px; } }

/* level, track and questions index pages */
.dv-index .lm-hero.dv-ihero, .dv-mod .lm-hero { align-items: center; }
.dv-ihero { padding-top: calc(var(--hdr) + 48px); }
.dv-ihero .lm-head h1 { font-size: clamp(32px, 4vw, 56px); }
.dv-groups { padding-top: clamp(30px, 5vw, 60px); }
.dv-group { margin: 0 0 clamp(30px, 4vw, 48px); scroll-margin-top: calc(var(--hdr) + 20px); }
.dv-group h2 { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.dv-group h2 a { color: inherit; text-decoration: none; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c) 60%, transparent); }
.dv-group-s { margin: 0 0 14px; max-width: 760px; font-size: 15px; line-height: 1.5; color: var(--page-muted); }
.dv-stops { gap: 8px; }
.dv-stops .lp-stop { min-height: 64px; }
.dv-stops .lp-stop.dv-soon .lp-stop-t { color: var(--page-muted); }
.dv-stops .lp-stop.dv-canon { box-shadow: inset 4px 0 0 var(--page-faint); }
.dv-lcert { max-width: 760px; margin: 0 0 6px; }
.dv-lcert p:last-child { margin: 0; font-size: 15px; line-height: 1.55; color: var(--page-muted); }
.dv-qhero { max-width: 1080px; margin: 0 auto; padding: calc(var(--hdr) + 48px) var(--pad) 0; }
.dv-qhero .lm-head h1 { font-size: clamp(30px, 4.2vw, 54px); max-width: 20em; }
.dv-qhero .hero-lead { max-width: 42em; }
.dv-qfilter { margin: clamp(24px, 4vw, 40px) 0 0; }
.dv-qfilter .dv-sbox { max-width: 560px; background: var(--page-2); border-color: var(--page-line); backdrop-filter: none; -webkit-backdrop-filter: none; padding-right: 16px; }
.dv-qfilter .dv-sbox svg { color: var(--page-faint); }
.dv-qfilter .dv-sbox input { color: var(--page-text); }
.dv-qfilter .dv-sbox input::placeholder { color: var(--page-faint); }
.dv-qfilter .dv-sbox input::-webkit-search-cancel-button { filter: none; }
.dv-qfilter .dv-sstat { color: var(--page-muted); }
.dv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.dv-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-text); font: 500 14px/1 inherit; cursor: pointer; }
.dv-chip[aria-pressed="true"] { background: var(--page-text); color: var(--page); border-color: var(--page-text); }
.dv-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dv-qrow > a, .dv-qrow > div { display: grid; gap: 3px; min-height: 44px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-text); text-decoration: none; }
.dv-qrow > a:hover { border-color: var(--page-faint); }
.dv-qrow b { font-size: 15.5px; font-weight: 650; line-height: 1.4; }
.dv-qrow.dv-soon > div { border-style: dashed; }
.dv-qrow.dv-soon b { color: var(--page-muted); font-weight: 600; }
.dv-qrow span { font-size: 13px; line-height: 1.45; color: var(--page-faint); }
.dv-qrow span a { color: var(--page-text); text-decoration: underline; text-underline-offset: 3px; }
.dv-qrow[hidden], .dv-group[hidden] { display: none; }

/* module and question pages: the body parts the generator adds */
.dv-body .dv-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-body > section { margin: 0; }
.dv-outcomes { margin: 1.6em 0; padding: 16px 18px; border-radius: 16px; background: var(--page-2); border: 1px solid var(--page-line); }
.dv-outcomes .kicker { margin: 0 0 10px; }
.dv-outcomes ol { margin: 0; padding-left: 1.3em; font-size: 16px; line-height: 1.55; }
.dv-outcomes li { margin: 0 0 6px; }
.dv-body .dv-formula { display: block; margin: 1.2em 0; padding: 14px 16px; border-radius: 12px; background: var(--lm-tint-blue); font: 500 15px/1.6 var(--mono); overflow-x: auto; white-space: nowrap; }
.dv-body details:not(.dv-cq-ans):not(.dv-allcols) { margin: 1.2em 0; border: 1px solid var(--page-line); border-radius: 14px; background: var(--page-2); padding: 0 16px; }
.dv-body details:not(.dv-cq-ans):not(.dv-allcols) > summary { cursor: pointer; min-height: 44px; padding: 13px 0; font-weight: 650; font-size: 15.5px; }
.dv-body .dv-tablewrap table { font-size: 15px; }
.dv-body .dv-tablewrap td:last-child { font-variant-numeric: tabular-nums; }
.dv-mistake { margin-top: .4em; }
.dv-body q.dv-claim, .dv-body .dv-claim { font-weight: 600; }
.dv-takeaways { margin: 0 0 1.2em; padding: 0; list-style: none; display: grid; gap: 8px; }
.dv-takeaways li { position: relative; margin: 0; padding: 12px 14px 12px 40px; border-radius: 12px; background: var(--page-2); border: 1px solid var(--page-line); font-size: 16px; line-height: 1.5; }
.dv-takeaways li::before { content: ""; position: absolute; left: 16px; top: 20px; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.dv-hinglish { margin: 1.4em 0; padding: 16px 18px; border-radius: 16px; background: var(--lm-tint-amber); border: 1px solid color-mix(in srgb, var(--lm-amber) 30%, var(--page-line)); }
.dv-hinglish .kicker { margin: 0 0 8px; }
.dv-hinglish p:last-child { margin: 0; font-size: 15.5px; line-height: 1.6; }
.dv-check .lm-q { margin-bottom: 12px; }
.dv-cq-ans { margin: 10px 0 4px; font-size: 14.5px; }
.dv-cq-ans > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--page-muted); }
.dv-cq-ans p { margin: 0 0 8px; color: var(--page-muted); line-height: 1.5; }
.dv-cq-more { margin: 6px 0 1.2em; font-weight: 650; }
.dv-cq-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--page-text); }
.dv-src-list { margin: 0 0 1.2em; padding-left: 1.3em; font-size: 15px; line-height: 1.55; }
.dv-src-list li { margin: 0 0 6px; }
.dv-src-list a { color: var(--page-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dv-src-k { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--page-faint); }
.dv-risk { margin: 1.8em 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--lm-red) 30%, var(--page-line)); background: var(--lm-tint-red); }
.dv-risk p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--page-text); }
.dv-risk a { color: var(--page-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dv-try { margin: 0 0 1.2em; padding: 18px; border-radius: 18px; background: var(--page-2); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--page-line)); }
.dv-try .kicker { margin: 0 0 8px; }
.dv-try-t { margin: 0 0 14px !important; font-size: 15.5px; line-height: 1.55; color: var(--page-muted); }
.dv-trap { margin: 1.6em 0; padding: 18px; border-radius: 18px; background: var(--lm-tint-amber); border: 1px solid color-mix(in srgb, var(--lm-amber) 35%, var(--page-line)); }
.dv-trap .kicker { margin: 0 0 10px; }
.dv-trap p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; }
.dv-trap p:last-child { margin: 0; }
.dv-trap .dv-claim { font-size: 17px; font-weight: 650; line-height: 1.45; }
.dv-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; }
.dv-share-u { font: 500 13.5px/1.4 var(--mono); color: var(--page-muted); overflow-wrap: anywhere; }
.dv-relq { margin-top: 34px; }
.dv-relq .kicker { margin-bottom: 8px; }
.dv-qback { margin: 20px 0 0; font-weight: 650; }
.dv-qback a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--page-text); }
.dv-qpage .lm-wrap > .lm-body { padding-top: clamp(20px, 3vw, 32px); }

/* the module quiz and the certificate hand off */
.dv-quiz { max-width: 760px; margin: clamp(40px, 6vw, 72px) auto 0; padding: 0 var(--pad); }
.dv-qz-start { margin: 0 0 8px; }
.dv-qform .lm-q input[type="text"] { width: 100%; max-width: 260px; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--page-line); background: var(--page); color: var(--page-text); font: 500 16px/1.2 var(--mono); }
.dv-qform .lm-q input[type="text"]:focus { outline: 2px solid var(--c); outline-offset: 1px; }
.dv-qnum { display: grid; gap: 6px; clear: both; font-size: 14px; color: var(--page-muted); }
.dv-qnum.is-ok input { border-color: var(--lm-green) !important; background: var(--lm-tint-green) !important; }
.dv-qnum.is-no input { border-color: var(--lm-red) !important; background: var(--lm-tint-red) !important; }
.dv-qz-pass { margin-top: 24px; padding: 20px; border-radius: 20px; background: var(--page-2); border: 1px solid var(--page-line); }
.dv-qz-pass h3 { margin: 0 0 14px; font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
.dv-gate label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.dv-gate input:not(.lm-hp) { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--page-line); background: var(--page); color: var(--page-text); font: 500 16px/1.2 inherit; }
.dv-cert-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--page-faint); }

/* the payoff builder */
.dv-pb { padding-top: clamp(26px, 4vw, 44px); }
.dv-pb-ctl { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 110px; gap: 12px; }
.dv-fld { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--page-muted); min-width: 0; }
.dv-fld select, .dv-fld input[type="number"], .dv-pb-legs select, .dv-pb-legs input { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-text); font: 500 15px/1.2 inherit; box-sizing: border-box; }
.dv-fld output { font: 600 14px/1 var(--mono); color: var(--page-text); }
.dv-pb-ex { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--page-muted); max-width: 820px; }
.dv-pb-legs { margin: 18px 0 0; }
.dv-legs-t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dv-legs-t th, .dv-legs-t td { padding: 8px 6px; border-bottom: 1px solid var(--page-line); text-align: left; vertical-align: middle; }
.dv-legs-t thead th { font-size: 12.5px; font-weight: 600; color: var(--page-muted); }
.dv-legs-t td:nth-child(n+3) { font-variant-numeric: tabular-nums; }
.dv-leg { display: grid; grid-template-columns: 92px 92px minmax(0, 1.2fr) 80px minmax(0, 1fr) 46px; gap: 8px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--page-line); }
.dv-leg label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--page-muted); min-width: 0; }
.dv-leg .dv-leg-x { min-height: 46px; width: 46px; border-radius: 12px; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-muted); font: 500 20px/1 var(--mono); cursor: pointer; }
.dv-leg .dv-leg-x:hover { color: var(--lm-red); border-color: var(--lm-red); }
.dv-leg-iv { font: 500 12.5px/1.3 var(--mono); color: var(--page-faint); grid-column: 1 / -1; }
.dv-pb-add { margin: 12px 0 0; }
.dv-pb-chart .dv-fig.dv-fig { margin: 18px 0 0; }
.dv-pb-days { margin: 16px 0 0; max-width: 560px; }
.dv-pb-days input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--accent, #2463EB); }
.dv-pb-cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.dv-pb-cards li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--page-2); border: 1px solid var(--page-line); }
.dv-pb-cards span { font-size: 12.5px; color: var(--page-muted); }
.dv-pb-cards b { font: 600 16px/1.3 var(--mono); color: var(--page-text); overflow-wrap: anywhere; }
.dv-pb-cost { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--lm-tint-blue); max-width: 920px; }
.dv-pb-cost p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--page-text); }
.dv-pb-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--page-faint); max-width: 820px; }
.dv-tool-faq { margin: 26px 0 0; }
.dv-tool-page .lm-wrap { padding-top: clamp(26px, 4vw, 44px); }
@media (max-width: 719px) {
  .dv-pb-ctl { grid-template-columns: 1fr 1fr; }
  .dv-pb-ctl .dv-fld:first-child { grid-column: 1 / -1; }
  .dv-leg { grid-template-columns: 1fr 1fr 46px; }
  .dv-leg label:nth-child(3) { grid-column: 1 / 3; }
  .dv-leg label:nth-child(4), .dv-leg label:nth-child(5) { grid-column: auto; }
  .dv-leg .dv-leg-x { grid-row: 1; grid-column: 3; }
}
@media (prefers-reduced-motion: reduce) { .dv-door, .dv-door:hover { transition: none; transform: none; } }
/* phones: the tools and myth checks scroll sideways like the question cards, so the hub stays short */
@media (max-width: 719px) {
  .dv-tools, .dv-myths { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 10px; scroll-padding: 0 var(--pad); }
  .dv-tools > li { flex: 0 0 72%; scroll-snap-align: start; }
  .dv-myths > li { flex: 0 0 82%; scroll-snap-align: start; }
}
.dv-hero .kicker .lm-sep { color: var(--muted); }
.dv-nism > summary { list-style: none; position: relative; padding-right: 30px; }
.dv-nism > summary::-webkit-details-marker { display: none; }
.dv-nism > summary::after { content: "+"; position: absolute; right: 0; top: 12px; font: 400 20px/1 var(--mono); color: var(--page-faint); }
.dv-nism[open] > summary::after { content: "\2212"; }
.dv-body .dv-takeaways { padding: 0; }
.dv-body .dv-tablewrap table { min-width: 0; }
.dv-body .dv-tablewrap td, .dv-body .dv-tablewrap th { min-width: 0; padding: 10px; white-space: normal; }
.dv-body .dv-tablewrap td:last-child { white-space: nowrap; }
.dv-body ul.dv-stops { padding: 0; margin: 0 0 1.2em; list-style: none; }
.dv-body ul.dv-stops li { margin: 0; }
.dv-body .dv-stops a, .dv-body .lm-nx, .dv-body .dv-try a.btn { text-decoration: none; }
.dv-body .lp-next-grid { margin: 0 0 1.2em; }
.dv-cert-reg { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--page-muted); }
.dv-cert-reg:empty { display: none; }

/* ===================================================================================================================
   3. the Phase 1 tools (DQ1): Greeks calculator, F&O cost calculator, max pain checker, IV rank and percentile, risk of ruin.
   Markup comes from deriv-tools.js (the build prints the first state, deriv.js redraws it). Tokens only, no inline styles.
   =================================================================================================================== */
.dv-tl { padding-top: clamp(26px, 4vw, 44px); }
.dv-tl-ctl { margin: 0; }
.dv-tl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dv-tl .dv-fld { grid-template-rows: 1fr auto; }
.dv-tl-grid .dv-tl-w2 { grid-column: 1 / -1; }
.dv-tl .dv-fld select, .dv-tl .dv-fld input[type="text"], .dv-tl .dv-fld input[type="date"] { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-text); font: 500 15px/1.2 inherit; box-sizing: border-box; }
.dv-tl .dv-fld input[type="date"] { font-family: inherit; }
.dv-tl .dv-fld select:focus-visible, .dv-tl .dv-fld input:focus-visible, .dv-tl .btn:focus-visible, .dv-tl summary:focus-visible, .dv-tl .dv-tablewrap:focus-visible { outline: 2px solid var(--c, var(--accent, #2463EB)); outline-offset: 2px; }
.dv-tl .dv-tl-hint { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.35; color: var(--page-faint); }
.dv-tl-out { margin-top: 22px; }
.dv-tl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dv-tl-cards li { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 14px; background: var(--page-2); border: 1px solid var(--page-line); min-width: 0; }
.dv-tl-cards span { font-size: 12.5px; color: var(--page-muted); }
.dv-tl-cards b { font: 600 16px/1.3 var(--mono); color: var(--page-text); overflow-wrap: anywhere; }
.dv-tl-cards small { font-size: 12.5px; line-height: 1.35; color: var(--page-faint); overflow-wrap: anywhere; }
.dv-tl-pos { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--page-text); max-width: 880px; }
.dv-tl-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--page-faint); max-width: 880px; }
.dv-tl-msg { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--lm-red) 40%, var(--page-line)); background: var(--lm-tint-red); font-size: 14.5px; line-height: 1.5; color: var(--page-text); }
.dv-tl-h { margin: 26px 0 0; font-size: 18px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; color: var(--page-text); }
.dv-tl-out .dv-tablewrap { margin: 14px 0 0; border-radius: 14px; border: 1px solid var(--page-line); background: var(--page-2); }
.dv-tl-t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dv-tl-t th, .dv-tl-t td { padding: 10px 12px; border-bottom: 1px solid var(--page-line); text-align: left; vertical-align: top; }
.dv-tl-t thead th { font-size: 12.5px; font-weight: 600; color: var(--page-muted); }
.dv-tl-t tbody tr:last-child > * { border-bottom: 0; }
.dv-tl-t tbody th { font-weight: 600; color: var(--page-text); }
.dv-tl-t small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; line-height: 1.35; color: var(--page-muted); }
.dv-tl-t td { font: 500 14.5px/1.35 var(--mono); font-variant-numeric: tabular-nums; color: var(--page-text); white-space: nowrap; }
.dv-tl-t td small { font-family: var(--sans, Inter, system-ui, sans-serif); white-space: normal; }
.dv-tl-t th[scope="col"] { white-space: nowrap; }
.dv-tl-t .dv-tl-tot > * { font-weight: 700; border-top: 1.5px solid var(--page-line); }
.dv-tl-t-wide { min-width: 640px; }
.dv-tl-t-mp th, .dv-tl-t-mp td { padding: 9px 6px; font-size: 13px; }
.dv-tl-t-mp td { font-size: 13px; }
.dv-tl-t-mp thead th, .dv-tl-t-mp td:last-child { white-space: normal; }
.dv-tl-t-mp td:last-child { font-family: var(--sans, Inter, system-ui, sans-serif); font-weight: 600; }
.dv-tl-t-mp tbody th { min-width: 92px; }
.dv-tl-t-wide td, .dv-tl-t-wide th { white-space: nowrap; }
.dv-tl-exp { margin: 14px 0 0; border-radius: 14px; border: 1px solid var(--page-line); background: var(--page-2); }
.dv-tl-exp > summary { display: flex; align-items: center; min-height: 46px; padding: 0 14px; font-size: 14.5px; font-weight: 600; color: var(--page-text); cursor: pointer; list-style: none; }
.dv-tl-exp > summary::-webkit-details-marker { display: none; }
.dv-tl-exp > summary::after { content: "+"; margin-left: auto; font: 400 20px/1 var(--mono); color: var(--page-faint); }
.dv-tl-exp[open] > summary::after { content: "\2212"; }
.dv-tl-exp .dv-tablewrap { margin: 0; border: 0; border-top: 1px solid var(--page-line); border-radius: 0 0 14px 14px; }
.dv-tl-figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.dv-tl-figs .dv-fig.dv-fig { margin: 0; }
.dv-tl-out .dv-svg { max-width: 620px; }
.dv-tl-legs { display: grid; gap: 12px; margin-top: 16px; }
.dv-tl-leg { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 14px; border-radius: 14px; border: 1px solid var(--page-line); background: var(--page-2); min-width: 0; }
.dv-tl-leg legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--page-muted); }
.dv-tl-leg .dv-tl-w2 { grid-column: 1 / -1; }
.dv-tl-x { position: absolute; top: -18px; right: 8px; min-height: 44px; width: 44px; border-radius: 12px; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-muted); font: 500 20px/1 var(--mono); cursor: pointer; }
.dv-tl-x:hover { color: var(--lm-red); border-color: var(--lm-red); }
.dv-tl-add { margin: 12px 0 0; }
.dv-tl-padded { margin: 0; padding: 12px 14px 14px; border-top: 1px solid var(--page-line); }
.dv-tl-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.dv-tl-quick[hidden] { display: none; }
.dv-tl-quick > span { font-size: 13.5px; font-weight: 600; color: var(--page-muted); }
.dv-tl-quick .btn { min-height: 44px; padding: 0 16px; }
.dv-tl-two { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.dv-tl-def { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--page-line); background: var(--page-2); min-width: 0; }
.dv-tl-def h3 { margin: 0 0 6px; font-size: 16px; font-weight: 650; color: var(--page-text); }
.dv-tl-def p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--page-muted); }
.dv-tl-def .dv-tl-sum { font: 500 14.5px/1.5 var(--mono); font-variant-numeric: tabular-nums; color: var(--page-text); overflow-wrap: anywhere; }
.dv-tl-def .dv-tl-s2 { margin: 0; font-size: 13px; color: var(--page-faint); }
.dv-tl-tally { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: var(--page-text); max-width: 880px; }
.dv-tool-page .dv-body h3 { margin: 1.4em 0 .3em; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.dv-tool-page .dv-body h3 + p { margin-top: 0; }
@media (min-width: 720px) {
  .dv-tl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dv-tl-grid .dv-tl-w2 { grid-column: span 2; }
  .dv-tl-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dv-tl-leg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dv-tl-leg .dv-tl-w2 { grid-column: span 2; }
  .dv-tl-two { grid-template-columns: 1fr 1fr; }
  .dv-tl-x { top: 8px; }
}
@media (min-width: 1000px) { .dv-tl-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* DV Phase 2 tools (17 Oct 2026): the strategy finder's payoff thumbnails and cards. Tokens only, light and dark. */
.dv-sf-card { --dv-c1: var(--c, #2F6FE0); --dv-gain: #087553; --dv-loss: #C0352B; }
html[data-theme="dark"] .dv-sf-card { --dv-gain: #4BD9A0; --dv-loss: #FF8A8A; }
.dv-th { display: block; width: 132px; max-width: 100%; height: auto; flex: none; }
.dv-th-g { fill: color-mix(in srgb, var(--dv-gain) 28%, transparent); stroke: none; }
.dv-th-l { fill: color-mix(in srgb, var(--dv-loss) 28%, transparent); stroke: none; }
.dv-th-z { stroke: var(--page-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.dv-th-p { fill: none; stroke: var(--dv-c1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dv-sf-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dv-sf-card { display: grid; gap: 10px; align-content: start; margin: 0; padding: 16px; border-radius: 14px; border: 1px solid var(--page-line); background: var(--page-2); min-width: 0; }
.dv-sf-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dv-sf-top > div { min-width: 0; }
.dv-sf-card h4 { margin: 0 0 6px; font-size: 17px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; color: var(--page-text); }
.dv-sf-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--page-muted); }
.dv-sf-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dv-sf-tags li { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--page-line); font-size: 12.5px; line-height: 1.4; color: var(--page-muted); }
.dv-sf-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
.dv-sf-facts div { min-width: 0; }
.dv-sf-facts dt { font-size: 12.5px; color: var(--page-faint); }
.dv-sf-facts dd { margin: 2px 0 0; font: 500 14px/1.35 var(--mono); font-variant-numeric: tabular-nums; color: var(--page-text); overflow-wrap: anywhere; }
.dv-sf-card .dv-sf-open { font-size: 14px; }
.dv-sf-card .dv-sf-open a { display: inline-flex; align-items: center; min-height: 44px; }
.dv-sf-more { border-top: 1px solid var(--page-line); }
.dv-sf-more .dv-sf-list { margin: 0; padding: 14px; }
@media (min-width: 720px) { .dv-sf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dv-sf-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dv-tl-t-txt th, .dv-tl-t-txt td { padding: 9px 8px; font-size: 14px; }
.dv-tl-t-txt td { font-family: var(--sans, Inter, system-ui, sans-serif); font-weight: 500; white-space: normal; }
.dv-tl-t-num2 td:nth-child(2) { font-family: var(--mono); white-space: nowrap; }
.dv-tl-t-txt th[scope="row"] { min-width: 76px; }

/* DV Phase 3 tools (17 Oct 2026): the Advanced tools (gex-lab, pair-lab, forward-vol, delta-hedge-simulator, box-rate, vix-replication, scenario-grid).
   A read-first note, the convention switch, text tables, a highlighted row and a long table that scrolls. Tokens only, light and dark. */
.dv-tl-warn { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--page-line); border-left: 4px solid var(--page-faint); background: var(--page-2); font-size: 14.5px; line-height: 1.55; color: var(--page-text); max-width: 880px; }
.dv-tl-warn b { color: var(--page-text); }
.dv-seg-wrap { margin: 0; }
.dv-tl-conv-l { margin: 16px 0 6px; font-size: 13.5px; font-weight: 600; color: var(--page-muted); }
.dv-seg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 4px; }
.dv-seg-b { display: grid; justify-items: start; align-content: center; gap: 2px; min-height: 52px; width: 100%; padding: 8px 14px; margin: 0; text-align: left; font: inherit; border-radius: 12px; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-text); cursor: pointer; }
.dv-seg-b b { font-size: 14.5px; font-weight: 650; color: inherit; }
.dv-seg-b small { font-size: 12.5px; font-weight: 400; line-height: 1.35; color: var(--page-muted); }
.dv-seg-b:hover { border-color: var(--page-faint); }
.dv-seg-b[aria-pressed="true"] { background: var(--page-text); border-color: var(--page-text); color: var(--page); }
.dv-seg-b[aria-pressed="true"] small { color: inherit; opacity: .82; }
.dv-seg-b:focus-visible { outline: 2px solid var(--c, var(--accent, #2463EB)); outline-offset: 2px; }
@media (min-width: 720px) { .dv-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dv-tl-t-txt td { font-family: var(--sans, Inter, system-ui, sans-serif); font-size: 14px; font-weight: 400; white-space: normal; color: var(--page-muted); }
.dv-tl-t-txt td:nth-child(2) { font: 600 14.5px/1.35 var(--mono); color: var(--page-text); white-space: nowrap; }
.dv-tl-t tr.dv-tl-hl > * { background: color-mix(in srgb, var(--page-text) 7%, transparent); }
.dv-tl-t-gx td, .dv-tl-t-pl td, .dv-tl-t-wide td { font-size: 13.5px; }
.dv-tablewrap.dv-tl-long { max-height: 340px; overflow: auto; }
.dv-tl-t-pl th, .dv-tl-t-pl td { padding-left: 8px; padding-right: 8px; }
.dv-tl-t-pl tbody th { min-width: 0; }