@charset "UTF-8";
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Variables & Theme Configuration */
/**
 * @name Breakpoint Variables
 * @group variables
 * @type Breakpoint
 * @description
 * Breakpoint values for responsive design.
 * @example scss
 *   @include retro-breakpoint(sm) { ... }
 */
/* Breakpoints */
/**
 * @name Color Variables
 * @group variables
 * @type Color
 * @description
 * Core color palette for RetroCSS. Use these variables for consistent theming.
 * 
 * To customize the color theme, you can override these variables in your own stylesheet:
 * ```scss
 * :root {
 *   --retro-primary: #1e88e5;    // Change primary color
 *   --retro-primary-rgb: 30, 136, 229;  // Also update RGB values
 *   --retro-success: #43a047;    // Change success color
 *   --retro-danger: #e53935;     // Change danger color
 *   --retro-body-bg: #d4d4d4;    // Change background color
 * }
 * ```
 * 
 * For dark mode customization, override the [data-theme="dark"] section:
 * ```scss
 * [data-theme="dark"] {
 *   --retro-body-bg: #121212;    // Dark mode background
 *   --retro-bg: #1e1e1e;         // Dark mode surface
 *   --retro-primary: #64b5f6;    // Dark mode primary color
 *   // ... other overrides
 * }
 * ```
 * 
 * @example scss
 *   color: $retro-primary;
 */
/* Colors */
/**
 * @name Accessible Text Colors
 * @group variables
 * @type Color
 * @description
 * Companion ramp to the palette above. The palette values are tuned as *fills*
 * -- a filled badge or button with inverse text sitting on top. Used directly
 * as *text* on a page background many of them fail WCAG AA badly: $retro-info
 * (#00ffff) measures 1.25:1 on white, $retro-gold 1.40:1, $retro-warning 1.97:1.
 *
 * These `-text` values keep each colour's hue and saturation but clear 4.75:1
 * against both light surfaces (#ffffff and the #c0c0c0 body). Dark-theme
 * counterparts live in the [data-theme="dark"] block and clear 4.75:1 against
 * both #23242a (card) and #181818 (body).
 *
 * Use the palette value for a fill, the -text value for text on a surface.
 * @example scss
 *   background: var(--retro-info);       // fill
 *   color: var(--retro-info-text);       // text on a page background
 */
/**
 * @name On-Fill Text Colors
 * @group variables
 * @type Color
 * @description
 * Text/icon colour to place *on top of* the matching fill. Distinct from the
 * -text ramp, which is that hue used as text on a page surface.
 *
 * This is the framework's biggest dark-mode defect: components hardcode
 * `color: #fff` over `background: var(--retro-name)`, and the dark palette is
 * light, so 16 of 19 fills currently carry white text below 4.5:1 --
 * #fff on the dark --retro-success (#2ecc71) is 2.10:1. Each -fg value below
 * is whichever of black/white scores higher on its own fill.
 *
 * Each value is whichever of black/white scores higher on its own fill, and the
 * hover/active states below are clamped so that choice stays >=4.5:1 across all
 * three.
 *
 * Danger is the one hue where that rule was answered by changing the fill. On
 * pure #ff0000, white scores 4.00:1 and black 5.25:1, so the fill used to carry
 * black text -- which passes the arithmetic and still reads as a warning label
 * printed on a fire extinguisher. The fill is now #cc0000, where white scores
 * 5.89:1 and looks like the button it is. To go back:
 *   :root { --retro-danger: #ff0000; --retro-danger-fg: #000; }
 */
/**
 * @name Semantic Text Colors
 * @group variables
 * @type Color
 * @description
 * Surface-aware text colours. Prefer these over $retro-black / $retro-white,
 * which invert between themes for backward compatibility and therefore read
 * confusingly at the call site.
 */
/**
 * @name Interaction State Colors
 * @group variables
 * @type Color
 * @description
 * Hover/active fills for every palette hue, as (hover, active) pairs.
 *
 * Nominally +/-10% lightness, but each state is clamped back toward its base
 * until it holds >=4.6:1 against that hue's -fg. Without the clamp a mid-
 * luminance fill drifts past whichever of black/white sits on it -- e.g. the
 * light teal at +10% carried its white text at only 2.59:1.
 *
 * Tokens rather than inline color.adjust() calls, because a compiled
 * color.adjust() is a fixed hex and cannot respond to [data-theme]. Written as
 * literals so Sass emits hex rather than rgb(46.257%...) notation.
 */
/* Darker primary, used for open/active dropdown chrome */
/* Neutral surface tint, used for subtle hover backgrounds */
/**
 * @name Typography Variables
 * @group variables
 * @type Font
 * @description
 * Font family, size, and line height for RetroCSS.
 * @example scss
 *   font-family: $retro-font;
 */
/* Typography */
/**
 * @name Spacing Variables
 * @group variables
 * @type Spacing
 * @description
 * Spacing scale for margins and paddings.
 * @example scss
 *   margin-bottom: $retro-spacing-md;
 */
/* Spacing */
/**
 * @name Border Variables
 * @group variables
 * @type Border
 * @description
 * Border width, style, radius for RetroCSS components.
 * @example scss
 *   border-radius: $retro-border-radius;
 */
/* Borders */
/**
 * @name Shadow Variables
 * @group variables
 * @type Shadow
 * @description
 * Shadow styles for raised and sunken effects.
 * @example scss
 *   box-shadow: $retro-border-raised;
 */
/* Shadows */
/**
 * @name Z-index Variables
 * @group variables
 * @type Z-index
 * @description
 * Z-index values for layering elements.
 * @example scss
 *   z-index: $retro-z-index-dropdown;
 */
/* Z-index */
/**
 * @name Transition Variables
 * @group variables
 * @type Transition
 * @description
 * Transition timing values for animations.
 * @example scss
 *   transition: all $retro-transition-duration $retro-transition-timing-function;
 */
/* Transitions */
/**
 * @name Screen Size Variables
 * @group variables
 * @type Screen
 * @description
 * Screen size values for viewports.
 * @example scss
 *   @media (min-width: $retro-screen-sm) { ... }
 */
/* Screen Sizes (Viewport) */
/**
 * @name Container Variables
 * @group variables
 * @type Container
 * @description
 * Container width values for layouts.
 * @example scss
 *   max-width: $retro-container-lg;
 */
/* Container Sizes */
/* CSS Custom Properties */
:root {
  color-scheme: light;
  --retro-body-bg: #c0c0c0; /* Fallback for IE11 */
  --retro-body-bg-dark: #3a3a3a; /* Fallback for IE11 */
  --retro-bg: #ffffff; /* Fallback for IE11 */
  --retro-primary: #000080; /* Fallback for IE11 */
  --retro-primary-rgb: 0, 0, 128; /* Fallback for IE11 */
  --retro-light: #f0f0f0; /* Fallback for IE11 */
  --retro-white: #ffffff; /* Fallback for IE11 */
  --retro-black: #000000; /* Fallback for IE11 */
  --retro-color-primary: var(--retro-primary-text);
  --retro-color-success: var(--retro-success-text);
  --retro-color-danger: var(--retro-danger-text);
  --retro-color-warning: var(--retro-warning-text);
  --retro-color-info: var(--retro-info-text);
  --retro-color-teal: var(--retro-teal-text);
  --retro-color-pink: var(--retro-pink-text);
  --retro-color-lime: var(--retro-lime-text);
  --retro-color-success-rgb: 0, 128, 0;
  --retro-color-danger-rgb: 204, 0, 0;
  --retro-border-light: #ffffff; /* Fallback for IE11 */
  --retro-border-medium: #808080; /* Fallback for IE11 */
  --retro-border-dark: #000000; /* Fallback for IE11 */
  --retro-success: #008000; /* Fallback for IE11 */
  --retro-success-rgb: 0, 128, 0; /* Fallback for IE11 */
  --retro-warning: #ffa500; /* Fallback for IE11 */
  --retro-warning-rgb: 255, 165, 0; /* Fallback for IE11 */
  --retro-danger: #cc0000; /* Fallback for IE11 */
  --retro-danger-rgb: 204, 0, 0; /* Fallback for IE11 */
  --retro-info: #00ffff; /* Fallback for IE11 */
  --retro-info-rgb: 0, 255, 255; /* Fallback for IE11 */
  --retro-teal: #008080; /* Fallback for IE11 */
  --retro-teal-rgb: 0, 128, 128; /* Fallback for IE11 */
  --retro-tan: #d2b48c; /* Fallback for IE11 */
  --retro-tan-rgb: 210, 180, 140;
  --retro-pink: #ff69b4; /* Fallback for IE11 */
  --retro-pink-rgb: 255, 105, 180; /* Fallback for IE11 */
  --retro-lime: #32cd32; /* Fallback for IE11 */
  --retro-lime-rgb: 50, 205, 50; /* Fallback for IE11 */
  --retro-cyan: #00e5ee; /* Fallback for IE11 */
  --retro-cyan-rgb: 0, 229, 238; /* Fallback for IE11 */
  --retro-orange: #ffb347; /* Fallback for IE11 */
  --retro-orange-rgb: 255, 179, 71; /* Fallback for IE11 */
  --retro-brown: #8b5c2a; /* Fallback for IE11 */
  --retro-brown-rgb: 139, 92, 42; /* Fallback for IE11 */
  --retro-violet: #7c3aed; /* Fallback for IE11 */
  --retro-violet-rgb: 124, 58, 237; /* Fallback for IE11 */
  --retro-gray: #b0b0b0; /* Fallback for IE11 */
  --retro-gray-rgb: 176, 176, 176; /* Fallback for IE11 */
  --retro-maroon: #800000; /* Fallback for IE11 */
  --retro-maroon-rgb: 128, 0, 0; /* Fallback for IE11 */
  --retro-gold: #ffd700; /* Fallback for IE11 */
  --retro-gold-rgb: 255, 215, 0; /* Fallback for IE11 */
  --retro-navy: #001f4f; /* Fallback for IE11 */
  --retro-navy-rgb: 0, 31, 79; /* Fallback for IE11 */
  --retro-olive: #808000; /* Fallback for IE11 */
  --retro-olive-rgb: 128, 128, 0; /* Fallback for IE11 */
  --retro-silver: #c0c0c0; /* Fallback for IE11 */
  --retro-silver-rgb: 192, 192, 192; /* Fallback for IE11 */
  --retro-black-rgb: 0, 0, 0; /* Fallback for IE11 */
  --retro-white-rgb: 255, 255, 255; /* Fallback for IE11 */
  --retro-light-rgb: 240, 240, 240; /* Fallback for IE11 */
  --retro-primary-text: #000080;
  --retro-success-text: #005900;
  --retro-danger-text: #9c0000;
  --retro-warning-text: #694400;
  --retro-info-text: #005454;
  --retro-teal-text: #005454;
  --retro-tan-text: #604726;
  --retro-pink-text: #97004c;
  --retro-lime-text: #155715;
  --retro-cyan-text: #005458;
  --retro-orange-text: #6e4100;
  --retro-brown-text: #67441f;
  --retro-violet-text: #5913d0;
  --retro-gray-text: #4b4b4b;
  --retro-maroon-text: #800000;
  --retro-gold-text: #584a00;
  --retro-navy-text: #001f4f;
  --retro-olive-text: #4e4e00;
  --retro-silver-text: #4b4b4b;
  --retro-primary-fg: #ffffff;
  --retro-success-fg: #ffffff;
  --retro-danger-fg: #ffffff;
  --retro-warning-fg: #000000;
  --retro-info-fg: #000000;
  --retro-teal-fg: #ffffff;
  --retro-tan-fg: #000000;
  --retro-pink-fg: #000000;
  --retro-lime-fg: #000000;
  --retro-cyan-fg: #000000;
  --retro-orange-fg: #000000;
  --retro-brown-fg: #ffffff;
  --retro-violet-fg: #ffffff;
  --retro-gray-fg: #000000;
  --retro-maroon-fg: #ffffff;
  --retro-gold-fg: #000000;
  --retro-navy-fg: #ffffff;
  --retro-olive-fg: #000000;
  --retro-silver-fg: #000000;
  --retro-text: #000000;
  --retro-text-muted: #4b4b4b;
  --retro-text-inverse: #ffffff;
  --retro-primary-hover: #0000b3;
  --retro-primary-active: #00004d;
  --retro-success-hover: #008500;
  --retro-success-active: #004d00;
  --retro-danger-hover: #e60000;
  --retro-danger-active: #990000;
  --retro-warning-hover: #ffb733;
  --retro-warning-active: #cc8400;
  --retro-info-hover: #33ffff;
  --retro-info-active: #00cccc;
  --retro-teal-hover: #008080;
  --retro-teal-active: #004d4d;
  --retro-tan-hover: #e0ccb1;
  --retro-tan-active: #c49c67;
  --retro-pink-hover: #ff9cce;
  --retro-pink-active: #ff369b;
  --retro-lime-hover: #5bd75b;
  --retro-lime-active: #28a428;
  --retro-cyan-hover: #22f7ff;
  --retro-cyan-active: #00b4bb;
  --retro-orange-hover: #ffc87a;
  --retro-orange-active: #ff9e14;
  --retro-brown-hover: #9f6930;
  --retro-brown-active: #64421e;
  --retro-violet-hover: #8c51ef;
  --retro-violet-active: #5f14e0;
  --retro-gray-hover: #cacaca;
  --retro-gray-active: #979797;
  --retro-maroon-hover: #b30000;
  --retro-maroon-active: #4d0000;
  --retro-gold-hover: #ffdf33;
  --retro-gold-active: #ccac00;
  --retro-navy-hover: #003382;
  --retro-navy-active: #000b1c;
  --retro-olive-hover: #b3b300;
  --retro-olive-active: #7b7b00;
  --retro-silver-hover: #dadada;
  --retro-silver-active: #a7a7a7;
  --retro-primary-dark: #00004d;
  --retro-gray-100: #f0f0f0;
  --retro-font: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
  --retro-font-heading: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
  --retro-font-mono: Courier New, Courier, monospace;
  --retro-font-size: 1rem;
  --retro-font-size-xs: 0.75rem;
  --retro-font-size-sm: 0.875rem;
  --retro-font-size-lg: 1.125rem;
  --retro-font-size-xl: 1.25rem;
  --retro-font-size-2xl: 1.5rem;
  --retro-font-size-3xl: 1.875rem;
  --retro-line-height: 1.5;
  --retro-line-height-tight: 1.25;
  --retro-font-weight-normal: 400;
  --retro-font-weight-medium: 600;
  --retro-font-weight-bold: 700;
  --retro-measure: 70ch;
  --retro-spacing-xxs: 2px; /* Fallback for IE11 */
  --retro-spacing-xs: 4px; /* Fallback for IE11 */
  --retro-spacing-sm: 8px; /* Fallback for IE11 */
  --retro-spacing-md: 16px; /* Fallback for IE11 */
  --retro-spacing-lg: 24px; /* Fallback for IE11 */
  --retro-spacing-xl: 32px; /* Fallback for IE11 */
  --retro-spacing-xxl: 48px; /* Fallback for IE11 */
  --retro-border-width: 1px; /* Fallback for IE11 */
  --retro-border-width-thick: 2px; /* Fallback for IE11 */
  --retro-border-style: solid; /* Fallback for IE11 */
  --retro-border-radius: 0; /* Fallback for IE11 */
  --retro-border-radius-sm: 0; /* Fallback for IE11 */
  --retro-border-radius-lg: 0; /* Fallback for IE11 */
  --retro-border-raised: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff; /* Fallback for IE11 */
  --retro-border-sunken: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #000000; /* Fallback for IE11 */
  --retro-box-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.1); /* Fallback for IE11 */
  --retro-box-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.15); /* Fallback for IE11 */
  --retro-shadow-light: #ffffff;
  --retro-box-shadow-outset-button: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff;
  --retro-shadow-rgb: 0, 0, 0;
  --retro-scrim-rgb: 0, 0, 0;
  --retro-sheen-rgb: 255, 255, 255;
  --retro-box-shadow-inset: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #000000;
  --retro-z-index-base: 1;
  --retro-z-index-dropdown: 1000;
  --retro-z-index-sticky: 1020;
  --retro-z-index-fixed: 1030;
  --retro-z-index-modal-backdrop: 1040;
  --retro-z-index-modal: 1050;
  --retro-z-index-popover: 1060;
  --retro-z-index-tooltip: 1070;
  --retro-transition-duration: 0.1s;
  --retro-transition-duration-slow: 0.3s;
  --retro-transition-duration-fast: 0.05s;
  --retro-transition-timing-function: ease;
  --retro-transition-timing-function-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --retro-transition-base: 0.1s ease;
  --retro-container-sm: 540px;
  --retro-container-md: 720px;
  --retro-container-lg: 960px;
  --retro-container-xl: 1140px;
  --retro-container-xxl: 1320px;
  --retro-container-fluid: 100%;
  --retro-card-bg: #f0f0f0;
  --retro-card-header-bg: #000080;
  --retro-card-header-text: #ffffff;
  --retro-card-content-bg: #ffffff;
  --retro-card-content-text: #000000;
  --retro-card-footer-bg: #f0f0f0;
  --retro-card-footer-text: #000000;
  --retro-modal-bg: #f0f0f0;
  --retro-modal-header-bg: #000080;
  --retro-modal-header-text: #ffffff;
  --retro-table-bg: #ffffff;
  --retro-table-header-bg: #f0f0f0;
  --retro-table-header-text: #000000;
  --retro-table-striped-bg: #f0f0f0;
  --retro-input-bg: #ffffff;
  --retro-input-text: #000000;
  --retro-sidebar-bg: #f0f0f0;
  --retro-sidebar-text: #000000;
  --retro-dropdown-bg: #ffffff;
  --retro-dropdown-text: #000000;
  --retro-list-bg: #ffffff;
  --retro-list-text: #000000;
  --retro-progress-bg: #f0f0f0;
  --retro-progress-bar-bg: #000080;
  --retro-alert-bg: #f0f0f0;
  --retro-alert-text: #000000;
  --retro-badge-bg: #3a3a3a;
  --retro-badge-text: #ffffff;
  --retro-toast-bg: #ffffcc;
  --retro-toast-text: #000000;
  --retro-syntax-keyword: #000080;
  --retro-syntax-string: #006e00;
  --retro-syntax-comment: #5f6b5f;
  --retro-syntax-function: #800080;
  --retro-syntax-number: #b00000;
  --retro-syntax-operator: #0000cc;
  --retro-syntax-variable: #800000;
  --retro-syntax-class: #006464;
  --retro-syntax-property: #0000cc;
  --retro-syntax-tag: #800000;
  --retro-syntax-attribute: #a03000;
}

