.od-stream-demo{background:var(--od-surface);--od-preview-canvas:#fff;border-radius:12px}:root:is(.dark,[data-theme=dark]) .od-stream-demo{--od-preview-canvas:#171717}.od-hero-demo-toolbar{border-bottom:1px solid var(--od-border);background:var(--od-surface-subtle);border-radius:12px 12px 0 0;justify-content:space-between;align-items:center;gap:16px;min-height:40px;padding:4px 16px;display:flex}.od-demo-caption{min-width:0;max-width:100%;font:11px var(--od-font-code);align-items:center;gap:5px;display:flex}.od-demo-caption i{background:var(--od-border-strong);border-radius:50%;width:7px;height:7px}.od-demo-caption>span{margin-left:12px}.od-demo-actions{background:0 0;align-items:center;gap:8px;display:flex}.od-demo-actions button[data-variant=ghost]{box-shadow:none;background:0 0;border:0}.od-demo-actions button[data-variant=ghost]:hover{color:var(--od-link)}.od-demo-actions button[data-slot=button]{height:28px;min-height:28px;padding:4px 9px;font-size:12px}.od-stream-demo .od-hero-demo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:700px;display:grid}.od-hero-code,.od-hero-preview{flex-direction:column;min-width:0;min-height:0;display:flex}.od-hero-code{border-right:1px solid var(--od-border);background:var(--od-surface-subtle);border-bottom-left-radius:11px}.od-hero-preview{background:var(--od-preview-canvas);color:var(--od-text);color-scheme:inherit;border-bottom-right-radius:11px}.od-hero-code .od-source-editor{flex:1;min-height:0}.od-hero-code .monaco-editor{height:100%;min-height:0;font-size:11px}.od-hero-output{background:var(--od-preview-canvas);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overscroll-behavior:contain;flex:1;height:100%;min-height:0;max-height:100%;padding:16px 24px;overflow-y:auto}.od-source-editor{min-width:0;height:100%;min-height:0;position:relative;overflow:hidden}.od-source-editor[data-appearance=subtle]{--od-code-canvas:var(--od-surface-subtle);--od-code-text:var(--od-text);--od-code-keyword:#4935d0;--od-code-string:#16794b;--od-code-number:#9a5b00;--od-code-comment:var(--od-text-muted);--od-code-active:var(--od-surface-muted);--od-code-selection:var(--od-accent-border)}:root:is(.dark,[data-theme=dark]) .od-source-editor[data-appearance=subtle]{--od-code-keyword:#c5a7ff;--od-code-string:#91d7af;--od-code-number:#f2b685}.od-code-upcoming{opacity:.3}.od-example-picker{border:1px solid var(--od-border-strong);background:var(--od-surface);min-width:200px;color:var(--od-text);font:500 14px var(--od-font-body);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;gap:24px;padding:10px 12px;display:inline-flex}.od-example-picker:focus-visible{outline:2px solid var(--od-focus);outline-offset:2px}.od-example-picker.od-example-picker-compact{border:1px solid var(--od-border-strong);background:var(--od-surface);min-width:0;max-width:210px;height:28px;min-height:28px;font:11px var(--od-font-code);-webkit-user-select:none;user-select:none;border-radius:4px;gap:8px;padding:4px 8px}.od-example-picker-compact>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.od-example-menu{min-width:240px;max-height:min(600px,75vh);overflow-y:auto}.od-example-detail{color:var(--od-text-secondary);font:11px var(--od-font-code);white-space:nowrap;margin-left:auto}.od-example-menu[data-compact=true]{min-width:min(340px,100vw - 32px)}.od-example-menu[data-compact=true] .od-menu-item{min-height:36px;font:12px var(--od-font-code);align-items:center;gap:20px;padding-block:7px;display:flex}.od-render-mode-picker{min-height:28px;color:var(--od-text-secondary);font:11px var(--od-font-code);cursor:pointer;background:0 0;border:0;border-radius:4px;align-items:center;gap:8px;padding:4px 8px;display:inline-flex}.od-render-mode-picker:hover,.od-render-mode-picker[data-state=open]{background:var(--od-surface-muted);color:var(--od-text)}.od-render-mode-picker:focus-visible{outline:2px solid var(--od-focus);outline-offset:2px}.od-render-mode-menu .od-menu-item[data-disabled]{opacity:.45;cursor:not-allowed}.od-render-mode-note{max-width:220px;color:var(--od-text-secondary);margin:8px;font-size:12px}.od-appearance-trigger{justify-content:flex-start;width:100%}.od-appearance-trigger[aria-expanded=true] svg{transform:rotate(90deg)}.od-appearance fieldset{border:0;gap:16px;min-width:0;margin:0;padding:4px 16px 16px;display:grid}.od-controls .od-demo-settings .od-appearance fieldset{gap:10px;padding:8px 0 0}.od-appearance fieldset:disabled{opacity:.55}.od-appearance label,.od-appearance-field{gap:8px;font-size:12px;display:grid}.od-appearance-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.od-appearance input{min-height:36px}.od-appearance input[type=color]{padding:4px}.od-large-source{padding:20px}.od-large-source pre{max-height:360px;font:12px/1.6 var(--od-font-code);white-space:pre-wrap;color:#b8bece;overflow:hidden}.od-jump{z-index:45;border-radius:8px;position:fixed;bottom:24px;right:24px}.od-demo-workspace{box-sizing:border-box;width:min(calc(100% - 2 * var(--od-page-gutter,24px)), var(--od-page-max,1200px));margin:24px auto 64px}.od-demo-workspace>.od-stream-demo{border:1px solid var(--od-border)}.od-demo-extra-controls{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.od-workbench-loading{border:1px solid var(--od-border);background:var(--od-surface-subtle);height:744px;color:var(--od-text-secondary);font:12px var(--od-font-code);border-radius:12px;place-items:center;display:grid}.demo-host{max-width:100%}@media (max-width:899px){.od-hero-demo-toolbar{flex-wrap:wrap;row-gap:4px}.od-demo-actions{flex-wrap:wrap}}@media (max-width:767px){.od-hero-demo-toolbar{flex-wrap:wrap;align-content:center;height:112px}.od-demo-actions{flex-wrap:wrap;margin-left:0}.od-demo-actions button[data-slot=button]{gap:4px;padding-inline:6px;font-size:11px}.od-stream-demo .od-hero-demo{grid-template-rows:240px 700px;grid-template-columns:minmax(0,1fr);height:940px}.od-hero-code{border-right:0;border-bottom:1px solid var(--od-border);border-bottom-left-radius:0}.od-hero-preview{border-bottom-left-radius:11px}.od-hero-output{padding:20px}.od-workbench-loading{height:1056px}}