/* ==========================================================================
   World Explorer docs: "a ship's instruments", in light and dark.
   1. Tokens (light, dark)   2. Fonts and base   3. Header   4. Page list
   5. Layout, hero, footer   6. Article elements 7. Our conventions
   8. Index page             9. Narrow and short windows
   Written against the HTML bin/build-docs makes; the article has no classes.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #070e1a;               /* the page */
    --bg-2: #0a1322;             /* header, page list, footer */
    --panel: #0d1829;            /* cards, table head, chapter cards */
    --panel-2: #13233b;          /* hover rows, pressed controls */
    --pre-bg: #09131f;
    --code-bg: rgba(120, 170, 220, 0.11);
    --code-line: rgba(120, 170, 220, 0.18);
    --line: rgba(120, 170, 220, 0.16);
    --line-2: rgba(120, 170, 220, 0.30);
    --zebra: rgba(120, 170, 220, 0.035);

    --text-1: #eef5fb;           /* titles, bold leads, values      17.6:1 on --bg */
    --text: #c3d1df;             /* body                            12.4:1 */
    --text-3: #8fa2b8;           /* labels, meta                     7.4:1 */
    --code: #d9e8f6;

    --accent: #6cf8ec;           /* marks, bars, bullets (not for long text on light) */
    --accent-dim: rgba(108, 248, 236, 0.12);
    --link: #6cf8ec;             /*                                 15.0:1 */
    --link-line: rgba(108, 248, 236, 0.38);
    --on-accent: #032421;
    --gold: #ffcc4d;   --gold-dim: rgba(255, 204, 77, 0.08);   --gold-line: rgba(255, 204, 77, 0.40);
    --green: #7be08a;  --green-dim: rgba(123, 224, 138, 0.12); --green-line: rgba(123, 224, 138, 0.38);
    --pink: #ff7cbf;   --pink-dim: rgba(255, 91, 175, 0.08);   --pink-line: rgba(255, 91, 175, 0.42);
    --red: #ff8a96;
    --scroll-shadow: rgba(0, 0, 0, 0.55);
    --glow: 0 0 0 1px rgba(108, 248, 236, 0.35), 0 0 18px rgba(108, 248, 236, 0.16);
    --art-bg: radial-gradient(120% 90% at 70% 20%, #12304a 0%, #0a1526 55%, #060b15 100%);
}
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f8fb;
    --bg-2: #edf1f6;
    --panel: #ffffff;
    --panel-2: #e6edf5;
    --pre-bg: #eef3f8;
    --code-bg: #e7edf4;
    --code-line: #d3dce7;
    --line: #d8e0ea;
    --line-2: #b9c6d6;
    --zebra: rgba(30, 60, 100, 0.028);

    --text-1: #0a1424;           /* 17.3:1 on --bg */
    --text: #26364a;             /* 11.6:1 */
    --text-3: #536378;           /*  5.8:1 on --bg, 5.2:1 on --code-bg */
    --code: #15273b;

    --accent: #0fb5a9;           /* marks only */
    --accent-dim: rgba(15, 181, 169, 0.11);
    --link: #086a6f;             /*  6.0:1 on --bg, 6.4:1 on white */
    --link-line: rgba(8, 106, 111, 0.35);
    --on-accent: #ffffff;
    --gold: #865a00;   --gold-dim: rgba(233, 169, 42, 0.10);  --gold-line: rgba(200, 140, 20, 0.50);
    --green: #1c7431;  --green-dim: rgba(40, 160, 70, 0.10);  --green-line: rgba(28, 116, 49, 0.35);
    --pink: #a8155f;   --pink-dim: rgba(220, 40, 130, 0.07); --pink-line: rgba(168, 21, 95, 0.40);
    --red: #b4232f;
    --scroll-shadow: rgba(20, 40, 70, 0.22);
    --glow: 0 0 0 1px rgba(8, 106, 111, 0.35), 0 0 0 4px rgba(15, 181, 169, 0.12);
    --art-bg: radial-gradient(120% 90% at 70% 20%, #12304a 0%, #0a1526 55%, #060b15 100%);
}
:root {
    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --measure: 760px;            /* prose */
    --wide: 1080px;              /* tables and code may use this much */
    --side: 264px;               /* page list */
    --bar-h: 56px;
    --gutter: 48px;
    --r-sm: 6px; --r: 10px; --r-lg: 14px;
}

