@import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600;700&display=swap');

:root{
  --ink:#26171f;
  --pink:#ff0080;
  --mag:#ff00ff;
  --paper:#f9f0f6;
  --dim:#d9c2d3;
  --line:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.06);
  --deep:rgba(18,9,15,.72);
}

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

html{
  scroll-behavior:smooth;
  background:var(--ink);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;
  font-family:"Epilogue",system-ui,-apple-system,"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.75;
  color:var(--paper);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-25vh -25vw;
  z-index:-1;
  background:
    radial-gradient(38% 42% at 12% 16%, rgba(255,0,128,.82), transparent 62%),
    radial-gradient(44% 38% at 88% 6%, rgba(255,0,255,.62), transparent 60%),
    radial-gradient(52% 48% at 74% 78%, rgba(128,24,144,.7), transparent 66%),
    radial-gradient(36% 34% at 24% 90%, rgba(255,54,150,.5), transparent 62%),
    radial-gradient(30% 30% at 50% 46%, rgba(255,255,255,.14), transparent 70%);
  background-size:180% 180%;
  filter:saturate(125%);
  animation:flow 24s ease-in-out infinite alternate, shimmer 34s linear infinite;
  pointer-events:none;
}

@keyframes flow{
  0%{background-position:0% 0%}
  100%{background-position:100% 100%}
}
@keyframes shimmer{
  0%{filter:hue-rotate(0deg) saturate(125%)}
  50%{filter:hue-rotate(30deg) saturate(150%)}
  100%{filter:hue-rotate(0deg) saturate(125%)}
}

img{max-width:100%}
a{color:var(--paper)}
:focus-visible{outline:2px solid var(--mag);outline-offset:3px}

/* 顶栏 */
.topbar{
  position:sticky;
  top:0;
  z-index:60;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  background:rgba(24,13,20,.78);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.bar-left{justify-self:start}
.bar-right{justify-self:end}

.menu{position:static}

.menu > summary{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:var(--glass);
  cursor:pointer;
  list-style:none;
  font-size:16px;
  letter-spacing:.06em;
}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary::marker{content:""}
.menu[open] > summary{border-color:var(--pink);background:rgba(255,0,128,.16)}

.ico{
  display:inline-block;
  width:10px;
  height:10px;
  flex:0 0 auto;
  background:linear-gradient(135deg,var(--pink),var(--mag));
}

.panel{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin:0;
  padding:12px 14px 20px;
  list-style:none;
  display:grid;
  gap:4px;
  background:rgba(16,8,14,.95);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 22px 50px rgba(0,0,0,.45);
}

.panel li{margin:0}

.panel a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  padding:11px 12px;
  text-decoration:none;
  font-size:16px;
  border:1px solid transparent;
  background:rgba(255,255,255,.03);
}
.panel a:hover,.panel a:focus-visible{
  border-color:var(--pink);
  background:rgba(255,0,128,.14);
}
.panel .txt{letter-spacing:.02em}

@media (min-width:820px){
  .panel{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
}

.brand{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:4px 6px;
  text-decoration:none;
  font-family:"Anton","Epilogue",system-ui,sans-serif;
  font-size:clamp(1.05rem,3.6vw,1.5rem);
  letter-spacing:.1em;
  white-space:nowrap;
}
.brand-txt{
  background:linear-gradient(100deg,var(--pink),var(--mag) 55%,#fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.mark{width:26px;height:26px;object-fit:contain}

.cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  letter-spacing:.05em;
  color:#fff;
  background:linear-gradient(100deg,var(--pink),var(--mag));
}

/* 主栅格 */
main{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  padding-bottom:50px;
}

@media (min-width:1020px){
  main{
    grid-template-columns:minmax(0,1fr) 236px;
    column-gap:34px;
    padding:0 clamp(18px,4vw,56px) 70px;
    align-items:start;
  }
}

/* 首屏 */
.hero{
  grid-column:1 / -1;
  display:grid;
  gap:18px;
  align-content:center;
  min-height:100vh;
  min-height:100svh;
  padding:34px 16px 54px;
}

.hero-media{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    conic-gradient(from 210deg at 60% 40%, rgba(255,0,128,.85), rgba(255,0,255,.6), rgba(40,20,60,.9), rgba(255,0,128,.85));
  max-height:34vh;
  aspect-ratio:4 / 3;
}
.hero-media .hero-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  mix-blend-mode:luminosity;
}
.plate{
  position:absolute;
  inset:0;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(255,255,255,.35), transparent 65%),
    radial-gradient(50% 50% at 72% 68%, rgba(255,0,255,.55), transparent 70%);
  animation:flow 18s ease-in-out infinite alternate;
  background-size:170% 170%;
}

.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:16px;
  text-align:right;
}

.kicker{
  margin:0;
  font-size:16px;
  letter-spacing:.3em;
  color:#ffd6ec;
  text-transform:uppercase;
}

h1{
  margin:0;
  font-family:"Anton","Noto Sans SC",system-ui,sans-serif;
  font-size:clamp(2.3rem,8.4vw,5rem);
  line-height:1.04;
  letter-spacing:.005em;
  text-align:right;
  text-wrap:balance;
  text-shadow:0 6px 40px rgba(255,0,128,.35);
}

