/* DIBUAT OTOMATIS oleh bench/legacy-gen.js dari style.css, polish.css, v3.css, about.css: jangan diedit manual.
   (1) svh/dvh -> vh untuk Chrome < 108 / iOS < 15.4; (2) clamp()/min()/max() untuk Chrome < 79 / iOS < 13.4. Browser modern mengabaikan seluruh file ini. */
@supports not (height: 1svh) {
    .w-intro-stage {
        height: 100vh
    }
    .w-pin {
        height: 100vh
    }
    .w-intro {
        height: 220vh
    }
    @media (max-width: 759px) {
        .w-intro {
            height: 190vh
        }
    }
    @media (max-width: 759px) {
        .w-bp {
            width: min(80vw, 46vh)
        }
    }
    @media (max-width: 1000px) {
        .w-intro-bg {
            height: calc(100vh + 160px)
        }
    }
    @media (max-width: 1000px) {
        .w-intro-stage {
            height: calc(100vh + 160px)
        }
    }
    @media (max-width: 1000px) {
        .w-scan {
            height: 100vh
        }
    }
    @media (max-width: 1000px) {
        .w-bp {
            top: 50vh
        }
    }
    @media (max-width: 1000px) {
        @supports (height: 100lvh) {
            .w-intro-hint {
                bottom: calc(188px + 100vh - 100vh)
            }
        }
    }
    .w-hero {
        height: 100vh
    }
    .w-xp-pin {
        height: 100vh
    }
    .w-xp-frame {
        height: min(72vh, 760px)
    }
    @media (min-width: 760px) and (max-width: 1099px) {
        .w-xp-frame {
            height: min(56vh, 74vw)
        }
    }
    @media (max-width: 759px) {
        .w-xp-head {
            transform: translate3d(0, calc(-50% - var(--xh) * 21vh), 0)
        }
    }
    @media (max-width: 759px) {
        .w-xp-frame {
            width: min(62vw, 40vh)
        }
    }
    @media (max-width: 759px) and (max-height: 640px) {
        .w-xp-frame {
            width: min(56vw, 36vh)
        }
    }
    .w-hero {
        height: 200vh
    }
    .w-hero-in {
        height: 100vh
    }
    .w-discover {
        margin-top: -100vh
    }
    .w-st {
        height: 250vh
    }
    .w-st-pin {
        height: 100vh
    }
    .pg-home .w-st + .member-band-home {
        margin-top: -100vh
    }
    .w-st {
        height: 420vh
    }
    .has-break .w-intro {
        height: 340vh
    }
    @media (max-width: 759px) {
        .has-break .w-intro {
            height: 300vh
        }
    }
    @media (max-width: 759px) {
        .w-xp-head {
            transform: translate3d(0, calc(-50% - var(--xh) * 23vh), 0)
        }
    }
    @media (max-width: 759px) {
        .w-xp-frame {
            width: min(58vw, 36vh)
        }
    }
    @media (max-width: 759px) and (max-height: 640px) {
        .w-xp-head {
            transform: translate3d(0, calc(-50% - var(--xh) * 17vh), 0)
        }
    }
    @media (max-width: 759px) and (max-height: 640px) {
        .w-xp-frame {
            width: min(52vw, 32vh)
        }
    }
}
@supports not (width: clamp(1px, 1px, 1px)) {
    :root {
        --gut-l: 16px
    }
    :root {
        --gut-r: 16px
    }
    .hero {
        padding-block: 48px 0
    }
    .hero::after {
        right: -110px
    }
    .hero::after {
        top: 24px
    }
    .hero::after {
        width: 260px
    }
    .hero h1 {
        font: 800 44px/.98 var(--f-display)
    }
    .lede {
        font-size: 17px
    }
    .status-strip {
        margin-top: 40px
    }
    .section {
        padding-block: 64px
    }
    .head {
        margin-bottom: 36px
    }
    .head h2 {
        font: 800 40px/.95 var(--f-display)
    }
    .signature {
        gap: 24px
    }
    .signature {
        margin-bottom: 56px
    }
    .ring {
        width: 100%
    }
    .rank {
        font: 800 18px/1 var(--f-display)
    }
    .gallery {
        gap: 14px
    }
    .lb-stage {
        max-width: 100%
    }
    .lb-close {
        right: 14px
    }
    .lb-prev {
        left: 10px
    }
    .lb-next {
        right: 10px
    }
    .amenities {
        margin-top: 48px
    }
    .outlet-name h3 {
        font: 800 28px/1 var(--f-display)
    }
    .member-band {
        padding-block: 64px
    }
    .member {
        gap: 40px
    }
    .member h2 {
        font: 800 36px/1 var(--f-display)
    }
    .foot-mark {
        margin-top: 32px
    }
    .dash-head h2 {
        font: 800 34px/1 var(--f-display)
    }
    .dash-grid {
        gap: 24px
    }
    .mdlg-box {
        width: 100%
    }
    .member-page .member-band {
        padding-block: 36px 80px
    }
    main > .section:first-child {
        padding-top: 40px
    }
    .hero::before {
        width: 140px
    }
    .marquee span {
        font: 800 18px/1 var(--f-display)
    }
    .member-band::after {
        width: 90vw
    }
    .hero-in::before {
        width: 90vw
    }
    .section-alt::before {
        width: 80vw
    }
    .foot::after {
        width: 70vw
    }
    .hero::after {
        right: 16px
    }
    .hero::after {
        top: 24px
    }
    .hero::after {
        width: 220px
    }
    :root.v3 {
        --sec: 88px
    }
    :root.v3 {
        --t-display: 36px
    }
    :root.v3 {
        --t-h2: 34px
    }
    :root.v3 {
        --t-big: 56px
    }
    :root.v3 {
        --t-statement: 22px
    }
    .v3 .wrap {
        padding-left: 20px
    }
    .v3 .wrap {
        padding-right: 20px
    }
    .x-anatomy {
        min-height: 560px
    }
    .x-params {
        min-width: 100%
    }
    .x-meter {
        padding: 24px
    }
    .x-up-photo {
        margin: 56px 0 0
    }
    .x-score {
        font: 800 64px/.9 var(--f-display)
    }
    .x-quotes blockquote {
        font: 500 20px/1.4 var(--f-body)
    }
    .x-cite {
        padding: 22px
    }
    .v3 .section {
        padding-block: 120px var(--sec)
    }
    .v3 .head h2 {
        font: 800 48px/.9 var(--f-display)
    }
    .x-footer {
        padding-block: 96px
    }
    .x-foot-title {
        font: 800 34px/.95 var(--f-display)
    }
    .w-dish-item.is-bottle {
        height: calc(var(--h, 300px) * 1.4)
    }
    .w-dish-name {
        font: 800 36px/1 var(--f-display)
    }
    .w-outlets li {
        grid-template-columns: 150px minmax(0, 1fr)
    }
    .w-out-num {
        font: 800 44px/1 var(--f-display)
    }
    .is-soon .w-out-num {
        font-size: 30px
    }
    .w-say .x-quotes blockquote {
        font-size: 19px
    }
    .w-socials strong {
        font: 700 24px/1 var(--f-display)
    }
    .w-intro-bg {
        opacity: calc(1 - var(--ip, 0) * 1.6)
    }
    .w-bp {
        width: 62vw
    }
    .w-bp {
        opacity: calc(1 - var(--ip) * 2.4)
    }
    .bp-note {
        font: 600 17px/1.15 "Caveat", "Segoe Print", cursive
    }
    .w-scan {
        --r: 110px
    }
    .w-scan {
        opacity: calc(1 - var(--ip) * 4)
    }
    .w-scan-item figcaption {
        font: 600 15px/1 "Caveat", cursive
    }
    .w-lens {
        --r: 110px
    }
    .w-lens {
        opacity: calc(1 - var(--ip) * 4)
    }
    .w-intro-hint {
        left: 20px
    }
    .w-intro-hint {
        opacity: calc(1 - var(--ip) * 5)
    }
    @media (max-width: 759px) {
        .w-bp {
            width: 78vw
        }
    }
    .club-copy h2 {
        font: 800 52px/.9 var(--f-display)
    }
    .club-lede {
        font: 500 19px/1.4 var(--f-body)
    }
    .club-perks strong {
        font: 800 20px/1.05 var(--f-display)
    }
    .club-stamps {
        width: 100%
    }
    .club-visual .tier-stack {
        width: 100%
    }
    @media (max-width: 759px) {
        .w-bp {
            width: 80vw
        }
    }
    @media (max-width: 759px) {
        .w-dish-name {
            font-size: 28px
        }
    }
    @media (min-width: 760px) and (max-width: 1099px) {
        .w-dish-name {
            font-size: 34px
        }
    }
    .w-hero-in {
        padding: 92px 20px 28px 20px
    }
    .w-hero-title {
        font: 800 64px/.86 var(--f-display)
    }
    .w-ht-tag {
        margin-top: 14px
    }
    .w-ht-tag {
        font: 700 17px/1 var(--f-display)
    }
    .w-hero-hint::after {
        width: 40px
    }
    .w-hero-copy {
        font-size: 16px
    }
    .w-hero-note::before {
        width: 40px
    }
    @media (max-width: 1099px) and (min-width: 760px) {
        .w-hero-title {
            font-size: 64px
        }
    }
    @media (max-width: 759px) {
        .w-hero-title {
            font-size: 54px
        }
    }
    @media (min-width: 760px) and (max-height: 720px) {
        .w-hero-title {
            font-size: 56px
        }
    }
    .w-dt-label {
        left: 20px
    }
    .w-dt-label {
        top: calc(50% - 84px * .5)
    }
    .w-dt-label {
        font: 800 18px/1.1 var(--f-display)
    }
    .w-dt-word {
        font: 800 84px/.8 var(--f-display)
    }
    .w-dt-frame {
        width: 64vw
    }
    @media (max-width: 759px) {
        .w-dt-frame {
            width: 68vw
        }
    }
    @media (max-width: 759px) {
        .w-dt-label {
            top: calc(50% - 68vw * .46 - 18px)
        }
    }
    .w-xp-head {
        left: 20px
    }
    .w-xp-kick {
        font: 800 20px/1 var(--f-display)
    }
    .w-xp-big {
        font: 800 72px/.86 var(--f-display)
    }
    .w-xp-frame {
        height: 72vh
    }
    @media (min-width: 760px) and (max-width: 1099px) {
        .w-xp-frame {
            height: 74vw
        }
    }
    @media (min-width: 760px) and (max-width: 1099px) {
        .w-xp-big {
            font-size: 72px
        }
    }
    @media (max-width: 759px) {
        .w-xp-frame {
            width: 62vw
        }
    }
    @media (max-width: 759px) and (max-height: 640px) {
        .w-xp-frame {
            width: 56vw
        }
    }
    .w-fac {
        padding-block: 56px 40px
    }
    .w-fac-title {
        font: 800 30px/1 var(--f-display)
    }
    .w-fac-title {
        margin: 0 0 20px
    }
    .w-fac-list strong {
        font: 800 19px/1.08 var(--f-display)
    }
    .w-glow {
        --gb: 46px
    }
    .w-st-kick {
        font: 800 16px/1 var(--f-display)
    }
    .w-st-head {
        margin: 0 0 12px
    }
    .w-st-head {
        font: 800 34px/.95 var(--f-display)
    }
    .w-st-card {
        width: 88vw
    }
    .w-st-card {
        padding: 20px
    }
    .w-st-title {
        margin: 0 0 16px
    }
    .w-st-title {
        font: 700 15px/1.2 var(--f-body)
    }
    .w-st-title b {
        font: 800 18px/1 var(--f-display)
    }
    .w-st-slots {
        gap: 12px
    }
    .w-st-num {
        font: 800 22px/1 var(--f-display)
    }
    .w-st-note {
        margin: 16px 0 0
    }
    .w-st-note {
        font: 600 14px/1.3 var(--f-body)
    }
    .has-break .w-bp {
        opacity: calc(1 - var(--ip) * 4.6)
    }
    .w-rvs {
        padding-block: 96px 64px
    }
    .w-rv-q {
        font: 700 18px/1.32 var(--f-display)
    }
    @media (max-width: 759px) {
        .w-xp-frame {
            width: 58vw
        }
    }
    @media (max-width: 759px) and (max-height: 640px) {
        .w-xp-frame {
            width: 52vw
        }
    }
    .legal {
        padding-block: 120px 64px
    }
    .legal-head h1 {
        font: 800 40px/.95 var(--f-display)
    }
    .legal-body h2 {
        font: 800 22px/1.15 var(--f-display)
    }
    .nf {
        padding-block: 130px 72px
    }
    .nf h1 {
        font: 800 38px/.95 var(--f-display)
    }
    .about-grid {
        gap: 32px
    }
    .about-lede {
        font: 800 26px/1.15 var(--f-display)
    }
    .about-copy > p:not(.about-lede) {
        margin: 0 0 28px
    }
    .social-name {
        font: 800 26px/1 var(--f-display)
    }
}
/* (3) jarak flexbox untuk browser tanpa flex gap (kelas dari assets/perf.js) */
.no-flexgap .btn > * + * {
    margin-left: 10px
}
.no-flexgap .nav-in > * + * {
    margin-left: 32px
}
.no-flexgap .nav-links > * + * {
    margin-left: 28px
}
.no-flexgap .hero-cta > * {
    margin-right: 12px;
    margin-bottom: 12px
}
.no-flexgap .status-strip > * {
    margin-right: 40px;
    margin-bottom: 8px
}
.no-flexgap .status-strip li > * + * {
    margin-left: 10px
}
.no-flexgap .head > * {
    margin-right: 40px;
    margin-bottom: 16px
}
.no-flexgap .menu-tabs > * + * {
    margin-left: 8px
}
.no-flexgap .dish-text > * + * {
    margin-left: 10px
}
.no-flexgap .outlet-cta > * {
    margin-right: 24px;
    margin-bottom: 24px
}
.no-flexgap .tabs > * + * {
    margin-left: 28px
}
.no-flexgap .rev-score > * {
    margin-right: 24px;
    margin-bottom: 16px
}
.no-flexgap .by > * + * {
    margin-left: 12px
}
.no-flexgap .check > * + * {
    margin-left: 12px
}
.no-flexgap .cp-row > * + * {
    margin-left: 10px
}
.no-flexgap .cp-rewards li > * + * {
    margin-left: 12px
}
.no-flexgap .foot-row > * {
    margin-right: 16px;
    margin-bottom: 16px
}
.no-flexgap .foot-links > * {
    margin-right: 24px;
    margin-bottom: 24px
}
.no-flexgap .lc-name > * + *, .no-flexgap .lc-phone > * + * {
    margin-top: .9cqw
}
.no-flexgap .ls-top > * {
    margin-right: 16px;
    margin-bottom: 4px
}
.no-flexgap .auth-tabs > * + * {
    margin-left: 6px
}
.no-flexgap .dash-head > * {
    margin-right: 16px;
    margin-bottom: 16px
}
.no-flexgap .dash-actions > * + * {
    margin-left: 18px
}
.no-flexgap .tb-top > * + * {
    margin-left: 10px
}
.no-flexgap .activity li > * + * {
    margin-left: 12px
}
.no-flexgap .mdlg-actions > * {
    margin-right: 10px;
    margin-bottom: 10px
}
.no-flexgap .demo-ctrl > * {
    margin-right: 8px;
    margin-bottom: 8px
}
.no-flexgap .cta-row > * {
    margin-right: 12px;
    margin-bottom: 12px
}
.no-flexgap .reward-list li > * + * {
    margin-left: 12px
}
.no-flexgap .marquee span > * + * {
    margin-left: 28px
}
.no-flexgap .tier-tabs > * + * {
    margin-left: 6px
}
.no-flexgap .x-scores li > * + * {
    margin-left: 22px
}
.no-flexgap .w-cta > * {
    margin-right: 28px;
    margin-bottom: 16px
}
.no-flexgap .w-chapters > * {
    margin-right: 8px;
    margin-bottom: 8px
}
.no-flexgap .w-socials > * {
    margin-right: 36px;
    margin-bottom: 8px
}
.no-flexgap .w-socials a > * + * {
    margin-left: 14px
}
.no-flexgap .w-intro-hint > * + * {
    margin-left: 12px
}
.no-flexgap .club .cta-row > * {
    margin-right: 28px;
    margin-bottom: 16px
}
.no-flexgap .club-dots > * + * {
    margin-left: 16px
}
.no-flexgap .w-hero-hint > * + * {
    margin-left: 12px
}
.no-flexgap .w-hero-note > * + * {
    margin-left: 12px
}
.no-flexgap .w-dt-scroll > * + * {
    margin-left: 8px
}
.no-flexgap .pf-btn > * + * {
    margin-left: 10px
}
.no-flexgap .w-rv-sum > * + * {
    margin-left: 10px
}
.no-flexgap .w-rv-stars > * + * {
    margin-left: 3px
}
.no-flexgap .w-rv-body > * + * {
    margin-top: 14px
}
.no-flexgap .w-rv-rate > * + * {
    margin-left: 8px
}
.no-flexgap .w-rv-more > * {
    margin-right: 28px;
    margin-bottom: 14px
}
.no-flexgap .nf-cta > * {
    margin-right: 22px;
    margin-bottom: 22px
}
.no-flexgap .nf-links > * {
    margin-right: 24px;
    margin-bottom: 10px
}
.no-flexgap .x-foot-legal > * {
    margin-right: 24px;
    margin-bottom: 10px
}
.no-flexgap .social > * + * {
    margin-left: 16px
}
.no-flexgap .ios-icons > * + * {
    margin-left: 1.6cqw
}
.no-flexgap .pv-top > * + * {
    margin-left: 2.6cqw
}