:root {
  --ui-decoration-primary: var(--sp-shell-nav-highlight, var(--sp-primary-hover, #8ce7ff));
  --ui-decoration-secondary: var(--sp-secondary, var(--sp-primary, #8b4dff));
  --ui-decoration-soft: color-mix(in srgb, var(--ui-decoration-primary) 34%, transparent);
  --ui-decoration-strong: color-mix(in srgb, var(--ui-decoration-primary) 76%, transparent);
  --ui-decoration-edge: color-mix(in srgb, var(--ui-decoration-primary) 46%, transparent);
  --ui-decoration-overlay: none;
  --ui-decoration-border: transparent;
  --ui-decoration-shadow: none;
  --ui-decoration-opacity: 1;
  --ui-decoration-card-inset: 0.42rem;
  --ui-decoration-box-inset: 0.58rem;
  --ui-decoration-band: 0.62rem;
}

:root[data-ui-decoration]:not([data-ui-decoration="none"]) :is(
  .shared-card,
  .renewal-liquid-card,
  .renewal-control-menu-card,
  .renewal-control-help-card,
  .renewal-control-summary,
  .renewal-identity-card
) {
  position: relative;
  isolation: isolate;
}

:root[data-ui-decoration]:not([data-ui-decoration="none"]) :is(
  .shared-card,
  .renewal-liquid-card,
  .renewal-control-menu-card,
  .renewal-control-help-card,
  .renewal-control-summary,
  .renewal-identity-card
)::after,
:root[data-ui-decoration]:not([data-ui-decoration="none"]) .shared-box::after {
  content: "";
  position: absolute;
  z-index: 8;
  display: block;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px solid var(--ui-decoration-border);
  background: var(--ui-decoration-overlay);
  box-shadow: var(--ui-decoration-shadow);
  opacity: var(--ui-decoration-opacity);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

:root[data-ui-decoration]:not([data-ui-decoration="none"]) :is(
  .shared-card,
  .renewal-liquid-card,
  .renewal-control-menu-card,
  .renewal-control-help-card,
  .renewal-control-summary,
  .renewal-identity-card
)::after {
  inset: var(--ui-decoration-card-inset);
  padding: var(--ui-decoration-band);
  border-radius: max(0.45rem, calc(1rem - var(--ui-decoration-card-inset)));
}

:root[data-ui-decoration]:not([data-ui-decoration="none"]) .shared-box::after {
  top: calc(var(--shared-box-tab-height, clamp(2.35rem, 2.75vw, 3rem)) + 0.42rem);
  right: var(--ui-decoration-box-inset);
  bottom: var(--ui-decoration-box-inset);
  left: var(--ui-decoration-box-inset);
  padding: var(--ui-decoration-band);
  border-radius: 1rem;
}

:root[data-ui-decoration]:not([data-ui-decoration="none"]) .shared-box:not(.shared-box--has-header)::after {
  top: var(--ui-decoration-box-inset);
  border-radius: 1.1rem;
}

:root[data-ui-decoration="fine_lining"] {
  --ui-decoration-border: color-mix(in srgb, var(--ui-decoration-primary) 52%, transparent);
  --ui-decoration-overlay:
    linear-gradient(90deg, var(--ui-decoration-edge), transparent 38%) top left / 34% 1px no-repeat,
    linear-gradient(270deg, var(--ui-decoration-edge), transparent 38%) top right / 34% 1px no-repeat,
    linear-gradient(90deg, var(--ui-decoration-edge), transparent 38%) bottom left / 34% 1px no-repeat,
    linear-gradient(270deg, var(--ui-decoration-edge), transparent 38%) bottom right / 34% 1px no-repeat,
    linear-gradient(180deg, var(--ui-decoration-edge), transparent 44%) top left / 1px 42% no-repeat,
    linear-gradient(180deg, var(--ui-decoration-edge), transparent 44%) top right / 1px 42% no-repeat,
    linear-gradient(0deg, var(--ui-decoration-edge), transparent 44%) bottom left / 1px 42% no-repeat,
    linear-gradient(0deg, var(--ui-decoration-edge), transparent 44%) bottom right / 1px 42% no-repeat;
  --ui-decoration-shadow:
    inset 0 0 0 0.18rem color-mix(in srgb, var(--ui-decoration-primary) 6%, transparent),
    inset 0 0 1.1rem color-mix(in srgb, var(--ui-decoration-secondary) 7%, transparent);
  --ui-decoration-opacity: 0.86;
}

:root[data-ui-decoration="ornate_corners"] {
  --ui-decoration-border: color-mix(in srgb, var(--ui-decoration-primary) 40%, transparent);
  --ui-decoration-overlay:
    radial-gradient(circle at top left, transparent 0 0.72rem, var(--ui-decoration-strong) 0.74rem 0.79rem, transparent 0.82rem) top left / 3.2rem 3.2rem no-repeat,
    radial-gradient(circle at top right, transparent 0 0.72rem, var(--ui-decoration-strong) 0.74rem 0.79rem, transparent 0.82rem) top right / 3.2rem 3.2rem no-repeat,
    radial-gradient(circle at bottom left, transparent 0 0.72rem, var(--ui-decoration-strong) 0.74rem 0.79rem, transparent 0.82rem) bottom left / 3.2rem 3.2rem no-repeat,
    radial-gradient(circle at bottom right, transparent 0 0.72rem, var(--ui-decoration-strong) 0.74rem 0.79rem, transparent 0.82rem) bottom right / 3.2rem 3.2rem no-repeat,
    conic-gradient(from 45deg, transparent 0 25%, var(--ui-decoration-primary) 0 50%, transparent 0 75%, var(--ui-decoration-primary) 0) top 0.34rem left 0.34rem / 0.42rem 0.42rem no-repeat,
    conic-gradient(from 45deg, transparent 0 25%, var(--ui-decoration-primary) 0 50%, transparent 0 75%, var(--ui-decoration-primary) 0) top 0.34rem right 0.34rem / 0.42rem 0.42rem no-repeat,
    conic-gradient(from 45deg, transparent 0 25%, var(--ui-decoration-primary) 0 50%, transparent 0 75%, var(--ui-decoration-primary) 0) bottom 0.34rem left 0.34rem / 0.42rem 0.42rem no-repeat,
    conic-gradient(from 45deg, transparent 0 25%, var(--ui-decoration-primary) 0 50%, transparent 0 75%, var(--ui-decoration-primary) 0) bottom 0.34rem right 0.34rem / 0.42rem 0.42rem no-repeat;
  --ui-decoration-shadow:
    inset 0 0 0 0.18rem color-mix(in srgb, var(--ui-decoration-primary) 5%, transparent),
    inset 0 0 1.5rem color-mix(in srgb, var(--ui-decoration-secondary) 8%, transparent);
}

:root[data-ui-decoration="art_deco"] {
  --ui-decoration-border: color-mix(in srgb, var(--ui-decoration-primary) 50%, transparent);
  --ui-decoration-overlay:
    linear-gradient(135deg, transparent 0 38%, var(--ui-decoration-strong) 39% 42%, transparent 43% 100%) top left / 2.9rem 2.9rem no-repeat,
    linear-gradient(225deg, transparent 0 38%, var(--ui-decoration-strong) 39% 42%, transparent 43% 100%) top right / 2.9rem 2.9rem no-repeat,
    linear-gradient(45deg, transparent 0 38%, var(--ui-decoration-strong) 39% 42%, transparent 43% 100%) bottom left / 2.9rem 2.9rem no-repeat,
    linear-gradient(315deg, transparent 0 38%, var(--ui-decoration-strong) 39% 42%, transparent 43% 100%) bottom right / 2.9rem 2.9rem no-repeat,
    linear-gradient(90deg, var(--ui-decoration-soft), transparent 70%) top 0.46rem left 1.6rem / 2.7rem 1px no-repeat,
    linear-gradient(270deg, var(--ui-decoration-soft), transparent 70%) top 0.46rem right 1.6rem / 2.7rem 1px no-repeat,
    linear-gradient(90deg, var(--ui-decoration-soft), transparent 70%) bottom 0.46rem left 1.6rem / 2.7rem 1px no-repeat,
    linear-gradient(270deg, var(--ui-decoration-soft), transparent 70%) bottom 0.46rem right 1.6rem / 2.7rem 1px no-repeat;
  --ui-decoration-shadow:
    inset 0 0 0 0.2rem color-mix(in srgb, var(--ui-decoration-secondary) 6%, transparent),
    inset 0 0 0 0.34rem color-mix(in srgb, var(--ui-decoration-primary) 8%, transparent);
}

:root[data-ui-decoration="neon_frame"] {
  --ui-decoration-border: color-mix(in srgb, var(--ui-decoration-primary) 62%, transparent);
  --ui-decoration-overlay:
    linear-gradient(90deg, transparent, var(--ui-decoration-primary), transparent) top left 12% / 18% 2px no-repeat,
    linear-gradient(90deg, transparent, var(--ui-decoration-secondary), transparent) top right 12% / 18% 2px no-repeat,
    linear-gradient(90deg, transparent, var(--ui-decoration-secondary), transparent) bottom left 12% / 18% 2px no-repeat,
    linear-gradient(90deg, transparent, var(--ui-decoration-primary), transparent) bottom right 12% / 18% 2px no-repeat,
    linear-gradient(180deg, transparent, var(--ui-decoration-primary), transparent) left top 18% / 2px 24% no-repeat,
    linear-gradient(180deg, transparent, var(--ui-decoration-secondary), transparent) right bottom 18% / 2px 24% no-repeat;
  --ui-decoration-shadow:
    0 0 0.45rem color-mix(in srgb, var(--ui-decoration-primary) 26%, transparent),
    inset 0 0 0.65rem color-mix(in srgb, var(--ui-decoration-secondary) 18%, transparent),
    inset 0 0 0 0.16rem color-mix(in srgb, var(--ui-decoration-primary) 8%, transparent);
  --ui-decoration-opacity: 0.9;
}

:root[data-ui-decoration="neon_frame"] :is(.shared-box, .shared-card)::after {
  animation: ui-decoration-neon-breathe 3.8s ease-in-out infinite alternate;
}

:root[data-ui-decoration="constellation"] {
  --ui-decoration-border: color-mix(in srgb, var(--ui-decoration-primary) 42%, transparent);
  --ui-decoration-overlay:
    repeating-linear-gradient(90deg, var(--ui-decoration-soft) 0 0.18rem, transparent 0.18rem 0.52rem) top 0.28rem left 1.2rem / calc(100% - 2.4rem) 1px no-repeat,
    repeating-linear-gradient(90deg, var(--ui-decoration-soft) 0 0.18rem, transparent 0.18rem 0.52rem) bottom 0.28rem left 1.2rem / calc(100% - 2.4rem) 1px no-repeat,
    repeating-linear-gradient(180deg, var(--ui-decoration-soft) 0 0.18rem, transparent 0.18rem 0.52rem) left 0.28rem top 1.2rem / 1px calc(100% - 2.4rem) no-repeat,
    repeating-linear-gradient(180deg, var(--ui-decoration-soft) 0 0.18rem, transparent 0.18rem 0.52rem) right 0.28rem top 1.2rem / 1px calc(100% - 2.4rem) no-repeat,
    linear-gradient(90deg, transparent, var(--ui-decoration-strong), transparent) top 0.58rem left 8% / 18% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--ui-decoration-secondary), transparent) top 0.58rem right 8% / 18% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--ui-decoration-secondary), transparent) bottom 0.58rem left 8% / 18% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--ui-decoration-strong), transparent) bottom 0.58rem right 8% / 18% 1px no-repeat,
    radial-gradient(circle, var(--ui-decoration-primary) 0 1px, transparent 1.75px) top 0.48rem left 0.88rem / 2.1rem 1.1rem repeat-x,
    radial-gradient(circle, var(--ui-decoration-secondary) 0 1px, transparent 1.75px) bottom 0.48rem right 0.88rem / 2.35rem 1.1rem repeat-x,
    conic-gradient(from 45deg, transparent 0 25%, color-mix(in srgb, var(--ui-decoration-primary) 78%, white 22%) 0 50%, transparent 0 75%, color-mix(in srgb, var(--ui-decoration-primary) 78%, white 22%) 0) top 0.62rem left 0.68rem / 0.44rem 0.44rem no-repeat,
    conic-gradient(from 45deg, transparent 0 25%, color-mix(in srgb, var(--ui-decoration-secondary) 78%, white 22%) 0 50%, transparent 0 75%, color-mix(in srgb, var(--ui-decoration-secondary) 78%, white 22%) 0) top 0.62rem right 0.68rem / 0.44rem 0.44rem no-repeat,
    conic-gradient(from 45deg, transparent 0 25%, color-mix(in srgb, var(--ui-decoration-secondary) 78%, white 22%) 0 50%, transparent 0 75%, color-mix(in srgb, var(--ui-decoration-secondary) 78%, white 22%) 0) bottom 0.62rem left 0.68rem / 0.44rem 0.44rem no-repeat,
    conic-gradient(from 45deg, transparent 0 25%, color-mix(in srgb, var(--ui-decoration-primary) 78%, white 22%) 0 50%, transparent 0 75%, color-mix(in srgb, var(--ui-decoration-primary) 78%, white 22%) 0) bottom 0.62rem right 0.68rem / 0.44rem 0.44rem no-repeat;
  --ui-decoration-shadow:
    inset 0 0 0 0.18rem color-mix(in srgb, var(--ui-decoration-primary) 7%, transparent),
    inset 0 0 1.5rem color-mix(in srgb, var(--ui-decoration-secondary) 10%, transparent);
  --ui-decoration-opacity: 0.92;
}

:root[data-ui-decoration="luxury_filigree"] {
  --ui-decoration-border: color-mix(in srgb, var(--ui-decoration-primary) 48%, transparent);
  --ui-decoration-overlay:
    radial-gradient(ellipse at top left, transparent 0 0.48rem, var(--ui-decoration-strong) 0.5rem 0.55rem, transparent 0.58rem) top 0.32rem left 0.32rem / 2.6rem 2.2rem no-repeat,
    radial-gradient(ellipse at top right, transparent 0 0.48rem, var(--ui-decoration-strong) 0.5rem 0.55rem, transparent 0.58rem) top 0.32rem right 0.32rem / 2.6rem 2.2rem no-repeat,
    radial-gradient(ellipse at bottom left, transparent 0 0.48rem, var(--ui-decoration-strong) 0.5rem 0.55rem, transparent 0.58rem) bottom 0.32rem left 0.32rem / 2.6rem 2.2rem no-repeat,
    radial-gradient(ellipse at bottom right, transparent 0 0.48rem, var(--ui-decoration-strong) 0.5rem 0.55rem, transparent 0.58rem) bottom 0.32rem right 0.32rem / 2.6rem 2.2rem no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--ui-decoration-secondary) 68%, white 32%) 0 0.12rem, transparent 0.15rem) top 0.52rem left 1.05rem / 0.55rem 0.55rem no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--ui-decoration-secondary) 68%, white 32%) 0 0.12rem, transparent 0.15rem) top 0.52rem right 1.05rem / 0.55rem 0.55rem no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--ui-decoration-primary) 74%, white 26%) 0 0.12rem, transparent 0.15rem) bottom 0.52rem left 1.05rem / 0.55rem 0.55rem no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--ui-decoration-primary) 74%, white 26%) 0 0.12rem, transparent 0.15rem) bottom 0.52rem right 1.05rem / 0.55rem 0.55rem no-repeat,
    linear-gradient(90deg, transparent, var(--ui-decoration-soft), transparent) top 0.42rem center / 22% 1px no-repeat,
    linear-gradient(90deg, transparent, var(--ui-decoration-soft), transparent) bottom 0.42rem center / 22% 1px no-repeat;
  --ui-decoration-shadow:
    inset 0 0 0 0.18rem color-mix(in srgb, var(--ui-decoration-primary) 8%, transparent),
    inset 0 0 1.7rem color-mix(in srgb, var(--ui-decoration-secondary) 10%, transparent);
  --ui-decoration-opacity: 0.94;
}

