/* Landing-only controls and sample workspace. */
:root { --demo-tint: rgba(15, 118, 110, .07); --demo-danger: #b43732; --demo-warning: #946019; --landing-button-fill: rgba(15, 118, 110, .16); --landing-button-ink: #115e59; }
html.dark { --demo-tint: rgba(90, 185, 169, .09); --demo-danger: #f19b91; --demo-warning: #dfb47b; --landing-button-fill: rgba(90, 185, 169, .2); --landing-button-ink: #a6ddd1; }
html .cta-btn.cta-btn-primary { background: var(--landing-button-fill); border-color: var(--landing-accent); color: var(--landing-button-ink); }
html .cta-btn.cta-btn-primary:hover { background: color-mix(in srgb, var(--landing-accent) 26%, transparent); }
html .cta-btn.cta-btn-secondary { background: color-mix(in srgb, var(--landing-ink) 9%, transparent); color: var(--landing-ink); border-color: var(--landing-line); }
html .cta-btn.cta-btn-secondary:hover { background: color-mix(in srgb, var(--landing-ink) 15%, transparent); }
html .cta-btn.cta-btn-outline { background: transparent; color: var(--landing-ink); border-color: var(--landing-line); }
html .cta-btn.cta-btn-outline:hover { background: color-mix(in srgb, var(--landing-ink) 5%, transparent); border-color: var(--landing-muted); }
.cta-btn { min-height: 44px; padding-inline: 24px; }
.cta-btn.cta-btn-nav { min-height: 34px; padding-inline: 16px; }
html :is(.cta-btn, #demo button, #demo select, #demo input, #demo textarea, #demo [tabindex]):focus-visible {
  outline: 2px solid var(--landing-accent) !important; outline-offset: 4px;
}
.demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
html .demo-tab { border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--landing-muted); padding: 10px 17px; font-size: 13px; white-space: nowrap; transition: background .2s, color .2s; }
html .demo-tab:hover { color: var(--landing-ink); background: var(--demo-tint); }
html .demo-tab.active { background: var(--demo-tint); border-color: var(--landing-accent); color: var(--landing-accent); }
.demo-stage { padding-block: 0 12px; min-width: 0; color: var(--landing-ink); }
.demo-panel.hidden, .demo-panel[hidden] { display: none; }
.demo-workspace { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px; margin-bottom: 32px; border-block: 1px solid var(--landing-line); font: 11px 'JetBrains Mono', monospace; color: var(--landing-muted); }
.demo-workspace > span { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.demo-workspace-divider { opacity: .5; margin-inline: 4px; }
.demo-status-dot { width: 6px; height: 6px; background: var(--landing-accent); border-radius: 50%; }
.demo-control { display: inline-flex; justify-content: center; align-items: center; gap: 10px; border: 1px solid var(--landing-line); border-radius: 999px; padding: 9px 15px; min-height: 36px; color: var(--landing-ink); background: transparent; font: 12px 'IBM Plex Sans', sans-serif; cursor: pointer; }
.demo-control:hover { border-color: var(--landing-muted); background: var(--demo-tint); }
.demo-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; }
.demo-heading .landing-eyebrow { margin-bottom: 12px; }
.demo-heading h3 { font-size: 26px; font-weight: 400; letter-spacing: -.025em; line-height: 1.25; }
.demo-heading h3 + p { margin-top: 10px; color: var(--landing-muted); font-size: 14px; line-height: 1.6; }
.demo-badge { display: inline-flex; align-items: center; width: fit-content; gap: 6px; padding: 6px 10px; border: 1px solid currentColor; border-radius: 999px; color: var(--landing-accent); font: 10px/1.4 'JetBrains Mono', monospace; white-space: nowrap; }
.demo-danger, .demo-metrics dd.demo-danger { color: var(--demo-danger); }
.demo-warning { color: var(--demo-warning); }
.demo-subtle { color: var(--landing-muted); font-size: 12px; line-height: 1.7; }
.demo-label { display: block; color: var(--landing-muted); font: 10px/1.6 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.demo-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; border-top: 1px solid var(--landing-line); padding-top: 28px; }
.demo-split > * { min-width: 0; }
.demo-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.demo-toolbar h4 { font-size: 15px; font-weight: 500; }
.demo-scenarios { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-chip { border: 1px solid var(--landing-line); color: var(--landing-muted); border-radius: 999px; background: transparent; padding: 8px 12px; font-size: 12px; cursor: pointer; }
.demo-chip[aria-pressed="true"], .demo-chip:hover { color: var(--landing-accent); border-color: var(--landing-accent); background: var(--demo-tint); }
.demo-conversation > .demo-label { margin-top: 28px; }
#demo-prompt { width: 100%; resize: none; border: 1px solid var(--landing-line); border-radius: 14px; background: transparent; color: var(--landing-ink); font: 15px/1.8 'IBM Plex Sans', sans-serif; padding: 18px; margin-block: 10px 16px; }
.demo-model { color: var(--landing-ink); font-size: 12px; }
.demo-model span { color: var(--landing-muted); }
.demo-response { background: var(--demo-tint); border-left: 2px solid var(--landing-accent); padding: 22px; margin-top: 28px; min-height: 150px; }
.demo-response[data-verdict="Blocked"] { border-color: var(--demo-danger); }
.demo-response h4 { color: var(--landing-ink); font-size: 16px; font-weight: 500; margin-bottom: 10px; }
.demo-response p { color: var(--landing-muted); font-size: 14px; line-height: 1.8; }
.demo-request-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--landing-muted); font: 10px/1.7 'JetBrains Mono', monospace; padding-top: 16px; }
.demo-inspector { border-left: 1px solid var(--landing-line); padding-left: 28px; }
.demo-inspector > .demo-subtle { margin-top: 8px; }
.demo-signal { padding-block: 18px; border-bottom: 1px solid var(--landing-line); }
.demo-signal > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; }
.demo-signal strong { font: 10px 'JetBrains Mono', monospace; color: var(--landing-muted); }
.demo-signal-track { height: 3px; margin-top: 12px; background: var(--landing-line); overflow: hidden; border-radius: 999px; }
.demo-signal-track span { display: block; height: 100%; background: currentColor; transform-origin: left; }
.demo-signal p { font-size: 11px; color: var(--landing-muted); margin-top: 8px; }
.demo-policy { margin-top: 24px; }
.demo-policy p { margin-top: 8px; font-size: 13px; color: var(--landing-muted); line-height: 1.7; }
.demo-filters { margin-block: 24px 18px; align-items: end; }
.demo-search { flex: 1 1 260px; }
.demo-search input, .demo-select select { border: 1px solid var(--landing-line); border-radius: 999px; background: transparent; color: var(--landing-ink); padding: 10px 16px; font: 13px 'IBM Plex Sans', sans-serif; }
.demo-search input { width: 100%; margin-top: 8px; }
.demo-select .demo-label { margin-bottom: 8px; }
html.dark .demo-select option { background: #0a0a0a; }
.demo-table-scroll { overflow-x: auto; }
.demo-events-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 12px; text-align: left; }
.demo-events-table th { padding: 12px 14px; color: var(--landing-muted); font: 10px 'JetBrains Mono', monospace; font-weight: 400; border-block: 1px solid var(--landing-line); white-space: nowrap; }
.demo-events-table td { padding: 15px 14px; border-bottom: 1px solid var(--landing-line); white-space: nowrap; }
.demo-events-table tbody tr { transition: background .2s; }
.demo-events-table tbody tr:hover, .demo-events-table tr[data-selected="true"] { background: var(--demo-tint); }
.demo-event-link { color: var(--landing-accent); font: 11px 'JetBrains Mono', monospace; text-underline-offset: 4px; }
.demo-event-link:hover { text-decoration: underline; }
.demo-env { color: var(--landing-muted); font: 10px 'JetBrains Mono', monospace; }
.demo-trace { padding: 22px; border: 1px solid var(--landing-line); border-radius: 14px; margin-top: 22px; }
.demo-trace .demo-toolbar { margin-bottom: 18px; }
.demo-trace p { font-size: 13px; line-height: 1.7; color: var(--landing-muted); }
.demo-trace-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.demo-trace-steps > div { border-top: 2px solid var(--landing-accent); padding-top: 10px; }
.demo-trace-steps strong { display: block; margin-top: 7px; font: 12px 'JetBrains Mono', monospace; }
.demo-drift-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin-top: 28px; }
.demo-alert-heading { margin-bottom: 16px; }
.demo-alert { display: block; text-align: left; width: 100%; border: 1px solid var(--landing-line); border-radius: 12px; padding: 20px; margin-bottom: 12px; background: transparent; color: var(--landing-ink); cursor: pointer; }
.demo-alert[aria-pressed="true"] { background: var(--demo-tint); border-color: var(--landing-accent); }
.demo-alert:hover { background: var(--demo-tint); }
.demo-alert .demo-toolbar { gap: 10px; margin-bottom: 12px; }
.demo-alert strong { font-weight: 500; font-size: 14px; }
.demo-alert p { font-size: 12px; color: var(--landing-muted); }
.demo-alert .demo-alert-deviation { margin-top: 16px; font: 12px 'JetBrains Mono', monospace; }
.demo-investigation-title { font-size: 20px; font-weight: 400; margin-block: 14px 8px; }
.demo-drift-chart { margin-block: 24px 8px; }
.demo-drift-chart svg { display: block; width: 100%; height: auto; }
.demo-chart-labels { display: flex; justify-content: space-between; color: var(--landing-muted); font: 10px 'JetBrains Mono', monospace; }
.demo-baseline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.demo-baseline dd { font-size: 20px; margin-top: 8px; }
.demo-baseline .metric-unit { display: block; margin: 4px 0 0; }
.demo-next-step { padding-top: 22px; border-top: 1px solid var(--landing-line); margin-top: 22px; }
.demo-next-step p { font-size: 13px; line-height: 1.7; color: var(--landing-muted); margin-top: 8px; }
.demo-stage button, .demo-stage select { cursor: pointer; }
@media (max-width: 760px) {
  .demo-tabs { gap: 6px; }
  html .demo-tab { padding: 9px 13px; font-size: 12px; }
  .demo-heading h3 { font-size: 23px; }
  .demo-workspace { font-size: 10px; }
  .demo-split, .demo-drift-layout { grid-template-columns: 1fr; gap: 28px; }
  .demo-inspector { border-left: 0; border-top: 1px solid var(--landing-line); padding: 24px 0 0; }
  .demo-trace { padding: 18px; }
  .demo-trace-steps { gap: 12px; }
  .demo-trace-steps .demo-label { font-size: 9px; }
  .demo-filters .demo-select { flex: 1; }
  .demo-filters select { width: 100%; }
}