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

:root{
  --red:#ff0000;
  --violet:#8b00ff;
  --ink:#261717;
  --fg:#f8eef2;
  --dim:#d6bec7;
  --glass:rgba(255,255,255,.08);
  --glass-2:rgba(255,255,255,.15);
  --line:rgba(255,255,255,.2);
  --r:18px;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

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

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

body{
  margin:0;
  font-family:'Exo',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.68;
  color:var(--fg);
  background-color:#150c0e;
  background-image:
    radial-gradient(1100px 720px at 88% -12%,rgba(255,0,0,.34),rgba(255,0,0,0) 62%),
    radial-gradient(880px 680px at 2% 14%,rgba(139,0,255,.3),rgba(139,0,255,0) 64%),
    radial-gradient(760px 760px at 62% 96%,rgba(255,0,0,.16),rgba(255,0,0,0) 66%),
    linear-gradient(180deg,rgba(38,23,23,.92),rgba(17,9,11,.98));
  background-attachment:fixed;
  min-height:100vh;
}

img{display:block;max-width:100%;height:auto}
a{color:var(--fg);text-decoration:none}
p{margin:0 0 1em}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[id]{scroll-margin-top:96px}

.top{
  position:sticky;
  top:0;
  z-index:40;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:8px clamp(12px,3.5vw,34px);
  background:rgba(24,13,16,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
  border-bottom:1px solid var(--line);
}

.mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.3);
  background:linear-gradient(140deg,rgba(255,0,0,.42),rgba(139,0,255,.42));
  font-weight:700;
  font-size:18px;
  transition:transform .2s ease,border-color .2s ease;
}
.mark:hover{transform:translateY(-1px) rotate(-3deg);border-color:rgba(255,255,255,.6)}
.mark img{width:100%;height:100%;object-fit:cover}

.nav{min-width:0}
.nav p{
  display:flex;
  align-items:center;
  gap:2px;
  margin:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav p::-webkit-scrollbar{display:none}
.nav a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:0 11px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:16px;
  color:var(--dim);
  white-space:nowrap;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.nav a::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(180deg,var(--red),var(--violet));
  opacity:.7;
  transition:transform .18s ease,opacity .18s ease;
}
.nav a:hover,.nav a.on{color:#fff;background:var(--glass-2);border-color:var(--line);transform:translateY(-1px)}
.nav a:hover::before,.nav a.on::before{opacity:1;transform:scale(1.5)}

.find{display:flex;align-items:center;gap:6px}
.find input{
  width:clamp(86px,14vw,164px);
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.09);
  color:var(--fg);
  font:inherit;
  font-size:16px;
  transition:background-color .18s ease,border-color .18s ease;
}
.find input::placeholder{color:var(--dim)}
.find input:focus{background:rgba(255,255,255,.16);border-color:rgba(255,0,0,.6)}
.find button{
  min-height:42px;
  padding:0 15px;
  border-radius:999px;
  border:1px solid rgba(255,0,0,.55);
  background:rgba(255,0,0,.2);
  color:#fff;
  font:inherit;
  font-size:16px;
  cursor:pointer;
  transition:background-color .18s ease,transform .18s ease;
}
.find button:hover{background:rgba(255,0,0,.42);transform:translateY(-1px)}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  text-align:right;
  padding:calc(76px + 7vh) clamp(18px,5vw,60px) clamp(46px,9vh,100px);
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background:radial-gradient(120% 92% at 78% 10%,rgba(255,0,0,.5),rgba(139,0,255,.34) 44%,rgba(21,12,14,1) 82%);
}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08)}
.hero-veil{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(255deg,rgba(21,12,14,.18) 8%,rgba(21,12,14,.72) 56%,rgba(21,12,14,.96) 96%);
}
.hero-copy{max-width:920px}
.hero-copy h1{
  margin:0;
  font-size:clamp(2.1rem,7.2vw,4.85rem);
  line-height:1.06;
  letter-spacing:-.015em;
  font-weight:700;
  text-shadow:0 2px 34px rgba(0,0,0,.55);
}
.cue{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  margin-top:24px;
  font-family:var(--mono);
  font-size:16px;
  letter-spacing:.2em;
  color:var(--dim);
}
.cue::after{
  content:"";
  width:1px;
  height:46px;
  background:linear-gradient(180deg,var(--red),rgba(139,0,255,0));
  animation:drop 2.6s ease-in-out infinite;
}

@keyframes drop{
  0%,100%{transform:scaleY(.55);opacity:.5}
  50%{transform:scaleY(1);opacity:1}
}

.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(12px,3.5vw,34px)}

.deck{
  display:grid;
  grid-template-columns:minmax(0,1fr) 302px;
  align-items:start;
  gap:clamp(16px,2.6vw,34px);
  padding:clamp(26px,4.4vw,60px) 0 0;
}

.prose,.rail{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  padding:clamp(18px,3vw,38px);
}
.prose{overflow:hidden}

