/* Secondary, progressively disclosed experiments. No editor or compiler on first paint. */
.live-example { --live-ink:var(--ink); --live-muted:var(--ink-muted); --live-rule:var(--try-rule); margin:1.25rem 0 2rem; border:1px solid var(--live-rule); border-radius:0; background:var(--try-bg); color:var(--live-ink); font:400 13px/1.7 var(--mono); min-width:0; }
.live-example > summary { padding:14px 18px; cursor:pointer; font-weight:600; list-style-position:inside; }
.live-example > summary::marker { color:var(--focus); }
.live-example > summary span { font-weight:400; color:var(--live-muted); margin-left:.6em; font-size:.85em; }
.live-example[open] > summary { border-bottom:1px solid var(--live-rule); }
.live-example .live-body { padding:18px; min-width:0; }
.live-example .live-prompt { margin:0 0 16px; max-width:76ch; color:var(--live-muted); }
.live-example .live-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0; }
.live-example button,.live-example select,.live-example input { font:inherit; color:var(--live-ink); background:var(--code-bg); border:1px solid var(--rule); border-radius:0; padding:7px 12px; }
.live-example button { cursor:pointer; }
.live-example button:disabled { cursor:wait; opacity:.55; }
.live-example button.live-run { background:var(--focus); color:var(--code-bg); border-color:var(--focus); }
.live-example a { color:var(--focus); text-decoration:underline; text-underline-offset:3px; }
.live-example .live-file { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:9px; }
.live-example select { max-width:100%; min-width:0; }
.live-example textarea { display:block; width:100%; min-height:240px; max-height:65vh; resize:vertical; box-sizing:border-box; padding:16px; border:1px solid var(--rule); border-radius:0; background:var(--code-bg); color:var(--ink); font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:2; overflow:auto; white-space:pre; }
.live-example textarea[readonly] { background:var(--code-bg); border-color:var(--live-rule); }
.live-example .live-parameters { margin:14px 0; }
.live-example .live-parameters summary { cursor:pointer; }
.live-example .live-parameters label { display:block; margin:12px 0 4px; }
.live-example .live-parameters input { width:100%; box-sizing:border-box; }
.live-example .live-parameters textarea { min-height:120px; }
.live-example .live-status { min-height:1.55em; color:var(--live-muted); margin:12px 0; }
.live-example .live-status[data-error=true] { color:var(--danger); }
.live-example .live-result { border-top:1px solid var(--live-rule); padding-top:16px; margin-top:12px; }
.live-example .live-output { display:block; font:500 23px/1.4 ui-monospace,monospace; white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 14px; }
.live-example pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:420px; overflow:auto; background:var(--code-bg); color:var(--ink); padding:12px; font:12px/1.5 ui-monospace,monospace; }
.live-example iframe { width:100%; height:620px; display:block; border:1px solid var(--live-rule); border-radius:0; background:white; }
.live-example .live-map { overflow:auto; max-width:100%; background:var(--cream-raised); }
.live-example :focus-visible { outline:3px solid var(--violet); outline-offset:3px; }
.live-example [hidden] { display:none !important; }
@media(max-width:600px) {
 .live-example > summary span { display:block; margin:4px 0 0 18px; }
 .live-example .live-body { padding:12px; }
 .live-example textarea { font-size:13px; padding:10px; }
 .live-example iframe { height:570px; }
 .live-example .live-file label { width:100%; }
}

.live-example > summary { font-weight:500; }
.live-example[open] { border-left-color:var(--focus); }
.live-example > summary::marker { color:var(--focus); }

.live-agent { margin: 12px 0; border-left: 2px solid var(--focus); padding: 8px 12px; }
.live-agent summary { cursor:pointer; color:var(--focus); }
.live-agent pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:.85rem; }