/* === assets/css/design-tokens.css === */
:root {
  --shade-000: #f9f9f9;
  --shade-100: #f8fafc;
  --shade-200: #ecedf0;
  --shade-300: #c5cad4;
  --shade-400: #292e38;
  --shade-500: #080B11;

  --shade-black: #080B11;

  /* LIGHT THEME (default) */
  --color-bg: var(--shade-000);
  --color-surface: var(--shade-200);
  --color-text-primary: var(--shade-500);
  --color-text-secondary: var(--shade-400);
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-border: rgba(0, 0, 0, 0.08);
  --color-surface-alt: var(--shade-100);

  /* Semantic surface hierarchy */
  --color-bg-elevated: #ffffff; /* slightly lifted card / modal surface */
  --color-bg-hover: color-mix(in oklab, var(--color-surface) 92%, black 8%);
  --color-bg-muted: color-mix(in oklab, var(--color-bg) 96%, black 4%);

  /* Status / feedback colors (semantic) */
  --color-danger: #ef4444; /* tailwind-esque red-500 */
  --color-danger-contrast: #fee2e2;
  --color-success: #22c55e; /* green-500 */
  --color-success-contrast: #dcfce7;
  --color-warning: #f59e0b;
  --color-warning-contrast: #fef3c7;
  --color-info: #3b82f6;
  --color-info-contrast: #dbeafe;

  /* Accent background helper tokens (used in dashboards / badges) */
  --accent-blue-bg: color-mix(in oklab, var(--accent-blue) 15%, transparent);
  --accent-blue-border: color-mix(in oklab, var(--accent-blue) 45%, transparent);
  --accent-yellow-bg: color-mix(in oklab, var(--accent-yellow) 25%, transparent);
  --accent-yellow-border: color-mix(in oklab, var(--accent-yellow) 55%, transparent);
  --accent-green-bg: color-mix(in oklab, var(--accent-green) 20%, transparent);
  --accent-green-border: color-mix(in oklab, var(--accent-green) 55%, transparent);
  --accent-red-bg: color-mix(in oklab, var(--accent-red) 18%, transparent);
  --accent-red-border: color-mix(in oklab, var(--accent-red) 55%, transparent);
  --accent-orange: #fb923c;
  --accent-orange-bg: color-mix(in oklab, var(--accent-orange) 22%, transparent);
  --accent-orange-border: color-mix(in oklab, var(--accent-orange) 55%, transparent);

  /* Subtle overlay / stroke helpers */
  --color-border-strong: color-mix(in oklab, var(--color-text-primary) 25%, transparent);
  --color-border-muted: color-mix(in oklab, var(--color-text-primary) 15%, transparent);



  --color-primary: #36c9f0;
  --color-primary-dark: #4e1cff;
  --color-secondary: #ad96ef;
  --color-background: #f8f9fa;


  /* Component colors */
  --accent-green: #49ca8e;
  --accent-blue: #4fc3f7;
  --accent-yellow: #ffeb3b;
  --accent-red: #ff6b6b;
  --accent-purple: #af52de;


  --accent-notely: #ff3d3d;
  --accent-bookmarkly: #f2c94c;
  --accent-color-extractly: #bb6bd9;
  --accent-contently: #36c9f0;
  --accent-indexly: #27ae60;

  /* Social media brand colors */
  --brand-youtube: #FF0000;
  --brand-linkedin: #0077B5;
  --brand-x: #000000;
  --brand-twitter: #000000;
  --brand-instagram: #E4405F;
  --brand-threads: #000000;
  --brand-figma: #F24E1E;
  --brand-github: #181717;
  --brand-facebook: #1877F2;
  --brand-tiktok: #FF0050;
  --brand-discord: #5865F2;
  --brand-twitch: #9146FF;
  --brand-medium: #000000;

  --font-primary: 'Silkscreen', monospace;
  --font-secondary: 'Courier New', monospace;
  /* Base font sizes removed in favor of unified type tokens */

  --space-xs: 0.5rem;
  --space-xxs: 0.25rem; /* 4px - micro spacing */
  --space-sm: 1rem;
  --space-compact: 0.75rem; /* 12px - compact spacing for tight cards */
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;

  /* Component sizing */
  --size-avatar-sm: 40px;

  /* Border patterns */
  --border: 4px solid var(--shade-200);
  --border-thin: 2px solid var(--shade-200);

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  --elevation-1: 0 4px 20px rgba(0, 0, 0, 0.08);
  --elevation-2: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* Overlays and effects */
  --overlay-backdrop: rgba(0, 0, 0, 0.4);
  --backdrop-blur: 8px;
  --focus-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Animations */
  --animation-blink: blink 1s infinite;
  --animation-slide: slide-up 0.3s ease-out;

  --container-width: 1000px;
  --container-width-big: 1200px;


  /* Code theming */
  --code-bg: #0d1117;
  --code-text: #f0f6fc;
  --code-keyword: #ff7b72;
  --code-string: #a5c261;
  --code-comment: #8b949e;
  --code-variable: #79c0ff;

  /* Terminal */
  --terminal-bg: #000;
  --terminal-text: #00ff41;

  /* Shadow system */
  --shadow: 4px 4px 0 var(--shade-200);
  --shadow-hover: 6px 6px 0 var(--shade-200);
  --shadow-small: 2px 2px 0 var(--shade-200);
  --shadow-pressed: 0 0 0 var(--shade-200);



  /* Mobile font size tokens are driven by the unified type tokens' clamps */
}
@media (max-width: 768px) { }
/* =============================
   UNIFIED TYPOGRAPHY SCALE TOKENS
   Based on the provided type spec image
   - Display: 60, 32
   - Headlines: 24, 18, 16, 14, 12, 10
   - Body: 16 (big), 14 (medium), 12 (small), 10 (caption)
   - Inputs: 13 (text), 12 (placeholder)
   ============================= */
