.wheel{--wheel-rest-angle:-90deg;background:#e6e9e7;padding:90px 7vw 100px;position:relative;overflow:hidden}.wheel .dots{background-image:radial-gradient(#00000026 1px,#0000 1.6px)}.wheel .wheel-h{z-index:2;text-align:center;font-family:var(--font-d);letter-spacing:-.022em;color:#131a17;max-width:1100px;margin:0 auto 44px;font-size:clamp(30px,3.4vw,46px);font-weight:700;position:relative}.wheel .wheel-h2{font-size:.62em;font-weight:600}.wheel .wh-wrap{z-index:2;--wheel-angle:calc(var(--wheel-rest-angle) + var(--wheel-turns) * 90deg);flex-wrap:wrap;align-items:center;gap:0;max-width:1320px;margin:0 auto;display:flex;position:relative}.wheel .wh-left{flex-direction:column;flex:none;align-items:center;gap:26px;display:flex}.wheel .wh-circle{width:clamp(480px,44vw,660px);height:clamp(480px,44vw,660px);position:relative}.wheel .wh-svg{width:100%;height:100%;display:block;overflow:visible}.wheel .wh-rot{transform-origin:180px 180px;transform-box:view-box;transform:rotate(var(--wheel-angle));transition:transform .9s cubic-bezier(.35,.75,.3,1)}.wheel .wh-lab{transform-box:view-box;transform:rotate(calc(-1 * var(--wheel-angle)));transition:transform .9s cubic-bezier(.35,.75,.3,1)}.wheel .wh-seg{cursor:pointer;outline:none}.wheel .wh-seg.out{opacity:0;transition:opacity .25s}.wheel .wh-seg:focus-visible .wh-seg-shape{stroke:#d94f38;stroke-width:3px}.wheel .wh-wrap:has(.wh-seg.out:focus-visible) .wh-panel{outline-offset:-7px;outline:2px solid #fff}.wheel .wh-clab text{font-family:var(--font-d);fill:#fff;letter-spacing:.01em;opacity:0;font-size:14.5px;font-weight:700;transition:opacity .3s}.wheel .wh-wrap.open .wh-seg:not(.out) .wh-clab text{opacity:1}.wheel .wh-clab-ccw,.wheel .wh-seg[data-at-bottom] .wh-clab-cw{display:none}.wheel .wh-seg[data-at-bottom] .wh-clab-ccw{display:inline}.wheel .wh-lab circle{fill:#e6e9e7}.wheel .wh-lab circle.wh-lab-dots{fill:url(#wheel-notch-dots)}.wheel .wh-lab text{font-family:var(--font-d);fill:#131a17;letter-spacing:0;font-size:14px;font-weight:700}.wheel .wh-right{z-index:3;flex:1;align-self:center;min-width:280px;margin-left:calc(-1*clamp(130px,13vw,200px));position:relative}.wheel .wh-stepnum{font-family:var(--font-d);color:#131a17;z-index:3;font-size:22px;font-weight:700;transition:opacity .3s;position:absolute;top:18px;left:18px;transform:translate(-50%,-50%)}.wheel .wh-right:has(.wh-panel.fold) .wh-stepnum{opacity:0}.wheel .wh-panel{transform-origin:50%;background:linear-gradient(135deg,#e8563c,#c93a22);border-radius:30px;max-width:560px;min-height:240px;padding:20px 48px 30px;transition:transform .5s,opacity .5s;position:relative;box-shadow:24px 24px 60px #c93a2273,40px 40px 110px -10px #e0492f52;-webkit-mask:radial-gradient(circle at 18px 18px,#0000 35px,#000 36px);mask:radial-gradient(circle at 18px 18px,#0000 35px,#000 36px)}.wheel .wh-arrows{justify-content:flex-end;gap:26px;margin-bottom:8px;transition:opacity .3s;display:flex}.wheel .wh-arrows button{color:#fff;cursor:pointer;font-size:24px;line-height:1;font-family:var(--font-d);background:0 0;border:none;padding:0;transition:transform .2s,opacity .2s}.wheel .wh-arrows button:hover{transform:translate(0)scale(1.15)}.wheel .wh-arrows button:focus-visible{outline-offset:4px;border-radius:6px;outline:2px solid #fff}.wheel .wh-flow{transition:opacity .45s,transform .45s cubic-bezier(.3,.7,.3,1)}.wheel .wh-panel.fold .wh-flow{opacity:0;transform:translate(28px)}.wheel .wh-flow.entering{animation:.45s wheel-fade-in,.45s cubic-bezier(.3,.7,.3,1) wheel-slide-in}.wheel .wh-flow.entering .wh-t,.wheel .wh-flow.entering .wh-p{animation:.3s wheel-fade-in}@keyframes wheel-fade-in{0%{opacity:0}}@keyframes wheel-slide-in{0%{transform:translate(-34px)}}.wheel .wh-badge{vertical-align:middle;background:#ffffff29;border:1px solid #ffffff4d;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:12px;margin-right:14px;display:inline-flex}.wheel .wh-badge svg{width:21px;height:21px}.wheel .wh-t{vertical-align:middle;font-family:var(--font-d);letter-spacing:-.02em;color:#fff;margin:0 0 12px;font-size:clamp(22px,2.2vw,30px);font-weight:700;transition:opacity .3s;display:inline-block}.wheel .wh-p{color:#ffffffe0;max-width:480px;margin:0;font-size:17px;line-height:1.65;transition:opacity .3s}.wheel .wh-panel.fold .wh-t,.wheel .wh-panel.fold .wh-p{opacity:0}.wheel .wh-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=900px){.wheel{--wheel-rest-angle:0deg;--wheel-ring:min(100vw - 32px, 480px);padding:56px 16px 64px}.wheel .wheel-h{text-wrap:balance;margin-bottom:28px}.wheel .wheel-h2{letter-spacing:-.015em;margin-top:10px;line-height:1.35;display:block}.wheel .wh-wrap{flex-flow:column}.wheel .wh-circle{width:var(--wheel-ring);height:var(--wheel-ring)}.wheel .wh-seg[data-at-bottom] .wh-clab-cw{display:inline}.wheel .wh-seg[data-at-bottom] .wh-clab-ccw{display:none}.wheel .wh-right{width:var(--wheel-ring);min-width:0;margin-left:0;margin-top:calc(-.28 * var(--wheel-ring));touch-action:pan-y;flex:none}.wheel .wh-stepnum{top:6px;left:50%}.wheel .wh-panel{max-width:none;min-height:0;padding:8px 24px 28px;-webkit-mask:radial-gradient(circle at 50% 6px,#0000 31px,#000 32px);mask:radial-gradient(circle at 50% 6px,#0000 31px,#000 32px)}.wheel .wh-arrows{justify-content:space-between;margin:0 -12px 10px}.wheel .wh-arrows button{width:44px;height:44px}.wheel .wh-flows{display:grid}.wheel .wh-flow{grid-area:1/1}.wheel .wh-flow[hidden]{visibility:hidden;display:block}.wheel .wh-p{max-width:none;font-size:16px}}@media (width<=600px){.wheel .wheel-h-br{display:none}}@media (hover:none){.wheel .wh-arrows button:hover{transform:none}}@media (prefers-reduced-motion:reduce){.wheel .wh-rot,.wheel .wh-lab,.wheel .wh-seg.out,.wheel .wh-clab text,.wheel .wh-stepnum,.wheel .wh-flow,.wheel .wh-t,.wheel .wh-p,.wheel .wh-arrows button{transition:none}.wheel .wh-flow.entering,.wheel .wh-flow.entering .wh-t,.wheel .wh-flow.entering .wh-p{animation:none}}
