/* 全站只来自形象规范：红黑世界，Archivo 大字，JetBrains Mono 正文。 */
:root{
  --red:#ff0000; --black:#000; --white:#fff; --line:#6b0000;
  --display:"Archivo","Arial Black",Impact,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --big:clamp(64px,18vw,260px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--red);color:var(--black);font-family:var(--mono);font-size:15px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--white);outline-offset:2px}
.disp{font-family:var(--display);font-stretch:125%;font-weight:900;letter-spacing:-.02em;line-height:.86}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1280px;margin:0 auto}
.dots{background-image:radial-gradient(circle,#000 1.35px,transparent 1.75px);background-size:134px 134px;background-position:center}

/* 导航 */
.nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:14px;white-space:nowrap}
.nav a{text-decoration:none}
.nav a:hover,.nav a[aria-current=page]{text-decoration:underline;text-underline-offset:4px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px;flex-wrap:wrap}
.bar .home{font-family:var(--display);font-stretch:125%;font-weight:900;text-decoration:none;font-size:16px}
.black .bar{color:var(--red)}

/* 首屏 */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;max-height:960px;overflow:hidden;isolation:isolate;--disk-width:min(92vw,125vh)}
.hero.dots{background-image:none}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,#000 1.35px,transparent 1.75px);background-size:134px 134px;background-position:center;transform:scale(calc(1 - var(--pull,0)*.8)) rotate(calc(var(--pull,0)*12deg));filter:blur(calc(var(--pull,0)*12px));opacity:calc(1 - var(--pull,0))}
.corner{position:absolute;z-index:3;font-size:var(--big);display:flex;flex-direction:column;gap:6px;font-variant-numeric:tabular-nums}
.corner small{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1}
.tl{top:12px;left:max(14px,env(safe-area-inset-left,0px))}
.tr{top:12px;right:max(14px,env(safe-area-inset-right,0px));align-items:flex-end}
.bl{bottom:12px;left:max(14px,env(safe-area-inset-left,0px));flex-direction:column-reverse}
.br{bottom:12px;right:max(14px,env(safe-area-inset-right,0px));align-items:flex-end;flex-direction:column-reverse}
.hero .nav{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:3}
.hole{position:absolute;left:50%;top:50%;width:calc(var(--disk-width)*.34);aspect-ratio:1;transform:translate(-50%,-50%) scale(var(--hole-scale,1));border-radius:50%;background:#000;display:grid;place-items:center;z-index:2;border:1px solid #fff;box-shadow:0 0 4px 2px #ff0000,0 0 18px 5px #6b0000}
.hole::before{content:"";position:absolute;inset:-112%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#000 0,#000 32%,transparent 100%);pointer-events:none}
.hole::after{content:"";position:absolute;left:-97%;width:294%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#6b0000 12%,#ff0000 30%,#fff 48%,#ff0000 63%,#6b0000 86%,transparent);box-shadow:0 0 9px 2px #ff0000;pointer-events:none}
.hole svg{position:absolute;inset:-25%;width:150%;height:150%;filter:drop-shadow(0 0 2px #ff0000)}
.hand{stroke:var(--red);stroke-linecap:round}
.checking .hero:not(.hole-ready) .hole{--hole-scale:1.15}
.hole-ready .hole{background:none;border-color:transparent;box-shadow:none}
.hole-ready .hole::before,.hole-ready .hole::after{display:none}
.hole-intro .hole svg{opacity:var(--hands,0);transform:rotate(calc((1 - var(--hands,0))*-160deg)) scale(var(--hands,0))}
.hole-intro .rate{opacity:var(--hands,0)}
.hole-intro .corner,.hole-intro #f,.hole-intro #note,.hole-intro .heroca{will-change:translate,scale,rotate,filter,opacity}
.checking #sh{animation:whip .5s linear infinite;transform-origin:100px 100px;transform-box:view-box}
.checking #mh{animation:whip 2.5s linear infinite;transform-origin:100px 100px;transform-box:view-box}
@keyframes whip{to{transform:rotate(360deg)}}
.rate{position:absolute;top:62%;width:100%;text-align:center;color:var(--red);pointer-events:none;margin:0;text-shadow:0 0 4px #000}
.rate b{display:block;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(17px,3vw,42px);line-height:1}
.rate span{font-size:clamp(6px,.8vw,10px);letter-spacing:.1em}
.ask{position:absolute;left:50%;top:calc(50% + min(26vh,23vw) + 14px);transform:translateX(-50%);width:min(560px,calc(100% - 32px));z-index:3}
.ask form{display:flex;background:#000;border:2px solid #000}
.ask input{flex:1;min-width:0;background:#000;color:var(--white);border:0;padding:12px;font:inherit;font-size:14px}
.ask input::placeholder{color:var(--red)}
.ask button{background:var(--red);color:#000;border:0;padding:0 16px;font-family:var(--display);font-stretch:125%;font-weight:900;cursor:pointer}
.ask button:disabled{opacity:.6;cursor:wait}
.note{min-height:18px;font-size:12px;font-weight:700;text-align:center;margin:6px 0 0}

/* 判决 */
.swallow{position:fixed;inset:0;background:#000;z-index:10;clip-path:circle(0 at 50% 50%);transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.swallow.on{clip-path:circle(150% at 50% 50%)}
.verdict{position:fixed;inset:0;z-index:11;display:none;flex-direction:column;align-items:center;gap:16px;text-align:center;overflow:auto;
  padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.verdict.on{display:flex}
.verdict>:first-child{margin-top:auto}.verdict>:last-child{margin-bottom:auto}
.verdict.busted{color:var(--red)}
.verdict.clean{background:var(--red);color:#000}
.word{font-size:clamp(56px,16vw,230px)}
.verdict.on .word{animation:slam .28s cubic-bezier(.2,1.4,.4,1) both}
.verdict.busted.on{animation:shake .3s .22s both}
@keyframes slam{from{transform:scale(3.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:none}25%{transform:translate(-7px,4px)}50%{transform:translate(6px,-5px)}75%{transform:translate(-3px,3px)}}
.line{margin:0;font-weight:700;font-size:17px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 28px;font-size:13px;text-align:left;max-width:680px;width:100%}
.facts div{min-width:0;overflow-wrap:anywhere}
.facts b{display:block;font-size:11px;letter-spacing:.12em;opacity:.7}
.acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{border:2px solid currentColor;background:none;color:inherit;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:14px;padding:9px 14px;cursor:pointer;text-decoration:none}
.btn:hover{background:currentColor}
.btn:hover span{color:var(--red)}
.clean .btn:hover span{color:var(--red)}
#cardPreview{width:min(420px,100%);height:auto;display:block;border:1px solid currentColor}

/* 内容页 */
.page{padding-block:8px 64px;overflow-x:clip}
.head{font-size:clamp(44px,11vw,160px);margin:20px 0 28px}
.black{background:#000;color:var(--red)}
.sub{font-weight:700;margin:-14px 0 32px;font-size:16px}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 48px;max-width:1100px}
.cols2>*{min-width:0}
.sec h3{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:24px;line-height:1.1;margin:0 0 8px;border-top:3px solid currentColor;padding-top:8px}
.sec p,.sec ul,.sec ol{margin:0 0 8px}
.sec ul,.sec ol{padding-left:20px}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;border-top:2px solid var(--red);padding-top:14px}
.nums div{min-width:0}
.nums b{display:block;font-size:clamp(36px,8vw,110px)}
.nums span{font-size:12px;letter-spacing:.08em;display:block;margin-top:8px}
.tbl{overflow-x:auto;margin-top:36px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:9px 10px 9px 0;border-bottom:1px solid var(--line)}
th{font-size:11px;letter-spacing:.12em}
td.hi{color:var(--white);font-weight:700}
.flow{margin:36px 0 0;max-width:70ch}
.record{background:var(--red);color:#000;padding:18px;margin-top:32px;max-width:860px}
.record h3{margin:0 0 8px;font-size:clamp(24px,4vw,40px)}
.record p{margin:0}
.fine{font-size:12px;opacity:.8;margin-top:20px;max-width:80ch}
.ca{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 28px;font-size:14px}
.ca code{overflow-wrap:anywhere;font:inherit;font-weight:700}
.heroca{justify-content:center;text-align:center;margin:4px 0 0;padding:7px 10px;background:#000;color:var(--white);font-size:12px;gap:4px 10px}
.heroca>span:first-child{color:var(--red);font-weight:700;letter-spacing:.1em}
.heroca>span:last-child{display:none}
.heroca .btn{padding:3px 10px;font-size:11px}

/* 榜 */
.boardcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.boardcols>*{min-width:0}
.boardcols h2{font-family:var(--display);font-stretch:125%;font-weight:900;margin:0 0 10px;font-size:22px;color:var(--red)}
.row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--white);text-decoration:none}
a.row:hover{background:var(--line)}
.row s{color:var(--red)}
.row.dev{background:var(--line);padding-inline:6px}
.tomb{font-weight:700;color:var(--red)}
.big-rate{font-size:clamp(80px,22vw,300px);margin:0}
.stats{display:flex;flex-wrap:wrap;gap:8px 24px;margin:14px 0 36px;color:var(--white);font-size:14px}
footer{padding-block:20px 28px;font-size:12px;font-weight:700}
.samp{position:fixed;right:max(8px,env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:20;background:#fff;color:#000;font-size:11px;font-weight:700;padding:3px 7px}
.scrollnav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:8;display:flex;align-items:center;max-width:calc(100% - 32px);padding:5px;background:var(--black);color:var(--red);border:2px solid var(--red);isolation:isolate;--progress:0}
.nav-window{min-width:0;overflow-x:auto;scrollbar-width:none}
.nav-window::-webkit-scrollbar{display:none}
.nav-items{position:relative;display:flex;width:max-content}
.nav-items a{position:relative;padding:10px 12px;white-space:nowrap;text-decoration:none;font:900 13px var(--display);font-stretch:125%;transition:color .28s}
.nav-items a[aria-current=true]{color:var(--black)}
.nav-items a:focus-visible{outline-offset:-3px}
.nav-indicator{position:absolute;inset:0 auto 0 0;background:var(--red);transition:transform .3s cubic-bezier(.2,.8,.2,1),width .3s;pointer-events:none}
#navClock{padding:0 12px;border-left:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.nav-progress{position:absolute;bottom:-2px;left:0;height:3px;width:100%;background:var(--red);transform:scaleX(var(--progress));transform-origin:left;pointer-events:none}
section[id]{scroll-margin-top:96px}
.page{padding-block:40px 72px}
.hero .hole-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hole svg{z-index:1;pointer-events:none}
.rate{z-index:2}
.marquee{overflow:hidden;background:var(--black);color:var(--red);border-block:2px solid var(--red);font:900 clamp(18px,3vw,38px)/1.3 var(--display);font-stretch:125%;padding-block:8px}
.marquee:nth-of-type(even){background:var(--red);color:var(--black);border-color:var(--black)}
.marquee-track{display:flex;width:max-content;animation:march 36s linear infinite}
.marquee-track span{flex:none;white-space:nowrap;padding-right:.35em}
@keyframes march{to{transform:translateX(-50%)}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .4s var(--delay),transform .4s var(--delay)}
.head.reveal{transform:scale(1.6);transform-origin:left center;transition:opacity .24s,transform .28s cubic-bezier(.2,1.1,.4,1)}
.revealed{opacity:1;transform:none!important}
.nums b{font-variant-numeric:tabular-nums}
.counting div:not(:first-child) b{animation:zero-tick .25s 3}
@keyframes zero-tick{50%{transform:translateY(-3px);opacity:.4}}

@media(max-width:720px){
  .nav{gap:6px 14px;font-size:13px}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .scrollnav{top:auto;bottom:0;max-width:100%;width:100%;padding:5px 5px calc(5px + env(safe-area-inset-bottom,0px));transform:none;left:0}
  .nav-window{width:100%}
  .nav-items{min-width:100%;justify-content:space-between}
  .nav-items a{padding:12px 10px;font-size:12px}
  #navClock{display:none}
  section[id]{scroll-margin-top:16px}
  .hero{--disk-width:96vw}
  .hole{top:43%}
  .ask{top:calc(43% + 32vw + 8px)}
  .hero{min-height:640px;max-height:none}
  .bl,.br{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols2,.boardcols{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .samp{right:auto;left:50%;bottom:calc(62px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);white-space:nowrap;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .swallow,.hole{transition:none}
  .verdict.on,.verdict.busted.on,.verdict.on .word{animation:none}
  .checking #sh,.checking #mh{animation:none}
  .nav-indicator,.nav-items a,.reveal,.head.reveal{transition:none}
  .reveal,.head.reveal{opacity:1;transform:none}
  .marquee-track,.counting div:not(:first-child) b{animation:none}
  .hole,.hole svg,.rate{transform:none;animation:none;transition:none}
  .hole{transform:translate(-50%,-50%)}
  .checking .hero:not(.hole-ready) .hole{--hole-scale:1}
}