[data-theme=dark] {
  color-scheme: dark;
  --retro-body-bg: #2b2b2b;
  --retro-bg: #3a3a3a;
  --retro-primary: #4a90e2;
  --retro-primary-rgb: 74, 144, 226;
  --retro-light: #454545;
  --retro-white: #3a3a3a;
  --retro-black: #fff;
  --retro-white-rgb: 58, 58, 58;
  --retro-black-rgb: 255, 255, 255;
  --retro-light-rgb: 69, 69, 69;
  --retro-border-light: #909090;
  --retro-border-medium: #262626;
  --retro-border-dark: #151515;
  --retro-success: #2ecc71;
  --retro-success-rgb: 46, 204, 113;
  --retro-warning: #f39c12;
  --retro-warning-rgb: 243, 156, 18;
  --retro-danger: #e74c3c;
  --retro-danger-rgb: 231, 76, 60;
  --retro-info: #3498db;
  --retro-info-rgb: 52, 152, 219;
  --retro-teal: #1abc9c;
  --retro-teal-rgb: 26, 188, 156;
  --retro-tan: #d4b483;
  --retro-tan-rgb: 212, 180, 131;
  --retro-pink: #e84393;
  --retro-pink-rgb: 232, 67, 147;
  --retro-lime: #00b894;
  --retro-lime-rgb: 0, 184, 148;
  --retro-cyan: #00cec9;
  --retro-cyan-rgb: 0, 206, 201;
  --retro-orange: #e67e22;
  --retro-orange-rgb: 230, 126, 34;
  --retro-brown: #a67c52;
  --retro-brown-rgb: 166, 124, 82;
  --retro-violet: #9b59b6;
  --retro-violet-rgb: 155, 89, 182;
  --retro-gray: #95a5a6;
  --retro-gray-rgb: 149, 165, 166;
  --retro-maroon: #c0392b;
  --retro-maroon-rgb: 192, 57, 43;
  --retro-gold: #f1c40f;
  --retro-gold-rgb: 241, 196, 15;
  --retro-navy: #2c3e50;
  --retro-navy-rgb: 44, 62, 80;
  --retro-olive: #7f8c8d;
  --retro-olive-rgb: 127, 140, 141;
  --retro-silver: #bdc3c7;
  --retro-silver-rgb: 189, 195, 199;
  --retro-box-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
  --retro-box-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.4);
  --retro-card-bg: #3a3a3a;
  --retro-card-header-bg: var(--retro-primary);
  --retro-card-header-text: var(--retro-primary-fg);
  --retro-card-content-bg: #333333;
  --retro-card-content-text: #f2f2f2;
  --retro-card-footer-bg: #3a3a3a;
  --retro-card-footer-text: #f2f2f2;
  --retro-modal-bg: #3a3a3a;
  --retro-modal-header-bg: var(--retro-primary);
  --retro-modal-header-text: var(--retro-primary-fg);
  --retro-table-bg: #333333;
  --retro-table-header-bg: #3a3a3a;
  --retro-table-header-text: #f2f2f2;
  --retro-table-striped-bg: #3f3f3f;
  --retro-input-bg: #2e2e2e;
  --retro-input-text: #f2f2f2;
  --retro-sidebar-bg: #333333;
  --retro-sidebar-text: #f2f2f2;
  --retro-dropdown-bg: #3a3a3a;
  --retro-dropdown-text: #f2f2f2;
  --retro-list-bg: #333333;
  --retro-list-text: #f2f2f2;
  --retro-progress-bg: #2e2e2e;
  --retro-progress-bar-bg: #4a90e2;
  --retro-alert-bg: #3a3a3a;
  --retro-alert-text: #f2f2f2;
  --retro-badge-bg: #4a4a4a;
  --retro-badge-text: #fff;
  --retro-toast-bg: #3a3a3a;
  --retro-toast-text: #f2f2f2;
  --retro-primary-text: #8fbaed;
  --retro-success-text: #31d074;
  --retro-danger-text: #f3a29a;
  --retro-warning-text: #f4a72b;
  --retro-info-text: #7ebee8;
  --retro-teal-text: #1cceab;
  --retro-tan-text: #d4b483;
  --retro-pink-text: #f39dc6;
  --retro-lime-text: #00cfa6;
  --retro-cyan-text: #00cec9;
  --retro-orange-text: #eea869;
  --retro-brown-text: #ccb399;
  --retro-violet-text: #ccabda;
  --retro-gray-text: #adb9ba;
  --retro-maroon-text: #e9a69f;
  --retro-gold-text: #f1c40f;
  --retro-navy-text: #a5b9cd; /* fill is 1.41:1 as text -- worst case in the framework */
  --retro-olive-text: #b1b9b9;
  --retro-silver-text: #bdc3c7;
  --retro-primary-fg: #000000;
  --retro-success-fg: #000000;
  --retro-danger-fg: #000000;
  --retro-warning-fg: #000000;
  --retro-info-fg: #000000;
  --retro-teal-fg: #000000;
  --retro-tan-fg: #000000;
  --retro-pink-fg: #000000;
  --retro-lime-fg: #000000;
  --retro-cyan-fg: #000000;
  --retro-orange-fg: #000000;
  --retro-brown-fg: #000000;
  --retro-violet-fg: #ffffff;
  --retro-gray-fg: #000000;
  --retro-maroon-fg: #ffffff;
  --retro-gold-fg: #000000;
  --retro-navy-fg: #ffffff;
  --retro-olive-fg: #000000;
  --retro-silver-fg: #000000;
  --retro-text: #f2f2f2;
  --retro-text-muted: #b8b8b8;
  --retro-text-inverse: #1a1a1a;
  --retro-primary-hover: #76abe9;
  --retro-primary-active: #2378db;
  --retro-success-hover: #54d98c;
  --retro-success-active: #25a25a;
  --retro-danger-hover: #ed7669;
  --retro-danger-active: #e32f1c;
  --retro-warning-hover: #f5b043;
  --retro-warning-active: #c87f0a;
  --retro-info-hover: #5faee3;
  --retro-info-active: #217dbb;
  --retro-teal-hover: #28e1bd;
  --retro-teal-active: #148f77;
  --retro-tan-hover: #e1cba9;
  --retro-tan-active: #c79d5d;
  --retro-pink-hover: #ee70ad;
  --retro-pink-active: #e21c7c;
  --retro-lime-hover: #00ebbd;
  --retro-lime-active: #008a6f;
  --retro-cyan-hover: #02fff9;
  --retro-cyan-active: #009b97;
  --retro-orange-hover: #eb9950;
  --retro-orange-active: #bf6516;
  --retro-brown-hover: #b99672;
  --retro-brown-active: #956f4a;
  --retro-violet-hover: #9b59b6;
  --retro-violet-active: #804399;
  --retro-gray-hover: #b1bdbd;
  --retro-gray-active: #798d8f;
  --retro-maroon-hover: #d14233;
  --retro-maroon-active: #962d22;
  --retro-gold-hover: #f4d03f;
  --retro-gold-active: #c29d0b;
  --retro-navy-hover: #3e5771;
  --retro-navy-active: #1a242f;
  --retro-olive-hover: #9aa4a5;
  --retro-olive-active: #6d7a7b;
  --retro-silver-hover: #d9dcde;
  --retro-silver-active: #a1aab0;
  --retro-primary-dark: #2378db;
  --retro-gray-100: #454545;
  --retro-shadow-light: #909090;
  --retro-syntax-keyword: #6ba9db;
  --retro-syntax-string: #d0967e;
  --retro-syntax-comment: #8cad6f;
  --retro-syntax-function: #dcdcaa;
  --retro-syntax-number: #b5cea8;
  --retro-syntax-operator: #9cdcfe;
  --retro-syntax-variable: #d4d4d4;
  --retro-syntax-class: #4ec9b0;
  --retro-syntax-property: #9cdcfe;
  --retro-syntax-tag: #6ba9db;
  --retro-syntax-attribute: #c8a2e0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --retro-body-bg: #2b2b2b;
    --retro-bg: #3a3a3a;
    --retro-primary: #4a90e2;
    --retro-primary-rgb: 74, 144, 226;
    --retro-light: #454545;
    --retro-white: #3a3a3a;
    --retro-black: #fff;
    --retro-white-rgb: 58, 58, 58;
    --retro-black-rgb: 255, 255, 255;
    --retro-light-rgb: 69, 69, 69;
    --retro-border-light: #909090;
    --retro-border-medium: #262626;
    --retro-border-dark: #151515;
    --retro-success: #2ecc71;
    --retro-success-rgb: 46, 204, 113;
    --retro-warning: #f39c12;
    --retro-warning-rgb: 243, 156, 18;
    --retro-danger: #e74c3c;
    --retro-danger-rgb: 231, 76, 60;
    --retro-info: #3498db;
    --retro-info-rgb: 52, 152, 219;
    --retro-teal: #1abc9c;
    --retro-teal-rgb: 26, 188, 156;
    --retro-tan: #d4b483;
    --retro-tan-rgb: 212, 180, 131;
    --retro-pink: #e84393;
    --retro-pink-rgb: 232, 67, 147;
    --retro-lime: #00b894;
    --retro-lime-rgb: 0, 184, 148;
    --retro-cyan: #00cec9;
    --retro-cyan-rgb: 0, 206, 201;
    --retro-orange: #e67e22;
    --retro-orange-rgb: 230, 126, 34;
    --retro-brown: #a67c52;
    --retro-brown-rgb: 166, 124, 82;
    --retro-violet: #9b59b6;
    --retro-violet-rgb: 155, 89, 182;
    --retro-gray: #95a5a6;
    --retro-gray-rgb: 149, 165, 166;
    --retro-maroon: #c0392b;
    --retro-maroon-rgb: 192, 57, 43;
    --retro-gold: #f1c40f;
    --retro-gold-rgb: 241, 196, 15;
    --retro-navy: #2c3e50;
    --retro-navy-rgb: 44, 62, 80;
    --retro-olive: #7f8c8d;
    --retro-olive-rgb: 127, 140, 141;
    --retro-silver: #bdc3c7;
    --retro-silver-rgb: 189, 195, 199;
    --retro-box-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
    --retro-box-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.4);
    --retro-card-bg: #3a3a3a;
    --retro-card-header-bg: var(--retro-primary);
    --retro-card-header-text: var(--retro-primary-fg);
    --retro-card-content-bg: #333333;
    --retro-card-content-text: #f2f2f2;
    --retro-card-footer-bg: #3a3a3a;
    --retro-card-footer-text: #f2f2f2;
    --retro-modal-bg: #3a3a3a;
    --retro-modal-header-bg: var(--retro-primary);
    --retro-modal-header-text: var(--retro-primary-fg);
    --retro-table-bg: #333333;
    --retro-table-header-bg: #3a3a3a;
    --retro-table-header-text: #f2f2f2;
    --retro-table-striped-bg: #3f3f3f;
    --retro-input-bg: #2e2e2e;
    --retro-input-text: #f2f2f2;
    --retro-sidebar-bg: #333333;
    --retro-sidebar-text: #f2f2f2;
    --retro-dropdown-bg: #3a3a3a;
    --retro-dropdown-text: #f2f2f2;
    --retro-list-bg: #333333;
    --retro-list-text: #f2f2f2;
    --retro-progress-bg: #2e2e2e;
    --retro-progress-bar-bg: #4a90e2;
    --retro-alert-bg: #3a3a3a;
    --retro-alert-text: #f2f2f2;
    --retro-badge-bg: #4a4a4a;
    --retro-badge-text: #fff;
    --retro-toast-bg: #3a3a3a;
    --retro-toast-text: #f2f2f2;
    --retro-primary-text: #8fbaed;
    --retro-success-text: #31d074;
    --retro-danger-text: #f3a29a;
    --retro-warning-text: #f4a72b;
    --retro-info-text: #7ebee8;
    --retro-teal-text: #1cceab;
    --retro-tan-text: #d4b483;
    --retro-pink-text: #f39dc6;
    --retro-lime-text: #00cfa6;
    --retro-cyan-text: #00cec9;
    --retro-orange-text: #eea869;
    --retro-brown-text: #ccb399;
    --retro-violet-text: #ccabda;
    --retro-gray-text: #adb9ba;
    --retro-maroon-text: #e9a69f;
    --retro-gold-text: #f1c40f;
    --retro-navy-text: #a5b9cd; /* fill is 1.41:1 as text -- worst case in the framework */
    --retro-olive-text: #b1b9b9;
    --retro-silver-text: #bdc3c7;
    --retro-primary-fg: #000000;
    --retro-success-fg: #000000;
    --retro-danger-fg: #000000;
    --retro-warning-fg: #000000;
    --retro-info-fg: #000000;
    --retro-teal-fg: #000000;
    --retro-tan-fg: #000000;
    --retro-pink-fg: #000000;
    --retro-lime-fg: #000000;
    --retro-cyan-fg: #000000;
    --retro-orange-fg: #000000;
    --retro-brown-fg: #000000;
    --retro-violet-fg: #ffffff;
    --retro-gray-fg: #000000;
    --retro-maroon-fg: #ffffff;
    --retro-gold-fg: #000000;
    --retro-navy-fg: #ffffff;
    --retro-olive-fg: #000000;
    --retro-silver-fg: #000000;
    --retro-text: #f2f2f2;
    --retro-text-muted: #b8b8b8;
    --retro-text-inverse: #1a1a1a;
    --retro-primary-hover: #76abe9;
    --retro-primary-active: #2378db;
    --retro-success-hover: #54d98c;
    --retro-success-active: #25a25a;
    --retro-danger-hover: #ed7669;
    --retro-danger-active: #e32f1c;
    --retro-warning-hover: #f5b043;
    --retro-warning-active: #c87f0a;
    --retro-info-hover: #5faee3;
    --retro-info-active: #217dbb;
    --retro-teal-hover: #28e1bd;
    --retro-teal-active: #148f77;
    --retro-tan-hover: #e1cba9;
    --retro-tan-active: #c79d5d;
    --retro-pink-hover: #ee70ad;
    --retro-pink-active: #e21c7c;
    --retro-lime-hover: #00ebbd;
    --retro-lime-active: #008a6f;
    --retro-cyan-hover: #02fff9;
    --retro-cyan-active: #009b97;
    --retro-orange-hover: #eb9950;
    --retro-orange-active: #bf6516;
    --retro-brown-hover: #b99672;
    --retro-brown-active: #956f4a;
    --retro-violet-hover: #9b59b6;
    --retro-violet-active: #804399;
    --retro-gray-hover: #b1bdbd;
    --retro-gray-active: #798d8f;
    --retro-maroon-hover: #d14233;
    --retro-maroon-active: #962d22;
    --retro-gold-hover: #f4d03f;
    --retro-gold-active: #c29d0b;
    --retro-navy-hover: #3e5771;
    --retro-navy-active: #1a242f;
    --retro-olive-hover: #9aa4a5;
    --retro-olive-active: #6d7a7b;
    --retro-silver-hover: #d9dcde;
    --retro-silver-active: #a1aab0;
    --retro-primary-dark: #2378db;
    --retro-gray-100: #454545;
    --retro-shadow-light: #909090;
    --retro-syntax-keyword: #6ba9db;
    --retro-syntax-string: #d0967e;
    --retro-syntax-comment: #8cad6f;
    --retro-syntax-function: #dcdcaa;
    --retro-syntax-number: #b5cea8;
    --retro-syntax-operator: #9cdcfe;
    --retro-syntax-variable: #d4d4d4;
    --retro-syntax-class: #4ec9b0;
    --retro-syntax-property: #9cdcfe;
    --retro-syntax-tag: #6ba9db;
    --retro-syntax-attribute: #c8a2e0;
  }
}
/* Layout Specific Variables */
/* Component Specific Variables */
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Base Styles */
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
  line-height: var(--retro-line-height);
  color: var(--retro-text);
  background-color: var(--retro-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Vertical rhythm.
   The reset above zeroes every margin, and nothing restored it for flow
   content — so every paragraph, list and table in the framework sat flush
   against the next one. Only .retro-prose had spacing. These are the base
   defaults; components that manage their own spacing still override them. */
p,
ul,
ol,
dl,
blockquote,
pre,
figure,
table {
  margin-bottom: var(--retro-spacing-md);
}

li > ul,
li > ol {
  margin-bottom: 0;
}

/* A Win9x etched divider: one dark line with a light one under it. */
hr {
  height: 0;
  margin: var(--retro-spacing-md) 0;
  border: none;
  border-top: 1px solid var(--retro-border-medium);
  border-bottom: 1px solid var(--retro-border-light);
}

/* Links */
a {
  color: var(--retro-primary-text);
  text-decoration: none;
  transition: var(--retro-transition-base);
}
a:hover {
  color: var(--retro-primary-text);
  text-decoration: underline;
}
a:focus {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}
a:focus:not(:focus-visible) {
  outline: none;
}
a:focus-visible {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-style: none;
}

/* Lists */
ul, ol {
  list-style-position: inside;
  padding-inline-start: var(--retro-spacing-md);
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
}

/* Forms */
input,
button,
select,
optgroup,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* Code */
code,
pre {
  font-family: var(--retro-font-mono);
  font-size: var(--retro-font-size-sm);
}

/* Selection */
::selection {
  background-color: var(--retro-primary);
  color: var(--retro-text-inverse);
}

/* Focus Styles.
   :focus-visible, so the ring is there for keyboard and assistive-tech users
   but does not fire on every mouse click. The plain :focus rule is the
   fallback for engines without :focus-visible; :focus:not(:focus-visible)
   removes it again wherever the selector is supported. Note browsers still
   match :focus-visible on text inputs clicked with a mouse, so fields keep
   their ring. */
:focus {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a[href]::after {
    content: " (" attr(href) ")";
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre,
  blockquote {
    border: 1px solid var(--retro-border-light);
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* Common animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideIn {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.retro-tab-content {
  background: var(--retro-bg);
  border: var(--retro-border-width) var(--retro-border-style) var(--retro-border-dark);
  border-top: none;
  padding: var(--retro-spacing-md);
  margin-bottom: var(--retro-spacing-md);
  min-height: 60px;
  box-shadow: var(--retro-box-shadow-subtle);
  display: none;
}

.retro-tab-content.active {
  display: block;
}

#retro-toast-container {
  position: fixed;
  bottom: var(--retro-spacing-xl);
  inset-inline-end: var(--retro-spacing-xl);
  z-index: var(--retro-z-index-tooltip);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

/* Reduced motion.
   Honours the OS "reduce motion" setting. The blanket rule neutralises every
   transition and animation the framework ships; the three text effects below
   need an explicit `animation: none` on top, because merely shortening them
   leaves a filter applied (hue-rotate) or freezes `alternate-reverse` on a
   doubled-shadow keyframe that is unreadable (glitch). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .retro-text-rainbow,
  .retro-text-hue-rotate,
  .retro-text-glitch,
  .retro-spinner,
  .retro-progress-bar-striped {
    animation: none !important;
  }
  .retro-text-hue-rotate {
    filter: none !important;
  }
  .retro-text-glitch {
    text-shadow: none !important;
  }
}
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Base Styles */
/* Typography Styles */
/**
 * @name Headings
 * @group typography
 * @description
 * Retro heading styles for h1-h6 with 3D and border effects.
 * @example scss
 *   <h1>Heading 1</h1>
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--retro-font-heading);
  font-weight: var(--retro-font-weight-bold);
  text-align: start;
  margin: var(--retro-spacing-lg) 0 var(--retro-spacing-sm);
  border-radius: var(--retro-border-radius);
  box-shadow: none;
  letter-spacing: 0;
  background: none;
  color: var(--retro-text);
  text-shadow: none;
  padding: 0;
  line-height: var(--retro-line-height-tight);
}

h1 {
  background: var(--retro-bg);
  border-inline-start: 6px solid var(--retro-primary);
  padding-block: 0.18em 0.18em;
  padding-inline: 0.6em 0.7em;
  font-size: var(--retro-font-size-3xl);
  margin-top: var(--retro-spacing-xl);
}

h2 {
  padding-bottom: 0.15em;
  border-bottom: 2px solid var(--retro-border-dark);
  box-shadow: 0 1px 0 var(--retro-border-light);
  font-size: var(--retro-font-size-2xl);
  margin-top: var(--retro-spacing-xl);
}

h3 {
  font-size: var(--retro-font-size-xl);
}

h4 {
  font-size: var(--retro-font-size-lg);
}

h5 {
  font-size: var(--retro-font-size);
}

h6 {
  font-size: var(--retro-font-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/**
 * @name Retro Heading Variant
 * @group typography
 * @description
 * Monospace, uppercase heading shell. Declared before the colour variants so
 * that combining the two works: this used to sit after them at equal
 * specificity, and its own background/colour/border silently overrode all
 * eight, making every `.retro-heading-variant.retro-heading-*` render
 * identically plain.
 * @example html
 *   <div class="retro-heading-variant retro-heading-success">Success</div>
 */
.retro-heading-variant {
  font-family: var(--retro-font-mono);
  font-size: var(--retro-font-size-2xl);
  font-weight: var(--retro-font-weight-bold);
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--retro-text);
  border: 2.5px double var(--retro-border-dark);
  box-shadow: inset 0 2px 8px var(--retro-border-light), 0 2px 0 rgba(var(--retro-shadow-rgb), 0.27);
  background: var(--retro-bg);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/**
 * @name Display Heading Classes
 * @group typography
 * @description
 * Heading *appearance* without the heading *semantics*. Use these when
 * something should look like a heading but must not enter the document
 * outline — a component gallery demonstrating h1 styling, or a caption that
 * would otherwise create a second h1 on the page.
 * @example html
 *   <p class="retro-h1">Looks like an h1, is still a paragraph</p>
 */
.retro-h1, .retro-h2, .retro-h3, .retro-h4, .retro-h5, .retro-h6 {
  display: block;
  font-family: var(--retro-font-heading);
  font-weight: var(--retro-font-weight-bold);
  line-height: var(--retro-line-height-tight);
  color: var(--retro-text);
  margin: var(--retro-spacing-lg) 0 var(--retro-spacing-sm);
}

.retro-h1 {
  background: var(--retro-bg);
  border-inline-start: 6px solid var(--retro-primary);
  padding-block: 0.18em 0.18em;
  padding-inline: 0.6em 0.7em;
  font-size: var(--retro-font-size-3xl);
  margin-top: var(--retro-spacing-xl);
}

.retro-h2 {
  padding-bottom: 0.15em;
  border-bottom: 2px solid var(--retro-border-dark);
  box-shadow: 0 1px 0 var(--retro-border-light);
  font-size: var(--retro-font-size-2xl);
  margin-top: var(--retro-spacing-xl);
}

.retro-h3 {
  font-size: var(--retro-font-size-xl);
}

.retro-h4 {
  font-size: var(--retro-font-size-lg);
}

.retro-h5 {
  font-size: var(--retro-font-size);
}

.retro-h6 {
  font-size: var(--retro-font-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.retro-heading-primary, .retro-heading-success, .retro-heading-warning, .retro-heading-danger, .retro-heading-info, .retro-heading-teal, .retro-heading-pink, .retro-heading-lime {
  padding: var(--retro-spacing-sm) var(--retro-spacing-md);
  margin-bottom: var(--retro-spacing-md);
  min-width: 0;
  border: 2px solid;
  position: relative;
  font-family: var(--retro-font-heading);
  font-weight: var(--retro-font-weight-bold);
  letter-spacing: 0.5px;
  box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark), 2px 2px 0 rgba(var(--retro-shadow-rgb), 0.2);
  text-shadow: 1px 1px 0 rgba(var(--retro-shadow-rgb), 0.3);
  background: linear-gradient(to bottom, rgba(var(--retro-sheen-rgb), 0.1) 0%, rgba(var(--retro-sheen-rgb), 0) 100%);
  transform: translateZ(0);
  transition: transform 0.1s ease;
}
.retro-heading-primary:hover, .retro-heading-success:hover, .retro-heading-warning:hover, .retro-heading-danger:hover, .retro-heading-info:hover, .retro-heading-teal:hover, .retro-heading-pink:hover, .retro-heading-lime:hover {
  transform: translateY(-1px);
}
.retro-heading-primary:active, .retro-heading-success:active, .retro-heading-warning:active, .retro-heading-danger:active, .retro-heading-info:active, .retro-heading-teal:active, .retro-heading-pink:active, .retro-heading-lime:active {
  transform: translateY(1px);
  box-shadow: inset 1px 1px 0 var(--retro-shadow-light), inset -1px -1px 0 var(--retro-border-dark);
}
.retro-heading-primary::before, .retro-heading-success::before, .retro-heading-warning::before, .retro-heading-danger::before, .retro-heading-info::before, .retro-heading-teal::before, .retro-heading-pink::before, .retro-heading-lime::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(var(--retro-sheen-rgb), 0.1) 2px, rgba(var(--retro-sheen-rgb), 0.1) 4px);
  pointer-events: none;
}
.retro-heading-primary {
  background: linear-gradient(to bottom, var(--retro-primary) 0%, var(--retro-primary-active) 100%);
  color: var(--retro-primary-fg);
  border-color: var(--retro-primary-active);
}
.retro-heading-success {
  background: linear-gradient(to bottom, var(--retro-success) 0%, var(--retro-success-active) 100%);
  color: var(--retro-success-fg);
  border-color: var(--retro-success-active);
}
.retro-heading-warning {
  background: linear-gradient(to bottom, var(--retro-warning) 0%, var(--retro-warning-active) 100%);
  color: var(--retro-warning-fg);
  border-color: var(--retro-warning-active);
}
.retro-heading-danger {
  background: linear-gradient(to bottom, var(--retro-danger) 0%, var(--retro-danger-active) 100%);
  color: var(--retro-danger-fg);
  border-color: var(--retro-danger-active);
}
.retro-heading-info {
  background: linear-gradient(to bottom, var(--retro-info) 0%, var(--retro-info-active) 100%);
  color: var(--retro-info-fg);
  border-color: var(--retro-info-active);
}
.retro-heading-teal {
  background: linear-gradient(to bottom, var(--retro-teal) 0%, var(--retro-teal-active) 100%);
  color: var(--retro-teal-fg);
  border-color: var(--retro-teal-active);
}
.retro-heading-pink {
  background: linear-gradient(to bottom, var(--retro-pink) 0%, var(--retro-pink-active) 100%);
  color: var(--retro-pink-fg);
  border-color: var(--retro-pink-active);
}
.retro-heading-lime {
  background: linear-gradient(to bottom, var(--retro-lime) 0%, var(--retro-lime-active) 100%);
  color: var(--retro-lime-fg);
  border-color: var(--retro-lime-active);
}

/**
 * @name Text Utilities
 * @group typography
 * @description
 * Utility classes for text color, weight, style, shadow, and more.
 * @example scss
 *   <span class="retro-text-primary retro-text-bold">Primary Bold</span>
 */
.retro-text-primary {
  color: var(--retro-color-primary);
}
.retro-text-success {
  color: var(--retro-color-success);
}
.retro-text-danger {
  color: var(--retro-color-danger);
}
.retro-text-warning {
  color: var(--retro-color-warning);
}
.retro-text-info {
  color: var(--retro-color-info);
}
.retro-text-teal {
  color: var(--retro-color-teal);
}
.retro-text-pink {
  color: var(--retro-color-pink);
}
.retro-text-lime {
  color: var(--retro-color-lime);
}
.retro-text-bold {
  font-weight: var(--retro-font-weight-bold);
}
.retro-text-italic {
  font-style: italic;
}
.retro-text-underline {
  text-decoration: underline;
}
.retro-text-shadow {
  text-shadow: 1px 1px 1px var(--retro-border-dark);
}
.retro-text-outline {
  text-shadow: -1px -1px 0 var(--retro-border-dark), 1px -1px 0 var(--retro-border-dark), -1px 1px 0 var(--retro-border-dark), 1px 1px 0 var(--retro-border-dark);
}

.retro-text-uppercase {
  text-transform: uppercase;
}

.retro-text-lowercase {
  text-transform: lowercase;
}

.retro-text-capitalize {
  text-transform: capitalize;
}

.retro-text-monospace {
  font-family: var(--retro-font-mono);
}

.retro-text-xs {
  font-size: var(--retro-font-size-xs);
}

.retro-text-sm {
  font-size: var(--retro-font-size-sm);
}

.retro-text-lg {
  font-size: var(--retro-font-size-lg);
}

.retro-text-xl {
  font-size: var(--retro-font-size-xl);
}

.retro-text-strike {
  text-decoration: line-through;
}

.retro-text-shadow-strong {
  text-shadow: 2px 2px 2px var(--retro-border-medium);
}

.retro-text-shadow-soft {
  text-shadow: 1px 1px 4px var(--retro-gray);
}

.retro-text-glow {
  text-shadow: 0 0 6px var(--retro-cyan), 0 0 12px var(--retro-cyan);
}

/**
 * @name Fancy Text Styles
 * @group typography
 * @description
 * Special effect text styles: rainbow, gradient, glitch, metallic, fire, etc.
 * @example scss
 *   <span class="retro-text-rainbow">Rainbow</span>
 */
.retro-text-rainbow {
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffee00, #33ff00, #00ffee, #0066ff, #cc00ff, #ff0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  animation: rainbow-hue 3s linear infinite;
  font-weight: bold;
  text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-shadow-rgb), 0.13);
}

@keyframes rainbow-hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.retro-text-hue-rotate {
  animation: hue-rotate-text 2s linear infinite;
  display: inline-block;
}

@keyframes hue-rotate-text {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.retro-text-gradient {
  background: linear-gradient(90deg, #4a90e2, #00e5ee, #ff69b4, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  font-weight: var(--retro-font-weight-bold);
  text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-shadow-rgb), 0.13);
}

.retro-text-outline-strong {
  color: var(--retro-bg);
  font-weight: var(--retro-font-weight-bold);
  -webkit-text-stroke: 2px var(--retro-text);
  text-shadow: none;
}

.retro-text-emboss {
  color: var(--retro-text);
  font-weight: var(--retro-font-weight-bold);
  text-shadow: 1px 1px 0 var(--retro-border-light), -1px -1px 0 var(--retro-border-medium);
}

.retro-text-deboss {
  color: var(--retro-text-muted);
  font-weight: var(--retro-font-weight-bold);
  text-shadow: 1px 1px 0 var(--retro-border-light), -1px -1px 0 var(--retro-border-medium);
}

.retro-text-shadow-multicolor {
  color: var(--retro-text);
  font-weight: var(--retro-font-weight-bold);
  text-shadow: 1px 1px 0 var(--retro-primary);
}

.retro-text-glitch {
  position: relative;
  color: var(--retro-text);
  text-shadow: 2px 0 #f0f, -2px 0 #0ff;
  animation: glitch 1s infinite linear alternate-reverse;
}

@keyframes glitch {
  0% {
    text-shadow: 2px 0 #f0f, -2px 0 #0ff;
  }
  20% {
    text-shadow: 2px 2px #0ff, -2px -2px #f0f;
  }
  40% {
    text-shadow: -2px 0 #f0f, 2px 0 #0ff;
  }
  60% {
    text-shadow: 2px -2px #0ff, -2px 2px #f0f;
  }
  80% {
    text-shadow: 0 2px #f0f, 0 -2px #0ff;
  }
  100% {
    text-shadow: 2px 0 #f0f, -2px 0 #0ff;
  }
}
.retro-text-metallic {
  background: linear-gradient(90deg, #e6e6e6 0%, #b0b0b0 40%, #fff 60%, #b0b0b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  font-weight: bold;
  -webkit-text-stroke: 1px var(--retro-border-dark);
  text-shadow: 0 1px 2px var(--retro-bg), 0 2px 4px rgba(var(--retro-shadow-rgb), 0.53);
}

.retro-text-fire {
  background: linear-gradient(90deg, #ff6600 0%, #ffcc00 40%, #fff 60%, #ff3300 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  font-weight: bold;
  -webkit-text-stroke: 1px #800;
  text-shadow: 0 1px 2px var(--retro-bg), 0 2px 8px #ff6600, 0 4px 16px #ff3300;
}

/**
 * @name Retro Blockquote
 * @group typography
 * @description
 * Styled blockquote with Win9x look
 */
.retro-blockquote {
  background: var(--retro-bg);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  position: relative;
  font-style: italic;
  box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark);
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
  line-height: var(--retro-line-height);
  max-width: var(--retro-measure);
  color: var(--retro-text);
}
.retro-blockquote::before {
  content: '"';
  font-size: 2.5em;
  color: var(--retro-primary-text);
  position: absolute;
  inset-inline-start: 0.3rem;
  top: -0.2rem;
  font-family: var(--retro-font);
  opacity: 0.7;
}
.retro-blockquote::after {
  content: '"';
  font-size: 2.5em;
  color: var(--retro-primary-text);
  position: absolute;
  inset-inline-end: 0.3rem;
  bottom: -0.5rem;
  font-family: var(--retro-font);
  opacity: 0.7;
}

/**
 * @name Retro Code Block
 * @group typography
 * @description
 * Styled code block with Win9x look
 */
.retro-code {
  background: var(--retro-bg);
  border: 2px solid var(--retro-border-dark);
  border-top-color: var(--retro-border-light);
  border-left-color: var(--retro-border-light);
  padding: 0;
  margin: 1.5rem 0;
  font-family: var(--retro-font-mono);
  white-space: pre-wrap;
  overflow-x: auto;
  position: relative;
  box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark);
}
.retro-code::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(to bottom, var(--retro-primary) 0%, var(--retro-primary-hover) 100%);
  border-bottom: 1px solid var(--retro-border-dark);
}
.retro-code::after {
  content: "Code";
  position: absolute;
  top: 2px;
  inset-inline-start: 8px;
  color: var(--retro-primary-fg);
  font-family: var(--retro-font);
  font-size: var(--retro-font-size-sm);
  font-weight: var(--retro-font-weight-bold);
}
.retro-code .retro-code-copy {
  position: absolute;
  top: 2px;
  inset-inline-end: 4px;
  background: var(--retro-bg);
  border: 1px solid var(--retro-border-dark);
  border-right: 1px solid var(--retro-border-light);
  border-bottom: 1px solid var(--retro-border-light);
  border-left: 1px solid var(--retro-border-medium);
  border-top: 1px solid var(--retro-border-medium);
  padding: 2px 8px;
  font-family: var(--retro-font);
  font-size: var(--retro-font-size-xs);
  cursor: pointer;
  color: var(--retro-text);
  box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark);
}
.retro-code .retro-code-copy:hover {
  background: var(--retro-light);
}
.retro-code .retro-code-copy:active {
  box-shadow: inset 1px 1px 0 var(--retro-shadow-light), inset -1px -1px 0 var(--retro-border-dark);
}
.retro-code .retro-code-copy.retro-code-copy-ok {
  background: var(--retro-success);
  color: var(--retro-success-fg);
  border-color: var(--retro-success-active);
}
.retro-code .retro-code-copy.retro-code-copy-fail {
  background: var(--retro-danger);
  color: var(--retro-danger-fg);
  border-color: var(--retro-danger-active);
}
.retro-code code {
  display: block;
  padding: 1.2rem;
  padding-top: calc(1.2rem + 24px);
  color: var(--retro-text);
  font-size: var(--retro-font-size-sm);
  line-height: var(--retro-line-height);
}
.retro-code code .keyword {
  color: var(--retro-syntax-keyword);
  font-weight: var(--retro-font-weight-bold);
}
.retro-code code .string {
  color: var(--retro-syntax-string);
}
.retro-code code .comment {
  color: var(--retro-syntax-comment);
  font-style: italic;
}
.retro-code code .function {
  color: var(--retro-syntax-function);
}
.retro-code code .number {
  color: var(--retro-syntax-number);
}
.retro-code code .operator {
  color: var(--retro-syntax-operator);
}
.retro-code code .variable {
  color: var(--retro-syntax-variable);
}
.retro-code code .class {
  color: var(--retro-syntax-class);
}
.retro-code code .property {
  color: var(--retro-syntax-property);
}
.retro-code code .tag {
  color: var(--retro-syntax-tag);
}
.retro-code code .attribute {
  color: var(--retro-syntax-attribute);
}

