/* The Aajil Design System case study (assets/aajil). IBM Plex Sans (Latin, one variable file, 400-600) and IBM Plex Sans Arabic (400/500/600): SIL OFL 1.1, see fonts/LICENSE.txt. Loaded only on this page. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/aajil/fonts/plex-sans-latin-var.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/aajil/fonts/plex-sans-arabic-w400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/aajil/fonts/plex-sans-arabic-w500.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/aajil/fonts/plex-sans-arabic-w600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }

/* ===== Aajil tokens, scoped. Values are the Aajil Figma library's (Primitives and Semantic collections); not the Sarv tokens. ===== */
.aj {
  --aj-yellow-50: #fefde8; --aj-yellow-100: #fffcc2; --aj-yellow-200: #fff687; --aj-yellow-300: #ffe943; --aj-yellow-400: #ffd60a; --aj-yellow-500: #efbe03; --aj-yellow-600: #ce9300; --aj-yellow-700: #a46804; --aj-yellow-800: #88510b; --aj-yellow-900: #734210; --aj-yellow-950: #2b2710;
  --aj-black-0: #ffffff; --aj-black-50: #f6f6f6; --aj-black-100: #e7e7e7; --aj-black-200: #d1d1d1; --aj-black-300: #b0b0b0; --aj-black-400: #888888; --aj-black-500: #6d6d6d; --aj-black-600: #5d5d5d; --aj-black-700: #4f4f4f; --aj-black-800: #454545; --aj-black-900: #3d3d3d; --aj-black-950: #111111;
  --aj-green-50: #f0fdf4; --aj-green-300: #7bf1a8; --aj-green-400: #05df72; --aj-green-500: #00c950; --aj-green-600: #00a63e; --aj-green-700: #008236; --aj-green-800: #016630; --aj-green-900: #0d542b;
  --aj-red-50: #fdf3f3; --aj-red-200: #fbcdcd; --aj-red-300: #f7aaaa; --aj-red-400: #f17878; --aj-red-600: #d23030; --aj-red-700: #b12424; --aj-red-900: #7a2222;
  --aj-orange-50: #fdf7ed; --aj-orange-300: #e9b360; --aj-orange-400: #e49c3f; --aj-orange-500: #db7a25; --aj-orange-700: #a1411c; --aj-orange-800: #84331c; --aj-orange-900: #6d2b1a;
  --bg-default: var(--aj-black-0); --bg-subtle: var(--aj-black-50); --bg-neutral: var(--aj-black-100); --bg-neutral-strong: var(--aj-black-900); --bg-disabled: var(--aj-black-100);
  --bg-brand-soft: var(--aj-yellow-50); --bg-brand: var(--aj-yellow-400); --bg-brand-hover: var(--aj-yellow-500); --bg-brand-strong: var(--aj-yellow-700);
  --bg-success: var(--aj-green-50); --bg-success-mid: var(--aj-green-400); --bg-success-strong: var(--aj-green-700);
  --bg-danger: var(--aj-red-50); --bg-danger-mid: var(--aj-red-400); --bg-danger-strong: var(--aj-red-600);
  --bg-warning: var(--aj-orange-50); --bg-warning-mid: var(--aj-orange-400); --bg-warning-strong: var(--aj-orange-700);
  --text-default: var(--aj-black-900); --text-subtle: var(--aj-black-600); --text-muted: var(--aj-black-500); --text-inverse: var(--aj-black-0); --text-disabled: var(--aj-black-400);
  --text-brand: var(--aj-yellow-700); --text-brand-on: var(--aj-black-950); --text-success: var(--aj-green-700); --text-danger: var(--aj-red-600); --text-warning: var(--aj-orange-700);
  --border-subtle: var(--aj-black-100); --border-default: var(--aj-black-200); --border-strong: var(--aj-black-300); --border-brand: var(--aj-yellow-400); --border-disabled: var(--aj-black-100);
  --border-success: var(--aj-green-400); --border-success-strong: var(--aj-green-700); --border-danger: var(--aj-red-400); --border-danger-strong: var(--aj-red-600); --border-warning: var(--aj-orange-400);
    --aj-en: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --aj-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;
  /* the Arabic type scale keeps its own, taller line heights (tokens typography/arabic) */
  --lh-body: 24px; --lh-body-sm: 20px; --lh-caption: 16px; --lh-md: 24px; --lh-lg: 28px; --lh-xl: 32px; --lh-display: 36px;
  font-family: var(--aj-en); color: var(--text-default); background: var(--bg-default); font-size: 16px; line-height: var(--lh-body); font-weight: 400; letter-spacing: -0.6px; text-align: start; border-radius: 12px; padding: 24px; min-width: 0;
  box-sizing: border-box; -webkit-font-smoothing: antialiased;
}
.aj[data-theme="dark"] {
  color-scheme: dark;
  --bg-default: var(--aj-black-950); --bg-subtle: var(--aj-black-900); --bg-neutral: var(--aj-black-700); --bg-neutral-strong: var(--aj-black-100); --bg-disabled: var(--aj-black-700);
  --bg-brand-soft: var(--aj-yellow-950); --bg-brand: var(--aj-yellow-300); --bg-brand-hover: var(--aj-yellow-400); --bg-brand-strong: var(--aj-yellow-800);
  --bg-success: var(--aj-green-900); --bg-success-mid: var(--aj-green-300); --bg-success-strong: var(--aj-green-400);
  --bg-danger: var(--aj-red-900); --bg-danger-mid: var(--aj-red-300); --bg-danger-strong: var(--aj-red-200);
  --bg-warning: var(--aj-orange-900); --bg-warning-mid: var(--aj-orange-300); --bg-warning-strong: var(--aj-orange-400);
  --text-default: var(--aj-black-0); --text-subtle: var(--aj-black-200); --text-muted: var(--aj-black-200); --text-inverse: var(--aj-black-900); --text-disabled: var(--aj-black-300);
  --text-brand: var(--aj-yellow-300); --text-success: var(--aj-green-400); --text-danger: var(--aj-red-200); --text-warning: var(--aj-orange-400);
  --border-subtle: var(--aj-black-800); --border-default: var(--aj-black-500); --border-strong: var(--aj-black-200); --border-brand: var(--aj-yellow-300);
  --border-success: var(--aj-green-400); --border-success-strong: var(--aj-green-400); --border-danger: var(--aj-red-400); --border-danger-strong: var(--aj-red-200); --border-warning: var(--aj-orange-400);
  --border-disabled: rgba(79, 79, 79, .4);
}
/* reset against the folio's article styles */
.aj *, .aj *::before, .aj *::after { box-sizing: border-box; }
:where(.aj) :is(div, span, ol, ul, li, table, p, th, td, thead, tbody, tr, code, b, i, small) { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; max-width: none; text-align: inherit; background: none; border: 0; }
:where(.aj) :is(ol, ul) { list-style: none; }
:where(.aj) table { border-collapse: collapse; border-spacing: 0; width: 100%; display: table; }
:where(.aj) :is(b, i, small, code) { font-style: normal; }

