:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%;margin:0 auto;padding:2rem}.app{max-width:1400px;margin:0 auto}.app.fullscreen-mode{max-width:none;padding:0}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{font-size:3rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.app-header p{color:#888;font-size:1.1rem}.keyboard-hints{display:flex;justify-content:center;gap:1.5rem;margin-top:1rem;flex-wrap:wrap}.keyboard-hints span{font-size:.8rem;color:#666;background:#1a1a1a;padding:.3rem .8rem;border-radius:4px;border:1px solid #333}.model-selector{background:#1a1a1a;border-radius:12px;padding:2rem;margin-bottom:2rem;border:1px solid #333}.model-selector h2{margin-bottom:1rem;color:#fff}.model-buttons{display:flex;gap:1rem;flex-wrap:wrap}.model-button{padding:1rem 2rem;border:2px solid #667eea;background:transparent;color:#667eea;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease}.model-button:hover{background:#667eea;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.model-button.active{background:#667eea;color:#fff}.settings-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.animation-settings{background:#1a1a1a;border-radius:12px;padding:1.5rem;border:1px solid #333}.animation-settings h3{color:#fff;margin-bottom:1rem;font-size:1.1rem}.animation-presets{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.5rem}.presets-label{color:#888;font-size:.9rem;margin-right:.5rem}.preset-button{padding:.4rem .8rem;background:#2a2a2a;border:1px solid #444;border-radius:6px;color:#aaa;cursor:pointer;font-size:.85rem;transition:all .2s ease}.preset-button:hover{background:#333;border-color:#667eea;color:#fff}.preset-button.active{background:#667eea;border-color:#667eea;color:#fff}.animation-controls{display:flex;flex-direction:column;gap:1rem}.control-group{display:flex;flex-direction:column;gap:.4rem}.control-group label{color:#aaa;font-size:.9rem;display:flex;justify-content:space-between}.control-group .value{color:#667eea;font-weight:600}.control-group input[type=range]{width:100%;height:6px;border-radius:3px;background:#333;cursor:pointer;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#667eea;cursor:pointer;transition:transform .2s}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.control-group select{width:100%;padding:.5rem;background:#2a2a2a;border:1px solid #444;border-radius:6px;color:#fff;font-size:.9rem;cursor:pointer}.control-group select:focus{outline:none;border-color:#667eea}.theme-selector{background:#1a1a1a;border-radius:12px;padding:1.5rem;border:1px solid #333}.theme-selector h3{color:#fff;margin-bottom:1rem;font-size:1.1rem}.theme-options{display:flex;flex-wrap:wrap;gap:.75rem}.theme-button{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.75rem;background:#2a2a2a;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease}.theme-button:hover{border-color:#667eea;transform:translateY(-2px)}.theme-button.active{border-color:#667eea;background:#333}.theme-preview{display:flex;gap:2px}.theme-color{width:16px;height:16px;border-radius:3px}.theme-name{color:#aaa;font-size:.75rem}.export-tools{background:#1a1a1a;border-radius:12px;padding:1.5rem;border:1px solid #333}.export-tools h3{color:#fff;margin-bottom:1rem;font-size:1.1rem}.export-buttons{display:flex;flex-wrap:wrap;gap:.75rem}.export-btn{padding:.6rem 1.2rem;background:#2a2a2a;border:1px solid #444;border-radius:6px;color:#aaa;cursor:pointer;font-size:.9rem;transition:all .2s ease}.export-btn:hover{background:#333;border-color:#667eea;color:#fff}.export-icon{font-weight:600}.export-btn-ae{background:linear-gradient(135deg,#00005b,#99f);border-color:#66f;color:#fff}.export-btn-ae:hover{background:linear-gradient(135deg,#00008b,#aaf);border-color:#88f;color:#fff}.editor-container{background:#1a1a1a;border-radius:12px;padding:1.5rem;margin-bottom:2rem;border:1px solid #333}.editor-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:1px solid #333;padding-bottom:1rem;flex-wrap:wrap;align-items:center}.editor-tab{padding:.6rem 1.5rem;background:transparent;border:1px solid #444;border-radius:6px;color:#aaa;cursor:pointer;font-size:.95rem;transition:all .2s ease}.editor-tab:hover{border-color:#667eea;color:#fff}.editor-tab.active{background:#667eea;border-color:#667eea;color:#fff}.editor-options{margin-left:auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.live-preview-toggle{display:flex;align-items:center;gap:.5rem;color:#aaa;font-size:.9rem;cursor:pointer}.live-preview-toggle input{cursor:pointer;width:16px;height:16px;accent-color:#667eea}.history-controls{display:flex;gap:.5rem}.history-btn{padding:.4rem .8rem;background:#2a2a2a;border:1px solid #444;border-radius:4px;color:#aaa;cursor:pointer;font-size:.85rem;transition:all .2s ease}.history-btn:hover:not(:disabled){background:#333;border-color:#667eea;color:#fff}.history-btn:disabled{opacity:.4;cursor:not-allowed}.visual-editor{padding:1rem 0}.visual-editor-section{margin-bottom:1.5rem;padding:1rem;background:#2a2a2a;border-radius:8px}.visual-editor-section h4{color:#667eea;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center}.visual-field{margin-bottom:1rem}.visual-field label{display:block;color:#aaa;font-size:.9rem;margin-bottom:.4rem}.visual-field input,.visual-field select{width:100%;padding:.6rem;background:#1a1a1a;border:1px solid #444;border-radius:6px;color:#fff;font-size:.95rem}.visual-field input:focus,.visual-field select:focus{outline:none;border-color:#667eea}.visual-field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.add-dataset-btn{padding:.3rem .8rem;background:#667eea;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.85rem;transition:all .2s ease}.add-dataset-btn:hover{background:#5a6fd6}.dataset-editor{background:#1a1a1a;border-radius:6px;padding:1rem;margin-bottom:1rem}.dataset-header{display:flex;gap:.75rem;align-items:center;margin-bottom:1rem}.dataset-label-input{flex:1;padding:.5rem;background:#2a2a2a;border:1px solid #444;border-radius:4px;color:#fff;font-size:.9rem}.color-picker{width:40px;height:36px;border:none;border-radius:4px;cursor:pointer;padding:0}.remove-dataset-btn{padding:.4rem .8rem;background:#ff6b6b;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.85rem;font-weight:600}.remove-dataset-btn:hover{background:#ff5252}.dataset-values{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem}.value-input-group{display:flex;flex-direction:column;gap:.3rem}.value-label{font-size:.8rem;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value-input-group input{padding:.4rem;background:#2a2a2a;border:1px solid #444;border-radius:4px;color:#fff;font-size:.9rem;text-align:center}.value-input-group input:focus{outline:none;border-color:#667eea}.data-editor{background:transparent;border-radius:0;padding:0;margin-bottom:0;border:none}.data-editor h2{margin-bottom:1.5rem;color:#fff}.data-section{margin-bottom:1.5rem}.data-section h3{margin-bottom:.75rem;color:#aaa;font-size:1rem}.data-section input,.data-section textarea{width:100%;padding:.75rem;background:#2a2a2a;border:1px solid #444;border-radius:6px;color:#fff;font-size:.95rem;font-family:Courier New,monospace}.data-section input:focus,.data-section textarea:focus{outline:none;border-color:#667eea}.data-section textarea{min-height:200px;resize:vertical}.help-text{font-size:.85rem;color:#666;margin-top:.5rem}.animate-button{padding:1rem 3rem;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;margin-top:1rem}.animate-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.animate-button:active:not(:disabled){transform:translateY(0)}.animate-button:disabled{opacity:.5;cursor:not-allowed}.chart-container{background:#1a1a1a;border-radius:12px;padding:2rem;border:1px solid #333;min-height:500px;display:flex;flex-direction:column;position:relative}.chart-container.fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;border-radius:0;min-height:100vh;padding:2rem}.chart-toolbar{display:flex;justify-content:flex-end;margin-bottom:1rem}.fullscreen-btn{padding:.5rem 1rem;background:#2a2a2a;border:1px solid #444;border-radius:6px;color:#aaa;cursor:pointer;font-size:.9rem;transition:all .2s ease}.fullscreen-btn:hover{background:#333;border-color:#667eea;color:#fff}.chart-wrapper{width:100%;max-width:1000px;margin:0 auto;position:relative;flex:1;display:flex;align-items:center;justify-content:center}.chart-container.fullscreen .chart-wrapper{max-width:1400px}.empty-state{text-align:center;color:#666;padding:3rem}.empty-state h3{font-size:1.5rem;margin-bottom:.5rem}.sample-data-section{background:#2a2a2a;border-radius:8px;padding:1.5rem;margin-bottom:1.5rem;border-left:4px solid #667eea}.sample-data-section h4{color:#667eea;margin-bottom:1rem}.sample-buttons{display:flex;gap:.75rem;flex-wrap:wrap}.sample-button{padding:.5rem 1rem;background:#333;border:1px solid #555;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;transition:all .2s ease}.sample-button:hover{background:#444;border-color:#667eea}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}body{background-color:#f5f5f5}.model-selector,.chart-container,.animation-settings,.theme-selector,.export-tools,.editor-container{background:#fff;border-color:#e0e0e0}.data-section input,.data-section textarea,.visual-field input,.visual-field select,.control-group select,.dataset-label-input,.value-input-group input{background:#f9f9f9;border-color:#ddd;color:#213547}.sample-data-section,.visual-editor-section,.dataset-editor{background:#f9f9f9}.keyboard-hints span,.preset-button,.theme-button,.export-btn,.editor-tab,.history-btn,.fullscreen-btn,.sample-button{background:#f0f0f0;border-color:#ddd;color:#555}.control-group input[type=range]{background:#ddd}}@media (max-width: 768px){.app-header h1{font-size:2rem}.settings-panel{grid-template-columns:1fr}.keyboard-hints{display:none}.editor-options{width:100%;justify-content:space-between;margin-top:1rem;margin-left:0}.visual-field-row{grid-template-columns:1fr}}