.prose h2{
  margin:0 0 .7em;
  font-size:clamp(1.32rem,2.5vw,1.72rem);
  line-height:1.32;
  letter-spacing:-.01em;
}
.prose h2::before{
  content:"";
  display:block;
  width:54px;
  height:3px;
  border-radius:3px;
  margin-bottom:.62em;
  background:linear-gradient(90deg,var(--red),var(--violet));
}
.prose h3{margin:1.4em 0 .5em;font-size:clamp(1.1rem,1.9vw,1.26rem);color:#ffd9dd}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.3em}
.prose li{margin:.35em 0}
.prose a{color:#ffc9cf;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,0,0,.55)}
.prose a:hover{color:#fff;text-decoration-color:#fff}
.prose strong{color:#fff}
.prose blockquote{
  margin:1.2em 0;
  padding:.6em 1.1em;
  border-left:3px solid var(--violet);
  border-radius:0 12px 12px 0;
  background:rgba(139,0,255,.13);
}
.prose article + article{margin-top:2.1rem;padding-top:2.1rem;border-top:1px solid rgba(255,255,255,.14)}
.prose article.hit{animation:hitGlow 2s ease}
@keyframes hitGlow{
  0%,72%{box-shadow:0 0 0 1px rgba(255,0,0,.85),0 0 26px rgba(255,0,0,.28)}
  100%{box-shadow:0 0 0 1px rgba(255,0,0,0),0 0 0 rgba(255,0,0,0)}
}

.rail{position:sticky;top:88px}
.rail h2{
  margin:0 0 .8em;
  font-family:var(--mono);
  font-size:17px;
  font-weight:500;
  letter-spacing:.06em;
  color:#ffd7db;
}
.rail-list{list-style:none;margin:0 0 18px;padding:0}
.rail-list a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:16px;
  color:var(--dim);
  transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.rail-list i{
  font-family:var(--mono);
  font-style:normal;
  font-size:13px;
  letter-spacing:.05em;
  color:#ff8a93;
}
.rail-list a:hover{color:#fff;background:rgba(255,255,255,.13);border-color:var(--line);transform:translateX(2px)}

.to-top{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.1);
  font-size:16px;
  transition:background-color .18s ease,transform .18s ease;
}
.to-top:hover{background:rgba(255,0,0,.3);transform:translateY(-1px)}

footer{
  margin-top:clamp(30px,6vw,80px);
  padding:clamp(24px,4.5vw,56px) 0 0;
  border-top:1px solid var(--line);
  background:rgba(17,9,11,.66);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

.cta{
  margin:0 0 clamp(26px,4vw,44px);
  padding:clamp(22px,4vw,46px) clamp(16px,3.5vw,34px);
  border:1px solid rgba(255,255,255,.26);
  border-radius:var(--r);
  background:linear-gradient(135deg,rgba(255,0,0,.22),rgba(139,0,255,.22));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  text-align:center;
}
.cta h2{margin:0;font-size:clamp(1.5rem,4vw,2.3rem);letter-spacing:-.01em}
.cta .subtitle{
  margin:.5em 0 1.3em;
  font-family:var(--mono);
  font-size:16px;
  letter-spacing:.08em;
  color:#ffd9dd;
}
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.18);
  font-size:16px;
  transition:background-color .18s ease,transform .18s ease;
}
.cta-btn:hover{background:rgba(255,255,255,.34);transform:translateY(-2px)}

.cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,3vw,32px);
  padding-bottom:clamp(18px,3vw,30px);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.cols dt{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.16em;
  color:#ffd0d6;
  margin-bottom:.7em;
}
.cols dd{margin:0;color:var(--dim);font-size:16px;line-height:1.6}
.cols dd a{
  display:flex;
  align-items:center;
  min-height:40px;
  margin-left:-8px;
  padding:0 8px;
  border-radius:10px;
  font-size:16px;
  color:var(--dim);
  transition:color .18s ease,background-color .18s ease;
}
.cols dd a:hover{color:#fff;background:rgba(255,255,255,.11)}

.base{
  padding:clamp(16px,3vw,26px) 0 clamp(22px,4vw,38px);
  text-align:center;
  color:#c3abb3;
  font-size:16px;
}
.base p{margin:.25em 0}
.base .note{max-width:70ch;margin:.4em auto 0}

@media (max-width:980px){
  .deck{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
}

@media (max-width:760px){
  .top{grid-template-columns:auto minmax(0,1fr);row-gap:4px}
  .nav{grid-column:1 / -1;order:3}
  .find{justify-self:end}
  .hero{min-height:92svh;padding-top:calc(88px + 5vh)}
  .cols{grid-template-columns:minmax(0,1fr);gap:4px}
  .cols dl + dl{border-top:1px solid rgba(255,255,255,.12);padding-top:8px}
  .prose,.rail{padding:18px 16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

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