@charset "UTF-8";
/* @docs
label: Core Remedies
version: 0.1.0-beta.2

note: |
  These remedies are recommended
  as a starter for any project.

category: file
*/
/* @docs
label: Box Sizing

note: |
  Use border-box by default, globally.

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

/* @docs
label: Line Sizing

note: |
  Consistent line-spacing,
  even when inline elements have different line-heights.

links:
  - https://drafts.csswg.org/css-inline-3/#line-sizing-property

category: global
*/
html {
  line-sizing: normal;
}

/* @docs
label: Body Margins

note: |
  Remove the tiny space around the edge of the page.

category: global
*/
body {
  margin: 0;
}

/* @docs
label: Heading Sizes

note: |
  Switch to rem units for headings

category: typography
*/
h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

/* @docs
label: H1 Margins

note: |
  Keep h1 margins consistent, even when nested.

category: typography
*/
h1 {
  margin: 0.67em 0;
}

/* @docs
label: Pre Wrapping

note: |
  Overflow by default is bad...

category: typography
*/
pre {
  white-space: pre-wrap;
}

/* @docs
label: Horizontal Rule

note: |
  1. Solid, thin horizontal rules
  2. Remove Firefox `color: gray`
  3. Remove default `1px` height, and common `overflow: hidden`

category: typography
*/
hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible;
}

/* @docs
label: Responsive Embeds

note: |
  1. Block display is usually what we want
  2. Remove strange space-below when inline
  3. Responsive by default

category: embedded elements
*/
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}

/* @docs
label: Aspect Ratios

note: |
  Maintain intrinsic aspect ratios when `max-width` is applied.
  `iframe`, `embed`, and `object` are also embedded,
  but have no intrinsic ratio,
  so their `height` needs to be set explicitly.

category: embedded elements
*/
img, svg, video, canvas {
  height: auto;
}

/* @docs
label: Audio Width

note: |
  There is no good reason elements default to 300px,
  and audio files are unlikely to come with a width attribute.

category: embedded elements
*/
audio {
  width: 100%;
}

/* @docs
label: Image Borders

note: |
  Remove the border on images inside links in IE 10 and earlier.

category: legacy browsers
*/
img {
  border-style: none;
}

/* @docs
label: SVG Overflow

note: |
  Hide the overflow in IE 10 and earlier.

category: legacy browsers
*/
svg {
  overflow: hidden;
}

/* @docs
label: HTML5 Elements

note: |
  Default block display on HTML5 elements

category: legacy browsers
*/
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

/* @docs
label: Checkbox & Radio Inputs

note: |
  1. Add the correct box sizing in IE 10
  2. Remove the padding in IE 10

category: legacy browsers
*/
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

/* stylelint-disable */
/* @docs
label: Reminders
version: 0.1.0-beta.2

note: |
  All the remedies in this file are commented out by default,
  because they could cause harm as general defaults.
  These should be used as reminders
  to handle common styling issues
  in a way that will work for your project and users.
  Read, explore, uncomment, and edit as needed.

category: file
*/
/* @docs
label: List Style

note: |
  List styling is not usually desired in navigation,
  but this also removes list-semantics for screen-readers

links:
  - https://github.com/mozdevs/cssremedy/issues/15

category: navigation
*/
nav ul {
  list-style: none;
}

[role=list] {
  list-style: none;
  padding-inline-start: unset;
}

/* @docs
label: List Voiceover

note: |
  1. Add zero-width-space to prevent VoiceOver disable
  2. Absolute position ensures no extra space

links:
  - https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/

category: navigation
*/
nav li:before {
  content: "​";
  position: absolute;
}

/* @docs
label: Reduced Motion

note: |
  1. Immediately jump any animation to the end point
  2. Remove transitions & fixed background attachment

links:
  - https://github.com/mozdevs/cssremedy/issues/11

category: accessibility
*/
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1s !important;
    animation-duration: 1s !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
  }
}
/* @docs
label: Line Heights

note: |
  The default `normal` line-height is tightly spaced,
  but takes font-metrics into account,
  which is important for many fonts.
  Looser spacing may improve readability in latin type,
  but may cause problems in some scripts --
  from cusrive/fantasy fonts to
  [Javanese](https://jsbin.com/bezasax/1/edit?html,css,output),
  [Persian](https://jsbin.com/qurecom/edit?html,css,output),
  and CJK languages.

links:
  - https://github.com/mozdevs/cssremedy/issues/7
  - https://jsbin.com/bezasax/1/edit?html,css,output
  - https://jsbin.com/qurecom/edit?html,css,output

todo: |
  - Use `:lang(language-code)` selectors?
  - Add typography remedies for other scripts & languages...

category: typography
*/
html {
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.25;
}

caption,
figcaption,
label,
legend {
  line-height: 1.375;
}

/* stylelint-enable */
[data-ccs=root] {
  --ccs-prime--config: 195;
  --ccs-accent--config: 330;
  --ccs-special--config: 24;
  --ccs-saturation--config: 75%;
  --ccs-contrast--config: 54%;
  --ccs-fade-background--config: 25%;
  --ccs-s-neutral--config: 10%;
  --ccs-fade: 0.95;
}

[data-ccs-colors],
[data-ccs-colors=light] {
  background-color: hsl(195, 21%, 104%);
  color: hsl(195, 21%, -4%);
}

[data-ccs-colors=invert],
[data-ccs-colors=dark] {
  background-color: hsl(195, 21%, -4%);
  color: hsl(195, 21%, 104%);
}

[data-ccs-colors] {
  --ccs-contrast--user-percent: calc(var(--ccs-contrast--user) * 1%);
  --ccs-contrast: var(--ccs-contrast--user-percent, var(--ccs-contrast--theme, var(--ccs-contrast-config, 45%)));
  --ccs-l--user-percent: calc(var(--ccs-l--user) * 1%);
  --ccs-l: var(--ccs-l--user-percent, var(--ccs-l--theme, var(--ccs-lightness--config, 50%)));
  --ccs-l--fg-contrast: calc(var(--ccs-l) + var(--ccs-contrast) * var(--ccs-invert));
  --ccs-l--bg-contrast: calc(var(--ccs-l) + var(--ccs-contrast) * var(--ccs-mode));
  --ccs-fade-background: var(--ccs-fade-background--theme, var(--ccs-fade-background--config, 0%));
  --ccs-s--user-percent: calc(var(--ccs-s--user) * 1%);
  --ccs-s: var(--ccs-s--user-percent, var(--ccs-s--theme, var(--ccs-saturation--config, 50%)));
  --ccs-s--fg-contrast: calc(var(--ccs-s) - var(--ccs-contrast) * 0.75);
  --ccs-s--bg-contrast: calc(var(--ccs-s--fg-contrast) - var(--ccs-fade-background));
  --ccs-s--neutral: var(--ccs-s-neutral--theme, var(--ccs-s-neutral--config, var(--ccs-s--bg-contrast)));
  --ccs--bg-full: hsl(0, 0%, calc(100% * var(--ccs-mode)));
  --ccs--fg-full: hsl(0, 0%, calc(100% * var(--ccs-invert)));
  --ccs-h--prime: var(--ccs-prime--user, var(--ccs-prime--theme, var(--ccs-prime--config, 195)));
  --ccs-prime: hsl(
    var(--ccs-h--prime),
    var(--ccs-s),
    var(--ccs-l)
  );
  --ccs-prime--fg-full: hsl(
    var(--ccs-h--prime),
    var(--ccs-s--fg-contrast),
    var(--ccs-l--fg-contrast)
  );
  --ccs-prime--bg-full: hsl(
    var(--ccs-h--prime),
    var(--ccs-s--bg-contrast),
    var(--ccs-l--bg-contrast)
  );
  --ccs-prime--fade: hsla(
    var(--ccs-h--prime),
    var(--ccs-s),
    var(--ccs-l),
    var(--ccs-fade)
  );
  --ccs-prime--fg-full-fade: hsla(
    var(--ccs-h--prime),
    var(--ccs-s--fg-contrast),
    var(--ccs-l--fg-contrast),
    var(--ccs-fade)
  );
  --ccs-prime--bg-full-fade: hsla(
    var(--ccs-h--prime),
    var(--ccs-s--bg-contrast),
    var(--ccs-l--bg-contrast),
    var(--ccs-fade)
  );
  --ccs-h--accent: var(--ccs-accent--user, var(--ccs-accent--theme, var(--ccs-accent--config, var(--ccs-h--prime))));
  --ccs-accent: hsl(
    var(--ccs-h--accent),
    var(--ccs-s),
    var(--ccs-l)
  );
  --ccs-accent--fg-full: hsl(
    var(--ccs-h--accent),
    var(--ccs-s--fg-contrast),
    var(--ccs-l--fg-contrast)
  );
  --ccs-accent--bg-full: hsl(
    var(--ccs-h--accent),
    var(--ccs-s--bg-contrast),
    var(--ccs-l--bg-contrast)
  );
  --ccs-accent--fade: hsla(
    var(--ccs-h--accent),
    var(--ccs-s),
    var(--ccs-l),
    var(--ccs-fade)
  );
  --ccs-accent--fg-full-fade: hsla(
    var(--ccs-h--accent),
    var(--ccs-s--fg-contrast),
    var(--ccs-l--fg-contrast),
    var(--ccs-fade)
  );
  --ccs-accent--bg-full-fade: hsla(
    var(--ccs-h--accent),
    var(--ccs-s--bg-contrast),
    var(--ccs-l--bg-contrast),
    var(--ccs-fade)
  );
  --ccs-h--special: var(--ccs-special--user, var(--ccs-special--theme, var(--ccs-special--config, var(--ccs-h--prime))));
  --ccs-special: hsl(
    var(--ccs-h--special),
    var(--ccs-s),
    var(--ccs-l)
  );
  --ccs-special--fg-full: hsl(
    var(--ccs-h--special),
    var(--ccs-s--fg-contrast),
    var(--ccs-l--fg-contrast)
  );
  --ccs-special--bg-full: hsl(
    var(--ccs-h--special),
    var(--ccs-s--bg-contrast),
    var(--ccs-l--bg-contrast)
  );
  --ccs-special--fade: hsla(
    var(--ccs-h--special),
    var(--ccs-s),
    var(--ccs-l),
    var(--ccs-fade)
  );
  --ccs-special--fg-full-fade: hsla(
    var(--ccs-h--special),
    var(--ccs-s--fg-contrast),
    var(--ccs-l--fg-contrast),
    var(--ccs-fade)
  );
  --ccs-special--bg-full-fade: hsla(
    var(--ccs-h--special),
    var(--ccs-s--bg-contrast),
    var(--ccs-l--bg-contrast),
    var(--ccs-fade)
  );
  --ccs-h--neutral: var(--ccs-neutral--user, var(--ccs-neutral--theme, var(--ccs-neutral--config, var(--ccs-h--prime))));
  --ccs-neutral: hsl(
    var(--ccs-h--neutral),
    var(--ccs-s--neutral),
    var(--ccs-l)
  );
  --ccs-neutral--fg-full: hsl(
    var(--ccs-h--neutral),
    var(--ccs-s--neutral),
    var(--ccs-l--fg-contrast)
  );
  --ccs-neutral--bg-full: hsl(
    var(--ccs-h--neutral),
    var(--ccs-s--neutral),
    var(--ccs-l--bg-contrast)
  );
  --ccs-neutral--fade: hsla(
    var(--ccs-h--neutral),
    var(--ccs-s--neutral),
    var(--ccs-l),
    var(--ccs-fade)
  );
  --ccs-neutral--fg-full-fade: hsla(
    var(--ccs-h--neutral),
    var(--ccs-s--neutral),
    var(--ccs-l--fg-contrast),
    var(--ccs-fade)
  );
  --ccs-neutral--bg-full-fade: hsla(
    var(--ccs-h--neutral),
    var(--ccs-s--neutral),
    var(--ccs-l--bg-contrast),
    var(--ccs-fade)
  );
  background-color: var(--ccs-background, var(--ccs--bg-full));
  color: var(--ccs-color, var(--ccs--fg-full));
}

