@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root{
  --ink:#0F1B3D;
  --ink-deep:#081026;
  --ink-lift:#16264f;
  --foam:#F5F2E8;
  --orange:#FF7A45;
  --line:rgba(245,242,232,.22);
  --line-soft:rgba(245,242,232,.11);
  --radius:18px;
  --head:76px;
  --wrap:1180px;
  --pixel:'Press Start 2P','VT323',monospace;
  --body:'VT323',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(880px 520px at 84% -8%, rgba(255,122,69,.17), transparent 64%),
    radial-gradient(720px 480px at -6% 22%, rgba(245,242,232,.08), transparent 62%),
    var(--ink);
  color:var(--foam);
  font-family:var(--body);
  font-size:19px;
  line-height:1.75;
  letter-spacing:.01em;
}

img{display:block;max-width:100%;height:auto;}

a{color:inherit;}

a:focus-visible,button:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:10px;
}

/* 顶栏 */
.site-head{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:var(--head);
  padding:10px clamp(12px,3vw,28px);
  background:rgba(8,16,38,.93);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line);
}

.brand{
  flex:0 0 auto;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:2px solid var(--orange);
  border-radius:12px;
  background:rgba(255,122,69,.12);
  color:var(--orange);
  font-family:var(--pixel);
  font-size:18px;
  line-height:1;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.brand:hover{transform:translateY(-2px) rotate(-4deg);background:var(--orange);color:var(--ink);}
.brand img{width:34px;height:34px;object-fit:contain;filter:invert(1) sepia(1) saturate(4) hue-rotate(330deg);}

.nav{
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none;}

.nav-list{
  display:flex;
  gap:8px;
  width:max-content;
  margin:0;
  padding:2px;
  list-style:none;
}

.nav-list a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border:2px solid var(--line);
  border-radius:999px;
  color:var(--foam);
  font-size:17px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.nav-list a:hover,
.nav-list a:focus-visible,
.nav-list a.on{
  background:var(--foam);
  border-color:var(--foam);
  color:var(--ink);
  transform:translateY(-2px);
}

.cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:46px;
  padding:0 20px;
  border:2px solid var(--orange);
  border-radius:999px;
  background:var(--orange);
  color:var(--ink);
  font-family:var(--cjk);
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 7px 0 -3px rgba(255,122,69,.5);}

/* 主体骨架 */
main{
  display:flex;
  flex-direction:column;
  gap:26px;
  max-width:var(--wrap);
  margin:0 auto;
  padding:clamp(18px,4vw,40px) clamp(12px,3vw,28px) 56px;
}

.doc{order:1;min-width:0;}
.rail{order:2;}

@media (min-width:940px){
  main{
    display:grid;
    grid-template-columns:224px minmax(0,1fr);
    align-items:start;
    gap:34px;
  }
  .doc,.rail{order:0;}
  .rail{position:sticky;top:calc(var(--head) + 18px);}
}

/* 侧栏 */
.rail{
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  background:rgba(245,242,232,.04);
}

.rail-title{
  margin:0 0 12px;
  font-family:var(--cjk);
  font-size:17px;
  font-weight:700;
  letter-spacing:.3em;
  color:var(--orange);
}
.rail-title span{border-bottom:2px dashed rgba(255,122,69,.55);padding-bottom:3px;}

.rail-list{
  margin:0;
  padding:0;
  list-style:none;
}
.rail-list li + li{margin-top:2px;}
.rail-list a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 4px;
  border-bottom:1px dashed var(--line-soft);
  color:var(--foam);
  font-size:17px;
  text-decoration:none;
  transition:color .16s ease,padding-left .16s ease;
}
.rail-list a:hover{color:var(--orange);padding-left:10px;}

/* 首屏 */
.hero{
  position:relative;
  display:grid;
  gap:clamp(16px,3vw,30px);
  overflow:hidden;
  margin-bottom:26px;
  padding:clamp(16px,3vw,30px);
  border:2px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(175deg,rgba(245,242,232,.08),rgba(245,242,232,.015));
  scroll-margin-top:calc(var(--head) + 16px);
}
.hero::before{
  content:"";
  position:absolute;
  top:-30%;
  bottom:-30%;
  right:24%;
  z-index:0;
  width:42px;
  background:var(--orange);
  opacity:.8;
  transform:skewX(-14deg);
  pointer-events:none;
}

.hero-copy{
  position:relative;
  z-index:1;
  order:1;
  text-align:center;
}

.hero-art{
  position:relative;
  z-index:1;
  order:2;
  overflow:hidden;
  aspect-ratio:4/3;
  border:2px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(90deg,rgba(245,242,232,.13) 2px,transparent 2px) 0 0/30px 30px,
    linear-gradient(rgba(245,242,232,.13) 2px,transparent 2px) 0 0/30px 30px,
    var(--ink-deep);
}
.hero-art img{width:100%;height:100%;object-fit:cover;}
.hero-mesh{
  display:block;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,122,69,.55), transparent 45%),
    radial-gradient(circle at 70% 68%, rgba(245,242,232,.32), transparent 50%);
}

