@charset "UTF-8";
.rc-scout > .l\:flex {
  gap: 0.5em;
}

ff-icon.rc-scout__logo {
  display: inline-block;
  padding: 0;
  border: 0;
  margin: 0;
  width: var(--ui-size);
  height: var(--ui-size);
}

/* MEDIA QUERIES */
/*  grid-header media queries */
@container burrito-2xs (inline-size < 220px) {
  .relleno {
    inline-size: 100%;
  }
}
@container burrito-xs (inline-size < 240px) {
  .relleno {
    inline-size: 100%;
  }
}
@container burrito-sm (inline-size < 260px) {
  .relleno {
    inline-size: 100%;
  }
}
@container burrito-md (inline-size < 280px) {
  .relleno {
    inline-size: 100%;
  }
}
@container burrito-lg (inline-size < 320px) {
  .relleno {
    inline-size: 100%;
  }
}
@container burrito-xl (inline-size < 360px) {
  .relleno {
    inline-size: 100%;
  }
}
@container burrito-2xl (inline-size < 380px) {
  .relleno {
    inline-size: 100%;
  }
}
/*  reveal-auto media queries */
@media screen and (min-width: 320px) {
  .l\:reveal\:auto.bp\:2xs {
    position: unset;
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:2xs > ff-reveal {
    block-size: auto;
    margin: initial;
    overflow: hidden;
    padding: initial;
    position: unset;
    white-space: normal;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:2xs > ff-reveal.collapsed {
    top: 0;
    inline-size: auto;
    min-inline-size: unset;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:2xs [aria-expanded] {
    display: none;
  }
}
@media screen and (min-width: 620px) {
  .l\:reveal\:auto.bp\:xs {
    position: unset;
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:xs > ff-reveal {
    block-size: auto;
    margin: initial;
    overflow: hidden;
    padding: initial;
    position: unset;
    white-space: normal;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:xs > ff-reveal.collapsed {
    top: 0;
    inline-size: auto;
    min-inline-size: unset;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:xs [aria-expanded] {
    display: none;
  }
}
@media screen and (min-width: 935px) {
  .l\:reveal\:auto.bp\:sm {
    position: unset;
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:sm > ff-reveal {
    block-size: auto;
    margin: initial;
    overflow: hidden;
    padding: initial;
    position: unset;
    white-space: normal;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:sm > ff-reveal.collapsed {
    top: 0;
    inline-size: auto;
    min-inline-size: unset;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:sm [aria-expanded] {
    display: none;
  }
}
@media screen and (min-width: 1360px) {
  .l\:reveal\:auto.bp\:md {
    position: unset;
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:md > ff-reveal {
    block-size: auto;
    margin: initial;
    overflow: hidden;
    padding: initial;
    position: unset;
    white-space: normal;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:md > ff-reveal.collapsed {
    top: 0;
    inline-size: auto;
    min-inline-size: unset;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:md [aria-expanded] {
    display: none;
  }
}
@media screen and (min-width: 1620px) {
  .l\:reveal\:auto.bp\:lg {
    position: unset;
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:lg > ff-reveal {
    block-size: auto;
    margin: initial;
    overflow: hidden;
    padding: initial;
    position: unset;
    white-space: normal;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:lg > ff-reveal.collapsed {
    top: 0;
    inline-size: auto;
    min-inline-size: unset;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:lg [aria-expanded] {
    display: none;
  }
}
@media screen and (min-width: 2048px) {
  .l\:reveal\:auto.bp\:xl {
    position: unset;
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:xl > ff-reveal {
    block-size: auto;
    margin: initial;
    overflow: hidden;
    padding: initial;
    position: unset;
    white-space: normal;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:xl > ff-reveal.collapsed {
    top: 0;
    inline-size: auto;
    min-inline-size: unset;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:xl [aria-expanded] {
    display: none;
  }
}
@media screen and (min-width: 3048px) {
  .l\:reveal\:auto.bp\:2xl {
    position: unset;
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:2xl > ff-reveal {
    block-size: auto;
    margin: initial;
    overflow: hidden;
    padding: initial;
    position: unset;
    white-space: normal;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:2xl > ff-reveal.collapsed {
    top: 0;
    inline-size: auto;
    min-inline-size: unset;
    max-block-size: unset;
  }
  .l\:reveal\:auto.bp\:2xl [aria-expanded] {
    display: none;
  }
}
/* header-app media queries */
/* TODO: clean this up - not so good  */
@media screen and (min-width: 320px) {
  .header-app:has(.l\:reveal\:auto.bp\:2xs) {
    padding-block: 0;
    padding-inline: var(--gap);
  }
  .header-app .l\:reveal\:auto.bp\:2xs {
    justify-content: var(--justify);
  }
  .header-app .l\:reveal\:auto.bp\:2xs > ff-reveal {
    position: unset;
    flex-wrap: nowrap;
    display: flex;
    block-size: fit-content;
    inline-size: fit-content;
    padding: 0;
    box-shadow: unset;
  }
  ff-reveal.collapsed:has(.header-nav) {
    box-shadow: unset;
  }
  .l\:reveal\:auto.bp\:2xs {
    min-inline-size: unset;
    flex-direction: row;
    padding-block: 0;
    inline-size: fit-content;
    block-size: 100%;
    margin-block: 0;
  }
  .l\:reveal\:auto.bp\:2xs .header-nav {
    flex-flow: row nowrap;
    padding: 0;
    margin: 0;
    inline-size: fit-content;
    block-size: 100%;
    padding-block: 0;
  }
  .l\:reveal\:auto.bp\:2xs .header-nav li {
    display: flex;
    align-items: var(--align, center);
    justify-content: var(--justify, center);
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:2xs .header-nav li a {
    align-items: var(--align, center);
    justify-content: var(--justify, center);
  }
}
@media screen and (min-width: 620px) {
  .header-app:has(.l\:reveal\:auto.bp\:xs) {
    padding-block: 0;
    padding-inline: var(--gap);
  }
  .header-app .l\:reveal\:auto.bp\:xs {
    justify-content: var(--justify);
  }
  .header-app .l\:reveal\:auto.bp\:xs > ff-reveal {
    position: unset;
    flex-wrap: nowrap;
    display: flex;
    block-size: fit-content;
    inline-size: fit-content;
    padding: 0;
    box-shadow: unset;
  }
  ff-reveal.collapsed:has(.header-nav) {
    box-shadow: unset;
  }
  .l\:reveal\:auto.bp\:xs {
    min-inline-size: unset;
    flex-direction: row;
    padding-block: 0;
    inline-size: fit-content;
    block-size: 100%;
    margin-block: 0;
  }
  .l\:reveal\:auto.bp\:xs .header-nav {
    flex-flow: row nowrap;
    padding: 0;
    margin: 0;
    inline-size: fit-content;
    block-size: 100%;
    padding-block: 0;
  }
  .l\:reveal\:auto.bp\:xs .header-nav li {
    display: flex;
    align-items: var(--align, center);
    justify-content: var(--justify, center);
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:xs .header-nav li a {
    align-items: var(--align, center);
    justify-content: var(--justify, center);
  }
}
@media screen and (min-width: 935px) {
  .header-app:has(.l\:reveal\:auto.bp\:sm) {
    padding-block: 0;
    padding-inline: var(--gap);
  }
  .header-app .l\:reveal\:auto.bp\:sm {
    justify-content: var(--justify);
  }
  .header-app .l\:reveal\:auto.bp\:sm > ff-reveal {
    position: unset;
    flex-wrap: nowrap;
    display: flex;
    block-size: fit-content;
    inline-size: fit-content;
    padding: 0;
    box-shadow: unset;
  }
  ff-reveal.collapsed:has(.header-nav) {
    box-shadow: unset;
  }
  .l\:reveal\:auto.bp\:sm {
    min-inline-size: unset;
    flex-direction: row;
    padding-block: 0;
    inline-size: fit-content;
    block-size: 100%;
    margin-block: 0;
  }
  .l\:reveal\:auto.bp\:sm .header-nav {
    flex-flow: row nowrap;
    padding: 0;
    margin: 0;
    inline-size: fit-content;
    block-size: 100%;
    padding-block: 0;
  }
  .l\:reveal\:auto.bp\:sm .header-nav li {
    display: flex;
    align-items: var(--align, center);
    justify-content: var(--justify, center);
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:sm .header-nav li a {
    align-items: var(--align, center);
    justify-content: var(--justify, center);
  }
}
@media screen and (min-width: 1360px) {
  .header-app:has(.l\:reveal\:auto.bp\:md) {
    padding-block: 0;
    padding-inline: var(--gap);
  }
  .header-app .l\:reveal\:auto.bp\:md {
    justify-content: var(--justify);
  }
  .header-app .l\:reveal\:auto.bp\:md > ff-reveal {
    position: unset;
    flex-wrap: nowrap;
    display: flex;
    block-size: fit-content;
    inline-size: fit-content;
    padding: 0;
    box-shadow: unset;
  }
  ff-reveal.collapsed:has(.header-nav) {
    box-shadow: unset;
  }
  .l\:reveal\:auto.bp\:md {
    min-inline-size: unset;
    flex-direction: row;
    padding-block: 0;
    inline-size: fit-content;
    block-size: 100%;
    margin-block: 0;
  }
  .l\:reveal\:auto.bp\:md .header-nav {
    flex-flow: row nowrap;
    padding: 0;
    margin: 0;
    inline-size: fit-content;
    block-size: 100%;
    padding-block: 0;
  }
  .l\:reveal\:auto.bp\:md .header-nav li {
    display: flex;
    align-items: var(--align, center);
    justify-content: var(--justify, center);
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:md .header-nav li a {
    align-items: var(--align, center);
    justify-content: var(--justify, center);
  }
}
@media screen and (min-width: 1620px) {
  .header-app:has(.l\:reveal\:auto.bp\:lg) {
    padding-block: 0;
    padding-inline: var(--gap);
  }
  .header-app .l\:reveal\:auto.bp\:lg {
    justify-content: var(--justify);
  }
  .header-app .l\:reveal\:auto.bp\:lg > ff-reveal {
    position: unset;
    flex-wrap: nowrap;
    display: flex;
    block-size: fit-content;
    inline-size: fit-content;
    padding: 0;
    box-shadow: unset;
  }
  ff-reveal.collapsed:has(.header-nav) {
    box-shadow: unset;
  }
  .l\:reveal\:auto.bp\:lg {
    min-inline-size: unset;
    flex-direction: row;
    padding-block: 0;
    inline-size: fit-content;
    block-size: 100%;
    margin-block: 0;
  }
  .l\:reveal\:auto.bp\:lg .header-nav {
    flex-flow: row nowrap;
    padding: 0;
    margin: 0;
    inline-size: fit-content;
    block-size: 100%;
    padding-block: 0;
  }
  .l\:reveal\:auto.bp\:lg .header-nav li {
    display: flex;
    align-items: var(--align, center);
    justify-content: var(--justify, center);
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:lg .header-nav li a {
    align-items: var(--align, center);
    justify-content: var(--justify, center);
  }
}
@media screen and (min-width: 2048px) {
  .header-app:has(.l\:reveal\:auto.bp\:xl) {
    padding-block: 0;
    padding-inline: var(--gap);
  }
  .header-app .l\:reveal\:auto.bp\:xl {
    justify-content: var(--justify);
  }
  .header-app .l\:reveal\:auto.bp\:xl > ff-reveal {
    position: unset;
    flex-wrap: nowrap;
    display: flex;
    block-size: fit-content;
    inline-size: fit-content;
    padding: 0;
    box-shadow: unset;
  }
  ff-reveal.collapsed:has(.header-nav) {
    box-shadow: unset;
  }
  .l\:reveal\:auto.bp\:xl {
    min-inline-size: unset;
    flex-direction: row;
    padding-block: 0;
    inline-size: fit-content;
    block-size: 100%;
    margin-block: 0;
  }
  .l\:reveal\:auto.bp\:xl .header-nav {
    flex-flow: row nowrap;
    padding: 0;
    margin: 0;
    inline-size: fit-content;
    block-size: 100%;
    padding-block: 0;
  }
  .l\:reveal\:auto.bp\:xl .header-nav li {
    display: flex;
    align-items: var(--align, center);
    justify-content: var(--justify, center);
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:xl .header-nav li a {
    align-items: var(--align, center);
    justify-content: var(--justify, center);
  }
}
@media screen and (min-width: 3048px) {
  .header-app:has(.l\:reveal\:auto.bp\:2xl) {
    padding-block: 0;
    padding-inline: var(--gap);
  }
  .header-app .l\:reveal\:auto.bp\:2xl {
    justify-content: var(--justify);
  }
  .header-app .l\:reveal\:auto.bp\:2xl > ff-reveal {
    position: unset;
    flex-wrap: nowrap;
    display: flex;
    block-size: fit-content;
    inline-size: fit-content;
    padding: 0;
    box-shadow: unset;
  }
  ff-reveal.collapsed:has(.header-nav) {
    box-shadow: unset;
  }
  .l\:reveal\:auto.bp\:2xl {
    min-inline-size: unset;
    flex-direction: row;
    padding-block: 0;
    inline-size: fit-content;
    block-size: 100%;
    margin-block: 0;
  }
  .l\:reveal\:auto.bp\:2xl .header-nav {
    flex-flow: row nowrap;
    padding: 0;
    margin: 0;
    inline-size: fit-content;
    block-size: 100%;
    padding-block: 0;
  }
  .l\:reveal\:auto.bp\:2xl .header-nav li {
    display: flex;
    align-items: var(--align, center);
    justify-content: var(--justify, center);
    inline-size: fit-content;
  }
  .l\:reveal\:auto.bp\:2xl .header-nav li a {
    align-items: var(--align, center);
    justify-content: var(--justify, center);
  }
}
/* SCSS design token definitions */
/**
 * Source: https://utopia.fyi/blog/css-modular-scales/
 * Usage:
 *  TODO: Doc + link to mixin generate-modular-scale
 */
/**
 * src https://dev.to/felipperegazio/css-custom-properties-vars-with-sass-scss-a-practical-architecture-strategy-1m88
 * Use this mixin to declare a set of CSS Custom Properties.
 * You can use this mixin to output different global designs ("themes") while relying on
 * common core CSS functionality to generate layout, typography, color, etc (using $design_tokens)
 * 
 *
 * Usage:
 * @include generate-css-vars((
 *  base-font-size: 65.5%,
 *  font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif,
 * 
 *  primary-color: #33b5e5,
 *  outline-color: #ff500a,
 * ));
 *
 * Will result in
 *
 * html {
 *    --base-font-size: 65.5%,
 *    --font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 *    --primary-color:  #33b5e5;
 *    --outline-color: #ff500a,
 * }
 *
 */
/**
* Attempting this (it works!):
* - https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
* - https://utopia.fyi/blog/clamp
* It can probably be improved with better usage of sass syntax
*/
html {
  --fluid-min-width: 320;
  --fluid-max-width: 1240;
  --fluid-min-size: 16;
  --fluid-max-size: 18;
  --fluid-min-ratio: 1.2;
  --fluid-max-ratio: 1.25;
  --fluid-screen: 100vw;
  --f-slope: calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16));
  --f-size-min-0: calc(var(--fluid-max-size) / 16);
  --f-size-max-0: calc(var(--fluid-min-size) / 16);
  --fluid-0: clamp(
  	calc(var(--fluid-min-size) / 16) * 1rem,
  	calc(-1 * calc(var(--fluid-min-width) / 16) * calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) + calc(var(--fluid-min-size) / 16)) * 1rem + calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) * 100vw,
  	calc(var(--fluid-max-size) / 16) * 1rem
  );
  --f-size-min-1: calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio));
  --f-size-max-1: calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-max-ratio));
  --f-width-neg-1: calc(-1 * calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)));
  --y-axis-1: calc(calc(-1 * calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio))) * calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) + calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)));
  --fluid-1: clamp(
  	var(--f-size-min-1) * 1rem,
  	var(--y-axis-1) * 1rem + calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) * 100vw,
  	var(--f-size-max-1) * 1rem
  );
  --f-size-min-2: calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio));
  --f-size-max-2: calc(calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-max-ratio));
  --f-width-neg-2: calc(-1 * calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)));
  --y-axis-2: calc(calc(-1 * calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio))) * calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) + calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)));
  --fluid-2: clamp(
  	var(--f-size-min-2) * 1rem,
  	var(--y-axis-2) * 1rem + calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) * 100vw,
  	var(--f-size-max-2) * 1rem
  );
  --f-size-min-3: calc(calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio));
  --f-size-max-3: calc(calc(calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-max-ratio));
  --f-width-neg-3: calc(-1 * calc(calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)));
  --y-axis-3: calc(calc(-1 * calc(calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio))) * calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) + calc(calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)));
  --fluid-3: clamp(
  	var(--f-size-min-3) * 1rem,
  	var(--y-axis-3) * 1rem + calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) * 100vw,
  	var(--f-size-max-3) * 1rem
  );
  --f-size-min-4: calc(calc(calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio));
  --f-size-max-4: calc(calc(calc(calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-max-ratio));
  --f-width-neg-4: calc(-1 * calc(calc(calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)));
  --y-axis-4: calc(calc(-1 * calc(calc(calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio))) * calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) + calc(calc(calc(calc(calc(var(--fluid-min-size) / 16) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)) * var(--fluid-min-ratio)));
  --fluid-4: clamp(
  	var(--f-size-min-4) * 1rem,
  	var(--y-axis-4) * 1rem + calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) * 100vw,
  	var(--f-size-max-4) * 1rem
  );
  --f-size-min--1: calc(calc(var(--fluid-min-size) / 16) / var(--fluid-min-ratio));
  --f-size-max--1: calc(calc(calc(var(--fluid-min-size) / 16) / var(--fluid-min-ratio)) / var(--fluid-max-ratio));
  --f-width-neg--1: calc(-1 * calc(calc(var(--fluid-min-size) / 16) / var(--fluid-min-ratio)));
  --y-axis--1: calc(calc(-1 * calc(calc(var(--fluid-min-size) / 16) / var(--fluid-min-ratio))) * calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) + calc(calc(var(--fluid-min-size) / 16) / var(--fluid-min-ratio)));
  --fluid--1: clamp(
  	var(--f-size-min--1) * 1rem,
  	var(--y-axis--1) * 1rem + calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) * 100vw,
  	var(--f-size-max--1) * 1rem
  );
  --f-size-min--2: calc(calc(calc(var(--fluid-min-size) / 16) / var(--fluid-min-ratio)) / var(--fluid-min-ratio));
  --f-size-max--2: calc(calc(calc(calc(var(--fluid-min-size) / 16) / var(--fluid-min-ratio)) / var(--fluid-min-ratio)) / var(--fluid-max-ratio));
  --f-width-neg--2: calc(-1 * calc(calc(calc(var(--fluid-min-size) / 16) / var(--fluid-min-ratio)) / var(--fluid-min-ratio)));
  --y-axis--2: calc(calc(-1 * calc(calc(calc(var(--fluid-min-size) / 16) / var(--fluid-min-ratio)) / var(--fluid-min-ratio))) * calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) + calc(calc(calc(var(--fluid-min-size) / 16) / var(--fluid-min-ratio)) / var(--fluid-min-ratio)));
  --fluid--2: clamp(
  	var(--f-size-min--2) * 1rem,
  	var(--y-axis--2) * 1rem + calc(calc(var(--fluid-max-size) / 16) - calc(var(--fluid-min-size) / 16) / calc(var(--fluid-max-width) / 16) - calc(var(--fluid-min-width) / 16)) * 100vw,
  	var(--f-size-max--2) * 1rem
  );
  --emoji-link: "🔗";
  --emoji-point-left: "👈";
  --emoji-point-right: "👉";
  --emoji-point-up: "👆";
  --emoji-point-down: "👇";
  --emoji-pencil: "✏️";
  --emoji-default: "🐰";
  --emoji-info: "💡";
  --emoji-success: "🎉";
  --emoji-warning: "🔔";
  --emoji-error: "💩";
  --emoji-day: "☀️";
  --emoji-night: "🌙";
  --emoji-contrast: "🌗";
  --emoji-blend: "🌑";
  --emoji-blend-night: "🌚";
  --emoji-blend-day: "🌝";
  --emoji-tokens: "🫘";
  --emoji-blocks: "🌱";
  --emoji-layouts: "🌿";
  --emoji-recipes: "🌳";
  --emoji-vader: "👾";
  --emoji-ollie: "🐙";
  --emoji-moby: "🐳";
  --emoji-octopus: "🐙";
  --emoji-otter: "🦦";
  --emoji-turtle: "🐢";
  --emoji-tiger: "🐯";
  --emoji-rainbow: "🌈";
  --emoji-idea: "💡";
  --emoji-profile: "🦁";
  --emoji-favorite: "❤️";
  --emoji-sparkles: "✨";
  --emoji-home: "🥚";
  --emoji-about: "🐥";
  --emoji-machines: "🤖";
  --emoji-star: "🌟";
  --emoji-menu: "🐰";
  --emoji-settings: "🎛️";
  --emoji-log: "🪵";
  --emoji-usage: "📖";
  --emoji-decisions: "⚖️";
  --emoji-context: "☂️";
  --emoji-switch-active: "🐰";
  --emoji-switch-inactive: "🎩";
  --emoji-doc: "📝";
  --emoji-comments: "✏️";
  --emoji-ui: "🌈";
  --emoji-playbook: "🛼";
  --emoji-nojs: "🐰";
  --emoji-wip: "🚧";
  --emoji-square: "🟨";
  --emoji-round: "🟣";
  --emoji-pill: "💊";
  --emoji-mellow: "⛅️";
  --emoji-soft: "🌥️";
  --emoji-prose: "🖋️";
  --emoji-dates: "📅";
  --emoji-published: "📅";
  --emoji-updated: "📅";
  --emoji-outdated: "📆";
  --emoji-spicy: "🌶️";
  --emoji-cookie: "🍪";
  --emoji-raw: "🍊";
  --emoji-magic: "🪄";
  --emoji-wave: "🌊";
  --emoji-perf: "⚡️";
  --emoji-tuning: "⚙️";
  --emoji-bubbles: "🫧";
  --emoji-tram: "🚋";
  --emoji-sketch: "🐳";
  --emoji-play: "✨";
  --emoji-pause: "🪷";
  --emoji-clear: "🐳";
  --emoji-stop: "🟨";
  --emoji-snap: "📸";
  --emoji-update: "⚡️";
  --emoji-not-found: "🕳️";
  --emoji-random: "🎰";
  --emoji-rect: "🟨";
  --emoji-geometry-2d: "📏";
  --emoji-geometry-3d: "📐";
  --emoji-russian-dolls: "🪆";
  --emoji-bullseye: "🎯";
  --emoji-projection: "🗺️";
  --emoji-matrix-3d: "🎲";
  --emoji-camera-3d: "🎥";
  --emoji-animation-3d: "🎞️";
  --emoji-filters: "🖍️";
  --emoji-convolution: "🌀";
  --emoji-texture: "🖼️";
  --emoji-multiple-tex: "🌚";
  --emoji-package-style: "✨";
  --emoji-package-utilities: "🧰";
  --emoji-package-ui: "🌳";
  --emoji-package-playbook: "🛼";
  --emoji-package-prose: "🖋️";
  --emoji-package-sketch: "🌈";
  --emoji-package-gfx: "👾";
  --emoji-package-git-poule: "🐣";
  --emoji-learning: "🧠";
  --emoji-projects: "🪁";
  --emoji-wing: "🪽";
  --emoji-feather: "🪶";
  --emoji-phoenix: "🐦‍🔥";
  --emoji-fat-fuzzy: "🦉";
}

.emoji\:link:not(.justify\:end, .place\:end)::before,
.emoji\:link.justify\:start::before {
  content: var(--emoji-link);
}

.emoji\:link.place\:end::after,
.emoji\:link.justify\:end::after {
  content: var(--emoji-link);
}

.emoji\:point-left:not(.justify\:end, .place\:end)::before,
.emoji\:point-left.justify\:start::before {
  content: var(--emoji-point-left);
}

.emoji\:point-left.place\:end::after,
.emoji\:point-left.justify\:end::after {
  content: var(--emoji-point-left);
}

.emoji\:point-right:not(.justify\:end, .place\:end)::before,
.emoji\:point-right.justify\:start::before {
  content: var(--emoji-point-right);
}

.emoji\:point-right.place\:end::after,
.emoji\:point-right.justify\:end::after {
  content: var(--emoji-point-right);
}

.emoji\:point-up:not(.justify\:end, .place\:end)::before,
.emoji\:point-up.justify\:start::before {
  content: var(--emoji-point-up);
}

.emoji\:point-up.place\:end::after,
.emoji\:point-up.justify\:end::after {
  content: var(--emoji-point-up);
}

.emoji\:point-down:not(.justify\:end, .place\:end)::before,
.emoji\:point-down.justify\:start::before {
  content: var(--emoji-point-down);
}

.emoji\:point-down.place\:end::after,
.emoji\:point-down.justify\:end::after {
  content: var(--emoji-point-down);
}

.emoji\:pencil:not(.justify\:end, .place\:end)::before,
.emoji\:pencil.justify\:start::before {
  content: var(--emoji-pencil);
}

.emoji\:pencil.place\:end::after,
.emoji\:pencil.justify\:end::after {
  content: var(--emoji-pencil);
}

.emoji\:default:not(.justify\:end, .place\:end)::before,
.emoji\:default.justify\:start::before {
  content: var(--emoji-default);
}

.emoji\:default.place\:end::after,
.emoji\:default.justify\:end::after {
  content: var(--emoji-default);
}

.emoji\:info:not(.justify\:end, .place\:end)::before,
.emoji\:info.justify\:start::before {
  content: var(--emoji-info);
}

.emoji\:info.place\:end::after,
.emoji\:info.justify\:end::after {
  content: var(--emoji-info);
}

.emoji\:success:not(.justify\:end, .place\:end)::before,
.emoji\:success.justify\:start::before {
  content: var(--emoji-success);
}

.emoji\:success.place\:end::after,
.emoji\:success.justify\:end::after {
  content: var(--emoji-success);
}

.emoji\:warning:not(.justify\:end, .place\:end)::before,
.emoji\:warning.justify\:start::before {
  content: var(--emoji-warning);
}

.emoji\:warning.place\:end::after,
.emoji\:warning.justify\:end::after {
  content: var(--emoji-warning);
}

.emoji\:error:not(.justify\:end, .place\:end)::before,
.emoji\:error.justify\:start::before {
  content: var(--emoji-error);
}

.emoji\:error.place\:end::after,
.emoji\:error.justify\:end::after {
  content: var(--emoji-error);
}

.emoji\:day:not(.justify\:end, .place\:end)::before,
.emoji\:day.justify\:start::before {
  content: var(--emoji-day);
}

.emoji\:day.place\:end::after,
.emoji\:day.justify\:end::after {
  content: var(--emoji-day);
}

.emoji\:night:not(.justify\:end, .place\:end)::before,
.emoji\:night.justify\:start::before {
  content: var(--emoji-night);
}

.emoji\:night.place\:end::after,
.emoji\:night.justify\:end::after {
  content: var(--emoji-night);
}

.emoji\:contrast:not(.justify\:end, .place\:end)::before,
.emoji\:contrast.justify\:start::before {
  content: var(--emoji-contrast);
}

.emoji\:contrast.place\:end::after,
.emoji\:contrast.justify\:end::after {
  content: var(--emoji-contrast);
}

.emoji\:blend:not(.justify\:end, .place\:end)::before,
.emoji\:blend.justify\:start::before {
  content: var(--emoji-blend);
}

.emoji\:blend.place\:end::after,
.emoji\:blend.justify\:end::after {
  content: var(--emoji-blend);
}

.emoji\:blend-night:not(.justify\:end, .place\:end)::before,
.emoji\:blend-night.justify\:start::before {
  content: var(--emoji-blend-night);
}

.emoji\:blend-night.place\:end::after,
.emoji\:blend-night.justify\:end::after {
  content: var(--emoji-blend-night);
}

.emoji\:blend-day:not(.justify\:end, .place\:end)::before,
.emoji\:blend-day.justify\:start::before {
  content: var(--emoji-blend-day);
}

.emoji\:blend-day.place\:end::after,
.emoji\:blend-day.justify\:end::after {
  content: var(--emoji-blend-day);
}

.emoji\:tokens:not(.justify\:end, .place\:end)::before,
.emoji\:tokens.justify\:start::before {
  content: var(--emoji-tokens);
}

.emoji\:tokens.place\:end::after,
.emoji\:tokens.justify\:end::after {
  content: var(--emoji-tokens);
}

.emoji\:blocks:not(.justify\:end, .place\:end)::before,
.emoji\:blocks.justify\:start::before {
  content: var(--emoji-blocks);
}

.emoji\:blocks.place\:end::after,
.emoji\:blocks.justify\:end::after {
  content: var(--emoji-blocks);
}

.emoji\:layouts:not(.justify\:end, .place\:end)::before,
.emoji\:layouts.justify\:start::before {
  content: var(--emoji-layouts);
}

.emoji\:layouts.place\:end::after,
.emoji\:layouts.justify\:end::after {
  content: var(--emoji-layouts);
}

.emoji\:recipes:not(.justify\:end, .place\:end)::before,
.emoji\:recipes.justify\:start::before {
  content: var(--emoji-recipes);
}

.emoji\:recipes.place\:end::after,
.emoji\:recipes.justify\:end::after {
  content: var(--emoji-recipes);
}

.emoji\:vader:not(.justify\:end, .place\:end)::before,
.emoji\:vader.justify\:start::before {
  content: var(--emoji-vader);
}

.emoji\:vader.place\:end::after,
.emoji\:vader.justify\:end::after {
  content: var(--emoji-vader);
}

.emoji\:ollie:not(.justify\:end, .place\:end)::before,
.emoji\:ollie.justify\:start::before {
  content: var(--emoji-ollie);
}

.emoji\:ollie.place\:end::after,
.emoji\:ollie.justify\:end::after {
  content: var(--emoji-ollie);
}

.emoji\:moby:not(.justify\:end, .place\:end)::before,
.emoji\:moby.justify\:start::before {
  content: var(--emoji-moby);
}

.emoji\:moby.place\:end::after,
.emoji\:moby.justify\:end::after {
  content: var(--emoji-moby);
}

.emoji\:octopus:not(.justify\:end, .place\:end)::before,
.emoji\:octopus.justify\:start::before {
  content: var(--emoji-octopus);
}

.emoji\:octopus.place\:end::after,
.emoji\:octopus.justify\:end::after {
  content: var(--emoji-octopus);
}

