:root{
--primary:#176B8D;--primary-2:#2187AE;--sky:#55AFD3;--sky-light:#A9D9EA;--sky-soft:#E5F3F8;
--navy:#123B50;--navy-2:#0B2938;--navy-dark:#071E2A;--accent:#D97945;--accent-soft:#F7E7DB;
--bg:#F5F9FA;--bg-2:#EBF2F4;--bg-3:#FAFCFC;--surface:#FFFFFF;--surface-soft:rgba(255,255,255,.86);
--text:#203640;--text-2:#60747D;--text-3:#91A0A6;--line:rgba(23,107,141,.10);--line-strong:rgba(23,107,141,.22);
--shadow:0 6px 24px rgba(18,59,80,.08);--shadow-hover:0 15px 38px rgba(18,59,80,.14);--radius:10px;--radius-card:14px;--radius-large:20px;--radius-pill:999px;--wrap:1320px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input{font:inherit}.wrap{width:min(var(--wrap),calc(100% - 40px));margin:auto}.announcement{padding:8px 20px;background:var(--navy-dark);color:#d9edf4;text-align:center;font-size:13px;letter-spacing:.02em}.site-header{position:sticky;top:0;z-index:40;background:rgba(245,249,250,.93);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.header-row{height:74px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:10px;min-width:max-content}.brand img{width:40px;height:40px;border-radius:12px}.brand span{display:flex;flex-direction:column}.brand strong{font-size:17px;line-height:1.2;color:var(--navy)}.brand small{font-size:9px;letter-spacing:.14em;color:var(--text-3)}.desktop-nav{display:flex;align-items:center;gap:5px;margin-left:18px}.desktop-nav a{padding:10px 12px;border-radius:var(--radius-pill);font-size:14px;color:var(--text-2)}.desktop-nav a:hover,.desktop-nav a.active{background:var(--surface);color:var(--primary);box-shadow:0 2px 12px rgba(18,59,80,.07)}.header-tools{margin-left:auto;display:flex;align-items:center;gap:8px}.header-tools>a,.menu-btn{height:38px;min-width:38px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);border-radius:12px;color:var(--navy)}.tool-text{padding:0 12px;font-size:13px}.menu-btn{cursor:pointer}.mega-menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.mega-menu.open{display:block}.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:28px 0}.mega-grid div{display:grid;gap:8px}.mega-grid b{color:var(--navy);margin-bottom:5px}.mega-grid a{font-size:14px;color:var(--text-2)}.mega-grid a:hover{color:var(--primary)}
.hero{padding:56px 0 34px}.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:42px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.hero h1,.subhero h1{margin:13px 0 18px;color:var(--navy-dark);font-size:clamp(44px,5vw,76px);line-height:1.02;letter-spacing:-.045em}.hero-copy{max-width:720px;font-size:17px;color:var(--text-2)}.hero-copy p{margin:0 0 9px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:25px 0}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:13px;background:var(--primary);color:#fff;font-weight:700;font-size:14px;border:1px solid transparent}.btn:hover{background:var(--primary-2)}.btn.secondary{background:#fff;color:var(--navy);border-color:var(--line-strong)}.btn.dark{background:var(--navy-dark)}.search-box{display:flex;gap:8px;background:var(--surface);padding:8px;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);max-width:650px}.search-box input{flex:1;border:0;outline:0;background:transparent;padding:0 12px;color:var(--text)}.search-box button{border:0;background:var(--navy);color:white;border-radius:11px;padding:0 18px;cursor:pointer}.hero-visual{position:relative;min-height:520px}.hero-image{position:absolute;inset:0 84px 56px 0;border-radius:28px;overflow:hidden;box-shadow:0 25px 70px rgba(18,59,80,.18)}.hero-image img{width:100%;height:100%;object-fit:cover}.hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,30,42,.48))}.float-panel{position:absolute;width:240px;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.55);border-radius:18px;padding:17px;box-shadow:var(--shadow-hover)}.float-panel.hot{right:0;top:45px}.float-panel.live{left:32px;bottom:0}.float-panel small{color:var(--text-3);display:block}.float-panel strong{display:block;color:var(--navy);font-size:20px;margin:4px 0}.panel-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:9px;margin-top:9px;font-size:12px;color:var(--text-2)}
.hot-search{padding:10px 0 20px}.hot-search-row,.chips{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.hot-search-row>span{font-size:13px;color:var(--text-3)}.chip{padding:8px 13px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--line);color:var(--text-2);font-size:13px;cursor:pointer}.chip:hover,.chip.active{background:var(--sky-soft);color:var(--primary);border-color:var(--line-strong)}
.section{padding:64px 0}.section.compact{padding:44px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-head h2{font-size:clamp(28px,3vw,42px);line-height:1.15;margin:8px 0 6px;color:var(--navy-dark);letter-spacing:-.025em}.section-head p{max-width:760px;margin:0;color:var(--text-2)}.text-link{color:var(--primary);font-weight:700;white-space:nowrap}.dark-section{background:var(--navy-dark);color:#d9e8ee}.dark-section .section-head h2,.dark-section h3,.dark-section a{color:#fff}.dark-section .section-head p,.dark-section .byline,.dark-section .meta-line{color:#9bb4bf}.surface-section{background:var(--bg-2)}
.feature-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:20px}.feature-main .video-card{height:100%}.feature-main .video-cover{aspect-ratio:16/8.5}.editor-list{display:grid;gap:12px}.editor-item{display:grid;grid-template-columns:118px 1fr;gap:12px;background:#fff;padding:10px;border-radius:14px;border:1px solid var(--line)}.editor-item img{width:118px;height:76px;object-fit:cover;border-radius:10px}.editor-item h3{font-size:14px;line-height:1.4;margin:3px 0;color:var(--navy)}.editor-item small{color:var(--text-3)}
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.video-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;transition:.22s;min-width:0}.video-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}.video-cover{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}.video-cover img{width:100%;height:100%;object-fit:cover;transition:.3s}.video-card:hover .video-cover img{transform:scale(1.02)}.play{position:absolute;left:14px;bottom:13px;width:36px;height:36px;border-radius:50%;background:rgba(7,30,42,.78);color:white;display:grid;place-items:center;font-size:12px;backdrop-filter:blur(5px);transition:.2s}.video-card:hover .play{transform:scale(1.07)}.duration{position:absolute;right:10px;bottom:10px;background:rgba(7,30,42,.75);color:#fff;border-radius:7px;padding:3px 7px;font-size:11px}.video-body{padding:15px}.meta-line,.byline{display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--text-3);font-size:11px}.video-body h3{margin:10px 0 7px;font-size:17px;line-height:1.4;color:var(--navy)}.video-body p{margin:0 0 12px;color:var(--text-2);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pill{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:700}.pill-soft{background:var(--sky-soft);color:var(--primary)}.pill-dark{background:rgba(255,255,255,.12);color:#fff}.horizontal-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:18px;overflow:auto;padding:3px 0 12px;scroll-snap-type:x proximity}.horizontal-track>*{scroll-snap-align:start}.horizontal-track::-webkit-scrollbar{height:6px}.horizontal-track::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
.live-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.live-card{background:var(--navy-2);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;color:#dcecf2}.live-cover{aspect-ratio:16/10;position:relative;overflow:hidden}.live-cover img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}.live-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,30,42,.75))}.live-badge,.live-status{position:absolute;z-index:2;top:11px;border-radius:999px;font-size:10px;font-weight:800}.live-badge{left:11px;background:var(--accent);color:white;padding:5px 9px;letter-spacing:.08em}.live-status{right:11px;background:rgba(7,30,42,.72);color:white;padding:5px 9px}.live-body{padding:15px}.live-body h3{font-size:17px;margin:10px 0 6px}.live-body p{font-size:13px;color:#abc0c9;margin:0 0 12px}.live-body .byline{color:#8fa9b5}
.anchor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.anchor-card{display:grid;grid-template-columns:78px 1fr;gap:15px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:16px}.anchor-card img{width:78px;height:78px;object-fit:cover;border-radius:50%;border:4px solid var(--sky-soft)}.anchor-top{display:flex;justify-content:space-between;gap:8px}.anchor-top h3{margin:0;color:var(--navy)}.anchor-card strong{font-size:12px;color:var(--primary)}.anchor-card p{font-size:13px;color:var(--text-2);margin:5px 0 0}.status-dot{font-size:10px;color:var(--accent);white-space:nowrap}.status-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:5px}
.ranking-list{padding:0;margin:0;list-style:none;border-top:1px solid var(--line)}.ranking-list li{display:grid;grid-template-columns:45px 1fr auto;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.rank-no{font-size:19px;font-weight:900;color:var(--sky)}.ranking-list li:nth-child(-n+3) .rank-no{color:var(--accent)}.ranking-list a{display:block;font-weight:700;color:var(--navy);margin-bottom:2px}.ranking-list small{color:var(--text-3)}.rank-state{font-size:11px;color:var(--text-3)}
.two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:36px}.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}.split-media{border-radius:22px;overflow:hidden;min-height:380px}.split-media img{width:100%;height:100%;object-fit:cover}.copy h2{font-size:38px;line-height:1.14;color:var(--navy-dark);margin:10px 0}.copy p{color:var(--text-2)}.copy-list{display:grid;gap:10px;margin-top:20px}.copy-list div{display:flex;gap:10px;align-items:flex-start}.copy-list b{color:var(--primary)}
.bento{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-template-rows:220px 220px;gap:16px}.bento-card{position:relative;border-radius:20px;overflow:hidden;min-height:180px;background:var(--navy);color:white}.bento-card:first-child{grid-row:span 2}.bento-card img{width:100%;height:100%;object-fit:cover}.bento-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(7,30,42,.82))}.bento-copy{position:absolute;z-index:2;left:18px;right:18px;bottom:16px}.bento-copy h3{margin:4px 0;font-size:20px}.bento-copy p{margin:0;color:#c4d5db;font-size:12px}
.topic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.topic-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}.topic-top{display:flex;align-items:center;gap:9px}.topic-top .pill{margin-left:auto}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--sky-soft);color:var(--primary);font-weight:800}.topic-top div{display:flex;flex-direction:column;line-height:1.2}.topic-top small{color:var(--text-3);font-size:10px;margin-top:3px}.topic-card h3{font-size:18px;color:var(--navy);margin:13px 0 6px}.topic-card p{font-size:13px;color:var(--text-2);margin:0}.topic-stats{display:flex;gap:16px;margin-top:13px;font-size:11px;color:var(--text-3)}
.trend-list{display:grid;gap:13px}.trend-row{display:grid;grid-template-columns:110px 1fr 42px;align-items:center;gap:12px;font-size:13px}.trend-bar{height:8px;background:var(--bg-2);border-radius:99px;overflow:hidden}.trend-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--sky));border-radius:99px}.trend-row strong{color:var(--navy)}
.magazine-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.feature-story{position:relative;min-height:420px;border-radius:22px;overflow:hidden}.feature-story img{width:100%;height:100%;object-fit:cover}.feature-story:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(7,30,42,.88))}.feature-story-copy{position:absolute;z-index:2;left:28px;right:28px;bottom:25px;color:white}.feature-story-copy h3{font-size:30px;margin:6px 0}.feature-story-copy p{color:#cfdee4}.story-stack{display:grid;gap:14px}.story-mini{display:grid;grid-template-columns:160px 1fr;gap:14px;padding:12px;background:white;border:1px solid var(--line);border-radius:16px}.story-mini img{width:160px;height:108px;object-fit:cover;border-radius:10px}.story-mini h3{font-size:16px;color:var(--navy);margin:4px 0}.story-mini p{font-size:12px;color:var(--text-2);margin:0}
.creator-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.creator-tile{text-align:center;padding:18px 10px;background:#fff;border-radius:16px;border:1px solid var(--line)}.creator-tile img{width:70px;height:70px;object-fit:cover;border-radius:50%;margin:0 auto 10px}.creator-tile strong{display:block;color:var(--navy)}.creator-tile small{color:var(--text-3)}
.timeline{position:relative;padding-left:22px}.timeline:before{content:"";position:absolute;left:5px;top:7px;bottom:8px;width:2px;background:var(--line-strong)}.timeline-item{position:relative;padding:0 0 20px 18px}.timeline-item:before{content:"";position:absolute;left:-22px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px var(--sky-soft)}.timeline-item strong{display:block;color:var(--navy)}.timeline-item p{margin:4px 0;color:var(--text-2);font-size:13px}
.callout{border-radius:24px;padding:34px;background:linear-gradient(135deg,var(--navy-dark),var(--navy));color:white;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}.callout h2{font-size:34px;margin:0 0 8px}.callout p{margin:0;color:#bdd0d8}.callout .btn{background:white;color:var(--navy)}
.app-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:42px;align-items:center}.phone-stage{position:relative;min-height:520px}.phone-stage .phone{position:absolute;width:58%;left:10%;bottom:0;filter:drop-shadow(0 26px 28px rgba(18,59,80,.18))}.phone-stage .appshot{position:absolute;width:72%;right:0;top:0;border-radius:24px;box-shadow:var(--shadow-hover)}.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}.feature-list div{background:white;border:1px solid var(--line);border-radius:14px;padding:14px}.feature-list strong{display:block;color:var(--navy);margin-bottom:4px}.feature-list span{font-size:12px;color:var(--text-2)}
.faq-list{display:grid;gap:10px}.faq-list details{background:white;border:1px solid var(--line);border-radius:14px;padding:0 16px}.faq-list summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;justify-content:space-between;font-weight:700;color:var(--navy)}.faq-list summary::-webkit-details-marker{display:none}.faq-list details p{margin:-3px 0 16px;color:var(--text-2);font-size:13px}.faq-list details[open] summary span{transform:rotate(45deg)}
.subhero{padding:62px 0 48px;background:linear-gradient(180deg,var(--sky-soft),transparent)}.subhero-grid{display:grid;grid-template-columns:1fr .72fr;gap:44px;align-items:center}.subhero h1{font-size:clamp(42px,5vw,68px)}.subhero p{font-size:16px;color:var(--text-2);max-width:700px}.subhero-media{height:330px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-hover)}.subhero-media img{width:100%;height:100%;object-fit:cover}
.page-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.tab-btn{border:1px solid var(--line);background:white;color:var(--text-2);padding:8px 13px;border-radius:999px;cursor:pointer}.tab-btn.active{background:var(--navy);color:white}.tab-panel{display:none}.tab-panel.active{display:block}
.prose{max-width:860px}.prose h2{color:var(--navy);margin-top:34px}.prose p,.prose li{color:var(--text-2)}.notice-box{padding:18px;background:var(--accent-soft);border:1px solid rgba(217,121,69,.18);border-radius:14px;color:#805032}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.info-card{padding:20px;background:white;border:1px solid var(--line);border-radius:16px}.info-card h3{color:var(--navy);margin:0 0 7px}.info-card p{color:var(--text-2);font-size:13px;margin:0}.steps{counter-reset:step;display:grid;gap:14px}.step{position:relative;padding:20px 20px 20px 72px;background:white;border:1px solid var(--line);border-radius:16px}.step:before{counter-increment:step;content:counter(step);position:absolute;left:20px;top:18px;width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:var(--sky-soft);color:var(--primary);font-weight:900}.step h3{margin:0 0 4px;color:var(--navy)}.step p{margin:0;color:var(--text-2);font-size:13px}.search-page{padding:48px 0}.search-results{margin-top:28px}.empty-state{text-align:center;padding:70px 20px;background:#fff;border:1px solid var(--line);border-radius:20px}.watch-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px}.player{aspect-ratio:16/9;background:var(--navy-dark);border-radius:18px;overflow:hidden;position:relative}.player video{width:100%;height:100%;background:#000}.player-placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#cde0e8;padding:30px}.player-placeholder strong{display:block;font-size:21px;color:#fff;margin-bottom:6px}.comments{display:grid;gap:12px}.comment{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:13px;background:white;border:1px solid var(--line);border-radius:14px}.comment .avatar{width:38px;height:38px}.comment p{margin:2px 0;color:var(--text-2);font-size:13px}
.site-footer{background:var(--navy-dark);color:#9db4be;margin-top:60px;padding:54px 0 24px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:35px}.footer-brand p{max-width:360px;font-size:13px}.site-footer .brand strong{color:#fff}.site-footer .brand small{color:#6e8c99}.footer-grid>div{display:grid;align-content:start;gap:8px}.footer-grid b{color:#fff;margin-bottom:6px}.footer-grid a{font-size:13px}.footer-grid a:hover{color:white}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:25px;margin-top:34px;border-top:1px solid rgba(255,255,255,.08);font-size:11px}.mobile-nav{display:none}
@media(max-width:1100px){.desktop-nav{display:none}.video-grid,.live-grid{grid-template-columns:repeat(2,1fr)}.creator-strip{grid-template-columns:repeat(3,1fr)}.feature-grid,.hero-grid,.subhero-grid,.app-grid,.watch-layout{grid-template-columns:1fr}.hero-visual{min-height:480px}.footer-grid{grid-template-columns:repeat(3,1fr)}.footer-brand{grid-column:1/-1}.bento{grid-template-columns:1fr 1fr}.bento-card:first-child{grid-row:span 1;grid-column:span 2}.feature-grid .editor-list{grid-template-columns:1fr 1fr}}
@media(max-width:760px){body{padding-bottom:66px}.wrap{width:min(100% - 24px,var(--wrap))}.announcement{font-size:11px}.header-row{height:62px}.header-tools .tool-text{display:none}.hero{padding-top:34px}.hero h1,.subhero h1{font-size:42px}.hero-grid{gap:24px}.hero-visual{min-height:390px}.hero-image{inset:0 40px 45px 0}.float-panel{width:190px;padding:12px}.float-panel.hot{top:25px}.float-panel.live{left:15px}.section{padding:46px 0}.section-head{align-items:start}.section-head h2{font-size:30px}.section-head p{font-size:13px}.text-link{font-size:12px}.video-grid,.live-grid,.topic-grid,.anchor-grid,.info-grid,.feature-list,.split,.two-col,.magazine-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.feature-grid .editor-list{grid-template-columns:1fr}.horizontal-track{grid-auto-columns:82%}.creator-strip{grid-template-columns:repeat(2,1fr)}.bento{display:grid;grid-template-columns:1fr;grid-template-rows:auto}.bento-card:first-child{grid-column:auto}.bento-card{height:230px}.story-mini{grid-template-columns:110px 1fr}.story-mini img{width:110px;height:88px}.app-grid{gap:20px}.phone-stage{min-height:390px}.callout{grid-template-columns:1fr}.subhero-media{height:240px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);z-index:60;left:0;right:0;bottom:0;height:64px;background:rgba(255,255,255,.96);backdrop-filter:blur(15px);border-top:1px solid var(--line)}.mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:17px;color:var(--text-2)}.mobile-nav span{font-size:10px;margin-top:1px}.ranking-list li{grid-template-columns:36px 1fr}.rank-state{display:none}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:8px}}
