/* The Rassam docs: a bar at the top with the menu's button, the pages listed at the left, a column of reading, and
   what is on the page at the right. Light or dark as the reader has it. */
:root {
  --bg: #fafafb; --panel: #ffffff; --raised: #f2f2f6; --line: #e5e5ec; --text: #15151b; --soft: #41414c; --dim: #71717f; --faint: #a0a0ad;
  --accent: #5a54f0; --accent-2: #b25cf5; --accent-soft: #eeedff; --ok: #1f9d57; --warn: #c98613;
  --code: #f6f6f9; --key: #7a3fd0; --string: #1c8048; --comment: #8b8b98; --number: #c2571a; --type: #1b6fd1;
  --side: 272px; --rail: 220px; --bar: 60px; --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 20, 40, 0.05), 0 8px 24px rgba(20, 20, 40, 0.06);
  color-scheme: light;
}
:root[data-theme='dark'] {
  /* (the program's own Violet theme: its surfaces, its lines, its text and its accent) */
  --bg: #0B0812; --panel: #15101F; --raised: #1E1730; --line: #2C2245; --text: #F2EDFB; --soft: #D0C6E8; --dim: #ADA2CC; --faint: #8679AB;
  --accent: #A855F7; --accent-2: #C77DFF; --accent-soft: #2B1F4A; --ok: #5fd08d; --warn: #e8b454;
  --code: #181424; --key: #C9A4FF; --string: #7bd69a; --comment: #6B657B; --number: #f2a36b; --type: #8FB8FF;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(8, 4, 20, 0.5);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 18px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 15.5px/1.68 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }

/* ---------------- the bar at the top ---------------- */
.bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: var(--bar); padding: 0 18px; background: color-mix(in srgb, var(--bg), transparent 10%); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); }
.icon { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--soft); cursor: pointer; }
.icon:hover { background: var(--raised); color: var(--text); }
.icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 16px; color: var(--text); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-2), transparent 62%); transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1); }
.brand:hover img { transform: rotate(-6deg) scale(1.08); }
.brand span { padding: 2px 9px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.bar .grow { flex: 1; }
.find { position: relative; width: min(360px, 42vw); }
.find input { width: 100%; height: 38px; padding: 0 12px 0 36px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.find input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.find svg { position: absolute; left: 11px; top: 10px; width: 17px; height: 17px; fill: none; stroke: var(--dim); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
/* The key that brings the pointer to the field: a small frame inside the field's own, in its middle. */
.find kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 6px; border: 1px solid var(--line); color: var(--dim); font-family: inherit; font-size: 12px; line-height: 1; background: var(--raised); pointer-events: none; }
.find input { padding-right: 40px; }
.found { position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); display: none; }
.found.on { display: block; }
.found a { display: block; padding: 8px 11px; border-radius: 9px; color: var(--text); font-size: 14px; line-height: 1.35; }
.found a small { display: block; color: var(--dim); font-size: 12px; }
.found a:hover, .found a.on { background: var(--accent-soft); text-decoration: none; }
.found p { margin: 10px 12px; color: var(--dim); font-size: 14px; }

/* ---------------- the three columns ---------------- */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--rail); max-width: 1420px; margin: 0 auto; transition: grid-template-columns 0.2s; }
body.closed .shell { grid-template-columns: 0 minmax(0, 1fr) var(--rail); }
.side { position: sticky; top: var(--bar); align-self: start; height: calc(100vh - var(--bar)); overflow: hidden auto; padding: 22px 14px 40px 18px; border-right: 1px solid var(--line); transition: opacity 0.15s, visibility 0.15s; }
body.closed .side { opacity: 0; visibility: hidden; padding-left: 0; padding-right: 0; border: 0; }
main { min-width: 0; padding: 40px 52px 110px; }
.rail { position: sticky; top: var(--bar); align-self: start; max-height: calc(100vh - var(--bar)); overflow-y: auto; padding: 44px 18px 40px 6px; font-size: 13px; }
.rail h5 { margin: 0 0 8px 12px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.rail a { display: block; padding: 4px 12px; border-left: 2px solid var(--line); color: var(--dim); line-height: 1.4; }
.rail a:hover { color: var(--text); text-decoration: none; }
.rail a.on { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
.rail a.sub { padding-left: 24px; }

/* ---------------- reading ---------------- */
.crumbs { margin-bottom: 10px; font-size: 13px; color: var(--dim); font-weight: 600; letter-spacing: 0.01em; }
.crumbs b { color: var(--accent); font-weight: 650; }
h1 { margin: 0 0 12px; font-size: 36px; line-height: 1.15; letter-spacing: -0.028em; font-weight: 750; }
.lead { margin: 0 0 30px; font-size: 18px; line-height: 1.6; color: var(--soft); max-width: 66ch; }
h2 { margin: 46px 0 12px; font-size: 24px; letter-spacing: -0.018em; font-weight: 700; }
h3 { margin: 30px 0 8px; font-size: 17.5px; font-weight: 650; }
h2 a.anchor, h3 a.anchor { margin-left: 8px; color: var(--faint); opacity: 0; font-weight: 400; }
h2:hover a.anchor, h3:hover a.anchor { opacity: 1; text-decoration: none; }
p { margin: 0 0 15px; color: var(--soft); max-width: 74ch; }
ul, ol { margin: 0 0 17px; padding-left: 22px; color: var(--soft); max-width: 74ch; }
li { margin-bottom: 6px; }
li::marker { color: var(--faint); }
strong { color: var(--text); font-weight: 650; }
code { font: 13.5px/1.5 'Cascadia Code', 'JetBrains Mono', Consolas, monospace; background: var(--code); padding: 2px 6px; border-radius: 6px; color: var(--text); border: 1px solid var(--line); }
.tag { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; background: var(--accent-soft); color: var(--accent); }

/* The first page. */
.hero { position: relative; padding: 44px 44px 40px; margin-bottom: 34px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 260px at 12% 0%, color-mix(in srgb, var(--accent), transparent 78%), transparent 70%), radial-gradient(500px 240px at 96% 10%, color-mix(in srgb, var(--accent-2), transparent 82%), transparent 70%); pointer-events: none; }
.hero > * { position: relative; }
.hero h1 { font-size: 44px; }
.hero .lead { margin-bottom: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 650; font-size: 14.5px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.button:hover { text-decoration: none; border-color: var(--accent); }
.button.main { border: 0; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent), transparent 62%); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0 0 26px; }
.cards a { display: block; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--text); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.cards a:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.cards i { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-style: normal; font-size: 17px; }
.cards strong { display: block; margin-bottom: 4px; font-size: 15.5px; }
.cards span { color: var(--dim); font-size: 13.5px; line-height: 1.5; display: block; }

