:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--theme-background: #ffffff;--theme-background-secondary: #f8fafc;--theme-surface: #ffffff;--theme-surface-hover: #f1f5f9;--theme-text-primary: #1e293b;--theme-text-secondary: #475569;--theme-text-muted: #94a3b8;--theme-border: #e2e8f0;--theme-border-light: #f1f5f9;--theme-primary: #3b82f6;--theme-primary-hover: #2563eb;--theme-primary-text: #ffffff;--theme-focus: #3b82f6;--theme-shadow: rgba(0, 0, 0, .1);--theme-shadow-hover: rgba(0, 0, 0, .15);--theme-success: #10b981;--theme-warning: #f59e0b;--theme-error: #ef4444;color-scheme:light;color:var(--theme-text-primary);background-color:var(--theme-background)}:root.dark{--theme-background: #0f172a;--theme-background-secondary: #1e293b;--theme-surface: #1e293b;--theme-surface-hover: #334155;--theme-text-primary: #f8fafc;--theme-text-secondary: #cbd5e1;--theme-text-muted: #64748b;--theme-border: #334155;--theme-border-light: #475569;--theme-primary: #60a5fa;--theme-primary-hover: #3b82f6;--theme-primary-text: #0f172a;--theme-focus: #60a5fa;--theme-shadow: rgba(0, 0, 0, .4);--theme-shadow-hover: rgba(0, 0, 0, .6);--theme-success: #34d399;--theme-warning: #fbbf24;--theme-error: #f87171;color-scheme:dark;color:var(--theme-text-primary);background-color:var(--theme-background)}*{box-sizing:border-box}body{margin:0;padding:0;min-width:320px;min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--theme-background);scroll-behavior:smooth;overflow-x:hidden;transition:background-color .3s ease,color .3s ease}:root.light body{background:linear-gradient(135deg,#667eea,#764ba2,#f093fb)}:root.dark body{background:linear-gradient(135deg,#0f172a,#1e293b,#334155)}a{font-weight:500;color:#007bff;text-decoration:none;transition:color .2s ease}a:hover{color:#0056b3;text-decoration:underline}h1,h2,h3,h4,h5,h6{margin:0;font-weight:inherit;font-size:inherit;line-height:inherit}button{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0;border:none;background:none;cursor:pointer;color:inherit}button:focus,input:focus,select:focus{outline:2px solid #007bff;outline-offset:2px}input,select{font-family:inherit;font-size:inherit;line-height:inherit}.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}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.spectrum-bar{transition:all .2s ease}.spectrum-bar:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)!important}.spectrum-region{transition:all .2s ease;position:relative}.spectrum-region:hover{filter:brightness(1.1);z-index:2}.wavelength-indicator-arrow,.wavelength-indicator-dot{animation:pulse 2s infinite}.wavelength-indicator-line{animation:glow 3s ease-in-out infinite alternate}@keyframes glow{0%{box-shadow:0 0 8px #3b82f699}to{box-shadow:0 0 16px #3b82f6e6,0 0 24px #3b82f666}}@media (max-width: 768px){.spectrum-bar{height:50px!important}.spectrum-region{font-size:10px!important}.wavelength-indicator-arrow{border-left-width:6px!important;border-right-width:6px!important;border-top-width:9px!important}.wavelength-indicator-dot{width:10px!important;height:10px!important}.wavelength-indicator-line{width:2px!important}}@media (max-width: 480px){.spectrum-bar{height:40px!important}.spectrum-region{font-size:8px!important}.wavelength-indicator-arrow{border-left-width:5px!important;border-right-width:5px!important;border-top-width:7px!important}.wavelength-indicator-dot{width:8px!important;height:8px!important}}@media (prefers-reduced-motion: reduce){.wavelength-indicator-arrow,.wavelength-indicator-dot,.wavelength-indicator-line{animation:none}.spectrum-bar,.spectrum-region{transition:none}}@media (prefers-contrast: high){.wavelength-indicator-line{background-color:var(--theme-text-primary)!important;box-shadow:none!important}.wavelength-indicator-arrow{border-top-color:var(--theme-text-primary)!important;filter:none!important}.wavelength-indicator-dot{background-color:var(--theme-text-primary)!important;border-color:var(--theme-background)!important}}.theme-switcher{position:relative;display:inline-block}.theme-trigger{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:var(--radius-md);color:var(--theme-text-primary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm);min-width:120px;justify-content:space-between}.theme-trigger:hover{background:var(--theme-surface-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.theme-trigger:focus{outline:2px solid var(--theme-focus);outline-offset:2px}.theme-trigger-icon{font-size:1rem;line-height:1}.theme-trigger-label{font-weight:600;white-space:nowrap}.dropdown-arrow{font-size:.7rem;transition:transform .2s ease;color:var(--theme-text-muted)}.dropdown-arrow.open{transform:rotate(180deg)}.theme-dropdown{position:absolute;top:calc(100% + 4px);right:0;background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:1000;min-width:160px;overflow:hidden;animation:dropdownSlide .2s ease}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.theme-option{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--theme-text-secondary);cursor:pointer;transition:all .2s ease;font-size:.9rem;font-weight:500;width:100%;text-align:left;border-bottom:1px solid var(--theme-border-light)}.theme-option:last-child{border-bottom:none}.theme-option:hover{background:var(--theme-surface-hover);color:var(--theme-text-primary)}.theme-option.active{background:var(--theme-primary);color:var(--theme-primary-text);font-weight:600}.theme-option.active:hover{background:var(--theme-primary-hover)}.theme-option-icon{font-size:1rem;line-height:1;flex-shrink:0}.theme-option-label{flex:1}.system-indicator,.system-indicator-dropdown{font-size:.75rem;opacity:.8;margin-left:auto;color:var(--theme-text-muted)}@media (max-width: 768px){.theme-trigger{min-width:100px;padding:var(--spacing-xs) var(--spacing-sm);font-size:.85rem}.theme-trigger-label{display:none}.theme-dropdown{min-width:140px}.theme-option{padding:var(--spacing-sm);font-size:.85rem}.system-indicator,.system-indicator-dropdown{display:none}}@media (max-width: 480px){.theme-trigger{min-width:80px;padding:var(--spacing-xs)}.theme-dropdown{min-width:120px;right:-20px}.theme-option{padding:var(--spacing-xs) var(--spacing-sm);font-size:.8rem}}.theme-option:focus{outline:2px solid var(--theme-focus);outline-offset:-2px;background:var(--theme-surface-hover)}.theme-option.active{animation:theme-select .3s ease}@keyframes theme-select{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.theme-dropdown{outline:none}.theme-trigger:focus-visible{outline:2px solid var(--theme-focus);outline-offset:2px}.app-footer{width:100%;padding:var(--spacing-xl) var(--spacing-md);background:var(--theme-surface);border-top:1px solid var(--theme-border);margin-top:var(--spacing-2xl);transition:background-color .3s ease,border-color .3s ease}.footer-content{max-width:1200px;margin:0 auto;text-align:center}.footer-copyright,.footer-made-with{margin:var(--spacing-sm) 0;color:var(--theme-text-secondary);font-size:.9rem;line-height:1.6}.footer-link{color:var(--theme-primary);text-decoration:none;font-weight:500;transition:color .2s ease}.footer-link:hover{color:var(--theme-primary-hover);text-decoration:underline}.footer-link:focus{outline:2px solid var(--theme-focus);outline-offset:2px;border-radius:2px}.heart{display:inline-block;color:#ef4444;animation:heartbeat 1.5s ease-in-out infinite}@keyframes heartbeat{0%,to{transform:scale(1)}10%,30%{transform:scale(1.1)}20%,40%{transform:scale(1)}}@media (max-width: 768px){.app-footer{padding:var(--spacing-lg) var(--spacing-md)}.footer-copyright,.footer-made-with{font-size:.85rem}}:root.light .app-footer{background:#f8fafc;border-top-color:#e2e8f0}:root.light .footer-copyright,:root.light .footer-made-with{color:#1e293b}:root.light .footer-link{color:#2563eb}:root.light .footer-link:hover{color:#1d4ed8}:root.dark .app-footer{background:var(--theme-surface);border-top-color:var(--theme-border)}:root{--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 0 2px 4px var(--theme-shadow);--shadow-md: 0 4px 8px var(--theme-shadow);--shadow-lg: 0 4px 12px var(--theme-shadow-hover);--shadow-xl: 0 8px 24px var(--theme-shadow-hover)}.app{min-height:100vh;display:flex;flex-direction:column}.skip-link{position:absolute;top:-40px;left:0;background:var(--theme-primary);color:#fff;padding:8px 16px;text-decoration:none;border-radius:0 0 4px;z-index:100;font-weight:600;transition:top .2s ease}.skip-link:focus{top:0;outline:2px solid var(--theme-focus);outline-offset:2px}.app-header{background:linear-gradient(135deg,#1e40af,#3b82f6,#6366f1);color:#fff;padding:var(--spacing-xl) var(--spacing-md);text-align:center;box-shadow:var(--shadow-lg);position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);border-bottom:1px solid rgba(255,255,255,.1)}:root.dark .app-header{background:linear-gradient(135deg,#0f172a,#1e293b,#334155);border-bottom:1px solid rgba(255,255,255,.05)}.header-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);flex:1}.header-controls{position:absolute;top:var(--spacing-md);right:var(--spacing-md)}.app-header h1{margin:0 0 var(--spacing-sm) 0;font-size:2.5rem;font-weight:800;text-shadow:2px 2px 8px rgba(0,0,0,.3);letter-spacing:-.025em;background:linear-gradient(135deg,#fff,#e2e8f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@supports not (-webkit-background-clip: text){.app-header h1{color:#fff;background:none;-webkit-text-fill-color:initial}}.app-subtitle{font-size:1.1rem;opacity:.95;font-weight:400;max-width:600px;margin:0 auto;line-height:1.6;text-shadow:1px 1px 3px rgba(0,0,0,.2)}.app-main{flex:1;padding:var(--spacing-xl) var(--spacing-md);max-width:1400px;margin:0 auto;width:100%}.visualization-section,.scales-section{margin:var(--spacing-xl) 0;display:flex;justify-content:center}.content-section{background:var(--theme-surface);padding:var(--spacing-xl);border-radius:var(--radius-lg);margin:var(--spacing-xl) 0;box-shadow:var(--shadow-md);border:1px solid var(--theme-border);transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.content-section:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--theme-primary),transparent);opacity:.5}.content-section:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.info-section{background:var(--theme-surface);padding:var(--spacing-xl);border-radius:var(--radius-lg);margin:var(--spacing-xl) 0;text-align:center;box-shadow:var(--shadow-md);border:1px solid var(--theme-border);transition:all .3s ease;position:relative;overflow:hidden}.info-section:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--theme-primary),transparent);opacity:.5}.info-section h2{color:var(--theme-text-primary);margin-bottom:var(--spacing-lg);font-size:1.75rem;font-weight:700;letter-spacing:-.025em}.info-section p{color:var(--theme-text-secondary);margin:var(--spacing-sm) 0;line-height:1.7;font-size:1rem}.debug-text{font-size:.75rem;color:var(--theme-text-muted);margin-top:var(--spacing-md)}.wavelength-controls{margin:var(--spacing-xl) 0;display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap}.wavelength-slider{width:300px;margin:0 var(--spacing-md)}.color-preview{width:100px;height:100px;margin:var(--spacing-md) auto;border-radius:50%;border:3px solid var(--theme-border);box-shadow:var(--shadow-md);transition:all .3s ease}.color-preview:hover{transform:scale(1.05);box-shadow:var(--shadow-lg)}.panels-container{display:grid;gap:var(--spacing-xl);margin:var(--spacing-xl) 0}.panels-container.desktop{grid-template-columns:1fr 1fr}.panels-container.mobile{grid-template-columns:1fr}.hover-info{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);z-index:1000;pointer-events:none}.hover-content{background:#000000e6;color:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);font-size:.9rem;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hover-content h4{margin:0 0 var(--spacing-sm) 0;font-size:1rem;color:gold}.hover-content p{margin:var(--spacing-xs) 0;font-family:Courier New,monospace}.app-footer{background:#2c3e50;color:#fff;padding:var(--spacing-lg);text-align:center;margin-top:auto}.app-footer p{margin:0;font-size:.9rem;opacity:.8}@media (max-width: 768px){.app-header{padding:var(--spacing-lg) var(--spacing-md)}.app-header h1{font-size:2rem}.app-subtitle{font-size:1rem}.header-controls{position:static;margin-top:var(--spacing-sm)}.app-main{padding:var(--spacing-md) var(--spacing-sm)}.panels-container{gap:var(--spacing-md)}.hover-info{top:var(--spacing-sm);right:var(--spacing-sm);left:var(--spacing-sm)}.hover-content{padding:var(--spacing-sm) var(--spacing-md);font-size:.8rem}}@media (max-width: 480px){.app-header h1{font-size:1.8rem}.app-subtitle{font-size:.9rem}.app-main{padding:var(--spacing-sm) var(--spacing-xs)}}.app *{transition:all .2s ease}.loading{opacity:.7;pointer-events:none}.app *:focus{outline:2px solid var(--theme-focus);outline-offset:2px}@media print{.app-header,.app-footer,.hover-info{display:none}.app-main{padding:0}.panels-container{grid-template-columns:1fr}}