:root {
  --void: #020409;
  --deep: #06091a;
  --red-primary: #ff3300;
  --red-glow: #ff550088;
  --red-dark: #1a0800;
  --red-mid: #8b1a00;
  --blue-primary: #00c8ff;
  --blue-glow: #00aaff88;
  --blue-dark: #00041a;
  --blue-mid: #003366;
  --copper: #b87333;
  --neon-green: #00ff44;
  --neon-cyan: #00ffff;
  --white: #ffffff;
  --text-dim: #88aacc;
  --font-title: 'Orbitron', monospace;
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: 'Rajdhani', sans-serif;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--white);
  font-family: var(--font-body);
  cursor: crosshair;
}


#bg-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}


.scene {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  z-index: 1;
}
.scene.active {
  opacity: 1;
  pointer-events: all;
}


#scene-intro { z-index: 10; background: var(--void); }

#particle-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.scanline-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,255,68,0.015) 2px,
    rgba(0,255,68,0.015) 4px
  );
  pointer-events: none;
  animation: scanMove 8s linear infinite;
}
@keyframes scanMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

.intro-content {
  position: relative;
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.intro-pre-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--neon-green);
  letter-spacing: 0.4em;
  opacity: 0.6;
  animation: blink 1.4s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.1; }
}


.glitch-title {
  font-family: var(--font-title);
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 900;
  letter-spacing: 0.25em;
  color: var(--white);
  position: relative;
  cursor: pointer;
  user-select: none;
  text-shadow:
    0 0 10px rgba(0,255,255,0.8),
    0 0 30px rgba(0,200,255,0.5),
    0 0 60px rgba(0,150,255,0.3),
    0 0 100px rgba(0,100,255,0.2);
  animation: titlePulse 3s ease-in-out infinite;
}
@keyframes titlePulse {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(0,255,255,0.8),
      0 0 30px rgba(0,200,255,0.5),
      0 0 60px rgba(0,150,255,0.3),
      0 0 100px rgba(0,100,255,0.2);
  }
  50% {
    text-shadow:
      0 0 20px rgba(0,255,255,1),
      0 0 50px rgba(0,200,255,0.8),
      0 0 100px rgba(0,150,255,0.5),
      0 0 150px rgba(0,100,255,0.3);
  }
}

.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.glitch-title::before {
  color: #ff0044;
  animation: glitch1 4s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.glitch-title::after {
  color: #00ffff;
  animation: glitch2 4s infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}
@keyframes glitch1 {
  0%, 90%, 100% { transform: translate(0); opacity: 0; }
  91% { transform: translate(-3px, 1px); opacity: 0.8; }
  93% { transform: translate(3px, -1px); opacity: 0.6; }
  95% { transform: translate(-2px, 2px); opacity: 0.9; }
  97% { transform: translate(2px); opacity: 0.7; }
}
@keyframes glitch2 {
  0%, 85%, 100% { transform: translate(0); opacity: 0; }
  86% { transform: translate(3px, -2px); opacity: 0.7; }
  88% { transform: translate(-3px, 1px); opacity: 0.5; }
  90% { transform: translate(2px, -1px); opacity: 0.8; }
  92% { transform: translate(-2px, 2px); opacity: 0.6; }
}

.glitch-title:hover {
  animation: titlePulse 1s ease-in-out infinite;
  transform: scale(1.02);
  transition: transform 0.2s;
}

.intro-sub-text {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.5em;
  color: var(--neon-cyan);
  opacity: 0.7;
  animation: fadeFlicker 2s ease-in-out infinite;
}
@keyframes fadeFlicker {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.3; }
  75% { opacity: 0.8; }
}


.pulse-ring {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(0,255,255,0.3);
  animation: pulseExpand 3s ease-out infinite;
}
.pulse-ring.delay1 { animation-delay: 1s; }
.pulse-ring.delay2 { animation-delay: 2s; }
@keyframes pulseExpand {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(4); opacity: 0; }
}


#scene-circuit {
  background: radial-gradient(ellipse at center, #000d00 0%, var(--void) 70%);
  z-index: 9;
  flex-direction: column;
}

