/* Simple CSS: https://simplecss.org/ */
/* Andy Bell: https://piccalil.li/blog/a-modern-css-reset/ */
/* Josh Comeau: https://www.joshwcomeau.com/css/custom-css-reset/ */
/* Bootstrap 5: */
/* Heydon Pickering: */
/* https://github.com/alvaromontoro/almond.css */

/* Simplerest: https://codepen.io/2kool2/pen/WNXQpGx?editors=0100 */

html {
  /* Bootstrap 5 default font-stack */
  --sans-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mono-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  /* Fluid-responsive font sizing */
  --base_size: 1.125;
  --font_size: calc(1rem * var(--base_size));
  --font_size: 1rem;
  --base-fontsize: clamp(var(--font_size), calc(var(--font_size) + (2 - var(--base_size)) * ((100vw - 48rem) / (120 - 48))), 2rem);

  /* Minor third scale progression - see https://type-scale.com/ */
/*   --header-scale: 1.2; */

  /* Major third scale progression - see https://type-scale.com/ */
  --header-scale: 1.25;

  /* Font sizes */
  --fs-100: calc(var(--base-fontsize) / (var(--header-scale) * 1.3));
  --fs-200: calc(var(--base-fontsize) / (var(--header-scale) * var(--header-scale) * var(--header-scale)));
  --fs-300: calc(var(--base-fontsize) / (var(--header-scale) * var(--header-scale)));
  --fs-400: calc(var(--base-fontsize) / var(--header-scale));
  --fs-500: var(--base-fontsize);
  --fs-600: calc(var(--base-fontsize) * var(--header-scale));
  --fs-700: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
  --fs-800: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
  --fs-900: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));

  /* Line-heights, headings, summary, cite, etc */
  --lh-100: calc(2ex + 2px);
  --lh-200: calc(2ex + 4px);
  --lh-300: calc(2ex + 6px);
  --lh-400: calc(2ex + 8px);
  --lh-500: 1.7;
  --lh-600: 1.8;
  --lh-700: 1.9;
  --lh-800: 2;
}

html {

  /* Spacings, usually margins are vertical (v), and padding is horizontal (h) */
  --v-space: 1rem;
  --v-space-0_25: calc(var(--v-space) / 4);
  --v-space-0_5: calc(var(--v-space) / 2);
  --v-space-1_5: calc(var(--v-space) * 1.5);
  --v-space-2: calc(var(--v-space) * 2);
  --v-space-3: calc(var(--v-space) * 3);

  --h-space: 8px; /* Change to rem at larger viewport widths */
  --h-space-0_25: calc(var(--h-space) / 4);
  --h-space-0_5: calc(var(--h-space) / 2);
  --h-space-1_5: calc(var(--h-space) * 1.5);
  --h-space-2: calc(var(--h-space) * 2);
  --h-space-3: calc(var(--h-space) * 3);
  --h-space-4: calc(var(--h-space) * 4);
}