.ghost{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 18px;
  text-decoration:none;
  border:1px solid var(--pink);
  background:rgba(255,0,128,.12);
  font-size:16px;
  letter-spacing:.08em;
}
.ghost:hover{background:rgba(255,0,128,.26)}

@media (min-width:820px){
  .hero{
    grid-template-columns:1.02fr 1fr;
    align-items:center;
    gap:clamp(24px,4vw,56px);
    padding:0 0 0 clamp(0px,1vw,10px);
  }
  .hero-media{max-height:none;height:min(62vh,520px);aspect-ratio:auto}
}

/* 正文 */
.doc{min-width:0}

.doc section{
  scroll-margin-top:86px;
  padding:34px 16px 28px;
  border-top:1px solid var(--line);
  background:rgba(30,17,26,.62);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.doc section:nth-of-type(even){
  background:rgba(38,20,32,.5);
}

@media (min-width:1020px){
  .doc section{padding:44px clamp(24px,3vw,40px) 36px}
}

.doc h2,.doc h3{
  font-family:"Anton","Noto Sans SC",system-ui,sans-serif;
  line-height:1.16;
  letter-spacing:.01em;
  margin:0 0 .55em;
}
.doc h2{font-size:clamp(1.45rem,3.8vw,2.15rem)}
.doc h3{font-size:clamp(1.2rem,2.8vw,1.5rem)}

.doc h2 > span,.doc h3 > span{
  background:linear-gradient(96deg,#fff,var(--pink) 62%,var(--mag));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.doc p{margin:0 0 1.05em;max-width:64ch;color:#f2e4ee}
.doc ul,.doc ol{margin:0 0 1.1em;padding-left:1.3em;max-width:64ch}
.doc li{margin:.25em 0}
.doc strong{color:#fff}
.doc a{color:var(--pink);text-decoration-thickness:1px;text-underline-offset:3px}
.doc blockquote{
  margin:0 0 1.1em;
  padding:14px 18px;
  border-left:3px solid var(--mag);
  background:rgba(255,0,255,.08);
}
.doc blockquote p:last-child{margin:0}
.doc figure{margin:0 0 1.2em}
.doc figcaption{font-size:16px;color:var(--dim)}
.doc img{display:block;border:1px solid var(--line)}

/* 侧栏 */
.rail{
  padding:28px 16px;
  border-top:1px solid var(--line);
  background:rgba(16,8,14,.55);
}

.rail-h{
  margin:0 0 12px;
  font-family:"Anton","Noto Sans SC",system-ui,sans-serif;
  font-size:1.15rem;
  letter-spacing:.26em;
}
.rail-h > span{
  background:linear-gradient(96deg,var(--pink),var(--mag));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.rail-list{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:grid;
  gap:2px;
}

.rail-list a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 2px;
  text-decoration:none;
  font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.rail-list a:hover{color:var(--pink)}

.num{
  font-family:"Anton",system-ui,sans-serif;
  font-size:16px;
  letter-spacing:.06em;
  color:var(--mag);
  min-width:24px;
}

.totop{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  text-decoration:none;
  font-size:16px;
  letter-spacing:.1em;
}

@media (min-width:1020px){
  .rail{
    position:sticky;
    top:86px;
    padding:18px 0 0;
    border-top:0;
    background:none;
    backdrop-filter:none;
  }
}

/* 页脚 */
.foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 20px;
  padding:24px 16px 28px;
  border-top:1px solid var(--line);
  background:var(--deep);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.f-brand{margin:0}

.f-word{
  margin:0;
  font-family:"Anton","Noto Sans SC",system-ui,sans-serif;
  font-size:clamp(1.5rem,6vw,2.5rem);
  line-height:1;
  letter-spacing:.06em;
}
.f-word > span{
  background:linear-gradient(100deg,var(--pink),var(--mag) 60%,#fff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.f-nav{
  display:flex;
  flex-wrap:wrap;
  gap:2px 4px;
  min-width:0;
}
.f-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 9px;
  text-decoration:none;
  font-size:16px;
  color:var(--dim);
}
.f-nav a:hover{color:var(--pink)}

.f-copy{
  margin-left:auto;
  font-size:16px;
  color:var(--dim);
  letter-spacing:.04em;
}

.f-note{
  font-size:16px;
  color:rgba(217,194,211,.72);
  letter-spacing:.06em;
}

@media (max-width:520px){
  .f-copy{margin-left:0}
}

/* 滚动出现 */
html.js .rv{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease, transform .7s ease;
}
html.js .rv.in{opacity:1;transform:none}
html.js .rail-list li{
  opacity:0;
  transform:translateX(10px);
  transition:opacity .5s ease, transform .5s ease;
}
html.js .rail.in .rail-list li{opacity:1;transform:none}
html.js .rail.in .rail-list li:nth-child(2){transition-delay:.05s}
html.js .rail.in .rail-list li:nth-child(3){transition-delay:.1s}
html.js .rail.in .rail-list li:nth-child(4){transition-delay:.15s}
html.js .rail.in .rail-list li:nth-child(5){transition-delay:.2s}
html.js .rail.in .rail-list li:nth-child(6){transition-delay:.25s}
html.js .rail.in .rail-list li:nth-child(7){transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before,.plate{animation:none}
  html.js .rv,
  html.js .rail-list li{opacity:1;transform:none;transition:none}
}

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