.emoji\:otter:not(.justify\:end, .place\:end)::before,
.emoji\:otter.justify\:start::before {
  content: var(--emoji-otter);
}

.emoji\:otter.place\:end::after,
.emoji\:otter.justify\:end::after {
  content: var(--emoji-otter);
}

.emoji\:turtle:not(.justify\:end, .place\:end)::before,
.emoji\:turtle.justify\:start::before {
  content: var(--emoji-turtle);
}

.emoji\:turtle.place\:end::after,
.emoji\:turtle.justify\:end::after {
  content: var(--emoji-turtle);
}

.emoji\:tiger:not(.justify\:end, .place\:end)::before,
.emoji\:tiger.justify\:start::before {
  content: var(--emoji-tiger);
}

.emoji\:tiger.place\:end::after,
.emoji\:tiger.justify\:end::after {
  content: var(--emoji-tiger);
}

.emoji\:rainbow:not(.justify\:end, .place\:end)::before,
.emoji\:rainbow.justify\:start::before {
  content: var(--emoji-rainbow);
}

.emoji\:rainbow.place\:end::after,
.emoji\:rainbow.justify\:end::after {
  content: var(--emoji-rainbow);
}

.emoji\:idea:not(.justify\:end, .place\:end)::before,
.emoji\:idea.justify\:start::before {
  content: var(--emoji-idea);
}

.emoji\:idea.place\:end::after,
.emoji\:idea.justify\:end::after {
  content: var(--emoji-idea);
}

.emoji\:profile:not(.justify\:end, .place\:end)::before,
.emoji\:profile.justify\:start::before {
  content: var(--emoji-profile);
}

.emoji\:profile.place\:end::after,
.emoji\:profile.justify\:end::after {
  content: var(--emoji-profile);
}

.emoji\:favorite:not(.justify\:end, .place\:end)::before,
.emoji\:favorite.justify\:start::before {
  content: var(--emoji-favorite);
}

.emoji\:favorite.place\:end::after,
.emoji\:favorite.justify\:end::after {
  content: var(--emoji-favorite);
}

.emoji\:sparkles:not(.justify\:end, .place\:end)::before,
.emoji\:sparkles.justify\:start::before {
  content: var(--emoji-sparkles);
}

.emoji\:sparkles.place\:end::after,
.emoji\:sparkles.justify\:end::after {
  content: var(--emoji-sparkles);
}

.emoji\:home:not(.justify\:end, .place\:end)::before,
.emoji\:home.justify\:start::before {
  content: var(--emoji-home);
}

.emoji\:home.place\:end::after,
.emoji\:home.justify\:end::after {
  content: var(--emoji-home);
}

.emoji\:about:not(.justify\:end, .place\:end)::before,
.emoji\:about.justify\:start::before {
  content: var(--emoji-about);
}

.emoji\:about.place\:end::after,
.emoji\:about.justify\:end::after {
  content: var(--emoji-about);
}

.emoji\:machines:not(.justify\:end, .place\:end)::before,
.emoji\:machines.justify\:start::before {
  content: var(--emoji-machines);
}

.emoji\:machines.place\:end::after,
.emoji\:machines.justify\:end::after {
  content: var(--emoji-machines);
}

.emoji\:star:not(.justify\:end, .place\:end)::before,
.emoji\:star.justify\:start::before {
  content: var(--emoji-star);
}

.emoji\:star.place\:end::after,
.emoji\:star.justify\:end::after {
  content: var(--emoji-star);
}

.emoji\:menu:not(.justify\:end, .place\:end)::before,
.emoji\:menu.justify\:start::before {
  content: var(--emoji-menu);
}

.emoji\:menu.place\:end::after,
.emoji\:menu.justify\:end::after {
  content: var(--emoji-menu);
}

.emoji\:settings:not(.justify\:end, .place\:end)::before,
.emoji\:settings.justify\:start::before {
  content: var(--emoji-settings);
}

.emoji\:settings.place\:end::after,
.emoji\:settings.justify\:end::after {
  content: var(--emoji-settings);
}

.emoji\:log:not(.justify\:end, .place\:end)::before,
.emoji\:log.justify\:start::before {
  content: var(--emoji-log);
}

.emoji\:log.place\:end::after,
.emoji\:log.justify\:end::after {
  content: var(--emoji-log);
}

.emoji\:usage:not(.justify\:end, .place\:end)::before,
.emoji\:usage.justify\:start::before {
  content: var(--emoji-usage);
}

.emoji\:usage.place\:end::after,
.emoji\:usage.justify\:end::after {
  content: var(--emoji-usage);
}

.emoji\:decisions:not(.justify\:end, .place\:end)::before,
.emoji\:decisions.justify\:start::before {
  content: var(--emoji-decisions);
}

.emoji\:decisions.place\:end::after,
.emoji\:decisions.justify\:end::after {
  content: var(--emoji-decisions);
}

.emoji\:context:not(.justify\:end, .place\:end)::before,
.emoji\:context.justify\:start::before {
  content: var(--emoji-context);
}

.emoji\:context.place\:end::after,
.emoji\:context.justify\:end::after {
  content: var(--emoji-context);
}

.emoji\:switch-active:not(.justify\:end, .place\:end)::before,
.emoji\:switch-active.justify\:start::before {
  content: var(--emoji-switch-active);
}

.emoji\:switch-active.place\:end::after,
.emoji\:switch-active.justify\:end::after {
  content: var(--emoji-switch-active);
}

.emoji\:switch-inactive:not(.justify\:end, .place\:end)::before,
.emoji\:switch-inactive.justify\:start::before {
  content: var(--emoji-switch-inactive);
}

.emoji\:switch-inactive.place\:end::after,
.emoji\:switch-inactive.justify\:end::after {
  content: var(--emoji-switch-inactive);
}

.emoji\:doc:not(.justify\:end, .place\:end)::before,
.emoji\:doc.justify\:start::before {
  content: var(--emoji-doc);
}

.emoji\:doc.place\:end::after,
.emoji\:doc.justify\:end::after {
  content: var(--emoji-doc);
}

.emoji\:comments:not(.justify\:end, .place\:end)::before,
.emoji\:comments.justify\:start::before {
  content: var(--emoji-comments);
}

.emoji\:comments.place\:end::after,
.emoji\:comments.justify\:end::after {
  content: var(--emoji-comments);
}

.emoji\:ui:not(.justify\:end, .place\:end)::before,
.emoji\:ui.justify\:start::before {
  content: var(--emoji-ui);
}

.emoji\:ui.place\:end::after,
.emoji\:ui.justify\:end::after {
  content: var(--emoji-ui);
}

.emoji\:playbook:not(.justify\:end, .place\:end)::before,
.emoji\:playbook.justify\:start::before {
  content: var(--emoji-playbook);
}

.emoji\:playbook.place\:end::after,
.emoji\:playbook.justify\:end::after {
  content: var(--emoji-playbook);
}

.emoji\:nojs:not(.justify\:end, .place\:end)::before,
.emoji\:nojs.justify\:start::before {
  content: var(--emoji-nojs);
}

.emoji\:nojs.place\:end::after,
.emoji\:nojs.justify\:end::after {
  content: var(--emoji-nojs);
}

.emoji\:wip:not(.justify\:end, .place\:end)::before,
.emoji\:wip.justify\:start::before {
  content: var(--emoji-wip);
}

.emoji\:wip.place\:end::after,
.emoji\:wip.justify\:end::after {
  content: var(--emoji-wip);
}

.emoji\:square:not(.justify\:end, .place\:end)::before,
.emoji\:square.justify\:start::before {
  content: var(--emoji-square);
}

.emoji\:square.place\:end::after,
.emoji\:square.justify\:end::after {
  content: var(--emoji-square);
}

.emoji\:round:not(.justify\:end, .place\:end)::before,
.emoji\:round.justify\:start::before {
  content: var(--emoji-round);
}

.emoji\:round.place\:end::after,
.emoji\:round.justify\:end::after {
  content: var(--emoji-round);
}

.emoji\:pill:not(.justify\:end, .place\:end)::before,
.emoji\:pill.justify\:start::before {
  content: var(--emoji-pill);
}

.emoji\:pill.place\:end::after,
.emoji\:pill.justify\:end::after {
  content: var(--emoji-pill);
}

.emoji\:mellow:not(.justify\:end, .place\:end)::before,
.emoji\:mellow.justify\:start::before {
  content: var(--emoji-mellow);
}

.emoji\:mellow.place\:end::after,
.emoji\:mellow.justify\:end::after {
  content: var(--emoji-mellow);
}

.emoji\:soft:not(.justify\:end, .place\:end)::before,
.emoji\:soft.justify\:start::before {
  content: var(--emoji-soft);
}

.emoji\:soft.place\:end::after,
.emoji\:soft.justify\:end::after {
  content: var(--emoji-soft);
}

.emoji\:prose:not(.justify\:end, .place\:end)::before,
.emoji\:prose.justify\:start::before {
  content: var(--emoji-prose);
}

.emoji\:prose.place\:end::after,
.emoji\:prose.justify\:end::after {
  content: var(--emoji-prose);
}

.emoji\:dates:not(.justify\:end, .place\:end)::before,
.emoji\:dates.justify\:start::before {
  content: var(--emoji-dates);
}

.emoji\:dates.place\:end::after,
.emoji\:dates.justify\:end::after {
  content: var(--emoji-dates);
}

.emoji\:published:not(.justify\:end, .place\:end)::before,
.emoji\:published.justify\:start::before {
  content: var(--emoji-published);
}

.emoji\:published.place\:end::after,
.emoji\:published.justify\:end::after {
  content: var(--emoji-published);
}

.emoji\:updated:not(.justify\:end, .place\:end)::before,
.emoji\:updated.justify\:start::before {
  content: var(--emoji-updated);
}

.emoji\:updated.place\:end::after,
.emoji\:updated.justify\:end::after {
  content: var(--emoji-updated);
}

.emoji\:outdated:not(.justify\:end, .place\:end)::before,
.emoji\:outdated.justify\:start::before {
  content: var(--emoji-outdated);
}

.emoji\:outdated.place\:end::after,
.emoji\:outdated.justify\:end::after {
  content: var(--emoji-outdated);
}

.emoji\:spicy:not(.justify\:end, .place\:end)::before,
.emoji\:spicy.justify\:start::before {
  content: var(--emoji-spicy);
}

.emoji\:spicy.place\:end::after,
.emoji\:spicy.justify\:end::after {
  content: var(--emoji-spicy);
}

.emoji\:cookie:not(.justify\:end, .place\:end)::before,
.emoji\:cookie.justify\:start::before {
  content: var(--emoji-cookie);
}

.emoji\:cookie.place\:end::after,
.emoji\:cookie.justify\:end::after {
  content: var(--emoji-cookie);
}

.emoji\:raw:not(.justify\:end, .place\:end)::before,
.emoji\:raw.justify\:start::before {
  content: var(--emoji-raw);
}

.emoji\:raw.place\:end::after,
.emoji\:raw.justify\:end::after {
  content: var(--emoji-raw);
}

.emoji\:magic:not(.justify\:end, .place\:end)::before,
.emoji\:magic.justify\:start::before {
  content: var(--emoji-magic);
}

.emoji\:magic.place\:end::after,
.emoji\:magic.justify\:end::after {
  content: var(--emoji-magic);
}

.emoji\:wave:not(.justify\:end, .place\:end)::before,
.emoji\:wave.justify\:start::before {
  content: var(--emoji-wave);
}

.emoji\:wave.place\:end::after,
.emoji\:wave.justify\:end::after {
  content: var(--emoji-wave);
}

.emoji\:perf:not(.justify\:end, .place\:end)::before,
.emoji\:perf.justify\:start::before {
  content: var(--emoji-perf);
}

.emoji\:perf.place\:end::after,
.emoji\:perf.justify\:end::after {
  content: var(--emoji-perf);
}

.emoji\:tuning:not(.justify\:end, .place\:end)::before,
.emoji\:tuning.justify\:start::before {
  content: var(--emoji-tuning);
}

.emoji\:tuning.place\:end::after,
.emoji\:tuning.justify\:end::after {
  content: var(--emoji-tuning);
}

.emoji\:bubbles:not(.justify\:end, .place\:end)::before,
.emoji\:bubbles.justify\:start::before {
  content: var(--emoji-bubbles);
}

.emoji\:bubbles.place\:end::after,
.emoji\:bubbles.justify\:end::after {
  content: var(--emoji-bubbles);
}

.emoji\:tram:not(.justify\:end, .place\:end)::before,
.emoji\:tram.justify\:start::before {
  content: var(--emoji-tram);
}

.emoji\:tram.place\:end::after,
.emoji\:tram.justify\:end::after {
  content: var(--emoji-tram);
}

.emoji\:sketch:not(.justify\:end, .place\:end)::before,
.emoji\:sketch.justify\:start::before {
  content: var(--emoji-sketch);
}

.emoji\:sketch.place\:end::after,
.emoji\:sketch.justify\:end::after {
  content: var(--emoji-sketch);
}

.emoji\:play:not(.justify\:end, .place\:end)::before,
.emoji\:play.justify\:start::before {
  content: var(--emoji-play);
}

.emoji\:play.place\:end::after,
.emoji\:play.justify\:end::after {
  content: var(--emoji-play);
}

.emoji\:pause:not(.justify\:end, .place\:end)::before,
.emoji\:pause.justify\:start::before {
  content: var(--emoji-pause);
}

.emoji\:pause.place\:end::after,
.emoji\:pause.justify\:end::after {
  content: var(--emoji-pause);
}

.emoji\:clear:not(.justify\:end, .place\:end)::before,
.emoji\:clear.justify\:start::before {
  content: var(--emoji-clear);
}

.emoji\:clear.place\:end::after,
.emoji\:clear.justify\:end::after {
  content: var(--emoji-clear);
}

.emoji\:stop:not(.justify\:end, .place\:end)::before,
.emoji\:stop.justify\:start::before {
  content: var(--emoji-stop);
}

.emoji\:stop.place\:end::after,
.emoji\:stop.justify\:end::after {
  content: var(--emoji-stop);
}

.emoji\:snap:not(.justify\:end, .place\:end)::before,
.emoji\:snap.justify\:start::before {
  content: var(--emoji-snap);
}

.emoji\:snap.place\:end::after,
.emoji\:snap.justify\:end::after {
  content: var(--emoji-snap);
}

.emoji\:update:not(.justify\:end, .place\:end)::before,
.emoji\:update.justify\:start::before {
  content: var(--emoji-update);
}

.emoji\:update.place\:end::after,
.emoji\:update.justify\:end::after {
  content: var(--emoji-update);
}

.emoji\:not-found:not(.justify\:end, .place\:end)::before,
.emoji\:not-found.justify\:start::before {
  content: var(--emoji-not-found);
}

.emoji\:not-found.place\:end::after,
.emoji\:not-found.justify\:end::after {
  content: var(--emoji-not-found);
}

.emoji\:random:not(.justify\:end, .place\:end)::before,
.emoji\:random.justify\:start::before {
  content: var(--emoji-random);
}

.emoji\:random.place\:end::after,
.emoji\:random.justify\:end::after {
  content: var(--emoji-random);
}

.emoji\:rect:not(.justify\:end, .place\:end)::before,
.emoji\:rect.justify\:start::before {
  content: var(--emoji-rect);
}

.emoji\:rect.place\:end::after,
.emoji\:rect.justify\:end::after {
  content: var(--emoji-rect);
}

.emoji\:geometry-2d:not(.justify\:end, .place\:end)::before,
.emoji\:geometry-2d.justify\:start::before {
  content: var(--emoji-geometry-2d);
}

.emoji\:geometry-2d.place\:end::after,
.emoji\:geometry-2d.justify\:end::after {
  content: var(--emoji-geometry-2d);
}

.emoji\:geometry-3d:not(.justify\:end, .place\:end)::before,
.emoji\:geometry-3d.justify\:start::before {
  content: var(--emoji-geometry-3d);
}

.emoji\:geometry-3d.place\:end::after,
.emoji\:geometry-3d.justify\:end::after {
  content: var(--emoji-geometry-3d);
}

.emoji\:russian-dolls:not(.justify\:end, .place\:end)::before,
.emoji\:russian-dolls.justify\:start::before {
  content: var(--emoji-russian-dolls);
}

.emoji\:russian-dolls.place\:end::after,
.emoji\:russian-dolls.justify\:end::after {
  content: var(--emoji-russian-dolls);
}

.emoji\:bullseye:not(.justify\:end, .place\:end)::before,
.emoji\:bullseye.justify\:start::before {
  content: var(--emoji-bullseye);
}

.emoji\:bullseye.place\:end::after,
.emoji\:bullseye.justify\:end::after {
  content: var(--emoji-bullseye);
}

.emoji\:projection:not(.justify\:end, .place\:end)::before,
.emoji\:projection.justify\:start::before {
  content: var(--emoji-projection);
}

.emoji\:projection.place\:end::after,
.emoji\:projection.justify\:end::after {
  content: var(--emoji-projection);
}

.emoji\:matrix-3d:not(.justify\:end, .place\:end)::before,
.emoji\:matrix-3d.justify\:start::before {
  content: var(--emoji-matrix-3d);
}

.emoji\:matrix-3d.place\:end::after,
.emoji\:matrix-3d.justify\:end::after {
  content: var(--emoji-matrix-3d);
}

.emoji\:camera-3d:not(.justify\:end, .place\:end)::before,
.emoji\:camera-3d.justify\:start::before {
  content: var(--emoji-camera-3d);
}

.emoji\:camera-3d.place\:end::after,
.emoji\:camera-3d.justify\:end::after {
  content: var(--emoji-camera-3d);
}

.emoji\:animation-3d:not(.justify\:end, .place\:end)::before,
.emoji\:animation-3d.justify\:start::before {
  content: var(--emoji-animation-3d);
}

.emoji\:animation-3d.place\:end::after,
.emoji\:animation-3d.justify\:end::after {
  content: var(--emoji-animation-3d);
}

.emoji\:filters:not(.justify\:end, .place\:end)::before,
.emoji\:filters.justify\:start::before {
  content: var(--emoji-filters);
}

.emoji\:filters.place\:end::after,
.emoji\:filters.justify\:end::after {
  content: var(--emoji-filters);
}

.emoji\:convolution:not(.justify\:end, .place\:end)::before,
.emoji\:convolution.justify\:start::before {
  content: var(--emoji-convolution);
}

.emoji\:convolution.place\:end::after,
.emoji\:convolution.justify\:end::after {
  content: var(--emoji-convolution);
}

.emoji\:texture:not(.justify\:end, .place\:end)::before,
.emoji\:texture.justify\:start::before {
  content: var(--emoji-texture);
}

.emoji\:texture.place\:end::after,
.emoji\:texture.justify\:end::after {
  content: var(--emoji-texture);
}

.emoji\:multiple-tex:not(.justify\:end, .place\:end)::before,
.emoji\:multiple-tex.justify\:start::before {
  content: var(--emoji-multiple-tex);
}

.emoji\:multiple-tex.place\:end::after,
.emoji\:multiple-tex.justify\:end::after {
  content: var(--emoji-multiple-tex);
}

.emoji\:package-style:not(.justify\:end, .place\:end)::before,
.emoji\:package-style.justify\:start::before {
  content: var(--emoji-package-style);
}

.emoji\:package-style.place\:end::after,
.emoji\:package-style.justify\:end::after {
  content: var(--emoji-package-style);
}

.emoji\:package-utilities:not(.justify\:end, .place\:end)::before,
.emoji\:package-utilities.justify\:start::before {
  content: var(--emoji-package-utilities);
}

.emoji\:package-utilities.place\:end::after,
.emoji\:package-utilities.justify\:end::after {
  content: var(--emoji-package-utilities);
}

.emoji\:package-ui:not(.justify\:end, .place\:end)::before,
.emoji\:package-ui.justify\:start::before {
  content: var(--emoji-package-ui);
}

.emoji\:package-ui.place\:end::after,
.emoji\:package-ui.justify\:end::after {
  content: var(--emoji-package-ui);
}

.emoji\:package-playbook:not(.justify\:end, .place\:end)::before,
.emoji\:package-playbook.justify\:start::before {
  content: var(--emoji-package-playbook);
}

.emoji\:package-playbook.place\:end::after,
.emoji\:package-playbook.justify\:end::after {
  content: var(--emoji-package-playbook);
}

.emoji\:package-prose:not(.justify\:end, .place\:end)::before,
.emoji\:package-prose.justify\:start::before {
  content: var(--emoji-package-prose);
}

.emoji\:package-prose.place\:end::after,
.emoji\:package-prose.justify\:end::after {
  content: var(--emoji-package-prose);
}

.emoji\:package-sketch:not(.justify\:end, .place\:end)::before,
.emoji\:package-sketch.justify\:start::before {
  content: var(--emoji-package-sketch);
}

.emoji\:package-sketch.place\:end::after,
.emoji\:package-sketch.justify\:end::after {
  content: var(--emoji-package-sketch);
}

.emoji\:package-gfx:not(.justify\:end, .place\:end)::before,
.emoji\:package-gfx.justify\:start::before {
  content: var(--emoji-package-gfx);
}

.emoji\:package-gfx.place\:end::after,
.emoji\:package-gfx.justify\:end::after {
  content: var(--emoji-package-gfx);
}

.emoji\:package-git-poule:not(.justify\:end, .place\:end)::before,
.emoji\:package-git-poule.justify\:start::before {
  content: var(--emoji-package-git-poule);
}

.emoji\:package-git-poule.place\:end::after,
.emoji\:package-git-poule.justify\:end::after {
  content: var(--emoji-package-git-poule);
}

.emoji\:learning:not(.justify\:end, .place\:end)::before,
.emoji\:learning.justify\:start::before {
  content: var(--emoji-learning);
}

.emoji\:learning.place\:end::after,
.emoji\:learning.justify\:end::after {
  content: var(--emoji-learning);
}

.emoji\:projects:not(.justify\:end, .place\:end)::before,
.emoji\:projects.justify\:start::before {
  content: var(--emoji-projects);
}

.emoji\:projects.place\:end::after,
.emoji\:projects.justify\:end::after {
  content: var(--emoji-projects);
}

.emoji\:wing:not(.justify\:end, .place\:end)::before,
.emoji\:wing.justify\:start::before {
  content: var(--emoji-wing);
}

.emoji\:wing.place\:end::after,
.emoji\:wing.justify\:end::after {
  content: var(--emoji-wing);
}

.emoji\:feather:not(.justify\:end, .place\:end)::before,
.emoji\:feather.justify\:start::before {
  content: var(--emoji-feather);
}

.emoji\:feather.place\:end::after,
.emoji\:feather.justify\:end::after {
  content: var(--emoji-feather);
}

.emoji\:phoenix:not(.justify\:end, .place\:end)::before,
.emoji\:phoenix.justify\:start::before {
  content: var(--emoji-phoenix);
}

.emoji\:phoenix.place\:end::after,
.emoji\:phoenix.justify\:end::after {
  content: var(--emoji-phoenix);
}

.emoji\:fat-fuzzy:not(.justify\:end, .place\:end)::before,
.emoji\:fat-fuzzy.justify\:start::before {
  content: var(--emoji-fat-fuzzy);
}

.emoji\:fat-fuzzy.place\:end::after,
.emoji\:fat-fuzzy.justify\:end::after {
  content: var(--emoji-fat-fuzzy);
} /* == Visibility and DOM node accessibility control == */
/* Remove DOM node from document 
	- DOM node becomes inaccessible to everyone
	*/
[hidden],
.hide\:rm-node {
  display: none;
}

/* Render DOM node invisible (1):
	- DOM node becomes inaccessible to assistive tech
	- layout remains unchanged (w/ exceptions: see tables)
	- node is not removed from document
	*/
.hide\:sr-never {
  visibility: hidden;
}

/* Render DOM node invisible (2):
	- DOM node remains accessible to assistive tech
	- style element to free the space taken up by its box in the document layout
	- node is not removed from document
	*/
.sr-only,
.hide\:sr-always,
.hide\:viz-only {
  clip-path: rect(0 0 0 0);
  border: 0;
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 0;
  height: 0;
  inline-size: 0;
  block-size: 0;
  white-space: nowrap;
}

/* To undo hide: */
.unhide {
  border: unset;
  clip-path: unset;
  height: auto;
  margin: initial;
  overflow: hidden;
  padding: var(--ui-size);
  position: unset;
  width: initial;
  white-space: normal;
}