.circuit-label {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--neon-green);
  opacity: 0.5;
}

#circuit-svg {
  width: 95vw;
  max-width: 1200px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(0,255,68,0.1));
}

#spark-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}


.server-led { animation: ledBlink 1s step-end infinite; }
@keyframes ledBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}


#scene-server {
  background: radial-gradient(ellipse at center, #020a20 0%, var(--void) 80%);
  z-index: 8;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

#server-canvas {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}

.server-ui {
  position: relative;
  width: 90%; max-width: 900px;
  margin-top: 40px;
  z-index: 2;
}

.server-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid #00ff4433;
  background: rgba(0,255,68,0.03);
  margin-bottom: 12px;
}

.server-id {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--neon-green);
  letter-spacing: 0.2em;
}

.server-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #00ff44;
  animation: blink 0.8s step-end infinite;
}


.server-rack-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.rack-unit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid #1a2a1a;
  background: linear-gradient(90deg, #050d05, #070f07);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.rack-unit::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,68,0.05), transparent);
  animation: rackScan 4s linear infinite;
}
@keyframes rackScan {
  0% { left: -100%; }
  100% { left: 200%; }
}

.rack-unit.active {
  border-color: #00ff44;
  background: linear-gradient(90deg, #051505, #0a200a);
  box-shadow: 0 0 20px rgba(0,255,68,0.2);
}

.rack-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rack-led.on { background: #00ff44; box-shadow: 0 0 6px #00ff44; }
.rack-led.pulse { background: #ffaa00; box-shadow: 0 0 6px #ffaa00; animation: ledBlink 0.5s ease infinite; }
.rack-led.flash { background: #ff4400; box-shadow: 0 0 10px #ff4400; animation: ledBlink 0.2s step-end infinite; }

.rack-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--neon-green);
  letter-spacing: 0.1em;
  flex: 1;
}

.rack-activity {
  width: 80px; height: 6px;
  background: #0a0a0a;
  border: 1px solid #1a2a1a;
  position: relative;
  overflow: hidden;
}
.rack-activity::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: #00ff44;
  animation: activityBar 2s ease-in-out infinite;
}
@keyframes activityBar {
  0%, 100% { width: 15%; }
  50% { width: 85%; }
}


.fiber-lines-container {
  width: 100%;
  height: 200px;
  margin-bottom: 12px;
  border: 1px solid #0a1a2a;
  background: rgba(0,8,30,0.6);
  overflow: hidden;
  position: relative;
}

#fiber-svg { width: 100%; height: 100%; }


.server-readout {
  padding: 10px 16px;
  border: 1px solid #0a1a0a;
  background: rgba(0,5,0,0.8);
  height: 80px;
  overflow: hidden;
}

#server-log {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--neon-green);
  line-height: 1.6;
  opacity: 0.8;
}


#scene-explosion {
  z-index: 7;
  background: var(--void);
}

#explosion-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.stream-labels {
  position: absolute;
  bottom: 15%;
  width: 80%;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none;
}

.stream-label {
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}
.stream-label span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  margin-top: 6px;
  opacity: 0.7;
}
.stream-label.red { color: #ff4400; text-shadow: 0 0 20px #ff440088; }
.stream-label.blue { color: #00c8ff; text-shadow: 0 0 20px #00aaff88; }
.stream-label.show { opacity: 1; transform: translateY(0); }


#scene-portal {
  z-index: 5;
  background: var(--void);
  flex-direction: column;
  overflow: hidden;
  align-items: stretch;
  justify-content: flex-start;
}


#main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 30px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(2,4,9,0.9);
  backdrop-filter: blur(10px);
  z-index: 20;
  position: relative;
  flex-shrink: 0;
}

.nav-logo {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--white);
  text-shadow: 0 0 20px rgba(0,200,255,0.6);
}

.nav-links { display: flex; gap: 24px; }

.nav-link {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: all 0.3s;
}
.nav-link:hover, .nav-link.active { color: var(--white); border-color: var(--white); }
.nav-link.red-link:hover, .nav-link.red-link.active { color: var(--red-primary); border-color: var(--red-primary); }
.nav-link.blue-link:hover, .nav-link.blue-link.active { color: var(--blue-primary); border-color: var(--blue-primary); }

