.qv-demo{padding:0 var(--gutter);--qv-blue: #73aaff;--qv-violet: #c18aff;--qv-green: #31d789;--qv-amber: #ffbe4d}:root[data-theme=light] .qv-demo{--qv-blue: #1459d9;--qv-violet: #792acf;--qv-green: #087a3e;--qv-amber: #966000}.qv-heading{padding:32px 0;max-width:900px}.qv-back{display:inline-flex;gap:8px;align-items:center;margin-bottom:24px}.qv-heading h1{font-size:clamp(2rem,4vw,3.25rem);margin:8px 0 16px}.qv-heading>p:not(.eyebrow){color:var(--text-muted)}.qv-heading .qv-note{font-size:.875rem;line-height:1.65;max-width:850px}.qv-workspace{padding:0 0 40px}.qv-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line)}.qv-stages button{padding:20px 12px;min-width:0;text-align:left;display:grid;gap:8px;background:transparent;color:var(--text);border:0;border-bottom:3px solid transparent}.qv-stages button:nth-child(1){--stage-color: var(--qv-blue)}.qv-stages button:nth-child(2){--stage-color: var(--qv-violet)}.qv-stages button:nth-child(3){--stage-color: var(--qv-green)}.qv-stages button:nth-child(4){--stage-color: var(--qv-amber)}.qv-stages button:nth-child(5){--stage-color: var(--accent)}.qv-stages button[aria-current=step]{border-bottom-color:var(--stage-color);background:color-mix(in srgb,var(--surface) 65%,transparent)}.qv-stages button:hover:enabled{background:var(--surface-raised)}.qv-step-number{color:var(--stage-color);font-size:.875rem;min-height:20px}.qv-stages strong{font-size:1rem}.qv-stages small{color:var(--text-muted);font-size:.8125rem}.qv-toolbar,.qv-stage-heading,.qv-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.qv-toolbar{padding:24px 0}.qv-toolbar label{display:inline-flex;gap:10px;align-items:center;color:var(--text-muted);font-size:.875rem}.qv-toolbar input{accent-color:var(--accent);width:18px;height:18px}.qv-columns{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:40px;align-items:start}.qv-stage,.qv-log{min-width:0}.qv-stage-heading h3{margin:0}.qv-stage>p{color:var(--text-muted)}.qv-status{font-size:.875rem;color:var(--text-muted)}.qv-status-succeeded{color:var(--qv-green)}.qv-status-processing{color:var(--qv-amber)}.qv-file-area{display:grid;gap:14px;padding:28px 20px;margin:24px 0;border:1px dashed var(--line-strong);background:color-mix(in srgb,var(--surface) 65%,transparent);overflow-wrap:anywhere}.qv-file-area svg{color:var(--qv-blue)}.qv-file-area label{font-weight:600}.qv-file-area input{width:100%;min-width:0;font:inherit;font-size:.875rem}.qv-file-area input::file-selector-button{border:1px solid var(--line-strong);padding:10px 14px;margin:0 12px 6px 0;background:var(--surface);color:var(--text);cursor:pointer}.qv-file-area input::file-selector-button:hover{border-color:var(--accent)}.qv-file-area p{margin:0;color:var(--text-muted);font-size:.875rem}.qv-fields{margin:24px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.qv-fields>div{min-width:0;padding:14px 0;border-top:1px solid var(--line)}.qv-fields dt{color:var(--text-muted);font-size:.875rem;margin-bottom:8px}.qv-fields dd{margin:0;overflow-wrap:anywhere;font-size:.875rem;line-height:1.65;font-family:ui-monospace,monospace}.qv-demo .button{min-height:44px;gap:9px;white-space:normal;text-align:center}.qv-demo .button svg{margin:0;flex-shrink:0}.qv-demo button:disabled{opacity:.5;cursor:not-allowed;transform:none}.qv-actions{margin:22px 0}.qv-error,.qv-service-note{border-left:3px solid var(--qv-amber);padding:12px 16px;background:var(--surface);overflow-wrap:anywhere}.qv-log{padding:24px;background:color-mix(in srgb,var(--surface) 90%,transparent)}.qv-log h3{margin:0 0 20px;color:var(--qv-green)}.qv-log p{color:var(--text-muted);font-size:.875rem}.qv-log ol{list-style:none;margin:0;padding:0;max-height:580px;overflow:auto}.qv-log li{display:grid;gap:5px;font-size:.875rem;line-height:1.65;padding:14px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.qv-log time{color:var(--text-subtle);font-size:.8125rem}.qv-result>a{display:inline-flex;align-items:center;gap:8px}.qv-preview img,.qv-preview iframe{width:100%;max-height:380px;object-fit:contain;border:1px solid var(--line)}.qv-preview iframe{height:380px;background:#fff}.qv-preview pre{max-height:360px;overflow:auto;background:var(--surface);border:1px solid var(--line);padding:16px;font-size:.875rem;white-space:pre-wrap;overflow-wrap:anywhere}.qv-preview p{font-size:.875rem;overflow-wrap:anywhere;color:var(--text-muted)}.qv-pagination{padding-top:28px;margin-top:28px;border-top:1px solid var(--line)}.qv-pagination>span{font-size:.875rem;color:var(--text-muted)}.qv-audit ol{list-style:none;padding:0}.qv-audit li{border-top:1px solid var(--line);padding:20px 0}.qv-audit li>div{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}.qv-audit li span{color:var(--qv-green);font-size:.875rem}.qv-audit li p{color:var(--text-muted);font-size:.875rem}.qv-audit code{overflow-wrap:anywhere;font-size:.875rem}.qv-demo details{border-top:1px solid var(--line);padding:20px 0}.qv-demo summary{cursor:pointer;font-weight:600}.qv-demo summary:hover{color:var(--accent)}.qv-definition{border-top:1px solid var(--line);padding:16px 0;margin-top:16px}.qv-definition h4{margin:0}.qv-definition p,.qv-technical p{font-size:.875rem;color:var(--text-muted);line-height:1.7}.qv-technical{margin-top:32px}.qv-spinner{animation:qv-spin 1s linear infinite}@keyframes qv-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.qv-spinner{animation:none}}@media(max-width:800px){.qv-columns{grid-template-columns:1fr;gap:28px}.qv-log ol{max-height:300px}}@media(max-width:500px){.qv-stages button{padding:14px 4px;text-align:center}.qv-stages strong{font-size:.875rem}.qv-stages small{display:none}.qv-step-number{display:flex;justify-content:center}.qv-fields{grid-template-columns:1fr}.qv-file-area{padding:20px 14px}.qv-demo .button{padding:10px 12px}.qv-pagination{gap:6px}.qv-log{padding:20px}}.site-root .quantumvault-demonstration{padding:var(--section-space) var(--gutter)}.site-root .quantumvault-demonstration .qv-demo{padding:0}.site-root .quantumvault-demonstration .qv-heading{padding:0 0 24px}.qv-status-demo,.qv-audit li span.qv-status-demo{color:var(--qv-amber)}.qv-stages button.qv-demo-step{--stage-color: var(--qv-amber)}.qv-stages button.qv-demo-step small{color:var(--qv-amber)}.qv-demo>.qv-note,.qv-workspace>.qv-note{color:var(--text-muted);font-size:.875rem;line-height:1.65}
