/* Floating section rail: numbered sections, scroll progress, expands on hover.
   Same design as the portfolio site. Dark skin is the default body state; .light-skin overrides. */
#pf-rail{
  position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:60;
  width:56px;padding:8px;border-radius:28px;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.14);background:rgba(34,42,54,.86);
  box-shadow:0 2px 4px rgba(0,0,0,.10),0 14px 32px rgba(0,0,0,.25);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:6px;overflow:hidden;
  font-family:var(--font-sans);
  transition:width .32s cubic-bezier(.16,1,.3,1),background-color .3s,border-color .3s;
}
#pf-rail:hover,#pf-rail:focus-within{width:224px}
.light-skin #pf-rail{border-color:rgba(28,37,40,.14);background:rgba(247,245,242,.88);
  box-shadow:0 2px 4px rgba(28,37,40,.05),0 14px 32px rgba(28,37,40,.10)}
#pf-rail .pf-brand{display:flex;align-items:center;gap:10px;height:38px;text-decoration:none!important;color:#fff}
.light-skin #pf-rail .pf-brand{color:#1c2528}
#pf-rail .pf-mark{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#fff;color:#222a36;
  display:grid;place-items:center;font-family:var(--font-display);font-size:19px;line-height:1}
.light-skin #pf-rail .pf-mark{background:#1c2528;color:#f7f5f2}
#pf-rail .pf-word{font-family:var(--font-display);font-size:15px;white-space:nowrap}
#pf-rail .pf-links{position:relative;display:flex;flex-direction:column;gap:2px;padding:6px 0 6px 7px;
  border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.light-skin #pf-rail .pf-links{border-color:rgba(28,37,40,.10)}
#pf-rail .pf-track{position:absolute;left:1px;top:10px;bottom:10px;width:2px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.12)}
.light-skin #pf-rail .pf-track{background:rgba(28,37,40,.10)}
#pf-rail .pf-prog{display:block;width:100%;height:100%;background:#ff8059;opacity:.9;
  transform:scaleY(var(--nav-progress,0));transform-origin:top center;transition:transform .15s linear}
#pf-rail .pf-links a{display:flex;align-items:center;gap:10px;min-height:32px;padding:0 8px 0 3px;border-radius:999px;
  text-decoration:none!important;color:#9aa0a8;font-size:12px;font-weight:500;white-space:nowrap;
  transition:color .2s,background-color .2s}
.light-skin #pf-rail .pf-links a{color:#6d7680}
#pf-rail .pf-links a:hover{background:rgba(255,255,255,.08);color:#fff}
.light-skin #pf-rail .pf-links a:hover{background:rgba(28,37,40,.06);color:#1c2528}
#pf-rail .pf-idx{flex:0 0 26px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;opacity:.7;transition:color .2s,opacity .2s}
#pf-rail .pf-links a.on{color:#fff}
.light-skin #pf-rail .pf-links a.on{color:#1c2528}
#pf-rail .pf-links a.on .pf-idx{color:#ff8059;opacity:1;font-weight:700}
#pf-rail .pf-lbl,#pf-rail .pf-word{opacity:0;transition:opacity .18s cubic-bezier(.16,1,.3,1);overflow:hidden;text-overflow:ellipsis}
#pf-rail:hover .pf-lbl,#pf-rail:hover .pf-word,#pf-rail:focus-within .pf-lbl,#pf-rail:focus-within .pf-word{opacity:1}
#pf-rail .pf-tools{display:flex;flex-direction:column;gap:4px}
#pf-rail .pf-btn{display:flex;align-items:center;gap:10px;height:36px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:none;color:#c8ccd2;cursor:pointer;padding:0 8px 0 10px;font-family:var(--font-sans);font-size:12px;
  white-space:nowrap;transition:border-color .2s,color .2s}
.light-skin #pf-rail .pf-btn{border-color:rgba(28,37,40,.16);color:#3c4649}
#pf-rail .pf-btn svg{width:16px;height:16px;flex:0 0 16px}
#pf-rail .pf-btn:hover{border-color:#ff8059;color:#ff8059}
@media (max-width:1200px){#pf-rail{display:none}}