*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}
body {
  margin: 0;
  font-family: inherit;
  line-height: inherit;
}
ul:not([class]),
ol:not([class]),
.prose ul,
.prose ol,
ul,
ol {
  list-style: revert;
  padding-left: 2rem;
  margin: 0.5rem 0;
}
ul li,
ol li {
  margin-bottom: 0.25rem;
}
/**
 * @section Button Base
 */
/** @public Base button - apply this first, then add variant */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  white-space: nowrap;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--transition-base);
  cursor: pointer;
  border: 1px solid transparent;
  padding: var(--spacing-2) var(--spacing-4);
  height: 2.5rem;
  line-height: 1;
}
.btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
.btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}
.btn.btn-icon-start {
  flex-direction: row;
}
.btn.btn-icon-start i,
.btn.btn-icon-start .icon {
  margin-right: var(--spacing-1);
}
.btn.btn-icon-end {
  flex-direction: row-reverse;
}
.btn.btn-icon-end i,
.btn.btn-icon-end .icon {
  margin-left: var(--spacing-1);
}
.btn.btn-icon i,
.btn.btn-icon .icon {
  margin: 0;
}
/**
 * @section Button Variants
 */
/** @public Primary action button - filled with brand color */
.btn-default {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-default:hover {
  background-color: hsl(var(--primary) / 0.9);
}
/** @public Alias for btn-default (v1 compatibility) */
.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-primary:hover {
  background-color: hsl(var(--primary) / 0.9);
}
/** @public Secondary action button - light fill */
.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.btn-secondary:hover {
  background-color: hsl(var(--secondary) / 0.8);
}
/** @public Destructive action button - delete/danger (red) */
.btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}
.btn-destructive:hover {
  background-color: hsl(var(--destructive) / 0.9);
}
/** @public Outlined border button */
.btn-outline {
  border: 1px solid hsl(var(--border));
  background-color: transparent;
  color: hsl(var(--foreground));
}
.btn-outline:hover {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
/** @public Transparent button with subtle hover */
.btn-ghost,
.btn-icon:not(.btn-subtle):not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-outline) {
  background-color: transparent;
  color: hsl(var(--foreground));
}
.btn-ghost:hover,
.btn-icon:not(.btn-subtle):not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-outline):hover {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
/** @public Transparent default, muted hover, primary when active - perfect for navigation/tabs/filters */
.btn-subtle {
  background-color: transparent;
  color: hsl(var(--foreground));
  border: 1px solid transparent;
  height: auto;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
}
.btn-subtle:hover {
  background-color: hsl(var(--muted));
}
.btn-subtle.active,
.btn-subtle:active {
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary));
}
.btn-subtle.btn-sm {
  height: auto;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
}
/** @public Text link style button with underline */
.btn-link {
  background-color: transparent;
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-link:hover {
  text-decoration: none;
}
/** @public Accent-colored link with underline (not a button) */
.link {
  background-color: transparent;
  color: hsl(var(--accent));
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: all var(--transition-base);
}
.link:hover {
  color: hsl(var(--accent) / 0.8);
  text-decoration: none;
}
/**
 * @section Button Sizes
 */
/** @public Small button (2rem height) */
.btn-sm {
  height: 2rem;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-xs);
}
/** @public Large button (3rem height) */
.btn-lg {
  height: 3rem;
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--text-base);
}
/** @public Square icon button (2.5rem × 2.5rem) */
.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}
/** @public Small square icon button (2rem × 2rem) */
.btn-icon-sm {
  width: 2rem;
  height: 2rem;
  padding: 0;
}
/** @public Large square icon button (3rem × 3rem) */
.btn-icon-lg {
  width: 3rem;
  height: 3rem;
  padding: 0;
}
/**
 * @section Special Attention Variants
 */
/** @public Gold shimmer gradient button with animation */
.btn-golden {
  background: linear-gradient(135deg, hsl(43, 80%, 53%) 0%, hsl(36, 90%, 62%) 50%, hsl(43, 80%, 53%) 100%);
  color: hsl(var(--golden-foreground));
  box-shadow: 0 2px 8px hsla(43 80% 53% / 0.4);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}
.btn-golden:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px hsla(43 80% 53% / 0.5);
}
/** @public Yellow highlight gradient button with animation */
.btn-attention {
  background: linear-gradient(135deg, hsl(45, 93%, 47%) 0%, hsl(48, 95%, 53%) 50%, hsl(45, 93%, 47%) 100%);
  color: hsl(var(--attention-foreground));
  box-shadow: 0 2px 8px hsla(45 93% 47% / 0.4);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}
.btn-attention:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px hsla(45 93% 47% / 0.5);
}
/** @public Purple highlight gradient button with animation */
.btn-attention-violet {
  background: linear-gradient(135deg, hsl(267, 76%, 57%) 0%, hsl(280, 84%, 65%) 50%, hsl(267, 76%, 57%) 100%);
  color: hsl(var(--attention-violet-foreground));
  box-shadow: 0 2px 8px hsla(267 76% 57% / 0.4);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}
.btn-attention-violet:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px hsla(267 76% 57% / 0.5);
}
/** @public Red highlight gradient button with animation */
.btn-attention-red {
  background: linear-gradient(135deg, hsl(0, 84%, 60%) 0%, hsl(350, 89%, 65%) 50%, hsl(0, 84%, 60%) 100%);
  color: hsl(var(--attention-red-foreground));
  box-shadow: 0 2px 8px hsla(0 84% 60% / 0.4);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}
.btn-attention-red:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px hsla(0 84% 60% / 0.5);
}
/** @public Muted dashed button (de-emphasized) */
.btn-not-attention {
  background: linear-gradient(135deg, hsl(var(--muted)) 0%, hsl(var(--muted) / 0.8) 50%, hsl(var(--muted)) 100%);
  color: hsl(var(--muted-foreground));
  border: 1px dashed hsl(var(--border));
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}
.btn-not-attention:hover {
  border-style: solid;
}
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/**
 * @section Button States
 */
/** @public Disabled button state */
.btn-disabled,
.btn[disabled] {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  cursor: not-allowed;
  pointer-events: none;
  border: 1px solid hsl(var(--border));
  box-shadow: none;
  animation: none;
}
.btn-disabled:hover,
.btn[disabled]:hover,
.btn-disabled:focus,
.btn[disabled]:focus {
  transform: none;
  box-shadow: none;
}
.btn-disabled.btn-golden,
.btn[disabled].btn-golden,
.btn-disabled.btn-attention,
.btn[disabled].btn-attention,
.btn-disabled.btn-attention-violet,
.btn[disabled].btn-attention-violet,
.btn-disabled.btn-attention-red,
.btn[disabled].btn-attention-red,
.btn-disabled.btn-not-attention,
.btn[disabled].btn-not-attention {
  background: hsl(var(--muted));
  animation: none;
}
/** @public Loading state with spinner animation */
.btn-loading {
  position: relative;
  cursor: wait;
  pointer-events: none;
}
.btn-loading > * {
  visibility: hidden;
}
.btn-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: inherit;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  border: 2px solid;
  border-radius: 50%;
  border-right-color: transparent;
  animation: button-loading-spinner 0.75s linear infinite;
}
.btn-loading.btn-default::after,
.btn-loading.btn-primary::after {
  border-color: hsl(var(--primary-foreground));
  border-right-color: transparent;
}
.btn-loading.btn-secondary::after {
  border-color: hsl(var(--secondary-foreground));
  border-right-color: transparent;
}
.btn-loading.btn-destructive::after {
  border-color: hsl(var(--destructive-foreground));
  border-right-color: transparent;
}
.btn-loading.btn-outline::after,
.btn-loading.btn-ghost::after,
.btn-loading.btn-icon:not(.btn-subtle):not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-outline)::after {
  border-color: hsl(var(--foreground));
  border-right-color: transparent;
}
.btn-loading.btn-link::after {
  border-color: hsl(var(--primary));
  border-right-color: transparent;
}
@keyframes button-loading-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/**
 * @section Button Modifiers
 */
/** @public Full width button */
.btn-block {
  width: 100%;
}
/**
 * @section Card Base
 */
/** @public Base card with subtle shadow and border */
.card {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
}
/** @public Card header section with spacing */
.card-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
}
/** @public Card title - large semibold heading */
.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin: 0;
}
/** @public Card description - muted text below title */
.card-description {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  margin: 0;
}
/** @public Card content section - main body */
.card-content + .card-footer {
  margin-top: var(--spacing-6);
}
/** @public Card footer section - typically for actions/buttons */
.card-footer {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-6);
}
/**
 * @section Card Variants
 */
/** @public Elevated card with enhanced shadow and hover effect */
.card-elevated {
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base);
}
.card-elevated:hover {
  box-shadow: var(--shadow-lg);
}
/** @public Interactive card - clickable with lift effect */
.card-interactive {
  cursor: pointer;
  transition: all var(--transition-base);
}
.card-interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/** @public Card with 2px border and no shadow */
.card-bordered {
  border: 2px solid hsl(var(--border));
  box-shadow: none;
}
/** @public Transparent card with no border or shadow */
.card-ghost {
  border: none;
  box-shadow: none;
  background-color: transparent;
}
/** @public Card with muted background */
.card-muted {
  background-color: hsl(var(--muted));
  border-color: hsl(var(--muted));
}
/**
 * @section Card Modifiers
 */
/** @public Remove card padding (adds to children instead) */
.card-no-padding {
  padding: 0;
}
.card-no-padding > .card-header,
.card-no-padding > .card-content,
.card-no-padding > .card-footer {
  padding: var(--spacing-6);
}
.card-no-padding > .card-header + .card-content {
  padding-top: 0;
}
.card-no-padding > .card-content + .card-footer {
  padding-top: 0;
}
/**
 * @section Input Base
 */
/** @public Base input field */
.input {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  transition: all var(--transition-base);
  color: hsl(var(--foreground));
  position: relative;
}
.input::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}
.input::placeholder {
  color: hsl(var(--muted-foreground));
}
.input:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring));
  border-color: hsl(var(--ring));
}
.input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.input[readonly] {
  background-color: hsl(var(--muted));
  cursor: default;
}
.input.input-loading {
  cursor: wait;
}
.input.input-loading::after {
  content: '';
  position: absolute;
  right: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  border: 2px solid hsl(var(--muted));
  border-top-color: hsl(var(--foreground));
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
select.input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2) center;
  background-size: 1rem;
  padding-right: var(--spacing-8);
}
.dark select.input,
[data-theme="dark"] select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
/** @public Multi-line textarea */
.textarea {
  display: flex;
  min-height: 5rem;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  padding: var(--spacing-3);
  font-size: var(--text-sm);
  transition: all var(--transition-base);
  color: hsl(var(--foreground));
  resize: vertical;
}
.textarea::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}
.textarea::placeholder {
  color: hsl(var(--muted-foreground));
}
.textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring));
  border-color: hsl(var(--ring));
}
.textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/**
 * @section Input Variants
 */
/** @public Error state input */
.input-error,
textarea.input-error {
  border-color: hsl(var(--destructive));
}
.input-error:focus,
textarea.input-error:focus {
  box-shadow: 0 0 0 2px hsl(var(--destructive));
  border-color: hsl(var(--destructive));
}
/** @public Success state input */
.input-success,
textarea.input-success {
  border-color: hsl(var(--success));
}
.input-success:focus,
textarea.input-success:focus {
  box-shadow: 0 0 0 2px hsl(var(--success));
  border-color: hsl(var(--success));
}
/** @public Warning state input */
.input-warning,
textarea.input-warning {
  border-color: hsl(var(--warning));
}
.input-warning:focus,
textarea.input-warning:focus {
  box-shadow: 0 0 0 2px hsl(var(--warning));
  border-color: hsl(var(--warning));
}
/** @public Outlined input - transparent background, 2px border */
.input-outlined {
  background-color: transparent;
  border-width: 2px;
}
/** @public Borderless input - muted background */
.input-borderless {
  border-color: transparent;
  background-color: hsl(var(--muted));
}
.input-borderless:focus {
  border-color: transparent;
  box-shadow: none;
  background-color: hsl(var(--muted));
}
/**
 * @section Input Sizes
 */
/** @public Small input */
.input-sm {
  height: 2rem;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-xs);
}
/** @public Large input */
.input-lg {
  height: 3rem;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--text-base);
}
/**
 * @section Form Elements
 */
