:root {
      /* --- Light Mode Palette --- */
      --bg-primary: linear-gradient(135deg, #FFF5F0 0%, #F0FAFF 50%, #F0FFF4 100%);
      --header-offset: 88px;
      --panel-viewport: 100vh;
      --panel-viewport: 100dvh;
      
      /* Panels */
      --bg-panel-1:  linear-gradient(180deg, #FFE4D6 0%, #FFF0E8 100%);
      --bg-panel-2:  linear-gradient(180deg, #E0F4FF 0%, #F0FAFF 100%);
      --bg-panel-3:  linear-gradient(180deg, #F0FFF4 0%, #E8FFF0 100%);
      --bg-panel-4:  linear-gradient(180deg, #FFF8E0 0%, #FFFAF0 100%);
      --bg-panel-5:  linear-gradient(180deg, #FFE8F0 0%, #FFF0F5 100%);
      --bg-panel-6:  linear-gradient(180deg, #E8F0FF 0%, #F0F5FF 100%);
      --bg-panel-7:  linear-gradient(180deg, #F0FFE8 0%, #F8FFF0 100%);
      --bg-panel-8:  linear-gradient(180deg, #FFE0E8 0%, #FFF0F0 100%);
      --bg-panel-9:  linear-gradient(180deg, #E0FFF4 0%, #F0FFFA 100%);
      --bg-panel-10: linear-gradient(180deg, #FFF0D6 0%, #FFFAF0 100%);
      --bg-panel-11: linear-gradient(180deg, #F0E8FF 0%, #F8F0FF 100%);
      --bg-panel-12: linear-gradient(180deg, #FFE8E0 0%, #FFF5F0 100%);
      --bg-panel-13: linear-gradient(180deg, #E8FFF0 0%, #F0FFF5 100%);
      --bg-panel-14: linear-gradient(180deg, #E0F0FF 0%, #F0F8FF 100%);

      /* Text & Accents */
      --text-primary:   #1A1A2E;
      --text-secondary: #4A4A6A;
      --text-muted:     #8A8AAA;
      
      --accent-coral:   #FF6B6B;
      --accent-sky:     #4ECDC4;
      --accent-mint:    #26D0A5;
      --accent-sun:     #FFB84D;
      --accent-violet:  #9B5DE5;

      /* UI Elements */
      --card-bg:        rgba(255, 255, 255, 0.7);
      --card-border:    rgba(255, 255, 255, 0.9);
      --card-shadow:    0 8px 32px rgba(255, 107, 107, 0.15), 0 4px 16px rgba(78, 205, 196, 0.1);
      
      --glass-bg:       rgba(255, 255, 255, 0.25);
      --glass-border:   rgba(255, 255, 255, 0.4);
      
      --glow-primary:   0 0 40px rgba(255, 107, 107, 0.3);
      --glow-secondary: 0 0 40px rgba(78, 205, 196, 0.3);
      
      --nav-bg:         rgba(255, 255, 255, 0.9);
      --nav-shadow:     0 4px 24px rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] {
      /* --- Dark Mode Palette --- */
      --bg-primary: linear-gradient(135deg, #0A0A1A 0%, #1A1A3A 50%, #0A1A2A 100%);

      /* Panels */
      --bg-panel-1:  linear-gradient(180deg, #1A0A2E 0%, #2A1A4E 100%);
      --bg-panel-2:  linear-gradient(180deg, #0A1A3E 0%, #1A2A5E 100%);
      --bg-panel-3:  linear-gradient(180deg, #0A2A2E 0%, #1A3A4E 100%);
      --bg-panel-4:  linear-gradient(180deg, #2A1A0A 0%, #3A2A1A 100%);
      --bg-panel-5:  linear-gradient(180deg, #2A0A1A 0%, #4A1A3A 100%);
      --bg-panel-6:  linear-gradient(180deg, #1A1A3E 0%, #2A2A5E 100%);
      --bg-panel-7:  linear-gradient(180deg, #0A2A1A 0%, #1A3A2A 100%);
      --bg-panel-8:  linear-gradient(180deg, #2A0A0A 0%, #3A1A1A 100%);
      --bg-panel-9:  linear-gradient(180deg, #0A2A2A 0%, #1A4A4A 100%);
      --bg-panel-10: linear-gradient(180deg, #2A2A0A 0%, #3A3A1A 100%);
      --bg-panel-11: linear-gradient(180deg, #1A0A2A 0%, #2A1A4A 100%);
      --bg-panel-12: linear-gradient(180deg, #2A1A1A 0%, #3A2A2A 100%);
      --bg-panel-13: linear-gradient(180deg, #1A2A1A 0%, #2A3A2A 100%);
      --bg-panel-14: linear-gradient(180deg, #0A1A2A 0%, #1A2A4A 100%);

      /* Text & Accents */
      --text-primary:   #F0F0FF;
      --text-secondary: #B0B0D0;
      --text-muted:     #7070A0;
      
      --accent-coral:   #FF7B7B;
      --accent-sky:     #5EDDD4;
      --accent-mint:    #36E0B5;
      --accent-sun:     #FFCA6D;
      --accent-violet:  #AB6DF5;

      /* UI Elements */
      --card-bg:        rgba(30, 30, 60, 0.7);
      --card-border:    rgba(100, 100, 150, 0.3);
      --card-shadow:    0 8px 32px rgba(155, 93, 229, 0.2), 0 4px 16px rgba(78, 205, 196, 0.15);
      
      --glass-bg:       rgba(50, 50, 100, 0.25);
      --glass-border:   rgba(100, 100, 150, 0.3);
      
      --glow-primary:   0 0 60px rgba(155, 93, 229, 0.4);
      --glow-secondary: 0 0 60px rgba(78, 205, 196, 0.3);
      
      --nav-bg:         rgba(20, 20, 40, 0.95);
      --nav-shadow:     0 4px 24px rgba(0, 0, 0, 0.4);
    }

    /* --- Reset & Base --- */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-snap-type: y mandatory;
      overflow-x: hidden;
      scroll-padding-top: 0;
      scroll-padding-bottom: var(--mobile-bottom-bar-height);
    }

    body {
      font-family: 'Space Grotesk', sans-serif;
      background: var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.6;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      overflow-x: hidden;
      padding-bottom: var(--mobile-bottom-bar-height);
    }

    h1, h2, h3 {
      font-family: 'Instrument Serif', serif;
      font-weight: 400;
    }

    /* --- Panel Styles --- */
    .panel {
      height: var(--panel-viewport);
      min-height: var(--panel-viewport);
      max-height: var(--panel-viewport);
      width: 100%;
      padding-top: calc(var(--header-offset) + 24px);
      padding-bottom: 24px;
      padding-left: 24px;
      padding-right: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      overflow: hidden;
      transition: background 0.5s ease;
    }

    .panel-content {
      max-width: 600px;
      width: 100%;
      z-index: 1;
    }

    .panel h1 {
      font-size: clamp(2.5rem, 8vw, 4rem);
      margin-bottom: 1.5rem;
      line-height: 1.1;
      background: linear-gradient(135deg, var(--accent-coral) 0%, var(--accent-violet) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .panel h2 {
      font-size: clamp(1.75rem, 5vw, 2.5rem);
      margin-bottom: 1rem;
      color: var(--text-primary);
    }

    .panel h3 {
      font-size: clamp(1.25rem, 3vw, 1.5rem);
      margin-bottom: 0.75rem;
      color: var(--text-secondary);
    }

    .panel p {
      font-size: 1rem;
      color: var(--text-secondary);
      margin-bottom: 1.5rem;
    }

    .panel-number {
      position: absolute;
      top: calc(var(--header-offset) + 24px);
      left: 24px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      opacity: 0.6;
    }

    /* Panel ID Assignments */
    #panel-1  { background: var(--bg-panel-1); }
    #panel-2  { background: var(--bg-panel-2); }
    #panel-3  { background: var(--bg-panel-3); }
    #panel-4  { background: var(--bg-panel-4); }
    #panel-5  { background: var(--bg-panel-5); }
    #panel-6  { background: var(--bg-panel-6); }
    #panel-7  { background: var(--bg-panel-7); }
    #panel-8  { background: var(--bg-panel-8); }
    #panel-9  { background: var(--bg-panel-9); }
    #panel-10 { background: var(--bg-panel-10); }
    #panel-11 { background: var(--bg-panel-11); }
    #panel-12 { background: var(--bg-panel-12); }
    #panel-13 { background: var(--bg-panel-13); }
    #panel-14 { background: var(--bg-panel-14); }

    /* --- Floating Navigation --- */
    .nav-floating {
      position: fixed;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 1000;
      padding: 16px 8px;
      background: var(--nav-bg);
      border-radius: 24px;
      backdrop-filter: blur(20px);
      box-shadow: var(--nav-shadow);
      transition: all 0.3s ease;
    }

    .nav-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--text-muted);
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
      padding: 0;
    }

    .nav-dot.active {
      background: var(--accent-coral);
      box-shadow: 0 0 12px var(--accent-coral);
      transform: scale(1.3);
    }

    .nav-dot:hover {
      background: var(--accent-sky);
      transform: scale(1.2);
    }
	/* --- Navigation Controls --- */
	    .nav-arrows {
	      position: fixed;
	      left: 50%;
	      bottom: 24px;
	      transform: translateX(-50%);
	      display: flex;
	      gap: 16px;
	      z-index: 1000;
	    }

	    .nav-arrow {
	      width: 48px;
	      height: 48px;
	      border-radius: 50%;
	      background: var(--nav-bg);
	      backdrop-filter: blur(20px);
	      border: 1px solid var(--glass-border);
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      cursor: pointer;
	      transition: all 0.3s ease;
	      box-shadow: var(--nav-shadow);
	      color: var(--text-primary);
	      font-size: 1.25rem;
	    }

	    .nav-arrow:hover {
	      transform: scale(1.1);
	      box-shadow: var(--glow-primary);
	    }

	    .nav-arrow:active {
	      transform: scale(0.95);
	    }

	    /* --- Cards --- */
	    .card {
	      background: var(--card-bg);
	      border: 1px solid var(--card-border);
	      border-radius: 20px;
	      padding: 24px;
	      backdrop-filter: blur(20px);
	      box-shadow: var(--card-shadow);
	      transition: all 0.3s ease;
	      margin-bottom: 16px;
	    }

	    .card:hover {
	      transform: translateY(-4px);
	      box-shadow: var(--glow-primary);
	    }

	    .card-grid {
	      display: grid;
	      grid-template-columns: repeat(2, 1fr);
	      gap: 12px;
	      margin-top: 20px;
	    }

	    .card-small {
	      background: var(--card-bg);
	      border: 1px solid var(--card-border);
	      border-radius: 16px;
	      padding: 16px;
	      backdrop-filter: blur(20px);
	      text-align: center;
	      transition: all 0.3s ease;
	      cursor: pointer;
	    }

	    .card-small:hover {
	      transform: scale(1.02);
	      box-shadow: var(--glow-secondary);
	    }

	    .card-small h4 {
	      font-size: 0.875rem;
	      font-weight: 600;
	      margin-bottom: 4px;
	      color: var(--text-primary);
	    }

	    .card-small p {
	      font-size: 0.75rem;
	      margin-bottom: 0;
	      color: var(--text-muted);
	    }

	    /* --- Model Cards --- */
	    .model-card {
	      display: flex;
	      align-items: center;
	      gap: 16px;
	      padding: 16px;
	      background: var(--card-bg);
	      border: 1px solid var(--card-border);
	      border-radius: 16px;
	      margin-bottom: 12px;
	      cursor: pointer;
	      transition: all 0.3s ease;
	    }

	    .model-card:hover {
	      transform: translateX(8px);
	      box-shadow: var(--glow-primary);
	    }

	    .model-icon {
	      width: 48px;
	      height: 48px;
	      border-radius: 12px;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      font-size: 1.5rem;
	      flex-shrink: 0;
	    }

	    /* Model Icon Gradients */
	    .model-card.kling .model-icon {
	      background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
	    }
	    .model-card.hailuo .model-icon {
	      background: linear-gradient(135deg, #4ECDC4, #7EDDD6);
	    }
	    .model-card.luma .model-icon {
	      background: linear-gradient(135deg, #9B5DE5, #BB7DF5);
	    }
	    .model-card.runway .model-icon {
	      background: linear-gradient(135deg, #FFB84D, #FFCA7D);
	    }
	    .model-card.pika .model-icon {
	      background: linear-gradient(135deg, #26D0A5, #56E0C5);
	    }
	    .model-card.opensource .model-icon {
	      background: linear-gradient(135deg, #6B7FFF, #8B9FFF);
	    }

	    .model-info h4 {
	      font-size: 1rem;
	      font-weight: 600;
	      margin-bottom: 2px;
	    }

	    .model-info p {
	      font-size: 0.75rem;
	      margin: 0;
	      color: var(--text-muted);
	    }

	    /* --- Interactive Components --- */
	    .prompt-builder {
	      background: var(--card-bg);
	      border: 1px solid var(--card-border);
	      border-radius: 20px;
	      padding: 24px;
	      backdrop-filter: blur(20px);
	    }

	    .prompt-category {
	      margin-bottom: 20px;
	    }

	    .prompt-category label {
	      display: block;
	      font-size: 0.75rem;
	      font-weight: 600;
	      text-transform: uppercase;
	      letter-spacing: 0.1em;
	      color: var(--text-muted);
	      margin-bottom: 8px;
	    }

	    .toggle-group {
	      display: flex;
	      flex-wrap: wrap;
	      gap: 8px;
	    }

	    .toggle-btn {
	      padding: 8px 16px;
	      border-radius: 20px;
	      border: 1px solid var(--glass-border);
	      background: var(--glass-bg);
	      color: var(--text-secondary);
	      font-size: 0.875rem;
	      cursor: pointer;
	      transition: all 0.3s ease;
	    }

	    .toggle-btn:hover {
	      background: var(--accent-sky);
	      color: white;
	      border-color: var(--accent-sky);
	    }

	    .toggle-btn.active {
	      background: var(--accent-coral);
	      color: white;
	      border-color: var(--accent-coral);
	    }

	    .prompt-output {
	      margin-top: 20px;
	      padding: 16px;
	      background: rgba(0, 0, 0, 0.05);
	      border-radius: 12px;
	      font-family: monospace;
	      font-size: 0.875rem;
	      color: var(--text-primary);
	      line-height: 1.5;
	      min-height: 80px;
	    }

	    [data-theme="dark"] .prompt-output {
	      background: rgba(255, 255, 255, 0.05);
	    }

	    /* --- Sliders --- */
	    .slider-container {
	      margin-bottom: 24px;
	    }

	    .slider-label {
	      display: flex;
	      justify-content: space-between;
	      margin-bottom: 8px;
	    }

	    .slider-label span {
	      font-size: 0.875rem;
	      color: var(--text-secondary);
	    }

	    .slider-label strong {
	      font-size: 0.875rem;
	      color: var(--accent-coral);
	    }

	    .slider {
	      width: 100%;
	      height: 8px;
	      border-radius: 4px;
	      background: var(--glass-bg);
	      outline: none;
	      -webkit-appearance: none;
	      appearance: none;
	    }

	    .slider::-webkit-slider-thumb {
	      -webkit-appearance: none;
	      appearance: none;
	      width: 24px;
	      height: 24px;
	      border-radius: 50%;
	      background: linear-gradient(135deg, var(--accent-coral), var(--accent-violet));
	      cursor: pointer;
	      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
	      transition: transform 0.2s ease;
	    }

	    .slider::-webkit-slider-thumb:hover {
	      transform: scale(1.2);
	    }

	    /* --- Timeline --- */
	    .timeline {
	      display: flex;
	      align-items: center;
	      gap: 4px;
	      padding: 20px 0;
	      overflow-x: auto;
	      scrollbar-width: none;
	    }

	    .timeline::-webkit-scrollbar {
	      display: none;
	    }

	    .frame {
	      width: 48px;
	      height: 48px;
	      border-radius: 8px;
	      background: var(--glass-bg);
	      border: 2px solid transparent;
	      cursor: pointer;
	      transition: all 0.3s ease;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      font-size: 0.75rem;
	      color: var(--text-muted);
	      flex-shrink: 0;
	    }/* --- Timeline Interaction --- */
    .frame.active {
      border-color: var(--accent-coral);
      background: var(--accent-coral);
      color: white;
      transform: scale(1.1);
    }

    .timeline-scrubber {
      width: 100%;
      margin-top: 16px;
    }

    /* --- Comparison Components --- */
    .comparison-container {
      display: flex;
      gap: 12px;
      margin-top: 20px;
    }

    .comparison-box {
      flex: 1;
      aspect-ratio: 16/9;
      background: var(--glass-bg);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      color: var(--text-muted);
      border: 2px dashed var(--glass-border);
      transition: all 0.3s ease;
    }

    .comparison-box:hover {
      border-color: var(--accent-sky);
      background: rgba(78, 205, 196, 0.1);
    }

    /* --- Camera Controls --- */
    .camera-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 20px;
    }

    .camera-btn {
      padding: 16px;
      border-radius: 12px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: center;
    }

    .camera-btn:hover {
      transform: scale(1.05);
      box-shadow: var(--glow-primary);
    }

    .camera-btn.active {
      background: linear-gradient(135deg, var(--accent-coral), var(--accent-violet));
      border-color: transparent;
    }

    .camera-btn.active span {
      color: white;
    }

    .camera-btn span {
      display: block;
      font-size: 1.5rem;
      margin-bottom: 4px;
    }

    .camera-btn small {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .camera-btn.active small {
      color: rgba(255, 255, 255, 0.8);
    }

    /* --- Debug Cards --- */
    .debug-prompt {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 16px;
    }

    .debug-prompt code {
      display: block;
      font-family: monospace;
      font-size: 0.875rem;
      color: var(--text-primary);
      margin-bottom: 16px;
      padding: 12px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 8px;
    }

    [data-theme="dark"] .debug-prompt code {
      background: rgba(255, 255, 255, 0.05);
    }

    .debug-hint {
      padding: 12px;
      background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(155, 93, 229, 0.1));
      border-radius: 8px;
      font-size: 0.875rem;
      color: var(--text-secondary);
      display: none;
    }

    .debug-hint.revealed {
      display: block;
      animation: fadeIn 0.5s ease;
    }

    .reveal-btn {
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--accent-sky), var(--accent-mint));
      border: none;
      color: white;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .reveal-btn:hover {
      transform: scale(1.02);
      box-shadow: var(--glow-secondary);
    }

    /* --- Library Cards --- */
    .library-prompt {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 16px;
    }

    .library-prompt code {
      display: block;
      font-family: monospace;
      font-size: 0.8rem;
      color: var(--text-primary);
      margin-bottom: 12px;
      padding: 12px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 8px;
      line-height: 1.6;
    }

    [data-theme="dark"] .library-prompt code {
      background: rgba(255, 255, 255, 0.05);
    }

    .annotation {
      font-size: 0.75rem;
      padding: 8px 12px;
      background: linear-gradient(135deg, rgba(38, 208, 165, 0.1), rgba(78, 205, 196, 0.1));
      border-radius: 8px;
      color: var(--accent-mint);
      margin-bottom: 8px;
    }

    .annotation strong {
      color: var(--text-primary);
    }

    .copy-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 20px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      color: var(--text-secondary);
      font-size: 0.75rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .copy-btn:hover {
      background: var(--accent-violet);
      color: white;
      border-color: var(--accent-violet);
    }

    /* --- Checklist --- */
    .checklist {
      list-style: none;
      padding: 0;
    }

    .checklist li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--glass-border);
    }

    .checklist li:last-child {
      border-bottom: none;
    }

    .check-icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-mint), var(--accent-sky));
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 0.75rem;
      flex-shrink: 0;
    }

    .check-text {
      font-size: 0.875rem;
      color: var(--text-secondary);
    }

    /* --- Scenario Cards --- */
    .scenario-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 16px;
    }

    .scenario-card h4 {
      font-size: 1rem;
      margin-bottom: 8px;
      color: var(--text-primary);
    }

    .scenario-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }

    .scenario-option {
      padding: 12px;
      border-radius: 12px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 0.875rem;
      color: var(--text-secondary);
    }

    .scenario-option:hover {
      border-color: var(--accent-sky);
      background: rgba(78, 205, 196, 0.1);
    }

    .scenario-option.selected {
      border-color: var(--accent-coral);
      background: rgba(255, 107, 107, 0.1);
    }

    /* --- Backgrounds & Decorations --- */
    .bg-gradient-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      opacity: 0.5;
      pointer-events: none;
      z-index: 0;
    }

    .orb-1 {
      width: 300px;
      height: 300px;
      background: var(--accent-coral);
      top: -100px;
      right: -100px;
    }

    .orb-2 {
      width: 250px;
      height: 250px;
      background: var(--accent-sky);
      bottom: -100px;
      left: -100px;
    }

    .orb-3 {
      width: 200px;
      height: 200px;
      background: var(--accent-violet);
      top: 30%;
      left: 50%;
    }

    /* --- Animations --- */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.8; }
    }

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

    .animate-float {
      animation: float 3s ease-in-out infinite;
    }

    .animate-pulse {
      animation: pulse 2s ease-in-out infinite;
    }

    /* --- Badges --- */
    .badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .badge-coral  { background: rgba(255, 107, 107, 0.2); color: var(--accent-coral); }
    .badge-sky    { background: rgba(78, 205, 196, 0.2); color: var(--accent-sky); }
    .badge-mint   { background: rgba(38, 208, 165, 0.2); color: var(--accent-mint); }
    .badge-violet { background: rgba(155, 93, 229, 0.2); color: var(--accent-violet); }

    /* --- Hero Styles --- */
    .hero-title {
      font-size: clamp(2.75rem, 10vw, 5rem);
      line-height: 1;
      margin-bottom: 1.5rem;
    }

    .hero-subtitle {
      font-size: clamp(1.125rem, 3vw, 1.5rem);
      color: var(--text-secondary);
      margin-bottom: 2rem;
      font-family: 'Instrument Serif', serif;
      font-style: italic;
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 16px 32px;
      border-radius: 30px;
      background: linear-gradient(135deg, var(--accent-coral), var(--accent-violet));
      color: white;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 8px 24px rgba(255, 107, 107, 0.4);
    }

    .cta-btn:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(255, 107, 107, 0.5);
    }

    @media (max-width: 768px) {
      :root {
        --header-offset: 76px;
      }
    }

    /* --- Responsive Queries --- */
    @media (max-width: 480px) {
      .panel { padding: 50px 20px; }
      .nav-floating { right: 8px; padding: 12px 6px; }
      .nav-dot { width: 8px; height: 8px; }
      .nav-arrows { bottom: 16px; gap: 12px; }
      .nav-arrow { width: 40px; height: 40px; }
      .card-grid { grid-template-columns: 1fr; }
      .camera-grid { grid-template-columns: repeat(2, 1fr); }
      .comparison-container { flex-direction: column; }
    }

    /* --- Grain Overlay --- */
    .grain-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    }

    [data-theme="dark"] .grain-overlay { opacity: 0.05; }

    /* --- Iteration Cards --- */
    .iteration-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 20px;
    }

    .iteration-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 12px;
      padding: 12px;
      text-align: center;
    }

    .iteration-card .version {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--accent-violet);
      margin-bottom: 8px;
    }

    .iteration-card .preview {
      aspect-ratio: 16/9;
      background: var(--glass-bg);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .iteration-card .score {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--accent-mint);
    }

/* ══════════════════════════════════════════════════════════════════
   VIDEO GENERATION - GLOBAL INTEGRATION OVERRIDES
   ══════════════════════════════════════════════════════════════════ */

/* Scale down content to fit viewport better */
.panel {
  padding: 40px 20px !important;
  padding-top: calc(var(--header-offset) + 40px) !important;
  padding-bottom: calc(var(--mobile-bottom-bar-height) + 40px) !important;
  scroll-margin-top: 0 !important;
}

.panel-content {
  max-width: 560px;
  transform: scale(0.95);
  transform-origin: top center;
}

.panel h1 {
  font-size: clamp(2rem, 6vw, 3rem) !important;
  margin-bottom: 1rem !important;
}

.panel h2 {
  font-size: clamp(1.5rem, 4vw, 2rem) !important;
  margin-bottom: 0.75rem !important;
}

.panel p {
  font-size: 0.9rem !important;
  margin-bottom: 1rem !important;
}

.panel-number {
  top: calc(24px + var(--header-offset));
}

.card {
  padding: 16px !important;
  margin-bottom: 12px !important;
}

.card h3 {
  font-size: 1rem !important;
}

.card p {
  font-size: 0.8rem !important;
}

.card-grid {
  gap: 8px !important;
  margin-top: 12px !important;
}

.card-small {
  padding: 12px !important;
}

.badge {
  font-size: 0.65rem !important;
  padding: 4px 10px !important;
  margin-bottom: 8px !important;
}

.cta-btn {
  padding: 12px 24px !important;
  font-size: 0.9rem !important;
}

/* Fix nav arrows to sit above global footer + mobile bar */
.nav-arrows {
  bottom: calc(80px + var(--mobile-bottom-bar-height)) !important;
}

/* Fix nav floating dots position to not overlap header */
.nav-floating {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE TEXT CONTRAST FIXES
   ══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .panel h2,
[data-theme="dark"] .panel h3,
[data-theme="dark"] .card h3 {
  color: #F0F0FF !important;
}

[data-theme="dark"] .panel p,
[data-theme="dark"] .card p,
[data-theme="dark"] .hero-subtitle {
  color: #C0C0E0 !important;
}

[data-theme="dark"] .badge {
  color: #FFF !important;
}

[data-theme="dark"] .card-small,
[data-theme="dark"] .iteration-card {
  color: #E0E0FF;
}

[data-theme="dark"] .card-small h4,
[data-theme="dark"] .card-small p {
  color: #E0E0FF !important;
}

[data-theme="dark"] .tool-card h4,
[data-theme="dark"] .tool-card p {
  color: #F0F0FF !important;
}

[data-theme="dark"] .timeline .frame,
[data-theme="dark"] .camera-btn,
[data-theme="dark"] .toggle-btn {
  color: #E0E0FF;
}

[data-theme="dark"] .panel-number {
  color: #8080B0 !important;
  opacity: 1;
}

[data-theme="dark"] label {
  color: #C0C0E0 !important;
}

[data-theme="dark"] .slider-value {
  color: #F0F0FF !important;
}