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

:root{
  --red:#ff0000;
  --pink:#ff006e;
  --ink:#1a1a2e;
  --deep:#101022;
  --panel:#232341;
  --text:#eae6f6;
  --soft:#d9d4ea;
  --dim:#a9a3c2;
  --line:rgba(255,255,255,.09);
  --fd:'Syne','Manrope',ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif;
  --fb:'Manrope',ui-sans-serif,system-ui,'PingFang SC','Microsoft YaHei',sans-serif;
}

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

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

body{
  margin:0;
  padding-bottom:5.5rem;
  background-color:var(--ink);
  background-image:
    radial-gradient(900px 480px at 88% -8%, rgba(255,0,110,.22), transparent 65%),
    radial-gradient(720px 420px at 4% 106%, rgba(255,0,0,.17), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 34px);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--fb);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
}

:focus-visible{outline:2px solid #00d2ff;outline-offset:2px}

.skip{position:absolute;left:-9999px}
.skip:focus{
  position:fixed;left:.7rem;top:.7rem;z-index:95;
  padding:.6rem 1rem;border-radius:8px;background:var(--pink);color:#fff;text-decoration:none;
}

/* ---------- 底部固定导航条 ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:flex-end;gap:.5rem;
  padding:.45rem clamp(.5rem,2.5vw,1.6rem) calc(.45rem + env(safe-area-inset-bottom));
  background:rgba(16,16,34,.95);
  border-top:1px solid rgba(255,0,110,.45);
  box-shadow:0 -8px 32px rgba(255,0,110,.16);
  backdrop-filter:blur(8px);
}

.bar .mark{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  border-radius:10px;
  background:linear-gradient(150deg,var(--red),var(--pink));
  color:#fff;font-family:var(--fd);font-weight:700;font-size:1.15rem;
  text-decoration:none;
  box-shadow:0 0 20px rgba(255,0,110,.6);
}
.bar .mark img{display:block;border-radius:8px}

.bar nav{flex:1 1 auto;min-width:0}
.bar nav p{
  display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:.15rem .4rem;margin:0;
}
.bar nav a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:.2rem .5rem;
  font-size:1rem;line-height:1.2;color:var(--text);
  text-decoration:none;border-radius:8px;
  transition:color .18s, background .18s, box-shadow .18s, transform .18s;
}
.bar nav a::before{
  content:'';flex:0 0 auto;
  width:6px;height:6px;margin-right:.4rem;border-radius:1px;
  background:var(--pink);box-shadow:0 0 9px var(--pink);
}
.bar nav a:hover,.bar nav a:focus-visible,.bar nav a[aria-current]{
  color:#fff;
  background:rgba(255,0,110,.16);
  box-shadow:inset 0 0 0 1px rgba(255,0,110,.5);
  transform:translateY(-2px);
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  display:flex;align-items:flex-end;
  min-height:70vh;
  overflow:hidden;
  padding:clamp(2rem,8vh,4.5rem) clamp(1rem,5vw,3rem) clamp(3rem,10vh,5rem);
  clip-path:polygon(0 0,100% 0,100% 100%,0 95%);
  background:linear-gradient(120deg,#1a1a2e,#251b3f 46%,#3b1031);
}

.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.15) contrast(1.08) saturate(1.15);
}

.hero::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(270deg, rgba(12,8,26,.95) 0%, rgba(12,8,26,.74) 44%, rgba(12,8,26,.26) 80%, rgba(12,8,26,.62) 100%);
}

.hero-copy{
  position:relative;z-index:2;
  margin-left:auto;max-width:44rem;text-align:right;
}

.hero-kicker{
  margin:0 0 .7rem;
  font-family:var(--fd);font-size:.82rem;letter-spacing:.34em;
  color:var(--pink);text-shadow:0 0 12px rgba(255,0,110,.9);
}

.hero h1{
  margin:0;
  font-family:var(--fd);font-weight:700;line-height:1.08;
  font-size:clamp(1.9rem,6vw,4.4rem);color:#fff;
  text-shadow:0 0 26px rgba(255,0,110,.55), 4px 0 0 rgba(255,0,0,.5), -4px 0 0 rgba(0,210,255,.32);
  animation:glitch 7s infinite;
}

@keyframes glitch{
  0%,90%,100%{transform:none}
  92%{transform:translate(-3px,1px) skewX(-2deg)}
  94%{transform:translate(3px,-1px) skewX(2deg)}
  96%{transform:translate(-2px,0) skewX(-1deg)}
  98%{transform:none}
}

.hero-slash{
  position:absolute;left:-5%;right:-5%;bottom:12px;height:9px;z-index:3;
  background:linear-gradient(90deg,var(--red),var(--pink) 55%,#54204f);
  transform:skewY(-1.4deg);
  box-shadow:0 0 24px rgba(255,0,110,.8);
}

/* ---------- 主区 ---------- */
.grid{
  max-width:1180px;margin:0 auto;
  padding:clamp(1.2rem,4vw,2.6rem) clamp(1rem,4vw,2rem);
  display:grid;gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr);
}

.stage{min-width:0}

.post>section{
  position:relative;
  padding-block:clamp(1.3rem,3vw,2.1rem);
  scroll-margin-top:1rem;
  scroll-margin-bottom:6.5rem;
}
.post>section+section{border-top:1px solid var(--line)}

