:root {
    --demo-bg: #ffffff;
    --demo-text: #656565;
    --demo-muted: #5f6368;
    --demo-line: #e8eaed;
    --demo-soft: #f8f9fa;
    --demo-link: #00a173;
    --demo-fill: #1a73e8;
    --demo-green: #00a173;
    --demo-shadow: 0 .04rem .12rem rgba(60, 64, 67, .12)
}

* {
    box-sizing: border-box
}

html {
    background: var(--demo-bg);
    font-size: 100px
}

body.demo-body {
    margin: 0;
    min-height: 100vh;
    background: var(--demo-bg);
    color: var(--demo-text);
    font-size: .14rem;
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB, Microsoft Yahei, sans-serif
}

body.demo-body.modal-open {
    overflow: hidden
}

a, button {
    -webkit-tap-highlight-color: transparent
}

a {
    color: inherit;
    text-decoration: none
}

button {
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none
}

img {
    display: block;
    max-width: 100%
}

svg {
    display: block
}

.play-page {
    width: 100%;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px))
}

.page-shell {
    width: min(100%, 750px);
    margin: 0 auto;
    padding: 0 .2rem .2rem
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .12rem
}

.topbar--play {
    height: 56px;
    margin-bottom: .2rem
}

.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0
}

.topbar-brand__logo {
    width: .42rem;
    height: .42rem;
    flex: none
}

.topbar-title--play {
    width: 120px;
    height: 33.13px;
    margin-left: 8px
}

.topbar-actions--play {
    display: inline-flex;
    align-items: center;
    gap: .08rem;
    flex: none
}

.topbar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer
}

.topbar button:hover {
    background: #f5f5f5
}

.topbar-brand svg {
    width: 40px;
    height: 40px
}

.topbar-title {
    font-size: .15rem;
    font-weight: 500
}

.topbar-actions svg {
    width: 24 p;
    height: 24px;
    fill: currentColor
}

.topbar-actions {
    display: flex;
    gap: .02rem
}

.topbar-avatar .avatar {
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 50%;
    background: #dedede
}

.topbar-avatar .avatar svg {
    fill: #bdbdbd
}

.app-pane__summary {
    display: flex;
    align-items: flex-start;
    gap: .14rem
}

.app-icon {
    width: .64rem;
    height: .64rem;
    border-radius: .14rem;
    box-shadow: var(--demo-shadow);
    object-fit: cover
}

.app-copy {
    min-width: 0
}

.app-copy h1 {
    margin: 0 0 .03rem;
    font-size: .22rem;
    line-height: 1.18;
    font-weight: 500
}

.publisher-link {
    color: var(--demo-link);
    font-size: .135rem;
    font-weight: 500
}

.verified-line {
    display: flex;
    align-items: center;
    gap: .06rem;
    margin-top: .05rem;
    font-size: .12rem
}

.stats-grid {
    display: flex;
    flex-direction: row;
    margin-top: .2rem;
    justify-content: space-around
}

.stat-card {
    position: relative;
    text-align: center;
    flex: 1
}

.stat-card:not(:last-child):after {
    content: "";
    position: absolute;
    top: .02rem;
    right: 0;
    width: .01rem;
    height: .34rem;
    background: var(--demo-line)
}

.stat-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .04rem;
    font-size: .155rem;
    font-weight: 600;
    line-height: 1.2
}

.stat-value img {
    width: .16rem;
    height: .16rem
}

.stat-rating svg {
    width: .14rem;
    height: .14rem;
    fill: var(--demo-text)
}

.stat-label {
    margin-top: .05rem;
    font-size: .13rem;
    color: var(--demo-muted)
}

.cta-row {
    margin-top: .3rem
}

.install-p {
    font-size: .12rem;
    line-height: .2rem;
    text-align: center
}

.install-button {
    width: 100%;
    display: grid;
    grid-template-columns:minmax(0, 1fr) .54rem;
    gap: 2px
}

.install-button__main, .install-button__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: .45rem;
    color: #fff;
    font-size: .15rem;
    background: var(--demo-green)
}

.install-button__main {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px
}

.install-button__arrow {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px
}

.install-button__arrow svg {
    width: .22rem;
    height: .22rem;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: .2rem;
    margin-top: .2rem
}

.hero-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .1rem;
    color: var(--demo-green);
    font-size: .15rem
}

.hero-action svg {
    width: .24rem;
    height: .24rem;
    fill: var(--demo-green)
}

.gallery-strip, .related-row {
    display: flex;
    gap: .08rem;
    overflow-x: auto;
    padding: .16rem 0 .12rem;
    scrollbar-width: none
}

.gallery-strip {
    margin-top: .1rem;
    padding-bottom: .08rem;
    padding-right: .16rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x
}

