@font-face { font-family: "Georgia Pro"; src: url(fonts/georgia-pro-regular.ttf) format("truetype"); font-weight: 400; font-style: normal; }
    @font-face { font-family: "Georgia Pro"; src: url(fonts/georgia-pro-italic.ttf) format("truetype"); font-weight: 400; font-style: italic; }
    @font-face { font-family: "Georgia Pro"; src: url(fonts/georgia-pro-bold.ttf) format("truetype"); font-weight: 700; font-style: normal; }
    @font-face { font-family: "Georgia Pro"; src: url(fonts/georgia-pro-bold-italic.ttf) format("truetype"); font-weight: 700; font-style: italic; }
    @font-face { font-family: "Georgia Pro"; src: url(fonts/georgia-pro-semibold.ttf) format("truetype"); font-weight: 600; font-style: normal; }
    @font-face { font-family: "Georgia Pro"; src: url(fonts/georgia-pro-semibold-italic.ttf) format("truetype"); font-weight: 600; font-style: italic; }
    @font-face { font-family: "Georgia Pro"; src: url(fonts/georgia-pro-black.ttf) format("truetype"); font-weight: 900; font-style: normal; }
    @font-face { font-family: "Georgia Pro"; src: url(fonts/georgia-pro-black-italic.ttf) format("truetype"); font-weight: 900; font-style: italic; }
    @font-face { font-family: "Inter"; src: url(fonts/inter-regular.woff2) format("woff2"); font-weight: 400 700; font-style: normal; }
    @font-face { font-family: "Inter"; src: url(fonts/inter-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; }
    @font-face { font-family: "Roboto"; src: url(fonts/roboto-regular.woff2) format("woff2"); font-weight: 400 700; font-style: normal; }
    @font-face { font-family: "Roboto"; src: url(fonts/roboto-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; }
    @font-face { font-family: "Open Sans"; src: url(fonts/open-sans-regular.woff2) format("woff2"); font-weight: 400 700; font-style: normal; }
    @font-face { font-family: "Open Sans"; src: url(fonts/open-sans-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; }
    @font-face { font-family: "Sacramento"; src: url(fonts/sacramento.woff2) format("woff2"); font-weight: 400 700; font-style: normal; }
    @font-face { font-family: "Ubuntu"; src: url(fonts/ubuntu-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; }
    @font-face { font-family: "Ubuntu"; src: url(fonts/ubuntu-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; }
    @font-face { font-family: "Ubuntu"; src: url(fonts/ubuntu-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; }
    @font-face { font-family: "Ubuntu"; src: url(fonts/ubuntu-bold-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; }
    @font-face { font-family: "Faculty Glyphic"; src: url(fonts/faculty-glyphic.woff2) format("woff2"); font-style: normal; font-weight: 400 600 700; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    @font-face { font-family: "Faculty Glyphic"; src: url(fonts/faculty-glyphic-ext.woff2) format("woff2"); font-style: normal; font-weight: 400 600 700; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: "Lora"; src: url(fonts/lora-regular.woff2) format("woff2"); font-weight: 400 700; font-style: normal; }
    @font-face { font-family: "Lora"; src: url(fonts/lora-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; }
    /* @font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 400 700; src: url(fonts/noto-sans-jp.woff2) format('woff2'); font-style: normal; } */
    @font-face { font-family: "Roboto Slab"; font-weight: 400 700; src: url(fonts/roboto-slab-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    @font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 100 900; src: url(fonts/roboto-slab.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
    /* @font-face { font-family: "Libre Caslon Text"; src: url(fonts/libre-caslon-text-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; } */
    /* @font-face { font-family: "Libre Caslon Text"; src: url(fonts/libre-caslon-text-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; } */
    /* @font-face { font-family: "Libre Caslon Text"; src: url(fonts/libre-caslon-text-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; } */
    /* @font-face { font-family: "Sora"; font-style: normal; font-weight: 400 700; src: url(fonts/sora-regular.woff2) format('woff2'); font-style: normal; } */
    @font-face { font-family: "Roboto Serif"; src: url(fonts/roboto-serif.ttf) format("truetype"); font-weight: 300 900; font-style: normal; }
    @font-face { font-family: "Roboto Serif"; src: url(fonts/roboto-serif-italic.ttf) format("truetype"); font-weight: 300 900; font-style: italic; }
    /* @font-face { font-family: "Merriweather"; font-style: normal; font-weight: 400 700; src: url(fonts/merriweather-regular.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } */
    /* @font-face { font-family: "Merriweather"; font-style: italic; font-weight: 400 700; src: url(fonts/merriweather-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } */
    /* @font-face { font-family: "Merriweather"; font-style: normal; font-weight: 400 700; src: url(fonts/merriweather-regular-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } */
    /* @font-face { font-family: "Merriweather"; font-style: italic; font-weight: 400 700; src: url(fonts/merriweather-italic-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } */

    :root {
        /* layout dimensions */
        --header-height: 112px;
        --ribbon-height: 28px;
        --nav-height: 37px;
        --toc-width: 258px;
        --toc-side-pad: 22px;
        --main-width: 690px;
        --page-bottom-height: 86px;
        --menu-button-size: 24px;
        --menu-width: 264px;
        --article-side-pad: 44px;
        --right-correction-pad: clamp(0px, calc(0.2 * calc(100vw - var(--main-width) - var(--toc-width) - 15px)), 500px);
        --image-float-width: 200px;
        --image-float-height: 220px;
        --gallery-image-width: 340px;
        --square-gallery-image-width: 200px;
        --plug-icon-size: 18px;
        /* font-family */
        --ff-ui: Segoe UI, Nirmala UI, system-ui, sans-serif;
        --ff-header-title: Sacramento, serif;
        --ff-nav: Trebuchet MS, Nirmala UI, Segoe UI, system-ui, sans-serif;
        --ff-article: Roboto Serif, Georgia, sans-serif;
        --ff-article-digit: Georgia Pro, Georgia, sans-serif;
        --ff-heading: Georgia Pro, sans-serif;
        --ff-heading-digit: inherit;
        --ff-first-heading: Roboto Serif, Georgia Pro, serif;
        --ff-table: Roboto, sans-serif;
        --ff-table-digit: inherit;
        --ff-small: Inter, var(--ff-ui);
        --ff-citeref: Verdana,var(--ff-monospace);
        --ff-monospace: Consolas, monospace;
        --ff-mdash: Ubuntu, var(--ff-ui);
        --ff-cite: Tahoma, Arial, sans-serif;
        --ff-lb-top-left: Trebuchet MS, Nirmala UI, Segoe UI, system-ui, sans-serif;
        --ff-lb-caption: Roboto, sans-serif;
        /* font-size */
        --fs-ui: 14px; /* nav and menu */
        --fs-header-title: 48px;
        --fs-article: 15.4px; /* size inherited for p, ol, ul */
        --fs-blockquote: 0.975em;
        --fs-small: 14.0px;
        --fs-first-heading: 36px;
        --fs-h1: 25px;
        --fs-h2: 22px;
        --fs-h3: 18px;
        --fs-h4: 1em;
        --fs-table: 15px;
        --fs-lb-caption: 15px;
        --fs-cite: 0.85em;
        /* colors */
        --page-bg: #ffffff;
        --header-bg: #222;
        --header-color: #ccc;
        --header-color-2: #7763c8;
        --nav-bg: #fff;
        --nav-color: #808080;
        --nav-svg: #999;
        --nav-border: #eee;
        --toc-color: #999;
        --toc-active-color: #3a3a3a;
        --toc-scrollbar-color-1: #999;
        --toc-scrollbar-color-2: #e8e8e8;
        --c3-bg: inherit;
        --white: #fff;
        --grey-1: #101010;
        --grey-2: #181818;
        --grey-3: #383838; /* main text */
        --grey-5: #555; /* blockquote, figcaption */
        --grey-8: #7e7e7e;
        --grey-9: #999;
        --grey-a: #aaa; /* borders, hr */
        --grey-c: #d5d5d5;
        --grey-e: #eaeaea;
        --grey-f: #f7f8f9; /* code, quote, figure bg color */
        --blockquote-accent: #999;
        --link-color: #36a;
        --small-link-color: #606eb5;
        --selection-color: #333333;
        --selection-bg: #d0dfff;
        --codeblock-mark: #ffefb2;
        --c-pale-yellow: #fea;
        --c-red: #bf2c2c;
        --c-green: #5b845b;
        --c-teal: #008080;
        --c-purple: #875c97;
        --c-orange: #ae7223;
        --c-dark-blue: #284088;
        --c-blue: #425aa2;
        --c-medium-blue: #657aba;
        --c-light-blue: #9baee6;
        --c-pale-blue: #e4ebff;
        /* svg colors */
        --github: #3c3c3c;
        --bluesky: #63aef9;
        --tumblr: #393979;
        --tumblr-white: #fff;
        --youtube: #c33c3c;
        --youtube-white: #fff;
        --twitter: #111;
        --discord: #6d75cc;
        --substack: #d9803f;
        --kofi: #f30;
        --patreon: #f92;
        /* line-height */
        --lh-ui: 1.3;
        --lh-toc: 1.25;
        --lh-article: 1.625; /* main text */
        --lh-first-heading: 1.2;
        --lh-heading: 1.3;
        --lh-table: 1.5;
        --lh-small: 1.5;
        --lh-blockquote: 1.5;
        --lh-short-list: 1.3;
        --lh-codeblock: 1.25;
        --lh-figcaption: 1.2;
        --lh-lb-caption: 1.5;
        /* letter-spacing */
        --ls-bold: -0.3px;
        --ls-code: -0.3px;
        --fw-h1: 700;
        --fw-h2: 700;
        --fw-h3: 700;
        --fw-h4: 700;
        --checkbox-check: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><rect x='17' y='17' width='66' height='66' fill='%236a6a6a'/></svg>");
    }
    html.wide { --main-width: 940px; }
    html.narrow .c2 { max-width: calc(var(--main-width) - 200px); margin: auto; }
    html.full-width { --main-width: 1920px; }
    html.full-width .main-nav { padding-right: 1rem; }
    html.blue {
        --page-bg: #262728;
        --header-bg: #111;
        --header-color: #d2d2d2;
        --header-color-2: #585fc4;
        --nav-bg: #393f57;
        --nav-border: #393f57;
        --nav-color: #888c9f;
        --nav-svg: #777b91;
        --link-color: #445495;
        --blockquote-accent: #546091;
        --toc-color: #74777d;
        --toc-active-color: #b6b7bb;
        --toc-scrollbar-color-1: #838590;
        --toc-scrollbar-color-2: #565863;
        --c3-bg: #fafafa;
        --grey-e: #e4e4e4;
        --grey-f: #f2f3f4;
    }
    html.red {
        --page-bg: #f2f2f2;
        --header-bg: #111;
        --header-color: #d2d2d2;
        --header-color-2: #914a4d;
        --nav-bg: #592b2d;
        --nav-border: #4f2020;
        --nav-color: #b49d9d;
        --nav-svg: #866868;
        --blockquote-accent: #935258;
        --link-color: #863642;
        --c3-bg: #fff;
        --grey-f: #f8f8f8;
        --toc-color: #939393;
        --toc-active-color: #575454;
        --toc-scrollbar-color-1: #888;
        --toc-scrollbar-color-2: #bbb;
    }
    html.dark {
        --page-bg: #262728;
        --header-bg: #121315;
        --header-color: #999;
        --header-color-2: #6657a2;
        --nav-bg: #2c2c2f;
        --nav-color: #666;
        --nav-border: #393939;
        --nav-svg: #606060;
        --toc-color: #606060;
        --toc-active-color: #b0b0b0;
        --toc-scrollbar-color-1: #606060;
        --toc-scrollbar-color-2: #444;
        --white: #333;
        --grey-2: #bfbfbf;
        --grey-3: #b0b0b0;
        --grey-5: #909090;
        --grey-8: #707070;
        --grey-9: #606060;
        --grey-a: #555;
        --grey-c: #505050;
        --grey-e: #393a3c;
        --grey-f: #2e2f31;
        --link-color: #828eb0;
        --small-link-color: #656e89;
        --selection-color: #a4a4a4;
        --selection-bg: #4c4f5b;
        --codeblock-mark: #4a483e;
        --blockquote-accent: #5d6786;
        --c-pale-yellow: #55503b;
        --c-red: #a24f4f;
        --c-green: #668266;
        --c-teal: #3e5959;
        --c-purple: #907ba6;
        --c-dark-blue: #7c93ea;
        --c-blue: #6b7fca;
        --c-medium-blue: #5d6eae;
        --c-light-blue: #39477f;
        --c-pale-blue: #414757;
        --c-orange: #bd8b49;
        --github: #685c91;
        --bluesky: #5e88b3;
        --tumblr: #444480;
        --tumblr-white: #fff;
        --youtube: #b13a3a;
        --youtube-white: #e6e6e6;
        --twitter: #aaa;
        --discord: #6068bf;
        --substack: #bd723c;
        --checkbox-check: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><rect x='17' y='17' width='66' height='66' fill='%23888'/></svg>");
    }
    html.darker {
        --header-bg: #000;
        --header-color: #555;
        --header-color-2: #4c3f7b;
        --nav-bg: #080808;
        --nav-color: #333;
        --nav-svg: #303030;
        --nav-border: #0a0a0a;
        --toc-color: #282828;
        --toc-active-color: #505154;
        --toc-scrollbar-color-1: #282828;
        --toc-scrollbar-color-2: #0a0a0a;
        --white: #050505;
        --page-bg: #000;
        --grey-2: #5a5a5a;
        --grey-3: #505154;
        --grey-5: #444444;
        --grey-8: #323335;
        --grey-9: #282828;
        --grey-a: #202020;
        --grey-c: #151515;
        --grey-e: #0a0a0a;
        --grey-f: #050505;
        --link-color: #353f59;
        --small-link-color: #4a3423;
        --selection-color: #707070;
        --selection-bg: #121416;
        --codeblock-mark: #0f0e09;
        --blockquote-accent: #222d40;
        --c-dark-blue: #3f4a76;
        --c-blue: #364066;
        --c-medium-blue: #2f3858;
        --c-light-blue: #1e2541;
        --c-pale-blue: #13161f;
        --c-pale-yellow: #171409;
        --c-red: #602626;
        --c-green: #273927;
        --c-teal: #111c1c;
        --c-purple: #47364f;
        --c-orange: #5e3f18;
        --github: #3e3857;
        --bluesky: #3b5875;
        --tumblr: #1d1d46;
        --tumblr-white: #6e6f73;
        --youtube: #713232;
        --youtube-white: #737373;
        --twitter: #6a6a6a;
        --discord: #3f4482;
        --substack: #714b33;
        --checkbox-check: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><rect x='17' y='17' width='66' height='66' fill='%23444'/></svg>");
    }
    html.darker body { background-image: linear-gradient(20deg, #070707, #000); background-attachment: fixed; }
    .darker img { opacity: 0.7; }
    
    /* default resets that I use: */
    * { margin: 0; padding: 0; }
    sub, sup { font-size: 0.833em; }
    img { display: block; object-fit: contain; }
    ul { list-style-type: disc; }
    ul, ol { padding: 0 2.5em; }
    ol > li { padding-left: 2px; }
    td { vertical-align: top; }
    hr { border: none; height: 1px; width: 100%; }
    table { border-collapse: collapse; }
    a { color: inherit; text-decoration: none; text-underline-offset: 2px; }
    a:hover { text-decoration: underline; }
    mark { background-color: var(--c-pale-yellow); color: inherit; }
    input, select { font-family: var(--ff-ui); }
    .flat-button { cursor: pointer; padding: 3px 7px 3px; border: 1px solid var(--grey-a); background-color: var(--grey-f); line-height: 1.3; vertical-align: middle; color: var(--grey-3); }

    html ::selection { background-color: var(--selection-bg); color: var(--selection-color); }
    a:target { background-color: #dfe9ff; }
    .no-select { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
    .text-select { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
    .icon { object-fit: contain; background-repeat: no-repeat; background-size: contain; background-position: center; }
    .hidden { display: none !important; }

    .gap-em { display: flex; gap: 1em; } .gap-rem { display: flex; gap: 1rem; } .gap-1 { display: flex; gap: 1px; } .gap-2 { display: flex; gap: 2px; } .gap-3 { display: flex; gap: 3px; } .gap-4 { display: flex; gap: 4px; } .gap-5 { display: flex; gap: 5px; } .gap-6 { display: flex; gap: 6px; } .gap-7 { display: flex; gap: 7px; } .gap-8 { display: flex; gap: 8px; } .gap-9 { display: flex; gap: 9px; } .gap-10 { display: flex; gap: 10px; } .gap-11 { display: flex; gap: 11px; } .gap-12 { display: flex; gap: 12px; } .gap-13 { display: flex; gap: 13px; } .gap-14 { display: flex; gap: 14px; } .gap-15 { display: flex; gap: 15px; } .gap-16 { display: flex; gap: 16px; } .gap-17 { display: flex; gap: 17px; } .gap-18 { display: flex; gap: 18px; } .gap-19 { display: flex; gap: 19px; } .gap-20 { display: flex; gap: 20px; } .gap-21 { display: flex; gap: 21px; } .gap-22 { display: flex; gap: 22px; } .gap-23 { display: flex; gap: 23px; } .gap-24 { display: flex; gap: 24px; } .gap-25 { display: flex; gap: 25px; } .gap-26 { display: flex; gap: 26px; } .gap-27 { display: flex; gap: 27px; } .gap-28 { display: flex; gap: 28px; } .gap-29 { display: flex; gap: 29px; } .gap-30 { display: flex; gap: 30px; } .gap-31 { display: flex; gap: 31px; } .gap-32 { display: flex; gap: 32px; }
    .flex { display: flex; }
    .wrap { display: flex; flex-wrap: wrap; }
    .flex-start { display: flex; justify-content: flex-start; }
    .center { display: flex; justify-content: center; }
    .space-between { display: flex; justify-content: space-between; }
    .space-evenly { display: flex; justify-content: space-evenly; }
    .reverse { display: flex; flex-direction: row-reverse; }
    .column-reverse { display: flex; flex-direction: column-reverse; }
    .column { display: flex; flex-direction: column; }
    .align-center { display: flex; align-items: center; }
    .align-stretch { display: flex; align-items: stretch; }
    .pseudo-link { cursor: pointer; }
    .pseudo-link:hover { text-decoration: underline; }
    .fade-out { opacity: 0; transition: opacity 0.7s 0.4s !important; }
    
    html { scroll-padding-top: calc(var(--nav-height) + 30px); color: var(--grey-3); font-size: var(--fs-ui); scrollbar-color: var(--grey-9) var(--grey-e); background-color: var(--page-bg); }
    html:not(.layout) { white-space: preserve-breaks; padding: 100px; font-size: 16px; line-height: 1.3; }
    html:not(.layout) .main-header,
    html:not(.layout) .nav-wrapper { display: none; }
    
    .nav-wrapper, .menu-line { z-index: 2; }
    .lb-container { z-index: 3; }

    html.layout { padding: 0; min-width: 350px; min-height: 100vh; line-height: var(--lh-ui); font-family: var(--ff-ui); font-size: var(--fs-ui); }
    body { background-color: inherit; min-height: 100vh; }

    .main-header { height: 100px; background-color: var(--header-bg); }
        .title-container { width: 100%; max-width: var(--main-width); transform: translateY(9px); display: flex; justify-content: center; }
        .toc .title-container { padding-left: calc(var(--toc-width) + var(--toc-side-pad)); padding-right: var(--right-correction-pad); }
            .header-title { color: var(--header-color); font-family: var(--ff-header-title); font-size: var(--fs-header-title); line-height: 1; margin-right: 1em; }
                .header-title::after { max-width: 236px; content: ""; left: 0; height: 2px; bottom: 6px; width: 100%; background-color: var(--header-color); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; position: relative; display: block; }
                .header-title:hover { text-decoration: none; }
                .header-title:hover::after { transform: scaleX(1); }

    .nav-wrapper { font-family: var(--ff-nav); background-color: var(--nav-bg); color: var(--nav-color); position: sticky; top: -1px; height: var(--nav-height); border-bottom: 1px solid var(--nav-border); }
    .toc .nav-wrapper { padding-right: var(--right-correction-pad); }
        .main-nav { max-width: var(--main-width); padding: 0 1rem; margin: 0 auto; height: var(--nav-height);  }
        .toc .main-nav { padding-left: calc(var(--toc-width) + var(--article-side-pad) + var(--toc-side-pad)); padding-right: var(--article-side-pad); }
            .main-nav .align-center { gap: 10px; }
            .page-name-display { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-right: 10px; user-select: text; }
            .main-nav a:not(.hamburger):hover { filter: brightness(1.25); }

            .hamburger { cursor: pointer; height: var(--menu-button-size); width: calc(1.25 * var(--menu-button-size)); border: none; background-color: #0000; }
                .hamburger svg path { stroke: var(--nav-svg); }
                .hamburger svg:hover { opacity: 0.8; }

            #to-top-button { opacity: 0; pointer-events: none; transition: opacity 1s; }
            .sticky-active #to-top-button { cursor: pointer; opacity: 1; pointer-events: auto; }

    .menu-line { position: sticky; top: calc(var(--nav-height) - 0px); display: flex; justify-content: center; }
        .menu-aligner { max-width: calc(var(--main-width) + calc(2 * var(--article-side-pad))); width: 100%; display: flex; justify-content: right; }
        .toc .menu-aligner { max-width: calc(var(--main-width) + var(--toc-width)); }
            .menu { border: 1px solid var(--grey-a); border-top: none; position: absolute; background-color: var(--grey-f); max-width: var(--menu-width); padding: 1em; }
                .menu > div + div { padding-top: 8px; margin-top: 10px; border-top: 1px dotted var(--grey-5); }
                .menu select { height: 2em; border: 1px solid var(--grey-a); background-color: var(--white); color: var(--grey-3); padding: 0px 16px 0px 4px; }
                .menu td { vertical-align: middle; padding: 3px 0; }
                .menu td:first-child { padding-right: 1em; }
                .menu table select { width: 100%; min-width: 150px; }

                .menu label { padding-right: 6px; cursor: pointer; }
                .menu-checkbox { appearance: none; cursor: pointer; width: 13px; height: 13px; border: 1px solid var(--grey-8); background-color: var(--white); border-radius: 2px; transform: translateY(1px); background-size: cover; background-position: center; }
                .menu-checkbox:checked { background-image: var(--checkbox-check); }

    .c1 { margin: 0 auto; padding: 0; justify-content: center; display: flex; align-items: stretch; }
        .c2 { }
        .toc .c2 { max-width: 100%; display: flex; justify-content: center; padding-right: var(--right-correction-pad); }
            .c3 { max-width: calc(var(--main-width) + calc(2 * var(--article-side-pad))); background-color: var(--c3-bg); box-sizing: border-box; padding: 40px var(--article-side-pad); }

            .toc .toc-wrapper { display: block; padding-top: 40px; }
            .toc-wrapper { display: none; }
                #table-of-contents { max-height: calc(100vh - var(--nav-height) - 5rem); position: sticky; top: calc(var(--nav-height) + 2rem); padding: 0 0 2rem var(--toc-side-pad); margin-right: var(--toc-side-pad); box-sizing: border-box; overflow: hidden; scrollbar-width: thin; scrollbar-color: var(--toc-scrollbar-color-1) var(--toc-scrollbar-color-2); line-height: var(--lh-toc); min-width: var(--toc-width); width: var(--toc-width); max-width: var(--toc-width); mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); transition: mask-image 0.2s; }
                    #table-of-contents.hide-mask, #table-of-contents:focus-within, #table-of-contents:hover { mask-image: none; }
                    #table-of-contents:hover { overflow: auto; }
                    .toc-row { padding-left: 0.66em; border-left: 2px solid transparent; max-width: calc(var(--toc-width) - var(--toc-side-pad) - 20px); box-sizing: border-box; color: var(--toc-color); }
                    .toc-row.active-heading { border-color: var(--link-color); }
                    .toc-row a { display: block; }
                    .toc-row.h2 a { padding-left: 20px; }
                    .toc-row.h3 a { padding-left: 40px; }
                    .toc-row.th a { display: none; }
                    .toc-row + .toc-row { margin-top: 10px; }
                    .toc-row.active-heading a { color: var(--toc-active-color); }
                    #toc-x-button { opacity: 0.6; stroke: var(--toc-color); padding: 2px; cursor: pointer; }
                    #toc-x-button:hover { opacity: 0.4; }

        #homelinks { display: flex; flex-direction: column; gap: 13px; color: var(--grey-8); margin-bottom: 2em; }
        #homelinks .hl-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; }

        #article { font-family: var(--ff-article); font-size: var(--fs-article); line-height: var(--lh-article); width: 100%; }
            #article > :nth-child(1) { margin-top: 0 !important; }
            #article .heading.first-heading { font-size: var(--fs-first-heading); font-family: var(--ff-first-heading); line-height: var(--lh-first-heading); font-weight: 700; }
            
            #article .article-digit { font-family: var(--ff-article-digit); }
            #article .table-digit { font-family: var(--ff-table-digit); }
            #article .heading-digit { font-family: var(--ff-heading-digit); }
            
            #article .heading { line-height: var(--lh-heading); clear: both; color: var(--grey-2); font-family: var(--ff-heading); margin-top: 1em; }
            #article h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); }
            #article h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); }
            #article h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); }
            #article h4 { font-size: var(--fs-h4); font-weight: var(--fw-h4); }

            #article > * { margin-top: 1em; }
            #article .image-span, #article .image-float, #article .captioned-gallery, #article .square-gallery { margin-top: 1.2em; }
            #article .table-wrapper { margin-bottom: 1.1em; }

            #article p b,
            #article li b,
            #article h4 { letter-spacing: var(--ls-bold); }
            #article p.drop-cap::first-letter { font-size: 3em; float: left; padding: 0.15em 0.2em 0.1em }

            #article sup { vertical-align: super; line-height: 1; }
            #article sub { vertical-align: sub; line-height: 1; }

            #article a { color: var(--link-color); }
            #article a:not(.citeref):not(.plug):hover { border-bottom: none; }
            #article p a:not(.citeref), #article li a:not(.citeref) { text-decoration: 1px dotted underline var(--grey-9); }
            #article a:hover { text-decoration: 1px solid underline currentcolor; }
            
            #article a.citeref { vertical-align: top; font-size: 0.7em; margin-left: 2px; font-family: var(--ff-citeref); }
            #article a.citeref::before { content: "\00A0"; font-size: 0.1px; }

            #article .small { color: var(--grey-8); font-size: var(--fs-small); font-family: var(--ff-small); line-height: var(--lh-small); }
                #article .small ::marker,
                #article .small * { color: inherit; font-size: inherit !important; font-family: inherit !important; }
                #article .small a { text-decoration: 1px dotted underline var(--grey-9); }

            .rows .row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px 3px; line-height: var(--lh-table); }
            .rows .cell { font-family: var(--ff-table); line-height: var(--lh-table); font-size: var(--fs-table); }

            .auto-list { padding: 0 2.5em; margin: 0; }
                .auto-list li { margin-top: 0.6em; }
                    .auto-list li.no-marker { margin-top: 0.5em; list-style-type: none; }

            #article ol,
            #article ul { margin-bottom: 1em; }

            .auto-list.short li { margin-top: 0.5em; line-height: var(--lh-short-list); }

            #article hr { margin: 2em 0; border: none; height: 1px; width: 100%; background-color: var(--grey-c);  }

            .indent #article > p + figure.image-float + p, .indent #article > p + p { text-indent: 2.5em; }
            .justify #article p, .justify #article li { text-align: justify; }

            #article .mdash { margin-inline: 1px; line-height: 1; font-family: var(--ff-mdash); }

            #article code { background-color: var(--grey-e); vertical-align: baseline; line-height: 1; padding-inline: 2px; font-family: var(--ff-monospace); letter-spacing: var(--ls-code); font-size: var(--fs-small); white-space: pre-wrap; }
            #article code * { font-size: inherit !important; font-family: inherit !important; }
            .codeblock { background-color: var(--grey-f); white-space: pre-wrap; font-family: var(--ff-monospace); padding: 8px 10px; line-height: var(--lh-codeblock); font-size: var(--fs-small); }
            .codeblock.cpp { border-left: 2px solid var(--c-teal); }
            .codeblock.cs { border-left: 2px solid var(--c-teal); }
            .codeblock.java { border-left: 2px solid var(--c-teal); }
                .codeblock mark { background-color: var(--codeblock-mark); }
                .codeblock .code-orange { color: var(--c-orange); }
                .codeblock .code-purple { color: var(--c-purple); }
                .codeblock .code-blue { color: var(--c-blue); }
                .codeblock .code-commented { color: var(--c-green); }
                .codeblock .code-commented * { color: inherit !important; }
                .codeblock .code-macro { color: var(--grey-5); }
                .codeblock .code-macro * { color: inherit !important; }

            #article blockquote { font-size: var(--fs-blockquote); line-height: var(--lh-blockquote); margin-inline: 1px; padding: 11px 17px; border-left: 2px solid var(--blockquote-accent); color: var(--grey-5); }
                #article blockquote p b { color: inherit; }
                #article blockquote p a { opacity: 0.97; }
                #article blockquote > :nth-child(n+2) { margin-top: 0.5em; }
                #article blockquote .attribution { text-align: right; opacity: 0.75; }
            #article .auto-list blockquote { padding: 4px 14px; border-left: none; }

            .auto-table { border-collapse: collapse; }
                .auto-table br { margin-bottom: 0.5em; }
                .auto-table th,
                .auto-table td { padding: 5px 6px 4px; vertical-align: top; font-size: var(--fs-table); font-family: var(--ff-table); line-height: var(--lh-table); }

            .auto-video { background-color: var(--grey-1); }
            .auto-video video { display: block; margin-inline: auto; width: 100%; }

            .ie-expand { border: 1px solid var(--grey-a); padding: 0.5em; background-color: var(--grey-f); }
            .ie-expand.collapsed { border-color: transparent; cursor: pointer; overflow: hidden; max-height: 5.5em; mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent); transition: mask-image 0.2s; }
                .collapse-button-container { display: flex; justify-content: flex-end; }
                    .collapse-button-container .flat-button { margin: 8px 0; background-color: var(--white); border: 1px solid var(--grey-a); padding: 3px 8px 4px; }
                    .collapse-button-container .flat-button:hover { background-color: var(--grey-c); }

            .yt-gallery { display: flex; justify-content: flex-start; flex-wrap: wrap; line-height: var(--lh-figcaption); font-size: var(--fs-table); font-family: var(--ff-table); gap: 9px 15px; }
                .yt-gallery figure { width: 210px; }
                    .yt-gallery img { width: 100%; object-fit: cover; aspect-ratio: 16/8.5; border: 1px solid var(--grey-a); box-sizing: border-box; }
                .yt-title { color: var(--grey-5); padding: 5px 0; display: block; }
                .yt-date { color: var(--grey-9); }

            .image-float { clear: right; margin-bottom: 10px; margin-left: 1em; float: right; gap: 10px; display: flex; flex-direction: column; }
                .image-float figure { padding: 8px; background-color: var(--grey-f); border: 1px solid var(--grey-a); }
                .image-float img { margin: auto; border: 1px solid var(--grey-a); max-width: var(--image-float-width); max-height: var(--image-float-height); }
                .image-float figcaption { margin-top: 5px; font-family: var(--ff-ui); line-height: var(--lh-figcaption); text-align: center; max-width: calc(var(--image-float-width) - 20px); font-size: var(--fs-small); color: var(--grey-5); }

            .image-span img, .image-float img, .captioned-gallery img, .square-gallery img { cursor: pointer; }

            .image-span { max-width: 100%; gap: 8px; overflow: hidden; }
            .image-span + .image-span { margin-top: 8px; }
                .image-span img { width: inherit; max-width: 100%; max-height: 100%; }

            .captioned-gallery { display: flex; min-height: 200px; max-width: 100%; gap: 8px; overflow: hidden; align-items: baseline; flex-wrap: wrap; justify-content: space-evenly; }
                .captioned-gallery figure { max-width: var(--gallery-image-width); }
                    .captioned-gallery img { box-sizing: border-box; border: 1px solid var(--grey-a); max-width: 100%; max-height: 100%; }
                    .captioned-gallery figcaption { line-height: var(--lh-figcaption); padding: 3px; text-align: center; font-family: var(--ff-ui); color: var(--grey-8); font-size: var(--fs-small); font-style: italic; }

            .square-gallery { flex-wrap: wrap; gap: 5px; overflow: hidden; display: flex; justify-content: space-evenly; }
                .square-gallery figure { padding: 5px; }
                    .square-gallery div { width: var(--square-gallery-image-width); height: var(--square-gallery-image-width); border: 1px solid var(--grey-a); background-color: var(--grey-f); }
                        .square-gallery img { max-width: 100%; max-height: 100%; }
                    .square-gallery figcaption { max-width: var(--square-gallery-image-width); text-align: center; margin: 5px; line-height: var(--lh-figcaption); font-family: var(--ff-ui); color: var(--grey-5); font-size: var(--fs-small); }

        #article-footer {
            margin-top: 4em;
            color: var(--grey-8);
            line-height: var(--lh-article);
        }

        .plug { display: flex; gap: 5px; white-space: nowrap; line-height: 1; }
        .plug:hover span { text-decoration: underline; }
            .plug svg { height: var(--plug-icon-size); width: var(--plug-icon-size); vertical-align: text-bottom; fill: var(--grey-5); }
            .plug svg path:first-child { height: var(--plug-icon-size); width: var(--plug-icon-size); }

    .lightbox { overflow: hidden; }
    .lightbox .lb-container { display: flex; }
    .lb-container { color: #808080; height: 100vh; width: 100%; background-color: #000c; position: fixed; left: 0; top: 0; display: none; align-items: stretch; flex-direction: column; justify-content: space-between; }
        #lightbox-top-left { padding: 10px; background-color: black; font-family: var(--ff-lb-top-left); }
        .lightbox-wrapper { overflow: hidden; flex-grow: 1; display: flex; justify-content: center; align-items: center; }
            #lightbox { object-fit: contain; max-width: 100%; max-height: 100%; }

        .lightbox-bottom-panel { background-color: black; display: flex; justify-content: center; align-items: center; }
            #lightbox-caption { padding: 20px; margin: 0 auto; font-family: var(--ff-lb-caption); font-size: var(--fs-lb-caption); max-width: var(--main-width); line-height: var(--lh-lb-caption); }

    .page-bottom { height: var(--page-bottom-height); }