/**
 * @name Retro Prose
 * @group typography
 * @description
 * Opt-in long-form container. Caps the measure and opens up leading so an
 * article does not run 200-character lines edge to edge. Opt-in rather than
 * applied to `p` globally, which would break dashboard and form layouts.
 * @example scss
 *   <article class="retro-prose">...</article>
 */
.retro-prose {
  line-height: var(--retro-line-height);
}
.retro-prose > p,
.retro-prose > ul,
.retro-prose > ol,
.retro-prose > dl,
.retro-prose > blockquote,
.retro-prose > h1, .retro-prose > h2, .retro-prose > h3, .retro-prose > h4, .retro-prose > h5, .retro-prose > h6 {
  max-width: var(--retro-measure);
}
.retro-prose > pre,
.retro-prose > table,
.retro-prose > figure,
.retro-prose > .retro-code,
.retro-prose > .retro-table {
  max-width: 100%;
}
.retro-prose p, .retro-prose ul, .retro-prose ol, .retro-prose blockquote, .retro-prose pre {
  margin-bottom: var(--retro-spacing-md);
}
.retro-prose > :first-child {
  margin-top: 0;
}
.retro-prose > :last-child {
  margin-bottom: 0;
}

/* Components */
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Base Styles */
/**
 * @name Retro Button
 * @group components
 * @description
 * Button component with multiple color, size, and effect variants. Use modifier classes for color, size, shape, and effects.
 * @example scss
 *   <button class="retro-btn retro-btn-primary retro-btn-lg" role="button">Primary Large</button>
 */
/* Retro Button - Win9x Style Only */
.retro-btn {
  display: inline-block;
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
  font-weight: var(--retro-font-weight-normal);
  line-height: var(--retro-line-height-tight);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  padding: var(--retro-spacing-xs) var(--retro-spacing-md);
  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  background: var(--retro-light);
  color: var(--retro-text);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-dark), 1px 1px 0 var(--retro-border-medium);
  transition: none;
}
.retro-btn:hover {
  background: var(--retro-white);
  box-shadow: inset -0.5px -0.5px 0 var(--retro-border-light), inset 0.5px 0.5px 0 var(--retro-border-medium);
}
.retro-btn:active {
  background: var(--retro-border-medium);
  color: var(--retro-text-inverse);
  box-shadow: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-dark), 0.5px 0.5px 0 var(--retro-border-medium);
}
.retro-btn:focus {
  outline: 1px dotted var(--retro-text);
  outline-offset: -4px;
}
.retro-btn:focus:not(:focus-visible) {
  outline: none;
}
.retro-btn:focus-visible {
  outline: 1px dotted var(--retro-text);
  outline-offset: -4px;
}

.retro-btn-primary {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
}
.retro-btn-primary:hover {
  background: var(--retro-primary-hover);
}
.retro-btn-primary:active {
  background: var(--retro-primary-active);
}

.retro-btn-success {
  background: var(--retro-success);
  color: var(--retro-success-fg);
}
.retro-btn-success:hover {
  background: var(--retro-success-hover);
}
.retro-btn-success:active {
  background: var(--retro-success-active);
}

.retro-btn-danger {
  background: var(--retro-danger);
  color: var(--retro-danger-fg);
}
.retro-btn-danger:hover {
  background: var(--retro-danger-hover);
}
.retro-btn-danger:active {
  background: var(--retro-danger-active);
}

.retro-btn-warning {
  background: var(--retro-warning);
  color: var(--retro-warning-fg);
}
.retro-btn-warning:hover {
  background: var(--retro-warning-hover);
}
.retro-btn-warning:active {
  background: var(--retro-warning-active);
}

.retro-btn-info {
  background: var(--retro-info);
  color: var(--retro-info-fg);
}
.retro-btn-info:hover {
  background: var(--retro-info-hover);
}
.retro-btn-info:active {
  background: var(--retro-info-active);
}

.retro-btn-teal {
  background: var(--retro-teal);
  color: var(--retro-teal-fg);
}
.retro-btn-teal:hover {
  background: var(--retro-teal-hover);
}
.retro-btn-teal:active {
  background: var(--retro-teal-active);
}

.retro-btn-xs {
  font-size: var(--retro-font-size-xs);
  padding: 2px 8px;
}

.retro-btn-sm {
  font-size: var(--retro-font-size-sm);
  padding: 3px 10px;
}

.retro-btn-md {
  font-size: var(--retro-font-size);
  padding: 4px 12px;
}

.retro-btn-lg {
  font-size: var(--retro-font-size-lg);
  padding: 6px 16px;
}

.retro-btn-xl {
  font-size: var(--retro-font-size-xl);
  padding: 8px 20px;
}

.retro-btn-xxl {
  font-size: var(--retro-font-size-2xl);
  padding: 10px 24px;
}

.retro-btn-secondary {
  background: var(--retro-gray);
  color: var(--retro-gray-fg);
}
.retro-btn-secondary:hover {
  background: var(--retro-gray-hover);
}
.retro-btn-secondary:active {
  background: var(--retro-gray-active);
}

.retro-btn-block {
  display: block;
  width: 100%;
}

/**
 * @name Retro Avatar
 * @group components
 * @description
 * Square bevelled tile for a user glyph, emoji or initial. The demo pages were
 * hand-rolling this with inline width/height/flex styles on every instance.
 * @example html
 *   <div class="retro-avatar retro-bg-primary">🧑‍💻</div>
 *   <div class="retro-avatar retro-avatar-lg retro-bg-success">AB</div>
 */
.retro-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: var(--retro-font-size-lg);
  line-height: 1;
  font-weight: var(--retro-font-weight-bold);
  background: var(--retro-light);
  color: var(--retro-text);
  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
  box-shadow: var(--retro-border-raised);
  overflow: hidden;
  user-select: none;
}
.retro-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.retro-avatar-sm {
  width: 28px;
  height: 28px;
  font-size: var(--retro-font-size-sm);
}
.retro-avatar-lg {
  width: 56px;
  height: 56px;
  font-size: var(--retro-font-size-2xl);
}
.retro-avatar-xl {
  width: 72px;
  height: 72px;
  font-size: var(--retro-font-size-3xl);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Base Styles */
/**
 * @name Retro Card
 * @group components
 * @description
 * Card component for grouping content. Includes header, content, and variants.
 * @example scss
 *   <div class="retro-card" role="region" aria-label="Card title">
 *     <div class="retro-card-header">Title</div>
 *     <div class="retro-card-content">Content</div>
 *   </div>
 */
/* Retro Card - Win9x Style Only */
.retro-card {
  background: var(--retro-card-bg);
  border: 2px solid;
  border-color: var(--retro-border-light) var(--retro-border-dark) var(--retro-border-dark) var(--retro-border-light);
  box-shadow: inset 1px 1px 0 var(--retro-bg), inset -1px -1px 0 var(--retro-border-medium);
  font-family: var(--retro-font);
  margin-bottom: 24px;
  border-radius: var(--retro-border-radius);
  position: relative;
}
.retro-card-header {
  border-radius: var(--retro-border-radius) var(--retro-border-radius) 0 0;
  background: var(--retro-card-header-bg);
  color: var(--retro-card-header-text);
}
.retro-card-header h1, .retro-card-header h2, .retro-card-header h3, .retro-card-header h4, .retro-card-header h5, .retro-card-header h6 {
  margin: 0;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
}
.retro-card-header {
  border-bottom: 2px solid var(--retro-card-header-bg);
  font-family: inherit;
  text-shadow: none;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 1rem;
  user-select: none;
  display: block;
  text-align: start;
  min-height: unset;
}
.retro-card-content {
  padding: 16px 16px;
}
.retro-card-content:last-child {
  border-radius: 0 0 var(--retro-border-radius) var(--retro-border-radius);
}
.retro-card-content {
  background: var(--retro-card-content-bg);
  border-top: 2px solid var(--retro-card-content-bg);
  font-size: 1rem;
  color: var(--retro-card-content-text);
  min-height: 2em;
  text-align: start;
}

.retro-card-footer {
  background: var(--retro-card-footer-bg);
  border-top: 2px solid var(--retro-card-footer-bg);
  color: var(--retro-card-footer-text);
  padding: 8px 16px;
  font-size: 0.875rem;
  border-radius: 0 0 var(--retro-border-radius) var(--retro-border-radius);
  text-align: start;
}

.retro-card-image {
  width: 100%;
  display: block;
  border-bottom: 2px solid var(--retro-border-medium);
  max-height: 140px;
  object-fit: cover;
}

.retro-card-compact .retro-card-content {
  padding: 4px 8px;
  font-size: 0.875rem;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Base Styles */
/* Retro Form - Win9x Style Only */
/**
 * @name Retro Form
 * @group components
 * @description
 * Form components including inputs, textareas, selects, and checkboxes.
 * @example scss
 *   <form class="retro-form">
 *     <div class="retro-form-group">
 *       <label for="username">Username</label>
 *       <input type="text" id="username" class="retro-input">
 *     </div>
 *   </form>
 */
.retro-form-group {
  margin-bottom: 16px;
}
.retro-form-group > label {
  display: block;
  margin-bottom: 4px;
  font-weight: var(--retro-font-weight-normal);
  color: var(--retro-input-text);
}

.retro-input,
.retro-textarea,
.retro-select {
  width: 100%;
  padding: 8px;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
  color: var(--retro-input-text);
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
  border-radius: var(--retro-border-radius);
  transition: none;
}
.retro-input:focus,
.retro-textarea:focus,
.retro-select:focus {
  border-color: var(--retro-primary);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
}
.retro-input:focus,
.retro-textarea:focus,
.retro-select:focus {
  outline: 1px dotted var(--retro-text);
  outline-offset: -4px;
}
.retro-input:focus:not(:focus-visible),
.retro-textarea:focus:not(:focus-visible),
.retro-select:focus:not(:focus-visible) {
  outline: none;
}
.retro-input:focus-visible,
.retro-textarea:focus-visible,
.retro-select:focus-visible {
  outline: 1px dotted var(--retro-text);
  outline-offset: -4px;
}

.retro-textarea {
  min-height: 100px;
  resize: vertical;
}

.retro-select {
  appearance: none;
  background-image: none;
  padding-inline-end: 16px;
}

.retro-form-inline {
  display: flex;
  align-items: center;
  gap: var(--retro-spacing-md);
}
.retro-form-inline .retro-form-group {
  margin-bottom: 0;
}
.retro-form-horizontal .retro-form-group {
  display: flex;
  align-items: center;
  gap: var(--retro-spacing-md);
}
.retro-form-horizontal .retro-form-group label {
  width: 200px;
  margin-bottom: 0;
  text-align: end;
}

.retro-input.is-valid,
.retro-textarea.is-valid,
.retro-select.is-valid {
  border-color: var(--retro-color-success);
}
.retro-input.is-valid:focus,
.retro-textarea.is-valid:focus,
.retro-select.is-valid:focus {
  box-shadow: inset -1px -1px 0 var(--retro-border-dark), inset 1px 1px 0 var(--retro-shadow-light), 0 0 0 2px rgba(var(--retro-color-success-rgb), 0.2);
}
.retro-input.is-invalid,
.retro-textarea.is-invalid,
.retro-select.is-invalid {
  border-color: var(--retro-color-danger);
}
.retro-input.is-invalid:focus,
.retro-textarea.is-invalid:focus,
.retro-select.is-invalid:focus {
  box-shadow: inset -1px -1px 0 var(--retro-border-dark), inset 1px 1px 0 var(--retro-shadow-light), 0 0 0 2px rgba(var(--retro-color-danger-rgb), 0.2);
}

.retro-form-text {
  font-size: var(--retro-font-size-sm);
  color: var(--retro-text-muted);
  margin-top: var(--retro-spacing-xs);
}

.retro-form-feedback {
  font-size: var(--retro-font-size-sm);
  margin-top: var(--retro-spacing-xs);
}
.retro-form-feedback.is-valid {
  color: var(--retro-color-success);
}
.retro-form-feedback.is-invalid {
  color: var(--retro-color-danger);
}

.retro-input,
.retro-select,
textarea {
  padding: 0.5em 0.75em;
}

input[type=color].retro-input {
  width: 48px;
  height: 36px;
  padding: 2px;
  border-radius: var(--retro-border-radius);
  border: 2px solid var(--retro-border-dark);
  background: var(--retro-input-bg);
  box-shadow: 1px 1px 0 var(--retro-border-light);
}

input[type=range].retro-input {
  width: 100%;
  margin: 8px 0;
  background: transparent;
  appearance: none;
  height: 6px;
  border-radius: var(--retro-border-radius);
  outline: none;
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
}

input[type=range].retro-input::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: var(--retro-border-radius);
  background: var(--retro-primary);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  cursor: pointer;
}

input[type=range].retro-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: var(--retro-border-radius);
  background: var(--retro-primary);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  cursor: pointer;
}

input[type=range].retro-input::-ms-thumb {
  width: 18px;
  height: 18px;
  border-radius: var(--retro-border-radius);
  background: var(--retro-primary);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  cursor: pointer;
}

