:root {
  --bottom: 2rem;
  --speed: 0.25s;
  --power-in: cubic-bezier(0.2, 0, 0.2, 1);
  --power-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --power-out: cubic-bezier(0, 0, 0.2, 1);
  --ease: var(--power-in);
  --bg-color: #4A4A4C;
  }

  :root:has(:popover-open) {
    --ease: var(--power-out);
  }

  .trigger {
    color: light-dark(canvas, canvasText);
    border: 0;
    outline-color: white;
    padding: 0.6rem;
    min-width: 260px;
  }

  :root:has(.trigger:focus-visible) [popover] {
    outline: 2px solid white;
  }

  .trigger,
  .contents {
    background: var(--bg-color);
    border-radius: 5px;
    float: right;
    margin: 0 auto;
  }

  .contents {
    display: flex;
    overflow: hidden;
    height: 100%;
    width: 100%;
    min-width: 270px;
    flex-direction: column;
    padding: 0.6rem;
    transition: padding 0.15s cubic-bezier(0, 0, 0.2, 1);
    transform: translate3d(0, 0, 0);
    transform-origin: center;
    will-change: padding;
    @starting-style {
      padding: 0.6rem;
    }
  }

  @starting-style {
    [popover]:popover-open .contents {
      padding: 0 6px;
    }
  }

  [popover] {
    border: 0px;
    border-radius: 22px;
    background: transparent;
    padding-block: 0;
    overflow: visible;
  }


  .trigger__details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }

  .trigger__details svg {
    width: 24px;
  }

  .trigger__details .lines {
    animation: draw both linear;
    animation-timeline: --content;
  }

  .trigger__details > span:first-of-type {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 0.25rem;
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  [popovertargetaction] {
    anchor-name: --opener;
  }

  [popover]:popover-open {
    display: flex;
  }

  [popover]:popover-open .contents {
    padding: 1rem;
  }
  @starting-style {
    [popover]:popover-open .contents {
      padding: 0 6px;
    }
  }

  [popover] {
    flex-direction: column-reverse;
    transition-property: display, overlay, opacity, transform;
    transition-duration: 0.15s;
    transition-behavior: allow-discrete;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    color: white;
    margin: unset;
    inset: unset;
    z-index: 99999999;
    padding: 0;
    will-change: opacity, transform;
    opacity: 1;
    width: fit-content;
    height: fit-content;
    min-width: max-content;
    transform-origin: center;

    @starting-style {
      opacity: 0;
    }
  }

  [popover].fade-out {
    opacity: 0;
    pointer-events: none;
  }

  [popover] ol {
    padding-inline: 0.5rem;
    padding-left: 2.5rem;
    list-style: decimal;
    display: flex;
    width: max-content;
    margin: 0;
    flex-direction: column;
    transform: translate3d(0, 4px, 0);
    opacity: 0;
    transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1), opacity 0.15s cubic-bezier(0, 0, 0.2, 1);
    will-change: transform, opacity;
  }

  [popover]:popover-open ol {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition-delay: 0.05s;
  }

  @starting-style {
    [popover]:popover-open ol {
      transform: translate3d(0, 4px, 0);
      opacity: 0;
    }
  }

  [popover]:popover-open {
    width: fit-content;
    height: fit-content;
  }

  li::marker {
    color: #999;
  }

  /* Override global marker hiding for sticky anchor component */
  [popover] ol li::marker {
    content: counter(list-item) "." !important;
    display: list-item !important;
    color: #999 !important;
  }

  li:has(a:is(:hover, :focus-visible))::marker {
    color: #fff;
  }

  /* Ensure hover state also overrides global styles */
  [popover] ol li:has(a:is(:hover, :focus-visible))::marker {
    color: #fff !important;
  }

  ol li a {
    color: inherit;
    white-space: nowrap;
    padding-block: 0.5rem;
    text-decoration: none;
    display: block;
    color: #999;
    flex: 1;
    width: 100%;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  ol li a:is(:hover, :focus-visible) {
    color: #fff;
  }

/* Scroll Progress Styles - JS-controlled sticky */
.trigger {
  anchor-name: --opener;
  z-index: 9999999;
  view-transition-name: trigger;
  cursor: pointer;
  display: block;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--speed) cubic-bezier(0.2, 0, 0.2, 1);
}

/* Hide trigger when container is relative with transition */
[data-sticky-container].relative .trigger {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Show trigger when container is fixed with transition */
[data-sticky-container].fixed .trigger.is-visible {
  opacity: 1;
  visibility: visible;
}

.trigger.is-visible {
  opacity: 1;
  visibility: visible;
}

.trigger-placeholder {
  visibility: hidden;
  width: fit-content;
  height: fit-content;
}

.progress {
  border-radius: 100px;
  background: light-dark(hsl(0 0% 35%), hsl(0 0% 0%));
  padding: 0.25rem 0.5rem;
  color: white;
  font-size: 0.875rem;
  min-width: 3rem;
  text-align: center;
}


  @media (max-width: 767px) {
    .trigger,
    .contents {
      float: none;
    }

    .contents {
      flex-direction: column-reverse;
      transform-origin: bottom center;
    }
    [popover] {
      position: fixed !important;
      bottom: 20px;
      left: 0;
      right: 0;
      top: auto !important;
      transform-origin: bottom center;
    }
  }