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

body {
  background: black;
  overflow: hidden;
}

#canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}

.start-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: pointer;
}

.start-overlay.hidden {
  display: none;
}

.start-content {
  text-align: center;
  color: white;
}

.start-logo {
  width: 600px;
  height: auto;
  margin-bottom: 24px;
}

.start-content h1 {
  font-size: 48px;
  margin-bottom: 16px;
  font-family: system-ui, -apple-system, sans-serif;
}

.start-content p {
  font-size: 18px;
  opacity: 0.7;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Controls overlay */
.controls-overlay {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  transition: opacity 0.3s ease;
}

.controls-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.controls-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.7);
  padding: 12px 24px;
  border-radius: 30px;
  backdrop-filter: blur(10px);
}

.mode-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-family: system-ui, -apple-system, sans-serif;
  transition: all 0.2s ease;
}

.mode-btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: white;
}

.mode-btn.active {
  background: #8B5CF6;
  border-color: #8B5CF6;
  color: white;
}

/* Party Mode Button - uses pink/orange gradient when active */
.mode-btn.party:hover {
  border-color: rgba(236, 72, 153, 0.8);
  color: #ec4899;
}

.mode-btn.party.active {
  background: linear-gradient(135deg, #ec4899, #f97316);
  border-color: #ec4899;
  color: white;
  animation: party-pulse 2s ease-in-out infinite;
}

@keyframes party-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(236, 72, 153, 0.4); }
  50% { box-shadow: 0 0 16px rgba(236, 72, 153, 0.7); }
}

.mode-status {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-family: system-ui, -apple-system, sans-serif;
  margin-left: 12px;
}

/* ==========================================
   INFO ICON
   ========================================== */
#info-icon {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.2s ease, background 0.2s ease;
  z-index: 100;
}

#info-icon.visible {
  opacity: 1;
  pointer-events: auto;
}

#info-icon:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.18);
  color: white;
}

#info-icon:focus {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

/* ==========================================
   INFO CARD - CENTERED (TV/Desktop)
   ========================================== */
#info-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 440px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  background: rgba(12, 12, 16, 0.94);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 36px;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 200;
}

#info-card.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

#info-card::-webkit-scrollbar {
  width: 6px;
}

#info-card::-webkit-scrollbar-track {
  background: transparent;
}

#info-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.info-card-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-card-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.info-card-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 24px 0;
  padding-right: 44px;
  line-height: 1.3;
}

.info-section {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.info-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-section h3 {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 14px 0;
}

/* Contemplation section */
.contemplation blockquote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.7;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}

.quote-theme {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* Metadata section */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-row label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-row span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

/* Inspiration section */
.inspiration p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 16px 0;
}

.info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: capitalize;
}

/* ==========================================
   GENERATED IMAGE INFO CARD - Elegant Gallery Style
   ========================================== */
.info-card-content.generated {
  padding: 0;
}

.info-badge-row {
  margin-bottom: 16px;
}

.generated-badge {
  display: inline-block;
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.artwork-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 300;
  color: white;
  margin: 0 0 20px 0;
  line-height: 1.3;
}

.artist-statement-section {
  margin: 24px 0;
}

.artist-statement {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
  margin: 0;
}

.artist-statement.pending {
  color: rgba(255, 255, 255, 0.5);
}

.info-tag {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  text-transform: capitalize;
}

.info-card-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.inspired-by {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.inspired-by .inspired-song-title {
  color: rgba(255, 255, 255, 0.8);
}

.generated-timestamp {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

/* Hide old prompt-related styles */
.prompt-section,
.prompt-text,
.creative-prompt,
.generated-for {
  display: none !important;
}

.pending .pending-text {
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* ==========================================
   MOBILE STYLES
   ========================================== */
@media (max-width: 768px) {
  #info-icon {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  #info-card {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    width: 100%;
    max-width: 100%;
    max-height: 60vh;
    border-radius: 28px 28px 0 0;
    padding: 24px;
    padding-top: 20px;
  }
  
  #info-card.visible {
    transform: translateY(0);
  }
  
  /* Swipe indicator for mobile */
  #info-card::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
  }
  
  .info-card-title {
    font-size: 22px;
    margin-bottom: 18px;
    margin-top: 8px;
  }
  
  .contemplation blockquote {
    font-size: 16px;
  }
  
  /* Shrink canvas when card is open */
  body.info-card-open canvas,
  body.info-card-open #canvas {
    height: 40vh !important;
    transition: height 0.4s ease;
  }
}

/* Hide swipe indicator on desktop */
@media (min-width: 769px) {
  #info-card::before {
    display: none;
  }
}

