.demo-root{font-family:var(--font-ui);padding:var(--s4);max-width:var(--wrap);margin:0 auto}.demo-engine-toggle-row{display:flex;justify-content:center;margin-bottom:var(--s5)}.demo-engine-toggle{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-md);overflow:hidden}.demo-engine-btn{font:inherit;font-family:var(--font-mono);font-size:13px;padding:5px 14px;border:none;background:var(--panel);color:var(--muted);cursor:pointer}.demo-engine-btn+.demo-engine-btn{border-left:1px solid var(--border-strong)}.demo-engine-btn:hover{color:var(--ink)}.demo-engine-btn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.demo-engine-btn.is-active{background:var(--ink);color:var(--panel)}.demo-stage{position:relative;width:100%;max-width:640px;aspect-ratio:1 / 1;margin:0 auto var(--s5);background:var(--stage-bg);border:1px solid var(--stage-border);border-radius:var(--r-lg);overflow:hidden}.demo-perf{position:absolute;top:var(--s3);right:var(--s3);z-index:1;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow);min-width:152px}.demo-perf summary{cursor:pointer;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;-webkit-user-select:none;user-select:none}.demo-perf summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.demo-perf[open] summary{border-bottom:1px solid var(--border-soft)}.demo-perf-body{display:grid;grid-template-columns:auto auto;gap:4px var(--s3);justify-content:space-between;margin:0;padding:8px 10px 10px;font-size:12.5px}.demo-perf-body dt{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.04em;align-self:center}.demo-perf-body dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}.demo-perf-body dd.warn{color:var(--warn)}.demo-count-display{text-align:center;margin:0 0 var(--s4)}.demo-count-value{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}.demo-controls{display:flex;flex-direction:column;align-items:center;gap:var(--s2)}.demo-controls-row{display:flex;justify-content:center;gap:var(--s2);flex-wrap:wrap}.demo-btn{--btn-bg: var(--panel);--btn-fg: var(--ink);--btn-bd: var(--border-strong);font:inherit;font-family:var(--font-ui);font-weight:500;min-height:32px;padding:6px 14px;border-radius:var(--r-md);border:1px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);cursor:pointer}.demo-btn:hover{--btn-fg: var(--ink);--btn-bd: var(--faint)}.demo-btn:active{--btn-bg: var(--panel-2)}.demo-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.demo-btn:disabled{opacity:.5;cursor:not-allowed}.demo-btn--primary{--btn-bg: var(--ink);--btn-fg: var(--panel);--btn-bd: var(--ink);font-weight:600}.demo-btn--primary:hover{--btn-fg: var(--panel);--btn-bd: var(--ink);opacity:.92}.demo-btn--ghost{--btn-bg: transparent;--btn-bd: var(--border);--btn-fg: var(--muted)}.demo-btn--ghost:hover{--btn-fg: var(--ink);--btn-bd: var(--faint)}.demo-btn--sm{min-height:26px;padding:4px 10px;font-size:12.5px}