/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: var(--default-font-family, system-ui, sans-serif); /* 4 */
  font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */
  font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  Prevent page scroll when modal dialog is open.
*/

html:has(dialog:modal[open]) {
  overflow: hidden;
}

/*
  Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  line-height: inherit;
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  block-size: 0; /* 1 */
  color: inherit; /* 2 */
  border-block-start-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--default-mono-font-family, ui-monospace, monospace); /* 4 */
  font-feature-settings: var(--default-mono-font-feature-settings, normal); /* 5 */
  font-variation-settings: var(--default-mono-font-variation-settings, normal); /* 6 */
  font-size: 1em; /* 4 */
}

/*
  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 {
  inset-block-end: -0.25em;
}

sup {
  inset-block-start: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  1. Inherit the font styles in all browsers.
  2. Remove the default background color.
*/

button,
input,
optgroup,
select,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  background: transparent; /* 2 */
}

/*
  Reset the default inset border style for form controls to solid.
*/

input:where(:not([type='button'], [type='reset'], [type='submit'])),
select,
textarea {
  border: 1px solid;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/
button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  block-size: auto;
}

/*
  Correct the arrow style of datalist in Chrome.
*/

::-webkit-calendar-picker-indicator {
  line-height: 1em;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
  2. Set the default placeholder color to a semi-transparent version of the current text color.
*/

::placeholder {
  opacity: 1; /* 1 */
  color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
     This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/*
  Make turbo frame become pseudo-box by default.
*/

turbo-frame {
  display: contents;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden] {
  display: none !important;
}

/*
  Make elements with the HTML contents attribute become pseudo-box by default.
*/

[contents] {
  display: contents !important;
}
/****************************************************************
* Animation
* Variables for animating elements with CSS animations.
* animation: var(--animate-fade-in) forwards;
*****************************************************************/

:root {
  --animate-fade-in: fade-in .5s cubic-bezier(.25, 0, .3, 1);
  --animate-fade-in-bloom: fade-in-bloom 2s cubic-bezier(.25, 0, .3, 1);
  --animate-fade-out: fade-out .5s cubic-bezier(.25, 0, .3, 1);
  --animate-fade-out-bloom: fade-out-bloom 2s cubic-bezier(.25, 0, .3, 1);
  --animate-scale-up: scale-up .5s cubic-bezier(.25, 0, .3, 1);
  --animate-scale-down: scale-down .5s cubic-bezier(.25, 0, .3, 1);
  --animate-slide-out-up: slide-out-up .5s cubic-bezier(.25, 0, .3, 1);
  --animate-slide-out-down: slide-out-down .5s cubic-bezier(.25, 0, .3, 1);
  --animate-slide-out-right: slide-out-right .5s cubic-bezier(.25, 0, .3, 1);
  --animate-slide-out-left: slide-out-left .5s cubic-bezier(.25, 0, .3, 1);
  --animate-slide-in-up: slide-in-up .5s cubic-bezier(.25, 0, .3, 1);
  --animate-slide-in-down: slide-in-down .5s cubic-bezier(.25, 0, .3, 1);
  --animate-slide-in-right: slide-in-right .5s cubic-bezier(.25, 0, .3, 1);
  --animate-slide-in-left: slide-in-left .5s cubic-bezier(.25, 0, .3, 1);
  --animate-shake-x: shake-x .75s cubic-bezier(0, 0, 0, 1);
  --animate-shake-y: shake-y .75s cubic-bezier(0, 0, 0, 1);
  --animate-shake-z: shake-z 1s cubic-bezier(0, 0, 0, 1);
  --animate-spin: spin 2s linear infinite;
  --animate-ping: ping 5s cubic-bezier(0, 0, .3, 1) infinite;
  --animate-blink: blink 1s cubic-bezier(0, 0, .3, 1) infinite;
  --animate-float: float 3s cubic-bezier(0, 0, 0, 1) infinite;
  --animate-bounce: bounce 2s cubic-bezier(.5, -.3, .1, 1.5) infinite;
  --animate-pulse: pulse 2s cubic-bezier(0, 0, .3, 1) infinite;
}

@keyframes fade-in {
  to { opacity: 1 }
}

@keyframes fade-in-bloom {
    0% { opacity: 0; filter: brightness(1) blur(20px) }
   10% { opacity: 1; filter: brightness(2) blur(10px) }
  100% { opacity: 1; filter: brightness(1) blur(0) }
}

@keyframes fade-out {
  to { opacity: 0 }
}

@keyframes fade-out-bloom {
  100% { opacity: 0; filter: brightness(1) blur(20px) }
   10% { opacity: 1; filter: brightness(2) blur(10px) }
    0% { opacity: 1; filter: brightness(1) blur(0) }
}
@keyframes scale-up {
  to { transform: scale(1.25) }
}

@keyframes scale-down {
  to { transform: scale(.75) }
}

@keyframes slide-out-up {
  to { transform: translateY(-100%) }
}

@keyframes slide-out-down {
  to { transform: translateY(100%) }
}

@keyframes slide-out-right {
  to { transform: translateX(100%) }
}

@keyframes slide-out-left {
  to { transform: translateX(-100%) }
}

@keyframes slide-in-up {
  from { transform: translateY(100%) }
}

@keyframes slide-in-down {
  from { transform: translateY(-100%) }
}

@keyframes slide-in-right {
  from { transform: translateX(-100%) }
}

@keyframes slide-in-left {
  from { transform: translateX(100%) }
}

@keyframes shake-x {
  0%, 100% { transform: translateX(0%) }
  20% { transform: translateX(-5%) }
  40% { transform: translateX(5%) }
  60% { transform: translateX(-5%) }
  80% { transform: translateX(5%) }
}

@keyframes shake-y {
  0%, 100% { transform: translateY(0%) }
  20% { transform: translateY(-5%) }
  40% { transform: translateY(5%) }
  60% { transform: translateY(-5%) }
  80% { transform: translateY(5%) }
}

@keyframes shake-z {
  0%, 100% { transform: rotate(0deg) }
  20% { transform: rotate(-2deg) }
  40% { transform: rotate(2deg) }
  60% { transform: rotate(-2deg) }
  80% { transform: rotate(2deg) }
}

@keyframes spin {
  to { transform: rotate(1turn) }
}

@keyframes ping {
  90%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .5
  }
}

@keyframes float {
  50% { transform: translateY(-25%) }
}

@keyframes bounce {
  25% { transform: translateY(-20%) }
  40% { transform: translateY(-3%) }
  0%, 60%, 100% { transform: translateY(0) }
}

@keyframes pulse {
  50% { transform: scale(.9,.9) }
}

@media (prefers-color-scheme: dark) {
  @keyframes fade-in-bloom {
      0% { opacity: 0; filter: brightness(1) blur(20px) }
     10% { opacity: 1; filter: brightness(0.5) blur(10px) }
    100% { opacity: 1; filter: brightness(1) blur(0) }
  }
}

@media (prefers-color-scheme: dark) {
  @keyframes fade-out-bloom {
    100% { opacity: 0; filter: brightness(1) blur(20px) }
     10% { opacity: 1; filter: brightness(0.5) blur(10px) }
      0% { opacity: 1; filter: brightness(1) blur(0) }
  }
}
:root {
  /****************************************************************
  * Border Width
  * Variables for controlling the width of an element's borders.
  * border-width: var(--border);
  *****************************************************************/
  --border:   1px;
  --border-2: 2px;
  --border-4: 4px;
  --border-8: 8px;

  /****************************************************************
  * Border Radius
  * Variables for controlling the border radius of an element.
  * border-radius: $rounded-none;
  *****************************************************************/
  --rounded-sm:   0.125rem; /* 2px */
  --rounded:      0.25rem;  /* 4px */
  --rounded-md:   0.375rem; /* 6px */
  --rounded-lg:   0.5rem;   /* 8px */
  --rounded-xl:   0.75rem;  /* 12px */
  --rounded-2xl:  1rem;     /* 16px */
  --rounded-3xl:  1.5rem;   /* 24px */
  --rounded-full: 9999px;
}
:root {
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;

  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;

  --stone-50:  #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;
  --stone-900: #1c1917;
  --stone-950: #0c0a09;

  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;
  --red-950: #450a0a;

  --orange-50:  #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --orange-950: #431407;

  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;
  --amber-950: #451a03;

  --yellow-50:  #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;
  --yellow-950: #422006;

  --lime-50:  #f7fee7;
  --lime-100: #ecfccb;
  --lime-200: #d9f99d;
  --lime-300: #bef264;
  --lime-400: #a3e635;
  --lime-500: #84cc16;
  --lime-600: #65a30d;
  --lime-700: #4d7c0f;
  --lime-800: #3f6212;
  --lime-900: #365314;
  --lime-950: #1a2e05;

  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --green-950: #052e16;

  --emerald-50:  #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;
  --emerald-950: #022c22;

  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;
  --teal-950: #042f2e;

  --cyan-50:  #ecfeff;
  --cyan-100: #cffafe;
  --cyan-200: #a5f3fc;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-700: #0e7490;
  --cyan-800: #155e75;
  --cyan-900: #164e63;
  --cyan-950: #083344;

  --sky-50:  #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;
  --sky-950: #082f49;

  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;

  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --indigo-950: #1e1b4b;

  --violet-50:  #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;
  --violet-950: #2e1065;

  --purple-50:  #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-800: #6b21a8;
  --purple-900: #581c87;
  --purple-950: #3b0764;

  --fuchsia-50:  #fdf4ff;
  --fuchsia-100: #fae8ff;
  --fuchsia-200: #f5d0fe;
  --fuchsia-300: #f0abfc;
  --fuchsia-400: #e879f9;
  --fuchsia-500: #d946ef;
  --fuchsia-600: #c026d3;
  --fuchsia-700: #a21caf;
  --fuchsia-800: #86198f;
  --fuchsia-900: #701a75;
  --fuchsia-950: #4a044e;

  --pink-50:  #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;
  --pink-950: #500724;

  --rose-50:  #fff1f2;
  --rose-100: #ffe4e6;
  --rose-200: #fecdd3;
  --rose-300: #fda4af;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;
  --rose-700: #be123c;
  --rose-800: #9f1239;
  --rose-900: #881337;
  --rose-950: #4c0519;
}
:root {
  /****************************************************************
  * Box Shadow
  * Variables for controlling the box shadow of an element.
  * box-shadow: var(--shadow);
  ****************************************************************/
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /****************************************************************
  * Opacity
  * Variables for controlling the opacity of an element.
  * opacity: var(--opacity-25);
  ****************************************************************/
  --opacity-5:   0.05;
  --opacity-10:  0.1;
  --opacity-20:  0.2;
  --opacity-25:  0.25;
  --opacity-30:  0.3;
  --opacity-40:  0.4;
  --opacity-50:  0.5;
  --opacity-60:  0.6;
  --opacity-70:  0.7;
  --opacity-75:  0.75;
  --opacity-80:  0.8;
  --opacity-90:  0.9;
  --opacity-95:  0.95;
  --opacity-100: 1;
}
:root {
  /****************************************************************
  * Blur
  * Variables for applying blur filters to an element.
  * filter|backdrop-filter: var(--blur);
  *****************************************************************/
  --blur-none: blur(0);
  --blur-sm:   blur(4px);
  --blur:      blur(8px);
  --blur-md:   blur(12px);
  --blur-lg:   blur(16px);
  --blur-xl:   blur(24px);
  --blur-2xl:  blur(40px);
  --blur-3xl:  blur(64px);

  /****************************************************************
  * Brightness
  * Variables for applying brightness filters to an element.
  * filter|backdrop-filter: var(--brightness-50);
  *****************************************************************/
  --brightness-0:   brightness(0);
  --brightness-50:  brightness(0.5);
  --brightness-75:  brightness(0.75);
  --brightness-90:  brightness(0.9);
  --brightness-95:  brightness(0.95);
  --brightness-100: brightness(1);
  --brightness-105: brightness(1.05);
  --brightness-110: brightness(1.1);
  --brightness-125: brightness(1.25);
  --brightness-150: brightness(1.5);
  --brightness-200: brightness(2);

  /****************************************************************
  * Contrast
  * Variables for applying contrast filters to an element.
  * filter|backdrop-filter: var(--contrast-50);
  *****************************************************************/
  --contrast-0:   contrast(0);
  --contrast-50:  contrast(0.5);
  --contrast-75:  contrast(0.75);
  --contrast-100: contrast(1);
  --contrast-125: contrast(1.25);
  --contrast-150: contrast(1.5);
  --contrast-200: contrast(2);

  /****************************************************************
  * Drop Shadow
  * Variables for applying drop-shadow filters to an element.
  * filter: var(--drop-shadow);
  *****************************************************************/
  --drop-shadow-none: drop-shadow(0 0 #0000);
  --drop-shadow-sm:   drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
  --drop-shadow:      drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
  --drop-shadow-md:   drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
  --drop-shadow-lg:   drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
  --drop-shadow-xl:   drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
  --drop-shadow-2xl:  drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));

  /****************************************************************
  * Grayscale
  * Variables for applying grayscale filters to an element.
  * filter|backdrop-filter: var(--grayscale);
  *****************************************************************/
  --grayscale-0: grayscale(0);
  --grayscale:   grayscale(100%);

  /****************************************************************
  * Hue Rotate
  * Variables for applying hue-rotate filters to an element.
  * filter|backdrop-filter: var(--hue-rotate-15);
  *****************************************************************/
  --hue-rotate-0:   hue-rotate(0deg);
  --hue-rotate-15:  hue-rotate(15deg);
  --hue-rotate-30:  hue-rotate(30deg);
  --hue-rotate-60:  hue-rotate(60deg);
  --hue-rotate-90:  hue-rotate(90deg);
  --hue-rotate-180: hue-rotate(180deg);

  /****************************************************************
  * Invert
  * Variables for applying invert filters to an element.
  * filter|backdrop-filter: var(--invert);
  *****************************************************************/
  --invert-0: invert(0);
  --invert:   invert(100%);

  /****************************************************************
  * Saturate
  * Variables for applying saturation filters to an element.
  * filter|backdrop-filter: var(--saturate-50);
  *****************************************************************/
  --saturate-0:   saturate(0);
  --saturate-50:  saturate(0.5);
  --saturate-100: saturate(1);
  --saturate-150: saturate(1.5);
  --saturate-200: saturate(2);

  /****************************************************************
  * Sepia
  * Variables for applying sepia filters to an element.
  * filter|backdrop-filter: var(--sepia);
  *****************************************************************/
  --sepia-0: sepia(0);
  --sepia:   sepia(100%);

  /****************************************************************
  * Opacity
  * Utilities for applying backdrop opacity filters to an element.
  * backdrop-filter: var(--alpha-45);
  *****************************************************************/
  --alpha-0:	 opacity(0);
  --alpha-5:	 opacity(0.05);
  --alpha-10:	 opacity(0.1);
  --alpha-15:	 opacity(0.15);
  --alpha-20:	 opacity(0.2);
  --alpha-25:	 opacity(0.25);
  --alpha-30:	 opacity(0.3);
  --alpha-35:	 opacity(0.35);
  --alpha-40:	 opacity(0.4);
  --alpha-45:	 opacity(0.45);
  --alpha-50:	 opacity(0.5);
  --alpha-55:	 opacity(0.55);
  --alpha-60:	 opacity(0.6);
  --alpha-65:	 opacity(0.65);
  --alpha-70:	 opacity(0.7);
  --alpha-75:	 opacity(0.75);
  --alpha-80:	 opacity(0.8);
  --alpha-85:	 opacity(0.85);
  --alpha-90:	 opacity(0.9);
  --alpha-95:	 opacity(0.95);
  --alpha-100: opacity(1);
}
:root {
  /****************************************************************
  * Fixed Size
  *****************************************************************/
  --size-0_5: 0.125rem; /* 2px */
  --size-1:   0.25rem;  /* 4px */
  --size-1_5: 0.375rem; /* 6px */
  --size-2:   0.5rem;   /* 8px */
  --size-2_5: 0.625rem; /* 10px */
  --size-3:   0.75rem;  /* 12px */
  --size-3_5: 0.875rem; /* 14px */
  --size-4:   1rem;     /* 16px */
  --size-5:   1.25rem;  /* 20px */
  --size-6:   1.5rem;   /* 24px */
  --size-7:   1.75rem;  /* 28px */
  --size-8:   2rem;     /* 32px */
  --size-9:   2.25rem;  /* 36px */
  --size-10:  2.5rem;   /* 40px */
  --size-11:  2.75rem;  /* 44px */
  --size-12:  3rem;     /* 48px */
  --size-14:  3.5rem;   /* 56px */
  --size-16:  4rem;     /* 64px */
  --size-20:  5rem;     /* 80px */
  --size-24:  6rem;     /* 96px */
  --size-28:  7rem;     /* 112px */
  --size-32:  8rem;     /* 128px */
  --size-36:  9rem;     /* 144px */
  --size-40:  10rem;    /* 160px */
  --size-44:  11rem;    /* 176px */
  --size-48:  12rem;    /* 192px */
  --size-52:  13rem;    /* 208px */
  --size-56:  14rem;    /* 224px */
  --size-60:  15rem;    /* 240px */
  --size-64:  16rem;    /* 256px */
  --size-72:  18rem;    /* 288px */
  --size-80:  20rem;    /* 320px */
  --size-96:  24rem;    /* 384px */

  /****************************************************************
  * Percentual Size
  *****************************************************************/
  --size-1-2:   50%;
  --size-1-3:   33.333333%;
  --size-2-3:   66.666667%;
  --size-1-4:   25%;
  --size-2-4:   50%;
  --size-3-4:   75%;
  --size-1-5:   20%;
  --size-2-5:   40%;
  --size-3-5:   60%;
  --size-4-5:   80%;
  --size-1-6:   16.666667%;
  --size-2-6:   33.333333%;
  --size-3-6:   50%;
  --size-4-6:   66.666667%;
  --size-5-6:   83.333333%;
  --size-1-12:  8.333333%;
  --size-2-12:  16.666667%;
  --size-3-12:  25%;
  --size-4-12:  33.333333%;
  --size-5-12:  41.666667%;
  --size-6-12:  50%;
  --size-7-12:  58.333333%;
  --size-8-12:  66.666667%;
  --size-9-12:  75%;
  --size-10-12: 83.333333%;
  --size-11-12: 91.666667%;
  --size-full:  100%;

  /****************************************************************
  * Max Inline Sizes
  *****************************************************************/
  --max-i-3xs: 16rem; /* 256px */
  --max-i-2xs: 18rem; /* 288px */
  --max-i-xs:  20rem; /* 320px */
  --max-i-sm:  24rem; /* 384px */
  --max-i-md:  28rem; /* 448px */
  --max-i-lg:  32rem; /* 512px */
  --max-i-xl:  36rem; /* 576px */
  --max-i-2xl: 42rem; /* 672px */
  --max-i-3xl: 48rem; /* 768px */
  --max-i-4xl: 56rem; /* 896px */
  --max-i-5xl: 64rem; /* 1024px */
  --max-i-6xl: 72rem; /* 1152px */
  --max-i-7xl: 80rem; /* 1280px */

  /****************************************************************
  * Aspect Ratio
  *****************************************************************/
  --aspect-square: 1/1;
  --aspect-widescreen: 16/9;

  /****************************************************************
  * Breakpoints
  *****************************************************************/
  --breakpoint-sm:  40rem; /* 640px */
  --breakpoint-md:  48rem; /* 768px */
  --breakpoint-lg:  64rem; /* 1024px */
  --breakpoint-xl:  80rem; /* 1280px */
  --breakpoint-2xl: 96rem; /* 1536px */
}
:root {
  /****************************************************************
  * Scale
  * Variables for scaling elements with transform.
  * transform: var(--scale-100);
  *****************************************************************/
  --scale-50:  scale(0.50);
  --scale-75:  scale(0.75);
  --scale-90:  scale(0.90);
  --scale-95:  scale(0.95);
  --scale-100: scale(1);
  --scale-105: scale(1.05);
  --scale-110: scale(1.10);
  --scale-125: scale(1.25);
  --scale-150: scale(1.50);

  /****************************************************************
  * Rotate
  * Variables for rotating elements with transform.
  * transform: var(--rotate-45);
  *****************************************************************/
  --rotate-0:   rotate(0deg);
  --rotate-1:   rotate(1deg);
  --rotate-2:   rotate(2deg);
  --rotate-3:   rotate(3deg);
  --rotate-6:   rotate(6deg);
  --rotate-12:  rotate(12deg);
  --rotate-45:  rotate(45deg);
  --rotate-90:  rotate(90deg);
  --rotate-180: rotate(180deg);

  /****************************************************************
  * Skew
  * Varibles for skewing elements with transform.
  * transform: var(--skew-x-3);
  *****************************************************************/
  --skew-x-0:  skewX(0deg);
  --skew-y-0:  skewY(0deg);
  --skew-x-1:  skewX(1deg);
  --skew-y-1:  skewY(1deg);
  --skew-x-2:  skewX(2deg);
  --skew-y-2:  skewY(2deg);
  --skew-x-3:  skewX(3deg);
  --skew-y-3:  skewY(3deg);
  --skew-x-6:  skewX(6deg);
  --skew-y-6:  skewY(6deg);
  --skew-x-12: skewX(12deg);
  --skew-y-12: skewY(12deg);
}
:root {
  /****************************************************************
  * Transition Property
  * Variables for controlling which CSS properties transition.
  * transition-property: var(--transition);
  *****************************************************************/
  --transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
  --transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke;

  /****************************************************************
  * Transition Timing
  * Variables for controlling the timing of CSS transitions.
  * transition-duration|transition-delay: var(--time-75);
  *****************************************************************/
  --time-75:   75ms;
  --time-100:  100ms;
  --time-150:  150ms;
  --time-200:  200ms;
  --time-300:  300ms;
  --time-500:  500ms;
  --time-700:  700ms;
  --time-1000: 1000ms;

  /****************************************************************
  * Transition Timing Function
  * Variables for controlling the easing of CSS transitions.
  * transition-timing-function: var(--ease-in);
  *****************************************************************/
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
:root {
  /****************************************************************
  * Font Size
  * Variables for controlling the font size of an element.
  * font-size: var(--text-xs);
  *****************************************************************/
  --text-xs:   0.75rem;  /* 12px */
  --text-sm:   0.875rem; /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg:   1.125rem; /* 18px */
  --text-xl:   1.25rem;  /* 20px */
  --text-2xl:  1.5rem;   /* 24px */
  --text-3xl:  1.875rem; /* 30px */
  --text-4xl:  2.25rem;  /* 36px */
  --text-5xl:  3rem;     /* 48px */
  --text-6xl:  3.75rem;  /* 60px */
  --text-7xl:  4.5rem;   /* 72px */
  --text-8xl:  6rem;     /* 96px */
  --text-9xl:  8rem;     /* 128px */

  --text-sm-responsive:   clamp(0.875rem, 2cqi, 1rem);
  --text-base-responsive: clamp(1rem, 2.5cqi, 1.5rem);
  --text-lg-responsive:   clamp(1.25rem, 4cqi, 1.875rem);
  --text-xl-responsive:   clamp(1.875rem, 5cqi, 3rem);

  /****************************************************************
  * Font Weight
  * Variables for controlling the font weight of an element.
  * font-weight: var(--font-hairline);
  *****************************************************************/
  --font-thin:       100;
  --font-extralight: 200;
  --font-light:      300;
  --font-normal:     400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;
  --font-black:      900;

  /****************************************************************
  * Line Height
  * Variables for controlling the leading (line height) of an element.
  * line-height: var(--leading-tight);
  *****************************************************************/
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;
  --leading-3:       .75rem;  /* 12px */
  --leading-4:       1rem;    /* 16px */
  --leading-5:       1.25rem; /* 20px */
  --leading-6:       1.5rem;  /* 24px */
  --leading-7:       1.75rem; /* 28px */
  --leading-8:       2rem;    /* 32px */
  --leading-9:       2.25rem; /* 36px */
  --leading-10:      2.5rem;  /* 40px */

  /****************************************************************
  * Font Family (https://modernfontstacks.com)
  * Variables for controlling the font family of an element.
  * font-family: var(--font-sans);
  *****************************************************************/
  --font-system-ui: system-ui, sans-serif;
  --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
  --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
  --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
  --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
  --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
  --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
  --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
  --font-monospace-code: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
  --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
  --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
  --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
  --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
  --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
  --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;

  /****************************************************************
  * Letter Spacing
  * Variables for controlling the tracking (letter spacing) of an element.
  * letter-spacing: var(--tracking-tighter);
  *****************************************************************/
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;
}
.alert {
  border-color: var(--alert-border-color, var(--color-border));
  border-radius: var(--rounded-lg);
  border-width: var(--border);
  color: var(--alert-color, var(--color-text));
  padding: var(--size-4);
  inline-size: var(--size-full);

  img {
    filter: var(--alert-icon-color, var(--color-filter-text));
  }
}

.alert--positive {
  --alert-border-color: var(--color-positive);
  --alert-color: var(--color-positive);
  --alert-icon-color: var(--color-filter-positive);
}

.alert--negative {
  --alert-border-color: var(--color-negative);
  --alert-color: var(--color-negative);
  --alert-icon-color: var(--color-filter-negative);
}
:root {
  /* Abstractions */
  --color-bg: white;
  --color-text: black;
  --color-text-reversed: white;
  --color-text-subtle: var(--zinc-500);
  --color-link: var(--blue-700);
  --color-border-light: var(--zinc-100);
  --color-border: var(--zinc-200);
  --color-border-dark: var(--zinc-400);
  --color-selected: var(--blue-100);
  --color-selected-dark: var(--blue-300);
  --color-highlight: var(--yellow-200);

  /* Accent colors */
  --color-primary: var(--zinc-900);
  --color-secondary: var(--zinc-100);
  --color-negative: var(--red-600);
  --color-positive: var(--green-600);

  /* SVG color values */
  --color-filter-text: invert(0);
  --color-filter-text-reversed: invert(1);
  --color-filter-negative: invert(22%) sepia(85%) saturate(1790%) hue-rotate(339deg) brightness(105%) contrast(108%);
  --color-filter-positive: invert(44%) sepia(89%) saturate(409%) hue-rotate(89deg) brightness(94%) contrast(97%);

  @media (prefers-color-scheme: dark) {
    /* Abstractions */
    --color-bg: black;
    --color-text: white;
    --color-text-reversed: black;
    --color-text-subtle: var(--zinc-400);
    --color-link: var(--sky-400);
    --color-border-light: var(--zinc-800);
    --color-border: var(--zinc-800);
    --color-border-dark: var(--zinc-600);
    --color-selected: var(--blue-950);
    --color-selected-dark: var(--blue-800);
    --color-highlight: var(--yellow-800);

    /* Accent colors */
    --color-primary: var(--zinc-50);
    --color-secondary: var(--zinc-800);
    --color-negative: var(--red-900);
    --color-positive: var(--green-900);

    /* SVG color values */
    --color-filter-text: invert(1);
    --color-filter-text-reversed: invert(0);
    --color-filter-negative: invert(15%) sepia(65%) saturate(2067%) hue-rotate(339deg) brightness(102%) contrast(97%);
    --color-filter-positive: invert(23%) sepia(62%) saturate(554%) hue-rotate(91deg) brightness(93%) contrast(91%);
  }
}

* {
  border-color: var(--color-border);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

.turbo-progress-bar {
  background-color: var(--color-primary);
}

::selection {
  background-color: var(--color-selected);
}
:root {
  --btn-background: var(--color-bg);
}

.btn {
  align-items: center;
  background-color: var(--btn-background);
  border-radius: var(--btn-radius, var(--rounded-md));
  border: 1px solid var(--btn-border-color, var(--color-border));
  color: var(--btn-color, var(--color-text));
  cursor: pointer;
  display: inline-flex;
  font-size: var(--btn-font-size, var(--text-sm));
  font-weight: var(--btn-font-weight, var(--font-medium));
  gap: var(--size-2);
  inline-size: var(--btn-inline-size, auto);
  justify-content: var(--btn-justify-content, center);
  padding: var(--btn-padding, 0.5rem 1rem);
  text-align: center;
  white-space: nowrap;

  img:not([class]) {
    filter: var(--btn-icon-color, var(--color-filter-text));
  }

  &:hover {
    background-color: var(--btn-hover-color, oklch(from var(--btn-background) calc(l * .95) c h));
  }

  &:focus-visible {
    outline: var(--btn-outline-size, 2px) solid var(--color-selected-dark);
    outline-offset: var(--border-2);
  }

  &:is(:disabled, [aria-disabled]) {
    opacity: var(--opacity-50);
    pointer-events: none;
  }
}

.btn--primary {
  --btn-background: var(--color-primary);
  --btn-border-color: transparent;
  --btn-color: var(--color-text-reversed);
  --btn-icon-color: var(--color-filter-text-reversed);
}

.btn--secondary {
  --btn-background: var(--color-secondary);
  --btn-border-color: transparent;
}

.btn--borderless {
  --btn-border-color: transparent;
}

.btn--positive {
  --btn-background: var(--color-positive);
  --btn-border-color: transparent;
  --btn-color: white;
  --btn-icon-color: invert(1);
}

.btn--negative {
  --btn-background: var(--color-negative);
  --btn-border-color: transparent;
  --btn-color: white;
  --btn-icon-color: invert(1);
}

.btn--plain {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-hover-color: transparent;
  --btn-padding: 0;
}

.btn--icon {
  --btn-padding: var(--size-2);
  --btn-radius: var(--rounded-full);
}

[aria-busy] .btn--loading:disabled {
  > * {
    visibility: hidden;
  }

  &::after {
    filter: var(--btn-icon-color, var(--color-filter-text));
  }

  &::after {
    animation: spin 1s linear infinite;
    background-image: url(/assets/loader-circle-9c11e7f5216de0f473bcb09a197af50ce8061bbc9599e0d64ae365df4bb7a5ba.svg);
    background-size: cover;
    block-size: var(--size-4);
    content: "";
    inline-size: var(--size-4);
    position: absolute;
  }
}
.flash {
  align-items: center;
  animation: appear-then-fade 4s 300ms both;
  backdrop-filter: var(--blur) var(--contrast-75);
  background-color: rgb(from var(--color-text) r g b / .65);
  border-radius: var(--rounded-full);
  color: var(--color-text-reversed);
  display: flex;
  gap: var(--size-2);
  justify-content: center;
  line-height: var(--leading-none);
  margin-block-start: var(--flash-position, 0);
  margin-inline: auto;
  min-block-size: var(--size-11);
  padding: var(--size-1) var(--size-4);
  text-align: center;

  [data-turbo-preview] & {
    display: none;
  }

  @media (width >= 40rem) {
    font-size: var(--text-lg);
  }

  @media (width >= 64rem) {
    font-size: var(--text-xl);
  }
}

.flash--extended {
  animation-name: appear-then-fade-extended;
  animation-duration: 12s;
}

@keyframes appear-then-fade {
  0%, 100% { opacity: 0; }
  5%, 60%  { opacity: 1; }
}

@keyframes appear-then-fade-extended {
  0%, 100% { opacity: 0; }
  2%, 90% { opacity: 1; }
}
.input {
  appearance: none;
  background-color: var(--input-background, var(--color-bg));
  border: 1px solid var(--input-border-color, var(--color-border));
  border-radius: var(--input-radius, var(--rounded-md));
  font-size: var(--input-font-size, var(--text-sm));
  inline-size: var(--input-inline-size, var(--size-full));
  min-block-size: var(--input-block-size, var(--size-10));
  padding: var(--input-padding, 0.5rem 0.75rem);

  option {
    padding-block: 2px;
  }

  &:is(textarea[rows=auto]) {
    field-sizing: content;
    max-block-size: calc(10lh + var(--size-6));
    min-block-size: calc(3lh  + var(--size-6));
  }

  &:is(select):not([multiple], [size]) {
    background-image: url(/assets/select-arrow-e49ad670247c2e9acfd8ba9adc3dcdf6b866d825ab779505964f7d9278a8ac82.svg);
    background-position: center right var(--size-2);
    background-repeat: no-repeat;
    background-size: var(--size-4) auto;
  }

  &::file-selector-button {
    font-weight: var(--font-medium);
    margin-inline-end: var(--size-2);
  }

  &:user-invalid {
    border-color: var(--color-negative);
  }

  &:user-invalid ~ .invalid-feedback {
    display: flex;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-50);
  }
}

/* Hide invalid feedback by default */
.invalid-feedback {
  display: none;
}

/* Containers that act like (and contain) inputs */
.input--actor {
  input {
    border: 0; inline-size: 100%; outline: 0;
  }

  img:not([class]) {
    filter: var(--input-icon-color, var(--color-filter-text));
  }

  &:focus-within {
    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
    outline-offset: var(--border-2);
  }
}

/* Checkbox, radio, and range */
.checkbox, .radio {
  accent-color: var(--color-primary); transform: scale(1.15);
}

.range {
  accent-color: var(--color-primary);
}

/* Styles that are shared between components */
:is(.input, .checkbox, .radio, .range) {
  &:focus-visible {
    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
    outline-offset: var(--border-2);
  }

  .field_with_errors & {
    border-color: var(--color-negative);
  }
}
.sidebar-layout {
  display: grid;
  grid-template-areas: "header header" "sidebar main";
  grid-template-columns: var(--sidebar-width, 0) 1fr;
  grid-template-rows: auto 1fr;
  block-size: 100dvh;

  @media (width >= 48rem) {
    --sidebar-border-width: var(--border);
    --sidebar-padding: var(--size-2);
    --sidebar-width: 220px;
  }

  @media (width >= 64rem) {
    --sidebar-border-width: var(--border);
    --sidebar-padding: var(--size-4);
    --sidebar-width: 280px;
  }
}

.header-layout {
  display: grid;
  grid-template-areas: "header" "main";
  grid-template-rows: auto 1fr;
  block-size: 100dvh;
}

.centered-layout {
  display: grid;
  place-items: center;
  block-size: 100dvh;
}

.container {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--container-width, 64rem);
}