[data-ccs=root] {
  --ccs-mode--os: 1;
}
@media (prefers-color-scheme: dark) {
  [data-ccs=root] {
    --ccs-mode--os: -1;
  }
}

[data-ccs-colors] {
  --ccs-mode--cascade: var(--ccs-mode--html, var(--ccs-mode--user, var(--ccs-mode--os, 1)));
  --ccs-mode: var(--ccs-mode--cascade, 1);
  --ccs-mode--zero: calc((var(--ccs-mode) + 1) * 0.5);
  --ccs-invert: calc(-1 * var(--ccs-mode));
  --ccs-invert--zero: calc((var(--ccs-invert) + 1) * 0.5);
}

[data-ccs-colors=light] {
  --ccs-mode--html: 1;
}

[data-ccs-colors=dark] {
  --ccs-mode--html: -1;
}

[data-ccs-colors=invert] {
  --ccs-mode: calc(-1 * var(--ccs-mode--cascade, 1));
}

[data-ccs-theme=complement] {
  --ccs-theme--1: calc(var(--ccs-h--prime) + 180);
  --ccs-theme--2: var(--ccs-theme--1);
}

[data-ccs-theme=triad] {
  --ccs-theme--1: calc(var(--ccs-h--prime) + 120);
  --ccs-theme--2: calc(var(--ccs-h--prime) - 120);
}

[data-ccs-theme=adjacent] {
  --ccs-theme--1: calc(var(--ccs-h--prime) + 60);
  --ccs-theme--2: calc(var(--ccs-h--prime) - 60);
}

[data-ccs-theme=contrast] {
  --ccs-contrast: 200%;
  --ccs-custom-contrast: none;
}

