:root {
  color-scheme: dark;

  --base03: #002b36;
  --base02: #073642;
  --base01: #586e75;
  --base00: #657b83;
  --base0: #839496;
  --base1: #93a1a1;
  --base2: #eee8d5;
  --base3: #fdf6e3;
  --yellow: #b58900;
  --orange: #cb4b16;
  --red: #dc322f;
  --magenta: #d33682;
  --violet: #6c71c4;
  --blue: #268bd2;
  --cyan: #2aa198;
  --green: #859900;

  --page-bg: var(--base03);
  --panel-bg: var(--base02);
  --text: var(--base0);
  --strong: var(--base3);
  --muted: var(--base1);
  --line: var(--base01);
  --code-bg: var(--base03);
  --code-text: var(--base0);
  --code-border: var(--base02);
  --code-title-bg: var(--base02);
  --code-title-text: var(--base1);
  --download-hover-border: var(--line);
  --header-height: 3rem;
  --image-min-height: 12rem;
  --image-max-height: 32rem;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Liberation Sans", "DejaVu Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Noto Sans Mono", "Courier New", monospace;

  font-family: var(--font-ui);
}

body:has(#theme-selenized-dark:checked) {
  color-scheme: dark;

  --base03: #103c48;
  --base02: #184956;
  --base01: #72898f;
  --base00: #adbcbc;
  --base0: #adbcbc;
  --base1: #cad8d9;
  --base2: #2d5b69;
  --base3: #cad8d9;
  --yellow: #dbb32d;
  --orange: #ed8649;
  --red: #fa5750;
  --magenta: #f275be;
  --violet: #af88eb;
  --blue: #4695f7;
  --cyan: #41c7b9;
  --green: #75b938;
}

body:has(#theme-selenized-black:checked) {
  color-scheme: dark;

  --base03: #181818;
  --base02: #252525;
  --base01: #777777;
  --base00: #b9b9b9;
  --base0: #b9b9b9;
  --base1: #dedede;
  --base2: #3b3b3b;
  --base3: #dedede;
  --yellow: #dbb32d;
  --orange: #e67f43;
  --red: #ed4a46;
  --magenta: #eb6eb7;
  --violet: #a580e2;
  --blue: #368aeb;
  --cyan: #3fc5b7;
  --green: #70b433;
}

body:has(#theme-selenized-light:checked) {
  --base03: #3a4d53;
  --base02: #53676d;
  --base01: #909995;
  --base00: #53676d;
  --base0: #909995;
  --base1: #d5cdb6;
  --base2: #ece3cc;
  --base3: #fbf3db;
  --yellow: #ad8900;
  --orange: #c25d1e;
  --red: #d2212d;
  --magenta: #ca4898;
  --violet: #8762c6;
  --blue: #0072d4;
  --cyan: #009c8f;
  --green: #489100;
}

body:has(#theme-selenized-white:checked) {
  --base03: #282828;
  --base02: #474747;
  --base01: #878787;
  --base00: #474747;
  --base0: #878787;
  --base1: #cdcdcd;
  --base2: #ebebeb;
  --base3: #ffffff;
  --yellow: #c49700;
  --orange: #d04a00;
  --red: #d6000c;
  --magenta: #dd0f9d;
  --violet: #7f51d6;
  --blue: #0064e4;
  --cyan: #00ad9c;
  --green: #1d9700;
}

