/* ============================================================================
   Okami Agent · docs — page-per-section: nav + sidebar + content + right TOC
   ============================================================================ */
html, body{ overflow-x: clip; }
:root{ --dx-nav-h: 66px; }
.dx-nav{ position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: var(--ok-s-6);
  padding: 12px var(--ok-s-7); border-bottom: 1px solid var(--ok-line);
  background: color-mix(in srgb, var(--ok-bg-0) 88%, transparent); backdrop-filter: blur(14px); }
.dx-brand{ display: flex; align-items: center; gap: 11px; }
.dx-brand img{ height: 28px; }
.dx-brand img.dx-brand-word-img{ height: 17px; width: auto; }
.dx-footer-brand img.dx-footer-word-img{ height: 20px; width: auto; display: block; margin: 4px 0 6px; }
.dx-brand-word{ font-family: var(--ok-display); font-weight: 600; font-size: 17px; letter-spacing: .04em; }
.dx-brand-word b{ color: var(--ok-orange); }
.dx-brand-sub{ font-family: var(--ok-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ok-fg-dim); border-left: 1px solid var(--ok-line); padding-left: 11px; margin-left: 3px; }
.dx-search{ margin-left: var(--ok-s-5); flex: 0 1 360px; display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--ok-line); background: var(--ok-bg-0); padding: 8px 12px; transition: border-color var(--ok-fast); }
.dx-search{ position: relative; }
.dx-search:focus-within{ border-color: var(--ok-cyan); }
.dx-search .mag{ color: var(--ok-fg-mute); font-family: var(--ok-mono); font-size: 13px; }
.dx-search input{ flex: 1; background: transparent; border: 0; outline: none; color: var(--ok-fg); font-family: var(--ok-mono); font-size: 12px; }
.dx-search input::placeholder{ color: var(--ok-fg-dim); }
.dx-search .kbd{ font-family: var(--ok-mono); font-size: 10px; color: var(--ok-fg-mute); border: 1px solid var(--ok-line); padding: 1px 6px; white-space: nowrap; }
.dx-search-pop{ position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 100; border: 1px solid var(--ok-line);
  background: color-mix(in srgb, var(--ok-bg-0) 98%, black); box-shadow: 0 22px 60px -28px #000; padding: 6px; max-height: min(68vh, 520px); overflow-y: auto; }
.dx-search-pop a{ display: grid; gap: 3px; padding: 11px 12px; border: 1px solid transparent; }
.dx-search-pop a:hover{ border-color: color-mix(in oklch, var(--ok-accent) 40%, var(--ok-line)); background: var(--ok-bg-1); }
.dx-search-pop .g{ font-family: var(--ok-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok-accent); }
.dx-search-pop .t{ font-family: var(--ok-display); font-size: 14px; color: var(--ok-fg); }
.dx-search-pop .d{ font-family: var(--ok-mono); font-size: 11px; line-height: 1.45; color: var(--ok-fg-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-search-pop .empty{ padding: 14px 12px; font-family: var(--ok-mono); font-size: 12px; color: var(--ok-fg-mute); }
.dx-search-pop mark{ background: color-mix(in oklch, var(--ok-accent) 22%, transparent); color: var(--ok-fg); padding: 0 2px; }
.dx-nav-right{ margin-left: auto; display: flex; align-items: center; gap: var(--ok-s-4); }
.dx-nav-right .lang-pills{ padding: 3px; }
.dx-burger{ display: none; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid var(--ok-line); background: var(--ok-bg-1); color: var(--ok-fg); font-size: 17px; cursor: pointer; flex-shrink: 0; }
.dx-burger:hover{ border-color: var(--ok-accent); color: var(--ok-accent); }
.dx-backdrop{ position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--ok-bg-0) 70%, transparent); backdrop-filter: blur(2px); }

@media (min-width: 821px){
  body.ok{ padding-top: var(--dx-nav-h); }
  .dx-nav{ position: fixed; left: 0; right: 0; width: 100%; }
}

/* ---- layout ---- */
.dx-shell{ display: grid; grid-template-columns: 264px minmax(0, 1fr) 232px; max-width: 1440px; margin: 0 auto; align-items: start; }
.dx-side{ position: sticky; top: var(--dx-nav-h); align-self: start; height: calc(100vh - var(--dx-nav-h)); overflow-y: auto;
  border-right: 1px solid var(--ok-line); padding: var(--ok-s-7) var(--ok-s-5) var(--ok-s-8) var(--ok-s-7); }
.dx-group{ margin-bottom: var(--ok-s-6); }
.dx-group-h{ font-family: var(--ok-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ok-fg-mute); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.dx-group-h::before{ content: ""; width: 14px; height: 1px; background: var(--ok-accent); }
.dx-group-toggle{ width: 100%; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; }
.dx-group-toggle:hover, .dx-group-toggle.has-active{ color: var(--ok-accent); }
.dx-group-toggle .label{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dx-group-toggle .count{ margin-left: auto; letter-spacing: 0; color: var(--ok-fg-dim);
  border: 1px solid var(--ok-line); padding: 1px 6px; font-size: 9px; line-height: 1.2; }
.dx-group-toggle .chev{ color: var(--ok-accent); font-size: 13px; line-height: 1; width: 12px; text-align: center; }
.dx-side ul{ list-style: none; margin: 0 0 0 2px; padding: 0; display: flex; flex-direction: column; }
.dx-side li a{ display: block; font-family: var(--ok-display); font-size: 14px; color: var(--ok-fg-mute);
  padding: 7px 12px; border-left: 1px solid var(--ok-line); transition: all var(--ok-fast); margin-left: 5px; }
.dx-side li a:hover{ color: var(--ok-fg); border-left-color: var(--ok-fg-mute); }
.dx-side li a.active{ color: var(--ok-fg); border-left-color: var(--ok-accent);
  background: linear-gradient(90deg, color-mix(in oklch, var(--ok-accent) 10%, transparent), transparent); font-weight: 500; }

/* ---- content ---- */
.dx-main{ padding: var(--ok-s-8) var(--ok-s-10) var(--ok-s-12); min-width: 0; max-width: 840px; }
@media (prefers-reduced-motion: no-preference){
  .dx-main{ animation: dx-in .28s var(--ok-ease) both; }
  @keyframes dx-in{ from{ transform: translateY(7px); } to{ transform: none; } }
}
.dx-crumb{ font-family: var(--ok-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ok-fg-mute); display: flex; gap: 9px; margin-bottom: 18px; white-space: nowrap; flex-wrap: wrap; }
.dx-crumb .sep{ color: var(--ok-fg-dim); }
.dx-crumb .cur{ color: var(--ok-accent); }
.dx-kicker{ font-family: var(--ok-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ok-accent); display: inline-flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.dx-kicker::before{ content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, var(--ok-accent), var(--ok-magenta) 60%, var(--ok-cyan)); }
.dx-title{ font-family: var(--ok-display); font-weight: 500; font-size: clamp(32px, 3.6vw, 46px);
  letter-spacing: -.03em; line-height: 1.04; margin: 0 0 18px; }
.dx-intro, .dx-lead{ font-size: 17px; line-height: 1.65; color: var(--ok-fg-soft); margin: 0 0 var(--ok-s-7); max-width: 70ch; }
.dx-lead{ margin-bottom: var(--ok-s-6); }
.dx-main h3{ font-family: var(--ok-display); font-weight: 500; font-size: 22px; letter-spacing: -.015em;
  margin: var(--ok-s-9) 0 var(--ok-s-4); scroll-margin-top: 84px; position: relative; padding-bottom: 10px; border-bottom: 1px solid var(--ok-line-soft); }
.dx-anchor{ color: var(--ok-fg-dim); margin-left: 10px; font-family: var(--ok-mono); font-size: 16px; opacity: 0; transition: opacity var(--ok-fast); }
.dx-main h3:hover .dx-anchor{ opacity: 1; }
.dx-anchor:hover{ color: var(--ok-accent); }
.dx-h4{ font-family: var(--ok-display); font-weight: 600; font-size: 15px; letter-spacing: .01em; margin: var(--ok-s-6) 0 var(--ok-s-3); color: var(--ok-fg); }
.dx-main p{ font-size: 15px; line-height: 1.72; color: var(--ok-fg-soft); margin: 0 0 var(--ok-s-5); max-width: 72ch; }
.dx-main p code, .dx-li code, .dx-step p code{ font-family: var(--ok-mono); font-size: 12.5px; color: var(--ok-cyan);
  background: var(--ok-bg-1); border: 1px solid var(--ok-line); padding: 1px 6px; border-radius: var(--ok-r-1); }
.dx-main strong{ color: var(--ok-fg); font-weight: 600; }

/* ---- contextual actions ---- */
.dx-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin: calc(-1 * var(--ok-s-3)) 0 var(--ok-s-7); }
.dx-action{ border: 1px solid var(--ok-line); background: var(--ok-bg-1); color: var(--ok-fg-soft);
  font-family: var(--ok-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 12px; cursor: pointer; }
.dx-action:hover{ color: var(--ok-fg); border-color: color-mix(in oklch, var(--ok-accent) 50%, var(--ok-line)); background: var(--ok-bg-2); }
.dx-action.primary{ color: var(--ok-bg-0); background: var(--ok-accent); border-color: var(--ok-accent); font-weight: 700; }
.dx-action.done{ background: var(--ok-success); border-color: var(--ok-success); }

/* ---- code block ---- */
.dx-code{ border: 1px solid var(--ok-line); background: var(--ok-bg-0); margin: 0 0 var(--ok-s-6); position: relative;
  box-shadow: 0 0 calc(26px * var(--ok-glow)) -18px color-mix(in oklch, var(--ok-accent) 70%, transparent); }
.dx-code-head{ display: flex; align-items: center; justify-content: space-between; padding: 8px 14px;
  border-bottom: 1px solid var(--ok-line); font-family: var(--ok-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ok-fg-mute); background: var(--ok-bg-1); }
.dx-code-head .lang{ color: var(--ok-fg-soft); }
.dx-code-copy{ border: 0; background: transparent; color: var(--ok-fg-mute); font-family: var(--ok-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; transition: color var(--ok-fast); cursor: pointer; }
.dx-code-copy:hover{ color: var(--ok-cyan); }
.dx-code-copy.done{ color: var(--ok-success); }
.dx-code pre{ margin: 0; padding: 16px 18px; overflow-x: auto; }
.dx-code code{ font-family: var(--ok-mono); font-size: 13px; line-height: 1.8; color: var(--ok-fg); display: block; white-space: pre; }
.dx-code .cm{ color: var(--ok-fg-dim); }

/* ---- lists ---- */
.dx-ul, .dx-ol{ margin: 0 0 var(--ok-s-6); padding: 0; list-style: none; counter-reset: dxc; }
.dx-li{ font-size: 15px; line-height: 1.65; color: var(--ok-fg-soft); padding: 9px 0 9px 28px; position: relative;
  border-top: 1px dashed var(--ok-line-soft); max-width: 72ch; }
.dx-li:first-child{ border-top: 0; }
.dx-ul .dx-li::before{ content: "→"; position: absolute; left: 4px; top: 9px; color: var(--ok-accent); }
.dx-ol .dx-li{ counter-increment: dxc; padding-left: 34px; }
.dx-ol .dx-li::before{ content: counter(dxc); position: absolute; left: 0; top: 8px; font-family: var(--ok-mono);
  font-size: 11px; color: var(--ok-accent); border: 1px solid color-mix(in oklch, var(--ok-accent) 40%, var(--ok-line)); width: 20px; height: 20px;
  display: grid; place-items: center; line-height: 1; }

/* ---- params reference ---- */
.dx-params{ border: 1px solid var(--ok-line); margin: 0 0 var(--ok-s-6); }
.dx-param{ padding: 14px 18px; border-top: 1px solid var(--ok-line-soft); }
.dx-param:first-child{ border-top: 0; }
.dx-param-head{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.dx-param-head .nm{ font-family: var(--ok-mono); font-size: 13px; color: var(--ok-accent); background: none; border: 0; padding: 0; }
.dx-param-head .ty{ font-family: var(--ok-mono); font-size: 11px; color: var(--ok-cyan); }
.dx-param-head .df{ font-family: var(--ok-mono); font-size: 10px; color: var(--ok-fg-mute); letter-spacing: .04em; margin-left: auto; }
.dx-param-desc{ font-size: 14px; line-height: 1.55; color: var(--ok-fg-soft); }

/* ---- steps ---- */
.dx-steps{ list-style: none; counter-reset: dxs; margin: 0 0 var(--ok-s-6); padding: 0; position: relative; }
.dx-step{ counter-increment: dxs; position: relative; padding: 0 0 var(--ok-s-6) 44px; }
.dx-step::before{ content: counter(dxs); position: absolute; left: 0; top: 0; width: 28px; height: 28px;
  display: grid; place-items: center; font-family: var(--ok-mono); font-size: 12px; color: var(--ok-bg-0);
  background: var(--ok-accent); font-weight: 600; box-shadow: 0 0 calc(12px * var(--ok-glow)) -2px var(--ok-accent); }
.dx-step::after{ content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 1px; background: var(--ok-line); }
.dx-step:last-child::after{ display: none; }
.dx-step-h{ font-family: var(--ok-display); font-weight: 500; font-size: 18px; letter-spacing: -.01em; margin: 2px 0 8px; padding-top: 2px; }
.dx-step p{ margin-bottom: var(--ok-s-3); }

/* ---- visual flows ---- */
.dx-flow{ display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; margin: var(--ok-s-4) 0 var(--ok-s-6); }
.dx-flow-item{ position: relative; border: 1px solid var(--ok-line); background: var(--ok-bg-1); padding: 16px 16px 18px; min-height: 138px; }
.dx-flow-item:not(:last-child)::after{ content: "→"; position: absolute; right: -14px; top: 22px; z-index: 1; font-family: var(--ok-mono); color: var(--ok-accent); background: var(--ok-bg-0); padding: 0 3px; }
.dx-flow-num{ font-family: var(--ok-mono); font-size: 10px; color: var(--ok-accent); letter-spacing: .12em; margin-bottom: 16px; }
.dx-flow-title{ font-family: var(--ok-display); font-size: 15px; font-weight: 500; color: var(--ok-fg); margin-bottom: 8px; }
.dx-flow-desc{ font-size: 12.5px; line-height: 1.5; color: var(--ok-fg-mute); }

/* ---- cards ---- */
.dx-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: var(--ok-s-4) 0 var(--ok-s-6); }
.dx-card{ border: 1px solid var(--ok-line); background: var(--ok-bg-1); padding: 18px 20px; transition: all var(--ok-mid); display: block; }
.dx-card:hover{ border-color: color-mix(in oklch, var(--ok-accent) 45%, var(--ok-line)); background: var(--ok-bg-2); }
.dx-card-t{ font-family: var(--ok-display); font-weight: 500; font-size: 16px; color: var(--ok-fg); margin-bottom: 6px; }
.dx-card-t .arr{ color: var(--ok-accent); transition: transform var(--ok-fast); display: inline-block; }
.dx-card:hover .dx-card-t .arr{ transform: translateX(4px); }
.dx-card-d{ font-size: 13px; color: var(--ok-fg-mute); line-height: 1.5; }

/* ---- table ---- */
.dx-table{ border: 1px solid var(--ok-line); margin: 0 0 var(--ok-s-6); font-family: var(--ok-mono); overflow: hidden; }
.dx-tr{ display: grid; border-top: 1px solid var(--ok-line-soft); }
.dx-tr:first-child{ border-top: 0; }
.dx-tr.h{ background: var(--ok-bg-0); }
.dx-tr.h > div{ font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok-fg-mute); }
.dx-tr > div{ padding: 12px 16px; font-size: 12.5px; color: var(--ok-fg-soft); border-left: 1px solid var(--ok-line-soft); line-height: 1.5; }
.dx-tr > div:first-child{ border-left: 0; color: var(--ok-accent); }
.dx-tr.h > div:first-child{ color: var(--ok-fg-mute); }
.dx-tr > div code{ background: none; border: 0; padding: 0; color: var(--ok-cyan); font-size: 12px; }
.dx-badge{ display: inline-flex; align-items: center; min-height: 21px; border: 1px solid var(--ok-line); padding: 2px 7px;
  font-family: var(--ok-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.dx-badge.safe, .dx-badge.essential{ color: var(--ok-success); border-color: color-mix(in oklch, var(--ok-success) 50%, var(--ok-line)); background: color-mix(in oklch, var(--ok-success) 8%, transparent); }
.dx-badge.sensitive, .dx-badge.standard{ color: var(--ok-warning); border-color: color-mix(in oklch, var(--ok-warning) 50%, var(--ok-line)); background: color-mix(in oklch, var(--ok-warning) 8%, transparent); }
.dx-badge.dangerous, .dx-badge.power{ color: var(--ok-magenta); border-color: color-mix(in oklch, var(--ok-magenta) 50%, var(--ok-line)); background: color-mix(in oklch, var(--ok-magenta) 8%, transparent); }

/* ---- note / callout ---- */
.dx-note{ display: flex; gap: 14px; border: 1px solid var(--ok-line); background: var(--ok-bg-1);
  padding: 14px 18px; margin: 0 0 var(--ok-s-6); position: relative; }
.dx-note::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; }
.dx-note .ico{ font-family: var(--ok-mono); font-weight: 700; flex-shrink: 0; font-size: 14px; line-height: 1.6; }
.dx-note .txt{ font-size: 14px; line-height: 1.6; color: var(--ok-fg-soft); }
.dx-note .txt .ttl{ display: block; color: var(--ok-fg); font-family: var(--ok-display); font-size: 14px; font-weight: 600; margin-bottom: 3px; letter-spacing: -.005em; }
.dx-note .txt code{ font-family: var(--ok-mono); font-size: 12px; color: var(--ok-cyan); background: var(--ok-bg-0); border: 1px solid var(--ok-line); padding: 1px 5px; }
.dx-note.info::before{ background: var(--ok-cyan); } .dx-note.info .ico{ color: var(--ok-cyan); }
.dx-note.tip::before{ background: var(--ok-accent); } .dx-note.tip .ico{ color: var(--ok-accent); }
.dx-note.ok::before{ background: var(--ok-success); } .dx-note.ok .ico{ color: var(--ok-success); }
.dx-note.warn::before{ background: var(--ok-warning); } .dx-note.warn .ico{ color: var(--ok-warning); }
.dx-note.danger::before{ background: var(--ok-magenta); } .dx-note.danger .ico{ color: var(--ok-magenta); }

/* ---- cmds ---- */
.dx-cmds{ display: flex; flex-direction: column; border: 1px solid var(--ok-line); margin: 0 0 var(--ok-s-6); }
.dx-cmd{ display: grid; grid-template-columns: minmax(0,210px) 1fr; gap: 14px; padding: 12px 16px; align-items: baseline; border-top: 1px dashed var(--ok-line-soft); }
.dx-cmd:first-child{ border-top: 0; }
.dx-cmd code{ font-family: var(--ok-mono); font-size: 12.5px; color: var(--ok-accent); }
.dx-cmd .d{ font-family: var(--ok-mono); font-size: 12px; color: var(--ok-fg-mute); line-height: 1.45; }
.dx-cmd .d code{ color: var(--ok-cyan); font-size: 11.5px; }

/* ---- prev/next ---- */
.dx-pager{ display: flex; justify-content: space-between; gap: 16px; margin-top: var(--ok-s-9); padding-top: var(--ok-s-6); border-top: 1px solid var(--ok-line); }
.dx-pager a{ flex: 1; border: 1px solid var(--ok-line); padding: 16px 20px; transition: all var(--ok-mid); }
.dx-pager a:hover{ border-color: color-mix(in oklch, var(--ok-accent) 40%, var(--ok-line)); background: var(--ok-bg-1); }
.dx-pager .dir{ font-family: var(--ok-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok-fg-mute); margin-bottom: 6px; }
.dx-pager .ttl{ font-family: var(--ok-display); font-size: 16px; color: var(--ok-fg); }
.dx-pager a.next{ text-align: right; }

/* ---- right TOC ---- */
.dx-toc{ position: sticky; top: var(--dx-nav-h); align-self: start; height: calc(100vh - var(--dx-nav-h)); overflow-y: auto;
  padding: var(--ok-s-8) var(--ok-s-6) var(--ok-s-8) 0; }
.dx-toc-h{ font-family: var(--ok-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ok-fg-mute); margin: 0 0 14px; }
.dx-toc ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dx-toc a{ display: block; font-family: var(--ok-mono); font-size: 12px; color: var(--ok-fg-mute);
  padding: 5px 12px; border-left: 1px solid var(--ok-line); transition: all var(--ok-fast); line-height: 1.4; }
.dx-toc a:hover{ color: var(--ok-fg-soft); border-left-color: var(--ok-fg-mute); }
.dx-toc a.active{ color: var(--ok-accent); border-left-color: var(--ok-accent); }
.dx-toc .edit{ margin-top: 20px; font-family: var(--ok-mono); font-size: 11px; letter-spacing: .06em; color: var(--ok-fg-mute); padding-left: 12px; display: inline-block; border: 0; }
.dx-toc .edit:hover{ color: var(--ok-accent); }

/* ---- per-group accent tones ---- */
.tone-orange{ --ok-accent: var(--ok-orange); --ok-accent-2: var(--ok-magenta); }
.tone-cyan{ --ok-accent: var(--ok-cyan); --ok-accent-2: var(--ok-magenta); }
.tone-magenta{ --ok-accent: var(--ok-magenta); --ok-accent-2: var(--ok-cyan); }

/* ---- in-page color: accent tick on headings, cycling card colors ---- */
.dx-main h3{ position: relative; }
.dx-main h3::before{ content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 2px;
  background: linear-gradient(90deg, var(--ok-accent), var(--ok-magenta)); box-shadow: 0 0 calc(10px * var(--ok-glow)) -2px var(--ok-accent); }
.dx-cards .dx-card:nth-child(3n+1){ border-top: 2px solid var(--ok-accent); }
.dx-cards .dx-card:nth-child(3n+2){ border-top: 2px solid var(--ok-cyan); }
.dx-cards .dx-card:nth-child(3n+3){ border-top: 2px solid var(--ok-magenta); }
.dx-code-head .lang{ color: var(--ok-accent); }

/* ---- FAQ accordion ---- */
.dx-faq-list{ border: 1px solid var(--ok-line); margin: 0 0 var(--ok-s-6); }
.dx-faq{ border-top: 1px solid var(--ok-line-soft); }
.dx-faq:first-child{ border-top: 0; }
.dx-faq > summary{ list-style: none; cursor: pointer; padding: 15px 18px 15px 40px; position: relative;
  font-family: var(--ok-display); font-weight: 500; font-size: 15.5px; color: var(--ok-fg); transition: color var(--ok-fast); }
.dx-faq > summary::-webkit-details-marker{ display: none; }
.dx-faq > summary::before{ content: "+"; position: absolute; left: 16px; top: 14px; font-family: var(--ok-mono);
  font-size: 16px; color: var(--ok-accent); transition: transform var(--ok-fast); line-height: 1.2; }
.dx-faq[open] > summary::before{ content: "−"; }
.dx-faq > summary:hover{ color: var(--ok-accent); }
.dx-faq[open] > summary{ color: var(--ok-accent); }
.dx-faq-a{ padding: 0 18px 16px 40px; font-size: 14px; line-height: 1.65; color: var(--ok-fg-soft); }
.dx-faq-a code{ font-family: var(--ok-mono); font-size: 12px; color: var(--ok-cyan); background: var(--ok-bg-0); border: 1px solid var(--ok-line); padding: 1px 5px; }

@media (max-width: 1100px){
  .dx-shell{ grid-template-columns: 240px minmax(0,1fr); }
  .dx-toc{ display: none; }
  .dx-cards{ grid-template-columns: 1fr; }
  .dx-flow{ grid-template-columns: 1fr 1fr; }
  .dx-flow-item:not(:last-child)::after{ display: none; }
}
@media (max-width: 820px){
  :root{ --dx-mobile-nav-h: 158px; }
  .dx-shell{ grid-template-columns: 1fr; }
  .dx-main{ padding: var(--ok-s-7) var(--ok-s-6) var(--ok-s-10); max-width: none; }
  .dx-search{ order: 3; flex: 1 0 100%; margin-left: 0; }
  .dx-search-pop{ position: fixed; left: var(--ok-s-5); right: var(--ok-s-5); top: 70px; }
  .dx-burger{ display: inline-flex; }
  .dx-nav{ gap: var(--ok-s-4); padding: 11px var(--ok-s-5); z-index: 90; flex-wrap: wrap; row-gap: 10px; }
  .dx-brand-sub{ display: none; }
  .dx-nav-right .ok-btn.solid{ display: none; }
  .dx-side{ position: fixed; top: var(--dx-mobile-nav-h); left: 0; z-index: 80; height: calc(100vh - var(--dx-mobile-nav-h)); width: min(322px, 84vw);
    border-right: 1px solid var(--ok-line); border-top: 1px solid var(--ok-line); background: var(--ok-bg-0); padding: var(--ok-s-5) var(--ok-s-6) var(--ok-s-8);
    transform: translateX(-102%); transition: transform var(--ok-mid); overflow-y: auto; }
  .dx-side.open{ transform: none; box-shadow: 0 0 60px -10px #000; }
}
@media (max-width: 640px){
  .dx-table{ border: 0; background: transparent; overflow: visible; display: grid; gap: 12px; }
  .dx-table .dx-tr.h{ display: none; }
  .dx-table .dx-tr{ display: block; border: 1px solid var(--ok-line); background: var(--ok-bg-1); }
  .dx-table .dx-tr > div{ display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr); gap: 12px; border-left: 0; border-top: 1px dashed var(--ok-line-soft); padding: 11px 13px; overflow-wrap: anywhere; }
  .dx-table .dx-tr > div:first-child{ border-top: 0; color: var(--ok-fg-soft); }
  .dx-table .dx-tr > div::before{ content: attr(data-label); font-family: var(--ok-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok-accent); line-height: 1.6; }
  .dx-search-pop .d{ white-space: normal; }
}
@media (max-width: 460px){
  .dx-nav-right .ok-btn.ghost{ display: none; }
  .dx-main{ padding: var(--ok-s-6) var(--ok-s-5) var(--ok-s-9); }
  .dx-flow{ grid-template-columns: 1fr; }
}

/* ---- site footer ---- */
.dx-footer{ border-top: 1px solid var(--ok-line); margin-top: var(--ok-s-6); padding: var(--ok-s-9) var(--ok-s-7) var(--ok-s-7);
  max-width: 1440px; margin-left: auto; margin-right: auto;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ok-bg-1) 50%, transparent)); }
.dx-footer-in{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ok-s-8); flex-wrap: wrap; }
.dx-footer-brand{ max-width: 42ch; }
.dx-footer-brand img{ height: 30px; }
.dx-footer-word{ font-family: var(--ok-display); font-weight: 600; font-size: 16px; letter-spacing: .04em; margin: 10px 0 8px; }
.dx-footer-word b{ color: var(--ok-orange); }
.dx-footer-tag{ font-size: 13.5px; line-height: 1.6; color: var(--ok-fg-mute); margin: 0; }
.dx-footer-links{ display: flex; flex-direction: column; gap: 9px; }
.dx-footer-links a{ font-family: var(--ok-mono); font-size: 12px; letter-spacing: .06em; color: var(--ok-fg-soft); transition: color var(--ok-fast); }
.dx-footer-links a:hover{ color: var(--ok-accent); }
.dx-footer-links a .arr{ color: var(--ok-fg-dim); }
.dx-footer-links a:hover .arr{ color: var(--ok-accent); }
.dx-footer-legal{ display: flex; justify-content: space-between; gap: var(--ok-s-5); flex-wrap: wrap;
  margin-top: var(--ok-s-7); padding-top: var(--ok-s-5); border-top: 1px solid var(--ok-line-soft);
  font-family: var(--ok-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ok-fg-mute); }
.dx-footer-legal .note{ text-transform: none; letter-spacing: .02em; color: var(--ok-fg-dim); }