.od-stream-demo{background:var(--od-surface);--od-preview-canvas:#fff}:root[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);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-rate{color:var(--od-text-secondary);font:11px var(--od-font-code);white-space:nowrap;margin-right:8px}.od-demo-rate-control{grid-template-columns:64px 84px;align-items:center;gap:8px;margin-right:8px;display:grid}.od-demo-rate-control [data-slot=slider]{min-width:0}.od-example-picker.od-example-picker-compact{min-width:0;max-width:210px;height:28px;min-height:28px;font:11px var(--od-font-code);-webkit-user-select:none;user-select:none;background:0 0;border:0;border-radius:4px;gap:8px;padding:4px 8px}.od-example-picker-compact>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.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-example-menu[data-compact=true] .od-menu-check{top:10px}.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-progress{background:var(--od-accent-soft);height:3px}.od-stream-progress>span{background:var(--od-accent);transform-origin:0;width:100%;height:100%;transition:transform .18s linear;display:block}.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)}.od-hero-preview{background:var(--od-preview-canvas);color:var(--od-text);color-scheme:inherit}.od-hero-code .od-source-editor{flex:1;min-height:0}.od-hero-code .cm-editor{height:100%;min-height:0;font-size:11px}.od-hero-code .cm-scroller{overscroll-behavior:contain;height:100%;min-height:0;max-height:none;overflow-y:auto}.od-hero-code .cm-content{min-height:100%;padding-block:16px;font-size:11px;line-height:1.85}.od-hero-code .cm-gutters{font-size:11px}.od-hero-output{background:var(--od-preview-canvas);overscroll-behavior:contain;flex:1;height:100%;min-height:0;max-height:100%;padding:16px 24px;overflow-y:auto}.od-hero-demo-fallback{grid-template-columns:1fr 1fr;height:725px;display:grid;overflow:hidden}.od-hero-demo-fallback pre{background:var(--od-surface-subtle);color:var(--od-text);font:11px/1.85 var(--od-font-code);margin:0;padding:24px;overflow:auto}.od-hero-meta{color:var(--od-text-secondary);font:11px var(--od-font-code);flex-wrap:wrap;gap:16px;margin-top:24px;display:flex}.od-hero-meta span+span:before{content:"·";margin-right:16px}.od-example-card .od-column-label{margin-bottom:12px;display:block}.od-example-card .od-text-link{margin-top:16px;font-size:13px;display:inline-block}.od-open-line{justify-content:space-between;align-items:center;gap:24px;padding-block:64px;display:flex}.od-open-line h2{font:500 28px/1.2 var(--od-font-display);letter-spacing:-.025em;margin:0 0 12px}.od-open-line p{color:var(--od-text-secondary);margin:0}@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-rate-control{grid-template-columns:64px minmax(0,1fr);width:100%;margin:0}.od-demo-actions button[data-slot=button]{gap:4px;padding-inline:6px;font-size:11px}.od-demo-rate{margin-right:0;font-size:10px}.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)}.od-hero-output{padding:20px}.od-open-line{flex-direction:column;align-items:start;padding-block:48px}}.od-feature-icon{color:var(--od-accent);margin-bottom:16px}.od-runtime-diagram{border:1px solid var(--od-border);background:var(--od-surface-subtle);border-radius:8px;margin-block:36px;padding:28px}.od-prefix-graphic{font:12px var(--od-font-code);gap:4px;margin-bottom:28px;display:flex}.od-prefix-graphic>span{border-radius:4px;padding:16px}.od-prefix-cached{background:var(--od-surface-muted);color:var(--od-text-secondary);flex:3;justify-content:space-between;display:flex}.od-prefix-cached small{font:inherit;color:var(--od-text-muted)}.od-prefix-new{background:var(--od-accent-soft);color:var(--od-link);border:1px solid var(--od-accent-border);white-space:nowrap;flex:1}.od-runtime-path{justify-content:space-between;align-items:center;gap:24px;display:flex}.od-runtime-path>span{flex-shrink:0;align-items:center;gap:12px;font-size:14px;display:flex}.od-runtime-connector{background:var(--od-border-strong);flex:1;min-width:24px;height:1px;position:relative}.od-runtime-connector:after{content:"";border-top:1px solid var(--od-border-strong);border-right:1px solid var(--od-border-strong);width:5px;height:5px;position:absolute;top:-2px;right:0;transform:rotate(45deg)}.od-runtime-path svg{color:var(--od-accent);flex-shrink:0}.od-runtime-details{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;display:grid}.od-runtime-details h3{font:500 19px var(--od-font-display);margin:0 0 12px}.od-runtime-details p{color:var(--od-text-secondary);margin:0 0 12px;font-size:14px;line-height:1.6}.od-runtime-details strong{color:var(--od-text);font-weight:500}.od-virtual-graphic{gap:4px;margin-block:16px;display:flex}.od-virtual-graphic i{border:1px dashed var(--od-border-strong);border-radius:2px;width:28px;height:16px}.od-virtual-graphic [data-visible]{border:1px solid var(--od-accent-border);background:var(--od-accent-soft)}.od-example-card .od-category{align-items:center;gap:7px;display:flex}@media (max-width:767px){.od-runtime-diagram{padding:16px}.od-runtime-path,.od-runtime-details{grid-template-columns:minmax(0,1fr);gap:24px;display:grid}.od-runtime-connector,.od-prefix-cached small{display:none}}