/* SmoothCSS v0.0.5beta | (c) Robert McCormick */
@layer tokens, global, layouts, skins, components, utilities;

/* app/assets/stylesheets/smoothcss/tokens.css */
@layer tokens {
  :root {
    --font-sans-system:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Helvetica Neue",
      "Helvetica",
      "Arial",
      sans-serif;
    --font-mono-system:
      SF Mono,
      SFMono-Regular,
      ui-monospace,
      Menlo,
      monospace;
    --font-family-heading: var(--font-sans-system);
    --font-family-body: var(--font-sans-system);
    --font-family-mono: var(--font-mono-system);
    --font-size-base: var(--step-3);
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
    --line-height-micro: 0.85;
    --line-height-flat: 1;
    --line-height-fine: 1.1;
    --line-height-standard: 1.4;
    --line-height-loose: 1.6;
    --font-weight-heading: var(--font-weight-bold);
    --font-weight-body-emphasis: var(--font-weight-semibold);
    --heading-letter-spacing: -0.015ch;
    --button-letter-spacing: 0.02ch;
    --max-main-heading-inline-size: 26ch;
    --max-sub-heading-inline-size: 34ch;
    --max-content-inline-size: 70ch;
    --step-1: 0.75rem;
    --step-2: 0.875rem;
    --step-3: 1rem;
    --step-4: clamp(1.125rem, 1.0957rem + 0.1304vw, 1.2rem);
    --step-5: clamp(1.2656rem, 1.1974rem + 0.3033vw, 1.44rem);
    --step-6: clamp(1.4238rem, 1.3048rem + 0.529vw, 1.728rem);
    --step-7: clamp(1.6018rem, 1.4172rem + 0.8205vw, 2.0736rem);
    --step-8: clamp(1.802rem, 1.5335rem + 1.1935vw, 2.4883rem);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-1-2: clamp(0.25rem, 0.1522rem + 0.4348vw, 0.5rem);
    --space-2-3: clamp(0.5rem, 0.4022rem + 0.4348vw, 0.75rem);
    --space-3-4: clamp(0.75rem, 0.6522rem + 0.4348vw, 1rem);
    --space-4-5: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem);
    --space-5-6: clamp(1.5rem, 1.3043rem + 0.8696vw, 2rem);
    --space-6-7: clamp(2rem, 1.6087rem + 1.7391vw, 3rem);
    --space-7-8: clamp(3rem, 2.6087rem + 1.7391vw, 4rem);
    --space-8-9: clamp(4rem, 3.2174rem + 3.4783vw, 6rem);
    --container-1: 16rem;
    --container-2: 20rem;
    --container-3: 24rem;
    --container-4: 28rem;
    --container-5: 32rem;
    --container-6: 36rem;
    --container-7: 42rem;
    --container-8: 48rem;
    --container-9: 56rem;
    --container-10: 64rem;
    --container-11: 72rem;
    --container-12: 80rem;
    --site-max-inline-size: 80rem;
    --gutter: var(--space-4-5);
    --border-radius-1: 0.125rem;
    --border-radius-2: 0.25rem;
    --border-radius-3: 0.5rem;
    --border-radius-4: 1rem;
    --border-radius-full: calc(infinity * 1px);
    --border-form-input: 1px solid var(--color-outline);
    --border-radius-form-input: var(--border-radius-2);
    --outline-width: 1px;
    --color-light-surface-lowest: #f9f9f9;
    --color-light-surface-mid: #e8e8e8;
    --color-light-surface-highest: #d5d5d5;
    --color-light-on-surface: #1a1a1a;
    --color-light-on-surface-variant: #525252;
    --color-light-outline: #7a7a7a;
    --color-light-outline-variant: #d5d5d5;
    --color-light-primary: var(--color-light-on-surface);
    --color-light-on-primary: var(--color-light-surface-lowest);
    --color-light-primary-container: var(--color-light-surface-highest);
    --color-light-on-primary-container: var(--color-light-on-surface);
    --color-light-on-primary-container-variant: var( --color-light-on-surface-variant );
    --color-light-primary-outline: var(--color-light-outline);
    --color-light-error: #ba1a1a;
    --color-light-on-error: #f2e9e9;
    --color-light-error-container: #f5dcdc;
    --color-light-on-error-container: #750000;
    --color-light-on-error-container-variant: #8e0000;
    --color-light-error-outline: #d99898;
    --hover-light-color-mix-percentage: 7%;
    --color-dark-surface-lowest: #141414;
    --color-dark-surface-mid: #333333;
    --color-dark-surface-highest: #525252;
    --color-dark-on-surface: #e5e5e5;
    --color-dark-on-surface-variant: #c7c7c7;
    --color-dark-outline: #9e9e9e;
    --color-dark-outline-variant: #525252;
    --color-dark-primary: var(--color-dark-on-surface);
    --color-dark-on-primary: var(--color-dark-surface-lowest);
    --color-dark-primary-container: var(--color-dark-surface-highest);
    --color-dark-on-primary-container: var(--color-dark-on-surface);
    --color-dark-on-primary-container-variant: var( --color-dark-on-surface-variant );
    --color-dark-primary-outline: var(--color-dark-outline);
    --color-dark-error: #b21212;
    --color-dark-on-error: #efdddd;
    --color-dark-error-container: #470b0b;
    --color-dark-on-error-container: #f49d9d;
    --color-dark-on-error-container-variant: #d67575;
    --color-dark-error-outline: #6b0b0b;
    --hover-dark-color-mix-percentage: 12%;
    --color-surface-lowest: light-dark( var(--color-light-surface-lowest), var(--color-dark-surface-lowest) );
    --color-surface-mid: light-dark( var(--color-light-surface-mid), var(--color-dark-surface-mid) );
    --color-surface-highest: light-dark( var(--color-light-surface-highest), var(--color-dark-surface-highest) );
    --color-on-surface: light-dark( var(--color-light-on-surface), var(--color-dark-on-surface) );
    --color-on-surface-variant: light-dark( var(--color-light-on-surface-variant), var(--color-dark-on-surface-variant) );
    --color-outline: light-dark( var(--color-light-outline), var(--color-dark-outline) );
    --color-outline-variant: light-dark( var(--color-light-outline-variant), var(--color-dark-outline-variant) );
    --color-primary: light-dark( var(--color-light-primary), var(--color-dark-primary) );
    --color-on-primary: light-dark( var(--color-light-on-primary), var(--color-dark-on-primary) );
    --color-primary-container: light-dark( var(--color-light-primary-container), var(--color-dark-primary-container) );
    --color-on-primary-container: light-dark( var(--color-light-on-primary-container), var(--color-dark-on-primary-container) );
    --color-on-primary-container-variant: light-dark( var(--color-light-on-primary-container-variant), var(--color-dark-on-primary-container-variant) );
    --color-primary-outline: light-dark( var(--color-light-primary-outline), var(--color-dark-primary-outline) );
    --color-error: light-dark(var(--color-light-error), var(--color-dark-error));
    --color-on-error: light-dark( var(--color-light-on-error), var(--color-dark-on-error) );
    --color-error-container: light-dark( var(--color-light-error-container), var(--color-dark-error-container) );
    --color-on-error-container: light-dark( var(--color-light-on-error-container), var(--color-dark-on-error-container) );
    --color-on-error-container-variant: light-dark( var(--color-light-on-error-container-variant), var(--color-dark-on-error-container-variant) );
    --color-error-outline: light-dark( var(--color-light-error-outline), var(--color-dark-error-outline) );
    --outline: var(--outline-width) solid var(--color-outline);
    --outline-variant: var(--outline-width) solid var(--color-outline-variant);
    --color-form-input: var(--color-on-surface);
    --color-form-input-background: var(--color-surface-lowest);
    --hover-background-mix-percentage: calc( 100% - var(--hover-color-mix-percentage) );
    --shadow-4: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-5: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2);
    --popover-transition-time: 180ms;
    --popover-common-transitions:
      opacity var(--popover-transition-time) ease-out,
      overlay var(--popover-transition-time) allow-discrete,
      display var(--popover-transition-time) allow-discrete;
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
  :root,
  [data-user-scheme-dark=false] {
    --hover-color-mix-percentage: var(--hover-light-color-mix-percentage);
  }
  [data-user-scheme-dark=true] {
    --hover-color-mix-percentage: var(--hover-dark-color-mix-percentage);
  }
}