/** @public Form label */
.label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: hsl(var(--foreground));
  margin-bottom: var(--spacing-2);
  display: block;
}
/** @public Form group container */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}
/** @public Input group with addons */
.input-group {
  display: flex;
  position: relative;
  width: 100%;
  /** @public Input addon - left side */
  /** @public Input addon - right side */
  /** @public Input icon - left side */
}
.input-group .input {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group .input-addon-start,
.input-group .input-addon-end {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-3);
  font-size: var(--text-sm);
  background-color: hsl(var(--muted));
  border: 1px solid hsl(var(--input));
  color: hsl(var(--muted-foreground));
}
.input-group .input-addon-start {
  border-right: 0;
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.input-group .input-addon-end {
  border-left: 0;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.input-group .btn {
  position: relative;
  z-index: 1;
}
.input-group .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}
.input-group .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -1px;
}
.input-group .input-addon-start + .input,
.input-group .btn:not(:first-child) + .input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group .input:has(+ .input-addon-end),
.input-group .input:has(+ .btn) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .input:focus,
.input-group .btn:focus {
  z-index: 2;
}
.input-group .input-icon-start,
.input-group .input-icon-end {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-10);
  height: 100%;
  padding: 0 var(--spacing-3);
  z-index: 3;
}
.input-group .input-icon-start {
  left: 0;
}
.input-group .input-icon-start + .input {
  padding-left: var(--spacing-10);
}
.input-group .input-icon-end {
  right: 0;
}
.input-group .input:has(+ .input-icon-end) {
  padding-right: var(--spacing-10);
}
/** @public Input group with separated buttons - buttons maintain their own edges */
.input-group-separated {
  display: flex;
  position: relative;
  width: 100%;
}
.input-group-separated .input {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group-separated .input-addon-start,
.input-group-separated .input-addon-end {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-3);
  font-size: var(--text-sm);
  background-color: hsl(var(--muted));
  border: 1px solid hsl(var(--input));
  color: hsl(var(--muted-foreground));
}
.input-group-separated .input-addon-start {
  border-right: 0;
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.input-group-separated .input-addon-end {
  border-left: 0;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.input-group-separated .btn {
  position: relative;
  z-index: 1;
}
.input-group-separated .input-addon-start + .input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group-separated .input:has(+ .input-addon-end) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-separated .input:focus,
.input-group-separated .btn:focus {
  z-index: 2;
}
.input-group-separated .input-icon-start,
.input-group-separated .input-icon-end {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}
.input-group-separated .input-icon-start i,
.input-group-separated .input-icon-end i {
  font-size: var(--text-sm);
}
.input-group-separated .input-icon-start {
  left: var(--spacing-3);
}
.input-group-separated .input-icon-end {
  right: var(--spacing-3);
}
.input-group-separated .input:has(+ .input-icon-end),
.input-group-separated .input-icon-start + .input {
  padding-left: calc(var(--spacing-3) * 2 + 1rem);
}
.input-group-separated .input:has(+ .input-icon-end) {
  padding-right: calc(var(--spacing-3) * 2 + 1rem);
}
/** @public Form help text */
.form-help {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}
/** @public Form error message */
.form-error {
  font-size: var(--text-xs);
  color: hsl(var(--destructive));
}
/**
 * @section Spinner Loader
 */
/** @public Base spinner loader */
.loader {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid hsl(var(--muted));
  border-right-color: hsl(var(--foreground));
  border-radius: 50%;
  animation: loader-spin 0.75s linear infinite;
}
.loader.loader-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}
.loader.loader-lg {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}
.loader.loader-xl {
  width: 3rem;
  height: 3rem;
  border-width: 4px;
}
.loader.loader-primary {
  border-color: hsl(var(--primary) / 0.3);
  border-right-color: hsl(var(--primary));
}
.loader.loader-secondary {
  border-color: hsl(var(--secondary) / 0.3);
  border-right-color: hsl(var(--secondary));
}
.loader.loader-success {
  border-color: hsl(var(--success) / 0.3);
  border-right-color: hsl(var(--success));
}
.loader.loader-destructive {
  border-color: hsl(var(--destructive) / 0.3);
  border-right-color: hsl(var(--destructive));
}
/** @public Centered loader container - min-height 100px */
.loader-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100px;
}
/** @public Three dots loader with span between pseudo-elements */
.loader-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.loader-dots::before,
.loader-dots::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: currentColor;
  border-radius: 50%;
  animation: loader-dots 0.8s ease-in-out infinite;
}
.loader-dots::before {
  animation-delay: -0.3s;
}
.loader-dots::after {
  animation-delay: -0.15s;
}
.loader-dots span {
  width: 0.5rem;
  height: 0.5rem;
  background: currentColor;
  border-radius: 50%;
  animation: loader-dots 0.8s ease-in-out infinite;
}
.loader-dots.loader-sm {
  gap: 0.25rem;
}
.loader-dots.loader-sm::before,
.loader-dots.loader-sm::after,
.loader-dots.loader-sm span {
  width: 0.25rem;
  height: 0.25rem;
}
.loader-dots.loader-lg {
  gap: 0.75rem;
}
.loader-dots.loader-lg::before,
.loader-dots.loader-lg::after,
.loader-dots.loader-lg span {
  width: 0.75rem;
  height: 0.75rem;
}
@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader-dots {
  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
/**
 * @section Skeleton Base
 */
/** @public Base skeleton with shimmer animation */
.skeleton {
  position: relative;
  background-color: hsl(var(--muted));
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 1rem;
  /**
   * @section Skeleton Variants
   */
  /** @public Text line skeleton - 100% width */
  /** @public Title skeleton - 50% width */
  /** @public Avatar skeleton - circle 3rem */
  /** @public Button skeleton - 5rem x 2.5rem */
  /** @public Card skeleton - 200px height */
  /** @public Image skeleton - 16:9 aspect ratio */
}
.skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, hsl(var(--muted-foreground) / 0.1) 20%, hsl(var(--muted-foreground) / 0.2) 50%, hsl(var(--muted-foreground) / 0.1) 80%, transparent 100%);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton.skeleton-text {
  width: 100%;
  height: 1em;
  margin-bottom: 0.5em;
}
.skeleton.skeleton-text:last-child {
  width: 80%;
}
.skeleton.skeleton-title {
  width: 50%;
  height: 1.75em;
  margin-bottom: 1em;
}
.skeleton.skeleton-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.skeleton.skeleton-avatar.skeleton-sm {
  width: 2rem;
  height: 2rem;
}
.skeleton.skeleton-avatar.skeleton-lg {
  width: 4rem;
  height: 4rem;
}
.skeleton.skeleton-button {
  width: 5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
}
.skeleton.skeleton-card {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-lg);
}
.skeleton.skeleton-image {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
/**
 * @section Badge Base
 */
/** @public Badge base - apply this first, then add variant */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  transition: all var(--transition-base);
  border: 1px solid transparent;
}
/**
 * @section Badge Variants
 */
/** @public Primary badge */
.badge-default {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
/** @public Secondary badge */
.badge-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
/** @public Destructive/error badge */
.badge-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}
/** @public Success badge */
.badge-success {
  background-color: hsl(var(--success));
  color: hsl(var(--success-foreground));
}
/** @public Warning badge */
.badge-warning {
  background-color: hsl(var(--warning));
  color: hsl(var(--warning-foreground));
}
/** @public Info badge */
.badge-info {
  background-color: hsl(var(--info));
  color: hsl(var(--info-foreground));
}
/** @public Outline badge */
.badge-outline {
  background-color: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}
/** @public Ghost badge - muted appearance */
.badge-ghost {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
/**
 * @section Badge Sizes
 */
/** @public Small badge */
.badge-sm {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: 0.625rem;
}
/** @public Large badge */
.badge-lg {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
}
/**
 * @section Alert Base
 */
/** @public Alert container - notification box */
.alert {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  padding: var(--spacing-4);
  display: flex;
  gap: var(--spacing-3);
}
/** @public Alert icon container */
.alert-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}
/** @public Alert content wrapper */
.alert-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
/** @public Alert title */
.alert-title {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  margin-bottom: var(--spacing-2);
  line-height: var(--leading-tight);
}
/** @public Alert description text */
.alert-description {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  line-height: var(--leading-relaxed);
}
.alert-description pre {
  overflow-x: auto;
  max-width: 100%;
}
.alert-description code {
  word-break: break-word;
}
/**
 * @section Alert Variants
 */
/** @public Default alert */
.alert-default {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
/** @public Destructive/error alert */
.alert-destructive {
  border-color: hsl(var(--destructive));
  background-color: hsl(0, 84.2%, 95%);
  color: hsl(0, 84.2%, 30%);
}
.alert-destructive .alert-description {
  color: hsl(0, 84.2%, 35%);
}
.dark .alert-destructive,
[data-theme="dark"] .alert-destructive {
  background-color: hsl(0, 84.2%, 15%);
  color: hsl(0, 84.2%, 85%);
  border-color: hsl(var(--destructive) / 0.6);
}
.dark .alert-destructive .alert-description,
[data-theme="dark"] .alert-destructive .alert-description {
  color: hsl(0, 84.2%, 75%);
}
/** @public Success alert */
.alert-success {
  border-color: hsl(var(--success));
  background-color: hsl(142.1, 76.2%, 92%);
  color: hsl(142.1, 76.2%, 25%);
}
.alert-success .alert-description {
  color: hsl(142.1, 76.2%, 28%);
}
.dark .alert-success,
[data-theme="dark"] .alert-success {
  background-color: hsl(142.1, 76.2%, 12%);
  color: hsl(142.1, 76.2%, 80%);
  border-color: hsl(var(--success) / 0.6);
}
.dark .alert-success .alert-description,
[data-theme="dark"] .alert-success .alert-description {
  color: hsl(142.1, 76.2%, 70%);
}
/** @public Warning alert */
.alert-warning {
  border-color: hsl(var(--warning));
  background-color: hsl(38, 92%, 90%);
  color: hsl(38, 92%, 25%);
}
.alert-warning .alert-description {
  color: hsl(38, 92%, 28%);
}
.dark .alert-warning,
[data-theme="dark"] .alert-warning {
  background-color: hsl(38, 92%, 15%);
  color: hsl(38, 92%, 80%);
  border-color: hsl(var(--warning) / 0.6);
}
.dark .alert-warning .alert-description,
[data-theme="dark"] .alert-warning .alert-description {
  color: hsl(38, 92%, 70%);
}
/** @public Info alert */
.alert-info {
  border-color: hsl(var(--info));
  background-color: hsl(221.2, 83.2%, 92%);
  color: hsl(221.2, 83.2%, 30%);
}
.alert-info .alert-description {
  color: hsl(221.2, 83.2%, 35%);
}
.dark .alert-info,
[data-theme="dark"] .alert-info {
  background-color: hsl(221.2, 83.2%, 15%);
  color: hsl(221.2, 83.2%, 80%);
  border-color: hsl(var(--info) / 0.6);
}
.dark .alert-info .alert-description,
[data-theme="dark"] .alert-info .alert-description {
  color: hsl(221.2, 83.2%, 70%);
}
/**
 * @section Block & Section
 */
/** @public Block container with gap and padding */
.block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--spacing-6);
  border-radius: var(--radius-lg);
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}
/** @public Section container with responsive padding */
.section {
  --section-padding: var(--spacing-8);
  --section-gap: var(--gap-lg);
  --section-margin: var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding: var(--section-padding);
  margin-bottom: var(--section-margin);
}
@media (max-width: 768px) {
  .section {
    --section-padding: var(--spacing-4);
    --section-gap: var(--gap-md);
    --section-margin: var(--spacing-4);
  }
}
@media (max-width: 480px) {
  .section {
    --section-padding: var(--spacing-3);
    --section-gap: var(--gap-sm);
    --section-margin: var(--spacing-3);
  }
}
.toc {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc li {
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid hsl(var(--border));
}
.toc li:last-child {
  border-bottom: none;
}
.toc li a {
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: color var(--transition-base);
}
.toc li a:hover {
  color: hsl(var(--primary));
}
.toc ul {
  padding-left: var(--spacing-4);
  margin-top: var(--spacing-2);
}
/**
 * @section Icon Sizes
 */
/** @public Base icon size */
.icon {
  display: inline-block;
  font-size: 1.25em;
  line-height: 1;
  vertical-align: middle;
  color: inherit;
}
/** @public Extra small icon */
.icon-xs {
  display: inline-block;
  font-size: var(--text-xs);
  line-height: 1;
  vertical-align: middle;
  color: inherit;
}
/** @public Small icon */
.icon-sm {
  display: inline-block;
  font-size: var(--text-sm);
  line-height: 1;
  vertical-align: middle;
  color: inherit;
}
/** @public Medium icon */
.icon-md {
  display: inline-block;
  font-size: var(--text-base);
  line-height: 1;
  vertical-align: middle;
  color: inherit;
}
/** @public Large icon */
.icon-lg {
  display: inline-block;
  font-size: var(--text-lg);
  line-height: 1;
  vertical-align: middle;
  color: inherit;
}
/** @public Extra large icon */
.icon-xl {
  display: inline-block;
  font-size: var(--text-xl);
  line-height: 1;
  vertical-align: middle;
  color: inherit;
}
/** @public 2XL icon */
.icon-2xl {
  display: inline-block;
  font-size: var(--text-2xl);
  line-height: 1;
  vertical-align: middle;
  color: inherit;
}
/** @public 3XL icon */
.icon-3xl {
  display: inline-block;
  font-size: var(--text-3xl);
  line-height: 1;
  vertical-align: middle;
  color: inherit;
}
/** @public 4XL icon */
.icon-4xl {
  display: inline-block;
  font-size: var(--text-4xl);
  line-height: 1;
  vertical-align: middle;
  color: inherit;
}
/**
 * @section Keyboard Key
 */
/** @public Keyboard key display - monospace with 3D appearance */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: var(--spacing-1) var(--spacing-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  color: hsl(var(--foreground));
  background-color: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 0 hsl(var(--border)), inset 0 1px 0 0 hsl(var(--background) / 0.1);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
}
.dark .kbd,
[data-theme="dark"] .kbd {
  background-color: hsl(var(--muted) / 0.5);
  border-color: hsl(var(--border) / 0.7);
  box-shadow: 0 1px 0 0 hsl(var(--border) / 0.5), inset 0 1px 0 0 hsl(var(--foreground) / 0.05);
}
/** @public Small keyboard key */
.kbd-sm {
  min-width: 1.5rem;
  height: 1.5rem;
  padding: var(--spacing-0-5) var(--spacing-1);
  font-size: 0.625rem;
}
/** @public Large keyboard key */
.kbd-lg {
  min-width: 2rem;
  height: 2rem;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-sm);
}
/**
 * @section Definition List Base
 */
/** @public Definition list container */
.dl {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
  /** @public Definition list item pair */
  /** @public Definition term */
  /** @public Definition description */
}
.dl .dl-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.dl .dl-term {
  font-weight: var(--font-medium);
  color: hsl(var(--foreground));
  font-size: var(--text-sm);
}
.dl .dl-desc {
  color: hsl(var(--muted-foreground));
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
/**
 * @section Definition List Variants
 */
/** @public Horizontal layout - side-by-side (term 25% width, right-aligned) */
.dl-horizontal .dl-item {
  flex-direction: row;
  align-items: baseline;
  gap: var(--spacing-4);
}
.dl-horizontal .dl-item .dl-term {
  flex: 0 0 25%;
  text-align: right;
}
.dl-horizontal .dl-item .dl-desc {
  flex: 1;
}
/** @public Compact spacing for dense information */
.dl-compact {
  gap: var(--spacing-2);
}
.dl-compact .dl-item {
  gap: var(--spacing-0-5);
}
/** @public Dark mode definition list styles */
.dark .dl .dl-term {
  color: hsl(var(--foreground));
}
.dark .dl .dl-desc {
  color: hsl(var(--muted-foreground));
}
/**
 * @section Tree
 */
/** @public CLI-style hierarchical list */
.tree {
  --tree-indent: var(--spacing-4);
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: hsl(var(--foreground));
}
.tree ul {
  list-style: none;
  margin: 0;
  padding-left: var(--tree-indent);
  position: relative;
}
.tree ul::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0.5em;
  width: 1px;
  background: hsl(var(--foreground));
}
.tree li {
  position: relative;
  margin: 0;
  padding-left: var(--tree-indent);
}
.tree li::before {
  content: '';
  position: absolute;
  top: 0.9em;
  left: 0.5rem;
  width: calc(var(--tree-indent) - 0.5rem - 0.25rem);
  height: 1px;
  background: hsl(var(--foreground));
}
.tree li:last-child > ul::before {
  display: none;
}
.tree i,
.tree .icon {
  margin-right: var(--spacing-2);
  color: hsl(var(--muted-foreground));
}
/**
 * @section Toast Container
 */
/** @public Toast container - fixed top-right */
.toast-container {
  position: fixed;
  top: var(--spacing-6);
  right: var(--spacing-6);
  z-index: 9999;
  width: 100%;
  max-width: 420px;
  pointer-events: none;
  /* Allow absolutely positioned (hidden) overflow to sit on top without shifting layout */
}
@media (max-width: 640px) {
  .toast-container {
    left: var(--spacing-4);
    right: var(--spacing-4);
    max-width: unset;
  }
}
/**
 * @section Toast Base
 */