input[type=range].retro-input::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--retro-input-bg);
  border-radius: var(--retro-border-radius);
}

input[type=range].retro-input::-ms-fill-lower,
input[type=range].retro-input::-ms-fill-upper {
  background: var(--retro-input-bg);
}

input[type=file].retro-input {
  padding: 4px;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  color: var(--retro-input-text);
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
}

.retro-input:disabled,
.retro-select:disabled,
.retro-textarea:disabled {
  background: var(--retro-light);
  color: var(--retro-text-muted);
  border-color: var(--retro-border-medium);
  cursor: not-allowed;
  opacity: 1;
}

.retro-label-text {
  display: inline-block;
  font-weight: normal;
  margin-bottom: 0;
  vertical-align: middle;
  line-height: 1.2;
}

input[type=checkbox].retro-input,
input[type=radio].retro-input {
  appearance: none;
  -webkit-appearance: none;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-medium);
  width: 16px;
  height: 16px;
  margin-block: 0 0;
  margin-inline: 0 8px;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

input[type=checkbox].retro-input {
  border-radius: var(--retro-border-radius);
}

input[type=checkbox].retro-input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid var(--retro-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  background: none;
  display: block;
}

input[type=radio].retro-input {
  border-radius: 50%;
}

input[type=radio].retro-input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  background: var(--retro-primary);
  border-radius: 50%;
  display: block;
}

input[type=checkbox].retro-input:focus,
input[type=radio].retro-input:focus {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}
input[type=checkbox].retro-input:focus:not(:focus-visible),
input[type=radio].retro-input:focus:not(:focus-visible) {
  outline: none;
}
input[type=checkbox].retro-input:focus-visible,
input[type=radio].retro-input:focus-visible {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}

.retro-label {
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
  color: var(--retro-text);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-inline-end: 16px;
}

/**
 * @name Form Shell
 * @group components
 * @description
 * Wrapper and a few pieces the demo pages referenced but the framework never
 * shipped: .retro-form, .retro-input-icon, .retro-file-input, .retro-listbox.
 */
.retro-form {
  display: flex;
  flex-direction: column;
  gap: var(--retro-spacing-md);
  width: 100%;
}
.retro-form > button,
.retro-form > .retro-btn {
  align-self: flex-start;
}

.retro-input-icon {
  position: relative;
  display: block;
  width: 100%;
}
.retro-input-icon > .retro-input,
.retro-input-icon > input,
.retro-input-icon > .retro-select,
.retro-input-icon > select {
  width: 100%;
  padding-inline-start: 2.2em;
}
.retro-input-icon > :first-child:not(input):not(select):not(.retro-input):not(.retro-select) {
  position: absolute;
  top: 50%;
  inset-inline-start: 0.7em;
  transform: translateY(-50%);
  line-height: 1;
  pointer-events: none;
  color: var(--retro-text-muted);
  z-index: 1;
}

.retro-file-input {
  display: block;
  width: 100%;
  padding: var(--retro-spacing-xs);
  background: var(--retro-input-bg);
  color: var(--retro-input-text);
  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
  box-shadow: var(--retro-border-sunken);
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
}

.retro-listbox {
  width: 100%;
  padding: 0;
  background: var(--retro-input-bg);
  color: var(--retro-input-text);
  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
  box-shadow: var(--retro-border-sunken);
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
  margin: 0;
  list-style: none;
  overflow-y: auto;
}
.retro-listbox option,
.retro-listbox li {
  display: block;
  padding: var(--retro-spacing-xs) var(--retro-spacing-sm);
  list-style: none;
}
.retro-listbox li + li {
  border-top: 1px solid var(--retro-border-light);
}
.retro-listbox option:checked,
.retro-listbox li[aria-selected=true],
.retro-listbox li.active {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Base Styles */
/* Retro Checkbox and Radio Styles */
/**
 * @name Retro Checkbox & Radio
 * @group components
 * @description
 * Win95/98 style checkboxes and radio buttons.
 */
/* Common styles for checkbox and radio */
.retro-checkbox,
.retro-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-block: 0 0;
  margin-inline: 0 8px;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-medium);
  outline: none;
  display: inline-block;
  transition: background-color 0.1s, border-color 0.1s, box-shadow 0.1s;
  color: var(--retro-input-text);
}
.retro-checkbox:hover,
.retro-radio:hover {
  border-color: var(--retro-primary);
}
.retro-checkbox:focus,
.retro-radio:focus {
  outline: 1px dotted var(--retro-text);
  outline-offset: 2px;
}
.retro-checkbox:focus:not(:focus-visible),
.retro-radio:focus:not(:focus-visible) {
  outline: none;
}
.retro-checkbox:focus-visible,
.retro-radio:focus-visible {
  outline: 1px dotted var(--retro-text);
  outline-offset: 2px;
}
.retro-checkbox:disabled,
.retro-radio:disabled {
  background: var(--retro-body-bg);
  border-color: var(--retro-border-medium);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Checkbox specific styles */
.retro-checkbox {
  border-radius: var(--retro-border-radius);
}
.retro-checkbox:checked {
  background: var(--retro-white);
}
.retro-checkbox:checked:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--retro-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: block;
}
.retro-checkbox {
  /* Color variants */
}
.retro-checkbox.retro-checkbox-primary:checked:after {
  border-color: var(--retro-primary);
}
.retro-checkbox.retro-checkbox-success:checked:after {
  border-color: var(--retro-success);
}
.retro-checkbox.retro-checkbox-danger:checked:after {
  border-color: var(--retro-danger);
}
.retro-checkbox.retro-checkbox-warning:checked:after {
  border-color: var(--retro-warning);
}
.retro-checkbox.retro-checkbox-info:checked:after {
  border-color: var(--retro-info);
}

/* Radio button specific styles */
.retro-radio {
  border-radius: 50%;
}
.retro-radio:checked {
  background: var(--retro-white);
}
.retro-radio:checked:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  background: var(--retro-primary);
  border-radius: 50%;
  display: block;
}
.retro-radio {
  /* Color variants */
}
.retro-radio.retro-radio-primary:checked:after {
  background: var(--retro-primary);
}
.retro-radio.retro-radio-success:checked:after {
  background: var(--retro-success);
}
.retro-radio.retro-radio-danger:checked:after {
  background: var(--retro-danger);
}
.retro-radio.retro-radio-warning:checked:after {
  background: var(--retro-warning);
}
.retro-radio.retro-radio-info:checked:after {
  background: var(--retro-info);
}

/* Switch style */
.retro-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-block: 0 0;
  margin-inline: 0 8px;
  vertical-align: middle;
}
.retro-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.retro-switch .retro-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--retro-body-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-medium);
  transition: 0.1s;
}
.retro-switch .retro-switch-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background: var(--retro-white);
  border: 1px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-medium);
  transition: 0.1s;
}
.retro-switch input:checked + .retro-switch-slider {
  background: var(--retro-primary);
}
.retro-switch input:checked + .retro-switch-slider:before {
  transform: translateX(16px);
}
.retro-switch input:focus-visible + .retro-switch-slider {
  outline: 1px dotted var(--retro-text);
}
.retro-switch input:disabled + .retro-switch-slider {
  background: var(--retro-body-bg);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Checkbox/Radio group */
.retro-checkbox-group,
.retro-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.retro-checkbox-group.retro-group-inline,
.retro-radio-group.retro-group-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}
.retro-checkbox-group label,
.retro-radio-group label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

/* States */
.retro-checkbox.is-invalid,
.retro-radio.is-invalid,
.retro-switch input.is-invalid + .retro-switch-slider {
  border-color: var(--retro-danger);
}

.retro-checkbox.is-valid,
.retro-radio.is-valid,
.retro-switch input.is-valid + .retro-switch-slider {
  border-color: var(--retro-success);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Base Styles */
/**
 * @name Retro Alert
 * @group components
 * @description
 * Alert component for displaying messages and notifications.
 * @example scss
 *   <div class="retro-alert retro-alert-primary">
 *     This is a primary alert message.
 *   </div>
 *   <div class="retro-alert retro-alert-success">
 *     This is a success alert message.
 *   </div>
 *   <div class="retro-alert retro-alert-danger">
 *     This is a danger alert message.
 *   </div>
 *   <div class="retro-alert retro-alert-warning">
 *     This is a warning alert message.
 *   </div>
 *   <div class="retro-alert retro-alert-info">
 *     This is an info alert message.
 *   </div>
 *   <div class="retro-alert retro-alert-primary" style="position:relative;">
 *     <div class="retro-alert-header">Primary Alert</div>
 *     <div class="retro-alert-body">This alert has a header, body, and a close button.</div>
 *     <button class="retro-alert-close">×</button>
 *   </div>
 *   <div class="retro-alert retro-alert-success">
 *     <div class="retro-alert-header">Success!</div>
 *     <div class="retro-alert-body">Your operation was successful.</div>
 *     <div class="retro-alert-footer">Footer text here</div>
 *   </div>
 */
.retro-alert, .retro-toast {
  background: var(--retro-alert-bg);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  border-radius: var(--retro-border-radius);
  font-family: var(--retro-font-heading);
  box-shadow: none;
  margin-bottom: 1.2em;
  padding: 0.7em 1.2em;
  color: var(--retro-alert-text);
  text-align: start;
  display: block;
}

.retro-alert-header {
  width: 100%;
  margin: 0 0 var(--retro-spacing-xs);
  font-weight: var(--retro-font-weight-bold);
  font-size: var(--retro-font-size-lg);
  color: inherit;
  text-align: start;
}

.retro-alert-body, .retro-toast-body {
  padding: 0;
  margin: 0;
  font-size: 1em;
  color: inherit;
  text-align: start;
}

.retro-alert-footer {
  width: 100%;
  margin: 0;
  padding: 0.3em 1em 0.2em 1em;
  font-size: var(--retro-font-size-sm);
  font-family: inherit;
  border-radius: var(--retro-border-radius);
  box-shadow: none;
  border-top: 2px solid rgba(var(--retro-black-rgb), 0.12);
  background: var(--retro-light);
  color: var(--retro-text);
  text-align: start;
}

.retro-alert-primary .retro-alert-footer {
  background: var(--retro-primary-active);
  color: var(--retro-primary-fg);
  border-top: 2px solid var(--retro-primary-active);
}

.retro-alert-success .retro-alert-footer {
  background: var(--retro-success-active);
  color: var(--retro-success-fg);
  border-top: 2px solid var(--retro-success-active);
}

.retro-alert-danger .retro-alert-footer {
  background: var(--retro-danger-active);
  color: var(--retro-danger-fg);
  border-top: 2px solid var(--retro-danger-active);
}

.retro-alert-warning .retro-alert-footer {
  background: var(--retro-warning-active);
  color: var(--retro-warning-fg);
  border-top: 2px solid var(--retro-warning-active);
}

.retro-alert-info .retro-alert-footer {
  background: var(--retro-info-active);
  color: var(--retro-info-fg);
  border-top: 2px solid var(--retro-info-active);
}

.retro-alert-icon, .retro-toast-icon {
  display: none !important;
}

.retro-toast-primary, .retro-toast.retro-alert-primary {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
  border-inline-start: 6px solid var(--retro-primary-active);
}

.retro-toast-success, .retro-toast.retro-alert-success {
  background: var(--retro-success);
  color: var(--retro-success-fg);
  border-inline-start: 6px solid var(--retro-success-active);
}

.retro-toast-danger, .retro-toast.retro-alert-danger {
  background: var(--retro-danger);
  color: var(--retro-danger-fg);
  border-inline-start: 6px solid var(--retro-danger-active);
}

.retro-toast-warning, .retro-toast.retro-alert-warning {
  background: var(--retro-warning);
  color: var(--retro-warning-fg);
  border-inline-start: 6px solid var(--retro-warning-active);
}

.retro-toast-info, .retro-toast.retro-alert-info {
  background: var(--retro-info);
  color: var(--retro-info-fg);
  border-inline-start: 6px solid var(--retro-info-active);
}

.retro-toast-body {
  flex: 1 1 auto;
  min-width: 0;
}

.retro-alert-close, .retro-toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--retro-font-size-xl);
  font-weight: bold;
  margin-inline-start: auto;
  cursor: pointer;
  opacity: 1;
  line-height: 1;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25em;
  transition: background-color 0.2s;
}

.retro-alert-close:hover, .retro-toast-close:hover,
.retro-alert-close:focus-visible, .retro-toast-close:focus-visible {
  background-color: rgba(var(--retro-shadow-rgb), 0.18);
}

.retro-alert-primary {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
  border-inline-start: 6px solid var(--retro-primary-active);
}

.retro-alert-success {
  background: var(--retro-success);
  color: var(--retro-success-fg);
  border-inline-start: 6px solid var(--retro-success-active);
}

.retro-alert-danger {
  background: var(--retro-danger);
  color: var(--retro-danger-fg);
  border-inline-start: 6px solid var(--retro-danger-active);
}

.retro-alert-warning {
  background: var(--retro-warning);
  color: var(--retro-warning-fg);
  border-inline-start: 6px solid var(--retro-warning-active);
}

.retro-alert-info {
  background: var(--retro-info);
  color: var(--retro-info-fg);
  border-inline-start: 6px solid var(--retro-info-active);
}

.retro-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--retro-spacing-sm);
  box-shadow: 2px 4px 16px rgba(var(--retro-shadow-rgb), 0.18), 1px 1px 0 var(--retro-border-light), 2px 2px 0 var(--retro-border-medium);
  border-width: 1.5px;
  margin-bottom: 0.75em;
  animation: retro-toast-fadein 0.3s;
  min-width: 240px;
  max-width: 400px;
  position: relative;
  z-index: var(--retro-z-index-tooltip);
  pointer-events: auto;
}

@keyframes retro-toast-fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.retro-alert-main, .retro-toast-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding-block: 0.7em 0.7em;
  padding-inline: 0.9em 2.5em;
  position: relative;
  min-height: 36px;
  background: inherit;
}

.retro-alert-icon, .retro-toast-icon {
  width: 24px;
  height: 24px;
  margin-inline-end: 0.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--retro-font-size-lg);
  flex-shrink: 0;
}

.retro-alert-primary .retro-alert-icon::before, .retro-toast-primary .retro-toast-icon::before {
  content: "ℹ"; /* ℹ */
}

.retro-alert-success .retro-alert-icon::before, .retro-toast-success .retro-toast-icon::before {
  content: "✔"; /* ✔ */
}

.retro-alert-danger .retro-alert-icon::before, .retro-toast-danger .retro-toast-icon::before {
  content: "✖"; /* ✖ */
}

.retro-alert-warning .retro-alert-icon::before, .retro-toast-warning .retro-toast-icon::before {
  content: "⚠"; /* ⚠ */
}

.retro-alert-info .retro-alert-icon::before, .retro-toast-info .retro-toast-icon::before {
  content: "ℹ"; /* ℹ */
}

.retro-alert-close, .retro-toast-close {
  position: static;
  margin-inline-start: 1em;
  align-self: center;
}

.retro-alert::before, .retro-toast::before {
  display: none !important;
}

.retro-alert {
  margin-bottom: 1.25rem;
}

/* Base Styles */
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/**
 * @name Retro Table
 * @group components
 * @description
 * Table component with various styles and variants.
 * @example scss
 *   <table class="retro-table">
 *     <thead>
 *       <tr>
 *         <th>Header 1</th>
 *         <th>Header 2</th>
 *       </tr>
 *     </thead>
 *     <tbody>
 *       <tr>
 *         <td>Cell 1</td>
 *         <td>Cell 2</td>
 *       </tr>
 *     </tbody>
 *   </table>
 */
.retro-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--retro-border-dark);
  background-color: var(--retro-table-bg);
  color: var(--retro-table-header-text);
  font-family: var(--retro-font);
  font-size: 1rem;
  box-shadow: var(--retro-box-shadow-outset-button);
  overflow-x: auto;
  margin-bottom: var(--retro-spacing-md);
  table-layout: fixed;
}
.retro-table th,
.retro-table td {
  padding: 6px 8px;
  text-align: start;
  border: 1px solid var(--retro-border-medium);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.retro-table thead th {
  background-color: var(--retro-table-header-bg);
  color: var(--retro-table-header-text);
  font-weight: bold;
  border-top: 1px solid var(--retro-border-light);
  border-left: 1px solid var(--retro-border-light);
  border-right: 1px solid var(--retro-border-dark);
  border-bottom: 1px solid var(--retro-border-dark);
}
.retro-table thead th:not(:last-child) {
  border-right: 1px solid var(--retro-border-dark);
}
.retro-table tbody tr:hover {
  background-color: var(--retro-table-striped-bg);
}
.retro-table thead th.retro-th-sortable {
  cursor: pointer;
  user-select: none;
  padding-inline-end: calc(var(--retro-spacing-md) + 14px);
  position: relative;
}
.retro-table thead th.retro-th-sortable:hover {
  background-color: var(--retro-primary);
  color: var(--retro-primary-fg);
}
.retro-table thead th.retro-th-sortable:focus-visible {
  outline: 2px solid var(--retro-border-light);
  outline-offset: -3px;
}
.retro-table thead th.retro-th-sortable::after {
  content: "↕";
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--retro-font-size-xs);
  opacity: 0.45;
}
.retro-table thead th.retro-th-sortable.asc::after {
  content: "▲";
  opacity: 1;
}
.retro-table thead th.retro-th-sortable.desc::after {
  content: "▼";
  opacity: 1;
}
.retro-table.retro-table-striped tbody tr:nth-child(odd) {
  background-color: var(--retro-table-striped-bg);
}
.retro-table.retro-table-striped tbody tr:nth-child(odd):hover {
  background-color: var(--retro-primary);
  color: var(--retro-primary-fg);
}
.retro-table.retro-table-bordered {
  border: 2px solid var(--retro-border-dark);
}
.retro-table.retro-table-bordered th, .retro-table.retro-table-bordered td {
  border: 1px solid var(--retro-border-medium);
}
.retro-table.retro-table-bordered thead th {
  border-bottom: 2px solid var(--retro-border-dark);
}
.retro-table::-webkit-scrollbar {
  height: 16px;
  width: 16px;
  background-color: var(--retro-table-bg);
}
.retro-table::-webkit-scrollbar-thumb {
  background-color: var(--retro-table-bg);
  border-top: 1px solid var(--retro-border-light);
  border-left: 1px solid var(--retro-border-light);
  border-right: 1px solid var(--retro-border-dark);
  border-bottom: 1px solid var(--retro-border-dark);
  min-height: 20px;
}
.retro-table::-webkit-scrollbar-track {
  background-color: var(--retro-table-striped-bg);
}
.retro-table::-webkit-scrollbar-button {
  background-color: var(--retro-table-bg);
  border-top: 1px solid var(--retro-border-light);
  border-left: 1px solid var(--retro-border-light);
  border-right: 1px solid var(--retro-border-dark);
  border-bottom: 1px solid var(--retro-border-dark);
  display: block;
  height: 16px;
  width: 16px;
}

/**
 * @name Responsive Table Wrapper
 * @group components
 * @description
 * Horizontal scroll container for a wide table. `table-responsive.js` wraps
 * every `.retro-table` in this class — but the styles had been commented out,
 * so the wrapper was inert and wide tables simply overflowed the page on
 * narrow viewports.
 */
.retro-table-responsive {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.retro-table-responsive > .retro-table {
  margin-bottom: 0;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Base Styles */
/**
 * @name Retro Modal
 * @group components
 * @description
 * Modal component for displaying content in a dialog box.
 * @example scss
 *   <div class="retro-modal">
 *     <div class="retro-modal-content">
 *       <div class="retro-modal-header">
 *         <h3>Modal Title</h3>
 *         <button class="retro-modal-close">×</button>
 *       </div>
 *       <div class="retro-modal-body">
 *         Modal content goes here
 *       </div>
 *     </div>
 *   </div>
 */
.retro-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: none;
  overflow: auto;
  outline: 0;
  background: rgba(var(--retro-scrim-rgb), 0.6);
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
}
.retro-modal::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-inline-end: -0.25rem; /* Adjusts for inline-block spacing */
}
.retro-modal.show {
  display: block;
}
.retro-modal-content {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  margin: 1.75rem auto;
  background: var(--retro-modal-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 4px 4px 8px rgba(var(--retro-shadow-rgb), 0.5), inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
  font-family: var(--retro-font-heading);
  transition: none;
  text-align: start;
  vertical-align: middle;
  border-radius: var(--retro-border-radius);
}
.retro-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  border-radius: var(--retro-border-radius) var(--retro-border-radius) 0 0;
  background: var(--retro-modal-header-bg);
  color: var(--retro-modal-header-text);
}
.retro-modal-header h1, .retro-modal-header h2, .retro-modal-header h3, .retro-modal-header h4, .retro-modal-header h5, .retro-modal-header h6 {
  margin: 0;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
}
.retro-modal-header {
  border-top: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-dark);
  border-inline-start: 8px solid var(--retro-modal-header-bg);
  font-family: var(--retro-font-heading);
  font-size: var(--retro-font-size-lg);
  font-weight: bold;
  line-height: 1.5;
  user-select: none;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 rgba(var(--retro-shadow-rgb), 0.8), 0 1px 0 rgba(var(--retro-shadow-rgb), 0.8);
}
.retro-modal-close-floating {
  position: absolute;
  top: var(--retro-spacing-sm);
  inset-inline-end: var(--retro-spacing-sm);
  margin-inline-start: 0;
  z-index: 1;
}
.retro-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: var(--retro-spacing-sm);
  background: var(--retro-light);
  border: 2px outset var(--retro-border-light);
  box-shadow: none;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: var(--retro-font-size-xl);
  line-height: 1;
  color: var(--retro-text);
  text-shadow: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, border 0.1s;
}
.retro-modal-close:hover {
  background: var(--retro-gray-100);
  border: 2px inset var(--retro-border-light);
}
.retro-modal-close:active {
  background: var(--retro-border-medium);
  border: 2px inset var(--retro-border-dark);
}
.retro-modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--retro-spacing-md);
  background: var(--retro-bg);
  border-top: var(--retro-border-width) var(--retro-border-style) var(--retro-border-dark);
  overflow: auto;
  max-height: calc(80vh - 120px); /* Prevent overly tall modals */
}
.retro-modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: var(--retro-spacing-sm);
  background: var(--retro-bg);
  border-top: var(--retro-border-width) var(--retro-border-style) var(--retro-border-dark);
  border-radius: 0 0 var(--retro-border-radius-sm) var(--retro-border-radius-sm);
}
.retro-modal-footer > * {
  margin: var(--retro-spacing-xs);
}
.retro-modal-sm {
  max-width: 300px;
}
.retro-modal-lg {
  max-width: 800px;
}
.retro-modal-xl {
  max-width: 1140px;
}
.retro-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--retro-scrim-rgb), 0.5);
  z-index: 1040;
}
.retro-modal-scroll {
  overflow-y: auto;
}
.retro-modal-fade {
  transition: opacity 0.15s linear;
}
.retro-modal-fade:not(.show) {
  opacity: 0;
}
.retro-modal-slide {
  transition: transform 0.3s ease-out;
}
.retro-modal-slide:not(.show) {
  transform: translateY(-50px);
}

