/* ============================================================================
 * dartwork-design.css — design-token overhaul layered on top of Shibuya.
 *
 * Strategy
 * --------
 * • Don't replace Shibuya. Override the points that matter (typography,
 *   color, spacing, code styling) so the entire docs read consistently.
 * • Tokens come from Radix UI Colors (12-step gray + teal + alpha
 *   overlays). Everything else maps to those tokens — no raw hex codes
 *   in component rules.
 * • Conventions: ONE --dm-* namespace. Scale tokens (--dm-gray-*,
 *   --dm-accent-*, --dm-radius-*, --dm-space-*, --dm-fs/lh/ls-*,
 *   --dm-weight-*, --dm-shadow-*) carry Radix Colors values; semantic
 *   aliases (--dm-text-*, --dm-bg-*, --dm-border-*, --dm-link*) layer on
 *   top (distinct second segment = no collision). The --sy-* names from
 *   Shibuya stay untouched.
 *
 * Loaded after custom.css and dynamic_ux.css (see conf.py order).
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 1. Tokens — Radix gray (slate) + accent (teal) scale
 * --------------------------------------------------------------------------- */

:root {
  /* Gray scale — Radix Slate (the canonical neutral) */
  --dm-gray-1: #fcfcfd;
  --dm-gray-2: #f9f9fb;
  --dm-gray-3: #f0f0f3;
  --dm-gray-4: #e8e8ec;
  --dm-gray-5: #e0e1e6;
  --dm-gray-6: #d9d9e0;
  --dm-gray-7: #cdced6;
  --dm-gray-8: #b9bbc6;
  --dm-gray-9: #8b8d98;
  --dm-gray-10: #80828d;
  --dm-gray-11: #60646c;
  --dm-gray-12: #1c2024;

  /* Alpha overlays — for tinted backgrounds and hover states */
  --dm-gray-a1: rgba(0, 0, 85, 0.012);
  --dm-gray-a2: rgba(0, 0, 51, 0.024);
  --dm-gray-a3: rgba(0, 8, 60, 0.059);
  --dm-gray-a4: rgba(0, 0, 39, 0.090);
  --dm-gray-a5: rgba(0, 0, 30, 0.122);
  --dm-gray-a6: rgba(0, 0, 32, 0.149);
  --dm-gray-a7: rgba(2, 8, 38, 0.196);
  --dm-gray-a8: rgba(0, 4, 47, 0.275);
  --dm-gray-a9: rgba(0, 5, 24, 0.455);
  --dm-gray-a10: rgba(0, 4, 21, 0.498);
  --dm-gray-a11: rgba(0, 3, 13, 0.624);
  --dm-gray-a12: rgba(0, 2, 7, 0.890);

  /* Accent — Teal (matches Shibuya's accent_color="teal" choice) */
  --dm-accent-1: #fafefd;
  --dm-accent-2: #f3fbf9;
  --dm-accent-3: #e0f8f3;
  --dm-accent-4: #ccf3ea;
  --dm-accent-5: #b8eae0;
  --dm-accent-6: #a1ddd1;
  --dm-accent-7: #83cdbf;
  --dm-accent-8: #53b9ab;
  --dm-accent-9: #12a594;
  --dm-accent-10: #0d9b8a;
  --dm-accent-11: #008573;
  --dm-accent-12: #0d3d38;

  /* Magenta for inline code (Radix's signature) */
  --dm-pink-3: #fceef5;
  --dm-pink-11: #cd1d8d;

  /* Semantic status scales (Radix amber / blue / green / red) — for callouts,
   * lint tags, admonitions. Steps: 3 = soft bg, 6 = border, 9 = solid/stripe,
   * 11 = text-on-soft. Replaces the raw Tailwind callout hexes. */
  --dm-warning-3: #fff7c2; --dm-warning-6: #f3d673; --dm-warning-9: #ffc53d; --dm-warning-11: #ab6400;
  --dm-info-3: #e6f4fe;    --dm-info-6: #acd8fc;    --dm-info-9: #0090ff;    --dm-info-11: #0d74ce;
  --dm-success-3: #e6f6eb; --dm-success-6: #adddc0; --dm-success-9: #30a46c; --dm-success-11: #218358;
  --dm-danger-3: #feebec;  --dm-danger-6: #fdbdbe;  --dm-danger-9: #e5484d;  --dm-danger-11: #ce2c31;

  /* Space scale (px-based; --scaling=1 baseline) */
  --dm-space-1: 4px;
  --dm-space-2: 8px;
  --dm-space-3: 12px;
  --dm-space-4: 16px;
  --dm-space-5: 24px;
  --dm-space-6: 32px;
  --dm-space-7: 40px;
  --dm-space-8: 48px;
  --dm-space-9: 64px;

  /* Font-size scale (Radix Themes Text 1..9) */
  --dm-fs-1: 12px;
  --dm-fs-2: 14px;
  --dm-fs-3: 16px;
  --dm-fs-4: 18px;
  --dm-fs-5: 20px;
  --dm-fs-6: 24px;
  --dm-fs-7: 28px;
  --dm-fs-8: 35px;
  --dm-fs-9: 60px;

  /* Line-height scale — paired 1:1 with font-size so callers only
   * need to pick a size step. Values straight from Radix Themes. */
  --dm-lh-1: 16px;
  --dm-lh-2: 20px;
  --dm-lh-3: 24px;
  --dm-lh-4: 26px;
  --dm-lh-5: 28px;
  --dm-lh-6: 30px;
  --dm-lh-7: 36px;
  --dm-lh-8: 40px;
  --dm-lh-9: 60px;

  /* Letter-spacing scale — keep text tracking neutral across viewports. */
  --dm-ls-1: 0em;
  --dm-ls-2: 0em;
  --dm-ls-3: 0em;
  --dm-ls-4: 0em;
  --dm-ls-5: 0em;
  --dm-ls-6: 0em;
  --dm-ls-7: 0em;
  --dm-ls-8: 0em;
  --dm-ls-9: 0em;

  /* Font weights — Radix Themes ships a four-step ladder
   * (light/regular/medium/bold). We add one extra `semibold` step
   * because Shibuya's sidebar chrome rides at medium and h3/h4
   * disappear into it unless lifted one notch. Inter ships
   * SemiBold (600) as a real cut so the alias is faithful. */
  --dm-weight-light: 300;
  --dm-weight-regular: 400;
  --dm-weight-medium: 500;
  --dm-weight-semibold: 600;
  --dm-weight-bold: 700;

  /* Default font-feature settings.
   *   ss01: alternate single-storey 'a' (cleaner at body sizes)
   *   cv11: open-counter '4' (avoids the confusable closed 4)
   *   calt: contextual alternates (default on but make it explicit)
   * Headings inherit these via the body rule. */
  --dm-font-features: "ss01" on, "cv11" on, "calt" on;

  /* Font families — canonical stacks every component references (replaces the
   * scattered --sy-f-* Shibuya refs and ad-hoc literal stacks). */
  --dm-f-sys: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --dm-f-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Semantic typography roles - component/page scaffold rules consume these
   * aliases instead of binding directly to raw size/line/weight steps. */
  --dm-type-display-size: var(--dm-fs-8);
  --dm-type-display-line: var(--dm-lh-8);
  --dm-type-display-weight: var(--dm-weight-semibold);
  --dm-type-display-spacing: var(--dm-ls-8);
  --dm-type-heading-size: var(--dm-fs-5);
  --dm-type-heading-line: var(--dm-lh-5);
  --dm-type-heading-weight: var(--dm-weight-semibold);
  --dm-type-heading-spacing: var(--dm-ls-5);
  --dm-type-body-size: var(--dm-fs-3);
  --dm-type-body-line: var(--dm-lh-3);
  --dm-type-body-weight: var(--dm-weight-regular);
  --dm-type-body-spacing: var(--dm-ls-3);
  --dm-type-label-size: var(--dm-fs-2);
  --dm-type-label-line: var(--dm-lh-2);
  --dm-type-label-weight: var(--dm-weight-medium);
  --dm-type-label-spacing: var(--dm-ls-2);
  --dm-type-caption-size: var(--dm-fs-1);
  --dm-type-caption-line: var(--dm-lh-1);
  --dm-type-caption-weight: var(--dm-weight-medium);
  --dm-type-caption-spacing: var(--dm-ls-1);
  --dm-type-mono-size: var(--dm-fs-1);
  --dm-type-mono-line: var(--dm-lh-1);
  --dm-type-mono-weight: var(--dm-weight-medium);
  --dm-type-mono-spacing: var(--dm-ls-1);

  /* Radius — keep modest; large radii undermine the precision feel */
  --dm-radius-1: 3px;
  --dm-radius-2: 4px;
  --dm-radius-3: 6px;
  --dm-radius-4: 8px;
  --dm-radius-5: 12px;
  --dm-radius-6: 16px;
  --dm-radius-full: 9999px;

  /* Shadow ladder — Radix's stacked-inset+blur composition */
  --dm-shadow-1:
    inset 0 -1px 1px 0 var(--dm-gray-a3),
    inset 0 0 0 1px var(--dm-gray-a4);
  --dm-shadow-2:
    0 0 0 1px var(--dm-gray-a4),
    0 1px 2px 0 var(--dm-gray-a5);
  --dm-shadow-3:
    0 0 0 1px var(--dm-gray-a5),
    0 2px 3px -1px var(--dm-gray-a3),
    0 3px 8px -2px var(--dm-gray-a6);
  --dm-shadow-4:
    0 0 0 1px var(--dm-gray-a6),
    0 8px 40px var(--dm-gray-a3),
    0 12px 32px -16px var(--dm-gray-a5);

  /* dartwork aliases — what component rules below actually reference */
  --dm-text-strong: var(--dm-gray-12);
  --dm-text-default: var(--dm-gray-12);
  --dm-text-muted: var(--dm-gray-11);
  --dm-text-faint: var(--dm-gray-10);
  --dm-link: var(--dm-accent-11);
  --dm-link-hover: var(--dm-accent-9);
  --dm-bg-page: #ffffff;
  --dm-bg-subtle: var(--dm-gray-2);
  --dm-bg-panel: var(--dm-gray-1);
  --dm-bg-hover: var(--dm-gray-a3);
  --dm-bg-active: var(--dm-gray-a4);
  --dm-border-faint: var(--dm-gray-a4);
  --dm-border: var(--dm-gray-a6);
  --dm-border-strong: var(--dm-gray-a8);

}

