@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1.  CSS Variables (Dark + Light themes)
   2.  Base / Reset
   3.  Layout & Containers
   4.  Header & Navigation
   5.  Logo
   6.  Theme Toggle
   7.  Hero Section & Background
   8.  Buttons
   9.  Cards & Upload
   10. Feature Cards
   11. Analysis Results & Status
   12. Comparison Section
   13. Pros & Cons / Recommendation
   14. Footer
   15. Loading Animations
   16. Mobile Navigation
   17. Utility Classes
   18. Enhanced Navigation
   19. Hero Animations & Floating Elements
   20. Ad Styles
   21. Documentation / About Layout
   22. Donate Page
   23. Keyframe Animations
   24. Light Mode Overrides
   25. Analysis Progress Component
   26. Responsive / Media Queries
   ========================================================================== */

/* ==========================================================================
   1. CSS Variables
   ========================================================================== */
/* Dark theme (default) */
:root,
.dark {
  --brand-primary: #3b82f6;
  --brand-secondary: #1e40af;
  --brand-accent: #60a5fa;
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-tertiary: #1a1a1a;
  --bg-hover: #222222;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-tertiary: #8a8a8a;
  --border-primary: #2a2a2a;
  --border-secondary: #333333;
  --status-success: #10b981;
  --status-success-bg: rgba(16, 185, 129, 0.15);
  --on-status-success: #0a0a0a;
  --status-warning: #f59e0b;
  --status-error: #ef4444;
  --status-error-bg: rgba(239, 68, 68, 0.15);
  --on-status-error: #0a0a0a;
  --status-info: #3b82f6;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --glass-bg: rgba(26, 26, 26, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
  --upload-bg: rgba(26, 26, 26, 0.3);
  --upload-hover-bg: rgba(26, 26, 26, 0.5);
  --gradient-start: var(--text-primary);
  --gradient-end: var(--brand-accent);
}

/* Light theme */
.light {
  --brand-primary: #2563eb;
  --brand-secondary: #1d4ed8;
  --brand-accent: #3b82f6;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f1f3f5;
  --bg-hover: #e9ecef;
  --text-primary: #1a1a1a;
  --text-secondary: #495057;
  --text-tertiary: #5f6770;
  --border-primary: #dee2e6;
  --border-secondary: #ced4da;
  --status-success: #047857;
  --status-success-bg: #d1fae5;
  --on-status-success: #ffffff;
  --status-warning: #92400e;
  --status-error: #dc2626;
  --status-error-bg: #fee2e2;
  --on-status-error: #ffffff;
  --status-info: #2563eb;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.08);
  --upload-bg: rgba(255, 255, 255, 0.6);
  --upload-hover-bg: rgba(248, 249, 250, 0.9);
  --gradient-start: var(--brand-primary);
  --gradient-end: var(--brand-accent);
}

/* Base styles using standard CSS */
* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Global link styles */
a {
  color: var(--brand-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

h3 {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  color: var(--brand-accent);
}

p {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Component styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  z-index: -1;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--brand-primary);
  color: white;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-primary::before {
  background: rgba(255, 255, 255, 0.2);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--brand-secondary);
  color: white;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
  text-decoration: none;
}

.btn-primary:hover:not(:disabled)::before {
  width: 300px;
  height: 300px;
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* Card components */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px 0 var(--shadow-color);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

/* Form elements */

/* Header styles */
.header {
  background-color: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-primary);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
}

/* Navigation */
.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link.active {
  color: var(--brand-primary);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

/* Theme Toggle Styles */
.theme-toggle {
  position: relative;
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: 2rem;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: auto;
  margin-right: 1rem;
}

.theme-toggle:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

.theme-toggle-track {
  display: flex;
  align-items: center;
  position: relative;
  width: 60px;
  height: 32px;
  padding: 4px;
  border-radius: 2rem;
  background: var(--bg-tertiary);
  transition: background-color 0.3s ease;
}

.theme-toggle-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle-sun {
  left: 8px;
  opacity: 0;
  transform: scale(0.8);
}

.theme-toggle-moon {
  right: 8px;
  opacity: 1;
  transform: scale(1);
}

.light .theme-toggle-sun {
  opacity: 1;
  transform: scale(1);
  color: #f59e0b;
}

.light .theme-toggle-moon {
  opacity: 0;
  transform: scale(0.8);
}

.theme-toggle-thumb {
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--brand-primary);
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
  transform: translateX(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-toggle-thumb-light {
  transform: translateX(28px);
  background: #f59e0b;
}

/* Layout utilities */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Hero section */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

.light .hero {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero-title {
  font-weight: 800;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--brand-primary) 50%, var(--brand-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2.5rem, 6vw, 4rem);
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  margin-bottom: 3rem;
  line-height: 1.625;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Upload area */
.upload-area {
  padding: 3rem 2rem;
  text-align: center;
  border: 2px dashed rgba(59, 130, 246, 0.3);
  background: var(--upload-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* The real file input is visually hidden, so draw its keyboard focus on the
   area (matches the flow controls). Where :has() is supported, a pointer
   click that focuses the input does not show the ring. */
.upload-area:focus-within {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.upload-area:focus-within:not(:has(:focus-visible)) {
  outline: none;
}

.upload-area::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.upload-area > * {
  position: relative;
  z-index: 1;
}

.upload-area:hover {
  border-color: var(--brand-primary);
  background: var(--upload-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

.upload-area:hover::before {
  width: 100%;
  height: 100%;
}

.upload-area.drag-over {
  border-color: var(--brand-primary);
  background: rgba(59, 130, 246, 0.1);
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.3);
}

.upload-area.drag-over .upload-icon {
  transform: translateY(-5px);
  color: var(--brand-primary);
}

/* File Preview Component */
.file-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease;
}

.file-preview:hover {
  background: var(--bg-hover);
  border-color: var(--border-secondary);
  opacity: 0.95;
}

.file-preview-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.file-preview-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.3s ease;
}

.file-preview-info {
  flex: 1;
  min-width: 0;
}

.file-preview-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-preview-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.file-preview-status {
  font-weight: 500;
}

.file-preview-remove {
  padding: 0.5rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.file-preview-remove:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.1);
  color: var(--status-error);
}

.file-preview-remove:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Analysis results */

/* Status indicators */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-success {
  background-color: rgba(16, 185, 129, 0.2);
  color: var(--status-success);
}

.status-warning {
  background-color: rgba(245, 158, 11, 0.2);
  color: var(--status-warning);
}

.status-error {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--status-error);
}

.status-info {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--status-info);
}

/* Comparison Table */
.comparison-table {
    overflow-x: auto;
    margin: 2rem 0;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
}

.comparison-table th,
.comparison-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-primary);
}

.comparison-table th {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--brand-primary);
    font-weight: 600;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Pros and Cons */
.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 1.5rem 0;
}

.pros, .cons {
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-primary);
}

.pros {
    border-left: 3px solid var(--status-success);
}

.cons {
    border-left: 3px solid var(--status-error);
}

.pros h4 {
    color: var(--status-success);
    margin-bottom: 1rem;
}

.cons h4 {
    color: var(--status-error);
    margin-bottom: 1rem;
}

.pros ul, .cons ul {
    list-style: none;
    padding: 0;
}

.pros li, .cons li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.pros li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--status-success);
}

.cons li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: var(--status-error);
}

/* Recommendation Box */
.recommendation-box {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--brand-primary);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 2rem 0;
}

.recommendation-box h4 {
    color: var(--brand-primary);
    margin-bottom: 1rem;
}

.recommendation-box p {
    margin-bottom: 0.75rem;
}

.recommendation-box p:last-child {
    margin-bottom: 0;
}

/* Responsive Design for Tables */
@media (max-width: 768px) {
    .comparison-table {
        font-size: 0.875rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 0.75rem 0.5rem;
    }
    
    .pros-cons {
        grid-template-columns: 1fr;
    }
}

/* Footer */
/* Footer styles with CLS prevention */
.footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
  margin-top: 6rem;
  display: flex;
  flex-direction: column;
}

.footer-content {
  padding: 3rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  flex: 1;
}

@media (min-width: 768px) {
  .footer-content {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer-section {
}

.footer-section h4,
.footer-heading {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.footer-company {
  font-weight: 600;
  color: var(--text-primary);
}

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

.footer-tagline a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-tagline a:hover {
  color: var(--brand-primary);
}

.footer-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-link {
  color: var(--text-secondary);
  transition: color 0.2s ease;
  display: block;
  text-decoration: none;
  font-size: 0.875rem;
}

.footer-link:hover {
  color: var(--brand-primary);
}

.footer-bottom {
  padding: 2rem 0 1rem;
  border-top: 1px solid var(--border-primary);
  text-align: center;
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

/* Loading animations */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Mobile navigation */

/* Utility classes for common patterns */
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }

/* ==========================================================================
   8. Buttons (Enhanced)
   ========================================================================== */
body.mobile-menu-open {
  overflow: hidden;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Enhanced Button System with Ripple Effects */

.btn-primary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-primary:active::after {
  width: 300px;
  height: 300px;
}

.btn-secondary {
  background-color: transparent;
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--brand-primary);
  color: white;
}

/* Action Button System */
.action-btn {
  width: 36px;
  height: 36px;
  background-color: transparent;
  border: 1px solid var(--border-secondary);
  color: var(--text-secondary);
  padding: 0;
}

.action-btn.labeled {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.75rem;
  font-size: 0.8rem;
}

.action-btn:hover:not(:disabled) {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.action-btn.copied {
  border-color: var(--status-success);
  color: var(--status-success);
  animation: copy-pop 0.5s ease-out;
}

/* Donate Button System */
.btn-donate {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-primary);
}

.btn-donate:hover, .btn-donate.active {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

/* Special Effect Buttons */
.glow-button {
  position: relative;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

/* Composited glow pulse: animate the opacity of a glow layer (runs on the GPU
   compositor) instead of animating box-shadow on the button itself, which forces
   a main-thread repaint every frame and shows up as long tasks / TBT.
   The layer lives on a wrapper around the button: .btn clips its own children
   (overflow: hidden), so a shadow drawn by a pseudo-element inside the button is
   cut off entirely and the pulse never showed (issue #155). */
.glow-wrap {
  position: relative;
  /* A one-cell grid stretches the button over the whole wrapper, so it keeps
     the size it had as a direct .hero-actions flex item at every breakpoint. */
  display: inline-grid;
  border-radius: 0.5rem;
  isolation: isolate;
}

.glow-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
  opacity: 0;
  animation: glowPulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Follow the button's hover lift (.btn-primary:hover). */
.glow-wrap:hover::after {
  transform: translateY(-3px) scale(1.02);
}

.btn-sparkle {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 1.5rem;
  animation: sparkle 3s ease-in-out infinite;
}

/* Enhanced Logo System */
.logo-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
}

.logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.logo:hover .logo-icon img {
  transform: rotate(360deg);
}

.logo-text {
  font-size: 1.125rem;
  font-weight: 600;
  background: linear-gradient(to right, var(--gradient-start), var(--brand-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-subtitle {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Navigation System */
.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  animation: navSlideIn 0.8s ease-out;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1.5rem;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--brand-primary);
}

.nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--brand-primary);
  transition: width 0.3s ease;
}

.nav-link:hover::before {
  width: 100%;
}

.donate-link {
  background-color: var(--brand-primary);
  color: white !important;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.donate-link:hover {
  background-color: var(--brand-secondary);
  transform: translateY(-1px);
}

/* Cloudflare Turnstile Styles */
.turnstile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cf-turnstile {
  margin: 0 auto;
}

.turnstile-loading {
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-align: center;
}

/* Mobile Navigation System */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  gap: 4px;
  z-index: 1001;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background-color: var(--text-primary);
  transition: all 0.3s ease;
  border-radius: 2px;
}

.hamburger-line.open:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-line.open:nth-child(2) {
  opacity: 0;
}

.hamburger-line.open:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--bg-primary);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  overflow-y: auto;
}

/* The overlay covers the viewport; while it is open the header (a sticky
   stacking context holding the close toggle) must paint above it. */
body.mobile-menu-open .header {
  z-index: 10000;
}

.mobile-nav.open {
  display: block;
  opacity: 1;
  visibility: visible;
}

.mobile-nav-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6rem 1rem 2rem;
  height: 100vh;
  gap: 0;
  overflow-y: auto;
}

.mobile-nav-link {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 1rem;
  border-bottom: 1px solid var(--border-primary);
  transition: all 0.2s ease;
  text-align: left;
  display: block;
  width: 100%;
}

.mobile-nav-link:hover, .mobile-nav-link.active {
  color: var(--brand-primary);
  background-color: var(--bg-secondary);
}

.mobile-nav-link.donate-link {
  background-color: var(--brand-primary);
  color: white !important;
  border-bottom: none;
  margin-top: 1rem;
  border-radius: 0.5rem;
}

.mobile-nav-link.donate-link:hover {
  background-color: var(--brand-secondary);
}

.mobile-nav-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  margin-top: 1rem;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 500;
}

