html {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="none" stroke="%2300ff66" stroke-width="2" d="M16 0v32M0 16h32"/></svg>') 16 16, auto;
}
:root{
  --matrix-green: #00ff66;
}


.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:8px;
  border-radius:8px;
  color:var(--matrix-green);
}


.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  color:var(--matrix-green);
  cursor:pointer;
  padding:6px 8px;
  border-radius:8px;
  font-size:16px;
}


[data-theme="light"]{
  --bg: #f6f7fb;
  --matrix-dark: #e6eef9;
  --matrix-green: #0077cc;
  --glass: rgba(255,255,255,0.8);
}

[data-theme="light"] html, [data-theme="light"] body{
  background: var(--bg) !important;
  color: #0b344c !important;
}

[data-theme="light"] .navbar{
  background: rgba(255,255,255,0.9) !important;
  border-bottom-color: rgba(0,0,0,0.06) !important;
  box-shadow: 0 6px 18px rgba(20,20,20,0.06) !important;
}

[data-theme="light"] .mobile-menu{ background: rgba(255,255,255,0.96) !important; }

[data-theme="light"] .clock,
[data-theme="light"] .project-card,
[data-theme="light"] .empty-state,
[data-theme="light"] .ip-footer,
[data-theme="light"] .banner,
[data-theme="light"] .page-header{
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.86)) !important;
  box-shadow: 0 8px 30px rgba(10,20,30,0.04) !important;
  border-color: rgba(0,0,0,0.06) !important;
  color: #033047 !important;
}

[data-theme="light"] .navbar-menu a,
[data-theme="light"] .mobile-menu a{
  color: rgba(0,60,90,0.9) !important;
  text-shadow:none !important;
}

[data-theme="light"] .btn{
  background: linear-gradient(90deg, rgba(0,119,204,0.12), rgba(0,119,204,0.06));
  color: #00334a;
  border-color: rgba(0,119,204,0.15);
  box-shadow: 0 10px 30px rgba(0,50,70,0.06) !important;
}

[data-theme="light"] .hint, [data-theme="light"] .click-counter{ color: rgba(0,60,90,0.9); background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.04); }

.menu-toggle .hamburger,
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after{
  display:block;
  width:22px;
  height:2px;
  background: var(--matrix-green);
  border-radius:2px;
  position:relative;
  transition: transform 300ms ease, opacity 200ms ease;
}

.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after{
  content:'';
  position:absolute;
  left:0;
}

.menu-toggle .hamburger::before{ top:-7px; }
.menu-toggle .hamburger::after{ top:7px; }