[data-ccs-colors] {
  --ccs-step: calc(var(--ccs-contrast) / 6);
  --ccs-l--bg1: calc(var(--ccs-l) + var(--ccs-step) * 1 * var(--ccs-mode));
  --ccs-l--fg1: calc(var(--ccs-l) - var(--ccs-step) * 1 * var(--ccs-mode));
  --ccs-s--fg1: calc(var(--ccs-s) - var(--ccs-step) * 1);
  --ccs-s--bg1: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 1);
  --ccs-prime--fg1: hsl(var(--ccs-h--prime), var(--ccs-s--fg1), var(--ccs-l--fg1));
  --ccs-prime--bg1: hsl(var(--ccs-h--prime), var(--ccs-s--bg1), var(--ccs-l--bg1));
  --ccs-prime--fg1-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg1), var(--ccs-l--fg1), var(--ccs-fade));
  --ccs-prime--bg1-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg1), var(--ccs-l--bg1), var(--ccs-fade));
  --ccs-accent--fg1: hsl(var(--ccs-h--accent), var(--ccs-s--fg1), var(--ccs-l--fg1));
  --ccs-accent--bg1: hsl(var(--ccs-h--accent), var(--ccs-s--bg1), var(--ccs-l--bg1));
  --ccs-accent--fg1-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg1), var(--ccs-l--fg1), var(--ccs-fade));
  --ccs-accent--bg1-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg1), var(--ccs-l--bg1), var(--ccs-fade));
  --ccs-special--fg1: hsl(var(--ccs-h--special), var(--ccs-s--fg1), var(--ccs-l--fg1));
  --ccs-special--bg1: hsl(var(--ccs-h--special), var(--ccs-s--bg1), var(--ccs-l--bg1));
  --ccs-special--fg1-fade: hsla(var(--ccs-h--special), var(--ccs-s--fg1), var(--ccs-l--fg1), var(--ccs-fade));
  --ccs-special--bg1-fade: hsla(var(--ccs-h--special), var(--ccs-s--bg1), var(--ccs-l--bg1), var(--ccs-fade));
  --ccs-neutral--fg1: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg1));
  --ccs-neutral--bg1: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg1));
  --ccs-neutral--fg1-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg1), var(--ccs-fade));
  --ccs-neutral--bg1-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg1), var(--ccs-fade));
  --ccs-l--bg2: calc(var(--ccs-l) + var(--ccs-step) * 2 * var(--ccs-mode));
  --ccs-l--fg2: calc(var(--ccs-l) - var(--ccs-step) * 2 * var(--ccs-mode));
  --ccs-s--fg2: calc(var(--ccs-s) - var(--ccs-step) * 2);
  --ccs-s--bg2: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 2);
  --ccs-prime--fg2: hsl(var(--ccs-h--prime), var(--ccs-s--fg2), var(--ccs-l--fg2));
  --ccs-prime--bg2: hsl(var(--ccs-h--prime), var(--ccs-s--bg2), var(--ccs-l--bg2));
  --ccs-prime--fg2-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg2), var(--ccs-l--fg2), var(--ccs-fade));
  --ccs-prime--bg2-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg2), var(--ccs-l--bg2), var(--ccs-fade));
  --ccs-accent--fg2: hsl(var(--ccs-h--accent), var(--ccs-s--fg2), var(--ccs-l--fg2));
  --ccs-accent--bg2: hsl(var(--ccs-h--accent), var(--ccs-s--bg2), var(--ccs-l--bg2));
  --ccs-accent--fg2-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg2), var(--ccs-l--fg2), var(--ccs-fade));
  --ccs-accent--bg2-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg2), var(--ccs-l--bg2), var(--ccs-fade));
  --ccs-special--fg2: hsl(var(--ccs-h--special), var(--ccs-s--fg2), var(--ccs-l--fg2));
  --ccs-special--bg2: hsl(var(--ccs-h--special), var(--ccs-s--bg2), var(--ccs-l--bg2));
  --ccs-special--fg2-fade: hsla(var(--ccs-h--special), var(--ccs-s--fg2), var(--ccs-l--fg2), var(--ccs-fade));
  --ccs-special--bg2-fade: hsla(var(--ccs-h--special), var(--ccs-s--bg2), var(--ccs-l--bg2), var(--ccs-fade));
  --ccs-neutral--fg2: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg2));
  --ccs-neutral--bg2: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg2));
  --ccs-neutral--fg2-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg2), var(--ccs-fade));
  --ccs-neutral--bg2-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg2), var(--ccs-fade));
  --ccs-l--bg3: calc(var(--ccs-l) + var(--ccs-step) * 3 * var(--ccs-mode));
  --ccs-l--fg3: calc(var(--ccs-l) - var(--ccs-step) * 3 * var(--ccs-mode));
  --ccs-s--fg3: calc(var(--ccs-s) - var(--ccs-step) * 3);
  --ccs-s--bg3: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 3);
  --ccs-prime--fg3: hsl(var(--ccs-h--prime), var(--ccs-s--fg3), var(--ccs-l--fg3));
  --ccs-prime--bg3: hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg3));
  --ccs-prime--fg3-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg3), var(--ccs-l--fg3), var(--ccs-fade));
  --ccs-prime--bg3-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg3), var(--ccs-fade));
  --ccs-accent--fg3: hsl(var(--ccs-h--accent), var(--ccs-s--fg3), var(--ccs-l--fg3));
  --ccs-accent--bg3: hsl(var(--ccs-h--accent), var(--ccs-s--bg3), var(--ccs-l--bg3));
  --ccs-accent--fg3-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg3), var(--ccs-l--fg3), var(--ccs-fade));
  --ccs-accent--bg3-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg3), var(--ccs-l--bg3), var(--ccs-fade));
  --ccs-special--fg3: hsl(var(--ccs-h--special), var(--ccs-s--fg3), var(--ccs-l--fg3));
  --ccs-special--bg3: hsl(var(--ccs-h--special), var(--ccs-s--bg3), var(--ccs-l--bg3));
  --ccs-special--fg3-fade: hsla(var(--ccs-h--special), var(--ccs-s--fg3), var(--ccs-l--fg3), var(--ccs-fade));
  --ccs-special--bg3-fade: hsla(var(--ccs-h--special), var(--ccs-s--bg3), var(--ccs-l--bg3), var(--ccs-fade));
  --ccs-neutral--fg3: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg3));
  --ccs-neutral--bg3: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg3));
  --ccs-neutral--fg3-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg3), var(--ccs-fade));
  --ccs-neutral--bg3-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg3), var(--ccs-fade));
  --ccs-l--bg4: calc(var(--ccs-l) + var(--ccs-step) * 4 * var(--ccs-mode));
  --ccs-l--fg4: calc(var(--ccs-l) - var(--ccs-step) * 4 * var(--ccs-mode));
  --ccs-s--fg4: calc(var(--ccs-s) - var(--ccs-step) * 4);
  --ccs-s--bg4: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 4);
  --ccs-prime--fg4: hsl(var(--ccs-h--prime), var(--ccs-s--fg4), var(--ccs-l--fg4));
  --ccs-prime--bg4: hsl(var(--ccs-h--prime), var(--ccs-s--bg4), var(--ccs-l--bg4));
  --ccs-prime--fg4-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg4), var(--ccs-l--fg4), var(--ccs-fade));
  --ccs-prime--bg4-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg4), var(--ccs-l--bg4), var(--ccs-fade));
  --ccs-accent--fg4: hsl(var(--ccs-h--accent), var(--ccs-s--fg4), var(--ccs-l--fg4));
  --ccs-accent--bg4: hsl(var(--ccs-h--accent), var(--ccs-s--bg4), var(--ccs-l--bg4));
  --ccs-accent--fg4-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg4), var(--ccs-l--fg4), var(--ccs-fade));
  --ccs-accent--bg4-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg4), var(--ccs-l--bg4), var(--ccs-fade));
  --ccs-special--fg4: hsl(var(--ccs-h--special), var(--ccs-s--fg4), var(--ccs-l--fg4));
  --ccs-special--bg4: hsl(var(--ccs-h--special), var(--ccs-s--bg4), var(--ccs-l--bg4));
  --ccs-special--fg4-fade: hsla(var(--ccs-h--special), var(--ccs-s--fg4), var(--ccs-l--fg4), var(--ccs-fade));
  --ccs-special--bg4-fade: hsla(var(--ccs-h--special), var(--ccs-s--bg4), var(--ccs-l--bg4), var(--ccs-fade));
  --ccs-neutral--fg4: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg4));
  --ccs-neutral--bg4: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg4));
  --ccs-neutral--fg4-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg4), var(--ccs-fade));
  --ccs-neutral--bg4-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg4), var(--ccs-fade));
  --ccs-l--bg5: calc(var(--ccs-l) + var(--ccs-step) * 5 * var(--ccs-mode));
  --ccs-l--fg5: calc(var(--ccs-l) - var(--ccs-step) * 5 * var(--ccs-mode));
  --ccs-s--fg5: calc(var(--ccs-s) - var(--ccs-step) * 5);
  --ccs-s--bg5: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 5);
  --ccs-prime--fg5: hsl(var(--ccs-h--prime), var(--ccs-s--fg5), var(--ccs-l--fg5));
  --ccs-prime--bg5: hsl(var(--ccs-h--prime), var(--ccs-s--bg5), var(--ccs-l--bg5));
  --ccs-prime--fg5-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg5), var(--ccs-l--fg5), var(--ccs-fade));
  --ccs-prime--bg5-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg5), var(--ccs-l--bg5), var(--ccs-fade));
  --ccs-accent--fg5: hsl(var(--ccs-h--accent), var(--ccs-s--fg5), var(--ccs-l--fg5));
  --ccs-accent--bg5: hsl(var(--ccs-h--accent), var(--ccs-s--bg5), var(--ccs-l--bg5));
  --ccs-accent--fg5-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg5), var(--ccs-l--fg5), var(--ccs-fade));
  --ccs-accent--bg5-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg5), var(--ccs-l--bg5), var(--ccs-fade));
  --ccs-special--fg5: hsl(var(--ccs-h--special), var(--ccs-s--fg5), var(--ccs-l--fg5));
  --ccs-special--bg5: hsl(var(--ccs-h--special), var(--ccs-s--bg5), var(--ccs-l--bg5));
  --ccs-special--fg5-fade: hsla(var(--ccs-h--special), var(--ccs-s--fg5), var(--ccs-l--fg5), var(--ccs-fade));
  --ccs-special--bg5-fade: hsla(var(--ccs-h--special), var(--ccs-s--bg5), var(--ccs-l--bg5), var(--ccs-fade));
  --ccs-neutral--fg5: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg5));
  --ccs-neutral--bg5: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg5));
  --ccs-neutral--fg5-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg5), var(--ccs-fade));
  --ccs-neutral--bg5-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg5), var(--ccs-fade));
  --ccs-l--bg6: calc(var(--ccs-l) + var(--ccs-step) * 6 * var(--ccs-mode));
  --ccs-l--fg6: calc(var(--ccs-l) - var(--ccs-step) * 6 * var(--ccs-mode));
  --ccs-s--fg6: calc(var(--ccs-s) - var(--ccs-step) * 6);
  --ccs-s--bg6: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 6);
  --ccs-prime--fg6: hsl(var(--ccs-h--prime), var(--ccs-s--fg6), var(--ccs-l--fg6));
  --ccs-prime--bg6: hsl(var(--ccs-h--prime), var(--ccs-s--bg6), var(--ccs-l--bg6));
  --ccs-prime--fg6-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg6), var(--ccs-l--fg6), var(--ccs-fade));
  --ccs-prime--bg6-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg6), var(--ccs-l--bg6), var(--ccs-fade));
  --ccs-accent--fg6: hsl(var(--ccs-h--accent), var(--ccs-s--fg6), var(--ccs-l--fg6));
  --ccs-accent--bg6: hsl(var(--ccs-h--accent), var(--ccs-s--bg6), var(--ccs-l--bg6));
  --ccs-accent--fg6-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg6), var(--ccs-l--fg6), var(--ccs-fade));
  --ccs-accent--bg6-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg6), var(--ccs-l--bg6), var(--ccs-fade));
  --ccs-special--fg6: hsl(var(--ccs-h--special), var(--ccs-s--fg6), var(--ccs-l--fg6));
  --ccs-special--bg6: hsl(var(--ccs-h--special), var(--ccs-s--bg6), var(--ccs-l--bg6));
  --ccs-special--fg6-fade: hsla(var(--ccs-h--special), var(--ccs-s--fg6), var(--ccs-l--fg6), var(--ccs-fade));
  --ccs-special--bg6-fade: hsla(var(--ccs-h--special), var(--ccs-s--bg6), var(--ccs-l--bg6), var(--ccs-fade));
  --ccs-neutral--fg6: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg6));
  --ccs-neutral--bg6: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg6));
  --ccs-neutral--fg6-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg6), var(--ccs-fade));
  --ccs-neutral--bg6-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg6), var(--ccs-fade));
  --stop: calc(100% / (6 * 2 + 1));
  --prime-gradient: linear-gradient(to right, var(--ccs-prime--bg6) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-prime--bg5) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-prime--bg4) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-prime--bg3) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-prime--bg2) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-prime--bg1) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-prime) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-prime--fg1) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-prime--fg2) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-prime--fg3) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-prime--fg4) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-prime--fg5) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-prime--fg6) calc(var(--stop) * 12) calc(var(--stop) * 13));
  --prime-gradient--fade: linear-gradient(to right, var(--ccs-prime--bg6-fade) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-prime--bg5-fade) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-prime--bg4-fade) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-prime--bg3-fade) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-prime--bg2-fade) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-prime--bg1-fade) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-prime--fade) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-prime--fg1-fade) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-prime--fg2-fade) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-prime--fg3-fade) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-prime--fg4-fade) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-prime--fg5-fade) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-prime--fg6-fade) calc(var(--stop) * 12) calc(var(--stop) * 13));
  --accent-gradient: linear-gradient(to right, var(--ccs-accent--bg6) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-accent--bg5) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-accent--bg4) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-accent--bg3) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-accent--bg2) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-accent--bg1) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-accent) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-accent--fg1) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-accent--fg2) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-accent--fg3) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-accent--fg4) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-accent--fg5) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-accent--fg6) calc(var(--stop) * 12) calc(var(--stop) * 13));
  --accent-gradient--fade: linear-gradient(to right, var(--ccs-accent--bg6-fade) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-accent--bg5-fade) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-accent--bg4-fade) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-accent--bg3-fade) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-accent--bg2-fade) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-accent--bg1-fade) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-accent--fade) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-accent--fg1-fade) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-accent--fg2-fade) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-accent--fg3-fade) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-accent--fg4-fade) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-accent--fg5-fade) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-accent--fg6-fade) calc(var(--stop) * 12) calc(var(--stop) * 13));
  --special-gradient: linear-gradient(to right, var(--ccs-special--bg6) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-special--bg5) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-special--bg4) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-special--bg3) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-special--bg2) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-special--bg1) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-special) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-special--fg1) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-special--fg2) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-special--fg3) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-special--fg4) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-special--fg5) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-special--fg6) calc(var(--stop) * 12) calc(var(--stop) * 13));
  --special-gradient--fade: linear-gradient(to right, var(--ccs-special--bg6-fade) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-special--bg5-fade) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-special--bg4-fade) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-special--bg3-fade) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-special--bg2-fade) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-special--bg1-fade) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-special--fade) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-special--fg1-fade) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-special--fg2-fade) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-special--fg3-fade) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-special--fg4-fade) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-special--fg5-fade) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-special--fg6-fade) calc(var(--stop) * 12) calc(var(--stop) * 13));
  --neutral-gradient: linear-gradient(to right, var(--ccs-neutral--bg6) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-neutral--bg5) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-neutral--bg4) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-neutral--bg3) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-neutral--bg2) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-neutral--bg1) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-neutral) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-neutral--fg1) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-neutral--fg2) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-neutral--fg3) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-neutral--fg4) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-neutral--fg5) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-neutral--fg6) calc(var(--stop) * 12) calc(var(--stop) * 13));
  --neutral-gradient--fade: linear-gradient(to right, var(--ccs-neutral--bg6-fade) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-neutral--bg5-fade) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-neutral--bg4-fade) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-neutral--bg3-fade) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-neutral--bg2-fade) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-neutral--bg1-fade) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-neutral--fade) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-neutral--fg1-fade) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-neutral--fg2-fade) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-neutral--fg3-fade) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-neutral--fg4-fade) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-neutral--fg5-fade) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-neutral--fg6-fade) calc(var(--stop) * 12) calc(var(--stop) * 13));
}

