.custom-carousel-nav{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:16px;margin:23px 0 18px;padding:14px 16px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:15px}
.carousel-arrow{display:grid;width:42px;height:42px;place-items:center;color:var(--text);font-size:1.2rem;background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}
.carousel-arrow:hover:not(:disabled){color:#15171b;background:var(--accent);transform:translateY(-2px)}
.carousel-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.carousel-arrow:disabled{color:var(--dim);cursor:not-allowed;opacity:.32}
.custom-wheel-wrap{display:flex;align-items:center;justify-content:center;gap:12px;min-height:42px}
.custom-wheel{display:none}
.custom-wheel-label{display:flex;align-items:baseline;gap:10px;min-width:150px;justify-content:center;text-align:center}
.custom-wheel-label b{color:var(--accent);font-size:.72rem;letter-spacing:.14em}
.custom-wheel-label span{color:var(--muted);font-size:.72rem;font-weight:650}

/* A single viewport prevents overlap. Cards keep their natural content
   height while the stage provides one stable animation area. */
.custom-stage{position:relative;min-height:0;overflow:hidden;isolation:isolate}
.custom-stage .custom-card{position:absolute;inset:0;display:none;width:100%;margin:0;align-content:start;grid-auto-rows:max-content;transform:none;transform-origin:center center;will-change:transform,opacity}
.custom-stage .custom-card.is-active,.custom-stage .custom-card.is-leaving{position:relative;inset:auto}
.custom-stage .custom-card .field-label,.custom-stage .custom-card .field-grid,.custom-stage .custom-card .range-grid,.custom-stage .custom-card .color-grid,.custom-stage .custom-card .toggle-grid{align-content:start}
.custom-stage .custom-card.is-active,.custom-stage .custom-card.is-leaving{display:grid;visibility:visible}
.custom-stage .custom-card.is-active{z-index:2}
.custom-stage .custom-card[aria-hidden="true"]{visibility:hidden;pointer-events:none}
.custom-stage .custom-card.is-leaving{visibility:visible;pointer-events:none;z-index:1}

.custom-stage .custom-card.enter-next{animation:swooshEnterNext .46s cubic-bezier(.2,.78,.2,1) both}
.custom-stage .custom-card.leave-next{animation:swooshLeaveNext .46s cubic-bezier(.2,.78,.2,1) both}
.custom-stage .custom-card.enter-prev{animation:swooshEnterPrev .46s cubic-bezier(.2,.78,.2,1) both}
.custom-stage .custom-card.leave-prev{animation:swooshLeavePrev .46s cubic-bezier(.2,.78,.2,1) both}

@keyframes swooshEnterNext{from{opacity:0;filter:blur(2px);transform:translate3d(58px,0,0) scale(.985)}65%{opacity:1}to{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}}
@keyframes swooshLeaveNext{from{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}to{opacity:0;filter:blur(2px);transform:translate3d(-58px,0,0) scale(.985)}}
@keyframes swooshEnterPrev{from{opacity:0;filter:blur(2px);transform:translate3d(-58px,0,0) scale(.985)}65%{opacity:1}to{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}}
@keyframes swooshLeavePrev{from{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}to{opacity:0;filter:blur(2px);transform:translate3d(58px,0,0) scale(.985)}}

/* The profile-section wheel is an explicit product interaction. Keep it
   animated even when the browser requests reduced motion, because the user
   asked for this transition to be enabled. Other page animations still obey
   the global reduced-motion rule in styles.css. */
@media(prefers-reduced-motion:reduce){.custom-stage .custom-card.enter-next,.custom-stage .custom-card.leave-next,.custom-stage .custom-card.enter-prev,.custom-stage .custom-card.leave-prev{animation-duration:.36s!important;animation-iteration-count:1!important}.custom-stage .custom-card{transition-duration:.35s!important}.carousel-arrow{transition-duration:.18s!important}}
@media(max-width:760px){.custom-carousel-nav{grid-template-columns:42px 1fr 42px;padding:11px 12px;gap:10px}.carousel-arrow{width:38px;height:38px}.custom-wheel-label{min-width:120px}.custom-stage{min-height:0}}