:root {
    --brand: #ffbb08;
    --brand2: #ffe17d;
    --ink: #21211e;
    --muted: #77766c;
    --cream: #fffaf0;
    --line: #eee8dc;
    --max: 1210px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft Yahei', sans-serif;
    background: #fffdf8;
    color: var(--ink);
    font-size: 15px;
    overflow-x: clip
}

body.lock {
    overflow: hidden
}

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

button {
    font: inherit;
    cursor: pointer
}

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

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2,
h3 {
    letter-spacing: -.035em
}

.container {
    width: min(var(--max), calc(100% - 52px));
    margin: auto
}

.site-header {
    height: 78px;
    background: rgba(255, 253, 248, .94);
    position: sticky;
    top: 0;
    z-index: 90;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, .055)
}

.nav-shell {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.brand {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 222px;
    flex-shrink: 0
}

.brand img {
    width: 205px;
    height: auto;
    max-height: 68px;
    object-fit: contain
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 6px
}

.desktop-nav a {
    padding: 10px 14px;
    border-radius: 24px;
    font-weight: 650;
    white-space: nowrap;
    color: #55544d;
    transition: .25s
}

.desktop-nav a:hover,
.desktop-nav a.current {
    color: #171714;
    background: #ffeab0
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.btn {
    border: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    gap: 8px;
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
    transition: transform .25s, box-shadow .25s, background .25s
}

.btn:hover {
    transform: translateY(-3px)
}

.btn-brand {
    background: #ffc21a;
    color: #211800;
    box-shadow: 0 8px 25px rgba(231, 155, 0, .17)
}

.btn-brand:hover {
    background: #ffce3c;
    box-shadow: 0 12px 24px rgba(231, 155, 0, .27)
}

.btn-small {
    min-height: 41px;
    padding: 0 19px;
    border-radius: 12px
}

.btn-lg {
    min-height: 58px;
    padding: 0 27px;
    font-size: 16px
}

.btn-outline {
    border: 1.5px solid #d9d0be;
    background: #fffaf1;
    color: #2b2922
}

.btn-dark {
    background: #22201d;
    color: white
}

.btn-white {
    background: #fff;
    color: #29241b
}

.btn-ghost-white {
    color: white;
    border: 1px solid #fff6;
    background: transparent
}

.menu-btn {
    height: 42px;
    width: 44px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.menu-btn span {
    height: 2px;
    width: 19px;
    background: #27231c;
    border-radius: 2px
}

.download-trigger {
    display: inline-flex;
    position: relative;
    max-width: 100%
}

.qr-pop {
    position: absolute;
    left: 50%;
    width: 202px;
    padding: 12px;
    border-radius: 18px;
    z-index: 15;
    background: #fff;
    color: #26211b;
    box-shadow: 0 18px 54px #39291233;
    border: 1px solid #eee;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .25s, transform .25s, visibility .25s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px
}

.download-trigger.up .qr-pop {
    bottom: calc(100% + 14px);
    transform: translate(-50%, 10px)
}

.download-trigger.down .qr-pop {
    top: calc(100% + 14px);
    transform: translate(-50%, -10px)
}

.qr-pop img {
    width: 176px;
    height: 176px;
    object-fit: contain
}

.qr-pop small {
    font-size: 12px;
    color: #62605a;
    font-weight: 700
}

.download-trigger:hover .qr-pop,
.download-trigger:focus-within .qr-pop {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translate(-50%, 0)
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: #15120e88;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: .3s
}

.drawer {
    position: fixed;
    z-index: 101;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(390px, 90vw);
    background: #fffdf7;
    padding: 27px;
    overflow: auto;
    transform: translateX(102%);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px #0001
}

.drawer-open .drawer {
    transform: translateX(0)
}

.drawer-open .drawer-backdrop {
    opacity: 1;
    visibility: visible
}

.drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 23px;
    margin-bottom: 22px
}

.drawer-close {
    border: 0;
    background: #fff2d1;
    border-radius: 50%;
    font-size: 28px;
    width: 40px;
    height: 40px
}

.drawer-links {
    display: grid;
    gap: 9px
}

.drawer-links a {
    display: flex;
    justify-content: space-between;
    padding: 15px 18px;
    border-radius: 13px;
    font-size: 16px;
    font-weight: 750;
    background: #faf6ee;
    transition: .25s
}

.drawer-links a.current,
.drawer-links a:hover {
    background: #ffcb34;
    color: #2c240f
}

.drawer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0
}

.drawer-tags span {
    padding: 8px 12px;
    border: 1px solid #f0e4cf;
    border-radius: 30px;
    font-size: 12px
}

.drawer-foot {
    margin-top: auto;
    padding-top: 26px
}

.drawer-foot .download-trigger,
.drawer-foot .btn {
    width: 100%
}

.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 78% 30%, #ffe39b 0, transparent 45%), linear-gradient(145deg, #fffbed, #fff3d4 65%, #ffedb7)
}

.hero-glow {
    position: absolute;
    right: -12vw;
    top: -200px;
    width: 650px;
    height: 650px;
    border: 120px solid #fff6;
    border-radius: 50%;
    pointer-events: none
}

.hero-inner {
    position: relative;
    min-height: 585px;
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    align-items: center;
    gap: 25px;
    padding: 58px 0 70px
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #76520c;
    padding: 8px 16px;
    background: #fff9dd;
    border: 1px solid #ffe5a3;
    border-radius: 24px;
    margin-bottom: 23px
}

.dot {
    height: 9px;
    width: 9px;
    background: #f3b500;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #ffcb5633
}

.hero h1 {
    font-size: clamp(37px, 4vw, 62px);
    line-height: 1.19;
    letter-spacing: -.05em;
    margin-bottom: 22px;
    white-space: normal
}

.hero h1 span {
    color: #db8e00
}

.hero h1 em {
    font-style: normal
}

.hero-copy>p {
    font-size: 17px;
    line-height: 1.95;
    max-width: 510px;
    color: #665f4f;
    margin-bottom: 30px
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.hero-chips {
    display: flex;
    gap: 17px;
    margin-top: 32px;
    color: #806d4b;
    font-size: 13px;
    font-weight: 700;
    flex-wrap: wrap
}

.hero-chips span:before {
    content: '✓';
    margin-right: 5px;
    color: #e3a000
}

.hero-visual {
    height: 495px;
    position: relative;
    perspective: 900px
}

.hero-card {
    position: absolute;
    width: 47%;
    max-width: 260px;
    aspect-ratio: 3/4;
    overflow: hidden;
    border: 6px solid white;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 25px 48px #72501233;
    transform-origin: bottom center;
    transition: transform .65s cubic-bezier(.2, .9, .3, 1), box-shadow .4s
}

.hero-card img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.hero-card-one {
    left: 22%;
    top: 43px;
    z-index: 3;
    transform: rotate(-2deg)
}

.hero-card-two {
    left: 0;
    top: 112px;
    z-index: 2;
    transform: rotate(-16deg) scale(.9)
}

.hero-card-three {
    right: 0;
    top: 104px;
    z-index: 1;
    transform: rotate(15deg) scale(.88)
}

.hero-visual:hover .hero-card-one {
    transform: rotate(0deg) translateY(-13px)
}

.hero-visual:hover .hero-card-two {
    transform: rotate(-23deg) translate(-14px, -13px)
}

.hero-visual:hover .hero-card-three {
    transform: rotate(22deg) translate(14px, -13px)
}

.hero-spark {
    font-size: 54px;
    color: #fcba10;
    position: absolute;
    z-index: 5;
    right: 6%;
    top: 18px;
    animation: float 4s ease-in-out infinite
}

.section {
    padding: 90px 0
}

.section:nth-of-type(even) {
    background: #fff
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 30px
}

.eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .17em;
    color: #bf870b;
    margin-bottom: 11px
}