:root[data-ui-decoration="circuit_trace"] {
  --ui-decoration-border: color-mix(in srgb, var(--ui-decoration-primary) 58%, transparent);
  --ui-decoration-overlay:
    linear-gradient(90deg, var(--ui-decoration-primary), var(--ui-decoration-primary)) top 0.42rem left 0.8rem / 22% 1px no-repeat,
    linear-gradient(90deg, var(--ui-decoration-primary), var(--ui-decoration-primary)) top 0.42rem right 0.8rem / 16% 1px no-repeat,
    linear-gradient(90deg, var(--ui-decoration-secondary), var(--ui-decoration-secondary)) bottom 0.42rem left 0.8rem / 16% 1px no-repeat,
    linear-gradient(90deg, var(--ui-decoration-secondary), var(--ui-decoration-secondary)) bottom 0.42rem right 0.8rem / 22% 1px no-repeat,
    linear-gradient(180deg, var(--ui-decoration-primary), var(--ui-decoration-primary)) left 0.42rem top 0.8rem / 1px 22% no-repeat,
    linear-gradient(180deg, var(--ui-decoration-secondary), var(--ui-decoration-secondary)) right 0.42rem bottom 0.8rem / 1px 22% no-repeat,
    radial-gradient(circle, var(--ui-decoration-primary) 0 0.11rem, transparent 0.14rem) top 0.34rem left 25% / 0.5rem 0.5rem no-repeat,
    radial-gradient(circle, var(--ui-decoration-secondary) 0 0.11rem, transparent 0.14rem) top 0.34rem right 19% / 0.5rem 0.5rem no-repeat,
    radial-gradient(circle, var(--ui-decoration-secondary) 0 0.11rem, transparent 0.14rem) bottom 0.34rem left 19% / 0.5rem 0.5rem no-repeat,
    radial-gradient(circle, var(--ui-decoration-primary) 0 0.11rem, transparent 0.14rem) bottom 0.34rem right 25% / 0.5rem 0.5rem no-repeat,
    repeating-linear-gradient(90deg, transparent 0 0.4rem, var(--ui-decoration-soft) 0.4rem 0.48rem, transparent 0.48rem 0.88rem) top 0.7rem center / 42% 1px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 0.4rem, var(--ui-decoration-soft) 0.4rem 0.48rem, transparent 0.48rem 0.88rem) bottom 0.7rem center / 42% 1px no-repeat;
  --ui-decoration-shadow:
    0 0 0.55rem color-mix(in srgb, var(--ui-decoration-primary) 20%, transparent),
    inset 0 0 1.1rem color-mix(in srgb, var(--ui-decoration-secondary) 11%, transparent);
  --ui-decoration-opacity: 0.9;
}