/* ---------------- code: one example, in each language ---------------- */
.code { margin: 0 0 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--code); overflow: hidden; box-shadow: 0 1px 2px rgba(20, 20, 40, 0.04); }
.code header { display: flex; align-items: center; gap: 4px; padding: 6px 8px 0 8px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel), transparent 40%); }
.code header button.tab { padding: 7px 13px 9px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--dim); font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 8px 8px 0 0; }
.code header button.tab:hover { color: var(--text); }
.code header button.tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.code header span.name { padding: 7px 8px 9px; color: var(--dim); font-size: 12.5px; }
.code header .grow { flex: 1; }
.code header button.copy { margin: 0 2px 6px 0; padding: 4px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--soft); font-size: 12px; cursor: pointer; }
.code header button.copy:hover { color: var(--text); border-color: var(--accent); }
.code pre { display: none; margin: 0; padding: 16px 18px; overflow-x: auto; }
.code pre.on { display: block; }
.code pre code { background: none; border: 0; padding: 0; border-radius: 0; font-size: 13px; line-height: 1.65; white-space: pre; }
.code p.none { display: none; margin: 0; padding: 18px; color: var(--dim); font-size: 14px; max-width: none; }
.code p.none.on { display: block; }
.k { color: var(--key); } .s { color: var(--string); } .c { color: var(--comment); font-style: italic; } .n { color: var(--number); } .t { color: var(--type); }

/* ---------------- tables, notes ---------------- */
.wrap { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow-x: auto; margin-bottom: 22px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 10px 14px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); font-weight: 700; background: color-mix(in srgb, var(--raised), transparent 50%); }
td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--soft); line-height: 1.55; }
td:first-child { white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: color-mix(in srgb, var(--raised), transparent 60%); }
.note { display: flex; gap: 12px; padding: 14px 16px; margin: 0 0 20px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent), transparent 70%); background: color-mix(in srgb, var(--accent-soft), transparent 30%); color: var(--soft); max-width: 78ch; }
.note::before { content: 'i'; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; font-family: Georgia, serif; }
.note.warn { border-color: color-mix(in srgb, var(--warn), transparent 60%); background: color-mix(in srgb, var(--warn), transparent 90%); }
.note.warn::before { content: '!'; background: var(--warn); font-family: inherit; }