.mobile-nav-theme .theme-toggle {
  margin: 0;
}

/* Enhanced Hero Section - OVERRIDE styles in lower section */
.hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: center;
}

/* Additional CSS classes for enhanced functionality */
.fade-in {
  animation: fadeIn 0.5s ease-out backwards;
}


.feature-icon .icon-pulse {
  animation: icon-pulse 2.5s infinite ease-in-out 1s;
}

.hero-nav {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 4rem;
  flex-wrap: wrap;
}

.hero-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-secondary);
  transition: all 0.3s ease;
  padding: 1rem;
  border-radius: 0.5rem;
}

.hero-nav-item:hover {
  color: var(--brand-primary);
  transform: translateY(-5px);
}

.hero-nav-icon {
  width: 3rem;
  height: 3rem;
  transition: transform 0.3s ease;
}

.hero-nav-item:hover .hero-nav-icon {
  transform: scale(1.1);
}

/* Hero Background Animation */
.hero-background {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-animation-canvas {
  z-index: 2;
  opacity: 0.8;
  mix-blend-mode: screen;
}

.hero-grid {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background-image:
    linear-gradient(to right, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: move-grid 20s linear infinite;
}

/* Advanced Hero Effects */
.animated-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  z-index: 0;
  /* Isolate the decorative background's layout/paint from the rest of the page
     so its continuous animations don't trigger main-thread style/layout work. */
  contain: layout paint;
}

.animated-bg-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Consolidated Floating Elements Animation */
.floating-elements {
  position: relative;
  width: 100%;
  height: 100%;
}

.floating-element {
  position: absolute;
  font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.875rem;
  white-space: nowrap;
  animation: floatDrift 20s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
  /* Promote to its own compositor layer so the transform animation runs off the
     main thread (the keyframes only animate transform/opacity). */
  will-change: transform, opacity;
}

/* Different styles for element types */
.floating-element.hex {
  color: var(--brand-primary);
  opacity: 0.2;
  font-size: 0.875rem;
  font-weight: 600;
  text-shadow: 0 0 10px currentColor;
}

.floating-element.binary {
  color: rgba(96, 165, 250, 0.8);
  opacity: 0.15;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-shadow: 0 0 8px currentColor;
  filter: blur(0.5px);
}

.floating-element.text {
  color: var(--brand-accent);
  opacity: 0.18;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Animation variations for depth */
.floating-element:nth-child(odd) {
  animation-direction: alternate-reverse;
}

.floating-element:nth-child(3n) {
  animation-name: floatDriftDeep;
  opacity: 0.1;
  filter: blur(1px);
}

.floating-element:nth-child(5n) {
  animation-duration: 30s;
}

/* Hover interaction */
.hero:hover .floating-element {
  animation-duration: 15s;
}

@keyframes floatDrift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.15;
  }
  25% {
    transform: translate(-20px, -30px) scale(1.05);
  }
  50% {
    transform: translate(30px, -20px) scale(0.95);
    opacity: 0.2;
  }
  75% {
    transform: translate(-10px, 20px) scale(1.02);
  }
  90% {
    opacity: 0.1;
  }
}

@keyframes floatDriftDeep {
  0%, 100% {
    transform: translate(0, 0) scale(0.9);
    opacity: 0;
  }
  10% {
    opacity: 0.08;
  }
  50% {
    transform: translate(-40px, 30px) scale(0.85);
    opacity: 0.12;
  }
  90% {
    opacity: 0.05;
  }
}

.circuit-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0.3;
}

.glitch-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  animation: glitch 10s ease-in-out infinite;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(59, 130, 246, 0.1) 30%,
    rgba(59, 130, 246, 0.1) 70%,
    transparent 70%
  );
  background-size: 10px 10px;
}

/* ==========================================================================
   10. Feature Cards
   ========================================================================== */
.feature-card {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: featureSlideUp 0.8s ease-out backwards;
  background: rgba(26, 26, 26, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.feature-card:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.25);
  transform: translateY(-8px) scale(1.02);
  background: rgba(26, 26, 26, 0.6);
}

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

.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }

.feature-icon {
  width: 5rem;
  height: 5rem;
  margin-bottom: 1.5rem;
  color: white;
  flex-shrink: 0;
}

.feature-card:hover .feature-icon .icon-bg-glow {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.7));
}

.feature-icon .icon-bg-glow {
  transition: all 0.3s ease;
}

.feature-title {
  color: var(--text-primary);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.feature-description {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Enhanced Upload Area */
.upload-area.drag-over {
  border-color: var(--brand-accent);
  background-color: rgba(59, 130, 246, 0.1);
  transform: scale(1.02);
}

.upload-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  color: var(--text-tertiary);
}

.upload-text {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.upload-hint {
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

/* Analysis Results System */
.analysis-result {
  padding: 0;
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}

.result-filename {
  font-weight: 500;
  font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', Consolas, 'Courier New', monospace;
  color: var(--text-primary);
  /* Extracted archive entries are named with their full in-archive path: break
     it anywhere rather than pushing the expand button off the card. */
  overflow-wrap: anywhere;
  min-width: 0;
}

.result-header-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.result-toggle,
.result-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
}

/* Status System */
.result-status {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-pending {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--status-warning);
}

.status-analyzing {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--status-info);
}

.status-completed {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--status-success);
}

.status-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--status-error);
}

/* Expandable Content */
.expandable-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease-in-out;
}

.expandable-content.expanded {
  grid-template-rows: 1fr;
}

.expandable-content > .content-inner {
  overflow: hidden;
}

/* Code Block */
.code-block {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  padding: 1rem;
  font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.875rem;
  overflow-x: auto;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

/* Report Actions */
.report-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-primary);
}

.report-overview {
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.report-overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.report-overview-title-group {
  min-width: 0;
}

.report-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.report-confidence,
.analysis-method-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-confidence {
  border: 1px solid currentColor;
}

.confidence-windbg {
  color: var(--status-success);
  background: var(--status-success-bg);
}

.confidence-fallback {
  color: var(--status-warning);
  background: rgba(245, 158, 11, 0.12);
}

.confidence-mixed {
  color: var(--status-info);
  background: rgba(59, 130, 246, 0.12);
}

.analysis-method-chip {
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
}

.report-title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

.report-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.report-cause-panel,
.report-actions-panel {
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  background: var(--bg-primary);
  padding: 1rem;
  min-width: 0;
}

.report-section-label {
  color: var(--text-tertiary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.report-cause-panel p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.culprit-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  color: var(--text-tertiary);
  font-size: 0.8rem;
}

.culprit-line code {
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 0.375rem;
  padding: 0.15rem 0.45rem;
  font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-weight: 700;
  word-break: break-word;
}

.report-actions-panel ol {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

.report-actions-panel li + li {
  margin-top: 0.45rem;
}

.crash-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
}

.crash-fact {
  min-width: 0;
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  background: var(--bg-primary);
  padding: 0.65rem 0.75rem;
}

.crash-fact-label {
  display: block;
  color: var(--text-tertiary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.crash-fact-value {
  display: block;
  color: var(--text-primary);
  font-size: 0.85rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.crash-fact-value.mono {
  font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

.report-forced {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--status-warning);
  border-left-width: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--status-warning) 10%, transparent);
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.55;
}

.report-caveat {
  margin: 0.9rem 0 0;
  color: var(--text-tertiary);
  font-size: 0.78rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .report-overview {
    padding: 0.85rem;
  }

  .report-overview-grid {
    grid-template-columns: 1fr;
  }

  .crash-facts-grid {
    grid-template-columns: 1fr;
  }
}

/* Related WindowsForum discussions (components/RelatedDiscussions.tsx) */
.related-discussions {
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.related-discussions-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.related-discussions-board {
  color: var(--brand-primary);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.related-discussions-board:hover,
.related-thread-title:hover {
  text-decoration: underline;
}

.related-discussions-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.related-thread {
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  background: var(--bg-primary);
  padding: 0.75rem 0.85rem;
  min-width: 0;
}

.related-thread-title {
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.related-thread-meta {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.related-match,
.related-kind {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
}

.related-match-both {
  color: var(--status-success);
  background: var(--status-success-bg);
  border-color: currentColor;
}

.related-match-module {
  color: var(--status-info);
  background: rgba(59, 130, 246, 0.12);
  border-color: currentColor;
}

.related-thread-snippet {
  margin: 0.45rem 0 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.related-discussions-ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.85rem;
}

.related-discussions-ask p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

.related-ask-btn {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.related-discussions-note {
  margin: 0.6rem 0 0;
  color: var(--text-tertiary);
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .related-discussions {
    padding: 0.85rem;
  }

  .related-discussions-ask {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Comparison Section */
.comparison-section {
  padding: 4rem 0;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.comparison-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
  animation: pulse 20s ease-in-out infinite;
}

.comparison-section h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.section-subtitle {
  text-align: center;
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: 3rem;
}

.comparison-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.comparison-image-container {
  position: relative;
  width: 100%;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-primary);
  aspect-ratio: 1656 / 428;
}

.comparison-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem 0.5rem 0 0;
}

.comparison-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

.comparison-column {
  padding: 1.5rem;
  background: var(--bg-secondary);
  border-radius: 0.5rem;
  border: 1px solid var(--border-primary);
}

.comparison-column h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comparison-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparison-column li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--text-secondary);
  line-height: 1.6;
}

.comparison-column li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--brand-primary);
}

.comparison-column:first-child li::before {
  content: '✓';
  color: var(--status-success);
}

.comparison-column:last-child li::before {
  content: '×';
  color: var(--status-error);
}

.comparison-caption {
  padding: 2rem;
  background: rgba(59, 130, 246, 0.05);
  border-top: 1px solid var(--border-primary);
  text-align: center;
}

.comparison-caption p {
  color: var(--text-secondary);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

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

@media (max-width: 768px) {
  .comparison-features {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .comparison-section h2 {
    font-size: 2rem;
  }
  
  .section-subtitle {
    font-size: 1rem;
  }
}

/* Loading System */
.loader {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-secondary);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.status-analyzing .loader {
  animation: spin 0.8s linear infinite, pulse-loader 1.5s infinite ease-in-out;
}

/* Enhanced Grid Layouts */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.info-section {
  padding: 4rem 0;
}

.info-card {
  padding: 2rem;
  background: var(--bg-secondary);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 3rem;
}

.cta-section {
  padding: 4rem 0;
  text-align: center;
}

.cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.donate-cards, .error-codes, .command-list {
  display: grid;
  gap: 1.5rem;
}

.donate-cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  width: 100%;
  padding-top: 1rem;
}

/* Donate Page Components */
.donate-card {
  padding: 2rem;
  text-align: center;
  position: relative;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

.donate-card.featured {
  border-color: var(--brand-primary);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.featured-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--brand-primary);
  color: white;
  padding: 0.25rem 1rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 10;
}

.donate-amounts {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
  flex-wrap: wrap;
}

/* Donate page specific styling */
.donate-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.donate-options {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* PayPal button container */
.donate-card form {
  width: 100%;
  margin-top: 1rem;
}

.donate-card .btn-primary,
.donate-card .btn-large {
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  white-space: normal;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  box-sizing: border-box;
}

/* Crypto addresses */
.crypto-address {
  word-break: break-all;
  font-size: 0.8rem;
  display: block;
  margin-top: 0.25rem;
  padding: 0.5rem;
  background-color: var(--bg-primary);
  border-radius: 0.25rem;
  font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

/* Documentation Error Codes */
.error-code {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.error-code:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.1);
}

.error-code h4 {
  color: var(--brand-primary);
  font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.error-code p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.error-code p:last-child {
  margin-bottom: 0;
}

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

/* Documentation Commands */
.command {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.command code {
  display: block;
  font-size: 1rem;
  color: var(--brand-primary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.command p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   23. Keyframe Animations
   ========================================================================== */
@keyframes move-grid {
  0% { transform: translate(0, 0); }
  100% { transform: translate(40px, 40px); }
}

@keyframes copy-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes navSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

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

@keyframes glowPulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
}

@keyframes pulse-loader {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

@keyframes glitch {
  0%, 90%, 100% { opacity: 0; }
  92% { opacity: 0.8; transform: translateX(-2px); }
  94% { opacity: 0.5; transform: translateX(2px); }
  96% { opacity: 0.8; transform: translateX(-1px); }
}

@keyframes icon-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

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


/* ==========================================================================
   20. Ad Styles
   ========================================================================== */
.ad-container {
  margin: 2rem 0;
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-secondary);
  border-radius: 0.5rem;
  overflow: hidden;
  width: 100%;
}

/* Ensure AdSense ins element takes full space */
.ad-container ins.adsbygoogle {
  width: 100%;
  min-height: inherit;
}

.ad-container.ad-header {
  margin: 1rem 0 2rem 0;
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}

.ad-container.ad-sidebar {
  margin: 1rem 0;
  max-width: 300px;
}

.ad-container.ad-inline {
  margin: 1.5rem 0;
}

.ad-container.ad-square {
  margin: 2rem auto;
  text-align: center;
}

.ad-container.ad-multiplex {
  margin: 2rem 0;
  min-height: 300px;
}

.ad-container.ad-footer {
  margin: 3rem auto 2rem;
  text-align: center;
}

/* Desktop-only vertical ad sidebar */
.desktop-only {
  display: none;
}

@media (min-width: 1600px) {
  .desktop-only {
    display: block;
  }
}

/* Mobile sticky ad bar (issue #369). It shows its themed chrome and takes
   taps only once AdSense has filled the slot (ins[data-ad-status="filled"]);
   until then (pending, unfilled, blocked) it is transparent and click-through
   but stays laid out, since SafeAd only inserts and requests the ad in a
   container that has width (display: none kept slots empty, issue #240).
   Browsers without :has() drop those rules and keep the themed bar.
   .ad-container.sticky-ad outranks adsense-fix.css's later .ad-container
   (position: relative). */
/* The bar holds a unit up to 100px tall plus its 0.5rem padding top and
   bottom (border-box), so a filled unit is never clipped (issue #378); the
   page padding below equals the bar height. */
:root {
  --sticky-ad-height: calc(100px + 1rem);
}

.ad-container.sticky-ad {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* .ad-container's 2rem margin lifted the fixed bar off the bottom edge. */
  margin: 0;
  box-sizing: border-box;
  max-height: var(--sticky-ad-height);
  background-color: var(--bg-primary);
  padding: 0.5rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}

.ad-container.sticky-ad:not(:has(ins[data-ad-status="filled"])) {
  background-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

.sticky-ad .adsbygoogle {
  max-height: calc(var(--sticky-ad-height) - 1rem);
}

/* Hide ads on very small screens for better UX */
@media (max-width: 320px) {
  .ad-container {
    display: none;
  }
}

/* Mobile only helper */
.mobile-only {
  display: none;
}

/* Responsive ad sizing and mobile utilities */
@media (max-width: 768px) {
  .ad-container.ad-header {
    max-width: 100%;
  }
  
  /* Room for the filled sticky ad bar so the end of the page scrolls clear of it. */
  body:has(.sticky-ad ins[data-ad-status="filled"]) {
    padding-bottom: var(--sticky-ad-height);
  }

  .mobile-only {
    display: block;
  }
}

/* Page Content Wrapper */
.page-content {
  width: 100%;
  overflow-x: clip;
}

/* Documentation Layout - OPTIMIZATION: Extract to docs.css for better code splitting */
.docs-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 3rem;
  align-items: flex-start;
  margin-top: 2rem;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  position: relative;
}

.docs-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 5rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 1rem;
  padding: 1.5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  z-index: 10;
  align-self: start;
  height: fit-content;
}

/* Custom scrollbar for docs navigation */
.docs-nav::-webkit-scrollbar {
  width: 6px;
}

.docs-nav::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.docs-nav::-webkit-scrollbar-thumb {
  background: var(--border-primary);
  border-radius: 3px;
}

.docs-nav::-webkit-scrollbar-thumb:hover {
  background: var(--border-secondary);
}

.docs-nav h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--brand-primary);
}

.docs-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-nav li {
  margin-bottom: 0.5rem;
}

.docs-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease, background-color 0.2s ease;
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  position: relative;
  cursor: pointer;
}

.docs-nav a:hover {
  color: var(--brand-primary);
  background-color: var(--bg-hover);
}

.docs-nav a.active {
  color: var(--brand-primary);
  background-color: rgba(59, 130, 246, 0.1);
}

.docs-nav a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 70%;
  background-color: var(--brand-primary);
  border-radius: 0 3px 3px 0;
}

.docs-content {
  max-width: 800px;
  width: 100%;
  overflow-x: hidden;
}

.docs-section,
.about-section {
  margin-bottom: 3rem;
  scroll-margin-top: 6rem;
}

.docs-section h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--brand-primary);
  border-bottom: 2px solid var(--border-primary);
  padding-bottom: 0.5rem;
}

.docs-section h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 2rem 0 1rem;
  color: var(--text-primary);
}

.docs-section h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
  color: var(--text-primary);
}

