.subpage {
  position: fixed;
  inset: 0;
  z-index: var(--sp-z, 1000);
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--sp-width, 720px);
  max-width: calc(100% - 32px);
  height: fit-content;
  max-height: min(var(--sp-height, 90%), calc(100% - 32px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  background: var(--sp-bg, var(--surface, #161616));
  color: var(--sp-fg, var(--fg, inherit));
  border: var(--sp-border-width, 1px) solid var(--sp-border-color, var(--border, #2a2a2a));
  border-radius: var(--sp-radius, 0px);
  box-shadow: var(--sp-shadow, none);
  --_sp-in: sp-fade-in;
  --_sp-out: sp-fade-out;
}
.subpage.is-open { display: flex; }
:where(.subpage) { cursor: var(--cursor-default, auto); }

.subpage[data-subpage-place="full"] {
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border-width: 0;
  border-radius: 0;
  --_sp-in: sp-fade-in;
  --_sp-out: sp-fade-out;
}
.subpage[data-subpage-place="left"],
.subpage[data-subpage-place="right"] {
  width: var(--sp-side, 420px);
  max-width: calc(100% - 48px);
  height: auto;
  max-height: none;
  margin: 0;
  border-block-width: 0;
}
.subpage[data-subpage-place="left"] {
  inset: 0 auto 0 0;
  border-left-width: 0;
  border-radius: 0 var(--sp-radius, 0px) var(--sp-radius, 0px) 0;
  --_sp-in: sp-left-in;
  --_sp-out: sp-left-out;
}
.subpage[data-subpage-place="right"] {
  inset: 0 0 0 auto;
  border-right-width: 0;
  border-radius: var(--sp-radius, 0px) 0 0 var(--sp-radius, 0px);
  --_sp-in: sp-right-in;
  --_sp-out: sp-right-out;
}
.subpage[data-subpage-place="bottom"] {
  inset: auto 0 0 0;
  width: auto;
  max-width: none;
  max-height: var(--sp-sheet, 70%);
  margin: 0;
  border-bottom-width: 0;
  border-inline-width: 0;
  border-radius: var(--sp-radius, 0px) var(--sp-radius, 0px) 0 0;
  --_sp-in: sp-up-in;
  --_sp-out: sp-up-out;
}

.subpage[data-subpage-motion="fade"] { --_sp-in: sp-fade-in; --_sp-out: sp-fade-out; }
.subpage[data-subpage-motion="zoom"] { --_sp-in: sp-zoom-in; --_sp-out: sp-zoom-out; }
.subpage[data-subpage-motion="rise"] { --_sp-in: sp-rise-in; --_sp-out: sp-rise-out; }
.subpage[data-subpage-motion="none"] { --_sp-in: none; --_sp-out: none; }

.subpage.is-open { animation: var(--_sp-in) var(--sp-speed, 220ms) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.subpage.is-open.is-closing { animation: var(--_sp-out) var(--sp-speed, 220ms) ease-in both; }

.subpage:modal::backdrop {
  background: var(--sp-backdrop, rgba(0, 0, 0, 0.6));
  -webkit-backdrop-filter: blur(var(--sp-backdrop-blur, 0px));
  backdrop-filter: blur(var(--sp-backdrop-blur, 0px));
  animation: sp-fade-in var(--sp-speed, 220ms) ease both;
}
.subpage.is-closing:modal::backdrop { animation: sp-fade-out var(--sp-speed, 220ms) ease-in both; }
.subpage[data-subpage-motion="none"]:modal::backdrop { animation: none; }

@keyframes sp-fade-in { from { opacity: 0; } }
@keyframes sp-fade-out { to { opacity: 0; } }
@keyframes sp-zoom-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes sp-zoom-out { to { opacity: 0; transform: scale(0.96); } }
@keyframes sp-rise-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes sp-rise-out { to { opacity: 0; transform: translateY(24px); } }
@keyframes sp-left-in { from { transform: translateX(-100%); } }
@keyframes sp-left-out { to { transform: translateX(-100%); } }
@keyframes sp-right-in { from { transform: translateX(100%); } }
@keyframes sp-right-out { to { transform: translateX(100%); } }
@keyframes sp-up-in { from { transform: translateY(100%); } }
@keyframes sp-up-out { to { transform: translateY(100%); } }

.subpage-bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--sp-bar-pad, 12px 16px);
  background: var(--sp-bar-bg, transparent);
  border-bottom: var(--sp-border-width, 1px) solid var(--sp-border-color, var(--border, #2a2a2a));
  font-weight: 600;
}
.subpage-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  text-wrap-style: balance;
}
.subpage[data-subpage-title-align="center"] > .subpage-bar > .subpage-title {
  text-align: center;
  padding-inline-start: calc(26px + 12px);
}
.subpage[data-subpage-title-align="end"] > .subpage-bar > .subpage-title { text-align: end; }
.subpage-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -6px -4px auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: var(--cursor-pointer, pointer);
  opacity: 0.75;
}
.subpage-close:hover { opacity: 1; }
.subpage-close:focus-visible { outline: 2px solid var(--accent, #0057ff); outline-offset: 1px; }
.subpage:focus { outline: none; }

.subpage > .subpage-body { transition: opacity 0.18s ease; }
.subpage.is-settling > .subpage-body { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .subpage > .subpage-body { transition: none; }
}

.subpage-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--sp-pad, 20px);
}

.subpage[data-subpage-bar="close"] > .subpage-bar {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background: none;
  border: 0;
}
.subpage[data-subpage-bar="close"] > .subpage-bar > :not(.subpage-close) { display: none; }
.subpage[data-subpage-bar="close"] .subpage-close {
  margin: 0;
  background: color-mix(in srgb, var(--sp-bg, var(--surface, #161616)) 70%, transparent);
}
.subpage[data-subpage-bar="none"] > .subpage-bar { display: none; }

html.subpage-lock { overflow: hidden; }
html.subpage-lock-gutter > body { margin-right: var(--sp-gutter, 0px) !important; }
html.subpage-hide-behind body { visibility: hidden; }
html.subpage-hide-behind .subpage.is-open { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .subpage.is-open,
  .subpage.is-open.is-closing,
  .subpage:modal::backdrop { animation: none; }
}