.gallery-strip::-webkit-scrollbar, .related-row::-webkit-scrollbar {
    display: none
}

.gallery-block {
    margin-top: .02rem
}

.gallery-card {
    flex: 0 0 auto;
    margin: 0;
    width: 1.24rem;
    border-radius: .1rem;
    overflow: hidden;
    background: #eef3f7
}

.gallery-card img {
    width: 100%;
    height: 2.2rem;
    object-fit: cover
}

.play-section {
    padding: .2rem 0
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .1rem;
    margin-bottom: .1rem
}

.section-header h2 {
    margin: 0;
    font-size: .2rem;
    font-weight: 600;
    color: #000
}

.section-header img {
    width: .18rem;
    height: .18rem
}

.body-copy {
    margin: 0;
    font-size: .15rem;
    line-height: 1.55
}

.body-copy--muted {
    font-weight: 300
}

.body-copy--compact p {
    margin: .1rem 0 0;
    font-weight: 300
}

.updated-block {
    display: flex;
    flex-direction: column;
    gap: .03rem;
    margin-top: .1rem
}

.updated-label {
    font-size: .15rem;
    color: #000;
    font-weight: 500;
    line-height: 2
}

.updated-value {
    font-size: .15rem;
    font-weight: 500
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 12px;
    margin-top: .3rem
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: .28rem;
    padding: 0 .2rem;
    border: .01rem solid var(--demo-line);
    border-radius: 999px;
    color: var(--demo-muted);
    font-size: .15rem;
    white-space: nowrap;
    font-weight: 500
}

.data-card {
    margin-top: .3rem;
    padding: 20px;
    border-radius: .12rem;
    border: 1px solid rgb(218, 220, 224)
}

.privacy-item {
    display: grid;
    grid-template-columns:.32rem 1fr;
    gap: .1rem;
    align-items: flex-start
}

.privacy-item + .privacy-item {
    margin-top: .2rem
}

.privacy-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .18rem;
    height: .18rem;
    margin-top: .02rem
}

.privacy-item h3 {
    margin: 0;
    font-size: .15rem;
    font-weight: 300;
    line-height: 1.5
}

.privacy-item p {
    margin: 0;
    font-size: .15rem;
    line-height: 1.5;
    font-weight: 300
}

.data-card__link {
    display: inline-block;
    margin-top: .3rem;
    color: var(--demo-link);
    font-size: .16rem;
    font-weight: 500
}

.review-alert {
    display: flex;
    align-items: flex-start;
    gap: .08rem;
    margin-top: .02rem;
    color: #5f6368;
    font-size: .13rem;
    line-height: 1.45
}

.review-alert p {
    margin: 0;
    flex: 1;
    padding-right: .3rem
}

.review-alert img {
    width: .16rem;
    height: .16rem;
    margin-top: .04rem;
    opacity: .7
}

.review-device-switch {
    display: flex;
    gap: .12rem;
    margin-top: .24rem
}

.review-device-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    height: .32rem;
    padding: 0 .22rem;
    border: 1px solid #d9dce1;
    border-radius: 999px;
    background: #fff;
    color: #5f6368;
    font-size: .13rem
}

.review-device-pill img {
    width: .14rem;
    height: .14rem;
    object-fit: contain
}

.review-device-pill.is-active {
    background: #e6f4ee;
    border-color: transparent;
    color: #188038
}

.ratings-panel {
    display: flex;
    gap: .3rem;
    align-items: start;
    margin-top: .34rem
}

.score-number {
    font-size: .63rem;
    line-height: .95;
    font-weight: 400;
    color: #000
}

.score-stars {
    display: flex;
    gap: .02rem;
    margin-top: .12rem
}

.score-stars svg {
    width: .18rem;
    height: .18rem;
    fill: var(--demo-green)
}

.score-caption {
    margin-top: .12rem;
    color: var(--demo-muted);
    font-size: .17rem;
    font-weight: 300
}

.ratings-bars {
    gap: .08rem;
    margin-top: .06rem;
    flex: 1
}

.rating-row {
    display: flex;
    width: 100%;
    gap: .15rem;
    align-items: center;
    font-size: .16rem;
    color: var(--demo-muted)
}

.rating-row div {
    flex: 1;
    height: .11rem;
    border-radius: 999px;
    background: #ebedf0;
    overflow: hidden
}

.rating-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--demo-green)
}

.reviews-list {
    display: grid;
    gap: .32rem;
    margin-top: .34rem
}

.review-card {
    padding-bottom: .04rem;
    border-bottom: 0
}

.review-card:last-child {
    padding-bottom: 0;
    border-bottom: 0
}

.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .12rem
}

.review-author {
    display: flex;
    align-items: center;
    gap: .16rem
}

.review-author img {
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    flex: 0 0 auto
}

