@charset "UTF-8";
:root {
  --🎹-length-0aug: 0.75rem;
  --🎹-length-0½: 0.75rem;
  --🎹-length-1dim: 0.75rem;
  --🎹-length-1: 1.5rem;
  --🎹-length-1aug: 2.25rem;
  --🎹-length-1½: 2.25rem;
  --🎹-length-2dim: 2.25rem;
  --🎹-length-2: 3rem;
  --🎹-length-2aug: 3.75rem;
  --🎹-length-2½: 3.75rem;
  --🎹-length-3dim: 3.75rem;
  --🎹-length-3: 4.5rem;
  --🎹-length-3aug: 5.25rem;
  --🎹-length-3½: 5.25rem;
  --🎹-length-4dim: 5.25rem;
  --🎹-length-4: 6rem;
  --🎹-length-4aug: 6.75rem;
  --🎹-length-4½: 6.75rem;
  --🎹-length-5dim: 6.75rem;
  --🎹-length-5: 7.5rem;
  --🎹-length-5aug: 8.25rem;
  --🎹-length-5½: 8.25rem;
  --🎹-length-6dim: 8.25rem;
  --🎹-length-6: 9rem;
  --🎹-length-6aug: 9.75rem;
  --🎹-length-6½: 9.75rem;
  --🎹-length-7dim: 9.75rem;
  --🎹-length-7: 10.5rem;
  --🎹-length-7aug: 11.25rem;
  --🎹-length-7½: 11.25rem;
  --🎹-length-8dim: 11.25rem;
  --🎹-length-8: 12rem;
  --🎹-length-8aug: 12.75rem;
  --🎹-length-8½: 12.75rem;
  --🎹-length-9dim: 12.75rem;
  --🎹-length-9: 13.5rem;
  --🎹-length-9aug: 14.25rem;
  --🎹-length-9½: 14.25rem;
  --🎹-length-10dim: 14.25rem;
  --🎹-length-10: 15rem;
  --🎹-length-10aug: 15.75rem;
  --🎹-length-10½: 15.75rem;
  --🎹-length-11dim: 15.75rem;
  --🎹-length-11: 16.5rem;
  --🎹-length-11aug: 17.25rem;
  --🎹-length-11½: 17.25rem;
  --🎹-length-12dim: 17.25rem;
  --🎹-length-12: 18rem;
  --🎹-length-slope-height: var(--🎹-length-2);
}

:root {
  --🎹-container-xxs: 0rem;
  --🎹-container-xs: 16rem;
  --🎹-container-sm: 32rem;
  --🎹-container-md: 48rem;
  --🎹-container-lg: 64rem;
  --🎹-container-xl: 80rem;
  --🎹-container-xxl: 96rem;
  --🎹-container-nav-wide: var(--🎹-container-sm);
  --🎹-container-page: var(--🎹-container-xl);
}

:root {
  --🎹-spacing-block-xxs: 0.1875rem;
  --🎹-spacing-block-xs: 0.375rem;
  --🎹-spacing-block-sm: 0.75rem;
  --🎹-spacing-block-md: 1.5rem;
  --🎹-spacing-block-lg: 3rem;
  --🎹-spacing-block-xl: 6rem;
  --🎹-spacing-block-xxl: 12rem;
  --🎹-spacing-block-default: var(--🎹-spacing-block-md);
  --🎹-spacing-block: var(--🎹-spacing-block-default);
}

:root {
  --🎹-spacing-inline-xxs: 0.25ch;
  --🎹-spacing-inline-xs: 0.5ch;
  --🎹-spacing-inline-sm: 1ch;
  --🎹-spacing-inline-md: 2ch;
  --🎹-spacing-inline-lg: 4ch;
  --🎹-spacing-inline-xl: 8ch;
  --🎹-spacing-inline-xxl: 16ch;
  --🎹-spacing-inline-default: var(--🎹-spacing-inline-md);
  --🎹-spacing-inline: var(--🎹-spacing-inline-default);
}

:root {
  --🎹-spacing-flow-list: 0em;
  --🎹-spacing-flow-sectioning: clamp(var(--🎹-spacing-block-md), (100vi - var(--🎹-container-sm)) / 4, var(--🎹-spacing-block-lg));
  --🎹-spacing-flow-default: var(--🎹-spacing-block-sm);
  --🎹-spacing-flow-heading: var(--🎹-spacing-block-md);
  --🎹-spacing-flow-deflist: var(--🎹-spacing-block-sm);
  --🎹-spacing-flow-sectioning: var(--🎹-spacing-block-md);
  --🎹-spacing-flow-sectioning-wide: var(--🎹-spacing-block-xl);
  --🎹-spacing-flow: var(--🎹-spacing-flow-default);
}

:root {
  --🎹-spacing-wrap-default: var(--🎹-spacing-flow-default) var(--🎹-spacing-inline-default);
  --🎹-spacing-wrap-sectioning: var(--🎹-spacing-flow-sectioning) var(--🎹-spacing-inline-lg);
  --🎹-spacing-wrap: var(--🎹-spacing-wrap-default);
}

:root {
  --🎹-spacing-indent-default: var(--🎹-spacing-inline-default);
  --🎹-spacing-indent-list-root: var(--🎹-spacing-inline-default);
  --🎹-spacing-indent: var(--🎹-spacing-indent-default);
}

:root {
  --🎹-spacing-box-input: var(--🎹-spacing-block-xs);
}

:root {
  --🎹-font-family-sans: canada-type-gibson, Futura, sans-serif;
  --🎹-font-family-serif: Rasa Variable, Georgia, serif;
  --🎹-font-family-mono: Monaco, monospace;
  --🎹-font-family-body: var(--🎹-font-family-serif);
  --🎹-font-family-heading: var(--🎹-font-family-sans);
  --🎹-font-family-display: var(--🎹-font-family-body);
  --🎹-font-family-nav: var(--🎹-font-family-sans);
  --🎹-font-family-input: var(--🎹-font-family-sans);
}

:root {
  --🎹-font-size--2: 0.6299605249rem;
  --🎹-font-size--1: 0.793700526rem;
  --🎹-font-size-0: 1rem;
  --🎹-font-size-1: 1.2599210499rem;
  --🎹-font-size-2: 1.587401052rem;
  --🎹-font-size-3: 2rem;
  --🎹-font-size-4: 2.5198420998rem;
  --🎹-font-size-5: 3.1748021039rem;
  --🎹-font-size-6: 4rem;
  --🎹-font-size-7: 5.0396841996rem;
  --🎹-font-size-8: 6.3496042079rem;
  --🎹-font-size-9: 8rem;
  --🎹-font-size-ratio: 1.2599210499;
  --🎹-font-size-smaller: 79.3700525984%;
  --🎹-font-size-larger: 125.9921049895%;
  --🎹-font-size-root: clamp(0.96875rem, 0.9375rem + 0.1953125vw, 1.25rem);
}

