:root{--color-primary:#6366f1;--color-secondary:#8b5cf6;--color-accent:#f59e0b;--color-success:#22c55e;--color-warning:#fbbf24;--color-error:#ef4444;--color-info:#3b82f6;--text-primary:#1f2937;--text-primary-50:rgba(31, 41, 55, 0.5019607843);--text-secondary:#6b7280;--bg-primary:#ffffff;--bg-primary-50:rgba(255, 255, 255, 0.5019607843);--bg-secondary:#f9fafb;--bg-secondary-50:rgba(249, 250, 251, 0.5019607843);--card-bg:#fbfcfd;--bg-tertiary:#f3f4f6;--bg-tertiary-50:#f3f4f680;--border-color:#e5e7eb;--shadow-light:0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);--shadow-medium:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-heavy:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);--primary-color:#6366f1;--secondary-color:#8b5cf6;--accent-color:#f59e0b;--font-primary:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;--font-mono:SF Mono,Monaco,Cascadia Code,Roboto Mono,Courier New,monospace;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--transition-fast:0.15s ease-in-out;--transition-medium:0.3s ease-in-out;--transition-slow:0.5s ease-in-out;--container-width:1280px;--app-content-width:1280px;--header-height:0px;--header-height-visible:0px}@media (prefers-color-scheme:dark){:root{--primary-color:#6366f1;--secondary-color:#8b5cf6;--accent-color:#f59e0b;--text-primary:#f3f4f6;--text-primary-50:rgba(243, 244, 246, 0.5019607843);--text-secondary:#d1d5db;--bg-primary:#1f2937;--bg-primary-50:rgba(31, 41, 55, 0.5019607843);--bg-secondary:#111827;--bg-secondary-50:rgba(17, 24, 39, 0.5019607843);--card-bg:#1a2534;--bg-tertiary:#374151;--bg-tertiary-50:#37415180;--border-color:#4b5563}}.converter-layout{display:flex;gap:1.5rem;align-items:flex-start}.color-preview-area{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:140px}.color-preview-swatch{width:120px;height:120px;border-radius:.75rem;border:2px solid var(--border-color);cursor:pointer;transition:transform var(--transition-fast)}.color-preview-swatch:hover{transform:scale(1.03)}.color-picker-native{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.format-inputs{flex:1;display:flex;flex-direction:column;gap:.5rem}.format-row{display:flex;align-items:center;gap:.5rem}.format-label{width:56px;font-weight:600;font-size:.875rem;color:var(--text-secondary);flex-shrink:0}.format-input{flex:1;font-family:"SF Mono",Monaco,"Cascadia Code","Roboto Mono","Courier New",monospace!important}.named-color-display{display:flex;gap:1rem;align-items:center}.named-color-swatch{width:80px;height:80px;border-radius:.5rem;border:1px solid var(--border-color);flex-shrink:0}.named-color-info{flex:1}.named-color-name{font-size:1.2rem;font-weight:700;color:var(--text-primary);margin-bottom:.25rem}.named-color-hex{font-family:"SF Mono",Monaco,"Cascadia Code","Roboto Mono","Courier New",monospace;font-size:1rem;color:var(--color-primary);margin-bottom:.25rem}.named-color-distance{font-size:.875rem;color:var(--text-secondary)}.formats-table{width:100%;border-collapse:collapse}.formats-table tr{border-bottom:1px solid var(--border-color)}.formats-table tr:last-child{border-bottom:none}.formats-table td{padding:.5rem}.format-name-cell{font-weight:600;color:var(--text-secondary);font-size:.875rem;width:80px}.format-value-cell{font-family:"SF Mono",Monaco,"Cascadia Code","Roboto Mono","Courier New",monospace;color:var(--text-primary)}@media (max-width:768px){.converter-layout{flex-direction:column;align-items:stretch}.color-preview-area{width:100%;flex-direction:row;gap:1rem;justify-content:flex-start}.color-preview-swatch{width:80px;height:80px;flex-shrink:0}.converter-summary-grid.grid-2{grid-template-columns:1fr}}