/* ============================================
   Visual DNA Picker Styles
   ============================================ */

.vdna-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: vdnaFadeIn 0.3s ease;
  backdrop-filter: blur(8px);
}

.vdna-overlay.closing {
  animation: vdnaFadeOut 0.3s ease forwards;
}

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

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

.vdna-modal {
  background: #1a1a2e;
  border-radius: 16px;
  max-width: 900px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  color: white;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(139, 92, 246, 0.1);
  overflow: hidden;
}

.vdna-header {
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, transparent 100%);
}

.vdna-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-family: system-ui, -apple-system, sans-serif;
}

.vdna-header p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-family: system-ui, -apple-system, sans-serif;
}

.vdna-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 28px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s, transform 0.2s;
  border-radius: 4px;
}

.vdna-close:hover {
  color: white;
  transform: scale(1.1);
}

.vdna-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.vdna-content::-webkit-scrollbar {
  width: 6px;
}

.vdna-content::-webkit-scrollbar-track {
  background: transparent;
}

.vdna-content::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

.vdna-level {
  display: none;
}

.vdna-level.active {
  display: block;
  animation: vdnaSlideIn 0.3s ease;
}

.vdna-level.hidden {
  display: none;
}

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

/* Level 1: Mode Cards */
.vdna-mode-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.vdna-mode-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vdna-mode-card:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
}

.vdna-mode-card.selected {
  background: rgba(139, 92, 246, 0.15);
  border-color: #8B5CF6;
}

.vdna-mode-icon {
  font-size: 32px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 16px;
}

.vdna-mode-icon svg {
  width: 32px;
  height: 32px;
  color: #8B5CF6;
}

.vdna-mode-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  font-family: system-ui, -apple-system, sans-serif;
}

.vdna-mode-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1.4;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Level 2: Vibe Grid */
.vdna-level-2 h2,
.vdna-level-3 h2 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  font-family: system-ui, -apple-system, sans-serif;
}

.vdna-vibe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.vdna-vibe-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vdna-vibe-card:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
}

.vdna-vibe-card.selected {
  background: rgba(139, 92, 246, 0.15);
  border-color: #8B5CF6;
}

.vdna-vibe-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.vdna-vibe-icon svg {
  width: 20px;
  height: 20px;
  color: white;
}

.vdna-vibe-name {
  font-size: 14px;
  font-weight: 500;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Level 3: Style Categories */
.vdna-count {
  font-weight: 400;
  color: #8B5CF6;
  font-size: 14px;
}

.vdna-categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vdna-category {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

.vdna-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}

.vdna-category-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.vdna-category-arrow {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s;
}

.vdna-category.expanded .vdna-category-arrow {
  transform: rotate(90deg);
}

.vdna-category-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  font-family: system-ui, -apple-system, sans-serif;
}

.vdna-category-count {
  font-size: 12px;
  color: #8B5CF6;
}

.vdna-category-content {
  display: none;
  padding: 0 16px 16px;
}

.vdna-category.expanded .vdna-category-content {
  display: block;
}

.vdna-style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.vdna-style-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.vdna-style-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.vdna-style-card.selected {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.4);
}

.vdna-style-preview {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  flex-shrink: 0;
}

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

.vdna-style-info strong {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vdna-style-info span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vdna-style-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.15s;
  flex-shrink: 0;
}

.vdna-style-card.selected .vdna-style-check {
  background: #8B5CF6;
  border-color: #8B5CF6;
  color: white;
}

/* Footer */
.vdna-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(0, 0, 0, 0.2);
}

.vdna-selection-info {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  flex: 1;
  font-family: system-ui, -apple-system, sans-serif;
}

.vdna-actions {
  display: flex;
  gap: 12px;
}

.vdna-back {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: system-ui, -apple-system, sans-serif;
}

.vdna-back:hover {
  background: rgba(255, 255, 255, 0.1);
}

.vdna-back.hidden {
  display: none;
}

.vdna-create {
  padding: 10px 24px;
  background: #8B5CF6;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: system-ui, -apple-system, sans-serif;
}

.vdna-create:hover:not(:disabled) {
  background: #7C3AED;
  transform: translateY(-1px);
}

