/* ===== 1. Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,picture,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

/* ===== 2. Tokens ===== */
:root{
  --jn-paper:#F5F0E6;
  --jn-night:#0C2430;
  --jn-night-deep:#08181F;
  --jn-ink:#1C4E5A;
  --jn-green:#3FF0A2;
  --jn-green-deep:#2BD98E;
  --jn-gold:#C8A02E;
  --jn-gold-ink:#8A6D18;
  --jn-orange:#E4572E;
  --jn-mist:#9CC6C4;
  --jn-card:#FFFDF8;
  --jn-text:#2A211A;
  --jn-glass:rgba(255,255,255,.18);
  --jn-line:rgba(156,198,196,.45);
  --jn-line-strong:rgba(28,78,90,.26);
  --jn-muted:rgba(42,33,26,.62);
  --jn-on-dark:rgba(245,240,230,.78);
  --jn-radius:14px;
  --jn-radius-sm:10px;
  --jn-max:1360px;
  --jn-gutter:24px;
  --jn-header-h:66px;
  --jn-font-display:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --jn-font-body:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --jn-font-mono:"JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,"Courier New",monospace;
  --jn-ease:cubic-bezier(.22,.61,.36,1);
}

/* ===== 3. Base & 中文排版 ===== */
body{
  min-height:100vh;
  background-color:var(--jn-paper);
  background-image:repeating-linear-gradient(115deg,rgba(28,78,90,.035) 0 1px,transparent 1px 7px);
  color:var(--jn-text);
  font-family:var(--jn-font-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.004em;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--jn-font-display);font-weight:700;line-height:1.25;letter-spacing:-.01em}
p{text-wrap:pretty}
::selection{background:var(--jn-green);color:#062018}
:focus-visible{outline:2px solid var(--jn-green);outline-offset:3px;border-radius:4px}
#main-content{display:block;min-height:60vh}
.jn-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== 4. 布局 ===== */
.jn-container{width:100%;max-width:var(--jn-max);margin-inline:auto;padding-inline:var(--jn-gutter)}
.jn-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--jn-gutter)}
.jn-section{padding-block:64px}
.jn-section--tight{padding-block:40px}
.jn-section__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 28px;margin-bottom:28px}
.jn-band{background:linear-gradient(180deg,var(--jn-night),var(--jn-night-deep));color:var(--jn-paper)}
.jn-band .jn-section-title,.jn-band h2,.jn-band h3{color:var(--jn-paper)}

/* ===== 5. 标题与索引小字 ===== */
.jn-display{font-family:var(--jn-font-display);font-weight:250;font-size:clamp(40px,7.4vw,112px);line-height:1.02;letter-spacing:-.02em;color:var(--jn-text)}
.jn-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--jn-ink)}
.jn-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--jn-green);flex:none}
.jn-section-title{font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.jn-section-sub{font-size:14px;color:var(--jn-muted);max-width:46em}

/* ===== 6. 正文容器 ===== */
.jn-prose{max-width:38em;font-size:16px;line-height:1.75}
.jn-prose > * + *{margin-top:1.1em}
.jn-prose h2{font-size:22px;margin-top:1.8em}
.jn-prose h3{font-size:18px;margin-top:1.5em}
.jn-prose ul{list-style:disc;padding-left:1.4em}
.jn-prose ol{list-style:decimal;padding-left:1.4em}
.jn-prose li + li{margin-top:.4em}
.jn-prose a{color:var(--jn-ink);border-bottom:1px solid var(--jn-line)}
.jn-prose a:hover{border-color:var(--jn-green)}
.jn-prose strong{font-weight:700}
.jn-prose blockquote{border-left:3px solid var(--jn-green);padding-left:16px;color:var(--jn-muted)}

/* ===== 7. 按钮 / 标签 / 卡片 ===== */
.jn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid transparent;font-size:14px;font-weight:700;letter-spacing:.01em;line-height:1.2;cursor:pointer;transition:transform .16s var(--jn-ease),background-color .2s var(--jn-ease),color .2s var(--jn-ease),border-color .2s var(--jn-ease)}
.jn-btn--primary{background:var(--jn-green);color:#062018;border-color:var(--jn-green)}
.jn-btn--primary:hover{background:var(--jn-green-deep);transform:translateY(-2px)}
.jn-btn--ghost{background:transparent;color:var(--jn-paper);border-color:rgba(156,198,196,.5)}
.jn-btn--ghost:hover{color:var(--jn-green);border-color:var(--jn-green);transform:translateY(-2px)}
.jn-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;border:1px solid var(--jn-line-strong);background:rgba(255,253,248,.7);font-size:12px;letter-spacing:.06em;color:var(--jn-ink)}
.jn-tag--live{border-color:rgba(228,87,46,.5);background:rgba(228,87,46,.08);color:var(--jn-orange)}
.jn-tag--gold{border-color:rgba(200,160,46,.55);background:rgba(200,160,46,.1);color:var(--jn-gold-ink)}
.jn-dot{width:8px;height:8px;border-radius:50%;background:var(--jn-green);box-shadow:0 0 0 3px rgba(63,240,162,.22);flex:none}
.jn-dot--live{background:var(--jn-orange);box-shadow:0 0 0 3px rgba(228,87,46,.18)}
.jn-card{background:var(--jn-card);border:1px solid var(--jn-line);border-radius:var(--jn-radius);padding:22px;transition:transform .18s var(--jn-ease),border-color .18s var(--jn-ease)}
.jn-card:hover{transform:translateY(-2px);border-color:var(--jn-green)}
.jn-glass{background:var(--jn-glass);border:1px solid rgba(156,198,196,.5);border-radius:var(--jn-radius);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}

