:root {--checker-size: 10px;}body {min-height: 100vh;display: flex;flex-direction: column;font-family: 'Inter', sans-serif;}.main-content {flex: 1;}.chk-pattern {background-color: white;background-image: repeating-conic-gradient(#e0e0e0 0% 25%, white 0% 50%);background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);background-position: 0 0;}#anim-box {border: 2px solid #dee2e6;background: white;padding: 20px;min-height: 500px;position: relative;}#cnv-container {width: 100%;height: 400px;position: relative;overflow: hidden;}canvas {display: block;width: 100%;height: 100%;}.controls {margin-top: 20px;display: flex;justify-content: center;align-items: center;}.btn-toolbar {gap: 10px;}.btn-group .btn {width: 50px;height: 50px;display: inline-flex;align-items: center;justify-content: center;padding: 0;}.btn {border: none !important;box-shadow: none !important;}.btn:focus, .btn:active {box-shadow: none !important;outline: none !important;}.btn-icon-only {padding: 8px 12px;display: inline-flex;align-items: center;justify-content: center;}.object-controls {display: flex;gap: 8px;align-items: center;flex-shrink: 0;min-width: 80px;justify-content: flex-end;}.pickr-container {display: flex;align-items: center;width: 34px;height: 34px;}.delete-btn-placeholder {width: 29px;height: 29px;visibility: hidden;flex-shrink: 0;}#settings-box {background: white;padding: 20px;min-height: 500px;}.object-item {border: 1px solid #dee2e6;padding: 12px;margin-bottom: 10px;display: flex;align-items: center;justify-content: space-between;background: #f8f9fa;}.object-info {display: flex;align-items: center;gap: 12px;flex: 1;min-width: 0;}.color-preview {width: 50px;height: 50px;border: 2px solid #adb5bd;position: relative;overflow: hidden;flex-shrink: 0;}.color-preview-bg {position: absolute;width: 100%;height: 100%;}.color-preview-color {position: absolute;width: 100%;height: 100%;}.object-name {font-weight: bold;min-width: 85px;flex-shrink: 0;}.object-details {display: flex;flex-direction: column;gap: 4px;min-width: 0;flex: 1;}.color-code {font-size: 0.85rem;color: #6c757d;font-family: 'JetBrains Mono', monospace;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.delete-btn {padding: 4px 8px;color: #555;}.delete-btn:hover {color: #dc3545;;}#btn-add-object:hover {color: #3252c0;}#btn-reset-objects:hover {color: #3252c0;}.controls .btn {width: 44px;height: 44px;padding: 0;display: inline-flex;align-items: center;justify-content: center;}.controls .btn-lg {width: 56px;height: 56px;}footer {background: #343a40;color: white;padding: 20px 0;margin-top: 40px;}.pickr-container {display: inline-block;}.pcr-button {border: 2px solid #adb5bd;}header {background: white;color: #333;padding: 15px 0 5px 0;margin-bottom: 15px;}header h1 {margin: 0;font-size: 2.5rem;font-weight: 700;color: #222;}header p {margin: 5px 0 0 0;color: #666;opacity: 0.9;font-size: 1.1rem;}#ctooltip {position: absolute;background: rgba(0, 0, 0, 0.95);color: white;padding: 12px 16px;font-family: 'JetBrains Mono', monospace;font-size: 0.8rem;pointer-events: none;z-index: 1000;display: none;white-space: normal;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);max-width: 380px;line-height: 1.5;border: 1px solid rgba(255, 255, 255, 0.1);}#ctooltip strong {color: #4dabf7;font-weight: 600;}#ctooltip .tc-preview {display: inline-block;width: 20px;height: 20px;border: 1px solid rgba(255, 255, 255, 0.3);vertical-align: middle;margin-right: 8px;position: relative;overflow: hidden;}#ctooltip .tc-preview::before {content: '';position: absolute;width: 100%;height: 100%;background-color: #555;background-image: repeating-conic-gradient(#777 0% 25%, #555 0% 50%);background-size: 12px 12px;background-position: 0 0;top: 0;left: 0;}#ctooltip .tc-sample {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}#ctooltip .t-text {display: inline-block;vertical-align: middle;}