/* app/assets/stylesheets/smoothcss/global.css */
@layer global {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    color-scheme: light dark;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    word-break: break-word;
    scroll-behavior: smooth;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd,
  ul,
  ol,
  pre {
    margin: 0;
  }
  body {
    color: var(--color-on-surface);
    background-color: var(--color-surface-lowest);
    font-family: var(--font-family-body);
    font-size: var(--step-3);
    line-height: var(--line-height-standard);
    min-height: 100vh;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--heading-letter-spacing);
  }
  h1,
  h2,
  h3 {
    line-height: var(--line-height-fine);
    text-wrap: balance;
  }
  h1 {
    font-size: var(--step-7);
    max-inline-size: var(--max-main-heading-inline-size);
  }
  h2 {
    font-size: var(--step-6);
    max-inline-size: var(--max-sub-heading-inline-size);
  }
  h3 {
    font-size: var(--step-5);
    max-inline-size: var(--max-sub-heading-inline-size);
  }
  h4,
  h5,
  h6 {
    font-size: var(--step-4);
  }
  h4,
  h5,
  h6,
  p,
  li,
  dd,
  blockquote {
    max-inline-size: var(--max-content-inline-size);
    text-wrap: pretty;
  }
  ins {
    text-decoration: none;
    color: var(--color-on-primary-container);
    background: var(--color-primary-container);
    padding-inline: 0.3em;
  }
  strong,
  b {
    font-weight: var(--font-weight-body-emphasis);
  }
  code,
  kbd,
  samp {
    font-family: var(--font-family-mono);
    padding: 0.1em 0.2em 0.05em 0.2em;
    border-radius: var(--border-radius-1);
    hyphens: none;
    tab-size: 2;
    text-align: left;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    box-decoration-break: clone;
    font-size: 0.925em;
  }
  code {
    background-color: var(--color-surface-mid);
    font-variant-numeric: slashed-zero;
  }
  samp {
    font-weight: var(--font-weight-body-emphasis);
  }
  pre:has(code) {
    inline-size: max-content;
    max-inline-size: 100%;
    overflow-x: auto;
    padding: 1em;
    background-color: var(--color-surface-mid);
    border-radius: var(--border-radius-2);
  }
  pre code {
    padding: 0;
  }
  kbd {
    border: 1px solid var(--color-outline);
    border-block-end-width: 2px;
    border-radius: var(--border-radius-1);
    padding-block-end: 0.1em;
  }
  var {
    font-style: normal;
    font-weight: var(--font-weight-body-emphasis);
  }
  sub,
  sup {
    line-height: 0;
  }
  math,
  time,
  table {
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
  }
  abbr {
    text-decoration: none;
  }
  abbr[title] {
    cursor: help;
    text-decoration: underline dotted;
  }
  q {
    font-style: italic;
  }
  blockquote:not([class]) {
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    border-inline-start: var(--space-1) solid var(--color-outline-variant);
  }
  blockquote q {
    font-style: normal;
  }
  blockquote:not([class]) footer {
    font-size: var(--step-2);
    margin-block-start: var(--space-2);
  }
  ol:not([class]) {
    padding-inline-start: 3ch;
  }
  ul:not([class]) {
    padding-inline-start: 1.75ch;
  }
  :where(ol, ul):not([class]) li + * {
    margin-block-start: var(--list-space, 0.5em);
  }
  :where(ol, ul):not([class]) :where(ol, ul):not([class]) li {
    margin-block-start: var(--list-space, 0.5em);
  }
  ol ::marker {
    font-size: 0.9em;
  }
  ul[role=list],
  ol[role=list] {
    list-style: none;
    padding: 0;
    margin: 0;
    --list-space: 0;
  }
  dt {
    font-weight: var(--font-weight-body-emphasis);
  }
  dt + dd {
    margin-block-start: 0.25em;
  }
  dd + dt {
    margin-block-start: 1em;
  }
  dd {
    margin-inline-start: 1.5ch;
  }
  img,
  picture,
  video,
  canvas,
  iframe {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  img {
    font-size: var(--step-1);
  }
  video,
  iframe[src*=youtube],
  iframe[src*=vimeo] {
    inline-size: 100%;
    aspect-ratio: 16/9;
  }
  figure {
    inline-size: fit-content;
  }
  figcaption {
    contain: inline-size;
    font-size: var(--step-2);
  }
  svg:not([class]) {
    inline-size: auto;
    height: 1lh;
  }
  svg {
    flex-shrink: 0;
  }
  svg:not([fill]) {
    fill: currentColor;
  }
  svg[role=img][width][height] {
    width: revert;
    height: revert;
  }
  table {
    --table-border: 1px solid var(--color-outline);
    border: var(--table-border);
    border-collapse: collapse;
    inline-size: 100%;
  }
  th {
    text-align: start;
    word-break: normal;
    color: var(--color-on-surface);
    font-weight: var(--font-weight-body-emphasis);
    line-height: var(--line-height-fine);
    background-color: var(--color-surface-mid);
  }
  thead th {
    padding-block: var(--space-3);
  }
  td,
  th {
    padding: var(--space-1) var(--space-2);
  }
  th:not(:only-of-type) {
    border-block-end: var(--table-border);
  }
  th:only-of-type {
    border-inline-end: var(--table-border);
  }
  :where(th, td) ~ :where(th, td) {
    border-inline-start: var(--table-border);
  }
  tr + tr :where(th, td) {
    border-block-start: var(--table-border);
  }
  caption {
    caption-side: bottom;
    margin-block-start: var(--space-3);
  }
  hr {
    border: none;
    border-block-start: var(--outline-variant);
    margin-block: var(--stack-space, var(--space-5));
  }
  a {
    color: currentColor;
    text-decoration-thickness: 0.12ex;
  }
  a:hover {
    text-decoration: none;
  }
  :is(h1, h2, h3, h4, h5, h6) a {
    text-decoration-line: none;
  }
  :is(h1, h2, h3, h4, h5, h6) a:hover {
    text-decoration-line: underline;
    text-underline-offset: 0.18ex;
  }
  :focus {
    outline: none;
  }
  :focus-visible {
    outline: 2px solid var(--focus-color, currentColor);
    outline-offset: var(--focus-offset, 0.2lh);
  }
  @supports (-moz-appearance: none) {
    :root {
      --focus-offset: 0.08em;
    }
  }
  input,
  button,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }
  form > *:not(input[type=hidden]) + *:not(input[type=hidden]) {
    margin-top: var(--stack-space, 1.25em);
  }
  input,
  select,
  textarea {
    accent-color: var(--color-primary);
  }
  :is(input, select, textarea) ~ p {
    font-size: var(--step-2);
    color: var(--color-on-surface-variant);
    margin-top: 0.4em;
  }
  :is(input, select, textarea) ~ p[role=alert] {
    color: var(--color-error);
  }
  input:not([type=checkbox], [type=radio], [type=color]),
  select,
  textarea {
    padding: 0.5em 0.8em;
    border: var(--border-form-input);
    border-radius: var(--border-radius-form-input);
    color: var(--color-form-input);
    background-color: var(--color-form-input-background);
    inline-size: 100%;
    &::placeholder {
      color: var(--color-on-surface-variant);
      opacity: 0.7;
    }
  }
  select,
  ::picker(select) {
    appearance: base-select;
  }
  select:open {
    outline: solid var(--color-primary) 2px;
    outline-offset: -1px;
  }
  select::picker-icon {
    mask-image: var(--icon-chevron-down);
    width: 1lh;
    height: 1lh;
    background-color: currentColor;
    mask-size: cover;
  }
  ::picker(select) {
    background-color: var(--color-surface-lowest);
    border: var(--border-form-input);
    border-radius: var(--border-radius-form-input);
    margin-block-start: var(--space-1);
    padding: var(--space-1);
    box-shadow: var(--shadow-4);
  }
  option:hover {
    background-color: var(--color-surface-mid);
  }
  :where(input:not([type=checkbox], [type=radio], [type=color], [readonly]), select, textarea):focus-visible {
    --focus-color: var(--color-primary);
    --focus-offset: -1px;
  }
  :where(input:not([type=checkbox], [type=radio], [type=color], [readonly]), select, textarea)[aria-invalid=true] {
    outline: 2px solid var(--color-error);
    outline-offset: -1px;
  }
  textarea:not([rows]) {
    field-sizing: content;
    min-block-size: 5lh;
  }
  label {
    display: block;
    font-weight: var(--font-weight-body-emphasis);
  }
  label:has(input) {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-weight: var(--font-weight-normal);
  }
  label:has(input) + label:has(input) {
    margin-block-start: 0.8em;
  }
  input:disabled {
    background: var(--color-surface-highest);
  }
  input:disabled,
  label input:disabled + * {
    opacity: 60%;
    cursor: not-allowed;
  }
  fieldset {
    border: none;
    padding: 0;
  }
  legend {
    font-weight: var(--font-weight-body-emphasis);
    padding: 0;
    margin-block-end: 0.5em;
  }
  details[open] summary {
    margin-block-end: 0.5em;
  }
  summary {
    font-weight: var(--font-weight-body-emphasis);
    cursor: pointer;
  }
  summary::marker {
    color: color-mix(in hsl, currentColor 55%, transparent 45%);
  }
  dialog {
    background: light-dark(var(--color-surface-lowest), var(--color-surface-mid));
    border: var(--outline);
    border-color: light-dark(var(--color-outline), var(--color-outline-variant));
    border-radius: var(--border-radius-3);
    padding: var(--gutter);
  }
  dialog > * + * {
    margin-block-start: var(--stack-space, 1em);
  }
  dialog::backdrop {
    background-color: #14141450;
  }
  dialog:modal::backdrop {
    backdrop-filter: blur(3px);
  }
  dialog {
    opacity: 0;
    scale: 0.9;
    transition: scale var(--popover-transition-time) ease-out, var(--popover-common-transitions);
  }
  dialog::backdrop {
    opacity: 0;
    transition: backdrop-filter var(--popover-transition-time) ease-out, var(--popover-common-transitions);
  }
  dialog:open,
  dialog:popover-open {
    opacity: 1;
    scale: 1;
  }
  dialog:open::backdrop,
  dialog:popover-open::backdrop {
    opacity: 1;
  }
  @starting-style {
    dialog:open,
    dialog:popover-open {
      opacity: 0;
      scale: 0.9;
    }
    dialog:open::backdrop,
    dialog:popover-open::backdrop {
      opacity: 0;
      backdrop-filter: 0;
    }
  }
  [hidden]:where(:not([hidden=until-found])) {
    display: none !important;
  }
  :target {
    scroll-margin-block: 5ex;
  }
  ::selection {
    color: var(--color-on-primary);
    background-color: var(--color-primary);
  }
  [data-user-scheme-dark=false] {
    color-scheme: light;
  }
  [data-user-scheme-dark=true] {
    color-scheme: dark;
  }
}