.nav-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--neon-green);
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
  animation: ledBlink 1s ease infinite;
}


#portal-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}


.portal-panel {
  flex: 1;
  flex-grow: 1; 
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.portal-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.25;
}

.portal-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}


.red-panel {
  background: linear-gradient(180deg, #0d0200 0%, #1a0400 30%, #0d0200 100%);
  border-right: 1px solid rgba(255,51,0,0.2);
}

.red-overlay {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,51,0,0.05) 0%, transparent 60%),
    repeating-linear-gradient(
      0deg, transparent, transparent 40px,
      rgba(255,51,0,0.02) 40px, rgba(255,51,0,0.02) 41px
    ),
    repeating-linear-gradient(
      90deg, transparent, transparent 60px,
      rgba(255,51,0,0.015) 60px, rgba(255,51,0,0.015) 61px
    );
}


.blue-panel {
  background: linear-gradient(180deg, #00020d 0%, #000418 30%, #00020d 100%);
  border-left: 1px solid rgba(0,200,255,0.2);
}

.blue-overlay {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,150,255,0.05) 0%, transparent 60%);
}


.panel-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.panel-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}
.red-panel .panel-icon { color: var(--red-primary); text-shadow: 0 0 15px var(--red-primary); }
.blue-panel .panel-icon { color: var(--blue-primary); text-shadow: 0 0 15px var(--blue-primary); }

.panel-title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  line-height: 1;
}
.red-panel .panel-title { color: var(--red-primary); text-shadow: 0 0 20px rgba(255,51,0,0.5); }
.blue-panel .panel-title { color: var(--blue-primary); text-shadow: 0 0 20px rgba(0,200,255,0.5); }

.panel-subtitle {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  margin-top: 3px;
  opacity: 0.5;
}

.panel-stats { margin-left: auto; }
.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-mono);
}
.stat span { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.stat small { font-size: 0.55rem; letter-spacing: 0.15em; opacity: 0.5; }
.red-panel .stat span { color: var(--red-primary); }
.blue-panel .stat span { color: var(--blue-primary); }


.graph-decoration {
  height: 50px;
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
  opacity: 0.6;
}
#finance-graph { width: 100%; height: 100%; }


#matrix-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.08;
  z-index: 1;
}


.cards-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 2;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cards-container::-webkit-scrollbar { width: 3px; }
.cards-container::-webkit-scrollbar-track { background: transparent; }
.red-panel .cards-container::-webkit-scrollbar-thumb { background: var(--red-primary); }
.blue-panel .cards-container::-webkit-scrollbar-thumb { background: var(--blue-primary); }


.blog-card {
  padding: 16px;
  border: 1px solid transparent;
  position: relative;
  cursor: pointer;
  
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-30px);
}

.blog-card.visible {
  opacity: 1;
  transform: translateX(0);
}

.blog-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.blog-card:hover::before { opacity: 1; }

.red-card {
  background: rgba(30,5,0,0.6);
  border-color: rgba(255,51,0,0.15);
}
.red-card::before { background: rgba(255,51,0,0.05); }
.red-card:hover { border-color: rgba(255,51,0,0.5); box-shadow: 0 0 20px rgba(255,51,0,0.1); }

.blue-card {
  background: rgba(0,5,30,0.6);
  border-color: rgba(0,200,255,0.15);
}
.blue-card::before { background: rgba(0,200,255,0.05); }
.blue-card:hover { border-color: rgba(0,200,255,0.5); box-shadow: 0 0 20px rgba(0,200,255,0.1); }

.card-category-tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  padding: 2px 6px;
  display: inline-block;
  margin-bottom: 8px;
}
.red-card .card-category-tag { color: var(--red-primary); border: 1px solid rgba(255,51,0,0.4); }
.blue-card .card-category-tag { color: var(--blue-primary); border: 1px solid rgba(0,200,255,0.4); }

