@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plexarabic-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plexarabic-600.woff2") format("woff2");
}

/* Self-hosted so the site fetches nothing off-origin, which is the same choice
   alchembly.com makes (it inlines these as base64 data URIs). Served from /fonts as
   separate files instead: styles.css carries a cache-busting hash, so embedding
   ~150KB of font here would mean re-downloading all of it on every copy edit.

   Latin subsets from Google Fonts, all three families OFL-1.1 — licence text is in
   fonts/OFL-*.txt. Fraunces and Work Sans are variable, so one file spans the weight
   range; IBM Plex Mono is static and needs a file per weight. No unicode-range is
   declared: these pages are pure ASCII, and per-character fallback is correct for
   anything outside the subset. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fraunces-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fraunces-italic-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/worksans-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plexmono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plexmono-600-latin.woff2") format("woff2");
}

/* Shared by index.html and features.html. */

/* Brand palette, taken from the alchembly.com stylesheet so the two sites cannot
   drift: navy #0A2342, teal #0A9292, teal-soft #E4F3F3, slate #707982, slate-light
   #AAB2BA, gold #C99A3D, paper #FAFBFB, paper-warm #F3F6F6.

   The five verdict colours have to stay distinguishable at a glance, so they map onto
   the brand where the brand has a colour for it: allow=teal, flag=gold, redact=navy,
   rewrite=slate. Only "block" needs a hue the brand does not define; it is a brick red
   desaturated to sit with the palette rather than shout over it. */
