/* Docs v3 (owner 10 Oct 2026 evening, QA/docs-v3-1010.md; the rest of QA/docs-redesign-1010.md still holds). Loaded on
   Docs pages only, after site.css, render-blocking so the three columns never shift.
   Six chapters, one page each: the whole guide list on the left (always open), the chapter in the middle, "On this chapter"
   with the reading progress on the right; phones get a Contents button. Pictures of the app are whole windows in a Mac title
   bar, scaled to fit – never cut. Violet #5249EC only for selected / current states and the Next chapter button.
   Motion: 150 ms indicator, 200 ms step, 320 ms ring, 140 ms palette; prefers-reduced-motion = everything still. */
html[data-site] { --dx-v: #5249EC; --dx-v2: rgba(82, 73, 236, .30); --dx-vbg: rgba(82, 73, 236, .09); --dx-hd: var(--header-h, 64px);
  --dx-ok: #7FCB8E; --dx-warn: #E8B04F; --dx-no: #FF8A76; --dx-ease: cubic-bezier(.2, .8, .2, 1); }
html[data-site] main.wrap:has(> .dx) { max-width: none !important; width: 100%; padding-left: 0 !important; padding-right: 0 !important; }
html[data-site] main.wrap > .dx { margin-top: 0 !important; }
.dx [hidden]:not(.dx-kbmap), [data-dx-index], .dx-strings, .dx-gloss, .dx-thumbs i[hidden], .dxw-srcs, .dx-kbmap { display: none !important; }

/* ── Three columns ──────────────────────────────────────────────────────────────────────────────────────────────── */
.dx3 { display: grid; grid-template-columns: 232px minmax(0, 720px) 216px; column-gap: 40px; justify-content: center; align-items: start;
  max-width: 1480px; margin: 0 auto; padding: 36px 32px 48px; }
@media (min-width: 1440px) { .dx3 { grid-template-columns: 248px minmax(0, 720px) 232px; column-gap: 56px; } }
.dx-mbar { display: none; }
.dx-main { grid-column: 2; grid-row: 1; min-width: 0; }
.dx-toc { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--dx-hd) + 20px); max-height: calc(100vh - var(--dx-hd) - 40px);
  display: flex; flex-direction: column; min-height: 0; }
.dx-rail { grid-column: 3; grid-row: 1; position: sticky; top: calc(var(--dx-hd) + 20px); max-height: calc(100vh - var(--dx-hd) - 40px);
  display: flex; flex-direction: column; min-width: 0; }

/* ── The guide list: 6 chapters, every article, always open ───────────────────────────────────────────────────── */
.dx-tochead { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.dx-tocx { display: none; }
.dx-tocs { position: relative; overflow-y: auto; min-height: 0; padding: 12px 4px 28px 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
  overscroll-behavior: contain; -webkit-mask-image: linear-gradient(transparent, #000 30px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(transparent, #000 30px, #000 calc(100% - 36px), transparent); padding-top: 22px; }
.dx-tocl, .dx-tocl ol { list-style: none; margin: 0; padding: 0; }
.dx-tocc { margin: 0 0 14px; }
.dx-tocc > ol { margin-left: 9px; border-left: 1px solid var(--site-line); }
html[data-site] .dx-tocch { display: flex; align-items: baseline; gap: 9px; padding: 5px 8px 6px 0; font-size: 14.5px; line-height: 1.35; font-weight: 500;
  color: var(--site-ink-2); text-decoration: none; text-transform: none; letter-spacing: 0; transition: color 150ms ease; }
.dx-tocch:hover { color: var(--site-ink); }
.dx-tocn { flex: none; display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; font: 600 12px/1 var(--font-mono);
  color: var(--site-ink-3); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--site-line-strong); transform: translateY(2px); }
html[data-site] .dx-tocc.is-cur > .dx-tocch { color: var(--site-ink); font-weight: 700; }
.dx-tocc.is-cur .dx-tocn { color: var(--site-ink); background: rgba(255,255,255,.1); }
html[data-site] .dx-tocc ol a { display: block; padding: 4px 8px 4px 16px; font-size: 14px; line-height: 1.4; color: var(--site-ink-3); text-decoration: none;
  transition: color 150ms ease; }
html[data-site] .dx-tocc.is-cur ol a { color: var(--site-ink-2); }
html[data-site] .dx-tocc ol a:hover, html[data-site] .dx-tocc ol a.is-on { color: var(--site-ink); }
html[data-site] .dx-tocc ol a.is-on { font-weight: 600; }
.dx-bar { position: absolute; left: 0; top: 0; width: 2px; height: var(--h, 0px); transform: translateY(var(--top, 0px)); background: var(--dx-v); border-radius: 1px;
  opacity: var(--o, 0); transition: transform 150ms var(--dx-ease), height 150ms var(--dx-ease), opacity 150ms; pointer-events: none; }
.dx-tocs > .dx-bar { left: 9px; }

/* ── On this chapter + reading progress ───────────────────────────────────────────────────────────────────────── */
.dx-railh { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 12px; font-size: 13px; font-weight: 600; color: var(--site-ink-2); }
.dx-pct { font: 500 12.5px/1 var(--font-mono); color: var(--site-ink-3); font-variant-numeric: tabular-nums; }
.dx-raill { position: relative; overflow-y: auto; min-height: 0; padding: 0 0 24px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
.dx-raill::-webkit-scrollbar { display: none; }
.dx-raill ol { list-style: none; margin: 0; padding: 0 0 0 14px; }
.dx-raill ol ol { padding-left: 12px; }
html[data-site] .dx-raill a { display: block; padding: 4px 0; font-size: 13.5px; line-height: 1.4; color: var(--site-ink-3); text-decoration: none; transition: color 150ms ease; }
html[data-site] .dx-raill a.dx-raila { color: var(--site-ink-2); font-weight: 500; padding-top: 6px; }
html[data-site] .dx-raill ol ol a { font-size: 13px; }
html[data-site] .dx-raill a:hover, html[data-site] .dx-raill a.is-on { color: var(--site-ink); }
.dx-track { position: absolute; left: 0; top: 0; bottom: 24px; width: 1px; background: linear-gradient(var(--site-ink-3) var(--progress, 0%), var(--site-line) 0); }

/* ── The chapter ──────────────────────────────────────────────────────────────────────────────────────────────── */
.dx-head { margin: 0 0 8px; }
html[data-site] .dx-head h1 { font-size: 46px; line-height: 1.08; letter-spacing: -.025em; margin: 0 0 14px; color: var(--site-ink); text-wrap: balance; }
html[data-site] .dx-lead { max-width: 36em; font-size: 19px; line-height: 1.55; color: var(--site-ink-2); margin: 0 0 24px; text-wrap: pretty; }
html[data-site] .dx-kick { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--site-ink-2); text-transform: none; letter-spacing: 0; }
.dx-kick b { font-weight: inherit; }
.dx-kick > span { padding: 3px 10px; border-radius: 999px; font: 600 12.5px/1.4 var(--font-mono); color: var(--site-ink-2); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--site-line-strong); }
html[data-site] .dx-kick1 { margin: 44px 0 0; padding-top: 28px; border-top: 1px solid var(--site-line); font-size: 15px; color: var(--site-ink); }
.dx-searchbtn { display: flex; align-items: center; gap: 10px; width: min(100%, 460px); min-height: 48px; padding: 0 12px 0 16px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--site-ink-3); background: var(--site-card); border: 1px solid var(--site-line-strong); transition: border-color 150ms, color 150ms; }
.dx-searchbtn:hover { border-color: rgba(255,255,255,.3); color: var(--site-ink-2); } .dx-searchbtn span { flex: 1; text-align: left; }
.dx-sec { padding-top: 64px; margin-top: 56px; border-top: 1px solid var(--site-line); scroll-margin-top: calc(var(--dx-hd) + 8px); }
.dx-head + .dx-sec { margin-top: 24px; padding-top: 32px; border-top: 0; }
.dx-head1 + .dx-sec { margin-top: 8px; padding-top: 22px; }
html[data-site] .dx-sec .dx-h2 { font-size: 31px; line-height: 1.15; letter-spacing: -.018em; margin: 0 0 12px; color: var(--site-ink); text-wrap: balance; }
html[data-site] .dx-intro { font-size: 19px; line-height: 1.55; color: var(--site-ink-2); margin: 0 0 26px; text-wrap: pretty; }
.dx-body { font-size: 17px; line-height: 1.7; color: var(--site-ink-2); }
html[data-site] .dx-body p { margin: 0 0 16px; max-width: 70ch; color: var(--site-ink-2); }
.dx-body ul { margin: 0 0 20px; padding-left: 20px; } .dx-body li { margin: 0 0 6px; }
html[data-site] .dx-body .dx-h3 { font-size: 21px; line-height: 1.3; margin: 40px 0 12px; color: var(--site-ink); text-wrap: balance; }
.dx-main [id] { scroll-margin-top: calc(var(--dx-hd) + 20px); }
.dx-body b, .dx-body strong { color: var(--site-ink); font-weight: 600; }
html[data-site] .dx kbd.hn-key, .dx-kc { display: inline-block; min-width: 1.7em; padding: 1px 6px; margin: 0 1px; font: 600 12.5px/1.5 var(--font-mono); text-align: center;
  color: var(--site-ink); background: rgba(255,255,255,.06); border-radius: 5px; vertical-align: 1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1.5px 0 rgba(0,0,0,.5); }
