@charset "UTF-8";
/* 作者：搭客佬 */
/* 官网： */

:root {
  --ink: #171a1e;
  --paper: #faf6ee;
  --cream: #f5ecdc;
  --gold: #e0a12c;
  --gold-soft: #f1bf59;
  --dark: #12161c;
  --muted: #706b63;
  --line: #ded5c7;
  --radius: 5px;
  --width: 1200px;
  --header: 70px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size: 15px; line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
section { scroll-margin-top: calc(var(--header) + 16px); }
.page-width { width: min(calc(100% - 48px), var(--width)); margin: 0 auto; }
.section-space { padding: 102px 0; }
.section-heading { max-width: 440px; }
.section-mark, .eyebrow { display: flex; align-items: center; gap: 9px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; }
.section-mark::before, .eyebrow::before { width: 25px; height: 2px; content: ""; background: currentColor; }
.section-heading h2, .progress-copy > h2, .archive-card h2 { margin-top: 11px; font-size: clamp(31px, 3vw, 42px); line-height: 1.15; letter-spacing: -0.04em; }
.section-heading > p:last-child { margin-top: 14px; color: var(--muted); }
.icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; }
.icon::before { width: 100%; height: 100%; content: ""; background: center / contain no-repeat; }
.icon-menu::before { background-image: url("../icons/menu.svg"); }.icon-close::before { background-image: url("../icons/close.svg"); }.icon-download::before { background-image: url("../icons/download.svg"); }.icon-plus::before { background-image: url("../icons/plus.svg"); }.icon-globe::before { background-image: url("../icons/globe.svg"); }

.site-header { position: fixed; z-index: 40; top: 0; right: 0; left: 0; height: var(--header); transform: translate3d(0, 0, 0); border-bottom: 1px solid var(--line); background: rgba(250,246,238,0.98); backface-visibility: hidden; }
.header-inner { display: grid; height: 100%; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: inline-flex; width: fit-content; align-items: center; gap: 9px; }.brand img { width: 37px; height: 37px; border-radius: var(--radius); object-fit: contain; }.brand-copy { display: grid; line-height: 1.12; }.brand-copy strong { font-size: 17px; }.brand-copy span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.primary-nav ul { display: flex; gap: 31px; align-items: center; }.primary-nav a { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; }.primary-nav a:hover { color: var(--gold); }.header-actions { display: flex; justify-content: flex-end; gap: 8px; }.header-download { display: inline-flex; min-height: 39px; align-items: center; padding: 0 15px; border-radius: var(--radius); color: var(--ink); background: var(--gold-soft); font-size: 13px; font-weight: 800; white-space: nowrap; }.menu-toggle { display: none; }

