.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 28px;
  --glow-padding: 40px;
  --cone-spread: 25;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120F17);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-color-border {
  display: none;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120F17) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* colored mesh-gradient background fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  z-index: 1;
}
.stroke-text {
  display: block;
  width: 100%;
  line-height: 0;
}

.stroke-text--hover {
  cursor: pointer;
}

.stroke-text__svg {
  display: block;
  width: 100%;
  height: var(--stroke-text-height, 160px);
}

.stroke-text__stroke,
.stroke-text__fill {
  user-select: none;
}
.homepage {
  /* 布局标尺 —— 页面边距与关键尺寸只在此定义一次 */
  --page-max: 1440px;
  --page-gutter: clamp(20px, 4vw, 40px);
  --stage-gap: clamp(24px, 5vw, 80px);
  --portal-w: clamp(380px, 42vw, 600px);
  --portal-h: clamp(64px, 11vh, 100px);
  --portal-column-gap: clamp(12px, 1.8vw, 24px);

  --paper: #f5f7fa;
  --muted: #9ba0ab;
  --accent: #ff6b83;
  --cool: #a78bfa;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(24px, 5vh, 56px);
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  padding: clamp(18px, 4vh, 48px) var(--page-gutter);
  background: #101817;
  color: var(--paper);
  font-family: var(--site-font);
}

.admin-entry-trigger {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 3;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.admin-login-dialog,
.admin-item-dialog,
.admin-delete-dialog {
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(23 21 28 / 0.92);
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.42);
  color: var(--paper);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

.admin-login-dialog {
  width: min(100%, 390px);
  padding: 20px;
}

.admin-item-dialog {
  width: min(calc(100% - 32px), 640px);
  max-width: 640px;
  max-height: calc(100dvh - 32px);
  padding: 20px;
  overflow-y: auto;
}

.admin-delete-dialog {
  width: min(calc(100% - 32px), 420px);
  max-width: 420px;
}

.admin-login-dialog [data-slot="dialog-description"],
.admin-item-dialog [data-slot="dialog-description"],
.admin-delete-dialog [data-slot="alert-dialog-description"] {
  color: rgb(245 247 250 / 0.58);
}

.admin-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgb(245 247 250 / 0.62);
}

.admin-dialog-close:hover,
.admin-dialog-close:focus-visible {
  background: rgb(245 247 250 / 0.1);
  color: var(--paper);
}

.admin-login-form,
.admin-item-form {
  display: grid;
  gap: 18px;
}

.admin-login-field,
.admin-item-field {
  display: grid;
  gap: 7px;
}

.admin-login-field [data-slot="label"],
.admin-item-field [data-slot="label"],
.admin-item-checkbox-field [data-slot="label"] {
  color: rgb(245 247 250 / 0.68);
  font-size: 11px;
}

.admin-login-field [data-slot="input"],
.admin-item-field [data-slot="input"],
.admin-item-select {
  height: 40px;
  border-color: rgb(255 255 255 / 0.12);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.055);
  color: var(--paper);
}

.admin-item-select {
  width: 100%;
}

.admin-order-control {
  height: 40px;
  border-color: rgb(255 255 255 / 0.12);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.055);
}

.admin-order-control[data-control-focus-visible="true"] {
  border-color: rgb(167 139 250 / 0.72);
}

.admin-order-input {
  -moz-appearance: textfield;
}

.admin-order-input::-webkit-inner-spin-button,
.admin-order-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.admin-order-actions {
  align-self: stretch;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin-right: 0;
  padding: 4px 6px 4px 4px;
  border-left: 1px solid rgb(255 255 255 / 0.08);
}

.admin-order-actions [data-slot="button"] {
  width: 22px;
  height: 14px;
  min-height: 0;
  border-radius: 6px;
  color: rgb(245 247 250 / 0.56);
}

.admin-order-actions [data-slot="button"]:hover,
.admin-order-actions [data-slot="button"]:focus-visible {
  background: rgb(167 139 250 / 0.14);
  color: var(--paper);
}