:root {
  --🎹-font-weight-light: 300;
  --🎹-font-weight-regular: 400;
  --🎹-font-weight-medium: 600;
  --🎹-font-weight-body: var(--🎹-font-weight-light);
  --🎹-font-weight-emphasis: var(--🎹-font-weight-medium);
  --🎹-font-weight-heading: var(--🎹-font-weight-regular);
  --🎹-font-weight-input: var(--🎹-font-weight-regular);
}

:root {
  --🎹-letter-spacing-xxs: -0.075em;
  --🎹-letter-spacing-xs: -0.05em;
  --🎹-letter-spacing-sm: -0.025em;
  --🎹-letter-spacing-md: 0em;
  --🎹-letter-spacing-lg: 0.025em;
  --🎹-letter-spacing-xl: 0.05em;
  --🎹-letter-spacing-xxl: 0.075em;
  --🎹-letter-spacing-none: var(--🎹-letter-spacing-md);
}

:root {
  --🎹-measure-xxs: 25ch;
  --🎹-measure-xs: 36ch;
  --🎹-measure-sm: 49ch;
  --🎹-measure-md: 64ch;
  --🎹-measure-lg: 81ch;
  --🎹-measure-xl: 100ch;
  --🎹-measure-xxl: 121ch;
  --🎹-measure-xxxs: 16ch;
  --🎹-measure-xxxl: 144ch;
  --🎹-measure-full: 100%;
  --🎹-measure-inf: unset;
  --🎹-measure-default: var(--🎹-measure-md);
  --🎹-measure: var(--🎹-measure-default);
}

:root {
  --🎹-radius-xxs: 0.05rem;
  --🎹-radius-xs: 0.2rem;
  --🎹-radius-sm: 0.35rem;
  --🎹-radius-md: 0.5rem;
  --🎹-radius-lg: 0.65rem;
  --🎹-radius-xl: 0.8rem;
  --🎹-radius-xxl: 0.95rem;
  --🎹-radius-ellipse: 100%;
  --🎹-radius-obround: 999rem;
  --🎹-radius-default: var(--🎹-radius-xs);
  --🎹-radius-button: var(--🎹-radius-xs);
  --🎹-radius-form: var(--🎹-radius-xxs);
  --🎹-radius-input: var(--🎹-radius-xxs);
  --🎹-radius: var(--🎹-radius-default);
}

:root {
  --🎹-shadow-xxs: 0rem 0.0234375rem 0.046875rem rgb(var(--color-shadow) / 0.203125);
  --🎹-shadow-xs: 0rem 0.046875rem 0.09375rem rgb(var(--color-shadow) / 0.21875);
  --🎹-shadow-sm: 0rem 0.09375rem 0.1875rem rgb(var(--color-shadow) / 0.234375);
  --🎹-shadow-md: 0rem 0.1875rem 0.375rem rgb(var(--color-shadow) / 0.25);
  --🎹-shadow-lg: 0rem 0.375rem 0.75rem rgb(var(--color-shadow) / 0.265625);
  --🎹-shadow-xl: 0rem 0.75rem 1.5rem rgb(var(--color-shadow) / 0.28125);
  --🎹-shadow-xxl: 0rem 1.5rem 3rem rgb(var(--color-shadow) / 0.296875);
  --🎹-shadow-all-in: var(--🎹-shadow-xxl), var(--🎹-shadow-xl), var(--🎹-shadow-lg), var(--🎹-shadow-md), var(--🎹-shadow-sm), var(--🎹-shadow-xs);
  --🎹-shadow-page-container: 0rem 0.75rem 0.75rem rgb(var(--color-shadow) / 0.25);
  --🎹-shadow-backdrop: 0 0 3rem 3rem var(--🎹-color-backdrop);
  --🎹-shadow-form: var(--🎹-shadow-xs);
}

:root {
  --🎹-stroke-width-1: 0.0625rem;
  --🎹-stroke-width-2: 0.125rem;
  --🎹-stroke-width-3: 0.1875rem;
  --🎹-stroke-width-4: 0.25rem;
  --🎹-stroke-width-5: 0.3125rem;
  --🎹-stroke-width-6: 0.375rem;
  --🎹-stroke-width-7: 0.4375rem;
  --🎹-stroke-width-8: 0.5rem;
  --🎹-stroke-width-form: 0;
  --🎹-stroke-width-input: 0;
  --🎹-stroke-width-default: var(--🎹-stroke-width-1);
  --🎹-stroke-width-button: var(--🎹-stroke-width-1);
  --🎹-stroke-width: var(--🎹-stroke-width-default);
}

:root {
  --🎹-stroke-style-default: solid;
  --🎹-stroke-style-button: solid;
  --🎹-stroke-style: var(--🎹-stroke-style-default);
}

:root {
  --🎹-stroke-color-default: var(--🎹-color-neutral);
  --🎹-stroke-color-blockquote: var(--🎹-color-blue-1);
  --🎹-stroke-color: var(--🎹-stroke-color-default);
}

:root {
  --🎹-easing-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --🎹-easing-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --🎹-easing-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --🎹-easing-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --🎹-easing-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --🎹-easing-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --🎹-easing-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --🎹-easing-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --🎹-easing-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --🎹-easing-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --🎹-easing-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --🎹-easing-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --🎹-easing-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --🎹-easing-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --🎹-easing-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --🎹-easing-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --🎹-easing-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --🎹-easing-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --🎹-easing-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --🎹-easing-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --🎹-easing-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --🎹-easing-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --🎹-easing-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --🎹-easing-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --🎹-easing-default: ease-in-out;
  --🎹-easing: var(--🎹-easing-default);
}

:root {
  --🎹-clip-path-sec-slope-start: polygon(-1px 0, 101% var(--🎹-length-slope-height), 101% 100%, -1px 100%);
  --🎹-clip-path-sec-slope-end: polygon(-1px -1px, 101% -1px, 101% 100%, -1px calc(100% - var(--🎹-length-slope-height)));
  --🎹-clip-path-menubar-slope: polygon(-1px -1px, 100% -1px, calc(100% - 0.54rem) 101%, -1px 101%);
}

