.resource-demo{margin:32px 0;padding:24px 0;border-block:1px solid var(--line);min-width:0;max-width:100%}
.demo-heading{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
.demo-heading>div{flex:1 1 280px;min-width:0}
.demo-heading h2{font:700 32px/1.1 var(--display);margin:0 0 10px;color:var(--ink)}
.demo-heading p{margin:0;max-width:65ch;line-height:1.6}
.demo-heading .button{min-height:44px;flex-shrink:0;gap:10px}
.resource-demo [hidden]{display:none!important}
.demo-provider-note{font-size:14px;line-height:1.6;color:var(--muted);max-width:75ch;margin:16px 0 0}
.demo-status{font-size:14px;line-height:1.6;margin:12px 0 0;max-width:75ch}
.demo-status:empty{display:none}
.demo-stage{margin-top:20px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--soft);width:100%;min-width:0}
.demo-stage iframe{display:block;width:100%;height:700px;border:0;background:var(--paper,#fff)}
.demo-credit,.demo-fallback{font-size:14px;line-height:1.65;margin-top:12px;overflow-wrap:anywhere}
.demo-credit{color:var(--muted)}
.demo-fallback a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.demo-choices{margin-top:20px;border-top:1px solid var(--line)}
.demo-choice{display:grid;width:100%;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;text-align:left;padding:18px 8px;border:0;border-bottom:1px solid var(--line);background:var(--paper,#fff);color:var(--ink);font:inherit;cursor:pointer;min-height:64px}
.demo-choice strong{font-size:17px;overflow-wrap:anywhere}
.demo-choice>span:not(.demo-choice-action){grid-column:1;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.demo-choice-action{grid-column:2;grid-row:1/3;align-self:center;font-weight:600;color:var(--blue);font-size:14px}
.demo-choice:hover{background:var(--selected)}
.resource-demo button:focus-visible,.resource-demo a:focus-visible,.demo-stage iframe:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@media(max-width:760px){.resource-demo{margin:24px 0;padding:20px 0}.demo-heading{align-items:flex-start;gap:16px}.demo-heading>div{flex-basis:100%}.demo-heading h2{font-size:30px}.demo-stage iframe{height:620px}.demo-choice{padding:16px 4px;gap:8px 12px}.demo-choice-action{font-size:13px}.demo-provider-note,.demo-status,.demo-credit,.demo-fallback{font-size:14px}}