.admin-order-actions [data-slot="button"]:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.admin-login-field [data-slot="input"]:focus,
.admin-item-field [data-slot="input"]:focus,
.admin-item-select:focus {
  border-color: rgb(167 139 250 / 0.72);
}

.admin-login-field [data-slot="input"]:not(:focus),
.admin-item-field [data-slot="input"]:not(:focus),
.admin-item-select:not(:focus),
.admin-order-control:not([data-control-focus-visible="true"]) {
  clip-path: inset(0 round 12px);
}

.admin-item-select-content,
.admin-context-menu {
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(23 21 28 / 0.95);
  color: var(--paper);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.38);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
}

.admin-item-select-content {
  padding: 6px;
}

.admin-item-select-content [data-slot="select-item"] {
  min-height: 36px;
  padding-inline: 10px 34px;
  border-radius: 8px;
}

.admin-login-submit {
  width: 100%;
  height: 40px;
  border: 1px solid rgb(167 139 250 / 0.5);
  background: rgb(167 139 250 / 0.13);
  color: var(--paper);
}

.admin-login-submit:hover,
.admin-login-submit:focus-visible {
  border-color: rgb(167 139 250 / 0.72);
  background: rgb(167 139 250 / 0.16);
}

.admin-item-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-item-checkbox-field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding-top: 18px;
}

.admin-item-checkbox-field [data-slot="checkbox"] {
  border-color: rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.055);
}

.admin-item-checkbox-field [data-slot="checkbox"][data-checked] {
  border-color: #7c3aed;
  background: #7c3aed;
  color: #fff;
}

.admin-form-error {
  margin: 0;
  color: #ff9aab;
  font-size: 11px;
  line-height: 1.45;
}

.admin-item-footer {
  margin: 0 -20px -20px;
  border-color: rgb(255 255 255 / 0.08);
  border-radius: 0 0 16px 16px;
  background: rgb(255 255 255 / 0.025);
}

.admin-item-footer-spacer {
  flex: 1;
}

.admin-session-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-session-badge,
.admin-session-logout {
  min-height: 32px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.045);
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.12);
  color: rgb(245 247 250 / 0.72);
  backdrop-filter: blur(20px) saturate(1.55) brightness(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.55) brightness(1.12);
}

.admin-session-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: 10px;
  white-space: nowrap;
}

.admin-session-logout {
  padding-inline: 10px;
  font-size: 10px;
}

.admin-session-logout:hover,
.admin-session-logout:focus-visible {
  border-color: rgb(167 139 250 / 0.58);
  background: rgb(167 139 250 / 0.12);
  color: var(--paper);
}

/* 顶栏与主舞台共用同一条对齐轨道，边缘天然共线 */
.masthead,
.stage,
.site-footer {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
}

.scenic-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #070b0b;
}

.scenic-background > div {
  width: 100%;
  height: 100%;
  background-color: transparent !important;
}

.scenic-background canvas {
  opacity: 0.66;
}

.letter-glitch-static {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 9px,
    rgb(132 215 247 / 0.08) 9px 10px
  );
}

.masthead {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.masthead-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.current-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 12px;
  color: rgb(245 247 250 / 0.68);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.current-status-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #61dca3;
  box-shadow:
    0 0 0 3px rgb(97 220 163 / 0.08),
    0 0 9px rgb(97 220 163 / 0.28);
  opacity: 0.82;
  transform-origin: center;
  animation: status-breathe 2.8s ease-in-out infinite;
}

@keyframes status-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgb(97 220 163 / 0.06),
      0 0 7px rgb(97 220 163 / 0.2);
    opacity: 0.68;
    transform: scale(0.88);
  }

  50% {
    box-shadow:
      0 0 0 4px rgb(97 220 163 / 0.12),
      0 0 12px rgb(97 220 163 / 0.4);
    opacity: 1;
    transform: scale(1);
  }
}

