.demo{border:1px solid var(--line);background:var(--soft);border-radius:8px;padding:14px;margin:12px 0;font-size:13px}
.b{background:var(--fg);color:var(--bg);padding:8px 12px;border-radius:4px;font-size:13px}
.b.o{background:transparent;color:var(--fg);border:1px dashed var(--mut)}
.b.a{background:var(--fg);color:var(--bg)}
.lbl{font-size:12px;color:var(--mut);margin-bottom:8px}
.q{margin:22px 0;padding:18px 20px;border:1px solid var(--line);border-radius:8px}
.q h3{margin:0 0 4px}.q p{margin:4px 0 0;color:var(--mut)}.q pre{margin-top:12px}
.ctl{display:flex;flex-wrap:wrap;gap:10px 16px;margin:10px 0;font-size:13px}
.ctl label{display:flex;flex-direction:column;gap:3px;color:var(--mut)}
select,input[type=range]{font:inherit;font-size:13px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:4px 6px}
.pg{display:flex;min-height:150px;border:1px dashed var(--mut);padding:8px;background:var(--bg);border-radius:6px}
.page{position:relative;height:230px;border:1px dashed var(--mut);background:var(--bg);border-radius:6px;overflow:hidden}
.parent{width:72%;height:70%;margin:30px 0 0 24px;border:1px solid var(--fg);padding:8px}
.tag{font-size:11px;color:var(--mut)}
.sc{height:150px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:6px}
.sc .hd{position:sticky;top:0;background:var(--fg);color:var(--bg);padding:8px 12px;font-size:13px}
.sc p{margin:0;padding:10px 12px;font-size:13px;border-bottom:1px solid var(--line)}