.cc { --cc-pb: 28px; position: fixed; inset: 0; margin: auto; width: min(var(--pop-w, 960px), 100vw - 32px); max-width: none; height: min(560px, 100dvh - 2 * var(--pop-mv, 48px)); max-height: none; padding: 0; border: 0; border-radius: var(--pop-r, 20px); overflow: visible; background: transparent; color: #FFFFFF; --cc-bd: 1; touch-action: none; overscroll-behavior: contain; }
.cc::backdrop { background: var(--pop-scrim, rgb(3 7 13 / .62)); }
.cc[open]::backdrop { animation: pop-fade 160ms linear; }
.cc:not([open]) { display: none; }
.cc__stage { position: absolute; inset: 0; overflow: hidden; background: #03070D; border-radius: var(--pop-r, 20px); clip-path: inset(0 round var(--pop-r, 20px)); }
.cc.is-flip .cc__stage, .cc.is-flip .cc__pane, .cc.is-flip .cc__ph { overflow: visible; }   
.cc__track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; will-change: transform; }
.cc__pane { position: relative; flex: none; height: 100%; overflow: hidden; }
.cc__ph, .cc__ph img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc__ph { background: #2C2C2C; }
.cc__ph img { display: block; object-fit: cover; object-position: 50% 50%; user-select: none; -webkit-user-drag: none; will-change: transform; }
.cc__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(3 7 13 / .55) 0, rgb(3 7 13 / 0) 18%, rgb(3 7 13 / 0) 34%, rgb(3 7 13 / .78) 58%, rgb(3 7 13 / .92) 100%); pointer-events: none; }
.cc__txt { position: absolute; left: 20px; right: 20px; max-width: 40rem; opacity: 1; }
.cc__tag { margin: 0; font: 600 var(--fs-label, 12px)/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--rx-gold, #BBA071); }
.cc__city { margin: 8px 0 0; font: 500 var(--fs-h2)/1 var(--font-display); letter-spacing: -.01em; color: #FFFFFF; }
.cc__line { margin: 16px 0 0; font: 400 var(--fs-lead)/1.5 var(--font-body); color: rgb(255 255 255 / .86); }
.cc__dots { display: flex; gap: 10px; align-items: center; margin-top: 24px; }
.cc__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / .40); }
.cc__dots i.on { width: 24px; background: #FFFFFF; }

.cc__ui { position: absolute; inset: 0; pointer-events: none; }
.cc__bar { position: absolute; left: 16px; right: var(--pop-x, 12px); top: var(--pop-x, 12px); display: flex; align-items: center; gap: 8px; }
.cc__n, .cc__ch { margin: 0; padding: 0 12px; border-radius: 999px; background: rgb(3 7 13 / .72); font: 600 var(--fs-label, 12px)/32px var(--font-body); letter-spacing: .08em; color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc__gap { flex: 1; }
.cc__x, .cc__i { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(255 255 255 / .72); border-radius: 50%; background: rgb(3 7 13 / .72); color: #FFFFFF; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.cc__i { border-color: rgb(255 255 255 / .40); }
.cc__x .ic, .cc__i .ic { width: 20px; height: 20px; }
.cc__i .ic { width: 18px; height: 18px; }
.cc__x:focus-visible, .cc__i:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .cc__x:hover, .cc__i:hover { background: #FFFFFF; color: #03070D; } }

.cc__sheet { position: absolute; left: var(--gutter, 20px); right: var(--gutter, 20px); top: calc(max(12px, env(safe-area-inset-top)) + 52px); max-height: 60%; overflow: auto; overscroll-behavior: contain; padding: 12px 16px; border-radius: var(--radius-card, 16px); background: rgb(3 7 13 / .94); border: 1px solid rgb(255 255 255 / .24); pointer-events: auto; touch-action: pan-y; }
.cc__sheet[hidden] { display: none; }
.cc__sheet:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.cc__cl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cc__cl li { display: grid; gap: 2px; font: 400 var(--fs-label, 12px)/1.35 var(--font-body); color: rgb(255 255 255 / .86); }
.cc__cl b { font-weight: 600; color: #FFFFFF; letter-spacing: .04em; }
@media (min-width: 64em) {
  .cc__bar { left: 32px; right: 16px; top: 16px; }
  .cc__sheet { left: auto; right: 16px; top: 76px; width: min(420px, 60%); }
  .cc { --cc-pb: 40px; }
  .cc__txt { left: 40px; right: 40px; }
}
@media (min-width: 768px) { .cc { --pop-w: 960px; } }
@media (prefers-reduced-motion: reduce) { .cc__track { transition: none; } }

.cc__city:focus, .cc__city:focus-visible { outline: none; }   
.cc-nofr, .cc-nofr:focus, .cc-nofr:focus-visible { outline: none !important; }   

.cc__ph img.is-lo { filter: blur(12px); }
.cc__ph img { transition: filter 160ms linear; }
@media (prefers-reduced-motion: reduce) { .cc__ph img { transition: none; } }

.cc__line { display: none; }