/* Maika warm-white theme, aligned with the mobile product prototype. */
:root {
  color-scheme: light;
  --bg: #fbf9fd;
  --bg-soft: #f4f0f8;
  --bg-card: #ffffff;
  --bg-card-2: #ffffff;
  --line: #e6dfec;
  --line-strong: #d3c6df;
  --text: #443b4c;
  --text-soft: #6d6276;
  --text-muted: #6d6276;
  --purple: #814ac8;
  --purple-2: #a45de0;
  --primary-action: #814ac8;
  --primary-action-hover: #6d3baa;
  --focus-ring: #5b3d73;
  --pink: #c6b8d9;
  --cyan: #c8b4e0;
  --success: #76558f;
  --accent: #c6b8d9;
  --ok: #8b5fc2;
  --shadow: 0 20px 55px rgba(68, 59, 76, 0.11);
}

body {
  font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body::before {
  background: radial-gradient(circle, rgba(129, 74, 200, 0.18), transparent 70%);
}

body::after {
  background: radial-gradient(circle, rgba(190, 166, 222, 0.2), transparent 70%);
}

::selection {
  background: rgba(129, 74, 200, 0.28);
  color: var(--text);
}

.site-bg::before {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(129, 74, 200, 0.18) 1px, transparent 1px),
    radial-gradient(circle at 70% 40%, rgba(190, 166, 222, 0.2) 1px, transparent 1px),
    radial-gradient(circle at 35% 80%, rgba(198, 184, 217, 0.14) 1px, transparent 1px);
}

.site-bg::after {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(198, 184, 217, 0.2), transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(190, 166, 222, 0.2), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(129, 74, 200, 0.14), transparent 65%);
}

.gradient-text {
  background: linear-gradient(135deg, #443b4c 10%, #7a4faa 48%, #a178c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow,
.nav-links,
.chip,
.code-pill {
  background: rgba(255, 255, 255, 0.78);
  border-color: var(--line);
  color: var(--text-soft);
}

.eyebrow::before,
.btn .dot,
.hero-note .pulse {
  background: var(--purple-2);
  box-shadow: 0 0 0 5px rgba(129, 74, 200, 0.13);
}

.site-header,
.home-page .site-header,
.site-header.scrolled,
.home-page .site-header.scrolled {
  background: rgba(250, 248, 245, 0.9);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px rgba(68, 59, 76, 0.045);
}

.brand img,
.site-header .brand img {
  border-color: var(--line);
  background: #fff;
}

.nav-links a:hover,
.nav-links a[aria-current="page"],
.home-page .nav-links a[aria-current="page"] {
  color: var(--text);
  background: var(--bg-soft) !important;
}

.btn {
  --btn-bg: #ffffff;
  --btn-border: var(--line);
  --btn-color: var(--text);
  box-shadow: 0 7px 20px rgba(68, 59, 76, 0.07);
}

.btn:hover {
  border-color: var(--line-strong);
  box-shadow: 0 11px 26px rgba(68, 59, 76, 0.11);
}

.btn-primary,
.hero-cinematic .btn-primary,
.app .btn.primary {
  --btn-bg: var(--primary-action);
  --btn-border: var(--primary-action);
  --btn-color: #ffffff;
  background: var(--primary-action);
  border-color: var(--primary-action);
  color: #fff;
  box-shadow: 0 10px 28px rgba(129, 74, 200, 0.28);
}

.btn-primary:hover,
.hero-cinematic .btn-primary:hover,
.app .btn.primary:hover:not(:disabled) {
  background: var(--primary-action-hover);
  border-color: var(--primary-action-hover);
}

.btn-secondary,
.btn-ghost,
.hero-cinematic .btn-secondary {
  --btn-bg: #ffffff;
  --btn-border: var(--line);
  --btn-color: var(--text);
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}

.visual-main,
.mini-card,
.glass-card,
.step-card,
.benefit-card,
.accordion-item,
.cta-panel,
.cta-panel .cta-card,
.newsletter,
.page-hero-panel,
.value-card,
.team-card,
.compare-card,
.post-card,
.contact-card,
.contact-form-card,
.empty-state,
.input-container {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.visual-overlay,
.metric,
.card-tags span,
.benefit-icon,
.contact-item,
.input,
.age-input,
.input-select {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--text);
}

.input::placeholder,
.age-input::placeholder,
.input-select::placeholder {
  color: var(--text-muted);
}

.input:focus,
.age-input:focus,
.input-select:focus,
.demo-access-card__input:focus {
  border-color: var(--purple-2);
  box-shadow: 0 0 0 4px rgba(129, 74, 200, 0.15);
}

.process-shell,
.footer {
  border-color: var(--line);
}

.process-progress,
.emotion-compare__track,
.voice-recorder__progress-track {
  background: var(--bg-soft);
}

.process-progress::after,
.emotion-compare__fill,
.voice-recorder__progress-fill {
  background: linear-gradient(90deg, var(--purple-2), var(--cyan));
}

.compare-card.accent,
.page-hero-visual {
  background: linear-gradient(145deg, #f4f1f7, #f4f0f8);
}

.home-page .site-bg::before {
  opacity: 0.32;
  background-color: transparent;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(129, 74, 200, 0.18) 1px, transparent 1px),
    radial-gradient(circle at 70% 40%, rgba(190, 166, 222, 0.2) 1px, transparent 1px),
    radial-gradient(circle at 35% 80%, rgba(198, 184, 217, 0.14) 1px, transparent 1px);
  background-size: 140px 140px, 180px 180px, 220px 220px;
}

.home-page .site-bg::after {
  opacity: 1;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(198, 184, 217, 0.2), transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(190, 166, 222, 0.2), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(129, 74, 200, 0.14), transparent 65%);
}

/* Homepage hero: retain its motion, translated into the calm prototype palette. */
.hero-vignette {
  background:
    radial-gradient(circle at 50% 55%, transparent 0 24%, rgba(250, 248, 245, 0.12) 48%, rgba(250, 248, 245, 0.78) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(244, 240, 248, 0.5));
}

.home-page .hero-stars-a .hero-star {
  background: rgba(99, 68, 127, 0.9);
  box-shadow:
    0 0 0 1px rgba(99, 68, 127, 0.16),
    0 0 12px rgba(99, 68, 127, 0.38);
}

.home-page .hero-stars-b .hero-star {
  opacity: calc(var(--o, 0.7) * 0.88);
  background: rgba(83, 113, 132, 0.84);
  box-shadow:
    0 0 0 1px rgba(83, 113, 132, 0.14),
    0 0 12px rgba(83, 113, 132, 0.32);
}

.hero-nebula-glow {
  background:
    radial-gradient(circle at 50% 50%, rgba(129, 74, 200, 0.25) 0 28%, rgba(190, 166, 222, 0.2) 38%, transparent 70%),
    radial-gradient(circle at 48% 55%, rgba(198, 184, 217, 0.2), transparent 62%);
}

.hero-nebula,
.hero-nebula-inner,
.hero-half-cloud,
.hero-half-orbit-b .hero-half-cloud,
.hero-orbit-cloud {
  filter: blur(42px) saturate(0.72);
  opacity: 0.34;
  mix-blend-mode: multiply;
}

.hero-nebula::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 42%, rgba(250, 248, 245, 0.5) 56%, transparent 74%);
}