:root[data-ui-decoration="prism_mosaic"] {
  --ui-decoration-border: color-mix(in srgb, var(--ui-decoration-primary) 42%, transparent);
  --ui-decoration-overlay:
    conic-gradient(from 45deg, var(--ui-decoration-primary) 0 25%, transparent 0 50%, var(--ui-decoration-secondary) 0 75%, transparent 0) top 0.38rem left 0.62rem / 1rem 1rem no-repeat,
    conic-gradient(from 45deg, var(--ui-decoration-secondary) 0 25%, transparent 0 50%, var(--ui-decoration-primary) 0 75%, transparent 0) top 0.38rem right 0.62rem / 1rem 1rem no-repeat,
    conic-gradient(from 45deg, var(--ui-decoration-secondary) 0 25%, transparent 0 50%, var(--ui-decoration-primary) 0 75%, transparent 0) bottom 0.38rem left 0.62rem / 1rem 1rem no-repeat,
    conic-gradient(from 45deg, var(--ui-decoration-primary) 0 25%, transparent 0 50%, var(--ui-decoration-secondary) 0 75%, transparent 0) bottom 0.38rem right 0.62rem / 1rem 1rem no-repeat,
    linear-gradient(135deg, transparent 0 42%, var(--ui-decoration-soft) 43% 48%, transparent 49%) top 0.46rem left 2rem / 2.2rem 1.1rem no-repeat,
    linear-gradient(225deg, transparent 0 42%, var(--ui-decoration-soft) 43% 48%, transparent 49%) top 0.46rem right 2rem / 2.2rem 1.1rem no-repeat,
    linear-gradient(45deg, transparent 0 42%, var(--ui-decoration-soft) 43% 48%, transparent 49%) bottom 0.46rem left 2rem / 2.2rem 1.1rem no-repeat,
    linear-gradient(315deg, transparent 0 42%, var(--ui-decoration-soft) 43% 48%, transparent 49%) bottom 0.46rem right 2rem / 2.2rem 1.1rem no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-decoration-primary) 54%, white 20%), transparent) top 0.34rem center / 24% 1px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-decoration-secondary) 54%, white 20%), transparent) bottom 0.34rem center / 24% 1px no-repeat;
  --ui-decoration-shadow:
    inset 0 0 0 0.2rem color-mix(in srgb, var(--ui-decoration-secondary) 7%, transparent),
    inset 0 0 1.25rem color-mix(in srgb, var(--ui-decoration-primary) 10%, transparent);
  --ui-decoration-opacity: 0.9;
}