.review-name {
    font-size: .15rem;
    font-weight: 300;
    color: #5f6368
}

.review-menu {
    width: .14rem;
    height: .14rem;
    object-fit: contain
}

.review-meta {
    display: flex;
    align-items: center;
    gap: .12rem;
    margin-top: .16rem;
    min-width: 0
}

.mini-stars {
    display: flex;
    gap: .02rem;
    flex: 0 0 auto
}

.mini-stars svg {
    width: .14rem;
    height: .14rem;
    fill: var(--demo-green)
}

.review-date {
    color: var(--demo-muted);
    font-size: .13rem
}

.review-body {
    margin: .16rem 0 0;
    color: #5f6368;
    font-size: .15rem;
    line-height: 1.55;
    font-weight: 300
}

.review-helpful {
    margin-top: .16rem;
    color: var(--demo-muted);
    font-size: .14rem
}

.review-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .16rem;
    margin-top: .16rem
}

.review-question {
    color: #5f6368;
    font-size: .13rem;
    line-height: 1.3
}

.review-votes {
    display: flex;
    gap: .14rem;
    flex: 0 0 auto
}

.review-votes button {
    height: .24rem;
    padding: 0 .2rem;
    border: 1px solid #d9dce1;
    border-radius: 999px;
    background: #fff;
    color: #5f6368;
    font-size: .15rem;
    line-height: .22rem
}

.related-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    column-gap: .1rem;
    row-gap: .24rem;
    margin-top: .18rem
}

.related-card {
    display: grid;
    grid-template-columns:.54rem 1fr;
    gap: .1rem;
    align-items: start
}

.related-card img {
    width: .54rem;
    height: .54rem;
    border-radius: .18rem;
    object-fit: cover;
    box-shadow: 0 .04rem .12rem #0000001f
}

.related-card__content {
    min-width: 0
}

.related-card h3 {
    margin: 0;
    font-size: .15rem;
    line-height: 1.35;
    font-weight: 400;
    color: #202124;
    overflow: hidden;
    white-space: nowrap
}

.related-card p {
    margin: .03rem 0 0;
    color: #3c4043;
    font-size: .13rem;
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap
}

.related-rating {
    display: inline-flex;
    align-items: center;
    gap: .03rem;
    margin-top: .06rem;
    color: #5f6368;
    font-size: .13rem
}

.related-rating svg {
    fill: #5f6368;
    width: .12rem;
    height: .12rem
}

.play-footer {
    margin-top: .08rem;
    padding: 0 0 .18rem
}

.footer-report {
    display: inline-flex;
    align-items: center;
    gap: .12rem;
    color: #000;
    font-size: .15rem
}

.footer-report img {
    width: .16rem;
    height: .16rem;
    object-fit: contain
}

.footer-columns {
    margin-top: .28rem;
    padding-top: .34rem;
    border-top: .01rem solid #e8eaed
}

.footer-group + .footer-group {
    margin-top: .42rem
}

.footer-group h3 {
    margin: 0 0 .22rem;
    color: #5f6368;
    font-size: .18rem;
    font-weight: 500
}

.footer-group a {
    display: block;
    color: #5f6368;
    font-size: .15rem;
    line-height: 1.45
}

.footer-group a + a {
    margin-top: .1rem
}

.footer-bottom-links {
    display: flex;
    justify-content: start;
    gap: .16rem;
    margin-top: .46rem;
    color: #5f6368;
    font-size: .13rem
}

.footer-tax {
    padding-top: .28rem
}

.footer-tax p {
    margin: 0;
    color: #5f6368;
    font-size: .13rem;
    line-height: 1.35
}

.footer-tax-country {
    display: inline-flex;
    align-items: center;
    gap: .16rem;
    margin-top: .3rem;
    color: #5f6368;
    font-size: .12rem;
    line-height: 1.2
}

.footer-tax-country img {
    width: .2rem;
    object-fit: cover
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: min(100%, 750px);
    transform: translate(-50%);
    z-index: 20;
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    height: calc(.56rem + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: .01rem solid var(--demo-line);
    background: #fffffff5
}

.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .04rem;
    color: var(--demo-muted);
    font-size: .14rem;
    font-weight: 700
}

.bottom-nav a.is-active {
    color: var(--demo-link)
}

.bottom-nav svg {
    width: .24rem;
    height: .24rem;
    fill: currentColor
}

.install-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: #00000075;
    opacity: 1;
    animation: modal-backdrop-fade .22s ease
}

.install-modal-backdrop.is-closing {
    animation: modal-backdrop-fade-out .22s ease forwards
}

.install-modal {
    position: fixed;
    inset: 0;
    z-index: 41;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .2rem
}

