*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#05070d;
  --panel:#090d17;
  --line:rgba(226,232,240,.14);
  --text:#f8fafc;
  --muted:#a8b3c4;
  --soft:#667386;
  --tone:#38bdf8;
  --tone-bg:rgba(56,189,248,.12);
  --tone-border:rgba(56,189,248,.42);
}
body{
  min-height:100vh;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    #05070d;
  background-size:46px 46px,46px 46px,100% 100%;
  color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
}
body.force{--tone:#f59e0b;--tone-bg:rgba(245,158,11,.12);--tone-border:rgba(245,158,11,.42)}
body.field{--tone:#e879f9;--tone-bg:rgba(232,121,249,.12);--tone-border:rgba(232,121,249,.4)}
body.energy{--tone:#34d399;--tone-bg:rgba(52,211,153,.12);--tone-border:rgba(52,211,153,.4)}
a{color:inherit;text-decoration:none}
.module-shell{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:34px 0 80px;
}
.back{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:8px;
  color:rgba(248,250,252,.74);
  background:rgba(9,13,23,.62);
}
.module-hero{
  min-height:calc(100vh - 120px);
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr);
  align-items:center;
  gap:52px;
}
.label{
  color:var(--tone);
  font-size:15px;
  margin-bottom:18px;
}
h1{
  font-size:72px;
  line-height:1.05;
  margin-bottom:24px;
  text-wrap:balance;
}
.lead{
  max-width:620px;
  color:var(--muted);
  font-size:18px;
  line-height:1.9;
  text-wrap:pretty;
}
.outline{
  margin-top:32px;
  display:grid;
  gap:12px;
}
.outline span{
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(248,250,252,.78);
}
.outline span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--tone);
  box-shadow:0 0 18px var(--tone);
  flex:0 0 auto;
}
.module-hero img{
  width:100%;
  border:1px solid rgba(226,232,240,.16);
  border-radius:8px;
  box-shadow:0 34px 120px rgba(0,0,0,.46),0 0 70px var(--tone-bg);
}
.content-placeholder,
.content-block{
  border-top:1px solid var(--line);
  padding-top:42px;
  margin-top:40px;
  max-width:760px;
}
.content-placeholder h2,
.content-block h2{
  font-size:34px;
  margin-bottom:12px;
}
.content-placeholder p,
.content-block p{
  color:var(--muted);
  font-size:17px;
  line-height:1.9;
  margin-bottom:16px;
}
@media(max-width:900px){
  .module-shell{width:min(100% - 32px,1180px)}
  .module-hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:70px 0 50px;
  }
  h1{font-size:48px}
}
@media(max-width:560px){
  h1{font-size:36px}
  .lead{font-size:16px}
}