:root{--color-primary: #007bff;--color-primary-hover: #0056b3;--color-background: #f8f9fa;--color-surface: #ffffff;--color-text: #333333;--color-text-muted: #666666;--color-border: #dee2e6;--color-shadow: rgba(0, 0, 0, .1);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--transition-fast: .15s ease;--transition-normal: .25s ease;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 16px;--font-size-xl: 20px;--curve-card-width: 280px;--graph-height: 200px;--ball-track-height: 120px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);font-size:var(--font-size-md);color:var(--color-text);background-color:var(--color-background);line-height:1.5}#app{min-height:100vh;display:flex;flex-direction:column}.header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:0 1px 3px var(--color-shadow)}.header__title{font-size:var(--font-size-xl);font-weight:600;color:var(--color-text)}.header__controls{display:flex;align-items:center;gap:var(--spacing-md)}.main{flex:1;padding:var(--spacing-lg);display:flex;flex-direction:column;align-items:center}.curve-grid{display:flex;flex-wrap:wrap;gap:var(--spacing-lg);justify-content:center;width:100%;max-width:1400px}.curve-card{width:var(--curve-card-width);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 2px 4px var(--color-shadow);overflow:hidden;transition:box-shadow var(--transition-normal)}.curve-card:hover{box-shadow:0 4px 12px var(--color-shadow)}.curve-card__header{display:flex;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-background);border-bottom:1px solid var(--color-border);gap:var(--spacing-sm)}.curve-card__title{font-size:var(--font-size-md);font-weight:600;color:var(--color-text);flex:1}.curve-card__reset,.curve-card__remove{width:24px;height:24px;border:none;background:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;transition:background-color var(--transition-fast),color var(--transition-fast)}.curve-card__reset:hover,.curve-card__remove:hover{background-color:var(--color-border);color:var(--color-text)}.curve-card__graph{height:var(--graph-height);border-bottom:1px solid var(--color-border)}.curve-card__graph canvas{width:100%;height:100%;display:block;cursor:ew-resize}.curve-card__ball-track{height:var(--ball-track-height);position:relative;display:flex;align-items:center;justify-content:center}.curve-card__ball{width:20px;height:20px;border-radius:50%;background-color:var(--ball-color, var(--color-primary));box-shadow:0 2px 4px var(--color-shadow);position:absolute;left:50%;transform:translate(-50%)}.curve-card__ball-line{position:absolute;left:50%;top:var(--spacing-md);bottom:var(--spacing-md);width:2px;background-color:var(--color-border);transform:translate(-50%)}.curve-card__values{display:flex;justify-content:center;gap:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-background);font-size:var(--font-size-sm);font-family:monospace;color:var(--color-text-muted)}.curve-card__formula{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-md);background-color:var(--color-background);border-top:1px solid var(--color-border)}.curve-card__formula-text{flex:1;font-size:var(--font-size-sm);font-family:monospace;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.curve-card__copy{width:28px;height:28px;border:none;background:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px;transition:background-color var(--transition-fast)}.curve-card__copy:hover{background-color:var(--color-border)}.add-curve-btn{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-lg);background-color:var(--color-surface);border:2px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--font-size-md);cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}.add-curve-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.add-curve-btn__icon{font-size:var(--font-size-xl);font-weight:300}.playback-controls{display:flex;align-items:center;gap:var(--spacing-md)}.playback-btn{width:36px;height:36px;border:1px solid var(--color-border);background-color:var(--color-surface);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);color:var(--color-text);transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.playback-btn span{color:inherit}.playback-btn:hover{background-color:var(--color-background);border-color:var(--color-primary)}.playback-btn--active{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.playback-btn--active:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}.speed-control{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text-muted)}.speed-control select{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface);font-size:var(--font-size-sm);cursor:pointer}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center}.modal[hidden]{display:none}.modal__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#00000080}.modal__content{position:relative;background-color:var(--color-surface);border-radius:var(--radius-lg);box-shadow:0 8px 32px var(--color-shadow);max-width:420px;max-height:80vh;overflow-y:auto;width:90%}.curve-selector{padding:var(--spacing-lg)}.curve-selector__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.curve-selector__title{font-size:var(--font-size-lg);font-weight:600}.curve-selector__close{width:32px;height:32px;border:none;background:none;font-size:24px;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm)}.curve-selector__close:hover{background-color:var(--color-background)}.curve-selector__group{margin-bottom:var(--spacing-lg)}.curve-selector__group-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm)}.curve-selector__options{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.curve-selector__option{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);font-size:var(--font-size-sm);cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast)}.curve-selector__option:hover{border-color:var(--color-primary);background-color:var(--color-background)}.curve-preview{width:40px;height:40px;border-radius:var(--radius-sm);flex-shrink:0}.curve-selector__option--selected{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.curve-card__pid-controls{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-background);border-bottom:1px solid var(--color-border)}.pid-slider{margin-bottom:var(--spacing-xs)}.pid-slider:last-child{margin-bottom:0}.pid-slider label{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm)}.pid-slider__label{width:24px;font-weight:600;color:var(--color-text-muted)}.pid-slider input[type=range]{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:2px;cursor:pointer}.pid-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:transform var(--transition-fast)}.pid-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.pid-slider input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:transform var(--transition-fast)}.pid-slider input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}.pid-slider__value{width:32px;text-align:right;font-family:monospace;color:var(--color-text-muted)}