.dx-note { padding: 14px 16px; border-radius: 12px; background: var(--site-card); border: 1px solid var(--site-line); font-size: inherit; }
html[data-site] .dx-body .dx-rule { padding: 16px 18px; border-radius: 12px; background: var(--site-card); border: 1px solid var(--site-line-strong); }
.dx-later { margin: 28px 0 0; padding: 16px 18px 8px; border-radius: 12px; border: 1px dashed var(--site-line-strong); }
.dx-later ul { margin: 8px 0; font-size: inherit; } .dx-laterh { margin: 0 !important; }
.dx-dl { margin: 0; display: grid; gap: 2px; } .dx-dl > div { padding: 14px 0; border-bottom: 1px solid var(--site-line); }
.dx-dl dt { color: var(--site-ink); font-weight: 600; margin-bottom: 4px; } .dx-dl dd { margin: 0; }
.dx-dl > div:target { background: var(--dx-vbg); border-radius: 8px; padding-inline: 12px; }
.dx-ex code, .dx-tryc code { font: 14px/1.5 var(--font-mono); color: var(--site-ink); }
.dx-ex { padding: 10px 14px; border-radius: 10px; background: #0d0d0f; border: 1px solid var(--site-line); overflow-wrap: anywhere; }

/* Next chapter: one big button at the end of every chapter */
.dx-nextch { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; margin-top: 96px; padding: 28px 28px 30px 32px;
  border-radius: 20px; text-decoration: none; color: var(--site-ink); border: 1px solid var(--site-line-strong);
  background: radial-gradient(120% 140% at 100% 0%, rgba(82,73,236,.16), transparent 55%), linear-gradient(#1b1b1f, #161619);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3), 0 20px 40px -24px rgba(0,0,0,.7);
  transition: transform 200ms var(--dx-ease), border-color 200ms, box-shadow 200ms; }
.dx-nextch:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.3), 0 28px 56px -24px rgba(0,0,0,.8); }
.dx-nextk { grid-column: 1; font-size: 14px; font-weight: 600; color: var(--site-ink-2); }
html[data-site] .dx-nextch b { grid-column: 1; display: block; margin: 4px 0 6px; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: var(--site-ink); }
.dx-nextd { grid-column: 1; font-size: 16px; line-height: 1.5; color: var(--site-ink-2); }
.dx-nexta { grid-column: 2; grid-row: 1 / span 3; box-sizing: content-box; padding: 14px; border-radius: 50%; color: #fff; background: var(--dx-v);
  box-shadow: 0 8px 24px -8px rgba(82,73,236,.7); transition: transform 200ms var(--dx-ease); }
.dx-nextch:hover .dx-nexta { transform: translateX(4px); }

