:root{--paper: #f3eee4;--paper-2: #e9e2d3;--paper-3: #d9d0bd;--ink: #171511;--ink-2: #4a453c;--ink-3: #847d70;--rule: #cdc3ae;--red: #d5451b;--red-deep: #b23a16;--slate: #2c4a6e;--white: #fffdf9;--demo-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--demo-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:var(--demo-font);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}.demo{display:flex;flex-direction:column;height:100vh;background:var(--paper)}.demo__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px;flex-wrap:wrap;row-gap:8px;min-height:56px;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--rule)}.demo__brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}.demo__logo{display:block;height:26px;width:auto}.demo__logo--dark{display:none}.demo__tag{font-family:var(--demo-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);border:1px solid currentColor;border-radius:2px;padding:2px 6px}.demo__nav{display:flex;align-items:center;gap:6px}.demo__hint{font-size:12px;line-height:1.4;color:var(--ink-3);margin-right:8px;max-width:420px;text-align:right}.demo__btn{height:30px;padding:0 12px;border-radius:3px;border:1px solid var(--paper-3);background:var(--white);color:var(--ink);font:500 12.5px var(--demo-font);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}.demo__btn:hover{background:var(--paper-2);border-color:var(--ink-3)}.demo__btn--primary{background:var(--red);border-color:var(--red);color:var(--white)}.demo__btn--primary:hover{background:var(--red-deep);border-color:var(--red-deep)}.demo__btn:focus-visible{outline:2px solid var(--red);outline-offset:1px}.demo__main{flex:1;min-height:0;display:flex;gap:12px;padding:12px}.demo__designer{flex:1;min-width:0;min-height:0}.demo__json{width:420px;display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--white);overflow:hidden}.demo__json-head{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-bottom:1px solid var(--rule);font-size:12px;color:var(--ink-3)}.demo__json-head strong{color:var(--ink);font-weight:600}.demo__json pre{flex:1;margin:0;padding:12px;overflow:auto;font:11px/1.5 var(--demo-mono);color:var(--ink-2)}.demo__status{display:inline-flex;align-items:center;padding:3px 10px;border-radius:2px;font-size:12px;font-weight:500;white-space:nowrap}.demo__status--info{background:#2c4a6e1f;color:var(--slate)}.demo__status--success{background:#15803d1f;color:#15803d}.demo__status--error{background:#d5451b24;color:var(--red-deep)}.demo__scenarios{display:flex;gap:2px;padding:2px;border-radius:3px;background:var(--paper-2);border:1px solid var(--paper-3)}.demo__scenario{display:flex;flex-direction:column;gap:1px;align-items:flex-start;min-width:0;max-width:220px;padding:5px 10px;border:0;border-radius:2px;background:transparent;color:var(--ink-2);font:inherit;text-align:left;cursor:pointer}.demo__scenario:hover{background:#fffdf9b3;color:var(--ink)}.demo__scenario--on{background:var(--white);color:var(--ink);box-shadow:0 1px 2px #17151114}.demo__scenario-label{font-size:12px;font-weight:600;white-space:nowrap}.demo__scenario-desc{font-size:10.5px;line-height:1.3;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.demo__scenario:focus-visible{outline:2px solid var(--red);outline-offset:1px}@media (max-width: 1500px){.demo__scenario-desc{display:none}.demo__scenario{max-width:none}}@media (max-width: 900px){.demo__hint{display:none}}@media (max-width: 820px){.demo__header{flex-wrap:wrap;align-items:stretch;height:auto;padding:8px 12px 10px;gap:8px;row-gap:8px}.demo__brand{flex:1 1 auto}.demo__logo{height:22px;width:auto}.demo__scenarios{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none}.demo__scenarios::-webkit-scrollbar{display:none}.demo__scenario{flex:1 0 auto;align-items:center}.demo__nav{flex-wrap:wrap;justify-content:flex-end;gap:6px}.demo__status{order:-1}.demo__main{padding:8px;gap:8px}.demo__main{flex-direction:column}.demo__json{width:auto;flex:0 0 40%;min-height:0}.demo__designer{flex:1 1 60%}}@supports (height: 100dvh){.demo{height:100dvh}}.demo--dark{background:var(--ink)}.demo--dark .demo__header{background:var(--ink);border-bottom-color:#3a362f}.demo--dark .demo__logo--light{display:none}.demo--dark .demo__logo--dark{display:block}.demo--dark .demo__hint{color:#8f897c}.demo--dark .demo__btn{background:#26231d;border-color:#3a362f;color:var(--paper)}.demo--dark .demo__btn:hover{background:#322e27}.demo--dark .demo__btn--primary{background:var(--red);border-color:var(--red);color:var(--white)}.demo--dark .demo__scenarios{background:#26231d;border-color:#3a362f}.demo--dark .demo__scenario{color:#a39d90}.demo--dark .demo__scenario:hover{background:#322e27;color:var(--paper)}.demo--dark .demo__scenario--on{background:#3a362f;color:var(--paper)}.demo--dark .demo__scenario-desc{color:#8f897c}.demo--dark .demo__json{background:#1d1b16;border-color:#3a362f}.demo--dark .demo__json-head{border-bottom-color:#3a362f;color:#8f897c}.demo--dark .demo__json-head strong{color:var(--paper)}.demo--dark .demo__json pre{color:#d9d3c6}.demo .bpe,.demo .bpe-scope{--bpe-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--bpe-font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;--bpe-accent: #2c4a6e;--bpe-accent-hover: #233c5b;--bpe-accent-soft: rgba(44, 74, 110, .1);--bpe-accent-soft-strong: rgba(44, 74, 110, .18);--bpe-hover-outline: rgba(44, 74, 110, .45);--bpe-danger: #d5451b;--bpe-danger-soft: rgba(213, 69, 27, .12);--bpe-radius-sm: 2px;--bpe-radius: 3px;--bpe-radius-lg: 4px;--bpe-bg-canvas: var(--paper-2);--bpe-border: #ded6c6;--bpe-border-strong: var(--paper-3)}.demo .bpe[data-appearance=light],.demo .bpe-scope[data-appearance=light]{--bpe-bg: var(--white);--bpe-bg-subtle: #f7f3ea;--bpe-bg-muted: var(--paper);--bpe-bg-elevated: var(--white);--bpe-fg: var(--ink);--bpe-fg-secondary: var(--ink-2);--bpe-fg-muted: var(--ink-3)}.demo .bpe[data-appearance=dark],.demo .bpe-scope[data-appearance=dark]{--bpe-bg: #1d1b16;--bpe-bg-subtle: #232019;--bpe-bg-muted: #2a2721;--bpe-bg-canvas: #100f0c;--bpe-bg-elevated: #26231d;--bpe-fg: #e8e2d5;--bpe-fg-secondary: #b8b2a4;--bpe-fg-muted: #8f897c;--bpe-border: #35312a;--bpe-border-strong: #464138;--bpe-accent: #6f9fd8;--bpe-accent-hover: #85b0e2;--bpe-accent-soft: rgba(111, 159, 216, .14);--bpe-accent-soft-strong: rgba(111, 159, 216, .24)}