/* Design Tokens */
:root {
  /* Layout Scale (Preserved original dimensions) */
  --layout-max-width: 900px;
  --layout-nav-width: 200px;
  --layout-content-width: 440px;
  --layout-sidebar-width: 185px;
  
  /* Typography Scale (New, smaller sizes) */
  --font-size-xxs: 0.6875rem;  /* 11px */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.8125rem;   /* 13px */
  --font-size-base: 0.875rem;  /* 14px */
  --font-size-md: 0.9375rem;   /* 15px */
  --font-size-lg: 1rem;        /* 16px */
  --font-size-xl: 1.125rem;    /* 18px */
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  
  /* Font Families */
  --font-family-base: Verdana, Arial, system-ui, sans-serif;
  --font-family-heading: "Trebuchet MS", Arial, system-ui, sans-serif;
  
  /* Spacing Scale (Preserved) */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  
  /* Color System - Base Colors (Preserved) */
  --color-primary: rgb(70, 122, 167);
  --color-primary-dark: rgb(42, 90, 138);
  
  /* Grayscale Palette (Preserved) */
  --color-gray-50: rgb(255, 255, 255);
  --color-gray-100: rgb(235, 235, 235);
  --color-gray-200: rgb(225, 225, 225);
  --color-gray-300: rgb(200, 200, 200);
  --color-gray-400: rgb(190, 190, 190);
  --color-gray-500: rgb(150, 150, 150);
  --color-gray-600: rgb(100, 100, 100);
  --color-gray-700: rgb(80, 80, 80);
  
  /* Accent Colors (Preserved) */
  --color-green: rgb(160, 214, 81);
  --color-green-light: rgb(217, 239, 185);
  --color-blue: rgb(137, 170, 214);
  --color-blue-light: rgb(213, 225, 240);
  --color-orange: rgb(232, 177, 13);
  --color-orange-light: rgb(248, 224, 150);
  
  /* Semantic Colors (Preserved) */
  --color-text: var(--color-gray-700);
  --color-text-light: var(--color-gray-600);
  --color-text-lighter: var(--color-gray-500);
  --color-heading: var(--color-gray-50);
  
  /* Navigation Colors (Preserved) */
  --nav-bg: var(--color-gray-400);
  --nav-border: var(--color-gray-300);
  --nav-link: var(--color-primary);
  --nav-link-hover: var(--color-primary-dark);
  --nav-hover-bg: var(--color-gray-200);
  
  /* Form Colors (Preserved) */
  --form-bg: var(--color-gray-200);
  --form-border: var(--color-gray-500);
  --form-hover-bg: var(--color-gray-300);
  --form-hover-border: var(--color-gray-700);
  
  /* Box Theme Colors (Preserved) */
  --box-border: var(--color-gray-400);
  --box-bg: var(--color-gray-100);
  
  /* Theme Variations (Preserved) */
  --theme-green-border: var(--color-green);
  --theme-green-bg: var(--color-green-light);
  --theme-blue-border: var(--color-blue);
  --theme-blue-bg: var(--color-blue-light);
  --theme-orange-border: var(--color-orange);
  --theme-orange-bg: var(--color-orange-light);
  
  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
}
  /* Typography System */
:root {
  /* Font Families */
  --font-family-primary: "Trebuchet MS", system-ui, sans-serif;
  --font-family-body: Verdana, system-ui, sans-serif;
  
  /* Font Sizes (Reduced Scale) */
  --font-size-xs: 0.6875rem;    /* 11px */
  --font-size-sm: 0.75rem;      /* 12px */
  --font-size-base: 0.8125rem;  /* 13px */
  --font-size-md: 0.875rem;     /* 14px */
  --font-size-lg: 0.9375rem;    /* 15px */
  
  /* Line Heights */
  --line-height-body: 1.5;
  --line-height-heading: 1.2;
  --line-height-nav: 1.8;
  --line-height-nav-sub: 1.6;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  
  /* Z-index Scale */
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-modal: 300;
  --z-index-overlay: 400;
}