:root {
  /* Font families */
  --type-family-headline: var(--font-primary);
  --type-family-body: var(--font-secondary);

  /* Display sizes (clamped for responsiveness) */
  --type-display-60-size: max(3rem, min(8vw, 3.25rem)); /* 40–60px + 0.5rem */
  --type-display-60-lh: 1.1;
  --type-display-32-size: max(2.25rem, min(4.5vw, 2.5rem)); /* 28–32px + 0.5rem */
  --type-display-32-lh: 1.2;

  /* Headline sizes */
  --type-hl-24-size: max(1.75rem, min(3.5vw, 3em)); /* up to 24px + 0.5rem */
  --type-hl-24-lh: 1.3;
  --type-hl-18-size: max(1.5rem, min(3vw, 1.625rem)); /* 18px + 0.5rem */
  --type-hl-18-lh: 1.25;
  --type-hl-16-size: max(1.45rem, min(2.5vw, 1.5rem)); /* 16px + 0.5rem */
  --type-hl-16-lh: 1.3;
  --type-hl-14-size: max(1.375rem, min(2vw, 1.375rem)); /* 14px + 0.5rem */
  --type-hl-14-lh: 1.45;
  --type-hl-12-size: max(1.25rem, min(1.8vw, 1.25rem)); /* 12px + 0.5rem */
  --type-hl-12-lh: 1.5;
  --type-hl-10-size: max(1.125rem, min(1.5vw, 1.125rem)); /* 10px + 0.5rem */
  --type-hl-10-lh: 1.6;

  /* Body sizes */
  --type-body-16-size: 1rem;     /* 16px */
  --type-body-16-lh: 1.45;       /* 145% */
  --type-body-14-size: 0.875rem; /* 14px */
  --type-body-14-lh: 1.45;       /* 145% */
  --type-body-12-size: 0.75rem;  /* 12px */
  --type-body-12-lh: 1.45;       /* 145% */
  --type-caption-10-size: 0.625rem; /* 10px */
  --type-caption-10-lh: 1.5;        /* 150% */

  /* Inputs */
  --type-input-13-size: 0.8125rem;   /* 13px */
  --type-input-13-lh: 1.45;
  --type-placeholder-12-size: 0.75rem; /* 12px */
}
/* MANUAL Dark Theme Override */
html.dark {

  --shade-000: #000;
  --shade-100: #080B11;
  --shade-200: #292e38;
  --shade-300: #9f9f9f;
  --shade-400: #f6f7f9;
  --shade-500: #f9f9f9;


  --color-bg: #121212;
  --color-surface: #222222;
  --color-background: var(--color-bg);
  --color-text-primary: #e1e1e1;
  --color-text-secondary: #b0b0b0;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-surface-alt: #1a1a1a;
  --color-bg-elevated: #1a1a1a;
  --color-bg-hover: color-mix(in oklab, var(--color-surface) 85%, white 5%);
  --color-bg-muted: color-mix(in oklab, var(--color-bg) 90%, white 6%);

  --color-danger: #ef4444;
  --color-danger-contrast: #7f1d1d;
  --color-success: #22c55e;
  --color-success-contrast: #052e16;
  --color-warning: #f59e0b;
  --color-warning-contrast: #451a03;
  --color-info: #3b82f6;
  --color-info-contrast: #082f49;

  --accent-blue-bg: color-mix(in oklab, var(--accent-blue) 20%, transparent);
  --accent-blue-border: color-mix(in oklab, var(--accent-blue) 55%, transparent);
  --accent-yellow-bg: color-mix(in oklab, var(--accent-yellow) 30%, transparent);
  --accent-yellow-border: color-mix(in oklab, var(--accent-yellow) 60%, transparent);
  --accent-green-bg: color-mix(in oklab, var(--accent-green) 25%, transparent);
  --accent-green-border: color-mix(in oklab, var(--accent-green) 60%, transparent);
  --accent-red-bg: color-mix(in oklab, var(--accent-red) 24%, transparent);
  --accent-red-border: color-mix(in oklab, var(--accent-red) 60%, transparent);
  --accent-orange-bg: color-mix(in oklab, var(--accent-orange) 28%, transparent);
  --accent-orange-border: color-mix(in oklab, var(--accent-orange) 60%, transparent);
  --color-border-strong: color-mix(in oklab, var(--color-text-primary) 40%, transparent);
  --color-border-muted: color-mix(in oklab, var(--color-text-primary) 20%, transparent);

  --color-primary: #6a8cf9;
  --color-primary-dark: #5a7df9;

  --elevation-1: 0 4px 8px rgba(0, 0, 0, 0.4);
  --elevation-2: 0 6px 16px rgba(0, 0, 0, 0.5);
}
html.light {
  /* explicit light theme values - using the defaults */
  --color-bg: var(--shade-100);
  --color-surface: var(--shade-200);
  --color-text-primary: var(--shade-500);
  --color-text-secondary: var(--shade-400);
}
/* Add transition for theme changes */
html.theme-transition,
html.theme-transition body,
html.theme-transition main,
html.theme-transition .product-grid-section,
html.theme-transition .product-grid-item,
html.theme-transition .cardRidge {
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html.theme-transition .theme-transition-item {
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* TEMPORARY BACK-COMPAT (to be removed after full migration)
   Map old size variables to the new unified typography tokens so legacy CSS keeps working.
   This prevents regressions while we replace usages across all CSS files. */
:root {
  --font-size-base: var(--type-body-16-size);
  --font-size-sm: var(--type-body-14-size);
  --font-size-xs: var(--type-body-12-size);
  --font-size-md: var(--type-body-14-size);
  --font-size-lg: var(--type-hl-18-size);
  --font-size-xl: var(--type-display-32-size);
  --font-size-xxl: var(--type-display-60-size);
  --line-height-base: var(--type-body-16-lh);
  --line-height-sm: var(--type-body-14-lh);
}
/* === assets/css/standard-layout.css === */
/**
 * Modern CSS Layout - Semantic HTML5 with Best Practices
 * Follows MDN and W3C accessibility guidelines
 */
/* CSS Reset and Root Setup */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
    /* Space for sticky header */
}
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, sans-serif;
    font-family: var(--font-family-base, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, sans-serif);
    line-height: 1.6;
    color: #2d3748;
    color: var(--color-text, #2d3748);
    background-color: #f8f9fa;
    background-color: var(--color-background, #ffffff);
}
/* Skip Navigation Link for Accessibility */
.skip-link {
    position: absolute;
    top: -3rem;
    left: 1rem;
    z-index: 10000;
    padding: 0.5rem 1rem;
    background: #36c9f0;
    background: var(--color-primary, #3182ce);
    color: white;
    -webkit-text-decoration: none;
    text-decoration: none;
    border-radius: 0.25rem;
    font-weight: 600;
    transition: top 0.3s ease;
}
.skip-link:focus {
    top: 1rem;
}
/* Header - Semantic and Accessible */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ecedf0;
    background: var(--color-surface, #ffffff);
    backdrop-filter: blur(8px);
}
/* Main Content - Flexible Layout */
.main-content {
    flex: 1;
    /* Takes remaining space between header and footer */
    width: 100%;
    max-width: 100%;
    gap: 6rem;
    --reveal-content-scale: 1;
    transition: transform 340ms cubic-bezier(.22, 1, .36, 1);
    transform: scale(1) translateZ(0);
    transform: scale(var(--reveal-content-scale)) translateZ(0);
}
.main-content.page-product {
        gap: 16rem;
    }
@media (max-width: 768px) {
.main-content.page-product {
            gap: 10rem
    }
        }
html.menu-open .main-content {
    --reveal-content-scale: .965;
}
@media (prefers-reduced-motion: reduce) {
    html.menu-open .main-content {
        --reveal-content-scale: 1;
    }
}
/* Footer - Semantic Structure with Theme Support */
.site-footer {
    margin-top: auto;
    /* Pushes footer to bottom */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 1px solid var(--color-border, #e2e8f0);
}
/* Reading Progress - Accessible */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #36c9f0;
    background: var(--color-primary, #3182ce);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 1001;
    transition: transform 0.1s ease-out;
}
/* Navigation Menu - Overlay Pattern */
.reveal-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.reveal-menu[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}
.reveal-menu-inner {
    text-align: center;
    max-width: 90%;
    width: 100%;
    max-width: 600px;
}
.reveal-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* Floating Elements */
.floating-engagement-bar,
.scroll-to-top-btn,
.floating-buy-button {
    position: fixed;
    z-index: 1500;
}
.scroll-to-top-btn {
    bottom: 2rem;
    right: 2rem;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    height: -moz-fit-content;
    height: fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.scroll-to-top-btn.show {
    opacity: 1;
    transform: translateY(0);
}
/* Content Spacing and Typography */
.container {
    max-width: 1200px;
    max-width: var(--container-max-width, 1200px);
    margin: 0 auto;
}
/* Section anchors for smooth scrolling */
[id] {
    scroll-margin-top: 5rem;
}
/* Focus Management for Accessibility */
.main-content:focus {
    outline: none;
}
*:focus {
    outline: 2px solid #3182ce;
    outline: 2px solid var(--color-focus, #3182ce);
    outline-offset: 2px;
}
/* High contrast support */
@media (prefers-contrast: high) {
    .site-header {
        border-bottom-width: 2px;
    }

    .site-footer {
        border-top-width: 2px;
    }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* Responsive Design */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 3rem;
    }

    [id] {
        scroll-margin-top: 4rem;
    }

    .container {
        /* padding: 0 1rem; */
    }
}
/* Print Styles */
@media print {

    .reading-progress,
    .reveal-menu,
    .floating-engagement-bar,
    .scroll-to-top-btn,
    .floating-buy-button {
        display: none !important;
    }

    .site-header {
        position: relative;
        backdrop-filter: none;
    }

    body {
        display: block;
    }
}
/* Remove legacy container styles */
#siteContainer,
.site-container {
    display: contents;
    /* Makes container invisible to layout */
}
.site-container.reveal-active,
.site-container-handle,
.drag-indicator {
    display: none !important;
}
/* Floating elements - viewport positioned */
.floating-engagement-bar,
.scroll-to-top-btn,
.floating-buy-button {
    position: fixed;
    z-index: 1500;
}
.scroll-to-top-btn {
    bottom: 2rem;
    right: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.scroll-to-top-btn.show {
    opacity: 1;
    transform: translateY(0);
}
/* Article content with proper spacing */
.article-content,
.article-body {
    scroll-margin-top: 80px;
}
/* Section anchors */
[id] {
    scroll-margin-top: 80px;
}
/* Container widths using CSS custom properties */
.container,
.article-container {
    max-width: 1000px;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 60px;
    }

    [id],
    .article-content,
    .article-body {
        scroll-margin-top: 60px;
    }

    .main-content {
        gap: 8rem;
    }

    .reveal-menu-list {
        gap: 1rem;
    }
}
/* Accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal-menu,
    .reveal-menu-list li,
    .scroll-to-top-btn {
        transition: none;
    }
}
/* High contrast mode */
@media (prefers-contrast: high) {
    .reading-progress {
        background: currentColor;
    }

    .site-header {
        border-bottom-width: 2px;
    }
}
/* Focus management */
.main-content:focus {
    outline: none;
}
/* Performance optimizations */
.reading-progress {
    will-change: transform;
}
.reveal-menu {
    will-change: opacity, visibility;
}
/* Print styles */
@media print {

    .reading-progress,
    .reveal-menu,
    .floating-engagement-bar,
    .scroll-to-top-btn,
    .floating-buy-button {
        display: none !important;
    }

    .site-header {
        position: relative;
        backdrop-filter: none;
    }

    .main-content {
        min-height: 0;
    }
}
/* Legacy compatibility - remove complex container styles */
#siteContainer,
.site-container {
    /* Reset any existing complex styles */
    all: unset;
    display: contents;
    /* Make container transparent to layout */
}
/* Remove old site container animations and transforms */
.site-container.reveal-active,
.site-container-handle,
.drag-indicator {
    display: none !important;
}
/* Ensure body takes full height for proper footer positioning */
body {
    display: flex;
    flex-direction: column;
}
.main-content {
    flex: 1;
}
/* === assets/css/typography.css === */
/* === UNIFIED TYPOGRAPHY SYSTEM ===
   Maps semantic elements and utility classes to design-token type scale
   Keep styles minimal and reusable to avoid per-element overrides
*/
/* Base text rendering + families */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: 'Silkscreen', monospace;
  font-family: var(--type-family-headline);
  word-wrap: break-word;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  text-transform: none;
  /* color: var(--color-text-primary); */
}
p, .body, .text-body {
  font-family: 'Courier New', monospace;
  font-family: var(--type-family-body);
  color: #292e38;
  color: var(--color-text-secondary);
}
/* Display sizes */
.display-60 { font-size: max(3rem, min(8vw, 3.25rem)); font-size: var(--type-display-60-size); line-height: 1.1; line-height: var(--type-display-60-lh); }
.display-32 { font-size: max(2.25rem, min(4.5vw, 2.5rem)); font-size: var(--type-display-32-size); line-height: 1.2; line-height: var(--type-display-32-lh); }
/* Headline sizes */
.hl-24 { font-size: max(1.75rem, min(3.5vw, 3em)); font-size: var(--type-hl-24-size); line-height: 1.3; line-height: var(--type-hl-24-lh); font-weight: bolder; }
.hl-18 { font-size: max(1.5rem, min(3vw, 1.625rem)); font-size: var(--type-hl-18-size); line-height: 1.25; line-height: var(--type-hl-18-lh); font-weight: bolder;}
.hl-16 { font-size: max(1.45rem, min(2.5vw, 1.5rem)); font-size: var(--type-hl-16-size); line-height: 1.3; line-height: var(--type-hl-16-lh); font-weight: bolder;}
.hl-14 { }
.hl-12 {  }
.hl-10 {  }
/* Body sizes */
.body-16 { font-size: 1rem; font-size: var(--type-body-16-size); line-height: 1.45; line-height: var(--type-body-16-lh); }
.body-14 { font-size: 0.875rem; font-size: var(--type-body-14-size); line-height: 1.45; line-height: var(--type-body-14-lh); }
.body-12 { font-size: 0.75rem; font-size: var(--type-body-12-size); line-height: 1.45; line-height: var(--type-body-12-lh); }
.caption-10 { font-size: 0.625rem; font-size: var(--type-caption-10-size); line-height: 1.5; line-height: var(--type-caption-10-lh); opacity: 0.8; }
.caption { font-size: 0.625rem; font-size: var(--type-caption-10-size); line-height: 1.5; line-height: var(--type-caption-10-lh); opacity: 0.8; }
/* Map native headings to the scale */
h1, .h1 { font-size: max(2.25rem, min(4.5vw, 2.5rem)); font-size: var(--type-display-32-size); line-height: 1.2; line-height: var(--type-display-32-lh); margin-bottom: 2rem; margin-bottom: var(--space-lg); font-weight: bolder;}
h2, .h2 { font-size: max(1.75rem, min(3.5vw, 3em)); font-size: var(--type-hl-24-size); line-height: 1.3; line-height: var(--type-hl-24-lh); margin-bottom: 1.5rem; margin-bottom: var(--space-md); font-weight: bolder;}
h3, .h3 { margin-bottom: 1rem; margin-bottom: var(--space-sm); }
h4, .h4 { margin-bottom: 0.5rem; margin-bottom: var(--space-xs); }
/* Inputs and placeholders */
input, textarea, select { font-family: 'Courier New', monospace; font-family: var(--type-family-body); font-size: 0.8125rem; font-size: var(--type-input-13-size); line-height: 1.45; line-height: var(--type-input-13-lh); }
input::-moz-placeholder, textarea::-moz-placeholder { font-size: 0.75rem; font-size: var(--type-placeholder-12-size); color: #292e38; color: var(--color-text-secondary); }
input::placeholder, textarea::placeholder { font-size: 0.75rem; font-size: var(--type-placeholder-12-size); color: #292e38; color: var(--color-text-secondary); }
/* === assets/css/pixel-utilities.css === */
/* 
 * Pixel Design System - Modern Responsive Utilities
 * CSS3 responsive design, accessibility, and utility classes
 */
/* Modern responsive utilities with logical properties */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: max(1.5rem, min(5vw, 2rem));
  }
  
  h2, .h2 {
    font-size: max(1.25rem, min(4vw, 1.5rem));
  }
  
  h3, .h3 {
    font-size: max(1rem, min(3vw, 1.125rem));
  }
  

  .box,
  .card {
    padding: 1rem;
    padding: var(--space-sm);
  }
  
  .link {
    padding: 0.5rem 1rem;
    padding: var(--space-xs) var(--space-sm);
  }
    .grid.grid-2,
    .grid.grid-3,
    .grid.grid-4 {
      grid-template-columns: 1fr;
    }
  
  .terminal,
  .code-block {
    font-size: 0.875rem;
    padding: 1rem;
    padding: var(--space-sm);
  }
}
@media (max-width: 480px) {
  .card {
    /* margin-block: var(--space-xs); */
  }
  
  .tooltip-content {
    max-width: 250px;
    font-size: 0.75rem;
  }
    .alert {
    flex-direction: column;
    text-align: center;
  }
}
/* Modern accessibility focus styles */
button:not(.does-not-exist):focus-visible {
  outline: 2px solid #36c9f0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
a:not(.does-not-exist):focus-visible {
  outline: 2px solid #36c9f0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
input:not(.does-not-exist):focus-visible {
  outline: 2px solid #36c9f0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
textarea:not(.does-not-exist):focus-visible {
  outline: 2px solid #36c9f0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
select:not(.does-not-exist):focus-visible {
  outline: 2px solid #36c9f0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.chip:focus-visible {
  outline: 2px solid #36c9f0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.link:focus-visible {
  outline: 2px solid #36c9f0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.accordion-header:focus-visible {
  outline: 2px solid #36c9f0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
/* High contrast mode support with CSS3 */
@media (prefers-contrast: high) {
  :root {
    --shadow: 4px 4px 0 #000;
    --shadow-hover: 6px 6px 0 #000;
    --border: 4px solid #000;
    --border-thin: 2px solid #000;
  }
    .card,
  .code-block,
  .terminal,
  .alert {
    border-color: #000;
  }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
    .terminal-cursor {
    animation: none;
  }
  
  .animate-pulse,
  .animate-float,
  .animate-blink {
    animation: none;
  }
}
/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* Skip links for accessibility */
.skip-link {
  position: absolute;
  
  top: -200px !important;
  left: 6px;
  background: #36c9f0;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  padding: 0.5rem;
  padding: var(--space-xs);
  -webkit-text-decoration: none;
  text-decoration: none;
  border: 2px solid #ecedf0;
  border: var(--border-thin);
  z-index: 1000;
  border-radius: 2px;
}
.skip-link:focus {
    top: 6px;
  }
/* Print styles */
@media print {
  .terminal,
  .code-block {
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
    box-shadow: none !important;
  }
  
  .card,
  .alert {
    box-shadow: none !important;
    page-break-inside: avoid;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
  
  .tooltip-content,
  .animate-pulse,
  .animate-float {
    display: none !important;
  }
}
/* Dark mode specific adjustments */
@media (prefers-color-scheme: dark) {
  :root {
    --code-bg: #0d1117;
    --terminal-bg: #000;
  }
}
/* Modern utility classes with logical properties */
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-end { text-align: right; }
/* Text highlight utilities */
.text-highlight {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3));
}
.text-highlight-glow {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.5)) drop-shadow(0 0 24px rgba(139, 92, 246, 0.3));
}
.hidden { display: none; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: 0.5rem; gap: var(--space-xs); }
.gap-sm { gap: 1rem; gap: var(--space-sm); }
.gap-md { gap: 1.5rem; gap: var(--space-md); }
.gap-lg { gap: 2rem; gap: var(--space-lg); }
.p-xs { padding: 0.5rem; padding: var(--space-xs); }
.p-sm { padding: 1rem; padding: var(--space-sm); }
.p-md { padding: 1.5rem; padding: var(--space-md); }
.p-lg { padding: 2rem; padding: var(--space-lg); }
.m-xs { margin: 0.5rem; margin: var(--space-xs); }
.m-sm { margin: 1rem; margin: var(--space-sm); }
.m-md { margin: 1.5rem; margin: var(--space-md); }
.m-lg { margin: 2rem; margin: var(--space-lg); }
/* Spacing utilities */
.m-0 { margin: 0; }
.m-1 { margin: 0.5rem; margin: var(--space-xs); }
.m-2 { margin: 1rem; margin: var(--space-sm); }
.m-3 { margin: 1.5rem; margin: var(--space-md); }
.m-4 { margin: 2rem; margin: var(--space-lg); }
.p-0 { padding: 0; }
.p-1 { padding: 0.5rem; padding: var(--space-xs); }
.p-2 { padding: 1rem; padding: var(--space-sm); }
.p-3 { padding: 1.5rem; padding: var(--space-md); }
.p-4 { padding: 2rem; padding: var(--space-lg); }
/* Flexbox utilities */
.flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
/* === assets/css/accessibility.css === */
/**
 * Accessibility Styles
 * 
 * CSS for enhanced accessibility features including themes (system, light, dark, 
 * pastel green, pastel yellow, high contrast), font size adjustments, and image filters.
 * 
 * This file builds upon the design tokens system and ensures proper theme transitions
 * while maintaining accessibility standards.
 *
 * @version 2.0.0
 * @author RAIKEN Team
 */
/* Import design tokens to ensure they're available */
/* Base accessibility-specific variables that extend design tokens */
:root {
  /* Default border and interaction colors that work with all themes */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-hover: rgba(0, 0, 0, 0.05);
}
/* Enhanced theme transition using design token variables */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: 
    background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, box-shadow 0.3s ease !important;
  transition: 
    background-color var(--transition-fast, 0.3s ease), color var(--transition-fast, 0.3s ease), border-color var(--transition-fast, 0.3s ease), fill var(--transition-fast, 0.3s ease), box-shadow var(--transition-fast, 0.3s ease) !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Font Size Modifiers - using design token base */
html.font-small {
  --font-size-base: 14px;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.8rem;
  --font-size-md: 0.9rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2rem;
}
html.font-medium {
  /* Uses default design token values */
  --font-size-base: 16px;
}
html.font-large {
  --font-size-base: 18px;
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.95rem;
  --font-size-md: 1.1rem;
  --font-size-lg: 1.4rem;
  --font-size-xl: 2.2rem;
  --font-size-xxl: 3.2rem;
}
html.font-xlarge {
  --font-size-base: 20px;
  --font-size-xs: 0.85rem;
  --font-size-sm: 1rem;
  --font-size-md: 1.2rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2.5rem;
  --font-size-xxl: 3.5rem;
}
/* Pastel Green Theme - Built on design tokens */
html.pastel-green {
  /* Override design token colors while maintaining structure */
  --shade-100: #EFFFEF;
  --shade-200: #F0FFF0;
  --shade-300: #A0D0A0;
  --shade-400: #2E8B57;
  --shade-500: #006400;
  --shade-black: #006400;
  
  /* Color mappings using design token structure */
  --color-bg: var(--shade-100);
  --color-surface: var(--shade-200);
  --color-text-primary: var(--shade-500);
  --color-text-secondary: var(--shade-400);
  --color-background: var(--color-bg);
  
  /* Theme-specific colors */
  --color-primary: #8FBC8F;
  --color-secondary: #98FB98;
  --accent-contently: #3CB371;
  --color-error: #FF6B6B;
  --color-success: #4CAF50;
  --color-border: rgba(0, 100, 0, 0.15);
  --color-hover: rgba(0, 100, 0, 0.05);
  --color-shadow: rgba(0, 100, 0, 0.1);
  
  /* Ensure body styling follows tokens */
  background-color: #f8fafc;
  background-color: var(--color-bg);
  color: #080B11;
  color: var(--color-text-primary);
}
/* Dark mode adjustments for pastel green - respects prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  html.pastel-green:not(.light) {
    --shade-100: #C1E3C1;
    --shade-200: #9ACD9A;
    --shade-300: #6B8E6B;
    --shade-400: #1E2B1E;
    --shade-500: #192219;
    --shade-black: #192219;
    
    /* Update color mappings for dark mode */
    --color-bg: var(--shade-500);
    --color-surface: var(--shade-400);
    --color-text-primary: var(--shade-100);
    --color-text-secondary: var(--shade-200);
    --color-background: var(--color-bg);
    
    --color-primary: #5FAD5F;
    --color-secondary: #6B8E6B;
    --accent-contently: #2E8B57;
    --color-border: rgba(154, 205, 154, 0.2);
    --color-hover: rgba(154, 205, 154, 0.1);
    --color-shadow: rgba(0, 0, 0, 0.4);
  }
}
/* Pastel Yellow Theme - Built on design tokens */
html.pastel-yellow {
  /* Override design token colors while maintaining structure */
  --shade-100: #FFFFEF;
  --shade-200: #FFFEF0;
  --shade-300: #F0E68C;
  --shade-400: #A0522D;
  --shade-500: #8B4513;
  --shade-black: #8B4513;
  
  /* Color mappings using design token structure */
  --color-bg: var(--shade-100);
  --color-surface: var(--shade-200);
  --color-text-primary: var(--shade-500);
  --color-text-secondary: var(--shade-400);
  --color-background: var(--color-bg);
  
  /* Theme-specific colors */
  --color-primary: #F0E68C;
  --color-secondary: #FAFAD2;
  --accent-contently: #DAA520;
  --color-error: #FF6347;
  --color-success: #6B8E23;
  --color-border: rgba(139, 69, 19, 0.15);
  --color-hover: rgba(139, 69, 19, 0.05);
  --color-shadow: rgba(139, 69, 19, 0.1);
  
  background-color: #f8fafc;
  
  background-color: var(--color-bg);
  color: #080B11;
  color: var(--color-text-primary);
}
/* Dark mode adjustments for pastel yellow - respects prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  html.pastel-yellow:not(.light) {
    --shade-100: #F5EFDC;
    --shade-200: #EEE8AA;
    --shade-300: #B8860B;
    --shade-400: #2D271A;
    --shade-500: #262216;
    --shade-black: #262216;
    
    /* Update color mappings for dark mode */
    --color-bg: var(--shade-500);
    --color-surface: var(--shade-400);
    --color-text-primary: var(--shade-100);
    --color-text-secondary: var(--shade-200);
    --color-background: var(--color-bg);
    
    --color-primary: #DAA520;
    --color-secondary: #B8860B;
    --accent-contently: #F0E68C;
    --color-border: rgba(240, 230, 140, 0.2);
    --color-hover: rgba(240, 230, 140, 0.1);
    --color-shadow: rgba(0, 0, 0, 0.4);
  }
}
/* High Contrast Theme - Built on design tokens */
html.high-contrast {
  /* Override design token colors for maximum contrast */
  --shade-100: #FFFFFF;
  --shade-200: #DDDDDD;
  --shade-300: #AAAAAA;
  --shade-400: #555555;
  --shade-500: #000000;
  --shade-black: #000000;
  
  /* Color mappings using design token structure */
  --color-bg: var(--shade-500);
  --color-surface: var(--shade-500);
  --color-text-primary: var(--shade-100);
  --color-text-secondary: #FFFF00;
  --color-background: var(--color-bg);
  
  /* High contrast specific colors */
  --color-primary: #FFFFFF;
  --color-secondary: #FFFF00;
  --accent-contently: #FFFFFF;
  --color-error: #FF0000;
  --color-success: #00FF00;
  --color-border: #FFFFFF;
  --color-hover: rgba(255, 255, 255, 0.2);
  --color-shadow: none;
  
  /* Ensure maximum contrast */
  background-color: #080B11;
  background-color: var(--color-bg);
  color: #f8fafc;
  color: var(--color-text-primary);
}
/* High contrast enhancements for specific elements */
html.high-contrast a {
  color: #292e38;
  color: var(--color-text-secondary);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
html.high-contrast button {
  border: 2px solid #080B11;
  border: 2px solid var(--color-text-primary);
  background: #f9f9f9;
  background: var(--color-bg);
  color: #080B11;
  color: var(--color-text-primary);
  padding: 0.5rem;
  padding: var(--space-xs, 0.5em);
}
html.high-contrast button:hover,
html.high-contrast button:focus {
  background: #080B11;
  background: var(--color-text-primary);
  color: #f9f9f9;
  color: var(--color-bg);
}
html.high-contrast img {
  border: 1px solid #080B11;
  border: 1px solid var(--color-text-primary);
}
/* High contrast mode - force borders and outlines */
html.high-contrast * {
  border-color: rgba(0, 0, 0, 0.1) !important;
  border-color: var(--color-border) !important;
}
/* System Theme Integration with Design Tokens */
/* Auto theme respects system preference while building on design tokens */
html.theme-auto,
html:not(.dark):not(.light):not(.pastel-green):not(.pastel-yellow):not(.high-contrast) {
  /* Uses default design token values for light mode */
  --csstools-color-scheme--light: initial;
  color-scheme: light;
}
/* Auto dark mode - inherits design token dark mode values */
@media (prefers-color-scheme: dark) {
  html.theme-auto:not(.light),
  html:not(.dark):not(.light):not(.pastel-green):not(.pastel-yellow):not(.high-contrast) {
    /* Inherits from design-tokens.css dark mode variables */
    --color-bg: #121212;
    --color-surface: #222222;
    --color-background: var(--color-bg);
    --color-text-primary: #e1e1e1;
    --color-text-secondary: #b0b0b0;
    --color-shadow: rgba(0, 0, 0, 0.5);
    --color-primary: #6a8cf9;
    --color-primary-dark: #5a7df9;
    
    /* Dark mode specific border and hover colors */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-hover: rgba(255, 255, 255, 0.05);
  }
}
/* Force light mode when explicitly set */
html.light {
  --color-bg: var(--shade-100);
  --color-surface: var(--shade-200);
  --color-text-primary: var(--shade-500);
  --color-text-secondary: var(--shade-400);
  --color-background: var(--color-bg);
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-primary: #36c9f0;
  --color-primary-dark: #4e1cff;
  
  /* Light mode specific border and hover colors */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-hover: rgba(0, 0, 0, 0.05);
}
/* Enhanced component compatibility with accessibility themes */
html.pastel-green .card,
html.pastel-green .button,
html.pastel-green .btn {
  background-color: #ecedf0;
  background-color: var(--color-surface);
  color: #080B11;
  color: var(--color-text-primary);
  border-color: rgba(0, 0, 0, 0.1);
  border-color: var(--color-border);
}
html.pastel-yellow .newsletter,
html.pastel-yellow .card,
html.pastel-yellow .button,
html.pastel-yellow .btn {
  background-color: #ecedf0;
  background-color: var(--color-surface);
  color: #080B11;
  color: var(--color-text-primary);
  border-color: rgba(0, 0, 0, 0.1);
  border-color: var(--color-border);
}
html.high-contrast .newsletter,
html.high-contrast .card,
html.high-contrast .button,
html.high-contrast .btn {
  background-color: #f9f9f9;
  background-color: var(--color-bg);
  color: #080B11;
  color: var(--color-text-primary);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border: 2px solid var(--color-border);
}
/* Accessibility Image Filters */
/* Grayscale filter for images */
html.filter-grayscale img,
html.filter-grayscale video,
html.filter-grayscale canvas {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
  transition: filter var(--transition-fast, 0.3s ease);
}
/* Reduced motion - respects design token transitions */
@media (prefers-reduced-motion: no-preference) {
  html.filter-reduced-motion * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Override design token transitions when reduced motion is enabled */
  html.filter-reduced-motion {
    --transition-fast: 0.001ms;
    --transition-slow: 0.001ms;
  }
}
/* Light sensitivity / Low contrast */
html.filter-low-contrast {
  filter: contrast(90%) brightness(110%);
  transition: filter 0.3s ease;
  transition: filter var(--transition-fast, 0.3s ease);
}
/* Enhanced focus indicators using design tokens */
html.enhanced-focus a:focus,
html.enhanced-focus button:focus,
html.enhanced-focus input:focus,
html.enhanced-focus select:focus,
html.enhanced-focus textarea:focus,
html.enhanced-focus [tabindex]:focus {
  outline: 3px solid #36c9f0;
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
  border-radius: var(--border-radius-sm, 4px);
}
/* Dyslexia-friendly fonts using design tokens */
html.dyslexia-friendly {
  --font-primary: "OpenDyslexic", var(--font-secondary, monospace);
  --font-secondary: "Lexie Readable", "Comic Sans MS", sans-serif;
  --line-height-base: 1.8;
  letter-spacing: 0.05em;
}
/* Apply dyslexia-friendly styling to text elements */
html.dyslexia-friendly body,
html.dyslexia-friendly p,
html.dyslexia-friendly div:not(.title):not([class*="h"]),
html.dyslexia-friendly input,
html.dyslexia-friendly textarea,
html.dyslexia-friendly button,
html.dyslexia-friendly select {
  font-family: var(--font-family-body);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
}
/* Apply Lexie Readable to headings for better visual hierarchy */
html.dyslexia-friendly h1,
html.dyslexia-friendly h2,
html.dyslexia-friendly h3,
html.dyslexia-friendly h4,
html.dyslexia-friendly h5,
html.dyslexia-friendly h6,
html.dyslexia-friendly .h1,
html.dyslexia-friendly .h2,
html.dyslexia-friendly .h3,
html.dyslexia-friendly .h4,
html.dyslexia-friendly .h5,
html.dyslexia-friendly .h6,
html.dyslexia-friendly .title {
  font-family: var(--font-family-headings);
  letter-spacing: var(--letter-spacing);
  line-height: 1.6;
  font-weight: 900;
}
/* Accessibility Icon Styles */
.accessibility-toggle {
  position: relative;
}
.accessibility-toggle-icon {
  display: flex;
  align-items: baseline;
  width: 24px;
  height: 24px;
  font-size: 1.25rem;
}
/* Animation for accessibility icon */
.accessibility-toggled {
  animation: pulse 0.5s ease;
}
/* .context-menu.accessibility-menu intentionally inherits defaults */
/* Accessibility menu container */
.accessibility-menu-container {
  position: relative;
  
}
/* Expand button layout */
.expand-button-icon {
  margin-left: 4px;
  transition: transform 0.2s;
}
[aria-expanded="true"] .expand-button-icon {
  transform: rotate(180deg);
}
/* Modern Windows 11 style menu */
.a11y-menu-header {
  padding: 16px;
  margin-bottom: 8px;
}
.a11y-menu-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #080B11;
  color: var(--color-text-primary);
}
.modern-menu {
  padding: .5rem 1rem !important;
  z-index: 3122189;
}
.modern-menu .section-heading {
  padding: 1rem 0px .5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #292e38;
  color: var(--color-text-secondary);
}
/* Theme preview grid */
.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
  padding: 0 16px 16px;
}
/* Visual Adjustments Grid */
.visual-adjustments-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Default to 3 columns */
  grid-gap: 12px;
  gap: 12px;
  padding: 0 16px 16px;
}
/* Mobile Accessibility Enhancements */
@media (max-width: 768px) {
  /* Ensure grid displays well on narrow screens */
  .theme-preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  /* Add more space for touch targets */
  .context-menu button,
  .context-menu a {
    padding: 12px 16px;
    box-shadow: none !important;
  }
  
  .toggle-option {
    padding: 16px;
  }
  
  /* Ensure form controls are easy to interact with */
  .font-size-slider {
    height: 24px;
  }
  
  .font-size-slider::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  
  .font-size-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
  
  /* Rearrange visual options grid for mobile */
  .visual-adjustments-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile */
    gap: 10px;
    /* padding is already set in the base style, can be overridden if needed */
  }
  
  /* Give more space for scrolling */
  .context-menu.accessibility-menu .modern-menu {
    padding-bottom: 5rem !important; 
  }
}
.visual-option {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s;
}
.visual-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #ecedf0;
  background-color: var(--color-surface);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border);
}
.theme-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s;
  width: 100%;
}
.theme-preview-card:hover {
  transform: translateY(-2px);
}
.theme-preview {
  width: 100%;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border);
  margin-bottom: 6px;
  transition: all 0.2s;
}
.theme-preview-card:hover .theme-preview {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.theme-preview-card.active .theme-preview {
  outline: 2px solid #36c9f0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.preview-header {
  height: 20px;
}
.preview-content {
  height: 50px;
  padding: 8px;
}
.preview-line {
  height: 6px;
  border-radius: 3px;
  margin-bottom: 6px;
  width: 100%;
}
.preview-line.short {
  width: 60%;
}
.preview-label {
  font-size: 0.8rem;
  margin-top: 4px;
  color: #080B11;
  color: var(--color-text-primary);
}
/* Theme preview colors */
.light-theme {
  background-color: #ffffff;
}
.light-theme .preview-header {
  background-color: #f0f0f0;
}
.light-theme .preview-line {
  background-color: #333333;
}
.dark-theme {
  background-color: #222222;
}
.dark-theme .preview-header {
  background-color: #333333;
}
.dark-theme .preview-line {
  background-color: #dddddd;
}
.system-theme {
  background: linear-gradient(to right, #ffffff 50%, #222222 50%);
}
.system-theme .preview-header {
  background: linear-gradient(to right, #f0f0f0 50%, #333333 50%);
}
.system-theme .preview-line {
  background: linear-gradient(to right, #333333 50%, #dddddd 50%);
}
.pastel-green-theme {
  background-color: #EFFFEF;
}
.pastel-green-theme .preview-header {
  background-color: #8FBC8F;
}
.pastel-green-theme .preview-line {
  background-color: #006400;
}
.pastel-yellow-theme {
  background-color: #FFFFEF;
}
.pastel-yellow-theme .preview-header {
  background-color: #F0E68C;
}
.pastel-yellow-theme .preview-line {
  background-color: #8B4513;
}
.high-contrast-theme {
  background-color: #000000;
}
.high-contrast-theme .preview-header {
  background-color: #000000;
  border-bottom: 2px solid #FFFFFF;
}
.high-contrast-theme .preview-line {
  background-color: #FFFFFF;
}
.high-contrast-theme .preview-line.short {
  background-color: #FFFF00;
}
/* Font size controls */
.slider-container {
  padding: 0 16px 16px;
}
.font-size-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  height: 60px;
  background-color: #ecedf0;
  background-color: var(--color-surface);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border);
}
.font-size-text {
  font-weight: 600;
  transition: font-size 0.2s ease;
}
html.font-small .font-size-text {
  font-size: 1rem;
}
html.font-medium .font-size-text {
  font-size: 1.25rem;
}
html.font-large .font-size-text {
  font-size: 1.5rem;
}
html.font-xlarge .font-size-text {
  font-size: 1.75rem;
}
/* Simple slider controls */
.simple-slider-container {
  padding: 0rem 1.4rem 1.5rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.font-size-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: #c5cad4;
  background: var(--shade-300);
  border-radius: 3px;
  outline: none;
  margin: 15px 0 10px;
  cursor: pointer;
}
.font-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ecedf0;
  background: var(--shade-200);
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.font-size-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #36c9f0;
  background: var(--color-primary);
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.font-size-slider:focus {
  outline: 2px solid #36c9f0;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Position labels below the slider */
.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #292e38;
  color: var(--color-text-secondary);
  margin-top: 5px;
  padding: 0 5px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  /* Mobile-specific styles covered in the "Mobile Accessibility Enhancements" section above */
}
.visual-option:hover .visual-preview {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.demo-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.default-filter .demo-image {
  /* Default state - no filter applied */
  filter: none;
}
.grayscale-filter .demo-image {
  filter: grayscale(100%);
}
.reduced-motion-filter {
  position: relative;
  /* Additional styling for reduced motion */
}
.motion-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  color: white;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.5);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.low-contrast-filter .demo-image {
  filter: contrast(70%) brightness(120%);
}
/* Responsive context menu for mobile */
@media (max-width: 768px) {
    /* Special behavior for accessibility menu specifically */
    .context-menu.accessibility-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important; /* Override inline width */
        max-width: 100%;
        height: 50vh; /* Starting height, can be adjusted by dragging */
        max-height: 90vh; /* Maximum allowed height */
        min-height: 20vh; /* Minimum allowed height */
        transform: translateY(100%);
        margin: 0;
        border-radius: 12px 12px 0 0;
        border-bottom: none;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
        will-change: transform, height;
        /* Organic ease-out similar to mobile bottom sheets */
        transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), height 220ms ease-out;
    }

    .context-menu.accessibility-menu.active {
        transform: translateY(0);
        z-index: 99999;
    }

    /* Visual indication when dragging */
    .context-menu.accessibility-menu.is-dragging::before {
        background-color: #36c9f0;
        background-color: var(--color-primary, #3a86ff);
    }
}
/* Respect reduced motion: snap open/closed without long animations */
@media (prefers-reduced-motion: reduce) {
  .context-menu.accessibility-menu {
    transition: none !important;
  }
}
/* Backdrop for mobile sheets */
.context-menu-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 420ms;
  z-index: 99990; /* below the sheet (which uses 99999) */
}
.context-menu-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .context-menu-backdrop {
    transition: none !important;
  }
}
/* Global backdrop for mobile sheets (dialog-like) */
.context-menu-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.0);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
  z-index: 99990; /* below the sheet (99999), above page content */
}
.context-menu-backdrop.active {
  opacity: 0.4;
  opacity: var(--sheet-backdrop-opacity, 0.4);
  pointer-events: auto;
}
/* Slight transparency feedback while interacting */
.context-menu.accessibility-menu {
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), height 220ms ease-out, opacity 120ms ease;
}
.context-menu.accessibility-menu.is-dragging {
  opacity: 0.96; /* subtle */
}
.context-menu.accessibility-menu.is-interacting:not(.is-dragging) {
  opacity: 0.98; /* tap feedback */
}
/* Toggle options */
.toggle-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
}
.toggle-option:hover {
  background-color: rgba(0, 0, 0, 0.05);
  background-color: var(--color-hover);
}
.toggle-label {
  font-size: 0.9rem;
}
/* Improved divider */
.modern-menu .divider {
  height: 1px;
  margin: 4px 16px;
}
/* Only apply color-tinted grayscale to main content images and the main accessibility preview, not to .demo-image previews in the menu */
img.tinted-grey-pastel-green:not(.demo-image),
.cartridge-image.tinted-grey-pastel-green:not(.demo-image) {
  filter: grayscale(1) sepia(0.5) hue-rotate(50deg) saturate(1.6) brightness(0.9) !important;
  transition: filter 0.3s;
}
img.tinted-grey-pastel-yellow:not(.demo-image),
.cartridge-image.tinted-grey-pastel-yellow:not(.demo-image) {
  filter: grayscale(1) sepia(0.5) hue-rotate(368deg) saturate(1.8) brightness(1.05) !important;
  transition: filter 0.3s;
}
img.tinted-grey-high-contrast:not(.demo-image),
.cartridge-image.tinted-grey-high-contrast:not(.demo-image) {
  filter: grayscale(1) contrast(1.5) brightness(1) drop-shadow(0 0 2px #000) !important;
  transition: filter 0.3s;
}
.visual-preview.grayscale-filter .demo-image.tinted-grey-pastel-green {
  filter: grayscale(1) sepia(0.5) hue-rotate(50deg) saturate(1.6) brightness(0.9) !important
}
.visual-preview.grayscale-filter .demo-image.tinted-grey-pastel-yellow {
  filter: grayscale(1) sepia(0.5) hue-rotate(368deg) saturate(1.8) brightness(1.05) !important;
}
.visual-preview.grayscale-filter .demo-image.tinted-grey-high-contrast {
  filter: grayscale(1) contrast(1.5) brightness(1) drop-shadow(0 0 2px #000) !important;
}
/* === assets/css/pixel-components-layout.css === */
/* 
 * Pixel Design System - Layout Components
 * Semantic grids, cards, links, and layout utilities with modern CSS3
 */
/* Modern Grid Layouts with CSS3 features */
.grid {
  display: grid;
  grid-gap: 2rem;
  grid-gap: var(--space-lg);
  gap: 2rem;
  gap: var(--space-lg);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}
.grid.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  }
.grid.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }
.grid.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }
.grid.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  }
/* Consolidated Card Component with CSS3 nesting */
.card {
  background-color: #f9f9f9;
  background-color: var(--color-bg);
  padding: 2rem;
  padding: var(--space-lg);
  border: 2px solid #ecedf0;
  border: 2px solid var(--shade-200);
  box-shadow: 4px 4px 0 #ecedf0;
  box-shadow: 4px 4px 0 var(--shade-200);
  position: relative;
  overflow: hidden;
  border-radius: 0;

  /* Card variants using CSS custom properties */

  /* Interactive card modifier */

  /* Clickable card modifier - for cards that act as large buttons */
}
.card.card-accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background-color: #36c9f0;
    background-color: var(--_accent-color, var(--color-primary));
  }