/** @public Toast notification */
.toast {
  position: relative;
  pointer-events: auto;
  display: flex;
  gap: var(--spacing-3);
  align-items: flex-start;
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: var(--shadow-lg);
  min-height: 48px;
  margin-bottom: var(--spacing-3);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  animation: toast-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  /* When JS hides overflow toasts it sets absolute + opacity 0; ensure no layout flicker */
}
.toast:hover {
  box-shadow: var(--shadow-xl);
}
.toast.toast-exit {
  animation: toast-slide-out 0.25s ease-in forwards;
}
.toast.toast-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.dark .toast,
[data-theme="dark"] .toast {
  background: hsl(var(--card));
  border-color: hsl(var(--border));
}
/** @public Toast icon container */
.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
/** @public Toast content wrapper */
.toast-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
}
/** @public Toast title */
.toast-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: hsl(var(--foreground));
}
.dark .toast-title,
[data-theme="dark"] .toast-title {
  color: hsl(var(--foreground));
}
/** @public Toast description text */
.toast-description {
  font-size: 14px;
  line-height: 1.4;
  color: hsl(var(--muted-foreground));
}
.dark .toast-description,
[data-theme="dark"] .toast-description {
  color: hsl(var(--muted-foreground));
}
/** @public Toast close button */
.toast-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  border-radius: var(--radius-sm);
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.15s, background-color 0.15s;
}
.toast-close:hover {
  opacity: 1;
  background: hsl(var(--accent) / 0.1);
}
.dark .toast-close,
[data-theme="dark"] .toast-close {
  color: hsl(var(--muted-foreground));
}
.dark .toast-close:hover,
[data-theme="dark"] .toast-close:hover {
  background: hsl(var(--accent) / 0.15);
}
/** @public Toast action button container */
.toast-action {
  margin-top: var(--spacing-2);
}
.toast-action .btn {
  height: auto;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: 13px;
}
/**
 * @section Toast Variants
 */
/** @public Default toast */
.toast-default {
  background: hsl(var(--card));
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
.toast-default .toast-icon {
  color: hsl(var(--foreground));
}
.dark .toast-default,
[data-theme="dark"] .toast-default {
  background: hsl(var(--card));
  border-color: hsl(var(--border));
}
/** @public Success toast */
.toast-success {
  border-color: hsl(var(--success));
  background-color: hsl(142.1, 76.2%, 92%);
  color: hsl(142.1, 76.2%, 25%);
}
.toast-success .toast-icon {
  color: hsl(142.1, 76.2%, 25%);
}
.toast-success .toast-title {
  color: hsl(142.1, 76.2%, 25%);
}
.toast-success .toast-description {
  color: hsl(142.1, 76.2%, 28%);
}
.dark .toast-success,
[data-theme="dark"] .toast-success {
  background-color: hsl(142.1, 76.2%, 12%);
  color: hsl(142.1, 76.2%, 80%);
  border-color: hsl(var(--success) / 0.6);
}
.dark .toast-success .toast-icon,
[data-theme="dark"] .toast-success .toast-icon {
  color: hsl(142.1, 76.2%, 80%);
}
.dark .toast-success .toast-title,
[data-theme="dark"] .toast-success .toast-title {
  color: hsl(142.1, 76.2%, 80%);
}
.dark .toast-success .toast-description,
[data-theme="dark"] .toast-success .toast-description {
  color: hsl(142.1, 76.2%, 70%);
}
/** @public Error/destructive toast */
.toast-error,
.toast-destructive {
  border-color: hsl(var(--destructive));
  background-color: hsl(0, 84.2%, 95%);
  color: hsl(0, 84.2%, 30%);
}
.toast-error .toast-icon,
.toast-destructive .toast-icon {
  color: hsl(0, 84.2%, 30%);
}
.toast-error .toast-title,
.toast-destructive .toast-title {
  color: hsl(0, 84.2%, 30%);
}
.toast-error .toast-description,
.toast-destructive .toast-description {
  color: hsl(0, 84.2%, 35%);
}
.dark .toast-error,
.dark .toast-destructive,
[data-theme="dark"] .toast-error,
[data-theme="dark"] .toast-destructive {
  background-color: hsl(0, 84.2%, 15%);
  color: hsl(0, 84.2%, 85%);
  border-color: hsl(var(--destructive) / 0.6);
}
.dark .toast-error .toast-icon,
.dark .toast-destructive .toast-icon,
[data-theme="dark"] .toast-error .toast-icon,
[data-theme="dark"] .toast-destructive .toast-icon {
  color: hsl(0, 84.2%, 85%);
}
.dark .toast-error .toast-title,
.dark .toast-destructive .toast-title,
[data-theme="dark"] .toast-error .toast-title,
[data-theme="dark"] .toast-destructive .toast-title {
  color: hsl(0, 84.2%, 85%);
}
.dark .toast-error .toast-description,
.dark .toast-destructive .toast-description,
[data-theme="dark"] .toast-error .toast-description,
[data-theme="dark"] .toast-destructive .toast-description {
  color: hsl(0, 84.2%, 75%);
}
/** @public Warning toast */
.toast-warning {
  border-color: hsl(var(--warning));
  background-color: hsl(38, 92%, 90%);
  color: hsl(38, 92%, 25%);
}
.toast-warning .toast-icon {
  color: hsl(38, 92%, 25%);
}
.toast-warning .toast-title {
  color: hsl(38, 92%, 25%);
}
.toast-warning .toast-description {
  color: hsl(38, 92%, 28%);
}
.dark .toast-warning,
[data-theme="dark"] .toast-warning {
  background-color: hsl(38, 92%, 15%);
  color: hsl(38, 92%, 80%);
  border-color: hsl(var(--warning) / 0.6);
}
.dark .toast-warning .toast-icon,
[data-theme="dark"] .toast-warning .toast-icon {
  color: hsl(38, 92%, 80%);
}
.dark .toast-warning .toast-title,
[data-theme="dark"] .toast-warning .toast-title {
  color: hsl(38, 92%, 80%);
}
.dark .toast-warning .toast-description,
[data-theme="dark"] .toast-warning .toast-description {
  color: hsl(38, 92%, 70%);
}
/** @public Info toast */
.toast-info {
  border-color: hsl(var(--info));
  background-color: hsl(221.2, 83.2%, 92%);
  color: hsl(221.2, 83.2%, 30%);
}
.toast-info .toast-icon {
  color: hsl(221.2, 83.2%, 30%);
}
.toast-info .toast-title {
  color: hsl(221.2, 83.2%, 30%);
}
.toast-info .toast-description {
  color: hsl(221.2, 83.2%, 35%);
}
.dark .toast-info,
[data-theme="dark"] .toast-info {
  background-color: hsl(221.2, 83.2%, 15%);
  color: hsl(221.2, 83.2%, 80%);
  border-color: hsl(var(--info) / 0.6);
}
.dark .toast-info .toast-icon,
[data-theme="dark"] .toast-info .toast-icon {
  color: hsl(221.2, 83.2%, 80%);
}
.dark .toast-info .toast-title,
[data-theme="dark"] .toast-info .toast-title {
  color: hsl(221.2, 83.2%, 80%);
}
.dark .toast-info .toast-description,
[data-theme="dark"] .toast-info .toast-description {
  color: hsl(221.2, 83.2%, 70%);
}
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
/**
 * @section Dropdown Base
 */
/** @public Dropdown container - relative positioning for absolute submenu */
.dropdown {
  position: relative;
  display: inline-block;
  /** @public Dropdown trigger element */
  /** @public Dropdown content - the submenu that appears */
  /** @public Dropdown item - menu item in dropdown */
  /** @public Dropdown label - non-interactive header */
  /** @public Dropdown separator */
  /** @public Dropdown shortcut text */
  /** @public Right-aligned dropdown (e.g., for user menu in top-right) */
  /** @public Center-aligned dropdown */
  /** @public Animated dropdown - opt-in for slide/fade animations */
}
.dropdown .dropdown-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}
.dropdown .dropdown-trigger::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--spacing-1);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
}
.dropdown .dropdown-trigger:hover::after,
.dropdown .dropdown-trigger:focus::after {
  transform: rotate(180deg);
}
.dropdown[data-dropdown-initialized] .dropdown-trigger:hover::after,
.dropdown[data-dropdown-initialized] .dropdown-trigger:focus::after {
  transform: rotate(0deg);
}
.dropdown[data-dropdown-initialized].open .dropdown-trigger::after {
  transform: rotate(180deg);
}
.dropdown .dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 12rem;
  margin-top: var(--spacing-2);
  opacity: 0;
  visibility: hidden;
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-1);
  overflow: hidden;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  opacity: 1;
  visibility: visible;
}
.dropdown[data-dropdown-initialized]:hover .dropdown-content {
  opacity: 0;
  visibility: hidden;
}
.dropdown[data-dropdown-initialized].open .dropdown-content {
  opacity: 1;
  visibility: visible;
}
.dropdown[data-dropdown-initialized].open .dropdown-trigger.btn-subtle {
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary));
}
.dropdown[data-dropdown-initialized]:focus-within .dropdown-content {
  opacity: 1;
  visibility: visible;
}
.dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: hsl(var(--popover-foreground));
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
}
.dropdown .dropdown-item:hover,
.dropdown .dropdown-item:focus {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  outline: none;
}
.dropdown .dropdown-item i,
.dropdown .dropdown-item .icon {
  width: 1rem;
  font-size: var(--text-sm);
  opacity: 0.7;
}
.dropdown .dropdown-item.active {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}
.dropdown .dropdown-item.active:hover,
.dropdown .dropdown-item.active:focus {
  background: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
}
.dropdown .dropdown-item:disabled,
.dropdown .dropdown-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.dropdown .dropdown-item.dropdown-item-destructive {
  color: hsl(var(--destructive));
}
.dropdown .dropdown-item.dropdown-item-destructive:hover,
.dropdown .dropdown-item.dropdown-item-destructive:focus {
  background: hsl(var(--destructive) / 0.9);
  color: hsl(var(--destructive-foreground));
}
.dropdown .dropdown-item.dropdown-item-primary {
  color: hsl(var(--primary));
}
.dropdown .dropdown-item.dropdown-item-primary:hover,
.dropdown .dropdown-item.dropdown-item-primary:focus {
  background: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
}
.dropdown .dropdown-item.dropdown-item-secondary {
  color: hsl(var(--secondary-foreground));
}
.dropdown .dropdown-item.dropdown-item-secondary:hover,
.dropdown .dropdown-item.dropdown-item-secondary:focus {
  background: hsl(var(--secondary) / 0.8);
  color: hsl(var(--secondary-foreground));
}
.dropdown .dropdown-label {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dropdown .dropdown-separator {
  height: 1px;
  margin: var(--spacing-1) 0;
  background: hsl(var(--border));
}
.dropdown .dropdown-shortcut {
  margin-left: auto;
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
  opacity: 0.6;
}
.dropdown.dropdown-right .dropdown-content {
  left: auto;
  right: 0;
}
.dropdown.dropdown-center .dropdown-content {
  left: 50%;
  transform: translateX(-50%);
}
.dropdown.dropdown-animated .dropdown-trigger::after {
  transition: transform var(--transition-base);
}
.dropdown.dropdown-animated .dropdown-content {
  transform: translateY(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear 0.2s;
}
.dropdown.dropdown-animated:hover .dropdown-content,
.dropdown.dropdown-animated:focus-within .dropdown-content,
.dropdown.dropdown-animated[data-dropdown-initialized].open .dropdown-content,
.dropdown.dropdown-animated[data-dropdown-initialized]:focus-within .dropdown-content {
  transform: translateY(0);
  transition-delay: 0s;
}
.dropdown.dropdown-animated[data-dropdown-initialized]:hover .dropdown-content {
  transform: translateY(-8px);
}
.dropdown.dropdown-animated.dropdown-center .dropdown-content {
  transform: translateX(-50%) translateY(-8px);
}
.dropdown.dropdown-animated.dropdown-center:hover .dropdown-content,
.dropdown.dropdown-animated.dropdown-center:focus-within .dropdown-content,
.dropdown.dropdown-animated.dropdown-center[data-dropdown-initialized].open .dropdown-content,
.dropdown.dropdown-animated.dropdown-center[data-dropdown-initialized]:focus-within .dropdown-content {
  transform: translateX(-50%) translateY(0);
}
.dropdown.dropdown-animated.dropdown-center[data-dropdown-initialized]:hover .dropdown-content {
  transform: translateX(-50%) translateY(-8px);
}
/** @public Dropdown group - nested dropdown items */
.dropdown-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
nav .dropdown .dropdown-trigger {
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
  transition: background var(--transition-base);
}
.btn.dropdown-trigger::after {
  margin-left: var(--spacing-2);
}
.dropdown-item.btn-default:hover,
.dropdown-item.btn-primary:hover,
.dropdown-item.btn-default:focus,
.dropdown-item.btn-primary:focus {
  background: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
}
.dropdown-item.btn-secondary:hover,
.dropdown-item.btn-secondary:focus {
  background: hsl(var(--secondary) / 0.8);
  color: hsl(var(--secondary-foreground));
}
.dropdown-item.btn-destructive:hover,
.dropdown-item.btn-destructive:focus {
  background: hsl(var(--destructive) / 0.9);
  color: hsl(var(--destructive-foreground));
}
.dropdown-item.btn-outline {
  border: 1px solid hsl(var(--border));
  background-color: transparent;
  color: hsl(var(--foreground));
}
.dropdown-item.btn-outline:hover,
.dropdown-item.btn-outline:focus {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
.dropdown-item.btn-ghost:hover,
.dropdown-item.btn-ghost:focus,
.dropdown-item.btn-icon:not(.btn-subtle):not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-outline):hover,
.dropdown-item.btn-icon:not(.btn-subtle):not(.btn-default):not(.btn-primary):not(.btn-secondary):not(.btn-destructive):not(.btn-outline):focus {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
.dropdown-item.btn-link {
  background: transparent;
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dropdown-item.btn-link:hover,
.dropdown-item.btn-link:focus {
  text-decoration: none;
}
a.dropdown-trigger {
  text-decoration: none;
}
a.dropdown-trigger:hover {
  text-decoration: none;
}
@media (max-width: 768px) {
  .dropdown .dropdown-content {
    left: 0;
    width: -moz-fit-content;
    width: fit-content;
    right: 0;
    min-width: 100%;
  }
}
/** @public Dark mode dropdown styles */
.dark .dropdown-content,
[data-theme="dark"] .dropdown-content {
  box-shadow: var(--shadow-xl);
}
/**
 * Table of Contents
 * Clean sidebar navigation with active state tracking
 * 
 * Desktop: Sticky sidebar on the right
 * Mobile: Horizontal bar inline with content
 */
/**
 * @section Table of Contents
 */
/** @public Table of contents container */
.toc {
  padding: var(--spacing-3) 0;
  /** @public TOC title */
  /** @public TOC list container */
  /** @public TOC link */
}
.toc-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: hsl(var(--foreground));
  margin-bottom: var(--spacing-4);
  padding: 0 var(--spacing-3);
}
.toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc-link {
  display: block;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
  line-height: 1.5;
  position: relative;
  /** @public Nested TOC link (h3) */
}
.toc-link:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent) / 0.1);
}
.toc-link.active {
  color: hsl(var(--foreground));
  background: hsl(var(--accent) / 0.15);
  font-weight: var(--font-medium);
}
.toc-link--nested {
  padding-left: var(--spacing-6);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground) / 0.8);
}
@media (min-width: 1025px) {
  .toc {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    width: 240px;
    flex-shrink: 0;
    align-self: flex-start;
  }
}
@media (max-width: 1024px) {
  .toc {
    position: static;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    margin: var(--spacing-6) 0;
    padding: var(--spacing-4);
    background: hsl(var(--muted) / 0.2);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
  }
  .toc-title {
    margin-bottom: var(--spacing-3);
  }
  .toc-list {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    gap: var(--gap-md);
    flex-wrap: nowrap;
    gap: var(--spacing-2);
  }
  .toc-list li {
    border: none;
    margin: 0;
  }
  .toc-link {
    padding: var(--spacing-2) var(--spacing-3);
    white-space: nowrap;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
  }
  .toc-link:hover {
    background: hsl(var(--accent) / 0.1);
  }
  .toc-link.active {
    background: hsl(var(--background));
  }
  .toc-link--nested {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
    font-size: var(--text-sm);
    opacity: 0.9;
  }
}
/** @public TOC mobile anchor - hidden on desktop */
@media (min-width: 1025px) {
  .toc-mobile-anchor {
    display: none;
  }
}
/** @public TOC sidebar container - hidden on mobile */
.toc-sidebar div[data-toc] {
  position: sticky;
  top: 80px;
}
@media (max-width: 1024px) {
  .toc-sidebar {
    display: none;
  }
}
/**
 * @section Progress Bar
 */