/* Navigation Base Styles */
.nav3-base {
  --nav-indent: 20px;
  --nav-font-size: var(--font-size-base);
  --nav-line-height: var(--line-height-nav);
  --nav-line-height-sub: var(--line-height-nav-sub);
  
  width: clamp(170px, var(--layout-nav-width), 200px);
  margin: 10px 0 0 var(--nav-indent);
}

/* Common Navigation Link Styles */
.nav3-base dt a,
.nav3-base dd a {
  display: block;
  text-decoration: none;
  color: var(--nav-link);
  line-height: var(--nav-line-height);
  font-size: var(--nav-font-size);
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
}

.nav3-base dt a {
  font-weight: 700;
}

.nav3-base dd a {
  line-height: var(--nav-line-height-sub);
  font-weight: 400;
  font-size: var(--font-size-xs);  /* Slightly smaller for sub-items */
}

/* Grid Navigation Specific */
.nav3-grid {
  width: 199px;
  border-bottom: 1px solid var(--nav-border);
  margin: 0;
}

.nav3-grid dt a,
.nav3-grid dd a {
  padding: 0 10px 0 var(--nav-indent);
  border-top: 1px solid var(--nav-border);
  min-height: calc(var(--nav-line-height) * 1em);
}

.nav3-grid dd a {
  min-height: calc(var(--nav-line-height-sub) * 1em);
  padding-left: calc(var(--nav-indent) * 2);
}

.nav3-grid a:hover {
  background-color: var(--nav-hover-bg);
  color: var(--nav-link-hover);
}

/* Bullet Navigation Specific */
.nav3-bullet {
  width: 170px;
}

.nav3-bullet dt a,
.nav3-bullet dd a {
  position: relative;
  padding-left: 25px;
}

.nav3-bullet dd a {
  margin-left: 15px;
}

/* Bullet Points */
.nav3-bullet dt a::before,
.nav3-bullet dd a::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--nav-link);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast);
}

.nav3-bullet dt a::before {
  width: 5px;   /* Slightly reduced from 6px */
  height: 5px;  /* Slightly reduced from 6px */
}

.nav3-bullet dd a::before {
  width: 3px;   /* Slightly reduced from 4px */
  height: 3px;  /* Slightly reduced from 4px */
}

.nav3-bullet a:hover {
  color: var(--nav-link-hover);
  text-decoration: underline;
}

