*{box-sizing:border-box}
html{background:#24003f;scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at top right,#3b006b 0,#24003f 28%,#1b002f 100%);color:#fff;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.82;overflow-x:hidden}
img{max-width:100%}
a{color:#25dff5;text-underline-offset:3px}
a:hover{color:#bfffff}
button{font:inherit}
body.menu-opened{overflow:hidden}
.topbar{position:sticky;top:0;z-index:9999;background:rgba(22,0,43,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(191,255,255,.1)}
.topbar-inner{width:min(1180px,calc(100% - 30px));min-height:70px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-logo,.mobile-logo,.footer-logo{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand-logo img{height:40px;width:auto;max-width:160px;object-fit:contain}
.mobile-logo img,.footer-logo img{height:38px;width:auto;max-width:160px;object-fit:contain}
.text-logo{min-width:120px;height:40px;justify-content:center;border-radius:12px;background:#2d0052;color:#bfffff;font-weight:800}
.primary-nav{display:flex;align-items:center;gap:4px;min-width:0}
.primary-nav a{padding:8px 12px;color:#fff;text-decoration:none;font-weight:700;white-space:nowrap}
.primary-nav a:hover,.primary-nav a.is-active{color:#25dff5;background:rgba(37,223,245,.08);border-radius:999px}
.main-action{display:inline-flex;align-items:center;justify-content:center;height:42px;min-width:96px;padding:0 18px;background:linear-gradient(90deg,#21dff5 0%,#8f7bff 52%,#f06bea 100%);color:#fff;border-radius:999px;text-decoration:none;font-weight:800;box-shadow:0 12px 28px rgba(240,107,234,.25);white-space:nowrap}
.menu-open{display:none;width:42px;height:42px;border:1px solid rgba(191,255,255,.18);border-radius:12px;background:#2d0052;color:#bfffff}
.topic-strip{background:#2d0052;border-bottom:1px solid rgba(191,255,255,.08)}
.topic-strip-inner{width:min(1180px,calc(100% - 30px));margin:0 auto;display:flex;overflow-x:auto;scrollbar-width:thin}
.topic-strip a{flex:0 0 auto;padding:10px 13px;color:#d8c7ff;text-decoration:none;font-size:14px;white-space:nowrap}
.topic-strip a:hover{color:#25dff5}
.page-main{min-height:60vh}
.wrap{width:min(1160px,calc(100% - 32px));margin:0 auto}
.read{width:min(820px,calc(100% - 32px));margin:0 auto}
.section{padding:54px 0}
.section-tight{padding:30px 0}
.eyebrow{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(240,107,234,.12);color:#f06bea;font-size:12px;font-weight:800;letter-spacing:.1em;margin-bottom:12px}
h1,h2,h3{color:#bfffff;line-height:1.28;margin-top:0}
h1{font-size:clamp(30px,4.4vw,46px);margin-bottom:18px}
h2{font-size:clamp(21px,2.5vw,30px);margin-bottom:12px}
h3{font-size:18px}
p,li{font-size:16px}
.lead{font-size:18px;color:#d8c7ff}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:center}
.hero-copy{padding:34px;border-radius:20px;background:linear-gradient(145deg,rgba(59,0,107,.82),rgba(45,0,82,.72));border:1px solid rgba(191,255,255,.12);box-shadow:0 18px 44px rgba(0,0,0,.28)}
.media{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#2d0052;border:1px solid rgba(191,255,255,.08)}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.media-fallback{min-height:190px}
.hero-media{min-height:280px}
.poster-wide{aspect-ratio:16/3.5;min-height:180px;max-height:240px}
.card-media{min-height:150px}
.split-media{min-height:220px}
.featured-grid{display:grid;grid-template-columns:1.4fr repeat(2,.8fr);gap:18px}
.featured-card,.mini-card,.panel,.note,.step,.faq-item,.index-card{background:#2d0052;border:1px solid rgba(191,255,255,.12);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.24)}
.featured-card,.panel{padding:26px}
.mini-card,.index-card{padding:20px}
.mini-card p,.index-card p{color:#d8c7ff}
.link-more{font-weight:800;text-decoration:none}
.badge-row,.link-row{display:flex;flex-wrap:wrap;gap:10px}
.badge-row a,.link-row a{padding:8px 12px;border-radius:999px;background:#3b006b;text-decoration:none}
.theme-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.theme-tile{padding:18px 14px;border-radius:16px;background:linear-gradient(180deg,#3b006b,#2d0052);border:1px solid rgba(191,255,255,.12)}
.theme-tile p{font-size:14px;color:#d8c7ff;margin-bottom:8px}
.focus-band{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:center}
.note{padding:22px 24px;color:#d8c7ff}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.timeline{display:grid;gap:14px;counter-reset:num}
.step{position:relative;padding:22px 22px 22px 76px;counter-increment:num}
.step:before{content:counter(num);position:absolute;left:22px;top:22px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#3b006b;color:#bfffff;font-weight:800}
.quote-block{padding:26px;border-left:4px solid #25dff5;background:#2d0052;border-radius:0 16px 16px 0;color:#d8c7ff}
.breadcrumb{padding:20px 0 0;color:#b99ee8;font-size:14px}
.breadcrumb a{color:#d8c7ff;text-decoration:none}
.article-flow{display:grid;gap:28px}
.article-flow article{padding-bottom:22px;border-bottom:1px solid rgba(191,255,255,.1)}
.directory{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.directory a{display:block;padding:16px;border-radius:14px;background:#2d0052;text-decoration:none}
.faq-list{display:grid;gap:14px}
.faq-item{padding:22px}
.desktop-rail{position:fixed;right:14px;top:34%;z-index:8000;width:112px;display:grid;gap:8px}
.desktop-rail a,.desktop-rail button{min-height:40px;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:12px;background:#16002b;border:1px solid rgba(191,255,255,.12);color:#fff;text-decoration:none;font-size:13px}
.desktop-rail .rail-main{background:linear-gradient(90deg,#21dff5,#8f7bff,#f06bea)}
.footer{margin-top:44px;background:#140024}
.footer-inner{width:min(1160px,calc(100% - 32px));margin:0 auto;padding:46px 0 30px;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.footer-inner h2{font-size:17px}
.footer-inner a{display:block;margin:5px 0;color:#d8c7ff;text-decoration:none}
.footer-inner p{color:#b99ee8;font-size:14px}
.footer-note{width:min(1160px,calc(100% - 32px));margin:0 auto;padding:18px 0;border-top:1px solid rgba(191,255,255,.1);color:#b99ee8}
.footer-note p{font-size:13px;margin:4px 0}
.mobile-tabbar{display:none}
.mobile-menu,.menu-mask{display:none}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(191,255,255,.1)}
.menu-close{width:40px;height:40px;border:1px solid rgba(191,255,255,.15);border-radius:10px;background:#16002b;color:#fff;font-size:24px}
.mobile-menu-body{height:calc(100% - 73px);overflow-y:auto;padding:14px 16px 30px}
.mobile-menu-body section{margin-bottom:16px}
.mobile-menu-body h2{font-size:14px;color:#f06bea;margin-bottom:6px}
.mobile-menu-body a{display:block;padding:9px 6px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(191,255,255,.07)}
@media(max-width:1180px){.desktop-rail{display:none}}
@media(max-width:980px){
  .primary-nav,.topic-strip{display:none}
  .topbar-inner{min-height:64px;width:100%;padding:0 12px;display:grid;grid-template-columns:42px 1fr auto;gap:10px}
  .menu-open{display:grid;place-items:center}
  .brand-logo{justify-self:center}
  .brand-logo img{height:36px;max-width:136px}
  .main-action{height:40px;min-width:84px;padding:0 13px;font-size:14px}
  .mobile-menu{display:block;position:fixed;inset:0 auto 0 0;width:min(84vw,320px);background:#2d0052;z-index:12000;transform:translateX(-105%);transition:transform .2s ease;box-shadow:18px 0 40px rgba(0,0,0,.36)}
  .mobile-menu.is-open{transform:translateX(0)}
  .menu-mask{display:none;position:fixed;inset:0;background:rgba(20,0,36,.52);z-index:11000;opacity:0;pointer-events:none;transition:opacity .18s ease}
  .menu-mask.is-visible{display:block;opacity:1;pointer-events:auto}
  .mobile-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:8500;display:grid;grid-template-columns:repeat(4,1fr);background:#16002b;border-top:1px solid rgba(191,255,255,.12);padding-bottom:env(safe-area-inset-bottom)}
  .mobile-tabbar a{padding:10px 4px;text-align:center;color:#fff;text-decoration:none;font-size:13px}
  body{padding-bottom:50px}
  .hero-grid,.focus-band{grid-template-columns:1fr}
  .featured-grid{grid-template-columns:1fr 1fr}
  .featured-card{grid-column:1/-1}
  .theme-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .directory{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .section{padding:38px 0}
  .read,.wrap{width:min(100% - 28px,1160px)}
  .hero-copy{padding:22px}
  .hero-media{min-height:220px}
  .poster-wide{min-height:120px;max-height:160px}
  .featured-grid,.two-col,.three-col{grid-template-columns:1fr}
  .featured-card{grid-column:auto}
  .theme-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .directory{grid-template-columns:1fr}
  h1{font-size:clamp(27px,8vw,34px)}
  .lead{font-size:16px}
  p,li{font-size:15px}
}
@media(max-width:380px){
  .topbar-inner{grid-template-columns:40px 1fr auto;padding:0 8px;gap:8px}
  .menu-open{width:40px;height:40px}
  .main-action{min-width:76px;padding:0 10px;font-size:13px}
  .brand-logo img{max-width:118px}
}