@media screen and (max-width: 999px) {
  .header-sidebar {
    --luv-mud-warm-milk: #fff9f0;
    --luv-mud-navy: #17233a;
    --luv-mud-lime: #b9f22a;
    --luv-mud-peach: #ffe1d4;
    --luv-mud-blue: #d9f1ff;
    --luv-mud-butter: #fff0a8;
    --luv-mud-aqua: #ccefe7;
    --luv-mud-pink: #ffd8ec;
    --drawer-max-width: min(90vw, 26.25rem);
    --drawer-header-padding-block: max(1rem, env(safe-area-inset-top));
    --drawer-header-padding-inline: 1rem;
    --drawer-body-padding-block: 1rem;
    --drawer-body-padding-inline: clamp(.875rem, 4vw, 1.25rem);
    --drawer-footer-padding-block: .875rem;
    --drawer-footer-padding-inline: clamp(.875rem, 4vw, 1.25rem);
    color: var(--luv-mud-navy);
  }

  .header-sidebar::part(overlay) {
    background: rgb(23 35 58 / .42);
    backdrop-filter: blur(2px);
  }

  .header-sidebar::part(content) {
    width: min(90vw, 26.25rem);
    max-width: min(90vw, 26.25rem);
    background: var(--luv-mud-warm-milk);
    color: var(--luv-mud-navy);
    border-start-end-radius: 1.375rem;
    border-end-end-radius: 1.375rem;
    box-shadow: 1rem 0 3rem rgb(23 35 58 / .18), .2rem 0 .8rem rgb(23 35 58 / .08);
  }

  .header-sidebar::part(header) {
    min-height: auto;
    padding-block-start: calc(.875rem + env(safe-area-inset-top));
    padding-block-end: .5rem;
    padding-inline: var(--drawer-header-padding-inline);
    border-block-end: none;
    position: relative;
  }

  .header-sidebar::part(close-button) {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--luv-mud-warm-milk);
    background: var(--luv-mud-navy);
    border: 1px solid var(--luv-mud-navy);
    border-radius: 999px;
    box-shadow: 0 .45rem 1rem rgb(23 35 58 / .14);
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
  }

  .header-sidebar::part(close-button):active {
    transform: scale(.96);
  }

  .header-sidebar__header-doodle {
    color: var(--luv-mud-lime);
    margin-inline-start: auto;
    margin-inline-end: .35rem;
    transform: rotate(-4deg);
    pointer-events: none;
  }

  .header-sidebar__brand-link {
    max-width: 7.5rem;
    color: var(--luv-mud-navy);
    display: inline-flex;
    align-items: center;
  }

  .header-sidebar__brand-link .header__logo-image {
    max-width: min(var(--header-logo-width, 7rem), 7.5rem);
    max-height: 6.25rem;
    height: auto;
    object-fit: contain;
  }

  .header-sidebar__brand-link .header__logo-image--transparent {
    display: none;
  }

  .header-sidebar__brand-text {
    font-weight: 700;
    font-size: 1.05rem;
  }

  .header-sidebar__scroller {
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    padding-block-start: .5rem;
    padding-block-end: calc(1rem + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 1rem 4rem, rgb(185 242 42 / .22) 0 .2rem, transparent .22rem),
      radial-gradient(circle at calc(100% - 1.25rem) 12rem, rgb(255 216 236 / .55) 0 .22rem, transparent .22rem),
      var(--luv-mud-warm-milk);
  }

  .header-sidebar__linklist--mobile {
    display: grid;
    gap: .65rem;
  }

  .header-sidebar__linklist--mobile.divide-y > :not([hidden]) ~ :not([hidden]) {
    border-block-start-width: 0;
  }

  .header-sidebar__linklist--mobile .header-sidebar__linklist-button {
    min-height: 3.25rem;
    gap: .75rem;
    padding: .75rem .875rem;
    color: var(--luv-mud-navy);
    background: rgb(255 255 255 / .62);
    border: 1.5px solid rgb(23 35 58 / .1);
    border-radius: 1.15rem 1rem 1.25rem .95rem;
    box-shadow: 0 .35rem .9rem rgb(23 35 58 / .06);
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  .header-sidebar__linklist--mobile li:nth-child(5n + 1) .header-sidebar__linklist-button {
    background: color-mix(in srgb, var(--luv-mud-peach) 36%, white);
  }

  .header-sidebar__linklist--mobile li:nth-child(5n + 2) .header-sidebar__linklist-button {
    background: color-mix(in srgb, var(--luv-mud-blue) 40%, white);
  }

  .header-sidebar__linklist--mobile li:nth-child(5n + 3) .header-sidebar__linklist-button {
    background: color-mix(in srgb, var(--luv-mud-butter) 42%, white);
  }

  .header-sidebar__linklist--mobile li:nth-child(5n + 4) .header-sidebar__linklist-button {
    background: color-mix(in srgb, var(--luv-mud-aqua) 38%, white);
  }

  .header-sidebar__linklist--mobile li:nth-child(5n) .header-sidebar__linklist-button {
    background: color-mix(in srgb, var(--luv-mud-pink) 36%, white);
  }

  .header-sidebar__linklist--mobile .header-sidebar__linklist-button:is(:hover, :focus-visible),
  .header-sidebar__linklist--mobile details[open] > summary.header-sidebar__linklist-button {
    background: var(--luv-mud-lime);
    border-color: rgb(23 35 58 / .22);
    box-shadow: 0 .55rem 1.1rem rgb(23 35 58 / .1);
  }

  .header-sidebar__linklist--mobile .header-sidebar__linklist-button:active {
    transform: translateY(1px) scale(.99);
  }

  .header-sidebar__link-label {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .625rem;
  }

  .header-sidebar__link-marker {
    flex: 0 0 .9rem;
    width: .9rem;
    height: .9rem;
    border: 1.5px solid currentColor;
    border-radius: 999px 999px 999px .25rem;
    background: var(--luv-mud-warm-milk);
    transform: rotate(-12deg);
    box-shadow: inset 0 0 0 .18rem var(--luv-mud-lime);
  }

  .header-sidebar__menu-disclosure > summary {
    list-style: none;
  }

  .header-sidebar__nested-linklist {
    border-inline-start: 1px dashed rgb(23 35 58 / .18);
    row-gap: .55rem;
    margin-block: .7rem .4rem;
    margin-inline-start: 1.35rem;
    padding-inline-start: 1rem;
  }

  .header-sidebar__nested-link {
    min-height: 2.5rem;
    padding: .42rem .2rem;
    color: rgb(23 35 58 / .78);
    display: flex;
    align-items: center;
  }

  .header-sidebar__nested-link:is(:hover, :focus-visible) {
    color: var(--luv-mud-navy);
    text-decoration-color: var(--luv-mud-lime);
    text-decoration-thickness: .18rem;
  }

  .header-sidebar__nested-summary {
    min-height: 2.75rem;
    color: var(--luv-mud-navy);
    border-radius: .8rem;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .45rem .65rem;
    display: flex;
  }

  .header-sidebar__nested-summary:is(:hover, :focus-visible),
  .header-sidebar__menu-disclosure--nested[open] > .header-sidebar__nested-summary {
    background: rgb(185 242 42 / .45);
  }

  .header-sidebar__feature-card {
    margin-block-start: 1.15rem;
    padding: 1rem;
    color: var(--luv-mud-navy);
    background: linear-gradient(135deg, #ffe1d4, #fff0a8 58%, #d9f1ff);
    border: 1.5px solid rgb(23 35 58 / .1);
    border-radius: 1.15rem;
    box-shadow: 0 .6rem 1.25rem rgb(23 35 58 / .08);
    position: relative;
    overflow: hidden;
  }

  .header-sidebar__feature-card:before {
    content: "";
    width: 3rem;
    height: 3rem;
    border: 1.5px dashed rgb(23 35 58 / .18);
    border-radius: 999px;
    position: absolute;
    inset-block-start: .65rem;
    inset-inline-end: .75rem;
  }

  .header-sidebar__feature-illustration {
    color: var(--luv-mud-navy);
    margin-block-end: .25rem;
  }

  .header-sidebar__feature-heading {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
  }

  .header-sidebar__feature-text {
    max-width: 17rem;
    margin-block-start: .25rem;
    color: rgb(23 35 58 / .74);
    font-size: .875rem;
    line-height: 1.45;
  }

  .header-sidebar__feature-button {
    min-height: 2.75rem;
    width: fit-content;
    margin-block-start: .8rem;
    padding-inline: 1rem;
    color: var(--luv-mud-warm-milk);
    background: var(--luv-mud-navy);
    border-radius: 999px;
    align-items: center;
    display: inline-flex;
    transition: transform .18s ease, background-color .18s ease;
  }

  .header-sidebar__feature-button:is(:hover, :focus-visible) {
    color: var(--luv-mud-navy);
    background: var(--luv-mud-lime);
  }

  .header-sidebar__feature-button:active {
    transform: scale(.98);
  }

  .header-sidebar__footer {
    background: var(--luv-mud-warm-milk);
    padding-block-end: env(safe-area-inset-bottom);
  }

  .header-sidebar__footer:before {
    background: linear-gradient(transparent, var(--luv-mud-warm-milk));
  }

  .header-sidebar__footer > * {
    padding-block: .75rem;
  }

  .header-sidebar__utility-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
  }

  .header-sidebar__account {
    min-width: 0;
    display: block;
  }

  .header-sidebar__utility-button,
  .header-sidebar__account::part(signed-out-avatar) {
    min-height: 3rem;
    width: 100%;
    color: var(--luv-mud-navy);
    background: rgb(255 255 255 / .7);
    border: 1px solid rgb(23 35 58 / .12);
    border-radius: .95rem;
    box-shadow: 0 .3rem .75rem rgb(23 35 58 / .05);
    justify-content: center;
    align-items: center;
    gap: .35rem;
    padding: .45rem .35rem;
    font-size: .75rem;
    line-height: 1.15;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, background-color .18s ease;
  }

  .header-sidebar__utility-button:is(:hover, :focus-visible),
  .header-sidebar__account::part(signed-out-avatar):hover {
    background: var(--luv-mud-lime);
  }

  .header-sidebar__utility-button:active,
  .header-sidebar__account::part(signed-out-avatar):active {
    transform: translateY(1px) scale(.98);
  }

  .header-sidebar__utility-button svg {
    flex: 0 0 auto;
  }

  .header-sidebar__utility-button span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .header-sidebar__account-fallback {
    display: none;
  }

  .header-sidebar__footer .localization-selectors {
    border-block-start: 1px dashed rgb(23 35 58 / .14);
    color: var(--luv-mud-navy);
  }
}

@media screen and (max-width: 359px) {
  .header-sidebar {
    --drawer-max-width: min(92vw, 26.25rem);
  }

  .header-sidebar::part(content) {
    width: min(92vw, 26.25rem);
    max-width: min(92vw, 26.25rem);
  }

  .header-sidebar__utility-grid {
    gap: .4rem;
  }

  .header-sidebar__utility-button,
  .header-sidebar__account::part(signed-out-avatar) {
    font-size: .7rem;
  }

  .header-sidebar__brand-link {
    max-width: 6.25rem;
  }

  .header-sidebar__brand-link .header__logo-image {
    max-width: 6.25rem;
    max-height: 5.5rem;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 999px) {
  .header-sidebar[open] .header-sidebar__header-doodle {
    animation: luvMudDrawerDoodle 4s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 999px) {
  .header-sidebar *,
  .header-sidebar::part(close-button) {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}