body:has(#theme-oksolar-dark:checked),
body:has(#theme-oksolar-light:checked) {
  --base03: #002d38;
  --base02: #093946;
  --base01: #5b7279;
  --base00: #657377;
  --base0: #98a8a8;
  --base1: #8faaab;
  --base2: #f1e9d2;
  --base3: #fbf7ef;
  --yellow: #ac8300;
  --orange: #d56500;
  --red: #f23749;
  --magenta: #dd459d;
  --violet: #7d80d1;
  --blue: #2b90d8;
  --cyan: #259d94;
  --green: #819500;
}

body:has(#theme-gruvbox-dark:checked) {
  color-scheme: dark;

  --base03: #282828;
  --base02: #3c3836;
  --base01: #665c54;
  --base00: #928374;
  --base0: #ebdbb2;
  --base1: #d5c4a1;
  --base2: #504945;
  --base3: #fbf1c7;
  --yellow: #fabd2f;
  --orange: #fe8019;
  --red: #fb4934;
  --magenta: #d3869b;
  --violet: #d3869b;
  --blue: #83a598;
  --cyan: #8ec07c;
  --green: #b8bb26;
}

body:has(#theme-gruvbox-light:checked) {
  --base03: #282828;
  --base02: #3c3836;
  --base01: #928374;
  --base00: #3c3836;
  --base0: #928374;
  --base1: #d5c4a1;
  --base2: #ebdbb2;
  --base3: #fbf1c7;
  --yellow: #b57614;
  --orange: #af3a03;
  --red: #9d0006;
  --magenta: #8f3f71;
  --violet: #8f3f71;
  --blue: #076678;
  --cyan: #427b58;
  --green: #79740e;
}

body:has(#theme-tomorrow:checked) {
  --base03: #1d1f21;
  --base02: #373b41;
  --base01: #8e908c;
  --base00: #4d4d4c;
  --base0: #8e908c;
  --base1: #c5c8c6;
  --base2: #efefef;
  --base3: #ffffff;
  --yellow: #eab700;
  --orange: #f5871f;
  --red: #c82829;
  --magenta: #8959a8;
  --violet: #8959a8;
  --blue: #4271ae;
  --cyan: #3e999f;
  --green: #718c00;
}

body:has(#theme-tomorrow-night:checked) {
  --base03: #1d1f21;
  --base02: #282a2e;
  --base01: #969896;
  --base00: #b4b7b4;
  --base0: #c5c8c6;
  --base1: #e0e0e0;
  --base2: #373b41;
  --base3: #ffffff;
  --yellow: #f0c674;
  --orange: #de935f;
  --red: #cc6666;
  --magenta: #b294bb;
  --violet: #b294bb;
  --blue: #81a2be;
  --cyan: #8abeb7;
  --green: #b5bd68;
}

body:has(#theme-tomorrow-eighties:checked) {
  --base03: #2d2d2d;
  --base02: #393939;
  --base01: #999999;
  --base00: #cccccc;
  --base0: #cccccc;
  --base1: #e0e0e0;
  --base2: #515151;
  --base3: #ffffff;
  --yellow: #ffcc66;
  --orange: #f99157;
  --red: #f2777a;
  --magenta: #cc99cc;
  --violet: #cc99cc;
  --blue: #6699cc;
  --cyan: #66cccc;
  --green: #99cc99;
}

body:has(#theme-tomorrow-blue:checked) {
  --base03: #002451;
  --base02: #00346e;
  --base01: #7285b7;
  --base00: #ffffff;
  --base0: #ffffff;
  --base1: #ffffff;
  --base2: #003f8e;
  --base3: #ffffff;
  --yellow: #ffc58f;
  --orange: #ff9da4;
  --red: #ff9da4;
  --magenta: #ebbbff;
  --violet: #ebbbff;
  --blue: #bbdaff;
  --cyan: #99ffff;
  --green: #d1f1a9;
}

body:has(#theme-tomorrow-bright:checked) {
  --base03: #000000;
  --base02: #2a2a2a;
  --base01: #969896;
  --base00: #eaeaea;
  --base0: #eaeaea;
  --base1: #ffffff;
  --base2: #424242;
  --base3: #ffffff;
  --yellow: #e7c547;
  --orange: #e78c45;
  --red: #d54e53;
  --magenta: #c397d8;
  --violet: #c397d8;
  --blue: #7aa6da;
  --cyan: #70c0b1;
  --green: #b9ca4a;
}

body:has(#theme-zenburn:checked) {
  --base03: #3f3f3f;
  --base02: #4f4f4f;
  --base01: #7f9f7f;
  --base00: #dcdccc;
  --base0: #dcdccc;
  --base1: #ffffef;
  --base2: #5f5f5f;
  --base3: #ffffef;
  --yellow: #f0dfaf;
  --orange: #dfaf8f;
  --red: #cc9393;
  --magenta: #dc8cc3;
  --violet: #dc8cc3;
  --blue: #8cd0d3;
  --cyan: #93e0e3;
  --green: #7f9f7f;
}

body:has(#theme-nord:checked) {
  --base03: #2e3440;
  --base02: #3b4252;
  --base01: #4c566a;
  --base00: #d8dee9;
  --base0: #d8dee9;
  --base1: #e5e9f0;
  --base2: #434c5e;
  --base3: #eceff4;
  --yellow: #ebcb8b;
  --orange: #d08770;
  --red: #bf616a;
  --magenta: #b48ead;
  --violet: #b48ead;
  --blue: #81a1c1;
  --cyan: #88c0d0;
  --green: #a3be8c;
}

body:has(#theme-everforest-dark:checked) {
  --base03: #2d353b;
  --base02: #343f44;
  --base01: #7a8478;
  --base00: #9da9a0;
  --base0: #d3c6aa;
  --base1: #d3c6aa;
  --base2: #475258;
  --base3: #d3c6aa;
  --yellow: #dbbc7f;
  --orange: #e69875;
  --red: #e67e80;
  --magenta: #d699b6;
  --violet: #d699b6;
  --blue: #7fbbb3;
  --cyan: #83c092;
  --green: #a7c080;
}

body:has(#theme-everforest-light:checked) {
  --base03: #5c6a72;
  --base02: #708089;
  --base01: #829181;
  --base00: #5c6a72;
  --base0: #939f91;
  --base1: #bdc3af;
  --base2: #f4f0d9;
  --base3: #fdf6e3;
  --yellow: #dfa000;
  --orange: #f57d26;
  --red: #f85552;
  --magenta: #df69ba;
  --violet: #df69ba;
  --blue: #3a94c5;
  --cyan: #35a77c;
  --green: #8da101;
}

body:has(#theme-ayu-dark:checked) {
  --base03: #0a0e14;
  --base02: #0d1017;
  --base01: #626a73;
  --base00: #b3b1ad;
  --base0: #b3b1ad;
  --base1: #e6e1cf;
  --base2: #11151c;
  --base3: #e6e1cf;
  --yellow: #e6b450;
  --orange: #ff8f40;
  --red: #ff3333;
  --magenta: #d2a6ff;
  --violet: #d2a6ff;
  --blue: #59c2ff;
  --cyan: #95e6cb;
  --green: #aad94c;
}

body:has(#theme-ayu-mirage:checked) {
  --base03: #1f2430;
  --base02: #242936;
  --base01: #5c6773;
  --base00: #cbccc6;
  --base0: #cbccc6;
  --base1: #f3f4f5;
  --base2: #2a3040;
  --base3: #f3f4f5;
  --yellow: #ffd580;
  --orange: #ffa759;
  --red: #ff3333;
  --magenta: #d4bfff;
  --violet: #d4bfff;
  --blue: #73d0ff;
  --cyan: #95e6cb;
  --green: #bae67e;
}

body:has(#theme-ayu-light:checked) {
  --base03: #5c6773;
  --base02: #8a9199;
  --base01: #abb0b6;
  --base00: #5c6773;
  --base0: #8a9199;
  --base1: #f0f0f0;
  --base2: #f3f4f5;
  --base3: #fcfcfc;
  --yellow: #a37acc;
  --orange: #fa8d3e;
  --red: #f51818;
  --magenta: #a37acc;
  --violet: #a37acc;
  --blue: #399ee6;
  --cyan: #4cbf99;
  --green: #86b300;
}

body:has(#theme-catppuccin-latte:checked) {
  --base03: #4c4f69;
  --base02: #5c5f77;
  --base01: #8c8fa1;
  --base00: #4c4f69;
  --base0: #6c6f85;
  --base1: #bcc0cc;
  --base2: #e6e9ef;
  --base3: #eff1f5;
  --yellow: #df8e1d;
  --orange: #fe640b;
  --red: #d20f39;
  --magenta: #ea76cb;
  --violet: #8839ef;
  --blue: #1e66f5;
  --cyan: #179299;
  --green: #40a02b;
}

body:has(#theme-catppuccin-frappe:checked) {
  --base03: #303446;
  --base02: #414559;
  --base01: #838ba7;
  --base00: #a5adce;
  --base0: #c6d0f5;
  --base1: #b5bfe2;
  --base2: #292c3c;
  --base3: #c6d0f5;
  --yellow: #e5c890;
  --orange: #ef9f76;
  --red: #e78284;
  --magenta: #f4b8e4;
  --violet: #ca9ee6;
  --blue: #8caaee;
  --cyan: #81c8be;
  --green: #a6d189;
}

body:has(#theme-catppuccin-macchiato:checked) {
  --base03: #24273a;
  --base02: #363a4f;
  --base01: #8087a2;
  --base00: #a5adcb;
  --base0: #cad3f5;
  --base1: #b8c0e0;
  --base2: #1e2030;
  --base3: #cad3f5;
  --yellow: #eed49f;
  --orange: #f5a97f;
  --red: #ed8796;
  --magenta: #f5bde6;
  --violet: #c6a0f6;
  --blue: #8aadf4;
  --cyan: #8bd5ca;
  --green: #a6da95;
}

body:has(#theme-catppuccin-mocha:checked) {
  --base03: #1e1e2e;
  --base02: #313244;
  --base01: #7f849c;
  --base00: #a6adc8;
  --base0: #cdd6f4;
  --base1: #bac2de;
  --base2: #181825;
  --base3: #cdd6f4;
  --yellow: #f9e2af;
  --orange: #fab387;
  --red: #f38ba8;
  --magenta: #f5c2e7;
  --violet: #cba6f7;
  --blue: #89b4fa;
  --cyan: #94e2d5;
  --green: #a6e3a1;
}

body:has(#theme-rose-pine:checked) {
  --base03: #191724;
  --base02: #1f1d2e;
  --base01: #6e6a86;
  --base00: #908caa;
  --base0: #e0def4;
  --base1: #908caa;
  --base2: #26233a;
  --base3: #e0def4;
  --yellow: #f6c177;
  --orange: #ebbcba;
  --red: #eb6f92;
  --magenta: #c4a7e7;
  --violet: #c4a7e7;
  --blue: #31748f;
  --cyan: #9ccfd8;
  --green: #9ccfd8;
}

body:has(#theme-rose-pine-moon:checked) {
  --base03: #232136;
  --base02: #2a273f;
  --base01: #6e6a86;
  --base00: #908caa;
  --base0: #e0def4;
  --base1: #908caa;
  --base2: #393552;
  --base3: #e0def4;
  --yellow: #f6c177;
  --orange: #ea9a97;
  --red: #eb6f92;
  --magenta: #c4a7e7;
  --violet: #c4a7e7;
  --blue: #3e8fb0;
  --cyan: #9ccfd8;
  --green: #9ccfd8;
}

body:has(#theme-rose-pine-dawn:checked) {
  --base03: #464261;
  --base02: #797593;
  --base01: #9893a5;
  --base00: #464261;
  --base0: #797593;
  --base1: #f2e9e1;
  --base2: #fffaf3;
  --base3: #faf4ed;
  --yellow: #ea9d34;
  --orange: #d7827e;
  --red: #b4637a;
  --magenta: #907aa9;
  --violet: #907aa9;
  --blue: #286983;
  --cyan: #56949f;
  --green: #56949f;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  min-block-size: 100%;
}

body {
  margin: 0;
  min-block-size: 100%;
  --page-bg: var(--base03);
  --panel-bg: var(--base02);
  --text: var(--base0);
  --strong: var(--base3);
  --muted: var(--base1);
  --line: var(--base01);
  --code-bg: var(--base03);
  --code-text: var(--base0);
  --code-border: var(--base02);
  --code-title-bg: var(--base02);
  --code-title-text: var(--base1);
  --download-hover-border: var(--line);
  --index-selected-bg: var(--page-bg);
  --index-selected-border: var(--blue);
  --index-selected-text: var(--strong);
  --index-subsection-selected-bg: color-mix(in srgb, var(--index-selected-bg) 55%, var(--panel-bg));
  --index-subsection-selected-border: color-mix(in srgb, var(--index-selected-border) 55%, var(--line));
  --index-subsection-selected-text: var(--index-selected-text);
  --syntax-plain: color-mix(in srgb, var(--code-text) 70%, white);
  --syntax-muted: color-mix(in srgb, var(--muted) 70%, white);
  --syntax-green: color-mix(in srgb, var(--green) 70%, white);
  --syntax-cyan: color-mix(in srgb, var(--cyan) 70%, white);
  --syntax-blue: color-mix(in srgb, var(--blue) 70%, white);
  --syntax-orange: color-mix(in srgb, var(--orange) 70%, white);
  --syntax-yellow: color-mix(in srgb, var(--yellow) 70%, white);
  --syntax-magenta: color-mix(in srgb, var(--magenta) 70%, white);
  --syntax-violet: color-mix(in srgb, var(--violet) 70%, white);
  --syntax-red: color-mix(in srgb, var(--red) 70%, white);

  background: var(--page-bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
}

body:has(#theme-solarized-light:checked),
body:has(#theme-selenized-light:checked),
body:has(#theme-selenized-white:checked),
body:has(#theme-oksolar-light:checked),
body:has(#theme-gruvbox-light:checked),
body:has(#theme-tomorrow:checked),
body:has(#theme-everforest-light:checked),
body:has(#theme-ayu-light:checked),
body:has(#theme-catppuccin-latte:checked),
body:has(#theme-rose-pine-dawn:checked) {
  color-scheme: light;

  --page-bg: var(--base3);
  --panel-bg: var(--base2);
  --text: var(--base00);
  --strong: var(--base03);
  --muted: var(--base01);
  --line: var(--base1);
  --code-bg: var(--base3);
  --code-text: var(--base00);
  --code-border: var(--base1);
  --code-title-bg: var(--base2);
  --code-title-text: var(--base01);
  --download-hover-border: var(--muted);
  --syntax-plain: color-mix(in srgb, var(--code-text) 60%, black);
  --syntax-muted: color-mix(in srgb, var(--muted) 60%, black);
  --syntax-green: color-mix(in srgb, var(--green) 60%, black);
  --syntax-cyan: color-mix(in srgb, var(--cyan) 60%, black);
  --syntax-blue: color-mix(in srgb, var(--blue) 60%, black);
  --syntax-orange: color-mix(in srgb, var(--orange) 60%, black);
  --syntax-yellow: color-mix(in srgb, var(--yellow) 60%, black);
  --syntax-magenta: color-mix(in srgb, var(--magenta) 60%, black);
  --syntax-violet: color-mix(in srgb, var(--violet) 60%, black);
  --syntax-red: color-mix(in srgb, var(--red) 60%, black);
}

a {
  color: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  block-size: var(--header-height);
  border-block-end: 1px solid var(--line);
  background: var(--panel-bg);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 1rem;
  color: var(--strong);
  font-weight: 700;
  text-decoration: none;
}

.brand:focus-visible,
.index-pane a:focus-visible,
.article-download-hit:focus-visible,
.theme-button:focus-visible,
.theme-close:focus-visible,
.theme-list input:focus-visible + label,
.contact-button:focus-visible,
.contact-close:focus-visible,
.contact-submit:focus-visible,
.license-button:focus-visible,
.license-close:focus-visible,
.index-pane > #index-order-title:focus-visible ~ .index-head label[for="index-order-title"],
.index-pane > #index-order-created:focus-visible ~ .index-head label[for="index-order-created"],
.index-pane > #index-order-modified:focus-visible ~ .index-head label[for="index-order-modified"] {
  outline: 2px solid var(--strong);
  outline-offset: 2px;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--line);
  outline-offset: -2px;
}

.brand-mark {
  color: var(--brand-mark-color, var(--cyan));
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 0 0.01em var(--yellow);
}

.theme-button {
  margin-inline-start: auto;
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
  padding: 0.25rem 0.55rem;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  margin-inline-end: 1rem;
}

.theme-button:hover {
  border-color: var(--strong);
  color: var(--strong);
}

.theme-menu {
  inset: calc(var(--header-height) + 0.5rem) 1rem auto auto;
  display: none;
  overflow: auto;
  inline-size: max-content;
  max-inline-size: calc(100vw - 2rem);
  max-block-size: calc(100vh - var(--header-height) - 1rem);
  max-block-size: calc(100svh - var(--header-height) - 1rem);
  max-block-size: calc(100dvh - var(--header-height) - 1rem);
  margin: 0;
  border: 1px solid var(--line);
  background: var(--panel-bg);
  color: var(--text);
  padding: 0;
  overscroll-behavior: contain;
  scrollbar-color: var(--line) var(--panel-bg);
}

.theme-menu:popover-open {
  display: block;
}

.contact-popover,
.contact-confirmation,
.license-popover {
  inset: auto auto 1rem 1rem;
  box-sizing: border-box;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  max-block-size: min(27rem, calc(100vh - 2rem));
  max-block-size: min(27rem, calc(100svh - 2rem));
  max-block-size: min(27rem, calc(100dvh - 2rem));
  margin: 0;
  border: 1px solid var(--line);
  background: var(--panel-bg);
  color: var(--text);
  color-scheme: inherit;
  padding: 0;
  overscroll-behavior: contain;
  scrollbar-color: var(--line) var(--panel-bg);
}

.contact-popover,
.contact-confirmation {
  inline-size: min(28rem, calc(100vw - 2rem));
}

.contact-confirmation {
  position: fixed;
  z-index: 3;
}

.license-popover {
  inline-size: min(39rem, calc(100vw - 2rem));
}

.contact-popover:popover-open,
.license-popover:popover-open {
  display: block;
}

.contact-confirmation:target {
  display: block;
}

.theme-head,
.contact-head,
.license-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-block-end: 1px solid var(--line);
  background: var(--code-title-bg);
  color: var(--code-title-text);
  padding: 0.45rem 0.7rem;
  font: 0.85rem/1.3 var(--font-mono);
}

.theme-head h2,
.contact-head h2,
.license-head h2 {
  min-inline-size: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  overflow-wrap: anywhere;
}

.theme-close,
.contact-close,
.license-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-inline-size: 1.5rem;
  min-block-size: 1.5rem;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0.1rem;
  color: var(--blue);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.theme-close:hover,
.contact-close:hover,
.license-close:hover {
  color: var(--strong);
}

.contact-form {
  display: grid;
  gap: 0.7rem;
  padding: 0.75rem;
  font: 0.75rem/1.4 var(--font-mono);
}

.contact-note,
.contact-confirmation > p {
  margin: 0;
  color: var(--muted);
}

.contact-field {
  display: grid;
  gap: 0.25rem;
  color: var(--strong);
  font-weight: 700;
}

.contact-field input,
.contact-field textarea {
  box-sizing: border-box;
  inline-size: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--code-bg);
  padding: 0.45rem 0.5rem;
  color: var(--text);
  font: inherit;
  font-weight: 400;
}

.contact-field textarea {
  min-block-size: 7rem;
  resize: vertical;
}

.contact-submit {
  justify-self: start;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--code-title-bg);
  padding: 0.35rem 0.7rem;
  color: var(--code-title-text);
  font: inherit;
  font-weight: 700;
}

.contact-submit:hover {
  border-color: var(--strong);
}

.contact-confirmation > p {
  padding: 0.75rem;
  font: 0.75rem/1.4 var(--font-mono);
}

.license-popover pre {
  margin: 0.7rem;
  color: var(--muted);
  font: 0.68rem/1.42 var(--font-mono);
  overflow-wrap: anywhere;
  tab-size: 4;
  white-space: pre-wrap;
}

.contact-popover::backdrop,
.license-popover::backdrop {
  background: transparent;
}

.theme-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  inline-size: max-content;
  max-inline-size: min(28rem, calc(100vw - 2rem));
  padding: 0.75rem;
}

.theme-list fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  max-inline-size: 100%;
  border: 0;
  padding: 0;
}

.theme-list legend {
  flex: 0 0 100%;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.theme-list input,
.index-pane > .index-order-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.theme-list label {
  cursor: pointer;
  border: 1px solid var(--line);
  padding: 0.2rem 0.45rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.theme-list label:hover {
  border-color: var(--strong);
  color: var(--strong);
}

.theme-list input:checked + label {
  border-color: var(--index-selected-border);
  background: var(--index-selected-bg);
  color: var(--index-selected-text);
}

.theme-list input:checked + label:hover {
  border-color: var(--strong);
}

.shell {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  min-block-size: calc(100vh - var(--header-height));
  min-block-size: calc(100svh - var(--header-height));
  min-block-size: calc(100dvh - var(--header-height));
}

.index-pane {
  position: sticky;
  top: var(--header-height);
  display: flex;
  flex-direction: column;
  align-self: start;
  block-size: calc(100vh - var(--header-height));
  block-size: calc(100svh - var(--header-height));
  block-size: calc(100dvh - var(--header-height));
  overflow: hidden;
  border-inline-end: 1px solid var(--line);
  background: var(--panel-bg);
  padding: 1rem;
  padding-block-end: 0.5rem;
  scrollbar-color: var(--line) var(--panel-bg);
}

.index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 0.75rem;
}

.index-head h2 {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.index-order {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
}

.index-order label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.5rem;
  min-block-size: 1.5rem;
  cursor: pointer;
  border: 0;
  padding: 0.08rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.index-order label:hover {
  color: var(--strong);
  text-decoration-line: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
}

#index-order-title:checked ~ .index-head label[for="index-order-title"],
#index-order-created:checked ~ .index-head label[for="index-order-created"],
#index-order-modified:checked ~ .index-head label[for="index-order-modified"] {
  color: var(--blue);
  text-decoration-line: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
}

.index-pane .index-list {
  display: none;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 0.28rem;
  flex: 0 1 auto;
  overflow: auto;
  max-block-size: 40%;
  min-block-size: 0;
  margin: 0;
  padding: 0 0.25rem 0 0;
  list-style: none;
  overscroll-behavior: contain;
  scrollbar-color: var(--line) var(--panel-bg);
  scrollbar-width: thin;
}

.index-pane > #index-order-title:checked ~ .index-list-title,
.index-pane > #index-order-created:checked ~ .index-list-created,
.index-pane > #index-order-modified:checked ~ .index-list-modified {
  display: grid;
}

.index-item {
  min-inline-size: 0;
}

.index-section-lists {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
  margin-block-start: 0.75rem;
  border-block-start: 1px solid var(--line);
  padding-block-start: 0.75rem;
}

.index-subsection-lists {
  display: none;
}

.index-section-list {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.06rem;
  overflow: auto;
  min-block-size: 0;
  margin: 0;
  padding: 0 0.25rem 0 0.75rem;
  list-style: none;
  overscroll-behavior: contain;
  scrollbar-color: var(--line) var(--panel-bg);
  scrollbar-width: thin;
}

.index-section-item {
  min-inline-size: 0;
}

.index-subsection-list {
  display: none;
  flex-direction: column;
  gap: 0.04rem;
  margin: 0;
  padding: 0 0.2rem 0 0.8rem;
  list-style: none;
}

.index-pane a {
  display: block;
  border-inline-start: 3px solid transparent;
  padding: 0.4rem 0.55rem;
  color: var(--muted);
  text-decoration: none;
}

.index-section-item > a {
  display: flex;
  align-items: center;
  min-block-size: 1.5rem;
  border-inline-start-width: 2px;
  padding: 0.13rem 0.45rem;
  color: var(--base01);
  font-size: 0.66rem;
  line-height: 1.25;
}

.index-subsection-list a {
  display: flex;
  align-items: center;
  min-block-size: 1.35rem;
  border-inline-start-width: 2px;
  padding: 0.1rem 0.4rem;
  color: var(--base01);
  font-size: 0.58rem;
  line-height: 1.2;
}

.index-pane a:hover {
  border-inline-start-color: var(--yellow);
  color: var(--strong);
}

.index-footer {
  flex: none;
  margin-block-start: auto;
  border-block-start: 1px solid var(--line);
  padding-block-start: 0.5rem;
  color: var(--base01);
  font-size: 0.68rem;
  line-height: 1.35;
  text-align: right;
}

.index-footer p {
  margin: 0.15rem 0;
}

.index-footer a:hover {
  color: var(--strong);
}

.index-footer a,
.contact-button,
.license-button {
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration-color: var(--line);
  text-underline-offset: 0.18em;
}

.index-footer-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.contact-button,
.license-button {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.5rem;
  text-decoration-line: underline;
}

.contact-button:hover,
.license-button:hover {
  color: var(--strong);
}

.article-pane {
  min-inline-size: 0;
  padding: clamp(1.25rem, 4vw, 3rem);
}

.article {
  display: none;
  max-inline-size: 96rem;
  margin-inline: auto;
}

.article-header,
.article > .article-downloads,
.article > section > * {
  max-inline-size: 88ch;
  margin-inline: auto;
}

.article:first-of-type {
  display: block;
}

.article-pane:has(.article:target) .article,
.article-pane:has(.article :target) .article {
  display: none;
}

.article-pane:has(.article:target) .article:target,
.article-pane:has(.article :target) .article:has(:target) {
  display: block;
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.article[id],
.article h2[id],
.article h3[id] {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.article-header {
  border-block-end: 1px solid var(--line);
  margin-block-end: 2rem;
  padding-block-end: 1rem;
}

.kicker {
  margin: 0 0 0.4rem;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  color: var(--strong);
  line-height: 1.2;
}

h1 {
  margin: 0;
  font-size: 3rem;
}

h2 {
  margin: 2rem 0 0.6rem;
  font-size: 1.2rem;
}

h3 {
  margin: 1.5rem 0 0.45rem;
  font-size: 1rem;
}

p {
  margin: 0.85rem 0;
}

.summary {
  color: var(--muted);
  font-size: 1.05rem;
}

.article-downloads {
  display: grid;
  gap: 0.55rem;
  margin: 0.75rem 0 1rem;
}

.article-download {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 0.6rem;
  border: 1px solid var(--code-border);
  border-radius: 6px;
  background: var(--code-title-bg);
  color: var(--code-title-text);
  padding: 0.5rem 0.7rem;
  text-decoration: none;
}

.article-download-hit {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}

.article-downloads + .article-downloads {
  margin-block-start: -0.45rem;
}

.article-download:not(.article-download-missing) .article-download-kind::before {
  content: "↓";
  color: var(--blue);
  font-weight: 700;
}

.article-download-kind {
  display: inline-flex;
  position: relative;
  z-index: 2;
  grid-row: 1 / 3;
  grid-column: 1;
  align-items: center;
  gap: 0.6rem;
  color: var(--base01);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  text-transform: uppercase;
}

.article-download code {
  color: inherit;
  font: 0.85rem/1.3 var(--font-mono);
}

.article p code,
.article li code {
  overflow-wrap: anywhere;
}

.article-download:not(.article-download-missing) .block-label {
  position: relative;
  z-index: 2;
  grid-row: 1;
  grid-column: 2;
  min-inline-size: 0;
  pointer-events: none;
}

.article-download .block-checksum {
  position: relative;
  z-index: 2;
  grid-row: 2;
  grid-column: 2;
  justify-self: stretch;
  pointer-events: auto;
  text-align: start;
  user-select: text;
}

.article-download:not(.article-download-missing) .block-size {
  position: relative;
  z-index: 2;
  grid-row: 1 / 3;
  grid-column: 3;
  align-self: center;
  pointer-events: none;
}

.article-download:hover {
  border-color: var(--download-hover-border);
  color: var(--strong);
}

.article-download-missing::before {
  content: "!";
  color: var(--red);
  font-weight: 700;
}

.article-download-missing {
  display: flex;
}

.code-details,
.media-details {
  min-inline-size: 0;
  margin: 1rem 0 1.35rem;
}

.code-details summary,
.media-details summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  border: 1px solid var(--code-border);
  border-block-end: 0;
  border-radius: 6px 6px 0 0;
  background: var(--code-title-bg);
  color: var(--code-title-text);
  padding: 0.45rem 0.7rem;
  list-style: none;
}

.code-details:not([open]) summary,
.media-details:not([open]) summary {
  border-block-end: 1px solid var(--code-border);
  border-radius: 6px;
}

.code-details summary[id],
.media-details summary[id],
.block-footer[id] {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.code-details summary::-webkit-details-marker,
.media-details summary::-webkit-details-marker {
  display: none;
}

.code-details summary::before,
.media-details summary::before {
  content: "▸";
  color: var(--blue);
}

.code-details[open] summary::before,
.media-details[open] summary::before {
  content: "▾";
}

.code-details summary:hover,
.media-details summary:hover {
  color: var(--strong);
}

.code-details summary:focus-visible,
.media-details summary:focus-visible {
  background: var(--code-bg);
  color: var(--strong);
  outline: 2px solid var(--strong);
  outline-offset: -2px;
}

.code-details summary:target,
.media-details summary:target,
.block-footer:target {
  background: var(--code-title-bg);
  color: var(--code-title-text);
  outline: 1px solid var(--line);
  outline-offset: -1px;
  animation: block-target-outline 1.2s ease-out forwards;
}

@keyframes block-target-outline {
  to {
    outline-color: transparent;
  }
}

.block-action:focus-visible {
  background: var(--line);
  color: var(--strong);
  outline: 2px solid var(--strong);
  outline-offset: 2px;
}

.code-details summary code,
.media-details summary code {
  min-inline-size: 0;
  color: inherit;
  font: inherit;
  overflow-wrap: anywhere;
}

.block-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.45rem;
  min-inline-size: 0;
}

.block-title {
  min-inline-size: 0;
  color: inherit;
  font: 0.85rem/1.3 var(--font-mono);
  overflow-wrap: anywhere;
}

.block-note {
  color: var(--base01);
  font: 0.76rem/1.3 var(--font-ui);
  font-size: clamp(0.76rem, calc(0.7rem + 0.1vw), 0.8rem);
  overflow-wrap: anywhere;
}

.block-note::before {
  content: ":";
  margin-inline-end: 0.45rem;
  color: var(--base01);
}

.block-action {
  display: inline-flex;
  align-items: center;
  color: var(--blue);
  font: 0.78rem/1.3 var(--font-ui);
  line-height: 1;
  text-decoration: none;
}

.block-action:hover {
  color: var(--strong);
}

.code-download {
  margin-inline-start: auto;
}

.block-size {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  color: var(--base01);
  font: 0.72rem/1.25 var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.block-checksum {
  display: block;
  min-inline-size: 0;
  color: var(--base01);
  font: 0.52rem/1.2 var(--font-mono);
  font-size: clamp(0.52rem, calc(0.4rem + 0.2vw), 0.64rem);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--code-border);
  border-block-start: 0;
  border-radius: 0 0 6px 6px;
  background: var(--code-title-bg);
  color: var(--code-title-text);
  padding: 0.4rem 0.7rem;
}

.block-footer .block-label {
  flex: 1 1 auto;
  color: var(--base01);
}

.block-footer-link {
  font: 0.78rem/1.3 var(--font-ui);
  line-height: 1;
}

.block-jump {
  font-weight: 700;
}

.code-details:not([open]) summary .block-jump,
.media-details:not([open]) summary .block-jump {
  display: none;
}

.code-block {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--code-border);
  border-radius: 0;
  background: var(--code-bg);
  color: var(--syntax-plain);
}

.code-block-standalone {
  margin-block: 1rem 1.35rem;
  border-radius: 6px;
}

.block-standalone {
  min-inline-size: 0;
  margin: 1rem 0 1.35rem;
}

.block-standalone .code-block,
.block-standalone .image-block {
  border-radius: 6px 6px 0 0;
}

.code-details:not(:has(.block-footer)) .code-block {
  border-radius: 0 0 6px 6px;
}

.code-block code {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  display: block;
  min-inline-size: 0;
  overflow: auto;
  max-inline-size: 100%;
  padding: 1rem;
  font: 0.92rem/1.55 var(--font-mono);
  tab-size: 2;
  white-space: pre;
}

.code-block code * {
  font-size: inherit;
}

.code-block-missing {
  border-color: var(--red);
}

.image-block {
  display: grid;
  place-items: center;
  gap: 0.7rem;
  overflow: auto;
  min-block-size: var(--image-min-height);
  margin: 0;
  border: 1px solid var(--code-border);
  border-radius: 0;
  background: var(--code-bg);
  color: var(--code-text);
  padding: 1rem;
}

.image-block-standalone {
  margin-block: 1rem 1.35rem;
  border-radius: 6px;
}

.media-details:not(:has(.block-footer)) .image-block {
  border-radius: 0 0 6px 6px;
}

.image-block img {
  display: block;
  inline-size: auto;
  block-size: auto;
  min-block-size: var(--image-min-height);
  max-block-size: min(var(--image-max-height), 70vh);
  max-inline-size: 100%;
  object-fit: contain;
}

.image-block figcaption {
  max-inline-size: 60ch;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
}

.image-block-missing {
  border-color: var(--red);
  color: var(--red);
}

.image-block-missing p {
  margin: 0;
}

.sh-normal {
  color: var(--syntax-plain);
}

.sh-comment {
  color: var(--syntax-muted);
  font-style: italic;
}

.sh-keyword {
  color: var(--syntax-green);
  font-weight: 700;
}

.sh-type {
  color: var(--syntax-violet);
}

.sh-preproc {
  color: var(--syntax-magenta);
}

.sh-string,
.sh-regexp,
.sh-specialchar {
  color: var(--syntax-cyan);
}

.sh-usertype,
.sh-classname {
  color: var(--syntax-violet);
  font-weight: 700;
}

.sh-function {
  color: var(--syntax-blue);
}

.sh-number,
.sh-value {
  color: var(--syntax-orange);
}

.sh-variable,
.sh-selector,
.sh-property {
  color: var(--syntax-yellow);
}

.sh-symbol,
.sh-cbracket {
  color: var(--syntax-muted);
}

.sh-error {
  color: var(--syntax-red);
}

.sh-underline {
  text-decoration: underline;
}

.code-block .w,
.code-block .esc,
.code-block .x,
.code-block .n,
.code-block .l,
.code-block .ld,
.code-block .g {
  color: var(--syntax-plain);
}

.code-block .c,
.code-block .c1,
.code-block .ch,
.code-block .cm,
.code-block .cs {
  color: var(--syntax-muted);
  font-style: italic;
}

.code-block .cp,
.code-block .cpf {
  color: var(--syntax-magenta);
}

.code-block .go {
  color: var(--syntax-muted);
}

.code-block .gp {
  color: var(--syntax-blue);
  font-weight: 700;
}

.code-block .k,
.code-block .kc,
.code-block .kd,
.code-block .kn,
.code-block .kp,
.code-block .kr,
.code-block .ow {
  color: var(--syntax-green);
}

.code-block .k,
.code-block .kc,
.code-block .kd,
.code-block .kn,
.code-block .kr {
  font-weight: 700;
}

.code-block .kt {
  color: var(--syntax-violet);
}

.code-block .s,
.code-block .s1,
.code-block .s2,
.code-block .sa,
.code-block .sb,
.code-block .sc,
.code-block .dl,
.code-block .sd,
.code-block .se,
.code-block .sh,
.code-block .si,
.code-block .sr,
.code-block .ss,
.code-block .sx {
  color: var(--syntax-cyan);
}

.code-block .se,
.code-block .si {
  font-weight: 700;
}

.code-block .nf,
.code-block .fm {
  color: var(--syntax-blue);
}

.code-block .m,
.code-block .mb,
.code-block .mf,
.code-block .mh,
.code-block .mi,
.code-block .mo,
.code-block .il {
  color: var(--syntax-orange);
}

.code-block .na,
.code-block .nl,
.code-block .nv,
.code-block .py,
.code-block .vc,
.code-block .vg,
.code-block .vi,
.code-block .vm {
  color: var(--syntax-yellow);
}

.code-block .nb,
.code-block .bp,
.code-block .nt {
  color: var(--syntax-green);
}

.code-block .nt {
  font-weight: 700;
}

.code-block .nc,
.code-block .nn {
  color: var(--syntax-violet);
  font-weight: 700;
}

.code-block .nd,
.code-block .ni {
  color: var(--syntax-magenta);
}

.code-block .ni {
  font-weight: 700;
}

.code-block .ne {
  color: var(--syntax-red);
  font-weight: 700;
}

.code-block .no {
  color: var(--syntax-orange);
}

.code-block .nx {
  color: var(--syntax-plain);
}

.code-block .o,
.code-block .p,
.code-block .pm {
  color: var(--syntax-muted);
}

.code-block .err {
  color: var(--syntax-red);
}

.code-block .gd,
.code-block .gr,
.code-block .gt {
  color: var(--syntax-red);
}

.code-block .gi {
  color: var(--syntax-green);
}

.code-block .gh {
  color: var(--syntax-blue);
  font-weight: 700;
}

.code-block .gu {
  color: var(--syntax-violet);
  font-weight: 700;
}

.code-block .ge,
.code-block .ges {
  font-style: italic;
}

.code-block .ges,
.code-block .gs {
  font-weight: 700;
}

.code-block[data-title="makefile-objects.mk"] .err,
.code-block[data-title="makefile-variables.mk"] .err {
  color: var(--syntax-magenta);
}

@media (max-width: 960px), (pointer: coarse) {
  .block-action {
    justify-content: center;
    min-block-size: 1.5rem;
    padding-inline: 0.2rem;
  }

  .block-jump {
    min-inline-size: 1.5rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 2.75rem;
    --image-min-height: 9rem;
    --image-max-height: 22rem;
    --mobile-index-height: 10rem;
  }

  body {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .site-header {
    gap: 0.5rem;
  }

  .brand {
    gap: 0.45rem;
    min-inline-size: 0;
    padding-inline: 0.75rem;
    font-size: 0.95rem;
  }

  .brand-mark {
    font-size: 1.35rem;
  }

  .theme-button {
    margin-inline-end: 0.75rem;
    padding: 0.22rem 0.45rem;
    font-size: 0.72rem;
  }

  h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 1rem;
  }

  h3 {
    font-size: 0.88rem;
  }

  .summary {
    font-size: 0.9rem;
  }

  .shell {
    grid-template-columns: 1fr;
  }

  .index-pane {
    position: sticky;
    top: var(--header-height);
    z-index: 1;
    block-size: var(--mobile-index-height);
    border-block-end: 1px solid var(--line);
    border-inline-end: 0;
    padding: 0.6rem 0.85rem;
  }

  .index-head {
    margin-block-end: 0.4rem;
  }

  .index-pane .index-list {
    gap: 0.18rem;
  }

  .index-pane a {
    padding: 0.22rem 0.45rem;
  }

  .index-section-list a {
    padding-block: 0.08rem;
    font-size: 0.6rem;
  }

  .index-footer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-block-start: 0.35rem;
    padding-block-start: 0.35rem;
    overflow: hidden;
    font-size: clamp(0.38rem, 1.75vw, 0.5rem);
    line-height: 1.25;
    white-space: nowrap;
  }

  .index-footer p {
    margin: 0;
  }

  .index-footer .contact-button,
  .index-footer .license-button {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.08em;
  }

  .article-pane {
    padding: 0.85rem;
  }

  .article-pane:has(.article:target) .article:target,
  .article-pane:has(.article :target) .article:has(:target),
  .article[id],
  .article h2[id],
  .article h3[id],
  .code-details summary[id],
  .media-details summary[id],
  .block-footer[id] {
    scroll-margin-top: calc(var(--header-height) + var(--mobile-index-height) + 0.75rem);
  }

  .article-header {
    margin-block-end: 1.1rem;
    padding-block-end: 0.85rem;
  }

  .article-download {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.16rem 0.4rem;
    padding: 0.38rem 0.5rem;
  }

  .article-download-kind {
    gap: 0.3rem;
    font-size: 0.58rem;
  }

  .article-download code,
  .block-title {
    font-size: 0.7rem;
  }

  .block-note {
    font-size: 0.64rem;
  }

  .block-size,
  .block-action,
  .block-footer-link {
    font-size: 0.68rem;
  }

  .block-jump {
    font-size: 0.82rem;
  }

  .block-checksum {
    font-size: 0.46rem;
  }

  .code-details summary,
  .media-details summary,
  .block-footer {
    gap: 0.35rem;
    padding: 0.32rem 0.45rem;
  }

  .code-block code {
    padding: 0.6rem;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .image-block {
    padding: 0.6rem;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  :root {
    --mobile-index-height: 9rem;
  }

  .index-pane {
    display: grid;
    grid-template-rows: auto 2.625rem auto 1.125rem;
    align-content: start;
    gap: 0.1875rem;
    padding: 0.25rem 0.65rem;
    padding-block-end: 0.125rem;
  }

  .index-head {
    grid-row: 1;
    margin-block-end: 0;
  }

  .index-pane .index-list {
    grid-row: 2;
    align-items: flex-start;
    gap: 0.35rem;
    flex: none;
    block-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    max-block-size: none;
    min-block-size: 0;
    padding: 2px;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    white-space: nowrap;
  }

  .index-pane > #index-order-title:checked ~ .index-list-title,
  .index-pane > #index-order-created:checked ~ .index-list-created,
  .index-pane > #index-order-modified:checked ~ .index-list-modified {
    display: flex;
  }

  .index-item {
    flex: none;
    min-inline-size: max-content;
  }

  .index-section-lists {
    grid-row: 3;
    flex: none;
    block-size: 2.75rem;
    min-inline-size: 0;
    margin-block-start: 0;
    padding-block-start: 0.25rem;
  }

  .index-subsection-lists {
    grid-row: 4;
    flex: none;
    flex-direction: column;
    block-size: 2.75rem;
    min-inline-size: 0;
    border-block-start: 1px solid var(--line);
    padding-block-start: 0.25rem;
  }

  .index-section-list,
  .index-subsection-lists > .index-subsection-list {
    align-items: flex-start;
    flex: none;
    flex-direction: row;
    gap: 0.3rem;
    block-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    min-block-size: 0;
    margin: 0;
    padding: 2px;
    list-style: none;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-color: var(--line) var(--panel-bg);
    scrollbar-width: thin;
    white-space: nowrap;
  }

  .index-section-list > li,
  .index-subsection-lists > .index-subsection-list > li {
    flex: none;
  }

  .index-section-list > .index-section-item > .index-subsection-list {
    display: none !important;
  }

  .index-pane .index-article,
  .index-section-item > a,
  .index-subsection-lists .index-subsection-list a {
    display: flex;
    align-items: center;
    flex: none;
    min-block-size: 1.5rem;
    border: 1px solid var(--line);
    padding: 0.15rem 0.5rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .index-pane .index-article {
    min-block-size: 1.625rem;
  }

  .index-section-item > a {
    color: var(--base01);
    font-size: 0.6rem;
  }

  .index-subsection-lists .index-subsection-list a {
    color: var(--base01);
    font-size: 0.56rem;
  }

  .index-pane .index-article:hover,
  .index-section-item > a:hover,
  .index-subsection-list a:hover {
    border-color: var(--yellow);
    color: var(--strong);
  }

  .index-pane .index-list a:focus-visible,
  .index-section-list a:focus-visible,
  .index-subsection-list a:focus-visible {
    outline-offset: -2px;
  }

  .index-footer {
    grid-row: 4;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;
    block-size: 100%;
    min-inline-size: 0;
    margin-block-start: 0;
    padding-block-start: 0;
    overflow: hidden;
    font-size: clamp(0.35rem, 1.5vw, 0.5rem);
  }

  .index-footer p {
    flex: none;
  }

  .index-footer p:first-child {
    margin-inline-start: auto;
  }

  .index-footer .contact-button,
  .index-footer .license-button {
    min-block-size: 1rem;
  }
}

@media (max-width: 960px) and (orientation: landscape) {
  :root {
    --header-height: 2.75rem;
  }

  body {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .brand {
    padding-inline: 0.75rem;
    font-size: 0.95rem;
  }

  .brand-mark {
    font-size: 1.35rem;
  }

  .theme-button {
    margin-inline-end: 0.75rem;
    padding: 0.22rem 0.45rem;
    font-size: 0.72rem;
  }

  .shell {
    grid-template-columns: 12rem minmax(0, 1fr);
  }

  .index-pane {
    block-size: calc(100vh - var(--header-height));
    block-size: calc(100svh - var(--header-height));
    block-size: calc(100dvh - var(--header-height));
    border-block-end: 0;
    border-inline-end: 1px solid var(--line);
    padding: 0.75rem;
    padding-block-end: 0.5rem;
  }

  .index-pane a {
    padding-block: 0.24rem;
  }

  .index-pane .index-article {
    font-size: 0.99rem;
  }

  .index-section-item > a {
    font-size: 0.77rem;
  }

  .index-subsection-list a {
    font-size: 0.66rem;
  }

  .index-footer {
    display: block;
    margin-block-start: 0.75rem;
    padding-block-start: 0.5rem;
    font-size: 0.62rem;
    line-height: 1.35;
    white-space: normal;
  }

  .index-footer p {
    margin: 0.15rem 0;
  }

  .article-pane {
    padding: 1rem 1.25rem;
  }

  h1 {
    font-size: 1.95rem;
  }

  .summary {
    font-size: 0.9rem;
  }

  .code-block code {
    padding: 0.6rem;
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .article-pane:has(.article:target) .article:target,
  .article-pane:has(.article :target) .article:has(:target),
  .article[id],
  .article h2[id],
  .article h3[id],
  .code-details summary[id],
  .media-details summary[id],
  .block-footer[id] {
    scroll-margin-top: calc(var(--header-height) + 1rem);
  }
}

@media (orientation: landscape) {
  .index-pane .index-list {
    flex: 1 1 0;
    max-block-size: max-content;
  }

  .index-pane .index-list:has(> .index-item:nth-child(2)) {
    min-block-size: 4.375rem;
  }

  .index-section-lists {
    flex: 2 1 0;
    min-block-size: 4.25rem;
  }
}

@media (min-width: 961px) and (orientation: landscape) {
  .index-pane .index-list:has(> .index-item:nth-child(2)) {
    min-block-size: 5.625rem;
  }

  .index-pane .index-article {
    font-size: 1.1rem;
  }

  .index-section-item > a {
    font-size: 0.825rem;
  }

  .index-subsection-list a {
    font-size: 0.715rem;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  .index-section-lists {
    margin-block-start: 0.4rem;
    padding-block-start: 0.4rem;
  }
}

@media (max-height: 320px) and (orientation: landscape) {
  .index-head {
    margin-block-end: 0.25rem;
  }

  .index-footer {
    margin-block-start: 0.35rem;
    padding-block-start: 0.4rem;
    font-size: 0.56rem;
  }

  .index-footer p {
    margin-block: 0.1rem;
  }
}

@media (max-width: 360px) and (orientation: portrait),
       (max-height: 330px) and (orientation: landscape) {
  .index-footer p:nth-child(2),
  .index-footer p:nth-child(3) {
    display: none;
  }
}

@media (max-width: 360px) {
  h1 {
    font-size: 1.42rem;
  }

  .article-pane {
    padding-inline: 0.7rem;
  }

  .code-block code {
    font-size: 0.64rem;
  }
}