/**
 * Mutiro Terminal Themes with Web Awesome Integration
 * 
 * Strategy:
 * 1. Define Web Awesome variables ONCE in :root (referencing Mutiro colors)
 * 2. Each theme only overrides the Mutiro colors
 * 3. Web Awesome automatically uses the new colors via CSS cascade
 */

/* ============================================================================
   BASE SETUP - Define Web Awesome variables that reference Mutiro colors
   This only needs to be done ONCE
   ============================================================================ */

:root {
    /* Default Mutiro Colors (Ocean theme) */
    --mutiro-color-primary: #00ccdd;
    --mutiro-color-primary-light: #00ddee;
    --mutiro-color-primary-dark: #00a0bb;
    --mutiro-color-secondary: #8877ff;
    --mutiro-color-accent: #00eeaa;
    --mutiro-color-background: #000011;
    --mutiro-color-surface: rgba(0, 17, 34, 0.3);
    --mutiro-color-surface-elevated: rgba(0, 17, 51, 0.4);
    --mutiro-color-text-primary: #00ccdd;
    --mutiro-color-text-secondary: #00a0bb;
    --mutiro-color-text-muted: #005e77;
    --mutiro-color-text-on-primary: #ffffff;  /* White text for use on primary colored backgrounds */
    --mutiro-color-border: #005e77;
    --mutiro-color-success: #00eeaa;
    --mutiro-color-warning: #ffaa00;
    --mutiro-color-error: #ff4444;
    
    /* Typography - Single source of truth for fonts */
    --mutiro-font-body: ui-sans-serif, system-ui, sans-serif;
    --mutiro-font-heading: var(--mutiro-font-body);
    --mutiro-font-code: ui-monospace, monospace;
    --mutiro-font-longform: var(--mutiro-font-body);
    --mutiro-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --mutiro-font-display: 'Saira+Condensed', var(--mutiro-font-mono);
    
    /* Mutiro Font Sizes */
    --mutiro-font-size-2xs: 11px;
    --mutiro-font-size-xs: 12px;
    --mutiro-font-size-s: 14px;
    --mutiro-font-size-m: 16px;  /* Base size */
    --mutiro-font-size-l: 20px;
    --mutiro-font-size-xl: 25px;
    --mutiro-font-size-2xl: 32px;
    --mutiro-font-size-3xl: 41px;
    --mutiro-font-size-4xl: 52px;
    --mutiro-font-size-hero: 64px;  /* For hero titles */
    
    /* Mutiro Font Weights */
    --mutiro-font-weight-light: 300;
    --mutiro-font-weight-normal: 400;
    --mutiro-font-weight-medium: 500;
    --mutiro-font-weight-semibold: 600;
    --mutiro-font-weight-bold: 700;
    
    /* Mutiro Line Heights */
    --mutiro-line-height-tight: 1.2;
    --mutiro-line-height-normal: 1.6;
    --mutiro-line-height-relaxed: 1.8;
    --mutiro-line-height-loose: 2;
    
    /* Mutiro Link Styles */
    --mutiro-link-color: var(--mutiro-color-primary-light);
    --mutiro-link-decoration: underline dotted;
    --mutiro-link-decoration-hover: underline solid;
    
    /* Mutiro Border Styles */
    --mutiro-border-style: solid;
    
    /* Mutiro Border Widths */
    --mutiro-border-width-s: 1px;  /* 0.0625rem */
    --mutiro-border-width-m: 2px;  /* 0.125rem */
    --mutiro-border-width-l: 3px;  /* 0.1875rem */
    --mutiro-border-width-xl: 4px; /* Extra for emphasis */
    
    /* Mutiro Border Radius */
    --mutiro-border-radius-none: 0;
    --mutiro-border-radius-s: 3px;   /* 0.1875rem - subtle rounding */
    --mutiro-border-radius-m: 6px;   /* 0.375rem - medium rounding */
    --mutiro-border-radius-l: 12px;  /* 0.75rem - large rounding */
    --mutiro-border-radius-xl: 24px; /* Extra large for cards */
    --mutiro-border-radius-pill: 9999px;
    --mutiro-border-radius-circle: 50%;
    
    /* Mutiro Spacing System */
    --mutiro-space-3xs: 2px;   /* 0.125rem - micro spacing */
    --mutiro-space-2xs: 4px;   /* 0.25rem - tiny spacing */
    --mutiro-space-xs: 8px;    /* 0.5rem - extra small */
    --mutiro-space-s: 12px;    /* 0.75rem - small */
    --mutiro-space-m: 16px;    /* 1rem - medium (base) */
    --mutiro-space-l: 24px;    /* 1.5rem - large */
    --mutiro-space-xl: 32px;   /* 2rem - extra large */
    --mutiro-space-2xl: 40px;  /* 2.5rem - 2x large */
    --mutiro-space-3xl: 48px;  /* 3rem - 3x large */
    --mutiro-space-4xl: 64px;  /* 4rem - 4x large */
    --mutiro-space-5xl: 80px;  /* 5rem - 5x large */
    --mutiro-space-6xl: 96px;  /* 6rem - 6x large */
    
    /* Terminal effects */
    --mutiro-glow-color: var(--mutiro-color-primary-light);
    --mutiro-glow-intensity: 0 0 10px;
    --mutiro-transition-speed: 0.6s;
    
    /* ========================================
       WEB AWESOME VARIABLES
       These reference Mutiro colors, so when themes change Mutiro colors,
       Web Awesome components automatically update!
       ======================================== */
}