:root[data-ui-decoration="lacquer_ribbon"] {
  --ui-decoration-border: color-mix(in srgb, var(--ui-decoration-primary) 34%, transparent);
  --ui-decoration-overlay:
    linear-gradient(105deg, transparent 0 24%, var(--ui-decoration-primary) 25% 35%, transparent 36% 100%) top left / 4rem 100% no-repeat,
    linear-gradient(285deg, transparent 0 24%, var(--ui-decoration-secondary) 25% 35%, transparent 36% 100%) bottom right / 4rem 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--ui-decoration-primary) 64%, transparent), transparent 70%) top 0.32rem left 0.8rem / 26% 2px no-repeat,
    linear-gradient(270deg, color-mix(in srgb, var(--ui-decoration-secondary) 64%, transparent), transparent 70%) bottom 0.32rem right 0.8rem / 26% 2px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, white 24%, transparent), transparent 72%) left 0.62rem top 0.8rem / 1px 38% no-repeat,
    linear-gradient(0deg, color-mix(in srgb, white 24%, transparent), transparent 72%) right 0.62rem bottom 0.8rem / 1px 38% no-repeat;
  --ui-decoration-shadow:
    inset 0 0 0 0.16rem color-mix(in srgb, var(--ui-decoration-primary) 7%, transparent),
    inset 0 0 1.35rem color-mix(in srgb, var(--ui-decoration-secondary) 12%, transparent);
  --ui-decoration-opacity: 0.88;
}

