.immersive-demo-entry{
  background:var(--layer);
  overflow:hidden;
}

.interface-overview .grid{
  align-items:start;
}

.interface-overview__head{
  grid-column:1 / span 4;
}

.interface-overview__copy{
  grid-column:5 / span 4;
  display:grid;
  gap:16px;
}

.interface-overview__copy .body-lg{
  max-width:none;
}

.interface-overview__conclusion{
  padding-top:8px;
  color:var(--text-primary);
}

.interface-overview__media{
  grid-column:9 / span 4;
  align-self:center;
  justify-self:center;
  width:100%;
  max-width:320px;
  min-width:0;
  margin:-32px 0;
  overflow:clip;
}

.interface-overview__media img{
  display:block;
  width:min(100%,320px);
  max-width:100%;
  height:auto;
  margin-inline:auto;
}

@media (max-width:1055px){
  .interface-overview__head{
    grid-column:1 / -1;
  }

  .interface-overview__copy{
    grid-column:1 / span 4;
  }

  .interface-overview__media{
    grid-column:5 / span 4;
  }
}

@media (max-width:671px){
  .interface-overview__copy,
  .interface-overview__media{
    grid-column:1 / -1;
  }

  .interface-overview__copy{
    margin-bottom:32px;
  }

  .interface-overview__media{
    justify-self:center;
    max-width:320px;
    margin:0;
  }
}

.manager-cinematic{
  position:relative;
  display:block;
  isolation:isolate;
  --demo-screen-fill:#f4f4f4;
  --demo-device-body:#0f0f0f;
  --demo-device-bezel:#0f0f0f;
  --demo-device-display:var(--demo-screen-fill);
}

html[data-theme="dark"] .manager-cinematic{
  --demo-screen-fill:#0f0f0f;
  --demo-device-body:#0f0f0f;
  --demo-device-bezel:#0f0f0f;
  --demo-device-display:var(--demo-screen-fill);
}