.vdna-create:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Visual DNA Picker Responsive */
@media (max-width: 768px) {
  .vdna-modal {
    max-height: 90vh;
  }
  
  .vdna-mode-cards {
    grid-template-columns: 1fr;
  }
  
  .vdna-vibe-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .vdna-style-grid {
    grid-template-columns: 1fr;
  }
  
  .vdna-footer {
    flex-direction: column;
    align-items: stretch;
  }
  
  .vdna-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .vdna-overlay {
    padding: 10px;
  }
  
  .vdna-header {
    padding: 20px 16px;
  }
  
  .vdna-header h1 {
    font-size: 20px;
  }
  
  .vdna-content {
    padding: 16px;
  }
  
  .vdna-vibe-grid {
    grid-template-columns: 1fr;
  }
  
  .vdna-mode-card {
    padding: 24px 16px;
  }
}

/* ============================================
   NOW PLAYING NOTIFICATION
   ============================================ */

.now-playing {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(26, 26, 46, 0.95);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 14px 18px;
  z-index: 1000;
  animation: nowPlayingSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  max-width: 320px;
}

.now-playing.hiding {
  animation: nowPlayingSlideOut 0.5s ease forwards;
}

@keyframes nowPlayingSlideIn {
  from { 
    transform: translateX(120%); 
    opacity: 0; 
  }
  to { 
    transform: translateX(0); 
    opacity: 1; 
  }
}

@keyframes nowPlayingSlideOut {
  from { 
    transform: translateX(0); 
    opacity: 1; 
  }
  to { 
    transform: translateX(120%); 
    opacity: 0; 
  }
}

.now-playing-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.now-playing-art {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.now-playing-art-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #8B5CF6;
}

.now-playing-info {
  color: white;
  min-width: 0;
  flex: 1;
}

.now-playing-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8B5CF6;
  margin-bottom: 4px;
  font-weight: 600;
}

.now-playing-title {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.now-playing-artist {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-playing-album {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .now-playing {
    top: auto;
    bottom: 100px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
}

/* ==========================================
   VISION PICKER
   ========================================== */
.vision-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.vision-picker-overlay.visible {
  opacity: 1;
}

.vision-picker-overlay.closing {
  opacity: 0;
}

.vision-picker-modal {
  background: rgba(20, 20, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 32px;
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.2s ease-out;
}

.vision-picker-overlay.visible .vision-picker-modal {
  transform: scale(1);
}

.vision-picker-header {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
}

.vision-picker-header h2 {
  font-size: 24px;
  font-weight: 300;
  color: white;
  margin: 0 0 8px 0;
  font-family: system-ui, -apple-system, sans-serif;
}

.vision-picker-subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
}

.vision-picker-close {
  position: absolute;
  top: -8px;
  right: -8px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 28px;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  transition: color 0.2s;
}

.vision-picker-close:hover {
  color: white;
}

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

.vision-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.vision-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.vision-card.selected {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.5);
}

.vision-card-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  flex-shrink: 0;
}

.vision-card-content {
  flex: 1;
  min-width: 0;
}

.vision-card-name {
  font-size: 15px;
  font-weight: 500;
  color: white;
  margin: 0 0 4px 0;
  font-family: system-ui, -apple-system, sans-serif;
}

.vision-card-tagline {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
}

.vision-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: #8B5CF6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
}

.vision-description-panel {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 16px;
}

.vision-description-panel p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Audio device selector in controls bar */
.audio-device-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}

.audio-device-icon {
  font-size: 13px;
  opacity: 0.7;
  pointer-events: none;
}

.audio-device-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-family: system-ui, -apple-system, sans-serif;
  padding: 5px 10px;
  cursor: pointer;
  max-width: 160px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
  overflow: hidden;
}

.audio-device-select:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
}

.audio-device-select:focus {
  border-color: rgba(139, 92, 246, 0.6);
}

.audio-device-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.audio-device-select option {
  background: #1a1a2e;
  color: white;
}

/* Vision button in controls bar */
.vision-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 8px 16px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  font-family: system-ui, -apple-system, sans-serif;
}

.vision-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.vision-btn .control-icon {
  font-size: 16px;
}

.vision-btn .control-label {
  font-size: 13px;
  font-weight: 500;
}

.tab-audio-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 8px 16px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  font-family: system-ui, -apple-system, sans-serif;
}

.tab-audio-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.tab-audio-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.tab-audio-btn.active {
  background: linear-gradient(135deg, #06b6d4, #8b5cf6);
  border-color: #06b6d4;
}

.tab-audio-btn .control-icon {
  font-size: 16px;
}

.tab-audio-btn .control-label {
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 500px) {
  .vision-picker-grid {
    grid-template-columns: 1fr;
  }
  
  .vision-picker-modal {
    padding: 20px;
  }
}

/* ==========================================
   VIEW MODE TOGGLE (Gallery/Dream)
   ========================================== */

.view-mode-toggle {
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}

.view-mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 17px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: system-ui, -apple-system, sans-serif;
}

