:root {
  --implicit-surface-1: hsl(222 30% 12%);
  --implicit-surface-2: hsl(222 26% 16%);
  --implicit-surface-3: hsl(221 20% 22%);
  --implicit-text-1: hsl(220 22% 96%);
  --implicit-text-2: hsl(220 18% 82%);
  --implicit-border-1: hsl(220 24% 28% / 0.72);
  --implicit-backdrop: hsl(223 34% 7% / 0.54);
  --implicit-shadow: 0 24px 80px hsl(223 45% 4% / 0.35);
  --implicit-radius: 1.25rem;
  --implicit-gap: 1rem;
  --implicit-info: hsl(201 86% 54%);
  --implicit-success: hsl(144 62% 44%);
  --implicit-warning: hsl(38 94% 55%);
  --implicit-error: hsl(0 72% 58%);
  --implicit-spinner-color: hsl(220 20% 92% / 0.88);
}

html.implicit-scroll-locked,
html.implicit-scroll-locked body {
  overflow: hidden;
}

body.implicit-backdrop::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 985;
  background: var(--implicit-backdrop);
  backdrop-filter: blur(0.35rem);
  pointer-events: none;
}

.implicit {
  position: fixed;
  inset: 0;
  z-index: 990;
  pointer-events: none;
}

.implicit.has-hide-others > .implicit__surface:not(.hide-others) {
  opacity: 0;
  visibility: hidden;
}

.implicit-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.implicit__surface {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: auto;
}

.implicit__surface[data-clickthrough] {
  pointer-events: none;
}

.implicit__surface[data-clickthrough] .implicit__panel {
  pointer-events: auto;
}

.implicit__surface[data-type="callout"] {
  display: block;
  padding: 0;
}

.implicit__panel {
  position: relative;
  width: auto;
  max-width: min(92vw, 52rem);
  max-height: min(92vh, 56rem);
  min-width: 18rem;
  color: var(--implicit-text-1);
  pointer-events: auto;
  outline: none;
}

.implicit__panel:focus-visible {
  /*box-shadow: 0 0 0 2px hsl(217 91% 68% / 0.55), var(--implicit-shadow);*/
}

.implicit__style-wrap {
  position: relative;
  overflow: hidden;
  min-width: 100%;
  min-height: 100%;
  border: 1px solid var(--implicit-border-1);
  border-radius: var(--implicit-radius);
  background:
    linear-gradient(180deg, hsl(221 28% 17% / 0.98), hsl(222 27% 12% / 0.98));
  box-shadow: var(--implicit-shadow);
}

.implicit__content-wrap {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
  color: inherit;
  padding: 1.25rem;
}

.implicit__content-wrap > :first-child {
  margin-top: 0;
}

.implicit__content-wrap > :last-child {
  margin-bottom: 0;
}

.implicit__panel .implicit__content-wrap,
.implicit__panel .implicit__content-wrap * {
  box-sizing: border-box;
}

.implicit__content-wrap,
.implicit__iframe {
  scrollbar-width: thin;
  scrollbar-color: hsl(220 15% 100% / 0.28) transparent;
}

.implicit__content-wrap::-webkit-scrollbar,
.implicit__iframe::-webkit-scrollbar {
  width: 0.55rem;
  height: 0.55rem;
}

.implicit__content-wrap::-webkit-scrollbar-thumb,
.implicit__iframe::-webkit-scrollbar-thumb {
  background: hsl(220 15% 100% / 0.28);
  border-radius: 999px;
}

.implicit__panel:not([data-mode="drawer"]):not([data-mode="callout"]) .implicit__style-wrap {
  opacity: 0;
  transform: translateY(0.6rem) scale(0.985);
  transition: opacity 0.18s ease, transform 0.22s ease;
}