/** @public Base progress container */
.progress {
  width: 100%;
  height: 6px;
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
/** @public Small progress bar (4px) */
.progress-sm {
  height: 4px;
}
/** @public Medium progress bar (6px) - default */
.progress-md {
  height: 6px;
}
/** @public Large progress bar (8px) */
.progress-lg {
  height: 8px;
}
/** @public Extra large progress bar (12px) */
.progress-xl {
  height: 12px;
}
/** @public Progress bar fill */
.progress-bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: hsl(var(--primary));
  transition: width 0.3s ease;
}
/** @public Primary color progress bar */
.progress-bar-primary {
  background: hsl(var(--primary));
}
/** @public Success color progress bar */
.progress-bar-success {
  background: hsl(var(--success));
}
/** @public Warning color progress bar */
.progress-bar-warning {
  background: hsl(var(--warning));
}
/** @public Destructive color progress bar */
.progress-bar-destructive {
  background: hsl(var(--destructive));
}
/** @public Blue progress bar */
.progress-bar-blue {
  background: hsl(221, 83%, 53%);
}
/** @public Orange progress bar */
.progress-bar-orange {
  background: hsl(25, 95%, 53%);
}
/** @public Green progress bar */
.progress-bar-green {
  background: hsl(84, 81%, 44%);
}
/** @public Indeterminate animated progress bar */
.progress-indeterminate .progress-bar {
  width: 40% !important;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}
@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}
/**
 * @section Segmented Indicator
 */
/** @public Segmented indicator container */
.indicator-segments {
  display: flex;
  gap: 4px;
  align-items: center;
}
/** @public Individual segment (24x6px) */
.indicator-segment {
  width: 24px;
  height: 6px;
  background: hsl(var(--muted) / 0.3);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}
.indicator-segment.active {
  background: hsl(var(--success));
}
/** @public Small segment (16x4px) */
.indicator-segment-sm {
  width: 16px;
  height: 4px;
}
/** @public Large segment (32x8px) */
.indicator-segment-lg {
  width: 32px;
  height: 8px;
}
/** @public Primary color segment */
.indicator-segment-primary.active {
  background: hsl(var(--primary));
}
/** @public Success color segment */
.indicator-segment-success.active {
  background: hsl(var(--success));
}
/** @public Warning color segment */
.indicator-segment-warning.active {
  background: hsl(var(--warning));
}
/** @public Destructive color segment */
.indicator-segment-destructive.active {
  background: hsl(var(--destructive));
}
/** @public Blue color segment */
.indicator-segment-blue.active {
  background: hsl(221, 83%, 53%);
}
/** @public Orange color segment */
.indicator-segment-orange.active {
  background: hsl(25, 95%, 53%);
}
/** @public Green color segment */
.indicator-segment-green.active {
  background: hsl(84, 81%, 44%);
}
/**
 * @section Containers
 */
/** @public Fluid container with responsive padding */
.container {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}
/** @public Small container - 640px max-width */
.container-sm {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  max-width: 640px;
}
/** @public Medium container - 768px max-width */
.container-md {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  max-width: 768px;
}
/** @public Large container - 1024px max-width */
.container-lg {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  max-width: 1024px;
}
/** @public Extra large container - 1280px max-width */
.container-xl {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  max-width: 1280px;
}
/** @public 2XL container - 1536px max-width */
.container-2xl {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  max-width: 1536px;
}
/**
 * @section Page Layout
 */
/** @public Full-height page wrapper */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/** @public Page header section */
.page-header {
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  padding: var(--spacing-4);
}
/** @public Main content area - grows to fill space */
.page-main {
  flex: 1;
  padding: var(--spacing-6);
}
/** @public Page footer section */
.page-footer {
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  padding: var(--spacing-4);
}
/**
 * @section Sidebar Layout
 */
/** @public Grid layout with sidebar */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 0;
  min-height: 100vh;
}
/** @public Sidebar container */
.sidebar {
  border-right: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  padding: var(--spacing-6);
  overflow-y: auto;
}
/** @public Sidebar navigation list */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
@media (max-width: 768px) {
  .layout-with-sidebar {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none;
  }
  .sidebar.mobile-visible {
    display: block;
  }
}
/**
 * @section Sections
 */
/** @public Section container with responsive spacing */
.section {
  --section-padding: var(--spacing-8);
  --section-gap: var(--gap-lg);
  --section-margin: var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding: var(--section-padding);
  margin-bottom: var(--section-margin);
}
@media (max-width: 768px) {
  .section {
    --section-padding: var(--spacing-4);
    --section-gap: var(--gap-md);
    --section-margin: var(--spacing-4);
  }
}
@media (max-width: 480px) {
  .section {
    --section-padding: var(--spacing-3);
    --section-gap: var(--gap-sm);
    --section-margin: var(--spacing-3);
  }
}
/** @public Bordered section variant */
.section-bordered {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
}
/** @public Card-style section */
.section-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/** @public Elevated section with stronger shadow */
.section-elevated {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/** @public Muted background section */
.section-muted {
  background-color: hsl(var(--muted));
  border-radius: var(--radius-lg);
}
/** @public Compact section - reduced padding */
.section-compact {
  --section-padding: var(--spacing-6);
  --section-gap: var(--gap-md);
}
@media (max-width: 768px) {
  .section-compact {
    --section-padding: var(--spacing-3);
    --section-gap: var(--gap-sm);
  }
}
@media (max-width: 480px) {
  .section-compact {
    --section-padding: var(--spacing-2);
    --section-gap: var(--gap-xs);
  }
}
/** @public Spacious section - increased padding */
.section-spacious {
  --section-padding: var(--spacing-12);
  --section-gap: var(--gap-xl);
}
@media (max-width: 768px) {
  .section-spacious {
    --section-padding: var(--spacing-6);
    --section-gap: var(--gap-lg);
  }
}
@media (max-width: 480px) {
  .section-spacious {
    --section-padding: var(--spacing-4);
    --section-gap: var(--gap-md);
  }
}
/** @public Narrow section - max 768px centered */
.section-narrow {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}
/** @public Full width section */
.section-full {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}
/** @public Section with no gap */
.section-no-gap {
  gap: 0;
}
/** @public Horizontal section layout */
.section-horizontal {
  flex-direction: row;
  align-items: center;
}
/**
 * @section Legacy v1 Patterns
 */
/** @public Narrow container - v1 compatible */
.narrow {
  --container-padding-x: clamp(var(--spacing-4), 6vw, var(--spacing-8));
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}
/** @public Layout wrapper - v1 compatible */
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/** @public Centered layout modifier */
.layout--centered {
  align-items: center;
  justify-content: center;
}
/** @public Fullscreen layout modifier */
.layout--fullscreen {
  height: 100vh;
}
/** @public Fixed header layout modifier */
.layout--fixed-header .layout-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
}
.layout--fixed-header .layout-main {
  margin-top: 64px;
}
/** @public Sidebar left layout modifier */
.layout--sidebar-left,
.layout--sidebar-right {
  flex-direction: row;
}
.layout--sidebar-left .layout-sidebar,
.layout--sidebar-right .layout-sidebar {
  width: 250px;
  flex-shrink: 0;
}
.layout--sidebar-left .layout-main,
.layout--sidebar-right .layout-main {
  flex: 1;
}
/** @public Sidebar right layout modifier */
.layout--sidebar-right {
  flex-direction: row-reverse;
}
@media (max-width: 768px) {
  .layout--stack {
    flex-direction: column;
  }
  .layout--hide-sidebar .layout-sidebar {
    display: none;
  }
}
/** @public Layout header */
.layout-header {
  padding: var(--spacing-4);
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
}
/** @public Layout main content */
.layout-main {
  flex: 1;
  padding: var(--spacing-6);
  overflow: auto;
}
/** @public Layout footer */
.layout-footer {
  padding: var(--spacing-4);
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
}
/** @public Layout sidebar */
.layout-sidebar {
  padding: var(--spacing-3);
  border-right: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  overflow: auto;
  transition: transform 0.3s ease, width 0.3s ease;
}
/** @public Compact layout sidebar */
.layout-sidebar--compact {
  padding: var(--spacing-1);
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.sidebar-nav .btn {
  justify-content: flex-start;
  width: 100%;
  text-align: left;
}
.sidebar-nav .btn i {
  margin-right: var(--spacing-2);
  width: 1.25rem;
  text-align: center;
}
/** @public Collapsed sidebar layout */
.layout--sidebar-collapsed .layout-sidebar {
  width: 60px;
  padding: var(--spacing-4);
}
.layout--sidebar-collapsed .layout-sidebar .sidebar-nav {
  gap: var(--spacing-1);
}
.layout--sidebar-collapsed .layout-sidebar .sidebar-nav .btn {
  justify-content: center;
  padding: var(--spacing-3);
  width: 100%;
  min-width: unset;
}
.layout--sidebar-collapsed .layout-sidebar .sidebar-nav .btn span {
  display: none;
}
.layout--sidebar-collapsed .layout-sidebar .sidebar-nav .btn i {
  margin-right: 0;
}
.layout--sidebar-collapsed .layout-sidebar .sidebar-header {
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-bottom: var(--spacing-4) !important;
}
.layout--sidebar-collapsed .layout-sidebar .sidebar-header h1,
.layout--sidebar-collapsed .layout-sidebar .sidebar-header h2,
.layout--sidebar-collapsed .layout-sidebar .sidebar-header h3,
.layout--sidebar-collapsed .layout-sidebar .sidebar-header h4,
.layout--sidebar-collapsed .layout-sidebar .sidebar-header h5,
.layout--sidebar-collapsed .layout-sidebar .sidebar-header h6,
.layout--sidebar-collapsed .layout-sidebar .sidebar-header p,
.layout--sidebar-collapsed .layout-sidebar .sidebar-header div {
  display: none;
}
.layout--sidebar-collapsed .layout-sidebar .sidebar-header .btn {
  display: flex;
}
.layout--sidebar-collapsed .layout-sidebar .sidebar-header .btn i {
  transform: rotate(180deg);
}
.layout--sidebar-collapsed .layout-sidebar .sidebar-footer {
  text-align: center;
}
.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h1,
.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h2,
.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h3,
.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h4,
.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h5,
.layout--sidebar-collapsed .layout-sidebar .sidebar-footer h6,
.layout--sidebar-collapsed .layout-sidebar .sidebar-footer p {
  display: none;
}
/** @public Mobile-only elements (hidden on desktop) */
.mobile-only {
  display: none;
}
@media (max-width: 768px) {
  .mobile-only {
    display: flex;
  }
  /** @public Mobile sidebar layout with overlay */
  .layout--sidebar-mobile .layout-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 9999;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }
  .layout--sidebar-mobile.sidebar-open .layout-sidebar {
    transform: translateX(0);
  }
  .layout--sidebar-mobile.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    cursor: pointer;
  }
  .layout--sidebar-right.layout--sidebar-mobile .layout-sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  .layout--sidebar-right.layout--sidebar-mobile.sidebar-open .layout-sidebar {
    transform: translateX(0);
  }
}
/** @public Layout navigation bar */
.layout-nav {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background-color: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
}
/**
 * @section Marketing Patterns
 */
/** @public Feature row - horizontal feature display */
.feature-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}
.feature-row:hover {
  box-shadow: var(--shadow-soft);
}
/** @public Feature row reversed - icon/image on right */
.feature-row-reverse {
  flex-direction: row-reverse;
}
/** @public Feature icon - colored icon container */
.feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
}
/** @public Hero card - large gradient card for landing pages */
.card-hero {
  background: var(--gradient-muted-card, linear-gradient(135deg, hsl(var(--muted)), hsl(var(--card))));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hero, 0 8px 32px 0 rgba(0, 0, 0, 0.08));
  padding: var(--spacing-12) var(--spacing-10);
  min-height: 420px;
  margin-bottom: var(--spacing-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/** @public Hero card body - content wrapper */
.card-hero-body {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6);
}
.card-hero .row {
  margin-top: var(--spacing-2);
}
.card-hero .btn {
  margin-right: var(--spacing-2);
}
/** @public Avatar stack - overlapping avatars */
.avatar-stack {
  display: flex;
}
.avatar-stack .avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: white;
  border: 3px solid hsl(var(--background));
  box-shadow: var(--shadow-soft);
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
}
.avatar-stack .avatar + .avatar {
  margin-left: -0.75rem;
}
/** @public Icon tile - feature tile with icon */
.icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  font-weight: 500;
  font-size: var(--text-sm);
  gap: var(--spacing-1);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.icon-tile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px) scale(1.03);
}
.icon-tile i {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-1);
}
.icon-tile.gradient-green,
.icon-tile.gradient-fuchsia,
.icon-tile.gradient-cyan,
.icon-tile.gradient-rose,
.icon-tile.gradient-mint,
.icon-tile.gradient-primary-accent {
  color: #fff;
}
/** @public Small icon tile */
.icon-tile-sm {
  min-width: 2rem;
  min-height: 2rem;
}
/** @public Medium icon tile */
.icon-tile-md {
  min-width: 2.5rem;
  min-height: 2.5rem;
}
/** @public Full rounded corners - duplicate utility */
.rounded-full {
  border-radius: var(--radius-full);
}
/**
 * @section Display
 */
/** @public Block display */
.block {
  display: block;
}
/** @public Inline-block display */
.inline-block {
  display: inline-block;
}
/** @public Inline display */
.inline {
  display: inline;
}
/** @public Hide element (display: none) */
.hidden {
  display: none;
}
/** @public Invisible (visibility: hidden) */
.invisible {
  visibility: hidden;
}
/** @public Vanish - hide with both display and visibility */
.vanish {
  display: none !important;
  visibility: hidden !important;
}
/**
 * @section Position
 */
/** @public Relative positioning */
.relative {
  position: relative;
}
/** @public Absolute positioning */
.absolute {
  position: absolute;
}
/** @public Fixed positioning */
.fixed {
  position: fixed;
}
/** @public Sticky positioning */
.sticky {
  position: sticky;
}
/**
 * @section Size
 */
/** @public Full width (100%) */
.full-width {
  width: 100%;
}
/** @public Full height (100%) */
.full-height {
  height: 100%;
}
/** @public Full viewport height */
.full-viewport-height {
  height: 100vh;
}
/** @public Full viewport width */
.full-viewport-width {
  width: 100vw;
}
/** @public Max full width */
.max-full-width {
  max-width: 100%;
}
/** @public Min full height */
.min-full-height {
  min-height: 100%;
}
/** @public Full width - v1 compat */
.full-x {
  width: 100%;
}
/** @public Full height - v1 compat */
.full-y {
  height: 100%;
}
/** @public Full width and height - v1 compat */
.full {
  width: 100%;
  height: 100%;
}
/**
 * @section Overflow
 */