/* app/assets/stylesheets/smoothcss/layouts.css */
@layer layouts {
  .center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--cluster-horizontal-alignment, start);
    align-items: var(--cluster-vertical-alignment, center);
    gap: var(--cluster-gap, var(--gutter));
  }
  .grid-auto {
    display: grid;
    grid-template-columns: repeat(var(--grid-auto-placement, auto-fit), var( --grid-auto-target-width, minmax( min(var(--grid-auto-min-column-width, var(--container-1)), 100%), 1fr ) ));
    gap: var(--grid-auto-gap, var(--gutter));
  }
  .prose > * + * {
    margin-block-start: var(--prose-space, var(--space-4));
  }
  .prose > :is(h2, h3, h4, h5, h6) + :is(p, ul, ol, blockquote) {
    --prose-space: var(--space-3);
  }
  .prose > :is(p, ul, ol, dl, blockquote, hr, div) + :is(h2, h3, h4, h5, h6),
  .prose > :is(hr, pre, table, img, figure, picture, video),
  .prose > :is(hr, pre, table, img, figure, picture, video) + * {
    --prose-space: var(--space-5-6);
  }
  .region {
    padding-block: var(--region-space, var(--space-6));
  }
  .repel {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: var(--repel-vertical-alignment, center);
    gap: var(--repel-gap, var(--gutter));
  }
  .stack > * + * {
    margin-block-start: var(--stack-space, 1em);
  }
  .switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: var(--switcher-vertical-alignment, start);
    gap: var(--switcher-gap, var(--gutter));
  }
  .switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--switcher-size, var(--container-6)) - 100%) * 999);
  }
  .switcher > :nth-last-child(n+4),
  .switcher > :nth-last-child(n+4) ~ * {
    flex-basis: 100%;
  }
  :is(.uneven-split, .uneven-split-end) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uneven-split-gap, var(--gutter));
  }
  :is(.uneven-split > :first-child, .uneven-split-end > :last-child) {
    flex-basis: var(--uneven-split-fixed-width, var(--container-1));
    flex-grow: 1;
  }
  :is(.uneven-split > :last-child, .uneven-split-end > :first-child) {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--uneven-split-min-main-width, 50%);
  }
  [class*=wrapper] {
    box-sizing: content-box;
    max-inline-size: var(--wrapper-max-inline-size, var(--site-max-inline-size));
    margin-inline: auto;
    padding-inline: var(--wrapper-buffer, var(--gutter));
  }
}