/* Apply Web Awesome variables to all elements including themed contexts */
:root,
[data-theme] {
    /* WebAwesome Typography - Using our Mutiro font variables */
    --wa-font-family-body: var(--mutiro-font-body);
    --wa-font-family-heading: var(--mutiro-font-heading);
    --wa-font-family-code: var(--mutiro-font-code);
    --wa-font-family-longform: var(--mutiro-font-longform);
    
    /* WebAwesome Font Sizes - Bound to Mutiro sizes */
    --wa-font-size-scale: 1;
    --wa-font-size-2xs: var(--mutiro-font-size-2xs);
    --wa-font-size-xs: var(--mutiro-font-size-xs);
    --wa-font-size-s: var(--mutiro-font-size-s);
    --wa-font-size-m: var(--mutiro-font-size-m);
    --wa-font-size-l: var(--mutiro-font-size-l);
    --wa-font-size-xl: var(--mutiro-font-size-xl);
    --wa-font-size-2xl: var(--mutiro-font-size-2xl);
    --wa-font-size-3xl: var(--mutiro-font-size-3xl);
    --wa-font-size-4xl: var(--mutiro-font-size-4xl);
    
    /* WebAwesome Relative font sizes */
    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
    
    /* WebAwesome Font Weights - Bound to Mutiro weights */
    --wa-font-weight-light: var(--mutiro-font-weight-light);
    --wa-font-weight-normal: var(--mutiro-font-weight-normal);
    --wa-font-weight-semibold: var(--mutiro-font-weight-medium);
    --wa-font-weight-bold: var(--mutiro-font-weight-semibold);
    
    /* WebAwesome Role-based weights */
    --wa-font-weight-body: var(--mutiro-font-weight-normal);
    --wa-font-weight-heading: var(--mutiro-font-weight-semibold);
    --wa-font-weight-action: var(--mutiro-font-weight-medium);
    
    /* WebAwesome Line Heights - Bound to Mutiro */
    --wa-line-height-condensed: var(--mutiro-line-height-tight);
    --wa-line-height-normal: var(--mutiro-line-height-normal);
    --wa-line-height-expanded: var(--mutiro-line-height-loose);
    
    /* WebAwesome Link Styles - Bound to Mutiro */
    --wa-color-text-link: var(--mutiro-link-color);
    --wa-link-decoration-default: var(--mutiro-link-decoration);
    --wa-link-decoration-hover: var(--mutiro-link-decoration-hover);
    
    /* Brand/Primary colors - Web Awesome uses these for primary buttons, etc */
    --wa-color-brand-50: var(--mutiro-color-primary);
    --wa-color-brand-60: var(--mutiro-color-primary-light);
    --wa-color-brand-40: var(--mutiro-color-primary-dark);
    --wa-color-brand: var(--mutiro-color-primary);
    
    /* Success colors */
    --wa-color-success-50: var(--mutiro-color-success);
    --wa-color-success-60: color-mix(in srgb, var(--mutiro-color-success) 80%, white);
    --wa-color-success-40: color-mix(in srgb, var(--mutiro-color-success) 80%, black);
    --wa-color-success: var(--mutiro-color-success);
    
    /* Warning colors */
    --wa-color-warning-50: var(--mutiro-color-warning);
    --wa-color-warning-60: color-mix(in srgb, var(--mutiro-color-warning) 80%, white);
    --wa-color-warning-40: color-mix(in srgb, var(--mutiro-color-warning) 80%, black);
    --wa-color-warning: var(--mutiro-color-warning);
    
    /* Danger colors */
    --wa-color-danger-50: var(--mutiro-color-error);
    --wa-color-danger-60: color-mix(in srgb, var(--mutiro-color-error) 80%, white);
    --wa-color-danger-40: color-mix(in srgb, var(--mutiro-color-error) 80%, black);
    --wa-color-danger: var(--mutiro-color-error);
    
    /* Surface colors */
    --wa-color-surface-raised: var(--mutiro-color-background);
    --wa-color-surface-default: var(--mutiro-color-surface);
    --wa-color-surface-lowered: var(--mutiro-color-surface-elevated);
    --wa-color-surface-border: var(--mutiro-color-border);
    
    /* Text colors */
    --wa-color-text-normal: var(--mutiro-color-text-primary);
    --wa-color-text-quiet: var(--mutiro-color-text-muted);
    --wa-color-text-loud: var(--mutiro-color-text-primary);
    --wa-color-text: var(--mutiro-color-text-primary);
    --wa-color-text-link: var(--mutiro-color-primary-light);
    
    /* Semantic colors for component states */
    --wa-color-brand-fill-loud: var(--mutiro-color-primary);
    --wa-color-brand-fill-normal: color-mix(in srgb, var(--mutiro-color-primary) 20%, var(--mutiro-color-background));
    --wa-color-brand-fill-quiet: color-mix(in srgb, var(--mutiro-color-primary) 10%, var(--mutiro-color-background));
    --wa-color-brand-border-loud: var(--mutiro-color-primary-light);
    --wa-color-brand-border-normal: var(--mutiro-color-primary);
    --wa-color-brand-border-quiet: var(--mutiro-color-primary-dark);
    --wa-color-brand-on-loud: var(--mutiro-color-background);
    --wa-color-brand-on-normal: var(--mutiro-color-primary-light);
    --wa-color-brand-on-quiet: var(--mutiro-color-primary);
    
    /* Generate full color scales using color-mix */
    --wa-color-brand-95: color-mix(in srgb, var(--mutiro-color-primary) 5%, white);
    --wa-color-brand-90: color-mix(in srgb, var(--mutiro-color-primary) 10%, white);
    --wa-color-brand-80: color-mix(in srgb, var(--mutiro-color-primary) 20%, white);
    --wa-color-brand-70: color-mix(in srgb, var(--mutiro-color-primary) 30%, white);
    --wa-color-brand-30: color-mix(in srgb, var(--mutiro-color-primary) 70%, black);
    --wa-color-brand-20: color-mix(in srgb, var(--mutiro-color-primary) 55%, black);
    --wa-color-brand-10: color-mix(in srgb, var(--mutiro-color-primary) 40%, black);
    --wa-color-brand-05: color-mix(in srgb, var(--mutiro-color-primary) 25%, black);
    
    /* Neutral scale - Web Awesome uses these for text colors */
    --wa-color-neutral-0: var(--mutiro-color-background);
    --wa-color-neutral-50: var(--mutiro-color-surface);
    --wa-color-neutral-100: var(--mutiro-color-surface-elevated);
    --wa-color-neutral-150: color-mix(in srgb, var(--mutiro-color-border) 75%, var(--mutiro-color-surface-elevated));
    --wa-color-neutral-200: var(--mutiro-color-border);
    --wa-color-neutral-300: var(--mutiro-color-text-muted);
    --wa-color-neutral-400: color-mix(in srgb, var(--mutiro-color-text-muted) 75%, var(--mutiro-color-text-secondary));
    --wa-color-neutral-500: var(--mutiro-color-text-secondary);
    --wa-color-neutral-600: color-mix(in srgb, var(--mutiro-color-text-secondary) 75%, var(--mutiro-color-text-primary));
    --wa-color-neutral-700: var(--mutiro-color-text-primary);
    --wa-color-neutral-800: var(--mutiro-color-text-primary);
    --wa-color-neutral-900: var(--mutiro-color-text-primary);
    --wa-color-neutral-950: var(--mutiro-color-text-primary);
    --wa-color-neutral-1000: var(--mutiro-color-text-primary);
    
    /* Panel/dropdown specific colors */
    --wa-panel-background-color: var(--mutiro-color-surface);
    --wa-panel-border-color: var(--mutiro-color-border);
    
    /* Color fills that Web Awesome uses for text on surfaces */
    --wa-color-neutral-fill-loud: var(--mutiro-color-text-primary);
    --wa-color-neutral-on-loud: var(--mutiro-color-background);
    --wa-color-neutral-on-normal: var(--mutiro-color-text-primary);
    
    /* Focus ring with theme-aware color */
    --wa-focus-ring-color: var(--mutiro-color-primary);
    --wa-focus-ring: 0 0 0 2px color-mix(in srgb, var(--mutiro-color-primary) 30%, transparent);
    
    /* Typography and spacing (same for all themes) */
    --wa-font-sans: var(--mutiro-font-body);
    --wa-font-mono: var(--mutiro-font-code);
    
    /* WebAwesome Border Styles - Bound to Mutiro */
    --wa-border-style: var(--mutiro-border-style);
    
    /* WebAwesome Border Widths - Bound to Mutiro */
    --wa-border-width-s: var(--mutiro-border-width-s);
    --wa-border-width-m: var(--mutiro-border-width-m);
    --wa-border-width-l: var(--mutiro-border-width-l);
    --wa-border-width-scale: 1; /* Multiplier for all borders */
    
    /* WebAwesome Border Radius - Bound to Mutiro */
    --wa-border-radius-s: var(--mutiro-border-radius-s);
    --wa-border-radius-m: var(--mutiro-border-radius-m);
    --wa-border-radius-l: var(--mutiro-border-radius-l);
    --wa-border-radius-pill: var(--mutiro-border-radius-pill);
    --wa-border-radius-circle: var(--mutiro-border-radius-circle);
    --wa-border-radius-square: var(--mutiro-border-radius-none);
    --wa-border-radius-scale: 1; /* Multiplier for all radii */
    
    /* Legacy names for compatibility */
    --wa-border-radius-small: var(--mutiro-border-radius-s);
    --wa-border-radius-medium: var(--mutiro-border-radius-m);
    --wa-border-radius-large: var(--mutiro-border-radius-l);
    
    /* WebAwesome Spacing - Bound to Mutiro */
    --wa-space-scale: 1; /* Multiplier for all spacing */
    --wa-space-3xs: calc(var(--wa-space-scale) * var(--mutiro-space-3xs));
    --wa-space-2xs: calc(var(--wa-space-scale) * var(--mutiro-space-2xs));
    --wa-space-xs: calc(var(--wa-space-scale) * var(--mutiro-space-xs));
    --wa-space-s: calc(var(--wa-space-scale) * var(--mutiro-space-s));
    --wa-space-m: calc(var(--wa-space-scale) * var(--mutiro-space-m));
    --wa-space-l: calc(var(--wa-space-scale) * var(--mutiro-space-l));
    --wa-space-xl: calc(var(--wa-space-scale) * var(--mutiro-space-xl));
    --wa-space-2xl: calc(var(--wa-space-scale) * var(--mutiro-space-2xl));
    --wa-space-3xl: calc(var(--wa-space-scale) * var(--mutiro-space-3xl));
    --wa-space-4xl: calc(var(--wa-space-scale) * var(--mutiro-space-4xl));
    
    /* Transitions */
    --wa-transition-fast: 150ms;
    --wa-transition-medium: 250ms;
    --wa-transition-slow: 500ms;
}