:root {
    --navy:       #0a2342;
    --teal:       #0a9292;
    --gold:       #c99a3d;
    --slate:      #707982;
    --slate-light:#aab2ba;

    --ground:    #fafbfb;
    --panel:     #ffffff;
    --panel-2:   #f3f6f6;
    --wire:      #f7f9f9;
    --ink:       #0a2342;
    --ink-soft:  #2c4258;
    --muted:     #707982;
    --line:      #ccd4d9;
    --line-soft: #e2e8eb;
    --signal:    #0a9292;
    --signal-bg: #e4f3f3;
    --signal-ink:#076b6b;

    --allow:   #0a9292;
    --redact:  #0a2342;
    --rewrite: #5c6771;
    --block:   #a33327;
    --block-bg:#f6e3df;
    --flag:    #a97f28;

    /* Same three roles as alchembly.com: Fraunces display, Work Sans body,
       IBM Plex Mono for labels, data and code. Fallbacks match the face's shape so a
       failed font load degrades rather than reflows into something unrelated. */
    --display: "Fraunces", ui-serif, Georgia, serif;
    --body: "Work Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --measure: 66ch;
    --wide: 1120px;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --navy:       #0a2342;
      --teal:       #34b7b2;
      --gold:       #d9ac55;
      --slate:      #8fa0ad;
      --slate-light:#5d6f7d;

      --ground:    #071522;
      --panel:     #0c1f33;
      --panel-2:   #0f2439;
      --wire:      #0a1c2d;
      --ink:       #e6edf2;
      --ink-soft:  #c2d0da;
      --muted:     #8fa0ad;
      --line:      #1e3549;
      --line-soft: #16293c;
      --signal:    #34b7b2;
      --signal-bg: #0b2f31;
      --signal-ink:#7fd9d3;

      --allow:   #34b7b2;
      --redact:  #86a9d6;
      --rewrite: #a6b4c0;
      --block:   #e0705c;
      --block-bg:#3a1b16;
      --flag:    #d9ac55;
    }
  }

  :root[data-theme="dark"] {
      --navy:       #0a2342;
    --teal:       #34b7b2;
    --gold:       #d9ac55;
    --slate:      #8fa0ad;
    --slate-light:#5d6f7d;

    --ground:    #071522;
    --panel:     #0c1f33;
    --panel-2:   #0f2439;
    --wire:      #0a1c2d;
    --ink:       #e6edf2;
    --ink-soft:  #c2d0da;
    --muted:     #8fa0ad;
    --line:      #1e3549;
    --line-soft: #16293c;
    --signal:    #34b7b2;
    --signal-bg: #0b2f31;
    --signal-ink:#7fd9d3;

    --allow:   #34b7b2;
    --redact:  #86a9d6;
    --rewrite: #a6b4c0;
    --block:   #e0705c;
    --block-bg:#3a1b16;
    --flag:    #d9ac55;
  }

  * { box-sizing: border-box; }

  body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.62;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: var(--wide); margin: 0 auto; padding: 0 28px; }

  /* ---------- top bar ---------- */

  .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0 16px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
  }
  /* Specificity note: the generic `a:not(.btn)` rule near the bottom of this sheet
     scores (0,1,1) and would otherwise win the underline back on these header links.
     Scoping through .bar keeps them clean without touching the generic rule. */
  .bar .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    border-bottom: 0;
  }
  .bar .brand:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
  /* The mark is the official Alchembly logo, same geometry as alchembly.com.
     Colours come from tokens so it inverts correctly in dark mode instead of
     leaving a navy "A" on a navy ground. */
  .logo { width: 30px; height: auto; flex: none; display: block; }
  .logo .stroke { stroke: var(--ink); }
  .logo .shield,
  .logo .drop { fill: var(--teal); }
  .logo .molecule line { stroke: var(--slate-light); stroke-width: 1; opacity: 0.7; }
  .logo .node { fill: var(--slate); }
  .logo .node--gold { fill: var(--gold); }

  .mark {
    font-family: var(--mono);
    font-size: 13.5px;
    letter-spacing: 0.02em;
    color: var(--ink);
  }
  .mark b { font-weight: 600; letter-spacing: 0.06em; }
  .mark span { color: var(--muted); }
  .host {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .nav { display: flex; flex-wrap: wrap; gap: 18px; }
  .bar .nav a {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 0;
  }
  .bar .nav a:hover { color: var(--signal); }
  @media (max-width: 860px) { .nav { display: none; } }

  /* ---------- hero ---------- */

  .hero { padding: 72px 0 8px; }
  .kicker {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--signal);
    margin: 0 0 24px;
  }
  /* Matches alchembly.com's h1: Fraunces 600, -0.01em, 1.08, and an italic teal <em>
     for the emphasised clause. That italic accent is the brand's signature move. */
  h1 {
    font-family: var(--display);
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-weight: 600;
    margin: 0 0 24px;
    max-width: 24ch;
    text-wrap: balance;
  }
  h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--signal);
  }
  .sub {
    font-size: 20.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 0 34px;
  }
  .sub strong { color: var(--ink); font-weight: 600; }

  .cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .btn {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 13px 20px;
    border: 1px solid var(--signal);
    text-decoration: none;
    display: inline-block;
  }
  .btn-solid { background: var(--signal); color: var(--ground); }
  .btn-solid:hover { background: var(--signal-ink); border-color: var(--signal-ink); }
  .btn-ghost { color: var(--signal); background: none; }
  .btn-ghost:hover { background: var(--signal-bg); }
  .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .cta-note { font-size: 15px; color: var(--muted); }

  /* ---------- wire cards ---------- */

  .wires {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 20px;
    padding: 52px 0 8px;
  }
  .wire {
    background: var(--panel);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
  }
  .wire-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .stamp {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid currentColor;
  }
  .stamp-block  { color: var(--block);  background: var(--block-bg); }
  .stamp-redact { color: var(--redact); }
  .stamp-flag   { color: var(--flag); }

  .wire-body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 12px; }
  .step { display: flex; flex-direction: column; gap: 5px; }
  .step-label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .step-body {
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.55;
    background: var(--wire);
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--line);
    padding: 9px 11px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ink-soft);
  }
  .step-body.hit  { border-left-color: var(--block); }
  .step-body.mask { border-left-color: var(--redact); }
  .step-body.out  { border-left-color: var(--signal); }
  .m-block  { color: var(--block);  font-weight: 600; }
  .m-redact { color: var(--redact); font-weight: 600; }
  .m-signal { color: var(--signal); }
  .wire-foot {
    margin-top: auto;
    padding: 11px 16px 13px;
    border-top: 1px solid var(--line-soft);
    font-size: 14.5px;
    color: var(--muted);
  }

  /* ---------- sections ---------- */

  section { padding: 68px 0 0; }
  .band { background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 68px; }
  .band section { padding-top: 60px; }
  .band .last { padding-bottom: 64px; }

  h2 {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--signal);
    margin: 0 0 8px;
  }
  .hr { height: 1px; background: var(--line); margin: 0 0 28px; }
  h3 {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 32px 0 10px;
  }
  p { margin: 0 0 16px; max-width: var(--measure); }
  .big { font-size: 19px; color: var(--ink-soft); }

  code {
    font-family: var(--mono);
    font-size: 0.855em;
    background: var(--panel);
    border: 1px solid var(--line-soft);
    padding: 1px 5px;
  }
  pre {
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.7;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--signal);
    padding: 16px 18px;
    margin: 0 0 18px;
    overflow-x: auto;
  }
  pre code { background: none; border: 0; padding: 0; font-size: inherit; }
  .dim { color: var(--muted); }

  /* ---------- catch grid ---------- */

  .catch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line);
    margin-bottom: 8px;
  }
  .cell { background: var(--panel); padding: 16px 17px 18px; }
  .cell b {
    display: block;
    font-family: var(--mono);
    font-size: 13px;
    margin-bottom: 6px;
  }
  .cell p { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0; max-width: none; }
  .cell .tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 9px;
    padding: 2px 6px;
    border: 1px solid var(--line);
    color: var(--muted);
  }

  /* ---------- egress proof ---------- */

  .proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line);
  }
  .proof > div { background: var(--panel); padding: 20px 22px 22px; }
  .proof h4 {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--muted);
  }
  .proof ul { list-style: none; margin: 0; padding: 0; }
  .proof li {
    font-size: 15.5px;
    padding: 7px 0 7px 20px;
    position: relative;
    color: var(--ink-soft);
  }
  .proof li::before { position: absolute; left: 0; font-family: var(--mono); font-size: 13px; }
  .yes li::before { content: "\002B"; color: var(--allow); }
  .no  li::before { content: "\2212"; color: var(--block); }

  /* ---------- reference tables ---------- */

  .scroll { overflow-x: auto; margin: 0 0 22px; }
  table {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
    font-size: 15.5px;
  }
  caption {
    text-align: left;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 10px;
  }
  th {
    text-align: left;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding: 0 14px 8px 0;
    vertical-align: bottom;
  }
  td {
    border-bottom: 1px solid var(--line-soft);
    padding: 11px 14px 11px 0;
    vertical-align: top;
    color: var(--ink-soft);
  }
  td:first-child { color: var(--ink); }
  th:last-child, td:last-child { padding-right: 0; }
  td.num {
    font-family: var(--mono);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .rid { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
  .act {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .act-block   { color: var(--block); }
  .act-redact  { color: var(--redact); }
  .act-flag    { color: var(--flag); }
  .act-monitor { color: var(--muted); }

  /* ---------- verdict strip ---------- */

  .verdicts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line);
    margin-bottom: 24px;
  }
  .vc { background: var(--panel); padding: 15px 16px 17px; }
  .vc b {
    display: block;
    font-family: var(--mono);
    font-size: 13px;
    margin-bottom: 5px;
  }
  .vc span { display: block; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
  .vc-allow   b { color: var(--allow); }
  .vc-redact  b { color: var(--redact); }
  .vc-rewrite b { color: var(--rewrite); }
  .vc-block   b { color: var(--block); }
  .vc-flag    b { color: var(--flag); }

  /* ---------- tier ladder ---------- */

  .tiers {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line);
    margin-bottom: 22px;
  }
  .tier {
    background: var(--panel);
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 18px;
    align-items: start;
  }
  .tier .tn {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--signal);
    padding-top: 3px;
  }
  .tier p { margin: 0; font-size: 15.5px; max-width: none; }
  .tier p + p { margin-top: 8px; }
  .flagenv {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line);
    padding: 2px 7px;
  }

  /* ---------- framework chips ---------- */

  .frameworks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
  .frameworks span {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.05em;
    color: var(--signal);
    background: var(--signal-bg);
    border: 1px solid color-mix(in srgb, var(--signal) 28%, transparent);
    padding: 5px 10px;
  }

  /* ---------- limits ---------- */

  .limits { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
  .limits li {
    border-top: 1px solid var(--line-soft);
    padding: 12px 0;
    font-size: 15.5px;
    color: var(--ink-soft);
  }
  .limits li:last-child { border-bottom: 1px solid var(--line-soft); }
  .limits b { color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 13.5px; }

  /* ---------- closer + footer ---------- */

  .closer { padding: 76px 0; text-align: left; }
  .closer p.big { max-width: 46ch; }

  footer {
    border-top: 1px solid var(--line);
    padding: 26px 0 44px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.85;
    letter-spacing: 0.02em;
    color: var(--muted);
  }
  footer b { color: var(--ink-soft); font-weight: 600; }

  a { color: var(--signal); }
  a:not(.btn) { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--signal) 45%, transparent); }
  a:not(.btn):hover { border-bottom-color: var(--signal); }

  /* ---------- motion ---------- */

  .rise { animation: rise 620ms cubic-bezier(.2,.7,.3,1) both; }
  .rise:nth-of-type(2) { animation-delay: 130ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rise { animation: none; }
  }

  @media (max-width: 700px) {
    body { font-size: 16px; }
    .wrap { padding: 0 18px; }
    .proof { grid-template-columns: 1fr; }
    .hero { padding-top: 52px; }
  }

  /* diagram theming, kept out of presentation attributes */
  .dg text { font-family: var(--mono); }
  .dg .box     { fill: none; stroke: currentColor; stroke-width: 1; }
  .dg .fwbox   { fill: var(--panel); stroke: currentColor; stroke-width: 1.5; }
  .dg .band-r  { fill: var(--signal-bg); stroke: var(--signal); stroke-width: 1; }
  .dg .lbl     { font-size: 13px; fill: currentColor; }
  .dg .sub     { font-size: 11px; fill: var(--muted); }
  .dg .fwlbl   { font-size: 12.5px; fill: currentColor; }
  .dg .bandlbl { font-size: 11px; fill: var(--signal); letter-spacing: 0.1em; }
  .dg .lane    { stroke: currentColor; stroke-width: 1.5; fill: none; }
  .dg .lanelbl { font-size: 11px; fill: var(--muted); }
  .dg .blockln { stroke: var(--block); stroke-width: 1.5; fill: none; stroke-dasharray: 5 4; }
  .dg .blocklbl{ font-size: 10.5px; fill: var(--block); }
  .dg .mk      { fill: currentColor; }
  .dg .mk-block{ fill: var(--block); }
  figure svg { display: block; width: 100%; height: auto; color: var(--ink-soft); }

  /* ---------- Arabic / RTL ---------- */

  /* Fraunces, Work Sans and Plex Mono carry no Arabic glyphs, so the Arabic page runs
     entirely on IBM Plex Sans Arabic -- same superfamily as the mono, so the two
     languages still look related. Latin inside Arabic text (the brand, the domain, env
     var names) falls through to the Latin faces via the stack. */
  [dir="rtl"] {
    --display: "IBM Plex Sans Arabic", "Work Sans", ui-sans-serif, system-ui, sans-serif;
    --body: "IBM Plex Sans Arabic", "Work Sans", ui-sans-serif, system-ui, sans-serif;
    --mono: "IBM Plex Sans Arabic", "IBM Plex Mono", ui-monospace, monospace;
    --measure: 62ch;
  }
  /* Arabic has no italic and no small caps: the Latin design's italic accent and
     uppercase tracking both have to be neutralised or the type looks broken. */
  [dir="rtl"] h1 { letter-spacing: 0; line-height: 1.35; font-weight: 600; }
  [dir="rtl"] h1 em { font-style: normal; font-weight: 600; }
  [dir="rtl"] h2,
  [dir="rtl"] h3,
  [dir="rtl"] .kicker,
  [dir="rtl"] .step-label,
  [dir="rtl"] .wire-head,
  [dir="rtl"] .tag,
  [dir="rtl"] .cell .tag,
  [dir="rtl"] .btn,
  [dir="rtl"] .host,
  [dir="rtl"] .proof h4 {
    text-transform: none;
    letter-spacing: 0;
  }
  [dir="rtl"] h2 { font-size: 15px; }
  [dir="rtl"] .sub, [dir="rtl"] .big { line-height: 1.75; }
  [dir="rtl"] p, [dir="rtl"] .cell p, [dir="rtl"] li { line-height: 1.85; }

  /* Directional borders have to flip; the rest of the layout is flex/grid and mirrors
     on its own. */
  [dir="rtl"] pre {
    border-left: 1px solid var(--line);
    border-right: 3px solid var(--signal);
  }
  [dir="rtl"] .step-body {
    border-left: 1px solid var(--line-soft);
    border-right: 2px solid var(--line);
  }
  [dir="rtl"] .step-body.hit { border-right-color: var(--block); }
  [dir="rtl"] .step-body.mask { border-right-color: var(--redact); }
  [dir="rtl"] .step-body.out { border-right-color: var(--signal); }
  [dir="rtl"] th, [dir="rtl"] td { text-align: right; padding: 11px 0 11px 14px; }
  [dir="rtl"] th:last-child, [dir="rtl"] td:last-child { padding-left: 0; }
  [dir="rtl"] caption { text-align: right; }
  [dir="rtl"] .limits li { padding: 12px 0; }
  [dir="rtl"] .proof li { padding: 7px 20px 7px 0; }
  [dir="rtl"] .proof li::before { left: auto; right: 0; }

  /* Code, env vars and the domain stay LTR inside Arabic prose. */
  [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .ltr {
    direction: ltr;
    unicode-bidi: embed;
    text-align: left;
  }

  /* ---------- language switch ---------- */

  .bar .lang {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 11px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
  }
  .bar .lang:hover { color: var(--signal); border-color: var(--signal); }