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

:root{
  --pink:#ff0080;
  --mag:#ff00ff;
  --ink:#26171f;
  --line:rgba(255,0,128,.28);
  --soft:rgba(255,0,255,.09);
  --text:#f6ecf2;
  --dim:#cbb0bf;
  --serif:'Noto Naskh Arabic',Georgia,'Songti SC','Noto Serif CJK SC','Source Han Serif SC',serif;
  --sans:'Noto Sans Arabic',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --edge:20px;
}

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

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

body{
  margin:0;
  background:transparent;
  color:var(--text);
  font:400 17px/1.75 var(--sans);
  padding-bottom:124px;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-22%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(46% 42% at 18% 14%,rgba(255,0,128,.55),transparent 66%),
    radial-gradient(50% 46% at 82% 22%,rgba(255,0,255,.42),transparent 62%),
    radial-gradient(64% 52% at 54% 88%,rgba(122,75,255,.4),transparent 72%),
    conic-gradient(from 118deg at 50% 50%,rgba(255,0,128,.26),rgba(255,0,255,.1),rgba(0,196,255,.16),rgba(255,0,128,.26));
  filter:blur(26px) saturate(135%);
  mix-blend-mode:screen;
  animation:drift 26s ease-in-out infinite alternate;
}

@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-4%,3%,0) scale(1.14)}
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.25;
}

a{color:#ff7ac0}
a:hover{color:#ffd1ee}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- 底部固定条 ---------- */
.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px var(--edge);
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
  background:rgba(38,23,31,.9);
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  min-height:44px;
  color:var(--text);
  text-decoration:none;
  font:600 16px/1 var(--serif);
  letter-spacing:.05em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand::before{
  content:"";
  flex:none;
  width:10px;
  height:10px;
  background:linear-gradient(135deg,var(--pink),var(--mag));
  box-shadow:0 0 14px rgba(255,0,128,.75);
}

.dock-r{display:flex;align-items:center;gap:8px;flex:none}

.menu{position:relative}

.menu > summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 15px;
  border:1px solid var(--line);
  background:rgba(255,0,128,.1);
  color:var(--text);
  font-size:16px;
  cursor:pointer;
  user-select:none;
}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary::after{
  content:"";
  width:8px;
  height:8px;
  border-right:1.5px solid var(--pink);
  border-bottom:1.5px solid var(--pink);
  transform:rotate(225deg) translateY(-2px);
}
.menu[open] > summary{background:rgba(255,0,255,.2);border-color:var(--mag)}

.menu-list{
  position:absolute;
  right:0;
  bottom:calc(100% + 12px);
  width:min(84vw,320px);
  max-height:60vh;
  overflow:auto;
  margin:0;
  padding:8px;
  list-style:none;
  background:#2d1a26;
  border:1px solid var(--line);
  box-shadow:0 -22px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,0,255,.08) inset;
}

.menu-list a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 12px;
  color:var(--dim);
  text-decoration:none;
  font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.menu-list a:hover{
  color:#fff;
  background:linear-gradient(90deg,rgba(255,0,128,.24),transparent);
}
.menu-list .brk{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(255,0,255,.28);
}
.menu-list li:last-child a{border-bottom:0}

.dock-cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 18px;
  color:#1b0d15;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  background:linear-gradient(120deg,var(--pink),var(--mag));
}

/* ---------- 首屏 ---------- */
.hero{
  max-width:1180px;
  margin:0 auto;
  min-height:70vh;
  padding:44px var(--edge) 12px;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:38px;
  align-items:center;
}

.hero-media{display:flex;justify-content:flex-start;min-width:0}

.hero-art{
  width:100%;
  max-width:260px;
  height:auto;
  display:block;
  filter:drop-shadow(0 18px 44px rgba(255,0,128,.35));
}

.hero-txt{text-align:right;min-width:0}

.chip{
  display:inline-block;
  padding:5px 12px;
  border:1px solid var(--mag);
  background:rgba(255,0,255,.12);
  color:#ffd1ee;
  font-size:16px;
  letter-spacing:.08em;
  transform:rotate(-2deg);
}

.hero h1{
  margin:20px 0 0;
  font-size:clamp(1.85rem,7vw,4rem);
  line-height:1.12;
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 0 40px rgba(255,0,255,.35);
}

/* ---------- 主体 ---------- */
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:56px var(--edge);
  display:grid;
  grid-template-columns:258px minmax(0,1fr);
  gap:48px;
  align-items:start;
}

.rail{
  position:sticky;
  top:28px;
  max-height:calc(100vh - 150px);
  overflow:auto;
  padding:20px 16px 18px;
  background:linear-gradient(180deg,rgba(255,0,128,.1),rgba(38,23,31,.2));
  border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.4);
}

.rail h2{
  margin:0 0 8px;
  padding-bottom:10px;
  font-size:20px;
  border-bottom:1px solid var(--line);
}

.rail .subtitle{
  margin:0 0 18px;
  color:var(--dim);
  font-size:16px;
  line-height:1.6;
}

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