[data-ccs-field] {
  display: var(--ccs-custom-display, var(--ccs-field-display, block));
}

[data-ccs-field=hue] {
  --ccs-custom-display: var(--ccs-custom-hue, block);
}

[data-ccs-field=lightness] {
  --ccs-custom-display: var(--ccs-custom-lightness, block);
}

[data-ccs-field=saturation] {
  --ccs-custom-display: var(--ccs-custom-saturation, block);
}

[data-ccs-field=contrast] {
  --ccs-custom-display: var(--ccs-custom-contrast, block);
}

[data-ccs-colors] {
  --ccs-neutral--theme: var(--ccs-h--prime);
  --ccs-background: var(--bg);
  --ccs-color: var(--text);
  --bg: var(--ccs-neutral--bg-full);
  --bg-full: var(--ccs--bg-full);
  --callout: hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg5));
  --callout-neutral: var(--ccs-neutral--bg5);
  --callout-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg2), var(--ccs-l--bg5), var(--ccs-fade));
  --overlay: var(--callout-fade);
  --feature-from: hsl(var(--ccs-h--prime), var(--ccs-s), var(--ccs-l--fg2));
  --feature-to: hsl(var(--ccs-h--accent), var(--ccs-s), var(--ccs-l--fg2));
  --text: var(--ccs-neutral--fg-full);
  --text-light: var(--ccs-neutral--fg3);
  --accent: var(--ccs-accent--fg1);
  --feature: var(--ccs-prime--fg4);
  --feature-special: var(--ccs-special--fg4);
  --highlight: var(--ccs-accent--fg3);
  --highlight-prime: var(--ccs-accent--fg3);
  --highlight-special: var(--ccs-special--fg3);
  --border: var(--ccs-neutral);
  --border-fade: var(--ccs-neutral--fade);
  --shadow: hsl(var(--ccs-h--neutral), var(--ccs-s--fg6), var(--ccs-l--fg6), 0.25);
  --action: var(--ccs-prime--fg3);
  --active: var(--feature, var(--ccs-prime--fg4));
  --icons: var(--feature-special, var(--ccs-special--fg4));
  --strikeout: var(--highlight, var(--ccs-accent--fg3));
  --img-bright--base: calc(var(--ccs-mode--zero) * 50% + var(--ccs-invert--zero) * 40%);
  --img-bright--default: calc(var(--img-bright--base) + var(--ccs-l));
  --img-contrast--default: calc(55% + var(--ccs-contrast));
  --feature-gradient: linear-gradient(
    to bottom right,
    var(--feature-from),
    var(--feature-to)
  );
}

[data-ccs-theme] {
  --ccs-accent--theme: calc(var(--ccs-mode--zero) * var(--ccs-theme--1) + var(--ccs-invert--zero) * var(--ccs-theme--2));
  --ccs-special--theme: calc(var(--ccs-mode--zero) * var(--ccs-theme--2) + var(--ccs-invert--zero) * var(--ccs-theme--1));
}

[data-ccs-theme=oddbird] {
  --ccs-h--prime: var(--ccs-prime--config);
  --ccs-h--accent: var(--ccs-accent--config);
  --ccs-h--special: var(--ccs-special--config);
  --ccs-custom-hue: none;
}

[data-ccs-theme=monochrome] {
  --ccs-accent--theme: var(--ccs-h--prime);
  --ccs-special--theme: var(--ccs-h--prime);
}

html {
  --small: max(16px, 0.75em);
  --xsmall: max(14px, 0.5em);
  --rem: calc(1.25em + 0.5cqi);
  --medium: 1.25em;
  --large: max(1.25em, 0.5em + 2cqi);
  --xlarge: max(1.25em, 0.5em + 4cqi);
  --h1: var(--xlarge, max(1.25em, 0.5em + 4cqi));
  --h2: var(--xlarge, max(1.25em, 0.5em + 4cqi));
  --h3: var(--large, max(1.25em, 0.5em + 2cqi));
  --h4: var(--medium, 1.25em);
  --code: 0.9em;
  --gutter: 0.75rem;
  --newline: var(--gutter, 0.75rem);
  --gutter-plus: calc(var(--gutter) * 1.5);
  --double-gutter: calc(var(--gutter) * 2);
  --triple-gutter: calc(var(--gutter) * 3);
  --shim: calc(var(--gutter) / 2);
  --shim-plus: calc(var(--gutter) * 0.75);
  --half-shim: calc(var(--gutter) / 4);
  --quarter-shim: calc(var(--gutter) / 8);
  --spacer: calc(var(--double-gutter) + 3vw);
  --page-margin: calc(var(--quarter-shim) + 4vw);
  --border-width: medium;
  --radius: var(--quarter-shim);
  --grid-item: 12em;
  --min-page: 15em;
  --page: 45em;
  --wide-break: 56em;
}
@media (max-width: 44.99em) {
  html {
    --fit-min: 100%;
  }
}