.retro-modal-header h1,
.retro-modal-header h2,
.retro-modal-header h3,
.retro-modal-header h4,
.retro-modal-header h5,
.retro-modal-header h6 {
  color: var(--retro-modal-header-text);
  font-size: var(--retro-font-size-xl);
  font-weight: bold;
  margin: 0;
  font-family: inherit;
  text-shadow: 1px 1px 0 rgba(var(--retro-shadow-rgb), 0.8), 0 1px 0 rgba(var(--retro-shadow-rgb), 0.8);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* Base Styles */
/* Retro Nav - Win9x Style Only */
/**
 * @name Retro Navigation
 * @group components
 * @description
 * Navigation component with various styles and variants.
 * @example scss
 *   <nav class="retro-nav">
 *     <a href="#" class="retro-nav-item">Home</a>
 *     <a href="#" class="retro-nav-item">About</a>
 *     <a href="#" class="retro-nav-item">Contact</a>
 *   </nav>
 */
.retro-nav {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  background: var(--retro-light);
  border: 2px solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
  font-family: var(--retro-font);
  transition: none;
}

.retro-nav-item {
  display: inline-block;
  padding: 8px 16px;
  color: var(--retro-black);
  text-decoration: none;
  border-radius: var(--retro-border-radius);
  background: var(--retro-light);
  border-right: 1px solid var(--retro-border-medium);
  font-family: var(--retro-font);
  transition: none;
}
.retro-nav-item:hover {
  background: var(--retro-light);
  color: var(--retro-primary-text);
}
.retro-nav-item.active, .retro-nav-item[aria-current]:not([aria-current=false]) {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
  text-shadow: 0 1px 2px var(--retro-border-dark), 0 0 2px var(--retro-border-light);
  outline: 2px solid var(--retro-border-light);
  outline-offset: -2px;
}
.retro-nav-item:focus-visible {
  z-index: 2;
}
.retro-nav-item:focus {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}
.retro-nav-item:focus:not(:focus-visible) {
  outline: none;
}
.retro-nav-item:focus-visible {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}

.retro-nav-vertical {
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: 100%;
  border: 2px solid var(--retro-border-dark);
  background: var(--retro-light);
  padding: 0;
  margin: 0;
  list-style: none;
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
}

.retro-nav-vertical .retro-nav-item {
  display: block;
  border-inline-end: none;
  border-bottom: 1px solid var(--retro-border-medium);
  border-radius: var(--retro-border-radius);
  width: 100%;
}
.retro-nav-vertical .retro-nav-item:last-child {
  border-bottom: none;
}

.retro-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.retro-nav-pills .retro-nav-item {
  border-radius: 999px;
  background: var(--retro-light);
  border: 1px solid var(--retro-border-medium);
  margin: 0 2px;
  padding: 8px 24px;
  transition: background 0.2s, color 0.2s;
  color: var(--retro-black);
}
.retro-nav-pills .retro-nav-item:hover {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
}
.retro-nav-pills .retro-nav-item.active {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
  font-weight: bold;
  box-shadow: 0 1px 4px rgba(var(--retro-primary-rgb), 0.35) inset;
}

.retro-nav-toolbar {
  display: flex;
  flex-wrap: wrap;
  padding: 2px;
  margin: 0;
  background: var(--retro-light);
  border: 2px solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
  font-family: var(--retro-font);
}
.retro-nav-toolbar .retro-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 2px 10px;
  margin: 2px;
  color: var(--retro-black);
  text-decoration: none;
  background: var(--retro-light);
  border: 2px solid transparent;
  border-radius: var(--retro-border-radius);
  text-align: center;
}
.retro-nav-toolbar .retro-nav-item:hover {
  background: var(--retro-white);
  border: 2px solid var(--retro-border-medium);
  border-right: 2px solid var(--retro-border-dark);
  border-bottom: 2px solid var(--retro-border-dark);
  border-left: 2px solid var(--retro-border-light);
  border-top: 2px solid var(--retro-border-light);
}
.retro-nav-toolbar .retro-nav-item.active {
  background: var(--retro-light);
  border: 2px solid var(--retro-border-medium);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-dark);
  border-top: 2px solid var(--retro-border-dark);
  color: var(--retro-black);
  font-weight: normal;
}
.retro-nav-toolbar .retro-nav-item .retro-nav-icon {
  font-size: var(--retro-font-size-xl);
  margin-inline-end: 4px;
}
.retro-nav-toolbar.retro-nav-icons .retro-nav-item {
  width: 36px;
  padding: 0;
}
.retro-nav-toolbar.retro-nav-icons .retro-nav-item .retro-nav-icon {
  margin-inline-end: 0;
}
.retro-nav-toolbar .retro-nav-separator {
  width: 1px;
  height: 30px;
  margin: 3px 4px;
  background: var(--retro-border-medium);
  box-shadow: 1px 0 0 var(--retro-border-light);
}

.retro-nav-tabbed {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 -1px 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--retro-border-dark);
  box-shadow: none;
  position: relative;
  z-index: 1;
}
.retro-nav-tabbed .retro-nav-item {
  padding: 8px 16px;
  background: var(--retro-light);
  border: 2px solid var(--retro-border-dark);
  border-bottom: 0;
  margin-inline-end: 2px;
  position: relative;
  box-shadow: inset 1px 1px 0 var(--retro-border-light);
  color: var(--retro-black);
}
.retro-nav-tabbed .retro-nav-item:hover {
  background: var(--retro-white);
  color: var(--retro-black);
}
.retro-nav-tabbed .retro-nav-item.active {
  background: var(--retro-white);
  color: var(--retro-black);
  border-bottom: 2px solid var(--retro-white);
  z-index: 2;
  margin-bottom: -2px;
}

.retro-nav-underlined {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--retro-border-medium);
}
.retro-nav-underlined .retro-nav-item {
  padding: 10px 16px;
  background: transparent;
  border: none;
  position: relative;
  margin-inline-end: 4px;
  color: var(--retro-black);
}
.retro-nav-underlined .retro-nav-item:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
}
.retro-nav-underlined .retro-nav-item:hover {
  background: transparent;
  color: var(--retro-primary-text);
}
.retro-nav-underlined .retro-nav-item:hover:after {
  background: rgba(var(--retro-primary-rgb), 0.3);
}
.retro-nav-underlined .retro-nav-item.active {
  background: transparent;
  color: var(--retro-primary-text);
  font-weight: normal;
}
.retro-nav-underlined .retro-nav-item.active:after {
  background: var(--retro-primary);
}

.retro-nav-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.retro-nav-buttons .retro-nav-item {
  padding: 6px 14px;
  background: var(--retro-light);
  border: 2px solid var(--retro-border-dark);
  border-right: 1px solid var(--retro-border-dark);
  border-left: 1px solid var(--retro-border-dark);
  margin: 0;
  position: relative;
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
  color: var(--retro-black);
}
.retro-nav-buttons .retro-nav-item:first-child {
  border-left: 2px solid var(--retro-border-dark);
  border-top-left-radius: var(--retro-border-radius);
  border-bottom-left-radius: var(--retro-border-radius);
}
.retro-nav-buttons .retro-nav-item:last-child {
  border-right: 2px solid var(--retro-border-dark);
  border-top-right-radius: var(--retro-border-radius);
  border-bottom-right-radius: var(--retro-border-radius);
}
.retro-nav-buttons .retro-nav-item:hover {
  background: var(--retro-white);
  color: var(--retro-black);
  z-index: 1;
}
.retro-nav-buttons .retro-nav-item.active {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
  z-index: 2;
}

/**
 * @name Tab Panes
 * @group components
 * @description
 * Panel bodies for the tabbed / underlined / button nav variants. Referenced by
 * the demos but never defined, so tab content rendered unstyled and every pane
 * stayed visible at once.
 */
.retro-tab-pane {
  display: none;
  padding: var(--retro-spacing-md);
  background: var(--retro-bg);
  color: var(--retro-text);
  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
  border-top: none;
}
.retro-tab-pane.active {
  display: block;
}

.retro-tab-pane-underlined,
.retro-tab-pane-buttons {
  border: none;
  padding: var(--retro-spacing-md) 0;
  background: transparent;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-progress {
  width: 100%;
  background: var(--retro-progress-bg);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  border-radius: var(--retro-border-radius);
  height: 22px;
  position: relative;
  margin: 1em 0;
  box-shadow: none;
  overflow: hidden;
}

.retro-progress-bar {
  background: var(--retro-progress-bar-bg);
  height: 100%;
  width: 0%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-right: 2px solid var(--retro-border-light);
  border-radius: var(--retro-border-radius);
  box-shadow: none;
  position: absolute;
  inset-inline-start: 0;
  top: 0;
}

.retro-progress-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 var(--retro-spacing-xs);
  font-size: var(--retro-font-size-sm);
  line-height: 1.2;
  color: var(--retro-text);
  font-family: var(--retro-font);
  pointer-events: none;
  user-select: none;
  background: var(--retro-progress-bg);
  border: 1px solid var(--retro-border-medium);
  border-radius: var(--retro-border-radius);
}

.retro-progress-bar-striped {
  background: repeating-linear-gradient(90deg, var(--retro-primary) 0 12px, var(--retro-bg) 12px 18px);
  animation: retro-progress-blocks 0.8s linear infinite;
}

@keyframes retro-progress-blocks {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 18px 0;
  }
}
.retro-progress-bar-success {
  background: var(--retro-success);
}

.retro-progress-bar-danger {
  background: var(--retro-danger);
}

.retro-progress-bar-warning {
  background: var(--retro-warning);
}

.retro-progress-bar-info {
  background: var(--retro-info);
}

.retro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 18px;
  padding: 2px 10px;
  font-size: var(--retro-font-size-sm);
  font-family: var(--retro-font-heading);
  font-weight: var(--retro-font-weight-normal);
  color: var(--retro-badge-text);
  background: var(--retro-badge-bg);
  border: 1px solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  box-shadow: 0 0 0 2px rgba(var(--retro-sheen-rgb), 0.1), inset 0 0 6px rgba(var(--retro-shadow-rgb), 0.8);
  text-shadow: none;
  margin-block: 0.2em 0.2em;
  margin-inline: 0 0.4em;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
  position: relative;
  overflow: hidden;
}
.retro-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(var(--retro-sheen-rgb), 0.15), rgba(var(--retro-sheen-rgb), 0));
  pointer-events: none;
}
.retro-badge:hover, .retro-badge:focus-visible {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 0 0 2px rgba(var(--retro-sheen-rgb), 0.2), inset 0 0 10px rgba(var(--retro-shadow-rgb), 0.8), 0 0 5px rgba(var(--retro-sheen-rgb), 0.1);
  filter: brightness(1.1);
}
.retro-badge:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 0 0 2px rgba(var(--retro-sheen-rgb), 0.1), inset 0 0 8px rgba(var(--retro-shadow-rgb), 0.9);
  filter: brightness(0.9);
}

.retro-badge-primary {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
  border: 2px solid var(--retro-primary-active);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-primary-active), 1px 1px 0 var(--retro-primary-hover);
  text-shadow: none;
}
.retro-badge-primary:hover, .retro-badge-primary:focus-visible {
  background: var(--retro-primary-hover);
  box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-primary-active), 2px 2px 0 var(--retro-primary-hover);
  filter: brightness(1.08);
}
.retro-badge-primary:active {
  background: var(--retro-primary-active);
  box-shadow: inset 1px 1px 0 var(--retro-primary-active), inset -1px -1px 0 var(--retro-border-light);
  filter: brightness(0.95);
}

.retro-badge-success {
  background: var(--retro-success);
  color: var(--retro-success-fg);
  border: 2px solid var(--retro-success-active);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-success-active), 1px 1px 0 var(--retro-success-hover);
  text-shadow: none;
}
.retro-badge-success:hover, .retro-badge-success:focus-visible {
  background: var(--retro-success-hover);
  box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-success-active), 2px 2px 0 var(--retro-success-hover);
  filter: brightness(1.08);
}
.retro-badge-success:active {
  background: var(--retro-success-active);
  box-shadow: inset 1px 1px 0 var(--retro-success-active), inset -1px -1px 0 var(--retro-border-light);
  filter: brightness(0.95);
}

.retro-badge-danger {
  background: var(--retro-danger);
  color: var(--retro-danger-fg);
  border: 2px solid var(--retro-danger-active);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-danger-active), 1px 1px 0 var(--retro-danger-hover);
  text-shadow: none;
}
.retro-badge-danger:hover, .retro-badge-danger:focus-visible {
  background: var(--retro-danger-hover);
  box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-danger-active), 2px 2px 0 var(--retro-danger-hover);
  filter: brightness(1.08);
}
.retro-badge-danger:active {
  background: var(--retro-danger-active);
  box-shadow: inset 1px 1px 0 var(--retro-danger-active), inset -1px -1px 0 var(--retro-border-light);
  filter: brightness(0.95);
}

.retro-badge-warning {
  background: var(--retro-warning);
  color: var(--retro-warning-fg);
  border: 2px solid var(--retro-warning-active);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-warning-active), 1px 1px 0 var(--retro-warning-hover);
  text-shadow: none;
}
.retro-badge-warning:hover, .retro-badge-warning:focus-visible {
  background: var(--retro-warning-hover);
  box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-warning-active), 2px 2px 0 var(--retro-warning-hover);
  filter: brightness(1.08);
}
.retro-badge-warning:active {
  background: var(--retro-warning-active);
  box-shadow: inset 1px 1px 0 var(--retro-warning-active), inset -1px -1px 0 var(--retro-border-light);
  filter: brightness(0.95);
}

.retro-badge-info {
  background: var(--retro-info);
  color: var(--retro-info-fg);
  border: 2px solid var(--retro-info-active);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-info-active), 1px 1px 0 var(--retro-info-hover);
  text-shadow: none;
}
.retro-badge-info:hover, .retro-badge-info:focus-visible {
  background: var(--retro-info-hover);
  box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-info-active), 2px 2px 0 var(--retro-info-hover);
  filter: brightness(1.08);
}
.retro-badge-info:active {
  background: var(--retro-info-active);
  box-shadow: inset 1px 1px 0 var(--retro-info-active), inset -1px -1px 0 var(--retro-border-light);
  filter: brightness(0.95);
}

.retro-badge-secondary {
  background: var(--retro-gray);
  color: var(--retro-gray-fg);
  border: 2px solid var(--retro-gray-active);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-gray-active), 1px 1px 0 var(--retro-gray-hover);
  text-shadow: none;
}
.retro-badge-secondary:hover, .retro-badge-secondary:focus-visible {
  background: var(--retro-gray-hover);
  box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-gray-active), 2px 2px 0 var(--retro-gray-hover);
  filter: brightness(1.08);
}
.retro-badge-secondary:active {
  background: var(--retro-gray-active);
  box-shadow: inset 1px 1px 0 var(--retro-gray-active), inset -1px -1px 0 var(--retro-border-light);
  filter: brightness(0.95);
}

.retro-badge.retro-badge-xs {
  font-size: var(--retro-font-size-xs) !important;
  min-width: 16px !important;
  min-height: 12px !important;
  padding: 1px 4px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-sm {
  font-size: var(--retro-font-size-xs) !important;
  min-width: 20px !important;
  min-height: 14px !important;
  padding: 1px 6px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-md {
  font-size: var(--retro-font-size-sm) !important;
  min-width: 26px !important;
  min-height: 18px !important;
  padding: 2px 10px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-lg {
  font-size: var(--retro-font-size) !important;
  min-width: 36px !important;
  min-height: 22px !important;
  padding: 3px 14px !important;
  border-width: 1px !important;
}

.retro-badge.retro-badge-xl {
  font-size: var(--retro-font-size-lg) !important;
  min-width: 46px !important;
  min-height: 28px !important;
  padding: 4px 18px !important;
  border-width: 2px !important;
}

.retro-badge.retro-badge-xxl {
  font-size: var(--retro-font-size-xl) !important;
  min-width: 60px !important;
  min-height: 36px !important;
  padding: 6px 24px !important;
  border-width: 2px !important;
}

.retro-badge-neon {
  background: #000;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #000, 0 0 5px 2px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.5), 0 0 25px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 3px #fff, 0 0 7px #fff;
  border: none;
}
.retro-badge-neon.retro-badge-primary {
  color: #00ffff;
  text-shadow: 0 0 1px #fff, 0 0 3px #00ffff, 0 0 7px #00ffff;
  box-shadow: 0 0 0 1px #00ffff, 0 0 0 2px #000, 0 0 5px 2px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 0.5), 0 0 25px rgba(0, 255, 255, 0.3), inset 0 0 10px rgba(0, 255, 255, 0.2);
}
.retro-badge-neon.retro-badge-success {
  color: #00ff00;
  text-shadow: 0 0 1px #fff, 0 0 3px #00ff00, 0 0 7px #00ff00;
  box-shadow: 0 0 0 1px #00ff00, 0 0 0 2px #000, 0 0 5px 2px rgba(0, 255, 0, 0.6), 0 0 15px rgba(0, 255, 0, 0.5), 0 0 25px rgba(0, 255, 0, 0.3), inset 0 0 10px rgba(0, 255, 0, 0.2);
}
.retro-badge-neon.retro-badge-danger {
  color: #ff0000;
  text-shadow: 0 0 1px #fff, 0 0 3px #ff0000, 0 0 7px #ff0000;
  box-shadow: 0 0 0 1px #ff0000, 0 0 0 2px #000, 0 0 5px 2px rgba(255, 0, 0, 0.6), 0 0 15px rgba(255, 0, 0, 0.5), 0 0 25px rgba(255, 0, 0, 0.3), inset 0 0 10px rgba(255, 0, 0, 0.2);
}

.retro-badge-pixel {
  font-family: var(--retro-font-heading);
  font-weight: var(--retro-font-weight-medium);
  image-rendering: pixelated;
  border: 2px solid var(--retro-border-dark);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--retro-border-dark);
  transform-origin: center;
}
.retro-badge-pixel:hover, .retro-badge-pixel:focus-visible {
  transform: translateY(-2px) translateX(-2px);
  box-shadow: 6px 6px 0 var(--retro-border-dark);
}
.retro-badge-pixel:active {
  transform: translateY(0) translateX(0);
  box-shadow: 0 0 0 var(--retro-border-dark);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/**
 * RetroCSS Accordion Component
 * Classic accordion with retro styling
 */
.retro-accordion {
  width: 100%;
  margin-bottom: 1rem;
}

.retro-accordion-item {
  border-radius: var(--retro-border-radius);
  border: 2px solid var(--retro-border-dark);
  margin-bottom: 0.5rem;
  background-color: var(--retro-bg);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
}
.retro-accordion-item.active {
  border-color: var(--retro-primary);
}
.retro-accordion-item.active .retro-accordion-toggle {
  background-color: var(--retro-light);
}

.retro-accordion-toggle {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: start;
  cursor: pointer;
  background-color: var(--retro-bg);
  border: none;
  border-bottom: 1px solid var(--retro-border-medium);
  font-weight: bold;
  position: relative;
  font-family: var(--retro-font);
  box-shadow: inset 1px 1px 0 var(--retro-border-light);
}
.retro-accordion-toggle:hover {
  background-color: var(--retro-light);
}
.retro-accordion-toggle:active {
  box-shadow: inset 1px 1px 0 var(--retro-border-dark), inset -1px -1px 0 var(--retro-border-light);
}

.retro-accordion-icon {
  position: absolute;
  inset-inline-end: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: var(--retro-font-size-lg);
}

.retro-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  /* Fix for some browsers that struggle with transitions to/from max-height: auto */
  will-change: max-height;
}

/* Active state is controlled by JavaScript */
.retro-accordion-item.active .retro-accordion-content {
  max-height: 1000px; /* Set a reasonable default max-height */
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0;
}

.retro-pagination .retro-btn {
  min-width: 36px;
  padding: 4px 12px;
  font-size: var(--retro-font-size-lg);
  border-radius: var(--retro-border-radius);
  border: 2px solid var(--retro-border-dark);
  background: var(--retro-light);
  color: var(--retro-black);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  transition: background 0.2s, color 0.2s;
}

.retro-pagination .retro-btn.active,
.retro-pagination .retro-btn:active {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
  font-weight: bold;
  border-color: var(--retro-primary);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--retro-font);
  font-size: var(--retro-font-size-lg);
  background: var(--retro-card-bg);
  padding: 6px 12px;
  border-radius: var(--retro-border-radius);
  border: 1px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  gap: 4px;
}

.retro-breadcrumb {
  color: var(--retro-primary-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  border-radius: var(--retro-border-radius);
  transition: background 0.2s;
}
.retro-breadcrumb.active {
  color: var(--retro-card-content-text);
  font-weight: bold;
  background: var(--retro-card-content-bg);
}
.retro-breadcrumb:hover:not(.active) {
  background: var(--retro-border-light);
  color: var(--retro-card-content-text);
}

.retro-breadcrumb-icon {
  font-size: var(--retro-font-size-lg);
  margin-inline-end: 2px;
}

.retro-breadcrumb-sep {
  color: var(--retro-text-muted);
  margin: 0 2px;
  font-weight: bold;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-dropdown {
  position: relative;
  display: inline-block;
}
.retro-dropdown.open .retro-dropdown-toggle {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
  border-color: var(--retro-primary-dark);
}

.retro-dropdown-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--retro-dropdown-bg);
  border: 2px solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  padding: 6px 16px;
  font-family: var(--retro-font);
  font-size: var(--retro-font-size-lg);
  color: var(--retro-dropdown-text);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  min-width: 120px;
}
.retro-dropdown-toggle:hover {
  background: var(--retro-gray-100);
}
.retro-dropdown-toggle:active {
  box-shadow: none;
  transform: translate(1px, 1px);
}

.retro-dropdown-arrow {
  margin-inline-start: 8px;
  font-size: var(--retro-font-size);
  transition: transform 0.2s ease;
}
.open .retro-dropdown-arrow {
  transform: rotate(180deg);
}

.retro-dropdown-menu {
  position: absolute;
  inset-inline-start: 0;
  min-width: 100%;
  max-width: calc(100vw - var(--retro-spacing-lg));
  overflow-x: auto;
  background: var(--retro-dropdown-bg);
  border: 2px solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  box-shadow: 2px 2px 0 var(--retro-border-light);
  z-index: 1000;
  margin-top: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.retro-dropdown.open > .retro-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.retro-dropdown:not(.open) > .retro-dropdown-menu {
  width: 0;
  min-width: 0;
  height: 0;
  overflow: hidden;
}

.retro-dropdown-item {
  display: block;
  padding: 8px 16px;
  color: var(--retro-dropdown-text);
  text-decoration: none;
  font-family: var(--retro-font);
  font-size: var(--retro-font-size-lg);
  background: var(--retro-dropdown-bg);
  border-bottom: 1px solid var(--retro-border-light);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}
.retro-dropdown-item:last-child {
  border-bottom: none;
}
.retro-dropdown-item:hover {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
}
.retro-dropdown-item:active {
  background: var(--retro-primary-dark);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-file-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  background: var(--retro-input-bg);
  border: 2px dashed var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  padding: 16px;
  box-shadow: 1px 1px 0 var(--retro-border-light);
  min-width: 260px;
}

.retro-file-label {
  cursor: pointer;
  margin-bottom: 0;
}

.retro-file-input:focus-visible + .retro-file-label {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}

.retro-file-filename {
  font-size: var(--retro-font-size);
  color: var(--retro-input-text);
  margin-inline-start: 8px;
}

.retro-file-drop {
  width: 100%;
  padding: 16px;
  text-align: center;
  background: var(--retro-input-bg);
  border: 1px solid var(--retro-border-medium);
  border-radius: var(--retro-border-radius);
  color: var(--retro-text-muted);
  font-size: var(--retro-font-size-lg);
  margin-top: 8px;
  transition: background 0.2s, border 0.2s;
}

.retro-file-drop.dragover {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
  border-color: var(--retro-primary);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-tag-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  padding: 8px 12px;
  min-width: 220px;
}

.retro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.retro-tag {
  display: inline-flex;
  align-items: center;
  background: var(--retro-input-bg);
  color: var(--retro-input-text);
  border: 1px solid var(--retro-border-medium);
  border-radius: 12px;
  padding-block: 3px 3px;
  padding-inline: 10px 12px;
  font-size: var(--retro-font-size);
  margin-inline-end: 4px;
  margin-bottom: 4px;
  box-shadow: 1px 1px 0 var(--retro-border-light);
}

.retro-tag-remove {
  margin-inline-start: 8px;
  color: var(--retro-danger-text);
  cursor: pointer;
  font-weight: bold;
  font-size: var(--retro-font-size-lg);
  transition: color 0.2s;
}
.retro-tag-remove:hover {
  color: var(--retro-primary-text);
}

.retro-tag-text {
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--retro-font-size);
  min-width: 80px;
  margin-inline-start: 4px;
  padding: 2px 0;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-search-bar {
  display: flex;
  align-items: center;
  position: relative;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  padding: 4px 12px;
  min-width: 220px;
}

.retro-search-icon {
  font-size: var(--retro-font-size-xl);
  color: var(--retro-text);
  margin-inline-end: 8px;
}

.retro-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--retro-font-size-lg);
  flex: 1;
  padding: 4px 0;
  color: var(--retro-input-text);
}