.section-head h2 {
    font-size: clamp(28px, 3.2vw, 39px);
    margin: 0 0 10px
}

.section-head p {
    color: #817c70;
    font-size: 15px;
    margin: 0;
    line-height: 1.7
}

.subtle-link {
    font-weight: 750;
    white-space: nowrap;
    color: #987019;
    font-size: 14px;
    padding: 9px 0
}

.poster-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 27px 17px
}

.poster-card {
    min-width: 0
}

.cover-wrap {
    aspect-ratio: 3/4;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #ece8df;
    box-shadow: 0 7px 20px #3930230c
}

.cover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s
}

.poster-card:hover .cover-wrap img {
    transform: scale(1.07);
    filter: brightness(.8)
}

.cover-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #211b17bb;
    backdrop-filter: blur(4px);
    border: 1px solid #ffffff20;
    border-radius: 7px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 750;
    color: #fff
}

.cover-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -43%) scale(.8);
    border-radius: 50%;
    height: 54px;
    width: 54px;
    background: #ffc528;
    display: grid;
    place-items: center;
    color: #271c05;
    box-shadow: 0 10px 25px #0003;
    opacity: 0;
    transition: .25s
}

.poster-card:hover .cover-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
}

.poster-meta {
    padding: 13px 2px
}

.poster-meta h3 {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 7px;
    line-height: 1.4
}

.poster-meta p {
    font-size: 12.5px;
    color: #8e887d;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0
}

.rank-section {
    background: #fff8e9 !important
}

.rank-layout {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 26px
}

.rank-feature {
    min-height: 420px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #30251d
}

.rank-feature>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 27%;
    position: absolute;
    inset: 0;
    filter: brightness(.73)
}

.rank-feature:after {
    content: '';
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(transparent, #000c)
}

.rank-feature>div {
    position: absolute;
    z-index: 2;
    bottom: 25px;
    left: 26px;
    color: #fff
}

.rank-feature span {
    font-size: 12px;
    color: #ffd36a
}

.rank-feature h3 {
    font-size: 27px;
    margin: 10px 0
}

.rank-feature p {
    margin: 0;
    color: #eee
}

.rank-list {
    display: grid;
    gap: 9px
}

.rank-row {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid #f3e7d0;
    background: #fff;
    border-radius: 14px;
    min-width: 0
}

.rank-num {
    font-size: 26px;
    font-weight: 950;
    color: #c6a45e;
    width: 39px;
    flex-shrink: 0
}

.rank-row:nth-child(-n+3) .rank-num {
    color: #eea400
}

.rank-row img {
    width: 57px;
    height: 76px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0
}

.rank-row>div {
    flex: 1;
    min-width: 0
}

.rank-row h3 {
    font-size: 16px;
    margin: 0 0 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.rank-row p {
    font-size: 12px;
    color: #89847c;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.rank-arrow {
    color: #a88a48;
    font-size: 24px
}

.topic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.topic-card {
    height: 205px;
    border-radius: 19px;
    position: relative;
    overflow: hidden;
    background: #312519;
    color: white;
    isolation: isolate
}

.topic-card:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #1e1716ee 0%, #241916b3 53%, #24191623)
}

.topic-card img {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    transition: transform .6s
}

.topic-card:hover img {
    transform: scale(1.08)
}

.topic-card>div {
    padding: 26px;
    max-width: 80%;
    position: relative;
    z-index: 2
}

.topic-card small {
    font-size: 12px;
    color: #ffd56e
}

.topic-card h3 {
    font-size: 25px;
    margin: 15px 0 9px
}

.topic-card p {
    font-size: 12px;
    color: #eee3d1;
    line-height: 1.7
}

.topic-card b {
    position: absolute;
    right: 20px;
    bottom: 21px;
    font-size: 24px;
    font-weight: 400
}

.talk-section {
    background: #fffaf0 !important
}

.barrage {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    margin: 0 0 23px
}

.barrage-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: marquee 34s linear infinite
}

.barrage-track span {
    display: block;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #f1e2c4;
    padding: 12px 18px;
    border-radius: 35px;
    color: #705933;
    font-size: 13px;
    font-weight: 700
}

.barrage:hover .barrage-track {
    animation-play-state: paused
}

.talk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px
}

.talk-card {
    border: 1px solid #f0e4d2;
    background: #fff;
    padding: 23px;
    border-radius: 19px
}

.talk-top {
    display: flex;
    align-items: center;
    gap: 12px
}

.talk-top img {
    height: 49px;
    width: 49px;
    object-fit: cover;
    border-radius: 50%
}

.talk-top strong {
    display: block;
    font-size: 15px
}

.talk-top small {
    font-size: 11px;
    color: #b28c43
}

.talk-card p {
    font-size: 13px;
    color: #777168;
    line-height: 1.8;
    margin: 17px 0 0
}

.download-section {
    background: #fffdf8
}