/* The page before and the page after. */
.turn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line); }
.turn a { display: block; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.turn a:hover { border-color: var(--accent); text-decoration: none; }
.turn a small { display: block; color: var(--dim); font-size: 12px; margin-bottom: 2px; }
.turn a.next { text-align: right; grid-column: 2; }
.turn a strong { font-size: 15px; }
footer.end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 28px; color: var(--faint); font-size: 13px; }
footer.end nav { display: flex; gap: 18px; }
footer.end a { color: var(--dim); font-weight: 600; }
footer.end a:hover { color: var(--accent); text-decoration: none; }

.veil { display: none; }
@media (max-width: 1180px) {
  .shell, body.closed .shell { grid-template-columns: var(--side) minmax(0, 1fr); }
  body.closed .shell { grid-template-columns: 0 minmax(0, 1fr); }
  .rail { display: none; }
}
@media (max-width: 860px) {
  /* The pages' list comes over the reading, from the menu's button. */
  .shell, body.closed .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 25; left: 0; top: var(--bar); width: min(var(--side), 86vw); background: var(--bg); box-shadow: var(--shadow); transform: translateX(-102%); transition: transform 0.2s; opacity: 1; visibility: visible; padding: 22px 14px 40px 18px; border-right: 1px solid var(--line); }
  body.open .side { transform: none; }
  body.closed .side { opacity: 1; visibility: visible; padding: 22px 14px 40px 18px; border-right: 1px solid var(--line); }
  body.open .veil { display: block; position: fixed; inset: var(--bar) 0 0 0; z-index: 24; background: rgba(0, 0, 0, 0.4); }
  main { padding: 28px 20px 80px; }
  h1 { font-size: 30px; }
  .hero { padding: 28px 22px; }
  .hero h1 { font-size: 34px; }
  .find kbd { display: none; }
  .brand span { display: none; }
}

/* ================================================================ decor, ornaments and motion
   A little of each: the program's own sign and its sparks, a soft light at the top of the page, things that come
   gently into sight. Nothing moves for a reader who has asked for less motion. */

/* A soft light behind the top of every page. */
body::before { content: ''; position: fixed; z-index: -1; inset: 0 0 auto 0; height: 420px; pointer-events: none;
               background: radial-gradient(60% 100% at 70% 0%, color-mix(in srgb, var(--accent-2), transparent 90%), transparent 70%), radial-gradient(40% 80% at 20% 0%, color-mix(in srgb, var(--accent), transparent 92%), transparent 70%); }

/* A spark: the four-pointed star of the program's sign. */
.spark { display: inline-block; width: 12px; height: 12px; background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* The first page: its words at the left, the sign at the right. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
               background-image: radial-gradient(color-mix(in srgb, var(--text), transparent 86%) 1px, transparent 1.4px); background-size: 22px 22px;
               mask-image: radial-gradient(70% 90% at 85% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 90% at 85% 40%, #000, transparent 75%); }
.hero::before { animation: drift 16s ease-in-out infinite alternate; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 4px 12px 4px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 650; letter-spacing: 0.02em;
           color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent), transparent 78%); }
.emblem { position: relative; z-index: 1; width: 168px; height: 168px; margin-right: 18px; animation: float 7s ease-in-out infinite; }
.emblem img { display: block; width: 100%; height: 100%; border-radius: 38px; box-shadow: 0 24px 60px color-mix(in srgb, var(--accent-2), transparent 55%), 0 0 0 1px color-mix(in srgb, #fff, transparent 80%); }
.emblem .spark { position: absolute; color: var(--accent-2); animation: twinkle 3.6s ease-in-out infinite; }
.emblem .one { width: 22px; height: 22px; right: -22px; top: 8px; }
.emblem .two { width: 13px; height: 13px; left: -20px; bottom: 30px; animation-delay: 1.2s; color: var(--accent); }
.emblem .three { width: 9px; height: 9px; right: -10px; bottom: -6px; animation-delay: 2.3s; }

/* A heading has a small mark before it; the reading is closed with a line and a spark. */
main h2 { position: relative; }
main h2::before { content: ''; position: absolute; left: -18px; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, var(--accent), var(--accent-2)); opacity: 0.85; }
.turn { position: relative; border-top: 0; }
.turn::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(to right, transparent, var(--line) 18%, var(--line) 82%, transparent); }
.turn::after { content: ''; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--accent-2); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); box-shadow: 0 0 0 8px var(--bg); }