:root[data-ui-decoration="pearl_inlay"] {
  --ui-decoration-border: color-mix(in srgb, var(--ui-decoration-primary) 36%, transparent);
  --ui-decoration-overlay:
    radial-gradient(circle, color-mix(in srgb, white 42%, var(--ui-decoration-primary) 58%) 0 0.11rem, transparent 0.15rem) top 0.4rem left 1rem / 1.45rem 0.8rem repeat-x,
    radial-gradient(circle, color-mix(in srgb, white 42%, var(--ui-decoration-secondary) 58%) 0 0.11rem, transparent 0.15rem) bottom 0.4rem right 1rem / 1.45rem 0.8rem repeat-x,
    radial-gradient(circle, color-mix(in srgb, white 42%, var(--ui-decoration-secondary) 58%) 0 0.1rem, transparent 0.14rem) left 0.4rem top 1rem / 0.8rem 1.45rem repeat-y,
    radial-gradient(circle, color-mix(in srgb, white 42%, var(--ui-decoration-primary) 58%) 0 0.1rem, transparent 0.14rem) right 0.4rem top 1rem / 0.8rem 1.45rem repeat-y,
    radial-gradient(circle, color-mix(in srgb, white 52%, var(--ui-decoration-primary) 48%) 0 0.2rem, transparent 0.25rem) top 0.24rem left 0.24rem / 0.8rem 0.8rem no-repeat,
    radial-gradient(circle, color-mix(in srgb, white 52%, var(--ui-decoration-secondary) 48%) 0 0.2rem, transparent 0.25rem) top 0.24rem right 0.24rem / 0.8rem 0.8rem no-repeat,
    radial-gradient(circle, color-mix(in srgb, white 52%, var(--ui-decoration-secondary) 48%) 0 0.2rem, transparent 0.25rem) bottom 0.24rem left 0.24rem / 0.8rem 0.8rem no-repeat,
    radial-gradient(circle, color-mix(in srgb, white 52%, var(--ui-decoration-primary) 48%) 0 0.2rem, transparent 0.25rem) bottom 0.24rem right 0.24rem / 0.8rem 0.8rem no-repeat;
  --ui-decoration-shadow:
    inset 0 0 0 0.18rem color-mix(in srgb, white 8%, transparent),
    inset 0 0 1.25rem color-mix(in srgb, var(--ui-decoration-primary) 9%, transparent);
  --ui-decoration-opacity: 0.9;
}

@keyframes ui-decoration-neon-breathe {
  from {
    filter: brightness(0.92) saturate(0.96);
  }

  to {
    filter: brightness(1.18) saturate(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-ui-decoration="neon_frame"] :is(.shared-box, .shared-card)::after {
    animation: none;
  }
}