/* ===== foundations ===== */
.aj-scale { display: grid; gap: 8px; }
.aj-scale + .aj-scale { margin-top: 24px; }
.aj-scale-name { font-size: 14px; line-height: 20px; font-weight: 500; }
.aj-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
@media (min-width: 640px) { .aj-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.aj-chips.is-status { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.aj-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.aj-trio i { height: 40px; }
.aj-chip { display: grid; gap: 4px; font-size: 12px; line-height: 16px; }
.aj-chip i { display: block; height: 48px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); }
.aj-chip b { font-weight: 500; }
.aj-chip code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; line-height: 16px; color: var(--text-subtle); direction: ltr; }
.aj-type { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }

.aj-type-col { display: grid; gap: 16px; align-content: start; background: var(--bg-default); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px; }
.aj-type-col .aj-tag { font-size: 12px; line-height: 16px; color: var(--text-subtle); }
.aj-role { display: grid; gap: 4px; }
.aj-role .aj-sample { background-image: linear-gradient(to bottom, transparent calc(var(--lh) - 1px), rgba(206, 147, 0, .35) 0); background-size: 100% var(--lh); line-height: var(--lh); }
.aj-role .aj-spec { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; line-height: 16px; color: var(--text-subtle); direction: ltr; text-align: start; }
.aj[dir="rtl"] .aj-role .aj-spec { text-align: end; }
.aj-space { display: grid; gap: 4px; margin-top: 8px; }
.aj-space-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; font-size: 12px; line-height: 16px; color: var(--text-subtle); }
.aj-space-row i { display: block; height: 12px; max-width: 100%; background: var(--bg-brand); border-radius: 2px; }
.aj-radii { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.aj-radii span { display: grid; gap: 8px; justify-items: center; font-size: 12px; line-height: 16px; color: var(--text-subtle); }
.aj-radii i { display: block; width: 56px; height: 56px; background: var(--bg-brand-soft); border: 2px solid var(--border-brand); }
.aj-h { font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 8px; }
.aj-spacerad { display: grid; gap: 24px; }

/* ===== tokens ===== */
.aj-themes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 24px; }
.aj-themes .aj { border: 1px solid var(--border-default); display: grid; gap: 16px; }
.aj-themes .aj-tag { font-size: 12px; line-height: 16px; color: var(--text-subtle); }
.aj-credit { display: flex; align-items: center; gap: 6px; font-size: 28px; line-height: 36px; font-weight: 600; }