/** @public Auto overflow */
.overflow-auto {
  overflow: auto;
}
/** @public Hidden overflow */
.overflow-hidden {
  overflow: hidden;
}
/** @public Visible overflow */
.overflow-visible {
  overflow: visible;
}
/** @public Scroll overflow */
.overflow-scroll {
  overflow: scroll;
}
/**
 * @section Cursor
 */
/** @public Pointer cursor */
.cursor-pointer {
  cursor: pointer;
}
/** @public Default cursor */
.cursor-default {
  cursor: default;
}
/** @public Not-allowed cursor */
.cursor-not-allowed {
  cursor: not-allowed;
}
/**
 * @section User Select
 */
/** @public Disable text selection */
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/** @public Enable text selection */
.select-text {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
/** @public Select all text */
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
/**
 * @section Pointer Events
 */
/** @public Disable pointer events */
.pointer-events-none {
  pointer-events: none;
}
/** @public Enable pointer events */
.pointer-events-auto {
  pointer-events: auto;
}
/**
 * @section Z-Index
 */
/** @public Z-index 0 */
.z-0 {
  z-index: 0;
}
/** @public Z-index 10 */
.z-10 {
  z-index: 10;
}
/** @public Z-index 20 */
.z-20 {
  z-index: 20;
}
/** @public Z-index 30 */
.z-30 {
  z-index: 30;
}
/** @public Z-index 40 */
.z-40 {
  z-index: 40;
}
/** @public Z-index 50 */
.z-50 {
  z-index: 50;
}
/**
 * @section Borders
 */
/** @public 1px border all sides */
.border {
  border: 1px solid hsl(var(--border));
}
/** @public Top border */
.border-t {
  border-top: 1px solid hsl(var(--border));
}
/** @public Right border */
.border-r {
  border-right: 1px solid hsl(var(--border));
}
/** @public Bottom border */
.border-b {
  border-bottom: 1px solid hsl(var(--border));
}
/** @public Left border */
.border-l {
  border-left: 1px solid hsl(var(--border));
}
/** @public Horizontal borders */
.border-x {
  border-left: 1px solid hsl(var(--border));
  border-right: 1px solid hsl(var(--border));
}
/** @public Vertical borders */
.border-y {
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
}
/** @public No border */
.border-none {
  border: none;
}
/** @public 0px border */
.border-0 {
  border: 0 solid hsl(var(--border));
}
/** @public 2px border */
.border-2 {
  border: 2px solid hsl(var(--border));
}
/** @public 4px border */
.border-4 {
  border: 4px solid hsl(var(--border));
}
/** @public 8px border */
.border-8 {
  border: 8px solid hsl(var(--border));
}
/** @public Solid border style */
.border-solid {
  border-style: solid;
}
/** @public Dashed border style */
.border-dashed {
  border-style: dashed;
}
/** @public Dotted border style */
.border-dotted {
  border-style: dotted;
}
/** @public Double border style */
.border-double {
  border-style: double;
}
/** @public Dashed border shortcut */
.dash {
  border: 1px dashed hsl(var(--border));
}
/** @public Dotted border shortcut */
.dotted {
  border: 1px dotted hsl(var(--border));
}
/** @public Medium border radius */
.rounded {
  border-radius: var(--radius-md);
}
/** @public Small border radius */
.rounded-sm {
  border-radius: var(--radius-sm);
}
/** @public Large border radius */
.rounded-lg {
  border-radius: var(--radius-lg);
}
/** @public Extra large border radius */
.rounded-xl {
  border-radius: var(--radius-xl);
}
/** @public 2XL border radius */
.rounded-2xl {
  border-radius: var(--radius-2xl);
}
/** @public Full/circle border radius */
.rounded-full {
  border-radius: var(--radius-full);
}
/** @public No border radius */
.rounded-none {
  border-radius: 0;
}
/** @public Rounded top */
.rounded-t {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
/** @public Rounded right */
.rounded-r {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
/** @public Rounded bottom */
.rounded-b {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
/** @public Rounded left */
.rounded-l {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
/** @public Rounded top-left corner */
.rounded-tl {
  border-top-left-radius: var(--radius-md);
}
/** @public Rounded top-right corner */
.rounded-tr {
  border-top-right-radius: var(--radius-md);
}
/** @public Rounded bottom-right corner */
.rounded-br {
  border-bottom-right-radius: var(--radius-md);
}
/** @public Rounded bottom-left corner */
.rounded-bl {
  border-bottom-left-radius: var(--radius-md);
}
/**
 * @section Aspect Ratio
 */
/** @public Square aspect ratio (1:1) */
.aspect-square {
  aspect-ratio: 1 / 1;
}
/** @public Video aspect ratio (16:9) */
.aspect-video {
  aspect-ratio: 16 / 9;
}
/**
 * @section Dividers
 */
/** @public Horizontal divider */
.divider {
  height: 1px;
  background-color: hsl(var(--border));
  margin: var(--spacing-4) 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.divider:has(span)::before,
.divider:has(span)::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: hsl(var(--border));
}
.divider:has(span) span {
  padding: 0 var(--spacing-3);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--card));
  white-space: nowrap;
}
/** @public Vertical divider */
.divider-vertical {
  width: 1px;
  height: 100%;
  background-color: hsl(var(--border));
  margin: 0 var(--spacing-4);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.divider-vertical:has(span)::before,
.divider-vertical:has(span)::after {
  content: '';
  flex: 1;
  width: 1px;
  background-color: hsl(var(--border));
}
.divider-vertical:has(span) span {
  padding: var(--spacing-2) 0;
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--card));
  white-space: nowrap;
}
.divider-vertical.divider-vertical-text span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: var(--spacing-3);
  font-size: var(--text-sm);
}
/**
 * @section Effects
 */
/** @public Sunken surface effect */
.sunken-surface {
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
}
/* Dark mode override */
.dark .sunken-surface {
  background-color: #222222;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.6), inset -2px -2px 4px rgba(255, 255, 255, 0.1);
}
/** @public Surface separator - thin sunken divider */
.surface-separator {
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
  height: 3px;
}
/** @public Full-screen overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 50;
}
/** @public Glassmorphism effect */
.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}
.dark .glass,
[data-theme="dark"] .glass {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}
/** @public Tooltip with data-tooltip attribute */
.tooltip {
  position: relative;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: hsl(var(--foreground));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}
.tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.tooltip:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
/**
 * @section Scroll
 */
/** @public Auto scroll with smooth scrolling */
.scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/** @public Horizontal scroll only */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
/** @public Vertical scroll only */
.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/**
 * @section Layout Helpers
 */
/** @public Center with auto margin */
.centered {
  margin-left: auto;
  margin-right: auto;
}
/** @public Contents display mode */
.contents {
  display: contents;
}
/**
 * @section Text Utilities
 */
/** @public Text truncate with ellipsis */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/** @public Clamp text to 1 line */
.text-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/** @public Clamp text to 2 lines */
.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/** @public Clamp text to 3 lines */
.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/** @public Clamp text to 4 lines */
.text-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/** @public Clamp text to 5 lines */
.text-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/** @public Clamp text to 6 lines */
.text-clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/** @public Flex grow/shrink - v1 compat */
.flex {
  flex: 1 1 0%;
}
/** @public Locked flex (no grow/shrink) - v1 compat */
.flex-locked {
  flex: 0 0 auto;
}
/** @public Display flex - v1 compat */
.x-flex {
  display: flex;
}
/** @public Default gap - v1 compat */
.gap {
  gap: var(--gap-md);
}
/**
 * @section Opacity
 */
/** @public Opacity 0 */
.opacity-0 {
  opacity: 0;
}
/** @public Opacity 25% */
.opacity-25 {
  opacity: 0.25;
}
/** @public Opacity 50% */
.opacity-50 {
  opacity: 0.5;
}
/** @public Opacity 75% */
.opacity-75 {
  opacity: 0.75;
}
/** @public Opacity 100% */
.opacity-100 {
  opacity: 1;
}
/**
 * @section Background
 */
/** @public Transparent background */
.bg-transparent {
  background-color: transparent;
}
/** @public Translucent surface background */
.bg-surface-translucent {
  background: hsl(var(--background) / 0.85);
}
/** @public Subtle muted background */
.bg-muted-subtle {
  background: hsl(var(--muted) / 0.3);
}
/** @public Left text alignment */
.text-left {
  text-align: left;
}
/** @public Center text alignment */
.text-center {
  text-align: center;
}
/** @public Right text alignment */
.text-right {
  text-align: right;
}
/** @public Justify text alignment */
.text-justify {
  text-align: justify;
}
/**
 * @section Text Transform
 */
/** @public Uppercase text */
.uppercase {
  text-transform: uppercase;
}
/** @public Lowercase text */
.lowercase {
  text-transform: lowercase;
}
/** @public Capitalize text */
.capitalize {
  text-transform: capitalize;
}
/** @public Normal case (no transform) */
.normal-case {
  text-transform: none;
}
/**
 * @section Letter Spacing
 */
/** @public Tighter tracking */
.tracking-tighter {
  letter-spacing: -0.025em;
}
/** @public Tight tracking */
.tracking-tight {
  letter-spacing: -0.05em;
}
/** @public Normal tracking */
.tracking-normal {
  letter-spacing: 0em;
}
/** @public Wide tracking */
.tracking-wide {
  letter-spacing: 0.05em;
}
/** @public Wider tracking */
.tracking-wider {
  letter-spacing: 0.1em;
}
/** @public Widest tracking */
.tracking-widest {
  letter-spacing: 0.15em;
}
/**
 * @section Font Style
 */
/** @public Italic font style */
.italic {
  font-style: italic;
}
/** @public Not italic */
.not-italic {
  font-style: normal;
}
/**
 * @section Text Decoration
 */
/** @public Underline text */
.underline {
  text-decoration: underline;
}
/** @public Line-through text */
.line-through {
  text-decoration: line-through;
}
/** @public No underline */
.no-underline {
  text-decoration: none;
}
/**
 * @section Whitespace
 */
/** @public Normal whitespace */
.whitespace-normal {
  white-space: normal;
}
/** @public No-wrap whitespace */
.whitespace-nowrap {
  white-space: nowrap;
}
/** @public Pre whitespace */
.whitespace-pre {
  white-space: pre;
}
/** @public Pre-wrap whitespace */
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
/**
 * @section List Style
 */
/** @public No list style */
.list-none {
  list-style-type: none;
}
/** @public Disc list style */
.list-disc {
  list-style-type: disc;
}
/** @public Decimal list style */
.list-decimal {
  list-style-type: decimal;
}
/**
 * @section Object Fit
 */