/* Web Awesome component parts that need explicit color fixing */
wa-select::part(display-input) {
    color: var(--mutiro-color-text-primary);
}

/* ============================================================================
   TERMINAL THEMES
   Each theme only needs to override the Mutiro colors
   Web Awesome automatically picks up the changes!
   ============================================================================ */

/* Ocean Theme (Default - already defined in :root) */
[data-theme="ocean"] {
    /* Uses default colors from :root */
}

/* Matrix Theme - Green terminal */
[data-theme="matrix"] {
    --mutiro-color-primary: #00ff00;
    --mutiro-color-primary-light: #44ff44;
    --mutiro-color-primary-dark: #00aa00;
    --mutiro-color-secondary: #00cc00;
    --mutiro-color-accent: #00ff00;
    --mutiro-color-background: #000000;
    --mutiro-color-surface: rgba(0, 17, 0, 0.3);
    --mutiro-color-surface-elevated: rgba(0, 34, 0, 0.4);
    --mutiro-color-text-primary: #00ff00;
    --mutiro-color-text-secondary: #00cc00;
    --mutiro-color-text-muted: #008800;
    --mutiro-color-border: #004400;
    --mutiro-color-success: #00ff00;
    --mutiro-color-warning: #88ff00;
    --mutiro-color-error: #ffff00;
    --mutiro-glow-color: #00ff00;
}