.retro-search-suggestions {
  display: none;
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  width: 100%;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  border-radius: 0 0 var(--retro-border-radius) var(--retro-border-radius);
  box-shadow: 2px 2px 0 var(--retro-border-light);
  z-index: 10;
}

.retro-search-bar.active .retro-search-suggestions {
  display: block;
}

.retro-search-suggestion {
  padding: 8px 12px;
  font-size: var(--retro-font-size-lg);
  color: var(--retro-input-text);
  cursor: pointer;
  border-bottom: 1px solid var(--retro-border-light);
  transition: background 0.2s, color 0.2s;
}
.retro-search-suggestion:last-child {
  border-bottom: none;
}
.retro-search-suggestion:hover {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.retro-rating-star {
  font-size: var(--retro-font-size-3xl);
  color: var(--retro-text-muted);
  cursor: pointer;
  transition: color 0.2s, text-shadow 0.2s, border 0.2s;
  text-shadow: 1px 1px 0 var(--retro-border-light);
  user-select: none;
  border: 2px solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  background: var(--retro-bg);
  padding: 2px 2px 0 2px;
  margin-inline-end: 2px;
  box-sizing: border-box;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.retro-rating-star.selected,
.retro-rating-star.active {
  color: var(--retro-warning-text);
  background: rgba(var(--retro-warning-rgb), 0.2);
  border-color: var(--retro-warning);
  text-shadow: 0 2px 8px var(--retro-border-light);
}

.retro-rating-star:hover,
.retro-rating-star:hover ~ .retro-rating-star {
  color: var(--retro-warning-text);
  background: rgba(var(--retro-warning-rgb), 0.2);
  border-color: var(--retro-warning);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-divider {
  height: 1px;
  background: var(--retro-border-medium);
  margin: var(--retro-spacing-md) 0;
  border: none;
  width: 100%;
}

.retro-divider-vertical {
  width: 6px;
  min-height: 32px;
  height: 100%;
  background: none;
  border-left: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  margin: 0 var(--retro-spacing-md);
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  border-radius: var(--retro-border-radius);
}

.retro-divider-dashed {
  border-top: 1px dashed var(--retro-border-medium);
  background: none;
}

.retro-divider-dotted {
  border-top: 1px dotted var(--retro-border-medium);
  background: none;
}

.retro-divider-text {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--retro-text-muted);
  margin: var(--retro-spacing-md) 0;
}
.retro-divider-text::before, .retro-divider-text::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--retro-border-medium);
}
.retro-divider-text::before {
  margin-inline-end: var(--retro-spacing-md);
}
.retro-divider-text::after {
  margin-inline-start: var(--retro-spacing-md);
}

.retro-divider-primary {
  background: var(--retro-primary);
}

.retro-divider-success {
  background: var(--retro-success);
}

.retro-divider-warning {
  background: var(--retro-warning);
}

.retro-divider-danger {
  background: var(--retro-danger);
}

.retro-divider-thick {
  height: 2px;
}

.retro-divider-spaced {
  margin: var(--retro-spacing-xl) 0;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/**
 * RetroCSS Tooltip Component
 * Tooltips for displaying helpful information on hover
 */
/* Base styling for tooltip triggers */
[data-retro-tooltip] {
  position: relative;
  cursor: help;
}

/* Tooltip container */
.retro-tooltip {
  position: absolute;
  padding: 6px 10px;
  background: var(--retro-black);
  color: var(--retro-white);
  font-size: var(--retro-font-size-sm);
  border-radius: var(--retro-border-radius);
  white-space: nowrap;
  box-shadow: 3px 3px 0 rgba(var(--retro-shadow-rgb), 0.2);
  z-index: 1050;
  pointer-events: none;
  display: none;
  font-family: var(--retro-font);
  max-width: 200px;
  line-height: 1.4;
  /* Arrow */
}
.retro-tooltip::after {
  content: "";
  position: absolute;
  border: 5px solid transparent;
}
.retro-tooltip {
  /* Active state */
}
.retro-tooltip.show {
  display: block;
}
.retro-tooltip {
  /* Positions */
}
.retro-tooltip.retro-tooltip-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}
.retro-tooltip.retro-tooltip-top::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--retro-black);
}
.retro-tooltip.retro-tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}
.retro-tooltip.retro-tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--retro-black);
}
.retro-tooltip.retro-tooltip-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-inline-end: 8px;
}
.retro-tooltip.retro-tooltip-left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--retro-black);
}
.retro-tooltip.retro-tooltip-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-inline-start: 8px;
}
.retro-tooltip.retro-tooltip-right::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--retro-black);
}
.retro-tooltip {
  /* Variants */
}
.retro-tooltip.retro-tooltip-light {
  background: var(--retro-bg);
  color: var(--retro-black);
  border: 1px solid var(--retro-border-dark);
  box-shadow: 2px 2px 0 var(--retro-border-dark);
}
.retro-tooltip.retro-tooltip-light.retro-tooltip-top::after {
  border-top-color: var(--retro-bg);
}
.retro-tooltip.retro-tooltip-light.retro-tooltip-bottom::after {
  border-bottom-color: var(--retro-bg);
}
.retro-tooltip.retro-tooltip-light.retro-tooltip-left::after {
  border-left-color: var(--retro-bg);
}
.retro-tooltip.retro-tooltip-light.retro-tooltip-right::after {
  border-right-color: var(--retro-bg);
}
.retro-tooltip.retro-tooltip-primary {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
}
.retro-tooltip.retro-tooltip-primary.retro-tooltip-top::after {
  border-top-color: var(--retro-primary);
}
.retro-tooltip.retro-tooltip-primary.retro-tooltip-bottom::after {
  border-bottom-color: var(--retro-primary);
}
.retro-tooltip.retro-tooltip-primary.retro-tooltip-left::after {
  border-left-color: var(--retro-primary);
}
.retro-tooltip.retro-tooltip-primary.retro-tooltip-right::after {
  border-right-color: var(--retro-primary);
}
.retro-tooltip.retro-tooltip-success {
  background: var(--retro-success);
  color: var(--retro-success-fg);
}
.retro-tooltip.retro-tooltip-success.retro-tooltip-top::after {
  border-top-color: var(--retro-success);
}
.retro-tooltip.retro-tooltip-success.retro-tooltip-bottom::after {
  border-bottom-color: var(--retro-success);
}
.retro-tooltip.retro-tooltip-success.retro-tooltip-left::after {
  border-left-color: var(--retro-success);
}
.retro-tooltip.retro-tooltip-success.retro-tooltip-right::after {
  border-right-color: var(--retro-success);
}
.retro-tooltip.retro-tooltip-warning {
  background: var(--retro-warning);
  color: var(--retro-black);
}
.retro-tooltip.retro-tooltip-warning.retro-tooltip-top::after {
  border-top-color: var(--retro-warning);
}
.retro-tooltip.retro-tooltip-warning.retro-tooltip-bottom::after {
  border-bottom-color: var(--retro-warning);
}
.retro-tooltip.retro-tooltip-warning.retro-tooltip-left::after {
  border-left-color: var(--retro-warning);
}
.retro-tooltip.retro-tooltip-warning.retro-tooltip-right::after {
  border-right-color: var(--retro-warning);
}
.retro-tooltip.retro-tooltip-danger {
  background: var(--retro-danger);
  color: var(--retro-danger-fg);
}
.retro-tooltip.retro-tooltip-danger.retro-tooltip-top::after {
  border-top-color: var(--retro-danger);
}
.retro-tooltip.retro-tooltip-danger.retro-tooltip-bottom::after {
  border-bottom-color: var(--retro-danger);
}
.retro-tooltip.retro-tooltip-danger.retro-tooltip-left::after {
  border-left-color: var(--retro-danger);
}
.retro-tooltip.retro-tooltip-danger.retro-tooltip-right::after {
  border-right-color: var(--retro-danger);
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
.retro-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--retro-spacing-lg) 0;
  font-size: var(--retro-font-size);
  background: var(--retro-list-bg);
  color: var(--retro-list-text);
  border-radius: var(--retro-border-radius);
  box-shadow: 0 1px 4px rgba(var(--retro-shadow-rgb), 0.04);
}
.retro-list li {
  padding: var(--retro-spacing-sm) var(--retro-spacing-md);
  transition: background 0.2s, box-shadow 0.2s;
  border-radius: var(--retro-border-radius);
  position: relative;
  margin-bottom: 2px;
}
.retro-list li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--retro-primary);
  border-radius: 50%;
  margin-inline-end: var(--retro-spacing-md);
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.retro-list ol.retro-list li::before,
.retro-list dl.retro-list li::before {
  content: none;
}
.retro-list .retro-list {
  margin-top: var(--retro-spacing-xs);
  margin-bottom: var(--retro-spacing-xs);
  margin-inline-start: var(--retro-spacing-lg);
  background: none;
  box-shadow: none;
  border-radius: var(--retro-border-radius);
}
.retro-list-bordered {
  border: 1px solid var(--retro-border-medium);
  background: var(--retro-white);
  box-shadow: 0 2px 8px rgba(var(--retro-shadow-rgb), 0.03);
}
.retro-list-bordered li {
  border-bottom: 1px solid var(--retro-border-light);
}
.retro-list-bordered li:last-child {
  border-bottom: none;
}
.retro-list-striped li:nth-child(odd) {
  background-color: var(--retro-light);
}
.retro-list-striped li:nth-child(even) {
  background-color: var(--retro-white);
}
.retro-list-hover li {
  cursor: pointer;
}
.retro-list-hover li:hover, .retro-list-hover li:focus-visible {
  background-color: var(--retro-primary);
  color: var(--retro-primary-fg);
  box-shadow: 0 2px 8px rgba(var(--retro-shadow-rgb), 0.06);
  outline: none;
}

ul.retro-list {
  list-style-type: none;
  padding-inline-start: 0;
}

ol.retro-list {
  list-style: none;
  padding-inline-start: 0;
  counter-reset: retro-ol;
}
ol.retro-list li {
  position: relative;
  padding-inline-start: 2.5em;
  margin-bottom: var(--retro-spacing-sm);
  min-height: 2em;
  counter-increment: retro-ol;
}
ol.retro-list li::before {
  content: counter(retro-ol);
  position: absolute;
  inset-inline-start: 0;
  top: 0.2em;
  width: 2em;
  height: 2em;
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
  font-weight: bold;
  font-family: inherit;
  font-size: 1.1em;
  border-radius: var(--retro-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(var(--retro-shadow-rgb), 0.08);
  border: 2px solid var(--retro-border-dark);
}
ol.retro-list li ol.retro-list {
  margin-top: var(--retro-spacing-xs);
  margin-bottom: var(--retro-spacing-xs);
  margin-inline-start: 2.5em;
  counter-reset: retro-ol-nested;
}
ol.retro-list li ol.retro-list li {
  padding-inline-start: 2em;
  min-height: 1.6em;
  counter-increment: retro-ol-nested;
}
ol.retro-list li ol.retro-list li::before {
  content: counter(retro-ol-nested);
  width: 1.5em;
  height: 1.5em;
  font-size: 0.95em;
  background: var(--retro-success);
  color: var(--retro-success-fg);
  border-radius: var(--retro-border-radius);
  border: 2px solid var(--retro-border-medium);
  top: 0.1em;
}

dl.retro-list dt {
  font-weight: bold;
  margin-top: var(--retro-spacing-sm);
  color: var(--retro-primary-text);
}
dl.retro-list dd {
  margin-inline-start: var(--retro-spacing-md);
  margin-bottom: var(--retro-spacing-sm);
  color: var(--retro-text-muted);
}

/* RetroCSS Carousel/Slider - Oldschool */
.retro-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: var(--retro-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-border-dark);
  font-family: var(--retro-font-mono);
  margin-bottom: 1.5rem;
}

.retro-carousel-track {
  display: flex;
  /* Enable smooth transition between slides */
  transition: transform 0.2s ease-in-out;
  width: 100%;
  /* Fix for older browsers */
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
}

.retro-carousel-slide {
  min-width: 100%;
  flex: 1 0 100%;
  box-sizing: border-box;
  padding: 1rem;
  text-align: center;
  border: 2px solid var(--retro-border-medium);
  background: var(--retro-bg);
  box-shadow: 2px 2px 0 var(--retro-border-light), -2px -2px 0 var(--retro-border-dark);
  margin: 8px;
}

.retro-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--retro-bg);
  color: var(--retro-black);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 2px 2px 0 var(--retro-border-light), -2px -2px 0 var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 2;
  font-size: var(--retro-font-size-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  font-family: var(--retro-font-mono);
  padding: 0;
  /* Add pressed state */
}
.retro-carousel-arrow:active {
  background: var(--retro-border-medium);
  box-shadow: inset 1px 1px 0 var(--retro-border-dark), inset -1px -1px 0 var(--retro-border-light);
  transform: translateY(calc(-50% + 1px));
}

.retro-carousel-arrow.left {
  left: 8px;
}

.retro-carousel-arrow.right {
  right: 8px;
}

.retro-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 8px 0;
  padding-bottom: 8px;
}

.retro-carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--retro-border-radius);
  background: var(--retro-border-medium);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  cursor: pointer;
  transition: background 0.2s;
}
.retro-carousel-dot.active {
  background: var(--retro-primary);
  border-color: var(--retro-border-dark);
  box-shadow: inset 1px 1px 0 var(--retro-border-dark), inset -1px -1px 0 var(--retro-border-light);
}

/* Base Styles */
/**
 * @name Date/Time Input
 * @group components
 * @description
 * Stylized date and time picker inputs with retro design.
 * @example scss
 *   <input type="date" class="retro-input retro-date">
 *   <input type="time" class="retro-input retro-time">
 */
input[type=date].retro-input,
input[type=time].retro-input,
input[type=datetime-local].retro-input {
  appearance: none;
  background-color: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  padding: 4px 8px;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
  color: var(--retro-input-text);
}
input[type=date].retro-input::-webkit-calendar-picker-indicator,
input[type=time].retro-input::-webkit-calendar-picker-indicator,
input[type=datetime-local].retro-input::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  opacity: 0.7;
  cursor: pointer;
}
input[type=date].retro-input::-webkit-calendar-picker-indicator:hover,
input[type=time].retro-input::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local].retro-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
input[type=date].retro-input:focus,
input[type=time].retro-input:focus,
input[type=datetime-local].retro-input:focus {
  outline: none;
  border: 2px solid var(--retro-primary);
  box-shadow: 0 0 0 2px rgba(var(--retro-primary-rgb), 0.2);
}
input[type=date].retro-input:focus-visible,
input[type=time].retro-input:focus-visible,
input[type=datetime-local].retro-input:focus-visible {
  outline: 2px solid var(--retro-primary);
  outline-offset: 2px;
}
input[type=date].retro-input:disabled,
input[type=time].retro-input:disabled,
input[type=datetime-local].retro-input:disabled {
  background-color: var(--retro-light);
  color: var(--retro-text-muted);
  cursor: not-allowed;
}
input[type=date].retro-input.retro-input-lg,
input[type=time].retro-input.retro-input-lg,
input[type=datetime-local].retro-input.retro-input-lg {
  padding: 8px 12px;
  font-size: calc(var(--retro-font-size) * 1.2);
}
input[type=date].retro-input.retro-input-sm,
input[type=time].retro-input.retro-input-sm,
input[type=datetime-local].retro-input.retro-input-sm {
  padding: 2px 6px;
  font-size: calc(var(--retro-font-size) * 0.9);
}

.retro-datetime-group {
  display: flex;
  gap: var(--retro-spacing-sm);
  align-items: center;
}
.retro-datetime-group input[type=date].retro-input,
.retro-datetime-group input[type=time].retro-input {
  flex: 1;
  min-width: 0;
}
.retro-datetime-group .retro-datetime-separator {
  font-weight: bold;
  color: var(--retro-border-dark);
}

[data-theme=dark] input[type=date].retro-input,
[data-theme=dark] input[type=time].retro-input,
[data-theme=dark] input[type=datetime-local].retro-input {
  background-color: var(--retro-input-bg);
  color: var(--retro-input-text);
}
[data-theme=dark] input[type=date].retro-input::-webkit-calendar-picker-indicator,
[data-theme=dark] input[type=time].retro-input::-webkit-calendar-picker-indicator,
[data-theme=dark] input[type=datetime-local].retro-input::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

/**
 * @name Infinite Scroll
 * @group components
 * @description
 * Component for loading content as the user scrolls down.
 * @example scss
 *   <div class="retro-infinite-scroll">
 *     <!-- Content will be loaded here -->
 *     <div class="retro-infinite-loader">
 *       <div class="retro-spinner"></div>
 *     </div>
 *   </div>
 */
.retro-infinite-scroll {
  position: relative;
  overflow-y: auto;
  max-height: 400px;
  padding: var(--retro-spacing-md);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  background-color: var(--retro-light);
}
.retro-infinite-scroll.retro-h-75 {
  height: 400px;
}

.retro-infinite-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--retro-border-medium);
  background: var(--retro-bg);
  color: var(--retro-black);
  box-shadow: 1px 1px 0 var(--retro-border-light);
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}

.retro-infinite-item:hover {
  background: var(--retro-border-light);
  color: var(--retro-primary-text);
}

.retro-infinite-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--retro-spacing-md);
  margin: var(--retro-spacing-md) 0;
}

.retro-spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid var(--retro-border-medium);
  border-radius: 50%;
  border-top-color: var(--retro-primary);
  animation: retro-spin 1s linear infinite;
}

@keyframes retro-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.retro-infinite-end {
  text-align: center;
  padding: var(--retro-spacing-md);
  font-style: italic;
  color: var(--retro-border-medium);
  border-top: 1px dashed var(--retro-border-medium);
  margin-top: var(--retro-spacing-md);
}