html {
  --color-scheme: light;
  /* Default (light) theme (requires WCAG 2.2 contrast checking) */
  --bg: #f5fff5;
  --accent-bg: #ded;
  --text: #030;
  --text-light: #363;
  --border: #8821ff;
  /* --border-nav: #f3fef3; */
  --border-nav: #fffc;

  /* --accent: #9c7be7; */
  --accent: #74d;
  --accent-light: #90caf9; /* Fail against #f0f0f0 UNUSED */
  --accent-hover: #90f;

  --code: #0700DF;
  --code-shadow: 0 1px 2px #fff;
  --preformatted: #2b782b;
  --preformattedBorder: #2b782b77;
  --marked: #cfd;
  --disabled: #efefef;

  --imgFilter: none;
  --textShadow: #fff;

  --selectionColor: #000;
  --selectionBg: #dcf;
  --dialogBg: rgba(0,0,0,0.85);

  --bg-image: var(--bg) url("data:image/svg+xml,%3Csvg style='opacity:.25' viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --bg-accent-image: var(--accent-bg) url("data:image/svg+xml,%3Csvg style='opacity:.25' viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

  --svg-color: var(--accent);
  --svg-filter: drop-shadow(0 2px 2px #0306);

  /* Focus */
  --FocusRing-outline-color: #c0f;

  --content-width: 65ch;
  --letter-spacing: -.025ch;

  --text-gradient: linear-gradient(0deg,#30c,#c3f);
  /* --link-gradient: linear-gradient(45deg,#f0f,#90f); */
  --link-gradient: linear-gradient(150deg,#f0f,#90f);
  /* --border-gradient: linear-gradient(140deg,#f0f,#30c); */
  --border-gradient: linear-gradient(90deg,#f0f 20%,#30c);

  /* Tooltips */
  --tooltip-text: var(--text);
  --tooltip-bg: var(--bg);
  --tooltip-border: gray;
  --tooltip-shadow: 0 2px 4px #0307;

}

/* dark theme (requires WCAG 2.2 contrast checking) */
@media (prefers-color-scheme: dark) {
  html:not([data-lightMode="light"]) {
    --color-scheme: dark;
    --bg: #1a1a1a;
    --accent-bg: #292729;
    --text: #ddd;
    --text-light: #ababab;
    --border: #666;
    --border-nav: #444;
    --accent: #f90;
    --accent-light: #ffecb3;
    --accent-hover: #fe6;
    --code: #c45eff;
    --code-shadow: 0 1px 1px #000;
    --preformatted: #3c3;
    --preformattedBorder: #3c37;
    --disabled: rgba(255, 179, 0, 0.5);

    --imgFilter: grayscale(10%) brightness(90%) saturate(120%);
    --textShadow: #000;

    --selectionColor: #000;
    --selectionBg: #fd3;

    /* Focus */
    --FocusRing-outline-color: #ee0;
    
    /* Only on dark mode! */
    /* -webkit-font-smoothing: antialiased; */
    /* -moz-osx-font-smoothing: grayscale; */
/*     font-smoothing: antialiased; */
/*     text-rendering: optimizeLegibility; */
    --bg-image: #040404 url("data:image/svg+xml,%3Csvg style='opacity:.25' viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    --bg-accent-image: #222 url("data:image/svg+xml,%3Csvg style='opacity:.125' viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

    --svg-color: #f90;
    --svg-filter: drop-shadow(0 2px 2px #000);

    --letter-spacing: -.015ch;
    --text-gradient: linear-gradient(0deg,#f60,#ff0);
    --link-gradient: linear-gradient(-30deg,#f60,#ff0);
    --border-gradient: linear-gradient(140deg,#ff09,#f609);

    /* Tooltips */
    --tooltip-text: var(--text);
    --tooltip-bg: var(--bg);
    --tooltip-border: #555;
    --tooltip-shadow: 0 2px 4px #000;
  }
}
html[data-lightMode="dark"] {
  --color-scheme: dark;
  --bg: #1a1a1a;
  --accent-bg: #292729;
  --text: #ddd;
  --text-light: #ababab;
  --border: #666;
  --border-nav: #444;
  --accent: #f90;
  --accent-light: #ffecb3;
  --accent-hover: #fe6;
  --code: #c45eff;
  --code-shadow: 0 1px 1px #000;
  --preformatted: #3c3;
  --preformattedBorder: #3c37;
  --disabled: rgba(255, 179, 0, 0.5);

  --imgFilter: grayscale(10%) brightness(90%) saturate(120%);
  --textShadow: #000;

  --selectionColor: #000;
  --selectionBg: #fd3;

  /* Focus */
  --FocusRing-outline-color: #ee0;

  /* Only on dark mode (for Mac OS) */
  /* -webkit-font-smoothing: antialiased; */
  /* -moz-osx-font-smoothing: grayscale; */
  /* font-smoothing: antialiased; */
  --bg-image: #040404 url("data:image/svg+xml,%3Csvg style='opacity:.25' viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --bg-accent-image: #222 url("data:image/svg+xml,%3Csvg style='opacity:.125' viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

  --svg-color: #f90;
  --svg-filter: drop-shadow(0 2px 2px #000);

  --letter-spacing: -.015ch;
  --text-gradient: linear-gradient(0deg,#f60,#ff0);
  --link-gradient: linear-gradient(-30deg,#f60,#ff0);
  --border-gradient: linear-gradient(140deg,#ff09,#f609);

  /* Tooltips */
  --tooltip-text: var(--text);
  --tooltip-bg: var(--bg);
  --tooltip-border: #555;
  --tooltip-shadow: 0 2px 4px #000;
}

/* Set core root defaults */
html {
  color-scheme: var(--color-scheme);
  font-family: var(--sans-font);
  font-size: var(--base-fontsize);
  letter-spacing: var(--letter-spacing);

  /* Prevent font size changing with orientation on iOS */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  
  /* text-rendering: optimizeLegibility; */

  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

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

body {
  line-height: var(--lh-500);
  color: var(--text);
  background: var(--bg-image, var(--bg));

  /* Fix Safari bug with viewport units in calc() */
  min-height: 0vw;

/*   -webkit-font-smoothing: antialiased; */
/*   text-rendering: optimizeSpeed; */
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (min-width: 40em) {
  body {
    --h-space: 1rem;
    hyphens: initial;
  }
}
main header,
body > footer {
  background: var(--bg-accent-image, var(--accent-bg));
}


/* Layout (Landmarks full width (bg colour, bg images), content wrap limited to ideal reading length) */
main > header > div,
footer > div,
main > div {
  margin: 0 auto;
  max-width: var(--content-width);
}

:is(h1, h2, h3, h4, button) {
  font-weight: var(--fw-bold, 400);
  line-height: var(--lh-200);
}
:is(h1, h2, h3, h4) {
  letter-spacing: -.03ch;
}
h1 + p:first-of-type {
  font-size: var(--fs-500);
  /* font-weight: 300; */
  /* line-height: var(--lh-300); */
  margin-top: var(--v-space-0_5);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
img,
video {
  filter: var(--imgFilter);
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
a, area, button, input, label, select, summary, textarea, [tabindex], [contenteditable] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}


/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
[role="list"],
[role="menu"] {
  list-style: none;
}

.flex_wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex_wrap > * {
  flex-grow: 1;
  width: calc((50rem - 100%) * 999);
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Simple.css with updated nav, figure, margins */

body > header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1rem;
}
header {
  border-bottom: 1px solid var(--border);
}
main > header {
  background-color: var(--accent-bg);
}
main > header:first-child > div * + * {
  margin-top: var(--v-space-0_5);
}

header > div,
main > div {
  padding: var(--v-space) var(--h-space);
}

main * + *:not(a, input, pre, details, li, tool-tip) {
  margin-top: var(--v-space);
}
main * + h2 {
  margin-top: var(--v-space-3);
}
main * + :is(h3, h4, h5, h6) {
  margin-top: var(--v-space-2);
}
main * + :is(details),
main :is(figure) + *:not(h2,h3,h4,h5,h6) {
  margin-top: var(--v-space-1_5);
}
main > header {
  margin: 0;
}
ul:not([role=list]) > li + li,
ol:not([role=list]) > li + li {
  margin-top: var(--v-space-0_5);
}
dt {
  font-weight: var(--fw-bold, bold);
}
main dl * + *:not(dt) {
  margin-top: var(--v-space-0_25);
}

table caption {
  margin-bottom: var(--v-space-0_25);
}
figcaption + * {
  margin-top: var(--v-space-0_25);
}

/* Header Navigation */

nav {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  max-width: var(--content-width);
  padding: var(--v-space) var(--h-space);
  width: 100%;
}
nav > *,
nav li {
  width: max-content;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: space-evenly;
  width: 100%;
}
nav a[href],
nav a[href]:visited {
  background-color: var(--bg);
  border: 2px solid var(--border-nav);
  /* border-radius: 0.125em; */
  color: var(--text);
  display: block;
  line-height: var(--lh-300);
  padding: 0.425rem .85rem;
  text-decoration: none;
  /* transition: none; */
}
/* Reduce nav link size on non-touch devices */
/* @media (min-width: 50em) {
  .noTouch nav a[href],
  .noTouch nav a[href]:visited {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid var(--border-nav);
    border-radius: 0;
    padding: 0 .25em;
  }
}
@media (min-width: 60em) {
  .noTouch nav a[href],
  .noTouch nav a[href]:visited {
    font-size: .8em;
    padding: 0 .5em;
  }
} */
nav a[href]:hover,
nav a[href]:focus {
  background-color: var(--bg);
  border-color: var(--accent);
  border-image: var(--link-gradient) 1;
  color: var(--accent);
}
nav a[href][aria-current="page"] {
  color: var(--accent);
  border-color: var(--accent);
}


/* skip-to-content link */

.skip-to-content {
  left: 0.5rem;
  padding: 0.5rem 1rem;
  position: absolute;
  transform: translate3d(0, -7rem, 0);
  transition-property: 
    var(--transition-properties),
    transform;
  z-index: 10;
}
.skip-to-content:focus {
  transform: translate3d(0, 0, 0);
}
@media print {
  .skip-to-content {
    display: none;
  }
}


body > footer {
  color: var(--text-light);
  border-top: 1px solid var(--border);
  margin-top: var(--v-space-3);
  padding: var(--v-space-2) var(--h-space);
  text-align: center;
}

/* Format headers */
h1, .h1 {
  font-size: var(--fs-900);
}

h2, .h2 {
  font-size: var(--fs-800);
}

h3, .h3,
dialog h1 {
  font-size: var(--fs-700);
}

h4, .h4 {
  font-size: var(--fs-600);
}

h5, .h5 {
  font-size: var(--fs-500);
}

h6, .h6 {
  font-size: var(--fs-400);
}

:is(h2, h3, h4, h5, h6) {
  line-height: var(--lh-400);
}

/* Format links & buttons */
a[href],
a[href]:visited {
  color: var(--accent);
  will-change:
    color,
    text-underline-offset,
    text-decoration-thickness;
}

a[href]:is(:hover, :focus) {
  color: var(--accent-hover);
}
a[href]:hover {
  /* text-decoration-color: transparent; */
  text-underline-offset: 0.25em;
  text-decoration-thickness: 3px;
}

button:is([aria-haspopup], [role="menuitemcheckbox"]) {
  background-color: transparent;
  color: var(--text);
}

button:not([aria-haspopup], [role="menuitemcheckbox"]),
[role="button"],
input:is([type="submit"], [type="reset"], [type="button"]) {
  border: none;
  border-radius: 4px;
  background-color: var(--accent);
  color: var(--bg);
  font-size: inherit;
  line-height: var(--lh-300);
  padding: 0.7rem 0.9rem;
}

button:not([aria-haspopup], [role="menuitemcheckbox"]):focus,
button:not([aria-haspopup], [role="menuitemcheckbox"]):enabled:hover,
[role="button"]:focus,
[role="button"]:not([aria-disabled="true"]):hover,
input:is([type="submit"], [type="reset"], [type="button"]):focus,
input:is([type="submit"], [type="reset"], [type="button"]):enabled:hover {
  background-color: var(--accent-hover);
  cursor: pointer;
}


:disabled,
[aria-disabled="true"] {
  background-color: var(--disabled);
  cursor: default;
  cursor: not-allowed;
  opacity: 0.5;
}

input[type="range"] {
  padding: 0;
}

/* Set the cursor to '?' while hovering over an abbreviation */
abbr[title] {
  cursor: help;
}

/* Format the expanding box */
details {
  background: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: 0.25em;
  padding: 0.625rem var(--h-space);
}

summary {
  display: list-item;
  /* display: block; - will remove the marker triangle */
  cursor: pointer;
  line-height: var(--lh-400);
}
/* Make summary text clear the marker when over multiple lines */
summary > span {
  display: inline-block;
  pointer-events: none;
  /* vertical-align: baseline; */
  /* vertical-align: text-top; */
  vertical-align: middle;
  width: calc(100% - 1.1em);
}

details[open] {
  padding: 0.625rem var(--h-space) 0.75rem var(--h-space);
  padding-bottom: 0.75rem;
}

details[open] summary {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.625rem;
}


/* Format tables */

/* div:has(> table), */
.responsive_wrap {
  max-width: 100%;
  overflow: auto hidden;
}
@media (min-width: 20em) {
  .responsive_wrap {
    overflow: initial;
  }
}

table {
  border-collapse: collapse;
  margin: var(--v-space-1_5) 0;
  width: 100%;
  
  /* For responsive_wrap to scroll table */
  min-width: 16rem;
}

td,
th {
  border: 1px solid var(--border);
  padding: var(--v-space-0_5) var(--h-space-0_5);
  text-align: left;
}

th {
  background: var(--accent-bg);
  font-weight: var(--fw-bold, bold);
}

tr:nth-child(even) {
  /* Set every other cell slightly darker. Improves readability. */
  background-color: var(--accent-bg);
}

table caption {
  color: var(--text-light);
  text-align: left;
}


/* Lists */
ol,
ul {
  /* px to prevent scaling content off the right side of the screen at larger magnifications */
  padding-left: 32px;
}
[role=list] {
  list-style: none;
  padding-left: 0;
}
[role=list] [role=list] {
  margin: 0;
  padding-left: 16px;
}

/* Safari */
::-webkit-details-marker {
  color: var(--accent);
}
::marker {
  color: var(--accent);
}




/* Format forms */

label {
  display: block;
  display: flex;
  gap: .5rem;
}
/* label + *, should cover all the below */
label + textarea,
label + select,
label + input {
  margin-top: var(--v-space-0_25);
}
textarea,
select,
input:not([type=radio], [type=checkbox], [type=range]) {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--text);
  background-color: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: 0.25em;
  box-shadow: none;
  font: inherit;
  max-width: 30em;
  padding: 0.5em;
  width: 100%;
}

/* Add arrow to  */
select {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' width='30'%3E%3Cpath fill='%237f7f7f' d='M0,0l6,8l6-8'/%3E%3C/svg%3E") center right no-repeat var(--accent-bg);
  padding-right: 1rem;
}

select[multiple] {
  background-image: none;
}

/* Make the textarea wider than other inputs */
/* textarea {
  width: 80%;
} */

input[type=range] {
  accent-color: var(--accent);
  max-width: 30em;
  padding: .125em;
  width: 100%;
}

/* do not show border around file selector button */
input[type="file"] {
  border: 0;
}

/* Without this any HTML using <fieldset> shows ugly borders and has additional padding/margin. (Issue #3) */
fieldset {
  border: 0;
  padding: 0;
}


/* Cross-browser checkbox & radio (that Safari, bless) */
input:is([type="checkbox"], [type="radio"]) {
  appearance: none;
  background-color: Canvas;
  border: 1px solid var(--border);
  color: var(--bg);
  cursor: pointer;
  display: inline-block;
  font-size: var(--fs-400);
  height: 1em;
  margin: 0;
  margin-top: .2em;
  max-width: fit-content;
  padding: .75em;
  position: relative;
  width: 1em;
}
input[type=checkbox] {
  border-radius: 0;
}
input[type=radio] {
  border-radius: 50%;
}
input:is([type="checkbox"], [type="radio"]):checked {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
input:is([type="checkbox"], [type="radio"]):checked:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
input[type="checkbox"]:checked:after {
  content: '\2713';
  font-size: var(--fs-700);
  font-weight: var(--fw-bold, 700);
}
input[type="radio"]:checked:after {
  background-color: var(--bg);
  border-radius: 50%;
  color: var(--bg);
  content: '';
  height: .75em;
  width: .75em;
}
input:is([type="checkbox"], [type="radio"]):hover {
  accent-color: var(--accent-hover);
}

/* Misc body elements */

hr {
  color: var(--border);
  border-top: 1px;
  margin: var(--v-space) auto;
}

mark {
  background-color: var(--marked);
  border-radius: 0.25em;
  padding: 2px 5px;
}

main :is(img, video) {
  border-radius: 0.25em;
  height: auto;
}


figcaption {
  color: var(--text-light);
}
figcaption + pre {
  margin-top: var(--v-space-0_25);
}


blockquote {
  border-left: 0.125rem solid var(--accent);
  font-style: italic;
  margin-left: 0;
  padding: 0.4rem 0.8rem;
}
* + blockquote {
  margin: var(--v-space-2) var(--h-space-2)  0 0;
}
cite {
  color: var(--text-light);
  font-size: var(--fs-400);
  font-style: normal;
}



/* Hide from viewport, but not from screen-reader */
.-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


/* Modal dialog */

dialog {
  background-color: var(--bg, canvas);
  border: 2px solid var(--bg, canvas);
  border-radius: 4px;
  color: var(--text, canvastext);
  display: none;
  left: 50%;
  max-height: 80vh;
  max-width: calc(100% - 16px);
  opacity: 0;
  padding: 12px;
  position: fixed;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: .3s opacity ease-out;
  z-index: 20;
}
dialog[open],
dialog[aria-hidden="false"] {
  display: block;
  opacity: 1;
}
::backdrop {
  background-color: rgba(0,0,0,0.85);
}
dialog div {
  margin: 0;
}
dialog h1 {
  margin-right: var(--h-space-4);
}
dialog footer {
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--h-space);
  justify-content: flex-end;
  padding-top: var(--v-space);
}
dialog footer * {
  margin: 0;
}

/* Making a dialog work in unsupported browsers */
.-js-dialogBg {
  background-color: var(--dialogBg);
  position: fixed;
  inset: 0;
  z-index: 10;
}
.-js-dialogBg:hover {
  /* Stolen from trickle.js. SVGs will not work here */
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAANpJREFUOBGNkz0KAjEQhYPYWXgCKws7LcXWyt7WG4i9jegBvIJ4AvEyXsRCsBDiN0sGkiE/O/A2O9n3viS7rPPeb9ETrVzPwrtHDzR1XF5I6oPWLQaeq5hDXQRw0I6xCuF5HH7Tz7oFuTkhrSyEhza8THaLoQhphpWUg/QOFyA/AFpy5nTbGrIjxvg4AiiGBzYc+rGZH9KPzFy+ZbX4bX9l+VDZr5NQMMbhbtvMxccpQ3JhpTchtXATQviItIpvW0CY7HHm8c9UDRd2chbABt3RQk2tEe8O3dDkD4JQ4iOR7BMpAAAAAElFTkSuQmCC"), pointer;
}




/* Use mono font for code like elements */
code,
pre
kbd,
samp {
  background-color: inherit;
  color: var(--code);
  font: inherit;
  font-family: var(--mono-font);
}
code {
  text-shadow: var(--code-shadow);
}

kbd {
  border: 1px solid var(--preformattedBorder);
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 var(--preformattedBorder);
  color: var(--preformatted);
  padding: 0.1em .2em 0;
}

figure > pre {
  border: 1px solid var(--border);
  background-color: var(--accent-bg);
  margin-top: var(--v-space-0_5);

  /* Dealing with pre > code overflow */
  max-width: 100%;
  overflow: hidden;
  overflow-x: auto;
  /* Also makes pre keyboard focusable while it's text content is wider than the display area */

  padding: var(--v-space) var(--h-space);
  /* Visually indicate that more content exists off-screen. */
  text-overflow: ellipsis;
}
pre:hover,
pre:focus-within {
  /* Webkit requirement for hidden content to display */
  text-overflow: unset;
}



/* Text selection */
::selection {
  background-color: var(--selectionBg);
  color: var(--selectionColor);
  opacity: 1;
  text-shadow: none;
}




/* Focus & hover states - a11y */

body {
  --transition-easing: ease-out;
  --transition-properties:
    color,
    text-decoration-color,
    text-underline-offset,
    text-decoration-thickness,
    background-color,
    outline-color,
    outline-offset;
}
@media (prefers-reduced-motion: no-preference) {
  body {
    --transition-duration: 0.2s;
  }
}

details [contenteditable] {
  --FocusRing-transition-offset: 10px;
  --FocusRing-outline-offset: 6px;
}

:is(a[href], button, summary, [tabindex], input, select, textarea, [contenteditable], [document], .responsive_wrap,) {
  outline: var(--FocusRing-outline-width, 2px) solid transparent;
  outline-offset: var(--FocusRing-transition-offset, 5px);
  transition:
    var(--transition-duration, 0s)
    var(--transition-easing, ease-out);
  transition-property: var(--transition-properties);
}
:is(a[href], button, summary, [tabindex], input, select, textarea, [contenteditable], [document], .responsive_wrap):focus {
  outline-color: var(--FocusRing-outline-color, blue);
  outline-offset: var(--FocusRing-outline-offset, 2px);
}
@supports selector(:focus-visible) {
  :is(a[href], button, summary, [tabindex], input, select, textarea, [contenteditable], [document], .responsive_wrap):focus:not(:focus-visible) {
    outline: none;
  }
}
:focus-visible {
  outline-color: var(--FocusRing-outline-color, blue);
  outline-offset: var(--FocusRing-outline-offset, 2px);
}
nav a {
  --transition-properties:
    var(--transition-properties),
    border-color;
}
.skip-to-content {
  --transition-properties:
    var(--transition-properties),
    border-color,
    transform;
}





/* Prism light mode colours require adjustment!!! */

/* Optional: PrismJS code highlighting (WCAG 2.2 colour contrast AA) - late load this from a self-hosted css file*/

:not(pre) > code[class*="language-"] {
  white-space: normal;
  word-wrap: nowrap;
}
.token.bold,
.token.important {
  font-weight: var(--fw-bold, 700);
}
.token.italic {
  font-style: italic;
}
.token.entity {
  cursor: help;
}
.namespace {
  opacity: 0.7;
}
pre[class*="language-"] {
  --atrule: #069;
  --boolean: #404;
  --boxShadow: hsla(0, 0%, 0%, 0.3);
  --color: #00a;
  --comment: #444;
  --function: #c24;
  --keyword: #600;
  --operator: #70b;
  --punctuation: #666;
  --property: #905;
  --regex: #508;
  --selector: #470;
  --textShadow: #fff;
  --url: #864;
  --urlBg: hsl(0,0%,100%,.5);
  --codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,64,0,.3)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23fcfcfa' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%23edf3ed' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%23e4ede4' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html:not([data-lightMode="light"]) pre[class*="language-"] {
    --atrule: #ffb;
    --boolean: #a8f;
    --boxShadow: #000;
    --color: #6be;
    --comment: #999;
    --function: #fe6;
    --keyword: #f55;
    --operator: #d9f;
    --punctuation: #ccc;
    --property: #e60;
    --regex: #f91;
    --selector: #8b2;
    --textShadow: #000;
    --url: #cde;
    --urlBg: hsl(0,0%,0%,.5);
    --codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,64,0,.3)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23222' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%230a0a0a' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%230a0a0a' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E");
  }
}
html[data-lightMode="dark"] pre[class*="language-"] {
  --atrule: #ffb;
  --boolean: #a8f;
  --boxShadow: #000;
  --color: #6be;
  --comment: #999;
  --function: #fe6;
  --keyword: #f55;
  --operator: #d9f;
  --punctuation: #ccc;
  --property: #e60;
  --regex: #f91;
  --selector: #8b2;
  --textShadow: #000;
  --url: #cde;
  --urlBg: hsl(0,0%,0%,.5);
  --codeBgImg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 64'%3E%3Ccircle stroke='rgba(0,64,0,.3)' stroke-width='2' fill='none' cx='20' cy='49' r='12'/%3E%3Cpath fill='%23222' fill-rule='evenodd' d='M1920 64H0V0h1920v64zM20 36a11 11 0 110 22 11 11 0 010-22z'/%3E%3Cpath stroke='%230a0a0a' stroke-width='2' d='M0 1h1920M0 5h1920M0 9h1920M0 13h1920M0 17h1920M0 21h1920M0 25h1920M0 29h1920'/%3E%3Cpath stroke='%230a0a0a' stroke-dasharray='2 6 2 6' stroke-width='2' d='M40 2v60'/%3E%3C/svg%3E");
}
[class*="language-"] {
  color: var(--color);
  text-shadow: 0 1px var(--textShadow);
  letter-spacing: -0.04ch;
}
/* Background image is applied to the pre element on blocks, mainly because it is cropped when applied to the code element. */
pre[class*="language-"] {
  background-image: var(--codeBgImg);
  background-origin: border-box;
  background-size: 120rem 4rem;
  
  /* Reset border, and allow space for SVG "tear off strip". Replace with a light box shadow. */
  border: 1px solid transparent;
  border-left-width: 2.5rem;
  box-shadow: 0 2px 2px var(--boxShadow);

  /* Reset the "default" bg color */
  background-color: transparent;

  line-height: var(--lh-800, 2);
  padding: .75rem 0;

  /* Prevent, a single line of code, from sitting on the stripes */
  background-position: top -1.2rem left 0;
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
  color: var(--comment);
}
.token.punctuation {
  color: var(--punctuation);
}
.token.constant,
.token.deleted,
.token.property,
.token.symbol,
.token.tag {
  color: var(--property);
}
.token.boolean,
.token.number {
  color: var(--boolean);
}
.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
  color: var(--selector);
}
.token.operator {
  color: var(--operator);
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.url {
  background-color: var(--urlBg);
  color: var(--url);
}
.token.atrule,
.token.attr-value {
  color: var(--atrule);
}
.token.keyword {
  color: var(--keyword);
}
.token.function {
  color: var(--function);
}
.token.important,
.token.regex,
.token.variable {
  color: var(--regex);
}
@media print {
  [class*="language-"] {
    text-shadow: none;
  }
}


/* Table of contents */
.table-of-contents {
  isolation: isolate;
/*   max-width: var(--content-width); */
  padding: 0;
  position: sticky;
  right: 0;
  top: 0;
  z-index: 1;
}
.table-of-contents > nav {
  display: block;
  float: right;
  font-size: var(--fs-400);
  margin: var(--v-space) var(--h-space);
  max-height: calc(100vh - var(--v-space-2));
  padding: 0;
  width: max-content;
}
.table-of-contents details {
/*   background-color: var(--bg); */
  box-shadow: 0 2px 4px #000;
  max-height: inherit;
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.table-of-contents summary {
  background-color: var(--accent-bg);
}
.table-of-contents [open] {
  padding-top: 0;
}
.table-of-contents summary span {
  width: max-content;
}
.table-of-contents [open] > summary {
  padding-top: 0.625rem;
  position: sticky;
  top: 0;
}
.table-of-contents ol {
  margin-top: var(--v-space-0_5);
}
.table-of-contents li + li {
  margin: 1px 0 0;
}
.table-of-contents a {
  border-width: 0;
  outline-offset: 0;
  padding: 0 var(--h-space-0_5);
}



/* Figure within a details/summary */
details > figure {
  margin-top: var(--v-space);
}
details > figure > pre {
  border: none;
  padding: 0;
}




/* Dropdown menu -  */
button[aria-haspopup] {
  --charOpen: '▸';
  background-color: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-weight: var(--fw-bold, bold);
  padding: var(--v-space-0_5) var(--h-space);
  width: max-content;
}
button[aria-haspopup]::before {
  color: var(--accent);
  content: var(--charOpen);
  display: inline-block;
  padding-right: .5em;
  transform: scale(1.5) translate3d(0, -0.1em, 0);
}
button[aria-haspopup][aria-expanded=true]::before {
  --charOpen: '▾';
}
button[aria-haspopup] + [role=menu] {
  background-color: var(--bg);
  border: 1px solid var(--border);
  isolation: isolate;
  margin: var(--v-space-0_25) 0;
  padding: var(--h-space);
  z-index: 1;
}
/* button[aria-haspopup][aria-expanded=true] + [role=menu] {
  display: block;
}
[role=menu] [role=menuitem] {
  cursor: pointer;
  display: block;
} */


/* Heydon Pickering - inclusive menu button */
/* https://github.com/Heydon/inclusive-menu-button */
[data-inclusive-menu] {
  position: relative;
  display: inline-block;
}
[data-inclusive-menu-opens],
[data-inclusive-menu] [role^="menuitem"] {
  text-align: left;
  border: 0;
}
[data-inclusive-menu] [role="menu"] {
  position: absolute;
  left: 0;
}
[data-inclusive-menu] [data-inclusive-menu-from="right"] {
  left: auto;
  right: 0;
}
[data-inclusive-menu] [role^="menuitem"] {
  display: block;
  min-width: 100%;
  white-space: nowrap;
}
[data-inclusive-menu] [role^="menuitem"][aria-checked="true"]::before {
  content: '\2713\0020';
}

/* New window links: https://codepen.io/2kool2/pen/gOKMZQK */

/* Stolen from almond.css and recoded */
[target="_blank"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M28,4 39,4 39,15 M39,4 23,20 M28,9 7,9 7,34 35,34 35,15' fill='none' stroke='%23808080' stroke-width='3'/></svg>");
  background-size: 1em 1em;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  height: 1em;
  margin: .125em 0 -.125em .125em;
  width: 1em;
}
XXX[target="_blank"] .-js-tooltip {
  
  /* Default: the left side of the tooltip is aligned with the left side of the link */
  --tipLeft: 0;
  --tipRight: auto;

  /* Default: the arrow is towards the left side of the tip */
  --arrowLeft: .5em;
  --arrowRight: auto;

  left: -200em;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  transform: translatey(1em);
  transition: opacity .3s ease-out;
  width: 0;
}
XXX[target="_blank"] .-js-tooltip-right {

  /* The right side of the tooltip is aligned with the right side of the link */
  --tipLeft: auto;
  --tipRight: 0;

  /* The arrow is positioned towards the right */
  --arrowLeft: auto;
  --arrowRight: .5em;
}
XXX[target="_blank"]:is(:hover, :focus, :active) .-js-tooltip {

  /* Top border offsets the tooltip away from the link, and allows for arrow space */
  border-top: 8px solid transparent;
  left: var(--tipLeft, auto);
  opacity: 1;
  overflow: initial;

  /* Default: aligns right side of the tooltip to the right side of the link */
  right:  var(--tipRight, 0); 
  width: max-content;
  z-index: 1;
}
XXX[target="_blank"] .-js-tooltip > span {

  /* Tooltip colours are the inverse of the page colours */
  background-color: var(--text, #000);
  
  /* Opinion: looks better to me with: */
  border-radius: 2px;
  box-shadow: 0 2px 4px #000;
  
  /* Tooltip colours are the inverse of the page colours */
  color: var(--bg, #fff);
/*   display: inline-block; */

  /* rem So it doesn't inherit smaller font size from the cascade */
/*   font-size: .75rem; */
  font-size: var(--fs-100);
  font-style: normal;
  line-height: var(--lh-200);

  max-width: calc(100vw - 24px);
  
  /* px to prevent increased size with font-scaling */
  padding: 4px 8px;
  position: relative;
  text-align: center;
}
/* Arrow */
XXX[target="_blank"] .-js-tooltip > span::after  {
  content: "";
  position: absolute;
  top: -.3rem;

  /* Default: arrow towards the left */
  left: var(--arrowLeft, .5em);
  right: var(--arrowRight, auto);

  /* CSS border creates the arrow */
  border-bottom: .75em solid var(--text, #000);
  border-left: .75em solid transparent;
  border-right: .75em solid transparent;
}

[hidden] {
  display: none !important;
}
[role=banner] {
  border-top: 1px solid var(--border);
}
header,
details,
details[open] > summary {
  border-image: var(--border-gradient) 1;
}
body > footer {
  border-bottom: 1px solid var(--border);
  border-image: var(--border-gradient) 1;
}
[role=banner] > div {
  padding-top: 0;
}
header > div {
  margin: 0 auto;
  margin-top: 0px;
  width: 100%;
  max-width: var(--content-width, 64ch);
}

[role=banner] h2 {
  background-image: var(--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: var(--xbold, 400);
}
[role=banner] h2::selection {
  background-image: initial;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}
nav {
  padding: var(--v-space) 0;
  margin-bottom: var(--v-space-0_5);
}
nav a[href],
nav a[href]:visited {
  font-size: .875rem;
  padding: 4px 12px;
  text-align: center;
}
@media (min-width: 20em) {
  [role=banner] nav + div {
    display: flex;
  }
}
.svg-a11y {
  height: 3rem;
  margin: 0.25em 1em 1em 0;
  width: 3rem;
  /* filter: drop-shadow(0 2px 2px #0067); */
  filter: var(--svg-filter);
}
.svg-a11y path {
  fill: var(--svg-color);
}
h1 {
  font-size: var(--fs-700);
}
h2 {
  font-size: var(--fs-600);
}
h3 {
  font-size: var(--fs-500);
}
h4 {
  font-size: var(--fs-400);
}
section > header > h2 + p {
  margin-top: var(--v-space-0_25);
}
label {
  align-items: baseline;
}

@media (prefers-color-scheme: dark) {
  html:not([data-lightMode="light"]) main > header > div {
    text-shadow: 0 2px 0px #000;
  }
}
html[data-lightMode="dark"] main > header > div {
  text-shadow: 0 2px 0px #000;
}

body > footer {
  background-color: var(--accent-bg);
  margin-top: var(--v-space-2);
  text-align: center;
  padding: 0;
}
footer > div {
  padding: var(--v-space-1_5) var(--h-space);
}
footer details {
  font-size: var(--fs-400, smaller);
}
footer details ul :first-child {
  margin-top: var(--v-space-0_5);
}

/* Percievable */
section + section {
  margin-top: 2rem !important;
}
section > header {
  padding-bottom: var(--v-space);
}

details > summary + div > :last-child {
  text-align: right;
}


/* Font-weights */

html {
  --fw-1: 100;
  --fw-2: 200;
  --fw-3: 300;
  --fw-4: 400;
  --fw-5: 500;
  --fw-6: 600;
  --fw-7: 700;
  --fw-xlight: var(--fw-1);
  --fw-light: var(--fw-2);
  --fw-normal: var(--fw-3);
  --fw-bold: var(--fw-4);
  --fw-xbold: var(--fw-5);
  --fw-xxbold: var(--fw-6);
  --fw-xxxbold: var(--fw-7);
  font-weight: var(--fw-normal);
}
nav a[href],
:is(h1, h2, h3, h4, button, b, strong) {
  font-weight: var(--fw-bold);
}
:is(b, strong) {
  font-weight: var(--fw-xbold);
}
kbd, code {
  font-weight: var(--fw-light);
}
h1 + p:first-of-type {
  font-weight: var(--fw-normal);
  font-size: var(--fs-500);
}
html {
  --table-thead-bg: #f7f1fb;
}
@media (prefers-color-scheme: dark) {
  html:not([data-lightMode="light"]) {
    --table-thead-bg: #3A3A3A;
    --fw-light: var(--fw-1);
    --fw-normal: var(--fw-2);
    --fw-bold: var(--fw-3);
    --fw-xbold: var(--fw-5);
    --fw-xxbold: var(--fw-6);
    --fw-xxxbold: var(--fw-7);
  }
}
html[data-lightMode="dark"] {
  --table-thead-bg: #3a3a3a;
  --fw-light: var(--fw-1);
  --fw-normal: var(--fw-2);
  --fw-bold: var(--fw-3);
  --fw-xbold: var(--fw-5);
  --fw-xxbold: var(--fw-6);
  --fw-xxxbold: var(--fw-7);
}

table > :is(thead, tfoot) > tr {
  background-color: var(--table-thead-bg);
}
[role=banner] > div {
  /* Reserve space for hamburger menu */
  padding-right: 3rem;
  position: relative;
}

[role=banner] nav {
  display: block;
  padding: var(--h-space) 0 0 0;
}
/* Override simplerest.css defaults for details / summary */
[role=banner] details {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
}
[role=banner] details[open] {
  padding: 0 0 var(--v-space);
}
[role=banner] summary::marker {
  display: none;
}
[role=banner] summary::-webkit-details-marker {
  display: none;
}
[role=banner] summary {
  --svg-color: var(--accent);
  border: 0 ;
  display: block;
  list-style-type: none;
  position: absolute;
  right: var(--h-space);
  top: var(--v-space);
  width: auto;
  height: auto;
  padding: 0 !important; /* Still rubbish! */
  text-align: center;
  line-height: .8;
}
[role=banner] details[open] summary {
  border: 0;
}
[role=banner] summary:is(:hover, :focus) {
  --svg-color: var(--accent-hover);
}

/* Hamburger icon */
.svg-menu {
  pointer-events: none;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  stroke: var(--svg-color, currentcolor);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-width: 5;
}
.svg-menu  > .close,
[open] .svg-menu  > .open {display: none}
[open] .svg-menu  > .close {display: block}

.menu {
  display: block;
  margin-top: var(--v-space-0_25);
  font-size: 0.75rem;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  width: auto;
}
/* Disable default Simplerest icon */
a[target="_blank"]::after {
  display:none;
}

/* Link icons */
external-link {
  --tooltip_img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='gray' stroke-width='3' viewBox='0 0 40 40'><path d='M28,4 39,4 39,15 M39,4 23,20 M28,9 7,9 7,34 35,34 35,15'/></svg>");
}
bookmarklet-link {
  --tooltip_img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M24 6H7v28l13-11 13 11V21' fill='none' stroke='gray' stroke-width='3'/><path d='m31 3 2 6h7l-6 4 2 6-5-4-5 4 2-6-6-4h7l2-6Z' style='fill:gray'/></svg>");
}
modal-dialog {
  --tooltip_img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='gray' stroke-width='3' viewBox='0 0 40 40'><path d='M31 20h-9v-9m0 9L36 6 M28 6H7v28h28V15'/></svg>");
}


link-tip {
  display: inline-block;
  position: relative;
}

link-tip::after {
  background-image: var(--tooltip_img);
  background-size: 1em 1em;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  height: 1em;
  margin: .125em 0 -.125em .125em;
  opacity: 1;
  width: 1em;
}

/* Use class, same for tooltip, modal, window */
.boxTip {
  /* The right side of the tooltip is aligned with the right side of the link (plus a bit) */
  --tipLeft: auto;
  --tipRight: -.125rem;

  /* The arrow is positioned towards the right */
  --arrowLeft: auto;
  --arrowRight: .125rem;

  border-top: 12px solid transparent;
  filter: drop-shadow(var(--tooltip-shadow, 0 2px 4px #0007));
  left: -200em;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: var(--tipTop, 1.125em);
  transition: opacity .5s ease-out .5s;
  width: 0;
  will-change: opacity;
}
:is(link-tip, button, a):is(:hover, :focus, :active) .boxTip {
  left: var(--tipLeft, auto);
  opacity: 1;
  overflow: initial;

  /* Default: aligns right side of the tooltip to the right side of the icon */
  right:  var(--tipRight, 0);
  width: max-content;
  max-width: calc(100vw - 32px);
  z-index: 1;
}

.boxText {

  background-color: var(--tooltip-bg, Canvas);

  /* Opinion: looks better to me with: */
  border: 1px solid var(--tooltip-border, gray);
  border-radius: 2px;
  color: var(--tooltip-text, CanvasText);
  display: inline-block;

  /* rem - So it doesn't inherit a smaller font size from the cascade */
  font-size: .8rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1.5;
  max-width: max-content;

  /* px - To prevent increased size with font-scaling */
  padding: 4px 8px 4px;
  position: relative;
  width: clamp(276px, 36em, 100%);
}
@media (min-width: 40em) {
  .boxText {
    font-size: var(--fs-100, .8rem);
  }
}

/* Arrow */
.boxText::after  {
  content: "";
  position: absolute;
  top: -.4rem;

  /* Default: arrow towards the right */
  left: var(--arrowLeft, auto);
  right: var(--arrowRight, 0);

  /* CSS border creates the arrow */
  border-bottom: .7em solid var(--tooltip-border, gray);
  border-left: .7em solid transparent;
  border-right: .7em solid transparent;
  z-index: -1;
}/* <modal-dialog> Dialog - fetches same-site content */

dialog {
  --v-space: .8rem;
  padding-top: 0;
  width: 30rem;
  line-height: 1.5;
}
@media (min-width: 40em) {
  dialog {
    font-size: .8rem;
  }
}
dialog header {
  background-color: var(--bg, Canvas);
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--border);
  padding: var(--v-space) 0 var(--v-space);
}
button.dialog_close-x {
  all: unset;
  position: absolute;
  top: .75rem;
  right: 0;
  border: 2px solid var(--border);
  width: 2em;
  height: 2em;
  text-align: center;
  color: var(--accent, canvasText);
  background-color: var(--bg, Canvas);
  font-size: var(--fs-100);
  font-weight: bold;
}
button.dialog_close-x:enabled:is(:hover, :focus, :active) {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
  background-color: var(--bg);
}
.dialog_title {
  font-size: var(--fs-500);
  margin-right: 1.75em;
}
.dialog_content {
  padding-top: var(--v-space);
}
.dialog_content > div * + * {
  margin-top: var(--v-space);
}
.dialog_content figcaption,
.dialog_content cite {
  font-size: var(--fs-100);
  line-height: var(--lh-300);
}
.dialog_content dt + dd,
.dialog_content figcaption + pre {
  margin-top: 0;
}
.dialog_content pre > code {
  line-height: 2rem;
}
dialog footer {
  margin-top: var(--v-space);
  padding-top: var(--v-space);
}/* Custom element */
tool-tip {

  --tooltip_img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path fill='gray' d='M18 28h4V18h-4v10Zm2-24C11 4 4 11 4 20s7 17 16 17 17-8 17-17S29 4 20 4Zm0 29c-7 0-13-6-13-13S13 7 20 7s13 6 13 13-6 13-13 13Zm-2-18h4v-3h-4v3Z'/></svg>");
  --width: 1rem;
  --height: 1rem;
  --tapTarget: max(44px, var(--width));

  border-radius: 100%; /* Rounded focus ring */
  display: inline-block;
  height: var(--height, 1em);
  position: relative;
  vertical-align: middle;
  width: var(--width, 1em);
}

/* Add an info icon */
tool-tip::after {
  /* gray = #808080 === half way between black and white */
  background-image: var(--tooltip_img);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  content: "";
  display: inline-block;
  height: var(--tapTarget);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: var(--tapTarget);
}

tool-tip:is(:hover, :focus, :active):not(.-js-tool-tip-dismissed) > .boxTip {
  left: var(--tipLeft, auto);
  opacity: 1;
  overflow: initial;

  /* Default: aligns right side of the tooltip to the right side of the icon */
  right:  var(--tipRight, 0);
  width: 20rem;
  max-width: calc(100vw - 16px);
  z-index: 1;
  transition-delay: .5s;
}


tool-tip > .boxTip {
  --tipRight: 0;
  --arrowRight: 0;
}/* Light mode toggle component */

.switch-light-modes * {
  transition: background-color .5s ease-out;
}

[role=banner] light-mode-toggle {
  --toggle-thumb-padding: 0px;
  --toggle-thumb-size: 18px;
  --toggle-track-height: 12px;
  --toggle-track-width: 32px;

  position: absolute;
  bottom: 1.5rem;
  right: var(--h-space);
  line-height: 0;
}
@media (min-width: 40em) {
  [role=banner] light-mode-toggle {
    /* --toggle-thumb-padding: 4px; */
    /* --toggle-thumb-size: 1.25rem; */
    /* --toggle-track-height: 1rem; */
    /* --toggle-track-width: 3rem; */
    --toggle-thumb-padding: 2px;
    --toggle-thumb-size: 0.9rem;
    --toggle-track-height: 0.5rem;
    --toggle-track-width: 2rem;

    bottom: var(--v-space-2);
    right: var(--h-space-2);
  }
}