/* ============================================================================
 * PurpleSec � Custom Styles
 * Premium cybersecurity-themed design system
 * Inspired by hacker.house terminal aesthetic
 * ============================================================================ */

/* --------------------------------------------------------------------------
 * CSS Custom Properties
 * -------------------------------------------------------------------------- */
:root {
  --ps-purple-50: #f3e5f5;
  --ps-purple-100: #e1bee7;
  --ps-purple-200: #ce93d8;
  --ps-purple-300: #ba68c8;
  --ps-purple-400: #ab47bc;
  --ps-purple-500: #9c27b0;
  --ps-purple-600: #8e24aa;
  --ps-purple-700: #7b1fa2;
  --ps-purple-800: #6a1b9a;
  --ps-purple-900: #4a148c;

  --ps-accent: #bb86fc;
  --ps-accent-glow: rgba(187, 134, 252, 0.4);
  --ps-neon: #e040fb;
  --ps-neon-green: #00ff66;
  --ps-cyber-green: #00e676;
  --ps-green: #00ff66;
  --ps-dark-bg: #0d1117;
  --ps-dark-surface: #161b22;
  --ps-dark-border: #30363d;
  --ps-dark-text: #c9d1d9;
  --ps-terminal-bg: #0a0e14;

  --ps-hero-gradient: linear-gradient(135deg, rgba(5,8,13,0.7) 0%, rgba(13,5,32,0.7) 30%, rgba(21,10,48,0.7) 60%, rgba(5,8,13,0.7) 100%);
  --ps-card-bg: rgba(255, 255, 255, 0.03);
  --ps-card-border: rgba(187, 134, 252, 0.12);
  --ps-glow-sm: 0 0 15px rgba(187, 134, 252, 0.15);
  --ps-glow-md: 0 0 30px rgba(187, 134, 252, 0.25);
  --ps-glow-lg: 0 0 60px rgba(187, 134, 252, 0.2);
  --ps-glow-green-sm: 0 0 15px rgba(0, 255, 102, 0.15);
  --ps-glow-green-md: 0 0 30px rgba(0, 255, 102, 0.25);

  --ps-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ps-transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}



/* --------------------------------------------------------------------------
 * Global Typography & Spacing Improvements
 * -------------------------------------------------------------------------- */
body, .md-typeset {
  line-height: 1.65;
  letter-spacing: 0.015em;
}

/* --------------------------------------------------------------------------
 * Keyframe Animations
 * -------------------------------------------------------------------------- */
@keyframes ps-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes ps-pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(187, 134, 252, 0.1); }
  50% { box-shadow: 0 0 40px rgba(187, 134, 252, 0.35); }
}

@keyframes ps-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes ps-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ps-fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ps-fade-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ps-fade-in-scale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ps-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ps-glitch-1 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 2px); }
  40% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -1px); }
  60% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 1px); }
  80% { clip-path: inset(10% 0 70% 0); transform: translate(2px, -2px); }
}

@keyframes ps-glitch-2 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(70% 0 5% 0); transform: translate(3px, -2px); }
  40% { clip-path: inset(10% 0 60% 0); transform: translate(-3px, 1px); }
  60% { clip-path: inset(50% 0 20% 0); transform: translate(2px, -1px); }
  80% { clip-path: inset(30% 0 40% 0); transform: translate(-2px, 2px); }
}

@keyframes ps-typing-cursor {
  0%, 100% { border-right-color: var(--ps-neon-green); }
  50% { border-right-color: transparent; }
}

@keyframes ps-scan-line {
  0% { top: -10%; }
  100% { top: 110%; }
}

@keyframes ps-border-glow-pulse {
  0%, 100% { border-color: rgba(187, 134, 252, 0.12); }
  50% { border-color: rgba(187, 134, 252, 0.35); }
}

@keyframes ps-counter-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes ps-scroll-down-bounce {
  0%, 100% { transform: translateY(0) translateX(-50%); opacity: 1; }
  50% { transform: translateY(12px) translateX(-50%); opacity: 0.5; }
}

@keyframes ps-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --------------------------------------------------------------------------
 * Scroll Reveal (elements start hidden, JS reveals them)
 * -------------------------------------------------------------------------- */
.ps-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-reveal.ps-revealed {
  opacity: 1;
  transform: translateY(0);
}

.ps-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-reveal-left.ps-revealed {
  opacity: 1;
  transform: translateX(0);
}

.ps-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-reveal-right.ps-revealed {
  opacity: 1;
  transform: translateX(0);
}

.ps-reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-reveal-scale.ps-revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for grid children */
.ps-stagger-1 { transition-delay: 0.05s; }
.ps-stagger-2 { transition-delay: 0.15s; }
.ps-stagger-3 { transition-delay: 0.25s; }
.ps-stagger-4 { transition-delay: 0.35s; }

/* --------------------------------------------------------------------------
 * Matrix Rain Canvas
 * -------------------------------------------------------------------------- */
#ps-matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
}

/* --------------------------------------------------------------------------
 * Hero Section
 * -------------------------------------------------------------------------- */
.ps-hero-content {
  position: relative;
  z-index: 3;
  max-width: 100%;
  background: transparent;
  padding: 3rem 2rem 5rem;
  margin: -0.6rem auto 0;
  text-align: center;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Scroll indicator arrow */
.ps-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  animation: ps-scroll-down-bounce 2s ease-in-out infinite;
  opacity: 0.6;
  color: var(--ps-accent);
  font-size: 1.5rem;
  cursor: pointer;
  text-decoration: none !important;
}

/* Shield icon */
.ps-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--ps-purple-700), var(--ps-purple-900));
  margin-bottom: 2rem;
  animation: ps-float 6s ease-in-out infinite, ps-pulse-glow 4s ease-in-out infinite;
  font-size: 3rem;
  line-height: 1;
  border: 1px solid rgba(187, 134, 252, 0.2);
}

/* Title with glitch effect */
.ps-hero-title {
  font-size: clamp(2.8rem, 7vw, 4.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ffffff 0%, var(--ps-accent) 50%, var(--ps-neon) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ps-shimmer 4s linear infinite;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  border: none !important;
  position: relative;
}

/* Glitch layers */
.ps-glitch-wrap {
  position: relative;
  display: inline-block;
}

.ps-glitch-wrap::before,
.ps-glitch-wrap::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.ps-glitch-wrap::before {
  color: var(--ps-neon);
  animation: ps-glitch-1 5s infinite linear;
  opacity: 0.15;
}

.ps-glitch-wrap::after {
  color: var(--ps-neon-green);
  animation: ps-glitch-2 5s infinite linear;
  animation-delay: 0.15s;
  opacity: 0.1;
}

/* Terminal-style command prompt */
.ps-hero-terminal {
  max-width: 100%;
  margin: 0 auto 3rem;
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ps-card-border);
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 15px 35px rgba(0,0,0,0.4), var(--ps-glow-sm);
  flex-shrink: 0;
}

.ps-terminal-header {
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ps-card-border);
}

.ps-terminal-buttons {
  display: flex;
  gap: 8px;
}

.ps-term-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.ps-term-close { background: #ff5f57; }
.ps-term-min { background: #ffbd2e; }
.ps-term-max { background: #28c840; }

.ps-terminal-header-title {
  flex: 1;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-left: -52px; /* Offset to center title */
}

.ps-terminal-window {
  padding: 1.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #c9d1d9;
  min-height: 180px;
}

.ps-prompt-user { color: var(--ps-neon-green); font-weight: 600; }
.ps-prompt-at { color: #c9d1d9; }
.ps-prompt-host { color: var(--ps-accent); font-weight: 600; }
.ps-prompt-path { color: #64b5f6; font-weight: 600; }

.ps-cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--ps-neon-green);
  vertical-align: text-bottom;
  animation: ps-cursor-blink 1s step-end infinite;
  margin-left: 4px;
}

@keyframes ps-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.ps-terminal-output {
  margin-top: 1rem;
  color: rgba(201, 209, 217, 0.85);
}

.ps-terminal-input {
  background: transparent;
  border: none;
  color: #c9d1d9;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  flex: 1;
  outline: none;
  padding: 0;
  margin: 0;
  caret-color: var(--ps-neon-green);
}

.ps-term-success { color: var(--ps-neon-green); }
.ps-term-info { color: #64b5f6; }
.ps-term-warning { color: #ffbd2e; }

/* Typing effect tagline */
.ps-hero-tagline {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  color: var(--ps-neon-green);
  font-weight: 600;
  margin-bottom: 1rem;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.05em;
  min-height: 2.2em;
  display: inline-block;
}

.ps-hero-tagline .ps-typed-text {
  border-right: 2px solid var(--ps-neon-green);
  padding-right: 4px;
  animation: ps-typing-cursor 0.8s infinite;
}

.ps-hero-desc {
  font-size: 1.1rem;
  color: var(--ps-dark-text);
  line-height: 1.8;
  max-width: 620px;
  margin: 0.5rem auto 2.5rem;
  opacity: 0.85;
}

/* Hero CTA Buttons */
.ps-hero-actions {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.ps-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2.2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: var(--ps-transition);
  position: relative;
  overflow: hidden;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ps-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s;
}

.ps-btn:hover::before {
  left: 100%;
}

.ps-btn-primary {
  background: linear-gradient(135deg, var(--ps-purple-600), var(--ps-purple-800));
  color: #fff !important;
  box-shadow: var(--ps-glow-sm);
  border: 1px solid rgba(187, 134, 252, 0.3);
}

.ps-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--ps-glow-md);
  background: linear-gradient(135deg, var(--ps-purple-500), var(--ps-purple-700));
  border-color: var(--ps-accent);
}

.ps-btn-secondary {
  background: rgba(0, 255, 102, 0.06);
  color: var(--ps-neon-green) !important;
  border: 1px solid rgba(0, 255, 102, 0.25);
}

.ps-btn-secondary:hover {
  background: rgba(0, 255, 102, 0.12);
  border-color: var(--ps-neon-green);
  transform: translateY(-3px);
  box-shadow: var(--ps-glow-green-sm);
}

/* --------------------------------------------------------------------------
 * Stats Section
 * -------------------------------------------------------------------------- */
.ps-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  padding: 2.5rem 0;
  margin: 0 auto;
  max-width: 100%;
}

.ps-stat-card {
  text-align: center;
  padding: 1.75rem 1rem;
  background: var(--ps-card-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 12px;
  transition: var(--ps-transition);
  position: relative;
  overflow: hidden;
}

/* Terminal-style top bar on stat cards */
.ps-stat-card::before {
  content: "? ? ?";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 4px 10px;
  font-size: 7px;
  letter-spacing: 3px;
  color: rgba(187, 134, 252, 0.3);
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--ps-card-border);
}

.ps-stat-card:hover {
  border-color: var(--ps-accent);
  box-shadow: var(--ps-glow-sm);
  transform: translateY(-6px);
}

.ps-stat-number {
  font-size: 2.4rem;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
  background: linear-gradient(135deg, var(--ps-accent), var(--ps-neon));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  margin-top: 0.5rem;
}

.ps-stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
  opacity: 0.6;
  font-weight: 600;
  font-family: "JetBrains Mono", monospace;
}

/* --------------------------------------------------------------------------
 * Section Headings
 * -------------------------------------------------------------------------- */
.ps-section-title {
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  text-align: center;
  margin: 3.5rem 0 0.5rem !important;
  position: relative;
  padding-bottom: 0 !important;
  border: none !important;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: -0.01em;
}

.ps-section-subtitle {
  text-align: center;
  opacity: 0.6;
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.ps-section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--ps-neon-green), var(--ps-accent));
  border-radius: 3px;
  margin: 0.75rem auto 0;
  border: none;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.3);
}

/* --------------------------------------------------------------------------
 * Terminal Window Cards
 * -------------------------------------------------------------------------- */
.ps-terminal-card {
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 12px;
  overflow: hidden;
  transition: var(--ps-transition);
  position: relative;
}

.ps-terminal-card:hover {
  border-color: var(--ps-accent);
  box-shadow: var(--ps-glow-sm);
  transform: translateY(-5px);
}

.ps-terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--ps-card-border);
}

.ps-terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ps-terminal-dot--red { background: #ff5f57; }
.ps-terminal-dot--yellow { background: #ffbd2e; }
.ps-terminal-dot--green { background: #28c840; }

.ps-terminal-title {
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  font-family: "JetBrains Mono", monospace;
  color: rgba(187, 134, 252, 0.5);
  letter-spacing: 0.05em;
}

.ps-terminal-body {
  padding: 1.75rem;
}

/* --------------------------------------------------------------------------
 * Content Cards (overrides for grid cards on home page)
 * -------------------------------------------------------------------------- */
.ps-home .md-typeset .grid.cards > ol > li,
.ps-home .md-typeset .grid.cards > ul > li {
  border: 1px solid var(--ps-card-border) !important;
  border-radius: 12px !important;
  padding: 1.75rem !important;
  background: var(--ps-terminal-bg) !important;
  transition: var(--ps-transition) !important;
  position: relative;
  overflow: hidden;
}

/* Terminal dot bar on content cards */
.ps-home .md-typeset .grid.cards > ol > li::before,
.ps-home .md-typeset .grid.cards > ul > li::before {
  content: "? ? ?";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 5px 12px;
  font-size: 7px;
  letter-spacing: 3px;
  color: rgba(255, 95, 87, 0.5);
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--ps-card-border);
  z-index: 1;
}

.ps-home .md-typeset .grid.cards > ol > li,
.ps-home .md-typeset .grid.cards > ul > li {
  padding-top: 2.5rem !important;
}

.ps-home .md-typeset .grid.cards > ol > li:hover,
.ps-home .md-typeset .grid.cards > ul > li:hover {
  border-color: var(--ps-accent) !important;
  box-shadow: var(--ps-glow-sm);
  transform: translateY(-6px);
}

/* Green glow border on hover */
.ps-home .md-typeset .grid.cards > ol > li::after,
.ps-home .md-typeset .grid.cards > ul > li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ps-neon-green), var(--ps-accent), var(--ps-neon));
  opacity: 0;
  transition: var(--ps-transition);
}

.ps-home .md-typeset .grid.cards > ol > li:hover::after,
.ps-home .md-typeset .grid.cards > ul > li:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
 * Featured Card
 * -------------------------------------------------------------------------- */
.ps-featured {
  position: relative;
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 12px;
  padding: 0;
  margin: 2rem 0;
  overflow: hidden;
  transition: var(--ps-transition);
}

.ps-featured-inner {
  padding: 2rem 2.5rem;
}

/* Terminal bar on featured card */
.ps-featured::before {
  content: "";
  display: block;
  padding: 0;
}

.ps-featured-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--ps-card-border);
}

.ps-featured:hover {
  border-color: var(--ps-neon-green);
  box-shadow: var(--ps-glow-green-sm);
}

.ps-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ps-neon-green);
  background: rgba(0, 255, 102, 0.08);
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 255, 102, 0.2);
  margin-bottom: 1rem;
  font-family: "JetBrains Mono", monospace;
}

.ps-featured h3 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  margin: 0.75rem 0 !important;
}

.ps-featured-meta {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-size: 0.82rem;
  opacity: 0.6;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace;
}

.ps-featured-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Matrix table styles removed */

/* --------------------------------------------------------------------------
 * Certification Progress
 * -------------------------------------------------------------------------- */
.ps-cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.ps-cert-card {
  text-align: center;
  padding: 0;
  border: 1px solid var(--ps-card-border);
  border-radius: 12px;
  background: var(--ps-terminal-bg);
  transition: var(--ps-transition);
  position: relative;
  overflow: hidden;
}

.ps-cert-card-inner {
  padding: 1.5rem 1rem;
}

.ps-cert-card:hover {
  border-color: var(--ps-accent);
  box-shadow: var(--ps-glow-sm);
  transform: translateY(-5px);
}

.ps-cert-card--certified {
  border-color: rgba(0, 255, 102, 0.25);
}

.ps-cert-card--certified:hover {
  border-color: var(--ps-neon-green);
  box-shadow: var(--ps-glow-green-sm);
}

/* Terminal bar */
.ps-cert-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--ps-card-border);
}

.ps-cert-name {
  font-size: 1.4rem;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
  margin: 0.75rem 0 0.25rem;
}

.ps-cert-full {
  font-size: 0.75rem;
  opacity: 0.5;
  line-height: 1.4;
}

.ps-cert-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  margin-top: 0.75rem;
  font-family: "JetBrains Mono", monospace;
}

.ps-cert-status--certified {
  color: var(--ps-neon-green);
  background: rgba(0, 255, 102, 0.08);
  border: 1px solid rgba(0, 255, 102, 0.2);
}

.ps-cert-status--progress {
  color: var(--ps-accent);
  background: rgba(187, 134, 252, 0.08);
  border: 1px solid rgba(187, 134, 252, 0.2);
}

.ps-cert-status--preparing {
  color: #ffa726;
  background: rgba(255, 167, 38, 0.08);
  border: 1px solid rgba(255, 167, 38, 0.2);
}

/* --------------------------------------------------------------------------
 * Terminal Dashboard (Blog & Quotes)
 * -------------------------------------------------------------------------- */
.ps-terminal-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 3rem 0;
}

.ps-dashboard-terminal {
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(187, 134, 252, 0.2);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

.ps-dashboard-terminal-content {
  padding: 1.5rem 2rem;
  font-family: "JetBrains Mono", monospace;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Terminal Feed Styles */
.ps-term-cmd {
  color: var(--ps-accent);
  margin-bottom: 1.25rem;
  font-weight: bold;
  font-size: 1rem;
  word-break: break-word;
}

.ps-term-feed {
  display: flex;
  flex-direction: column;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.ps-term-feed::-webkit-scrollbar {
  width: 6px;
}

.ps-term-feed::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.ps-term-feed::-webkit-scrollbar-thumb {
  background: rgba(187, 134, 252, 0.3);
  border-radius: 3px;
}

.ps-term-feed::-webkit-scrollbar-thumb:hover {
  background: rgba(187, 134, 252, 0.6);
}

.ps-term-feed-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: all 0.2s ease;
  padding: 0.5rem 0;
  font-size: 0.85rem;
}

.ps-term-feed-item:last-child {
  border-bottom: none !important;
}

.ps-term-feed-item:hover {
  background: rgba(187, 134, 252, 0.03);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 4px;
}

.ps-term-feed-date {
  color: var(--ps-green);
  min-width: 130px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.ps-term-feed-title {
  color: #e0e0e0;
  line-height: 1.4;
  text-decoration: none !important;
}

.ps-term-feed-item:hover .ps-term-feed-title {
  color: #ffffff;
  text-decoration: none !important;
}

.ps-term-cursor {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background: var(--ps-green);
  animation: ps-blink 1s step-end infinite;
  margin-top: 1rem;
}

/* Adjusting Quote inside Terminal */
.ps-quote-terminal .ps-quote {
  padding: 1rem 0;
  margin: 0;
  background: transparent;
  border-top: none;
  box-shadow: none;
}
.ps-quote-terminal .ps-quote::before {
  display: none;
}
.ps-quote-terminal .ps-quote blockquote {
  font-size: 1.2rem;
  color: var(--ps-green);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
 * Philosophy / Quote (Legacy overrides)
 * -------------------------------------------------------------------------- */
.ps-quote {
  position: relative;
  text-align: center;
  padding: 4rem 2rem;
  margin: 3rem -0.6rem -0.6rem;
  background: linear-gradient(135deg, #05080d, #0d0520, #05080d);
  border-top: 1px solid var(--ps-card-border);
  overflow: hidden;
}

.ps-quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(187, 134, 252, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.ps-quote blockquote {
  border: none !important;
  font-size: 1.35rem;
  font-style: italic;
  color: var(--ps-accent);
  max-width: 650px;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

.ps-quote-attr {
  font-size: 0.82rem;
  opacity: 0.4;
  margin-top: 1rem;
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}

.ps-quote-slides {
  position: relative;
  min-height: 120px;
}

.ps-quote-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
  transform: translateY(10px);
}

.ps-quote-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  transform: translateY(0);
}

.ps-quote-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  position: relative;
  z-index: 10;
}

.ps-quote-btn {
  background: rgba(187, 134, 252, 0.1);
  border: 1px solid rgba(187, 134, 252, 0.2);
  color: var(--ps-accent);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ps-quote-btn:hover {
  background: rgba(187, 134, 252, 0.2);
  border-color: rgba(187, 134, 252, 0.4);
  transform: scale(1.1);
}

.ps-quote-btn svg {
  width: 18px;
  height: 18px;
}

.ps-quote-indicators {
  display: flex;
  gap: 0.5rem;
}

.ps-quote-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.ps-quote-dot.active {
  background: var(--ps-accent);
  transform: scale(1.3);
}

.ps-quote-dot:hover {
  background: rgba(187, 134, 252, 0.6);
}

/* --------------------------------------------------------------------------
 * Light Mode Adjustments
 * -------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .ps-hero-content {
  background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 30%, #4a1d8a 60%, #1a0a2e 100%);
  background-size: 400% 400%;
  animation: ps-gradient-shift 20s ease infinite;
}

[data-md-color-scheme="default"] .ps-stat-card,
[data-md-color-scheme="default"] .ps-cert-card,
[data-md-color-scheme="default"] .ps-featured,
[data-md-color-scheme="default"] .ps-terminal-card {
  background: rgba(123, 31, 162, 0.03);
}

[data-md-color-scheme="default"] .ps-home .md-typeset .grid.cards > ol > li,
[data-md-color-scheme="default"] .ps-home .md-typeset .grid.cards > ul > li {
  background: rgba(123, 31, 162, 0.03) !important;
}

[data-md-color-scheme="default"] .ps-stat-card:hover,
[data-md-color-scheme="default"] .ps-cert-card:hover,
[data-md-color-scheme="default"] .ps-featured:hover,
[data-md-color-scheme="default"] .ps-terminal-card:hover {
  background: rgba(123, 31, 162, 0.06);
}

[data-md-color-scheme="default"] .ps-matrix {
  background: rgba(123, 31, 162, 0.02);
}

[data-md-color-scheme="default"] .ps-quote {
  background: linear-gradient(135deg, #1a0a2e, #2d1b4e, #1a0a2e);
}

/* --------------------------------------------------------------------------
 * Dark Mode Enhancements
 * -------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] .ps-stat-card,
[data-md-color-scheme="slate"] .ps-cert-card,
[data-md-color-scheme="slate"] .ps-terminal-card {
  background: var(--ps-terminal-bg);
}

[data-md-color-scheme="slate"] .ps-featured {
  background: var(--ps-terminal-bg);
}

[data-md-color-scheme="slate"] .ps-home .md-typeset .grid.cards > ol > li,
[data-md-color-scheme="slate"] .ps-home .md-typeset .grid.cards > ul > li {
  background: var(--ps-terminal-bg) !important;
}

/* --------------------------------------------------------------------------
 * Responsive Design
 * -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ps-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ps-cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .ps-hero-content {
    padding: 4rem 1.5rem 4rem;
    margin: -0.6rem auto 0;
    min-height: 70vh;
  }

  .ps-hero-icon {
    width: 85px;
    height: 85px;
    font-size: 2.4rem;
    border-radius: 22px;
  }

  .ps-hero-title {
    font-size: 2.2rem !important;
  }

  .ps-hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .ps-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .ps-stats {
    gap: 0.75rem;
    padding: 1.5rem 0;
  }

  .ps-stat-card {
    padding: 1.5rem 0.75rem;
  }

  .ps-stat-number {
    font-size: 1.8rem;
  }

  .ps-featured-inner {
    padding: 1.5rem;
  }

  .ps-quote {
    padding: 2.5rem 1.5rem;
    margin: 2rem -0.6rem -0.6rem;
  }

  .ps-quote blockquote {
    font-size: 1.1rem;
  }

  .ps-dashboard-terminal-content {
    padding: 1.2rem;
  }

  .ps-term-feed-item {
    flex-direction: column;
    gap: 0.3rem;
  }

  .ps-term-feed-date {
    min-width: auto;
  }

  .ps-blog-card-content {
    padding: 1rem;
  }

  .ps-terminal-body {
    padding: 1rem;
  }

  .ps-home .md-typeset .grid.cards > ol > li,
  .ps-home .md-typeset .grid.cards > ul > li {
    padding: 1.25rem !important;
    padding-top: 2rem !important;
  }
}

@media (max-width: 480px) {
  .ps-hero-title {
    font-size: 1.8rem !important;
  }

  .ps-hero-tagline {
    font-size: 0.9rem;
  }

  .ps-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .ps-cert-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .ps-terminal-prompt {
    font-size: 0.65rem;
  }

  .ps-term-cmd {
    font-size: 0.85rem;
  }
  
  .ps-dashboard-terminal-content {
    padding: 1rem;
  }

  .ps-hero-content {
    padding: 2rem 0.75rem 3rem;
  }

  .ps-terminal-window {
    padding: 1rem;
  }
}

/* --------------------------------------------------------------------------
 * Misc
 * -------------------------------------------------------------------------- */

/* Hide the page title since the hero handles it */
.ps-home h1#__skip {
  display: none !important;
}

/* Remove default content padding to allow full-bleed sections */
.ps-home .md-content__inner {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

/* Re-add padding for content between full-bleed sections */
.ps-home .ps-content-wrap {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Make links inside cards more subtle */
.ps-home .md-typeset .grid.cards a {
  transition: var(--ps-transition);
}

.ps-home .md-typeset .grid.cards a:hover {
  color: var(--ps-neon-green) !important;
}

/* Command prefix styling */
.ps-cmd-prefix {
  color: var(--ps-neon-green);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  margin-right: 0.2em;
}

/* --------------------------------------------------------------------------
 * Blog Cards Styling
 * -------------------------------------------------------------------------- */
.ps-blog-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.ps-blog-card {
  display: flex;
  flex-direction: row;
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease;
  text-decoration: none !important;
  color: inherit !important;
  position: relative;
}
.ps-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ps-glow-sm);
  border-color: var(--ps-accent);
}

.ps-card-terminal-header {
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--ps-card-border);
}

.ps-card-term-btn {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ps-card-term-btn:nth-child(1) { background: #ff5f57; } /* close */
.ps-card-term-btn:nth-child(2) { background: #ffbd2e; } /* min */
.ps-card-term-btn:nth-child(3) { background: #28c840; } /* max */
.ps-blog-card-content {
  padding: 1.5rem 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.ps-blog-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.6rem;
  color: var(--md-default-fg-color);
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ps-blog-card:hover .ps-blog-card-title {
  color: var(--md-primary-fg-color);
}
.ps-blog-card-summary {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
  margin-bottom: 1.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ps-blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding-top: 1rem;
  margin-top: auto;
}
.ps-blog-card-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ps-blog-card-author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--md-primary-fg-color);
}
.ps-blog-card-author-initial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--md-primary-fg-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
}
.ps-blog-card-author-info {
  display: flex;
  flex-direction: column;
}
.ps-blog-card-author-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}
.ps-blog-card-date {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}
.ps-blog-card-read-more {
  color: var(--md-primary-fg-color);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.85rem;
  transition: gap 0.2s ease;
}
.ps-blog-card:hover .ps-blog-card-read-more {
  gap: 0.6rem;
}

/* --- Blog card hero image + overlaid chips --- */
.ps-blog-card-media {
  position: relative;
  width: 300px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #0d1117;
  border-right: 1px solid var(--ps-card-border);
  overflow: hidden;
}

/* Legibility gradient + subtle scan tint */
.ps-blog-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,14,20,0.05) 0%, rgba(10,14,20,0.15) 70%, rgba(10,14,20,0.6) 100%);
  transition: opacity 0.3s ease;
}

.ps-blog-card:hover .ps-blog-card-media {
  background-size: 110%;
}

/* Fallback when a post has no image */
.ps-blog-card-media--fallback {
  background:
    radial-gradient(circle at 30% 25%, rgba(187,134,252,0.28), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(0,255,102,0.16), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 8px),
    var(--ps-terminal-bg);
}
.ps-blog-card-media--fallback::before {
  content: "</>";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 2.6rem;
  font-weight: 800;
  color: rgba(187, 134, 252, 0.35);
  letter-spacing: 0.05em;
  z-index: 1;
}

.ps-blog-card-cat {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ps-accent);
  background: rgba(10, 14, 20, 0.78);
  border: 1px solid rgba(187, 134, 252, 0.35);
  padding: 0.22rem 0.55rem;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.ps-blog-card-readtime {
  position: absolute;
  bottom: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ps-neon-green);
  background: rgba(10, 14, 20, 0.7);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* Difficulty color coding (machines) � applies on chips, spotlight meta, filter pills */
.ps-diff--easy { color: var(--ps-neon-green) !important; }
.ps-diff--medium { color: #ffbd2e !important; }
.ps-diff--hard { color: #ff5f57 !important; }
.ps-diff--insane { color: var(--ps-neon) !important; }

/* Difficulty filter pills carry a faint tint of their color */
.ps-diff-filter { border-color: currentColor; }
.ps-diff-filter.ps-tag-active {
  color: #000 !important;
  background: currentColor;
}
.ps-diff-filter.ps-tag-active.ps-diff--easy { background: var(--ps-neon-green); }
.ps-diff-filter.ps-tag-active.ps-diff--medium { background: #ffbd2e; }
.ps-diff-filter.ps-tag-active.ps-diff--hard { background: #ff5f57; }
.ps-diff-filter.ps-tag-active.ps-diff--insane { background: var(--ps-neon); }

/* --------------------------------------------------------------------------
 * Blog Masthead (compact terminal header)
 * -------------------------------------------------------------------------- */
.ps-blog-masthead {
  margin: 0.25rem 0 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--ps-card-border);
}
.ps-blog-masthead-cmd {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  color: #8b98a5;
  margin-bottom: 0.45rem;
}
.ps-bm-prompt { color: var(--ps-neon-green); margin-right: 0.4rem; }
.ps-bm-cursor {
  display: inline-block;
  width: 8px;
  margin-left: 2px;
  color: var(--ps-neon-green);
  animation: ps-blink 1s step-end infinite;
}
.ps-blog-masthead-title {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(1.7rem, 4.5vw, 2.3rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem !important;
  border: none !important;
  background: linear-gradient(90deg, var(--ps-accent), var(--ps-neon-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ps-blog-masthead-sub {
  font-size: 0.95rem;
  opacity: 0.7;
  margin: 0 !important;
  max-width: 640px;
}

/* Hide the auto-injected page-view counter on the home + listing pages
   (it's meaningful on individual articles, just noise on index pages). */
.ps-nh-title + #ps-page-views,
.ps-hero-brand + #ps-page-views,
.ps-blog-masthead-title + #ps-page-views {
  display: none !important;
}

/* --------------------------------------------------------------------------
 * Blog Toolbar (filter row)
 * -------------------------------------------------------------------------- */
.ps-blog-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 1.75rem;
}
.ps-blog-toolbar-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: var(--ps-neon-green);
  opacity: 0.7;
  white-space: nowrap;
}
.ps-blog-toolbar .ps-tag-filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
}
.ps-tag-count {
  font-size: 0.7em;
  opacity: 0.6;
  margin-left: 0.15rem;
}
.ps-tag-active .ps-tag-count { opacity: 0.8; }

/* --------------------------------------------------------------------------
 * Blog empty state (no posts match a filter)
 * -------------------------------------------------------------------------- */
.ps-blog-empty {
  font-family: "JetBrains Mono", monospace;
  padding: 2.5rem 1rem;
  text-align: left;
}
.ps-blog-empty-cmd { display: block; color: var(--ps-accent); margin-bottom: 0.5rem; }
.ps-blog-empty-msg { display: block; color: #8b98a5; }

/* Stack blog cards vertically on narrow screens */
@media (max-width: 700px) {
  .ps-blog-card {
    flex-direction: column;
  }
  .ps-blog-card-media {
    width: 100%;
    height: 170px;
    min-height: 0;
    align-self: auto;
    border-right: none;
    border-bottom: 1px solid var(--ps-card-border);
  }
  .ps-blog-card-media::after {
    background: linear-gradient(180deg, rgba(10,14,20,0.05) 0%, rgba(10,14,20,0.35) 55%, rgba(10,14,20,0.85) 100%);
  }
  .ps-blog-card-content {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

/* ============================================================================
 * TOC, Sidebar, & Scrollbar Refinements
 * ============================================================================ */

/* Global Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ps-dark-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--ps-purple-700);
  border-radius: 4px;
  border: 1px solid var(--ps-dark-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ps-accent);
}

/* ============================================================================
 * Blog Pagination & Archive
 * ============================================================================ */

.is-hidden {
  display: none !important;
}

#ps-load-more-btn {
  background: rgba(187, 134, 252, 0.1);
  border: 1px solid var(--ps-accent);
  color: var(--ps-accent);
  padding: 0.75rem 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  transition: var(--ps-transition);
  cursor: pointer;
  border-radius: 4px;
}

#ps-load-more-btn:hover {
  background: rgba(187, 134, 252, 0.2);
  box-shadow: var(--ps-glow-md);
}

.ps-archive-year-header {
  user-select: none;
  transition: var(--ps-transition);
}

.ps-archive-year-header:hover {
  color: #fff !important;
}

.ps-archive-toggle {
  user-select: none;
  color: var(--ps-dark-text);
}

/* ============================================================================
 * Blog Tag Filtering UI
 * ============================================================================ */

.ps-tag-filter {
  background: rgba(187, 134, 252, 0.05);
  border: 1px solid var(--ps-card-border);
  color: var(--ps-dark-text);
  padding: 0.3rem 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  border-radius: 20px;
  cursor: pointer;
  transition: var(--ps-transition);
}

.ps-tag-filter:hover {
  background: rgba(187, 134, 252, 0.15);
  color: #fff;
  border-color: var(--ps-accent);
}

.ps-tag-active {
  background: var(--ps-accent);
  color: #000 !important;
  border-color: var(--ps-accent);
  box-shadow: var(--ps-glow-sm);
}

.ps-blog-card-tag {
  background: rgba(187, 134, 252, 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
 * Enhanced Homepage Animations
 * -------------------------------------------------------------------------- */

/* Staggered Grid Cards */
.ps-home .grid.cards.ps-reveal > ul > li,
.ps-home .grid.cards.ps-reveal > ol > li {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-home .grid.cards.ps-revealed > ul > li,
.ps-home .grid.cards.ps-revealed > ol > li {
  opacity: 1;
  transform: translateY(0);
}

.ps-home .grid.cards.ps-revealed > ul > li:nth-child(1), .ps-home .grid.cards.ps-revealed > ol > li:nth-child(1) { transition-delay: 0.1s; }
.ps-home .grid.cards.ps-revealed > ul > li:nth-child(2), .ps-home .grid.cards.ps-revealed > ol > li:nth-child(2) { transition-delay: 0.2s; }
.ps-home .grid.cards.ps-revealed > ul > li:nth-child(3), .ps-home .grid.cards.ps-revealed > ol > li:nth-child(3) { transition-delay: 0.3s; }
.ps-home .grid.cards.ps-revealed > ul > li:nth-child(4), .ps-home .grid.cards.ps-revealed > ol > li:nth-child(4) { transition-delay: 0.4s; }

/* Staggered Terminal Feed Items */
.ps-term-feed-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-terminal-dashboard.ps-revealed .ps-term-feed-item {
  opacity: 1;
  transform: translateX(0);
}

.ps-terminal-dashboard.ps-revealed .ps-term-feed-item:nth-child(1) { transition-delay: 0.2s; }
.ps-terminal-dashboard.ps-revealed .ps-term-feed-item:nth-child(2) { transition-delay: 0.35s; }
.ps-terminal-dashboard.ps-revealed .ps-term-feed-item:nth-child(3) { transition-delay: 0.5s; }
.ps-terminal-dashboard.ps-revealed .ps-term-feed-item:nth-child(4) { transition-delay: 0.65s; }
.ps-terminal-dashboard.ps-revealed .ps-term-feed-item:nth-child(5) { transition-delay: 0.8s; }

/* Subtle float animation on all cards */
.ps-home .ps-stat-card:hover,
.ps-home .grid.cards > ul > li:hover,
.ps-home .ps-cert-card:hover {
  animation: ps-float 3s ease-in-out infinite;
}

/* Enhanced Glitch hover for buttons */
.cyber-btn-glitch-hover:hover {
  animation: ps-pulse-glow 1.5s infinite alternate;
}

/* --------------------------------------------------------------------------
 * Featured Intel Spotlight (latest blog post on home)
 * -------------------------------------------------------------------------- */
.ps-spotlight {
  display: block;
  text-decoration: none !important;
  border: 1px solid var(--ps-card-border);
  border-radius: 12px;
  background: var(--ps-terminal-bg);
  overflow: hidden;
  margin: 1.5rem 0 3rem;
  transition: var(--ps-transition);
  position: relative;
}

.ps-spotlight:hover {
  border-color: var(--ps-accent);
  box-shadow: var(--ps-glow-md);
  transform: translateY(-5px);
}

.ps-spotlight-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--ps-card-border);
}

.ps-spotlight-bar-path {
  margin-left: 0.6rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: rgba(187, 134, 252, 0.55);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-spotlight-body {
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: stretch;
}

.ps-spotlight-media {
  background-size: cover;
  background-position: center;
  min-height: 260px;
  position: relative;
  filter: saturate(1.05);
}

.ps-spotlight-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,14,20,0) 60%, rgba(10,14,20,0.9) 100%);
}

.ps-spotlight-content {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ps-spotlight-title {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0.75rem 0 0.6rem !important;
  color: var(--ps-dark-text);
  transition: var(--ps-transition);
}

.ps-spotlight:hover .ps-spotlight-title {
  color: var(--ps-accent);
}

.ps-spotlight-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  opacity: 0.65;
  margin-bottom: 0.9rem;
}

.ps-spotlight-meta span:last-child { color: var(--ps-accent); opacity: 0.9; }

.ps-spotlight-summary {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ps-dark-text);
  opacity: 0.82;
  margin: 0 0 1.25rem;
}

.ps-spotlight-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ps-neon-green);
  letter-spacing: 0.02em;
}

.ps-spotlight-cta svg { transition: transform 0.25s ease; }
.ps-spotlight:hover .ps-spotlight-cta svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
 * Closing CTA banner
 * -------------------------------------------------------------------------- */
.ps-home-cta {
  text-align: center;
  margin: 3.5rem 0 2rem;
  padding: 3rem 2rem;
  border: 1px solid var(--ps-card-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(187, 134, 252, 0.12), transparent 60%),
    var(--ps-terminal-bg);
  position: relative;
  overflow: hidden;
}

.ps-home-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ps-neon-green), var(--ps-accent), var(--ps-neon), transparent);
}

.ps-cta-title {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  font-family: "JetBrains Mono", monospace;
  margin: 0 0 0.75rem !important;
  border: none !important;
}

.ps-home-cta p {
  max-width: 620px;
  margin: 0 auto 2.25rem !important;
  opacity: 0.78;
}

.ps-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .ps-spotlight-body {
    grid-template-columns: 1fr;
  }
  .ps-spotlight-media {
    min-height: 180px;
  }
  .ps-spotlight-media::after {
    background: linear-gradient(180deg, rgba(10,14,20,0) 50%, rgba(10,14,20,0.95) 100%);
  }
  .ps-spotlight-content {
    padding: 1.5rem 1.5rem;
  }
  .ps-cta-actions .ps-btn {
    width: 100%;
    max-width: 280px;
  }
}

/* ============================================================================
 * NEW HOME (v2) � Immersive hero, live ticker, focus cards
 * ============================================================================ */

/* Keep all home content above the fixed matrix canvas */
.ps-home > .ps-nh-hero,
.ps-home > .ps-nh-ticker,
.ps-home > .ps-content-wrap {
  position: relative;
  z-index: 2;
}

/* --- Hero shell --- */
.ps-nh-hero {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 96px);
  min-height: calc(100svh - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem 3.5rem;
  overflow: hidden;
}

/* ambient gradient orbs */
.ps-nh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.ps-nh-orb-1 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(187,134,252,0.42), transparent 70%);
  top: -120px; left: -80px;
  animation: ps-orb-float 16s ease-in-out infinite;
}
.ps-nh-orb-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(0,255,102,0.18), transparent 70%);
  bottom: -100px; right: -60px;
  animation: ps-orb-float 20s ease-in-out infinite reverse;
}
.ps-nh-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(224,64,251,0.22), transparent 70%);
  top: 40%; left: 55%;
  animation: ps-orb-float 24s ease-in-out infinite;
}
@keyframes ps-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 25px) scale(0.95); }
}

/* faint perspective grid */
.ps-nh-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(187,134,252,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(187,134,252,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
}

.ps-nh-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
}

/* status pill */
.ps-nh-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ps-neon-green);
  background: rgba(0, 255, 102, 0.06);
  border: 1px solid rgba(0, 255, 102, 0.28);
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}
.ps-nh-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ps-neon-green);
  box-shadow: 0 0 8px var(--ps-neon-green);
  animation: ps-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes ps-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* animated shimmer wordmark */
.ps-nh-title {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(2.8rem, 8vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  background: linear-gradient(110deg, #ffffff 0%, var(--ps-accent) 38%, var(--ps-neon) 62%, var(--ps-neon-green) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ps-shimmer 7s linear infinite;
  text-shadow: 0 0 60px rgba(187, 134, 252, 0.25);
}

/* typed role line */
.ps-nh-typed {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(1rem, 3.2vw, 1.4rem);
  font-weight: 600;
  margin: 1rem 0 0;
  min-height: 1.6em;
  color: var(--ps-dark-text);
}
.ps-nh-typed-prefix { color: var(--ps-neon-green); margin-right: 0.55rem; }
#ps-typed-text { color: var(--ps-accent); }
.ps-nh-caret {
  display: inline-block;
  width: 11px;
  height: 1.05em;
  background: var(--ps-accent);
  margin-left: 3px;
  vertical-align: -2px;
  animation: ps-blink 1s step-end infinite;
}

.ps-nh-lead {
  max-width: 620px;
  margin: 1.25rem auto 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ps-dark-text);
  opacity: 0.85;
}
.ps-nh-red { color: #ff5f6d; font-weight: 600; }
.ps-nh-blue { color: #4aa8ff; font-weight: 600; }

/* CTA buttons */
.ps-nh-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
}
.ps-nh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 9px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: var(--ps-transition);
}
.ps-nh-btn-primary {
  background: linear-gradient(135deg, var(--ps-purple-600), var(--ps-purple-800));
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(138, 43, 170, 0.35);
}
.ps-nh-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 32px var(--ps-accent-glow);
}
.ps-nh-btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--ps-dark-text) !important;
  border: 1px solid var(--ps-card-border);
  backdrop-filter: blur(6px);
}
.ps-nh-btn-ghost:hover {
  transform: translateY(-3px);
  border-color: var(--ps-accent);
  color: #fff !important;
  box-shadow: var(--ps-glow-sm);
}

/* --- Live ticker --- */
.ps-nh-ticker {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--ps-card-border);
  border-bottom: 1px solid var(--ps-card-border);
  background: rgba(10, 14, 20, 0.65);
  backdrop-filter: blur(8px);
  overflow: hidden;
  margin-bottom: 1rem;
}
.ps-nh-ticker-tag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--ps-accent);
  color: #0a0e14;
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 0 1.1rem;
}
.ps-nh-ticker-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ps-nh-ticker-track {
  display: flex;
  width: max-content;
  animation: ps-ticker-scroll 48s linear infinite;
}
.ps-nh-ticker:hover .ps-nh-ticker-track { animation-play-state: paused; }
.ps-nh-ticker-group {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  padding: 0.7rem 0;
  padding-right: 2.75rem;
  flex-shrink: 0;
}
.ps-nh-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  color: var(--ps-dark-text);
  opacity: 0.8;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.ps-nh-ticker-item::before { content: "?"; color: var(--ps-neon-green); }
.ps-nh-ticker-item:hover { color: var(--ps-accent); opacity: 1; }
@keyframes ps-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* stat number suffix */
.ps-stat-suffix { color: var(--ps-accent); }

/* --- Focus cards --- */
.ps-fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 1rem;
}
.ps-fx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--ps-card-border);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden;
  transition: var(--ps-transition);
}
.ps-fx-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ps-neon-green), var(--ps-accent), var(--ps-neon));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.ps-fx-card:hover {
  transform: translateY(-6px);
  border-color: var(--ps-accent);
  box-shadow: var(--ps-glow-md);
}
.ps-fx-card:hover::before { transform: scaleX(1); }
.ps-fx-index {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ps-accent);
  opacity: 0.7;
  margin-bottom: 1rem;
}
.ps-fx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 12px;
  background: rgba(187, 134, 252, 0.1);
  border: 1px solid rgba(187, 134, 252, 0.2);
  color: var(--ps-accent);
  margin-bottom: 1.1rem;
  transition: var(--ps-transition);
}
.ps-fx-card:hover .ps-fx-icon {
  background: var(--ps-accent);
  color: #0a0e14;
  box-shadow: 0 0 20px var(--ps-accent-glow);
}
.ps-fx-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
  color: var(--md-default-fg-color);
}
.ps-fx-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ps-dark-text);
  opacity: 0.78;
  flex: 1;
}
.ps-fx-arrow {
  margin-top: 1.1rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ps-neon-green);
  transition: letter-spacing 0.25s ease;
}
.ps-fx-card:hover .ps-fx-arrow { letter-spacing: 0.03em; }

@media (max-width: 768px) {
  .ps-nh-hero { min-height: calc(100vh - 48px); min-height: calc(100svh - 48px); padding: 4rem 1.25rem 3rem; }
  .ps-nh-cta { flex-direction: column; align-items: center; }
  .ps-nh-btn { width: 100%; max-width: 300px; justify-content: center; }
  .ps-nh-ticker-tag { padding: 0 0.7rem; font-size: 0.66rem; }
  .ps-nh-hero .ps-scroll-indicator { display: none; }
}

/* Respect users who prefer reduced motion � disable ambient/decorative animation */
@media (prefers-reduced-motion: reduce) {
  #ps-matrix-canvas { display: none; }
  .ps-nh-title,
  .ps-nh-orb-1, .ps-nh-orb-2, .ps-nh-orb-3,
  .ps-nh-ticker-track,
  .ps-nh-status-dot,
  .ps-nh-caret {
    animation: none !important;
  }
  .ps-nh-title {
    background-position: 0 0;
  }
  .ps-reveal, .ps-reveal-left, .ps-reveal-right, .ps-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================================
 * Consistency layer � shared landing-page components
 * ============================================================================ */

/* Hide the auto-injected page-title H1 on template pages that already
   provide their own hero H1 (prevents a duplicate/visible second H1). */
.ps-home h1#__skip { display: none !important; }

/* fx-card index line color variants (used for cert status, etc.) */
.ps-fx-index--green { color: var(--ps-neon-green) !important; }
.ps-fx-index--amber { color: #ffbd2e !important; }
.ps-fx-index--blue  { color: #4aa8ff !important; }

/* Generic masthead alias so any page can use .ps-masthead == .ps-blog-masthead */
.ps-masthead {
  margin: 0.25rem 0 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--ps-card-border);
}
.ps-masthead .ps-blog-masthead-title { margin-top: 0; }

/* --------------------------------------------------------------------------
 * Contact form � terminal-themed, consistent with site aesthetic
 * -------------------------------------------------------------------------- */
.ps-contact-terminal {
  max-width: 640px;
  margin: 2rem 0;
  border: 1px solid var(--ps-card-border);
  border-radius: 12px;
  background: var(--ps-terminal-bg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.ps-contact-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--ps-card-border);
}
.ps-contact-bar-title {
  margin-left: 0.6rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: rgba(187, 134, 252, 0.6);
  letter-spacing: 0.04em;
}
.ps-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.75rem;
}
.ps-contact-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.ps-contact-field {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ps-contact-field label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ps-accent);
}
.ps-contact-field label::before { content: "$ "; color: var(--ps-neon-green); }
.ps-contact-field input,
.ps-contact-field textarea {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--ps-card-border);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  color: var(--ps-dark-text);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ps-contact-field input::placeholder,
.ps-contact-field textarea::placeholder { color: rgba(201, 209, 217, 0.35); }
.ps-contact-field input:focus,
.ps-contact-field textarea:focus {
  border-color: var(--ps-accent);
  box-shadow: 0 0 0 3px rgba(187, 134, 252, 0.12);
}
.ps-contact-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ps-contact-status { font-family: "JetBrains Mono", monospace; font-size: 0.82rem; font-weight: 500; }
.ps-contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ps-purple-600), var(--ps-purple-800));
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--ps-transition);
}
.ps-contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px var(--ps-accent-glow);
}

/* Contact method chips */
.ps-contact-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}
.ps-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--ps-card-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ps-dark-text) !important;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  text-decoration: none !important;
  transition: var(--ps-transition);
}
.ps-contact-chip:hover {
  border-color: var(--ps-accent);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--ps-glow-sm);
}
.ps-contact-chip svg { color: var(--ps-accent); }

/* --------------------------------------------------------------------------
 * About page hero overrides (content-sized, not forced full height)
 * -------------------------------------------------------------------------- */
.ps-about-hero {
  min-height: auto !important;
  padding: 3rem 1.5rem 2.5rem;
}
.ps-about-hero .ps-nh-hero-inner { margin-bottom: 2rem; }
.ps-about-name {
  font-size: clamp(2.1rem, 6vw, 4rem) !important;
}
.ps-about-hero .ps-hero-terminal {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.ps-about .ps-content-wrap .ps-stats { margin-top: 0; }

/* ============================================================================
 * Browser Window Frame  (realistic Chrome-style chrome)
 * Built at runtime by initBrowserFrames(). Structure:
 *   .ps-browser-frame
 *     .ps-browser-tabs   (window dots + active tab + new-tab)
 *     .ps-browser-bar    (back/fwd/reload + omnibox[lock+url+copy] + star/menu)
 *     .ps-browser-viewport (the screenshot)
 * Authoring (md_in_html):
 *   <div class="ps-browser" data-url="http://SERVER_IP:PORT/" markdown>
 *   ![alt](shot.png)
 *   </div>
 * ============================================================================ */
.ps-browser-frame {
  --psb-strip: #0a0d13;
  --psb-toolbar: #181d27;
  --psb-omni: #0c1016;
  --psb-ink: #c9d1d9;
  --psb-muted: #8b98a8;
  margin: 1.6rem 0;
  border: 1px solid #2a3240;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ps-terminal-bg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255,255,255,0.03) inset;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.ps-browser-frame:hover {
  border-color: #36404f;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.6), var(--ps-glow-sm);
}

/* ---- Tab strip ---- */
.ps-browser-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 42px;
  padding: 0 0.7rem;
  background: var(--psb-strip);
}

/* Window traffic-light dots */
.ps-browser-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  align-self: center;
  margin-right: 0.35rem;
}
.ps-browser-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  transition: filter 0.2s ease;
}
.ps-browser-dots i:nth-child(1) { background: #ff5f57; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.25) inset; }
.ps-browser-dots i:nth-child(2) { background: #febc2e; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.25) inset; }
.ps-browser-dots i:nth-child(3) { background: #28c840; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.25) inset; }
.ps-browser-frame:hover .ps-browser-dots i { filter: brightness(1.05); }

/* Active tab � merges into the toolbar below */
.ps-browser-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 34px;
  min-width: 130px;
  max-width: 260px;
  padding: 0 0.7rem;
  background: var(--psb-toolbar);
  border-radius: 9px 9px 0 0;
  position: relative;
}
.ps-browser-tab-fav {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ps-accent);
}
.ps-browser-tab-fav svg { width: 14px; height: 14px; }
.ps-browser-tab-title {
  flex: 1;
  min-width: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.76rem;
  color: var(--psb-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.ps-browser-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--psb-muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.ps-browser-tab-close svg { width: 11px; height: 11px; }
.ps-browser-tab:hover .ps-browser-tab-close { color: var(--psb-ink); }
.ps-browser-tab-close:hover { background: rgba(255,255,255,0.12); }

/* New-tab button */
.ps-browser-tab-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--psb-muted);
  border-radius: 50%;
  cursor: default;
  transition: background 0.2s ease, color 0.2s ease;
}
.ps-browser-tab-new svg { width: 15px; height: 15px; }
.ps-browser-tab-new:hover { background: rgba(255,255,255,0.08); color: var(--psb-ink); }

/* ---- Toolbar ---- */
.ps-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  background: var(--psb-toolbar);
  border-bottom: 1px solid rgba(0,0,0,0.35);
}

.ps-browser-nav {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
}
.ps-browser-navbtn,
.ps-browser-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--psb-ink);
  border-radius: 50%;
  cursor: default;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.ps-browser-navbtn svg,
.ps-browser-iconbtn svg { width: 18px; height: 18px; }
.ps-browser-navbtn:hover,
.ps-browser-iconbtn:hover { background: rgba(255,255,255,0.08); }
.ps-browser-navbtn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.ps-browser-reload { cursor: pointer; }
.ps-browser-reload:hover { color: var(--ps-accent); }
.ps-browser-reload.is-spinning svg { animation: ps-browser-spin 0.6s ease; }
@keyframes ps-browser-spin { to { transform: rotate(360deg); } }

/* Omnibox / address bar */
.ps-browser-url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 34px;
  padding: 0 0.4rem 0 0.85rem;
  background: var(--psb-omni);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ps-browser-url:hover { background: #0f141b; }
.ps-browser-url-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--psb-muted);
}
.ps-browser-url-icon svg { width: 14px; height: 14px; }
.ps-browser-url.is-insecure .ps-browser-url-icon { color: #e0a64b; }
.ps-browser-url:not(.is-insecure) .ps-browser-url-icon { color: #4cc77f; }
.ps-browser-url-text {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--psb-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.005em;
}

/* Copy-URL button (lives inside the omnibox) */
.ps-browser-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--psb-muted);
  background: transparent;
  border: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.ps-browser-copy svg { width: 15px; height: 15px; }
.ps-browser-copy:hover {
  background: rgba(255,255,255,0.1);
  color: var(--ps-accent);
}
.ps-browser-copy.is-copied {
  color: var(--ps-neon-green);
  background: rgba(0, 255, 102, 0.12);
  transform: scale(1.05);
}

/* Image viewport */
.ps-browser-viewport {
  display: block;
  line-height: 0;
  background: var(--ps-terminal-bg);
}
.ps-browser-viewport img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}

/* ---- Light mode ---- */
[data-md-color-scheme="default"] .ps-browser-frame {
  --psb-strip: #d6dce4;
  --psb-toolbar: #eef1f5;
  --psb-omni: #ffffff;
  --psb-ink: #2b2f36;
  --psb-muted: #6b7280;
  border-color: #c2c9d4;
  background: #fff;
}
[data-md-color-scheme="default"] .ps-browser-bar {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
[data-md-color-scheme="default"] .ps-browser-url {
  border-color: rgba(0,0,0,0.12);
}
[data-md-color-scheme="default"] .ps-browser-url:hover { background: #f1f2f8; }
[data-md-color-scheme="default"] .ps-browser-navbtn:hover,
[data-md-color-scheme="default"] .ps-browser-iconbtn:hover,
[data-md-color-scheme="default"] .ps-browser-tab-new:hover,
[data-md-color-scheme="default"] .ps-browser-tab-close:hover,
[data-md-color-scheme="default"] .ps-browser-copy:hover {
  background: rgba(0,0,0,0.06);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .ps-browser-reload.is-spinning svg { animation: none; }
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .ps-browser-tabs { height: 38px; padding: 0 0.5rem; gap: 0.35rem; }
  .ps-browser-tab { min-width: 92px; max-width: 160px; height: 30px; padding: 0 0.5rem; }
  .ps-browser-tab-title { font-size: 0.7rem; }
  .ps-browser-tab-new { display: none; }
  .ps-browser-bar { gap: 0.25rem; padding: 0.45rem 0.5rem; }
  /* Drop secondary controls to save room on phones */
  .ps-browser-navbtn:nth-child(1),
  .ps-browser-navbtn:nth-child(2),
  .ps-browser-star { display: none; }
  .ps-browser-navbtn, .ps-browser-iconbtn { width: 28px; height: 28px; }
  .ps-browser-url { height: 30px; padding: 0 0.3rem 0 0.6rem; }
  .ps-browser-url-text { font-size: 0.72rem; }
  .ps-browser-dots i { width: 10px; height: 10px; }
}


/* ============================================================================
 * Window Frames � Image viewer / Shell / Editor
 * Built at runtime by initWindowFrames(). Same authoring as .ps-browser:
 *   <div class="ps-image"  data-title="login.png"        markdown>![alt](shot.png)</div>
 *   <div class="ps-shell"  data-title="kali@kali: ~"     markdown>![alt](shot.png)</div>
 *   <div class="ps-editor" data-title="reverse-shell.php" markdown>![alt](shot.png)</div>
 * Each can also wrap a fenced code block instead of an image.
 * ============================================================================ */
.ps-win-frame {
  --psw-bar: #181d27;
  --psw-body: var(--ps-terminal-bg);
  --psw-ink: #c9d1d9;
  --psw-muted: #8b98a8;
  --psw-accent: var(--ps-accent);
  margin: 1.6rem 0;
  border: 1px solid #2a3240;
  border-radius: 12px;
  overflow: hidden;
  background: var(--psw-body);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255,255,255,0.03) inset;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.ps-win-frame:hover {
  border-color: #36404f;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.6), var(--ps-glow-sm);
}

/* Title bar (shared) */
.ps-win-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 40px;
  padding: 0 0.75rem;
  background: var(--psw-bar);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

/* Traffic-light dots (shared) */
.ps-win-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ps-win-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.25) inset;
}
.ps-win-dots i:nth-child(1) { background: #ff5f57; }
.ps-win-dots i:nth-child(2) { background: #febc2e; }
.ps-win-dots i:nth-child(3) { background: #28c840; }

/* Centered title (image + shell) */
.ps-win-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  color: var(--psw-muted);
}
.ps-win-title-icon { display: inline-flex; flex-shrink: 0; color: var(--psw-accent); }
.ps-win-title-icon svg { width: 14px; height: 14px; }
.ps-win-title-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
/* Spacer balances the dots so the centered title is truly centered */
.ps-win-spacer { flex-shrink: 0; width: 52px; }

/* Body */
.ps-win-body { display: block; background: var(--psw-body); }
.ps-win-body--media { line-height: 0; }
.ps-win-body--media img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}
/* When wrapping real text/code, let the inner block sit flush */
.ps-win-body--text > :first-child { margin-top: 0; }
.ps-win-body--text > :last-child { margin-bottom: 0; }
.ps-win-body--text .highlight,
.ps-win-body--text pre {
  margin: 0 !important;
  border-radius: 0 !important;
}
.ps-win-body--text > p { margin: 0; }

/* ---- Image viewer ---- */
.ps-win--image { --psw-bar: #1c2026; }

/* ---- Shell / terminal ---- */
.ps-win--shell {
  --psw-bar: #0c1119;
  --psw-body: #0a0e14;
  --psw-accent: var(--ps-neon-green);
}
.ps-win--shell .ps-win-title { color: #9fb0c3; }
.ps-win--shell .ps-win-title-text { color: var(--ps-neon-green); opacity: 0.85; }
.ps-win--shell .ps-win-body--text {
  padding: 0;
  font-family: "JetBrains Mono", monospace;
}

/* ---- Editor (VS Code-style file tab) ---- */
.ps-win--editor { --psw-bar: #20232e; }
.ps-win--editor .ps-win-bar {
  gap: 0.75rem;
  background: #181b24; /* darker title strip behind the tab */
}
.ps-win-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  max-width: 320px;
  padding: 0 0.85rem;
  background: #20232e; /* active tab = editor body tone */
  border-right: 1px solid rgba(0,0,0,0.4);
  border-top: 2px solid var(--ps-accent);
  margin-bottom: -1px;
}
.ps-win-tab .ps-win-title-icon { color: var(--psw-muted); }
.ps-win-tab .ps-win-title-text {
  min-width: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: var(--psw-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-win-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ps-accent);
}
.ps-win-tabclose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color: var(--psw-muted);
  flex-shrink: 0;
}
.ps-win-tabclose svg { width: 11px; height: 11px; }
.ps-win-tabclose:hover { background: rgba(255,255,255,0.12); color: var(--psw-ink); }
.ps-win--editor .ps-win-body { background: #20232e; }
.ps-win--editor .ps-win-body--text .highlight,
.ps-win--editor .ps-win-body--text pre { background: #20232e !important; }

/* ---- Light mode ---- */
[data-md-color-scheme="default"] .ps-win-frame {
  --psw-ink: #2b2f36;
  --psw-muted: #6b7280;
  border-color: #c2c9d4;
  background: #fff;
}
[data-md-color-scheme="default"] .ps-win--image { --psw-bar: #eef1f5; --psw-body: #fff; }
[data-md-color-scheme="default"] .ps-win--shell { --psw-bar: #11151c; --psw-body: #0a0e14; }
[data-md-color-scheme="default"] .ps-win--editor .ps-win-bar { background: #e6e9ef; }
[data-md-color-scheme="default"] .ps-win--editor .ps-win-tab { background: #fff; }
[data-md-color-scheme="default"] .ps-win--editor .ps-win-body { background: #fff; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .ps-win-bar { height: 36px; padding: 0 0.55rem; gap: 0.45rem; }
  .ps-win-spacer { width: 0; }
  .ps-win-title { font-size: 0.74rem; }
  .ps-win-tab { height: 36px; padding: 0 0.6rem; max-width: 200px; }
  .ps-win-tab .ps-win-title-text { font-size: 0.72rem; }
  .ps-win-dots i { width: 10px; height: 10px; }
}

/* ============================================================================
 * Auto Code Windows
 * initCodeWindows() wraps fenced code blocks in lightweight window chrome
 * (terminal for shell langs, editor otherwise) while keeping the native
 * syntax theme, copy button, and line numbers. Opt out with `.ps-noframe`.
 * ============================================================================ */
.ps-codewin {
  margin: 1.4rem 0;
  border: 1px solid #2a3240;
  border-radius: 10px;
  overflow: hidden;
  background: var(--md-code-bg-color);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.ps-codewin:hover {
  border-color: #36404f;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.ps-codewin-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 36px;
  padding: 0 0.7rem;
  background: rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-codewin .ps-win-dots i { width: 11px; height: 11px; }

.ps-codewin-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.76rem;
}
.ps-codewin-icon { display: inline-flex; flex-shrink: 0; }
.ps-codewin-icon svg { width: 14px; height: 14px; }
.ps-codewin-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #c9d1d9;
}
.ps-codewin-lang {
  margin-left: auto;
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8b98a8;
  padding: 0.12rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.ps-codewin--shell .ps-codewin-icon { color: var(--ps-neon-green); }
.ps-codewin--shell .ps-codewin-name { color: var(--ps-neon-green); opacity: 0.9; }
.ps-codewin--editor .ps-codewin-icon { color: var(--ps-accent); }

/* Inner code block sits flush inside the window */
.ps-codewin .highlight {
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ps-codewin .highlight > pre,
.ps-codewin pre > code,
.ps-codewin pre {
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Light mode */
[data-md-color-scheme="default"] .ps-codewin { border-color: #d0d7de; }
[data-md-color-scheme="default"] .ps-codewin-bar {
  background: rgba(0, 0, 0, 0.05);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-md-color-scheme="default"] .ps-codewin-name { color: #2b2f36; }
[data-md-color-scheme="default"] .ps-codewin-lang {
  color: #6b7280;
  border-color: rgba(0, 0, 0, 0.12);
}

@media (max-width: 600px) {
  .ps-codewin-bar { height: 32px; padding: 0 0.5rem; gap: 0.45rem; }
  .ps-codewin .ps-win-dots i { width: 9px; height: 9px; }
  .ps-codewin-title { font-size: 0.72rem; }
}

/* ============================================================================
 * LIGHT THEME  (v2 � unified, layered palette)
 * Design language: a soft tinted page, crisp white cards that lift with gentle
 * neutral shadows, soft lavender-grey borders, and readable purple/green
 * accents. Every section � including the hero, the "terminal" feed, the quote,
 * and the interactive terminal � adapts to a cohesive light surface.
 *
 * Palette
 *   page        #f4f5fa      surface     #ffffff      surface-alt #f1f2f8
 *   border      #e4e3f0      hairline    #ecebf4
 *   text        #1c1f2b      muted       #5b6172
 *   purple      #6d28d9 (text/icon)      green       #0a8f3c
 * ============================================================================ */
[data-md-color-scheme="default"] {
  /* Material core � pure white page background */
  --md-default-bg-color: #ffffff;
  --md-typeset-a-color: #6d28d9;

  /* Brand accents (tuned for contrast on white) */
  --ps-accent: #6d28d9;
  --ps-accent-glow: rgba(109, 40, 217, 0.22);
  --ps-neon: #b5179e;
  --ps-neon-green: #0a8f3c;
  --ps-cyber-green: #0a8f3c;
  --ps-green: #0a8f3c;

  /* Surfaces / text / borders */
  --ps-dark-bg: #eaecf4;
  --ps-dark-surface: #ffffff;
  --ps-dark-border: #e4e3f0;
  --ps-dark-text: #1c1f2b;
  --ps-terminal-bg: #ffffff;
  --ps-card-bg: #ffffff;
  --ps-card-border: #e4e3f0;

  /* Soft neutral elevation instead of neon glows (deepened for pure-white page) */
  --ps-glow-sm: 0 1px 3px rgba(20, 22, 43, 0.08), 0 5px 16px rgba(20, 22, 43, 0.08);
  --ps-glow-md: 0 2px 8px rgba(20, 22, 43, 0.10), 0 16px 38px rgba(20, 22, 43, 0.13);
  --ps-glow-lg: 0 10px 44px rgba(20, 22, 43, 0.16);
  --ps-glow-green-sm: 0 2px 12px rgba(10, 143, 60, 0.12);
  --ps-glow-green-md: 0 4px 20px rgba(10, 143, 60, 0.16);
}

/* Matrix rain only reads on a dark canvas � hide it in light mode */
[data-md-color-scheme="default"] #ps-matrix-canvas { display: none !important; }

/* ---------------------------------------------------------------------------
 * Content card surfaces: crisp white + gentle resting shadow (depth on the
 * tinted page). !important overrides the older purple-tint light rules.
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .ps-stat-card,
[data-md-color-scheme="default"] .ps-cert-card,
[data-md-color-scheme="default"] .ps-featured,
[data-md-color-scheme="default"] .ps-blog-card,
[data-md-color-scheme="default"] .ps-spotlight,
[data-md-color-scheme="default"] .ps-fx-card,
[data-md-color-scheme="default"] .ps-contact-terminal,
[data-md-color-scheme="default"] .ps-home .md-typeset .grid.cards > ol > li,
[data-md-color-scheme="default"] .ps-home .md-typeset .grid.cards > ul > li {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(20, 22, 43, 0.09), 0 8px 24px rgba(20, 22, 43, 0.10) !important;
}

[data-md-color-scheme="default"] .ps-home-cta {
  background:
    radial-gradient(circle at 50% 0%, rgba(109, 40, 217, 0.08), transparent 60%),
    #ffffff;
  box-shadow: 0 1px 3px rgba(20, 22, 43, 0.09), 0 12px 34px rgba(20, 22, 43, 0.12);
}

/* Card "terminal" title bars ? light grey strips (match the window frames) */
[data-md-color-scheme="default"] .ps-card-terminal-header,
[data-md-color-scheme="default"] .ps-spotlight-bar,
[data-md-color-scheme="default"] .ps-contact-bar,
[data-md-color-scheme="default"] .ps-cert-bar,
[data-md-color-scheme="default"] .ps-terminal-bar,
[data-md-color-scheme="default"] .ps-featured-bar,
[data-md-color-scheme="default"] .ps-stat-card::before,
[data-md-color-scheme="default"] .ps-home .md-typeset .grid.cards > ol > li::before,
[data-md-color-scheme="default"] .ps-home .md-typeset .grid.cards > ul > li::before {
  background: #f1f2f8;
  border-bottom-color: var(--ps-card-border);
}
[data-md-color-scheme="default"] .ps-spotlight-bar-path,
[data-md-color-scheme="default"] .ps-contact-bar-title { color: rgba(109, 40, 217, 0.7); }

/* ---------------------------------------------------------------------------
 * Hero � light treatment (no longer a dark band)
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .ps-nh-hero {
  background: linear-gradient(160deg, #faf8ff 0%, #f4f5fa 55%, #f1fbf5 100%);
}
[data-md-color-scheme="default"] .ps-nh-title,
[data-md-color-scheme="default"] .ps-about-name {
  background: linear-gradient(110deg, #6d28d9 0%, #b5179e 52%, #0a8f3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
[data-md-color-scheme="default"] .ps-nh-orb-1 { background: radial-gradient(circle, rgba(109,40,217,0.18), transparent 70%); }
[data-md-color-scheme="default"] .ps-nh-orb-2 { background: radial-gradient(circle, rgba(10,143,60,0.14), transparent 70%); }
[data-md-color-scheme="default"] .ps-nh-orb-3 { background: radial-gradient(circle, rgba(181,23,158,0.14), transparent 70%); }
[data-md-color-scheme="default"] .ps-nh-grid {
  background-image:
    linear-gradient(rgba(109,40,217,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,40,217,0.07) 1px, transparent 1px);
}

/* ---------------------------------------------------------------------------
 * Dashboard "terminal" feed � light surface, readable text
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .ps-dashboard-terminal {
  background: #ffffff;
  border-color: var(--ps-card-border);
  box-shadow: 0 1px 2px rgba(20, 22, 43, 0.05), 0 6px 18px rgba(20, 22, 43, 0.05);
}
[data-md-color-scheme="default"] .ps-term-feed-title { color: var(--ps-dark-text); }
[data-md-color-scheme="default"] .ps-term-feed-item:hover { background: rgba(109, 40, 217, 0.05); }
[data-md-color-scheme="default"] .ps-term-feed-item:hover .ps-term-feed-title { color: var(--ps-accent); }
[data-md-color-scheme="default"] .ps-term-feed::-webkit-scrollbar-thumb { background: rgba(109, 40, 217, 0.3); }

/* ---------------------------------------------------------------------------
 * Quote band / quote-in-terminal � light surface, readable text
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .ps-quote {
  background: transparent !important;
  border-top-color: var(--ps-card-border);
}
[data-md-color-scheme="default"] .ps-quote blockquote { color: var(--ps-accent); }
[data-md-color-scheme="default"] .ps-quote-terminal .ps-quote blockquote { color: #0a8f3c; }

/* ---------------------------------------------------------------------------
 * Interactive terminal (About) + legacy hero terminal � light surface
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] #interactive-terminal,
[data-md-color-scheme="default"] .ps-hero-terminal,
[data-md-color-scheme="default"] .ps-dashboard-terminal--solid {
  background: #ffffff;
}
[data-md-color-scheme="default"] .ps-terminal-header { background: #f1f2f8; border-bottom-color: var(--ps-card-border); }
[data-md-color-scheme="default"] .ps-terminal-header-title { color: rgba(28, 31, 43, 0.5); }
[data-md-color-scheme="default"] .ps-terminal-window { color: var(--ps-dark-text); }
[data-md-color-scheme="default"] .ps-prompt-at { color: #5b6172; }
[data-md-color-scheme="default"] .ps-terminal-input { color: var(--ps-dark-text); caret-color: var(--ps-accent); }

/* ---------------------------------------------------------------------------
 * Image edge-fades resolve to the light surface (not a dark smear)
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .ps-spotlight-media::after {
  background: linear-gradient(90deg, rgba(255,255,255,0) 55%, rgba(255,255,255,0.92) 100%);
}
[data-md-color-scheme="default"] .ps-blog-card-media::after {
  background: linear-gradient(90deg, rgba(255,255,255,0) 64%, rgba(255,255,255,0.45) 100%);
}
@media (max-width: 768px) {
  [data-md-color-scheme="default"] .ps-spotlight-media::after {
    background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(255,255,255,0.96) 100%);
  }
}
@media (max-width: 700px) {
  [data-md-color-scheme="default"] .ps-blog-card-media::after {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 55%, rgba(255,255,255,0.85) 100%);
  }
}

/* ---------------------------------------------------------------------------
 * Pills, tags, toolbars, hovers
 * ------------------------------------------------------------------------- */
/* Active (purple-filled) tag needs white text; difficulty pills keep black */
[data-md-color-scheme="default"] .ps-tag-active:not(.ps-diff-filter) { color: #fff !important; }
[data-md-color-scheme="default"] .ps-tag-filter { background: rgba(109, 40, 217, 0.05); }
[data-md-color-scheme="default"] .ps-tag-filter:hover {
  background: rgba(109, 40, 217, 0.12);
  color: var(--ps-accent);
}
[data-md-color-scheme="default"] .ps-archive-year-header:hover { color: #111 !important; }
[data-md-color-scheme="default"] #ps-load-more-btn { background: rgba(109, 40, 217, 0.07); }
[data-md-color-scheme="default"] #ps-load-more-btn:hover { background: rgba(109, 40, 217, 0.14); }

/* Cert status chips � readable tints on white */
[data-md-color-scheme="default"] .ps-cert-status--certified { background: rgba(10, 143, 60, 0.10); border-color: rgba(10, 143, 60, 0.30); }
[data-md-color-scheme="default"] .ps-cert-status--progress { background: rgba(109, 40, 217, 0.10); border-color: rgba(109, 40, 217, 0.30); }
[data-md-color-scheme="default"] .ps-cert-status--preparing { color: #b06a00; background: rgba(176, 106, 0, 0.10); border-color: rgba(176, 106, 0, 0.30); }

/* ---------------------------------------------------------------------------
 * Contact form � lighten inputs, fix chips
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .ps-contact-field input,
[data-md-color-scheme="default"] .ps-contact-field textarea {
  background: #f4f5fa;
  border-color: var(--ps-card-border);
  color: var(--ps-dark-text);
}
[data-md-color-scheme="default"] .ps-contact-field input::placeholder,
[data-md-color-scheme="default"] .ps-contact-field textarea::placeholder {
  color: rgba(28, 31, 43, 0.4);
}
[data-md-color-scheme="default"] .ps-contact-chip { background: #ffffff; }
[data-md-color-scheme="default"] .ps-contact-chip:hover {
  background: rgba(109, 40, 217, 0.06);
  color: var(--ps-accent) !important;
}

/* ---------------------------------------------------------------------------
 * Code & window frames � align borders/bars to the light palette
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .ps-codewin,
[data-md-color-scheme="default"] .ps-browser-frame,
[data-md-color-scheme="default"] .ps-win-frame {
  box-shadow: 0 1px 2px rgba(20, 22, 43, 0.05), 0 8px 22px rgba(20, 22, 43, 0.07);
}

/* Masthead bottom rule + faint section dividers use the soft border token */
[data-md-color-scheme="default"] .ps-section-divider {
  box-shadow: none;
}

/* ============================================================================
 * Chrome � Header, Tabs & Footer (minimal Material)
 * The default surface chrome is already clean; we only add a crisp hairline,
 * a restrained brand-accent on the active/hovered tab, a theme-aware footer,
 * and quiet hovers. No glass, gradients, glow, or motion.
 * ============================================================================ */

/* Header: keep Material's themed surface; add a subtle divider + light-mode lift */
.md-header { border-bottom: 1px solid var(--ps-card-border); }
[data-md-color-scheme="default"] .md-header { box-shadow: 0 1px 3px rgba(20, 22, 43, 0.06); }

/* Tabs: quiet hover, brand-accent active link */
.md-tabs__link { transition: color 0.2s ease, opacity 0.2s ease; }
.md-tabs__link:hover { opacity: 1; color: var(--ps-accent); }
.md-tabs__item--active .md-tabs__link { color: var(--ps-accent); font-weight: 600; opacity: 1; }

/* Footer: theme-aware through Material's own variables (light in light mode) */
[data-md-color-scheme="default"] {
  --md-footer-bg-color: #f4f5fa;
  --md-footer-bg-color--dark: #eef0f6;
  --md-footer-fg-color: #1c1f2b;
  --md-footer-fg-color--light: #3a3f4c;
  --md-footer-fg-color--lighter: #6b7180;
}
.md-footer-meta { border-top: 1px solid var(--ps-card-border); }

/* Hide the "Made with Zensical" attribution (keep the copyright line) */
.md-copyright { font-size: 0; }
.md-copyright__highlight { font-size: 0.64rem; }

/* Social icons: simple accent on hover */
.md-social__link { transition: color 0.2s ease, opacity 0.2s ease; }
.md-social__link:hover { color: var(--ps-accent); opacity: 1; }

/* Prev / next page links: subtle hover surface */
.md-footer__link { border-radius: 8px; transition: background 0.2s ease; }
.md-footer__link:hover { background: rgba(124, 58, 237, 0.06); }
[data-md-color-scheme="default"] .md-footer__link:hover { background: rgba(109, 40, 217, 0.05); }

/* ============================================================================
 * Image Zoom (lightbox)  � initImageZoom()
 * ============================================================================ */
.ps-zoomable { cursor: zoom-in; }
.ps-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(6, 8, 13, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  cursor: zoom-out;
  user-select: none;
}
.ps-lightbox.is-open { opacity: 1; visibility: visible; }
.ps-lightbox-stage {
  width: 100%;
  max-width: min(1100px, 94vw);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transform: scale(0.96);
  transition: transform 0.12s ease-out;
  transform-origin: center center;
  position: relative;
  cursor: grab;
}
.ps-lightbox-stage:active { cursor: grabbing; }
.ps-lightbox.is-open .ps-lightbox-stage { transform: scale(1); }
.ps-lightbox-img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
/* Cloned window frame shown at full size � drop margins, kill hover motion */
.ps-lightbox-frame {
  width: 100%;
  margin: 0 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6) !important;
}
.ps-lightbox-frame:hover { transform: none !important; }
/* Mermaid diagram shown enlarged � padded surface so it reads on the dim overlay */
.ps-lightbox-stage--diagram {
  background: var(--md-default-bg-color, #fff);
  border: 1px solid var(--ps-card-border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  max-width: min(1200px, 94vw);
  cursor: grab;
  position: relative;
}
.ps-lightbox-stage--diagram:active { cursor: grabbing; }
.ps-lightbox-svg {
  display: block;
  max-width: 100%;
  max-height: 92vh;
}
.ps-lightbox-mermaid {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.ps-lightbox-mermaid svg {
  display: block;
}
/* Ensure mermaid text is readable in the lightbox for both themes */
.ps-lightbox-mermaid .node rect,
.ps-lightbox-mermaid .node circle,
.ps-lightbox-mermaid .node ellipse,
.ps-lightbox-mermaid .node polygon,
.ps-lightbox-mermaid .node path {
  stroke-width: 1.5px;
}
.ps-lightbox-mermaid .edgeLabel {
  font-size: 14px;
}
.ps-lightbox-mermaid text {
  font-size: 14px !important;
  font-family: var(--md-mermaid-font-family, var(--md-text-font, "IBM Plex Mono")), sans-serif !important;
}
/* Fallback mermaid note vars (not defined by all Material versions) */
:root > * {
  --md-mermaid-note-bg-color: var(--md-mermaid-node-bg-color);
  --md-mermaid-note-fg-color: var(--md-mermaid-label-fg-color);
  --md-mermaid-note-border-color: var(--md-mermaid-node-fg-color);
}
/* Zoom hint */
.ps-lightbox-stage--diagram::after {
  content: "Scroll to zoom \B7  Drag to pan \B7  Double-click to reset";
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light, rgba(255,255,255,0.5));
  opacity: 0.6;
  pointer-events: none;
  white-space: nowrap;
}
.ps-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ps-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
@media (prefers-reduced-motion: reduce) {
  .ps-lightbox, .ps-lightbox-stage { transition: none; }
}

/* ============================================================================
 * Layout Toggles � collapse nav / TOC  (initLayoutToggles())
 * Slim arrow tabs on the page edges; state persists in localStorage.
 * ============================================================================ */
.ps-layout-toggle {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 24px;
  height: 52px;
  display: none; /* enabled per breakpoint below + toggled by JS visibility */
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--md-default-bg-color);
  border: 1px solid var(--ps-card-border);
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 22, 43, 0.12);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ps-layout-toggle:hover { color: var(--ps-accent); border-color: var(--ps-accent); }
.ps-layout-toggle svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
.ps-layout-toggle--nav { left: 0; border-left: none; border-radius: 0 8px 8px 0; }
.ps-layout-toggle--toc { right: 0; border-right: none; border-radius: 8px 0 0 8px; }

/* Arrow flips when its panel is collapsed */
.ps-nav-collapsed .ps-layout-toggle--nav svg { transform: rotate(180deg); }
.ps-toc-collapsed .ps-layout-toggle--toc svg { transform: rotate(180deg); }

/* Collapse the sidebars � flex lets the content reclaim the space */
.ps-nav-collapsed .md-sidebar--primary { display: none; }
.ps-toc-collapsed .md-sidebar--secondary { display: none; }

/* Toggles appear only where their sidebar exists: TOC >= 60em, nav >= 76.25em */
@media screen and (min-width: 60em) {
  .ps-layout-toggle--toc { display: flex; }
}
@media screen and (min-width: 76.25em) {
  .ps-layout-toggle--nav { display: flex; }
}

/* ============================================================================
 * Reading Settings � user-selectable body font + text size
 * Font is swapped via Material's text-font variable so CODE stays monospace.
 * Size scales the article body via --ps-reading-scale.
 * ============================================================================ */
:root.ps-font-mono  { --md-text-font: "IBM Plex Mono"; }
:root.ps-font-sans  { --md-text-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
:root.ps-font-serif { --md-text-font: Georgia, Cambria, "Times New Roman", Times, serif; }
/* "News" � Indian Express body serif (PT Serif webfont, loaded in main.html). */
:root.ps-font-news  { --md-text-font: "PT Serif", Georgia, "Times New Roman", serif; }
/* PT Serif reads a bit smaller: give it a touch more size + leading for that print-news feel. */
:root.ps-font-news .md-content .md-typeset {
  font-size: calc(0.8rem * var(--ps-reading-scale, 1));
  line-height: 1.75;
}

/* Reading size � scales the article copy (headings are em-based, so they follow).
 * Base lowered from 0.8rem ? 0.72rem: IBM Plex Mono renders wide, so the smaller
 * base reads comfortably for long articles. The S/M/L/XL toggle scales on top. */
.md-content .md-typeset {
  font-size: calc(0.72rem * var(--ps-reading-scale, 1));
  line-height: 1.7;
}

/* Floating "Aa" button */
.ps-reading-fab {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 7;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-default-bg-color);
  border: 1px solid var(--ps-card-border);
  color: var(--md-default-fg-color--light);
  box-shadow: 0 4px 16px rgba(20, 22, 43, 0.18);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 0.95rem;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ps-reading-fab:hover {
  color: var(--ps-accent);
  border-color: var(--ps-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 22, 43, 0.22);
}

/* Popover */
.ps-reading-panel {
  position: fixed;
  bottom: 4.7rem;
  right: 1.4rem;
  z-index: 7;
  width: 234px;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--ps-card-border);
  border-radius: 12px;
  box-shadow: 0 14px 42px rgba(20, 22, 43, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.ps-reading-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.ps-reading-title {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 0.8rem;
  color: var(--md-default-fg-color);
}
.ps-reading-group { margin-bottom: 0.85rem; }
.ps-reading-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.45rem;
}
.ps-reading-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
/* Font row has 4 wider labels � lay them out 2�2 so nothing gets clipped. */
.ps-reading-chips--grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.ps-reading-chip {
  flex: 1;
  min-width: 38px;
  padding: 0.42rem 0.5rem;
  text-align: center;
  border-radius: 7px;
  border: 1px solid var(--ps-card-border);
  background: transparent;
  color: var(--md-default-fg-color--light);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.74rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ps-reading-chip:hover { color: var(--ps-accent); border-color: var(--ps-accent); }
.ps-reading-chip.is-active {
  background: var(--ps-accent);
  border-color: var(--ps-accent);
  color: #0a0e14;
}
[data-md-color-scheme="default"] .ps-reading-chip.is-active { color: #fff; }
.ps-reading-reset {
  width: 100%;
  margin-top: 0.25rem;
  padding-top: 0.6rem;
  border: none;
  border-top: 1px solid var(--ps-card-border);
  background: transparent;
  color: var(--md-default-fg-color--light);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.15s ease;
}
.ps-reading-reset:hover { color: var(--ps-accent); }

@media (prefers-reduced-motion: reduce) {
  .ps-reading-panel { transition: none; }
}

/* ============================================================================
 * MINIMAL HOME (v3) � clean, card-based, Material
 * Self-contained .ps-mh-* classes (none of the old flashy hero/terminal CSS).
 * ============================================================================ */
.ps-mh-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 4rem 1.5rem 2rem;
  text-align: center;
}
.ps-mh-eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ps-accent);
  background: var(--ps-card-bg);
  border: 1px solid var(--ps-card-border);
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}
.ps-mh-title {
  font-size: clamp(2.6rem, 7vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0 0 1rem;
  color: var(--md-default-fg-color);
}
.ps-mh-lead {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--md-default-fg-color--light);
  max-width: 640px;
  margin: 0 auto 1.8rem;
}
.ps-mh-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.ps-mh-actions .md-button { margin: 0; }

/* Section heading */
.ps-mh-head { text-align: center; margin: 3.5rem 0 1.6rem; }
.ps-mh-head-eyebrow {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ps-accent);
  margin-bottom: 0.4rem;
}
.ps-mh-head h2 {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
  color: var(--md-default-fg-color);
  border: none;
}
.ps-mh-head p { margin: 0; font-size: 0.95rem; color: var(--md-default-fg-color--light); }

/* Grids */
.ps-mh-grid { display: grid; gap: 1.1rem; }
.ps-mh-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ps-mh-hero-cards { margin-top: 0.5rem; }
.ps-mh-certs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 900px) { .ps-mh-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ps-mh-grid--4 { grid-template-columns: 1fr; } }

/* Card */
.ps-mh-card {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit !important;
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ps-mh-card:hover {
  transform: translateY(-4px);
  border-color: var(--ps-accent);
  box-shadow: var(--ps-glow-md);
}
.ps-mh-card-icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ps-card-bg);
  border: 1px solid var(--ps-card-border);
  color: var(--ps-accent);
  margin-bottom: 1rem;
}
.ps-mh-card-title { font-weight: 700; font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--md-default-fg-color); }
.ps-mh-card-desc { font-size: 0.88rem; line-height: 1.6; color: var(--md-default-fg-color--light); margin: 0 0 1rem; flex: 1; }
.ps-mh-card-link { font-size: 0.82rem; font-weight: 600; color: var(--ps-accent); display: inline-flex; align-items: center; gap: 0.3rem; transition: gap 0.2s ease; }
.ps-mh-card:hover .ps-mh-card-link { gap: 0.55rem; }

/* Stats */
.ps-mh-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-top: 2rem;
}
@media (max-width: 560px) { .ps-mh-stats { grid-template-columns: repeat(2, 1fr); } }
.ps-mh-stat {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 14px;
}
.ps-mh-stat-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ps-accent);
}
.ps-mh-stat-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-default-fg-color--light);
  margin-top: 0.55rem;
}

/* Featured post */
.ps-mh-feat {
  display: grid;
  grid-template-columns: 44% 56%;
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ps-mh-feat:hover { transform: translateY(-4px); border-color: var(--ps-accent); box-shadow: var(--ps-glow-md); }
.ps-mh-feat-media { background-size: cover; background-position: center; min-height: 240px; background-color: var(--ps-card-bg); }
.ps-mh-feat-body { padding: 2rem; }
.ps-mh-feat-badge {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ps-accent);
  background: var(--ps-card-bg);
  border: 1px solid var(--ps-card-border);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}
.ps-mh-feat-title { font-size: 1.4rem; font-weight: 800; line-height: 1.25; margin: 0.85rem 0 0.6rem; color: var(--md-default-fg-color); }
.ps-mh-feat:hover .ps-mh-feat-title { color: var(--ps-accent); }
.ps-mh-feat-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; color: var(--md-default-fg-color--light); margin-bottom: 0.85rem; }
.ps-mh-feat-summary { font-size: 0.92rem; line-height: 1.6; color: var(--md-default-fg-color--light); margin: 0 0 1.1rem; }
.ps-mh-feat-link { font-size: 0.85rem; font-weight: 700; color: var(--ps-accent); display: inline-flex; align-items: center; gap: 0.35rem; transition: gap 0.2s ease; }
.ps-mh-feat:hover .ps-mh-feat-link { gap: 0.6rem; }
@media (max-width: 760px) {
  .ps-mh-feat { grid-template-columns: 1fr; }
  .ps-mh-feat-media { min-height: 180px; }
}

/* Recent posts list card */
.ps-mh-recent {
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 16px;
  overflow: hidden;
}
.ps-mh-recent-item {
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid var(--ps-card-border);
  text-decoration: none !important;
  color: inherit !important;
  transition: background 0.15s ease;
}
.ps-mh-recent-item:last-child { border-bottom: none; }
.ps-mh-recent-item:hover { background: var(--ps-card-bg); }
.ps-mh-recent-date {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: var(--ps-accent);
  min-width: 118px;
  flex-shrink: 0;
}
.ps-mh-recent-title { font-size: 0.92rem; line-height: 1.45; color: var(--md-default-fg-color); }
.ps-mh-recent-item:hover .ps-mh-recent-title { color: var(--ps-accent); }
.ps-mh-recent-foot { text-align: center; padding: 1rem; }
.ps-mh-recent-foot a { font-family: "JetBrains Mono", monospace; font-size: 0.84rem; font-weight: 600; color: var(--ps-accent); }
@media (max-width: 560px) {
  .ps-mh-recent-item { flex-direction: column; gap: 0.2rem; }
  .ps-mh-recent-date { min-width: auto; }
}

/* Certifications */
.ps-mh-cert {
  text-align: center;
  padding: 1.4rem 1rem;
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ps-mh-cert:hover { transform: translateY(-4px); border-color: var(--ps-accent); box-shadow: var(--ps-glow-sm); }
.ps-mh-cert-logo { height: 1.9rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0.8rem; }
.ps-mh-cert-logo img { max-height: 100%; max-width: 78%; object-fit: contain; }
.ps-mh-cert-name { font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: 1.1rem; color: var(--md-default-fg-color); }
.ps-mh-cert-full { font-size: 0.72rem; line-height: 1.35; color: var(--md-default-fg-color--light); margin: 0.25rem 0 0.7rem; }
.ps-mh-cert-status {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
}
.ps-mh-cert-status--ok { color: var(--ps-neon-green); background: var(--ps-card-bg); border: 1px solid var(--ps-card-border); }
.ps-mh-cert-status--wip { color: var(--ps-accent); background: var(--ps-card-bg); border: 1px solid var(--ps-card-border); }

/* Quote card (reuses the carousel JS hooks) */
.ps-mh-quote {
  text-align: center;
  padding: 2.6rem 1.5rem;
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 16px;
}
.ps-mh-quote blockquote {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--md-default-fg-color);
  max-width: 640px;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Closing CTA */
.ps-mh-cta {
  text-align: center;
  margin: 3.5rem 0 1rem;
  padding: 2.8rem 2rem;
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 16px;
}
.ps-mh-cta h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.7rem; color: var(--md-default-fg-color); border: none; }
.ps-mh-cta p { max-width: 560px; margin: 0 auto 1.5rem; color: var(--md-default-fg-color--light); }
.ps-mh-cta-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.ps-mh-cta-actions .md-button { margin: 0; }

/* ============================================================================
 * MINIMAL ABOUT � reuses .ps-mh-* plus a few about-specific pieces
 * ============================================================================ */
.ps-mh-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .ps-mh-grid--2 { grid-template-columns: 1fr; } }

/* Experience cards (use .ps-mh-card base + this inner structure) */
.ps-mh-exp-role { font-weight: 700; font-size: 1.1rem; color: var(--md-default-fg-color); margin: 0 0 0.2rem; }
.ps-mh-exp-meta { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; color: var(--ps-accent); margin-bottom: 0.85rem; }
.ps-mh-exp-list { margin: 0; padding-left: 1.1rem; color: var(--md-default-fg-color--light); font-size: 0.9rem; line-height: 1.6; }
.ps-mh-exp-list li { margin-bottom: 0.4rem; }

/* Skill bars */
.ps-mh-skills {
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 16px;
  padding: 1.9rem 1.9rem 0.9rem;
}
.ps-mh-skill { margin-bottom: 1.2rem; }
.ps-mh-skill-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.45rem; }
.ps-mh-skill-name { font-size: 0.9rem; font-weight: 600; color: var(--md-default-fg-color); }
.ps-mh-skill-pct { font-family: "JetBrains Mono", monospace; font-size: 0.8rem; color: var(--ps-accent); }
.ps-mh-skill-track {
  height: 8px;
  background: var(--ps-card-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 999px;
  overflow: hidden;
}
.ps-mh-skill-fill { height: 100%; background: var(--ps-accent); border-radius: 999px; }

/* HTB badge card */
.ps-mh-htb {
  text-align: center;
  padding: 2rem;
  background: var(--ps-terminal-bg);
  border: 1px solid var(--ps-card-border);
  border-radius: 16px;
}
.ps-mh-htb img { max-width: 100%; height: auto; border-radius: 8px; }
.ps-mh-htb a { display: inline-block; transition: transform 0.2s ease; }
.ps-mh-htb a:hover { transform: translateY(-3px); }

/* ============================================================================
 * Code highlighting � calm terminal/output blocks
 * Highlighting command OUTPUT (nmap, etc.) turns every IP/port/word into a
 * noisy rainbow (esp. the red number color). For terminal-session languages
 * we neutralize the token colors to the base code color so output reads like
 * a real terminal � strings stay green and comments muted for a subtle vibe.
 * Real languages (php/python/js/�) keep full Material highlighting.
 * ============================================================================ */
.md-typeset .language-shell,
.md-typeset .language-console,
.md-typeset .language-shell-session,
.md-typeset .language-sh-session,
.md-typeset .language-con,
.md-typeset .language-text,
.md-typeset .language-output {
  --md-code-hl-number-color: var(--md-code-fg-color);
  --md-code-hl-keyword-color: var(--md-code-fg-color);
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-function-color: var(--md-code-fg-color);
  --md-code-hl-constant-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: var(--md-code-fg-color);
  --md-code-hl-punctuation-color: var(--md-code-fg-color);
  --md-code-hl-variable-color: var(--md-code-fg-color);
  --md-code-hl-generic-color: var(--md-code-fg-color);
  --md-code-hl-special-color: var(--md-code-fg-color);
  --md-code-hl-string-color: var(--ps-neon-green);
  --md-code-hl-comment-color: var(--md-default-fg-color--light);
}

/* --------------------------------------------------------------------------
 * Header Border Fix (Remove Double Line)
 * -------------------------------------------------------------------------- */
.md-header {
  box-shadow: none !important;
  border-bottom: none !important;
}

/* --------------------------------------------------------------------------
 * Light Mode Fixes (Blog Image Fading)
 * -------------------------------------------------------------------------- */
/* Remove the fading overlay completely in light mode for a crisp, clean look */
[data-md-color-scheme="default"] .ps-spotlight-media::after,
[data-md-color-scheme="default"] .ps-blog-card-media::after {
  display: none !important;
}

/* ============================================================================
 * Audio Player � sidebar "Listen to Article" player
 * ========================================================================== */
 * Audio Player � sidebar "Listen to Article" player
 * ========================================================================== */

.ps-audio-wrapper {
  width: 100%;
  background: var(--ps-terminal-bg, #0d1117);
  border: 1px solid var(--ps-card-border, #1e2a3a);
  border-radius: 8px;
  padding: 0.6rem 0.75rem 0.5rem;
  margin-top: 0.2rem;
}

.ps-audio-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ps-accent, #bb86fc);
  margin-bottom: 0.45rem;
}

.ps-audio-label svg {
  opacity: 0.85;
  color: var(--ps-accent, #bb86fc);
}

.ps-audio-wrapper audio {
  width: 100%;
  height: 28px;
  border-radius: 4px;
  outline: none;
}

/* Webkit audio styling (Chrome/Edge) */
.ps-audio-wrapper audio::-webkit-media-controls-panel {
  background: var(--ps-terminal-bg, #0d1117);
}

/* Light mode overrides */
[data-md-color-scheme="default"] .ps-audio-wrapper {
  background: #f4f5fa;
  border-color: #e4e3f0;
}

[data-md-color-scheme="default"] .ps-audio-label {
  color: #6d28d9;
}

[data-md-color-scheme="default"] .ps-audio-label svg {
  color: #6d28d9;
}

/* ============================================================================
 * MOBILE POLISH — small-screen readability & overflow hardening
 * Everything here is gated behind max-width media queries, so the desktop
 * layout is completely unaffected. Ordered widest → narrowest.
 * ============================================================================ */

/* ---- Tablets & phones (<= 768px) --------------------------------------- */
@media screen and (max-width: 768px) {
  /* Kill sideways page scroll from decorative/full-bleed sections.
     `clip` (not `hidden`) so the sticky header keeps working. */
  .md-main { overflow-x: clip; }

  /* Long inline strings (URLs, tokens) shouldn't force the page wider */
  .md-content .md-typeset { overflow-wrap: break-word; word-wrap: break-word; }

  /* Give reference tables their own horizontal scroll instead of the page */
  .md-typeset .md-typeset__table,
  .md-typeset > table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tighten the home content gutter a touch */
  .ps-home .ps-content-wrap { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ---- Phones (<= 600px) ------------------------------------------------- */
@media screen and (max-width: 600px) {
  /* Denser, more legible tables on small screens */
  .md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td {
    padding: 0.5rem 0.6rem;
    font-size: 0.78rem;
  }

  /* Section heading scale so long titles don't wrap awkwardly */
  .ps-mh-head h2,
  .ps-mh-hero .ps-mh-title { line-height: 1.15; }
  .ps-mh-hero { padding-top: 3rem; padding-bottom: 1.5rem; }

  /* Reading-settings button: move to the left so it never sits on top of
     Material's "back to top" button (bottom-right) on mobile */
  .ps-reading-fab { right: auto; left: 1rem; bottom: 1rem; width: 42px; height: 42px; }
  .ps-reading-panel { right: auto; left: 1rem; bottom: 4rem; width: min(240px, calc(100vw - 2rem)); }

  /* Blockquotes / callouts shouldn't hug the edges */
  .md-typeset .admonition, .md-typeset details { margin-left: 0; margin-right: 0; }
}

/* ---- Small phones (<= 420px) ------------------------------------------- */
@media screen and (max-width: 420px) {
  /* Slightly smaller code so fewer lines wrap/scroll horizontally */
  .md-typeset pre > code { font-size: 0.72rem; }

  /* Article H1 stays punchy but fits narrow viewports */
  .md-content .md-typeset h1 { font-size: 1.5rem; line-height: 1.2; }

  /* Stack any remaining button rows full-width for easy tapping */
  .ps-mh-cta-actions .md-button,
  .ps-mh-actions .md-button { width: 100%; text-align: center; }
}

/* ============================================================================
 * KNOWLEDGE BASE COLLAPSIBLE NAVIGATION & ACCORDIONS
 * ============================================================================ */

/* Sidebar Navigation Collapsible Polishing */
.md-nav--primary .md-nav__item--nested > .md-nav__container {
  transition: background-color 0.2s ease, border-color 0.2s ease;
  border-radius: 6px;
  margin-bottom: 2px;
}

.md-nav--primary .md-nav__item--nested > .md-nav__container:hover {
  background-color: rgba(187, 134, 252, 0.08);
}

.md-nav--primary .md-nav__item--nested .md-nav__link {
  font-weight: 500;
}

.md-nav--primary .md-nav__item--nested > input:checked ~ .md-nav__container .md-nav__icon {
  transform: rotate(90deg);
}

.md-nav--primary .md-nav__icon {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Knowledge Base Overview Collapsible Accordions */
.ps-kb-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 0.8rem 1.2rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(187, 134, 252, 0.15);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.ps-kb-controls-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ps-accent, #bb86fc);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ps-kb-btn-group {
  display: flex;
  gap: 0.5rem;
}

.ps-kb-btn {
  background: rgba(187, 134, 252, 0.1);
  color: var(--md-typeset-a-color, #bb86fc);
  border: 1px solid rgba(187, 134, 252, 0.25);
  border-radius: 6px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ps-kb-btn:hover {
  background: var(--ps-accent, #bb86fc);
  color: #0d1117;
  border-color: var(--ps-accent, #bb86fc);
  transform: translateY(-1px);
}

.ps-kb-accordions {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.ps-kb-accordion {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(187, 134, 252, 0.15);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ps-kb-accordion[open] {
  border-color: rgba(187, 134, 252, 0.4);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25), 0 0 15px rgba(187, 134, 252, 0.08);
}

.ps-kb-summary {
  list-style: none;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  background: rgba(255, 255, 255, 0.01);
  transition: background-color 0.2s ease;
}

.ps-kb-summary::-webkit-details-marker,
.ps-kb-summary::marker {
  display: none;
}

.ps-kb-summary:hover {
  background: rgba(187, 134, 252, 0.06);
}

.ps-kb-summary-left {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.ps-kb-index {
  font-family: var(--md-font-code, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ps-accent, #bb86fc);
  background: rgba(187, 134, 252, 0.1);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.ps-kb-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ps-kb-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--md-typeset-color, #c9d1d9);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ps-kb-desc {
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light, #8b949e);
  margin: 0;
}

.ps-kb-summary-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ps-kb-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ps-kb-chevron {
  width: 22px;
  height: 22px;
  color: var(--ps-accent, #bb86fc);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-kb-accordion[open] .ps-kb-chevron {
  transform: rotate(180deg);
}

.ps-kb-body {
  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(187, 134, 252, 0.1);
  background: rgba(10, 14, 20, 0.4);
}

.ps-kb-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

.ps-kb-subcard {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 1rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ps-kb-subcard:hover {
  border-color: rgba(187, 134, 252, 0.25);
  transform: translateY(-2px);
}

.ps-kb-subheading {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ps-accent, #bb86fc);
  margin-top: 0;
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px dashed rgba(187, 134, 252, 0.2);
  padding-bottom: 0.4rem;
}

.ps-kb-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ps-kb-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--md-typeset-color);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ps-kb-link-pill:hover {
  background: rgba(187, 134, 252, 0.15);
  border-color: rgba(187, 134, 252, 0.4);
  color: #fff;
  transform: translateY(-1px);
}

.ps-kb-link-pill.overview-pill {
  background: rgba(187, 134, 252, 0.12);
  border-color: rgba(187, 134, 252, 0.3);
  font-weight: 600;
  color: var(--ps-accent, #bb86fc);
}

@media screen and (max-width: 600px) {
  .ps-kb-summary {
    padding: 1rem;
  }
  .ps-kb-summary-left {
    gap: 0.8rem;
  }
  .ps-kb-desc {
    display: none;
  }
  .ps-kb-badge {
    display: none;
  }
  .ps-kb-subgrid {
    grid-template-columns: 1fr;
  }
}