/* The bare minimum English subset, plus copyright & arrows (← ↑ → ↓) & quotes (“ ” ‘ ’) & bullet (•) */
@font-face {
  font-family: "Recursive";
  font-style: oblique -15deg 0deg;
  font-weight: 300 1000;
  font-display: fallback;
  src: url("/assets/fonts/Recursive_VF_1.043--subset_range_english_basic.woff2") format("woff2 supports variations"), url("/assets/fonts/Recursive_VF_1.043--subset_range_english_basic.woff2") format("woff2-variations");
  unicode-range: U+0020-007F, U+00A9, U+2190-2193, U+2018, U+2019, U+201C, U+201D, U+2022;
}
html {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: normal;
  --mono: 0;
  --casl: 0;
  --slnt: 0;
  --ital: 0.5;
  font-family: Verdana, Geneva, sans-serif;
  font-feature-settings: "dlig" 1, "liga" 1;
  font-size: calc(1.25em + 0.5cqi);
  font-size: var(--rem);
}
@supports (font-variation-settings: normal) {
  html {
    font-family: Recursive, Verdana, Geneva, sans-serif;
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  [data-smooth] {
    scroll-behavior: smooth;
  }
}

:focus {
  outline: medium dotted currentColor;
  outline-color: var(--outline-color, var(--text, currentColor));
  outline-offset: var(--quarter-shim);
}

a:link, a:visited {
  --underline-color--default: var(--accent);
  --underline-thickness--default: 0.1em;
  --underline-offset--default: 0.125em;
  color: var(--link, var(--action));
}
a:hover, a:focus {
  --img-bright: 1;
  --img-contrast: 1;
  --underline-color: var(--active);
  --underline-thickness: 0.2em;
  color: var(--link-focus, var(--active));
}
a .link-text, a:link, a:visited {
  transition: text-decoration 200ms ease-in-out;
  text-decoration: underline;
  text-decoration-color: var(--underline-color, var(--underline-color--default));
  text-decoration-thickness: var(--underline-thickness, var(--underline-thickness--default));
  text-decoration-skip-ink: auto;
  text-underline-offset: var(--underline-offset, var(--underline-offset--default));
}
a.icon-link {
  text-decoration: none;
}

[href*="://"]::after {
  content: "↗";
  font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --link: currentColor;
  margin-bottom: 0;
}

h1,
h2,
h3,
h4 {
  margin-top: var(--newline);
}

h1,
h2 {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: 1000;
  line-height: 1.2;
}
h1 strong,
h2 strong {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: 1000;
}
h1 i,
h1 code,
h1 em,
h2 i,
h2 code,
h2 em {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: 200;
}
h1 i,
h2 i {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  --slnt: -15;
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: 600;
  --casl: 1;
  font-size: var(--h3);
}

h4 {
  font-size: var(--h4);
}

.pre {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: 200;
  --slnt: -15;
  display: block;
  margin: 0;
}
.pre + * {
  margin-top: 0;
}

audio,
canvas,
iframe,
video {
  margin-bottom: var(--newline);
}

img {
  filter: brightness(var(--img-bright, var(--img-bright--default, 1))) contrast(var(--img-contrast, var(--img-contrast--default, 1)));
}

picture {
  display: contents;
}

source {
  display: none;
}

audio {
  width: 100%;
}

svg {
  fill: var(--fill, currentColor);
  padding: 1px;
}

[data-face=miriam] {
  --mia-svg-animate: none;
  --mia-svg-eyes: darkslategray;
}

hr {
  border: medium dotted var(--border);
  border-width: medium 0 0;
  margin: var(--spacer) 0;
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(1px 1px 1px 1px);
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

::selection {
  /* stylelint-disable */
  background-color: var(--ccs-accent--fg5) !important;
  color: var(--bg) !important;
  /* stylelint-enable */
}

.click-select {
  user-select: all;
}

p,
ul,
ol {
  margin-bottom: var(--newline);
  margin-top: 0;
}

ul,
ol {
  padding-left: var(--list-padding, var(--list-padding--default, 0));
}
ul ul,
ul ol,
ol ul,
ol ol {
  --list-padding--default: 1em;
}
@media (max-width: 55.99em) {
  ul,
  ol {
    --list-padding--default: 1em;
  }
}

::marker {
  color: var(--highlight);
}
ul ::marker {
  font-size: 0.75em;
}

summary {
  cursor: pointer;
  color: var(--action);
}
summary:hover, summary:focus, summary:active, [open] > summary {
  color: var(--active);
}

[data-btn] {
  align-items: center;
  background: var(--btn-bg, linear-gradient(to bottom right, var(--highlight), var(--feature)));
  border: thin solid var(--btn-border, var(--btn-text, var(--feature)));
  border-radius: var(--radius);
  color: var(--btn-text, var(--bg));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  padding: var(--quarter-shim) var(--btn-padding, var(--double-gutter));
  position: relative;
}
[data-btn]:hover, [data-btn]:focus {
  --btn-bg: var(--accent);
  --btn-text: var(--bg);
}
[data-btn]:active, [data-btn][aria-pressed=true] {
  --btn-bg: var(--active);
  --btn-text: var(--bg);
}
[data-btn][aria-pressed=true]::before {
  content: "✔";
  color: var(--accent);
  left: 0;
  text-shadow: 1px 1px 0 var(--btn-text);
  transform: translateX(-0.5em);
}

[data-btn~=small] {
  --btn-padding: var(--shim);
  font-size: var(--small);
}

[data-btn~=menu] {
  font-family: body;
  --btn-bg: transparent;
  --btn-border: var(--border-fade);
  --btn-text: var(--action);
  --marker: var(--btn-text);
  display: list-item;
}
[open] [data-btn~=menu] {
  --btn-bg: var(--active);
  --btn-border: var(--btn-bg);
  --btn-text: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
}

textarea {
  min-height: calc(6em + 4vw);
  resize: vertical;
}

select {
  font: inherit;
  font-size: var(--small);
  width: 100%;
}

fieldset {
  border-color: var(--border-fade);
  margin: 0 0 var(--newline);
  padding: var(--shim);
}

legend {
  font-size: var(--small);
  padding: 0 var(--shim);
}

[data-field],
[data-fieldset] {
  display: var(--ccs-custom-display, block);
  margin-bottom: var(--shim);
}

[data-label] {
  display: block;
}

[data-input*=text] {
  background-color: var(--bg-full);
  border: thin solid var(--border);
  border-radius: 0;
  color: var(--text);
  display: block;
  font: inherit;
  font-size: var(--small);
  padding: var(--half-shim);
  width: 100%;
}
[data-input*=text]:focus {
  border-color: var(--action);
  outline: medium solid var(--action);
  outline-offset: 0;
}

.form-actions {
  margin-top: var(--newline);
}

[data-honey] {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(1px 1px 1px 1px);
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

[type=range] {
  appearance: none;
  background: var(--border) no-repeat;
  border-radius: 0.25em;
  border: thin solid var(--text);
  display: block;
  height: 1.5em;
  width: 100%;
  padding: 0;
  /* stylelint-disable */
  /* stylelint-enable */
  /* stylelint-disable */
  /* stylelint-enable */
}
[type=range]::-webkit-slider-runnable-track {
  appearance: none;
  background: none;
  cursor: pointer;
}
[type=range]::-moz-range-track {
  appearance: none;
  background: none;
  cursor: pointer;
}
[type=range]::-ms-track {
  appearance: none;
  background: none;
  cursor: pointer;
}
[type=range]::-webkit-slider-thumb {
  appearance: none;
  border: medium solid var(--accent);
  height: 1.5em;
  width: 1em;
  border-radius: 0.25em;
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 1px var(--bg) inset;
  background: transparent;
  cursor: pointer;
}
[type=range]::-moz-range-thumb {
  appearance: none;
  border: medium solid var(--accent);
  height: 1.5em;
  width: 1em;
  border-radius: 0.25em;
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 1px var(--bg) inset;
  background: transparent;
  cursor: pointer;
}
[type=range]::-ms-thumb {
  appearance: none;
  border: medium solid var(--accent);
  height: 1.5em;
  width: 1em;
  border-radius: 0.25em;
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 1px var(--bg) inset;
  background: transparent;
  cursor: pointer;
}

[data-radio=group] {
  --focus-ring: var(--text);
  --radio-border: var(--text);
  --radio-focus: var(--active);
  display: flex;
}

[data-radio=input] {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(1px 1px 1px 1px);
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

[data-radio=option] {
  border: thin solid var(--radio-border);
  border-radius: var(--first, 0) var(--last, 0) var(--last, 0) var(--first, 0);
  cursor: pointer;
  flex: auto;
  padding: var(--quarter-shim) var(--gutter);
  text-align: center;
  text-transform: capitalize;
}
[data-radio=input]:checked + [data-radio=option] {
  --radio-border: var(--radio-focus);
  box-shadow: 0 0 0 var(--quarter-shim) var(--radio-focus) inset;
  color: var(--active);
}
[data-radio=input]:focus + [data-radio=option] {
  outline: medium dotted currentColor;
  outline-color: var(--focus-ring, var(--text, currentColor));
  outline-offset: var(--quarter-shim);
  z-index: 1;
  position: relative;
}
[data-radio=option]:first-of-type {
  --first: var(--radius);
}
[data-radio=option]:last-of-type {
  --last: var(--radius);
}

.dropdown-summary {
  margin-right: auto;
  max-width: max-content;
  padding: var(--half-shim) var(--shim);
}
.dropdown-summary[aria-pressed=true], [open] .dropdown-summary {
  z-index: 5;
}
.dropdown-summary[aria-pressed=true]::before, [open] .dropdown-summary::before {
  z-index: 4;
  content: var(--auto-close, initial);
  inset: 0;
  position: fixed;
}

[data-dropdown] {
  z-index: 5;
  --top: initial;
  --right: initial;
  --bottom: initial;
  --left: initial;
  background: var(--callout);
  bottom: var(--bottom);
  border: var(--border-width) solid var(--border);
  box-shadow: var(--box-shadow);
  display: none;
  gap: var(--shim);
  left: var(--left);
  max-height: calc(var(--rhythm) * 2 + 40vh);
  max-width: calc(100vw - var(--gutter) * 2);
  overflow-y: auto;
  position: absolute;
  right: var(--right);
  top: var(--top);
  width: 35ch;
}
[data-dropdown][aria-expanded=true], [open] [data-dropdown] {
  display: grid;
}

[data-dropdown~=top] {
  --bottom: 100%;
}

[data-dropdown~=bottom] {
  --top: 100%;
}

[data-dropdown~=left] {
  --right: 0;
}

[data-dropdown~=right] {
  --left: 0;
}

[data-dropdown~=auto-close] {
  --auto-close: "";
}

[data-dropdown~=list] {
  list-style: none;
  margin: 0;
}

[data-dropdown~=links] a:link, [data-dropdown~=links] a:visited {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: var(--half-shim) var(--shim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-dropdown~=links] a:hover, [data-dropdown~=links] a:focus, [data-dropdown~=links] a:active {
  background: var(--bg);
}

[data-dropdown~=pad] {
  padding: var(--shim);
}

img {
  --img-filter-bright: brightness(var(--img-bright, 100%));
  transition: filter 200ms ease-in-out;
  filter: var(--img-filter, var(--img-filter-bright));
}
img:hover {
  --img-bright: 100%;
}

.ratio {
  position: relative;
}
.ratio::before {
  content: "";
  display: inline-block;
  height: 0;
  padding-top: calc(100% / var(--ratio));
  width: 1px;
}
.ratio iframe {
  height: 100%;
  width: 100%;
  inset: 0;
}

[data-pattern=figure] {
  --main-column: pull;
  background: var(--callout);
  margin: var(--gutter) 0;
  padding: var(--gutter);
}
[data-meta=page] + [data-pattern=figure] {
  --main-column: unset;
  margin-top: 0;
}

[data-figure=content] {
  display: grid;
  gap: var(--shim);
  grid-template-columns: [full-start] repeat(auto-fit, minmax(40%, 1fr)) [full-end];
}
[data-figure=content] img,
[data-figure=content] svg {
  width: 100%;
}
[data-figure=content] [style] {
  grid-column: var(--span, initial);
  width: var(--width, 100%);
}

[data-figure=caption] {
  font-size: var(--font-small);
  margin-top: var(--half-shim);
}

[data-place] {
  height: var(--height, auto);
  width: var(--width, 100%);
}

[data-icon] {
  display: inline-block;
  height: var(--icon-height, var(--icon-size, 1em));
  transform: translateY(-0.1em);
  width: var(--icon-width, var(--icon-size, 1em));
}

[data-face] {
  --eyes: hsla(
    var(--ccs-h--neutral),
    var(--ccs-s--bg6),
    var(--ccs-l--bg6),
    var(--ccs-invert--zero)
  );
}

.founder-faces {
  fill: var(--highlight);
}

.eyes {
  fill: var(--eyes, black);
}

[data-media] {
  --column: wide;
  --list-padding--default: 1em;
  align-items: var(--align, start);
  display: grid;
  gap: var(--media-gap, var(--gutter));
  grid-template-areas: var(--reverse-y, "image" "content");
  margin: var(--newline) 0;
}
[data-media][data-reverse~=vertical] {
  --reverse-y: "content" "image";
}
@media (min-width: 56em) {
  [data-media] {
    grid-template-areas: var(--reverse-x, "image content");
    grid-template-columns: fit-content(25%) minmax(min-content, var(--media-content, 1fr));
  }
  [data-media][data-reverse~=horizontal] {
    --reverse-x: "content image";
    grid-template-columns: minmax(min-content, var(--media-content, 1fr)) fit-content(25%);
  }
}

.media-image {
  grid-area: image;
  justify-self: center;
  max-width: var(--media-max, initial);
  min-width: var(--media-min, initial);
  width: var(--media-size, initial);
}
.media-image img,
.media-image svg {
  border-radius: var(--media-radius, initial);
  height: var(--media-height, auto);
  object-fit: var(--media-fit, initial);
  object-position: var(--media-position, initial);
  width: 100%;
}

.media-content {
  grid-area: content;
}
.media-content > *:first-child {
  margin-top: 0;
}
.media-content > *:last-child {
  margin-bottom: 0;
}

[data-media=quote] {
  --media-size: 5em;
  --media-height: var(--media-size);
  --media-radius: 100%;
  --media-gap: var(--shim);
  --media-fit: cover;
  --media-position: center;
}

[data-ratio=parent] {
  --ratio: 1.7777777778;
  position: relative;
}
[data-ratio=parent]::before {
  content: "";
  display: inline-block;
  height: 0;
  padding-top: calc(100% / var(--ratio, 1.7777777778));
  width: 1px;
}

[data-ratio=child] {
  height: 100%;
  width: 100%;
  inset: 0;
}

/* stylelint-disable */
/**
 * Prism base code highlighter theme using Sass
 *
 * @author @MoOx
 */
code[class*=language-], pre[class*=language-] {
  tab-size: 2;
  hyphens: none;
  white-space: pre;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  font-family: Recursive, Mono, Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
  font-size: inherit;
  line-height: inherit;
  color: var(--text);
  text-shadow: var(--text-shadow);
}

pre[class*=language-] {
  padding: 0;
}

:not(pre) > code[class*=language-] {
  padding: 0;
}

code[class*=language-] .namespace, pre[class*=language-] .namespace {
  opacity: 0.7;
}
code[class*=language-] .token.comment, code[class*=language-] .token.prolog, code[class*=language-] .token.doctype, code[class*=language-] .token.cdata, pre[class*=language-] .token.comment, pre[class*=language-] .token.prolog, pre[class*=language-] .token.doctype, pre[class*=language-] .token.cdata {
  color: var(--text-light);
}
code[class*=language-] .token.null, code[class*=language-] .token.operator, code[class*=language-] .token.boolean, code[class*=language-] .token.number, pre[class*=language-] .token.null, pre[class*=language-] .token.operator, pre[class*=language-] .token.boolean, pre[class*=language-] .token.number {
  color: var(--highlight-prime);
}
code[class*=language-] .token.attr-name, code[class*=language-] .token.string, pre[class*=language-] .token.attr-name, pre[class*=language-] .token.string {
  color: var(--highlight-prime);
}
code[class*=language-] .token.entity, code[class*=language-] .token.url, .language-css code[class*=language-] .token.string, .style code[class*=language-] .token.string, pre[class*=language-] .token.entity, pre[class*=language-] .token.url, .language-css pre[class*=language-] .token.string, .style pre[class*=language-] .token.string {
  color: var(--highlight-prime);
}
code[class*=language-] .token.selector, pre[class*=language-] .token.selector {
  color: var(--highlight-special);
}
code[class*=language-] .token.atrule, code[class*=language-] .token.attr-value, code[class*=language-] .token.keyword, code[class*=language-] .token.control, code[class*=language-] .token.directive, code[class*=language-] .token.important, code[class*=language-] .token.unit, pre[class*=language-] .token.atrule, pre[class*=language-] .token.attr-value, pre[class*=language-] .token.keyword, pre[class*=language-] .token.control, pre[class*=language-] .token.directive, pre[class*=language-] .token.important, pre[class*=language-] .token.unit {
  color: var(--highlight);
}
code[class*=language-] .token.regex, code[class*=language-] .token.statement, pre[class*=language-] .token.regex, pre[class*=language-] .token.statement {
  color: var(--highlight-prime);
}
code[class*=language-] .token.placeholder, code[class*=language-] .token.variable, pre[class*=language-] .token.placeholder, pre[class*=language-] .token.variable {
  color: var(--highlight);
}
code[class*=language-] .token.property, code[class*=language-] .token.tag, pre[class*=language-] .token.property, pre[class*=language-] .token.tag {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  --slnt: -15;
  color: var(--highlight-prime);
}
code[class*=language-] .token.important, code[class*=language-] .token.statement, pre[class*=language-] .token.important, pre[class*=language-] .token.statement {
  font-weight: bold;
}
code[class*=language-] .token.punctuation, pre[class*=language-] .token.punctuation {
  color: var(--text-light);
}
code[class*=language-] .token.entity, pre[class*=language-] .token.entity {
  cursor: help;
}
code[class*=language-] .token.debug, pre[class*=language-] .token.debug {
  color: red;
}

/* stylelint-enable */
[type=range] {
  appearance: none;
  background: var(--border) no-repeat;
  border-radius: 0.25em;
  border: thin solid var(--text);
  display: block;
  height: 1.5em;
  width: 100%;
  padding: 0;
  /* stylelint-disable */
  /* stylelint-enable */
  /* stylelint-disable */
  /* stylelint-enable */
}
[type=range]::-webkit-slider-runnable-track {
  appearance: none;
  background: none;
  cursor: pointer;
}
[type=range]::-moz-range-track {
  appearance: none;
  background: none;
  cursor: pointer;
}
[type=range]::-ms-track {
  appearance: none;
  background: none;
  cursor: pointer;
}
[type=range]::-webkit-slider-thumb {
  appearance: none;
  border: medium solid var(--accent);
  height: 1.5em;
  width: 1em;
  border-radius: 0.25em;
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 1px var(--bg) inset;
  background: transparent;
  cursor: pointer;
}
[type=range]::-moz-range-thumb {
  appearance: none;
  border: medium solid var(--accent);
  height: 1.5em;
  width: 1em;
  border-radius: 0.25em;
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 1px var(--bg) inset;
  background: transparent;
  cursor: pointer;
}
[type=range]::-ms-thumb {
  appearance: none;
  border: medium solid var(--accent);
  height: 1.5em;
  width: 1em;
  border-radius: 0.25em;
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 1px var(--bg) inset;
  background: transparent;
  cursor: pointer;
}

strong,
em {
  color: var(--feature-to);
}
@supports (background-clip: text) {
  strong,
  em {
    --link-color: transparent;
    background: hsl(330, 100%, 45%);
    background: var(--feature-gradient);
    background-clip: text;
    box-decoration-break: clone;
    color: transparent;
    padding-inline-start: 0;
    padding-inline-end: 0.1em;
    text-shadow: none;
  }
}
@media print {
  strong,
  em {
    background: transparent;
    color: var(--feature-to);
  }
}

strong {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: 600;
}

em {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  --slnt: -15;
}

blockquote {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  --slnt: -15;
  --casl: 1;
  font-size: var(--medium);
  position: relative;
  margin-block-start: var(--quote-space-left, revert);
  max-width: 46ch;
}
blockquote::before {
  content: '"';
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: 1000;
  margin-right: var(--shim);
  position: absolute;
  right: 100%;
  color: var(--feature-to);
}
@supports (background-clip: text) {
  blockquote::before {
    --link-color: transparent;
    background: hsl(330, 100%, 45%);
    background: var(--feature-gradient);
    background-clip: text;
    box-decoration-break: clone;
    color: transparent;
    padding-inline-start: 0;
    padding-inline-end: 0.1em;
    text-shadow: none;
  }
}
@media print {
  blockquote::before {
    background: transparent;
    color: var(--feature-to);
  }
}
blockquote strong {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: normal;
  --link-color: var(--bg);
  background: var(--feature-gradient);
  color: var(--bg);
  padding-inline: 0.1em;
  text-shadow: none;
}
blockquote > :first-child {
  margin-top: 0;
}
blockquote > :last-child {
  margin-bottom: 0;
}
blockquote .cite {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: normal;
  --mono: 0;
  --casl: 0;
  --slnt: 0;
  --ital: 0.5;
  font-size: var(--small);
  padding-right: 0.2ch;
  color: var(--feature-to);
}
@supports (background-clip: text) {
  blockquote .cite {
    --link-color: transparent;
    background: hsl(330, 100%, 45%);
    background: var(--feature-gradient);
    background-clip: text;
    box-decoration-break: clone;
    color: transparent;
    padding-inline-start: 0;
    padding-inline-end: 0.1em;
    text-shadow: none;
  }
}
@media print {
  blockquote .cite {
    background: transparent;
    color: var(--feature-to);
  }
}

pre,
code,
tt {
  font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
}
@supports (font-variation-settings: normal) {
  pre,
  code,
  tt {
    font-family: Recursive, Verdana, Geneva, sans-serif;
    font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
    --mono: 1;
  }
}

code,
code[class*=language-] {
  font-size: var(--code);
}

mark {
  background: var(--callout);
  color: var(--text);
}

[data-bright] {
  color: var(--feature-to);
}
@supports (background-clip: text) {
  [data-bright] {
    --link-color: transparent;
    background: hsl(330, 100%, 45%);
    background: var(--feature-gradient);
    background-clip: text;
    box-decoration-break: clone;
    color: transparent;
    padding-inline-start: 0;
    padding-inline-end: 0.1em;
    text-shadow: none;
  }
}
@media print {
  [data-bright] {
    background: transparent;
    color: var(--feature-to);
  }
}

s,
strike,
del {
  text-decoration-color: var(--strikeout);
  text-decoration-thickness: 0.125em;
}

time {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: 200;
  --mono: 1;
}

lean-qr:defined {
  background-color: white;
  block-size: var(--qr-size, 3lh);
}
lean-qr:defined[data-position] {
  box-shadow: 0 0 var(--shim) black;
}

[inline-qr] {
  --qr-size: 1.5lh;
  display: inline-block;
  vertical-align: middle;
}

html {
  overflow-y: auto;
  scroll-snap-type: block proximity;
}

[data-body] {
  display: grid;
  grid-template: "banner" auto "main" 1fr "footer" auto/100%;
  min-height: 100vh;
}

[role=banner] {
  grid-area: banner;
}

main {
  grid-area: main;
}

[role=contentinfo] {
  grid-area: footer;
}

[role=banner] {
  z-index: 2;
  background: var(--overlay);
  display: grid;
  font-size: var(--small);
  gap: var(--gutter);
  grid-template: "bread links" auto/1fr auto;
  padding: var(--half-shim) var(--gutter);
}

[data-nav=external] {
  --newline: 0;
  --list-padding: 0;
}
[data-nav=external] li {
  display: inline-block;
}
[data-nav=external] li:not(:last-child)::after {
  content: " | ";
}
@media (max-width: 55.99em) {
  [data-nav=external] {
    display: none;
  }
}

[data-fieldgroup=contact-info] {
  display: grid;
  grid-column-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
}

.social-list {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--small);
  margin: var(--newline) 0;
  padding: 0;
}
.social-list li {
  list-style: none;
  margin: 0 var(--gutter) var(--shim) 0;
}
#meta .social-list {
  margin-top: 0;
}

[data-ccs=buttons] {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--shim);
}

[data-ccs-input=hue] {
  background-image: linear-gradient(to right, hsl(10, 80%, 40%), hsl(20, 80%, 40%), hsl(30, 80%, 40%), hsl(40, 80%, 40%), hsl(50, 80%, 40%), hsl(60, 80%, 40%), hsl(70, 80%, 40%), hsl(80, 80%, 40%), hsl(90, 80%, 40%), hsl(100, 80%, 40%), hsl(110, 80%, 40%), hsl(120, 80%, 40%), hsl(130, 80%, 40%), hsl(140, 80%, 40%), hsl(150, 80%, 40%), hsl(160, 80%, 40%), hsl(170, 80%, 40%), hsl(180, 80%, 40%), hsl(190, 80%, 40%), hsl(200, 80%, 40%), hsl(210, 80%, 40%), hsl(220, 80%, 40%), hsl(230, 80%, 40%), hsl(240, 80%, 40%), hsl(250, 80%, 40%), hsl(260, 80%, 40%), hsl(270, 80%, 40%), hsl(280, 80%, 40%), hsl(290, 80%, 40%), hsl(300, 80%, 40%), hsl(310, 80%, 40%), hsl(320, 80%, 40%), hsl(330, 80%, 40%), hsl(340, 80%, 40%), hsl(350, 80%, 40%), hsl(0, 80%, 40%));
}

[data-ccs-input=lightness] {
  background-image: linear-gradient(to right, hsl(0, 0%, 25%), silver);
}

[data-ccs-input=saturation] {
  background-image: linear-gradient(to right, hsl(var(--ccs-h--prime, 0), 0.1%, var(--ccs-l, 50%)), hsl(var(--ccs-h--prime, 0), 100%, var(--ccs-l, 50%)));
}

[data-ccs-input=contrast] {
  background-image: linear-gradient(to right, gray, white), linear-gradient(to right, gray, black);
  background-size: 100% 50%, 100% 100%;
  background-position: top left, bottom left;
}

[role=contentinfo] {
  background: var(--callout);
  border-top: thick solid var(--border);
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--fit-min, 10rem), 1fr));
  font-size: var(--small);
  padding: var(--spacer) var(--gutter);
}
[data-slides] + [role=contentinfo] {
  min-height: 100vh;
}
[data-view=grid] [role=contentinfo] {
  min-height: initial;
}
@media print {
  [role=contentinfo] {
    display: none;
  }
}
[role=contentinfo] h2 {
  font-size: var(--h4);
  margin-bottom: var(--shim);
}

