@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);
      }
    }
    [data-theme="light"] {
      --bg: #eef0f6;
      --surface: #ffffff;
      --card: #ffffff;
      --card-2: #f5f6fa;
      --text: #1a1d26;
      --muted: #5c6370;
      --accent: #6b5ce7;
      --accent-2: #4a8fe0;
      --border: #d8dce6;
      --ring: #6c5cff20;
      --shadow: 0 2px 8px rgba(30,40,80,0.08), 0 1px 3px rgba(30,40,80,0.06);
      --lift-shadow: 0 4px 14px rgba(30,40,80,0.1);

      /* Glass – translucent cards in light mode */
      --glass-bg: rgba(255,255,255,0.55);
      --glass-bg-hover: rgba(255,255,255,0.68);
      --glass-blur: 20px;
      --glass-blur-hover: 24px;
      --glass-saturate: 110%;
      --glass-saturate-hover: 115%;
      --glass-contrast: 100%;
      --glass-contrast-hover: 100%;

      /* Borders – visible on light */
      --border-glass: rgba(0,0,0,0.08);
      --border-glass-hover: rgba(0,0,0,0.14);

      /* Shadows – soft elevation on light */
      --shadow-glass: 0 2px 12px rgba(30,40,80,0.07), 0 1px 3px rgba(30,40,80,0.05);
      --shadow-glass-hover: 0 8px 28px rgba(30,40,80,0.12), 0 2px 6px rgba(30,40,80,0.06);
      --shadow-glow: none;
      --shadow-glow-hover: 0 0 20px rgba(107,92,231,0.08);
      --shadow-inset: none;
      --shadow-inset-hover: none;
    }

    /* === LIGHT THEME – page background === */
    html[data-theme="light"],
    [data-theme="light"] body { background: #eef0f6; }

    [data-theme="light"] .site-bg {
      background: linear-gradient(135deg, #e8ecf6 0%, #dfe4f2 20%, #e6eaf6 40%, #dde2f0 60%, #e4e8f4 80%, #e8ecf6 100%);
    }
    [data-theme="light"] .site-bg::before {
      background: linear-gradient(135deg, #e0e4f2 0%, #d6dbed 25%, #dce1f0 50%, #d6dbed 75%, #e0e4f2 100%);
    }
    [data-theme="light"] .site-bg::after {
      background:
        radial-gradient(ellipse 100% 120% at 50% 0%, rgba(107,92,231,0.05), transparent 60%),
        radial-gradient(ellipse 100% 140% at 50% 100%, rgba(74,143,224,0.04), transparent 70%);
    }

    /* === LIGHT THEME – component overrides === */

    /* Profile card */
    [data-theme="light"] .profile-card {
      background: rgba(255,255,255,0.58);
      border-color: rgba(0,0,0,0.07);
      box-shadow: 0 2px 16px rgba(30,40,80,0.06);
    }
    [data-theme="light"] .profile-card:hover {
      background: rgba(255,255,255,0.72);
      border-color: rgba(0,0,0,0.1);
      box-shadow: 0 8px 30px rgba(30,40,80,0.1), 0 0 15px rgba(107,92,231,0.05);
    }
    [data-theme="light"] .profile-card::before {
      background: linear-gradient(135deg, transparent, rgba(107,92,231,0.05), transparent);
    }

    /* Banner overlay – lighter */
    [data-theme="light"] .banner::after {
      background: radial-gradient(120% 80% at 100% -10%, rgba(107,92,231,0.1) 0%, transparent 50%),
                  radial-gradient(120% 80% at 0% -20%, rgba(74,143,224,0.08) 0%, transparent 50%);
    }

    /* Thought bubble – solid with shadow */
    [data-theme="light"] .thought {
      background: #ffffff;
      box-shadow: 0 4px 14px rgba(30,40,80,0.1);
      color: var(--text);
    }

    /* Username gradient – rich and visible */
    [data-theme="light"] .username {
      background: linear-gradient(90deg, #6b5ce7 0%, #4a8fe0 25%, #3d7dd4 50%, #4a8fe0 75%, #6b5ce7 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    /* Role badges – visible */
    [data-theme="light"] .role {
      background: rgba(107,92,231,0.06);
      border: 1px solid rgba(107,92,231,0.12);
      color: #4a4f5c;
    }
    [data-theme="light"] .role:hover {
      background: rgba(107,92,231,0.1);
      border-color: rgba(107,92,231,0.2);
    }
    [data-theme="light"] .role::before {
      filter: brightness(0.85);
    }

    /* Interest tags – softer text in light mode */
    [data-theme="light"] .interest-tag {
      color: #5c6370;
      background: rgba(107,92,231,0.06);
      border-color: rgba(107,92,231,0.1);
    }
    [data-theme="light"] .interest-tag:hover {
      color: #4a4f5c;
      background: rgba(107,92,231,0.1);
      border-color: rgba(107,92,231,0.18);
    }

    /* Social icons – darker on light */
    [data-theme="light"] .soc {
      background: rgba(30,35,60,0.07);
      border: 1px solid rgba(0,0,0,0.1);
      box-shadow: 0 2px 8px rgba(30,40,80,0.06);
      color: #2a2f3a;
    }
    [data-theme="light"] .soc:hover {
      background: rgba(30,35,60,0.12);
      border-color: rgba(0,0,0,0.15);
      box-shadow: 0 4px 16px rgba(30,40,80,0.1);
    }
    [data-theme="light"] .soc img {
      filter: brightness(0.2);
    }
    [data-theme="light"] .soc:hover img {
      filter: brightness(0.2);
    }

    /* Section cards */
    [data-theme="light"] .section {
      background: rgba(255,255,255,0.55);
      border-color: rgba(0,0,0,0.07);
      box-shadow: 0 2px 12px rgba(30,40,80,0.05);
    }
    [data-theme="light"] .section:hover {
      background: rgba(255,255,255,0.68);
      border-color: rgba(0,0,0,0.1);
      box-shadow: 0 8px 28px rgba(30,40,80,0.08);
    }
    [data-theme="light"] .section::before {
      background: linear-gradient(135deg, rgba(107,92,231,0.02), rgba(74,143,224,0.01), rgba(107,92,231,0.02));
    }

    /* About section */
    [data-theme="light"] .about-section {
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(0,0,0,0.07);
      box-shadow: 0 2px 12px rgba(30,40,80,0.05);
    }
    [data-theme="light"] .about-section:hover {
      background: rgba(255,255,255,0.68);
      border-color: rgba(107,92,231,0.12);
      box-shadow: 0 8px 28px rgba(30,40,80,0.08);
    }
    [data-theme="light"] .about-section::before {
      background: linear-gradient(90deg, transparent, rgba(107,92,231,0.2), transparent);
    }
    [data-theme="light"] .about-header {
      border-bottom-color: rgba(0,0,0,0.06);
    }

    /* About blocks – subtle bg */
    [data-theme="light"] .about-block {
      background: rgba(107,92,231,0.03);
      border: 1px solid rgba(0,0,0,0.05);
    }
    [data-theme="light"] .about-block:hover {
      background: rgba(107,92,231,0.06);
      border-color: rgba(0,0,0,0.08);
    }

    /* Fun fact items */
    [data-theme="light"] .fun-fact-item {
      background: rgba(107,92,231,0.03);
      border-color: rgba(0,0,0,0.05);
    }
    [data-theme="light"] .fun-fact-item:hover {
      background: rgba(107,92,231,0.06);
    }

    /* Profile buttons section */
    [data-theme="light"] .profile-buttons {
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(88,101,242,0.1);
      box-shadow: 0 2px 12px rgba(30,40,80,0.05);
    }
    [data-theme="light"] .profile-buttons:hover {
      border-color: rgba(88,101,242,0.2);
      box-shadow: 0 6px 20px rgba(30,40,80,0.1);
    }
    [data-theme="light"] .buttons-header {
      border-bottom-color: rgba(0,0,0,0.06);
    }
    [data-theme="light"] .buttons-footer {
      border-top-color: rgba(0,0,0,0.06);
    }

    /* Button items – visible */
    [data-theme="light"] .button-item {
      border-color: rgba(0,0,0,0.06);
    }
    [data-theme="light"] .button-item:hover::after {
      background: rgba(30,35,50,0.9);
      color: #fff;
    }

    /* Music widget – green-dominant glass */
    [data-theme="light"] .music-widget {
      background: linear-gradient(135deg, rgba(30,215,96,0.15) 0%, rgba(30,215,96,0.08) 40%, rgba(30,185,84,0.12) 70%, rgba(30,215,96,0.15) 100%);
      border-color: rgba(30,215,96,0.25);
      box-shadow: 0 2px 12px rgba(30,40,80,0.05), 0 0 18px rgba(30,215,96,0.08);
    }
    [data-theme="light"] .music-widget:hover {
      background: linear-gradient(135deg, rgba(30,215,96,0.22) 0%, rgba(30,215,96,0.12) 40%, rgba(30,185,84,0.18) 70%, rgba(30,215,96,0.22) 100%);
      border-color: rgba(30,215,96,0.4);
      box-shadow: 0 8px 28px rgba(30,40,80,0.08), 0 0 28px rgba(30,215,96,0.14);
    }
    [data-theme="light"] .music-widget-header {
      border-bottom-color: rgba(30,215,96,0.1);
    }
    [data-theme="light"] .music-widget:hover .music-widget-song {
      color: var(--text);
    }
    [data-theme="light"] .music-widget-title {
      text-shadow: none;
    }
    [data-theme="light"] .music-widget-title:hover {
      text-shadow: none;
    }

    /* Music controls – visible with borders */
    [data-theme="light"] .music-ctrl {
      background: rgba(0,0,0,0.04);
      border: 1px solid rgba(0,0,0,0.1);
    }
    [data-theme="light"] .music-ctrl-play {
      background: rgba(30,215,96,0.1);
      border-color: rgba(30,215,96,0.2);
    }

    /* Music cover art – lighter shadow */
    [data-theme="light"] .music-widget-cover {
      box-shadow: 0 3px 10px rgba(30,40,80,0.12), 0 0 10px rgba(30,215,96,0.06);
      border-color: rgba(30,215,96,0.15);
    }
    [data-theme="light"] .music-widget:hover .music-widget-cover {
      box-shadow: 0 5px 14px rgba(30,40,80,0.16), 0 0 18px rgba(30,215,96,0.1);
      border-color: rgba(30,215,96,0.25);
    }

    /* Music bars – keep green, slightly darker for visibility */
    [data-theme="light"] .music-widget-bars span {
      background: linear-gradient(to top, #15993f, #1db954, #1db954);
    }

    /* Music progress bar area */
    [data-theme="light"] .music-widget-progress {
      background: rgba(0,0,0,0.06);
    }
    [data-theme="light"] .music-widget-progress-bar {
      background: linear-gradient(90deg, #1db954, #1ed760);
    }

    /* Music subtitle text */
    [data-theme="light"] .music-widget-subtitle {
      color: var(--muted);
    }

    /* Tech section */
    [data-theme="light"] .tech-section {
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(0,0,0,0.07);
      box-shadow: 0 2px 12px rgba(30,40,80,0.05);
    }
    [data-theme="light"] .tech-section:hover {
      border-color: rgba(107,92,231,0.15);
      box-shadow: 0 6px 24px rgba(30,40,80,0.1), 0 0 15px rgba(107,92,231,0.06);
    }
    [data-theme="light"] .tech-divider {
      background: rgba(0,0,0,0.06);
    }

    /* Neofetch terminal */
    [data-theme="light"] .neofetch-terminal {
      background: rgba(255,255,255,0.65);
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 4px 16px rgba(30,40,80,0.06);
    }
    [data-theme="light"] .neofetch-terminal:hover {
      background: rgba(255,255,255,0.75);
      box-shadow: 0 8px 28px rgba(30,40,80,0.08);
    }
    [data-theme="light"] .neofetch-terminal::after {
      background: repeating-linear-gradient(0deg, rgba(0,0,0,0.008) 0px, rgba(0,0,0,0.008) 1px, transparent 1px, transparent 2px);
    }
    [data-theme="light"] .neofetch-terminal::before {
      background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
    }
    [data-theme="light"] .neofetch-terminal-title {
      background: rgba(0,0,0,0.03);
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    [data-theme="light"] .neofetch-terminal-wrapper {
      background: rgba(0,0,0,0.015);
    }
    [data-theme="light"] .neofetch-text {
      text-shadow: none;
    }
    [data-theme="light"] .neofetch-output-row {
      background: rgba(0,0,0,0.015);
      border-bottom-color: rgba(0,0,0,0.04);
    }

    /* Neofetch scrollbars */
    [data-theme="light"] .neofetch-display::-webkit-scrollbar-track,
    [data-theme="light"] .neofetch-container::-webkit-scrollbar-track {
      background: rgba(0,0,0,0.03);
    }
    [data-theme="light"] .neofetch-display::-webkit-scrollbar-thumb,
    [data-theme="light"] .neofetch-container::-webkit-scrollbar-thumb {
      background: rgba(107,92,231,0.2);
    }
    [data-theme="light"] .neofetch-display::-webkit-scrollbar-thumb:hover,
    [data-theme="light"] .neofetch-container::-webkit-scrollbar-thumb:hover {
      background: rgba(107,92,231,0.4);
    }

    /* Tech popup */
    [data-theme="light"] .tech-popup-content {
      background: rgba(255,255,255,0.8);
      border-color: rgba(0,0,0,0.08);
    }
    [data-theme="light"] .tech-popup-header,
    [data-theme="light"] .tech-popup-footer {
      background: rgba(0,0,0,0.02);
    }
    [data-theme="light"] .tech-popup-header {
      border-bottom-color: rgba(0,0,0,0.06);
    }
    [data-theme="light"] .tech-popup-footer {
      border-top-color: rgba(0,0,0,0.06);
    }
    [data-theme="light"] .tech-popup-close {
      background: rgba(0,0,0,0.05);
      border-color: rgba(0,0,0,0.08);
    }
    [data-theme="light"] .tech-input {
      background: rgba(0,0,0,0.04);
      border-color: rgba(0,0,0,0.08);
    }
    [data-theme="light"] .tech-input:focus {
      background: rgba(0,0,0,0.06);
      border-color: rgba(107,92,231,0.3);
    }

    /* Domain box – visible */
    [data-theme="light"] .domain-box {
      background: rgba(107,92,231,0.08);
      color: #5548b0;
    }

    /* Secondary buttons */
    [data-theme="light"] .btn {
      border-color: rgba(0,0,0,0.08);
    }
    [data-theme="light"] .btn.secondary {
      background: linear-gradient(135deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));
    }

    /* Theme toggle – light override */
    [data-theme="light"] .theme-toggle {
      background: rgba(255,255,255,0.45);
      border-color: rgba(0,0,0,0.08);
    }
    [data-theme="light"] .theme-toggle::before {
      background: linear-gradient(135deg, transparent, rgba(107,92,231,0.06), transparent);
    }

    /* Header */
    [data-theme="light"] .main-header {
      background: rgba(255,255,255,0.55);
      border-color: rgba(0,0,0,0.07);
      box-shadow: 0 2px 12px rgba(30,40,80,0.05);
    }
    [data-theme="light"] .main-header:hover {
      background: rgba(255,255,255,0.68);
      border-color: rgba(0,0,0,0.1);
    }

    /* Logo – darken for light bg */
    [data-theme="light"] .main-header-logo {
      filter: brightness(0.15);
    }

    /* Splash overlay */
    [data-theme="light"] #splash-overlay {
      background: rgba(238,240,246,0.95);
    }

    /* Footer – darker text */
    [data-theme="light"] footer {
      color: #3a3f4a;
    }
    [data-theme="light"] .hosting-note,
    [data-theme="light"] .version-info {
      color: #4a4f5a;
    }
    [data-theme="light"] footer a {
      color: #4a4f5a;
    }

    /* Badge images */
    [data-theme="light"] .badge-img {
      border-color: rgba(0,0,0,0.08);
    }

    /* Animated panel shimmer – subtle on light */
    [data-theme="light"] .animated-panel::before {
      background: linear-gradient(135deg, rgba(107,92,231,0.02), rgba(74,143,224,0.01), rgba(107,92,231,0.02));
    }

    /* Status dot online pulse */
    [data-theme="light"] .status-dot {
      box-shadow: 0 0 0 3px rgba(255,255,255,0.8);
    }

    /* GitHub icon glow fix */
    [data-theme="light"] .soc:nth-child(9):hover img {
      filter: drop-shadow(0 0 4px rgba(0,0,0,0.3));
    }

    /* === LIGHT THEME – smooth transition === */
    [data-theme-transitioning],
    [data-theme-transitioning] *,
    [data-theme-transitioning] *::before,
    [data-theme-transitioning] *::after {
      transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease,
                  box-shadow 0.35s ease, background 0.35s ease, fill 0.35s ease, filter 0.35s ease !important;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box; 
    }
    html { height: 100%; background: #020308; }
    body { min-height: 100%; background: #020308; }

   /* 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).
     Defaults are 0px so non-notched devices don't get extra padding. */
   :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
   }

    /* ===== ELEGANT 3D WEBGL BACKGROUND ===== */
    .site-bg {
      position: fixed;
      top: calc(-1 * env(safe-area-inset-top, 0px));
      right: calc(-1 * env(safe-area-inset-right, 0px));
      bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
      left: calc(-1 * env(safe-area-inset-left, 0px));
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(
        135deg,
        #020308 0%,
        #060918 20%,
        #0a0e1e 40%,
        #080c1a 60%,
        #050816 80%,
        #020308 100%
      );
      background-size: 400% 400%;
      animation: bg-gradient-shift 25s ease-in-out infinite;
      overflow: hidden;
    }

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

    /* 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: bg-gradient-shift 25s ease-in-out infinite;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.5s ease-out;
    }

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

    /* 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;
    }


    /* 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; }
    }
    
    /* Floating animation for decorative elements */
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }
    

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


    /* Profile shine effect */

    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 */
      /* Extend into iPhone display cutout / safe area */
      min-height: 100vh;
      min-height: 100dvh;
      min-height: -webkit-fill-available;
    }

    html {
      height: -webkit-fill-available;
    }

   /* 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 {
    perspective: 1200px;
    transform-style: preserve-3d;
    position: relative;
    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);
    overflow: hidden;
    box-shadow: var(--shadow-glass), var(--shadow-inset), var(--shadow-glow);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .profile-card.animate-in {
    animation: panel-fly-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  .profile-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);
  }

  /* Gradient overlay on hover (same as .card::before) */
  .profile-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;
    z-index: 2;
  }

  .profile-card:hover::before {
    opacity: 1;
  }

    .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 {
    /* no scale on hover */
  }

  /* 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 {
    /* no scale on hover */
  }

  /* 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 {
    /* no scale on hover */
  }

  /* 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.15; 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; padding-bottom: 2px; }
  
  /* 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); }
  @media (hover: hover) { .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 */
  @media (hover: hover) { .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)); }

  /* GitHub - white */
  .soc:nth-child(9):hover img { filter: brightness(0) saturate(100%) invert(100%) drop-shadow(0 0 4px rgba(255, 255, 255, 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;
    }
    
    @media (hover: hover) {
      .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; }
      .soc-github { grid-column: 1 / -1; }
      .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: 13px;
    line-height: 1.6;
  }

  .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;
  }

  .theme-toggle {
    padding: 10px;
    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);
    cursor: pointer;
    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;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .theme-toggle::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;
  }

  .theme-icon { display: block; }
  .theme-icon.moon { display: none; }
  [data-theme="light"] .theme-icon.sun { display: none; }
  [data-theme="light"] .theme-icon.moon { display: block; }

  @media (hover: hover) {
    .theme-toggle: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));
    }

    .theme-toggle:hover::before {
      opacity: 1;
      animation: gradient-shift 2s ease infinite;
    }
  }

  .theme-toggle:active {
    transform: scale(0.95);
  }

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

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

    .theme-toggle {
      padding: 8px;
    }
  }

  @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: 16px;
  }

  #neofetch-counter {
    font-family: 'CascadiaMono', monospace;
    font-weight: 700;
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 0.05em;
    min-width: 48px;
    text-align: center;
  }

  .tech-popup-footer-hint {
    opacity: 0.6;
  }

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

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

  .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;
    -webkit-overflow-scrolling: touch;
  }

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

  .neofetch-terminal {
    flex: 0 0 auto;
    width: 800px;
    height: 540px;
    background: rgba(8, 10, 16, 0.85);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0;
    font-family: 'CascadiaMono', 'Courier New', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
  }

  /* Top highlight line */
  .neofetch-terminal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    z-index: 1;
  }

  /* Subtle scanline overlay for retro feel */
  .neofetch-terminal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
  }

  @media (hover: hover) {
    .neofetch-terminal:hover {
      border-color: rgba(139, 125, 255, 0.15);
      background: rgba(10, 13, 20, 0.9);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(139, 125, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      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.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 12px;
    position: relative;
    user-select: none;
  }

  .neofetch-terminal-title::before {
    content: '';
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    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.85;
  }

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

  .neofetch-terminal-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
  }

  /* 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) {
    #tech-popup-modal {
      padding: 12px;
      align-items: center;
    }

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

    .tech-popup-header {
      padding: 14px 16px;
      position: sticky;
      top: 0;
      z-index: 2;
      background: inherit;
      -webkit-backdrop-filter: blur(30px);
      backdrop-filter: blur(30px);
    }

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

    .tech-popup-footer {
      padding: 10px 16px;
    }

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

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

    .neofetch-terminal {
      width: 85vw;
      min-width: 300px;
      height: 420px;
      font-size: 9px;
    }

    .neofetch-terminal-title {
      padding: 10px 12px;
      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: 10px;
    }
  }

  /* 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;
  }
  
  @media (hover: hover) {
    .button-item:hover {
      transform: translateY(-2px);
      z-index: 10;
      filter: brightness(1.1);
    }
  }

  @media (hover: hover) { .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;
  }

  .music-widget-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
  }

  .music-ctrl {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
  }

  @media (hover: hover) {
    .music-ctrl:hover {
      background: rgba(30, 215, 96, 0.15);
      border-color: rgba(30, 215, 96, 0.3);
      color: #1ed760;
      transform: scale(1.05);
    }
  }

  .music-ctrl:active {
    background: rgba(30, 215, 96, 0.15);
    border-color: rgba(30, 215, 96, 0.3);
    color: #1ed760;
    transform: scale(0.95);
  }

  .music-ctrl-play {
    width: 30px;
    height: 30px;
    background: rgba(30, 215, 96, 0.12);
    border-color: rgba(30, 215, 96, 0.2);
    color: #1ed760;
  }

  @media (hover: hover) {
    .music-ctrl-play:hover {
      background: rgba(30, 215, 96, 0.25);
    }
  }

  .music-widget-bars.paused span {
    animation-play-state: paused;
  }

  /* 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;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
  }
  
    .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);
    }

    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%);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .domain-track.dragging { cursor: grabbing; }
  .domain-row {
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    will-change: transform;
  }
  .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 */

  /* ===== SPLASH SCREEN — SVG LOGO ANIMATION ===== */

  #splash-overlay {
    position: fixed;
    top: calc(-1 * env(safe-area-inset-top, 0px));
    left: calc(-1 * env(safe-area-inset-left, 0px));
    right: calc(-1 * env(safe-area-inset-right, 0px));
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    /* Push content back into safe zone */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s ease-out;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
  }

  .splash-logo-container {
    width: min(55vw, 55vh);
    height: min(55vw, 55vh);
  }

  .splash-logo-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* ─── ARC OUTLINES (draw on) ─── */
  #splash-overlay .arc-purple,
  #splash-overlay .arc-blue {
    fill: none;
    stroke-dasharray: 2700;
    stroke-dashoffset: 2700;
    stroke-width: 2;
  }
  #splash-overlay .arc-purple {
    stroke: rgb(126, 89, 212);
  }
  #splash-overlay .arc-blue {
    stroke: rgb(61, 84, 183);
  }

  /* ─── ARC FILLS (fade in after outlines) ─── */
  #splash-overlay .arc-fill-purple,
  #splash-overlay .arc-fill-blue {
    opacity: 0;
  }
  #splash-overlay .arc-fill-purple { fill: rgb(126, 89, 212); }
  #splash-overlay .arc-fill-blue   { fill: rgb(61, 84, 183); }

  /* ─── SWOOSH ─── */
  #splash-overlay .swoosh-outline {
    fill: none;
    stroke: rgb(88, 170, 254);
    stroke-width: 2;
    stroke-dasharray: 2700;
    stroke-dashoffset: 2700;
  }
  #splash-overlay .swoosh-fill {
    fill: rgb(88, 170, 254);
    opacity: 0;
  }

  /* ─── STARS ─── */
  #splash-overlay .star {
    fill: white;
    opacity: 0;
    transform-origin: center;
    transform: scale(0.85);
  }

  /* ─── ANIMATIONS (only play when splash is visible) ─── */
  #splash-overlay.splash-visible .arc-purple {
    animation: splash-draw-stroke 1.3s ease-in-out 0.2s forwards;
  }
  #splash-overlay.splash-visible .arc-blue {
    animation: splash-draw-stroke 1.3s ease-in-out 0.35s forwards;
  }
  #splash-overlay.splash-visible .arc-fill-purple {
    animation: splash-fade-in 0.4s ease-in 1.6s forwards;
  }
  #splash-overlay.splash-visible .arc-fill-blue {
    animation: splash-fade-in 0.4s ease-in 1.75s forwards;
  }
  #splash-overlay.splash-visible .swoosh-outline {
    animation: splash-draw-stroke 1.4s ease-in-out 0.8s forwards;
  }
  #splash-overlay.splash-visible .swoosh-fill {
    animation: splash-fade-in 0.3s ease-in 2.05s forwards;
  }
  #splash-overlay.splash-visible .star-1 {
    animation: splash-star-appear 0.5s ease-out 1.9s forwards;
  }
  #splash-overlay.splash-visible .star-2 {
    animation: splash-star-appear 0.5s ease-out 2.05s forwards;
  }
  #splash-overlay.splash-visible .star-3 {
    animation: splash-star-appear 0.5s ease-out 2.2s forwards;
  }
  #splash-overlay.splash-visible .star-4 {
    animation: splash-star-appear 0.5s ease-out 2.35s forwards;
  }

  @keyframes splash-draw-stroke {
    to { stroke-dashoffset: 0; }
  }
  @keyframes splash-fade-in {
    to { opacity: 1; }
  }
  @keyframes splash-star-appear {
    0%   { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* ─── HIDDEN STATE (fade out) ─── */
  #splash-overlay.splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* ─── RESPONSIVE ─── */
  @media (min-width: 641px) {
    .splash-logo-container {
      width: min(45vw, 45vh);
      height: min(45vw, 45vh);
    }
  }
  @media (max-width: 640px) {
    .splash-logo-container {
      width: min(70vw, 70vh);
      height: min(70vw, 70vh);
    }
  }

  /* ===== 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);
  }

  /* Cards start hidden and animate individually */
  .section .card,
  .about-section .card {
    opacity: 0;
  }

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

  /* Card fly-in: slides up with subtle scale */
  @keyframes card-fly-in {
    0% {
      opacity: 0;
      transform: translateY(40px) scale(0.92);
      filter: blur(4px);
    }
    60% {
      filter: blur(0px);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0px);
    }
  }

  /* Card fly-in from left */
  @keyframes card-fly-in-left {
    0% {
      opacity: 0;
      transform: translateX(-50px) translateY(20px) scale(0.92);
      filter: blur(4px);
    }
    60% {
      filter: blur(0px);
    }
    100% {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1);
      filter: blur(0px);
    }
  }

  /* Card fly-in from right */
  @keyframes card-fly-in-right {
    0% {
      opacity: 0;
      transform: translateX(50px) translateY(20px) scale(0.92);
      filter: blur(4px);
    }
    60% {
      filter: blur(0px);
    }
    100% {
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1);
      filter: blur(0px);
    }
  }

  /* 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;
  }

  /* Cards within animated sections get staggered fly-in from alternating sides */
  .animate-in .card {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
  }

  .animate-in .card:nth-child(odd) {
    animation: card-fly-in-left 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .animate-in .card:nth-child(even) {
    animation: card-fly-in-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Staggered delays for cards within grids */
  .animate-in .grid .card:nth-child(1) { animation-delay: 0.1s; }
  .animate-in .grid .card:nth-child(2) { animation-delay: 0.2s; }
  .animate-in .grid .card:nth-child(3) { animation-delay: 0.3s; }
  .animate-in .grid .card:nth-child(4) { animation-delay: 0.4s; }
  .animate-in .grid .card:nth-child(5) { animation-delay: 0.5s; }
  .animate-in .grid .card:nth-child(6) { animation-delay: 0.6s; }

  /* 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;
    }
  }


  /* 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 - matching .card:hover */
    .profile-card:hover {
      box-shadow:
        var(--shadow-glass-hover),
        var(--shadow-inset),
        0 0 15px color(display-p3 0.58 0.52 1.15 / 0.15);
    }
    
    /* 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 theme toggle button */
    .theme-toggle: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),
          0 0 15px color(display-p3 0.58 0.52 1.15 / 0.15);
      }
      
      .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); }
    }
  }