/* ── Whole windows: the real app in a Mac title bar, scaled to fit, never cut ─────────────────────────────────── */
.dxw-fig { margin: 8px 0 32px; }
.dxw { position: relative; border-radius: 12px; overflow: hidden; background: #1C1C1F; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.04), 0 32px 64px -32px rgba(0,0,0,.85), 0 12px 24px -12px rgba(0,0,0,.5); }
.dxw-bar { position: relative; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; box-sizing: border-box;
  background: linear-gradient(#2B2B2F, #242428); border-bottom: 1px solid rgba(0,0,0,.55); }
.dxw-bar i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.3); }
.dxw-bar i:nth-child(2) { background: #FEBC2E; } .dxw-bar i:nth-child(3) { background: #28C840; }
.dxw-bar > span { position: absolute; inset: 0; text-align: center; font: 600 13px/28px -apple-system, "SF Pro Text", Inter, sans-serif; color: #A3A3AB; pointer-events: none; }
.dxw-body { position: relative; aspect-ratio: 1280 / 800; overflow: hidden; background: #1C1C1E; }
.dxw-img { display: block; width: 100%; height: 100%; max-width: none; transition: opacity 240ms ease; }
.dxw-body > .dxw-img + .dxw-img { position: absolute; left: 0; top: 0; }
.dxw-live { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; transform: scale(var(--k, .5)); opacity: 0;
  transition: opacity 240ms ease; background: #1C1C1E; }
.dxw.is-live .dxw-live { opacity: 1; }
.dxw-ring { position: absolute; left: 0; top: 0; z-index: 2; width: var(--rw, 40px); height: var(--rh, 40px); transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0);
  border-radius: 7px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px var(--dx-v), 0 0 0 6px var(--dx-v2), 0 0 0 100vmax rgba(8, 8, 12, .40);
  transition: transform 320ms var(--dx-ease), width 320ms var(--dx-ease), height 320ms var(--dx-ease), opacity 240ms ease; }
.dxw.is-ring .dxw-ring { opacity: 1; }
/* the live app keeps the ring on top (it ignores the pointer), without the dimming, so the reader still sees where to click */
.dxw-ring { z-index: 3; } .dxw.is-live .dxw-ring { box-shadow: 0 0 0 2px var(--dx-v), 0 0 0 6px var(--dx-v2); }
.dxw-hint { position: absolute; right: 10px; bottom: 10px; z-index: 3; margin: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px;
  color: var(--site-ink-2); background: rgba(17,17,19,.88); border: 1px solid var(--site-line-strong); pointer-events: none; transition: opacity 240ms; }
.dxw.is-on .dxw-hint, .dxw.is-live .dxw-hint, .dxw.is-still .dxw-hint { opacity: 0; }
.dxw-fig figcaption { display: flex; align-items: center; gap: 4px 16px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--site-ink-3); }
.dxw-cap { flex: 1; min-width: 0; text-wrap: pretty; }
.dxw-n { flex: none; font: 500 13px/1 var(--font-mono); color: var(--site-ink-3); font-variant-numeric: tabular-nums; }
.dxw-n b { color: var(--site-ink); font-weight: 600; }
.dx-dots { display: flex; flex: none; gap: 2px; }
.dx-dot { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dx-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background-color 200ms, transform 200ms; }
.dx-dot:hover::before { background: rgba(255,255,255,.45); }
.dx-dot.is-on::before { background: var(--dx-v); transform: scale(1.25); }

/* read-along: the window stays pinned above the steps while you read them; the step under it drives the ring */
.dx-ra { position: relative; margin: 8px 0 32px; }
.dx-rastage { position: sticky; top: calc(var(--dx-hd) + 12px); z-index: 4; padding: 4px 0 6px; background: var(--site-bg); }
.dx-rastage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; background: linear-gradient(var(--site-bg), rgba(17,17,19,0)); pointer-events: none; }
.dx-rastage .dxw-fig { margin: 0; width: min(100%, calc((100vh - var(--dx-hd) - 340px) * 1.6)); min-width: min(100%, 420px); }
.dx-steps { list-style: none; margin: 0 0 24px; padding: 0; }
.dx-ra-steps { padding-top: 22px; padding-bottom: 72px; margin-bottom: 0; }
.dx-step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 12px 14px 12px 12px; margin: 0 0 4px;
  border-left: 3px solid transparent; border-radius: 0 12px 12px 0; transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out; }
.dx-n { display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 50%; font: 600 13px/1 var(--font-mono);
  color: var(--site-ink-2); background: var(--site-card); border: 1px solid var(--site-line-strong); transition: background-color 200ms, color 200ms, border-color 200ms; }
button.dx-n { cursor: pointer; } button.dx-n:hover { border-color: rgba(255,255,255,.3); color: var(--site-ink); }
.dx-st { padding-top: 2px; } .dx-st p { margin: 0; }
.dx-ra-steps .dx-step { padding-block: 16px; cursor: pointer; }
.dx-step.is-on { border-left-color: var(--dx-v); background: var(--dx-vbg); }
.dx-step.is-on .dx-n { background: var(--dx-v); border-color: var(--dx-v); color: #fff; }
/* once the last step has gone under the pinned window, nothing stays marked */
.dx-ra.is-past .dx-step.is-on { border-left-color: transparent; background: transparent; }
.dx-ra.is-past .dx-step.is-on .dx-n { background: var(--site-card); border-color: var(--site-line-strong); color: var(--site-ink-2); }

/* ── Tools ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.dx-tool { margin: 8px 0 28px; padding: 20px; border-radius: 16px; background: var(--site-card); border: 1px solid var(--site-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 16px 32px -20px rgba(0,0,0,.6); }
html[data-site] .dx-toolh { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--site-ink-2); }
.dx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dx-chips button, .dx-cbg button { display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--site-ink-2); background: transparent; border: 1px solid var(--site-line-strong); transition: background-color 150ms, color 150ms, border-color 150ms; }
.dx-chips button small { font-size: 12px; color: var(--site-ink-3); font-variant-numeric: tabular-nums; }
.dx-chips button:hover, .dx-cbg button:hover { color: var(--site-ink); border-color: rgba(255,255,255,.28); }
.dx-chips button[aria-checked="true"], .dx-cbg button[aria-checked="true"] { background: var(--dx-v); border-color: var(--dx-v); color: #fff; }
.dx-chips button[aria-checked="true"] small { color: rgba(255,255,255,.85); }
.dx-rangew { display: grid; grid-template-columns: auto 1fr 3ch; align-items: center; gap: 14px; margin-bottom: 10px; font-size: 14px; }
.dx-rangew input { width: 100%; accent-color: var(--dx-v); height: 28px; }
.dx-rangew output { font: 600 16px/1 var(--font-mono); color: var(--site-ink); text-align: right; }
html[data-site] .dx-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 52px; margin: 0 0 14px; font-size: 14.5px; }
.dx-v, .dx-vnote { display: none; }
.dx-count[data-state="few"] [data-v="few"], .dx-count[data-state="ok"] [data-v="ok"], .dx-count[data-state="many"] [data-v="many"] { display: inline; }
.dx-v { padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 13px; }
.dx-v-few { color: #1b1a18; background: var(--dx-warn); } .dx-v-ok { color: #10230f; background: var(--dx-ok); } .dx-v-many { color: var(--site-ink); background: rgba(255,255,255,.12); }
.dx-vnote { color: var(--site-ink-2); }
.dx-thumbs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.dx-thumbs i { aspect-ratio: 4 / 5; border-radius: 4px; background: rgba(255,255,255,.025); overflow: hidden; }
.dx-thumbs i.rg:not(.on) { outline: 1px dashed rgba(255,255,255,.16); outline-offset: -1px; }
.dx-thumbs i img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(.92); transition: opacity 200ms ease, transform 200ms var(--dx-ease); }
.dx-thumbs i.on { outline: 0; background: none; } .dx-thumbs i.on img { opacity: 1; transform: none; }
.dx-thumbs i.z img { transform: scale(1.7); transform-origin: 50% 35%; } .dx-thumbs i.m img { transform: scale(1.3); transform-origin: 50% 40%; } .dx-thumbs i.f img { scale: -1 1; }
/* "Change everything except the subject": six photos of one coat, each tile says what changed */
.dx-scenes { margin: 4px 0 24px; } .dx-scenes ul { list-style: none; margin: 0; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dx-scenes li { margin: 0 !important; } .dx-scimg { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; border: 1px solid var(--site-line);
  box-shadow: 0 14px 28px -18px rgba(0,0,0,.8); }
.dx-scimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dx-sc-close-up img { transform: scale(2.1); transform-origin: 50% 36%; } .dx-sc-medium img { transform: scale(1.4); transform-origin: 50% 45%; }
.dx-sct { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--site-ink-3); }
.dx-sct b { width: 100%; color: var(--site-ink); font-weight: 600; } .dx-sct span:not(:last-child)::after { content: "\00a0·"; }   /* the dot ends a line, never starts one */
.dx-scenes figcaption { margin-top: 14px; font-size: 14px; color: var(--site-ink-3); }

/* caption builder */
.dx-cbg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
html[data-site] .dx-cbg > p { width: 92px; margin: 0; font-size: 13.5px; color: var(--site-ink-3); }
.dx-cbg button code { font: 13px/1.4 var(--font-mono); color: inherit; }
html[data-site] .dx-cbout { margin: 16px 0 14px; padding: 14px 16px; border-radius: 10px; background: #0d0d0f; border: 1px solid var(--site-line); min-height: 80px; }
.dx-cbout code { font: 15px/1.6 var(--font-mono); color: var(--site-ink); }
.dx-cbout .t { color: var(--site-accent-ink); } .dx-cbout .w { color: var(--dx-ok); }
.dx-cbout .w.is-new { animation: dx-pop 300ms var(--dx-ease); }
@keyframes dx-pop { from { background: rgba(127,203,142,.22); } to { background: transparent; } }
.dx-cbkey p { margin: 0 0 6px !important; font-size: 14.5px; }
.dx-cbw b { color: var(--dx-ok) !important; } .dx-cbx b { color: var(--dx-no) !important; }
.dx-cbx span { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.dx-cbx code { font: 13px/1.4 var(--font-mono); color: var(--dx-no); text-decoration: line-through; text-decoration-thickness: 1px; padding: 1px 6px; border-radius: 4px; background: rgba(255,138,118,.08); }
/* trigger word try-it */
.dx-try { margin: 8px 0 28px; padding: 20px; border-radius: 16px; background: var(--site-card); border: 1px solid var(--site-line); }
html[data-site] .dx-tryh { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--site-ink-2); }
.dx-tryl { display: grid; gap: 6px; font-size: 14.5px; margin-bottom: 12px; }
.dx-tryl input { max-width: 260px; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--site-line-strong); background: #0d0d0f; color: var(--site-ink); font: 15px var(--font-mono); }
.dx-tryl input:focus-visible { outline: 2px solid var(--dx-v); outline-offset: 1px; }
.dx-tryc { list-style: none; padding: 0 !important; } .dx-tryc li { padding: 6px 0; border-bottom: 1px solid var(--site-line); overflow-wrap: anywhere; }
.dx-tryc mark { border-radius: 3px; padding: 0 2px; } .dx-tryc mark.ok { background: rgba(127,203,142,.2); color: var(--dx-ok); } .dx-tryc mark.var { background: rgba(232,176,79,.2); color: var(--dx-warn); }
.dx-tryn { font-size: 14.5px; margin: 10px 0 0 !important; }
/* keyboard at real proportions */
.dx-kb:focus-visible { outline: 2px solid var(--dx-v); outline-offset: 3px; }
.dx-kbd { display: grid; gap: 5px; padding: 12px; border-radius: 14px; background: linear-gradient(#232326, #1b1b1e); border: 1px solid var(--site-line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 36px -24px rgba(0,0,0,.8); user-select: none; }
.dx-row { display: flex; gap: 5px; }
.dx-row > .dx-k { flex: 1 1 0; }
.dx-k { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; min-width: 0; height: 40px; padding: 4px 6px; margin: 0; border-radius: 6px;
  font: 500 10.5px/1.1 var(--font-mono); color: var(--site-ink-3); background: #121214; overflow: hidden; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -2px 0 rgba(0,0,0,.6);
  transition: background-color 200ms ease, color 200ms ease, transform 90ms ease, box-shadow 90ms ease; }
.dx-row:first-child .dx-k { height: 22px; align-items: center; font-size: 9px; }
.dx-k.dx-w1_0833 { flex-grow: 1.0833; } .dx-k.dx-w1_5 { flex-grow: 1.5; } .dx-k.dx-w1_8 { flex-grow: 1.8; } .dx-k.dx-w1_7 { flex-grow: 1.7; } .dx-k.dx-w2_3 { flex-grow: 2.3; }
.dx-k.dx-w2_2 { flex-grow: 2.2; } .dx-k.dx-w1_3 { flex-grow: 1.3; } .dx-k.dx-w5_1 { flex-grow: 5.1; }
.dx-row:nth-child(n+2) .dx-k[data-code^="Key"], .dx-row:nth-child(n+2) .dx-k[data-code^="Digit"] { justify-content: center; align-items: center; font-size: 13px; color: var(--site-ink-2); }
.dx-k.is-used { color: var(--site-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 0 rgba(0,0,0,.6); }
.dx-k.is-down { background: var(--dx-v); color: #fff; transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.4); }
html[data-site] .dx-kbout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 56px; margin: 14px 0 0; font-size: 16px; color: var(--site-ink); }
.dx-kbcombo:empty { display: none; }
.dx-keys { list-style: none; padding: 0 !important; } .dx-keys li { padding: 10px 0; border-bottom: 1px solid var(--site-line); }
.dx-km { flex-direction: column; align-items: flex-start !important; justify-content: space-between !important; font: 500 8.5px/1.1 "Manrope", system-ui, sans-serif !important; letter-spacing: -.01em; }
.dx-km span:first-child { align-self: flex-end; font-size: 11px; }
.dx-row:first-child .dx-km { flex-direction: row; justify-content: flex-start !important; }
.dx-arrows { flex: 3 1 0; display: flex; align-items: flex-end; gap: 4px; height: 40px; padding: 0; background: none; box-shadow: none; }
.dx-arrows > .dx-k1 { flex: 1; height: 19px !important; padding: 0 !important; justify-content: center !important; align-items: center !important; font-size: 10px !important; }
.dx-ud { flex: 1; display: grid; grid-template-rows: 1fr 1fr; gap: 2px; height: 40px; }
.dx-ud .dx-k { height: auto !important; padding: 0 !important; justify-content: center !important; align-items: center !important; font-size: 10px !important; }
/* glossary hover card */
.dx-term { text-decoration: underline dotted rgba(255,255,255,.4); text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: help; color: inherit; }
.dx-term:hover, .dx-term:focus-visible { text-decoration-color: var(--site-ink); color: var(--site-ink); outline: none; }
.dx-card-g { position: absolute; z-index: 60; width: 272px; padding: 14px 16px; border-radius: 12px; background: #1d1d21; border: 1px solid var(--site-line-strong);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); font-size: 14px; line-height: 1.5; color: var(--site-ink-2); opacity: 0; transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms var(--dx-ease); pointer-events: none; }
.dx-card-g.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dx-card-g b { display: block; margin-bottom: 4px; color: var(--site-ink); font-size: 15px; } .dx-card-g p { margin: 0 0 8px; }
.dx-card-g a { font-size: 13px; color: var(--site-accent-ink); }

/* ── ⌘K palette (dark, grouped, live preview of the whole window) ─────────────────────────────────────────────── */
.dx-pal { position: fixed; inset: 0; z-index: 400; display: grid; justify-items: center; align-items: start; padding: 14vh 16px 16px; background: rgba(6, 6, 10, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 140ms cubic-bezier(.2, 0, 0, 1); }
.dx-pal.is-on { opacity: 1; }
.dx-palp { width: min(780px, 100%); max-height: min(540px, 76vh); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; border-radius: 14px; background: #111216; color: var(--site-ink);
  box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); transform: scale(.98); transition: transform 140ms cubic-bezier(.2, 0, 0, 1); overflow: hidden; }
.dx-pal.is-on .dx-palp { transform: none; }
.dx-palq { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.dx-palq svg { flex: none; color: var(--site-ink-3); }
.dx-palq input { flex: 1; min-width: 0; height: 54px; border: 0; background: none; color: var(--site-ink); font: inherit; font-size: 17px; outline: none; }
.dx-palq input::placeholder { color: var(--site-ink-3); }
.dx-palf { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.06); overflow-x: auto; scrollbar-width: none; }
.dx-palf button { flex: none; padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 12.5px; color: var(--site-ink-3); background: none; border: 1px solid rgba(255,255,255,.1); cursor: pointer; }
.dx-palf button[aria-pressed="true"] { color: #fff; background: var(--dx-v); border-color: var(--dx-v); }
.dx-palf button span { opacity: .75; margin-left: 4px; font-variant-numeric: tabular-nums; }
.dx-palb { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; }
.dx-pall { overflow-y: auto; padding: 6px 8px 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.dx-palg { margin: 10px 8px 4px; font-size: 12px; font-weight: 600; color: var(--site-ink-3); }
.dx-palo { display: block; position: relative; padding: 8px 12px 9px 14px; border-radius: 8px; color: var(--site-ink-2); text-decoration: none; cursor: pointer; }
.dx-palo b { display: block; font-weight: 600; color: var(--site-ink); font-size: 14.5px; } .dx-palo small { display: block; font-size: 12px; color: var(--site-ink-3); margin-top: 1px; }
.dx-palo span { display: block; font-size: 13px; line-height: 1.45; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dx-palo[aria-selected="true"] { background: rgba(82, 73, 236, .16); }
.dx-palo[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--dx-v); }
.dx-palo mark { color: #fff; background: rgba(82, 73, 236, .5); border-radius: 3px; padding: 0 1px; }
.dx-palo .kc kbd { margin-right: 2px; }
.dx-palv { border-left: 1px solid rgba(255,255,255,.08); padding: 14px; overflow: hidden; }
.dx-palpic { position: relative; aspect-ratio: 1280 / 828; border-radius: 9px; overflow: hidden; background: #1c1c1e; box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08); }
.dx-palpic::before { content: ""; display: block; height: 3.4%; background: linear-gradient(#2B2B2F, #242428); }
.dx-palpic img { position: absolute; left: 0; bottom: 0; width: 100%; height: 96.6%; object-fit: cover; transition: opacity 120ms ease; }
.dx-palpic.is-art::before { display: none; } .dx-palpic.is-art img { height: 100%; }
.dx-palv b { display: block; margin-top: 12px; font-size: 15px; } .dx-palv p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--site-ink-3); }
.dx-palk { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: var(--site-ink-3); }
.dx-palk kbd { margin-right: 4px; }
.dx-palnone { padding: 28px 16px; color: var(--site-ink-3); text-align: center; }
.dx-navsearch, .dx-msearch { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; margin: 0; padding: 0 8px 0 12px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--site-ink-3); background: var(--site-card); border: 1px solid var(--site-line-strong); transition: border-color 150ms, color 150ms; }
.dx-navsearch:hover, .dx-msearch:hover { border-color: rgba(255,255,255,.3); color: var(--site-ink-2); }
.dx-navsearch span, .dx-msearch span { flex: 1; text-align: left; }

/* ── Narrower screens ───────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1239px) {
  .dx3 { grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; max-width: 1040px; }
  .dx-rail { display: none; }
}
@media (max-width: 1023px) {
  .dx3 { display: block; padding: 0 16px 80px; }
  .dx-mbar { position: sticky; top: var(--dx-hd); z-index: 30; display: flex; align-items: center; gap: 10px; margin: 0 -16px 20px; padding: 8px 16px;
    background: color-mix(in srgb, var(--site-bg) 96%, transparent); border-bottom: 1px solid var(--site-line); }
  .dx-mtoc { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--site-ink); background: var(--site-card); border: 1px solid var(--site-line-strong); }
  .dx-mcur { flex: 1; min-width: 0; font-size: 14px; color: var(--site-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dx-msearch { flex: none; width: auto; min-height: 40px; padding: 0 12px; } .dx-msearch kbd, .dx-msearch span { display: none; }
  .dx-prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--dx-v); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .dx-toc { position: fixed; inset: 0; z-index: 300; display: none; max-height: none; padding: 12px 16px 0; background: var(--site-bg); }
  .dx-toc[data-open] { display: flex; }
  .dx-tochead { padding-bottom: 6px; border-bottom: 1px solid var(--site-line); }
  .dx-tocx { display: grid; place-items: center; flex: none; width: 44px; height: 40px; border-radius: 10px; cursor: pointer; color: var(--site-ink); background: var(--site-card); border: 1px solid var(--site-line-strong); }
  .dx-tocs { flex: 1; padding-bottom: 40px; }
  html[data-site] .dx-tocch { font-size: 16px; padding-block: 8px; } html[data-site] .dx-tocc ol a { font-size: 16px; padding-block: 8px; }
  html[data-site] .dx-head h1 { font-size: 34px; }
  html[data-site] .dx-lead, html[data-site] .dx-intro { font-size: 17px; }
  html[data-site] .dx-sec .dx-h2 { font-size: 26px; }
  .dx-sec { padding-top: 44px; margin-top: 40px; }
  .dx-body { font-size: 16px; }
  .dx-rastage { top: calc(var(--dx-hd) + 57px); }
  .dx-rastage .dxw-fig { width: 100%; min-width: 0; }
  .dxw-bar { height: 18px; padding: 0 8px; gap: 5px; } .dxw-bar i { width: 7px; height: 7px; } .dxw-bar span { font-size: 12px; line-height: 18px; }
  .dxw-fig figcaption { font-size: 13px; flex-wrap: wrap; margin-top: 8px; }
  .dx-dots { display: none; }
  .dx-nextch { margin-top: 64px; padding: 22px 20px; column-gap: 14px; } html[data-site] .dx-nextch b { font-size: 25px; } .dx-nexta { padding: 10px; width: 22px; height: 22px; }
  .dx-palb { grid-template-columns: 1fr; } .dx-palv { display: none; }
  .dx-pal { padding-top: 8vh; }
  .dx-searchbtn { width: 100%; }
}
@media (max-width: 600px) {
  .dx-scenes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dx-thumbs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  html[data-site] .dx-cbg > p { width: 100%; }
  .dx-kbd { padding: 6px; gap: 3px; } .dx-row { gap: 3px; } .dx-k { height: 26px; font-size: 7px; padding: 2px 3px; border-radius: 4px; }
  .dx-row:nth-child(n+2) .dx-k[data-code^="Key"], .dx-row:nth-child(n+2) .dx-k[data-code^="Digit"] { font-size: 10px; }
  .dx-row:first-child .dx-k { height: 14px; font-size: 6px; }
  .dx-arrows, .dx-ud { height: 26px; } .dx-arrows > .dx-k1 { height: 12px !important; } .dx-km { font-size: 6px !important; } .dx-km span:first-child { font-size: 8px; }
  .dx-tool, .dx-try { padding: 16px; }
  .dx-step { padding-right: 8px; }
}

/* site-wide button / kbd rules are strong: restate the Docs controls at a higher specificity */
html[data-site] body .dx-chips button, html[data-site] body .dx-cbg button { min-height: 34px; height: auto; padding: 5px 12px; line-height: 1.35; align-items: center; font-weight: 400; box-shadow: none; }
html[data-site] body .dx-cbg button[aria-checked="true"], html[data-site] body .dx-chips button[aria-checked="true"] { background: var(--dx-v); border-color: var(--dx-v); color: #fff; }
html[data-site] body .dx-palf button { min-height: 0; height: auto; padding: 3px 10px; line-height: 1.5; font-weight: 500; box-shadow: none; }
html[data-site] body .dx-palf button[aria-pressed="true"] { color: #fff; background: var(--dx-v); border-color: var(--dx-v); }
html[data-site] body .dx-palq input, html[data-site] body .dx-palq input:focus, html[data-site] body .dx-palq input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; background: none; min-height: 0; padding: 0; border-radius: 0; }
html[data-site] body .dx kbd.hn-key, html[data-site] body .dx-pal kbd, html[data-site] body .dx kbd.dx-kc { height: auto; min-height: 0; line-height: 1.5; padding: 1px 6px; font-size: 12px; }
html[data-site] body .dx-n, html[data-site] body .dx-dot { min-height: 0; min-width: 0; box-shadow: none; }
html[data-site] body button.dx-n { width: 28px; height: 28px; padding: 0; }
html[data-site] body .dx-dot { width: 22px; height: 22px; padding: 0; border: 0; background: none; }
html[data-site] body .dx-searchbtn, html[data-site] body .dx-navsearch, html[data-site] body .dx-msearch, html[data-site] body .dx-mtoc, html[data-site] body .dx-tocx { font-weight: 400; box-shadow: none; }
html[data-site] body .dx-mtoc { font-weight: 600; }
html[data-site] body .dx-navsearch { min-height: 38px; } html[data-site] body .dx-searchbtn { min-height: 48px; }
html[data-site] .dx-nextch, html[data-site] .dx-nextch:hover { text-decoration: none; color: var(--site-ink); }

@media (prefers-reduced-motion: reduce) {
  html[data-site] body .dx *, html[data-site] body .dx-pal, html[data-site] body .dx-pal *, .dx-card-g { transition: none !important; animation: none !important; }
  .dx-nextch:hover, .dx-nextch:hover .dx-nexta { transform: none; }
}
/* the guide list's links never pick up the site's nav underline / hover pill (a touch leaves :hover behind on phones) */
html[data-site] body .dx-toc a, html[data-site] body .dx-toc a:hover, html[data-site] body .dx-toc a:focus { text-decoration: none; border: 0; box-shadow: none; background: none; }
html[data-site] body .dx-toc a:focus-visible { outline: 2px solid var(--site-accent-ink); outline-offset: -2px; border-radius: 6px; }
html[data-site] body .dx-toc a:hover, html[data-site] body .dx-rail a:hover { color: var(--site-ink); }
/* full size: a quiet icon button at the end of every window's caption */
html[data-site] body .dxw-zoom { flex: none; display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; margin-left: auto; border-radius: 8px; cursor: zoom-in;
  color: var(--site-ink-2); background: transparent; border: 1px solid var(--site-line-strong); box-shadow: none; transition: color 150ms, border-color 150ms, background-color 150ms; }
html[data-site] body .dxw-zoom:hover { color: var(--site-ink); border-color: rgba(255,255,255,.3); background: var(--site-card); }
.dxw-ra figcaption .dxw-zoom { margin-left: 4px; }
/* chapter to chapter: the text cross-fades, the guide list stays put (View Transitions; still with reduced motion) */
@view-transition { navigation: auto; }
.dx-main { view-transition-name: dx-main; } .dx-toc { view-transition-name: dx-toc; }
::view-transition-old(dx-main), ::view-transition-new(dx-main) { animation-duration: 200ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* the site-wide link hover (violet + underline, very specific selector) is for links in text; the Docs lists, the Next
   chapter button and the palette rows keep their own hover */
html[data-site] body :is(.dx-toc, .dx-rail) a:hover, html[data-site] body .dx-nextch:hover, html[data-site] body .dx-nextch:hover *, html[data-site] body .dx-palo:hover { color: var(--site-ink) !important; text-decoration: none !important; }
html[data-site] body .dx-nextch:hover .dx-nextk, html[data-site] body .dx-nextch:hover .dx-nextd { color: var(--site-ink-2) !important; }
html[data-site] body .dx-nextch:hover .dx-nexta { color: #fff !important; }
/* phones have no keyboard: the shortcuts article shows a plain list (key + what it does) instead of the Mac keyboard */
@media (max-width: 600px) {
  .dx-kb .dx-kbd, .dx-kb .dx-kbout, .dx-kb .dx-toolh, .dx-kb .dx-kbnone { display: none !important; }
  html[data-site] .dx-kb .dx-kbmap { display: block !important; list-style: none; margin: 0; padding: 0; }
  .dx-kbmap li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--site-line); font-size: 15px; line-height: 1.45; color: var(--site-ink-2); }
  .dx-kbmap li::before { content: attr(data-combo); justify-self: start; align-self: start; padding: 1px 7px; border-radius: 5px; font: 600 13px/1.5 var(--font-mono); color: var(--site-ink);
    background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); white-space: nowrap; }
  .dx-kbmap li:last-child { border-bottom: 0; }
}
/* the "try the real app" hint sits in the Mac title bar (right), never over the app's own controls (reviewer E) */
html[data-site] .dxw-bar .dxw-hint { position: absolute; right: 8px; top: 50%; bottom: auto; transform: translateY(-50%); z-index: 1; margin: 0; padding: 1px 9px; border: 0;
  border-radius: 999px; font: 500 12px/18px "Manrope", system-ui, sans-serif; font-style: normal; color: var(--site-ink-2); background: rgba(255,255,255,.07); }
/* all of a window's captions share one grid cell, so the caption keeps the height of the longest one: changing step never
   moves the steps below (phone CLS) */
.dxw-caps { flex: 1; min-width: 0; display: grid; }
.dxw-caps > .dxw-cap { grid-area: 1 / 1; }
html[data-site] .dx .dxw-fig .dxw-cap[hidden] { display: block !important; visibility: hidden; }
/* ── Tables, licence chips and links to other guides (sub-agent K, 11 Oct: install, files, AI models, own trainer, no cloud
   GPU, commercial use, ComfyUI). Text 17 px (phones 16 px), header words ink-2 (9.2:1); on phones every row is a card and
   each cell repeats its column name (.dx-tl, real text so it is translated), the header row stays for screen readers. */
.dx-tbl { width: 100%; margin: 4px 0 24px; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
.dx-tbl th, .dx-tbl td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--site-line); }
.dx-tbl th:last-child, .dx-tbl td:last-child { padding-right: 0; }
html[data-site] .dx-tbl thead th { padding-top: 0; font-size: 13.5px; line-height: 1.4; font-weight: 600; color: var(--site-ink-2); border-bottom-color: var(--site-line-strong); }
html[data-site] .dx-tbl tbody th { font-weight: 600; color: var(--site-ink); }
html[data-site] .dx-tbl td { color: var(--site-ink-2); }
.dx-tbl b { font-weight: 600; color: var(--site-ink); }
.dx-tsub { display: block; margin-top: 2px; font-weight: 400; font-size: 16px; color: var(--site-ink-2); }
.dx-tl { display: none; }
.dx-tbl-ai td:nth-child(2) { white-space: nowrap; }
.dx-tbl-ways tbody th { width: 40%; } .dx-tbl-ways td:nth-child(2) { width: 24%; }
.dx-tbl .st { white-space: normal; text-align: left; line-height: 1.35; padding-block: 3px; }
.dx-lic { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13.5px; line-height: 1.5; font-weight: 600; white-space: nowrap;
  color: var(--dx-ok); background: rgba(127, 203, 142, .08); box-shadow: inset 0 0 0 1px rgba(127, 203, 142, .32); }
.dx-lic-cond, .dx-lic-check { color: var(--dx-warn); background: rgba(232, 176, 79, .08); box-shadow: inset 0 0 0 1px rgba(232, 176, 79, .32); }
.dx-lic-no { color: var(--dx-no); background: rgba(255, 138, 118, .08); box-shadow: inset 0 0 0 1px rgba(255, 138, 118, .32); }
html[data-site] .dx-body .dx-legend { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; }
.dx-legend li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; margin: 0; }
.dx-tbl th, .dx-tbl td, .dx-fixes dd, .dx-legend li > span, .dx-tsub { text-wrap: pretty; }
.dx-legend .dx-lic { justify-self: start; }
html[data-site] .dx-body .dx-more { margin: 0 0 20px; }
html[data-site] body .dx-body .dx-more a.text-link { display: inline-flex; gap: 6px; min-height: 32px; font-size: inherit; font-weight: 600; color: var(--site-ink); }
.dx-more a::after { content: "→"; transition: transform 150ms var(--dx-ease); }
.dx-more a:hover::after { transform: translateX(3px); }
.dx-tbl-ai { table-layout: fixed; } .dx-tbl-ai thead th:nth-child(1) { width: 40%; } .dx-tbl-ai thead th:nth-child(2) { width: 17%; }
.dx-tbl-ai thead th:nth-child(3) { width: 24%; } .dx-tbl-ai thead th:nth-child(4) { width: 19%; }
.dx-stat { margin: 0 0 8px !important; }
.dx-fixes dd .st { margin-right: 6px; vertical-align: 1px; }
@media (max-width: 600px) {
  .dx-tbl, .dx-tbl tbody, .dx-tbl tr, .dx-tbl th, .dx-tbl td { display: block; width: auto !important; }
  .dx-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dx-tbl { font-size: 16px; border-top: 1px solid var(--site-line-strong); }
  .dx-tbl tr { padding: 12px 0; border-bottom: 1px solid var(--site-line); }
  .dx-tbl th, .dx-tbl td { padding: 0; border: 0; }
  .dx-tbl tbody th { margin-bottom: 6px; }
  .dx-tbl td { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; padding: 3px 0; white-space: normal !important; }
  .dx-tsub { font-size: 15px; }
  .dx-tl { display: block; font-size: 14px; line-height: 1.6; color: var(--site-ink-2); }
  .dx-tv { min-width: 0; overflow-wrap: anywhere; }
  html[data-site] .dx-body .dx-legend { grid-template-columns: minmax(0, 1fr); gap: 4px; } .dx-legend li { gap: 4px; margin-bottom: 6px; }
  /* model tables: the name on top, then size, licence and the chip on one wrapping line */
  .dx-tbl-ai tr, .dx-tbl-lic tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; row-gap: 4px; }
  .dx-tbl-ai tbody th, .dx-tbl-lic tbody th { flex: 0 0 100%; margin-bottom: 2px; }
  .dx-tbl-ai td, .dx-tbl-lic td { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; }
  .dx-tbl-ai td:last-child .dx-tl, .dx-tbl-lic td:last-child .dx-tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* What the export looks like (Train with your own tool): one card, a pill per trainer (radio buttons – no script), the real
   folder layout in mono, the folder to point the tool at marked as the selected row. */
.dx-tree { position: relative; margin: 8px 0 36px; padding: 20px 20px 16px; border-radius: 16px; border: 1px solid var(--site-line-strong);
  background: linear-gradient(#1a1a1e, #151518); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3), 0 28px 56px -30px rgba(0,0,0,.85); }
html[data-site] .dx-tree .dx-toolh { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--site-ink); }
.dx-treetabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dx-treetabs input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dx-treetabs label { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 14px; border-radius: 999px; cursor: pointer; font-size: 15px;
  color: var(--site-ink-2); border: 1px solid var(--site-line-strong); transition: color 150ms, background-color 150ms, border-color 150ms; }
.dx-treetabs label:hover { color: var(--site-ink); border-color: rgba(255,255,255,.3); }
.dx-treetabs input:checked + label { color: #111113; background: var(--site-accent-ink); border-color: var(--site-accent-ink); font-weight: 600; }   /* 8:1 */
.dx-treetabs input:focus-visible + label { outline: 2px solid var(--site-accent-ink); outline-offset: 2px; }
.dx-treeps { padding: 10px 8px; border-radius: 12px; background: #0f0f11; border: 1px solid var(--site-line); }
.dx-treep { display: none; }
.dx-tree:has(#dxt-aitk:checked) .dx-treep[data-k="aitk"], .dx-tree:has(#dxt-onetrainer:checked) .dx-treep[data-k="onetrainer"],
.dx-tree:has(#dxt-kohya:checked) .dx-treep[data-k="kohya"], .dx-tree:has(#dxt-hf:checked) .dx-treep[data-k="hf"] { display: block; }
.dx-trow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; min-height: 32px; padding: 3px 10px; border-radius: 8px; color: var(--site-ink-2); }
.dx-trow svg { flex: none; color: var(--site-ink-2); }
.dx-trow.dx-d1 { padding-left: 32px; } .dx-trow.dx-d2 { padding-left: 54px; } .dx-trow.dx-d3 { padding-left: 76px; }
html[data-site] .dx-tn { min-width: 0; overflow-wrap: anywhere; font: 14.5px/1.5 var(--font-mono); color: var(--site-ink-2); background: none; padding: 0; }
.dx-trow.is-more .dx-tn { color: var(--site-ink-2); }
.dx-trow.is-target { background: var(--dx-vbg); box-shadow: inset 0 0 0 1px var(--dx-v2); }
html[data-site] .dx-trow.is-target .dx-tn, .dx-trow.is-target svg { color: var(--site-ink); }
.dx-trk { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--site-accent-ink); }
html[data-site] .dx-trk code { font: 600 13px/1.5 var(--font-mono); color: var(--site-ink); padding: 1px 7px; border-radius: 6px; background: rgba(255,255,255,.07); }
.dx-tree figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--site-ink-2); text-wrap: pretty; }
@media (max-width: 600px) {
  .dx-tree { padding: 16px 12px 14px; } .dx-treeps { padding: 8px 4px; }
  .dx-trow.dx-d1 { padding-left: 24px; } .dx-trow.dx-d2 { padding-left: 38px; } .dx-trow.dx-d3 { padding-left: 52px; }
  .dx-trk { margin-left: 24px; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dx-more a::after { transition: none; } .dx-more a:hover::after { transform: none; } }
/* the Runs note (first-lora, pick-final, compare-runs): the label, one sentence, then two links on their own line */
.dx-runsnote .st { margin-right: 4px; vertical-align: 1px; }
.dx-runsl { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 6px; }
html[data-site] body .dx-body .dx-runsl a.text-link { font-size: inherit; font-weight: 600; color: var(--site-ink); }
/* Close-ups (K, delivery 3): whole rows of a real window at 1.25× the app's size, faded on all four sides (the picture carries
   24 px of the card's own colour round the rows, so the fade never reaches a word); rings scale with the picture; a click or the
   button opens the whole window. */
.dxc-fig { margin: 8px 0 32px; }
.dxc { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; cursor: zoom-in;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent), linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent), linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-composite: intersect; }
.dxc picture { display: block; }
.dxc-img { display: block; max-width: 100%; height: auto; }
.dxc-ring { position: absolute; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 2px var(--dx-v), 0 0 0 6px var(--dx-v2); }
.dxc-fig figcaption { display: flex; align-items: center; gap: 4px 16px; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--site-ink-2); }
@media (max-width: 1023px) { .dxc-fig figcaption { font-size: 13px; } }
.dx-dl dd, .dx-note, .dx-later li { text-wrap: pretty; }   /* no one-character last lines in the word list, notes and later boxes */
@media (max-width: 520px) {   /* phones: the narrower close-up; a shorter fade so the rings stay clear of it */
  .dxc { -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent), linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent), linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
}