:root{color-scheme:dark;--bg:#000;--deep:#0a0a0a;--surface:#111;--surface2:#1a1a1a;--surface3:#222;--text:#fff;--copy:#e8e8e8;--muted:#b0b0b0;--dim:#777;--line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.35);--shadow:0 16px 48px rgba(0,0,0,.7);--content:1280px;--page-x:clamp(16px,3vw,36px);--header-h:76px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
body{margin:0;min-width:0;overflow-x:clip;background:var(--bg);color:var(--copy);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;font-size:15px;line-height:1.78;-webkit-font-smoothing:antialiased}
body.panel-open{overflow:hidden}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
a:where(:hover){color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:4px}
img{display:block;max-width:100%;height:auto}
svg{flex:none}
h1,h2,h3,h4,p,figure{margin:0}
strong{font-weight:700}
[hidden]{display:none!important}
.container{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--page-x);min-width:0}
.skip-link{position:fixed;top:-100px;left:12px;z-index:400;background:#fff;color:#000;padding:10px 18px;border-radius:8px}
.skip-link:focus{top:10px}
.overline,.eyebrow{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;line-height:1.6;color:#bdbdbd}
.eyebrow{display:inline-block;color:#dedede}
section{min-width:0}
.section{padding-block:85px}
.section-soft{background:var(--deep)}
.section-dark{background:var(--surface)}
.section-compact{padding-block:66px}
.section-heading{margin-bottom:30px}
.section-heading-top{display:flex;align-items:center;gap:20px;margin-bottom:11px}
.tiny-rule{flex:1;height:1px;background:var(--line)}
.section-title-row{display:flex;justify-content:space-between;align-items:end;gap:30px}
.section-title-row h2{font-size:clamp(28px,3.35vw,45px);color:var(--text);letter-spacing:-.045em;line-height:1.2}
.section-title-row p{max-width:520px;color:var(--muted);font-size:14px;line-height:1.75}
.text-link{display:inline-flex;align-items:center;gap:11px;margin-top:20px;color:#fff;font-weight:700;font-size:13px;text-decoration:underline;text-decoration-color:#666;text-underline-offset:6px;transition:text-decoration-color .2s}
.text-link:hover{text-decoration-color:#fff}
.text-link span{font-weight:400;text-decoration:none}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:48px;padding:12px 23px;border-radius:999px;border:1px solid var(--line-strong);font-weight:700;font-size:13px;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:#fff;color:#000;border-color:#fff}
.btn-solid:hover{background:#d9d9d9;color:#000}
.btn-outline{color:#fff;background:transparent}
.btn-outline:hover{background:#222}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.card-number{font-family:Georgia,'Times New Roman',serif;font-size:14px;letter-spacing:.1em;color:#b2b2b2}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border-radius:30px;border:1px solid var(--line);color:#bbb;font-size:12px;line-height:1.4}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:#fff}

/* 全宽固定顶部导航；背景与内层容器不共享宽度限制 */
.site-header{position:sticky;top:0;z-index:80;height:var(--header-h);width:100vw;background:rgba(0,0,0,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.header-inner{height:100%;display:flex;align-items:center;gap:clamp(18px,2.5vw,36px);min-width:0}
.header-brand,.footer-logo,.panel-brand{display:flex;align-items:center;flex:none;line-height:1}
.header-brand{min-width:128px}
.wordmark{display:inline-flex;align-items:baseline;gap:5px;color:#fff;white-space:nowrap;letter-spacing:-.075em}
.wordmark-numeric{font-family:Arial,Helvetica,sans-serif;font-size:37px;font-weight:900;line-height:.95;letter-spacing:-.1em}
.wordmark-cn{font-size:21px;font-weight:800;letter-spacing:-.06em}
.site-logo-image{display:block;width:auto;max-width:154px;max-height:48px;height:auto;object-fit:contain;object-position:left center;background:none;border:0;border-radius:0}
.desktop-main-nav{display:flex;gap:clamp(12px,1.4vw,26px);align-items:center;min-width:0;flex:1}
.desktop-main-nav a{position:relative;font-size:13px;font-weight:600;color:#b6b6b6;padding-block:25px;white-space:nowrap}
.desktop-main-nav a:hover,.desktop-main-nav .is-current{color:#fff}
.desktop-main-nav .is-current::after{content:'';position:absolute;bottom:14px;left:0;right:0;height:2px;background:#fff;border-radius:3px}
.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.icon-button{display:inline-flex;justify-content:center;align-items:center;width:44px;height:44px;border:0;background:transparent;color:#fff;border-radius:50%}
.icon-button:hover,.icon-button:focus-visible{background:#242424}
.hamburger{display:flex;width:19px;flex-direction:column;gap:4px}
.hamburger b{display:block;width:19px;height:1.6px;background:#fff;border-radius:2px}
.hamburger b:nth-child(2){width:14px}
.header-text-action{font-size:13px;font-weight:700;padding:10px 8px}
.app-header-link{display:inline-flex;justify-content:center;align-items:center;gap:12px;border-radius:24px;background:#fff;color:#000;min-width:94px;height:44px;padding:8px 14px;font-size:13px;font-weight:800;white-space:nowrap}
.app-header-link:hover,.app-header-link.is-app-current{background:#dedede;color:#000}
.mobile-menu-button{display:none}

/* 主站全屏菜单、遮罩和轻量站内搜索 */
.panel-overlay{position:fixed;inset:0;z-index:90;display:block;background:rgba(0,0,0,.76);border:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .23s,visibility .23s}
.panel-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}
.channel-panel{position:fixed;right:0;top:0;bottom:0;z-index:101;width:min(460px,88vw);display:flex;flex-direction:column;background:#0b0b0b;border-left:1px solid var(--line-strong);box-shadow:var(--shadow);visibility:hidden;pointer-events:none;transform:translateX(101%);transition:transform .3s ease,visibility .3s}
.channel-panel.is-open{visibility:visible;pointer-events:auto;transform:translateX(0)}
.panel-title{display:flex;justify-content:space-between;align-items:center;padding:21px 23px 18px;border-bottom:1px solid var(--line);min-height:83px}
.panel-brand{gap:13px}
.panel-brand .site-logo-image{max-width:94px;max-height:36px}
.panel-brand .wordmark-numeric{font-size:28px}
.panel-brand .wordmark-cn{font-size:15px}
.panel-brand strong{font-size:15px;letter-spacing:-.04em}
.panel-close{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;color:#fff;font-size:29px;line-height:1}
.panel-close:hover{background:#222}
.panel-scroll{overflow-y:auto;overscroll-behavior:contain;padding:24px;min-height:0}
.panel-intro{font-size:13px;color:#bdbdbd;margin-bottom:28px;line-height:1.9}
.panel-group{margin-bottom:30px}
.panel-group h2{font-size:11px;font-weight:800;letter-spacing:.15em;color:#8c8c8c;margin-bottom:7px}
.panel-channel{display:flex;gap:14px;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.panel-channel strong,.panel-channel small{display:block}
.panel-channel strong{color:#fff;font-size:15px;margin-bottom:3px}
.panel-channel small{font-size:11px;color:#929292;line-height:1.6}
.panel-arrow{align-self:center;font-size:16px;color:#a8a8a8}
.panel-channel:hover .panel-arrow{transform:translate(2px,-2px)}
.search-panel{position:fixed;top:var(--header-h);left:0;right:0;z-index:101;background:#080808;border-bottom:1px solid var(--line-strong);max-height:calc(100dvh - var(--header-h));overflow-y:auto;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-15px);transition:opacity .2s,transform .2s,visibility .2s}
.search-panel.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}
.search-inner{padding-top:28px;padding-bottom:38px}
.search-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}
.search-panel label{display:block;color:#fff;font-size:clamp(27px,3vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.2;margin-bottom:18px}
.search-input-wrap{height:62px;background:#151515;border:1px solid #4f4f4f;border-radius:14px;padding:0 20px;display:flex;gap:16px;align-items:center}
.search-input-wrap:focus-within{border-color:#fff}
.search-input-wrap input{height:100%;flex:1;min-width:0;border:0;outline:none;background:transparent;color:#fff;font-size:16px}
.search-input-wrap input::placeholder{color:#888}
.search-hint{font-size:12px;color:#9a9a9a;margin:12px 0 20px}
.search-suggestions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.search-suggestions>span{font-size:12px;color:#999;margin-right:6px}
.search-suggestions button{border:1px solid var(--line);background:#151515;color:#e7e7e7;border-radius:99px;font-size:12px;padding:6px 12px}
.search-suggestions button:hover{border-color:#fff}
.search-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.search-results a{display:flex;align-items:center;justify-content:space-between;min-height:55px;padding:12px 16px;background:#111;border:1px solid var(--line);border-radius:9px;font-size:13px;font-weight:600}
.search-results a:hover{background:#222;border-color:#888}
.search-results a>span:last-child{color:#bbb}
.search-empty{padding:18px 0;color:#bbb}
.mobile-dock{display:none}

/* 可选根目录 WebP：真实文件不存在时使用纯 CSS 编辑封面 */
.site-media{position:relative;width:100%;min-width:0;overflow:hidden;background:#111;border:1px solid var(--line);border-radius:15px;isolation:isolate}
.media-banner{aspect-ratio:1.30}.media-wide{aspect-ratio:1.52}.media-landscape{aspect-ratio:1.42}.media-square{aspect-ratio:1}.media-portrait{aspect-ratio:.77}.media-app{aspect-ratio:1.14}
.site-media img{width:100%;height:100%;object-fit:contain;object-position:center;background:#0e0e0e}
.media-art{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;justify-content:end;align-items:flex-start;padding:clamp(23px,4.5vw,55px);background:radial-gradient(ellipse 80% 65% at 76% 31%,#292929 0%,#111 52%,#080808 100%)}
.media-art::after{content:'';position:absolute;inset:0;background:linear-gradient(15deg,rgba(0,0,0,.78) 0%,transparent 62%);pointer-events:none}
.media-art::before{content:'';position:absolute;right:-7%;top:-15%;width:54%;height:130%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.055) 35.4%,transparent 35.9%,transparent 62%,rgba(255,255,255,.04) 62.4%,transparent 63%);transform:rotate(10deg)}
.media-art-ring{position:absolute;z-index:0;width:66%;aspect-ratio:1;right:-3%;top:-18%;border:1px solid rgba(255,255,255,.21);border-radius:50%;box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 92px rgba(255,255,255,.025),0 0 0 152px rgba(255,255,255,.018)}
.media-art>*:not(.media-art-ring){position:relative;z-index:1}
.media-art-top{position:absolute!important;left:clamp(23px,4.5vw,55px);top:clamp(20px,3vw,33px);font-size:14px;letter-spacing:-.05em;color:#fff;font-weight:900}
.media-art-top i{font-size:10px;font-style:normal;font-weight:500;letter-spacing:.2em;margin-left:3px}
.media-art strong{font-size:clamp(33px,5.2vw,76px);font-weight:800;letter-spacing:-.075em;line-height:1.04;color:#fff;max-width:95%;text-wrap:balance}
.media-art small{font-size:10px;letter-spacing:.24em;margin-top:15px;color:#d3d3d3}
.media-portrait .media-art strong,.media-square .media-art strong{font-size:clamp(26px,3vw,45px)}
.media-portrait .media-art-ring{width:115%;right:-43%;top:12%}
.media-app .media-art-ring{width:48%;right:0;top:0}

/* 首页 */
.home-hero{padding:35px 0 48px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.68fr) minmax(310px,.92fr);gap:34px;align-items:stretch}
.hero-media{min-width:0}
.hero-media .site-media{height:100%;min-height:555px;aspect-ratio:auto;border-radius:17px}
.hero-media .media-art strong{font-size:clamp(56px,6vw,94px);letter-spacing:-.09em}
.hero-copy{display:flex;flex-direction:column;padding:14px 0 7px;min-width:0}
.hero-copy h1{font-size:clamp(34px,3.7vw,53px);line-height:1.13;color:#fff;letter-spacing:-.065em;margin:15px 0 20px;text-wrap:balance}
.hero-copy>p{font-size:14px;color:#bcbcbc;line-height:2;margin-bottom:25px}
.hero-rec-list{margin-top:auto;border-top:1px solid var(--line);padding-top:17px}
.hero-rec-title{font-size:10px;letter-spacing:.2em;color:#858585;margin-bottom:6px}
.hero-rec{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding:12px 0;align-items:center}
.hero-rec span{color:#ddd;font-size:13px;font-weight:650}
.hero-rec small{font-size:11px;color:#9b9b9b}
.hero-rec:hover span{color:#fff}
.quickbar{border-bottom:1px solid var(--line);background:#070707}
.quickbar-inner{display:flex;align-items:center;gap:23px;min-height:72px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#333 transparent;overscroll-behavior-x:contain}
.quickbar-title{flex:none;font-size:10px;font-weight:800;letter-spacing:.14em;color:#888}
.quickbar a{flex:none;white-space:nowrap;font-size:12px;font-weight:700;color:#c3c3c3;padding:6px 0;border-bottom:1px solid transparent}
.quickbar a:hover{color:#fff;border-color:#fff}
.inspiration-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.inspiration-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:170px;padding:24px;background:#101010;border:1px solid var(--line);border-radius:14px;transition:background .2s,border-color .2s}
.inspiration-card:hover{background:#1b1b1b;border-color:#7a7a7a}
.inspiration-card h3{font-size:19px;color:#fff;letter-spacing:-.03em;margin-bottom:9px}
.inspiration-card p{color:#a7a7a7;font-size:12px;line-height:1.8}
.inspiration-card span{align-self:end;color:#eee;font-size:17px}
.editor-pick{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:26px}
.pick-feature{background:#121212;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pick-feature .site-media{border:0;border-radius:0;aspect-ratio:1.8}
.pick-feature-copy{padding:25px 28px 30px}
.pick-feature h3{font-size:clamp(22px,2.4vw,30px);color:#fff;letter-spacing:-.04em;line-height:1.35;margin:9px 0 13px}
.pick-feature p{color:#b2b2b2;font-size:13px;line-height:1.92;margin:8px 0}
.pick-feature .recommend-reason{padding-top:12px;margin-top:13px;border-top:1px solid var(--line);color:#dedede}
.pick-list{border-top:1px solid var(--line)}
.pick-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:13px;padding:19px 3px;border-bottom:1px solid var(--line)}
.pick-item h3{color:#fff;font-size:16px;margin-bottom:7px}
.pick-item p{color:#a8a8a8;font-size:12px;line-height:1.85}
.portrait-rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}
.portrait-card{display:flex;flex-direction:column;justify-content:space-between;min-height:228px;padding:18px;background:linear-gradient(165deg,#252525,#0b0b0b 75%);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.portrait-card:nth-child(2n){background:linear-gradient(165deg,#333,#0b0b0b 80%)}
.portrait-card .portrait-n{font-family:Georgia,serif;color:#666;font-size:48px;line-height:1}
.portrait-card h3{font-size:15px;color:#fff;line-height:1.3;margin-bottom:8px}
.portrait-card p{font-size:11px;color:#bababa;line-height:1.75}
.film-feature{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:30px;align-items:center}
.film-feature .site-media{aspect-ratio:1.45}
.film-feature-text h3{font-size:clamp(25px,2.6vw,37px);color:#fff;letter-spacing:-.05em;margin:13px 0 14px;line-height:1.3}
.film-feature-text p{color:#b8b8b8;line-height:1.95;font-size:14px}
.micro-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:19px}
.micro-card{border:1px solid var(--line);border-radius:12px;padding:22px;min-height:140px;background:#111}
.micro-card h3{font-size:16px;color:#fff;margin:6px 0 9px}
.micro-card p{font-size:12px;color:#a8a8a8;line-height:1.7}
.vertical-catalogue{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.vertical-item{padding:27px 23px;min-height:175px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.vertical-item h3{font-size:21px;color:#fff;margin:12px 0 10px;letter-spacing:-.04em}
.vertical-item p{font-size:13px;color:#aaa;line-height:1.8}
.series-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.series-card{padding:28px;min-height:225px;border:1px solid #484848;border-radius:14px;display:flex;flex-direction:column;justify-content:space-between;background:#0a0a0a}
.series-card h3{font-size:22px;color:#fff;letter-spacing:-.04em}
.series-card p{font-size:13px;line-height:1.9;color:#adadad;margin-top:13px}
.magazine-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;grid-auto-rows:minmax(160px,auto);gap:11px}
.magazine-grid article{border:1px solid var(--line);background:#151515;border-radius:13px;padding:24px;display:flex;flex-direction:column;justify-content:end;min-width:0}
.magazine-grid article:first-child{grid-row:span 2;background:linear-gradient(145deg,#252525,#070707);min-height:340px}
.magazine-grid h3{font-size:22px;letter-spacing:-.045em;color:#fff;margin:10px 0}
.magazine-grid p{font-size:12px;color:#b2b2b2}
.theme-lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.theme-lanes a{display:flex;flex-direction:column;justify-content:space-between;min-height:170px;background:#181818;padding:21px;border:1px solid var(--line);border-radius:12px}
.theme-lanes a:hover{border-color:#999;background:#232323}
.theme-lanes strong{font-size:19px;color:#fff}
.theme-lanes span{font-size:12px;color:#aaa;line-height:1.8}
.theme-lanes small{color:#ddd;align-self:end}
.playlist-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.playlist-card{background:#111;border:1px solid var(--line);border-radius:12px;padding:20px;min-height:195px;display:flex;flex-direction:column}
.playlist-card .playlist-symbol{font-size:33px;line-height:1;color:#d2d2d2;font-family:Georgia,serif}
.playlist-card h3{font-size:18px;color:#fff;margin:17px 0 9px}
.playlist-card p{font-size:12px;color:#9f9f9f;line-height:1.85}
.ranking-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.ranking-list a{display:flex;align-items:start;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.ranking-list .rank-n{font-family:Georgia,serif;font-size:44px;color:#666;line-height:1;min-width:53px}
.ranking-list h3{font-size:17px;color:#fff;line-height:1.4;margin-bottom:7px}
.ranking-list p{font-size:12px;color:#a4a4a4;line-height:1.8}
.plan-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
.plan-step{position:relative;border-top:2px solid #aaa;padding:19px 10px 0 0;min-height:145px}
.plan-step::before{content:'';position:absolute;top:-6px;left:0;width:9px;height:9px;border-radius:50%;background:#fff}
.plan-step strong{font-size:16px;color:#fff;display:block;margin-bottom:7px}
.plan-step p{color:#aaa;font-size:12px;line-height:1.85}
.plan-step small{font-size:11px;color:#ddd}
.opinion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opinion-card{background:#111;border:1px solid var(--line);border-radius:12px;padding:24px 26px}
.opinion-card:last-child:nth-child(odd){grid-column:1/-1}
.opinion-card h3{color:#fff;font-size:21px;letter-spacing:-.035em;margin:7px 0 12px}
.opinion-card p{font-size:13px;color:#adadad;line-height:1.9}
.explore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.explore-card{padding:25px;border:1px solid var(--line);border-radius:13px;min-height:181px;background:linear-gradient(150deg,#191919,#0b0b0b)}
.explore-card h3{font-size:19px;color:#fff;margin:9px 0}
.explore-card p{font-size:12px;color:#aaa;line-height:1.9}
.app-home-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:55px}
.app-home-grid .site-media{aspect-ratio:1.08}
.app-home-copy h2{font-size:clamp(29px,3.3vw,43px);line-height:1.25;letter-spacing:-.05em;color:#fff;margin:12px 0 18px}
.app-home-copy p{color:#b6b6b6;line-height:2;margin-bottom:17px;font-size:14px}
.info-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.info-panel{padding:31px;border:1px solid var(--line);border-radius:14px;background:#111}
.info-panel h3{font-size:23px;line-height:1.35;color:#fff;margin:12px 0 17px}
.info-panel p{font-size:13px;color:#b3b3b3;line-height:1.95;margin:12px 0}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);padding:17px 0}
.faq-list summary{list-style:none;cursor:pointer;color:#fff;font-size:16px;font-weight:700;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';font-size:22px;font-weight:300;color:#ddd}
.faq-list details[open] summary::after{content:'−'}
.faq-list details p{color:#b5b5b5;font-size:13px;line-height:2;padding:12px 45px 8px 0;max-width:920px}
.brand-statement{padding:clamp(35px,5vw,68px);border:1px solid var(--line);border-radius:15px;background:radial-gradient(circle at 100% 0,#222 0,transparent 45%),#101010}
.brand-statement .large-label{font-size:clamp(57px,12vw,165px);line-height:.95;color:#fff;font-weight:900;letter-spacing:-.12em;opacity:.15;white-space:nowrap}
.brand-statement h2{font-size:clamp(26px,3.5vw,46px);color:#fff;margin:22px 0;letter-spacing:-.06em}
.brand-statement p{max-width:960px;font-size:14px;color:#bbb;line-height:2;margin:12px 0}

/* 内页：信息密度、分层节奏与不同栏目编排 */
.page-top{padding:30px 0 44px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#080808,#111 64%,#080808)}
.breadcrumbs{display:flex;gap:10px;align-items:center;font-size:12px;color:#818181;margin-bottom:48px}
.breadcrumbs a:hover{color:#fff}
.page-top-inner{display:grid;grid-template-columns:minmax(0,1fr) 185px;align-items:end;gap:25px}
.page-top h1{font-size:clamp(43px,7vw,88px);letter-spacing:-.085em;line-height:1.12;color:#fff;margin:11px 0 20px}
.page-lead{max-width:825px;font-size:clamp(14px,1.6vw,17px);color:#b9b9b9;line-height:2}
.page-index{text-align:right;font-size:125px;color:#262626;font-weight:900;letter-spacing:-.13em;line-height:.9}
.page-index span{display:block;font-size:9px;letter-spacing:.19em;color:#898989;font-weight:600;white-space:nowrap;margin-top:15px}
.body-copy{font-size:14px;color:#bcbcbc;line-height:2}
.body-copy p+p{margin-top:13px}
.lead-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:40px;align-items:center}
.lead-feature-media{min-width:0}
.lead-feature-media .site-media{aspect-ratio:1.38}
.lead-feature-copy h2{font-size:clamp(28px,3.3vw,47px);line-height:1.19;letter-spacing:-.05em;color:#fff;margin:12px 0 19px}
.lead-feature-copy p{font-size:14px;color:#b8b8b8;line-height:2;margin:13px 0}
.lead-feature-copy .text-link{margin-top:14px}
.lead-feature.is-reversed .lead-feature-media{order:2}
.type-poster{min-height:390px;background:radial-gradient(ellipse at 80% 0%,#333,#0d0d0d 66%);border:1px solid var(--line);border-radius:14px;padding:38px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.type-poster span{font-size:12px;font-weight:800;letter-spacing:.19em}
.type-poster strong{font-size:clamp(42px,5vw,76px);line-height:1.05;letter-spacing:-.09em;color:#fff}
.type-poster small{letter-spacing:.18em;font-size:10px;color:#999}
.issue-grid,.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.issue-card,.feature-card{padding:29px;background:#121212;border:1px solid var(--line);border-radius:13px;min-height:234px;display:flex;flex-direction:column;align-items:flex-start}
.issue-card h3,.feature-card h3{font-size:21px;letter-spacing:-.045em;color:#fff;line-height:1.34;margin:12px 0}
.issue-card p,.feature-card p{font-size:13px;color:#b5b5b5;line-height:1.9}
.issue-card .text-link{margin-top:auto;padding-top:19px;font-size:12px}
.feature-card{min-height:215px}
.feature-card .overline{font-size:10px}
.reading-note{display:grid;grid-template-columns:120px minmax(0,1fr);gap:23px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reading-note span{color:#fff;font-size:13px;font-weight:800}
.reading-note p{font-size:13px;color:#aaa;line-height:2}
.article-list{border-top:1px solid var(--line)}
.article-list article{display:grid;grid-template-columns:65px minmax(0,1fr) minmax(0,1.3fr);gap:20px;padding:25px 0;border-bottom:1px solid var(--line);align-items:start}
.article-list h3{font-size:22px;line-height:1.3;color:#fff;letter-spacing:-.05em}
.article-list p{color:#aaa;font-size:13px;line-height:1.9}
.article-list .card-number{font-size:24px}
.atlas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.atlas-card{background:#121212;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.atlas-card .site-media{border:0;border-radius:0;aspect-ratio:2.0}
.atlas-card-body{padding:26px}
.atlas-card-body h3{font-size:24px;color:#fff;letter-spacing:-.045em;margin:10px 0}
.atlas-card-body p{font-size:13px;line-height:1.95;color:#b1b1b1}
.steps-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.steps-list article{padding:29px 30px;background:#101010;border-left:2px solid #8c8c8c;min-height:205px}
.steps-list h3{font-size:20px;color:#fff;margin:12px 0}
.steps-list p{font-size:13px;color:#b0b0b0;line-height:1.95}
.quote-wall{padding:48px clamp(26px,5vw,65px);border-top:1px solid #444;border-bottom:1px solid #444;background:linear-gradient(90deg,#141414,#080808)}
.quote-wall blockquote{font-size:clamp(24px,3.5vw,45px);color:#fff;letter-spacing:-.05em;font-weight:750;line-height:1.55;max-width:930px;margin:18px 0}
.quote-wall p{color:#aaa;font-size:13px;line-height:1.9;max-width:890px}
.related-band{padding:59px 0 75px;background:#111;border-top:1px solid var(--line)}
.related-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
.related-inner h2{font-size:clamp(26px,3vw,37px);color:#fff;letter-spacing:-.04em}
.related-links{display:flex;flex-wrap:wrap;gap:9px}
.related-link{border:1px solid #444;padding:11px 16px;border-radius:100px;font-size:12px;font-weight:700;white-space:nowrap}
.related-link:hover{background:#fff;color:#000}
.taxonomy{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.taxonomy a{padding:8px 13px;border:1px solid #393939;border-radius:99px;color:#ccc;font-size:12px}
.taxonomy a:hover{background:#fff;color:#000}
.editorial-essay{max-width:860px;margin:auto;padding:6px 0}
.editorial-essay h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.04em;color:#fff;margin:30px 0 14px}
.editorial-essay p{font-size:15px;line-height:2.08;color:#bababa;margin-bottom:17px}
.editorial-essay .drop-cap::first-letter{font-size:44px;color:#fff;font-weight:800;float:left;line-height:1.1;margin:5px 9px 0 0}
.stacked-guide{border-top:1px solid var(--line)}
.stacked-guide article{padding:24px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:185px minmax(0,1fr);gap:30px}
.stacked-guide h3{font-size:19px;color:#fff}
.stacked-guide p{font-size:14px;color:#b4b4b4;line-height:2}
.playbook{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.playbook-card{position:relative;min-height:250px;border:1px solid #494949;border-radius:13px;padding:31px;background:#131313}
.playbook-card h3{font-size:25px;color:#fff;margin:14px 0}
.playbook-card p{font-size:13px;color:#b6b6b6;line-height:1.95}
.playbook-card .card-number{font-size:31px}
.timeline-full{border-left:1px solid #444;margin-left:16px}
.timeline-event{position:relative;padding:1px 0 35px 35px}
.timeline-event::before{content:'';position:absolute;left:-5px;top:8px;width:9px;height:9px;background:#fff;border-radius:50%}
.timeline-event h3{font-size:22px;color:#fff;margin:10px 0}
.timeline-event p{font-size:14px;color:#b3b3b3;line-height:1.95;max-width:900px}
.status-chip{display:inline-block;padding:4px 10px;border:1px solid #666;border-radius:5px;font-size:11px;color:#ddd}
.phone-story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:65px;align-items:center}
.phone-scene{display:grid;place-items:center;min-height:560px;background:radial-gradient(circle,#262626,#0b0b0b 67%);border-radius:18px;border:1px solid var(--line);overflow:hidden;padding:28px}
.mock-phone{width:min(255px,100%);min-height:476px;background:#080808;border:7px solid #343434;outline:1px solid #888;border-radius:35px;box-shadow:0 25px 70px #000;padding:20px 15px 17px;overflow:hidden}
.mock-camera{margin:0 auto 24px;width:62px;height:5px;background:#4a4a4a;border-radius:99px}
.mock-brand{font-size:21px;color:#fff;font-weight:850;letter-spacing:-.07em;margin-bottom:15px}
.mock-feature{min-height:165px;border:1px solid #555;border-radius:11px;background:linear-gradient(140deg,#303030,#111);padding:17px;display:flex;flex-direction:column;justify-content:flex-end}
.mock-feature strong{font-size:23px;color:#fff;line-height:1.2}
.mock-feature span{font-size:10px;color:#aaa;letter-spacing:.16em;margin-top:7px}
.mock-categories{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.mock-categories span{padding:7px 10px;border:1px solid #555;border-radius:30px;font-size:10px;color:#d5d5d5}
.mock-line{height:8px;background:#262626;border-radius:20px;margin-top:17px;width:85%}
.mock-line.short{width:55%;margin-top:9px}
.phone-copy h2{font-size:clamp(30px,4vw,51px);line-height:1.2;color:#fff;letter-spacing:-.06em;margin:13px 0 25px}
.phone-copy p{color:#b6b6b6;font-size:14px;line-height:2;margin:15px 0}
.policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.policy-item{border:1px solid var(--line);border-radius:12px;background:#121212;padding:28px}
.policy-item h3{font-size:20px;color:#fff;margin-bottom:13px}
.policy-item p{font-size:13px;color:#b2b2b2;line-height:1.95}
.notice{border-left:3px solid #fff;background:#181818;padding:25px 29px;max-width:960px}
.notice h2{color:#fff;font-size:20px;margin-bottom:9px}
.notice p{color:#c0c0c0;line-height:1.95;font-size:13px}
.question-page .faq-list summary{font-size:18px}
.question-page .faq-list details{padding:22px 0}
.question-page .faq-list details p{font-size:14px}
.contact-directions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.contact-directions article{min-height:240px;padding:28px;border:1px solid #444;border-radius:13px}
.contact-directions h3{font-size:21px;color:#fff;margin:14px 0}
.contact-directions p{font-size:13px;color:#b1b1b1;line-height:1.95}

/* 页脚 */
.site-footer{padding:73px 0 28px;background:#000;border-top:1px solid var(--line)}
.footer-brand{display:grid;grid-template-columns:minmax(0,190px) minmax(0,220px) minmax(0,1fr);align-items:center;gap:18px;padding-bottom:37px;border-bottom:1px solid var(--line)}
.footer-brand .site-logo-image{max-width:158px}
.footer-en{font-size:10px;letter-spacing:.19em;color:#aaa}
.footer-intro{font-size:13px;color:#a9a9a9;line-height:1.95;max-width:600px}
.footer-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:40px 0}
.footer-columns h2{font-size:12px;letter-spacing:.08em;color:#fff;margin-bottom:17px}
.footer-columns a{display:block;font-size:12px;color:#a0a0a0;margin:9px 0}
.footer-columns a:hover{color:#fff}
.footer-bottom{padding-top:20px;border-top:1px solid var(--line)}
.footer-bottom>p{font-size:11px;color:#868686;line-height:1.95;max-width:850px}
.footer-last{display:flex;gap:22px;align-items:center;flex-wrap:wrap;color:#818181;font-size:11px;margin-top:20px}
.footer-last a:hover{color:#fff}

@media(max-width:1160px){
 .desktop-main-nav{gap:12px}.desktop-main-nav a{font-size:12px}
 .header-inner{gap:19px}.header-actions{gap:5px}.header-brand{min-width:116px}
 .header-text-action{display:none}
 .portrait-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
 .desktop-main-nav{display:none}.header-brand{margin-right:auto}
 .hero-grid{grid-template-columns:1fr 1fr;gap:24px}.hero-media .site-media{min-height:500px}
 .hero-copy h1{font-size:clamp(30px,4.5vw,43px)}
 .plan-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
 .inspiration-grid,.playlist-grid,.theme-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .magazine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.magazine-grid article:first-child{grid-row:span 2}
 .footer-brand{grid-template-columns:180px 1fr;gap:15px}.footer-intro{grid-column:1/-1}
 .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .search-results{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:740px){
 :root{--header-h:64px;--page-x:16px}
 html{scroll-padding-top:78px}
 body{font-size:14px;padding-bottom:calc(61px + env(safe-area-inset-bottom,0px))}
 .site-header{height:var(--header-h);background:#000;backdrop-filter:none;width:100vw}
 .header-inner{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:5px;padding-inline:12px}
 .mobile-menu-button{display:inline-flex;grid-column:1}
 .header-brand{margin:0;grid-column:2;justify-self:center;min-width:0;max-width:100%;overflow:hidden}
 .header-brand .site-logo-image{max-width:min(140px,100%);max-height:43px;object-position:center}
 .wordmark-numeric{font-size:31px}.wordmark-cn{font-size:17px}
 .header-actions{grid-column:3}
 .header-actions .desk-control{display:none}
 .app-header-link{min-width:67px;height:44px;padding:8px 11px;gap:6px;font-size:12px}
 .home-hero{padding:21px 0 27px}
 .hero-grid{display:flex;flex-direction:column;gap:23px}
 .hero-copy{order:0;padding:0}
 .hero-copy h1{font-size:clamp(34px,7.4vw,48px);margin:10px 0 14px}
 .hero-copy>p{font-size:13px;margin-bottom:17px}
 .hero-copy .btn-row{order:1}
 .hero-rec-list{order:3;margin-top:11px;padding-top:9px}
 .hero-media{order:2}
 .hero-media .site-media{min-height:0;aspect-ratio:1.43}
 .hero-media .media-art strong{font-size:clamp(40px,9vw,68px)}
 .hero-rec{padding:10px 0}
 .quickbar-inner{min-height:61px;gap:20px}
 .section{padding-block:56px}.section-compact{padding-block:44px}
 .section-title-row{display:block}.section-title-row p{margin-top:12px;font-size:13px}.section-heading{margin-bottom:23px}
 .section-title-row h2{font-size:clamp(27px,6vw,36px)}
 .editor-pick,.film-feature,.app-home-grid,.info-duo,.lead-feature,.phone-story{grid-template-columns:1fr;gap:23px}
 .lead-feature.is-reversed .lead-feature-media{order:0}
 .pick-feature .site-media{aspect-ratio:1.75}
 .portrait-rail{display:grid;grid-auto-flow:column;grid-auto-columns:190px;grid-template-columns:none;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
 .portrait-card{scroll-snap-align:start;min-height:210px}
 .vertical-catalogue,.series-grid,.explore-grid,.issue-grid,.contact-directions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .series-card{min-height:200px;padding:23px}
 .series-card h3{font-size:19px}
 .ranking-list{grid-template-columns:1fr}
 .ranking-list a{padding:17px 0}
 .plan-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
 .opinion-grid{grid-template-columns:1fr}.opinion-card:last-child:nth-child(odd){grid-column:auto}
 .app-home-grid .site-media{aspect-ratio:1.28}
 .brand-statement{padding:27px}
 .brand-statement .large-label{font-size:clamp(50px,13vw,90px)}
 .page-top{padding:16px 0 34px}
 .breadcrumbs{margin-bottom:36px}
 .page-top-inner{grid-template-columns:minmax(0,1fr) 65px;gap:4px}
 .page-top h1{font-size:clamp(42px,9vw,62px)}
 .page-index{font-size:55px;align-self:start;color:#262626}
 .page-index span{display:none}
 .page-lead{font-size:14px}
 .article-list article{grid-template-columns:48px minmax(0,1fr);gap:10px 14px}
 .article-list article p{grid-column:2}
 .article-list h3{font-size:18px}
 .atlas-grid,.steps-list,.playbook,.policy-grid{grid-template-columns:1fr}
 .type-poster{min-height:310px}
 .reading-note,.stacked-guide article{grid-template-columns:1fr;gap:7px}
 .related-inner{display:block}.related-inner h2{margin-bottom:17px}
 .quote-wall{padding:30px 24px}
 .phone-scene{min-height:520px}
 .footer-brand{display:flex;align-items:flex-start;flex-direction:column;gap:11px}
 .footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
 .site-footer{padding-top:52px}
 .footer-last{gap:12px 18px}
 .mobile-dock{display:grid;position:fixed;bottom:0;left:0;right:0;z-index:70;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(60px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid #333;background:rgba(7,7,7,.98);backdrop-filter:blur(10px)}
 .mobile-dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0;min-height:48px;color:#999;font-size:10px;line-height:1.4;white-space:nowrap}
 .mobile-dock a.is-current{color:#fff}
 .dock-icon{font-size:21px;height:29px;line-height:1.2}
 .search-panel{top:0;bottom:0;max-height:100dvh;border-bottom:0}
 .search-inner{padding-top:18px;padding-bottom:90px}
 .search-panel label{font-size:32px;margin-top:15px}
 .search-input-wrap{height:57px}
 .search-results{grid-template-columns:repeat(2,minmax(0,1fr))}
 .search-results a{font-size:12px;padding:12px}
 .channel-panel{width:min(420px,88vw)}
 .panel-title{padding:14px 16px}
 .panel-scroll{padding:18px 16px}
 .panel-channel small{font-size:11px}
}
@media(max-width:470px){
 .inspiration-grid,.playlist-grid,.theme-lanes{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .inspiration-card{min-height:173px;padding:18px}
 .inspiration-card h3{font-size:16px}
 .micro-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .micro-card{padding:17px;min-height:125px}
 .vertical-catalogue,.series-grid,.issue-grid,.explore-grid,.contact-directions{grid-template-columns:1fr}
 .vertical-item{min-height:0;padding:23px}
 .series-card{min-height:165px}
 .magazine-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
 .magazine-grid article{padding:18px}.magazine-grid article:first-child{grid-column:1/-1;grid-row:auto;min-height:235px}
 .magazine-grid h3{font-size:18px}
 .plan-rail{grid-template-columns:1fr 1fr}
 .plan-step{min-height:140px}
 .playlist-card{padding:17px;min-height:210px}
 .playlist-card h3{font-size:16px}
 .playlist-card p{font-size:11px}
 .theme-lanes a{min-height:159px;padding:17px}
 .theme-lanes strong{font-size:16px}
 .opinion-card{padding:22px}
 .page-top-inner{grid-template-columns:1fr}.page-index{display:none}
 .page-top h1{font-size:clamp(41px,11vw,52px)}
 .lead-feature-copy h2{font-size:30px}
 .reading-note{grid-template-columns:1fr}
 .type-poster{min-height:275px}
 .media-art{padding:22px}.media-art-top{left:22px;top:22px}
 .media-art strong{font-size:clamp(28px,9vw,52px)}
 .brand-statement{padding:22px}.brand-statement .large-label{font-size:55px}
 .footer-columns{column-gap:12px}
}
@media(max-width:350px){
 .header-inner{padding-inline:9px;gap:2px}
 .header-brand .site-logo-image{max-width:115px}
 .wordmark-numeric{font-size:28px}.wordmark-cn{font-size:16px}
 .app-header-link{min-width:60px;padding:6px 9px}
 .hero-copy h1{font-size:32px}
 .btn{padding-inline:16px;font-size:12px}
 .search-results{grid-template-columns:1fr 1fr}
 .inspiration-card{padding:15px}
 .inspiration-card h3{font-size:15px}
 .playlist-card{padding:13px}
 .media-art strong{font-size:30px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}