.card.interactive {
    cursor: pointer;
    transition: all 0.2s ease;
  }
.card.interactive:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 #080B11;
      box-shadow: 6px 6px 0 var(--color-text-primary);
    }
.card.interactive:focus-visible {
      outline: 2px solid #36c9f0;
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
.card.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
  }
.card.clickable:hover {
      transform: translate(-1px, -1px);
      box-shadow: 5px 5px 0 #080B11;
      box-shadow: 5px 5px 0 var(--color-text-primary);
    }
.card.clickable:active {
      transform: translate(1px, 1px);
      box-shadow: 2px 2px 0 #080B11;
      box-shadow: 2px 2px 0 var(--color-text-primary);
    }
.card.card-blue {
    --_accent-color: var(--accent-blue);
  }
.card.card-green {
    --_accent-color: var(--accent-green);
  }
.card.card-yellow {
    --_accent-color: var(--accent-yellow);
  }
.card.card-red {
    --_accent-color: var(--accent-red);
  }
.card.card-purple {
    --_accent-color: var(--accent-purple);
  }
.card.card-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
.card .card {
    box-shadow: none;
  }
/* Card title component */
.card-title {
  /* Typography is handled via utilities like .hl-18/.hl-16/.display-32 */
  font-weight: bold;
  margin: 0 0 1.5rem 0;
  margin: 0 0 var(--space-md) 0;
  padding-bottom: 0.5rem;
  padding-bottom: var(--space-xs);
  color: #080B11;
  color: var(--color-text-primary);
  position: relative;
  display: block;
}
.card-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: repeating-linear-gradient(to right,
        #36c9f0 0px,
        #36c9f0 6px,
        transparent 6px,
        transparent 12px);
    background-image: repeating-linear-gradient(to right,
        var(--color-primary) 0px,
        var(--color-primary) 6px,
        transparent 6px,
        transparent 12px);
  }