/* Cyberpunk Theme - Pink and cyan */
[data-theme="cyberpunk"] {
    --mutiro-color-primary: #ff00ff;
    --mutiro-color-primary-light: #ff44ff;
    --mutiro-color-primary-dark: #cc00cc;
    --mutiro-color-secondary: #00ffff;
    --mutiro-color-accent: #ffff00;
    --mutiro-color-background: #0a0014;
    --mutiro-color-surface: rgba(17, 0, 34, 0.5);
    --mutiro-color-surface-elevated: rgba(34, 0, 51, 0.6);
    --mutiro-color-text-primary: #ff00ff;
    --mutiro-color-text-secondary: #00ffff;
    --mutiro-color-text-muted: #8800cc;
    --mutiro-color-border: #440066;
    --mutiro-color-success: #00ff88;
    --mutiro-color-warning: #ffff00;
    --mutiro-color-error: #ff0088;
    --mutiro-glow-color: #ff00ff;
}

/* Space Theme - Deep purple */
[data-theme="space"] {
    --mutiro-color-primary: #9966ff;
    --mutiro-color-primary-light: #aa77ff;
    --mutiro-color-primary-dark: #7755cc;
    --mutiro-color-secondary: #ff6699;
    --mutiro-color-accent: #66ffaa;
    --mutiro-color-background: #000000;
    --mutiro-color-surface: rgba(17, 0, 34, 0.3);
    --mutiro-color-surface-elevated: rgba(34, 0, 51, 0.4);
    --mutiro-color-text-primary: #9966ff;
    --mutiro-color-text-secondary: #7755cc;
    --mutiro-color-text-muted: #553399;
    --mutiro-color-border: #330066;
    --mutiro-color-success: #66ffaa;
    --mutiro-color-warning: #ffaa66;
    --mutiro-color-error: #ff6666;
    --mutiro-glow-color: #aa77ff;
}

/* Neon Blue Theme */
[data-theme="neon-blue"] {
    --mutiro-color-primary: #00aaff;
    --mutiro-color-primary-light: #44ccff;
    --mutiro-color-primary-dark: #0088cc;
    --mutiro-color-secondary: #00ffaa;
    --mutiro-color-accent: #44ffff;
    --mutiro-color-background: #000011;
    --mutiro-color-surface: rgba(0, 17, 34, 0.4);
    --mutiro-color-surface-elevated: rgba(0, 34, 68, 0.5);
    --mutiro-color-text-primary: #00aaff;
    --mutiro-color-text-secondary: #0088cc;
    --mutiro-color-text-muted: #005588;
    --mutiro-color-border: #003366;
    --mutiro-color-success: #00ffaa;
    --mutiro-color-warning: #ffaa00;
    --mutiro-color-error: #ff4444;
    --mutiro-glow-color: #44ccff;
}

/* Retro Amber Theme */
[data-theme="retro-amber"] {
    --mutiro-color-primary: #ffaa00;
    --mutiro-color-primary-light: #ffbb33;
    --mutiro-color-primary-dark: #cc8800;
    --mutiro-color-secondary: #ff8800;
    --mutiro-color-accent: #ffcc00;
    --mutiro-color-background: #1a0f00;
    --mutiro-color-surface: rgba(51, 34, 0, 0.3);
    --mutiro-color-surface-elevated: rgba(68, 51, 0, 0.4);
    --mutiro-color-text-primary: #ffaa00;
    --mutiro-color-text-secondary: #cc8800;
    --mutiro-color-text-muted: #886600;
    --mutiro-color-border: #553300;
    --mutiro-color-success: #88ff00;
    --mutiro-color-warning: #ffcc00;
    --mutiro-color-error: #ff4400;
    --mutiro-glow-color: #ffbb33;
}

/* Terminal Light Theme - Pure monochrome (black on white) */
[data-theme="terminal-light"] {
    --mutiro-color-primary: #000000;  /* Pure black */
    --mutiro-color-primary-light: #333333;
    --mutiro-color-primary-dark: #000000;
    --mutiro-color-secondary: #222222;  /* Very dark gray */
    --mutiro-color-accent: #000000;  /* Black */
    --mutiro-color-background: #ffffff;  /* Pure white background */
    --mutiro-color-surface: rgba(240, 240, 240, 0.9);  /* Light gray surface */
    --mutiro-color-surface-elevated: rgba(230, 230, 230, 0.95);
    --mutiro-color-text-primary: #000000;  /* Black text */
    --mutiro-color-text-secondary: #333333;  /* Dark gray text */
    --mutiro-color-text-muted: #666666;  /* Medium gray text */
    --mutiro-color-border: #cccccc;  /* Light gray borders */
    --mutiro-color-success: #000000;  /* Black (no color) */
    --mutiro-color-warning: #333333;  /* Dark gray (no color) */
    --mutiro-color-error: #000000;  /* Black (no color) */
    --mutiro-glow-color: rgba(0, 0, 0, 0.2);  /* Subtle black shadow */
    
    /* Light mode needs these adjustments */
    color-scheme: light;
    --wa-color-brand-on-loud: white;
    --wa-color-success-on-loud: white;
    --wa-color-danger-on-loud: white;
}

