/* JSAUX 官网 · 皮肤
   深海军蓝 + 霓虹光；直角；颜色只有三种：海军蓝 #030A2A、霓虹蓝 #2F4BFF（深色模式 #8C9EFF）、纸白。
   主手法：叠压（层级阶梯上的大号 mono 标签 L1 / L2 / L3 / PDP；图注浮在图内）。
   招牌动作：网站放在网站里（首页长图 scrub，本页唯一的 sticky 场景）+ 海报 hover 光晕亮起。 */

html[data-skin="jsaux"]{
  --jw-navy:#030A2A;
  --jw-neon:#2F4BFF;
  --jw-neon-l:#8C9EFF;
  --jw-paper:#E8ECFF;
  --skin-accent:var(--jw-neon);
  --skin-ground:var(--jw-navy);
  --skin-ground-fg:var(--jw-paper);
  --jw-code:var(--jw-neon);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-skin="jsaux"]{--skin-accent:var(--jw-neon-l);--skin-paper:#060B22;--jw-code:var(--jw-neon-l)}
}
:root[data-theme="dark"][data-skin="jsaux"]{--skin-accent:var(--jw-neon-l);--skin-paper:#060B22;--jw-code:var(--jw-neon-l)}

/* 背景/方法/结果三栏：夹在海军蓝开场和海军蓝首页舞台之间，底色用皮肤地色提亮一档，浅色/深色模式都连续 */
html[data-skin="jsaux"] .facts{background:color-mix(in srgb,var(--skin-ground) 88%,white);color:var(--skin-ground-fg);--ink:var(--skin-ground-fg);--mute:color-mix(in srgb,var(--skin-ground-fg) 64%,transparent);--ba:var(--jw-neon-l)}

/* ---------- 01 首页 · 网站放在网站里（舞台收进版心；光晕可溢出） ---------- */
.jw-home{--scrub-len:270vh;--win-w:min(52vw,820px);--win-h:min(72svh,calc(100svh - 150px),700px);--scene-after:0px;overflow-x:clip;padding-bottom:clamp(64px,8vw,112px)}
.scn-m .jw-home{padding-block:0}
.jw-home .scrub__stage{grid-template-columns:minmax(0,1fr) var(--win-w) minmax(0,.28fr);align-items:center}
.jw-home .scrub__side{align-self:center}
.jw-home .scrub__notes li::before{background:var(--jw-neon-l);box-shadow:0 0 12px var(--jw-neon)}
.jw-home .scrub__notes small{color:color-mix(in srgb,var(--jw-paper) 58%,transparent)}
.jw-home .scrub__notes li.is-cur span{color:#fff}
.jw-screen{position:relative;isolation:isolate;width:var(--win-w);min-width:0}
.jw-screen .scrub__win{background:var(--jw-navy)}
.jw-screen .scrub__bar{background:color-mix(in srgb,var(--jw-paper) 18%,transparent)}
.jw-screen .scrub__bar i{background:var(--jw-neon-l)}
.jw-screen__tag{position:absolute;left:0;top:0;z-index:2;transform:translateY(-50%);line-height:0}
.jw-screen .tag,.jw-posters .tag{background:var(--jw-navy);color:var(--jw-paper)}
.jw-screen .tag b,.jw-posters .tag b{color:var(--jw-neon-l)}
/* 窗口背后的霓虹光晕：径向渐变，极慢呼吸（只动 opacity / transform） */
.jw-glow{position:absolute;inset:-26% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--jw-neon) 80%,transparent) 0%,color-mix(in srgb,var(--jw-neon) 58%,transparent) 52%,color-mix(in srgb,var(--jw-neon) 26%,transparent) 68%,color-mix(in srgb,var(--jw-neon-l) 8%,transparent) 84%,transparent 100%);
  opacity:.8}
.scn-m .jw-glow{animation:jw-breathe 6s ease-in-out infinite alternate;will-change:opacity,transform}
@keyframes jw-breathe{from{opacity:.55;transform:scale(.95)}to{opacity:1;transform:scale(1.04)}}