/* == DOM content selection control == */
.unselectable {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.copy-text {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* == Toggle  default == */
.toggle[aria-pressed=true] {
  box-shadow: inset var(--shadow-inset-md);
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

[class*=frame] img {
  max-block-size: calc(100vh - 2 * var(--ui-header-height) - 2 * var(--ui-size));
  inline-size: auto;
}

.zoom img {
  inline-size: 100%;
  max-inline-size: unset;
}

ff-media {
  position: relative;
  block-size: 100%;
  max-inline-size: 100%;
  margin-block: var(--size-base-2xl);
}

.media-context {
  position: absolute;
  top: 50%;
  right: 50%;
  z-index: 2;
  transform: translate(55%, 120%);
  transition: transform 300ms ease-in-out;
  min-inline-size: calc(var(--layout-sidebar-collapsed) / var(--size-ratio-sm));
}

button {
  --hue: var(--color-theme-primary);
  --chroma: var(--color-chroma-neutral);
  --lightness: var(--lightness-ui-base);
  --lightness-accent: var(--lightness-ui-base);
  --lightness-contrast: var(--lightness-ui-contrast-base);
  --chroma-contrast: var(--chroma-base);
  --chroma-accent: var(--color-chroma-400);
  --shade: oklch(var(--lightness) var(--chroma) var(--hue));
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  --accent: oklch(var(--lightness-accent) var(--chroma-accent) var(--hue));
  color: var(--ink);
  background-color: var(--shade);
  border-color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: var(--justify, center);
  flex-wrap: nowrap;
  block-size: fit-content;
  min-block-size: max-content;
  font-size: var(--font-size);
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-ui);
  line-height: var(--font-leading-ui);
  padding: var(--ui-size-sm) var(--ui-size);
  border-radius: var(--border-radius-base);
  border: var(--border-width-md) solid var(--accent);
  /* Enables breaking out of switcher for ellipsis in nav  */
}

button.nowrap {
  flex-wrap: nowrap;
}

button.variant\:fill {
  --lightness: var(--lightness-ui-base);
  --lightness-accent: var(--lightness-ui-base);
  --lightness-contrast: var(--lightness-ui-contrast-base);
  background-color: var(--shade);
  border-color: var(--accent);
}

button.variant\:outline {
  --lightness: var(--color-lightness-600);
  --lightness-accent: var(--lightness-ui-base);
  --lightness-contrast: var(--lightness-accent-base);
  background-color: inherit;
  border-color: var(--accent);
}

button.variant\:bare {
  --lightness: var(--color-lightness-100);
  --lightness-accent: var(--lightness-base);
  --lightness-contrast: var(--lightness-contrast-base);
  background-color: inherit;
  border: var(--border-width-md) solid var(--accent);
}

button.variant\:outline:hover {
  --lightness: var(--lightness-base);
  --contrast: var(--contrast-base);
  --lightness-contrast: var(--contrast-base);
  --chroma-contrast: var(--chroma-contrast-base);
  background-color: var(--shade);
}

button.variant\:bare:hover {
  --lightness: var(--lightness-base);
  --contrast: var(--contrast-base);
  --lightness-contrast: var(--lightness-contrast-base);
  --chroma-contrast: var(--chroma-contrast-base);
  background-color: var(--shade);
}

button.variant\:outline:active {
  --lightness: var(--color-lightness-200);
  --lightness-contrast: var(--color-lightness-600);
  background-color: var(--shade);
}

button.variant\:bare:active {
  --lightness: var(--color-lightness-100);
  --lightness-contrast: var(--color-lightness-600);
  background-color: var(--shade);
}

[aria-pressed=true].variant\:fill {
  --lightness: var(--color-lightness-500);
  --lightness-contrast: var(--color-lightness-000);
}

[aria-pressed=true].variant\:fill:active {
  --lightness: var(--color-lightness-600);
  --lightness-contrast: var(--color-lightness-100);
}

[aria-pressed=true].variant\:fill:hover {
  --lightness: var(--lightness-ui-base-pressed-hover);
  --lightness-contrast: var(--color-lightness-000);
}

button[class*="bg:"]:not([class*=":neutral"]).variant\:fill {
  --chroma: var(--color-chroma-400);
  --chroma-contrast: var(--color-chroma-000);
}

button[class*="bg:"]:not([class*=":neutral"]).variant\:outline {
  --chroma: var(--color-chroma-400);
}

button[class*="bg:"]:not([class*=":neutral"]).variant\:bare {
  --chroma: var(--color-chroma-100);
}

button[class*="bg:"]:not([class*=":neutral"]).variant\:outline:active, button[class*="bg:"]:not([class*=":neutral"]).variant\:bare:active {
  --chroma: var(--color-chroma-200);
}

button[class*="bg:"].color\:neutral.variant\:bare:hover,
button[class*="bg:"].color\:neutral.variant\:outline:hover {
  --color-bg: oklch(
  	var(--lightness-surface-1) var(--color-chroma-neutral) var(--hue)
  );
  background-color: var(--color-bg);
}

button.variant\:fill:not([disabled]):hover {
  --lightness: var(--lightness-surface-4);
}

button[class*="bg:"]:not([class*=":neutral"]).variant\:outline:hover, button[class*="bg:"]:not([class*=":neutral"]).variant\:bare:hover {
  --lightness: var(--lightness-surface-1);
  --chroma: var(--chroma-surface-1);
  --lightness-contrast: var(--lightness-surface-1-contrast);
  --chroma-contrast: var(--chroma-surface-1-contrast);
  background-color: var(--shade);
  color: var(--ink);
}

button[class*="bg:"]:not([class*=":neutral"]).variant\:outline:active, button[class*="bg:"]:not([class*=":neutral"]).variant\:bare:active {
  --lightness-contrast: var(--chroma-surface-2-contrast);
}

form {
  --hue: var(--color-theme-primary);
  --lightness-accent: var(--color-lightness-400);
  --chroma-accent: var(--color-chroma-400);
  --lightness-contrast: var(--color-lightness-base);
  --chroma-contrast: var(--color-chroma-base);
  --accent: oklch(var(--lightness-accent) var(--chroma-accent) var(--hue));
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  --color-accent: var(--accent);
  color: var(--ink);
  max-height: fit-content;
}

/*

TODO: Use native CSS form styling when available

form:has(:invalid:not(:placeholder-shown)) {
	--hue-semantic: var(--color-semantic-danger);
}

form:has(:valid) {
	--hue-semantic: var(--color-semantic-success);
} */
form * {
  font-family: var(--font-family-ui);
}

label,
.feedback {
  display: block;
}

label,
legend,
.form\:element {
  color: var(--ink);
  font-weight: var(--font-weight-ui);
  padding-inline: 0;
  background-color: inherit;
}

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

legend {
  font-size: var(--font-size);
  margin-block-end: var(--ui-size);
}

input,
select,
textarea {
  --padding-block: calc(var(--ui-size-sm) - 2 * var(--border-width-md));
  --padding-inline: var(--ui-size);
  border: 1px solid var(--accent);
  border-radius: var(--border-radius-base);
  color: var(--ink);
  accent-color: var(--accent);
  border-color: var(--accent);
  font-size: var(--font-size);
  padding: var(--ui-size-sm) var(--ui-size);
}

label > input {
  max-inline-size: 100%;
}

label > input[type=radio],
label > input[type=checkbox] {
  padding: 0;
  outline-offset: 0;
}

/* TODO : cleanup - use "current" size values */
[type=file] {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  padding: var(--ui-size) var(--ui-size) var(--ui-size-sm);
}

[type=file]:hover {
  --lightness: var(--color-lightness-000);
}

[type=file]:active {
  --lightness: var(--lightness-base);
}

input:hover,
label:hover > [type=file] {
  --lightness: var(--color-lightness-100); /* TODO: use themeable color var */
  --lightness-contrast: var(--color-contrast-200);
}

[disabled] {
  filter: grayscale(50%) opacity(50%);
  cursor: not-allowed;
}

/* Display range input step labels */
input[type=range] {
  padding-inline: 0;
}

label:has([type=range]) {
  line-height: 1;
  padding-inline: var(--outline-offset-md);
}

[type=range][list=markers] + datalist {
  display: flex;
  justify-content: var(--justify, space-between);
  padding: 0 var(--ui-size);
  margin-block-start: var(--ui-size-sm);
}

[type=range][list=markers] + datalist > option {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-body);
  padding: 0;
}

[type=range]:not([list]) + datalist > option {
  display: none;
}

label[class*="l:stack"] > [type=range] {
  margin-block-start: var(--ui-size-sm);
}

/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */
:root {
  --border-radius-base: var(--border-radius-md);
  --border-radius-lg: 0.34rem;
  --border-radius-md: 0.26rem;
  --border-radius-null: 0;
  --border-radius-sm: 0.16rem;
  --border-radius-xl: 0.66rem;
  --border-width-lg: 2px;
  --border-width-md: 1px;
  --border-width-xl: 4px;
  --color-chroma-000: 0.025;
  --color-chroma-100: 0.075;
  --color-chroma-200: 0.2;
  --color-chroma-300: 0.35;
  --color-chroma-400: 0.25;
  --color-chroma-500: 0.15;
  --color-chroma-600: 0.1;
  --color-chroma-neutral: 0.001;
  --color-gradient-000-end: var(--color-magic-accent);
  --color-gradient-000-middle: var(--color-magic-primary);
  --color-gradient-000-start: var(--color-magic-highlight);
  --color-gradient-001-end: var(--color-magic-danger);
  --color-gradient-001-middle: var(--color-magic-warning);
  --color-gradient-001-start: var(--color-magic-success);
  --color-gradient-002-end: var(--color-magic-danger-a);
  --color-gradient-002-middle: var(--color-magic-warning-a);
  --color-gradient-002-start: var(--color-magic-success-a);
  --color-hue-blue: 269.95;
  --color-hue-cherry: 13.24;
  --color-hue-framboise: 360;
  --color-hue-fuschia: 339.35;
  --color-hue-gray: 0;
  --color-hue-gray-violet: 308.5;
  --color-hue-green: 180.22;
  --color-hue-lilac: 294.88;
  --color-hue-lime: 109.59;
  --color-hue-orange: 89.47;
  --color-hue-red: 11.8;
  --color-hue-seagreen: 194.96;
  --color-hue-violet: 285.94;
  --color-hue-yellow: 97.94;
  --color-lightness-000: 95%;
  --color-lightness-100: 90%;
  --color-lightness-200: 80%;
  --color-lightness-300: 58%;
  --color-lightness-400: 52%;
  --color-lightness-500: 42%;
  --color-lightness-600: 32%;
  --color-lightness-dark-base: 25%;
  --color-lightness-dark-blend: 29%;
  --color-lightness-dark-contrast: 25%;
  --color-lightness-light-base: 99%;
  --color-lightness-light-blend: 96%;
  --color-lightness-light-contrast: 99%;
  --color-magic-accent: hsl(188.19 90% 60%);
  --color-magic-danger: hsl(340.57 100% 60%);
  --color-magic-danger-a: hsl(340.57 100% 60% / 0.7);
  --color-magic-highlight: hsl(329.3 90% 60%);
  --color-magic-primary: oklch(0.4351 0.2544 284.8828);
  --color-magic-primary-dark: oklch(0.2994 0.1628 274.54 / 0.3711);
  --color-magic-primary-light: oklch(0.8132 0.0863 285.94 / 0.2965);
  --color-magic-success: hsl(171.07 99% 60%);
  --color-magic-success-a: hsl(171.07 99% 60% / 0.5);
  --color-magic-warning: hsl(48 99% 60%);
  --color-magic-warning-a: hsl(48 99% 60% / 0.5);
  --color-palette-banana: var(--color-hue-yellow);
  --color-palette-blueberry: var(--color-hue-blue);
  --color-palette-framboise: var(--color-hue-framboise);
  --color-palette-grape: var(--color-hue-lilac);
  --color-palette-lime: var(--color-hue-lime);
  --color-palette-litchee: var(--color-hue-red);
  --color-palette-mora: var(--color-hue-fuschia);
  --color-palette-tangerine: var(--color-hue-orange);
  --color-semantic-danger: var(--color-hue-red);
  --color-semantic-info: var(--color-hue-blue);
  --color-semantic-success: var(--color-hue-green);
  --color-semantic-warning: var(--color-hue-yellow);
  --color-shadow-accent: hsl(188.19 90% 60%);
  --color-shadow-highlight: hsl(329.3 90% 60%);
  --color-shadow-primary: oklch(0.4351 0.2544 284.8828);
  --color-state-active-chroma: var(--color-chroma-500);
  --color-state-active-lightness: 42%;
  --color-state-default-chroma: var(--color-chroma-300);
  --color-state-default-lightness: 58%;
  --color-state-disabled-chroma: var(--color-chroma-100);
  --color-state-disabled-lightness: 90%;
  --color-state-focus-chroma: var(--color-chroma-500);
  --color-state-focus-lightness: 42%;
  --color-state-hover-chroma: var(--color-chroma-400);
  --color-state-hover-lightness: 52%;
  --color-state-visited-chroma: var(--color-chroma-200);
  --color-state-visited-lightness: 80%;
  --color-theme-accent: var(--color-hue-seagreen);
  --color-theme-highlight: var(--color-hue-framboise);
  --color-theme-neutral: var(--color-hue-gray);
  --color-theme-primary: var(--color-hue-violet);
  --color-theme-surface: var(--color-hue-gray-violet);
  --font-family-body-base: var(--font-family-vendor-sans);
  --font-family-body-fallback: var(--font-family-system-sans);
  --font-family-heading-base: var(--font-family-vendor-heading);
  --font-family-heading-fallback: var(--font-family-system-sans);
  --font-family-mono-base: var(--font-family-vendor-mono);
  --font-family-mono-fallback: var(--font-family-system-mono);
  --font-family-sans-base: var(--font-family-vendor-sans);
  --font-family-sans-fallback: var(--font-family-system-sans);
  --font-family-subheading-base: var(--font-family-vendor-heading);
  --font-family-subheading-fallback: var(--font-family-system-sans);
  --font-family-system-mono: "Courier New", "Courier", monospace;
  --font-family-system-sans: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Noto Sans", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-family-vendor-heading: "Encode Sans SC";
  --font-family-vendor-mono: "Anonymous Pro";
  --font-family-vendor-sans: "Montserrat";
  --font-leading-body: 1.85;
  --font-leading-heading: 1.3;
  --font-leading-large: 2;
  --font-leading-nav: 2;
  --font-leading-neutral: 1;
  --font-leading-ui: 1.32;
  --font-size-2xl: var(--fluid-3);
  --font-size-2xs: var(--fluid--3);
  --font-size-body: var(--fluid-0);
  --font-size-code: var(--fluid-0);
  --font-size-h1: var(--fluid-4);
  --font-size-h2: var(--fluid-3);
  --font-size-h3: var(--fluid-2);
  --font-size-h4: var(--fluid-1);
  --font-size-h5: var(--fluid-0);
  --font-size-lg: var(--fluid-1);
  --font-size-md: var(--fluid-0);
  --font-size-sm: var(--fluid--1);
  --font-size-small: var(--fluid--1);
  --font-size-ui: var(--fluid-0);
  --font-size-xl: var(--fluid-2);
  --font-size-xs: var(--fluid--2);
  --font-weight-100: 100;
  --font-weight-200: 200;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  --font-weight-body: var(--font-weight-regular);
  --font-weight-bold: var(--font-weight-700);
  --font-weight-code: var(--font-weight-regular);
  --font-weight-extrabold: var(--font-weight-800);
  --font-weight-h1: var(--font-weight-extrabold);
  --font-weight-h2: var(--font-weight-semibold);
  --font-weight-h3: var(--font-weight-semibold);
  --font-weight-h4: var(--font-weight-semibold);
  --font-weight-h5: var(--font-weight-semibold);
  --font-weight-light: var(--font-weight-200);
  --font-weight-link: var(--font-weight-regular);
  --font-weight-medium: var(--font-weight-500);
  --font-weight-regular: var(--font-weight-400);
  --font-weight-semibold: var(--font-weight-600);
  --font-weight-ui: var(--font-weight-medium);
  --icon-emoji-2xl: calc(var(--scale-base-20) * var(--size-ratio-sm));
  --icon-emoji-2xs: calc(var(--scale-base-02) / var(--size-ratio-sm));
  --icon-emoji-lg: calc(var(--scale-base-00) * var(--size-ratio-sm));
  --icon-emoji-md: 1rem;
  --icon-emoji-sm: calc(var(--scale-base-00) / var(--size-ratio-xs));
  --icon-emoji-xl: calc(var(--scale-base-10) * var(--size-ratio-sm));
  --icon-emoji-xs: calc(var(--scale-base-01) / var(--size-ratio-sm));
  --icon-svg-2xl: calc(var(--icon-svg-xl) * var(--size-ratio-sm));
  --icon-svg-2xs: calc(var(--icon-svg-xs) / var(--size-ratio-sm));
  --icon-svg-lg: calc(var(--icon-svg-md) * var(--size-ratio-sm));
  --icon-svg-md: 2rem;
  --icon-svg-sm: calc(var(--icon-svg-md) / var(--size-ratio-sm));
  --icon-svg-xl: calc(var(--icon-svg-lg) * var(--size-ratio-sm));
  --icon-svg-xs: calc(var(--icon-svg-sm) / var(--size-ratio-sm));
  --layout-base: 1rem;
  --layout-breakpoint-2xl: 3048px;
  --layout-breakpoint-2xs: 320px;
  --layout-breakpoint-lg: 1620px;
  --layout-breakpoint-md: 1360px;
  --layout-breakpoint-sm: 935px;
  --layout-breakpoint-xl: 2048px;
  --layout-breakpoint-xs: 620px;
  --layout-gap-2xl: calc(var(--scale-base-20) * var(--size-ratio-sm));
  --layout-gap-2xs: calc(var(--scale-base-02) / var(--size-ratio-sm));
  --layout-gap-lg: calc(var(--scale-base-00) * var(--size-ratio-sm));
  --layout-gap-md: 1rem;
  --layout-gap-sm: calc(var(--scale-base-00) / var(--size-ratio-xs));
  --layout-gap-xl: calc(var(--scale-base-10) * var(--size-ratio-sm));
  --layout-gap-xs: calc(var(--scale-base-01) / var(--size-ratio-sm));
  --layout-grid-item-2xl: 35rem;
  --layout-grid-item-2xs: 7rem;
  --layout-grid-item-3xs: 5rem;
  --layout-grid-item-lg: 25rem;
  --layout-grid-item-md: 20rem;
  --layout-grid-item-sm: 15rem;
  --layout-grid-item-xl: 30rem;
  --layout-grid-item-xs: 10rem;
  --layout-sidebar-2xl: 46ch;
  --layout-sidebar-2xs: 10ch;
  --layout-sidebar-3xl: 60ch;
  --layout-sidebar-base: 24ch;
  --layout-sidebar-collapsed: 6.5em;
  --layout-sidebar-hidden: 0em;
  --layout-sidebar-lg: 30ch;
  --layout-sidebar-md: 24ch;
  --layout-sidebar-sm: 18ch;
  --layout-sidebar-xl: 36ch;
  --layout-sidebar-xs: 12ch;
  --layout-threshold-2xl: var(--layout-breakpoint-2xl);
  --layout-threshold-2xs: var(--layout-breakpoint-2xs);
  --layout-threshold-3xs: 6.5em;
  --layout-threshold-lg: var(--layout-breakpoint-lg);
  --layout-threshold-md: var(--layout-breakpoint-md);
  --layout-threshold-sm: var(--layout-breakpoint-sm);
  --layout-threshold-xl: var(--layout-breakpoint-xl);
  --layout-threshold-xs: var(--layout-breakpoint-xs);
  --layout-z-index-0: 0;
  --layout-z-index-1: 1;
  --layout-z-index-2: 2;
  --layout-z-index-3: 3;
  --layout-z-index-4: 4;
  --layout-z-index-5: 5;
  --layout-z-index-fixed: var(--layout-z-index-4);
  --layout-z-index-inset: var(--layout-z-index-0);
  --layout-z-index-layer: var(--layout-z-index-1);
  --layout-z-index-overlay: var(--layout-z-index-5);
  --layout-z-index-reveal: var(--layout-z-index-3);
  --layout-z-index-sticky: var(--layout-z-index-2);
  --outline-offset-lg: 3px;
  --outline-offset-md: 2px;
  --outline-offset-sm: 1.75px;
  --outline-offset-xs: 1.5px;
  --overlay-height-2xs: calc(20vh - 2 * var(--ui-size));
  --overlay-height-3xs: calc(14vh - 2 * var(--ui-size));
  --overlay-height-lg: calc(76vh - 2 * var(--ui-size));
  --overlay-height-md: calc(64vh - 2 * var(--ui-size));
  --overlay-height-sm: calc(40vh - 2 * var(--ui-size));
  --overlay-height-xl: calc(100vh - var(--ui-header-height) - 2 * var(--ui-size) - var(--outline-offset-lg));
  --overlay-height-xs: calc(30vh - 2 * var(--ui-size));
  --scale-base-00: 1rem;
  --scale-base-01: calc(var(--scale-base-00) / var(--size-ratio-xs));
  --scale-base-02: calc(var(--scale-base-01) / var(--size-ratio-sm));
  --scale-base-03: calc(var(--scale-base-02) / var(--size-ratio-sm));
  --scale-base-04: calc(var(--scale-base-03) / var(--size-ratio-sm));
  --scale-base-05: calc(var(--scale-base-04) / var(--size-ratio-sm));
  --scale-base-10: calc(var(--scale-base-00) * var(--size-ratio-sm));
  --scale-base-20: calc(var(--scale-base-10) * var(--size-ratio-sm));
  --scale-base-30: calc(var(--scale-base-20) * var(--size-ratio-sm));
  --scale-base-40: calc(var(--scale-base-30) * var(--size-ratio-sm));
  --scale-base-50: calc(var(--scale-base-40) * var(--size-ratio-sm));
  --scale-major-third-00: 1;
  --scale-major-third-01: 0.8;
  --scale-major-third-02: 0.7;
  --scale-major-third-03: 0.6;
  --scale-major-third-10: 1.25;
  --scale-major-third-20: 1.6;
  --scale-major-third-30: 2;
  --settings-brightness-day: var(--color-hue-violet);
  --settings-brightness-night: var(--color-hue-seagreen);
  --settings-contrast-high: var(--color-hue-violet);
  --settings-contrast-low: var(--color-hue-seagreen);
  --shadow-base-lg-blur: 8px;
  --shadow-base-lg-offset-x: 0;
  --shadow-base-lg-offset-y: 1px;
  --shadow-base-lg-spread: 0;
  --shadow-base-md-blur: 6px;
  --shadow-base-md-offset-x: 0;
  --shadow-base-md-offset-y: 1px;
  --shadow-base-md-spread: 0;
  --shadow-base-sm-blur: 4px;
  --shadow-base-sm-offset-x: 0;
  --shadow-base-sm-offset-y: 0.5px;
  --shadow-base-sm-spread: 0;
  --size-base-2xl: calc(var(--scale-base-20) * var(--size-ratio-sm));
  --size-base-2xs: calc(var(--scale-base-02) / var(--size-ratio-sm));
  --size-base-3xs: calc(var(--scale-base-03) / var(--size-ratio-sm));
  --size-base-lg: calc(var(--scale-base-00) * var(--size-ratio-sm));
  --size-base-md: 1rem;
  --size-base-sm: calc(var(--scale-base-00) / var(--size-ratio-xs));
  --size-base-xl: calc(var(--scale-base-10) * var(--size-ratio-sm));
  --size-base-xs: calc(var(--scale-base-01) / var(--size-ratio-sm));
  --size-inverse-2xl: calc(var(--scale-base-02) / var(--size-ratio-sm));
  --size-inverse-2xs: calc(var(--scale-base-20) * var(--size-ratio-sm));
  --size-inverse-lg: calc(var(--scale-base-00) / var(--size-ratio-xs));
  --size-inverse-md: 1rem;
  --size-inverse-sm: calc(var(--scale-base-00) * var(--size-ratio-sm));
  --size-inverse-xl: calc(var(--scale-base-01) / var(--size-ratio-sm));
  --size-inverse-xs: calc(var(--scale-base-10) * var(--size-ratio-sm));
  --size-nul: 0;
  --size-ratio-lg: 2.75;
  --size-ratio-md: 1.5;
  --size-ratio-sm: 1.25;
  --size-ratio-xs: 1.15;
  --ui-footer-height: var(--font-size-body);
  --ui-header-height: 3rem;
}

@media (color-gamut: p3) {
  :root {
    --color-gradient-000-middle: var(--color-magic-primary);
    --color-magic-primary: oklch(0.4339 0.2593 284.4081);
    --color-shadow-primary: oklch(0.4339 0.2593 284.4081);
  }
}
@media (color-gamut: rec2020) {
  :root {
    --color-gradient-000-middle: var(--color-magic-primary);
    --color-magic-primary: oklch(0.432 0.2798 283.8782);
    --color-shadow-primary: oklch(0.432 0.2798 283.8782);
  }
}
/* == Toggle  default == */
.switch[aria-pressed] {
  box-shadow: unset;
}

/* == Toggle  default == */
.expand[aria-expanded].variant\:fill:hover {
  background-color: var(--shade);
}

.expand[aria-expanded=true].variant\:fill {
  box-shadow: inset var(--shadow-inset-md);
  background-color: var(--shade);
}

.expand[aria-expanded=true].variant\:fill:hover {
  box-shadow: inset var(--shadow-inset-sm);
  background-color: var(--shade);
}

.expand[aria-expanded].variant\:outline:hover,
.expand[aria-expanded].variant\:bare:hover {
  background-color: var(--shade);
}

.expand[aria-expanded].variant\:bare:hover {
  --color-border: oklch(
  	var(--lightness-ui-base) var(--color-chroma-400) var(--hue)
  );
  background-color: var(--accent);
  border-color: var(--color-border, var(--ink));
  outline-color: var(--color-border, var(--ink));
}

.expand[aria-expanded].variant\:bare:focus,
.expand[aria-expanded].variant\:bare:focus-visible,
.expand[aria-expanded].variant\:bare:focus-within {
  outline-color: var(--color-border, var(--ink));
}

.expand[aria-expanded=true].variant\:outline,
.expand[aria-expanded=true].variant\:bare {
  box-shadow: inset var(--shadow-inset-md);
  background-color: var(--color-bg-active);
}

.expand[aria-expanded=true].variant\:outline:hover,
.expand[aria-expanded=true].variant\:bare:hover {
  box-shadow: inset var(--shadow-inset-sm);
  background-color: var(--shade);
}

fieldset {
  border: none;
  border-radius: var(--border-radius-base);
  max-inline-size: 100%;
  flex-grow: 1;
  padding: 0;
  margin: 0;
}

fieldset legend {
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-ui);
  line-height: var(--ui-size);
}

fieldset > p {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-ui);
}

fieldset > label,
fieldset > .feedback,
fieldset > .menu {
  inline-size: 100%;
  max-inline-size: 100%;
}

fieldset.radio,
fieldset.check {
  font-size: var(--font-size);
}

fieldset.radio input,
fieldset.check input {
  --accent: oklch(var(--lightness-accent) var(--chroma-accent) var(--hue));
  --color-accent: var(--accent-semantic, var(--accent));
  aspect-ratio: 1/1;
  flex-grow: 0;
  flex-basis: auto;
  block-size: calc(var(--ui-size-lg) + var(--outline-offset-lg));
  inline-size: auto;
  accent-color: var(--color-accent);
  padding: var(--outline-offset-lg);
}

fieldset.radio legend,
fieldset.check legend {
  inline-size: auto;
  margin-inline-start: 0;
  margin-block-end: var(--ui-size);
  padding-inline: var(--ui-size-sm);
}

fieldset.radio label > span,
fieldset.check label > span {
  flex-grow: 1;
  font-size: var(--font-size);
}

fieldset.radio label,
fieldset.check label {
  --hue: var(--hue-semantic, var(--color-theme-primary));
  --shade: oklch(var(--lightness) var(--chroma) var(--hue));
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  --color-bg: var(--shade);
  --color-ink: var(--ink);
  display: flex;
  align-items: var(--align, center);
  justify-content: var(--justify, space-between);
  padding: var(--outline-offset-lg);
  gap: var(--ui-size);
  margin: 0;
  inline-size: 100%;
  color: var(--color-ink);
  line-height: 1;
}

fieldset.radio input:checked,
fieldset.check input:checked {
  --lightness: var(--color-lightness-000);
  --lightness-accent: var(--color-lightness-200);
  --lightness-contrast: var(--color-lightness-400);
  --chroma: var(--color-chroma-000);
  --chroma-contrast: var(--color-chroma-400);
  --chroma-accent: var(--color-lightness-200);
  background-color: var(--shade);
}

fieldset.radio label:hover,
fieldset.check label:hover {
  --lightness: var(--color-lightness-000);
  --lightness-contrast: var(--color-lightness-400);
  --chroma: var(--color-chroma-000);
  --chroma-contrast: var(--color-chroma-400);
  background-color: var(--shade);
}

.ff\:magic,
ff-icon {
  color: var(--ink);
  display: inline-flex;
  flex-wrap: nowrap;
  block-size: fit-content;
  inline-size: fit-content;
  font-size: var(--font-size);
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-ui);
}

.ff\:magic.w\:full {
  inline-size: 100%;
}

.ff\:callout[class*=magic],
ff-callout[class*=magic] {
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  background-image: var(--magic-gradient);
  color: var(--ink);
}

.ff\:callout[class*=magic]:has(~ [class*=icon]),
ff-callout[class*=magic]:has(~ [class*=icon]) {
  margin-inline-end: var(--ui-size-sm);
}

.ff\:magic.mask\:text .ff\:callout[class*=magic],
.ff\:magic.mask\:text ff-callout[class*=magic] {
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  background-image: unset;
}

