.record-panel.is-visible,
.developer-library-panel:not(.is-hidden) {
  position: fixed;
  inset: auto;
  left: 50vw;
  top: 50svh;
  z-index: 52;
  display: block;
  width: min(760px, calc(100vw - 36px));
  max-width: min(760px, calc(100vw - 36px));
  max-height: min(78svh, 720px);
  margin: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
  box-shadow: 0 24px 72px var(--shadow), 0 0 0 1px rgba(240,237,230,.03) inset;
  backdrop-filter: blur(28px) saturate(1.1);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.developer-library-panel:not(.is-hidden) {
  overflow: auto;
}
.record-panel.is-visible {
  padding-top: clamp(18px, 3vw, 28px);
  border-top-color: var(--line);
}
.record-panel.is-visible {
  inset: auto !important;
  left: 50vw !important;
  top: 50svh !important;
  margin: 0 !important;
  transform: translate3d(-50%, -50%, 0) !important;
  transform-origin: center center !important;
}
.choice-stat-count {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .12em;
}
@media (max-width: 720px) {
  .dev-tools {
    left: 12px;
    top: 58px;
    width: calc(100vw - 24px);
  }
  .dev-toggle {
    left: 12px;
    top: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}