/* ════════════════════════════════════════════════════
   v32 SHELL — skip link · jump veil · chapter jumper · chapter rail ·
   film binge chrome · focus parity · perf HUD (blue + white only)
   ════════════════════════════════════════════════════ */

/* ── skip link: first focusable element ── */
.skip{position:fixed;left:var(--pad);top:.8rem;z-index:10010;padding:.8rem 1.1rem;border-radius:var(--r-pill);background:var(--ink);color:#fff;font:500 .76rem/1 var(--f);letter-spacing:.05em;text-transform:uppercase;transform:translateY(-160%);transition:transform .45s var(--ease)}
.skip:focus,.skip:focus-visible{transform:none;outline:none;box-shadow:var(--ring-dk)}

/* ── long jumps: veil → cut → reveal (app.js) ── */
.nx-veil{position:fixed;inset:0;z-index:890;background:var(--w2);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s var(--ease),visibility 0s linear .38s}
.nx-veil.is-dark{background:var(--stage)}
.nx-veil.on{opacity:1;visibility:visible;transition:opacity .22s ease-in,visibility 0s}

/* ── chapter jumper: the header's section label opens the table of contents ── */
/* the label only takes focus once it is visible */
.hd__sec{visibility:hidden;transition:opacity .45s var(--ease),transform .6s var(--ease),color .5s var(--ease),visibility 0s linear .45s}
.hd.is-compact .hd__sec.on{visibility:visible;transition-delay:.25s,.25s,0s,0s}
button.hd__sec{font:inherit;font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.45rem .8rem .45rem .6rem;margin-top:.6rem;margin-left:-.6rem;border-radius:var(--r-pill);cursor:pointer}
.hd.is-compact .hd__sec.on{pointer-events:auto}
.hd__sec::after{content:'';width:5px;height:5px;margin-left:.1rem;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55;transition:transform .5s var(--ease),opacity .3s}
.hd__sec:hover{background:rgba(15,16,22,.06)}.hd.dk-c .hd__sec:hover{background:rgba(255,255,255,.1)}
.hd__sec:hover::after,.hd__sec[aria-expanded="true"]::after{opacity:1}
.hd__sec[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.hd__jump{grid-column:2;grid-row:1;align-self:start;justify-self:start;margin-top:3.4rem;width:min(21rem,calc(100vw - 2 * var(--pad)));padding:.9rem .6rem .6rem;border-radius:var(--r-card);background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 30px 70px -30px rgba(12,13,18,.45),inset 0 0 0 1px rgba(15,16,22,.07);-webkit-backdrop-filter:blur(18px) saturate(0);backdrop-filter:blur(18px) saturate(0);opacity:0;transform:translateY(-8px) scale(.98);transform-origin:0 0;transition:opacity .3s var(--ease),transform .5s var(--ease)}
.hd__jump.on{opacity:1;transform:none}
.hd__jump-k{display:block;padding:0 .7rem .55rem;color:var(--mute);font-size:var(--t-k2);letter-spacing:var(--tr-k2)}
.hd__jump ol{list-style:none}
.hd__jump a{display:grid;grid-template-columns:2rem 1fr 16px;align-items:center;gap:.3rem;padding:.55rem .7rem;border-radius:12px;font-size:1.02rem;letter-spacing:-.02em;transition:background .3s,color .3s}
.hd__jump a .mono{font-size:var(--t-k2);letter-spacing:var(--tr-k2);color:var(--mute);transition:color .3s}
.hd__jump a b{font-weight:400}
.hd__jump svg{width:16px;height:16px;transform:rotate(-90deg);fill:none;stroke-width:1.6;opacity:0;transition:opacity .3s}
.hd__jump svg circle:first-child{stroke:rgba(15,16,22,.14)}
.hd__jump svg .p{stroke:var(--acid);stroke-linecap:round;stroke-dasharray:37.7;stroke-dashoffset:37.7}
.hd__jump a:hover,.hd__jump a:focus-visible{background:var(--w2);outline:none}
.hd__jump a.is-cur{color:var(--acid)}.hd__jump a.is-cur .mono{color:var(--acid)}.hd__jump a.is-cur svg{opacity:1}

/* ── chapter rail on the right-edge progress bar (desktop) ── */
.srail{position:fixed;top:0;right:0;bottom:0;width:22px;z-index:881;pointer-events:none}
.srail__t{position:absolute;right:0;width:22px;height:16px;margin-top:-8px;display:flex;align-items:center;justify-content:flex-end;pointer-events:auto}
.srail__t i{display:block;width:6px;height:1px;background:rgba(15,16,22,.38);transition:width .5s var(--ease),background-color .4s,height .3s}
.srail__t span{position:absolute;right:20px;top:50%;padding:.32rem .55rem;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:var(--t-k2);letter-spacing:var(--tr-k2);white-space:nowrap;opacity:0;transform:translate(8px,-50%);pointer-events:none;transition:opacity .3s,transform .5s var(--ease)}
.srail__t:hover i,.srail__t:focus-visible i{width:12px;background:var(--acid)}
.srail__t:hover span,.srail__t:focus-visible span{opacity:1;transform:translate(0,-50%)}
.srail__t:focus-visible{outline:none}
.srail__t.is-cur i{width:14px;height:2px;background:var(--acid)}
html.q-low .srail,body.touch .srail{display:none}
@media(max-width:900px){.srail{display:none}}

/* ── film binge: prev / next + up-next card (v32-overlays.js) ── */
#intro .intro__nav{display:flex;gap:.3rem;margin-left:auto}
#intro .intro__nav[hidden]{display:none}
.intro__nb{width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;transition:background .3s,color .3s}
.intro__nb:hover,.intro__nb:focus-visible{background:#fff;color:var(--ink)}
.ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.intro__up{position:absolute;right:1rem;bottom:4.4rem;z-index:4;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem .8rem;align-items:center;width:min(22rem,calc(100% - 2rem));padding:.7rem;border-radius:16px;background:rgba(12,13,24,.72);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px) saturate(0);backdrop-filter:blur(14px) saturate(0);opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.intro__up.on{opacity:1;transform:none}
.intro__up-img{width:5.4rem;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#000}
.intro__up-img img{width:100%;height:100%;object-fit:cover}
.intro__up-t{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.intro__up-t .mono{font-size:var(--t-k2);letter-spacing:var(--tr-k2);color:var(--b100)}
.intro__up-t b{font-weight:500;font-size:1rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intro__up-bar{grid-column:1/-1;display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.intro__up-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--b600),var(--b300));transform:scaleX(0);transform-origin:left}
.intro__up-a{grid-column:1/-1;display:flex;gap:.35rem}
.intro__up-a button{flex:1;padding:.55rem .7rem;border-radius:var(--r-pill);font-size:var(--t-k2);letter-spacing:var(--tr-k2);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .3s,color .3s}
.intro__up-a .intro__up-go{background:var(--acid);box-shadow:none}
.intro__up-a button:hover,.intro__up-a button:focus-visible{background:#fff;color:var(--ink)}
@media(max-width:640px){.intro__up{right:.5rem;bottom:3.6rem;width:calc(100% - 1rem)}.intro__nb{width:2.1rem;height:2.1rem}}

/* ── assistant header icons ── */
.ama__voice{display:inline-flex;align-items:center;gap:.45rem}
.ama__voice .ico{width:15px;height:15px}
.ama__icon .ico{width:16px;height:16px}
.menu__more i .ico{width:14px;height:14px;display:inline-block;vertical-align:-2px}

/* ── focus parity + dark-ground rings (all stages) ── */
.ft__pill:focus-visible{background:var(--acid);color:#fff;outline:none;box-shadow:0 0 0 2px var(--w2),0 0 0 4px var(--b600)}
:is(#intro,.ama,.lab,#space,.end,.snav) :is(a,button,[role="button"],[role="slider"],[tabindex="0"]):focus-visible{outline:none;box-shadow:var(--ring-dk)}
#arcov :focus-visible,#pm :focus-visible{outline:2px solid var(--acid);outline-offset:3px}

/* ── ?perf=1 HUD ── */
.nx-perf{position:fixed;left:.6rem;bottom:.6rem;z-index:10020;min-width:13rem;padding:.55rem .7rem;border-radius:10px;background:rgba(12,13,24,.84);color:var(--b100);font:500 .64rem/1.5 var(--fm);letter-spacing:.02em;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(125,139,255,.25)}
.nx-perf b{color:#fff;font-size:.9rem}.nx-perf i{font-style:normal;color:#fff}

@media(prefers-reduced-motion:reduce){.nx-veil{display:none}}