body{margin:0;font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#f0f0f0;transition:background .3s ease}body.dark-mode{background:#121212;color:#fff}canvas{border-radius:12px;box-shadow:0 4px 20px #0000001a;margin:20px}body.dark-mode canvas{box-shadow:0 4px 20px #0000004d}.color-info{position:absolute;right:30px;top:30px;background:#ffffffe6;padding:15px;border-radius:8px;box-shadow:0 2px 8px #0000001a;font-size:14px}body.dark-mode .color-info{background:#282828e6;color:#fff}.color-info div{margin:4px 0}.coordinates{color:#666;font-size:12px}body.dark-mode .coordinates{color:#aaa}.hex{font-weight:700;letter-spacing:1px}.theme-toggle{position:fixed;top:20px;right:20px;background:none;border:none;font-size:24px;cursor:pointer;padding:8px;border-radius:50%;transition:transform .2s ease}.theme-toggle:hover{transform:scale(1.1)}.instructions{position:fixed;bottom:20px;color:#666;font-size:14px}body.dark-mode .instructions{color:#aaa}.copied-notice{position:fixed;bottom:50px;background:#4caf50;color:#fff;padding:8px 16px;border-radius:20px;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.color-info{display:flex;align-items:center;gap:15px;padding:15px;background:#ffffffe6;border-radius:8px;box-shadow:0 2px 8px #0000001a}.color-preview{width:50px;height:50px;border-radius:6px;border:2px solid #ddd}.color-details{display:flex;flex-direction:column;gap:4px}.dark .color-info{background:#282828e6;color:#fff}.dark .color-preview{border-color:#555}.footer{position:fixed;bottom:0;width:100%;text-align:center;padding:10px 0;background:#f0f0f0;color:#666;font-size:14px;border-top:1px solid #ddd;font-weight:700}body.dark-mode .footer{background:#121212;color:#aaa;border-top:1px solid #333}