:root {
  --sheet-panel-background: white;
  --sheet-panel-border-radius: 25px;
  --sheet-card-margin: 12px;
  --sheet-card-border-radius: 20px;
  --sheet-panel-box-shadow: 0 1px 20px -4px #0000004d, 0 0 7px #0000001a;
  --sheet-handle-color: #bbb;
  --sheet-handle-width: 50px;
  --sheet-handle-height: 5px;
  --sheet-handle-offset: 8px;
  --sheet-handle-inset: calc(var(--sheet-handle-offset) + var(--sheet-handle-height) + 8px);
  --sheet-handle-side-thickness: 4px;
  --sheet-handle-side-length: var(--sheet-handle-width);
  --sheet-handle-side-inset: calc(var(--sheet-handle-offset) + var(--sheet-handle-side-thickness));
  --sheet-bleed: 120px;
  --sheet-content-padding: 20px;
  --sheet-footer-padding: var(--sheet-content-padding);
  --sheet-footer-background: transparent;
  --sheet-overlay-background: #00000080;
  --sheet-overlay-blur: 5px;
  --sheet-desktop-panel-width: min(26rem, 90vw);
  --sheet-center-width: min(28rem, calc(100vw - 2 * var(--sheet-card-margin)));
  --sheet-exit-cushion: 28px;
  --sheet-morph-duration: .6s;
  --sheet-morph-easing: cubic-bezier(.34, 1.32, .52, 1);
  --sheet-blob-z-index: 1002;
  --sheet-trigger-return-duration: .28s;
  --sheet-trigger-return-easing: cubic-bezier(.34, 1.4, .64, 1);
}

dialog-panel[morph][state]:has(sheet-panel) > dialog {
  box-sizing: border-box;
  background: var(--sheet-panel-background);
  max-width: none;
  max-height: none;
  box-shadow: var(--sheet-panel-box-shadow);
  z-index: var(--sheet-panel-z-index, 1001);
  border: none;
  padding: 0;
  position: fixed;
  overflow: hidden;
}

dialog-panel:has(sheet-panel) > dialog[open] {
  display: flex;
}

dialog-panel[morph][state]:has(sheet-panel[data-position="bottom"]) > dialog {
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: var(--sheet-panel-border-radius) var(--sheet-panel-border-radius) 0 0;
  margin: 0;
  inset: auto 0 0;
}

dialog-panel[morph][state]:has(sheet-panel[data-position="bottom"]:not([data-desktop="true"])) > dialog {
  height: var(--sheet-active-size, 85vh);
}

dialog-panel[morph][state]:has(sheet-panel[data-desktop="true"][data-position="bottom"]) > dialog {
  height: fit-content;
}

dialog-panel[morph][state]:has(sheet-panel[data-desktop="true"][data-position="bottom"]:not([data-mode="card"])) > dialog {
  max-height: 100dvh;
}

dialog-panel[morph][state]:has(sheet-panel[data-desktop="true"][data-mode="card"][data-position="bottom"]) > dialog {
  max-height: calc(100dvh - 2 * var(--sheet-card-margin));
}

dialog-panel[morph][state]:has(sheet-panel[data-position="left"]) > dialog {
  width: var(--sheet-active-size, min(26rem, 90vw));
  height: 100dvh;
  padding-left: env(safe-area-inset-left, 0px);
  border-radius: 0 var(--sheet-panel-border-radius) var(--sheet-panel-border-radius) 0;
  margin: 0;
  inset: 0 auto 0 0;
}

dialog-panel[morph][state]:has(sheet-panel[data-position="right"]) > dialog {
  width: var(--sheet-active-size, min(26rem, 90vw));
  height: 100dvh;
  padding-right: env(safe-area-inset-right, 0px);
  border-radius: var(--sheet-panel-border-radius) 0 0 var(--sheet-panel-border-radius);
  margin: 0;
  inset: 0 0 0 auto;
}

dialog-panel[morph][state]:has(sheet-panel[data-position="center"]) > dialog {
  width: var(--sheet-center-width);
  height: fit-content;
  max-width: calc(100vw - 2 * var(--sheet-card-margin));
  max-height: calc(100dvh - 2 * var(--sheet-card-margin));
  border-radius: var(--sheet-card-border-radius);
  margin: auto;
  inset: 0;
}

