:root {
  --page: #f6f6f6; --paper: #fff; --fg: #202122; --muted: #54595d; --line: #a2a9b1; --soft: #eaecf0; --softer: #f8f9fa;
  --link: #0645ad; --visited: #5a3696; --red: #ba0000; --head: #fff; --accent: #8a5a1a;
  --buff: #127861; --nerf: #cf2222; --new: #36c; --rework: #7b3fa0; --fix: #9c5c00; --other: #666b70; --perf: #17748b; --econ: #5f711a; --ui: #b83688; --qol: #a0582e;
  --infobox: #f8f9fa; --notice: #fef6e7; --notice-line: #fc3; --code: var(--fix);
  --serif: "Linux Libertine", Georgia, Times, serif; --sans: system-ui, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #101418; --paper: #1b1f24; --fg: #eaecf0; --muted: #a2a9b1; --line: #54595d; --soft: #2a2f36; --softer: #20252b;
    --link: #6aa9ff; --visited: #b794f4; --red: #ff7b72; --head: #1b1f24; --accent: #e0b070;
    --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61;
    --infobox: #20252b; --notice: #2e2815; --notice-line: #8a6d00;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --page: #101418; --paper: #1b1f24; --fg: #eaecf0; --muted: #a2a9b1; --line: #54595d; --soft: #2a2f36; --softer: #20252b;
    --link: #6aa9ff; --visited: #b794f4; --red: #ff7b72; --head: #1b1f24; --accent: #e0b070;
    --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61;
    --infobox: #20252b; --notice: #2e2815; --notice-line: #8a6d00;
    color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* themes: each skin defines light and dark; Auto color follows the device */
/* crier: a town-crier broadsheet. Black ink on newsprint (light) or cream ink on charcoal stock (dark), a centered masthead with a double rule,
   a dateline under it, justified serif text, thick-and-thin rules over headlines and ruled tables */
html[data-skin="crier"] {
  --page: #e0d9c6; --paper: #efe9da; --fg: #141414; --muted: #4a463c; --line: #8c8574; --soft: #e3dccb; --softer: #ebe4d3; --link: #8a1c1c; --visited: #5a3a5a; --red: #8a1c1c; --head: #efe9da; --accent: #8a1c1c; --infobox: #ebe4d3; --buff: #106a56; --nerf: #b61e1e; --new: #2d5ab4; --rework: #7b3fa0; --fix: #885000; --other: #595e62; --perf: #146579; --econ: #546417; --ui: #a23078; --qol: #8b4d28; --notice: #f1e6c0; --notice-line: #b89a2a;
  --sans: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --serif: var(--sans);
  --j-frame: 1px solid var(--fg); --j-head: 3px double var(--fg); --j-rule: 1px solid var(--fg); --j-cell: var(--line); --j-seal: var(--fg);
  color-scheme: light;
}
html[data-skin="crier"][data-theme="dark"] {
  --page: #0e0e0e; --paper: #171717; --fg: #ece7d8; --muted: #a8a396; --line: #4a4a46; --soft: #232323; --softer: #1d1d1d; --link: #f0a898; --visited: #cfa6c4; --red: #f0a898; --head: #171717; --accent: #e88a7a; --infobox: #1d1d1d; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f;
  --sans: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --serif: var(--sans);
  --j-frame: 1px solid var(--fg); --j-head: 3px double var(--fg); --j-rule: 1px solid var(--fg); --j-cell: var(--line); --j-seal: var(--fg);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-skin="crier"]:not([data-theme="light"]) {
  --page: #0e0e0e; --paper: #171717; --fg: #ece7d8; --muted: #a8a396; --line: #4a4a46; --soft: #232323; --softer: #1d1d1d; --link: #f0a898; --visited: #cfa6c4; --red: #f0a898; --head: #171717; --accent: #e88a7a; --infobox: #1d1d1d; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f;
  --sans: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --serif: var(--sans);
  --j-frame: 1px solid var(--fg); --j-head: 3px double var(--fg); --j-rule: 1px solid var(--fg); --j-cell: var(--line); --j-seal: var(--fg);
  color-scheme: dark;
  }
}
/* iliac */
html[data-skin="iliac"] {
  --page: #dbe6e8; --paper: #f4f7f4; --fg: #12303c; --muted: #46606c; --line: #8da8b3; --soft: #d6e4e9; --softer: #e8f0ef; --link: #17587a;
  --visited: #5a3f8f; --red: #b83226; --head: #eaf1f1; --accent: #805c1b; --infobox: #e8f0ef; --buff: #0f724f; --nerf: #b53628; --new: #1d5fb8;
  --rework: #7a3fa0; --fix: #935400; --other: #53666e; --perf: #186a93; --econ: #596919; --ui: #ad3280; --qol: #7f5e25; --notice: #e6f0e8; --notice-line: #b88a2e;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --j-caps: small-caps; --j-track: .05em; --j-orn: ""; --j-orn-size: 16px; --j-orn-rot: 0deg; --j-orn-bg: #b88a2e; --j-orn-clip: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  --j-seal: radial-gradient(circle, #123b4d 0 56%, transparent 58%), conic-gradient(#123b4d 0 12.5%, #b88a2e 0 25%, #123b4d 0 37.5%, #b88a2e 0 50%, #123b4d 0 62.5%, #b88a2e 0 75%, #123b4d 0 87.5%, #b88a2e 0); --j-inset: inset 0 1px 3px rgba(18, 48, 60, .22);
  --j-sheet: inset 0 0 40px rgba(29, 74, 92, .12), 0 2px 8px rgba(18, 48, 60, .3); --j-frame: 3px double #1d4a5c; --j-head: 3px double #1d4a5c; --j-rule: 2px dotted #1d4a5c; --j-cell: #a9c0c9;
  --j-paper: linear-gradient(rgba(29, 74, 92, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 74, 92, .09) 1px, transparent 1px), radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .6), transparent 60%); --j-paper-size: 24px 24px, 24px 24px, auto;
  --j-desk: linear-gradient(180deg, #24566a, #0f2f3d); --j-rail: var(--page);
  color-scheme: light;
}
html[data-skin="iliac"][data-theme="dark"] {
  --page: #08171e; --paper: #0e2530; --fg: #dcebf0; --muted: #8fb0bc; --line: #2d4a57; --soft: #153341; --softer: #112c38; --link: #e6b85c;
  --visited: #b49ae8; --red: #ff8f84; --head: #0b1f28; --accent: #e0b050; --infobox: #112c38; --buff: #5fd6a6; --nerf: #ff8f84; --new: #7db8ff;
  --rework: #c9a2ee; --fix: #f0be55; --other: #8fb0bc; --perf: #50c5e2; --econ: #bfd85a; --ui: #d777b4; --qol: #d18a61; --notice: #12303a; --notice-line: #b88a2e;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --j-caps: small-caps; --j-track: .05em; --j-orn: ""; --j-orn-size: 16px; --j-orn-rot: 0deg; --j-orn-bg: #e0b050; --j-orn-clip: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  --j-seal: radial-gradient(circle, #0b1f28 0 56%, transparent 58%), conic-gradient(#0b1f28 0 12.5%, #e0b050 0 25%, #0b1f28 0 37.5%, #e0b050 0 50%, #0b1f28 0 62.5%, #e0b050 0 75%, #0b1f28 0 87.5%, #e0b050 0); --j-inset: inset 0 1px 3px rgba(0, 0, 0, .5);
  --j-sheet: inset 0 0 60px rgba(0, 0, 0, .5); --j-frame: 3px double #5b7f8e; --j-head: 3px double #5b7f8e; --j-rule: 2px dotted #5b7f8e; --j-cell: #26414d;
  --j-paper: linear-gradient(rgba(143, 176, 188, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 176, 188, .07) 1px, transparent 1px), radial-gradient(ellipse at 50% -10%, rgba(224, 176, 80, .12), transparent 55%); --j-paper-size: 24px 24px, 24px 24px, auto;
  --j-desk: radial-gradient(ellipse at 50% 0%, #10303d, #050e13 75%); --j-rail: var(--page);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-skin="iliac"]:not([data-theme="light"]) {
  --page: #08171e; --paper: #0e2530; --fg: #dcebf0; --muted: #8fb0bc; --line: #2d4a57; --soft: #153341; --softer: #112c38; --link: #e6b85c;
  --visited: #b49ae8; --red: #ff8f84; --head: #0b1f28; --accent: #e0b050; --infobox: #112c38; --buff: #5fd6a6; --nerf: #ff8f84; --new: #7db8ff;
  --rework: #c9a2ee; --fix: #f0be55; --other: #8fb0bc; --perf: #50c5e2; --econ: #bfd85a; --ui: #d777b4; --qol: #d18a61; --notice: #12303a; --notice-line: #b88a2e;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --j-caps: small-caps; --j-track: .05em; --j-orn: ""; --j-orn-size: 16px; --j-orn-rot: 0deg; --j-orn-bg: #e0b050; --j-orn-clip: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  --j-seal: radial-gradient(circle, #0b1f28 0 56%, transparent 58%), conic-gradient(#0b1f28 0 12.5%, #e0b050 0 25%, #0b1f28 0 37.5%, #e0b050 0 50%, #0b1f28 0 62.5%, #e0b050 0 75%, #0b1f28 0 87.5%, #e0b050 0); --j-inset: inset 0 1px 3px rgba(0, 0, 0, .5);
  --j-sheet: inset 0 0 60px rgba(0, 0, 0, .5); --j-frame: 3px double #5b7f8e; --j-head: 3px double #5b7f8e; --j-rule: 2px dotted #5b7f8e; --j-cell: #26414d;
  --j-paper: linear-gradient(rgba(143, 176, 188, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 176, 188, .07) 1px, transparent 1px), radial-gradient(ellipse at 50% -10%, rgba(224, 176, 80, .12), transparent 55%); --j-paper-size: 24px 24px, 24px 24px, auto;
  --j-desk: radial-gradient(ellipse at 50% 0%, #10303d, #050e13 75%); --j-rail: var(--page);
  color-scheme: dark;
}
}
@font-face { font-family: "Kingthings Petrock"; src: url("fonts/Kingthings%20Petrock.ttf") format("truetype"); font-display: swap; }   /* the author's original file, unchanged, as his licence asks */
/* oblivion: light is a parchment journal (aged vellum on a tan desk, brown ink, oxblood links, a wax-seal mark, ruled and
   double-ruled headings); the --j-* values are the journal's decoration, read by the hooks at the end of this file, and
   the dark blocks below reset them so dark stays a flat theme */
html[data-skin="oblivion"] {
  --page: #d8c59b; --paper: #f0e3c2; --fg: #2a1c0f; --muted: #5c4730; --line: #9c7e52; --soft: #e2d0a4; --softer: #eadab4; --link: #7a2012;
  --visited: #5e3560; --red: #9a2a1a; --head: #ecdcb2; --accent: #7a2012; --infobox: #eadab4; --buff: #1a5d38; --nerf: #9f1e37; --new: #1d4a9a;
  --rework: #70358f; --fix: #734900; --other: #5c4730; --perf: #105a6c; --econ: #4a5814; --ui: #90296c; --qol: #7d4321; --notice: #f3dfb0; --notice-line: #b8862c;
  --sans: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --serif: "Kingthings Petrock", var(--sans);
  --j-sheet: inset 0 0 60px rgba(120, 82, 30, .28), 0 2px 10px rgba(60, 38, 12, .35);
  --j-paper: radial-gradient(ellipse at 12% 8%, rgba(255, 248, 225, .55), transparent 55%), radial-gradient(ellipse at 90% 96%, rgba(150, 100, 40, .16), transparent 50%);
  --j-frame: 4px double #6e5030; --j-rule: 3px double #8a6a3e; --j-head: 3px double #6e5030; --j-caps: small-caps; --j-track: .03em;
  --j-seal: radial-gradient(circle at 35% 30%, #b8452f, #7a2012 60%, #5a160b); --j-inset: inset 0 1px 3px rgba(60, 38, 12, .25);
 --j-desk: repeating-linear-gradient(35deg, rgba(255, 220, 160, .035) 0 2px, transparent 2px 5px), radial-gradient(ellipse at 50% 0%, #4a3320, #2a1c10 75%); --j-rail: var(--page);
  --j-orn: "";
  --j-cell: #c3a87a;
  color-scheme: light;
}
html[data-skin="oblivion"][data-theme="dark"] {
    --j-sheet: inset 0 0 70px rgba(0, 0, 0, .65); --j-frame: 4px double #5a261c; --j-rule: 2px solid #b8401f; --j-rulefx: 0 5px 6px -5px rgba(255, 100, 40, .75); --j-head: 3px double #6b2c20; --j-caps: small-caps; --j-track: .03em;
    --j-paper: radial-gradient(ellipse at 50% 130%, rgba(255, 95, 40, .3), transparent 70%), radial-gradient(circle at 18% 88%, #ff9a52 0 1.5px, transparent 2.5px), radial-gradient(circle at 34% 72%, #ffb070 0 1px, transparent 2px), radial-gradient(circle at 57% 90%, #ff8440 0 1.5px, transparent 2.5px), radial-gradient(circle at 73% 66%, #ffb070 0 1px, transparent 2px), radial-gradient(circle at 88% 84%, #ff9a52 0 1.5px, transparent 2.5px);
    --j-paper-att: fixed; --j-paper-size: 100% 240px; --j-paper-pos: 0 100%; --j-paper-rep: no-repeat;
    --j-seal: radial-gradient(circle at 35% 30%, #ff7a3d, #c23a1b 55%, #5e1409); --j-seal-glow: 0 0 12px rgba(255, 110, 50, .55); --j-inset: inset 0 1px 4px #000; --j-cell: #3d2321;
    --j-desk: radial-gradient(ellipse at 50% 0%, #1f1514, #0a0708 75%); --j-rail: var(--page); --j-orn: ""; --j-head-color: #ff9558; --j-glow: 0 0 14px rgba(255, 100, 40, .45);
    --page: #151011; --paper: #1a1415; --fg: #eadfd8; --muted: #b3a29a; --line: #5c3228; --soft: #281b1c; --softer: #211718; --link: #ff9d7e;
    --visited: #d9a0c0; --red: #ff7e6e; --head: #171112; --accent: #e4583f; --infobox: #211718; --buff: #6fd49a; --nerf: #ff7a96; --new: #7db3ff;
    --rework: #c9a0ee; --fix: #f0e052; --other: #b7a9a4; --perf: #50c5e2; --econ: #bfd85a; --ui: #d161a8; --qol: #d18a61; --notice: #2a1a14; --notice-line: #a8532e;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-skin="oblivion"]:not([data-theme="light"]) {
    --j-sheet: inset 0 0 70px rgba(0, 0, 0, .65); --j-frame: 4px double #5a261c; --j-rule: 2px solid #b8401f; --j-rulefx: 0 5px 6px -5px rgba(255, 100, 40, .75); --j-head: 3px double #6b2c20; --j-caps: small-caps; --j-track: .03em;
    --j-paper: radial-gradient(ellipse at 50% 130%, rgba(255, 95, 40, .3), transparent 70%), radial-gradient(circle at 18% 88%, #ff9a52 0 1.5px, transparent 2.5px), radial-gradient(circle at 34% 72%, #ffb070 0 1px, transparent 2px), radial-gradient(circle at 57% 90%, #ff8440 0 1.5px, transparent 2.5px), radial-gradient(circle at 73% 66%, #ffb070 0 1px, transparent 2px), radial-gradient(circle at 88% 84%, #ff9a52 0 1.5px, transparent 2.5px);
    --j-paper-att: fixed; --j-paper-size: 100% 240px; --j-paper-pos: 0 100%; --j-paper-rep: no-repeat;
    --j-seal: radial-gradient(circle at 35% 30%, #ff7a3d, #c23a1b 55%, #5e1409); --j-seal-glow: 0 0 12px rgba(255, 110, 50, .55); --j-inset: inset 0 1px 4px #000; --j-cell: #3d2321;
    --j-desk: radial-gradient(ellipse at 50% 0%, #1f1514, #0a0708 75%); --j-rail: var(--page); --j-orn: ""; --j-head-color: #ff9558; --j-glow: 0 0 14px rgba(255, 100, 40, .45);
    --page: #151011; --paper: #1a1415; --fg: #eadfd8; --muted: #b3a29a; --line: #5c3228; --soft: #281b1c; --softer: #211718; --link: #ff9d7e;
    --visited: #d9a0c0; --red: #ff7e6e; --head: #171112; --accent: #e4583f; --infobox: #211718; --buff: #6fd49a; --nerf: #ff7a96; --new: #7db3ff;
    --rework: #c9a0ee; --fix: #f0e052; --other: #b7a9a4; --perf: #50c5e2; --econ: #bfd85a; --ui: #d161a8; --qol: #d18a61; --notice: #2a1a14; --notice-line: #a8532e;
    color-scheme: dark;
  }
}
/* cassette: cassette futurism. Beige plastic and gunmetal hardware, a hazard-stripe edge, label-maker headings, LED type indicators,
   keycap buttons and a pair of panel screws. Light is the plastic, dark is the same unit powered down in the dark */
html[data-skin="cassette"] {
  --page: #cfc9b9; --paper: #efeadb; --fg: #1e1d1a; --muted: #575349; --line: #8d877a; --soft: #e0dac7; --softer: #e8e3d1; --link: #0a4d8c; --visited: #6a3a8a; --red: #a0221b; --head: #e6e0cd; --accent: #93330a; --infobox: #e8e3d1; --buff: #1b5f39; --nerf: #a0221b; --new: #0a4d8c; --rework: #70358f; --fix: #734900; --other: #565348; --perf: #105b6e; --econ: #4b5914; --ui: #90296c; --qol: #7f4322; --notice: #f6e3b0; --notice-line: #d08a1a; --signal: #ff6a1f; --frame: #1e1d1a;
  --sans: system-ui, "Segoe UI", Roboto, sans-serif; --serif: Bahnschrift, "DIN Alternate", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --j-sheet: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 0 rgba(0, 0, 0, .22);
  --j-caps: normal; --j-seal: var(--signal);
  --j-paper: radial-gradient(circle, var(--line) 0 3px, transparent 3.6px), radial-gradient(circle, var(--line) 0 3px, transparent 3.6px); --j-paper-size: 11px 11px, 11px 11px; --j-paper-pos: 9px 9px, right 9px top 9px; --j-paper-rep: no-repeat, no-repeat;
  color-scheme: light;
}
html[data-skin="cassette"][data-theme="dark"] {
  --page: #121314; --paper: #1d1f21; --fg: #e8e4d8; --muted: #a5a193; --line: #4a4d50; --soft: #2a2d30; --softer: #232628; --link: #7cc4ff; --visited: #c4a8f0; --red: #ff8a80; --head: #181a1c; --accent: #ff7a30; --infobox: #232628; --buff: #6fd49a; --nerf: #ff8a80; --new: #7db8ff; --rework: #c9a2ee; --fix: #f0be55; --other: #a5a193; --perf: #50c5e2; --econ: #bfd85a; --ui: #e07fbb; --qol: #d99a72; --notice: #2d2410; --notice-line: #8a6d1f; --signal: #ff7a30; --frame: #6a6e72;
  --sans: system-ui, "Segoe UI", Roboto, sans-serif; --serif: Bahnschrift, "DIN Alternate", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --j-sheet: inset 0 1px 0 rgba(255, 255, 255, .07), 0 3px 0 rgba(0, 0, 0, .5);
  --j-caps: normal; --j-seal: var(--signal);
  --j-paper: radial-gradient(circle, var(--line) 0 3px, transparent 3.6px), radial-gradient(circle, var(--line) 0 3px, transparent 3.6px); --j-paper-size: 11px 11px, 11px 11px; --j-paper-pos: 9px 9px, right 9px top 9px; --j-paper-rep: no-repeat, no-repeat;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-skin="cassette"]:not([data-theme="light"]) {
  --page: #121314; --paper: #1d1f21; --fg: #e8e4d8; --muted: #a5a193; --line: #4a4d50; --soft: #2a2d30; --softer: #232628; --link: #7cc4ff; --visited: #c4a8f0; --red: #ff8a80; --head: #181a1c; --accent: #ff7a30; --infobox: #232628; --buff: #6fd49a; --nerf: #ff8a80; --new: #7db8ff; --rework: #c9a2ee; --fix: #f0be55; --other: #a5a193; --perf: #50c5e2; --econ: #bfd85a; --ui: #e07fbb; --qol: #d99a72; --notice: #2d2410; --notice-line: #8a6d1f; --signal: #ff7a30; --frame: #6a6e72;
  --sans: system-ui, "Segoe UI", Roboto, sans-serif; --serif: Bahnschrift, "DIN Alternate", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --j-sheet: inset 0 1px 0 rgba(255, 255, 255, .07), 0 3px 0 rgba(0, 0, 0, .5);
  --j-caps: normal; --j-seal: var(--signal);
  --j-paper: radial-gradient(circle, var(--line) 0 3px, transparent 3.6px), radial-gradient(circle, var(--line) 0 3px, transparent 3.6px); --j-paper-size: 11px 11px, 11px 11px; --j-paper-pos: 9px 9px, right 9px top 9px; --j-paper-rep: no-repeat, no-repeat;
  color-scheme: dark;
  }
}
@font-face { font-family: "Share Tech Mono"; src: url("fonts/ShareTechMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }   /* unmodified, as its licence requires of a file that keeps the Reserved Font Name */
/* phosphor: a monospace, squared-off, prompt-style look. It has no light version: phosphor green on black with amber links. The site forces
   the dark color for it, and the selector is html:root so it outranks the plain dark blocks above */
html[data-skin="phosphor"]:root {
  --page: #070a07; --paper: #0a0f0b; --fg: #a6e8ab; --muted: #7fbf8a; --line: #2a5a38; --soft: #132016; --softer: #0f1811; --link: #ffb347; --visited: #d9a0ff; --red: #ff6b6b; --head: #0a0f0b; --accent: #3cff6a; --infobox: #0f1811; --buff: #4dff88; --nerf: #ff6b6b; --new: #6bb8ff; --rework: #d79bff; --fix: #ffd24d; --other: #8aa58f; --perf: #4de0e0; --econ: #c4e04d; --ui: #ff7ad1; --qol: #ffa05a; --notice: #1e1a0a; --notice-line: #8a6d00;
  --sans: "Share Tech Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; --serif: var(--sans);
  --j-frame: 1px solid var(--accent); --j-head: 1px solid var(--accent); --j-rule: 1px dashed var(--line); --j-cell: var(--line); --j-head-color: var(--accent); --j-h3-mark: "### "; --j-seal: var(--accent);
  --j-paper: repeating-linear-gradient(0deg, rgba(60, 255, 106, .025) 0 1px, transparent 1px 3px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--head-h, 4rem) + .5rem); }
html[data-size="small"] { font-size: 90%; }
html[data-size="large"] { font-size: 115%; }
body { margin: 0; background: var(--page); color: var(--fg); font: .9375rem/1.6 var(--sans); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--visited); }
/* widths of the docked columns: left (main menu and/or Contents) and right (Settings); 0 when nothing is docked there */
:root { --cl: 0px; --cr: 0px; }
html:not([data-menu="popover"]) { --cl: 14.5em; }
html.has-toc[data-contents="sidebar"] { --cl: 14.5em; }
#page { display: grid; grid-template-columns: var(--cl) minmax(0, 70rem) var(--cr); justify-content: center; grid-template-rows: 1fr; min-height: calc(100vh - var(--head-full, 3.6rem)); }
html[data-width="wide"] #page { grid-template-columns: var(--cl) minmax(0, 1fr) var(--cr); }
/* the rail is a sticky box and so its own stacking layer: it needs the pop-up level so the menu and Contents pop-ups inside it sit above the floating Contents button */
#rail { grid-column: 1; grid-row: 1; align-self: start; position: sticky; z-index: 15; top: var(--head-h, 3.6rem); height: calc(100vh - var(--head-h, 3.6rem));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; min-width: 0; }
#content { grid-column: 2; grid-row: 1; }

/* header */
#head { position: sticky; top: 0; z-index: 20; background: var(--head); border-bottom: 1px solid var(--line); }
/* the inner bar is exactly as wide as the nav + article block below, so the logo sits over the nav and the search starts at the article text */
.head-in { display: flex; align-items: center; padding: 8px 16px 8px 12px; max-width: calc(var(--cl) + 70rem + var(--cr)); margin: 0 auto; }
html[data-width="wide"] .head-in { max-width: none; }   /* only Wide mode runs the bar to the window edges; otherwise it lines up with the page block below */
#menu { display: none; border: 0; background: none; font-size: 1.4rem; color: var(--fg); cursor: pointer; padding: 0 6px; }
#logo { display: flex; align-items: center; gap: 10px; color: var(--fg); width: auto; flex: none; }
#logo:hover { text-decoration: none; }
#logo:visited { color: var(--fg); }
.mark { display: grid; place-items: center; width: 2.875rem; height: 2.875rem; border-radius: 50%; background: var(--accent); color: #fff;
  font: 700 .56rem var(--sans); letter-spacing: 0; flex: none; }
.name { font: .98rem/1.15 var(--serif); }
.name small { display: block; font: .7rem var(--sans); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
#search { position: relative; flex: 1 1 560px; max-width: 560px; margin-left: 29px; }
#q { width: 100%; padding: 7px 12px; font: inherit; border: 1px solid var(--line); border-radius: 2px; background: var(--softer); color: var(--fg); }
#q:focus { outline: 2px solid var(--link); background: var(--paper); }
#suggest { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 0; list-style: none; background: var(--paper);
  border: 1px solid var(--line); border-top: 0; box-shadow: 0 4px 8px rgba(0,0,0,.2); max-height: 60vh; overflow: auto; }
#suggest li a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px; color: var(--fg); }
#suggest li a:hover, #suggest li a.cur { background: var(--soft); text-decoration: none; }
#suggest small { color: var(--muted); }

/* sidebar */
#side { padding: 16px 8px 8px 12px; font-size: .85rem; }
#side h3 { margin: 14px 0 4px 8px; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
#side ul { list-style: none; margin: 0; padding: 0; }
#side li a { display: block; padding: 2px 8px; border-left: 3px solid transparent; }
#side ul.sub { margin-left: 12px; }
#side ul.sub[hidden] { display: none; }
#side li a.on { border-color: var(--accent); background: var(--soft); color: var(--fg); font-weight: 600; }
#side li a:visited { color: var(--link); }

/* content */
#content { background: var(--paper); border: 1px solid var(--line); border-bottom: 0; padding: 20px 28px 0; min-width: 0; }
html[data-width="wide"] #content { border-right: 0; }
#content { display: flex; flex-direction: column; }
#endpad { flex: none; height: 0; }   /* empty space after the footer on a wide screen, sized by fitEndPad so the last heading can scroll to the top; the footer stays right after the article */   /* the footer sits at the bottom of the column even on a short page */
#app { flex: 1 0 auto; }
#app > :last-child { margin-bottom: 0; }   /* a flex item no longer lets its last margin merge with the footer's, so the gap above the footer stays 40px */
h1.title { font: 400 1.9rem/1.25 var(--serif); margin: 0 0 2px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.tagline { font-size: .85rem; color: var(--muted); margin: 4px 0 14px; }
.hat { font-size: .88rem; font-style: italic; padding: 2px 0 2px 1.6em; margin: 0 0 10px; }
h2.sec { font: 400 1.5rem/1.3 var(--serif); margin: 1.2em 0 .5em; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
h3.sec { font: 700 1.15rem var(--sans); margin: 1em 0 .3em; }
p { margin: .5em 0 .9em; }
.muted { color: var(--muted); }
ul.bul, ul.plain { margin: .3em 0 .9em 1.4em; padding: 0; }
ul.bul li { margin: .15em 0; }
ul.plain { list-style: none; margin-left: 0; }
ul.cols { columns: 3 15em; column-gap: 24px; list-style: disc; margin: .4em 0 1em 1.4em; padding: 0; }
ul.cols li { break-inside: avoid; margin: 1px 0; }
ul.cols small { color: var(--muted); }

/* infobox + toc */
.infobox { float: right; clear: right; width: 22em; max-width: 100%; margin: 0 0 1em 1.4em; border: 1px solid var(--line); background: var(--infobox); font-size: .85rem; }
.infobox caption, .infobox .ibt { display: table-caption; padding: 6px 8px; text-align: center; font-weight: 700; font-size: 1.05rem; background: var(--soft); border-bottom: 1px solid var(--line); }
.infobox table { width: 100%; border-collapse: collapse; }
.infobox th { text-align: left; vertical-align: top; padding: 4px 8px; width: 38%; color: var(--muted); font-weight: 600; }
.infobox td { padding: 4px 8px; vertical-align: top; }
.infobox .sub { padding: 3px 8px; background: var(--soft); text-align: center; font-weight: 600; }
.bar { display: flex; height: 10px; margin: 6px 8px 8px; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; }
.clear { clear: both; }

/* tables */
.wikitable { border-collapse: collapse; background: var(--softer); border: 1px solid var(--line); margin: .5em 0 1em; font-size: .9rem; width: 100%; }
.wikitable thead th { background: var(--soft); text-align: left; font-weight: 700; border-bottom: 2px solid var(--line); }
.wikitable th, .wikitable td { border: 1px solid var(--line); padding: 4px 8px; vertical-align: top; }
.wikitable td { background: var(--paper); }
.wikitable td:last-child { min-width: 260px; }
.wrap { overflow-x: auto; }
.nowrap { white-space: nowrap; }
.tp { font-weight: 600; white-space: nowrap; }
.tp[data-type=Buff] { color: var(--buff); } .tp[data-type=Nerf], .tp[data-type=Removal] { color: var(--nerf); }
.tp[data-type=New] { color: var(--new); } .tp[data-type=Rework] { color: var(--rework); } .tp[data-type=Fix] { color: var(--fix); }
.tp[data-type=Other] { color: var(--other); } .tp[data-type=Performance] { color: var(--perf); } .tp[data-type=Economy] { color: var(--econ); }
.tp[data-type=UI] { color: var(--ui); } .tp[data-type=QoL] { color: var(--qol); }
td[data-dir="+"] { color: var(--buff); font-weight: 700; } td[data-dir="\2212"] { color: var(--nerf); font-weight: 700; }
.dev { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
sup.ref, .ref { font-size: .75rem; }

/* boxes */
.mbox { border: 1px solid var(--notice-line); background: var(--notice); padding: 8px 12px; margin: 0 0 1em; font-size: .9rem; display: flow-root; }   /* beside a floated infobox, not under it */
.portals { display: grid; grid-template-columns: repeat(auto-fit, minmax(17em, 1fr)); gap: 12px; margin: 1em 0; }
.portal { border: 1px solid var(--line); background: var(--softer); }
.portal > h3 { margin: 0; padding: 4px 10px; font: 700 .95rem var(--sans); background: var(--soft); border-bottom: 1px solid var(--line); }
.portal > div { padding: 8px 10px; font-size: .9rem; }
.portal ul { margin: 0; padding-left: 1.2em; }
.alpha { margin: .5em 0 1em; padding: 6px 10px; border: 1px solid var(--line); background: var(--softer); font-weight: 600; word-spacing: .4em; }
.alpha a, .alpha span { display: inline-block; min-width: 1.2em; text-align: center; }
.alpha span { color: var(--line); }
.cats { clear: both; margin: 1.6em 0 1em; padding: 6px 10px; border: 1px solid var(--line); background: var(--softer); font-size: .85rem; }
.cats b { margin-right: 6px; }
.cats a { margin-right: 4px; }
.cats a + a::before { content: "| "; color: var(--muted); }
.pager { display: flex; gap: 12px; margin: 1em 0; font-size: .9rem; flex-wrap: wrap; }
button.more { font: inherit; padding: 5px 14px; border: 1px solid var(--line); background: var(--softer); color: var(--fg); cursor: pointer; border-radius: 2px; }
button.more:hover { background: var(--soft); }
input.filter { width: 100%; max-width: 26em; padding: 6px 10px; font: inherit; border: 1px solid var(--line); background: var(--softer); color: var(--fg); margin: .3em 0 .8em; }
details { margin: .4em 0; } summary { cursor: pointer; font-weight: 600; }
/* on a phone a list of changes stacks: each change is a block with its patch, date and type on one line and the text below, so no column hides the text */
@media (max-width: 600px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack, table.stack tbody, table.stack tr { display: block; width: 100%; }
  table.stack tr { padding: 8px 10px; border-top: 1px solid var(--line); background: var(--paper); }
  table.stack td { display: inline-block; border: 0; padding: 0 10px 0 0; background: none; }
  table.stack td:last-child { display: block; margin-top: 4px; padding: 0; min-width: 0; }
}
/* date range above a list of changes: a bordered box like .cats whose head (a small label and a button) is laid out like the Settings panel's head; flow-root keeps the box beside a floated infobox instead of under it */
form.rangebar { display: flow-root; margin: .8em 0 1em; padding: 6px 10px 7px; border: 1px solid var(--line); background: var(--softer); font-size: .85rem; }
form.rangebar .rh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; padding: 0 0 4px; border-bottom: 1px solid var(--line); }
form.rangebar .rl { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
form.rangebar .rr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
form.rangebar .rr.sub { margin-top: 6px; gap: 2px 14px; }
form.rangebar label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: .8rem; color: var(--muted); }   /* the label sits above its field, so From and To line up whatever the width */
form.rangebar input[type=date] { font: inherit; font-size: .85rem; padding: 3px 6px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--fg); min-width: 0; }
form.rangebar input[type=date]:focus-visible { outline: 2px solid var(--link); outline-offset: 0; }
form.rangebar .dock { font-size: 1em; padding: 3px 12px; align-self: flex-end; margin-left: auto; }   /* last in the fields row, level with the fields and at the right edge, also when a narrow box wraps it under them */
form.rangebar .rangenote { color: var(--muted); }
/* patch index: one folded group per day, a row per release */
details.day, details.legacy { border: 1px solid var(--line); background: var(--paper); margin: .5em 0; }
details.day > summary, details.legacy > summary { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: relative; padding: 7px 10px 7px 26px; background: var(--softer); font-weight: 400; }
details.legacy > p, details.legacy > ul { margin-left: 26px; margin-right: 10px; }
details.day > summary, details.legacy > summary { cursor: pointer; }
details.day > summary::before, details.legacy > summary::before { content: "\25B8"; position: absolute; left: 10px; top: 10px; color: var(--muted); font-size: .8em; }   /* the same arrows as a folding heading */
details.day[open] > summary::before, details.legacy[open] > summary::before { content: "\25BE"; }
details.day > summary:focus-visible, details.legacy > summary:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
details.day > summary b { font-weight: 600; } details.day > summary span { color: var(--muted); font-size: .9rem; }
ul.rels { list-style: none; margin: 0; padding: 0; }
li.rel { display: grid; grid-template-columns: 5.5em 1fr auto; gap: 4px 12px; padding: 6px 10px; border-top: 1px solid var(--soft); align-items: baseline; }
li.rel .rn { color: var(--muted); font-size: .85rem; text-align: right; }
/* labels on a patch: the developers' Update name is a quiet soft chip; a guess or a warning (Likely hotfix, Bulk import) uses the amber of the site's notice boxes */
.upd, .tag { display: inline-block; margin-left: 8px; padding: 0 7px; border: 1px solid var(--line); border-radius: 2px; font-size: .75rem; line-height: 1.5; white-space: nowrap; vertical-align: 1px; color: var(--fg); }
.upd { background: var(--soft); }
.tag { background: var(--notice); border-color: var(--notice-line); }
@media (max-width: 600px) { li.rel { grid-template-columns: 1fr auto; } li.rel .rb { grid-column: 1 / 3; } li.rel .rt { grid-column: 1; } }

/* footer */
#foot { margin: 40px -28px 0; padding: 14px 28px 24px; border-top: 1px solid var(--line); background: var(--softer); font-size: .8rem; color: var(--muted); }
#foot p { margin: 2px 0; }

/* small screens */
@media (max-width: 860px), (max-height: 500px) and (max-width: 1100px) {
  #page, html[data-width="wide"] #page { grid-template-columns: 1fr; }
  #rail { display: contents; }
  #content { grid-column: 1; }
  #side-toc, .toc-btn { display: none !important; }
  h1.title.has-toc-btn { padding-left: 0 !important; }
  /* sections fold: tap a heading to open its text; subsections fold inside it. Everything starts closed */
  h2.foldable, h3.foldable { position: relative; padding-left: 1.05em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  h2.foldable::before, h3.foldable::before { content: "\25B8"; position: absolute; left: 0; top: .12em; color: var(--muted); font-size: .65em; line-height: inherit; }
  h2.foldable[aria-expanded="true"]::before, h3.foldable[aria-expanded="true"]::before { content: "\25BE"; }
  h2.foldable:focus-visible, h3.foldable:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
  .fold-hide { display: none !important; }
  #menu { display: block; }
  #logo { width: auto; } .name small { display: none; }
  #side { display: none; position: fixed; top: 0; left: 0; bottom: 0; height: auto; align-self: auto; width: 15em; z-index: 15; background: var(--paper);
    border-right: 1px solid var(--line); overflow: auto; }
  body.menu-open #side { display: block; }
  #content { padding: 14px 20px 0; border-left: 0; border-right: 0; }   /* the side margin leaves room for the section link beside each heading */
  #foot { margin: 32px -20px 0; padding: 12px 20px 20px; }
  h1.title { font-size: 1.55rem; }
}

/* settings panel: a docked column on desktop, a drawer like the nav on phones */
#gear { flex: none; margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--fg); font: inherit; font-size: 1.35rem; line-height: 1; padding: 4px 6px; border-radius: 3px; }
#gear:hover, body.settings-open #gear { background: var(--soft); }
#gear:focus-visible { outline: 2px solid var(--link); }
#settings-panel { display: none; position: fixed; top: var(--head-h, 3.6rem); right: var(--gear-right, 8px); z-index: 15; max-height: calc(100vh - var(--head-h, 3.6rem) - 12px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; width: 19rem; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0,0,0,.25);
  padding: 16px 8px 24px 12px; font-size: .85rem; }
body.settings-open #settings-panel { display: block; }
.sp-actions { display: flex; align-items: center; gap: 8px; }
.sp-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 4px 8px; padding: 0 0 4px; border-bottom: 1px solid var(--line); }
.sp-head h2 { margin: 0; font: 700 1em var(--sans); border: 0; padding: 0; }
#settings-note { font-size: .8rem; margin-left: 8px; }
.setting { margin: 0 0 8px 8px; padding: 0; border: 0; min-width: 0; }
.setting legend { padding: 0; margin: 14px 0 4px; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.setting p { margin: 0 0 6px; font-size: .8rem; line-height: 1.4; }
#settings-body > p { margin-left: 8px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg label { position: relative; display: block; }
.seg label + label { border-left: 1px solid var(--line); }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 3px 11px; background: var(--softer); }
.seg input:checked + span { background: var(--soft); color: var(--fg); font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent); }
.seg input:focus-visible + span { outline: 2px solid var(--link); outline-offset: -2px; }


/* phone and tablet: search sits on its own row under the logo */
@media (max-width: 860px), (max-height: 500px) and (max-width: 1100px) {
  html { scroll-padding-top: calc(var(--head-h, 7.5rem) + .5rem); }
  .head-in { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px 10px; }
  #logo { width: auto; flex: 1 1 0; min-width: 0; }
  #gear { order: 2; margin-left: auto; }
  #search { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }
  #side { padding-top: var(--head-h, 7.5rem); }
}

/* below 1100px a docked column would squeeze the page, so the panel becomes a drawer like the nav */
@media (max-width: 1100px) {
  #settings-panel { top: 0; right: 0; bottom: 0; width: 17rem; max-width: 90vw; max-height: none;
    border: 0; border-left: 1px solid var(--line); padding-top: var(--head-h, 7.5rem); }
  .dock[data-dock="panel"] { display: none; }
}
@media (max-width: 860px), (max-height: 500px) and (max-width: 1100px) {
  .head-in, html[data-width="wide"] .head-in { max-width: none; }
}

/* theme picker: a 2 x 2 grid with a small color dot */
.seg.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.seg.grid label + label { border-left: 0; }
.seg.grid span { display: flex; align-items: center; gap: 6px; padding: 5px 8px; white-space: nowrap; }
.dot.crt { position: relative; width: 24px; height: 19px; border-radius: 5px; border: 2px solid #8d8a80; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .4) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--c) 60%, #000), #03100a 85%); box-shadow: inset 0 0 4px rgba(0, 0, 0, .85), 0 0 5px color-mix(in srgb, var(--c) 55%, transparent); }   /* a CRT: grey bezel, scanlines, a glowing screen and a cursor */
.dot.crt::after { content: ""; position: absolute; left: 3px; bottom: 3px; width: 5px; height: 2px; background: var(--c); }
.dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); }

/* narrow phones: the infobox takes the full width above the text */
@media (max-width: 600px) {
  .infobox { float: none; width: 100%; margin: 0 0 1em; }
}

/* landscape phones: one compact header row, so the page keeps most of the screen height */
@media (max-height: 500px) and (min-width: 520px) and (max-width: 1100px) {
  .head-in { flex-wrap: nowrap; gap: 10px; padding: 6px 12px; }
  #logo { flex: 0 1 auto; }
  #gear { order: 0; margin-left: 0; }
  #search { order: 0; flex: 1 1 auto; margin-left: 0; }
  .mark { width: 2.2rem; height: 2.2rem; }
  .name { font-size: .9rem; }
}

/* Game Guide pages */
.portals.two, .portals.three { grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); }
a.missing, a.missing:visited { color: var(--nerf); }
/* the Article, Read and Source tabs under a page's title (the look is .gtabs; Read and Source sit at the right) */
.gtabs.ptabs { margin: 0 0 .5em; }
.gtabs .ptab-r { margin-left: auto; }
.editline { margin-top: 2em; padding-top: .6em; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
#app blockquote { margin: 0 0 1em; padding: .1em 1em; border-left: 3px solid var(--line); background: var(--softer); }
/* notice boxes: > [!NOTE] and friends. One colour per type, checked against every theme's page colour in light and dark */
:root { --al-note: #0550ae; --al-tip: #116329; --al-important: #6639ba; --al-warning: #7d5200; --al-caution: #b81f29; }
:root[data-theme="dark"] { --al-note: #79c0ff; --al-tip: #7ee787; --al-important: #c2a8ff; --al-warning: #e3b341; --al-caution: #ff7b72; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --al-note: #79c0ff; --al-tip: #7ee787; --al-important: #c2a8ff; --al-warning: #e3b341; --al-caution: #ff7b72; }
}
.alert { margin: 0 0 1em; padding: 8px 14px 8px 12px; border-left: 4px solid var(--ac); background: color-mix(in srgb, var(--ac) 11%, var(--paper)); }
.alert-note { --ac: var(--al-note); } .alert-tip { --ac: var(--al-tip); } .alert-important { --ac: var(--al-important); }
.alert-warning { --ac: var(--al-warning); } .alert-caution { --ac: var(--al-caution); }
.alert-label { display: block; margin: 0 0 2px; font: 700 .85rem var(--sans); color: var(--ac); }
.alert > :nth-child(2) { margin-top: .2em; }
.alert > :last-child { margin-bottom: .1em; }
#app pre { overflow-x: auto; padding: 8px 12px; border: 1px solid var(--line); background: var(--softer); font-size: .85rem; }
#app code { font-size: .88em; color: var(--code); background: color-mix(in srgb, var(--code) 12%, transparent); padding: 1px 5px; border-radius: 3px; }
#app pre code { color: inherit; background: none; padding: 0; }
/* code blocks: a bar with the language name and a Copy button, over code coloured by highlight.js */
.codebox { margin: 0 0 1em; border: 1px solid var(--line); background: var(--softer); }
.codebar { display: flex; align-items: center; justify-content: space-between; min-height: 1.9em; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line); background: var(--soft); }
.codelang { font: 700 .68rem var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* a spoiler: >!text!< hides the words behind a solid bar until clicked */
.spoiler { cursor: pointer; border-radius: 3px; background: var(--fg); color: transparent; }
.spoiler * { color: transparent !important; }
.spoiler a { pointer-events: none; }
.spoiler img { visibility: hidden; }
.spoiler:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.spoiler.shown { background: var(--soft); color: inherit; }
.spoiler.shown * { color: revert !important; }
.spoiler.shown a { pointer-events: auto; }
.spoiler.shown img { visibility: visible; }
.codecopy { margin: 2px 0; padding: 1px 9px; border: 1px solid var(--line); border-radius: 3px; background: var(--softer); color: var(--fg); font: inherit; font-size: .75rem; cursor: pointer; }
.codecopy:hover { background: color-mix(in srgb, var(--accent) 22%, var(--soft)); border-color: var(--accent); }
.codecopy:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
#app .codebox pre { margin: 0; border: 0; background: none; }
/* token colours: one set for light and one for dark, checked against every theme's code background */
:root { --tk-k: #b81f29; --tk-s: #0a3069; --tk-n: #0550ae; --tk-c: #59626d; --tk-f: #6f3fc9; --tk-a: #116329; --tk-t: #953800; --tk-v: #a3330f; --tk-m: #6639ba; --tk-h: #0550ae; }
:root[data-theme="dark"] { --tk-k: #ff7b72; --tk-s: #a5d6ff; --tk-n: #79c0ff; --tk-c: #9aa4b0; --tk-f: #d2a8ff; --tk-a: #7ee787; --tk-t: #ffa657; --tk-v: #ffb38a; --tk-m: #c2a8ff; --tk-h: #79c0ff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tk-k: #ff7b72; --tk-s: #a5d6ff; --tk-n: #79c0ff; --tk-c: #9aa4b0; --tk-f: #d2a8ff; --tk-a: #7ee787; --tk-t: #ffa657; --tk-v: #ffb38a; --tk-m: #c2a8ff; --tk-h: #79c0ff; }
}
.tk-k { color: var(--tk-k); } .tk-s { color: var(--tk-s); } .tk-n { color: var(--tk-n); } .tk-c { color: var(--tk-c); font-style: italic; }
.tk-f { color: var(--tk-f); } .tk-a { color: var(--tk-a); } .tk-t { color: var(--tk-t); } .tk-v { color: var(--tk-v); } .tk-m { color: var(--tk-m); } .tk-h { color: var(--tk-h); font-weight: 700; }
#app img { max-width: 100%; height: auto; }

/* Game Guide page lists: one card per page, reflowing with the width */
.allpages { margin: -.4em 0 1.2em; font-size: .9rem; }

/* category page: Wikipedia-style lettered columns */
.catlist { columns: 3 16em; column-gap: 28px; margin: .6em 0 1.2em; }
.catlist section { break-inside: avoid; margin: 0 0 .8em; }
.catlist h3 { margin: 0 0 .2em; font: 700 1.05rem var(--sans); border: 0; }
.catlist ul { margin: 0; padding-left: 1.3em; list-style: disc; }
.catlist li { margin: 1px 0; }

/* buttons that are links */
a.btn, a.btn:visited { display: inline-block; padding: 6px 14px; border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); color: var(--paper); font-weight: 700; text-decoration: none; }
a.btn:hover { filter: brightness(1.1); text-decoration: none; }

/* link-type markers: PN = Patch Notes page, arrow = another website */
sup.lt { font-size: .62em; line-height: 0; margin-left: 1px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }

/* the automatic References section at the bottom of a guide page */
ol.refs { margin: .3em 0 1em 1.8em; padding: 0; }
ol.refs li { margin: 2px 0; }

/* link previews */
#preview { position: fixed; z-index: 30; max-width: 22rem; padding: 8px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--fg); box-shadow: 0 4px 14px rgba(0, 0, 0, .28); font-size: .85rem; line-height: 1.4; pointer-events: none; }
#preview[hidden] { display: none; }
#preview .pk { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
#preview .pt { margin: 1px 0 3px; font-size: .95rem; font-weight: 700; }
#preview .pm { margin-top: 5px; font-size: .78rem; color: var(--muted); }
#preview ul.pl { list-style: none; margin: 4px 0 0; padding: 0; min-width: 15rem; }
#preview ul.pl li { display: flex; justify-content: space-between; gap: 14px; padding: 1px 0; border-bottom: 1px dotted var(--line); }
#preview ul.pl li:last-child { border-bottom: 0; }
#preview ul.pl b { font-variant-numeric: tabular-nums; color: var(--muted); }

/* figures: ![alt](path "Caption"){right 240} */
figure.fig { margin: .3em 0 .9em; padding: 6px; max-width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: var(--softer); font-size: .85rem; line-height: 1.4; }
figure.fig img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
figure.fig figcaption { padding: 6px 2px 0; color: var(--muted); }
figure.fig-right { float: right; clear: right; margin-left: 1.1em; }
figure.fig-left { float: left; clear: left; margin-right: 1.1em; }
figure.fig-center { margin-left: auto; margin-right: auto; clear: both; }
figure.fig-center figcaption { text-align: center; }
/* a heading beside a floated infobox or picture keeps its underline beside it, not running underneath */
h2.sec, h3.sec { display: flow-root; }
#gp h2.cl, #gp h3.cl { clear: both; }
/* tables and code boxes sit beside the Contents box, and only step below a right-hand picture */
#gp figure.fig-right ~ .wrap, #gp figure.fig-right ~ .codebox { clear: right; }
@media (max-width: 600px) {
  figure.fig-left, figure.fig-right { float: none; width: auto !important; margin-left: 0; margin-right: 0; }
}

/* inline code takes an accent that no theme uses for links: amber on the blue and teal themes, green on Parchment, blue on Oblivion */
html[data-skin="crier"] { --code: var(--buff); }
html[data-skin="oblivion"] { --code: var(--new); }

/* Contents: a pop-up under the list-button beside the page title, or docked in the left column below the main menu */
.toc-anchor { position: sticky; top: calc(var(--head-h, 3.6rem) + 10px); height: 0; z-index: 6; }
.toc-btn { position: absolute; left: 0; top: 6px; width: 24px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--fg); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.toc-btn.floating { border-color: var(--line); background: var(--softer); position: fixed; top: calc(var(--head-h, 3.6rem) + 10px); left: 8px; z-index: 6; }   /* once the page has scrolled past the title, the button floats at the top left of the window, under the header */
.toc-btn:hover, body.toc-open .toc-btn { background: var(--soft); }
html:not([data-contents="sidebar"]) h1.title.has-toc-btn { padding-left: 32px; }
.toc-btn:focus-visible { outline: 2px solid var(--link); }
html[data-contents="sidebar"] .toc-anchor { display: none; }
#side-toc { display: none; font-size: .85rem; padding: 16px 8px 24px 12px; }
html[data-contents="sidebar"] #side-toc:not([hidden]) { display: block; }
html:not([data-menu="popover"])[data-contents="sidebar"] #side-toc:not([hidden]) { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; }
html:not([data-contents="sidebar"]) #side-toc { position: fixed; z-index: 15; top: var(--head-h, 3.6rem); left: 8px; width: 17em; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
html:not([data-contents="sidebar"]) body.toc-open #side-toc:not([hidden]) { display: block; }
#side-toc li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* an entry is one line, docked or in the pop-up; hovering shows all of it */
#side-toc ol { margin: 0; padding: 0; list-style: none; }
#side-toc ol ol { display: none; margin-left: 28px; }
#side-toc li.open > ol { display: block; }
#side-toc li.has-sub { position: relative; }
#side-toc-list > ol > li > a { padding-left: 28px; }   /* room for the expander arrow, so every section lines up */
#side-toc .exp { position: absolute; left: 4px; top: 1px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--muted); cursor: pointer; line-height: 1; }
#side-toc .exp::before { content: "\25B8"; }
#side-toc .exp[aria-expanded="true"]::before { content: "\25BE"; }
#side-toc .exp:hover { background: var(--soft); color: var(--fg); }
#side-toc .exp:focus-visible { outline: 2px solid var(--link); }
#side-toc li a { display: block; padding: 2px 8px; border-left: 3px solid transparent; }
#side-toc li a.on { border-color: var(--accent); background: var(--soft); color: var(--fg); font-weight: 600; }

/* keys and buttons: {{W}}, {{Shift+Right click}}, {{Mouse 4}}, {{pad:RT}} */
kbd.k { display: inline-block; min-width: 1.5em; padding: 0 .5em; margin: 0 1px; text-align: center; white-space: nowrap; line-height: 1.5;
  font: 600 .82em/1.5 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; color: var(--fg); background: var(--softer);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; vertical-align: baseline; }
kbd.k-mouse { border-radius: 10px; }
kbd.k-pad { border-radius: 999px; border-color: var(--accent); }
.kplus { margin: 0 2px; color: var(--muted); }
.keys { white-space: nowrap; }

/* guide tables size to their content; the 260px last-column minimum is for the patch-notes change text */
#gp .wikitable td:last-child { min-width: 0; }

/* keycaps on the dark themes: a raised grey cap with a bright edge (keys and mouse buttons) and an accent-tinted cap (gamepad). Border contrast is 5:1 or better. */
:root[data-theme="dark"] kbd.k { background: #3d4550; color: #f4f6f8; border-color: #8b95a3; border-bottom-color: #b4bdc8; }
:root[data-theme="dark"] kbd.k-pad { background: color-mix(in srgb, var(--paper) 72%, var(--accent)); color: #fff; border-color: var(--accent); border-bottom-color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) kbd.k { background: #3d4550; color: #f4f6f8; border-color: #8b95a3; border-bottom-color: #b4bdc8; }
  :root:not([data-theme="light"]) kbd.k-pad { background: color-mix(in srgb, var(--paper) 72%, var(--accent)); color: #fff; border-color: var(--accent); border-bottom-color: var(--accent); }
}

/* main menu: docked in the left column, or tucked behind the hamburger as a pop-up (phones always use the pop-up) */
.side-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 4px 8px; padding: 0 0 4px; border-bottom: 1px solid var(--line); font-weight: 700; }
.dock { margin: 0; padding: 1px 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--soft); color: var(--fg); font: inherit; font-size: .8em; font-weight: 400; white-space: nowrap; cursor: pointer; }
.dock:hover { background: color-mix(in srgb, var(--accent) 22%, var(--soft)); border-color: var(--accent); }
.dock:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
#menu:hover, body.menu-open #menu { background: var(--soft); }
#menu { border-radius: 3px; line-height: 1; padding: 4px 8px; margin-right: 6px; }
@media (min-width: 861px) and (min-height: 501px), (min-width: 1101px) {
  #foot { position: sticky; top: calc(100vh - var(--foot-h, 8rem)); z-index: 5; }   /* once the footer is fully in view it stays at the bottom of the window while the page scrolls on past the end */
  html[data-menu="popover"] #menu { display: block; }
  html:not([data-menu="popover"]) #logo { width: calc(14.5em - 12px); }
  html[data-menu="popover"] #side { display: none; position: fixed; top: var(--head-h, 3.6rem); left: var(--menu-left, 8px); max-height: calc(100vh - var(--head-h, 3.6rem) - 12px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; width: 16em; z-index: 15; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
  html[data-menu="popover"] body.menu-open #side { display: block; }
}
/* settings: a pop-up under the gear, or docked as a sidebar on the right (wide windows only) */
@media (min-width: 1101px) {
  html[data-panel="sidebar"] { --cr: 19rem; }
  html[data-panel="sidebar"] #settings-panel { display: block; grid-column: 3; grid-row: 1; align-self: start; position: sticky; top: var(--head-h, 3.6rem); right: auto; z-index: auto;
    height: calc(100vh - var(--head-h, 3.6rem)); max-height: none; box-shadow: none; background: none; border: 0; }
  html[data-panel="sidebar"] #gear { display: none; }
}
@media (max-width: 860px), (max-height: 500px) and (max-width: 1100px) { .side-head { display: none; } }

/* the page-not-found page: search box and three link boxes */
.nfsearch { display: flex; gap: 8px; margin: .6em 0 1em; max-width: 30rem; }
.nfsearch input { flex: 1; min-width: 0; font: inherit; padding: 5px 8px; border: 1px solid var(--line); background: var(--paper); color: var(--fg); border-radius: 2px; }
.nfboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 10px; margin: .3em 0 1em; }
.nfboxes a { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); background: var(--softer); text-decoration: none; }
.nfboxes a:hover { background: var(--soft); }
.nfboxes span { font-size: .85rem; color: var(--muted); }

/* a picture opened full size: fitted to the window, then zoomed in on a click */
#app img[data-lb] { cursor: zoom-in; }
#app img[data-lb]:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
#lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; padding: 16px; overflow: auto; background: rgba(10, 12, 15, .86); }
#lightbox[hidden] { display: none; }
#lightbox figure { margin: auto; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }   /* margin: auto centers a small picture and still lets a big one scroll from its top left */
#lightbox img { display: block; max-width: min(96vw, 100%); max-height: calc(100vh - 110px); width: auto; height: auto; background: #fff; box-shadow: 0 6px 30px rgba(0, 0, 0, .5); cursor: zoom-in; }
#lightbox img:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#lightbox figcaption { max-width: 60rem; color: #eaecf0; font-size: .9rem; text-align: center; }
#lightbox.lb-zoomed figure { width: var(--lb-w); max-width: none; flex: none; }
#lightbox.lb-zoomed img { max-width: none; max-height: none; width: 100%; cursor: zoom-out; }
#lightbox.lb-zoomed figcaption { display: none; }
#lightbox .lb-close { position: fixed; top: 10px; right: 14px; z-index: 1; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font: 28px/34px var(--sans, sans-serif); cursor: pointer; }
#lightbox .lb-count { position: fixed; top: 18px; left: 18px; z-index: 1; color: #eaecf0; font-size: .9rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
#lightbox .lb-nav { position: fixed; top: 50%; z-index: 1; width: 44px; height: 64px; margin-top: -32px; padding: 0 0 4px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .5); color: #fff; font: 40px/58px var(--sans, sans-serif); cursor: pointer; }
#lightbox .lb-nav[hidden] { display: none; }
#lightbox .lb-prev { left: 12px; border-radius: 0 6px 6px 0; }
#lightbox .lb-next { right: 12px; border-radius: 6px 0 0 6px; }
#lightbox .lb-nav:hover { background: rgba(255, 255, 255, .22); }
#lightbox .lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#lightbox .lb-close:hover { background: rgba(255, 255, 255, .2); }
#lightbox .lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.lb-open { overflow: hidden; }

/* an infobox in a guide page (a fact panel beside the page's first paragraphs); the patch notes' topic infobox is a different thing, styled above */
.factbox { float: right; clear: right; width: 15.5rem; max-width: 100%; box-sizing: border-box; margin: 0 0 .9em 1.1em; border: 1px solid var(--line); background: var(--paper); font-size: .85rem; line-height: 1.4; }
.ib-title { padding: 5px 8px; background: var(--soft); border-bottom: 1px solid var(--line); text-align: center; font: 700 .95rem var(--sans); }
.ib-img { display: block; max-width: calc(100% - 16px); height: auto; margin: 8px auto; }
.ib-row { display: flex; border-top: 1px solid var(--line); }
.ib-title + .ib-row, .ib-img + .ib-row { border-top: 0; }
.ib-k { flex: 0 0 38%; padding: 4px 8px; background: var(--softer); color: var(--muted); }
.ib-v { flex: 1; min-width: 0; padding: 4px 8px; overflow-wrap: anywhere; }
.ib-sec { padding: 3px 8px; background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; font-weight: 700; font-size: .8rem; }
#gp .alert, #gp .codebox, #gp blockquote { display: flow-root; }   /* a box with a background stays beside a floated panel instead of running under it */
@media (max-width: 860px), (max-height: 500px) and (max-width: 1100px) { .factbox { float: none; width: auto; margin: .6em 0 1em; } }

/* a picture whose file is missing: the placeholder, and the writer's hint on localhost */
img[data-missing] { background: var(--softer); cursor: default; }
.img-dev { position: relative; display: block; outline: 2px solid #c62828; outline-offset: -2px; }
.img-dev img { display: block; }
img.img-missing-inline { height: 1.3em; width: 1.7em; vertical-align: -.3em; }
.img-dev.inline { display: inline-block; vertical-align: baseline; outline-offset: 0; }
.img-dev small { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 1px 6px; border-radius: 3px; background: #fdecea; color: #8c1d18; font: 600 .72rem/1.4 var(--sans); overflow-wrap: anywhere; }

/* the link in the left margin of a section heading that copies that section's address */
h2.sec, h3.sec { position: relative; }
.hlink { position: absolute; left: -1.625rem; top: 0; width: 1.5rem; text-align: center; font-weight: normal; line-height: inherit; text-decoration: none; color: var(--muted); opacity: 0; transition: color .3s ease, opacity .2s ease; }
.hlink:hover { text-decoration: none; }
.hlink svg { width: 1rem; height: 1rem; vertical-align: -.2em; }
.hlink.on { color: var(--accent); }   /* the link is in the clipboard: the theme's accent color */
.hlink.bad { color: var(--red); }
h3.sec > .hlink { top: 0; }
.hlink.on, .hlink.bad { opacity: 1; }
h2:hover > .hlink, h3:hover > .hlink, .hlink:focus-visible { opacity: .75; }
.hlink:hover { opacity: 1 !important; }
@media (hover: none) { .hlink { opacity: .55; } }
@media (max-width: 860px), (max-height: 500px) and (max-width: 1100px) {   /* narrow screen: always shown, in the page's small left margin beside the heading and its fold arrow */
  .hlink { left: -1.25rem; width: 1.2rem; opacity: .6; }
  .hlink svg { width: .8rem; height: .8rem; }
  h3.sec > .hlink { top: 0; }
}

/* Settings > Top bar > Scrolls away: the top bar is an ordinary part of the page instead of staying at the top of the window. --head-h (set by script) then follows how much of it is still on screen, so sticky panels and pop-ups move up with it */
html[data-navbar="scroll"] #head { position: relative; }   /* not static: it keeps its z-index, so the search drop-down and menus stay above positioned headings while the bar scrolls away */
html[data-navbar="scroll"] { scroll-padding-top: .5rem; }

/* the By type / By topic tabs above a list of changes */
.gtabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: .6em 0 1em; }
.gtabs a, .gtabs span, .gtabs button { padding: 9px 18px; margin-bottom: -1px; border-bottom: 3px solid transparent; text-decoration: none; }
.gtabs button { background: none; border-width: 0 0 3px; font: inherit; color: var(--link); cursor: pointer; }
.gtabs a:hover, .gtabs button:hover { background: var(--soft); text-decoration: none; }
.gtabs span.on, .gtabs button[aria-selected="true"] { color: var(--fg); font-weight: 700; border-bottom-color: var(--accent); }
.gtabs button:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.gtabs small { margin-left: .5em; font-size: .78rem; font-weight: normal; color: var(--muted); }

/* Recent additions on the Patch Notes front page: a portal that spans the whole row */
.portal.wide { grid-column: 1 / -1; }
.portal .wikitable { margin: 0 0 .5em; }
.portal .gtabs { margin: 0 0 .7em; }
.gtabs[role="tablist"] { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }   /* the kinds of change scroll sideways instead of wrapping */
.gtabs[role="tablist"] button { flex: none; white-space: nowrap; margin-bottom: 0; }   /* no overlap with the row's bottom line: an overlap would make the row scroll vertically */
.portal .gtabs button, .portal .gtabs span, .portal .gtabs a { padding: 7px 13px; }
.portal p.muted { margin: 0; font-size: .8rem; }
.portal .wikitable td:last-child { min-width: 0; }
@media (max-width: 600px) { .portal .wikitable .dt { display: none; } }   /* on a phone the date gives way so the topics fit */

/* skin hooks: decoration an individual skin can opt into through --j-* values (unset means the plain flat look) */
::selection { background: var(--accent); color: var(--paper); text-shadow: none; }   /* inverse video in the theme's accent: the accent already passes 4.5:1 against the paper, so selected text always reads */
#head { border-bottom: var(--j-head, 1px solid var(--line)); }
#content { border: var(--j-frame, 1px solid var(--line)); border-bottom: 0; background-image: var(--j-paper, none); background-attachment: var(--j-paper-att, scroll); background-size: var(--j-paper-size, auto); background-position: var(--j-paper-pos, 0 0); background-repeat: var(--j-paper-rep, repeat); box-shadow: var(--j-sheet, none); }
h1.title, h2.sec { border-bottom: var(--j-rule, 1px solid var(--line)); font-variant: var(--j-caps, normal); letter-spacing: var(--j-track, 0); }
h2.sec { border-bottom-width: 1px; border-bottom-style: solid; }
h1.title, h2.sec { font-style: var(--j-head-style, normal); color: var(--j-head-color, inherit); text-shadow: var(--j-glow, none); box-shadow: var(--j-rulefx, none); }
.wikitable, .wikitable th, .wikitable td, .portal, .infobox, .cats, .alpha, form.rangebar { border-color: var(--j-cell, var(--line)); }
.mark { background: var(--j-seal, var(--accent)); box-shadow: var(--j-seal-glow, none); }
#q, input.filter, form.rangebar input[type=date] { box-shadow: var(--j-inset, none); }
body { background: var(--j-desk, var(--page)); background-attachment: fixed; }
#rail { background: var(--j-rail, transparent); }
/* a diamond set in the rule under a title or section heading */
h1.title, h2.sec { position: relative; }
h1.title::after, h2.sec::after { content: var(--j-orn, none); position: absolute; left: 50%; bottom: calc(var(--j-orn-size, 8px) / -2 - 1px); width: var(--j-orn-size, 8px); height: var(--j-orn-size, 8px); transform: translateX(-50%) rotate(var(--j-orn-rot, 45deg)); background: var(--j-orn-bg, var(--line)); clip-path: var(--j-orn-clip, none); box-shadow: 0 0 0 2px var(--paper); }
@media (min-width: 861px) and (min-height: 501px), (min-width: 1101px) { html[data-panel="sidebar"] #settings-panel { background: var(--j-rail, none); } }   /* a docked Settings column sits on the skin's rail color, not straight on the desk */
@media (min-width: 861px) and (min-height: 501px), (min-width: 1101px) { html[data-width="wide"] #content { border-right: var(--j-frame, 0); } }   /* a skin with a framed sheet closes it at the right too, where the sheet meets the docked Settings column or the screen edge */

h1.title::first-letter { color: var(--j-h1-cap, inherit); }
h2.sec::first-letter { color: var(--j-h2-cap, inherit); }

/* phosphor skin structure */
html[data-skin="phosphor"] *:not(.dot) { border-radius: 0; }
html[data-skin="phosphor"] body { font-size: 1rem; line-height: 1.6; }
html[data-skin="phosphor"] h1.title { font-weight: 700; font-size: 1.6rem; }
html[data-skin="phosphor"] h1.title::before { content: "# "; color: var(--muted); }
html[data-skin="phosphor"] h2.sec { font-size: 1.25rem; font-weight: 700; }
html[data-skin="phosphor"] h3.sec { font-size: 1rem; }
html[data-skin="phosphor"] .tagline::after { content: "\2588"; color: var(--accent); margin-left: .3em; }
@media (prefers-reduced-motion: no-preference) { html[data-skin="phosphor"] .tagline::after { animation: term-blink 1.1s steps(1) infinite; } }
@keyframes term-blink { 50% { opacity: 0; } }
html[data-skin="phosphor"] a:hover { background: var(--link); color: var(--paper); text-decoration: none; }
html[data-skin="phosphor"] #search::before { content: ">"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 700; pointer-events: none; }
html[data-skin="phosphor"] #q { padding-left: 26px; }
html[data-skin="phosphor"] .mark { color: var(--paper); font-size: .5rem; }
html[data-skin="phosphor"] #side li a.on::before { content: "> "; }
html[data-skin="phosphor"] .wikitable thead th { border-bottom-color: var(--accent); color: var(--accent); text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; }
html[data-skin="phosphor"] #app ul:not(.plain):not(.cols):not(.rels) { list-style: "- "; }
html[data-skin="phosphor"] .seg input:disabled + span { opacity: .5; }   /* the Color choice does not apply to Phosphor, which is always dark */

/* phosphor colors (Settings > Phosphor color): green is the base above; these change only the palette */
html[data-skin="phosphor"][data-phosphor="amber"]:root { --page: #0c0802; --paper: #110b04; --fg: #ffb84d; --muted: #c08a3a; --line: #5a3d14; --soft: #1d1407; --softer: #160f05; --link: #fff0c8; --visited: #e0c08a; --head: #110b04; --accent: #ffb000; --infobox: #160f05; --notice: #231a05; --j-paper: repeating-linear-gradient(0deg, rgba(255, 176, 0, .025) 0 1px, transparent 1px 3px); }
html[data-skin="phosphor"][data-phosphor="blue"]:root { --page: #04080f; --paper: #060d17; --fg: #9fd0ff; --muted: #6fa0d0; --line: #1f3f66; --soft: #0c1a2c; --softer: #09131f; --link: #ffd27a; --visited: #d9b0ff; --head: #060d17; --accent: #4da6ff; --infobox: #09131f; --notice: #1a1605; --j-paper: repeating-linear-gradient(0deg, rgba(77, 166, 255, .03) 0 1px, transparent 1px 3px); }
html[data-skin="phosphor"][data-phosphor="white"]:root { --page: #0a0a0a; --paper: #101010; --fg: #e6e6e6; --muted: #9a9a9a; --line: #444444; --soft: #1c1c1c; --softer: #151515; --link: #ffffff; --visited: #c8c8c8; --head: #101010; --accent: #ffffff; --infobox: #151515; --notice: #1d1a0a; --j-paper: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px); }
html[data-skin="phosphor"][data-phosphor="amber"] #app a, html[data-skin="phosphor"][data-phosphor="white"] #app a { text-decoration: underline; }   /* these two have no contrasting link hue, so links are underlined */
.setting[hidden] { display: none; }
.setting:has(input[name="phosphor"]) .seg span { font-size: .74rem; padding-left: 7px; padding-right: 7px; white-space: nowrap; letter-spacing: 0; }   /* the longest label, Capital Wastes, has to fit its half-width button */
/* heading marks (a pilcrow, ### and ##) sit in ::before, which a folding heading uses for its arrow on a phone, so they only apply where headings do not fold */
@media (min-width: 861px) and (min-height: 501px), (min-width: 1101px) {
  h3.sec::before { content: var(--j-h3-mark, none); color: var(--j-head-color, inherit); }
  html[data-skin="phosphor"] h2.sec::before { content: "## "; color: var(--muted); }
}

/* cassette structure */
html[data-skin="cassette"] #head { border-bottom: 6px solid; border-image: repeating-linear-gradient(-45deg, #1e1d1a 0 7px, var(--signal) 7px 14px) 0 0 6 0 / 0 0 6px 0 stretch; }
html[data-skin="cassette"] #content { border: 2px solid var(--frame); border-bottom: 0; border-radius: 12px 12px 0 0; }
html[data-skin="cassette"] #foot { border-top: 2px solid var(--frame); }
html[data-skin="cassette"] h1.title { font-weight: 700; font-size: 1.7rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--frame); border-left: 10px solid var(--signal); padding-left: 12px; }
html[data-skin="cassette"] h2.sec { font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid var(--frame); }
html[data-skin="cassette"] h3.sec { font-family: var(--serif); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; }
html[data-skin="cassette"] .tagline { font: 600 .72rem ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
html[data-skin="cassette"] .name { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
html[data-skin="cassette"] .mark { border-radius: 8px; color: #1e1d1a; font-weight: 700; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
html[data-skin="cassette"] .tp::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .4em; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px currentColor; vertical-align: .05em; }
html[data-skin="cassette"] .wikitable thead th { background: var(--frame); color: var(--paper); border-bottom: 0; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
html[data-skin="cassette"] .infobox, html[data-skin="cassette"] .portal, html[data-skin="cassette"] .cats, html[data-skin="cassette"] .alpha, html[data-skin="cassette"] form.rangebar, html[data-skin="cassette"] .mbox { border-radius: 8px; border-width: 2px; }
html[data-skin="cassette"] .infobox caption, html[data-skin="cassette"] .infobox .ibt, html[data-skin="cassette"] .portal > h3 { text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
html[data-skin="cassette"] button, html[data-skin="cassette"] .seg, html[data-skin="cassette"] .dock { border-radius: 6px; }
html[data-skin="cassette"] button.more, html[data-skin="cassette"] .dock { border: 2px solid var(--frame); box-shadow: 0 3px 0 var(--frame); }
html[data-skin="cassette"] button.more:active, html[data-skin="cassette"] .dock:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--frame); }
html[data-skin="cassette"] #q { border-radius: 8px; border-width: 2px; border-color: var(--frame); }
@media (min-width: 861px) and (min-height: 501px), (min-width: 1101px) {
  html[data-skin="cassette"] h2.sec::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; background: var(--signal); vertical-align: .05em; }
}
.dot.cassette { position: relative; width: 26px; height: 19px; border-radius: 4px; border: 2px solid #1e1d1a; background: radial-gradient(circle at 28% 66%, #1e1d1a 0 2.4px, transparent 3px), radial-gradient(circle at 72% 66%, #1e1d1a 0 2.4px, transparent 3px), linear-gradient(var(--c), var(--c)) 50% 2px / calc(100% - 6px) 4px no-repeat, #efeadb; }   /* a cassette: body, label strip and two reels */
@media (max-width: 860px), (max-height: 500px) and (max-width: 1100px) { html[data-skin="cassette"] h1.title.has-toc-btn { padding-left: 12px !important; } }   /* the base rule drops the title's left padding on a phone; this theme's orange bar needs it */
html[data-skin="cassette"] .portal > h3, html[data-skin="cassette"] .infobox caption, html[data-skin="cassette"] .infobox .ibt { border-radius: 6px 6px 0 0; }   /* the header bar follows the box's rounded corners (the box radius less its 2px border) */
html[data-skin="cassette"] .portal { overflow: hidden; }
@media (min-width: 861px) and (min-height: 501px), (min-width: 1101px) {   /* in Wide mode the sheet meets the docked Settings column or the screen edge, so close its frame there too */
  html[data-skin="cassette"][data-width="wide"] #content { border-right: 2px solid var(--frame); }
}

/* The main menu docked in the left column scrolls away with the page. A docked Contents list stays in view under the header, because it follows the reader through the page. */
@media (min-width: 861px) and (min-height: 501px), (min-width: 1101px) {
  html:not([data-menu="popover"]) #rail { position: static; align-self: stretch; height: auto; overflow: visible; }
  html:not([data-menu="popover"])[data-contents="sidebar"] #side-toc:not([hidden]) { position: sticky; top: var(--head-h, 3.6rem); max-height: calc(100vh - var(--head-h, 3.6rem)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
/* Default theme colors (Settings > Default color): gold is the base above; each of these swaps the whole palette, light and dark */
html:not([data-skin])[data-palette="parchment"] { --page: #e9dfc8; --paper: #f8f1de; --fg: #2a2116; --muted: #65553d; --line: #b9a77c; --soft: #eadfc3; --softer: #f3ead2; --link: #8a2f0c; --visited: #6b3a5e; --red: #a32a1a; --head: #f3ead2; --accent: #88591a; --infobox: #f3ead2; --buff: #2f6b3a; --nerf: #a32a1a; --new: #2a4f8f; --rework: #6b3a8a; --fix: #885900; --other: #6e614d; --perf: #156c82; --econ: #596919; --ui: #ab327e; --qol: #95522b; --notice: #f6e9bf; --notice-line: #c49a2a; --code: var(--buff); }
html:not([data-skin])[data-palette="parchment"][data-theme="dark"] { --page: #16120d; --paper: #211a12; --fg: #ece0c6; --muted: #b5a283; --line: #4a3d2a; --soft: #2c2418; --softer: #261e15; --link: #e8a65c; --visited: #c79bb0; --red: #f08a74; --head: #1c160f; --accent: #d9a04a; --infobox: #261e15; --buff: #7fcf8e; --nerf: #f08a74; --new: #8fb4f0; --rework: #cba0e8; --fix: #e8b64a; --other: #b5a283; --perf: #50c5e2; --econ: #bfd85a; --ui: #d266ab; --qol: #d19961; --notice: #2e2512; --notice-line: #8a6d1f; }
@media (prefers-color-scheme: dark) { html:not([data-skin])[data-palette="parchment"]:not([data-theme="light"]) { --page: #16120d; --paper: #211a12; --fg: #ece0c6; --muted: #b5a283; --line: #4a3d2a; --soft: #2c2418; --softer: #261e15; --link: #e8a65c; --visited: #c79bb0; --red: #f08a74; --head: #1c160f; --accent: #d9a04a; --infobox: #261e15; --buff: #7fcf8e; --nerf: #f08a74; --new: #8fb4f0; --rework: #cba0e8; --fix: #e8b64a; --other: #b5a283; --perf: #50c5e2; --econ: #bfd85a; --ui: #d266ab; --qol: #d19961; --notice: #2e2512; --notice-line: #8a6d1f; } }
html:not([data-skin])[data-palette="slate"] { --page: #e9edf1; --paper: #f7f9fb; --fg: #1c2733; --muted: #4d5d6e; --line: #9fb0bf; --soft: #dde4eb; --softer: #eef2f6; --link: #1f5f9a; --visited: #5a3f8f; --red: #b3261e; --head: #f1f4f7; --accent: #2f5d8a; --infobox: #eef2f6; --buff: #11715b; --nerf: #c32020; --new: #305fbf; --rework: #7b3fa0; --fix: #925600; --other: #5f6469; --perf: #166d82; --econ: #596a18; --ui: #ab327f; --qol: #95522b; --notice: #f4ecc8; --notice-line: #c9a53a; }
html:not([data-skin])[data-palette="slate"][data-theme="dark"] { --page: #0e141b; --paper: #151d27; --fg: #e3eaf2; --muted: #9fb0c4; --line: #34465a; --soft: #1f2a37; --softer: #1a2430; --link: #8fc0f0; --visited: #c3a5f0; --red: #ff8a80; --head: #121a23; --accent: #7fb2e5; --infobox: #1a2430; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f; }
@media (prefers-color-scheme: dark) { html:not([data-skin])[data-palette="slate"]:not([data-theme="light"]) { --page: #0e141b; --paper: #151d27; --fg: #e3eaf2; --muted: #9fb0c4; --line: #34465a; --soft: #1f2a37; --softer: #1a2430; --link: #8fc0f0; --visited: #c3a5f0; --red: #ff8a80; --head: #121a23; --accent: #7fb2e5; --infobox: #1a2430; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f; } }
html:not([data-skin])[data-palette="moss"] { --page: #e8ede4; --paper: #f6f8f2; --fg: #1d2a1f; --muted: #4a5c4c; --line: #9db094; --soft: #dbe3d4; --softer: #eaf0e5; --link: #2a6a4a; --visited: #5a3f8f; --red: #b3261e; --head: #eef2ea; --accent: #3a6b3f; --infobox: #eaf0e5; --buff: #116f5a; --nerf: #bf1f1f; --new: #2f5ebc; --rework: #7b3fa0; --fix: #8e5400; --other: #5e6367; --perf: #156b80; --econ: #586918; --ui: #aa327e; --qol: #93512a; --notice: #f4ecc8; --notice-line: #c9a53a; }
html:not([data-skin])[data-palette="moss"][data-theme="dark"] { --page: #0f1510; --paper: #161e17; --fg: #e2ebe0; --muted: #9db39f; --line: #37503a; --soft: #212c22; --softer: #1b2519; --link: #8fe0a0; --visited: #c5a8e8; --red: #ff8a80; --head: #131a14; --accent: #7fcf8a; --infobox: #1b2519; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f; }
@media (prefers-color-scheme: dark) { html:not([data-skin])[data-palette="moss"]:not([data-theme="light"]) { --page: #0f1510; --paper: #161e17; --fg: #e2ebe0; --muted: #9db39f; --line: #37503a; --soft: #212c22; --softer: #1b2519; --link: #8fe0a0; --visited: #c5a8e8; --red: #ff8a80; --head: #131a14; --accent: #7fcf8a; --infobox: #1b2519; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f; } }
html:not([data-skin])[data-palette="dusk"] { --page: #ece9f0; --paper: #f8f6fb; --fg: #25202e; --muted: #5a5068; --line: #aaa0bd; --soft: #e0dbe8; --softer: #efecf4; --link: #5a3f9a; --visited: #8a3a7a; --red: #b3261e; --head: #f2eff6; --accent: #6a3f8f; --infobox: #efecf4; --buff: #106d58; --nerf: #bc1f1f; --new: #2e5cb8; --rework: #7b3fa0; --fix: #8c5200; --other: #5c6165; --perf: #15687d; --econ: #576718; --ui: #a5307a; --qol: #904f29; --notice: #f4ecc8; --notice-line: #c9a53a; }
html:not([data-skin])[data-palette="dusk"][data-theme="dark"] { --page: #13101a; --paper: #1b1724; --fg: #ebe6f2; --muted: #b0a4c2; --line: #443a5a; --soft: #272133; --softer: #211c2c; --link: #d0b4f5; --visited: #f0a0d0; --red: #ff8a80; --head: #17131f; --accent: #c4a0ee; --infobox: #211c2c; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f; }
@media (prefers-color-scheme: dark) { html:not([data-skin])[data-palette="dusk"]:not([data-theme="light"]) { --page: #13101a; --paper: #1b1724; --fg: #ebe6f2; --muted: #b0a4c2; --line: #443a5a; --soft: #272133; --softer: #211c2c; --link: #d0b4f5; --visited: #f0a0d0; --red: #ff8a80; --head: #17131f; --accent: #c4a0ee; --infobox: #211c2c; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f; } }
html:not([data-skin])[data-palette="terracotta"] { --page: #f1e9e2; --paper: #fbf7f3; --fg: #2a1f1a; --muted: #66554a; --line: #c0a898; --soft: #e8dcd2; --softer: #f3ebe3; --link: #9a3a1e; --visited: #6b3a6e; --red: #b3261e; --head: #f6efe8; --accent: #a14428; --infobox: #f3ebe3; --buff: #106d58; --nerf: #bd1f1f; --new: #2e5cb8; --rework: #7b3fa0; --fix: #8c5200; --other: #5c6165; --perf: #15687d; --econ: #576718; --ui: #a7317b; --qol: #904f29; --notice: #f4ecc8; --notice-line: #c9a53a; }
html:not([data-skin])[data-palette="terracotta"][data-theme="dark"] { --page: #17100d; --paper: #201713; --fg: #f0e6df; --muted: #bba597; --line: #503c30; --soft: #2d211b; --softer: #261b16; --link: #f5ab8e; --visited: #d9a0c0; --red: #ff8a80; --head: #1b1310; --accent: #f09a7a; --infobox: #261b16; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f; }
@media (prefers-color-scheme: dark) { html:not([data-skin])[data-palette="terracotta"]:not([data-theme="light"]) { --page: #17100d; --paper: #201713; --fg: #f0e6df; --muted: #bba597; --line: #503c30; --soft: #2d211b; --softer: #261b16; --link: #f5ab8e; --visited: #d9a0c0; --red: #ff8a80; --head: #1b1310; --accent: #f09a7a; --infobox: #261b16; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f; } }
html:not([data-skin])[data-palette="graphite"] { --page: #ececec; --paper: #ffffff; --fg: #161616; --muted: #4f4f4f; --line: #a0a0a0; --soft: #e0e0e0; --softer: #f2f2f2; --link: #0a56b8; --visited: #5a3f8f; --red: #b3261e; --head: #f6f6f6; --accent: #3a3a3a; --infobox: #f2f2f2; --buff: #116f5a; --nerf: #bf1f1f; --new: #2f5ebc; --rework: #7b3fa0; --fix: #8e5400; --other: #5e6367; --perf: #156b80; --econ: #586918; --ui: #a8317c; --qol: #93512a; --notice: #f4ecc8; --notice-line: #c9a53a; }
html:not([data-skin])[data-palette="graphite"][data-theme="dark"] { --page: #0c0c0c; --paper: #161616; --fg: #ececec; --muted: #a0a0a0; --line: #444444; --soft: #222222; --softer: #1c1c1c; --link: #7ab2ff; --visited: #c3a5f0; --red: #ff8a80; --head: #121212; --accent: #d0d0d0; --infobox: #1c1c1c; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f; }
@media (prefers-color-scheme: dark) { html:not([data-skin])[data-palette="graphite"]:not([data-theme="light"]) { --page: #0c0c0c; --paper: #161616; --fg: #ececec; --muted: #a0a0a0; --line: #444444; --soft: #222222; --softer: #1c1c1c; --link: #7ab2ff; --visited: #c3a5f0; --red: #ff8a80; --head: #121212; --accent: #d0d0d0; --infobox: #1c1c1c; --buff: #4cd1a9; --nerf: #ff8a80; --new: #7ab6ff; --rework: #c79bea; --fix: #e6b24d; --other: #a2a9b1; --perf: #50c5e2; --econ: #bfd85a; --ui: #d775b3; --qol: #d18a61; --notice: #2a2415; --notice-line: #8a6d1f; } }
html:not([data-skin]) .mark { color: var(--paper); }   /* the logo text follows the page color, so it reads on a light dark-mode accent too */

/* crier structure */
html[data-skin="crier"] body { font-size: 1.02rem; line-height: 1.6; }
html[data-skin="crier"] #head { border-bottom: 3px double var(--fg); }
html[data-skin="crier"] #content { border-left: 1px solid var(--fg); border-right: 1px solid var(--fg); border-top: 0; }
html[data-skin="crier"] .name { font-weight: 700; letter-spacing: .01em; }
html[data-skin="crier"] .name small { font-style: italic; text-transform: none; letter-spacing: .02em; }
html[data-skin="crier"] .mark { border-radius: 0; color: var(--paper); font-weight: 700; letter-spacing: .04em; }
html[data-skin="crier"] h1.title { text-align: center; font-weight: 700; font-variant: small-caps; letter-spacing: .03em; font-size: clamp(1.9rem, 5vw + .5rem, 2.8rem); line-height: 1.1; border-top: 4px double var(--fg); border-bottom: 1px solid var(--fg); padding: 8px 0 6px; margin-bottom: 0; }
html[data-skin="crier"] .tagline { text-align: center; font-size: .7rem; font-variant: small-caps; text-transform: lowercase; letter-spacing: .18em; margin: 0 0 14px; padding: 4px 0; border-bottom: 3px double var(--fg); }
html[data-skin="crier"] h2.sec { font-weight: 700; font-size: 1.35rem; border-top: 3px double var(--fg); border-bottom: 1px solid var(--fg); padding: 4px 0 3px; }
html[data-skin="crier"] h3.sec { font-weight: 700; font-style: italic; font-size: 1.1rem; }
html[data-skin="crier"] #app p, html[data-skin="crier"] #app li { text-align: justify; hyphens: auto; }
html[data-skin="crier"] #app :is(table, .infobox, .gtabs, .cats, .alpha, .pager, form.rangebar, .tp, .dev) p, html[data-skin="crier"] #app :is(table, .infobox, .portal) li { text-align: left; hyphens: manual; }
html[data-skin="crier"] #app a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
html[data-skin="crier"] #app a:hover { text-decoration-thickness: 2px; }
html[data-skin="crier"] ul.cols { column-gap: 3.2em; column-rule: 1px solid var(--line); }   /* the gap is wide enough that the rule clears the bullets of the next column */
html[data-skin="crier"] .infobox { border: 1px solid var(--fg); border-top: 4px double var(--fg); background: var(--softer); }
html[data-skin="crier"] .infobox caption, html[data-skin="crier"] .infobox .ibt, html[data-skin="crier"] .infobox .sub { background: transparent; font-variant: small-caps; letter-spacing: .04em; text-align: center; }
html[data-skin="crier"] .wikitable { border: 0; border-top: 3px double var(--fg); border-bottom: 1px solid var(--fg); background: transparent; }
html[data-skin="crier"] .wikitable th, html[data-skin="crier"] .wikitable td { border: 0; border-bottom: 1px solid var(--line); }
html[data-skin="crier"] .wikitable td { background: transparent; }
html[data-skin="crier"] .wikitable thead th { background: transparent; font-variant: small-caps; letter-spacing: .05em; border-bottom: 2px solid var(--fg); }
html[data-skin="crier"] .tp { font-variant: small-caps; letter-spacing: .03em; font-weight: 700; }
html[data-skin="crier"] .portal, html[data-skin="crier"] .cats, html[data-skin="crier"] .alpha, html[data-skin="crier"] form.rangebar, html[data-skin="crier"] .mbox { border-color: var(--fg); }
html[data-skin="crier"] .portal > h3 { background: transparent; font-variant: small-caps; letter-spacing: .05em; border-bottom: 3px double var(--fg); }
html[data-skin="crier"] #foot { border-top: 3px double var(--fg); }
.dot.news { width: 20px; height: 22px; border-radius: 1px; border: 1px solid #141414; background: linear-gradient(#141414, #141414) 3px 3px / calc(100% - 6px) 4px no-repeat, repeating-linear-gradient(#141414 0 1px, transparent 1px 3px) 3px 10px / calc(100% - 6px) 9px no-repeat, #efe9da; }   /* a broadsheet: masthead bar over columns of text lines */

/* the Credits page: people in a portal box */
.ppl { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 4px 16px; }
.who { display: flex; align-items: center; gap: 10px; padding: 4px 0; min-width: 0; }
.who .av { flex: none; display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--soft); color: var(--accent); font-weight: 700; }
.who a { font-weight: 700; overflow-wrap: anywhere; }
.who small { display: block; }

/* the Contents heading and its hide / move button stay in view while the list scrolls; the ::before masks the entries that pass behind it, out to the edges of the box */
#side-toc .side-head { position: sticky; top: 0; z-index: 1; background: var(--j-rail, var(--page)); }
#side-toc .side-head::before { content: ""; position: absolute; z-index: -1; inset: -16px -8px 0 -20px; background: inherit; }
html:not([data-contents="sidebar"]) #side-toc .side-head { background: var(--paper); }