.ch{--ch-ink:#111111;--ch-ink2:#555555;--ch-mute:#8a8a8a;--ch-line:rgba(17,17,17,.12);font-family:var(--font-body-family),sans-serif}
.ch__wrap{background:#ffffff;padding:10px}
@media screen and (min-width:750px){.ch__wrap{padding:16px}}

.ch__card{position:relative;max-width:1400px;margin:0 auto;height:560px;border-radius:26px;overflow:hidden;isolation:isolate;touch-action:pan-y;background:#ffffff;box-shadow:0 40px 80px -48px rgba(0,0,0,.28),inset 0 0 0 1px rgba(17,17,17,.05)}
@media screen and (min-width:990px){.ch__card{height:min(76vh,700px);min-height:560px;border-radius:30px}}

.ch__atm{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.1s ease;background:radial-gradient(ellipse 58% 72% at 52% 44%,#ffffff 0%,#ffffff 38%,var(--ch-tint) 100%)}
.ch__atm.is-on{opacity:1}

.ch__head{position:absolute;z-index:5;top:26px;left:20px;right:20px;text-align:center}
@media screen and (min-width:990px){.ch__head{top:46px;left:52px;right:auto;max-width:44%;text-align:left}}
.ch__kick{font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ch-mute);margin-bottom:10px}
@media screen and (min-width:990px){.ch__kick{font-size:11px;margin-bottom:14px}}
.ch__hl{margin:0;font-family:var(--font-heading-family),var(--font-body-family),sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:.95;font-size:30px;color:var(--ch-ink)}
@media screen and (min-width:990px){.ch__hl{font-size:clamp(40px,4.6vw,68px)}}
.ch__hl span{color:var(--ch-ink2)}
.ch__swap{transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.ch__swap.is-out{opacity:0;transform:translateY(8px)}

.ch__floor{position:absolute;z-index:2;left:50%;bottom:30%;transform:translateX(-50%);width:140px;height:20px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.22),transparent 70%);filter:blur(3px)}
@media screen and (min-width:990px){.ch__floor{bottom:10.5%;width:230px;height:26px}}

.ch__stage{position:absolute;inset:0;z-index:3;pointer-events:none}
.ch__slide{position:absolute;left:50%;bottom:31%;opacity:0;transform:translate(-50%,18px) scale(.97);filter:blur(8px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),filter .9s ease}
@media screen and (min-width:990px){.ch__slide{bottom:12%}}
.ch__slide.is-on{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0)}
.ch__slide.is-leave{opacity:0;transform:translate(-50%,-14px) scale(1.02);filter:blur(6px)}
.ch__slide img{display:block;height:260px;width:auto;max-width:70vw;object-fit:contain;filter:drop-shadow(0 26px 22px rgba(0,0,0,.18)) drop-shadow(0 6px 6px rgba(0,0,0,.1))}
@media screen and (min-width:990px){.ch__slide img{height:min(54vh,520px);max-width:none}}
.ch__slot{height:260px;width:90px;display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--ch-line);border-radius:40px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ch-mute);padding:10px}

.ch__label{position:absolute;z-index:5;left:0;right:0;bottom:118px;text-align:center}
@media screen and (min-width:990px){.ch__label{left:52px;right:auto;bottom:48px;text-align:left}}
.ch__name{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ch-ink)}
.ch__spec{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ch-mute);margin-top:5px}
@media screen and (min-width:990px){.ch__name,.ch__spec{font-size:11px}}

.ch__ind{position:absolute;z-index:6;left:50%;bottom:82px;transform:translateX(-50%);display:flex;gap:14px}
@media screen and (min-width:990px){.ch__ind{bottom:30px;gap:20px}}
.ch__ind button{background:none;border:none;cursor:pointer;padding:4px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ch-mute);font-family:inherit}
.ch__ind button.is-on{color:var(--ch-ink)}
.ch__ind button:focus-visible{outline:1px solid var(--ch-ink);outline-offset:2px}
.ch__ind i{display:block;position:relative;overflow:hidden;width:18px;height:1px;background:var(--ch-line)}
@media screen and (min-width:990px){.ch__ind i{width:26px}}
.ch__ind button.is-on i::after{content:"";position:absolute;inset:0;background:var(--ch-ink);transform-origin:left;animation:ch-fill var(--ch-dur,3.5s) linear forwards}
.ch__card.is-paused .ch__ind button.is-on i::after{animation-play-state:paused}
@keyframes ch-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.ch__cta{position:absolute;z-index:6;left:16px;right:16px;bottom:18px;display:flex;gap:8px}
@media screen and (min-width:990px){.ch__cta{left:auto;right:52px;bottom:40px;gap:10px}}
.ch__btn{flex:1;text-align:center;text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:14px 8px;border-radius:99px;transition:.3s}
@media screen and (min-width:990px){.ch__btn{flex:none;font-size:11px;letter-spacing:.16em;padding:16px 26px}}
.ch__btn--1{background:var(--ch-ink);color:#ffffff}
.ch__btn--1:hover{background:#000;transform:translateY(-1px)}
.ch__btn--2{color:var(--ch-ink);border:1px solid rgba(17,17,17,.25);background:rgba(255,255,255,.6)}
.ch__btn--2:hover{border-color:var(--ch-ink)}
.ch__btn:focus-visible{outline:2px solid var(--ch-ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){.ch__slide,.ch__atm,.ch__swap{transition:none}.ch__ind button.is-on i::after{animation:none}}