#header {
  align-items: center;
  background-color: rgb(from var(--color-border-light) r g b / .5);
  border-block-end-width: var(--border);
  block-size: var(--size-16);
  display: flex;
  gap: var(--size-4);
  grid-area: header;
  padding-inline: var(--size-4);

  @media (width >= 64rem) {
    padding-inline: var(--size-6);
  }
}

#sidebar {
  background-color: rgb(from var(--color-border-light) r g b / .5);
  border-inline-end-width: var(--sidebar-border-width, 0);
  display: flex;
  flex-direction: column;
  grid-area: sidebar;
  gap: var(--size-2);
  overflow-x: hidden;
  padding: var(--sidebar-padding, 0);
}

#main {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  grid-area: main;
  overflow: auto;
  padding: var(--size-4);

  @media (width >= 64rem) {
    gap: var(--size-6); padding: var(--size-6);
  }
}
.switch {
  appearance: none;
  background-color: var(--color-border);
  border-color: transparent;
  border-radius: var(--rounded-full);
  border-width: var(--border-2);
  block-size: var(--size-6);
  cursor: pointer;
  inline-size: var(--size-11);
  transition-duration: var(--time-150);
  transition-property: var(--transition-colors);

  &:checked {
    background-color: var(--color-primary);
  }

  &:checked::before {
    margin-inline-start: var(--size-5);
  }

  &::before {
    aspect-ratio: var(--aspect-square);
    background-color: var(--color-text-reversed);
    block-size: var(--size-full);
    border-radius: var(--rounded-full);
    content: "";
    display: block;
    transition: margin var(--time-150);
  }

  &:focus-visible {
    outline: var(--border-2) solid var(--color-selected-dark);
    outline-offset: var(--border-2);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-50);
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



















 */
/****************************************************************
* Flex
*****************************************************************/
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.inline-flex { display: inline-flex; }

.justify-start { justify-content: start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: end; }
.justify-between { justify-content: space-between; }

.items-start { align-items: start; }
.items-end { align-items: end; }
.items-center { align-items: center; }

.grow { flex-grow: 1; }
.grow-0	{ flex-grow: 0; }

.shrink { flex-shrink: 1; }
.shrink-0 { flex-shrink: 0; }

.self-start { align-self: start; }
.self-end { align-self: end; }
.self-center { align-self: center; }

.gap { column-gap: var(--column-gap, 0.5rem); row-gap: var(--row-gap, 1rem); }
.gap-half { column-gap: 0.25rem; row-gap: 0.5rem; }

/****************************************************************
* Text
*****************************************************************/
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.underline { text-decoration: underline; }
.no-underline	{ text-decoration: none; }

.uppercase { text-transform: uppercase; }
.normal-case { text-transform: none; }

.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }

.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }

.overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
.overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.opacity-75 { opacity: var(--opacity-75); }
.opacity-50 { opacity: var(--opacity-50); }

.leading-none { line-height: var(--leading-none); }
.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }

.text-start { text-align: start; }
.text-end { text-align: end; }
.text-center { text-align: center; }

.text-primary { color: var(--color-text); }
.text-reversed { color: var(--color-text-reversed); }
.text-negative { color: var(--color-negative); }
.text-positive { color: var(--color-positive); }
.text-subtle { color: var(--color-text-subtle); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }
.text-7xl { font-size: var(--text-7xl); }
.text-8xl { font-size: var(--text-8xl); }
.text-9xl { font-size: var(--text-9xl); }

.text-sm--responsive { font-size: var(--text-sm-responsive); }
.text-base--responsive { font-size: var(--text-base-responsive); }
.text-lg--responsive { font-size: var(--text-lg-responsive); }
.text-xl--responsive { font-size: var(--text-xl-responsive); }

/****************************************************************
* Background
*****************************************************************/
.bg-main { background-color: var(--color-bg); }
.bg-black { background-color: var(--color-text); }
.bg-white { background-color: var(--color-text-reversed); }
.bg-shade { background-color: var(--color-border-light); }
.bg-transparent { background-color: transparent; }