dialog-panel[morph][state]:has(sheet-panel[data-position="bottom"] sheet-footer) > dialog {
  padding-bottom: 0;
}

dialog-panel[morph][state]:has(sheet-panel[data-position="left"] sheet-footer) > dialog {
  padding-left: 0;
}

dialog-panel[morph][state]:has(sheet-panel[data-position="right"] sheet-footer) > dialog {
  padding-right: 0;
}

dialog-panel[morph][state]:has(sheet-panel[data-mode="card"][data-position="bottom"]) > dialog {
  inset: auto var(--sheet-card-margin) var(--sheet-card-margin);
  width: auto;
  max-width: calc(100vw - 2 * var(--sheet-card-margin));
  border-radius: var(--sheet-card-border-radius);
  padding-bottom: 0;
}

dialog-panel[morph][state]:has(sheet-panel[data-mode="card"][data-position="left"]) > dialog {
  inset: var(--sheet-card-margin) auto var(--sheet-card-margin) var(--sheet-card-margin);
  height: auto;
  max-height: calc(100dvh - 2 * var(--sheet-card-margin));
  border-radius: var(--sheet-card-border-radius);
  padding-left: 0;
}

dialog-panel[morph][state]:has(sheet-panel[data-mode="card"][data-position="right"]) > dialog {
  inset: var(--sheet-card-margin) var(--sheet-card-margin) var(--sheet-card-margin) auto;
  height: auto;
  max-height: calc(100dvh - 2 * var(--sheet-card-margin));
  border-radius: var(--sheet-card-border-radius);
  padding-right: 0;
}

dialog-panel[morph][state]:has(sheet-panel[data-desktop="true"][data-mode="card"][data-position="bottom"]) > dialog {
  width: var(--sheet-desktop-panel-width);
  left: var(--sheet-card-margin);
  right: var(--sheet-card-margin);
  margin-inline: auto;
}

:is(dialog-panel[morph][state]:has(sheet-panel[data-desktop="true"][data-mode="card"][data-position="left"]) > dialog, dialog-panel[morph][state]:has(sheet-panel[data-desktop="true"][data-mode="card"][data-position="right"]) > dialog) {
  width: min(var(--sheet-active-size, var(--sheet-desktop-panel-width)),
		var(--sheet-desktop-panel-width));
  max-width: var(--sheet-desktop-panel-width);
}

dialog-panel[morph][state]:has(sheet-panel[data-mode="edge"][data-position="bottom"]) > dialog {
  box-shadow: 0 var(--sheet-bleed) 0 0 var(--sheet-panel-background),
		var(--sheet-panel-box-shadow);
}

dialog-panel[morph][state]:has(sheet-panel[data-mode="edge"][data-position="left"]) > dialog {
  box-shadow: calc(-1 * var(--sheet-bleed)) 0 0 0 var(--sheet-panel-background),
		var(--sheet-panel-box-shadow);
}

dialog-panel[morph][state]:has(sheet-panel[data-mode="edge"][data-position="right"]) > dialog {
  box-shadow: var(--sheet-bleed) 0 0 0 var(--sheet-panel-background),
		var(--sheet-panel-box-shadow);
}

dialog-panel:has(sheet-panel) > dialog-backdrop {
  background: var(--sheet-overlay-background);
  -webkit-backdrop-filter: blur(var(--sheet-overlay-blur));
  opacity: 0;
}

:is(dialog-panel[morph][state="showing"]:has(sheet-panel) > dialog-backdrop, dialog-panel[morph][state="shown"]:has(sheet-panel) > dialog-backdrop) {
  opacity: var(--sheet-backdrop-progress, 1);
  pointer-events: auto;
  transition: none;
}

dialog-panel[morph][state="hiding"]:has(sheet-panel) > dialog-backdrop {
  opacity: var(--sheet-backdrop-progress, 0);
  pointer-events: auto;
  transition: none;
}