/** @public Object fit contain */
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
/** @public Object fit cover */
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
/** @public Object fit fill */
.object-fill {
  -o-object-fit: fill;
     object-fit: fill;
}
/** @public Object fit none */
.object-none {
  -o-object-fit: none;
     object-fit: none;
}
/** @public Object fit scale-down */
.object-scale-down {
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
/**
 * @section Object Position
 */
/** @public Object position center */
.object-center {
  -o-object-position: center;
     object-position: center;
}
/** @public Object position top */
.object-top {
  -o-object-position: top;
     object-position: top;
}
/** @public Object position bottom */
.object-bottom {
  -o-object-position: bottom;
     object-position: bottom;
}
/** @public Object position left */
.object-left {
  -o-object-position: left;
     object-position: left;
}
/** @public Object position right */
.object-right {
  -o-object-position: right;
     object-position: right;
}
/**
 * @section Transform Origin
 */
/** @public Transform origin center */
.origin-center {
  transform-origin: center;
}
/** @public Transform origin top */
.origin-top {
  transform-origin: top;
}
/** @public Transform origin bottom */
.origin-bottom {
  transform-origin: bottom;
}
/** @public Transform origin left */
.origin-left {
  transform-origin: left;
}
/** @public Transform origin right */
.origin-right {
  transform-origin: right;
}
/**
 * @section Scale
 */
/** @public Scale to 0 */
.scale-0 {
  transform: scale(0);
}
/** @public Scale to 50% */
.scale-50 {
  transform: scale(0.5);
}
/** @public Scale to 75% */
.scale-75 {
  transform: scale(0.75);
}
/** @public Scale to 90% */
.scale-90 {
  transform: scale(0.9);
}
/** @public Scale to 95% */
.scale-95 {
  transform: scale(0.95);
}
/** @public Scale to 100% */
.scale-100 {
  transform: scale(1);
}
/** @public Scale to 105% */
.scale-105 {
  transform: scale(1.05);
}
/** @public Scale to 110% */
.scale-110 {
  transform: scale(1.1);
}
/** @public Scale to 125% */
.scale-125 {
  transform: scale(1.25);
}
/** @public Scale to 150% */
.scale-150 {
  transform: scale(1.5);
}
/**
 * @section Rotate
 */
/** @public Rotate 0 degrees */
.rotate-0 {
  transform: rotate(0deg);
}
/** @public Rotate 45 degrees */
.rotate-45 {
  transform: rotate(45deg);
}
/** @public Rotate 90 degrees */
.rotate-90 {
  transform: rotate(90deg);
}
/** @public Rotate 180 degrees */
.rotate-180 {
  transform: rotate(180deg);
}
/** @public Rotate 270 degrees */
.rotate-270 {
  transform: rotate(270deg);
}
/** @public Rotate -45 degrees */
.-rotate-45 {
  transform: rotate(-45deg);
}
/** @public Rotate -90 degrees */
.-rotate-90 {
  transform: rotate(-90deg);
}
/** @public Rotate -180 degrees */
.-rotate-180 {
  transform: rotate(-180deg);
}
/**
 * @section Ring & Outline
 */
/** @public Ring (focus ring) */
.ring {
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
}
/** @public Inset ring */
.ring-inset {
  box-shadow: inset 0 0 0 3px hsl(var(--ring) / 0.5);
}
/** @public No ring */
.ring-none {
  box-shadow: none;
}
/** @public No outline */
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
/** @public Outline */
.outline {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
/** @public Dashed outline */
.outline-dashed {
  outline: 2px dashed hsl(var(--ring));
  outline-offset: 2px;
}
/** @public Inner shadow */
.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
/**
 * @section Image & Media
 */
/** @public Crisp image rendering */
.image-crisp {
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}
/** @public Auto image rendering */
.image-auto {
  image-rendering: auto;
}
/**
 * @section Mix Blend Mode
 */
/** @public Normal blend mode */
.mix-blend-normal {
  mix-blend-mode: normal;
}
/** @public Multiply blend mode */
.mix-blend-multiply {
  mix-blend-mode: multiply;
}
/** @public Screen blend mode */
.mix-blend-screen {
  mix-blend-mode: screen;
}
/** @public Overlay blend mode */
.mix-blend-overlay {
  mix-blend-mode: overlay;
}
/**
 * @section Backdrop Filter
 */
/** @public Small backdrop blur */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/** @public Medium backdrop blur */
.backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/** @public Large backdrop blur (12px) */
.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/** @public Extra large backdrop blur (16px) */
.backdrop-blur-lg {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/** @public 2XL backdrop blur (24px) */
.backdrop-blur-xl {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
/** @public No backdrop blur */
.backdrop-blur-none {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}
/**
 * @section Vertical Alignment
 */
/** @public Baseline vertical alignment */
.align-baseline {
  vertical-align: baseline;
}
/** @public Top vertical alignment */
.align-top {
  vertical-align: top;
}
/** @public Middle vertical alignment */
.align-middle {
  vertical-align: middle;
}
/** @public Bottom vertical alignment */
.align-bottom {
  vertical-align: bottom;
}
/** @public Text-top vertical alignment */
.align-text-top {
  vertical-align: text-top;
}
/** @public Text-bottom vertical alignment */
.align-text-bottom {
  vertical-align: text-bottom;
}
/**
 * @section Word Break
 */
/** @public Normal break behavior */
.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}
/** @public Break words */
.break-words {
  overflow-wrap: break-word;
}
/** @public Break all */
.break-all {
  word-break: break-all;
}
/**
 * @section Resize
 */
/** @public No resize */
.resize-none {
  resize: none;
}
/** @public Both resize */
.resize {
  resize: both;
}
/** @public Horizontal resize */
.resize-x {
  resize: horizontal;
}
/** @public Vertical resize */
.resize-y {
  resize: vertical;
}
/**
 * @section Touch Action
 */
/** @public Auto touch action */
.touch-auto {
  touch-action: auto;
}
/** @public No touch action */
.touch-none {
  touch-action: none;
}
/** @public Pan-x touch action */
.touch-pan-x {
  touch-action: pan-x;
}
/** @public Pan-y touch action */
.touch-pan-y {
  touch-action: pan-y;
}
/**
 * @section Performance
 */
/** @public Auto will-change */
.will-change-auto {
  will-change: auto;
}
/** @public Will-change scroll */
.will-change-scroll {
  will-change: scroll-position;
}
/** @public Will-change contents */
.will-change-contents {
  will-change: contents;
}
/** @public Will-change transform */
.will-change-transform {
  will-change: transform;
}
/**
 * @section UI Components
 */
/** @public Section label - uppercase small heading */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: var(--leading-tight);
}
/** @public Dotted grid background */
.bg-dotted {
  background-image: radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: 0 0;
}
/** @public Demo dish - presentation wrapper */
.demo-dish {
  padding: var(--spacing-6);
  margin-top: var(--spacing-3);
  border: 2px dashed hsl(var(--border));
  border-radius: var(--radius-lg);
  background: hsl(var(--muted) / 0.2);
  position: relative;
  background-image: radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: 0 0;
}
.demo-dish::before {
  content: 'Demo';
  position: absolute;
  top: calc(-1 * var(--spacing-2));
  left: var(--spacing-4);
  background: hsl(var(--background));
  padding: 0 var(--spacing-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/** @public Compact demo dish */
.demo-dish-compact {
  padding: var(--spacing-4);
}
/** @public Spacious demo dish */
.demo-dish-spacious {
  padding: var(--spacing-8);
}
/**
 * @section Responsive Visibility
 */
@media (max-width: 480px) {
  /** @public Hide on extra small screens */
  .xs-hide {
    display: none !important;
  }
  /** @public Show on extra small screens */
  .xs-show {
    display: block !important;
  }
}
@media (max-width: 640px) {
  /** @public Hide on small screens */
  .sm-hide {
    display: none !important;
  }
  /** @public Show on small screens */
  .sm-show {
    display: block !important;
  }
}
@media (max-width: 768px) {
  /** @public Hide on medium screens */
  .md-hide {
    display: none !important;
  }
  /** @public Show on medium screens */
  .md-show {
    display: block !important;
  }
}
@media (max-width: 1024px) {
  /** @public Hide on large screens */
  .lg-hide {
    display: none !important;
  }
  /** @public Show on large screens */
  .lg-show {
    display: block !important;
  }
}
@media (max-width: 640px) {
  /** @public Hide on mobile (deprecated) */
  .md-hidden {
    display: none !important;
  }
  /** @public Show on mobile (deprecated) */
  .md-visible {
    display: block !important;
  }
}
@media (max-width: 768px) {
  /** @public Hide on tablet (deprecated) */
  .tablet-hidden {
    display: none !important;
  }
  /** @public Show on tablet (deprecated) */
  .tablet-visible {
    display: block !important;
  }
}
@media (max-width: 1024px) {
  /** @public Hide on desktop (deprecated) */
  .desktop-hidden {
    display: none !important;
  }
  /** @public Show on desktop (deprecated) */
  .desktop-visible {
    display: block !important;
  }
}
/**
 * @section Prose Typography
 */
/** @public Rich typography for article content */
.prose {
  line-height: var(--leading-normal);
  max-width: 65ch;
}
.prose h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-6);
  margin-top: var(--spacing-8);
}
.prose h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-4);
  margin-top: var(--spacing-8);
}
.prose h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-4);
  margin-top: var(--spacing-6);
}
.prose h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--spacing-2);
  margin-top: var(--spacing-6);
}
.prose h5,
.prose h6 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  margin-bottom: var(--spacing-2);
  margin-top: var(--spacing-4);
}
.prose p {
  margin-bottom: var(--spacing-6);
}
.prose p + p {
  margin-top: calc(-1 * var(--spacing-2));
}
.prose ul,
.prose ol {
  margin-bottom: var(--spacing-6);
  padding-left: var(--spacing-6);
}
.prose li {
  margin-bottom: var(--spacing-2);
}
.prose li ul,
.prose li ol {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}
.prose blockquote {
  border-left: 4px solid hsl(var(--border));
  padding-left: var(--spacing-4);
  margin-left: 0;
  margin-right: 0;
  margin-bottom: var(--spacing-6);
  font-style: italic;
  color: hsl(var(--muted-foreground));
}
.prose code {
  background-color: hsl(var(--muted));
  color: hsl(var(--destructive));
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: 0.875em;
  font-family: var(--font-mono);
}
.prose pre {
  margin-bottom: var(--spacing-6);
}
.prose pre code {
  display: block;
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: var(--spacing-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.875em;
}
.prose hr {
  border: 0;
  height: 1px;
  background-color: hsl(var(--border));
  margin: var(--spacing-8) 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-6);
}
.prose table th {
  border-bottom: 2px solid hsl(var(--border));
  padding: var(--spacing-2) var(--spacing-4);
  text-align: left;
  font-weight: var(--font-semibold);
}
.prose table td {
  border-bottom: 1px solid hsl(var(--border));
  padding: var(--spacing-2) var(--spacing-4);
}
.prose table tr:last-child td {
  border-bottom: none;
}
.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition-base);
}
.prose a:hover {
  opacity: 0.8;
}
.prose img {
  max-width: 100%;
  height: auto;
  margin-bottom: var(--spacing-6);
  border-radius: var(--radius-sm);
}
.prose figure {
  margin: 0 0 var(--spacing-6) 0;
}
.prose figure figcaption {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  margin-top: var(--spacing-2);
  text-align: center;
}
/** @public Small prose variant */
.prose-sm {
  line-height: var(--leading-normal);
  max-width: 65ch;
  font-size: var(--text-sm);
}
.prose-sm h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-6);
  margin-top: var(--spacing-8);
}
.prose-sm h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-4);
  margin-top: var(--spacing-8);
}
.prose-sm h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-4);
  margin-top: var(--spacing-6);
}
.prose-sm h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--spacing-2);
  margin-top: var(--spacing-6);
}
.prose-sm h5,
.prose-sm h6 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  margin-bottom: var(--spacing-2);
  margin-top: var(--spacing-4);
}
.prose-sm p {
  margin-bottom: var(--spacing-6);
}
.prose-sm p + p {
  margin-top: calc(-1 * var(--spacing-2));
}
.prose-sm ul,
.prose-sm ol {
  margin-bottom: var(--spacing-6);
  padding-left: var(--spacing-6);
}
.prose-sm li {
  margin-bottom: var(--spacing-2);
}
.prose-sm li ul,
.prose-sm li ol {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}
.prose-sm blockquote {
  border-left: 4px solid hsl(var(--border));
  padding-left: var(--spacing-4);
  margin-left: 0;
  margin-right: 0;
  margin-bottom: var(--spacing-6);
  font-style: italic;
  color: hsl(var(--muted-foreground));
}
.prose-sm code {
  background-color: hsl(var(--muted));
  color: hsl(var(--destructive));
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: 0.875em;
  font-family: var(--font-mono);
}
.prose-sm pre {
  margin-bottom: var(--spacing-6);
}
.prose-sm pre code {
  display: block;
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: var(--spacing-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.875em;
}
.prose-sm hr {
  border: 0;
  height: 1px;
  background-color: hsl(var(--border));
  margin: var(--spacing-8) 0;
}
.prose-sm table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-6);
}
.prose-sm table th {
  border-bottom: 2px solid hsl(var(--border));
  padding: var(--spacing-2) var(--spacing-4);
  text-align: left;
  font-weight: var(--font-semibold);
}
.prose-sm table td {
  border-bottom: 1px solid hsl(var(--border));
  padding: var(--spacing-2) var(--spacing-4);
}
.prose-sm table tr:last-child td {
  border-bottom: none;
}
.prose-sm a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition-base);
}
.prose-sm a:hover {
  opacity: 0.8;
}
.prose-sm img {
  max-width: 100%;
  height: auto;
  margin-bottom: var(--spacing-6);
  border-radius: var(--radius-sm);
}
.prose-sm figure {
  margin: 0 0 var(--spacing-6) 0;
}
.prose-sm figure figcaption {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  margin-top: var(--spacing-2);
  text-align: center;
}
.prose-sm h1 {
  font-size: var(--text-xl);
}
.prose-sm h2 {
  font-size: var(--text-lg);
}
.prose-sm h3 {
  font-size: var(--text-base);
}
/** @public Large prose variant */
.prose-lg {
  line-height: var(--leading-normal);
  max-width: 65ch;
  font-size: var(--text-lg);
}
.prose-lg h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-6);
  margin-top: var(--spacing-8);
}
.prose-lg h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-4);
  margin-top: var(--spacing-8);
}
.prose-lg h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-4);
  margin-top: var(--spacing-6);
}
.prose-lg h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--spacing-2);
  margin-top: var(--spacing-6);
}
.prose-lg h5,
.prose-lg h6 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  margin-bottom: var(--spacing-2);
  margin-top: var(--spacing-4);
}
.prose-lg p {
  margin-bottom: var(--spacing-6);
}
.prose-lg p + p {
  margin-top: calc(-1 * var(--spacing-2));
}
.prose-lg ul,
.prose-lg ol {
  margin-bottom: var(--spacing-6);
  padding-left: var(--spacing-6);
}
.prose-lg li {
  margin-bottom: var(--spacing-2);
}
.prose-lg li ul,
.prose-lg li ol {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}
.prose-lg blockquote {
  border-left: 4px solid hsl(var(--border));
  padding-left: var(--spacing-4);
  margin-left: 0;
  margin-right: 0;
  margin-bottom: var(--spacing-6);
  font-style: italic;
  color: hsl(var(--muted-foreground));
}
.prose-lg code {
  background-color: hsl(var(--muted));
  color: hsl(var(--destructive));
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: 0.875em;
  font-family: var(--font-mono);
}
.prose-lg pre {
  margin-bottom: var(--spacing-6);
}
.prose-lg pre code {
  display: block;
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: var(--spacing-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.875em;
}
.prose-lg hr {
  border: 0;
  height: 1px;
  background-color: hsl(var(--border));
  margin: var(--spacing-8) 0;
}
.prose-lg table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-6);
}
.prose-lg table th {
  border-bottom: 2px solid hsl(var(--border));
  padding: var(--spacing-2) var(--spacing-4);
  text-align: left;
  font-weight: var(--font-semibold);
}
.prose-lg table td {
  border-bottom: 1px solid hsl(var(--border));
  padding: var(--spacing-2) var(--spacing-4);
}
.prose-lg table tr:last-child td {
  border-bottom: none;
}
.prose-lg a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition-base);
}
.prose-lg a:hover {
  opacity: 0.8;
}
.prose-lg img {
  max-width: 100%;
  height: auto;
  margin-bottom: var(--spacing-6);
  border-radius: var(--radius-sm);
}
.prose-lg figure {
  margin: 0 0 var(--spacing-6) 0;
}
.prose-lg figure figcaption {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  margin-top: var(--spacing-2);
  text-align: center;
}
.prose-lg h1 {
  font-size: calc(var(--text-4xl) * 1.1);
}
.prose-lg h2 {
  font-size: calc(var(--text-xl) * 1.1);
}
.prose-lg h3 {
  font-size: calc(var(--text-lg) * 1.1);
}
/** @public Prose layout - max-width constraint */
.prose-layout {
  max-width: 65ch;
}
/** @public Reset prose styles */
.no-prose {
  max-width: none !important;
  line-height: var(--leading-normal) !important;
}
.no-prose * {
  margin: 0 !important;
  padding: 0 !important;
}
/**
 * @section Gradient Backgrounds
 */