/****************************************************************
* SVG colors
*****************************************************************/
.colorize-black { filter: var(--color-filter-text); }
.colorize-white { filter: var(--color-filter-text-reversed); }
.colorize-negative { filter: var(--color-filter-negative); }
.colorize-positive { filter: var(--color-filter-positive); }

/****************************************************************
* Border
*****************************************************************/
.border-0 { border-width: 0; }
.border { border-width: var(--border-size, 1px); }

.border-b { border-block-width: var(--border-size, 1px); }
.border-bs { border-block-start-width: var(--border-size, 1px); }
.border-be { border-block-end-width: var(--border-size, 1px); }

.border-i { border-inline-width: var(--border-size, 1px); }
.border-is { border-inline-start-width: var(--border-size, 1px); }
.border-ie { border-inline-end-width: var(--border-size, 1px); }

.border-main { border-color: var(--color-border); }
.border-dark { border-color: var(--color-border-dark); }

.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--rounded-sm); }
.rounded { border-radius: var(--rounded); }
.rounded-md { border-radius: var(--rounded-md); }
.rounded-lg { border-radius: var(--rounded-lg); }
.rounded-full { border-radius: var(--rounded-full); }

/****************************************************************
* Shadow
*****************************************************************/
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/****************************************************************
* Layout
*****************************************************************/
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

