.sjn{position:sticky;top:var(--sjn-top,88px);z-index:40;max-width:1180px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.sjn__bar{position:relative;height:56px;background:rgba(20,21,24,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:0 8px 0 6px;display:flex;align-items:center;gap:6px;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.sjn button{font-family:inherit}
.sjn__btn{flex:none;height:42px;display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:0 14px;border-radius:16px;cursor:pointer;color:#C4C5CA;font-size:14px;font-weight:700;text-decoration:none;transition:background .2s ease,color .2s ease}
.sjn__btn:hover{background:#1E1F23;color:#fff}
.sjn__btn--toc{color:#fff;font-size:14.5px;font-weight:800}
.sjn__btn--icon{width:42px;padding:0;justify-content:center}
.sjn__chev{transition:transform .2s ease}
.sjn__btn[aria-expanded="true"] .sjn__chev{transform:rotate(180deg)}
.sjn__segs{flex:none;list-style:none;margin:0 4px;padding:0;display:flex;gap:5px}
.sjn__seg{display:block;width:28px;height:6px;border-radius:999px;background:#34353B;transition:all .25s ease}
.sjn__seg:hover{background:#FBB03B}
.sjn__seg.is-done{background:#F7931E}
.sjn__seg.is-active{background:#F7931E;width:56px}
.sjn__now{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;padding-left:6px}
.sjn__pos{flex:none;color:#F7931E;font-size:13.5px;font-weight:800}
.sjn__title{min-width:0;color:#fff;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sjn__sep{flex:none;width:1px;height:24px;background:#2C2D32;margin:0 8px}
.sjn__cta{flex:none;display:flex;align-items:center;gap:14px}
.sjn__hint{max-width:200px;color:#C4C5CA;font-size:13.5px;line-height:1.3;font-weight:500;text-align:right;text-wrap:balance}
.sjn__go{height:40px;display:flex;align-items:center;padding:0 18px;border-radius:16px;background:linear-gradient(90deg,#E8620F,#F7931E);color:#fff;font-size:14px;font-weight:800;text-decoration:none;white-space:nowrap;transition:all .2s ease}
.sjn__go:hover{background:linear-gradient(90deg,#F7931E,#FBB03B);transform:translateY(-1px);box-shadow:0 8px 20px rgba(232,98,15,.35);color:#fff}
.sjn a:focus-visible,.sjn button:focus-visible{outline:2px solid #F7931E;outline-offset:2px}
.sjn__pop{position:absolute;top:64px;background:#17181B;border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:2px;box-shadow:0 18px 44px rgba(0,0,0,.5);z-index:3}
.sjn__pop[hidden]{display:none}
.sjn__pop--toc{left:20px;width:460px;max-width:calc(100% - 40px);box-sizing:border-box;border-radius:18px}
.sjn__pop--ai{right:400px;width:240px}
.sjn__pop--share{right:350px;width:200px}
.sjn__pop a{padding:10px 12px;border-radius:10px;color:#fff;font-size:15px;font-weight:600;text-decoration:none}
.sjn__pop a:hover{background:#24252A;color:#fff}
.sjn__poplabel{padding:8px 12px 6px;color:#A8A9AE;font-size:13px}
.sjn__toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sjn__toc a{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.4;font-weight:500;color:#C4C5CA}
.sjn__toc a .n{flex:none;width:22px;padding-top:1px;font-size:13.5px;font-weight:800;color:#8A8C93}
.sjn__toc a.is-done{color:#A8A9AE}.sjn__toc a.is-done .n{color:#F7931E}
.sjn__toc a.is-active{background:#1E1F23;color:#fff;font-weight:700}.sjn__toc a.is-active .n{color:#F7931E}
.sjn__tochint{display:none}
@media (max-width:1150px){
  .sjn__hint{display:none}
  .sjn__tochint{display:block;padding:10px 12px 8px;color:#C4C5CA;font-size:14px;line-height:1.4}
  .sjn__seg{width:20px}.sjn__seg.is-active{width:40px}
  .sjn__pop--ai{right:250px}.sjn__pop--share{right:200px}
}
@media (max-width:900px){
  .sjn{padding:0 12px}
  .sjn__hint,.sjn__sep,.sjn__btn--ai,.sjn__btn--share,.sjn__now .sjn__title{display:none}
  .sjn__now{flex:1}
  .sjn__go{padding:0 14px}
  .sjn__pop--toc{left:12px;right:12px;width:auto;max-width:none}
  .sjn__tochint{display:block;padding:10px 12px 8px;color:#C4C5CA;font-size:14px;line-height:1.4}
  .sjn__tools{display:flex!important;gap:6px;padding:8px 12px 6px;flex-wrap:wrap}
}
.sjn__tools{display:none}
.sjn__tools a{padding:7px 12px;border:1px solid #34353B;border-radius:16px;font-size:13.5px}

/* Integration: real header, long articles, light mode, and keyboard fallback. */
.sjn{width:100%;flex:none;--sjn-top:116px;--sjn-text:#fff;--sjn-muted:#c4c5ca}
.sjn *{box-sizing:border-box}.sjn [hidden]{display:none!important}
.sjn .sjn__btn,.sjn .sjn__go{border-radius:16px!important;text-decoration:none}
.sjn .sjn__btn{font-family:inherit;line-height:1.2}
.sjn .sjn__go{background:linear-gradient(90deg,#E8620F,#F7931E)!important;color:#fff!important;flex:none;border:0}
.sjn .sjn__go:hover{background:linear-gradient(90deg,#F7931E,#FBB03B)!important;transform:translateY(-1px)!important;box-shadow:0 8px 20px rgba(232,98,15,.35)!important}
.sjn .sjn__segs{flex:0 1 auto;min-width:12px;max-width:20%;overflow:hidden}
.sjn__segs li{display:flex;min-width:1px;flex:1}.sjn__segs li:has(.is-active){flex:2}
.sjn .sjn__seg{max-width:100%;flex-shrink:1;min-width:1px}
.sjn .sjn__pop{max-height:calc(100dvh - var(--sjn-top) - 80px);overflow-y:auto;overscroll-behavior:contain}
.sjn .sjn__pop--ai,.sjn .sjn__pop--share{right:20px}
.sjn .sjn__pop a,.sjn .sjn__pop button{color:var(--sjn-text);font-family:inherit}
.sjn .sjn__pop button{border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:15px;font-weight:600}
.sjn .sjn__pop button:hover{background:#24252a}
.sjn .sjn__tools button{padding:7px 12px;border:1px solid #34353b;border-radius:16px;font-size:13.5px}
.sjn__fallback{width:100%;color:var(--sjn-text);background:transparent;border:1px solid #46474d;padding:8px}
.sjn--short .sjn__btn--toc,.sjn--short .sjn__segs,.sjn--short .sjn__now{display:none}
.sjn--short .sjn__bar{justify-content:flex-end}
body .wa--topnav .wa-body :is(h2,h3),body .ba-prose :is(h2,section[id]){scroll-margin-top:calc(var(--sjn-header,116px) + 80px)!important}
html[data-theme=light] .sjn{--sjn-text:#202126;--sjn-muted:#555963}
html[data-theme=light] .sjn__bar{background:rgba(255,255,255,.95);box-shadow:0 10px 28px #00000018}
html[data-theme=light] .sjn__pop{background:#fff;box-shadow:0 18px 44px #00000026}
html[data-theme=light] .sjn :is(.sjn__btn,.sjn__title,.sjn__hint,.sjn__tochint,.sjn__toc a){color:var(--sjn-text)}
html[data-theme=light] .sjn :is(.sjn__btn:hover,.sjn__pop a:hover,.sjn__pop button:hover,.sjn__toc a.is-active){background:#ededf0;color:#202126}
html[data-theme=light] .sjn__seg{background:#c6c8cd}html[data-theme=light] .sjn__seg:is(.is-active,.is-done){background:#f7931e}
html[data-theme=light] .sjn__pos{color:#a94b00}
@media(max-width:900px){.sjn__bar{gap:4px}.sjn .sjn__segs{flex:1;max-width:25%;gap:3px}.sjn__now{flex:0 0 auto;padding:0;gap:0}.sjn__cta{margin-left:auto;min-width:0}.sjn__btn--toc{padding:0 8px;gap:5px}.sjn__go{font-size:12px;padding:0 10px}.sjn__pos{font-size:12px}.sjn__btn--toc{font-size:13px}.sjn__bar{padding-right:6px}.sjn--short .sjn__btn--ai,.sjn--short .sjn__btn--share{display:flex}}
@media(max-width:370px){.sjn__btn--toc svg:first-child{display:none}.sjn__segs{gap:2px!important}.sjn__go{max-width:155px;white-space:normal;text-align:center;line-height:1.2}.sjn__btn--toc{padding:0 6px}}
@media(prefers-reduced-motion:reduce){.sjn *{transition:none!important}.sjn .sjn__go:hover{transform:none!important}}

/* Only the chapter segments remain as reading progress on article pages. */
.wa:has(> .sjn) > .wa-progress,.ba-magazine:has(.sjn) > .ba-progress{display:none!important}

/* Pinned reading bar: text fades into the article background over roughly 5 mm. */
.sjn{--sjn-fade-bg:var(--wa-bg,var(--ba-bg,#0b0c0e));--sjn-fade-depth:5mm}
.sjn.is-stuck::before{content:"";position:fixed;top:var(--sjn-top);left:0;right:0;height:calc(56px + var(--sjn-fade-depth));background:linear-gradient(to bottom,var(--sjn-fade-bg) 0,var(--sjn-fade-bg) 56px,transparent 100%);pointer-events:none;z-index:-1}

/* Proposal 01 November: align the bar with article edges, with quiet neutral emphasis. */
.wa > .sjn{--sjn-gutter:max(56px,calc((100% - 1240px)/2))}
.ba-magazine .sjn{--sjn-gutter:var(--ba-pad)}
.wa > .sjn,.ba-magazine .sjn{max-width:none;padding-inline:var(--sjn-gutter)}
.sjn .sjn__bar{border:1px solid rgba(184,192,204,.22);box-shadow:0 0 18px rgba(205,213,225,.065),0 8px 24px rgba(0,0,0,.22)}
html[data-theme=light] .sjn .sjn__bar{border-color:rgba(80,88,100,.18);box-shadow:0 4px 18px rgba(48,56,70,.10)}
.sjn .sjn__pop--toc{left:var(--sjn-gutter);right:auto;max-width:calc(100% - var(--sjn-gutter) - var(--sjn-gutter))}
@media(max-width:700px){.wa > .sjn{--sjn-gutter:20px}}
@media(max-width:900px){.sjn .sjn__pop--toc{right:var(--sjn-gutter);width:auto;max-width:none}}

/* Compact share menu. */
.sjn .sjn__pop--share{width:240px;max-width:calc(100% - 24px);padding:6px;gap:0}
.sjn .sjn__pop--share>a,.sjn .sjn__pop--share>button{display:flex;align-items:center;min-height:34px;padding:7px 12px;line-height:1.3;font-size:14px;margin:0}
@media(pointer:coarse){.sjn .sjn__pop--share>a,.sjn .sjn__pop--share>button{min-height:40px}}

/* Compact chapter list: full titles, less vertical whitespace. */
.sjn .sjn__pop--toc{padding:6px}
.sjn .sjn__toc{gap:0}
.sjn .sjn__toc a{padding:6px 10px;min-height:32px;font-size:15px;line-height:1.3;gap:10px}
.sjn .sjn__toc a .n{padding-top:1px;line-height:1.3}
@media(pointer:coarse){.sjn .sjn__toc a{min-height:40px}}