.ff\:magic.mask\:text .ff\:callout[class*=magic] a,
.ff\:magic.mask\:text .ff\:callout[class*=magic] p,
.ff\:magic.mask\:text .ff\:callout[class*=magic] svg,
.ff\:magic.mask\:text ff-callout[class*=magic] a,
.ff\:magic.mask\:text ff-callout[class*=magic] p,
.ff\:magic.mask\:text ff-callout[class*=magic] svg {
  background: var(--magic-gradient);
  background: var(--webkit-magic-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ff\:callout[class*=magic].shape\:round,
ff-callout[class*=magic].shape\:round {
  border-radius: 100vmax;
  justify-content: center;
  inline-size: 100%;
}

.magic\:bleu {
  --magic-gradient: linear-gradient(
  	148deg,
  	var(--color-gradient-000-start) 12% 12%,
  	var(--color-gradient-000-middle) 49% 49%,
  	var(--color-gradient-000-end) 88% 88%
  );
  --webkit-magic-gradient: -webkit-linear-gradient(
  	148deg,
  	var(--color-gradient-000-start) 12% 12%,
  	var(--color-gradient-000-middle) 49% 49%,
  	var(--color-gradient-000-end) 88% 88%
  );
  --lightness-contrast: var(--color-lightness-000);
  --chroma-contrast: var(--color-chroma-000);
}

.magic\:bleu[class*=svg] {
  --magic-gradient: linear-gradient(
  	148deg,
  	var(--color-gradient-000-start) 22% 22%,
  	var(--color-gradient-000-middle) 49% 49%,
  	var(--color-gradient-000-end) 88% 88%
  );
}

.magic\:sea {
  --magic-gradient: linear-gradient(
  	148deg,
  	var(--color-gradient-000-end) 22% 22%,
  	var(--color-gradient-001-middle) 70% 70%,
  	var(--color-gradient-000-middle) 88% 88%
  );
  --webkit-magic-gradient: -webkit-linear-gradient(
  	148deg,
  	var(--color-gradient-000-end) 22% 22%,
  	var(--color-gradient-001-middle) 70% 70%,
  	var(--color-gradient-000-middle) 88% 88%
  );
  --lightness-contrast: var(--color-lightness-600);
  --chroma-contrast: var(--color-chroma-600);
}

.magic\:sea[class*=svg] {
  --magic-gradient: linear-gradient(
  	148deg,
  	var(--color-gradient-000-end) 22% 22%,
  	var(--color-gradient-001-middle) 49% 49%,
  	var(--color-gradient-000-middle) 88% 88%
  );
}

.magic\:dante {
  --magic-gradient: linear-gradient(
  	148deg,
  	var(--color-gradient-001-start) 12% 12%,
  	var(--color-gradient-001-middle) 49% 49%,
  	var(--color-gradient-001-end) 88% 88%
  );
  --webkit-magic-gradient: -webkit-linear-gradient(
  	148deg,
  	var(--color-gradient-001-start) 12% 12%,
  	var(--color-gradient-001-middle) 49% 49%,
  	var(--color-gradient-001-end) 88% 88%
  );
  --lightness-contrast: var(--color-lightness-600);
  --chroma-contrast: var(--color-chroma-600);
}

.magic\:dante.purgatorio {
  --magic-gradient: radial-gradient(
  	farthest-corner at 50% 95%,
  	/* var(--color-gradient-000-start) 40% 40%, */
  		var(--color-gradient-001-end) 40% 40%,
  	var(--color-gradient-001-middle) 70% 70%,
  	var(--color-gradient-001-start) 88% 88%
  );
  --lightness-contrast: var(--color-lightness-000);
  --chroma-contrast: var(--color-chroma-000);
  font-weight: var(--font-weight-semibold);
}

.magic\:dante.inferno {
  --magic-gradient: repeating-radial-gradient(
  	farthest-corner at 50% 50%,
  	var(--color-gradient-001-start) 20%,
  	var(--color-gradient-001-end) 30%,
  	var(--color-gradient-001-middle) 45%,
  	var(--color-gradient-001-end) 60%,
  	var(--color-gradient-001-start) 80%
  );
  font-weight: var(--font-weight-semibold);
}

.magic\:dawn {
  --magic-gradient: linear-gradient(
  	148deg,
  	color(display-p3 0.92 0.64 0.77) 12% 12%,
  	color(display-p3 0.71 0.65 0.96) 49% 49%,
  	color(display-p3 0.63 0.82 0.83) 88% 88%
  );
  --webkit-magic-gradient: -webkit-linear-gradient(
  	148deg,
  	color(display-p3 0.92 0.64 0.77) 12% 12%,
  	color(display-p3 0.71 0.65 0.96) 49% 49%,
  	color(display-p3 0.63 0.82 0.83) 88% 88%
  );
  --lightness-contrast: var(--color-lightness-600);
  --chroma-contrast: var(--color-chroma-600);
  --hue: var(--color-theme-primary);
}

.magic\:dawn[class*=svg] {
  --magic-gradient: linear-gradient(
  	148deg,
  	color(display-p3 0.92 0.64 0.77) 22% 22%,
  	color(display-p3 0.71 0.65 0.96) 49% 49%,
  	color(display-p3 0.63 0.82 0.83) 88% 88%
  );
}

.magic\:dusk {
  --magic-gradient: linear-gradient(
  	148deg,
  	color(display-p3 0.75 0.16 0.41) 12% 12%,
  	color(display-p3 0.21 0.14 0.51) 49% 49%,
  	color(display-p3 0.24 0.54 0.55) 88% 88%
  );
  --webkit-magic-gradient: -webkit-linear-gradient(
  	148deg,
  	color(display-p3 0.75 0.16 0.41) 12% 12%,
  	color(display-p3 0.21 0.14 0.51) 49% 49%,
  	color(display-p3 0.24 0.54 0.55) 88% 88%
  );
  --lightness-contrast: var(--color-lightness-000);
  --chroma-contrast: var(--color-chroma-000);
  --hue: var(--color-theme-primary);
}

.magic\:dusk[class*=svg] {
  --magic-gradient: linear-gradient(
  	148deg,
  	color(display-p3 0.75 0.16 0.41) 22% 22%,
  	color(display-p3 0.21 0.14 0.51) 49% 49%,
  	color(display-p3 0.24 0.54 0.55) 88% 88%
  );
}

.magic\:fuzzy {
  --magic-gradient: radial-gradient(
  	closest-side,
  	var(--color-magic-primary) 50%,
  	var(--color-magic-highlight),
  	var(--color-magic-warning)
  );
  /* Used for text masking: only use linear gradients */
  --webkit-magic-gradient: -webkit-linear-gradient(
  	148deg,
  	var(--color-magic-primary),
  	var(--color-magic-highlight),
  	var(--color-magic-warning)
  );
  --lightness-contrast: var(--color-lightness-000);
  --chroma-contrast: var(--color-chroma-000);
  --hue: var(--color-theme-primary);
}

.magic\:fuzzy[class*=svg] {
  --magic-gradient: radial-gradient(
  	closest-side,
  	var(--color-magic-highlight) 50%,
  	var(--color-magic-primary),
  	var(--color-magic-warning)
  );
}

.magic\:feather {
  --hue-magic-feather: var(--color-theme-primary);
  --color-magic-feather: oklch(
  	var(--lightness-contrast-magic-feather) var(--chroma-contrast-magic-feather)
  		var(--hue-magic-feather)
  );
  --magic-gradient: linear-gradient(
  	to top,
  	transparent 0% 9%,
  	var(--color-magic-feather) 50% 100%
  );
  /* Used for text masking: only use linear gradients */
  --webkit-magic-gradient: linear-gradient(
  	to top,
  	transparent 0% 9%,
  	var(--color-magic-feather) 50% 100%
  );
}

.magic\:feather[class*=svg] {
  --magic-gradient: linear-gradient(
  	to top,
  	transparent 0% 9%,
  	var(--color-magic-feather) 50% 100%
  );
}

@media (prefers-color-scheme: dark) {
  .magic\:feather {
    --lightness-contrast-magic-feather: var(--color-lightness-dark-base);
    --chroma-contrast-magic-feather: var(--color-chroma-100);
  }
}
[class*="settings:night"] .magic\:feather,
[color-scheme=dark] .magic\:feather {
  --lightness-contrast-magic-feather: var(--color-lightness-dark-base);
  --chroma-contrast-magic-feather: var(--color-chroma-100);
}

@media (prefers-color-scheme: light) {
  .magic\:feather {
    --lightness-contrast-magic-feather: var(--color-lightness-light-base);
    --chroma-contrast-magic-feather: var(--color-chroma-100);
  }
}
[class*="settings:day"] .magic\:feather,
[color-scheme=light] .magic\:feather {
  --lightness-contrast-magic-feather: var(--color-lightness-light-base);
  --chroma-contrast-magic-feather: var(--color-chroma-100);
}

pre {
  --hue: var(--color-theme-primary);
  --lightness: var(--color-lightness-dark-base);
  --lightness-contrast: var(--color-lightness-light-base);
  --chroma: var(--color-chroma-600);
  --chroma-contrast: var(--color-chroma-000);
  --shade: oklch(var(--lightness) var(--chroma) var(--hue));
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  --accent: oklch(var(--lightness-accent) var(--chroma-accent-base) var(--hue));
  --color-bg: var(--shade);
  --color-ink: var(--ink);
  --color-accent: var(--accent);
  --ui-size: var(--font-size);
  color: var(--color-ink);
  font-size: var(--font-size);
  background-color: var(--color-bg);
  padding-inline: var(--ui-size-lg);
  padding-block: var(--ui-size-lg);
  border: var(--border-width-xl) solid var(--color-accent);
  inline-size: auto;
  max-inline-size: calc(100vw - 2 * var(--grid-gap, var(--gap)) - 2 * var(--border-width-lg));
  overflow: auto;
  margin-inline-start: var(--ui-size);
}

kbd {
  padding-block: calc(var(--ui-size-sm) / 2.5) calc(var(--ui-size-sm) / 2);
  padding-inline: var(--ui-size);
  margin-inline: calc(var(--ui-size) / 2);
  border: var(--border-width-md) solid var(--color-accent);
  border-radius: var(--border-radius-base);
}

code:not([class^=language-]) {
  border: none;
  padding-block: calc(var(--ui-size-sm) / 2.5) calc(var(--ui-size-sm) / 2);
  padding-inline: 0;
  background-color: var(--color-bg);
}

pre[class*="feedback:"] {
  --ink-semantic: oklch(
  	var(--color-lightness-200) var(--color-chroma-200) var(--hue-semantic)
  );
  --color-accent: var(--accent-semantic, var(--accent));
  --color-bg: var(--shade);
  --color-ink: var(--ink-semantic, var(--ink));
  color: var(--color-ink);
  background-color: var(--color-bg);
  border: var(--border-width-xl) solid var(--color-accent);
  max-inline-size: 100%;
}

pre[class*="feedback:"]::before {
  margin-inline-end: var(--ui-size);
}

pre[class*="feedback:"].variant\:fill {
  box-shadow: var(--shadow-md);
  color: var(--color-ink);
  border-color: var(--color-accent);
  background-color: var(--color-bg);
}

pre[class*="feedback:"].variant\:fill,
pre[class*="feedback:"].variant\:outline,
pre[class*="feedback:"].variant\:bare {
  color: var(--color-ink);
  background-color: var(--color-bg);
}

pre[class*="feedback:"].variant\:fill {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}

pre[class*="feedback:"].variant\:outline {
  box-shadow: unset;
  border-color: var(--color-accent);
}

pre[class*="feedback:"].variant\:bare {
  background-color: var(--color-bg);
  box-shadow: unset;
}

table {
  inline-size: 100%;
  max-inline-size: var(var(--text-inline-size, var(--max-inline-size)), 100%);
  border-collapse: collapse;
  font-family: var(--font-family-ui);
  line-height: var(--font-leading-ui);
}

*:has(table) {
  max-inline-size: var(var(--text-inline-size, var(--max-inline-size)), 100%);
  overflow: auto;
}

th {
  --lightness: var(--color-lightness-200);
  padding: var(--ui-size) var(--ui-size-lg);
  background-color: var(--shade);
  text-align: start;
}

td {
  padding: calc(var(--ui-size) / var(--size-ratio-md)) calc(var(--ui-size-lg) / var(--size-ratio-md));
  border: 1px solid var(--accent);
  color: var(--ink);
}

tr:hover td {
  --lightness: var(--lightness-base);
  --lightness-contrast: var(--lightness-contrast-base);
  --chroma: var(--chroma-base);
  --chroma-contrast: var(--chroma-contrast-base);
  color: var(--ink);
  background-color: var(--shade);
}

.toast {
  position: relative;
  inline-size: var(--layout-sidebar-lg);
  animation: fade-in 400ms ease, fade-out 300ms ease var(--animation-duration-lg) forwards;
}

.toaster {
  position: fixed;
  inline-size: var(--layout-sidebar-lg);
  inset-block-end: var(--grid-gap, var(--ui-size));
  inset-inline-end: var(--grid-gap, var(--ui-size));
  z-index: 4;
  block-size: fit-content;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
.tags {
  list-style: none;
  margin-block: var(--ui-size);
  padding-inline: var(--ui-size);
  justify-content: var(--justify, stretch);
}

.tags li {
  color: var(--ink);
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-ui);
  max-inline-size: 60%;
}

.tags li.shape\:pill {
  text-align: center;
  margin: 0 auto;
}

/*   Closed state of the dialog   */
.zoomer {
  transform: translateY(-150%);
  block-size: fit-content;
  inline-size: fit-content;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, block-size 0.3s ease-out, overlay 0.5s ease-out allow-discrete, display 0.5s ease-out allow-discrete;
}

/*   Open state of the dialog  */
.zoomer[open] {
  top: 0;
  overflow: auto;
  transform: translateY(0);
  transform: scaleY(1);
  inline-size: 100%;
  block-size: 100%;
  overflow: auto;
}

@media screen and (max-width: 600px) {
  /* Hide zoom button when there is no roo mto zoom  */
  .l\:side:has(.button-zoom) {
    display: none;
    flex-basis: 0;
    flex-grow: 0;
  }
  .l\:side:has(.button-zoom) > * {
    display: none;
  }
}
/*   Closed state of the dialog   */
dialog {
  --max-dialog-block: 100%;
  --max-dialog-inline: 100%;
  border: none;
  opacity: 0;
  block-size: fit-content;
  inline-size: fit-content;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, block-size 0.3s ease-out, overlay 0.5s ease-out allow-discrete, display 0.5s ease-out allow-discrete;
}

dialog > ff-dialog {
  display: none;
}

/*   Open state of the dialog  */
dialog[open] {
  --dialog-padding: var(--gap, var(--ui-size));
  opacity: 1;
  top: 0;
  z-index: var(--layout-z-index-overlay);
  overflow: auto;
  padding-block: var(--dialog-padding);
  padding-inline: var(--dialog-padding);
  inline-size: var(--max-dialog-block);
  block-size: var(--max-dialog-inline);
  overflow: auto;
}

dialog[open] > form {
  position: relative;
  top: var(--dialog-padding);
}

dialog[open] > ff-dialog {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* Transition the :backdrop when the dialog modal is promoted to the top layer */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  dialog {
    transition: none;
  }
}
details {
  padding: var(--outline-offset-md);
}

p + details {
  margin-block-start: var(--ui-size-lg);
}

details > summary {
  cursor: pointer;
  display: block;
  color: var(--color-ui-ink, var(--ink));
  background-color: var(--color-bg, var(--shade));
  border: var(--border-width-md) solid var(--color-border, transparent);
  border-radius: var(--border-radius-base);
  font-weight: var(--font-weight-ui);
  line-height: var(--font-leading-large);
  padding: var(--ui-size-sm) var(--ui-size);
  background-color: var(--shade);
}

details > summary::before {
  margin-inline-end: var(--ui-size-lg);
}

details > summary::before {
  content: "👉";
}

/* Chrome etc */
details > summary::marker,
details > summary::-webkit-details-marker {
  color: transparent;
  inline-size: 0;
  block-size: 0;
  margin: 0;
  padding: 0;
}

details[open] > summary::before {
  content: "👇";
}

details > summary:hover {
  --lightness: var(--color-lightness-400);
  --lightness-contrast: var(--color-lightness-000);
  box-shadow: var(--shadow-md);
}

details > summary.variant\:outline {
  --lightness: var(--color-lightness-600);
  --lightness-accent: var(--lightness-ui-base);
  --lightness-contrast: var(--lightness-accent-base);
  background-color: inherit;
  border-color: var(--accent);
}

details > summary.variant\:bare {
  --lightness: var(--color-lightness-100);
  --lightness-accent: var(--lightness-base);
  --lightness-contrast: var(--lightness-contrast-base);
  background-color: inherit;
  border: var(--border-width-md) solid var(--accent);
}

details > summary.variant\:outline:hover {
  --lightness: var(--lightness-base);
  --contrast: var(--contrast-base);
  --lightness-contrast: var(--contrast-base);
  --chroma-contrast: var(--chroma-contrast-base);
  background-color: var(--shade);
}

details > summary.variant\:bare:hover {
  --lightness: var(--lightness-base);
  --contrast: var(--contrast-base);
  --lightness-contrast: var(--lightness-contrast-base);
  --chroma-contrast: var(--chroma-contrast-base);
  background-color: var(--shade);
}

details > summary.variant\:outline:active {
  --lightness: var(--color-lightness-200);
  --lightness-contrast: var(--color-lightness-600);
  background-color: var(--shade);
}

details > summary.variant\:bare:active {
  --lightness: var(--color-lightness-100);
  --lightness-contrast: var(--color-lightness-600);
  background-color: var(--shade);
}

details > summary:not([class*=":neutral"]).variant\:outline {
  --chroma: var(--color-chroma-600);
  --chroma-contrast: var(--color-chroma-300);
}

details > summary:not([class*=":neutral"]).variant\:bare {
  --chroma: var(--color-chroma-100);
  --chroma-contrast: var(--color-chroma-400);
}

details > summary:not([class*=":neutral"]).variant\:outline:hover {
  --chroma: var(--color-chroma-100);
  --chroma-contrast: var(--color-chroma-400);
}

details > summary:not([class*=":neutral"]).variant\:bare:hover {
  --chroma: var(--color-chroma-000);
  --chroma-contrast: var(--color-chroma-400);
}

details > summary:not([class*=":neutral"]).variant\:outline:active {
  --chroma: var(--color-chroma-200);
  --chroma-contrast: var(--color-chroma-500);
}

details > summary:not([class*=":neutral"]).variant\:bare:active {
  --chroma: var(--color-chroma-100);
  --chroma-contrast: var(--color-chroma-500);
}

/* Set current color SHADE according to current combination of:
 - lightness
 - chroma
 - hue
*/
[class*="status:"]:where(.status\:default,
.status\:info,
.status\:success,
.status\:warning,
.status\:danger,
.status\:error) {
  --shade-semantic: oklch(
  	var(--lightness-base) var(--chroma) var(--hue-semantic)
  );
  --ink-semantic: oklch(
  	var(--lightness-contrast-base) var(--chroma-contrast) var(--hue-semantic)
  );
  --accent-semantic: oklch(
  	var(--lightness-accent) var(--chroma-accent-base) var(--hue-semantic)
  );
  --shadow-semantic: oklch(
  	var(--lightness-base) var(--chroma) var(--hue-semantic)
  );
}

[class*="bg:"][class*="status:"] {
  --color-bg: var(--shade-semantic, --shade);
  --color-ink: var(--ink-semantic, --ink);
  --color-accent: var(--accent-semantic, --accent);
  --color-shadow: var(--shadow-semantic, --shadow);
  color: var(--color-ink);
  background-color: var(--color-bg);
  border-color: var(--color-accent);
}

[class*=":default"] {
  --hue-semantic: var(--color-theme-primary);
}

[class*=":info"] {
  --hue-semantic: var(--color-semantic-info);
}

[class*=":success"] {
  --hue-semantic: var(--color-semantic-success);
}

[class*=":warning"] {
  --hue-semantic: var(--color-semantic-warning);
}

[class*=":danger"],
[class*=":error"] {
  --hue-semantic: var(--color-semantic-danger);
}

[class*="status:default"] {
  --hue: var(--color-theme-primary);
  --shadow: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
  --accent: oklch(var(--lightness-accent) var(--chroma-accent-base) var(--hue));
  --shadow-sm: var(--shadow-base-sm-offset-x) var(--shadow-base-sm-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-md: var(--shadow-base-md-offset-x) var(--shadow-base-md-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-lg: var(--shadow-base-lg-offset-x) var(--shadow-base-lg-offset-y)
  	var(--shadow-base-md-blur) var(--shadow-base-md-spread) var(--shadow);
  --shadow-inset-sm: var(--shadow-sm);
  --shadow-inset-md: var(--shadow-md);
}

[class*=":info"] {
  --hue: var(--color-semantic-info);
  --shadow: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
  --accent: oklch(var(--lightness-accent) var(--chroma-accent-base) var(--hue));
  --shadow-sm: var(--shadow-base-sm-offset-x) var(--shadow-base-sm-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-md: var(--shadow-base-md-offset-x) var(--shadow-base-md-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-lg: var(--shadow-base-lg-offset-x) var(--shadow-base-lg-offset-y)
  	var(--shadow-base-md-blur) var(--shadow-base-md-spread) var(--shadow);
  --shadow-inset-sm: var(--shadow-sm);
  --shadow-inset-md: var(--shadow-md);
}

[class*=":success"] {
  --hue: var(--color-semantic-success);
  --shadow: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
  --accent: oklch(var(--lightness-accent) var(--chroma-accent-base) var(--hue));
  --shadow-sm: var(--shadow-base-sm-offset-x) var(--shadow-base-sm-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-md: var(--shadow-base-md-offset-x) var(--shadow-base-md-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-lg: var(--shadow-base-lg-offset-x) var(--shadow-base-lg-offset-y)
  	var(--shadow-base-md-blur) var(--shadow-base-md-spread) var(--shadow);
  --shadow-inset-sm: var(--shadow-sm);
  --shadow-inset-md: var(--shadow-md);
}

[class*=":warning"] {
  --hue: var(--color-semantic-warning);
  --shadow: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
  --accent: oklch(var(--lightness-accent) var(--chroma-accent-base) var(--hue));
  --shadow-sm: var(--shadow-base-sm-offset-x) var(--shadow-base-sm-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-md: var(--shadow-base-md-offset-x) var(--shadow-base-md-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-lg: var(--shadow-base-lg-offset-x) var(--shadow-base-lg-offset-y)
  	var(--shadow-base-md-blur) var(--shadow-base-md-spread) var(--shadow);
  --shadow-inset-sm: var(--shadow-sm);
  --shadow-inset-md: var(--shadow-md);
}

[class*=":danger"] {
  --hue: var(--color-semantic-danger);
  --shadow: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
  --accent: oklch(var(--lightness-accent) var(--chroma-accent-base) var(--hue));
  --shadow-sm: var(--shadow-base-sm-offset-x) var(--shadow-base-sm-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-md: var(--shadow-base-md-offset-x) var(--shadow-base-md-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-lg: var(--shadow-base-lg-offset-x) var(--shadow-base-lg-offset-y)
  	var(--shadow-base-md-blur) var(--shadow-base-md-spread) var(--shadow);
  --shadow-inset-sm: var(--shadow-sm);
  --shadow-inset-md: var(--shadow-md);
}

[class*="feedback:"][class*="status:"]:where(.feedback\:form,
.feedback\:prose) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-size-sm);
}

p + [class*="feedback:"] {
  margin-block-start: var(--ui-size-sm);
}

:where(label, input) + [class*="feedback:"] {
  --gap: var(--ui-size-sm);
}

[class*="feedback:"]:not(.feedback\:code) {
  --color-accent: var(--accent-semantic, var(--accent));
  --color-bg: var(--shade-semantic, var(--shade));
  --color-ink: var(--ink-semantic, var(--ink));
  --icon-size: var(--font-size-minus);
  color: var(--color-ink);
  font-size: var(--font-size);
  padding: var(--ui-size-sm);
  border: var(--border-width-xl) solid var(--color-accent);
  background-color: var(--color-bg);
}

[class*="feedback:"]:not(.feedback\:code) .status {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-minus);
  font-weight: var(--font-weight-ui);
}

[class*="feedback:"]:not(.feedback\:code) .message {
  max-inline-size: 100%;
  block-size: fit-content;
  margin-inline-start: 0;
  font-size: var(--font-size);
}

[class*="feedback:"]:not(.feedback\:code) p {
  text-wrap: wrap;
  text-wrap: pretty;
  max-inline-size: 100%;
}

[class*="feedback:"]:not(.feedback\:code).variant\:fill {
  border: var(--border-width-xl) solid var(--color-accent);
}

[class*="feedback:"]:not(.feedback\:code).variant\:outline {
  background-color: var(--color-bg);
}

[class*="feedback:"]:not(.feedback\:code).variant\:bare {
  background-color: var(--color-bg);
  border-color: var(--color-bg);
}

[class*="bg:"] {
  --shade: oklch(var(--lightness) var(--chroma) var(--hue));
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  --accent: oklch(var(--lightness-accent) var(--chroma-accent) var(--hue));
  --shadow: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  color: var(--ink);
  background-color: var(--shade);
  accent-color: var(--accent);
}

.bg\:inherit {
  color: inherit;
  accent-color: inherit;
  background-color: inherit;
}

.bg\:blur {
  --shade: transparent;
  backdrop-filter: blur(var(--size-base-md));
}

/* Set current color LIGHTNESS and CHROMA according to a 7 point scale */
[class*="bg:"][class*=":light"],
[class*="bg:"][class*=":dark"] [class*="bg:"][class*=":light"] {
  --lightness: var(--color-lightness-light-base);
  --lightness-accent: var(--color-lightness-300);
  --lightness-contrast: var(--color-lightness-dark-base);
  --chroma: var(--color-chroma-neutral);
  --chroma-accent: var(--color-chroma-300);
  --chroma-contrast: var(--color-chroma-neutral);
}

[class*="bg:"][class*=":dark"],
[class*="bg:"][class*=":light"] [class*="bg:"][class*=":dark"] {
  --lightness: var(--color-lightness-dark-base);
  --lightness-accent: var(--color-lightness-300);
  --lightness-contrast: var(--color-lightness-light-base);
  --chroma: var(--color-chroma-neutral);
  --chroma-accent: var(--color-chroma-300);
  --chroma-contrast: var(--color-chroma-neutral);
}

[class*="bg:"][class*=":000"] {
  --lightness: var(--color-lightness-000);
  --lightness-accent: var(--color-lightness-200);
  --lightness-contrast: var(--color-lightness-400);
}

[class*="bg:"][class*=":100"] {
  --lightness: var(--color-lightness-100);
  --lightness-accent: var(--color-lightness-200);
  --lightness-contrast: var(--color-lightness-500);
}

[class*="bg:"][class*=":200"] {
  --lightness: var(--color-lightness-100);
  --lightness-accent: var(--color-lightness-400);
  --lightness-contrast: var(--color-lightness-600);
}

[class*="bg:"][class*=":300"] {
  --lightness: var(--color-lightness-300);
  --lightness-accent: var(--color-lightness-100);
  --lightness-contrast: var(--color-lightness-000);
}

[class*="bg:"][class*=":400"] {
  --lightness: var(--color-lightness-400);
  --lightness-accent: var(--color-lightness-200);
  --lightness-contrast: var(--color-lightness-000);
}

[class*="bg:"][class*=":500"] {
  --lightness: var(--color-lightness-500);
  --lightness-accent: var(--color-lightness-200);
  --lightness-contrast: var(--color-lightness-100);
}

[class*="bg:"][class*=":600"] {
  --lightness: var(--color-lightness-600);
  --lightness-accent: var(--color-lightness-400);
  --lightness-contrast: var(--color-lightness-100);
}

[class*="bg:"][class*=":000"]:not([class*=":neutral"]) {
  --chroma: var(--color-chroma-000);
  --chroma-accent: var(--color-chroma-200);
  --chroma-contrast: var(--color-chroma-400);
}

[class*="bg:"][class*=":100"]:not([class*=":neutral"]) {
  --chroma: var(--color-chroma-100);
  --chroma-accent: var(--color-chroma-200);
  --chroma-contrast: var(--color-chroma-500);
}

[class*="bg:"][class*=":200"]:not([class*=":neutral"]) {
  --chroma: var(--color-chroma-200);
  --chroma-accent: var(--color-chroma-400);
  --chroma-contrast: var(--color-chroma-600);
}

[class*="bg:"][class*=":300"]:not([class*=":neutral"]) {
  --chroma: var(--color-chroma-300);
  --chroma-accent: var(--color-chroma-100);
  --chroma-contrast: var(--color-chroma-000);
}

[class*="bg:"][class*=":400"]:not([class*=":neutral"]) {
  --chroma: var(--color-chroma-400);
  --chroma-accent: var(--color-chroma-200);
  --chroma-contrast: var(--color-chroma-000);
}

[class*="bg:"][class*=":500"]:not([class*=":neutral"]) {
  --chroma: var(--color-chroma-500);
  --chroma-accent: var(--color-chroma-200);
  --chroma-contrast: var(--color-chroma-100);
}

[class*="bg:"][class*=":600"]:not([class*=":neutral"]) {
  --chroma: var(--color-chroma-600);
  --chroma-accent: var(--color-chroma-400);
  --chroma-contrast: var(--color-chroma-200);
}

[class*="surface:0"] {
  --lightness: var(--lightness-base);
  --lightness-contrast: var(--lightness-contrast-base);
  --chroma: var(--chroma-surface-base);
  --chroma-contrast: var(--chroma-surface-base);
}

[class*="surface:1"] {
  --lightness: var(--lightness-surface-1);
  --lightness-contrast: var(--lightness-surface-1-contrast);
  --chroma: var(--chroma-surface-1);
  --chroma-contrast: var(--chroma-surface-1-contrast);
}

[class*="surface:2"] {
  --lightness: var(--lightness-surface-2);
  --lightness-contrast: var(--lightness-surface-2-contrast);
  --chroma: var(--chroma-surface-2);
  --chroma-contrast: var(--chroma-surface-2-contrast);
}

[class*="surface:3"] {
  --lightness: var(--lightness-surface-3);
  --lightness-contrast: var(--lightness-surface-3-contrast);
  --chroma: var(--chroma-surface-3);
  --chroma-contrast: var(--chroma-surface-3-contrast);
}

[class*="surface:4"] {
  --lightness: var(--lightness-surface-4);
  --lightness-contrast: var(--lightness-surface-4-contrast);
  --chroma: var(--chroma-surface-4);
  --chroma-contrast: var(--chroma-surface-4-contrast);
}

[class*="surface:5"] {
  --lightness: var(--lightness-surface-5);
  --lightness-contrast: var(--lightness-surface-5-contrast);
  --chroma: var(--chroma-surface-5);
  --chroma-contrast: var(--chroma-surface-5-contrast);
}

[class*="surface:"] {
  --shade: oklch(var(--lightness) var(--chroma) var(--hue));
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  color: var(--ink);
  background-color: var(--shade);
}

rf-popover,
.anchor {
  display: block;
  inline-size: max-content;
  block-size: max-content;
}

.anchor {
  position: relative;
}

/* Use this selector to show / hide the popover, not to style the contents */
[popover] {
  border: 0;
  block-size: 0;
  inline-size: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* The [popover] element, in its open state */
:popover-open {
  position: fixed;
  display: block;
  inset: unset;
  inline-size: fit-content;
  block-size: fit-content;
  overflow: auto;
  border-radius: var(--border-radius-md);
  pointer-events: auto;
}

@supports (anchor-name: -anchor-name) {
  .anchor[data-anchorid] {
    --anchor-name: --popover-anchor;
    anchor-name: attr(data-anchorid);
  }
  [popover] {
    position-anchor: var(--anchor-name);
  }
  [class*="place:"][class*=bottom]:popover-open {
    top: anchor(bottom);
  }
  [class*="place:"][class*=top]:popover-open {
    bottom: anchor(top);
  }
  [class*="place:"][class*=left]:popover-open {
    right: anchor(left);
  }
  [class*="place:"][class*=right]:popover-open {
    left: anchor(right);
  }
  [class*="place:"][class*=-center]:popover-open {
    right: anchor(center);
  }
  [class*="place:"][class*=center-]:popover-open {
    top: anchor(center);
  }
}
@media (prefers-color-scheme: light) {
  html {
    color-scheme: light;
    --hue: var(--color-theme-primary);
    --lightness-base: var(--color-lightness-light-base);
    --lightness-accent-base: var(--color-lightness-400);
    --lightness-contrast-base: var(--color-lightness-600);
    --chroma-base: var(--color-chroma-neutral);
    --chroma-contrast-base: var(--color-chroma-600);
    --lightness: var(--color-lightness-light-base);
    --lightness-accent: var(--color-lightness-300);
    --lightness-contrast: var(--color-lightness-600);
    --lightness-focus: var(--color-lightness-400);
    --lightness-contrast-focus: var(--color-lightness-000);
    --lightness-ui-base: var(--color-lightness-300);
    --lightness-ui-base-pressed-hover: var(--color-lightness-400);
    --lightness-ui-contrast-base: var(--color-lightness-light-base);
    --lightness-ui-hover-base: var(--color-lightness-400);
    --lightness-ui-hover-contrast-base: var(--color-lightness-light-base);
    --lightness-surface-1: var(--color-lightness-000);
    --lightness-surface-1-contrast: var(--color-lightness-400);
    --lightness-surface-2: var(--color-lightness-100);
    --lightness-surface-2-contrast: var(--color-lightness-500);
    --lightness-surface-3: var(--color-lightness-200);
    --lightness-surface-3-contrast: var(--color-lightness-600);
    --lightness-surface-4: var(--color-lightness-400);
    --lightness-surface-4-contrast: var(--color-lightness-100);
    --lightness-surface-5: var(--color-lightness-500);
    --lightness-surface-5-contrast: var(--color-lightness-000);
    --chroma: var(--color-chroma-neutral);
    --chroma-accent-base: var(--color-chroma-300);
    --chroma-ink: var(--color-chroma-600);
    --chroma-contrast: var(--color-chroma-600);
    --chroma-focus: var(--color-chroma-400);
    --chroma-contrast-focus: var(--color-chroma-000);
    --chroma-surface-1: var(--color-chroma-000);
    --chroma-surface-1-contrast: var(--color-chroma-400);
    --chroma-surface-2: var(--color-chroma-100);
    --chroma-surface-2-contrast: var(--color-chroma-500);
    --chroma-surface-3: var(--color-chroma-200);
    --chroma-surface-3-contrast: var(--color-chroma-600);
    --chroma-surface-4: var(--color-chroma-400);
    --chroma-surface-4-contrast: var(--color-chroma-100);
    --chroma-surface-5: var(--color-chroma-400);
    --chroma-surface-5-contrast: var(--color-chroma-100);
    --shade: oklch(var(--lightness-base) var(--chroma) var(--hue));
    --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
    --accent: oklch(var(--lightness-accent) var(--chroma-accent) var(--hue));
    --shadow: oklch(
    	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
    );
  }
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --hue: var(--color-theme-primary);
    --lightness-base: var(--color-lightness-dark-base);
    --lightness-accent-base: var(--color-lightness-200);
    --lightness-contrast-base: var(--color-lightness-000);
    --chroma-base: var(--color-chroma-neutral);
    --chroma-contrast-base: var(--color-chroma-100);
    --lightness: var(--color-lightness-dark-base);
    --lightness-accent: var(--color-lightness-400);
    --lightness-contrast: var(--color-lightness-000);
    --lightness-focus: var(--color-lightness-500);
    --lightness-contrast-focus: var(--color-lightness-100);
    --lightness-ui-base: var(--color-lightness-400);
    --lightness-ui-base-pressed-hover: var(--color-lightness-300);
    --lightness-ui-contrast-base: var(--color-lightness-light-base);
    --lightness-ui-hover-base: var(--color-lightness-300);
    --lightness-ui-hover-contrast-base: var(--color-lightness-light-base);
    --lightness-surface-1: var(--color-lightness-600);
    --lightness-surface-1-contrast: var(--color-lightness-200);
    --lightness-surface-2: var(--color-lightness-500);
    --lightness-surface-2-contrast: var(--color-lightness-100);
    --lightness-surface-3: var(--color-lightness-400);
    --lightness-surface-3-contrast: var(--color-lightness-000);
    --lightness-surface-4: var(--color-lightness-300);
    --lightness-surface-4-contrast: var(--color-lightness-000);
    --lightness-surface-5: var(--color-lightness-200);
    --lightness-surface-5-contrast: var(--color-lightness-600);
    --chroma: var(--color-chroma-neutral);
    --chroma-accent-base: var(--color-chroma-400);
    --chroma-ink: var(--color-chroma-000);
    --chroma-contrast: var(--color-chroma-000);
    --chroma-focus: var(--color-chroma-500);
    --chroma-contrast-focus: var(--color-chroma-100);
    --chroma-surface-1: var(--color-chroma-600);
    --chroma-surface-1-contrast: var(--color-chroma-200);
    --chroma-surface-2: var(--color-chroma-500);
    --chroma-surface-2-contrast: var(--color-chroma-100);
    --chroma-surface-3: var(--color-chroma-400);
    --chroma-surface-3-contrast: var(--color-chroma-000);
    --chroma-surface-4: var(--color-chroma-300);
    --chroma-surface-4-contrast: var(--color-chroma-000);
    --chroma-surface-5: var(--color-chroma-200);
    --chroma-surface-5-contrast: var(--color-chroma-600);
    --shade: oklch(var(--lightness-base) var(--chroma) var(--hue));
    --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
    --accent: oklch(var(--lightness-accent) var(--chroma-accent) var(--hue));
    --shadow: oklch(
    	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
    );
  }
}
[class*="settings:day"],
[color-scheme=light] {
  color-scheme: light;
  --hue: var(--color-theme-primary);
  --lightness-base: var(--color-lightness-light-base);
  --lightness-accent-base: var(--color-lightness-400);
  --lightness-contrast-base: var(--color-lightness-600);
  --chroma-base: var(--color-chroma-neutral);
  --chroma-contrast-base: var(--color-chroma-600);
  --lightness: var(--color-lightness-light-base);
  --lightness-accent: var(--color-lightness-300);
  --lightness-contrast: var(--color-lightness-600);
  --lightness-focus: var(--color-lightness-400);
  --lightness-contrast-focus: var(--color-lightness-000);
  --lightness-ui-base: var(--color-lightness-300);
  --lightness-ui-base-pressed-hover: var(--color-lightness-400);
  --lightness-ui-contrast-base: var(--color-lightness-light-base);
  --lightness-ui-hover-base: var(--color-lightness-400);
  --lightness-ui-hover-contrast-base: var(--color-lightness-light-base);
  --lightness-surface-1: var(--color-lightness-000);
  --lightness-surface-1-contrast: var(--color-lightness-400);
  --lightness-surface-2: var(--color-lightness-100);
  --lightness-surface-2-contrast: var(--color-lightness-500);
  --lightness-surface-3: var(--color-lightness-200);
  --lightness-surface-3-contrast: var(--color-lightness-600);
  --lightness-surface-4: var(--color-lightness-400);
  --lightness-surface-4-contrast: var(--color-lightness-100);
  --lightness-surface-5: var(--color-lightness-500);
  --lightness-surface-5-contrast: var(--color-lightness-000);
  --chroma: var(--color-chroma-neutral);
  --chroma-accent-base: var(--color-chroma-300);
  --chroma-ink: var(--color-chroma-600);
  --chroma-contrast: var(--color-chroma-600);
  --chroma-focus: var(--color-chroma-400);
  --chroma-contrast-focus: var(--color-chroma-000);
  --chroma-surface-1: var(--color-chroma-000);
  --chroma-surface-1-contrast: var(--color-chroma-400);
  --chroma-surface-2: var(--color-chroma-100);
  --chroma-surface-2-contrast: var(--color-chroma-500);
  --chroma-surface-3: var(--color-chroma-200);
  --chroma-surface-3-contrast: var(--color-chroma-600);
  --chroma-surface-4: var(--color-chroma-400);
  --chroma-surface-4-contrast: var(--color-chroma-100);
  --chroma-surface-5: var(--color-chroma-400);
  --chroma-surface-5-contrast: var(--color-chroma-100);
  --shade: oklch(var(--lightness-base) var(--chroma) var(--hue));
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  --accent: oklch(var(--lightness-accent) var(--chroma-accent) var(--hue));
  --shadow: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
}

[class*="settings:night"],
[color-scheme=dark] {
  color-scheme: dark;
  --hue: var(--color-theme-primary);
  --lightness-base: var(--color-lightness-dark-base);
  --lightness-accent-base: var(--color-lightness-200);
  --lightness-contrast-base: var(--color-lightness-000);
  --chroma-base: var(--color-chroma-neutral);
  --chroma-contrast-base: var(--color-chroma-100);
  --lightness: var(--color-lightness-dark-base);
  --lightness-accent: var(--color-lightness-400);
  --lightness-contrast: var(--color-lightness-000);
  --lightness-focus: var(--color-lightness-500);
  --lightness-contrast-focus: var(--color-lightness-100);
  --lightness-ui-base: var(--color-lightness-400);
  --lightness-ui-base-pressed-hover: var(--color-lightness-300);
  --lightness-ui-contrast-base: var(--color-lightness-light-base);
  --lightness-ui-hover-base: var(--color-lightness-300);
  --lightness-ui-hover-contrast-base: var(--color-lightness-light-base);
  --lightness-surface-1: var(--color-lightness-600);
  --lightness-surface-1-contrast: var(--color-lightness-200);
  --lightness-surface-2: var(--color-lightness-500);
  --lightness-surface-2-contrast: var(--color-lightness-100);
  --lightness-surface-3: var(--color-lightness-400);
  --lightness-surface-3-contrast: var(--color-lightness-000);
  --lightness-surface-4: var(--color-lightness-300);
  --lightness-surface-4-contrast: var(--color-lightness-000);
  --lightness-surface-5: var(--color-lightness-200);
  --lightness-surface-5-contrast: var(--color-lightness-600);
  --chroma: var(--color-chroma-neutral);
  --chroma-accent-base: var(--color-chroma-400);
  --chroma-ink: var(--color-chroma-000);
  --chroma-contrast: var(--color-chroma-000);
  --chroma-focus: var(--color-chroma-500);
  --chroma-contrast-focus: var(--color-chroma-100);
  --chroma-surface-1: var(--color-chroma-600);
  --chroma-surface-1-contrast: var(--color-chroma-200);
  --chroma-surface-2: var(--color-chroma-500);
  --chroma-surface-2-contrast: var(--color-chroma-100);
  --chroma-surface-3: var(--color-chroma-400);
  --chroma-surface-3-contrast: var(--color-chroma-000);
  --chroma-surface-4: var(--color-chroma-300);
  --chroma-surface-4-contrast: var(--color-chroma-000);
  --chroma-surface-5: var(--color-chroma-200);
  --chroma-surface-5-contrast: var(--color-chroma-600);
  --shade: oklch(var(--lightness-base) var(--chroma) var(--hue));
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  --accent: oklch(var(--lightness-accent) var(--chroma-accent) var(--hue));
  --shadow: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
}

.settings\:day\:contrast {
  --lightness-base: var(--color-lightness-light-contrast);
}

.settings\:day\:blend {
  --lightness-base: var(--color-lightness-light-blend);
}

.settings\:night\:contrast {
  --lightness-base: var(--color-lightness-dark-contrast);
}

.settings\:night\:blend {
  --lightness-base: var(--color-lightness-dark-blend);
}

@media (prefers-color-scheme: light) {
  .emoji\:blend::before {
    content: var(--emoji-blend-day);
  }
}
@media (prefers-color-scheme: dark) {
  .emoji\:blend::before {
    content: var(--emoji-blend-night);
  }
}
[class*="settings:night"] .emoji\:blend::before,
[color-scheme=dark] .emoji\:blend::before {
  content: var(--emoji-blend-night);
}

[class*="settings:day"] .emoji\:blend::before,
[color-scheme=light] .emoji\:blend::before {
  content: var(--emoji-blend-day);
}

/* Set current color SHADE according to current combination of:
 - lightness
 - chroma
 - hue
*/
[class*=":fill"] {
  --color-accent: var(--shade);
}

[class*=":outline"] {
  --color-accent: var(--accent, var(--ink));
  background-color: inherit;
}

[class*=":outline"]:not(label, pre) {
  --color-accent: var(--accent, var(--ink));
  border: var(--border-width-md) solid var(--color-accent);
}

[class*=":bare"]:not(label, pre) {
  --border-color-bare: oklch(
  	var(--lightness-surface-2) var(--chroma-contrast) var(--hue)
  );
  --border-color: var(--color-bg, var(--border-color-bare));
  border: var(--border-width-md) solid var(--border-color);
  background-color: inherit;
}

[class*=":bare"]:not(label, button, pre):focus,
[class*=":bare"]:not(label, button, pre):hover,
[class*=":outline"]:not(label, button, pre):focus,
[class*=":outline"]:not(label, button, pre):hover {
  background-color: inherit;
}

.dotted {
  border: var(--border-width-md) dotted var(--accent, var(--shade));
}

/* Set current color SHADE according to current combination of:
 - lightness
 - chroma
 - hue
*/
[disabled] {
  --chroma: var(--color-chroma-neutral);
  --lightness: var(--color-lightness-100);
  --chroma-contrast: var(--color-chroma-neutral);
  --lightness-contrast: var(--color-lightness-300);
}

:visited {
  --chroma: var(--color-chroma-200);
  --lightness: var(--color-lightness-200);
  --chroma-contrast: var(--color-chroma-600);
  --lightness-contrast: var(--color-lightness-600);
}

/**
* Monospace font
*/
/* @font-face {
	font-family: 'Anonymous Pro';
	src:
		url('/fonts/woff/Anonymous_Pro/AnonymousPro-BoldItalic.woff2')
			format('woff2'),
		url('/fonts/woff/Anonymous_Pro/AnonymousPro-BoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
} */
/* @font-face {
	font-family: 'Anonymous Pro';
	src:
		url('/fonts/woff/Anonymous_Pro/AnonymousPro-Italic.woff2') format('woff2'),
		url('/fonts/woff/Anonymous_Pro/AnonymousPro-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
} */
@font-face {
  font-family: "Anonymous Pro";
  src: url("/fonts/woff/Anonymous_Pro/AnonymousPro-Bold.woff2") format("woff2"), url("/fonts/woff/Anonymous_Pro/AnonymousPro-Bold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anonymous Pro";
  src: url("/fonts/woff/Anonymous_Pro/AnonymousPro-Regular.woff2") format("woff2"), url("/fonts/woff/Anonymous_Pro/AnonymousPro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-Thin.woff2') format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
} */
/* @font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-Light.woff2') format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
} */
/* @font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-ThinItalic.woff2') format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-ThinItalic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
} */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/woff/Montserrat/Montserrat-SemiBold.woff2") format("woff2"), url("/fonts/woff/Montserrat/Montserrat-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-BlackItalic.woff2') format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-BlackItalic.woff') format('woff');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
} */
/* @font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-BoldItalic.woff2') format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-BoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
} */
/* @font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-SemiBoldItalic.woff2')
			format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-SemiBoldItalic.woff') format('woff');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
} */
/* 
@font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-Italic.woff2') format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
} */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/woff/Montserrat/Montserrat-ExtraBold.woff2") format("woff2"), url("/fonts/woff/Montserrat/Montserrat-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-MediumItalic.woff2') format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
} */
/* @font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-LightItalic.woff2') format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
} */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/woff/Montserrat/Montserrat-Medium.woff2") format("woff2"), url("/fonts/woff/Montserrat/Montserrat-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-ExtraLightItalic.woff2')
			format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-ExtraLightItalic.woff')
			format('woff');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
} */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/woff/Montserrat/Montserrat-Regular.woff2") format("woff2"), url("/fonts/woff/Montserrat/Montserrat-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-ExtraBoldItalic.woff2')
			format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-ExtraBoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
} */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/woff/Montserrat/Montserrat-Bold.woff2") format("woff2"), url("/fonts/woff/Montserrat/Montserrat-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/woff/Montserrat/Montserrat-Black.woff2") format("woff2"), url("/fonts/woff/Montserrat/Montserrat-Black.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
	font-family: 'Montserrat';
	src:
		url('/fonts/woff/Montserrat/Montserrat-ExtraLight.woff2') format('woff2'),
		url('/fonts/woff/Montserrat/Montserrat-ExtraLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
} */
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-BlackItalic.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-Bold.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-Black.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-BoldItalic.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-LightItalic.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-Medium.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-ExtraLightItalic.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-ExtraLightItalic.woff") format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-Italic.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-Light.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-ExtraBold.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-ExtraLight.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-ExtraBoldItalic.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-ExtraBoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-Regular.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-SemiBoldItalic.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-MediumItalic.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-Thin.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-SemiBold.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Trirong";
  src: url("/fonts/woff/Trirong/Trirong-ThinItalic.woff2") format("woff2"), url("/fonts/woff/Trirong/Trirong-ThinItalic.woff") format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
/**
* Serif font
*/
@font-face {
  font-family: "Encode Sans SC";
  src: url("/fonts/woff/Encode_Sans_SC/EncodeSansSC-Regular.woff2") format("woff2"), url("/fonts/woff/Encode_Sans_SC/EncodeSansSC-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
	font-family: 'Encode Sans SC';
	src:
		url('/fonts/woff/Encode_Sans_SC/EncodeSansSC-ExtraLight.woff2')
			format('woff2'),
		url('/fonts/woff/Encode_Sans_SC/EncodeSansSC-ExtraLight.woff')
			format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
} */
/* @font-face {
	font-family: 'Encode Sans SC';
	src:
		url('/fonts/woff/Encode_Sans_SC/EncodeSansSC-Light.woff2') format('woff2'),
		url('/fonts/woff/Encode_Sans_SC/EncodeSansSC-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
} */
@font-face {
  font-family: "Encode Sans SC";
  src: url("/fonts/woff/Encode_Sans_SC/EncodeSansSC-Medium.woff2") format("woff2"), url("/fonts/woff/Encode_Sans_SC/EncodeSansSC-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
	font-family: 'Encode Sans SC';
	src:
		url('/fonts/woff/Encode_Sans_SC/EncodeSansSC-Thin.woff2') format('woff2'),
		url('/fonts/woff/Encode_Sans_SC/EncodeSansSC-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
} */
@font-face {
  font-family: "Encode Sans SC";
  src: url("/fonts/woff/Encode_Sans_SC/EncodeSansSC-SemiBold.woff2") format("woff2"), url("/fonts/woff/Encode_Sans_SC/EncodeSansSC-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Encode Sans SC";
  src: url("/fonts/woff/Encode_Sans_SC/EncodeSansSC-Bold.woff2") format("woff2"), url("/fonts/woff/Encode_Sans_SC/EncodeSansSC-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Encode Sans SC";
  src: url("/fonts/woff/Encode_Sans_SC/EncodeSansSC-ExtraBold.woff2") format("woff2"), url("/fonts/woff/Encode_Sans_SC/EncodeSansSC-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
	font-family: 'Encode Sans SC';
	src:
		url('/fonts/woff/Encode_Sans_SC/EncodeSansSC-Black.woff2') format('woff2'),
		url('/fonts/woff/Encode_Sans_SC/EncodeSansSC-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
} */
[class*="icon:"]::before {
  --icon-size: var(--ui-size);
  display: inline;
}

a[class*="icon:"]::before {
  margin-inline: var(--ui-size);
}

.feedback[class*=icon] {
  display: flex;
}

[class*="shape:"][class*=icon] {
  padding: var(--ui-size-sm);
  max-inline-size: fit-content;
}

[class*=icon]:not([class*="shape:"])::before {
  margin-inline: 0 var(--ui-size);
}

[class*=icon].align\:end {
  display: flex;
  flex-direction: row-reverse;
  justify-content: var(--justify, space-between);
}

[class*="ravioli:"][class*="icon:"][class*=":2xs"]:not(.feedback)::before,
[class*="ravioli:"][class*="icon:"][class*=":xs"]:not(.feedback)::before,
[class*="ravioli:"][class*="icon:"][class*=":sm"]:not(.feedback)::before,
[class*="ravioli:"][class*="icon:"][class*=":md"]:not(.feedback)::before,
[class*="ravioli:"][class*="icon:"][class*=":lg"]:not(.feedback)::before,
[class*="ravioli:"][class*="icon:"][class*=":xl"]:not(.feedback)::before,
[class*="ravioli:"][class*="icon:"][class*=":2xl"]:not(.feedback)::before {
  margin-inline: 0;
}

button[class*=icon].align\:end,
summary[class*=icon].align\:end {
  text-align: start;
}

button[class*=icon].align\:start,
summary[class*=icon].align\:start {
  text-align: end;
}

.ff\:magic[class*=svg]::before {
  margin-inline: 0 var(--ui-size-sm);
}

ff-icon[class*=svg]::before {
  margin-inline: var(--ui-size-sm) 0;
}

html {
  --shadow: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
  --shadow-sm: var(--shadow-base-sm-offset-x) var(--shadow-base-sm-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-md: var(--shadow-base-md-offset-x) var(--shadow-base-md-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-lg: var(--shadow-base-lg-offset-x) var(--shadow-base-lg-offset-y)
  	var(--shadow-base-md-blur) var(--shadow-base-md-spread) var(--shadow);
  --shadow-inset-sm: var(--shadow-sm);
  --shadow-inset-md: var(--shadow-md);
}

[class*=svg]::before {
  content: "";
  background-image: var(--icon-url);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding: 0;
  height: var(--icon-size);
  width: var(--icon-size);
}

@supports (mask: var(--icon-url)) {
  [class*=svg]::before {
    background: var(--ink);
    mask: var(--icon-url) center center/100% auto no-repeat;
  }
  [class*=svg][class*="magic:"]::before {
    background: var(--magic-gradient);
    mask: var(--icon-url) center center/100% auto no-repeat;
  }
}
[class*=svg].size\:2xs::before {
  --icon-size: var(--icon-svg-2xs);
}

[class*=svg].size\:xs::before {
  --icon-size: var(--icon-svg-xs);
}

[class*=svg].size\:sm::before {
  --icon-size: var(--icon-svg-sm);
}

[class*=svg].size\:md::before {
  --icon-size: var(--icon-svg-md);
}

[class*=svg].size\:lg::before {
  --icon-size: var(--icon-svg-lg);
}

[class*=svg].size\:xl::before {
  --icon-size: var(--icon-svg-xl);
}

[class*=svg].size\:2xl::before {
  --icon-size: var(--icon-svg-2xl);
}

/* == Links
 - The styles below are global: for example they will apply to links in text
 - Links in navs have specific styles (except for hover), see: * styles/core/blocks/nav.scss`
 == */
a {
  color: var(--color-ink-nav, var(--ink));
  background-color: var(--color-bg);
  border-color: var(--ink);
  text-decoration-color: var(--ink);
}

a:hover,
a:focus,
a:active,
a:visited {
  --hue: var(--color-theme-primary);
  text-decoration: underline;
}

a:hover[class*=accent],
a:focus[class*=accent],
a:active[class*=accent],
a:visited[class*=accent] {
  --hue: var(--color-theme-accent);
}

a:hover[class*=highlight],
a:focus[class*=highlight],
a:active[class*=highlight],
a:visited[class*=highlight] {
  --hue: var(--color-theme-highlight);
}

a:hover {
  --lightness: var(--color-lightness-100);
  --lightness-contrast: var(--color-lightness-600);
}

[class*="size:"] {
  --ratio: var(--size-ratio-md);
  /* Default range */
  --ui-size-sm: calc(var(--ui-size) / var(--ratio));
  --ui-size-lg: calc(var(--ui-size) * var(--ratio));
  /* TODO: scale font */
  --font-size: var(--font-size-md);
}

/* Minor range */
[class*="size:"].scale\:minor {
  --ratio: var(--size-ratio-sm);
}

/* Major range */
[class*="size:"].scale\:major {
  --ratio: var(--size-ratio-lg);
}

.size\:3xs {
  /* Base size */
  --ui-size: var(--size-base-3xs);
  --font-size: var(--font-size-2xs) / var(--fluid-min-ratio);
}

.size\:2xs {
  /* Base size */
  --ui-size: var(--size-base-2xs);
  --font-size: var(--font-size-xs) / var(--fluid-min-ratio);
}

.size\:xs {
  /* Base size */
  --ui-size: var(--size-base-xs);
  --font-size: var(--font-size-xs);
}

.size\:sm {
  /* Base size */
  --ui-size: var(--size-base-sm);
  --font-size: var(--font-size-sm);
}

.size\:md {
  /* Base size */
  --ui-size: var(--size-base-md);
  --font-size: var(--font-size-md);
}

.size\:lg {
  /* Base size */
  --ui-size: var(--size-base-lg);
  --font-size: var(--font-size-lg);
}

.size\:xl {
  /* Base size */
  --ui-size: var(--size-base-xl);
  --font-size: var(--font-size-xl);
}

.size\:2xl {
  /* Base size */
  --ui-size: var(--size-base-2xl);
  --font-size: var(--font-size-2xl);
}

/* SVG Icons */
.svg\:egg::before {
  --icon-url: url("/icons/egg.svg");
}

.svg\:magic::before {
  --icon-url: url("/icons/magic.svg");
}

.svg\:sparkles::before {
  --icon-url: url("/icons/sparkles.svg");
}

.svg\:water::before {
  --icon-url: url("/icons/water.svg");
}

.svg\:tsunami::before {
  --icon-url: url("/icons/tsunami.svg");
}

/* Brand Icons */
.svg\:github::before {
  --icon-url: url("/icons/github.svg");
}

[class*=":lime"] {
  --hue: var(--color-palette-lime);
}

[class*=":banana"] {
  --hue: var(--color-palette-banana);
}

[class*=":tangerine"] {
  --hue: var(--color-palette-tangerine);
}

[class*=":litchee"] {
  --hue: var(--color-palette-litchee);
}

[class*=":mora"] {
  --hue: var(--color-palette-mora);
}

[class*=":framboise"] {
  --hue: var(--color-palette-framboise);
}

[class*=":grape"] {
  --hue: var(--color-palette-grape);
}

[class*=":blueberry"] {
  --hue: var(--color-palette-blueberry);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h4,
.h5 {
  color: var(--ink);
  line-height: var(--font-leading-body);
}

h1.nowrap,
h2.nowrap,
h3.nowrap,
h4.nowrap,
h5.nowrap,
h6.nowrap,
.h4.nowrap,
.h5.nowrap {
  white-space: nowrap;
}

:where(h1, h2, h3, h4, h5, h6, .h4, .h5) + p,
:where(h1, h2, h3, h4, h5, h6, .h4, .h5, p) + pre,
:where(h1, h2, h3, h4, h5, h6, .h4, .h5, p) + code {
  margin-block-start: var(--ui-size);
}

h1.link,
h2.link,
h3.link {
  margin: 0;
  font-size: var(--font-size);
}

h1 {
  /* TODO: use specific tokens for heading colors */
  --hue: var(--color-theme-primary);
  --chroma: var(--color-chroma-000);
  --lightness: var(--color-lightness-000);
  --lightness-contrast: var(--lightness-ui-hover-base);
  --chroma-contrast: var(--color-chroma-400);
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  --shade: oklch(var(--lightness) var(--chroma) var(--hue));
  --font-family-h1: var(--font-family-heading);
  color: var(--ink);
  font-size: var(--font-size-h1);
  font-family: var(--font-family-h1);
  font-weight: var(--font-weight-h1);
  line-height: var(--font-leading-heading);
}

h2,
.h2 {
  --font-family-h2: var(--font-family-subheading);
  font-size: var(--font-size-h2);
  font-family: var(--font-family-h2);
  font-weight: var(--font-weight-h2);
}

h3,
.h3 {
  --font-family-h3: var(--font-family-subheading);
  font-size: var(--font-size-h3);
  font-family: var(--font-family-h3);
  font-weight: var(--font-weight-h3);
}

h4,
.h4 {
  --font-family-h4: var(--font-family-subheading);
  font-size: var(--font-size-h4);
  font-family: var(--font-family-h4);
  font-weight: var(--font-weight-h4);
}

h5,
.h5 {
  --font-family-h5: var(--font-family-subheading);
  font-size: var(--font-size-h5);
  font-family: var(--font-family-h5);
  font-weight: var(--font-weight-h5);
}

.font\:base {
  --font-family-base: var(--font-family-body);
  font-size: var(--font-size-base);
}

.font\:h1 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-h1);
}

.font\:heading {
  font-family: var(--font-family-subheading);
}

.font\:semibold {
  font-weight: var(--font-weight-h5);
}

article,
.l\:text {
  background-color: inherit;
}

p,
figcaption {
  color: var(--color-ink, var(--ink));
  line-height: var(--font-leading-body);
}

ol,
ul {
  margin: 0;
  padding-inline-start: var(--gap, calc(2 * var(--ui-size)));
}

ol.unstyled,
ul.unstyled {
  list-style: none;
}

a {
  padding-block: 0;
}

pre,
code {
  font-family: var(--font-family-mono, "Courier New", Courier, monospace);
  font-size: var(--font-size);
}

hr {
  margin-block-start: calc(var(--ui-size-lg) * var(--size-ratio-lg));
  margin-block-end: calc(var(--ui-size) * var(--size-ratio-md));
}

blockquote {
  /* Same values as surface:1:primary */
  --hue: var(--color-theme-primary);
  --lightness: var(--lightness-surface-1);
  --chroma: var(--chroma-surface-1);
  --shade: oklch(var(--lightness) var(--chroma) var(--hue));
  color: var(--ink);
  background-color: var(--shade);
  border-left: 0.25em solid var(--color-ink);
  padding: var(--ui-size);
  margin-block: var(--ui-size-lg);
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--font-leading-neutral);
}

/**
 * Set inline-size for text:
 * - improve readability by using ch units to adapt to user zoom settings
 */
[class*="l:text"] {
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  --text-inline-size: 71ch;
  color: var(--ink);
  background-color: inherit;
  inline-size: 100%;
  max-inline-size: var(--text-inline-size);
}

[class*="l:text"] ol,
[class*="l:text"] ul {
  margin-block: var(--ui-size);
}

[class*="l:text"] > * {
  inline-size: 100%;
  max-inline-size: calc(100% - var(var(--grid-gap, --gap), var(--ui-size)));
}

[class^="l:text"] > * + h1,
[class^="l:text"] > * + h2,
[class^="l:text"] > * + h3,
[class^="l:text"] > * + h4,
[class^="l:text"] > * + h5 {
  margin-block-start: var(--ui-size-lg);
}

[class^="l:text"] > h1 + *,
[class^="l:text"] > h2 + *,
[class^="l:text"] > h3 + *,
[class^="l:text"] > h4 + *,
[class^="l:text"] > h5 + * {
  margin-block-start: var(--ui-size);
}

ul[class*="l:text"] {
  margin-block: var(--ui-size-sm);
}

ol.unstyled,
ul.unstyled {
  margin: 0;
  padding: 0;
}

[class*="l:text"] > ol,
[class*="l:text"] > ul {
  padding-inline-start: calc(2 * var(--ui-size-lg));
}

.l\:text\:2xs {
  --text-inline-size: 20ch;
}

.l\:text\:xs {
  --text-inline-size: 35ch;
}

.l\:text\:sm {
  --text-inline-size: 50ch;
}

.l\:text\:md {
  --text-inline-size: 60ch;
}

.l\:text\:lg {
  --text-inline-size: 70ch;
}

.l\:text\:xl {
  --text-inline-size: 80ch;
}

.l\:text\:2xl {
  --text-inline-size: 90ch;
}

[class*="l:stack"] > * {
  /* top and bottom margins in horizontal\:tb writing mode */
  margin-block: 0;
}

[class*="l:stack"] {
  display: flex;
  flex-direction: column;
  justify-content: var(--justify, flex-start);
}

.l\:stack\:auto > * {
  inline-size: auto;
}

[class*="l:stack"] > * + * {
  margin-block-start: var(--gap);
}

[class*="l:stack"] > * {
  inline-size: 100%;
}

[class*="l:stack"].recursive * + * {
  margin-block-start: var(--gap);
}

[class*="l:stack"].w\:full:only-child {
  /* ↓ `height` in horizontal\:tb writing mode */
  block-size: 100%;
  /* ↓ `width` in horizontal\:tb writing mode */
  inline-size: 100%;
}

.l\:stack\:2xs {
  --gap: var(--size-base-2xs);
}

.l\:stack\:xs {
  --gap: var(--size-base-xs);
}

.l\:stack\:sm {
  --gap: var(--size-base-sm);
}

.l\:stack\:md {
  --gap: var(--size-base-md);
}

.l\:stack\:lg {
  --gap: var(--size-base-lg);
}

.l\:stack\:xl {
  --gap: var(--size-base-xl);
}

.l\:stack\:2xl {
  --gap: var(--size-base-2xl);
}

/**
*  Use a threshold to force wrap into switcher layout at the breakpoint value.
* In this way, contents will wrap together as a switcher
* (instead of normal wrap where items will wrap independently of one another)
*/
[class*="l:switcher:"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

[class*="l:switcher:"] > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

[class*="l:switcher:"].hug > * {
  flex-grow: 0;
}

[class*="l:switcher:"].reverse {
  flex-direction: row-reverse;
}

/* TODO: THis shouldn't be necessary : figure out a container switcher */
[class*="l:switcher:"].nowrap {
  flex-wrap: nowrap;
}

.l\:switcher\:2xs {
  --gap: var(--size-base-2xs);
}

.l\:switcher\:xs {
  --gap: var(--size-base-xs);
}

.l\:switcher\:sm {
  --gap: var(--size-base-sm);
}

.l\:switcher\:md {
  --gap: var(--size-base-md);
}

.l\:switcher\:lg {
  --gap: var(--size-base-lg);
}

.l\:switcher\:xl {
  --gap: var(--size-base-xl);
}

.l\:switcher\:2xl {
  --gap: var(--size-base-2xl);
}

.th\:2xs {
  --threshold: var(--layout-threshold-2xs);
}

.th\:xs {
  --threshold: var(--layout-threshold-xs);
}

.th\:sm {
  --threshold: var(--layout-threshold-sm);
}

.th\:md {
  --threshold: var(--layout-threshold-md);
}

.th\:lg {
  --threshold: var(--layout-threshold-lg);
}

.th\:xl {
  --threshold: var(--layout-threshold-xl);
}

.th\:2xl {
  --threshold: var(--layout-threshold-2xl);
}

@container (burrito) {
  [class*="l:switcher:"] {
    --threshold: var(--sidebar-width);
  }
}
/* == Center main content == */
/* Use Center class without a size to set a full width with default padding */
[class*="l:taco:"] {
  --max-inline-size-taco: calc(100% - calc(2 * var(--size-inverse)));
  max-inline-size: var(--max-inline-size-taco); /* width of parent minus base padding */
  margin-left: auto;
  margin-right: auto;
}

.l\:taco\:2xs {
  --size-inverse: var(--size-inverse-2xs);
}

.l\:taco\:xs {
  --size-inverse: var(--size-inverse-xs);
}

.l\:taco\:sm {
  --size-inverse: var(--size-inverse-sm);
}

.l\:taco\:md {
  --size-inverse: var(--size-inverse-md);
}

.l\:taco\:lg {
  --size-inverse: var(--size-inverse-lg);
}

.l\:taco\:xl {
  --size-inverse: var(--size-inverse-xl);
}

.l\:taco\:2xl {
  --size-inverse: var(--size-inverse-2xl);
}

[class*="maki:inline"] {
  --inline-margin: var(--ui-size);
  margin-inline: var(--inline-margin);
  max-inline-size: calc(100% - 2 * var(--inline-margin));
}

.maki\:block {
  --block-margin: var(--ui-size);
  margin-block: var(--block-margin);
}

.maki\:auto {
  margin: 0 auto;
}

.maki\:inline\:2xs {
  --inline-margin: var(--size-base-2xs);
}

.maki\:inline\:xs {
  --inline-margin: var(--size-base-xs);
}

.maki\:inline\:sm {
  --inline-margin: var(--size-base-sm);
}

.maki\:inline\:md {
  --inline-margin: var(--size-base-md);
}

.maki\:inline\:lg {
  --inline-margin: var(--size-base-lg);
}

.maki\:inline\:xl {
  --inline-margin: var(--size-base-xl);
}

.maki\:inline\:2xl {
  --inline-margin: var(--size-base-2xl);
}

.maki\:block\:2xs {
  margin-block: var(--size-base-2xs);
}

.maki\:block\:xs {
  margin-block: var(--size-base-xs);
}

.maki\:block\:sm {
  margin-block: var(--size-base-sm);
}

.maki\:block\:md {
  margin-block: var(--size-base-sm);
}

.maki\:block\:lg {
  margin-block: var(--size-base-lg);
}

.maki\:block\:xl {
  margin-block: var(--size-base-xl);
}

.maki\:block\:2xl {
  margin-block: var(--size-base-2xl);
}

.cannelloni\:inline {
  padding-inline: var(--ui-size);
}

.cannelloni\:block {
  padding-block: var(--ui-size);
}

[class*="cannelloni:"] {
  --ratio: var(--size-ratio-md);
  /* Default range */
  --ui-size-sm: calc(var(--ui-size) / var(--ratio));
  --ui-size-lg: calc(var(--ui-size) * var(--ratio));
}

/* Minor range */
[class*="cannelloni:"].scale\:minor {
  --ratio: var(--size-ratio-sm);
}

/* Major range */
[class*="cannelloni:"].scale\:major {
  --ratio: var(--size-ratio-lg);
}

[class*="cannelloni:"].size\:3xs {
  /* Base size */
  --ui-size: var(--size-base-3xs);
}

[class*="cannelloni:"].size\:2xs {
  /* Base size */
  --ui-size: var(--size-base-2xs);
}

[class*="cannelloni:"].size\:xs {
  /* Base size */
  --ui-size: var(--size-base-xs);
}

[class*="cannelloni:"].size\:sm {
  /* Base size */
  --ui-size: var(--size-base-sm);
}

[class*="cannelloni:"].size\:md {
  /* Base size */
  --ui-size: var(--size-base-md);
}

[class*="cannelloni:"].size\:lg {
  /* Base size */
  --ui-size: var(--size-base-lg);
}

[class*="cannelloni:"].size\:xl {
  /* Base size */
  --ui-size: var(--size-base-xl);
}

[class*="cannelloni:"].size\:2xl {
  /* Base size */
  --ui-size: var(--size-base-2xl);
}

/* Set current color SHADE according to current combination of:
 - lightness
 - chroma
 - hue
*/
[class*=":primary"] {
  --hue: var(--color-theme-primary);
  --shadow: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
  --accent: oklch(var(--lightness-accent) var(--chroma-accent-base) var(--hue));
  --shadow-sm: var(--shadow-base-sm-offset-x) var(--shadow-base-sm-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-md: var(--shadow-base-md-offset-x) var(--shadow-base-md-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-lg: var(--shadow-base-lg-offset-x) var(--shadow-base-lg-offset-y)
  	var(--shadow-base-md-blur) var(--shadow-base-md-spread) var(--shadow);
  --shadow-inset-sm: var(--shadow-sm);
  --shadow-inset-md: var(--shadow-md);
}

[class*=":accent"] {
  --hue: var(--color-theme-accent);
  --shadow: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
  --accent: oklch(var(--lightness-accent) var(--chroma-accent-base) var(--hue));
  --shadow-sm: var(--shadow-base-sm-offset-x) var(--shadow-base-sm-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-md: var(--shadow-base-md-offset-x) var(--shadow-base-md-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-lg: var(--shadow-base-lg-offset-x) var(--shadow-base-lg-offset-y)
  	var(--shadow-base-md-blur) var(--shadow-base-md-spread) var(--shadow);
  --shadow-inset-sm: var(--shadow-sm);
  --shadow-inset-md: var(--shadow-md);
}

[class*=":highlight"] {
  --hue: var(--color-theme-highlight);
  --shadow: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
  --accent: oklch(var(--lightness-accent) var(--chroma-accent-base) var(--hue));
  --shadow-sm: var(--shadow-base-sm-offset-x) var(--shadow-base-sm-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-md: var(--shadow-base-md-offset-x) var(--shadow-base-md-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-lg: var(--shadow-base-lg-offset-x) var(--shadow-base-lg-offset-y)
  	var(--shadow-base-md-blur) var(--shadow-base-md-spread) var(--shadow);
  --shadow-inset-sm: var(--shadow-sm);
  --shadow-inset-md: var(--shadow-md);
}

[class*=":neutral"] {
  --hue: var(--color-theme-neutral);
  --chroma: var(--color-chroma-neutral);
  --chroma-contrast: var(--color-chroma-neutral);
  --accent: oklch(
  	var(--lightness-accent-base) var(--color-chroma-neutral) var(--hue)
  );
  --shadow: oklch(
  	var(--lightness-accent-base) var(--color-chroma-neutral) var(--hue)
  );
  --shadow-sm: var(--shadow-base-sm-offset-x) var(--shadow-base-sm-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-md: var(--shadow-base-md-offset-x) var(--shadow-base-md-offset-y)
  	var(--shadow-base-sm-blur) var(--shadow-base-sm-spread) var(--shadow);
  --shadow-lg: var(--shadow-base-lg-offset-x) var(--shadow-base-lg-offset-y)
  	var(--shadow-base-md-blur) var(--shadow-base-md-spread) var(--shadow);
  --shadow-inset-sm: var(--shadow-sm);
  --shadow-inset-md: var(--shadow-md);
}

[class*="color:"] :is(input, textarea, select) {
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  --shade: oklch(var(--lightness) var(--chroma) var(--hue));
  --accent: oklch(var(--lightness-accent) var(--chroma-accent-base) var(--hue));
  --shadow: oklch(var(--lightness-accent) var(--chroma-accent-base) var(--hue));
  accent-color: var(--accent);
}

[class*="bg:"].variant\:fill:focus {
  --shade-focus: oklch(var(--lightness-focus) var(--chroma-focus) var(--hue));
  --ink-focus: oklch(
  	var(--lightness-contrast-focus) var(--chroma-contrast-focus) var(--hue)
  );
  color: var(--ink-focus);
  background-color: var(--shade-focus);
}

[class*="bg:"].variant\:bare:focus,
[class*="bg:"].variant\:outline:focus {
  --shade-focus: inherit;
  --ink-focus: oklch(
  	var(--lightness-contrast-base) var(--chroma-contrast-base) var(--hue)
  );
  --accent: oklch(
  	var(--lightness-accent-base) var(--chroma-accent-base) var(--hue)
  );
  color: var(--ink-focus);
  background-color: var(--shade-focus);
  outline-color: var(--color-border, var(--accent));
}

[class*="bg:"].color\:neutral.variant\:bare:focus,
[class*="bg:"].color\:neutral.variant\:outline:focus {
  outline-color: var(--color-border, var(--ink-focus));
  border-color: var(--color-border, var(--ink-focus));
  background-color: var(--shade-focus);
}

[class*="l:frame"] {
  --max-inline-size: calc(100vw - 2 * var(--ui-size));
  overflow: hidden;
  display: flex;
  justify-content: var(--justify, center);
  align-items: var(--align, center);
  max-inline-size: var(--max-inline-size, 100%);
}

[class*="l:frame"]:has(video, canvas) {
  --max-block-size: calc(100vh - 3 * var(--ui-header-height));
  max-block-size: var(--max-inline-size);
}

[class*="l:frame"] > *:is(img, video, canvas, .content) {
  block-size: 100%;
  inline-size: 100%;
  max-inline-size: var(--max-inline-size, 100%);
}

[class*="l:frame"] > *:is(img, video, .content) {
  object-fit: contain;
}

[class*="l:frame"] > canvas {
  object-fit: cover;
}

.l\:frame\:square {
  --max-inline-size: calc(100vh - 3 * var(--ui-header-height));
  aspect-ratio: 1/1;
}

.l\:frame\:rect-xs {
  --max-inline-size: calc(100vh - 2 * var(--ui-header-height));
  aspect-ratio: 1.15/1;
}

.l\:frame\:video {
  aspect-ratio: 16/9;
}

.l\:frame\:twin {
  aspect-ratio: 2/1;
}

.l\:frame\:feature {
  max-inline-size: 100%;
}

.l\:frame\:table {
  max-inline-size: 100%;
  overflow-y: auto;
}

.l\:frame\:round {
  border-radius: 50%;
}

.l\:frame\:feature > img,
.l\:frame\:feature > video,
.l\:frame\:feature > canvas {
  max-block-size: var(--max-block-size, calc(100vh - var(--ui-header-height) - var(--gap)));
  inline-size: auto;
  margin-left: auto;
  margin-right: auto;
  margin-block-end: var(--gap);
}

.gradient\:end.neutral {
  background: linear-gradient(var(--shade) 80%, transparent);
}

[class^="l:reveal"] {
  --x-axis: 0;
  --y-axis: 0;
  --x-size: 100%;
  --y-size: fit-content;
  display: flex;
  flex-direction: column;
  inline-size: var(--x-size);
  block-size: var(--y-size);
  inline-size: 100%;
  color: var(--ink);
  z-index: var(--layout-z-index-layer);
  transition: inline-size 250ms ease-in-out;
  transition: block-size 250ms ease-in-out;
}

[class^="l:reveal"].collapsed {
  transition: block-size 250ms ease-in-out;
  transition: inline-size 250ms ease-in-out;
}

[class^="l:reveal"] > form > [aria-expanded] {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-ui);
  padding: var(--ui-size-sm) var(--ui-size);
}

ff-reveal {
  /* transition: transform 250ms ease-in-out; */
  --lightness-scrollbar: var(--lightness-base);
  --chroma-scrollbar: var(--chroma-base);
  --track: oklch(var(--lightness-scrollbar) var(--chroma-scrollbar) var(--hue));
  --thumb: var(--accent);
  block-size: var(--y-size);
  max-block-size: var(--y-size);
  scrollbar-color: var(--thumb) var(--track);
  background-color: var(--shade, inherit);
  border-radius: var(--border-radius-lg);
}

ff-reveal {
  margin-block-start: var(--outline-offset-lg);
}

ff-reveal.collapsed {
  --x-size: 0;
  --y-size: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

[class^="l:reveal"].end {
  justify-self: flex-end;
}

[class^="l:reveal"][class^="bp:"].l\:stack:only-child {
  inline-size: calc(var(--sidebar-width) - 2 * var(--gap));
}

@media screen and (min-width: 1024px) {
  ff-reveal.collapsed {
    margin-block-start: var(--outline-offset-lg);
  }
}
/**
 * TODO: merge with blocks/details.css
 */
details {
  position: relative;
}

details.l\:stack:not([open]) {
  block-size: unset;
}

details .end {
  justify-self: flex-end;
}

/* TODO: set [inline/block] size according to alignment */
/* TODO: generate mq mixin */
@media screen and (min-width: 320px) {
  details.bp\:2xs [class^=collapsed] {
    border: unset;
    clip: unset;
    height: auto;
    margin: unset;
    overflow: hidden;
    padding: unset;
    position: unset;
    width: auto;
    white-space: normal;
  }
  details.bp\:2xs.l\:stack:only-child {
    inline-size: calc(var(--sidebar-width) - 2 * var(--gap));
  }
}
@media screen and (min-width: 620px) {
  details.bp\:xs [class^=collapsed] {
    border: unset;
    clip: unset;
    height: auto;
    margin: unset;
    overflow: hidden;
    padding: unset;
    position: unset;
    width: auto;
    white-space: normal;
  }
  details.bp\:xs.l\:stack:only-child {
    inline-size: calc(var(--sidebar-width) - 2 * var(--gap));
  }
}
@media screen and (min-width: 935px) {
  details.bp\:sm [class^=collapsed] {
    border: unset;
    clip: unset;
    height: auto;
    margin: unset;
    overflow: hidden;
    padding: unset;
    position: unset;
    width: auto;
    white-space: normal;
  }
  details.bp\:sm.l\:stack:only-child {
    inline-size: calc(var(--sidebar-width) - 2 * var(--gap));
  }
}
@media screen and (min-width: 1360px) {
  details.bp\:md [class^=collapsed] {
    border: unset;
    clip: unset;
    height: auto;
    margin: unset;
    overflow: hidden;
    padding: unset;
    position: unset;
    width: auto;
    white-space: normal;
  }
  details.bp\:md.l\:stack:only-child {
    inline-size: calc(var(--sidebar-width) - 2 * var(--gap));
  }
}
@media screen and (min-width: 1620px) {
  details.bp\:lg [class^=collapsed] {
    border: unset;
    clip: unset;
    height: auto;
    margin: unset;
    overflow: hidden;
    padding: unset;
    position: unset;
    width: auto;
    white-space: normal;
  }
  details.bp\:lg.l\:stack:only-child {
    inline-size: calc(var(--sidebar-width) - 2 * var(--gap));
  }
}
@media screen and (min-width: 2048px) {
  details.bp\:xl [class^=collapsed] {
    border: unset;
    clip: unset;
    height: auto;
    margin: unset;
    overflow: hidden;
    padding: unset;
    position: unset;
    width: auto;
    white-space: normal;
  }
  details.bp\:xl.l\:stack:only-child {
    inline-size: calc(var(--sidebar-width) - 2 * var(--gap));
  }
}
.bp\:2xs {
  --breakpoint: var(--layout-breakpoint-2xs);
}

.bp\:xs {
  --breakpoint: var(--layout-breakpoint-xs);
}

.bp\:sm {
  --breakpoint: var(--layout-breakpoint-sm);
}

.bp\:md {
  --breakpoint: var(--layout-breakpoint-md);
}

.bp\:lg {
  --breakpoint: var(--layout-breakpoint-lg);
}

.bp\:xl {
  --breakpoint: var(--layout-breakpoint-xl);
}

.bp\:2xl {
  --breakpoint: var(--layout-breakpoint-2xl);
}

/* == Burrito container == */
[class*="l:burrito"] {
  inline-size: 100%;
  margin-inline: auto;
}

[class*="l:burrito"].contain {
  container-type: inline-size;
  container-name: burrito;
}

/* == Sidebar content == */
[class*="l:burrito:"] {
  max-inline-size: var(--sidebar-width);
}

[class*="l:burrito:"].freeze {
  inline-size: var(--sidebar-width);
}

/* TODO: Fix container queries per size - not working
- see also `scss/mixins/mq/burrito
*/
/* Scale Burrito */
.l\:burrito.contain {
  --sidebar-width: var(--layout-sidebar-md);
}

/* Scale Burrito */
.l\:burrito\:2xs {
  --sidebar-width: var(--layout-sidebar-2xs);
}

.l\:burrito\:2xs.contain {
  container-name: burrito-2xs;
}

.l\:burrito\:xs {
  --sidebar-width: var(--layout-sidebar-xs);
}

.l\:burrito\:xs.contain {
  container-name: burrito-xs;
}

.l\:burrito\:sm {
  --sidebar-width: var(--layout-sidebar-sm);
}

.l\:burrito\:sm.contain {
  container-name: burrito-sm;
}

.l\:burrito\:md {
  --sidebar-width: var(--layout-sidebar-md);
}

.l\:burrito\:md.contain {
  container-name: burrito-md;
}

.l\:burrito\:lg {
  --sidebar-width: var(--layout-sidebar-lg);
}

.l\:burrito\:lg.contain {
  container-name: burrito-lg;
}

.l\:burrito\:xl {
  --sidebar-width: var(--layout-sidebar-xl);
}

.l\:burrito\:xl.contain {
  container-name: burrito-xl;
}

.l\:burrito\:2xl {
  --sidebar-width: var(--layout-sidebar-2xl);
}

.l\:burrito\:2xl.contain {
  container-name: burrito-2xl;
}

.l\:burrito\:3xl {
  --sidebar-width: var(--layout-sidebar-3xl);
}

.l\:burrito\:3xl.contain {
  container-name: burrito-3xl;
}

[class*=fixed],
[class*=place] {
  --inset-size: var(--size-base-2xs);
  max-inline-size: 100%;
  max-block-size: 100%;
}

[class*=fixed] {
  position: fixed;
  z-index: var(--layout-z-index-fixed);
}

ff-reveal:has([class*=place]) {
  position: relative;
  z-index: var(--layout-z-index-layer);
}

[class*=fixed][class*=":top-left"],
[class*=place][class*=":top-left"] {
  top: var(--inset-size-top, var(--inset-size));
  left: var(--inset-size-left, var(--inset-size));
}

[class*=fixed][class*=":top-right"],
[class*=place][class*=":top-right"] {
  top: var(--inset-size-top, var(--inset-size));
  right: var(--inset-size-right, var(--inset-size));
}

[class*=fixed][class*=":bottom-left"],
[class*=place][class*=":bottom-left"] {
  bottom: var(--inset-size-bottom, var(--inset-size));
  left: var(--inset-size-left, var(--inset-size));
}

[class*=fixed][class*=":bottom-right"],
[class*=place][class*=":bottom-right"] {
  bottom: var(--inset-size-bottom, var(--inset-size));
  right: var(--inset-size-right, var(--inset-size));
}

.shape\:round,
.shape\:square {
  display: flex;
  align-items: var(--align, center);
  justify-content: var(--justify, center);
  aspect-ratio: 1/1;
  inline-size: auto;
  object-fit: contain;
}

.shape\:round,
.shape\:round > * {
  line-height: 1;
  border-radius: 100vmax;
}

.shape\:pill {
  border-radius: 100vmax;
}

.shape\:mellow {
  border-radius: var(--border-radius-lg);
}

.shape\:soft {
  border-radius: var(--border-radius-xl);
}

.shape\:square > * {
  border-radius: var(--border-radius-base);
}

button[class*="shape:"] {
  padding: var(--ui-size-sm);
  block-size: 100%;
  inline-size: auto;
}

button.shape\:pill {
  inline-size: 100%;
  min-inline-size: 6ch; /* TODO: fix magic number */
}

.shape\:round[class*="l:stack"]:only-child::before,
.shape\:square[class*="l:stack"]:only-child::before {
  margin-inline: 0;
}

[class*="layer:"] {
  --layer: var(--shadow-md);
  box-shadow: var(--layer);
}

/* TODO: Make nicer shadows */
.layer\:0 {
  --layer: unset;
}

.layer\:1 {
  --layer: var(--shadow-sm);
}

.layer\:2 {
  --layer: var(--shadow-md);
}

.layer\:3 {
  --layer: var(--shadow-lg);
}

[class*=inset] {
  --layer-inset: var(--shadow-inset-md);
  box-shadow: inset var(--layer-inset);
}

.inset\:0 {
  --layer-inset: unset;
}

.inset\:1 {
  --layer-inset: inset var(--shadow-inset-sm);
}

.inset\:2 {
  --layer-inset: inset var(--shadow-inset-md);
}

.inset\:3 {
  --layer-inset: inset var(--shadow-inset-lg);
}

/*  TODO: Harmonize layer classes / z-index values */
.stage {
  position: relative;
  z-index: var(--layout-z-index-layer);
  min-block-size: 100%;
}

.drop {
  position: relative;
}

/* == Sticky layer: App header == */
.sticky\:top {
  position: sticky;
  top: 0;
  left: 0;
  inline-size: 100%;
  z-index: var(--layout-z-index-sticky);
}

.sticky\:top > main {
  min-height: calc(100vh - (var(--ui-header-height) - var(--ui-size) - var(--ui-footer-height)));
}

/* == Sticky layer: Page header == */
.sticky\:reveal {
  position: relative;
  z-index: var(--layout-z-index-sticky);
}

/* The reveal layout inside a sidebar is currently only used for the sidebar nav in LayoutSidebar */
[class*="l:reveal"].sticky {
  --y-axis: var(--ui-header-height);
  position: sticky;
  block-size: var(--y-size);
  top: var(--y-axis);
  z-index: 1;
}

[class*="l:reveal"].sticky > form > [aria-expanded] {
  inline-size: 100%;
}

@media screen and (min-width: 1024px) {
  [class*="l:reveal"].sticky {
    --y-size-sticky: calc(
    	100vh - var(--ui-header-height) - 2 * var(--ui-size-lg)
    );
    --y-size: var(--y-size-sticky);
  }
  [class*="l:reveal"].sticky ff-reveal.collapsed {
    border: initial;
    margin: initial;
    overflow: auto;
    padding: initial;
    position: unset;
    white-space: initial;
  }
}
/**
 * GARES: Scale
 * Expand / Collapse content
 */
[class*="gare:"].hidden {
  /* TODO: Use transforms here instead */
  --overlay-inline-size: 0;
  --overlay-block-size: 0;
}

[class*="gare:"].collapsed {
  --sidebar-width: var(--layout-sidebar-collapsed);
  --overlay-inline-size: var(--sidebar-width);
}

[class*="gare:"].width\:sm {
  --sidebar-width: var(--layout-sidebar-sm);
  --overlay-inline-size: var(--sidebar-width);
}

[class*="gare:"].width\:md {
  --sidebar-width: var(--layout-sidebar-md);
  --overlay-inline-size: var(--sidebar-width);
}

[class*="gare:"].width\:lg {
  --sidebar-xl: calc(50vw - 2 * var(--grid-gap));
  --overlay-inline-size: var(--sidebar-xl);
}

[class*="gare:"].width\:xl {
  --sidebar-2xl: calc(100vw - 2 * var(--grid-gap));
  --overlay-inline-size: var(--sidebar-2xl);
}

[class*="gare:"].width\:full {
  --sidebar-2xl: calc(100vw - 2 * var(--grid-gap));
  --overlay-inline-size: var(--sidebar-2xl);
}

[class*="gare:"].height\:sm {
  --overlay-block-size: var(--overlay-height-sm);
}

[class*="gare:"].height\:md {
  --overlay-block-size: var(--overlay-height-md);
}

[class*="gare:"].height\:lg {
  --overlay-block-size: calc(
  	100vh - 2 * var(--ui-header-height) - var(--grid-gap) -
  		var(--outline-offset-lg)
  );
}

[class*="gare:"].height\:full {
  --overlay-block-size: calc(
  	100vh - var(--ui-header-height) - var(--grid-gap) - var(--outline-offset-lg)
  );
}

[class*="zone:"]:has([class*="gare:"]) {
  --overlay-block-size: var(--overlay-height-sm);
}

@media screen and (min-width: 620px) {
  [class*="gare:"].width\:lg,
  [class*="gare:"].width\:lg > ff-reveal {
    --overlay-inline-size: var(--layout-sidebar-md);
    --overlay-block-size: var(--max-block-size);
  }
  [class*="gare:"]:is(.width\:xl, .width\:full),
  [class*="gare:"]:is(.width\:xl, .width\:full) > ff-reveal {
    --overlay-inline-size: calc(
    	100vw - var(--sidebar-width) - 4 * var(--grid-gap)
    );
  }
}
@media screen and (min-width: 1100px) {
  .zone\:main,
  [class*="zone:"]:has(.zone\:main) {
    inline-size: auto;
  }
  [class*="gare:"][class*="width:"]:not([class*=":full"]),
  [class*="gare:"][class*="width:"]:not([class*=":full"]).expanded > ff-reveal,
  [class*="gare:"] > ff-reveal {
    --sidebar-width: var(--layout-sidebar-md);
    --overlay-inline-size: calc(var(--sidebar-width) + 2 * var(--grid-gap));
  }
  [class*="gare:"][class*="width:"]:not([class*=":full"])[open] > ff-reveal {
    --sidebar-width: var(--layout-sidebar-md);
    --overlay-inline-size: calc(var(--sidebar-width) - 2 * var(--grid-gap));
  }
  .gare\:ouest > ff-reveal,
  .gare\:ouest:is([open], .expanded) > ff-reveal {
    --sidebar-width: var(--layout-sidebar-md);
    --overlay-inline-size: calc(var(--sidebar-width) + 6 * var(--grid-gap));
  }
  .gare\:ouest[open]:not([class*=":full"]) > ff-reveal {
    inline-size: var(--overlay-inline-size);
  }
  [class*="gare:"] .gare-control {
    inline-size: 100%;
  }
  [class*="gare:"] > ff-reveal,
  [class*="gare:"][class*="height:"]:not(.width\:full) {
    --overlay-block-size: var(--max-block-size);
  }
  .gare\:ouest[open].width\:full > ff-reveal {
    --overlay-block-size: var(--max-block-size);
  }
}
ul.l\:grid\:auto {
  padding-inline-start: 0;
}

.l\:grid\:auto > * {
  /* needed for the flex layout fallback */
  margin-bottom: var(--grid-gap, var(--gap));
}

/* We set the margins to 0 and use gap in grid */
@supports (display: grid) {
  .l\:grid\:auto > * {
    inline-size: auto;
    margin: 0;
    max-inline-size: 100%;
  }
}
/* Basic grid that will automatically create columns if space is available for given column dimensions:
	- between var(--sidebar-width) and 100% of available width
	*/
@supports (width: minmax(var(--grid-item-size), 100%)) {
  .l\:grid\:auto {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-item-size), 100%), 1fr));
  }
}
/**
 * GARES
 * Expand / Collapse content
 */
.gare-control {
  border-radius: 0;
}

details:has(.gare-control) {
  padding-block: 0;
  position: unset;
}

details[class*="gare:"] > ff-reveal,
.l\:reveal[class*="gare:"] > .expanded > ff-reveal {
  margin-inline-start: var(--outline-offset-md);
}

[class*="zone:"] > .navbar > nav form > [class*="l:switcher"],
[class*="zone:"] > .app-context > form > [class*="l:switcher"],
[class*="zone:"] > nav > form > [class*="l:switcher"] {
  --gap: var(--grid-gap);
}

.gare\:est,
.gare\:ouest {
  block-size: fit-content;
  max-block-size: var(--overlay-block-size);
}

.gare\:ouest > ff-reveal,
.gare\:ouest:is([open], .expanded) > ff-reveal {
  top: var(--ui-header-height);
  left: var(--grid-gap);
  right: calc(var(--grid-gap) + var(--outline-offset-md));
}

.gare\:est:is([open], .expanded) > ff-reveal {
  top: var(--ui-header-height);
  right: calc(var(--grid-gap) + var(--outline-offset-lg));
}

[class*="gare:"]:is([class*=est], [class*=ouest], [class*=nord]):is([open],
.expanded) > ff-reveal {
  block-size: fit-content;
  max-block-size: var(--overlay-block-size);
  overflow: hidden auto;
}

.gare\:est:is([open], .expanded) > ff-reveal,
.gare\:ouest:is([open], .expanded) > ff-reveal {
  position: absolute;
  block-size: fit-content;
  max-block-size: var(--overlay-block-size);
  inline-size: var(--overlay-inline-size);
  z-index: var(--layout-z-index-reveal);
}

@media screen and (min-width: 935px) {
  .gare\:ouest > ff-reveal,
  .gare\:ouest:is([open], .expanded) > ff-reveal {
    left: calc(2 * var(--grid-gap));
  }
  .gare\:est > ff-reveal,
  .gare\:est:is([open], .expanded) > ff-reveal {
    box-shadow: unset;
  }
  .gare\:est:is([open], .expanded) > ff-reveal,
  .gare\:ouest:is([open], .expanded) > ff-reveal {
    block-size: fit-content;
    inline-size: 100%;
    max-block-size: var(--overlay-block-size);
    max-inline-size: var(--overlay-inline-size);
  }
}
@media screen and (min-width: 1100px) {
  .gare\:ouest > ff-reveal,
  .gare\:ouest:is([open], .expanded) > ff-reveal {
    box-shadow: unset;
  }
  .gare\:est .gare-control,
  .gare\:ouest .gare-control {
    inline-size: 100%;
    max-inline-size: var(--overlay-inline-size);
  }
}
/**
 * GARES : Animations
 * Expand / Collapse content
 */
/**
 * GARE EST / OUEST
 */
details.gare\:ouest > ff-reveal,
.l\:reveal > .collapsed > ff-reveal {
  --collapse-x: calc(-100% + var(--sidebar-width));
  transform: translate(var(--collapse-x), 0);
  transition: transform 250ms ease-in-out;
}

details[open].gare\:ouest > ff-reveal,
.l\:reveal.gare\:ouest > .expanded > ff-reveal,
details[open].gare\:est > ff-reveal,
.l\:reveal.gare\:est > .expanded > ff-reveal {
  --collapse-x: 0;
  transition: transform 200ms ease-out;
}

details.gare\:ouest > ff-reveal > *,
.l\:reveal > .collapsed > ff-reveal > *,
details.gare\:est > ff-reveal > *,
.l\:reveal > .collapsed > ff-reveal > * {
  transition: inline-size 200ms ease-in-out;
}

details[open].gare\:ouest > ff-reveal > *,
.l\:reveal > .expanded > ff-reveal > *,
details[open].gare\:est > ff-reveal > *,
.l\:reveal > .expanded > ff-reveal > * {
  transition: inline-size 250ms ease-in-out;
}

details.gare\:est > ff-reveal,
.l\:reveal > .collapsed > ff-reveal {
  --collapse-x: calc(100% + var(--sidebar-width));
  transform: translate(var(--collapse-x), 0);
  transition: transform 250ms ease-in-out;
}

/**
 * GARE NORD
 */
details.gare\:nord > ff-reveal,
.l\:reveal > .collapsed > ff-reveal {
  --collapse-y: calc(-1 * var(--ui-header-height));
  transform: translate(0, var(--collapse-y));
  transition: transform 250ms ease-in-out 200ms;
}

details.gare\:nord > ff-reveal > *,
.l\:reveal > .collapsed > ff-reveal > * {
  transition: block-size 200ms ease-in-out;
}

details[open].gare\:nord > ff-reveal,
.l\:reveal.gare\:nord > .expanded > ff-reveal {
  --collapse-y: 0;
  transition: transform 200ms ease-out;
}

details[open].gare\:nord > ff-reveal > *,
.l\:reveal > .expanded > ff-reveal > * {
  transition: block-size 250ms ease-in-out 200ms;
}

@media screen and (min-width: 620px) {
  details[class*="gare:"] > ff-reveal,
  .l\:reveal[class*="gare:"] > .expanded > ff-reveal {
    --collapse-x: 0;
  }
}
/**
 * ZONE 3
 * Contains main app context
 */
.exchange > .context {
  --max-block-size: calc(100vh - 2 * var(--ui-header-height) - var(--grid-gap));
  grid-area: context;
  grid-template-columns: subgrid;
  z-index: var(--layout-z-index-layer);
}

.exchange > .context > .app-context {
  grid-template-columns: subgrid;
  align-items: center;
  justify-content: start;
  inline-size: 100%;
}

.exchange > .context > details.app-context {
  padding-block: 0;
}

.exchange > .context > .app-context ff-reveal {
  display: flex;
  align-items: center;
}

.exchange > .context > .app-context.expanded ff-reveal {
  position: absolute;
  top: var(--ui-header-height);
  right: var(--size-base-3xs);
  box-shadow: var(--shadow-md);
  padding-block: var(--size-base-2xs) var(--size-base-3xs);
  padding-inline: var(--size-base-3xs);
}

/* This form contains the actual settings */
.exchange > .context > .app-context > form > button {
  inline-size: 100%;
}

/* This form contains the actual settings */
.exchange > .context > .app-context > form {
  display: flex;
  justify-content: flex-end;
}

/* This form contains the actual settings */
.exchange > .context > .app-context ff-reveal > form {
  display: flex;
  padding-inline: var(--outline-offset-lg) 0;
  padding-block: 0;
  gap: var(--outline-offset-lg);
}

/* This list contains links */
.exchange > .context > .app-context ff-reveal ul {
  padding-inline: var(--outline-offset-lg);
}

@media screen and (min-width: 620px) {
  /* This form contains the actual settings */
  .exchange > .context > .app-context > form {
    display: none;
  }
  .exchange > .context {
    z-index: initial;
  }
  .exchange > .context > .app-context:is(.collapsed, .expanded) ff-reveal {
    box-shadow: unset;
    position: unset;
    grid-column: span 3;
    padding-inline: var(--size-base-3xs);
  }
  .exchange > .context > .app-context ff-reveal {
    --gap: var(--size-base-3xs);
    display: flex;
    justify-content: flex-start;
  }
  .exchange > .context > .app-context:not(details) ff-reveal {
    position: unset;
  }
}
@media screen and (min-width: 935px) {
  .exchange > .context,
  .exchange > .context > .app-context:is(.collapsed, .expanded) ff-reveal {
    justify-content: flex-end;
  }
  /* This form contains the actual settings */
  .exchange > .context > .app-context ff-reveal > form {
    padding-inline: var(--outline-offset-lg) var(--outline-offset-sm);
    padding-block: var(--outline-offset-lg);
  }
}
@media screen and (min-width: 1100px) {
  .exchange > .context {
    grid-column-start: 5;
  }
  .exchange > .context > .app-context {
    grid-column: span 3;
  }
}
[class*="l:sidebar"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

/* This Centers content in the sidebar's main section */
/* TODO: Figure out how to handle this better (use container query ?)
 * Currently used for media page: see also blocks/media.css
 */
@media (min-width: 800px) {
  [class*="l:sidebar"].justify\:center > [class*="l:main"] > * {
    inline-size: calc(100% - var(--sidebar-width) + var(--gap));
    margin-inline-start: 0;
  }
  [class*="l:sidebar"].justify\:center.end > [class*="l:main"] > * {
    margin-inline-start: initial;
    margin-inline-end: 0;
  }
}
/* NOTE: The following declaration assume that the markup declares .main before .side */
[class*="l:sidebar"].start {
  flex-direction: row;
}

/* TODO: not sure this rule is necessary */
[class*="l:sidebar"].end {
  flex-direction: row-reverse;
}

/* TODO: not sure this rule is necessary */
[class*="l:sidebar"].end\:reverse {
  flex-wrap: wrap-reverse;
}

[class*="l:sidebar"].hug {
  max-inline-size: var(--main-width);
}

[class*="l:main"] {
  flex-basis: 0;
  flex-grow: 999;
  /* ~ min-width in horizontal\:tb writing mode: if (width < 70%) -> wrap */
  --main-width: 70%;
  min-inline-size: var(--main-width);
}

[class*="l:main"] > main {
  block-size: 100%;
}

/* adjusts to width of contents */
.l\:side {
  flex-grow: 1;
  flex-basis: var(--sidebar-width);
  transition: flex-basis 250ms ease-in-out;
}

/* adjusts to width of sibling (main) */
.l\:side.hug {
  flex-grow: 0;
  flex-basis: fit-content;
}

/* Scale Sidebar */
.l\:sidebar.size\:2xs {
  --gap: var(--size-base-sm);
  --sidebar-width: var(--layout-sidebar-2xs);
}

.l\:sidebar.size\:2xs > [class*="l:main"] {
  --gap: var(--size-base-sm);
  --sidebar-width: var(--layout-sidebar-2xs);
}

.l\:sidebar.size\:xs {
  --gap: var(--size-base-sm);
  --sidebar-width: var(--layout-sidebar-xs);
}

.l\:sidebar.size\:xs > [class*="l:main"] {
  --gap: var(--size-base-sm);
  --sidebar-width: var(--layout-sidebar-xs);
}

.l\:sidebar.size\:sm {
  --gap: var(--size-base-md);
  --sidebar-width: var(--layout-sidebar-sm);
}

.l\:sidebar.size\:sm > [class*="l:main"] {
  --gap: var(--size-base-md);
  --sidebar-width: var(--layout-sidebar-sm);
}

.l\:sidebar.size\:md {
  --gap: var(--size-base-md);
  --sidebar-width: var(--layout-sidebar-md);
}

.l\:sidebar.size\:md > [class*="l:main"] {
  --gap: var(--size-base-md);
  --sidebar-width: var(--layout-sidebar-md);
}

.l\:sidebar.size\:lg {
  --gap: var(--size-base-lg);
  --sidebar-width: var(--layout-sidebar-lg);
}

.l\:sidebar.size\:lg > [class*="l:main"] {
  --gap: var(--size-base-lg);
  --sidebar-width: var(--layout-sidebar-lg);
}

.l\:sidebar.size\:xl {
  --gap: var(--size-base-lg);
  --sidebar-width: var(--layout-sidebar-xl);
}

.l\:sidebar.size\:xl > [class*="l:main"] {
  --gap: var(--size-base-lg);
  --sidebar-width: var(--layout-sidebar-xl);
}

.l\:sidebar.size\:2xl {
  --gap: var(--size-base-lg);
  --sidebar-width: var(--layout-sidebar-2xl);
}

.l\:sidebar.size\:2xl > [class*="l:main"] {
  --gap: var(--size-base-lg);
  --sidebar-width: var(--layout-sidebar-2xl);
}

/* Scale Sidebar > Main */
.l\:main\:30 {
  --main-width: 30%;
}

.l\:main\:40 {
  --main-width: 40%;
}

.l\:main\:50 {
  --main-width: 50%;
}

.l\:main\:60 {
  --main-width: 60%;
}

.l\:main\:70 {
  --main-width: 70%;
}

.l\:main\:80 {
  --main-width: 80%;
}

.l\:main\:90 {
  --main-width: 90%;
}

/**
 * ZONE 2
 * Left Sidebar contains secondary navigation
 */
.exchange > .sidebar {
  --max-block-size: calc(100vh - 2 * var(--ui-header-height) - var(--grid-gap));
  grid-area: sidebar;
  grid-template-areas: "gare-control" "gare-depot";
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  z-index: var(--layout-z-index-layer);
}

.exchange > .sidebar > .gare-control {
  grid-area: gare-control;
  grid-template-columns: subgrid;
}

.exchange > .sidebar > .gare-depot {
  grid-area: gare-depot;
  grid-template-columns: subgrid;
  grid-row: span 2;
}

.exchange > .sidebar > .app-name ff-callout {
  border-top: var(--border-width-md) dotted var(--shade);
  border-radius: 0;
}

.exchange > .sidebar > .app-name ff-callout ff-icon {
  display: none;
}

.exchange > .sidebar > .app-name,
.exchange > .sidebar:has(.app-name),
.exchange > .sidebar [name=sidebar] > [class*="l:switcher"],
.exchange > .sidebar > .collapsed > [name=sidebar],
.exchange > .sidebar > .collapsed > [name=sidebar] > [class*="l:switcher"] {
  inline-size: 100%;
  font-family: var(--font-family-heading);
}

@media screen and (min-width: 620px) {
  .exchange.swap > .sidebar {
    padding-inline-start: 0;
  }
  .exchange > .sidebar > .app-name,
  .exchange > .sidebar:has(.app-name) {
    inline-size: 100%;
    max-inline-size: var(--sidebar-width);
  }
  .exchange > .sidebar [name=sidebar] > [class*="l:switcher"] {
    gap: 0;
  }
  .exchange > .sidebar.width\:lg,
  .exchange > .sidebar.width\:lg:is([open], .expanded) > ff-reveal,
  .exchange > .sidebar.width\:xl,
  .exchange > .sidebar.width\:xl:is([open], .expanded) > ff-reveal,
  .exchange > .sidebar > ff-reveal {
    --sidebar-width: var(--layout-sidebar-md);
  }
}
@media screen and (min-width: 935px) {
  .exchange > .sidebar [class*="gare:"].width\:xl,
  .exchange > .sidebar:is([open], .expanded) > ff-reveal {
    --overlay-block-size: var(--overlay-height-sm);
  }
}
@media screen and (min-width: 1100px) {
  .exchange > .sidebar {
    z-index: initial;
  }
  .exchange > .sidebar > .app-name,
  .exchange > .sidebar > details {
    grid-column: span 3;
  }
  .exchange > .sidebar > .app-name,
  .exchange > .sidebar > nav,
  .exchange > .sidebar > nav > form {
    inline-size: 100%;
    max-inline-size: var(--overlay-inline-size);
    padding-inline-end: calc(var(--grid-gap) - var(--outline-offset-md));
  }
  .exchange > .sidebar > .app-name {
    padding-inline-end: calc(var(--grid-gap) + var(--outline-offset-md));
  }
  .exchange > .sidebar > .app-name ff-callout ff-icon {
    display: block;
  }
  .exchange > .sidebar:is([open], .expanded) > ff-reveal,
  .exchange > .sidebar:is([open], .expanded) > ff-reveal {
    --overlay-inline-size: calc(var(--sidebar-width) + 3 * var(--grid-gap));
    left: calc(2 * var(--grid-gap));
    right: unset;
    grid-row-start: 1;
  }
  .exchange > .sidebar.width\:lg,
  .exchange > .sidebar.width\:lg:is([open], .expanded) > ff-reveal,
  .exchange > .sidebar > ff-reveal {
    --sidebar-width: var(--layout-sidebar-md);
    --overlay-block-size: var(--max-block-size);
  }
  .exchange > .sidebar.width\:full > ff-reveal {
    --sidebar-lg: calc(
    	100vw - var(--sidebar-width) - 4 * var(--grid-gap) -
    		var(--outline-offset-lg)
    );
    --overlay-inline-size: var(--sidebar-lg);
    --overlay-block-size: var(--overlay-height-sm);
  }
  .exchange > .sidebar > .app-name,
  .exchange > .sidebar:has(.app-name),
  .exchange > .sidebar [name=sidebar] > [class*="l:switcher"],
  .exchange > .sidebar > .collapsed > [name=sidebar],
  .exchange > .sidebar > .collapsed > [name=sidebar] > [class*="l:switcher"] {
    inline-size: var(--overlay-inline-size);
  }
}
.col\:center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.max\:w\:full {
  max-inline-size: 100%;
}

.w\:full {
  inline-size: 100%;
}

.w\:auto {
  inline-size: auto;
  max-inline-size: 100%;
}

.l\:flex.hug > * {
  inline-size: fit-content;
}

.l\:flex.grow > *,
.l\:flex .grow {
  flex-grow: 1;
}

[class*="align-self:"] {
  align-self: var(--align-self, auto);
}

.align-self\:start {
  --align-self: start;
}

.align-self\:end {
  --align-self: end;
}

.align-self\:center {
  --align-self: center;
}

.align-self\:stretch {
  --align-self: stretch;
}

[class*="align:"] {
  align-items: var(--align-items, auto);
}

.align\:start {
  --align-items: start;
}

.align\:end {
  --align-items: end;
}

.align\:center {
  --align-items: center;
}

.align\:baseline {
  --align-items: baseline;
}

[class*="align-content:"] {
  align-content: var(--align-content, auto);
}

.align-content\:start {
  --align-content: start;
}

.align-content\:end {
  --align-content: end;
}

.align-content\:center {
  --align-content: center;
}

.align-content\:stretch {
  --align-content: stretch;
}

[class*="justify:"] {
  justify-content: var(--justify, auto);
}

.justify\:end {
  --justify: flex-end;
}

.justify\:start {
  --justify: flex-start;
}

.justify\:center {
  --justify: center;
}

.justify\:stretch {
  --justify: stretch;
}

.justify\:evenly {
  --justify: space-evenly;
}

.justify\:around {
  --justify: space-around;
}

.justify\:between {
  --justify: space-between;
}

[class*="justify-self:"] {
  justify-self: var(--justify-self, auto);
}

.justify-self\:start {
  --justify-self: start;
}

.justify-self\:end {
  --justify-self: end;
}

.justify-self\:end {
  --justify-self: end;
}

[class*="text:"] {
  text-align: var(--text-align, auto);
}

.text\:start {
  --text-align: start;
}

.text\:end {
  --text-align: end;
}

.text\:center {
  --text-align: center;
}

.exchange > .navbar {
  grid-area: navbar;
  grid-template-columns: subgrid;
}

.exchange > .navbar .expanded ff-reveal {
  position: absolute;
  top: var(--ui-header-height);
  left: calc(var(--outline-offset-sm) + var(--grid-gap));
  right: var(--grid-gap);
}

.exchange > .navbar > nav,
.exchange > .navbar > nav form,
.exchange > .navbar > nav [aria-expanded] {
  inline-size: 100%;
  max-inline-size: unset;
}

.exchange > .navbar > nav [aria-expanded] span {
  text-align: center;
}

@media screen and (min-width: 620px) {
  .exchange > .navbar {
    grid-column: span 1;
  }
  .exchange > .navbar > nav {
    justify-content: flex-start;
  }
  .exchange > .navbar > nav form {
    display: none;
  }
  .exchange > .zone\:1 .l\:reveal\:auto.bp\:xs .header-nav {
    block-size: fit-content;
  }
  .exchange > .navbar > .expanded > ff-reveal,
  .exchange > .navbar > .collapsed > ff-reveal {
    position: unset;
    margin: 0 auto;
    z-index: var(--layout-z-index-reveal);
    box-shadow: unset;
  }
}
@media screen and (min-width: 1100px) {
  .exchange > .navbar {
    grid-column-start: 4;
    padding-inline: calc(3 * var(--grid-gap)) 0;
  }
}
/**
 * ZONE 2
 * Left Sidebar contains secondary navigation
 */
.zone\:2 {
  grid-area: zone-2;
  grid-template-areas: "zone-main    zone-main    zone-main" "page-context page-context page-context";
  z-index: var(--layout-z-index-layer);
  block-size: fit-content;
  max-block-size: unset;
  padding-block-start: var(--grid-gap);
  /*
  TODO: rows for overlapping main on header (use w/ bg:blur)
  grid-row-start: 1;
  grid-row-end: 3; */
}

.zone\:2.scroll\:y {
  scrollbar-gutter: auto;
}

.zone\:2 > .page-context:not(.empty) {
  grid-area: page-context;
  position: relative;
  align-content: start;
  align-items: start;
  z-index: var(--layout-z-index-layer);
  padding-block-end: var(--grid-gap);
  padding-inline: calc(2 * var(--grid-gap)) var(--grid-gap);
}

.zone\:2 > .page-context.empty {
  --size-y: 0;
  block-size: 0;
  inline-size: 0;
  padding: 0;
}

@media screen and (min-width: 620px) {
  .zone\:2 {
    grid-template-areas: "zone-main zone-main page-context";
    grid-template-rows: 1fr;
    grid-template-columns: 1fr auto;
  }
  .zone\:2 > .page-context:not(.empty) {
    scrollbar-width: thin;
    padding-inline: 0 var(--grid-gap);
  }
  .zone\:2 > .page-context {
    box-shadow: unset;
    max-block-size: var(--max-block-size);
  }
  .zone\:2 > .page-context > nav > ul > li.ellipsis {
    max-inline-size: 100%;
  }
  .zone\:2 > .page-context > details {
    --max-inline-size: calc(var(--sidebar-width) - 3 * var(--grid-gap));
  }
}
@media screen and (min-width: 1100px) {
  .zone\:2 {
    grid-template-areas: "zone-main zone-main zone-main zone-main page-context page-context page-context";
    padding-inline: calc(4 * var(--grid-gap)) 0;
  }
  .zone\:2:has(dialog.zoomer[open]) {
    z-index: var(--layout-index-sticky);
  }
  .zone\:2.hug {
    grid-column-start: 1;
    grid-column-end: -1;
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .hug {
    grid-column-start: 4;
    grid-column-end: -1;
  }
}
/**
 * ZONE 1
 * Contains main navigation
 */
.zone\:1.exchange {
  grid-area: zone-1;
  grid-template-areas: "sidebar navbar context";
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-auto-flow: row;
  z-index: var(--layout-z-index-reveal);
  padding-inline: var(--outline-offset-lg);
}

.zone\:1.exchange details > summary {
  display: block;
}

.swap.exchange {
  grid-template-areas: " navbar sidebar context";
}

@media screen and (min-width: 620px) {
  .swap.exchange {
    grid-template-areas: "sidebar navbar context";
  }
}
@media screen and (min-width: 935px) {
  .zone\:1.exchange {
    padding-inline: var(--grid-gap);
  }
}
@media screen and (min-width: 1100px) {
  .zone\:1.exchange,
  .swap.exchange {
    overflow: unset;
    padding-inline: calc(2 * var(--grid-gap)) 0;
    grid-template-areas: "sidebar sidebar sidebar navbar context context context";
  }
}
.zone\:main {
  grid-area: zone-main;
  grid-template-areas: "page-header" "page-main";
  grid-template-rows: auto 1fr;
  max-block-size: unset;
}

.zone\:main > .page-header {
  grid-area: page-header;
  block-size: fit-content;
  padding-inline: calc(2 * var(--grid-gap));
  padding-block-start: calc(var(--ui-header-height) + 2 * var(--size-base-3xs));
}

.zone\:main > .page-main {
  grid-area: page-main;
  padding-block-end: var(--grid-gap);
  padding-inline: calc(2 * var(--grid-gap));
}

@media screen and (min-width: 620px) {
  .zone\:main {
    padding-block-start: var(--ui-size-lg);
    max-block-size: var(--max-block-size);
  }
  .zone\:main > .page-header {
    padding-block-start: calc(2 * var(--size-base-3xs));
  }
}
@media screen and (min-width: 935px) {
  .zone\:main {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .hug .steam.zone\:main,
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .hug .tram.zone\:main {
    grid-column-start: 1;
  }
}
.ink\:white {
  /* Set current color LIGHTNESS and CHROMA according to a 7 point scale */
  --lightness-contrast-base: var(--color-lightness-600);
  --chroma-contrast-base: var(--color-chroma-600);
}

.ink\:primary {
  /* Set current color LIGHTNESS and CHROMA according to a 7 point scale */
  --hue: var(--color-theme-primary);
  color: var(--ink);
}

/**
 * Grid Urbanist Layout
 */
.l\:grid\:urbanist {
  --max-block-size: calc(
  	100vh - 2 * var(--ui-header-height) - 2 * var(--grid-gap)
  );
  --sidebar-track-sm: var(--layout-sidebar-collapsed);
  --sidebar-track-md: calc(
  	var(--layout-sidebar-sm) - var(--layout-sidebar-collapsed)
  );
  --sidebar-track-lg: calc(var(--layout-sidebar-md) - var(--layout-sidebar-sm));
  grid-template-areas: "zone-1  zone-1  zone-1" "zone-2  zone-2  zone-2" "zone-3  zone-3  zone-3";
  grid-template-columns: calc(var(--sidebar-track-sm) + 3 * var(--grid-gap)) 1fr calc(var(--sidebar-track-sm) + 3 * var(--grid-gap));
  grid-template-rows: var(--ui-header-height) 1fr auto;
}

.l\:grid\:urbanist [class*="zone:"] {
  border-radius: 0;
}

.l\:grid\:urbanist [class*="zone:2"] > nav > form > [aria-expanded],
.l\:grid\:urbanist .navbar > nav > form > [aria-expanded],
.l\:grid\:urbanist .app-context > form > [aria-expanded] {
  margin: 0;
  font-family: var(--font-family-heading);
}

@media screen and (min-width: 620px) {
  .l\:grid\:urbanist {
    --sidebar-width: var(--layout-sidebar-sm);
  }
  .l\:grid\:urbanist.voyager,
  .l\:grid\:urbanist.steam {
    --max-block-size: calc(
    	100vh - 2 * var(--ui-header-height) - 3 * var(--grid-gap)
    );
  }
}
@media screen and (min-width: 690px) {
  .l\:grid\:urbanist {
    --sidebar-width: var(--layout-sidebar-md);
  }
}
@media screen and (min-width: 1100px) {
  .l\:grid\:urbanist {
    grid-template-areas: "zone-1  zone-1  zone-1  zone-1  zone-1  zone-1  zone-1" "zone-2  zone-2  zone-2  zone-2  zone-2  zone-2  zone-2" "zone-3  zone-3  zone-3  zone-3  zone-3  zone-3  zone-3";
    grid-template-columns: var(--sidebar-track-sm) var(--sidebar-track-md) var(--sidebar-track-lg) 1fr var(--sidebar-track-lg) var(--sidebar-track-md) var(--sidebar-track-sm);
  }
}
[class*="l:flex"] {
  --gap: var(--ui-size);
  display: flex;
  flex-wrap: wrap;
  align-items: var(--align-items, center);
  gap: var(--gap);
}

.l\:flex.reverse {
  flex-direction: row-reverse;
}

.l\:flex.nowrap {
  flex-wrap: nowrap;
}

.l\:flex.grow > * {
  flex-grow: 1;
}

.grow\:0 {
  flex-grow: 0;
}

.grow\:1 {
  flex-grow: 1;
}

.wrap\:reverse {
  flex-wrap: wrap-reverse;
}

[class*="l:flex"].size\:2xs {
  --gap: var(--size-base-2xs);
}

[class*="l:flex"].size\:xs {
  --gap: var(--size-base-xs);
}

[class*="l:flex"].size\:sm {
  --gap: var(--size-base-sm);
}

[class*="l:flex"].size\:md {
  --gap: var(--size-base-md);
}

[class*="l:flex"].size\:lg {
  --gap: var(--size-base-lg);
}

[class*="l:flex"].size\:xl {
  --gap: var(--size-base-xl);
}

[class*="l:flex"].size\:2xl {
  --gap: var(--size-base-2xl);
}

/**
 * Grid Urbanist Layout
 */
html:has(.l\:grid\:urbanist) {
  --hue: var(--color-theme-primary);
  --lightness-scrollbar: var(--lightness-base);
  --chroma-scrollbar: var(--chroma-base);
  --track: oklch(var(--lightness-scrollbar) var(--chroma-scrollbar) var(--hue));
  --thumb: var(--accent);
  block-size: -webkit-fill-available;
  scrollbar-width: thin;
  scrollbar-color: var(--thumb) var(--track);
  scrollbar-gutter: stable;
}

body:has(.l\:grid\:urbanist) {
  min-block-size: 100vh;
  min-block-size: -webkit-fill-available;
}

.l\:grid\:urbanist {
  inline-size: fit-content;
  max-inline-size: 100%;
  block-size: fit-content;
  min-block-size: 100vh;
  block-size: -webkit-fill-available;
  position: relative;
  grid-gap: 0; /* Override gap only in parent grid */
  min-inline-size: 100%;
}

[class*="emoji:"]::before {
  --icon-size: var(--font-size);
  font-size: var(--icon-size);
  display: inline;
  inline-size: fit-content;
  block-size: fit-content;
}

[class*="shape:"][class*=emoji] {
  --icon-gap: var(--ui-size-sm);
  padding: var(--icon-gap);
}

.shape\:pill[class*=emoji]::before {
  margin-inline-end: var(--outline-offset-lg);
}

[class*="emoji:"]:not([class*="justify:"], [class*="l:frame"])::before {
  margin-inline: var(--icon-gap, var(--ui-size-sm));
}

[class*="emoji:"].justify\:start::before {
  margin-inline-end: var(--icon-gap, var(--ui-size-sm));
}

[class*="emoji:"].justify\:end::before {
  margin-inline-start: var(--icon-gap, var(--ui-size-sm));
}

/**
 * ZONE 4
 * Contains main content & page context
 */
.urbanist.zone\:2 {
  grid-template-areas: "zone-main";
}

@media screen and (min-width: 1100px) {
  .zone\:2 {
    grid-column-start: 4;
  }
  .urbanist.hug {
    grid-column-start: 1;
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .urbanist.hug {
    grid-column-start: 4;
  }
}
.metro.zone\:main {
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr;
  grid-column-start: 1;
  grid-column-end: -1;
  min-block-size: unset;
}

.metro.zone\:main > .page-header {
  grid-column-start: 1;
  grid-column-end: -1;
}

.metro.zone\:main > .page-main {
  grid-column-start: 1;
  grid-column-end: -1;
}

@media screen and (min-width: 620px) {
  .metro.zone\:main {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}
@media screen and (min-width: 1100px) {
  .metro.zone\:main {
    grid-column-start: 1;
    grid-column-end: 5;
  }
  .exchange ~ .metro.zone\:2.hug .page-context:not(.empty) {
    grid-column-start: 5;
    grid-column-end: -1;
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .hug .metro.zone\:main {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .hug .page-context:not(.empty) {
    grid-column-start: 2;
  }
}
[class*=ravioli] {
  padding: var(--ravioli-size);
}

[class*="ravioli:feature"] {
  padding-block-start: var(--gap);
}

[class*=ravioli] {
  --ratio: var(--size-ratio-md);
  /* Default range */
  --ravioli-size-sm: calc(var(--ravioli-size) / var(--ratio));
  --ravioli-size-lg: calc(var(--ravioli-size) * var(--ratio));
}

/* Minor range */
[class*="ravioli:"].scale\:minor {
  --ratio: var(--size-ratio-sm);
}

/* Major range */
[class*="ravioli:"].scale\:major {
  --ratio: var(--size-ratio-lg);
}

.raviolink {
  /* Base size */
  --ravioli-size: var(--border-width-xl);
}

.ravioli\:3xs {
  /* Base size */
  --ravioli-size: var(--size-base-3xs);
}

.ravioli\:2xs {
  /* Base size */
  --ravioli-size: var(--size-base-2xs);
}

.ravioli\:xs {
  /* Base size */
  --ravioli-size: var(--size-base-xs);
}

.ravioli\:sm {
  /* Base size */
  --ravioli-size: var(--size-base-sm);
}

.ravioli\:md {
  /* Base size */
  --ravioli-size: var(--size-base-md);
}

.ravioli\:lg {
  /* Base size */
  --ravioli-size: var(--size-base-lg);
}

.ravioli\:xl {
  /* Base size */
  --ravioli-size: var(--size-base-xl);
}

.ravioli\:2xl {
  /* Base size */
  --ravioli-size: var(--size-base-2xl);
}

.railway.exchange > .context {
  --max-block-size: calc(100vh - var(--ui-header-height) - var(--grid-gap));
}

/**
 * ZONE 4
 * Contains main content page context
 */
.railway.zone\:2 {
  grid-template-rows: 1fr auto;
  grid-template-columns: subgrid;
}

.railway.zone\:2 > .page-context {
  max-block-size: var(--overlay-height-2xs);
}

@media screen and (min-width: 620px) {
  .railway.zone\:2 > .page-context:not(.empty) {
    max-block-size: var(--max-block-size);
  }
}
.font\:2xs,
.font\:xs {
  --font-size: var(--font-size-xs);
  --font-size-minus: var(--font-size-xs);
}

.font\:2xs {
  --font-size-plus: var(--font-size-xs);
}

.font\:xs {
  --font-size-plus: var(--font-size-sm);
}

.font\:sm {
  --font-size: var(--font-size-sm);
  --font-size-minus: var(--font-size-xs);
  --font-size-plus: var(--font-size-md);
}

.font\:md {
  --font-size: var(--font-size-md);
  --font-size-minus: var(--font-size-sm);
  --font-size-plus: var(--font-size-lg);
}

.font\:lg {
  --font-size: var(--font-size-lg);
  --font-size-minus: var(--font-size-md);
  --font-size-plus: var(--font-size-xl);
}

.font\:xl {
  --font-size: var(--font-size-xl);
  --font-size-minus: var(--font-size-lg);
  --font-size-plus: var(--font-size-2xl);
}

.font\:2xl {
  --font-size: var(--font-size-2xl);
  --font-size-minus: var(--font-size-xl);
  --font-size-plus: calc(var(--font-size-2xl) * var(--size-ratio-md));
}

[class*="font:"]:not(h1, h2, h3, h4, h5, h6) {
  font-size: var(--font-size);
}

[class*="font:"][class*=":minus"]:not(h1, h2, h3, h4, h5, h6) {
  font-size: var(--font-size-minus);
}

[class*="font:"][class*=":plus"]:not(h1, h2, h3, h4, h5, h6) {
  font-size: var(--font-size-plus);
}

.span.row\:2 {
  grid-row: span 2;
}

.span.column\:2 {
  grid-column: span 2;
}

.span.row\:3 {
  grid-row: span 3;
}

.span.column\:3 {
  grid-column: span 3;
}

.steam.zone\:main {
  grid-column: span 3;
  grid-template-rows: auto 1fr;
  min-block-size: unset;
  align-content: start;
  max-block-size: var(--overlay-height-md);
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

@media screen and (min-width: 620px) {
  .steam.zone\:main {
    grid-column-start: 1;
    grid-column-end: 3;
    max-block-size: var(--max-block-size);
    scrollbar-width: thin;
  }
}
@media screen and (min-width: 1100px) {
  .steam.zone\:main {
    grid-column-start: 1;
    grid-column-end: 5;
    max-block-size: var(--max-block-size);
    padding-inline-end: calc(2 * var(--grid-gap));
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .hug .steam.zone\:main {
    grid-column-start: 1;
    grid-column-end: 2;
  }
}
/**
 * ZONE 3
 * Contains main content & page context
 */
@media screen and (min-width: 620px) {
  .tram.zone\:2 > .page-context {
    max-block-size: var(--max-block-size);
  }
}
@media screen and (min-width: 1100px) {
  .tram.zone\:2 {
    grid-template-columns: subgrid;
  }
  .tram.zone\:2 > .page-context {
    max-block-size: var(--max-block-size);
  }
  .exchange ~ .tram.hug .page-context:not(.empty) {
    grid-column-start: 5;
    grid-column-end: -1;
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .tram.hug {
    grid-column-start: 4;
    grid-column-end: -1;
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .tram.hug .page-context:not(.empty) {
    grid-column-start: 2;
  }
}
/**
 * ZONE 3
 * Contains main footer and cookies settings access
 */
.zone\:3 {
  grid-area: zone-3;
  grid-template-areas: "footer footer footer";
  grid-template-columns: subgrid;
  block-size: fit-content;
  padding-block: var(--grid-gap);
}

.zone\:3 > footer {
  display: grid;
  grid-area: footer;
  grid-template-areas: "..... footer-content footer-actions";
  grid-template-columns: subgrid;
  grid-template-columns: var(--ui-header-height) 1fr var(--ui-header-height);
  padding-inline: var(--grid-gap);
  padding-block: 0;
}

.zone\:3 > footer .footer-content {
  display: grid;
  grid-area: footer-content;
  padding-inline: var(--grid-gap);
  padding-block: 0;
}

.zone\:3 > footer .footer-actions {
  display: grid;
  grid-area: footer-actions;
  padding-inline: var(--grid-gap);
  padding-block: 0;
  align-content: center;
  justify-items: end;
}

@media screen and (min-width: 1100px) {
  .zone\:3 {
    grid-template-areas: "footer footer footer footer footer footer footer";
  }
  .zone\:3 > footer {
    grid-template-areas: "..... ..... ..... footer-content footer-actions footer-actions footer-actions";
    grid-template-columns: subgrid;
  }
  .zone\:3 > footer .footer-content {
    grid-column-start: 4;
    grid-column-end: 5;
  }
  .zone\:3 > footer .footer-actions {
    grid-column-start: 5;
    grid-column-end: -1;
  }
}
.tram.zone\:main {
  grid-column: span 3;
  min-block-size: unset;
}

@media screen and (min-width: 620px) {
  .tram.zone\:main {
    grid-column-start: 1;
    grid-column-end: 3;
    block-size: auto;
    max-block-size: var(--max-block-size);
  }
}
@media screen and (min-width: 1100px) {
  .tram.zone\:main {
    grid-column-start: 1;
    grid-column: span 4;
    padding-inline-end: calc(2 * var(--grid-gap));
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .zone\:2.hug .tram.zone\:main {
    grid-column: span 1;
  }
}
/**
 * ZONE 4
 * Contains main content & page context
 */
.metro.zone\:2 {
  grid-template-columns: 1fr auto;
}

@media screen and (min-width: 620px) {
  .metro.zone\:2 {
    grid-template-rows: 1fr;
  }
}
@media screen and (min-width: 935px) {
  .metro.zone\:2 > .page-context {
    position: unset;
    box-shadow: unset;
  }
  .metro.zone\:2 > .page-context > nav > ul > li.ellipsis {
    max-inline-size: 100%;
  }
}
@media screen and (min-width: 1100px) {
  .metro.zone\:2 {
    grid-template-columns: subgrid;
  }
}
/**
 * ZONE 2
 * Contains main content & page context
 */
.voyager.zone\:2 {
  grid-template-areas: "zone-main";
}

@media screen and (min-width: 620px) {
  .voyager.zone\:2 > .page-context > * {
    --max-inline-size: calc(100% - 3 * var(--grid-gap));
    inline-size: 100%;
  }
  .voyager.zone\:2 > .page-context > details {
    --max-inline-size: calc(
    	100% - 4 * var(--grid-gap) - var(--outline-offset-lg)
    );
  }
}
/**
 * ZONE 2
 * Contains main content & page context
 */
.tgv.zone\:2 {
  --grid-gap: 0;
  grid-template-areas: "zone-main";
  grid-template-rows: subgrid;
  max-block-size: var(--max-block-size);
}

@media screen and (min-width: 620px) {
  .tgv.zone\:2 {
    padding-inline: 0;
  }
}
@media screen and (min-width: 1100px) {
  .tgv.zone\:2 {
    grid-column-start: 1;
  }
}
@layer config.debug {
  .debug[class^="l:"] {
    outline: var(--border-width-md) dotted var(--ink);
    background-color: var(--ink);
  }
}
.urbanist.zone\:main {
  grid-template-rows: auto 1fr;
  grid-template-columns: subgrid;
  grid-column: span 3;
  min-block-size: unset;
}

@media screen and (min-width: 1100px) {
  .urbanist.zone\:main {
    grid-column: span 7;
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .zone\:2.hug .urbanist.zone\:main {
    grid-column: span 4;
  }
}
nav ul {
  list-style: none;
  padding-inline: 0;
  margin-inline: 0;
}

nav > ul {
  padding-block: var(--ui-size);
}

/* == Keep nav links to one line with ellipsis == */
nav li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-block: var(--outline-offset-lg);
  padding-inline: var(--size-base-3xs);
  margin-block: 0;
  line-height: var(--font-leading-nav);
}

nav > ul ul li:has(ul) {
  padding-inline-start: var(--outline-offset-settings);
  padding-block-end: var(--outline-offset-settings);
}

nav li a {
  font-weight: var(--font-weight-link);
  font-size: var(--font-size-ui);
  text-overflow: ellipsis; /* TODO: find out why I need to repeat ellipsis in <li> and <a> */
  overflow: hidden;
  text-decoration: none;
  margin-inline: var(--size-base-2xs);
  min-width: 1em;
  margin: var(--outline-offset-sm);
  inline-size: 100%;
  max-inline-size: 100%;
}

.reveal-nav {
  container-type: inline-size;
  inline-size: 100%;
  padding-block-start: var(--outline-offset-lg);
}

nav a:hover {
  --lightness: var(--color-lightness-300);
  --lightness-contrast: var(--color-lightness-400);
}

nav a[class*="surface:0"]:hover {
  --lightness: var(--lightness-surface-2);
  --lightness-contrast: var(--lightness-surface-2-contrast);
  --chroma: var(--chroma-surface-2);
  --chroma-contrast: var(--chroma-surface-2-contrast);
}

nav a:focus {
  outline-offset: var(--outline-offset-sm);
}

nav li a:visited {
  --lightness: var(--color-lightness-500);
  --lightness-contrast: var(--color-lightness-500);
  font-weight: var(--font-weight-semibold);
}

/* == RevealNav (tree-like navigation menus) == */
ul.depth-1 {
  --grid-gap: var(--outline-offset-lg);
  padding-inline-start: 0;
}

ul.depth-2 {
  padding-inline: calc(2 * var(--ui-size-sm)) var(--outline-offset-sm);
}

ul.depth-3 {
  padding-inline-start: calc(3 * var(--ui-size));
}

ul.depth-4 {
  padding-inline-start: calc(4 * var(--ui-size));
}

/* override Active Link styles for top level link */
ul.depth-0 {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

ul.depth-0 > li {
  padding-block-end: calc(var(--ui-size-sm) - var(--outline-offset-sm));
}

/* override Active Link styles for top level link */
ul.depth-0 > li > a {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  padding-inline: 0;
}

/* == Link Overrides == */
/* Active Link */
nav li[aria-current=page] {
  /* Active Link */
}

nav li[aria-current=page] ul.depth-1 {
  --lightness: var(--lightness-base);
  --lightness-contrast: var(--lightness-contrast-base);
  --chroma: var(--chroma-base);
  --chroma-contrast: var(--chroma-contrast-base);
  --shade: oklch(var(--lightness) var(--chroma) var(--hue));
  --ink: oklch(var(--lightness-contrast) var(--chroma-contrast) var(--hue));
  --accent: oklch(var(--lightness-accent) var(--chroma-accent) var(--hue));
  color: var(--ink);
  background-color: var(--shade);
}

nav li[aria-current=page] > a {
  text-decoration-color: var(--accent);
}

nav li[aria-current=page] > ul a {
  text-decoration-color: var(--accent);
}

/* == Override heading styles for headings inside links == */
a[class*=ravioli] {
  text-decoration: none;
  margin-inline-end: 0;
}

/* == Override heading styles for headings inside links == */
a[class*=ravioli]:hover {
  text-decoration: underline;
}

.reveal-nav,
.reveal-nav.expanded {
  flex-basis: var(--sidebar-width);
}

.reveal-nav > nav {
  max-inline-size: calc(100% - 2 * var(--size-base-3xs));
}

.reveal-nav > nav {
  margin: 0 auto;
}

.reveal-nav > form [aria-expanded=true] ff-reveal {
  margin: 0;
  padding: 0;
  inline-size: fit-content;
}

.reveal-nav > form [aria-expanded=false] ff-reveal {
  inline-size: 0;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .reveal-nav .form\:expanded,
  .reveal-nav .form\:collapsed {
    max-inline-size: calc(100% - var(--ui-size-sm));
  }
  .reveal-nav.collapsed {
    --sidebar-width: calc(
    	var(--layout-sidebar-collapsed) + var(--ui-size-lg)
    );
  }
  .reveal-nav .form\:expanded > [aria-expanded] {
    inline-size: 100%;
  }
  [class*="l:reveal"].sticky ul.depth-0 {
    block-size: var(--y-size-sticky);
    overflow: hidden auto;
  }
  [class*="l:reveal"].sticky ul:not(.depth-0) {
    block-size: max-content;
  }
  [class*="l:reveal"].sticky > .expanded {
    --x-size: var(--sidebar-width);
    transition: inline-size 250ms ease-in-out;
    /* transition: transform 250ms ease-in-out; */
  }
  [class*="l:reveal"].sticky > ff-reveal.expanded {
    inline-size: 100%;
    transform: translateX(var(--size-base-3xs));
    transition: transform 250ms ease-in;
    transition: inline-size 250ms ease-in-out;
  }
  [class*="l:reveal"].sticky > ff-reveal.expanded > * {
    inline-size: 100%;
    transition: inline-size 250ms ease-in-out;
  }
  [class*="l:reveal"].sticky > .collapsed {
    --y-size: var(--ui-header-height);
    --x-size: calc(--sidebar-width);
  }
  [class*="l:reveal"].sticky > .collapsed ul > * {
    block-size: fit-content;
    inline-size: 100%;
    padding: calc(var(--ui-size-sm) / var(--size-ratio-lg));
    margin: 0;
    margin-block-start: var(--outline-offset-lg);
  }
  [class*="l:reveal"].sticky > ff-reveal.collapsed {
    --x-axis: calc(var(--x-size) * -1);
    inline-size: 100%;
    block-size: var(--y-size);
  }
}
/* Flex layout fallback */
[class*="l:grid"] {
  display: flex;
  flex-wrap: wrap;
  align-content: var(--align-content, stretch);
  justify-content: var(--justify-content, stretch);
}

[class*="l:grid"] {
  --grid-gap: 0;
  display: grid;
  grid-gap: var(--grid-gap);
}

/* Fix cell alignment in an end aligned grid */
[class*=":grid"][class*=":end"] > :empty,
[class*=":grid"][class*=":end"] > :only-child {
  order: -1;
}

/* flex layout fallback */
[class*=":grid"][class*=":end"] {
  flex-direction: row-reverse;
}

/* Pack grid: Use carefully, as this can create reading flow issues (ex: for image galleries is OK, for forms is not OK) */
[class*=":grid"].dense {
  grid-auto-flow: dense;
}

[class*="l:grid"].size\:3xs {
  --grid-gap: var(--size-base-3xs);
  --grid-item-size: var(--layout-grid-item-3xs);
}

[class*="l:grid"].size\:2xs {
  --grid-gap: var(--size-base-2xs);
  --grid-item-size: var(--layout-grid-item-2xs);
}

[class*="l:grid"].size\:xs {
  --grid-gap: var(--size-base-xs);
  --grid-item-size: var(--layout-grid-item-xs);
}

[class*="l:grid"].size\:sm {
  --grid-gap: var(--size-base-sm);
  --grid-item-size: var(--layout-grid-item-sm);
}

[class*="l:grid"].size\:md {
  --grid-gap: var(--size-base-md);
  --grid-item-size: var(--layout-grid-item-md);
}

[class*="l:grid"].size\:lg {
  --grid-gap: var(--size-base-lg);
  --grid-item-size: var(--layout-grid-item-lg);
}

[class*="l:grid"].size\:xl {
  --grid-gap: var(--size-base-xl);
  --grid-item-size: var(--layout-grid-item-xl);
}

[class*="l:grid"].size\:2xl {
  --grid-gap: var(--size-base-2xl);
  --grid-item-size: var(--layout-grid-item-2xl);
}

menu {
  display: flex;
  align-items: center;
  height: fit-content;
  padding: 0;
  list-style: none;
  background-color: inherit;
}

.menu > p {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-ui);
  line-height: 1;
  margin-block-end: var(--ui-size);
}

menu > li > * {
  inline-size: 100%;
}

/**
 * App header - Main Nav
 */
.header-app {
  position: relative;
}

.header-app .expanded > ff-reveal {
  --y-axis: calc(var(--ui-header-height) + var(--outline-offset-lg));
  --x-axis: calc(2 * var(--outline-offset-sm));
  position: absolute;
  top: var(--y-axis);
  block-size: fit-content;
  max-block-size: calc(100vh - var(--y-axis));
  overflow: auto;
  max-inline-size: calc(100vw - 2 * var(--x-axis));
  margin-block-start: var(--outline-offset-sm);
}

.header-app > [class*="l:main"] {
  min-inline-size: unset;
  flex-grow: 1;
}

.expanded > ff-reveal:has(.header-nav) {
  display: flex;
  left: var(--x-axis);
  right: var(--x-axis);
  box-shadow: var(--shadow-md);
}

.header-nav.l\:flex[class*=size] {
  --justify: space-evenly;
  --gap: var(--grid-gap, var(--size-base-xs));
  gap: var(--grid-gap, 0);
  padding-inline: var(--outline-offset-lg);
}

.header-nav.l\:flex[class*=size] li {
  background-color: inherit;
  border-block-start: var(--border-width-xl) solid transparent;
  inline-size: fit-content;
  padding-block: var(--outline-offset-md);
  padding-inline: var(--outline-offset-sm);
}

.header-nav.l\:flex[class*=size] li a {
  display: flex;
  block-size: calc(100% - 2 * var(--border-width-xl));
  inline-size: fit-content;
  text-transform: uppercase;
  padding-block: calc(var(--size-base-3xs) + var(--border-width-md));
  padding-inline: var(--gap, var(--size-base-2xs));
  line-height: var(--font-leading-ui);
}

.header-nav.l\:flex[class*=size] li[aria-current=page] {
  border-color: var(--accent);
}

.header-nav.l\:flex[class*=size] li[aria-current=page] a {
  text-decoration: none;
  background-color: inherit;
}

.header-app > [class*="l:side"] {
  flex-basis: content; /* property as content of flex container */
  flex-grow: 0;
}

.header-app > [class*="l:side"] menu li {
  display: flex;
  align-items: center;
}

article.box > header {
  border-bottom: var(--border-width-md) solid var(--ink);
}

[class*="l:grid"] > .box:hover {
  --lightness-contrast: var(--color-lightness-300);
  border-color: var(--ink);
}

[class*="l:grid"] > .box .content {
  padding: var(--ui-size-lg);
}

[class*="l:grid"] > .box:hover header {
  --lightness-contrast: var(--color-lightness-300);
  border-color: var(--ink);
}

[class*="l:grid"] > .box header .title {
  border-top-left-radius: var(--border-radius-base);
  border-top-right-radius: var(--border-radius-base);
}

[class*="l:grid"] > .box header .title::before {
  margin-inline: var(--ui-size-lg);
}

.page-nav li {
  padding: 0;
  margin: 0;
}

.breadcrumbs > ol {
  margin-block: 0;
}

.breadcrumbs > ol > li:has(a) {
  padding-inline: var(--outline-offset-lg);
}

.breadcrumbs > ol > li + li::before {
  content: "➜";
  padding: 0;
  color: var(--ink);
  font-weight: var(--font-weight-ui);
  line-height: 1;
}

.breadcrumbs > ol > li a {
  text-decoration: underline;
}

.breadcrumbs > ol > li a:hover {
  border: var(--border-width-px) solid var(--accent);
}

.railway.zone\:main {
  grid-column: span 3;
  grid-template-rows: auto 1fr;
  min-block-size: unset;
  align-content: start;
}

@media screen and (min-width: 620px) {
  .railway.zone\:main {
    grid-column: span 2;
    padding-inline-end: var(--grid-gap);
  }
}
@media screen and (min-width: 1100px) {
  .railway.zone\:main {
    grid-column-start: 1;
    grid-column-end: 5;
  }
}
.voyager.zone\:main {
  grid-template-columns: subgrid;
  grid-column: span 3;
  min-block-size: unset;
}

.voyager.zone\:main > .page-header,
.voyager.zone\:main > .page-main {
  grid-column: span 3;
}

@media screen and (min-width: 1100px) {
  .voyager.zone\:main {
    grid-column-start: 1;
    grid-column: span 4;
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .zone\:2.hug .voyager.zone\:main {
    grid-column-start: 4;
    grid-column: span 4;
  }
}
/* Scroll container */
[class*="scroll:"] {
  --lightness-scrollbar: var(--lightness-base);
  --chroma-scrollbar: var(--chroma-base);
  --track: oklch(var(--lightness-scrollbar) var(--chroma-scrollbar) var(--hue));
  --thumb: var(--accent);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--thumb) var(--track);
}

[class*="scroll:"].compact {
  scrollbar-gutter: unset;
}

.scroll\:y {
  --size-y: 100%;
  overflow: hidden auto;
  block-size: var(--size-y);
}

.scroll\:x {
  --size-x: 100%;
  overflow: auto hidden;
  inline-size: var(--size-x);
}

.scroll\:container:has(.scroll\:y) {
  overflow: hidden auto;
}

.scroll\:container:has(.scroll\:x) {
  overflow: auto hidden;
}

.scroll\:y.snap {
  scroll-snap-type: y;
}

.scroll\:x.snap {
  scroll-snap-type: x;
}

/* .scrollbar\:hide-y {
	width: calc(100% + 100px);
} */
.snap\:start {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-padding-block-start: var(--ui-size);
}

.snap\:center {
  scroll-snap-align: center;
  scroll-snap-stop: normal;
  scroll-padding-block: var(--ui-size);
}

/* Scroll content */
.snap\:start {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-padding-block-start: var(--ui-size);
}

.snap\:center {
  scroll-snap-align: center;
  scroll-snap-stop: normal;
  scroll-padding-block: var(--ui-size);
}

@media (prefers-reduced-motion: no-preference) {
  [class*="scroll:"] {
    scroll-behavior: smooth;
  }
}
[class*=":in"] {
  transition: opacity 200ms ease-in-out 150ms;
}

[class*=":out"] {
  transition: block-size 150ms ease-in-out;
}

.fade\:in {
  opacity: 1;
}

.fade\:out {
  opacity: 0;
}

.slide\:in {
  block-size: 100%;
}

.slide\:out {
  block-size: 0;
}

.scrolly.scroll\:container {
  position: sticky;
  background: linear-gradient(to bottom, transparent 0%, var(--color-shadow-primary) 100%);
  block-size: 100%;
}

.scrolly.scroll\:container {
  display: flex;
  flex-direction: column;
  gap: 20vh;
  justify-content: var(--justify, space-between);
  align-items: center;
  inline-size: 100%;
  scrollbar-color: var(--thumb) var(--track);
}

/*
TODO: padding for overlapping main on header (use w/ bg:blur)
.scroll\:title {
	padding-block-start: var(--ui-header-height);
} */
.scroll\:item {
  inline-size: auto;
  max-inline-size: 100%;
  padding: 0;
  min-block-size: 85vh;
}

.scroll\:item .media {
  position: relative;
}

.scroll\:item .item-link {
  position: absolute;
  top: 50%;
  right: 50%;
  z-index: 2;
  transform: translate(55%, 100%);
  transition: transform 300ms ease-in-out;
  min-inline-size: calc(var(--layout-sidebar-collapsed) / var(--size-ratio-md));
}

.scroll\:item .item-link ff-callout {
  filter: opacity(0.85);
  transition: filter 150ms ease-out;
}

.scroll\:item .item-link:focus {
  outline: var(--border-width-lg) dotted var(--color-magic-highlight);
}

.scroll\:item .item-link:hover ff-callout {
  filter: opacity(1);
  transition: filter 150ms ease-out;
}

.scroll\:item .item-link > * {
  inline-size: 100%;
  block-size: 100%;
}

.scrolly.scroll\:container[class*="l:frame"] {
  block-size: 85vh;
}

.scroll\:item .media {
  block-size: 100%;
  max-inline-size: var(--max-inline-size, var(--text-inline-size, 100%));
  margin-block: var(--size-base-2xl);
}

@media screen and (min-width: 600px) {
  .scroll\:item .item-link {
    transform: translate(53%, -15%);
    min-inline-size: calc(var(--layout-sidebar-collapsed) / var(--size-ratio-md) - 2 * var(--outline-offset-lg));
  }
}
@media screen and (min-width: 600px) and (max-height: 600px) {
  .scroll\:item .item-link {
    transform: translate(53%, -30%);
    min-inline-size: calc(var(--layout-sidebar-collapsed) / var(--size-ratio-md));
  }
}
@media screen and (min-width: 768px) {
  .scroll\:item {
    justify-content: var(--justify, flex-start);
  }
  .scroll\:item .media {
    margin-block: 0;
  }
}
@media screen and (min-width: 800px) and (max-height: 400px) {
  .scroll\:item .item-link {
    min-inline-size: calc(var(--layout-sidebar-collapsed) / var(--size-ratio-md) - 2 * var(--ui-size));
  }
}
@media screen and (min-width: 800px) and (min-height: 500px) {
  .scroll\:item .item-link {
    min-inline-size: calc(var(--layout-sidebar-collapsed) / var(--size-ratio-sm));
  }
}
@media screen and (min-width: 935px) and (min-height: 600px) {
  .scroll\:item .item-link {
    min-inline-size: var(--layout-sidebar-collapsed);
  }
}
[role=tablist] {
  padding-block: calc(var(--ui-size) + var(--border-width-xl));
}

[class*="fixed:top"]:has([role=tablist]) {
  --inset-size-top: calc(var(--ui-header-height) - var(--ui-size-sm));
  --inset-size-right: 0;
}

[role=tablist],
[role=tab] {
  inline-size: fit-content;
  background-color: inherit;
}

nav li a[role=tab] {
  border-radius: var(--border-radius-base);
  outline-color: var(--accent);
  padding-block: var(--ui-size-sm);
  padding-inline: var(--ui-size);
  background-color: inherit;
}

[role=presentation][class*=surface] {
  background-color: inherit;
}

[role=presentation][aria-current=page] {
  background-color: var(--shade);
}

/**
 * Tabs: use with caution
 */
[role=tabpanel] {
  display: none;
}

[role=tabpanel] {
  margin-block-end: calc(2 * var(--size-base-2xl));
}

.nojs [role=tabpanel] {
  display: block;
}

[role=tabpanel]:first-of-type:target {
  scroll-margin-block: 18em; /* TODO: fix magic number */
}

[role=tabpanel][tabindex="0"],
[role=tabpanel]:target {
  display: block;
  scroll-margin-block: 4.5em; /* TODO: fix magic number */
}

@media screen and (min-width: 975px) {
  [role=tabpanel]:first-of-type:target {
    scroll-margin-block: 15em; /* TODO: fix magic number */
  }
}
.menu\:settings {
  gap: calc(var(--gap) / var(--size-ratio-md));
  height: fit-content;
  justify-content: var(--justify, flex-end);
  padding-block: var(--outline-offset-md);
}

.menu\:settings + menu:empty {
  display: none;
}

.links\:settings {
  gap: calc(var(--gap) / var(--size-ratio-md));
  height: fit-content;
  justify-content: var(--justify, flex-end);
}

/**
	Modern CSS Reset
	================
* source : https://github.com/hankchizljaw/modern-css-reset/blob/master/src/reset.css
**/
@layer reset {
  /* https://developer.chrome.com/docs/css-ui/animate-to-height-auto/ */
  html {
    interpolate-size: allow-keywords;
  }
  /* Tab size rules */
  * {
    tab-size: 4 !important;
  }
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* Remove default margin */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd,
  menu {
    margin: 0;
  }
  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  menu[role=group],
  ul[role=group],
  li[role=group] {
    list-style: none;
    padding: 0;
  }
  /* Set core root defaults */
  html:focus-within {
    scroll-behavior: smooth;
  }
  /* Set core body defaults */
  body {
    min-height: 100vh;
    text-rendering: optimizespeed;
  }
  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }
  /* Make images easier to work with */
  img {
    max-inline-size: 100%;
    display: block;
  }
  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font-family: inherit;
  }
  /* Remove all animations and transitions for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
@layer init {
  html {
    --font-family-body:
    	var(--font-family-body-base), var(--font-family-body-fallback);
    --font-family-heading:
    	var(--font-family-heading-base), var(--font-family-heading-fallback);
    --font-family-subheading:
    	var(--font-family-subheading-base), var(--font-family-subheading-fallback);
    --font-family-mono:
    	var(--font-family-mono-base), var(--font-family-mono-fallback);
    --font-family-ui: var(--font-family-body);
    --ui-size: var(--scale-base-00);
    --ui-size-sm: calc(var(--ui-size) / var(--size-ratio-md));
    --ui-size-lg: calc(var(--ui-size) * var(--size-ratio-md));
    --font-size: var(--font-size-md);
    --font-size-ui: var(--font-size-md);
    --sidebar-width: var(--layout-sidebar-md);
    --gap: var(--layout-gap-md);
  }
  body {
    color: var(--ink);
    background-color: var(--shade);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--font-leading-body);
    scrollbar-width: thin;
    scrollbar-color: var(--thumb) var(--track);
  }
  main {
    background-color: var(--shade);
    min-block-size: calc(100vh - var(--ui-header-height));
  }
  a {
    color: var(--color-ink-nav, var(--ink));
    font-size: var(--font-size-ui);
    font-family: var(--font-family-ui);
    line-height: var(--font-leading-body);
    font-weight: var(--font-weight-link);
  }
  a[class^="font:"] {
    font-size: var(--font-size);
  }
  a:hover {
    cursor: pointer;
    text-decoration: underline;
  }
  :where(audio, video:has[controls], object[form], [contenteditable]):not([disabled]):focus {
    --hue: var(--color-theme-primary);
    --accent: oklch(
    	var(--lightness-accent) var(--chroma-accent-base) var(--hue)
    );
    outline-offset: var(--ui-size-sm);
    outline: var(--border-width-md) dotted var(--accent); /* TODO: improve color */
  }
  :where(audio,
  video:has[controls],
  object[form],
  [contenteditable],
  [role=tabpanel],
  [tabindex]):not([disabled]):focus-visible {
    --hue: var(--color-theme-primary);
    --accent: oklch(
    	var(--lightness-accent) var(--chroma-accent-base) var(--hue)
    );
    outline-offset: var(--ui-size-sm);
    outline: var(--border-width-md) dotted var(--accent); /* TODO: improve color */
  }
  :where(a, button, input, select, textarea, details):not([disabled]):focus {
    --accent: oklch(
    	var(--lightness-accent) var(--chroma-accent-base) var(--hue)
    );
    outline-offset: var(--outline-offset-xs);
    outline: var(--border-width-lg) dotted var(--accent); /* TODO: improve color */
  }
  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font-family: var(--font-family-ui);
    font-weight: var(--font-weight-ui);
  }
  [disabled] {
    pointer-events: none;
  }
}
/**
 * ZONE 4
 * Contains main content & page context
 */
.steam.zone\:2 {
  grid-template-rows: 1fr auto;
}

.steam.zone\:2 > .page-context:not(.empty) {
  max-block-size: var(--overlay-height-xs);
}

.steam.zone\:2 > .page-context > summary {
  max-inline-size: var(--sidebar-width);
}

.steam.zone\:2 > .page-context.media\:video {
  block-size: var(--overlay-height-xs);
}

.steam.zone\:2 > .page-context.media\:square {
  block-size: var(--overlay-height-2xs);
}

@media screen and (min-width: 620px) {
  .steam.zone\:2 {
    grid-template-columns: 1fr 1fr var(--sidebar-width);
  }
  .steam.zone\:2 > .page-context:not(.empty) {
    block-size: 100%;
    max-block-size: var(--max-block-size);
    padding-inline: var(--grid-gap) 0;
  }
}
@media screen and (min-width: 935px) {
  .steam.zone\:2 {
    padding-inline-end: 0;
  }
}
@media screen and (min-width: 1100px) {
  .steam.zone\:2 {
    grid-template-columns: subgrid;
  }
  .steam.zone\:2.hug {
    grid-column-start: 1;
    grid-column-end: -1;
    max-block-size: var(--max-block-size);
  }
  .exchange ~ .steam.zone\:2.hug .page-context:not(.empty) {
    grid-column-start: 5;
    grid-column-end: -1;
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .steam.hug {
    grid-column-start: 4;
    grid-column-end: -1;
  }
  .exchange:has(.gare\:ouest[open], .gare\:ouest.expanded) ~ .steam.hug .page-context:not(.empty) {
    grid-column-start: 2;
  }
}
.tgv.zone\:main {
  display: flex;
  flex-direction: column;
  grid-column: span 3;
  /*
  TODO: rows for overlapping main on header (use w/ bg:blur)
  grid-row-start: 1;
  grid-row-end: 3; */
  min-block-size: unset;
  padding-inline: 0;
  scrollbar-gutter: unset;
  min-block-size: var(--max-block-size);
  max-block-size: var(--max-block-size);
}

.tgv.zone\:main .scroll\:y h1 {
  padding-block-start: calc(var(--ui-header-height) + var(--size-base-3xs));
}

.tgv.zone\:main .page-main {
  display: flex;
  inline-size: 100%;
  block-size: 100%;
}

.tgv.zone\:main .page-main .scroll\:container {
  scrollbar-gutter: unset;
  max-block-size: var(--max-block-size);
}

@media screen and (min-width: 620px) {
  .tgv.zone\:main .scroll\:y h1 {
    padding-block-start: var(--size-base-3xs);
  }
  .tgv.zone\:main .page-main {
    padding-inline: 0;
  }
}
@media screen and (min-width: 1100px) {
  .tgv.zone\:main {
    grid-column: span 7;
  }
}
.ui\:menu {
  gap: calc(var(--gap) / var(--size-ratio-md));
}

.page-header .ui\:menu {
  margin-block-start: var(--ui-size);
  margin-inline: auto;
}

@media screen and (min-width: 620px) {
  .page-header .ui\:menu {
    margin-inline: var(--ui-size);
    margin-block-start: var(--ui-size);
  }
}
.app {
  min-block-size: 100vh;
  scrollbar-width: thin;
  scrollbar-color: var(--thumb) var(--track);
}

.app {
  position: relative;
}

#svelte-announcer {
  position: absolute;
  left: 0;
  top: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  width: 1px;
  height: 1px;
}