/* Aurora Theme - Modern, vibrant, and user-friendly */
[data-theme="aurora"] {
    /* Beautiful gradient-friendly colors inspired by northern lights */
    --mutiro-color-primary: #667eea;  /* Vibrant purple-blue */
    --mutiro-color-primary-light: #7c8ff3;
    --mutiro-color-primary-dark: #5a67d8;
    --mutiro-color-secondary: #48bb78;  /* Fresh green */
    --mutiro-color-accent: #ed64a6;  /* Playful pink */
    --mutiro-color-background: #1a202c;  /* Deep blue-gray */
    --mutiro-color-surface: rgba(45, 55, 72, 0.6);  /* Translucent surfaces */
    --mutiro-color-surface-elevated: rgba(74, 85, 104, 0.8);
    --mutiro-color-text-primary: #f7fafc;  /* Crisp white */
    --mutiro-color-text-secondary: #cbd5e0;  /* Soft gray */
    --mutiro-color-text-muted: #718096;  /* Muted blue-gray */
    --mutiro-color-border: rgba(203, 213, 224, 0.2);  /* Subtle borders */
    --mutiro-color-success: #48bb78;
    --mutiro-color-warning: #f6ad55;  /* Warm orange */
    --mutiro-color-error: #fc8181;  /* Soft red */
    --mutiro-glow-color: #667eea;
    
    /* Custom spacing for modern feel */
    --mutiro-space-3xs: 4px;
    --mutiro-space-2xs: 6px;
    --mutiro-space-xs: 10px;
    --mutiro-space-s: 14px;
    --mutiro-space-m: 18px;
    --mutiro-space-l: 28px;
    --mutiro-space-xl: 36px;
    --mutiro-space-2xl: 48px;
    --mutiro-space-3xl: 56px;
    --mutiro-space-4xl: 72px;
    
    /* Smoother borders */
    --mutiro-border-radius-s: 6px;
    --mutiro-border-radius-m: 12px;
    --mutiro-border-radius-l: 20px;
    --mutiro-border-radius-xl: 32px;
    
    /* Softer glow effect */
    --mutiro-glow-intensity: 0 0 20px;
    
    /* Modern typography */
    --mutiro-line-height-normal: 1.7;
    --mutiro-line-height-relaxed: 1.9;
}

/* High Contrast Theme */
[data-theme="high-contrast"] {
    --mutiro-color-primary: #ffffff;
    --mutiro-color-primary-light: #ffffff;
    --mutiro-color-primary-dark: #cccccc;
    --mutiro-color-secondary: #ffff00;
    --mutiro-color-accent: #00ff00;
    --mutiro-color-background: #000000;
    --mutiro-color-surface: rgba(17, 17, 17, 0.5);
    --mutiro-color-surface-elevated: rgba(34, 34, 34, 0.6);
    --mutiro-color-text-primary: #ffffff;
    --mutiro-color-text-secondary: #cccccc;
    --mutiro-color-text-muted: #888888;
    --mutiro-color-border: #444444;
    --mutiro-color-success: #00ff00;
    --mutiro-color-warning: #ffff00;
    --mutiro-color-error: #ff0000;
    --mutiro-glow-color: #ffffff;
}

/* Sunset Theme - Warm, inviting, and modern */
[data-theme="sunset"] {
    /* Warm sunset gradient colors */
    --mutiro-color-primary: #f56565;  /* Coral red */
    --mutiro-color-primary-light: #fc8181;
    --mutiro-color-primary-dark: #e53e3e;
    --mutiro-color-secondary: #ed8936;  /* Sunset orange */
    --mutiro-color-accent: #9f7aea;  /* Twilight purple */
    --mutiro-color-background: #2d3748;  /* Evening sky dark */
    --mutiro-color-surface: rgba(52, 61, 81, 0.7);
    --mutiro-color-surface-elevated: rgba(74, 85, 104, 0.85);
    --mutiro-color-text-primary: #fef5e7;  /* Warm cream */
    --mutiro-color-text-secondary: #fbd38d;  /* Golden */
    --mutiro-color-text-muted: #a78bfa;  /* Soft purple */
    --mutiro-color-border: rgba(251, 211, 141, 0.3);  /* Golden border */
    --mutiro-color-success: #68d391;  /* Mint green */
    --mutiro-color-warning: #f6e05e;  /* Bright yellow */
    --mutiro-color-error: #fc8181;  /* Soft coral */
    --mutiro-glow-color: #fc8181;
    
    /* Comfortable spacing */
    --mutiro-space-3xs: 3px;
    --mutiro-space-2xs: 5px;
    --mutiro-space-xs: 9px;
    --mutiro-space-s: 13px;
    --mutiro-space-m: 17px;
    --mutiro-space-l: 26px;
    --mutiro-space-xl: 34px;
    --mutiro-space-2xl: 44px;
    --mutiro-space-3xl: 52px;
    --mutiro-space-4xl: 68px;
    
    /* Soft, rounded borders */
    --mutiro-border-radius-s: 8px;
    --mutiro-border-radius-m: 16px;
    --mutiro-border-radius-l: 24px;
    --mutiro-border-radius-xl: 40px;
    
    /* Warm glow */
    --mutiro-glow-intensity: 0 0 30px;
    
    /* Clean, modern fonts */
    --mutiro-font-weight-normal: 400;
    --mutiro-font-weight-medium: 500;
    --mutiro-font-weight-semibold: 600;
    --mutiro-line-height-normal: 1.75;
}

/* Lagoon Theme (Light ocean) */
[data-theme="lagoon"] {
    --mutiro-color-primary: #007088;
    --mutiro-color-primary-light: #0090aa;
    --mutiro-color-primary-dark: #004e66;
    --mutiro-color-secondary: #6666dd;
    --mutiro-color-accent: #00aa88;
    --mutiro-color-background: #e8f4f8;
    --mutiro-color-surface: rgba(245, 250, 252, 0.85);
    --mutiro-color-surface-elevated: rgba(248, 252, 254, 0.95);
    --mutiro-color-text-primary: #002244;
    --mutiro-color-text-secondary: #003e55;
    --mutiro-color-text-muted: #556677;
    --mutiro-color-border: #a0c0d0;
    --mutiro-color-success: #00aa88;
    --mutiro-color-warning: #dd7722;
    --mutiro-color-error: #aa2244;
    --mutiro-glow-color: rgba(0, 136, 187, 0.3);
    
    /* Light mode adjustments */
    color-scheme: light;
    --wa-color-brand-on-loud: white;
    --wa-color-success-on-loud: white;
    --wa-color-danger-on-loud: white;
}