.download-shell {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 20px;
    align-items: center;
    padding: 62px 64px;
    background: radial-gradient(circle at 95% 50%, #51401a 0, transparent 37%), linear-gradient(120deg, #29251b, #191916);
    color: white;
    border-radius: 27px;
    overflow: visible;
    position: relative
}

.download-copy h2 {
    font-size: clamp(34px, 3.6vw, 49px);
    line-height: 1.24;
    margin-bottom: 20px
}

.download-copy p {
    color: #cec6b5;
    font-size: 15px;
    line-height: 1.9;
    max-width: 455px;
    margin-bottom: 27px
}

.download-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.download-features {
    display: flex;
    gap: 20px;
    color: #e7d2a4;
    font-size: 12px;
    margin-top: 28px;
    flex-wrap: wrap
}

.download-features span:before {
    content: '✦';
    margin-right: 7px;
    color: #f9ca4d
}

.download-side {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 0
}

.qr-static {
    background: white;
    border-radius: 18px;
    padding: 13px;
    color: #35302a;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 15px 30px #0004;
    flex-shrink: 0
}

.qr-static img {
    height: 172px;
    width: 172px
}

.qr-static strong {
    font-size: 11px;
    margin-top: 4px
}

.mini-float {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.mini-float img {
    width: 92px;
    height: 126px;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 12px;
    transform: rotate(7deg);
    box-shadow: 0 8px 25px #0005
}

.mini-float img:nth-child(2) {
    transform: rotate(-7deg)
}

.faq-section {
    padding-top: 32px
}

.faq-list {
    max-width: 860px;
    margin: auto
}

.faq-item {
    border-bottom: 1px solid #e8e3d9;
    padding: 0 7px
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-weight: 750;
    font-size: 16px;
    padding: 22px 0
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item .plus {
    font-size: 23px;
    font-weight: 400;
    color: #b99024;
    transition: transform .25s
}

.faq-item[open] .plus {
    transform: rotate(45deg)
}

.faq-item p {
    color: #777168;
    line-height: 1.9;
    padding: 0 25px 20px 0;
    margin: 0;
    font-size: 14px
}

.footer {
    border-top: 1px solid #eee6d9;
    background: #fff8e9;
    padding: 45px 0 18px
}

.footer-main {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center
}

.footer-main img {
    width: 210px;
    height: auto
}

.footer-main p {
    font-size: 13px;
    color: #898172;
    margin: 5px 0
}

.footer-links {
    display: flex;
    gap: 17px;
    flex-wrap: wrap
}

.footer-links a {
    font-size: 13px;
    color: #5d5444
}

.footer-links a:hover {
    color: #c48b03
}

.footer-bottom {
    border-top: 1px solid #eee2cf;
    padding-top: 20px;
    margin-top: 34px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 12px;
    color: #968a77
}

.backtop {
    position: fixed;
    right: 22px;
    bottom: 23px;
    background: #ffc329;
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 23px;
    box-shadow: 0 8px 23px #553a002b;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: .2s
}

.backtop.visible {
    opacity: 1;
    pointer-events: auto
}

.subhero {
    background: radial-gradient(ellipse at 90% 15%, #ffe09a, transparent 49%), linear-gradient(120deg, #fff9e8, #fff0c3);
    overflow: hidden
}

.subhero-wrap {
    min-height: 350px;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    align-items: center;
    gap: 30px;
    padding: 47px 0
}

.subhero-copy h1 {
    font-size: clamp(35px, 4vw, 54px);
    margin: 12px 0 17px
}

.subhero-copy>p {
    font-size: 16px;
    line-height: 1.9;
    color: #736952;
    max-width: 630px
}

.sub-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 26px;
    flex-wrap: wrap
}

.subhero-covers {
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center
}

.subhero-covers img {
    height: 225px;
    width: 30%;
    min-width: 0;
    object-fit: cover;
    border-radius: 13px;
    border: 4px solid white;
    box-shadow: 0 15px 35px #0002;
    transform: rotate(-11deg)
}

.subhero-covers img:nth-child(2) {
    transform: rotate(0) translateY(-12px);
    z-index: 2
}

.subhero-covers img:nth-child(3) {
    transform: rotate(11deg)
}

.tinted {
    background: #fff7e8 !important
}

.leaderboard {
    display: grid;
    gap: 14px;
    max-width: 970px;
    margin: auto
}

.leader-row {
    display: flex;
    gap: 22px;
    align-items: center;
    background: #fff;
    border: 1px solid #f2e9db;
    border-radius: 18px;
    padding: 13px 25px
}

.leader-index {
    width: 50px;
    font-size: 29px;
    font-weight: 900;
    color: #e0a91e;
    flex-shrink: 0
}

.leader-row img {
    width: 85px;
    height: 112px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0
}

.leader-row>div {
    flex: 1;
    min-width: 0
}

.mini-tag {
    font-size: 11px;
    color: #c59121;
    font-weight: 800
}

.leader-row h2 {
    font-size: 18px;
    margin: 7px 0
}

.leader-row p {
    font-size: 13px;
    color: #888076;
    margin: 0;
    line-height: 1.7
}

.leader-end {
    white-space: nowrap;
    color: #b38a26;
    font-size: 12px
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px
}

.benefit {
    border: 1px solid #f2e8d6;
    border-radius: 18px;
    padding: 27px 22px;
    background: #fffaf0
}

.benefit>span {
    display: grid;
    place-items: center;
    border-radius: 13px;
    width: 49px;
    height: 49px;
    font-size: 25px;
    background: #ffdc73;
    color: #624602
}

.benefit h3 {
    font-size: 20px;
    margin: 25px 0 10px
}

.benefit p {
    color: #878073;
    font-size: 13px;
    line-height: 1.8
}

.topic-anchor:nth-of-type(even) {
    background: #fff9ec
}

.reveal {
    opacity: 0;
    transition: opacity .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--delay, 0ms)
}

.reveal.rise {
    transform: translateY(31px)
}

.reveal.slide {
    transform: translateX(-25px)
}

.reveal.zoom {
    transform: scale(.95)
}

.reveal.in-view {
    opacity: 1;
    transform: none
}

@keyframes float {
    50% {
        transform: translateY(-18px) rotate(15deg)
    }
}

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}

@media(max-width:1050px) {
    .desktop-nav {
        gap: 0
    }

    .desktop-nav a {
        padding: 9px 9px;
        font-size: 13px
    }

    .brand {
        width: 165px
    }

    .brand img {
        width: 160px
    }

    .hero-inner {
        min-height: 540px
    }

    .hero-visual {
        height: 440px
    }

    .download-shell {
        padding: 42px 36px
    }

    .mini-float {
        display: none
    }
}

@media(max-width:800px) {
    .desktop-nav {
        display: none
    }

    .site-header {
        height: 67px
    }

    .brand {
        width: 165px
    }

    .brand img {
        width: 160px
    }

    .hero-inner {
        grid-template-columns: 1fr;
        padding: 53px 0 35px;
        gap: 25px
    }

    .hero-copy {
        text-align: center
    }

    .hero-copy>p {
        margin: 0 auto 25px
    }

    .hero-actions,
    .hero-chips {
        justify-content: center
    }

    .hero-visual {
        width: min(500px, 100%);
        margin: auto;
        height: 375px
    }

    .hero-card {
        width: 40%;
        max-width: 205px
    }

    .hero-card-one {
        top: 8px
    }

    .hero-card-two {
        top: 54px
    }

    .hero-card-three {
        top: 55px
    }

    .section {
        padding: 65px 0
    }

    .poster-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .rank-layout {
        grid-template-columns: 1fr
    }

    .rank-feature {
        min-height: 300px
    }

    .topic-grid,
    .talk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .download-shell {
        grid-template-columns: 1fr;
        text-align: center
    }

    .download-copy p {
        margin-left: auto;
        margin-right: auto
    }

    .download-buttons,
    .download-features {
        justify-content: center
    }

    .subhero-wrap {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 15px
    }

    .subhero-copy>p {
        margin: auto
    }

    .sub-actions {
        justify-content: center
    }

    .subhero-covers {
        height: 220px
    }

    .subhero-covers img {
        height: 200px;
        width: 145px
    }

    .benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .footer-main {
        align-items: start;
        flex-direction: column
    }
}

@media(max-width:560px) {
    .container {
        width: calc(100% - 30px)
    }

    .brand {
        width: 146px
    }

    .brand img {
        width: 144px
    }

    .nav-actions {
        gap: 7px
    }

    .btn-small {
        font-size: 12px;
        min-height: 39px;
        padding: 0 12px
    }

    .menu-btn {
        width: 40px;
        height: 40px
    }

    .hero-inner {
        padding: 40px 0 17px
    }

    .hero-kicker {
        font-size: 11px
    }

    .hero h1 {
        font-size: clamp(30px, 8.4vw, 43px);
        line-height: 1.25
    }

    .hero-copy>p {
        font-size: 14px;
        line-height: 1.8
    }

    .hero-actions {
        gap: 8px
    }

    .btn-lg {
        min-height: 48px;
        padding: 0 14px;
        font-size: 13px
    }

    .hero-chips {
        margin-top: 20px;
        gap: 12px;
        font-size: 11px
    }

    .hero-visual {
        height: 300px;
        max-width: 360px
    }

    .hero-card {
        border-width: 4px;
        border-radius: 15px;
        width: 43%
    }

    .hero-card-one {
        left: 29%
    }

    .hero-card-two {
        left: 3%
    }

    .hero-card-three {
        right: 1%
    }

    .section {
        padding: 50px 0
    }

    .section-head {
        gap: 8px;
        margin-bottom: 20px
    }

    .section-head h2 {
        font-size: 27px
    }

    .section-head p {
        font-size: 12px
    }

    .subtle-link {
        font-size: 12px
    }

    .eyebrow {
        font-size: 10px
    }

    .poster-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px
    }

    .cover-wrap {
        border-radius: 11px
    }

    .poster-meta h3 {
        font-size: 14px
    }

    .poster-meta p {
        font-size: 11.5px
    }

    .cover-play {
        height: 43px;
        width: 43px
    }

    .rank-feature {
        min-height: 310px
    }

    .rank-row {
        gap: 9px;
        padding: 8px
    }

    .rank-num {
        width: 29px;
        font-size: 19px
    }

    .rank-row img {
        height: 60px;
        width: 45px
    }

    .rank-row h3 {
        font-size: 13px
    }

    .rank-row p {
        font-size: 11px
    }

    .topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px
    }

    .topic-card {
        height: 170px;
        border-radius: 13px
    }

    .topic-card>div {
        padding: 18px 12px;
        max-width: 100%
    }

    .topic-card h3 {
        font-size: 17px;
        margin: 12px 0 6px
    }

    .topic-card p {
        font-size: 10.5px
    }

    .topic-card b {
        right: 9px;
        bottom: 8px
    }

    .talk-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .talk-card {
        padding: 17px
    }

    .download-shell {
        padding: 40px 18px;
        border-radius: 20px
    }

    .download-copy h2 {
        font-size: 33px
    }

    .download-copy p {
        font-size: 13px
    }

    .download-buttons .btn {
        font-size: 13px;
        padding: 0 13px
    }

    .download-features {
        gap: 10px
    }

    .qr-static img {
        width: 150px;
        height: 150px
    }

    .faq-item summary {
        font-size: 14px
    }

    .footer-links {
        gap: 13px
    }

    .footer-bottom {
        flex-wrap: wrap;
        font-size: 10px
    }

    .subhero-wrap {
        padding: 37px 0 26px
    }

    .subhero-copy h1 {
        font-size: 34px
    }

    .subhero-copy>p {
        font-size: 13px
    }

    .subhero-covers {
        height: 176px
    }

    .subhero-covers img {
        width: 30%;
        height: 160px
    }

    .leader-row {
        gap: 9px;
        padding: 10px
    }

    .leader-index {
        font-size: 20px;
        width: 29px
    }

    .leader-row img {
        width: 60px;
        height: 82px
    }

    .leader-row h2 {
        font-size: 14px
    }

    .leader-row p {
        font-size: 11px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .leader-end {
        display: none
    }

    .benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px
    }

    .benefit {
        padding: 17px 14px
    }

    .benefit h3 {
        font-size: 16px;
        margin: 18px 0 8px
    }

    .benefit p {
        font-size: 11px
    }

    .qr-pop {
        width: 164px
    }

    .qr-pop img {
        height: 140px;
        width: 140px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}

