.demo-third-party-reka-ui .demo{--color-bg:#fff;--color-fg:#101828;--color-fg-muted:#475467;--color-fg-subtle:#667085;--color-surface:#f9fafb;--color-surface-2:#f2f4f7;--color-surface-3:#eaecf0;--color-border:#eaecf0;--color-border-strong:#d0d5dd;--color-accent:#6938ef;--color-accent-hover:#5925dc;--color-accent-fg:#fff;--color-accent-soft:#f4f3ff;--color-accent-soft-fg:#5925dc;--color-success:#17b26a;--color-success-soft:#ecfdf3;--color-warning:#f79009;--color-warning-soft:#fffaeb;--color-danger:#f04438;--color-danger-soft:#fef3f2;max-width:30rem;color:var(--color-fg);flex-direction:column;gap:.875rem;font-size:.875rem;display:flex}.dark .demo-third-party-reka-ui .demo{--color-bg:#0c111d;--color-fg:#f9fafb;--color-fg-muted:#98a2b3;--color-fg-subtle:#667085;--color-surface:#101828;--color-surface-2:#1d2939;--color-surface-3:#344054;--color-border:#1d2939;--color-border-strong:#344054;--color-accent:#7a5af8;--color-accent-hover:#9b8afb;--color-accent-fg:#0c111d;--color-accent-soft:#27115f;--color-accent-soft-fg:#bdb4fe;--color-success:#47cd89;--color-success-soft:#074d31;--color-warning:#fdb022;--color-warning-soft:#7a2e0e;--color-danger:#f97066;--color-danger-soft:#7a271a}.demo-third-party-reka-ui .demo pre{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-fg);border-radius:.375rem;margin:0;padding:.5rem .75rem;font-family:ui-monospace,monospace;font-size:.75rem;overflow:auto}.demo-third-party-reka-ui .demo small{color:var(--color-fg-muted);font-family:ui-monospace,monospace;font-size:.75rem}.demo-third-party-reka-ui .demo small em{color:var(--color-accent);font-style:normal;font-weight:500}.demo-third-party-reka-ui .demo .chips{flex-wrap:wrap;gap:.3rem;display:flex}.demo-third-party-reka-ui .demo .chip{border:1px solid var(--color-border);color:var(--color-fg-subtle);border-radius:.25rem;padding:.1rem .4rem;font-family:ui-monospace,monospace;font-size:.6875rem}.demo-third-party-reka-ui .demo .chip.on{border-color:var(--color-accent);color:var(--color-accent-soft-fg);font-weight:600}.demo .field{flex-direction:column;gap:.4rem;display:flex}.demo .nf{border:1px solid var(--color-border-strong);border-radius:.375rem;align-items:stretch;width:fit-content;display:inline-flex;overflow:hidden}.demo .nf-input{text-align:center;background:var(--color-bg);width:3.5rem;color:var(--color-fg);font:inherit;border:0}.demo .nf-input:focus{outline:2px solid var(--color-accent);outline-offset:-2px}.demo .nf-btn{background:var(--color-surface-2);color:var(--color-fg-muted);cursor:pointer;border:0;padding:0 .75rem;font-size:1.1rem;line-height:1}.demo .nf-btn:hover{color:var(--color-accent)}.demo .switch{background:var(--color-border-strong);cursor:pointer;border:0;border-radius:999px;width:2.6rem;height:1.5rem;padding:.15rem;transition:background .15s}.demo .switch[data-state=checked]{background:var(--color-accent)}.demo .switch-thumb{background:#fff;border-radius:999px;width:1.2rem;height:1.2rem;transition:transform .15s;display:block}.demo .switch-thumb[data-state=checked]{transform:translate(1.1rem)}.demo .pin{gap:.4rem;display:flex}.demo .pin-input{text-align:center;border:1px solid var(--color-border-strong);background:var(--color-bg);width:2.2rem;height:2.6rem;color:var(--color-fg);font:inherit;border-radius:.375rem}.demo .pin-input:focus{outline:2px solid var(--color-accent);outline-offset:-1px}