: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-primary: var(--red);--bpe-primary-hover: var(--red-deep);--bpe-primary-fg: var(--white);--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)}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/demo/assets/IBMPlexMono-normal-400-latin-ext-BmRBH3aV.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/demo/assets/IBMPlexMono-normal-400-latin-DMJ8VG8y.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/demo/assets/IBMPlexMono-normal-500-latin-ext-CAhNIIs5.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/demo/assets/IBMPlexMono-normal-500-latin-DSY6xOcd.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url(/demo/assets/IBMPlexSans-normal-400-600-latin-ext-CIII54If.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400 600;font-stretch:100%;font-display:swap;src:url(/demo/assets/IBMPlexSans-normal-400-600-latin-IvpUvPa2.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/demo/assets/Inter-normal-400-800-latin-ext-DO1Apj_S.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/demo/assets/Inter-normal-400-800-latin-Dx4kXJAl.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Playfair Display;font-style:normal;font-weight:500 700;font-display:swap;src:url(/demo/assets/PlayfairDisplay-normal-500-700-latin-ext-CT1r92Rl.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Playfair Display;font-style:normal;font-weight:500 700;font-display:swap;src:url(/demo/assets/PlayfairDisplay-normal-500-700-latin-BOwq7MWX.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;src:url(/demo/assets/SourceSerif4-normal-400-600-latin-ext-CxNHBx-q.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;src:url(/demo/assets/SourceSerif4-normal-400-600-latin-D9elroTD.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400 700;font-display:swap;src:url(/demo/assets/SpaceGrotesk-normal-400-700-latin-ext-D9tNdqV9.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400 700;font-display:swap;src:url(/demo/assets/SpaceGrotesk-normal-400-700-latin-BhU9QXUp.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}