:root {
  --desktop-notice-offset: 0px;
}

.desktop-notice {
  --desktop-notice-bg: var(--bg, #f6f4ee);
  --desktop-notice-fg: var(--fg, #25211d);
  --desktop-notice-line: color-mix(in srgb, var(--desktop-notice-fg) 14%, transparent);
  --desktop-notice-font: var(
    --font-sans,
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif
  );

  display: none;
  box-sizing: border-box;
  inline-size: 100%;
  overflow: hidden;
  color: var(--desktop-notice-fg);
  background: var(--desktop-notice-bg);
  border-block-end: 1px solid var(--desktop-notice-line);
  font-family: var(--desktop-notice-font);
}

.desktop-notice__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: min(100%, 46rem);
  min-inline-size: 0;
  margin-inline: auto;
  padding-inline: max(1rem, env(safe-area-inset-left)) max(0.5rem, env(safe-area-inset-right));
}

.desktop-notice__copy {
  min-inline-size: 0;
  margin: 0;
  padding-block: 0.45rem;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.45;
  text-wrap: pretty;
}

.desktop-notice__close {
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-start: 0.35rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  opacity: 0.68;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms ease-out, background-color 160ms ease-out;
}

.desktop-notice__close:active {
  opacity: 1;
  background: color-mix(in srgb, var(--desktop-notice-fg) 8%, transparent);
}

.desktop-notice__close svg {
  display: block;
  inline-size: 16px;
  block-size: 16px;
}

.desktop-notice--standalone {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
}

body.desktop-notice-host--fixed-nav > .desktop-notice--standalone {
  position: fixed;
  inset: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
  .desktop-notice__close:hover {
    opacity: 1;
  }
}

@media (max-width: 767px),
  (max-width: 900px) and (max-height: 520px) {
  html:not(.desktop-notice-dismissed):not(.desktop-notice-closing) {
    --desktop-notice-offset: calc(56px + env(safe-area-inset-top));
  }

  html:not(.desktop-notice-dismissed) .desktop-notice {
    display: flex;
    block-size: calc(56px + env(safe-area-inset-top));
    max-block-size: calc(56px + env(safe-area-inset-top));
    padding-block-start: env(safe-area-inset-top);
    opacity: 1;
    transition:
      block-size 200ms cubic-bezier(0.22, 1, 0.36, 1),
      max-block-size 200ms cubic-bezier(0.22, 1, 0.36, 1),
      padding-block-start 200ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 160ms ease-out,
      opacity 140ms ease-out;
  }

  html.desktop-notice-closing .desktop-notice {
    block-size: 0;
    max-block-size: 0;
    padding-block-start: 0;
    border-color: transparent;
    opacity: 0;
  }

  body.desktop-notice-host--fixed-nav {
    padding-block-start: var(--desktop-notice-offset) !important;
    transition: padding-block-start 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.desktop-notice-host > .nav {
    top: var(--desktop-notice-offset) !important;
    transition: top 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media print {
  .desktop-notice {
    display: none !important;
  }
}