/* ===== 8. 数据件 ===== */
.jn-num{font-family:var(--jn-font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.01em}
.jn-stat{display:flex;flex-direction:column;gap:4px}
.jn-stat__value{font-family:var(--jn-font-mono);font-variant-numeric:tabular-nums;font-size:28px;font-weight:700;line-height:1;color:var(--jn-ink)}
.jn-stat__value--gold{color:var(--jn-gold-ink)}
.jn-stat__value--live{color:var(--jn-orange)}
.jn-stat__label{font-size:12px;letter-spacing:.08em;color:var(--jn-muted)}
.jn-band .jn-stat__value{color:var(--jn-green)}
.jn-band .jn-stat__label{color:rgba(156,198,196,.9)}

/* ===== 9. 面包屑 ===== */
.jn-breadcrumb{padding-block:16px;font-size:12px;letter-spacing:.06em;color:var(--jn-muted)}
.jn-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.jn-breadcrumb li{display:flex;align-items:center;gap:8px}
.jn-breadcrumb li::after{content:"/";color:var(--jn-mist)}
.jn-breadcrumb li:last-child::after{content:""}
.jn-breadcrumb a:hover{color:var(--jn-ink)}
.jn-breadcrumb [aria-current="page"]{color:var(--jn-text);font-weight:700}

/* ===== 10. 图片容器 ===== */
.jn-media{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:var(--jn-radius);border:1px solid var(--jn-line);background:linear-gradient(140deg,#123642,var(--jn-night) 62%,var(--jn-ink))}
.jn-media::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(156,198,196,.14) 0 1px,transparent 1px 9px);opacity:.65;pointer-events:none}
.jn-media img,.jn-media picture,.jn-media video{width:100%;height:100%;object-fit:cover}
.jn-media--wide{aspect-ratio:21/9}
.jn-media--tall{aspect-ratio:4/5}
.jn-media--square{aspect-ratio:1/1}
.jn-media__badge{position:absolute;left:14px;top:12px;z-index:2;padding:4px 9px;border-radius:999px;border:1px solid rgba(156,198,196,.5);background:rgba(12,36,48,.62);color:var(--jn-green);font-family:var(--jn-font-mono);font-size:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.jn-media__caption{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;font-size:12px;letter-spacing:.06em;color:rgba(245,240,230,.94);text-shadow:0 1px 6px rgba(12,36,48,.75)}

/* ===== 11. 分段切换 ===== */
.jn-tabs{display:flex;flex-wrap:wrap;gap:6px;width:fit-content;max-width:100%;padding:6px;border-radius:999px;border:1px solid var(--jn-line);background:rgba(28,78,90,.07)}
.jn-tabs__btn{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:700;color:var(--jn-muted);transition:background-color .18s var(--jn-ease),color .18s var(--jn-ease)}
.jn-tabs__btn:hover{color:var(--jn-ink)}
.jn-tabs__btn[aria-selected="true"]{background:var(--jn-night);color:var(--jn-green)}
.jn-tab-panel{padding-top:22px}
.jn-tab-panel[hidden]{display:none}

/* ===== 12. 过滤 ===== */
.jn-filter{display:flex;flex-direction:column;gap:14px}
.jn-filter__input{width:100%;max-width:420px;padding:11px 16px;border-radius:999px;border:1px solid var(--jn-line-strong);background:var(--jn-card);font-size:14px;color:var(--jn-text)}
.jn-filter__input::placeholder{color:rgba(42,33,26,.42)}
.jn-filter__input:focus{outline:none;border-color:var(--jn-green);box-shadow:0 0 0 3px rgba(63,240,162,.22)}
.jn-filter__empty{padding:18px;border-radius:var(--jn-radius);border:1px dashed var(--jn-line);color:var(--jn-muted);font-size:14px}
[data-filter-item][hidden]{display:none}
[data-filter-empty][hidden]{display:none}

/* ===== 13. 入场显现 ===== */
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .24s var(--jn-ease),transform .24s var(--jn-ease)}
[data-reveal].is-visible{opacity:1;transform:none}

/* ===== 14. 跳转链接 ===== */
.jn-skip{position:absolute;left:16px;top:-80px;z-index:120;padding:10px 18px;border-radius:0 0 var(--jn-radius-sm) var(--jn-radius-sm);background:var(--jn-green);color:#062018;font-size:14px;font-weight:700;transition:top .18s var(--jn-ease)}
.jn-skip:focus{top:0}

/* ===== 15. 命令栏头部 ===== */
.jn-header{position:sticky;top:0;z-index:80;background:linear-gradient(180deg,rgba(12,36,48,.98),rgba(12,36,48,.93));color:var(--jn-paper);border-bottom:1px solid rgba(156,198,196,.28);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.jn-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--jn-mist) 20%,var(--jn-green) 48%,var(--jn-gold) 78%,transparent);opacity:.5;pointer-events:none}
.jn-progress{position:absolute;left:0;top:0;width:0;height:2px;background:linear-gradient(90deg,var(--jn-green),var(--jn-gold));transition:width .12s linear;z-index:3}
.jn-header__inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;width:100%;max-width:var(--jn-max);margin-inline:auto;padding:10px var(--jn-gutter);min-height:var(--jn-header-h);transition:min-height .2s var(--jn-ease),padding .2s var(--jn-ease)}

