.demo-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 960px) { .demo-layout { grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; } }
.demo-copy h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
.demo-how { margin-top: 36px; }
.demo-facts { margin: 0; display: grid; gap: 16px; }
.demo-facts div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.demo-facts dt { font-weight: 700; margin-bottom: 4px; }
.demo-facts dd { margin: 0; color: var(--ink-2); }
.demo-box { width: 100%; min-width: 0; max-width: 440px; justify-self: center; }
@media (min-width: 960px) {
.demo-box { grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
.demo-copy { grid-column: 1; grid-row: 1; }
}
.demo-stage { height: min(640px, calc(100vh - 48px)); min-height: 520px; }
.demo-host { display: block; height: 100%; }
.demo-poster {
height: 100%; display: flex; flex-direction: column; overflow: hidden;
background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
}
.demo-poster[hidden] { display: none; }
.demo-poster-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--brand); color: var(--brand-ink); }
.demo-poster-head b { display: block; line-height: 1.2; }
.demo-poster-sub { display: block; font-size: .85rem; line-height: 1.2; opacity: .92; }
.demo-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-ink); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.demo-poster-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px 18px; overflow: auto; }
.demo-poster-title { font-weight: 700; font-size: 1.15rem; margin: 0; }
.demo-poster-text { color: var(--ink-2); margin: 0; }
.demo-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.demo-chip {
font: inherit; font-size: .95rem; text-align: left; line-height: 1.3; cursor: pointer;
min-height: 44px; padding: 10px 14px; border-radius: 999px;
background: var(--brand-tint); color: var(--brand-dark); border: 1px solid #bfe3dc;
}
.demo-chip:hover { background: #d4ebe6; color: var(--ink); }
.demo-start { margin-top: auto; cursor: pointer; font-family: inherit; }
.demo-poster-note { font-size: .88rem; color: var(--ink-2); margin: 0; text-align: center; }
.demo-status { min-height: 1.6em; margin: 10px 0 0; font-size: .95rem; color: var(--ink-2); text-align: center; }
.demo-box[aria-busy="true"] .demo-poster { opacity: .75; }