.nav3-bullet a:hover::before {
  background-color: var(--nav-link-hover);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .nav3-bullet dt a::before,
  .nav3-bullet dd a::before {
    outline: 1px solid currentColor;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .nav3-base a {
    transition: none;
  }
}

/* No Bullet Navigation */
.nav3-nobullet {
  width: 170px;
  font-size: var(--font-size-base);  /* 13px base */
}

.nav3-nobullet dd a {
  margin-left: 15px;
  font-size: var(--font-size-xs);    /* 11px for sub-items */
}

.nav3-nobullet a:hover {
  color: var(--nav-link-hover);
  text-decoration: underline;
}

/* Accessibility */
.nav3-base a:focus-visible {
  outline: 2px solid var(--nav-link);
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .nav3-base a {
    transition: none;
  }
}

/* Print Styles */
@media print {
  .nav3-bullet dt a::before,
  .nav3-bullet dd a::before {
    display: none;
  }
  
  .nav3-base a {
    color: var(--color-text);
  }
}

/* Main Navigation Base */
.main-navigation {
  --nav-spacing-x: 20px;
  --nav-spacing-y: 10px;
  --heading-font: var(--font-family-primary);
  --text-size-xs: 0.6875rem;    /* 11px */
  --text-size-sm: 0.75rem;      /* 12px */
  --text-size-base: 0.8125rem;  /* 13px */
  --text-size-md: 0.875rem;     /* 14px */
  --text-size-lg: 0.9375rem;    /* 15px */
  --bullet-size: 4px;           /* Reduced from 6px */
  --list-indent: 15px;
}

/* Heading System */
.main-navigation h1,
.main-navigation h2,
.main-navigation h3 {
  font-family: var(--heading-font);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

/* Primary Headings */
.main-navigation h1 {
  margin: 30px 0 20px;
  padding: 4px var(--nav-spacing-x) 3px;
  background-color: var(--nav-bg);
  color: var(--color-heading);
  font-size: var(--text-size-lg);  /* 15px */
}

/* First Heading Special Case */
.main-navigation h1.first {
  margin: 0;
}

/* Secondary Headings */
.main-navigation h2 {
  margin: 20px var(--nav-spacing-y) 10px var(--nav-spacing-x);
  color: var(--nav-heading-color);
  font-size: var(--text-size-md);  /* 14px */
}

/* Tertiary Headings */
.main-navigation h3 {
  margin: 10px var(--nav-spacing-y) 5px var(--nav-spacing-x);
  color: var(--color-text);
  font-size: var(--text-size-base);  /* 13px */
}

/* Paragraph Styles */
.main-navigation p {
  margin: 0 var(--nav-spacing-y) 10px var(--nav-spacing-x);
  color: var(--color-text);
  line-height: 1.3;
  font-size: var(--text-size-base);  /* 13px */
}

/* Text Alignment Utilities */
.main-navigation p.center { text-align: center; }
.main-navigation p.right { text-align: right; }

/* High Contrast Support */
@media (prefers-contrast: high) {
  .main-navigation h1 {
    outline: 1px solid currentColor;
  }
}
/* Text Alignment Utilities */
.main-navigation p.center { 
  text-align: center; 
}

.main-navigation p.right { 
  text-align: right; 
}

/* List Base Styles */
.main-navigation ul,
.main-navigation ol {
  margin: 0.5em var(--nav-spacing-y) 1em var(--nav-spacing-x);
  padding-left: 0;
  font-size: var(--font-size-base); /* 13px base */
}

/* Unordered Lists */
.main-navigation ul {
  list-style: none;
}

.main-navigation ul li {
  position: relative;
  margin: 5px 0 0.2em;
  padding-left: var(--list-indent);
  line-height: 1.3;
  font-size: var(--font-size-sm); /* 12px */
}

/* Custom Bullet Points */
.main-navigation ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;  /* Reduced from 6px */
  height: 4px; /* Reduced from 6px */
  background-color: var(--nav-link);
  border-radius: var(--radius-full);
}

/* Ordered Lists */
.main-navigation ol {
  padding-left: 18px; /* Slightly reduced from 20px */
}

.main-navigation ol li {
  margin-bottom: 0.4em;
  font-size: var(--font-size-sm); /* 12px */
  padding-left: var(--nav-spacing-y);
  line-height: 1.3;
}

/* Focus States */
.main-navigation li:focus-within {
  outline: none;
}

.main-navigation li:focus-within::before {
  background-color: var(--nav-link-hover);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .main-navigation ul li::before {
    outline: 1px solid currentColor;
    outline-offset: 1px;
  }
  
  .main-navigation ol {
    list-style-type: decimal;
  }
}

/* Print Styles */
@media print {
  .main-navigation h1 {
    background: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--nav-border);
  }
  
  .main-navigation ul li::before {
    background-color: var(--color-text);
    width: 3px;
    height: 3px;
  }
  
  .main-navigation ol {
    list-style-type: decimal;
  }
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
  .main-navigation ul,
  .main-navigation ol {
    font-size: var(--font-size-base); /* Maintain readability on mobile */
  }
  
  .main-navigation ul li::before {
    width: 3px;
    height: 3px;
  }
}
/* Main Content Color System */
:root {
  /* Gray Scale - Core Palette */
  --gray-50: rgb(255, 255, 255);    /* White */
  --gray-100: rgb(233, 232, 244);   /* Table background */
  --gray-200: rgb(225, 225, 225);   /* Border gray & Table cell */
  --gray-300: rgb(190, 190, 190);   /* Background light */
  --gray-400: rgb(175, 175, 175);   /* Table header */
  --gray-500: rgb(125, 125, 125);   /* Light gray */
  --gray-600: rgb(100, 100, 100);   /* Medium gray */
  --gray-700: rgb(80, 80, 80);      /* Dark gray */
  --gray-800: rgb(60, 60, 60);      /* Darker gray for small text */
  --gray-900: rgb(40, 40, 40);      /* Extra dark for small text */
  
  /* Semantic Text Colors */
  --color-text: var(--gray-800);          /* Primary text - darker for small text */
  --color-text-medium: var(--gray-600);   /* Secondary text */
  --color-text-light: var(--gray-500);    /* Tertiary text */
  --color-text-inverse: var(--gray-50);   /* White text */
  --color-text-small: var(--gray-900);    /* Small text - extra dark */
  
  /* Background Colors */
  --color-background: var(--gray-50);     /* Main background */
  --color-background-light: var(--gray-300); /* Light background */
  --color-background-subtle: var(--gray-100); /* Subtle background */
  
  /* Border Colors */
  --color-border: var(--gray-200);        /* Primary border */
  --color-border-light: var(--gray-100);  /* Light border */
  --color-border-dark: var(--gray-300);   /* Dark border */
  
  /* Table Colors */
  --color-table-bg: var(--gray-100);
  --color-table-header: var(--gray-400);
  --color-table-cell: var(--gray-200);
  --color-table-border: var(--gray-300);
  --color-table-text: var(--gray-800);    /* Darker for better readability */
  
  /* Component Colors */
  --color-card-border: var(--gray-200);
  --color-card-bg: var(--gray-50);
  --color-divider: var(--gray-200);
  
  /* Interactive State Colors */
  --color-hover-bg: color-mix(in srgb, var(--gray-200) 80%, transparent);
  --color-active-bg: color-mix(in srgb, var(--gray-300) 80%, transparent);
  --color-focus-ring: color-mix(in srgb, var(--gray-700) 25%, transparent);
  --color-hover-text: var(--gray-900);    /* Darker text on hover */
  
  /* Small Text Enhancement */
  --color-small-text: var(--gray-900);
  --color-small-text-medium: var(--gray-800);
  --color-small-text-light: var(--gray-700);
  
  /* Dark Mode Colors (for future use) */
  &[data-theme="dark"] {
    --color-text: var(--gray-200);
    --color-text-medium: var(--gray-300);
    --color-text-light: var(--gray-400);
    --color-text-small: var(--gray-100);  /* Lighter for dark mode small text */
    --color-border: var(--gray-600);
    --color-background: var(--gray-700);
    --color-background-light: var(--gray-600);
    --color-table-text: var(--gray-100);  /* Lighter for dark mode tables */
  }
}



