.contribution-heatmap{color:var(--color-text-muted);font-size:8px;--day-size: 12px;--day-gap: 2px;--border-radius: 6px;--transition: all .2s ease;--shadow-color: rgba(0, 0, 0, .1);--color-bg: #ffffff;--color-border: #e1e4e8;--color-text: #24292f;--color-text-muted: #656d76;--color-level-0: #ebedf0;--color-level-1: #9be9a8;--color-level-2: #40c463;--color-level-3: #30a14e;--color-level-4: #216e39}@media (prefers-color-scheme: dark){.contribution-heatmap{--color-bg: #0d1117;--color-border: #30363d;--color-text: #f0f6fc;--color-text-muted: #8b949e;--color-level-0: #161b22;--color-level-1: #0e4429;--color-level-2: #006d32;--color-level-3: #26a641;--color-level-4: #39d353}}.contribution-heatmap{background:var(--color-bg);border-radius:var(--border-radius);padding:20px;box-shadow:0 2px 8px var(--shadow-color);border:1px solid var(--color-border);transition:var(--transition);max-width:100%;overflow-x:auto}.contribution-heatmap__table{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:var(--day-gap)}.contribution-heatmap__month-header{font-weight:500;text-align:left;padding:0;border:none;background:none}.contribution-heatmap__day-header{padding:0;border:none;background:none}.contribution-heatmap:hover{box-shadow:0 4px 16px var(--shadow-color)}@media (max-width: 768px){.contribution-heatmap{--day-size: 10px;--day-gap: 1px;padding:15px}.contribution-heatmap__container{padding:0}}@media (max-width: 480px){.contribution-heatmap{--day-size: 8px;--day-gap: 1px;padding:10px}}.contribution-heatmap__header{margin-bottom:16px;text-align:center}@media (max-width: 768px){.contribution-heatmap__header{margin-bottom:12px}}.contribution-heatmap__day{width:var(--day-size);height:var(--day-size);border-radius:2px;cursor:pointer;transition:var(--transition);position:relative;border:1px solid transparent;padding:0;box-sizing:border-box;min-width:var(--day-size);max-width:var(--day-size)}.contribution-heatmap__day--level-0{background-color:var(--color-level-0)}.contribution-heatmap__day--level-0:hover{background-color:var(--color-level-1);border-color:var(--color-level-2)}.contribution-heatmap__day--level-1{background-color:var(--color-level-1)}.contribution-heatmap__day--level-1:hover{background-color:var(--color-level-2);border-color:var(--color-level-3)}.contribution-heatmap__day--level-2{background-color:var(--color-level-2)}.contribution-heatmap__day--level-2:hover{background-color:var(--color-level-3);border-color:var(--color-level-4)}.contribution-heatmap__day--level-3{background-color:var(--color-level-3)}.contribution-heatmap__day--level-3:hover{background-color:var(--color-level-4);border-color:var(--color-level-4)}.contribution-heatmap__day--level-4{background-color:var(--color-level-4)}.contribution-heatmap__day--level-4:hover{filter:brightness(1.1);border-color:var(--color-level-4)}.contribution-heatmap__day:hover{transform:scale(1.2);box-shadow:0 2px 8px #0003;z-index:10;border-radius:3px}.contribution-heatmap__day:focus-visible{outline:2px solid var(--color-level-3);outline-offset:2px}.contribution-heatmap__legend{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:12px;flex-wrap:wrap}@media (max-width: 768px){.contribution-heatmap__legend{gap:3px;margin-top:8px}}.contribution-heatmap__legend-text{color:var(--color-text-muted);font-size:12px;font-weight:500;margin:0 4px}@media (max-width: 768px){.contribution-heatmap__legend-text{font-size:10px;margin:0 2px}}.contribution-heatmap__legend-item{width:12px;height:12px;border-radius:2px;cursor:help;transition:var(--transition);border:1px solid var(--color-border)}@media (max-width: 768px){.contribution-heatmap__legend-item{width:10px;height:10px}}.contribution-heatmap__legend-item:hover{transform:scale(1.2);border-color:var(--color-text-muted)}.contribution-heatmap__legend-item--level-0{background-color:var(--color-level-0)}.contribution-heatmap__legend-item--level-1{background-color:var(--color-level-1)}.contribution-heatmap__legend-item--level-2{background-color:var(--color-level-2)}.contribution-heatmap__legend-item--level-3{background-color:var(--color-level-3)}.contribution-heatmap__legend-item--level-4{background-color:var(--color-level-4)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.contribution-heatmap{animation:fadeInUp .6s ease-out}.contribution-heatmap__day{animation:fadeInUp .3s ease-out;animation-delay:var(--animation-delay, 0s);animation-fill-mode:both}.contribution-heatmap--ocean{--color-level-0: #e6f3ff;--color-level-1: #b3daff;--color-level-2: #66b3ff;--color-level-3: #1a8cff;--color-level-4: #0066cc}.contribution-heatmap--sunset{--color-level-0: #fff2e6;--color-level-1: #ffcc99;--color-level-2: #ff9933;--color-level-3: #ff6600;--color-level-4: #cc3300}.contribution-heatmap--purple{--color-level-0: #f3e6ff;--color-level-1: #d9b3ff;--color-level-2: #b366ff;--color-level-3: #8a1aff;--color-level-4: #6600cc}.example__controls{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:24px;border-radius:16px;margin-bottom:30px;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.2)}@media (max-width: 768px){.example__controls{padding:20px;margin-bottom:20px;border-radius:12px}}.example__heatmap{margin-bottom:40px}@media (max-width: 768px){.example__heatmap{margin-bottom:30px}}.control-group{margin-bottom:24px}.control-group:last-child{margin-bottom:0}.control-group__label{display:block;font-weight:600;color:#333;margin-bottom:12px;font-size:1rem}@media (max-width: 768px){.control-group__label{font-size:.9rem;margin-bottom:10px}}.control-group__buttons{display:flex;gap:12px;flex-wrap:wrap}@media (max-width: 768px){.control-group__buttons{gap:8px}}.control-group__checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:1rem;color:#555;margin:0}@media (max-width: 768px){.control-group__checkbox{font-size:.9rem}}.control-group__checkbox input[type=checkbox]{width:18px;height:18px;accent-color:#667eea;cursor:pointer}@media (max-width: 768px){.control-group__checkbox input[type=checkbox]{width:16px;height:16px}}.control-group__checkbox:hover{color:#333}