:root {
  --🎹-color-grey-0: #fff;
  --🎹-color-grey-1: rgb(249, 250, 252);
  --🎹-color-grey-2: rgb(206, 212, 218);
  --🎹-color-grey-3: rgb(116, 124, 130);
  --🎹-color-grey-4: rgb(74, 77, 80);
  --🎹-color-grey-5: rgb(56, 61, 64);
  --🎹-color-grey-6: rgb(41, 41, 45);
  --🎹-color-grey-7: rgb(19, 18, 15);
  --🎹-color-red-1: rgb(254, 230, 230);
  --🎹-color-red-2: rgb(233, 143, 147);
  --🎹-color-yellow-1: rgb(255, 239, 202);
  --🎹-color-yellow-2: rgb(255, 230, 177);
  --🎹-color-yellow-green-1: rgb(228, 244, 193);
  --🎹-color-yellow-green-2: rgb(165, 207, 76);
  --🎹-color-yellow-green-3: rgb(158, 180, 67);
  --🎹-color-yellow-green-4: rgb(140, 167, 28);
  --🎹-color-green-1: rgb(67, 154, 103);
  --🎹-color-green-2: rgb(60, 123, 87);
  --🎹-color-green-3: rgb(43, 102, 66);
  --🎹-color-green-4: rgb(10, 72, 35);
  --🎹-color-blue-1: rgb(64, 95, 126);
  --🎹-color-pink-1: rgb(224, 59, 118);
  --🎹-color-backdrop: rgb(var(--color-shadow) / 0.2);
  --🎹-color-body: var(--🎹-color-grey-6);
  --🎹-color-body-contra: var(--🎹-color-grey-2);
  --🎹-color-alternate: var(--🎹-color-grey-5);
  --🎹-color-alternate-contra: var(--🎹-color-grey-1);
  --🎹-color-env: var(--🎹-color-body-contra);
  --🎹-color-env-contra: var(--🎹-color-body);
  --🎹-color-header: var(--🎹-color-grey-0);
  --🎹-color-header-contra: var(--🎹-color-green-2);
  --🎹-color-nav: var(--🎹-color-grey-4);
  --🎹-color-nav-contra: var(--🎹-color-grey-0);
  --🎹-color-form: var(--🎹-color-grey-1);
  --🎹-color-form-contra: var(--🎹-color-green-1);
  --🎹-color-input: var(--🎹-color-grey-2);
  --🎹-color-input-contra: var(--🎹-color-green-4);
  --🎹-color-button: var(--🎹-color-grey-0);
  --🎹-color-button-contra: var(--🎹-color-green-1);
  --🎹-color-button-alternate: var(--🎹-color-grey-1);
  --🎹-color-button-alternate-contra: var(--🎹-color-green-2);
  --🎹-color-neutral: var(--🎹-color-grey-3);
  --🎹-color-hr: var(--🎹-color-neutral);
}

:root {
  --🎹-line-root: 1.5;
  --🎹-line-root-abs: 1.5rem;
  --🎹-line--2: 0.75rem;
  --🎹-line--1: 1.5rem;
  --🎹-line-0: 1.5rem;
  --🎹-line-1: 1.5rem;
  --🎹-line-2: 2.25rem;
  --🎹-line-3: 2.25rem;
  --🎹-line-4: 3rem;
  --🎹-line-5: 3.75rem;
  --🎹-line-6: 4.5rem;
  --🎹-line-7: 5.25rem;
  --🎹-line-8: 6.75rem;
  --🎹-line-9: 8.25rem;
}

* {
  margin: unset;
  padding: unset;
  border: unset;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:target {
  scroll-margin-block-start: var(--🎹-length-3);
}

* {
  ---clr-fg: var(---clr-pos);
  ---clr-bg: var(---clr-neg);
}

:is(img, picture, video, audio, embed, iframe, object, svg, canvas) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}
:is(h1, h2, h3, h4, h5, h6, p) :is(img, picture, video, audio, embed, iframe, object, svg, canvas) {
  display: inline;
  max-block-size: 1em;
}

audio,
iframe:not([width]) {
  inline-size: 100%;
}

:is(h1, h2, h3, h4, h5, h6, p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, search, table, details, div) {
  ---flow-space: var(--🎹-spacing-flow-default);
}

:is(article, section, nav, aside) {
  ---flow-space: var(--🎹-spacing-flow-sectioning);
}

:is(h1, h2, h3, h4, h5, h6) {
  ---flow-space: var(--🎹-spacing-flow-heading, var(--🎹-spacing-flow-default));
}

li,
li :is(ol, ul, menu) {
  ---flow-space: var(--🎹-spacing-flow-list, var(--🎹-spacing-flow-default));
}

dt {
  ---flow-space: var(--🎹-spacing-flow-defterm, var(--🎹-spacing-flow-deflist, var(--🎹-spacing-flow-default)));
}

dd {
  ---flow-space: var(--🎹-spacing-flow-defdata, var(--🎹-spacing-flow-deflist, var(--🎹-spacing-flow-default)));
}

* + :is(h1, h2, h3, h4, h5, h6, p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, search, table, details),
:is(h1, h2, h3, h4, h5, h6, p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd, figure, figcaption, search, table, details) + div {
  margin-block-start: var(---flow-space, 1em);
}

:where(:is(article, section, nav, aside):not(:first-child)) {
  margin-block-start: var(---flow-space);
}
:where(:is(article, section, nav, aside):not(:last-child)) {
  margin-block-end: var(---flow-space);
}

:is(ol, ul, menu) {
  ---indent-root: var(--🎹-spacing-indent-list-root, 0);
  ---indent: var(--🎹-spacing-indent-list, var(--🎹-spacing-indent-list-root, var(--🎹-spacing-indent-default)));
  padding-inline-start: var(---indent-root);
}

li :is(ol, ul, menu) {
  ---indent: inherit;
  padding-inline-start: var(---indent);
}

dd {
  ---indent: var(--🎹-spacing-indent-deflist, var(--🎹-spacing-indent-default));
  margin-inline-start: var(---indent);
}

blockquote {
  ---indent: var(--🎹-spacing-indent-quotation, var(--🎹-spacing-indent-default));
  margin-inline: var(---indent);
}

figure {
  ---indent: var(--🎹-spacing-indent-figure, var(--🎹-spacing-indent-default));
  margin-inline: var(---indent);
}

html {
  font-size: var(--🎹-font-size-root, 1rem);
  line-height: var(--🎹-line-root);
}

body {
  font-family: var(--🎹-font-family-body);
  font-weight: var(--🎹-font-weight-body);
  font-size: var(--🎹-font-size-0);
  line-height: var(--🎹-line-0);
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--🎹-font-family-heading);
  font-weight: var(--🎹-font-weight-heading);
}

h1 {
  font-size: var(--🎹-font-size-3);
  line-height: var(--🎹-line-3);
}

h2 {
  font-size: var(--🎹-font-size-2);
  line-height: var(--🎹-line-2);
}

h3 {
  font-size: var(--🎹-font-size-1);
  line-height: var(--🎹-line-1);
}

h4 {
  font-size: var(--🎹-font-size-0);
  line-height: var(--🎹-line-0);
}

h5 {
  font-size: var(--🎹-font-size--1);
  line-height: var(--🎹-line--1);
}

h6 {
  font-size: var(--🎹-font-size--2);
  line-height: var(--🎹-line--2);
}

:is(h1, h2, h3, h4, h5, h6),
:is(p, address, summary, figcaption, caption) {
  max-inline-size: var(---measure, var(--🎹-measure-default));
}

:is(code, kbd, samp),
pre {
  font-family: var(--🎹-font-family-mono);
}

:is(small, sub, sup) {
  font-size: var(--🎹-font-size-smaller);
}

:is(code, kbd, samp),
:is(small, sub, sup),
::marker {
  line-height: 0;
}

h1 {
  font-size: var(--🎹-font-size-4);
  line-height: var(--🎹-line-4);
}

@media screen and not (prefers-reduced-motion) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  ---clr-pos: var(--🎹-color-body, inherit);
  ---clr-neg: var(--🎹-color-body-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
}

main {
  padding-block: var(--🎹-spacing-block-lg);
}

