.toc{z-index:40;transition:opacity .3s,visibility .3s;position:fixed;top:50%;right:clamp(8px,1.4vw,22px);transform:translateY(-50%)}.toc:before{content:"";z-index:-1;border-radius:var(--r-small);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;pointer-events:none;background:#0b0708b8;border:1px solid #ffffff14;transition:opacity .2s;position:absolute;inset:-6px -8px}.toc ul{justify-items:end;margin:0;padding:0;list-style:none;display:grid}.toc a{color:var(--para);justify-content:flex-end;align-items:center;padding:7px 6px;font-size:13px;font-weight:500;line-height:1.2;display:flex}.toc .name{white-space:nowrap;opacity:0;max-width:0;transition:max-width .25s,opacity .2s,margin .25s;overflow:hidden}.toc .line{background:#ffffff52;border-radius:2px;flex:none;width:16px;height:2px;transition:width .2s,background .2s}@media (hover:hover){.toc a:hover .line{background:#ffffffb3}.toc a:hover .name{color:var(--white)}}.toc a.on .line{background:var(--orange);width:26px}.toc a.on .name{color:var(--white)}.toc:is(.open,:has(a:focus-visible)):before{opacity:1}.toc:is(.open,:has(a:focus-visible)) .name{opacity:1;max-width:20rem;margin-right:12px}@media (hover:hover){.toc:hover:before{opacity:1}.toc:hover .name{opacity:1;max-width:20rem;margin-right:12px}}@media (width<=720px){.toc{right:0}.toc a{padding:7px 4px 7px 12px}.toc .line,.toc a.on .line{width:8px}.toc:before{border-radius:var(--r-small) 0 0 var(--r-small);border-right:0;inset:-6px 0 -6px -8px}}@media (prefers-reduced-motion:reduce){.toc,.toc:before,.toc .name,.toc .line{transition:none}}