.view-mode-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

.view-mode-btn.active {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.view-mode-btn .mode-icon {
  font-size: 14px;
}

.view-mode-btn .mode-label {
  font-size: 13px;
  font-weight: 500;
}

/* Dream mode active - subtle purple/pink gradient */
.view-mode-btn.dream.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.2));
}

/* Body class for global dream mode effects */
body.dream-mode .view-mode-toggle {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

/* Optional subtle glow on canvas when in dream mode */
body.dream-mode #canvas {
  filter: brightness(1.02) saturate(1.05);
}

/* ==========================================
   MINI INFO CARD (Gallery Mode)
   ========================================== */

.mini-info-card {
  position: fixed;
  bottom: 100px;
  left: 24px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 20px;
  max-width: 320px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  z-index: 100;
  font-family: system-ui, -apple-system, sans-serif;
}

.mini-info-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.mini-info-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mini-info-title {
  font-size: 16px;
  font-weight: 400;
  color: white;
  line-height: 1.3;
}

.mini-info-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Generated image - subtle purple accent */
.mini-info-card.generated {
  border-color: rgba(139, 92, 246, 0.3);
}

.mini-info-card.generated .mini-info-title::before {
  content: '✨ ';
  font-size: 14px;
}

/* Adjust position to not overlap with controls */
@media (max-height: 700px) {
  .mini-info-card {
    bottom: 80px;
  }
}

/* ============================================================
   Monetization UI (Tranche C of v1 spec v6)
   - .gen-counter: top-right pill on the canvas
   - .account-* : standalone /account dashboard page
   ============================================================ */

.gen-counter {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease,
    opacity 0.4s ease;
  cursor: pointer;
  white-space: nowrap;
  /* Idle by default — hidden until the pointer moves (see .idle-visible),
     mirroring the canvas info icon so the pill isn't a constant distraction. */
  opacity: 0;
  pointer-events: none;
}

.gen-counter.idle-visible {
  opacity: 1;
  pointer-events: auto;
}

.gen-counter:hover {
  background: rgba(0, 0, 0, 0.78);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.gen-counter.hidden {
  display: none;
}

/* Active count: show a neutral "Generations" label by default, reveal the
   full "X of Y generations remaining" only on hover so the number always
   has context. Toggled via display since the pill is fixed top-right and
   resizing it disturbs no surrounding layout. */
.gen-counter .gen-counter-detail {
  display: none;
}
.gen-counter.is-hover-count:hover .gen-counter-label {
  display: none;
}
.gen-counter.is-hover-count:hover .gen-counter-detail {
  display: inline;
}

.gen-counter.tone-ok {
  border-color: rgba(139, 92, 246, 0.35);
}

.gen-counter.tone-cta {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(99, 102, 241, 0.85));
  border-color: rgba(255, 255, 255, 0.35);
}

.gen-counter.tone-cta:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(99, 102, 241, 1));
}

.gen-counter.tone-warn {
  background: rgba(180, 83, 9, 0.85);
  border-color: rgba(252, 211, 77, 0.5);
}

.gen-counter.tone-muted {
  opacity: 0.7;
}

/* ----- /account dashboard ----- */

body.account-body {
  background: radial-gradient(circle at 20% 20%, #1a1530 0%, #050810 70%);
  overflow: auto;
  min-height: 100vh;
  font-family: system-ui, -apple-system, sans-serif;
  color: rgba(255, 255, 255, 0.95);
}

.account-shell {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.account-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.account-back {
  align-self: flex-start;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
}

.account-back:hover {
  color: rgba(255, 255, 255, 0.9);
}

.account-logo {
  width: 220px;
  height: auto;
}

.account-card {
  background: rgba(15, 18, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.account-loading {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  padding: 16px 0;
}

.account-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
}

.account-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.account-identity {
  margin-bottom: 16px;
}

.account-identity-name {
  font-size: 18px;
  font-weight: 600;
}

.account-identity-email {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}

.account-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.account-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.account-badge.tone-ok {
  background: rgba(34, 197, 94, 0.15);
  color: rgb(134, 239, 172);
  border-color: rgba(34, 197, 94, 0.35);
}

.account-badge.tone-warn {
  background: rgba(249, 115, 22, 0.15);
  color: rgb(253, 186, 116);
  border-color: rgba(249, 115, 22, 0.35);
}

.account-badge.tone-muted {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
}

.account-usage {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
}

.account-usage-text {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
}

.account-usage-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.account-usage-fill {
  height: 100%;
  background: linear-gradient(90deg, rgb(139, 92, 246), rgb(99, 102, 241));
  transition: width 0.3s ease;
}

.account-usage-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.account-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.account-btn:active {
  transform: translateY(1px);
}

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

.account-btn.primary {
  background: linear-gradient(135deg, rgb(139, 92, 246), rgb(99, 102, 241));
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.account-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgb(124, 58, 237), rgb(79, 70, 229));
}

.account-btn.ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.15);
}