hr {
  border: none;
  block-size: 0;
  inline-size: 100%;
  outline-style: var(--🎹-stroke-style-hr, var(--🎹-stroke-style-default, solid));
  outline-width: calc(0.5 * var(--🎹-stroke-width-hr, var(--🎹-stroke-width-default, 0.125rem)));
  margin-inline: auto;
  color: var(--🎹-color-hr);
}

menu {
  padding: 0;
  margin: 0;
  list-style: none;
}
menu > li {
  block-size: var(---item-block-size, 2em);
  line-height: var(---item-line-height, 1em);
  padding: 0;
  margin: 0;
}
menu > li > a {
  display: inline-grid;
  align-content: center;
  block-size: 100%;
  padding-inline: var(---item-padding, 1em);
}

li::marker {
  color: var(--🎹-color-list-marker);
}

blockquote {
  ---stroke-width: var(--🎹-stroke-width-4);
  ---stroke-color: currentcolor;
  ---marker: "“";
  ---marker-size: 2;
  ---marker-outdent: 0.45ch;
  padding-inline: var(---indent);
  border-inline-start: var(---no-stroke, var(---stroke-width)) var(---stroke-color) solid;
  margin-inline-start: var(---no-stroke, calc(-1 * var(---stroke-width)));
}
blockquote::before {
  content: var(---marker);
  font-size: calc(var(---marker-size) * 1em);
  line-height: calc(var(--🎹-line-root) / var(---marker-size));
  position: absolute;
  margin-inline-start: calc(-0.5 * var(---stroke-width) - var(---marker-outdent) - var(---indent, 0ch) / var(---marker-size));
  block-size: calc(0.75em / var(---marker-size));
  background-color: var(---clr-bg);
}

kbd {
  color: var(--🎹-color-mark);
  background: var(--🎹-color-mark-contra);
  border: var(--🎹-stroke-width-1) solid var(--🎹-stroke-color-default);
  border-radius: var(--🎹-radius-xs);
  padding-inline: var(--🎹-spacing-inline-xs);
}

code {
  color: var(--🎹-color-mark);
  background-color: var(--🎹-color-mark-contra);
  padding-inline: var(--🎹-spacing-inline-xs);
}

ruby {
  line-height: calc(2 * var(--🎹-line-root-abs));
}

:where(a:any-link) {
  ---clr-pos: var(--🎹-color-links, inherit);
  ---clr-neg: var(--🎹-color-links-contra, inherit);
  color: var(---clr-fg);
  text-decoration: underline;
}

:where(a:any-link:hover) {
  text-decoration: none;
}

del {
  background: var(--🎹-color-red-300);
}

ins {
  background: var(--🎹-color-green-300);
}

audio {
  min-block-size: 1em;
}

table {
  ---border-width: var(---table-border-width, 0rem);
  border-collapse: collapse;
  padding: 0;
  border-spacing: 0;
  margin-block-end: calc(-1 * var(---border-width));
}

caption {
  margin-inline: auto;
}

td,
th {
  border: var(---border-width) var(---table-border-color) var(---table-border-style);
  padding: calc(0.5 * (var(--🎹-line-root-abs) - var(---border-width)));
}

.lyo-center, :where(body.lyo-page-center) > :where(header, main, footer, nav),
:where(body.lyo-page-center) > main > :where(article, section) {
  display: block;
  box-sizing: content-box;
  max-inline-size: var(---container-size);
  padding-inline: var(---container-gutter);
  margin-inline: auto;
}

.lyo-center.\+intrinsic > *, :where(body.lyo-page-center) > .\+intrinsic:where(header, main, footer, nav) > *,
:where(body.lyo-page-center) > main > .\+intrinsic:where(article, section) > *,
body.scp-homepage > main > section#sec\:lead > *,
body.scp-homepage > main > section#sec\:newsletter > *,
body > header hgroup > * {
  text-align: center;
  margin-inline: auto;
}

