:root { --demo-canvas: var(--ff-bg); --demo-surface: var(--ff-surface); --demo-text: var(--ff-text); --demo-muted: var(--ff-muted); --demo-border: var(--ff-border); --demo-accent: var(--ff-accent); }

body.pilot-demo { margin: 0; overflow: auto; background: var(--demo-canvas); color: var(--demo-text); font-family: 'Inter', system-ui, sans-serif; }
.pilot-demo button, .pilot-demo input { font: inherit; }
.pilot-demo button { min-height: 44px; cursor: pointer; }
.pilot-demo :focus-visible { outline: 3px solid var(--demo-accent); outline-offset: 3px; }
.demo-header { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px 5%; border-bottom: 1px solid var(--demo-border); }
.demo-brand { color: inherit; font-weight: 650; text-decoration: none; margin-right: auto; }
.demo-note, .demo-intro p, #demo-feedback { color: var(--demo-muted); font-size: 13px; line-height: 1.6; }
.pilot-demo main { width: min(1120px, 90%); margin: 0 auto; padding: 40px 0; }
.demo-intro { margin-bottom: 28px; max-width: 640px; }
.demo-eyebrow { text-transform: uppercase; letter-spacing: .1em; }
.demo-intro h1 { font-size: clamp(26px, 4vw, 40px); line-height: 1.15; margin: 12px 0; }
.demo-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.demo-panel { min-width: 0; padding: 24px; border: 1px solid var(--demo-border); border-radius: 12px; background: var(--demo-surface); }
.demo-panel h2 { font-size: 16px; margin: 0 0 24px; }
.demo-panel .kit-specimen { width: 100%; max-width: none; margin-bottom: 24px; }
.demo-panel .kit-tab { min-height: 44px; }
.demo-panel .kit-tab[aria-selected="true"] { color: var(--demo-canvas); }
.demo-panel .kit-primary { color: #110a1c; }
.demo-panel .kit-table-wrap { overflow: auto; }
.demo-panel .kit-table { min-width: 0; width: 100%; }
.demo-panel td { overflow-wrap: anywhere; }
.demo-panel pre { overflow: auto; padding: 16px; border: 1px solid var(--demo-border); border-radius: 8px; font: 13px/1.7 ui-monospace, monospace; min-height: 180px; white-space: pre-wrap; overflow-wrap: anywhere; }
.demo-panel .kit-field, .demo-panel .kit-url-field { min-width: 0; }
.demo-panel .kit-input { width: 100%; min-width: 0; min-height: 44px; }
.demo-panel .kit-row, .demo-panel .kit-actions, .demo-panel .kit-request-actions { flex-wrap: wrap; }
.demo-inventory { margin-top: 20px; }
.demo-footer { padding: 24px 5%; border-top: 1px solid var(--demo-border); color: var(--demo-muted); font-size: 12px; }
.demo-skip { position: fixed; top: -100px; background: var(--demo-surface); color: var(--demo-text); padding: 12px; z-index: 10; }
.demo-skip:focus { top: 8px; left: 8px; }
@media (max-width: 700px) { .demo-workspace { grid-template-columns: minmax(0, 1fr); } .demo-header .demo-note { display: none; } .demo-panel { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .pilot-demo *, .pilot-demo *::before, .pilot-demo *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }