@font-face {
      font-family: 'London';
      src: url('./fonts/ChakraPetch-Bold.ttf') format('truetype');
      font-weight: bold;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'CascadiaMono';
      src: url('./fonts/CascadiaMono-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Whitney';
      src: url('./fonts/whitney/whitneybold.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    :root {
      /* === BASE COLORS (sRGB fallback) === */
      --bg: #030404;
      --surface: #06060a;
      --card: #0a0a0f;
      --card-2: #080809;
      --muted: #a6adbb;
      --text: #d6dbe3;
      --accent: #8b7dff; /* discord-ish purple */
      --accent-2: #6aa6ff;
      --border: #1b2030;
      --ring: #6c5cff40;
      --radius: 18px;
      --radius-lg: 22px;
      --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
      /* small, subtle lift used for buttons and smaller cards */
      --lift-shadow: 0 6px 18px rgba(0,0,0,.28);
      --maxw: 1180px;
      --gap: 18px;
      --content-offset: 24px; /* default vertical shift for main content (adjustable) */
      
      /* === HDR P3 COLOR SYSTEM === */
      /* Primary accent colors in Display-P3 for HDR-capable displays */
      --p3-accent: color(display-p3 0.58 0.52 1.15); /* Ultra-vivid purple beyond sRGB */
      --p3-accent-2: color(display-p3 0.42 0.72 1.12); /* Brilliant HDR blue */
      --p3-accent-glow: color(display-p3 0.65 0.55 1.2 / 0.6); /* HDR purple glow */
      --p3-accent-2-glow: color(display-p3 0.45 0.75 1.18 / 0.5); /* HDR blue glow */
      --p3-highlight: color(display-p3 0.95 0.92 1.15); /* Bright HDR highlight */
      
      /* Extended HDR color palette for diversity */
      --p3-neon-purple: color(display-p3 0.72 0.38 1.18); /* Vivid neon purple */
      --p3-neon-blue: color(display-p3 0.28 0.62 1.22); /* Electric blue */
      --p3-neon-cyan: color(display-p3 0.15 0.92 1.08); /* Brilliant cyan */
      --p3-neon-magenta: color(display-p3 1.0 0.35 0.85); /* Hot magenta/pink */
      --p3-neon-pink: color(display-p3 1.05 0.45 0.72); /* Soft neon pink */
      --p3-neon-coral: color(display-p3 1.08 0.52 0.48); /* Warm coral accent */
      --p3-neon-gold: color(display-p3 1.1 0.85 0.35); /* Warm gold highlight */
      --p3-neon-teal: color(display-p3 0.22 0.88 0.82); /* Teal accent */
      --p3-white-hot: color(display-p3 1.08 1.05 1.12); /* Super-white for HDR highlights */
      
      /* HDR Glow shadows using P3 colors */
      --p3-shadow-glow: 0 0 25px color(display-p3 0.58 0.52 1.15 / 0.4);
      --p3-shadow-glow-intense: 0 0 40px color(display-p3 0.65 0.55 1.2 / 0.6);
      --p3-shadow-blue-glow: 0 0 30px color(display-p3 0.42 0.72 1.12 / 0.45);
      --p3-shadow-cyan-glow: 0 0 30px color(display-p3 0.15 0.92 1.08 / 0.45);
      --p3-shadow-pink-glow: 0 0 30px color(display-p3 1.0 0.45 0.72 / 0.4);
      
      /* === UNIFIED DESIGN SYSTEM === */
      /* Glass effect consistent values - refined for premium look */
      --glass-bg: rgba(15, 18, 24, 0.12);
      --glass-bg-hover: rgba(20, 25, 35, 0.18);
      --glass-blur: 14px;
      --glass-blur-hover: 20px;
      --glass-saturate: 165%;
      --glass-saturate-hover: 185%;
      --glass-contrast: 103%;
      --glass-contrast-hover: 108%;
      
      /* Border system - more refined */
      --border-glass: rgba(255, 255, 255, 0.06);
      --border-glass-hover: rgba(255, 255, 255, 0.12);
      
      /* Shadow system - softer, more refined */
      --shadow-glass: 0 6px 20px rgba(0, 0, 0, 0.15);
      --shadow-glass-hover: 0 10px 28px rgba(0, 0, 0, 0.2);
      --shadow-glow: 0 0 16px rgba(255, 255, 255, 0.02);
      --shadow-glow-hover: 0 0 24px rgba(255, 255, 255, 0.01);
      --shadow-inset: inset 0 1px 0.5px rgba(255, 255, 255, 0.08), inset 0 -1px 0.5px rgba(255, 255, 255, 0.02);
      --shadow-inset-hover: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 1px rgba(255, 255, 255, 0.03);
    }
    
    /* === HDR P3 COLOR UPGRADES FOR WIDE GAMUT DISPLAYS === */
    @supports (color: color(display-p3 1 1 1)) {
      :root {
        /* Override accent colors with P3 HDR versions */
        --accent: color(display-p3 0.58 0.52 1.1);
        --accent-2: color(display-p3 0.42 0.7 1.08);
        
        /* Enhanced glass borders with P3 */
        --border-glass-hover: color(display-p3 0.58 0.52 1.1 / 0.2);
        
        /* P3 enhanced shadows */
        --shadow-glow: 0 0 20px color(display-p3 0.58 0.52 1.1 / 0.15);
        --shadow-glow-hover: 0 0 30px color(display-p3 0.58 0.52 1.1 / 0.25);
      }
    }
    @media (prefers-color-scheme: light) {
      :root {
        --bg: #f6f7fb;
        --surface: #ffffff;
        --card: #ffffff;
        --card-2: #ffffff;
        --text: #0c0f14;
        --muted: #626b7a;
        --border: #e7eaf1;
        --ring: #6c5cff25;
        --shadow: 0 10px 24px rgba(10,20,60,.08), 0 2px 8px rgba(10,20,60,.06);
        --lift-shadow: 0 6px 18px rgba(10,20,60,.04);
      }
    }

    * { 
      margin: 0;
      padding: 0;
      box-sizing: border-box; 
    }
    html, body { height: auto; }

   /* Use safe-area insets on iOS to avoid the notch / home indicator.
     We apply safe padding to the main page wrapper so content never
     sits underneath the notch or rounded corners when shown fullscreen
     (or when Safari uses the translucent status bar). */
   :root {
    /* CSS env() for modern browsers, with constant() fallback for older iOS
      and sensible defaults (16px) when not available. */
    --safe-top: env(safe-area-inset-top, 16px);
    --safe-right: env(safe-area-inset-right, 16px);
    --safe-bottom: env(safe-area-inset-bottom, 16px);
    --safe-left: env(safe-area-inset-left, 16px);
   }

    /* ===== ELEGANT 3D WEBGL BACKGROUND ===== */
    .site-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: #030404;
      overflow: hidden;
    }

    /* Shader-Art Background Styling */
    shader-art {
      display: block !important;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      transition: opacity 0.5s ease-out;
    }

    shader-art canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* WebGL Canvas Styling - HDR P3 Support */
    #webgl-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      opacity: 1;
      transition: opacity 0.5s ease-out;
    }

    #webgl-background.hidden {
      opacity: 0;
      pointer-events: none;
    }

    /* Fallback background gradient for non-WebGL browsers */
    .site-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, 
        #0a0a14 0%, 
        #1a0f2e 25%,
        #0f1a2e 50%,
        #1a0f2e 75%,
        #0a0a14 100%);
      background-size: 400% 400%;
      animation: subtle-gradient-shift 20s ease-in-out infinite;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.5s ease-out;
    }

    .site-bg.webgl-unavailable::before {
      opacity: 1;
    }

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

    /* Glass-effect overlay for depth */
    .site-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: 
        radial-gradient(ellipse 100% 120% at 50% 0%, rgba(139, 125, 255, 0.05), transparent 60%),
        radial-gradient(ellipse 100% 140% at 50% 100%, rgba(106, 166, 255, 0.03), transparent 70%);
      pointer-events: none;
      z-index: 1;
    }

    /* New animated wave effect in background */
    @keyframes background-wave {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* Enhanced background pulse */
    @keyframes bg-pulse {
      0%, 100% { opacity: 0.95; }
      25% { opacity: 1; }
      50% { opacity: 0.9; }
      75% { opacity: 1; }
    }

    /* Vignette shift animation */
    @keyframes vignette-shift {
      0% { filter: brightness(1); }
      50% { filter: brightness(1.05); }
      100% { filter: brightness(1); }
    }

    /* Keyframes: slow, refined color shift */
    @keyframes oled-shift {
      0% { background-position: 0% 50%; }
      25% { background-position: 50% 25%; }
      50% { background-position: 100% 50%; }
      75% { background-position: 50% 75%; }
      100% { background-position: 0% 50%; }
    }

    /* Refined glow pulse - balanced intensity */
    @keyframes oled-glow {
      0% { opacity: 0.6; }
      50% { opacity: 0.8; }
      100% { opacity: 0.6; }
    }

    /* Floating accent highlights - moderate color shift */
    @keyframes accent-float {
      0% { filter: hue-rotate(0deg) brightness(0.9) saturate(0.9); }
      25% { filter: hue-rotate(-8deg) brightness(0.98) saturate(1.08); }
      50% { filter: hue-rotate(10deg) brightness(1.02) saturate(1.15); }
      75% { filter: hue-rotate(-6deg) brightness(0.98) saturate(1.05); }
      100% { filter: hue-rotate(0deg) brightness(0.9) saturate(0.9); }
    }

    /* Enhanced vignette breathing effect */
    @keyframes vignette-breathe {
      0% { opacity: 1; }
      25% { opacity: 0.9; }
      50% { opacity: 1; }
      75% { opacity: 0.93; }
      100% { opacity: 1; }
    }

    /* Respect user preference for reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .site-bg { animation: none; }
      .site-bg::before { animation: none; }
      .site-bg::after { animation: none; }
    }

    /* ===== ADDITIONAL ANIMATIONS ===== */
    
    /* Smooth fade-in for page load */
    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    /* Gentle scale pulse on elements */
    @keyframes pulse-scale {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }
    
    /* Floating animation for decorative elements */
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }
    
    /* Shimmer/shine effect */
    @keyframes shimmer {
      0% { background-position: -1000px 0; }
      100% { background-position: 1000px 0; }
    }
    
    /* Rotate animation */
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    /* Glow pulse for interactive elements */
    @keyframes glow-pulse {
      0%, 100% { box-shadow: 0 0 5px rgba(139, 125, 255, 0.5), inset 0 0 5px rgba(139, 125, 255, 0.1); }
      50% { box-shadow: 0 0 20px rgba(139, 125, 255, 0.8), inset 0 0 10px rgba(139, 125, 255, 0.2); }
    }
    
    /* Wobble/shake effect */
    @keyframes wobble {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-1deg); }
      75% { transform: rotate(1deg); }
    }
    
    /* Rainbow color shift */
    @keyframes rainbow {
      0% { filter: hue-rotate(0deg); }
      33% { filter: hue-rotate(120deg); }
      66% { filter: hue-rotate(240deg); }
      100% { filter: hue-rotate(360deg); }
    }

    /* Border fade in/out animation */
    @keyframes border-fade-in {
      0% { border-color: rgba(139, 125, 255, 0); }
      100% { border-color: var(--accent); }
    }

    @keyframes border-fade-out {
      0% { border-color: var(--accent); }
      100% { border-color: rgba(255, 255, 255, 0.04); }
    }

    /* Animated gradient for cards */
    @keyframes gradient-shift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    /* Rainbow gradient animation */
    @keyframes gradient-rainbow {
      0% {
        background-position: 0% center;
      }
      50% {
        background-position: 100% center;
      }
      100% {
        background-position: 0% center;
      }
    }

    /* Purple/Blue gradient animation for accent elements */
    @keyframes gradient-accent {
      0% {
        background: linear-gradient(45deg, #8b7dff, #6aa6ff, #8b7dff);
        background-size: 200% 200%;
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    /* Discord-style profile glow pulse */
    @keyframes discord-glow {
      0%, 100% { 
        box-shadow: var(--shadow), 0 0 15px rgba(139, 125, 255, 0.2), inset 0 0 15px rgba(139, 125, 255, 0.05);
      }
      50% { 
        box-shadow: var(--shadow), 0 0 40px rgba(139, 125, 255, 0.4), inset 0 0 25px rgba(139, 125, 255, 0.1);
      }
    }

    /* Profile shine effect */
    @keyframes profile-shine {
      0% { background-position: -1000px 0; }
      100% { background-position: 1000px 0; }
    }

    /* Subtle scale pulse */
    @keyframes scale-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.01); }
    }

    /* Subtle section glow on hover */
    @keyframes section-glow-pulse {
      0%, 100% { box-shadow: var(--shadow); }
      50% { box-shadow: var(--shadow), 0 0 20px rgba(139, 125, 255, 0.15); }
    }

    /* Link card shine effect */
    @keyframes card-shine {
      0% { background-position: -1000px 0; }
      100% { background-position: 1000px 0; }
    }

    /* Subtle lift on hover */
    @keyframes lift-hover {
      0% { transform: translateY(0); }
      100% { transform: translateY(-2px); }
    }

    /* Gentle swing for elements */
    @keyframes swing {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(0.5deg); }
      75% { transform: rotate(-0.5deg); }
    }

    /* Breadcrumb line animation */
    @keyframes line-draw {
      from { width: 0; }
      to { width: 100%; }
    }

    body {
      margin: 0;
      color: var(--text);
      font-family: 'Whitney', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
      letter-spacing: .2px;
      background: var(--bg); /* fallback for very old UAs */
    }

   /* Apply safe-area padding inside the page wrapper so UI elements
     (header/banner/footer) avoid the notch and home indicator. We keep
     the original padding as a fallback and add the safe-area insets on top. */
   .wrap { max-width: var(--maxw); margin: 0 auto; padding: calc(28px + var(--safe-top)) calc(8px + var(--safe-right)) calc(40px + var(--safe-bottom)) calc(8px + var(--safe-left)); }

   /* On small screens make the wrapper full-bleed so there are no visible
     side margins; keep a small horizontal gutter plus the safe-area insets. */
   @media (max-width: 640px) {
    .wrap { 
      max-width: 100%; 
      padding: calc(6px + var(--safe-top)) calc(6px + var(--safe-right)) calc(32px + var(--safe-bottom)) calc(6px + var(--safe-left)); 
    }
   }

      /* ensure content sits above the fixed background */
      .wrap { position: relative; z-index: 1; }

  /* Layout: Discord-like profile card left, categorized projects right */
  .layout { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
  
    @media (min-width: 980px) {
      .layout { grid-template-columns: 420px 1fr; align-items: start; }

      /* On wide (desktop) viewports center the main layout vertically.
         We make .wrap a column flex container and center the .layout
         using auto margins so the footer stays at the bottom of the page. */
      .wrap {
        min-height: 100vh; /* fill viewport height */
        display: flex;
        flex-direction: column;
      }

      /* Center the main content block vertically within .wrap */
      .wrap > .layout { margin: auto 0; }
      
      /* Apply a global adjustable vertical offset to the main content block on desktop */
      .wrap > .layout { transform: translateY(var(--content-offset)); }
    }

    /* On mobile, keep content at top with no vertical centering */
    @media (max-width: 979px) {
      .wrap {
        display: block;
      }
      .wrap > .layout { margin: 0; transform: none; }
    }

  /* Left column wrapper — groups profile card and buttons so the right column sits next to both */
  .left-col { display: flex; flex-direction: column; gap: var(--gap); }

    /* Profile Card */
  .profile-card { 
    position: relative; 
    background: var(--glass-bg); 
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    border: 1px solid var(--border-glass); 
    border-radius: var(--radius-lg); 
    overflow: hidden; 
    box-shadow: var(--shadow-glass), var(--shadow-inset), var(--shadow-glow);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Ensure animation is not overridden */
  .profile-card.animate-in {
    animation: panel-fly-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
  
  .profile-card:hover { 
    animation: scale-pulse 2s ease-in-out infinite;
    transform: translateY(-6px);
    background: var(--glass-bg-hover);
    border-color: var(--border-glass-hover);
    -webkit-backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover)) contrast(var(--glass-contrast-hover));
    backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover)) contrast(var(--glass-contrast-hover));
    box-shadow: var(--shadow-glass-hover), var(--shadow-inset-hover), var(--shadow-glow-hover);
  }

  /* Add pseudo-element shine effect on hover */
  .profile-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(139, 125, 255, 0.1),
      rgba(106, 166, 255, 0.1),
      transparent
    );
    pointer-events: none;
    transition: left 0.5s ease;
  }

  .profile-card:hover::before {
    animation: profile-shine 0.8s ease-in-out;
  }

    .banner { 
      height: 160px; 
      background:
        linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.1)),
        url('/images/banner.gif') center/cover no-repeat;
      content-visibility: auto;
      position: relative;
      transition: filter 0.3s ease;
    }
    
    .profile-card:hover .banner {
      filter: brightness(1.1) saturate(1.1);
    }
    
    .banner::after { 
      content: ""; 
      position: absolute; 
      inset: 0; 
      background: radial-gradient(120% 80% at 100% -10%, #6c5cff55 0%, transparent 50%), radial-gradient(120% 80% at 0% -20%, #00a9ff40 0%, transparent 50%); 
      mix-blend-mode: screen; 
      pointer-events: none;
      transition: opacity 0.4s ease;
    }
    
    .profile-card:hover .banner::after {
      opacity: 1.2;
    }
    
    .pfp-wrap { position: relative; }
    
  .pfp { 
    position: absolute; 
    top: -66px; 
    left: 5px; 
    width: 96px; 
    height: 96px; 
    border-radius: 50%; 
    background: url('/images/pfp/fem.png') center/cover no-repeat #222; 
    border: 4px solid var(--surface); 
    box-shadow: var(--shadow); 
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  }
  
  .profile-card:hover .pfp {
    transform: scale(1.08) translateY(-2px);;
  }

  /* decorative overlay image placed above the pfp (deco.webp) */
  .pfp-deco {
    position: absolute;
    top: -74px;
    left: -2px;
    width: 110px;
    height: 110px;
    pointer-events: none; /* purely decorative */
    z-index: 2;
    background: url('/images/pfp/deco.png') center/cover no-repeat transparent;
    mix-blend-mode: screen;
    opacity: 0.98;
    transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
  }
  
  .profile-card:hover .pfp-deco {
    transform: scale(1.12) 
  }

  /* Online status indicator (green dot) */
  .online-status {
    position: absolute;
    top: 0px;
    left: 75px;
    width: 28px;
    height: 28px;
    background-color: #23a55a;
    border-radius: 50%;
    border: 5px solid var(--surface);
    z-index: 3;
    box-shadow: 0 0 8px rgba(35, 165, 90, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .profile-card:hover .online-status {
    transform: scale(1.08) translateY(-2px);
  }

  /* Thought bubble next to pfp (small, decorative) */
  .thought {
  position: absolute;
  top: -10px; /* move closer to banner (down) */
  left: 120px; /* move leftwards from previous position */
    background: linear-gradient(180deg, rgba(37, 37, 37, 0.92), rgba(34, 34, 34, 0.9));
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px 8px; /* mobile padding */
    font-size: 12px; /* mobile font-size */
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    display: inline-flex;
    gap: 6px; /* mobile gap */
    align-items: center;
    min-width: 110px; /* mobile min-width */
    max-width: 180px; /* mobile max-width */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  }
  .thought .icon {
    width: 28px; height: 28px; border-radius: 10px; display: inline-block; flex: 0 0 28px; box-shadow: inset 0 -6px 14px rgba(0,0,0,.15);
    background: transparent; /* no background for the icon */
  }
  .thought .icon img {
    width: 100%; height: 100%; border-radius: 8px; display: block; object-fit: cover; background: transparent;
  }
  .thought .text { font-weight: 700; font-size: 12px; color: var(--text); }
  /* small bubbles above the thought bubble pointing toward the pfp */
  .thought::before {
    content: "";
    position: absolute;
    left: -6px;
    top: -2px;
    width: 14px; 
    height: 14px; 
    border-radius: 50%; 
    background: linear-gradient(180deg, rgba(37, 37, 37, 0.92), rgba(34, 34, 34, 0.9));
    border: 1px solid var(--border);
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
  }
  .thought::after {
    content: "";
    position: absolute;
    left: -8px;
    top: -10px;
    width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, rgba(37, 37, 37, 0.92), rgba(34, 34, 34, 0.9)); border: 1px solid var(--border);
    transform: translateX(-8px) translateY(-6px);
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
  }

  @media (max-width: 640px) {
    /* On small screens adjust only position slightly (we keep the mobile size by default) */
    .thought {
      top: -10px;
      left: 120px;
    }
    .thought .icon { width: 28px; height: 28px; flex: 0 0 28px; }
  }

  .body { padding: 44px 10px 8px; }
  .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .username { font-size: 22px; font-weight: 800; letter-spacing: .2px; }
    .pronouns { color: var(--muted); font-weight: 600; font-size: 14px; }
  .badges { display: inline-flex; gap: 4px; margin-left: 2px; align-items: center; }
  .name-wrap { display: flex; flex-direction: column; gap: 0; }
  .username { font-size: 20px; }
  .username { margin: 0; line-height: 1; font-family: 'London', sans-serif; font-weight: 900; background: linear-gradient(90deg, #c9b5ff 0%, #a8d5ff 25%, #8bb7ff 50%, #a8d5ff 75%, #c9b5ff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-shift 3s ease infinite; }
  
  /* HDR P3 enhanced username gradient for wide gamut displays */
  @supports (color: color(display-p3 1 1 1)) {
    .username { 
      background: linear-gradient(90deg, 
        color(display-p3 0.88 0.72 1.18) 0%,     /* Soft lavender */
        color(display-p3 0.65 0.85 1.15) 20%,    /* Sky blue */
        color(display-p3 0.25 0.92 1.05) 40%,    /* Cyan pop */
        color(display-p3 0.65 0.85 1.15) 60%,    /* Sky blue */
        color(display-p3 1.0 0.65 0.88) 80%,     /* Soft pink accent */
        color(display-p3 0.88 0.72 1.18) 100%    /* Back to lavender */
      ); 
      background-size: 300% 100%; 
      -webkit-background-clip: text; 
      background-clip: text; 
      -webkit-text-fill-color: transparent; 
      animation: gradient-shift 4s ease infinite;
    }
  }
  
  .handle { color: var(--muted); font-size: 12px; font-weight: 800; margin: 5px 0 0 0; line-height: 1.05; }
  .handle .sep { color: var(--muted); margin: 0 4px; opacity: .9; }
  .handle .pronouns { color: var(--muted); font-weight: 700; font-size: 13px; }
  .inline-flag { width: auto; height: 15px; vertical-align: middle; }
  .status-tag { 
    display: inline-block; 
    padding: 3px 8px; 
    margin-left: 6px; 
    background: transparent; 
    color: #b6b6b6; 
    font-size: 11px; 
    font-weight: 800; 
    border-radius: 4px; 
    border: 1px solid #b6b6b6; 
    letter-spacing: 0.5px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .status-tag:hover {
    filter: drop-shadow(0 0 4px rgba(139, 125, 255, 0.4));
    transform: scale(1.05);
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(139, 125, 255, 0.08);
  }
  .name-wrap .badges { margin-top: 6px; display: inline-flex; gap: 6px; }
  /* legacy .badge span (emoji fallback) kept for compatibility */
  .badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--border-glass); }

  /* new image badges: minimal & smaller — fixed height, auto width, no background/border */
  .badges img, .badge-img { height: 16px; width: auto; display: inline-block; background: transparent; border: 0; padding: 0;  }

  /* slightly larger on desktop but still minimal */
  @media (min-width: 980px) { .badges img, .badge-img { height: 18px; } }

  /* Discord-style roles section */
  .roles { margin-top: 10px; }

  .roles-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .role { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px;
    padding: 4px 10px; 
    border-radius: 10px; 
    background: rgba(255, 255, 255, 0.06); 
    font-size: 12px; 
    font-weight: 500; 
    color: #dcddde;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
  }
  .role::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--role-color, #fff);
    flex-shrink: 0;
  }
  .role:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--role-color, rgba(255, 255, 255, 0.2));
  }

    .about { margin-top: 8px; color: var(--muted); font-size: 14px; }

    .web-since { margin: 6px 0 0 0; color: var(--muted); font-size: 13px; }

    .divider { height: 2px; background: linear-gradient(90deg, transparent, rgba(139, 125, 255, 0.25), rgba(106, 166, 255, 0.2), rgba(139, 125, 255, 0.25), transparent); margin: 14px 0; }

    .socials { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
  .soc { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(15, 18, 24, 0.2); border: 1px solid rgba(139, 125, 255, 0.1); text-decoration: none; color: inherit; font-weight: 700; font-size: 14px; transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); }
  /* subtle default lift so socials stand out minimally from the background */
  .soc { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0.5px rgba(255, 255, 255, 0.08); }
  .soc:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 0 16px rgba(139, 125, 255, 0.06); border-color: rgba(139, 125, 255, 0.18); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); }
  .soc img { width: auto; height: 20px; display: block; flex: 0 0 20px; transition: transform 0.28s ease; }
  
  /* Social icon hover colors - brand colors via CSS filter */
  .soc:hover img { transform: scale(1.1); }
  
  /* Twitter/X - blue */
  .soc:nth-child(1):hover img { filter: brightness(0) saturate(100%) invert(50%) sepia(90%) saturate(2000%) hue-rotate(195deg) brightness(1.1) drop-shadow(0 0 4px rgba(29, 161, 242, 0.6)); }
  
  /* Bluesky - blue */
  .soc:nth-child(2):hover img { filter: brightness(0) saturate(100%) invert(55%) sepia(98%) saturate(1500%) hue-rotate(190deg) brightness(1.1) drop-shadow(0 0 4px rgba(32, 139, 254, 0.6)); }
  
  /* Threads - uses color SVG on hover */
  .soc:nth-child(3) img { content: url('images/icons/threads.svg'); }
  .soc:nth-child(3):hover img { content: url('images/icons/threads_color.svg'); filter: drop-shadow(0 0 6px rgba(180, 70, 200, 0.5)); }
  
  /* Instagram - uses color SVG on hover */
  .soc:nth-child(4) img { content: url('images/icons/insta.svg'); }
  .soc:nth-child(4):hover img { content: url('images/icons/insta_color.svg'); filter: drop-shadow(0 0 6px rgba(225, 48, 108, 0.5)); }
  
  /* Steam - blue */
  .soc:nth-child(5):hover img { filter: brightness(0) saturate(100%) invert(45%) sepia(80%) saturate(1200%) hue-rotate(190deg) brightness(1.2) drop-shadow(0 0 4px rgba(27, 40, 56, 0.6)); }
  
  /* Reddit - orange */
  .soc:nth-child(6):hover img { filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(2000%) hue-rotate(5deg) brightness(1.1) drop-shadow(0 0 4px rgba(255, 69, 0, 0.6)); }
  
  /* Spotify - green */
  .soc:nth-child(7):hover img { filter: brightness(0) saturate(100%) invert(65%) sepia(95%) saturate(1500%) hue-rotate(90deg) brightness(1.05) drop-shadow(0 0 4px rgba(30, 215, 96, 0.6)); }
  
  /* Inara - orange/gold */
  .soc:nth-child(8):hover img { filter: brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(1800%) hue-rotate(15deg) brightness(1.1) drop-shadow(0 0 4px rgba(255, 165, 0, 0.6)); }

    .cta-row { display: flex; gap: 10px; margin-top: 12px; }
    .btn { 
      flex: 1; 
      padding: 12px 14px; 
      border-radius: 12px; 
      border: 1px solid var(--border-glass); 
      background: linear-gradient(135deg, rgba(139,125,255,0.06), rgba(106,166,255,0.03));
      background-size: 200% 200%;
      color: var(--text); 
      font-weight: 800; 
      text-align: center; 
      text-decoration: none; 
      transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
      min-height:44px; 
      display:inline-flex; 
      align-items:center; 
      justify-content:center; 
      box-shadow: 
        var(--shadow-glass),
        var(--shadow-inset);
      position: relative;
      overflow: hidden;
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
      letter-spacing: 0.3px;
    }
    
    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent, rgba(139, 125, 255, 0.08), transparent);
      background-size: 200% 200%;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    
    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 
        var(--shadow-glass-hover),
        var(--shadow-inset-hover),
        var(--shadow-glow-hover);
      border-color: var(--border-glass-hover);
      background-position: 100% 50%;
      -webkit-backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover));
      backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover));
    }
    
    .btn:hover::before {
      opacity: 1;
      animation: gradient-shift 2s ease infinite;
    }
    
  /* Primary button: make hover design the normal design per request */
  .btn.primary { 
    border-color: var(--border-glass-hover);
    background: linear-gradient(135deg, rgba(139,125,255,0.15), rgba(106,166,255,0.1));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: 
      var(--shadow-glass),
      var(--shadow-inset),
      var(--shadow-glow);
  }
  
  .btn.primary:hover {
    border-color: var(--border-glass-hover);
    box-shadow: 
      var(--shadow-glass-hover),
      var(--shadow-inset-hover),
      var(--shadow-glow-hover);
  }
  
  .btn.secondary { 
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.03)); 
    border-color: var(--border-glass); 
    color: var(--muted); 
    font-weight: 700;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: 
      var(--shadow-glass),
      var(--shadow-inset);
  }
  
  .btn.secondary:hover {
    border-color: var(--border-glass-hover);
    box-shadow: 
      var(--shadow-glass-hover),
      var(--shadow-inset-hover);
  }

    /* My Devices button - pastel rainbow border */
    #tech-popup-btn-profile {
      position: relative;
      border: none;
      background: linear-gradient(135deg, rgba(139,125,255,0.15), rgba(106,166,255,0.1));
      z-index: 1;
    }

    #tech-popup-btn-profile::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      padding: 1px;
      background: linear-gradient(
        90deg,
        rgba(255, 182, 193, 0.8),
        rgba(255, 218, 185, 0.8),
        rgba(255, 255, 186, 0.8),
        rgba(186, 255, 201, 0.8),
        rgba(186, 225, 255, 0.8),
        rgba(221, 186, 255, 0.8),
        rgba(255, 186, 243, 0.8),
        rgba(255, 182, 193, 0.8)
      );
      background-size: 300% 100%;
      animation: rainbow-border 4s linear infinite;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      z-index: -1;
      pointer-events: none;
    }

    @keyframes rainbow-border {
      0% { background-position: 0% 50%; }
      100% { background-position: 300% 50%; }
    }

    /* Mobile improvements: larger touch targets and stacked CTAs */
    @media (max-width: 640px) {
      .socials { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
      .soc { padding: 14px 12px; border-radius: 14px; font-size: 15px; }
      .cta-row { flex-direction: column; }
      .cta-row .btn { width: 100%; display: block; }
      /* make primary more prominent and secondary distinct on mobile */
  /* Use explicit rgba stops so older browsers render the subtle accent gradient */
  .btn.primary { background: linear-gradient(180deg, rgba(139,125,255,0.14), rgba(106,166,255,0.06)); color: var(--text); }
      .btn.secondary { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0)); color: var(--text); }
    }

    /* Right side: categorized grids */
  .section { 
    background: var(--glass-bg); 
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    border: 1px solid var(--border-glass); 
    border-radius: var(--radius-lg); 
    padding: 18px; 
    box-shadow: var(--shadow-glass), var(--shadow-inset), var(--shadow-glow);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    contain: layout style;
  }
  
  .section:hover {
    background: var(--glass-bg-hover);
    border-color: var(--border-glass-hover);
    -webkit-backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover)) contrast(var(--glass-contrast-hover));
    backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover)) contrast(var(--glass-contrast-hover));
    box-shadow: var(--shadow-glass-hover), var(--shadow-inset-hover), var(--shadow-glow-hover);
    transform: translateY(-2px);
  }
  
  .section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.02));
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  
  .section:hover::before {
    opacity: 1;
    animation: gradient-shift 4s ease infinite;
  }
  
  .section + .section { margin-top: var(--gap); }
  
  .about-section + .section { margin-top: var(--gap); }

  /* ===== ABOUT SECTION STYLES - COMPACT ===== */
  .about-section {
    background: linear-gradient(135deg, rgba(15, 18, 24, 0.2) 0%, rgba(20, 25, 35, 0.15) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(180%) contrast(105%);
    backdrop-filter: blur(16px) saturate(180%) contrast(105%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-glass), var(--shadow-inset), var(--shadow-glow);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 125, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  
  .about-section:hover {
    background: linear-gradient(135deg, rgba(20, 25, 35, 0.25) 0%, rgba(25, 30, 45, 0.2) 100%);
    border-color: rgba(139, 125, 255, 0.15);
    box-shadow: var(--shadow-glass-hover), var(--shadow-inset-hover), 0 0 40px rgba(139, 125, 255, 0.06);
  }

  .about-section:hover::before {
    opacity: 1;
  }

  .about-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .about-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(139, 125, 255, 0.2), rgba(106, 166, 255, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 3px 8px rgba(139, 125, 255, 0.12);
    transition: all 0.3s ease;
  }

  .about-section:hover .about-header-icon {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(139, 125, 255, 0.2);
  }

  .about-section h2 {
    margin: 0;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    transition: color 0.3s ease;
    font-weight: 800;
  }

  .about-subtitle {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-top: 1px;
  }

  .about-section:hover h2 {
    color: var(--accent);
  }

  .about-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
  }

  @media (min-width: 640px) {
    .about-content {
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
  }

  .about-block {
    padding: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .about-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .about-block:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(139, 125, 255, 0.12);
    transform: translateX(3px);
  }

  .about-block:hover::before {
    opacity: 1;
  }

  .about-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .about-block-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(139, 125, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s ease;
  }

  .about-block:hover .about-block-icon {
    background: rgba(139, 125, 255, 0.2);
    transform: scale(1.08);
  }

  .about-block h3 {
    margin: 0;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 800;
  }

  .about-block p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
  }

  .about-block strong {
    color: var(--text);
    font-weight: 600;
  }

  /* Interest tags styling */
  .interest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .interest-tag {
    padding: 4px 9px;
    background: rgba(139, 125, 255, 0.08);
    border: 1px solid rgba(139, 125, 255, 0.1);
    border-radius: 12px;
    font-size: 10px;
    color: var(--text);
    transition: all 0.2s ease;
    cursor: default;
  }

  .interest-tag:hover {
    background: rgba(139, 125, 255, 0.15);
    border-color: rgba(139, 125, 255, 0.2);
  }

  /* Fun fact items */
  .fun-fact-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .fun-fact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    transition: all 0.2s ease;
  }

  .fun-fact-item:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .fun-fact-emoji {
    font-size: 13px;
    line-height: 1.4;
  }

  .fun-fact-text {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.45;
  }

  /* ===== TECH/NEOFETCH SECTION STYLES ===== */
  .tech-section {
    background: rgba(15, 18, 24, 0.56);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    backdrop-filter: blur(6px) saturate(115%);
    border: 1px solid rgba(255, 255, 255, 0.035);
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
  }

  .tech-section:hover {
    border-color: rgba(139, 125, 255, 0.2);
    box-shadow: var(--shadow), 0 0 25px rgba(139, 125, 255, 0.15);
  }

  .tech-section h2 {
    margin: 0;
    padding: 18px;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
    transition: color 0.3s ease;
  }

  .tech-section:hover h2 {
    color: var(--accent);
  }

  .neofetch-container {
    padding: 16px;
    font-family: 'Courier New', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text);
    background: rgba(5, 8, 12, 0.4);
    max-height: 600px;
    overflow-y: auto;
  }

  /* Terminal-style scrollbar */
  .neofetch-container::-webkit-scrollbar {
    width: 8px;
  }

  .neofetch-container::-webkit-scrollbar-track {
    background: transparent;
  }

  .neofetch-container::-webkit-scrollbar-thumb {
    background: rgba(139, 125, 255, 0.3);
    border-radius: 4px;
    transition: background 0.3s ease;
  }

  .neofetch-container::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 125, 255, 0.6);
  }

  .tech-item {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
  }

  .tech-item:hover {
    background: rgba(139, 125, 255, 0.1);
    border-left: 3px solid var(--accent);
    padding-left: 9px;
  }

  .tech-label {
    color: var(--accent);
    font-weight: 700;
    min-width: 120px;
    white-space: nowrap;
  }

  .tech-value {
    color: var(--text);
    flex: 1;
    word-break: break-word;
  }

  .tech-value .badge {
    display: inline-block;
    background: rgba(139, 125, 255, 0.15);
    color: var(--accent);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 600;
  }

  .tech-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 12px 0;
  }

  /* ===== HEADER STYLES ===== */
  .main-header {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 18px 24px;
    box-shadow: var(--shadow-glass), var(--shadow-inset), var(--shadow-glow);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .main-header:hover {
    background: var(--glass-bg-hover);
    border-color: var(--border-glass-hover);
    -webkit-backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover)) contrast(var(--glass-contrast-hover));
    backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover)) contrast(var(--glass-contrast-hover));
    box-shadow: var(--shadow-glass-hover), var(--shadow-inset-hover), var(--shadow-glow-hover);
  }

  .main-header-left {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .main-header-logo {
    height: 40px;
    width: auto;
    max-width: 200px;
    display: block;
  }

  .main-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .header-login-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid var(--border-glass);
    background: linear-gradient(135deg, rgba(139,125,255,0.12), rgba(106,166,255,0.06));
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow: var(--shadow-glass), var(--shadow-inset);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  .header-login-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(139, 125, 255, 0.1), transparent);
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .header-login-btn:hover {
    transform: translateY(-1px);
    border-color: var(--border-glass-hover);
    box-shadow: var(--shadow-glass-hover), var(--shadow-inset-hover), var(--shadow-glow);
    -webkit-backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover));
    backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover));
  }

  .header-login-btn:hover::before {
    opacity: 1;
    animation: gradient-shift 2s ease infinite;
  }

  .header-login-info {
    font-size: 11px;
    color: var(--muted);
    opacity: 0.8;
    transition: all 0.3s ease;
    white-space: nowrap;
    max-width: 180px;
  }

  .header-login-btn:hover ~ .header-login-info,
  .header-login-info:hover {
    opacity: 1;
    color: var(--accent);
  }

  @media (max-width: 640px) {
    .main-header {
      padding: 14px 16px;
      margin-bottom: calc(var(--gap) - 4px);
    }

    .main-header-logo {
      height: 32px;
    }

    .header-login-btn {
      padding: 8px 14px;
      font-size: 13px;
    }

    .header-login-info {
      display: none;
    }
  }

  @media (min-width: 980px) {
    .main-header {
      margin-bottom: -8px;
    }
  }

  @media (min-width: 641px) and (max-width: 979px) {
    .main-header {
      margin-bottom: var(--gap);
    }
  }

  @media (max-width: 640px) {
    .about-content {
      grid-template-columns: 1fr;
    }

    .tech-label {
      min-width: 100px;
      font-size: 11px;
    }

    .tech-value {
      font-size: 11px;
    }

    .neofetch-container {
      font-size: 11px;
      padding: 12px;
    }
  }

  /* ===== TECH POPUP MODAL STYLES - GLASS ===== */
  #tech-popup-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  #tech-popup-modal.show {
    display: flex;
    opacity: 1;
    visibility: visible;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }

  #tech-popup-modal.closing {
    opacity: 0;
    -webkit-backdrop-filter: blur(8px) saturate(100%);
    backdrop-filter: blur(8px) saturate(100%);
  }

  #tech-popup-modal.closing .tech-popup-content {
    animation: tech-modal-exit 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
  }

  @keyframes tech-modal-exit {
    0% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    100% {
      opacity: 0;
      transform: scale(0.95) translateY(15px);
    }
  }

  .tech-popup-content {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(30px) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    backdrop-filter: blur(30px) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 0;
    max-width: 95vw;
    width: 1500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-glass), var(--shadow-inset), var(--shadow-glow);
    animation: tech-modal-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
  }

  .tech-popup-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  }

  @keyframes tech-modal-enter {
    0% {
      opacity: 0;
      transform: scale(0.95) translateY(20px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .tech-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-glass);
    position: relative;
  }

  .tech-popup-header h2 {
    margin: 0;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
  }

  .tech-popup-header h2::before {
    content: '🖥️';
    font-size: 16px;
  }

  .tech-popup-close {
    background: var(--glass-bg);
    border: 1px solid var(--border-glass);
    color: var(--muted);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    font-weight: 400;
  }

  .tech-popup-close:hover {
    background: rgba(255, 100, 100, 0.1);
    border-color: rgba(255, 100, 100, 0.25);
    color: #ff6b6b;
    transform: rotate(90deg);
  }

  .tech-inputs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tech-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .tech-input-label {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
  }

  .tech-input {
    background: rgba(5, 8, 12, 0.6);
    border: 1px solid rgba(139, 125, 255, 0.2);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 8px;
    font-family: 'Courier New', 'Monaco', monospace;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
  }

  .tech-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(5, 8, 12, 0.8);
    box-shadow: 0 0 0 3px rgba(139, 125, 255, 0.2);
  }

  .tech-input::selection {
    background: rgba(139, 125, 255, 0.3);
    color: var(--text);
  }

  .tech-input-hint {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }

  .tech-popup-footer {
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--border-glass);
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .tech-popup-footer::before {
    content: '←';
    opacity: 0.4;
  }

  .tech-popup-footer::after {
    content: '→';
    opacity: 0.4;
  }

  .tech-popup-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  @media (max-width: 640px) {
    .tech-popup-content {
      padding: 20px;
      width: 95%;
    }

    .tech-popup-grid-wrapper {
      grid-template-columns: 1fr;
    }

    .tech-popup-header h2 {
      font-size: 18px;
    }
  }

  /* Tech section button styling */
  #tech-header {
    margin-top: var(--gap);
  }

  .tech-section-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Neofetch Carousel Styles - Glass */
  .neofetch-carousel-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 24px;
    flex: 1;
  }

  .neofetch-carousel {
    display: flex;
    gap: 20px;
    min-width: min-content;
    padding: 8px 4px 16px 4px;
  }

  .neofetch-terminal {
    flex: 0 0 auto;
    width: 800px;
    height: 540px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 0;
    font-family: 'CascadiaMono', 'Courier New', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-glass), var(--shadow-inset);
    overflow: hidden;
    position: relative;
  }

  .neofetch-terminal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  }

  .neofetch-terminal:hover {
    border-color: var(--border-glass-hover);
    background: var(--glass-bg-hover);
    -webkit-backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover));
    backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover));
    box-shadow: var(--shadow-glass-hover), var(--shadow-inset-hover), var(--shadow-glow-hover);
    transform: translateY(-3px);
  }

  .neofetch-terminal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--text);
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-glass);
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 12px;
    position: relative;
  }

  .neofetch-terminal-title::before {
    content: '';
    display: flex;
    gap: 6px;
    width: 52px;
    height: 12px;
    background-image: 
      radial-gradient(circle, #ff5f57 5px, transparent 5px),
      radial-gradient(circle, #febc2e 5px, transparent 5px),
      radial-gradient(circle, #28c840 5px, transparent 5px);
    background-size: 16px 12px;
    background-position: 0 0, 16px 0, 32px 0;
    background-repeat: no-repeat;
    opacity: 0.8;
  }

  .neofetch-terminal-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.15);
  }

  .neofetch-terminal-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Scrollbar styling for carousel - Glass */
  .neofetch-carousel-wrapper::-webkit-scrollbar {
    height: 8px;
  }

  .neofetch-carousel-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
  }

  .neofetch-carousel-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }

  .neofetch-carousel-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
  }

  /* Scrollbar for terminal windows */
  .neofetch-terminal-wrapper::-webkit-scrollbar {
    width: 6px;
  }

  .neofetch-terminal-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
  }

  .neofetch-terminal-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }

  .neofetch-terminal-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
  }

  @media (max-width: 768px) {
    .neofetch-terminal {
      width: 320px;
      height: 450px;
      font-size: 10px;
    }

    .neofetch-terminal-title {
      padding: 12px 14px;
      font-size: 11px;
    }

    .neofetch-terminal-title::before {
      width: 44px;
      background-size: 14px 10px;
      background-position: 0 0, 14px 0, 28px 0;
    }

    .neofetch-terminal-wrapper {
      padding: 12px 14px;
    }

    .neofetch-carousel {
      gap: 14px;
      padding: 4px 0 12px 0;
    }

    .neofetch-carousel-wrapper {
      overflow-x: scroll;
      padding: 16px;
      -webkit-overflow-scrolling: touch;
    }

    .tech-popup-content {
      width: 100%;
      max-height: 95vh;
      border-radius: var(--radius-lg);
    }

    .tech-popup-header {
      padding: 14px 16px;
    }

    .tech-popup-header h2 {
      font-size: 12px;
    }
  }

  /* Neofetch display styles */
  .neofetch-display-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .neofetch-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .neofetch-label {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
  }

  .neofetch-display {
    background: rgba(5, 8, 12, 0.8);
    border: 1px solid rgba(139, 125, 255, 0.2);
    color: var(--text);
    padding: 12px;
    border-radius: 8px;
    font-family: 'Courier New', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.6;
    min-height: 120px;
    max-height: 200px;
    overflow-y: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
    transition: all 0.2s ease;
    outline: none;
    text-align: left;
  }

  .neofetch-display:focus {
    border-color: var(--accent);
    background: rgba(5, 8, 12, 0.95);
    box-shadow: 0 0 0 3px rgba(139, 125, 255, 0.2);
  }

  .neofetch-display:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    opacity: 0.5;
  }

  .neofetch-display::selection {
    background: rgba(139, 125, 255, 0.3);
    color: var(--text);
  }

  /* Custom scrollbar for neofetch display */
  .neofetch-display::-webkit-scrollbar {
    width: 6px;
  }

  .neofetch-display::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
  }

  .neofetch-display::-webkit-scrollbar-thumb {
    background: rgba(139, 125, 255, 0.3);
    border-radius: 3px;
    transition: background 0.2s ease;
  }

  .neofetch-display::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 125, 255, 0.6);
  }

  @media (max-width: 640px) {
    .neofetch-display-grid {
      grid-template-columns: 1fr;
    }

    .neofetch-display {
      font-size: 11px;
      min-height: 100px;
    }
  }
  
  .section h2 { 
    margin: 6px 6px 14px; 
    font-size: 13px; 
    letter-spacing: .12em; 
    text-transform: uppercase; 
    color: var(--muted);
    transition: color 0.3s ease;
    font-weight: 800;
  }
  
  .section:hover h2 {
    color: var(--accent);
  }

  /* Buttons grid under profile card - Enhanced */
  .profile-buttons { 
    margin-top: 0; 
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.06) 0%, var(--glass-bg) 50%, rgba(88, 101, 242, 0.04) 100%);
    border: 1px solid rgba(88, 101, 242, 0.12);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: var(--shadow-glass), var(--shadow-inset);
  }
  
  .profile-buttons:hover {
    border-color: rgba(88, 101, 242, 0.25);
    box-shadow: var(--shadow-glass-hover), var(--shadow-inset-hover);
  }
  
  /* Buttons Header */
  .buttons-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  .buttons-header-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.2), rgba(88, 101, 242, 0.1));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
  }
  
  .buttons-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  
  .buttons-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  
  .buttons-subtitle {
    font-size: 0.7rem;
    color: var(--muted);
    opacity: 0.8;
  }
  
  /* Buttons Grid */
  .buttons-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px; 
    align-items: center; 
    align-content: flex-start;
    justify-content: center;
  }
  
  .button-item {
    position: relative;
    display: inline-block;
    border-radius: 3px;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
  }
  
  .button-item:hover {
    transform: translateY(-2px);
    z-index: 10;
    filter: brightness(1.1);
  }
  
  .button-item:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    animation: tooltipFade 0.15s ease;
  }
  
  @keyframes tooltipFade {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  
  .buttons-grid a, .buttons-grid span { display: inline-block; flex: 0 1 auto; }
  
  /* Force buttons to a consistent size */
  .buttons-grid img { 
    width: 88px; 
    height: 31px; 
    max-width: 100%; 
    object-fit: contain; 
    border-radius: 2px; 
    border: 0; 
    background: transparent; 
    padding: 0; 
    display: block;
  }
  
  /* Buttons Footer */
  .buttons-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: center;
  }
  
  .buttons-count {
    font-size: 0.65rem;
    color: var(--muted);
    opacity: 0.6;
    font-style: italic;
  }

  /* ===== ON REPEAT MUSIC WIDGET - GLASS HDR ===== */
  .music-widget {
    background: linear-gradient(135deg, rgba(30, 215, 96, 0.08) 0%, var(--glass-bg) 50%, rgba(30, 185, 84, 0.05) 100%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) contrast(var(--glass-contrast));
    border: 1px solid rgba(30, 215, 96, 0.15);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: var(--shadow-glass), var(--shadow-inset), 0 0 20px rgba(30, 215, 96, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .music-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(30, 215, 96, 0.5), transparent);
    opacity: 0.6;
    transition: opacity 0.4s ease;
  }

  .music-widget:hover {
    background: linear-gradient(135deg, rgba(30, 215, 96, 0.15) 0%, var(--glass-bg-hover) 50%, rgba(30, 185, 84, 0.1) 100%);
    border-color: rgba(30, 215, 96, 0.35);
    -webkit-backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover)) contrast(var(--glass-contrast-hover));
    backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover)) contrast(var(--glass-contrast-hover));
    box-shadow: var(--shadow-glass-hover), var(--shadow-inset-hover), 0 0 40px rgba(30, 215, 96, 0.12);
    transform: translateY(-2px);
  }

  .music-widget:hover::before {
    opacity: 1;
  }

  .music-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(30, 215, 96, 0.1);
  }

  .music-widget-header-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(30, 215, 96, 0.25), rgba(30, 185, 84, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(30, 215, 96, 0.2);
    transition: all 0.3s ease;
  }

  .music-widget-header-icon svg {
    width: 16px;
    height: 16px;
    color: #1ed760;
    filter: drop-shadow(0 0 4px rgba(30, 215, 96, 0.4));
  }

  .music-widget:hover .music-widget-header-icon {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(30, 215, 96, 0.35);
  }

  .music-widget-header-text {
    flex: 1;
    min-width: 0;
  }

  .music-widget-title {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1ed760;
    text-shadow: 0 0 8px rgba(30, 215, 96, 0.3);
    transition: all 0.3s ease;
  }

  .music-widget:hover .music-widget-title {
    color: #1ed760;
    text-shadow: 0 0 12px rgba(30, 215, 96, 0.5);
  }

  .music-widget-subtitle {
    display: block;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin-top: 1px;
  }

  .music-widget-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
  }

  .music-widget-bars span {
    width: 3px;
    background: linear-gradient(to top, #1db954, #1ed760, #23e066);
    border-radius: 2px;
    animation: eq 0.9s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(30, 215, 96, 0.5);
  }

  .music-widget-bars span:nth-child(1) { height: 40%; animation-delay: 0s; }
  .music-widget-bars span:nth-child(2) { height: 85%; animation-delay: 0.15s; }
  .music-widget-bars span:nth-child(3) { height: 55%; animation-delay: 0.3s; }
  .music-widget-bars span:nth-child(4) { height: 70%; animation-delay: 0.45s; }

  @keyframes eq {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.4); }
  }

  .music-widget-track {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .music-widget-cover {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    background: rgba(30, 215, 96, 0.08);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 15px rgba(30, 215, 96, 0.1);
    border: 1px solid rgba(30, 215, 96, 0.15);
    transition: all 0.3s ease;
  }

  .music-widget:hover .music-widget-cover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 25px rgba(30, 215, 96, 0.2);
    border-color: rgba(30, 215, 96, 0.25);
  }

  .music-widget-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .music-widget-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .music-widget-song {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    transition: color 0.3s ease;
  }

  .music-widget:hover .music-widget-song {
    color: #fff;
  }

  .music-widget-artist {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* New responsive behavior: on small screens allow horizontal scroll to keep 88x31 size */
  @media (max-width: 640px) {
    .buttons-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
    .buttons-grid a, .buttons-grid span { display: inline-block; }
    .buttons-grid img { width: 88px; height: 31px; }
  }
  
  /* Mobile: keep 88x31 size */
  @media (max-width: 420px) { .buttons-grid img { width: 88px; height: 31px; padding: 0; } }

  /* Ensure the left column can't cause horizontal scroll on small viewports */
  .left-col { min-width: 0; }
  @media (max-width: 640px) {
    .buttons-grid { gap: 6px; }
    .buttons-grid img { width: 88px; height: 31px; padding: 0; }
  }

    .grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 12px; }
    @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1200px) { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

  .card { 
    position: relative; 
    padding: 16px 14px; 
    background: linear-gradient(180deg, rgba(15,18,24,0.28), rgba(11,13,18,0.06)); 
    -webkit-backdrop-filter: blur(22px) saturate(135%); 
    backdrop-filter: blur(22px) saturate(135%); 
    border: 1px solid rgba(139, 125, 255, 0.08); 
    border-radius: 14px; 
    text-decoration: none; 
    color: inherit; 
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), backdrop-filter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0.5px rgba(255, 255, 255, 0.08);
    overflow: hidden;
    }
  .card:hover {
    will-change: transform;
  }
  
  .card:hover { 
    transform: translateY(-2px); 
    border-color: rgba(139, 125, 255, 0.15);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2), 0 0 16px rgba(139, 125, 255, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(20, 25, 35, 0.35), rgba(12, 16, 24, 0.09));
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
  }
  
    .card .row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
    .favicon { 
      width: 26px; 
      height: 26px; 
      border-radius: 8px; 
      background: #0f1117; 
      display: grid; 
      place-items: center; 
      border: 1px solid var(--border); 
      color: var(--text);
      transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
    .card:hover .favicon {
      transform: scale(1.05);
    }
    
  .favicon-img { width: 22px; height: 22px; display: block; border-radius: 6px; }
    .title { 
      font-weight: 900; 
      font-size: 15px; 
      line-height: 1.2;
      transition: color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
  .url { 
      font-size: 12px; 
      color: var(--muted);
      transition: color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
    .card:hover .url {
      color: rgba(166, 173, 187, 0.7);
    }
    
    .cta { 
      font-size: 12px; 
      padding: 7px 12px; 
      border-radius: 999px; 
      border: 1px solid rgba(139, 125, 255, 0.08); 
      background: rgba(139, 125, 255, 0.04); 
      color: var(--text); 
      opacity: 0.9;
      transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
      font-weight: 500;
    }
    
    .cta:hover {
      opacity: 1;
      border-color: rgba(139, 125, 255, 0.2);
      color: rgba(139, 125, 255, 0.95);
      background: rgba(139, 125, 255, 0.1);
      transform: scale(1.02);
    }

    /* Interactive glow effect class - pastel rainbow border */
    .hover-glow {
      position: relative;
      border: none !important;
      box-shadow: 
        var(--lift-shadow),
        0 0 30px rgba(139, 125, 255, 0.4),
        inset 0 0 20px rgba(139, 125, 255, 0.1) !important;
    }

    .hover-glow::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--radius-lg);
      padding: 2px;
      background: linear-gradient(
        90deg,
        rgba(255, 182, 193, 0.8),
        rgba(255, 218, 185, 0.8),
        rgba(255, 255, 186, 0.8),
        rgba(186, 255, 201, 0.8),
        rgba(186, 225, 255, 0.8),
        rgba(221, 186, 255, 0.8),
        rgba(255, 186, 243, 0.8),
        rgba(255, 182, 193, 0.8)
      );
      background-size: 300% 100%;
      animation: rainbow-border 4s linear infinite;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      z-index: 1;
      pointer-events: none;
    }

    .link-card:focus-within {
      animation: pulse-scale 0.4s ease-out;
      box-shadow: var(--shadow), 0 0 20px rgba(139, 125, 255, 0.3);
    }

    footer { text-align: center; color: var(--muted); font-size: 12px; padding: 26px 0 18px; }
  .hosting-note { color: var(--muted); font-size: 12px; margin-top: 8px; }
  .version-info { color: var(--muted); font-size: 11px; margin-top: 12px; opacity: 0.8; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
  .version-info span { display: inline-block; }
  .version-badge { background: rgba(139, 125, 255, 0.1); padding: 2px 8px; border-radius: 3px; border: 1px solid rgba(139, 125, 255, 0.2); }
  .uptime-badge { margin: 8px auto; display: block; }
  /* Timezone widget styles */
  #tz-widget { margin-top: 10px; animation: fade-in 0.8s ease-out 0.3s both; }
  #tz-display { font-weight: 700; font-size: 14px; color: var(--text); }
  #tz-offset { color: var(--muted); font-weight: 600; margin-left: 8px; }
  .tz-row { margin-top: 6px; display: flex; gap: 8px; align-items: center; }
  #tz-toggle { padding: 6px 8px; font-size: 13px; }
  #tz-local-wrap { color: var(--muted); font-size: 13px; }

  /* Domain runner styles */
  .domain-track { 
    width: 100%; 
    overflow: hidden; 
    margin: 8px 0 6px; 
    height: 28px; 
    display: block; 
    animation: fade-in 1s ease-out 0.5s both;
    mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  }
  .domain-row { 
    position: relative; 
    white-space: nowrap; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    height: 28px; 
  }
  .domain-box {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(88, 101, 242, 0.15);
    border: 1px solid rgba(88, 101, 242, 0.3);
    border-radius: 6px;
    font-size: 11px;
    font-family: 'CascadiaMono', monospace;
    color: var(--accent);
    white-space: nowrap;
    transition: all 0.3s ease;
    pointer-events: none;
    user-select: none;
  }

  /* Pokemon runner styles */
  .pokemon-track { width: 100%; overflow: hidden; margin: 8px 0 10px; height: 40px; display: block; animation: fade-in 1s ease-out 0.5s both; }
  .pokemon-row { position: relative; white-space: nowrap; display: flex; align-items: center; gap: 6px; height: 40px; }
  .pokemon-row img { height: 32px; width: auto; display: inline-block; pointer-events: none; -webkit-user-select: none; user-select: none; transition: transform 0.3s ease; }
  .pokemon-row img:hover { transform: scale(1.15) rotate(-5deg); }
  /* animation helper: we'll translate the row leftwards via JS for smooth looping */

  /* ===== ELEGANT LOADING ANIMATION ===== */
  
  /* Splash overlay shown on initial load */
  #splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(88, 101, 242, 0.08) 0%, rgba(0, 0, 0, 0) 60%);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s ease-out, background 1s ease-out;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
  }

  /* Glowing ring effect behind logo */
  #splash-overlay::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.2) 0%, rgba(139, 125, 255, 0.1) 30%, transparent 60%);
    opacity: 0;
    filter: blur(60px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
    pointer-events: none;
  }

  /* Show glow ring when visible */
  #splash-overlay.splash-visible::after {
    opacity: 1;
    animation: glow-pulse 2.5s ease-in-out infinite;
  }

  @keyframes glow-pulse {
    0%, 100% { 
      transform: scale(1);
      opacity: 0.7;
    }
    50% { 
      transform: scale(1.2);
      opacity: 1;
    }
  }

  #splash-overlay .splash-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ===== PARTICLE ORBIT SYSTEM ===== */
  
  .particle-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease-out;
  }

  #splash-overlay.splash-visible .particle-orbit {
    opacity: 1;
  }

  /* Orbit 1 - Inner ring */
  .particle-orbit.orbit-1 {
    width: 340px;
    height: 340px;
    animation: orbit-rotate-1 8s linear infinite;
  }

  /* Orbit 2 - Middle ring */
  .particle-orbit.orbit-2 {
    width: 520px;
    height: 520px;
    animation: orbit-rotate-2 12s linear infinite reverse;
  }

  /* Orbit 3 - Outer ring */
  .particle-orbit.orbit-3 {
    width: 700px;
    height: 700px;
    animation: orbit-rotate-3 16s linear infinite;
  }

  /* Individual particles */
  .particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }

  /* Particle styles with glow */
  .orbit-1 .particle {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(139, 125, 255, 0.8) 50%, transparent 100%);
    box-shadow: 
      0 0 8px 2px rgba(139, 125, 255, 0.8),
      0 0 16px 4px rgba(139, 125, 255, 0.4);
  }

  .orbit-2 .particle {
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(139, 183, 255, 0.8) 50%, transparent 100%);
    box-shadow: 
      0 0 6px 2px rgba(139, 183, 255, 0.8),
      0 0 12px 3px rgba(139, 183, 255, 0.4);
  }

  .orbit-3 .particle {
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(169, 213, 255, 0.6) 50%, transparent 100%);
    box-shadow: 
      0 0 5px 1px rgba(169, 213, 255, 0.6),
      0 0 10px 2px rgba(169, 213, 255, 0.3);
  }

  /* Position particles around the orbit */
  .orbit-1 .p1 { top: 0; left: 50%; transform: translateX(-50%); }
  .orbit-1 .p2 { bottom: 20%; right: 5%; }
  .orbit-1 .p3 { bottom: 20%; left: 5%; }

  .orbit-2 .p1 { top: 10%; right: 10%; }
  .orbit-2 .p2 { bottom: 5%; left: 50%; transform: translateX(-50%); }
  .orbit-2 .p3 { top: 50%; left: 0; transform: translateY(-50%); }
  .orbit-2 .p4 { top: 30%; right: 0; }

  .orbit-3 .p1 { top: 50%; right: 0; transform: translateY(-50%); }
  .orbit-3 .p2 { bottom: 15%; left: 15%; }

  /* Particle twinkle animation */
  .particle {
    animation: particle-twinkle 2s ease-in-out infinite;
  }

  .orbit-1 .p1 { animation-delay: 0s; }
  .orbit-1 .p2 { animation-delay: 0.5s; }
  .orbit-1 .p3 { animation-delay: 1s; }
  .orbit-2 .p1 { animation-delay: 0.3s; }
  .orbit-2 .p2 { animation-delay: 0.8s; }
  .orbit-2 .p3 { animation-delay: 1.3s; }
  .orbit-2 .p4 { animation-delay: 1.8s; }
  .orbit-3 .p1 { animation-delay: 0.6s; }
  .orbit-3 .p2 { animation-delay: 1.5s; }

  @keyframes particle-twinkle {
    0%, 100% { 
      opacity: 0.6;
      transform: scale(1);
    }
    50% { 
      opacity: 1;
      transform: scale(1.3);
    }
  }

  /* Keep particle position during twinkle */
  .orbit-1 .p1 { animation: particle-twinkle 2s ease-in-out infinite, none; top: 0; left: 50%; }
  
  @keyframes orbit-rotate-1 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes orbit-rotate-2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes orbit-rotate-3 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Fade out orbits when splash is hidden */
  #splash-overlay.splash-hidden .particle-orbit {
    opacity: 0;
    transition: opacity 0.6s ease-out;
  }

  /* Orbit expansion on fade out */
  #splash-overlay.splash-hidden .orbit-1 {
    animation: orbit-expand-out 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  #splash-overlay.splash-hidden .orbit-2 {
    animation: orbit-expand-out 1s cubic-bezier(0.4, 0, 0.2, 1) 0.05s forwards;
  }
  #splash-overlay.splash-hidden .orbit-3 {
    animation: orbit-expand-out 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
  }

  @keyframes orbit-expand-out {
    0% {
      transform: rotate(0deg) scale(1);
      opacity: 1;
    }
    100% {
      transform: rotate(90deg) scale(1.8);
      opacity: 0;
    }
  }

  #splash-overlay img {
    width: 420px;
    max-width: 85vw;
    height: auto;
    display: block;
    opacity: 0;
    transform: scale(0.85) translateY(10px);
    filter: blur(10px) brightness(1.2);
    transition: 
      opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1),
      transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
      filter 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Logo fade in - elegant and slow with shimmer */
  #splash-overlay.splash-visible img {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0) brightness(1) drop-shadow(0 0 30px rgba(139, 125, 255, 0.4));
    animation: logo-shimmer 2.5s ease-in-out infinite;
  }

  @keyframes logo-shimmer {
    0%, 100% {
      filter: blur(0) brightness(1) drop-shadow(0 0 30px rgba(139, 125, 255, 0.4));
    }
    50% {
      filter: blur(0) brightness(1.05) drop-shadow(0 0 50px rgba(139, 125, 255, 0.6));
    }
  }

  /* Larger on desktop */
  @media (min-width: 641px) {
    #splash-overlay img {
      width: 520px;
    }
    #splash-overlay::after {
      width: 700px;
      height: 700px;
    }
    .particle-orbit.orbit-1 {
      width: 440px;
      height: 440px;
    }
    .particle-orbit.orbit-2 {
      width: 660px;
      height: 660px;
    }
    .particle-orbit.orbit-3 {
      width: 880px;
      height: 880px;
    }
  }

  /* Smaller on mobile */
  @media (max-width: 640px) {
    #splash-overlay img {
      width: 320px;
    }
    #splash-overlay::after {
      width: 350px;
      height: 350px;
    }
    .particle-orbit.orbit-1 {
      width: 260px;
      height: 260px;
    }
    .particle-orbit.orbit-2 {
      width: 400px;
      height: 400px;
    }
    .particle-orbit.orbit-3 {
      width: 540px;
      height: 540px;
    }
    .orbit-1 .particle {
      width: 4px;
      height: 4px;
    }
    .orbit-2 .particle {
      width: 3px;
      height: 3px;
    }
    .orbit-3 .particle {
      width: 2px;
      height: 2px;
    }
  }

  /* Logo scale-up animation during fade out - more dramatic */
  @keyframes logo-scale-fade-out {
    0% {
      opacity: 1;
      transform: scale(1) translateY(0);
      filter: blur(0) brightness(1) drop-shadow(0 0 30px rgba(139, 125, 255, 0.4));
    }
    40% {
      opacity: 1;
      transform: scale(1.1) translateY(0);
      filter: blur(0) brightness(1.3) drop-shadow(0 0 60px rgba(139, 125, 255, 0.8));
    }
    100% {
      opacity: 0;
      transform: scale(1.5) translateY(-20px);
      filter: blur(20px) brightness(2) drop-shadow(0 0 100px rgba(139, 125, 255, 0));
    }
  }

  /* Glow ring fade out */
  @keyframes glow-ring-fade-out {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(2);
    }
  }

  /* Hidden state */
  #splash-overlay.splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(88, 101, 242, 0) 0%, rgba(0, 0, 0, 0) 70%);
  }

  /* Apply scale animation to logo when splash is fading out */
  #splash-overlay.splash-hidden img {
    animation: logo-scale-fade-out 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* Fade out glow ring */
  #splash-overlay.splash-hidden::after {
    animation: glow-ring-fade-out 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* Welcome text styling */
  #splash-overlay .welcome-text {
    display: none;
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    pointer-events: none;
  }

  #splash-overlay .welcome-text .welcome-jp {
    font-size: 28px;
    font-weight: 700;
    color: rgba(139, 125, 255, 0.9);
    margin-bottom: 8px;
    letter-spacing: 4px;
  }

  #splash-overlay .welcome-text .welcome-en {
    font-size: 20px;
    font-weight: 700;
    color: rgba(214, 219, 227, 0.8);
    letter-spacing: 6px;
    text-transform: uppercase;
  }

  /* Welcome text fade in animation - appears shortly before logo scales */
  @keyframes welcome-fade-in {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  /* Welcome text fade out with logo */
  @keyframes welcome-fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  /* Show welcome text class */
  #splash-overlay.show-welcome .welcome-text {
    animation: welcome-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* Hide welcome text when splash fades out */
  #splash-overlay.splash-hidden .welcome-text {
    animation: welcome-fade-out 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* ===== PANEL FLY-IN ANIMATIONS ===== */
  
  /* Initial state - all panels hidden */
  .profile-card,
  .section,
  .about-section,
  .link-card,
  .category-header,
  .button,
  .about-section h2,
  .about-section p {
    opacity: 0;
    transform: translateY(30px);
  }

  /* Elegant fly-in animation */
  @keyframes panel-fly-in {
    from { 
      opacity: 0; 
      transform: translateY(30px);
    }
    to { 
      opacity: 1; 
      transform: translateY(0);
    }
  }

  /* Animation class that will be added via JS */
  .animate-in {
    animation: panel-fly-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Panels that are part of the intro sequence start hidden */
  .animated-panel {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, visibility, transform;
  }

  .animated-panel.animate-in {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    will-change: auto;
    animation: panel-fly-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Staggered animations for about section elements */
  @keyframes about-element-fly-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .about-section.animate-in .about-header {
    animation: about-element-fly-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    opacity: 0;
  }

  .about-section.animate-in .about-block:nth-child(1) {
    animation: about-element-fly-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
    opacity: 0;
  }

  .about-section.animate-in .about-block:nth-child(2) {
    animation: about-element-fly-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    opacity: 0;
  }

  .about-section.animate-in .about-block:nth-child(3) {
    animation: about-element-fly-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
    opacity: 0;
  }

  .about-section.animate-in .about-block:nth-child(4) {
    animation: about-element-fly-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    opacity: 0;
  }

  .about-section.animate-in .interest-tag {
    animation: about-element-fly-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
  }

  .about-section.animate-in .interest-tag:nth-child(1) { animation-delay: 0.28s; }
  .about-section.animate-in .interest-tag:nth-child(2) { animation-delay: 0.31s; }
  .about-section.animate-in .interest-tag:nth-child(3) { animation-delay: 0.34s; }
  .about-section.animate-in .interest-tag:nth-child(4) { animation-delay: 0.37s; }
  .about-section.animate-in .interest-tag:nth-child(5) { animation-delay: 0.40s; }
  .about-section.animate-in .interest-tag:nth-child(6) { animation-delay: 0.43s; }
  .about-section.animate-in .interest-tag:nth-child(7) { animation-delay: 0.46s; }
  .about-section.animate-in .interest-tag:nth-child(8) { animation-delay: 0.49s; }
  .about-section.animate-in .interest-tag:nth-child(9) { animation-delay: 0.52s; }

  .about-section.animate-in .fun-fact-item {
    animation: about-element-fly-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
  }

  .about-section.animate-in .fun-fact-item:nth-child(1) { animation-delay: 0.33s; }
  .about-section.animate-in .fun-fact-item:nth-child(2) { animation-delay: 0.38s; }
  .about-section.animate-in .fun-fact-item:nth-child(3) { animation-delay: 0.43s; }

  /* ===== NEW FEATURES ===== */

  /* Particle system removed */

  /* 5. NEOMORPHISM 3D CARDS - Enhanced card hover */
  .card {
    perspective: 1200px;
    transform-style: preserve-3d;
    position: relative;
    background: linear-gradient(135deg, rgba(139, 125, 255, 0.1), rgba(106, 166, 255, 0.06));
    background-size: 200% 200%;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--border-glass);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(139, 125, 255, 0.12), transparent);
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
  }
  
  .card:hover {
    transform: translateY(-4px) rotateX(1.5deg) rotateY(-1.5deg);
    background-position: 100% 50%;
    border-color: var(--border-glass-hover);
    -webkit-backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover));
    backdrop-filter: blur(var(--glass-blur-hover)) saturate(var(--glass-saturate-hover));
    box-shadow: var(--shadow-glass-hover), var(--shadow-inset), 0 0 15px rgba(139, 125, 255, 0.1);
  }
  
  .card:hover::before {
    opacity: 1;
  }

  /* 13. BADGE TOOLTIPS */
  .badge-img {
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .badge-img:hover {
    filter: drop-shadow(0 0 4px rgba(139, 125, 255, 0.4));
    transform: scale(1.08);
  }

  /* Heart badge - special styling with continuous pulse */
  .badge-img[src*="heart"] {
    animation: heart-subtle-pulse 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255, 105, 180, 0.4));
  }

  .badge-img[src*="heart"]:hover {
    animation: heart-pulse 0.6s ease-in-out;
    filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.8));
  }

  /* Custom "Taken :3" tooltip */
  .badge-img[src*="heart"]::before {
    content: 'Taken :3';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.95), rgba(255, 125, 200, 0.95));
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .badge-img[src*="heart"]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid rgba(255, 105, 180, 0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
  }

  .badge-img[src*="heart"]:hover::before,
  .badge-img[src*="heart"]:hover::after {
    opacity: 1;
  }

  .badge-img[src*="heart"]:hover::before {
    animation: tooltip-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes badge-subtle-pulse {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 2px rgba(139, 125, 255, 0.2));
    }
    50% {
      transform: scale(1.05);
      filter: drop-shadow(0 0 4px rgba(139, 125, 255, 0.4));
    }
  }

  @keyframes heart-subtle-pulse {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 3px rgba(255, 105, 180, 0.4));
    }
    50% {
      transform: scale(1.08);
      filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.6));
    }
  }

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

  @keyframes tooltip-pop {
    0% {
      opacity: 0;
      transform: translateY(8px) scale(0.8);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  /* 15. THEME TOGGLE WITH SMOOTH TRANSITION */
  .theme-toggle {
    display: none;
  }
  
  /* Smooth theme transition */
  html {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  html, body {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 7. KONAMI CODE - Easter Egg (hidden by default, triggered via JS) */
  .konami-activated {
    animation: konami-glitch 0.8s ease;
  }
  @keyframes konami-glitch {
    0% { transform: translate(2px, -2px); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0, 0); }
  }

  /* ===== HDR P3 WIDE GAMUT ENHANCEMENTS ===== */
  /* These styles only apply on displays supporting Display-P3 color space */
  
  @supports (color: color(display-p3 1 1 1)) {
    /* HDR-enabled body indicator */
    body.hdr-enabled {
      color-scheme: dark;
    }
    
    /* Profile card HDR glow - multi-color */
    .profile-card:hover {
      box-shadow: 
        var(--shadow-glass-hover), 
        var(--shadow-inset-hover), 
        0 0 40px color(display-p3 0.58 0.52 1.15 / 0.3),
        0 0 60px color(display-p3 0.25 0.88 1.1 / 0.15),
        0 0 80px color(display-p3 1.0 0.45 0.72 / 0.1);
    }
    
    /* HDR accent buttons - purple to cyan gradient */
    .btn.primary {
      background: linear-gradient(135deg, 
        color(display-p3 0.58 0.52 1.1 / 0.18) 0%, 
        color(display-p3 0.35 0.78 1.05 / 0.12) 50%,
        color(display-p3 0.25 0.88 1.0 / 0.08) 100%
      );
      border-color: color(display-p3 0.58 0.52 1.1 / 0.25);
    }
    
    .btn.primary:hover {
      background: linear-gradient(135deg, 
        color(display-p3 0.65 0.55 1.15 / 0.28) 0%, 
        color(display-p3 0.4 0.82 1.08 / 0.18) 50%,
        color(display-p3 0.28 0.92 1.05 / 0.14) 100%
      );
      box-shadow: 
        0 8px 24px color(display-p3 0.58 0.52 1.15 / 0.25),
        0 0 30px color(display-p3 0.25 0.88 1.1 / 0.2),
        inset 0 1px 1px color(display-p3 1 1 1.1 / 0.15);
    }
    
    /* HDR social links - mit Farbvariationen */
    .soc:hover {
      border-color: color(display-p3 0.58 0.52 1.15 / 0.3);
      box-shadow: 
        0 10px 26px rgba(0, 0, 0, 0.18), 
        inset 0 1px 1px color(display-p3 1 1 1.1 / 0.12), 
        0 0 20px color(display-p3 0.58 0.52 1.15 / 0.15);
    }
    
    /* Different hover colors for social links - matching brand colors */
    /* Twitter/X - blue */
    .soc:nth-child(1):hover { border-color: color(display-p3 0.12 0.63 0.95 / 0.5); box-shadow: 0 10px 26px rgba(0,0,0,0.18), 0 0 25px color(display-p3 0.12 0.63 0.95 / 0.35); }
    /* Bluesky - brand blue */
    .soc:nth-child(2):hover { border-color: color(display-p3 0.12 0.55 1.0 / 0.5); box-shadow: 0 10px 26px rgba(0,0,0,0.18), 0 0 25px color(display-p3 0.12 0.55 1.0 / 0.35); }
    /* Threads - purple/pink */
    .soc:nth-child(3):hover { border-color: color(display-p3 0.75 0.35 0.9 / 0.45); box-shadow: 0 10px 26px rgba(0,0,0,0.18), 0 0 25px color(display-p3 0.75 0.35 0.9 / 0.3); }
    /* Instagram - pink/magenta gradient */
    .soc:nth-child(4):hover { border-color: color(display-p3 1.0 0.25 0.55 / 0.5); box-shadow: 0 10px 26px rgba(0,0,0,0.18), 0 0 25px color(display-p3 1.0 0.25 0.55 / 0.35); }
    /* Steam - dark blue */
    .soc:nth-child(5):hover { border-color: color(display-p3 0.15 0.35 0.65 / 0.5); box-shadow: 0 10px 26px rgba(0,0,0,0.18), 0 0 25px color(display-p3 0.15 0.45 0.75 / 0.3); }
    /* Reddit - orange red */
    .soc:nth-child(6):hover { border-color: color(display-p3 1.1 0.35 0.15 / 0.5); box-shadow: 0 10px 26px rgba(0,0,0,0.18), 0 0 25px color(display-p3 1.1 0.35 0.15 / 0.35); }
    /* Spotify - green */
    .soc:nth-child(7):hover { border-color: color(display-p3 0.15 0.92 0.42 / 0.5); box-shadow: 0 10px 26px rgba(0,0,0,0.18), 0 0 25px color(display-p3 0.15 0.92 0.42 / 0.35); }
    /* Inara - orange/gold */
    .soc:nth-child(8):hover { border-color: color(display-p3 1.1 0.7 0.2 / 0.5); box-shadow: 0 10px 26px rgba(0,0,0,0.18), 0 0 25px color(display-p3 1.1 0.7 0.2 / 0.35); }
    
    /* HDR status indicator */
    .online-status {
      background-color: color(display-p3 0.2 0.75 0.45);
      box-shadow: 0 0 12px color(display-p3 0.2 0.85 0.45 / 0.7);
    }
    
    /* HDR section hover glow */
    .section:hover,
    .about-section:hover {
      box-shadow: 
        var(--shadow-glass-hover), 
        var(--shadow-inset-hover), 
        0 0 35px color(display-p3 0.58 0.52 1.1 / 0.2);
    }
    
    /* HDR card hover */
    .card:hover {
      box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.25), 
        0 0 32px color(display-p3 0.58 0.52 1.15 / 0.18),
        inset 0 1px 1px color(display-p3 1 1 1.1 / 0.08);
    }
    
    /* HDR music widget - Spotify green accents (Normalzustand) */
    .music-widget {
      background: linear-gradient(135deg, color(display-p3 0.15 0.95 0.45 / 0.12) 0%, rgba(15, 18, 24, 0.12) 50%, color(display-p3 0.12 0.82 0.38 / 0.08) 100%);
      border-color: color(display-p3 0.15 0.92 0.42 / 0.22);
      box-shadow: 
        var(--shadow-glass), 
        var(--shadow-inset), 
        0 0 25px color(display-p3 0.15 0.92 0.42 / 0.1);
    }
    
    .music-widget:hover {
      background: linear-gradient(135deg, color(display-p3 0.15 0.98 0.48 / 0.2) 0%, rgba(20, 25, 35, 0.18) 50%, color(display-p3 0.12 0.85 0.4 / 0.14) 100%);
      border-color: color(display-p3 0.15 0.95 0.45 / 0.45);
      box-shadow: 
        var(--shadow-glass-hover), 
        var(--shadow-inset-hover), 
        0 0 50px color(display-p3 0.15 0.95 0.45 / 0.18);
    }
    
    .music-widget-title {
      color: color(display-p3 0.15 0.95 0.45);
      text-shadow: 0 0 10px color(display-p3 0.15 0.92 0.42 / 0.4);
    }
    
    .music-widget:hover .music-widget-title {
      text-shadow: 0 0 15px color(display-p3 0.15 0.95 0.45 / 0.6);
    }
    
    .music-widget-header-icon {
      background: linear-gradient(135deg, color(display-p3 0.15 0.95 0.45 / 0.3), color(display-p3 0.12 0.82 0.38 / 0.2));
      box-shadow: 0 2px 12px color(display-p3 0.15 0.92 0.42 / 0.25);
    }
    
    .music-widget-header-icon svg {
      color: color(display-p3 0.18 0.98 0.48);
      filter: drop-shadow(0 0 6px color(display-p3 0.15 0.92 0.42 / 0.5));
    }
    
    .music-widget-bars span {
      background: linear-gradient(to top, color(display-p3 0.12 0.82 0.38), color(display-p3 0.15 0.95 0.45), color(display-p3 0.2 1.0 0.5));
      box-shadow: 0 0 8px color(display-p3 0.15 0.92 0.42 / 0.6);
    }
    
    .music-widget-cover {
      border-color: color(display-p3 0.15 0.92 0.42 / 0.2);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 18px color(display-p3 0.15 0.92 0.42 / 0.12);
    }
    
    .music-widget:hover .music-widget-cover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 30px color(display-p3 0.15 0.95 0.45 / 0.22);
      border-color: color(display-p3 0.15 0.95 0.45 / 0.3);
    }
    
    /* HDR badge glow on hover */
    .badge-img:hover {
      filter: drop-shadow(0 0 8px color(display-p3 0.58 0.52 1.15 / 0.6));
    }
    
    /* HDR heart badge pulse */
    .badge-img[src*="heart"] {
      filter: drop-shadow(0 0 6px color(display-p3 1 0.35 0.45 / 0.5));
    }
    
    .badge-img[src*="heart"]:hover {
      filter: drop-shadow(0 0 12px color(display-p3 1 0.35 0.45 / 0.8));
    }
    
    /* HDR neofetch terminal glow */
    .neofetch-terminal:hover {
      box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.28),
        0 0 25px color(display-p3 0.58 0.52 1.1 / 0.2),
        inset 0 1px 1px color(display-p3 1 1 1.1 / 0.06);
    }
    
    /* HDR thought bubble */
    .thought {
      box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 0 15px color(display-p3 0.58 0.52 1.1 / 0.1);
    }
    
    /* HDR header login button */
    .header-login-btn:hover {
      background: linear-gradient(180deg, 
        color(display-p3 0.58 0.52 1.1 / 0.2), 
        color(display-p3 0.42 0.7 1.08 / 0.1)
      );
      box-shadow: 
        0 4px 16px color(display-p3 0.58 0.52 1.15 / 0.35),
        inset 0 1px 1px color(display-p3 1 1 1.1 / 0.1);
    }
    
    /* HDR interest tags */
    .interest-tag:hover {
      background: color(display-p3 0.58 0.52 1.1 / 0.15);
      border-color: color(display-p3 0.58 0.52 1.1 / 0.3);
      box-shadow: 0 0 12px color(display-p3 0.58 0.52 1.1 / 0.2);
    }
    
    /* HDR divider gradient - multi-color */
    .divider {
      background: linear-gradient(90deg, 
        transparent 0%, 
        color(display-p3 0.72 0.38 1.18 / 0.15) 15%,
        color(display-p3 0.58 0.52 1.1 / 0.25) 30%, 
        color(display-p3 0.25 0.88 1.1 / 0.2) 50%,
        color(display-p3 0.58 0.52 1.1 / 0.25) 70%,
        color(display-p3 1.0 0.45 0.72 / 0.15) 85%,
        transparent 100%
      );
    }
  }
  
  /* Extra HDR boost for displays with high dynamic range */
  @media (dynamic-range: high) {
    @supports (color: color(display-p3 1 1 1)) {
      .username {
        text-shadow: 0 0 20px color(display-p3 0.7 0.6 1.2 / 0.4);
      }
      
      .profile-card:hover {
        box-shadow: 
          var(--shadow-glass-hover), 
          var(--shadow-inset-hover), 
          0 0 60px color(display-p3 0.62 0.55 1.2 / 0.45),
          0 0 120px color(display-p3 0.45 0.75 1.15 / 0.2);
      }
      
      .online-status {
        box-shadow: 0 0 18px color(display-p3 0.25 0.95 0.5 / 0.85);
      }
      
      .btn.primary:hover {
        box-shadow: 
          0 10px 32px color(display-p3 0.62 0.55 1.2 / 0.4),
          0 0 50px color(display-p3 0.58 0.52 1.15 / 0.25),
          inset 0 1px 1px color(display-p3 1.1 1.05 1.15 / 0.2);
      }
      
      .music-widget-bar {
        background: color(display-p3 0.25 0.95 0.5);
        box-shadow: 0 0 8px color(display-p3 0.25 0.95 0.5 / 0.6);
      }
    }
  }
  
  /* HDR color animation keyframes */
  @supports (color: color(display-p3 1 1 1)) {
    @keyframes hdr-glow-pulse {
      0%, 100% { 
        box-shadow: 0 0 20px color(display-p3 0.58 0.52 1.15 / 0.3);
      }
      33% {
        box-shadow: 0 0 30px color(display-p3 0.25 0.88 1.1 / 0.4);
      }
      66% {
        box-shadow: 0 0 30px color(display-p3 1.0 0.45 0.72 / 0.35);
      }
    }
    
    @keyframes hdr-gradient-shift {
      0% {
        background-position: 0% 50%;
        filter: brightness(1) saturate(1);
      }
      33% {
        filter: brightness(1.05) saturate(1.1);
      }
      66% {
        background-position: 100% 50%;
        filter: brightness(1.08) saturate(1.15);
      }
      100% {
        background-position: 0% 50%;
        filter: brightness(1) saturate(1);
      }
    }
    
    @keyframes hdr-neon-pulse {
      0%, 100% {
        text-shadow: 
          0 0 10px color(display-p3 0.58 0.52 1.15 / 0.5),
          0 0 20px color(display-p3 0.58 0.52 1.15 / 0.3);
      }
      33% {
        text-shadow: 
          0 0 15px color(display-p3 0.25 0.92 1.08 / 0.6),
          0 0 30px color(display-p3 0.25 0.92 1.08 / 0.4);
      }
      66% {
        text-shadow: 
          0 0 15px color(display-p3 1.0 0.45 0.72 / 0.55),
          0 0 30px color(display-p3 1.0 0.45 0.72 / 0.35);
      }
    }
    
    /* Multi-color border animation */
    @keyframes hdr-border-shift {
      0%, 100% { border-color: color(display-p3 0.58 0.52 1.15 / 0.3); }
      25% { border-color: color(display-p3 0.25 0.88 1.1 / 0.35); }
      50% { border-color: color(display-p3 0.72 0.38 1.18 / 0.3); }
      75% { border-color: color(display-p3 1.0 0.45 0.72 / 0.3); }
    }
  }