.menu-toggle[aria-expanded="true"] .hamburger{ background: transparent; }
.menu-toggle[aria-expanded="true"] .hamburger::before{ transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .hamburger::after{ transform: translateY(-7px) rotate(-45deg); }


.mobile-menu{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background: rgba(1,3,1,0.92);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translateY(-8%);
  opacity:0;
  visibility:hidden;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 300ms ease;
}

.mobile-menu.open{
  transform: translateY(0);
  opacity:1;
  visibility:visible;
}

.mobile-menu ul{ list-style:none; padding:0; margin:0; text-align:center; }
.mobile-menu li{ margin:12px 0; }
.mobile-menu a{
  color: var(--matrix-green);
  font-size: clamp(20px, 5vw, 34px);
  text-decoration:none;
  display:inline-block;
  opacity:0;
  transform: translateY(16px) scale(0.98);
  transition: transform 360ms cubic-bezier(.2,.9,.2,1), opacity 300ms ease;
  text-shadow: 0 0 10px rgba(0,255,102,0.18);
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.mobile-menu.open a{ opacity:1; transform: translateY(0) scale(1); }

.mobile-menu ul li:nth-child(1) a{ transition-delay: 80ms; }
.mobile-menu ul li:nth-child(2) a{ transition-delay: 160ms; }
.mobile-menu ul li:nth-child(3) a{ transition-delay: 240ms; }
.mobile-menu ul li:nth-child(4) a{ transition-delay: 320ms; }

@media (max-width:900px){
  .navbar-menu{ display:none !important; }
  .menu-toggle{ display:inline-flex; align-items:center; }
}


.animated-fade{
  opacity:0;
  transform: translateY(6px);
  animation: page-fade 540ms cubic-bezier(.2,.9,.2,1) 120ms forwards;
}

@keyframes page-fade{
  to{ opacity:1; transform: translateY(0); }
}


@keyframes pop-in{
  from{ opacity:0; transform: translateY(8px) scale(0.98); }
  to  { opacity:1; transform: translateY(0) scale(1); }
}

.btn{
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms cubic-bezier(.2,.9,.2,1), background 220ms ease;
  transform-origin: center;
  animation: pop-in 420ms cubic-bezier(.2,.9,.2,1) 200ms forwards;
  background: linear-gradient(90deg, rgba(0,255,102,0.06), rgba(0,255,102,0.02));
  border: 1px solid rgba(0,255,102,0.18);
  color: var(--matrix-green);
  box-shadow: 0 6px 24px rgba(0,255,102,0.06), 0 0 18px rgba(0,255,102,0.03) inset;
  text-shadow: 0 0 6px rgba(0,255,102,0.06);
  backdrop-filter: blur(6px);
}

.btn:hover,
.btn:focus{
  transform: translateY(-4px) scale(1.02);
  background: linear-gradient(90deg, rgba(0,255,102,0.12), rgba(0,255,102,0.06));
  box-shadow: 0 10px 40px rgba(0,255,102,0.18), 0 0 40px rgba(0,255,102,0.12) inset;
  outline: none;
}

.btn:focus{
  box-shadow: 0 10px 40px rgba(0,255,102,0.22), 0 0 8px rgba(0,255,102,0.25);
  border-color: rgba(0,255,102,0.6);
}

.project-card{
  opacity:0;
  transform: translateY(10px) scale(0.995);
  animation: pop-in 420ms cubic-bezier(.2,.9,.2,1) 140ms forwards;
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.projects-grid .project-card:nth-child(1){ animation-delay: 120ms; }
.projects-grid .project-card:nth-child(2){ animation-delay: 200ms; }
.projects-grid .project-card:nth-child(3){ animation-delay: 280ms; }
.projects-grid .project-card:nth-child(4){ animation-delay: 360ms; }
.projects-grid .project-card:nth-child(5){ animation-delay: 440ms; }

.empty-state{
  opacity:0;
  transform: translateY(8px);
  animation: pop-in 420ms cubic-bezier(.2,.9,.2,1) 180ms forwards;
}

.project-card:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 18px 60px rgba(0,255,102,0.08), 0 0 40px rgba(0,255,102,0.06) inset;
  border-color: rgba(0,255,102,0.26);
}


.navbar-content{
  opacity:0;
  transform: translateY(-6px);
  animation: page-fade 420ms cubic-bezier(.2,.9,.2,1) 80ms forwards;
}

.navbar-menu li a{
  opacity:0;
  transform: translateY(-6px);
  animation: pop-in 380ms cubic-bezier(.2,.9,.2,1) forwards;
  transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
  color: rgba(160,255,190,0.85);
  text-shadow: 0 0 6px rgba(0,255,102,0.06);
}
.navbar-menu li:nth-child(1) a{ animation-delay: 160ms; }
.navbar-menu li:nth-child(2) a{ animation-delay: 220ms; }
.navbar-menu li:nth-child(3) a{ animation-delay: 280ms; }

.navbar-menu li a:hover,
.navbar-menu li a:focus{
  color: var(--matrix-green);
  transform: translateY(-2px);
  text-shadow: 0 0 14px rgba(0,255,102,0.28);
}

.menu-toggle:hover .hamburger,
.menu-toggle:focus .hamburger{
  box-shadow: 0 0 18px rgba(0,255,102,0.18);
}

@media (prefers-reduced-motion: reduce){
  .btn, .project-card, .empty-state, .navbar-content, .navbar-menu li a{ animation: none !important; opacity:1 !important; transform:none !important; }
}


.error-404{
  color: #ff6b6b;
  text-shadow: 0 0 8px rgba(255,106,106,0.95), 0 0 24px rgba(255,60,60,0.6);
  transition: text-shadow 220ms ease, transform 220ms ease;
}

.glow-red{
  animation: red-pulse 1s ease-in-out infinite;
}

@keyframes red-pulse{
  0%{ text-shadow: 0 0 6px rgba(255,90,90,0.6), 0 0 18px rgba(255,40,40,0.25); transform: scale(1); }
  50%{ text-shadow: 0 0 20px rgba(255,110,110,0.98), 0 0 44px rgba(255,60,60,0.6); transform: scale(1.035); }
  100%{ text-shadow: 0 0 6px rgba(255,90,90,0.6), 0 0 18px rgba(255,40,40,0.25); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .glow-red{ animation: none !important; }
}


.ip-footer{
  position:fixed;
  right:12px;
  bottom:12px;
  z-index:6;
  background: rgba(0,0,0,0.32);
  color: rgba(220,220,220,0.95);
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  pointer-events: auto;
}

.ip-footer small{
  display:block;
  font-size:11px;
  color: rgba(160,160,160,0.9);
  margin-top:4px;
}

@media (max-width:640px){
  .ip-footer{ right:8px; left:8px; text-align:center; }
}