.current-status,
.language-switch,
.footer-glass {
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.045);
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.12);
  backdrop-filter: blur(20px) saturate(1.55) brightness(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.55) brightness(1.12);
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  color: var(--paper);
}

.language-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
}

.language-switch button.is-active {
  background: rgb(245 247 250 / 0.18);
  color: var(--paper);
}

.language-switch button:hover,
.language-switch button:focus-visible {
  background: rgb(245 247 250 / 0.16);
  outline: none;
}

/* 主舞台：左文字 / 右入口，间距由栅格强制保证，不会重叠 */
.stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--stage-gap);
  min-height: 0;
  overflow: visible;
}

.identity {
  max-width: 620px;
  text-align: left;
}

.identity-title {
  display: block;
  width: min(100%, 610px);
  margin: 16px 0 16px;
  font: inherit;
  line-height: 0;
  filter: drop-shadow(0 0 18px rgb(245 247 250 / 0.12));
}

.identity-title-mark .stroke-text__svg {
  height: clamp(90px, 14vw, 176px);
  overflow: visible;
}

.identity-title-mark text {
  font-family: Georgia, "Times New Roman", serif;
}

.portals {
  --portal-scroll-padding: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--portal-column-gap);
  row-gap: clamp(18px, 3vh, 34px);
  width: calc(var(--portal-w) + (var(--portal-scroll-padding) * 2));
  position: fixed;
  z-index: 1;
  top: 0;
  right: max(0px, calc(var(--page-gutter) - var(--portal-scroll-padding)), calc((100% - var(--page-max)) / 2 - var(--portal-scroll-padding)));
  bottom: 0;
  min-height: 0;
  height: auto;
  align-self: initial;
  margin-block: 0;
  margin-inline: calc(var(--portal-scroll-padding) * -1);
  padding: var(--portal-scroll-padding);
  overflow: auto;
  align-content: safe center;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* The scrollport must receive wheel/touch input in the column gap too. */
  pointer-events: auto;
}

.portals::-webkit-scrollbar {
  display: none;
}

.portal-entry {
  position: relative;
  width: 100%;
  /* Keep a stable height so the glow border can resolve its layout immediately. */
  height: var(--portal-h);
  opacity: 1;
  pointer-events: auto;
}

[data-slot="context-menu-trigger"].portal-entry {
  display: block;
}

.portal-entry--disabled {
  opacity: 0.48;
}

.portal-entry--entering {
  animation: portal-entry-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes portal-entry-rise {
  from {
    transform: translateY(18px);
  }

  to {
    transform: translateY(0);
  }
}

.portal-glow,
.portal-glow > .border-glow-inner {
  width: 100%;
  height: 100%;
}

/* Let the button's shared 1px active translation extend past the fixed card
   height without turning the card content into a scroll container. */
.portal-glow > .border-glow-inner {
  overflow: visible;
}

.portal-glow.border-glow-card {
  border-color: rgb(255 255 255 / 0.1);
  background: rgb(17 38 36 / 0.92);
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.12);
}

.admin-login-divider {
  align-items: center;
  color: rgba(226, 232, 240, 0.62);
  display: flex;
  font-size: 0.75rem;
  gap: 0.75rem;
  text-transform: uppercase;
}

.admin-login-divider::before,
.admin-login-divider::after {
  background: rgba(148, 163, 184, 0.2);
  content: '';
  flex: 1;
  height: 1px;
}

.portal-glow.border-glow-card::before {
  display: none;
}

.portal-glow.border-glow-card::after {
  display: none;
}

.portal-glow.border-glow-card > .border-glow-color-border {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  transition: opacity 0.25s ease-out;
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    #000 calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    #000 calc((100 - var(--cone-spread)) * 1%)
  );
}

.portal-glow.border-glow-card:not(:hover):not(.sweep-active) > .border-glow-color-border {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.portal-glow.border-glow-card > .border-glow-color-border::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 1px;
  border-radius: inherit;
  background:
    var(--gradient-one),
    var(--gradient-two),
    var(--gradient-three),
    var(--gradient-four),
    var(--gradient-five),
    var(--gradient-six),
    var(--gradient-seven),
    var(--gradient-base);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.portal-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 3vw, 40px);
  text-decoration: none;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}