/* Typography System */
.main-content {
  /* Font Family */
  --heading-font: "Trebuchet MS", Arial, sans-serif;
  --heading-color: var(--color-text);
  --heading-line-height: 1.2;  /* Adjusted from 0.7 for better readability */
  
  /* Font Size Scale (Significantly Reduced) */
  --h1-size: clamp(1.125rem, 1.2rem, 1.25rem);    /* ~18-20px */
  --h2-size: clamp(1rem, 1.0625rem, 1.125rem);    /* ~16-18px */
  --h3-size: clamp(0.9375rem, 1rem, 1.0625rem);   /* ~15-17px */
  --h4-size: clamp(0.875rem, 0.9375rem, 1rem);    /* ~14-16px */
  --h5-size: clamp(0.8125rem, 0.875rem, 0.9375rem); /* ~13-15px */
  --h6-size: clamp(0.75rem, 0.8125rem, 0.875rem);   /* ~12-14px */
  
  /* Spacing */
  --heading-space: 0.8em;
  --heading-space-sm: 0.4em;
  --heading-space-lg: 1.2em;
}

/* Base Heading Styles */
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
  font-family: var(--heading-font);
  line-height: var(--heading-line-height);
  color: var(--color-text);
  margin: var(--heading-space) 0 var(--heading-space-sm);
  font-weight: 400;  /* Changed from 200 for better readability at small sizes */
}

/* Primary Heading */
.main-content h1 {
  font-size: var(--h1-size);
  color: var(--color-text);
  letter-spacing: -0.01em;  /* Slight negative tracking for larger sizes */
}

/* Page Title Variant */
.main-content h1.pagetitle {
  margin-bottom: 0.4em;
  padding-bottom: 2px;
  border-bottom: 4px solid var(--color-border);  /* Reduced from 7px */
  color: var(--color-text-medium);
}