/* app/assets/stylesheets/smoothcss/skins.css */
@layer skins {
  .alert {
    color: var(--color-on-surface);
    background-color: var(--alert-background, var(--color-surface-mid));
    padding: var(--alert-padding, var(--space-3-4));
    border: var(--alert-border, var(--outline-variant));
    border-radius: var(--alert-border-radius, var(--border-radius-3));
  }
  .alert :is(h1, h2, h3, h4, h5, h6) {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-body-emphasis);
  }
  .alert :not(:is(h1, h2, h3, h4, h5, h6)) {
    color: var(--color-on-surface-variant);
  }
  .avatar {
    display: inline-block;
    aspect-ratio: 1/1;
    object-fit: cover;
    block-size: var(--avatar-size, var(--space-7));
    inline-size: var(--avatar-size, var(--space-7));
    border-radius: var(--avatar-border-radius, var(--border-radius-full));
    border: var(--outline);
    flex-shrink: 1;
  }
  .badge {
    font-size: var(--step-1);
    font-weight: var(--font-weight-body-emphasis);
    color: var(--badge-color, var(--color-on-surface-variant));
    background: var(--badge-background, var(--color-surface-highest));
    border-radius: var(--badge-border-radius, var(--border-radius-1));
    padding: var(--badge-padding, 0.3em 0.6em);
  }
  .banner {
    box-sizing: content-box;
    font-size: var(--step-2);
    text-align: center;
    color: var(--color-on-surface);
    background-color: var(--banner-background, var(--color-surface-mid));
    padding-block: 1em;
    padding-inline: var(--gutter);
  }
  .banner > * {
    max-inline-size: var(--site-max-inline-size);
    margin-inline: auto;
  }
  .button {
    --button-color: var(--color-on-surface);
    --button-background: transparent;
    --button-border-color: var(--color-outline);
    --button-border-width: 1px;
    --button-border-style: solid;
    --button-hover-color: color-mix( in hsl, var(--button-background) var(--hover-background-mix-percentage), var(--button-color) var(--hover-color-mix-percentage) );
    --button-icon-padding: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap, 0.4em);
    padding: var(--button-padding, 0.7em 1.2em);
    color: var(--button-color);
    background: var(--button-background);
    border-width: var(--button-border-width);
    border-style: var(--button-border-style);
    border-color: var(--button-border-color);
    border-radius: var(--button-radius, var(--border-radius-2));
    text-decoration: none;
    font-weight: var(--button-font-weight, var(--font-weight-bold));
    font-size: var(--button-font-size, 1em);
    letter-spacing: var(--button-letter-spacing);
    line-height: 1;
    cursor: pointer;
  }
  .button svg {
    height: var(--button-icon-size, 1lh);
    width: auto;
    flex: none;
    opacity: 90%;
  }
  .button:has(svg + span) {
    --button-padding: 0.7em 1.2em 0.7em var(--button-icon-padding);
  }
  .button:has(span + svg) {
    --button-padding: 0.7em var(--button-icon-padding) 0.7em 1.2em;
  }
  .button:has(span.visually-hidden) {
    --button-padding: 0.7em;
  }
  .button:hover {
    background: var(--button-hover-color);
  }
  .button:focus-visible {
    outline-width: var(--button-outline-width, 2px);
    outline-style: var(--button-outline-style, var(--button-border-style));
    outline-color: var(--button-outline-color, var(--button-border-color));
    outline-offset: var( --button-outline-offset, calc(var(--button-border-width) * 2) );
  }
  .button:active {
    transform: scale(99%);
  }
  .card {
    color: var(--card-color, var(--color-on-surface));
    background: var(--card-background, var(--color-surface-mid));
    padding: var(--card-padding, var(--gutter));
    border-radius: var(--card-border-radius, var(--border-radius-3));
  }
  .frame {
    aspect-ratio: var(--frame-aspect-ratio, 1 / 1);
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: var(--frame-border-radius, var(--border-radius-4));
  }
}

/* app/assets/stylesheets/smoothcss/components/dropdown.css */
@layer components {
  smooth-dropdown > button {
    anchor-name: var(--anchor-name);
  }
  smooth-dropdown-menu {
    position: fixed;
    position-anchor: var(--anchor-name);
    position-area: block-end var(--dropdown-menu-position, span-inline-end);
    margin-block-start: var(--space-1);
    margin-inline-end: var(--gutter);
    align-self: start;
    grid-template-rows: 1fr;
    background: var(--color-surface-lowest);
    border: var(--outline-variant);
    border-radius: var(--border-radius-2);
    padding: 0;
    box-shadow: var(--shadow-4);
    min-inline-size: anchor-size(self-inline);
    max-inline-size: var(--dropdown-menu-max-size, 100%);
    max-block-size: calc(100% - var(--dropdown-viewport-margin, var(--gutter)));
    overflow: clip;
  }
  smooth-dropdown-menu:popover-open {
    display: grid;
    opacity: 1;
    scale: 1;
    transform: translateY(0);
    transition:
      scale var(--popover-transition-time) ease-out,
      transform var(--popover-transition-time) ease-out,
      var(--popover-common-transitions);
  }
  @starting-style {
    smooth-dropdown-menu:popover-open {
      opacity: 0;
      scale: 0.98;
      transform: translateY(-1em);
    }
  }
  smooth-dropdown-container {
    overflow: auto;
    overscroll-behavior: none;
  }
  smooth-dropdown-container > *:not(hr) {
    padding: var(--space-1);
  }
  smooth-dropdown-menu ul > * + * {
    margin-block-start: calc(var(--space-1) * 0.5);
  }
  smooth-dropdown-menu :is(a, button) {
    --dropdown-item-color: var(--color-on-surface);
    --dropdown-item-background: transparent;
    display: block;
    inline-size: 100%;
    text-decoration: none;
    color: var(--dropdown-item-color);
    border-radius: var(--border-radius-1);
    padding: var(--space-1) var(--space-2);
    border: none;
    background: var(--dropdown-item-background);
    cursor: pointer;
    text-align: start;
  }
  smooth-dropdown-menu :is(a, button):hover {
    background: color-mix(in hsl, var(--dropdown-item-background) var(--hover-background-mix-percentage), var(--dropdown-item-color) var(--hover-color-mix-percentage));
  }
  smooth-dropdown-menu :is(a, button)[data-active=true] {
    background-color: var(--color-primary-container);
  }
  smooth-dropdown-menu p {
    font-size: var(--step-1);
    font-weight: var(--font-weight-body-emphasis);
    color: var(--color-on-surface-variant);
    padding-inline: var(--space-3);
    padding-block-start: var(--space-2);
    padding-block-end: 0;
  }
  smooth-dropdown-menu hr {
    margin-block: 0;
  }
  .button.dropdown {
    --button-font-weight: var(--font-weight-regular);
    --button-border-color: var(--color-outline-variant);
    --button-outline-color: currentColor;
    padding-inline: var(--space-3);
  }
}

/* app/assets/stylesheets/smoothcss/components.css */
@layer components;

/* app/assets/stylesheets/smoothcss/utilities/alignment.css */
@layer utilities {
  .align-items-start {
    align-items: start;
  }
  .align-items-center {
    align-items: center;
  }
  .align-items-end {
    align-items: end;
  }
  .justify-content-start {
    justify-content: start;
  }
  .justify-content-center {
    justify-content: center;
  }
  .justify-content-end {
    justify-content: end;
  }
  .text-align-start {
    text-align: start;
  }
  .text-align-center {
    text-align: center;
  }
  .text-align-end {
    text-align: end;
  }
}