/* 品牌 */
.jn-brand{display:flex;align-items:center;gap:12px;min-width:0}
.jn-brand__mark{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--jn-radius-sm);border:1px solid rgba(156,198,196,.5);background:linear-gradient(140deg,var(--jn-ink),var(--jn-night-deep));color:var(--jn-green);font-size:18px;font-weight:700}
.jn-brand__text{display:flex;flex-direction:column;min-width:0;line-height:1.18}
.jn-brand__name{font-family:var(--jn-font-display);font-size:18px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.jn-brand__tagline{font-size:12px;letter-spacing:.08em;color:var(--jn-mist);white-space:nowrap}
.jn-brand__badge{flex:none;padding:3px 8px;border-radius:999px;border:1px solid rgba(200,160,46,.55);background:rgba(200,160,46,.12);color:var(--jn-gold);font-family:var(--jn-font-mono);font-size:11px;letter-spacing:.06em;white-space:nowrap}

/* 主导航 */
.jn-nav{min-width:0}
.jn-nav__list{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.jn-nav__item{display:block}
.jn-nav__link{position:relative;display:inline-block;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--jn-on-dark);white-space:nowrap;transition:color .18s var(--jn-ease),background-color .18s var(--jn-ease)}
.jn-nav__link:hover{color:var(--jn-paper);background:rgba(156,198,196,.14)}
.jn-nav__link[aria-current="page"]{color:var(--jn-green)}
.jn-nav__link[aria-current="page"]::after{content:"";position:absolute;left:10px;bottom:2px;width:14px;height:2px;border-radius:2px;background:var(--jn-green)}

/* 快捷入口与 CTA */
.jn-actions{display:flex;align-items:center;gap:8px;justify-self:end}
.jn-actions__cta{white-space:nowrap}
.jn-quick{padding:7px 12px;border-radius:999px;border:1px solid rgba(156,198,196,.42);background:rgba(255,255,255,.06);color:rgba(245,240,230,.86);font-size:13px;white-space:nowrap;transition:border-color .18s var(--jn-ease),color .18s var(--jn-ease),background-color .18s var(--jn-ease)}
.jn-quick:hover{border-color:var(--jn-green);color:var(--jn-green);background:rgba(63,240,162,.08)}

/* 移动按钮 */
.jn-nav-toggle{display:none;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid rgba(156,198,196,.45);color:var(--jn-paper);font-size:13px;letter-spacing:.08em}
.jn-nav-toggle__bars{position:relative;display:block;width:16px;height:10px;flex:none}
.jn-nav-toggle__bars::before,.jn-nav-toggle__bars::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .2s var(--jn-ease),top .2s var(--jn-ease),bottom .2s var(--jn-ease)}
.jn-nav-toggle__bars::before{top:0}
.jn-nav-toggle__bars::after{bottom:0}
.jn-header[data-open] .jn-nav-toggle{border-color:var(--jn-green);color:var(--jn-green)}
.jn-header[data-open] .jn-nav-toggle__bars::before{top:4px;transform:rotate(45deg)}
.jn-header[data-open] .jn-nav-toggle__bars::after{bottom:4px;transform:rotate(-45deg)}