/* Deep Purple Theme */
[data-theme="deep-purple"] {
    --mutiro-color-primary: #6633cc;
    --mutiro-color-primary-light: #8855ee;
    --mutiro-color-primary-dark: #4422aa;
    --mutiro-color-secondary: #cc33cc;
    --mutiro-color-accent: #aa33ff;
    --mutiro-color-background: #0a0014;
    --mutiro-color-surface: rgba(17, 0, 34, 0.4);
    --mutiro-color-surface-elevated: rgba(34, 0, 68, 0.5);
    --mutiro-color-text-primary: #8855ee;
    --mutiro-color-text-secondary: #6633cc;
    --mutiro-color-text-muted: #4422aa;
    --mutiro-color-border: #221166;
    --mutiro-color-success: #66ff99;
    --mutiro-color-warning: #ffaa33;
    --mutiro-color-error: #ff3366;
    --mutiro-glow-color: #8855ee;
}

/* Midnight Teal Theme */
[data-theme="midnight-teal"] {
    --mutiro-color-primary: #008888;
    --mutiro-color-primary-light: #00aaaa;
    --mutiro-color-primary-dark: #006666;
    --mutiro-color-secondary: #00aa88;
    --mutiro-color-accent: #00ccaa;
    --mutiro-color-background: #000a0a;
    --mutiro-color-surface: rgba(0, 17, 17, 0.3);
    --mutiro-color-surface-elevated: rgba(0, 34, 34, 0.4);
    --mutiro-color-text-primary: #00aaaa;
    --mutiro-color-text-secondary: #008888;
    --mutiro-color-text-muted: #005555;
    --mutiro-color-border: #003333;
    --mutiro-color-success: #00cc88;
    --mutiro-color-warning: #ccaa00;
    --mutiro-color-error: #cc4444;
    --mutiro-glow-color: #00aaaa;
}

/* Neon Pink Theme */
[data-theme="neon-pink"] {
    --mutiro-color-primary: #ff0088;
    --mutiro-color-primary-light: #ff44aa;
    --mutiro-color-primary-dark: #cc0066;
    --mutiro-color-secondary: #ff00ff;
    --mutiro-color-accent: #ff44ff;
    --mutiro-color-background: #140014;
    --mutiro-color-surface: rgba(34, 0, 34, 0.3);
    --mutiro-color-surface-elevated: rgba(51, 0, 51, 0.4);
    --mutiro-color-text-primary: #ff0088;
    --mutiro-color-text-secondary: #cc0066;
    --mutiro-color-text-muted: #880044;
    --mutiro-color-border: #440022;
    --mutiro-color-success: #00ff88;
    --mutiro-color-warning: #ffff00;
    --mutiro-color-error: #ff0044;
    --mutiro-glow-color: #ff44aa;
}

/* Neon Orange Theme */
[data-theme="neon-orange"] {
    --mutiro-color-primary: #ff6600;
    --mutiro-color-primary-light: #ff8833;
    --mutiro-color-primary-dark: #cc5500;
    --mutiro-color-secondary: #ffaa00;
    --mutiro-color-accent: #ffcc00;
    --mutiro-color-background: #140a00;
    --mutiro-color-surface: rgba(34, 17, 0, 0.3);
    --mutiro-color-surface-elevated: rgba(51, 34, 0, 0.4);
    --mutiro-color-text-primary: #ff6600;
    --mutiro-color-text-secondary: #cc5500;
    --mutiro-color-text-muted: #884400;
    --mutiro-color-border: #442200;
    --mutiro-color-success: #88ff00;
    --mutiro-color-warning: #ffcc00;
    --mutiro-color-error: #ff0044;
    --mutiro-glow-color: #ff8833;
}

/* Retro Phosphor Theme */
[data-theme="retro-phosphor"] {
    --mutiro-color-primary: #33ff33;
    --mutiro-color-primary-light: #66ff66;
    --mutiro-color-primary-dark: #00cc00;
    --mutiro-color-secondary: #33ff99;
    --mutiro-color-accent: #66ffcc;
    --mutiro-color-background: #001100;
    --mutiro-color-surface: rgba(0, 34, 0, 0.3);
    --mutiro-color-surface-elevated: rgba(0, 51, 0, 0.4);
    --mutiro-color-text-primary: #33ff33;
    --mutiro-color-text-secondary: #00cc00;
    --mutiro-color-text-muted: #008800;
    --mutiro-color-border: #004400;
    --mutiro-color-success: #66ff66;
    --mutiro-color-warning: #ccff33;
    --mutiro-color-error: #ffcc33;
    --mutiro-glow-color: #66ff66;
}