sheet-panel {
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

sheet-panel[data-position="center"], sheet-panel[data-desktop="true"][data-position="bottom"] {
  height: auto;
}

sheet-header, sheet-footer {
  box-sizing: border-box;
  touch-action: pinch-zoom;
  flex-shrink: 0;
  display: block;
}

sheet-header {
  padding: var(--sheet-handle-inset) var(--sheet-content-padding) 0;
  position: relative;
}

sheet-header:before {
  content: "";
  top: var(--sheet-handle-offset);
  width: var(--sheet-handle-width);
  height: var(--sheet-handle-height);
  background: var(--sheet-handle-color);
  border-radius: var(--sheet-handle-height);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

sheet-panel[data-position="left"] sheet-header, sheet-panel[data-position="right"] sheet-header {
  padding-top: var(--sheet-content-padding);
}

sheet-panel[data-position="left"] sheet-header:before, sheet-panel[data-position="right"] sheet-header:before {
  content: none;
}

sheet-panel[data-position="left"] {
  padding-right: var(--sheet-handle-side-inset);
}

sheet-panel[data-position="right"] {
  padding-left: var(--sheet-handle-side-inset);
}

sheet-panel[data-position="left"], sheet-panel[data-position="right"] {
  touch-action: pinch-zoom;
}

sheet-panel[data-position="left"]:before, sheet-panel[data-position="right"]:before {
  content: "";
  width: var(--sheet-handle-side-thickness);
  height: var(--sheet-handle-side-length);
  background: var(--sheet-handle-color);
  border-radius: var(--sheet-handle-side-thickness);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

sheet-panel[data-position="left"]:before {
  right: var(--sheet-handle-offset);
}

sheet-panel[data-position="right"]:before {
  left: var(--sheet-handle-offset);
}

sheet-panel[data-desktop="true"] sheet-header {
  padding-top: var(--sheet-content-padding);
}

sheet-panel[data-desktop="true"] sheet-header:before, sheet-panel[data-desktop="true"][data-position="left"]:before, sheet-panel[data-desktop="true"][data-position="right"]:before {
  content: none;
}

sheet-panel[data-desktop="true"][data-position="left"] {
  padding-right: 0;
}

sheet-panel[data-desktop="true"][data-position="right"] {
  padding-left: 0;
}

@media (pointer: fine) {
  sheet-header {
    padding-top: var(--sheet-content-padding);
  }

  sheet-header:before, sheet-panel[data-position="left"]:before, sheet-panel[data-position="right"]:before {
    content: none;
  }

  sheet-panel[data-position="left"] {
    padding-right: 0;
  }

  sheet-panel[data-position="right"] {
    padding-left: 0;
  }
}

sheet-content {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: var(--sheet-content-padding);
  overscroll-behavior: contain;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  display: block;
  overflow: auto;
}

sheet-panel {
  --_sheet-safe-float: 0px;
}

sheet-panel[data-mode="card"], sheet-panel[data-position="center"] {
  --_sheet-safe-float: var(--sheet-card-margin);
}

sheet-footer {
  padding: var(--sheet-footer-padding);
  padding-bottom: calc(var(--sheet-footer-padding) +
			max(0px, env(safe-area-inset-bottom, 0px) - var(--_sheet-safe-float, 0px)));
  background: var(--sheet-footer-background);
}

sheet-panel[data-position="left"] sheet-footer {
  padding-left: calc(var(--sheet-footer-padding) +
			max(0px, env(safe-area-inset-left, 0px) - var(--_sheet-safe-float, 0px)));
}

sheet-panel[data-position="right"] sheet-footer {
  padding-right: calc(var(--sheet-footer-padding) +
			max(0px, env(safe-area-inset-right, 0px) - var(--_sheet-safe-float, 0px)));
}

:is(sheet-panel[data-position="left"]:has(sheet-footer) sheet-header, sheet-panel[data-position="left"]:has(sheet-footer) sheet-content) {
  padding-left: calc(var(--sheet-content-padding) +
			max(0px, env(safe-area-inset-left, 0px) - var(--_sheet-safe-float, 0px)));
}

:is(sheet-panel[data-position="right"]:has(sheet-footer) sheet-header, sheet-panel[data-position="right"]:has(sheet-footer) sheet-content) {
  padding-right: calc(var(--sheet-content-padding) +
			max(0px, env(safe-area-inset-right, 0px) - var(--_sheet-safe-float, 0px)));
}

[sheet-return] {
  animation: sheet-trigger-return var(--sheet-trigger-return-duration)
		var(--sheet-trigger-return-easing) both;
}

@keyframes sheet-trigger-return {
  from {
    opacity: 0;
    transform: scale(.86);
  }

  60% {
    opacity: 1;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sheet-morph-duration: 0s;
    --sheet-trigger-return-duration: 0s;
  }
}
/*$vite$:1*/