@scope (.manager-cinematic) {
:scope{
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
  --blue:#0f62fe;
  --text:#161616;
  --muted:#525252;
  --room-hi:#b8b8b8;
  --room-mid:#8f8f8f;
  --room-low:#6f6f6f;
  /* v05: outer cinema screen is 16:9, inner app is a virtual desktop viewport scaled down. */
  --screen-h:min(820px,72vh,calc(88vw * 9 / 16));
  --screen-w:calc(var(--screen-h) * 16 / 9);
  --app-virtual-w:1440px;
  --app-virtual-h:810px;
  --app-scale:1;
}
*{box-sizing:border-box}
:scope{margin:0;min-height:100%;font-family:var(--font);background:#fff;color:var(--text);scroll-behavior:smooth}
button{font:inherit}




.cinema{height:var(--cinematic-scroll-distance,260vh);position:relative;background:#f2f2f2;color:#fff}.cinema-sticky{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:#8d8d8d;transition:background .45s ease}.room-bg{position:absolute;inset:-10%;z-index:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.46),rgba(255,255,255,.18) 36%,rgba(255,255,255,0) 68%),radial-gradient(circle at 50% 115%,rgba(15,98,254,.08),rgba(0,0,0,0) 55%),linear-gradient(180deg,var(--room-hi) 0%,var(--room-mid) 56%,var(--room-low) 100%);filter:blur(13px);transform:scale(1.04);opacity:.96}.room-vignette{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 46%,rgba(0,0,0,.18) 78%,rgba(0,0,0,.24) 100%)}
.stage-shell{position:absolute;inset:0;z-index:2;display:grid;place-items:center;opacity:var(--stage-opacity,.42);transform:scale(var(--stage-scale,.66));transition:opacity .28s linear,transform .42s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}.screen{position:relative;width:var(--screen-w);height:var(--screen-h);overflow:hidden;background:var(--demo-screen-fill);border:1px solid rgba(255,255,255,.48);box-shadow:0 30px 85px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.10);border-radius:8px;transition:filter .58s ease,opacity .58s ease,transform .66s cubic-bezier(.18,.86,.18,1);transform-origin:center center;will-change:filter,opacity,transform}.screen::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 54px rgba(0,0,0,.025)}
.app-frame{position:absolute;left:0;top:0;width:var(--app-virtual-w);height:var(--app-virtual-h);border:0;background:var(--demo-screen-fill);pointer-events:none;user-select:none;transform:scale(var(--app-scale));transform-origin:top left;will-change:transform;transition:filter .45s ease,opacity .45s ease}.screen-curtain{position:absolute;inset:0;z-index:5;pointer-events:none;background:rgba(0,0,0,0);transition:background .34s ease,backdrop-filter .34s ease}.screen-curtain.is-dim{background:rgba(0,0,0,.08);backdrop-filter:blur(1px)}
.screen.is-mobile-mode{filter:blur(9px);opacity:.46;transform:scale(.90)}.screen.is-mobile-mode .screen-curtain{background:rgba(22,22,22,.13);backdrop-filter:blur(1px)}.mobile-stage{position:absolute;inset:0;z-index:32;display:grid;place-items:center;opacity:0;transform:translateY(18px) scale(.94);transition:opacity .56s ease,transform .74s cubic-bezier(.18,.86,.18,1);pointer-events:none;perspective:1200px;will-change:opacity,transform}.mobile-stage.is-visible{opacity:1;transform:translateY(0) scale(1)}.phone-device{position:relative;z-index:2;width:clamp(246px,16.4vw,296px);aspect-ratio:410/820;border-radius:38px;background:#0f0f0f;box-shadow:0 48px 125px rgba(0,0,0,.46),0 14px 34px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.14);transform:translateZ(160px);overflow:visible;isolation:isolate}.phone-screen-mask{position:absolute;z-index:1;inset:10px;border-radius:28px;background:var(--demo-device-display);overflow:hidden;clip-path:inset(0 round 28px);contain:paint;transform:translateZ(0)}
.phone-screen-mask::before{content:"";position:absolute;z-index:4;left:0;right:0;top:0;height:4px;background:var(--demo-device-display);pointer-events:none}
.phone-screen-mask::after{content:"";position:absolute;z-index:4;left:0;right:0;bottom:0;height:8px;background:linear-gradient(180deg,rgba(15,15,15,0),var(--demo-device-display) 72%);pointer-events:none;opacity:1}
.phone-bezel{position:absolute;z-index:5;inset:0;border-radius:38px;pointer-events:none;box-shadow:inset 0 0 0 9px #0f0f0f,inset 0 0 0 10px rgba(255,255,255,.10),inset 0 0 18px rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.72)}.phone-bezel::after{content:"";position:absolute;inset:9px;border-radius:29px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.26);pointer-events:none}.mobile-frame{position:absolute;z-index:1;left:0;top:0;width:390px;height:780px;border:0;background:var(--demo-screen-fill);pointer-events:none;user-select:none;transform:translate3d(0,0,0) scale(var(--mobile-app-scale,1));transform-origin:top left;will-change:transform}
.scene-title{position:absolute;z-index:8;left:calc((100vw - var(--screen-w)) / 2);top:calc((100vh - var(--screen-h)) / 2 - 34px);font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.90);font-weight:700;opacity:.92;text-shadow:none;background:rgba(22,22,22,.48);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:5px 10px;backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.10)}.scene-title span{color:rgba(255,255,255,.92)}.subtitle{position:absolute;z-index:10;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);width:min(920px,82vw);min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;color:rgba(255,255,255,.80);font-size:14px;line-height:20px;opacity:0;transition:.28s ease;pointer-events:none;text-shadow:0 3px 14px rgba(0,0,0,.50)}.subtitle.is-on{opacity:1;transform:translateX(-50%) translateY(0)}.subtitle b{color:rgba(255,255,255,.98);font-weight:600}.subtitle span{opacity:.88}.progress{position:absolute;z-index:9;left:50%;bottom:13px;transform:translateX(-50%);display:flex;gap:5px;opacity:.28}.progress i{width:25px;height:2px;background:rgba(255,255,255,.25)}.progress i.is-on{background:rgba(255,255,255,.74)}.player-controls{position:absolute;z-index:12;right:calc((100vw - var(--screen-w)) / 2);top:calc((100vh - var(--screen-h)) / 2 - 42px);display:flex;gap:6px;opacity:.40;transition:.2s ease}.player-controls:hover{opacity:.82}.player-controls button{width:30px;height:30px;border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.13);color:rgba(255,255,255,.86);display:grid;place-items:center;padding:0;border-radius:999px;backdrop-filter:blur(8px)}