.account-btn.ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: white;
  border-color: rgba(255, 255, 255, 0.25);
}

.account-banner {
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid transparent;
}

.account-banner.ok {
  background: rgba(34, 197, 94, 0.12);
  color: rgb(167, 243, 208);
  border-color: rgba(34, 197, 94, 0.3);
}

.account-banner.warn {
  background: rgba(249, 115, 22, 0.12);
  color: rgb(254, 215, 170);
  border-color: rgba(249, 115, 22, 0.3);
}

/* =====================================================================
 * Landing page, pricing, legal docs (Task #52 — v1 monetization)
 *
 * Scope:
 *   - .landing-* : marketing landing page + pricing page + legal pages
 *   - .legal-*   : long-form legal copy (terms / privacy)
 *
 * All pages share `body.landing-body` so they inherit the same dark
 * brand wash. They do NOT load the WebGL engine — purely vanilla HTML
 * with a tiny inline script that swaps the auth-aware CTAs.
 * ===================================================================== */

body.landing-body {
  background:
    radial-gradient(circle at 15% 10%, rgba(139, 92, 246, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(99, 102, 241, 0.14) 0%, transparent 55%),
    #050810;
  overflow: auto;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 40px;
  max-width: 1280px;
  margin: 0 auto;
}

.landing-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  /* The logo PNG has transparent padding baked into its left side, so the
     visible icon edge sits inside the 40px nav padding. Pull the whole
     brand left so the *visible* left margin matches the visible right
     margin between the Sign-in button and the screen edge. */
  margin-left: -16px;
}

.landing-nav-logo {
  height: 56px;
  width: auto;
  display: block;
}

.landing-nav-wordmark {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -0.005em;
  /* line-height must leave room for descenders on g/y/p. line-height:1
     equals the font size and clips them — especially with
     background-clip:text on a gradient fill, which has no descender
     overflow grace. 1.3 is enough for Inter/system-ui descenders. */
  line-height: 1.3;
  /* The logo PNG has transparent padding baked into the image on its
     right side, so the visible icon ends well before the image's
     right edge. Pull the wordmark left to close that visual gap
     without cropping the icon itself. */
  margin-left: -18px;
  background: linear-gradient(135deg, #fff 0%, rgba(196, 181, 253, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.landing-nav-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}

.landing-nav-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
}

.landing-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: white;
  background: linear-gradient(135deg, rgb(139, 92, 246), rgb(99, 102, 241));
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: filter 0.2s ease;
}

.landing-nav-cta:hover {
  filter: brightness(1.12);
}

.landing-hero {
  padding: 80px 24px 100px;
}

/* Cycled hero: full-bleed image frame behind the marketing copy. The
 * top nav sits in its own bar above this section (already rendered by
 * .landing-nav, which has its own padding) — the hero frame begins
 * immediately below it. */
/* The cycled image frame is sized to fit on a 1080p viewport along
 * with the nav above it: 92px nav + 720px frame = 812px, leaving room
 * for the title overlay and a peek of the copy below the fold. */
.landing-hero-cycled {
  position: relative;
  isolation: isolate;
  height: min(620px, calc(100vh - 280px));
  overflow: hidden;
  margin: 0 auto;
  /* Match the nav's inner content box so the frame's left edge lines up with
     the logo and its right edge with the Sign-in button. The nav is
     max-width 1280px centered with 40px side padding, so its content spans
     1280 - 80 = 1200px. The width:calc below keeps the same 40px inset on
     narrower viewports (nav padding is also 40px). */
  max-width: 1200px;
  width: calc(100% - 80px);
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}

.landing-hero-copy {
  padding: 40px 24px 24px;
}

.landing-cycler {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #050810;
}

/* Intro splash: solid black cover over the cycler. A scripted title
 * sequence (src/ui/LandingIntroSequence.js) fades the logo in dead-centre, then
 * slides it straight left into its docked spot while the "AlgoRhythmic"
 * wordmark types out beside it; after a pause the whole lockup moves up, the
 * headline fades in as a whole line with a second line beneath it, then the
 * whole overlay fades out to reveal the live image cycler behind it. */