.rail-nav li{animation:rise .5s ease both}
.rail-nav li:nth-child(2){animation-delay:.04s}
.rail-nav li:nth-child(3){animation-delay:.08s}
.rail-nav li:nth-child(4){animation-delay:.12s}
.rail-nav li:nth-child(5){animation-delay:.16s}
.rail-nav li:nth-child(6){animation-delay:.2s}
.rail-nav li:nth-child(7){animation-delay:.24s}

@keyframes rise{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

.rail-nav a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 12px;
  color:var(--dim);
  text-decoration:none;
  font-size:16px;
  border-left:2px solid transparent;
}
.rail-nav a:hover{
  color:#fff;
  border-left-color:var(--pink);
  background:linear-gradient(90deg,rgba(255,0,128,.2),transparent);
}

.body{min-width:0}

.prose{
  max-width:740px;
  overflow-wrap:anywhere;
}

.prose > section{
  padding:44px 0;
  border-top:1px solid var(--line);
  scroll-margin-top:24px;
}
.prose > section:first-child{border-top:0;padding-top:0}

.prose h2{
  margin:0 0 12px;
  font-size:clamp(1.4rem,3.2vw,2rem);
  color:#fff;
}
.prose h2 + p{margin-top:0}
.prose h3{margin:26px 0 8px;font-size:19px;color:#ffd1ee}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{padding-left:1.35em;margin:0 0 1.1em}
.prose li{margin:.3em 0}
.prose img{max-width:100%;height:auto;display:block;margin:22px 0}
.prose blockquote{
  margin:22px 0;
  padding:14px 18px;
  border-left:3px solid var(--mag);
  background:rgba(255,0,255,.08);
  color:#f3dcea;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:16px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 11px;text-align:left}
.prose th{background:rgba(255,0,128,.14)}
.prose time{color:var(--dim);font-size:16px}
.prose code{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:15px;
  background:rgba(255,255,255,.08);
  padding:1px 5px;
}
.prose pre{
  overflow:auto;
  padding:14px;
  background:rgba(0,0,0,.4);
  border:1px solid var(--line);
}
.prose pre code{background:none;padding:0}

/* ---------- 订阅块 ---------- */
.signup{
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--edge) 68px;
}

.signup-form{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  max-width:740px;
  padding:22px;
  background:linear-gradient(120deg,rgba(255,0,128,.18),rgba(255,0,255,.06));
  border:1px solid var(--line);
  box-shadow:0 22px 54px rgba(0,0,0,.5);
}

.signup-form label{font-size:16px;color:#ffd1ee;letter-spacing:.06em}

.signup-form input{
  min-height:46px;
  min-width:0;
  padding:0 14px;
  color:var(--text);
  background:rgba(0,0,0,.36);
  border:1px solid var(--line);
  font:400 16px/1 var(--sans);
}
.signup-form input::placeholder{color:#a98a9b}

.signup-form button{
  min-height:46px;
  padding:0 22px;
  border:0;
  color:#1b0d15;
  font:700 16px/1 var(--sans);
  background:linear-gradient(120deg,var(--pink),var(--mag));
  cursor:pointer;
  transition:filter .2s ease;
}
.signup-form button:hover{filter:brightness(1.15)}

/* ---------- 页脚 ---------- */
.foot{
  max-width:1180px;
  margin:0 auto;
  padding:34px var(--edge) 28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 30px;
  border-top:1px solid var(--line);
}

.foot-a{margin:0;display:grid;gap:4px;min-width:0}
.foot-a strong{font:600 18px/1.3 var(--serif);color:#fff;letter-spacing:.04em}
.foot-a span{color:var(--dim);font-size:16px}

.foot-b{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-content:flex-start;
  gap:0 6px;
}
.foot-b a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 10px;
  color:var(--dim);
  text-decoration:none;
  font-size:16px;
}
.foot-b a:hover{color:#fff}

.foot-c{
  grid-column:1/-1;
  padding-top:12px;
  font-size:16px;
  color:#a98a9b;
  border-top:1px solid rgba(255,255,255,.08);
}

/* ---------- 断点 ---------- */
@media (max-width:860px){
  .hero{
    grid-template-columns:96px minmax(0,1fr);
    gap:18px;
    min-height:70vh;
    padding-top:34px;
    align-content:center;
  }
  .hero-art{max-width:96px}

  .wrap{
    grid-template-columns:1fr;
    gap:34px;
    padding-top:40px;
  }

  .rail{
    position:static;
    max-height:none;
    overflow:visible;
  }

  .rail-nav ul{grid-template-columns:1fr 1fr;gap:2px 6px}

  .signup-form{grid-template-columns:1fr;gap:10px}
  .signup-form label{padding-top:2px}

  .foot{grid-template-columns:1fr}
  .foot-b{justify-content:flex-start}
}

@media (max-width:520px){
  :root{--edge:16px}
  body{font-size:16.5px}
  .hero{grid-template-columns:78px minmax(0,1fr);gap:14px}
  .hero-art{max-width:78px}
  .hero h1{font-size:clamp(1.75rem,8.2vw,2.4rem)}
  .rail-nav ul{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before{animation:none}
  *{animation:none!important;transition:none!important}
}

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