:where(.app,.app *){box-sizing:border-box;margin:0;padding:0}.app::-webkit-scrollbar{width:6px;height:6px}.app ::-webkit-scrollbar{width:6px;height:6px}.app::-webkit-scrollbar-track{background:0 0}.app ::-webkit-scrollbar-track{background:0 0}.app::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.app ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.app{--page-bg:var(--openui-foreground);--surface:var(--openui-foreground);--surface-hover:var(--openui-highlight);--border:var(--openui-border-default);--border-strong:var(--openui-border-interactive);--text-primary:var(--openui-text-neutral-primary);--text-secondary:var(--openui-text-neutral-secondary);--text-tertiary:var(--openui-text-neutral-tertiary);--btn-primary-bg:var(--openui-interactive-accent-default);--btn-primary-text:var(--openui-text-accent-primary);--btn-primary-hover:var(--openui-interactive-accent-hover);--btn-ghost-hover:var(--openui-highlight);--input-bg:var(--openui-foreground);--input-border:var(--openui-border-interactive);--input-focus-ring:var(--openui-border-accent-emphasis);--chip-bg:var(--openui-highlight-subtle);--chip-hover:var(--openui-highlight);--chip-border:var(--openui-border-default);--code-bg:var(--openui-inverted-background);--code-text:var(--openui-text-accent-primary);--code-text-secondary:var(--openui-text-accent-secondary);--code-text-tertiary:var(--openui-text-accent-tertiary);--code-hover:color-mix(in srgb,var(--openui-text-accent-primary)8%,transparent);--code-hover-strong:color-mix(in srgb,var(--openui-text-accent-primary)14%,transparent);--code-border:color-mix(in srgb,var(--openui-text-accent-primary)12%,transparent);--panel-header-bg:var(--openui-highlight-subtle);--panel-header-border:var(--openui-border-default);--modal-backdrop:var(--openui-overlay);--modal-bg:var(--openui-foreground);--modal-border:var(--openui-border-default);--modal-shadow:var(--openui-shadow-xl);--scrollbar-thumb:var(--openui-text-neutral-tertiary);--font-sans:var(--openui-font-body);--font-mono:var(--openui-font-code);--playground-focus-ring:color-mix(in srgb,var(--openui-border-accent-emphasis)24%,transparent);--playground-success-tint:color-mix(in srgb,var(--openui-success-background)16%,transparent);--playground-success-border:color-mix(in srgb,var(--openui-border-success-emphasis)36%,transparent);--playground-success-text:var(--openui-text-success-primary);--playground-danger-tint:color-mix(in srgb,var(--openui-danger-background)14%,transparent);--playground-danger-border:color-mix(in srgb,var(--openui-border-danger-emphasis)36%,transparent);--playground-danger-text:var(--openui-text-danger-primary);height:100vh;font-family:var(--font-sans);background-color:var(--page-bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;transition:background-color .2s,color .2s;display:flex}.app-body{flex:1;min-height:0;display:flex;overflow:hidden}.content-wrapper{flex-direction:column;flex:1;min-width:0;padding:32px 40px 40px;display:flex;overflow:hidden}.split-screen{flex:1;grid-template-columns:2fr 3fr;gap:16px;min-height:0;display:grid;overflow:hidden}.panel{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;min-height:0;display:flex;overflow:hidden}.panel-header{background:var(--panel-header-bg);border-bottom:1px solid var(--panel-header-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.panel-title{color:var(--text-secondary);letter-spacing:.04em;text-transform:uppercase;font-size:12px;font-weight:600}.panel-actions{align-items:center;gap:4px;display:flex}.panel-icon-btn{width:28px;height:28px;color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}.panel-icon-btn:hover{background:var(--btn-ghost-hover);color:var(--text-primary)}.empty-state{text-align:center;color:var(--text-tertiary);flex-direction:column;justify-content:center;align-items:center;gap:8px;height:100%;padding:40px 24px;display:flex}.empty-state-icon{opacity:.3;margin-bottom:4px}.empty-state-text{font-size:13px;line-height:1.5}.prompt-section{flex-direction:column;align-items:center;gap:16px;padding:48px 0 32px;display:flex}.prompt-heading{letter-spacing:-.03em;color:var(--text-primary);text-align:center;font-size:28px;font-weight:600}.prompt-container{background:var(--input-bg);border:1px solid var(--input-border);width:100%;max-width:760px;box-shadow:var(--openui-shadow-m);border-radius:14px;flex-direction:column;transition:border-color .15s;display:flex}.prompt-container:focus-within{border-color:var(--input-focus-ring);box-shadow:0 0 0 3px var(--playground-focus-ring)}.prompt-textarea{resize:none;width:100%;font-family:var(--font-sans);color:var(--text-primary);background:0 0;border:none;outline:none;min-height:64px;max-height:240px;padding:16px 16px 0;font-size:15px;line-height:1.5;overflow-y:auto}.prompt-textarea::placeholder{color:var(--text-tertiary)}.prompt-textarea:disabled{opacity:.4;cursor:not-allowed}.prompt-actions{justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;display:flex}.model-select{background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;border-radius:8px;outline:none;padding:5px 24px 5px 8px;font-size:12px;font-weight:500;transition:border-color .15s}.model-select:focus{border-color:var(--openui-border-interactive-emphasis)}.model-select:disabled{opacity:.4;cursor:not-allowed}.send-btn{background:var(--btn-primary-bg);color:var(--btn-primary-text);font-family:var(--font-sans);cursor:pointer;border:none;border-radius:8px;flex-shrink:0;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:500;transition:background .15s,opacity .15s;display:flex}.send-btn:hover:not(:disabled){background:var(--btn-primary-hover)}.send-btn:disabled{opacity:.35;cursor:not-allowed}.stop-btn{color:var(--text-secondary);border:1px solid var(--border-strong);font-family:var(--font-sans);cursor:pointer;background:0 0;border-radius:8px;flex-shrink:0;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:500;transition:background .15s,color .15s,border-color .15s;display:flex}.stop-btn:hover{background:var(--btn-ghost-hover);color:var(--text-primary);border-color:var(--openui-border-interactive-emphasis)}.chips-row{flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:760px;display:flex}.chip{background:var(--chip-bg);border:1px solid var(--chip-border);color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;white-space:nowrap;border-radius:20px;padding:6px 14px;font-size:13px;transition:background .15s,color .15s,border-color .15s,transform .1s}.chip:hover{background:var(--chip-hover);color:var(--text-primary);border-color:var(--openui-border-interactive);transform:translateY(-1px)}.chip:disabled{opacity:.4;cursor:not-allowed;transform:none}.error-banner{background:var(--playground-danger-tint);border:1px solid var(--playground-danger-border);color:var(--playground-danger-text);border-radius:8px;margin:0 0 16px;padding:12px 16px;font-size:13px;line-height:1.5}@media (max-width:768px){.app{height:100dvh;overflow:hidden}.app-body{flex-direction:column;overflow:hidden auto}.content-wrapper{flex:none;padding:20px 16px 40px;overflow:visible}.split-screen{flex-direction:column;gap:12px;min-height:0;display:flex;overflow:visible}.panel{flex-shrink:0;height:380px}.prompt-section{gap:12px;padding:24px 0 20px}.prompt-heading{font-size:20px}.chips-row{gap:6px}.chip{padding:5px 12px;font-size:12px}}