/* app/assets/stylesheets/smoothcss/utilities/border.css */
@layer utilities {
  .border-outline {
    border: var(--outline);
  }
  .border-block-outline {
    border-block: var(--outline);
  }
  .border-block-start-outline {
    border-block-start: var(--outline);
  }
  .border-block-end-outline {
    border-block-end: var(--outline);
  }
  .border-inline-outline {
    border-inline: var(--outline);
  }
  .border-inline-start-outline {
    border-inline-start: var(--outline);
  }
  .border-inline-end-outline {
    border-inline-end: var(--outline);
  }
  .border-outline-variant {
    border: var(--outline-variant);
  }
  .border-block-outline-variant {
    border-block: var(--outline-variant);
  }
  .border-block-start-outline-variant {
    border-block-start: var(--outline-variant);
  }
  .border-block-end-outline-variant {
    border-block-end: var(--outline-variant);
  }
  .border-inline-outline-variant {
    border-inline: var(--outline-variant);
  }
  .border-inline-start-outline-variant {
    border-inline-start: var(--outline-variant);
  }
  .border-inline-end-outline-variant {
    border-inline-end: var(--outline-variant);
  }
  .border-radius-0 {
    border-radius: 0;
  }
  .border-radius-1 {
    border-radius: var(--border-radius-1);
  }
  .border-radius-2 {
    border-radius: var(--border-radius-2);
  }
  .border-radius-3 {
    border-radius: var(--border-radius-3);
  }
  .border-radius-4 {
    border-radius: var(--border-radius-4);
  }
  .border-radius-full {
    border-radius: var(--border-radius-full);
  }
}

/* app/assets/stylesheets/smoothcss/utilities/color.css */
@layer utilities {
  .color-on-surface {
    color: var(--color-on-surface);
  }
  .color-on-surface-variant {
    color: var(--color-on-surface-variant);
  }
  .color-primary {
    color: var(--color-primary);
  }
  .color-on-primary {
    color: var(--color-on-primary);
  }
  .color-on-primary-container {
    color: var(--color-on-primary-container);
  }
  .color-outline {
    color: var(--color-outline);
  }
  .color-outline-variant {
    color: var(--color-outline-variant);
  }
  .color-error {
    color: var(--color-error);
  }
  .color-on-error {
    color: var(--color-on-error);
  }
  .color-on-error-container {
    color: var(--color-on-error-container);
  }
  .background-color-surface-lowest {
    background-color: var(--color-surface-lowest);
  }
  .background-color-surface-mid {
    background-color: var(--color-surface-mid);
  }
  .background-color-surface-highest {
    background-color: var(--color-surface-highest);
  }
  .background-color-primary {
    background-color: var(--color-primary);
  }
  .background-color-primary-container {
    background-color: var(--color-primary-container);
  }
  .background-color-error {
    background-color: var(--color-error);
  }
  .background-color-error-container {
    background-color: var(--color-error-container);
  }
  .button.primary {
    --button-color: var(--color-on-primary);
    --button-background: var(--color-primary);
    --button-border-color: var(--color-primary);
  }
  .button.error {
    --button-color: var(--color-on-error);
    --button-background: var(--color-error);
    --button-border-color: var(--color-error);
  }
  .button.plain {
    --button-border-color: var(--button-hover-color);
    --button-outline-color: currentColor;
  }
  .primary-container {
    --color-surface-lowest: var(--color-primary-container);
    --color-surface-mid: var(--color-primary-container);
    --color-surface-highest: var(--color-primary-container);
    --color-on-surface: var(--color-on-primary-container);
    --color-on-surface-variant: var(--color-on-primary-container-variant);
    --outline: 1px solid var(--color-primary-outline);
    --outline-variant: 1px solid var(--color-primary-outline);
  }
  .error-container {
    --color-surface-lowest: var(--color-error-container);
    --color-surface-mid: var(--color-error-container);
    --color-surface-highest: var(--color-error-container);
    --color-on-surface: var(--color-on-error-container);
    --color-on-surface-variant: var(--color-on-error-container-variant);
    --outline: 1px solid var(--color-error-outline);
    --outline-variant: 1px solid var(--color-error-outline);
  }
  .color-scheme-light {
    color-scheme: light;
  }
  .color-scheme-dark {
    color-scheme: dark;
  }
}

/* app/assets/stylesheets/smoothcss/utilities/font-size.css */
@layer utilities {
  .font-size-1 {
    font-size: var(--step-1);
  }
  .font-size-2 {
    font-size: var(--step-2);
  }
  .font-size-3 {
    font-size: var(--step-3);
  }
  .font-size-4 {
    font-size: var(--step-4);
  }
  .font-size-5 {
    font-size: var(--step-5);
  }
  .font-size-6 {
    font-size: var(--step-6);
  }
  .font-size-7 {
    font-size: var(--step-7);
  }
  .font-size-8 {
    font-size: var(--step-8);
  }
  .font-size-base {
    font-size: var(--font-size-base);
  }
}

/* app/assets/stylesheets/smoothcss/utilities/font-weight.css */
@layer utilities {
  .font-weight-regular {
    font-weight: var(--font-weight-regular);
  }
  .font-weight-medium {
    font-weight: var(--font-weight-medium);
  }
  .font-weight-semibold {
    font-weight: var(--font-weight-semibold);
  }
  .font-weight-bold {
    font-weight: var(--font-weight-bold);
  }
  .font-weight-extra-bold {
    font-weight: var(--font-weight-extra-bold);
  }
  .font-weight-black {
    font-weight: var(--font-weight-black);
  }
  .font-weight-heading {
    font-weight: var(--font-weight-heading);
  }
  .font-weight-body-emphasis {
    font-weight: var(--font-weight-body-emphasis);
  }
}

/* app/assets/stylesheets/smoothcss/utilities/gap.css */
@layer utilities {
  .gap-0 {
    gap: 0;
  }
  .gap-1 {
    gap: var(--space-1);
  }
  .gap-2 {
    gap: var(--space-2);
  }
  .gap-3 {
    gap: var(--space-3);
  }
  .gap-4 {
    gap: var(--space-4);
  }
  .gap-5 {
    gap: var(--space-5);
  }
  .gap-6 {
    gap: var(--space-6);
  }
  .gap-7 {
    gap: var(--space-7);
  }
  .gap-8 {
    gap: var(--space-8);
  }
  .gap-9 {
    gap: var(--space-9);
  }
  .gap-1-2 {
    gap: var(--space-1-2);
  }
  .gap-2-3 {
    gap: var(--space-2-3);
  }
  .gap-3-4 {
    gap: var(--space-3-4);
  }
  .gap-4-5 {
    gap: var(--space-4-5);
  }
  .gap-5-6 {
    gap: var(--space-5-6);
  }
  .gap-6-7 {
    gap: var(--space-6-7);
  }
  .gap-7-8 {
    gap: var(--space-7-8);
  }
  .gap-8-9 {
    gap: var(--space-8-9);
  }
}