/* 黄果新版导航、站内搜索和纵深动效 */
.desktop-nav {
    gap: 2px;
    flex-wrap: nowrap
}

.desktop-nav a {
    font-size: 12.5px;
    padding: 10px 8px
}

.nav-shell {
    gap: 10px
}

.brand {
    width: 196px
}

.brand img {
    width: 190px
}

.nav-search-link {
    color: #815900 !important
}

.search-top-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 27px;
    border-radius: 12px;
    background: #fff4d5;
    color: #845800;
    flex-shrink: 0
}

.nav-actions {
    gap: 7px
}

.fruit-accent {
    background: #ffca36;
    color: #774c06;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .27em;
    padding: 6px 0
}

.discovery-section {
    background: linear-gradient(130deg, #fff8e9, #fff0c3) !important
}

.discovery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.discovery-tile {
    display: block;
    background: white;
    border: 1px solid #f2dfb5;
    border-radius: 22px;
    padding: 30px;
    box-shadow: 0 9px 28px #cba84013;
    transition: transform .3s, box-shadow .3s
}

.discovery-tile:hover {
    transform: translateY(-8px);
    box-shadow: 0 17px 32px #cba8402c
}

.discovery-tile b {
    font-size: 33px
}

.discovery-tile h3 {
    font-size: 22px;
    margin: 18px 0 12px
}

.discovery-tile p {
    font-size: 14px;
    line-height: 1.9;
    color: #766c5c;
    min-height: 55px
}

.discovery-tile span {
    font-weight: 800;
    color: #b57a04;
    font-size: 13px
}

.cover-wrap:after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(transparent 55%, #09090888);
    opacity: 0;
    transition: opacity .33s
}

.poster-card:hover .cover-wrap:after,
.poster-card:focus-within .cover-wrap:after {
    opacity: 1
}

.cover-player {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    color: white;
    opacity: 0;
    transform: scale(.91);
    transition: opacity .28s, transform .4s cubic-bezier(.2, .8, .2, 1)
}

.poster-card:hover .cover-player,
.poster-card:focus-within .cover-player {
    opacity: 1;
    transform: scale(1)
}

.player-ring {
    display: grid;
    place-items: center;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #05050570;
    border: 1.5px solid #ffffffbb;
    backdrop-filter: blur(9px);
    box-shadow: 0 10px 35px #0005, inset 0 0 0 5px #ffffff14;
    transition: background .25s, transform .25s
}

.cover-player:hover .player-ring,
.cover-player:focus-visible .player-ring {
    background: #f5af0a;
    transform: scale(1.09)
}

.player-caption {
    font-size: 12px;
    font-weight: 750;
    text-shadow: 0 2px 8px #000;
    letter-spacing: .03em
}

.poster-card {
    transition: transform .35s
}

.poster-card:hover {
    transform: translateY(-4px)
}

.hero-visual {
    isolation: isolate;
    transform-style: preserve-3d
}

.fruit-tunnel {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
    perspective: 950px;
    overflow: hidden;
    border-radius: 40px;
    mask-image: radial-gradient(ellipse, #000 25%, transparent 77%)
}

.tunnel-ring {
    position: absolute;
    width: 66%;
    height: 83%;
    border: 2px solid rgba(243, 171, 0, .25);
    border-radius: 40%;
    box-shadow: 0 0 24px #ffda6a44, inset 0 0 22px #f6b42a22;
    transform: translateZ(calc((var(--i) - 5)*-110px)) rotate(calc(var(--i)*13deg)) scale(.85);
    opacity: .8
}

.hero-visual.in-view .tunnel-ring {
    animation: tunnelDepth 7s linear infinite;
    animation-delay: calc(var(--i)*-.85s)
}

@keyframes tunnelDepth {
    0% {
        transform: translateZ(-650px) rotate(-12deg) scale(.4);
        opacity: 0
    }

    22% {
        opacity: .85
    }

    82% {
        opacity: .5
    }

    100% {
        transform: translateZ(370px) rotate(90deg) scale(1.4);
        opacity: 0
    }
}

.hero-visual.reveal.zoom {
    transform: perspective(1000px) translateZ(-130px) scale(.87);
    filter: blur(8px);
    opacity: 0;
    transition: transform 1.25s cubic-bezier(.16, 1, .3, 1), filter 1.1s, opacity 1s
}

.hero-visual.reveal.zoom.in-view {
    transform: perspective(1000px) translateZ(0) scale(1);
    filter: blur(0);
    opacity: 1
}

.hero-card {
    z-index: 2;
    animation: heroBreathe 5.5s ease-in-out infinite alternate
}

.hero-card-two {
    animation-delay: -1.8s
}

.hero-card-three {
    animation-delay: -3.2s
}

@keyframes heroBreathe {
    to {
        box-shadow: 0 32px 58px #ae79004d;
        filter: saturate(1.12)
    }
}

.search-heading {
    padding: 65px 0 70px;
    max-width: 860px
}

.search-heading h1 {
    font-size: clamp(32px, 4vw, 54px);
    margin: 12px 0
}

.search-heading p {
    font-size: 16px;
    color: #665d4b
}

.search-form {
    margin-top: 30px;
    display: flex;
    gap: 10px;
    background: #fff;
    padding: 8px;
    border: 1px solid #f1d595;
    box-shadow: 0 12px 44px #ce920026;
    border-radius: 17px
}

.search-form input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    padding: 14px;
    font: inherit;
    font-size: 16px;
    background: transparent
}

.search-form button {
    border: 0;
    background: #ffc32b;
    color: #2f2105;
    font-weight: 800;
    padding: 0 26px;
    border-radius: 12px;
    cursor: pointer
}

.search-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px
}

.search-tags button {
    padding: 9px 16px;
    background: #fff8e7;
    border: 1px solid #edce82;
    border-radius: 30px;
    color: #795c22;
    cursor: pointer
}

.search-tags button:hover {
    background: #ffdb79
}

.search-empty {
    background: #fff8e6;
    padding: 55px 25px;
    text-align: center;
    border-radius: 22px;
    color: #796846
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden
}

.search-form:focus-within {
    outline: 2px solid #dfae24;
    outline-offset: 3px
}