.landing-intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  text-align: center;
  background: #000;
  opacity: 1;
  pointer-events: none;
  /* --intro-reveal-ms is set by LandingIntroSequence.js (default 10s). */
  transition: opacity var(--intro-reveal-ms, 10000ms) ease-in-out;
}

/* Final reveal: the whole black overlay fades away to expose the images. */
.landing-intro-overlay.is-revealing {
  opacity: 0;
}

/* ---- Logo + wordmark lockup -------------------------------------------- */
/* Starts centered in the frame, then translates up into the top third
   (transform-only, no layout thrash) once the wordmark has been read. */
.landing-intro-lockup {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Match the splash watermark exactly: logo box = 0.33 of viewport height
     (WatermarkLayer setSize y = 0.33), centered on the frame. The PNG bakes
     heavy transparent padding (the visible icon only spans texture x
     [0.310, 0.669]), so flex-centering the box would push the *visible* block
     right of centre. --intro-center-fix nudges it back left by 0.2325 × logo
     height (= 0.155 × logo width) so the visible note+wordmark is truly
     centred, the same as the splash. */
  --intro-logo-h: 24vh;
  --intro-center-fix: calc(var(--intro-logo-h) * -0.2325);
  /* Solo-logo offset (set in px by the module): nudges the lockup so the logo
     reads as centred in the viewport during the opening beat, before it
     travels up into its docked block position. */
  --solo-dx: 0px;
  --solo-dy: 0px;
  transform: translate(-50%, -50%) translateX(var(--intro-center-fix));
  transition: transform var(--lockup-move-ms, 1200ms)
    cubic-bezier(0.22, 1, 0.36, 1);
  /* Horizontal lockup (icon left, wordmark right) — the same arrangement as
     the nav brand and the centered splash watermark. The wordmark keeps its
     layout space even while faded out, so the logo does not jump sideways
     when the text appears. */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 24px;
  pointer-events: none;
}

/* --dock-shift is set in px by the module from the live overlay height. */
.landing-intro-lockup.is-docked {
  transform: translate(-50%, -50%) translateX(var(--intro-center-fix))
    translateY(var(--dock-shift, -22%));
}

/* Opening beat: the logo alone, dead-centred in the viewport (--solo-dx/dy
   place the *visible note*, not the padded image box, on the viewport centre).
   The module applies this with the transition momentarily disabled (logo is
   still faded out) so the lockup never visibly jumps into the solo position; it
   only animates when it later slides from solo -> sliding. */
.landing-intro-lockup.is-solo {
  transform: translate(-50%, -50%) translateX(var(--intro-center-fix))
    translate(var(--solo-dx), var(--solo-dy));
}

/* Slide beat: the logo travels STRAIGHT LEFT from dead-centre to its resting
   horizontal spot (the wordmark types out beside it). Horizontal returns to the
   base position; the vertical keeps --solo-dy so the note stays on the viewport
   centre-line — i.e. this move is purely horizontal (no diagonal drift). */
.landing-intro-lockup.is-sliding {
  transform: translate(-50%, -50%) translateX(var(--intro-center-fix))
    translateY(var(--solo-dy));
}

.landing-intro-logo {
  height: var(--intro-logo-h);
  width: auto;
  display: block;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity var(--logo-fade-ms, 2500ms) ease-in-out;
  /* Black outline around the logo silhouette (matches the watermark's 2px
     black stroke). Layered drop-shadows trace the alpha edge on all sides. */
  filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000)
    drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000);
}

.landing-intro-logo.is-lit {
  opacity: 1;
}

.landing-intro-wordmark {
  /* The logo PNG bakes transparent padding on its right side (~0.331 of the
     image width), so pull the wordmark left to close most of that gap — but
     leave a deliberate breathing space between the visible note and the "A".
     Scaled to the logo height so it tracks the icon at any size. */
  margin-left: calc(var(--intro-logo-h) * -0.36);
  /* Splash text cap height ≈ 0.37 × logo height (one size bump up from the
     prior 0.33 per request). */
  font-size: calc(var(--intro-logo-h) * 0.37);
  font-weight: 600;
  letter-spacing: -0.005em;
  /* 1.3 leaves room for g/y/p descenders under background-clip:text. */
  line-height: 1.3;
  white-space: nowrap;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(196, 181, 253, 0.92) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Black outline behind the gradient fill (matches the watermark's 2px black
     stroke). paint-order draws the stroke first so the gradient sits on top. */
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  /* Hidden until the typewriter starts. The module sets opacity:1 the instant
     it begins revealing characters; each .intro-char then fades in on its own,
     so nothing is visible until the first letter is typed. */
  opacity: 0;
}

