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

    /* ========== SELECTION COLOR ========== */
    ::selection {
      background: rgba(45, 45, 45, 0.15);
      color: inherit;
    }
    ::-moz-selection {
      background: rgba(45, 45, 45, 0.15);
      color: inherit;
    }

    /* ========== WCAG AA - SKIP NAVIGATION ========== */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 16px;
      background: #0d0d0d;
      color: #fff;
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      z-index: 999999;
      text-decoration: none;
      transition: top 0.2s ease;
    }
    .skip-link:focus {
      top: 16px;
    }

    /* ========== WCAG AA - FOCUS INDICATORS ========== */
    /* Visible focus ring for all interactive elements */
    *:focus-visible {
      outline: 3px solid #2563eb;
      outline-offset: 2px;
    }
    /* Remove default outline when not focus-visible (mouse clicks) */
    *:focus:not(:focus-visible) {
      outline: none;
    }
    /* Ensure buttons in dark contexts get a lighter focus ring */
    .gpt-sidebar *:focus-visible,
    .human-mode *:focus-visible,
    .mode-switcher-float *:focus-visible {
      outline-color: #60a5fa;
    }

    /* ========== WCAG AA - PREFERS REDUCED MOTION ========== */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ========== VIEWPORT SCALING ========== */
    :root {
      --base-width: 1440;
      --base-height: 900;

      /* Soft Neumorphic — Light from top-left */
      --clay-bg: radial-gradient(ellipse at top left, #ECECEC 0%, #E5E5E5 50%, #DEDEDE 100%);
      --clay-bg-light: #ECECEC;
      --clay-bg-dark: #DEDEDE;
      --clay-surface: #E8E8E8;
      --clay-surface-raised: #EAEAEA;
      --clay-text: #2A2A2A;
      --clay-text-secondary: #5A5A5A;
      --clay-text-muted: #9A9A9A;
      --clay-accent: #6A6A6A;
      --clay-accent-soft: rgba(106, 106, 106, 0.1);
      --clay-icon: #4A4A4A;
      --clay-highlight: #FFFFFF;
      --clay-shadow-color: rgba(0, 0, 0, 0.3);
      --clay-shadow-strong: rgba(0, 0, 0, 0.45);
      --clay-ao: rgba(0, 0, 0, 0.08);
      --clay-bevel-top: rgba(255, 255, 255, 0.9);
      --clay-bevel-bottom: rgba(0, 0, 0, 0.18);
      --clay-radius: 24px;
      --clay-radius-pill: 999px;
      --clay-radius-lg: 32px;

      /* ChatGPT compat aliases */
      --chatgpt-bg-main: var(--clay-bg);
      --chatgpt-bg-sidebar: var(--clay-bg-dark);
      --chatgpt-bg-input: var(--clay-surface);
      --chatgpt-bg-hover: var(--clay-bg-light);
      --chatgpt-border: transparent;
      --chatgpt-text-primary: var(--clay-text);
      --chatgpt-text-secondary: var(--clay-text-secondary);
      --chatgpt-text-muted: var(--clay-text-muted);
      --chatgpt-accent: var(--clay-text);
      --chatgpt-card-bg: var(--clay-surface);
      --chatgpt-card-border: transparent;

      /* Neumorphic Tokens — dual-directional drop shadows + highlights */
      --neo-raised: 30px 30px 48px rgba(0, 0, 0, 0.4), -30px -30px 48px rgba(255, 255, 255, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.9);
      --neo-raised-hover: 35px 35px 56px rgba(0, 0, 0, 0.45), -35px -35px 56px rgba(255, 255, 255, 0.75), inset 0 2px 0 rgba(255, 255, 255, 0.95);
      --neo-raised-sm: 20px 20px 40px rgba(0, 0, 0, 0.35), -20px -20px 40px rgba(255, 255, 255, 0.65), inset 0 1.5px 0 rgba(255, 255, 255, 0.85);
      --neo-inset: inset 30px 30px 50px rgba(0, 0, 0, 0.16), inset -30px -30px 50px rgba(255, 255, 255, 0.7);
      --neo-inset-focus: inset 35px 35px 60px rgba(0, 0, 0, 0.2), inset -35px -35px 60px rgba(255, 255, 255, 0.8);
      --neo-inset-sm: inset 20px 20px 40px rgba(0, 0, 0, 0.14), inset -20px -20px 40px rgba(255, 255, 255, 0.65);

      /* Clay Card — extruded tile with bevel edges */
      --clay-card: 30px 30px 48px rgba(0, 0, 0, 0.4),
                   -30px -30px 48px rgba(255, 255, 255, 0.7),
                   inset 0 2px 1px var(--clay-bevel-top),
                   inset 0 -2px 1px var(--clay-bevel-bottom);
      --clay-card-hover: 35px 35px 56px rgba(0, 0, 0, 0.45),
                         -35px -35px 56px rgba(255, 255, 255, 0.75),
                         inset 0 3px 1px var(--clay-bevel-top),
                         inset 0 -2px 1px var(--clay-bevel-bottom);
      /* Clay Pill — smaller extruded element */
      --clay-pill: 20px 20px 40px rgba(0, 0, 0, 0.35),
                   -20px -20px 40px rgba(255, 255, 255, 0.65),
                   inset 0 2px 0 var(--clay-bevel-top),
                   inset 0 -1.5px 0 var(--clay-bevel-bottom);
      /* Inset Plate — subtle recessed surface with gentle depth */
      --clay-inset-plate: inset 18px 18px 35px rgba(0, 0, 0, 0.12),
                          inset -18px -18px 35px rgba(255, 255, 255, 0.5),
                          inset 0 1px 0 var(--clay-bevel-top),
                          inset 0 -1px 0 var(--clay-bevel-bottom);
    }


    /* ========== PAGE TRANSITION ========== */
    .page-transition {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #e8e8e8;
      z-index: 999999;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .page-transition.active {
      opacity: 1;
      pointer-events: all;
    }

    /* Fade in on page load */
    .desktop-app.chatgpt-style {
      animation: pageEnter 0.5s ease-out;
    }

    @keyframes pageEnter {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes zoomIn {
      from { transform: scale(1); }
      to { transform: scale(1.8); }
    }

    /* Tech Tree preview — zoom only starts after page load */
    body.page-loaded .tt-zoom-video {
      animation: zoomIn 8s ease-in-out forwards;
    }

    /* ========== LOADING SCREEN ========== */
    .loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #e8e8e8;
      z-index: 9999999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .loading-screen.fade-out {
      opacity: 0;
      pointer-events: none;
    }

    .loader-wrapper {
      width: 200px;
      height: 80px;
      position: relative;
      z-index: 1;
    }

    .loader-emoji-circle {
      position: absolute;
      left: 15%;
      transform-origin: 50% 100%;
      animation: loaderBounce .5s alternate infinite ease;
      font-size: 28px;
      line-height: 1;
    }

    .loader-emoji-circle:nth-child(2) {
      left: 45%;
      animation-delay: .2s;
    }

    .loader-emoji-circle:nth-child(3) {
      left: auto;
      right: 15%;
      animation-delay: .3s;
    }

    @keyframes loaderBounce {
      0% {
        top: 48px;
        transform: scaleX(1.5) scaleY(0.4);
      }
      40% {
        transform: scaleX(1) scaleY(1);
      }
      100% {
        top: 0%;
        transform: scaleX(1) scaleY(1);
      }
    }

    .loader-shadow {
      width: 20px;
      height: 4px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.15);
      position: absolute;
      top: 72px;
      transform-origin: 50%;
      z-index: -1;
      left: 15%;
      filter: blur(1px);
      animation: loaderShadow .5s alternate infinite ease;
    }

    .loader-shadow:nth-child(5) {
      left: 45%;
      animation-delay: .2s;
    }

    .loader-shadow:nth-child(6) {
      left: auto;
      right: 15%;
      animation-delay: .3s;
    }

    @keyframes loaderShadow {
      0% {
        transform: scaleX(1.5);
      }
      40% {
        transform: scaleX(1);
        opacity: .7;
      }
      100% {
        transform: scaleX(.2);
        opacity: .4;
      }
    }

    /* ========== MAGNETIC ELEMENTS ========== */
    /* Magnetic elements get smooth transform for pull effect */
    .magnetic {
      transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* ========== FULLPAGE SCROLL (JS-controlled) ========== */
    html {
      width: 100%;
      height: 100%;
      overflow-y: scroll; /* HTML is the scroll container - JS controls position */
      overflow-x: hidden;
      scrollbar-width: none; /* Firefox - hide scrollbar */
      -ms-overflow-style: none; /* IE/Edge */
      scroll-behavior: auto; /* No smooth scroll - JS handles animation */
    }

    html::-webkit-scrollbar {
      display: none; /* Chrome/Safari - hide scrollbar */
    }

    body {
      width: 100%;
      min-height: 100%;
      overflow: visible; /* Body content flows naturally */
      background: #e8e8e8;
      transition: background 0.4s ease;
    }

    /* ========== FLOATING ASSETS TOGGLE ========== */
    .assets-toggle {
      position: fixed;
      top: 20px;
      left: 20px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: #080808;
      border: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 200;
      transition: all 0.2s ease;
      overflow: hidden;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .assets-toggle::before {
      content: "";
      position: absolute;
      left: -15%;
      right: -15%;
      bottom: 25%;
      top: -100%;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.12);
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .assets-toggle::after {
      content: "";
      position: absolute;
      left: 2%;
      right: 2%;
      top: 10%;
      bottom: 30%;
      border-radius: 100px;
      box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .assets-toggle:hover {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .assets-toggle:hover::before {
      transform: translateY(-5%);
    }

    .assets-toggle:hover::after {
      opacity: 0.4;
      transform: translateY(5%);
    }

    .assets-toggle:active {
      transform: translateY(2px);
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.5),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.8),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.4),
        0 0.5rem 0.8rem rgba(0, 0, 0, 0.3);
    }

    .assets-toggle svg {
      width: 20px;
      height: 20px;
      stroke: rgba(255, 255, 255, 0.7);
      transition: stroke 0.3s ease, transform 0.3s ease;
    }

    .assets-toggle.active {
      background-color: #080808;
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.5),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.8),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .assets-toggle.active svg {
      stroke: rgba(255, 255, 255, 0.9);
    }

    .assets-toggle.active:hover {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.6),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.8),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.8),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    body.dark-mode .assets-toggle {
      background-color: #080808;
    }

    body.dark-mode .assets-toggle:hover {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.5),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.8),
        0 2rem 2rem rgba(0, 0, 0, 0.4),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    body.dark-mode .assets-toggle svg {
      stroke: rgba(255, 255, 255, 0.7);
    }

    body.dark-mode .assets-toggle.active {
      background: #0A84FF;
      border-color: #0A84FF;
    }

    body.dark-mode .assets-toggle.active svg {
      stroke: #ffffff;
    }

    /* Floating assets container - hidden by default */
    .floating-assets-container {
      pointer-events: none;
    }

    /* Override the default floatIn animation - keep hidden until toggled */
    .floating-assets-container .floating-decor {
      animation: none !important;
      opacity: 0 !important;
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .floating-assets-container.visible {
      pointer-events: auto;
    }

    .floating-assets-container.visible .floating-decor {
      opacity: 1 !important;
      pointer-events: auto;
    }

    /* Staggered entrance animation */
    .floating-assets-container.visible .floating-decor:nth-child(1) { transition-delay: 0s; }
    .floating-assets-container.visible .floating-decor:nth-child(2) { transition-delay: 0.05s; }
    .floating-assets-container.visible .floating-decor:nth-child(3) { transition-delay: 0.1s; }
    .floating-assets-container.visible .floating-decor:nth-child(4) { transition-delay: 0.15s; }
    .floating-assets-container.visible .floating-decor:nth-child(5) { transition-delay: 0.2s; }
    .floating-assets-container.visible .floating-decor:nth-child(6) { transition-delay: 0.25s; }

    /* ========== HERO NAME CARD - macOS Window Style ========== */
    .name-card-window {
      display: block !important;
      position: fixed !important;
      top: 48px !important;
      left: 48px !important;
      z-index: 999999 !important;
      pointer-events: none;
      opacity: 0;
      animation: nameCardSlideIn 0.6s ease forwards;
      animation-delay: 2.5s;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-radius: var(--clay-radius);
      box-shadow: var(--clay-card);
      overflow: hidden;
    }

    @keyframes nameCardSlideIn {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .name-card-titlebar {
      height: 40px;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border-bottom: none;
      box-shadow: inset 0 -1px 0 var(--clay-bevel-bottom);
      display: flex;
      align-items: center;
      padding: 0 14px;
    }

    .name-card-buttons {
      display: flex;
      gap: 8px;
    }

    .name-card-btn {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    .name-card-btn.close { background: #ff5f57; }
    .name-card-btn.minimize { background: #febc2e; }
    .name-card-btn.maximize { background: #28c840; }

    .name-card-content {
      padding: 24px 32px 28px;
      text-align: left;
    }

    .name-card-name {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
      font-size: 42px;
      font-weight: 600;
      color: #1d1d1f;
      letter-spacing: -0.03em;
      line-height: 1;
      margin: 0 0 8px 0;
    }

    .name-card-title {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
      font-size: 17px;
      font-weight: 500;
      color: #86868b;
      margin: 0;
      letter-spacing: -0.01em;
    }

    /* Dark mode */
    body.dark-mode .name-card-window {
      background: rgba(44, 44, 46, 0.95);
      box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.1),
        0 8px 40px rgba(0, 0, 0, 0.4),
        0 12px 28px rgba(0, 0, 0, 0.3);
    }

    body.dark-mode .name-card-titlebar {
      background: linear-gradient(180deg, #3d3d3d 0%, #323232 100%);
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    body.dark-mode .name-card-name {
      color: #f5f5f7;
    }

    body.dark-mode .name-card-title {
      color: #a1a1a6;
    }

    /* Hide when showing projects */
    body.showing-projects .name-card-window {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 0.3s ease !important;
    }

    /* Mobile */
    @media (max-width: 767px) {
      .name-card-window {
        top: 20px !important;
        left: 20px !important;
        right: 20px !important;
      }

      .name-card-content {
        padding: 20px 24px 24px;
      }

      .name-card-name {
        font-size: 32px;
      }

      .name-card-title {
        font-size: 15px;
      }
    }

    /* ========== CHATGPT DESIGN SYSTEM ========== */
    /*
     * Typography: "Söhne" with system fallbacks
     * Greeting: 32px, weight 600, tracking -0.02em
     * Body: 14-16px, weight 400, line-height 1.5
     * Small: 13px
     *
     * Spacing (8px base): 4, 8, 12, 16, 20, 24, 32, 40px
     *
     * Colors:
     * - Primary: #0d0d0d
     * - Secondary: #666666
     * - Muted: #999999
     * - Border: #e5e5e5
     * - Accent: #10a37f
     *
     * Sizing:
     * - Sidebar: 52px
     * - Input height: 52px
     * - Avatar: 28px
     * - Icon buttons: 32px
     * - Voice button: 36px
     */

    /* Full-screen container — Claymorphism / Neumorphic Hybrid */
    .desktop-app.chatgpt-style {
      --gpt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      --gpt-bg: var(--clay-bg);
      --gpt-text: var(--clay-text);
      --gpt-text-secondary: var(--clay-text-secondary);
      --gpt-border: transparent;
      --gpt-hover: var(--clay-bg-light);
      --gpt-accent: var(--clay-accent);

      background: #e8e8e8 !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      display: flex !important;
      width: 100vw !important;
      height: 100vh !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      transform: none !important;
      opacity: 1 !important;
      visibility: visible !important;
      font-family: var(--gpt-font);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      z-index: 99999 !important;
      overflow: hidden;
    }

    /* Backlight behind raised elements — disabled */
    .desktop-app.chatgpt-style::before {
      display: none;
    }

    /* Hide top nav bar when ChatGPT sidebar is active */
    .desktop-app.chatgpt-style ~ .macos-nav-bar,
    body:has(.desktop-app.chatgpt-style) .macos-nav-bar {
      display: none !important;
    }

    /* Hide ALL background content behind the GPT interface */
    .top-nav,
    .project-nav,
    .hero-full-section > .cursor-glow,
    .hero-full-section > .noise-overlay,
    .hero-full-section > .sketch-lines,
    .hero-full-section > .hero-card-bg,
    .scaled-wrapper,
    .name-card-window {
      display: none !important;
    }

    /* Human Mode hidden by default (JS toggles via inline style) */
    .human-mode {
      display: none;
    }

    /* ===== LEFT SIDEBAR — Minimal icon strip ===== */
    .desktop-app.chatgpt-style .gpt-sidebar {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 60px;
      height: 100%;
      padding: 16px 0;
      background: #e8e8e8;
      border-right: none;
      flex-shrink: 0;
    }

    /* Icon buttons at top */
    .gpt-sidebar-icons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 0 8px;
    }

    .gpt-sidebar-icon-btn {
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: var(--clay-text, #1e293b);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease;
      text-decoration: none;
    }

    .gpt-sidebar-icon-btn:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    .gpt-sidebar-icon-btn svg {
      width: 20px;
      height: 20px;
    }


    /* ===== MAIN CONTENT AREA — Matte Clay Surface ===== */
    .desktop-app.chatgpt-style .gpt-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--clay-bg);
      position: relative;
    }

    /* Film grain texture overlay */
    .desktop-app.chatgpt-style .gpt-main::after {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9998;
      opacity: 0.035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 180px 180px;
    }

    /* Top Left Model Selector + Dropdown */
    .desktop-app.chatgpt-style .gpt-model-selector-wrap {
      position: absolute;
      top: 16px;
      left: 20px;
      z-index: 20;
    }

    .desktop-app.chatgpt-style .gpt-model-selector {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      padding: 6px 10px;
      border-radius: 10px;
      background: none;
      border: none;
      font: inherit;
      transition: background 0.15s ease;
    }

    .desktop-app.chatgpt-style .gpt-model-selector:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    .desktop-app.chatgpt-style .gpt-model-name {
      font-family: var(--gpt-font);
      font-size: 18px;
      font-weight: 600;
      color: var(--clay-text);
    }

    .desktop-app.chatgpt-style .gpt-model-arrow {
      width: 14px;
      height: 14px;
      color: var(--clay-text-muted);
      transition: transform 0.2s ease;
    }

    .desktop-app.chatgpt-style .gpt-model-selector-wrap.open .gpt-model-arrow {
      transform: rotate(180deg);
    }

    /* Dropdown menu */
    .desktop-app.chatgpt-style .gpt-model-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      min-width: 200px;
      background: linear-gradient(145deg, #f5f5f5, #e8e8e8);
      border-radius: 12px;
      padding: 6px;
      box-shadow:
        6px 6px 16px rgba(0, 0, 0, 0.18),
        -4px -4px 12px rgba(255, 255, 255, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .desktop-app.chatgpt-style .gpt-model-selector-wrap.open .gpt-model-dropdown {
      display: block;
    }

    .desktop-app.chatgpt-style .gpt-dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      border: none;
      background: none;
      border-radius: 8px;
      cursor: pointer;
      font-family: var(--gpt-font);
      font-size: 14px;
      font-weight: 500;
      color: var(--clay-text);
      transition: background 0.15s ease;
    }

    .desktop-app.chatgpt-style .gpt-dropdown-item:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    .desktop-app.chatgpt-style .gpt-dropdown-item svg {
      flex-shrink: 0;
      color: var(--clay-text-secondary);
    }

    .desktop-app.chatgpt-style .gpt-dropdown-item span:first-of-type {
      flex: 1;
    }

    /* Checkmark — only shown on active item */
    .desktop-app.chatgpt-style .gpt-dropdown-check {
      font-size: 14px;
      color: var(--clay-text);
      opacity: 0;
    }

    .desktop-app.chatgpt-style .gpt-dropdown-item.active .gpt-dropdown-check {
      opacity: 1;
    }

    /* Hide the old floating toggle when AI mode is active */
    .mode-toggle.ai-active {
      display: none !important;
    }

    /* Left Icon Strip — ChatGPT-style vertical icon bar */
    .desktop-app.chatgpt-style .gpt-left-icons {
      position: absolute;
      top: 60px;
      left: 16px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      z-index: 5;
    }

    .desktop-app.chatgpt-style .gpt-left-icon {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      color: var(--clay-text-secondary);
      text-decoration: none;
      transition: color 0.15s ease, background 0.15s ease;
    }

    .desktop-app.chatgpt-style .gpt-left-icon:hover {
      color: var(--clay-text);
      background: rgba(0, 0, 0, 0.06);
    }

    .desktop-app.chatgpt-style .gpt-left-icon svg {
      width: 18px;
      height: 18px;
    }

    /* Top Right Icons */
    .desktop-app.chatgpt-style .gpt-top-right {
      position: absolute;
      top: 16px;
      right: 20px;
      display: flex;
      gap: 12px;
    }

    .desktop-app.chatgpt-style .gpt-icon-btn {
      width: 36px;
      height: 36px;
      background: transparent;
      border: 0;
      border-radius: 8px;
      color: #1d1d1f;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s ease, background 0.2s ease;
      text-decoration: none;
    }

    .desktop-app.chatgpt-style .gpt-icon-btn:hover {
      color: #1d1d1f;
      background: rgba(0, 0, 0, 0.06);
    }

    .desktop-app.chatgpt-style .gpt-icon-btn:active {
      color: #1d1d1f;
      background: rgba(0, 0, 0, 0.1);
    }

    /* Icon depth — add shadow to icon graphics for 3D perception */
    .desktop-app.chatgpt-style .gpt-plus-btn svg,
    .desktop-app.chatgpt-style .gpt-mic-btn svg {
      filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2)) drop-shadow(-1px -1px 2px rgba(255, 255, 255, 0.5));
      transition: filter 0.3s ease;
    }

    /* Centered Content — now top-down chat thread */
    .desktop-app.chatgpt-style .gpt-center {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px 200px;
      max-width: 1000px;
      margin: 0 auto;
      width: 100%;
      gap: 24px;
      overflow-y: auto;
    }

    /* Once conversation grows, switch to top-aligned scroll */
    .desktop-app.chatgpt-style .gpt-center.has-conversation {
      justify-content: flex-start;
    }

    /* ===== CHAT THREAD (intro animation) ===== */
    .chat-thread {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
      padding-top: 40px;
    }

    /* Suppress default fade-in on chat thread intro messages */
    .chat-thread > .gpt-chat-msg,
    .chat-thread > .gpt-chat-typing {
      animation: none;
    }

    /* Projects message — full width, no avatar */
    .chat-projects-msg {
      display: block !important;
      width: 100%;
    }


    /* Action pill buttons below projects */
    .gpt-response-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0 0 0;
      flex-wrap: wrap;
    }

    .gpt-action-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background-color: #080808;
      color: rgba(255, 255, 255, 0.7);
      font-family: var(--gpt-font);
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      border-radius: 100px;
      border: none;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      box-shadow:
        inset 0 0.2rem 0.6rem rgba(255, 255, 255, 0.3),
        inset 0 -0.05rem 0.15rem rgba(0, 0, 0, 0.7),
        inset 0 -0.25rem 0.6rem rgba(255, 255, 255, 0.5),
        0 0.8rem 0.8rem rgba(0, 0, 0, 0.2),
        0 0.3rem 0.3rem -0.15rem rgba(0, 0, 0, 0.6);
      transition: transform 0.15s ease, box-shadow 0.2s ease;
    }

    .gpt-action-pill:hover {
      transform: translateY(-2px);
      color: rgba(255, 255, 255, 0.9);
      box-shadow:
        inset 0 0.2rem 0.4rem rgba(255, 255, 255, 0.4),
        inset 0 -0.05rem 0.15rem rgba(0, 0, 0, 0.7),
        inset 0 -0.25rem 0.6rem rgba(255, 255, 255, 0.7),
        0 1.2rem 1.2rem rgba(0, 0, 0, 0.25),
        0 0.5rem 0.5rem -0.25rem rgba(0, 0, 0, 0.7);
    }

    .gpt-action-pill svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    /* Strip chat-projects-msg wrapper entirely in fullscreen gallery */
    .chat-projects-msg:has(.gpt-projects.hscroll-active) {
      display: contents !important;
    }

    /* JuliaLLM Logo — Glossy dark pill */
    .desktop-app.chatgpt-style .julia-logo {
      width: 34px;
      height: 34px;
      border-radius: var(--clay-radius-pill);
      background-color: #080808;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.85);
      font-size: 10px;
      font-weight: 600;
      font-family: var(--gpt-font);
      letter-spacing: -0.02em;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    /* Main Greeting — Soft clay text */
    .desktop-app.chatgpt-style .gpt-greeting {
      font-size: 26px;
      font-weight: 500;
      color: var(--clay-text);
      margin: 0;
      text-align: center;
      font-family: var(--gpt-font);
      letter-spacing: -0.01em;
      line-height: 1.4;
      max-width: none;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* Subgreeting */
    .desktop-app.chatgpt-style .gpt-subgreeting {
      font-size: 16px;
      font-weight: 400;
      color: var(--gpt-text-secondary);
      margin: 0 0 32px 0;
      text-align: center;
      font-family: var(--gpt-font);
    }

    /* Input Container — fixed at bottom like ChatGPT */
    .desktop-app.chatgpt-style .gpt-input-container {
      position: absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 48px);
      max-width: 860px;
      z-index: 10;
    }

    /* Action buttons — under project cards, left-aligned */
    .gpt-cards-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 12px;
    }

    .gpt-cards-action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      color: var(--clay-text-muted);
      text-decoration: none;
      transition: color 0.2s ease, background 0.2s ease;
    }

    .gpt-cards-action-btn:hover {
      color: var(--clay-text);
      background: rgba(0, 0, 0, 0.06);
    }

    /* Input footer — model label below input bar */
    .gpt-input-footer {
      display: flex;
      justify-content: center;
      padding: 8px 0 0;
    }

    .gpt-input-model-label {
      font-family: var(--gpt-font);
      font-size: 12px;
      font-weight: 500;
      color: var(--clay-text-muted);
      letter-spacing: 0.01em;
    }

    /* Suggestion chips — hidden by default, shown on input focus */
    .gpt-suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 0 12px;
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .gpt-suggestions.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .gpt-suggestion {
      padding: 8px 16px;
      background-color: #080808;
      color: rgba(255, 255, 255, 0.7);
      font-family: var(--gpt-font);
      font-size: 13px;
      font-weight: 400;
      border: none;
      border-radius: 100px;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 1rem 1rem rgba(0, 0, 0, 0.2),
        0 0.4rem 0.4rem -0.2rem rgba(0, 0, 0, 0.6);
      transition: transform 0.15s ease, box-shadow 0.2s ease, color 0.15s ease;
    }

    .gpt-suggestion::before,
    .gpt-suggestion::after {
      content: "";
      position: absolute;
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .gpt-suggestion::before {
      left: -15%;
      right: -15%;
      bottom: 25%;
      top: -100%;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.12);
    }

    .gpt-suggestion::after {
      left: 6%;
      right: 6%;
      top: 12%;
      bottom: 40%;
      border-radius: 22px 22px 0 0;
      box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    }

    .gpt-suggestion:hover::before {
      transform: translateY(-5%);
    }

    .gpt-suggestion:hover::after {
      opacity: 0.4;
      transform: translateY(5%);
    }

    .gpt-suggestion:hover {
      color: rgba(255, 255, 255, 0.9);
      transform: translateY(-2px);
      box-shadow:
        inset 0 0.15rem 0.3rem rgba(255, 255, 255, 0.35),
        inset 0 -0.04rem 0.1rem rgba(0, 0, 0, 0.6),
        inset 0 -0.2rem 0.4rem rgba(255, 255, 255, 0.6),
        0 0.8rem 0.8rem rgba(0, 0, 0, 0.2),
        0 0.3rem 0.3rem -0.15rem rgba(0, 0, 0, 0.5);
    }

    /* Input Bar — Glossy dark pill */
    .desktop-app.chatgpt-style .gpt-input-bar {
      display: flex;
      align-items: center;
      background-color: #080808;
      border: 0;
      border-radius: var(--clay-radius-pill);
      padding: 14px 28px;
      gap: 8px;
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 860px;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 3rem 3rem rgba(0, 0, 0, 0.3),
        0 1rem 1rem -0.6rem rgba(0, 0, 0, 0.8);
      transition: all 0.2s ease;
      cursor: pointer;
    }

    /* Glossy shine — upper reflection */
    .desktop-app.chatgpt-style .gpt-input-bar::before {
      content: "";
      position: absolute;
      left: -15%;
      right: -15%;
      bottom: 25%;
      top: -100%;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.12);
      transition: all 0.3s ease;
      pointer-events: none;
      z-index: 1;
    }

    /* Glossy shine — top edge highlight */
    .desktop-app.chatgpt-style .gpt-input-bar::after {
      content: "";
      position: absolute;
      left: 2%;
      right: 2%;
      top: 10%;
      bottom: 30%;
      border-radius: 100px;
      box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8);
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0) 100%
      );
      transition: all 0.3s ease;
      pointer-events: none;
      z-index: 1;
    }

    .desktop-app.chatgpt-style .gpt-input-bar:hover {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 3rem 3rem rgba(0, 0, 0, 0.3),
        0 1rem 1rem -0.6rem rgba(0, 0, 0, 0.8);
    }

    .desktop-app.chatgpt-style .gpt-input-bar:hover::before {
      transform: translateY(-5%);
    }

    .desktop-app.chatgpt-style .gpt-input-bar:hover::after {
      opacity: 0.4;
      transform: translateY(5%);
    }

    .desktop-app.chatgpt-style .gpt-input-bar:active {
      transform: translateY(4px);
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.5),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.8),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.4),
        0 3rem 3rem rgba(0, 0, 0, 0.3),
        0 1rem 1rem -0.6rem rgba(0, 0, 0, 0.8);
    }

    /* Plus button (left) */
    .desktop-app.chatgpt-style .gpt-plus-btn {
      width: 36px;
      height: 36px;
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: color 0.2s ease;
      pointer-events: auto;
    }

    .desktop-app.chatgpt-style .gpt-plus-btn:hover {
      color: rgba(255, 255, 255, 0.8);
    }

    /* Mic button */
    .desktop-app.chatgpt-style .gpt-mic-btn {
      width: 36px;
      height: 36px;
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: color 0.2s ease;
      pointer-events: none;
    }

    .desktop-app.chatgpt-style .gpt-mic-btn:hover {
      color: rgba(255, 255, 255, 0.8);
    }

    /* Voice/waveform button */
    .desktop-app.chatgpt-style .gpt-voice-btn {
      width: 36px;
      height: 36px;
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: color 0.2s ease;
      pointer-events: none;
    }

    .desktop-app.chatgpt-style .gpt-voice-btn:hover {
      color: rgba(255, 255, 255, 0.8);
    }

    .desktop-app.chatgpt-style .gpt-input-field {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 15px;
      font-family: var(--gpt-font);
      color: rgba(255, 255, 255, 0.7);
      outline: none;
      padding: 6px 0;
      pointer-events: auto;
      cursor: text;
      position: relative;
      z-index: 2;
    }

    .desktop-app.chatgpt-style .gpt-input-field::placeholder {
      color: rgba(255, 255, 255, 0.4);
      opacity: 1;
    }

    /* Projects Section */
    .desktop-app.chatgpt-style .gpt-projects {
      width: 100%;
      max-width: 1000px;
      margin: 0;
    }

    /* Projects header - "Try something new" */
    .desktop-app.chatgpt-style .gpt-projects-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      padding: 0 4px;
    }

    .desktop-app.chatgpt-style .gpt-projects-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--clay-text-secondary);
      font-family: var(--gpt-font);
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .desktop-app.chatgpt-style .gpt-projects-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .desktop-app.chatgpt-style .gpt-shuffle-btn,
    .desktop-app.chatgpt-style .gpt-dismiss-btn {
      width: 32px;
      height: 32px;
      background-color: #080808;
      border: none;
      border-radius: var(--clay-radius-pill);
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .desktop-app.chatgpt-style .gpt-shuffle-btn:hover,
    .desktop-app.chatgpt-style .gpt-dismiss-btn:hover {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
      transform: translateY(-1px);
    }

    /* Footer hint text - hidden */
    .desktop-app.chatgpt-style .gpt-footer-hint {
      display: none;
      margin: 8px 0 0 0;
      font-family: var(--gpt-font);
    }

    /* Input Wrapper — Glossy dark pill (chat context) */
    .desktop-app.chatgpt-style .gpt-input-wrapper {
      width: 100%;
      max-width: 680px;
      height: 52px;
      background-color: #080808;
      border: none;
      border-radius: var(--clay-radius-pill);
      padding: 0 12px 0 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
      margin-bottom: 32px;
      transition: all 0.2s ease;
    }

    .desktop-app.chatgpt-style .gpt-input-wrapper:focus-within {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .desktop-app.chatgpt-style .gpt-plus-btn {
      width: 32px;
      height: 32px;
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: color 0.2s ease;
    }

    .desktop-app.chatgpt-style .gpt-plus-btn:hover {
      color: rgba(255, 255, 255, 0.8);
    }

    .desktop-app.chatgpt-style .gpt-plus-btn:active {
      transform: translateY(2px);
    }

    .desktop-app.chatgpt-style .gpt-input {
      flex: 1;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.7);
      font-size: 16px;
      font-family: inherit;
      outline: none;
      padding: 8px 0;
    }

    .desktop-app.chatgpt-style .gpt-input::placeholder {
      color: rgba(255, 255, 255, 0.35);
      opacity: 1;
    }

    .desktop-app.chatgpt-style .gpt-mic-btn {
      width: 34px;
      height: 34px;
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: color 0.2s ease;
    }

    .desktop-app.chatgpt-style .gpt-mic-btn:hover {
      color: rgba(255, 255, 255, 0.8);
    }

    .desktop-app.chatgpt-style .gpt-mic-btn:active {
      transform: translateY(2px);
    }

    .desktop-app.chatgpt-style .gpt-voice-btn {
      width: 40px;
      height: 40px;
      background: transparent;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      color: rgba(255, 255, 255, 0.5);
      transition: color 0.2s ease;
    }

    .desktop-app.chatgpt-style .gpt-voice-btn:hover {
      color: rgba(255, 255, 255, 0.8);
    }

    .desktop-app.chatgpt-style .gpt-voice-btn:active {
      transform: translateY(2px);
    }

    /* Suggestions Section */
    .desktop-app.chatgpt-style .gpt-suggestions {
      width: 100%;
      max-width: 680px;
    }

    .desktop-app.chatgpt-style .gpt-suggestions-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .desktop-app.chatgpt-style .gpt-suggestions-label {
      font-size: 13px;
      color: var(--clay-text);
    }

    .desktop-app.chatgpt-style .gpt-suggestions-actions {
      display: flex;
      gap: 4px;
    }

    .desktop-app.chatgpt-style .gpt-action-btn {
      width: 28px;
      height: 28px;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border: none;
      color: var(--clay-text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--clay-radius-pill);
      box-shadow: var(--neo-raised-sm);
      transition: box-shadow 0.2s ease, transform 0.15s ease;
    }

    .desktop-app.chatgpt-style .gpt-action-btn:hover {
      box-shadow: var(--neo-raised);
      transform: translateY(-1px);
    }

    .desktop-app.chatgpt-style .gpt-action-btn:active {
      box-shadow: var(--neo-inset-sm);
      transform: translateY(0);
    }

    /* 4 Cards in a Row - ChatGPT exact style */
    .desktop-app.chatgpt-style .gpt-cards-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      max-width: 1100px;
      width: 100%;
    }

    .desktop-app.chatgpt-style .gpt-card {
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border: none;
      border-radius: var(--clay-radius);
      padding: 18px 20px;
      cursor: pointer;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      min-height: 110px;
      box-shadow: var(--clay-card);
    }

    .desktop-app.chatgpt-style .gpt-card:hover {
      box-shadow: var(--clay-card-hover);
      transform: translateY(-4px);
    }

    .desktop-app.chatgpt-style .gpt-card:active {
      box-shadow: var(--clay-inset-plate);
      transform: translateY(0);
    }

    .desktop-app.chatgpt-style .gpt-card-icon {
      font-size: 20px;
      flex-shrink: 0;
      line-height: 1;
      color: var(--clay-icon);
    }

    .desktop-app.chatgpt-style .gpt-card-text {
      font-size: 14px;
      font-weight: 400;
      color: var(--clay-text-secondary);
      line-height: 1.4;
      font-family: var(--gpt-font);
      text-align: left;
    }

    /* ===== PROJECT PREVIEW CARDS ===== */
    .desktop-app.chatgpt-style .project-preview-cards {
      display: flex;
      flex-direction: row;
      gap: 12px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: none;
      box-shadow: none;
    }

    .desktop-app.chatgpt-style .project-preview-cards .project-preview-card {
      flex: 1;
      min-width: 0;
    }

    .desktop-app.chatgpt-style .project-preview-card {
      padding: 0 !important;
      min-height: 240px !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      border-radius: 20px !important;
      border: 1px solid transparent !important;
      border-top-color: rgba(255, 255, 255, 0.4) !important;
      border-left-color: rgba(255, 255, 255, 0.25) !important;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface)) !important;
      position: relative !important;
      text-decoration: none !important;
      color: inherit !important;
      cursor: pointer !important;
      /* Super close shadows and highlights for subtle depth */
      box-shadow:
        3px 3px 8px rgba(0, 0, 0, 0.15),
        -3px -3px 8px rgba(255, 255, 255, 0.5) !important;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    .desktop-app.chatgpt-style .project-preview-card:hover {
      transform: translateY(-3px) scale(1.01) !important;
      z-index: 2 !important;
      box-shadow:
        6px 6px 16px rgba(0, 0, 0, 0.18),
        -4px -4px 12px rgba(255, 255, 255, 0.55) !important;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface)) !important;
    }

    /* Disable hover previews until page is fully loaded */
    body:not(.page-loaded) .project-preview-card .hover-scroll-preview {
      display: none !important;
    }
    body:not(.page-loaded) .project-preview-card:hover .stacking-window-preview {
      opacity: 1 !important;
    }
    body:not(.page-loaded) .project-preview-card:hover .card-preview-footer {
      opacity: 1 !important;
      transform: none !important;
    }

    /* Cursor in fullscreen gallery mode */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .project-preview-card {
      cursor: pointer !important;
    }
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .project-preview-card * {
      cursor: pointer !important;
    }

    /* ===== HORIZONTAL SCROLL PREVIEW ON HOVER ===== */
    .desktop-app.chatgpt-style .project-preview-card .hover-scroll-preview {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #1e1e1e;
      border-radius: var(--clay-radius);
      overflow-x: auto;
      overflow-y: hidden;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      z-index: 10;
      scrollbar-width: none; /* Firefox */
      transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
    }

    .desktop-app.chatgpt-style .project-preview-card .hover-scroll-preview::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }

    .desktop-app.chatgpt-style .project-preview-card:hover .hover-scroll-preview {
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0.5s;
    }

    .desktop-app.chatgpt-style .project-preview-card:not(:hover) .hover-scroll-preview {
      transition-delay: 0s;
    }

    /* Fade out static preview smoothly on hover */
    .desktop-app.chatgpt-style .project-preview-card .stacking-window-preview {
      transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .desktop-app.chatgpt-style .project-preview-card:hover .stacking-window-preview {
      opacity: 0;
      transition-delay: 0.5s;
    }

    .desktop-app.chatgpt-style .project-preview-card:not(:hover) .stacking-window-preview {
      transition-delay: 0s;
    }

    .hover-scroll-preview .scroll-item {
      flex-shrink: 0;
      width: 160px;
      height: calc(100% - 8px);
      background: rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: none;
      transition: transform 0.2s ease;
    }

    .hover-scroll-preview .scroll-item:hover {
      transform: scale(1.03);
    }

    .hover-scroll-preview .scroll-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 11px;
    }

    .hover-scroll-preview .scroll-item-text {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 8px;
    }

    /* View Project CTA at end of scroll */
    .hover-scroll-preview .scroll-view-cta {
      background: rgba(255, 255, 255, 0.15);
      flex-direction: column;
      gap: 6px;
      min-width: 100px;
      width: 100px;
    }

    .hover-scroll-preview .scroll-view-cta:hover {
      background: rgba(255, 255, 255, 0.22);
    }

    .hover-scroll-preview .scroll-cta-text {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      text-align: center;
      line-height: 1.3;
    }

    .hover-scroll-preview .scroll-cta-arrow {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.9);
    }

    /* Scroll hint gradient on right edge */
    .desktop-app.chatgpt-style .project-preview-card .hover-scroll-preview::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
      height: 100%;
      background: linear-gradient(to left, #1e1e1e, transparent);
      pointer-events: none;
      border-radius: 0 16px 16px 0;
    }

    /* ===== SHARED FULLSCREEN GPT OVERLAY ===== */
    /* DISABLED - causes performance issues */
    .shared-gpt-overlay {
      display: none !important;
    }

    /* Light sidebar on left — Clay surface with neomorphic edge */
    .shared-gpt-overlay .card-gpt-sidebar {
      width: 260px;
      background: linear-gradient(145deg, var(--clay-bg-light), var(--clay-bg-dark));
      border-right: none;
      /* Neomorphic shadow on right edge - rising from surface */
      box-shadow:
        10px 0 30px rgba(0, 0, 0, 0.2),
        -2px 0 10px rgba(255, 255, 255, 0.3),
        inset -1px 0 0 var(--clay-highlight);
      padding: 12px;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      pointer-events: auto;
      position: relative;
    }

    /* Glow behind sidebar — disabled */
    .shared-gpt-overlay .card-gpt-sidebar::before {
      display: none;
    }

    /* Main content panels - hidden by default */
    .shared-gpt-overlay .card-gpt-main {
      position: absolute;
      top: 0;
      right: 0;
      width: calc(100% - 260px);
      height: 100%;
      display: flex;
      flex-direction: column;
      background: var(--clay-bg);
      opacity: 0;
      pointer-events: none;
      will-change: opacity;
    }

    /* Glow behind chat content — disabled */
    .shared-gpt-overlay .card-gpt-main::before {
      display: none;
    }

    /* Active content panel - instant switch, no animation for speed */
    .shared-gpt-overlay .card-gpt-main.active {
      opacity: 1;
      pointer-events: auto;
    }

    .card-gpt-sidebar-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--clay-text);
      font-size: 14px;
      font-weight: 500;
      font-family: var(--gpt-font);
      padding: 8px;
    }

    .card-gpt-sidebar-logo svg {
      width: 20px;
      height: 20px;
      color: var(--clay-text);
    }


    /* User message — clay pill at top right */
    .card-gpt-user-msg {
      align-self: flex-end;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      color: var(--clay-text);
      padding: 12px 18px;
      border-radius: var(--clay-radius-pill);
      font-size: 15px;
      font-family: var(--gpt-font);
      margin: 24px 48px 20px;
      opacity: 0;
      transform: translateY(-10px);
      animation: gpt-msg-slide 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      animation-delay: 0.05s;
      box-shadow: var(--neo-raised-sm);
    }

    /* Response — clay card with preview content */
    .card-gpt-response {
      flex: 1;
      margin: 0 48px 20px;
      border-radius: var(--clay-radius);
      overflow: hidden;
      opacity: 0;
      transform: translateY(15px);
      animation: gpt-response-slide 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
      animation-delay: 0.15s;
      box-shadow: var(--clay-card);
      border: none;
    }

    .card-gpt-response-preview {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    /* Input bar at bottom - light gray like ChatGPT */
    .card-gpt-input {
      padding: 12px 48px 28px;
      display: flex;
      justify-content: center;
    }

    .card-gpt-input-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      background-color: #080808;
      border: 0;
      border-radius: var(--clay-radius-pill);
      padding: 12px 16px;
      max-width: 700px;
      width: 100%;
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .card-gpt-input-field {
      flex: 1;
      font-size: 15px;
      color: rgba(255, 255, 255, 0.4);
      font-family: var(--gpt-font);
    }

    .card-gpt-send-btn {
      width: 34px;
      height: 34px;
      background-color: #080808;
      border-radius: var(--clay-radius-pill);
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .card-gpt-send-btn::before {
      content: "";
      position: absolute;
      left: -15%;
      right: -15%;
      bottom: 25%;
      top: -100%;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.12);
      pointer-events: none;
    }

    .card-gpt-send-btn::after {
      content: "";
      position: absolute;
      left: 2%;
      right: 2%;
      top: 10%;
      bottom: 30%;
      border-radius: 100px;
      box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
      pointer-events: none;
    }

    .card-gpt-send-btn svg {
      width: 14px;
      height: 14px;
      color: #ffffff;
    }

    /* Overlay input bar — glossy dark pill matching main page */
    .shared-gpt-overlay .gpt-input-bar {
      display: flex;
      align-items: center;
      background-color: #080808;
      border: 0;
      border-radius: var(--clay-radius-pill);
      padding: 14px 20px;
      gap: 8px;
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
      max-width: 700px;
      width: 100%;
    }

    .shared-gpt-overlay .gpt-plus-btn {
      width: 32px;
      height: 32px;
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: color 0.2s ease;
    }

    .shared-gpt-overlay .gpt-plus-btn:hover {
      color: rgba(255, 255, 255, 0.8);
    }

    .shared-gpt-overlay .gpt-input-field {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 15px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: rgba(255, 255, 255, 0.7);
      outline: none;
      padding: 6px 0;
    }

    .shared-gpt-overlay .gpt-input-field::placeholder {
      color: rgba(255, 255, 255, 0.35);
      opacity: 1;
    }

    .shared-gpt-overlay .gpt-send-btn {
      width: 34px;
      height: 34px;
      background-color: #080808;
      border: none;
      border-radius: 50%;
      color: rgba(255, 255, 255, 0.9);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .shared-gpt-overlay .gpt-send-btn::before {
      content: "";
      position: absolute;
      left: -15%;
      right: -15%;
      bottom: 25%;
      top: -100%;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.12);
      pointer-events: none;
    }

    .shared-gpt-overlay .gpt-send-btn::after {
      content: "";
      position: absolute;
      left: 2%;
      right: 2%;
      top: 10%;
      bottom: 30%;
      border-radius: 100px;
      box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
      pointer-events: none;
    }

    .shared-gpt-overlay .gpt-send-btn svg {
      width: 14px;
      height: 14px;
    }

    .shared-gpt-overlay .gpt-mic-btn {
      width: 32px;
      height: 32px;
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: color 0.2s ease;
    }

    .shared-gpt-overlay .gpt-mic-btn:hover {
      color: rgba(255, 255, 255, 0.8);
    }

    .shared-gpt-overlay .gpt-voice-btn {
      width: 40px;
      height: 40px;
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: color 0.2s ease;
    }

    .shared-gpt-overlay .gpt-voice-btn:hover {
      color: rgba(255, 255, 255, 0.8);
    }

    /* Hide typing */
    .card-gpt-typing {
      display: none;
    }

    @keyframes gpt-msg-slide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes gpt-response-slide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Reset on unhover */
    .desktop-app.chatgpt-style .project-preview-card:not(:hover) .card-gpt-user-msg,
    .desktop-app.chatgpt-style .project-preview-card:not(:hover) .card-gpt-response {
      animation: none;
      opacity: 0;
    }

    /* Mobile */
    @media (max-width: 768px) {
      .shared-gpt-overlay .card-gpt-sidebar {
        display: none;
      }
      .shared-gpt-overlay .card-gpt-main {
        width: 100%;
        left: 0;
      }
      .card-gpt-user-msg,
      .card-gpt-response {
        margin-left: 20px;
        margin-right: 20px;
      }
      .card-gpt-input {
        padding: 12px 20px 24px;
      }
    }

    /* ===== PREVIEW STYLES IN RESPONSE ===== */
    /* ===== HOVER FULLSCREEN PREVIEW STYLES ===== */
    .card-gpt-response-preview {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Full preview container styles */
    .hover-full {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* PERFORMANCE: Disable all animations in the overlay */
    .shared-gpt-overlay *,
    .shared-gpt-overlay *::before,
    .shared-gpt-overlay *::after {
      animation: none !important;
      transition: none !important;
    }

    /* Tech Tree hover preview - static only */
    .hover-preview-tech-tree {
      background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    }

    .hover-preview-tech-tree .p1-preview-container {
      background: transparent;
    }

    /* Hide heavy animated elements */
    .hover-preview-tech-tree .p1-aurora,
    .hover-preview-tech-tree .p1-color-shift,
    .hover-preview-tech-tree .p1-glow-orbs,
    .hover-preview-tech-tree .p1-particles,
    .hover-preview-tech-tree .p1-breathe,
    .hover-preview-tech-tree .p1-bg-nodes,
    .hover-preview-tech-tree .p1-nodes-container {
      display: none !important;
    }

    .hover-preview-tech-tree .p1-content {
      position: relative;
      z-index: 10;
      text-align: center;
    }

    .hover-preview-tech-tree .p1-title {
      font-size: 48px;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 0 60px rgba(0, 255, 204, 0.5), 0 4px 24px rgba(0, 0, 0, 0.4);
      line-height: 1.1;
    }

    /* Claude Flow hover preview */
    .hover-preview-claude-flow .claude-flow-banner {
      background: linear-gradient(135deg, #fff5f0 0%, #ffe8e0 50%, #ffd4c4 100%);
    }

    /* Hide animated blobs */
    .hover-preview-claude-flow .gradient-animated,
    .hover-preview-claude-flow .gradient-bg,
    .hover-preview-claude-flow .noise {
      display: none !important;
    }

    .hover-preview-claude-flow .banner-content {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .hover-preview-claude-flow .claude-logo {
      width: 48px;
      height: 48px;
    }

    .hover-preview-claude-flow .claude-wordmark {
      font-size: 42px;
      font-weight: 600;
      color: #1a1a1a;
    }

    .hover-preview-claude-flow .x-mark {
      font-size: 28px;
      color: rgba(30, 41, 59, 0.3);
    }

    .hover-preview-claude-flow .flow-text {
      font-size: 36px;
      font-weight: 500;
      color: var(--clay-text);
    }

    /* FinQuantum hover preview */
    .hover-preview-finquantum .finquantum-banner {
      background: linear-gradient(135deg, #1E293B 0%, #2C4A66 50%, #4A6D91 100%);
    }

    .hover-preview-finquantum .banner-content {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .hover-preview-finquantum .logo-text {
      font-size: 48px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -1px;
      text-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    .hover-preview-finquantum .tagline {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /* WorryJar hover preview */
    .hover-preview-worryjar {
      background: linear-gradient(135deg, #fef6e9 0%, #fce4d6 50%, #f8d7c4 100%);
    }

    .hover-preview-worryjar .p4-preview {
      background: transparent;
    }

    /* Hide heavy video element */
    .hover-preview-worryjar .iphone-mockup {
      display: none !important;
    }

    /* Show simple text instead */
    .hover-preview-worryjar::after {
      content: 'WorryJar';
      font-size: 48px;
      font-weight: 700;
      color: #c96f3c;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .desktop-app.chatgpt-style .card-preview-container {
      flex: 1;
      overflow: hidden;
      position: relative;
      border-radius: 20px;
      height: 240px;
      min-height: 180px;
      width: 100%;
      background: #1d1d1f;
    }

    /* Base preview - fill the card */
    .desktop-app.chatgpt-style .card-preview-container .stacking-window-preview {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      transform: scale(1) !important;
      transform-origin: center center !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: none !important;
      background: transparent !important;
      transition: none !important;
    }

    /* No zoom on hover - overlay takes over */

    /* Tech Tree - Neomorphic button (dark tech) */
    .desktop-app.chatgpt-style .card-preview-container .tt-neo {
      background: #1e1e22 !important;
      overflow: hidden !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      position: relative !important;
    }

    /* Scene wrapper - animates camera zoom & pan */
    .tt-neo-scene {
      position: absolute;
      inset: -20%;
      width: 140%;
      height: 140%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: tt-camera 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      will-change: transform;
    }

    /* Subtle dot grid background - on the scene so it moves with camera */
    .tt-neo-scene::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(94, 236, 208, 0.08) 1px, transparent 1px);
      background-size: 16px 16px;
      pointer-events: none;
    }

    @keyframes tt-camera {
      0% {
        transform: scale(0.88);
      }
      25% {
        transform: scale(0.95);
      }
      /* Cursor arrives — zoom into the button */
      45%, 55% {
        transform: scale(1.12);
      }
      75% {
        transform: scale(0.92);
      }
      100% {
        transform: scale(0.88);
      }
    }

    .tt-neo-btn {
      padding: 10px 28px;
      border-radius: 12px;
      background: #1e1e22;
      color: #7fbfb0;
      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow:
        5px 5px 10px #111114,
        -5px -5px 10px #2b2b30;
      border: none;
      outline: none;
      position: relative;
      z-index: 1;
      animation: tt-neo-pulse 3s ease-in-out infinite;
    }

    @keyframes tt-neo-pulse {
      0%, 100% { box-shadow: 5px 5px 10px #111114, -5px -5px 10px #2b2b30, 0 0 0px rgba(94, 236, 208, 0); }
      50% { box-shadow: 5px 5px 10px #111114, -5px -5px 10px #2b2b30, 0 0 20px rgba(94, 236, 208, 0.07); }
    }

    /* Tech Tree video — fill container, pan left-to-right */
    .tech-tree-preview video,
    .hover-preview-tech-tree video {
      object-fit: cover !important;
    }
    .hover-preview-tech-tree video {
      width: 180% !important;
      height: 100% !important;
      animation: tt-pan 6s linear infinite alternate;
    }
    @keyframes tt-pan {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-44%); }
    }

    /* Small vs hover video swap */
    .tech-tree-preview .tt-hover-vid {
      display: none;
    }
    .gpt-projects.hscroll-active .tech-tree-preview .tt-small-vid {
      display: none;
    }
    .gpt-projects.hscroll-active .tech-tree-preview .tt-hover-vid {
      display: block;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      animation: tt-hover-pan 30s ease-in-out infinite !important;
      transform: none !important;
    }

    @keyframes tt-hover-pan {
      0%, 0% { object-position: left center; }
      50% { object-position: right center; }
      100% { object-position: left center; }
    }
    .gpt-projects.hscroll-active .tech-tree-preview {
      animation: none !important;
      transform: none !important;
      overflow: hidden !important;
      position: relative !important;
    }

    /* Small card preview — zoomed in then zoom out + pan left to right */
    .tech-tree-preview video.tt-short-loop {
      animation: tt-slow-pan 4s ease-in-out infinite;
    }

    @keyframes tt-slow-pan {
      0%, 10% { object-position: center center; transform: scale(1.3); }
      40%     { object-position: left center; transform: scale(1); }
      100%    { object-position: right center; transform: scale(1); }
    }

    /* Claude Flow - Warm gradient with floating blobs */
    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner {
      background:
        radial-gradient(ellipse at 20% 50%, #D97757 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, #E8956E 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, #F0B89A 0%, transparent 50%),
        radial-gradient(ellipse at 30% 10%, #C75B39 0%, transparent 50%),
        radial-gradient(ellipse at 90% 70%, #D97757 0%, transparent 40%),
        linear-gradient(135deg, #C75B39 0%, #D97757 50%, #F0B89A 100%) !important;
      overflow: hidden !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner::before {
      content: '' !important;
      position: absolute !important;
      inset: -20px !important;
      background:
        radial-gradient(ellipse at 25% 40%, #D97757 0%, transparent 55%),
        radial-gradient(ellipse at 75% 30%, #E8956E 0%, transparent 50%),
        radial-gradient(ellipse at 50% 70%, #C75B39 0%, transparent 55%),
        radial-gradient(ellipse at 10% 80%, #F0B89A 0%, transparent 40%) !important;
      filter: blur(30px) !important;
      z-index: 0 !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .gradient-bg,
    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .gradient-animated,
    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .noise,
    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .blob {
      display: none !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner::after {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      background: #FFFFFF !important;
      opacity: 0 !important;
      pointer-events: none !important;
      z-index: 10 !important;
      animation: cf-white 7s ease-in-out infinite !important;
    }

    @keyframes cf-white {
      0%, 5%   { opacity: 1; }
      10%      { opacity: 0; }
      58%      { opacity: 0; }
      70%, 85% { opacity: 1; }
      95%, 100% { opacity: 0; }
    }

    @keyframes blob-float {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-10px) scale(1.05); }
    }

    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .banner-content {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      white-space: nowrap !important;
      z-index: 5 !important;
      opacity: 1 !important;
      padding: 0 16px !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .cf-logo-wrap {
      position: relative !important;
      flex-shrink: 0 !important;
      animation: cf-wrap 7s ease-in-out infinite;
      width: 56px;
      height: 56px;
    }

    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .cf-logo-wrap .claude-logo {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .cf-anthropic {
      filter: brightness(0) invert(1) !important;
      animation: cf-anthro 7s ease-in-out infinite;
    }

    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .cf-claude {
      filter: brightness(0) invert(1) !important;
      opacity: 0;
      animation: cf-claude 7s ease-in-out infinite;
    }

    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .claude-wordmark {
      display: none !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .x-mark {
      font-size: 24px !important;
      color: rgba(255,255,255,0.6) !important;
      font-weight: 300 !important;
      letter-spacing: 0 !important;
      opacity: 0;
      animation: cf-xflow 7s ease-in-out infinite;
    }

    .desktop-app.chatgpt-style .card-preview-container .claude-flow-banner .flow-text {
      font-size: 28px !important;
      color: #FFFFFF !important;
      font-family: 'DM Sans', 'Inter', 'Helvetica Neue', sans-serif !important;
      font-style: normal !important;
      font-weight: 500 !important;
      letter-spacing: -0.5px !important;
      opacity: 0;
      animation: cf-xflow 7s ease-in-out infinite;
    }

    /*
      Timeline (7s):
      0-10%   : Anthropic logo big centered
      10-22%  : shrinks, slides left, × Flow fades in
      22-58%  : hold Anthropic × Flow (long hold)
      58-70%  : everything fades out
      70-85%  : white hold
      85-100% : fade back in, restart
    */

    @keyframes cf-wrap {
      0%, 10%  { width: 80px; height: 80px; margin-right: -80px; }
      22%, 58% { width: 32px; height: 32px; margin-right: 0px; }
      70%, 100% { width: 80px; height: 80px; margin-right: -80px; }
    }

    @keyframes cf-xflow {
      0%, 10%  { opacity: 0; }
      22%, 58% { opacity: 1; }
      68%, 100% { opacity: 0; }
    }

    @keyframes cf-anthro {
      0%, 100% { opacity: 1; }
    }

    @keyframes cf-claude {
      0%, 100% { opacity: 0; }
    }

    /* FinQuantum - Clean AI startup */
    .desktop-app.chatgpt-style .card-preview-container .finquantum-banner {
      background: linear-gradient(145deg, #1E293B 0%, #2C4A66 60%, #36597D 100%) !important;
      overflow: hidden !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .finquantum-banner::before {
      display: none !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .finquantum-banner .banner-content {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 3px !important;
      z-index: 2 !important;
      white-space: nowrap !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .finquantum-banner .logo-text {
      font-size: 16px !important;
      color: #F3F6FA !important;
      font-weight: 600 !important;
      letter-spacing: 0.06em !important;
      font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif !important;
      text-shadow: none !important;
      text-transform: none !important;
      opacity: 0;
      animation: fq-fade 8s ease-in-out infinite;
    }

    @keyframes fq-fade {
      0% { opacity: 0; }
      15%, 75% { opacity: 1; }
      95%, 100% { opacity: 0; }
    }

    .desktop-app.chatgpt-style .card-preview-container .finquantum-banner .tagline {
      font-size: 7px !important;
      color: rgba(255, 255, 255, 0.5) !important;
      letter-spacing: 0.15em !important;
      text-transform: uppercase !important;
      font-weight: 500 !important;
      font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif !important;
      opacity: 0;
      animation: fq-tagline 8s ease infinite;
    }

    @keyframes fq-tagline {
      0%, 20% { opacity: 0; }
      30%, 75% { opacity: 1; }
      90%, 100% { opacity: 0; }
    }

    /* WorryJar - Background image matching large preview */
    .desktop-app.chatgpt-style .card-preview-container .p4-preview {
      background: transparent !important;
      overflow: hidden !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .p4-preview::before {
      content: '' !important;
      position: absolute !important;
      inset: -10px !important;
      background: url('AdobeStock_1236165127.jpeg') center center / cover no-repeat !important;
      filter: blur(6px) brightness(1.15) contrast(0.9) !important;
      z-index: 0 !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .p4-preview .iphone-mockup {
      transform-origin: center center !important;
      transform: scale(0.32) !important;
      animation: none !important;
      position: relative !important;
      z-index: 1 !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .p4-preview .iphone-screen video {
      object-fit: cover !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .p4-preview .wj-title-overlay {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      z-index: 3 !important;
      opacity: 0;
      animation: wj-title 10s ease-in-out infinite;
      white-space: nowrap !important;
    }

    .desktop-app.chatgpt-style .card-preview-container .p4-preview .wj-type {
      font-family: 'Outfit', 'Inter', -apple-system, sans-serif !important;
      font-size: 32px !important;
      font-weight: 700 !important;
      color: #fff !important;
      letter-spacing: -0.5px !important;
      text-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
      white-space: nowrap !important;
    }

    /*
      Timeline (10s):
      0-45%   : phone visible
      45-55%  : phone fades out
      55-60%  : "Worry Jar" types in
      60-80%  : hold text
      80-90%  : text fades out
      90-100% : phone fades back in
    */

    @keyframes wj-phone {
      0%, 40%  { opacity: 1; transform: scale(0.32); }
      50%, 85% { opacity: 0; transform: scale(0.28); }
      95%, 100% { opacity: 1; transform: scale(0.32); }
    }

    @keyframes wj-title {
      0%, 48%  { opacity: 0; }
      55%, 82% { opacity: 1; }
      90%, 100% { opacity: 0; }
    }

    /* Reels AI — animated logo preview */
    .desktop-app.chatgpt-style .card-preview-container .reels-ai-preview {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      overflow: hidden !important;
      position: relative !important;
      padding: 16px 8px !important;
      background: transparent !important;
    }
    .reels-ai-preview::before {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      background: url('reels-bg.jpeg') center/cover no-repeat !important;
      filter: blur(6px) brightness(1.15) !important;
      transform: scale(1.1) !important;
      z-index: 0 !important;
    }
    .reels-ai-preview::after { display: none !important; }
    .reels-ai-preview > * { position: relative; z-index: 1; }

    .reels-phone-slot {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
    }

    /* Phase fade system */
    .reels-phase {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease;
      z-index: 1;
    }
    .reels-phase.reels-phase-active {
      opacity: 1;
      z-index: 2;
    }
    .reels-phase-logo {
      background: #fff !important;
    }
    .reels-ig-logo {
      width: 72px;
      height: 72px;
    }

    /* Hide extra phones and phases in small card view */
    .reels-phone-slot.reels-extra {
      display: none;
    }

    /* Expanded hover: hide phases, show all phones inline */
    .gpt-projects.hscroll-active .reels-phase {
      display: none !important;
    }
    .gpt-projects.hscroll-active .reels-phone-slot.reels-extra {
      display: block;
    }
    /* Show the phones from phase-phones as regular slots in expanded */
    .gpt-projects.hscroll-active .reels-phones-preview {
      position: relative;
    }
    .gpt-projects.hscroll-active .reels-phase-phones {
      display: flex !important;
      position: relative !important;
      opacity: 1 !important;
    }
    .gpt-projects.hscroll-active .reels-phase-logo {
      display: none !important;
    }
    .reels-phone-frame {
      width: 56px;
      height: 114px;
      border-radius: 12px;
      overflow: hidden;
      background: #1a1a1a;
      border: 2px solid #333;
    }
    /* Big phones in small card — overflow the container */
    .reels-phase-phones .reels-phone-frame {
      width: 105px !important;
      height: 215px !important;
      border-radius: 18px !important;
    }
    .reels-phase-phones {
      gap: 12px !important;
      align-items: flex-end !important;
    }
    .reels-phase-phones .reels-phone-slot:first-child {
      transform: translateY(-90px) rotate(180deg);
    }
    /* Reset offset in expanded hover */
    .gpt-projects.hscroll-active .reels-phase-phones .reels-phone-slot:first-child {
      transform: none !important;
    }
    .reels-phone-frame video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Footer below card preview */
    .card-preview-footer {
      display: none !important;
    }

    .card-preview-number {
      display: none !important;
    }

    .card-preview-title {
      font-size: 11px !important;
      font-weight: 500 !important;
      color: var(--clay-text-secondary) !important;
      font-family: 'Inter', -apple-system, sans-serif !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      text-shadow: none !important;
      flex: 1 !important;
    }

    .card-preview-desc {
      display: none !important;
    }

    .card-preview-arrow {
      font-size: 12px !important;
      color: var(--clay-text-muted) !important;
      font-family: 'Inter', -apple-system, sans-serif !important;
      transition: transform 0.2s ease, color 0.2s ease !important;
    }

    .desktop-app.chatgpt-style .project-preview-card:hover .card-preview-arrow {
      transform: translateX(3px);
    }

    /* Hide footer on hover since overlay takes over */
    .desktop-app.chatgpt-style .card-preview-footer {
      transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .desktop-app.chatgpt-style .project-preview-card:hover .card-preview-footer {
      opacity: 0;
      transform: translateY(4px);
      transition-delay: 0.5s;
    }

    .desktop-app.chatgpt-style .project-preview-card:not(:hover) .card-preview-footer {
      transition-delay: 0s;
    }

    /* ========================================
       GPT PROJECTS - FULLSCREEN HOVER MODE
       Clean white ChatGPT-style gallery
       ======================================== */

    /* Container setup */
    .desktop-app.chatgpt-style .gpt-projects {
      position: relative;
      overflow: visible;
      transition: none;
    }

    /* Hide mode toggle in fullscreen gallery */
    body:has(.gpt-projects.hscroll-active) .mode-toggle {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 0.2s ease !important;
    }

    /* Hide UI chrome during fullscreen gallery so they don't overlap */
    body:has(.gpt-projects.hscroll-active) .gpt-top-right,
    body:has(.gpt-projects.hscroll-active) .gpt-left-icons,
    body:has(.gpt-projects.hscroll-active) .gpt-model-selector-wrap,
    body:has(.gpt-projects.hscroll-active) .gpt-projects-header,
    body:has(.gpt-projects.hscroll-active) .gpt-response-actions {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: none !important;
    }

    /* Fullscreen overlay */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      max-width: none !important;
      z-index: 9999 !important;
      background: #d4d4d4 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* Gallery header is hidden via :has() rule above */

    /* Gallery "Projects" label - top center */
    .gpt-gallery-label {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      font-family: var(--gpt-font, 'Manrope', sans-serif);
      font-size: 13px;
      font-weight: 500;
      color: var(--clay-text-secondary, #475569);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      pointer-events: none;
    }

    /* Gradient fade indicators - subtle for white bg */
    .desktop-app.chatgpt-style .gpt-projects-fade {
      position: absolute;
      top: 64px;
      bottom: 60px;
      width: 120px;
      z-index: 20;
      pointer-events: none;
      opacity: 0;
      transition: none;
    }

    .desktop-app.chatgpt-style .gpt-projects-fade-left {
      left: 0;
      background: linear-gradient(90deg,
        #E5E5E5 0%,
        rgba(247, 249, 252, 0) 100%);
    }

    .desktop-app.chatgpt-style .gpt-projects-fade-right {
      right: 0;
      background: linear-gradient(270deg,
        #E5E5E5 0%,
        rgba(247, 249, 252, 0) 100%);
    }

    /* Side fades hidden for clean flat surface */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .gpt-projects-fade {
      display: none !important;
    }

    /* Cards row - full-screen horizontal scroll */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .gpt-cards-row.project-preview-cards {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 48px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding: 0 calc((100vw - 70vw) / 2) !important;
      width: 100vw !important;
      height: 100vh !important;
      align-items: center !important;
      scrollbar-width: none;
      -ms-overflow-style: none;
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      box-sizing: border-box !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .gpt-cards-row.project-preview-cards::-webkit-scrollbar {
      display: none;
    }

    /* Cards — centered gallery layout */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .project-preview-card {
      flex: 0 0 70vw !important;
      height: 80vh !important;
      max-height: none !important;
      min-height: 0 !important;
      scroll-snap-align: center;
      scroll-snap-stop: always;
      border-radius: 16px !important;
      border: 1px solid rgba(0,0,0,0.08) !important;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 8px 40px rgba(0,0,0,0.04) !important;
      transition: none !important;
      background: #fff !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      position: relative !important;
      gap: 0 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .project-preview-card:hover {
      transform: none !important;
    }

    /* Override .gpt-card base styles in fullscreen gallery */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .gpt-card {
      background: transparent !important;
      border: none !important;
      border-radius: 16px !important;
      box-shadow: none !important;
      padding: 0 !important;
    }

    /* Preview container — fills entire card */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-container {
      flex: 1 !important;
      min-height: 0 !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      background: #fff !important;
      position: relative !important;
      box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05) !important;
      border: none !important;
    }

    /* Preview content fills the photo */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-container .stacking-window-preview {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      transform: none !important;
    }

    /* ========== TECH TREE - CLEAN DESIGN SYSTEM ========== */
    /*
     * Design Tokens (8px grid):
     * Spacing: 8, 16, 24, 32, 40, 48px
     * Border radius: 4, 8, 12px
     * Typography: 10, 12, 14, 16, 20, 24px
     * Colors:
     *   - Primary: #5eecd0
     *   - Surface: rgba(15, 20, 30, 0.9)
     *   - Text: #fff, rgba(255,255,255,0.6), rgba(255,255,255,0.4)
     */

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-container {
      width: 100% !important;
      height: 100% !important;
      background: #0a0e14 !important;
      display: flex !important;
      flex-direction: column !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      overflow: hidden !important;
      animation: tt-zoom-tour 24s ease-in-out infinite !important;
      transform-origin: center center !important;
      box-sizing: border-box !important;
    }

    @keyframes tt-zoom-tour {
      0%, 8% { transform: scale(1); }
      20%, 30% { transform: scale(1.5) translate(-20%, 0); }
      42%, 52% { transform: scale(1.5) translate(0, 0); }
      64%, 74% { transform: scale(1.5) translate(20%, 0); }
      86%, 100% { transform: scale(1); }
    }

    /* Header */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-header {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 12px 24px !important;
      background: rgba(15, 20, 30, 0.95) !important;
      border-bottom: 1px solid rgba(94, 236, 208, 0.1) !important;
      flex-shrink: 0 !important;
      height: 48px !important;
      box-sizing: border-box !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-logo {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-logo-mark {
      width: 24px !important;
      height: 24px !important;
      background: linear-gradient(135deg, #5eecd0 0%, #3db8a0 100%) !important;
      border-radius: 6px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-logo-text {
      color: #fff !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      letter-spacing: -0.01em !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-nav {
      display: flex !important;
      gap: 24px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-nav-item {
      color: rgba(255, 255, 255, 0.5) !important;
      text-decoration: none !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      padding: 4px 0 !important;
      border-bottom: 2px solid transparent !important;
      transition: all 0.2s ease !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-nav-item.active {
      color: #fff !important;
      border-bottom-color: #5eecd0 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-user {
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-xp {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      background: rgba(94, 236, 208, 0.1) !important;
      padding: 6px 12px !important;
      border-radius: 16px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-xp-icon {
      color: #5eecd0 !important;
      font-size: 12px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-xp-text {
      color: #5eecd0 !important;
      font-size: 12px !important;
      font-weight: 600 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-avatar {
      width: 32px !important;
      height: 32px !important;
      border-radius: 50% !important;
      background: linear-gradient(135deg, #5eecd0, #3db8a0) !important;
    }

    /* Main Layout */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-main {
      display: grid !important;
      grid-template-columns: 200px 1fr 200px !important;
      flex: 1 !important;
      gap: 12px !important;
      padding: 12px !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }

    /* Cards */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-card {
      background: rgba(20, 25, 35, 0.9) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      border-radius: 12px !important;
      padding: 14px !important;
      margin-bottom: 12px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-card:last-child {
      margin-bottom: 0 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-card-header {
      color: rgba(255, 255, 255, 0.4) !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.08em !important;
      margin-bottom: 10px !important;
      white-space: nowrap !important;
    }

    /* Sidebar */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-sidebar {
      display: flex !important;
      flex-direction: column !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      min-height: 0 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-path-info {
      display: flex !important;
      gap: 12px !important;
      align-items: flex-start !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-path-icon {
      font-size: 24px !important;
      line-height: 1 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-path-details {
      flex: 1 !important;
      min-width: 0 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-path-name {
      color: #fff !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      margin-bottom: 8px !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-path-progress {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-progress-bar {
      flex: 1 !important;
      height: 4px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      border-radius: 2px !important;
      overflow: hidden !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-progress-fill {
      height: 100% !important;
      background: linear-gradient(90deg, #5eecd0, #3db8a0) !important;
      border-radius: 2px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-progress-text {
      color: rgba(255, 255, 255, 0.6) !important;
      font-size: 10px !important;
      font-weight: 500 !important;
    }

    /* Stats */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-stats {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 4px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-stat {
      text-align: center !important;
      overflow: hidden !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-stat-value {
      display: block !important;
      color: #fff !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      margin-bottom: 2px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-stat-label {
      display: block !important;
      color: rgba(255, 255, 255, 0.4) !important;
      font-size: 8px !important;
      white-space: nowrap !important;
    }

    /* Tree Section */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-tree {
      background: rgba(20, 25, 35, 0.9) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      border-radius: 12px !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      min-height: 0 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-tree-header {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 12px 16px !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-tree-title {
      color: #fff !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      margin: 0 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-tree-actions {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-btn-icon {
      width: 24px !important;
      height: 24px !important;
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 4px !important;
      color: rgba(255, 255, 255, 0.6) !important;
      font-size: 14px !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-zoom {
      color: rgba(255, 255, 255, 0.5) !important;
      font-size: 11px !important;
      min-width: 40px !important;
      text-align: center !important;
    }

    /* Tree Canvas */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-tree-canvas {
      flex: 1 !important;
      position: relative !important;
      padding: 24px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-lines {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-line {
      stroke: rgba(94, 236, 208, 0.2) !important;
      stroke-width: 2 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-line.active {
      stroke: #5eecd0 !important;
      stroke-width: 2 !important;
      filter: drop-shadow(0 0 4px rgba(94, 236, 208, 0.4)) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-line.locked {
      stroke: rgba(255, 255, 255, 0.1) !important;
      stroke-dasharray: 4 4 !important;
    }

    /* Nodes */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-node {
      position: absolute !important;
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-node-emoji {
      font-size: 18px !important;
      position: relative !important;
      z-index: 2 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-node-complete {
      background: rgba(94, 236, 208, 0.15) !important;
      border: 2px solid rgba(94, 236, 208, 0.4) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-node-active {
      background: linear-gradient(135deg, #5eecd0, #3db8a0) !important;
      box-shadow: 0 0 24px rgba(94, 236, 208, 0.4) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-node-ring {
      position: absolute !important;
      inset: -6px !important;
      border: 2px solid rgba(94, 236, 208, 0.3) !important;
      border-radius: 50% !important;
      animation: tt-ring-pulse 2s ease-out infinite !important;
    }

    @keyframes tt-ring-pulse {
      0% { transform: scale(1); opacity: 0.6; }
      100% { transform: scale(1.4); opacity: 0; }
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-node-next {
      background: rgba(100, 140, 200, 0.15) !important;
      border: 2px solid rgba(100, 140, 200, 0.5) !important;
      box-shadow: 0 0 16px rgba(100, 140, 200, 0.3) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-node-label {
      position: absolute !important;
      bottom: -20px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      color: rgba(100, 140, 200, 0.9) !important;
      font-size: 9px !important;
      font-weight: 600 !important;
      letter-spacing: 0.05em !important;
      white-space: nowrap !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-node-locked {
      background: rgba(60, 65, 80, 0.4) !important;
      border: 2px dashed rgba(255, 255, 255, 0.15) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-node-locked .tt-node-emoji {
      opacity: 0.3 !important;
    }

    /* Right Panel */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-panel {
      display: flex !important;
      flex-direction: column !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      min-height: 0 !important;
    }

    /* Quest */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-quest {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-quest-title {
      color: #fff !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-quest-desc {
      color: rgba(255, 255, 255, 0.4) !important;
      font-size: 10px !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      line-height: 1.4 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-quest-bar {
      height: 4px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      border-radius: 2px !important;
      overflow: hidden !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-quest-fill {
      height: 100% !important;
      background: linear-gradient(90deg, #5eecd0, #3db8a0) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-quest-footer {
      display: flex !important;
      justify-content: space-between !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-quest-progress {
      color: rgba(255, 255, 255, 0.5) !important;
      font-size: 10px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-quest-reward {
      color: #ffb86c !important;
      font-size: 10px !important;
      font-weight: 600 !important;
    }

    /* Activity */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-activity {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-activity-item {
      display: flex !important;
      align-items: flex-start !important;
      gap: 8px !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-activity-dot {
      width: 6px !important;
      height: 6px !important;
      background: #5eecd0 !important;
      border-radius: 50% !important;
      margin-top: 4px !important;
      flex-shrink: 0 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .tech-tree-preview .tt-activity-text {
      color: rgba(255, 255, 255, 0.5) !important;
      font-size: 10px !important;
      line-height: 1.4 !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      min-width: 0 !important;
    }

    /* ========== CLAUDE × FLOW - Fullscreen Gallery ========== */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .claude-flow-banner .banner-content {
      transform: translate(-50%, -50%) scale(4) !important;
    }

    /* ========== FINQUANTUM - Fullscreen Gallery ========== */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .finquantum-banner .banner-content {
      transform: translate(-50%, -50%) scale(4) !important;
    }

    /* ========== WORRYJAR - Fullscreen Gallery ========== */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .p4-preview {
      background: transparent !important;
      position: relative !important;
      overflow: hidden !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .p4-preview::before {
      content: '' !important;
      position: absolute !important;
      inset: -20px !important;
      background: url('AdobeStock_1236165127.jpeg') center center / cover no-repeat !important;
      filter: blur(6px) brightness(1.15) contrast(0.9) !important;
      z-index: 0 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .p4-preview .iphone-mockup {
      transform: scale(0.80) !important;
      transform-origin: center center !important;
      position: relative !important;
      z-index: 1 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .p4-preview .iphone-outer {
      box-shadow: 0 50px 100px rgba(0, 0, 0, 0.25) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .p4-preview .iphone-screen video {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    /* ========== REELS AI - Fullscreen Gallery ========== */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .reels-phones-preview {
      gap: 20px !important;
      padding: 32px 16px !important;
    }
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .reels-phone-frame {
      width: 200px !important;
      height: 410px !important;
      border-radius: 28px !important;
    }

    /* Footer — text caption below the preview */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-footer {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 4px !important;
      padding: 80px 32px 28px !important;
      margin-top: 0 !important;
      background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 40%, transparent 100%) !important;
      border-radius: 0 0 16px 16px !important;
      border: none !important;
      box-shadow: none !important;
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      opacity: 0 !important;
      visibility: visible !important;
      z-index: 10 !important;
      white-space: normal !important;
      overflow: visible !important;
      max-width: none !important;
      text-align: center !important;
      flex-shrink: 0 !important;
      transition: opacity 0.3s ease !important;
      pointer-events: none !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .project-preview-card:hover .card-preview-footer {
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-title {
      font-size: 24px !important;
      font-weight: 600 !important;
      color: #fff !important;
      font-family: var(--gpt-font) !important;
      text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
      margin: 0 !important;
      line-height: 1.3 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-desc {
      display: block !important;
      font-size: 14px !important;
      font-weight: 400 !important;
      color: rgba(255, 255, 255, 0.7) !important;
      font-family: var(--gpt-font) !important;
      margin: 0 !important;
      white-space: normal !important;
      overflow: visible !important;
      line-height: 1.5 !important;
    }

    /* Meta row — tag + year inline */
    .card-preview-meta {
      display: none;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-meta {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      margin-top: 2px !important;
    }

    /* Tag (Shipped / Concept) */
    .card-preview-tag {
      display: none;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-tag {
      display: inline-block !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase !important;
      padding: 3px 10px !important;
      border-radius: 999px !important;
      font-family: var(--gpt-font) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-tag {
      display: none !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-tag.shipped {
      display: none !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-tag.concept {
      display: none !important;
    }

    /* Year */
    .card-preview-year {
      display: none;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-meta {
      display: flex !important;
      align-items: center !important;
      gap: 0 !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-year {
      display: inline-block !important;
      font-size: 14px !important;
      font-weight: 400 !important;
      color: rgba(255, 255, 255, 0.55) !important;
      font-family: var(--gpt-font) !important;
    }

    /* CTA button — pearl style */
    .card-preview-cta {
      display: none;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-cta {
      display: none !important;
      align-items: center !important;
      margin-top: 8px !important;
      padding: 8px 18px !important;
      background-color: #080808 !important;
      color: rgba(255, 255, 255, 0.7) !important;
      font-family: var(--gpt-font) !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      border-radius: 100px !important;
      border: none !important;
      cursor: pointer !important;
      overflow: hidden !important;
      position: relative !important;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 1rem 1rem rgba(0, 0, 0, 0.2),
        0 0.4rem 0.4rem -0.2rem rgba(0, 0, 0, 0.6) !important;
      transition: transform 0.15s ease, box-shadow 0.2s ease !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-cta::before,
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-cta::after {
      content: "" !important;
      position: absolute !important;
      transition: all 0.3s ease !important;
      pointer-events: none !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-cta::before {
      left: -15% !important;
      right: -15% !important;
      bottom: 25% !important;
      top: -100% !important;
      border-radius: 50% !important;
      background-color: rgba(255, 255, 255, 0.12) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-cta::after {
      left: 6% !important;
      right: 6% !important;
      top: 12% !important;
      bottom: 40% !important;
      border-radius: 22px 22px 0 0 !important;
      box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8) !important;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-cta:hover {
      transform: translateY(-2px) !important;
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 1.5rem 1.5rem rgba(0, 0, 0, 0.25),
        0 0.6rem 0.6rem -0.3rem rgba(0, 0, 0, 0.7) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-cta:hover::before {
      transform: translateY(-5%) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-cta:hover::after {
      opacity: 0.4 !important;
      transform: translateY(5%) !important;
    }

    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .card-preview-arrow {
      display: none !important;
    }

    /* Videos fill entire viewport in fullscreen */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .stacking-window-preview video {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    /* Hide hover scroll preview in fullscreen mode */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active .hover-scroll-preview {
      display: none !important;
    }

    /* Bottom hint bar */
    .desktop-app.chatgpt-style .gpt-projects.hscroll-active::after {
      display: none !important;
    }

    /* Gallery dot indicators */
    .gallery-dots {
      display: none;
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 50;
      gap: 6px;
      align-items: center;
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 999px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    .gpt-projects.hscroll-active .gallery-dots {
      display: flex !important;
    }

    .gallery-dot {
      position: relative;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: none;
      background-color: #080808;
      cursor: pointer;
      padding: 0;
      transition: all 0.3s ease;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.4);
    }

    .gallery-dot.active {
      width: 24px;
      border-radius: 100px;
      background-color: #080808;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.5);
    }

    .gallery-dot-label {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 12px;
      font-weight: 500;
      color: var(--clay-text, #2A2A2A);
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(8px);
      padding: 4px 10px;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .gallery-dot:hover .gallery-dot-label {
      opacity: 1;
    }

    /* ChatGPT-style response action icons (under project cards) */
    .gpt-response-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 0 0 0;
      margin-top: 4px;
    }

    .gpt-action-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: #9b9b9b;
      cursor: pointer;
      padding: 0;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .gpt-action-icon:hover {
      background: rgba(0, 0, 0, 0.06);
      color: #4a4a4a;
    }

    .gpt-action-icon svg {
      width: 16px;
      height: 16px;
    }

    /* Responsive: 2 columns on tablets */
    @media (max-width: 900px) {
      .desktop-app.chatgpt-style .project-preview-cards {
        grid-template-columns: repeat(2, 1fr);
      }

      .desktop-app.chatgpt-style .card-preview-container .stacking-window-preview {
        transform: translate(-50%, -50%) scale(0.2);
      }
    }

    /* Responsive: 1 column on mobile */
    @media (max-width: 600px) {
      .desktop-app.chatgpt-style .project-preview-cards {
        grid-template-columns: 1fr;
      }

      .desktop-app.chatgpt-style .project-preview-card {
        min-height: 200px;
      }

      .desktop-app.chatgpt-style .card-preview-container {
        height: 150px;
      }

      .desktop-app.chatgpt-style .card-preview-container .stacking-window-preview {
        transform: translate(-50%, -50%) scale(0.3);
      }
    }

    /* Hide old elements */
    .desktop-app.chatgpt-style .desktop-sidebar,
    .desktop-app.chatgpt-style .desktop-main,
    .desktop-app.chatgpt-style .desktop-header,
    .desktop-app.chatgpt-style .desktop-messages,
    .desktop-app.chatgpt-style .desktop-input-bar,
    .desktop-app.chatgpt-style .scroll-hint,
    .desktop-app.chatgpt-style .chatgpt-home,
    .desktop-app.chatgpt-style .bubble,
    .desktop-app.chatgpt-style .chatgpt-message {
      display: none;
    }

    /* Hide ALL overlays for chatgpt-style */
    body:has(.desktop-app.chatgpt-style) .name-card-window,
    body:has(.desktop-app.chatgpt-style) .boot-screen,
    body:has(.desktop-app.chatgpt-style) .phone,
    body:has(.desktop-app.chatgpt-style) .floating-window,
    body:has(.desktop-app.chatgpt-style) .floating-blobs,
    body:has(.desktop-app.chatgpt-style) .bg-blobs,
    body:has(.desktop-app.chatgpt-style) .grain,
    body:has(.desktop-app.chatgpt-style) .side-nav,
    .desktop-app.chatgpt-style ~ .name-card-window,
    .desktop-app.chatgpt-style ~ .boot-screen {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* ========== UNIFIED CHAT THREAD ========== */

    /* --- Chat Message Row --- */
    .gpt-chat-msg {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      animation: gptMsgFadeIn 0.3s ease;
    }

    /* User message: right-aligned dark pill */
    .gpt-chat-msg.user {
      justify-content: flex-end;
    }

    .gpt-chat-msg.user .gpt-msg-bubble {
      background-color: #080808;
      color: rgba(255, 255, 255, 0.7);
      padding: 10px 20px;
      border-radius: 100px;
      max-width: 70%;
      font-size: 15px;
      line-height: 1.6;
      font-family: var(--gpt-font);
      border: none;
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 1.5rem 1.5rem rgba(0, 0, 0, 0.3),
        0 0.5rem 0.5rem -0.3rem rgba(0, 0, 0, 0.8);
      transition: all 0.2s ease;
    }

    .gpt-chat-msg.user .gpt-msg-bubble::before,
    .gpt-chat-msg.user .gpt-msg-bubble::after {
      content: "";
      position: absolute;
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .gpt-chat-msg.user .gpt-msg-bubble::before {
      left: -15%;
      right: -15%;
      bottom: 25%;
      top: -100%;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.12);
    }

    .gpt-chat-msg.user .gpt-msg-bubble::after {
      left: 6%;
      right: 6%;
      top: 12%;
      bottom: 40%;
      border-radius: 22px 22px 0 0;
      box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    }

    /* Assistant message: left-aligned, plain text + avatar */
    .gpt-chat-msg.assistant {
      justify-content: flex-start;
    }

    .gpt-chat-msg.assistant .gpt-msg-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background-color: #080808;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      box-shadow:
        inset 0 0.15rem 0.4rem rgba(255, 255, 255, 0.3),
        inset 0 -0.05rem 0.15rem rgba(0, 0, 0, 0.7),
        inset 0 -0.2rem 0.4rem rgba(255, 255, 255, 0.5),
        0 0.5rem 0.8rem rgba(0, 0, 0, 0.3);
    }

    .gpt-chat-msg.assistant .gpt-msg-avatar svg {
      width: 14px;
      height: 14px;
      color: rgba(255, 255, 255, 0.7);
    }

    .gpt-chat-msg.assistant .gpt-msg-text {
      color: var(--clay-text);
      font-size: 15px;
      line-height: 1.6;
      font-family: var(--gpt-font);
      max-width: 70%;
      white-space: pre-wrap;
    }



    /* Typing indicator for main chat */
    .gpt-chat-typing {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      animation: gptMsgFadeIn 0.3s ease;
    }

    .gpt-chat-typing .gpt-typing-dots {
      display: flex;
      gap: 5px;
      padding: 10px 0;
    }

    .gpt-chat-typing .gpt-typing-dots span {
      width: 6px;
      height: 6px;
      background: var(--clay-icon);
      border-radius: 50%;
      animation: llmTyping 1.4s infinite;
    }

    .gpt-chat-typing .gpt-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .gpt-chat-typing .gpt-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

    @keyframes gptMsgFadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Back to Home Button */
    .gpt-back-home-btn {
      position: absolute;
      top: 16px;
      left: 20px;
      width: 36px;
      height: 36px;
      background-color: #080808;
      border: 0;
      border-radius: 50%;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 5;
      box-shadow:
        inset 0 0.2rem 0.6rem rgba(255, 255, 255, 0.3),
        inset 0 -0.05rem 0.2rem rgba(0, 0, 0, 0.7),
        inset 0 -0.25rem 0.6rem rgba(255, 255, 255, 0.5),
        0 1.5rem 1.5rem rgba(0, 0, 0, 0.3);
      transition: all 0.2s ease;
    }

    .gpt-back-home-btn:hover {
      color: rgba(255, 255, 255, 1);
    }

    /* Send button in input bar */
    .desktop-app.chatgpt-style .gpt-send-btn {
      width: 36px;
      height: 36px;
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: color 0.2s ease;
      position: relative;
      z-index: 2;
    }

    .desktop-app.chatgpt-style .gpt-send-btn:hover {
      color: rgba(255, 255, 255, 0.9);
    }

    /* Responsive Breakpoints */

    /* Large tablets and small desktops */
    @media (max-width: 1024px) {
      .desktop-app.chatgpt-style .gpt-sidebar {
        width: 60px;
      }

      .desktop-app.chatgpt-style .gpt-greeting {
        font-size: 24px;
        white-space: normal;
        max-width: 500px;
      }

      .desktop-app.chatgpt-style .gpt-cards-row {
        grid-template-columns: repeat(2, 1fr);
        max-width: 500px;
      }

      .desktop-app.chatgpt-style .gpt-input-bar {
        max-width: 500px;
      }
    }

    /* Tablets */
    @media (max-width: 768px) {
      .desktop-app.chatgpt-style .gpt-center {
        padding: 24px 16px 200px;
      }

      .desktop-app.chatgpt-style .gpt-greeting {
        font-size: 22px;
        white-space: normal;
        max-width: 400px;
        line-height: 1.3;
      }

      .desktop-app.chatgpt-style .gpt-cards-row {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
        gap: 8px;
      }

      .desktop-app.chatgpt-style .gpt-card {
        padding: 12px;
        min-height: 80px;
      }

      .desktop-app.chatgpt-style .gpt-input-bar {
        max-width: 400px;
      }

      .desktop-app.chatgpt-style .gpt-projects {
        max-width: 100%;
      }

      .gpt-chat-msg.user .gpt-msg-bubble,
      .gpt-chat-msg.assistant .gpt-msg-text {
        max-width: 80%;
        font-size: 14px;
      }
    }

    /* Mobile */
    @media (max-width: 480px) {
      .desktop-app.chatgpt-style .gpt-sidebar {
        display: none;
      }

      .desktop-app.chatgpt-style .gpt-center {
        padding: 60px 16px 200px;
        justify-content: flex-start;
      }

      .desktop-app.chatgpt-style .gpt-greeting {
        font-size: 20px;
        white-space: normal;
        max-width: 100%;
        text-align: center;
      }

      .desktop-app.chatgpt-style .gpt-cards-row {
        grid-template-columns: 1fr;
        max-width: 100%;
        gap: 8px;
      }

      .desktop-app.chatgpt-style .gpt-card {
        flex-direction: row;
        align-items: center;
        min-height: auto;
        padding: 14px 16px;
      }

      .desktop-app.chatgpt-style .gpt-card-icon {
        font-size: 18px;
      }

      .desktop-app.chatgpt-style .gpt-input-container {
        width: calc(100% - 32px);
        left: 50%;
        transform: translateX(-50%);
        bottom: 16px;
      }

      .desktop-app.chatgpt-style .gpt-input-bar {
        max-width: 100%;
      }

      .desktop-app.chatgpt-style .gpt-projects-header {
        padding: 0 4px;
      }

      .desktop-app.chatgpt-style .gpt-top-right {
        top: 12px;
        right: 12px;
      }

      .gpt-chat-msg.user .gpt-msg-bubble,
      .gpt-chat-msg.assistant .gpt-msg-text {
        max-width: 90%;
        font-size: 14px;
      }

      .gpt-back-home-btn {
        top: 12px;
        left: 12px;
        width: 32px;
        height: 32px;
      }

      /* Show mobile nav on small screens */
      .desktop-app.chatgpt-style .gpt-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e5e5e5;
        padding: 8px 0;
        justify-content: space-around;
        z-index: 100;
      }

      .desktop-app.chatgpt-style .gpt-mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        background: none;
        border: none;
        color: #0d0d0d;
        text-decoration: none;
        font-size: 11px;
        font-family: var(--gpt-font);
        cursor: pointer;
        transition: color 0.15s ease;
      }

      .desktop-app.chatgpt-style .gpt-mobile-nav-item:hover,
      .desktop-app.chatgpt-style .gpt-mobile-nav-item:active {
        color: #0d0d0d;
      }

      .desktop-app.chatgpt-style .gpt-mobile-nav-item svg {
        width: 22px;
        height: 22px;
      }
    }

    /* Hide mobile nav and header by default */
    .desktop-app.chatgpt-style .gpt-mobile-nav,
    .desktop-app.chatgpt-style .gpt-mobile-header {
      display: none;
    }

    /* Mobile header styles (shown only on small screens) */
    @media (max-width: 480px) {
      .desktop-app.chatgpt-style .gpt-mobile-header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        background: var(--clay-surface);
        border-bottom: none;
        box-shadow: 0 4px 16px var(--clay-shadow-color);
        align-items: center;
        justify-content: center;
        gap: 8px;
        z-index: 100;
      }

      .desktop-app.chatgpt-style .gpt-mobile-logo {
        width: 20px;
        height: 20px;
        color: var(--clay-text);
      }

      .desktop-app.chatgpt-style .gpt-mobile-brand {
        font-size: 16px;
        font-weight: 500;
        color: var(--clay-text);
        font-family: var(--gpt-font);
      }

      .desktop-app.chatgpt-style .gpt-top-right {
        top: 10px;
        right: 12px;
        z-index: 101;
      }
    }

    /* ============================================
       STACKING WINDOW CARDS - Simple White Screen
       ============================================ */

    /* Override stacking window cards - full white screen, no window chrome */
    .stacking-window-card {
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
      background: #ffffff !important;
      width: 100vw !important;
      height: 100vh !important;
    }

    .stacking-window-card.top-card {
      box-shadow: none !important;
    }

    /* Hide titlebar completely */
    .stacking-window-titlebar {
      display: none !important;
    }

    /* Hide all window chrome */
    .stacking-window-buttons,
    .stacking-window-btn,
    .stacking-window-btn.close,
    .stacking-window-btn.minimize,
    .stacking-window-btn.maximize,
    .stacking-window-title,
    .gpt-back-btn {
      display: none !important;
    }

    /* Content area - full screen */
    .stacking-window-content {
      background: #ffffff !important;
      height: 100% !important;
    }

    .stacking-window-card .stacking-window-preview {
      background: #ffffff !important;
      height: calc(100% - 80px) !important;
    }

    .stacking-window-card .stacking-window-preview.tt-neo {
      background: #1e1e22 !important;
    }

    /* Footer styling - minimal */
    .stacking-window-footer {
      background: #ffffff !important;
      border-top: 1px solid #ebebeb !important;
      padding: 20px 24px !important;
      height: 80px !important;
    }

    /* Cursor-following gradient glow - HIDDEN */
    .cursor-glow {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }

    @keyframes glowColorShift {
      0%, 100% {
        filter: blur(30px) hue-rotate(0deg);
      }
      14% {
        filter: blur(30px) hue-rotate(30deg);
      }
      28% {
        filter: blur(30px) hue-rotate(120deg);
      }
      42% {
        filter: blur(30px) hue-rotate(150deg);
      }
      56% {
        filter: blur(30px) hue-rotate(210deg);
      }
      70% {
        filter: blur(30px) hue-rotate(-30deg);
      }
      85% {
        filter: blur(30px) hue-rotate(-60deg);
      }
    }

    /* Sections are full viewport height for page-by-page navigation */
    .hero-spacer,
    .project-scroll-section {
      height: 100vh;
      min-height: 100vh;
    }

    body.dark-mode {
      background: #1a1a1a;
    }

    /* ========== SCROLL-TRIGGERED ANIMATIONS ========== */
    .project-scroll-section {
      --section-progress: 0;
    }

    /* Hero section parallax depth */
    .hero-full-section {
      will-change: transform;
    }

    /* Floating decorations parallax on scroll */
    .floating-decor {
      will-change: transform;
      transition: transform 0.1s linear;
    }

    /* ========== STICKY HERO SECTION ========== */
    .hero-full-section {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 100vh;
      width: 100%;
      background: var(--clay-bg);
      transition: background 0.4s ease;
      overflow: hidden;
      z-index: 1;
    }

    body.dark-mode .hero-full-section {
      background: #1a1a1a;
    }

    /* Full-size scaled wrapper - fills viewport */
    .hero-full-section .scaled-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1440px;
      height: 900px;
      z-index: 2;
      transform: translate(-50%, -50%);
      transform-origin: center center;
    }

    /* ========== PROJECTS SCROLL CONTAINER ========== */
    .projects-page-wrapper {
      position: relative;
      z-index: 1000;
      background: transparent;
      pointer-events: none; /* Allow clicks to pass through to hero */
    }

    /* Spacer to push projects down (so hero is visible first) */
    .hero-spacer {
      height: 100vh;
      pointer-events: none;
    }

    /* ========== STACKING PROJECT CARDS - Cards Stay Forever ========== */
    /*
     * Cards use FIXED positioning (not sticky)
     * - Cards are fixed in viewport center
     * - Start off-screen (translateY 100%)
     * - JavaScript adds .visible class when scroll reaches trigger point
     * - Once visible, cards NEVER leave - they stay fixed forever
     * - Later cards stack on top with higher z-index
     */

    /* Scroll triggers - invisible markers that control when cards appear */
    .project-scroll-section {
      height: 100vh;  /* Each section = scroll trigger zone */
      position: relative;
      pointer-events: none;  /* Cards are fixed, section is just for scroll measurement */
    }

    /* The project card - FIXED position so it never scrolls away */
    .stacking-window-card {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 1150px;
      height: 720px;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border-radius: var(--clay-radius);
      /* No shadow by default - prevents stacking shadows */
      box-shadow: none;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      /* Start below screen */
      transform: translate(-50%, 100%);
      opacity: 0;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.4s ease,
                  box-shadow 0.3s ease;
      pointer-events: none;
    }

    /* When card becomes visible - slides up and STAYS forever */
    .stacking-window-card.visible {
      transform: translate(-50%, -50%);
      opacity: 1;
      pointer-events: auto;
    }

    /* Only the topmost card gets the shadow */
    .stacking-window-card.top-card {
      box-shadow:
        14px 14px 40px var(--clay-shadow-strong),
        -8px -8px 16px var(--clay-highlight),
        inset 0 2px 1px var(--clay-bevel-top),
        inset 0 -2px 1px var(--clay-bevel-bottom);
    }

    /* Hover effect - only on top card */
    .stacking-window-card.top-card:hover {
      transform: translate(-50%, -50%) scale(1.02);
      box-shadow:
        18px 18px 50px var(--clay-shadow-strong),
        -10px -10px 20px var(--clay-highlight),
        inset 0 2px 1px var(--clay-bevel-top),
        inset 0 -2px 1px var(--clay-bevel-bottom);
    }

    /* Active/clicked state */
    .stacking-window-card.visible:active {
      transform: translate(-50%, -50%) scale(1.01);
    }

    /* Z-index: later cards stack ON TOP of earlier ones (must be higher than desktop-app's 99999) */
    .project-scroll-section[data-project="1"] .stacking-window-card { z-index: 100001; }
    .project-scroll-section[data-project="2"] .stacking-window-card { z-index: 100002; }
    .project-scroll-section[data-project="3"] .stacking-window-card { z-index: 100003; }
    .project-scroll-section[data-project="4"] .stacking-window-card { z-index: 100004; }

    body.dark-mode .stacking-window-card.top-card {
      box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    /* Window titlebar */
    .stacking-window-titlebar {
      height: 52px;
      min-height: 52px;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border-bottom: none;
      box-shadow: inset 0 -1px 0 var(--clay-bevel-bottom),
                  0 2px 8px var(--clay-ao);
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 12px;
    }

    body.dark-mode .stacking-window-titlebar {
      background: linear-gradient(180deg, #3d3d3d 0%, #323232 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .stacking-window-buttons {
      display: flex;
      gap: 8px;
    }

    .stacking-window-btn {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: none;
    }

    .stacking-window-btn.close { background: linear-gradient(145deg, #ff7a73, #e84e47); box-shadow: 2px 2px 5px rgba(0,0,0,0.35), -2px -2px 4px rgba(255,255,255,0.7), inset 0 1px 0 rgba(255,255,255,0.3); }
    .stacking-window-btn.minimize { background: linear-gradient(145deg, #ffd04a, #e5a820); box-shadow: 2px 2px 5px rgba(0,0,0,0.35), -2px -2px 4px rgba(255,255,255,0.7), inset 0 1px 0 rgba(255,255,255,0.3); }
    .stacking-window-btn.maximize { background: linear-gradient(145deg, #40de5c, #20b036); box-shadow: 2px 2px 5px rgba(0,0,0,0.35), -2px -2px 4px rgba(255,255,255,0.7), inset 0 1px 0 rgba(255,255,255,0.3); }

    .stacking-window-title {
      flex: 1;
      text-align: center;
      font-size: 13px;
      font-weight: 500;
      color: var(--clay-text);
      margin-right: 60px; /* Balance the traffic lights */
    }

    body.dark-mode .stacking-window-title {
      color: rgba(255, 255, 255, 0.85);
    }

    /* Window content area */
    .stacking-window-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }

    /* Project preview area - fills the content */
    .stacking-window-preview {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--clay-surface);
      position: relative;
      overflow: hidden;
      min-height: 0; /* Allow flex shrinking */
      box-shadow: inset 0 2px 6px var(--clay-ao);
    }

    body.dark-mode .stacking-window-preview {
      background: #1f1f1f;
    }

    /* Tech Tree preview styling */
    .stacking-window-preview.tech-tree-preview {
      background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
                  radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
                  #1d1d1f;
    }

    .stacking-window-preview.tech-tree-preview .mbp-mockup-wrapper {
      transform: scale(0.7);
    }

    /* When preview is also a claude-flow-banner, ensure proper sizing */
    .stacking-window-preview.claude-flow-banner {
      width: 100%;
      height: 100%;
      border-radius: 0;
      position: relative;
    }

    /* Scale down the banner content to fit in the window */
    .stacking-window-preview.claude-flow-banner .banner-content {
      transform: translate(-50%, -50%) scale(0.45);
    }

    .stacking-window-preview.claude-flow-banner .claude-logo {
      width: 200px;
      height: 200px;
    }

    .stacking-window-preview.claude-flow-banner .claude-wordmark {
      font-size: 180px;
    }

    .stacking-window-preview.claude-flow-banner .x-mark {
      font-size: 120px;
    }

    .stacking-window-preview.claude-flow-banner .flow-star {
      width: 80px;
      height: 80px;
    }

    .stacking-window-preview.claude-flow-banner .flow-text {
      font-size: 160px;
    }

    /* Project info footer inside the window */
    .stacking-window-footer {
      padding: 20px 24px;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border-top: none;
      box-shadow: inset 0 1px 0 var(--clay-bevel-top),
                  0 -2px 8px var(--clay-ao);
      display: flex;
      align-items: center;
      gap: 16px;
    }

    body.dark-mode .stacking-window-footer {
      background: #252525;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .stacking-window-number {
      font-size: 12px;
      font-weight: 700;
      color: var(--clay-text-muted);
      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    }

    body.dark-mode .stacking-window-number {
      color: rgba(255, 255, 255, 0.3);
    }

    .stacking-window-info {
      flex: 1;
    }

    .stacking-window-info h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--clay-text);
      margin: 0 0 4px 0;
    }

    body.dark-mode .stacking-window-info h3 {
      color: #f5f5f7;
    }

    .stacking-window-info p {
      font-size: 14px;
      color: var(--clay-text-secondary);
      margin: 0;
    }

    body.dark-mode .stacking-window-info p {
      color: rgba(255, 255, 255, 0.5);
    }

    .stacking-window-arrow {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--clay-ao);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--clay-text-muted);
      transition: background 0.2s ease, color 0.2s ease;
    }

    .stacking-window-card:hover .stacking-window-arrow {
      background: rgba(0, 0, 0, 0.1);
      color: var(--clay-text-secondary);
    }

    body.dark-mode .stacking-window-arrow {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.4);
    }

    body.dark-mode .stacking-window-card:hover .stacking-window-arrow {
      background: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.7);
    }

    /* Project Window - macOS style */
    .project-window {
      width: 100%;
      max-width: 900px;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border-radius: var(--clay-radius);
      box-shadow: var(--clay-card);
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .project-window:hover {
      transform: translateY(-4px) scale(1.01);
      box-shadow: var(--clay-card-hover);
    }

    body.dark-mode .project-window {
      background: #2d2d2d;
      box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    body.dark-mode .project-window:hover {
      box-shadow:
        0 35px 70px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.15);
    }

    /* Window Title Bar */
    .project-window-titlebar {
      height: 52px;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border-bottom: none;
      box-shadow: inset 0 -1px 0 var(--clay-bevel-bottom);
      display: flex;
      align-items: center;
      padding: 0 16px;
      position: relative;
    }

    body.dark-mode .project-window-titlebar {
      background: linear-gradient(180deg, #3d3d3d 0%, #323232 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Traffic Lights */
    .project-window-buttons {
      display: flex;
      gap: 8px;
    }

    .project-window-btn {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: none;
    }

    .project-window-btn.close { background: linear-gradient(145deg, #ff7a73, #e84e47); box-shadow: 2px 2px 5px rgba(0,0,0,0.35), -2px -2px 4px rgba(255,255,255,0.7), inset 0 1px 0 rgba(255,255,255,0.3); }
    .project-window-btn.minimize { background: linear-gradient(145deg, #ffd04a, #e5a820); box-shadow: 2px 2px 5px rgba(0,0,0,0.35), -2px -2px 4px rgba(255,255,255,0.7), inset 0 1px 0 rgba(255,255,255,0.3); }
    .project-window-btn.maximize { background: linear-gradient(145deg, #40de5c, #20b036); box-shadow: 2px 2px 5px rgba(0,0,0,0.35), -2px -2px 4px rgba(255,255,255,0.7), inset 0 1px 0 rgba(255,255,255,0.3); }

    /* Window Title */
    .project-window-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 13px;
      font-weight: 500;
      color: var(--clay-text);
    }

    body.dark-mode .project-window-title {
      color: rgba(255, 255, 255, 0.8);
    }

    /* Window Content */
    .project-window-content {
      aspect-ratio: 16 / 10;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    body.dark-mode .project-window-content {
      background: linear-gradient(145deg, #252525 0%, #1a1a1a 100%);
    }

    .project-window-placeholder {
      font-size: 14px;
      font-weight: 500;
      color: var(--clay-text-muted);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    body.dark-mode .project-window-placeholder {
      color: rgba(255, 255, 255, 0.2);
    }

    /* Window Footer with project info */
    .project-window-footer {
      padding: 20px 24px;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border-top: none;
      box-shadow: inset 0 1px 0 var(--clay-bevel-top);
    }

    body.dark-mode .project-window-footer {
      background: #2d2d2d;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .project-window-footer .project-number {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--clay-text-muted);
      margin-bottom: 6px;
    }

    body.dark-mode .project-window-footer .project-number {
      color: rgba(255, 255, 255, 0.3);
    }

    .project-window-footer .project-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--clay-text);
      margin-bottom: 4px;
    }

    body.dark-mode .project-window-footer .project-title {
      color: #ffffff;
    }

    .project-window-footer .project-subtitle {
      font-size: 14px;
      color: var(--clay-text-secondary);
    }

    body.dark-mode .project-window-footer .project-subtitle {
      color: rgba(255, 255, 255, 0.5);
    }

    /* ========== SWAPPABLE PROJECT CONTENT (inside desktop-app) ========== */
    .project-slide {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transition: none;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
    }

    .project-slide.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Project slide content area */
    .project-slide-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--clay-bg-light);
      position: relative;
      overflow: hidden;
    }

    body.dark-mode .project-slide-content {
      background: #1f1f1f;
    }

    /* Project 1 background - behind MacBook */
    .project-slide[data-project="1"] .project-slide-content {
      background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.3) 0%, transparent 70%),
        #1d1d1f;
    }

    body.dark-mode .project-slide[data-project="1"] .project-slide-content {
      background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.3) 0%, transparent 70%),
        #1d1d1f;
    }

    .project-slide-placeholder {
      font-size: 16px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.2);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    body.dark-mode .project-slide-placeholder {
      color: rgba(255, 255, 255, 0.2);
    }

    /* ============================================
       Project 1 Preview - MacBook Mockup
       Dynamic Zoom & Click Animation
       ============================================ */

    /* MacBook Pro Mockup - Realistic Version */
    .mbp-mockup-wrapper {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mbp-container {
      position: relative;
      width: 100%;
      max-width: 100%;
      height: auto;
      padding-top: 58.6%;
      margin: 0 auto;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      box-sizing: border-box;
    }

    /* MacBook mockup for project slides */
    .macbook-pro-mockup {
      position: relative;
      width: 100%;
      max-width: 800px;
      height: auto;
      padding-top: 58.6%;
      margin: 0 auto;
    }

    .mbp-display {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      width: 81.3%;
      height: 95.2%;
      margin: 0 auto;
      background-image: radial-gradient(#cfd0d1, #cfd0d1, #adadae);
      border: 1px solid #e5e7e9;
      border-radius: 3.1% / 4%;
      z-index: 1;
    }

    .mbp-display .display-edge {
      display: block;
      position: relative;
      width: 99.37%;
      height: 99.25%;
      margin: 0.3% auto;
      z-index: 2;
      background-color: #262626;
      border-radius: 2.75% / 3.8%;
    }

    .mbp-display .display-edge .bezel {
      display: block;
      position: relative;
      width: 99.5%;
      height: 99.2%;
      margin: auto;
      top: 0.4%;
      border-radius: 2.8% / 3.2%;
      z-index: 3;
      background-color: #010101;
    }

    .mbp-display .bezel:after {
      content: '';
      display: none;
      position: absolute;
      right: 0.15%;
      top: 0.3%;
      width: 62.5%;
      height: 100%;
      pointer-events: none;
      background: linear-gradient(55deg, rgba(0, 0, 0, 0) 61%, rgba(242, 245, 248, 0.15) 61%);
      background-blend-mode: screen;
      border-top-right-radius: 3.5% 3%;
    }

    .mbp-display.with-glare .bezel:after {
      display: block;
    }

    .mbp-display .display-edge .bezel .display-camera {
      width: .62%;
      height: .95%;
      margin: 1% auto;
      left: 0;
      right: 0;
      position: absolute;
      border-radius: 50%;
      z-index: 5;
      background-color: #303132;
    }

    .mbp-display .display-edge .bezel .display-frame {
      display: block;
      position: absolute;
      width: 97.65%;
      height: 89.5%;
      margin: 0 auto;
      top: 3.5%;
      left: 0;
      right: 0;
      background-color: #151515;
      overflow: hidden;
    }

    /* Make display-frame a positioning context for animation elements */
    .macbook-pro-mockup .display-frame {
      position: relative;
    }

    .mbp-display .display-edge .bezel .below-display {
      display: flex;
      justify-content: center;
      position: absolute;
      width: 100%;
      height: 4.9%;
      bottom: .15%;
      z-index: 3;
      background-color: #212121;
      border-bottom-right-radius: 2.5% 70%;
      border-bottom-left-radius: 2.5% 70%;
    }

    .mbp-display .display-edge .bezel .below-display .macbookpro {
      display: block;
      position: relative;
      width: 7.4%;
      height: 32%;
      margin-top: .5%;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
      background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 145 20' %3E%3Cpath fill='%23D8D8DA' d='M0.5 0.6h2.67L9.6 16.23h0.08L16.11 0.6h2.67v18.55h-2.16V4.81h-1.05l2.51-3.7l-7.46 18.04H8.66L1.21 1.11 l2.51 3.7H2.66v14.33H0.5V0.6z M23.23 18.9c-0.67-0.33-1.19-0.81-1.56-1.41s-0.56-1.32-0.56-2.12v-0.03c0-1.14 0.42-2.05 1.27-2.73 c0.85-0.68 2.04-1.07 3.57-1.15l4.95-0.28v1.74l-4.69 0.28c-0.89 0.05-1.58 0.27-2.08 0.64c-0.49 0.38-0.74 0.88-0.74 1.5v0.03 c0 0.64 0.24 1.15 0.73 1.53s1.13 0.57 1.93 0.57c0.7 0 1.34-0.15 1.9-0.44c0.56-0.29 1.01-0.7 1.34-1.21 c0.33-0.51 0.49-1.09 0.49-1.74v-3.95c0-0.81-0.26-1.45-0.76-1.92c-0.51-0.47-1.23-0.7-2.17-0.7c-0.86 0-1.55 0.19-2.08 0.56 c-0.53 0.37-0.85 0.86-0.98 1.46l-0.03 0.12h-2.16l0.01-0.14c0.07-0.74 0.32-1.41 0.75-2.01s1.03-1.08 1.79-1.43 c0.76-0.36 1.67-0.53 2.71-0.53c1.05 0 1.96 0.18 2.73 0.54c0.77 0.36 1.36 0.87 1.78 1.52c0.42 0.66 0.63 1.43 0.63 2.32v9.24 h-2.24v-2.17h-0.05c-0.26 0.49-0.6 0.91-1.03 1.28c-0.43 0.36-0.91 0.65-1.45 0.85c-0.54 0.2-1.1 0.3-1.7 0.3 C24.67 19.4 23.9 19.24 23.23 18.9z M37.12 18.55c-0.93-0.57-1.65-1.38-2.15-2.42c-0.51-1.04-0.76-2.27-0.76-3.68v-0.01 c0-1.41 0.26-2.63 0.77-3.66s1.23-1.84 2.16-2.4c0.93-0.57 2.01-0.85 3.24-0.85c1.11 0 2.07 0.22 2.87 0.65 c0.8 0.43 1.43 0.99 1.88 1.68c0.46 0.69 0.73 1.41 0.83 2.17l0.01 0.1h-2.19l-0.03-0.1c-0.16-0.67-0.52-1.26-1.07-1.76 S41.36 7.5 40.38 7.5c-0.77 0-1.45 0.2-2.03 0.61c-0.58 0.41-1.04 0.98-1.36 1.72c-0.33 0.74-0.49 1.62-0.49 2.63v0.01 c0 1.04 0.17 1.92 0.49 2.66c0.33 0.74 0.79 1.3 1.38 1.7c0.59 0.39 1.27 0.59 2.04 0.59c0.92 0 1.66-0.23 2.23-0.7 c0.57-0.47 0.95-1.07 1.14-1.82l0.03-0.1H46l-0.01 0.09c-0.12 0.85-0.43 1.61-0.93 2.3c-0.5 0.68-1.15 1.22-1.94 1.62 c-0.79 0.4-1.7 0.6-2.71 0.6C39.15 19.4 38.05 19.12 37.12 18.55z M48.4 0.6h2.31v18.55H48.4V0.6z M49.56 17.1h5.5 c1.39 0 2.44-0.28 3.17-0.83c0.72-0.55 1.09-1.36 1.09-2.42v-0.03c0-0.72-0.17-1.32-0.5-1.8s-0.83-0.84-1.5-1.08 c-0.66-0.24-1.49-0.36-2.47-0.36h-5.28V8.59h4.63c1.37 0 2.42-0.27 3.14-0.8c0.72-0.53 1.09-1.3 1.09-2.3V5.47 c0-0.92-0.3-1.62-0.91-2.1c-0.61-0.48-1.47-0.73-2.6-0.73h-5.35V0.6h5.88c1.06 0 1.99 0.19 2.79 0.58c0.8 0.39 1.42 0.93 1.86 1.62 c0.45 0.69 0.67 1.5 0.67 2.43v0.03c0 0.64-0.15 1.26-0.44 1.84c-0.29 0.58-0.69 1.07-1.2 1.47c-0.51 0.4-1.08 0.65-1.72 0.74v0.05 c0.89 0.1 1.66 0.36 2.3 0.77c0.64 0.41 1.14 0.94 1.48 1.59c0.34 0.65 0.51 1.38 0.51 2.2v0.03c0 1.09-0.25 2.02-0.75 2.8 c-0.5 0.78-1.22 1.37-2.15 1.79c-0.93 0.42-2.06 0.62-3.38 0.62h-5.85V17.1z M66.26 18.56c-0.93-0.57-1.65-1.37-2.17-2.41 c-0.52-1.04-0.78-2.27-0.78-3.68v-0.03c0-1.42 0.26-2.65 0.78-3.68c0.52-1.03 1.24-1.83 2.17-2.39c0.93-0.56 2.01-0.84 3.23-0.84 c1.23 0 2.32 0.28 3.25 0.84c0.93 0.56 1.65 1.36 2.17 2.39c0.52 1.03 0.78 2.26 0.78 3.68v0.03c0 1.42-0.26 2.65-0.78 3.69 c-0.52 1.04-1.24 1.84-2.17 2.4c-0.93 0.57-2.01 0.85-3.24 0.85S67.19 19.12 66.26 18.56z M71.57 16.84 c0.58-0.39 1.03-0.96 1.35-1.7c0.32-0.74 0.48-1.63 0.48-2.68v-0.03c0-1.05-0.16-1.94-0.48-2.67s-0.78-1.3-1.36-1.68 C70.97 7.69 70.29 7.5 69.5 7.5c-0.77 0-1.45 0.19-2.04 0.59c-0.59 0.39-1.04 0.95-1.37 1.68c-0.33 0.73-0.49 1.62-0.49 2.67v0.03 c0 1.05 0.16 1.94 0.49 2.68c0.33 0.74 0.78 1.31 1.37 1.7c0.59 0.39 1.27 0.59 2.06 0.59S71 17.23 71.57 16.84z M80.24 18.56 c-0.93-0.57-1.65-1.37-2.17-2.41c-0.52-1.04-0.78-2.27-0.78-3.68v-0.03c0-1.42 0.26-2.65 0.78-3.68c0.52-1.03 1.24-1.83 2.17-2.39 c0.93-0.56 2.01-0.84 3.23-0.84c1.23 0 2.32 0.28 3.25 0.84c0.93 0.56 1.65 1.36 2.17 2.39c0.52 1.03 0.78 2.26 0.78 3.68v0.03 c0 1.42-0.26 2.65-0.78 3.69c-0.52 1.04-1.24 1.84-2.17 2.4c-0.93 0.57-2.01 0.85-3.24 0.85C82.25 19.4 81.17 19.12 80.24 18.56z M85.55 16.84c0.58-0.39 1.03-0.96 1.35-1.7c0.32-0.74 0.48-1.63 0.48-2.68v-0.03c0-1.05-0.16-1.94-0.48-2.67 c-0.32-0.74-0.78-1.3-1.36-1.68c-0.59-0.39-1.27-0.58-2.06-0.58c-0.77 0-1.45 0.19-2.04 0.59c-0.59 0.39-1.04 0.95-1.37 1.68 c-0.33 0.73-0.49 1.62-0.49 2.67v0.03c0 1.05 0.16 1.94 0.49 2.68c0.33 0.74 0.78 1.31 1.37 1.7c0.59 0.39 1.27 0.59 2.06 0.59 S84.97 17.23 85.55 16.84z M92.1 0.6h2.24v18.55H92.1V0.6z M93.83 11.68h0.55l5.86-5.9h2.71l-6.34 6.31h-0.18l-2.61 2.49V11.68z M95.45 12.76l1.49-1.49l6.2 7.88h-2.6L95.45 12.76z M110.44 0.6h2.31v18.55h-2.31V0.6z M111.6 10.47h4.86 c1.33 0 2.36-0.35 3.09-1.04c0.73-0.69 1.09-1.64 1.09-2.86V6.55c0-1.23-0.36-2.18-1.09-2.87c-0.73-0.69-1.76-1.03-3.09-1.03h-4.86 V0.6h5.45c1.17 0 2.19 0.25 3.09 0.75c0.89 0.5 1.59 1.19 2.1 2.08S123 5.35 123 6.52v0.03c0 1.17-0.26 2.21-0.76 3.11 s-1.21 1.6-2.1 2.11c-0.89 0.51-1.92 0.76-3.09 0.76h-5.45V10.47z M125.31 5.78h2.24v2.26h0.05c0.22-0.77 0.61-1.38 1.16-1.84 s1.2-0.68 1.95-0.68c0.2 0 0.37 0.01 0.53 0.03c0.16 0.02 0.28 0.04 0.37 0.06v2.17c-0.09-0.03-0.24-0.06-0.46-0.09 s-0.46-0.04-0.74-0.04c-0.57 0-1.08 0.13-1.51 0.39c-0.43 0.26-0.77 0.63-1 1.11c-0.24 0.48-0.35 1.07-0.35 1.74v8.25h-2.24V5.78z M135.07 18.56c-0.93-0.57-1.65-1.37-2.17-2.41c-0.52-1.04-0.78-2.27-0.78-3.68v-0.03c0-1.42 0.26-2.65 0.78-3.68 c0.52-1.03 1.24-1.83 2.17-2.39c0.93-0.56 2.01-0.84 3.23-0.84c1.23 0 2.32 0.28 3.25 0.84c0.93 0.56 1.65 1.36 2.17 2.39 c0.52 1.03 0.78 2.26 0.78 3.68v0.03c0 1.42-0.26 2.65-0.78 3.69s-1.24 1.84-2.17 2.4c-0.93 0.57-2.01 0.85-3.24 0.85 S136 19.12 135.07 18.56z M140.38 16.84c0.58-0.39 1.03-0.96 1.35-1.7c0.32-0.74 0.48-1.63 0.48-2.68v-0.03 c0-1.05-0.16-1.94-0.48-2.67c-0.32-0.74-0.78-1.3-1.36-1.68c-0.59-0.39-1.27-0.58-2.06-0.58c-0.77 0-1.45 0.19-2.04 0.59 c-0.59 0.39-1.04 0.95-1.37 1.68c-0.33 0.73-0.49 1.62-0.49 2.67v0.03c0 1.05 0.16 1.94 0.49 2.68c0.33 0.74 0.78 1.31 1.37 1.7 c0.59 0.39 1.27 0.59 2.06 0.59S139.8 17.23 140.38 16.84z'/%3E%3C/svg%3E");
    }

    .mbp-keyboard {
      width: 99.75%;
      height: 7.6%;
      margin: 0 auto;
      position: absolute;
      bottom: 0px;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .mbp-keyboard .front {
      width: 100%;
      height: 37.25%;
      position: absolute;
      margin: 0 auto;
      left: 0;
      right: 0;
      top: 0;
      background: linear-gradient(90deg, #68696b 0%, #757678 .15%, #a0a1a3 .3%, #cccdcf .5%, #e7e8ea .8%, #e8e9eb 1%, #dfe0e2 1.25%, #d1d2d4 1.5%, #adaeb0 2%, #a4a5a7 3%, #bbbdbf 4%, #e1e1e3 8%, #eaebed 15%, #e9eaec 25%, #e9eaec 75%, #eaebed 85%, #e1e1e3 92%, #bbbdbf 96%, #a4a5a7 97%, #adaeb0 98%, #d1d2d4 98.5%, #dfe0e2 98.75%, #e8e9eb 99%, #e7e8ea 99.2%, #cccdcf 99.5%, #a0a1a3 99.7%, #757678 99.85%, #68696b 100%);
      z-index: 100;
      border-radius: 1px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .mbp-keyboard .opener-left {
      position: relative;
      width: 6.917%;
      height: 65.5%;
      z-index: 101;
      border-radius: 0 0 0 20px;
      background-color: #c1c2c6;
      background: linear-gradient(180deg, rgba(195, 198, 200, 0.5) 0%, rgba(199, 200, 204, 0.5) 60%, rgba(115, 125, 130, 0.4) 100%), radial-gradient(circle at right, rgba(189, 190, 193, 0.5) 0%, rgba(189, 190, 193, 0.5) 50%, rgba(166, 169, 172, 0.5) 80%, rgba(30, 34, 40, 0.75) 100%);
      background-blend-mode: darken;
    }

    .mbp-keyboard .opener-right {
      position: relative;
      width: 6.917%;
      height: 65.5%;
      z-index: 101;
      border-radius: 0 0 20px 0;
      background-color: #c1c2c6;
      background: linear-gradient(180deg, rgba(195, 198, 200, 0.5) 0%, rgba(199, 200, 204, 0.5) 60%, rgba(115, 125, 130, 0.4) 100%), radial-gradient(circle at left, rgba(189, 190, 193, 0.5) 0%, rgba(189, 190, 193, 0.5) 50%, rgba(166, 169, 172, 0.5) 80%, rgba(30, 34, 40, 0.75) 100%);
      background-blend-mode: darken;
    }

    .mbp-keyboard .bottom-left {
      display: block;
      position: relative;
      width: 50%;
      height: 58%;
      top: 10%;
      z-index: 99;
      background: linear-gradient(180deg, #e5e6e9 0%, #909193 65%, #4e4f51 90%, #323234 96%, #29292b 100%);
      border-bottom-left-radius: 25% 60%;
    }

    .mbp-keyboard .bottom-right {
      display: block;
      position: relative;
      width: 50%;
      height: 58%;
      top: 10%;
      z-index: 99;
      background: linear-gradient(180deg, #e5e6e9 0%, #909193 65%, #4e4f51 90%, #323234 96%, #29292b 100%);
      border-bottom-right-radius: 25% 60%;
    }

    .mbp-shadow {
      width: 95%;
      height: 60%;
      display: flex;
      justify-content: center;
    }

    .mbp-shadow .shadow-left {
      display: block;
      position: relative;
      width: 50%;
      height: 100%;
      top: 10%;
      z-index: 90;
      background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(8, 11, 17, .85) 2.5%, rgba(29, 32, 36, .4) 15%, rgba(255, 255, 255, 0) 50%);
      filter: blur(2px);
      background-blend-mode: multiply;
      border-top-left-radius: 20% 90%;
    }

    .mbp-shadow .shadow-right {
      display: block;
      position: relative;
      width: 50%;
      height: 100%;
      top: 10%;
      z-index: 90;
      background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(8, 11, 17, .85) 2.5%, rgba(29, 32, 36, .4) 15%, rgba(255, 255, 255, 0) 50%);
      filter: blur(2px);
      background-blend-mode: multiply;
      border-top-right-radius: 20% 90%;
    }

    /* Wrapper for project slide content */
    .p1-macbook-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
      padding: 20px;
    }

    /* The actual preview content - fills MacBook screen */
    .project-1-preview {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #0a0a0f;
      font-family: 'Inter', -apple-system, sans-serif;
    }

    /* ===== PROJECT 1 PREVIEW: Animated Design ===== */
    /* Animation timeline: 10s total
       0-4s: Zoom in, cursor moves, click
       4-5s: Flash transition to nodes
       5-9s: Nodes visible and connecting
       9-10s: Fade back to start
    */

    /* Screen content container - clean dark background */
    .mbp-screen-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #0a0a0a;
      overflow: hidden;
    }

    /* ========== PROJECT 1 TECH TREE PREVIEW ========== */
    .techtree-preview {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 12px;
    }

    .techtree-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, #0d1117 0%, #161b22 50%, #1a1f26 100%);
    }

    .techtree-connections {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .techtree-nodes {
      position: absolute;
      inset: 0;
      z-index: 2;
    }

    .techtree-node {
      position: absolute;
      transform: translate(-50%, 50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .techtree-node .node-emoji {
      width: 44px;
      height: 44px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      transition: all 0.3s ease;
    }

    .techtree-node.root .node-emoji {
      width: 56px;
      height: 56px;
      font-size: 28px;
      background: rgba(255, 149, 0, 0.2);
      border-color: rgba(255, 149, 0, 0.4);
    }

    .techtree-node.highlight .node-emoji {
      background: rgba(88, 166, 255, 0.2);
      border-color: rgba(88, 166, 255, 0.5);
      box-shadow: 0 0 20px rgba(88, 166, 255, 0.3);
    }

    .techtree-node .node-label {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.6);
      font-weight: 500;
      white-space: nowrap;
    }

    .techtree-title {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 3;
    }

    .techtree-label {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 0.5px;
    }

    /* For project-slide-content */
    .project-slide-content .techtree-preview {
      border-radius: 0;
    }

    /* ========== PROJECT 1 DESKTOP ENVIRONMENT (LEGACY) ========== */
    .p1-desktop {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .p1-desktop-wallpaper {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    }

    /* macOS Menu Bar */
    .p1-menubar {
      position: relative;
      z-index: 10;
      height: 22px;
      background: rgba(30, 30, 30, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      align-items: center;
      padding: 0 10px;
      font-size: 11px;
      color: #fff;
      gap: 12px;
      flex-shrink: 0;
    }

    .p1-menubar-apple::before {
      content: '';
      font-size: 13px;
    }

    .p1-menubar-app {
      font-weight: 600;
    }

    /* Safari Browser Window */
    .p1-browser-window {
      position: relative;
      z-index: 5;
      flex: 1;
      margin: 8px;
      background: #1a1a1a;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .p1-browser-titlebar {
      height: 28px;
      background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
      display: flex;
      align-items: center;
      padding: 0 10px;
      gap: 8px;
      flex-shrink: 0;
    }

    .p1-browser-buttons {
      display: flex;
      gap: 6px;
    }

    .p1-browser-btn {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .p1-browser-btn.close { background: #ff5f57; }
    .p1-browser-btn.minimize { background: #ffbd2e; }
    .p1-browser-btn.maximize { background: #28c840; }

    .p1-browser-address {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      padding: 3px 8px;
      font-size: 10px;
      color: rgba(255, 255, 255, 0.7);
    }

    .p1-address-icon {
      font-size: 8px;
    }

    .p1-address-text {
      font-weight: 500;
    }

    .p1-browser-content {
      flex: 1;
      position: relative;
      overflow: hidden;
    }

    /* macOS Dock */
    .p1-dock {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: center;
      gap: 4px;
      padding: 4px 8px;
      margin: 0 auto 6px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .p1-dock-item {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      border-radius: 6px;
      transition: transform 0.2s;
    }

    .p1-dock-item.active {
      position: relative;
    }

    .p1-dock-item.active::after {
      content: '';
      position: absolute;
      bottom: -3px;
      width: 3px;
      height: 3px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
    }

    .p1-preview-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      border-radius: 0;
      overflow: hidden;
      position: relative;
    }

    /* ===== iOS-STYLE AMBIENT EFFECTS ===== */
    /* Clean, simple: iOS blue (#007AFF) + pink (#FF2D55) */

    /* iOS gradient overlay - blue to pink */
    .p1-aurora {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.4;
      background: linear-gradient(
        135deg,
        rgba(0, 122, 255, 0.35) 0%,
        rgba(88, 86, 214, 0.2) 50%,
        rgba(255, 45, 85, 0.25) 100%
      );
      animation: p1-bg-fade 12s ease-in-out infinite;
    }

    @keyframes p1-bg-fade {
      /* Dim during nodes demo (start) */
      0%, 48% { opacity: 0.15; }
      /* Fade in for title */
      55%, 90% { opacity: 0.5; }
      /* Fade out for reset */
      96%, 100% { opacity: 0.15; }
    }

    /* Central iOS blue glow */
    .p1-color-shift {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(
        ellipse 70% 70% at 50% 45%,
        rgba(0, 122, 255, 0.2) 0%,
        transparent 60%
      );
      animation: p1-glow-fade 12s ease-in-out infinite;
    }

    @keyframes p1-glow-fade {
      /* Dim during nodes demo (start) */
      0%, 48% { opacity: 0.2; transform: scale(0.9); }
      /* Fade in for title */
      55%, 90% { opacity: 0.9; transform: scale(1); }
      /* Fade out for reset */
      96%, 100% { opacity: 0.2; transform: scale(0.9); }
    }

    /* Hide particles for cleaner look */
    .p1-particles { display: none; }

    /* iOS blue orb */
    .p1-glow-orbs {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    .p1-glow-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
    }

    .p1-glow-orb:nth-child(1) {
      width: 200px;
      height: 200px;
      background: rgba(0, 122, 255, 0.3);
      left: 50%;
      top: 35%;
      transform: translateX(-50%);
      animation: p1-orb-fade-1 12s ease-in-out infinite;
    }

    .p1-glow-orb:nth-child(2) {
      width: 150px;
      height: 150px;
      background: rgba(255, 45, 85, 0.2);
      right: 15%;
      bottom: 25%;
      animation: p1-orb-fade-2 12s ease-in-out infinite;
    }

    .p1-glow-orb:nth-child(3) { display: none; }

    @keyframes p1-orb-fade-1 {
      /* Dim during nodes demo (start) */
      0%, 48% { transform: translateX(-50%) scale(0.8); opacity: 0.1; }
      /* Fade in for title */
      55%, 90% { transform: translateX(-50%) scale(1); opacity: 0.7; }
      /* Fade out for reset */
      96%, 100% { transform: translateX(-50%) scale(0.8); opacity: 0.1; }
    }

    @keyframes p1-orb-fade-2 {
      /* Dim during nodes demo (start) */
      0%, 48% { transform: translate(-10px, -5px); opacity: 0.1; }
      /* Fade in for title */
      55%, 90% { transform: translate(0, 0); opacity: 0.5; }
      /* Fade out for reset */
      96%, 100% { transform: translate(-10px, -5px); opacity: 0.1; }
    }

    /* Subtle vignette */
    .p1-breathe {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(
        ellipse at center,
        transparent 45%,
        rgba(0, 0, 0, 0.35) 100%
      );
    }

    /* Subtle background nodes for tech tree context */
    .p1-bg-nodes {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      animation: p1-bg-nodes-fade 12s ease-in-out infinite;
    }

    @keyframes p1-bg-nodes-fade {
      /* Dim during nodes demo (start) */
      0%, 48% { opacity: 0.15; }
      /* Fade in for title */
      55%, 90% { opacity: 0.6; }
      /* Fade out for reset */
      96%, 100% { opacity: 0.15; }
    }

    .p1-bg-node {
      position: absolute;
      width: 6px;
      height: 6px;
      background: rgba(0, 255, 204, 0.3);
      border: 1px solid rgba(0, 255, 204, 0.4);
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(0, 255, 204, 0.3);
      animation: p1-node-pulse 4s ease-in-out infinite;
    }

    .p1-bg-node:nth-child(2) { animation-delay: 0.8s; }
    .p1-bg-node:nth-child(3) { animation-delay: 1.6s; }
    .p1-bg-node:nth-child(4) { animation-delay: 2.4s; }
    .p1-bg-node:nth-child(5) { animation-delay: 3.2s; }

    @keyframes p1-node-pulse {
      0%, 100% { opacity: 0.3; transform: scale(1); box-shadow: 0 0 8px rgba(0, 255, 204, 0.3); }
      50% { opacity: 0.8; transform: scale(1.3); box-shadow: 0 0 15px rgba(0, 255, 204, 0.5); }
    }

    .p1-bg-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    /* Background image layer that zooms */
    .p1-preview-container::before {
      content: '';
      position: absolute;
      inset: -10%;
      width: 120%;
      height: 120%;
      background-image: url('Frame!.png');
      background-size: cover;
      background-position: center;
      z-index: 0;
      animation: p1-bg-zoom 12s ease-in-out infinite;
    }

    @keyframes p1-bg-zoom {
      /* Start zoomed in during nodes demo */
      0% { transform: scale(1.4); filter: blur(0px); }
      38% { transform: scale(1.4); filter: blur(0px); }
      /* Blur transition */
      45% { transform: scale(1.4); filter: blur(8px); }
      48% { transform: scale(1); filter: blur(8px); }
      /* Settle for title */
      52%, 90% { transform: scale(1); filter: blur(0px); }
      /* Reset */
      96%, 100% { transform: scale(1.4); filter: blur(0px); }
    }

    /* Content wrapper for zoom animation */
    .p1-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      animation: p1-content-fade 12s ease-in-out infinite;
    }

    @keyframes p1-content-fade {
      /* Hidden during nodes demo */
      0%, 48% {
        transform: scale(0.9);
        opacity: 0;
        filter: blur(6px);
      }
      /* Fade in */
      55% {
        transform: scale(0.95);
        opacity: 0.5;
        filter: blur(2px);
      }
      60% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
      }
      /* Hold */
      88% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
      }
      /* Fade out */
      95%, 100% {
        transform: scale(1.02);
        opacity: 0;
        filter: blur(4px);
      }
    }

    .p1-title {
      font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
      font-size: clamp(48px, 10vw, 80px);
      font-weight: 700;
      margin: 0 0 28px 0;
      line-height: 1.0;
      letter-spacing: -0.02em;
      color: #ffffff;
      text-transform: uppercase;
      text-shadow: 0 0 8px rgba(0, 255, 204, 0.4), 0 0 16px rgba(0, 255, 204, 0.2);
      animation: p1-title-glow 4s ease-in-out infinite;
    }

    /* Typing wrapper and text - base styles */
    .p1-typing-wrapper {
      display: block;
    }

    .p1-typing-text {
      display: inline;
    }

    /* Hide cursor in non-fullscreen modes */
    .p1-typing-cursor {
      display: none;
    }

    @keyframes p1-title-glow {
      0%, 100% { text-shadow: 0 0 8px rgba(0, 255, 204, 0.4), 0 0 16px rgba(0, 255, 204, 0.2); }
      50% { text-shadow: 0 0 12px rgba(0, 255, 204, 0.5), 0 0 24px rgba(0, 255, 204, 0.3); }
    }

    /* Profile icon in top right */
    .p1-profile {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(0, 255, 204, 0.8);
      background: rgba(0, 255, 204, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      box-shadow: 0 0 15px rgba(0, 255, 204, 0.5), 0 0 30px rgba(0, 255, 204, 0.3), inset 0 0 10px rgba(0, 255, 204, 0.2);
      animation: p1-profile-appear 12s ease-out infinite, p1-profile-glow 2s ease-in-out infinite;
    }

    .p1-profile svg {
      width: 20px;
      height: 20px;
      stroke: #00ffcc;
      fill: none;
      filter: drop-shadow(0 0 4px rgba(0, 255, 204, 0.8));
    }

    @keyframes p1-profile-appear {
      /* Visible during nodes demo */
      0%, 45% { opacity: 1; }
      /* Fade out before title */
      50%, 100% { opacity: 0; }
    }

    @keyframes p1-profile-glow {
      0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 204, 0.5), 0 0 30px rgba(0, 255, 204, 0.3), inset 0 0 10px rgba(0, 255, 204, 0.2); }
      50% { box-shadow: 0 0 25px rgba(0, 255, 204, 0.7), 0 0 50px rgba(0, 255, 204, 0.4), inset 0 0 15px rgba(0, 255, 204, 0.3); }
    }

    /* Button wrapper for positioning cursor relative to it */
    .p1-button-wrapper {
      position: relative;
    }

    .p1-button {
      position: relative;
      overflow: hidden;
      font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.05em;
      color: #00ffcc;
      /* Tech-forward style - dark with neon glow */
      background: rgba(0, 255, 204, 0.08);
      border: 1px solid rgba(0, 255, 204, 0.4);
      border-radius: 50px;
      padding: 14px 32px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 0 20px rgba(0, 255, 204, 0.15), inset 0 0 20px rgba(0, 255, 204, 0.05);
      animation: p1-button-glow 2s ease-in-out infinite, p1-button-click 12s ease-in-out infinite;
    }

    @keyframes p1-button-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.15), inset 0 0 20px rgba(0, 255, 204, 0.05); }
      50% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.3), inset 0 0 25px rgba(0, 255, 204, 0.1); }
    }

    @keyframes p1-button-click {
      0%, 70% { transform: scale(1); background: rgba(0, 255, 204, 0.08); }
      /* Hover state when cursor arrives */
      72%, 74% { transform: scale(1.02); background: rgba(0, 255, 204, 0.18); box-shadow: 0 0 35px rgba(0, 255, 204, 0.4), inset 0 0 25px rgba(0, 255, 204, 0.15); }
      /* Click press */
      76% { transform: scale(0.95); background: rgba(0, 255, 204, 0.25); box-shadow: 0 0 50px rgba(0, 255, 204, 0.6), inset 0 0 30px rgba(0, 255, 204, 0.25); }
      /* Release */
      78% { transform: scale(1); background: rgba(0, 255, 204, 0.08); }
      80%, 100% { transform: scale(1); background: rgba(0, 255, 204, 0.08); }
    }

    /* Button ripple effect */
    .p1-button-ripple {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(0, 255, 204, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      animation: p1-ripple 12s ease-out infinite;
    }

    @keyframes p1-ripple {
      0%, 75% { width: 0; height: 0; opacity: 0; }
      76% { width: 0; height: 0; opacity: 0.5; }
      82% { width: 150px; height: 150px; opacity: 0; }
      100% { width: 150px; height: 150px; opacity: 0; }
    }

    /* Animated cursor - tech style glowing dot */
    .p1-cursor {
      position: absolute;
      top: 50%;
      left: 70%;
      width: 16px;
      height: 16px;
      background: #00ffcc;
      border-radius: 50%;
      pointer-events: none;
      z-index: 10;
      will-change: transform, opacity;
      animation: p1-cursor-move 12s ease-out infinite;
      box-shadow: 0 0 12px #00ffcc, 0 0 25px rgba(0, 255, 204, 0.5);
    }

    @keyframes p1-cursor-move {
      /* Hidden during nodes demo */
      0%, 64% {
        opacity: 0;
        transform: translate(180px, -200px);
      }
      /* Cursor appears and starts flying in */
      65% {
        opacity: 1;
        transform: translate(180px, -200px);
      }
      /* Smooth fly-in - arrives at button */
      72% {
        opacity: 1;
        transform: translate(0, 0);
      }
      /* Click */
      75% {
        opacity: 1;
        transform: translate(0, 0) scale(0.88);
      }
      77%, 80% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
      85%, 100% {
        opacity: 0;
        transform: translate(0, 0);
      }
    }

    .p1-button:hover {
      background: rgba(0, 255, 204, 0.15);
      box-shadow: 0 0 35px rgba(0, 255, 204, 0.4), inset 0 0 25px rgba(0, 255, 204, 0.1);
    }

    /* ===== NODES NETWORK OVERLAY ===== */
    .p1-nodes-container {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      opacity: 0;
      animation: p1-nodes-appear 12s ease-in-out infinite;
    }

    @keyframes p1-nodes-appear {
      /* Visible at start during nodes demo */
      0%, 42% { opacity: 1; }
      /* Fade out before title */
      48%, 100% { opacity: 0; }
    }

    /* Camera zooms in on node after hold */
    .p1-camera-view {
      position: absolute;
      inset: 0;
      transform-origin: 50% 15%;
      animation: p1-camera-zoom 12s ease-in-out infinite;
    }

    @keyframes p1-camera-zoom {
      /* Start zoomed in */
      0% { transform: scale(3.5); opacity: 1; }
      /* Hold zoomed */
      20% { transform: scale(3.5); opacity: 1; }
      /* Zoom out */
      38% { transform: scale(1); opacity: 1; }
      42% { transform: scale(1); opacity: 1; }
      /* Fade out before title */
      48%, 100% { transform: scale(1); opacity: 0; }
    }

    /* Arrow at bottom */
    .p1-nav-arrow {
      position: absolute;
      bottom: 20%;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      animation: p1-arrow-appear 12s ease-out infinite;
    }

    .p1-nav-arrow svg {
      width: 40px;
      height: 40px;
      filter: drop-shadow(0 0 12px rgba(0, 255, 204, 0.6));
    }

    .p1-nav-arrow svg circle {
      fill: rgba(0, 255, 204, 0.1);
      stroke: rgba(0, 255, 204, 0.5);
    }

    .p1-nav-arrow svg path {
      fill: #00ffcc;
    }

    @keyframes p1-arrow-appear {
      /* Visible at start */
      0%, 45% { opacity: 1; transform: translateX(-50%) scale(1); }
      /* Fade out before title */
      50%, 100% { opacity: 0; transform: translateX(-50%) scale(0.5); }
    }

    /* Line from arrow to node - stops at node edge */
    .p1-extend-line {
      position: absolute;
      bottom: calc(20% + 36px);
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: calc(65% - 88px);
      background: linear-gradient(0deg, rgba(0, 255, 204, 0.8), rgba(0, 255, 204, 0.2));
      box-shadow: 0 0 8px rgba(0, 255, 204, 0.5);
      transform-origin: bottom center;
      animation: p1-line-extend 12s ease-out infinite;
    }

    @keyframes p1-line-extend {
      /* Extended at start */
      0%, 45% { transform: translateX(-50%) scaleY(1); }
      /* Collapse before title */
      50%, 100% { transform: translateX(-50%) scaleY(0); }
    }

    /* Node at top - tech style */
    .p1-dest-node {
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translateX(-50%) scale(0);
      width: 52px;
      height: 52px;
      background: rgba(0, 255, 204, 0.1);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 2px solid rgba(0, 255, 204, 0.6);
      border-radius: 50%;
      box-shadow: 0 0 20px rgba(0, 255, 204, 0.4), inset 0 0 15px rgba(0, 255, 204, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      animation: p1-dest-pop 12s ease-out infinite;
    }

    @keyframes p1-dest-pop {
      /* Visible at start */
      0%, 45% { transform: translateX(-50%) scale(1); }
      /* Pop out before title */
      50%, 100% { transform: translateX(-50%) scale(0); }
    }

    /* Let's debate text container - cursor and text move together towards the node */
    .p1-debate-text {
      position: absolute;
      top: calc(15% + 26px);
      left: 50%;
      transform: translate(-50%, -7px);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      opacity: 0;
      will-change: transform, opacity;
      animation: p1-debate-move 12s ease-out infinite;
    }

    @keyframes p1-debate-move {
      /* Cursor starts away from node */
      0% {
        opacity: 0;
        transform: translate(calc(-50% + 60px), calc(-7px + 40px));
      }
      /* Cursor appears */
      5% {
        opacity: 1;
        transform: translate(calc(-50% + 60px), calc(-7px + 40px));
      }
      /* Cursor moves to node - lands on it */
      15% {
        opacity: 1;
        transform: translate(-50%, -7px);
      }
      /* Hold at node */
      45% {
        opacity: 1;
        transform: translate(-50%, -7px);
      }
      /* Fade out before title */
      50%, 100% {
        opacity: 0;
        transform: translate(-50%, -7px);
      }
    }

    /* Mini cursor icon - tech style glowing dot - lands on the rocket node */
    .p1-debate-cursor {
      width: 14px;
      height: 14px;
      background: #00ffcc;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 10px #00ffcc, 0 0 20px rgba(0, 255, 204, 0.5);
    }

    /* The text box - info tooltip for node */
    .p1-debate-typed {
      font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
      font-size: 7px;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 1.5;
      color: #00ffcc;
      white-space: normal;
      max-width: 120px;
      text-align: center;
      /* Tech info card style */
      background: rgba(0, 20, 15, 0.95);
      border: 1px solid rgba(0, 255, 204, 0.5);
      border-radius: 4px;
      padding: 6px 8px;
      box-shadow: 0 0 20px rgba(0, 255, 204, 0.25);
      /* Simple appear animation */
      opacity: 0;
      animation: p1-tooltip-appear 12s ease-out infinite;
    }

    @keyframes p1-tooltip-appear {
      /* Hidden until cursor reaches node */
      0%, 60% {
        opacity: 0;
        transform: translateY(5px);
      }
      /* Appear when cursor hovers */
      65%, 94% {
        opacity: 1;
        transform: translateY(0);
      }
      /* Fade out */
      98%, 100% {
        opacity: 0;
        transform: translateY(0);
      }
    }

    /* ===== PROJECT 4 PREVIEW: iPhone Mockup ===== */
    .p4-preview {
      background: linear-gradient(145deg, #fef3e2 0%, #fce4d8 50%, #f8d7da 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
    }

    .iphone-mockup {
      position: relative;
      transform: scale(0.85);
    }

    .iphone-outer {
      position: relative;
      width: 290px;
      height: 590px;
      background: linear-gradient(145deg, #2d2d2d 0%, #1a1a1a 100%);
      border-radius: 52px;
      padding: 12px;
      box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.25),
        0 25px 50px rgba(0, 0, 0, 0.15),
        inset 0 0 0 2px rgba(255, 255, 255, 0.1),
        inset 0 2px 4px rgba(255, 255, 255, 0.05);
    }

    .iphone-silencer {
      position: absolute;
      left: -3px;
      top: 100px;
      width: 3px;
      height: 28px;
      background: #3d3d3d;
      border-radius: 2px 0 0 2px;
    }

    .iphone-volume-up {
      position: absolute;
      left: -3px;
      top: 145px;
      width: 3px;
      height: 50px;
      background: #3d3d3d;
      border-radius: 2px 0 0 2px;
    }

    .iphone-volume-down {
      position: absolute;
      left: -3px;
      top: 205px;
      width: 3px;
      height: 50px;
      background: #3d3d3d;
      border-radius: 2px 0 0 2px;
    }

    .iphone-power {
      position: absolute;
      right: -3px;
      top: 160px;
      width: 3px;
      height: 80px;
      background: #3d3d3d;
      border-radius: 0 2px 2px 0;
    }

    .iphone-inner {
      position: relative;
      width: 100%;
      height: 100%;
      background: #000;
      border-radius: 42px;
      overflow: hidden;
    }

    .iphone-notch {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 32px;
      background: #000;
      border-radius: 0 0 20px 20px;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding-top: 4px;
    }

    .iphone-camera {
      width: 10px;
      height: 10px;
      background: radial-gradient(circle at 30% 30%, #3d3d3d, #1a1a1a);
      border-radius: 50%;
      position: relative;
    }

    .iphone-camera-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 4px;
      height: 4px;
      background: radial-gradient(circle at 30% 30%, #0a4a3a, #063025);
      border-radius: 50%;
    }

    .iphone-speaker {
      width: 50px;
      height: 5px;
      background: #1a1a1a;
      border-radius: 3px;
    }

    /* iOS Status Bar */
    .ios-status-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 4px 20px 0;
      z-index: 11;
      box-sizing: border-box;
      pointer-events: none;
    }

    .ios-status-left {
      position: absolute;
      left: 0;
      right: 65%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ios-time {
      font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
      font-size: 11px;
      font-weight: 600;
      color: #000;
      letter-spacing: 0.01em;
    }

    .ios-status-right {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .ios-signal {
      width: 12px;
      height: 8px;
    }

    .ios-wifi {
      width: 11px;
      height: 8px;
    }

    .ios-battery {
      width: 18px;
      height: 8px;
    }

    .iphone-screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 42px;
      overflow: hidden;
      background: #000;
      z-index: 1;
    }

    .iphone-screen video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .iphone-home-indicator {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 4px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      z-index: 10;
    }

    /* Project slide footer — Clay surface */
    .project-slide-footer {
      padding: 20px 24px;
      background: var(--clay-surface);
      border-top: none;
      box-shadow: inset 0 2px 6px var(--clay-ao);
    }

    body.dark-mode .project-slide-footer {
      background: #212121;
      border-top: 1px solid #3e3e3e;
    }

    .project-slide-number {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--clay-text-muted);
      margin-bottom: 6px;
      font-family: var(--gpt-font, -apple-system, BlinkMacSystemFont, sans-serif);
    }

    body.dark-mode .project-slide-number {
      color: #767676;
    }

    .project-slide-title {
      font-size: 18px;
      font-weight: 500;
      color: var(--clay-text);
      margin-bottom: 4px;
      font-family: var(--gpt-font, -apple-system, BlinkMacSystemFont, sans-serif);
    }

    body.dark-mode .project-slide-title {
      color: #ececec;
    }

    .project-slide-subtitle {
      font-size: 14px;
      color: var(--clay-text-secondary);
      font-family: var(--gpt-font, -apple-system, BlinkMacSystemFont, sans-serif);
    }

    body.dark-mode .project-slide-subtitle {
      color: #767676;
    }

    /* Hide messages content AND sidebar when showing project */
    .desktop-app.showing-project .desktop-main,
    .desktop-app.showing-project .desktop-sidebar {
      opacity: 0;
      pointer-events: none;
      transition: none;
    }

    /* Hide floating assets when showing projects */
    body.showing-projects .floating-decor {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 0.4s ease !important;
    }

    body.showing-projects .floating-blobs,
    body.showing-projects .floating-window {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 0.3s ease;
    }

    /* Project slides container - ChatGPT style (high specificity) */
    .desktop-app.chatgpt-style .project-slides-container {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: calc(100% - 80px) !important;
      max-width: 900px !important;
      height: calc(100% - 80px) !important;
      max-height: 650px !important;
      overflow: hidden !important;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
      background: var(--clay-surface) !important;
      border-radius: var(--clay-radius) !important;
      border: none !important;
      box-shadow: var(--clay-card) !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .desktop-app.chatgpt-style.showing-project .project-slides-container {
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    body.dark-mode .desktop-app.chatgpt-style .project-slides-container {
      background: #212121 !important;
      border-color: #3e3e3e !important;
    }

    /* Clay header — replaces traffic lights */
    .desktop-app.chatgpt-style .project-slides-header {
      height: 52px !important;
      background: #ffffff !important;
      border-bottom: none !important;
      box-shadow: 0 2px 8px var(--clay-shadow-color) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 0 12px !important;
      flex-shrink: 0 !important;
    }

    body.dark-mode .desktop-app.chatgpt-style .project-slides-header {
      background: #212121 !important;
      border-bottom-color: #3e3e3e !important;
    }

    /* Hide old titlebar completely */
    .desktop-app.chatgpt-style .project-slides-titlebar,
    .desktop-app.chatgpt-style .traffic-lights,
    .desktop-app.chatgpt-style .traffic-light {
      display: none !important;
    }

    .desktop-app.chatgpt-style .gpt-back-btn {
      width: 32px;
      height: 32px;
      background-color: #080808;
      border: none;
      border-radius: var(--clay-radius-pill);
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .desktop-app.chatgpt-style .gpt-back-btn:hover {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
      transform: translateY(-1px);
    }

    body.dark-mode .desktop-app.chatgpt-style .gpt-back-btn {
      color: rgba(255, 255, 255, 0.8);
    }

    body.dark-mode .desktop-app.chatgpt-style .gpt-back-btn:hover {
      background-color: #080808;
    }

    .desktop-app.chatgpt-style .project-slides-title {
      font-size: 15px;
      font-weight: 500;
      color: var(--clay-text);
      font-family: var(--gpt-font, -apple-system, BlinkMacSystemFont, sans-serif);
    }

    body.dark-mode .desktop-app.chatgpt-style .project-slides-title {
      color: #ececec;
    }

    .desktop-app.chatgpt-style .gpt-header-spacer {
      width: 32px;
    }

    /* Project slides area — Clay surface */
    .desktop-app.chatgpt-style .project-slides-area {
      flex: 1 !important;
      position: relative !important;
      overflow: hidden !important;
      background: var(--clay-bg-light) !important;
    }

    body.dark-mode .desktop-app.chatgpt-style .project-slides-area {
      background: #212121 !important;
    }

    /* Project slide content — Clay matte surface */
    .desktop-app.chatgpt-style .project-slide-content {
      background: var(--clay-bg-light) !important;
    }

    body.dark-mode .desktop-app.chatgpt-style .project-slide-content {
      background: #2f2f2f !important;
    }

    /* Project slide footer — Inset plate surface */
    .desktop-app.chatgpt-style .project-slide-footer {
      padding: 18px 22px !important;
      background: var(--clay-surface) !important;
      border-top: none !important;
      box-shadow: inset 0 2px 8px var(--clay-shadow-color) !important;
    }

    body.dark-mode .desktop-app.chatgpt-style .project-slide-footer {
      background: #212121 !important;
      border-top-color: #3e3e3e !important;
    }

    .desktop-app.chatgpt-style .project-slide-number {
      font-size: 11px !important;
      font-weight: 500 !important;
      letter-spacing: 0.05em !important;
      text-transform: uppercase !important;
      color: var(--clay-text-muted) !important;
      margin-bottom: 4px !important;
    }

    .desktop-app.chatgpt-style .project-slide-title {
      font-size: 17px !important;
      font-weight: 500 !important;
      color: var(--clay-text) !important;
      margin-bottom: 2px !important;
    }

    .desktop-app.chatgpt-style .project-slide-subtitle {
      font-size: 14px !important;
      color: var(--clay-text-secondary) !important;
    }

    /* Project slides area - below header */
    .project-slides-area {
      position: relative;
      flex: 1;
      overflow: hidden;
    }

    /* Legacy styles - keeping for compatibility */
    .project-section .project-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 900px;
    }

    .project-banner {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border-radius: var(--clay-radius);
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: none;
      box-shadow: var(--clay-card);
    }

    .project-banner:hover {
      transform: translateY(-3px);
      box-shadow: var(--clay-card-hover);
    }

    .project-banner-placeholder {
      font-size: 14px;
      font-weight: 500;
      color: var(--clay-text-muted);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .project-section .project-info {
      margin-top: 24px;
      text-align: center;
      padding: 0;
    }

    .project-number {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--clay-text-muted);
      margin-bottom: 8px;
    }

    .project-section .project-title {
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--clay-text);
    }

    .project-section .project-subtitle {
      font-size: 20px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      max-width: 600px;
    }

    /* Desktop app scroll-based shrink animation */
    .desktop-app.scroll-shrink {
      transition: none; /* Disable transitions during scroll for smooth performance */
    }

    /* Hero as project card - wraps the Messages window */
    .hero-project-banner {
      width: 100%;
      max-width: 1000px;
      aspect-ratio: 16 / 10;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border-radius: var(--clay-radius);
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: none;
      box-shadow: var(--clay-card);
      position: relative;
    }

    .hero-project-banner:hover {
      transform: translateY(-4px);
      box-shadow: var(--clay-card-hover);
    }

    body.dark-mode .hero-project-banner {
      background: linear-gradient(145deg, #2a2a2a 0%, #222222 100%);
      border-color: rgba(255, 255, 255, 0.08);
    }

    /* Scaled wrapper inside hero project banner */
    .hero-project-banner .scaled-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.65);
      transform-origin: center center;
    }

    /* Hero project info section */
    .hero-project-info {
      margin-top: 24px;
      text-align: center;
    }

    /* ========== EXPANDED HERO OVERLAY ========== */
    .hero-expanded-overlay {
      position: fixed;
      inset: 0;
      background: #ffffff;
      z-index: 20000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
      overflow: hidden;
    }

    .hero-expanded-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    body.dark-mode .hero-expanded-overlay {
      background: #1a1a1a;
    }

    .hero-expanded-content {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    /* Expanded scaled wrapper - full size */
    .hero-expanded-overlay .expanded-scaled-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1440px;
      height: 900px;
      transform: translate(-50%, -50%);
      transform-origin: center center;
    }

    /* Close button for expanded view */
    .hero-close-btn {
      position: fixed;
      top: 24px;
      right: 24px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.1);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: rgba(0, 0, 0, 0.6);
      transition: background 0.2s ease, transform 0.2s ease;
      z-index: 20001;
      opacity: 0;
      visibility: hidden;
    }

    .hero-expanded-overlay.active .hero-close-btn {
      opacity: 1;
      visibility: visible;
      transition-delay: 0.3s;
    }

    .hero-close-btn:hover {
      background: rgba(0, 0, 0, 0.15);
      transform: scale(1.1);
    }

    body.dark-mode .hero-close-btn {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.6);
    }

    body.dark-mode .hero-close-btn:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    /* Hide body scroll when expanded */
    body.hero-expanded {
      overflow: hidden;
    }

    @media (max-width: 600px) {
      .projects-page-wrapper .top-nav {
        gap: 24px;
      }

      .projects-page-wrapper .top-nav a {
        font-size: 10px;
      }

      .project-section {
        padding: 60px 20px;
      }

      .project-section .project-title {
        font-size: 28px;
      }

      .project-section .project-subtitle {
        font-size: 16px;
      }

      .project-banner {
        border-radius: 8px;
      }
    }

    .scaled-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1440px;
      height: 900px;
      transform: translate(-50%, -50%);
      transform-origin: center center;
    }

    body.dark-mode .scaled-wrapper {
      background: transparent;
    }

    /* ========== SKETCHBOOK AESTHETIC ========== */
    /* Noise overlay - hidden for clean white look */
    .noise-overlay {
      display: none;
    }

    /* Sketch lines - hidden */
    .sketch-lines {
      display: none;
    }

    body.dark-mode .sketch-lines {
      display: none;
    }

    /* Hidden - using simple grid instead */
    .texture-crosshatch {
      display: none;
    }

    body.dark-mode .texture-crosshatch {
      display: none;
    }

    /* Horizontal paper fiber texture */
    /* Paper fibers - hidden for cleaner look */
    .paper-fibers {
      display: none;
    }

    body.dark-mode .paper-fibers {
      display: none;
    }

    /* Coffee ring stains */
    .coffee-stain {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 4;
      opacity: 0;
      animation: stainFadeIn 1.5s ease forwards;
    }

    @keyframes stainFadeIn {
      to { opacity: 1; }
    }

    .coffee-stain-1 {
      width: 140px;
      height: 140px;
      top: 12%;
      left: 6%;
      background: radial-gradient(ellipse at 50% 50%,
        transparent 42%,
        rgba(180, 140, 100, 0.1) 46%,
        rgba(180, 140, 100, 0.18) 50%,
        rgba(180, 140, 100, 0.08) 54%,
        transparent 58%
      );
      transform: rotate(-15deg);
      animation-delay: 0.5s;
    }

    .coffee-stain-2 {
      width: 90px;
      height: 90px;
      bottom: 18%;
      right: 10%;
      background: radial-gradient(ellipse at 50% 50%,
        transparent 38%,
        rgba(160, 120, 80, 0.12) 43%,
        rgba(160, 120, 80, 0.2) 48%,
        rgba(160, 120, 80, 0.1) 53%,
        transparent 58%
      );
      transform: rotate(25deg);
      animation-delay: 0.8s;
    }

    .coffee-stain-3 {
      width: 110px;
      height: 110px;
      top: 55%;
      left: 4%;
      background: radial-gradient(ellipse at 50% 50%,
        transparent 40%,
        rgba(170, 130, 90, 0.08) 45%,
        rgba(170, 130, 90, 0.14) 50%,
        rgba(170, 130, 90, 0.06) 55%,
        transparent 60%
      );
      transform: rotate(10deg);
      animation-delay: 1.1s;
    }

    body.dark-mode .coffee-stain {
      opacity: 0.6;
    }

    /* Watercolor splash accents */
    .watercolor-splash {
      position: absolute;
      pointer-events: none;
      z-index: 5;
      filter: blur(25px);
      opacity: 0;
      animation: splashFadeIn 2s ease forwards;
    }

    @keyframes splashFadeIn {
      to { opacity: 1; }
    }

    .splash-1 {
      width: 220px;
      height: 160px;
      top: 4%;
      right: 12%;
      background: radial-gradient(ellipse at 30% 40%,
        rgba(255, 200, 150, 0.18) 0%,
        rgba(255, 180, 130, 0.12) 40%,
        transparent 70%
      );
      border-radius: 60% 40% 50% 50%;
      transform: rotate(-20deg);
      animation-delay: 0.3s;
    }

    .splash-2 {
      width: 200px;
      height: 140px;
      bottom: 8%;
      left: 8%;
      background: radial-gradient(ellipse at 60% 50%,
        rgba(200, 180, 160, 0.15) 0%,
        rgba(180, 160, 140, 0.1) 50%,
        transparent 80%
      );
      border-radius: 50% 60% 40% 50%;
      transform: rotate(15deg);
      animation-delay: 0.6s;
    }

    .splash-3 {
      width: 160px;
      height: 110px;
      top: 38%;
      right: 4%;
      background: radial-gradient(ellipse at 40% 60%,
        rgba(220, 190, 160, 0.12) 0%,
        rgba(200, 170, 140, 0.08) 50%,
        transparent 75%
      );
      border-radius: 40% 60% 55% 45%;
      transform: rotate(-10deg);
      animation-delay: 0.9s;
    }

    body.dark-mode .watercolor-splash {
      filter: blur(30px);
    }

    body.dark-mode .splash-1 {
      background: radial-gradient(ellipse at 30% 40%,
        rgba(120, 90, 60, 0.2) 0%,
        rgba(100, 70, 45, 0.12) 40%,
        transparent 70%
      );
    }

    body.dark-mode .splash-2 {
      background: radial-gradient(ellipse at 60% 50%,
        rgba(100, 80, 55, 0.18) 0%,
        rgba(80, 60, 40, 0.1) 50%,
        transparent 80%
      );
    }

    body.dark-mode .splash-3 {
      background: radial-gradient(ellipse at 40% 60%,
        rgba(130, 100, 70, 0.15) 0%,
        rgba(110, 85, 55, 0.08) 50%,
        transparent 75%
      );
    }

    /* Pencil smudge marks */
    .pencil-smudge {
      position: absolute;
      pointer-events: none;
      z-index: 6;
      opacity: 0.07;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(80, 70, 60, 0.4) 20%,
        rgba(80, 70, 60, 0.6) 50%,
        rgba(80, 70, 60, 0.4) 80%,
        transparent 100%
      );
      filter: blur(2px);
      transition: opacity 0.4s ease;
    }

    .smudge-1 {
      width: 180px;
      height: 10px;
      top: 22%;
      left: 2%;
      transform: rotate(-5deg);
    }

    .smudge-2 {
      width: 120px;
      height: 8px;
      bottom: 28%;
      right: 6%;
      transform: rotate(8deg);
    }

    .smudge-3 {
      width: 100px;
      height: 6px;
      top: 68%;
      left: 5%;
      transform: rotate(-2deg);
    }

    body.dark-mode .pencil-smudge {
      opacity: 0.04;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(200, 180, 160, 0.3) 20%,
        rgba(200, 180, 160, 0.5) 50%,
        rgba(200, 180, 160, 0.3) 80%,
        transparent 100%
      );
    }

    /* Tape pieces */
    .tape-piece {
      position: absolute;
      pointer-events: none;
      z-index: 7;
      background: linear-gradient(180deg,
        rgba(255, 250, 220, 0.7) 0%,
        rgba(255, 248, 200, 0.5) 100%
      );
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      opacity: 0;
      animation: tapeIn 0.8s ease forwards;
    }

    @keyframes tapeIn {
      0% { opacity: 0; transform: translateY(-10px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .tape-1 {
      width: 80px;
      height: 25px;
      top: 8%;
      left: 15%;
      transform: rotate(-12deg);
      animation-delay: 1.2s;
    }

    .tape-2 {
      width: 60px;
      height: 20px;
      bottom: 15%;
      right: 18%;
      transform: rotate(8deg);
      animation-delay: 1.5s;
    }

    body.dark-mode .tape-piece {
      background: linear-gradient(180deg,
        rgba(200, 190, 160, 0.4) 0%,
        rgba(180, 170, 140, 0.3) 100%
      );
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    /* Figma glow spots - hidden for clean white look */
    .figma-glow {
      display: none;
    }

    /* ========== IMESSAGE BOOT ANIMATION ========== */
    .boot-screen {
      position: fixed;
      inset: 0;
      background: linear-gradient(145deg, #FFFFFF 0%, #E5E5E5 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 24px;
      z-index: 10000;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
      overflow: hidden;
    }

    body.dark-mode .boot-screen {
      background: linear-gradient(180deg, #2a2520 0%, #1a1815 100%);
    }

    .boot-screen::before {
      content: "";
      position: absolute;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(0, 122, 255, 0.12) 0%, transparent 70%);
      border-radius: 50%;
      animation: bootGlow 3s ease-in-out infinite;
    }

    body.dark-mode .boot-screen::before {
      background: radial-gradient(circle, rgba(0, 122, 255, 0.2) 0%, transparent 70%);
    }

    @keyframes bootGlow {
      0%, 100% { transform: scale(1); opacity: 0.5; }
      50% { transform: scale(1.3); opacity: 0.8; }
    }

    .boot-screen.fade-out {
      opacity: 0;
      pointer-events: none;
    }

    .boot-screen.fade-out .boot-bubble {
      transform: scale(0.9) translateY(-20px);
      opacity: 0;
    }

    .boot-screen.hidden {
      display: none;
    }

    .boot-bubble {
      background: linear-gradient(135deg, #007AFF 0%, #0051D4 100%);
      padding: 16px 24px;
      border-radius: 24px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow:
        0 2px 8px rgba(0, 122, 255, 0.15),
        0 4px 16px rgba(0, 122, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
      position: relative;
      z-index: 1;
      animation: bootBubbleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      transform: scale(0.8) translateY(20px);
      opacity: 0;
    }

    @keyframes bootBubbleIn {
      to {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
    }

    /* Blue bubble tail - hidden for cleaner look */
    .boot-bubble::before {
      display: none;
    }

    .boot-bubble-text {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 18px;
      font-weight: 500;
      color: #fff;
      letter-spacing: -0.3px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .boot-dots {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: 2px;
    }

    .boot-dots .dot {
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 50%;
      animation: bootTypingBounce 1.4s ease-in-out infinite;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    .boot-dots .dot:nth-child(2) {
      animation-delay: 0.15s;
    }

    .boot-dots .dot:nth-child(3) {
      animation-delay: 0.3s;
    }

    @keyframes bootTypingBounce {
      0%, 70%, 100% {
        transform: translateY(0);
        opacity: 0.5;
      }
      35% {
        transform: translateY(-6px);
        opacity: 1;
      }
    }

    .boot-delivered {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 12px;
      color: #8e8e93;
      opacity: 0;
      animation: bootDeliveredIn 0.4s ease forwards 0.8s;
    }

    @keyframes bootDeliveredIn {
      from {
        opacity: 0;
        transform: translateY(5px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* iOS System Colors */
    :root {
      --ios-blue: #007AFF;
      --ios-green: #34C759;
      --ios-indigo: #5856D6;
      --ios-orange: #FF9500;
      --ios-pink: #FF2D55;
      --ios-purple: #AF52DE;
      --ios-red: #FF3B30;
      --ios-teal: #5AC8FA;
      --ios-yellow: #FFCC00;
      --ios-gray: #8E8E93;
      --ios-gray2: #636366;
      --ios-gray3: #48484A;
      --ios-gray4: #3A3A3C;
      --ios-gray5: #2C2C2E;
      --ios-gray6: #1C1C1E;
      --ios-background: #000000;
      --ios-secondary-bg: #1C1C1E;
      --ios-tertiary-bg: #2C2C2E;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif;
    }

    /* Dark mode colors handled at top of file */

    /* ========== macOS MENU BAR ========== */
    .macos-menubar {
      display: none;
    }

    .macos-menubar:hover {
      opacity: 1;
    }

    body.dark-mode .macos-menubar {
      background: rgba(30, 30, 30, 0.8);
      border-bottom-color: rgba(255, 255, 255, 0.1);
      color: white;
    }

    .menubar-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .menubar-apple {
      font-size: 15px;
      opacity: 0.9;
    }

    .menubar-item {
      opacity: 0.85;
      cursor: default;
    }

    .menubar-item:hover {
      opacity: 1;
    }

    .menubar-right {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 12px;
    }

    .menubar-icon {
      opacity: 0.8;
    }

    /* ========== iOS SEGMENTED CONTROL NAVIGATION (Hidden - replaced by macOS menu bar) ========== */
    .top-nav {
      display: none !important;
    }

    .top-nav a {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: #000;
      text-decoration: none;
      letter-spacing: -0.08px;
      padding: 7px 20px;
      border-radius: 7px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      position: relative;
      z-index: 1;
    }

    .top-nav a:hover {
      color: #000;
    }

    .top-nav a:active {
      opacity: 0.7;
    }

    .top-nav a.active {
      background: #fff;
      box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.12),
        0 3px 1px rgba(0, 0, 0, 0.04);
      font-weight: 600;
    }

    /* Dividers between inactive segments */
    .top-nav a:not(.active) + a:not(.active)::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 16px;
      background: rgba(0, 0, 0, 0.1);
    }

    body.dark-mode .top-nav {
      background: rgba(118, 118, 128, 0.24);
    }

    body.dark-mode .top-nav a {
      color: #fff;
    }

    body.dark-mode .top-nav a.active {
      background: rgba(99, 99, 102, 1);
      color: #fff;
      box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.3),
        0 3px 1px rgba(0, 0, 0, 0.1);
    }

    body.dark-mode .top-nav a:not(.active) + a:not(.active)::before {
      background: rgba(255, 255, 255, 0.15);
    }

    /* ========== PROJECT INDICATOR NAV (dots only) ========== */
    .project-nav {
      position: fixed;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10000;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease, right 0.3s ease, left 0.3s ease;
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      padding: 12px 8px;
      border-radius: 20px;
      box-shadow: var(--neo-raised-sm);
    }

    body.viewing-projects .project-nav {
      opacity: 1;
      pointer-events: auto;
    }

    .project-nav-item {
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
    }

    .project-nav-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #080808;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.4);
    }

    .project-nav-item:hover .project-nav-dot {
      transform: scale(1.3);
      box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.4),
        inset 0 -1px 3px rgba(255, 255, 255, 0.7),
        0 3px 6px rgba(0, 0, 0, 0.5);
    }

    .project-nav-item.active .project-nav-dot {
      transform: scale(1.5);
      box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.5),
        inset 0 -1px 3px rgba(255, 255, 255, 0.7),
        0 4px 8px rgba(0, 0, 0, 0.6);
    }

    /* Dark mode */
    body.dark-mode .project-nav-dot {
      background-color: #080808;
      box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        inset 0 -1px 2px rgba(255, 255, 255, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.5);
    }

    body.dark-mode .project-nav-item:hover .project-nav-dot {
      box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.5),
        inset 0 -1px 3px rgba(255, 255, 255, 0.8),
        0 3px 6px rgba(0, 0, 0, 0.6);
    }

    body.dark-mode .project-nav-item.active .project-nav-dot {
      box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.6),
        inset 0 -1px 3px rgba(255, 255, 255, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.7);
    }

    body.dark-mode .project-nav {
      background: rgba(30, 30, 30, 0.7);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    /* ========== SIDE NAVIGATION (Left) - HIDDEN ========== */
    .side-nav {
      display: none !important;
    }

    body.viewing-projects .side-nav,
    .side-nav:hover {
      opacity: 1;
      pointer-events: auto;
    }

    /* Always show on desktop when in hero too for accessibility */
    @media (min-width: 768px) {
      .side-nav {
        opacity: 0.4;
        pointer-events: auto;
      }
      .side-nav:hover,
      body.viewing-projects .side-nav {
        opacity: 1;
      }
    }

    .side-nav-item {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      cursor: pointer;
      border-radius: 12px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      background: transparent;
    }

    .side-nav-item:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    .side-nav-item.active {
      background: rgba(0, 0, 0, 0.08);
    }

    .side-nav-item.passed .side-nav-icon {
      color: rgba(0, 0, 0, 0.3);
    }

    .side-nav-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      font-family: 'SF Mono', 'Monaco', monospace;
      color: rgba(0, 0, 0, 0.4);
      background: rgba(0, 0, 0, 0.04);
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .side-nav-item:hover .side-nav-icon {
      background: rgba(0, 0, 0, 0.08);
      color: rgba(0, 0, 0, 0.7);
    }

    .side-nav-item.active .side-nav-icon {
      background: #000;
      color: #fff;
    }

    .side-nav-label {
      font-size: 13px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.5);
      white-space: nowrap;
      opacity: 0;
      transform: translateX(-8px);
      transition: all 0.25s ease;
    }

    .side-nav:hover .side-nav-label,
    .side-nav-item.active .side-nav-label {
      opacity: 1;
      transform: translateX(0);
    }

    .side-nav-item.active .side-nav-label {
      color: rgba(0, 0, 0, 0.9);
      font-weight: 600;
    }

    .side-nav-line {
      display: none;
    }

    /* Progress bar */
    .side-nav-progress {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: rgba(0, 0, 0, 0.06);
      border-radius: 3px;
      overflow: hidden;
    }

    .side-nav-progress-fill {
      width: 100%;
      height: 0%;
      background: #000;
      border-radius: 3px;
      transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Dark mode */
    body.dark-mode .side-nav-item:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    body.dark-mode .side-nav-item.active {
      background: rgba(255, 255, 255, 0.12);
    }

    body.dark-mode .side-nav-icon {
      color: rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.06);
    }

    body.dark-mode .side-nav-item:hover .side-nav-icon {
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.8);
    }

    body.dark-mode .side-nav-item.active .side-nav-icon {
      background: #fff;
      color: #000;
    }

    body.dark-mode .side-nav-label {
      color: rgba(255, 255, 255, 0.5);
    }

    body.dark-mode .side-nav-item.active .side-nav-label {
      color: rgba(255, 255, 255, 0.95);
    }

    body.dark-mode .side-nav-item.passed .side-nav-icon {
      color: rgba(255, 255, 255, 0.25);
    }

    body.dark-mode .side-nav-progress {
      background: rgba(255, 255, 255, 0.1);
    }

    body.dark-mode .side-nav-progress-fill {
      background: #fff;
    }

    /* Mobile: hide side nav, keep dots */
    @media (max-width: 767px) {
      .side-nav {
        display: none;
      }
    }

    /* ========== FLOATING DECORATIVE IMAGES ========== */
    .floating-decor {
      position: absolute;
      pointer-events: none;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease, opacity 0.3s ease;
      opacity: 0;
      animation: floatIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      --parallax-x: 0px;
      --parallax-y: 0px;
      transform: translate(var(--parallax-x), var(--parallax-y));
    }

    .floating-decor img {
      width: 100%;
      height: auto;
      filter:
        drop-shadow(0 6px 12px rgba(0, 0, 0, 0.06))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
      transition: filter 0.3s ease;
    }

    /* Staggered entry animations */
    .decor-envelope { animation-delay: 0.4s; }

    @keyframes floatIn {
      0% {
        opacity: 0;
        transform: translateY(40px) scale(0.8);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Clickable decorations */
    .floating-decor.clickable {
      pointer-events: auto;
      cursor: pointer;
    }

    .floating-decor.clickable::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      background: rgba(0, 0, 0, 0.75);
      color: #fff;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .floating-decor.clickable:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .floating-decor.clickable:hover {
      filter: brightness(1.05);
    }

    .floating-decor.clickable:hover img {
      filter:
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.08))
        drop-shadow(0 3px 6px rgba(0, 0, 0, 0.05));
    }

    .floating-decor.clickable:active {
      transform: scale(0.95);
    }

    .decor-envelope {
      top: 145px;
      left: -355px;
      width: 510px;
      transform: rotate(345deg);
      z-index: 450;
      animation: floatIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, envelopeFloat 7s ease-in-out infinite 1.6s;
    }
    .decor-envelope:hover {
      transform: rotate(345deg) scale(1.06) translateY(-8px);
    }

    @keyframes envelopeFloat {
      0%, 100% { transform: rotate(345deg) translateY(0); }
      50% { transform: rotate(345deg) translateY(-7px); }
    }

    /* Animated decorations (not clickable) */
    /* ========== FLOATING BLOBS (Hidden - replaced by Figma glows) ========== */
    .floating-blobs {
      display: none;
    }

    .blob {
      display: none;
    }

    @keyframes blobFloat {
      0%, 100% {
        transform: translate(0, 0) scale(1);
      }
      25% {
        transform: translate(40px, -40px) scale(1.1);
      }
      50% {
        transform: translate(-30px, 30px) scale(0.9);
      }
      75% {
        transform: translate(25px, 15px) scale(1.05);
      }
    }

    /* ========== DESKTOP FOLDERS ========== */
    .desktop-icons {
      position: absolute;
      top: 48px;
      right: 20px;
      display: none; /* Hidden for cleaner focus on Messages */
      flex-direction: column;
      gap: 8px;
      z-index: 50;
    }

    .desktop-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      background-color: #080808;
      border: 0;
      color: inherit;
      font: inherit;
      width: 80px;
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .desktop-icon::before {
      content: "";
      position: absolute;
      left: -15%;
      right: -15%;
      bottom: 25%;
      top: -100%;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.12);
      transition: all 0.3s ease;
      pointer-events: none;
      z-index: 1;
    }

    .desktop-icon::after {
      content: "";
      position: absolute;
      left: 2%;
      right: 2%;
      top: 10%;
      bottom: 30%;
      border-radius: 100px;
      box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
      transition: all 0.3s ease;
      pointer-events: none;
      z-index: 1;
    }

    .desktop-icon:hover {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .desktop-icon:hover::before {
      transform: translateY(-5%);
    }

    .desktop-icon:hover::after {
      opacity: 0.4;
      transform: translateY(5%);
    }

    body.dark-mode .desktop-icon:hover {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.5),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.8),
        0 2rem 2rem rgba(0, 0, 0, 0.4),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .desktop-icon-img {
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
    }

    .desktop-icon-label {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.7);
      text-align: center;
      text-shadow: none;
      word-break: break-word;
    }

    body.dark-mode .desktop-icon-label {
      color: rgba(255, 255, 255, 0.8);
      text-shadow: none;
    }

    /* ========== iOS STYLE CURSOR ========== */
    body {
      cursor: auto;
    }

    body.dark-mode {
      cursor: auto;
    }

    /* ========== RAINBOW DRAG TRAIL ========== */
    .drag-trail {
      position: fixed;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      opacity: 0.7;
      animation: trailFade 0.5s ease-out forwards;
    }

    @keyframes trailFade {
      0% { transform: scale(1); opacity: 0.7; }
      100% { transform: scale(0); opacity: 0; }
    }

    /* Typography Background - Name as wallpaper */
    .bg-name {
      position: absolute;
      top: 0;
      left: 0;
      width: 1440px;
      height: 900px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 1;
      pointer-events: none;
      user-select: none;
      background: transparent;
    }

    .bg-name-text {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: clamp(80px, 15vw, 180px);
      font-weight: 900;
      letter-spacing: -0.03em;
      color: #E8E9EC;
      opacity: 0.6;
      line-height: 0.9;
      text-align: center;
      transition: color 0.4s ease, opacity 0.4s ease;
    }

    .bg-name-subtitle {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: clamp(14px, 2.5vw, 28px);
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: #d8d0c5;
      opacity: 0.5;
      margin-top: 10px;
      transition: color 0.4s ease, opacity 0.4s ease;
    }

    body.dark-mode .bg-name-text {
      color: #4a4540;
      opacity: 0.5;
    }

    body.dark-mode .bg-name-subtitle {
      color: #6A6A6A;
      opacity: 0.4;
    }

    /* ========== FLOATING WINDOWS ========== */
    .floating-window {
      display: none !important; /* Hidden to focus on Messages */
      position: absolute;
      background: #FFFCFA;
      border-radius: 12px;
      box-shadow:
        0 0 0 1px rgba(0,0,0,0.06),
        0 15px 50px rgba(0, 0, 0, 0.1),
        0 5px 20px rgba(0,0,0,0.08);
      overflow: hidden;
      z-index: 90;
      display: none;
    }

    @media (min-width: 768px) {
      .floating-window {
        display: block;
      }
    }

    .floating-window-header {
      padding: 10px 14px;
      background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface));
      border-bottom: none;
      box-shadow: inset 0 -1px 0 var(--clay-bevel-bottom);
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: default;
    }

    .floating-window-lights {
      display: flex;
      gap: 6px;
    }

    .floating-window-light {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .floating-window-light.red { background: #ff5f57; }
    .floating-window-light.yellow { background: #febc2e; }
    .floating-window-light.green { background: #28c840; }

    .floating-window-title {
      font-size: 12px;
      font-weight: 600;
      color: #4a4a4a;
      flex: 1;
      text-align: center;
      margin-right: 40px;
    }

    /* Folder Window */
    .folder-window {
      width: 280px;
      top: 120px;
      left: 60px;
      animation: floatIn 0.6s ease-out forwards;
      animation-delay: 0.8s;
      opacity: 0;
    }

    .folder-content {
      padding: 16px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .folder-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 10px 6px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .folder-item:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    .folder-item-icon {
      font-size: 32px;
    }

    .folder-item-name {
      font-size: 10px;
      color: #4a4a4a;
      text-align: center;
      word-break: break-word;
    }

    /* Game Window */
    .game-window {
      width: 200px;
      bottom: 140px;
      right: 60px;
      animation: floatIn 0.6s ease-out forwards;
      animation-delay: 1s;
      opacity: 0;
    }

    .game-content {
      padding: 16px;
      text-align: center;
    }

    .game-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      margin-bottom: 12px;
    }

    .game-cell {
      aspect-ratio: 1;
      background: linear-gradient(135deg, #FFF0EB 0%, #FFE8E0 100%);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: pointer;
      transition: transform 0.1s ease, background 0.2s ease;
      border: 2px solid transparent;
    }

    .game-cell:hover {
      transform: scale(1.05);
      background: linear-gradient(135deg, #FFE8E0 0%, #FFD8D0 100%);
    }

    .game-cell.x {
      color: var(--julia-coral);
    }

    .game-cell.o {
      color: var(--julia-warm-purple);
    }

    .game-status {
      font-size: 12px;
      color: #666;
      margin-bottom: 8px;
    }

    .game-reset {
      padding: 8px 18px;
      background-color: #080808;
      color: rgba(255, 255, 255, 0.7);
      border: 0;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 0.1rem 0.3rem rgba(255, 255, 255, 0.3),
        inset 0 -0.05rem 0.1rem rgba(0, 0, 0, 0.7),
        inset 0 -0.15rem 0.3rem rgba(255, 255, 255, 0.5),
        0 0.5rem 0.8rem rgba(0, 0, 0, 0.3),
        0 0.2rem 0.4rem -0.1rem rgba(0, 0, 0, 0.8);
    }

    .game-reset:hover {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .game-reset:active {
      transform: translateY(2px);
    }

    @keyframes floatIn {
      0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Hide old mini windows */
    .mini-window {
      display: none !important;
    }

    .mini-window:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    }

    .mini-window:active {
      cursor: grabbing;
    }

    .mini-window.dragging {
      transition: none;
      z-index: 100;
    }

    body.dark-mode .mini-window {
      background: rgba(45, 45, 50, 0.95);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .mini-window-header {
      padding: 10px 12px;
      background: #f5f5f7;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    body.dark-mode .mini-window-header {
      background: #3a3a3c;
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .mini-traffic-lights {
      display: flex;
      gap: 6px;
    }

    .mini-traffic-light {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .mini-traffic-light.red { background: #ff5f57; }
    .mini-traffic-light.yellow { background: #ffbd2e; }
    .mini-traffic-light.green { background: #28c840; }

    .mini-window-title {
      font-size: 12px;
      font-weight: 500;
      color: #1d1d1f;
      flex: 1;
      text-align: center;
      margin-right: 44px;
    }

    body.dark-mode .mini-window-title {
      color: #f5f5f7;
    }

    .mini-window-content {
      padding: 12px;
    }

    /* Finder Window */
    .finder-window {
      width: 260px;
      top: 80px;
      left: 40px;
    }

    .finder-sidebar {
      display: flex;
      gap: 4px;
    }

    .finder-main {
      flex: 1;
    }

    .finder-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .finder-item:hover {
      background: rgba(0, 122, 255, 0.1);
    }

    .finder-icon {
      font-size: 24px;
    }

    .finder-info {
      flex: 1;
    }

    .finder-name {
      font-size: 13px;
      font-weight: 500;
      color: #1d1d1f;
    }

    body.dark-mode .finder-name {
      color: #f5f5f7;
    }

    .finder-meta {
      font-size: 11px;
      color: #86868b;
    }

    /* Notes Window */
    .notes-window {
      width: 240px;
      bottom: 100px;
      left: 60px;
    }

    .notes-content {
      font-size: 13px;
      line-height: 1.5;
      color: #1d1d1f;
    }

    body.dark-mode .notes-content {
      color: #f5f5f7;
    }

    .notes-title {
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 8px;
      color: #1d1d1f;
    }

    body.dark-mode .notes-title {
      color: #f5f5f7;
    }

    .notes-text {
      color: #6e6e73;
      font-size: 12px;
      line-height: 1.6;
    }

    body.dark-mode .notes-text {
      color: #98989d;
    }

    /* Spotify-style Now Playing Widget */
    .spotify-window {
      width: 280px;
      bottom: 80px;
      right: 40px;
    }

    .spotify-content {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .spotify-album {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background: linear-gradient(135deg, #1DB954 0%, #191414 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    .spotify-info {
      flex: 1;
    }

    .spotify-title {
      font-size: 13px;
      font-weight: 600;
      color: #1d1d1f;
      margin-bottom: 2px;
    }

    body.dark-mode .spotify-title {
      color: #f5f5f7;
    }

    .spotify-artist {
      font-size: 11px;
      color: #86868b;
    }

    .spotify-progress {
      margin-top: 8px;
      height: 3px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      overflow: hidden;
    }

    body.dark-mode .spotify-progress {
      background: rgba(255, 255, 255, 0.1);
    }

    .spotify-progress-bar {
      width: 65%;
      height: 100%;
      background: #1DB954;
      border-radius: 2px;
      animation: progress 8s linear infinite;
    }

    @keyframes progress {
      0% { width: 0%; }
      100% { width: 100%; }
    }

    /* Calendar Widget */
    .calendar-window {
      width: 180px;
      top: 100px;
      right: 60px;
    }

    .calendar-date {
      text-align: center;
    }

    .calendar-day {
      font-size: 48px;
      font-weight: 700;
      color: #ff3b30;
      line-height: 1;
    }

    .calendar-month {
      font-size: 14px;
      font-weight: 600;
      color: #1d1d1f;
      text-transform: uppercase;
      margin-top: 4px;
    }

    body.dark-mode .calendar-month {
      color: #f5f5f7;
    }

    .calendar-weekday {
      font-size: 12px;
      color: #86868b;
      margin-top: 2px;
    }

    /* Safari Window - Case Study Preview */
    .safari-window {
      width: 300px;
      top: 140px;
      right: 280px;
    }

    .safari-url-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: #fff;
      border-radius: 8px;
      margin: 8px;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }

    body.dark-mode .safari-url-bar {
      background: #2c2c2e;
      border-color: rgba(255, 255, 255, 0.1);
    }

    .safari-url-bar .lock-icon {
      color: #86868b;
      font-size: 12px;
    }

    .safari-url-text {
      font-size: 12px;
      color: #1d1d1f;
      flex: 1;
      text-align: center;
    }

    body.dark-mode .safari-url-text {
      color: #f5f5f7;
    }

    .safari-preview {
      height: 140px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      padding: 20px;
    }

    /* Terminal Window - Fun ASCII */
    .terminal-window {
      width: 280px;
      bottom: 220px;
      left: 320px;
    }

    .terminal-content {
      background: #1e1e1e;
      padding: 12px;
      font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
      font-size: 11px;
      line-height: 1.5;
      color: #00ff00;
      min-height: 100px;
    }

    .terminal-prompt {
      color: #00ff00;
    }

    .terminal-command {
      color: #fff;
    }

    .terminal-output {
      color: #888;
      margin-top: 4px;
    }

    .cursor-blink {
      display: inline-block;
      width: 8px;
      height: 14px;
      background: #00ff00;
      animation: blink 1s step-end infinite;
      vertical-align: middle;
      margin-left: 2px;
    }

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

    /* Photos Widget */
    .photos-window {
      width: 200px;
      top: 280px;
      left: 280px;
    }

    .photos-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      padding: 8px;
    }

    .photos-item {
      aspect-ratio: 1;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .photos-item:hover {
      transform: scale(1.05);
    }

    .photos-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .photo-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    .photo-placeholder.p1 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
    .photo-placeholder.p2 { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
    .photo-placeholder.p3 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
    .photo-placeholder.p4 { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); }

    /* ========== ENTRANCE ANIMATIONS ========== */
    .mini-window {
      opacity: 0;
      transform: translateY(30px) scale(0.9);
    }

    .mini-window.animate-in {
      animation: windowSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    @keyframes windowSlideIn {
      0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .finder-window.animate-in { animation-delay: 0.2s; }
    .notes-window.animate-in { animation-delay: 0.4s; }
    .spotify-window.animate-in { animation-delay: 0.6s; }
    .calendar-window.animate-in { animation-delay: 0.8s; }
    .safari-window.animate-in { animation-delay: 1.0s; }
    .terminal-window.animate-in { animation-delay: 1.2s; }
    .photos-window.animate-in { animation-delay: 1.4s; }

    /* Desktop app entrance */
    .desktop-app {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }

    .desktop-app.animate-in {
      animation: appSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      animation-delay: 0.3s;
    }

    @keyframes appSlideIn {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    /* Phone entrance animation */
    .phone {
      opacity: 0;
      transform: scale(0.9) translateY(30px);
    }

    .phone.animate-in {
      animation: phoneSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      animation-delay: 0.2s;
    }

    @keyframes phoneSlideIn {
      0% {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    /* Background name entrance */
    .bg-name {
      opacity: 0;
    }

    .bg-name.animate-in {
      animation: nameReveal 1.5s ease-out forwards;
    }

    @keyframes nameReveal {
      0% {
        opacity: 0;
        transform: scale(1.1);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Blobs entrance */
    .blob {
      opacity: 0;
      transform: scale(0);
    }

    .blob.animate-in {
      animation: blobGrow 1s ease-out forwards;
    }

    .blob-1.animate-in { animation-delay: 0s; }
    .blob-2.animate-in { animation-delay: 0.2s; }
    .blob-3.animate-in { animation-delay: 0.4s; }

    @keyframes blobGrow {
      0% {
        opacity: 0;
        transform: scale(0);
      }
      100% {
        opacity: 0.5;
        transform: scale(1);
      }
    }


    /* Hide old blobs - replaced with floating accents */
    .bg-blobs {
      display: none;
    }

    /* ========== MACOS DOCK ========== */
    .macos-dock {
      display: none; /* Hidden - replaced by top navigation */
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      align-items: flex-end;
      gap: 8px;
      padding: 6px 12px;
      background: rgba(255, 252, 250, 0.75);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.08),
        0 10px 50px rgba(0, 0, 0, 0.12),
        0 4px 20px rgba(0, 0, 0, 0.06);
      z-index: 1000;
    }

    body.dark-mode .macos-dock {
      background: rgba(40, 40, 50, 0.8);
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.1),
        0 10px 50px rgba(115, 103, 240, 0.2),
        0 4px 20px rgba(0, 0, 0, 0.3);
    }

    @media (max-width: 767px) {
      .macos-dock {
        display: none;
      }
    }

    .dock-item {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      border-radius: 14px;
      cursor: pointer;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.2s ease, box-shadow 0.2s ease;
      position: relative;
      background-color: #080808;
      border: none;
      padding: 0;
      color: inherit;
      text-decoration: none;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
      overflow: hidden;
    }

    .dock-item:hover {
      transform: translateY(-8px) scale(1.15);
      margin: 0 4px;
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 2rem 2rem rgba(0, 0, 0, 0.35),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .dock-item:active {
      transform: translateY(-4px) scale(1.1);
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.5),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.8),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.4),
        0 0.5rem 0.8rem rgba(0, 0, 0, 0.3);
    }

    /* Dock item tooltip */
    .dock-item::before {
      content: attr(data-name);
      position: absolute;
      top: -32px;
      left: 50%;
      transform: translateX(-50%) scale(0.8);
      background: rgba(30, 30, 30, 0.9);
      color: white;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .dock-item:hover::before {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }

    /* Active indicator dot */
    .dock-item.active::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 5px;
      height: 5px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 50%;
    }

    body.dark-mode .dock-item.active::after {
      background: rgba(255, 255, 255, 0.6);
    }

    /* Notification badge on dock item */
    .dock-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      min-width: 18px;
      height: 18px;
      background: #FF3B30;
      border-radius: 9px;
      color: white;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      border: 2px solid white;
    }

    body.dark-mode .dock-badge {
      border-color: #2c2c2e;
    }

    /* AI badge for JuliaLLM */
    .dock-badge-new {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 22px;
      height: 16px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border-radius: 8px;
      color: white;
      font-size: 9px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
      border: 2px solid white;
      letter-spacing: 0.5px;
    }

    body.dark-mode .dock-badge-new {
      border-color: #2c2c2e;
    }

    /* Loading bounce on hover - anticipation bounce */
    .dock-item.anticipate {
      animation: anticipateBounce 0.4s ease;
    }

    @keyframes anticipateBounce {
      0% { transform: translateY(0) scale(1); }
      30% { transform: translateY(2px) scale(0.95); }
      60% { transform: translateY(-4px) scale(1.05); }
      100% { transform: translateY(0) scale(1); }
    }

    /* Dock divider */
    .dock-divider {
      width: 1px;
      height: 40px;
      background: rgba(0, 0, 0, 0.1);
      margin: 0 4px;
    }

    body.dark-mode .dock-divider {
      background: rgba(255, 255, 255, 0.15);
    }

    /* Dock entrance animation */
    .macos-dock {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @keyframes dockSlideIn {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(100%);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
    }

    /* Bounce animation for dock items */
    @keyframes dockBounce {
      0%, 100% { transform: translateY(0); }
      25% { transform: translateY(-12px); }
      50% { transform: translateY(-6px); }
      75% { transform: translateY(-10px); }
    }

    .dock-item.bouncing {
      animation: dockBounce 0.5s ease;
    }

    /* ========== FLOATING ACCENT ELEMENTS ========== */
    .floating-accents {
      position: absolute;
      top: 0;
      left: 0;
      width: 1440px;
      height: 900px;
      pointer-events: none;
      z-index: 10;
      overflow: hidden;
    }

    @media (max-width: 767px) {
      .floating-accents {
        display: none;
      }
    }

    .floating-accent {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
      animation: accentFloat 8s ease-in-out infinite;
    }

    .floating-accent.animate-in {
      animation: accentEnter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                 accentFloat 8s ease-in-out infinite 0.8s;
    }

    @keyframes accentEnter {
      0% {
        opacity: 0;
        transform: scale(0) translateY(20px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes accentFloat {
      0%, 100% { transform: translateY(0) rotate(0deg) translate(var(--parallax-x, 0), var(--parallax-y, 0)); }
      50% { transform: translateY(-15px) rotate(5deg) translate(var(--parallax-x, 0), var(--parallax-y, 0)); }
    }

    /* iOS-style floating cards - hidden for minimal look */
    .card-accent {
      display: none;
    }

    body.dark-mode .card-accent {
      display: none;
    }

    .card-1, .card-2, .card-3, .card-4 {
      display: none;
    }

    .card-accent .card-icon {
      display: none;
    }

    .card-accent .card-text {
      display: none;
    }

    /* iOS-style subtle gradient orbs */
    .orb-accent {
      border-radius: 50%;
      filter: blur(40px);
      opacity: 0.4;
    }

    .orb-1 {
      width: 80px;
      height: 80px;
      background: var(--ios-blue);
      top: 12%;
      left: 18%;
    }

    .orb-2 {
      width: 60px;
      height: 60px;
      background: var(--ios-teal);
      bottom: 28%;
      right: 15%;
    }

    .orb-3 {
      width: 50px;
      height: 50px;
      background: var(--ios-green);
      top: 38%;
      right: 5%;
    }

    .orb-4 {
      width: 70px;
      height: 70px;
      background: var(--ios-purple);
      bottom: 12%;
      left: 15%;
    }

    /* Animated entrance delays for accents */
    .orb-1.animate-in { animation-delay: 0.2s, 8s; }
    .orb-2.animate-in { animation-delay: 0.4s, 8s; }
    .orb-3.animate-in { animation-delay: 0.6s, 8s; }
    .orb-4.animate-in { animation-delay: 0.8s, 8s; }
    .card-1.animate-in { animation-delay: 0.3s, 8s; }
    .card-2.animate-in { animation-delay: 0.5s, 8s; }
    .card-3.animate-in { animation-delay: 0.7s, 8s; }
    .card-4.animate-in { animation-delay: 0.9s, 8s; }

    /* Dark mode blobs - muted colors */
    body.dark-mode .blob-1 {
      background: linear-gradient(135deg, #3a4a7a 0%, #4a3a6a 100%);
      opacity: 0.4;
    }

    body.dark-mode .blob-2 {
      background: linear-gradient(135deg, #6a4a6a 0%, #5a3a4a 100%);
      opacity: 0.3;
    }

    body.dark-mode .blob-3 {
      background: linear-gradient(135deg, #2a4a5a 0%, #1a3a4a 100%);
      opacity: 0.35;
    }

    /* ========== MOBILE: iPhone Style ========== */
    .phone {
      width: 100%;
      max-width: 430px;
      height: 92vh;
      max-height: 920px;
      background: #000;
      border-radius: 54px;
      overflow: hidden;
      box-shadow:
        0 0 0 3px #1a1a1a,
        0 0 0 6px #0d0d0d,
        0 30px 100px rgba(0,0,0,0.6);
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* Status Bar */
    .status-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 54px;
      padding: 14px 28px 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      z-index: 5;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
    }

    .status-left {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .status-time {
      font-size: 15px;
      font-weight: 600;
    }

    .status-right {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .signal-bars {
      display: flex;
      align-items: flex-end;
      gap: 1px;
      height: 12px;
    }

    .signal-bar {
      width: 3px;
      background: #fff;
      border-radius: 1px;
    }

    .signal-bar:nth-child(1) { height: 4px; }
    .signal-bar:nth-child(2) { height: 6px; }
    .signal-bar:nth-child(3) { height: 8px; }
    .signal-bar:nth-child(4) { height: 10px; }

    .carrier {
      font-size: 14px;
      font-weight: 500;
      margin-left: 4px;
    }

    .wifi-icon {
      font-size: 14px;
    }

    .battery {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .battery-body {
      width: 22px;
      height: 11px;
      border: 1.5px solid #fff;
      border-radius: 3px;
      padding: 1px;
      position: relative;
    }

    .battery-body::after {
      content: '';
      position: absolute;
      right: -4px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      height: 5px;
      background: #fff;
      border-radius: 0 1px 1px 0;
    }

    .battery-level {
      height: 100%;
      width: 80%;
      background: #30D158;
      border-radius: 1px;
    }

    /* Dynamic Island */
    .dynamic-island {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 126px;
      height: 37px;
      background: #000;
      border-radius: 20px;
      z-index: 10;
    }

    .phone-header {
      background: rgba(28, 28, 30, 0.9);
      backdrop-filter: blur(20px);
      padding: 60px 16px 14px;
      text-align: center;
      border-bottom: 0.5px solid rgba(255,255,255,0.1);
    }

    .header-top {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 4px;
    }

    .contact-avatar {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #5AC8FA, #007AFF);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: white;
      font-weight: 600;
    }

    .contact-info {
      text-align: left;
    }

    .contact-name {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
    }

    .contact-status {
      color: #8e8e93;
      font-size: 12px;
    }

    .messages {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #000;
    }

    /* Timestamp */
    .timestamp {
      text-align: center;
      color: #8e8e93;
      font-size: 11px;
      margin: 8px 0;
      opacity: 0;
      animation: bubbleIn 0.3s ease forwards;
    }

    /* Read receipt */
    .read-receipt {
      align-self: flex-end;
      color: #8e8e93;
      font-size: 11px;
      margin-top: -4px;
      margin-bottom: 4px;
      opacity: 0;
      animation: bubbleIn 0.3s ease forwards;
    }

    .bubble {
      max-width: 85%;
      padding: 12px 18px;
      border-radius: 22px;
      font-size: 21px;
      line-height: 1.4;
      opacity: 0;
      transform: translateY(10px) scale(0.95);
      animation: bubbleIn 0.35s ease forwards;
      position: relative;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
      letter-spacing: -0.01em;
      -webkit-font-smoothing: antialiased;
    }

    /* Message tail for received messages - Apple style */
    .bubble.received::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: -7px;
      width: 12px;
      height: 18px;
      background: inherit;
      border-bottom-right-radius: 16px 14px;
    }

    .bubble.received::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: -10px;
      width: 10px;
      height: 18px;
      background: #f5f5f7;
      border-bottom-right-radius: 10px;
    }

    body.dark-mode .bubble.received::after {
      background: #1a1a1a;
    }

    /* Message tail for sent messages - Apple style */
    .bubble.sent::before {
      content: "";
      position: absolute;
      bottom: 0;
      right: -7px;
      width: 12px;
      height: 18px;
      background: inherit;
      border-bottom-left-radius: 16px 14px;
      transform: translateX(2px);
    }

    .bubble.sent::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: -10px;
      width: 10px;
      height: 18px;
      background: #fff;
      border-bottom-left-radius: 10px;
    }

    body.dark-mode .bubble.sent::after {
      background: #1a1a1a;
    }

    /* Bold emphasis text */
    .bubble strong {
      font-weight: 700;
    }

    /* Animated gradient text - like iMessage "Happy Birthday" effect */
    .bubble .emphasis {
      display: inline-block;
      font-weight: 700;
      background: linear-gradient(135deg, #E85D8C, #A030C0, #5B48D0, #2090D0);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradientShift 3s ease infinite;
    }

    @keyframes gradientShift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    /* Sparkle effect for special words */
    .bubble .sparkle {
      display: inline-block;
      font-weight: 700;
      position: relative;
    }

    .bubble .sparkle::before,
    .bubble .sparkle::after {
      content: '✨';
      position: absolute;
      font-size: 14px;
      animation: sparkleFloat 2s ease-in-out infinite;
    }

    .bubble .sparkle::before {
      top: -10px;
      left: -6px;
      animation-delay: 0s;
    }

    .bubble .sparkle::after {
      top: -8px;
      right: -10px;
      animation-delay: 1s;
    }

    @keyframes sparkleFloat {
      0%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
      50% { opacity: 1; transform: translateY(-5px) scale(1); }
    }

    /* Gentle pulse for important phrases */
    .bubble .pulse {
      display: inline-block;
      font-weight: 600;
      animation: gentlePulse 2s ease-in-out infinite;
    }

    @keyframes gentlePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.04); }
    }

    /* Emoji animations disabled - static emojis for clean iMessage look */
    .wave,
    .emoji-float,
    .emoji-spin,
    .emoji-pulse,
    .emoji-wiggle,
    .emoji-bounce,
    .bubble .bounce {
      display: inline-block;
      animation: none;
    }

    /* Hover emoji - disabled for clean iMessage look */
    .hover-emoji {
      display: inline;
      font-weight: inherit;
    }

    .bubble.received {
      background: #E9E9EB;
      color: #000;
      align-self: flex-start;
      border-bottom-left-radius: 4px;
    }

    body.dark-mode .bubble.received {
      background: #3A3A3C;
      color: #fff;
    }

    /* Typing indicator */
    .typing-indicator {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 12px 16px;
      background: #e9e9eb;
      border-radius: 22px;
      align-self: flex-start;
      opacity: 0;
      animation: fadeIn 0.3s ease forwards;
    }

    .typing-indicator .dot {
      width: 8px;
      height: 8px;
      background: #8e8e93;
      border-radius: 50%;
      animation: typingBounce 1.4s ease-in-out infinite;
    }

    .typing-indicator .dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .typing-indicator .dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes typingBounce {
      0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
      }
      30% {
        transform: translateY(-4px);
        opacity: 1;
      }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Staggered animation delays for initial messages */
    .messages .bubble:nth-child(2) { animation-delay: 0.3s; }
    .messages .bubble:nth-child(3) { animation-delay: 1.1s; }
    .messages .bubble:nth-child(4) { animation-delay: 1.9s; }
    .messages .bubble:nth-child(5) { animation-delay: 2.7s; }
    .messages .bubble:nth-child(6) { animation-delay: 3.5s; }

    .desktop-messages .bubble:nth-child(2) { animation-delay: 0.3s; }
    .desktop-messages .bubble:nth-child(3) { animation-delay: 1.1s; }
    .desktop-messages .bubble:nth-child(4) { animation-delay: 1.9s; }
    .desktop-messages .bubble:nth-child(5) { animation-delay: 2.7s; }
    .desktop-messages .bubble:nth-child(6) { animation-delay: 3.5s; }

    .bubble.sent {
      background: linear-gradient(180deg, #0B93F6 0%, #007AFF 100%);
      color: #fff;
      align-self: flex-end;
      border-bottom-right-radius: 4px;
    }

    /* Apple Maps Link Bubble - styled like real iMessage link preview */
    .maps-bubble {
      max-width: 320px;
      width: 320px;
      background: #2c2c2e;
      border-radius: 20px;
      overflow: hidden;
      align-self: flex-start;
      opacity: 0;
      transform: translateY(10px);
      animation: bubbleIn 0.35s ease forwards;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .maps-bubble:hover {
      transform: scale(1.02);
      box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
    }

    /* Highlight pulse animation */
    .maps-bubble.highlight {
      animation: bubbleIn 0.35s ease forwards, pulseHighlight 2s ease-in-out infinite 0.5s;
    }

    @keyframes pulseHighlight {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.2);
      }
      50% {
        box-shadow: 0 0 0 8px rgba(0, 122, 255, 0);
      }
    }

    .maps-preview {
      width: 100%;
      height: 500px;
      background-image: url('./Screenshot 2026-01-16 at 3.24.46 PM.png');
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
    }

    /* Tap indicator overlay */
    .maps-preview::after {
      content: 'Tap to explore';
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 122, 255, 0.9);
      color: #fff;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      backdrop-filter: blur(10px);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .maps-bubble.highlight .maps-preview::after {
      animation: fadeInOut 2s ease-in-out infinite;
    }

    @keyframes fadeInOut {
      0%, 100% { opacity: 0.9; }
      50% { opacity: 1; }
    }

    .maps-bubble:hover .maps-preview::after {
      opacity: 1;
    }

    .maps-route {
      display: none;
    }

    .maps-pin {
      display: none;
    }

    .maps-info {
      padding: 20px 16px 24px;
    }

    .maps-title {
      color: #fff;
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .maps-subtitle {
      color: #8e8e93;
      font-size: 14px;
      margin-bottom: 12px;
    }

    .maps-action {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #007AFF;
      font-size: 15px;
      font-weight: 500;
      margin-top: 8px;
    }

    .typing {
      display: flex;
      gap: 5px;
      padding: 14px 16px;
      background: #2c2c2e;
      border-radius: 18px;
      align-self: flex-start;
      border-bottom-left-radius: 6px;
    }

    .typing span {
      width: 8px;
      height: 8px;
      background: #636366;
      border-radius: 50%;
      animation: typing 1.4s infinite;
    }

    .typing span:nth-child(2) { animation-delay: 0.2s; }
    .typing span:nth-child(3) { animation-delay: 0.4s; }

    @keyframes typing {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
      30% { transform: translateY(-5px); opacity: 1; }
    }

    @keyframes bubbleIn {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Mobile input bar */
    .input-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px 28px;
      background: #1c1c1e;
      border-top: 0.5px solid rgba(255,255,255,0.1);
    }

    .input-field {
      flex: 1;
      background: #3a3a3c;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 22px;
      padding: 10px 16px;
      color: #fff;
      font-size: 17px;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      outline: none;
    }

    .input-field:focus {
      border-color: rgba(255,255,255,0.2);
      box-shadow: none;
    }

    .input-field::placeholder {
      color: #8e8e93;
    }

    .send-btn {
      width: 34px;
      height: 34px;
      background-color: #080808;
      border: none;
      border-radius: 50%;
      color: rgba(255, 255, 255, 0.9);
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .send-btn::before {
      content: "";
      position: absolute;
      left: -15%;
      right: -15%;
      bottom: 25%;
      top: -100%;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.12);
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .send-btn::after {
      content: "";
      position: absolute;
      left: 2%;
      right: 2%;
      top: 10%;
      bottom: 30%;
      border-radius: 100px;
      box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .send-btn:hover {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .send-btn:hover::before {
      transform: translateY(-5%);
    }

    .send-btn:hover::after {
      opacity: 0.4;
      transform: translateY(5%);
    }

    .send-btn:active {
      transform: translateY(2px);
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.5),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.8),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.4),
        0 0.5rem 0.8rem rgba(0, 0, 0, 0.3);
    }

    /* Mobile light mode */
    body:not(.dark-mode) .phone {
      background: #fff;
    }

    body:not(.dark-mode) .phone-header {
      background: rgba(242, 242, 247, 0.9);
      border-bottom-color: rgba(0,0,0,0.1);
    }

    body:not(.dark-mode) .contact-name {
      color: #1d1d1f;
    }

    body:not(.dark-mode) .messages {
      background: #fff;
    }

    body:not(.dark-mode) .bubble.received {
      background: #e9e9eb;
      color: #1d1d1f;
    }

    body:not(.dark-mode) .timestamp {
      color: #86868b;
    }

    body:not(.dark-mode) .input-bar {
      background: #f2f2f7;
      border-top-color: rgba(0,0,0,0.1);
    }

    body:not(.dark-mode) .input-field {
      background: #fff;
      color: #1d1d1f;
      border: 1px solid #d1d1d6;
    }

    body:not(.dark-mode) .input-field:focus {
      border-color: #d1d1d6;
      box-shadow: none;
    }

    body:not(.dark-mode) .choices {
      background: transparent;
    }

    body:not(.dark-mode) .status-bar {
      color: #1d1d1f;
    }

    body:not(.dark-mode) .signal-bar {
      background: #1d1d1f;
    }

    body:not(.dark-mode) .battery-body {
      border-color: #1d1d1f;
    }

    body:not(.dark-mode) .battery-body::after {
      background: #1d1d1f;
    }

    /* Mobile notification badge */
    .mobile-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 18px;
      height: 18px;
      background: #FF3B30;
      border-radius: 50%;
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #000;
    }

    body:not(.dark-mode) .mobile-badge {
      border-color: #fff;
    }

    .contact-avatar {
      position: relative;
    }

    .choices {
      padding: 12px 16px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: transparent;
      opacity: 0;
      animation: bubbleIn 0.4s ease forwards;
      animation-delay: 0.3s;
    }

    .choice-btn {
      background: transparent;
      border: 1.5px solid #007AFF;
      color: #007AFF;
      padding: 16px 28px;
      border-radius: 25px;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .choice-btn:hover {
      background: rgba(0, 122, 255, 0.1);
      transform: scale(1.02);
    }

    .choice-btn:active {
      transform: scale(0.98);
    }

    .choice-icon {
      font-size: 20px;
    }

    /* Scroll Hint */
    .scroll-hint {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 16px;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.5s ease, transform 0.5s ease;
      background: #f5f5f7;
    }

    body.dark-mode .scroll-hint {
      background: #000000;
    }

    .scroll-hint.active {
      opacity: 1;
      transform: translateY(0);
    }

    .scroll-hint:hover {
      opacity: 1;
    }

    .scroll-hint-text {
      font-size: 14px;
      color: #6e6e73;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    .scroll-hint.active .scroll-hint-text {
      animation: pulseGlow 2s ease-in-out infinite;
    }

    .scroll-hint-arrow {
      font-size: 20px;
      color: #6e6e73;
      animation: none;
    }

    .scroll-hint.active .scroll-hint-arrow {
      animation: scrollBounce 1.5s ease-in-out infinite;
    }

    @keyframes scrollBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(6px); }
    }

    @keyframes pulseGlow {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }

    body.dark-mode .scroll-hint-text,
    body.dark-mode .scroll-hint-arrow {
      color: #8e8e93;
    }

    body.dark-mode .scroll-hint.active .scroll-hint-text {
      animation: pulseGlow 2s ease-in-out infinite;
    }

    .hidden { display: none !important; }

    /* Hide desktop app on mobile (base style) */
    .desktop-app {
      display: none;
    }

    /* ========== DESKTOP: macOS Messages Light Mode ========== */
    @media (min-width: 768px) {

      .bg-blobs .blob {
        opacity: 0.3;
      }

      /* Dark mode desktop */
      body.dark-mode .desktop-sidebar {
        background: #252525;
        border-right-color: #3a3a3a;
      }

      body.dark-mode .sidebar-header {
        background: #1e1e1e;
      }

      body.dark-mode .sidebar-search {
        background: #3a3a3a;
        border-color: #3a3a3a;
        color: #fff;
      }

      body.dark-mode .conversation-item:not(.active) {
        background: transparent;
      }

      body.dark-mode .conversation-item:not(.active) .conversation-name {
        color: #fff;
      }

      body.dark-mode .conversation-item:not(.active) .conversation-preview {
        color: #8e8e93;
      }

      body.dark-mode .conversation-item:not(.active) .conversation-time {
        color: #8e8e93;
      }

      body.dark-mode .desktop-main {
        background: #1e1e1e;
      }

      body.dark-mode .desktop-header {
        background: #252525;
      }

      body.dark-mode .desktop-name {
        color: #fff;
      }

      body.dark-mode .desktop-messages {
        background: #1e1e1e;
      }

      body.dark-mode .desktop-messages .bubble.received {
        background: #3a3a3a;
        color: #fff;
      }

      body.dark-mode .desktop-messages .maps-bubble,
      body.dark-mode .desktop-messages .maps-info {
        background: #3a3a3a;
      }

      body.dark-mode .desktop-messages .maps-title {
        color: #fff;
      }

      body.dark-mode .desktop-choices {
        background: transparent;
      }

      body.dark-mode .desktop-messages .timestamp {
        color: #8e8e93;
      }

      body.dark-mode .desktop-input-bar {
        background: #252525;
      }

      body.dark-mode .desktop-input-field {
        background: #3a3a3a;
        border-color: #3a3a3a;
        color: #fff;
      }

      .phone {
        display: none;
      }

      .desktop-app {
        display: flex !important;
        width: 1150px;
        height: 720px;
        background: #f9f9fb;
        border-radius: 12px;
        overflow: hidden;
        /* Layered macOS-style shadow for depth */
        box-shadow:
          0 0 0 0.5px rgba(0, 0, 0, 0.08),
          0 2px 4px rgba(0, 0, 0, 0.04),
          0 8px 16px rgba(0, 0, 0, 0.06),
          0 24px 48px rgba(0, 0, 0, 0.1),
          0 48px 96px rgba(0, 0, 0, 0.08);
        position: absolute;
        /* Center in the scaled-wrapper for proper scale transform */
        top: 50%;
        left: 50%;
        /* Initial transform set in animation block - don't override here */
        transform-origin: center center;
        transition: box-shadow 0.3s ease, background 0.4s ease, border-radius 0.2s ease, transform 0.15s ease-out;
        z-index: 600;
        border: 0.5px solid rgba(0, 0, 0, 0.1);
        outline: none;
      }

      body.dark-mode .desktop-app {
        background: #1c1c1e;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
      }

      /* ChatGPT-style full-screen override */
      .desktop-app.chatgpt-style {
        width: 100vw !important;
        height: 100vh !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        z-index: 9999 !important;
        opacity: 1 !important;
      }

      .desktop-app:hover {
        box-shadow:
          0 0 0 0.5px rgba(0, 0, 0, 0.1),
          0 2px 4px rgba(0, 0, 0, 0.04),
          0 8px 16px rgba(0, 0, 0, 0.08),
          0 24px 48px rgba(0, 0, 0, 0.12),
          0 48px 96px rgba(0, 0, 0, 0.1);
      }

      .desktop-app.dragging {
        box-shadow:
          0 0 0 0.5px rgba(0, 0, 0, 0.12),
          0 4px 8px rgba(0, 0, 0, 0.06),
          0 16px 32px rgba(0, 0, 0, 0.1),
          0 32px 64px rgba(0, 0, 0, 0.14),
          0 64px 128px rgba(0, 0, 0, 0.12);
        cursor: grabbing;
      }

      /* Window minimize animation */
      .desktop-app.minimizing {
        animation: windowMinimize 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;
      }

      @keyframes windowMinimize {
        0% {
          transform: scale(1) translateY(0);
          opacity: 1;
        }
        100% {
          transform: scale(0.1) translateY(400px);
          opacity: 0;
        }
      }

      .desktop-app.minimized {
        transform: scale(0.1) translateY(400px);
        opacity: 0;
        pointer-events: none;
      }

      /* Window restore animation */
      .desktop-app.restoring {
        animation: windowRestore 0.4s cubic-bezier(0, 0, 0.2, 1) forwards;
      }

      @keyframes windowRestore {
        0% {
          transform: scale(0.1) translateY(400px);
          opacity: 0;
        }
        100% {
          transform: scale(1) translateY(0);
          opacity: 1;
        }
      }

      /* Window maximize animation */
      .desktop-app.maximized {
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
        top: 0 !important;
        left: 0 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      /* Bounce back animation when dragged off screen */
      .desktop-app.bounce-back {
        transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                    top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      }


      .desktop-sidebar {
        width: 280px;
        background: linear-gradient(180deg, #f6f6f8 0%, #ececee 100%);
        border-right: 0.5px solid rgba(0, 0, 0, 0.12);
        border-top: none;
        display: flex;
        flex-direction: column;
        transition: background 0.4s ease, border-color 0.4s ease;
        position: relative;
      }

      /* Subtle inner shadow for depth */
      .desktop-sidebar::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.02) 100%);
        pointer-events: none;
      }

      body.dark-mode .desktop-sidebar {
        background: rgba(44, 44, 46, 0.95);
        border-right-color: rgba(255, 255, 255, 0.1);
      }

      .sidebar-header {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(246, 246, 248, 0.9);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        cursor: default;
        user-select: none;
        transition: background 0.4s ease;
        border: none;
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
        margin: 0;
        position: relative;
      }

      body.dark-mode .sidebar-header {
        background: rgba(58, 58, 60, 0.9);
      }

      /* Drag hint tooltip */
      .drag-hint {
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.75);
        color: #fff;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }

      .desktop-app:not(.has-moved) .drag-hint {
        animation: hintPulse 3s ease-in-out infinite;
        animation-delay: 2s;
      }

      @keyframes hintPulse {
        0%, 100% { opacity: 0; }
        20%, 80% { opacity: 1; }
      }

      .traffic-lights {
        display: flex;
        gap: 8px;
        position: relative;
        z-index: 10;
      }

      .traffic-light {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        pointer-events: auto;
        z-index: 100;
        transition: transform 0.1s ease;
      }

      .traffic-light:hover {
        transform: scale(1.1);
      }

      .traffic-light:active {
        transform: scale(0.95);
      }

      .traffic-light.red { background: #ff5f57; }
      .traffic-light.yellow { background: #febc2e; }
      .traffic-light.green { background: #28c840; }

      .sidebar-search {
        margin: 8px 12px;
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 10px;
        border: 0.5px solid rgba(0, 0, 0, 0.06);
        color: #1d1d1f;
        font-size: 13px;
        width: calc(100% - 24px);
        transition: background 0.4s ease, color 0.4s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset;
      }

      body.dark-mode .sidebar-search {
        background: rgba(118, 118, 128, 0.24);
        color: #ffffff;
      }

      .sidebar-search::placeholder {
        color: rgba(60, 60, 67, 0.6);
      }

      body.dark-mode .sidebar-search::placeholder {
        color: rgba(235, 235, 245, 0.6);
      }

      .conversations-list {
        flex: 1;
        overflow-y: auto;
        padding: 4px 0;
      }

      .conversation-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 18px;
        cursor: pointer;
        border-radius: 12px;
        margin: 0 10px 6px;
        transition: background 0.15s ease;
        position: relative;
      }

      .conversation-item:hover:not(.active) {
        background: rgba(0, 0, 0, 0.05);
      }

      body.dark-mode .conversation-item:hover:not(.active) {
        background: rgba(255, 255, 255, 0.08);
      }

      .conversation-item.active {
        background: linear-gradient(180deg, #3898ff 0%, #007AFF 100%);
        box-shadow: 0 1px 3px rgba(0, 122, 255, 0.3);
      }

      .conversation-item.active .conversation-name,
      .conversation-item.active .conversation-preview,
      .conversation-item.active .conversation-time {
        color: #fff;
      }

      .conversation-item.active .conversation-preview {
        opacity: 0.9;
      }

      .conversation-item.active .conversation-time {
        opacity: 0.8;
      }

      /* Notification badge */
      .notification-badge {
        position: absolute;
        top: 8px;
        left: 48px;
        width: 20px;
        height: 20px;
        background: #FF3B30;
        border-radius: 50%;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #f5f5f7;
      }

      body.dark-mode .notification-badge {
        border-color: #252525;
      }

      .conversation-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 18px;
        flex-shrink: 0;
      }

      .conversation-avatar.blue { background: linear-gradient(135deg, var(--julia-pink), var(--julia-purple)); }
      .conversation-avatar.orange { background: linear-gradient(135deg, #B4D4FF, #A78BFA); }
      .conversation-avatar.green { background: linear-gradient(135deg, var(--julia-mint), #4ECDC4); }
      .conversation-avatar.purple { background: linear-gradient(135deg, var(--julia-purple), var(--julia-blue)); }

      .conversation-info {
        flex: 1;
        min-width: 0;
      }

      .conversation-name {
        color: #1d1d1f;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.01em;
        transition: color 0.4s ease;
      }

      body.dark-mode .conversation-name {
        color: #ffffff;
      }

      .conversation-preview {
        color: #86868b;
        font-size: 14px;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .conversation-time {
        color: #86868b;
        font-size: 12px;
        flex-shrink: 0;
      }

      .desktop-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--clay-bg);
        transition: background 0.4s ease;
        position: relative;
      }

      /* Subtle left edge shadow from sidebar */
      .desktop-main::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 8px;
        background: linear-gradient(90deg, rgba(54,89,125,0.04) 0%, transparent 100%);
        pointer-events: none;
        z-index: 1;
      }

      body.dark-mode .desktop-main {
        background: #000000;
      }

      .desktop-header {
        padding: 16px 20px;
        border-bottom: none;
        box-shadow: inset 0 -1px 0 var(--clay-bevel-bottom);
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(241, 245, 249, 0.85);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        cursor: grab;
        user-select: none;
        transition: background 0.4s ease, border-color 0.4s ease;
        position: relative;
        z-index: 2;
      }

      body.dark-mode .desktop-header {
        background: rgba(28, 28, 30, 0.95);
        border-bottom-color: rgba(255, 255, 255, 0.1);
      }

      .desktop-header:active {
        cursor: grabbing;
      }

      .desktop-avatar {
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, #5AC8FA 0%, #007AFF 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 16px;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }

      .desktop-name {
        color: #1d1d1f;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.02em;
        transition: color 0.4s ease;
      }

      body.dark-mode .desktop-name {
        color: #ffffff;
      }

      .desktop-messages {
        flex: 1;
        padding: 28px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 6px;
        background: linear-gradient(145deg, var(--clay-surface-raised) 0%, var(--clay-surface) 100%);
        transition: background 0.4s ease;
        border: none;
        outline: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .desktop-messages::-webkit-scrollbar {
        display: none;
      }

      body.dark-mode .desktop-messages {
        background: #000000;
      }

      .desktop-messages .timestamp {
        color: #86868b;
      }

      body.dark-mode .desktop-messages .timestamp {
        color: rgba(235, 235, 245, 0.6);
      }

      .desktop-messages .read-receipt {
        color: #86868b;
      }

      body.dark-mode .desktop-messages .read-receipt {
        color: rgba(235, 235, 245, 0.6);
      }

      .desktop-messages .bubble {
        font-size: 21px;
        padding: 12px 18px;
        max-width: 80%;
        border-radius: 22px;
        line-height: 1.4;
      }

      .desktop-messages .bubble.received {
        background: linear-gradient(180deg, #eeeeef 0%, #e5e5e7 100%);
        color: #1d1d1f;
        transition: background 0.4s ease, color 0.4s ease;
        box-shadow:
          0 0.5px 0 rgba(255, 255, 255, 0.8) inset,
          0 1px 2px rgba(0, 0, 0, 0.04);
      }

      body.dark-mode .desktop-messages .bubble.received {
        background: #2C2C2E;
        color: #ffffff;
      }

      .desktop-messages .bubble.received::before {
        background: #e5e5e7;
        transition: background 0.4s ease;
      }

      body.dark-mode .desktop-messages .bubble.received::before {
        background: #2C2C2E;
      }

      /* Emphasis text needs dark color on light background */
      .desktop-messages .bubble.received .emphasis {
        background: linear-gradient(135deg, #E85D8C, #A030C0, #5B48D0, #2090D0);
        background-size: 300% 300%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: gradientShift 3s ease infinite;
      }

      .desktop-messages .maps-bubble {
        max-width: 320px;
        background: linear-gradient(180deg, #eeeeef 0%, #e5e5e7 100%);
        transition: background 0.4s ease;
      }

      body.dark-mode .desktop-messages .maps-bubble {
        background: #2C2C2E;
      }

      .desktop-messages .maps-info {
        background: linear-gradient(180deg, #eeeeef 0%, #e5e5e7 100%);
        transition: background 0.4s ease;
      }

      body.dark-mode .desktop-messages .maps-info {
        background: #2C2C2E;
      }

      .desktop-messages .maps-title {
        color: #1d1d1f;
        transition: color 0.4s ease;
      }

      body.dark-mode .desktop-messages .maps-title {
        color: #ffffff;
      }

      .desktop-choices {
        padding: 20px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        background: transparent;
        border-radius: 12px;
        margin: 10px 16px;
        justify-content: center;
      }

      .desktop-choices .choice-btn {
        padding: 14px 28px;
        font-size: 17px;
        border-radius: 22px;
        background: #007AFF;
        color: #fff;
        font-weight: 600;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
        box-shadow: 0 2px 6px rgba(0, 122, 255, 0.15);
        animation: iosPulse 2.5s ease-in-out infinite;
        letter-spacing: -0.2px;
      }

      @keyframes iosPulse {
        0%, 100% {
          box-shadow: 0 2px 6px rgba(0, 122, 255, 0.15);
          transform: scale(1);
        }
        50% {
          box-shadow: 0 3px 10px rgba(0, 122, 255, 0.2);
          transform: scale(1.02);
        }
      }

      .desktop-choices .choice-btn:hover {
        background: #0a84ff;
        color: #fff;
        transform: scale(1.08);
        animation: none;
      }

      /* Desktop input bar */
      .desktop-input-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: rgba(246, 246, 248, 0.9);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-top: 0.5px solid rgba(0, 0, 0, 0.08);
        transition: background 0.4s ease, border-color 0.4s ease;
      }

      body.dark-mode .desktop-input-bar {
        background: rgba(28, 28, 30, 0.95);
        border-top-color: rgba(255, 255, 255, 0.1);
      }

      .desktop-input-field {
        flex: 1;
        background: rgba(0, 0, 0, 0.04);
        border: 0.5px solid rgba(0, 0, 0, 0.08);
        border-radius: 22px;
        padding: 10px 16px;
        color: #1d1d1f;
        font-size: 17px;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
        outline: none;
        transition: background 0.2s ease, border-color 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset;
      }

      body.dark-mode .desktop-input-field {
        background: rgba(118, 118, 128, 0.24);
        color: #ffffff;
      }

      .desktop-input-field:focus {
        background: rgba(118, 118, 128, 0.18);
      }

      body.dark-mode .desktop-input-field:focus {
        background: rgba(118, 118, 128, 0.32);
      }

      .desktop-input-field::placeholder {
        color: rgba(60, 60, 67, 0.6);
        font-weight: 400;
      }

      body.dark-mode .desktop-input-field::placeholder {
        color: rgba(235, 235, 245, 0.6);
      }

      .desktop-send-btn {
        width: 34px;
        height: 34px;
        background: linear-gradient(180deg, #3898ff 0%, #007AFF 100%);
        border: none;
        border-radius: 50%;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
        flex-shrink: 0;
        box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
      }

      .desktop-send-btn:hover {
        background: linear-gradient(180deg, #2d8af0 0%, #0066d6 100%);
        box-shadow: 0 3px 8px rgba(0, 122, 255, 0.4);
      }

      .desktop-send-btn:active {
        transform: scale(0.92);
      }
    }

    @media (max-width: 767px) {
      .phone {
        border-radius: 0;
        max-width: 100%;
        height: 100vh;
        max-height: none;
        box-shadow: none;
      }

      .dynamic-island {
        display: none;
      }

      .status-bar {
        display: none;
      }

      .phone-header {
        padding-top: 50px;
      }
    }

    /* ========== CLAUDE FLOW BANNER ========== */
    .claude-flow-banner {
      width: 100%;
      height: 100%;
      background: #ffffff;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    body.dark-mode .claude-flow-banner {
      background: #1a1a1a;
    }

    .claude-flow-banner .gradient-bg {
      position: absolute;
      inset: 0;
      overflow: hidden;
      filter: blur(50px);
      opacity: 0.85;
    }

    .claude-flow-banner .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(20px);
    }

    .claude-flow-banner .blob-1 {
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, #d97757 0%, transparent 70%);
      top: -100px;
      left: -50px;
      animation: cf-blob-float-1 8s ease-in-out infinite;
    }

    .claude-flow-banner .blob-2 {
      width: 250px;
      height: 250px;
      background: radial-gradient(circle, #e8a090 0%, transparent 70%);
      bottom: -80px;
      left: 20%;
      animation: cf-blob-float-2 10s ease-in-out infinite;
    }

    .claude-flow-banner .blob-3 {
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, #4a9eff 0%, transparent 70%);
      top: -60px;
      right: -50px;
      animation: cf-blob-float-3 9s ease-in-out infinite;
    }

    .claude-flow-banner .blob-4 {
      width: 220px;
      height: 220px;
      background: radial-gradient(circle, #7bb8ff 0%, transparent 70%);
      bottom: -100px;
      right: 15%;
      animation: cf-blob-float-4 11s ease-in-out infinite;
    }

    .claude-flow-banner .blob-5 {
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(217, 119, 87, 0.4) 0%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: cf-blob-float-center 7s ease-in-out infinite;
    }

    @keyframes cf-blob-float-1 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30px, 20px) scale(1.1); }
      66% { transform: translate(-20px, 30px) scale(0.95); }
    }

    @keyframes cf-blob-float-2 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(-25px, -20px) scale(1.05); }
      66% { transform: translate(35px, -10px) scale(1.1); }
    }

    @keyframes cf-blob-float-3 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(-30px, 25px) scale(1.1); }
      66% { transform: translate(20px, 15px) scale(0.95); }
    }

    @keyframes cf-blob-float-4 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(25px, -30px) scale(1.05); }
      66% { transform: translate(-15px, -20px) scale(1.1); }
    }

    @keyframes cf-blob-float-center {
      0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
      50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
    }

    .claude-flow-banner .banner-content {
      position: absolute;
      top: 50%;
      left: 44%;
      transform: translate(-50%, -50%);
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 32px;
    }

    /* Static content - no animations */
    .claude-flow-banner .claude-logo {
      width: 200px;
      height: 200px;
    }

    .claude-flow-banner .claude-wordmark {
      font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
      font-size: 180px;
      font-weight: 400;
      letter-spacing: -4px;
      color: #1a1a1a;
    }

    body.dark-mode .claude-flow-banner .claude-wordmark {
      color: #ffffff;
    }

    .claude-flow-banner .x-mark {
      font-size: 120px;
      font-weight: 300;
      color: rgba(0, 0, 0, 0.32);
    }

    body.dark-mode .claude-flow-banner .x-mark {
      color: rgba(255, 255, 255, 0.32);
    }

    .claude-flow-banner .flow-star {
      width: 80px;
      height: 80px;
      margin-right: -8px;
      flex-shrink: 0;
    }

    body.dark-mode .claude-flow-banner .flow-star {
      fill: #e0e0e0;
    }

    .claude-flow-banner .flow-text {
      font-family: 'DM Sans', 'Inter', 'Helvetica Neue', sans-serif;
      font-size: 160px;
      font-weight: 500;
      letter-spacing: -4px;
      font-style: italic;
      color: #2a2a2a;
    }

    body.dark-mode .claude-flow-banner .flow-text {
      color: #e0e0e0;
    }

    /* Animated gradient background */
    .claude-flow-banner .gradient-animated {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
        rgba(217, 119, 87, 0.35) 0%,
        rgba(74, 158, 255, 0.25) 25%,
        rgba(232, 160, 144, 0.3) 50%,
        rgba(123, 184, 255, 0.25) 75%,
        rgba(217, 119, 87, 0.35) 100%);
      background-size: 400% 400%;
      animation: cf-gradient-shift 8s ease infinite;
    }

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

    .claude-flow-banner .noise {
      position: absolute;
      inset: 0;
      opacity: 0.02;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    /* ========== FINQUANTUM BANNER - Simple Branding ========== */
    .finquantum-banner {
      width: 100%;
      height: 100%;
      background: linear-gradient(145deg, #1E293B, #2C4A66);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    body.dark-mode .finquantum-banner {
      background: linear-gradient(145deg, #1E293B, #36597D);
    }

    /* Hide extra elements for simple design */
    .finquantum-banner .gradient-bg,
    .finquantum-banner .grid-pattern,
    .finquantum-banner .accent-line,
    .finquantum-banner .chart-icon,
    .finquantum-banner .noise {
      display: none;
    }

    .finquantum-banner .banner-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .finquantum-banner .logo-text {
      font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 140px;
      font-weight: 800;
      letter-spacing: -4px;
      color: #ffffff;
    }

    .finquantum-banner .logo-text .fin,
    .finquantum-banner .logo-text .quantum {
      color: #ffffff;
    }

    .finquantum-banner .tagline {
      font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 32px;
      font-weight: 600;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.95);
    }

    /* Preview sizing */
    .stacking-window-preview.finquantum-banner .banner-content {
      transform: scale(0.5);
    }


    /* Floating Pill Navigation */
    .macos-nav-bar {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      height: 44px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.5);
      box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      border-radius: 22px;
      display: flex;
      align-items: center;
      padding: 0 6px;
      z-index: 1999;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
      gap: 2px;
    }

    .macos-nav-left,
    .macos-nav-right {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .macos-nav-item {
      height: 32px;
      padding: 0 11px;
      border-radius: 100px;
      background-color: #080808;
      border: 0;
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      text-decoration: none;
      letter-spacing: -0.01em;
      box-shadow:
        inset 0 0.1rem 0.3rem rgba(255, 255, 255, 0.3),
        inset 0 -0.05rem 0.1rem rgba(0, 0, 0, 0.7),
        inset 0 -0.15rem 0.3rem rgba(255, 255, 255, 0.5),
        0 0.3rem 0.5rem rgba(0, 0, 0, 0.3),
        0 0.15rem 0.3rem -0.1rem rgba(0, 0, 0, 0.8);
    }

    .macos-nav-item.brand {
      font-weight: 600;
      color: rgba(255, 255, 255, 0.85);
      padding: 0 13px;
    }

    .macos-nav-item:not(.brand):hover {
      box-shadow:
        inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
        inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
        inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
        0 2rem 2rem rgba(0, 0, 0, 0.3),
        0 0.8rem 0.8rem -0.4rem rgba(0, 0, 0, 0.8);
    }

    .macos-nav-item:not(.brand):active {
      transform: translateY(2px);
    }

    .macos-nav-item.ask-julia {
      gap: 5px;
    }

    .ask-julia-icon {
      font-size: 12px;
    }

    /* Divider between brand and nav items */
    .macos-nav-left::after {
      content: '';
      width: 1px;
      height: 20px;
      background: rgba(0, 0, 0, 0.1);
      margin: 0 6px;
    }

    /* Move project nav to left side when LLM sidebar is open */
    .project-nav.shifted-left {
      right: auto;
      left: 20px;
    }

    /* Mobile */
    @media (max-width: 768px) {
      /* Hide floating assets toggle on mobile */
      .assets-toggle,
      .floating-assets-container {
        display: none !important;
      }

      .macos-nav-bar {
        top: 12px;
        height: 40px;
        padding: 0 4px;
        border-radius: 20px;
        max-width: calc(100% - 24px);
      }

      .macos-nav-item {
        font-size: 13px;
        padding: 0 8px;
        height: 30px;
        border-radius: 15px;
      }

      .macos-nav-item.brand {
        display: none;
      }

      .macos-nav-left::after {
        display: none;
      }
    }

    /* ========== SEE PROJECTS BUTTON - pearl style ========== */
    .see-projects-btn {
      display: inline-block;
      margin-top: 8px;
      padding: 10px 17px;
      background-color: #080808;
      color: rgba(255, 255, 255, 0.7);
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      font-size: 17px;
      font-weight: 500;
      text-decoration: none;
      border-radius: 100px;
      align-self: flex-start;
      transition: all 0.2s ease;
      opacity: 0;
      animation: bubbleIn 0.35s ease forwards;
      animation-delay: 1.2s;
      pointer-events: auto;
      position: relative;
      z-index: 100;
      cursor: pointer;
      overflow: hidden;
      box-shadow:
        inset 0 0.2rem 0.6rem rgba(255, 255, 255, 0.3),
        inset 0 -0.05rem 0.15rem rgba(0, 0, 0, 0.7),
        inset 0 -0.25rem 0.6rem rgba(255, 255, 255, 0.5),
        0 1.5rem 1.5rem rgba(0, 0, 0, 0.3),
        0 0.5rem 0.5rem -0.3rem rgba(0, 0, 0, 0.8);
    }

    body.dark-mode .see-projects-btn {
      background-color: #080808;
      color: rgba(255, 255, 255, 0.7);
    }

    .see-projects-btn:hover {
      box-shadow:
        inset 0 0.2rem 0.4rem rgba(255, 255, 255, 0.4),
        inset 0 -0.05rem 0.15rem rgba(0, 0, 0, 0.7),
        inset 0 -0.25rem 0.6rem rgba(255, 255, 255, 0.7),
        0 1.5rem 1.5rem rgba(0, 0, 0, 0.3),
        0 0.5rem 0.5rem -0.3rem rgba(0, 0, 0, 0.8);
      transform: translateY(-2px);
    }

    body.dark-mode .see-projects-btn:hover {
      box-shadow:
        inset 0 0.2rem 0.4rem rgba(255, 255, 255, 0.4),
        inset 0 -0.05rem 0.15rem rgba(0, 0, 0, 0.7),
        inset 0 -0.25rem 0.6rem rgba(255, 255, 255, 0.7),
        0 1.5rem 1.5rem rgba(0, 0, 0, 0.3),
        0 0.5rem 0.5rem -0.3rem rgba(0, 0, 0, 0.8);
    }

    .see-projects-btn:active {
      transform: translateY(4px);
    }

}

/* ========== JULIALLM SIDEBAR - STANDALONE STYLES (Outside media queries) ========== */
/* These styles ensure the sidebar works on all screen sizes */

#juliaLlmSidebar {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  width: 380px !important;
  max-width: calc(100vw - 32px) !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  z-index: 999999999 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(calc(100% + 32px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif !important;
}

#juliaLlmSidebar.open {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  #juliaLlmSidebar {
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ========== MOBILE: PROJECT CARDS AS STAGGERED MESSAGES ========== */
@media (max-width: 768px) {
  /* Stack cards vertically, single column */
  .desktop-app.chatgpt-style .project-preview-cards {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .desktop-app.chatgpt-style .project-preview-cards .project-preview-card {
    flex: none !important;
    width: 100% !important;
    min-height: auto !important;
  }

  /* Show footer info always on mobile — no hover needed */
  .desktop-app.chatgpt-style .project-preview-card .card-preview-footer {
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
    background: transparent !important;
    padding: 10px 14px 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    transition: none !important;
  }

  .desktop-app.chatgpt-style .project-preview-card .card-preview-title {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--clay-text-secondary) !important;
  }

  .desktop-app.chatgpt-style .project-preview-card .card-preview-desc {
    display: none !important;
  }

  .desktop-app.chatgpt-style .project-preview-card .card-preview-meta {
    display: none !important;
  }

  .desktop-app.chatgpt-style .project-preview-card .card-preview-cta {
    display: none !important;
  }

  .desktop-app.chatgpt-style .project-preview-card .card-preview-arrow {
    display: inline-block !important;
    margin-left: auto !important;
  }

  /* Kill ALL hover effects on mobile — direct tap to open */
  .desktop-app.chatgpt-style .project-preview-card:hover {
    transform: none !important;
    box-shadow:
      3px 3px 8px rgba(0, 0, 0, 0.15),
      -3px -3px 8px rgba(255, 255, 255, 0.5) !important;
    background: linear-gradient(145deg, var(--clay-surface-raised), var(--clay-surface)) !important;
  }

  /* Hide hover scroll preview on mobile */
  .desktop-app.chatgpt-style .project-preview-card .hover-scroll-preview {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Keep static preview visible on hover (don't fade out) */
  .desktop-app.chatgpt-style .project-preview-card:hover .stacking-window-preview {
    opacity: 1 !important;
    transition-delay: 0s !important;
  }

  /* Keep footer visible on hover */
  .desktop-app.chatgpt-style .project-preview-card:hover .card-preview-footer {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }

  /* Keep arrow steady on hover */
  .desktop-app.chatgpt-style .project-preview-card:hover .card-preview-arrow {
    transform: none !important;
  }

  /* Disable card GPT overlay messages on hover */
  .desktop-app.chatgpt-style .project-preview-card:not(:hover) .card-gpt-user-msg,
  .desktop-app.chatgpt-style .project-preview-card:not(:hover) .card-gpt-response,
  .desktop-app.chatgpt-style .project-preview-card:hover .card-gpt-user-msg,
  .desktop-app.chatgpt-style .project-preview-card:hover .card-gpt-response {
    display: none !important;
  }

  /* Card preview container — uniform height on mobile */
  .desktop-app.chatgpt-style .card-preview-container {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }

  /* Force all cards to same total height */
  .desktop-app.chatgpt-style .project-preview-card {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Reels AI: ensure preview fills and logo doesn't get cut */
  .desktop-app.chatgpt-style .card-preview-container .reels-ai-preview {
    overflow: hidden !important;
  }
  .reels-ig-logo {
    width: 56px !important;
    height: 56px !important;
  }
  .reels-phone-frame {
    width: 48px !important;
    height: 98px !important;
    border-radius: 10px !important;
  }
  .reels-phase-phones .reels-phone-frame {
    width: 80px !important;
    height: 164px !important;
    border-radius: 14px !important;
  }
  .reels-phase-phones .reels-phone-slot:first-child {
    transform: translateY(-60px) rotate(180deg) !important;
  }

  /* Stagger animation — each card slides in like a sent message */
  @keyframes messageSend {
    0% {
      opacity: 0;
      transform: translateY(20px) scale(0.97);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .desktop-app.chatgpt-style .project-preview-card {
    animation: messageSend 0.4s cubic-bezier(0.34, 1.3, 0.64, 1) both !important;
  }

  .desktop-app.chatgpt-style .project-preview-card:nth-child(1) {
    animation-delay: 0.1s !important;
  }
  .desktop-app.chatgpt-style .project-preview-card:nth-child(2) {
    animation-delay: 0.35s !important;
  }
  .desktop-app.chatgpt-style .project-preview-card:nth-child(3) {
    animation-delay: 0.6s !important;
  }
  .desktop-app.chatgpt-style .project-preview-card:nth-child(4) {
    animation-delay: 0.85s !important;
  }
  .desktop-app.chatgpt-style .project-preview-card:nth-child(5) {
    animation-delay: 1.1s !important;
  }
}

/* ========== CUSTOM CURSOR — White dot ========== */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.custom-cursor.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Hide custom cursor on touch devices */
@media (hover: none) {
  .custom-cursor {
    display: none !important;
  }

  /* Disable project card hover effects on touch devices */
  .desktop-app.chatgpt-style .project-preview-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .desktop-app.chatgpt-style .project-preview-card:hover .stacking-window-preview {
    transform: none !important;
  }

  .desktop-app.chatgpt-style .project-preview-card:hover .card-preview-footer {
    opacity: unset !important;
    transform: none !important;
  }

  .desktop-app.chatgpt-style .project-preview-card:hover .card-preview-arrow {
    opacity: 0 !important;
  }

  .desktop-app.chatgpt-style .project-preview-card:hover .hover-scroll-preview {
    opacity: 0 !important;
  }

  .desktop-app.chatgpt-style .project-preview-card:hover .card-gpt-user-msg,
  .desktop-app.chatgpt-style .project-preview-card:hover .card-gpt-response {
    opacity: unset !important;
  }

  .desktop-app.chatgpt-style .gpt-projects.hscroll-active .project-preview-card:hover {
    transform: none !important;
  }
}