/* ============================================================
   aixrun · 视觉主题「暗舞台」
   画布 #000000 / 电紫 #8052ff / 琥珀 #ffb829
   标题 400 字重 + 负字距，正文 200；圆角 24px；无阴影无渐变
   ============================================================ */

@font-face{
  font-family:'InterX';
  src:url('/brand/fonts/inter-var.woff2') format('woff2-variations'),
      url('/brand/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --dl-iris:#8052ff;
  --dl-saffron:#ffb829;
  --dl-void:#000000;
  --dl-ash:#9a9a9a;
  --dl-silver:#bdbdbd;
}

/* ---------------- 基底 ---------------- */
html.dark{ background:var(--dl-void); color-scheme:dark; }
body{
  font-family:'InterX',Inter,system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif !important;
  font-weight:300;
  letter-spacing:0;
  background-color:var(--dl-void);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'ss01' on;
}
input,textarea,select,button{ font-family:inherit; }

/* 标题：永远 400，层级靠体量与字距 */
h1,h2,h3,h4,h5{ font-weight:400 !important; }
h1{ letter-spacing:-.035em; line-height:1.06; }
h2,h3,h4{ letter-spacing:-.022em; line-height:1.14; }
h1.text-lg,h1.text-xl,h1.text-2xl{ font-size:25px; letter-spacing:-.02em; }
h1.text-4xl{
  font-size:clamp(2.6rem,5.2vw,4.4rem);
  letter-spacing:-.04em;
  line-height:1.02;
}
/* 正文更轻，表单与表格保一点重量以保可读 */
p,li{ font-weight:250; }
td,th,label,input,select,textarea,small,button{ font-weight:300; }
strong,b{ font-weight:600; }

/* ---------------- 形状：24px 体系 ---------------- */
.rounded-lg{ border-radius:14px; }
.rounded-xl{ border-radius:24px; }
.rounded-2xl{ border-radius:24px; }
.rounded-3xl{ border-radius:28px; }
.btn{ border-radius:24px; }

/* ---------------- 组件：扁平、无渐变 ---------------- */
.btn{ font-weight:400; letter-spacing:.01em; }
.btn-primary{
  background-image:none !important;
  background-color:var(--dl-iris) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.btn-primary:hover{ background-color:var(--dl-iris) !important; filter:brightness(1.12); }
.btn-secondary{
  background-color:transparent !important;
  border:1px solid #1c1c1c !important;
  color:#fff !important;
  box-shadow:none !important;
}
.btn-secondary:hover{ border-color:rgba(255,255,255,.28) !important; }
.btn-danger,.btn-success{ background-image:none !important; }

[class*="from-primary-500"][class*="bg-gradient"],
[class*="from-primary-600"][class*="bg-gradient"],
[class*="from-primary-400"][class*="bg-gradient"]{
  background-image:none !important;
  background-color:var(--dl-iris) !important;
}

/* 无阴影：只在浮层留一层深投影 */
.shadow-sm,.shadow,.shadow-md,.shadow-lg{ box-shadow:none !important; }
.shadow-xl,.shadow-2xl{ box-shadow:0 40px 100px -32px rgba(0,0,0,.98) !important; }

:focus-visible{ outline:2px solid var(--dl-iris); outline-offset:2px; }
::selection{ background:rgba(128,82,255,.35); color:#fff; }

html.dark hr{ border-color:rgba(255,255,255,.08); }
html.dark table thead tr{ background-color:transparent; }
html.dark ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:99px; }

/* ============================================================
   全屏动效背景（v6）· 粒子流 / 极光 / 网格 / 扫光
   纯 CSS 层即使 WebGL 不可用也保持运动
   ============================================================ */
.dl-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; contain:layout paint;
  background:#000;
}
.dl-bg-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity 1.1s ease .15s;
}
.dl-bg.is-live .dl-bg-canvas{ opacity:1; }