:scope.demo-fallback .mobile-stage,
:scope.demo-fallback .player-controls,
:scope.demo-fallback .progress,
:scope.demo-fallback .subtitle{display:none!important}
:scope.demo-fallback .screen{filter:none!important;opacity:1!important;transform:none!important}
:scope.demo-fallback .screen-curtain{display:none!important}
:scope.demo-fallback .stage-shell{opacity:1!important;transform:none!important}
:scope.demo-fallback .cinema{height:145vh}
:scope.demo-fallback .cinema-sticky{background:#8d8d8d}
:scope.demo-fallback .scene-title{opacity:.78!important;color:rgba(255,255,255,.72)}
:scope.demo-fallback .scene-title span{color:#fff}
.noscript-fallback{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,84vw);padding:18px 20px;border:1px solid rgba(255,255,255,.28);border-radius:12px;background:rgba(22,22,22,.72);color:#fff;font:14px/20px var(--font);box-shadow:0 18px 60px rgba(0,0,0,.28)}
@media(max-width:980px){:scope{--screen-h:min(760px,70vh,calc(94vw * 9 / 16));--screen-w:calc(var(--screen-h) * 16 / 9)}.screen{border-radius:6px}.scene-title{left:20px}.player-controls{right:20px}.subtitle{bottom:31px;width:min(760px,88vw)}}
@media(prefers-reduced-motion:reduce){:scope{scroll-behavior:auto}.stage-shell,.subtitle{transition:none!important}}

/* v13: Carbon-oriented outer demonstration shell.
     Font stack is intentionally preserved; only shell surfaces, controls, captions and stage chrome are restyled. */
  :scope{
    --carbon-background:#262626;
    --carbon-background-hover:#333333;
    --carbon-layer-01:#393939;
    --carbon-layer-02:#525252;
    --carbon-border-subtle:#525252;
    --carbon-border-strong:#6f6f6f;
    --carbon-text-primary:#f4f4f4;
    --carbon-text-secondary:#c6c6c6;
    --carbon-text-helper:#a8a8a8;
    --carbon-interactive:#0f62fe;
    --carbon-interactive-hover:#0050e6;
  }

  
  
  

  .cinema{
    background:var(--carbon-background);
  }
  .cinema-sticky{
    background:var(--carbon-background)!important;
  }
  .room-bg{
    inset:0;
    filter:none;
    transform:none;
    opacity:1;
    background:
      linear-gradient(180deg,#393939 0%,#262626 72%,#262626 100%);
  }
  .room-vignette{
    display:none!important;
  }

  .screen{
    border-radius:0!important;
    border:0!important;
    background:var(--demo-screen-fill)!important;
    box-shadow:none!important;
  }
  .screen::before{
    box-shadow:none!important;
    background:transparent!important;
  }
  .screen-curtain,
  .screen-curtain:not(.is-dim){
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .screen.is-mobile-mode{
    filter:none!important;
    opacity:.34!important;
    transform:scale(.92)!important;
  }
  .screen.is-mobile-mode .screen-curtain{
    background:rgba(0,0,0,.42)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .scene-title{
    color:var(--carbon-text-secondary)!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    padding:0!important;
    text-shadow:none!important;
    text-transform:none!important;
    letter-spacing:.16px!important;
    font-size:12px!important;
    line-height:16px!important;
    font-weight:400!important;
    opacity:1!important;
  }
  .scene-title span{
    color:inherit!important;
  }

  .player-controls{
    gap:0!important;
    opacity:1!important;
    top:calc((100vh - var(--screen-h)) / 2 - 48px)!important;
  }
  .player-controls button{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border-radius:0!important;
    border:1px solid var(--carbon-border-subtle)!important;
    border-right:0!important;
    background:var(--carbon-layer-01)!important;
    color:var(--carbon-text-primary)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .player-controls button:last-child{
    border-right:1px solid var(--carbon-border-subtle)!important;
  }
  .player-controls button:hover{
    background:var(--carbon-background-hover)!important;
  }
  .player-controls button:focus-visible{
    outline:2px solid var(--carbon-interactive)!important;
    outline-offset:2px!important;
  }

  .subtitle{
    width:min(760px,82vw)!important;
    min-height:48px!important;
    bottom:48px!important;
    justify-content:flex-start!important;
    text-align:left!important;
    padding:12px 16px 12px 14px!important;
    color:var(--carbon-text-secondary)!important;
    background:var(--carbon-layer-01)!important;
    border:1px solid var(--carbon-border-subtle)!important;
    border-left:4px solid var(--carbon-interactive)!important;
    box-shadow:none!important;
    text-shadow:none!important;
    font-size:14px!important;
    line-height:20px!important;
  }
  .subtitle b{
    color:var(--carbon-text-primary)!important;
    font-weight:600!important;
  }
  .subtitle span{
    color:var(--carbon-text-secondary)!important;
    opacity:1!important;
  }

  .progress{
    bottom:22px!important;
    gap:2px!important;
    opacity:1!important;
  }
  .progress i{
    width:32px!important;
    height:2px!important;
    background:var(--carbon-border-subtle)!important;
  }
  .progress i.is-on{
    background:var(--carbon-text-primary)!important;
  }

  .phone-device{
    box-shadow:0 0 0 1px var(--carbon-border-strong)!important;
  }
  .phone-bezel{
    box-shadow:inset 0 0 0 9px #0f0f0f,inset 0 0 0 10px var(--carbon-border-subtle)!important;
  }

  @media(max-width:980px){
    .scene-title{left:20px!important;}
    .player-controls{right:20px!important;}
    .subtitle{bottom:52px!important;width:min(760px,88vw)!important;}
    .progress{bottom:24px!important;}
  }
}

body.immersive-demo-active .masthead{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}


@media (max-width:672px){
  #manager-demo{
    display:none;
  }
}