hgroup {
  margin-bottom: 4rem;
  margin-bottom: var(--space-xl);
  text-align: center;
}
hgroup h2 {
    margin-bottom: 0rem;
  }
/* Semantic section divider using hr element */
hr.divider,
.divider {
  display: flex;
  align-items: center;
  margin: 2rem 0;
  margin: var(--space-lg) 0;
  font-family: 'Silkscreen', monospace;
  font-family: var(--type-family-headline);
  font-size: 0.75rem;
  font-size: var(--type-body-12-size);
  color: #080B11;
  color: var(--color-text-primary);
  text-transform: uppercase;
  border: none;
  height: auto;
}
hr.divider::before,
  hr.divider::after,
  .divider::before,
  .divider::after {
    content: "";
    flex: 1;
    height: 4px;
    background-image: repeating-linear-gradient(to right,
        #080B11 0px,
        #080B11 4px,
        transparent 4px,
        transparent 8px);
    background-image: repeating-linear-gradient(to right,
        var(--color-text-primary) 0px,
        var(--color-text-primary) 4px,
        transparent 4px,
        transparent 8px);
  }
hr.divider::before, .divider::before {
    margin-right: 1.5rem;
    margin-right: var(--space-md);
  }
hr.divider::after, .divider::after {
    margin-left: 1.5rem;
    margin-left: var(--space-md);
  }
