@font-face {
    font-family: "Orbitron"; font-weight: 900; font-style: normal; font-display: swap;
    src: url("/fonts/orbitron-900-latin.woff2") format("woff2");
  }
  @font-face {
    font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap;
    src: url("/fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  }
  :root {
    --bg: #05050a;
    --red: #ff2a3d;
    --gold: #ffc94d;
    --cyan: #6fe6ff;
    --dim: rgba(255,255,255,.45);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; overflow: hidden; background: var(--bg); color: #fff; }
  body { font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; cursor: crosshair; user-select: none; }
  canvas { position: fixed; inset: 0; display: block; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* 暗角 + 扫描线 */
  .overlay { position: fixed; inset: 0; pointer-events: none; }
  .vignette { background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.75) 100%); }
  .scan {
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
  }

  /* 副标题 */
  #sub {
    position: fixed; left: 0; right: 0; text-align: center; pointer-events: none;
    padding: 0 16px;
  }
  #sub .line {
    width: 0; height: 1px; margin: 0 auto 22px;
    background: linear-gradient(90deg, transparent, var(--red), var(--gold), transparent);
    transition: width 1.2s cubic-bezier(.2,.8,.2,1);
  }
  #sub .en {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: clamp(11px, 1.4vw, 15px); letter-spacing: .4em; color: rgba(255,255,255,.6);
    opacity: 0; transform: translateY(10px);
    transition: opacity 1s .5s, transform 1s .5s cubic-bezier(.2,.8,.2,1);
  }
  #sub .en b { color: var(--red); font-weight: 400; }
  #sub.show .line { width: min(420px, 70vw); }
  #sub.show .en { opacity: 1; transform: none; }

  /* 四角 HUD */
  .hud {
    position: fixed; font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; letter-spacing: .18em; color: var(--dim);
    opacity: 0; transition: opacity 1.2s; pointer-events: none; text-transform: uppercase;
  }
  .hud.show { opacity: 1; }
  .tl { top: 20px; left: 20px; } .tr { top: 20px; right: 20px; text-align: right; }
  .bl { bottom: 20px; left: 20px; } .br { bottom: 20px; right: 20px; display: flex; align-items: center; }
  .hud i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red);
           margin-right: 8px; vertical-align: 1px; animation: blink 1.4s infinite; }
  @keyframes blink { 50% { opacity: .15; } }
  .hud-btn {
    all: unset; cursor: pointer; position: relative; color: inherit;
    font: inherit; letter-spacing: inherit; transition: color .2s;
  }
  .hud.show .hud-btn { pointer-events: auto; }
  .hud-btn:hover { color: var(--gold); }
  .hud-btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
  .hud .sep { margin: 0 12px; opacity: .5; }
  /* 联系按钮：渐变描边胶囊 + 流光 + 呼吸光晕 */
  #contact {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 16px 9px 14px; border-radius: 999px;
    color: #fff; letter-spacing: .24em; font-size: 11px;
    border: 1px solid transparent;
    background:
      linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%) 0 0 / 250% 100% no-repeat padding-box,
      linear-gradient(90deg, rgba(255,42,61,.20), rgba(255,201,77,.10)) padding-box,
      linear-gradient(#0b0b12, #0b0b12) padding-box,
      linear-gradient(90deg, var(--red), var(--gold)) border-box;
    animation: sheen 3.6s ease-in-out infinite;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, color .2s;
  }
  /* 呼吸光圈放在伪元素上，只动 transform/opacity（合成层，不重绘），也不和 hover 阴影抢 box-shadow */
  #contact::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    border: 1px solid rgba(255,42,61,.7); animation: halo 2.8s ease-out infinite;
  }
  #contact.on::before { animation: none; opacity: 0; }   /* 已互动过就不再催促 */
  #contact .dot {
    width: 6px; height: 6px; border-radius: 50%; background: #3dff8a;
    box-shadow: 0 0 8px #3dff8a; animation: blink 1.6s infinite;
  }
  #contact .arr { color: var(--gold); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
  @media (hover: hover) {   /* 触屏不留"粘住"的悬停态 */
    #contact:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255,60,50,.35); }
    #contact:hover .arr { transform: translateX(4px); }
  }
  #contact:active { transform: scale(.97); transition-duration: .08s; }
  #contact.on { letter-spacing: .08em; text-transform: none; }
  #contact.on .lbl { font-size: 12px; }
  @keyframes sheen { 0%, 55% { background-position: 160% 0, 0 0, 0 0, 0 0; } 100% { background-position: -60% 0, 0 0, 0 0, 0 0; } }
  @keyframes halo {
    0% { transform: scale(1); opacity: .9; }
    70%, 100% { transform: scale(1.12, 1.6); opacity: 0; }
  }
  #contact[data-tip]::after {
    content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 8px);
    padding: 4px 8px; background: var(--gold); color: #05050a; letter-spacing: .1em;
    white-space: nowrap; font-size: 10px; border-radius: 4px; animation: tip .2s ease-out;
  }
  @keyframes tip { from { opacity: 0; transform: translateY(4px); } }
  @media (max-width: 600px) { .hud { font-size: 9px; } .tl,.tr{top:16px} .tl,.bl{left:16px} .tr,.br{right:16px} .bl,.br{bottom:16px} }

  /* 大模型排行榜 */
  #rank {
    position: fixed; left: 50%; bottom: 64px; transform: translate(-50%, 12px);
    width: min(900px, calc(100% - 32px));
    font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
    opacity: 0; pointer-events: none;
    transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1);
  }
  #rank.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  #rank .head, #rank .foot {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    color: var(--dim); letter-spacing: .18em; font-size: 10px; white-space: nowrap;
  }
  #rank .head { padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.1); }
  #rank .head b { color: rgba(255,255,255,.75); font-weight: 400; }
  #rank .head b::before {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--red); margin-right: 8px; vertical-align: 1px; animation: blink 1.4s infinite;
  }
  #rank .stat em { font-style: normal; color: var(--gold); font-size: 13px; letter-spacing: .08em; }
  #rank .list {
    display: grid; grid-template-rows: repeat(var(--rows, 5), auto); grid-auto-flow: column;
    grid-auto-columns: 1fr; column-gap: 36px; padding: 4px 0 6px;
  }
  #rank .row {
    display: grid; grid-template-columns: 2em minmax(0, 1fr) 72px 3.6em 4.4em; gap: 10px; align-items: center;
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04);
    color: rgba(255,255,255,.38);
    opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s;
  }
  #rank.show .row { opacity: 1; transform: none; }
  #rank .row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  #rank .row .bar { height: 3px; background: rgba(255,255,255,.06); }
  #rank .row .bar i {
    display: block; height: 100%; width: 0; background: rgba(255,255,255,.3);
    transition: width 1.2s cubic-bezier(.2,.8,.2,1);
  }
  #rank .row .tk { text-align: right; }
  #rank .row .ch { text-align: right; font-size: 10px; }
  #rank .row .ch.up { color: var(--gold); }
  #rank .row .ch.new { color: var(--red); letter-spacing: .1em; }
  #rank .row.cn { color: rgba(255,255,255,.9); }
  #rank .row.cn .rk { color: var(--red); }
  #rank .row.cn .bar i { background: linear-gradient(90deg, var(--red), var(--gold)); box-shadow: 0 0 8px rgba(255,80,60,.5); }
  #rank .legend::before { content: ""; display: inline-block; width: 10px; height: 3px; margin-right: 8px; vertical-align: 2px;
                          background: linear-gradient(90deg, var(--red), var(--gold)); }
  #rank .foot { padding-top: 8px; border-top: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.3); }
  #rank .foot a { color: inherit; text-decoration: none; }
  #rank .foot a:hover { color: var(--gold); }
  @media (max-width: 640px) {
    #rank { bottom: 58px; }
    #contact { padding: 7px 12px 7px 11px; font-size: 10px; gap: 8px; }
    #rank .row { grid-template-columns: 2em minmax(0, 1fr) 48px 3.4em; }
    #rank .row .ch { display: none; }
    #sub .en { letter-spacing: .16em; }
    #rank .head .ttl, #rank .foot .legend { display: none; }
    #rank .foot { justify-content: flex-end; }
    .bl { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  }