.relative { position: relative; }
.sticky	{ position: sticky; }

.min-i-0 { min-inline-size: 0; }
.max-i-full { max-inline-size: 100%; }

.b-full { block-size: 100%; }
.i-full { inline-size: 100%; }
.i-min { inline-size: min-content; }

.overflow-x-auto { overflow-x: auto; scroll-snap-type: x mandatory; }
.overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; }
.overflow-hidden { overflow: hidden; }

.object-contain	{ object-fit: contain; }
.object-cover {	object-fit: cover; }

.aspect-square { aspect-ratio: 1; }
.aspect-widescreen { aspect-ratio: 16 / 9; }

/****************************************************************
* Margin
*****************************************************************/
.m-0 { margin: 0; }
.m-1 { margin: var(--size-1); }
.m-2 { margin: var(--size-2); }
.m-3 { margin: var(--size-3); }
.m-4 { margin: var(--size-4); }
.m-5 { margin: var(--size-5); }
.m-6 { margin: var(--size-6); }
.m-8 { margin: var(--size-8); }
.m-10 { margin: var(--size-10); }
.m-auto { margin: auto; }

.mb-0 { margin-block: 0; }
.mb-1 { margin-block: var(--size-1); }
.mb-2 { margin-block: var(--size-2); }
.mb-3 { margin-block: var(--size-3); }
.mb-4 { margin-block: var(--size-4); }
.mb-5 { margin-block: var(--size-5); }
.mb-6 { margin-block: var(--size-6); }
.mb-8 { margin-block: var(--size-8); }
.mb-10 { margin-block: var(--size-10); }
.mb-auto { margin-block: auto; }