/* Semantic perfect separator using hr element */
.separator {
  height: 4px;
  background-image: repeating-linear-gradient(to right,
      #36c9f0 0px,
      #36c9f0 4px,
      transparent 4px,
      transparent 8px);
  background-image: repeating-linear-gradient(to right,
      var(--color-primary) 0px,
      var(--color-primary) 4px,
      transparent 4px,
      transparent 8px);
  margin: 1.5rem 0;
  margin: var(--space-md) 0;
  border: none;
  position: relative;
}
.separator::before,
.separator::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  background-color: #080B11;
  background-color: var(--color-text-primary);
  top: -2px;
}
.separator::before {
  left: 0;
}
.separator::after {
  right: 0;
}
/* Semantic text highlight using mark element */
mark,
.highlight {
  position: relative;
  display: inline-block;
  background: transparent;
}
mark::after, .highlight::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(45deg,
        #36c9f0 0,
        #36c9f0 2px,
        transparent 2px,
        transparent 6px);
    background: repeating-linear-gradient(45deg,
        var(--color-primary) 0,
        var(--color-primary) 2px,
        transparent 2px,
        transparent 6px);
    opacity: 0.35;
    z-index: -1;
  }
.section {
  max-width: 1000px;
  max-width: var(--container-width);
  width: 100%;
  margin: 0rem auto;
  padding: 0 2rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  /* max-width: 100%; */
  gap: 2rem;
  gap: var(--space-lg);
}
.section-header {
  /* Utility classes for pixel styling */
  text-align: left;
}
.section-header .section-title,
  .section-header .section-header-title {
    position: relative;
    display: inline-block;
    padding: 0 0 8px 0;
    margin-bottom: 1.5rem;
    margin-bottom: var(--space-md);
  }
.section-header .section-header-subtitle,
  .section-header .section-subtitle {
    color: #292e38;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-size: var(--type-body-14-size);
    margin-bottom: 1.5rem;
    margin-bottom: var(--space-md);
  }
.section-header.textcenter {
    text-align: center;
  }