.implicit__panel.--is-open:not([data-mode="drawer"]):not([data-mode="callout"]) .implicit__style-wrap {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.implicit__panel.--is-closing:not([data-mode="drawer"]):not([data-mode="callout"]) .implicit__style-wrap {
  opacity: 0;
  transform: translateY(0.6rem) scale(0.985);
}

.implicit__panel[data-mode="modal"] {
  width: min(92vw, 52rem);
}

.implicit__panel[data-mode="popover"] {
  align-self: flex-start;
  margin-top: 3rem;
  max-width: min(92vw, 30rem);
}

.implicit__panel[data-mode="callout"] {
  position: absolute;
  max-width: min(92vw, 28rem);
  min-width: 14rem;
}

.implicit__panel[data-mode="callout"] .implicit__style-wrap {
  opacity: 0;
  transform: translateY(0.35rem) scale(0.98);
  transition: opacity 0.14s ease, transform 0.18s ease;
}

.implicit__panel[data-mode="callout"].--top .implicit__style-wrap,
.implicit__panel[data-mode="callout"].--top-start .implicit__style-wrap,
.implicit__panel[data-mode="callout"].--top-end .implicit__style-wrap {
  transform: translateY(-0.35rem) scale(0.98);
}

.implicit__panel[data-mode="callout"].--left .implicit__style-wrap,
.implicit__panel[data-mode="callout"].--left-start .implicit__style-wrap,
.implicit__panel[data-mode="callout"].--left-end .implicit__style-wrap {
  transform: translateX(-0.35rem) scale(0.98);
}

.implicit__panel[data-mode="callout"].--right .implicit__style-wrap,
.implicit__panel[data-mode="callout"].--right-start .implicit__style-wrap,
.implicit__panel[data-mode="callout"].--right-end .implicit__style-wrap {
  transform: translateX(0.35rem) scale(0.98);
}

.implicit__panel[data-mode="callout"].--is-open .implicit__style-wrap {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.implicit__panel[data-mode="drawer"] {
  position: absolute;
  max-height: 100vh;
  transition: transform 0.24s ease;
}

.implicit__panel[data-mode="drawer"] .implicit__content-wrap {
  padding: 1.25rem;
}

.implicit__panel[data-mode="drawer"].--left,
.implicit__panel[data-mode="drawer"].--right {
  top: 0;
  height: 100vh;
  width: min(26rem, 92vw);
}

.implicit__panel[data-mode="drawer"].--left {
  left: 0;
}

.implicit__panel[data-mode="drawer"].--right {
  right: 0;
}

.implicit__panel[data-mode="drawer"].--top,
.implicit__panel[data-mode="drawer"].--bottom {
  left: 0;
  width: 100vw;
  max-height: min(82vh, 30rem);
}

.implicit__panel[data-mode="drawer"].--top {
  top: 0;
}

.implicit__panel[data-mode="drawer"].--bottom {
  bottom: 0;
}

.implicit__panel[data-mode="drawer"].--left,
.implicit__panel[data-mode="drawer"].--left.--is-closing {
  transform: translateX(-100%);
}

.implicit__panel[data-mode="drawer"].--right,
.implicit__panel[data-mode="drawer"].--right.--is-closing {
  transform: translateX(100%);
}

.implicit__panel[data-mode="drawer"].--top,
.implicit__panel[data-mode="drawer"].--top.--is-closing {
  transform: translateY(-100%);
}

.implicit__panel[data-mode="drawer"].--bottom,
.implicit__panel[data-mode="drawer"].--bottom.--is-closing {
  transform: translateY(100%);
}

.implicit__panel[data-mode="drawer"].--is-open {
  transform: translate(0, 0);
}

.implicit__surface.--is-persistent .implicit__panel[data-mode="drawer"].--right.--is-closed {
  transform: translateX(calc(100% - min(4rem, 20vw)));
}

.implicit__surface.--is-persistent .implicit__panel[data-mode="drawer"].--left.--is-closed {
  transform: translateX(calc(-100% + min(4rem, 20vw)));
}

.implicit__surface.--is-persistent .implicit__panel[data-mode="drawer"].--top.--is-closed {
  transform: translateY(calc(-100% + min(4rem, 20vw)));
}

.implicit__surface.--is-persistent .implicit__panel[data-mode="drawer"].--bottom.--is-closed {
  transform: translateY(calc(100% - min(4rem, 20vw)));
}

.implicit__surface.--is-persistent .implicit__panel[data-mode="drawer"].--pointer-near.--right.--is-closed {
  transform: translateX(calc(100% - min(10rem, 45vw)));
}

.implicit__surface.--is-persistent .implicit__panel[data-mode="drawer"].--pointer-near.--left.--is-closed {
  transform: translateX(calc(-100% + min(10rem, 45vw)));
}

.implicit__surface.--is-persistent .implicit__panel[data-mode="drawer"].--pointer-near.--top.--is-closed {
  transform: translateY(calc(-100% + min(10rem, 45vw)));
}

.implicit__surface.--is-persistent .implicit__panel[data-mode="drawer"].--pointer-near.--bottom.--is-closed {
  transform: translateY(calc(100% - min(10rem, 45vw)));
}

.implicit__panel.--is-loading::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border: 0.2rem solid hsl(220 18% 100% / 0.18);
  border-top-color: var(--implicit-spinner-color);
  border-radius: 999px;
  animation: implicit-spin 0.85s linear infinite;
}

.implicit__panel.--is-loading .implicit__content-wrap {
  opacity: 0;
}

.implicit__panel .implicit__content-wrap {
  opacity: 1;
  transition: opacity 300ms ease 220ms;
}

.implicit__iframe {
  display: block;
  width: 100%;
  min-height: min(72vh, 52rem);
  border: 0;
  background: hsl(0 0% 100%);
}

.implicit__panel:has(.implicit__iframe) .implicit__content-wrap {
  padding: 0;
  overflow: hidden;
}

.implicit__error {
  display: grid;
  gap: 1rem;
}

.implicit__error-message {
  color: var(--implicit-text-1);
  font-weight: 600;
}

.implicit__error-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.implicit__panel button,
.implicit__panel input,
.implicit__panel select,
.implicit__panel textarea,
.implicit__panel a {
  font: inherit;
}

.implicit__panel button,
.implicit__panel input[type="submit"],
.implicit__panel .button {
  /*border: 1px solid hsl(220 22% 100% / 0.12);
  border-radius: 999px;
  background: hsl(220 24% 100% / 0.08);*/
  background: transparent;
  color: var(--implicit-text-1);
  padding: 0.65rem 1rem;
  cursor: pointer;
}

.implicit__panel button:hover,
.implicit__panel button:focus-visible,
.implicit__panel input[type="submit"]:hover,
.implicit__panel input[type="submit"]:focus-visible,
.implicit__panel .button:hover,
.implicit__panel .button:focus-visible {
  background: hsl(220 24% 100% / 0.14);
  outline: none;
}

.implicit__panel input[type="search"],
.implicit__panel input[type="text"],
.implicit__panel input[type="email"],
.implicit__panel textarea,
.implicit__panel select {
  width: 100%;
  border: 1px solid hsl(220 24% 100% / 0.12);
  border-radius: 0.4rem;
  background: hsl(220 24% 100% / 0.16);
  color: var(--implicit-text-1);
  padding: 0.4rem 0.47rem;
}

.implicit__panel a {
  color: hsl(210 100% 78%);
}

.implicit__panel mark {
  background: hsl(47 100% 69% / 0.3);
  color: inherit;
}

@keyframes implicit-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .implicit__panel .implicit__style-wrap,
  .implicit-toast {
    transition: none;
  }

  .implicit__panel.--is-loading::after {
    animation-duration: 1.8s;
  }
}

@media (max-width: 640px) {
  .implicit__surface {
    padding: 0.75rem;
  }

  .implicit__panel {
    min-width: 0;
    max-width: calc(100vw - 1.5rem);
  }

  .implicit__panel[data-mode="modal"] {
    width: calc(100vw - 1.5rem);
  }

  .implicit__panel[data-mode="drawer"].--left,
  .implicit__panel[data-mode="drawer"].--right {
    width: min(100vw, 24rem);
  }

  .implicit__panel[data-mode="callout"] {
    max-width: calc(100vw - 1rem);
  }
}