.mbs-0 { margin-block-start: 0; }
.mbs-1 { margin-block-start: var(--size-1); }
.mbs-2 { margin-block-start: var(--size-2); }
.mbs-3 { margin-block-start: var(--size-3); }
.mbs-4 { margin-block-start: var(--size-4); }
.mbs-5 { margin-block-start: var(--size-5); }
.mbs-6 { margin-block-start: var(--size-6); }
.mbs-8 { margin-block-start: var(--size-8); }
.mbs-10 { margin-block-start: var(--size-10); }
.mbs-auto { margin-block-start: auto; }

.mbe-0 { margin-block-end: 0; }
.mbe-1 { margin-block-end: var(--size-1); }
.mbe-2 { margin-block-end: var(--size-2); }
.mbe-3 { margin-block-end: var(--size-3); }
.mbe-4 { margin-block-end: var(--size-4); }
.mbe-5 { margin-block-end: var(--size-5); }
.mbe-6 { margin-block-end: var(--size-6); }
.mbe-8 { margin-block-end: var(--size-8); }
.mbe-10 { margin-block-end: var(--size-10); }
.mbe-auto { margin-block-end: auto; }

.mi-0 { margin-inline: 0; }
.mi-1 { margin-inline: var(--size-1); }
.mi-2 { margin-inline: var(--size-2); }
.mi-3 { margin-inline: var(--size-3); }
.mi-4 { margin-inline: var(--size-4); }
.mi-5 { margin-inline: var(--size-5); }
.mi-6 { margin-inline: var(--size-6); }
.mi-8 { margin-inline: var(--size-8); }
.mi-10 { margin-inline: var(--size-10); }
.mi-auto { margin-inline: auto; }

