:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #09051b; color: #f4f1ff; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; overflow-x: hidden; background: #09051b; }
body::before { position: fixed; z-index: -1; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 50% -10%, #6740ad 0, #2b174d 43%, #080411 100%); }
main { width: min(100% - 2rem, 960px); min-height: 100vh; padding: 4rem 0; }
form { min-height: calc(100vh - 8rem); display: flex; flex-direction: column; }
header, footer { display: flex; justify-content: space-between; align-items: center; }
header { min-height: 1.5rem; }
.progress-track { width: 100%; height: .28rem; overflow: hidden; border-radius: 999px; background: #a48bd638; }
#progress { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a576ff, #7ee8ff); transition: width .25s ease; }
section { flex: 1; display: grid; align-content: start; padding-top: clamp(2rem, 9vh, 6rem); }
h1 { margin: .4rem 0 1rem; max-width: 15ch; font-size: clamp(2rem, 5vw, 4.25rem); line-height: 1.08; }
.card-step-title { max-width: none; text-align: left; white-space: nowrap; font-size: clamp(1.1rem, 5.5vw, 1.6rem); letter-spacing: -.02em; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.choice-group-label { grid-column: 1 / -1; margin: .4rem 0 -.45rem; color: #c7c0e3; font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.carousel-viewport { grid-column: 1 / -1; width: 100%; overflow: hidden; overscroll-behavior-x: contain; touch-action: pan-y; cursor: grab; user-select: none; }
.carousel-viewport:active { cursor: grabbing; }
.carousel-track { display: flex; gap: min(5vw, 3rem); width: max-content; will-change: transform; }
.choice, .summary button { min-height: 10rem; padding: 1.1rem; border: 1px solid #776cae; border-radius: 1.25rem; background: #130d2b; color: inherit; box-shadow: 0 1rem 2.5rem #0004; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.carousel-track .choice { position: relative; flex: 0 0 min(70vw, 42rem); padding: 0; overflow: hidden; }
.choice-media { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 1.15rem; background: radial-gradient(circle at 25% 18%, #7ee8ff80, transparent 23%), radial-gradient(circle at 70% 75%, #d176ff88, transparent 28%), linear-gradient(145deg, #4b2b79, #11082c 58%, #05030e); }
.choice-preview, .choice-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.choice-preview { transition: opacity .2s ease; }
.choice-video { opacity: 0; transition: opacity .2s ease; }
.choice.video-ready .choice-video { opacity: 1; }
.choice.video-ready .choice-preview { opacity: 0; }
.hair-choices .carousel-track .choice { flex-basis: min(21.333vw, 200px); }
.hair-choices .choice-media { height: auto; aspect-ratio: 4 / 5; }
.style-choices { grid-template-columns: repeat(2, 45%); justify-content: space-between; }
.style-choices .choice { position: relative; min-height: 0; padding: 0; overflow: hidden; }
.connection-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: .65rem; }
.connection-choices .choice-group-label { margin: .2rem 0 -.15rem; }
.connection-choices .choice-text { min-height: 2.75rem; padding: .6rem .45rem; border-radius: 999px; background: #1a1236; text-align: center; font-size: .86rem; white-space: nowrap; }
.connection-choices .choice-text:hover { transform: none; }
.connection-name-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .55rem; margin-bottom: .65rem; }
.connection-name-options .name-choice { min-height: 2.45rem; padding: .45rem .25rem; font-size: .78rem; }
.voice-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.voice-choice { display: grid; min-height: 8.5rem; padding: .8rem; border: 1px solid #776cae; border-radius: 1rem; background: #130d2b; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.voice-choice strong { font-size: .88rem; }
.voice-choice > span { color: #c7c0e3; font-size: .72rem; line-height: 1.35; }
.voice-choice .voice-play { align-self: end; color: #7ee8ff; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.voice-choice:hover, .voice-choice[aria-pressed=true] { border-color: #7ee8ff; background: #1e1640; }
.choice-media span { color: #ffffffaa; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.choice-label { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: block; padding: 2.75rem 1rem 1rem; color: #fff; background: linear-gradient(transparent, #09051bee 58%); font-size: 1rem; font-weight: 700; text-shadow: 0 1px 8px #000; }
.choice:hover, .choice[aria-pressed=true], .summary button:hover { border-color: #7ee8ff; background: #1e1640; transform: translateY(-2px); }
.choice[aria-pressed=true] .choice-media { box-shadow: inset 0 0 0 2px #7ee8ff; }
.name-choice { min-height: 3.25rem; padding: .75rem 1.1rem; border: 1px solid #776cae; border-radius: 999px; background: #130d2b; color: #f4f1ff; font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.name-choice:hover, .name-choice[aria-pressed=true] { border-color: #7ee8ff; background: #1e1640; transform: translateY(-2px); }
.name-field { display: grid; gap: .65rem; margin: 1.5rem 0 2rem; color: #c7c0e3; font-size: 1.1rem; }
.name-field[hidden], .summary[hidden] { display: none; }
.name-field input { width: min(100%, 34rem); padding: 1rem; border: 1px solid #776cae; border-radius: .8rem; background: #09051b; color: inherit; font: inherit; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: .75rem; margin: 1.5rem 0 2rem; }
.summary button { min-height: 5rem; }
.summary small { display: block; margin-bottom: .35rem; color: #7ee8ff; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
.error { min-height: 1.4rem; margin: 0; color: #f6b5c2; }
footer { padding-top: 1.5rem; border-top: 1px solid #776cae; }
button { padding: .8rem 1.2rem; border: 1px solid #7ee8ff; border-radius: .7rem; background: #7ee8ff; color: #09051b; font: inherit; font-weight: 700; cursor: pointer; }
#back { border-color: transparent; background: transparent; color: #c7c0e3; }
button:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 600px) {
  body { display: block; }
  main { width: 100%; min-height: 100dvh; padding: 1.25rem 0 max(1.25rem, env(safe-area-inset-bottom)); }
  form { min-height: calc(100dvh - 2.5rem - env(safe-area-inset-bottom)); }
  header, h1, .name-field, .summary, .error, footer { width: min(100% - 2rem, 34rem); margin-left: auto; margin-right: auto; }
  header { min-height: 1.5rem; }
  section { padding-top: .75rem; }
  h1 { font-size: clamp(1.5rem, 7.5vw, 2.2rem); }
  .choices { display: block; margin: 1.25rem 0; }
  .choice-group-label { width: min(100% - 2rem, 34rem); margin: 1rem auto -.25rem; }
  .choices:not(.has-carousel) { width: min(100% - 2rem, 34rem); margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .carousel-viewport { padding: .25rem 0 .7rem; overflow: hidden; }
  .carousel-track { gap: 5vw; }
  .carousel-track .choice { flex-basis: 70vw; max-width: none; min-height: 0; border-radius: 1.1rem; }
  .hair-choices .choice-group-label { margin-top: .55rem; }
  .hair-choices .carousel-viewport { padding-top: .15rem; padding-bottom: .25rem; }
  .hair-choices .carousel-track .choice { flex-basis: min(40vw, 10rem); max-width: none; }
  .hair-choices .choice-media { height: auto; aspect-ratio: 4 / 5; }
  .hair-choices .choice-label { padding: 2rem .7rem .65rem; font-size: .75rem; }
  .connection-choices { width: min(100% - 2rem, 34rem); margin: .65rem auto .25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
  .connection-choices .choice-group-label { width: auto; margin: .35rem 0 -.15rem; font-size: .7rem; }
  .connection-choices .choice-text { min-height: 2.4rem; padding: .45rem .15rem; font-size: .68rem; }
  .connection-choices ~ .name-field { margin-top: .35rem; margin-bottom: .4rem; font-size: .82rem; }
  .connection-choices ~ .name-field input { min-height: 2.65rem; padding: .55rem .7rem; }
  .connection-name-options { width: min(100% - 2rem, 34rem); margin: .45rem auto .55rem; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .4rem !important; }
  .connection-name-options .name-choice { min-height: 2.25rem; padding: .35rem .1rem; font-size: .7rem; }
  .voice-choices { width: min(100% - 2rem, 34rem); margin: .9rem auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .voice-choice { min-height: 4.75rem; padding: .55rem .65rem; border-radius: .8rem; }
  .voice-choice strong { font-size: .76rem; }
  .voice-choice > span { font-size: .62rem; }
  .voice-choice .voice-play { font-size: .58rem; }
  .style-choices { width: min(100% - 2rem, 34rem); margin: 1.25rem auto; grid-template-columns: repeat(2, 45%); gap: 0; }
  .style-choices .choice { border-radius: 1.1rem; }
  .choice-media { border-radius: 1rem; }
  .choice-media { aspect-ratio: 3 / 4; border-radius: 1rem; }
  .choice-label { padding: 3.25rem .85rem .85rem; font-size: .86rem; }
  .name-choice { min-height: 2.75rem; padding: .55rem .4rem; font-size: .86rem; }
  .name-field { margin-top: 1.25rem; margin-bottom: 1.25rem; }
  .name-field input { min-height: 3.25rem; font-size: 16px; }
  footer { position: sticky; z-index: 2; bottom: 0; gap: .75rem; padding-top: 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, #09051b 25%); }
  footer button { min-height: 2.7rem; flex: 1; padding: .6rem .8rem; font-size: .85rem; }
}