@charset "UTF-8";
@layer framework.reset,
       framework.variables,
       framework.utility,
       framework.typography,
       framework.layout,
       framework.iconagraphy,
       framework.containers,
       framework.components,
       framework.theme,
       framework.application;
@layer framework.reset {
  * {
    max-inline-size: var(--measure);
    box-sizing: border-box;
  }
  html,
  body,
  div,
  header,
  nav,
  main,
  footer,
  hr {
    max-inline-size: none;
  }
  figure {
    margin-block: inherit;
    margin-inline: inherit;
  }
  img {
    max-inline-size: 100%;
  }
}
@layer framework.variables {
  :root {
    --spacing-ratio: 1.5;
    --spacing-scale--5: calc(var(--spacing-scale--4) / var(--spacing-ratio));
    --spacing-scale--4: calc(var(--spacing-scale--3) / var(--spacing-ratio));
    --spacing-scale--3: calc(var(--spacing-scale--2) / var(--spacing-ratio));
    --spacing-scale--2: calc(var(--spacing-scale--1) / var(--spacing-ratio));
    --spacing-scale--1: calc(var(--spacing-scale-0) / var(--spacing-ratio));
    --spacing-scale-0: 1rem;
    --spacing-scale-1: calc(var(--spacing-scale-0) * var(--spacing-ratio));
    --spacing-scale-2: calc(var(--spacing-scale-1) * var(--spacing-ratio));
    --spacing-scale-3: calc(var(--spacing-scale-2) * var(--spacing-ratio));
    --spacing-scale-4: calc(var(--spacing-scale-3) * var(--spacing-ratio));
    --spacing-scale-5: calc(var(--spacing-scale-4) * var(--spacing-ratio));
    --typography-ratio: 1.2;
    --typography-scale--5: calc(var(--typography-scale--4) / var(--typography-ratio));
    --typography-scale--4: calc(var(--typography-scale--3) / var(--typography-ratio));
    --typography-scale--3: calc(var(--typography-scale--2) / var(--typography-ratio));
    --typography-scale--2: calc(var(--typography-scale--1) / var(--typography-ratio));
    --typography-scale--1: calc(var(--typography-scale-0) / var(--typography-ratio));
    --typography-scale-0: 1rem;
    --typography-scale-1: calc(var(--typography-scale-0) * var(--typography-ratio));
    --typography-scale-2: calc(var(--typography-scale-1) * var(--typography-ratio));
    --typography-scale-3: calc(var(--typography-scale-2) * var(--typography-ratio));
    --typography-scale-4: calc(var(--typography-scale-3) * var(--typography-ratio));
    --typography-scale-5: calc(var(--typography-scale-4) * var(--typography-ratio));
    --measure: 60ch;
  }
  :root {
    font-size: calc(1rem + 0.5vw);
    line-height: 1.5rem;
  }
}
@layer framework.utility {
  .no-max-inline-size {
    max-inline-size: none !important;
  }
  .stretch-self {
    place-self: stretch !important;
  }
  .no-box-shadow {
    box-shadow: none !important;
  }
  .inline-size-fit-content {
    inline-size: fit-content !important;
  }
  .flex-basis-auto {
    flex-basis: auto !important;
  }
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}
@layer framework.layout {
  .stack-default,
  .stack-compact,
  .stack-large,
  .stack-extra-compact {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .stack-default > *,
  .stack-compact > *,
  .stack-large > *,
  .stack-extra-compact > * {
    /* top and bottom margins in horizontal-tb writing mode */
    margin-block: 0;
  }
  .stack-default > * + *,
  .stack-compact > * + *,
  .stack-large > * + *,
  .stack-extra-compact > * + * {
    margin-block-start: 1.5rem;
  }
  .stack-large > * + * {
    margin-block-start: 3rem;
  }
  .stack-compact > * + * {
    margin-block-start: 0.5rem;
  }
  .stack-extra-compact > * + * {
    margin-block-start: 0;
  }
  .box-default,
  .box-compact,
  .box-large {
    padding: var(--spacing-scale-0);
    border: var(--default-border-width) var(--default-border-color) solid;
  }
  .box-large {
    padding: var(--spacing-scale-1);
  }
  .box-compact {
    padding: var(--spacing-scale--1);
  }
  .box-extra-compact {
    padding: var(--spacing-scale--2);
  }
  .center {
    box-sizing: content-box;
    max-inline-size: var(--measure);
    margin-inline: auto;
  }
  .center.with-gutter {
    padding-inline-start: var(--spacing-scale-1);
    padding-inline-end: var(--spacing-scale-1);
  }
  .center.intrinsic {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cluster-default,
  .cluster-compact,
  .cluster-large {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, 1rem);
    justify-content: var(--justify, flex-start);
    align-items: var(--align, center);
  }
  .cluster-compact {
    --space: 0.5rem;
  }
  .cluster-large {
    --space: 1.5rem;
  }
  .with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--spacing-scale-0));
    align-items: var(--align, initial);
  }
  .with-sidebar:not(.trailing-sidebar) > :first-child,
  .with-sidebar.trailing-sidebar > :last-child {
    flex-grow: 1;
  }
  .with-sidebar:not(.trailing-sidebar) > :last-child,
  .with-sidebar.trailing-sidebar > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--minimum-width-before-wrapping, 50%);
  }
  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--spacing-scale-0));
  }
  .switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold, 30rem) - 100%) * 999);
  }
  .switcher.horizontal-limit-4 > :nth-last-child(n+5),
  .switcher.horizontal-limit-4 > :nth-last-child(n+5) ~ * {
    flex-basis: 100%;
  }
  .cover {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    padding: var(--spacing-scale-0);
  }
  .cover > * {
    margin-block: var(--spacing-scale-0);
  }
  .cover > :first-child:not(.principal) {
    margin-block-start: 0;
  }
  .cover > :last-child:not(.principal) {
    margin-block-end: 0;
  }
  .cover > .principal {
    margin-block: auto;
  }
  .grid {
    display: grid;
    grid-gap: var(--space, 1rem);
  }
  @supports (width: min(var(--grid-minimum, 250px), 100%)) {
    .grid {
      grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-minimum, 250px), 100%), 1fr));
    }
  }
  .frame {
    --numerator: 16;
    --denominator: 9;
    aspect-ratio: var(--numerator)/var(--denominator);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .frame > img,
  .frame > video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .overlap {
    display: grid;
  }
  .overlap > * {
    grid-area: 1/1;
  }
  :is(ul, ol).cluster-default,
  :is(ul, ol).cluster-compact,
  :is(ul, ol).cluster-large {
    list-style: none;
  }
}
@layer framework.typography {
  body, dialog {
    font-family: var(--body-font-family);
    color: var(--text-color);
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font-family);
    margin-block-start: 0.2em;
    margin-block-end: 0.5em;
    color: var(--text-color);
  }
  h1 {
    font-size: var(--typography-scale-3);
  }
  h1.jumbo {
    font-size: calc(var(--typography-scale-3) * 2);
  }
  h2 {
    font-size: var(--typography-scale-2);
  }
  h3 {
    font-size: var(--typography-scale-1);
  }
  h4 {
    font-size: var(--typography-scale-0);
  }
  h5 {
    font-size: var(--typography-scale--1);
  }
  h6 {
    font-size: var(--typography-scale--2);
  }
  button, label {
    font-family: var(--interactive-ui-font-family);
    font-size: inherit;
  }
  input, textarea, select {
    font: inherit;
  }
  pre, code, kbd, samp, var {
    font-family: var(--monospace-font-family);
  }
  p {
    margin-block: 0.5em;
  }
  *.light-weight {
    font-weight: 300;
  }
  *.black-weight {
    font-weight: 900;
  }
  *.semibold-weight {
    font-weight: 500;
  }
  *.compact-font {
    font-size: 0.75em;
    --default-error-color: var(--danger-color-07) ;
  }
  *.large-font {
    font-size: 1.5em;
  }
  ul, ol {
    margin-block: 0;
    padding-inline-start: var(--spacing-scale--1);
  }
  ul > li > :is(ul, ol), ol > li > :is(ul, ol) {
    padding-inline-start: var(--spacing-scale-0);
  }
  ul > li > :is(ul, ol) li > :is(ul, ol), ol > li > :is(ul, ol) li > :is(ul, ol) {
    padding-inline-start: var(--spacing-scale-0);
  }
  ul li, ol li {
    margin-block: 0;
  }
  ul li > *, ol li > * {
    margin-block: 0;
  }
  .default-font :is(ul, ol) li > * + * {
    margin-block-start: 0.3rem;
  }
  .default-font :is(ul, ol) li + li {
    margin-block: 0.3rem;
  }
  .large-font :is(ul, ol) li > * + * {
    margin-block-start: 1rem;
  }
  .large-font :is(ul, ol) li + li {
    margin-block: 1rem;
  }
  dt {
    font-weight: bold;
  }
  dd {
    margin-inline-start: var(--spacing-scale-0);
  }
  a {
    color: var(--link-color);
  }
  a:has(:is(svg, i) + span) {
    text-decoration: none;
    --fa-primary-color: var(--link-color);
  }
  a:has(:is(svg, i) + span) span {
    text-decoration: underline;
  }
  a:has(:is(svg, i) + span):active span {
    text-decoration: none;
  }
  blockquote {
    margin-inline: 0;
    margin-inline-start: var(--spacing-scale-0);
  }
  label {
    --color: var(--default-label-color);
    color: var(--color);
  }
  label:has(+ input:disabled) {
    --color: var(--default-disabled-color);
  }
  .disabled-link {
    --color: var(--default-disabled-color);
    color: var(--color);
  }
  label.error,
  .error {
    --color: var(--default-error-color);
    --fa-li-margin: var(--spacing-scale-1);
    color: var(--color);
  }
  .card-label {
    text-align: start;
  }
  .description {
    font-family: var(--body-font-family);
  }
}
@layer framework.iconagraphy {
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
  }
  .toggle-with-icon {
    display: grid;
    color: var(--color);
  }
  .toggle-with-icon > * {
    grid-area: 1/1;
    aspect-ratio: 1/1;
    font-size: inherit;
    align-self: center;
    justify-self: center;
  }
  .toggle-with-icon input[type=radio],
  .toggle-with-icon input[type=checkbox] {
    appearance: none;
    aspect-ratio: 1/1;
    font-size: inherit;
    margin: 0;
  }
  .toggle-with-icon input[type=radio] {
    height: 2em;
  }
  .toggle-with-icon input[type=checkbox] {
    height: 1.5em;
  }
}
@layer framework.containers {
  .compact-size {
    --squircle-border-radius: var(--spacing-scale--3);
    --rounded-border-start-start-radius: var(--spacing-scale--3);
    --rounded-border-start-end-radius: var(--spacing-scale--2);
    --rounded-border-end-start-radius: var(--spacing-scale--2);
    --rounded-border-end-end-radius: var(--spacing-scale--3);
  }
  *.circle {
    border-radius: 100%;
  }
  *.squircle {
    border-radius: var(--squircle-border-radius, var(--spacing-scale--2));
  }
  *.rounded {
    border-start-start-radius: var(--rounded-border-start-start-radius, var(--spacing-scale--2));
    border-start-end-radius: var(--rounded-border-start-end-radius, var(--spacing-scale--1));
    border-end-start-radius: var(--rounded-border-end-start-radius, var(--spacing-scale--1));
    border-end-end-radius: var(--rounded-border-end-end-radius, var(--spacing-scale--2));
  }
  dialog,
  :not(anchored-popover)[popover],
  anchored-popover[popover] [data-popover-content] {
    border-style: solid;
    border-width: var(--popover-border-width, var(--default-border-width));
    border-color: var(--popover-border-color, var(--default-border-color));
    background: var(--popover-background, var(--default-container-background));
    box-shadow: var(--popover-box-shadow, var(--default-box-shadow, 0 0 var(--spacing-scale-0) oklch(0% 0 0/10%)));
  }
  dialog,
  :not(anchored-popover)[popover] {
    --default-box-shadow: 0 var(--spacing-scale--5) var(--spacing-scale--2) var(--shadow-00);
    box-shadow: var(--popover-box-shadow, var(--default-box-shadow, 0 0 var(--spacing-scale-0) oklch(0% 0 0/10%))), var(--default-box-shadow);
  }
  dialog::backdrop, [popover].blurred-background::backdrop {
    background: var(--dialog-backdrop-background, revert);
    backdrop-filter: var(--dialog-filter);
    -webkit-backdrop-filter: var(--dialog-filter);
  }
  dialog.tabbed-dialog {
    padding: 0;
  }
  dialog.tabbed-dialog .tabbed-frame {
    border: none;
  }
  anchored-popover {
    border: none;
    --popover-offset: var(--spacing-scale--3);
    padding: var(--popover-offset);
    background: transparent;
    filter: drop-shadow(0 var(--spacing-scale--5) var(--spacing-scale--2) var(--shadow-00));
  }
  anchored-popover:not([initialized]) [data-arrow] {
    display: none;
  }
  anchored-popover [data-arrow] {
    --arrow-offset: var(--spacing-scale--2);
    --arrow-size: calc(var(--popover-border-width, var(--default-border-width)) * 2);
    --curve-radius: var(--spacing-scale--5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: 0;
    border-radius: var(--curve-radius);
    width: var(--arrow-size);
    height: var(--arrow-size);
    background: var(--default-border-color);
    transform: rotate(45deg);
    background: var(--popover-border-color, var(--default-border-color));
    z-index: -1;
  }
  .overflow-frame {
    overflow: scroll;
  }
  table {
    border-spacing: 0;
    border-style: solid;
    border-color: var(--frame-border-color, var(--default-border-color));
    border-width: var(--frame-border-width, var(--default-border-width));
  }
  table :is(th, td) {
    border-style: solid;
    border-width: var(--interior-border-width, var(--default-border-width));
    border-color: var(--interior-border-color, var(--default-border-color));
    border-block-start: none;
    border-inline-start: none;
    padding: var(--spacing-scale--5);
  }
  table :is(th, td):last-child {
    border-inline-end: none;
  }
  table :last-child tr:last-child :is(th, td) {
    border-block-end: none;
  }
  table .table-label {
    background: var(--header-background, var(--default-container-background));
  }
  table .table-total {
    background: var(--total-background);
  }
  table thead :is(th, td) {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  table .left-sticky {
    position: sticky;
    left: 0;
  }
  table thead :is(th, td) {
    box-shadow: var(--table-label-box-shadow);
  }
  table.rounded .force-border-start-start-radius {
    border-start-start-radius: calc(var(--rounded-border-start-start-radius, var(--spacing-scale--2)) - var(--frame-border-width));
  }
  table.rounded .force-border-start-end-radius {
    border-start-end-radius: calc(var(--rounded-border-start-end-radius, var(--spacing-scale--1)) - var(--frame-border-width));
  }
  table.rounded .force-border-end-start-radius {
    border-end-start-radius: calc(var(--rounded-border-end-start-radius, var(--spacing-scale--1)) - var(--frame-border-width));
  }
  table.rounded .force-border-end-end-radius {
    border-end-end-radius: calc(var(--rounded-border-end-end-radius, var(--spacing-scale--2)) - var(--frame-border-width));
  }
  table tbody tr:nth-child(even) td {
    background: var(--row-band-background);
  }
  details {
    border-style: solid;
    border-width: var(--details-border-width, var(--default-border-width));
    border-color: var(--details-border-color, var(--default-border-color));
    background: var(--details-background, var(--default-container-background));
  }
  details summary {
    cursor: pointer;
  }
  details[open] summary {
    border-block-end-style: solid;
    border-block-end-width: var(--details-border-width, var(--default-border-width));
    border-block-end-color: var(--details-border-color, var(--default-border-color));
    box-shadow: var(--details-summary-box-shadow);
  }
  details.box-extra-compact[open], details.box-compact[open], details.box-default[open], details.box-large[open] {
    padding: 0;
  }
  details.box-extra-compact[open] > summary, details.box-compact[open] > summary, details.box-default[open] > summary, details.box-large[open] > summary {
    padding: var(--spacing-scale-0);
  }
  details.box-extra-compact[open] > .details-contents, details.box-compact[open] > .details-contents, details.box-default[open] > .details-contents, details.box-large[open] > .details-contents {
    padding: var(--spacing-scale-0);
    padding-block-start: 0;
  }
  details.box-extra-compact[open] > summary {
    padding: var(--spacing-scale--2);
  }
  details.box-extra-compact[open] > .details-contents {
    padding: var(--spacing-scale--2);
  }
  details.box-compact[open] > summary {
    padding: var(--spacing-scale--1);
  }
  details.box-compact[open] > .details-contents {
    padding: var(--spacing-scale--1);
  }
  details.box-large[open] > summary {
    padding: var(--spacing-scale-1);
  }
  details.box-large[open] > .details-contents {
    padding: var(--spacing-scale-1);
  }
  .tabbed-frame, .window-frame {
    --space: 0;
    padding: 0;
    border-style: solid;
    border-width: var(--tabbed-frame-container-border-width, var(--default-border-width));
    border-color: var(--tabbed-frame-container-border-color, var(--default-border-color));
  }
  .tabbed-frame.rounded > nav, .window-frame.rounded > nav {
    border-start-start-radius: calc(var(--rounded-border-start-start-radius, var(--spacing-scale--2)) - var(--tabbed-frame-container-border-width));
    border-end-start-radius: calc(var(--rounded-border-end-start-radius, var(--spacing-scale--1)) - var(--tabbed-frame-container-border-width));
  }
  .tabbed-frame > nav, .window-frame > nav {
    background: var(--gutter-background, var(--default-container-background));
  }
  .tabbed-frame > nav > [role=tablist], .window-frame > nav > [role=tablist] {
    padding-inline: 0;
  }
  .tabbed-frame > nav > [role=tablist] > *, .window-frame > nav > [role=tablist] > * {
    padding-inline: var(--spacing-scale--2);
  }
  .tabbed-frame > nav > [role=tablist] > a, .window-frame > nav > [role=tablist] > a {
    padding-block: 0.5rem;
  }
  .tabbed-frame > nav > [role=tablist] > a + a, .window-frame > nav > [role=tablist] > a + a {
    margin-block-start: 0;
  }
  .tabbed-frame > nav > [role=tablist] a[role=tab]:not(:is(:hover, :focus)), .tabbed-frame > nav > [role=tablist] a[role=tab]:not(:is(:hover, :focus)) span, .window-frame > nav > [role=tablist] a[role=tab]:not(:is(:hover, :focus)), .window-frame > nav > [role=tablist] a[role=tab]:not(:is(:hover, :focus)) span {
    text-decoration: none !important;
  }
  .tabbed-frame > nav > [role=tablist] > [aria-selected=true], .window-frame > nav > [role=tablist] > [aria-selected=true] {
    background: var(--frame-background, var(--page-background));
    z-index: 1;
  }
  .tabbed-frame .tabbed-frame-content, .window-frame .tabbed-frame-content {
    border: 0;
    box-shadow: var(--tabbed-frame-active-box-shadow);
  }
  .window-frame {
    max-inline-size: unset;
  }
  .window-frame > nav {
    flex-shrink: 2;
  }
  .window-frame > .tabbed-frame-content {
    max-inline-size: unset;
  }
  .app-chrome {
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    min-block-size: 100dvh;
  }
}
@layer framework.components {
  hr {
    border-color: var(--default-border-color);
    border-width: 0;
    border-block-end-width: var(--default-border-width);
  }
  .card-badge,
  .badge,
  .avatar,
  button:not(.internal-control),
  input, textarea, legend, select {
    background: var(--background);
    color: var(--color);
  }
  button:not(.internal-control),
  input, textarea, select {
    padding-block: var(--padding-block, var(--spacing-scale--5));
    padding-inline: var(--padding-inline, var(--spacing-scale--3));
  }
  button:not(.internal-control) {
    display: inline-flex;
    gap: var(--space, 1rem);
    align-items: center;
  }
  legend {
    padding-block: var(--padding-block, var(--spacing-scale--5));
    padding-inline: var(--padding-inline, var(--spacing-scale--4));
  }
  input:not(.internal-control):disabled,
  textarea:not(.internal-control):disabled,
  select:disabled {
    --color: var(--default-disabled-color);
    cursor: not-allowed;
  }
  .card {
    --align: center;
    --space: var(--spacing-scale--2);
  }
  .card-badge {
    padding: var(--spacing-scale--5);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
  }
  .badge {
    aspect-ratio: 1/1;
  }
  .badge, .avatar {
    display: inline-flex;
    padding: var(--padding);
    border-style: solid;
    border-color: var(--frame-color);
    border-width: var(--frame-size);
  }
  button.tag {
    padding-inline: 0;
    padding-block: 0;
  }
  button.tag .icon-frame {
    background: var(--icon-background);
    color: var(--icon-color);
    padding-block: calc(var(--padding-block, var(--spacing-scale--5)) / 2);
    padding-inline: calc(var(--padding-inline, var(--spacing-scale--3)) / 2);
  }
  button.tag > :first-child:not(.icon-frame) {
    padding-inline-start: var(--padding-inline, var(--spacing-scale--3));
  }
  button.tag > :last-child:not(.icon-frame) {
    padding-inline-end: var(--padding-inline, var(--spacing-scale--3));
  }
  .avatar {
    --numerator: 1;
    --denominator: 1;
    height: 2em;
  }
  .toggle-with-icon input {
    padding-block: 0;
    padding-inline: 0;
  }
  .toggle-with-icon:has(input[type=checkbox]:not(:checked, :indeterminate)) [data-fa-i2svg] {
    opacity: 0;
  }
  .toggle-with-icon:has(input[type=checkbox]:not(:indeterminate)) [data-fa-i2svg].indeterminate-icon {
    opacity: 0;
  }
  .toggle-with-icon:has(input[type=checkbox]:indeterminate) [data-fa-i2svg]:not(.indeterminate-icon) {
    opacity: 0;
  }
  .fallback-error-section {
    border-color: var(--danger-color-05);
    background: var(--danger-color-00);
    --color: var(--danger-color-07);
  }
  .fallback-error-section:not(:has(li)) {
    display: none;
  }
  .checkbox-input {
    --align: flex-start;
  }
}
@layer framework.theme {
  :root, ::backdrop {
    --utilities-black: hsla(0, 0%, 0%, 1);
    --utilities-white: hsla(0, 0%, 100%, 1);
    --blue-00: oklch(96.86% 0.01 174.27);
    --blue-01: oklch(95.41% 0.014 174.16);
    --blue-02: oklch(91.04% 0.029 174.47);
    --blue-03: oklch(82.37% 0.053 185.6);
    --blue-04: oklch(73.87% 0.079 183.03);
    --blue-05: oklch(65.55% 0.096 181.83);
    --blue-06: oklch(57.11% 0.102 178.3);
    --blue-07: oklch(47.09% 0.083 179.12);
    --blue-08: oklch(35.78% 0.062 178.82);
    --blue-09: oklch(23.21% 0.037 183.02);
    --danger-red-00: oklch(95.38% 0.014 22.38);
    --danger-red-01: oklch(93.43% 0.021 21.18);
    --danger-red-02: oklch(89.58% 0.034 20.16);
    --danger-red-03: oklch(79.29% 0.072 21.05);
    --danger-red-04: oklch(69.99% 0.111 21.33);
    --danger-red-05: oklch(60.82% 0.154 23.75);
    --danger-red-06: oklch(53.34% 0.187 27.02);
    --danger-red-07: oklch(43.83% 0.15 26.74);
    --danger-red-08: oklch(32.86% 0.108 26.17);
    --danger-red-09: oklch(22.14% 0.064 25.69);
    --gray-00: oklch(98.48% 0 0);
    --gray-01: oklch(97% 0.002 145.56);
    --gray-02: oklch(95.47% 0.002 145.56);
    --gray-03: oklch(90.11% 0.003 145.55);
    --gray-04: oklch(85.4% 0.003 145.55);
    --gray-05: oklch(79.87% 0.005 145.53);
    --gray-06: oklch(75.05% 0.006 145.52);
    --gray-07: oklch(60.94% 0.009 145.46);
    --gray-08: oklch(45.77% 0.007 145.46);
    --gray-09: oklch(29.16% 0.004 145.47);
    --green-00: oklch(98.75% 0.006 137.77);
    --green-01: oklch(97.35% 0.011 141.04);
    --green-02: oklch(95.97% 0.017 143.05);
    --green-03: oklch(91.01% 0.034 145.29);
    --green-04: oklch(86.98% 0.051 144.23);
    --green-05: oklch(82.01% 0.069 144.91);
    --green-06: oklch(78.03% 0.088 144.27);
    --green-07: oklch(63.35% 0.073 143.84);
    --green-08: oklch(47.21% 0.048 144.76);
    --green-09: oklch(29.95% 0.027 144.86);
    --orange-00: oklch(98.29% 0.007 39.46);
    --orange-01: oklch(95.84% 0.019 42.96);
    --orange-02: oklch(94.19% 0.026 42.9);
    --orange-03: oklch(87.69% 0.058 42.67);
    --orange-04: oklch(82.19% 0.09 42.47);
    --orange-05: oklch(76.95% 0.119 42.22);
    --orange-06: oklch(72.08% 0.149 41.71);
    --orange-07: oklch(58.4% 0.119 41.76);
    --orange-08: oklch(43.84% 0.085 41.87);
    --orange-09: oklch(27.95% 0.048 42.1);
    --salmon-00: oklch(98.04% 0.007 17.27);
    --salmon-01: oklch(94.96% 0.019 17.49);
    --salmon-02: oklch(92.97% 0.026 17.64);
    --salmon-03: oklch(86.16% 0.052 18.22);
    --salmon-04: oklch(79.42% 0.081 19.03);
    --salmon-05: oklch(72.92% 0.112 20.14);
    --salmon-06: oklch(66.81% 0.145 21.76);
    --salmon-07: oklch(53.61% 0.113 21.6);
    --salmon-08: oklch(40.37% 0.084 21.47);
    --salmon-09: oklch(26.05% 0.044 20.51);
    --sand-00: oklch(99.46% 0.0045929023877005525 78.29825497070165);
    --sand-01: oklch(99.27% 0.004 56.38);
    --sand-02: oklch(98.73% 0.008691280674856507 67.72489727517149);
    --sand-03: oklch(98% 0.012917431147052533 63.92180336809899);
    --sand-04: oklch(96.85% 0.02180948630752453 67.56631499657453);
    --sand-05: oklch(95.93% 0.02589049274598159 61.83017868765148);
    --sand-06: oklch(94.72% 0.03472467629436156 63.605343959035636);
    --sand-07: oklch(76.35% 0.027 63.62);
    --sand-08: oklch(56.91% 0.02 65.51);
    --sand-09: oklch(35.18% 0.01 56.04);
    --text-00: oklch(92.42% 0.001 197.14);
    --text-01: oklch(92.42% 0.001 197.14);
    --text-02: oklch(92.42% 0.001 197.14);
    --text-03: oklch(92.42% 0.001 197.14);
    --text-04: oklch(76.88% 0.005 197.05);
    --text-05: oklch(60.47% 0.009 196.92);
    --text-06: oklch(44.21% 0.009 207.86);
    --text-07: oklch(33.38% 0.018 201.74);
    --text-08: oklch(22.07% 0.009 209.45);
    --text-09: oklch(18.28% 0.028 202.61);
    --yellow-00: oklch(98.48% 0 0);
    --yellow-01: oklch(97.43% 0.02 84.59);
    --yellow-02: oklch(95.62% 0.037 87.56);
    --yellow-03: oklch(91.25% 0.074 85.96);
    --yellow-04: oklch(87% 0.106 85.4);
    --yellow-05: oklch(82.67% 0.134 82.21);
    --yellow-06: oklch(79.26% 0.152 81.15);
    --yellow-07: oklch(64.05% 0.122 81.29);
    --yellow-08: oklch(47.17% 0.088 80.04);
    --yellow-09: oklch(31.02% 0.055 84.8);
    --shadow-00: oklch(29.16% 0.004 145.47 / 50%);
  }
  :root, ::backdrop,
  :root[data-theme=light], :root[data-theme=light] ::backdrop {
    --default-color-00: var(--sand-00);
    --default-color-01: var(--sand-01);
    --default-color-02: var(--sand-02);
    --default-color-03: var(--sand-03);
    --default-color-04: var(--sand-04);
    --default-color-05: var(--sand-05);
    --default-color-06: var(--sand-06);
    --default-color-07: var(--sand-07);
    --default-color-08: var(--sand-08);
    --default-color-09: var(--sand-09);
    --primary-accent-color-00: var(--salmon-00);
    --primary-accent-color-01: var(--salmon-01);
    --primary-accent-color-02: var(--salmon-02);
    --primary-accent-color-03: var(--salmon-03);
    --primary-accent-color-04: var(--salmon-04);
    --primary-accent-color-05: var(--salmon-05);
    --primary-accent-color-06: var(--salmon-06);
    --primary-accent-color-07: var(--salmon-07);
    --primary-accent-color-08: var(--salmon-08);
    --primary-accent-color-09: var(--salmon-09);
    --secondary-accent-color-00: var(--blue-00);
    --secondary-accent-color-01: var(--blue-01);
    --secondary-accent-color-02: var(--blue-02);
    --secondary-accent-color-03: var(--blue-03);
    --secondary-accent-color-04: var(--blue-04);
    --secondary-accent-color-05: var(--blue-05);
    --secondary-accent-color-06: var(--blue-06);
    --secondary-accent-color-07: var(--blue-07);
    --secondary-accent-color-08: var(--blue-08);
    --secondary-accent-color-09: var(--blue-09);
    --success-color-00: var(--green-00);
    --success-color-01: var(--green-01);
    --success-color-02: var(--green-02);
    --success-color-03: var(--green-03);
    --success-color-04: var(--green-04);
    --success-color-05: var(--green-05);
    --success-color-06: var(--green-06);
    --success-color-07: var(--green-07);
    --success-color-08: var(--green-08);
    --success-color-09: var(--green-09);
    --danger-color-00: var(--danger-red-00);
    --danger-color-01: var(--danger-red-01);
    --danger-color-02: var(--danger-red-02);
    --danger-color-03: var(--danger-red-03);
    --danger-color-04: var(--danger-red-04);
    --danger-color-05: var(--danger-red-05);
    --danger-color-06: var(--danger-red-06);
    --danger-color-07: var(--danger-red-07);
    --danger-color-08: var(--danger-red-08);
    --danger-color-09: var(--danger-red-09);
    --warning-color-00: var(--yellow-00);
    --warning-color-01: var(--yellow-01);
    --warning-color-02: var(--yellow-02);
    --warning-color-03: var(--yellow-03);
    --warning-color-04: var(--yellow-04);
    --warning-color-05: var(--yellow-05);
    --warning-color-06: var(--yellow-06);
    --warning-color-07: var(--yellow-07);
    --warning-color-08: var(--yellow-08);
    --warning-color-09: var(--yellow-09);
    --text-color-00: var(--text-00);
    --text-color-01: var(--text-01);
    --text-color-02: var(--text-02);
    --text-color-03: var(--text-03);
    --text-color-04: var(--text-04);
    --text-color-05: var(--text-05);
    --text-color-06: var(--text-06);
    --text-color-07: var(--text-07);
    --text-color-08: var(--text-08);
    --text-color-09: var(--text-09);
    --page-background: var(--utilities-white);
    --key-color: var(--gray-00);
    --key-border: var(--gray-08);
    --key-dimension-color: var(--gray-07);
    --default-placeholder-color: var(--default-color-08);
    --default-error-color: var(--danger-red-05);
    --default-disabled-color: var(--text-05);
    --text-color: var(--text-color-09);
    --default-label-color: var(--text-color-08);
    --header-color: var(--text-color-07);
    --gutter-background: var(--gray-01);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]), :root:not([data-theme=light]) ::backdrop {
      --sand-00: oklch(98% 0.012917431147052533 63.92180336809899);
      --sand-01: oklch(96.03% 0.025965116719959942 63.738655414715815);
      --sand-02: oklch(93.93% 0.039 61.62);
      --sand-03: oklch(92.15% 0.052 63.3);
      --sand-04: oklch(90.89% 0.061 63.13);
      --sand-05: oklch(80% 0.050 65.11);
      --sand-06: oklch(75% 0.050 65.11);
      --sand-07: oklch(72.78% 0.050 61.20);
      --sand-08: oklch(54.68% 0.036 63.14);
      --sand-09: oklch(33.76% 0.021 65.11);
      --green-00: oklch(92.28% 0.025 145.37);
      --green-01: oklch(85.15% 0.046 145.15);
      --green-02: oklch(77.4% 0.075 144.81);
      --green-03: oklch(70.13% 0.096 144.47);
      --green-04: oklch(62.26% 0.12 143.97);
      --green-05: oklch(58% 0.097 144.01);
      --green-06: oklch(55% 0.097 144.01);
      --green-07: oklch(51.42% 0.097 144.01);
      --green-08: oklch(38.9% 0.069 144.1);
      --green-09: oklch(25.26% 0.039 144.31);
      --blue-00: oklch(88.92% 0.019 183.74);
      --blue-01: oklch(77.65% 0.038 185.32);
      --blue-02: oklch(66.86% 0.055 183.08);
      --blue-03: oklch(55.33% 0.072 181.24);
      --blue-04: oklch(43.87% 0.078 177.57);
      --blue-05: oklch(40% 0.063 179.49);
      --blue-06: oklch(38% 0.063 179.49);
      --blue-07: oklch(36.63% 0.063 179.49);
      --blue-08: oklch(28.5% 0.047 178.92);
      --blue-09: oklch(18.4% 0.029 178.89);
      --text-00: var(--sand-09);
      --text-01: var(--sand-08);
      --text-02: var(--sand-07);
      --text-03: var(--sand-06);
      --text-04: var(--sand-05);
      --text-05: var(--sand-04);
      --text-06: var(--sand-03);
      --text-07: var(--sand-02);
      --text-08: var(--sand-01);
      --text-09: var(--sand-00);
      --default-color-00: var(--green-00);
      --default-color-01: var(--green-01);
      --default-color-02: var(--green-02);
      --default-color-03: var(--green-03);
      --default-color-04: var(--green-04);
      --default-color-05: var(--green-05);
      --default-color-06: var(--green-06);
      --default-color-07: var(--green-07);
      --default-color-08: var(--green-08);
      --default-color-09: var(--green-09);
      --primary-accent-color-00: var(--blue-00);
      --primary-accent-color-01: var(--blue-01);
      --primary-accent-color-02: var(--blue-02);
      --primary-accent-color-03: var(--blue-03);
      --primary-accent-color-04: var(--blue-04);
      --primary-accent-color-05: var(--blue-05);
      --primary-accent-color-06: var(--blue-06);
      --primary-accent-color-07: var(--blue-07);
      --primary-accent-color-08: var(--blue-08);
      --primary-accent-color-09: var(--blue-09);
      --secondary-accent-color-00: var(--salmon-00);
      --secondary-accent-color-01: var(--salmon-01);
      --secondary-accent-color-02: var(--salmon-02);
      --secondary-accent-color-03: var(--salmon-03);
      --secondary-accent-color-04: var(--salmon-04);
      --secondary-accent-color-05: var(--salmon-05);
      --secondary-accent-color-06: var(--salmon-06);
      --secondary-accent-color-07: var(--salmon-07);
      --secondary-accent-color-08: var(--salmon-08);
      --secondary-accent-color-09: var(--salmon-09);
      --success-color-00: var(--green-00);
      --success-color-01: var(--green-01);
      --success-color-02: var(--green-02);
      --success-color-03: var(--green-03);
      --success-color-04: var(--green-04);
      --success-color-05: var(--green-05);
      --success-color-06: var(--green-06);
      --success-color-07: var(--green-07);
      --success-color-08: var(--green-08);
      --success-color-09: var(--green-09);
      --danger-color-00: var(--danger-red-00);
      --danger-color-01: var(--danger-red-01);
      --danger-color-02: var(--danger-red-02);
      --danger-color-03: var(--danger-red-03);
      --danger-color-04: var(--danger-red-04);
      --danger-color-05: var(--danger-red-05);
      --danger-color-06: var(--danger-red-06);
      --danger-color-07: var(--danger-red-07);
      --danger-color-08: var(--danger-red-08);
      --danger-color-09: var(--danger-red-09);
      --warning-color-00: var(--yellow-00);
      --warning-color-01: var(--yellow-01);
      --warning-color-02: var(--yellow-02);
      --warning-color-03: var(--yellow-03);
      --warning-color-04: var(--yellow-04);
      --warning-color-05: var(--yellow-05);
      --warning-color-06: var(--yellow-06);
      --warning-color-07: var(--yellow-07);
      --warning-color-08: var(--yellow-08);
      --warning-color-09: var(--yellow-09);
      --text-color-00: var(--text-00);
      --text-color-01: var(--text-01);
      --text-color-02: var(--text-02);
      --text-color-03: var(--text-03);
      --text-color-04: var(--text-04);
      --text-color-05: var(--text-05);
      --text-color-06: var(--text-06);
      --text-color-07: var(--text-07);
      --text-color-08: var(--text-08);
      --text-color-09: var(--text-09);
      --header-color: oklch(53.34% 0.187 27.02);
      --page-background: oklch(18.28% 0.028 202.61);
      --gutter-background: var(--gray-09);
    }
  }
  :root[data-theme=dark], :root[data-theme=dark] ::backdrop {
    --sand-00: oklch(98% 0.012917431147052533 63.92180336809899);
    --sand-01: oklch(96.03% 0.025965116719959942 63.738655414715815);
    --sand-02: oklch(93.93% 0.039 61.62);
    --sand-03: oklch(92.15% 0.052 63.3);
    --sand-04: oklch(90.89% 0.061 63.13);
    --sand-05: oklch(80% 0.050 65.11);
    --sand-06: oklch(75% 0.050 65.11);
    --sand-07: oklch(72.78% 0.050 61.20);
    --sand-08: oklch(54.68% 0.036 63.14);
    --sand-09: oklch(33.76% 0.021 65.11);
    --green-00: oklch(92.28% 0.025 145.37);
    --green-01: oklch(85.15% 0.046 145.15);
    --green-02: oklch(77.4% 0.075 144.81);
    --green-03: oklch(70.13% 0.096 144.47);
    --green-04: oklch(62.26% 0.12 143.97);
    --green-05: oklch(58% 0.097 144.01);
    --green-06: oklch(55% 0.097 144.01);
    --green-07: oklch(51.42% 0.097 144.01);
    --green-08: oklch(38.9% 0.069 144.1);
    --green-09: oklch(25.26% 0.039 144.31);
    --blue-00: oklch(88.92% 0.019 183.74);
    --blue-01: oklch(77.65% 0.038 185.32);
    --blue-02: oklch(66.86% 0.055 183.08);
    --blue-03: oklch(55.33% 0.072 181.24);
    --blue-04: oklch(43.87% 0.078 177.57);
    --blue-05: oklch(40% 0.063 179.49);
    --blue-06: oklch(38% 0.063 179.49);
    --blue-07: oklch(36.63% 0.063 179.49);
    --blue-08: oklch(28.5% 0.047 178.92);
    --blue-09: oklch(18.4% 0.029 178.89);
    --text-00: var(--sand-09);
    --text-01: var(--sand-08);
    --text-02: var(--sand-07);
    --text-03: var(--sand-06);
    --text-04: var(--sand-05);
    --text-05: var(--sand-04);
    --text-06: var(--sand-03);
    --text-07: var(--sand-02);
    --text-08: var(--sand-01);
    --text-09: var(--sand-00);
    --default-color-00: var(--green-00);
    --default-color-01: var(--green-01);
    --default-color-02: var(--green-02);
    --default-color-03: var(--green-03);
    --default-color-04: var(--green-04);
    --default-color-05: var(--green-05);
    --default-color-06: var(--green-06);
    --default-color-07: var(--green-07);
    --default-color-08: var(--green-08);
    --default-color-09: var(--green-09);
    --primary-accent-color-00: var(--blue-00);
    --primary-accent-color-01: var(--blue-01);
    --primary-accent-color-02: var(--blue-02);
    --primary-accent-color-03: var(--blue-03);
    --primary-accent-color-04: var(--blue-04);
    --primary-accent-color-05: var(--blue-05);
    --primary-accent-color-06: var(--blue-06);
    --primary-accent-color-07: var(--blue-07);
    --primary-accent-color-08: var(--blue-08);
    --primary-accent-color-09: var(--blue-09);
    --secondary-accent-color-00: var(--salmon-00);
    --secondary-accent-color-01: var(--salmon-01);
    --secondary-accent-color-02: var(--salmon-02);
    --secondary-accent-color-03: var(--salmon-03);
    --secondary-accent-color-04: var(--salmon-04);
    --secondary-accent-color-05: var(--salmon-05);
    --secondary-accent-color-06: var(--salmon-06);
    --secondary-accent-color-07: var(--salmon-07);
    --secondary-accent-color-08: var(--salmon-08);
    --secondary-accent-color-09: var(--salmon-09);
    --success-color-00: var(--green-00);
    --success-color-01: var(--green-01);
    --success-color-02: var(--green-02);
    --success-color-03: var(--green-03);
    --success-color-04: var(--green-04);
    --success-color-05: var(--green-05);
    --success-color-06: var(--green-06);
    --success-color-07: var(--green-07);
    --success-color-08: var(--green-08);
    --success-color-09: var(--green-09);
    --danger-color-00: var(--danger-red-00);
    --danger-color-01: var(--danger-red-01);
    --danger-color-02: var(--danger-red-02);
    --danger-color-03: var(--danger-red-03);
    --danger-color-04: var(--danger-red-04);
    --danger-color-05: var(--danger-red-05);
    --danger-color-06: var(--danger-red-06);
    --danger-color-07: var(--danger-red-07);
    --danger-color-08: var(--danger-red-08);
    --danger-color-09: var(--danger-red-09);
    --warning-color-00: var(--yellow-00);
    --warning-color-01: var(--yellow-01);
    --warning-color-02: var(--yellow-02);
    --warning-color-03: var(--yellow-03);
    --warning-color-04: var(--yellow-04);
    --warning-color-05: var(--yellow-05);
    --warning-color-06: var(--yellow-06);
    --warning-color-07: var(--yellow-07);
    --warning-color-08: var(--yellow-08);
    --warning-color-09: var(--yellow-09);
    --text-color-00: var(--text-00);
    --text-color-01: var(--text-01);
    --text-color-02: var(--text-02);
    --text-color-03: var(--text-03);
    --text-color-04: var(--text-04);
    --text-color-05: var(--text-05);
    --text-color-06: var(--text-06);
    --text-color-07: var(--text-07);
    --text-color-08: var(--text-08);
    --text-color-09: var(--text-09);
    --header-color: oklch(53.34% 0.187 27.02);
    --page-background: oklch(18.28% 0.028 202.61);
    --gutter-background: var(--gray-09);
  }
  @font-face {
    font-family: "Bubbleboddy Neue";
    src: local("Bubbleboddy Neue Bold"), local("Bubbleboddy-Neue-Bold"), url("Bubbleboddy-Neue-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
  }
  @font-face {
    font-family: "Bubbleboddy Neue";
    src: local("Bubbleboddy Neue ExtraBold"), local("Bubbleboddy-Neue-Extra-Bold"), url("Bubbleboddy-Neue-Extra-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: "Bubbleboddy Neue";
    src: local("Bubbleboddy Neue Light"), local("Bubbleboddy-Neue-Light"), url("Bubbleboddy-Neue-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: "Bubbleboddy Neue";
    src: local("Bubbleboddy Neue Regular"), local("Bubbleboddy-Neue-Regular"), url("Bubbleboddy-Neue-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "Bubbleboddy Neue";
    src: local("Bubbleboddy Neue Thin"), local("Bubbleboddy-Neue-Thin"), url("Bubbleboddy-Neue-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
  }
  @font-face {
    font-family: "Maple Mono";
    src: local("Maple Mono Regular"), local("MapleMono-Regular"), url("MapleMono-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "Maple Mono";
    src: local("Maple Mono Bold"), local("MapleMono-Bold"), url("MapleMono-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
  }
  @font-face {
    font-family: "Maple Mono";
    src: local("Maple Mono Light"), local("MapleMono-Light"), url("MapleMono-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: "Custom Avenir";
    src: local("Avenir Light");
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: "Custom Avenir";
    src: local("Avenir Light Oblique");
    font-weight: 300;
    font-style: italic;
  }
  @font-face {
    font-family: "Custom Avenir";
    src: local("Avenir Book");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "Custom Avenir";
    src: local("Avenir Book Oblique");
    font-weight: normal;
    font-style: italic;
  }
  @font-face {
    font-family: "Custom Avenir";
    src: local("Avenir Medium");
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: "Custom Avenir";
    src: local("Avenir Medium Oblique");
    font-weight: 500;
    font-style: italic;
  }
  @font-face {
    font-family: "Custom Avenir";
    src: local("Avenir Heavy");
    font-weight: bold;
    font-style: normal;
  }
  @font-face {
    font-family: "Custom Avenir";
    src: local("Avenir Heavy Oblique");
    font-weight: bold;
    font-style: italic;
  }
  @font-face {
    font-family: "Custom Avenir";
    src: local("Avenir Black");
    font-weight: 800;
    font-style: normal;
  }
  @font-face {
    font-family: "Custom Avenir";
    src: local("Avenir Black Oblique");
    font-weight: 800;
    font-style: italic;
  }
  button.raised,
  .springed-toggle .toggle-with-icon,
  .springed-toggle .toggle-with-icon input {
    transition-property: box-shadow, transform, background, color;
    transition-duration: var(--transition-time, var(--default-transition-time));
    transition-timing-function: var(--transition-function, var(--default-transition-function));
  }
  button.raised,
  .springed-toggle .toggle-with-icon {
    --interactive-y-offset: 0;
    --translate-offset: calc(var(--interactive-y-offset) - var(--box-shadow-y-offset));
    transform-origin: bottom;
    transform: translateY(var(--translate-offset));
  }
  button.raised:not(:disabled):is(:hover, :focus-within),
  .springed-toggle:is(:hover, :focus-within):not(:has(input:disabled)) .toggle-with-icon,
  .springed-toggle:is(:hover, :focus-within):not(:has(input:disabled)) .toggle-with-icon input {
    --interactive-y-offset: var(--spacing-scale--5);
    --box-shadow-y-offset: var(--spacing-scale--4);
  }
  button.raised:not(:disabled):active,
  .springed-toggle:has(input:active:not(:disabled)) .toggle-with-icon,
  .springed-toggle:has(input:active:not(:disabled)) .toggle-with-icon input {
    --interactive-y-offset: var(--spacing-scale--5);
    --box-shadow-y-offset: 0;
  }
  button.raised:disabled {
    --box-shadow-y-offset: calc(-1 * var(--dimension-size));
  }
  .springed-toggle:has(input:disabled) .toggle-with-icon,
  .springed-toggle:has(input:disabled) .toggle-with-icon input {
    --color: var(--default-disabled-color);
    --dimension-size: 0;
  }
  html {
    background: var(--page-background);
  }
  :root {
    --header-font-family: "Bubbleboddy Neue", Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", "Georgia Pro", Georgia, serif;
    --body-font-family: "Custom Avenir", Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
    --interactive-ui-font-family: "Arial Rounded MT", "Arial Rounded MT Bold", ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, Calibri, source-sans-pro, sans-serif;
    --monospace-font-family: "Maple Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  }
  :root {
    font-size: calc(0.65rem + 0.5vw);
  }
  h1, h2, h3, h4, h5, h6 {
    --text-color: var(--header-color);
  }
  :root {
    --default-dimension-color: var(--default-color-07);
    --default-dimension-size: var(--spacing-scale--5);
    --default-box-shadow: 0 0 var(--spacing-scale--2) var(--shadow-00);
    --default-inner-shadow: inset 0 0 var(--spacing-scale--3) var(--spacing-scale--3) var(--default-color-05);
    --default-container-background: var(--default-color-01);
    --default-border-color: var(--primary-accent-color-08);
    --default-border-width: var(--spacing-scale--3);
    --tabbed-frame-container-border-width: var(--spacing-scale--4);
    --popover-box-shadow: var(--default-inner-shadow), 0 var(--spacing-scale--5) 0 var(--default-dimension-color);
    --details-border-width: var(--spacing-scale--5);
    --details-border-color: var(--default-color-08);
    --details-background: var(--default-color-00);
    --details-summary-box-shadow: 0 var(--spacing-scale--5) var(--spacing-scale--5) calc(-1 * var(--spacing-scale--5)) var(--shadow-00);
  }
  :root, ::backdrop {
    --overlay-00: color-mix(in oklch, var(--gray-04), transparent 4%);
    --overlay-01: color-mix(in oklch, var(--gray-04), transparent 24%);
    --overlay-02: color-mix(in oklch, var(--gray-04), transparent 64%);
    --overlay-03: color-mix(in oklch, var(--gray-04), transparent 92%);
    --dialog-backdrop-background: var(--overlay-02);
    --dialog-filter: blur(4px);
  }
  .overlay-0 {
    background: var(--overlay-00);
  }
  .overlay-1 {
    background: var(--overlay-01);
  }
  .overlay-2 {
    background: var(--overlay-02);
  }
  .overlay-3 {
    background: var(--overlay-03);
  }
  table {
    --frame-border-width: var(--spacing-scale--4);
    --frame-border-color: var(--default-color-08);
    --interior-border-width: var(--spacing-scale--5);
    --interior-border-color: var(--default-color-07);
    --header-background: var(--default-color-06);
    --total-background: var(--default-color-04);
    --row-band-background: var(--default-color-02);
    --table-label-box-shadow: 0 var(--spacing-scale--5) var(--spacing-scale--5) calc(-1 * var(--spacing-scale--5)) var(--shadow-00);
  }
  a {
    --link-color: var(--secondary-accent-color-08);
  }
  a:active, a:hover, a:focus-within {
    --link-color: var(--primary-accent-color-08) ;
  }
  a:visited {
    --link-color: var(--primary-accent-color-09);
  }
  abbr {
    color: var(--primary-accent-color-08);
  }
  del {
    background: var(--danger-color-01);
  }
  ins {
    background: var(--success-color-01);
    text-decoration: none;
  }
  details:has(> summary .details-marker) > summary::-webkit-details-marker,
  details:has(> summary .details-marker) > summary::marker {
    display: none;
    content: "";
  }
  details:has(> summary .details-marker) .details-marker {
    transition: transform var(--default-transition);
  }
  details:has(> summary .details-marker)[open] .details-marker {
    transform: rotate(180deg);
  }
  :root {
    --default-transition-time: 0.2s;
    --default-transition-function: cubic-bezier(.12, 0, .39, 0);
    --default-transition: var(--default-transition-time) var(--default-transition-function);
    --spring-transition-function: cubic-bezier(.68, -0.6, .32, 1.6);
  }
  kbd.key {
    background: var(--key-color);
    border: solid var(--spacing-scale--5) var(--key-border);
    border-radius: var(--spacing-scale--5);
    padding: var(--spacing-scale--5);
    box-shadow: inset 0 0 var(--spacing-scale--3) var(--spacing-scale--3) var(--gray-01), 0 var(--spacing-scale--5) 0 var(--key-dimension-color);
  }
  mark {
    background: var(--secondary-accent-color-03);
  }
  hr {
    border-style: dotted;
  }
  .raised {
    --transition-time: 0.1s;
    --transition-function: var(--spring-transition-function);
    --box-shadow-y-offset: var(--dimension-size);
    --dimension-box-shadow: 0px var(--box-shadow-y-offset) 0px var(--dimension-color, var(--default-dimension-color));
    border: none;
    box-shadow: var(--dimension-box-shadow);
  }
  .raised-labeling > [data-fa-i2svg] {
    filter: drop-shadow(0px 1px 0px var(--dimension-color, var(--default-dimension-color)));
  }
  .raised-labeling > span,
  label.raised-labeling {
    text-shadow: 0px 1px 0px var(--dimension-color, var(--default-dimension-color));
  }
  button {
    --color: var(--primary-accent-color-09);
    --background: var(--default-color-06);
    --dimension-color: var(--default-dimension-color);
    --dimension-size: var(--default-dimension-size);
    --space: var(--spacing-scale--3);
    border-style: solid;
    border-color: var(--dimension-color);
    border-width: var(--dimension-size);
  }
  button:disabled {
    --color: var(--default-color-09);
    --background: var(--default-color-00);
    cursor: not-allowed;
  }
  fieldset {
    border-style: solid;
    border-width: var(--default-dimension-size);
    border-color: var(--default-dimension-color);
  }
  legend {
    background: var(--default-color-02);
    border-style: solid;
    border-width: var(--default-dimension-size);
    border-color: var(--default-dimension-color);
    font-family: var(--interactive-ui-font-family);
  }
  input,
  textarea,
  select {
    --color: var(--primary-accent-color-09);
    --frame-color: var(--primary-accent-color-08);
    --frame-size: var(--spacing-scale--5);
    --background: var(--default-color-02);
    --dimension-color: var(--default-dimension-color);
    --dimension-size: var(--spacing-scale--5);
    --inset-box-shadow-color: var(--default-color-05);
    --inset-box-shadow: inset 0 0 var(--spacing-scale--5) var(--spacing-scale--5) var(--inset-box-shadow-color);
    border-style: solid;
    border-color: var(--frame-color);
    border-width: var(--frame-size);
    box-shadow: var(--inset-box-shadow);
  }
  input.raised,
  textarea.raised,
  select.raised {
    border-style: solid;
    border-color: var(--frame-color);
    border-width: var(--frame-size);
    box-shadow: var(--dimension-box-shadow), var(--inset-box-shadow);
  }
  input:disabled,
  textarea:disabled,
  select:disabled {
    --frame-color: var(--gray-08, var(--default-disabled-color));
    --background: var(--default-color-00);
    --inset-box-shadow-color: var(--default-color-02);
  }
  input:is([aria-invalid=true], :user-invalid),
  textarea:is([aria-invalid=true], :user-invalid),
  select:is([aria-invalid=true], :user-invalid) {
    --frame-color: var(--danger-color-08);
    --background: var(--danger-color-02);
    --dimension-color: var(--danger-color-07);
    --inset-box-shadow-color: var(--danger-color-03);
  }
  @supports not selector(:user-invalid) {
    [data-js-enabled=false] input:invalid,
    [data-js-enabled=false] select:invalid {
      --frame-color: var(--danger-color-08);
      --background: var(--danger-color-02);
      --dimension-color: var(--danger-color-07);
      --inset-box-shadow-color: var(--danger-color-03);
    }
  }
  ::placeholder {
    color: var(--placeholder-color, var(--default-placeholder-color));
  }
  .primary,
  .toggle-with-icon:has(input[type=radio]:checked) {
    --color: var(--primary-accent-color-00);
    --background: var(--secondary-accent-color-06);
    --dimension-color: var(--secondary-accent-color-07);
  }
  .primary:disabled,
  .toggle-with-icon:has(input[type=radio]:checked):disabled {
    --color: var(--secondary-accent-color-09);
    --background: var(--secondary-accent-color-02);
    --dimension-color: var(--secondary-accent-color-07);
  }
  .success {
    --color: var(--success-color-09);
    --background: var(--success-color-06);
    --dimension-color: var(--success-color-07);
  }
  .success:disabled {
    --background: var(--success-color-02);
    --dimension-color: var(--success-color-04);
  }
  .warning {
    --color: var(--warning-color-09);
    --background: var(--warning-color-06);
    --dimension-color: var(--warning-color-07);
  }
  .warning:disabled {
    --background: var(--warning-color-02);
  }
  .danger {
    --color: var(--primary-accent-color-00);
    --background: var(--danger-color-06);
    --dimension-color: var(--danger-color-07);
  }
  .danger:disabled {
    --color: var(--danger-color-09);
    --background: var(--danger-color-02);
    --dimension-color: var(--danger-color-07);
  }
  .embossed {
    border-style: solid;
    border-color: var(--emboss-color);
    border-width: 0;
    border-block-start-width: var(--emboss-size);
  }
  .embossed > [data-fa-i2svg] {
    filter: drop-shadow(0px 1px 0px var(--emboss-color));
  }
  .badge {
    --color: var(--primary-accent-color-09);
    --background: var(--default-color-06);
    --frame-size: var(--spacing-scale--4);
    --padding: var(--spacing-scale--3);
    --emboss-color: var(--default-color-07);
    --dimension-color: var(--emboss-color);
    --dimension-size: var(--spacing-scale--5);
    --box-shadow-y-offset: var(--dimension-size);
    --dimension-box-shadow: 0px var(--box-shadow-y-offset) 0px var(--dimension-color);
  }
  .badge > [data-fa-i2svg] {
    filter: drop-shadow(0px 1px 0px var(--emboss-color));
  }
  .tag {
    --icon-background: var(--primary-accent-color-09);
    --icon-color: var(--default-color-00);
  }
  .tag .icon-frame {
    transition-property: background, color;
    transition-duration: inherit;
    transition-timing-function: inherit;
  }
  .tag .icon-frame:first-child {
    border-inline-end: calc(var(--dimension-size) / 2) solid var(--dimension-color);
  }
  .tag .icon-frame:last-child {
    border-inline-start: calc(var(--dimension-size) / 2) solid var(--dimension-color);
  }
  .tag:disabled .icon-frame {
    --icon-color: var(--text-color-05);
    --icon-background: transparent;
  }
  .token {
    --background: var(--secondary-accent-color-02);
    --dimension-color: var(--secondary-accent-color-04);
  }
  .token .icon-frame {
    color: var(--secondary-accent-color-07);
  }
  .token:not(:disabled):is(:focus-within, :active) {
    --background: var(--secondary-accent-color-04);
  }
  .token:not(:disabled):is(:focus-within, :active) .icon-frame {
    color: var(--secondary-accent-color-00);
  }
  .token:disabled {
    --background: var(--secondary-accent-color-00);
    --dimension-color: transparent;
  }
  .token:disabled .icon-frame {
    display: none;
  }
  .avatar {
    --color: var(--primary-accent-color-09);
    --background: var(--default-color-00);
    --frame-size: var(--spacing-scale--5);
  }
  .input-wrapper.stack-extra-compact > * + * {
    margin-block: 0.1rem;
  }
  label:has(input:disabled) {
    cursor: not-allowed;
    color: var(--default-disabled-color);
  }
  .toggle-with-icon {
    --color: var(--primary-accent-color-08);
  }
  .toggle-with-icon input[type=radio]:checked {
    --inset-box-shadow-color: var(--secondary-accent-color-07);
    --background: var(--secondary-accent-color-06);
  }
  .toggle-with-icon:has(input[type=radio]:disabled:checked),
  .toggle-with-icon input[type=radio]:disabled:checked {
    --color: var(--text-color);
    --inset-box-shadow-color: var(--secondary-accent-color-02);
    --background: var(--secondary-accent-color-02);
  }
  .toggle-with-icon:has(input[type=checkbox]:not(:disabled):is(:checked, :indeterminate)),
  .toggle-with-icon input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
    --color: var(--primary-accent-color-00);
    --background: var(--frame-color);
    --inset-box-shadow-color: var(--frame-color);
  }
  .toggle-with-icon:has(input[type=checkbox]:disabled:checked) {
    --color: var(--text-color);
  }
  .tabbed-frame nav [aria-selected] {
    filter: drop-shadow(0px var(--spacing-scale--5) 0px var(--dimension-color, var(--default-dimension-color)));
  }
  .tabbed-frame .tabbed-frame-content {
    box-shadow: calc(-1 * var(--spacing-scale--5)) 0px 0px var(--dimension-color, var(--default-dimension-color));
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
      --details-background: var(--default-color-09);
      --default-inner-shadow: inset 0 0 var(--spacing-scale--3) var(--spacing-scale--3) var(--default-color-08);
      --default-container-background: var(--default-color-09);
    }
    :root:not([data-theme=light]) abbr {
      color: var(--secondary-accent-color-05);
    }
    :root:not([data-theme=light]) del, :root:not([data-theme=light]) ins, :root:not([data-theme=light]) kbd.key {
      color: var(--text-color-00);
    }
    :root:not([data-theme=light]) a {
      --link-color: var(--secondary-accent-color-06);
    }
    :root:not([data-theme=light]) a:active, :root:not([data-theme=light]) a:hover, :root:not([data-theme=light]) a:focus-within {
      --link-color: var(--secondary-accent-color-04) ;
    }
    :root:not([data-theme=light]) a:visited {
      --link-color: var(--secondary-accent-color-09);
    }
    :root:not([data-theme=light]) legend {
      --color: var(--default-color-09);
    }
    :root:not([data-theme=light]) .primary, :root:not([data-theme=light]) .toggle-with-icon:has(input[type=radio]:checked) {
      --color: var(--primary-accent-color-09);
    }
    :root:not([data-theme=light]) .toggle-with-icon:has(input[type=checkbox]:not(:disabled):is(:checked, :indeterminate)),
    :root:not([data-theme=light]) .toggle-with-icon input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
      --inset-box-shadow-color: var(--secondary-accent-color-07);
      --background: var(--secondary-accent-color-06);
      --color: var(--primary-accent-color-09);
    }
    :root:not([data-theme=light]) table tbody tr:nth-child(even) td {
      color: var(--text-color-00);
    }
    :root:not([data-theme=light]) button {
      --color: var(--primary-accent-color-09);
      --background: var(--sand-03);
      --dimension-color: var(--sand-08);
    }
    :root:not([data-theme=light]) button:disabled {
      --color: var(--primary-accent-color-09);
      --background: var(--sand-00);
    }
    :root:not([data-theme=light]) input:is([aria-invalid=true], :user-invalid), :root:not([data-theme=light]) select:is([aria-invalid=true], :user-invalid) {
      --background: var(--danger-color-03);
      --inset-box-shadow-color: var(--danger-color-05);
    }
    @supports not selector(:user-invalid) {
      [data-js-enabled=false] :root:not([data-theme=light]) input:invalid, [data-js-enabled=false] :root:not([data-theme=light]) select:invalid {
        --background: var(--danger-color-03);
        --inset-box-shadow-color: var(--danger-color-05);
      }
    }
    :root:not([data-theme=light]) .tag:disabled .icon-frame {
      --icon-color: var(--text-color-00);
    }
    :root:not([data-theme=light]) .success {
      --color: var(--text-color-09);
      --background: var(--success-color-06);
      --dimension-color: var(--success-color-07);
    }
    :root:not([data-theme=light]) .success:disabled {
      --background: var(--success-color-02);
      --dimension-color: var(--success-color-04);
    }
    :root:not([data-theme=light]) .danger {
      --color: var(--text-color-09);
      --background: var(--danger-color-06);
    }
    :root:not([data-theme=light]) .danger:disabled {
      --color: var(--danger-color-09);
      --background: var(--danger-color-02);
      --dimension-color: var(--danger-color-07);
    }
  }
  :root[data-theme=dark] {
    --details-background: var(--default-color-09);
    --default-inner-shadow: inset 0 0 var(--spacing-scale--3) var(--spacing-scale--3) var(--default-color-08);
    --default-container-background: var(--default-color-09);
  }
  :root[data-theme=dark] abbr {
    color: var(--secondary-accent-color-05);
  }
  :root[data-theme=dark] del, :root[data-theme=dark] ins, :root[data-theme=dark] kbd.key {
    color: var(--text-color-00);
  }
  :root[data-theme=dark] a {
    --link-color: var(--secondary-accent-color-06);
  }
  :root[data-theme=dark] a:active, :root[data-theme=dark] a:hover, :root[data-theme=dark] a:focus-within {
    --link-color: var(--secondary-accent-color-04) ;
  }
  :root[data-theme=dark] a:visited {
    --link-color: var(--secondary-accent-color-09);
  }
  :root[data-theme=dark] legend {
    --color: var(--default-color-09);
  }
  :root[data-theme=dark] .primary, :root[data-theme=dark] .toggle-with-icon:has(input[type=radio]:checked) {
    --color: var(--primary-accent-color-09);
  }
  :root[data-theme=dark] .toggle-with-icon:has(input[type=checkbox]:not(:disabled):is(:checked, :indeterminate)),
  :root[data-theme=dark] .toggle-with-icon input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
    --inset-box-shadow-color: var(--secondary-accent-color-07);
    --background: var(--secondary-accent-color-06);
    --color: var(--primary-accent-color-09);
  }
  :root[data-theme=dark] table tbody tr:nth-child(even) td {
    color: var(--text-color-00);
  }
  :root[data-theme=dark] button {
    --color: var(--primary-accent-color-09);
    --background: var(--sand-03);
    --dimension-color: var(--sand-08);
  }
  :root[data-theme=dark] button:disabled {
    --color: var(--primary-accent-color-09);
    --background: var(--sand-00);
  }
  :root[data-theme=dark] input:is([aria-invalid=true], :user-invalid), :root[data-theme=dark] select:is([aria-invalid=true], :user-invalid) {
    --background: var(--danger-color-03);
    --inset-box-shadow-color: var(--danger-color-05);
  }
  @supports not selector(:user-invalid) {
    [data-js-enabled=false] :root[data-theme=dark] input:invalid, [data-js-enabled=false] :root[data-theme=dark] select:invalid {
      --background: var(--danger-color-03);
      --inset-box-shadow-color: var(--danger-color-05);
    }
  }
  :root[data-theme=dark] .tag:disabled .icon-frame {
    --icon-color: var(--text-color-00);
  }
  :root[data-theme=dark] .success {
    --color: var(--text-color-09);
    --background: var(--success-color-06);
    --dimension-color: var(--success-color-07);
  }
  :root[data-theme=dark] .success:disabled {
    --background: var(--success-color-02);
    --dimension-color: var(--success-color-04);
  }
  :root[data-theme=dark] .danger {
    --color: var(--text-color-09);
    --background: var(--danger-color-06);
  }
  :root[data-theme=dark] .danger:disabled {
    --color: var(--danger-color-09);
    --background: var(--danger-color-02);
    --dimension-color: var(--danger-color-07);
  }
}
@layer framework.reset {
  body {
    margin: 0;
  }
}
@layer framework.theme {
  /* These all come from Trix / ActionText. This should probably be cleaned up into
     a regular .css for users to include.
  */
  .trix-content .rhino-upload-error {
    background-color: rgba(255, 0, 0, 0.3);
  }
  .trix-content :is(img, svg, figure) {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
  .trix-content figure {
    position: relative;
  }
  .trix-content figcaption {
    line-break: anywhere;
    display: inline-block;
    white-space: normal;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    text-align: center;
    vertical-align: top;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  /* If you use white-space: normal; in firefox you cant add blank space to the figcaption */
  .trix-content[contenteditable=true] figcaption {
    white-space: break-spaces;
  }
  /* Attachments */
  .trix-content:not([readonly]) figure:is(:focus-within, :focus, .has-focus):nth-child(2) {
    outline: transparent;
    box-shadow: var(--rhino-focus-ring);
  }
  .rhino-attachment-editor::part(delete-button),
  .rhino-attachment-editor::part(file-metadata) {
    display: none;
  }
  .trix-content:not([readonly]) figure:is(:focus-within, :focus, .has-focus) .rhino-attachment-editor::part(delete-button),
  .trix-content:not([readonly]) figure:is(:focus-within, :focus, .has-focus) .rhino-attachment-editor::part(file-metadata) {
    display: flex;
  }
  .trix-content .placeholder {
    position: absolute;
    pointer-events: none;
    color: var(--rhino-placeholder-text-color);
    cursor: text;
    content: "";
  }
  .trix-content[contenteditable=true] {
    /* Required by Prosemirror / TipTap */
    white-space: pre-wrap;
  }
  .trix-content:is(:focus, :focus-within) {
    border-color: var(--rhino-button-active-border-color);
  }
  .trix-content figure.attachment figcaption {
    position: relative;
  }
  .trix-content p.is-editor-empty:first-child::before,
  .trix-content figure[data-trix-attachment].has-focus figcaption.is-empty::before {
    color: var(--rhino-placeholder-text-color);
    content: attr(data-placeholder);
    pointer-events: none;
  }
  .trix-content figure[data-trix-attachment]:not(.has-focus) figcaption.is-empty::before {
    content: attr(data-default-caption);
    pointer-events: none;
  }
  .trix-content ul {
    list-style: disc;
  }
  .trix-content figure[data-trix-attachment].has-focus figcaption.is-empty::before {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
  }
  .trix-content p.is-editor-empty:first-child::before {
    float: left;
    height: 0;
    pointer-events: none;
  }
  .trix-content .attachment {
    display: block;
    position: relative;
    max-width: 100%;
  }
  .trix-content .attachment a {
    color: inherit;
    text-decoration: none;
  }
  .trix-content .attachment a:hover,
  .trix-content .attachment a:visited:hover {
    color: inherit;
  }
  .trix-content .attachment__caption {
    text-align: center;
    margin-top: 0.5em;
  }
  .trix-content .attachment__caption .attachment__name + .attachment__size::before {
    content: " · ";
  }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center;
    margin: 0.6em 0;
  }
  .trix-content .attachment--preview .attachment__caption {
    color: #666;
    font-size: 0.9em;
    line-height: 1.2;
  }
  .trix-content .attachment.attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid var(--rhino-border-color);
    border-radius: var(--rhino-border-radius);
  }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }
  /* For if galleries are disabled */
  .trix-content figure.attachment {
    display: inline-block;
    position: relative;
    white-space: normal;
  }
  /* This is a cheap easy way to allow us to show <p> tags in galleries */
  .trix-content .attachment-gallery > p {
    width: 0px;
    padding: 0;
    flex-basis: 0%;
    max-width: 0%;
    flex-shrink: 1;
    flex-grow: 0;
  }
  .trix-content .attachment-gallery .attachment {
    flex: 1 0 100%;
    padding: 0 0.5em;
    max-width: 100%;
    white-space: normal;
  }
  .trix-content .attachment-gallery > :is(.attachment--preview, action-text-attachment[previewable=true]) {
    flex: 1 0 33%;
    padding: 0 0.5em;
    max-width: 33%;
    white-space: normal;
  }
  /* 1 / 3 / n item[s] */
  .trix-content .attachment-gallery > :is(.attachment, action-text-attachment):first-of-type:nth-last-of-type(1) ~ :is(.attachment, action-text-attachment),
  .trix-content .attachment-gallery > :is(.attachment, action-text-attachment):first-of-type:nth-last-of-type(1) {
    padding: 0;
    flex-basis: 100%;
    max-width: 100%;
  }
  /* 2 items / 4 items */
  .attachment-gallery > :is(.attachment--preview,
  action-text-attachment[previewable=true]):first-of-type:nth-last-of-type(2),
  .attachment-gallery > :is(.attachment--preview,
  action-text-attachment[previewable=true]):first-of-type:nth-last-of-type(2) ~ :is(.attachment--preview, action-text-attachment[previewable=true]),
  .attachment-gallery > :is(.attachment--preview,
  action-text-attachment[previewable=true]):first-of-type:nth-last-of-type(4),
  .attachment-gallery > :is(.attachment--preview,
  action-text-attachment[previewable=true]):first-of-type:nth-last-of-type(4) ~ :is(.attachment--preview, action-text-attachment[previewable=true]) {
    flex-basis: 50%;
    max-width: 50%;
  }
  /** This carry over from Trix's gallery for backwards compat */
  .trix-content .attachment-gallery.attachment-gallery--2 action-text-attachment > .attachment,
  .trix-content .attachment-gallery.attachment-gallery--4 action-text-attachment > .attachment,
  .trix-content .attachment-gallery action-text-attachment > .attachment {
    max-width: 100%;
  }
  practical-editor::part(toolbar__base) {
    border-color: transparent;
  }
  practical-editor::part(toolbar__button), practical-editor::part(link-dialog__button) {
    font-size: var(--spacing-scale-0);
    font-family: var(--interactive-ui-font-family);
  }
  practical-editor::part(toolbar__button--disabled) {
    --color: var(--default-color-09);
    --background: var(--default-color-00);
    cursor: not-allowed;
    background: var(--background);
  }
  practical-editor::part(toolbar__button--active) {
    background: var(--secondary-accent-color-03);
  }
  .trix-content {
    padding: var(--spacing-scale--3);
  }
  practical-editor {
    --rhino-button-active-border-color: var(--secondary-accent-color-04);
    --rhino-border-color: var(--default-border-color);
    --rhino-focus-ring: 0px 0px var(--spacing-scale--4) 0px var(--rhino-button-active-border-color);
    --rhino-border-radius: var(--squircle-border-radius, var(--spacing-scale--4));
    --rhino-danger-border-color: var(--danger-color-08);
    --rhino-danger-background-color: var(--danger-color-02);
    --rhino-text-color: var(--color);
    --rhino-border-color: var(--default-border-color);
    --rhino-placeholder-text-color: var(--placeholder-color, var(--default-placeholder-color));
    --rhino-button-text-color: var(--color);
    --rhino-button-border-color: var(--default-border-color);
    --rhino-button-disabled-text-color: var(--default-color-07);
    --rhino-button-disabled-border-color: var(--default-border-color);
    --rhino-button-disabled-background-color: var(--default-color-05);
    --rhino-button-active-border-color: var(--secondary-accent-color-04);
    --rhino-button-active-background-color: var(--default-color-05);
    --rhino-toolbar-text-color: var(--color);
    --rhino-toolbar-icon-size: 0;
    --rhino-dialog-border-color: hsl( var(--rhino-button-focus-background-color-hsl) / 50% );
    --rhino-button-focus-background-color: initial;
    --color: var(--primary-accent-color-09);
    --frame-color: var(--primary-accent-color-08);
    --frame-size: var(--spacing-scale--5);
    --background: var(--default-color-02);
    --dimension-color: var(--default-dimension-color);
    --dimension-size: var(--spacing-scale--5);
    --inset-box-shadow-color: var(--default-color-05);
    --inset-box-shadow: inset 0 0 var(--spacing-scale--5) var(--spacing-scale--5) var(--inset-box-shadow-color);
    border-style: solid;
    border-color: var(--frame-color);
    border-width: var(--frame-size);
    box-shadow: var(--inset-box-shadow);
    background: var(--background);
    color: var(--color);
  }
  practical-editor.raised {
    border-style: solid !important;
    border-color: var(--frame-color);
    border-width: var(--frame-size);
    box-shadow: var(--dimension-box-shadow), var(--inset-box-shadow);
  }
  practical-editor:disabled {
    --frame-color: var(--gray-08, var(--default-disabled-color));
    --background: var(--default-color-00);
    --inset-box-shadow-color: var(--default-color-02);
  }
  practical-editor:is([aria-invalid=true], :user-invalid) {
    --frame-color: var(--danger-color-08);
    --background: var(--danger-color-02);
    --dimension-color: var(--danger-color-07);
    --inset-box-shadow-color: var(--danger-color-03);
  }
  @supports not selector(:user-invalid) {
    [data-js-enabled=false] practical-editor:invalid {
      --frame-color: var(--danger-color-08);
      --background: var(--danger-color-02);
      --dimension-color: var(--danger-color-07);
      --inset-box-shadow-color: var(--danger-color-03);
    }
  }
  practical-editor ul, practical-editor ol {
    margin-inline-start: 1em;
  }
}
@layer framework.containers {
  .app-chrome > main > .cover {
    min-block-size: 100%;
  }
  .app-chrome > header.box-compact {
    border-inline: none;
    border-block-start: none;
  }
  .app-chrome > header nav > ol {
    padding-inline-start: 0;
  }
  dialog:not([open]).cluster-default {
    display: revert;
  }
  .notification-messages > dialog {
    position: unset;
    margin-inline: 0;
  }
  .notification-messages.box-compact {
    border: 0;
  }
}
@layer framework.containers {
  .timeline {
    list-style: none;
    padding-inline-start: 0;
  }
  .timeline-entry > blockquote {
    margin-inline-start: 0;
  }
}
@layer framework.theme {
  .administrator header {
    background: var(--warning-color-06);
    --header-color: var(--warning-color-09);
    --default-border-color: var(--warning-color-07);
  }
  .notification-messages dialog.alert {
    --text-color: var(--danger-color-09);
    --default-border-color: var(--danger-color-07);
    --default-container-background: var(--danger-color-03);
    --default-dimension-color: var(--danger-color-08);
    --default-inner-shadow: inset 0 0 var(--spacing-scale--3) var(--spacing-scale--3) var(--danger-color-04);
    --popover-box-shadow: var(--default-inner-shadow), 0 var(--spacing-scale--5) 0 var(--default-dimension-color);
  }
  .notification-messages dialog.alert button {
    --background: var(--danger-color-04);
    --color: var(--danger-color-09);
    --dimension-color: var(--danger-color-08) ;
  }
  hr {
    inline-size: 50%;
  }
}
@layer framework.utility {
  .no-border {
    border: none !important;
  }
}

/*# sourceMappingURL=practical-framework.css.map */