@font-face{font-family:Jost;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/jost-latin-400.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/jost-latin-500.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/jost-latin-700.woff2) format("woff2")}

:root{
color-scheme:light;
--bg:#f6f1f5;--surface:#ebe3ea;--ink:#160a12;--mut:#4a3c46;--acc:#b5124d;--acc-ink:#fff;--acc-strip:#a50f45;
--f1:#470c35;--f1-ink:#fff;--f1-mut:#f7edf3;--f1-step:#74295d;--f1-acc:#ff488b;--f1-acc-ink:#0d060b;
--f2:#fff;--f2-ink:#101421;
--sans:Jost,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
--ease:cubic-bezier(.16,1,.3,1);
--m:clamp(16px,2.8vw,40px);--gut:clamp(12px,1.7vw,24px);
--s:14px;--b:17px;--l:22px;--h:clamp(34px,4.4vw,64px);--d:clamp(38px,6.8vw,104px);--fig:clamp(76px,10vw,150px);
--gap:clamp(96px,11vw,176px)}
[data-theme=dark]{
color-scheme:dark;
--bg:#0d060b;--surface:#1b0e17;--ink:#fff;--mut:#c2b6be;--acc:#ff488b;--acc-ink:#0d060b;--acc-strip:#ff6aa0}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--b)/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-underline-offset:4px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.field :focus-visible,.stage :focus-visible{outline-color:var(--f1-acc)}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:700}
.skip{position:absolute;left:var(--m);top:-80px;background:var(--acc);color:var(--acc-ink);padding:12px 18px;z-index:20;text-decoration:none}
.skip:focus{top:8px}
.frame{padding:0 var(--m);width:100%;max-width:1760px;margin:0 auto}

/* bar */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:20px;height:64px;padding:0 var(--m);background:var(--bg)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--b);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;margin-right:auto}
.brand i{width:22px;height:22px;display:grid;gap:3px;align-content:center}
.brand b{height:5px;background:var(--acc)}
.brand b:nth-child(2){margin-left:5px;margin-right:0}
.brand b:nth-child(3){margin-right:5px}
.links{display:flex;gap:28px}
.links a{text-decoration:none;font-size:var(--b);font-weight:500;padding:8px 0;transition:color .2s}
.links a:hover{color:var(--acc)}
.tools{display:flex;gap:10px;align-items:center}
.seg{display:flex;background:var(--surface);padding:3px;gap:2px}
.seg button{background:none;border:0;color:var(--mut);height:36px;min-width:40px;padding:0 10px;font:500 var(--s) var(--sans);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink)}
.seg svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:var(--acc);color:var(--acc-ink);font-weight:700;font-size:var(--b);text-decoration:none;transition:transform .25s var(--ease),filter .2s}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(2px)}
.tlink{font-weight:500;padding:12px 2px;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--acc);transition:color .2s}
.tlink:hover{color:var(--acc)}

