html,body,#root,.app{width:100dvw;height:100dvh;margin:0;padding:0;overflow:hidden;overscroll-behavior-x:none}input[type=checkbox]{accent-color:#4A7DFF}.demo-toolbar{display:flex;position:relative;align-items:center;gap:8px;padding:8px 12px;background:#f5f5f5;border-bottom:1px solid #ebebeb;flex-wrap:wrap}.demo-toolbar>button{padding:6px 12px;border:1px solid #d9d9d9;border-radius:6px;background:#fff;color:#333;font-size:13px;font-family:inherit;cursor:pointer}.demo-toolbar>button:hover:not(:disabled){background:#4a7dff;color:#fff;border-color:#4a7dff}.demo-toolbar>button.active{background:#4a7dff;color:#fff;border-color:#4a7dff}.demo-toolbar>button:disabled{opacity:.5;cursor:not-allowed}.demo-toolbar>.label{font-size:13px;font-weight:500}.demo-toolbar>.status{font-size:12px;color:#555}.demo-toolbar>.separator{width:1px;height:20px;background:#ddd}.demo-toolbar>input{width:70px;padding:4px 8px;border:1px solid #ccc;border-radius:4px;font-size:13px}.info-panel{display:block;flex:0 0 var(--demo-info-panel-width, 200px);width:var(--demo-info-panel-width, 200px);min-height:0;background:#fff;border-left:1px solid #ebebeb;font-size:13px}.info-panel>.info-panel-toggle{display:none}.info-panel .info-panel-close{display:none}.info-panel-body{box-sizing:border-box;height:100%;overflow-y:auto;padding:8px}.info-panel.info-panel-content-column>.info-panel-body{display:flex;flex-direction:column;padding:var(--demo-info-panel-body-padding, 8px)}.info-panel h3{margin:0 0 8px;font-size:14px}.demo-toolbar:has(>.info-panel-toolbar-toggle){padding-right:52px}.demo-toolbar>.info-panel-toolbar-toggle{position:absolute;top:8px;right:12px;display:none;box-sizing:border-box;width:29px;height:29px;align-items:center;justify-content:center;padding:0;border:1px solid #ccc;border-radius:4px;background:#fff;color:#333;cursor:pointer}.demo-toolbar>.info-panel-toolbar-toggle:hover,.demo-toolbar>.info-panel-toolbar-toggle:focus-visible{border-color:#4a7dff;background:#4a7dff;color:#fff;outline:0}.demo-toolbar>.info-panel-toolbar-toggle:focus-visible{box-shadow:0 0 0 2px #4a7dff40}@media(max-width:720px){.info-panel{display:none}.info-panel.show-on-mobile{display:block;flex:0 0 0;width:0;min-width:0;min-height:0;background:transparent;border:0;pointer-events:none}.info-panel.show-on-mobile>.info-panel-toggle{position:fixed;top:8px;right:8px;z-index:6;display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid #ccc;border-radius:4px;background:#fff;box-shadow:0 2px 8px #0000001f;cursor:pointer;pointer-events:auto}.info-panel.has-toolbar-toggle>.info-panel-toggle{display:none}.info-panel.show-on-mobile>.info-panel-body{position:fixed;top:0;right:0;z-index:7;display:block;width:min(360px,100%);height:100vh;height:100dvh;margin:0;padding:52px 16px 16px;border:1px solid #ebebeb;border-width:0 0 0 1px;background:#fff;box-shadow:0 8px 24px #00000029;pointer-events:auto;transform:translate(100%);visibility:hidden;transition:transform .2s ease-out,visibility 0s linear .2s}.info-panel.show-on-mobile .info-panel-close{position:absolute;top:8px;right:8px;display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;padding:0;border:1px solid #ccc;border-radius:4px;background:#fff;color:#333;cursor:pointer}.info-panel-close:hover,.info-panel-close:focus-visible{border-color:#4a7dff;background:#4a7dff;color:#fff;outline:0}.info-panel-close:focus-visible{box-shadow:0 0 0 2px #4a7dff40}.info-panel.show-on-mobile.is-open>.info-panel-body{transform:translate(0);visibility:visible;transition:transform .2s ease-out}.demo-toolbar>.info-panel-toolbar-toggle.show-on-mobile{display:inline-flex;z-index:6}}.generative-ui{position:relative;height:100%;font-family:system-ui,-apple-system,Segoe UI,sans-serif;--kritzel-selection-resize-handle-visibility: hidden}.generative-ui__editor{display:block;width:100%;height:100%}.welcome{position:absolute;inset:0;display:grid;place-items:center;overflow:auto;pointer-events:none;transition:opacity .24s ease-out,transform .24s ease-out}.welcome--hidden{visibility:hidden;opacity:0;transform:scale(.98);transition:opacity .24s ease-out,transform .24s ease-out,visibility 0s .24s}.welcome__content{max-width:640px;padding:24px 24px 96px;color:#18181b}.welcome__content form,.welcome__connected,.welcome__example{pointer-events:auto}.welcome__eyebrow{margin:0;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gen-ui-accent)}.welcome__title{margin:12px 0 20px;font-size:52px;line-height:1.05;letter-spacing:-.03em}.welcome__hint{margin:0 0 24px;font-size:18px;line-height:1.5;color:#52525b}.welcome__label{display:block;margin:0 0 8px;font-size:14px;font-weight:600;color:#3f3f46}.welcome__providers{display:inline-flex;gap:2px;margin-bottom:10px;padding:3px;border-radius:10px;background:#f4f4f5}.welcome__provider{height:30px;padding:0 12px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:14px;font-weight:500;color:#52525b;cursor:pointer}.welcome__provider[aria-pressed=true]{background:#fff;color:#18181b;box-shadow:0 1px 2px #14121f1f}.welcome__key-row{display:flex;gap:8px}.welcome__key{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid #e4e4e7;border-radius:12px;background:#fff;font:inherit;font-size:16px;color:#18181b}.welcome__key:focus{border-color:var(--gen-ui-accent);outline:2px solid color-mix(in srgb,var(--gen-ui-accent) 25%,transparent)}.welcome__connect{height:44px;padding:0 18px;border:0;border-radius:12px;background:var(--gen-ui-accent);font:inherit;font-size:15px;font-weight:600;color:#fff;cursor:pointer}.welcome__connect:hover{background:var(--gen-ui-accent-hover)}.welcome__note{margin:8px 0 0;font-size:13px;line-height:1.5;color:#71717a}.welcome__note a,.welcome__change{padding:0;border:0;background:none;font:inherit;color:var(--gen-ui-accent);cursor:pointer}.welcome__error{margin:8px 0 0;font-size:14px;color:#b91c1c}.welcome__connected{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;background:#f4f4f5;font-size:16px;color:#3f3f46}.welcome__connected:before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e}.welcome__connected .welcome__change{margin-left:auto}.welcome__examples{display:grid;gap:10px;margin:24px 0 0;padding:0;list-style:none}.welcome__example{width:100%;padding:12px 16px;border:0;border-radius:12px;background:#f4f4f5;font:inherit;font-size:16px;text-align:left;color:#3f3f46;cursor:pointer}.welcome__example:hover{background:#e4e4e7}.welcome__footer{margin:24px 0 0;font-size:15px;line-height:1.5;color:#52525b}.welcome__footer kbd{padding:2px 6px;border-radius:6px;background:#e4e4e7;font:inherit;font-size:.9em}.ui-preview{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:#fff;animation:ui-preview-in .18s ease-out}@keyframes ui-preview-in{0%{opacity:0;transform:scale(.98)}}.ui-preview__bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 8px 0 16px;border-bottom:1px solid #e4e4e7;font-size:14px;font-weight:500;color:#3f3f46}.ui-preview__close{margin-left:auto;height:30px;padding:0 12px;border:0;border-radius:8px;background:#f4f4f5;font:inherit;color:inherit;cursor:pointer}.ui-preview__frame{flex:1;width:100%;border:0}