.post h2,.post h3{
  font-family:var(--fd);color:#fff;line-height:1.3;letter-spacing:.01em;
}
.post h2{
  font-size:clamp(1.45rem,3.4vw,2.1rem);
  margin:2.4rem 0 0;
  text-shadow:0 0 18px rgba(255,0,110,.5);
}
.post h3{
  font-size:1.2rem;margin:1.8rem 0 .2rem;color:#ffd7e6;
}

.post hr,.rail hr{
  height:3px;border:0;border-radius:2px;
  margin:.6rem 0 1.3rem;
  background:linear-gradient(90deg,var(--red),var(--pink) 45%,transparent);
  box-shadow:0 0 14px rgba(255,0,110,.5);
}

.post p,.post li{color:var(--soft);font-size:1.06rem}
.post p{margin:.9rem 0}
.post strong{color:#fff}
.post a{color:#ff6aa8;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post a:hover{color:#fff;background:rgba(255,0,110,.18)}
.post ul,.post ol{padding-left:1.3rem}
.post li{margin:.35rem 0}
.post img{display:block;max-width:100%;height:auto;border-radius:10px}
.post blockquote{
  margin:1.2rem 0;padding:.8rem 1rem;
  border-left:3px solid var(--pink);
  background:rgba(255,0,110,.09);
  border-radius:0 10px 10px 0;
}
.post blockquote p{margin:.3rem 0}
.post table{width:100%;border-collapse:collapse;font-size:.96rem}
.post th,.post td{padding:.5rem .6rem;border-bottom:1px solid var(--line);text-align:left}
.post code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.94em;background:#26264a;padding:.1em .35em;border-radius:4px}

/* ---------- 侧栏 ---------- */
.rail{min-width:0}
.rail h2{
  margin:0;
  font-family:var(--fd);font-size:1.15rem;letter-spacing:.14em;
  color:#fff;text-shadow:0 0 14px rgba(255,0,110,.6);
}
.rail ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.rail a{
  display:flex;align-items:center;
  min-height:46px;padding:.55rem .85rem;
  border-radius:10px;background:var(--panel);
  color:#ddd8ee;text-decoration:none;font-size:1rem;
  transition:transform .18s, background .18s, box-shadow .18s, color .18s;
}
.rail a:hover,.rail a:focus-visible{
  transform:translateX(-4px);
  background:#33193f;color:#fff;
  box-shadow:0 0 0 1px rgba(255,0,110,.5), 0 0 20px rgba(255,0,110,.35);
}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:clamp(2rem,6vw,4rem);
  border-top:1px solid rgba(255,0,110,.4);
  background:rgba(11,11,22,.94);
}

.foot-cta{
  max-width:1180px;margin:0 auto;
  padding:clamp(2rem,6vw,3.4rem) clamp(1rem,4vw,2rem) clamp(1.4rem,4vw,2rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 1.6rem;
}
.foot-cta .big{
  margin:0;
  font-family:var(--fd);font-weight:700;line-height:1.1;
  font-size:clamp(1.7rem,5vw,3rem);color:#fff;
  text-shadow:0 0 24px rgba(255,0,110,.6), 3px 0 0 rgba(255,0,0,.5);
}
.foot-cta .to-top{
  display:inline-flex;align-items:center;
  min-height:48px;padding:.6rem 1.25rem;
  border-radius:10px;
  background:linear-gradient(120deg,var(--red),var(--pink));
  color:#fff;font-weight:600;text-decoration:none;
  box-shadow:0 0 22px rgba(255,0,110,.55);
  transition:transform .18s, box-shadow .18s;
}
.foot-cta .to-top:hover{transform:translateY(-3px);box-shadow:0 0 32px rgba(255,0,110,.85)}

.foot-row{
  max-width:1180px;margin:0 auto;
  padding:.9rem clamp(1rem,4vw,2rem) calc(1rem + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;
  border-top:1px solid var(--line);
}
.foot-row .fmark{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;min-height:40px;border-radius:10px;
  background:#242444;color:#fff;font-family:var(--fd);font-weight:700;text-decoration:none;
}
.foot-row nav{display:flex;flex-wrap:wrap;gap:.15rem .9rem;flex:1 1 auto;min-width:0}
.foot-row nav a{
  display:inline-flex;align-items:center;
  min-height:40px;padding:.1rem .15rem;
  color:#bdb7d4;font-size:.98rem;text-decoration:none;
}
.foot-row nav a:hover{color:#fff;text-shadow:0 0 12px var(--pink)}
.foot-row .copy{margin:0 auto;color:#8e88a8;font-size:.92rem;text-align:center;flex:1 1 100%}

/* ---------- 滚动显现 ---------- */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}

/* ---------- 断点 ---------- */
@media (max-width:919px){
  body{padding-bottom:10.5rem}
}

@media (min-width:720px){
  .foot-row .copy{flex:0 0 auto;margin-left:auto}
}

@media (min-width:920px){
  .grid{grid-template-columns:minmax(0,1fr) 17rem;align-items:start}
  .rail{position:sticky;top:1.5rem}
  .bar{align-items:center}
  .bar nav p{flex-wrap:nowrap;gap:.1rem}
  .bar nav a{padding:.2rem .6rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
}

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