.aj.aj-flat { padding: 0; background: transparent; border-radius: 0; }

/* ===== specimens drawn from the Figma file (site/aajil.mjs, assets/aajil/fig). Fixed columns, so English and Arabic wrap the same way. ===== */
.aj-fig { display: block; max-width: 100%; height: auto; }
.aj-scroll { overflow-x: auto; }
.aj-scroll .aj-fig { max-width: none; }
.aj-stack { display: grid; gap: 24px; }
.aj-group { display: grid; gap: 12px; }
.aj-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--col, 168px)); gap: 16px 24px; align-items: end; }
.aj-item { display: grid; gap: 8px; justify-items: start; }
.aj-cap { font-size: 12px; line-height: 16px; color: var(--text-subtle); }
/* the language switch shows one script at a time */
.px-spec:not([data-lang="ar"]) [data-l="ar"], .px-spec[data-lang="ar"] [data-l="en"] { display: none; }

/* ===== colors and tiers resolved for the case's theme: --l light, --d dark (--lf/--df: a text color on that surface) ===== */
.aj-bg { background: var(--l); }
.aj-fg { color: var(--lf, var(--l)); }
.aj-bd { border-color: var(--l); }
.aj[data-theme="dark"] .aj-bg { background: var(--d); }
.aj[data-theme="dark"] .aj-fg { color: var(--df, var(--d)); }
.aj[data-theme="dark"] .aj-bd { border-color: var(--d); }
.aj:not([data-theme="dark"]) [data-t="dark"], .aj[data-theme="dark"] [data-t="light"] { display: none; }

/* ===== compositions (the hero and the two component boards): real renders layered on one canvas that scales with the case, fading out at every edge ===== */
.aj.aj-colcase { container-type: inline-size; padding: 0; overflow: hidden; }
/* the content fades into the surface (cream or dark), so the frame reads as a crop of a larger field */
.aj-col { --cw: var(--dcw); --ch: var(--dch); --u: calc(100cqw / var(--cw)); position: relative; overflow: hidden; height: calc(var(--ch) * var(--u)); isolation: isolate;
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.35) 3%, #000 12%, #000 88%, rgba(0,0,0,.35) 97%, transparent), linear-gradient(to bottom, transparent, rgba(0,0,0,.35) 4%, #000 14%, #000 86%, rgba(0,0,0,.35) 96%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.35) 3%, #000 12%, #000 88%, rgba(0,0,0,.35) 97%, transparent), linear-gradient(to bottom, transparent, rgba(0,0,0,.35) 4%, #000 14%, #000 86%, rgba(0,0,0,.35) 96%, transparent); }
.aj-col .aj-fig { position: absolute; inset-inline-start: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); height: calc(var(--h) * var(--s) * var(--u)); width: auto; max-width: none; }
.aj-col .aj-fig.sh { filter: drop-shadow(0 14px 22px rgba(61, 61, 61, .18)) drop-shadow(0 2px 4px rgba(61, 61, 61, .1)); }
.aj[data-theme="dark"] .aj-col .aj-fig.sh { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)) drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }
@container (max-width: 639px) {
  .aj-col { --cw: var(--mcw); --ch: var(--mch); }
  .aj-col .aj-fig { inset-inline-start: calc(var(--mx) * var(--u)); top: calc(var(--my) * var(--u)); height: calc(var(--h) * var(--ms) * var(--u)); }
  .aj-col .aj-fig.nm { display: none; }
}
/* the two type columns are cards in every theme (dark shows the surface) */
.aj-type > .aj.aj-flat { padding: 16px; background: var(--bg-default); border: 1px solid var(--border-subtle); border-radius: 12px; }

/* ===== previews: a window that crops long content behind a fade (colors) ===== */
.aj-fade { max-height: 440px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }

/* ===== the variables panel: the look of the Figma interface (light and dark follow the case) ===== */
.fv { --fv-bg: #fff; --fv-line: #e6e6e6; --fv-text: #1e1e1e; --fv-sub: #666; --fv-sel: #daebf9; --fv-col: #f0f0f0; --fv-chip: #f5f5f5; max-height: 400px; overflow: hidden; border: 1px solid var(--fv-line); border-radius: 8px; background: var(--fv-bg); color: var(--fv-text); font: 400 12px/16px Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0; direction: ltr; text-align: left; -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent); mask-image: linear-gradient(to bottom, #000 74%, transparent); }
.aj[data-theme="dark"] .fv { --fv-bg: #2c2c2c; --fv-line: #3d3d3d; --fv-text: #fff; --fv-sub: #a3a3a3; --fv-sel: #2c4a73; --fv-col: #383838; --fv-chip: #333; }
.fv-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.fv-side { border-inline-end: 1px solid var(--fv-line); padding: 8px; }
.fv-side ul { list-style: none; margin: 0 0 12px; padding: 0; }
.fv-side li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.fv-side li small { color: var(--fv-sub); font-size: 11px; }
.fv-side li.is-col { background: var(--fv-col); font-weight: 600; }
.fv-side li.is-on { background: var(--fv-sel); font-weight: 600; }
.fv-side li.d1 { padding-inline-start: 20px; } .fv-side li.d2 { padding-inline-start: 32px; }
.fv-side .fv-cap { margin: 0; padding: 8px; font-weight: 600; }
.fv-title { margin: 0; padding: 14px 16px; font-size: 13px; line-height: 16px; border-bottom: 1px solid var(--fv-line); }
.fv-head, .fv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr); align-items: center; }
.fv-head > span, .fv-row > span { padding: 0 16px; height: 100%; display: flex; align-items: center; border-inline-end: 1px solid var(--fv-line); }
.fv-head { height: 36px; font-weight: 600; border-bottom: 1px solid var(--fv-line); }
.fv-row { height: 44px; border-bottom: 1px solid var(--fv-line); }
.fv-name { gap: 10px; }
.fv-name svg { flex: none; }
.is-dim { color: var(--fv-sub); }
.fv-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 8px 3px 4px; border: 1px solid var(--fv-line); border-radius: 6px; background: var(--fv-chip); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-chip i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(128, 128, 128, .5); flex: none; }
@media (max-width: 639px) { .fv-body { grid-template-columns: minmax(0, 1fr); } .fv-side { display: none; } .fv-head > span:nth-child(3), .fv-row > span:nth-child(3) { display: none; } .fv-head, .fv-row { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); } .fv-head > span, .fv-row > span { padding: 0 12px; } .fv-chip { white-space: normal; overflow-wrap: anywhere; } }   /* a phone: the value column gets the room (a token reference stays on one line), the name wraps */

/* ===== the buttons board ===== */
.aj-btnboard { display: grid; gap: 32px; }
.bb-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(159px, 1fr)); gap: 24px 16px; justify-items: center; }
.bb-i { display: grid; gap: 8px; justify-items: center; }
.bb-row { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border-subtle); }
.bb-row .aj-h { margin: 0; }
.bb-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 16px; }