.install-modal.is-hidden, .install-modal-backdrop.is-hidden, .rapid-install-card__ready.is-hidden, .rapid-install-card__loading.is-hidden {
    display: none
}

.install-modal__panel {
    position: relative;
    width: min(100%, 3.42rem)
}

.install-modal--ios {
    align-items: flex-end;
    padding: .2rem .12rem calc(.28rem + env(safe-area-inset-bottom, 0px))
}

.install-modal--ios .install-modal__panel {
    width: min(100%, 3.54rem);
    transform: translateY(0);
    animation: ios-sheet-rise .26s cubic-bezier(.22, 1, .36, 1)
}

.install-modal--ios.is-closing .install-modal__panel {
    animation: ios-sheet-fall .22s cubic-bezier(.4, 0, 1, 1) forwards
}

.install-modal__panel--image img {
    width: 100%;
    border-radius: .2rem;
    box-shadow: 0 .18rem .4rem #0000003d
}

.install-modal__panel--android {
    width: min(100%, 3.16rem);
    animation: android-dialog-rise .22s cubic-bezier(.22, 1, .36, 1)
}

.install-modal--android.is-closing .install-modal__panel--android {
    animation: android-dialog-fall .18s ease forwards
}

.install-modal__close {
    position: absolute;
    top: .1rem;
    right: .1rem;
    z-index: 2;
    width: .28rem;
    height: .28rem;
    border-radius: 50%;
    background: #11182714
}

.install-modal__close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: .12rem;
    height: .02rem;
    border-radius: 999px;
    background: #5f6368
}

.install-modal__close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg)
}

.install-modal__close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg)
}

.install-modal__close--light {
    top: .12rem;
    right: .12rem;
    background: transparent
}

.rapid-install-card {
    position: relative;
    padding: .28rem .22rem .22rem;
    border-radius: .18rem;
    background: #fff;
    box-shadow: 0 .18rem .4rem #00000038
}

.rapid-install-card__header {
    display: flex;
    align-items: center;
    gap: .08rem;
    margin-bottom: .12rem
}

.rapid-install-card__brand-mark {
    width: .28rem;
    border-radius: 50%
}

.rapid-install-card__header h2 {
    margin: 0;
    color: #5f6368;
    font-size: .21rem;
    font-weight: 400
}

.rapid-install-card__loading, .rapid-install-card__ready {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 1.1rem
}

.rapid-install-card__spinner {
    position: relative;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: .02rem
}

.rapid-install-card__spinner svg {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    transform-origin: center;
    animation: spin-ccw .8s linear infinite
}

.rapid-install-card__arc {
    stroke: #2e67cc;
    stroke-width: 2;
    stroke-linecap: round
}

.rapid-install-card__arc--one {
    stroke-dasharray: 96 240;
    stroke-dashoffset: 140
}

.rapid-install-card__arc--two {
    stroke-dasharray: 96 240;
    stroke-dashoffset: -40
}

.rapid-install-card__progress-shell {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.rapid-install-card__spinner span[data-android-progress] {
    color: #2e67cc;
    font-size: .18rem;
    font-weight: 600;
    display: inline-block;
    width: .64rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1
}

.rapid-install-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .06rem;
    width: 100%;
    min-height: .4rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #dff8c6, #d4ffd8);
    color: #13884c;
    font-size: .145rem;
    font-weight: 600
}

.rapid-install-card__badge svg {
    width: .16rem;
    height: .16rem;
    fill: currentColor
}

.rapid-install-card__download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: .46rem;
    margin-top: .16rem;
    border-radius: 999px;
    background: #1459d2;
    color: #fff;
    font-size: .14rem
}

.shiny:after {
    content: "";
    position: absolute;
    top: -1.8rem;
    left: 0;
    display: inline-block;
    width: .3rem;
    height: 100%;
    background-color: #fffffff5;
    animation: shiny-btn-anim 4s ease-in-out infinite
}

@keyframes shiny-btn-anim {
    0% {
        opacity: 0;
        transform: scale(0) rotate(45deg)
    }
    80% {
        opacity: .5;
        transform: scale(0) rotate(45deg)
    }
    81% {
        opacity: 1;
        transform: scale(4) rotate(45deg)
    }
    to {
        opacity: 0;
        transform: scale(50) rotate(45deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes spin-ccw {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(-360deg)
    }
}

@keyframes ios-sheet-rise {
    0% {
        opacity: 0;
        transform: translateY(.32rem)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes ios-sheet-fall {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(.28rem)
    }
}

@keyframes android-dialog-rise {
    0% {
        opacity: 0;
        transform: translateY(.12rem) scale(.98)
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes android-dialog-fall {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
    to {
        opacity: 0;
        transform: translateY(.1rem) scale(.98)
    }
}

@keyframes modal-backdrop-fade {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes modal-backdrop-fade-out {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}