/* Terminal Light Compact Theme - Clean monochrome with reduced spacing */
[data-theme="terminal-light-compact"] {
    /* Colors - same as terminal-light */
    --mutiro-color-primary: #000000;
    --mutiro-color-primary-light: #333333;
    --mutiro-color-primary-dark: #000000;
    --mutiro-color-secondary: #666666;
    --mutiro-color-accent: #333333;
    --mutiro-color-background: #ffffff;
    --mutiro-color-surface: rgba(240, 240, 240, 0.95);
    --mutiro-color-surface-elevated: rgba(230, 230, 230, 0.98);
    --mutiro-color-text-primary: #000000;
    --mutiro-color-text-secondary: #333333;
    --mutiro-color-text-muted: #666666;
    --mutiro-color-border: #cccccc;
    --mutiro-color-success: #000000;
    --mutiro-color-warning: #333333;
    --mutiro-color-error: #000000;
    --mutiro-glow-color: transparent;
    
    /* COMPACT SPACING - Reduced by ~40% */
    --mutiro-space-3xs: 1px;   /* 0.0625rem - 3x small */
    --mutiro-space-2xs: 2px;   /* 0.125rem - 2x small */
    --mutiro-space-xs: 3px;    /* 0.1875rem - extra small */
    --mutiro-space-s: 5px;     /* 0.3125rem - small */
    --mutiro-space-m: 8px;     /* 0.5rem - medium */
    --mutiro-space-l: 12px;    /* 0.75rem - large */
    --mutiro-space-xl: 16px;   /* 1rem - extra large */
    --mutiro-space-2xl: 20px;  /* 1.25rem - 2x large */
    --mutiro-space-3xl: 24px;  /* 1.5rem - 3x large */
    --mutiro-space-4xl: 32px;  /* 2rem - 4x large */
    --mutiro-space-5xl: 40px;  /* 2.5rem - 5x large */
    --mutiro-space-6xl: 48px;  /* 3rem - 6x large */
    
    /* COMPACT FONT SIZES - Reduced by ~15% */
    --mutiro-font-size-2xs: 0.55rem;  /* 8.8px */
    --mutiro-font-size-xs: 0.65rem;   /* 10.4px */
    --mutiro-font-size-s: 0.75rem;    /* 12px */
    --mutiro-font-size-m: 0.85rem;    /* 13.6px */
    --mutiro-font-size-l: 1rem;       /* 16px */
    --mutiro-font-size-xl: 1.2rem;    /* 19.2px */
    --mutiro-font-size-2xl: 1.5rem;   /* 24px */
    --mutiro-font-size-3xl: 1.875rem; /* 30px */
    --mutiro-font-size-4xl: 2.25rem;  /* 36px */
    --mutiro-font-size-hero: 3rem;    /* 48px */
    
    /* COMPACT BORDER RADIUS - Slightly reduced */
    --mutiro-border-radius-none: 0;
    --mutiro-border-radius-s: 2px;
    --mutiro-border-radius-m: 4px;
    --mutiro-border-radius-l: 6px;
    --mutiro-border-radius-xl: 8px;
    --mutiro-border-radius-pill: 100px;
    --mutiro-border-radius-circle: 50%;
    
    /* Tighter line height for compact feel */
    --mutiro-line-height-tight: 1.1;
    --mutiro-line-height-normal: 1.3;
    --mutiro-line-height-relaxed: 1.4;
    --mutiro-line-height-loose: 1.5;
}

/* Classic Terminal Theme - Pure monochrome (white on black) */
[data-theme="terminal"] {
    --mutiro-color-primary: #f0f0f0;  /* Off-white */
    --mutiro-color-primary-light: #ffffff;
    --mutiro-color-primary-dark: #d0d0d0;
    --mutiro-color-secondary: #e0e0e0;  /* Light gray */
    --mutiro-color-accent: #f5f5f5;  /* Near white */
    --mutiro-color-background: #1a1a1d;  /* Dark charcoal instead of pure black */
    --mutiro-color-surface: #242428;  /* Slightly lighter surface */
    --mutiro-color-surface-elevated: #2e2e33;  /* Elevated surface */
    --mutiro-color-text-primary: #f0f0f0;  /* Off-white text */
    --mutiro-color-text-secondary: #b8b8b8;  /* Light gray text */
    --mutiro-color-text-muted: #808080;  /* Muted gray text */
    --mutiro-color-border: #3a3a3f;  /* Gray borders */
    --mutiro-color-success: #e8e8e8;  /* Light gray */
    --mutiro-color-warning: #d0d0d0;  /* Light gray */
    --mutiro-color-error: #f0f0f0;  /* Off-white */
    --mutiro-glow-color: #f0f0f0;  /* Off-white glow */
}