/** @public Primary to accent gradient */
.gradient-primary-accent {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
}
/** @public Green gradient */
.gradient-green {
  background: linear-gradient(135deg, #10b981, #34d399);
}
/** @public Purple gradient */
.gradient-purple {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}
/** @public Amber gradient */
.gradient-amber {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}
/** @public Blue gradient */
.gradient-blue {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}
/** @public Pink gradient */
.gradient-pink {
  background: linear-gradient(135deg, #ec4899, #f472b6);
}
/** @public Indigo gradient */
.gradient-indigo {
  background: linear-gradient(135deg, #667eea, #764ba2);
}
/** @public Fuchsia gradient */
.gradient-fuchsia {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}
/** @public Cyan gradient */
.gradient-cyan {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}
/** @public Mint gradient */
.gradient-mint {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}
/** @public Rose gradient */
.gradient-rose {
  background: linear-gradient(135deg, #fa709a, #fee140);
}
/** @public Muted to card gradient */
.gradient-muted-card {
  background: linear-gradient(135deg, hsl(var(--muted)), hsl(var(--card)));
}
/**
 * @section Demo Utilities
 */
/** @public Example frame for demo containers */
.example-frame {
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: transparent;
}
.example-frame.border-dashed {
  border-style: dashed;
}
/** @public 300px height helper */
.h-300 {
  height: 300px;
}
/** @public 400px height helper */
.h-400 {
  height: 400px;
}
:root {
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/**
 * @section Transitions
 */
/** @public No transition */
.transition-none {
  transition: none;
}
/** @public Transition all properties */
.transition-all {
  transition: all var(--transition-base);
}
/** @public Transition colors only */
.transition-colors {
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}
/** @public Transition opacity only */
.transition-opacity {
  transition: opacity var(--transition-base);
}
/** @public Transition transform only */
.transition-transform {
  transition: transform var(--transition-base);
}
/** @public Hover lift effect - raises element */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
/** @public Hover scale effect - grows slightly */
.hover-scale {
  transition: transform var(--transition-base);
}
.hover-scale:hover {
  transform: scale(1.05);
}
/** @public Focus ring - accessibility outline */
.focus-ring:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
/**
 * @section Flex Containers
 */
/** @public Horizontal flex with gap, wraps */
.row {
  display: flex;
  flex-direction: row;
  gap: var(--gap-md);
  flex-wrap: wrap;
}
/** @public Horizontal flex, no wrap */
.row-nowrap {
  display: flex;
  flex-direction: row;
  gap: var(--gap-md);
  flex-wrap: nowrap;
}
/** @public Vertical flex column with gap */
.col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
/**
 * @section Alignment Shortcuts
 */
/** @public Center both axes */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
/** @public Center horizontally */
.center-x {
  display: flex;
  justify-content: center;
}
/** @public Center vertically */
.center-y {
  display: flex;
  align-items: center;
}
/** @public Flex-start both axes */
.start {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
/** @public Flex-start horizontally */
.start-x {
  display: flex;
  justify-content: flex-start;
}
/** @public Flex-start vertically */
.start-y {
  display: flex;
  align-items: flex-start;
}
/** @public Flex-end both axes */
.end {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
/** @public Flex-end horizontally */
.end-x {
  display: flex;
  justify-content: flex-end;
}
/** @public Flex-end vertically */
.end-y {
  display: flex;
  align-items: flex-end;
}
/** @public Space-between with center-y */
.between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/** @public Space-between horizontally */
.between-x {
  display: flex;
  justify-content: space-between;
}
/** @public Space-around with center-y */
.around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/** @public Space-evenly with center-y */
.evenly {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
/**
 * @section Flex Items
 */
/** @public Grow/shrink equally */
.flex-1 {
  flex: 1 1 0%;
}
/** @public Grow/shrink to content */
.flex-auto {
  flex: 1 1 auto;
}
/** @public Don't flex */
.flex-none {
  flex: none;
}
/** @public Allow growing */
.flex-grow {
  flex-grow: 1;
}
/** @public Allow shrinking */
.flex-shrink {
  flex-shrink: 1;
}
/** @public Prevent shrinking */
.flex-no-shrink {
  flex-shrink: 0;
}
/** @public Enable flex wrap */
.wrap {
  flex-wrap: wrap;
}
/** @public Disable flex wrap */
.nowrap {
  flex-wrap: nowrap;
}
/**
 * @section Small Gap Variants
 */
/** @public Horizontal flex with small gap, wraps */
.row-xs {
  display: flex;
  flex-direction: row;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}
/** @public XS screen no-wrap row */
.row-xs-nowrap {
  display: flex;
  flex-direction: row;
  gap: var(--gap-sm);
  flex-wrap: nowrap;
}
/** @public Vertical flex column with small gap */
.col-xs {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
/**
 * @section Responsive Variants
 */
@media (max-width: 768px) {
  /** @public Direction change to column @768px */
  .md-col {
    flex-direction: column;
  }
  /** @public Direction change to row @768px */
  .md-row {
    flex-direction: row;
  }
  /** @public Center both axes @768px */
  .md-center {
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 480px) {
  /** @public Direction change to column @480px */
  .xs-col {
    flex-direction: column;
  }
  /** @public Direction change to row @480px */
  .xs-row {
    flex-direction: row;
  }
  /** @public Center both axes @480px */
  .xs-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /** @public Center horizontally @480px */
  .xs-center-x {
    display: flex;
    justify-content: center;
  }
  /** @public Center vertically @480px */
  .xs-center-y {
    display: flex;
    align-items: center;
  }
  /** @public Flex-start both axes @480px */
  .xs-start {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  /** @public Flex-start horizontally @480px */
  .xs-start-x {
    display: flex;
    justify-content: flex-start;
  }
  /** @public Flex-start vertically @480px */
  .xs-start-y {
    display: flex;
    align-items: flex-start;
  }
  /** @public Flex-end both axes @480px */
  .xs-end {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  /** @public Flex-end horizontally @480px */
  .xs-end-x {
    display: flex;
    justify-content: flex-end;
  }
  /** @public Flex-end vertically @480px */
  .xs-end-y {
    display: flex;
    align-items: flex-end;
  }
  /** @public Space-between with center-y @480px */
  .xs-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /** @public Space-between horizontally @480px */
  .xs-between-x {
    display: flex;
    justify-content: space-between;
  }
  /** @public Space-around with center-y @480px */
  .xs-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  /** @public Space-around horizontally @480px */
  .xs-around-x {
    display: flex;
    justify-content: space-around;
  }
  /** @public Space-evenly with center-y @480px */
  .xs-evenly {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  /** @public Space-evenly horizontally @480px */
  .xs-evenly-x {
    display: flex;
    justify-content: space-evenly;
  }
}
/**
 * @section Grid Base
 */
/** @public Display grid with gap */
.grid {
  display: grid;
  gap: var(--gap-md);
}
/**
 * @section Column Layouts
 */
/** @public 1 column grid */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
/** @public 2 column grid */
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/** @public 3 column grid */
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/** @public 4 column grid */
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/** @public 6 column grid */
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
/** @public 12 column grid */
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
/**
 * @section Auto Layouts
 */
/** @public Responsive auto-fit (min 250px) */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap-md);
}
/** @public Responsive auto-fill (min 250px) */
.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--gap-md);
}
/**
 * @section Item Spanning
 */
/** @public Span 1 column */
.col-span-1 {
  grid-column: span 1 / span 1;
}
/** @public Span 2 columns */
.col-span-2 {
  grid-column: span 2 / span 2;
}
/** @public Span 3 columns */
.col-span-3 {
  grid-column: span 3 / span 3;
}
/** @public Span 4 columns */
.col-span-4 {
  grid-column: span 4 / span 4;
}
/** @public Span 6 columns */
.col-span-6 {
  grid-column: span 6 / span 6;
}
/** @public Span all columns */
.col-span-full {
  grid-column: 1 / -1;
}
/**
 * @section Responsive
 */
@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-6,
  .grid-cols-12 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  /** @public Override to 2 columns @768px */
  .md-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .md-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}
/**
 * @section Flexible Space
 */
/** @public Flex-grow spacer */
.spacer {
  flex-grow: 1;
}
/**
 * @section Fixed Height Spacers
 */
/** @public Fixed height spacer (4px) */
.spacer-h-1 {
  height: var(--spacing-1);
}
/** @public Fixed height spacer (8px) */
.spacer-h-2 {
  height: var(--spacing-2);
}
/** @public Fixed height spacer (16px) */
.spacer-h-4 {
  height: var(--spacing-4);
}
/** @public Fixed height spacer (32px) */
.spacer-h-8 {
  height: var(--spacing-8);
}
/**
 * @section Fixed Width Spacers
 */
/** @public Fixed width spacer (4px) */
.spacer-w-1 {
  width: var(--spacing-1);
}
/** @public Fixed width spacer (8px) */
.spacer-w-2 {
  width: var(--spacing-2);
}
/** @public Fixed width spacer (16px) */
.spacer-w-4 {
  width: var(--spacing-4);
}
/** @public Fixed width spacer (32px) */
.spacer-w-8 {
  width: var(--spacing-8);
}
/**
 * @section Responsive Spacers
 */
@media (max-width: 480px) {
  /** @public Flex-grow spacer @480px */
  .xs-spacer {
    flex-grow: 1;
  }
  /** @public Fixed height (4px) @480px */
  .xs-spacer-h-1 {
    height: var(--spacing-1);
  }
  /** @public Fixed height (8px) @480px */
  .xs-spacer-h-2 {
    height: var(--spacing-2);
  }
  /** @public Fixed height (16px) @480px */
  .xs-spacer-h-4 {
    height: var(--spacing-4);
  }
  /** @public Fixed height (32px) @480px */
  .xs-spacer-h-8 {
    height: var(--spacing-8);
  }
  /** @public Fixed width (4px) @480px */
  .xs-spacer-w-1 {
    width: var(--spacing-1);
  }
  /** @public Fixed width (8px) @480px */
  .xs-spacer-w-2 {
    width: var(--spacing-2);
  }
  /** @public Fixed width (16px) @480px */
  .xs-spacer-w-4 {
    width: var(--spacing-4);
  }
  /** @public Fixed width (32px) @480px */
  .xs-spacer-w-8 {
    width: var(--spacing-8);
  }
}
/**
 * @section Vertical Spacing
 */
/** @public Default vertical gap */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
/** @public Extra small vertical gap */
.stack-xs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
}
/** @public Small vertical gap */
.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
/** @public Medium vertical gap */
.stack-md {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
/** @public Large vertical gap */
.stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
/** @public Extra large vertical gap */
.stack-xl {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}
@media (max-width: 480px) {
  /** @public Column layout with gap @480px */
  .xs-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }
}
/** @public Stack on screens wider than XS */
@media (min-width: 600px) {
  .gt-xs-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }
}
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 217 91% 60%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
  --slate-50: 210 40% 98%;
  --slate-100: 210 40% 96.1%;
  --slate-200: 214.3 31.8% 91.4%;
  --slate-300: 212.7 26.8% 83.9%;
  --slate-400: 215 20.2% 65.1%;
  --slate-500: 215.4 16.3% 46.9%;
  --slate-600: 215.3 19.3% 34.5%;
  --slate-700: 215.3 25% 26.7%;
  --slate-800: 217.2 32.6% 17.5%;
  --slate-900: 222.2 47.4% 11.2%;
  --slate-950: 229 84% 5%;
  --success: 142.1 76.2% 36.3%;
  --success-foreground: 210 40% 98%;
  --info: 221.2 83.2% 53.3%;
  --info-foreground: 210 40% 98%;
  --warning: 38 92% 50%;
  --warning-foreground: 222.2 47.4% 11.2%;
  --golden: 43 74% 49%;
  --golden-foreground: 210 40% 98%;
  --attention: 45 93% 47%;
  --attention-foreground: 0 0% 0%;
  --attention-violet: 267 76% 57%;
  --attention-violet-foreground: 210 40% 98%;
  --attention-red: 0 84% 60%;
  --attention-red-foreground: 210 40% 98%;
}
/** @public Dark mode color scheme */
.dark,
[data-theme="dark"] {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217 91% 70%;
  --accent-foreground: 222.2 84% 4.9%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
  --slate-50: 229 84% 5%;
  --slate-100: 222.2 47.4% 11.2%;
  --slate-200: 217.2 32.6% 17.5%;
  --slate-300: 215.3 25% 26.7%;
  --slate-400: 215.3 19.3% 34.5%;
  --slate-500: 215.4 16.3% 46.9%;
  --slate-600: 215 20.2% 65.1%;
  --slate-700: 212.7 26.8% 83.9%;
  --slate-800: 214.3 31.8% 91.4%;
  --slate-900: 210 40% 96.1%;
  --slate-950: 210 40% 98%;
}
/**
 * @section Background Colors
 */
/** @public Page background color */
.bg-background {
  background-color: hsl(var(--background));
}
/** @public Foreground as background (inverted) */
.bg-foreground {
  background-color: hsl(var(--foreground));
}
/** @public Card background */
.bg-card {
  background-color: hsl(var(--card));
}
/** @public Primary brand color background */
.bg-primary {
  background-color: hsl(var(--primary));
}
/** @public Secondary color background */
.bg-secondary {
  background-color: hsl(var(--secondary));
}
/** @public Muted/subtle background */
.bg-muted {
  background-color: hsl(var(--muted));
}
/** @public Accent brand color background */
.bg-accent {
  background-color: hsl(var(--accent));
}
/** @public Destructive/error background */
.bg-destructive {
  background-color: hsl(var(--destructive));
}
/** @public Success/positive background */
.bg-success {
  background-color: hsl(var(--success));
}
/** @public Info background */
.bg-info {
  background-color: hsl(var(--info));
}
/** @public Warning background */
.bg-warning {
  background-color: hsl(var(--warning));
}
/**
 * @section Text Colors
 */
/** @public Main text color */
.text-foreground {
  color: hsl(var(--foreground));
}
/** @public Primary brand color text */
.text-primary {
  color: hsl(var(--primary));
}
/** @public Secondary text color */
.text-secondary {
  color: hsl(var(--secondary-foreground));
}
/** @public Muted/subtle text */
.text-muted {
  color: hsl(var(--muted-foreground));
}
/** @public Accent brand color text */
.text-accent {
  color: hsl(var(--accent));
}
/** @public Destructive/error text */
.text-destructive {
  color: hsl(var(--destructive));
}
/** @public Success/positive text */
.text-success {
  color: hsl(var(--success));
}
/** @public Info text */
.text-info {
  color: hsl(var(--info));
}
/** @public Warning text */
.text-warning {
  color: hsl(var(--warning));
}
/**
 * @section Border Colors
 */
/** @public Default border color */
.border-default {
  border-color: hsl(var(--border));
}
/** @public Input border color */
.border-input {
  border-color: hsl(var(--input));
}
/** @public Primary border color */
.border-primary {
  border-color: hsl(var(--primary));
}
/** @public Dark text - v1 compat */
.text-dark {
  color: hsl(var(--foreground));
}
/** @public Light text - v1 compat */
.text-light {
  color: hsl(var(--muted-foreground));
}
/** @public Dark background - v1 compat */
.bg-dark {
  background-color: hsl(var(--foreground));
}
/** @public Light background - v1 compat */
.bg-light {
  background-color: hsl(var(--background));
}
/**
 * @section Slate Scale (50-950)
 */
/** @public Slate 50 text - lightest */
.text-50 {
  color: hsl(var(--slate-50));
}
/** @public Slate 100 text */
.text-100 {
  color: hsl(var(--slate-100));
}
/** @public Slate 200 text */
.text-200 {
  color: hsl(var(--slate-200));
}
/** @public Slate 300 text */
.text-300 {
  color: hsl(var(--slate-300));
}
/** @public Slate 400 text */
.text-400 {
  color: hsl(var(--slate-400));
}
/** @public Slate 500 text - mid-tone */
.text-500 {
  color: hsl(var(--slate-500));
}
/** @public Slate 600 text */
.text-600 {
  color: hsl(var(--slate-600));
}
/** @public Slate 700 text */
.text-700 {
  color: hsl(var(--slate-700));
}
/** @public Slate 800 text */
.text-800 {
  color: hsl(var(--slate-800));
}
/** @public Slate 900 text */
.text-900 {
  color: hsl(var(--slate-900));
}
/** @public Slate 950 text - darkest */
.text-950 {
  color: hsl(var(--slate-950));
}
/** @public Slate 50 background - lightest */
.bg-50 {
  background-color: hsl(var(--slate-50));
}
/** @public Slate 100 background */
.bg-100 {
  background-color: hsl(var(--slate-100));
}
/** @public Slate 200 background */
.bg-200 {
  background-color: hsl(var(--slate-200));
}
/** @public Slate 300 background */
.bg-300 {
  background-color: hsl(var(--slate-300));
}
/** @public Slate 400 background */
.bg-400 {
  background-color: hsl(var(--slate-400));
}
/** @public Slate 500 background - mid-tone */
.bg-500 {
  background-color: hsl(var(--slate-500));
}
/** @public Slate 600 background */
.bg-600 {
  background-color: hsl(var(--slate-600));
}
/** @public Slate 700 background */
.bg-700 {
  background-color: hsl(var(--slate-700));
}
/** @public Slate 800 background */
.bg-800 {
  background-color: hsl(var(--slate-800));
}
/** @public Slate 900 background */
.bg-900 {
  background-color: hsl(var(--slate-900));
}
/** @public Slate 950 background - darkest */
.bg-950 {
  background-color: hsl(var(--slate-950));
}
:root {
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-none: 0 0 #0000;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 4px 20px rgba(0, 0, 0, 0.18);
  --shadow-hero: 0 20px 60px rgba(0, 0, 0, 0.15);
}
/**
 * @section Box Shadow
 */
/** @public No shadow */
.shadow-none {
  box-shadow: var(--shadow-none);
}
/** @public Small shadow - subtle depth */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}
/** @public Medium shadow - moderate elevation */
.shadow-md {
  box-shadow: var(--shadow-md);
}
/** @public Large shadow - strong elevation */
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
/** @public Extra large shadow - prominent elevation */
.shadow-xl {
  box-shadow: var(--shadow-xl);
}
/** @public 2XL shadow - maximum elevation */
.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}
/** @public Soft shadow - diffused */
.shadow-soft {
  box-shadow: var(--shadow-soft);
}
/** @public Float shadow - floating effect */
.shadow-float {
  box-shadow: var(--shadow-float);
}
/** @public Focus shadow - emphasis */
.shadow-focus {
  box-shadow: var(--shadow-focus);
}
/** @public Hero shadow - dramatic marketing effect */
.shadow-hero {
  box-shadow: var(--shadow-hero);
}
:root {
  --spacing-0: 0;
  --spacing-0-5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --gap-xs: var(--spacing-1);
  --gap-sm: var(--spacing-2);
  --gap-md: var(--spacing-4);
  --gap-lg: var(--spacing-6);
  --gap-xl: var(--spacing-8);
}
/**
 * @section Gap Utilities
 */
/** @public No gap */
.gap-0 {
  gap: var(--spacing-0);
}
/** @public 4px gap */
.gap-1 {
  gap: var(--spacing-1);
}
/** @public 8px gap */
.gap-2 {
  gap: var(--spacing-2);
}
/** @public 12px gap */
.gap-3 {
  gap: var(--spacing-3);
}
/** @public 16px gap */
.gap-4 {
  gap: var(--spacing-4);
}
/** @public 24px gap */
.gap-6 {
  gap: var(--spacing-6);
}
/** @public 32px gap */
.gap-8 {
  gap: var(--spacing-8);
}
/** @public Extra small gap */
.gap-xs {
  gap: var(--gap-xs);
}
/** @public Small gap */
.gap-sm {
  gap: var(--gap-sm);
}
/** @public Medium gap */
.gap-md {
  gap: var(--gap-md);
}
/** @public Large gap */
.gap-lg {
  gap: var(--gap-lg);
}
/** @public Extra large gap */
.gap-xl {
  gap: var(--gap-xl);
}
/**
 * @section Padding Utilities
 */
/** @public No padding */
.p-0 {
  padding: var(--spacing-0);
}
/** @public 4px padding all sides */
.p-1 {
  padding: var(--spacing-1);
}
/** @public 8px padding all sides */
.p-2 {
  padding: var(--spacing-2);
}
/** @public 12px padding all sides */
.p-3 {
  padding: var(--spacing-3);
}
/** @public 16px padding all sides */
.p-4 {
  padding: var(--spacing-4);
}
/** @public 24px padding all sides */
.p-6 {
  padding: var(--spacing-6);
}
/** @public 32px padding all sides */
.p-8 {
  padding: var(--spacing-8);
}
/**
 * @section Horizontal/Vertical Padding
 */
/** @public No horizontal padding */
.px-0 {
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
}
/** @public 4px horizontal padding */
.px-1 {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}
/** @public 8px horizontal padding */
.px-2 {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}
/** @public 12px horizontal padding */
.px-3 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}
/** @public 16px horizontal padding */
.px-4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}
/** @public 24px horizontal padding */
.px-6 {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}
/** @public 32px horizontal padding */
.px-8 {
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}
/** @public No vertical padding */
.py-0 {
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
}
/** @public 4px vertical padding */
.py-1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}
/** @public 8px vertical padding */
.py-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}
/** @public 12px vertical padding */
.py-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}
/** @public 16px vertical padding */
.py-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}
/** @public 24px vertical padding */
.py-6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}
/** @public 32px vertical padding */
.py-8 {
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
}
/** @public 40px vertical padding */
.py-10 {
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
}
/** @public 48px vertical padding */
.py-12 {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}
/** @public 64px vertical padding */
.py-16 {
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}
/**
 * @section Individual Side Padding
 */
