:root{--demo-font:13px system-ui, sans-serif;--demo-border:#c8d0d8;--demo-rule:#dde3e9;--demo-bar:#f7f9fb;--demo-ink:#1c2530;--demo-muted:#5d6874;--demo-accent:#1668b8;--demo-chip:#eef1f5;--demo-error:#c0242c;--demo-error-bg:#fdecec;--demo-control-h:26px;--demo-radius:5px}html,body{height:100%;margin:0}.page{height:100vh;font:var(--demo-font);color:var(--demo-ink);flex-direction:column;display:flex}.page>header{background:var(--demo-bar);border-bottom:1px solid var(--demo-border);flex-wrap:wrap;align-items:center;gap:6px 10px;padding:7px 12px;display:flex}.page>header>strong{letter-spacing:.01em;margin-right:2px;font-size:13px}.group{flex-wrap:wrap;align-items:center;gap:6px;display:inline-flex}.group+.group{border-left:1px solid var(--demo-rule);padding-left:10px}.group>.cap{text-transform:uppercase;letter-spacing:.06em;color:var(--demo-muted);white-space:nowrap;font-size:11px}label{white-space:nowrap;align-items:center;gap:5px;display:inline-flex}select,button,input:not([type=checkbox]):not([type=range]):not([type=color]){height:var(--demo-control-h);box-sizing:border-box;font:inherit;color:inherit;border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:#fff;padding:0 6px}button{cursor:pointer;padding:0 9px}button:hover:not(:disabled){background:var(--demo-chip)}input[type=color]{height:var(--demo-control-h);box-sizing:border-box;border:1px solid var(--demo-border);border-radius:var(--demo-radius);cursor:pointer;background:#fff;width:32px;padding:2px}input[type=range]{height:var(--demo-control-h);width:96px;accent-color:var(--demo-accent);cursor:pointer}label:has(>input[type=checkbox]){height:var(--demo-control-h);box-sizing:border-box;border:1px solid var(--demo-border);cursor:pointer;background:#fff;border-radius:999px;gap:5px;padding:0 8px 0 6px}label:has(>input[type=checkbox]:checked){background:#e7f0fa;border-color:#9cc2e6}label:has(>input[type=checkbox]:disabled){opacity:.5;cursor:default}input[type=checkbox]{accent-color:var(--demo-accent);cursor:inherit;margin:0}select:disabled,button:disabled,input:disabled{opacity:.5;cursor:default}select:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--demo-accent);outline-offset:1px}label:has(>input[type=checkbox]:focus-visible){outline:2px solid var(--demo-accent);outline-offset:1px}.status{background:var(--demo-chip);color:var(--demo-muted);text-overflow:ellipsis;white-space:nowrap;border-radius:999px;align-items:center;max-width:46ch;padding:2px 8px;font-size:12px;display:inline-flex;overflow:hidden}.status.error{background:var(--demo-error-bg);color:var(--demo-error)}.mono{font-family:ui-monospace,monospace;font-size:11px}