.hero-badge {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--line);
  box-shadow: 0 10px 28px rgba(68, 59, 76, 0.09);
}

.hero-badge-tag {
  background: var(--primary-action);
  border-color: var(--primary-action);
  color: #fff;
}

.hero-badge-copy,
.hero-display,
.hero-subtitle {
  color: var(--text);
  text-shadow: none;
}

.hero-subtitle {
  color: var(--text-soft);
}

.hero-display.typewrite.is-typing::after {
  background: var(--purple-2);
  box-shadow: 0 0 12px rgba(129, 74, 200, 0.35);
}

.hero-marquee {
  background: rgba(255, 255, 255, 0.68);
  border-color: var(--line);
}

.hero-marquee .chip {
  background: #fff;
  border-color: var(--line);
}

/* Registration and tour surfaces. */
.beta-register-btn {
  border-color: rgba(129, 74, 200, 0.5);
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(68, 59, 76, 0.08);
}

.beta-register-btn:hover {
  border-color: var(--purple-2);
  background: #f6f2fa;
}

.beta-register-btn__arrow {
  background: var(--primary-action);
  color: #fff;
}

.beta-register-dialog__backdrop,
.tour-modal__backdrop,
.scan-failure-dialog::backdrop,
.face-scan-info-dialog::backdrop {
  background: rgba(68, 59, 76, 0.32);
}

.beta-register-dialog__panel,
.beta-register-card,
.tour-modal__panel,
.scan-failure-dialog,
.face-scan-info-dialog {
  background: #ffffff;
  color: var(--text);
  border-color: var(--line);
  box-shadow: 0 28px 80px rgba(68, 59, 76, 0.2);
}

.beta-register-card__close,
.tour-modal__close,
.face-scan-info-dialog__close {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--text);
}

.tour-modal__arrow {
  background: #ffffff;
  border-color: #d3c6df;
  color: var(--text);
  box-shadow: 0 4px 12px rgba(68, 59, 76, 0.08);
}

.tour-modal__arrow:hover:not(:disabled) {
  background: #f4f0f8;
  border-color: var(--purple-2);
  color: #63447f;
}

.tour-modal__arrow:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-color: var(--purple-2);
  box-shadow: 0 0 0 4px rgba(129, 74, 200, 0.18);
}

.tour-modal__arrow:disabled {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--text-muted);
  opacity: 0.68;
}

.tour-modal__dot {
  background: #ddd2e6;
}

.tour-modal__dot.is-active {
  background: var(--purple-2);
}

.beta-register-card__kicker,
.beta-register-success__kicker,
.tour-modal__step-label,
.face-scan-info-dialog__subhead {
  color: #75598b;
}

/* Demo access and wizard. */
.demo-landing::before {
  background:
    radial-gradient(circle at 20% 15%, rgba(190, 166, 222, 0.22), transparent 42%),
    radial-gradient(circle at 82% 24%, rgba(198, 184, 217, 0.2), transparent 44%),
    radial-gradient(circle at 50% 86%, rgba(129, 74, 200, 0.17), transparent 50%);
}

.demo-landing__title,
.voice-intro h2,
.emotion-title,
.music-player__deck .song-info__title {
  color: var(--text);
}

.demo-landing__points > span,
.demo-access-card,
.demo-consent__item,
.emotion-card,
.emotion-compare,
.emotion-primary-score,
.voice-intro__cue,
.voice-recorder,
.music-player__deck,
.music-player__wave-panel,
.music-player__ctrl-btn,
.music-player__genre-chip,
.app .panel,
.app .card-inset,
.upload-preview-card,
.upload-status-card {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--shadow);
}

.demo-access-card__input,
.locale-picker__trigger {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--text);
}

.demo-genre-picker {
  gap: 0.8rem;
}

.demo-genre-picker__heading {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  text-align: center;
}

.demo-genre-picker__heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.demo-genre-picker__heading p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.demo-genre-picker__tags {
  gap: 0.7rem;
  padding: 1rem;
  border: 1px solid #e5ddec;
  border-radius: 20px;
  background: #f4f0f8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 24px rgba(68, 59, 76, 0.05);
}

.demo-genre-picker__tag {
  min-height: 44px;
  padding: 0.64rem 1.08rem;
  border: 1px solid #e7e0ec;
  background: #ffffff;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 500;
  box-shadow: 0 3px 10px rgba(68, 59, 76, 0.07);
}

.demo-genre-picker__tag:hover:not(:disabled):not([aria-checked="true"]),
.demo-consent__item:hover {
  background: #ffffff;
  border-color: rgba(129, 74, 200, 0.62);
  color: var(--text);
}

.demo-genre-picker__tag:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-color: var(--purple-2);
  box-shadow: 0 0 0 4px rgba(129, 74, 200, 0.18);
}

.demo-genre-picker__tag[aria-checked="true"] {
  background: var(--primary-action);
  border-color: var(--primary-action);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 7px 18px rgba(129, 74, 200, 0.25);
  transform: scale(1.02);
}

.demo-genre-picker__tag[aria-checked="true"]:hover:not(:disabled) {
  background: var(--primary-action-hover);
  border-color: var(--primary-action-hover);
  color: #ffffff;
}

.demo-consent__item:has(.demo-consent__checkbox:checked) {
  background: #eee7f5;
  border-color: var(--purple-2);
  color: #63447f;
}

