:root{
  --bg:#080a1c;
  --card:#131427;
  --card2:#111225;
  --border:rgba(160,151,220,.20);
  --text:#f7f5ff;
  --muted:#85849b;
  --purple:#c56de8;
  --blue:#77a5ff;
}

*{box-sizing:border-box}

html,body{min-height:100%;margin:0}

body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(650px 520px at 17% 13%,rgba(115,31,113,.48),transparent 66%),
    radial-gradient(620px 520px at 82% 12%,rgba(8,103,126,.42),transparent 63%),
    radial-gradient(650px 500px at 65% 100%,rgba(35,48,103,.22),transparent 68%),
    linear-gradient(135deg,#151025 0%,#090b1c 45%,#07091a 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.025),transparent 42%);
}

.page{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:9.4vh 20px 70px;
}

.hero-card{
  width:min(100%,510px);
  min-height:356px;
  padding:28px;
  border:1px solid var(--border);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(25,26,48,.97),rgba(16,16,35,.98));
  box-shadow:0 28px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);
  text-align:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:23px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(0,205,220,.55);
  background:rgba(0,153,174,.08);
  color:#00c9d4;
  font-size:9px;
  font-weight:600;
  letter-spacing:.02em;
  margin:1px 0 19px;
}

h1{
  margin:0 auto 12px;
  max-width:470px;
  font-size:30px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.8px;
}

h1 .gradient{
  display:block;
  background:linear-gradient(90deg,#d967dc 0%,#bc80ed 45%,#71a9ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.intro{
  max-width:405px;
  margin:0 auto;
  color:#89889d;
  font-size:11px;
  line-height:1.55;
  font-weight:400;
}

.start{
  margin-top:17px;
  border:0;
  height:34px;
  min-width:109px;
  padding:0 23px;
  border-radius:999px;
  color:#161326;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
  background:linear-gradient(100deg,#d86bdd 0%,#b986ef 48%,#74a8ff 100%);
  box-shadow:0 7px 20px rgba(122,105,232,.20);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.start:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(122,105,232,.32);
  filter:brightness(1.05);
}

.start:active{transform:translateY(0)}

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:19px;
}

.stat{
  min-height:47px;
  border:1px solid rgba(158,151,208,.20);
  border-radius:13px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(20,20,40,.28);
}

.stat strong{
  color:#a98ae8;
  font-size:17px;
  line-height:1;
  font-weight:800;
}

.stat span{
  margin-top:4px;
  color:#77768c;
  font-size:8px;
  line-height:1;
}

.survey{display:none}
.survey.active{display:block}

.progress{
  height:3px;
  border-radius:99px;
  background:rgba(150,145,190,.14);
  overflow:hidden;
  margin:0 0 25px;
}

.progress i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,#d967dc,#74a8ff);
  transition:width .3s ease;
}

.counter{
  color:#78778c;
  font-size:10px;
  margin-bottom:11px;
}

.question{
  margin:0 auto 22px;
  max-width:420px;
  font-size:23px;
  line-height:1.25;
  font-weight:800;
}

.answers{display:grid;gap:9px}

.answer{
  width:100%;
  padding:13px 16px;
  border-radius:12px;
  border:1px solid rgba(158,151,208,.20);
  background:rgba(19,20,40,.72);
  color:#c7c5d6;
  text-align:left;
  font:inherit;
  font-size:11px;
  cursor:pointer;
  transition:.18s ease;
}

.answer:hover{
  border-color:rgba(151,120,235,.65);
  background:rgba(91,63,142,.18);
  transform:translateY(-1px);
}

.answer.selected{
  border-color:#9d72ed;
  background:rgba(126,83,188,.20);
}

.result{display:none;text-align:center}
.result.active{display:block}

.result h2{
  margin:12px 0 13px;
  font-size:28px;
}

.result-score{
  font-size:44px;
  font-weight:800;
  background:linear-gradient(90deg,#d967dc,#74a8ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.result p{
  color:#89889d;
  font-size:12px;
  line-height:1.6;
  margin:12px auto 22px;
  max-width:390px;
}

.selection-hint{
  min-height:18px;
  margin:12px 0 0;
  color:#89889d;
  font-size:10px;
}

.continue{
  width:100%;
  margin-top:10px;
  padding:12px;
  border:0;
  border-radius:10px;
  color:#161326;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  background:linear-gradient(100deg,#d86bdd,#74a8ff);
}

.continue:disabled{opacity:.45;cursor:not-allowed}

.result-details{margin:20px 0;text-align:left}

.result-details h3{
  margin:22px 0 10px;
  color:var(--text);
  font-size:14px;
}

.facet{margin:10px 0}

.facet-label{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px;
  color:#c7c5d6;
  font-size:10px;
}

.facet-track{
  height:5px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(150,145,190,.14);
}

.facet-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#d967dc,#74a8ff);
}

.profile-tags{display:flex;flex-wrap:wrap;gap:6px}

.profile-tag{
  padding:5px 9px;
  border:1px solid rgba(158,151,208,.24);
  border-radius:999px;
  color:#c7c5d6;
  font-size:9px;
}

.music-list,.music-tracks{display:grid;gap:10px}

.music-status{
  color:#89889d;
  font-size:10px;
  line-height:1.5;
}

.track-card{
  display:grid;
  gap:8px;
  padding:11px 12px;
  border:1px solid rgba(158,151,208,.20);
  border-radius:10px;
  background:rgba(19,20,40,.72);
}

.track-title{
  color:#eee6ff;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}

.track-title:hover{text-decoration:underline}

.track-meta,.track-note{
  color:#89889d;
  font-size:9px;
  line-height:1.45;
}

.track-preview{width:100%;height:36px}

.music-link{
  display:block;
  padding:10px 12px;
  border:1px solid rgba(158,151,208,.20);
  border-radius:10px;
  color:#d4c8f0;
  font-size:11px;
  text-decoration:none;
  background:rgba(19,20,40,.72);
}

.music-link:hover{border-color:rgba(151,120,235,.65)}

.music-link span{
  display:block;
  margin-top:3px;
  color:#89889d;
  font-size:9px;
}

.privacy-note{font-size:9px!important;margin:12px auto!important}

.restart{
  border:1px solid rgba(158,151,208,.24);
  background:rgba(30,30,55,.55);
  color:#c8c5d8;
  border-radius:999px;
  height:34px;
  padding:0 20px;
  cursor:pointer;
  font-size:10px;
}

@media(max-width:560px){
  .page{padding:30px 14px 45px;align-items:flex-start}
  .hero-card{padding:25px 18px 21px;border-radius:18px}
  h1{font-size:28px}
  .intro{font-size:11px}
  .stats{gap:5px}
  .stat{min-height:46px}
}