/* Dark mode counterparts — Radix slateDark + tealDark */
html.dark,
body[data-theme="dark"] {
  --dm-gray-1: #111113;
  --dm-gray-2: #18191b;
  --dm-gray-3: #212225;
  --dm-gray-4: #272a2d;
  --dm-gray-5: #2e3135;
  --dm-gray-6: #363a3f;
  --dm-gray-7: #43484e;
  --dm-gray-8: #5a6169;
  --dm-gray-9: #696e77;
  --dm-gray-10: #777b84;
  --dm-gray-11: #b0b4ba;
  --dm-gray-12: #edeef0;

  --dm-gray-a1: rgba(0, 0, 0, 0);
  --dm-gray-a2: rgba(216, 248, 248, 0.027);
  --dm-gray-a3: rgba(244, 246, 248, 0.075);
  --dm-gray-a4: rgba(229, 247, 251, 0.106);
  --dm-gray-a5: rgba(238, 249, 251, 0.137);
  --dm-gray-a6: rgba(238, 247, 254, 0.180);
  --dm-gray-a7: rgba(231, 247, 254, 0.247);
  --dm-gray-a8: rgba(235, 248, 255, 0.349);
  --dm-gray-a9: rgba(236, 245, 255, 0.420);
  --dm-gray-a10: rgba(238, 246, 255, 0.483);
  --dm-gray-a11: rgba(243, 249, 255, 0.702);
  --dm-gray-a12: rgba(253, 254, 255, 0.937);

  /* Full tealDark ramp — completes the scale so NO accent step leaks its
   * light value into dark mode. Steps 3/9/10/11 are the existing tuned
   * anchors; 1,2,4,5,6,7,8,12 fill the ramp between them. */
  --dm-accent-1: #0c1413;
  --dm-accent-2: #0f1b18;
  --dm-accent-3: #112725;
  --dm-accent-4: #14302d;
  --dm-accent-5: #173a35;
  --dm-accent-6: #1d473f;
  --dm-accent-7: #245a50;
  --dm-accent-8: #2d7163;
  --dm-accent-9: #12a594;
  --dm-accent-10: #25c2ad;
  --dm-accent-11: #76dac3;
  --dm-accent-12: #adf0dd;
  --dm-pink-3: #310f1f;
  --dm-pink-11: #e93d82;

  /* Semantic status scales — dark steps (Radix amber / blue / green / red). */
  --dm-warning-3: #302008; --dm-warning-6: #5c3d05; --dm-warning-9: #ffc53d; --dm-warning-11: #ffca16;
  --dm-info-3: #0d2847;    --dm-info-6: #104d87;    --dm-info-9: #0090ff;    --dm-info-11: #70b8ff;
  --dm-success-3: #132d21; --dm-success-6: #20573e; --dm-success-9: #30a46c; --dm-success-11: #3dd68c;
  --dm-danger-3: #3b1219;  --dm-danger-6: #72232d;  --dm-danger-9: #e5484d;  --dm-danger-11: #ff9592;

  --dm-bg-page: #0c0c0e;
  --dm-bg-subtle: var(--dm-gray-2);
  --dm-bg-panel: var(--dm-gray-2);
}

/* ---------------------------------------------------------------------------
 * 2. Typography — heading scale + body rhythm
 *
 * Match Radix Themes' h1/h2 scale (35/24) with neutral tracking.
 * Shibuya gives h1=36/800 by default; Radix runs 35/700. We adopt 700
 * weight with neutral tracking because tightened text gets cramped in the
 * wider docs canvas.
 * --------------------------------------------------------------------------- */