/* Per-character typewriter reveal (driven by LandingIntroSequence.js). Each
   letter fades in just-in-time as it is "typed"; the shared gradient lives on
   the container so every letter samples the same gradient (not its own). */
.landing-intro-wordmark .intro-char,
.landing-intro-line .intro-char {
  opacity: 0;
  transition: opacity var(--wordmark-char-fade-ms, 220ms) ease-out;
}

/* Sentence 1's final word ("alive") fades in as a whole word from black after
   the lead has typed out. Uses the same duration as the old whole-line fade. */
.landing-intro-line .intro-fadeword {
  opacity: 0;
  transition: opacity var(--line1-fade-ms, 1400ms) ease-in-out;
}

/* ---- Copy stack (both sentences coexist; no crossfade) ----------------- */
.landing-intro-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Nudge the headline block down a touch so there's more breathing room
     between the docked wordmark above and "Your art should be alive". */
  transform: translate(-50%, calc(-50% + 34px));
  width: 100%;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.landing-intro-line {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3.6vw, 48px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  opacity: 0;
  /* Black outline behind the white fill (matches the watermark's black stroke).
     paint-order draws the stroke first so the fill sits cleanly on top. */
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  /* Whole-line fade-in from black (no per-letter reveal). */
  transition: opacity var(--line1-fade-ms, 1400ms) ease-in-out;
}

/* Sentence 1 fades in as a whole line. */
.landing-intro-line.is-shown {
  opacity: 1;
}

/* Sentence 2 fades in as a whole, beneath sentence 1 (no crossfade-out). Same
   size and weight as sentence 1 (per request); only a slightly softer colour
   keeps a subtle hierarchy between the two lines. */
.landing-intro-line2 {
  color: rgba(255, 255, 255, 0.86);
  transition: opacity var(--line2-fade-ms, 1200ms) ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  /* No choreography: show everything statically, reveal quickly. */
  .landing-intro-overlay {
    transition: opacity 300ms ease-in-out;
  }
  .landing-intro-lockup {
    transition: none;
  }
  .landing-intro-logo.is-lit,
  .landing-intro-line.is-shown {
    opacity: 1;
  }
  /* Reduced motion: the module reveals the wordmark + every character at once. */
  .landing-intro-wordmark .intro-char,
  .landing-intro-line .intro-char,
  .landing-intro-line .intro-fadeword {
    transition: none;
  }
  .landing-intro-line,
  .landing-intro-line2 {
    transition: none;
  }
}

/* WebGL canvas the morph shader draws into. Fills the cycler frame. */
.landing-cycler-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .landing-cycler-layer {
    transition: none !important;
  }
}

.landing-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.landing-hero-sub {
  font-size: clamp(16px, 1.6vw, 20px);
  color: rgba(255, 255, 255, 0.78);
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: left;
  line-height: 1.55;
}

.landing-hero-sub p {
  margin: 0 0 18px;
}

.landing-hero-sub strong {
  color: rgba(196, 181, 253, 0.95);
  font-weight: 600;
}

.landing-hero-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.landing-hero-list li {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.78);
}

.landing-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.landing-hero-foot {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}

.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.landing-btn:active { transform: translateY(1px); }

.landing-btn.primary {
  background: linear-gradient(135deg, rgb(139, 92, 246), rgb(99, 102, 241));
  color: white;
  border-color: rgba(255, 255, 255, 0.18);
}

.landing-btn.primary:hover { filter: brightness(1.12); }

.landing-btn.ghost {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
}

.landing-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
  border-color: rgba(255, 255, 255, 0.28);
}

.landing-section {
  padding: 72px 24px;
}

/* Ornate gold frame + living-art slideshow ("See Your World, Visualized").
   The frame PNG is 805x930 (aspect 805/930). The transparent window inside
   it was measured at top 31.61%, left 32.17%, width 34.78%, height 40.75%
   of the full image — the canvas host is positioned to match exactly so the
   carving overlaps the art edges with no see-through gap. */
.landing-frame-showcase {
  position: relative;
  width: min(832px, 90vw);
  aspect-ratio: 805 / 930;
  margin: -130px auto -8px;
}

.landing-frame-window {
  position: absolute;
  top: 31.61%;
  left: 32.17%;
  width: 34.78%;
  height: 40.75%;
  overflow: hidden;
  background: #05070f;
  border-radius: 6px;
  z-index: 1;
}

.landing-frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}

.landing-section-alt {
  background:
    linear-gradient(180deg, transparent 0%, rgba(15, 18, 32, 0.6) 50%, transparent 100%);
}

.landing-section-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.landing-section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: 12px;
}

.landing-section-sub {
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 16px;
  margin-bottom: 12px;
}