@media (max-width: 520px) {
  .demo-genre-picker__tags {
    gap: 0.55rem;
    padding: 0.8rem;
    border-radius: 18px;
  }

  .demo-genre-picker__tag {
    min-height: 42px;
    padding: 0.58rem 0.9rem;
    font-size: 0.88rem;
  }
}

.locale-picker__menu {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--shadow);
}

.app {
  --surface: #ffffff;
  --border: var(--line);
  --muted: var(--text-soft);
  --accent: var(--purple-2);
  --accent-dim: #814ac8;
  background: transparent;
  color: var(--text);
}

.app .header,
.app .panel,
.input-container {
  color: var(--text);
}

.face-scan-info-btn,
.app .btn:not(.primary):not(.btn-primary) {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}

.scan-intro-list li::marker,
.voice-intro__pill,
.emotion-kicker,
.music-player__label {
  color: #75598b;
}

/* Keep the camera immersive while the surrounding scan experience stays light. */
.home-page .app .scan-viewport {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.home-page .app .video-wrap {
  background:
    radial-gradient(circle at 50% 28%, rgba(129, 74, 200, 0.22), transparent 48%),
    linear-gradient(165deg, #3f3348, #241c2b);
  border-color: rgba(129, 74, 200, 0.34);
  box-shadow:
    0 22px 56px rgba(50, 38, 59, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.home-page .scan-overlay {
  background:
    radial-gradient(circle at 50% 22%, rgba(190, 166, 222, 0.3), transparent 44%),
    rgba(250, 248, 245, 0.92);
  color: var(--text);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}

.home-page .scan-overlay.overlay-error {
  background:
    radial-gradient(circle at 50% 20%, rgba(224, 151, 151, 0.18), transparent 46%),
    rgba(250, 248, 245, 0.94);
}

.scan-overlay-title,
.scan-overlay-body,
.scan-overlay-tip,
.scan-stage,
.scan-recovery-title,
.scan-recovery-message {
  color: var(--text);
  text-shadow: none;
}

.home-page .placement-status,
.home-page .countdown-caption {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(230, 223, 236, 0.92);
  color: var(--text);
  text-shadow: none;
  box-shadow: 0 10px 28px rgba(41, 31, 49, 0.18);
}

/* Structural HUD layers must remain transparent; only readable labels get glass. */
.home-page .scan-hud,
.home-page .scan-hud-top,
.home-page .scan-hud-rating,
.home-page .scan-face-guide,
.home-page .scan-face-oval,
.home-page .chrome-overlay {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.home-page .scan-hud-top {
  width: auto;
  color: #fff;
}

.home-page .scan-hud-kicker {
  display: inline-flex;
  padding: 0.32rem 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(43, 31, 52, 0.52);
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.home-page .scan-hud-signal span {
  background: rgba(255, 255, 255, 0.34);
}

.home-page .scan-face-guide {
  --guide-rgb: 59, 130, 246;
}

.home-page .scan-face-guide[data-state="scanning"] {
  --guide-rgb: 78, 224, 107;
}

.home-page .scan-face-guide[data-state="drift"] {
  --guide-rgb: 255, 179, 71;
}

.home-page .scan-face-guide[data-state="error"],
.home-page .scan-face-guide[data-state="lost"] {
  --guide-rgb: 255, 92, 92;
}

.home-page .placement-status.state-wait {
  color: var(--text);
  border-color: rgba(230, 223, 236, 0.92);
}

.home-page .placement-status.state-good {
  color: #63447f;
  border-color: rgba(129, 74, 200, 0.42);
  background: rgba(247, 241, 251, 0.92);
  box-shadow: 0 10px 28px rgba(41, 31, 49, 0.18);
}

.home-page .placement-status.state-bad {
  color: #78571d;
  border-color: rgba(184, 137, 54, 0.42);
  background: rgba(255, 249, 235, 0.94);
  box-shadow: 0 10px 28px rgba(41, 31, 49, 0.18);
}

.home-page .scan-stage {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-soft);
}

.home-page .scan-stage.is-active {
  border-color: rgba(129, 74, 200, 0.48);
  color: #63447f;
  background: #f4f0f8;
  box-shadow: 0 0 0 2px rgba(129, 74, 200, 0.12);
}

.home-page .scan-stage.is-done {
  border-color: rgba(129, 74, 200, 0.38);
  color: #63447f;
  background: #f5f0fa;
}

.home-page .scan-overlay-progress span {
  background: var(--primary-action);
}

.home-page .scan-overlay-spinner {
  border-color: rgba(129, 74, 200, 0.16);
  border-top-color: var(--primary-action);
  border-right-color: var(--cyan);
  box-shadow: 0 0 18px rgba(129, 74, 200, 0.18);
}

.home-page .face-scan-info-btn {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
  box-shadow: 0 6px 18px rgba(68, 59, 76, 0.1);
}

.home-page .face-scan-info-btn:hover,
.home-page .face-scan-info-btn:focus-visible {
  border-color: var(--primary-action);
  background: #f4f0f8;
  color: var(--primary-action-hover);
}

.home-page .face-scan-info-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.home-page .app .scan-hud-rating .face-scan-info-btn {
  background: rgba(237, 243, 239, 0.94);
  border-color: #d2c0df;
  color: #5b3d73;
  -webkit-text-fill-color: #5b3d73;
  box-shadow: 0 6px 18px rgba(41, 31, 49, 0.18);
}

.home-page .app .scan-hud-rating .face-scan-info-btn svg {
  color: #5b3d73;
}

.home-page .app .scan-hud-rating .face-scan-info-btn:hover,
.home-page .app .scan-hud-rating .face-scan-info-btn:focus-visible {
  background: #ebe3f1;
  border-color: var(--primary-action);
  color: #50375f;
  -webkit-text-fill-color: #50375f;
}

.home-page .app .scan-hud-rating .face-scan-info-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.home-page .countdown-overlay {
  background: rgba(41, 31, 49, 0.58);
  color: #fff;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.home-page .countdown-overlay .countdown-number {
  color: #fff;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.3);
}

.home-page .scan-recovery {
  border-color: rgba(230, 223, 236, 0.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(190, 166, 222, 0.18), transparent 52%),
    rgba(255, 255, 255, 0.96);
  color: var(--text);
  box-shadow: 0 18px 48px rgba(41, 31, 49, 0.25);
}

.music-player__deck {
  --mp-bg0: #f7f5f2;
  --mp-bg1: #ffffff;
  --mp-edge: var(--line);
}

.music-player__playfab,
.voice-recorder__btn {
  background: var(--purple-2);
  border-color: var(--purple-2);
  color: #fff;
  box-shadow: 0 12px 32px rgba(129, 74, 200, 0.28);
}

.music-player__wave-stage,
.emotion-map {
  background:
    radial-gradient(circle at 20% 18%, rgba(190, 166, 222, 0.2), transparent 42%),
    radial-gradient(circle at 84% 14%, rgba(198, 184, 217, 0.2), transparent 48%),
    linear-gradient(170deg, #f8f7f4, #f4f0f8);
  border-color: var(--line);
}

.emotion-grid {
  background-image:
    linear-gradient(rgba(139, 113, 157, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 113, 157, 0.12) 1px, transparent 1px);
}

.emotion-axis,
.emotion-circumplex-ring,
.emotion-constellation-link {
  stroke: rgba(68, 59, 76, 0.3);
  border-color: rgba(68, 59, 76, 0.2);
}

.emotion-mode-tag,
.music-player__time-tag,
.music-player__volume-label,
.voice-intro__subtitle,
.voice-intro__status,
.music-player__deck .song-info__artist {
  color: var(--text-soft);
  text-shadow: none;
}

.emotion-mode-tag {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--line);
}

.voice-recorder__glow {
  background: radial-gradient(circle, rgba(129, 74, 200, 0.23), transparent 68%);
}

.voice-recorder__ring {
  border-color: rgba(129, 74, 200, 0.35);
}

.music-player__range {
  --range-track: #e7e0ec;
}

.scan-failure-dialog__title,
.scan-failure-dialog__message,
.face-scan-info-dialog__title,
.face-scan-info-dialog__subtitle,
.face-scan-info-dialog__list {
  color: var(--text);
}

@media (max-width: 860px) {
  .mobile-menu {
    background: rgba(250, 248, 245, 0.98);
    border-color: var(--line);
    box-shadow: var(--shadow);
  }

  .mobile-menu a {
    color: var(--text);
  }

  .mobile-menu a[aria-current="page"] {
    background: #eee7f5;
    border-color: #d2c0df;
    color: #5b3d73;
  }
}

/* Demo control states: maintain readable text and icons across hover/focus/disabled UI. */
.home-page .btn.btn-primary,
.home-page .btn.btn-primary:hover,
.home-page .btn.btn-primary:focus-visible,
.home-page .app .btn.primary,
.home-page .app .btn.primary:hover:not(:disabled),
.tour-modal__nav .btn.btn-primary,
.tour-modal__nav .btn.btn-primary:hover,
.consent-modal__actions .btn.btn-primary,
.consent-modal__actions .btn.btn-primary:hover {
  background: var(--primary-action);
  border-color: var(--primary-action);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 10px 28px rgba(129, 74, 200, 0.28);
  filter: none;
}

.home-page .btn.btn-primary:hover:not(:disabled),
.home-page .app .btn.primary:hover:not(:disabled),
.tour-modal__nav .btn.btn-primary:hover:not(:disabled),
.consent-modal__actions .btn.btn-primary:hover:not(:disabled) {
  background: var(--primary-action-hover);
  border-color: var(--primary-action-hover);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.home-page .btn.btn-primary:focus-visible,
.home-page .app .btn.primary:focus-visible,
.tour-modal__nav .btn.btn-primary:focus-visible,
.consent-modal__actions .btn.btn-primary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow:
    0 0 0 4px rgba(129, 74, 200, 0.2),
    0 10px 28px rgba(129, 74, 200, 0.24);
}

.home-page .btn.btn-primary:disabled,
.home-page .app .btn.primary:disabled,
.tour-modal__nav .btn.btn-primary:disabled,
.consent-modal__actions .btn.btn-primary:disabled {
  background: #e1d8e8;
  border-color: #e1d8e8;
  color: #74697d;
  -webkit-text-fill-color: #74697d;
  box-shadow: none;
  opacity: 0.78;
}

.home-page .btn.btn-primary svg,
.home-page .app .btn.primary svg,
.tour-modal__nav .btn.btn-primary svg,
.consent-modal__actions .btn.btn-primary svg,
.music-player__playfab svg,
.voice-recorder__btn svg {
  color: currentColor;
}

.home-page .btn.btn-ghost,
.home-page .app .btn:not(.primary):not(.btn-primary),
.home-page .btn.btn-secondary {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

.home-page .btn.btn-ghost:hover:not(:disabled),
.home-page .app .btn:not(.primary):not(.btn-primary):hover:not(:disabled),
.home-page .btn.btn-secondary:hover:not(:disabled) {
  background: #f4f0f8;
  border-color: var(--purple-2);
  color: #63447f;
  -webkit-text-fill-color: #63447f;
}

.tour-modal__close:hover,
.beta-register-card__close:hover,
.face-scan-info-dialog__close:hover {
  background: #f4f0f8;
  border-color: var(--purple-2);
  color: var(--text);
}

.tour-modal__skip,
.tour-modal__skip:hover {
  color: var(--text-soft);
}

.beta-register-btn__label {
  color: var(--text);
}

.beta-register-btn:hover .beta-register-btn__label {
  color: #63447f;
}

.beta-register-btn:hover .beta-register-btn__arrow {
  background: var(--primary-action-hover);
  border-color: var(--primary-action-hover);
  color: #ffffff;
}

.locale-picker__chevron {
  border-right-color: var(--text-soft);
  border-bottom-color: var(--text-soft);
}

.locale-picker__menu {
  background-color: #ffffff;
  background-image: none;
  border-color: var(--line);
  color: var(--text);
  scrollbar-color: var(--purple-2) var(--bg-soft);
}

.locale-picker__menu::-webkit-scrollbar-track {
  background: var(--bg-soft);
}

.locale-picker__menu::-webkit-scrollbar-thumb {
  background: var(--purple-2);
  border-color: var(--bg-soft);
}

.locale-picker__option:hover,
.locale-picker__option:focus-visible,
.locale-picker__option[aria-selected="true"] {
  background: #f4f0f8;
  color: #63447f;
}

.demo-consent__label {
  color: var(--text);
}

.demo-consent__icon {
  background: #eee7f5;
  color: #79608b;
}

.demo-consent__checkbox {
  accent-color: var(--purple-2);
}

.consent-modal__badge {
  background: #eee7f5;
  border: 1px solid #dacbe5;
  color: var(--primary-action);
  box-shadow: 0 10px 24px rgba(68, 59, 76, 0.1);
}

.face-scan-info-btn:hover {
  background: #f4f0f8;
  border-color: var(--purple-2);
  color: #63447f;
}

.music-player__playfab,
.music-player__playfab:hover:not(:disabled),
.music-player__deck.is-playing .music-player__playfab {
  background: var(--primary-action);
  border-color: var(--primary-action);
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(129, 74, 200, 0.26);
}

.music-player__playfab:hover:not(:disabled) {
  background: var(--primary-action-hover);
  border-color: var(--primary-action-hover);
}

.music-player__playfab:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow:
    0 0 0 4px rgba(129, 74, 200, 0.2),
    0 10px 26px rgba(129, 74, 200, 0.24);
}

.music-player__ctrl-btn {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}

.music-player__ctrl-btn:hover:not(:disabled),
.music-player__ctrl-btn:focus-visible {
  background: #f4f0f8;
  border-color: var(--purple-2);
  color: #63447f;
}

.music-player__ctrl-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.music-player__range {
  --range-filled: var(--primary-action);
  --range-track: #e7e0ec;
}

.music-player__range::-webkit-slider-thumb {
  background: var(--primary-action);
  border-color: #ffffff;
  box-shadow: 0 2px 8px rgba(68, 59, 76, 0.18);
}

.music-player__range::-moz-range-thumb {
  background: var(--primary-action);
  border-color: #ffffff;
  box-shadow: 0 2px 8px rgba(68, 59, 76, 0.18);
}

.music-player__time-tag--current {
  background: #eee7f5;
  border-color: #dacbe5;
  color: #63447f;
}

.voice-recorder[data-state="idle"] .voice-recorder__btn,
.voice-recorder[data-state="idle"] .voice-recorder__btn:hover:not(:disabled),
.voice-recorder[data-state="sending"] .voice-recorder__btn,
.voice-recorder[data-state="done"] .voice-recorder__btn {
  background: var(--primary-action);
  border-color: var(--primary-action);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(129, 74, 200, 0.28);
}

.voice-recorder[data-state="idle"] .voice-recorder__btn:hover:not(:disabled) {
  background: var(--primary-action-hover);
  border-color: var(--primary-action-hover);
}

.voice-recorder[data-state="recording"] .voice-recorder__btn {
  background: #a95f6e;
  border-color: #a95f6e;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(169, 95, 110, 0.28);
}

.voice-recorder__btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow:
    0 0 0 4px rgba(129, 74, 200, 0.2),
    0 12px 30px rgba(129, 74, 200, 0.24);
}

.voice-recorder__success-badge {
  background: #ffffff;
  border-color: var(--purple-2);
  color: #6e527f;
}

.scan-stage {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text-soft);
}

.scan-stage.is-active {
  background: #eee7f5;
  border-color: var(--purple-2);
  color: #63447f;
  box-shadow: 0 0 0 3px rgba(129, 74, 200, 0.14);
}

.scan-stage.is-done {
  background: #f4f0f8;
  border-color: #c7aedb;
  color: #684a7e;
}

.btn-fps-skip,
.btn-fps-skip:hover {
  background: #fff8e8;
  border-color: #dfc785;
  color: #725d25;
  box-shadow: 0 8px 20px rgba(114, 93, 37, 0.12);
}

.demo-landing__points-icon {
  color: var(--primary-action);
}

.music-player__wave-loading-text,
.voice-recorder__cta,
.voice-recorder[data-state="done"] .voice-recorder__cta {
  color: var(--text-soft);
}

.music-player__wave-spinner,
.voice-recorder__spinner {
  border-color: #e1d8e8;
  border-top-color: var(--primary-action);
}

.emotion-mode-tag::before {
  color: var(--primary-action);
}

.emotion-mode-tag.is-primary {
  background: var(--primary-action);
  border-color: var(--primary-action);
  color: #ffffff;
  text-shadow: none;
  box-shadow: 0 8px 20px rgba(129, 74, 200, 0.22);
}

.scan-hud-kicker {
  color: var(--text-soft);
  text-shadow: none;
}

.scan-recovery-checklist {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--line);
}

.scan-recovery-checklist li {
  color: var(--text-soft);
}

.scan-recovery-checklist li::before {
  background: var(--primary-action);
}

.footer {
  background: #f5f3f0;
}

.footer-col {
  background: #ffffff;
  border-color: var(--line);
}

.footer-col h4 {
  color: var(--text);
}

.footer-col a {
  color: var(--text-soft);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: #63447f;
}

.footer-bottom {
  border-color: var(--line);
  color: var(--text-muted);
}

/* Complete demo session: every transient step follows the light product theme. */
.home-page .user-input-section {
  color: var(--text);
}

.home-page .input-container,
.home-page .wizard-step,
.home-page .wizard-review,
.home-page .app,
.home-page .app .header {
  color: var(--text);
}

.home-page .app .step-label,
.home-page .app .hint,
.home-page .wizard-review p,
.home-page .age-input-container label,
.home-page .gender-select-container label {
  color: var(--text-soft);
}

.home-page .wizard-error,
.home-page .app .error {
  background: #fff1f2;
  border-color: #e4b7bd;
  color: #884c56;
}

/* Camera permission, alignment, recovery, countdown, and processing states. */
.home-page .scan-overlay,
.home-page .scan-overlay.overlay-error {
  background:
    radial-gradient(circle at 50% 22%, rgba(190, 166, 222, 0.3), transparent 44%),
    rgba(250, 248, 245, 0.93);
  color: var(--text);
  backdrop-filter: blur(14px) saturate(105%);
  -webkit-backdrop-filter: blur(14px) saturate(105%);
}

.home-page .scan-overlay.overlay-error {
  background:
    radial-gradient(circle at 50% 20%, rgba(224, 151, 151, 0.18), transparent 46%),
    rgba(255, 246, 246, 0.95);
}

.home-page .scan-overlay-title,
.home-page .scan-overlay-body,
.home-page .scan-overlay-tip {
  color: var(--text);
  text-shadow: none;
}

.home-page .scan-overlay-progress span {
  background: var(--primary-action);
}

.home-page .scan-overlay-spinner {
  border-color: #e1d8e8;
  border-top-color: var(--primary-action);
  border-right-color: #c8b4e0;
  box-shadow: 0 0 18px rgba(129, 74, 200, 0.15);
}

.home-page .scan-progress-bar {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.82);
}

.home-page .scan-progress-bar-fill {
  background: linear-gradient(90deg, var(--primary-action), #b38ad5);
}

.home-page .placement-status,
.home-page .placement-status.state-wait,
.home-page .placement-status.state-good,
.home-page .placement-status.state-bad {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 24px rgba(44, 34, 52, 0.2);
  text-shadow: none;
}

.home-page .placement-status.state-good {
  background: rgba(246, 239, 250, 0.94);
  border-color: #c7aedb;
  color: #5b3d73;
}

.home-page .placement-status.state-bad {
  background: rgba(255, 248, 232, 0.95);
  border-color: #dfc785;
  color: #725d25;
}

.home-page .video-wrap.is-recovery::before {
  background: rgba(250, 248, 245, 0.7);
}

.home-page .scan-recovery {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 24px 56px rgba(68, 59, 76, 0.2);
}

.home-page .scan-recovery-icon {
  background: #eee7f5;
  border-color: #dacbe5;
  color: var(--primary-action);
  box-shadow: none;
}

.home-page .scan-recovery-eyebrow {
  color: var(--primary-action);
}

.home-page .scan-recovery-title {
  color: var(--text-soft);
}

.home-page .scan-recovery-message {
  background: #f4f0f8;
  border-color: #dacbe5;
  color: #5b3d73;
  box-shadow: none;
}

.home-page .countdown-overlay {
  background: rgba(41, 31, 49, 0.58);
  color: #fff;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.home-page .countdown-ring-track {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.08);
}

.home-page .countdown-ring-glow {
  background: conic-gradient(
    from 0deg,
    var(--primary-action),
    #b38ad5,
    #b5a4ca,
    var(--primary-action)
  );
  filter: drop-shadow(0 0 12px rgba(129, 74, 200, 0.22));
}

.home-page .countdown-number {
  color: #fff;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.3);
}

.home-page .countdown-caption {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.94);
  color: var(--text);
}

.home-page .upload-preview-card {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 14px 38px rgba(68, 59, 76, 0.1);
}

.home-page .upload-processor__ring--outer {
  border-top-color: var(--primary-action);
  border-right-color: rgba(129, 74, 200, 0.22);
  filter: drop-shadow(0 0 8px rgba(129, 74, 200, 0.22));
}

.home-page .upload-processor__ring--mid {
  border-bottom-color: #b38ad5;
  border-left-color: rgba(179, 138, 213, 0.25);
  filter: none;
}

.home-page .upload-processor__ring--inner {
  border-top-color: #aa9ab7;
  border-right-color: #e6dfec;
}

.home-page .upload-processor__core {
  background: #f4f0f8;
  box-shadow: inset 0 0 18px rgba(129, 74, 200, 0.12);
}

.home-page .upload-processor__pulse {
  background: linear-gradient(145deg, var(--primary-action), #b38ad5);
  box-shadow: 0 0 22px rgba(129, 74, 200, 0.25);
}

.home-page .upload-processor__orbit span {
  background: var(--primary-action);
  box-shadow: 0 0 9px rgba(129, 74, 200, 0.35);
}

.home-page .upload-status-label,
.home-page .upload-status-card.is-uploading .upload-status-label {
  color: var(--text);
}

.home-page .upload-status-card,
.home-page .upload-status-head {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.home-page .upload-status-card.is-success .upload-status-label {
  color: #684a7e;
}

.home-page .upload-status-card.is-error .upload-status-label {
  color: #884c56;
}

/* Music listening screen. */
.home-page .music-player__deck,
.home-page .music-player__deck.is-playing {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 18px 44px rgba(68, 59, 76, 0.12);
}

.home-page .music-player__deck.is-playing {
  box-shadow:
    0 18px 44px rgba(68, 59, 76, 0.12),
    0 0 0 3px rgba(129, 74, 200, 0.1);
}

.home-page .music-player__banner {
  border-bottom-color: var(--line);
}

.home-page .music-player__art-slot .music-player__cover-wrap {
  background: var(--bg-soft);
  border-color: var(--line);
  box-shadow: 0 7px 18px rgba(68, 59, 76, 0.12);
}

.home-page .music-player__deck .song-info__title {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}

.home-page .music-player__deck .song-info__artist {
  background: var(--bg-soft);
  color: var(--text-soft);
}

.home-page .music-player__genre-chip {
  background: #eee7f5;
  border-color: #dacbe5;
  color: #63447f;
}

.home-page .music-player__wave-panel {
  background: #f7f6f3;
  border-top: 1px solid var(--line);
}

.home-page .music-player__wave-canvas {
  background: #f4f0f8;
  border-color: #e5ddec;
}

.home-page .music-player__wave-loading {
  background: rgba(250, 248, 245, 0.93);
  border-color: var(--line);
  color: var(--text);
}

/* Optional voice scan. */
.home-page .voice-intro {
  --voice-accent: #814ac8;
  --voice-accent-2: #b38ad5;
  --voice-glow: rgba(129, 74, 200, 0.2);
}

.home-page .voice-intro__pill,
.home-page .voice-intro__pill--soft {
  background: #f4f0f8;
  border-color: #dacbe5;
  color: #63447f;
}

.home-page .voice-intro__cue {
  color: var(--text-soft);
}

.home-page .voice-intro__example-dots span {
  background: #ddd2e6;
}

.home-page .voice-intro__example-dots span.is-active {
  background: var(--primary-action);
  box-shadow: 0 0 0 3px rgba(129, 74, 200, 0.14);
}

.home-page .voice-recorder {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 18px 42px rgba(68, 59, 76, 0.1);
}

.home-page .voice-recorder__ring {
  border-color: rgba(129, 74, 200, 0.22);
}

.home-page .voice-recorder__progress-track {
  stroke: #e7e0ec;
}

.home-page .voice-recorder__progress-fill {
  stroke: var(--primary-action);
}

.home-page .voice-recorder__bars span {
  background: linear-gradient(180deg, var(--primary-action), #b38ad5);
}

/* Results and emotion visualization. */
.home-page .emotion-card,
.home-page .emotion-compare,
.home-page .emotion-primary-score {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 14px 34px rgba(68, 59, 76, 0.09);
}

.home-page .emotion-compare__track {
  background: #ebe7ef;
}

.home-page .emotion-compare__center {
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(68, 59, 76, 0.22);
}

.home-page .emotion-compare__fill {
  /* Relaxation -> neutral -> focus/activation. */
  background: linear-gradient(90deg, #22c55e 0%, #ffffff 50%, #38bdf8 100%);
}

.home-page .emotion-compare__scale-center {
  color: var(--text-soft);
}

.home-page .emotion-primary-label,
.home-page .emotion-primary-label.is-focus,
.home-page .emotion-primary-label.is-relax,
.home-page .emotion-primary-value {
  color: var(--text);
  text-shadow: none;
}

.home-page .emotion-primary-label.is-focus {
  color: #0284c7;
}

.home-page .emotion-primary-score:has(.emotion-primary-label.is-focus) {
  background: linear-gradient(145deg, #e8f8ff, #f7fcff);
  border-color: #bae6fd;
  box-shadow: 0 14px 34px rgba(2, 132, 199, 0.12);
}

.home-page .emotion-primary-label.is-relax {
  color: #15803d;
}

.home-page .emotion-primary-score:has(.emotion-primary-label.is-relax) {
  background: linear-gradient(145deg, #ecfdf3, #f8fffb);
  border-color: #bbf7d0;
  box-shadow: 0 14px 34px rgba(21, 128, 61, 0.12);
}

.home-page .emotion-map {
  background:
    radial-gradient(circle at 20% 18%, rgba(190, 166, 222, 0.22), transparent 42%),
    radial-gradient(circle at 84% 14%, rgba(198, 184, 217, 0.2), transparent 48%),
    linear-gradient(170deg, #f8f7f4, #f4f0f8);
  border-color: #e5ddec;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.home-page .emotion-map::before {
  opacity: 0.32;
}

.home-page .emotion-axis {
  background: rgba(68, 59, 76, 0.2);
}

.home-page .emotion-circumplex-ring {
  border-color: rgba(68, 59, 76, 0.2);
}

.home-page .emotion-center-dot {
  background: #8b7f96;
}

.home-page .emotion-point {
  background: var(--primary-action);
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(129, 74, 200, 0.15), 0 7px 16px rgba(68, 59, 76, 0.2);
}

.home-page .emotion-guide::before {
  background: rgba(129, 74, 200, 0.4);
}

.home-page .emotion-constellation-star,
.home-page .emotion-mode-anchor-star {
  color: var(--primary-action);
  filter: none;
}

@media (max-width: 700px) {
  .home-page .input-container,
  .home-page .emotion-card,
  .home-page .voice-recorder,
  .home-page .music-player__deck {
    border-radius: 18px;
  }

  .home-page .scan-recovery {
    width: min(calc(100% - 1.25rem), 17.5rem);
  }
}

/* Session cleanup: remove decorative veils and keep every data layer legible. */
.home-page .wizard-error:empty,
.home-page .app .error:empty,
.home-page .voice-intro__status:empty,
.home-page .app .hint:empty {
  display: none !important;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Keep recording progress, but use a purple brand indicator instead of pink. */
.home-page .scan-progress-bar {
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: rgba(255, 255, 255, 0.42);
  border: 0;
  opacity: 0;
}

.home-page .scan-progress-bar-fill {
  display: block;
  background: #7545a3;
  box-shadow: none;
}

.home-page .scan-viewport.is-recording .scan-progress-bar {
  display: block;
  opacity: 1;
}

.home-page .wizard-step.is-active:has(.app),
.home-page .field-grid:has(> .app),
.home-page .app:has(.scan-viewport) {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Camera content stays natural; guidance is provided by the frame and labels only. */
.home-page .video-wrap::before,
.home-page .video-wrap.is-recovery::before,
.home-page .video-wrap:has(.scan-face-guide[data-state="lost"])::after {
  background: none !important;
  opacity: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.home-page .countdown-overlay {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-page .countdown-visual {
  border-radius: 50%;
  background: rgba(41, 31, 49, 0.52);
  box-shadow: 0 12px 34px rgba(30, 23, 35, 0.22);
}

.home-page .countdown-caption {
  background: transparent;
  border: 0;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.58);
  box-shadow: none;
}

.home-page .countdown-ring-glow {
  background: conic-gradient(
    from 0deg,
    #c7aedb,
    #c8b4e0,
    #9468bc,
    #c7aedb
  );
  filter: none;
}

.home-page .scan-hud-kicker {
  background: rgba(41, 31, 49, 0.52);
  border-color: rgba(255, 255, 255, 0.36);
}

/* Flat music surfaces and a higher-contrast canvas histogram. */
.home-page .music-player__deck,
.home-page .music-player__deck.is-playing,
.home-page .music-player__wave-panel,
.home-page .music-player__wave-stage,
.home-page .music-player__wave-canvas {
  background-image: none;
}

.home-page .music-player__wave-panel {
  background-color: #faf8fc;
}

.home-page .music-player__wave-canvas {
  background-color: #f5f1f8;
  border-color: #ddd1e6;
}

.home-page .music-player__wave-loading {
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-page .music-player__deck.is-playing {
  box-shadow: 0 18px 44px rgba(68, 59, 76, 0.12);
}

/* Remove the colored wash around the optional voice control. */
.home-page .voice-recorder__glow {
  display: none;
}

.home-page .voice-intro__cue {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.home-page .voice-recorder {
  background-image: none;
}

/* Results map: a scoped night-sky plot inside the otherwise light results UI. */
.home-page .emotion-map {
  --q-accent: rgba(122, 166, 255, 0.22);
  background:
    radial-gradient(circle at 50% 58%, rgba(92, 116, 190, 0.18), transparent 58%),
    radial-gradient(circle at 84% 14%, rgba(170, 92, 216, 0.16), transparent 45%),
    linear-gradient(170deg, #071021, #100a28 58%, #080d1c);
  border: 1px solid rgba(166, 199, 255, 0.3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -42px 90px rgba(27, 17, 68, 0.3),
    0 16px 36px rgba(20, 13, 45, 0.22);
}

.home-page .emotion-map::before,
.home-page .emotion-map::after {
  display: block;
}

.home-page .emotion-map::before {
  background:
    radial-gradient(
      circle at var(--point-x, 50%) var(--point-y, 50%),
      rgba(118, 240, 191, 0.18),
      transparent 20%
    ),
    radial-gradient(circle at 50% 50%, var(--q-accent), transparent 62%);
  opacity: 0.46;
}

.home-page .emotion-map::after {
  background: conic-gradient(
    from 20deg,
    rgba(76, 227, 255, 0.06),
    rgba(118, 240, 191, 0.1),
    rgba(223, 122, 254, 0.11),
    rgba(122, 166, 255, 0.08),
    rgba(76, 227, 255, 0.06)
  );
  filter: blur(28px);
  opacity: 0.45;
}

.home-page .emotion-map.quadrant-q1 {
  --q-accent: rgba(76, 227, 255, 0.3);
}

.home-page .emotion-map.quadrant-q2 {
  --q-accent: rgba(255, 126, 234, 0.28);
}

.home-page .emotion-map.quadrant-q3 {
  --q-accent: rgba(122, 166, 255, 0.28);
}

.home-page .emotion-map.quadrant-q4 {
  --q-accent: rgba(118, 240, 191, 0.28);
}

.home-page .emotion-grid {
  display: none;
}

.home-page .emotion-circumplex-ring {
  border: 1px dashed rgba(192, 218, 255, 0.3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 32px rgba(122, 166, 255, 0.14);
  opacity: 0.88;
}

.home-page .emotion-axis {
  background: rgba(210, 226, 255, 0.2);
}

.home-page .emotion-mode-anchor-star {
  fill: rgba(202, 224, 255, 0.4);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 0.14;
  opacity: 0.84;
  filter: drop-shadow(0 0 2px rgba(130, 200, 255, 0.28));
}

.home-page .emotion-constellation-star,
.home-page .emotion-constellation-star.is-active {
  fill: rgba(188, 237, 255, 0.96);
  stroke: rgba(255, 255, 255, 0.68);
  stroke-width: 0.17;
  opacity: 1;
  filter:
    drop-shadow(0 0 4px rgba(76, 227, 255, 0.62))
    drop-shadow(0 0 8px rgba(122, 176, 255, 0.38));
}

.home-page .emotion-constellation-star.is-primary {
  fill: rgba(218, 255, 240, 1);
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 0.22;
  opacity: 1;
  filter:
    drop-shadow(0 0 6px rgba(118, 240, 191, 0.9))
    drop-shadow(0 0 14px rgba(76, 227, 255, 0.46));
}

.home-page .emotion-constellation-link,
.home-page .emotion-constellation-link.is-cluster,
.home-page .emotion-constellation-link.is-cluster-main {
  stroke: rgba(168, 213, 255, 0.48);
  stroke-width: 0.38;
  opacity: 0.64;
  filter: drop-shadow(0 0 3px rgba(130, 220, 255, 0.26));
}

.home-page .emotion-constellation-link.is-primary {
  stroke: rgba(126, 238, 202, 0.62);
  stroke-width: 0.46;
  opacity: 0.8;
  filter: drop-shadow(0 0 4px rgba(118, 240, 191, 0.34));
}

.home-page .emotion-constellation-energy {
  stroke: rgba(224, 255, 244, 0.98);
  stroke-width: 0.68;
  opacity: 0.94;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 8px rgba(118, 240, 191, 0.72));
}

.home-page .emotion-point {
  background: linear-gradient(135deg, #df7afe, #4ce3ff);
  border-color: #ffffff;
  box-shadow:
    0 0 0 4px rgba(223, 122, 254, 0.2),
    0 0 18px rgba(76, 227, 255, 0.4),
    0 8px 18px rgba(0, 0, 0, 0.38);
}

.home-page .emotion-point::before,
.home-page .emotion-point::after {
  border-color: rgba(180, 220, 255, 0.42);
}

.home-page .emotion-mode-tag {
  background:
    radial-gradient(circle at 0% 0%, rgba(223, 122, 254, 0.12), transparent 62%),
    radial-gradient(circle at 100% 0%, rgba(76, 227, 255, 0.12), transparent 62%),
    rgba(7, 10, 25, 0.76);
  border-color: rgba(205, 226, 255, 0.24);
  color: rgba(240, 247, 255, 0.96);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.48);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(6px);
}

.home-page .emotion-mode-tag.is-primary {
  background: linear-gradient(135deg, rgba(25, 89, 104, 0.94), rgba(61, 39, 112, 0.94));
  border-color: rgba(151, 245, 217, 0.62);
  color: #ffffff;
  box-shadow:
    0 0 18px rgba(118, 240, 191, 0.24),
    0 8px 20px rgba(0, 0, 0, 0.34);
}

.home-page .emotion-mode-tag.is-primary::after {
  display: none;
}

/* Face-scan shell: no white rectangle behind the camera. */
.home-page .user-input-section:has(.wizard-step.is-active .app),
.home-page .user-input-section:has(.wizard-step.is-active .app) .input-container,
.home-page .user-input-section:has(.wizard-step.is-active .app) .wizard-step.is-active,
.home-page .user-input-section:has(.wizard-step.is-active .app) .field-grid,
.home-page .user-input-section:has(.wizard-step.is-active .app) .app,
.home-page .user-input-section:has(.wizard-step.is-active .app) .panel.scan,
.home-page .user-input-section:has(.wizard-step.is-active .app) .panel.result {
  background: transparent !important;
  background-color: transparent !important;
}

.home-page .app .panel.scan,
.home-page .app .panel.result {
  border-color: transparent;
  box-shadow: none;
}

/*
 * Keep the night-sky map lightweight on mobile. This must follow the scoped
 * theme rules above so it preserves the non-blurred Android compositor
 * fallback defined in demo_emotion_visualization.css.
 */
@media (max-width: 700px) {
  .home-page .emotion-map {
    transform: none;
  }

  .home-page .emotion-map::before {
    animation: none;
  }

  .home-page .emotion-map::after {
    animation: none;
    filter: none;
    background: radial-gradient(
      circle,
      rgba(118, 240, 191, 0.08) 0%,
      rgba(122, 166, 255, 0.07) 38%,
      rgba(223, 122, 254, 0.05) 62%,
      transparent 76%
    );
  }
}