/* Things that answer the pointer. */
.cards a { position: relative; overflow: hidden; }
.cards a::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s; background: radial-gradient(220px 120px at 20% 0%, color-mix(in srgb, var(--accent), transparent 84%), transparent 70%); }
.cards a:hover::after { opacity: 1; }
.cards i { transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.2s, color 0.2s; }
.cards a:hover i { transform: translateY(-2px) rotate(-6deg); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.button { transition: transform 0.15s, box-shadow 0.2s, border-color 0.15s; }
.button:hover { transform: translateY(-1px); }
.button.main { position: relative; overflow: hidden; }
.button.main::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent); transition: left 0.5s; }
.button.main:hover::after { left: 120%; }
.rail a { transition: color 0.15s, border-color 0.15s; }
.turn a { transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s; }
.turn a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.code { transition: border-color 0.2s, box-shadow 0.2s; }
.code:hover { border-color: color-mix(in srgb, var(--accent), var(--line) 70%); }
.code header button.tab { transition: color 0.15s, border-color 0.2s; }

/* The page comes in; what is further down comes into sight as it is reached. */
main > .crumbs, main > h1, main > .lead, main > .hero { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
main > h1 { animation-delay: 0.04s; }
main > .lead { animation-delay: 0.08s; }
.comes { opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease var(--wait, 0ms), transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) var(--wait, 0ms), border-color 0.15s, box-shadow 0.15s; }
.comes.seen { opacity: 1; transform: none; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes drift { to { transform: translate(-3%, 4%) scale(1.08); } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .emblem { width: 96px; height: 96px; margin: 0 0 4px; order: -1; }
  .emblem img { border-radius: 22px; }
  main h2::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .comes { opacity: 1; transform: none; }
}

/* ================================================================ the menu, and the way back to the site
   The pages in their groups: each group under its name and its sign, folded away or open; its pages hang from a thin
   line, and the one being read is marked on it. At the top of the menu and at the end of the bar, the way back to the
   site. (Sides are named by where the reading starts and ends, so a language written from the right needs no rules.) */
.side, .rail, .found, .code pre, .wrap { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.side { padding: 16px 12px 40px 14px; }
.side svg, .bar .back svg, .rail .top svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side .home { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); transition: border-color 0.15s, box-shadow 0.2s; }
.side .home:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
.side .home i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); transition: background 0.2s, color 0.2s; }
.side .home:hover i { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.side .home span { display: grid; min-width: 0; line-height: 1.3; }
.side .home b { font-size: 13.5px; font-weight: 650; }
.side .home small { font-size: 12px; color: var(--dim); }
.group { margin-bottom: 2px; }
.group .head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: none; color: var(--text); font-size: 13.5px; font-weight: 650; text-align: start; cursor: pointer; transition: background 0.15s; }
.group .head:hover { background: var(--raised); }
.group .head:focus-visible, .side a:focus-visible, .bar .back:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.group .head svg { color: var(--dim); }
.group.has .head svg:first-child { color: var(--accent); }
.group .head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group .head .fold { width: 14px; height: 14px; color: var(--faint); transform: rotate(90deg); transition: transform 0.2s; }
.group.shut .head .fold { transform: none; }
.group .folds { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.22s ease; }
.group.shut .folds { grid-template-rows: 0fr; }
.group .links { min-height: 0; overflow: hidden; margin-inline-start: 15px; border-inline-start: 1px solid var(--line); transition: visibility 0s; }
.group.shut .links { visibility: hidden; transition: visibility 0s 0.22s; }
.group .links a { display: flex; align-items: center; gap: 8px; margin: 1px 0; margin-inline-start: -1px; padding: 5px 10px; padding-inline-start: 15px; border-inline-start: 1px solid transparent; border-start-end-radius: 8px; border-end-end-radius: 8px;
                  color: var(--soft); font-size: 13.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; transition: color 0.15s, background 0.15s, border-color 0.15s; }