body {
  ---clr-pos: var(--🎹-color-env, inherit);
  ---clr-neg: var(--🎹-color-env-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
  padding: var(--🎹-spacing-wrap-sectioning);
}
body > header {
  ---clr-pos: var(--🎹-color-header, inherit);
  ---clr-neg: var(--🎹-color-header-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
  background: linear-gradient(180deg, var(--🎹-color-green-3) 0, var(--🎹-color-green-1) 100%);
  border-radius: var(--🎹-radius-xs) var(--🎹-radius-xs) 0 0;
  padding-block-end: var(--🎹-spacing-flow-sectioning-wide);
}
body > header hgroup h1 {
  font-size: var(--🎹-font-size-5);
  line-height: var(--🎹-line-5);
  font-family: var(--🎹-font-family-serif);
  font-weight: var(--🎹-font-weight-light);
}
body > header.with-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-block-size: var(--🎹-length-10);
}
body > header.with-text-replacement hgroup {
  visibility: hidden;
}
body > main {
  padding-block: 0;
}
body > main > * {
  ---clr-pos: var(--🎹-color-body, inherit);
  ---clr-neg: var(--🎹-color-body-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
  padding-block: var(--🎹-spacing-flow-sectioning-wide);
  clip-path: var(--🎹-clip-path-sec-slope-start);
  margin-block: calc(-1 * var(--🎹-length-slope-height)) 0;
}
body > main > *:last-child {
  border-radius: 0 0 var(--🎹-radius-xs) var(--🎹-radius-xs);
}
body > main:not(:has(> .clr-alternate)) > :nth-child(even) {
  ---clr-pos: var(--🎹-color-alternate, inherit);
  ---clr-neg: var(--🎹-color-alternate-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
}
body > footer {
  ---container-gutter: 2vw;
}
body :not(section, article, main, footer, header):target {
  outline: var(--🎹-color-yellow-2) var(--🎹-stroke-width-1) solid;
  outline-offset: var(--🎹-stroke-width-4);
  background: var(--🎹-color-yellow-1);
  box-shadow: 0 0 0 var(--🎹-stroke-width-4) var(--🎹-color-yellow-1);
  border-radius: var(--🎹-radius-xs);
}

blockquote {
  padding: var(--🎹-length-1);
  border-inline-start: var(--🎹-stroke-width-8) var(--🎹-stroke-style-default) var(--🎹-stroke-color-blockquote);
  margin-inline-start: calc(-1 * var(--🎹-stroke-width-8));
  ---clr-pos: var(--🎹-color-alternate, inherit);
  ---clr-neg: var(--🎹-color-alternate-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
}
blockquote::before {
  display: none;
}

code {
  ---clr-pos: var(--🎹-color-code, var(--🎹-color-alternate));
  ---clr-neg: var(--🎹-color-code-contra, var(--🎹-color-alternate-contra));
  color: var(---clr-fg);
  background-color: var(---clr-bg);
}

pre {
  color: var(---clr-fg);
  background-color: var(---clr-bg);
  max-inline-size: none;
  overflow-x: auto;
  padding: var(--🎹-spacing-block);
  border-radius: var(--🎹-radius-xs);
}
pre code {
  background-color: transparent;
  padding: 0;
}

button,
input[type=button],
input[type=submit] {
  ---clr-pos: var(--🎹-color-button, inherit);
  ---clr-neg: var(--🎹-color-button-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
  appearance: none;
  border: var(--🎹-stroke-width-button) var(--🎹-stroke-style-button);
  font-size: inherit;
  display: inline-block;
  padding: var(--🎹-spacing-block-sm) var(--🎹-spacing-inline-md);
  border-radius: var(--🎹-radius-button);
  font-weight: var(--🎹-font-weight-input);
  font-family: var(--🎹-font-family-input);
  letter-spacing: var(--🎹-letter-spacing-lg);
}
button:hover,
input[type=button]:hover,
input[type=submit]:hover {
  color: var(---clr-fg);
  background-color: var(---clr-bg);
}
button:hover, button:hover *, button:hover button:hover button:hover, button:hover button:hover button:hover *,
input[type=button]:hover,
input[type=button]:hover *,
button:hover button:hover input[type=button]:hover,
button:hover button:hover input[type=button]:hover *,
input[type=submit]:hover,
input[type=submit]:hover *,
button:hover button:hover input[type=submit]:hover,
button:hover button:hover input[type=submit]:hover *,
button:hover input[type=button]:hover button:hover,
button:hover input[type=button]:hover button:hover *,
button:hover input[type=button]:hover input[type=button]:hover,
button:hover input[type=button]:hover input[type=button]:hover *,
button:hover input[type=button]:hover input[type=submit]:hover,
button:hover input[type=button]:hover input[type=submit]:hover *,
button:hover input[type=submit]:hover button:hover,
button:hover input[type=submit]:hover button:hover *,
button:hover input[type=submit]:hover input[type=button]:hover,
button:hover input[type=submit]:hover input[type=button]:hover *,
button:hover input[type=submit]:hover input[type=submit]:hover,
button:hover input[type=submit]:hover input[type=submit]:hover *,
input[type=button]:hover button:hover button:hover,
input[type=button]:hover button:hover button:hover *,
input[type=button]:hover button:hover input[type=button]:hover,
input[type=button]:hover button:hover input[type=button]:hover *,
input[type=button]:hover button:hover input[type=submit]:hover,
input[type=button]:hover button:hover input[type=submit]:hover *,
input[type=button]:hover input[type=button]:hover button:hover,
input[type=button]:hover input[type=button]:hover button:hover *,
input[type=button]:hover input[type=button]:hover input[type=button]:hover,
input[type=button]:hover input[type=button]:hover input[type=button]:hover *,
input[type=button]:hover input[type=button]:hover input[type=submit]:hover,
input[type=button]:hover input[type=button]:hover input[type=submit]:hover *,
input[type=button]:hover input[type=submit]:hover button:hover,
input[type=button]:hover input[type=submit]:hover button:hover *,
input[type=button]:hover input[type=submit]:hover input[type=button]:hover,
input[type=button]:hover input[type=submit]:hover input[type=button]:hover *,
input[type=button]:hover input[type=submit]:hover input[type=submit]:hover,
input[type=button]:hover input[type=submit]:hover input[type=submit]:hover *,
input[type=submit]:hover button:hover button:hover,
input[type=submit]:hover button:hover button:hover *,
input[type=submit]:hover button:hover input[type=button]:hover,
input[type=submit]:hover button:hover input[type=button]:hover *,
input[type=submit]:hover button:hover input[type=submit]:hover,
input[type=submit]:hover button:hover input[type=submit]:hover *,
input[type=submit]:hover input[type=button]:hover button:hover,
input[type=submit]:hover input[type=button]:hover button:hover *,
input[type=submit]:hover input[type=button]:hover input[type=button]:hover,
input[type=submit]:hover input[type=button]:hover input[type=button]:hover *,
input[type=submit]:hover input[type=button]:hover input[type=submit]:hover,
input[type=submit]:hover input[type=button]:hover input[type=submit]:hover *,
input[type=submit]:hover input[type=submit]:hover button:hover,
input[type=submit]:hover input[type=submit]:hover button:hover *,
input[type=submit]:hover input[type=submit]:hover input[type=button]:hover,
input[type=submit]:hover input[type=submit]:hover input[type=button]:hover *,
input[type=submit]:hover input[type=submit]:hover input[type=submit]:hover,
input[type=submit]:hover input[type=submit]:hover input[type=submit]:hover * {
  ---clr-fg: var(---clr-neg);
  ---clr-bg: var(---clr-pos);
}
button:hover button:hover,
button:hover input[type=button]:hover,
button:hover input[type=submit]:hover,
input[type=button]:hover button:hover,
input[type=button]:hover input[type=button]:hover,
input[type=button]:hover input[type=submit]:hover,
input[type=submit]:hover button:hover,
input[type=submit]:hover input[type=button]:hover,
input[type=submit]:hover input[type=submit]:hover {
  color: var(---clr-fg);
  background-color: var(---clr-bg);
}
button:hover button:hover, button:hover button:hover *,
button:hover input[type=button]:hover,
button:hover input[type=button]:hover *,
button:hover input[type=submit]:hover,
button:hover input[type=submit]:hover *,
input[type=button]:hover button:hover,
input[type=button]:hover button:hover *,
input[type=button]:hover input[type=button]:hover,
input[type=button]:hover input[type=button]:hover *,
input[type=button]:hover input[type=submit]:hover,
input[type=button]:hover input[type=submit]:hover *,
input[type=submit]:hover button:hover,
input[type=submit]:hover button:hover *,
input[type=submit]:hover input[type=button]:hover,
input[type=submit]:hover input[type=button]:hover *,
input[type=submit]:hover input[type=submit]:hover,
input[type=submit]:hover input[type=submit]:hover * {
  ---clr-fg: var(---clr-pos);
  ---clr-bg: var(---clr-neg);
}

table {
  inline-size: 100%;
}

th,
td {
  border-block-end: 1px solid var(--🎹-color-neutral);
}

tr:last-child td {
  border-block-end: 0;
}

figure figcaption {
  font-style: italic;
}
figure img {
  inline-size: 100%;
  border-radius: var(--🎹-radius-xs);
}

.lyo-box, .var-alert, form, input,
textarea,
select {
  display: block;
  padding: var(---box-space, var(--🎹-spacing-block));
  border: var(---box-border, var(---box-border-width, var(--🎹-stroke-width-default)) var(---box-border-style, var(--🎹-stroke-style-default)) var(---box-border-color, var(--🎹-stroke-color-default)));
  border-radius: var(---box-radius, var(--🎹-radius-default));
}

form {
  ---clr-pos: var(--🎹-color-form, inherit);
  ---clr-neg: var(--🎹-color-form-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
  ---box-border-width: var(--🎹-stroke-width-form);
  ---box-border-color: var(--🎹-stroke-color-form);
  ---box-radius: var(--🎹-radius-form);
  box-shadow: var(--🎹-shadow-form);
}

input,
textarea,
select {
  ---clr-pos: var(--🎹-color-input, inherit);
  ---clr-neg: var(--🎹-color-input-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
  ---box-space: var(--🎹-spacing-box-input);
  ---box-border-width: var(--🎹-stroke-width-input);
  ---box-border-color: var(--🎹-stroke-color-input);
  ---box-radius: var(--🎹-radius-input);
  display: inline-block;
  font-family: var(--🎹-font-family-input);
  font-weight: var(--🎹-font-weight-input);
  font-size: inherit;
}

:where(body, body > div:only-child) > :is(header, footer) {
  padding-block: var(--🎹-spacing-block-lg);
}

:where(body, body > div:only-child) {
  min-block-size: 100vh;
}
:where(body, body > div:only-child) > footer {
  position: sticky;
  inset-block-start: 100vh;
}

hgroup p {
  font-family: var(--🎹-font-family-heading);
  font-weight: var(--🎹-font-weight-heading);
  color: var(---clr-fg);
}
hgroup h1 ~ p {
  font-size: var(--🎹-font-size-2);
  line-height: var(--🎹-line-2);
}
hgroup h2 ~ p {
  font-size: var(--🎹-font-size-1);
  line-height: var(--🎹-line-1);
}

b a:any-link:only-child {
  border: var(--🎹-stroke-width-1) var(--🎹-stroke-style);
  font-size: inherit;
  padding: var(--🎹-spacing-block-xxs) var(--🎹-spacing-inline-xs);
  border-radius: var(--🎹-radius-xs);
  font-weight: var(--🎹-font-weight-regular);
  font-family: var(--🎹-font-family-sans);
  font-style: normal;
  letter-spacing: var(--🎹-letter-spacing-lg);
  text-decoration: none;
  color: inherit;
}

@supports selector(a:-moz-first-node:-moz-last-node) {
  :is(h1, h2, h3, h4, h5, h6, li) > :where(a:-moz-first-node:-moz-last-node:any-link,
  a:-moz-first-node:has(+ :is(ol, ul, menu):-moz-last-node)) {
    text-decoration: none;
  }
  :is(h1, h2, h3, h4, h5, h6, li) > :where(a:-moz-first-node:-moz-last-node:any-link,
  a:-moz-first-node:has(+ :is(ol, ul, menu):-moz-last-node)):hover {
    text-decoration: underline;
  }
}
@supports not selector(a:-moz-first-node:-moz-last-node) {
  :is(h1, h2, h3, h4, h5, h6, li) > :where(a:only-child:any-link:not(.var-regular),
  a:first-child:has(+ :is(ol, ul, menu):last-child)) {
    text-decoration: none;
  }
  :is(h1, h2, h3, h4, h5, h6, li) > :where(a:only-child:any-link:not(.var-regular),
  a:first-child:has(+ :is(ol, ul, menu):last-child)):hover {
    text-decoration: underline;
  }
}

.\@measure-xxs, body > nav:first-of-type summary + ul {
  ---measure: var(--🎹-measure-xxs) !important;
}

.\@measure-xs, body > footer > nav > ul {
  ---measure: var(--🎹-measure-xs) !important;
}

.\@measure-sm {
  ---measure: var(--🎹-measure-sm) !important;
}

.\@measure-md, body.scp-section-support > main > section#sec\:quick-help, body.scp-section-support > main > section#sec\:downloads, body.scp-section-support > main > section#sec\:faq .var-faq-list, body.scp-homepage > main > section#sec\:products, body.scp-homepage > main > section#sec\:sounds, body.scp-homepage > main > section#sec\:news, body.scp-homepage > main > section#sec\:community {
  ---measure: var(--🎹-measure-md) !important;
}

.\@measure-lg {
  ---measure: var(--🎹-measure-lg) !important;
}

.\@measure-xl {
  ---measure: var(--🎹-measure-xl) !important;
}

.\@measure-xxl {
  ---measure: var(--🎹-measure-xxl) !important;
}

.\@measure-xxxs {
  ---measure: var(--🎹-measure-xxxs) !important;
}

.\@measure-xxxl {
  ---measure: var(--🎹-measure-xxxl) !important;
}

.\@measure-full {
  ---measure: var(--🎹-measure-full) !important;
}

.\@measure-inf {
  ---measure: var(--🎹-measure-inf) !important;
}

* {
  ---wrap-space: var(--🎹-spacing-wrap-default);
}

:is(article, section, nav, aside) {
  ---wrap-space: var(--🎹-spacing-wrap-sectioning);
}

[class^=lyo-wrap-],
[class*=" lyo-wrap-"],
nav.var-tabbed menu,
.var-form-row,
body.scp-section-support > main > section#sec\:quick-help,
body.scp-section-support > main > section#sec\:downloads,
body.scp-section-support > main > section#sec\:faq .var-faq-list,
body.scp-homepage > main > section#sec\:products,
body.scp-homepage > main > section#sec\:sounds,
body.scp-homepage > main > section#sec\:news,
body.scp-homepage > main > section#sec\:community,
body > footer > nav > ul,
body > nav:first-of-type summary + ul {
  ---min-column-size: calc(0.7 * var(---measure));
  gap: var(---wrap-space, var(---flow-space));
}

:is([class^=lyo-wrap-], [class*=" lyo-wrap-"]) > * {
  margin-block: 0;
}

.lyo-wrap-grid, body.scp-section-support > main > section#sec\:quick-help, body.scp-section-support > main > section#sec\:downloads, body.scp-homepage > main > section#sec\:products, body.scp-homepage > main > section#sec\:sounds, body.scp-homepage > main > section#sec\:news, body.scp-homepage > main > section#sec\:community, body > nav:first-of-type summary + ul {
  ---fill-method: auto-fill;
  display: grid;
  grid-template-columns: repeat(var(---fill-method), minmax(min(100%, var(---min-column-size)), 1fr));
}

.lyo-wrap-grid.\+fit,
body.scp-section-support > main > section#sec\:quick-help,
body.scp-section-support > main > section#sec\:downloads,
body.scp-homepage > main > section#sec\:products,
body.scp-homepage > main > section#sec\:sounds,
body.scp-homepage > main > section#sec\:news,
body.scp-homepage > main > section#sec\:community,
body > nav:first-of-type summary + ul {
  ---fill-method: auto-fit;
}

.lyo-wrap-flex, nav.var-tabbed menu {
  display: flex;
  flex-wrap: wrap;
}
.lyo-wrap-flex > *, nav.var-tabbed menu > * {
  flex-basis: var(---min-column-size);
  flex-grow: 1;
}

.lyo-wrap-columns, body.scp-section-support > main > section#sec\:faq .var-faq-list, body > footer > nav > ul {
  column-width: var(---min-column-size);
}

.lyo-wrap-cluster, .var-form-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
}

.lyo-wrap-cluster.\+center, .\+center.var-form-row {
  justify-content: center;
}

.lyo-wrap-cluster.\+end, .\+end.var-form-row {
  justify-content: end;
}

.lyo-wrap-cluster.\+justified, .\+justified.var-form-row {
  justify-content: space-between;
}

.lyo-reset-wrap, .var-form-row .\~help, body.scp-section-support > main > section > h2, body.scp-section-support > main > section > .lead, body.scp-homepage > main > section > h2 {
  grid-column: 1/-1 !important;
  max-inline-size: unset !important;
  flex: 100% !important;
}

body > nav:first-of-type {
  ---flow-space: 0em;
  ---item-block-size: var(--🎹-length-2);
  ---item-line-height: var(--🎹-length-1dim);
  ---item-padding: min(2vw, var(--🎹-length-1));
  position: relative;
  font-family: var(--🎹-font-family-nav);
  text-transform: uppercase;
  text-align: center;
  margin-block-end: var(--🎹-spacing-flow-sectioning);
}
body > nav:first-of-type menu[role=menubar] {
  ---clr-pos: var(--🎹-color-nav, inherit);
  ---clr-neg: var(--🎹-color-nav-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
  display: flex;
  border-radius: var(--🎹-radius-xs);
  box-shadow: var(--🎹-shadow-sm);
}
body > nav:first-of-type menu[role=menubar] > li:not(.home-button) {
  flex: 0 1 auto;
  min-inline-size: 3em;
}
body > nav:first-of-type menu[role=menubar] > li:not(.home-button) > a {
  display: inline-block;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
body > nav:first-of-type menu[role=menubar] > li:has(details) {
  display: flex;
}
body > nav:first-of-type menu[role=menubar] > li:has(details) > details {
  display: inline-block;
  margin-block: 0;
  margin-inline-start: calc(-1 * var(--🎹-length-0½));
}
body > nav:first-of-type menu[role=menubar] > li:has(details) > details summary {
  color: var(---clr-fg);
  background-color: var(---clr-bg);
  line-height: var(---item-block-size);
  padding-inline: 1ch;
}
body > nav:first-of-type li {
  list-style: none;
}
body > nav:first-of-type li.home-button {
  flex: 0 0 auto;
  background: url("/img/u-he.bg.glare.svg") no-repeat center/cover;
  background-origin: content-box;
  border-radius: var(--🎹-radius-xs) 0 0 var(--🎹-radius-xs);
  clip-path: var(--🎹-clip-path-menubar-slope);
  padding-inline: 0em 0.25em;
}
body > nav:first-of-type li.home-button a {
  padding-inline: 0.5em;
}
body > nav:first-of-type li.home-button a img {
  block-size: calc(0.75 * var(---item-block-size));
}
body > nav:first-of-type li.licenses-button {
  color: var(--🎹-color-green-2);
  background: linear-gradient(100deg, var(--🎹-color-grey-0) 0.6em, var(--🎹-color-grey-2) 0.64em, var(--🎹-color-grey-1) 2em);
  margin-inline-start: auto;
  padding-inline-start: 0.7em;
}
body > nav:first-of-type li.cart-menu {
  flex-grow: 0;
  color: var(--🎹-color-grey-1);
  background: linear-gradient(100deg, var(--🎹-color-grey-1) 0.6em, var(--🎹-color-green-2) 0.64em, var(--🎹-color-green-1) 2em);
  padding-inline-start: 0.7em;
  border-radius: 0 var(--🎹-radius-xs) var(--🎹-radius-xs) 0;
}
body > nav:first-of-type li svg {
  display: inline;
  vertical-align: middle;
  block-size: 1.2em;
  inline-size: 1.2em;
  margin-block: -0.6em;
  margin-inline-end: 0.5ch;
  fill: currentColor;
}
body > nav:first-of-type summary + ul {
  position: absolute;
  inset: 100% 0 auto auto;
  z-index: 10;
  margin-block-start: var(--🎹-line-1);
  padding: var(--🎹-line-1);
  inline-size: 100%;
  text-align: initial;
  background: var(--🎹-color-grey-0);
  border-radius: var(--🎹-radius-xs);
  box-shadow: var(--🎹-shadow-xs);
}
body > nav:first-of-type summary + ul > li > a {
  display: block;
  font-size: var(--🎹-font-size-2);
  line-height: var(--🎹-line-2);
  font-weight: var(--🎹-font-weight-light);
  border-block-end: var(--🎹-stroke-width-1) var(--🎹-color-grey-2) solid;
}
body > nav:first-of-type summary + ul > li > ul {
  padding: 0;
}
body > nav:first-of-type summary + ul > li > ul li {
  line-height: var(--🎹-line-2);
}
body > nav:first-of-type a {
  color: inherit;
  background-color: transparent;
  font-weight: var(--🎹-font-weight-emphasis);
  text-decoration: none;
}

body > footer > nav ul {
  list-style: none;
  padding: 0;
}
body > footer > nav > ul {
  ---wrap-space: var(--🎹-spacing-wrap-sectioning);
  font-family: var(--🎹-font-family-nav);
  font-size: var(--🎹-font-size--1);
}
body > footer > nav > ul > li {
  line-height: var(--🎹-line-2);
  break-inside: avoid;
}
body > footer > nav > ul > li > a {
  display: block;
  text-transform: uppercase;
  font-weight: var(--🎹-font-weight-emphasis);
  border-block-end: var(--🎹-stroke-width-2) solid;
  margin-block-end: var(--🎹-length-0½);
}
body > footer > nav > ul > li > a:any-link:hover {
  text-decoration: none;
}
body > footer > nav > ul > li li {
  line-height: var(--🎹-line-1);
}
body > footer > nav > ul > li + li {
  margin-block-start: var(--🎹-length-1½);
}

div.footnotes {
  margin-block-start: var(--🎹-spacing-block);
  font-size: var(--🎹-font-size--1);
  line-height: var(--🎹-line--1);
}

body.scp-homepage > header {
  padding-block-start: 0;
}
body.scp-homepage > header > hgroup {
  display: none;
}
body.scp-homepage > header figure.var-hero {
  clip-path: var(--🎹-clip-path-sec-slope-end);
}
body.scp-homepage > header figure.var-hero figcaption {
  display: none;
}
body.scp-homepage > main > section > h2 {
  font-size: var(--🎹-font-size-4);
  line-height: var(--🎹-line-4);
  text-align: center;
  margin-inline: auto;
  margin-block-end: var(--🎹-length-1);
}
body.scp-homepage > main > section#sec\:lead {
  font-size: var(--🎹-font-size-1);
  font-style: italic;
}
body.scp-section-support > main > section > h2 {
  font-size: var(--🎹-font-size-4);
  line-height: var(--🎹-line-4);
  text-align: center;
  margin-inline: auto;
  margin-block-end: var(--🎹-length-1);
}
body.scp-section-support > main > section > .lead {
  margin-inline: auto;
  text-align: center;
}
.var-alert {
  ---box-space: var(--🎹-spacing-block-sm);
  background: var(--🎹-color-grey-2);
  border-color: var(--🎹-color-grey-3);
}
.var-alert.\+success {
  background: var(--🎹-color-yellow-green-1);
  border-color: var(--🎹-color-yellow-green-2);
}
.var-alert.\+info {
  background: var(--🎹-color-yellow-1);
  border-color: var(--🎹-color-yellow-2);
}
.var-alert.\+error {
  background: var(--🎹-color-red-1);
  border-color: var(--🎹-color-red-2);
}
.var-alert[hidden] {
  display: none;
}
.var-alert[hidden]:target {
  display: revert;
}

.var-form-control {
  margin-block-end: var(--🎹-length-1);
}
.var-form-control select {
  appearance: none;
}
.var-form-control > * {
  display: block;
  inline-size: var(---measure);
  max-inline-size: 100%;
}
.var-form-control > small,
.var-form-control .\~help {
  font-size: var(--🎹-font-size--1);
  line-height: var(--🎹-line--1);
}

.var-form-row {
  margin-block-end: var(--🎹-length-1);
}
.var-form-row legend {
  font-weight: var(--🎹-font-weight-heading);
  font-family: var(--🎹-font-family-heading);
}
.var-form-row .var-form-control {
  margin-block-end: 0;
}
article.var-article-list-item .var-meta {
  margin-block-start: 0;
}
article.var-article-list-item .\~teaser-picture {
  display: block;
  box-shadow: var(--🎹-shadow-lg);
}
article.var-article-list-item .\~teaser-picture img {
  inline-size: 100%;
}
article.var-article-list-item .\~thumbnail-picture {
  float: inline-start;
  box-shadow: var(--🎹-shadow-sm);
  inline-size: var(--🎹-length-6);
  margin-inline-end: var(--🎹-length-1);
}
article.var-article-list-item .\~thumbnail-picture img {
  inline-size: 100%;
}

article.var-single-article .var-meta {
  text-align: end;
}
dl.var-meta {
  font-size: var(--🎹-font-size-smaller);
  line-height: var(--🎹-line--1);
}
dl.var-meta dt,
dl.var-meta dd {
  display: inline;
  margin-inline: 0;
}
dl.var-meta dt {
  color: var(--🎹-color-neutral);
}
dl.var-meta dt::before {
  content: "";
  display: block;
}
dl.var-meta dt::after {
  content: ": ";
}
dl.var-meta dd + dd::before {
  content: ", ";
}

/*
 * This is a temporary place for style rules that need to be tidied up.
 */
ul.var-faq-list {
  margin-block-end: 2rlh;
  break-inside: avoid;
  padding-inline-start: 1rlh;
}
ul.var-faq-list > li {
  list-style: none;
  position: relative;
}
ul.var-faq-list > li::before {
  content: "?";
  position: absolute;
  inset: 0.2em auto auto -1rlh;
  text-align: center;
  line-height: 1em;
  inline-size: 1em;
  block-size: 1em;
  font-family: var(--🎹-font-family-sans);
  font-weight: var(--🎹-font-weight-emphasis);
  color: var(---clr-neg);
  background-color: var(---clr-pos);
  border-radius: var(--🎹-radius-ellipse);
}

nav.var-paginator {
  text-align: center;
  font-variant-numeric: lining-nums;
}
nav.var-paginator .faded {
  color: var(--🎹-color-neutral);
}
nav.var-paginator .nav-prev {
  margin-inline: auto 1%;
}
nav.var-paginator .nav-next {
  margin-inline: 1% auto;
}

nav.var-tabbed {
  font-family: var(--🎹-font-family-nav);
}
nav.var-tabbed menu li a {
  ---clr-pos: var(--🎹-color-alternate, inherit);
  ---clr-neg: var(--🎹-color-alternate-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
  inline-size: 100%;
  justify-content: center;
  border-radius: var(--🎹-radius-xxs);
}
nav.var-tabbed menu li a:hover {
  ---clr-pos: var(--🎹-color-button, inherit);
  ---clr-neg: var(--🎹-color-button-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
  text-decoration: none;
}
nav.var-tabbed:has(+ :target) menu > li:nth-child(1) a, nav.var-tabbed:has(+ * + :target) menu > li:nth-child(2) a, nav.var-tabbed:has(+ * + * + :target) menu > li:nth-child(3) a, nav.var-tabbed:has(+ * + * + * + :target) menu > li:nth-child(4) a, nav.var-tabbed:has(+ * + * + * + * + :target) menu > li:nth-child(5) a, nav.var-tabbed:has(+ * + * + * + * + * + :target) menu > li:nth-child(6) a, nav.var-tabbed:has(+ * + * + * + * + * + * + :target) menu > li:nth-child(7) a, nav.var-tabbed:has(+ * + * + * + * + * + * + * + :target) menu > li:nth-child(8) a, nav.var-tabbed:has(+ * + * + * + * + * + * + * + * + :target) menu > li:nth-child(9) a {
  ---clr-pos: var(--🎹-color-button, inherit);
  ---clr-neg: var(--🎹-color-button-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
}
nav.var-tabbed ~ section[hidden]:target, nav.var-tabbed ~ section[hidden]:has(:target) {
  scroll-margin: 5rlh;
  display: block;
}

.clr-alternate {
  ---clr-pos: var(--🎹-color-alternate, inherit);
  ---clr-neg: var(--🎹-color-alternate-contra, inherit);
  color: var(---clr-fg);
  background-color: var(---clr-bg);
}

.clr-inverse {
  color: var(---clr-fg);
  background-color: var(---clr-bg);
}
.clr-inverse, .clr-inverse *, .clr-inverse .clr-inverse .clr-inverse, .clr-inverse .clr-inverse .clr-inverse * {
  ---clr-fg: var(---clr-neg);
  ---clr-bg: var(---clr-pos);
}
.clr-inverse .clr-inverse {
  color: var(---clr-fg);
  background-color: var(---clr-bg);
}
.clr-inverse .clr-inverse, .clr-inverse .clr-inverse * {
  ---clr-fg: var(---clr-pos);
  ---clr-bg: var(---clr-neg);
}

:where(body.lyo-page-center) {
  ---container-size: var(--🎹-container-page);
  ---container-gutter: 5vw;
}
:where(body.lyo-page-center) .\~breakout,
:where(body.lyo-page-center) > nav > menu,
:where(body.lyo-page-center) > main > :where(article, section) {
  margin-inline: calc(-1 * var(---container-gutter));
}

/* rasa-latin-wght-normal */
@font-face {
  font-family: "Rasa Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  size-adjust: 110%;
  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;
  src: url("/fonts-variable/rasa/files/rasa-latin-wght-normal.woff2") format("woff2-variations");
}
/* rasa-latin-wght-italic */
@font-face {
  font-family: "Rasa Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  size-adjust: 110%;
  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;
  src: url("/fonts-variable/rasa/files/rasa-latin-wght-italic.woff2") format("woff2-variations");
}
/* rasa-latin-ext-wght-normal */
@font-face {
  font-family: "Rasa Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  size-adjust: 110%;
  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;
  src: url("/fonts-variable/rasa/files/rasa-latin-ext-wght-normal.woff2") format("woff2-variations");
}
/* rasa-latin-ext-wght-italic */
@font-face {
  font-family: "Rasa Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  size-adjust: 110%;
  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;
  src: url("/fonts-variable/rasa/files/rasa-latin-ext-wght-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Monaco";
  src: local("Monaco");
  size-adjust: 81%;
}
/*
 * This is a temporary place for style rules that need to be tidied up.
 */
:root {
  --color-shadow: 0 0 0;
}