.card-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255,255,255,0.9);
  margin-bottom: 6px;
  transition: color 0.3s;
}
.red-card:hover .card-title { color: #ffaa88; }
.blue-card:hover .card-title { color: #88ddff; }

.card-excerpt {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-author {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  opacity: 0.4;
}

.card-read-btn {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  padding: 3px 8px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.red-card .card-read-btn { color: var(--red-primary); border-color: rgba(255,51,0,0.4); }
.red-card .card-read-btn:hover { background: rgba(255,51,0,0.15); }
.blue-card .card-read-btn { color: var(--blue-primary); border-color: rgba(0,200,255,0.4); }
.blue-card .card-read-btn:hover { background: rgba(0,200,255,0.15); }


.blog-card::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0;
  transition: none;
}
.blog-card:hover::after {
  animation: cardScan 0.6s linear;
}
@keyframes cardScan {
  0% { top: -5%; opacity: 0.4; }
  100% { top: 105%; opacity: 0; }
}


#center-divider {
  width: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  z-index: 5;
  position: relative;
}
.divider-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.1), transparent);
}
.divider-core {
  padding: 10px 0;
  font-size: 1.2rem;
  color: rgba(255,255,255,0.2);
  text-shadow: 0 0 10px rgba(255,255,255,0.4);
  animation: dividerPulse 2s ease-in-out infinite;
}
@keyframes dividerPulse {
  0%, 100% { color: rgba(255,255,255,0.2); }
  50% { color: rgba(255,255,255,0.6); }
}


.panel-footer {
  height: 20px;
  position: relative;
  z-index: 2;
  margin-top: 8px;
  opacity: 0.3;
}
.footer-grid-lines {
  background: repeating-linear-gradient(
    90deg,
    var(--red-primary) 0px, var(--red-primary) 2px,
    transparent 2px, transparent 20px
  );
  height: 100%;
}
.footer-circuit {
  background: repeating-linear-gradient(
    90deg,
    var(--blue-primary) 0px, var(--blue-primary) 2px,
    transparent 2px, transparent 20px
  );
  height: 100%;
}


#loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2,4,9,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 30;
  transition: opacity 0.5s;
}
#loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-spinner {
  width: 40px; height: 40px;
  border: 2px solid rgba(0,200,255,0.1);
  border-top-color: var(--blue-primary);
  border-right-color: var(--red-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-text {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  animation: blink 1s step-end infinite;
}


.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.modal.open {
  opacity: 1;
  pointer-events: all;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  background: #06091a;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 40px;
  box-shadow: 0 0 80px rgba(0,0,0,0.8);
  transform: translateY(20px);
  transition: transform 0.4s;
}
.modal.open .modal-content { transform: translateY(0); }

.modal-content::-webkit-scrollbar { width: 3px; }
.modal-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }

.modal-close {
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.modal-close:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }

.modal-category {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  margin-bottom: 12px;
}

.modal-title {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 12px;
}

.modal-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  opacity: 0.4;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.modal-body {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.65);
}


@media (max-width: 768px) {
  #portal-container { flex-direction: column; }
  #center-divider { width: 100%; height: 2px; flex-direction: row; }
  .glitch-title { font-size: 3.5rem; }
  .panel-title { font-size: 1rem; }
  #main-nav { padding: 10px 16px; }
  .nav-links { gap: 12px; }
  .nav-link { font-size: 0.6rem; }
  .modal-content { padding: 24px 20px; }
}


.hidden { display: none !important; }
.invisible { opacity: 0; pointer-events: none; }


.cursor-spark {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 6px var(--neon-cyan);
  animation: sparkFade 0.6s ease-out forwards;
}
@keyframes sparkFade {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(0) translate(var(--dx), var(--dy)); opacity: 0; }
}


.no-posts-msg {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.15);
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed rgba(255,255,255,0.06);
  margin: 20px 0;
}


#dragon-eye-overlay {
  
  user-select: none;
  -webkit-user-select: none;
}


#dragon-eye-overlay canvas {
  cursor: none;
}


#dragon-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 5100;
  width: 8px; height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: transform .1s;
}