:root { --ink:#eef1ff; --muted:#9fa8c5; --bg:#090d1b; --panel:#12182a; --panel2:#171f35; --line:rgba(255,255,255,.1); --accent:#ff765b; --mint:#57c7c4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 80% -10%,#293052 0,transparent 32%),var(--bg); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img,video { display:block; max-width:100%; }
button { font:inherit; }
.wrap { width:min(1200px,calc(100% - 40px)); margin:0 auto; }
.topbar { position:sticky; top:0; z-index:5; backdrop-filter:blur(18px); background:rgba(9,13,27,.82); border-bottom:1px solid var(--line); }
.nav { min-height:78px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.brand img { width:35px; height:35px; }
.navlinks { display:flex; align-items:center; gap:5px; flex:1; }
.navlinks a { padding:9px 10px; color:var(--muted); border-radius:10px; font-size:14px; }
.navlinks a:hover,.navlinks a.active { color:var(--ink); background:rgba(255,255,255,.08); }
.menu { display:none; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:10px; padding:8px 10px; cursor:pointer; }
.hero { padding:82px 0 65px; position:relative; overflow:hidden; }
.hero:after { content:""; position:absolute; width:460px; height:460px; right:-120px; top:0; background:linear-gradient(135deg,transparent 35%,rgba(255,118,91,.15),transparent 68%); transform:rotate(18deg); pointer-events:none; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:800; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(42px,7vw,82px); line-height:1.02; max-width:800px; letter-spacing:-.06em; margin:15px 0 22px; }
.hero h1 a { text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:5px; text-underline-offset:9px; }
.lede { max-width:650px; color:#c1c8df; font-size:18px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 17px; border-radius:12px; border:1px solid var(--line); background:var(--panel); font-weight:700; }
.btn.primary { background:var(--accent); color:#1c0b0a; border-color:var(--accent); }
.section { padding:58px 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
.section-head h2 { font-size:30px; letter-spacing:-.03em; margin:0; }
.section-head p { color:var(--muted); margin:4px 0 0; }
.kicker { color:var(--accent); font-size:12px; letter-spacing:.14em; font-weight:800; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:15px; }
.card { min-width:0; }
.poster { aspect-ratio:2/3; overflow:hidden; border-radius:15px; background:linear-gradient(145deg,#283658,#11182c); border:1px solid var(--line); position:relative; }
.poster img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.card:hover .poster img { transform:scale(1.045); }
.poster:after { content:"▶ 演示片段"; position:absolute; bottom:9px; left:9px; background:rgba(9,13,27,.78); padding:3px 7px; border-radius:6px; font-size:11px; color:#fff; }
.card h3 { font-size:16px; margin:10px 0 2px; }
.meta { color:var(--muted); font-size:13px; }
.feature-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; }
.feature { min-height:320px; padding:28px; border-radius:20px; background:linear-gradient(135deg,#1c2945,#12182a); border:1px solid var(--line); position:relative; overflow:hidden; }
.feature:before { content:""; position:absolute; inset:auto -40px -100px auto; width:260px; height:260px; border:1px solid rgba(255,255,255,.15); border-radius:50%; box-shadow:0 0 0 34px rgba(255,255,255,.03),0 0 0 68px rgba(255,255,255,.025); }
.feature h3 { font-size:27px; max-width:380px; margin:9px 0 12px; }
.feature p { color:#b9c1d9; max-width:450px; }
.feature .btn { position:absolute; bottom:25px; left:28px; }
.pill-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.pill { padding:19px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.035); }
.pill strong { display:block; font-size:24px; color:var(--accent); margin-bottom:3px; }
.pill span { color:var(--muted); font-size:14px; }
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.category { padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.category .icon { color:var(--accent); font-size:25px; }
.category h3 { margin:10px 0 5px; }
.category p { color:var(--muted); font-size:14px; margin-bottom:13px; }
.ranklist { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.rank { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:18px; border-top:1px solid var(--line); }
.rank b { font-size:28px; color:var(--accent); }
.rank h3 { margin:0 0 3px; }
.rank p { color:var(--muted); font-size:13px; margin:0; }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.day { background:var(--panel); padding:20px; min-height:145px; }
.day time { color:var(--accent); font-weight:800; font-size:13px; }
.day h3 { font-size:16px; margin:12px 0 5px; }
.day p { margin:0; color:var(--muted); font-size:13px; }
.guide { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; counter-reset:guide; }
.guide article { padding:23px; background:linear-gradient(160deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:16px; }
.guide article:before { counter-increment:guide; content:"0" counter(guide); color:var(--accent); font-weight:800; }
.guide h3 { margin:12px 0 5px; }
.guide p { margin:0; color:var(--muted); font-size:14px; }
.faq { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
details { padding:17px 19px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
summary { cursor:pointer; font-weight:700; }
details p { margin:10px 0 0; color:var(--muted); font-size:14px; }
.subscribe { padding:34px; border-radius:22px; background:linear-gradient(120deg,#273358,#193a43); display:flex; justify-content:space-between; align-items:center; gap:24px; }
.subscribe p { color:#c6d0e8; margin:7px 0 0; }
.footer { padding:34px 0 50px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.footrow { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footlinks { display:flex; gap:14px; flex-wrap:wrap; }
.pagehead { padding:55px 0 30px; }
.pagehead h1 { font-size:clamp(38px,5vw,62px); margin:12px 0; }
.crumb { color:var(--muted); font-size:13px; }
.detail { padding:35px 0 70px; }
.detail-layout { display:grid; grid-template-columns:280px 1fr; gap:30px; align-items:start; }
.detail-poster { aspect-ratio:2/3; border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.detail-poster img { width:100%; height:100%; object-fit:cover; }
.detail h1 { font-size:clamp(36px,5vw,64px); margin:0 0 8px; }
.tag { display:inline-block; background:rgba(87,199,196,.15); color:var(--mint); border-radius:99px; padding:3px 9px; font-size:12px; margin-right:5px; }
.prose { color:#c0c8dc; max-width:720px; }
.player { margin-top:30px; background:#03050a; border:1px solid var(--line); padding:10px; border-radius:18px; }
.player video { width:100%; aspect-ratio:16/9; border-radius:10px; background:#05070d; }
.player-note { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:13px; padding:10px 5px 0; flex-wrap:wrap; }
.episode-list { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0; }
.episode-list a { padding:8px 13px; border:1px solid var(--line); border-radius:9px; color:var(--muted); }
.episode-list a.current { color:var(--ink); border-color:var(--accent); }
.pager { display:flex; justify-content:space-between; gap:12px; margin-top:22px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
:focus-visible { outline:3px solid var(--mint); outline-offset:3px; }
@media (max-width:900px) { .nav { gap:14px; } .navlinks { gap:0; } .navlinks a { padding:8px 7px; font-size:12px; } .grid { grid-template-columns:repeat(3,1fr); } .feature-grid { grid-template-columns:1fr; } .category-grid,.pill-grid,.guide { grid-template-columns:repeat(2,1fr); } .ranklist { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .wrap { width:min(100% - 28px,1200px); } .nav { min-height:66px; justify-content:space-between; } .menu { display:block; } .navlinks { display:none; position:absolute; left:14px; right:14px; top:62px; padding:8px; flex-direction:column; align-items:stretch; background:#131a2d; border:1px solid var(--line); border-radius:12px; } .navlinks.open { display:flex; } .navlinks a { font-size:14px; } .hero { padding:58px 0 38px; } h1 { font-size:50px; } .lede { font-size:16px; } .section { padding:40px 0; } .section-head { display:block; } .section-head h2 { font-size:25px; } .grid { grid-template-columns:repeat(2,1fr); gap:12px; } .feature { min-height:280px; padding:22px; } .category-grid,.pill-grid,.guide,.faq,.ranklist { grid-template-columns:1fr; } .timeline { grid-template-columns:1fr 1fr; } .day { min-height:130px; } .subscribe { display:block; padding:24px; } .subscribe .btn { margin-top:18px; } .detail-layout { grid-template-columns:1fr; } .detail-poster { width:170px; } .pager { display:grid; grid-template-columns:1fr 1fr; } }