.retro-ascii-loader {
  letter-spacing: 2px;
  background: var(--retro-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: 2px 2px 8px rgba(var(--retro-shadow-rgb), 0.12), 1px 1px 0 var(--retro-border-light);
  padding: 4px 16px;
  border-radius: var(--retro-border-radius);
  filter: blur(0.2px);
  font-weight: bold;
}

@keyframes retro-ascii-dots {
  0% {
    content: ".";
  }
  25% {
    content: "..";
  }
  50% {
    content: "...";
  }
  75% {
    content: "....";
  }
  100% {
    content: ".";
  }
}
[data-theme=dark] .retro-infinite-scroll {
  background-color: var(--retro-bg);
}
[data-theme=dark] .retro-spinner {
  border-color: var(--retro-border-medium);
  border-top-color: var(--retro-primary);
}

.retro-sidebar {
  background: var(--retro-sidebar-bg);
  border: 2px solid var(--retro-border-dark);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
  border-radius: var(--retro-border-radius);
  padding: var(--retro-spacing-md, 16px);
  width: 100%;
  height: auto;
  position: static;
  transition: transform 0.3s ease, left 0.3s ease, width 0.3s ease;
  color: var(--retro-sidebar-text);
}
.retro-sidebar > * + * {
  margin-top: var(--retro-spacing-md);
}
.retro-sidebar-header {
  margin: calc(var(--retro-spacing-md) * -1) calc(var(--retro-spacing-md) * -1) var(--retro-spacing-md);
  padding: var(--retro-spacing-xs) var(--retro-spacing-sm);
  background: linear-gradient(to bottom, var(--retro-primary) 0%, var(--retro-primary-hover) 100%);
  color: var(--retro-primary-fg);
  font-weight: var(--retro-font-weight-bold);
  font-size: var(--retro-font-size-sm);
  border-bottom: 2px solid var(--retro-border-dark);
  position: sticky;
  top: calc(var(--retro-spacing-md) * -1);
  z-index: 2;
}
.retro-sidebar-section {
  margin-bottom: var(--retro-spacing-md, 16px);
}
.retro-sidebar-section-title {
  font-weight: bold;
  margin-bottom: var(--retro-spacing-xs, 4px);
  font-size: var(--retro-font-size-sm);
  color: var(--retro-text-muted);
}
.retro-sidebar .retro-nav-vertical,
.retro-sidebar .retro-list {
  width: 100%;
  max-width: none;
  border: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
}
.retro-sidebar .retro-nav-vertical .retro-nav-item {
  padding: var(--retro-spacing-xs) var(--retro-spacing-sm);
  font-size: var(--retro-font-size-sm);
  background: transparent;
}
.retro-sidebar .retro-nav-vertical .retro-nav-item:hover {
  background: var(--retro-light);
}
.retro-sidebar .retro-nav-vertical .retro-nav-item.active,
.retro-sidebar .retro-nav-vertical .retro-nav-item[aria-current]:not([aria-current=false]) {
  background: var(--retro-primary);
  color: var(--retro-primary-fg);
}
.retro-sidebar .active {
  font-weight: bold;
  color: var(--retro-primary-text);
}
.retro-sidebar ul, .retro-sidebar ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.retro-sidebar ul li, .retro-sidebar ol li {
  margin-bottom: 0;
}
.retro-sidebar ul li ul, .retro-sidebar ul li ol, .retro-sidebar ol li ul, .retro-sidebar ol li ol {
  padding-inline-start: 16px;
  margin-top: 0;
}
@media (min-width: 768px) {
  .retro-sidebar {
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    top: var(--retro-spacing-md);
    max-height: calc(100vh - var(--retro-spacing-xl));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.retro-sidebar {
  scrollbar-width: auto;
  scrollbar-color: var(--retro-light) var(--retro-bg);
}
.retro-sidebar::-webkit-scrollbar {
  width: 16px;
}
.retro-sidebar::-webkit-scrollbar-track {
  background: var(--retro-bg);
  border-inline-start: 1px solid var(--retro-border-medium);
}
.retro-sidebar::-webkit-scrollbar-thumb {
  background: var(--retro-light);
  border: 1px solid var(--retro-border-dark);
  box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
}
.retro-sidebar::-webkit-scrollbar-thumb:active {
  box-shadow: inset 1px 1px 0 var(--retro-border-medium), inset -1px -1px 0 var(--retro-border-light);
}
.retro-sidebar::-webkit-scrollbar-corner {
  background: var(--retro-bg);
}

.retro-sidebar nav ul {
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
}

.retro-sidebar-group {
  margin: 0;
  padding: var(--retro-spacing-xs) var(--retro-spacing-md);
  font-size: var(--retro-font-size-xs);
  font-weight: var(--retro-font-weight-bold);
  text-transform: uppercase;
  color: var(--retro-text-muted);
  background: var(--retro-bg);
  border-top: 1px solid var(--retro-border-medium);
  border-bottom: 1px solid var(--retro-border-medium);
}

.retro-sidebar .retro-sidebar-group {
  margin-inline: calc(var(--retro-spacing-md) * -1);
}

.retro-sidebar > *:first-child .retro-sidebar-group:first-child,
.retro-sidebar-header + * .retro-sidebar-group:first-child {
  border-top: 0;
}

.retro-sidebar .retro-sidebar-section,
.retro-nav-vertical .retro-sidebar-section {
  margin-bottom: 0;
}

/* Utilities */
/**
 * @name Accessibility Utilities
 * @group utilities
 * @description
 * Helpers for content that must reach assistive technology without being
 * visible, and for the keyboard affordances that go with them.
 */
.retro-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.retro-sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.retro-sr-only-focusable:focus {
  position: static;
  z-index: var(--retro-z-index-fixed);
  padding: var(--retro-spacing-sm) var(--retro-spacing-md);
  background: var(--retro-bg);
  color: var(--retro-text);
  border: var(--retro-border-width-thick) solid var(--retro-border-dark);
  box-shadow: var(--retro-box-shadow-outset-button);
}

/**
 * @name Spacing Utilities
 * @group utilities
 * @description
 * Margin and padding on a numeric scale. Every page in this repo already used
 * the `retro-` prefixed names (retro-mt-5, retro-p-4); only the unprefixed
 * ones existed, so none of them did anything.
 *
 * Scale: 0=0  1=4px  2=8px  3=12px  4=16px  5=24px  6=32px  7=40px  8=48px
 * @example html
 *   <div class="retro-mt-4 retro-px-5">…</div>
 */
.retro-m-0 {
  margin: 0 !important;
}

.retro-mt-0 {
  margin-top: 0 !important;
}

.retro-mb-0 {
  margin-bottom: 0 !important;
}

.retro-ml-0 {
  margin-left: 0 !important;
}

.retro-mr-0 {
  margin-right: 0 !important;
}

.retro-mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.retro-my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.retro-p-0 {
  padding: 0 !important;
}

.retro-pt-0 {
  padding-top: 0 !important;
}

.retro-pb-0 {
  padding-bottom: 0 !important;
}

.retro-pl-0 {
  padding-left: 0 !important;
}

.retro-pr-0 {
  padding-right: 0 !important;
}

.retro-px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.retro-py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.retro-gap-0 {
  gap: 0 !important;
}

.retro-m-1 {
  margin: 4px !important;
}

.retro-mt-1 {
  margin-top: 4px !important;
}

.retro-mb-1 {
  margin-bottom: 4px !important;
}

.retro-ml-1 {
  margin-left: 4px !important;
}

.retro-mr-1 {
  margin-right: 4px !important;
}

.retro-mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.retro-my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.retro-p-1 {
  padding: 4px !important;
}

.retro-pt-1 {
  padding-top: 4px !important;
}

.retro-pb-1 {
  padding-bottom: 4px !important;
}

.retro-pl-1 {
  padding-left: 4px !important;
}

.retro-pr-1 {
  padding-right: 4px !important;
}

.retro-px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.retro-py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.retro-gap-1 {
  gap: 4px !important;
}

.retro-m-2 {
  margin: 8px !important;
}

.retro-mt-2 {
  margin-top: 8px !important;
}

.retro-mb-2 {
  margin-bottom: 8px !important;
}

.retro-ml-2 {
  margin-left: 8px !important;
}

.retro-mr-2 {
  margin-right: 8px !important;
}

.retro-mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.retro-my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.retro-p-2 {
  padding: 8px !important;
}

.retro-pt-2 {
  padding-top: 8px !important;
}

.retro-pb-2 {
  padding-bottom: 8px !important;
}

.retro-pl-2 {
  padding-left: 8px !important;
}

.retro-pr-2 {
  padding-right: 8px !important;
}

.retro-px-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.retro-py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.retro-gap-2 {
  gap: 8px !important;
}

.retro-m-3 {
  margin: 12px !important;
}

.retro-mt-3 {
  margin-top: 12px !important;
}

.retro-mb-3 {
  margin-bottom: 12px !important;
}

.retro-ml-3 {
  margin-left: 12px !important;
}

.retro-mr-3 {
  margin-right: 12px !important;
}

.retro-mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.retro-my-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.retro-p-3 {
  padding: 12px !important;
}

.retro-pt-3 {
  padding-top: 12px !important;
}

.retro-pb-3 {
  padding-bottom: 12px !important;
}

.retro-pl-3 {
  padding-left: 12px !important;
}

.retro-pr-3 {
  padding-right: 12px !important;
}

.retro-px-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.retro-py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.retro-gap-3 {
  gap: 12px !important;
}

.retro-m-4 {
  margin: 16px !important;
}

.retro-mt-4 {
  margin-top: 16px !important;
}

.retro-mb-4 {
  margin-bottom: 16px !important;
}

.retro-ml-4 {
  margin-left: 16px !important;
}

.retro-mr-4 {
  margin-right: 16px !important;
}

.retro-mx-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.retro-my-4 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.retro-p-4 {
  padding: 16px !important;
}

.retro-pt-4 {
  padding-top: 16px !important;
}

.retro-pb-4 {
  padding-bottom: 16px !important;
}

.retro-pl-4 {
  padding-left: 16px !important;
}

.retro-pr-4 {
  padding-right: 16px !important;
}

.retro-px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.retro-py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.retro-gap-4 {
  gap: 16px !important;
}

.retro-m-5 {
  margin: 24px !important;
}

.retro-mt-5 {
  margin-top: 24px !important;
}

.retro-mb-5 {
  margin-bottom: 24px !important;
}

.retro-ml-5 {
  margin-left: 24px !important;
}

.retro-mr-5 {
  margin-right: 24px !important;
}

.retro-mx-5 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.retro-my-5 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.retro-p-5 {
  padding: 24px !important;
}

.retro-pt-5 {
  padding-top: 24px !important;
}

.retro-pb-5 {
  padding-bottom: 24px !important;
}

.retro-pl-5 {
  padding-left: 24px !important;
}

.retro-pr-5 {
  padding-right: 24px !important;
}

.retro-px-5 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.retro-py-5 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.retro-gap-5 {
  gap: 24px !important;
}

.retro-m-6 {
  margin: 32px !important;
}

.retro-mt-6 {
  margin-top: 32px !important;
}

.retro-mb-6 {
  margin-bottom: 32px !important;
}

.retro-ml-6 {
  margin-left: 32px !important;
}

.retro-mr-6 {
  margin-right: 32px !important;
}

.retro-mx-6 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.retro-my-6 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.retro-p-6 {
  padding: 32px !important;
}

.retro-pt-6 {
  padding-top: 32px !important;
}

.retro-pb-6 {
  padding-bottom: 32px !important;
}

.retro-pl-6 {
  padding-left: 32px !important;
}

.retro-pr-6 {
  padding-right: 32px !important;
}

.retro-px-6 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.retro-py-6 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.retro-gap-6 {
  gap: 32px !important;
}

.retro-m-7 {
  margin: 40px !important;
}

.retro-mt-7 {
  margin-top: 40px !important;
}

.retro-mb-7 {
  margin-bottom: 40px !important;
}

.retro-ml-7 {
  margin-left: 40px !important;
}

.retro-mr-7 {
  margin-right: 40px !important;
}

.retro-mx-7 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.retro-my-7 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.retro-p-7 {
  padding: 40px !important;
}

.retro-pt-7 {
  padding-top: 40px !important;
}

.retro-pb-7 {
  padding-bottom: 40px !important;
}

.retro-pl-7 {
  padding-left: 40px !important;
}

.retro-pr-7 {
  padding-right: 40px !important;
}

.retro-px-7 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.retro-py-7 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.retro-gap-7 {
  gap: 40px !important;
}

.retro-m-8 {
  margin: 48px !important;
}

.retro-mt-8 {
  margin-top: 48px !important;
}

.retro-mb-8 {
  margin-bottom: 48px !important;
}

.retro-ml-8 {
  margin-left: 48px !important;
}

.retro-mr-8 {
  margin-right: 48px !important;
}

.retro-mx-8 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.retro-my-8 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.retro-p-8 {
  padding: 48px !important;
}

.retro-pt-8 {
  padding-top: 48px !important;
}

.retro-pb-8 {
  padding-bottom: 48px !important;
}

.retro-pl-8 {
  padding-left: 48px !important;
}

.retro-pr-8 {
  padding-right: 48px !important;
}

.retro-px-8 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.retro-py-8 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.retro-gap-8 {
  gap: 48px !important;
}

.retro-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.retro-ml-auto {
  margin-left: auto !important;
}

.retro-mr-auto {
  margin-right: auto !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.ml-1 {
  margin-left: 4px !important;
}

.mr-1 {
  margin-right: 4px !important;
}

.mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.pt-1 {
  padding-top: 4px !important;
}

.pb-1 {
  padding-bottom: 4px !important;
}

.pl-1 {
  padding-left: 4px !important;
}

.pr-1 {
  padding-right: 4px !important;
}

.px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.ml-2 {
  margin-left: 8px !important;
}

.mr-2 {
  margin-right: 8px !important;
}

.mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.pt-2 {
  padding-top: 8px !important;
}

.pb-2 {
  padding-bottom: 8px !important;
}

.pl-2 {
  padding-left: 8px !important;
}

.pr-2 {
  padding-right: 8px !important;
}

.px-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.ml-3 {
  margin-left: 12px !important;
}

.mr-3 {
  margin-right: 12px !important;
}

.mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.my-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.pt-3 {
  padding-top: 12px !important;
}

.pb-3 {
  padding-bottom: 12px !important;
}

.pl-3 {
  padding-left: 12px !important;
}

.pr-3 {
  padding-right: 12px !important;
}

.px-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.mt-4 {
  margin-top: 16px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

.ml-4 {
  margin-left: 16px !important;
}

.mr-4 {
  margin-right: 16px !important;
}

.mx-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.my-4 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.pt-4 {
  padding-top: 16px !important;
}

.pb-4 {
  padding-bottom: 16px !important;
}

.pl-4 {
  padding-left: 16px !important;
}

.pr-4 {
  padding-right: 16px !important;
}

.px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.mt-5 {
  margin-top: 20px !important;
}

.mb-5 {
  margin-bottom: 20px !important;
}

.ml-5 {
  margin-left: 20px !important;
}

.mr-5 {
  margin-right: 20px !important;
}

.mx-5 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.my-5 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.pt-5 {
  padding-top: 20px !important;
}

.pb-5 {
  padding-bottom: 20px !important;
}

.pl-5 {
  padding-left: 20px !important;
}

.pr-5 {
  padding-right: 20px !important;
}

.px-5 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.py-5 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/**
 * @name Flexbox & Display Utilities
 * @group utilities
 * @description
 * The grid utilities shipped gap/justify/align, but the flex primitives the
 * demo pages leaned on (retro-flex, retro-items-center, retro-flex-1) did not
 * exist, so those layouts fell back to plain block flow.
 */
.retro-block {
  display: block !important;
}

.retro-inline-block {
  display: inline-block !important;
}

.retro-inline {
  display: inline !important;
}

.retro-hidden {
  display: none !important;
}

.retro-flex {
  display: flex !important;
}

.retro-inline-flex {
  display: inline-flex !important;
}

.retro-flex-row {
  flex-direction: row !important;
}

.retro-flex-col {
  flex-direction: column !important;
}

.retro-flex-wrap {
  flex-wrap: wrap !important;
}

.retro-flex-nowrap {
  flex-wrap: nowrap !important;
}

.retro-flex-1 {
  flex: 1 1 0% !important;
  min-width: 0;
}

.retro-flex-auto {
  flex: 1 1 auto !important;
  min-width: 0;
}

.retro-flex-none {
  flex: none !important;
}

.retro-grow {
  flex-grow: 1 !important;
}

.retro-shrink-0 {
  flex-shrink: 0 !important;
}

.retro-items-start {
  align-items: flex-start !important;
}

.retro-items-center {
  align-items: center !important;
}

.retro-items-end {
  align-items: flex-end !important;
}

.retro-items-stretch {
  align-items: stretch !important;
}

.retro-items-baseline {
  align-items: baseline !important;
}

.retro-justify-between {
  justify-content: space-between !important;
}

.retro-justify-around {
  justify-content: space-around !important;
}

.retro-justify-evenly {
  justify-content: space-evenly !important;
}

.retro-self-start {
  align-self: flex-start !important;
}

.retro-self-center {
  align-self: center !important;
}

.retro-self-end {
  align-self: flex-end !important;
}

.retro-relative {
  position: relative !important;
}

.retro-absolute {
  position: absolute !important;
}

.retro-sticky {
  position: sticky !important;
}

/**
 * @name Sizing Utilities
 * @group utilities
 */
.retro-w-full {
  width: 100% !important;
}

.retro-w-auto {
  width: auto !important;
}

.retro-h-full {
  height: 100% !important;
}

.retro-max-w-full {
  max-width: 100% !important;
}

.retro-min-w-0 {
  min-width: 0 !important;
}

.retro-box-border {
  box-sizing: border-box !important;
}

.retro-max-w-40 {
  max-width: 160px !important;
}

.retro-min-w-40 {
  min-width: 160px !important;
}

.retro-max-w-50 {
  max-width: 200px !important;
}

.retro-min-w-50 {
  min-width: 200px !important;
}

.retro-max-w-56 {
  max-width: 224px !important;
}

.retro-min-w-56 {
  min-width: 224px !important;
}

.retro-max-w-72 {
  max-width: 288px !important;
}

.retro-min-w-72 {
  min-width: 288px !important;
}

.retro-max-w-80 {
  max-width: 320px !important;
}

.retro-min-w-80 {
  min-width: 320px !important;
}

.retro-max-w-96 {
  max-width: 384px !important;
}

.retro-min-w-96 {
  min-width: 384px !important;
}

.retro-max-w-100 {
  max-width: 400px !important;
}

.retro-min-w-100 {
  min-width: 400px !important;
}

.retro-max-w-120 {
  max-width: 480px !important;
}

.retro-min-w-120 {
  min-width: 480px !important;
}

.retro-max-w-prose {
  max-width: var(--retro-measure) !important;
}

.retro-max-w-sm {
  max-width: var(--retro-container-sm) !important;
}

.retro-max-w-md {
  max-width: var(--retro-container-md) !important;
}

.retro-max-w-lg {
  max-width: var(--retro-container-lg) !important;
}

.retro-max-w-xl {
  max-width: var(--retro-container-xl) !important;
}

.retro-max-w-xxl {
  max-width: var(--retro-container-xxl) !important;
}

/**
 * @name Colour Utilities
 * @group utilities
 * @description
 * Background, text and border helpers built on the 2.0 token tiers.
 *
 * `retro-bg-<hue>` sets the fill **and** its matching on-fill text colour, so a
 * filled surface is legible in both themes without a second class. That pairing
 * is what the accessibility gate verifies, so these are AA by construction.
 *
 * `retro-bg-<hue>-subtle` is a low-alpha tint of the same hue for callout
 * panels; it keeps the normal body text colour on top.
 * @example html
 *   <div class="retro-bg-primary retro-p-4">Readable in both themes</div>
 *   <div class="retro-bg-success-subtle retro-p-4">Tinted callout</div>
 */
.retro-bg-primary {
  background-color: var(--retro-primary) !important;
  color: var(--retro-primary-fg) !important;
}
.retro-bg-primary h1, .retro-bg-primary h2, .retro-bg-primary h3, .retro-bg-primary h4, .retro-bg-primary h5, .retro-bg-primary h6 {
  color: inherit;
}

.retro-bg-primary-subtle {
  background-color: rgba(var(--retro-primary-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-primary-lightest {
  background-color: rgba(var(--retro-primary-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-primary {
  border-color: var(--retro-primary) !important;
}

.retro-bg-success {
  background-color: var(--retro-success) !important;
  color: var(--retro-success-fg) !important;
}
.retro-bg-success h1, .retro-bg-success h2, .retro-bg-success h3, .retro-bg-success h4, .retro-bg-success h5, .retro-bg-success h6 {
  color: inherit;
}

.retro-bg-success-subtle {
  background-color: rgba(var(--retro-success-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-success-lightest {
  background-color: rgba(var(--retro-success-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-success {
  border-color: var(--retro-success) !important;
}

.retro-bg-danger {
  background-color: var(--retro-danger) !important;
  color: var(--retro-danger-fg) !important;
}
.retro-bg-danger h1, .retro-bg-danger h2, .retro-bg-danger h3, .retro-bg-danger h4, .retro-bg-danger h5, .retro-bg-danger h6 {
  color: inherit;
}

.retro-bg-danger-subtle {
  background-color: rgba(var(--retro-danger-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-danger-lightest {
  background-color: rgba(var(--retro-danger-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-danger {
  border-color: var(--retro-danger) !important;
}

.retro-bg-warning {
  background-color: var(--retro-warning) !important;
  color: var(--retro-warning-fg) !important;
}
.retro-bg-warning h1, .retro-bg-warning h2, .retro-bg-warning h3, .retro-bg-warning h4, .retro-bg-warning h5, .retro-bg-warning h6 {
  color: inherit;
}

.retro-bg-warning-subtle {
  background-color: rgba(var(--retro-warning-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-warning-lightest {
  background-color: rgba(var(--retro-warning-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-warning {
  border-color: var(--retro-warning) !important;
}

.retro-bg-info {
  background-color: var(--retro-info) !important;
  color: var(--retro-info-fg) !important;
}
.retro-bg-info h1, .retro-bg-info h2, .retro-bg-info h3, .retro-bg-info h4, .retro-bg-info h5, .retro-bg-info h6 {
  color: inherit;
}

.retro-bg-info-subtle {
  background-color: rgba(var(--retro-info-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-info-lightest {
  background-color: rgba(var(--retro-info-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-info {
  border-color: var(--retro-info) !important;
}

.retro-bg-teal {
  background-color: var(--retro-teal) !important;
  color: var(--retro-teal-fg) !important;
}
.retro-bg-teal h1, .retro-bg-teal h2, .retro-bg-teal h3, .retro-bg-teal h4, .retro-bg-teal h5, .retro-bg-teal h6 {
  color: inherit;
}

.retro-bg-teal-subtle {
  background-color: rgba(var(--retro-teal-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-teal-lightest {
  background-color: rgba(var(--retro-teal-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-teal {
  border-color: var(--retro-teal) !important;
}

.retro-bg-tan {
  background-color: var(--retro-tan) !important;
  color: var(--retro-tan-fg) !important;
}
.retro-bg-tan h1, .retro-bg-tan h2, .retro-bg-tan h3, .retro-bg-tan h4, .retro-bg-tan h5, .retro-bg-tan h6 {
  color: inherit;
}

.retro-bg-tan-subtle {
  background-color: rgba(var(--retro-tan-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-tan-lightest {
  background-color: rgba(var(--retro-tan-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-tan {
  border-color: var(--retro-tan) !important;
}

.retro-bg-pink {
  background-color: var(--retro-pink) !important;
  color: var(--retro-pink-fg) !important;
}
.retro-bg-pink h1, .retro-bg-pink h2, .retro-bg-pink h3, .retro-bg-pink h4, .retro-bg-pink h5, .retro-bg-pink h6 {
  color: inherit;
}

.retro-bg-pink-subtle {
  background-color: rgba(var(--retro-pink-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-pink-lightest {
  background-color: rgba(var(--retro-pink-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-pink {
  border-color: var(--retro-pink) !important;
}

.retro-bg-lime {
  background-color: var(--retro-lime) !important;
  color: var(--retro-lime-fg) !important;
}
.retro-bg-lime h1, .retro-bg-lime h2, .retro-bg-lime h3, .retro-bg-lime h4, .retro-bg-lime h5, .retro-bg-lime h6 {
  color: inherit;
}

.retro-bg-lime-subtle {
  background-color: rgba(var(--retro-lime-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-lime-lightest {
  background-color: rgba(var(--retro-lime-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-lime {
  border-color: var(--retro-lime) !important;
}

.retro-bg-cyan {
  background-color: var(--retro-cyan) !important;
  color: var(--retro-cyan-fg) !important;
}
.retro-bg-cyan h1, .retro-bg-cyan h2, .retro-bg-cyan h3, .retro-bg-cyan h4, .retro-bg-cyan h5, .retro-bg-cyan h6 {
  color: inherit;
}

.retro-bg-cyan-subtle {
  background-color: rgba(var(--retro-cyan-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-cyan-lightest {
  background-color: rgba(var(--retro-cyan-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-cyan {
  border-color: var(--retro-cyan) !important;
}

.retro-bg-orange {
  background-color: var(--retro-orange) !important;
  color: var(--retro-orange-fg) !important;
}
.retro-bg-orange h1, .retro-bg-orange h2, .retro-bg-orange h3, .retro-bg-orange h4, .retro-bg-orange h5, .retro-bg-orange h6 {
  color: inherit;
}

.retro-bg-orange-subtle {
  background-color: rgba(var(--retro-orange-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-orange-lightest {
  background-color: rgba(var(--retro-orange-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-orange {
  border-color: var(--retro-orange) !important;
}

.retro-bg-brown {
  background-color: var(--retro-brown) !important;
  color: var(--retro-brown-fg) !important;
}
.retro-bg-brown h1, .retro-bg-brown h2, .retro-bg-brown h3, .retro-bg-brown h4, .retro-bg-brown h5, .retro-bg-brown h6 {
  color: inherit;
}

.retro-bg-brown-subtle {
  background-color: rgba(var(--retro-brown-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-brown-lightest {
  background-color: rgba(var(--retro-brown-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-brown {
  border-color: var(--retro-brown) !important;
}

.retro-bg-violet {
  background-color: var(--retro-violet) !important;
  color: var(--retro-violet-fg) !important;
}
.retro-bg-violet h1, .retro-bg-violet h2, .retro-bg-violet h3, .retro-bg-violet h4, .retro-bg-violet h5, .retro-bg-violet h6 {
  color: inherit;
}

.retro-bg-violet-subtle {
  background-color: rgba(var(--retro-violet-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-violet-lightest {
  background-color: rgba(var(--retro-violet-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-violet {
  border-color: var(--retro-violet) !important;
}

.retro-bg-gray {
  background-color: var(--retro-gray) !important;
  color: var(--retro-gray-fg) !important;
}
.retro-bg-gray h1, .retro-bg-gray h2, .retro-bg-gray h3, .retro-bg-gray h4, .retro-bg-gray h5, .retro-bg-gray h6 {
  color: inherit;
}

.retro-bg-gray-subtle {
  background-color: rgba(var(--retro-gray-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-gray-lightest {
  background-color: rgba(var(--retro-gray-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-gray {
  border-color: var(--retro-gray) !important;
}

.retro-bg-maroon {
  background-color: var(--retro-maroon) !important;
  color: var(--retro-maroon-fg) !important;
}
.retro-bg-maroon h1, .retro-bg-maroon h2, .retro-bg-maroon h3, .retro-bg-maroon h4, .retro-bg-maroon h5, .retro-bg-maroon h6 {
  color: inherit;
}

.retro-bg-maroon-subtle {
  background-color: rgba(var(--retro-maroon-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-maroon-lightest {
  background-color: rgba(var(--retro-maroon-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-maroon {
  border-color: var(--retro-maroon) !important;
}

.retro-bg-gold {
  background-color: var(--retro-gold) !important;
  color: var(--retro-gold-fg) !important;
}
.retro-bg-gold h1, .retro-bg-gold h2, .retro-bg-gold h3, .retro-bg-gold h4, .retro-bg-gold h5, .retro-bg-gold h6 {
  color: inherit;
}

.retro-bg-gold-subtle {
  background-color: rgba(var(--retro-gold-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-gold-lightest {
  background-color: rgba(var(--retro-gold-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-gold {
  border-color: var(--retro-gold) !important;
}

.retro-bg-navy {
  background-color: var(--retro-navy) !important;
  color: var(--retro-navy-fg) !important;
}
.retro-bg-navy h1, .retro-bg-navy h2, .retro-bg-navy h3, .retro-bg-navy h4, .retro-bg-navy h5, .retro-bg-navy h6 {
  color: inherit;
}

.retro-bg-navy-subtle {
  background-color: rgba(var(--retro-navy-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-navy-lightest {
  background-color: rgba(var(--retro-navy-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-navy {
  border-color: var(--retro-navy) !important;
}

.retro-bg-olive {
  background-color: var(--retro-olive) !important;
  color: var(--retro-olive-fg) !important;
}
.retro-bg-olive h1, .retro-bg-olive h2, .retro-bg-olive h3, .retro-bg-olive h4, .retro-bg-olive h5, .retro-bg-olive h6 {
  color: inherit;
}

.retro-bg-olive-subtle {
  background-color: rgba(var(--retro-olive-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-olive-lightest {
  background-color: rgba(var(--retro-olive-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-olive {
  border-color: var(--retro-olive) !important;
}

.retro-bg-silver {
  background-color: var(--retro-silver) !important;
  color: var(--retro-silver-fg) !important;
}
.retro-bg-silver h1, .retro-bg-silver h2, .retro-bg-silver h3, .retro-bg-silver h4, .retro-bg-silver h5, .retro-bg-silver h6 {
  color: inherit;
}

.retro-bg-silver-subtle {
  background-color: rgba(var(--retro-silver-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-bg-silver-lightest {
  background-color: rgba(var(--retro-silver-rgb), 0.14) !important;
  color: var(--retro-text) !important;
}

.retro-border-silver {
  border-color: var(--retro-silver) !important;
}

/* Surfaces */
.retro-bg-body {
  background-color: var(--retro-body-bg) !important;
  color: var(--retro-text) !important;
}

.retro-body-bg {
  background-color: var(--retro-body-bg) !important;
}

.retro-bg-surface,
.retro-bg-white {
  background-color: var(--retro-bg) !important;
  color: var(--retro-text) !important;
}

.retro-bg-light,
.retro-bg-lightest {
  background-color: var(--retro-light) !important;
  color: var(--retro-text) !important;
}

.retro-bg-dark {
  background-color: var(--retro-body-bg-dark) !important;
  color: #fff !important;
}
.retro-bg-dark h1, .retro-bg-dark h2, .retro-bg-dark h3, .retro-bg-dark h4, .retro-bg-dark h5, .retro-bg-dark h6 {
  color: inherit;
}

.retro-bg-transparent {
  background-color: transparent !important;
}

/* Text */
.retro-text-body {
  color: var(--retro-text) !important;
}

.retro-text-muted,
.retro-text-secondary {
  color: var(--retro-text-muted) !important;
}

.retro-text-white,
.retro-text-inverse {
  color: var(--retro-text-inverse) !important;
}

.retro-text-left {
  text-align: left !important;
}

.retro-text-center {
  text-align: center !important;
}

.retro-text-right {
  text-align: right !important;
}

.retro-font-normal {
  font-weight: var(--retro-font-weight-normal) !important;
}

.retro-font-medium {
  font-weight: var(--retro-font-weight-medium) !important;
}

.retro-font-bold {
  font-weight: var(--retro-font-weight-bold) !important;
}

.retro-text-2xl {
  font-size: var(--retro-font-size-2xl) !important;
}

.retro-text-3xl {
  font-size: var(--retro-font-size-3xl) !important;
}

/* Borders */
.retro-border {
  border: var(--retro-border-width) solid var(--retro-border-dark) !important;
}

.retro-border-2 {
  border: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
}

.retro-border-0 {
  border: 0 !important;
}

.retro-border-t-0 {
  border-top: 0 !important;
}

.retro-border-b-0 {
  border-bottom: 0 !important;
}

.retro-border-top {
  border-top: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
}

.retro-border-bottom {
  border-bottom: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
}

.retro-border-left {
  border-left: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
}

.retro-border-right {
  border-right: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
}

.retro-border-black {
  border-color: var(--retro-border-dark) !important;
}

.retro-border-gray {
  border-color: var(--retro-border-medium) !important;
}

.retro-border-light {
  border-color: var(--retro-border-light) !important;
}

.retro-border-muted {
  border-color: var(--retro-text-muted) !important;
}

/**
 * @name Effect Utilities
 * @group utilities
 * @description
 * Bevels and shadows. The Win9x look is built from hard-edged insets rather
 * than soft blur, so `retro-raised` / `retro-sunken` are usually what you want;
 * the `retro-shadow-*` scale is there for depth on floating surfaces.
 */
.retro-raised {
  box-shadow: var(--retro-border-raised) !important;
}

.retro-sunken {
  box-shadow: var(--retro-border-sunken) !important;
}

.retro-shadow-none {
  box-shadow: none !important;
}

.retro-shadow-sm {
  box-shadow: var(--retro-box-shadow-subtle) !important;
}

.retro-shadow-md {
  box-shadow: var(--retro-box-shadow-medium) !important;
}

.retro-shadow-lg {
  box-shadow: 3px 3px 0 var(--retro-border-medium), 0 4px 12px rgba(var(--retro-shadow-rgb), 0.18) !important;
}

.retro-rounded {
  border-radius: 4px !important;
}

.retro-rounded-lg {
  border-radius: 8px !important;
}

.retro-rounded-full {
  border-radius: 9999px !important;
}

.retro-rounded-none {
  border-radius: 0 !important;
}

.retro-overflow-hidden {
  overflow: hidden !important;
}

.retro-overflow-auto {
  overflow: auto !important;
}

.retro-overflow-x-auto {
  overflow-x: auto !important;
}

/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* RetroCSS Grid System
 * A modern, flexible grid system using CSS Grid
 */
.retro-grid {
  display: grid;
  gap: var(--retro-grid-gap, 1rem);
  width: 100%;
}

.retro-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.retro-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.retro-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.retro-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.retro-grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.retro-grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.retro-grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.retro-grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.retro-grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.retro-grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.retro-grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.retro-grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.retro-grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.retro-grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.retro-grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.retro-grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.retro-grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.retro-grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.retro-grid-rows-7 {
  grid-template-rows: repeat(7, minmax(0, 1fr));
}

.retro-grid-rows-8 {
  grid-template-rows: repeat(8, minmax(0, 1fr));
}

.retro-grid-rows-9 {
  grid-template-rows: repeat(9, minmax(0, 1fr));
}

.retro-grid-rows-10 {
  grid-template-rows: repeat(10, minmax(0, 1fr));
}

.retro-grid-rows-11 {
  grid-template-rows: repeat(11, minmax(0, 1fr));
}

.retro-grid-rows-12 {
  grid-template-rows: repeat(12, minmax(0, 1fr));
}

.retro-grid-auto-cols {
  grid-auto-columns: auto;
}

.retro-grid-auto-rows {
  grid-auto-rows: auto;
}

.retro-grid-flow-row {
  grid-auto-flow: row;
}

.retro-grid-flow-col {
  grid-auto-flow: column;
}

.retro-grid-flow-dense {
  grid-auto-flow: dense;
}

.retro-grid-areas {
  grid-template-areas: var(--retro-grid-areas, none);
}

.retro-col-span {
  grid-column: var(--retro-col-span, auto);
}

.retro-row-span {
  grid-row: var(--retro-row-span, auto);
}

@media (min-width: 0) {
  .xs\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .xs\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 576px) {
  .sm\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .sm\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .md\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .md\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .lg\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .lg\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .xl\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .xl\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1400px) {
  .xxl\:retro-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .xxl\:retro-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
.retro-gap-0 {
  gap: 0;
}

.retro-gap-1 {
  gap: 0.25rem;
}

.retro-gap-2 {
  gap: 0.5rem;
}

.retro-gap-3 {
  gap: 1rem;
}

.retro-gap-4 {
  gap: 1.5rem;
}

.retro-gap-5 {
  gap: 2rem;
}

.retro-col-gap-0 {
  column-gap: 0;
}

.retro-col-gap-1 {
  column-gap: 0.25rem;
}

.retro-col-gap-2 {
  column-gap: 0.5rem;
}

.retro-col-gap-3 {
  column-gap: 1rem;
}

.retro-col-gap-4 {
  column-gap: 1.5rem;
}

.retro-col-gap-5 {
  column-gap: 2rem;
}

.retro-row-gap-0 {
  row-gap: 0;
}

.retro-row-gap-1 {
  row-gap: 0.25rem;
}

.retro-row-gap-2 {
  row-gap: 0.5rem;
}

.retro-row-gap-3 {
  row-gap: 1rem;
}

.retro-row-gap-4 {
  row-gap: 1.5rem;
}

.retro-row-gap-5 {
  row-gap: 2rem;
}

.retro-justify-start {
  justify-items: start;
}

.retro-justify-end {
  justify-items: end;
}

.retro-justify-center {
  justify-items: center;
}

.retro-justify-stretch {
  justify-items: stretch;
}

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

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

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

.retro-align-stretch {
  align-items: stretch;
}

.retro-justify-content-start {
  justify-content: start;
}

.retro-justify-content-end {
  justify-content: end;
}

.retro-justify-content-center {
  justify-content: center;
}

.retro-justify-content-between {
  justify-content: space-between;
}

.retro-justify-content-around {
  justify-content: space-around;
}

.retro-justify-content-evenly {
  justify-content: space-evenly;
}

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

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

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

.retro-align-content-between {
  align-content: space-between;
}

.retro-align-content-around {
  align-content: space-around;
}

.retro-align-content-evenly {
  align-content: space-evenly;
}

.retro-col-span-1 {
  grid-column: span 1;
}

.retro-col-span-2 {
  grid-column: span 2;
}

.retro-col-span-3 {
  grid-column: span 3;
}

.retro-col-span-4 {
  grid-column: span 4;
}

.retro-col-span-5 {
  grid-column: span 5;
}

.retro-col-span-6 {
  grid-column: span 6;
}

.retro-col-span-7 {
  grid-column: span 7;
}

.retro-col-span-8 {
  grid-column: span 8;
}

.retro-col-span-9 {
  grid-column: span 9;
}

.retro-col-span-10 {
  grid-column: span 10;
}

.retro-col-span-11 {
  grid-column: span 11;
}

.retro-col-span-12 {
  grid-column: span 12;
}

@media (min-width: 0) {
  .xs\:retro-col-span-1 {
    grid-column: span 1;
  }
  .xs\:retro-col-span-2 {
    grid-column: span 2;
  }
  .xs\:retro-col-span-3 {
    grid-column: span 3;
  }
  .xs\:retro-col-span-4 {
    grid-column: span 4;
  }
  .xs\:retro-col-span-5 {
    grid-column: span 5;
  }
  .xs\:retro-col-span-6 {
    grid-column: span 6;
  }
  .xs\:retro-col-span-7 {
    grid-column: span 7;
  }
  .xs\:retro-col-span-8 {
    grid-column: span 8;
  }
  .xs\:retro-col-span-9 {
    grid-column: span 9;
  }
  .xs\:retro-col-span-10 {
    grid-column: span 10;
  }
  .xs\:retro-col-span-11 {
    grid-column: span 11;
  }
  .xs\:retro-col-span-12 {
    grid-column: span 12;
  }
}
@media (min-width: 576px) {
  .sm\:retro-col-span-1 {
    grid-column: span 1;
  }
  .sm\:retro-col-span-2 {
    grid-column: span 2;
  }
  .sm\:retro-col-span-3 {
    grid-column: span 3;
  }
  .sm\:retro-col-span-4 {
    grid-column: span 4;
  }
  .sm\:retro-col-span-5 {
    grid-column: span 5;
  }
  .sm\:retro-col-span-6 {
    grid-column: span 6;
  }
  .sm\:retro-col-span-7 {
    grid-column: span 7;
  }
  .sm\:retro-col-span-8 {
    grid-column: span 8;
  }
  .sm\:retro-col-span-9 {
    grid-column: span 9;
  }
  .sm\:retro-col-span-10 {
    grid-column: span 10;
  }
  .sm\:retro-col-span-11 {
    grid-column: span 11;
  }
  .sm\:retro-col-span-12 {
    grid-column: span 12;
  }
}
@media (min-width: 768px) {
  .md\:retro-col-span-1 {
    grid-column: span 1;
  }
  .md\:retro-col-span-2 {
    grid-column: span 2;
  }
  .md\:retro-col-span-3 {
    grid-column: span 3;
  }
  .md\:retro-col-span-4 {
    grid-column: span 4;
  }
  .md\:retro-col-span-5 {
    grid-column: span 5;
  }
  .md\:retro-col-span-6 {
    grid-column: span 6;
  }
  .md\:retro-col-span-7 {
    grid-column: span 7;
  }
  .md\:retro-col-span-8 {
    grid-column: span 8;
  }
  .md\:retro-col-span-9 {
    grid-column: span 9;
  }
  .md\:retro-col-span-10 {
    grid-column: span 10;
  }
  .md\:retro-col-span-11 {
    grid-column: span 11;
  }
  .md\:retro-col-span-12 {
    grid-column: span 12;
  }
}
@media (min-width: 992px) {
  .lg\:retro-col-span-1 {
    grid-column: span 1;
  }
  .lg\:retro-col-span-2 {
    grid-column: span 2;
  }
  .lg\:retro-col-span-3 {
    grid-column: span 3;
  }
  .lg\:retro-col-span-4 {
    grid-column: span 4;
  }
  .lg\:retro-col-span-5 {
    grid-column: span 5;
  }
  .lg\:retro-col-span-6 {
    grid-column: span 6;
  }
  .lg\:retro-col-span-7 {
    grid-column: span 7;
  }
  .lg\:retro-col-span-8 {
    grid-column: span 8;
  }
  .lg\:retro-col-span-9 {
    grid-column: span 9;
  }
  .lg\:retro-col-span-10 {
    grid-column: span 10;
  }
  .lg\:retro-col-span-11 {
    grid-column: span 11;
  }
  .lg\:retro-col-span-12 {
    grid-column: span 12;
  }
}
@media (min-width: 1200px) {
  .xl\:retro-col-span-1 {
    grid-column: span 1;
  }
  .xl\:retro-col-span-2 {
    grid-column: span 2;
  }
  .xl\:retro-col-span-3 {
    grid-column: span 3;
  }
  .xl\:retro-col-span-4 {
    grid-column: span 4;
  }
  .xl\:retro-col-span-5 {
    grid-column: span 5;
  }
  .xl\:retro-col-span-6 {
    grid-column: span 6;
  }
  .xl\:retro-col-span-7 {
    grid-column: span 7;
  }
  .xl\:retro-col-span-8 {
    grid-column: span 8;
  }
  .xl\:retro-col-span-9 {
    grid-column: span 9;
  }
  .xl\:retro-col-span-10 {
    grid-column: span 10;
  }
  .xl\:retro-col-span-11 {
    grid-column: span 11;
  }
  .xl\:retro-col-span-12 {
    grid-column: span 12;
  }
}
@media (min-width: 1400px) {
  .xxl\:retro-col-span-1 {
    grid-column: span 1;
  }
  .xxl\:retro-col-span-2 {
    grid-column: span 2;
  }
  .xxl\:retro-col-span-3 {
    grid-column: span 3;
  }
  .xxl\:retro-col-span-4 {
    grid-column: span 4;
  }
  .xxl\:retro-col-span-5 {
    grid-column: span 5;
  }
  .xxl\:retro-col-span-6 {
    grid-column: span 6;
  }
  .xxl\:retro-col-span-7 {
    grid-column: span 7;
  }
  .xxl\:retro-col-span-8 {
    grid-column: span 8;
  }
  .xxl\:retro-col-span-9 {
    grid-column: span 9;
  }
  .xxl\:retro-col-span-10 {
    grid-column: span 10;
  }
  .xxl\:retro-col-span-11 {
    grid-column: span 11;
  }
  .xxl\:retro-col-span-12 {
    grid-column: span 12;
  }
}
/* RetroCSS - A Retro-Inspired CSS Framework */
/* Main SCSS file that imports all components */
/* Core */
/* RetroCSS Container Queries
 * A modern approach to component-based responsive design
 */
.retro-container {
  container-type: inline-size;
  container-name: retro-container;
}

@container retro-container (max-width: 20rem) {
  .retro-cq-hide {
    display: none;
  }
}

@container retro-container (min-width: 20rem) {
  .retro-cq-show {
    display: block;
  }
}

@container retro-container (min-width: 30rem) {
  .retro-cq-text-lg {
    font-size: 1.25rem;
  }
}
@container retro-container (min-width: 40rem) {
  .retro-cq-text-xl {
    font-size: 1.5rem;
  }
}
@container retro-container (min-width: 30rem) {
  .retro-cq-flex-row {
    flex-direction: row;
  }
}
@container retro-container (max-width: 30rem) {
  .retro-cq-flex-col {
    flex-direction: column;
  }
}
@container retro-container (min-width: 30rem) {
  .retro-cq-p-4 {
    padding: 1rem;
  }
}
@container retro-container (min-width: 40rem) {
  .retro-cq-p-6 {
    padding: 1.5rem;
  }
}
@container retro-container (min-width: 30rem) {
  .retro-cq-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@container retro-container (min-width: 40rem) {
  .retro-cq-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
/**
 * @name Layout
 * @group utilities
 * @description
 * Page shell: an optional sidebar beside a main content column.
 *
 * This lived in index.html's inline <style> while every page in the repo used
 * the class, so the five example pages — which carry no <style> block — got no
 * layout at all. The sidebar and the content stacked as plain blocks, leaving a
 * tall empty gap and pushing the content far below the fold.
 *
 * @example html
 *   <div class="retro-main-layout">
 *     <aside class="retro-sidebar">...</aside>
 *     <div class="main-content">...</div>
 *   </div>
 */
.retro-main-layout {
  display: flex;
  flex-direction: column;
  gap: var(--retro-spacing-md);
  width: 100%;
  max-width: var(--retro-container-xxl);
  margin: 0 auto;
  padding: 0 var(--retro-spacing-md);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .retro-main-layout {
    flex-direction: row;
    align-items: flex-start;
  }
}
.retro-main-layout > .retro-sidebar {
  flex: 0 0 auto;
}
.retro-main-layout > .main-content,
.retro-main-layout > main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.main-content {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/*# sourceMappingURL=retro.css.map */