.economist-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"] .economist-cinematic{
  --demo-screen-fill:#0f0f0f;
  --demo-device-body:#0f0f0f;
  --demo-device-bezel:#0f0f0f;
  --demo-device-display:var(--demo-screen-fill);
}

@scope (.economist-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-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)}

:scope.demo-stage-pinned .cinema-sticky{
  overflow:hidden!important;
}

@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}}

/* =========================================================
   Economist cinema v03 contract patch
   Base shell is copied from manager v05_29. Only the foreground
   device shape changes from phone to tablet; stage, controls,
   subtitle, progress, background and fallback remain identical.
   ========================================================= */
.phone-device.tablet-device{
  width:clamp(520px,36vw,620px);
  aspect-ratio:4/3;
  border-radius:28px;
}
.phone-screen-mask.tablet-screen-mask{
  inset:14px;
  border-radius:18px;
  clip-path:inset(0 round 18px);
}
.phone-bezel.tablet-bezel{
  border-radius:28px;
  box-shadow:inset 0 0 0 12px #0f0f0f,inset 0 0 0 13px 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.tablet-bezel::after{
  inset:12px;
  border-radius:18px;
}
.mobile-frame.tablet-frame{
  width:1024px;
  height:768px;
}

@media(max-width:980px){.phone-device.tablet-device{width:min(540px,66vw)}}

/* v04 foundation: semantic aliases over the manager mobile layer.
   Manager shell stays byte-compatible visually; economist code uses tablet/device language. */
.mobile-stage[data-device="tablet"] .phone-device{
  width:clamp(520px,36vw,620px);
  aspect-ratio:4/3;
  border-radius:28px;
}
.mobile-stage[data-device="tablet"] .phone-screen-mask{
  inset:14px;
  border-radius:18px;
  clip-path:inset(0 round 18px);
}
.mobile-stage[data-device="tablet"] .phone-bezel{
  border-radius:28px;
  box-shadow:inset 0 0 0 12px #0f0f0f,inset 0 0 0 13px rgba(255,255,255,.10),inset 0 0 18px rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.72);
}
.mobile-stage[data-device="tablet"] .phone-bezel::after{
  inset:12px;
  border-radius:18px;
}
.mobile-stage[data-device="tablet"] .mobile-frame{
  width:1024px;
  height:768px;
}

/* v18: environmental vignette must never darken the product screen.
     Keep the room mood behind the screen, but remove inner edge shading from the interface frame. */
  .room-vignette{
    z-index:1!important;
    pointer-events:none!important;
  }
  .stage-shell{
    z-index:2!important;
  }
  .screen{
    isolation:isolate;
    background:var(--demo-screen-fill)!important;
  }
  .screen::before{
    box-shadow:none!important;
    background:transparent!important;
  }
  .screen:not(.is-mobile-mode) .screen-curtain,
  .screen-curtain:not(.is-dim){
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .screen.is-mobile-mode .screen-curtain{
    background:rgba(22,22,22,.13)!important;
    backdrop-filter:blur(1px)!important;
    -webkit-backdrop-filter:blur(1px)!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;}
  }
}


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