:root{
    /* 全部取自 logo 的长春花蓝色阶 #D6D9EC → #3C60C7 */
    --ink:#080A14;
    --ink-2:#0D1120;
    --text:#DDE2F2;
    --muted:#7E8EBF;
    --line:rgba(161,175,209,.18);
    --accent:#A1AFD1;
    --accent-deep:#5E78C0;
    --serif:"Noto Serif SC",-apple-system,BlinkMacSystemFont,"Songti SC","Source Han Serif SC",serif;
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:var(--ink);
    color:var(--text);
    font-family:var(--serif);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow:hidden;
  }

  /* 背景：水下缓慢漂移的光晕 + 细微颗粒，压住暗部色带 */
  #field{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
  #grain{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    opacity:.035;mix-blend-mode:overlay;
  }
  #vignette{
    position:fixed;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(105% 78% at 50% 44%,transparent 22%,rgba(6,8,16,.55) 62%,rgba(4,6,12,.94) 100%);
  }

  main{
    position:relative;z-index:3;
    min-height:100dvh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:38px;
    padding:48px 24px;
    text-align:center;
  }

  .mark{
    width:78px;height:auto;display:block;
    filter:drop-shadow(0 0 30px rgba(94,120,192,.30));
  }

  .line{
    font-size:clamp(26px,5.2vw,42px);
    font-weight:300;
    letter-spacing:.22em;
    line-height:1.5;
    margin:0;
    text-wrap:balance;
    /* 文字本身带极轻的冷暖渐变，靠近标记的色相 */
    background:linear-gradient(100deg,#E6EAF6 12%,#B0BBD8 52%,#E6EAF6 88%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
  /* 中文标点在居中排版里会拖出视觉偏移，收一下右侧留白 */
  .line{padding-left:.22em}

  .rule{
    width:56px;height:1px;border:0;margin:0;
    background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent);
  }

  footer{
    display:flex;align-items:center;gap:18px;
    font-family:var(--mono);
    font-size:12px;font-weight:300;
    letter-spacing:.16em;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  footer a{
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:50%;
    color:var(--muted);
    border:1px solid transparent;
    transition:color .35s ease,border-color .35s ease,transform .35s ease;
  }
  footer a:hover,footer a:focus-visible{
    color:var(--accent);
    border-color:rgba(161,175,209,.30);
    transform:translateY(-1px);
  }
  footer a:focus-visible{outline:2px solid rgba(161,175,209,.55);outline-offset:3px}
  footer a svg{width:16px;height:16px;fill:currentColor}
  .years{opacity:.82}

  /* 入场：由下浮起，依次点亮 */
  .rise{opacity:0;transform:translateY(14px);animation:rise 1.5s cubic-bezier(.16,.7,.3,1) forwards}
  .d1{animation-delay:.15s} .d2{animation-delay:.5s} .d3{animation-delay:.95s} .d4{animation-delay:1.15s}
  @keyframes rise{to{opacity:1;transform:none}}

  @media (prefers-reduced-motion:reduce){
    .rise{animation:none;opacity:1;transform:none}
  }
  @media (max-width:480px){
    main{gap:30px}
    .line{letter-spacing:.16em}
  }

/* 404 */
.code{
  font-family:var(--mono);
  font-size:clamp(40px,9vw,62px);
  font-weight:300;
  letter-spacing:.28em;
  margin:0;
  color:var(--accent-deep);
  font-variant-numeric:tabular-nums;
  text-indent:.28em;
}
.line-sm{font-size:clamp(18px,3.4vw,24px);letter-spacing:.2em}
.back{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  white-space:nowrap;
  color:var(--muted);text-decoration:none;
  border-bottom:1px solid rgba(161,175,209,.22);padding-bottom:3px;
  transition:color .35s ease,border-color .35s ease;
}
.back:hover,.back:focus-visible{color:var(--accent);border-color:rgba(161,175,209,.5)}
.back:focus-visible{outline:2px solid rgba(161,175,209,.55);outline-offset:4px}