.destiny-experience,
.destiny-experience * { box-sizing: border-box; }

.destiny-experience {
    --de-ink: #f0eee8;
    --de-muted: rgba(231,229,221,.63);
    --de-gold: #d7b46b;
    --de-blue: #7da7bc;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: var(--de-ink);
    background:
        radial-gradient(ellipse 55% 30% at 82% 9%, rgba(125,167,188,.12), transparent 73%),
        radial-gradient(ellipse 45% 35% at 10% 63%, rgba(215,180,107,.08), transparent 75%),
        linear-gradient(165deg, #080a0f, #0c1118 49%, #090a0e);
    font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
}

.destiny-experience::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .15;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}

.destiny-shell { position: relative; z-index: 2; width: min(100% - 64px, 1240px); margin: 0 auto; padding: 44px 0 100px; }
.destiny-back { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; color: var(--de-muted); font-size: .78rem; font-weight: 800; text-decoration: none; letter-spacing: .04em; }
.destiny-back span { color: var(--de-gold); }
.destiny-back:hover { color: white; }

.destiny-hero { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 70px; align-items: center; padding: clamp(50px, 8vw, 108px) clamp(20px, 4vw, 50px) 70px; }
.destiny-eyebrow,
.destiny-stage-copy > span,
.destiny-submit-zone > div > span { color: var(--de-gold); font-size: .66rem; font-weight: 800; letter-spacing: .19em; }
.destiny-hero h1 { margin: 16px 0 0; font-size: clamp(3rem, 7vw, 6.8rem); font-weight: 800; line-height: .87; letter-spacing: -.07em; }
.destiny-hero h1 em { color: #d8d1c3; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.destiny-hero-copy p { max-width: 670px; margin: 30px 0 0; color: var(--de-muted); font-size: clamp(.95rem, 1.4vw, 1.1rem); line-height: 1.65; }

.destiny-compass { position: relative; display: grid; width: 220px; height: 220px; place-items: center; transform: rotate(8deg); }
.destiny-compass svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(125,167,188,.36); stroke-width: 1; animation: de-orbit 30s linear infinite; }
.destiny-compass svg path { fill: rgba(125,167,188,.05); stroke: rgba(215,180,107,.55); }
.destiny-compass > span { color: #e1c689; font-family: 'Instrument Serif', serif; font-size: 5rem; font-style: italic; }
.destiny-compass small { position: absolute; bottom: -6px; color: rgba(255,255,255,.3); font-size: .55rem; font-weight: 800; letter-spacing: .18em; }
@keyframes de-orbit { to { transform: rotate(360deg); } }

.destiny-atmosphere { position: absolute; inset: 0; pointer-events: none; }
.destiny-atmosphere i { position: absolute; width: 55px; height: 38px; background: rgba(110,145,165,.08); border: 1px solid rgba(125,167,188,.13); clip-path: polygon(12% 0,100% 22%,76% 100%,0 70%); }
.destiny-atmosphere i:nth-child(1) { top: 18%; left: 4%; transform: rotate(22deg); }
.destiny-atmosphere i:nth-child(2) { top: 36%; right: 6%; transform: rotate(-37deg) scale(.7); }
.destiny-atmosphere i:nth-child(3) { top: 66%; left: 10%; transform: rotate(55deg) scale(.45); }
.destiny-atmosphere i:nth-child(4) { bottom: 7%; right: 13%; transform: rotate(7deg) scale(1.2); }

.destiny-messages { margin: 0 4% 24px; }
.destiny-alert { display: flex; gap: 10px; align-items: center; margin: 0; padding: 15px 18px; color: #f1dcae; font-size: .86rem; background: rgba(215,180,107,.08); border: 1px solid rgba(215,180,107,.24); }

.destiny-form { position: relative; }
.destiny-stage { position: relative; display: grid; grid-template-columns: 70px minmax(250px,.56fr) minmax(0,1.44fr); gap: clamp(22px, 4vw, 54px); align-items: start; padding: clamp(38px, 5vw, 70px); background: linear-gradient(120deg, rgba(24,28,36,.97), rgba(12,15,21,.99)); border: 1px solid rgba(255,255,255,.09); }
.destiny-stage-genres { clip-path: polygon(0 6%, 2% 0, 98% 0, 100% 9%, 99% 91%, 96% 100%, 3% 98%, 0 90%); }
.destiny-stage-length { clip-path: polygon(1% 0, 96% 2%, 100% 10%, 99% 91%, 96% 100%, 2% 98%, 0 88%); }
.destiny-stage-number { display: grid; width: 55px; height: 64px; place-items: center; color: #e8e2d7; font-size: .72rem; font-weight: 800; letter-spacing: .13em; background: rgba(125,167,188,.12); border: 1px solid rgba(125,167,188,.28); clip-path: polygon(9% 0,100% 8%,88% 91%,28% 100%,0 74%); }
.destiny-stage-copy h2 { margin: 11px 0 0; font-size: clamp(1.8rem, 3.5vw, 3.4rem); line-height: .98; letter-spacing: -.055em; }
.destiny-stage-copy p { margin: 17px 0 0; color: var(--de-muted); font-size: .86rem; line-height: 1.55; }

.destiny-category-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.destiny-category,
.destiny-length { position: relative; display: block; }
.destiny-category input,
.destiny-length input { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.destiny-category span { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; padding: 0 14px; color: rgba(238,235,226,.7); font-size: .76rem; font-weight: 700; cursor: pointer; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.1); transition: color .2s ease, border-color .2s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.destiny-category span b { font: inherit; }
.destiny-category span small { color: rgba(231,229,221,.42); font-size: .58rem; font-weight: 700; letter-spacing: .04em; }
.destiny-category span i { width: 6px; height: 6px; background: rgba(125,167,188,.45); transform: rotate(45deg); }
.destiny-category input:focus-visible + span { outline: 2px solid white; outline-offset: 3px; }
.destiny-category input:checked + span { color: white; background: rgba(125,167,188,.12); border-color: rgba(125,167,188,.65); transform: translateY(-2px); }
.destiny-category input:checked + span i { background: var(--de-gold); box-shadow: 0 0 9px rgba(215,180,107,.7); }
.destiny-category.is-disabled input,
.destiny-length.is-disabled input { cursor: not-allowed; }
.destiny-category.is-disabled span,
.destiny-length.is-disabled > span { opacity: .38; cursor: not-allowed; }
.destiny-no-options { color: var(--de-muted); }

.destiny-route-line { position: relative; height: 82px; margin-inline: 8%; }
.destiny-route-line::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(215,180,107,.44), rgba(125,167,188,.4), transparent); transform: rotate(-1deg); }
.destiny-route-line i,
.destiny-route-line span,
.destiny-route-line b { position: absolute; top: calc(50% - 4px); width: 8px; height: 8px; background: #0b0e14; border: 1px solid var(--de-gold); transform: rotate(45deg); }
.destiny-route-line i { left: 12%; }.destiny-route-line span { left: 51%; }.destiny-route-line b { right: 12%; }

.destiny-length-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.destiny-length > span { display: flex; min-height: 178px; flex-direction: column; justify-content: flex-end; padding: 20px; cursor: pointer; background: linear-gradient(150deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.09); transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .2s ease, background .2s ease; }
.destiny-length:nth-child(2) > span { transform: translateY(-10px); }
.destiny-length small { margin-bottom: auto; color: var(--de-blue); font-size: .6rem; font-weight: 800; letter-spacing: .14em; }
.destiny-length strong { font-size: 1rem; }
.destiny-length em { margin-top: 7px; color: var(--de-muted); font-family: 'Instrument Serif', serif; font-size: 1rem; }
.destiny-length > span > b { margin-top: 18px; color: rgba(231,229,221,.4); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.destiny-length input:focus-visible + span { outline: 2px solid white; outline-offset: 3px; }
.destiny-length input:checked + span { background: linear-gradient(150deg, rgba(215,180,107,.14), rgba(125,167,188,.05)); border-color: rgba(215,180,107,.6); transform: translateY(-8px); }

.destiny-submit-zone { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 36px clamp(24px,5vw,68px) 0; }
.destiny-submit-zone p { margin: 6px 0 0; color: var(--de-muted); font-size: .72rem; }
.destiny-reset { margin: 10px 0 0; padding: 0; color: var(--de-blue); font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; background: none; border: 0; border-bottom: 1px solid rgba(125,167,188,.35); }
.destiny-reset:hover { color: white; }
.destiny-submit-zone > button { display: inline-flex; min-height: 64px; align-items: center; gap: 32px; padding: 0 9px 0 26px; color: #15130e; font: inherit; font-size: .83rem; font-weight: 800; cursor: pointer; background: var(--de-gold); border: 0; transition: transform .4s cubic-bezier(.16,1,.3,1), background .2s ease; }
.destiny-submit-zone > button i { display: grid; width: 46px; height: 46px; place-items: center; color: white; font-style: normal; background: #171718; }
.destiny-submit-zone > button:hover { background: #efd494; transform: translateY(-4px); }
.destiny-submit-zone > button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

@media (max-width: 900px) {
    .destiny-shell { width: min(100% - 40px, 760px); padding-top: 24px; }
    .destiny-hero { grid-template-columns: 1fr 150px; gap: 24px; padding-inline: 8px; }
    .destiny-compass { width: 140px; height: 140px; }
    .destiny-stage { grid-template-columns: 52px 1fr; padding: 34px 26px; clip-path: none; border-radius: 18px; }
    .destiny-category-grid,
    .destiny-length-grid { grid-column: 2; }
    .destiny-route-line { height: 50px; }
}

@media (max-width: 640px) {
    .destiny-shell { width: min(100% - 28px, 620px); padding-bottom: 70px; }
    .destiny-hero { display: block; padding: 56px 4px 46px; }
    .destiny-hero h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
    .destiny-hero-copy p { margin-top: 22px; font-size: .9rem; }
    .destiny-compass { position: absolute; top: 72px; right: -50px; width: 130px; height: 130px; opacity: .18; }
    .destiny-stage { display: block; padding: 26px 20px; }
    .destiny-stage-number { width: 44px; height: 48px; margin-bottom: 18px; }
    .destiny-stage-copy h2 { font-size: 1.85rem; }
    .destiny-stage-copy p { margin-bottom: 22px; }
    .destiny-category-grid { gap: 7px; }
    .destiny-category span { padding-inline: 12px; font-size: .72rem; }
    .destiny-length-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 4px; }
    .destiny-length:nth-child(2) > span { transform: none; }
    .destiny-length > span { min-height: 136px; border-radius: 12px; }
    .destiny-submit-zone { align-items: stretch; flex-direction: column; padding: 28px 0 0; }
    .destiny-submit-zone > button { width: 100%; justify-content: space-between; min-height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
    .destiny-compass svg { animation: none; }
    .destiny-category span,
    .destiny-length > span,
    .destiny-submit-zone > button { transition: none; }
}