/* Demonstration label: separate from the original landing-page styles. */
.demo-notice {
  position: fixed;
  inset: auto 0 0;
  z-index: 100;
  padding: 8px 14px;
  background: #241b14;
  border-top: 1px solid #694329;
  color: #ffd0af;
  text-align: center;
  font: 12px/1.5 'Play', sans-serif;
}
body { padding-bottom: 38px; }
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #ff995f; outline-offset: 5px; }

/* Original modal dimensions, palette, header and thin orange spinner. */
.demo-modal {
  width: min(760px, calc(100vw - 48px));
  max-width: 100%;
  max-height: calc(100dvh - 70px);
  margin: auto;
  padding: 0;
  border: 1px solid #ffffff0f;
  border-radius: 6px;
  color: #f1f1f1;
  background: #121212;
  box-shadow: 0 30px 80px #000b;
}
.demo-modal::backdrop { background: #000b; }
.modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #ffffff0f;
}
.modal-header img { width: 115px; max-height: 20px; }
.modal-label { color: #ef956c; font-size: 11px; letter-spacing: .1em; }
.modal-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #ffffff66;
  font-size: 27px;
  cursor: pointer;
}
.modal-close:hover { color: #ef5204; }
.modal-body { background: #191919; }
.demo-loader {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.spinner-ring {
  display: block;
  width: 114px;
  height: 114px;
  border: 2px solid #ffffff14;
  border-top-color: #ef5204;
  border-right-color: #ef5204;
  border-radius: 50%;
  animation: local-spin 1s linear infinite;
}
.loader-label { color: #ffffff80; font-size: 13px; }
.demo-content {
  max-width: 640px;
  margin: auto;
  padding: 40px 32px;
}
.demo-content::before {
  content: '';
  display: block;
  height: 2px;
  width: min(260px, 100%);
  background: linear-gradient(90deg, transparent 15%, #ef5204, transparent 85%);
  margin: 6px auto 24px;
}
.demo-content h2 {
  margin: 0 0 20px;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  text-align: center;
  -webkit-text-stroke: .4px #ffffffe6;
}
.demo-content p { color: #ffffffa3; font-size: 14px; line-height: 1.55; text-align: center; }
.command-list { list-style: none; margin: 22px 0; }
.command-list li { padding: 14px 0; border-bottom: 1px solid #ffffff0f; }
.command-list code { display: block; color: #ff995f; font-size: 15px; overflow-wrap: anywhere; }
.command-list span { display: block; margin-top: 7px; color: #ffffff8c; font-size: 12px; line-height: 1.5; }
.command-row { display: flex; align-items: center; gap: 14px; }
.command-row code { min-width: 0; flex: 1; }
.copy-command {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid #ffffff14;
  border-radius: 6px;
  background: #ffffff06;
  color: #ef5204;
  cursor: pointer;
}
.copy-command::before, .copy-command::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.copy-command::before { top: 9px; left: 10px; }
.copy-command::after { top: 13px; left: 14px; background: #202020; }
.copy-command:hover { color: #ff995f; background: #ffffff0d; }
.copy-command:disabled { cursor: wait; opacity: .6; }
.copy-status { display: block; margin-top: 6px; color: #ff995f; font-size: 12px; line-height: 1.5; }
.copy-status:empty { display: none; }
.clipboard-buffer { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.demo-content .demo-footnote { color: #ffffff73; font-size: 12px; }
@keyframes local-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .demo-modal { width: calc(100vw - 24px); }
  .demo-content { padding: 28px 20px; }
  .demo-notice { font-size: 10px; }
  .modal-label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spinner-ring, header.bg__dark { animation: none; }
  section .block__img.element-show { transition: none; }
}