/* app/assets/stylesheets/smoothcss/utilities/margin.css */
@layer utilities {
  .margin-0 {
    margin: 0;
  }
  .margin-block-0 {
    margin-block: 0;
  }
  .margin-block-start-0 {
    margin-block-start: 0;
  }
  .margin-block-end-0 {
    margin-block-end: 0;
  }
  .margin-inline-0 {
    margin-inline: 0;
  }
  .margin-inline-start-0 {
    margin-inline-start: 0;
  }
  .margin-inline-end-0 {
    margin-inline-end: 0;
  }
  .margin-1 {
    margin: var(--space-1);
  }
  .margin-block-1 {
    margin-block: var(--space-1);
  }
  .margin-block-start-1 {
    margin-block-start: var(--space-1);
  }
  .margin-block-end-1 {
    margin-block-end: var(--space-1);
  }
  .margin-inline-1 {
    margin-inline: var(--space-1);
  }
  .margin-inline-start-1 {
    margin-inline-start: var(--space-1);
  }
  .margin-inline-end-1 {
    margin-inline-end: var(--space-1);
  }
  .margin-2 {
    margin: var(--space-2);
  }
  .margin-block-2 {
    margin-block: var(--space-2);
  }
  .margin-block-start-2 {
    margin-block-start: var(--space-2);
  }
  .margin-block-end-2 {
    margin-block-end: var(--space-2);
  }
  .margin-inline-2 {
    margin-inline: var(--space-2);
  }
  .margin-inline-start-2 {
    margin-inline-start: var(--space-2);
  }
  .margin-inline-end-2 {
    margin-inline-end: var(--space-2);
  }
  .margin-3 {
    margin: var(--space-3);
  }
  .margin-block-3 {
    margin-block: var(--space-3);
  }
  .margin-block-start-3 {
    margin-block-start: var(--space-3);
  }
  .margin-block-end-3 {
    margin-block-end: var(--space-3);
  }
  .margin-inline-3 {
    margin-inline: var(--space-3);
  }
  .margin-inline-start-3 {
    margin-inline-start: var(--space-3);
  }
  .margin-inline-end-3 {
    margin-inline-end: var(--space-3);
  }
  .margin-4 {
    margin: var(--space-4);
  }
  .margin-block-4 {
    margin-block: var(--space-4);
  }
  .margin-block-start-4 {
    margin-block-start: var(--space-4);
  }
  .margin-block-end-4 {
    margin-block-end: var(--space-4);
  }
  .margin-inline-4 {
    margin-inline: var(--space-4);
  }
  .margin-inline-start-4 {
    margin-inline-start: var(--space-4);
  }
  .margin-inline-end-4 {
    margin-inline-end: var(--space-4);
  }
  .margin-5 {
    margin: var(--space-5);
  }
  .margin-block-5 {
    margin-block: var(--space-5);
  }
  .margin-block-start-5 {
    margin-block-start: var(--space-5);
  }
  .margin-block-end-5 {
    margin-block-end: var(--space-5);
  }
  .margin-inline-5 {
    margin-inline: var(--space-5);
  }
  .margin-inline-start-5 {
    margin-inline-start: var(--space-5);
  }
  .margin-inline-end-5 {
    margin-inline-end: var(--space-5);
  }
  .margin-6 {
    margin: var(--space-6);
  }
  .margin-block-6 {
    margin-block: var(--space-6);
  }
  .margin-block-start-6 {
    margin-block-start: var(--space-6);
  }
  .margin-block-end-6 {
    margin-block-end: var(--space-6);
  }
  .margin-inline-6 {
    margin-inline: var(--space-6);
  }
  .margin-inline-start-6 {
    margin-inline-start: var(--space-6);
  }
  .margin-inline-end-6 {
    margin-inline-end: var(--space-6);
  }
  .margin-7 {
    margin: var(--space-7);
  }
  .margin-block-7 {
    margin-block: var(--space-7);
  }
  .margin-block-start-7 {
    margin-block-start: var(--space-7);
  }
  .margin-block-end-7 {
    margin-block-end: var(--space-7);
  }
  .margin-inline-7 {
    margin-inline: var(--space-7);
  }
  .margin-inline-start-7 {
    margin-inline-start: var(--space-7);
  }
  .margin-inline-end-7 {
    margin-inline-end: var(--space-7);
  }
  .margin-8 {
    margin: var(--space-8);
  }
  .margin-block-8 {
    margin-block: var(--space-8);
  }
  .margin-block-start-8 {
    margin-block-start: var(--space-8);
  }
  .margin-block-end-8 {
    margin-block-end: var(--space-8);
  }
  .margin-inline-8 {
    margin-inline: var(--space-8);
  }
  .margin-inline-start-8 {
    margin-inline-start: var(--space-8);
  }
  .margin-inline-end-8 {
    margin-inline-end: var(--space-8);
  }
  .margin-9 {
    margin: var(--space-9);
  }
  .margin-block-9 {
    margin-block: var(--space-9);
  }
  .margin-block-start-9 {
    margin-block-start: var(--space-9);
  }
  .margin-block-end-9 {
    margin-block-end: var(--space-9);
  }
  .margin-inline-9 {
    margin-inline: var(--space-9);
  }
  .margin-inline-start-9 {
    margin-inline-start: var(--space-9);
  }
  .margin-inline-end-9 {
    margin-inline-end: var(--space-9);
  }
  .margin-1-2 {
    margin: var(--space-1-2);
  }
  .margin-block-1-2 {
    margin-block: var(--space-1-2);
  }
  .margin-block-start-1-2 {
    margin-block-start: var(--space-1-2);
  }
  .margin-block-end-1-2 {
    margin-block-end: var(--space-1-2);
  }
  .margin-inline-1-2 {
    margin-inline: var(--space-1-2);
  }
  .margin-inline-start-1-2 {
    margin-inline-start: var(--space-1-2);
  }
  .margin-inline-end-1-2 {
    margin-inline-end: var(--space-1-2);
  }
  .margin-2-3 {
    margin: var(--space-2-3);
  }
  .margin-block-2-3 {
    margin-block: var(--space-2-3);
  }
  .margin-block-start-2-3 {
    margin-block-start: var(--space-2-3);
  }
  .margin-block-end-2-3 {
    margin-block-end: var(--space-2-3);
  }
  .margin-inline-2-3 {
    margin-inline: var(--space-2-3);
  }
  .margin-inline-start-2-3 {
    margin-inline-start: var(--space-2-3);
  }
  .margin-inline-end-2-3 {
    margin-inline-end: var(--space-2-3);
  }
  .margin-3-4 {
    margin: var(--space-3-4);
  }
  .margin-block-3-4 {
    margin-block: var(--space-3-4);
  }
  .margin-block-start-3-4 {
    margin-block-start: var(--space-3-4);
  }
  .margin-block-end-3-4 {
    margin-block-end: var(--space-3-4);
  }
  .margin-inline-3-4 {
    margin-inline: var(--space-3-4);
  }
  .margin-inline-start-3-4 {
    margin-inline-start: var(--space-3-4);
  }
  .margin-inline-end-3-4 {
    margin-inline-end: var(--space-3-4);
  }
  .margin-4-5 {
    margin: var(--space-4-5);
  }
  .margin-block-4-5 {
    margin-block: var(--space-4-5);
  }
  .margin-block-start-4-5 {
    margin-block-start: var(--space-4-5);
  }
  .margin-block-end-4-5 {
    margin-block-end: var(--space-4-5);
  }
  .margin-inline-4-5 {
    margin-inline: var(--space-4-5);
  }
  .margin-inline-start-4-5 {
    margin-inline-start: var(--space-4-5);
  }
  .margin-inline-end-4-5 {
    margin-inline-end: var(--space-4-5);
  }
  .margin-5-6 {
    margin: var(--space-5-6);
  }
  .margin-block-5-6 {
    margin-block: var(--space-5-6);
  }
  .margin-block-start-5-6 {
    margin-block-start: var(--space-5-6);
  }
  .margin-block-end-5-6 {
    margin-block-end: var(--space-5-6);
  }
  .margin-inline-5-6 {
    margin-inline: var(--space-5-6);
  }
  .margin-inline-start-5-6 {
    margin-inline-start: var(--space-5-6);
  }
  .margin-inline-end-5-6 {
    margin-inline-end: var(--space-5-6);
  }
  .margin-6-7 {
    margin: var(--space-6-7);
  }
  .margin-block-6-7 {
    margin-block: var(--space-6-7);
  }
  .margin-block-start-6-7 {
    margin-block-start: var(--space-6-7);
  }
  .margin-block-end-6-7 {
    margin-block-end: var(--space-6-7);
  }
  .margin-inline-6-7 {
    margin-inline: var(--space-6-7);
  }
  .margin-inline-start-6-7 {
    margin-inline-start: var(--space-6-7);
  }
  .margin-inline-end-6-7 {
    margin-inline-end: var(--space-6-7);
  }
  .margin-7-8 {
    margin: var(--space-7-8);
  }
  .margin-block-7-8 {
    margin-block: var(--space-7-8);
  }
  .margin-block-start-7-8 {
    margin-block-start: var(--space-7-8);
  }
  .margin-block-end-7-8 {
    margin-block-end: var(--space-7-8);
  }
  .margin-inline-7-8 {
    margin-inline: var(--space-7-8);
  }
  .margin-inline-start-7-8 {
    margin-inline-start: var(--space-7-8);
  }
  .margin-inline-end-7-8 {
    margin-inline-end: var(--space-7-8);
  }
  .margin-8-9 {
    margin: var(--space-8-9);
  }
  .margin-block-8-9 {
    margin-block: var(--space-8-9);
  }
  .margin-block-start-8-9 {
    margin-block-start: var(--space-8-9);
  }
  .margin-block-end-8-9 {
    margin-block-end: var(--space-8-9);
  }
  .margin-inline-8-9 {
    margin-inline: var(--space-8-9);
  }
  .margin-inline-start-8-9 {
    margin-inline-start: var(--space-8-9);
  }
  .margin-inline-end-8-9 {
    margin-inline-end: var(--space-8-9);
  }
}

