@layer components{.onboarding-aurora{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden;transform:translateZ(0)}.onboarding-aurora:before,.onboarding-aurora:after{content:"";filter:blur(80px);background:radial-gradient(circle, color-mix(in srgb, var(--tint,#7f9dd6) 40%, transparent) 0%, transparent 70%);border-radius:50%;transition:background 1.4s;position:absolute}.onboarding-aurora:before{width:46%;height:78%;animation:13s ease-in-out infinite aurora-a;top:-18%;left:4%}.onboarding-aurora:after{width:40%;height:70%;animation:17s ease-in-out infinite aurora-b;bottom:-22%;right:2%}@media (prefers-reduced-motion:reduce){.onboarding-aurora:before,.onboarding-aurora:after{animation:none}}.wheel-layout{flex-direction:column;width:100%;max-width:1440px;margin-inline:auto;padding:40px 20px 56px;display:flex}.wheel-side{display:contents}.wheel-before{text-align:center;order:-1}.wheel-layout>.wheel{margin-inline:-20px}@media (min-width:768px){.wheel-layout{padding:56px 32px}.wheel-layout>.wheel{margin-inline:-32px}.wheel-before,.wheel-card,.wheel-after{width:100%;max-width:520px;margin-inline:auto}}@media (min-width:1024px){.wheel-layout{grid-template-columns:minmax(0,1fr) minmax(0,clamp(400px,36vw,520px));column-gap:64px;min-height:max(640px,100dvh);padding:0 clamp(24px,5vw,96px) 0 0;display:grid}.wheel-layout>.wheel{margin-inline:0}.wheel-side{flex-direction:column;justify-content:center;padding-block:40px;display:flex}.wheel-before{text-align:left;order:0;margin-bottom:32px}.wheel-before,.wheel-card,.wheel-after{max-width:none;margin-inline:0}}.wheel{--wheel-left:44px;--wheel-row:68px;--wheel-origin:-360px;--wheel-step:11.5deg;height:360px;color:var(--tint);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;position:relative;overflow:clip;container-type:inline-size}.wheel[data-dragging=true]{cursor:grabbing}.wheel:focus-visible{outline:2px solid var(--wine);outline-offset:-4px;border-radius:var(--r-card)}.wheel-arrow{width:48px;height:24px;transition:color .6s;display:none;position:absolute;top:50%;transform:translateY(-50%)}.wheel-item{font:inherit;white-space:nowrap;cursor:pointer;transform:translate(-50%, calc(-50% + var(--d) * var(--wheel-row)));background:0 0;border:0;margin:0;padding:8px 0;font-size:clamp(28px,11.9048cqi - 3.80952px,48px);line-height:1.2;transition:transform .7s cubic-bezier(.22,.8,.2,1),opacity .6s,filter .6s;position:absolute;top:50%;left:50%}.wheel-item>span{transform-origin:50%;letter-spacing:-.035em;color:var(--wine);font-weight:600;transition:transform .7s cubic-bezier(.22,.8,.2,1),color .5s;display:block;transform:scale(.76)}.wheel-item[data-step="0"]{cursor:default}.wheel-item[data-step="0"]>span{color:var(--ink);font-weight:700;transform:none}.wheel-item[data-step="1"]{opacity:.62;filter:blur(1.6px)}.wheel-item[data-step="2"]{opacity:.3;filter:blur(4px)}.wheel-item[data-step="3"]{opacity:0;filter:blur(7px);pointer-events:none}.wheel-item[data-jump]{transition:none}@media (min-width:768px){.wheel{--wheel-left:96px;--wheel-origin:-520px;--wheel-step:11deg;height:420px}.wheel-item{left:var(--wheel-left);transform-origin:var(--wheel-origin) 50%;transform:translateY(-50%) rotate(calc(var(--d) * var(--wheel-step)))}.wheel-item>span{transform-origin:0}.wheel-arrow{left:calc(var(--wheel-left) - 68px);width:48px;height:24px;display:block}.wheel-item{font-size:clamp(34px, calc((100cqi - var(--wheel-left) - 8px) / 8.4), 56px)}.wheel-item>span{transform:scale(.74)}.wheel-item[data-step="1"]{filter:blur(2.5px)}.wheel-item[data-step="2"]{filter:blur(6px)}.wheel-item[data-step="3"]{filter:blur(10px)}}@media (min-width:1024px){.wheel{--wheel-left:clamp(96px, 11vw, 160px);--wheel-origin:-640px;height:auto;min-height:640px}.wheel-arrow{left:calc(var(--wheel-left) - 88px);width:64px;height:32px}.wheel-item{font-size:clamp(34px, calc((100cqi - var(--wheel-left) - 8px) / 8.4), 72px)}}.wheel-card{border-radius:var(--r-panel);background:var(--surface);box-shadow:var(--shadow-card);flex-direction:column;gap:16px;padding:20px;display:flex}.wheel-card-text{text-align:center;flex-direction:column;gap:16px;display:flex}.wheel-card-head{justify-content:center;align-items:center;gap:16px;display:flex}.wheel-card-icon{background:var(--tint);width:48px;height:48px;color:var(--surface);border-radius:999px;flex:none;place-items:center;transition:background-color .6s;display:grid}.wheel-card-icon svg{width:24px;height:24px}.wheel-card-count{font-variant-numeric:tabular-nums;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0;font-size:12px;font-weight:600}.wheel-card-name{letter-spacing:-.025em;color:var(--ink);margin:0;font-size:22px;font-weight:700;line-height:1.2}.wheel-card-desc{min-height:3em;color:var(--muted);margin:0;font-size:14px;line-height:1.5}.wheel-card-chips{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.wheel-chip{background:color-mix(in srgb, var(--tint) 12%, transparent);white-space:nowrap;color:color-mix(in srgb, var(--tint) 88%, var(--ink));border-radius:999px;padding:8px 12px;font-size:13px;font-weight:600}.wheel-card-actions{align-items:center;gap:12px;display:flex}.wheel-card-actions>form{flex:1;min-width:0}.wheel-card-step{flex:none;width:56px;min-height:56px;padding:0}.wheel-card-step svg{width:20px;height:20px}@media (min-width:1024px){.wheel-card{gap:20px;padding:32px}.wheel-card-text{text-align:left;gap:20px}.wheel-card-head,.wheel-card-chips{justify-content:flex-start}.wheel-card-icon{width:56px;height:56px}.wheel-card-icon svg{width:28px;height:28px}.wheel-card-name{font-size:28px}.wheel-card-desc{font-size:16px}}.wheel-choose,.wheel-chosen{flex:1;min-width:0}.wheel-choose{width:100%;min-height:56px;font-size:16px;font-weight:700}.wheel-chosen{border-radius:var(--r-control);border:1px solid color-mix(in srgb, var(--tint) 45%, transparent);background:color-mix(in srgb, var(--tint) 10%, var(--surface));min-height:56px;color:color-mix(in srgb, var(--tint) 88%, var(--ink));justify-content:center;align-items:center;font-size:16px;font-weight:700;display:flex}.onboarding-after{flex-direction:column;gap:16px;margin-top:24px;display:flex}@media (prefers-reduced-motion:reduce){.wheel-item,.wheel-item>span,.wheel-arrow,.wheel-card-icon{transition:none}}}