.portal-link:focus-visible {
  outline: 2px solid var(--cool);
  outline-offset: 4px;
}

.portal-link--disabled {
  border: 0;
  background: transparent;
  cursor: context-menu;
}

.portal-link--disabled:hover,
.portal-link--disabled:focus-visible {
  background: transparent;
}

.portal-add-button {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  color: rgb(245 247 250 / 0.72);
  font-size: 13px;
  /* Match the portal links instead of the shared button press animation. */
  transform: none;
}

.portal-add-button:hover,
.portal-add-button:focus-visible {
  background: transparent;
  color: var(--paper);
}

.portal-add-button:focus-visible {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid var(--cool);
  outline-offset: 4px;
}

.admin-context-menu [data-slot="context-menu-label"] {
  color: rgb(245 247 250 / 0.52);
}

.admin-context-menu [data-slot="context-menu-item"]:focus {
  background: rgb(167 139 250 / 0.14);
  color: var(--paper);
}

.admin-content-dialog {
  top: auto !important;
  right: 0;
  bottom: 0 !important;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  width: 88vw;
  max-width: none;
  height: 88dvh;
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  padding: 20px 22px 0;
  translate: 0 0 !important;
  transform: none;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(23 21 28 / 0.92);
  box-shadow: 0 -24px 80px rgb(0 0 0 / 0.38);
  color: var(--paper);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

.portal-health-dot {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 9px;
  height: 9px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 50%;
  background: #7d8590;
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.12);
}

.portal-health-dot--up {
  background: #43d17c;
  box-shadow: 0 0 10px rgb(67 209 124 / 0.7);
}

.portal-health-dot--degraded {
  background: #f4bf4f;
  box-shadow: 0 0 10px rgb(244 191 79 / 0.65);
}

.portal-health-dot--down {
  background: #f06464;
  box-shadow: 0 0 10px rgb(240 100 100 / 0.65);
}