body {
  color: var(--dm-text-default);
  font-feature-settings: var(--dm-font-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings — pin each to a Radix Text step.
 *   h1 → size-8  (35/40, neutral tracking, bold)
 *   h2 → size-6  (24/30, neutral tracking, bold)
 *   h3 → size-5  (20/28, neutral tracking, semibold·600 lift for hierarchy)
 *   h4 → size-4  (18/26, neutral tracking, semibold·600)
 * Radix's spec uses medium (500) for h3/h4; we lift to 600 because
 * Shibuya's sidebar and TOC ride at medium too — without the lift,
 * h3 disappears into the chrome.
 *
 * No `:where()` here — Shibuya defines `.yue h1` { font-size: 36px; ... }
 * with class-level specificity, so the override needs the same
 * specificity to win. (Body-prose rules below stay in `:where()`
 * to let widget classes win without per-widget exemptions.) */
.yue h1,
.yue h2,
.yue h3,
.yue h4 {
  color: var(--dm-text-strong);
}

/* Tier 1 design diet — headings and strong drop one weight step.
 *   h1/h2: bold (700) -> semibold (600)   [Vercel/Stripe/Linear pattern]
 *   h3/h4: semibold (600) -> medium (500) [Radix Themes canonical]
 *   <strong>: bold (700) -> semibold (600)
 *
 * Net effect: page no longer accumulates near-black bold across
 * heading + strong + body-default. Hierarchy stays intact because
 * size deltas (35 / 24 / 20 / 18) carry the structure on their own. */
.yue h1 {
  font-size: var(--dm-fs-8);
  font-weight: var(--dm-weight-semibold);
  line-height: var(--dm-lh-8);
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: var(--dm-space-2);
}

.yue h2 {
  font-size: var(--dm-fs-6);
  font-weight: var(--dm-weight-semibold);
  line-height: var(--dm-lh-6);
  letter-spacing: 0;
  margin-top: var(--dm-space-8);
  margin-bottom: var(--dm-space-3);
}

.yue h3 {
  font-size: var(--dm-fs-5);
  font-weight: var(--dm-weight-medium);
  line-height: var(--dm-lh-5);
  letter-spacing: 0;
  margin-top: var(--dm-space-6);
  margin-bottom: var(--dm-space-2);
}

.yue h4 {
  font-size: var(--dm-fs-4);
  font-weight: var(--dm-weight-medium);
  line-height: var(--dm-lh-4);
  letter-spacing: 0;
  margin-top: var(--dm-space-5);
  margin-bottom: var(--dm-space-2);
}

/* Body prose — Radix Text size-3 (16/24).
 *
 * Wrap selectors in :where() so they contribute zero specificity.
 * Any widget rule defined with a real class selector
 * (e.g. .dm-landing-tagline { font-size: 3.2em }) wins automatically
 * — no need to enumerate widget exemptions one by one. */
:where(.yue) p,
:where(.yue) li {
  font-size: var(--dm-fs-3);
  font-weight: var(--dm-weight-regular);
  line-height: var(--dm-lh-3);
  letter-spacing: 0;
  color: var(--dm-text-default);
}

/* Inline emphasis — Radix maps <strong> to the bold weight token
 * and leaves <em> at the regular weight (italic only). No `:where()`
 * here: Shibuya sets `.yue strong { font-weight: 600 }` so we need
 * matching specificity to push to 700. */
.yue strong,
.yue b {
  font-weight: var(--dm-weight-semibold);
  color: var(--dm-text-strong);
}

.yue em,
.yue i {
  font-weight: var(--dm-weight-regular);
  font-style: italic;
}

/* Small / footnote text — Radix Text size-2 (14/20). */
.yue small,
.yue .rx-text-2 {
  font-size: var(--dm-fs-2);
  line-height: var(--dm-lh-2);
  letter-spacing: 0;
}

:where(.yue) p {
  margin-top: 0;
  margin-bottom: var(--dm-space-4);
}

:where(.yue) p + p,
:where(.yue) li + li {
  margin-top: 0;
}

/* Heading rules already win without :where() because every default
 * heading style on the page also relies on single-class specificity;
 * but using :where() here too keeps the cascade story consistent. */

/* ---------------------------------------------------------------------------
 * 3. Inline code — intentionally NOT overridden.
 *
 * We tried Radix's signature pink chip (pink-3 bg + pink-11 fg) but
 * reverted: the Shibuya default (subtle neutral background) reads better
 * against this site's heavy use of inline code in prose. Leaving this
 * section empty means Shibuya's own `code.literal` styling wins.
 * --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 4. Code blocks — flatter, Radix-style with subtle ring instead of border
 * --------------------------------------------------------------------------- */

.yue div.highlight {
  background-color: var(--dm-bg-subtle) !important;
  border: 1px solid var(--dm-border-faint) !important;
  border-radius: var(--dm-radius-3);
  box-shadow: none;
  margin: var(--dm-space-4) 0;
}

.yue div.highlight pre {
  background-color: transparent !important;
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 22px;
}

/* Copy button — make it discreet until hover */
.yue button.copybtn {
  opacity: 0;
  transition: opacity 0.15s ease;
  border-radius: var(--dm-radius-2);
}

.yue div.highlight:hover button.copybtn {
  opacity: 0.6;
}

.yue div.highlight button.copybtn:hover {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * 5. Links — Radix-style underline + accent
 * --------------------------------------------------------------------------- */

.yue a {
  color: var(--dm-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--dm-accent-7);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.12s ease, color 0.12s ease;
}

.yue a:hover {
  color: var(--dm-link-hover);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
 * 6. Sidebar — tighten padding, add hover, mark current page
 * --------------------------------------------------------------------------- */

.shibuya-sidebar a,
.sy-sidebar a {
  font-size: 14px;
  line-height: 20px;
  color: var(--dm-text-muted);
  padding: 5px 10px;
  border-radius: var(--dm-radius-2);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.shibuya-sidebar a:hover,
.sy-sidebar a:hover {
  background-color: var(--dm-bg-hover);
  color: var(--dm-text-strong);
  text-decoration: none;
}

.shibuya-sidebar .current > a,
.shibuya-sidebar a.current,
.sy-sidebar .current > a,
.sy-sidebar a.current {
  background-color: var(--dm-accent-3);
  color: var(--dm-accent-11);
  font-weight: var(--dm-weight-semibold);
}

.shibuya-sidebar .caption,
.sy-sidebar .caption {
  font-size: 11px;
  font-weight: var(--dm-weight-semibold);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--dm-text-faint);
  margin-top: var(--dm-space-5);
  margin-bottom: var(--dm-space-2);
}

/* ---------------------------------------------------------------------------
 * 7. Header / top nav
 * --------------------------------------------------------------------------- */

.shibuya-header,
.sy-header {
  box-shadow: none;
  border-bottom: 1px solid var(--dm-border-faint);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  background-color: color-mix(in srgb, var(--dm-bg-page) 80%, transparent);
}

.sy-head-nav a {
  color: var(--dm-text-muted);
  font-weight: var(--dm-weight-medium);
  font-size: 14px;
  transition: color 0.12s ease;
}

.sy-head-nav a:hover,
.sy-head-nav a.active {
  color: var(--dm-text-strong);
}

@media (max-width: 1180px) {
  .sy-head-nav,
  .sy-head-extra,
  .sy-head-actions {
    min-width: 0;
  }

  .sy-head-links,
  .sy-head-extra .searchbox {
    display: none;
  }
}

@media (max-width: 480px) {
  .sy-breadcrumbs {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * 8. Admonitions / callouts — flatten the colored stripe, use a softer ring
 * --------------------------------------------------------------------------- */

/* Tier 1 — admonitions go from filled card to a quiet left-stripe.
 * Removes the colored fill that made every note/tip/warning land like
 * a full-bleed card in the page. The 3px accent stripe + transparent
 * background keeps the semantic cue without competing with prose. */
.yue .admonition,
.yue div.admonition {
  background-color: transparent;
  border: none;
  border-left: 3px solid var(--dm-border-strong);
  border-radius: 0;
  box-shadow: none;
  padding: var(--dm-space-1) 0 var(--dm-space-1) var(--dm-space-4);
  margin: var(--dm-space-5) 0;
}

.yue .admonition > .admonition-title,
.yue div.admonition > p.admonition-title {
  background-color: transparent;
  color: var(--dm-text-strong);
  font-weight: var(--dm-weight-semibold);
  font-size: 14px;
  letter-spacing: 0;
  margin: 0 0 var(--dm-space-2);
  padding: 0;
}

/* Tier 1 — stripe color carries the semantic, fill stays transparent. */
.yue .admonition.note,
.yue .admonition.tip {
  background-color: transparent;
  border-left-color: var(--dm-accent-9);
}
.yue .admonition.note > .admonition-title,
.yue .admonition.tip > .admonition-title {
  color: var(--dm-accent-11);
}

.yue .admonition.warning,
.yue .admonition.caution,
.yue .admonition.important {
  background-color: transparent;
  border-left-color: var(--dm-warning-9);   /* soft amber stripe only, no fill */
}
.yue .admonition.warning > .admonition-title,
.yue .admonition.caution > .admonition-title,
.yue .admonition.important > .admonition-title {
  color: #92531a;
}

/* ---------------------------------------------------------------------------
 * 9. Tables — Radix's quiet horizontal-rule style
 * --------------------------------------------------------------------------- */

.yue table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: var(--dm-space-4) 0;
  font-size: 14px;
}

.yue table th,
.yue table td {
  border-top: 1px solid var(--dm-border-faint);
  border-bottom: 1px solid var(--dm-border-faint);
  padding: var(--dm-space-2) var(--dm-space-3);
  text-align: left;
  vertical-align: top;
}

/* Tier 1 — no fill on header row; rely on weight + thicker bottom border. */
.yue table th {
  font-weight: var(--dm-weight-medium);
  color: var(--dm-text-strong);
  background-color: transparent;
  border-bottom: 2px solid var(--dm-border);
}

.yue table tr + tr td {
  border-top: none;
}

.yue table tr:hover td {
  background-color: var(--dm-bg-hover);
}

/* ---------------------------------------------------------------------------
 * 9b. sphinx-design cards — drop the fill, keep the structure.
 *
 * Tier 1 design diet: the landing "What's in the box" grid was a row
 * of solid-filled cards. Replaced with transparent + faint border so
 * the cards recede and the prose inside them does the work.
 * --------------------------------------------------------------------------- */

.yue .sd-card,
.yue div.sd-card {
  background-color: transparent;
  border: 1px solid var(--dm-border-faint);
  border-radius: var(--dm-radius-3);
  box-shadow: none;
}

.yue .sd-card-body {
  background-color: transparent;
}

.yue .sd-card-header,
.yue .sd-card-footer {
  background-color: transparent;
  border-color: var(--dm-border-faint);
}

/* ---------------------------------------------------------------------------
 * 10. Buttons / pills / chips that show up via sphinx-design + custom HTML
 * --------------------------------------------------------------------------- */

.yue .sd-btn,
.yue .sd-button {
  border-radius: var(--dm-radius-3);
  font-weight: var(--dm-weight-medium);
  font-size: 14px;
  padding: 6px 14px;
  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  box-shadow: var(--dm-shadow-2);
}

.yue .sd-btn-primary,
.yue .sd-btn-info {
  background-color: var(--dm-accent-9) !important;
  color: #ffffff !important;
  border-color: var(--dm-accent-9) !important;
}

.yue .sd-btn-primary:hover,
.yue .sd-btn-info:hover {
  background-color: var(--dm-accent-10) !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
 * 11. "On this page" right-rail TOC — refine type scale and spacing
 * --------------------------------------------------------------------------- */

.shibuya-toc,
.sy-toc,
.sy-rside .localtoc,
.sy-right-toc {
  font-size: 13px;
}

.shibuya-toc .caption-text,
.sy-toc .caption-text,
.sy-rside .localtoc h3,
.sy-right-toc .caption-text {
  font-size: 11px;
  font-weight: var(--dm-weight-semibold);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--dm-text-faint);
}

.shibuya-toc a,
.sy-toc a,
.sy-rside .localtoc a,
.sy-right-toc a {
  color: var(--dm-text-muted);
  padding: 4px 0;
  text-decoration: none;
}

.shibuya-toc a:hover,
.sy-toc a:hover,
.sy-rside .localtoc a:hover,
.sy-right-toc a:hover {
  color: var(--dm-text-strong);
}

.shibuya-toc .active > a,
.sy-toc .active > a,
.sy-rside .localtoc .active > a,
.sy-right-toc .active > a {
  color: var(--dm-accent-11);
  font-weight: var(--dm-weight-semibold);
}

/* ---------------------------------------------------------------------------
 * 12. Page-level surfaces — body bg + section dividers
 * --------------------------------------------------------------------------- */

body {
  background-color: var(--dm-bg-page);
}

.yue hr {
  border: none;
  border-top: 1px solid var(--dm-border-faint);
  margin: var(--dm-space-7) 0;
}

/* ---------------------------------------------------------------------------
 * 13. Focus ring — accessibility (Radix's signature 2px accent ring)
 * --------------------------------------------------------------------------- */

.yue a:focus-visible,
.yue button:focus-visible,
.shibuya-sidebar a:focus-visible,
.sy-sidebar a:focus-visible {
  outline: 2px solid var(--dm-accent-9);
  outline-offset: 2px;
  border-radius: var(--dm-radius-2);
}

/* ---------------------------------------------------------------------------
 * 14. Selection — accent-tinted instead of OS default
 * --------------------------------------------------------------------------- */

::selection {
  background-color: var(--dm-accent-5);
  color: var(--dm-accent-12);
}


/* ===========================================================================
 * TIER 2 + 3 — minimal-design diet, second wave
 *
 * Layered last so it wins the cascade against dynamic_ux.css and custom.css
 * widgets that predate the radix overlay. Three groups:
 *
 *   A. Flatten heavy widget containers (lint-sim, install-picker, etc.).
 *      User reported "container inside container" — these widgets ship
 *      as carded boxes (border + radius + fill + shadow). Strip the
 *      outer shell to hairlines, drop the nested fills.
 *
 *   B. Designer chrome polish — body letter-spacing, sidebar active as
 *      a left-stripe, button flat (no shadow, transparent fill on
 *      primary/info), code-block border removed.
 *
 *   C. Hero — gradient tagline → solid gray-12, weight 600, lighter
 *      letter-spacing. uv-add chip → quiet hairline.
 *
 * Every rule is scoped to a widget class, so it can't leak into
 * unrelated components.
 * =========================================================================== */

/* --- Group A — flatten widget containers --- */

/* Validation simulator (.dm-lint-sim) — outer shell becomes hairline-only.
 * Inner result list (.dm-ls-results) drops its own border/fill.
 * Result lines (.dm-ls-line) adopt the admonition left-stripe pattern. */
.dm-lint-sim {
  border: none !important;
  border-top: 1px solid var(--dm-border-faint) !important;
  border-bottom: 1px solid var(--dm-border-faint) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.dm-ls-head {
  border-bottom: 1px solid var(--dm-border-faint) !important;
}

.dm-ls-title {
  font-weight: var(--dm-weight-semibold) !important;
}

.dm-ls-results {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 4px 0 !important;
}

.dm-ls-line {
  background: transparent !important;
  border-radius: 0 !important;
  border-left-width: 3px !important;
  padding-left: 12px;
}

/* Install picker — migrated to the interactive primitive SSOT (P3b). The
 * picker now composes .dm-seg + .dm-code + .dm-icon-btn; its layout shell
 * lives in dm-interactive.css §10. The old flatten-override here — including
 * the .dm-ip-tab { background: transparent !important } that clobbered the
 * active fill and caused the invisible-active bug — is removed. */

/* --- Group B — designer chrome --- */

/* Body letter-spacing — keep neutral tracking for predictable docs wrapping. */
body,
.yue {
  letter-spacing: 0;
}

/* Heading letter-spacing — neutral tracking prevents cramped large headings. */
.yue h1 {
  letter-spacing: 0;
}

.yue h2 {
  letter-spacing: 0;
}

/* Sidebar active — replace the accent-3 fill with a left-stripe so the
 * active item carries less visual weight. The fill made every active
 * page look like a chip; the stripe + text-color shift keeps the cue. */
.shibuya-sidebar .current > a,
.shibuya-sidebar a.current,
.sy-sidebar .current > a,
.sy-sidebar a.current {
  background-color: transparent !important;
  color: var(--dm-text-strong) !important;
  font-weight: var(--dm-weight-medium) !important;
  position: relative;
  box-shadow: inset 2px 0 0 var(--dm-accent-9);
}

/* Buttons — flat, no shadow. Primary/info go from filled accent → outlined */
.yue .sd-btn,
.yue .sd-button {
  box-shadow: none !important;
}

.yue .sd-btn-primary,
.yue .sd-btn-info {
  background-color: transparent !important;
  color: var(--dm-accent-11) !important;
  border: 1px solid var(--dm-accent-9) !important;
}

.yue .sd-btn-primary:hover,
.yue .sd-btn-info:hover {
  background-color: var(--dm-accent-2) !important;
  color: var(--dm-accent-12) !important;
}

/* Code block — keep the subtle fill; drop the border + outline for flatness */
.yue div.highlight {
  border: none !important;
  box-shadow: none !important;
}

/* --- Group C — hero --- */

/* Tagline — gradient → solid gray-12 + weight 600 (user choice).
 * Neutral tracking keeps the hero title from feeling cramped. */
.dm-landing-tagline {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  color: var(--dm-gray-12) !important;
  font-weight: var(--dm-weight-semibold) !important;
  letter-spacing: 0;
}

html.dark .dm-landing-tagline,
body[data-theme="dark"] .dm-landing-tagline {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  color: var(--dm-gray-12) !important;
}

/* Install chip (uv add box) — heavy gradient + shadow → quiet hairline */
.dm-landing-install {
  background: transparent !important;
  border: 1px solid var(--dm-border-faint) !important;
  border-radius: var(--dm-radius-3) !important;
  box-shadow: none !important;
}

.dm-landing-install:hover {
  border-color: var(--dm-border) !important;
  box-shadow: none !important;
  transform: none !important;
}


/* ===========================================================================
 * TIER 4 — compare-widget tab toggles + asset-content user-perspective edits
 *
 * The 7 inline compare widgets (.dmc-tabs / .dmc-tab) each ship the same
 * pattern: white-pill background, colored dot indicator, drop shadow on
 * active. They pull attention away from the actual figures the user is
 * comparing. Replaced with a flat underline-tab pattern (Linear /
 * Stripe / Vercel docs convention).
 *
 * Each widget's inline <style> block carries an ID prefix (#dm-cmp-l2-bar
 * etc.) so a generic .dmc-tab rule loaded after the widget's own style
 * wins as long as it uses !important. Loading order is enforced by
 * conf.py's html_css_files (dartwork-design.css is the last entry).
 * =========================================================================== */

/* Tab strip — drop the pill background entirely. The two labels become
 * a left-aligned row with a bottom hairline underline; active tab gets
 * a 2px accent stripe right under it. */
.dmc-tabs {
  display: inline-flex !important;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--dm-border-faint) !important;
  margin: 0 0 0.7em !important;
}

.dmc-tab {
  padding: 6px 14px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--dm-text-muted) !important;
  font-size: 0.85em !important;
  font-weight: var(--dm-weight-medium) !important;
  letter-spacing: 0;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  transition: color 0.12s, border-color 0.12s !important;
}

.dmc-tab:hover {
  color: var(--dm-text-strong) !important;
}

/* Drop the colored dot. The label itself carries the semantic. */
.dmc-tab::before {
  display: none !important;
}

/* Active tab — accent text + 2px accent underline. The CSS selectors
 * inside each widget's inline style cover both "a checked" and
 * "b checked" branches; we re-target both via the same .dmc-tab-* class
 * so the styles below win in either state. */
.dmc-tab-before,
.dmc-tab-after {
  background: transparent !important;
  box-shadow: none !important;
}

/* When a tab is "the active one" (its label is the immediate parent of
 * a checked radio, signaled by the existing widget code switching the
 * .dmc-tab-* styles), we override with the underline accent. The
 * widget code already toggles a temporary fill — we mask it. */
input.dmc-radio:checked + input.dmc-radio + .dmc-tabs .dmc-tab-after,
input.dmc-radio + input.dmc-radio:checked + .dmc-tabs .dmc-tab-before {
  color: var(--dm-text-strong) !important;
  border-bottom-color: var(--dm-accent-9) !important;
}

/* Stage frame — the inline styles wrap the comparison images in a
 * rounded card with its own border + fill. Already subtle in light
 * mode; keep but make sure the widget's accent (the tab underline)
 * stays the focal point. */
.dmc-stage {
  border-color: var(--dm-border-faint) !important;
  background: var(--dm-bg-page) !important;
  border-radius: var(--dm-radius-3) !important;
}


/* ===========================================================================
 * TIER 5 — universal widget unification
 *
 * One visual language for every interactive widget in the docs:
 *   - underline tabs (no pills, no dots, no fills)
 *   - hairline section dividers (no carded outer containers)
 *   - generous breathing room between tab strip and panel content
 *   - flat colormap-grid / palette-grid panels
 *
 * Targets sphinx-design tab-sets, the legacy palette catalog (.dm-pc-*),
 * the preset compare widget (.dm-preset-compare), the ROI ruler
 * (.dm-ruler-widget), the validation simulator (.dm-lint-sim), and a
 * couple of dynamic_ux widgets that still ship as raised cards.
 *
 * Loaded after dartwork-design's earlier sections so it wins; uses
 * !important to beat each widget's per-id inline styles or its own
 * stylesheet.
 * =========================================================================== */

/* ---- sphinx-design tab-set (e.g. integrations/mcp_server, layout, …) ---- */

.yue .sd-tab-set {
  margin: 1.6em 0 2em !important;
}

.yue .sd-tab-set > input + label,
.yue .sd-tab-set > input + label.sd-tab-label {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--dm-text-muted) !important;
  font-weight: var(--dm-weight-medium) !important;
  font-size: 14.5px !important;
  letter-spacing: 0;
  padding: 8px 16px !important;
  margin: 0 !important;
  transition: color 0.12s, border-color 0.12s !important;
}

.yue .sd-tab-set > input + label:hover {
  color: var(--dm-text-strong) !important;
  background: transparent !important;
}

.yue .sd-tab-set > input:checked + label,
.yue .sd-tab-set > input:checked + label.sd-tab-label {
  color: var(--dm-text-strong) !important;
  border-bottom-color: var(--dm-accent-9) !important;
  background: transparent !important;
}

/* The strip itself — bottom hairline carries the tabs */
.yue .sd-tab-set > input + label {
  margin-bottom: -1px !important;
}

.yue .sd-tab-set {
  border-bottom: 1px solid var(--dm-border-faint);
  padding-bottom: 0;
}

.yue .sd-tab-set::after {
  /* Cancel sphinx-design's default underline strip — our label hairline
   * already carries the separator. */
  display: none !important;
}

/* Panel content: paragraph-of-breathing-room below the active label */
.yue .sd-tab-content {
  padding: 1.4em 0 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---- Legacy palette-catalog tab strip (.dm-pc-tabs / .dm-pc-tab) ---- */

.dm-pc-tabs {
  display: flex !important;
  gap: 0 !important;
  margin-bottom: 1.4em !important;
  border-bottom: 1px solid var(--dm-border-faint) !important;
  flex-wrap: wrap !important;
}

.dm-pc-tab {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--dm-text-muted) !important;
  font-family: inherit !important;
  font-weight: var(--dm-weight-medium) !important;
  font-size: 14px !important;
  letter-spacing: 0;
  padding: 8px 14px !important;
  margin-bottom: -1px !important;
  transition: color 0.12s, border-color 0.12s !important;
}

.dm-pc-tab:hover {
  color: var(--dm-text-strong) !important;
  border-color: transparent !important;
}

.dm-pc-tab.is-active,
.dm-pc-tab[aria-selected="true"] {
  color: var(--dm-text-strong) !important;
  border-bottom-color: var(--dm-accent-9) !important;
  background: transparent !important;
}

/* ---- Color-sheet wrapper (.dm-color-sheet) — strip the outer card ---- */

.dm-color-sheet {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 2em !important;
}

.dm-sheet-title {
  margin: 0.4em 0 1em !important;
  padding: 0 !important;
  border: none !important;
  font-size: 18px !important;
  font-weight: var(--dm-weight-semibold) !important;
  color: var(--dm-text-strong) !important;
  letter-spacing: 0;
}

.dm-section-divider {
  border-top: 1px solid var(--dm-border-faint) !important;
  margin: 0 0 1.2em !important;
}

/* ---- Preset compare widget — drop the outer card + control overflow --- */

.dm-preset-compare {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 1.6em 0 2em !important;
}

/* The rcparam read-out grid was 3-column with no min-width; it overflowed
 * the card on narrower viewports. Loosen the minmax so cells re-flow to
 * 2 then 1 column as space tightens. */
.dm-pc-info,
.dm-pc-rcparams,
.dm-pc-params {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px 24px !important;
}

/* ---- ROI ruler widget (.dm-ruler-widget) — flat + relayout ---- */

.dm-ruler-widget {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 1.6em 0 !important;
  overflow: visible !important;
}

.dm-rw-head {
  padding: 0 0 4px !important;
  border-bottom: 1px solid var(--dm-border-faint);
}

.dm-rw-title {
  font-size: 16px !important;
  font-weight: var(--dm-weight-semibold) !important;
  letter-spacing: 0;
}

.dm-rw-title code {
  background: var(--dm-bg-subtle) !important;
  border: 1px solid var(--dm-border-faint) !important;
  padding: 1px 6px !important;
  font-size: 0.85em !important;
}

.dm-rw-sub {
  font-size: 13.5px !important;
  color: var(--dm-text-muted) !important;
  margin: 6px 0 0 !important;
}

/* Relayout: preset selector on its own row at full width,
 * fs/fw/lw helpers on the row below in a 3-column grid. The original
 * auto-fit grid was mixing all four controls together, so 'Preset' sat
 * awkwardly next to 'fs' on wide viewports. */
.dm-rw-controls {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  padding: 14px 0 16px !important;
  border-bottom: 1px solid var(--dm-border-faint) !important;
}

.dm-rw-ctrl-preset {
  /* The preset control gets its own row (single-column wide); the JS
   * builder marks it with this class. Falls back gracefully if absent. */
  grid-column: 1 / -1;
}

.dm-rw-ctrl-helpers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.dm-rw-ctrl > span {
  font-size: 12.5px !important;
  font-weight: var(--dm-weight-medium) !important;
  color: var(--dm-text-muted) !important;
  letter-spacing: 0;
  text-transform: none !important;
}

.dm-rw-ctrl > span em {
  color: var(--dm-accent-11) !important;
  font-weight: var(--dm-weight-medium) !important;
}

.dm-rw-ctrl select {
  font-size: 13.5px !important;
  border: 1px solid var(--dm-border) !important;
  border-radius: var(--dm-radius-2) !important;
  background: var(--dm-bg-page) !important;
  color: var(--dm-text-strong) !important;
  padding: 6px 10px !important;
}

.dm-rw-stage {
  background: transparent !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--dm-border-faint);
}

.dm-rw-readouts {
  background: transparent !important;
  border-color: var(--dm-border-faint) !important;
  border-left: none !important;
  border-right: none !important;
  padding: 10px 0 !important;
}

.dm-rw-readouts > div {
  font-size: 13px !important;
}

.dm-rw-code {
  border-radius: var(--dm-radius-3) !important;
  margin-top: 12px !important;
  font-size: 12.5px !important;
}

/* ---- Validation simulator panel — tighten font scale (inherits the
 *      Tier-2 flatten from earlier) ---- */

.dm-ls-title {
  font-size: 16px !important;
  font-weight: var(--dm-weight-semibold) !important;
  letter-spacing: 0;
}

.dm-ls-sub {
  font-size: 13.5px !important;
  color: var(--dm-text-muted) !important;
}

.dm-ls-grid label > span {
  font-size: 12.5px !important;
  font-weight: var(--dm-weight-medium) !important;
  color: var(--dm-text-muted) !important;
}

/* Validator widget — live figure preview area. The JS draws an SVG mock
 * that updates with every slider. */
.dm-ls-figpreview {
  margin: 14px 0 16px;
  padding: 12px 0;
  border-top: 1px solid var(--dm-border-faint);
  border-bottom: 1px solid var(--dm-border-faint);
}

.dm-ls-figpreview-label {
  font-size: 12px;
  font-weight: var(--dm-weight-medium);
  color: var(--dm-text-muted);
  margin-bottom: 8px;
  letter-spacing: 0;
}

.dm-ls-figsvg {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* Explorer widget shared layer. Generated HTML from
 * build_categorical_explorer.py, build_colormap_explorer.py must not carry page-local inline style tags; grouped
 * selectors keep the explorers on the same docs skin without changing either
 * fragment root. */
#dm-cat-exp *,#dm-cmap-exp *{box-sizing:border-box;}
#dm-cat-exp,#dm-cmap-exp {width:100%;max-width:100%;container-type:inline-size;overflow:clip;background:var(--dm-bg-page,#fff);color:var(--dm-gray-12,#1f2933);
  font-family:var(--dm-f-sys,"Inter",system-ui,sans-serif);letter-spacing: 0;}
#dm-cat-exp .cx-count,#dm-cmap-exp .cx-count{font:600 12px var(--dm-f-mono,ui-monospace,monospace);color:var(--dm-text-muted,#667085);margin:0 0 16px;}
#dm-cat-exp .md,#dm-cmap-exp .md{display:grid;grid-template-columns:minmax(10rem,10.5rem) minmax(0,1fr);gap:var(--dm-space-4,16px);align-items:start;}
@media(max-width:760px){#dm-cat-exp .md,#dm-cmap-exp .md{grid-template-columns:1fr;gap:var(--dm-space-4,16px);}#dm-cat-exp .detail,#dm-cmap-exp .detail{position:static!important;}}
#dm-cat-exp .rail,#dm-cmap-exp .rail{display:flex;flex-direction:column;gap:1px;position:sticky;top:96px;
  max-height:calc(100vh - 120px);overflow-y:auto;padding-right:4px;scrollbar-width:thin;}
#dm-cat-exp .rail::-webkit-scrollbar,#dm-cmap-exp .rail::-webkit-scrollbar{width:9px;}
#dm-cat-exp .rail::-webkit-scrollbar-thumb,#dm-cmap-exp .rail::-webkit-scrollbar-thumb{background:var(--dm-gray-a4,rgba(0,0,0,.13));border-radius:9px;border:2px solid transparent;background-clip:content-box;}
#dm-cat-exp .rail .fh,#dm-cmap-exp .rail .fh{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing: 0;
  color:var(--dm-gray-10,#7c8794);margin:16px 0 5px;}
#dm-cat-exp .rail .fh:first-child,#dm-cmap-exp .rail .fh:first-child{margin-top:0;}
#dm-cat-exp .ri,#dm-cmap-exp .ri{display:flex;align-items:center;gap:10px;padding:4px 9px;border-radius:var(--dm-radius-4,8px);cursor:pointer;min-width:0;border:0;background:transparent;text-align:left;color:inherit;width:100%;}
#dm-cat-exp .ri:hover,#dm-cmap-exp .ri:hover{background:var(--dm-gray-a2,rgba(0,0,0,.05));}
#dm-cat-exp .ri.on,#dm-cmap-exp .ri.on{background:var(--dm-accent-2,#e6f7f4);}
#dm-cat-exp .ri .mini,#dm-cmap-exp .ri .mini{display:inline-flex;flex:0 0 40px;height:12px;}
#dm-cat-exp .ri .mini i {flex:1;min-width:0;}
#dm-cat-exp .ri .nm,#dm-cmap-exp .ri .nm{font-size:12px;font-weight:400;color:var(--dm-gray-12,#1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
#dm-cat-exp .ri.on .nm,#dm-cmap-exp .ri.on .nm{color:var(--dm-accent-11,#0c6b5e);font-weight:500;}
#dm-cat-exp .detail,#dm-cmap-exp .detail{min-width:0;background:var(--dm-bg-panel,#f7f9f9);border:1px solid var(--dm-border-faint,rgba(0,0,0,.12));border-radius:var(--dm-radius-5,12px);padding:var(--dm-space-5,24px);}
#dm-cat-exp .d-ey,#dm-cmap-exp .d-ey{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing: 0;color:var(--dm-accent-11,#0c6b5e);margin-bottom:7px;}
#dm-cat-exp .d-title,#dm-cmap-exp .d-title{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;}
#dm-cat-exp .d-title h3,#dm-cmap-exp .d-title h3{margin:0;font-size:var(--dm-type-display-size,25px);line-height:var(--dm-type-display-line,1.2);font-weight:var(--dm-type-display-weight,700);letter-spacing: 0;}
#dm-cat-exp .d-key,#dm-cmap-exp .d-key{font-family:var(--dm-f-mono,monospace);font-size:13px;color:var(--dm-accent-11,#0c6b5e);
  background:var(--dm-accent-2,#e6f7f4);padding:2px 9px;border-radius:var(--dm-radius-3,6px);font-weight:500;cursor:pointer;align-self:center;border:0;}
#dm-cat-exp .d-key:hover,#dm-cmap-exp .d-key:hover{background:var(--dm-accent-3,#d3f1ea);}
#dm-cat-exp .d-key.copied,#dm-cmap-exp .d-key.copied{background:var(--dm-accent-3,#e0f8f3);color:var(--dm-accent-11,#008573);}
#dm-cat-exp .d-key.copied::after,#dm-cmap-exp .d-key.copied::after{content:" \2713";}
#dm-cat-exp .d-use,#dm-cmap-exp .d-use{font-size:15.5px;color:var(--dm-gray-11,#4a5560);line-height:1.62;margin:11px 0 8px;min-height:3.24em;}
#dm-cat-exp .a11y-chips,#dm-cmap-exp .a11y-chips{display:flex;flex-wrap:wrap;gap:7px;margin-left:auto;align-items:center;justify-content:flex-end;align-self:center;}
#dm-cat-exp .a11y-chip,#dm-cmap-exp .a11y-chip{--a-color:var(--dm-gray-8,#98a1ab);position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--a-color);
  border-radius:var(--dm-radius-full,999px);padding:3px 10px;background:transparent;color:var(--dm-gray-11,#4a5560);line-height:1.15;white-space:nowrap;cursor:help;outline:none;}
#dm-cat-exp .a11y-chip.ok,#dm-cmap-exp .a11y-chip.ok{--a-color:var(--dm-accent-9,#12a594);}
#dm-cat-exp .a11y-chip.mid {--a-color:var(--dm-warning-11);}
#dm-cmap-exp .a11y-chip.mid {--a-color:var(--dm-warning-11);}
#dm-cat-exp .a11y-chip.bad {--a-color:var(--dm-danger-11);}
#dm-cmap-exp .a11y-chip.bad {--a-color:var(--dm-danger-11);}
#dm-cat-exp .a11y-chip.info,#dm-cmap-exp .a11y-chip.info{--a-color:var(--dm-gray-8,#64748b);}
#dm-cat-exp .a-dot,#dm-cmap-exp .a-dot{width:8px;height:8px;border-radius:var(--dm-radius-full,999px);background:var(--a-color);flex:0 0 8px;}
#dm-cat-exp .a-label,#dm-cmap-exp .a-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing: 0;color:var(--dm-gray-9,#8794a1);}
#dm-cat-exp .a-num,#dm-cmap-exp .a-num{font-family:var(--dm-f-mono,monospace);font-size:11px;color:var(--dm-gray-11,#4a5560);}
#dm-cat-exp .a11y-chip::after,#dm-cmap-exp .a11y-chip::after{content:attr(data-tip);position:absolute;right:0;top:calc(100% + 8px);width:max-content;max-width:min(320px,calc(100cqw - 32px));
  background:var(--dm-gray-12,#1f2933);color:var(--dm-bg-page,#fff);padding:9px 12px;border-radius:var(--dm-radius-4,8px);
  font:400 11px/1.55 var(--dm-f-sys,"Inter",system-ui,sans-serif);letter-spacing: 0;text-transform:none;
  opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .14s ease,transform .14s ease;
  z-index:60;pointer-events:none;box-shadow:var(--dm-shadow-3,0 5px 16px rgba(0,0,0,.17));white-space:normal;}
#dm-cat-exp .a11y-chip:hover::after,#dm-cat-exp .a11y-chip:focus::after,#dm-cmap-exp .a11y-chip:hover::after,#dm-cmap-exp .a11y-chip:focus::after {opacity:1;visibility:visible;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){#dm-cat-exp .a11y-chip::after,#dm-cmap-exp .a11y-chip::after{transition:none;}}
@media(max-width:560px){#dm-cat-exp .a11y-chips,#dm-cmap-exp .a11y-chips{margin-left:0;flex-basis:100%;justify-content:flex-start;}}
#dm-cat-exp .d-bar,#dm-cmap-exp .d-bar{display:flex;align-items:center;gap:13px;flex-wrap:wrap;row-gap:8px;margin-bottom:14px;}
#dm-cat-exp .field,#dm-cmap-exp .field{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;}
#dm-cat-exp .cl,#dm-cmap-exp .cl{font-size:13px;font-weight:500;color:var(--dm-gray-9,#8794a1);letter-spacing: 0;text-transform:none;white-space:nowrap;}
#dm-cat-exp .crng,#dm-cmap-exp .crng{accent-color:var(--dm-accent-9,#12a594);}
#dm-cat-exp .crng {width:70px;}
#dm-cmap-exp .crng {width:150px;}
#dm-cat-exp .cval,#dm-cmap-exp .cval{font-size:13px;font-weight:700;color:var(--dm-accent-11,#0c6b5e);font-family:var(--dm-f-mono,monospace);}
#dm-cat-exp .cval {min-width:1ch;}
#dm-cmap-exp .cval {min-width:7ch;}
#dm-cat-exp .tgl,#dm-cmap-exp .tgl{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:inherit;flex:0 0 auto;white-space:nowrap;}
#dm-cat-exp .tgl .tgl-l,#dm-cmap-exp .tgl .tgl-l{font-size:13px;font-weight:500;color:var(--dm-gray-9,#8794a1);transition:color .12s;}
#dm-cat-exp .tgl.on .tgl-l,#dm-cmap-exp .tgl.on .tgl-l{color:var(--dm-gray-12,#1f2933);}
#dm-cat-exp .tgl-tr,#dm-cmap-exp .tgl-tr{width:32px;height:18px;border-radius:var(--dm-radius-full,999px);background:var(--dm-gray-5,#c3c9d0);position:relative;transition:background .15s;flex:0 0 auto;}
#dm-cat-exp .tgl-kn,#dm-cmap-exp .tgl-kn{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:var(--dm-radius-full,999px);background:var(--dm-bg-page,#fff);box-shadow:0 1px 2px rgba(0,0,0,.28);transition:left .15s;}
#dm-cat-exp .tgl.on .tgl-tr,#dm-cmap-exp .tgl.on .tgl-tr{background:var(--dm-accent-9,#12a594);}
#dm-cat-exp .tgl.on .tgl-kn,#dm-cmap-exp .tgl.on .tgl-kn{left:16px;}
#dm-cat-exp .code,#dm-cmap-exp .code{margin:16px 0 14px;background:var(--dm-i-code-surface,#f2f4f5);border-radius:var(--dm-radius-4,8px);padding:11px 14px;
  font-family:var(--dm-f-mono,monospace);font-size:11.5px;color:var(--dm-gray-12,#1f2933);white-space:pre;overflow-x:auto;}
#dm-cat-exp .code pre,#dm-cmap-exp .code pre{margin:0;padding:0;background:transparent;font:inherit;color:inherit;white-space:pre;}
#dm-cat-exp .code .c1,#dm-cmap-exp .code .c1{color:var(--dm-gray-10,#697b85);}
#dm-cat-exp .code .s1,#dm-cat-exp .code .s2,#dm-cmap-exp .code .s1,#dm-cmap-exp .code .s2{color:var(--dm-accent-11,#0c8f7f);}
#dm-cat-exp .code .kn,#dm-cat-exp .code .k,#dm-cmap-exp .code .kn,#dm-cmap-exp .code .k{color:var(--dm-code-kw,#7c3aed);font-weight:650;}
#dm-cat-exp .code .mi,#dm-cmap-exp .code .mi{color:var(--dm-warning,#b45309);}
#dm-cat-exp .meta,#dm-cmap-exp .meta{font-size:13px;color:var(--dm-text-muted,#667085);line-height:1.6;display:grid;gap:3px;margin-top:2px;border-top:1px solid var(--dm-border-faint,rgba(0,0,0,.12));padding-top:12px;}
#dm-cat-exp .meta .m-l,#dm-cmap-exp .meta .m-l{color:var(--dm-gray-11,#4a5560);font-weight:650;}
#dm-cat-exp .dm-toast,#dm-cmap-exp .dm-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--dm-gray-12,#1f2933);color:var(--dm-bg-page,#fff);padding:8px 16px;border-radius:var(--dm-radius-full,999px);font-size:12.5px;opacity:0;transition:opacity .18s;pointer-events:none;z-index:99999;}
#dm-cat-exp .dm-toast.show,#dm-cmap-exp .dm-toast.show{opacity:1;}

#dm-cat-exp .seg,#dm-cmap-exp .seg{display:inline-flex;align-items:center;border:1px solid var(--dm-border-faint,rgba(0,0,0,.12));border-radius:var(--dm-radius-full,999px);overflow:hidden;background:var(--dm-bg-page,#fff);}
#dm-cat-exp .seg button,#dm-cmap-exp .seg button{appearance:none;border:0;border-right:1px solid var(--dm-border-faint,rgba(0,0,0,.12));background:transparent;color:var(--dm-gray-10,#667085);padding:5px 9px;font:650 11px var(--dm-f-mono,ui-monospace,monospace);cursor:pointer;white-space:nowrap;}
#dm-cat-exp .seg button:last-child,#dm-cmap-exp .seg button:last-child{border-right:0;}
#dm-cat-exp .seg button.on,#dm-cmap-exp .seg button.on{background:var(--dm-accent-2,#e6f7f4);color:var(--dm-accent-11,#0c6b5e);}
#dm-cat-exp .demo-tools,#dm-cmap-exp .demo-tools {display:flex;align-items:flex-start;gap:13px;flex-wrap:wrap;row-gap:8px;border-top:1px solid var(--dm-border-faint,rgba(0,0,0,.12));padding-top:12px;margin-bottom:14px;}
#dm-cat-exp .demo-tools .demo-field,#dm-cmap-exp .demo-tools .demo-field {flex:1 1 100%;min-width:0;align-items:flex-start;}
#dm-cat-exp .demo-picker,#dm-cmap-exp .demo-picker {display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:6px;min-width:0;}
#dm-cat-exp .demo-chip,#dm-cmap-exp .demo-chip {appearance:none;border:1px solid var(--dm-border-faint,rgba(0,0,0,.12));background:var(--dm-bg-page,#fff);color:var(--dm-gray-10,#667085);border-radius:var(--dm-radius-full,999px);padding:4px 9px;font:650 11px var(--dm-f-sys,system-ui);display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;}
#dm-cat-exp .demo-chip svg,#dm-cmap-exp .demo-chip svg {width:18px;height:14px;}
#dm-cat-exp .demo-chip.on,#dm-cmap-exp .demo-chip.on {border-color:var(--dm-accent-8,#57c7b6);background:var(--dm-accent-2,#e6f7f4);color:var(--dm-accent-11,#0c6b5e);}
#dm-cat-exp .demo-grid,#dm-cmap-exp .demo-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
#dm-cat-exp .demo-grid.layout-4,#dm-cat-exp .demo-grid.layout-6,#dm-cmap-exp .demo-grid.layout-4,#dm-cmap-exp .demo-grid.layout-6 {grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:1040px){#dm-cat-exp .demo-grid,#dm-cmap-exp .demo-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:680px){#dm-cat-exp .demo-grid,#dm-cat-exp .demo-grid.layout-4,#dm-cat-exp .demo-grid.layout-6,#dm-cmap-exp .demo-grid,#dm-cmap-exp .demo-grid.layout-4,#dm-cmap-exp .demo-grid.layout-6{grid-template-columns:1fr;}}
#dm-cat-exp .demo-card,#dm-cmap-exp .demo-card {position:relative;background:var(--dm-bg-page,#fff);border:1px solid var(--dm-border-faint,rgba(0,0,0,.12));border-radius:var(--dm-radius-4,8px);aspect-ratio:16/10;overflow:hidden;}
#dm-cat-exp .demo-flex,#dm-cmap-exp .demo-flex {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
#dm-cat-exp .demo-label,#dm-cmap-exp .demo-label {position:absolute;left:8px;top:6px;z-index:2;font:700 10px var(--dm-f-mono,ui-monospace,monospace);color:var(--dm-gray-12,#1f2933);letter-spacing:0;-webkit-text-stroke:1.7px var(--dm-bg-page,#fff);paint-order:stroke fill;}
#dm-cat-exp svg.demo-svg,#dm-cmap-exp svg.demo-svg {display:block;width:100%;height:100%;}
#dm-cat-exp .demo-grid.gs svg.demo-svg,#dm-cmap-exp .demo-grid.gs svg.demo-svg,#dm-cmap-exp .demo-grid.gs canvas.demo-canvas {filter:grayscale(1);}

/* Categorical palette explorer unique parts. */
#dm-cat-exp .swhost {display:flex;gap:7px;margin-bottom:18px;}
#dm-cat-exp .strip {display:flex;gap:6px;margin:0 0 4px;}
#dm-cat-exp .sw {appearance:none;background:transparent;border:0;padding:0;font:inherit;flex:1;min-width:0;cursor:pointer;display:block;text-align:center;}
#dm-cat-exp .sw .chip {display:block;height:34px;border-radius:var(--dm-radius-3,6px);transition:transform .1s,box-shadow .1s;}
#dm-cat-exp .swhost .sw {flex:1;}
#dm-cat-exp .swhost .chip {height:46px;border-radius:var(--dm-radius-5,12px);}
#dm-cat-exp .sw:hover .chip {transform:translateY(-2px);box-shadow:0 2px 6px rgba(0,0,0,.12);}
#dm-cat-exp .sw .hx {font-family:var(--dm-f-mono,monospace);font-size:9px;color:var(--dm-text-muted,#667085);margin-top:4px;overflow:hidden;}
#dm-cat-exp .sw.copied .hx {color:var(--dm-accent-11,#0c6b5e);font-weight:700;}
#dm-cat-exp .sw.copied .hx::after {content:" \2713";}
#dm-cat-exp .strip.gs .chip {filter:grayscale(1);}

/* Continuous colormap explorer unique parts. */
#dm-cmap-exp .grad-wrap {margin:0 0 16px;}
#dm-cmap-exp .grad {position:relative;height:44px;border-radius:var(--dm-radius-4,8px);overflow:hidden;border:1px solid var(--dm-border-faint,rgba(0,0,0,.12));}
#dm-cmap-exp .grad,#dm-cmap-exp .ri .mini {background-repeat:no-repeat;background-size:100% 100%;}
#dm-cmap-exp .grad.gs {filter:grayscale(1);}
#dm-cmap-exp canvas.demo-canvas {display:block;width:100%;height:100%;image-rendering:auto;}

/* Categorical palette page polish. The page content opts in naturally by
 * embedding #dm-cat-exp; keep the styling global so page-local raw style tags
 * blocks do not drift from the docs design system. */
article:has(#dm-cat-exp) .dm-lead {
  margin: 0.7em 0 1.25em;
  color: var(--dm-text-muted);
  font-size: 1.09em;
  line-height: 1.72;
}

article:has(#dm-cat-exp) section > h2 {
  margin-top: 2.6em;
  padding-top: 0.72em;
  border-top: 1px solid var(--dm-border-faint);
}

article:has(#dm-cat-exp) section > h3 {
  margin-top: 1.9em;
}

article:has(#dm-cat-exp) table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--dm-border-faint);
  border-radius: var(--dm-radius-4);
}

article:has(#dm-cat-exp) thead th {
  background: var(--dm-bg-subtle);
}

article:has(#dm-cat-exp) th,
article:has(#dm-cat-exp) td {
  padding: 0.68rem 0.82rem;
  vertical-align: top;
  border-bottom: 1px solid var(--dm-border-faint);
}

article:has(#dm-cat-exp) th + th,
article:has(#dm-cat-exp) td + td {
  border-left: 1px solid var(--dm-border-faint);
}

article:has(#dm-cat-exp) tbody tr:last-child td {
  border-bottom: 0;
}

article:has(#dm-cat-exp) tbody tr:hover {
  background: var(--dm-accent-2);
}

html.dark article:has(#dm-cat-exp) tbody tr:hover,
body[data-theme="dark"] article:has(#dm-cat-exp) tbody tr:hover {
  background: var(--dm-accent-3);
}

article:has(#dm-cat-exp) p code,
article:has(#dm-cat-exp) li code,
article:has(#dm-cat-exp) td code,
article:has(#dm-cat-exp) th code,
article:has(#dm-cat-exp) blockquote code {
  padding: 0.08em 0.35em;
  border: 1px solid var(--dm-border-faint);
  border-radius: var(--dm-radius-2);
  font-size: 0.91em;
  background: var(--dm-i-code-surface);
  font-family: var(--dm-f-mono);
}


/* ===========================================================================
 * TIER 7 — diagram widget polish
 *
 * Mermaid measures node geometry with the conf.py `themeCSS` nowrap rule,
 * so the SVG's intrinsic viewBox already matches the real label widths.
 * We therefore DO NOT force `width: 100%` here — that only blew up a
 * too-narrow viewBox and blurred the text (the "강제 확대만 한 느낌").
 * Instead: cap at the container (max-width 100%), keep the natural width,
 * and center. Big diagrams fill the body; small ones stay crisp.
 *
 * Same treatment for sphinx.ext.graphviz output (.graphviz wrapper).
 * =========================================================================== */

/* --- Mermaid --- */
.mermaid {
  width: 100%;
  text-align: center;
  margin: 1.6em 0;
  overflow-x: auto;          /* a very wide sequence diagram scrolls,
                                it never gets crushed/scaled down */
}

.mermaid > svg {
  /* Do NOT set width/max-width here. Mermaid (useMaxWidth: true) already
   * stamps `style="max-width: <viewBox width>px"` on the <svg>, and the
   * theme's `width: 100%` then resolves to min(100%, viewBox) — i.e. the
   * diagram renders at its NATURAL size and only shrinks if it would
   * overflow the container. An earlier `max-width: 100% !important` here
   * clobbered that inline cap and let a small viewBox scale UP to the full
   * container, blurring the foreignObject labels ("강제 확대만 한 느낌").
   * Leaving width/max-width alone is the fix; we only center + tidy. */
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Runtime backstop for the conf.py themeCSS nowrap — keeps node labels
 * (and the <code> chips inside them) on one line even if a Mermaid
 * version ignores themeCSS during measurement. */
.mermaid .nodeLabel,
.mermaid .nodeLabel *,
.mermaid .messageText,
.mermaid .actor {
  white-space: nowrap;
}

/* --- Graphviz (sphinx.ext.graphviz) --- */
div.graphviz,
p.graphviz,
figure.graphviz {
  width: 100%;
  text-align: center;
  margin: 1.6em 0;
  overflow-x: auto;
}

div.graphviz > svg,
div.graphviz > object,
p.graphviz > svg,
p.graphviz > object,
figure.graphviz > svg,
figure.graphviz > object {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}