@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
:root{color-scheme:dark;font-family:"DM Sans",sans-serif;background:#100918;color:#fff}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#100918}body{background:radial-gradient(circle at 50% 0,#542064 0,#211025 43%,#100918 82%)}button{font:inherit}.app{width:min(100%,760px);height:100vh;height:100dvh;margin:auto;padding:18px 18px calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-rows:auto 5px auto minmax(0,1fr) minmax(120px,18vh) auto;gap:12px}header,footer{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:20px;font-weight:700;letter-spacing:-.06em}.brand img{width:27px;height:27px}header span{font-size:10px;font-weight:700;letter-spacing:.15em;color:#d8c6dc}.progress{display:flex;gap:4px}.progress i{height:4px;flex:1;border-radius:5px;background:#fff2}.progress i.done{background:var(--color)}.progress i.current{background:var(--color);box-shadow:0 0 14px var(--color)}.copy{text-align:center;align-self:end}.copy p{margin:0}.copy p:first-child{color:#f5a4e9;font-size:10px;font-weight:700;letter-spacing:.16em}.copy h1{margin:7px 0 6px;font:600 clamp(28px,8vw,42px)/1.08 "Playfair Display",serif;letter-spacing:-.04em}.copy p:last-child{color:#d7c8d9;font-size:13px}.media-shell{position:relative;min-height:0;overflow:hidden;border:1px solid #ffffff24;border-radius:26px;background:#28142f;box-shadow:0 16px 55px #0005}.media-shell img,.media-shell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.media-shell video{opacity:0;transition:opacity .3s}.media-shell.video-ready video{opacity:1}.media-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0000 55%,#10091888)}.media-state{position:absolute;top:13px;left:14px;padding:6px 9px;border-radius:999px;background:#10091888;color:#ffffffbd;font-size:10px;letter-spacing:.08em}.media-shell.video-ready .media-state{display:none}.carousel-wrap{min-width:0;overflow:hidden;display:flex;align-items:center}.carousel{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:none;scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px 18vw 8px}.carousel::-webkit-scrollbar{display:none}.card{position:relative;flex:0 0 142px;height:clamp(104px,15vh,135px);overflow:hidden;padding:0;border:1px solid #ffffff25;border-radius:17px;background:#321c39;color:#fff;cursor:pointer;scroll-snap-align:center;text-align:left}.card img{width:100%;height:100%;object-fit:cover;opacity:.72}.card span{position:absolute;inset:auto 0 0;padding:22px 10px 9px;background:linear-gradient(#0000,#0b0710cc);font-size:12px;font-weight:700}.card.selected{border:2px solid #fa8fe5;box-shadow:0 0 0 2px #f987de38}.card.selected img{opacity:1}footer{gap:12px}.back,.continue,.dialog button{border:0;cursor:pointer}.back{background:transparent;color:#d4c4d7;padding:11px 2px;font-size:13px}.back:disabled{visibility:hidden}.continue{padding:12px 18px;border-radius:999px;background:linear-gradient(100deg,#fc9de9,#b58bff);color:#1d1020;font-size:13px;font-weight:700}.continue span{font-size:17px;margin-left:4px}.dialog{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:20px;background:#0b0711aa;backdrop-filter:blur(10px)}.dialog>div{width:min(100%,380px);padding:35px 26px;border:1px solid #ffffff25;border-radius:25px;background:#26142d;text-align:center}.dialog h2{margin:17px 0 8px;font:600 27px/1.1 "Playfair Display",serif}.dialog p{margin:0;color:#d7c9da}.dialog i{display:block;width:33px;height:33px;margin:auto;border:3px solid #fff3;border-top-color:#fa98e6;border-radius:50%;animation:spin 1s linear infinite}.dialog button{margin-top:19px;padding:10px 18px;border-radius:99px;background:#f5a3e8;color:#1d1021;font-weight:700}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:761px){.app{width:min(100%,1180px);padding:28px clamp(40px,7vw,100px);grid-template-rows:auto 5px auto minmax(0,1fr) 19vh auto;gap:15px}.copy h1{font-size:48px}.media-shell{width:70%;justify-self:center;min-height:260px}.carousel{padding-inline:25%;}.card{flex-basis:190px;height:145px}.copy p:last-child{font-size:15px}}
.carousel.style-options{width:min(100%,920px);height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;padding:4px 0 8px;gap:clamp(12px,2.5vw,24px);scroll-snap-type:none}.carousel.style-options .card{width:100%;height:100%;min-height:220px;flex:auto;border-width:2px;border-radius:24px}.carousel.style-options .card img,.carousel.style-options .card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.carousel.style-options .card video{opacity:0;transition:opacity .3s}.carousel.style-options .card:has(video) video{opacity:1}.carousel.style-options .card img{opacity:.42}.carousel.style-options .card.selected{border:4px solid #fa8fe5;box-shadow:0 0 0 3px #f987de55,0 18px 50px #0006}.carousel.style-options .card.selected img{opacity:.62}.carousel.style-options .card span{padding:38px 18px 16px;font-size:clamp(17px,2vw,23px);letter-spacing:.01em}.selection-check{position:absolute;top:14px;right:14px;display:none;font-size:clamp(22px,3vw,32px);line-height:1;filter:drop-shadow(0 2px 5px #0008)}.carousel.style-options .card.selected .selection-check{display:block}
.style-step .carousel-wrap{min-height:0;align-items:stretch}.style-step .carousel{overflow:hidden}.style-step .copy p:last-child{color:#d7c8d9}.style-step .media-shell{display:none}
.dialog[hidden]{display:none}
.age-gate{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:#0b0711bf;backdrop-filter:blur(12px)}.age-gate-card{width:min(100%,390px);padding:32px 27px 28px;border:1px solid #ffffff2e;border-radius:26px;background:linear-gradient(145deg,#3b1a43,#211126);box-shadow:0 24px 70px #0009;text-align:center}.age-gate-badge{display:grid;place-items:center;width:54px;height:54px;margin:auto;border:1px solid #ffb2ea99;border-radius:50%;background:#f798df22;color:#ffb1eb;font-size:17px;font-weight:700;letter-spacing:.04em}.age-gate h2{margin:17px 0 9px;font:600 29px/1.1 "Playfair Display",serif}.age-gate p{margin:0;color:#decfe0;font-size:14px;line-height:1.5}.age-gate-confirm{width:100%;margin-top:24px;padding:13px 18px;border:0;border-radius:999px;background:linear-gradient(100deg,#fc9de9,#b58bff);color:#1d1020;cursor:pointer;font:700 14px "DM Sans",sans-serif}.age-gate-confirm span{margin-left:5px;font-size:18px;line-height:0}.age-gate-confirm:focus-visible{outline:3px solid #fff;outline-offset:3px}.age-gate[hidden]{display:none}
.carousel-wrap[hidden],.media-shell[hidden]{display:none}
.step-title{margin:0 0 5px!important;color:#fff!important;font-size:14px!important;font-weight:700;line-height:1.2}
#special:not([hidden]){grid-row:4 / span 2;min-height:0;overflow:hidden;padding:4px 1px;display:flex}.voice-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:8px}.voice-card{position:relative;min-height:0;padding:10px 36px 10px 11px;border:1px solid #ffffff25;border-radius:14px;background:#ffffff0b;color:#fff;text-align:left;cursor:pointer;overflow:hidden}.voice-card.selected{border:2px solid #fa8fe5;box-shadow:0 0 0 2px #f987de30}.voice-title{display:block;font-weight:700;font-size:12px;line-height:1.15}.voice-description{display:block;margin-top:4px;color:#d5c6d7;font-size:10px;line-height:1.25}.play{position:absolute;right:9px;bottom:9px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#f59be6;color:#241126;font-size:10px}.details{width:100%;align-self:center;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.details section{display:grid;gap:7px;padding:12px;border:1px solid #ffffff18;border-radius:15px;background:#ffffff08}.details label{font-size:12px;font-weight:700;line-height:1.15}.details select,.details input{width:100%;min-width:0;height:34px;padding:0 8px;border:1px solid #ffffff26;border-radius:9px;background:#180d1e;color:#f5edf6;font:inherit;font-size:11px;outline:none}.details select:focus,.details input:focus{border-color:#fa8fe5;box-shadow:0 0 0 2px #f987de30}.details input::placeholder{color:#b9aabc}@media(max-height:700px){.voice-description{display:none}.app{gap:9px;padding-top:12px;padding-bottom:12px;grid-template-rows:auto 5px auto minmax(0,1fr) minmax(96px,16vh) auto}.copy h1{margin:4px 0;font-size:clamp(25px,7vw,34px)}.copy p:last-child{font-size:12px}.details section{padding:9px}.details{gap:6px}.details select,.details input{height:31px}}@media(min-width:761px){.voice-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}.voice-card{padding:15px 40px 14px 14px}.voice-title{font-size:14px}.voice-description{font-size:11px;margin-top:7px}.details{width:min(900px,100%);margin:auto;gap:12px}.details section{padding:16px}.details select,.details input{height:38px;font-size:12px}}
/* Keep the action area in the viewport: imagery yields first on short screens. */
.app{min-height:100svh;height:100dvh;grid-template-rows:auto 5px auto minmax(0,1fr) clamp(76px,15dvh,135px) auto;gap:clamp(7px,1.8dvh,14px)}footer{min-height:44px;flex-shrink:0}
@media(min-width:761px){.app{grid-template-rows:auto 5px auto minmax(0,1fr) clamp(145px,19dvh,210px) auto}}
@media(max-width:760px){.carousel{padding-top:2px;padding-bottom:5px}.card{height:clamp(76px,14dvh,135px)}.carousel.style-options .card{height:100%;min-height:190px;border-radius:20px}.carousel.style-options{gap:10px}.carousel.style-options .card span{padding:28px 12px 12px;font-size:16px}.selection-check{top:10px;right:10px;font-size:24px}}
@media(max-height:620px){.app{padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));grid-template-rows:auto 4px auto minmax(0,1fr) clamp(68px,14dvh,96px) auto;gap:7px}.copy h1{margin:2px 0 3px;font-size:clamp(24px,7vw,32px)}.copy #eyebrow{display:none}.step-title{margin-bottom:3px!important;font-size:12px!important}.copy p:last-child{font-size:11px}.media-shell{border-radius:18px}.media-state{display:none}.card{height:clamp(68px,14dvh,96px);border-radius:13px}.card span{padding:16px 8px 6px;font-size:11px}.carousel.style-options .card{height:clamp(68px,14dvh,96px)}.continue{padding:10px 16px}.back{padding-block:9px}}
@media(max-height:470px){.app{grid-template-rows:auto 4px auto minmax(0,1fr) 62px auto;gap:5px}.brand{font-size:18px}.brand img{width:23px;height:23px}header span{font-size:9px}.copy h1{font-size:23px}.copy p:last-child{display:none}.step-title{font-size:11px!important}.card,.carousel.style-options .card{height:62px}.card span{padding:13px 7px 5px;font-size:10px}.media-shell{border-radius:14px}.continue{padding:9px 14px;font-size:12px}.back{font-size:12px}}
.card.selected{border-width:3px}.card .selection-check{position:absolute;top:9px;right:9px;width:34px;height:34px;display:none;align-items:center;justify-content:center;padding:0 0 2px 1px;border-radius:50%;background:#fa8fe5;color:#fff;font:700 22px/34px "DM Sans",sans-serif;text-align:center;text-shadow:0 1px 2px #0005}.card.selected .selection-check{display:flex}.style-step footer{display:block}.style-step footer .back{display:none}.style-step footer .continue{display:block;width:100%}