/* === sections/header/header.css === */
/* ===== SITE HEADER ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  background-color: transparent;
  padding: 0.5rem 2rem;
  /* Reserve height to prevent layout shift from late font/menu changes */
  min-height: 56px;
}
/* site header mobile */
@media (max-width: 600px) {
  .site-header {
    padding: 0.5rem 1rem;
  }
}
@media (max-width: 820px) {
  .header-user-toggle {
    padding: 0.2rem;
  }
}
@media (max-width: 420px) {
  .header-login-link {
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
  }
}
/* Header state classes moved outside nesting for better compatibility */
.site-header.header-hidden {
  transform: translateY(-100%);
}
.site-header.header-scrolled {
  /* background-color: rgba(var(--color-surface-rgb, 255, 255, 255), 0.8); */
  background: linear-gradient(180deg,
      rgba(248, 250, 252, 0.5) 100%, #f8fafc 10%);
  /* Safari support */
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  box-shadow: var(--elevation-1, 0 2px 10px rgba(0, 0, 0, 0.1));
}
@supports (color: color-mix(in lch, red, blue)) {
.site-header.header-scrolled {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--shade-100) 50%, transparent) 100%, var(--shade-100) 10%);
}
}
/* Keep header visible while reveal menu is open */
html.menu-open .site-header {
  transform: translateY(0) !important;
  z-index: 1002;
  /* Above reveal menu (z-index: 1) */
  /* Remove any background when menu is open */
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: none !important;
  outline: none !important;
  /* Ensure text has proper contrast against dark reveal menu */
  color: #fff;
  color: var(--color-text-primary-inverse, #fff);
}
/* Ensure all header children also remove any borders when menu is open */
html.menu-open .site-header *,
html.menu-open .site-header .header-inner,
html.menu-open .site-header .logo-wrap,
html.menu-open .site-header .main-nav {
  border: none !important;
  border-bottom: none !important;
  outline: none !important;
}
/* Ensure all header elements have proper contrast when menu is open */
html.menu-open .site-header .logo {
  color: #fff;
  color: var(--color-text-primary-inverse, #fff);
  transition: color 0.3s ease;
}
html.menu-open .site-header .main-nav a {
  color: #fff;
  color: var(--color-text-primary-inverse, #fff);
  transition: color 0.3s ease;
}
html.menu-open .site-header .main-nav a::after {
  background-color: #fff;
  background-color: var(--color-primary-inverse, #fff);
  transition: background-color 0.3s ease;
}
html.menu-open .site-header #accessibilityToggle {
  color: #fff;
  color: var(--color-text-primary-inverse, #fff);
  transition: color 0.3s ease;
}
/* Inner container centers header content and constrains width */
.header-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
/* ===== LOGO ===== */
.logo {
  flex: 0 0 auto;
  margin-right: 2rem;
  margin-right: var(--space-lg, 2rem);
  font-weight: bold;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-family: 'Silkscreen', monospace;
  font-family: var(--font-primary, sans-serif);
  color: #080B11;
  color: var(--color-text-primary);
  transition: color 0.3s ease;
  /* Add transition for smooth color changes */
}
.logo body.reveal-menu-open {
  /* Prevent background scroll when menu is open */
  overflow: hidden;
  overscroll-behavior: none;
}
.logo-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* ===== BREADCRUMB VISIBILITY (Unified) ===== */
/* Hide breadcrumb by default and reveal when the logo is interacted with */
.logo-wrap .breadcrumb-nav {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 1001;
  /* above header content */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  padding: 0;
  /* override component padding to hug logo */
}
/* Visible state controlled by JS for robust behavior */
.logo-wrap .breadcrumb-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
  /* allow clicks when visible */
  transform: translateY(0);
}
/* When header gets scrolled state, keep behavior consistent */
.site-header.header-scrolled .logo-wrap .breadcrumb-nav {
  backdrop-filter: none;
}
/* Remove container centering/width inside breadcrumb when under logo */
.logo-wrap .breadcrumb-nav .article-container {
  max-width: none;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
}
/* ===== MAIN NAVIGATION ===== */
.main-nav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-end;
  position: relative;
  min-width: 0;
  gap: 1rem;
  gap: var(--space-sm);
}
.header-user-menu {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  margin-left: var(--space-sm);
}
.header-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 253, 0.35);
  color: #080B11;
  color: var(--color-text-primary);
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.header-login-link:hover,
.header-login-link:focus {
  transform: translateY(-1px);
  border-color: rgba(129, 140, 248, 0.55);
  background: rgba(59, 130, 246, 0.12);
}
.header-user-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 253, 0.35);
  background: rgba(15, 23, 42, 0.55);
  color: #080B11;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  line-height: 1;
  min-width: 42px;
  min-height: 42px;
}
.header-user-toggle:hover,
.header-user-toggle:focus {
  transform: translateY(-1px);
  border-color: rgba(129, 140, 248, 0.55);
  background: rgba(30, 41, 59, 0.8);
  box-shadow: 0 14px 28px -20px rgba(59, 130, 246, 0.65);
}
.header-user-toggle:focus {
  outline: 2px solid rgba(129, 140, 248, 0.45);
  outline-offset: 2px;
}
.header-user-toggle__avatar .user-avatar {
  pointer-events: none;
  box-shadow: none;
  transition: none;
}
.header-user-toggle__avatar .user-avatar:hover,
.header-user-toggle__avatar .user-avatar:focus-visible {
  transform: none;
}
.header-user-toggle__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.main-menu {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1rem;
  gap: var(--space-sm);
  min-width: 0;
  flex-wrap: nowrap;
  overflow: visible;
  /* Allow items to be visible for JS check */
}
.main-menu li {
    flex-shrink: 0;
    /* Prevent items from shrinking */
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    margin-left: 1.5rem;
  }
.main-menu li a,
    .main-menu li button {
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-text-decoration: none;
      text-decoration: none;
      padding: 0.5rem 1rem;
      padding: var(--space-xs) var(--space-sm);
      border-radius: 0;
      transition: 0.3s ease;
      transition: var(--transition-fast);
      line-height: 1;
      min-height: 40px;
      white-space: nowrap;
    }
.main-menu li a {
      -webkit-text-decoration: none;
      text-decoration: none;
      color: #080B11;
      color: var(--color-text-primary);
      font-weight: 500;
      position: relative;
      transition: color 0.3s;
      padding: 0.5rem 0;
    }
.main-menu li a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #36c9f0;
        background-color: var(--color-primary, #007bff);
        /* fallback color */
        transition: width 0.3s;
      }
.main-menu li a:hover::after,
      .main-menu li a.active::after {
        width: 100%;
      }
/* ===== COLLAPSED MENU (Mobile) ===== */
.collapsed-menu {
  display: none;
  /* Hidden by default */
  position: absolute;
  top: 100%;
  /* Position below the header */
  right: 0;
  background-color: #ecedf0;
  background-color: var(--color-surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border, #ccc);
  border-radius: 8px;
  border-radius: var(--border-radius-md, 8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  box-shadow: var(--elevation-2, 0 4px 12px rgba(0, 0, 0, 0.15));
  list-style: none;
  padding: 1rem;
  padding: var(--space-sm, 0.5rem);
  margin: 0.5rem 0 0;
  min-width: 200px;
  z-index: 1001;
  /* Above other header content */
}
.collapsed-menu.active {
  display: block;
  /* Show when active */
}
.collapsed-menu li {
  margin: 0;
  padding: 0;
}
.collapsed-menu li a,
.collapsed-menu li button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem 1.5rem;
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  color: #080B11;
  color: var(--color-text-primary);
  -webkit-text-decoration: none;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}
.collapsed-menu li a:hover,
.collapsed-menu li button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  background-color: var(--color-hover, #f0f0f0);
}
/* ===== MENU TOGGLE BUTTON ===== */
.menu-toggle {
  display: none;
  /* Let JS control visibility */
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 0.5rem;
  border: none;
  display: flex;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, background-color 0.3s;

  /* This media query is a fallback for initial load on small screens,
     but JS in header.js is the primary controller of visibility. */
}
.menu-toggle .burger {
    width: 24px;
    height: 24px;
    position: relative;
  }
.menu-toggle .burger span {
      /* The following styles are now removed to prevent duplication */
      position: absolute;
      height: 2px;
      width: 100%;
      background: #292e38;
      background: var(--shade-400, #666);
      border-radius: 2px;
      opacity: 1;
      left: 0;
      transform: rotate(0deg);
      transition: all 0.25s ease-in-out;
      /* Ensure visibility with accessibility filters */
      will-change: background-color, transform;
    }
.menu-toggle .burger span:nth-child(1) {
      top: 4px;
    }
.menu-toggle .burger span:nth-child(2) {
      top: 11px;
    }
.menu-toggle .burger span:nth-child(3) {
      top: 18px;
    }
.menu-toggle.open .burger span:nth-child(1) {
    top: 11px;
    transform: rotate(135deg);
  }
.menu-toggle.open .burger span:nth-child(2) {
    opacity: 0;
    left: -60px;
    /* Move it out of view */
    visibility: hidden;
  }
.menu-toggle.open .burger span:nth-child(3) {
    top: 11px;
    transform: rotate(-135deg);
  }
@media (max-width: 768px) {
.menu-toggle {

    /* display: flex; */
}
    .menu-toggle .burger {
      display: block;
    }
  }
.menu-toggle-icon {
  width: 24px;
  height: 24px;
}
/* ===== ACCESSIBILITY TOGGLE ===== */
#accessibilityToggle {
  background: none;
  border: none;
  cursor: pointer;
  box-shadow: none;
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  /* Limit transform to reduce potential CLS from reflow */
  transition: transform 0.2s ease, background-color 0.3s ease, color 0.3s ease;
  width: 32px;
  /* Stabilize width */
  height: 32px;
  /* Stabilize height */
}
#accessibilityToggle:hover {
    transform: scale(1.1);
  }
#accessibilityToggle:active {
    transform: scale(0.95);
  }
