:root{--bg-primary: #f5f5f5;--bg-secondary: #ffffff;--bg-tertiary: #f8f9fa;--text-primary: #333333;--text-secondary: #2c3e50;--text-muted: #7f8c8d;--border-primary: #e0e0e0;--border-secondary: #e9ecef;--accent-primary: #3498db;--accent-secondary: #2980b9;--accent-tertiary: #21618c;--success: #27ae60;--error: #e74c3c;--shadow-light: rgba(0, 0, 0, .1);--shadow-medium: rgba(0, 0, 0, .15);--gradient-primary: linear-gradient(135deg, #3498db, #2980b9);--gradient-hover: linear-gradient(135deg, #2980b9, #21618c);--overlay-dark: rgba(0, 0, 0, .7);--control-bg: #6c757d;--control-hover: #5a6268;--control-disabled: #adb5bd;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-xxl: 3rem}[data-theme=dark]{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #3a3a3a;--text-primary: #e0e0e0;--text-secondary: #ffffff;--text-muted: #a0a0a0;--border-primary: #404040;--border-secondary: #505050;--accent-primary: #4a9eff;--accent-secondary: #3d8bdb;--accent-tertiary: #2976cc;--success: #2ecc71;--error: #e67e22;--shadow-light: rgba(0, 0, 0, .3);--shadow-medium: rgba(0, 0, 0, .4);--gradient-primary: linear-gradient(135deg, #4a9eff, #3d8bdb);--gradient-hover: linear-gradient(135deg, #3d8bdb, #2976cc);--overlay-dark: rgba(0, 0, 0, .8);--control-bg: #555555;--control-hover: #666666;--control-disabled: #777777}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);transition:background-color .3s ease,color .3s ease}.container{max-width:1200px;margin:0 auto;padding:var(--space-xl)}header{text-align:center;margin-bottom:var(--space-xxl)}header h1{font-size:2.5rem;color:var(--text-secondary);margin-bottom:.5rem}header p{font-size:1.1rem;color:var(--text-muted)}strong{font-weight:700}main{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-xxl);align-items:start}.json-dialog,#aboutDialog{border:none;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-secondary);padding:0;display:none;flex-direction:column;box-shadow:0 8px 24px var(--shadow-medium)}.json-dialog::backdrop,#aboutDialog::backdrop{background:#0009}.json-dialog[open],#aboutDialog[open]{display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:90vw;width:min(90vw,800px);max-height:90vh}.json-dialog-actions{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 2rem 2rem;background:var(--bg-tertiary);border-top:1px solid var(--border-secondary)}@media (max-width: 768px){main{grid-template-columns:1fr}}.controls{background:var(--bg-secondary);padding:var(--space-xl);border-radius:var(--radius-lg);box-shadow:0 4px 6px var(--shadow-light);position:sticky;top:2rem;transition:background-color .3s ease,box-shadow .3s ease}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text-secondary)}.form-group input,.form-group select{width:100%;padding:.75rem;border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:1rem;background:var(--bg-secondary);color:var(--text-primary);transition:border-color .3s ease,background-color .3s ease,color .3s ease}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--accent-primary)}.form-group input[type=color]{width:60px;height:40px;padding:0;border:none;border-radius:var(--radius-md);cursor:pointer;display:inline-block;margin-right:.5rem}.form-group input[type=text]{width:calc(100% - 70px);display:inline-block}.form-group input[type=range]{width:calc(100% - 50px);display:inline-block;margin-right:0}.range-control{display:flex;align-items:center;gap:.5rem}.range-control span{min-width:50px;text-align:right;font-weight:600;color:var(--accent-primary)}.range-control input[type=range]{flex:1;margin:0}.checkbox-group{display:flex;align-items:center;gap:.25rem}.checkbox-group label{display:inline-block;margin-bottom:0}.checkbox-group input[type=checkbox]{width:auto;flex:0 0 auto;margin:0}#numColorsValue{display:inline-block;width:40px;text-align:center;font-weight:700;color:var(--accent-primary)}.hsl-controls{border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:1rem;background:var(--bg-tertiary);transition:background-color .3s ease,border-color .3s ease}.hsl-controls>label{margin-bottom:1rem;font-weight:600;color:var(--text-secondary)}.hsl-inputs{display:flex;flex-direction:column;gap:1rem}.hsl-input{display:flex;align-items:center;gap:.5rem}.hsl-input label{min-width:20px;font-weight:600;color:var(--text-secondary);margin-bottom:0}.hsl-input input[type=range]{flex:1;margin:0}.hsl-input span{min-width:50px;text-align:center;font-weight:700;color:var(--accent-primary);font-size:.9rem}.hsl-input label{min-width:50px}.hsl-input label .hue-circle{min-width:auto;margin-right:.33rem}.btn-primary{width:100%;padding:1rem;background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-primary:hover{background:var(--gradient-hover);transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-medium)}.btn-primary:active{transform:translateY(0)}.output{display:flex;flex-direction:column;gap:var(--space-xl)}.palette-preview{background:var(--bg-secondary);padding:var(--space-xl);border-radius:var(--radius-lg);box-shadow:0 4px 6px var(--shadow-light);min-height:300px;transition:background-color .3s ease,box-shadow .3s ease}.palette-preview .placeholder{text-align:center;color:var(--text-muted);font-style:italic;margin-top:8rem}.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.color-card{background:var(--bg-secondary);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 8px var(--shadow-light);transition:transform .3s ease,background-color .3s ease,box-shadow .3s ease}.color-card:hover{transform:translateY(-4px)}.color-swatch{height:100px;width:100%;position:relative;cursor:pointer}.color-swatch:after{content:"Click to copy";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--overlay-dark);color:#fff;padding:.5rem 1rem;border-radius:var(--radius-xs);font-size:.9rem;opacity:0;transition:opacity .3s ease}.color-swatch:hover:after{opacity:1}.color-info{padding:1rem}.color-name{font-weight:600;color:var(--text-secondary);margin-bottom:.5rem}.color-values{font-size:.9rem;color:var(--text-muted);line-height:1.4}.color-values div{margin-bottom:.25rem}.json-output{background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:0 4px 6px var(--shadow-light);overflow:hidden;transition:background-color .3s ease,box-shadow .3s ease}.json-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border-secondary);transition:background-color .3s ease,border-color .3s ease}.json-header h3{margin:0;color:var(--text-secondary)}.btn-secondary{padding:.5rem 1rem;background:var(--control-bg);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.9rem;cursor:pointer;margin-left:.5rem;transition:background-color .3s ease}.btn-secondary:hover:not(:disabled){background:var(--control-hover)}.btn-secondary:disabled{background:var(--control-disabled);cursor:not-allowed}.hue-circle{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid var(--border-primary);margin-left:.5rem;vertical-align:middle}.json-content{background:var(--bg-tertiary);padding:var(--space-xl);margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;color:var(--text-secondary);overflow-x:auto;white-space:pre-wrap;word-wrap:break-word;transition:background-color .3s ease,color .3s ease}.toast{position:fixed;top:2rem;right:2rem;background:var(--success);color:#fff;padding:1rem 1.5rem;border-radius:var(--radius-md);box-shadow:0 4px 12px var(--shadow-medium);z-index:1000;opacity:0;transform:translate(100%);transition:all .3s ease}.toast.show{opacity:1;transform:translate(0)}@media (max-width: 768px){.container{padding:1rem}main{grid-template-columns:1fr;gap:2rem}.controls{position:static}.color-grid{grid-template-columns:1fr}.json-header{flex-direction:column;gap:1rem;align-items:stretch}.json-header h3{text-align:center}}.view-tabs{display:flex;gap:.5rem;margin-bottom:1rem}.view-tabs .tab{padding:.5rem 1rem;border:1px solid var(--border-primary);border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;font-weight:600;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.view-tabs .tab:hover{background:var(--bg-secondary)}.view-tabs .tab.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.color-graph{display:flex;justify-content:center;align-items:center;padding:1rem}.combined-graph{display:flex;justify-content:center;align-items:center;padding:2rem}.about-content{padding:var(--space-xl);line-height:1.7;font-size:1rem;color:var(--text-primary);overflow-x:auto}.about-content h2{font-size:1.5rem;margin-bottom:var(--space-md);color:var(--text-secondary)}.about-content h3{font-size:1.2rem;margin-top:var(--space-lg);margin-bottom:var(--space-sm);color:var(--text-secondary)}.about-content p{margin-bottom:var(--space-md)}.about-content ul{margin-left:1.5rem;margin-bottom:var(--space-lg)}.about-content li{margin-bottom:.5rem}.examples-graphs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;justify-items:center}.examples-graphs .chart{background:var(--bg-tertiary);padding:.5rem;border-radius:var(--radius-md)}.inline-inputs{display:flex;align-items:center;gap:.5rem}.inline-inputs input[type=color]{flex:0 0 60px;width:60px}.inline-inputs input[type=text]{flex:1 1 auto;width:auto}