.group .links a:first-child { margin-top: 3px; }
.group .links a:last-child { margin-bottom: 9px; }
.group .links a:hover { color: var(--text); border-inline-start-color: var(--faint); text-decoration: none; }
.group .links a.on { color: var(--accent); font-weight: 650; border-inline-start-color: var(--accent); background: color-mix(in srgb, var(--accent-soft), transparent 30%); }
.group .links a em { margin-inline-start: auto; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 0 6px; border-radius: 20px; background: var(--raised); color: var(--dim); }
.bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; opacity: 0.55; background: linear-gradient(to right, transparent, var(--accent) 30%, var(--accent-2) 70%, transparent); }
.bar .back { display: inline-flex; align-items: center; gap: 7px; height: 38px; margin-inline-start: 4px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--soft); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.bar .back:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }
.rail a.top { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; border: 0; color: var(--faint); font-size: 12.5px; }
.rail a.top svg { width: 14px; height: 14px; }
@media (max-width: 860px) {
  .side, body.closed .side { padding: 16px 12px 40px 14px; }
  .bar .back { display: none; }      /* (the menu has it, at its top) */
}

/* ================================================================ languages (see i18n.js)
   The bar's switch to the other language; and, for a language written from the right (Arabic), what does not turn
   round by itself: what is placed by its left or right edge. Code stays as it is written, from the left. */
.icon.tongue { width: auto; padding: 0 12px; font: inherit; font-size: 13.5px; font-weight: 600; }
[lang='ar'] body { font-family: 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, system-ui, sans-serif; line-height: 1.85; }
[dir='rtl'] :is(h1, h2, h3, h4, h5, th, .tag, .eyebrow, .side a em) { letter-spacing: 0; }
[dir='rtl'] :is(pre, code, .code, kbd) { direction: ltr; unicode-bidi: isolate; }
[dir='rtl'] .code pre { text-align: left; }
[dir='rtl'] .code header { direction: rtl; }
[dir='rtl'] .find input { padding: 0 36px 0 40px; }
[dir='rtl'] .find svg { left: auto; right: 11px; }
[dir='rtl'] .find kbd { right: auto; left: 8px; }
[dir='rtl'] .side { border-right: 0; border-left: 1px solid var(--line); }
[dir='rtl'] body.closed .side { border: 0; }
[dir='rtl'] .rail { padding: 44px 6px 40px 18px; }
[dir='rtl'] .rail a { border-left: 0; border-right: 2px solid var(--line); }
[dir='rtl'] .rail a.on { border-right-color: var(--accent); }
[dir='rtl'] .rail a.sub { padding-left: 12px; padding-right: 24px; }
[dir='rtl'] :is(h2, h3) a.anchor { margin-left: 0; margin-right: 8px; }
[dir='rtl'] :is(ul, ol) { padding-left: 0; padding-right: 22px; }
[dir='rtl'] .tag { margin-left: 0; margin-right: 10px; }
[dir='rtl'] th { text-align: right; }
[dir='rtl'] .turn a.next { text-align: left; }
[dir='rtl'] .emblem { margin-right: 0; margin-left: 18px; }
[dir='rtl'] main h2::before { left: auto; right: -18px; }
[dir='rtl'] .code header button.copy { margin: 0 0 6px 2px; }
[dir='rtl'] .button.main::after { left: auto; right: -60%; transform: skewX(20deg); }
[dir='rtl'] .button.main:hover::after { left: auto; right: 120%; }
@media (max-width: 860px) {
  [dir='rtl'] .side { left: auto; right: 0; transform: translateX(102%); }
  [dir='rtl'] body.open .side { transform: none; }
  [dir='rtl'] body.closed .side { border-left: 1px solid var(--line); }
}
[dir='rtl'] :is(.side .home, .bar .back) svg { transform: scaleX(-1); }
[dir='rtl'] .group.shut .head .fold { transform: scaleX(-1); }
[dir='rtl'] .rail a.top { border: 0; }
[dir='rtl'] .brand span { letter-spacing: 0; }

/* The language being changed: the page is seen to be going while it is fetched in the other one (see i18n.js). */
html.turning { cursor: progress; }
html.turning body { opacity: 0.4; pointer-events: none; transition: opacity 0.15s; }