/* ===== Arabic: the tiers read right to left, so the arrows point left, and the phone labels are Arabic ===== */
@media (max-width: 559px) {
}
/* numbers and token names keep their own order and sit on the reading side in Arabic */
.aj-num { display: inline-block; direction: ltr; unicode-bidi: isolate; }
.aj[dir="rtl"] .aj-chip :is(b, code) { direction: ltr; text-align: right; unicode-bidi: isolate; }
.aj[dir="rtl"] .aj-space-row .aj-num { text-align: right; }
@media (max-width: 559px) {
  .bb-colors, .bb-line { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .bb-line { display: grid; justify-items: center; align-items: end; }
  .fv-val { white-space: normal; line-height: 14px; }
  .fv-row { height: auto; min-height: 40px; padding-block: 6px; }
}


/* ===== iconography: the library as a reference sheet (categories, bold row over outline row); rows run past the frame and fade, so there is always more behind ===== */
.aj-isheet { display: grid; gap: 26px; color: var(--text-subtle); padding: 8px 4px 0; max-height: 720px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.aj-ic-head, .aj-ic-name { margin: 0; font: 12px/16px 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); direction: ltr; }
.aj-ic-head { color: var(--text-default); } .aj-ic-head i { font-style: normal; color: var(--text-subtle); }
.aj-ic-name { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; } .aj-ic-name b { color: var(--text-warning); font-weight: 500; } .aj-ic-name span { margin-inline-start: auto; }
.aj-ic-row { display: flex; gap: 18px; overflow: hidden; margin-bottom: 8px; -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }
.aj-ic { flex: none; width: 28px; height: 28px; fill: currentColor; }

/* grid boards: rows of siblings on one canvas; a row starts at its own x and runs on past the frame (logical positions, so RTL mirrors) */
.aj-grid .aj-rw { position: absolute; inset-inline-start: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); display: flex; align-items: center; gap: calc(var(--g) * var(--u)); }
.aj-grid .aj-rw.is-top { align-items: flex-start; }
.aj-grid .aj-fig { position: static; flex: none; width: auto; max-width: none; height: calc(var(--h) * var(--s) * var(--u)); inset: auto; }
.aj-grid .aj-lb { position: absolute; margin: 0; inset-inline-start: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); font: 500 max(10px, calc(12 * var(--u)))/1 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); white-space: nowrap; }
.bb-start { justify-items: start; }
/* grid boards fade where they continue: the end side and the bottom (the start side holds the first items) */
.aj-grid { -webkit-mask-image: linear-gradient(to right, #000 80%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 90%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 90%, transparent); }
.aj[dir="rtl"] .aj-grid { -webkit-mask-image: linear-gradient(to left, #000 80%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 90%, transparent); mask-image: linear-gradient(to left, #000 80%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 90%, transparent); }
.aj-grid .aj-cl { display: flex; flex-direction: column; align-items: center; gap: calc(var(--g) * var(--u)); }

/* ===== code block: a token excerpt as JSON (keys, values and token references each have a role color; line numbers; scrolls, never wraps) ===== */
.aj-codeblock { margin: 0; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-subtle); overflow: hidden; }
.aj-codeblock figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); font: 500 12px/16px 'JetBrains Mono', ui-monospace, monospace; color: var(--text-subtle); direction: ltr; }
.aj-codeblock figcaption span:first-child { color: var(--text-default); }
.aj-codeblock pre { margin: 0; padding: 16px 0; overflow: auto; direction: ltr; text-align: left; font: 13px/22px 'JetBrains Mono', ui-monospace, monospace; color: var(--text-default); counter-reset: ln; tab-size: 2; }
.aj-codeblock code { display: block; min-width: max-content; font: inherit; }
.aj-codeblock .ln { display: block; padding: 0 20px 0 0; white-space: pre; counter-increment: ln; }
.aj-codeblock .ln::before { content: counter(ln); display: inline-block; width: 44px; margin-right: 16px; text-align: right; color: var(--text-muted); user-select: none; }
/* anything that scrolls sideways inside a demo shows where more is hidden: the edge fades (the shadows ride the scroll, the covers sit on the content; the demos are decorative, aria-hidden, so they stay out of the tab order); on a phone the code block's frames and line-number gutter take less so more code shows */
:is(.aj-scroll, .aj-codeblock pre) { --hint-bg: var(--bg-default);
  background-image: linear-gradient(to right, var(--hint-bg), var(--hint-bg)), linear-gradient(to left, var(--hint-bg), var(--hint-bg)), linear-gradient(to right, var(--border-default), transparent), linear-gradient(to left, var(--border-default), transparent);
  background-size: 24px 100%, 24px 100%, 8px 100%, 8px 100%; background-position: left, right, left, right; background-attachment: local, local, scroll, scroll; background-repeat: no-repeat; }
.aj-codeblock pre { --hint-bg: var(--bg-subtle); }
@media (max-width: 599.98px) {
  .aj.aj-codecase { padding: 12px; }
  .aj-codeblock pre { font-size: 12px; line-height: 20px; }
  .aj-codeblock .ln { padding-right: 12px; }
  .aj-codeblock .ln::before { width: 28px; margin-right: 8px; }
  .aj-codeblock figcaption { padding: 8px 12px; }
}
.aj-codeblock .k { color: var(--text-default); } .aj-codeblock .s { color: var(--text-success); } .aj-codeblock .r { color: var(--text-warning); } .aj-codeblock .p { color: var(--text-subtle); }
.aj[data-theme="dark"] .aj-codeblock .s { color: var(--text-success); }
.aj[data-theme="dark"] .fv-side .is-on small { color: #dbe7f6; }