.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.landing-feature {
  background: rgba(15, 18, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 24px 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.landing-feature h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: white;
}

.landing-feature p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.55;
}

.landing-living-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 36px;
}

@media (min-width: 900px) {
  .landing-living-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.landing-living-tile {
  --tile-aspect: 3 / 2;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 18, 32, 0.7);
  cursor: zoom-in;
}

.landing-living-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.landing-living-coda {
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 16px;
  margin-top: 36px;
}

.landing-community-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 640px) {
  .landing-community-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .landing-community-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.landing-community-tile {
  --tile-aspect: 1 / 1;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 18, 32, 0.7);
  cursor: zoom-in;
}

.landing-community-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Snake-flip enhancement (added at runtime by LandingCommunitySnakeFlip.js).
   The static img above remains the no-JS / SEO baseline. */
.is-flip-enhanced {
  perspective: 1000px;
}

.is-flip-enhanced .lct-rotator {
  position: relative;
  width: 100%;
  aspect-ratio: var(--tile-aspect, 1 / 1);
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.45, 0.05, 0.25, 1);
  will-change: transform;
}

.is-flip-enhanced .lct-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.is-flip-enhanced .lct-face-back {
  transform: rotateY(180deg);
}

.is-flip-enhanced .lct-face img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .is-flip-enhanced .lct-rotator {
    transition: none;
  }
}

/* Click-to-zoom lightbox for community artwork (built at runtime by
   LandingCommunitySnakeFlip.js). */
.lct-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(5, 7, 14, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease;
  cursor: zoom-out;
}

.lct-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lct-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  cursor: default;
}

.lct-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms ease;
}

.lct-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .lct-lightbox {
    transition: none;
  }
}

.landing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}

.landing-price-card {
  background: rgba(15, 18, 32, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.landing-price-card-primary {
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: 0 24px 60px rgba(99, 102, 241, 0.15);
}

.landing-price-card header h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.landing-price {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.landing-price-per {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 4px;
}

.landing-price-tag {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.landing-price-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-price-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}

.landing-price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(139, 92, 246), rgb(99, 102, 241));
  opacity: 0.9;
}

.landing-price-foot {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

.landing-price-btn { margin-top: 4px; }

.landing-faq {
  margin-top: 64px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.landing-faq-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.landing-faq-item {
  background: rgba(15, 18, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
}

.landing-faq-item h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: white;
}

.landing-faq-item p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
}

.landing-faq-item a {
  color: rgb(196, 181, 253);
  text-decoration: underline;
  text-decoration-color: rgba(196, 181, 253, 0.4);
}

/* Mailing-list CTA ("Join the AlgoSphere") — left-aligned block overriding the
   centered section defaults. The Subscribe button is a placeholder (type=button,
   not wired to any handler yet). */
.landing-mailing {
  max-width: 720px;
}

.landing-mailing-title,
.landing-mailing-sub {
  text-align: left;
}

.landing-mailing-sub {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.landing-mailing-sub p {
  margin: 0 0 14px;
}

.landing-mailing-sub p:last-child {
  margin-bottom: 0;
}

.landing-mailing-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.landing-mailing-input {
  flex: 1 1 280px;
  min-width: 0;
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.landing-mailing-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.landing-mailing-input:focus {
  outline: none;
  border-color: rgba(139, 92, 246, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

.landing-mailing-btn {
  flex: 0 0 auto;
  border-radius: 999px;
  padding-left: 32px;
  padding-right: 32px;
}

.landing-mailing-helper {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

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

.landing-footer {
  margin-top: 48px;
  padding: 36px 24px 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.landing-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.landing-footer-links a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.landing-footer-links a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
}

.landing-footer-copy {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
}

/* ----- /terms and /privacy long-form legal copy ----- */

.legal-main {
  padding: 24px 24px 48px;
}

.legal-article {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(15, 18, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 40px clamp(20px, 4vw, 48px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.legal-article h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.legal-article h2 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 36px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.95);
}

.legal-article h3 {
  font-size: 17px;
  font-weight: 600;
  margin-top: 22px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
}

.legal-article p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
  margin-bottom: 12px;
}

.legal-article ul {
  margin: 8px 0 16px 22px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.65;
}

.legal-article ul li { margin-bottom: 6px; }

.legal-article a {
  color: rgb(196, 181, 253);
  text-decoration: underline;
  text-decoration-color: rgba(196, 181, 253, 0.4);
}

.legal-article a:hover {
  text-decoration-color: rgb(196, 181, 253);
}

.legal-meta {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-bottom: 24px !important;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}