:root {
  color-scheme: dark;
  --qa-bg: #080808;
  --qa-panel: #151515;
  --qa-line: rgba(255, 255, 255, 0.14);
  --qa-text: #f5f5f5;
  --qa-muted: rgba(245, 245, 245, 0.68);
  --qa-ok: #98dc8b;
  --qa-error: #ff8a8a;
  --qa-pending: #f0c674;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #080808;
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#host-shell {
  width: min(1680px, calc(100vw - 48px));
  margin: 0 auto;
  padding: clamp(28px, 5vw, 72px) 0 40px;
}

.demo-header {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.demo-header h1,
.demo-header p,
.demo-footer h2,
.demo-footer p {
  margin: 0;
}

.demo-header h1 {
  color: var(--all-prism-host-theme-text, #fff);
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 450;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.demo-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 38px;
}

.language-control {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
}

.language-control[hidden] { display: none; }

.language-control select {
  min-width: 132px;
  height: 38px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid color-mix(
    in srgb,
    var(--all-prism-host-theme-primary, #fff) 32%,
    transparent
  );
  border-radius: 10px;
  padding: 0 38px 0 14px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--all-prism-host-theme-text, #fff);
  font: 600 14px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.language-control::after {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.75);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.75);
  content: "";
  pointer-events: none;
  transform: translateY(-2px) rotate(45deg);
}

.language-control select:hover {
  border-color: color-mix(
    in srgb,
    var(--all-prism-host-theme-accent, #fff) 62%,
    transparent
  );
  background: rgba(255, 255, 255, 0.085);
}

.language-control select:focus-visible {
  outline: 2px solid var(--all-prism-host-theme-accent, #fff);
  outline-offset: 3px;
}

.demo-eyebrow {
  color: var(--all-prism-host-theme-accent, rgba(255, 255, 255, 0.58));
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.demo-introduction,
.demo-footer {
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
}

.demo-introduction { max-width: 1120px; }

.viewer-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-color: color-mix(
    in srgb,
    var(--all-prism-host-theme-primary, #fff) 22%,
    transparent
  );
  border-radius: clamp(14px, 2vw, 24px);
  background: #000;
}

.mount {
  width: 100%;
  height: 100%;
}

.mount iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* This is the Host's only visual viewer overlay and it remains hidden unless loading fails fatally. */
.viewer-fatal-error {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
  background: #111;
  color: #fff;
  text-align: center;
}

.viewer-fatal-error[hidden] { display: none; }

.viewer-fatal-error p {
  max-width: 34rem;
  margin: 0;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.5;
}

.demo-footer {
  border-top: 1px solid color-mix(
    in srgb,
    var(
      --all-prism-host-theme-secondary,
      var(--all-prism-host-theme-primary, #fff)
    ) 22%,
    transparent
  );
  padding: clamp(24px, 3vw, 40px) 0 0;
}

.demo-footer h2 {
  margin-bottom: clamp(18px, 2vw, 28px);
  color: var(--all-prism-host-theme-text, #fff);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 450;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.demo-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 80px);
  max-width: 1320px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.qa-root[hidden] { display: none; }

body[data-host-mode="debug"] {
  background: var(--qa-bg);
  color: var(--qa-text);
}

body[data-host-mode="debug"] #host-shell {
  padding-bottom: 56px;
}

.qa-root {
  display: grid;
  gap: 18px;
  padding-top: 28px;
}

.qa-header {
  display: grid;
  gap: 8px;
}

.qa-header h1,
.qa-header p,
.qa-panel h2 { margin: 0; }

.qa-header h1 {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 400;
}

.qa-header > p:last-child { color: var(--qa-muted); }

.qa-eyebrow {
  color: #9fd4ff;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.qa-panel {
  overflow: hidden;
  border: 1px solid var(--qa-line);
  border-radius: 18px;
  background: var(--qa-panel);
}

.qa-panel > h2,
.qa-console-panel > header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--qa-line);
}

.qa-panel h2 { font-size: 14px; }
.qa-list { margin: 0; }

.qa-list > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.qa-list > div:last-child { border-bottom: 0; }

.qa-list dt {
  color: var(--qa-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.qa-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.qa-list dd::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--qa-pending);
}

.qa-list dd:not([data-state])::before { display: none; }
.qa-list dd[data-state="ok"]::before { background: var(--qa-ok); }
.qa-list dd[data-state="error"]::before { background: var(--qa-error); }

.qa-log {
  max-height: 320px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.qa-log li {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--qa-muted);
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
}

.qa-console-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qa-console-panel button {
  border: 1px solid var(--qa-line);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
}

.qa-console { max-height: 420px; }

@media (max-width: 1100px) {
  .qa-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .viewer-shell {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 760px) {
  .demo-footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  #host-shell {
    width: calc(100vw - 16px);
    padding-top: 24px;
  }

  .viewer-shell,
  .qa-panel { border-radius: 12px; }

  .demo-meta-row {
    gap: 12px;
  }

  .language-control select {
    min-width: 112px;
    height: 36px;
  }
}