@layer studs-reset, studs-utilities, studs-fonts, studs-themes, studs-base, studs-components, studs-layout, studs-overrides;
@layer studs-reset {
  html {
    box-sizing: border-box;
  }
  *,
  ::after,
  ::before {
    box-sizing: inherit;
  }
  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  /* Document
     ========================================================================== */
  /**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in iOS.
   */
  html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  /* Sections
     ========================================================================== */
  /**
   * Remove the margin in all browsers.
   */
  body {
    margin: 0;
  }
  /**
   * Render the `main` element consistently in IE.
   */
  main {
    display: block;
  }
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  /* Grouping content
     ========================================================================== */
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  /* Text-level semantics
     ========================================================================== */
  /**
   * Remove the gray background on active links in IE 10.
   */
  a {
    background-color: transparent;
  }
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted; /* 2 */
  }
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  b,
  strong {
    font-weight: bolder;
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  /**
   * Add the correct font size in all browsers.
   */
  small {
    font-size: 80%;
  }
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  /* Embedded content
     ========================================================================== */
  /**
   * Remove the border on images inside links in IE 10.
   */
  img {
    border-style: none;
  }
  /* Forms
     ========================================================================== */
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  button,
  input { /* 1 */
    overflow: visible;
  }
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  button,
  select { /* 1 */
    text-transform: none;
  }
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  button,
  [type=button],
  [type=reset],
  [type=submit] {
    -webkit-appearance: button;
  }
  /**
   * Remove the inner border and padding in Firefox.
   */
  button::-moz-focus-inner,
  [type=button]::-moz-focus-inner,
  [type=reset]::-moz-focus-inner,
  [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  /**
   * Restore the focus styles unset by the previous rule.
   */
  button:-moz-focusring,
  [type=button]:-moz-focusring,
  [type=reset]:-moz-focusring,
  [type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  /**
   * Correct the padding in Firefox.
   */
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  progress {
    vertical-align: baseline;
  }
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  textarea {
    overflow: auto;
  }
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  [type=checkbox],
  [type=radio] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  [type=number]::-webkit-inner-spin-button,
  [type=number]::-webkit-outer-spin-button {
    height: auto;
  }
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  [type=search] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  /* Interactive
     ========================================================================== */
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  details {
    display: block;
  }
  /*
   * Add the correct display in all browsers.
   */
  summary {
    display: list-item;
  }
  /* Misc
     ========================================================================== */
  /**
   * Add the correct display in IE 10+.
   */
  template {
    display: none;
  }
  /**
   * Add the correct display in IE 10.
   */
  [hidden] {
    display: none;
  }
}
@layer studs-utilities {
  :root {
    --studs-checkbox-checked: url("data:image/svg+xml,%3Csvg width%3D%22100%25%22 height%3D%22100%25%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg clip-path%3D%22url(%23clip0_707_35)%22%3E%3Cpath d%3D%22M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z%22 fill%3D%22currentcolor%22%2F%3E%3Cpath d%3D%22M13.3333 4L6 11.3333L2.66667 8%22 stroke%3D%22white%22 stroke-width%3D%221.33%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cpath d%3D%22M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z%22 stroke%3D%22currentcolor%22%2F%3E%3Cdefs%3E%3CclipPath id%3D%22clip0_707_35%22%3E%3Cpath d%3D%22M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z%22 fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
    --studs-checkbox-unchecked: url("data:image/svg+xml,%3Csvg width%3D%22100%25%22 height%3D%22100%25%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z%22 fill%3D%22transparent%22%2F%3E%3Cpath d%3D%22M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z%22 stroke%3D%22currentcolor%22%2F%3E%3C%2Fsvg%3E");
    --studs-checkbox-indeterminate: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22 standalone%3D%22no%22%3F%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg width%3D%22100%25%22 height%3D%22100%25%22 viewBox%3D%220 0 16 16%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 xml%3Aspace%3D%22preserve%22 xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22 style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3B%22%3E    %3Cg%3E        %3Cg%3E            %3CclipPath id%3D%22_clip1%22%3E                %3Cpath d%3D%22M0%2C4C0%2C1.791 1.791%2C0 4%2C0L12%2C0C14.209%2C0 16%2C1.791 16%2C4L16%2C12C16%2C14.209 14.209%2C16 12%2C16L4%2C16C1.791%2C16 0%2C14.209 0%2C12L0%2C4Z%22%2F%3E            %3C%2FclipPath%3E            %3Cg clip-path%3D%22url(%23_clip1)%22%3E                %3Cpath d%3D%22M0%2C4C0%2C1.791 1.791%2C0 4%2C0L12%2C0C14.209%2C0 16%2C1.791 16%2C4L16%2C12C16%2C14.209 14.209%2C16 12%2C16L4%2C16C1.791%2C16 0%2C14.209 0%2C12L0%2C4Z%22 style%3D%22fill-rule%3Anonzero%3B%22%2F%3E                %3Cpath d%3D%22M13.333%2C8.023L2.667%2C8%22 style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3Awhite%3Bstroke-width%3A1.33px%3B%22%2F%3E            %3C%2Fg%3E        %3C%2Fg%3E    %3C%2Fg%3E    %3Cpath d%3D%22M4%2C0.5L12%2C0.5C13.933%2C0.5 15.5%2C2.067 15.5%2C4L15.5%2C12C15.5%2C13.933 13.933%2C15.5 12%2C15.5L4%2C15.5C2.067%2C15.5 0.5%2C13.933 0.5%2C12L0.5%2C4C0.5%2C2.067 2.067%2C0.5 4%2C0.5Z%22 style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3Awhite%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%2F%3E    %3Cg transform%3D%22matrix(1%2C0%2C0%2C1%2C-3%2C-2)%22%3E        %3Cg%3E            %3CclipPath id%3D%22_clip2%22%3E                %3Cpath d%3D%22M3%2C6C3%2C3.791 4.791%2C2 7%2C2L15%2C2C17.209%2C2 19%2C3.791 19%2C6L19%2C14C19%2C16.209 17.209%2C18 15%2C18L7%2C18C4.791%2C18 3%2C16.209 3%2C14L3%2C6Z%22%2F%3E            %3C%2FclipPath%3E            %3Cg clip-path%3D%22url(%23_clip2)%22%3E                %3Cpath d%3D%22M3%2C6C3%2C3.791 4.791%2C2 7%2C2L15%2C2C17.209%2C2 19%2C3.791 19%2C6L19%2C14C19%2C16.209 17.209%2C18 15%2C18L7%2C18C4.791%2C18 3%2C16.209 3%2C14L3%2C6Z%22 style%3D%22fill%3Argb(17%2C17%2C17)%3Bfill-rule%3Anonzero%3B%22%2F%3E                %3Crect x%3D%226.333%22 y%3D%229.333%22 width%3D%229.333%22 height%3D%221.333%22 style%3D%22fill%3Awhite%3Bfill-rule%3Anonzero%3B%22%2F%3E            %3C%2Fg%3E        %3C%2Fg%3E        %3Cpath d%3D%22M7%2C2.5L15%2C2.5C16.933%2C2.5 18.5%2C4.067 18.5%2C6L18.5%2C14C18.5%2C15.933 16.933%2C17.5 15%2C17.5L7%2C17.5C5.067%2C17.5 3.5%2C15.933 3.5%2C14L3.5%2C6C3.5%2C4.067 5.067%2C2.5 7%2C2.5Z%22 style%3D%22fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3Argb(17%2C17%2C17)%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%2F%3E    %3C%2Fg%3E%3C%2Fsvg%3E");
    --studs-radio-checked: url("data:image/svg+xml,%3Csvg width%3D%22100%25%22 height%3D%22100%25%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5Z%22 fill%3D%22white%22%2F%3E%3Cpath d%3D%22M8 15.5C3.85786 15.5 0.5 12.1421 0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5Z%22 stroke%3D%22currentcolor%22%2F%3E%3Cg clip-path%3D%22url(%23clip0_710_6)%22%3E%3Cpath d%3D%22M8 13.8333C11.2217 13.8333 13.8333 11.2217 13.8333 8C13.8333 4.77834 11.2217 2.16667 8 2.16667C4.77834 2.16667 2.16667 4.77834 2.16667 8C2.16667 11.2217 4.77834 13.8333 8 13.8333Z%22 fill%3D%22currentcolor%22 stroke%3D%22currentcolor%22 stroke-width%3D%221.33%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath id%3D%22clip0_710_6%22%3E%3Crect width%3D%2214%22 height%3D%2214%22 fill%3D%22transparent%22 transform%3D%22translate(1 1)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
    --studs-radio-unchecked: url("data:image/svg+xml,%3Csvg width%3D%22100%25%22 height%3D%22100%25%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z%22 fill%3D%22transparent%22%2F%3E%3Cpath d%3D%22M0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z%22 stroke%3D%22currentcolor%22%2F%3E%3C%2Fsvg%3E");
  }
}
@layer studs-fonts {
  @font-face {
    font-family: "HelveticaNowRoman";
    font-weight: 1 1000;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    src: url("https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVariableRoman_normal_normal.woff2") format("woff2"), url("https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVariableRoman_normal_normal.woff") format("woff"), url("https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVar.ttf") format("truetype");
  }
  @font-face {
    font-family: "HelveticaNowItalic";
    font-weight: 1 1000;
    font-style: italic;
    font-stretch: normal;
    font-display: swap;
    src: url("https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVariableItalic_italic_normal.woff2") format("woff2"), url("https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVariableItalic_italic_normal.woff") format("woff"), url("https://www.strongtie.com/studs/font/helvetica-now/HelveticaNowVar-Italic.ttf") format("truetype");
  }
  :root {
    --font-family: "HelveticaNowRoman", "Helvetica", "Arial", sans-serif;
    --font-weight: var(--fontWeight-regular);
    --font-width: 100;
    --font-size: 1rem;
    --font-style: normal;
  }
}
@layer studs-themes {
  :root {
    --font-size-50: 0.625rem;
    --font-size-75: 0.75rem;
    --font-size-100: 0.875rem;
    --font-size-200: 1rem;
    --font-size-300: 1.125rem;
    --font-size-400: 1.25rem;
    --font-size-500: 1.375rem;
    --font-size-600: 1.875rem;
    --font-size-700: 2.5rem;
    --font-size-800: 3.375rem;
    --font-size-900: 4.5rem;
    --font-size-1000: 6rem;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --space-00: 0rem;
    --space-50: 0.125rem;
    --space-75: 0.25rem;
    --space-90: 0.375rem;
    --space-100: 0.5rem;
    --space-200: 0.75rem;
    --space-250: 0.875rem;
    --space-300: 1rem;
    --space-350: 1.25rem;
    --space-400: 1.5rem;
    --space-500: 2rem;
    --space-550: 2.25rem;
    --space-600: 2.5rem;
    --space-700: 3rem;
    --space-800: 4rem;
    --space-900: 5rem;
    --space-1000: 6rem;
    --corner-radius-00: 0rem;
    --corner-radius-50: 0.03125rem;
    --corner-radius-75: 0.25rem;
    --corner-radius-100: 0.375rem;
    --corner-radius-200: 0.5rem;
    --corner-radius-300: 0.625rem;
    --corner-radius-400: 0.75rem;
    --corner-radius-500: 1rem;
    --corner-radius-9999: 100vh;
    --lineHeight-100: 1.2;
    --lineHeight-200: 1.3;
    --lineHeight-300: 1.5;
    --lineHeight-400: 1.7;
    --borderWidth-100: 1px;
    --borderWidth-200: 2px;
    --borderWidth-400: 4px;
    --opacity-00: 0;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-80: 0.8;
    --opacity-90: 0.9;
    --opacity-100: 1;
    --tint-100: rgba(255, 255, 255, 0.9);
    --tint-200: rgba(255, 255, 255, 0.8);
    --tint-300: rgba(255, 255, 255, 0.7);
    --tint-400: rgba(255, 255, 255, 0.6);
    --tint-500: rgba(255, 255, 255, 0.5);
    --tint-600: rgba(255, 255, 255, 0.4);
    --tint-700: rgba(255, 255, 255, 0.3);
    --tint-800: rgba(255, 255, 255, 0.2);
    --tint-900: rgba(255, 255, 255, 0.1);
    --tint-1000: rgba(255, 255, 255, 0);
    --shade-100: rgba(0, 0, 0, 0.9);
    --shade-200: rgba(0, 0, 0, 0.8);
    --shade-300: rgba(0, 0, 0, 0.7);
    --shade-400: rgba(0, 0, 0, 0.6);
    --shade-500: rgba(0, 0, 0, 0.5);
    --shade-600: rgba(0, 0, 0, 0.4);
    --shade-700: rgba(0, 0, 0, 0.3);
    --shade-800: rgba(0, 0, 0, 0.2);
    --shade-900: rgba(0, 0, 0, 0.1);
    --shade-1000: rgba(0, 0, 0, 0);
    --color-neutral-000: #ffffff;
    --color-neutral-025: #f7f7f7;
    --color-neutral-050: #f5f5f5;
    --color-neutral-075: #e9e9e9;
    --color-neutral-100: #e3e3e3;
    --color-neutral-150: #d4d4d4;
    --color-neutral-200: #c6c6c6;
    --color-neutral-250: #b9b9b9;
    --color-neutral-300: #ababab;
    --color-neutral-350: #9d9d9d;
    --color-neutral-400: #909090;
    --color-neutral-450: #848484;
    --color-neutral-500: #777777;
    --color-neutral-550: #6a6a6a;
    --color-neutral-600: #5e5e5e;
    --color-neutral-650: #525252;
    --color-neutral-700: #474747;
    --color-neutral-750: #3b3b3b;
    --color-neutral-800: #303030;
    --color-neutral-850: #262626;
    --color-neutral-900: #1c1c1c;
    --color-neutral-950: #111111;
    --color-neutral-999: #000000;
    --color-neutral-warm-000: #ffffff;
    --color-neutral-warm-025: #f9f7f6;
    --color-neutral-warm-050: #f6f4f2;
    --color-neutral-warm-075: #ece9e5;
    --color-neutral-warm-100: #e6e2dd;
    --color-neutral-warm-150: #dad3cd;
    --color-neutral-warm-200: #cec5bd;
    --color-neutral-warm-250: #c2b7ad;
    --color-neutral-warm-300: #b6a99d;
    --color-neutral-warm-350: #ab9b8d;
    --color-neutral-warm-400: #9f8e7e;
    --color-neutral-warm-450: #93806f;
    --color-neutral-warm-500: #87725f;
    --color-neutral-warm-550: #7b6756;
    --color-neutral-warm-600: #6d5b4c;
    --color-neutral-warm-650: #5f5042;
    --color-neutral-warm-700: #524438;
    --color-neutral-warm-750: #45392f;
    --color-neutral-warm-800: #382e25;
    --color-neutral-warm-850: #2c241d;
    --color-neutral-warm-900: #211b15;
    --color-neutral-warm-950: #15100b;
    --color-neutral-warm-999: #000000;
    --color-orange-000: #ffffff;
    --color-orange-025: #fff5f2;
    --color-orange-050: #ffece5;
    --color-orange-075: #ffe2d8;
    --color-orange-100: #ffd9cb;
    --color-orange-150: #ffc5b1;
    --color-orange-200: #ffb197;
    --color-orange-250: #ff9d7c;
    --color-orange-300: #ff8760;
    --color-orange-350: #ff7041;
    --color-orange-400: #ff5308;
    --color-orange-450: #ec4c07;
    --color-orange-500: #d64405;
    --color-orange-550: #c13d04;
    --color-orange-600: #ac3503;
    --color-orange-650: #972e02;
    --color-orange-700: #832602;
    --color-orange-750: #701f01;
    --color-orange-800: #5d1901;
    --color-orange-850: #4b1201;
    --color-orange-900: #390c00;
    --color-orange-950: #270600;
    --color-orange-999: #000000;
    --color-yellow-000: #ffffff;
    --color-yellow-025: #fff8e3;
    --color-yellow-050: #fff0c7;
    --color-yellow-075: #ffe8a9;
    --color-yellow-100: #ffe08a;
    --color-yellow-150: #ffd040;
    --color-yellow-200: #edc13b;
    --color-yellow-250: #ddb436;
    --color-yellow-300: #cda631;
    --color-yellow-350: #bd9a2d;
    --color-yellow-400: #ae8d28;
    --color-yellow-450: #9f8024;
    --color-yellow-500: #8f7420;
    --color-yellow-550: #81681b;
    --color-yellow-600: #725c17;
    --color-yellow-650: #645013;
    --color-yellow-700: #56450f;
    --color-yellow-750: #493a0b;
    --color-yellow-800: #3c2f08;
    --color-yellow-850: #2f2405;
    --color-yellow-900: #231b03;
    --color-yellow-950: #161001;
    --color-yellow-999: #000000;
    --color-blue-000: #ffffff;
    --color-blue-025: #f4f8ff;
    --color-blue-050: #e9f1ff;
    --color-blue-075: #deeaff;
    --color-blue-100: #d3e4fe;
    --color-blue-150: #bdd6fd;
    --color-blue-200: #a8c8fc;
    --color-blue-250: #93bafa;
    --color-blue-300: #7eacf8;
    --color-blue-350: #699ef6;
    --color-blue-400: #548ff3;
    --color-blue-450: #3e80f0;
    --color-blue-500: #206eec;
    --color-blue-550: #1d65d9;
    --color-blue-600: #1859c2;
    --color-blue-650: #144eab;
    --color-blue-700: #104395;
    --color-blue-750: #0c387f;
    --color-blue-800: #082d6a;
    --color-blue-850: #052355;
    --color-blue-900: #031942;
    --color-blue-950: #020f2d;
    --color-blue-999: #000000;
    --color-red-000: #ffffff;
    --color-red-025: #fff5f4;
    --color-red-050: #ffebe8;
    --color-red-075: #ffe1dd;
    --color-red-100: #ffd7d2;
    --color-red-150: #ffc3bc;
    --color-red-200: #ffaea6;
    --color-red-250: #ff9990;
    --color-red-300: #ff827b;
    --color-red-350: #ff6964;
    --color-red-400: #ff4d4d;
    --color-red-450: #ff002b;
    --color-red-500: #ef0028;
    --color-red-550: #d70023;
    --color-red-600: #bf001e;
    --color-red-650: #a90019;
    --color-red-700: #930014;
    --color-red-750: #7e0010;
    --color-red-800: #68000b;
    --color-red-850: #540007;
    --color-red-900: #410004;
    --color-red-950: #2c0002;
    --color-red-999: #000000;
    --color-green-000: #ffffff;
    --color-green-025: #f2faef;
    --color-green-050: #e5f6e0;
    --color-green-075: #d7f1d0;
    --color-green-100: #caecc1;
    --color-green-150: #b0e2a2;
    --color-green-200: #94d781;
    --color-green-250: #78cd5e;
    --color-green-300: #4ebe1f;
    --color-green-350: #49b41d;
    --color-green-400: #43a51a;
    --color-green-450: #3c9616;
    --color-green-500: #368813;
    --color-green-550: #2f7a10;
    --color-green-600: #296c0d;
    --color-green-650: #1d5107;
    --color-green-700: #1d5107;
    --color-green-750: #174505;
    --color-green-800: #123804;
    --color-green-850: #0c2c02;
    --color-green-900: #072101;
    --color-green-950: #041501;
    --color-green-999: #000000;
    --color-purple-000: #ffffff;
    --color-purple-025: #faf6ff;
    --color-purple-050: #f5edff;
    --color-purple-075: #f1e4ff;
    --color-purple-100: #ecdcff;
    --color-purple-150: #e3caff;
    --color-purple-200: #dab8ff;
    --color-purple-250: #d1a6ff;
    --color-purple-300: #c894ff;
    --color-purple-350: #bf81ff;
    --color-purple-400: #b76dff;
    --color-purple-450: #a763e8;
    --color-purple-500: #9759d3;
    --color-purple-550: #884fbe;
    --color-purple-600: #7846a9;
    --color-purple-650: #693d95;
    --color-purple-700: #5b3482;
    --color-purple-750: #4d2b6f;
    --color-purple-800: #3f225b;
    --color-purple-850: #321a4a;
    --color-purple-900: #261238;
    --color-purple-950: #180a26;
    --color-purple-999: #000000;
    --color-pink-000: #ffffff;
    --color-pink-025: #fff5f8;
    --color-pink-050: #ffebf1;
    --color-pink-075: #ffe1ea;
    --color-pink-100: #ffd7e3;
    --color-pink-150: #ffc2d5;
    --color-pink-200: #ffaec7;
    --color-pink-250: #ff99b9;
    --color-pink-300: #ff82ac;
    --color-pink-350: #ff6da0;
    --color-pink-400: #e96392;
    --color-pink-450: #d55a85;
    --color-pink-500: #c15178;
    --color-pink-550: #ad486b;
    --color-pink-600: #9a3f5f;
    --color-pink-650: #883653;
    --color-pink-700: #762e47;
    --color-pink-750: #64263c;
    --color-pink-800: #531e31;
    --color-pink-850: #421726;
    --color-pink-900: #320f1c;
    --color-pink-950: #220811;
    --color-pink-999: #000000;
  }
  :root {
    color-scheme: only light;
    --surface-primary-background: #ffffff;
    --surface-primary-foreground: #111111;
    --surface-primary-border: #e9e9e9;
    --surface-primary-muted-foreground: #777777;
    --surface-primary-muted-background: #f5f5f5;
    --surface-modal-background: var(--shade-200);
    --surface-secondary-background: #f7f7f7;
    --surface-secondary-foreground: #5e5e5e;
    --surface-secondary-border: #e3e3e3;
    --surface-auxiliary-background: #f5f5f5;
    --surface-auxiliary-foreground: var(--surface-primary-background);
    --surface-auxiliary-border: #d4d4d4;
    --action-default-background: #1c1c1c;
    --action-default-foreground: #ffffff;
    --action-default-hover-background: #474747;
    --action-default-hover-foreground: #ffffff;
    --action-default-active-background: #303030;
    --action-default-active-foreground: #ffffff;
    --action-selected-background: #f5f5f5;
    --action-focus-foreground: #111111;
    --action-secondary-background: #f5f5f5;
    --action-secondary-foreground: var(--surface-primary-foreground);
    --action-secondary-hover-background: #f7f7f7;
    --action-secondary-hover-foreground: #111111;
    --action-secondary-active-background: #e9e9e9;
    --action-secondary-active-foreground: #111111;
    --action-destructive-background: #ef0028;
    --action-destructive-foreground: #ffffff;
    --action-destructive-hover-background: #ff002b;
    --action-destructive-hover-foreground: #ffffff;
    --action-destructive-active-background: #d70023;
    --action-destructive-active-foreground: #ffffff;
    --action-outline-background: #ffffff;
    --action-outline-foreground: var(--surface-primary-foreground);
    --action-outline-hover-background: #f5f5f5;
    --action-outline-active-foreground: #e9e9e9;
    --action-outline-border: #e3e3e3;
    --action-ghost-background: #ffffff;
    --action-ghost-foreground: var(--surface-primary-foreground);
    --action-ghost-hover-background: #f5f5f5;
    --action-link-foreground: #206eec;
    --action-link-hover-foreground: #1859c2;
    --control-background: #ffffff;
    --control-border: #e3e3e3;
    --control-focus: var(--surface-primary-foreground);
    --control-selected-background: #111111;
    --control-selected-foreground: #ffffff;
    --control-selected-border: #111111;
    --control-unselected-background: #ffffff;
    --control-unselected-border: #6a6a6a;
    --control-switch-background: #e3e3e3;
    --feedback-default-background: #1c1c1c;
    --feedback-default-foreground: #ffffff;
    --feedback-default-focus: var(--surface-primary-foreground);
    --feedback-secondary-background: #f5f5f5;
    --feedback-secondary-foreground: var(--surface-primary-foreground);
    --feedback-outline-background: #ffffff;
    --feedback-outline-foreground: var(--surface-primary-foreground);
    --feedback-outline-border: #e9e9e9;
    --feedback-info-background: #206eec;
    --feedback-info-foreground: #ffffff;
    --feedback-info-secondary-background: #ffffff;
    --feedback-info-secondary-foreground: #206eec;
    --feedback-success-background: #2f7a10;
    --feedback-success-foreground: #ffffff;
    --feedback-success-secondary-background: #ffffff;
    --feedback-success-secondary-foreground: #368813;
    --feedback-warning-background: #ffd040;
    --feedback-warning-foreground: #493a0b;
    --feedback-warning-secondary-background: #3b3b3b;
    --feedback-warning-secondary-foreground: #ffd040;
    --feedback-critical-background: #d70023;
    --feedback-critical-foreground: #ffffff;
    --feedback-critical-secondary-background: #ffffff;
    --feedback-critical-secondary-foreground: #ef0028;
    --focus-color: #c6c6c6;
    --focus-width: var(--borderWidth-300);
    --focus-border: oklch(70.8% 0 0);
    --disabled: var(--opacity-60);
    --shadow-default: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
      0px 1px 2px 0px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
      0px 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lrg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
      0px 4px 6px -2px rgba(0, 0, 0, 0.05);
    --dropshadow-default: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.1))
      drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.06));
    --dropshadow-sm: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.05));
    --dropshadow-md: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1))
      drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.06));
    --dropshadow-lrg: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.1))
      drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05));
    --tx-s: 0.1s;
    --tx-m: 0.25s;
    --tx-l: 0.4s;
    --tx-x: 0.6s;
    --tx-xx: 1s;
    --interactive-feedback: translateY(-0.075em) scale(1.01);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --surface-primary-background: #ffffff;
      --surface-primary-foreground: #111111;
      --surface-primary-border: #e9e9e9;
      --surface-primary-muted-foreground: #777777;
      --surface-primary-muted-background: #f5f5f5;
      --surface-modal-background: var(--shade-200);
      --surface-secondary-background: #f7f7f7;
      --surface-secondary-foreground: #5e5e5e;
      --surface-secondary-border: #e3e3e3;
      --surface-auxiliary-background: #f5f5f5;
      --surface-auxiliary-foreground: var(--surface-primary-background);
      --surface-auxiliary-border: #d4d4d4;
      --action-default-background: #1c1c1c;
      --action-default-foreground: #ffffff;
      --action-default-hover-background: #474747;
      --action-default-hover-foreground: #ffffff;
      --action-default-active-background: #303030;
      --action-default-active-foreground: #ffffff;
      --action-selected-background: #f5f5f5;
      --action-focus-foreground: #111111;
      --action-secondary-background: #f5f5f5;
      --action-secondary-foreground: var(--surface-primary-foreground);
      --action-secondary-hover-background: #f7f7f7;
      --action-secondary-hover-foreground: #111111;
      --action-secondary-active-background: #e9e9e9;
      --action-secondary-active-foreground: #111111;
      --action-destructive-background: #ef0028;
      --action-destructive-foreground: #ffffff;
      --action-destructive-hover-background: #ff002b;
      --action-destructive-hover-foreground: #ffffff;
      --action-destructive-active-background: #d70023;
      --action-destructive-active-foreground: #ffffff;
      --action-outline-background: #ffffff;
      --action-outline-foreground: var(--surface-primary-foreground);
      --action-outline-hover-background: #f5f5f5;
      --action-outline-active-foreground: #e9e9e9;
      --action-outline-border: #e3e3e3;
      --action-ghost-background: #ffffff;
      --action-ghost-foreground: var(--surface-primary-foreground);
      --action-ghost-hover-background: #f5f5f5;
      --action-link-foreground: #206eec;
      --action-link-hover-foreground: #1859c2;
      --control-background: #ffffff;
      --control-border: #e3e3e3;
      --control-focus: var(--surface-primary-foreground);
      --control-selected-background: #111111;
      --control-selected-foreground: #ffffff;
      --control-selected-border: #111111;
      --control-unselected-background: #ffffff;
      --control-unselected-border: #6a6a6a;
      --control-switch-background: #e3e3e3;
      --feedback-default-background: #1c1c1c;
      --feedback-default-foreground: #ffffff;
      --feedback-default-focus: var(--surface-primary-foreground);
      --feedback-secondary-background: #f5f5f5;
      --feedback-secondary-foreground: var(--surface-primary-foreground);
      --feedback-outline-background: #ffffff;
      --feedback-outline-foreground: var(--surface-primary-foreground);
      --feedback-outline-border: #e9e9e9;
      --feedback-info-background: #206eec;
      --feedback-info-foreground: #ffffff;
      --feedback-info-secondary-background: #ffffff;
      --feedback-info-secondary-foreground: #206eec;
      --feedback-success-background: #2f7a10;
      --feedback-success-foreground: #ffffff;
      --feedback-success-secondary-background: #ffffff;
      --feedback-success-secondary-foreground: #368813;
      --feedback-warning-background: #ffd040;
      --feedback-warning-foreground: #493a0b;
      --feedback-warning-secondary-background: #3b3b3b;
      --feedback-warning-secondary-foreground: #ffd040;
      --feedback-critical-background: #d70023;
      --feedback-critical-foreground: #ffffff;
      --feedback-critical-secondary-background: #ffffff;
      --feedback-critical-secondary-foreground: #ef0028;
      --focus-color: #c6c6c6;
      --focus-width: var(--borderWidth-300);
      --focus-border: oklch(70.8% 0 0);
      --disabled: var(--opacity-60);
      --shadow-default: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
        0px 1px 2px 0px rgba(0, 0, 0, 0.06);
      --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
      --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
        0px 2px 4px -1px rgba(0, 0, 0, 0.06);
      --shadow-lrg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
        0px 4px 6px -2px rgba(0, 0, 0, 0.05);
      --dropshadow-default: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.1))
        drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.06));
      --dropshadow-sm: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.05));
      --dropshadow-md: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1))
        drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.06));
      --dropshadow-lrg: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.1))
        drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :root {
      --tx-s: 0s;
      --tx-m: 0s;
      --tx-l: 0s;
      --tx-x: 0s;
      --tx-xx: 0s;
      --interactive-feedback: translateY(0) scale(1);
    }
  }
}
@layer studs-base {
  :root {
    --content-width: 77.5rem;
    --padding: 1rem;
    --border-radius: .25rem;
  }
  html {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    font-style: var(--font-style);
    font-variation-settings: "opsz" 12;
    color: var(--on-app);
    background: var(--app);
  }
  body {
    padding: 0;
  }
  main {
    width: min(var(--content-width), 100vw - var(--padding) * 4);
    margin-inline: auto;
  }
  code {
    font-family: monospace;
    background: var(--surface);
    padding-inline: 0.25em;
  }
  cite {
    font: italic 400 1rem "HelveticaNowItalic", "Helvetica", "Arial", sans-serif;
    font-variation-settings: "opsz" 12;
  }
  blockquote {
    margin: 0;
    padding-inline-start: 0.5em;
    border-inline-start: 2px solid var(--border);
  }
  ul,
  ol {
    padding-left: 1.2em;
  }
  ul ::marker {
    color: var(--primary);
  }
  menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  menu a {
    text-decoration-color: transparent;
  }
  abbr {
    text-decoration-style: dotted;
    text-underline-offset: 0.25em;
    cursor: help;
  }
  em {
    font: italic 400 1rem "HelveticaNowItalic", "Helvetica", "Arial", sans-serif;
  }
  strong {
    font: normal 400 1rem "HelveticaNowRoman", "Helvetica", "Arial", sans-serif;
    font-weight: bold;
  }
  mark {
    background-color: var(--highlight-color);
    padding-inline: 0.25em;
  }
  [type=search] {
    -webkit-appearance: searchfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  :where(a, a:visited) {
    color: var(--action-link-foreground);
    text-decoration: underline;
    text-decoration-color: var(--action-link-foreground);
    text-underline-offset: 0.25em;
    text-decoration-thickness: 2px;
  }
  :where(a:hover) {
    color: var(--action-link-hover-foreground);
    text-decoration-color: var(--action-link-hover-foreground);
  }
  :where([disabled],
  :disabled,
  .-disabled,
  .disabled) {
    opacity: var(--disabled);
  }
  /* utilities */
  .-noScroll {
    height: 100vh;
    width: 100vw;
    overflow: clip;
  }
}
@layer studs-components {
  .badge {
    --bkg: var(--feedback-default-background);
    --text: var(--feedback-default-foreground);
    --hover: linear-gradient(var(--tint-800)), var(--bkg);
    background: var(--bkg);
    color: var(--text);
    padding: var(--space-50) var(--space-200);
    font-size: var(--font-size-75);
    border: 1px solid transparent;
    border-radius: var(--corner-radius-75);
  }
  .badge:hover {
    background: var(--hover);
    cursor: default;
  }
  .badge.-secondary {
    --bkg: var(--action-secondary-background);
    --text: var(--action-secondary-foreground);
    --hover: var(--bkg);
  }
  .badge.-outline {
    --bkg: var(--action-outline-background);
    --text: var(--surface-primary-foreground);
    --hover: var(--bkg);
    border-color: var(--action-outline-border);
  }
  .badge.-destructive {
    --bkg: var(--action-destructive-background);
    --text: var(--action-destructive-foreground);
    --hover: linear-gradient(var(--shade-800)), var(--bkg);
  }
  button,
  .button {
    --bkg: var(--action-default-background);
    --text: var(--action-default-foreground);
    --bkg-hover: var(--action-default-hover-background);
    --bkg-active: var(--action-selected-background);
    --radius: var(--corner-radius-75);
    --shadow: var(--border);
    display: inline-flex;
    background: var(--bkg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-100) var(--space-300);
    text-decoration: none;
    cursor: pointer;
    transition: var(--tx-m);
  }
  button:hover,
  .button:hover {
    background: var(--bkg-hover);
  }
  button:active,
  .button:active {
    --shadow: var(--bkg-active);
    background: var(--bkg-active);
  }
  button.-sm,
  .button.-sm {
    padding: var(--space-100) var(--space-200);
  }
  button.-lg,
  .button.-lg {
    padding: var(--space-100) var(--space-500);
  }
  button.-secondary,
  .button.-secondary {
    --bkg: var(--action-secondary-background);
    --text: var(--action-secondary-foreground);
    --border: var(--bkg);
    --bkg-hover: var(--action-secondary-hover-background);
    --bkg-active: var(--action-secondary-active-background);
  }
  button.-destructive,
  .button.-destructive {
    --bkg: var(--action-destructive-background);
    --text: var(--action-destructive-foreground);
    --border: var(--bkg);
    --bkg-hover: var(--action-destructive-hover-background);
    --bkg-active: var(--action-destructive-active-background);
  }
  button.-outline,
  .button.-outline {
    --bkg: var(--action-outline-background);
    --text: var(--surface-primary-foreground);
    --border: var(--action-outline-border);
    --bkg-hover: var(--action-outline-hover-background);
    --bkg-active: var(--action-outline-selected-bg);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  }
  button.-ghost,
  .button.-ghost {
    --bkg: transparent;
    --text: var(--action-secondary-foreground);
    --border: transparent;
    --bkg-hover: var(--action-outline-hover-background);
    --bkg-active: var(--action-outline-selected-bg);
  }
  button.-link,
  .button.-link {
    --bkg: transparent;
    --text: var(--action-link-foreground);
    --border: transparent;
    --bkg-hover: transparent;
    --bkg-active: transparent;
    text-decoration: underline;
    text-decoration-color: var(--text);
    text-underline-offset: 0.25em;
    text-decoration-thickness: 2px;
  }
  button.-link:hover,
  .button.-link:hover {
    --text: var(--action-link-hover-foreground);
  }
  button[disabled]:hover, button[disabled]:active, button.disabled:hover, button.disabled:active,
  .button[disabled]:hover,
  .button[disabled]:active,
  .button.disabled:hover,
  .button.disabled:active {
    --bkg-hover: var(--bkg);
    --bkg-active: var(--bkg);
    cursor: not-allowed;
  }
  h1, h2, h3, h4, h5, h6 {
    font: normal 700 1rem "HelveticaNowRoman", "Helvetica", "Arial", sans-serif;
  }
  h1, h2, h3 {
    font-variation-settings: "opsz" 30;
  }
  h4, h5 {
    font-variation-settings: "opsz" 12;
  }
  h6 {
    font-variation-settings: "opsz" 4;
    font-weight: 500;
  }
  h1 {
    font-size: clamp(1.35rem, 4.6451612903vw, 3.6rem);
  }
  h2 {
    font-size: clamp(1.2rem, 3.6129032258vw, 2.8rem);
  }
  h3 {
    font-size: clamp(1rem, 3.0967741935vw, 2.4rem);
  }
  h4 {
    font-size: clamp(1rem, 2.5806451613vw, 2rem);
  }
  h5 {
    font-size: clamp(0.8rem, 2.3225806452vw, 1.8rem);
  }
  h6 {
    font-size: clamp(0.8rem, 1.6774193548vw, 1.3rem);
  }
  select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: transparent;
    border: none;
    padding: 0 1em 0 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    outline: none;
  }
  div.select {
    --border: var(--control-border);
    --opacity: 1;
    display: grid;
    grid-template-columns: auto 1em;
    align-items: center;
    position: relative;
    width: 100%;
    min-width: 12ch;
    max-width: 20ch;
    border: 1px solid var(--border);
    border-radius: var(--corner-radius-75);
    padding: var(--space-100) var(--space-200);
    font-size: var(--font-size-100);
    cursor: pointer;
    line-height: 1.1;
    background-color: var(--control-background);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    opacity: var(--opacity);
  }
  div.select::after {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border: 2px solid transparent;
    border-top-color: var(--control-fg);
    border-right-color: var(--control-fg);
    rotate: 135deg;
    justify-self: center;
    opacity: var(--opacity);
  }
  div.select:focus-within::before {
    content: "";
    width: calc(100% + var(--focus-width) * 6);
    height: calc(100% + var(--focus-width) * 6);
    position: absolute;
    top: calc(var(--focus-width) * -3);
    left: calc(var(--focus-width) * -3);
    border-radius: var(--corner-radius-75);
    border: var(--focus-width) solid var(--focus-color);
    opacity: var(--opacity);
  }
  div.select:has([disabled]) {
    cursor: not-allowed;
  }
  :root {
    accent-color: var(--action-default-background);
  }
  :where(:focus-visible) {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: calc(var(--focus-width) * 2);
    border-radius: var(--corner-radius-75);
  }
  fieldset {
    --border: var(--control-border);
    border: 1px solid var(--border);
  }
  fieldset legend {
    padding-inline: 0.5rem;
    color: var(--border);
  }
  :where(input[type=text]) {
    --border: var(--control-border);
    padding-block: var(--space-75);
    padding-inline: var(--space-200);
    border-radius: var(--corner-radius-75);
    border: 1px solid var(--border);
  }
  :where(input[type=text]):focus {
    --border: var(--focus-color);
    border-width: var(--focus-width);
    outline: none;
  }
  :where(input[type=radio]) {
    width: var(--space-300, 16px);
    height: var(--space-300, 16px);
  }
  :where(input[type=checkbox]):not([role=switch]) {
    --img: var(--studs-checkbox-unchecked);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 1em;
    height: 1em;
    position: relative;
  }
  :where(input[type=checkbox]):not([role=switch]):checked, :where(input[type=checkbox]):not([role=switch]).checked {
    --img: var(--studs-checkbox-checked);
  }
  :where(input[type=checkbox]):not([role=switch]):indeterminate, :where(input[type=checkbox]):not([role=switch]).indeterminate {
    --img: var(--studs-checkbox-indeterminate);
  }
  :where(input[type=checkbox]):not([role=switch])::before {
    content: var(--img);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0.125em;
    left: 0;
    filter: var(--dropshadow-default);
  }
  label {
    font-size: var(--font-size-100);
  }
  details {
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding-inline: 0.5em;
  }
  summary {
    font-weight: bold;
    margin-inline: -0.5em;
    padding: 0.5em;
    cursor: pointer;
  }
  summary::marker, summary::-webkit-details-marker {
    color: var(--primary);
  }
  details[open] summary {
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5em;
  }
}