/* hero */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:clamp(40px,7vw,104px) var(--m) 0;max-width:1760px;margin:0 auto}
h1.lines{grid-column:1/-1;font-size:var(--d);line-height:.98;letter-spacing:-.03em}
:lang(en) h1,:lang(en) h2{text-transform:uppercase}
.lines .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.lines [data-line]{display:block}
.hero-side{grid-column:1/5;grid-row:2;padding-top:44px;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.sub{margin:0;font-size:var(--l);line-height:1.35;max-width:22em}
.actions{display:grid;grid-template-columns:auto auto;justify-content:start;gap:8px 28px;align-items:center}
.actions .btn{grid-column:1/-1;justify-self:start}
.stage{grid-column:5/-1;grid-row:2;margin:44px calc(-1 * var(--m)) 0 0;background:var(--f1);color:var(--f1-ink);clip-path:polygon(72px 0,100% 0,100% 100%,0 100%,0 72px);padding:clamp(28px,3.4vw,52px) var(--m) clamp(28px,3.4vw,52px) clamp(28px,4vw,56px)}
.cab{display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,17vw,250px);gap:var(--gut);align-items:start}
.screen{aspect-ratio:4/3;background:#05040c}
.screen iframe{display:block;width:100%;height:100%;border:0;background:#05040c}
.pick{display:flex;flex-direction:column;gap:14px}
.pick-list{display:flex;flex-direction:column;gap:6px}
.pk{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 12px;border:0;background:var(--f1-step);color:var(--f1-ink);text-align:left;cursor:pointer;line-height:1.2;font-size:var(--s);transition:background .2s,transform .25s var(--ease)}
.pk:hover{transform:translateX(-4px);background:#8a3a71}
.pk[aria-pressed=true]{background:var(--f1-acc);color:var(--f1-acc-ink);transform:none}
.pk .chip{background:var(--f1-ink);color:var(--f1)}
.pk[aria-pressed=true] .chip{background:var(--f1-acc-ink);color:var(--f1-acc)}
.pk span{min-width:0}
.pk em{display:block;font-style:normal;opacity:.85}
.open{display:flex;align-items:center;min-height:44px;font-weight:700;color:var(--f1-ink)}
.open:hover{color:var(--f1-acc)}
.hint{margin:0;font-size:var(--s);color:var(--f1-mut);line-height:1.4}
.chip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;font-weight:700;font-size:var(--s);background:var(--ink);color:var(--bg)}

/* findings */
.field{background:var(--f1);color:var(--f1-ink);padding-top:var(--gap);overflow:clip}
.field h2{font-size:var(--h);line-height:1;letter-spacing:-.03em}
.lead{margin:16px 0 0;font-size:var(--l);line-height:1.35;max-width:30em}
.field .lead{color:var(--f1-mut)}
.fig{grid-row:3;margin-top:clamp(36px,5vw,64px);min-height:calc(var(--fig) + 100px)}
.big{font-size:var(--fig);line-height:.9;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--f1-acc)}
.big small{font-size:.32em;letter-spacing:0;margin-left:.2em;color:var(--f1-ink);font-weight:500}
.claim{margin:18px 0 0;font-size:var(--l);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.claim span{display:inline-flex;align-items:center;gap:10px}
.field .chip{background:var(--f1-ink);color:var(--f1)}
.field .frame{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gut);align-items:end}
.field .frame>h2,.field .frame>.lead,.field .frame>.fig,.field .frame>.ftnote{grid-column:1}
.picks{grid-column:2;grid-row:1/4;align-self:end;display:flex;flex-direction:column;gap:8px;padding-bottom:6px}
.pill{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:0 22px;border:0;background:var(--f1-step);color:var(--f1-ink);font-weight:500;font-size:var(--l);text-align:left;cursor:pointer;transition:background .2s,transform .25s var(--ease)}
.pill .pv{font-size:var(--s);font-weight:500;opacity:.9;white-space:nowrap}
.pill:hover{background:#8a3a71;transform:translateX(-6px)}
.pill:active{transform:translateY(2px)}
.pill[aria-pressed=true]{background:var(--f1-acc);color:var(--f1-acc-ink);font-weight:700;transform:none}
.ftnote{margin:20px 0 0;grid-row:4;color:var(--f1-mut);max-width:60em}
.bars{margin-top:clamp(40px,6vw,88px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;height:min(58vh,560px);min-height:380px;align-items:end}
.col{height:100%;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.val{font-size:var(--l);font-weight:700;padding:0 0 10px 16px;font-variant-numeric:tabular-nums;white-space:nowrap;height:44px;display:flex;align-items:flex-end}
.bar{height:max(96px,calc((100% - 44px) * var(--r)));background:var(--f1-step);padding:14px 16px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;transition:height .8s var(--ease),background .3s;line-height:1.15}
.bar .ltr{font-size:var(--h);line-height:1;font-weight:700}
.bar .nmx{font-size:var(--s);opacity:.92;overflow-wrap:anywhere}
.col.win .bar{background:var(--f1-acc);color:var(--f1-acc-ink)}
.col.win .val{color:var(--f1-acc)}
.col:hover .bar{background:#8a3a71}
.col.win:hover .bar{background:var(--f1-acc);filter:brightness(1.08)}

/* sections */
.blk{padding-top:var(--gap)}
.blk h2{font-size:var(--h);line-height:1;letter-spacing:-.03em}
.blk .lead{color:var(--ink)}

/* games */
.grid{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px var(--gut)}
.card{grid-column:span 2;display:flex;flex-direction:column;min-width:0;--s-bg:var(--acc-strip);--s-ink:var(--acc-ink);--s-btn:var(--acc-ink);--s-btn-ink:var(--acc-strip)}
.card:nth-child(n+4){grid-column:span 3}
.card:nth-child(5n+2){--s-bg:var(--f1);--s-ink:var(--f1-ink);--s-btn:var(--f1-acc);--s-btn-ink:var(--f1-acc-ink)}
.card:nth-child(5n+3){--s-bg:var(--f2);--s-ink:var(--f2-ink);--s-btn:var(--f2-ink);--s-btn-ink:#fff}
.card:nth-child(5n+4){--s-bg:var(--surface);--s-ink:var(--ink);--s-btn:var(--acc);--s-btn-ink:var(--acc-ink)}
.card:nth-child(5n+5){--s-bg:var(--ink);--s-ink:var(--bg);--s-btn:var(--acc);--s-btn-ink:var(--acc-ink)}
.shot{flex:none;display:block;position:relative;width:100%;aspect-ratio:1000/660;background:#05040c;border:0;padding:0;overflow:hidden;cursor:pointer}
div.shot{display:flex;align-items:center;justify-content:center;color:#fff;cursor:default}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.shot:hover img{transform:scale(1.035)}
.strip{background:var(--s-bg);color:var(--s-ink);padding:20px 20px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.strip h3{font-size:var(--l);line-height:1.15;letter-spacing:-.01em;display:flex;align-items:center;gap:12px}
.strip .chip{background:var(--s-ink);color:var(--s-bg)}
.pc2{font-size:var(--s);font-weight:500;margin-top:-6px}
.vals{display:flex;flex-wrap:wrap;gap:10px 22px}
.vals div{min-width:0}
.vals b{display:block;font-size:var(--b);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.vals span{display:block;font-size:var(--s);opacity:.85;line-height:1.25}
.strip p{margin:0}
.more summary{display:inline-block;cursor:pointer;font-weight:500;padding:8px 0;list-style:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" +"}
.more[open] summary::after{content:" \2212"}
.more[open]{display:flex;flex-direction:column;gap:18px}
.thumbs{display:flex;gap:6px;margin-top:auto;padding-top:4px}
.thumbs button{padding:0;border:0;width:64px;height:42px;overflow:hidden;background:#05040c;cursor:pointer;opacity:.5;transition:opacity .2s}
.thumbs button:hover{opacity:.85}
.thumbs button[aria-current=true]{opacity:1}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.cbtns{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.play{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;background:var(--s-btn);color:var(--s-btn-ink);font-weight:700;text-decoration:none;transition:transform .25s var(--ease),filter .2s}
.play:hover{filter:brightness(1.12)}
.play:active{transform:translateY(2px)}
.linkbtn{background:none;border:0;padding:12px 0;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;color:var(--s-ink)}
.linkbtn:hover{text-decoration-color:currentColor}
.card :focus-visible{outline-color:var(--ink)}
.strip :focus-visible{outline-color:var(--s-ink)}
.badge{display:inline-flex;align-items:center;font-size:var(--s);font-weight:700;padding:2px 10px;background:var(--s-ink);color:var(--s-bg)}

/* results table */
.step{max-width:12em}
.step span:last-child{display:block;padding-left:calc(2 * (100% / 12))}
:lang(zh) .step span:last-child{padding-left:2em}
.tablewrap{margin-top:clamp(36px,5vw,72px)}
table{border-collapse:collapse;width:100%;font-size:var(--b)}
th,td{padding:16px 14px;text-align:right;font-variant-numeric:tabular-nums}
th{font-size:var(--s);font-weight:500;color:var(--mut);vertical-align:bottom}
th:first-child,td:first-child,th:nth-child(2),td:nth-child(2){text-align:left}
tbody tr:nth-child(odd){background:var(--surface)}
td.name{font-weight:700;min-width:240px}
td.name .chip{margin-right:12px;vertical-align:middle}
td.pc{color:var(--mut);font-size:var(--s);min-width:160px}
td.best{color:var(--acc);font-weight:700}
tr.run td{color:var(--mut)}
.note{margin:20px 0 0;max-width:70em}
.note+.note{margin-top:8px}

/* method */
#method .frame{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:clamp(32px,4vw,56px)}
#method h2,.facts,.mbody{grid-column:1/-1}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);row-gap:20px}
.facts div{display:flex;flex-direction:column-reverse}
.facts span{font-size:var(--s);color:var(--mut)}
.facts b{font-size:var(--h);line-height:1.05;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mbody{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:32px}
.mlist{grid-column:1/8;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.mlist li{font-size:var(--l);line-height:1.35}
.two{grid-column:8/-1;background:var(--surface);padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:28px}
.two h3{font-size:var(--l);margin-bottom:10px}
.two p{margin:0;color:var(--ink)}

/* raw */
.rawgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gut);align-items:start}
.raw{list-style:none;margin:0;padding:0}
.raw li a{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:56px;padding:6px 14px;text-decoration:none;transition:background .2s,color .2s}
.raw li:nth-child(odd) a{background:var(--surface)}
.raw li a:hover{background:var(--acc);color:var(--acc-ink)}
.raw li a:hover .kind{color:var(--acc-ink)}
.raw .nm{display:flex;align-items:center;gap:12px;min-width:0;overflow-wrap:anywhere}
.raw .nm i{width:14px;height:14px;border-radius:50%;background:var(--acc);flex:none}
.raw li a:hover .nm i{background:var(--acc-ink)}
.raw .kind{font-size:var(--s);color:var(--mut);text-align:right;flex:none}

/* footer */
.foot{margin-top:var(--gap);padding:0 var(--m) 32px;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;font-size:var(--s);color:var(--mut)}
.foot nav{display:flex;gap:24px}
.foot a{color:var(--ink);padding:10px 0;display:inline-block}
.foot .r{text-align:right}
.err{margin:40px var(--m);padding:20px;background:var(--surface);color:var(--ink)}

/* motion */
@media(prefers-reduced-motion:no-preference){
.js .lines [data-line]{transform:translateY(108%);animation:line-up 900ms var(--ease) forwards;animation-delay:calc(var(--i) * 110ms + 150ms)}
.js [data-fade]{opacity:0;transform:translateY(20px);animation:fade-up 700ms var(--ease) forwards;animation-delay:700ms}
.js .actions[data-fade]{animation-delay:800ms}
.js .stage{animation:stage-in 1000ms var(--ease) both;animation-delay:350ms}
.js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js [data-rv].in{opacity:1;transform:none}
.js .bars .bar{transition:height .8s var(--ease),background .3s}
.js .shot img{animation:drift 22s ease-in-out infinite alternate}
}
@keyframes line-up{to{transform:none}}
@keyframes fade-up{to{opacity:1;transform:none}}
@keyframes stage-in{from{transform:translateX(5%);opacity:0}}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}}

/* tablet */
@media(max-width:1100px){
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.card,.card:nth-child(n+4){grid-column:span 1}
.card:nth-child(5){grid-column:1/-1}
table,thead,tbody,tr,td{display:block}
thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
tbody tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px 16px;padding:20px 18px}
td{padding:0;text-align:left!important;min-width:0!important}
td.name,td.pc{grid-column:1/-1}
td[data-l]::before{content:attr(data-l);display:block;font-size:var(--s);color:var(--mut);font-weight:400}
td.best{font-weight:700}
.step span:last-child{padding-left:0}
}
@media(max-width:900px){
.links{display:none}
.hero{display:flex;flex-direction:column;padding-top:40px}
.hero-side{padding-top:28px}
.stage{margin:36px calc(-1 * var(--m)) 0;padding:28px var(--m)}
.cab{grid-template-columns:1fr;gap:18px}
.pick{flex-direction:column}
.pick-list{flex-direction:row;flex-wrap:wrap}
.pk{flex:1 1 calc(33% - 6px);min-width:0}
.pk em{display:none}
.pk:hover{transform:none}
.facts{display:flex;flex-wrap:wrap;gap:20px 36px}
.mbody{grid-template-columns:1fr}
.mlist,.two{grid-column:auto}
.field .frame{grid-template-columns:1fr}
.picks{grid-column:1;grid-row:4;margin-top:28px}
.ftnote{grid-row:5}
.pill:hover{transform:none}
.rawgrid{grid-template-columns:1fr;row-gap:28px}
.foot{grid-template-columns:1fr;justify-items:start;gap:4px}
.foot .r{text-align:left}
.bars{grid-template-columns:1fr;height:auto;min-height:0;gap:6px;padding:0 var(--m)}
.col{height:52px;flex-direction:row;align-items:center;gap:14px}
.val{order:2;height:auto;padding:0;width:92px;flex:none;align-items:center;justify-content:flex-end;font-size:var(--b)}
.bar{order:1;height:100%!important;width:calc((100% - 106px) * var(--r));min-width:70px;flex-direction:row;align-items:center;gap:10px;padding:0 14px}
.bar .ltr{font-size:var(--b)}
.bar .nmx{display:none}
.field{padding-bottom:var(--gap)}
.fig{min-height:0}
}
@media(max-width:560px){
.tools{gap:6px}
.seg button{min-width:36px;padding:0 6px}
.brand{font-size:var(--s)}
.pk{flex:1 1 calc(50% - 6px)}
.actions{grid-template-columns:1fr 1fr;gap:4px 16px}
.actions .btn{justify-self:stretch}
.tlink{padding:12px 0}
.grid{grid-template-columns:1fr}
.card:nth-child(5){grid-column:auto}
.raw li a{flex-direction:column;align-items:flex-start;gap:0;padding:10px 14px}
.raw .kind{text-align:left;padding-left:26px}
}