/* ============================================================================
   SCROLLBAR STYLES
   ============================================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--mutiro-color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mutiro-color-text-muted);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--mutiro-color-border) transparent;
}
code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.left-1\/2{left:50%}.left-\[10\%\]{left:10%}.left-\[15\%\]{left:15%}.left-\[5\%\]{left:5%}.top-1\/2{top:50%}.top-\[15\%\]{top:15%}.top-\[20\%\]{top:20%}.top-\[25\%\]{top:25%}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.my-12{margin-bottom:3rem;margin-top:3rem}.my-16{margin-bottom:4rem;margin-top:4rem}.my-20{margin-bottom:5rem;margin-top:5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.my-8{margin-bottom:2rem;margin-top:2rem}.my-mutiro-2xl{margin-bottom:var(--mutiro-space-2xl);margin-top:var(--mutiro-space-2xl)}.my-mutiro-s{margin-bottom:var(--mutiro-space-s);margin-top:var(--mutiro-space-s)}.my-mutiro-xl{margin-bottom:var(--mutiro-space-xl);margin-top:var(--mutiro-space-xl)}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-mutiro-2xl{margin-bottom:var(--mutiro-space-2xl)}.mb-mutiro-3xl{margin-bottom:var(--mutiro-space-3xl)}.mb-mutiro-l{margin-bottom:var(--mutiro-space-l)}.mb-mutiro-m{margin-bottom:var(--mutiro-space-m)}.mb-mutiro-s{margin-bottom:var(--mutiro-space-s)}.mb-mutiro-xl{margin-bottom:var(--mutiro-space-xl)}.mb-mutiro-xs{margin-bottom:var(--mutiro-space-xs)}.ml-mutiro-l{margin-left:var(--mutiro-space-l)}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-mutiro-xs{margin-right:var(--mutiro-space-xs)}.mt-10{margin-top:2.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-mutiro-2xl{margin-top:var(--mutiro-space-2xl)}.mt-mutiro-3xl{margin-top:var(--mutiro-space-3xl)}.mt-mutiro-l{margin-top:var(--mutiro-space-l)}.mt-mutiro-m{margin-top:var(--mutiro-space-m)}.mt-mutiro-s{margin-top:var(--mutiro-space-s)}.mt-mutiro-xs{margin-top:var(--mutiro-space-xs)}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-20{height:5rem}.h-24{height:6rem}.h-4{height:1rem}.h-mutiro-2xl{height:var(--mutiro-space-2xl)}.max-h-\[150px\]{max-height:150px}.min-h-\[100px\]{min-height:100px}.min-h-\[120px\]{min-height:120px}.min-h-\[200px\]{min-height:200px}.min-h-\[300px\]{min-height:300px}.min-h-screen{min-height:100vh}.w-1\/3{width:33.333333%}.w-2\/5{width:40%}.w-20{width:5rem}.w-4{width:1rem}.w-48{width:12rem}.w-\[60px\]{width:60px}.w-full{width:100%}.min-w-fit{min-width:-moz-fit-content;min-width:fit-content}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[1400px\]{max-width:1400px}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-text{cursor:text}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-12{gap:3rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-mutiro-2xl{gap:var(--mutiro-space-2xl)}.gap-mutiro-l{gap:var(--mutiro-space-l)}.gap-mutiro-m{gap:var(--mutiro-space-m)}.gap-mutiro-s{gap:var(--mutiro-space-s)}.gap-mutiro-xl{gap:var(--mutiro-space-xl)}.gap-mutiro-xs{gap:var(--mutiro-space-xs)}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(3rem*var(--tw-space-y-reverse));margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.space-y-mutiro-2xl>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(var(--mutiro-space-2xl)*var(--tw-space-y-reverse));margin-top:calc(var(--mutiro-space-2xl)*(1 - var(--tw-space-y-reverse)))}.space-y-mutiro-m>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(var(--mutiro-space-m)*var(--tw-space-y-reverse));margin-top:calc(var(--mutiro-space-m)*(1 - var(--tw-space-y-reverse)))}.space-y-mutiro-s>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(var(--mutiro-space-s)*var(--tw-space-y-reverse));margin-top:calc(var(--mutiro-space-s)*(1 - var(--tw-space-y-reverse)))}.space-y-mutiro-xs>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(var(--mutiro-space-xs)*var(--tw-space-y-reverse));margin-top:calc(var(--mutiro-space-xs)*(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-t-2{border-top-width:2px}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.border-green-600{--tw-border-opacity:1;border-color:rgb(22 163 74/var(--tw-border-opacity,1))}.border-mutiro-border{border-color:var(--mutiro-color-border)}.border-mutiro-primary{border-color:var(--mutiro-color-primary)}.border-mutiro-secondary{border-color:var(--mutiro-color-secondary)}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity,1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.bg-mutiro-background{background-color:var(--mutiro-color-background)}.bg-mutiro-primary{background-color:var(--mutiro-color-primary)}.bg-mutiro-surface{background-color:var(--mutiro-color-surface)}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-mutiro-background{--tw-gradient-from:var(--mutiro-color-background) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mutiro-primary{--tw-gradient-from:var(--mutiro-color-primary) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-mutiro-surface{--tw-gradient-from:var(--mutiro-color-surface) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-mutiro-background{--tw-gradient-to:var(--mutiro-color-background) var(--tw-gradient-to-position)}.to-mutiro-secondary{--tw-gradient-to:var(--mutiro-color-secondary) var(--tw-gradient-to-position)}.to-mutiro-surface{--tw-gradient-to:var(--mutiro-color-surface) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.p-0\.5{padding:.125rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-mutiro-2xl{padding:var(--mutiro-space-2xl)}.p-mutiro-l{padding:var(--mutiro-space-l)}.p-mutiro-m{padding:var(--mutiro-space-m)}.p-mutiro-s{padding:var(--mutiro-space-s)}.p-mutiro-xl{padding:var(--mutiro-space-xl)}.p-mutiro-xs{padding:var(--mutiro-space-xs)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-mutiro-m{padding-left:var(--mutiro-space-m);padding-right:var(--mutiro-space-m)}.px-mutiro-xs{padding-left:var(--mutiro-space-xs);padding-right:var(--mutiro-space-xs)}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-16{padding-bottom:4rem;padding-top:4rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-mutiro-xs{padding-bottom:var(--mutiro-space-xs);padding-top:var(--mutiro-space-xs)}.pb-2{padding-bottom:.5rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pb-mutiro-2xl{padding-bottom:var(--mutiro-space-2xl)}.pb-mutiro-s{padding-bottom:var(--mutiro-space-s)}.pl-mutiro-l{padding-left:var(--mutiro-space-l)}.pl-mutiro-xl{padding-left:var(--mutiro-space-xl)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-mutiro-display{font-family:var(--mutiro-font-display)}.font-mutiro-mono{font-family:var(--mutiro-font-mono)}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[12rem\]{font-size:12rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-loose{line-height:2}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-mutiro-background{color:var(--mutiro-color-background)}.text-mutiro-primary{color:var(--mutiro-color-primary)}.text-mutiro-secondary{color:var(--mutiro-color-secondary)}.text-mutiro-text-primary{color:var(--mutiro-color-text-primary)}.text-mutiro-text-secondary{color:var(--mutiro-color-text-secondary)}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.opacity-10{opacity:.1}.opacity-30{opacity:.3}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.opacity-95{opacity:.95}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.outline{outline-style:solid}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-mutiro-primary{--tw-ring-color:var(--mutiro-color-primary)}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:border-mutiro-primary:hover{border-color:var(--mutiro-color-primary)}.hover\:bg-mutiro-surface:hover{background-color:var(--mutiro-color-surface)}.hover\:underline:hover{text-decoration-line:underline}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:justify-between{justify-content:space-between}}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:block{display:block}.lg\:grid{display:grid}.lg\:min-h-screen{min-height:100vh}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:gap-12{gap:3rem}.lg\:p-mutiro-3xl{padding:var(--mutiro-space-3xl)}}@media (min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}