/** @public 8px top padding */
.pt-2 {
  padding-top: var(--spacing-2);
}
/** @public 16px top padding */
.pt-4 {
  padding-top: var(--spacing-4);
}
/** @public 24px top padding */
.pt-6 {
  padding-top: var(--spacing-6);
}
/** @public 32px top padding */
.pt-8 {
  padding-top: var(--spacing-8);
}
/** @public 48px top padding */
.pt-12 {
  padding-top: var(--spacing-12);
}
/** @public 8px bottom padding */
.pb-2 {
  padding-bottom: var(--spacing-2);
}
/** @public 16px bottom padding */
.pb-4 {
  padding-bottom: var(--spacing-4);
}
/** @public 24px bottom padding */
.pb-6 {
  padding-bottom: var(--spacing-6);
}
/** @public 32px bottom padding */
.pb-8 {
  padding-bottom: var(--spacing-8);
}
/** @public 48px bottom padding */
.pb-12 {
  padding-bottom: var(--spacing-12);
}
/** @public 8px left padding */
.pl-2 {
  padding-left: var(--spacing-2);
}
/** @public 16px left padding */
.pl-4 {
  padding-left: var(--spacing-4);
}
/** @public 24px left padding */
.pl-6 {
  padding-left: var(--spacing-6);
}
/** @public 32px left padding */
.pl-8 {
  padding-left: var(--spacing-8);
}
/** @public 8px right padding */
.pr-2 {
  padding-right: var(--spacing-2);
}
/** @public 16px right padding */
.pr-4 {
  padding-right: var(--spacing-4);
}
/** @public 24px right padding */
.pr-6 {
  padding-right: var(--spacing-6);
}
/** @public 32px right padding */
.pr-8 {
  padding-right: var(--spacing-8);
}
/**
 * @section Margin Utilities
 */
/** @public No margin */
.m-0 {
  margin: var(--spacing-0);
}
/** @public 4px margin all sides */
.m-1 {
  margin: var(--spacing-1);
}
/** @public 8px margin all sides */
.m-2 {
  margin: var(--spacing-2);
}
/** @public 12px margin all sides */
.m-3 {
  margin: var(--spacing-3);
}
/** @public 16px margin all sides */
.m-4 {
  margin: var(--spacing-4);
}
/** @public 24px margin all sides */
.m-6 {
  margin: var(--spacing-6);
}
/** @public 32px margin all sides */
.m-8 {
  margin: var(--spacing-8);
}
/** @public Auto margin - centers elements */
.m-auto {
  margin: auto;
}
/** @public Auto horizontal margin - centers block */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
/** @public Auto vertical margin */
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
/**
 * @section Horizontal/Vertical Margin
 */
/** @public No horizontal margin */
.mx-0 {
  margin-left: var(--spacing-0);
  margin-right: var(--spacing-0);
}
/** @public 4px horizontal margin */
.mx-1 {
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}
/** @public 8px horizontal margin */
.mx-2 {
  margin-left: var(--spacing-2);
  margin-right: var(--spacing-2);
}
/** @public 12px horizontal margin */
.mx-3 {
  margin-left: var(--spacing-3);
  margin-right: var(--spacing-3);
}
/** @public 16px horizontal margin */
.mx-4 {
  margin-left: var(--spacing-4);
  margin-right: var(--spacing-4);
}
/** @public 24px horizontal margin */
.mx-6 {
  margin-left: var(--spacing-6);
  margin-right: var(--spacing-6);
}
/** @public 32px horizontal margin */
.mx-8 {
  margin-left: var(--spacing-8);
  margin-right: var(--spacing-8);
}
/** @public No vertical margin */
.my-0 {
  margin-top: var(--spacing-0);
  margin-bottom: var(--spacing-0);
}
/** @public 4px vertical margin */
.my-1 {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}
/** @public 8px vertical margin */
.my-2 {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}
/** @public 12px vertical margin */
.my-3 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}
/** @public 16px vertical margin */
.my-4 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}
/** @public 24px vertical margin */
.my-6 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}
/** @public 32px vertical margin */
.my-8 {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}
/**
 * @section Individual Side Margin
 */
/** @public 8px top margin */
.mt-2 {
  margin-top: var(--spacing-2);
}
/** @public 16px top margin */
.mt-4 {
  margin-top: var(--spacing-4);
}
/** @public 24px top margin */
.mt-6 {
  margin-top: var(--spacing-6);
}
/** @public 32px top margin */
.mt-8 {
  margin-top: var(--spacing-8);
}
/** @public 48px top margin */
.mt-12 {
  margin-top: var(--spacing-12);
}
/** @public 8px bottom margin */
.mb-2 {
  margin-bottom: var(--spacing-2);
}
/** @public 16px bottom margin */
.mb-4 {
  margin-bottom: var(--spacing-4);
}
/** @public 24px bottom margin */
.mb-6 {
  margin-bottom: var(--spacing-6);
}
/** @public 32px bottom margin */
.mb-8 {
  margin-bottom: var(--spacing-8);
}
/** @public 48px bottom margin */
.mb-12 {
  margin-bottom: var(--spacing-12);
}
/** @public 4px left margin */
.ml-1 {
  margin-left: var(--spacing-1);
}
/** @public 8px left margin */
.ml-2 {
  margin-left: var(--spacing-2);
}
/** @public 12px left margin */
.ml-3 {
  margin-left: var(--spacing-3);
}
/** @public 16px left margin */
.ml-4 {
  margin-left: var(--spacing-4);
}
/** @public 4px right margin */
.mr-1 {
  margin-right: var(--spacing-1);
}
/** @public 8px right margin */
.mr-2 {
  margin-right: var(--spacing-2);
}
/** @public 12px right margin */
.mr-3 {
  margin-right: var(--spacing-3);
}
/** @public 16px right margin */
.mr-4 {
  margin-right: var(--spacing-4);
}
/** @public -12px left margin (negative spacing) */
.-ml-3 {
  margin-left: calc(var(--spacing-3) * -1);
}
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.618rem;
  --text-sm: 0.75rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.618rem;
  --text-2xl: 2rem;
  --text-3xl: 2.618rem;
  --text-4xl: 3.236rem;
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
}
@media (max-width: 768px) {
  :root {
    --text-xl: 1.5rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 2.75rem;
  }
}
@media (max-width: 480px) {
  :root {
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
  }
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: hsl(var(--foreground));
}
h1,
.text-h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--spacing-6);
}
h2,
.text-h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--spacing-5);
}
h3,
.text-h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--spacing-4);
}
h4,
.text-h4 {
  font-size: var(--text-xl);
  margin-bottom: var(--spacing-3);
}
h5,
.text-h5 {
  font-size: var(--text-lg);
  margin-bottom: var(--spacing-3);
}
h6,
.text-h6 {
  font-size: var(--text-base);
  margin-bottom: var(--spacing-2);
}
/**
 * @section Text Size
 */
/** @public Extra small text - ~10px */
.text-xs {
  font-size: var(--text-xs);
}
/** @public Small text - 12px */
.text-sm {
  font-size: var(--text-sm);
}
/** @public Base text - 16px */
.text-base {
  font-size: var(--text-base);
}
/** @public Large text - 20px */
.text-lg {
  font-size: var(--text-lg);
}
/** @public Extra large text - ~26px */
.text-xl {
  font-size: var(--text-xl);
}
/** @public 2XL text - 32px */
.text-2xl {
  font-size: var(--text-2xl);
}
/** @public 3XL text - ~42px */
.text-3xl {
  font-size: var(--text-3xl);
}
/** @public 4XL text - ~52px */
.text-4xl {
  font-size: var(--text-4xl);
}
/**
 * @section Font Weight
 */
/** @public Light weight */
.font-light {
  font-weight: var(--font-light);
}
/** @public Normal weight */
.font-normal {
  font-weight: var(--font-normal);
}
/** @public Medium weight */
.font-medium {
  font-weight: var(--font-medium);
}
/** @public Semi-bold weight */
.font-semibold {
  font-weight: var(--font-semibold);
}
/** @public Bold weight */
.font-bold {
  font-weight: var(--font-bold);
}
/** @public Lighter font weight - v1 compat */
.lighter {
  font-weight: 100;
}
/** @public Light font weight - v1 compat */
.light {
  font-weight: 200;
}
/** @public Normal font weight - v1 compat */
.normal {
  font-weight: normal;
}
/** @public Bold font weight - v1 compat */
.bold {
  font-weight: bold;
}
/** @public Bolder font weight - v1 compat */
.bolder {
  font-weight: bolder;
}
/** @public Heavy font weight - v1 compat */
.heavy {
  font-weight: 900;
}
/** @public Monospace font family */
.font-mono {
  font-family: var(--font-mono);
}
/**
 * @section Line Height
 */
/** @public No line height spacing */
.leading-none {
  line-height: var(--leading-none);
}
/** @public Tight line height */
.leading-tight {
  line-height: var(--leading-tight);
}
/** @public Normal line height */
.leading-normal {
  line-height: var(--leading-normal);
}
/** @public Relaxed line height */
.leading-relaxed {
  line-height: var(--leading-relaxed);
}
/**
 * @section Text Alignment
 */
/** @public Center text */
.text-center {
  text-align: center;
}
/** @public Left align text */
.text-left {
  text-align: left;
}
/** @public Right align text */
.text-right {
  text-align: right;
}
/** @public Title style - v1 compat */
.title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin: 0;
}
/**
 * @section Semantic Typography
 */
/** @public Title style - large, bold, spaced */
.text-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-6);
  padding-top: var(--spacing-2);
  letter-spacing: 0.01em;
  word-spacing: 0.05em;
}
/** @public Headline style - prominent heading */
.text-headline {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-5);
  padding-top: var(--spacing-1);
  letter-spacing: 0.005em;
  word-spacing: 0.03em;
}
/** @public Lead style - intro paragraph */
.text-lead {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  margin-bottom: var(--spacing-4);
  padding-top: var(--spacing-1);
  letter-spacing: 0.003em;
  word-spacing: 0.02em;
}
/** @public Body style - standard paragraph */
.text-body {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  margin-bottom: var(--spacing-3);
  letter-spacing: 0.002em;
  word-spacing: 0.01em;
}
/** @public Caption style - small descriptive text */
.text-caption {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  margin-bottom: var(--spacing-2);
  letter-spacing: 0.001em;
  word-spacing: 0.005em;
}
/** @public Label style - form labels and tags */
.text-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-1);
  letter-spacing: 0.001em;
  word-spacing: 0.003em;
}
:root {
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
}
/**
 * @section Border Radius
 */
/** @public No border radius */
.rounded-none {
  border-radius: var(--radius-none);
}
/** @public Small border radius - 2px */
.rounded-sm {
  border-radius: var(--radius-sm);
}
/** @public Medium border radius - 6px */
.rounded-md {
  border-radius: var(--radius-md);
}
/** @public Large border radius - 8px */
.rounded-lg {
  border-radius: var(--radius-lg);
}
/** @public Extra large border radius - 12px */
.rounded-xl {
  border-radius: var(--radius-xl);
}
/** @public 2XL border radius - 16px */
.rounded-2xl {
  border-radius: var(--radius-2xl);
}
/** @public Full circle/pill shape */
.rounded-full {
  border-radius: var(--radius-full);
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
 */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}