:root { --ink:#20242a; --muted:#77808a; --line:#e7e9e7; --paper:#fbfcfa; --mint:#cfeee2; --deep:#162d2c; --coral:#ee8067; --shadow:0 18px 50px rgba(25,48,45,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; object-fit:cover; }
button { font:inherit; cursor:pointer; }
.container { width:min(1200px, calc(100% - 48px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:30; background:rgba(251,252,250,.92); backdrop-filter:blur(16px); border-bottom:1px solid rgba(231,233,231,.78); }
.nav-wrap { width:min(1280px,calc(100% - 48px)); min-height:76px; margin:auto; display:flex; align-items:center; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:10px; min-width:max-content; }
.brand-mark { width:38px; height:38px; border-radius:13px; display:grid; place-items:center; color:#fff; font-weight:800; letter-spacing:-2px; background:linear-gradient(135deg,#ef8c73,#dd5f56); box-shadow:0 7px 14px rgba(224,103,85,.25); }
.brand-copy { display:flex; flex-direction:column; line-height:1; gap:4px; letter-spacing:.08em; }.brand-copy strong { font-size:18px; }.brand-copy em { font-size:9px; color:var(--coral); font-style:normal; letter-spacing:.28em; }
.main-nav { display:flex; align-items:center; gap:5px; margin-left:auto; }.nav-link { padding:10px 12px; color:#697178; font-size:13px; border-radius:12px; white-space:nowrap; transition:.2s; }.nav-link:hover,.nav-link.is-active { color:var(--deep); background:var(--mint); }.nav-icon { margin-right:6px; font-size:15px; }
.header-action { font-size:12px; color:var(--deep); padding:11px 15px; border:1px solid #c9ded7; border-radius:99px; white-space:nowrap; }.header-action span { color:var(--coral); margin-left:8px; }.menu-toggle { display:none; border:0; background:transparent; font-size:24px; }
.hero { display:grid; grid-template-columns: .92fr 1.08fr; gap:65px; align-items:center; padding-top:72px; padding-bottom:62px; }.eyebrow { color:#9b6d5f; font-size:10px; letter-spacing:.2em; font-weight:800; }.hero h1 { font-size:clamp(46px,7vw,84px); letter-spacing:-.07em; line-height:1; margin:17px 0 24px; }.hero h1 a { border-bottom:7px solid var(--mint); }.hero-lede { color:#667178; max-width:470px; font-size:16px; }.hero-actions { display:flex; align-items:center; gap:24px; margin-top:32px; }.button { display:inline-flex; align-items:center; gap:28px; border:0; border-radius:99px; padding:14px 20px; font-size:13px; }.button-primary { color:#fff; background:var(--deep); box-shadow:0 12px 25px rgba(22,45,44,.2); }.button span { color:var(--coral); font-size:18px; }.text-link { color:var(--deep); font-size:13px; font-weight:700; }.hero-stats { display:flex; gap:28px; margin-top:46px; color:#8b9399; font-size:11px; }.hero-stats b { display:block; color:var(--deep); font-size:17px; }.hero-feature { transform:rotate(2deg); }.feature-image { position:relative; aspect-ratio:1.18; overflow:hidden; border-radius:26px; box-shadow:var(--shadow); background:#ccdcd2; }.feature-image img { height:100%; }.feature-image:after,.spotlight-image:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(17,35,34,.53)); }.play-large,.play-dot { position:absolute; z-index:2; display:grid; place-items:center; color:white; background:rgba(26,47,46,.85); border-radius:50%; }.play-large { width:68px; height:68px; left:50%; top:50%; transform:translate(-50%,-50%); font-size:20px; padding-left:4px; }.play-dot { width:36px; height:36px; left:14px; bottom:14px; font-size:11px; padding-left:2px; }.feature-label { position:absolute; z-index:2; left:20px; top:18px; color:white; font-size:10px; letter-spacing:.14em; }.feature-caption { display:flex; align-items:center; justify-content:space-between; background:#fff; padding:20px 18px; margin:-10px 18px 0; position:relative; z-index:3; box-shadow:0 10px 30px rgba(25,48,45,.08); }.small-label { color:#aa7f70; font-size:9px; letter-spacing:.15em; }.feature-caption h2 { margin:5px 0 0; font-size:18px; }.round-arrow { display:grid; place-items:center; min-width:42px; height:42px; background:var(--mint); border-radius:50%; }
.ticker { background:var(--deep); color:#dcece4; }.ticker-inner { display:flex; align-items:center; gap:24px; min-height:55px; font-size:12px; }.ticker-label { color:#f5a084; letter-spacing:.18em; font-size:10px; }.ticker-inner p { flex:1; margin:0; }.ticker-inner a { color:#fff; }
.section { padding-top:92px; padding-bottom:12px; }.section-soft { background:#f1f6f3; max-width:none; padding-left:max(24px,calc((100% - 1200px)/2)); padding-right:max(24px,calc((100% - 1200px)/2)); padding-bottom:94px; }.section-dark { background:var(--deep); color:#edf7f0; max-width:none; padding-left:max(24px,calc((100% - 1200px)/2)); padding-right:max(24px,calc((100% - 1200px)/2)); padding-bottom:90px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:30px; }.section-heading h2 { font-size:32px; letter-spacing:-.05em; margin:6px 0 0; }.heading-link { color:#59666c; font-size:12px; font-weight:700; }.heading-link span { color:var(--coral); font-size:18px; margin-left:8px; }.heading-desc { max-width:240px; color:var(--muted); font-size:12px; margin:0; }.section-count,.live-note { color:#8c9794; font-size:11px; }.live-note i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#ee8067; box-shadow:0 0 0 5px rgba(238,128,103,.12); }.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }.video-grid { display:grid; gap:24px; }.video-grid.three { grid-template-columns:repeat(3,1fr); }.card-media { display:block; position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:16px; background:#dbe6df; }.card-media img { height:100%; transition:transform .45s; }.video-card:hover .card-media img { transform:scale(1.045); }.card-body { padding-top:15px; }.card-meta { display:flex; justify-content:space-between; color:#a07a6e; font-size:10px; }.card-meta span { font-weight:700; }.video-card h3 { font-size:17px; line-height:1.35; letter-spacing:-.02em; margin:8px 0 6px; }.video-card p { color:#7c858b; font-size:12px; line-height:1.7; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.card-foot { display:flex; justify-content:space-between; color:#a0a8aa; font-size:10px; margin-top:13px; }.wide-card { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:center; }.wide-card .card-body { padding:0; }.wide-card .card-media { aspect-ratio:1.12; }.spotlight-row { display:grid; grid-template-columns:.8fr 1.2fr; gap:35px; align-items:center; background:#eef5f1; border-radius:25px; padding:12px; }.spotlight-copy { padding:30px; }.rank-badge { display:grid; place-items:center; width:45px; height:45px; color:#fff; background:var(--coral); border-radius:14px; font-weight:800; }.spotlight-copy h3 { font-size:28px; letter-spacing:-.05em; line-height:1.2; margin:20px 0 13px; }.spotlight-copy p { font-size:13px; color:#7d888a; margin-bottom:25px; }.spotlight-image { position:relative; aspect-ratio:1.8; overflow:hidden; border-radius:18px; }.spotlight-image img { height:100%; }.spotlight-image .duration,.card-media .duration { position:absolute; z-index:2; right:12px; bottom:12px; color:#fff; font-size:10px; background:rgba(16,32,31,.72); padding:4px 7px; border-radius:5px; }.category-section { background:#fff8ed; max-width:none; padding-left:max(24px,calc((100% - 1200px)/2)); padding-right:max(24px,calc((100% - 1200px)/2)); padding-bottom:95px; }.category-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }.category-tile { min-height:190px; display:flex; flex-direction:column; padding:18px; border-radius:17px; border:1px solid rgba(45,66,60,.08); transition:.25s; }.category-tile:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.category-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; font-size:20px; margin-bottom:20px; background:rgba(255,255,255,.66); }.category-tile strong { font-size:16px; }.category-tile small { color:#738078; font-size:10px; line-height:1.6; margin-top:6px; }.category-tile b { color:#53645c; font-size:10px; margin-top:auto; }.tile-1{background:#dcf2e6}.tile-2{background:#e3f0fb}.tile-3{background:#ffe2d3}.tile-4{background:#f4e6c9}.tile-5{background:#eadff7}.tile-6{background:#e8edcf}.travel-layout { display:grid; grid-template-columns:1.3fr .7fr; gap:25px; }.travel-main { position:relative; min-height:430px; overflow:hidden; border-radius:20px; }.travel-main img { height:100%; }.travel-main:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 30%,rgba(20,37,35,.78)); }.travel-overlay { position:absolute; z-index:2; left:30px; right:30px; bottom:30px; color:#fff; }.travel-overlay span { color:#f4ad91; font-size:10px; letter-spacing:.15em; }.travel-overlay h3 { max-width:500px; font-size:30px; line-height:1.18; margin:8px 0 12px; }.travel-overlay a { font-size:12px; }.travel-side { display:flex; flex-direction:column; justify-content:center; gap:8px; }.travel-side a { display:grid; grid-template-columns:45px 1fr 20px; align-items:center; gap:10px; padding:17px 0; border-bottom:1px solid var(--line); }.side-number { color:var(--coral); font-weight:800; }.travel-side b { display:block; font-size:14px; line-height:1.4; }.travel-side small { color:#89918f; font-size:10px; }.food-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }.section-dark .card-body { color:#fff; }.section-dark .video-card p,.section-dark .card-foot { color:#aec0b8; }.section-dark .card-meta { color:#f1a389; }.creator-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.creator-card { border:1px solid var(--line); background:#fff; padding:16px; border-radius:15px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }.avatar { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; font-weight:800; color:#31514b; }.avatar-one{background:#d4eee1}.avatar-two{background:#dce9f8}.avatar-three{background:#ffdfce}.avatar-four{background:#e8def4}.creator-card h3 { font-size:13px; margin:0; }.creator-card p { color:#929b9b; font-size:10px; margin:2px 0 0; }.creator-card>span { color:var(--coral); }.ranking-list { border-top:1px solid #dfe7e2; }.ranking-item { display:grid; grid-template-columns:70px 1fr auto 24px; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid #dfe7e2; }.ranking-no { color:#dd7866; font-size:21px; font-weight:800; }.ranking-title b { display:block; font-size:14px; }.ranking-title small,.ranking-hot small { color:#98a29f; font-size:10px; }.ranking-hot { color:#b76557; font-weight:800; font-size:14px; }.ranking-arrow { color:#dd7866; }.topic-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:15px; }.topic-card { min-height:260px; display:flex; flex-direction:column; justify-content:space-between; padding:25px; color:#fff; border-radius:20px; background:#315b57; overflow:hidden; position:relative; }.topic-card:before { content:""; position:absolute; width:200px; height:200px; right:-60px; top:-60px; border-radius:50%; background:rgba(255,255,255,.12); }.topic-card>div,.topic-arrow { position:relative; z-index:1; }.topic-card span { color:#ffd2bd; font-size:10px; letter-spacing:.16em; }.topic-card h3 { font-size:24px; line-height:1.2; max-width:270px; margin:12px 0; }.topic-card p { font-size:11px; color:#c8dfd9; max-width:320px; }.topic-2 { background:#c76d5b; }.topic-3 { background:#7875a9; }.topic-arrow { align-self:flex-end; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; }.about-section { border-top:1px solid var(--line); }.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; }.about-grid h2 { font-size:36px; line-height:1.2; letter-spacing:-.05em; margin-top:12px; }.about-grid p { color:#6f7a7c; font-size:14px; }.subscribe-section { padding-bottom:95px; }.subscribe-box { display:grid; grid-template-columns:1fr 250px; align-items:center; gap:35px; border-radius:24px; padding:38px 48px; color:#fff; background:linear-gradient(110deg,#274b48,#477266); }.subscribe-box h2 { font-size:32px; letter-spacing:-.05em; margin:8px 0; }.subscribe-box p { color:#c8e0d5; font-size:13px; }.button-light { color:var(--deep); background:#fff; margin-top:10px; }.brand-qr { justify-self:end; text-align:center; }.brand-qr img { width:120px; height:120px; border-radius:15px; }.brand-qr span { color:#bed6cb; display:block; font-size:9px; letter-spacing:.18em; margin-top:8px; }
.site-footer { padding:55px max(24px,calc((100% - 1200px)/2)) 25px; color:#d6e4dd; background:#162d2c; }.footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:35px; padding-bottom:45px; }.footer-brand p { color:#9fb9ae; font-size:12px; max-width:200px; margin-top:18px; }.site-footer .brand-copy strong { color:#fff; }.site-footer h3 { color:#fff; font-size:12px; margin:0 0 15px; }.site-footer a:not(.brand) { display:block; color:#9fb9ae; font-size:11px; margin:8px 0; }.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.12); padding-top:20px; color:#79958a; font-size:10px; }
.page-hero { padding:44px 0 58px; }.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; color:#9ba4a4; font-size:11px; margin-bottom:40px; }.breadcrumbs a { color:#54716a; }.page-hero h1 { max-width:780px; font-size:clamp(36px,5vw,68px); line-height:1.1; letter-spacing:-.07em; margin:13px 0 20px; }.page-hero>p { color:#6f7c7c; max-width:700px; font-size:15px; }.page-hero-line { display:flex; gap:24px; margin-top:30px; color:#9a6e61; font-size:11px; }.mini-editorial { display:grid; grid-template-columns:1fr 1fr; gap:25px; padding-bottom:90px; }.editorial-note { background:#e5f2eb; border-radius:22px; padding:40px; }.editorial-note h2 { font-size:28px; line-height:1.2; margin:10px 0 14px; }.editorial-note p { color:#64736e; font-size:13px; }.editorial-poster { position:relative; overflow:hidden; min-height:270px; border-radius:22px; }.editorial-poster img { height:100%; }.editorial-poster span { position:absolute; left:22px; bottom:18px; color:#fff; background:rgba(20,42,40,.65); padding:7px 11px; border-radius:6px; font-size:10px; }
.watch-page { padding-top:38px; padding-bottom:95px; }.watch-layout { display:grid; grid-template-columns:minmax(0,1fr) 285px; gap:35px; }.watch-main { min-width:0; }.player { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:20px; background:#1c3633; }.player>img { height:100%; }.player-shade { position:absolute; inset:0; background:rgba(13,31,29,.35); }.player-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; border:0; width:68px; height:68px; border-radius:50%; color:#fff; background:rgba(25,51,48,.86); font-size:21px; padding-left:5px; }.player-controls { position:absolute; z-index:2; display:flex; align-items:center; gap:14px; left:18px; right:18px; bottom:15px; color:#fff; font-size:11px; }.player-controls button { border:0; color:#fff; background:transparent; padding:0; }.progress { flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.35); }.progress span { display:block; width:38%; height:100%; background:#f39b7e; border-radius:99px; }.watch-heading { display:flex; justify-content:space-between; gap:20px; align-items:start; padding:28px 0 18px; border-bottom:1px solid var(--line); }.watch-heading h1 { max-width:730px; font-size:35px; line-height:1.2; letter-spacing:-.05em; margin:9px 0; }.watch-meta { color:#98a19f; font-size:11px; }.watch-meta span { color:#e18a74; margin:0 5px; }.save-button { white-space:nowrap; color:#a26459; background:#fff2ed; border:0; border-radius:99px; padding:11px 15px; font-size:11px; }.watch-description { padding:28px 0; }.watch-description h2 { font-size:19px; margin:0 0 10px; }.watch-description>p { color:#687574; font-size:13px; }.highlight-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; }.highlight-list>div { display:flex; gap:10px; padding:14px; border-radius:12px; background:#f0f6f2; }.highlight-list b { color:#d97966; }.highlight-list span { font-size:11px; font-weight:700; line-height:1.4; }.highlight-list small { color:#8b9793; font-weight:400; }.scene-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.scene-gallery figure { margin:0; }.scene-gallery img { aspect-ratio:1/1.1; border-radius:11px; }.scene-gallery figcaption { color:#8b9694; font-size:9px; margin-top:6px; }.video-nav { display:flex; justify-content:space-between; gap:15px; margin-top:32px; padding-top:20px; border-top:1px solid var(--line); color:#52716a; font-size:11px; font-weight:700; }.watch-aside { display:flex; flex-direction:column; gap:20px; }.aside-card { padding:22px; border-radius:17px; background:#edf5f1; }.aside-card h2 { font-size:19px; margin:8px 0; }.aside-card p { color:#71807b; font-size:12px; }.tag-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }.tag-row span { color:#578076; background:#fff; border-radius:99px; padding:5px 9px; font-size:10px; }.related { background:#fff3ed; }.related>a { display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:center; margin-top:15px; font-size:11px; font-weight:700; }.related img { height:50px; border-radius:8px; }.related small { display:block; color:#9b8c87; font-size:9px; font-weight:400; margin-top:3px; }
@media (max-width:1050px){.main-nav{gap:0}.nav-link{padding:9px 7px;font-size:11px}.header-action{display:none}.hero{gap:35px}.category-grid{grid-template-columns:repeat(3,1fr)}.creator-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.container{width:min(100% - 32px,600px)}.nav-wrap{width:calc(100% - 32px);min-height:66px}.menu-toggle{display:block;margin-left:auto}.main-nav{display:none;position:absolute;top:66px;left:0;right:0;padding:10px 16px 18px;background:rgba(251,252,250,.98);box-shadow:0 15px 30px rgba(22,45,44,.08);flex-wrap:wrap}.main-nav.is-open{display:flex}.nav-link{flex:1 0 31%;padding:11px 8px}.hero{grid-template-columns:1fr;gap:38px;padding-top:48px}.hero h1{font-size:58px}.hero-feature{transform:none}.feature-image{aspect-ratio:1.25}.section{padding-top:65px}.section-heading h2{font-size:27px}.feature-grid,.spotlight-row,.travel-layout,.mini-editorial,.about-grid{grid-template-columns:1fr}.video-grid.three,.food-strip{grid-template-columns:repeat(2,1fr)}.wide-card{display:block}.wide-card .card-body{padding-top:13px}.spotlight-copy{padding:22px}.spotlight-copy h3{font-size:24px}.category-grid{grid-template-columns:repeat(2,1fr)}.category-tile{min-height:170px}.travel-main{min-height:340px}.travel-overlay h3{font-size:24px}.creator-row{grid-template-columns:1fr 1fr}.topic-grid{grid-template-columns:1fr}.topic-card{min-height:210px}.topic-card h3{font-size:21px}.subscribe-box{grid-template-columns:1fr;padding:30px}.brand-qr{justify-self:start}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:span 2}.footer-bottom{flex-direction:column;gap:7px}.page-hero{padding-top:30px}.page-hero h1{font-size:44px}.page-hero-line{flex-wrap:wrap;gap:10px 18px}.watch-layout{grid-template-columns:1fr}.watch-heading h1{font-size:28px}.highlight-list{grid-template-columns:1fr}.scene-gallery{grid-template-columns:repeat(2,1fr)}.watch-aside{display:grid;grid-template-columns:1fr 1fr}.video-nav{font-size:10px}.hero-stats{gap:18px}}
@media (max-width:460px){.video-grid.three,.food-strip{grid-template-columns:1fr}.category-grid{gap:8px}.category-tile{padding:14px;min-height:160px}.category-icon{margin-bottom:12px}.creator-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:span 2}.watch-aside{display:flex}.player-controls{gap:9px}.player-time{font-size:9px}.page-hero-line span{font-size:10px}}