.mis-0 { margin-inline-start: 0; }
.mis-1 { margin-inline-start: var(--size-1); }
.mis-2 { margin-inline-start: var(--size-2); }
.mis-3 { margin-inline-start: var(--size-3); }
.mis-4 { margin-inline-start: var(--size-4); }
.mis-5 { margin-inline-start: var(--size-5); }
.mis-6 { margin-inline-start: var(--size-6); }
.mis-8 { margin-inline-start: var(--size-8); }
.mis-10 { margin-inline-start: var(--size-10); }
.mis-auto { margin-inline-start: auto; }

.mie-0 { margin-inline-end: 0; }
.mie-1 { margin-inline-end: var(--size-1); }
.mie-2 { margin-inline-end: var(--size-2); }
.mie-3 { margin-inline-end: var(--size-3); }
.mie-4 { margin-inline-end: var(--size-4); }
.mie-5 { margin-inline-end: var(--size-5); }
.mie-6 { margin-inline-end: var(--size-6); }
.mie-8 { margin-inline-end: var(--size-8); }
.mie-10 { margin-inline-end: var(--size-10); }
.mie-auto { margin-inline-end: auto; }

/****************************************************************
* Padding
*****************************************************************/
.p-0 { padding: 0; }
.p-1 { padding: var(--size-1); }
.p-2 { padding: var(--size-2); }
.p-3 { padding: var(--size-3); }
.p-4 { padding: var(--size-4); }
.p-5 { padding: var(--size-5); }
.p-6 { padding: var(--size-6); }
.p-8 { padding: var(--size-8); }
.p-10 { padding: var(--size-10); }

