.hero-demo{width:min(100%,calc((100svh - 246px) * 2.2 + 24px));margin-inline:auto;scroll-margin-top:96px;text-align:left;background:var(--demo-chrome-toolbar)}.demo-stage{position:relative;display:grid;grid-template-columns:900fr 420fr;gap:8px;padding:0 8px 8px;overflow:hidden}.demo-article,.demo-desktop,.demo-mobile,.demo-panel{position:relative;min-width:0;height:100%;overflow:hidden}.demo-article{height:auto;padding-bottom:40px;border-radius:8px;background:light-dark(#ffffff,#18181b);box-shadow:0 1px 3px #00000026}.demo-article:after{content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--demo-chrome-border);pointer-events:none}.demo-desktop{height:auto;aspect-ratio:900/600}.demo-sidebar{position:relative;min-width:0;min-height:0}.demo-sidebar-header{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:8px;height:40px;padding:0 8px;color:var(--demo-chrome-text);font:500 13px/20px -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;pointer-events:none}.demo-sidebar-header>img,.demo-sidebar-header>svg{width:16px;height:16px;flex:none}.demo-sidebar-header>svg{margin-left:8px;color:var(--demo-chrome-icon)}.demo-sidebar-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-panel-viewport{position:absolute;inset:40px 0 0;border-radius:8px;overflow:hidden;background:var(--background)}.demo-panel{height:auto;aspect-ratio:420/600}.demo-mobile{display:none}.demo-frame{position:absolute;inset:0;display:block;opacity:0;visibility:hidden}.demo-frame[data-active=true],.demo-frame[data-underlay=true]{opacity:1;visibility:visible}.demo-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.demo-generation{position:absolute;inset:0;visibility:hidden;opacity:0;overflow:hidden;background:var(--background)}.demo-generation[data-active=true]{visibility:visible}.demo-slice{position:absolute;inset:0;display:block}.demo-slice img{display:block;width:100%;height:auto}.demo-note-surface img{height:100%;object-fit:fill}.demo-note-surface{transform-origin:top}.hero-demo[data-playback=playing] .demo-note-surface,.hero-demo[data-playback=playing] .demo-note-tail{will-change:transform}.hero-demo[data-playback=playing] .demo-note-body{will-change:clip-path}.demo-pointer{z-index:2;position:absolute;left:0;top:0;opacity:0;pointer-events:none}.hero-demo[data-playback=playing] .demo-pointer{will-change:transform}.hero-demo[data-playback=playing] .demo-article{will-change:opacity}.hero-demo[data-playback=idle] .demo-article,.hero-demo[data-playback=reduced] .demo-article{opacity:.6}.hero-demo[data-playback=playing] .demo-selection-line{will-change:transform,opacity}.hero-demo[data-playback=idle] .demo-pointer,.hero-demo[data-playback=reduced] .demo-pointer{z-index:2;visibility:hidden}@media (max-width:1023px){.hero-demo{width:min(100%,calc((100svh - 246px) * .7 + 16px));scroll-margin-top:80px}.demo-stage{display:block}.demo-desktop{display:none}.demo-mobile{display:block;height:auto;aspect-ratio:420/600}.demo-sidebar{box-sizing:content-box;aspect-ratio:420/600;padding-top:40px}.demo-article{position:absolute;inset:0 8px 8px;aspect-ratio:auto}.demo-article,.demo-sidebar{visibility:hidden;clip-path:inset(50%)}.demo-article[data-mobile-visible=true],.demo-sidebar[data-mobile-visible=true]{visibility:visible;clip-path:none}}@media (prefers-reduced-motion:reduce){.demo-frame{transition:none}.demo-pointer{z-index:2;display:none}}.hero-demo{--demo-chrome-frame:light-dark(#d3e3fd,#202124);--demo-chrome-toolbar:light-dark(#ffffff,#35363a);--demo-chrome-address:light-dark(#edf2fa,#202124);--demo-chrome-text:light-dark(#1f1f1f,#e3e3e3);--demo-chrome-icon:light-dark(#5e5e5e,#c7c7c7);--demo-chrome-border:light-dark(#dadce0,#47494c)}.demo-browser{background:var(--demo-chrome-frame);color:var(--demo-chrome-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;pointer-events:none}.demo-browser svg{display:block;width:20px;height:20px;flex:none;color:var(--demo-chrome-icon)}.demo-browser-tabs{display:flex;align-items:flex-end;gap:8px;height:40px;padding:0 12px;background:var(--demo-chrome-frame)}.demo-window-controls{display:flex;gap:8px;align-self:center;flex:none;margin-right:12px}.demo-window-controls i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 1px #00000012}.demo-window-controls i:nth-child(2){background:#febc2e}.demo-window-controls i:nth-child(3){background:#28c840}.demo-new-tab,.demo-tab-search{display:grid;place-items:center;width:28px;height:28px;margin-bottom:6px;flex:none}.demo-tab-search{border-radius:8px;background:var(--demo-chrome-address)}.demo-tab-search svg{width:16px;height:16px}.demo-browser-tab{position:relative;display:flex;align-items:center;gap:8px;width:224px;min-width:0;height:34px;padding:0 12px;background:var(--demo-chrome-toolbar);border-radius:12px 12px 0 0;font-size:13px;line-height:20px}.demo-browser-tab:after,.demo-browser-tab:before{content:"";position:absolute;bottom:0;width:8px;height:8px}.demo-browser-tab:before{left:-8px;background:radial-gradient(circle at top left,transparent 7.5px,var(--demo-chrome-toolbar) 8px)}.demo-browser-tab:after{right:-8px;background:radial-gradient(circle at top right,transparent 7.5px,var(--demo-chrome-toolbar) 8px)}.demo-browser-tab>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-browser-tab>svg{width:16px;height:16px}.demo-browser-tab>svg:last-child{width:14px;height:14px}.demo-browser-address{display:flex;align-items:center;gap:8px;height:46px;padding:6px;border-radius:12px 12px 0 0;background:var(--demo-chrome-toolbar)}.demo-browser-nav{display:flex;align-items:center;gap:2px;flex:none}.demo-browser-nav>svg{box-sizing:content-box;padding:7px}.demo-browser-nav>svg:nth-child(2){opacity:.4}.demo-omnibox{display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:34px;border-radius:999px;padding:0 10px 0 5px;background:var(--demo-chrome-address);font-size:14px;line-height:20px}.demo-site-info{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--demo-chrome-toolbar)}.demo-site-info>svg{width:16px;height:16px}.demo-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--demo-chrome-icon)}.demo-url>span{color:var(--demo-chrome-text)}.demo-browser-actions{display:flex;align-items:center;gap:2px;flex:none}.demo-browser-menu,.demo-extension-icon,.demo-extensions-menu{display:grid;place-items:center;width:34px;height:34px;flex:none}.demo-toolbar-divider{width:1px;height:20px;margin:0 5px;background:var(--demo-chrome-border)}@media (max-width:639px){.demo-extensions-menu,.demo-omnibox>.demo-bookmark,.demo-tab-search,.demo-toolbar-divider{display:none}.demo-browser-tab{flex:1}.demo-browser-address{gap:4px}.demo-browser-nav{gap:0}.demo-browser-nav>svg{width:18px;height:18px;padding:5px}.demo-browser-menu,.demo-extension-icon{width:28px}}@media (prefers-reduced-motion:reduce){.demo-desktop,.demo-panel .demo-frame{transition:none}}.demo-pointer img{display:block;max-width:none}.demo-clock{width:0;height:0}.demo-clock,.demo-selection-line{position:absolute;opacity:0;pointer-events:none}.demo-selection-line{transform:scaleX(0);transform-origin:left center;background:color-mix(in srgb,Highlight 32%,transparent)}@media (prefers-reduced-motion:reduce){.demo-selection-line{display:none}}.demo-manual{position:absolute;inset:0;visibility:hidden;pointer-events:none}.demo-manual[data-active=true]{visibility:visible}.demo-manual-line{position:absolute;inset:0}.demo-caret{position:absolute;top:0;left:0;width:1px;background:CanvasText}.demo-note-entry,.demo-note-entry-card-clip,.demo-note-entry-reveal{position:absolute;inset:0;pointer-events:none}.demo-note-entry{visibility:hidden;overflow:hidden}.demo-note-entry[data-active=true]{visibility:visible}.hero-demo[data-playback=playing] .demo-note-entry[data-active=true] .demo-note-entry-card,.hero-demo[data-playback=playing] .demo-note-entry[data-active=true] .demo-note-entry-highlights{will-change:transform}@media (prefers-reduced-motion:reduce){.demo-note-entry{display:none}}.demo-celebration{position:absolute;z-index:2;pointer-events:none;visibility:hidden}.hero-demo[data-playback=playing] .demo-celebration[data-state=playing]{visibility:visible}@media (prefers-reduced-motion:reduce){.demo-celebration{display:none}}