/* 滚动后收窄 */
.jn-header[data-scrolled] .jn-header__inner{min-height:56px;padding-block:6px}
.jn-header[data-scrolled] .jn-brand__tagline{display:none}

/* ===== 16. 页脚 ===== */
.jn-footer{position:relative;margin-top:64px;background:linear-gradient(180deg,var(--jn-night),var(--jn-night-deep));color:var(--jn-on-dark)}
.jn-pulse{position:relative;width:100%;height:4px;background:linear-gradient(90deg,var(--jn-mist),var(--jn-green) 45%,var(--jn-gold) 78%,var(--jn-orange));opacity:.92;-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 16px);mask-image:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 16px)}
.jn-footer__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr);gap:36px;width:100%;max-width:var(--jn-max);margin-inline:auto;padding:44px var(--jn-gutter) 24px}
.jn-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.jn-footer__logo{font-family:var(--jn-font-display);font-size:28px;font-weight:700;letter-spacing:-.01em;color:var(--jn-paper)}
.jn-footer__tagline{font-size:13px;letter-spacing:.06em;color:var(--jn-mist)}
.jn-footer__cta{margin-top:6px}
.jn-footer__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.jn-footer__col{min-width:0}
.jn-footer__title{margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--jn-gold)}
.jn-footer__list{display:flex;flex-direction:column;gap:8px}
.jn-footer__link{display:inline-block;font-size:14px;color:var(--jn-on-dark);border-bottom:1px solid transparent;transition:color .18s var(--jn-ease),border-color .18s var(--jn-ease)}
.jn-footer__link:hover{color:var(--jn-green);border-color:rgba(63,240,162,.55)}
.jn-footer__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;width:100%;max-width:var(--jn-max);margin-inline:auto;padding:18px var(--jn-gutter) 32px;border-top:1px solid rgba(156,198,196,.22)}
.jn-footer__contact{max-width:760px;font-size:13px;line-height:1.7;color:rgba(245,240,230,.72)}
.jn-footer__legal{font-family:var(--jn-font-mono);font-size:12px;letter-spacing:.04em;color:rgba(156,198,196,.88)}

/* ===== 17. 响应式 ===== */
@media (max-width:1180px){
  .jn-brand__tagline{display:none}
  .jn-quick{padding:7px 10px;font-size:12px}
}
@media (max-width:1000px){
  .jn-footer__inner{grid-template-columns:1fr;gap:28px}
  .jn-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
}
@media (max-width:960px){
  .jn-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
  .jn-section{padding-block:48px}
  .jn-header__inner{grid-template-columns:auto auto;grid-template-areas:"brand toggle";gap:12px;padding:10px 18px}
  .jn-brand{grid-area:brand}
  .jn-nav-toggle{grid-area:toggle;display:inline-flex;justify-self:end}
  .jn-nav{grid-column:1 / -1;display:none;padding-top:10px;margin-top:6px;border-top:1px solid rgba(156,198,196,.25)}
  .jn-nav[data-open]{display:block}
  .jn-nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .jn-nav__link{display:block;padding:11px 10px;font-size:15px}
  .jn-nav__link[aria-current="page"]::after{left:10px;bottom:6px}
  .jn-actions{grid-column:1 / -1;display:none;flex-wrap:wrap;justify-content:flex-start;gap:8px;padding-bottom:14px}
  .jn-nav[data-open] ~ .jn-actions{display:flex}
  .jn-actions__cta{margin-top:2px}
  .jn-header[data-scrolled] .jn-header__inner{min-height:56px;padding-block:6px}
  .jn-brand__tagline{display:none}
}
@media (max-width:600px){
  :root{--jn-gutter:18px}
  body{font-size:16px}
  .jn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .jn-section{padding-block:38px}
  .jn-display{font-size:clamp(34px,11vw,56px)}
  .jn-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jn-footer__meta{flex-direction:column;padding-bottom:26px}
  .jn-footer__inner{padding-top:34px}
  .jn-filter__input{max-width:100%}
}

/* ===== 18. 降低动效 ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .jn-progress{transition:none}
}