:root{color-scheme:dark;--bg:#121312;--panel:#1b1c1a;--ink:#f5eddd;--muted:#b8b1a6;--dim:#a29c91;--line:#34342e;--amber:#e9b56d;--mono:ui-monospace,"SF Mono",Consolas,monospace;--display:"Songti SC","Noto Serif CJK SC","STSong",Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 77% 2%,#25201a 0,transparent 33rem),var(--bg);color:var(--ink);font:15px/1.6 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
a:hover{color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
[hidden]{display:none!important}
.wrap{width:min(1220px,calc(100% - 92px));margin-inline:auto}
.topbar{border-bottom:1px solid var(--line)}
.topbar-inner,.topbar nav{display:flex;align-items:center;justify-content:space-between}
.topbar-inner{height:66px}
.topbar nav{gap:32px;color:var(--muted);font-size:13px}
.brand{display:flex;align-items:center;gap:10px;font:700 13px var(--mono);letter-spacing:.08em}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,.92fr);gap:30px;align-items:center;min-height:417px}
.intro{padding:56px 0 62px}
.kicker{margin:0 0 14px;color:var(--amber);font:700 11px/1.5 var(--mono);letter-spacing:.18em}
.kicker span{color:var(--muted)}
.kicker .volume{margin-left:10px;color:var(--dim)}
h1,h2,h3,p{margin-top:0}
h1{font:800 clamp(47px,6.9vw,102px)/.98 var(--display);margin-bottom:25px;letter-spacing:-.06em}
h1 span{font:inherit;color:var(--amber);white-space:nowrap}
.intro-copy{max-width:370px;margin-bottom:24px;color:var(--muted);font-size:16px;line-height:1.8}
.edition{color:var(--dim);font:12px/1.6 var(--mono);letter-spacing:.05em;margin:0;display:flex;align-items:center;gap:10px}
.edition i{display:inline-block;width:7px;height:7px;background:var(--amber);border-radius:50%;box-shadow:0 0 16px #e9b56d66}
.hero-art{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:27px 0;isolation:isolate}
.hero-poster,.poster{display:block;position:relative;width:100%;border:1px solid #ffffff22;padding:0;overflow:hidden;background:#282723;aspect-ratio:2/3}
.hero-poster{border-radius:6px;box-shadow:0 15px 32px #0008;transform:rotate(-7deg) translateY(18px)}
.hero-2{transform:translateY(-9px);z-index:1}
.hero-3{transform:rotate(7deg) translateY(18px)}
.hero-poster img,.poster img{display:block;width:100%;height:100%;object-fit:cover}
.hero-poster span,.rank{position:absolute;top:8px;left:8px;padding:4px 7px;border-radius:3px;background:#11120fef;color:var(--ink);font:700 12px/1.35 var(--mono);font-variant-numeric:tabular-nums}
.hero-poster span{inset:auto 9px 9px auto}
.ranking{border-top:1px solid var(--line);padding-top:30px;padding-bottom:66px;scroll-margin-top:20px}
.ranking-heading{display:flex;justify-content:space-between;align-items:end;gap:10px}
.ranking-heading h2,.method h2{font:700 clamp(28px,4vw,44px)/1.12 var(--display);margin-bottom:18px}
.ranking-heading .kicker{margin-bottom:7px}
.ranking-heading>p{color:var(--dim);font-size:12px;margin-bottom:19px}
.tools{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}
.toggle{display:flex;gap:6px}
.toggle button,.search{border:1px solid var(--line);background:var(--panel);border-radius:6px;min-height:42px}
.toggle button{padding:6px 11px;white-space:nowrap;color:var(--muted);font-size:13px}
.toggle button span{color:var(--dim);margin-left:5px;font:11px var(--mono)}
.toggle button[aria-pressed="true"]{border-color:#87693f;background:#372b1c;color:#f8d8a6}
.toggle button[aria-pressed="true"] span{color:var(--amber)}
.search{display:flex;align-items:center;gap:9px;padding-inline:11px;color:var(--muted);width:min(290px,100%)}
.search svg{stroke:currentColor;stroke-width:1.7;flex:none}
.search input{background:none;border:0;min-width:0;width:100%;height:40px;outline:0;font-size:14px}
.search input::placeholder{color:var(--dim);opacity:1}
.search:focus-within{outline:2px solid var(--amber);outline-offset:2px}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 18px;padding:0;margin:0;list-style:none}
.film{min-width:0;border-bottom:1px solid var(--line);padding-bottom:12px;content-visibility:auto;contain-intrinsic-block-size:auto 405px}
.poster{border-radius:5px}
.poster img{transition:transform .25s ease}
.poster:hover img{transform:scale(1.035)}
.poster-unavailable::after{content:"海报暂不可用";position:absolute;inset:43% 0 auto;color:var(--muted);font-size:12px;text-align:center}
.unavailable{visibility:hidden}
.badge{position:absolute;right:8px;top:8px;color:#22190c;background:var(--amber);padding:4px 6px;border-radius:3px;font:700 11px/1.5 system-ui,sans-serif}
.film-caption{padding:10px 1px 0}
.film-caption h2{font-size:17px;line-height:1.25;margin:0 0 4px}
.film-title{text-align:left;overflow-wrap:anywhere;border:0;padding:0;background:none;font-weight:700}
.film-title:hover{color:var(--amber)}
.alt-title{font-size:12px;color:var(--dim);overflow-wrap:anywhere;margin:0 0 6px}
.film-meta,.signals{display:flex;align-items:baseline;justify-content:space-between;gap:5px;color:var(--muted);font:12px/1.5 var(--mono)}
.film-meta{padding-top:2px}
.score{color:var(--amber);font-weight:700;font-size:14px}
.signals{justify-content:start;gap:12px;color:var(--dim);padding-top:4px;font-size:11px}
.genre{font:11px system-ui,sans-serif}
.empty{margin:40px 0;color:var(--muted)}
.method{background:#1b1b18;border-block:1px solid var(--line);padding:53px 0}
.method-inner{display:grid;grid-template-columns:.8fr 1.5fr;gap:clamp(28px,8vw,112px)}
.method h3{font-size:15px;margin-bottom:6px}
.method p:not(.kicker){color:var(--muted);max-width:68ch}
.method .formula{padding:11px 14px;border-left:2px solid var(--amber);background:#24221b;font:13px/1.6 var(--mono)}
.sources a,.imdb{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
footer>.wrap{display:flex;justify-content:space-between;padding:20px 0;color:var(--dim);font:12px/1.4 var(--mono)}
dialog{max-width:min(520px,calc(100% - 30px));width:100%;max-height:calc(100dvh - 40px);border:1px solid #5b503b;border-radius:10px;background:var(--panel);color:var(--ink);padding:0;box-shadow:0 20px 70px #0008}
dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}
.detail-shell{padding:27px;position:relative}
#close-detail{position:absolute;right:14px;top:12px;border:1px solid var(--line);background:var(--bg);border-radius:6px;width:34px;height:34px;font:24px/1 system-ui}
#detail-title{margin:0 29px 3px 0;font:700 30px/1.2 var(--display);overflow-wrap:anywhere}
.detail-subtitle,.empty-source{color:var(--muted);margin-bottom:15px;font-size:13px}
.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:18px}
.detail-stats div{border:1px solid var(--line);padding:8px 10px;border-radius:5px}
.detail-stats strong,.detail-stats span{display:block}
.detail-stats strong{color:var(--amber);font:700 21px/1.3 var(--mono)}
.detail-stats span,.references small{color:var(--muted);font-size:11px}
.detail-shell h3{font-size:14px;margin-bottom:5px}
.references{list-style:none;padding:0;margin:0 0 13px}
.references li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px;border-bottom:1px solid var(--line);padding:4px 0;font-size:13px}
.imdb{font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:1020px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hero{min-height:355px}.wrap{width:min(100% - 66px,1220px)}}
@media(max-width:760px){.wrap{width:calc(100% - 34px)}.hero{grid-template-columns:1fr;gap:0}.intro{padding:35px 0 13px}.hero-art{max-width:440px;margin:auto;padding:12px 13px 33px}.hero-poster{transform:rotate(-5deg) translateY(8px)}.hero-2{transform:translateY(-4px)}.hero-3{transform:rotate(5deg) translateY(8px)}.hero-art{width:100%}h1{font-size:clamp(48px,10vw,78px);margin-bottom:15px}.intro-copy{margin-bottom:13px;font-size:14px}.topbar-inner{height:57px}.topbar nav{gap:16px}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 10px}.film{contain-intrinsic-block-size:auto 280px}.method-inner{grid-template-columns:1fr;gap:16px}.method{padding:36px 0}}
@media(max-width:460px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tools{flex-wrap:wrap;gap:8px}.search{width:100%}.film-caption h2{font-size:15px}.detail-shell{padding:21px}.hero-art{max-width:350px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.poster img{transition:none}}