/* ---------- 02 视觉基调 · 层级阶梯 ---------- */
.jw-base{--step:clamp(56px,6.4vw,104px)}
.jw-stairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto 1fr;gap:0 clamp(16px,2vw,32px);align-items:start;padding-top:clamp(28px,3vw,48px)}
.jw-lv{grid-row:1 / span 2;position:relative;margin-top:calc(var(--step) * var(--i));min-width:0}
.jw-lv--1{grid-row:1}
.jw-lv__code{position:absolute;left:-.04em;top:0;z-index:2;margin:0;transform:translateY(-58%);font-family:var(--mono);font-weight:500;font-size:clamp(56px,7.4vw,124px);line-height:1;letter-spacing:-.04em;color:var(--jw-code);pointer-events:none;mix-blend-mode:normal}
.jw-lv__name{position:absolute;right:0;top:0;z-index:2;margin:0;transform:translateY(-140%);display:flex;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;line-height:1.4;color:var(--mute)}
.jw-lv__name b{display:none}
.jw-lv__pics{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px)}
.jw-base .pic .pic__btn{background:var(--jw-navy)}
.jw-base .tag{background:var(--jw-navy);color:var(--jw-paper)}
.jw-base .tag b{color:var(--jw-neon-l)}
.jw-path{grid-column:1;grid-row:2;align-self:end;list-style:none;margin:0;padding:0 0 4px;display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;counter-reset:none}
.jw-path li{display:grid;grid-template-columns:3.4em 1fr;align-items:baseline;gap:8px;padding-top:10px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.jw-path b{font-weight:500;color:var(--jw-code)}
.jw-path span{color:var(--mute)}

/* ---------- 03 活动 · 海报墙 ---------- */
.jw-posters{--g:6px;overflow-x:clip}
.jw-wall{container-type:inline-size;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:calc((100cqi - 5 * var(--g)) / 6 + var(--g) / 2);gap:var(--g)}
.jw-wall > *{grid-column:var(--c);grid-row:var(--r)}
.jw-wall .pic{z-index:0;height:100%}
.jw-wall .pic .pic__btn{aspect-ratio:auto;height:100%;background:color-mix(in srgb,var(--jw-paper) 6%,transparent)}
.jw-wall .pic::before{content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--jw-neon) 75%,transparent),color-mix(in srgb,var(--jw-neon) 22%,transparent) 55%,transparent)}
.jw-wall .pic,.jw-wall__note{transition:opacity .5s ease}
@media (hover: hover) and (pointer: fine){
  .jw-wall .pic:hover{z-index:1}
  .jw-wall .pic:hover::before{opacity:1}
  .jw-wall:has(.pic:hover) .pic:not(:hover),.jw-wall:has(.pic:hover) .jw-wall__note{opacity:.5}
}
.jw-wall .pic:focus-within{z-index:1}
.jw-wall .pic:focus-within::before{opacity:1}
.jw-wall .tag{font-size:10px;padding:5px 9px 4px}
.jw-wall .pic{max-height:calc(100svh - 150px)}
.jw-wall__note{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:clamp(12px,1.6vw,24px);border-top:1px solid color-mix(in srgb,var(--jw-paper) 22%,transparent)}
.jw-wall__n{font-family:"Archivo",var(--cn);font-weight:800;font-stretch:74%;font-size:clamp(56px,7cqi,120px);line-height:.82;letter-spacing:-.02em;color:var(--jw-neon-l);font-variant-numeric:tabular-nums}
.jw-wall__cap{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:color-mix(in srgb,var(--jw-paper) 70%,transparent)}

/* ---------- 窄屏 ---------- */
@media (max-width: 899px){
  .jw-home{--scrub-len:240vh;--win-w:100%;--win-h:min(calc(100svh - 300px),620px)}
  .jw-home .scrub__stage{grid-template-columns:minmax(0,1fr);align-items:start}
  .jw-screen{width:100%;margin-top:14px}
  .jw-glow{inset:-12% -8%}

  .jw-base{--step:0px}
  .jw-stairs{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:56px 12px;padding-top:36px}
  .jw-lv{grid-row:auto;margin-top:0}
  .jw-lv--1{grid-column:1}
  .jw-lv--2{grid-column:2;margin-top:18vw}
  .jw-lv--3,.jw-lv--4{grid-column:1 / -1}
  .jw-lv--3 .jw-lv__pics,.jw-lv--4 .jw-lv__pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .jw-lv--3 .pic:nth-child(2),.jw-lv--4 .pic:nth-child(2){margin-top:12vw}
  .jw-lv--4 .pic:nth-child(3){grid-column:1 / -1}
  /* 手机：层级标签缩成每张图左上角的小 mono 标签，不再是飘在图外的大字 */
  .jw-lv__code{left:0;top:0;transform:none;z-index:3;font-size:11px;font-weight:500;letter-spacing:.08em;line-height:1;padding:5px 8px 4px;background:var(--jw-navy);color:var(--jw-paper)}
  .jw-lv__name{transform:translateY(-130%)}
  .jw-path{display:none}
  .jw-base .tag,.jw-wall .tag{font-size:10px;padding:4px 8px 3px}

  .jw-posters{--g:4px}
  .jw-wall{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100cqi - var(--g)) / 2 + var(--g) / 2);grid-auto-flow:row dense}
  .jw-wall > *{grid-column:auto;grid-row:auto}
  .jw-wall .jw-p--t{grid-row:span 2}
  .jw-wall .jw-p--w,.jw-wall__note{grid-column:span 2}
  .jw-wall__n{font-size:clamp(56px,18cqi,88px)}
  .jw-wall__note{display:none}
}
/* 10-14：九周年横幅两张，墙下并排 */
.jw-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g);margin-top:var(--g)}
@media (max-width:599px){.jw-duo{grid-template-columns:minmax(0,1fr)}}