.page {
  padding: 0 var(--gutter);
  margin: var(--spacer) auto;
  max-width: var(--page);
}
.page h1,
.page h2 {
  margin-bottom: var(--newline);
  color: var(--feature-to);
}
@supports (background-clip: text) {
  .page h1,
  .page h2 {
    --link-color: transparent;
    background: hsl(330, 100%, 45%);
    background: var(--feature-gradient);
    background-clip: text;
    box-decoration-break: clone;
    color: transparent;
    padding-inline-start: 0;
    padding-inline-end: 0.1em;
    text-shadow: none;
  }
}
@media print {
  .page h1,
  .page h2 {
    background: transparent;
    color: var(--feature-to);
  }
}
.page h2 {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  font-weight: 200;
  font-size: var(--h3);
}
.page h3 {
  font-size: var(--h4);
}

[data-events] {
  list-style: none;
}

.event {
  margin-bottom: var(--double-gutter);
}
.event h2,
.event h3 {
  color: var(--feature-to);
}
@supports (background-clip: text) {
  .event h2,
  .event h3 {
    --link-color: transparent;
    background: hsl(330, 100%, 45%);
    background: var(--feature-gradient);
    background-clip: text;
    box-decoration-break: clone;
    color: transparent;
    padding-inline-start: 0;
    padding-inline-end: 0.1em;
    text-shadow: none;
  }
}
@media print {
  .event h2,
  .event h3 {
    background: transparent;
    color: var(--feature-to);
  }
}
.event h2,
.event h3,
.event p {
  margin: 0;
}
.event p {
  font-size: var(--small);
}

