:root {
    --icon-outline-url: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.75' y='1.75' width='14.5' height='14.5' rx='.5' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
    --icon-checkmark-url: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.7 9.3l3.4 3.3 5.7-5.7-1.5-1.6-4.2 4.2-1.8-1.8-1.6 1.6z' fill='%23000'/%3E%3C/svg%3E");
    --sansFont: "Inter";
    --titleFont: "InterDisplay";
    --fontSize: 16px;
    --unit: calc(var(--fontSize) * 0.5);
    --line-height: calc(var(--fontSize) * 1.5);
    --baseline: var(--unit);
    --body-padding-x: calc(var(--unit) * 8);
    --body-padding-y: calc(var(--unit) * 8);
    --body-bleed: calc(var(--unit) * 16);
    --body-max-width: calc(var(--unit) * 152);
    --blockSpacingTop: 0px;
    --blockSpacingBottom: var(--line-height);
    --hr-weight: 2px;
    --h1-margin-bottom: var(--line-height);
    --h3-margin-bottom: calc(var(--unit) * 0.5);
    --column-gap: calc(var(--unit) * 8);
    --row-gap: calc(var(--unit) * 8);
    --column-gap-compact: calc(var(--unit) * 4);
    --row-gap-compact: calc(var(--unit) * 2);
    --displayScale: 1;
    --pixel: 1px;
    --foreground-color-rgb: 0, 0, 0;
    --foreground-color-a: 1;
    --foreground-color-a-dimmed: 0.4;
    --foreground-color: rgba(
        var(--foreground-color-rgb),
        var(--foreground-color-a)
    );
    --foreground-color-dimmed: rgba(
        var(--foreground-color-rgb),
        var(--foreground-color-a-dimmed)
    );
    --background-color: #f1f1e0;
    --letterbox-color: #333333;
    --box-link-hover-color: rgba(var(--foreground-color-rgb), 0.07);
    --accent-color: var(--blue);
    --accent-color-darkmode: #9ac9fe;
    --menu-active-color: var(--foreground-color);
    --menu-inactive-color: rgba(0, 0, 0, 0.3);
    --primary: #f1f1e0;
    --red: #f03009;
    --red-orange: #ff2e00;
    --hot-orange: #ff5c00;
    --orange: #ff7105;
    --brown: #716558;
    --warm-yellow: #ffe310;
    --yellow: #fff310;
    --light-yellow: #ffffb3;
    --green: #12c05b;
    --ocean-green: #008f5d;
    --pear-green: #77dd86;
    --blue: #0366d6;
    --sunset-pink: #ff7b81;
    --light-pink: #ffb3ba;
    --xlight-pink: #ffd1d9;
}
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --primary: color(display-p3 0.13 0.17 0.01);
        --red: color(display-p3 0.94 0.19 0.04);
        --red-orange: color(display-p3 0.97 0.26 0.11);
        --orange: color(display-p3 0.99 0.49 0.16);
        --brown: color(display-p3 0.44 0.393 0.341);
        --warm-yellow: color(display-p3 1 0.87 0.05);
        --yellow: color(display-p3 1 0.96 0.05);
        --light-yellow: color(display-p3 1 1 0.7);
        --ocean-green: color(display-p3 0 0.55 0.37);
        --sunset-pink: color(display-p3 1 0.495 0.54);
        --light-pink: color(display-p3 1 0.69 0.718);
        --xlight-pink: color(display-p3 1 0.845 0.869);
    }
}
@supports (font-variation-settings: normal) {
    :root {
        --sansFont: "Inter var";
        --titleFont: "InterDisplay var";
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 1.5dppx) {
    :root {
        --displayScale: 1.5;
        --pixel: 0.75px;
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-resolution: 2dppx) {
    :root {
        --displayScale: 2;
        --pixel: 0.5px;
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
    only screen and (min-resolution: 2.5dppx) {
    :root {
        --displayScale: 2.5;
        --pixel: 0.4px;
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
    only screen and (min-resolution: 3dppx) {
    :root {
        --displayScale: 3;
        --pixel: 0.3333333333px;
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3.5),
    only screen and (min-resolution: 3.5dppx) {
    :root {
        --displayScale: 4;
        --pixel: 0.25px;
    }
}
* {
    font: inherit;
    line-height: inherit;
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
grid,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
nav,
noscript,
object,
ol,
output,
p,
pre,
q,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
blockquote,
q {
    quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none;
}
a,
a:active,
a:visited {
    color: inherit;
}
r-grid {
    display: grid;
    --grid-tc: repeat(4, 1fr);
    grid-template-columns: var(--grid-tc);
    --grid-cs: 1;
    --grid-ce: -1;
    grid-gap: var(--column-gap);
    grid-row-gap: var(--row-gap);
}
r-grid.compact {
    --column-gap: var(--column-gap-compact);
    --row-gap: var(--row-gap-compact);
}
r-cell {
    display: block;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
}
r-grid[columns="1"] {
    --grid-tc: repeat(1, 1fr);
}
r-grid[columns="2"] {
    --grid-tc: repeat(2, 1fr);
}
r-grid[columns="3"] {
    --grid-tc: repeat(3, 1fr);
}
r-grid[columns="4"] {
    --grid-tc: repeat(4, 1fr);
}
r-grid[columns="5"] {
    --grid-tc: repeat(5, 1fr);
}
r-grid[columns="6"] {
    --grid-tc: repeat(6, 1fr);
}
r-grid[columns="7"] {
    --grid-tc: repeat(7, 1fr);
}
r-grid[columns="8"] {
    --grid-tc: repeat(8, 1fr);
}
r-grid[columns="9"] {
    --grid-tc: repeat(9, 1fr);
}
r-grid[columns="10"] {
    --grid-tc: repeat(10, 1fr);
}
r-grid[columns="11"] {
    --grid-tc: repeat(11, 1fr);
}
r-grid[columns="12"] {
    --grid-tc: repeat(12, 1fr);
}
r-grid[columns="13"] {
    --grid-tc: repeat(13, 1fr);
}
r-grid[columns="14"] {
    --grid-tc: repeat(14, 1fr);
}
r-grid[columns="15"] {
    --grid-tc: repeat(15, 1fr);
}
r-grid[columns="16"] {
    --grid-tc: repeat(16, 1fr);
}
r-cell[span^="1"] {
    --grid-cs: 1;
}
r-cell[span^="2"] {
    --grid-cs: 2;
}
r-cell[span^="3"] {
    --grid-cs: 3;
}
r-cell[span^="4"] {
    --grid-cs: 4;
}
r-cell[span^="5"] {
    --grid-cs: 5;
}
r-cell[span^="6"] {
    --grid-cs: 6;
}
r-cell[span^="7"] {
    --grid-cs: 7;
}
r-cell[span^="8"] {
    --grid-cs: 8;
}
r-cell[span^="9"] {
    --grid-cs: 9;
}
r-cell[span^="10"] {
    --grid-cs: 10;
}
r-cell[span^="11"] {
    --grid-cs: 11;
}
r-cell[span^="12"] {
    --grid-cs: 12;
}
r-cell[span^="13"] {
    --grid-cs: 13;
}
r-cell[span^="14"] {
    --grid-cs: 14;
}
r-cell[span^="15"] {
    --grid-cs: 15;
}
r-cell[span^="16"] {
    --grid-cs: 16;
}
r-cell[span$="+1"],
r-cell[span="1"] {
    --grid-ce: 1;
}
r-cell[span$="+2"],
r-cell[span$="-1"],
r-cell[span="2"] {
    --grid-ce: 2;
}
r-cell[span$="+3"],
r-cell[span$="-2"],
r-cell[span="3"] {
    --grid-ce: 3;
}
r-cell[span$="+4"],
r-cell[span$="-3"],
r-cell[span="4"] {
    --grid-ce: 4;
}
r-cell[span$="+5"],
r-cell[span$="-4"],
r-cell[span="5"] {
    --grid-ce: 5;
}
r-cell[span$="+6"],
r-cell[span$="-5"],
r-cell[span="6"] {
    --grid-ce: 6;
}
r-cell[span$="+7"],
r-cell[span$="-6"],
r-cell[span="7"] {
    --grid-ce: 7;
}
r-cell[span$="+8"],
r-cell[span$="-7"],
r-cell[span="8"] {
    --grid-ce: 8;
}
r-cell[span$="+9"],
r-cell[span$="-8"],
r-cell[span="9"] {
    --grid-ce: 9;
}
r-cell[span$="+10"],
r-cell[span$="-9"],
r-cell[span="10"] {
    --grid-ce: 10;
}
r-cell[span$="+11"],
r-cell[span$="-10"],
r-cell[span="11"] {
    --grid-ce: 11;
}
r-cell[span$="+12"],
r-cell[span$="-11"],
r-cell[span="12"] {
    --grid-ce: 12;
}
r-cell[span$="+13"],
r-cell[span$="-12"],
r-cell[span="13"] {
    --grid-ce: 13;
}
r-cell[span$="+14"],
r-cell[span$="-13"],
r-cell[span="14"] {
    --grid-ce: 14;
}
r-cell[span$="+15"],
r-cell[span$="-14"],
r-cell[span="15"] {
    --grid-ce: 15;
}
r-cell[span$="+16"],
r-cell[span$="-15"],
r-cell[span="16"] {
    --grid-ce: 16;
}
r-cell[span$="-16"] {
    --grid-ce: 17;
}
r-cell[span] {
    grid-column-end: span var(--grid-ce);
}
r-cell[span*="+"],
r-cell[span*="-"],
r-cell[span*=".."] {
    grid-column-start: var(--grid-cs);
}
r-cell[span*="-"],
r-cell[span*=".."] {
    grid-column-end: var(--grid-ce);
}
r-cell[span="row"] {
    grid-column: 1/-1;
}
r-cell[order="-16"] {
    order: -16;
}
r-cell[order="-15"] {
    order: -15;
}
r-cell[order="-14"] {
    order: -14;
}
r-cell[order="-13"] {
    order: -13;
}
r-cell[order="-12"] {
    order: -12;
}
r-cell[order="-11"] {
    order: -11;
}
r-cell[order="-10"] {
    order: -10;
}
r-cell[order="-9"] {
    order: -9;
}
r-cell[order="-8"] {
    order: -8;
}
r-cell[order="-7"] {
    order: -7;
}
r-cell[order="-6"] {
    order: -6;
}
r-cell[order="-5"] {
    order: -5;
}
r-cell[order="-4"] {
    order: -4;
}
r-cell[order="-3"] {
    order: -3;
}
r-cell[order="-2"] {
    order: -2;
}
r-cell[order="-1"] {
    order: -1;
}
r-cell[order="0"] {
    order: 0;
}
r-cell[order="1"] {
    order: 1;
}
r-cell[order="2"] {
    order: 2;
}
r-cell[order="3"] {
    order: 3;
}
r-cell[order="4"] {
    order: 4;
}
r-cell[order="5"] {
    order: 5;
}
r-cell[order="6"] {
    order: 6;
}
r-cell[order="7"] {
    order: 7;
}
r-cell[order="8"] {
    order: 8;
}
r-cell[order="9"] {
    order: 9;
}
r-cell[order="10"] {
    order: 10;
}
r-cell[order="11"] {
    order: 11;
}
r-cell[order="12"] {
    order: 12;
}
r-cell[order="13"] {
    order: 13;
}
r-cell[order="14"] {
    order: 14;
}
r-cell[order="15"] {
    order: 15;
}
r-cell[order="16"] {
    order: 16;
}
@media (max-width: 1024px) {
    r-grid[columns-s="1"] {
        --grid-tc: repeat(1, 1fr);
    }
    r-grid[columns-s="2"] {
        --grid-tc: repeat(2, 1fr);
    }
    r-grid[columns-s="3"] {
        --grid-tc: repeat(3, 1fr);
    }
    r-grid[columns-s="4"] {
        --grid-tc: repeat(4, 1fr);
    }
    r-grid[columns-s="5"] {
        --grid-tc: repeat(5, 1fr);
    }
    r-grid[columns-s="6"] {
        --grid-tc: repeat(6, 1fr);
    }
    r-grid[columns-s="7"] {
        --grid-tc: repeat(7, 1fr);
    }
    r-grid[columns-s="8"] {
        --grid-tc: repeat(8, 1fr);
    }
    r-grid[columns-s="9"] {
        --grid-tc: repeat(9, 1fr);
    }
    r-grid[columns-s="10"] {
        --grid-tc: repeat(10, 1fr);
    }
    r-grid[columns-s="11"] {
        --grid-tc: repeat(11, 1fr);
    }
    r-grid[columns-s="12"] {
        --grid-tc: repeat(12, 1fr);
    }
    r-grid[columns-s="13"] {
        --grid-tc: repeat(13, 1fr);
    }
    r-grid[columns-s="14"] {
        --grid-tc: repeat(14, 1fr);
    }
    r-grid[columns-s="15"] {
        --grid-tc: repeat(15, 1fr);
    }
    r-grid[columns-s="16"] {
        --grid-tc: repeat(16, 1fr);
    }
    r-cell[span-s^="1"] {
        --grid-cs: 1;
    }
    r-cell[span-s^="2"] {
        --grid-cs: 2;
    }
    r-cell[span-s^="3"] {
        --grid-cs: 3;
    }
    r-cell[span-s^="4"] {
        --grid-cs: 4;
    }
    r-cell[span-s^="5"] {
        --grid-cs: 5;
    }
    r-cell[span-s^="6"] {
        --grid-cs: 6;
    }
    r-cell[span-s^="7"] {
        --grid-cs: 7;
    }
    r-cell[span-s^="8"] {
        --grid-cs: 8;
    }
    r-cell[span-s^="9"] {
        --grid-cs: 9;
    }
    r-cell[span-s^="10"] {
        --grid-cs: 10;
    }
    r-cell[span-s^="11"] {
        --grid-cs: 11;
    }
    r-cell[span-s^="12"] {
        --grid-cs: 12;
    }
    r-cell[span-s^="13"] {
        --grid-cs: 13;
    }
    r-cell[span-s^="14"] {
        --grid-cs: 14;
    }
    r-cell[span-s^="15"] {
        --grid-cs: 15;
    }
    r-cell[span-s^="16"] {
        --grid-cs: 16;
    }
    r-cell[span-s$="+1"],
    r-cell[span-s="1"] {
        --grid-ce: 1;
    }
    r-cell[span-s$="+2"],
    r-cell[span-s$="-1"],
    r-cell[span-s="2"] {
        --grid-ce: 2;
    }
    r-cell[span-s$="+3"],
    r-cell[span-s$="-2"],
    r-cell[span-s="3"] {
        --grid-ce: 3;
    }
    r-cell[span-s$="+4"],
    r-cell[span-s$="-3"],
    r-cell[span-s="4"] {
        --grid-ce: 4;
    }
    r-cell[span-s$="+5"],
    r-cell[span-s$="-4"],
    r-cell[span-s="5"] {
        --grid-ce: 5;
    }
    r-cell[span-s$="+6"],
    r-cell[span-s$="-5"],
    r-cell[span-s="6"] {
        --grid-ce: 6;
    }
    r-cell[span-s$="+7"],
    r-cell[span-s$="-6"],
    r-cell[span-s="7"] {
        --grid-ce: 7;
    }
    r-cell[span-s$="+8"],
    r-cell[span-s$="-7"],
    r-cell[span-s="8"] {
        --grid-ce: 8;
    }
    r-cell[span-s$="+9"],
    r-cell[span-s$="-8"],
    r-cell[span-s="9"] {
        --grid-ce: 9;
    }
    r-cell[span-s$="+10"],
    r-cell[span-s$="-9"],
    r-cell[span-s="10"] {
        --grid-ce: 10;
    }
    r-cell[span-s$="+11"],
    r-cell[span-s$="-10"],
    r-cell[span-s="11"] {
        --grid-ce: 11;
    }
    r-cell[span-s$="+12"],
    r-cell[span-s$="-11"],
    r-cell[span-s="12"] {
        --grid-ce: 12;
    }
    r-cell[span-s$="+13"],
    r-cell[span-s$="-12"],
    r-cell[span-s="13"] {
        --grid-ce: 13;
    }
    r-cell[span-s$="+14"],
    r-cell[span-s$="-13"],
    r-cell[span-s="14"] {
        --grid-ce: 14;
    }
    r-cell[span-s$="+15"],
    r-cell[span-s$="-14"],
    r-cell[span-s="15"] {
        --grid-ce: 15;
    }
    r-cell[span-s$="+16"],
    r-cell[span-s$="-15"],
    r-cell[span-s="16"] {
        --grid-ce: 16;
    }
    r-cell[span-s$="-16"] {
        --grid-ce: 17;
    }
    r-cell[span-s] {
        grid-column-end: span var(--grid-ce);
    }
    r-cell[span-s*="+"],
    r-cell[span-s*="-"],
    r-cell[span-s*=".."] {
        grid-column-start: var(--grid-cs);
    }
    r-cell[span-s*="-"],
    r-cell[span-s*=".."] {
        grid-column-end: var(--grid-ce);
    }
    r-cell[span-s="row"] {
        grid-column: 1/-1;
    }
    r-cell[order-s="-16"] {
        order: -16;
    }
    r-cell[order-s="-15"] {
        order: -15;
    }
    r-cell[order-s="-14"] {
        order: -14;
    }
    r-cell[order-s="-13"] {
        order: -13;
    }
    r-cell[order-s="-12"] {
        order: -12;
    }
    r-cell[order-s="-11"] {
        order: -11;
    }
    r-cell[order-s="-10"] {
        order: -10;
    }
    r-cell[order-s="-9"] {
        order: -9;
    }
    r-cell[order-s="-8"] {
        order: -8;
    }
    r-cell[order-s="-7"] {
        order: -7;
    }
    r-cell[order-s="-6"] {
        order: -6;
    }
    r-cell[order-s="-5"] {
        order: -5;
    }
    r-cell[order-s="-4"] {
        order: -4;
    }
    r-cell[order-s="-3"] {
        order: -3;
    }
    r-cell[order-s="-2"] {
        order: -2;
    }
    r-cell[order-s="-1"] {
        order: -1;
    }
    r-cell[order-s="0"] {
        order: 0;
    }
    r-cell[order-s="1"] {
        order: 1;
    }
    r-cell[order-s="2"] {
        order: 2;
    }
    r-cell[order-s="3"] {
        order: 3;
    }
    r-cell[order-s="4"] {
        order: 4;
    }
    r-cell[order-s="5"] {
        order: 5;
    }
    r-cell[order-s="6"] {
        order: 6;
    }
    r-cell[order-s="7"] {
        order: 7;
    }
    r-cell[order-s="8"] {
        order: 8;
    }
    r-cell[order-s="9"] {
        order: 9;
    }
    r-cell[order-s="10"] {
        order: 10;
    }
    r-cell[order-s="11"] {
        order: 11;
    }
    r-cell[order-s="12"] {
        order: 12;
    }
    r-cell[order-s="13"] {
        order: 13;
    }
    r-cell[order-s="14"] {
        order: 14;
    }
    r-cell[order-s="15"] {
        order: 15;
    }
    r-cell[order-s="16"] {
        order: 16;
    }
}
@media (max-width: 640px) {
    r-grid[columns-xs="1"] {
        --grid-tc: repeat(1, 1fr);
    }
    r-grid[columns-xs="2"] {
        --grid-tc: repeat(2, 1fr);
    }
    r-grid[columns-xs="3"] {
        --grid-tc: repeat(3, 1fr);
    }
    r-grid[columns-xs="4"] {
        --grid-tc: repeat(4, 1fr);
    }
    r-grid[columns-xs="5"] {
        --grid-tc: repeat(5, 1fr);
    }
    r-grid[columns-xs="6"] {
        --grid-tc: repeat(6, 1fr);
    }
    r-grid[columns-xs="7"] {
        --grid-tc: repeat(7, 1fr);
    }
    r-grid[columns-xs="8"] {
        --grid-tc: repeat(8, 1fr);
    }
    r-grid[columns-xs="9"] {
        --grid-tc: repeat(9, 1fr);
    }
    r-grid[columns-xs="10"] {
        --grid-tc: repeat(10, 1fr);
    }
    r-grid[columns-xs="11"] {
        --grid-tc: repeat(11, 1fr);
    }
    r-grid[columns-xs="12"] {
        --grid-tc: repeat(12, 1fr);
    }
    r-grid[columns-xs="13"] {
        --grid-tc: repeat(13, 1fr);
    }
    r-grid[columns-xs="14"] {
        --grid-tc: repeat(14, 1fr);
    }
    r-grid[columns-xs="15"] {
        --grid-tc: repeat(15, 1fr);
    }
    r-grid[columns-xs="16"] {
        --grid-tc: repeat(16, 1fr);
    }
    r-cell[span-xs^="1"] {
        --grid-cs: 1;
    }
    r-cell[span-xs^="2"] {
        --grid-cs: 2;
    }
    r-cell[span-xs^="3"] {
        --grid-cs: 3;
    }
    r-cell[span-xs^="4"] {
        --grid-cs: 4;
    }
    r-cell[span-xs^="5"] {
        --grid-cs: 5;
    }
    r-cell[span-xs^="6"] {
        --grid-cs: 6;
    }
    r-cell[span-xs^="7"] {
        --grid-cs: 7;
    }
    r-cell[span-xs^="8"] {
        --grid-cs: 8;
    }
    r-cell[span-xs^="9"] {
        --grid-cs: 9;
    }
    r-cell[span-xs^="10"] {
        --grid-cs: 10;
    }
    r-cell[span-xs^="11"] {
        --grid-cs: 11;
    }
    r-cell[span-xs^="12"] {
        --grid-cs: 12;
    }
    r-cell[span-xs^="13"] {
        --grid-cs: 13;
    }
    r-cell[span-xs^="14"] {
        --grid-cs: 14;
    }
    r-cell[span-xs^="15"] {
        --grid-cs: 15;
    }
    r-cell[span-xs^="16"] {
        --grid-cs: 16;
    }
    r-cell[span-xs$="+1"],
    r-cell[span-xs="1"] {
        --grid-ce: 1;
    }
    r-cell[span-xs$="+2"],
    r-cell[span-xs$="-1"],
    r-cell[span-xs="2"] {
        --grid-ce: 2;
    }
    r-cell[span-xs$="+3"],
    r-cell[span-xs$="-2"],
    r-cell[span-xs="3"] {
        --grid-ce: 3;
    }
    r-cell[span-xs$="+4"],
    r-cell[span-xs$="-3"],
    r-cell[span-xs="4"] {
        --grid-ce: 4;
    }
    r-cell[span-xs$="+5"],
    r-cell[span-xs$="-4"],
    r-cell[span-xs="5"] {
        --grid-ce: 5;
    }
    r-cell[span-xs$="+6"],
    r-cell[span-xs$="-5"],
    r-cell[span-xs="6"] {
        --grid-ce: 6;
    }
    r-cell[span-xs$="+7"],
    r-cell[span-xs$="-6"],
    r-cell[span-xs="7"] {
        --grid-ce: 7;
    }
    r-cell[span-xs$="+8"],
    r-cell[span-xs$="-7"],
    r-cell[span-xs="8"] {
        --grid-ce: 8;
    }
    r-cell[span-xs$="+9"],
    r-cell[span-xs$="-8"],
    r-cell[span-xs="9"] {
        --grid-ce: 9;
    }
    r-cell[span-xs$="+10"],
    r-cell[span-xs$="-9"],
    r-cell[span-xs="10"] {
        --grid-ce: 10;
    }
    r-cell[span-xs$="+11"],
    r-cell[span-xs$="-10"],
    r-cell[span-xs="11"] {
        --grid-ce: 11;
    }
    r-cell[span-xs$="+12"],
    r-cell[span-xs$="-11"],
    r-cell[span-xs="12"] {
        --grid-ce: 12;
    }
    r-cell[span-xs$="+13"],
    r-cell[span-xs$="-12"],
    r-cell[span-xs="13"] {
        --grid-ce: 13;
    }
    r-cell[span-xs$="+14"],
    r-cell[span-xs$="-13"],
    r-cell[span-xs="14"] {
        --grid-ce: 14;
    }
    r-cell[span-xs$="+15"],
    r-cell[span-xs$="-14"],
    r-cell[span-xs="15"] {
        --grid-ce: 15;
    }
    r-cell[span-xs$="+16"],
    r-cell[span-xs$="-15"],
    r-cell[span-xs="16"] {
        --grid-ce: 16;
    }
    r-cell[span-xs$="-16"] {
        --grid-ce: 17;
    }
    r-cell[span-xs] {
        grid-column-end: span var(--grid-ce);
    }
    r-cell[span-xs*="+"],
    r-cell[span-xs*="-"],
    r-cell[span-xs*=".."] {
        grid-column-start: var(--grid-cs);
    }
    r-cell[span-xs*="-"],
    r-cell[span-xs*=".."] {
        grid-column-end: var(--grid-ce);
    }
    r-cell[span-xs="row"] {
        grid-column: 1/-1;
    }
    r-cell[order-xs="-16"] {
        order: -16;
    }
    r-cell[order-xs="-15"] {
        order: -15;
    }
    r-cell[order-xs="-14"] {
        order: -14;
    }
    r-cell[order-xs="-13"] {
        order: -13;
    }
    r-cell[order-xs="-12"] {
        order: -12;
    }
    r-cell[order-xs="-11"] {
        order: -11;
    }
    r-cell[order-xs="-10"] {
        order: -10;
    }
    r-cell[order-xs="-9"] {
        order: -9;
    }
    r-cell[order-xs="-8"] {
        order: -8;
    }
    r-cell[order-xs="-7"] {
        order: -7;
    }
    r-cell[order-xs="-6"] {
        order: -6;
    }
    r-cell[order-xs="-5"] {
        order: -5;
    }
    r-cell[order-xs="-4"] {
        order: -4;
    }
    r-cell[order-xs="-3"] {
        order: -3;
    }
    r-cell[order-xs="-2"] {
        order: -2;
    }
    r-cell[order-xs="-1"] {
        order: -1;
    }
    r-cell[order-xs="0"] {
        order: 0;
    }
    r-cell[order-xs="1"] {
        order: 1;
    }
    r-cell[order-xs="2"] {
        order: 2;
    }
    r-cell[order-xs="3"] {
        order: 3;
    }
    r-cell[order-xs="4"] {
        order: 4;
    }
    r-cell[order-xs="5"] {
        order: 5;
    }
    r-cell[order-xs="6"] {
        order: 6;
    }
    r-cell[order-xs="7"] {
        order: 7;
    }
    r-cell[order-xs="8"] {
        order: 8;
    }
    r-cell[order-xs="9"] {
        order: 9;
    }
    r-cell[order-xs="10"] {
        order: 10;
    }
    r-cell[order-xs="11"] {
        order: 11;
    }
    r-cell[order-xs="12"] {
        order: 12;
    }
    r-cell[order-xs="13"] {
        order: 13;
    }
    r-cell[order-xs="14"] {
        order: 14;
    }
    r-cell[order-xs="15"] {
        order: 15;
    }
    r-cell[order-xs="16"] {
        order: 16;
    }
}
r-grid.debug > * {
    --color: rgba(248, 110, 91, 0.3);
    background-image: linear-gradient(180deg, var(--color) 0, var(--color));
}
r-grid.debug > :nth-child(6n + 2) {
    --color: rgba(103, 126, 208, 0.3);
}
r-grid.debug > :nth-child(6n + 3) {
    --color: rgba(224, 174, 72, 0.3);
}
r-grid.debug > :nth-child(6n + 4) {
    --color: rgba(77, 214, 115, 0.3);
}
r-grid.debug > :nth-child(6n + 5) {
    --color: rgba(217, 103, 219, 0.3);
}
r-grid.debug > :nth-child(6n + 6) {
    --color: rgba(94, 204, 211, 0.3);
}
r-grid.debug > :nth-child(6n + 7) {
    --color: rgba(248, 110, 91, 0.3);
}
:root {
    --debugGrey05: hsla(0, 0%, 47.1%, 0.05);
    --debugGrey1: hsla(0, 0%, 47.1%, 0.1);
    --debugGrey2: hsla(0, 0%, 47.1%, 0.2);
    --debugRed2: rgba(238, 39, 17, 0.2);
    --debugBlue2: rgba(24, 113, 233, 0.2);
    --debugGreen2: rgba(18, 192, 91, 0.2);
    --debugYellow2: rgba(249, 191, 15, 0.2);
    --debugPink2: rgba(255, 0, 255, 0.2);
    --debugCyan2: rgba(20, 230, 245, 0.2);
    --debugCyan3: rgba(20, 230, 245, 0.3);
    --debugGrey4: hsla(0, 0%, 47.1%, 0.4);
    --debugRed4: rgba(238, 39, 17, 0.4);
    --debugBlue4: rgba(24, 113, 233, 0.4);
    --debugGreen4: rgba(18, 192, 91, 0.4);
    --debugYellow4: rgba(249, 191, 15, 0.4);
    --debugPink4: rgba(255, 0, 255, 0.4);
    --debugCyan4: rgba(20, 230, 245, 0.4);
    --debugGrey8: hsla(0, 0%, 47.1%, 0.8);
    --debugRed8: rgba(238, 39, 17, 0.8);
    --debugBlue8: rgba(24, 113, 233, 0.8);
    --debugGreen8: rgba(18, 192, 91, 0.8);
    --debugYellow8: rgba(249, 191, 15, 0.8);
    --debugPink8: rgba(255, 0, 255, 0.8);
    --debugCyan8: rgba(20, 230, 245, 0.8);
    --wireWeight: var(--pixel);
}
.debug-base-grid {
    background-size: var(--unit) var(--unit);
    background-repeat: repeat;
    background-position: calc(var(--unit) * -0.5) calc(var(--unit) * -0.5);
    background-image: radial-gradient(
        hsla(0, 0%, 49.8%, 0.15) calc(var(--pixel) * 2),
        transparent 0
    );
}
:root.debug address,
:root.debug article,
:root.debug aside,
:root.debug blockquote,
:root.debug canvas,
:root.debug dd,
:root.debug div,
:root.debug dl,
:root.debug dt,
:root.debug fieldset,
:root.debug figcaption,
:root.debug figure,
:root.debug footer,
:root.debug form,
:root.debug grid,
:root.debug h1,
:root.debug h2,
:root.debug h3,
:root.debug h4,
:root.debug h5,
:root.debug h6,
:root.debug header,
:root.debug hr,
:root.debug li,
:root.debug main,
:root.debug nav,
:root.debug noscript,
:root.debug ol,
:root.debug p,
:root.debug pre,
:root.debug section,
:root.debug table,
:root.debug tfoot,
:root.debug ul,
:root.debug video {
    box-shadow: inset 0 0 0 var(--wireWeight) var(--debugPink4),
        0 0 0 var(--wireWeight) var(--debugPink4),
        0 var(--blockSpacingBottom) 0 0 var(--debugYellow2),
        0 calc(var(--blockSpacingTop) * -1) 0 0 var(--debugYellow2);
}
:root.debug hr {
    box-shadow: inset 0 0 0 var(--wireWeight) var(--debugGreen4),
        0 0 0 var(--wireWeight) var(--debugGreen4);
}
:root.debug :first-child {
    box-shadow: inset 0 0 0 var(--wireWeight) var(--debugGreen4),
        0 0 0 var(--wireWeight) var(--debugGreen4),
        0 var(--blockSpacingBottom) 0 0 var(--debugYellow2);
}
:root.debug :last-child {
    box-shadow: inset 0 0 0 var(--wireWeight) var(--debugGreen4),
        0 0 0 var(--wireWeight) var(--debugGreen4),
        0 calc(var(--blockSpacingTop) * -1) 0 0 var(--debugYellow2);
}
:root.debug :first-child:last-child {
    box-shadow: inset 0 0 0 var(--wireWeight) var(--debugGreen4),
        0 0 0 var(--wireWeight) var(--debugGreen4);
}
:root.debug r-grid > * {
    box-shadow: inset 0 0 0 var(--wireWeight) var(--debugBlue8),
        0 0 0 var(--wireWeight) var(--debugBlue8);
}
.highlight > pre {
    --bg: #f5f5f5;
    --fg: #000;
    --comment: #8a8a8a;
    --punctuation: #8c8c8c;
    --operator: #555;
    --identifier: inherit;
    --control-flow: inherit;
    --constant: inherit;
    --numeric-constant: var(--constant);
    padding: 1em;
    background: var(--bg);
    color: var(--fg);
    border-radius: calc(var(--unit) * 0.5);
}
@media (prefers-color-scheme: dark) {
    .highlight > pre {
        --bg: #222;
        --fg: #eee;
        --comment: #999;
        --punctuation: #aaa;
        --operator: #ccc;
        --constant: #add8e6;
    }
}
.highlight > pre .p {
    color: var(--punctuation);
}
.highlight > pre .bp,
.highlight > pre .n,
.highlight > pre .na,
.highlight > pre .nb,
.highlight > pre .nc,
.highlight > pre .nd,
.highlight > pre .ne,
.highlight > pre .nf,
.highlight > pre .ni,
.highlight > pre .nl,
.highlight > pre .nn,
.highlight > pre .no,
.highlight > pre .nt,
.highlight > pre .nv,
.highlight > pre .nx,
.highlight > pre .py,
.highlight > pre .vc,
.highlight > pre .vg,
.highlight > pre .vi {
    color: var(--identifier);
}
.highlight > pre .nf {
    font-weight: 500;
}
.highlight > pre .o,
.highlight > pre .ow {
    color: var(--operator);
}
.highlight > pre .c,
.highlight > pre .c1,
.highlight > pre .cm,
.highlight > pre .cp,
.highlight > pre .cs {
    color: var(--comment);
    font-style: italic;
}
.highlight > pre .k,
.highlight > pre .kc,
.highlight > pre .kd,
.highlight > pre .kn,
.highlight > pre .kp,
.highlight > pre .kr,
.highlight > pre .kt {
    color: var(--control-flow);
    font-weight: 500;
}
.highlight > pre .s,
.highlight > pre .s1,
.highlight > pre .s2,
.highlight > pre .sb,
.highlight > pre .sc,
.highlight > pre .sd,
.highlight > pre .se,
.highlight > pre .sh,
.highlight > pre .si,
.highlight > pre .sr,
.highlight > pre .ss,
.highlight > pre .sx {
    color: var(--constant);
}
.highlight > pre .m,
.highlight > pre .mf,
.highlight > pre .mi {
    color: var(--numeric-constant);
}
li {
    margin-left: 0;
    margin-bottom: var(--baseline);
}
li > p + ol,
li > p + ul {
    margin-top: calc(var(--baseline) * -1);
}
li > p + ol {
    margin-top: calc(var(--unit) * -2);
}
li.task-list-item {
    list-style-type: none;
}
li.task-list-item > input[type="checkbox"] {
    list-style: none;
    margin-right: 0.5em;
    margin-left: -1.4em;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.5em;
    height: var(--baseline);
    display: inline-block;
    position: relative;
    border: none;
    opacity: 1;
}
li.task-list-item > input[type="checkbox"]:after,
li.task-list-item > input[type="checkbox"]:before {
    display: block;
    position: absolute;
    content: "X";
    color: transparent;
    left: 0;
    top: -0.25em;
    bottom: -0.25em;
    width: 1.1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    --webkit-touch-callout: none;
}
li.task-list-item > input[type="checkbox"]:after {
    background-image: var(--icon-outline-url);
}
li.task-list-item > input[type="checkbox"][checked]:before {
    background-image: var(--icon-checkmark-url);
}
@supports (
    (-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), red)) or
        (mask-image: linear-gradient(rgba(0, 0, 0, 1), red))
) {
    li.task-list-item > input[type="checkbox"]:after,
    li.task-list-item > input[type="checkbox"]:before {
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center center;
        mask-position: center center;
    }
    li.task-list-item > input[type="checkbox"]:after {
        background: var(--foreground-color);
        -webkit-mask-image: var(--icon-outline-url);
        mask-image: var(--icon-outline-url);
    }
    li.task-list-item > input[type="checkbox"][checked]:before {
        background: var(--foreground-color);
        -webkit-mask-image: var(--icon-checkmark-url);
        mask-image: var(--icon-checkmark-url);
    }
}
.compact > li > p + ol,
.compact > li > p + ul {
    margin-top: calc(var(--blockSpacingBottom) * -1);
}
ol,
ul {
    list-style-position: outside;
    --list-indentation: 2em;
}
ol.compact > li,
ul.compact > li {
    margin-bottom: 0;
}
ul {
    padding-left: 1.3em;
}
ul.plain {
    list-style: none;
}
ol[start] {
    -webkit-padding-start: var(--list-indentation);
    padding-inline-start: var(--list-indentation);
}
ol:not([start]) {
    list-style: none;
    counter-reset: ol-counter;
    padding-left: var(--list-indentation);
}
ol:not([start]) > li {
    counter-increment: ol-counter;
    position: relative;
}
ol:not([start]) > li:before {
    content: counter(ol-counter) ". ";
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    position: absolute;
    --space: 0.5em;
    --width: calc(var(--list-indentation) - var(--space));
    left: calc(-1 * (var(--width) + var(--space)));
    width: var(--width);
    height: var(--lineHeight);
    text-align: left;
}
:root {
    font-family: var(--sansFont), -system-ui, system-ui, sans-serif;
    font-size: var(--fontSize);
    line-height: var(--line-height);
    color: var(--foreground-color);
    letter-spacing: -0.01em;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-variant-ligatures: contextual common-ligatures;
    background-color: var(--letterbox-color);
}
@media (max-width: 640px) {
    :root {
        background-color: initial;
    }
}
body {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    background: var(--background-color);
    box-shadow: 0 0 0 var(--body-bleed) var(--background-color);
    margin: 0 auto;
    padding: var(--body-padding-y) var(--body-padding-x);
    max-width: var(--body-max-width);
    min-height: 100vh;
    box-sizing: border-box;
}
@media (max-width: 1024px) {
    body {
        --body-padding-y: calc(var(--unit) * 4);
    }
}
@media (max-width: 640px) {
    body {
        --body-padding-x: calc(var(--unit) * 3);
        --body-padding-y: calc(var(--unit) * 2);
    }
}
.margin-b-1 {
    margin-bottom: var(--unit);
}
.margin-b-2 {
    margin-bottom: calc(var(--unit) * 2);
}
.margin-b-3 {
    margin-bottom: calc(var(--unit) * 3);
}
.margin-b-4 {
    margin-bottom: calc(var(--unit) * 4);
}
.margin-b-5 {
    margin-bottom: calc(var(--unit) * 5);
}
.margin-b-6 {
    margin-bottom: calc(var(--unit) * 6);
}
.margin-b-7 {
    margin-bottom: calc(var(--unit) * 7);
}
.margin-b-8 {
    margin-bottom: calc(var(--unit) * 8);
}
.dimmed {
    color: var(--foreground-color-dimmed);
}
.nowrap {
    white-space: nowrap;
    word-break: break-word;
}
.fullwidth {
    background-color: var(--background-color);
    --shadow-x: calc(var(--body-padding-x) + var(--body-bleed));
    box-shadow: var(--shadow-x) 0 0 0 var(--background-color),
        calc(var(--shadow-x) * -1) 0 0 0 var(--background-color);
}
r-cell.fullwidth {
    grid-column: 1/-1;
}
.font-title-1 {
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.5rem;
}
.font-title-1,
.font-title-2 {
    font-family: var(--titleFont);
}
.font-title-2 {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0.01em;
}
@media (min-width: 641px) {
    .only-viewport-xsmall {
        display: none;
    }
}
@media (min-width: 1025px) {
    .only-viewport-small {
        display: none;
    }
}
.bold,
b,
strong {
    font-weight: 600;
}
.italic,
em,
i {
    font-style: italic;
}
small {
    font-size: 0.75em;
    letter-spacing: 0;
    line-height: 1.4;
}
time {
    color: var(--foreground-color-dimmed);
}
address,
article,
aside,
blockquote,
dd,
div.highlighter-rouge,
dl,
dt,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
nav,
ol,
p,
pre,
r-grid,
table,
tfoot,
ul,
video {
    margin-top: var(--blockSpacingTop);
    margin-bottom: var(--blockSpacingBottom);
}
:first-child {
    margin-top: unset;
}
:last-child {
    margin-bottom: unset;
}
blockquote {
    position: relative;
    --color: rgba(var(--foreground-color-rgb), 0.13);
    padding-left: 1em;
    border-left: 0.2rem solid var(--color);
    font-style: italic;
    font-weight: 449;
    opacity: 0.7;
}
blockquote:before {
    content: "“";
    font-size: 1.5em;
    height: 0.6em;
    font-family: Georgia, serif;
    font-weight: 600;
    color: var(--color);
    position: absolute;
    left: -1em;
    background: #fff;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
h1 {
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.5rem;
    margin-top: calc(var(--line-height) * 2);
    margin-bottom: var(--h1-margin-bottom);
}
h1,
h2 {
    font-family: var(--titleFont);
}
h2 {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0.01em;
}
* + h2 {
    margin-top: 3rem;
}
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: 600;
    margin-bottom: var(--h3-margin-bottom);
}
h3 + h1,
h3 + h1.single-line,
h4 + h1,
h4 + h1.single-line {
    margin-top: calc(var(--baseline) * 3);
}
h3.single-line + h1,
h3.single-line + h1.single-line,
h3.single-line + h2,
h3.single-line + h2.single-line,
h4.single-line + h1,
h4.single-line + h1.single-line,
h4.single-line + h2,
h4.single-line + h2.single-line {
    margin-top: var(--line-height);
}
h3 + h2,
h3 + h2.single-line,
h4 + h2,
h4 + h2.single-line {
    margin-top: var(--baseline);
}
[class^="only-viewport-"] + h1,
[class^="only-viewport-"] + h2,
[class^="only-viewport-"] + h3,
[class^="only-viewport-"] + h4,
[class^="only-viewport-"] + h5,
[class^="only-viewport-"] + h6,
hr + h1,
hr + h2,
hr + h3,
hr + h4,
hr + h5,
hr + h6 {
    margin-top: unset;
}
a[href] {
    text-decoration: none;
    color: var(--accent-color);
}
a[href]:hover {
    text-decoration: underline;
}
a[href].dimmed {
    color: var(--foreground-color-dimmed);
}
a[href].dimmed:hover {
    color: var(--foreground-color);
}
h1 > a[href],
h2 > a[href],
h3 > a[href],
h4 > a[href],
h5 > a[href],
h6 > a[href] {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}
h1 > a[href]:hover,
h2 > a[href]:hover,
h3 > a[href]:hover,
h4 > a[href]:hover,
h5 > a[href]:hover,
h6 > a[href]:hover {
    text-decoration: none;
    background-color: var(--box-link-hover-color);
    border-radius: calc(var(--unit) * 0.5);
    color: inherit;
    padding-left: calc(var(--unit) * 0.5);
    padding-right: calc(var(--unit) * 0.5);
    margin-left: calc(var(--unit) * -0.5);
    margin-right: calc(var(--unit) * -0.5);
}
a[href^="#"]:hover {
    -webkit-text-decoration-style: dashed;
    text-decoration-style: dashed;
}
hr:first-child {
    margin-top: calc(var(--hr-weight) / -2);
    margin-bottom: calc(var(--line-height) - var(--hr-weight) / 2);
}
hr:last-child {
    margin-bottom: calc(var(--hr-weight) / -2);
}
hr,
hr:last-child,
hr:only-child {
    margin-top: calc(var(--line-height) - var(--hr-weight) / 2);
}
hr,
hr:only-child {
    border: none;
    background: var(--foreground-color);
    height: var(--hr-weight);
    margin-bottom: calc(var(--line-height) - var(--hr-weight) / 2);
}
* + hr:last-child {
    margin-top: calc(var(--hr-weight) / -2);
}
hr:not(:first-child) {
    margin-top: var(--line-height);
    margin-bottom: calc(var(--line-height) - var(--hr-weight));
}
r-grid > hr {
    grid-column: 1/-1;
}
r-grid > hr,
r-grid > hr:not(:first-child):not(:last-child) {
    margin-top: calc(var(--line-height) - var(--hr-weight));
    margin-bottom: 0;
}
picture {
    display: block;
    margin-top: var(--blockSpacingTop);
    margin-bottom: var(--blockSpacingBottom);
}
img,
img:first-child,
img:last-child {
    display: block;
    margin-top: calc(var(--unit) * 2);
    margin-bottom: calc(var(--unit) * 2);
}
img.inline,
img:first-child.inline,
img:last-child.inline {
    display: inline;
    vertical-align: center;
}
img:only-child,
picture > img,
picture > img:first-child,
picture > img:last-child {
    margin: 0;
}
* + img {
    margin-top: calc(var(--baseline) * -1);
}
img.cover,
img.fill {
    -o-object-fit: cover;
    object-fit: cover;
}
r-grid > r-cell > img,
r-grid > r-cell > p > img,
r-grid > r-cell > p > picture > img,
r-grid > r-cell > picture > img {
    -o-object-fit: contain;
    object-fit: contain;
    max-width: 100%;
}
code,
pre,
tt {
    word-break: break-word;
    white-space: pre-wrap;
}
.code b,
.monospace b,
b .code,
b .monospace,
b code,
b pre,
b tt,
code b,
pre b,
tt b {
    font-weight: 600;
}
code,
tt {
    background-color: rgba(var(--foreground-color-rgb), 0.07);
    border-radius: 3px;
    padding: calc(var(--unit) * 0.25) 0;
}
code:after,
code:before,
tt:after,
tt:before {
    letter-spacing: -0.2em;
    content: "\00a0";
}
pre code,
pre tt {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}
pre code:after,
pre code:before,
pre tt:after,
pre tt:before {
    letter-spacing: inherit;
    content: none;
}
pre {
    white-space: pre;
    word-wrap: normal;
    overflow-x: auto;
    display: block;
    font-size: 0.95rem;
    line-height: 1.4;
}
@media (max-width: 640px) {
    pre {
        font-size: 0.85rem;
    }
}
pre code,
pre tt {
    white-space: pre;
    word-wrap: normal;
}
table {
    --border-width: 1px;
    --border-opacity: 0.15;
    --border-color: rgba(
        var(--foreground-color-rgb),
        calc(var(--foreground-color-a) * var(--border-opacity))
    );
    overflow: auto;
    border-spacing: 0;
    border-collapse: collapse;
    border-top: var(--border-width) solid var(--border-color);
    border-right: var(--border-width) solid var(--border-color);
    position: relative;
    margin-top: calc(var(--line-height) * 1 + var(--border-width) * -1);
    margin-bottom: calc(var(--line-height) * 1.5);
}
table:first-child {
    margin-top: calc(var(--line-height) * 0.5 + var(--border-width) * -1);
    margin-bottom: calc(var(--line-height) * 0.5);
}
table * {
    box-sizing: border-box;
}
table td,
table th {
    position: relative;
    padding: var(--baseline) 1em;
    background-image: linear-gradient(
        90deg,
        var(--border-color),
        var(--border-color) 1px,
        transparent 0,
        transparent calc(var(--baseline) / 2)
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 -1px;
}
table td:after,
table th:after {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: var(--border-width);
    background: var(--border-color);
    content: "A";
    color: transparent;
    pointer-events: none;
}
table th {
    text-align: left;
    font-weight: 600;
}
table th[align="center"] {
    text-align: center;
}
table th[align="right"] {
    text-align: right;
}
p + table {
    margin-top: calc(var(--line-height) * 1.5 + var(--border-width) * -1);
}
@media (max-width: 640px) {
    r-grid {
        --row-gap: calc(var(--unit) * 6);
    }
}
[flow-cols-l],
[flow-cols-s],
[flow-cols] {
    display: block;
    -moz-column-count: 3;
    column-count: 3;
    -moz-column-gap: var(--column-gap);
    column-gap: var(--column-gap);
    -moz-column-fill: balance;
    column-fill: balance;
    orphans: 3;
    widows: 3;
}
[flow-cols-l] > h1,
[flow-cols-l] > h2,
[flow-cols-l] > hr,
[flow-cols-s] > h1,
[flow-cols-s] > h2,
[flow-cols-s] > hr,
[flow-cols] > h1,
[flow-cols] > h2,
[flow-cols] > hr {
    -moz-column-span: all;
    column-span: all;
}
[flow-cols="1"] {
    -moz-column-count: 1;
    column-count: 1;
}
[flow-cols="2"] {
    -moz-column-count: 2;
    column-count: 2;
}
[flow-cols="3"] {
    -moz-column-count: 3;
    column-count: 3;
}
[flow-cols="4"] {
    -moz-column-count: 4;
    column-count: 4;
}
[flow-cols="5"] {
    -moz-column-count: 5;
    column-count: 5;
}
[flow-cols="6"] {
    -moz-column-count: 6;
    column-count: 6;
}
[flow-cols="7"] {
    -moz-column-count: 7;
    column-count: 7;
}
[flow-cols="8"] {
    -moz-column-count: 8;
    column-count: 8;
}
@media (max-width: 1024px) {
    [flow-cols-s="1"] {
        -moz-column-count: 1;
        column-count: 1;
    }
    [flow-cols-s="2"] {
        -moz-column-count: 2;
        column-count: 2;
    }
    [flow-cols-s="3"] {
        -moz-column-count: 3;
        column-count: 3;
    }
    [flow-cols-s="4"] {
        -moz-column-count: 4;
        column-count: 4;
    }
    [flow-cols-s="5"] {
        -moz-column-count: 5;
        column-count: 5;
    }
    [flow-cols-s="6"] {
        -moz-column-count: 6;
        column-count: 6;
    }
    [flow-cols-s="7"] {
        -moz-column-count: 7;
        column-count: 7;
    }
    [flow-cols-s="8"] {
        -moz-column-count: 8;
        column-count: 8;
    }
}
@media (max-width: 640px) {
    [flow-cols-xs="1"] {
        -moz-column-count: 1;
        column-count: 1;
    }
    [flow-cols-xs="2"] {
        -moz-column-count: 2;
        column-count: 2;
    }
    [flow-cols-xs="3"] {
        -moz-column-count: 3;
        column-count: 3;
    }
    [flow-cols-xs="4"] {
        -moz-column-count: 4;
        column-count: 4;
    }
    [flow-cols-xs="5"] {
        -moz-column-count: 5;
        column-count: 5;
    }
    [flow-cols-xs="6"] {
        -moz-column-count: 6;
        column-count: 6;
    }
    [flow-cols-xs="7"] {
        -moz-column-count: 7;
        column-count: 7;
    }
    [flow-cols-xs="8"] {
        -moz-column-count: 8;
        column-count: 8;
    }
}
r-grid.main h1 {
    height: calc(var(--line-height) * 4);
    margin-top: calc(var(--unit) * 22);
}
@media (max-width: 640px) {
    r-grid.main h1 {
        margin-top: calc(var(--unit) * 8);
    }
}
r-grid.main .menu {
    height: calc(var(--unit) * 43);
    padding-top: calc(var(--unit) * 8);
}
@media (max-width: 640px) {
    r-grid.main .menu {
        padding-top: 0;
        height: calc(var(--unit) * 30);
    }
}
r-grid.main .menu > div {
    margin: 0;
    padding: 0;
    color: var(--menu-inactive-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: calc(var(--unit) * 0.75);
    margin-top: calc(var(--unit) * 14);
}
r-grid.main .menu > div.focus0 a:first-child {
    color: var(--menu-active-color);
}
r-grid.main .menu > div.focus1 {
    margin-top: calc(var(--unit) * 10);
}
r-grid.main .menu > div.focus1 a:nth-child(2) {
    color: var(--menu-active-color);
}
r-grid.main .menu > div.focus2 {
    margin-top: calc(var(--unit) * 6);
}
r-grid.main .menu > div.focus2 a:nth-child(3) {
    color: var(--menu-active-color);
}
r-grid.main .menu > div.focus3 {
    margin-top: calc(var(--unit) * 2);
}
r-grid.main .menu > div.focus3 a:nth-child(4) {
    color: var(--menu-active-color);
}
r-grid.main .menu > div.focus4 {
    margin-top: calc(var(--unit) * -2);
}
r-grid.main .menu > div.focus4 a:nth-child(5) {
    color: var(--menu-active-color);
}
r-grid.main .menu > div.focus5 {
    margin-top: calc(var(--unit) * -6);
}
r-grid.main .menu > div.focus5 a:nth-child(6) {
    color: var(--menu-active-color);
}
@media (max-width: 640px) {
    r-grid.main .menu > div.focus0,
    r-grid.main .menu > div.focus1,
    r-grid.main .menu > div.focus2,
    r-grid.main .menu > div.focus3,
    r-grid.main .menu > div.focus4,
    r-grid.main .menu > div.focus5 {
        margin-top: 0;
    }
}
r-grid.main .menu > div a {
    font-family: var(--titleFont);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0.01em;
    color: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    flex: 0 0 auto;
}
r-grid.main .menu > div a:first-child {
    font-size: 2em;
    padding-bottom: calc(var(--unit) * 0.25);
    margin-top: calc(var(--unit) * -0.25);
}
r-grid.main .menu > div a:hover {
    color: var(--menu-active-color);
}
@media (max-width: 640px) {
    r-grid.main {
        padding-top: calc(var(--unit) * 2);
    }
}
r-grid.main iframe {
    border: none;
}
r-grid.main img {
    max-width: 100%;
}
r-grid.main [align="right"] {
    margin: 0 0 calc(var(--unit) * 2) calc(var(--unit) * 3);
}
r-grid.main [align="left"] {
    margin: 0 calc(var(--unit) * 3) calc(var(--unit) * 2) 0;
}
@media (prefers-color-scheme: dark) {
    :root.allow-dark-mode,
    :root.home {
        --background-color: #f1f1e0;
        --foreground-color-rgb: #273502;
        --menu-inactive-color: rgba(var(--foreground-color-rgb), 0.3);
        --box-link-hover-color: #273502;
        --letterbox-color: #273502;
        --accent-color: var(--accent-color-darkmode);
        --menu-inactive-color: rgba(var(--foreground-color-rgb), 0.6);
        color: var(--foreground-color-rgb);
    }
}
:root.allow-dark-mode .menu a:first-child,
:root.home .menu a:first-child {
    color: var(--primary) !important;
}
@media (max-width: 640px) {
    :root.allow-dark-mode .intro,
    :root.home .intro {
        padding-bottom: calc(var(--unit) * 4);
        border-bottom: 0.15rem solid var(--foreground-color);
    }
}
:root.allow-dark-mode .intro > p,
:root.home .intro > p {
    font-family: var(--titleFont);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0.01em;
}
:root.allow-dark-mode .intro .quick-links,
:root.home .intro .quick-links {
    margin-top: calc(var(--unit) * 6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
:root.allow-dark-mode .intro .quick-links a,
:root.home .intro .quick-links a {
    font-size: inherit;
    font-weight: 600;
    display: block;
    padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
    background: #273502;
    margin-bottom: calc(var(--unit) * 2);
    color: #f1f1e0;
    border-radius: 2px;
    word-break: break-word;
}
:root.allow-dark-mode .intro .quick-links a:hover,
:root.home .intro .quick-links a:hover {
    text-decoration: none;
    background: var(--primary);
    color: #fff;
}
@media (prefers-color-scheme: dark) {
    :root.archive {
        --background-color: #333;
        --foreground-color-rgb: 255, 255, 255;
        --menu-inactive-color: rgba(var(--foreground-color-rgb), 0.3);
        --box-link-hover-color: #000;
        --letterbox-color: #111;
        --accent-color: var(--accent-color-darkmode);
    }
}
:root.archive r-grid.main {
    grid-row-gap: calc(var(--unit) * 3);
}
:root.archive r-grid.main hr.section {
    margin-top: calc(var(--unit) * 4);
}
:root.archive r-grid.main .post,
:root.archive r-grid.main .year {
    margin-bottom: calc(var(--unit) * 2);
}
:root.archive r-grid.main .post .excerpt {
    word-break: break-word;
}
@media (prefers-color-scheme: dark) {
    :root.post {
        --background-color: #333;
        --foreground-color-rgb: 255, 255, 255;
        --menu-inactive-color: rgba(var(--foreground-color-rgb), 0.3);
        --box-link-hover-color: #000;
        --letterbox-color: #111;
        --accent-color: var(--accent-color-darkmode);
    }
}
:root.post r-grid.main {
    margin-top: calc(var(--unit) * 6);
}
:root.post r-grid.main time {
    font-weight: 500;
}
:root.post r-grid.main .home {
    font-weight: 500;
    opacity: 0.4;
    color: inherit;
}
:root.post r-grid.main .home:hover {
    opacity: 1;
    color: inherit;
    text-decoration: none;
}
:root.post r-grid.main h1 {
    margin-top: calc(var(--unit) * 5);
}
r-grid.main.simple {
    margin-top: calc(var(--unit) * 6);
}
r-grid.main.simple .home {
    font-weight: 500;
    opacity: 0.4;
    color: inherit;
}
r-grid.main.simple .home:hover {
    opacity: 1;
    color: inherit;
    text-decoration: none;
}
r-grid.main.simple h1 {
    margin-top: calc(var(--unit) * -1);
}
:root.about {
    --menu-inactive-color: #008696;
    --box-link-hover-color: #ffffff;
    --background-color: #d6e7e9;
    --accent-color: #008696;
}
:root.about .intro {
    font-family: var(--titleFont);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0.01em;
}
@media (max-width: 640px) {
    :root.about .bio {
        padding-bottom: calc(var(--unit) * 4);
        border-bottom: 0.15rem solid var(--foreground-color);
    }
}
:root.about .bio > img {
    margin-top: calc(var(--unit) * 0.5);
    border-radius: calc(var(--unit) * 0.25);
}
:root.about .bio .link-list {
    font-family: var(--titleFont);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0.01em;
    margin-top: calc(var(--unit) * 6);
}
:root.about .bio .link-list a {
    display: block;
    color: inherit;
}
:root.about .tidbit {
    border-top: var(--hr-weight) solid #000;
    padding-top: calc(var(--unit) * 5);
}
:root.about .tidbit p {
    font-weight: 440;
}
:root.about .tidbit p code,
:root.about .tidbit p pre,
:root.about .tidbit p tt {
    font-weight: 400;
}
:root.projects {
    --menu-inactive-color: #4a0087;
    --box-link-hover-color: #ffffff;
    --background-color: #d5cdef;
    --accent-color: #4a0087;
}
:root.projects p {
    opacity: 0.5;
}
:root.projects .project {
    border-radius: 2px;
}
:root.projects .project .image {
    display: block;
    margin-top: calc(var(--unit) * 1.5);
    margin-bottom: calc(var(--unit) * 1.5);
    border: calc(var(--unit) * 1) solid #fff;
    box-sizing: border-box;
    border-radius: calc(var(--unit) * 0.25);
    background: #fff;
}
:root.projects .project .image img {
    height: calc(var(--unit) * 16);
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0.5;
    filter: grayscale(1);
}
:root.projects .project .image img:hover {
    opacity: 1;
    filter: none;
}
:root.research {
    --background-color: var(--brown);
    --foreground-color-rgb: 255, 255, 255;
    --menu-inactive-color: rgba(0, 0, 0, 0.5);
    --box-link-hover-color: #fff;
    --accent-color: var(--orange);
    --letterbox-color: #222;
}
:root.research body {
    padding-bottom: 0;
}
:root.research r-grid.main {
    margin-bottom: 0;
}
:root.research r-grid.main .menu {
    height: calc(var(--unit) * 35);
}
:root.research .intro {
    font-weight: 440;
    padding-bottom: calc(var(--unit) * 6);
}
:root.research .contrib-list {
    --foreground-color: rgb(var(--foreground-color-rgb));
    --background-color: #206492;
    --font-size: 3.33333vw;
    --accent-color: var(--foreground-color);
    --box-link-hover-color: var(--accent-color);
    background-color: var(--background-color);
    --shadow-x: calc(var(--body-padding-x) + var(--body-bleed));
    box-shadow: var(--shadow-x) 0 0 0 var(--background-color),
        calc(var(--shadow-x) * -1) 0 0 0 var(--background-color);
    font-family: var(--titleFont);
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.5rem;
    font-size: var(--font-size);
    line-height: 1.2;
    color: var(--foreground-color);
}
@media (min-width: 1215px) {
    :root.research .contrib-list {
        --font-size: 2.5rem;
    }
}
@media (max-width: 640px) {
    :root.research .contrib-list {
        --font-size: 5vw;
    }
}
:root.research .contrib-list ::-moz-selection {
    background: #c6dded;
}
:root.research .contrib-list ::selection {
    background: #c6dded;
}
:root.research .contrib-list r-grid {
    --row-gap: var(--font-size);
    padding-bottom: calc(var(--font-size) * 4);
}
:root.research .contrib-list r-grid p {
    color: inherit;
}
:root.research .contrib-list r-grid p a:hover {
    color: #000;
    text-decoration: none;
}
@media (hover: none) {
    :root.research .contrib-list r-grid p a,
    :root.research .contrib-list r-grid p a:hover {
        text-decoration: underline;
        -webkit-text-decoration-color: var(--red);
        text-decoration-color: var(--red);
    }
}
:root.research .contrib-list h2 {
    font-family: var(--titleFont);
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.5rem;
    font-size: inherit;
    color: #fff;
    margin-top: calc(var(--unit) * 16);
    margin-bottom: calc(var(--unit) * 12);
}
:root.research .contrib-list h2 a:hover {
    color: #000;
}
:root.researchpage r-grid.main .aside {
    color: var(--foreground-color-dimmed);
    margin-top: calc(var(--line-height) * 2.1);
}
:root.researchpage r-grid.main .aside h3 a:hover {
    background-color: var(--orange);
    color: #000;
}
:root.researchpage r-grid.main .aside a {
    color: inherit;
}
:root.researchpage r-grid.main .aside a:hover {
    color: var(--foreground-color);
    text-decoration: none;
}
:root.researchpage r-grid.main .aside .pagelist {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
    margin-top: calc(var(--line-height) * 1.9 - var(--h3-margin-bottom));
}
@media (max-width: 1024px) {
    :root.researchpage r-grid.main .aside .pagelist {
        display: none;
    }
}
:root.researchpage r-grid.main .aside .pagelist li {
    padding: 0;
    margin: 0;
}
:root.researchpage r-grid.main .aside .pagelist li.current {
    --icon-offset: 1.5em;
    display: flex;
    margin-left: calc(var(--icon-offset) * -1);
}
:root.researchpage r-grid.main .aside .pagelist li.current:before {
    display: inline-block;
    margin: 0;
    content: "→";
    width: var(--icon-offset);
}
:root.researchpage r-grid.main h1 {
    margin-top: calc(var(--line-height) * 2);
    margin-bottom: 0;
}
@media (max-width: 1024px) {
    :root.researchpage r-grid.main h1 {
        margin-top: 0;
    }
}
:root.researchpage r-grid.main .body {
    grid-column-start: 2;
    grid-column-end: span 4;
}
@media (max-width: 1024px) {
    :root.researchpage r-grid.main .body {
        grid-column: 1/-1;
    }
}
:root.researchpage r-grid.main .body r-grid.compact {
    --fontSize: 13px;
    --line-height: calc(var(--fontSize) * 1.4);
    --blockSpacingBottom: var(--line-height);
    font-size: var(--fontSize);
    line-height: var(--line-height);
    letter-spacing: 0;
    margin-bottom: calc(var(--blockSpacingBottom) * 2);
}
:root.researchpage r-grid.main .body r-grid.compact h2 {
    font-size: 1.5em;
    font-weight: 600;
}
:root.researchpage r-grid.main .body r-grid.compact h3 {
    letter-spacing: 0;
}
:root.researchpage r-grid.main .body r-grid.compact small {
    font-size: 11px;
}
:root.researchpage r-grid.main .body small {
    color: var(--foreground-color-dimmed);
    display: block;
}
:root.researchpage r-grid.main .body small:first-child {
    margin-top: calc(var(--line-height) * -1);
    margin-bottom: var(--blockSpacingBottom);
}
:root.researchpage r-grid.main > img,
:root.researchpage r-grid.main > picture {
    grid-column: 1/-1;
    --margin-y: calc(var(--row-gap) * -1 + var(--line-height) * 1);
    margin-top: var(--margin-y);
    margin-bottom: var(--margin-y);
    width: 100%;
}
:root.photos {
    --background-color: #fff;
}
@media (prefers-color-scheme: dark) {
    :root.photos {
        --background-color: #333;
        --foreground-color-rgb: 255, 255, 255;
        --menu-inactive-color: rgba(var(--foreground-color-rgb), 0.3);
        --box-link-hover-color: #000;
        --letterbox-color: #111;
        --accent-color: var(--accent-color-darkmode);
    }
}
:root.photos body {
    padding-bottom: 0;
}
:root.photos r-grid.main {
    margin-bottom: 0;
}
:root.photos r-grid.main .menu {
    height: calc(var(--unit) * 35);
}
:root.photos .intro {
    font-weight: 440;
}
:root.photos .gallery {
    background-color: var(--background-color);
    --shadow-x: calc(var(--body-padding-x) + var(--body-bleed));
    box-shadow: var(--shadow-x) 0 0 0 var(--background-color),
        calc(var(--shadow-x) * -1) 0 0 0 var(--background-color);
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: calc(var(--body-padding-y) * 2);
}
.tiles {
    --minTileWidth: 320px;
    --aspectRatio: 1/1;
    --fontSizeS: 11px;
    --fontSizeM: 13px;
    --fontSizeL: 14px;
    --borderWidth: 1px;
    --borderOpacity: 0.2;
    --avatarSize: 24px;
    --metaHeightBase: 24px;
    --metaHeightExtra: 24px;
    --propertiesBarHeight: 72px;
    --row-gap: calc(var(--unit) * 4);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--minTileWidth), 1fr));
    grid-gap: var(--column-gap);
    grid-row-gap: var(--row-gap);
}
.tiles .tile {
    position: relative;
    font-size: var(--fontSizeS);
    display: flex;
    flex-direction: column;
}
.tiles .tile:hover {
    text-decoration: none;
}
.tiles .tile * {
    cursor: default;
}
.tiles .tile:before {
    content: "";
    opacity: 0;
    display: block;
    height: 0;
    width: 0;
    margin-bottom: calc(var(--aspectRatio) * 100% - var(--row-gap) / 2);
}
.tiles .tile .filler {
    flex: 1 1 auto;
    visibility: hidden;
}
.tiles .tile .art,
.tiles .tile .filler {
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}
.tiles .tile .art {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.tiles .tile:focus {
    outline: none;
    box-shadow: 0 0 0 4px #fff;
}
.tiles .tile:focus .art {
    box-shadow: inset 0 0 0 4px var(--background-color);
}
:root.notfound404 {
    --background-color: var(--ocean-green);
    --foreground-color-rgb: 255, 255, 255;
    --menu-inactive-color: rgba(0, 0, 0, 0.5);
    --box-link-hover-color: #000;
    --accent-color: var(--orange);
    background-color: initial;
}
:root.notfound404 r-grid r-cell:first-child {
    color: #fff;
}
:root.notfound404 h1 {
    --font-size: 50vw;
    font-size: var(--font-size);
    font-weight: 400;
    font-feature-settings: "cv02" on;
    margin: 0;
    padding: 0;
    line-height: 0.7;
    text-align: center;
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--primary);
    mix-blend-mode: multiply;
    z-index: 2;
    margin-top: calc(var(--line-height) * 2);
}