/* app/assets/stylesheets/smoothcss/utilities/padding.css */
@layer utilities {
  .padding-0 {
    padding: 0;
  }
  .padding-block-0 {
    padding-block: 0;
  }
  .padding-block-start-0 {
    padding-block-start: 0;
  }
  .padding-block-end-0 {
    padding-block-end: 0;
  }
  .padding-inline-0 {
    padding-inline: 0;
  }
  .padding-inline-start-0 {
    padding-inline-start: 0;
  }
  .padding-inline-end-0 {
    padding-inline-end: 0;
  }
  .padding-1 {
    padding: var(--space-1);
  }
  .padding-block-1 {
    padding-block: var(--space-1);
  }
  .padding-block-start-1 {
    padding-block-start: var(--space-1);
  }
  .padding-block-end-1 {
    padding-block-end: var(--space-1);
  }
  .padding-inline-1 {
    padding-inline: var(--space-1);
  }
  .padding-inline-start-1 {
    padding-inline-start: var(--space-1);
  }
  .padding-inline-end-1 {
    padding-inline-end: var(--space-1);
  }
  .padding-2 {
    padding: var(--space-2);
  }
  .padding-block-2 {
    padding-block: var(--space-2);
  }
  .padding-block-start-2 {
    padding-block-start: var(--space-2);
  }
  .padding-block-end-2 {
    padding-block-end: var(--space-2);
  }
  .padding-inline-2 {
    padding-inline: var(--space-2);
  }
  .padding-inline-start-2 {
    padding-inline-start: var(--space-2);
  }
  .padding-inline-end-2 {
    padding-inline-end: var(--space-2);
  }
  .padding-3 {
    padding: var(--space-3);
  }
  .padding-block-3 {
    padding-block: var(--space-3);
  }
  .padding-block-start-3 {
    padding-block-start: var(--space-3);
  }
  .padding-block-end-3 {
    padding-block-end: var(--space-3);
  }
  .padding-inline-3 {
    padding-inline: var(--space-3);
  }
  .padding-inline-start-3 {
    padding-inline-start: var(--space-3);
  }
  .padding-inline-end-3 {
    padding-inline-end: var(--space-3);
  }
  .padding-4 {
    padding: var(--space-4);
  }
  .padding-block-4 {
    padding-block: var(--space-4);
  }
  .padding-block-start-4 {
    padding-block-start: var(--space-4);
  }
  .padding-block-end-4 {
    padding-block-end: var(--space-4);
  }
  .padding-inline-4 {
    padding-inline: var(--space-4);
  }
  .padding-inline-start-4 {
    padding-inline-start: var(--space-4);
  }
  .padding-inline-end-4 {
    padding-inline-end: var(--space-4);
  }
  .padding-5 {
    padding: var(--space-5);
  }
  .padding-block-5 {
    padding-block: var(--space-5);
  }
  .padding-block-start-5 {
    padding-block-start: var(--space-5);
  }
  .padding-block-end-5 {
    padding-block-end: var(--space-5);
  }
  .padding-inline-5 {
    padding-inline: var(--space-5);
  }
  .padding-inline-start-5 {
    padding-inline-start: var(--space-5);
  }
  .padding-inline-end-5 {
    padding-inline-end: var(--space-5);
  }
  .padding-6 {
    padding: var(--space-6);
  }
  .padding-block-6 {
    padding-block: var(--space-6);
  }
  .padding-block-start-6 {
    padding-block-start: var(--space-6);
  }
  .padding-block-end-6 {
    padding-block-end: var(--space-6);
  }
  .padding-inline-6 {
    padding-inline: var(--space-6);
  }
  .padding-inline-start-6 {
    padding-inline-start: var(--space-6);
  }
  .padding-inline-end-6 {
    padding-inline-end: var(--space-6);
  }
  .padding-7 {
    padding: var(--space-7);
  }
  .padding-block-7 {
    padding-block: var(--space-7);
  }
  .padding-block-start-7 {
    padding-block-start: var(--space-7);
  }
  .padding-block-end-7 {
    padding-block-end: var(--space-7);
  }
  .padding-inline-7 {
    padding-inline: var(--space-7);
  }
  .padding-inline-start-7 {
    padding-inline-start: var(--space-7);
  }
  .padding-inline-end-7 {
    padding-inline-end: var(--space-7);
  }
  .padding-8 {
    padding: var(--space-8);
  }
  .padding-block-8 {
    padding-block: var(--space-8);
  }
  .padding-block-start-8 {
    padding-block-start: var(--space-8);
  }
  .padding-block-end-8 {
    padding-block-end: var(--space-8);
  }
  .padding-inline-8 {
    padding-inline: var(--space-8);
  }
  .padding-inline-start-8 {
    padding-inline-start: var(--space-8);
  }
  .padding-inline-end-8 {
    padding-inline-end: var(--space-8);
  }
  .padding-9 {
    padding: var(--space-9);
  }
  .padding-block-9 {
    padding-block: var(--space-9);
  }
  .padding-block-start-9 {
    padding-block-start: var(--space-9);
  }
  .padding-block-end-9 {
    padding-block-end: var(--space-9);
  }
  .padding-inline-9 {
    padding-inline: var(--space-9);
  }
  .padding-inline-start-9 {
    padding-inline-start: var(--space-9);
  }
  .padding-inline-end-9 {
    padding-inline-end: var(--space-9);
  }
  .padding-1-2 {
    padding: var(--space-1-2);
  }
  .padding-block-1-2 {
    padding-block: var(--space-1-2);
  }
  .padding-block-start-1-2 {
    padding-block-start: var(--space-1-2);
  }
  .padding-block-end-1-2 {
    padding-block-end: var(--space-1-2);
  }
  .padding-inline-1-2 {
    padding-inline: var(--space-1-2);
  }
  .padding-inline-start-1-2 {
    padding-inline-start: var(--space-1-2);
  }
  .padding-inline-end-1-2 {
    padding-inline-end: var(--space-1-2);
  }
  .padding-2-3 {
    padding: var(--space-2-3);
  }
  .padding-block-2-3 {
    padding-block: var(--space-2-3);
  }
  .padding-block-start-2-3 {
    padding-block-start: var(--space-2-3);
  }
  .padding-block-end-2-3 {
    padding-block-end: var(--space-2-3);
  }
  .padding-inline-2-3 {
    padding-inline: var(--space-2-3);
  }
  .padding-inline-start-2-3 {
    padding-inline-start: var(--space-2-3);
  }
  .padding-inline-end-2-3 {
    padding-inline-end: var(--space-2-3);
  }
  .padding-3-4 {
    padding: var(--space-3-4);
  }
  .padding-block-3-4 {
    padding-block: var(--space-3-4);
  }
  .padding-block-start-3-4 {
    padding-block-start: var(--space-3-4);
  }
  .padding-block-end-3-4 {
    padding-block-end: var(--space-3-4);
  }
  .padding-inline-3-4 {
    padding-inline: var(--space-3-4);
  }
  .padding-inline-start-3-4 {
    padding-inline-start: var(--space-3-4);
  }
  .padding-inline-end-3-4 {
    padding-inline-end: var(--space-3-4);
  }
  .padding-4-5 {
    padding: var(--space-4-5);
  }
  .padding-block-4-5 {
    padding-block: var(--space-4-5);
  }
  .padding-block-start-4-5 {
    padding-block-start: var(--space-4-5);
  }
  .padding-block-end-4-5 {
    padding-block-end: var(--space-4-5);
  }
  .padding-inline-4-5 {
    padding-inline: var(--space-4-5);
  }
  .padding-inline-start-4-5 {
    padding-inline-start: var(--space-4-5);
  }
  .padding-inline-end-4-5 {
    padding-inline-end: var(--space-4-5);
  }
  .padding-5-6 {
    padding: var(--space-5-6);
  }
  .padding-block-5-6 {
    padding-block: var(--space-5-6);
  }
  .padding-block-start-5-6 {
    padding-block-start: var(--space-5-6);
  }
  .padding-block-end-5-6 {
    padding-block-end: var(--space-5-6);
  }
  .padding-inline-5-6 {
    padding-inline: var(--space-5-6);
  }
  .padding-inline-start-5-6 {
    padding-inline-start: var(--space-5-6);
  }
  .padding-inline-end-5-6 {
    padding-inline-end: var(--space-5-6);
  }
  .padding-6-7 {
    padding: var(--space-6-7);
  }
  .padding-block-6-7 {
    padding-block: var(--space-6-7);
  }
  .padding-block-start-6-7 {
    padding-block-start: var(--space-6-7);
  }
  .padding-block-end-6-7 {
    padding-block-end: var(--space-6-7);
  }
  .padding-inline-6-7 {
    padding-inline: var(--space-6-7);
  }
  .padding-inline-start-6-7 {
    padding-inline-start: var(--space-6-7);
  }
  .padding-inline-end-6-7 {
    padding-inline-end: var(--space-6-7);
  }
  .padding-7-8 {
    padding: var(--space-7-8);
  }
  .padding-block-7-8 {
    padding-block: var(--space-7-8);
  }
  .padding-block-start-7-8 {
    padding-block-start: var(--space-7-8);
  }
  .padding-block-end-7-8 {
    padding-block-end: var(--space-7-8);
  }
  .padding-inline-7-8 {
    padding-inline: var(--space-7-8);
  }
  .padding-inline-start-7-8 {
    padding-inline-start: var(--space-7-8);
  }
  .padding-inline-end-7-8 {
    padding-inline-end: var(--space-7-8);
  }
  .padding-8-9 {
    padding: var(--space-8-9);
  }
  .padding-block-8-9 {
    padding-block: var(--space-8-9);
  }
  .padding-block-start-8-9 {
    padding-block-start: var(--space-8-9);
  }
  .padding-block-end-8-9 {
    padding-block-end: var(--space-8-9);
  }
  .padding-inline-8-9 {
    padding-inline: var(--space-8-9);
  }
  .padding-inline-start-8-9 {
    padding-inline-start: var(--space-8-9);
  }
  .padding-inline-end-8-9 {
    padding-inline-end: var(--space-8-9);
  }
}