.event-talk {
  font-weight: bold;
}
.event-talk::before {
  content: " | ";
}

@media print {
  [control-toggle] {
    visibility: hidden;
  }
}

#control-panel[open] {
  display: grid;
}

#control-panel {
  padding: 0;
  gap: var(--shim);
}
#control-panel form {
  background: var(--callout);
  padding: var(--shim);
  text-align: right;
}
#control-panel ul {
  display: grid;
  gap: var(--shim);
  padding: var(--gutter);
}

[data-body=slides] {
  scroll-snap-align: start;
}

[data-slides] {
  grid-area: banner/main/main;
}
@media (orientation: landscape) {
  [data-slides] {
    display: grid;
    grid-auto-rows: 100svh;
  }
}
[data-view=grid] [data-slides] {
  display: grid;
  gap: var(--double-gutter);
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-page), 1fr));
  padding: var(--spacer) var(--gutter);
  place-content: safe center;
}

[id^=slide] {
  aspect-ratio: 16/9;
  container: slide/inline-size;
  display: grid;
  grid-template: "slide" 1fr "script" auto/100%;
  scroll-snap-align: start;
}
@media (orientation: landscape) {
  [id^=slide] {
    aspect-ratio: initial;
  }
}
[data-view=grid] [id^=slide] {
  grid-template: "slide" auto "script" 1fr/100%;
  scroll-margin-top: var(--double-gutter);
}
[data-view=grid] [id^=slide]:target [data-slide] {
  z-index: 3;
  outline: thick dotted var(--accent);
  outline-offset: var(--shim);
}
[id^=slide]:target + [id^=slide] {
  --slide-animation-active: none;
}
[id^=slide]:target {
  --slide-animation-active: initial;
  --slide-play: running;
}
@media print {
  [id^=slide] {
    contain: size;
    height: 100vh;
    overflow: hidden;
  }
}

