:root {
  color-scheme: dark;
  --ink: #f7fbff;
  --muted: #a8c2cf;
  --navy: #06111f;
  --cyan: #53e5f2;
  --green: #5dff9d;
  --red: #ff6572;
  --blue: #54a7ff;
  --violet: #c174ff;
  --gold: #e7c66d;
  --glass: rgba(5, 22, 38, .76);
  --border: rgba(117, 232, 255, .45);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: #020711; }
body { color: var(--ink); }
button, a { font: inherit; }
button { color: inherit; }
.cosmos { position: fixed; inset: 0; background:
  radial-gradient(circle at 15% 20%, rgba(30, 99, 171, .38), transparent 26%),
  radial-gradient(circle at 85% 22%, rgba(44, 182, 184, .24), transparent 25%),
  radial-gradient(circle at 72% 82%, rgba(119, 48, 181, .25), transparent 28%),
  radial-gradient(circle at 20% 83%, rgba(15, 111, 157, .25), transparent 25%),
  linear-gradient(150deg, #02050b, #06172b 55%, #030612); }
.cosmos::before, .cosmos::after { content: ""; position: absolute; inset: 0; opacity: .72; background-image:
  radial-gradient(circle, #fff 0 1px, transparent 1.4px),
  radial-gradient(circle, #7adfff 0 1px, transparent 1.4px); background-size: 73px 73px, 119px 119px; background-position: 0 0, 35px 19px; }
.cosmos::after { filter: blur(18px); opacity: .24; background-size: 190px 190px; }

.app-shell { position: relative; width: min(100%, 620px); height: 100dvh; min-height: 600px; margin: auto; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(2, 10, 20, .2), rgba(2, 8, 15, .56)); }
.topbar { position: absolute; z-index: 50; top: 0; left: 0; right: 0; height: 68px; display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; background: linear-gradient(180deg, rgba(2, 8, 17, .96), rgba(2, 8, 17, .08)); }
.brand, .icon-button { border: 0; background: transparent; cursor: pointer; }
.brand { width: 42px; height: 42px; padding: 0; border-radius: 50%; overflow: hidden; }
.brand img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.28); }
.privacy-pill { height: 35px; display: flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 12px; letter-spacing: .02em; color: #d6ecf5; border: 1px solid rgba(100, 219, 241, .22); border-radius: 999px; background: rgba(6, 26, 43, .7); backdrop-filter: blur(14px); }
.privacy-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px var(--green); }
.icon-button { margin-left: auto; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(7, 25, 40, .72); }
.icon-button.active { color: var(--green); border-color: rgba(93,255,157,.5); box-shadow: 0 0 18px rgba(93,255,157,.16); }
.emergency-button { position: relative; height: 37px; padding: 0 12px; border: 1px solid rgba(255, 101, 114, .62); border-radius: 999px; background: rgba(85, 13, 24, .82); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.emergency-pulse { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255, 101, 114, .65); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(255, 101, 114, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 101, 114, 0); } }

.view { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, visibility .35s; overflow: auto; }
.view.active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 84px 28px 36px; text-align: center; }
.orb { width: 142px; height: 142px; margin-bottom: -122px; border-radius: 50%; background: conic-gradient(from 180deg, #41d7ed, #0a3c7f, #d5a83f, #49dbe2); filter: drop-shadow(0 0 34px rgba(56, 200, 235, .35)); animation: turn 13s linear infinite; }
.orb::after { content: ""; position: absolute; inset: 11px; border-radius: inherit; background: radial-gradient(circle at 35% 25%, #75efff, #082d52 50%, #020712 72%); }
@keyframes turn { to { transform: rotate(360deg); } }
.welcome-logo { position: relative; width: 155px; height: 155px; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 12px 30px rgba(3, 12, 22, .7)); }
.kicker { margin: 18px 0 8px; color: var(--gold); text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.welcome h1 { max-width: 520px; margin: 0; font-family: Georgia, serif; font-size: clamp(27px, 6.4vw, 42px); line-height: 1.08; font-weight: 600; }
.welcome-copy { max-width: 465px; margin: 18px auto 24px; color: var(--muted); line-height: 1.55; }
.primary-button, .secondary-button, .call-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 23px; border-radius: 999px; text-decoration: none; font-weight: 800; cursor: pointer; }
.primary-button { border: 1px solid rgba(93, 255, 157, .72); background: linear-gradient(135deg, #27a979, #1b726f); box-shadow: 0 12px 34px rgba(19, 177, 132, .25); }
.secondary-button { margin-top: 10px; border: 1px solid rgba(109, 218, 239, .36); background: rgba(5, 31, 50, .65); }
.privacy-note { max-width: 420px; margin: 22px auto 0; color: #7892a1; font-size: 11px; line-height: 1.45; }

.cards-view { overflow: hidden; }
.progress-wrap { position: absolute; z-index: 20; top: 61px; left: 24px; right: 24px; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: 6px; color: #cce3ed; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; }
.progress-track { height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.12); }
.progress-track div { width: 5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--green)); box-shadow: 0 0 12px var(--cyan); transition: width .35s ease; }
.card-stage { position: absolute; z-index: 5; top: 78px; right: 8px; bottom: 10px; left: 8px; perspective: 1500px; touch-action: none; }
.motion-trail { position: absolute; z-index: 1; inset: 3% 7% 3% 1%; border-radius: 34px; opacity: 0; filter: blur(15px); transform: translate3d(0,0,-20px); pointer-events: none; will-change: opacity, transform, background; transition: opacity .38s ease-out, transform .12s linear; }
.motion-trail.top { background: linear-gradient(to bottom, rgba(93,255,157,0), rgba(93,255,157,.56)); box-shadow: 0 28px 46px rgba(93,255,157,.28); }
.motion-trail.right { background: linear-gradient(to right, rgba(193,116,255,0), rgba(193,116,255,.6)); box-shadow: -28px 0 46px rgba(193,116,255,.3); }
.motion-trail.bottom { background: linear-gradient(to top, rgba(255,101,114,0), rgba(255,101,114,.6)); box-shadow: 0 -28px 46px rgba(255,101,114,.28); }
.motion-trail.left { background: linear-gradient(to left, rgba(84,167,255,0), rgba(84,167,255,.62)); box-shadow: 28px 0 46px rgba(84,167,255,.3); }
.motion-trail.active { opacity: var(--trail-opacity, .5); }
.question-card { position: absolute; inset: 0 22px 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: 31px; background: #09283b; box-shadow: 0 25px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.07); transform-origin: 50% 92%; }
.back-card { pointer-events: none; background-size: cover; background-position: center; }
.back-1 { transform: translate(8px, 4px) scale(.992); border-color: rgba(230, 193, 91, .52); background-image: linear-gradient(145deg, rgba(5, 36, 55, .55), rgba(15, 8, 39, .72)), url('/assets/card-car.png'); }
.back-2 { transform: translate(15px, 8px) scale(.982); border-color: rgba(193, 116, 255, .52); background-image: linear-gradient(145deg, rgba(5, 36, 55, .55), rgba(15, 8, 39, .72)), url('/assets/card-city.png'); }
.back-3 { transform: translate(22px, 12px) scale(.972); border-color: rgba(84, 167, 255, .45); background-image: linear-gradient(145deg, rgba(5, 36, 55, .55), rgba(15, 8, 39, .72)), url('/assets/card-animal.png'); }
.active-card { z-index: 5; cursor: grab; will-change: transform; transition: transform .28s cubic-bezier(.2,.75,.25,1), opacity .25s ease, box-shadow .2s; }
.active-card.dragging { cursor: grabbing; transition: box-shadow .15s; box-shadow: 0 34px 90px rgba(0,0,0,.7), 0 0 35px var(--drag-color, rgba(83,229,242,.25)); }
.active-card.fly { opacity: 0; }
.card-photo { position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; background-position: center; transition: filter .4s, background-position .45s; }
.theme-nature .card-photo { background-image: linear-gradient(180deg, rgba(2,8,15,.08), rgba(2,8,15,.02) 48%, rgba(2,9,16,.92)), url('/assets/card-nature.png'); }
.theme-city .card-photo { background-image: linear-gradient(180deg, rgba(2,8,15,.08), rgba(2,8,15,.02) 48%, rgba(2,9,16,.92)), url('/assets/card-city.png'); }
.theme-car .card-photo { background-image: linear-gradient(180deg, rgba(2,8,15,.06), rgba(2,8,15,.02) 48%, rgba(2,9,16,.94)), url('/assets/card-car.png'); }
.theme-animal .card-photo, .theme-home .card-photo { background-image: linear-gradient(180deg, rgba(2,8,15,.04), rgba(2,8,15,.02) 48%, rgba(2,9,16,.94)), url('/assets/card-animal.png'); }
.theme-color .card-photo { background-image: linear-gradient(180deg, rgba(2,8,15,.04), rgba(2,8,15,.02) 48%, rgba(2,9,16,.92)), url('/assets/card-city.png'); filter: saturate(1.55) hue-rotate(38deg); }
.theme-preferences .card-photo { background-image: linear-gradient(180deg, rgba(2,8,15,.08), rgba(2,8,15,.02) 48%, rgba(2,9,16,.94)), url('/assets/card-animal.png'), url('/assets/card-nature.png'), url('/assets/card-city.png'), url('/assets/card-car.png'); background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%; background-position: center, left top, right top, left bottom, right bottom; }
.tint-overlay { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .08s; background: var(--tint, transparent); mix-blend-mode: screen; }
.direction { position: absolute; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 76px; min-height: 62px; padding: 8px; border: 1px solid currentColor; background: rgba(4, 16, 27, .56); backdrop-filter: blur(14px); opacity: .58; transition: opacity .15s, transform .15s, background .15s; cursor: pointer; user-select: none; }
.direction:hover, .direction.highlight { opacity: 1; transform: scale(1.05); }
.direction .arrow { font-size: 29px; line-height: 1; text-shadow: 0 0 14px currentColor; }
.direction-label { max-width: 98px; font-size: 10px; line-height: 1.05; text-align: center; text-transform: uppercase; font-weight: 900; letter-spacing: .04em; }
.direction-top { top: 0; left: 50%; transform: translateX(-50%); flex-direction: column; color: var(--green); border-radius: 0 0 24px 24px; border-top: 0; }
.direction-top:hover, .direction-top.highlight { transform: translateX(-50%) scale(1.05); background: rgba(22, 96, 61, .72); }
.direction-right { top: 50%; right: 0; transform: translateY(-50%); flex-direction: column; color: var(--violet); border-radius: 24px 0 0 24px; border-right: 0; }
.direction-right:hover, .direction-right.highlight { transform: translateY(-50%) scale(1.05); background: rgba(81, 27, 112, .72); }
.direction-bottom { bottom: 0; left: 50%; transform: translateX(-50%); flex-direction: column; color: var(--red); border-radius: 24px 24px 0 0; border-bottom: 0; }
.direction-bottom:hover, .direction-bottom.highlight { transform: translateX(-50%) scale(1.05); background: rgba(109, 25, 38, .72); }
.direction-left { top: 50%; left: 0; transform: translateY(-50%); flex-direction: column; color: var(--blue); border-radius: 0 24px 24px 0; border-left: 0; }
.direction-left:hover, .direction-left.highlight { transform: translateY(-50%) scale(1.05); background: rgba(19, 63, 116, .74); }
.question-panel { position: absolute; z-index: 7; right: 14px; bottom: 76px; left: 14px; padding: 19px 20px 22px; text-align: center; border: 1px solid rgba(130, 231, 246, .34); border-radius: 24px; background: linear-gradient(145deg, rgba(4, 21, 34, .72), rgba(1, 9, 17, .91)); backdrop-filter: blur(20px); box-shadow: 0 15px 38px rgba(0,0,0,.35); }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.question-panel h2 { max-width: 440px; margin: 0 auto; font-family: Georgia, serif; font-size: clamp(23px, 5vw, 34px); line-height: 1.12; text-shadow: 0 2px 18px #000; }
.swipe-hint { margin: 10px 0 0; color: #9fc2cf; font-size: 11px; }
.answer-buttons { display: none; }
.text-button { position: absolute; z-index: 21; bottom: 1px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 3px 8px; border: 0; background: rgba(2,8,16,.72); color: #9fb5c0; border-radius: 12px; font-size: 9px; cursor: pointer; }

.profile-view, .solution-view { padding: 92px 15px 26px; }
.result-card { width: 100%; max-width: 560px; margin: 0 auto; padding: 27px; border: 1px solid rgba(108, 226, 244, .34); border-radius: 30px; background: linear-gradient(145deg, rgba(7, 31, 49, .91), rgba(3, 12, 23, .96)); box-shadow: 0 22px 70px rgba(0,0,0,.46); backdrop-filter: blur(20px); }
.result-card h2 { margin: 5px 0 12px; font-family: Georgia, serif; font-size: clamp(27px, 6vw, 38px); line-height: 1.12; }
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 20px 0; }
.profile-item { min-height: 82px; padding: 12px; border-radius: 16px; background: rgba(15, 54, 74, .58); }
.profile-item span { display: block; color: #8db3c2; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.profile-item strong { display: block; margin-top: 5px; font-size: 15px; }
.profile-disclaimer, .legal-note { color: #8ca5b0; font-size: 11px; line-height: 1.5; }
.solution-lead { color: #c3d8e1; font-size: 16px; line-height: 1.55; }
.action-list { display: grid; gap: 10px; padding-left: 25px; }
.action-list li { padding-left: 4px; line-height: 1.45; }
.source-box, .media-box, .safety-box { margin: 17px 0; padding: 15px; border-radius: 17px; background: rgba(11, 48, 67, .6); border: 1px solid rgba(100, 212, 233, .2); }
.source-box span, .media-box span { color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.source-box p { margin: 7px 0 0; font-family: Georgia, serif; font-size: 17px; line-height: 1.4; }
.media-box { display: flex; align-items: center; gap: 12px; }
.media-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, #25a67d, #196b7b); }
.media-box strong { display: block; margin-top: 4px; font-size: 12px; }
.media-box button { margin-left: auto; border: 1px solid rgba(93,255,157,.5); border-radius: 999px; padding: 8px 11px; background: rgba(18, 96, 73, .7); cursor: pointer; }
.safety-box { border-color: rgba(255, 101, 114, .6); background: rgba(91, 17, 29, .6); }
.call-button { width: 100%; margin-top: 8px; border: 1px solid rgba(255, 101, 114, .78); background: linear-gradient(135deg, #b32843, #75172c); }

.emergency-dialog { width: min(92vw, 440px); padding: 28px; color: var(--ink); border: 1px solid rgba(255, 101, 114, .58); border-radius: 26px; background: #0a1724; box-shadow: 0 28px 100px rgba(0,0,0,.75); text-align: center; }
.emergency-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(7px); }
.dialog-close { position: absolute; top: 8px; right: 12px; border: 0; background: transparent; color: #a6bbc4; font-size: 30px; cursor: pointer; }
.emergency-symbol { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 50%; background: #a8243c; font-size: 32px; font-weight: 900; box-shadow: 0 0 30px rgba(255, 101, 114, .35); }
.emergency-dialog h2 { margin: 7px 0; font-family: Georgia, serif; font-size: 28px; }
.toast { position: fixed; z-index: 100; bottom: 25px; left: 50%; max-width: 88vw; transform: translate(-50%, 20px); padding: 10px 15px; border-radius: 999px; background: rgba(2, 11, 20, .94); border: 1px solid rgba(117, 232, 255, .35); opacity: 0; pointer-events: none; transition: .25s; font-size: 12px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 700px) {
  .app-shell { margin-top: 0; border-left: 1px solid rgba(98, 212, 235, .16); border-right: 1px solid rgba(98, 212, 235, .16); box-shadow: 0 0 100px rgba(0,0,0,.5); }
}
@media (max-height: 700px) {
  .topbar { height: 56px; }
  .progress-wrap { top: 52px; }
  .card-stage { top: 66px; bottom: 8px; }
  .question-panel { bottom: 60px; padding: 13px 16px 15px; }
  .question-panel h2 { font-size: 22px; }
  .swipe-hint { display: none; }
  .direction { min-height: 50px; }
}
@media (max-width: 390px) {
  .privacy-pill { max-width: 115px; overflow: hidden; white-space: nowrap; }
  .emergency-button { padding: 0 9px; }
  .question-card { right: 18px; border-radius: 25px; }
  .direction { min-width: 67px; }
  .direction-label { max-width: 76px; font-size: 9px; }
  .profile-view, .solution-view { padding-inline: 10px; }
  .result-card { padding: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}