/* A section index in the page margin, using the active mode's accent. */
body{padding-right:128px}
.section-timeline{--timeline-progress:0%;position:fixed;right:18px;top:50%;transform:translateY(-50%);width:106px;z-index:25}
.section-timeline ol{list-style:none;margin:0;padding:0;position:relative}
.section-timeline li{margin:0;padding:0}
.section-timeline a{display:flex;align-items:center;gap:15px;height:76px;position:relative;color:var(--muted);border-radius:4px}
.timeline-track{position:absolute;left:10px;top:38px;bottom:38px;width:1px;background:var(--line)}
.timeline-track i{display:block;width:1px;height:var(--timeline-progress);background:var(--accent)}
.timeline-point{display:block;flex:none;width:9px;height:9px;border:1px solid #84728e;background:var(--bg);border-radius:50%;margin-left:6px;position:relative;transition:background .2s,border-color .2s,box-shadow .2s}
.timeline-label{display:flex;flex-direction:column;gap:2px;font-size:14px;font-weight:450;line-height:1.3;transition:color .2s}
.timeline-label small{font:10px/1.5 var(--body);letter-spacing:.1em;color:#84728e}
.section-timeline a.is-past .timeline-point{background:var(--accent);border-color:var(--accent)}
.section-timeline a[aria-current] .timeline-point{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px var(--bg),0 0 0 6px var(--accent)}
.section-timeline a[aria-current] .timeline-label,.section-timeline a:hover .timeline-label,.section-timeline a:focus-visible .timeline-label{color:var(--accent)}
.section-timeline a[aria-current] small{color:var(--accent)}
.section-timeline a:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.section-timeline a:hover .timeline-point{border-color:var(--accent)}
body.astro{padding-right:0}
body.astro .section-timeline,body:has(.assistant:not([hidden])) .section-timeline,body:has(dialog[open]) .section-timeline,body:has(#mobileMenu:not([hidden])) .section-timeline{visibility:hidden;pointer-events:none}
@media(max-width:1100px) and (min-width:761px){
  body{padding-right:100px}.section-timeline{width:87px;right:10px}.section-timeline a{gap:12px}.timeline-label{font-size:13px}
  .nav-end{gap:18px}.nav .header-mode{display:none}
}
@media(max-width:760px){
  body{padding-right:0}body>main{margin-right:32px}body.astro>main{margin-right:0}
  .section-timeline{right:0;width:44px;padding:8px 0;background:linear-gradient(90deg,transparent,#0e0c15c9 60%);border-radius:24px 0 0 24px}
  .section-timeline a{height:48px;width:44px;justify-content:center;gap:0}
  .timeline-track{left:22px;top:32px;bottom:32px}
  .timeline-point{width:7px;height:7px;margin-left:1px}
  .timeline-label{position:absolute;right:44px;top:9px;display:block;white-space:nowrap;font-size:12px;background:var(--surface);border:1px solid var(--line);padding:6px 10px;border-radius:4px;opacity:0;visibility:hidden;pointer-events:none}
  .timeline-label small{display:none}
  .section-timeline a:focus-visible .timeline-label{opacity:1;visibility:visible}
  .section-timeline a:focus-visible{outline-offset:-4px}
}
@media(max-width:380px){body[data-home=true] .hero h1{font-size:clamp(36px,11.8vw,44px)}body[data-home=true] .hero-top .eyebrow{font-size:10px}}
@media(prefers-reduced-motion:reduce){.timeline-point,.timeline-label{transition:none}html{scroll-behavior:auto}}
@media print{body{padding-right:0}.section-timeline{display:none}body>main{margin-right:0}}