/* Focus clones preserve the grid while rising above the application frame. */
.hero,.hero-demo,.demo-stage,.product-demo,[data-product-demo]{overflow:visible}
[data-product-demo]{position:relative;isolation:isolate}
[data-product-demo]::after{content:"";position:absolute;inset:38px 0 0;z-index:15;border-radius:0 0 16px 16px;background:rgba(8,15,30,.26);opacity:0;pointer-events:none;transition:opacity .5s}
[data-product-demo].demo-is-focused::after{opacity:1}
.demo-focus-overlay{position:absolute!important;z-index:20;pointer-events:none;margin:0!important;transform:translateY(0) scale(1);transform-origin:center;background:var(--surface,#fff);border:1px solid rgba(2,118,219,.35);box-shadow:0 10px 36px rgba(2,20,50,.16);transition:transform .65s cubic-bezier(.22,1,.36,1),box-shadow .65s;overflow:hidden;border-radius:12px;will-change:transform}
.demo-focus-overlay.is-lifted{transform:translateY(-20px) scale(1.2);box-shadow:0 28px 75px rgba(2,20,50,.3)}
.demo-focus-overlay.demo-terminal-grid{background:#111a2b;padding:12px;gap:12px;transform-origin:center 40%}
.demo-focus-overlay.demo-terminal-grid.is-lifted{transform:translateY(-28px) scale(1.15)}
.demo-metrics.demo-home-metrics,.demo-metrics.demo-overview-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.demo-metric small{color:var(--muted,#718095);font-size:10px;display:block}.demo-metric{min-width:0}
.demo-home-metrics .demo-metric{padding:12px}.demo-home-metrics .demo-sparkline{display:none}
.demo-sparkline{height:22px;display:flex;gap:4px;align-items:end;margin-top:10px}
.demo-sparkline i{height:40%;flex:1;background:linear-gradient(0deg,rgba(2,118,219,.12),rgba(2,118,219,.55));border-radius:2px}.demo-sparkline i:nth-child(2n){height:65%}.demo-sparkline i:nth-child(3n){height:90%}
.demo-health{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:14px 0;padding:12px;border:1px solid var(--line,#e4eaf2);border-radius:8px}.demo-health strong{margin-right:auto;font-size:12px}.demo-health>span{font-size:10px}
.demo-section-label{display:flex;justify-content:space-between;align-items:center;gap:8px}.demo-section-label>span{font-size:10px;font-weight:400}
.demo-infrastructure-tabs{display:flex;gap:18px;align-items:center;margin:12px 0 16px;font-size:11px;color:var(--muted,#728099)}.demo-infrastructure-tabs b{background:var(--canvas,#edf4fc);color:#0276db;border-radius:6px;padding:7px 10px}
.demo-workspace-card{border:1px solid var(--line,#e4eaf2);border-radius:10px;padding:12px}.demo-environment-label{font-size:10px;color:var(--muted,#738196);margin:12px 0 8px}.demo-workspace-card .demo-server-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.demo-workspace-card .demo-server-card{padding:10px}
.demo-ui-control{display:inline-block;font-size:10px;color:#0276db;background:rgba(2,118,219,.08);border-radius:4px;padding:5px 8px}.demo-overview-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.demo-overview-panel{padding:14px;border:1px solid var(--line,#e4eaf2);border-radius:10px;background:var(--surface,#fff)}
.demo-process-row{display:grid;grid-template-columns:1fr .7fr .6fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line,#e4eaf2);font-size:10px}.demo-process-row:last-child{border-bottom:0}.demo-process-row b{font-weight:500}
.demo-sidebar-workspace{font-size:10px;color:var(--muted,#718095);padding:8px 10px;display:block}.demo-sidebar-item{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:10px;border-radius:5px;color:var(--muted,#718095)}.demo-sidebar-item.is-active{background:rgba(2,118,219,.1);color:#0276db}.demo-sidebar-item img{width:15px;height:15px;object-fit:contain}.demo-nav-marker{display:block;width:10px;height:10px;border:1px solid currentColor;border-radius:2px}
.demo-model-catalog{font-size:8px;line-height:1.8;color:var(--muted,#718095);margin-top:10px}.demo-ai-layout .demo-snippet{white-space:pre-wrap}
[data-theme=dark] .demo-focus-overlay,[data-theme=dark] .demo-overview-panel{background:var(--surface,#172034)}
@media(max-width:700px){.demo-focus-overlay.is-lifted{transform:translateY(-12px) scale(1.1)}.demo-focus-overlay.demo-terminal-grid.is-lifted{transform:translateY(-16px) scale(1.06)}.demo-metrics.demo-home-metrics,.demo-metrics.demo-overview-metrics{gap:6px}.demo-metric{padding:8px!important}.demo-metric strong{font-size:19px!important}.demo-metric>span{font-size:9px!important}.demo-overview-panels{gap:8px}.demo-overview-panel{padding:9px}.demo-sidebar-item{padding:6px;font-size:9px}.demo-workspace-card{padding:8px}}
@media(max-width:440px){.demo-metric small,.demo-sparkline,.demo-section-label>span,.demo-sidebar-workspace{display:none}.demo-overview-panels{grid-template-columns:1fr}.demo-workspace-card .demo-server-grid{grid-template-columns:1fr}.demo-workspace-card .demo-server-grid:last-child{display:none}.demo-sidebar-item>span:not(.demo-app-icon){display:none}.demo-sidebar-item{justify-content:center}}
@media(prefers-reduced-motion:reduce){.demo-focus-overlay,[data-product-demo]::after{transition:none}.demo-cursor{animation:none!important}}

.demo-content{min-height:430px}.demo-focus-overlay .demo-metric{padding:16px}

.demo-metric-icon{width:21px;height:21px;padding:4px;box-sizing:content-box;background:rgba(2,118,219,.1);border-radius:5px;flex-shrink:0}.demo-overview-metrics .demo-metric>span{display:flex;align-items:center;gap:7px}.demo-overview-metrics .demo-metric{min-height:130px}.demo-overview-metrics .demo-meter{margin-top:16px}

.demo-server-gauges{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.demo-server-gauges>div>span{display:flex;justify-content:space-between;font-size:9px}.demo-server-gauges .demo-meter{margin:5px 0}.demo-cli-heading{display:flex;justify-content:space-between;align-items:center;margin:14px 0 8px;font-size:11px}.demo-cli-heading>span{display:flex;align-items:center;gap:7px;font-size:9px}.demo-broadcast-switch{width:21px;height:11px;border-radius:8px;background:#0276db;position:relative}.demo-broadcast-switch:after{content:"";position:absolute;right:2px;top:2px;width:7px;height:7px;background:white;border-radius:50%}.demo-cli-toolbar{justify-content:flex-start;gap:9px}.demo-terminal-primary{border:2px solid #0276db!important}.demo-inventory-toolbar{display:flex;justify-content:space-between;padding:11px;color:var(--muted);font-size:11px;background:var(--surface-raised);border-radius:6px;margin-bottom:12px}.demo-docker-inventory-row{grid-template-columns:1fr .7fr .65fr 1.2fr}.demo-docker-inventory-row small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.demo-docker-actions{display:flex;gap:8px;color:#0276db;font-size:9px}.demo-docker-actions span:last-child{color:#d8586a}.demo-docker-metrics{font-size:9px;color:var(--muted)}.demo-ai-composer{border:1px solid var(--line);background:var(--surface-raised);padding:13px;border-radius:10px;margin-top:20px;color:var(--muted);font-size:11px}.demo-ai-composer>div{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.demo-ai-composer small{font-size:9px}.demo-send-button{border-radius:50%;display:grid;place-items:center;width:26px;height:26px;background:#0276db;color:white;font-size:17px}.demo-process-header,.demo-process-data{grid-template-columns:.6fr 1.2fr .7fr .7fr;gap:6px}.demo-process-header{color:var(--muted);font-size:9px}.demo-process-data{font-size:9px}@media(max-width:600px){.demo-docker-inventory-row{grid-template-columns:1fr .7fr 1fr}.demo-docker-metrics{display:none}.demo-docker-actions{gap:5px}.demo-cli-heading>span{font-size:8px}}
/* Keep the page stable while switching between differently sized app views. */
.demo-content{height:530px;min-height:530px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
@media(max-width:700px){.demo-content{height:500px;min-height:500px}}
/* Flutter shell: WorkspaceContextToolbar, EnvironmentTabStrip and AIChatWidget. */
.demo-titlebar{justify-content:flex-start;gap:12px}.demo-window-label{font-weight:650;color:var(--text);font-size:11px}.demo-sidebar{padding:10px 8px}.demo-workspace-select{display:flex;align-items:center;gap:8px;min-height:45px;padding:8px 9px;margin-bottom:18px;background:color-mix(in srgb,var(--muted) 9%,var(--surface-raised));border:1px solid var(--line);border-radius:6px;box-shadow:0 2px 4px #0000000d}.demo-workspace-select>svg{width:17px;height:20px;flex-shrink:0;color:var(--blue)}.demo-workspace-select>span{min-width:0;flex:1}.demo-workspace-select small{display:block;font-size:8px;font-weight:400;color:var(--muted);line-height:1.4}.demo-workspace-select strong{display:block;font-size:10px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-workspace-select .demo-workspace-chevron{width:12px;color:var(--muted)}
.demo-main{min-width:0}.demo-contextbar{height:58px;display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface-raised)}.demo-open-tabs{display:flex;gap:6px;align-items:center;min-width:0;overflow:hidden;flex:1}.demo-open-tab{display:flex;align-items:center;gap:7px;flex-shrink:0;border:1px solid transparent;border-radius:5px;background:var(--surface);color:var(--text);font:inherit;font-size:10px;padding:8px 9px;min-height:34px;white-space:nowrap}.demo-open-tab.is-active{border-color:var(--blue);background:var(--surface-raised)}.demo-open-tab svg{width:15px;height:15px}.demo-open-tab strong{font-size:10px;font-weight:600}.demo-environment-badge{background:#15989018;color:#218f91;padding:3px 5px;border-radius:3px;font-size:8px;font-weight:600;letter-spacing:.04em}.demo-tab-close{color:var(--muted);font-size:17px;margin-left:2px;line-height:1}.demo-new-tab{display:grid;place-items:center;width:32px;height:34px;flex-shrink:0;border-radius:5px;border:1px solid var(--line);font-size:20px;color:var(--muted)}.demo-ai-toggle{position:relative;display:grid;place-items:center;flex-shrink:0;width:32px;height:34px;border:1px solid var(--line);border-radius:5px;background:var(--surface);cursor:pointer}.demo-ai-toggle img{width:17px;height:17px}.demo-ai-toggle[aria-expanded=true]{border-color:var(--blue);background:var(--soft-blue)}.demo-ai-toggle:focus-visible,.demo-open-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.demo-click-pointer{position:absolute;width:20px;height:25px;right:9px;top:25px;opacity:0;transform:translate(-44px,42px);pointer-events:none;z-index:5;transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .2s}.demo-ai-click .demo-click-pointer{opacity:1;transform:translate(8px,-7px)}.demo-ai-click .demo-ai-toggle{box-shadow:0 0 0 5px #0276db20}
.demo-view-layout{display:flex;position:relative;overflow:hidden;height:530px}.demo-workarea{flex:1;min-width:0}.demo-ai-panel{width:0;min-width:0;flex-shrink:0;visibility:hidden;overflow:hidden;background:var(--surface);border-left:0 solid var(--line);transition:width .65s cubic-bezier(.22,1,.36,1),visibility .65s}.demo-ai-open .demo-ai-panel{width:36%;visibility:visible;border-left-width:1px}.demo-ai-panel-inner{min-width:245px;padding:18px 14px;text-align:left}.demo-ai-panel-inner>img{width:26px;height:26px;margin-bottom:10px}.demo-ai-panel h3{font-size:13px;line-height:1.3;margin:0 0 7px;font-weight:650}.demo-ai-panel p{font-size:10px;color:var(--muted);line-height:1.6;margin:0 0 20px}.demo-panel-composer{background:var(--surface-raised);border:1px solid var(--line);border-radius:7px;padding:12px;color:var(--muted);font-size:10px;line-height:1.6}.demo-panel-composer>div{display:flex;gap:5px;margin-top:57px;align-items:center}.demo-panel-composer>div>span{border:1px solid var(--line);border-radius:4px;padding:5px 6px;font-size:8px;white-space:nowrap}.demo-panel-composer b{display:grid;place-items:center;margin-left:auto;width:25px;height:25px;background:var(--surface);color:var(--muted);border-radius:5px}.demo-ai-panel h4{font-size:11px;margin:16px 0}.demo-chat-history>div{display:flex;justify-content:space-between;padding:10px 5px;font-size:9px}.demo-chat-history .is-current{color:var(--blue);font-weight:650}.demo-chat-history>div>span:last-child{color:#d95768}.demo-ai-open .demo-docker-metrics{display:none}.demo-ai-open .demo-docker-inventory-row{grid-template-columns:1fr .65fr 1fr}.demo-ai-open .demo-infrastructure-tabs{gap:10px;font-size:9px}
[data-theme=dark] .demo-sidebar-item img,[data-theme=dark] .demo-ai-toggle img,[data-theme=dark] .demo-ai-panel-inner>img{filter:brightness(0) saturate(100%) invert(67%) sepia(52%) saturate(700%) hue-rotate(175deg)}
@media(max-width:900px){.demo-secondary-server{display:none}.demo-ai-open .demo-ai-panel{width:45%}.demo-ai-open .demo-docker-actions{flex-direction:column}.demo-ai-open .demo-docker-inventory-row{grid-template-columns:1fr .65fr}}
@media(max-width:700px){.demo-view-layout{height:500px}.demo-contextbar{height:48px;padding:6px;gap:5px}.demo-open-tab{padding:6px;gap:5px;font-size:9px}.demo-open-tab strong{font-size:9px}.demo-environment-badge{font-size:7px;padding:2px 3px}.demo-new-tab{display:none}.demo-workspace-select{padding:6px 3px;justify-content:center;margin-bottom:14px;min-height:34px}.demo-workspace-select>span,.demo-workspace-chevron{display:none}.demo-sidebar{padding:8px 3px}.demo-ai-open .demo-ai-panel{width:85%;position:absolute;right:0;top:0;bottom:0;box-shadow:-8px 0 25px #0002;z-index:4}.demo-ai-panel-inner{min-width:0;padding:15px 12px}.demo-ai-panel p{font-size:9px}.demo-panel-composer>div{gap:3px}.demo-panel-composer>div>span{padding:5px 3px;font-size:7px}.demo-ai-toggle{width:28px}.demo-open-tabs{gap:4px}}
@media(prefers-reduced-motion:reduce){.demo-ai-panel,.demo-click-pointer{transition:none}.demo-click-pointer{display:none}}
.demo-glow{left:0;right:0}

/* Stagger the hero entrance once each element enters the viewport. */
[data-hero-reveal].reveal-ready{transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1);transition-delay:var(--hero-delay,0ms)}
[data-hero-reveal].reveal-ready:not(.is-visible){opacity:0;transform:translateY(22px)}
.hero .eyebrow{--hero-delay:0ms}.hero-title{--hero-delay:50ms}.hero-description{--hero-delay:100ms}.hero-actions{--hero-delay:150ms}.hero>.container>.platform-note{--hero-delay:190ms}.hero-demo{--hero-delay:230ms}
.hero-demo.reveal-ready{transition-duration:.7s}.hero-demo.reveal-ready:not(.is-visible){transform:translateY(32px)}
/* Native smooth scrolling keeps touch, trackpad and keyboard input intact. */
html{scroll-behavior:smooth;scroll-padding-top:100px}.demo-content{scroll-behavior:smooth}
@media(max-width:700px){html{scroll-padding-top:82px}[data-hero-reveal].reveal-ready:not(.is-visible){transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){html,.demo-content{scroll-behavior:auto}[data-hero-reveal].reveal-ready,[data-hero-reveal].reveal-ready:not(.is-visible){opacity:1;transform:none;transition:none;transition-delay:0s}}
/* Workflow choreography: start raised, then inspect real structured log rows. */
.demo-focus-overlay{transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s}
.demo-focus-overlay.is-lifted{transition-duration:.42s}
.demo-focus-overlay.demo-log-reader.is-lifted{transform:translateY(-16px) scale(1.055)}
[data-active-scene=logs] .demo-content{padding:0;background:var(--surface-raised)}
.demo-log-reader{display:flex;flex-direction:column;height:490px;background:var(--surface-raised);color:var(--text);text-align:left}
.demo-log-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:12px;border-bottom:1px solid var(--line);font-size:10px;flex-shrink:0}
.demo-log-source{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:6px 8px;min-width:105px;border:1px solid var(--line);border-radius:5px;font-size:11px;font-weight:600}
.demo-log-add{color:var(--blue);font-size:19px}.demo-log-actions{display:flex;align-items:center;gap:6px;margin-left:auto}.demo-log-live{font-size:8px;font-weight:750;letter-spacing:.04em}.demo-log-tool{display:grid;place-items:center;width:23px;height:24px;color:var(--muted)}.demo-log-tool svg,.demo-log-tool img{width:13px;height:13px}.demo-log-tool.is-live{background:#179760;color:white}.demo-log-tool.is-paused{background:#d79117;color:#fff}.demo-log-delete{color:#c6384e}.demo-log-limit{font-size:8px;color:var(--muted);white-space:nowrap}
.demo-log-lines{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:10px 0}
.demo-log-entry{--log-tone:var(--blue);border-left:2px solid var(--log-tone);padding:9px 12px;margin-bottom:2px;position:relative;transition:background .25s,box-shadow .25s}
.demo-log-entry[hidden],.demo-log-details[hidden]{display:none}.demo-log-warning{--log-tone:#b8750b;background:#b8750b0b}.demo-log-error{--log-tone:#cd3551;background:#cd35510b}.demo-log-entry.is-inspected{background:color-mix(in srgb,var(--log-tone) 10%,var(--surface-raised));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--log-tone) 20%,transparent)}
.demo-log-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:9px;line-height:1.5;color:var(--muted)}.demo-log-meta time{font-family:monospace}.demo-log-meta b{color:var(--log-tone);font-size:9px;letter-spacing:.4px}
.demo-log-message{display:flex;align-items:flex-start;gap:10px;margin-top:4px;line-height:1.5;font-family:monospace;font-size:11px}.demo-log-message>span:first-child{flex:1;overflow-wrap:anywhere}.demo-log-copy{display:block;color:var(--muted);opacity:.45;flex-shrink:0}.demo-log-copy svg{width:12px;height:12px}.demo-log-exception{font-size:10px;color:var(--log-tone);font-weight:600;margin-top:3px}.demo-log-location{font-family:monospace;font-size:9px;color:var(--muted);margin-top:2px}.demo-log-details-label{display:block;font-size:9px;color:var(--blue);margin-top:7px}.demo-log-details{background:var(--surface);padding:9px;margin-top:6px;font-size:9px;border-top:1px solid var(--line)}.demo-log-details b{color:var(--muted)}.demo-log-details pre{font:9px/1.6 monospace;margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
[data-motion-enabled=true] .demo-log-arriving{animation:demo-log-arrive .3s ease both}@keyframes demo-log-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
[data-theme=dark] .demo-log-warning{--log-tone:#e3ac4e}[data-theme=dark] .demo-log-error{--log-tone:#f37b8e}[data-theme=dark] .demo-log-tool img{filter:brightness(0) invert(.8)}
@media(max-width:700px){.demo-focus-overlay.demo-log-reader.is-lifted{transform:translateY(-10px) scale(1.025)}.demo-log-toolbar{gap:4px;padding:9px}.demo-log-actions{gap:3px}.demo-log-tool{width:20px}.demo-log-reader{height:475px}.demo-log-message{font-size:10px}.demo-log-meta{font-size:8px;gap:6px}}
@media(max-width:440px){.demo-log-source{min-width:100px}.demo-log-actions{width:100%;justify-content:flex-end}.demo-log-entry{padding:8px}.demo-log-meta>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.demo-log-entry,.demo-focus-overlay{transition:none!important}.demo-log-arriving{animation:none!important}}

/* Original AppIcon SVGs keep their exact paths and inherit the Flutter state tint. */
.demo-app-icon{display:inline-block;flex-shrink:0;width:17px;height:17px;background-color:currentColor;-webkit-mask:var(--demo-icon) center/contain no-repeat;mask:var(--demo-icon) center/contain no-repeat;vertical-align:middle}
.demo-sidebar-item .demo-app-icon{width:17px;height:17px}.demo-sidebar-item.is-active{color:var(--blue);font-weight:600}
.demo-ai-toggle .demo-app-icon{width:17px;height:17px;color:var(--text)}.demo-ai-toggle[aria-expanded=true] .demo-app-icon{color:var(--blue)}
.demo-ai-panel-inner>.demo-app-icon{display:block;width:26px;height:26px;margin-bottom:10px;color:var(--blue)}
.demo-log-tool .demo-app-icon{width:13px;height:13px}