/* ---------- 2. Fonts and base -------------------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-wght-italic.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2"); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); scrollbar-color: var(--line-2) transparent; }
html, body { margin: 0; }
body {
    min-height: 100vh; display: flex; flex-direction: column;
    background: var(--bg); color: var(--text);
    font: 16px/1.65 var(--font); font-feature-settings: "cv11", "ss01"; /* Inter: single-storey a off, open digits */
    overflow-wrap: break-word;
}
::selection { background: var(--accent-dim); color: var(--text-1); }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.space { flex: 1; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 20; padding: 8px 12px; border-radius: var(--r-sm); background: var(--panel); color: var(--text-1); }
.skip:focus { top: 8px; }

/* icons: masks, so they take the text colour; --i picks the shape */
.brand-mark, .bar-link::before, .picker summary::before, .picker summary::after,
.pages a::before, .picker-list a::before, .foot-link::before, .content a[href^="http"]::after {
    content: ""; flex: none; display: inline-block; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
/* one icon per page, matched on the link's address: works on today's HTML */
a { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M6 3.5h8l4 4V20.5H6z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M14 3.5v4h4'/%3E%3C/svg%3E"); }
a[href$="index.html"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M4 5.5h6.5a1.5 1.5 0 0 1 1.5 1.5v12a1.5 1.5 0 0 0-1.5-1.5H4z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M20 5.5h-6.5A1.5 1.5 0 0 0 12 7v12a1.5 1.5 0 0 1 1.5-1.5H20z'/%3E%3C/svg%3E"); }
a[href$="principles.html"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='8.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23000'/%3E%3C/svg%3E"); }
a[href$="balance.html"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M5 4v16M12 4v16M19 4v16'/%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='3' y='13' width='4' height='3' rx='1'/%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='10' y='7' width='4' height='3' rx='1'/%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='17' y='11' width='4' height='3' rx='1'/%3E%3C/svg%3E"); }
a[href$="goals.html"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='8.5'/%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
a[href$="objects.html"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='5'/%3E%3Cellipse fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' rx='10' ry='3.6' transform='rotate(-20 12 12)'/%3E%3C/svg%3E"); }
a[href$="placement.html"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M12 3v4M12 17v4M3 12h4M17 12h4'/%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
a[href$="scenario/index.html"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M6 4h10l2 2v14H6z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M9 9h6M9 12.5h6M9 16h4'/%3E%3C/svg%3E"); }
a[href$="chapters.html"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M4 5.5l1-1v3.5M3.8 11h2.2l-2 2.5h2.2M4 16h2l-1 1.4a1 1 0 1 1-1 1'/%3E%3C/svg%3E"); }
a[href*="agent/"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='5' y='8' width='14' height='11' rx='2.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M12 4.5V8M9.5 13v1.5M14.5 13v1.5M2.5 12.5v3M21.5 12.5v3'/%3E%3Ccircle cx='12' cy='4' r='1.1' fill='%23000'/%3E%3C/svg%3E"); }
a[href*="designer/"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M12 3l6.5 7.5L12 21l-6.5-10.5z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M12 3v9'/%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='13.3' r='1.6'/%3E%3C/svg%3E"); }
a[href$="elements.html"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='13' y='4' width='7' height='7' rx='3.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M7.5 13.5l4 6.5h-8z'/%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='13' y='13' width='7' height='7' rx='1.5' transform='rotate(45 16.5 16.5)'/%3E%3C/svg%3E"); }
/* the front page's cards take their icon from their first link */
li { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M6 3.5h8l4 4V20.5H6z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M14 3.5v4h4'/%3E%3C/svg%3E"); }
li:has(> a:first-child[href$="index.html"]) { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M4 5.5h6.5a1.5 1.5 0 0 1 1.5 1.5v12a1.5 1.5 0 0 0-1.5-1.5H4z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M20 5.5h-6.5A1.5 1.5 0 0 0 12 7v12a1.5 1.5 0 0 1 1.5-1.5H20z'/%3E%3C/svg%3E"); }
li:has(> a:first-child[href$="principles.html"]) { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='8.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23000'/%3E%3C/svg%3E"); }
li:has(> a:first-child[href$="balance.html"]) { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M5 4v16M12 4v16M19 4v16'/%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='3' y='13' width='4' height='3' rx='1'/%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='10' y='7' width='4' height='3' rx='1'/%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='17' y='11' width='4' height='3' rx='1'/%3E%3C/svg%3E"); }
li:has(> a:first-child[href$="goals.html"]) { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='8.5'/%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
li:has(> a:first-child[href$="objects.html"]) { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='5'/%3E%3Cellipse fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' rx='10' ry='3.6' transform='rotate(-20 12 12)'/%3E%3C/svg%3E"); }
li:has(> a:first-child[href$="placement.html"]) { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M12 3v4M12 17v4M3 12h4M17 12h4'/%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
li:has(> a:first-child[href$="scenario/index.html"]) { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M6 4h10l2 2v14H6z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M9 9h6M9 12.5h6M9 16h4'/%3E%3C/svg%3E"); }
li:has(> a:first-child[href$="chapters.html"]) { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M4 5.5l1-1v3.5M3.8 11h2.2l-2 2.5h2.2M4 16h2l-1 1.4a1 1 0 1 1-1 1'/%3E%3C/svg%3E"); }
li:has(> a:first-child[href*="agent/"]) { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='5' y='8' width='14' height='11' rx='2.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M12 4.5V8M9.5 13v1.5M14.5 13v1.5M2.5 12.5v3M21.5 12.5v3'/%3E%3Ccircle cx='12' cy='4' r='1.1' fill='%23000'/%3E%3C/svg%3E"); }
li:has(> a:first-child[href*="designer/"]) { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M12 3l6.5 7.5L12 21l-6.5-10.5z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M12 3v9'/%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='13.3' r='1.6'/%3E%3C/svg%3E"); }
li:has(> a:first-child[href$="elements.html"]) { --card-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='13' y='4' width='7' height='7' rx='3.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M7.5 13.5l4 6.5h-8z'/%3E%3Crect fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' x='13' y='13' width='7' height='7' rx='1.5' transform='rotate(45 16.5 16.5)'/%3E%3C/svg%3E"); }

/* ---------- 3. Header ---------------------------------------------------- */
.bar {
    position: sticky; top: 0; z-index: 10;
    background: color-mix(in srgb, var(--bg-2) 88%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.bar::after { /* the instrument line: a short lit segment on the hairline */
    content: ""; position: absolute; left: 0; bottom: -1px; width: min(var(--side), 30%); height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
}
.bar-in { position: relative; display: flex; align-items: center; gap: 10px; height: var(--bar-h); padding: 0 20px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-1); text-decoration: none; }
.brand-mark { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='7' fill='%23000'/%3E%3Cpath d='M3.2 21.6C1.6 18.9 7.4 13.5 16 9.5s16.7-5.3 18.3-2.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' transform='translate(-3 1.5)'/%3E%3Cpath d='M26.6 5.2l3.4-2 -1 3.8z' fill='%23000'/%3E%3C/svg%3E"); width: 26px; height: 26px; color: var(--accent); }
.brand-name { font-weight: 750; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.brand-tag {
    font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
    padding: 4px 6px 3px; border: 1px solid var(--line-2); border-radius: 4px;
}
:root[data-theme="light"] .brand-tag { color: var(--link); }
.bar-link {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: var(--r-sm);
    color: var(--text); text-decoration: none; font-size: 14px; font-weight: 550; white-space: nowrap;
}
.bar-link:hover { color: var(--text-1); background: var(--panel-2); }
.bar-link.repo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.3a9.7 9.7 0 0 0-3.07 18.9c.49.09.66-.21.66-.47v-1.66c-2.7.59-3.27-1.3-3.27-1.3-.44-1.12-1.08-1.42-1.08-1.42-.88-.6.07-.59.07-.59.97.07 1.48 1 1.48 1 .87 1.48 2.28 1.05 2.83.8.09-.62.34-1.05.62-1.29-2.15-.25-4.42-1.08-4.42-4.8 0-1.06.38-1.93 1-2.6-.1-.25-.43-1.24.1-2.58 0 0 .81-.26 2.66 1a9.2 9.2 0 0 1 4.84 0c1.85-1.26 2.66-1 2.66-1 .53 1.34.2 2.33.1 2.58.62.67 1 1.54 1 2.6 0 3.73-2.27 4.55-4.43 4.79.35.3.66.9.66 1.8v2.67c0 .26.17.57.67.47A9.7 9.7 0 0 0 12 2.3z'/%3E%3C/svg%3E"); }
.bar-link.repo { justify-content: center; width: 34px; padding: 0; }
.bar-link.repo::before { width: 20px; height: 20px; }
.bar-link.repo > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.bar-link.play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 4.8v14.4a.8.8 0 0 0 1.2.7l11.5-7.2a.8.8 0 0 0 0-1.4L9.2 4.1A.8.8 0 0 0 8 4.8z'/%3E%3C/svg%3E"); color: var(--text-1); border: 1px solid var(--line-2); }
.bar-link.play::before { color: var(--accent); width: 14px; height: 14px; }
.bar-link.play:hover { box-shadow: var(--glow); background: transparent; }
/* the theme switch: one icon showing the theme now, as bare as the GitHub icon beside it */
.theme {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--text); cursor: pointer;
}
.theme:hover { color: var(--text-1); background: var(--panel-2); }
.theme svg { width: 20px; height: 20px; }
:root[data-theme="dark"] .theme-sun,
:root:not([data-theme="dark"]) .theme-moon { display: none; }

/* the page picker: the page list for narrow windows, a <details>, so no script */
.picker { display: none; position: static; min-width: 0; }
.picker summary {
    display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; min-width: 0; max-width: 100%;
    border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg);
    list-style: none; cursor: pointer; color: var(--text-1); font-size: 14px; font-weight: 600;
}
.picker summary::-webkit-details-marker { display: none; }
.picker summary::before { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); width: 16px; height: 16px; color: var(--text-3); }
.picker summary::after { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); width: 14px; height: 14px; color: var(--text-3); transition: transform 0.15s; }
.picker[open] summary { border-color: var(--accent); }
.picker[open] summary::after { transform: rotate(180deg); }
.picker-label { font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.picker-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-list {
    position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 11;
    max-height: min(70vh, calc(100vh - var(--bar-h) - 24px)); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px; border: 1px solid var(--line-2); border-radius: var(--r-lg);
    background: var(--bg-2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

/* ---------- 4. Page list (both copies) ----------------------------------- */
.pages ul, .picker-list ul { list-style: none; margin: 0; padding: 0; }
.pages a, .picker-list a {
    position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm);
    color: var(--text); text-decoration: none; font-size: 14.5px; line-height: 1.35;
}
.pages a::before, .picker-list a::before { color: var(--text-3); }
.pages a:hover, .picker-list a:hover { color: var(--text-1); background: var(--panel-2); }
.pages a:hover::before, .picker-list a:hover::before { color: var(--text); }
.pages a.on, .picker-list a.on { color: var(--text-1); font-weight: 650; background: var(--accent-dim); }
.pages a.on::before, .picker-list a.on::before { color: var(--accent); }
:root[data-theme="light"] .pages a.on::before, :root[data-theme="light"] .picker-list a.on::before { color: var(--link); }
.pages a.on::after, .picker-list a.on::after { /* the lit edge */
    content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}
:root[data-theme="light"] .pages a.on::after, :root[data-theme="light"] .picker-list a.on::after { box-shadow: none; background: var(--link); }
/* optional, needs the build: group titles in the list, <li class="group">Rules</li> */
.pages li.group, .picker-list li.group {
    margin: 18px 10px 6px; font: 600 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.pages li.group:first-child, .picker-list li.group:first-child { margin-top: 4px; }

/* ---------- 5. Layout, hero, footer -------------------------------------- */
.layout {
    flex: 1; width: 100%; max-width: calc(var(--side) + var(--wide) + 2 * var(--gutter)); margin: 0 auto;
    display: grid; grid-template-columns: var(--side) minmax(0, 1fr);
}
.pages {
    position: sticky; top: var(--bar-h); align-self: start;
    max-height: calc(100vh - var(--bar-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 28px 14px 40px 16px; border-right: 1px solid var(--line);
}
.pages-label { margin: 0 10px 10px; font: 600 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
main { min-width: 0; padding: 40px var(--gutter) 88px; }

/* the hero shows on the front page only (the one whose h1 is "World Explorer: documentation") */
.hero { display: none; }
body:has(.content > h1#world-explorer-documentation) .hero {
    display: block; height: clamp(150px, 22vw, 300px);
    background: linear-gradient(180deg, transparent 55%, var(--bg)), url(hero.svg) center 40% / cover no-repeat, #060b15;
    border-bottom: 1px solid var(--line);
}
:root[data-theme="light"] body:has(.content > h1#world-explorer-documentation) .hero {
    background: url(hero.svg) center 40% / cover no-repeat, #060b15;
}

.foot { border-top: 1px solid var(--line); background: var(--bg-2); color: var(--text-3); font-size: 14px; }
.foot-in {
    max-width: calc(var(--side) + var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 22px 20px 26px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
}
.foot-brand { display: flex; align-items: center; gap: 8px; color: var(--text-1); font-weight: 650; }
.foot-brand .brand-mark { width: 20px; height: 20px; }
.foot-text { margin: 0; flex: 1 1 320px; }
.foot-text code { font: 0.9em var(--mono); color: var(--text); }
.foot-in .space { display: none; }
.foot-link { display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none; font-weight: 550; white-space: nowrap; }
.foot-link::before { width: 16px; height: 16px; color: var(--text-3); }
.foot-link:hover { color: var(--text-1); }
.foot-link.repo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.3a9.7 9.7 0 0 0-3.07 18.9c.49.09.66-.21.66-.47v-1.66c-2.7.59-3.27-1.3-3.27-1.3-.44-1.12-1.08-1.42-1.08-1.42-.88-.6.07-.59.07-.59.97.07 1.48 1 1.48 1 .87 1.48 2.28 1.05 2.83.8.09-.62.34-1.05.62-1.29-2.15-.25-4.42-1.08-4.42-4.8 0-1.06.38-1.93 1-2.6-.1-.25-.43-1.24.1-2.58 0 0 .81-.26 2.66 1a9.2 9.2 0 0 1 4.84 0c1.85-1.26 2.66-1 2.66-1 .53 1.34.2 2.33.1 2.58.62.67 1 1.54 1 2.6 0 3.73-2.27 4.55-4.43 4.79.35.3.66.9.66 1.8v2.67c0 .26.17.57.67.47A9.7 9.7 0 0 0 12 2.3z'/%3E%3C/svg%3E"); }
.foot-link.up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.foot-link.up:hover { box-shadow: var(--glow); }

/* ---------- 6. Article elements ------------------------------------------ */
.content { max-width: var(--wide); counter-reset: h2; }
/* prose keeps a reading width; tables and code blocks may go wider, up to --wide */
.content > :not(table, pre) { max-width: var(--measure); }
.content > :first-child { margin-top: 0; }

.content h1 {
    margin: 0 0 22px; padding-bottom: 18px; color: var(--text-1);
    font-size: clamp(28px, 1.6vw + 18px, 40px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 760;
    background: linear-gradient(90deg, var(--accent), transparent) left bottom / 96px 2px no-repeat;
}
.content h1 + p { font-size: 1.075em; color: var(--text-1); opacity: 0.9; }
.content h2 {
    margin: 52px 0 14px; padding-top: 20px; color: var(--text-1);
    font-size: clamp(21px, 0.6vw + 17px, 26px); line-height: 1.25; letter-spacing: -0.015em; font-weight: 700;
    background:
        linear-gradient(var(--accent), var(--accent)) left top / 40px 2px no-repeat,
        linear-gradient(var(--line), var(--line)) left top / 100% 1px no-repeat;
}
.content h2::before {
    counter-increment: h2; content: "§ " counter(h2, decimal-leading-zero);
    display: block; margin-bottom: 6px; color: var(--text-3);
    font: 600 11px/1 var(--mono); letter-spacing: 0.14em;
}
.content h3 { margin: 32px 0 8px; color: var(--text-1); font-size: 18.5px; line-height: 1.35; font-weight: 680; letter-spacing: -0.005em; }
.content h2 + h3 { margin-top: 18px; }
.content h4, .content h5, .content h6 { margin: 24px 0 6px; color: var(--text-1); font-size: 16px; }
.content :is(h2, h3) code { font-size: 0.82em; }
.content :is(h2, h3):target { animation: target 2.4s var(--ease, ease-out); }
@keyframes target { 0%, 30% { box-shadow: -14px 0 0 -10px var(--accent); background-color: var(--accent-dim); } 100% { background-color: transparent; } }

.content p { margin: 0 0 14px; }
.content strong { color: var(--text-1); font-weight: 650; }
.content em { font-style: italic; }
.content del { color: var(--text-3); text-decoration-color: var(--red); text-decoration-thickness: 1.5px; }

.content a { text-decoration-line: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.content a:hover { text-decoration-color: currentColor; }
.content a[href^="http"]::after { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M9 5H5.5A1.5 1.5 0 0 0 4 6.5v12A1.5 1.5 0 0 0 5.5 20h12a1.5 1.5 0 0 0 1.5-1.5V15M13 4h7v7M20 4l-9 9'/%3E%3C/svg%3E"); width: 0.72em; height: 0.72em; margin-left: 0.22em; vertical-align: 0.02em; opacity: 0.7; }

/* inline code: long names wrap anywhere, never push the page sideways */
.content code {
    padding: 0.08em 0.36em; border: 1px solid var(--code-line); border-radius: 5px; background: var(--code-bg); color: var(--code);
    font: 0.86em/1.5 var(--mono); overflow-wrap: anywhere; word-break: normal;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.content a code { color: var(--link); border-color: var(--link-line); }

/* lists: diamond bullets, hollow one level in */
.content ul, .content ol { margin: 0 0 16px; padding-left: 26px; }
.content ul { list-style: none; }
.content li { margin: 6px 0; }
.content li > ul, .content li > ol { margin: 8px 0 4px; }
.content ul > li { position: relative; }
.content ul > li::before {
    content: ""; position: absolute; left: -18px; top: 0.66em; width: 6px; height: 6px;
    background: var(--accent); transform: rotate(45deg); border-radius: 1px;
}
.content li ul > li::before { background: transparent; border: 1.5px solid var(--accent); width: 6px; height: 6px; }
.content ol > li::marker { color: var(--text-3); font: 600 0.82em var(--mono); }
.content ol > li { padding-left: 4px; }
/* a bold lead-in stands out; the rest of the bullet is the reason */
.content li > strong:first-child { color: var(--text-1); }

/* tables: a bare <table> becomes its own scroll box; it shrinks to its content and wraps long text,
   and only a table that cannot fit (many columns) scrolls, with shadows at the edges that can still scroll */
.content table {
    display: block; width: fit-content; max-width: 100%; overflow-x: auto; margin: 6px 0 22px;
    border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r);
    font-size: 14.5px; line-height: 1.5; font-variant-numeric: tabular-nums;
    background:
        linear-gradient(90deg, var(--bg) 30%, transparent) left / 32px 100% no-repeat local,
        linear-gradient(270deg, var(--bg) 30%, transparent) right / 32px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right / 12px 100% no-repeat scroll,
        var(--bg);
}
.content th, .content td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 4.5em; }
.content th {
    position: relative; background: color-mix(in srgb, var(--panel) 70%, transparent); color: var(--text-3); white-space: nowrap;
    font: 600 11.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; border-bottom-color: var(--line-2);
}
.content tbody tr:nth-child(even) td { background: var(--zebra); }
.content tbody tr:last-child td { border-bottom: 0; }
.content tbody tr:hover td { background: var(--accent-dim); }
.content td:first-child { color: var(--text-1); font-weight: 600; }
.content td:empty::before { content: "—"; color: var(--text-3); font-weight: 400; }
.content td code { font-size: 0.84em; }
.content td:has(> code:only-child), .content td:has(> a:only-child > code) { min-width: 13em; } /* a path alone in a cell stays on one line where it can; the table scrolls instead */
.content td[align="right"], .content th[align="right"] { text-align: right; }
.content td[align="center"], .content th[align="center"] { text-align: center; }

/* code blocks: scroll inside their own box; no colouring, so they lean on spacing and a language tag */
.content pre {
    position: relative; max-width: 100%; margin: 6px 0 22px; padding: 16px 18px; overflow-x: auto;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--pre-bg);
    box-shadow: inset 3px 0 0 var(--line-2);
    font: 13.5px/1.65 var(--mono); color: var(--code); tab-size: 4;
}
.content pre code { padding: 0; border: 0; background: none; color: inherit; font: inherit; overflow-wrap: normal; white-space: pre; }
.content pre:has(> code[class*="language-"]) { padding-top: 38px; box-shadow: inset 3px 0 0 var(--accent); }
.content pre:has(> code[class*="language-"])::before {
    position: absolute; top: 10px; left: 18px; color: var(--text-3);
    font: 600 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.content pre:has(> code.language-js)::before { content: "JS"; }
.content pre:has(> code.language-json)::before { content: "JSON"; }
.content pre:has(> code.language-sh)::before, .content pre:has(> code.language-bash)::before { content: "Shell"; }
.content pre:has(> code.language-css)::before { content: "CSS"; }
.content pre:has(> code.language-html)::before { content: "HTML"; }

.content blockquote {
    position: relative; margin: 18px 0 22px; padding: 14px 18px 14px 50px;
    border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; background: var(--gold-dim); color: var(--text-1);
}
.content blockquote::before {
    content: ""; position: absolute; left: 16px; top: 16px; width: 20px; height: 20px; background: var(--gold);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 18.5v-5.2C4 8.6 6.4 6 10 5.5l.6 1.8C8.4 8 7.3 9.6 7.2 11.8H10v6.7zm9.5 0v-5.2c0-4.7 2.4-7.3 6-7.8l.6 1.8c-2.2.7-3.3 2.3-3.4 4.5h2.8v6.7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 18.5v-5.2C4 8.6 6.4 6 10 5.5l.6 1.8C8.4 8 7.3 9.6 7.2 11.8H10v6.7zm9.5 0v-5.2c0-4.7 2.4-7.3 6-7.8l.6 1.8c-2.2.7-3.3 2.3-3.4 4.5h2.8v6.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.content blockquote > :last-child { margin-bottom: 0; }

/* images have no size in the markup: cap them; SVG art (made for space) sits on a dark plate in both themes */
.content img { display: block; max-width: 100%; height: auto; margin: 10px 0 18px; border-radius: var(--r); }
.content img[src$=".svg"] {
    width: min(100%, 300px); padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--art-bg);
}
.content p > img:only-child { margin: 10px 0 6px; }

.content hr { position: relative; height: 1px; margin: 40px 0; border: 0; background: var(--line); overflow: visible; }
.content hr::after {
    content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px;
    background: var(--bg); border: 1.5px solid var(--accent); transform: rotate(45deg);
}

/* ---------- 7. Our conventions -------------------------------------------- */
/* "Where it lives:" / "Where:" bullets (li.where): a code strip */
.content li.where {
    margin: 12px 0 6px; padding: 9px 14px 9px 40px; font-size: 14.5px; line-height: 1.7;
    border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--code-bg); color: var(--text);
}
.content ul > li.where::before {
    left: 13px; top: 12px; width: 17px; height: 17px; transform: none; border: 0; border-radius: 0; background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M8.5 7L3.5 12l5 5M15.5 7l5 5-5 5M13.5 4.5l-3 15'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M8.5 7L3.5 12l5 5M15.5 7l5 5-5 5M13.5 4.5l-3 15'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-theme="light"] .content ul > li.where::before { background: var(--link); }
.content li.where code { background: var(--panel); }

/* "Checked." (em.checked): a badge; the text stays in the HTML for readers and search */
.content em.checked {
    display: inline-flex; align-items: center; gap: 4px; vertical-align: 0.08em; margin: 0 1px;
    padding: 2px 8px 2px 5px; border: 1px solid var(--green-line); border-radius: 99px; background: var(--green-dim);
    font-size: 0; font-style: normal; line-height: 1; white-space: nowrap;
}
.content em.checked::before {
    content: ""; width: 12px; height: 12px; background: var(--green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.content em.checked::after { content: "Checked"; color: var(--green); font: 600 11px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* "Today" bullets (li.today) and "Open question:" bullets (li.open): status strips */
.content li.today, .content li.open {
    margin: 12px 0; padding: 10px 14px 10px 40px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.content li.today { border-left: 2px solid var(--gold); background: var(--gold-dim); }
.content li.open { border-left: 2px solid var(--pink); background: var(--pink-dim); }
.content ul > li.today::before, .content ul > li.open::before {
    left: 13px; top: 13px; width: 17px; height: 17px; transform: none; border: 0; border-radius: 0;
    -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.content ul > li.today::before { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='8.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); background: var(--gold); }
.content ul > li.open::before { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' cx='12' cy='12' r='8.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M9.5 9.5a2.6 2.6 0 1 1 3.6 2.4c-.7.3-1.1.9-1.1 1.6v.6'/%3E%3Ccircle cx='12' cy='17' r='1.1' fill='%23000'/%3E%3C/svg%3E"); background: var(--pink); }
.content li.today > ul { margin-bottom: 0; }

/* chapter headings (h3.chapter) and their stage line (p.stages): one card.
   Before the build adds the classes, the same look comes from the shape: an h3 followed by a line
   that ends in italics and holds no code, links or bold. */
.content h3.chapter,
.content h3:has(+ p > em:last-child):not(:has(+ p :is(code, a, strong))) {
    margin: 30px 0 0; padding: 14px 18px 4px; max-width: var(--measure);
    border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: linear-gradient(var(--gold), var(--gold)) left 18px top / 28px 2px no-repeat, var(--panel);
}
.content p.stages,
.content h3 + p:not(:has(code, a, strong)):has(> em:last-child) {
    margin: 0 0 14px; padding: 2px 18px 14px;
    border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: var(--panel); color: var(--text-3); font-size: 14px; line-height: 1.6;
}
.content p.stages em,
.content h3 + p:not(:has(code, a, strong)):has(> em:last-child) em { color: var(--text-1); font-style: normal; }

/* optional, needs the build: an anchor link in a heading, <h2 id="x"><a class="anchor" href="#x"></a>…</h2> */
.content :is(h2, h3) > a.anchor {
    float: left; margin-left: -26px; width: 20px; height: 1.25em; opacity: 0; color: var(--text-3); text-decoration: none;
    background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M9.5 4l-2 16M16.5 4l-2 16M4.5 9h16M3.5 15h16'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M9.5 4l-2 16M16.5 4l-2 16M4.5 9h16M3.5 15h16'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.content :is(h2, h3):hover > a.anchor, .content a.anchor:focus { opacity: 1; }

/* ---------- 8. The front page: its list of pages becomes cards ------------ */
.content:has(> h1#world-explorer-documentation) { max-width: var(--wide); }
.content:has(> h1#world-explorer-documentation) > ul {
    max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px;
    padding: 0; margin-top: 26px;
}
.content:has(> h1#world-explorer-documentation) > ul > li {
    position: relative; margin: 0; padding: 16px 18px 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--panel); font-size: 14.5px; line-height: 1.55; color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.content:has(> h1#world-explorer-documentation) > ul > li::before { display: none; }
.content:has(> h1#world-explorer-documentation) > ul > li:hover { border-color: var(--line-2); box-shadow: var(--glow); }
.content:has(> h1#world-explorer-documentation) > ul > li { padding-right: 64px; }
.content:has(> h1#world-explorer-documentation) > ul > li > a:first-child {
    color: var(--text-1); text-decoration: none; font: 600 15px var(--mono);
}
.content:has(> h1#world-explorer-documentation) > ul > li > a:first-child::before { /* the tile, and the whole card answers to the link */
    content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.content:has(> h1#world-explorer-documentation) > ul > li > a:first-child::after { /* the page's icon on a tile, top right */
    content: ""; position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 9px;
    background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--line-2);
}
.content:has(> h1#world-explorer-documentation) > ul > li::after {
    content: ""; position: absolute; right: 24px; top: 24px; width: 20px; height: 20px; pointer-events: none;
    background: var(--accent); -webkit-mask: var(--card-i) center / contain no-repeat; mask: var(--card-i) center / contain no-repeat;
}
:root[data-theme="light"] .content:has(> h1#world-explorer-documentation) > ul > li::after { background: var(--link); }
.content:has(> h1#world-explorer-documentation) > ul > li:has(> a:first-child:hover) > a:first-child { color: var(--link); }
.content:has(> h1#world-explorer-documentation) > ul > li > a:not(:first-child) { position: relative; z-index: 1; }

/* ---------- 9. Narrow and short windows ----------------------------------- */
@media (min-width: 1920px) {
    body { font-size: 17px; }
    :root { --measure: 800px; --wide: 1160px; --side: 280px; }
}
@media (max-width: 1279px) {
    :root { --gutter: 36px; --side: 236px; }
}
/* below 1100 px the page list moves into the header's picker */
@media (max-width: 1099px) {
    .layout { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--wide) + 2 * var(--gutter)); }
    .pages { display: none; }
    .picker { display: block; flex: 0 1 auto; }
    .brand-name { display: none; }
    .bar::after { width: 120px; }
    main { padding-top: 32px; }
}
@media (max-width: 700px) {
    :root { --gutter: 16px; --bar-h: 52px; }
    body { font-size: 15.5px; }
    .bar-in { gap: 6px; padding: 0 10px 0 12px; }
    .brand-tag { display: none; }
    .picker { flex: 1 1 auto; }
    .bar-link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .bar-link { padding: 0 8px; }
    .bar-link.play { border: 0; }
    .bar-link.play::before { width: 16px; height: 16px; }
    main { padding: 26px var(--gutter) 64px; }
    .content h2 { margin-top: 42px; }
    .content ul, .content ol { padding-left: 22px; }
    .content table { font-size: 14px; }
    .content th, .content td { padding: 8px 11px; }
    .content pre { padding: 14px 14px; font-size: 12.5px; }
    .content pre:has(> code[class*="language-"]) { padding-top: 34px; }
    .content pre:has(> code[class*="language-"])::before { left: 14px; }
    .content li.where, .content li.today, .content li.open { padding-left: 36px; padding-right: 12px; }
    .content ul > li.where::before, .content ul > li.today::before, .content ul > li.open::before { left: 11px; }
    .content h3.chapter, .content h3:has(+ p > em:last-child):not(:has(+ p :is(code, a, strong))) { padding: 12px 14px 4px; background-position: left 14px top, 0 0; }
    .content p.stages, .content h3 + p:not(:has(code, a, strong)):has(> em:last-child) { padding: 2px 14px 12px; }
    .foot-in { padding: 18px 16px 22px; }
}
@media (max-width: 380px) {
    .bar-link.play { display: none; }
    .picker-label { display: none; }
}
/* short windows (1536 × 348, 1280 × 400): the header scrolls away, the page list keeps its own scroll */
@media (max-height: 520px) {
    .bar { position: relative; }
    .pages { top: 0; max-height: 100vh; padding-top: 16px; }
    html { scroll-padding-top: 12px; }
    body:has(.content > h1#world-explorer-documentation) .hero { height: 120px; }
    main { padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}
@media print {
    .bar, .pages, .foot, .hero, .skip { display: none !important; }
    .layout { display: block; }
    main { padding: 0; }
}