@media(max-width:1270px) {
    .desktop-nav a {
        padding: 9px 6px;
        font-size: 12px
    }

    .brand {
        width: 165px
    }

    .brand img {
        width: 160px
    }
}

@media(max-width:1090px) {
    .desktop-nav {
        display: none
    }

    .search-top-btn {
        display: grid
    }
}

@media(max-width:800px) {
    .discovery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .fruit-tunnel {
        border-radius: 25px
    }
}

@media(max-width:560px) {
    .discovery-grid {
        grid-template-columns: 1fr
    }

    .discovery-tile {
        padding: 23px
    }

    .search-heading {
        padding: 45px 0
    }

    .search-form input {
        font-size: 14px;
        padding: 12px 8px
    }

    .search-form button {
        padding: 0 15px;
        font-size: 13px
    }

    .cover-player {
        opacity: 1;
        transform: none;
        justify-content: flex-end;
        padding-bottom: 15px;
        pointer-events: none
    }

    .player-ring {
        width: 37px;
        height: 37px;
        background: #05050566
    }

    .player-ring svg {
        width: 17px;
        height: 17px
    }

    .player-caption {
        display: none
    }

    .search-top-btn {
        height: 35px;
        width: 32px;
        font-size: 23px
    }

    .fruit-accent {
        font-size: 9px
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-visual.reveal.zoom {
        transform: none;
        opacity: 1;
        filter: none
    }

    .tunnel-ring,
    .hero-card {
        animation: none !important
    }
}


/* Black-gold premium refinement */
:root {
    --brand: #d9ad5d;
    --brand2: #f0d492;
    --ink: #efe6d8;
    --muted: #a9a096;
    --cream: #171513;
    --line: #332c24
}

body {
    background: #0c0b0a;
    color: #e9e0d4
}

.site-header {
    background: rgba(12, 11, 10, .91);
    border-bottom: 1px solid #a784443d;
    box-shadow: 0 8px 38px #0004
}

.desktop-nav a {
    color: #bfb2a0;
    font-size: 13px;
    padding: 10px 11px
}

.desktop-nav a.current,
.desktop-nav a:hover {
    color: #f8dc9b;
    background: #cfa55d1e
}

.nav-search-link {
    color: #e4c17e !important
}

.search-top-btn,
.menu-btn {
    background: #211b16;
    color: #e9c681;
    border: 1px solid #64503855
}

.menu-btn span {
    background: #e8c883
}

.btn-brand,
.search-form button {
    background: linear-gradient(115deg, #c89943, #f3d68d 53%, #b78338);
    color: #201508;
    box-shadow: 0 10px 26px #b4832333
}

.btn-brand:hover {
    background: linear-gradient(115deg, #e0b75f, #ffe7ac, #c59b53);
    box-shadow: 0 16px 36px #ca963d44
}

.btn-outline {
    background: transparent;
    color: #f0d8a8;
    border: 1px solid #96723d88
}

.btn-dark {
    background: #d5ab64;
    color: #17120b
}

.btn-white {
    background: #f1dcaf;
    color: #20170e
}

.drawer {
    background: #14110e;
    border-left: 1px solid #b9924b38;
    box-shadow: -28px 0 70px #0008
}

.drawer-backdrop {
    background: #000b;
    backdrop-filter: blur(4px)
}

.drawer-top {
    color: #e9ce98
}

.drawer-close {
    color: #e9cd95;
    background: #2b2117
}

.drawer-links a {
    background: #211b16;
    color: #d7c6ae;
    border: 1px solid #3d30225c
}

.drawer-links a:hover,
.drawer-links a.current {
    color: #f2d38a;
    background: linear-gradient(90deg, #49351e, #292018);
    border-color: #9e79494d
}

.drawer-foot {
    border-top: 1px solid #473825
}

.qr-pop {
    background: #f8f2e4;
    color: #201a13;
    border-color: #b39463
}

.hero {
    background: radial-gradient(ellipse at 77% 37%, #7a58243e, transparent 51%), radial-gradient(ellipse at 19% 18%, #6f522122, transparent 52%), linear-gradient(140deg, #17130f 3%, #0b0a09 80%)
}

.hero-glow {
    border-color: #cda75c07
}

.hero-kicker {
    color: #e4c37f;
    background: #c6984320;
    border-color: #c6984359
}

.hero h1 {
    color: #f6efe0
}

.hero h1 span {
    color: #f2c76f
}

.hero-copy>p,
.hero-chips {
    color: #b5aa9a
}

.hero-chips span:before {
    color: #dbad5c
}

.fruit-accent {
    color: #ddbd7b;
    background: linear-gradient(90deg, #16110c, #3c2a13, #16110c);
    border-bottom: 1px solid #98703933
}

.section,
.trending,
.discovery-section,
.rankings-section,
.topic-section,
.faq-section,
.app-section {
    background: #0f0d0b !important
}

.section:nth-of-type(even) {
    background: #15110e !important
}

.section-head h2,
.poster-meta h3,
.topic-card h3,
.rank-row h3,
.leader-row h2,
.download-copy h2,
.subhero-copy h1 {
    color: #f0e6d4
}

.section-head p,
.poster-meta p,
.subhero-copy>p,
.rank-row p,
.leader-row p {
    color: #aa9e8b
}

.eyebrow,
.subtle-link {
    color: #dcb66e
}

.poster-card,
.talk-card,
.benefit,
.discovery-tile,
.rank-row,
.leader-row,
.faq-item,
.topic-card {
    border-color: #a2804535
}

.poster-meta h3 {
    font-weight: 730
}

.poster-card {
    border-radius: 16px
}

.poster-card:hover {
    transform: translateY(-6px)
}

.cover-wrap {
    isolation: isolate;
    box-shadow: 0 12px 25px #0005;
    border: 1px solid #bea16a30
}

.cover-wrap:after {
    background: linear-gradient(180deg, #0000 19%, #06050447 57%, #080705dd);
    opacity: 0
}

.poster-card:hover .cover-wrap:after,
.poster-card:focus-within .cover-wrap:after {
    opacity: 1
}

.cover-player {
    gap: 0;
    transform: translateY(9px) scale(.97);
    transition: opacity .36s ease, transform .45s cubic-bezier(.16, 1, .3, 1)
}

.poster-card:hover .cover-player,
.poster-card:focus-within .cover-player {
    transform: translateY(0) scale(1)
}

.cinema-play {
    position: relative;
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border: 1px solid #e7d1a0b8;
    border-radius: 50%;
    color: #fff4d6;
    background: #15110e44;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0 0 8px #fff1d910, 0 17px 38px #0008;
    transition: transform .4s, background .4s, border-color .4s
}

.cinema-play:after {
    content: '';
    position: absolute;
    inset: -9px;
    border: 1px solid #d9b87544;
    border-radius: 50%;
    transition: inset .35s, border-color .35s
}

.cover-player:hover .cinema-play {
    transform: scale(1.065);
    background: #c69e55d9;
    border-color: #fbe6b3
}

.cover-player:hover .cinema-play:after {
    inset: -13px;
    border-color: #eacb8a91
}

.cinema-caption {
    font-size: 12px;
    font-weight: 550;
    letter-spacing: .22em;
    color: #f8e4bc;
    margin-top: 19px;
    text-shadow: 0 2px 12px #000b
}

.cinema-rule {
    height: 1px;
    width: 30px;
    background: #d8b56b;
    margin-top: 12px;
    opacity: .85
}

.hero-visual {
    isolation: isolate;
    transform-style: preserve-3d;
    perspective: 1100px
}

.fruit-tunnel {
    position: absolute;
    inset: -6% -2%;
    border-radius: 34px;
    overflow: hidden;
    z-index: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    perspective: 1050px;
    mask-image: radial-gradient(ellipse at 50% 52%, #000 24%, #000d 52%, transparent 83%);
    background: radial-gradient(ellipse at center, #e4b65b16, transparent 47%)
}

.tunnel-ring {
    position: absolute;
    width: 48%;
    height: 64%;
    border: 1px solid #caa05570;
    border-radius: 19%;
    box-shadow: 0 0 22px #edc77b15, inset 0 0 23px #c698391c;
    opacity: 0;
    will-change: transform, opacity;
    transform: translateZ(-850px) rotate(0deg) scale(.3)
}

.hero-visual.in-view .tunnel-ring {
    animation: goldDepth 8.4s linear infinite;
    animation-delay: calc(var(--i)*-.7s)
}

.tunnel-ring:nth-child(3n) {
    border-color: #f8df9d7d;
    border-width: 2px
}

.tunnel-core {
    position: absolute;
    width: 25%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #efcb802e 0%, #ad751911 50%, transparent 72%);
    box-shadow: 0 0 80px #d8a64e30;
    animation: corePulse 6s ease-in-out infinite
}

@keyframes goldDepth {
    0% {
        transform: translateZ(-870px) rotate(-17deg) scale(.38);
        opacity: 0
    }

    20% {
        opacity: .65
    }

    66% {
        opacity: .42
    }

    100% {
        transform: translateZ(450px) rotate(18deg) scale(1.06);
        opacity: 0
    }
}

@keyframes corePulse {
    50% {
        transform: scale(1.22);
        opacity: .5
    }
}

.hero-visual.reveal.zoom {
    transform: perspective(1000px) translateZ(-185px) scale(.83);
    filter: blur(10px);
    opacity: 0;
    transition: transform 1.45s cubic-bezier(.16, 1, .3, 1), filter 1.3s, opacity 1.15s
}

.hero-visual.reveal.zoom.in-view {
    transform: perspective(1000px) translateZ(0) scale(1);
    filter: blur(0);
    opacity: 1
}

.hero-card {
    border: 4px solid #cba4618c;
    background: #1d1710;
    box-shadow: 0 23px 80px #000a, 0 0 34px #d2a45b16;
    backface-visibility: hidden
}

.hero-card-one {
    z-index: 3
}

.hero-card-two {
    z-index: 2
}

.hero-card-three {
    z-index: 1
}

.hero-visual:hover .hero-card-one {
    transform: rotate(0deg) translateY(-16px) translateZ(24px)
}

.hero-visual:hover .hero-card-two {
    transform: rotate(-16deg) translate(-11px, -6px)
}

.hero-visual:hover .hero-card-three {
    transform: rotate(15deg) translate(11px, -6px)
}

.hero-spark {
    color: #d6ad63
}

.discovery-section {
    background: linear-gradient(130deg, #17120d, #100e0b) !important
}

.discovery-tile {
    background: #211a13;
    border: 1px solid #9b774030;
    box-shadow: 0 8px 30px #0005
}

.discovery-tile:hover {
    box-shadow: 0 15px 36px #0008;
    border-color: #bc8d4d7a
}

.discovery-tile p {
    color: #b9aa96
}

.discovery-tile span {
    color: #dbb46b
}

.search-heading p {
    color: #b5a791
}

.search-form {
    background: #211a14;
    border-color: #87612d;
    box-shadow: 0 15px 40px #0005
}

.search-form input {
    color: #f5e8d5
}

.search-tags button {
    background: #211911;
    color: #e1c58e;
    border-color: #674f2a
}

.search-tags button:hover {
    background: #49351c
}

.search-empty {
    background: #241b12;
    color: #d2b984
}

.footer,
.site-footer,
footer {
    background: #090807 !important;
    color: #d3c5b0
}

.faq-item,
.talk-card,
.benefit {
    background-color: #1c1712;
    color: #efe3ce
}

.download-shell {
    background: linear-gradient(125deg, #24190e, #4a3219 55%, #1b140d) !important;
    border: 1px solid #cba05a55
}

:focus-visible {
    outline: 2px solid #efc677;
    outline-offset: 3px
}

@media(max-width:1270px) {
    .desktop-nav a {
        padding: 9px 7px;
        font-size: 12px
    }
}

@media(max-width:560px) {
    .cinema-play {
        width: 38px;
        height: 38px;
        box-shadow: 0 0 0 4px #fff1d910
    }

    .cinema-play svg {
        width: 18px;
        height: 18px
    }

    .cinema-caption,
    .cinema-rule {
        display: none
    }

    .cover-player {
        opacity: 1;
        transform: none;
        justify-content: flex-end;
        padding-bottom: 15px;
        pointer-events: none
    }

    .hero-visual {
        overflow: hidden
    }

    .fruit-tunnel {
        inset: 0
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-visual.reveal.zoom {
        transform: none;
        opacity: 1;
        filter: none
    }

    .tunnel-ring,
    .tunnel-core,
    .hero-card {
        animation: none !important
    }

    .tunnel-ring:nth-child(4) {
        opacity: .4;
        transform: scale(.8)
    }
}

/* 2026 visual polish: consistent ink contrast / cinematic details */
:root {
    --ink: #f6eddc;
    --muted: #bfb5a4;
    --brand: #e5bd77
}

body {
    background: #0c0b0a;
    color: #f4eadb
}

.subhero,
.subhero-wrap,
.subhero-section,
.subpage-hero {
    background: linear-gradient(120deg, #14110e, #211811 60%, #100e0b) !important;
    color: #f6ead6 !important
}

.subhero h1,
.subhero-copy h1,
.subhero h1 span,
.subhero-copy h1 span,
.subpage-hero h1,
.search-heading h1 {
    color: #fff1d7 !important;
    -webkit-text-fill-color: #fff1d7 !important;
    text-shadow: 0 2px 24px #0008
}

.subhero p,
.subhero-copy p,
.subpage-hero p,
.search-heading p {
    color: #d2c3ae !important
}

main h1,
main h2,
main h3 {
    color: #f8efdf
}

main p,
main li {
    color: #c4b6a1
}

main .poster-meta h3,
main .poster-meta p {
    color: #f5e9d5
}

main .poster-meta p {
    color: #b8a995
}

.topic-card h3,
.topic-card p {
    color: #fff2de !important;
    text-shadow: 0 2px 15px #0009
}

.section-head h2,
.section-head p,
.discovery-tile h3,
.benefit h3,
.benefit p,
.rank-row h3,
.leader-row h2 {
    color: #f3e5cb
}

.discover-grid,
.benefit-grid,
.faq-list {
    color: #f1e6d4
}
.desktop-nav {
    gap: 2px
}

.desktop-nav a:last-child {
    white-space: nowrap;
    color: #e9cc8e
}

.fruit-accent {
    display: none !important
}

.cover-wrap {
    position: relative;
    overflow: hidden
}

.poster-rating {
    position: absolute;
    top: 11px;
    left: 11px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 29px;
    padding: 4px 10px;
    background: rgba(13, 12, 12, .73);
    border: 1px solid rgba(255, 227, 173, .22);
    border-radius: 8px;
    color: #fff1d4;
    font-size: 13px;
    font-weight: 760;
    line-height: 1;
    box-shadow: 0 5px 20px #0005;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    pointer-events: none
}

.rating-star {
    color: #ecc67c;
    font-size: 12px
}

.rating-value {
    font-variant-numeric: tabular-nums
}

.cover-wrap>img {
    transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .6s
}

.poster-card:hover .cover-wrap>img,
.poster-card:focus-within .cover-wrap>img {
    transform: scale(1.055);
    filter: saturate(.9) brightness(.82)
}

.cover-wrap:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(5, 5, 5, .82), rgba(5, 5, 5, .05) 52%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s
}

.poster-card:hover .cover-wrap:after,
.poster-card:focus-within .cover-wrap:after {
    opacity: 1
}

.cover-player {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 16px 17px;
    transform: translateY(10px);
    text-decoration: none;
    transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1)
}

.poster-card:hover .cover-player,
.poster-card:focus-within .cover-player {
    opacity: 1;
    transform: translateY(0)
}

.cinema-play {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    color: #241b10;
    background: #f6e8c9;
    box-shadow: 0 7px 24px #0006;
    border: 1px solid #fff8df;
    border-radius: 12px;
    transition: background .3s, transform .3s;
    backdrop-filter: none
}

.cinema-play:after {
    display: none !important
}

.cover-player:hover .cinema-play {
    transform: translateY(-2px);
    background: #e5bd77;
    border-color: #e5bd77
}

.cinema-caption {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .03em;
    color: #fff7e7;
    margin: 0 0 12px;
    text-shadow: 0 2px 10px #000b
}

.cinema-rule {
    display: none !important
}

.faq-list {
    display: grid;
    gap: 12px;
    max-width: 980px;
    margin: 0 auto
}

.faq-item {
    background: linear-gradient(120deg, #201b16, #16130f) !important;
    border: 1px solid #7e633b66 !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px #0003;
    overflow: hidden;
    transition: border-color .3s, background .3s, box-shadow .3s
}

.faq-item:hover,
.faq-item[open] {
    border-color: #c4a06d9c !important;
    box-shadow: 0 18px 44px #0005
}

.faq-item summary {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    padding: 21px 24px !important;
    color: #f7e8cd !important;
    font-size: 16px !important;
    font-weight: 660;
    list-style: none
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item .plus {
    display: grid !important;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 1px solid #94754b66;
    border-radius: 10px;
    background: #e4ba7022;
    color: #f0d097 !important;
    font-size: 24px;
    line-height: 1;
    transition: transform .3s, background .3s
}

.faq-item[open] .plus {
    transform: rotate(45deg);
    background: #d2a85b36
}

.faq-item p {
    padding: 0 24px 23px !important;
    margin: 0 !important;
    color: #cbbca5 !important;
    font-size: 14px;
    line-height: 1.95
}

.backtop {
    display: grid !important;
    place-items: center;
    width: 52px !important;
    height: 52px !important;
    border: 1px solid #fff7da57 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #fff9e258, #cda76626 52%, #ffffff18) !important;
    box-shadow: inset 0 1px 1px #ffffff99, inset 0 -1px 1px #cda46666, 0 12px 35px #0007, 0 0 25px #e6bd5419 !important;
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    color: #fff5dc !important;
    transition: opacity .3s, transform .3s, box-shadow .3s !important
}

.backtop:hover {
    transform: translateY(-5px) !important;
    box-shadow: inset 0 1px 1px #fff, 0 15px 35px #0009, 0 0 24px #eec47744 !important
}

.backtop svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.benefit {
    position: relative;
    padding: 30px !important;
    background: linear-gradient(140deg, #221a12, #16130f) !important;
    border: 1px solid #80613c66 !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 32px #0003;
    transition: transform .35s, border-color .35s, box-shadow .35s
}

.benefit:hover {
    transform: translateY(-5px);
    border-color: #d7b17177 !important;
    box-shadow: 0 20px 45px #0005
}

.benefit-icon {
    display: grid !important;
    place-items: center;
    width: 59px;
    height: 59px;
    border-radius: 17px;
    background: linear-gradient(145deg, #a7824655, #d3a85b15);
    /* color: #ecc887 !important; */
    border: 1px solid #e1b87555;
    box-shadow: inset 0 1px #fff3d42b, 0 8px 20px #0003;
    font-size: 0 !important
}

.benefit-icon svg {
    height: 29px;
    width: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.benefit h3 {
    margin-top: 18px !important;
    color: #f7e7c9 !important
}

.benefit p {
    color: #c9bba6 !important;
    line-height: 1.85
}

.search-heading,
.search-section {
    color: #f4e8d5 !important
}

.search-heading input {
    color: #fff0d8
}

@media(max-width:560px) {
    .poster-rating {
        top: 7px;
        left: 7px;
        padding: 4px 7px;
        min-height: 24px;
        font-size: 11px
    }

    .cover-player {
        opacity: 1;
        pointer-events: none;
        padding: 0 10px 10px;
        justify-content: flex-end
    }

    .cinema-play {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 9px
    }

    .cinema-play svg {
        width: 16px;
        height: 16px
    }

    .cinema-caption {
        display: none
    }

    .faq-item summary {
        padding: 18px !important;
        font-size: 14px !important
    }

    .faq-item p {
        padding: 0 18px 20px !important
    }

    .benefit {
        padding: 20px !important
    }

    .backtop {
        width: 45px !important;
        height: 45px !important
    }
}

@media(prefers-reduced-motion:reduce) {
    .poster-card:hover .cover-wrap>img {
        transform: none
    }

    .faq-item,
    .benefit,
    .cinema-play {
        transition: none !important
    }
}

/* Orbit gallery, editorial rankings and progressive media loading */
.hero-visual.orbit-gallery {
    height: 515px !important;
    min-width: 0;
    perspective: none !important;
    transform-style: flat !important;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible
}

.orbit-stage {
    height: 445px;
    position: relative;
    isolation: isolate;
    perspective: 1100px;
    perspective-origin: 50% 50%;
    overflow: hidden;
    border-radius: 32px;
    background: radial-gradient(ellipse at 50% 48%, #78542b33, transparent 53%), linear-gradient(130deg, #1b1612, #0a0908 65%);
    border: 1px solid #aa865035;
    box-shadow: inset 0 0 80px #0009, 0 24px 80px #0004
}

.orbit-stage:after {
    content: '';
    position: absolute;
    inset: auto 3% 22px;
    height: 48px;
    background: radial-gradient(ellipse, #cd985922, transparent 65%);
    filter: blur(12px);
    pointer-events: none
}

.orbit-halo {
    position: absolute;
    width: 78%;
    height: 44%;
    left: 11%;
    top: 28%;
    border: 1px solid #e3bd7844;
    border-radius: 50%;
    transform: rotateX(66deg);
    box-shadow: 0 0 50px #ccaa6430, 0 0 0 35px #c49c2308, 0 0 0 75px #c49c2305;
    animation: orbitGlow 8s ease-in-out infinite alternate;
    pointer-events: none
}

.orbit-halo:after {
    content: '';
    position: absolute;
    inset: 17%;
    border: 1px dashed #d8b88044;
    border-radius: 50%
}

.orbit-track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d
}

.orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 37%;
    max-width: 198px;
    aspect-ratio: 3/4;
    overflow: hidden;
    border: 2px solid #f1d59e60;
    border-radius: 17px;
    background: #34281e;
    box-shadow: 0 22px 50px #000a, 0 0 0 1px #e8c9941c;
    transform-origin: center center;
    transition: transform 950ms cubic-bezier(.2, .8, .15, 1), opacity 850ms, filter 850ms, border-color .5s;
    will-change: transform;
    backface-visibility: hidden;
    text-decoration: none
}

.orbit-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.orbit-item[data-position="0"] {
    z-index: 5;
    transform: translate(-50%, -54%) translateZ(110px) scale(1.09);
    opacity: 1;
    filter: none;
    border-color: #f1d59eaa
}

.orbit-item[data-position="-1"] {
    z-index: 3;
    transform: translate(-137%, -49%) translateZ(-85px) rotateY(24deg) scale(.82);
    opacity: .82;
    filter: brightness(.73)
}

.orbit-item[data-position="1"] {
    z-index: 3;
    transform: translate(37%, -49%) translateZ(-85px) rotateY(-24deg) scale(.82);
    opacity: .82;
    filter: brightness(.73)
}

.orbit-item[data-position="-2"] {
    z-index: 2;
    transform: translate(-193%, -42%) translateZ(-210px) rotateY(34deg) scale(.65);
    opacity: .43;
    filter: brightness(.55)
}

.orbit-item[data-position="2"] {
    z-index: 2;
    transform: translate(92%, -42%) translateZ(-210px) rotateY(-34deg) scale(.65);
    opacity: .43;
    filter: brightness(.55)
}

.orbit-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    gap: 5px;
    padding: 25px 12px 15px;
    background: linear-gradient(transparent, #080706ed);
    color: #fff4e1;
    opacity: 0;
    transition: opacity .55s;
    text-align: center
}

.orbit-item[data-position="0"] .orbit-caption {
    opacity: 1
}

.orbit-caption strong {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.orbit-caption small {
    font-size: 11px;
    color: #e7c894
}

.orbit-controls {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: center;
    padding: 12px 0 0
}

.orbit-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #f1dcba;
    background: linear-gradient(135deg, #372b20, #16110c);
    border: 1px solid #c2a06d75;
    display: grid;
    place-items: center;
    font-size: 27px;
    cursor: pointer;
    transition: background .25s, transform .25s
}

.orbit-btn:hover {
    background: #74552c;
    transform: translateY(-2px)
}

.orbit-btn:focus-visible,
.orbit-item:focus-visible {
    outline: 2px solid #f4cf8b;
    outline-offset: 4px
}

.orbit-status {
    font-size: 12px;
    color: #e6ce9f;
    letter-spacing: .18em;
    min-width: 66px;
    text-align: center;
    font-variant-numeric: tabular-nums
}

@keyframes orbitGlow {
    to {
        opacity: .6;
        transform: rotateX(66deg) scale(1.08)
    }
}

.rank-section {
    background: linear-gradient(145deg, #13100d, #19140f) !important
}

.rank-layout {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: 22px;
    align-items: stretch
}

.rank-feature {
    min-height: 465px;
    border: 1px solid #ab86594d;
    border-radius: 20px;
    box-shadow: 0 18px 50px #0004
}

.rank-list {
    gap: 10px
}

.rank-row {
    min-height: 82px;
    padding: 10px 18px;
    background: linear-gradient(115deg, #252018, #171410) !important;
    border: 1px solid #ad8a5347 !important;
    border-radius: 14px;
    transition: transform .3s, border-color .3s, background .3s
}

.rank-row:hover {
    transform: translateX(4px);
    border-color: #d5af737c !important;
    background: #2c221a !important
}

.rank-num {
    font-size: 23px;
    font-weight: 850;
    color: #d3b079;
    width: 37px;
    flex-basis: 37px;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums
}

.rank-row img {
    height: 67px;
    width: 52px;
    border-radius: 8px;
    object-fit: cover
}

.rank-row h3 {
    font-size: 16px !important;
    margin: 0 0 7px;
    color: #fff0d6 !important;
    line-height: 1.4
}

.rank-row p {
    font-size: 12px !important;
    margin: 0;
    color: #c8bba6 !important;
    line-height: 1.6
}

.rank-link {
    margin-left: auto;
    flex: 0 0 auto;
    text-decoration: none;
    color: #f0d3a0 !important;
    padding: 7px 12px;
    border: 1px solid #b18b5a65;
    border-radius: 9px;
    font-size: 12px
}

.rank-link:hover {
    background: #e1b875;
    color: #251a0d !important
}

.leader-row {
    min-height: 153px;
    gap: 23px;
    background: linear-gradient(112deg, #231b14, #17120e) !important;
    border: 1px solid #a687564c !important;
    border-radius: 19px;
    padding: 18px 24px;
    transition: transform .3s, border-color .3s
}

.leader-row:hover {
    transform: translateY(-3px);
    border-color: #d2aa6f99 !important
}

.leader-index {
    font-size: 31px;
    color: #eac78d !important;
    font-variant-numeric: tabular-nums
}

.leader-row img {
    width: 80px;
    height: 110px;
    border-radius: 11px
}

.leader-row h2 {
    color: #ffefd5 !important;
    font-size: 19px;
    line-height: 1.4
}

.leader-row p {
    color: #c9bba7 !important;
    line-height: 1.8;
    font-size: 13px
}

.leader-row .mini-tag {
    color: #f1cb86 !important
}

.leader-end {
    color: #f4d5a2 !important;
    text-decoration: none;
    border: 1px solid #a886594f;
    border-radius: 10px;
    padding: 11px 14px;
    white-space: nowrap
}

.leader-end:hover {
    border-color: #e8c58b;
    background: #6e50212e
}

.media-skeleton {
    position: relative;
    isolation: isolate
}

.media-skeleton.is-loading:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 6;
    background: linear-gradient(100deg, #241d16 12%, #403322 38%, #241d16 62%);
    background-size: 210% 100%;
    animation: skeletonWave 1.55s linear infinite;
    pointer-events: none;
    border-radius: inherit
}

.rank-row.media-skeleton.is-loading:before,
.leader-row.media-skeleton.is-loading:before {
    inset: 10px auto 10px 58px;
    width: 57px;
    border-radius: 8px
}

@keyframes skeletonWave {
    to {
        background-position-x: -210%
    }
}

@media(max-width:980px) {
    .hero-visual.orbit-gallery {
        height: 440px !important
    }

    .orbit-stage {
        height: 380px
    }

    .rank-layout {
        grid-template-columns: 1fr
    }

    .rank-feature {
        min-height: 350px
    }
}

@media(max-width:600px) {
    .hero-visual.orbit-gallery {
        height: 365px !important;
        width: 100%;
        overflow: hidden
    }

    .orbit-stage {
        height: 310px;
        border-radius: 22px
    }

    .orbit-item {
        width: 41%;
        max-width: 152px;
        border-radius: 13px
    }

    .orbit-item[data-position="-1"] {
        transform: translate(-128%, -49%) translateZ(-65px) rotateY(18deg) scale(.82)
    }

    .orbit-item[data-position="1"] {
        transform: translate(28%, -49%) translateZ(-65px) rotateY(-18deg) scale(.82)
    }

    .orbit-item[data-position="-2"] {
        transform: translate(-166%, -42%) translateZ(-160px) rotateY(20deg) scale(.62)
    }

    .orbit-item[data-position="2"] {
        transform: translate(66%, -42%) translateZ(-160px) rotateY(-20deg) scale(.62)
    }

    .orbit-caption {
        padding: 22px 8px 11px
    }

    .orbit-caption strong {
        font-size: 12px
    }

    .orbit-controls {
        padding-top: 7px
    }

    .rank-row {
        padding: 10px;
        gap: 10px
    }

    .rank-num {
        font-size: 19px;
        width: 26px;
        flex-basis: 26px
    }

    .rank-row img {
        width: 46px;
        height: 63px
    }

    .rank-row h3 {
        font-size: 14px !important
    }

    .rank-row p {
        font-size: 11px !important;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .rank-link {
        padding: 6px 7px;
        font-size: 11px
    }

    .leader-row {
        padding: 12px;
        gap: 11px;
        min-height: 122px
    }

    .leader-index {
        width: 29px;
        font-size: 21px
    }

    .leader-row img {
        width: 56px;
        height: 81px
    }

    .leader-row h2 {
        font-size: 15px
    }

    .leader-row p {
        font-size: 11px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .leader-end {
        font-size: 0;
        padding: 7px
    }

    .leader-end:after {
        content: '›';
        font-size: 21px
    }

    .rank-row.media-skeleton.is-loading:before,
    .leader-row.media-skeleton.is-loading:before {
        inset: 10px auto 10px 45px;
        width: 46px
    }
}

@media(prefers-reduced-motion:reduce) {

    .orbit-halo,
    .media-skeleton.is-loading:before {
        animation: none !important
    }

    .orbit-item {
        transition: none !important
    }
}

/* Mobile posters: no hover playback UI on touch-sized screens */
@media (max-width: 767px) {

    .cover-wrap .cover-player,
    .cover-wrap .cinema-play,
    .cover-wrap .cinema-caption {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important
    }
}