/* Block Title Variant */
.main-content h1.block {
  margin-top: var(--heading-space);
  padding: 2px 4px;
  background: var(--color-background-light);
  color: var(--color-background);
}

/* Secondary Heading */
.main-content h2 {
  font-size: var(--h2-size);
  margin-top: var(--heading-space-lg);
}

/* Tertiary Heading */
.main-content h3 {
  font-size: var(--h3-size);
  color: var(--color-text-light);
  margin-top: -0.8em;  /* Adjusted from -1em */
}

/* Fourth Level Heading */
.main-content h4 {
  font-size: var(--h4-size);
  margin: var(--heading-space-lg) 0 var(--heading-space);
}

/* Fifth Level Heading */
.main-content h5 {
  font-size: var(--h5-size);
  margin: var(--heading-space-lg) 0 var(--heading-space);
  font-weight: 500;  /* Slightly bolder for readability */
}

/* Sixth Level Heading */
.main-content h6 {
  font-size: var(--h6-size);
  margin: 1em 0 0.2em;
  font-weight: 600;  /* Bolder for smallest size */
}

/* Focus States */
.main-content h1:focus-visible,
.main-content h2:focus-visible,
.main-content h3:focus-visible,
.main-content h4:focus-visible,
.main-content h5:focus-visible,
.main-content h6:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .main-content {
    /* Even Smaller Font Sizes for Mobile */
    --h1-size: 0.9375rem;      /* 15px */
    --h2-size: 0.875rem;       /* 14px */
    --h3-size: 0.8125rem;      /* 13px */
    --h4-size: 0.8125rem;      /* 13px */
    --h5-size: 0.75rem;        /* 12px */
    --h6-size: 0.75rem;        /* 12px */
    
    /* Adjusted Spacing for Mobile */
    --heading-space: 0.5em;
    --heading-space-sm: 0.25em;
    --heading-space-lg: 0.75em;
  }

  /* Mobile-specific adjustments */
  .main-content h1.pagetitle {
    border-bottom-width: 3px;
    padding-bottom: 0.15em;
  }

  .main-content h1.block {
    padding: 0.15em 0.3em;
  }
}

/* Small Screen */
@media screen and (max-width: 480px) {
  .main-content {
    /* Minimum Font Sizes for Readability */
    --h1-size: 0.875rem;       /* 14px */
    --h2-size: 0.8125rem;      /* 13px */
    --h3-size: 0.75rem;        /* 12px */
    --h4-size: 0.75rem;        /* 12px */
    --h5-size: 0.75rem;        /* 12px */
    --h6-size: 0.75rem;        /* 12px */
    
    /* Tighter Spacing */
    --heading-space: 0.4em;
    --heading-space-sm: 0.2em;
    --heading-space-lg: 0.6em;
  }
}

/* Print Styles */
@media print {
  .main-content {
    /* Print-specific Font Sizes */
    --h1-size: 12pt;
    --h2-size: 11pt;
    --h3-size: 10pt;
    --h4-size: 10pt;
    --h5-size: 9pt;
    --h6-size: 9pt;
  }

  .main-content h1,
  .main-content h2,
  .main-content h3,
  .main-content h4,
  .main-content h5,
  .main-content h6 {
    color: black;
    page-break-after: avoid;
    margin-bottom: 0.3em;
  }

  .main-content h1.block {
    background: none;
    border: 1px solid black;
    color: black;
    padding: 0.2em 0.4em;
  }

  .main-content h1.pagetitle {
    border-bottom: 2px solid black;
  }
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
  .main-content h1.block {
    outline: 2px solid currentColor;
    outline-offset: -1px;
    background: none;
  }

  .main-content h1.pagetitle {
    border-bottom-width: 2px;
    border-bottom-style: solid;
  }

  .main-content h1,
  .main-content h2,
  .main-content h3,
  .main-content h4,
  .main-content h5,
  .main-content h6 {
    color: currentColor;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .main-content * {
    transition: none !important;
    animation: none !important;
  }
}

/* System Dark Mode Detection */
@media (prefers-color-scheme: dark) {
  .main-content h1.block {
    background-color: var(--color-text);
    color: var(--color-background);
  }
}
/* Content Typography System */
.main-content {
  /* Typography Scale */
  --text-sm: 0.6rem;      /* 90% */
  --text-base: 0.7rem;    /* 110% */
  --text-lg: 0.8rem;      /* 120% */
  
  /* Spacing Scale */
  --space-xs: 0.25em;
  --space-sm: 0.5em;
  --space-md: 1em;
  --space-lg: 2em;
  
  /* Table Properties */
  --table-max-width: 600px;
  --table-cell-padding: 7px;
  --table-border: 2px;
  --table-font: var(--text-base);
  
  /* List Properties */
  --list-bullet-size: 6px;
  --list-indent: 12px;
}

/* Paragraph Styles */
.main-content p {
  margin-bottom: var(--space-md);
  line-height: 1.5;
  font-size: var(--text-lg);
}

/* Paragraph Variants */
.main-content p.center { text-align: center; }
.main-content p.right { text-align: right; }

.main-content p.details {
  margin: calc(var(--space-xs) * -1) 0 var(--space-md);
  line-height: 1;
  font-size: var(--text-base);
}

/* Blockquote */
.main-content blockquote {
  margin: 0 30px var(--space-md);
  font-size: var(--text-sm);
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-border);
}