.admin-content-dialog[data-open] {
  animation: admin-content-sheet-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-content-dialog[data-closed] {
  animation: admin-content-sheet-out 140ms ease-in;
}

.admin-content-dialog > [data-slot="dialog-header"] {
  min-width: 0;
  padding-right: 38px;
}

.admin-content-dialog > [data-slot="dialog-close"] {
  top: 16px;
  right: 18px;
}

.admin-content-sidebar-provider {
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: transparent;
}

.admin-content-tabs {
  display: grid;
  grid-template-columns: clamp(180px, 15vw, 230px) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.admin-content-sidebar {
  width: 100%;
  min-width: 0;
  background: transparent;
  color: var(--paper);
}

.admin-content-sidebar [data-slot="sidebar-inner"] {
  background: transparent;
}

.admin-content-sidebar [data-slot="sidebar-group-label"] {
  color: rgb(245 247 250 / 0.42);
}

.admin-content-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding-left: clamp(18px, 2vw, 30px);
  overflow: hidden;
  border-left: 1px solid rgb(255 255 255 / 0.1);
}

.admin-content-main > [role="tabpanel"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin-top: 14px;
  padding: 0 6px 22px 4px;
  overflow: auto;
  overscroll-behavior: contain;
}

.admin-content-tabs-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.admin-content-tabs-list {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  padding: 8px clamp(12px, 1.5vw, 20px) 8px 0;
  overflow-y: auto;
}

.admin-content-tabs-list [data-slot="sidebar-menu-item"] {
  width: 100%;
}

.admin-content-tabs-list [data-slot="tabs-trigger"] {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  color: rgb(245 247 250 / 0.58);
  font-size: 13px;
}

.admin-content-tabs-list [data-slot="tabs-trigger"][data-active] {
  background: rgb(167 139 250 / 0.14);
  color: var(--paper);
}

.admin-content-tabs-list [data-slot="tabs-trigger"]::after {
  right: -1px;
  background: var(--cool);
}

.admin-content-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

@keyframes admin-content-sheet-in {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes admin-content-sheet-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-content-dialog[data-open],
  .admin-content-dialog[data-closed] {
    animation: none;
  }
}

@media (min-width: 1800px) {
  .admin-content-dialog {
    width: 78vw;
    height: 90dvh;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .admin-content-dialog {
    width: 94vw;
    height: 88dvh;
  }
}

@media (max-width: 640px) {
  .admin-content-dialog {
    width: 100%;
    height: 90dvh;
    max-height: 90dvh;
    padding: 18px 16px 0;
    border-right: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
  }

  .admin-content-tabs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .admin-content-tabs-list {
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .admin-content-sidebar [data-slot="sidebar-group"] {
    padding: 0;
  }

  .admin-content-sidebar [data-slot="sidebar-group-label"] {
    display: none;
  }

  .admin-content-tabs-list [data-slot="tabs-trigger"] {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
  }

  .admin-content-tabs-list [data-slot="tabs-trigger"]::after {
    inset: auto 0 -5px;
    width: auto;
    height: 2px;
  }

  .admin-content-main {
    padding-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    border-left: 0;
  }

  .admin-content-tabs-header {
    padding-top: 10px;
  }

  .admin-content-grid {
    grid-template-columns: 1fr;
  }

  .admin-content-grid aside {
    display: flex;
    overflow-x: auto;
  }

  .admin-page-editor,
  .admin-settings-form .admin-item-fields {
    grid-template-columns: 1fr;
  }
}

.admin-content-message {
  margin: 0;
  color: rgb(167 139 250 / 0.9);
  font-size: 12px;
}

.admin-content-grid {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 18px;
}

.admin-content-grid aside {
  display: grid;
  align-content: start;
  gap: 5px;
}

.admin-content-grid aside button {
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgb(245 247 250 / 0.62);
  text-align: left;
  cursor: pointer;
}

.admin-content-grid aside button.is-active {
  background: rgb(167 139 250 / 0.14);
  color: var(--paper);
}

.admin-page-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-page-field {
  display: grid;
  gap: 6px;
}

.admin-page-editor label {
  display: grid;
  gap: 6px;
  color: rgb(245 247 250 / 0.68);
  font-size: 11px;
}

.admin-page-editor input,
.admin-page-editor textarea {
  border: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.055);
  color: var(--paper);
}

.admin-settings-form {
  min-height: 100%;
}

.admin-settings-form .admin-item-fields {
  align-content: start;
}

.admin-settings-footer {
  margin: auto 0 0;
  padding: 14px 0 0;
  border-color: rgb(255 255 255 / 0.08);
  border-radius: 0;
  background: transparent;
}

.admin-page-editor .admin-enabled-field {
  display: flex;
  align-items: center;
  align-self: end;
  gap: 8px;
  min-height: 32px;
}

.admin-enabled-field [data-slot="checkbox"] {
  margin: 0;
}

.admin-body-editor {
  min-height: 150px;
}

.admin-build-list {
  display: grid;
  gap: 10px;
}

.admin-link-editor {
  display: grid;
  gap: 16px;
}

.admin-link-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-link-editor-header h3 {
  margin: 0;
  font-size: 16px;
}

.admin-link-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-health-loading-indicator {
  width: 42px;
  height: 6px;
}

.admin-health-panel {
  display: grid;
  gap: 18px;
}

.admin-health-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-health-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}

.admin-health-header p {
  margin: 6px 0 0;
  color: rgb(245 247 250 / 0.48);
  font-size: 12px;
}

.admin-health-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-health-item {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.035);
}

.admin-health-card-header,
.admin-health-state-row,
.admin-health-info,
.admin-health-metrics {
  min-width: 0;
}