.hero { min-height: 700px; padding: calc(var(--header) + 65px) 0 62px; color: #fff; background: linear-gradient(110deg, #11161c 0%, #11161c 61%, #2a241b 100%); }.hero-layout { display: grid; min-height: 573px; grid-template-columns: 0.9fr 1.1fr; align-items: center; }.hero-copy { max-width: 510px; }.hero h1 { margin-top: 18px; font-size: clamp(49px, 5.5vw, 72px); line-height: 1.04; letter-spacing: -0.07em; }.hero-lead { margin-top: 20px; font-size: 21px; font-weight: 700; }.hero-text { max-width: 405px; margin-top: 13px; color: #d4d0c7; }.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; border-radius: var(--radius); font-size: 15px; font-weight: 800; white-space: nowrap; }.button-gold { margin-top: 26px; color: var(--ink); background: var(--gold-soft); }.button-gold:hover { background: #f6cd75; }.age-label { display: block; margin-top: 12px; color: #c9c5bb; font-size: 13px; }
.hero-device { position: relative; display: flex; min-height: 538px; align-items: center; justify-content: flex-end; }.phone-frame { overflow: hidden; padding: 10px; border-radius: 31px; background: #0b0d10; box-shadow: 0 22px 42px rgba(0,0,0,0.4); }.phone-frame img { width: 100%; height: auto; }.hero-device .phone-frame { width: 280px; }.today-card { position: absolute; z-index: 2; right: 193px; bottom: 54px; width: 234px; padding: 19px; border: 1px solid rgba(224,161,44,0.8); border-radius: var(--radius); background: #171c23; color: #fff; }.today-card h2 { color: var(--gold-soft); font-size: 19px; }.today-card ul { margin-top: 10px; border-top: 1px solid #41464c; }.today-card li { display: flex; gap: 18px; padding: 9px 0; border-bottom: 1px solid #41464c; font-size: 13px; }.today-card time { color: var(--gold-soft); font-weight: 800; }

.playlist-section { padding: 101px 0; background: #fffdf9; }.playlist-layout { display: grid; grid-template-columns: 0.32fr 1fr; gap: 46px; align-items: start; }.playlist-board { display: grid; grid-template-columns: 1fr 183px; gap: 18px; }.playlist-board ol { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.playlist-board li { display: grid; min-height: 88px; grid-template-columns: 62px 88px 1fr auto; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }.playlist-board li:last-child { border-bottom: 0; }.playlist-board strong { color: #d6d1c8; font-size: 30px; line-height: 1; }.playlist-board li > span { color: var(--gold); font-size: 13px; font-weight: 700; }.playlist-board h3 { font-size: 16px; }.playlist-board p { margin-top: 3px; color: var(--muted); font-size: 13px; }.playlist-board em { padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: 12px; font-style: normal; white-space: nowrap; }.playlist-stills { display: grid; gap: 8px; }.playlist-stills img { width: 100%; height: 91px; border-radius: var(--radius); object-fit: cover; }

.progress-section { padding: 94px 0; color: #fff; background: var(--dark); }.progress-section .section-mark { color: var(--gold-soft); }.progress-layout { display: grid; grid-template-columns: 1fr 0.46fr; gap: 100px; align-items: center; }.progress-lead { margin-top: 13px; color: #d2cabe; font-size: 18px; font-weight: 700; }.progress-board { margin-top: 28px; padding: 19px; border: 1px solid #3a414a; border-radius: var(--radius); }.progress-board article { display: grid; grid-template-columns: 76px 1fr 124px 1.7fr 42px; gap: 11px; align-items: center; min-height: 48px; border-left: 2px solid var(--gold); padding-left: 13px; }.progress-board time { color: #c7c0b6; font-size: 12px; }.progress-board h3 { font-size: 14px; }.progress-board span { color: #c7c0b6; font-size: 12px; }.progress-board b, .archive-progress b { display: block; height: 6px; overflow: hidden; border-radius: 4px; background: #454a50; }.progress-board b i, .archive-progress b i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }.progress-board em { color: var(--gold-soft); font-size: 12px; font-style: normal; }.progress-phone { display: flex; justify-content: center; }.progress-phone .phone-frame { width: 235px; }

.screens-section { background: var(--paper); }.screen-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 39px; }.screen-grid figure > div { display: flex; aspect-ratio: 9 / 16; align-items: center; justify-content: center; overflow: hidden; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.screen-grid img { width: 100%; height: 100%; object-fit: contain; }.screen-grid figcaption { padding: 11px 3px 0; }.screen-grid h3 { font-size: 15px; }.screen-grid p { margin-top: 2px; color: var(--muted); font-size: 12px; }

.archive-section { background: #fffdf9; }.archive-layout { display: grid; grid-template-columns: 0.5fr 1fr; gap: 70px; align-items: center; }.archive-phone { display: flex; justify-content: center; }.archive-phone .phone-frame { width: 250px; }.archive-card { padding: 35px; border: 1px solid var(--line); border-radius: var(--radius); background: #f7f1e5; }.archive-card h3 { margin-top: 25px; font-size: 22px; }.archive-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.archive-tags span { padding: 5px 10px; border-radius: var(--radius); color: #6b5017; background: #f2d28d; font-size: 12px; font-weight: 700; }.archive-card > p { max-width: 520px; margin-top: 17px; color: var(--muted); }.archive-progress { display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; align-items: center; margin-top: 26px; }.archive-progress span, .archive-progress em { font-size: 13px; font-style: normal; }.archive-progress b i { width: 28%; }

.faq-section { background: #fff; }.faq-list { width: min(100%, 820px); margin: 33px auto 0; }.faq-list details, .official-section details { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius); }.faq-list summary, .official-section summary { display: flex; align-items: center; justify-content: space-between; gap: 17px; padding: 16px; font-weight: 700; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker, .official-section summary::-webkit-details-marker { display: none; }.faq-list details p { padding: 0 16px 16px; color: var(--muted); }.faq-list details[open] .icon-plus::before, .official-section details[open] .icon-plus::before { background-image: url("../icons/minus.svg"); }.official-section { padding: 0 0 85px; background: #fff; }.official-section .section-mark { margin-bottom: 13px; }.official-section details { margin-top: 0; border-color: var(--ink); }.official-section h2 { flex: 1; font-size: 15px; }.official-section summary > .icon:first-child { width: 17px; height: 17px; }.official-section details p { padding: 0 16px 16px 50px; }.official-section details a { color: var(--gold); text-decoration: underline; }

.reviews-section { background: #f5ecdc; }.review-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-top: 38px; }.review-grid article { padding: 17px; border: 1px solid #e5d8c2; border-radius: var(--radius); background: rgba(255,255,255,0.6); }.review-grid article > div { display: flex; gap: 7px; align-items: center; }.review-grid article div > span:first-child { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #fff; background: #3b3d40; font-size: 12px; }.review-grid strong { font-size: 13px; }.review-grid b { color: var(--gold); font-size: 13px; letter-spacing: 1px; }.review-grid time { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }.review-grid article > p { margin-top: 13px; color: #504b44; font-size: 14px; line-height: 1.75; }

.download-section { padding: 51px 0; background: var(--paper); }.ticket { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 31px 46px; border-top: 1px dashed #ad9468; border-bottom: 1px dashed #ad9468; background: #fff8e8; }.ticket h2 { margin-top: 9px; font-size: clamp(29px,3vw,39px); line-height: 1.18; }.ticket p:last-child { margin-top: 9px; color: var(--muted); }.ticket .button { margin: 0; }.site-footer { padding: 39px 0 17px; color: #fff; background: #11151a; }.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 70px; }.site-footer .brand-copy span { color: #aaa59d; }.footer-links { display: grid; grid-template-columns: repeat(2,130px); gap: 42px; }.footer-links div { display: grid; gap: 5px; }.footer-links h2 { margin-bottom: 4px; font-size: 14px; }.footer-links a { color: #c8c2b9; font-size: 13px; }.site-footer > p { width: min(calc(100% - 48px),var(--width)); padding-top: 17px; margin: 28px auto 0; border-top: 1px solid rgba(255,255,255,0.65); color: #a8a49d; font-size: 12px; text-align: center; }

@media (max-width: 900px) { .primary-nav ul { gap: 19px; }.today-card { right: 165px; }.playlist-layout { grid-template-columns: 0.28fr 1fr; gap: 25px; }.progress-layout { gap: 55px; } }
@media (max-width: 720px) { :root { --header: 59px; } body { font-size: 14px; }.page-width, .header-inner { width: min(calc(100% - 28px),var(--width)); }.section-space { padding: 67px 0; }.section-heading h2, .progress-copy > h2, .archive-card h2 { font-size: 30px; }.header-inner { display: flex; justify-content: space-between; }.brand img { width: 30px; height: 30px; }.brand-copy strong { font-size: 16px; }.brand-copy span { display: none; }.primary-nav { position: fixed; top: var(--header); right: 14px; left: 14px; display: none; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 12px 24px rgba(0,0,0,0.16); }.primary-nav.is-open { display: block; }.primary-nav ul { display: grid; gap: 0; }.primary-nav li + li { border-top: 1px solid var(--line); }.primary-nav a { padding: 10px 8px; }.header-download { min-height: 36px; padding: 0 10px; font-size: 12px; }.menu-toggle { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--ink); border-radius: var(--radius); background: transparent; }.hero { min-height: 0; padding: calc(var(--header) + 49px) 0 53px; }.hero-layout { display: block; }.hero-copy { max-width: none; text-align: center; }.eyebrow { justify-content: center; }.hero h1 { margin-top: 14px; font-size: 44px; }.hero-lead { margin-top: 15px; font-size: 19px; }.hero-text { margin: 10px auto 0; }.hero-device { min-height: 500px; margin-top: 34px; justify-content: center; }.hero-device .phone-frame { width: min(259px,72vw); }.today-card { right: auto; bottom: 36px; left: 0; width: min(237px,69vw); padding: 17px; }.playlist-section { padding: 67px 0; }.playlist-layout { display: block; }.playlist-board { grid-template-columns: 1fr; margin-top: 28px; }.playlist-board li { min-height: 0; grid-template-columns: 42px 1fr auto; gap: 8px; }.playlist-board li > span { grid-column: 2; }.playlist-board li > div { grid-column: 2; }.playlist-board li > em { grid-column: 3; grid-row: 1 / span 2; }.playlist-stills { display: none; }.progress-layout, .archive-layout { display: block; }.progress-phone { margin-top: 35px; }.progress-board article { grid-template-columns: 55px 1fr; gap: 5px; padding: 9px 0 9px 9px; }.progress-board span { grid-column: 2; }.progress-board b { grid-column: 1 / -1; }.progress-board em { grid-column: 2; text-align: right; }.screen-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 28px; }.screen-grid figcaption { padding-top: 8px; }.screen-grid p { display: none; }.archive-phone { margin-bottom: 35px; }.archive-card { padding: 24px; }.archive-progress { grid-template-columns: auto auto; }.archive-progress b { grid-column: 1 / span 2; }.archive-progress em { grid-column: 2; grid-row: 2; text-align: right; }.faq-list { margin-top: 27px; }.official-section { padding-bottom: 67px; }.review-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }.ticket { display: grid; justify-items: center; padding: 28px; text-align: center; }.ticket .section-mark { justify-content: center; }.ticket .button { width: min(100%,260px); }.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }.footer-links { width: min(100%,280px); grid-template-columns: repeat(2,minmax(110px,1fr)); justify-content: center; justify-items: center; text-align: center; }.footer-links div { justify-items: center; }.footer-links a, .footer-links h2 { width: 100%; text-align: center; }.site-footer > p { width: min(calc(100% - 28px),var(--width)); } }