.slide {
  background: var(--slide-background, var(--bg));
  border-top: thin solid var(--border);
  color: var(--slide-color, var(--text));
  display: grid;
  font-size: min(0.25rem + 2cqi, 3cqi);
  grid-area: slide;
  grid-template: "content" 1fr "footer" auto/var(--width, 1fr);
}
[data-view=grid] .slide {
  border: thin solid var(--border);
}
[data-view=grid] .slide::before {
  content: "";
  grid-area: content;
  grid-row-end: footer;
  height: 0;
  padding-top: 50%;
  width: 0;
}

.slide-content {
  align-content: var(--align, safe center);
  display: grid;
  grid-area: content;
  justify-content: var(--justify, safe center);
  max-width: 100%;
  overflow: auto;
  padding: var(--padding, var(--gutter));
  position: relative;
  resize: var(--resize, none);
}
.slide-content img,
.slide-content svg,
.slide-content video {
  width: var(--img-width, var(--media-width, 100%));
}
.slide-content hr {
  margin-block: var(--gutter);
}
.slide-content [data-position] {
  position: absolute;
}
.slide-content [data-position~=top] {
  top: var(--shim);
}
.slide-content [data-position~=right] {
  right: var(--shim);
}
.slide-content [data-position~=bottom] {
  bottom: var(--shim);
}
.slide-content [data-position~=left] {
  left: var(--shim);
}

.slide-footer {
  z-index: 1;
  align-items: center;
  background: var(--callout);
  display: grid;
  font-size: var(--xsmall);
  grid-area: footer;
  grid-template: "caption nav" auto/minmax(0, 1fr) auto;
  justify-content: space-between;
}
[data-view=grid] .slide-footer {
  border-bottom: thin solid var(--border);
}

.slide-caption {
  --newline: 0;
  grid-area: caption;
  padding: var(--half-shim) var(--gutter);
  overflow-wrap: break-word;
}

.slide-nav {
  font-variation-settings: "MONO" var(--mono), "CASL" var(--casl), "slnt" var(--slnt), "ital" var(--ital);
  --mono: 1;
  grid-area: nav;
  padding: var(--half-shim) var(--gutter);
  white-space: nowrap;
}
[data-present=true] .slide-nav {
  opacity: var(--nav-opacity, 0.125);
}
.slide-nav:hover, .slide-nav:focus-within {
  --nav-opacity: 1;
}

.slide-notes {
  background: var(--bg);
  display: none;
  grid-area: script;
  padding: var(--gutter) var(--gutter) 0;
}
[data-view=grid] .slide-notes {
  display: block;
}

@media print {
  [data-to] {
    display: none;
  }
}
[data-slide=event-title] em,
[data-slide=event-title] strong {
  display: inline-block;
}

[data-media=title-detail] {
  --align: center;
  --fill: var(--feature);
}

[data-slide=closer] .slide-content {
  justify-items: center;
}
[data-slide=closer] blockquote {
  border: 2px solid var(--border);
  border-image: var(--feature-gradient) 1;
  border-width: 2px 0;
  padding: var(--gutter) 0;
}

[data-media=closer-detail] {
  --fill: var(--feature);
}

[data-slide=intro-oss] {
  --align: stretch;
  --justify: stretch;
}
[data-slide=intro-oss] a::after {
  content: none;
}
[data-slide=intro-oss] .oss-logos {
  align-content: safe center;
  align-items: safe center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6em, var(--grid-item)));
  justify-content: space-evenly;
  list-style: none;
  margin: 0;
}

[data-slide=intro-logo] {
  --slide-background: var(--ccs-prime--bg3);
  --justify: stretch;
  --padding: var(--gutter) var(--spacer);
}

[data-slide~=img] {
  --align: stretch;
  --justify: stretch;
  --padding: 0;
  --width: 100%;
}
[data-slide~=img] .slide-content {
  display: flex;
  flex-direction: column;
}
[data-slide~=img] img,
[data-slide~=img] svg {
  overflow: hidden;
  object-fit: var(--img-fit, cover);
  object-position: var(--img-position, top);
  width: 100%;
}
@supports (object-fit: cover) {
  [data-slide~=img] img,
  [data-slide~=img] svg {
    flex: 1 1 15vh;
  }
}

[data-slide~=twoup] .slide-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--double-gutter) minmax(0, 1fr);
}
[data-slide~=twoup] img {
  block-size: 100%;
  clip-path: polygon(var(--tl, 0 0), var(--tr, 100% 0), var(--br, 100% 100%), var(--bl, 0 100%));
  grid-row: 1;
  grid-column: var(--col, 1)/span 2;
  inline-size: 100%;
}
[data-slide~=twoup] picture:not(:first-child) {
  --tl: var(--double-gutter) 0;
  --col: 2;
}
[data-slide~=twoup] picture:not(:last-child) {
  --br: calc(100% - var(--double-gutter)) 100%;
}

[data-slide~=iframe] {
  --align: stretch;
  --justify: stretch;
  --padding: 0;
  --width: 100%;
}
[data-slide~=iframe] .slide-content {
  background: white;
  color: black;
}
[data-slide~=iframe] iframe {
  --frame-size: calc(100% / var(--frame-zoom, 1));
  height: var(--frame-size, 100%);
  margin: 0;
  width: var(--frame-size, 100%);
  transform-origin: 0 0;
  transform: scale(var(--frame-zoom, 1));
}
@media print {
  [data-slide~=iframe] iframe {
    height: 100%;
    width: 100%;
    transform: none;
  }
}

[data-slide~=codepen] .cp_embed_wrapper {
  display: contents;
}
@media print {
  [data-slide~=codepen] .cp_embed_wrapper {
    display: none;
  }
}
[data-slide~=codepen] .slide-content {
  background-image: var(--print);
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
}

[data-slide~=caniuse] {
  --padding: inherit;
  --img-fit: contain;
  --justify: stretch;
}
[data-slide~=caniuse] a::after {
  display: none;
}
[data-slide~=caniuse] browser-support {
  box-shadow: 0 0 100cqi var(--status-color);
}
[data-slide~=caniuse] browser-support > * {
  margin: unset;
}

[data-slide=person] {
  --align: stretch;
  --justify: stretch;
  --padding: 0;
  --width: 100%;
  --list-padding--default: var(--double-gutter);
}
[data-slide=person] .slide-content {
  display: grid;
  grid-template-columns: [face-start] minmax(0, 1fr) [bio-start] var(--spacer) [face-end] 2fr [bio-end];
}
[data-slide=person] .u-photo {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--spacer)) 100%, 0 100%);
  grid-area: 1/face;
  object-fit: var(--img-fit, cover);
  object-position: var(--img-position, center);
  overflow: hidden;
  place-self: stretch;
}
[data-slide=person] .pre {
  font-size: var(--h3);
}
[data-slide=person] .person {
  align-self: safe center;
  background: var(--bg);
  display: grid;
  grid-area: 1/bio;
  padding: var(--gutter);
  position: relative;
}
[data-slide=person] blockquote {
  margin: 0;
  margin-inline-start: var(--shim);
}

.toc li:has(~ [aria-current]) {
  text-decoration: line-through;
  text-decoration-color: var(--strikeout);
  text-decoration-thickness: 0.125em;
}
.toc h2 {
  margin-block: 0;
}

[data-slide=todo] {
  --bg: var(--ccs-accent--bg4);
  --border: var(--accent);
}

[data-slide~=feature] .slide-content {
  background: url("/assets/img/oddbird-footer.png") no-repeat bottom right;
  background-size: auto 4lh;
  gap: var(--gutter);
  grid-template-rows: 3fr 1fr auto;
}
[data-slide~=feature] .slide-content header {
  display: grid;
  gap: var(--gutter);
  grid-template: "title qr" 6lh/1fr 6lh;
  display: grid;
  align-content: center;
}
[data-slide~=feature] .slide-content [feature-title] {
  align-self: center;
}
[data-slide~=feature] .slide-content .subtitle {
  font-style: italic;
}
[data-slide~=feature] .slide-content lean-qr {
  block-size: 100%;
  grid-area: qr;
  place-self: stretch;
}
[data-slide~=feature] .slide-content [feature-link] {
  place-self: start;
}
[data-slide~=feature] .slide-content footer {
  display: grid;
  grid-template-columns: 1fr auto;
}
[data-slide~=feature] .slide-content [feature-bird] {
  font-size: var(--small);
}
[data-slide~=feature] .slide-content [data-logo] {
  block-size: 1.5lh;
}

/*# sourceMappingURL=screen.css.map */