/* 极光：不用 blur filter，径向渐变本身就够柔 */
.dl-aura{
  position:absolute; border-radius:50%;
  will-change:transform; mix-blend-mode:screen;
  transform:translate3d(0,0,0);
}
.dl-aura-1{
  width:min(1260px,110vw); height:min(1260px,110vw);
  left:-24vw; top:-46vw;
  background:radial-gradient(circle at 50% 50%,
    rgba(128,82,255,.38) 0%, rgba(128,82,255,.14) 34%, rgba(128,82,255,.04) 58%, rgba(128,82,255,0) 72%);
  animation:dlAura1 58s ease-in-out infinite alternate;
}
.dl-aura-2{
  width:min(900px,86vw); height:min(900px,86vw);
  right:-18vw; top:16vh;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,184,41,.17) 0%, rgba(255,184,41,.06) 40%, rgba(255,184,41,0) 70%);
  animation:dlAura2 74s ease-in-out infinite alternate;
}
.dl-aura-3{
  width:min(1100px,100vw); height:min(1100px,100vw);
  left:14vw; bottom:-52vw;
  background:radial-gradient(circle at 50% 50%,
    rgba(75,139,255,.28) 0%, rgba(128,82,255,.10) 40%, rgba(75,139,255,0) 72%);
  animation:dlAura3 92s ease-in-out infinite alternate;
}
@keyframes dlAura1{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(7vw,6vh,0) scale(1.14); }
  100%{ transform:translate3d(-4vw,11vh,0) scale(.94); }
}
@keyframes dlAura2{
  0%{ transform:translate3d(0,0,0) scale(1.06); }
  50%{ transform:translate3d(-8vw,9vh,0) scale(.92); }
  100%{ transform:translate3d(3vw,-6vh,0) scale(1.1); }
}
@keyframes dlAura3{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(6vw,-8vh,0) scale(1.16); }
  100%{ transform:translate3d(-7vw,-3vh,0) scale(.96); }
}

/* 网格：缓慢下移，首尾同相位所以无缝 */
.dl-bg-grid{
  position:absolute; inset:-90px -40px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse 72% 58% at 50% 26%, #000 0%, rgba(0,0,0,.35) 58%, transparent 84%);
  mask-image:radial-gradient(ellipse 72% 58% at 50% 26%, #000 0%, rgba(0,0,0,.35) 58%, transparent 84%);
  animation:dlGrid 34s linear infinite;
  will-change:transform;
}
@keyframes dlGrid{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,78px,0); } }

/* 扫光：每 19s 一次，极低强度 */
.dl-bg-sheen{
  position:absolute; inset:-30% -20%;
  background:linear-gradient(104deg, transparent 42%, rgba(255,255,255,.05) 50%, transparent 58%);
  opacity:0;
  animation:dlSheen 19s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes dlSheen{
  0%,64%{ transform:translate3d(-62%,0,0); opacity:0; }
  72%{ opacity:1; }
  86%,100%{ transform:translate3d(62%,0,0); opacity:0; }
}

/* 暗角：压四角保正文可读 */
.dl-bg-vig{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 92% 74% at 50% 34%, rgba(0,0,0,0) 26%, rgba(0,0,0,.38) 74%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.82) 100%);
}

/* 内容层保持在上方；收尾区不再用纯黑盖住背景 */
.dl-has-bg{ background:transparent !important; }
.dl-has-bg .dl-band{ background:transparent !important; }
.dl-has-bg .dl-code{ background:rgba(8,8,10,.72) !important; }

/* Hero 视觉后方的一团呼吸光 */
.dl-has-bg .dl-visual::before{
  content:''; position:absolute; inset:-16%; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,176,41,.16) 0%, rgba(128,82,255,.07) 46%, rgba(128,82,255,0) 70%);
  animation:dlHalo 11s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes dlHalo{
  from{ transform:scale(.94); opacity:.62; }
  to{ transform:scale(1.08); opacity:1; }
}
.dl-has-bg #dl3d-host{ position:relative; z-index:1; }

/* 减少动效偏好：不静止，只把节奏压到很慢 */
@media (prefers-reduced-motion:reduce){
  .dl-aura-1,.dl-aura-2,.dl-aura-3{ animation-duration:180s; }
  .dl-bg-grid{ animation-duration:120s; }
  .dl-bg-sheen{ animation:none; opacity:0; }
  .dl-has-bg .dl-visual::before{ animation-duration:26s; }
}
@media (max-width:960px){
  .dl-aura-1{ animation-duration:70s; }
  .dl-aura-2{ width:120vw; height:120vw; }
  .dl-bg-grid{ animation-duration:44s; }
}

/* Hero 大脑放大：参考图里脑占画面右侧大半，允许溢出容器右缘 */
@media (min-width:961px){
  .dl-has-bg .dl-visual{
    width:min(760px,52vw) !important;
    max-width:min(760px,52vw) !important;
    height:min(600px,64vh) !important;
    margin-right:calc(-1 * clamp(0px,5vw,110px)) !important;
  }
  .dl-has-bg #dl3d-host{ aspect-ratio:auto !important; height:100% !important; }
  .dl-has-bg .dl-visual::before{ inset:-8%; }
}