.pb-0 { padding-block: 0; }
.pb-1 { padding-block: var(--size-1); }
.pb-2 { padding-block: var(--size-2); }
.pb-3 { padding-block: var(--size-3); }
.pb-4 { padding-block: var(--size-4); }
.pb-5 { padding-block: var(--size-5); }
.pb-6 { padding-block: var(--size-6); }
.pb-8 { padding-block: var(--size-8); }
.pb-10 { padding-block: var(--size-10); }

.pbs-0 { padding-block-start: 0; }
.pbs-1 { padding-block-start: var(--size-1); }
.pbs-2 { padding-block-start: var(--size-2); }
.pbs-3 { padding-block-start: var(--size-3); }
.pbs-4 { padding-block-start: var(--size-4); }
.pbs-5 { padding-block-start: var(--size-5); }
.pbs-6 { padding-block-start: var(--size-6); }
.pbs-8 { padding-block-start: var(--size-8); }
.pbs-10 { padding-block-start: var(--size-10); }

.pbe-0 { padding-block-end: 0; }
.pbe-1 { padding-block-end: var(--size-1); }
.pbe-2 { padding-block-end: var(--size-2); }
.pbe-3 { padding-block-end: var(--size-3); }
.pbe-4 { padding-block-end: var(--size-4); }
.pbe-5 { padding-block-end: var(--size-5); }
.pbe-6 { padding-block-end: var(--size-6); }
.pbe-8 { padding-block-end: var(--size-8); }
.pbe-10 { padding-block-end: var(--size-10); }

.pi-0 { padding-inline: 0; }
.pi-1 { padding-inline: var(--size-1); }
.pi-2 { padding-inline: var(--size-2); }
.pi-3 { padding-inline: var(--size-3); }
.pi-4 { padding-inline: var(--size-4); }
.pi-5 { padding-inline: var(--size-5); }
.pi-6 { padding-inline: var(--size-6); }
.pi-8 { padding-inline: var(--size-8); }
.pi-10 { padding-inline: var(--size-10); }

.pis-0 { padding-inline-start: 0; }
.pis-1 { padding-inline-start: var(--size-1); }
.pis-2 { padding-inline-start: var(--size-2); }
.pis-3 { padding-inline-start: var(--size-3); }
.pis-4 { padding-inline-start: var(--size-4); }
.pis-5 { padding-inline-start: var(--size-5); }
.pis-6 { padding-inline-start: var(--size-6); }
.pis-8 { padding-inline-start: var(--size-8); }
.pis-10 { padding-inline-start: var(--size-10); }

.pie-0 { padding-inline-end: 0; }
.pie-1 { padding-inline-end: var(--size-1); }
.pie-2 { padding-inline-end: var(--size-2); }
.pie-3 { padding-inline-end: var(--size-3); }
.pie-4 { padding-inline-end: var(--size-4); }
.pie-5 { padding-inline-end: var(--size-5); }
.pie-6 { padding-inline-end: var(--size-6); }
.pie-8 { padding-inline-end: var(--size-8); }
.pie-10 { padding-inline-end: var(--size-10); }

/****************************************************************
* Hiding/Showing
*****************************************************************/
.show\@sm, .show\@md, .show\@lg { display: none; }

.show\@sm { @media (width >= 40rem) { display: flex; } }
.show\@md { @media (width >= 48rem) { display: flex; } }
.show\@lg { @media (width >= 64rem) { display: flex; } }

.hide\@sm { @media (width >= 40rem) { display: none; } }
.hide\@md { @media (width >= 48rem) { display: none; } }
.hide\@lg { @media (width >= 64rem) { display: none; } }

.hide\@pwa { @media (display-mode: standalone) { display: none; } }
.hide\@browser { @media (display-mode: browser) { display: none; } }

.hide\@print { @media print { display: none; } }

/****************************************************************
* Accessibility
*****************************************************************/
.sr-only {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}