.admin-health-card-header,
.admin-health-state-row,
.admin-health-window {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-health-overall {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  text-align: right;
}

.admin-health-overall span,
.admin-health-window {
  color: rgb(245 247 250 / 0.44);
  font-size: 10px;
}

.admin-health-overall strong {
  font-size: 18px;
  line-height: 1;
}

.admin-health-overall.is-up strong { color: #52d68a; }
.admin-health-overall.is-degraded strong { color: #e9bd55; }
.admin-health-overall.is-down strong { color: #e66b70; }
.admin-health-overall.is-unknown strong { color: rgb(245 247 250 / 0.58); }

.admin-health-state {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(245 247 250 / 0.62);
  font-size: 13px;
}

.admin-health-state svg {
  width: 17px;
  height: 17px;
}

.admin-health-state.is-up { color: #6ee7a0; }
.admin-health-state.is-degraded { color: #f4c96b; }
.admin-health-state.is-down { color: #f28b8b; }

.admin-health-info {
  display: grid;
  gap: 5px;
}

.admin-health-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-health-info span {
  overflow: hidden;
  color: rgb(245 247 250 / 0.46);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-health-state-row {
  min-height: 18px;
}

.admin-health-window {
  flex: 1;
}

.admin-health-sparkline {
  display: flex;
  align-items: end;
  gap: 4px;
  min-height: 30px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: thin;
}

.admin-health-sparkline span {
  display: block;
  flex: 0 0 6px;
  width: 6px;
  height: 24px;
  border-radius: 2px;
  background: rgb(245 247 250 / 0.18);
}

.admin-health-tooltip {
  display: grid;
  gap: 3px;
  min-width: 150px;
}

.admin-health-tooltip strong {
  color: inherit;
  font-weight: 700;
}

.admin-health-tooltip span {
  color: currentColor;
  opacity: 0.78;
}

.admin-health-sparkline span.is-up { background: #39d37b; }
.admin-health-sparkline span.is-degraded { background: #e9bd55; }
.admin-health-sparkline span.is-down { background: #e66b70; }

.admin-health-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-health-metrics div {
  min-width: 0;
}

.admin-health-metrics dt,
.admin-health-metrics dd {
  margin: 0;
}

.admin-health-metrics dt {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgb(245 247 250 / 0.4);
  font-size: 10px;
  text-transform: uppercase;
}

.admin-health-metrics dt svg {
  width: 12px;
  height: 12px;
}

.admin-health-metrics dd {
  margin-top: 4px;
  overflow: hidden;
  color: rgb(245 247 250 / 0.78);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-health-empty {
  color: rgb(245 247 250 / 0.54);
  font-size: 13px;
}

.admin-link-item {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 82px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.025);
  cursor: grab;
  touch-action: none;
  text-align: left;
}

.admin-link-info {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 9px;
  padding: 2px 0;
  cursor: grab;
  text-align: left;
}

.admin-link-info > strong {
  overflow: hidden;
  color: rgb(245 247 250 / 0.96);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-link-order,
.admin-link-status {
  display: inline-flex;
  min-width: 0;
  height: 23px;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 5px;
  background: rgb(255 255 255 / 0.045);
  color: rgb(245 247 250 / 0.65);
  font-size: 11px;
  line-height: 1;
}

.admin-link-url {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 23px;
  align-items: center;
  gap: 4px;
  padding: 1px 0 2px;
  color: #b9a7ff;
  font-size: 11px;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: rgb(185 167 255 / 0.72);
  text-underline-offset: 3px;
}

.admin-link-url:hover,
.admin-link-url:focus-visible {
  color: #d8ceff;
  text-decoration-color: currentcolor;
}

.admin-link-url:focus-visible {
  border-radius: 3px;
  outline: 2px solid rgb(167 139 250 / 0.75);
  outline-offset: 2px;
}

.admin-link-url > span {
  min-width: 0;
  overflow: hidden;
  padding-bottom: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-link-url svg,
.admin-link-order svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.admin-link-order b {
  flex: 0 0 auto;
  color: rgb(245 247 250 / 0.82);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.admin-link-order {
  width: 100%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-link-order-value {
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1;
}

.admin-link-status {
  width: 100%;
  font-weight: 600;
}

.admin-link-details {
  display: grid;
  width: 82px;
  flex: 0 0 82px;
  gap: 6px;
}

.admin-link-status.is-enabled {
  border-color: rgb(97 220 163 / 0.35);
  background: rgb(97 220 163 / 0.1);
  color: #83e7ba;
}

.admin-link-status.is-disabled {
  border-color: rgb(255 107 131 / 0.3);
  background: rgb(255 107 131 / 0.08);
  color: #ff9aab;
}

.admin-link-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.admin-link-drag-handle {
  cursor: grab;
  color: rgb(245 247 250 / 0.55);
}

.admin-link-drag-handle:active {
  cursor: grabbing;
}

.admin-link-item.is-dragging {
  z-index: 2;
  border-color: rgb(167 139 250 / 0.62);
  background: #1d1c21;
  box-shadow: 0 16px 32px rgb(0 0 0 / 0.28);
  cursor: grabbing;
  opacity: 1;
}

.admin-link-item.is-dragging .admin-link-info,
.admin-link-item.is-dragging .admin-link-drag-handle {
  cursor: grabbing;
}

@media (max-width: 640px) {
  .admin-link-editor-header {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-link-item {
    min-height: 96px;
  }

  .admin-link-list {
    grid-template-columns: 1fr;
  }

  .admin-link-details {
    width: 82px;
    flex-basis: 82px;
  }
}

.admin-build-list > div {
  padding: 14px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.035);
}

.admin-build-list > div,
.admin-build-list h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-build-list span {
  flex: 1;
  color: var(--paper);
}

.admin-build-list small {
  display: block;
  color: rgb(245 247 250 / 0.5);
}

.admin-drafts-error {
  grid-column: 1 / -1;
  margin: 0;
  color: #ff9aab;
  font-size: 11px;
  line-height: 1.45;
  pointer-events: auto;
}

.site-footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.footer-glass {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 12px;
  color: rgb(245 247 250 / 0.72);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-link {
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  color: rgb(245 247 250 / 0.82);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    color 160ms ease;
}

.footer-link:hover {
  border-color: rgb(167 139 250 / 0.52);
  color: var(--paper);
}

.footer-link:focus-visible {
  border-color: transparent;
  color: var(--paper);
  outline: 2px solid var(--cool);
  outline-offset: 4px;
}

.site-footer small {
  font: inherit;
  white-space: nowrap;
}

.site-footer small::before {
  content: "\00b7";
  margin-right: 10px;
  color: rgb(245 247 250 / 0.42);
}

@media (max-width: 760px) {
  .masthead {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 10px;
  }

  .masthead-actions {
    gap: 5px;
  }

  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: clamp(24px, 6vh, 56px);
  }

  .identity-title {
    width: min(100%, 560px);
    margin: 12px 0 9px;
  }

  .identity-title-mark .stroke-text__svg {
    height: clamp(82px, 21vw, 132px);
  }

  .portals {
    --portal-column-gap: 10px;

    row-gap: 10px;
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: auto;
    height: 100%;
    align-self: stretch;
    width: calc(100% + (var(--portal-scroll-padding) * 2));
  }

  .portal-link {
    font-size: clamp(25px, 5vw, 36px);
  }
}

@media (max-width: 560px) {
  .admin-item-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-item-checkbox-field {
    padding-top: 0;
  }

  .admin-item-footer-spacer {
    display: none;
  }

  .admin-session-controls {
    width: 100%;
    justify-content: flex-end;
  }

  .portals {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .admin-content-tabs-header {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-content-tabs-list {
    width: 100%;
  }

  .admin-content-grid,
  .admin-page-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-health-list {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (prefers-reduced-motion: reduce) {
  .portal-entry--entering {
    animation: none;
  }

  .current-status-dot {
    animation: none;
    opacity: 0.82;
    transform: none;
  }
}