@layer component{#menu-toggle{position:absolute;clip:rect(0, 0, 0, 0);width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden}.menu-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);z-index:1003;cursor:pointer}.mobile-logo{display:none;@media (max-width: 1200px){position:fixed;top:0.875rem;left:4rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;z-index:1005;transition:opacity 0.2s ease;&:hover{opacity:0.8}img{width:100%;height:100%;display:block}}}.menu-toggle-label{display:none;@media (max-width: 1200px){position:fixed;top:0.75rem;left:0.75rem;width:2.75rem;height:2.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;cursor:pointer;z-index:1005;background:rgba(20, 20, 30, 0.95);border:2px solid rgba(228, 18, 111, 0.5);border-radius:8px;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);&:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(228, 18, 111, 0.4)}span{display:block;width:1.25rem;height:2px;background:white;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);border-radius:1px;position:relative}}}@media (max-width: 1200px){#menu-toggle:checked + .menu-toggle-label{border-color:var(--primary);background:rgba(228, 18, 111, 0.2);span{transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}span:nth-child(1){transform:translateY(7px) rotate(45deg)}span:nth-child(2){opacity:0;transform:scale(0)}span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}}#menu-toggle:checked ~ .menu-overlay{display:block;animation:fadeIn 0.3s ease}@keyframes fadeIn{from{opacity:0}to{opacity:1}}}}