.docs-section p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.docs-section ul, .docs-section ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.docs-section li {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.docs-section strong {
  color: var(--text-primary);
  font-weight: 600;
}

.docs-section code {
  background-color: var(--bg-secondary);
  color: var(--brand-accent);
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 0.875rem;
}

.step-list {
  counter-reset: step-counter;
  list-style: none;
  padding: 0;
}

.step-list li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.5rem;
}

.step-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  background-color: var(--brand-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.875rem;
}

.alert {
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
  border-left: 4px solid;
}

.alert-info {
  background-color: rgba(59, 130, 246, 0.1);
  border-left-color: var(--brand-primary);
  color: var(--text-primary);
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-left-color: var(--status-warning);
  color: var(--text-primary);
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-left-color: var(--status-success);
  color: var(--text-primary);
}

.faq-item {
  margin-bottom: 2rem;
}

.faq-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 1024px) {
  .docs-layout {
    grid-template-columns: 200px 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .docs-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0;
  }
  
  .docs-nav {
    position: static;
    margin-bottom: 2rem;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  
  .docs-content {
    padding: 0 1rem;
  }
}

/* ==========================================================================
   26. Responsive / Media Queries
   ========================================================================== */
@media (max-width: 480px) {
  .container { 
    padding: 0 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .header-content { height: 4rem; gap: 0.5rem; padding: 0 0.5rem; }
  .logo { gap: 0.5rem; flex-shrink: 1; min-width: 0; }
  .logo-icon { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
  .logo-text { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo-subtitle { display: none; }
  .hero { padding: 2rem 0; min-height: 70vh; }
  .hero-title { font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.1; }
  .hero-subtitle { font-size: 0.9rem; margin-bottom: 2rem; }
  .hero-actions { flex-direction: column; gap: 0.75rem; }
  .btn-large { padding: 0.875rem 1.5rem; font-size: 0.9rem; width: 100%; }
  .upload-area { padding: 1.5rem 1rem; margin: 1rem 0; }
  .upload-icon { width: 3rem; height: 3rem; }
  .upload-text { font-size: 1rem; }
  .upload-hint { font-size: 0.8rem; }
  .features-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature-card { padding: 1.5rem; }
  .feature-icon { width: 4rem; height: 4rem; }
  .info-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-content { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
  .footer-links { justify-content: center; gap: 1.5rem; }
  .donate-cards { 
    grid-template-columns: 1fr; 
    gap: 1.5rem;
    width: 100%;
    max-width: 100%;
  }
  .donate-amounts { flex-wrap: wrap; gap: 0.375rem; }
  .btn-donate { padding: 0.375rem 0.75rem; font-size: 0.8rem; }
  
  /* Mobile donate card adjustments */
  .donate-card {
    padding: 1.5rem 1rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  
  /* Mobile performance optimizations - disable heavy animations */
  .hero-grid,
  .hero-background,
  .glitch-overlay,
  .floating-elements,
  .animated-bg-layer {
    display: none !important;
  }

  .floating-element {
    display: none;
  }
  
  /* Disable backdrop filters on mobile for performance */
  .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(10, 10, 10, 0.95);
  }
  
  /* Reduce only heavy animation complexity - preserve essential UI animations */
  .btn,
  .nav-link,
  .feature-card,
  .upload-area {
    transition-duration: 0.2s;
  }
  
  /* Mobile featured badge adjustments */
  .featured-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.75rem;
    top: -0.6rem;
  }
  
  .donate-card .btn-primary,
  .donate-card .btn-large {
    font-size: 0.8rem;
    padding: 0.625rem 0.75rem;
    min-height: 44px;
  }
  
  /* Crypto addresses on mobile */
  .crypto-address {
    word-break: break-all;
    font-size: 0.7rem;
    padding: 0.375rem;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .container { 
    padding: 0 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .hero { padding: 2.5rem 0; min-height: 75vh; }
  .hero-actions { flex-direction: column; gap: 1rem; }
  .btn-large { width: auto; min-width: 200px; }
  .upload-area { padding: 2rem 1.5rem; }
  .features-grid { grid-template-columns: 1fr; gap: 2rem; }
  .info-grid { grid-template-columns: 1fr; gap: 2rem; }
  
  /* Reduce animation complexity on tablets */
  .floating-element {
    opacity: 0.1 !important;
    animation-duration: 30s !important;
  }
  
  .floating-element.binary {
    display: none;
  }
  
  .floating-element:nth-child(n+7) {
    display: none;
  }
  .donate-cards { 
    grid-template-columns: 1fr; 
    gap: 2rem;
    width: 100%;
    max-width: 100%;
  }
  .footer-content { grid-template-columns: 1fr 1fr; text-align: left; gap: 2rem; }
}

/* Navigation collapse threshold.
   Deliberately its own breakpoint rather than reusing the 768px page-layout one.
   The bar holds seven links (Home, Analyzer, About, Documentation, Stats, Forum,
   Donate) alongside the logo, theme toggle and account widget, which needs roughly
   960px before the links stop crowding each other. A browser docked to half of a
   1080p/1440p screen lands around 760-960px — wide enough to clear 768px, so the
   full bar rendered with no room for it. Collapsing to the hamburger up to 1024px
   keeps the links legible at every width. */
@media (max-width: 1024px) {
  .desktop-nav { display: none; }
  .mobile-menu-toggle { display: flex; }
}

@media (min-width: 1025px) {
  .desktop-nav { display: flex; gap: 1.5rem; }
  .mobile-menu-toggle { display: none; }
  /* .open is also matched: `.mobile-nav.open` (0,2,0) outranks a bare
     `.mobile-nav` (0,1,0), so without it an open menu survives a resize
     to desktop width and leaves the overlay covering the page. */
  .mobile-nav,
  .mobile-nav.open { display: none; }
}

/* Spacing utilities */
.mt-2 { margin-top: 2rem; }
.text-center { text-align: center; }

/* ==========================================================================
   24. Light Mode Overrides
   ========================================================================== */
.light .btn-primary {
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
}

.light .btn-primary:hover:not(:disabled) {
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.25);
}

.light .card {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}

.light .card:hover {
  box-shadow: 0 8px 30px 0 rgba(37, 99, 235, 0.1);
}

.light .upload-area {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.light .upload-area:hover {
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

.light .upload-area.drag-over {
  background: rgba(37, 99, 235, 0.05);
  box-shadow: 0 15px 40px rgba(37, 99, 235, 0.2);
}

.light .file-preview {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.light .file-preview:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Feature cards in light mode - better contrast */
.light .feature-card {
  background: var(--bg-primary);
  border: 1px solid rgba(37, 99, 235, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.light .feature-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
  background: var(--bg-primary);
}

.light .feature-title {
  color: var(--text-primary);
  font-weight: 700;
}

.light .feature-description {
  color: #4a5568;
  font-weight: 400;
}

.light .feature-icon {
  color: var(--brand-primary);
}

/* Header adjustments for light mode */
.light .header {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--border-primary);
}

/* Hero section improvements for light mode */
.light .hero {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 50%, #e2e8f0 100%);
}

.light .hero-title {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 50%, var(--brand-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: brightness(0.9);
}

.light .hero-subtitle {
  color: #2d3748;
  font-weight: 500;
}

.light h3 {
  color: var(--brand-primary);
}

.light p {
  color: #4a5568;
}

/* Upload area text in light mode */
.light .upload-text {
  color: var(--text-primary);
  font-weight: 600;
}

.light .upload-hint {
  color: #718096;
}

.light .upload-icon {
  color: var(--brand-primary);
  opacity: 0.8;
}

/* Footer adjustments for light mode */
.light .footer {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

/* Analysis results adjustments for light mode */
.light .analysis-card {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
}

.light .code-block {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Light mode scrollbar */
.light ::-webkit-scrollbar {
  background-color: var(--bg-secondary);
}

.light ::-webkit-scrollbar-thumb {
  background-color: var(--border-secondary);
}

.light ::-webkit-scrollbar-thumb:hover {
  background-color: var(--border-primary);
}

/* Navigation improvements for light mode */
.light .nav-link {
  color: #4a5568;
  font-weight: 500;
}

.light .nav-link:hover {
  color: var(--brand-primary);
}

.light .nav-link.active {
  color: var(--brand-primary);
  font-weight: 600;
}

.light .logo-text {
  background: linear-gradient(to right, var(--brand-primary), var(--brand-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section backgrounds in light mode */
.light .comparison-section {
  background: #f7fafc;
}

.light .features-section,
.light .info-section {
  background: var(--bg-primary);
}

/* Ensure theme toggle is always visible */
.theme-toggle {
  z-index: 100;
}

/* Analysis progress (components/AnalysisProgress.tsx): a card that fills the space the page gives it. */
/* A manually placed ad: its box is the size of the unit, from first paint. */
.ad-container.ad-fixed-row { --w: 320px; --h: 100px; min-height: var(--h); }
@media (min-width: 500px) { .ad-container.ad-fixed-row { --w: 468px; --h: 60px; } }
@media (min-width: 800px) { .ad-container.ad-fixed-row { --w: 728px; --h: 90px; } }
.ad-fixed-row { text-align: center; }
.ad-container.ad-fixed-row ins.adsbygoogle { display: inline-block; vertical-align: top; width: var(--w); height: var(--h); min-height: 0; }
/* The page is at least one screen tall; a tall ad pushes it past that rather than squeezing the card below 24rem. */
.analyzer-live { display: grid; grid-template-rows: auto minmax(24rem, 1fr); min-height: calc(100dvh - 4.5rem - 1px); }
@media (max-width: 480px) { .analyzer-live { min-height: calc(100dvh - 4rem - 1px); } }
body:has(.sticky-ad ins[data-ad-status="filled"]) .analyzer-live { min-height: calc(100dvh - 4.5rem - 1px - var(--sticky-ad-height)); }
.analyzer-live .ad-header { margin: 0.75rem auto 0; }
.analyzer-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1rem; padding: 0.9rem 1.25rem; border: 1px solid var(--status-success); border-radius: 16px; background: var(--glass-bg); animation: progress-fade 0.5s; }
.analyzer-summary small { display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.analyzer-summary .btn { margin-left: auto; }
/* BSOD AI chat (components/BsodAiChat.tsx): the wand in the summary strip opens it. */
.ai-chat { --teal: #14b8a6; display: flex; flex-direction: column; max-height: min(36rem, 80dvh); margin: 1rem 0; border: 1px solid var(--glass-border); border-radius: 20px; background: var(--glass-bg); overflow: hidden; }
.light .ai-chat { --teal: #0d9488; }
.ai-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border-primary); }
.ai-avatar { flex: none; width: 3.25rem; height: 3.25rem; }
.ai-avatar .gr { width: 100%; height: 100%; }
.ai-title { flex: 1; min-width: 0; }
.ai-title b { display: block; font-size: 0.95rem; }
.ai-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--text-tertiary); }
.ai-head select { max-width: 11rem; min-height: 44px; padding: 0 0.5rem; border: 1px solid var(--border-secondary); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 0.8rem; }
.ai-x { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-primary); border-radius: 10px; background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; }
.ai-body { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; min-height: 8rem; padding: 0.9rem 1rem; overflow-y: auto; }
.ai-hello { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding-top: 0.5rem; text-align: center; }
.ai-hello-mascot .gr { width: 6.5rem; height: 6.5rem; }
.ai-hello p { margin: 0; max-width: 30ch; font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary); }
.ai-msg { max-width: 90%; padding: 0.6rem 0.8rem; border-radius: 16px; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-gm { white-space: normal; }
.ai-gm p { margin: 0; }
.ai-gm p + p, .ai-gm p + ul, .ai-gm ul + p { margin-top: 0.45rem; }
.ai-gm ul { margin: 0; padding-left: 1.1rem; }
.ai-gm li + li { margin-top: 0.2rem; }
.ai-gm strong { font-weight: 700; color: var(--text-primary); }
.ai-gm code { padding: 0.05rem 0.35rem; border-radius: 6px; background: rgba(127, 127, 127, 0.22); font: 0.82em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ai-me { align-self: flex-end; border-bottom-right-radius: 6px; background: #2563eb; color: #fff; }
.ai-gm { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--bg-tertiary); }
.ai-ev { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border-secondary); font: 0.72rem/1.5 ui-monospace, monospace; color: var(--text-secondary); white-space: normal; }
.ai-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); animation: ai-dot 1.2s ease-in-out infinite; }
.ai-dots i:nth-child(2) { animation-delay: 0.18s; }
.ai-dots i:nth-child(3) { animation-delay: 0.36s; }
.ai-caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--brand-accent); animation: ai-caret 1s steps(2) infinite; }
.ai-note { margin: 0; padding: 0.6rem 0.8rem; border: 1px solid; border-radius: 12px; font-size: 0.8rem; line-height: 1.45; }
.ai-note.warn { background: rgba(245, 158, 11, 0.15); border-color: var(--status-warning); color: var(--status-warning); }
.ai-note.info { background: var(--bg-tertiary); border-color: var(--border-primary); color: var(--text-secondary); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1rem 0.75rem; }
.ai-chip { min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--border-secondary); border-radius: 999px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.ai-chip:hover { border-color: var(--brand-accent); }
.ai-verify { padding: 0.5rem 1rem 1rem; text-align: center; }
.ai-verify p { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--text-secondary); }
.ai-foot { padding: 0.6rem 1rem 0.8rem; border-top: 1px solid var(--border-primary); }
.ai-comp { display: flex; gap: 0.5rem; }
.ai-comp input { flex: 1; min-width: 0; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--border-secondary); border-radius: 12px; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 0.9rem; }
.ai-send { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #2563eb; color: #fff; cursor: pointer; }
.ai-send:disabled, .ai-comp input:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-meta { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.4rem; font-size: 0.7rem; line-height: 1.4; color: var(--text-tertiary); }
/* The mascot as the chat's avatar: one pose per state (data-gs on the svg). */
[data-gs] { animation: ai-bob 3.2s ease-in-out infinite; }
[data-gs="talk"] .gr-mo { animation: ai-talk 0.5s ease-in-out infinite; }
[data-gs="think"] .gr-gear { opacity: 1; animation: spin 2.4s linear infinite; }
[data-gs="think"] .gr-pupil { translate: 2px -2px; }
[data-gs="think"] .gr-ar { rotate: -105deg; }
[data-gs="think"] .gr-bulb { fill: var(--teal); }
[data-gs="rest"] .gr-bulb { animation: none; opacity: 0.3; }
[data-gs="rest"] .gr-z { animation: progress-z 2.4s ease-out infinite; }
[data-gs="rest"] .gr-z2 { animation-delay: 0.8s; }
[data-gs="rest"] .gr-z3 { animation-delay: 1.6s; }
[data-gs="shrug"] .gr-al { rotate: 40deg; }
[data-gs="shrug"] .gr-ar { rotate: -40deg; }
[data-gs="shrug"] .gr-q { opacity: 1; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: 0.25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes ai-caret { 50% { opacity: 0; } }
@keyframes ai-bob { 50% { translate: 0 -3px; } }
@keyframes ai-talk { 50% { scale: 1 0.7; } }
.analyzer-live > .container { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; width: 100%; padding: 0.75rem 1.5rem 1rem; }

.progress { --glow: var(--brand-primary); --ga: 34%; --teal: #14b8a6; isolation: isolate; --pt: var(--brand-accent); --on: color-mix(in srgb, var(--brand-primary) 80%, transparent); --lens: color-mix(in srgb, var(--brand-primary) 34%, transparent); position: relative; flex: 1; min-height: 0; container: progress / size; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1rem; padding: 1.4rem 1.5rem 1rem; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 20px; background: var(--glass-bg); }
.light .progress { --pt: var(--brand-secondary); --ga: 16%; --teal: #0d9488; }
@media (max-width: 640px) { .progress { padding: 1rem 0.9rem 0.75rem; gap: 0.75rem; } }
@media (max-height: 720px) { .progress { padding: 0.9rem 1.1rem 0.7rem; gap: 0.6rem; } .analyzer-live .ad-header { margin-top: 0.5rem; } }
.progress-bar { position: absolute; inset: 0 0 auto; height: 3px; background: var(--border-primary); }
.progress-bar i { display: block; height: 100%; background: var(--brand-primary); transition: width 0.7s; }

.progress-head { display: flex; justify-content: space-between; gap: 1rem; }
.progress .progress-title { margin: 0 0 0.25rem; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.15; color: var(--text-primary); }
.progress-description, .progress-fact p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
.progress-notice { margin: 0.5rem 0 0; max-width: 62ch; padding: 0.5rem 0.75rem; border: 1px solid var(--status-warning); border-radius: 10px; font-size: 0.8rem; background: rgba(245, 158, 11, 0.15); color: var(--status-warning); }
.progress-time { flex: none; text-align: right; }
.progress-time b { display: block; font: 600 1.4rem/1.2 ui-monospace, monospace; }
.progress-cap, .progress-time small { display: block; font-size: 0.7rem; color: var(--text-tertiary); }
.progress-cap { letter-spacing: 0.08em; text-transform: uppercase; }
.progress-time .warn { color: var(--status-warning); }

.progress-body { container: body / size; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.25rem; min-height: 0; }
.progress-mem { position: relative; overflow: hidden; min-height: 0; padding: 10px; border: 1px solid var(--border-primary); border-radius: 14px; background: var(--bg-primary); }
/* One masked element draws the grid (22px tiles, 3px gaps); its child is the light that moves under the mask. */
.progress-cells { --g: 22px; position: relative; height: 100%; overflow: hidden; background: color-mix(in srgb, var(--brand-accent) 8%, transparent); mask-image: linear-gradient(90deg, #000 calc(var(--g) - 3px), #0000 0), linear-gradient(#000 calc(var(--g) - 3px), #0000 0); mask-size: var(--g) var(--g); mask-composite: intersect; }
.progress-cells i { position: absolute; inset: 0; background: var(--on); }
[data-s="uploading"] .progress-cells i { transform: scaleX(var(--p)); transform-origin: 0 0; transition: transform 0.3s; }
[data-s="queued"] .progress-cells i { background: radial-gradient(closest-side, var(--lens), #0000); animation: progress-breathe 3.2s ease-in-out infinite; }
[data-s="processing"] .progress-cells i { background: linear-gradient(90deg, #0000 35%, var(--on)); border-right: 2px solid var(--brand-accent); animation: progress-sweep 3.6s linear infinite; }
[data-s="downloading"] .progress-cells i { background: linear-gradient(#0000 35%, var(--on)); border-bottom: 2px solid var(--brand-accent); animation: progress-pour 1.7s ease-in infinite; }
[data-s="analyzing"] .progress-cells i { inset: auto; width: 38%; height: 85%; background: radial-gradient(closest-side, var(--lens), #0000); animation: progress-lens 9s ease-in-out infinite; }
[data-s="complete"] .progress-cells { background: color-mix(in srgb, var(--status-success) 16%, transparent); }
[data-s="complete"] .progress-cells i { background: var(--status-success); opacity: 0.4; animation: progress-bloom 0.9s ease-out; }
[data-s="complete"] .progress-bar i { background: var(--status-success); }

.progress-side { display: flex; flex-direction: column; gap: 0.9rem; min-height: 0; }

.progress-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.progress-step { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; padding: 6px 0; }
.progress-step::before { content: ""; position: absolute; left: 9px; top: 28px; bottom: -4px; width: 2px; background: var(--border-secondary); }
.progress-step:last-child::before { display: none; }
.progress-step[data-state="done"]::before { background: var(--brand-primary); }
.progress-node { position: relative; width: 20px; height: 20px; border: 2px solid var(--border-secondary); border-radius: 50%; background: var(--bg-primary); }
.progress-step[data-state="done"] .progress-node, .analyzer-summary .progress-node { background: var(--status-success); border-color: var(--status-success); color: var(--on-status-success); }
.progress-step[data-state="done"] .progress-node::after, .analyzer-summary .progress-node::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.progress-step[data-state="active"] .progress-node { border-color: var(--brand-primary) #0000 var(--brand-primary) var(--brand-primary); animation: spin 0.9s linear infinite; }
.progress-step[data-state="skip"] .progress-node { border-style: dashed; }
.progress-txt { min-width: 0; }
.progress-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }
[data-state="active"] .progress-label, [data-state="done"] .progress-label { color: var(--text-primary); }

/* Two lines are reserved and clamped, so a long fact cannot push past the card. */
.progress-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--border-primary); }
.progress-fact b { font-size: 0.7rem; line-height: 1.7; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pt); white-space: nowrap; }
.progress-fact p { min-height: 3em; font-size: 0.85rem; animation: progress-fade 0.5s; }

/* The mascot, the stage effects, the thought bubble and the log. */
.progress-fw { position: relative; flex: none; align-self: center; line-height: 0; }

.progress { --glow: var(--brand-primary); --ga: 34%; --teal: #14b8a6; isolation: isolate; border-color: color-mix(in srgb, var(--glow) 38%, var(--glass-border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent); }
.light .progress { --ga: 16%; --teal: #0d9488; }
.progress[data-s="analyzing"] { --glow: var(--teal); --on: color-mix(in srgb, var(--teal) 78%, transparent); --lens: color-mix(in srgb, var(--teal) 42%, transparent); }
.progress[data-s="complete"] { --glow: var(--status-success); }

/* aurora: two soft lights drifting behind the content, tinted by the stage */
.progress::before, .progress::after { content: ""; position: absolute; z-index: -1; width: 65%; height: 80%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) var(--ga), transparent), transparent); }
.progress::before { left: -12%; top: -30%; animation: progress-drift 14s ease-in-out infinite alternate; }
.progress::after { right: -12%; bottom: -35%; animation: progress-drift 18s ease-in-out infinite alternate-reverse; }

/* bloom: the lit cells glow */
.progress-mem { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--glow) 45%, transparent)); }
.light .progress-mem { filter: none; }
[data-s="uploading"] .progress-cells i { border-right: 2px solid var(--brand-accent); }
[data-s="complete"] .progress-cells i { animation: progress-bloom 0.9s ease-out, progress-glint 3s 1s ease-in-out infinite; }

/* every stage change sweeps a flash across the card (a remounted element in the app; two names here to restart it) */
.progress-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; animation: progress-flash 0.9s ease-out; background: linear-gradient(100deg, #0000 30%, color-mix(in srgb, var(--glow) 38%, transparent) 50%, #0000 70%); }

/* a glowing progress head, a shining title, steps that pop and pulse */
.progress-bar i { box-shadow: 0 0 12px 1px var(--glow); }
@media (forced-colors: none) { .progress .progress-title { background: linear-gradient(100deg, var(--text-primary) 40%, var(--pt) 50%, var(--text-primary) 60%) 100% 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: progress-shine 3.2s linear infinite; } }
[data-s="complete"] .progress-title { animation: none; background: none; color: var(--text-primary); }
.progress-step[data-state="done"] .progress-node { animation: progress-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.progress-step[data-state="active"] .progress-node { animation: spin 0.9s linear infinite, progress-halo 1.6s ease-out infinite; }


.progress-fx { position: absolute; inset: 0; pointer-events: none; }
.progress-mem::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(#0000 0 2px, rgba(0, 0, 0, 0.16) 2px 3px); }
.light .progress-mem::after { opacity: 0.25; }

/* ghost step numeral, outlined, bottom right of the grid */
.progress-fx::after { position: absolute; right: 14px; bottom: -0.12em; font: 800 min(9rem, 46cqh) / 1 ui-monospace, monospace; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--glow) 20%, transparent); }
[data-s="uploading"] .progress-fx::after { content: "01"; }
[data-s="queued"] .progress-fx::after { content: "02"; }
[data-s="processing"] .progress-fx::after { content: "03"; }
[data-s="downloading"] .progress-fx::after { content: "04"; }
[data-s="analyzing"] .progress-fx::after { content: "05"; }
[data-s="complete"] .progress-fx::after { content: "OK"; }

/* particles: one set of twelve, a different behaviour per stage */
.progress-fx b { position: absolute; width: 6px; height: 6px; border-radius: 2px; background: var(--glow); opacity: 0; }
[data-s="uploading"] .progress-fx b { animation: progress-fly 2.2s linear infinite; }
[data-s="queued"] .progress-fx b { top: 100% !important; width: 4px; height: 4px; border-radius: 50%; animation: progress-rise 7s linear infinite; }
[data-s="processing"] .progress-fx b { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-accent); animation: progress-spark 1.3s ease-in-out infinite; }
[data-s="downloading"] .progress-fx b { top: -12px !important; animation: progress-fall 2.4s linear infinite; }
[data-s="analyzing"] .progress-fx b { top: 100% !important; width: 5px; height: 5px; border-radius: 50%; animation: progress-rise 3.4s ease-in infinite; }
[data-s="complete"] .progress-fx b { top: -12px !important; width: 7px; height: 10px; animation: progress-confetti 2.6s linear infinite; }
[data-s="complete"] .progress-fx b:nth-child(3n) { background: #fbbf24; }
[data-s="complete"] .progress-fx b:nth-child(3n+1) { background: #6ee7b7; }
[data-s="complete"] .progress-fx b:nth-child(3n+2) { background: #f472b6; }

/* a typing log in the corner of the grid */
.progress-log { display: flex; flex-direction: column; gap: 2px; position: absolute; left: 14px; bottom: 12px; z-index: 1; padding: 6px 10px; border: 1px solid var(--border-primary); border-radius: 8px; background: color-mix(in srgb, var(--bg-primary) 74%, transparent); font: 11px/1.5 ui-monospace, monospace; color: var(--text-primary); }
.progress-log span { display: block; white-space: nowrap; animation: progress-type 1.3s steps(26) both; }
.progress-log span::before { content: "\25B8  "; color: var(--pt); }
.progress-log span:nth-child(2) { animation-delay: 1.4s; }
.progress-log span:nth-child(3) { animation-delay: 2.8s; }
/* hidden with visibility, never display: a container query that toggles display makes Chrome cancel and restart every animation inside, which made the log and the bubble retype and pop in again about once a second */
@container body (max-height: 200px) { .progress-log { visibility: hidden; } }

/* the active step shows what it is doing */
.progress-txt { min-width: 0; }
.progress-cmd { display: none; font: 11px/1.4 ui-monospace, monospace; color: var(--pt); }
.progress-step[data-state="active"] .progress-cmd, [data-state="skip"] .progress-cmd { display: block; }
[data-state="skip"] .progress-cmd { color: var(--status-warning); }
.progress-step[data-state="active"] .progress-cmd::after { content: ""; display: inline-block; width: 6px; height: 11px; margin-left: 3px; vertical-align: -2px; background: currentColor; animation: progress-caret 1s steps(2) infinite; }

/* ======== the gremlin: an original blue-screen creature. His faces and acts are drawn from utils/mascotActs.ts; the .a-* rules below style each act ======== */
.gr { display: block; width: 6.5rem; height: 6.5rem; overflow: visible; }
.gr * { transform-box: fill-box; }
.gr-head { fill: var(--brand-primary); transition: fill 0.5s; }
.gr-screen { fill: color-mix(in srgb, var(--brand-primary) 42%, #000); transition: fill 0.5s; }
.gr-ear, .gr-limb { fill: var(--brand-secondary); transition: fill 0.5s; }
.gr-stem { stroke: var(--brand-secondary); stroke-width: 3; stroke-linecap: round; }
.gr-bulb { fill: var(--brand-accent); transform-origin: center; animation: progress-pulse 2s ease-in-out infinite; }
.gr-lid { fill: color-mix(in srgb, var(--brand-primary) 42%, #000); }
.gr-lidline { stroke: color-mix(in srgb, var(--brand-primary) 42%, #000); }
.gr-eye { transform-origin: center; animation: progress-blink 4.6s infinite; }
.gr-eyes, .gr-pupil { transform-origin: center; transition: translate 0.5s ease, scale 0.5s ease; }
.gr-mo { transform-origin: center; }
.gr-limb, .gr-top, .gr-ear { transition: rotate 0.7s ease, scale 0.7s ease, translate 0.7s ease, opacity 0.5s ease; }
.gr-top { transform-origin: 50% 100%; }
.gr-al { transform-origin: 100% 50%; }
.gr-ar { transform-origin: 0 50%; }
.gr-fl, .gr-fr { transform-origin: 50% 0; }
.gr-prop { opacity: 0; }
.gr-gear { fill: none; stroke: var(--teal, #14b8a6); stroke-width: 5; stroke-dasharray: 4.2 3.2; transform-origin: center; }
.gr-z { fill: var(--brand-accent); font: 700 12px ui-monospace, monospace; }
.gr-q { fill: #fff; font: 800 18px ui-sans-serif, system-ui, sans-serif; }
.m .gr-top { animation: k-bob 3.6s ease-in-out infinite; }
/* acts: props, poses and the face each one wears */
@keyframes k-ty1{0%,6%{clip-path:inset(0 100% 0 0)}16%,90%{clip-path:inset(0)}97%,100%{clip-path:inset(0 100% 0 0)}}@keyframes k-ty2{0%,24%{clip-path:inset(0 100% 0 0)}32%,90%{clip-path:inset(0)}97%,100%{clip-path:inset(0 100% 0 0)}}@keyframes k-ty3{0%,40%{clip-path:inset(0 100% 0 0)}46%,90%{clip-path:inset(0)}97%,100%{clip-path:inset(0 100% 0 0)}}
.a-type .ty-l1{animation:k-ty1 7s steps(14) infinite}.a-type .ty-l2{animation:k-ty2 7s steps(7) infinite}.a-type .ty-l3{animation:k-ty3 7s steps(5) infinite}
.a-type .ty-cur{animation:k-caret 1.2s steps(2) infinite}
.a-type .gr-al{animation:k-tapL 1.3s ease-in-out infinite alternate}.a-type .gr-ar{animation:k-tapR 1.3s ease-in-out -.65s infinite alternate}
.a-type .gr-pupil{translate:0 3px}.a-type .ty-logo{animation:k-glow 2.6s ease-in-out infinite}
.a-type .ty-keys rect{animation:k-key 1.3s ease-in-out infinite}.a-type .ty-keys rect:nth-child(2n){animation-delay:-.4s}.a-type .ty-keys rect:nth-child(3n){animation-delay:-.8s}
.a-coffee .gr-ar{scale:1.6 1;animation:k-press 7s ease-in-out infinite}
.a-coffee .cf-lamp{animation:k-lamp 7s ease-in-out infinite}.a-coffee .cf-bar{transform-origin:0 50%;animation:k-fill 7s ease-in-out infinite}
.a-coffee .cf-drip{animation:k-gate 7s ease-in-out infinite}.a-coffee .cf-drop{animation:k-drop 1.2s ease-in infinite}
.a-coffee .cf-level{transform-origin:50% 100%;animation:k-level 7s ease-in-out infinite}
.a-coffee .cf-steam{animation:k-gate2 7s ease-in-out infinite}.a-coffee .cf-s1{animation:k-steam 2.4s ease-in-out infinite}.a-coffee .cf-s2{animation:k-steam 2.4s ease-in-out -1.2s infinite}
.a-coffee .cf-e1{animation:gOff60_92 7s ease-in-out infinite}
.a-coffee .cf-e2{opacity:0;animation:gOn60_92 7s ease-in-out infinite}
.a-read .gr-pupil{animation:k-scan 2.4s ease-in-out infinite alternate}.a-read .gr-al{rotate:-40deg}.a-read .gr-ar{rotate:40deg}
.a-read .rd-flip{transform-origin:0 50%;opacity:0;animation:k-flip 5s ease-in-out infinite}
.a-nap .gr-bulb{animation:none;opacity:.3}
.a-nap .gr-top{animation:k-breathe 4s ease-in-out infinite}.a-nap .np-cap{transform-origin:50% 100%;animation:k-breathe 4s ease-in-out infinite}
.a-nap .np-pom{animation:k-sway 4s ease-in-out infinite;transform-origin:50% 100%}
.a-nap .np-z1{animation:k-z 4s ease-out infinite}.a-nap .np-z2{animation:k-z 4s ease-out 1.3s infinite}.a-nap .np-z3{animation:k-z 4s ease-out 2.6s infinite}
.a-nap .gr-al{rotate:-20deg}.a-nap .gr-ar{rotate:20deg}
.a-plane .gr-ar{animation:k-throw 3s cubic-bezier(.3,.7,.3,1) infinite}.a-plane .gr-al{rotate:12deg}
.a-plane .pl-plane{translate:142px 62px;animation:k-fly 3s cubic-bezier(.3,.6,.4,1) infinite}
.a-plane .pl-trail{animation:k-trail 3s ease-out infinite}.a-plane .gr-pupil{translate:3px -2px}
.a-fish .gr-ar{rotate:-12deg;animation:k-jerk 6s ease-in-out infinite}.a-fish .gr-al{rotate:-18deg}
.a-fish .fs-bob{animation:k-bob2 2.4s ease-in-out infinite}.a-fish .fs-float{animation:k-dip 6s ease-in-out infinite}
.a-fish .fs-block{animation:k-catch 6s ease-in-out infinite}.a-fish .fs-w1{animation:k-wave 3s ease-in-out infinite alternate}
.a-fish .gr-pupil{translate:3px 2px}
.a-fish .fs-eh{animation:gOff56_72 6s ease-in-out infinite}.a-fish .fs-mc{animation:gOff56_72 6s ease-in-out infinite}.a-fish .fs-bf{animation:gOff56_72 6s ease-in-out infinite}.a-fish .fs-ew{opacity:0;animation:gOn56_72 6s ease-in-out infinite}.a-fish .fs-mo{opacity:0;animation:gOn56_72 6s ease-in-out infinite}.a-fish .fs-br{opacity:0;animation:gOn56_72 6s ease-in-out infinite}
.a-dance .gr-top{animation:k-groove 2.4s ease-in-out infinite}.a-dance .gr-al{animation:k-pumpL 2.4s ease-in-out infinite alternate}.a-dance .gr-ar{animation:k-pumpR 2.4s ease-in-out infinite alternate}
.a-dance .gr-fl{animation:k-tap 1.2s ease-in-out infinite alternate}.a-dance .gr-fr{animation:k-tap 1.2s ease-in-out -.6s infinite alternate-reverse}
.a-dance .dn-n1{animation:k-note 2.4s ease-out infinite}.a-dance .dn-n2{animation:k-note 2.4s ease-out 1.2s infinite}
.a-dance .dn-eq rect{transform-origin:50% 100%;animation:k-eq 1.6s ease-in-out infinite alternate}.a-dance .dn-eq rect:nth-child(2){animation-duration:1.3s;animation-delay:-.4s}.a-dance .dn-eq rect:nth-child(3){animation-duration:1.9s;animation-delay:-.9s}.a-dance .dn-eq rect:nth-child(4){animation-duration:1.5s;animation-delay:-.2s}
.a-juggle .gr-al{animation:k-pumpL 1.3s ease-in-out infinite alternate}.a-juggle .gr-ar{animation:k-pumpR 1.3s ease-in-out infinite alternate}
.a-juggle .jg1{animation:k-juggle 2.6s linear infinite}.a-juggle .jg2{animation:k-juggle 2.6s linear -.87s infinite}.a-juggle .jg3{animation:k-juggle 2.6s linear -1.73s infinite}
.a-juggle .gr-pupil{translate:0 -3px;animation:k-eyesjug 2.6s ease-in-out infinite}.a-juggle .gr-bulb{fill:#14b8a6}
.a-stack .sk{transform-origin:50% 100%;animation:k-tip 8s ease-in-out infinite}
.a-stack .sk1{animation:k-drop1 8s ease-in infinite}.a-stack .sk2{animation:k-drop2 8s ease-in infinite}.a-stack .sk3{animation:k-drop3 8s ease-in infinite}.a-stack .sk4{animation:k-drop4 8s ease-in infinite}
.a-stack .gr-ar{rotate:-30deg;animation:k-place 8s ease-in-out infinite}.a-stack .sk-bang{animation:k-bang 8s ease-in-out infinite}
.a-stack .sk-ms{animation:gOff66_90 8s ease-in-out infinite}.a-stack .sk-er{animation:gOff66_90 8s ease-in-out infinite}.a-stack .sk-ew{opacity:0;animation:gOn66_90 8s ease-in-out infinite}.a-stack .sk-mf{opacity:0;animation:gOn66_90 8s ease-in-out infinite}.a-stack .sk-bw{opacity:0;animation:gOn66_90 8s ease-in-out infinite}
.a-driver .gr-al{rotate:-8deg;animation:k-point 3.2s ease-in-out infinite}.a-driver .gr-pupil{translate:-3px 2px}
.a-driver .dr-lens{animation:k-lens 3.2s ease-in-out infinite}.a-driver .dr-chip{transform-origin:50% 50%;animation:k-chip 3.2s ease-in-out infinite}
.a-driver .dr-bang{animation:k-pop 3.2s ease-in-out infinite}.a-driver .gr-ar{rotate:20deg}
.a-memory .mm-dimm{animation:k-seat 6s ease-in-out infinite}.a-memory .mm-puff circle{opacity:0;animation:k-puff 6s ease-out infinite}.a-memory .mm-p2{animation-delay:.2s!important}.a-memory .mm-p3{animation-delay:.4s!important}
.a-memory .mm-ok{transform-origin:50% 50%;animation:k-ok 6s ease-in-out infinite}
.a-memory .gr-al{rotate:-25deg}.a-memory .gr-ar{rotate:25deg}
.a-memory .mm-ms{animation:gOff12_36 6s ease-in-out infinite}.a-memory .mm-mo{opacity:0;animation:gOn12_36 6s ease-in-out infinite}.a-memory .mm-es{opacity:0;animation:gOn12_36 6s ease-in-out infinite}.a-memory .mm-eh{opacity:0;animation:gOn66_90 6s ease-in-out infinite}.a-memory .mm-ch{opacity:0;animation:gOn66_90 6s ease-in-out infinite}.a-memory .mm-er{animation:k-er 6s ease-in-out infinite}
.a-good .gr-head{fill:#10b981}.a-good .gr-screen{fill:#064e3b}.a-good .gr-ear,.a-good .gr-limb{fill:#047857}.a-good .gr-stem{stroke:#047857}.a-good .gr-bulb{fill:#6ee7b7}.a-good .gr-eye{opacity:0}
.a-good .gd-shades{animation:k-shades 4s cubic-bezier(.3,1.4,.5,1) infinite}.a-good .gd-glint{animation:k-glint 4s ease-in-out infinite}
.a-good .gd-ok{transform-origin:50% 50%;animation:k-ok 4s ease-in-out infinite}.a-good .gd-conf rect{animation:k-conf 4s ease-in infinite}.a-good .gd-conf rect:nth-child(2n){animation-delay:.5s}
.a-good .gr-al{rotate:55deg;animation:k-cheerL 1.6s ease-in-out infinite alternate}.a-good .gr-ar{rotate:-55deg;animation:k-cheerR 1.6s ease-in-out infinite alternate}
.a-hot .gr-ar{rotate:-30deg;animation:k-fan 1.4s ease-in-out infinite alternate}.a-hot .ht-fan{transform-origin:0 50%;}
.a-hot .ht-ch{animation:k-flush 3s ease-in-out infinite}.a-hot .ht-hg{transform-origin:50% 100%;animation:k-merc 3s ease-in-out infinite}
.a-hot .ht-d1{animation:k-sweat 2.2s ease-in infinite}.a-hot .ht-d2{animation:k-sweat 2.2s ease-in 1.1s infinite}
.a-hot .ht-wind path{animation:k-wind 1.4s ease-in-out infinite alternate}.a-hot .ht-w2{animation-delay:-.4s!important}.a-hot .ht-w3{animation-delay:-.8s!important}
.a-hot .gr-al{rotate:22deg}
.a-unsure .gr-top{animation:k-tilt 4s ease-in-out infinite}.a-unsure .gr-pupil{animation:k-wander 4s ease-in-out infinite}
.a-unsure .gr-al{rotate:32deg;animation:k-shrugL 4s ease-in-out infinite}.a-unsure .gr-ar{rotate:-32deg;animation:k-shrugR 4s ease-in-out infinite}
.a-unsure .us-q1{animation:k-q 4s ease-in-out infinite}.a-unsure .us-q2{animation:k-q 4s ease-in-out 1.3s infinite}.a-unsure .us-q3{animation:k-q 4s ease-in-out 2.4s infinite}
.a-lift .lf-dl{transform-box:view-box;transform-origin:22px 73px;animation:k-liftL 5s ease-in-out infinite}.a-lift .lf-dr{transform-box:view-box;transform-origin:118px 73px;animation:k-liftR 5s ease-in-out infinite}.a-lift .gr-al{rotate:78deg;animation:k-liftL 5s ease-in-out infinite}.a-lift .gr-ar{rotate:-78deg;animation:k-liftR 5s ease-in-out infinite}
.a-lift .gr-top{animation:k-squat 5s ease-in-out infinite}.a-lift .gr-fl,.a-lift .gr-fr{animation:k-feet 5s ease-in-out infinite}
.a-lift .lf-sw{animation:k-sweat2 5s ease-in infinite}.a-lift .lf-puff{animation:k-phew 5s ease-out infinite}
.a-lift .lf-ms{animation:gOff8_62 5s ease-in-out infinite}.a-lift .lf-mg{opacity:0;animation:gOn8_62 5s ease-in-out infinite}.a-lift .lf-bf{opacity:0;animation:gOn8_62 5s ease-in-out infinite}.a-lift .lf-er{animation:gOff66_92 5s ease-in-out infinite}.a-lift .lf-ec{opacity:0;animation:gOn66_92 5s ease-in-out infinite}
@keyframes k-er{0%,10%{opacity:1}14%,36%{opacity:0}40%,62%{opacity:1}66%,90%{opacity:0}96%,100%{opacity:1}}
@keyframes gOff60_92{0%,57%{opacity:1}60%,92%{opacity:0}95%,100%{opacity:1}}
@keyframes gOn60_92{0%,57%{opacity:0}60%,92%{opacity:1}95%,100%{opacity:0}}
@keyframes gOff56_72{0%,53%{opacity:1}56%,72%{opacity:0}75%,100%{opacity:1}}
@keyframes gOn56_72{0%,53%{opacity:0}56%,72%{opacity:1}75%,100%{opacity:0}}
@keyframes gOff66_90{0%,63%{opacity:1}66%,90%{opacity:0}93%,100%{opacity:1}}
@keyframes gOn66_90{0%,63%{opacity:0}66%,90%{opacity:1}93%,100%{opacity:0}}
@keyframes gOff12_36{0%,9%{opacity:1}12%,36%{opacity:0}39%,100%{opacity:1}}
@keyframes gOn12_36{0%,9%{opacity:0}12%,36%{opacity:1}39%,100%{opacity:0}}
@keyframes gOff8_62{0%,5%{opacity:1}8%,62%{opacity:0}65%,100%{opacity:1}}
@keyframes gOn8_62{0%,5%{opacity:0}8%,62%{opacity:1}65%,100%{opacity:0}}
@keyframes gOff66_92{0%,63%{opacity:1}66%,92%{opacity:0}95%,100%{opacity:1}}
@keyframes gOn66_92{0%,63%{opacity:0}66%,92%{opacity:1}95%,100%{opacity:0}}
@keyframes k-bob{50%{translate:0 -3px}}
@keyframes k-caret{50%{opacity:0}}
@keyframes k-glow{50%{opacity:.35}}
@keyframes k-key{50%{opacity:.25}}
@keyframes k-tapL{from{rotate:-60deg}to{rotate:-70deg}}
@keyframes k-tapR{from{rotate:60deg}to{rotate:70deg}}
@keyframes k-tap{from{rotate:0deg}to{rotate:-10deg}}
@keyframes k-press{0%,6%{translate:0 0}10%{translate:6px 0}15%,100%{translate:0 0}}
@keyframes k-lamp{0%,9%{opacity:.25}12%,60%{opacity:1}66%,100%{opacity:.25}}
@keyframes k-fill{0%,10%{scale:0 1}58%,100%{scale:1 1}}
@keyframes k-gate{0%,11%{opacity:0}14%,56%{opacity:1}60%,100%{opacity:0}}
@keyframes k-gate2{0%,56%{opacity:0}62%,92%{opacity:1}100%{opacity:0}}
@keyframes k-drop{0%{translate:0 0;opacity:1}85%{translate:0 12px;opacity:1}100%{translate:0 14px;opacity:0}}
@keyframes k-level{0%,12%{scale:1 .05}58%,100%{scale:1 1}}
@keyframes k-steam{0%{translate:0 4px;opacity:0}30%{opacity:.9}100%{translate:0 -12px;opacity:0}}
@keyframes k-bliss{0%,60%{scale:1 1}66%,88%{scale:1 .15}94%,100%{scale:1 1}}
@keyframes k-scan{from{translate:-3px 1px}to{translate:3px 1px}}
@keyframes k-flip{0%,55%{opacity:0;scale:1 1}57%{opacity:1;scale:1 1}70%{opacity:1;scale:-1 1.06}74%{opacity:0;scale:-1 1}100%{opacity:0;scale:-1 1}}
@keyframes k-breathe{50%{scale:1 1.025}}
@keyframes k-sway{50%{rotate:12deg}}
@keyframes k-bub{0%{scale:.3;opacity:0}20%{opacity:.8}70%{scale:1.5;opacity:.8}85%,100%{scale:1.7;opacity:0}}
@keyframes k-z{0%{opacity:0;translate:0 8px}25%{opacity:1}100%{opacity:0;translate:8px -16px}}
@keyframes k-throw{0%{rotate:24deg}12%{rotate:-62deg}34%,100%{rotate:6deg}}
@keyframes k-fly{0%,8%{opacity:0;scale:.5;rotate:0deg;translate:142px 62px}16%{opacity:1}100%{opacity:0;scale:1;rotate:-6deg;translate:200px 8px}}
@keyframes k-trail{0%,12%{opacity:0;stroke-dashoffset:0}30%{opacity:.9}100%{opacity:0;stroke-dashoffset:-30}}
@keyframes k-jerk{0%,52%{rotate:-12deg}58%{rotate:-34deg}68%,100%{rotate:-12deg}}
@keyframes k-bob2{50%{translate:0 3px}}
@keyframes k-dip{0%,50%{translate:0 0}54%{translate:0 8px}58%{translate:0 -2px}64%,100%{translate:0 0}}
@keyframes k-catch{0%,56%{opacity:0;translate:0 0}58%{opacity:1}82%{opacity:1;translate:0 -36px}90%{opacity:1;translate:0 -40px;scale:1.15}96%,100%{opacity:0;translate:0 -40px}}
@keyframes k-wave{from{translate:-4px 0}to{translate:4px 0}}
@keyframes k-groove{0%,100%{translate:0 0;rotate:-2.5deg}50%{translate:0 -4px;rotate:2.5deg}}
@keyframes k-pumpL{from{rotate:-14deg}to{rotate:14deg}}
@keyframes k-pumpR{from{rotate:14deg}to{rotate:-14deg}}
@keyframes k-note{0%{opacity:0;translate:0 10px}25%{opacity:1}100%{opacity:0;translate:6px -26px}}
@keyframes k-eq{from{scale:1 .25}to{scale:1 1}}
@keyframes k-juggle{0%{translate:-26px 4px}25%{translate:0 -24px}50%{translate:26px 4px}75%{translate:0 20px}100%{translate:-26px 4px}}
@keyframes k-eyesjug{25%{translate:0 -3px}50%{translate:3px -3px}75%{translate:0 -1px}}
@keyframes k-tip{0%,66%{rotate:0deg;opacity:1}72%{rotate:5deg}78%{rotate:-4deg}86%{rotate:22deg;translate:10px 4px;opacity:1}92%,100%{rotate:22deg;translate:12px 6px;opacity:0}}
@keyframes k-drop1{0%,4%{opacity:0;translate:0 -70px}9%{opacity:1;translate:0 0}11%{translate:0 -3px}13%,100%{opacity:1;translate:0 0}}
@keyframes k-drop2{0%,18%{opacity:0;translate:0 -70px}23%{opacity:1;translate:0 0}25%{translate:0 -3px}27%,100%{opacity:1;translate:0 0}}
@keyframes k-drop3{0%,32%{opacity:0;translate:0 -70px}37%{opacity:1;translate:0 0}39%{translate:0 -3px}41%,100%{opacity:1;translate:0 0}}
@keyframes k-drop4{0%,46%{opacity:0;translate:0 -70px}51%{opacity:1;translate:0 0}53%{translate:0 -3px}55%,100%{opacity:1;translate:0 0}}
@keyframes k-place{0%,2%{rotate:-30deg}8%{rotate:-58deg}14%,20%{rotate:-30deg}22%{rotate:-58deg}28%,34%{rotate:-30deg}36%{rotate:-58deg}42%,48%{rotate:-30deg}50%{rotate:-58deg}56%,100%{rotate:-30deg}}
@keyframes k-wide{0%,64%{scale:1 1}70%,84%{scale:1.3 1.3}92%,100%{scale:1 1}}
@keyframes k-bang{0%,66%{opacity:0;translate:0 4px}72%,84%{opacity:1;translate:0 -4px}90%,100%{opacity:0}}
@keyframes k-point{0%,100%{rotate:-8deg}50%{rotate:-18deg}}
@keyframes k-lens{0%,100%{translate:0 0}50%{translate:4px 3px}}
@keyframes k-chip{0%,100%{scale:1}50%{scale:1.1}}
@keyframes k-pop{0%,25%{opacity:0;translate:0 6px;scale:.6}40%,75%{opacity:1;translate:0 -4px;scale:1}90%,100%{opacity:0}}
@keyframes k-o{0%,8%{opacity:0}14%,34%{opacity:1}42%,100%{opacity:0}}
@keyframes k-puff{0%,16%{opacity:0;translate:0 0}24%{opacity:.8}40%,100%{opacity:0;translate:22px -8px}}
@keyframes k-seat{0%,44%{translate:0 -12px}60%{translate:0 2px}64%{translate:0 -1px}68%,88%{translate:0 0}96%,100%{translate:0 -12px}}
@keyframes k-ok{0%,60%{opacity:0;scale:.3}68%{opacity:1;scale:1.2}74%,88%{opacity:1;scale:1}96%,100%{opacity:0;scale:.3}}
@keyframes k-squint{0%,8%{scale:1 1}14%,34%{scale:1 .35}42%,100%{scale:1 1}}
@keyframes k-shades{0%,12%{translate:0 -34px;opacity:0}30%,86%{translate:0 0;opacity:1}96%,100%{translate:0 -34px;opacity:0}}
@keyframes k-glint{0%,40%{translate:-6px 0;opacity:0}50%{opacity:.8}60%,100%{translate:44px 0;opacity:0}}
@keyframes k-conf{0%,30%{opacity:0;translate:0 -16px}40%{opacity:1}100%{opacity:0;translate:6px 60px;rotate:200deg}}
@keyframes k-cheerL{from{rotate:48deg}to{rotate:64deg}}
@keyframes k-cheerR{from{rotate:-48deg}to{rotate:-64deg}}
@keyframes k-fan{from{rotate:-24deg}to{rotate:-44deg}}
@keyframes k-flush{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes k-merc{0%{scale:1 .35}60%,100%{scale:1 1}}
@keyframes k-sweat{0%{opacity:0;translate:0 0}15%{opacity:1}100%{opacity:0;translate:0 18px}}
@keyframes k-wind{from{translate:0 0;opacity:.2}to{translate:10px 0;opacity:.8}}
@keyframes k-tilt{0%,100%{rotate:-5deg}50%{rotate:5deg}}
@keyframes k-wander{0%,100%{translate:-3px -2px}33%{translate:3px -2px}66%{translate:0 3px}}
@keyframes k-shrugL{0%,100%{rotate:24deg}50%{rotate:40deg}}
@keyframes k-shrugR{0%,100%{rotate:-24deg}50%{rotate:-40deg}}
@keyframes k-q{0%{opacity:0;translate:0 8px}20%,60%{opacity:1;translate:0 0}85%,100%{opacity:0;translate:0 -8px}}
@keyframes k-press2{0%,10%{translate:0 40px}35%,60%{translate:0 0}85%,100%{translate:0 40px}}
@keyframes k-liftL{0%,10%{rotate:30deg}35%,60%{rotate:84deg}85%,100%{rotate:30deg}}
@keyframes k-liftR{0%,10%{rotate:-30deg}35%,60%{rotate:-84deg}85%,100%{rotate:-30deg}}
@keyframes k-squat{0%,10%{translate:0 4px}35%,60%{translate:0 -2px}85%,100%{translate:0 4px}}
@keyframes k-feet{0%,10%{scale:1 .8}35%,60%{scale:1 1}85%,100%{scale:1 .8}}
@keyframes k-sweat2{0%,50%{opacity:0;translate:0 0}60%{opacity:1}100%{opacity:0;translate:0 18px}}
@keyframes k-phew{0%,84%{opacity:0;translate:0 0}90%{opacity:.8}100%{opacity:0;translate:16px -6px}}
@keyframes k-grit{0%,10%{transform:scaleY(1)}35%,60%{transform:scaleY(-1)}85%,100%{transform:scaleY(1)}}
.a-good .gr-lid { fill: #064e3b; }

/* the mascot's box in the card: an act is drawn in a wider box than he is; the narrow layout crops it to him and drops the props beside him */
.progress-fw { align-self: flex-start; }
.progress-mascot .gr { width: 13.5rem; height: 11.34rem; }
@container progress (max-width: 620px) or (max-height: 480px) {
  .progress-fw { align-self: center; }
  .progress-mascot { width: 4.4rem; height: 4.92rem; overflow: hidden; }
  .progress-mascot .gr { width: 6.55rem; height: 5.5rem; margin: -0.26rem 0 0 -0.94rem; }
  .progress-mascot .far { visibility: hidden; }
}

/* the thought bubble: what the act says; a long wait brings three lines */
.progress-think { position: absolute; right: calc(100% - 0.5rem); top: 0.4rem; z-index: 3; display: grid; width: max-content; max-width: 9.5rem; padding: 7px 11px; border: 1px solid var(--border-secondary); border-radius: 16px; background: var(--bg-primary); box-shadow: 0 6px 16px -8px var(--shadow-color); font: 600 12px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-primary); animation: progress-popin 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.progress-think::before, .progress-think::after { content: ""; position: absolute; border: 1px solid var(--border-secondary); border-radius: 50%; background: var(--bg-primary); }
.progress-think::before { right: -9px; top: 68%; width: 10px; height: 10px; }
.progress-think::after { right: -18px; top: 92%; width: 6px; height: 6px; }
.progress-think span { grid-area: 1 / 1; opacity: 0; animation: progress-thought 7.5s infinite; }
.progress-think span:nth-child(2) { animation-delay: 2.5s; }
.progress-think span:nth-child(3) { animation-delay: 5s; }
.progress-think span:only-child { opacity: 1; animation: none; }
@container progress (max-width: 620px) or (max-height: 480px) {
  .progress-think { left: 0; right: auto; top: auto; bottom: calc(100% + 14px); }
  .progress-think::before { left: 16px; right: auto; top: auto; bottom: -9px; }
  .progress-think::after { left: 10px; right: auto; top: auto; bottom: -17px; }
}
@container body (max-height: 200px) { .progress-think { visibility: hidden; } }

@container progress (max-width: 620px) or (max-height: 480px) {
  .progress-description { -webkit-line-clamp: 1; }
  .progress-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0.75rem; }
  .progress-side { flex-direction: row; align-items: center; }
  .progress-step[data-state="active"] .progress-cmd, .progress-step[data-state="skip"] .progress-cmd { visibility: hidden; max-height: 0; overflow: hidden; }
  .progress-log { top: 12px; bottom: auto; }
  .progress-steps { flex: 1; flex-direction: row; }
  .progress-step { display: flex; flex: 1; flex-direction: column; align-items: center; min-width: 0; padding: 0; gap: 5px; text-align: center; }
  .progress-step::before { left: calc(50% + 14px); right: calc(-50% + 14px); top: 9px; bottom: auto; width: auto; height: 2px; }
  .progress-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 0.65rem; }
  .progress-time small { visibility: hidden; position: absolute; }
  .progress-fact { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

@keyframes progress-breathe { 0%, 100% { opacity: 0.2; scale: 0.6; } 50% { opacity: 1; scale: 1.4; } }
@keyframes progress-sweep { from { translate: -100% 0; } }
@keyframes progress-pour { from { translate: 0 -100%; } }
@keyframes progress-lens { 25% { translate: 140% 12%; } 50% { translate: 60% 22%; } 75% { translate: 160% 3%; } }
@keyframes progress-bloom { from { clip-path: circle(0); } to { clip-path: circle(75%); } }
@keyframes progress-blink { 94%, 100% { scale: 1; } 97% { scale: 1 0.1; } }
@keyframes progress-fade { from { opacity: 0; } }
@keyframes progress-drift { to { translate: 16% 12%; } }
@keyframes progress-glint { 50% { opacity: 0.25; } }
@keyframes progress-flash { from { translate: -100% 0; opacity: 1; } to { translate: 100% 0; opacity: 0; } }
@keyframes progress-shine { to { background-position: 0 0; } }
@keyframes progress-pop { from { scale: 0.4; } }
@keyframes progress-halo { to { box-shadow: 0 0 0 10px #0000; } }
@keyframes progress-bob { 50% { translate: 0 -4px; } }
@keyframes progress-look { from { translate: -4px 0; } to { translate: 4px 0; } }
@keyframes progress-bounce { 0% { scale: 0.7; } 60% { scale: 1.15; } }
@keyframes progress-ring { from { scale: 0.8; opacity: 0.9; } to { scale: 1.9; opacity: 0; } }
@keyframes progress-burst { from { scale: 0.2; opacity: 1; } to { scale: 1.5; opacity: 0; } }
@keyframes progress-fly { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 0.9; } 100% { opacity: 0; translate: 34cqw 0; } }
@keyframes progress-rise { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 0.8; } 100% { opacity: 0; translate: 6px -105cqh; } }
@keyframes progress-spark { 0%, 100% { opacity: 0; scale: 0.4; } 50% { opacity: 1; scale: 1.6; } }
@keyframes progress-fall { 0% { opacity: 0; translate: 0 0; } 10% { opacity: 0.9; } 100% { opacity: 0.2; translate: 0 105cqh; } }
@keyframes progress-confetti { 0% { opacity: 1; translate: 0 0; rotate: 0deg; } 100% { opacity: 0.4; translate: 20px 105cqh; rotate: 540deg; } }
@keyframes progress-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes progress-caret { 50% { opacity: 0; } }
@keyframes progress-pulse { 50% { opacity: 0.4; scale: 0.8; } }
@keyframes progress-flicker { 50% { opacity: 0.55; } }
@keyframes progress-pump { from { rotate: -14deg; } to { rotate: 14deg; } }
@keyframes progress-push { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: 40px 0; } }
@keyframes progress-tap { from { rotate: 0deg; } to { rotate: -12deg; } }
@keyframes progress-twitch { 0%, 80%, 100% { rotate: 0deg; } 88% { rotate: -12deg; } 94% { rotate: 8deg; } }
@keyframes progress-z { 0% { opacity: 0; translate: 0 6px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 6px -14px; } }
@keyframes progress-catch { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 75% { opacity: 1; translate: 0 78px; } 100% { opacity: 0; translate: 0 84px; } }
@keyframes progress-cheer { from { rotate: 62deg; } to { rotate: 78deg; } }
@keyframes progress-cheerR { from { rotate: -62deg; } to { rotate: -78deg; } }
@keyframes progress-popin { from { scale: 0.5; opacity: 0; } }
@keyframes progress-thought { 0% { opacity: 0; translate: 0 4px; } 5%, 30% { opacity: 1; translate: 0 0; } 36%, 100% { opacity: 0; } }
@keyframes progress-sweat { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 14px; } }
@keyframes progress-emote { 0%, 60%, 100% { opacity: 0; translate: 0 4px; } 70%, 90% { opacity: 1; translate: 0 -4px; } }
@keyframes progress-wave { from { rotate: -92deg; } to { rotate: -118deg; } }
@keyframes progress-scan { 0%, 100% { translate: 0 0; } 25% { translate: -5px 0; } 50% { translate: 5px 0; } 75% { translate: 0 -4px; } }
@keyframes progress-tilt { 0%, 100% { rotate: 0deg; } 25% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes progress-yawn { 0%, 100% { scale: 0.4; } 50% { scale: 1.3; } }
@keyframes progress-juggle { 0% { translate: -24px 0; } 25% { translate: 0 -22px; } 50% { translate: 24px 0; } 75% { translate: 0 8px; } 100% { translate: -24px 0; } }
@keyframes progress-sway { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes progress-note { 0% { opacity: 0; translate: 0 6px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 10px -16px; } }
@keyframes progress-spin { to { rotate: 360deg; } }
@keyframes progress-flex { from { scale: 1; } to { scale: 1.12 1.2; } }


/* ==========================================================================
   Crash statistics (/stats, /stats/embed)
   Colors: single hue = var(--brand-primary); second categorical
   (--chart-secondary) validated against brand on both surfaces.
   ========================================================================== */

:root, .dark {
  --chart-secondary: #0d9488;
}
.light {
  --chart-secondary: #0d9488;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  min-width: 0;
}
.stat-tile-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.stat-tile-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-tile-hint {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

.stats-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.chart-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.chart-empty {
  color: var(--text-tertiary);
  font-size: 0.9rem;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

/* Horizontal magnitude bars */
.bar-list { margin: 0 0 24px; }
.bar-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bar-list-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.bar-list-label {
  color: var(--text-primary);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.bar-list-count {
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bar-list-track {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 2px;
}
.bar-list-fill {
  height: 100%;
  background: var(--brand-primary);
  border-radius: 2px;
  transition: width 240ms ease;
}
.bar-list-other {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--border-primary);
  color: var(--text-tertiary);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .bar-list-fill { transition: none; }
}

/* Daily volume columns */
.daily-chart { margin: 8px 0 24px; }
.daily-chart-plot {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 140px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-primary);
}
.day-col {
  flex: 1 1 0;
  min-width: 1px;
  background: var(--brand-primary);
  border-radius: 2px 2px 0 0;
  position: relative;
  cursor: default;
}
.day-col.is-zero {
  height: 2px !important;
  background: var(--border-primary);
  border-radius: 0;
}
.day-col:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.78rem;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 4px 12px var(--shadow-color);
}
.daily-chart-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}

/* Stacked split bars (two validated hues + surface gaps) */
.split-bar-track {
  display: flex;
  gap: 2px;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
}
.split-bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
  cursor: default;
}
.split-bar-seg.is-primary { background: var(--brand-primary); }
.split-bar-seg:not(.is-primary) { background: var(--chart-secondary); }
.split-bar-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.split-bar-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.split-bar-key i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* Corpus insights: sequential single-hue ramp (brand blended into the card
   surface, 5 steps light->dark), direct labels, CSS hover tips. */
.chart-sub {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-left: 6px;
}
.chart-note {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--text-tertiary);
}
.insights-heading {
  margin: 40px 0 4px;
  font-size: 1.35rem;
  color: var(--text-primary);
}
.insights-lede {
  margin: 0 0 20px;
  color: var(--text-secondary);
  font-size: 0.92rem;
}
.heatmap-cell.step-0 { background: var(--bg-tertiary); }
.heatmap-cell.step-1 { background: color-mix(in oklab, var(--brand-primary) 18%, var(--bg-tertiary)); }
.heatmap-cell.step-2 { background: color-mix(in oklab, var(--brand-primary) 36%, var(--bg-tertiary)); }
.heatmap-cell.step-3 { background: color-mix(in oklab, var(--brand-primary) 56%, var(--bg-tertiary)); }
.heatmap-cell.step-4 { background: color-mix(in oklab, var(--brand-primary) 78%, var(--bg-tertiary)); }
.heatmap-cell.step-5 { background: var(--brand-primary); }

[data-tip] { position: relative; }
.col-hist-bar:hover::after,
.heatmap-cell:hover::after,
.split-bar-seg:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.78rem;
  font-weight: 400;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 4px 12px var(--shadow-color);
}

/* Histogram columns */
.col-hist { margin: 0 0 24px; }
.col-hist-plot {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 150px;
  border-bottom: 1px solid var(--border-primary);
}
.col-hist-col {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-width: 0;
}
.col-hist-value {
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.col-hist-bar {
  background: var(--brand-primary);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.col-hist-labels {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.col-hist-labels span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

/* Weekday x hour heatmap */
.heatmap { margin: 8px 0 24px; }
.heatmap-grid {
  display: grid;
  grid-template-columns: 34px repeat(24, minmax(0, 1fr));
  gap: 2px;
}
.heatmap-grid .heatmap-cell {
  height: 18px;
  border-radius: 2px;
}
.heatmap-day, .heatmap-hour {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  line-height: 1;
  align-self: center;
}
.heatmap-hour { text-align: left; }
.ramp-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}
.ramp-legend i {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: 2px;
}

/* Stop code x module matrix */
.matrix { margin: 8px 0 24px; }
.matrix-scroll { overflow-x: auto; }
.matrix-table {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 0.78rem;
  width: 100%;
  min-width: 560px;
  table-layout: fixed;
}
.matrix-table th:first-child { width: 56px; }
.matrix-table th {
  color: var(--text-secondary);
  font-weight: 500;
  text-align: center;
  padding: 4px;
  white-space: nowrap;
}
.matrix-table thead th { overflow: hidden; }
.matrix-table thead th span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.matrix-table tbody th {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.matrix-table td {
  text-align: center;
  padding: 6px 4px;
  border-radius: 3px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.matrix-table td.is-strong { color: #ffffff; font-weight: 600; }

/* Stop code small multiples */
.trends { margin: 8px 0 24px; }
.trends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 20px;
}
.trend-panel { margin: 0; }
.trend-panel figcaption {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.8rem;
  margin-bottom: 4px;
  min-width: 0;
}
.trend-code { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.trend-name {
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.trend-total { color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-left: auto; }
.trend-panel svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  border-bottom: 1px solid var(--border-primary);
}
.trend-line {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.trend-hit rect { fill: transparent; }
.trend-hit circle {
  fill: var(--brand-primary);
  stroke: var(--bg-primary);
  stroke-width: 2px;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}
.trend-hit:hover circle { opacity: 1; }
.trends-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}

/* Page layout helpers */
.stats-error {
  color: var(--status-error);
  font-size: 0.9rem;
}
.stats-note {
  color: var(--text-tertiary);
  font-size: 0.8rem;
  margin-top: 24px;
}
.stats-table table {
  width: 100%;
  max-width: 480px;
  border-collapse: collapse;
  margin-top: 12px;
}
.stats-table th, .stats-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-primary);
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Embed widget: chromeless, fills the iframe */
.app-embed { min-height: 100vh; }
.stats-embed {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
}
.stats-embed.is-compact .daily-chart-plot { height: 80px; }
.stats-embed .stats-note { margin-top: 0; }

/* AI insight narrative card */
.stats-insight {
  margin: 8px 0 24px;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-left: 3px solid var(--brand-primary);
  border-radius: 10px;
}
.stats-insight p {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}
.stats-insight p:last-of-type { margin-bottom: 0; }
.stats-insight-meta {
  margin-top: 12px !important;
  font-size: 0.75rem !important;
  color: var(--text-tertiary) !important;
}

.bar-list-desc {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-tertiary);
  line-height: 1.4;
}
.stats-embed .bar-list-desc { display: none; } /* keep the widget compact */

/* ─────────────────────────────────────────────────────────────────────────
   Pipeline flow diagram (components/flow/*)
   The stage is a fixed 1920x1080 WindowsForum-styled artboard scaled to fit
   the column and the viewport; only the chrome around it follows the site
   theme. Frame width/height are set inline from the measured fit.
   ───────────────────────────────────────────────────────────────────────── */
.flow-figure {
  margin: 0 0 2rem;
}

.flow-frame-wrap {
  width: 100%;
  min-width: 0;
}

.flow-frame {
  position: relative;
  width: 100%;
  /* Placeholder ratio until the fit is measured; the inline width/height that
     lands on first paint supersedes it. */
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 12px;
  background: #eff5f6;
  border: 1px solid var(--border-primary);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  contain: layout paint;
}

.flow-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* Narration lifted out of the artboard when it renders too small to read. */
.flow-live-caption {
  margin: 0.75rem 0 0;
  min-height: 2.75em;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
  text-wrap: pretty;
}

/* Fullscreen variant: rides over the artboard so the frame keeps the height. */
.flow-live-caption.is-overlay {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  z-index: 1;
  max-width: 92%;
  margin: 0;
  min-height: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  border-radius: 6px;
  text-align: center;
  color: #1a1b1b;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.flow-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.flow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border-primary);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.flow-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-secondary);
}

.flow-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.flow-btn-play {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  min-width: 6.25rem;
}

.flow-btn-play:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

.flow-btn-toggle.is-on {
  border-color: var(--brand-primary);
  color: var(--brand-accent);
}

.flow-btn-icon {
  padding: 0.5rem;
  width: 2.25rem;
}

.flow-scrub {
  flex: 1 1 10rem;
  min-width: 6rem;
  height: 1.5rem;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.flow-scrub:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.flow-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  min-width: 5.5rem;
  text-align: right;
}

.flow-chapters {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.5rem;
}

.flow-chapter {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--bg-secondary);
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.flow-chapter:hover {
  background: var(--bg-hover);
}

.flow-chapter:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.flow-chapter.is-active {
  border-color: var(--brand-primary);
  background: var(--bg-tertiary);
}

.flow-chapter-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.flow-chapter-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.flow-caption {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.flow-transcript {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.flow-transcript > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.35rem 0;
}

.flow-transcript ol {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  line-height: 1.7;
}

/* Fullscreen: the artboard is the point, so the reading material around it
   steps aside and the frame takes the whole screen. */
.flow-figure:fullscreen {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1rem;
  background: var(--bg-primary);
}

.flow-figure:fullscreen .flow-frame-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-figure:fullscreen .flow-chapters,
.flow-figure:fullscreen .flow-caption,
.flow-figure:fullscreen .flow-transcript {
  display: none;
}

/* Touch: meet the 44px minimum hit target the design system asks for. */
@media (pointer: coarse) {
  .flow-btn {
    min-height: 44px;
  }

  .flow-scrub {
    height: 44px;
  }

  .flow-chapter {
    padding: 0.75rem;
  }

  .flow-transcript > summary {
    padding: 0.6rem 0;
  }
}

@media (max-width: 640px) {
  .flow-time {
    display: none;
  }

  .flow-scrub {
    order: 3;
    flex-basis: 100%;
  }

  .flow-btn-play {
    flex: 1 1 auto;
  }

  .flow-chapters {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion: the stage is parked on a still, so drop the transitions on
   the chrome too. */
@media (prefers-reduced-motion: reduce) {
  .flow-btn,
  .flow-chapter {
    transition: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Data-use terms checkbox on the analyzer */
.data-use {
  margin: 14px auto 0;
  max-width: 640px;
  padding: 12px 16px;
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  background: var(--bg-tertiary);
  text-align: left;
}
.data-use-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}
.data-use-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-primary);
  flex: none;
  cursor: pointer;
}
.data-use-help {
  margin: 6px 0 0 28px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.data-use-help a { color: var(--brand-primary); }
.data-use.is-declined { border-color: var(--status-warning, #d97706); }
.upload-area[data-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.6);
}

/* Privacy & data use notice */
.privacy-page { max-width: 760px; }
.privacy-page section { margin: 28px 0; }
.privacy-page h2 { font-size: 1.2rem; margin: 0 0 10px; color: var(--text-primary); }
.privacy-page ul { margin: 0; padding-left: 1.2rem; }
.privacy-page li, .privacy-page p { color: var(--text-secondary); line-height: 1.6; margin: 6px 0; }
.privacy-page a { color: var(--brand-primary); }
.privacy-lede { font-size: 0.95rem; }

/* Reduced motion: stop every looping glow, float, shimmer, spinner and
   particle animation and make transitions instant. Kept last so it wins over
   the animation rules above; the loader keeps its static ring. */
@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;
  }
}