.hero-title{
  margin:0 0 16px;
  font-family:var(--pixel);
  font-size:clamp(28px,5.2vw,54px);
  font-weight:800;
  line-height:1.24;
  letter-spacing:.01em;
  color:var(--foam);
  word-break:break-word;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-title{
    color:transparent;
    background-image:linear-gradient(96deg,#F5F2E8 8%,#FF7A45 48%,#F5F2E8 90%);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    animation:hue 12s linear infinite alternate;
  }
}
@keyframes hue{
  from{background-position:0 0;}
  to{background-position:100% 0;}
}

.hero-title .ch{
  display:inline-block;
  animation:rise .55s cubic-bezier(.2,.9,.25,1) backwards;
  animation-delay:calc(var(--i,0) * 32ms);
}
@keyframes rise{
  from{opacity:0;transform:translateY(.55em) rotate(5deg);}
  to{opacity:1;transform:none;}
}

.caret{
  display:inline-block;
  width:.42em;
  height:.92em;
  margin-left:.1em;
  background:var(--orange);
  vertical-align:-.08em;
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{
  0%,50%{opacity:1;}
  50.01%,100%{opacity:0;}
}

.hero-lead{
  max-width:46ch;
  margin:0 auto;
  color:rgba(245,242,232,.84);
  font-size:17px;
  line-height:1.72;
}

@media (min-width:760px){
  .hero{
    grid-template-columns:.85fr 1.15fr;
    align-items:center;
    min-height:70vh;
    padding-block:clamp(26px,5vw,52px);
  }
  .hero-art{order:1;aspect-ratio:1/1;min-height:320px;height:100%;}
  .hero-copy{order:2;}
}

/* 正文 */
.doc > article:not(.hero){
  margin:0 0 24px;
  padding:clamp(18px,3.2vw,34px);
  border:2px solid var(--line);
  border-radius:var(--radius);
  background:rgba(245,242,232,.045);
  scroll-margin-top:calc(var(--head) + 16px);
}
.doc > article:not(.hero):nth-of-type(even){
  background:rgba(255,122,69,.07);
  border-color:rgba(255,122,69,.32);
}
.doc > article:not(.hero):last-child{margin-bottom:0;}

.doc h2{
  margin:0 0 .55em;
  font-family:var(--cjk);
  font-size:clamp(22px,3.1vw,32px);
  font-weight:800;
  line-height:1.36;
  letter-spacing:.01em;
}
.doc h2 span{
  background:linear-gradient(transparent 64%,rgba(255,122,69,.42) 64%);
  padding:0 .06em;
}
.doc h3{
  margin:1.4em 0 .45em;
  font-family:var(--cjk);
  font-size:clamp(19px,2.2vw,22px);
  font-weight:700;
  line-height:1.45;
}
.doc h3 span{border-bottom:2px solid rgba(255,122,69,.6);padding-bottom:2px;}

.doc p{margin:0 0 1em;line-height:1.85;}
.doc p:last-child{margin-bottom:0;}
.doc a{color:var(--orange);text-underline-offset:4px;}
.doc ul,.doc ol{padding-left:1.35em;line-height:1.9;}
.doc li{margin:.25em 0;}
.doc strong{color:#fff;}
.doc img{margin:1.1em 0;border:2px solid var(--line);border-radius:14px;}
.doc blockquote{
  margin:1.2em 0;
  padding:.85em 1.1em;
  border-left:5px solid var(--orange);
  border-radius:0 12px 12px 0;
  background:rgba(255,122,69,.1);
}
.doc blockquote p:last-child{margin-bottom:0;}
.doc table{width:100%;border-collapse:collapse;margin:1.1em 0;font-size:17px;}
.doc th,.doc td{border:1px solid var(--line);padding:9px 11px;text-align:left;}
.doc th{background:rgba(245,242,232,.09);}
.doc hr{border:0;border-top:2px dashed var(--line);margin:1.6em 0;}
.doc code,.doc pre{font-family:var(--pixel);font-size:14px;}

/* 页脚 */
.foot{
  margin-top:44px;
  padding:clamp(24px,5vw,46px) clamp(12px,3vw,28px) 26px;
  border-top:2px solid var(--line);
  background:var(--ink-deep);
}
.foot-word{overflow:hidden;}
.wordmark{
  margin:0;
  font-family:var(--pixel);
  font-size:clamp(42px,12.5vw,128px);
  line-height:1.05;
  letter-spacing:.02em;
  text-align:center;
  white-space:nowrap;
  color:rgba(245,242,232,.16);
}
@supports ((-webkit-text-stroke:1px #fff)){
  .wordmark{
    color:transparent;
    -webkit-text-stroke:1.5px rgba(245,242,232,.4);
  }
}

.foot-bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:clamp(14px,3vw,22px);
  padding-top:16px;
  border-top:1px dashed var(--line-soft);
  font-size:16px;
  color:rgba(245,242,232,.72);
}
.foot-top{margin:0;}
.foot-top a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 18px;
  border:2px solid var(--line);
  border-radius:999px;
  color:var(--foam);
  text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.foot-top a:hover{background:var(--foam);color:var(--ink);border-color:var(--foam);}
.foot-copy{margin:0;}

/* 滚动显现 */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .62s ease,transform .62s ease;
}
.reveal.in{opacity:1;transform:none;}

@media (max-width:420px){
  .site-head{gap:8px;padding-inline:10px;}
  .cta{padding:0 14px;font-size:16px;}
  .nav-list a{padding:0 13px;}
  body{font-size:18px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none;}
  .caret{opacity:1;}
}

button[aria-expanded]{min-width:44px;min-height:44px}