/* Table Styles */
.main-content table {
  width: 100%;
  max-width: var(--table-max-width);
  margin: var(--space-lg) auto;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: var(--color-table-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Table Header */
.main-content th {
  padding: var(--table-cell-padding);
  background-color: var(--color-table-cell);
  text-align: left;
  color: var(--color-text);
  font-weight: 200;
  font-size: var(--table-font);
}

.main-content th.top {
  background-color: var(--color-table-header);
  color: var(--color-background);
}

/* Table Cells */
.main-content td {
  padding: var(--table-cell-padding);
  border: var(--table-border) solid var(--color-background);
  background-color: var(--color-table-cell);
  text-align: left;
  color: var(--color-text);
  font-size: var(--table-font);
  font-weight: 200;
}

/* Table Caption */
.main-content .caption {
  margin: var(--space-sm) 0 var(--space-lg);
  text-align: left;
  color: var(--color-text);
  font-size: var(--text-base);
}

/* List Styles */
.main-content ul,
.main-content ol {
  margin: var(--space-sm) 0 var(--space-md);
  padding-left: 0;
}

/* Unordered Lists */
.main-content ul {
  list-style: none;
}

.main-content ul li {
  position: relative;
  margin-bottom: var(--space-xs);
  padding-left: var(--list-indent);
  line-height: 1.4;
  font-size: var(--text-lg);
}

/* Custom Bullet Points */
.main-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: var(--list-bullet-size);
  height: var(--list-bullet-size);
  background-color: var(--color-text);
  border-radius: var(--radius-full);
}

/* Ordered Lists */
.main-content ol {
  padding-left: calc(var(--list-indent) * 2);
}

.main-content ol li {
  margin-bottom: var(--space-xs);
  line-height: 1.4;
  font-size: var(--text-lg);
}

/* Accessibility Improvements */
@media (prefers-contrast: high) {
  .main-content ul li::before {
    outline: 1px solid currentColor;
  }
  
  .main-content table th,
  .main-content table td {
    border-width: 1px;
    border-color: currentColor;
  }
}

/* Print Styles */
@media print {
  .main-content table {
    border: 1px solid var(--color-text);
  }
  
  .main-content th.top {
    background: none;
    border: 1px solid var(--color-text);
    color: var(--color-text);
  }
  
  .main-content td,
  .main-content th {
    border: 1px solid var(--color-text);
  }
}

/* Responsive Table */
@media (max-width: 768px) {
  .main-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .main-content td,
  .main-content th {
    white-space: nowrap;
  }
}

/* Design Tokens */
:root {
  /* Color System */
  --color-primary: rgb(70, 122, 167);
  --color-primary-dark: rgb(42, 90, 138);
  --color-success: rgb(160, 214, 81);
  --color-info: rgb(137, 170, 214);
  --color-warning: rgb(232, 177, 13);
  
  /* Neutral Colors */
  --color-gray-50: rgb(255, 255, 255);
  --color-gray-100: rgb(230, 230, 230);
  --color-gray-200: rgb(220, 220, 220);
  --color-gray-300: rgb(200, 200, 200);
  --color-gray-400: rgb(190, 190, 190);
  --color-gray-500: rgb(150, 150, 150);
  --color-gray-600: rgb(80, 80, 80);
  
  /* Typography */
  --font-heading: "Trebuchet MS", system-ui, sans-serif;
  --font-body: Verdana, system-ui, sans-serif;
  --text-base: 0.7rem;
  --text-lg: 0.8rem;
  
  /* Spacing */
  --space-xs: 0.2em;
  --space-sm: 0.5em;
  --space-md: 1em;
  --space-lg: 1.5em;
  
  /* Form Elements */
  --form-width: 160px;
  --form-padding: 0.2em;
  --button-padding: 4px;
  --input-border: 1px;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
}

/* Sidebar Component */
.main-subcontent {
  /* Local Variables */
  --sidebar-heading-padding: 4px 10px 3px;
  --sidebar-margin: 0 10px;
  --list-indent: 15px;
  --bullet-size: 6px;
}

/* Headings */
.main-subcontent h1 {
  margin-bottom: var(--space-md);
  padding: var(--sidebar-heading-padding);
  background-color: var(--color-gray-400);
  font-family: var(--font-heading);
  color: var(--color-gray-50);
  font-weight: 100;
  font-size: var(--text-lg);
}

/* Themed Headings */
.main-subcontent h1.green {
  margin-bottom: var(--space-sm);
  background-color: var(--color-success);
}

.main-subcontent h1.blue {
  margin-bottom: var(--space-sm);
  background-color: var(--color-info);
}

.main-subcontent h1.orange {
  margin-bottom: var(--space-sm);
  background-color: var(--color-warning);
}

.main-subcontent h3 {
  margin: var(--space-md) 10px var(--space-sm);
  color: var(--color-gray-600);
  font-weight: 100;
  font-size: var(--text-base);
}

/* Content Styles */
.main-subcontent p {
  margin: var(--sidebar-margin) var(--space-md);
  color: var(--color-primary);
  line-height: 1.3;
  font-size: var(--text-base);
}

/* Text Alignment */
.main-subcontent p.center { text-align: center; }
.main-subcontent p.right { text-align: right; }

/* Lists */
.main-subcontent ul,
.main-subcontent ol {
  margin: var(--space-sm) 10px var(--space-md);
  padding-left: 0;
}

.main-subcontent ul {
  list-style: none;
}

.main-subcontent ul li {
  position: relative;
  margin: 5px 0 var(--space-xs);
  padding-left: var(--list-indent);
  line-height: 1.2;
  font-size: var(--text-base);
}

/* Custom Bullets */
.main-subcontent ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: var(--bullet-size);
  height: var(--bullet-size);
  background-color: var(--color-primary);
  border-radius: 50%;
}

.main-subcontent ol {
  margin-left: 30px;
}

.main-subcontent ol li {
  margin-bottom: var(--space-sm);
  font-size: var(--text-base);
}



/* Media Elements */
.main img {
  margin: 3px 10px 7px 0;
  padding: 1px;
  border: var(--input-border) solid var(--color-gray-500);
  max-width: 100%;
  height: auto;
  transition: border-color var(--transition-normal);
}

/* Image Alignment */
.main img.left { float: left; }
.main img.center {
  display: block;
  margin-inline: auto;
}
.main img.right {
  float: right;
  margin: 3px 0 7px 10px;
}

/* Link Styles */
.main a {
  color: var(--color-primary);
  font-weight: 100;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.main a:hover,
.main a:focus {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.main a:visited {
  color: var(--color-primary-dark);
}

.main-content h1 a {
  font-weight: 100;
}

/* Linked Images */
.main a img {
  border: var(--input-border) solid var(--color-gray-500);
  transition: border-color var(--transition-normal);
}

.main a:hover img {
  border-color: var(--color-gray-200);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .main-subcontent ul li::before {
    outline: 1px solid currentColor;
  }
  
  .main-subcontent .form-base input.field,
  .main-subcontent .form-base input.button {
    border-width: 2px;
  }
}