:root {
--accent: #0066cc;
--accent-active: #004080;
--accent-glow: rgba(0,102,204,.20);
--accent-hover: #005bb5;
--accent-muted: #99ccee;
--accent-rgb: 0,102,204;
--bg-active: LavenderBlush;
--bg-aside: rgba(200,200,200,.40);
--bg-card: GhostWhite;
--bg-code: #f1f3f5;
--bg-disabled: #e9ecef;
--bg-focus: rgba(0,102,204,.12);
--bg-footer: rgba(255,255,255,.40);
--bg-glass: rgba(255,255,255,.40);
--bg-header: OldLace;
--bg-hover: Ivory;
--bg-input: WhiteSmoke;
--bg-main: Snow;
--bg-modal: SeaShell;
--bg-overlay: rgba(0,0,0,.50);
--bg-panel: rgba(255,255,255,.40);
--bg-primary: HoneyDew;
--bg-primary-rgb: 240, 255, 240;
--bg-secondary: Azure;
--bg-selection: rgba(147,51,234,.20);
--bg-tertiary: AliceBlue;
--bg-tooltip: Beige;
--border: #dee2e6;
--border-focus: var(--accent);
--border-strong: #adb5bd;
--border-subtle: #f1f3f5;
--border-width: 1px;
--bp-compact: 600px;
--bp-large: 1200px;
--bp-medium: 900px;
--bp-xlarge: 1440px;
--bp-xxlarge: 1920px;
--button-bg: DarkSlateGray;
--button-bg-active: Gainsboro;
--button-bg-hover: DimGray;
--button-border: transparent;
--button-fg: Snow;
--danger: #b00020;
--danger-bg: #fde8ea;
--duration: 1600ms;
--easing: cubic-bezier(.4,0,.2,1);
--error: #dc3545;
--error-bg: #fdecec;
--fg-aside: Lime;
--fg-disabled: Gainsboro;
--fg-footer: Purple;
--fg-glow: rgba(255,255,255,.80);
--fg-heading: DarkGray;
--fg-inverse: White;
--fg-label: Gray;
--fg-main: DarkSlateGray;
--fg-muted: LightGray;
--fg-panel: Gold;
--fg-placeholder: Silver;
--fg-primary: SlateGray;
--fg-secondary: LightSlateGray;
--fg-selection: DeepSkyBlue;
--fg-tertiary: DimGray;
--font-body: var(--font-sans);
--font-heading: 'Segoe UI', 'Helvetica Neue', sans-serif;
--font-mono: 'Courier New', monospace;
--font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--font-size-lg: 1.25rem;
--font-size-md: 1rem;
--font-size-sm: 0.875rem;
--font-size-xl: 1.5rem;
--footer-bg: var(--bg-footer);
--footer-fg: var(--fg-secondary);
--header-bg: var(--bg-header);
--header-fg: var(--fg-main);
--hr-color: #9333ea;
--hr-height: 4px;
--ico-border-radius: 8px;
--ico-size: 16px;
--icon-border-radius: 32px;
--icon-size: 32px;
--info: #17a2b8;
--info-bg: #e8f8fb;
--input-bg: var(--bg-input);
--input-border: var(--border);
--input-fg: var(--fg-main);
--input-focus: var(--accent);
--input-placeholder: var(--fg-placeholder);
--line-height-loose: 1.75;
--line-height-normal: 1.5;
--line-height-tight: 1.2;
--link: var(--accent);
--link-hover: #004c99;
--main-backdrop: url('/backdrop') center/cover no-repeat fixed;
--max-width: 1440px;
--min-scale: .1;
--mirror-mask: linear-gradient(\n    to bottom,\n    rgba(var(--shadow), 0.8),\n                                 var(--fg-glow)\n  );
--panel-bg: var(--bg-secondary);
--panel-border: var(--border);
--panel-shadow: var(--shadow-sm);
--preview-height: 200px;
--preview-height-lg: 256px;
--preview-height-md: 128px;
--preview-height-sm: 64px;
--preview-height-xl: 512px;
--radius-circle: 50%;
--radius-lg: 16px;
--radius-md: 8px;
--radius-pill: 9999px;
--radius-sm: 4px;
--radius-xl: 24px;
--scrollbar: 16,16,16;
--scrollbar-hover: 0,0,0;
--scrollbar-track: 10,10,10;
--shadow: 255, 248, 220;
--shadow-lg: 0 16px 40px rgba(0,0,0,.18);
--shadow-md: 0 8px 20px rgba(0,0,0,.12);
--shadow-sm: 0 2px 6px rgba(0,0,0,.08);
--shadow-xl: 0 24px 64px rgba(0,0,0,.25);
--shadow-xs: 0 1px 2px rgba(0,0,0,.05);
--space-lg: 1.5rem;
--space-md: 1rem;
--space-sm: .5rem;
--space-xl: 2rem;
--space-xs: .25rem;
--success: #28a745;
--success-bg: #e9f8ef;
--transition: all .30s ease;
--transition-fast: .15s ease-in-out;
--transition-medium: .30s ease;
--transition-slow: .50s ease-out;
--warning: #ffc107;
--warning-bg: #fff8e1;
--wrapper-width: 250px;
--z-base: 1;
--z-dropdown: 500;
--z-modal: 2000;
--z-overlay: 1000;
--z-sticky: 900;
--z-toast: 2500;
--z-tooltip: 3000;
}
:root.dark {
--accent: #3399ff;
--accent-active: #005bb5;
--accent-glow: rgba(51,153,255,.25);
--accent-hover: #4dabf7;
--accent-muted: #1c3d5a;
--accent-rgb: 51,153,255;
--bg-active: LightGray;
--bg-aside: rgba(64,64,64,.40);
--bg-card: Gray;
--bg-code: DimGray;
--bg-disabled: Gainsboro;
--bg-focus: rgba(51,153,255,.20);
--bg-footer: rgba(32,32,32,.40);
--bg-glass: rgba(0,0,0,.40);
--bg-header: LightGray;
--bg-hover: Silver;
--bg-input: DarkGray;
--bg-main: DarkSlateGray;
--bg-modal: Silver;
--bg-overlay: rgba(0,0,0,.80);
--bg-panel: rgba(48,48,48,.40);
--bg-primary: SlateGray;
--bg-primary-rgb: 30,30,30;
--bg-secondary: LightSlateGray;
--bg-selection: rgba(168,85,247,.30);
--bg-tertiary: DimGray;
--bg-tooltip: LightGray;
--border: #333333;
--border-focus: var(--accent);
--border-strong: #555555;
--border-subtle: #232323;
--button-bg: Snow;
--button-bg-active: Gainsboro;
--button-bg-hover: Silver;
--button-border: transparent;
--button-fg: DarkSlateGray;
--danger: #ff4757;
--danger-bg: rgba(255,71,87,.15);
--error: #ff6b6b;
--error-bg: rgba(255,107,107,.15);
--fg-aside: Lime;
--fg-disabled: Gray;
--fg-footer: Purple;
--fg-glow: rgba(255,255,255,.15);
--fg-heading: WhiteSmoke;
--fg-inverse: Black;
--fg-label: SeaShell;
--fg-main: Snow;
--fg-muted: #666666;
--fg-panel: Gold;
--fg-placeholder: GhostWhite;
--fg-primary: HoneyDew;
--fg-secondary: MintCream;
--fg-selection: Beige;
--fg-tertiary: Azure;
--footer-bg: var(--bg-footer);
--footer-fg: var(--fg-secondary);
--header-bg: var(--bg-header);
--header-fg: var(--fg-main);
--info: #1ecbe1;
--info-bg: rgba(30,203,225,.15);
--input-bg: var(--bg-input);
--input-border: var(--border);
--input-fg: var(--fg-main);
--input-focus: var(--accent);
--input-placeholder: var(--fg-placeholder);
--link: #66b2ff;
--link-hover: #3399ff;
--main-backdrop: url('/backdrop') center/cover no-repeat fixed;
--mirror-mask: linear-gradient(\n    to bottom,\n    rgba(var(--shadow), 0.8),\n                                 var(--fg-glow)\n  );
--panel-bg: var(--bg-secondary);
--panel-border: var(--border);
--panel-shadow: var(--shadow-sm);
--scrollbar: 241,241,241;
--scrollbar-hover: 255,255,255;
--scrollbar-track: 244,244,244;
--shadow-lg: 0 16px 40px rgba(0,0,0,.70);
--shadow-md: 0 8px 20px rgba(0,0,0,.55);
--shadow-sm: 0 2px 6px rgba(0,0,0,.45);
--shadow-xl: 0 24px 64px rgba(0,0,0,.85);
--shadow-xs: 0 1px 2px rgba(0,0,0,.35);
--success: #28d17b;
--success-bg: rgba(40,209,123,.15);
--warning: #ffc93c;
--warning-bg: rgba(255,201,60,.15);
}
@media (min-width: 1920px) {
:root {
}
}
@media (min-width: 901px) and (max-width: 1919px) {
:root {
}
}
@media (min-width: 601px) and (max-width: 900px) {
:root {
}
}
@media (max-width: 600px) {
:root {
}
}