/* app/assets/stylesheets/smoothcss/utilities/stack.css */
@layer utilities {
  .stack-1 > * + * {
    margin-block-start: var(--space-1);
  }
  .stack-2 > * + * {
    margin-block-start: var(--space-2);
  }
  .stack-3 > * + * {
    margin-block-start: var(--space-3);
  }
  .stack-4 > * + * {
    margin-block-start: var(--space-4);
  }
  .stack-5 > * + * {
    margin-block-start: var(--space-5);
  }
  .stack-6 > * + * {
    margin-block-start: var(--space-6);
  }
  .stack-7 > * + * {
    margin-block-start: var(--space-7);
  }
  .stack-8 > * + * {
    margin-block-start: var(--space-8);
  }
  .stack-9 > * + * {
    margin-block-start: var(--space-9);
  }
  .stack-1-2 > * + * {
    margin-block-start: var(--space-1-2);
  }
  .stack-2-3 > * + * {
    margin-block-start: var(--space-2-3);
  }
  .stack-3-4 > * + * {
    margin-block-start: var(--space-3-4);
  }
  .stack-4-5 > * + * {
    margin-block-start: var(--space-4-5);
  }
  .stack-5-6 > * + * {
    margin-block-start: var(--space-5-6);
  }
  .stack-6-7 > * + * {
    margin-block-start: var(--space-6-7);
  }
  .stack-7-8 > * + * {
    margin-block-start: var(--space-7-8);
  }
  .stack-8-9 > * + * {
    margin-block-start: var(--space-8-9);
  }
}

/* app/assets/stylesheets/smoothcss/utilities/visibility.css */
@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
}

/* app/assets/stylesheets/smoothcss/utilities/wrapper.css */
@layer utilities {
  .wrapper-1 {
    --wrapper-max-inline-size: var(--container-1);
  }
  .wrapper-2 {
    --wrapper-max-inline-size: var(--container-2);
  }
  .wrapper-3 {
    --wrapper-max-inline-size: var(--container-3);
  }
  .wrapper-4 {
    --wrapper-max-inline-size: var(--container-4);
  }
  .wrapper-5 {
    --wrapper-max-inline-size: var(--container-5);
  }
  .wrapper-6 {
    --wrapper-max-inline-size: var(--container-6);
  }
  .wrapper-7 {
    --wrapper-max-inline-size: var(--container-7);
  }
  .wrapper-8 {
    --wrapper-max-inline-size: var(--container-8);
  }
  .wrapper-9 {
    --wrapper-max-inline-size: var(--container-9);
  }
  .wrapper-10 {
    --wrapper-max-inline-size: var(--container-10);
  }
  .wrapper-11 {
    --wrapper-max-inline-size: var(--container-11);
  }
  .wrapper-12 {
    --wrapper-max-inline-size: var(--container-12);
  }
  .wrapper-content {
    --wrapper-max-inline-size: var(--max-content-inline-size);
  }
}

/* app/assets/stylesheets/smoothcss/utilities.css */
@layer utilities;

/* app/assets/stylesheets/smoothcss/smooth.css */