.accessibility-toggle-icon {
  width: 24px;
  height: 24px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.accessibility-menu-container {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  margin-left: var(--space-sm);
  /* Reserve space so icon/text swaps don't shift layout */
  min-width: 32px;
}
/* Ensure burger menu visibility with accessibility filters - only background color */
html.filter-grayscale .menu-toggle .burger span,
html.filter-low-contrast .menu-toggle .burger span,
html.pastel-green .menu-toggle .burger span,
html.pastel-yellow .menu-toggle .burger span,
html.high-contrast .menu-toggle .burger span {
  background: #080B11 !important;
  background: var(--color-text-primary, var(--shade-400, #666)) !important;
}
/* Menu open state with filters - ensure inverse colors work */
html.menu-open.filter-grayscale .site-header .menu-toggle .burger span,
html.menu-open.filter-low-contrast .site-header .menu-toggle .burger span,
html.menu-open.pastel-green .site-header .menu-toggle .burger span,
html.menu-open.pastel-yellow .site-header .menu-toggle .burger span {
  background: #fff !important;
  background: var(--color-text-primary-inverse, #fff) !important;
}
/* Scrolled header with accessibility filters */
html.filter-grayscale .site-header.header-scrolled,
html.filter-low-contrast .site-header.header-scrolled,
html.pastel-green .site-header.header-scrolled,
html.pastel-yellow .site-header.header-scrolled {
  background: linear-gradient(180deg,
      rgba(236, 237, 240, 0.5) 100%, 
      #ecedf0 10%) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  box-shadow: var(--elevation-1, 0 2px 10px var(--color-shadow, rgba(0, 0, 0, 0.1))) !important;
}
@supports (color: color-mix(in lch, red, blue)) {
html.filter-grayscale .site-header.header-scrolled,
html.filter-low-contrast .site-header.header-scrolled,
html.pastel-green .site-header.header-scrolled,
html.pastel-yellow .site-header.header-scrolled {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-surface, var(--shade-100)) 50%, transparent) 100%, 
      var(--color-surface, var(--shade-100)) 10%) !important;
}
}
/* High contrast scrolled header */
html.high-contrast .site-header.header-scrolled {
  background: #ecedf0 !important;
  background: var(--color-surface, #fff) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 10px var(--color-shadow, rgba(0, 0, 0, 0.3)) !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
  border-bottom: 2px solid var(--color-border, #000) !important;
}
/* Remove high contrast border when menu is open */
html.menu-open.high-contrast .site-header.header-scrolled {
  border-bottom: none !important;
}
/* Scrolled header text colors with accessibility filters */
html.filter-grayscale .site-header.header-scrolled,
html.filter-low-contrast .site-header.header-scrolled,
html.pastel-green .site-header.header-scrolled,
html.pastel-yellow .site-header.header-scrolled,
html.high-contrast .site-header.header-scrolled {
  color: #080B11 !important;
  color: var(--color-text-primary) !important;
}
html.filter-grayscale .site-header.header-scrolled .logo,
html.filter-low-contrast .site-header.header-scrolled .logo,
html.pastel-green .site-header.header-scrolled .logo,
html.pastel-yellow .site-header.header-scrolled .logo,
html.high-contrast .site-header.header-scrolled .logo {
  color: #080B11 !important;
  color: var(--color-text-primary) !important;
}
html.filter-grayscale .site-header.header-scrolled .main-nav a,
html.filter-low-contrast .site-header.header-scrolled .main-nav a,
html.pastel-green .site-header.header-scrolled .main-nav a,
html.pastel-yellow .site-header.header-scrolled .main-nav a,
html.high-contrast .site-header.header-scrolled .main-nav a {
  color: #080B11 !important;
  color: var(--color-text-primary) !important;
}
html.filter-grayscale .site-header.header-scrolled #accessibilityToggle,
html.filter-low-contrast .site-header.header-scrolled #accessibilityToggle,
html.pastel-green .site-header.header-scrolled #accessibilityToggle,
html.pastel-yellow .site-header.header-scrolled #accessibilityToggle,
html.high-contrast .site-header.header-scrolled #accessibilityToggle {
  color: #080B11 !important;
  color: var(--color-text-primary) !important;
}
/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
/* Accessibility improvements */
.main-nav a:focus-visible,
#accessibilityToggle:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid #36c9f0;
  outline: 2px solid var(--color-primary, #007bff);
  outline-offset: 2px;
  border-radius: 2px;
}
/* ===== MODERN REVEAL MENU + PUSH-DOWN CONTAINER ===== */
/* Dark background for body when menu is open */
body {
  transition: background-color 350ms ease-out;
}
html.menu-open body {
  /* Prevent background scroll when reveal menu is open */
  overflow: hidden;
  overscroll-behavior: none;
}
html.menu-open #siteContainer {
  overflow: auto;
}
/* Backdrop overlay for reveal menu */
.reveal-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 980; /* below reveal menu but above site content */
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
.reveal-menu-backdrop.active {
  opacity: 1;
}
/* Container that holds the page content and is pushed down when menu opens */
.site-container {
  position: relative;
  z-index: 2;
  /* Above the reveal menu */
  background: #f8f9fa;
  background: var(--color-background);
  /* Site content should scroll independently of body so we can resize it on menu open */
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: margin-top 300ms ease-out, height 300ms ease-out, border-radius 350ms ease-out, box-shadow 350ms ease-out, transform 340ms cubic-bezier(.22,1,.36,1);
  will-change: height, margin-top;
  /* Make the site container its own scroll context so spacebar/PageDown work when focused */
  overscroll-behavior-y: contain;
  /* Prevent layout shifts during animation */
  contain: layout style paint;
}
html.menu-open .site-container {
  transform: scale(.965) translateZ(0);
  /* Optional subtle shadow to emphasize depth while scaled */
  box-shadow: 0 8px 40px -8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,0.04) inset;
  border-radius: 2rem;
}
@media (prefers-reduced-motion: reduce) {
  html.menu-open .site-container { transform: none; box-shadow: none; }
}
.site-container.reveal-active {
  /* Physically push the content down and shrink its viewport so the menu takes space */
  margin-top: 0px;
  margin-top: var(--reveal-height, 0px);
  height: calc(100vh - 0px);
  height: calc(100vh - var(--reveal-height, 0px));
  /* Reduce border radius for less card-like appearance */
  border-radius: 2rem 2rem 0 0 !important;
  overflow: hidden;
  /* Clip rounded corners */
  /* Consistent transition timing */
  transition: margin-top 300ms ease-out, height 300ms ease-out, border-radius 350ms ease-out, box-shadow 350ms ease-out;
  /* Add subtle shadow to indicate depth */
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
/* A subtle drag handle to close the menu (optional) */
.site-container-handle {
  position: sticky;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) !important;

  z-index: 1002;
  /* above rounded container */
  opacity: 0;
  pointer-events: none;
  cursor: grab;
  touch-action: none;
  /* allow drag gestures without scrolling the page */
}
.site-container.reveal-active .site-container-handle {
  opacity: 1;
  pointer-events: auto;
}
/* Fallback styles to mirror accessibility handle visuals if a11y CSS not loaded */
.site-container-handle.a11y-menu-drag-area {
  height: 36px;
  width: 140px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-container-handle .drag-indicator {
  width: 56px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.2);
}
/* --- Overrides to prevent bundled a11y menu CSS from breaking the drawer handle --- */
/* Ensure our reveal handle doesn't get hidden or stretched by context menu styles */
.site-container-handle.a11y-menu-drag-area {
  display: flex !important;
  /* override display:none on desktop */
  width: auto !important;
  /* override width:100% */
  background: transparent !important;
  /* override background color */
  left: 50% !important;
  top: 10px !important;
  transform: translateX(-50%) !important;
  z-index: 99999;
  cursor: grab !important;
  /* better affordance than ns-resize for drawer */
}
/* Hide context menu hint text for this handle */
.site-container-handle.a11y-menu-drag-area::before,
.site-container-handle.a11y-menu-drag-area::after {
  content: none !important;
  display: none !important;
}
/* Keep the indicator visible and styled consistently */
.site-container-handle.a11y-menu-drag-area .drag-indicator {
  width: 56px !important;
  height: 6px !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
}
/* Theme-aware contrast for the handle */
html:not(.dark) .site-container-handle .drag-indicator {
  background-color: rgba(0, 0, 0, 0.28);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
html.dark .site-container-handle .drag-indicator {
  background-color: rgba(255, 255, 255, 0.92);
}
/* The menu that sits behind the page and becomes visible when the container moves down */
.reveal-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  /* top aligned */
  /* Dynamic height: grow to fit content but never exceed viewport minus content's min height */
  height: auto;
  max-height: calc(100vh - 10vh);
  z-index: 1001; /* above backdrop */
  /* Behind the site container */
  /* Use design-system black for solid background */
  background: #080B11;
  background: var(--shade-black, #000);
  color: #fff;
  color: var(--color-text-primary-inverse, #fff);
  padding-bottom: max(72px, min(12vh, 160px));
  padding-top: max(72px, min(12vh, 160px));
  /* breathing space under header */
  display: grid;
  grid-template-rows: auto 1fr;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y; /* allow vertical scroll inside when scrollable */
  transition: max-height 280ms ease;
}
.reveal-menu[aria-hidden="true"] {
  visibility: hidden;
  max-height: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.reveal-menu[aria-hidden="false"] {
  visibility: visible;
  border-radius: 0 0 3rem 3rem;
}
/* When menu is hidden, site container returns to normal state */
html:not(.menu-open) .site-container {
  /* Ensure clean state when menu is closed */
  margin-top: 0;
}
.reveal-menu-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 24px;
}
.reveal-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-gap: 20px;
  gap: 20px;
}
/* Restore responsive item sizing from earlier design */
.reveal-menu-list>li {
  font-size: max(20px, min(3.4vw, 28px));
  transition: transform 140ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top center;
  /* Dynamic scale controlled by JS via CSS custom property (fallback ensures no shrink if missing) */
  --item-scale: 1;
  transform: translateY(0) scale(1) translateZ(0);
  transform: translateY(0) scale(var(--item-scale, 1)) translateZ(0);
}
/* Base scale effect during drag close */
.reveal-menu.dragging-close .reveal-menu-list>li {
  transition: transform 200ms ease-out !important;
}
/* Also apply scale to the inner content for better effect */
/* Remove whole-container scale so individual item scaling remains clear */
.reveal-menu.dragging-close .reveal-menu-inner {
  transform: none !important;
  transition: none !important;
}
/* Typography for menu items is handled via utilities on the container (e.g., hl-18 on .reveal-menu-list) */
.reveal-menu-list a,
.reveal-menu-list button[role="menuitem"] {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.reveal-menu-list a:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
/* Softer, simpler fade-and-lift */
@keyframes navGhostIn {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(1);
    transform: translateY(8px) scale(var(--item-scale,1));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    transform: translateY(0) scale(var(--item-scale,1));
  }
}
.reveal-menu[aria-hidden="false"] .reveal-menu-list>li {
  opacity: 0;
  transform: translateY(8px) scale(1);
  transform: translateY(8px) scale(var(--item-scale,1));
  animation: navGhostIn 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  /* ease-out cubic */
  /* Delay is dynamically provided via --stagger-index from JS */
  animation-delay: calc(20ms + (0 * 24ms));
  animation-delay: calc(20ms + (var(--stagger-index, 0) * 24ms));
  will-change: opacity, transform;
}
/* Note: Hard-coded nth-child delays removed in favor of CSS variable above */
@media (prefers-reduced-motion: reduce) {
  .reveal-menu[aria-hidden="false"] .reveal-menu-list>li {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-container {
    transition: none;
  }

  .site-container.reveal-active {
    transition: none;
  }
}
/* Move the decorative gradient blobs from body to the site container so they clip with rounded corners */
/* Restore decorative gradient blobs on body now that .site-container removed */
body.site-layered::before,
body.site-layered::after {
  content: '';
  position: absolute;
  pointer-events: none;
  /* Prevent layout shifts */
  will-change: transform;
  transform: translateZ(0);
}
/* Mirror body::before styles onto the container */
body.site-layered::before {
  top: -50vw;
  left: 5vw;
  width: 70vw;
  height: 70vw;
  min-width: 300px;
  min-height: 300px;
  background: radial-gradient(circle,
      #36c9f0 0%,
      #bb6bd9 35%,
      #ff3d3d 70%,
      transparent 100%);
  background: radial-gradient(circle,
      var(--accent-contently) 0%,
      var(--accent-color-extractly) 35%,
      var(--accent-notely) 70%,
      transparent 100%);
  border-radius: 50%;
  opacity: 0.15;
  z-index: 0;
  /* Reduced animation that's less likely to cause layout shifts */
  animation: blobFloatSubtle 12s ease-in-out infinite;
  filter: blur(max(30px, min(4vw, 50px)));
  /* Optimize for performance */
  contain: layout style paint;
  isolation: isolate;
}
body.site-layered::after {
  top: -20vw;
  right: 5vw;
  width: 40vw;
  height: 40vw;
  min-width: 250px;
  min-height: 250px;
  background: radial-gradient(circle,
      #f2c94c 0%,
      #27ae60 45%,
      #af52de 80%,
      transparent 100%);
  background: radial-gradient(circle,
      var(--accent-bookmarkly) 0%,
      var(--accent-indexly) 45%,
      var(--accent-purple) 80%,
      transparent 100%);
  border-radius: 50%;
  opacity: 0.12;
  z-index: 0;
  /* Reduced animation that's less likely to cause layout shifts */
  animation: blobFloatSubtle 15s ease-in-out infinite reverse;
  filter: blur(max(35px, min(5vw, 60px)));
  /* Optimize for performance */
  contain: layout style paint;
  isolation: isolate;
}
/* Dark variants to match the originals */
html.dark body.site-layered::before {
  background: radial-gradient(circle, #4fc3f7 0%, #bb6bd9 35%, #ff6b6b 70%, transparent 100%);
  opacity: 0.25;
  filter: blur(max(25px, min(4vw, 45px)));
}
@media (prefers-color-scheme: dark) {
  html:not(.light) body.site-layered::before {
    background: radial-gradient(circle, #4fc3f7 0%, #bb6bd9 35%, #ff6b6b 70%, transparent 100%);
    opacity: 0.25;
    filter: blur(max(25px, min(4vw, 45px)));
  }

  html:not(.light) body.site-layered::after {
    background: radial-gradient(circle, #f2c94c 0%, #49ca8e 45%, #af52de 80%, transparent 100%);
    opacity: 0.22;
    filter: blur(max(30px, min(5vw, 55px)));
  }
}
html.dark body.site-layered::after {
  background: radial-gradient(circle, #f2c94c 0%, #49ca8e 45%, #af52de 80%, transparent 100%);
  opacity: 0.22;
  filter: blur(max(30px, min(5vw, 55px)));
}
/* Subtle blob animation that prevents layout shifts */
@keyframes blobFloatSubtle {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.15;
  }

  50% {
    transform: translate(1vw, 0.5vh) scale(1.02);
    opacity: 0.18;
  }
}
/* Disable animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {

  body.site-layered::before,
  body.site-layered::after {
    animation: none !important;
  }
}
/* ===== REVEAL MENU HANDLE ===== */
.reveal-menu__handle {
  position: sticky;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 48px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  opacity: 0.7;
  transition: opacity 200ms ease;
  margin: 16px auto 0;
}
.reveal-menu__handle:hover {
  opacity: 1;
}
.reveal-menu__handle:active,
.reveal-menu__handle.dragging {
  cursor: grabbing;
  opacity: 1;
}
.reveal-menu__handle-indicator {
  width: 32px;
  height: 4px;
  background: #fff;
  background: var(--color-text-primary-inverse, #fff);
  border-radius: 2px;
  opacity: 0.8;
  transition: opacity 200ms ease, transform 200ms ease;
}
.reveal-menu__handle:hover .reveal-menu__handle-indicator {
  opacity: 1;
  transform: scaleX(1.1);
}
/* Only show handle when menu is open */
.reveal-menu[aria-hidden="true"] .reveal-menu__handle {
  display: none;
}
/* === sections/footer/footer.css === */
.site-footer {

    /* Typography via utilities (e.g., body-12) */
    font-family: 'Silkscreen', monospace, monospace;
    font-family: var(--font-primary), monospace;
    border-top: 1px solid #c5cad4;
    border-top: 1px solid var(--shade-300);
}
.footer-inner {
    max-width: 1200px;
    max-width: var(--container-width-big);
    margin: 0 auto;
    padding: 3rem 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;

    /* the first level divs should have a 1.5rem gap */
}
.footer-inner >div {
        gap: 1rem;
        display: flex;
        flex-direction: column;
    }
/* Link styles inherit typography from utilities applied in markup */
.social-links a {
    margin-right: .25rem;
}
.social-links a svg {
        height: 2.5rem;
        width: 2.5rem;
    }
/* === assets/css/styles.css === */
* {
  box-sizing: border-box;

}
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  color: #292e38;
  color: var(--color-text-secondary);
  /* Add reasonable padding for fixed header */
  scroll-padding-top: calc(70px + 20px);
  scroll-padding-top: calc(var(--header-height, 70px) + 20px);
  scroll-behavior: smooth;
}
body {
  font-family: 'Courier New', monospace;
  font-family: var(--font-secondary);
  background-color: #f8f9fa;
  background-color: var(--color-background);
  /* Use --color-background to match theme definitions */
  color: #292e38;
  color: var(--color-text-secondary);
  line-height: 1.45;
  line-height: var(--type-body-16-lh);
  /* image-rendering: pixelated; */
  /* Removed global pixelation */
  margin: 0;
  padding: 0;
  padding-top: 5rem;
  position: relative;
}
main {
  gap: 12rem;
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}
@media (max-width: 600px) {
main.page-home {
      gap: 8rem
  }
    }
/* @media (max-width: 600px) {
  main {
    gap: 2rem;
  }
} */
a {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: color 0.3s ease;
  transition: color var(--transition-fast);
}
a:hover {
    /* color: var(--color-primary); */
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }
p,
.body-text {
  margin: 0;
  padding: 0;
  font-family: 'Courier New', monospace;
  font-family: var(--type-family-body);
  font-size: 1rem;
  font-size: var(--type-body-16-size);
  line-height: 1.45;
  line-height: var(--type-body-16-lh);
}
p.small, .body-text.small {
  font-size: 0.875rem;
  font-size: var(--type-body-14-size);
  }
/* Use the design system's card component */
/* Any custom styles for specific use cases can go here */
.hero-title {
  font-size: max(2.25rem, min(4.5vw, 2.5rem));
  font-size: var(--type-display-32-size);
  line-height: 1.2;
  line-height: var(--type-display-32-lh);
  margin-bottom: 4rem;
  margin-bottom: var(--space-xl);
}
.plugins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 2rem;
  grid-gap: var(--space-lg);
  gap: 2rem;
  gap: var(--space-lg);
}
.plugin-card {
  background-color: #ecedf0;
  background-color: var(--color-surface);
  border-radius: 8px;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  box-shadow: var(--elevation-1);
  padding: 1.5rem;
  padding: var(--space-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.plugin-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  box-shadow: var(--elevation-2);
}
.plugin-card h2 {
  font-size: 0.875rem;
  font-size: var(--type-body-14-size);
  line-height: 1.45;
  line-height: var(--type-body-14-lh);
  margin-top: 1rem;
  margin-top: var(--space-sm);
}
plugin-card p {
  font-size: 0.875rem;
  font-size: var(--type-body-14-size);
  line-height: 1.45;
  line-height: var(--type-body-14-lh);
  color: #292e38;
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
  margin-top: var(--space-xs);
}
/* Utility: Card image placeholder for layout stability */
.card-image-placeholder {
  aspect-ratio: 4/3;
  width: 100%;
  min-height: 120px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  background: #f3f3f3;
}
/* Consistent section appear/fade-in effect for all sections with enhanced color transitions */
.section-appear {
  opacity: 0;
  transform: translateY(32px);
  transition: 
    opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1), transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease-out, color 0.3s ease-out;
  will-change: opacity, transform;
  
  /* Default CSS variables for color transitions */
  --scroll-color-current: var(--color-text-primary);
  --scroll-bg-current: transparent;
  --scroll-text-current: var(--color-text-primary);
}
.section-appear.section-visible {
  opacity: 1;
  transform: none;
}
/* Enhanced color transition targets */
.section-appear .accent-scroll {
  color: var(--scroll-color-current);
  transition: color 0.3s ease-out;
}
.section-appear .bg-scroll {
  background-color: var(--scroll-bg-current);
  transition: background-color 0.3s ease-out;
}
.section-appear.bg-scroll {
  background-color: var(--scroll-bg-current);
  transition: background-color 0.3s ease-out;
}
.section-appear .gradient-scroll {
  background-image: var(--scroll-gradient-current);
  transition: background-image 0.3s ease-out;
}
.section-appear.gradient-scroll {
  background-image: var(--scroll-gradient-current);
  transition: background-image 0.3s ease-out;
}
.section-appear .border-scroll {
  border-color: var(--scroll-color-current);
  transition: border-color 0.3s ease-out;
}
/* Pre-built brand color schemes */
.section-appear.brand-notely {
  --scroll-color-from: var(--color-text-secondary, #6b7280);
  --scroll-color-to: #C5EDDB;
  --scroll-bg-from: transparent;
  --scroll-bg-to: #F96743;
}
.section-appear.brand-bookmarkly {
  --scroll-color-from: var(--color-text-secondary, #6b7280);
  --scroll-color-to: var(--accent-bookmarkly, #f2c94c);
  --scroll-bg-from: transparent;
  --scroll-bg-to: rgba(242, 201, 76, 0.05);
}
.section-appear.brand-extractly {
  --scroll-color-from: var(--color-text-secondary, #6b7280);
  --scroll-color-to: var(--accent-color-extractly, #bb6bd9);
  --scroll-bg-from: transparent;
  --scroll-bg-to: rgba(187, 107, 217, 0.05);
}
.section-appear.brand-contently {
  --scroll-color-from: var(--color-text-secondary, #6b7280);
  --scroll-color-to: var(--accent-contently, #36c9f0);
  --scroll-bg-from: transparent;
  --scroll-bg-to: rgba(54, 201, 240, 0.05);
}
.section-appear.brand-indexly {
  --scroll-color-from: var(--color-text-secondary, #6b7280);
  --scroll-color-to: var(--accent-indexly, #27ae60);
  --scroll-bg-from: transparent;
  --scroll-bg-to: rgba(39, 174, 96, 0.05);
}
.section-appear.accent-primary {
  --scroll-color-from: var(--color-text-secondary, #6b7280);
  --scroll-color-to: var(--color-primary);
}
.section-appear.accent-secondary {
  --scroll-color-from: var(--color-text-secondary, #6b7280);
  --scroll-color-to: var(--color-secondary);
}
/* Newsletter message styles */
.success-message,
.error-message {
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  animation: fadeIn 0.3s ease-out;
}
.success-message {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.error-message {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Apply pixelated rendering selectively */
img[data-pixelated="true"],
.pixelated-image {
  /* Edge/WebKit first, then generic */
  image-rendering: pixelated;
}
.featurelist {
  margin: 1.5rem 0;
  margin: var(--space-md) 0;
  padding: 0;

  margin-bottom: 3rem;
}
.featurelist.horizontal {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0rem 1.5rem;
  }
.featurelist li {
    text-align: left;
    position: relative;
    margin-bottom: 1rem;
    margin-bottom: var(--space-sm);
    padding-left: 1.8rem;
  font-size: 1rem;
  font-size: var(--type-body-16-size);
    color: #292e38;
    color: var(--color-text-secondary);
    line-height: 1.4;
    list-style: none;
    font-family: 'Courier New', monospace;
    font-family: var(--font-secondary);
    font-weight: 600;
  }
.featurelist li::before {
      content: "✔";
      position: absolute;
      left: 0;
      font-family: 'Silkscreen', monospace;
      font-family: var(--font-primary);
      color: #c5cad4;
      color: var(--shade-300);
      font-weight: bold;
  font-size: 0.875rem;
  font-size: var(--type-body-14-size);
      background-image: linear-gradient(135deg, #ff3d3d 0%, #bb6bd9 50%);
      background-image: linear-gradient(135deg, var(--accent-notely) 0%, var(--accent-color-extractly) 50%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      /* For non-webkit browsers (experimental support) */
      color: transparent;
    }
/* Gradient blob animation keyframes */
@keyframes blobFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  25% {
    transform: translate(3vw, -2vh) scale(1.1) rotate(90deg);
  }

  50% {
    transform: translate(-2vw, 3vh) scale(0.9) rotate(180deg);
  }

  75% {
    transform: translate(4vw, 1vh) scale(1.05) rotate(270deg);
  }
}