.responsive-player { --responsive-stage-height:clamp(460px,42vw,580px); }
.case-editorial .responsive-player > .case-editorial-copy {
  position:static; align-self:start; display:grid; align-content:center; min-height:var(--responsive-stage-height);
}
.responsive-player-figure { margin: 0; }
.responsive-player-stage {
  height:var(--responsive-stage-height); position: relative; display:grid; grid-template-rows:minmax(0,1fr); justify-items:center;
  box-sizing:border-box; padding:40px 0;
  border-radius:var(--nd-radius-preview-canvas); overflow: hidden; background: var(--case-canvas); isolation: isolate;
}
.responsive-player-display { display:grid; place-items:center; min-width:0; min-height:0; width:100%; height:100%; }
@media(max-width:991px) {
  .responsive-player-stage { grid-template-rows:minmax(0,1fr) auto; gap:24px; padding:24px 0; }
}
/* Clip the complete iframe once, including its accelerated video layers. Keep
   the shadow outside this clip and avoid a black backing beneath the edge. */
.responsive-player-frame iframe { position: absolute; top: 0; left: 0; display: block; max-width: none; border: 0; transform-origin: top left; pointer-events: none; }
.case-editorial .responsive-player-caption { margin: 14px 0 0; text-align: center; color: var(--portfolio-copy); font-size: var(--type-detail); line-height: 1.5; }
@media (max-width: 767px) {
  .case-editorial .responsive-player .responsive-player-caption { margin: 12px 0 0; font-size: 13px; line-height: 1.5; }
  .responsive-player { --responsive-stage-height:clamp(320px,calc(var(--viewport-unit,1vh) * 52 + 40px),460px); }
  .responsive-player-stage { border-radius:var(--nd-radius-preview-canvas); }
}
@media (prefers-reduced-motion: reduce) { .responsive-player-controls button, .responsive-player-device-label, .responsive-player-dot { transition: none; } }

/* Passive desktop previews share one viewport and leave their enclosing link in control. */
.prototype-desktop-preview { position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; pointer-events: none; }
.prototype-desktop-preview--hero { width:100%; min-width:0; aspect-ratio:4 / 3; min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(24px,3vw,40px); border-radius:var(--nd-radius-preview-canvas); background:var(--case-canvas); }
.prototype-desktop-preview--hero .prototype-desktop-window { flex-shrink:0; }
.prototype-desktop-preview--home { width: 100%; height: 100%; aspect-ratio: 1; }
.prototype-desktop-preview--camera {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  height: clamp(460px, 42vw, 580px); border-radius:var(--nd-radius-preview-canvas); background: var(--case-canvas);
}
.prototype-desktop-preview--camera .preview-browser { flex-shrink: 0; }
.prototype-desktop-preview--camera .prototype-desktop-content { opacity: 1; }
.prototype-desktop-preview--camera.is-ready .prototype-desktop-content { opacity: 1; }
.camera-view-switcher { display:grid; gap:16px; }
.case-editorial .camera-view-switcher > figcaption { margin:0; text-align:center; }
.prototype-desktop-preview--walkthrough { height:clamp(460px,42vw,580px); border-radius:var(--nd-radius-preview-canvas); background:var(--case-canvas); }
.prototype-desktop-preview--walkthrough .prototype-desktop-content { opacity:1; }
.prototype-desktop-preview--walkthrough.is-ready .prototype-desktop-content { opacity:1; }
.prototype-desktop-preview--comparison { height:clamp(460px,42vw,580px); border-radius:var(--nd-radius-preview-canvas); background:var(--case-canvas); }
.prototype-desktop-preview--comparison[data-comparison-control=slider] .prototype-desktop-window { top:18px; }
.prototype-desktop-preview--comparison[data-comparison-control=tabs] { display:flex; flex-direction:column; justify-content:center; gap:24px; }
.prototype-desktop-preview--comparison .prototype-desktop-window { flex-shrink:0; }
/* A compact segmented control, outside the video but inside its canvas. */
.player-comparison-tabs, .camera-view-icon {
  --preview-control-surface: rgba(240,246,249,.94);
  --preview-control-shadow: 0 2px 7px rgba(30,49,66,.14), inset 0 1px 0 rgba(255,255,255,.24);
}
.player-comparison-tabs {
  position:relative; display:grid; grid-template-columns:1fr 1fr; flex-shrink:0;
  width:216px; max-width:82%; padding:4px; box-sizing:border-box; border-radius:18px;
  border:1px solid rgba(35,63,84,.18); background:rgba(30,49,66,.09);
  pointer-events:auto; isolation:isolate;
}
.player-comparison-tabs::before {
  content:""; position:absolute; left:4px; top:4px; bottom:4px; width:calc(50% - 4px);
  border-radius:13px; background:var(--preview-control-surface); box-shadow:var(--preview-control-shadow);
  transition:transform .22s cubic-bezier(.22,1,.36,1); pointer-events:none;
}
.player-comparison-tabs[data-selected=after]::before { transform:translateX(100%); }
.player-comparison-tabs button {
  position:relative; min-width:0; height:44px; padding:0 18px; border:0; border-radius:13px;
  background:transparent; color:#344b5c; font:500 14px/1 var(--main-font); cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:color .2s ease;
}
.player-comparison-tabs button[aria-pressed=true] { color:#172a3a; }
.player-comparison-tabs button:hover { color:#172a3a; }
.player-comparison-tabs button:focus-visible { outline:2px solid #ff9500; outline-offset:2px; }
.camera-view-tabs { grid-template-columns:repeat(3,1fr); }
.camera-view-tabs::before { width:calc((100% - 8px) / 3); }
.camera-view-tabs[data-selected=side]::before { transform:translateX(100%); }
.camera-view-tabs[data-selected=grid]::before { transform:translateX(200%); }
.camera-view-tabs button { display:grid; place-items:center; padding:0; }
.camera-view-tab-icon {
  display:block; width:26px; height:26px; background:currentColor;
  -webkit-mask:var(--camera-tab-icon) center / contain no-repeat;
  mask:var(--camera-tab-icon) center / contain no-repeat;
}
@media(prefers-reduced-motion:reduce) { .player-comparison-tabs::before,.player-comparison-tabs button { transition:none; } }
/* Still-image variant shares the player tabs and lifecycle. Each device keeps
   its relative physical size while switching; source files stay intact. */
.image-comparison-stage {
  display:flex; flex-direction:column; align-items:center; gap:24px;
  height:clamp(500px,46vw,640px); padding:clamp(56px,5vw,88px) 40px; box-sizing:border-box;
  background:var(--case-canvas); border-radius:var(--nd-radius-preview-canvas); overflow:hidden;
}
.image-comparison-viewport { position:relative; flex:1; min-height:0; width:100%; }
.image-comparison-view { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; opacity:0; transition:opacity .22s ease; pointer-events:none; }
.image-comparison-stage[data-selected=before] [data-image-comparison-view=before],
.image-comparison-stage[data-selected=after] [data-image-comparison-view=after] { opacity:1; }
.image-comparison-phone {
  position:relative; height:calc(100% * var(--comparison-phone-scale, 1)); flex-shrink:0;
  -webkit-mask-image:var(--comparison-phone-mask, none); mask-image:var(--comparison-phone-mask, none);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.image-comparison-phone img { position:absolute; display:block; max-width:none; height:auto; margin:0; border-radius:0; }
@media(max-width:767px) {
  .image-comparison-stage { height:clamp(420px,120vw,580px); padding:48px 24px; border-radius:var(--nd-radius-preview-canvas); }
}
@media(prefers-reduced-motion:reduce) { .image-comparison-view { transition:none; } }
.case-editorial .player-comparison > .case-editorial-media { position:static; align-self:start; }
/* The handle lives in the screen, outside the scaled player. Its touch target
   stays usable on a 320px display and dragging never resizes either design. */
.player-comparison-reveal { position:absolute; inset:0; z-index:2; pointer-events:auto; touch-action:pan-y; cursor:ew-resize; user-select:none; -webkit-user-select:none; }
.player-comparison-reveal input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none; }
.player-comparison-labels { position:absolute; bottom:calc(100% + 12px); left:0; right:0; display:flex; justify-content:space-between; pointer-events:none; }
.player-comparison-label { padding:5px 8px; border-radius:5px; background:rgba(12,18,26,.78); color:#fff; font:500 12px/1.2 var(--main-font); letter-spacing:.01em; pointer-events:none; }
.player-comparison-divider { position:absolute; top:0; bottom:0; left:var(--comparison-position); width:2px; transform:translateX(-50%); background:#fff; box-shadow:0 0 2px rgba(0,0,0,.2); pointer-events:none; }
.player-comparison-grip { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; transform:translate(-50%,-50%); background:#fff; color:#80858b; box-shadow:0 1px 6px rgba(0,0,0,.16); }
.player-comparison-grip svg { width:12px; height:20px; }
.player-comparison-reveal:not([data-input=pointer]) input:focus-visible + .player-comparison-divider .player-comparison-grip { outline:3px solid #098de0; outline-offset:3px; }
@media(max-width:767px) {
  .prototype-desktop-preview--comparison[data-comparison-control=slider] .prototype-desktop-window { top:15px; }
  .prototype-desktop-preview--comparison[data-comparison-control=tabs] { gap:16px; aspect-ratio:1.1; }
  .player-comparison-labels { bottom:calc(100% + 10px); }
  .player-comparison-label { padding:4px 6px; font-size:10px; }
  .player-comparison-grip { width:36px; height:36px; }
}
@media(max-width:991px) {
  .case-editorial .player-comparison > .case-editorial-media { position:static; }
  .case-editorial .case-editorial-chapter.player-comparison { gap:16px; }
  .prototype-desktop-preview--comparison { height:auto; aspect-ratio:1.2; border-radius:var(--nd-radius-preview-canvas); }
}
.camera-view-icon {
  position:relative; display:block; flex:0 0 24px; width:32px; height:24px;
}
/* Keep the existing layout slot and icon center; the tile does not move or
   resize the browser above it. */
.camera-view-icon::before {
  content:""; position:absolute; left:50%; top:50%; width:48px; height:48px;
  transform:translate(-50%,-50%); border-radius:13px;
  background:var(--preview-control-surface); box-shadow:var(--preview-control-shadow);
}
.camera-view-icon::after {
  content:""; position:absolute; inset:3px 5px; background:#31516b;
  -webkit-mask: var(--camera-view-icon) center / contain no-repeat;
  mask: var(--camera-view-icon) center / contain no-repeat;
}
@media (max-width: 767px) {
  .prototype-desktop-preview--camera { height:auto; min-height:280px; aspect-ratio:1.1; gap:16px; border-radius:var(--nd-radius-preview-canvas); }
  .prototype-desktop-preview--walkthrough { height:auto; aspect-ratio:1.2; border-radius:var(--nd-radius-preview-canvas); }
}
/* One compositor clip for both the opaque cover and the accelerated iframe.
   Keep the shadow outside it so corner antialiasing cannot reveal a dark rim. */
.prototype-desktop-content { position:absolute; inset:0 auto auto 0; width:1440px; height:900px; transform-origin:top left; isolation:isolate; }
.prototype-desktop-window iframe { position: absolute; inset: 0 auto auto 0; width: 1440px; height: 900px; max-width: none; border: 0; transform-origin: top left; pointer-events: none; }

.prototype-desktop-content > .prototype-desktop-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:1; transition:opacity .3s ease; }
.prototype-desktop-preview--home.is-playing .prototype-desktop-poster,
.prototype-desktop-preview--hero.is-playing .prototype-desktop-poster { opacity:0; }
/* Reveal the shell with its decoded first frame, then keep that frame until
   all four cameras actually play. Pausing must not bring the poster back. */
.prototype-desktop-preview--hero .prototype-desktop-window { visibility:hidden; }
.prototype-desktop-preview--hero.is-poster-ready .prototype-desktop-window,
.prototype-desktop-preview--hero.is-playing .prototype-desktop-window { visibility:visible; }
@media (prefers-reduced-motion: reduce) { .prototype-desktop-content > .prototype-desktop-poster { transition:none; } }

/* Browser-window study: a single light shell around the existing live player. */
.preview-browser {
  --preview-browser-toolbar: 30px;
  --preview-browser-rim: 5px;
  --preview-browser-inner-radius: var(--nd-radius-preview-viewport);
  --preview-browser-radius: calc(var(--preview-browser-inner-radius) + var(--preview-browser-rim));
  position: relative; pointer-events: none; isolation: isolate;
  background: #f6f7f9; border-radius: var(--preview-browser-radius);
  box-shadow: none;
}
.preview-browser-toolbar {
  position: absolute; inset: var(--preview-browser-rim) var(--preview-browser-rim) auto;
  height: var(--preview-browser-toolbar); display: flex; align-items: center; justify-content: center;
  color: #667085; font-family: var(--main-font); font-size: clamp(8px, calc(var(--preview-browser-toolbar) * .33), 12px);
  font-weight: 400; line-height: 1; letter-spacing: 0;
}
.preview-browser-lights { position: absolute; left: calc(var(--preview-browser-rim) * 1.4); display: flex; gap: calc(var(--preview-browser-toolbar) * .15); }
.preview-browser-lights i { display: block; width: calc(var(--preview-browser-toolbar) * .24); height: calc(var(--preview-browser-toolbar) * .24); border-radius: 50%; background: #ff5f57; }
.preview-browser-lights i:nth-child(2) { background: #febc2e; }
.preview-browser-lights i:nth-child(3) { background: #28c840; }
.preview-browser-address {
  display: flex; align-items: center; justify-content: center; width: 54%; height: 68%; min-width: 0;
  line-height: 1;
  box-sizing: border-box; padding: 0 6px; margin-bottom: 2px; overflow: hidden; white-space: nowrap;
  background: #fff; border-radius: 5px; box-shadow: 0 0 0 1px #e2e8f0;
}
.preview-browser-address-label { position: relative; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; }
.preview-browser-address-text { display: block; width: max-content; -webkit-mask-image: var(--address-mask, none); mask-image: var(--address-mask, none); }
.preview-browser-address-ellipsis { position: absolute; right: 0; top: 0; opacity: var(--address-dots-opacity, 0); }
/* One address size for every browser mockup on a phone, including homepage
   previews, project heroes and in-project demos. See content/nd-kit/README.md. */
@media(max-width:767px) {
  .preview-browser-address,
  .paramount-player-browser > :nth-child(2) {
    font-size:var(--nd-browser-address-mobile);
  }
}
.prototype-desktop-viewport, .responsive-player-viewport {
  position: absolute; inset: calc(var(--preview-browser-rim) + var(--preview-browser-toolbar)) var(--preview-browser-rim) var(--preview-browser-rim);
  overflow: hidden; border-radius: var(--preview-browser-inner-radius); isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* The pop-out demonstration remains within the case-study canvas. */
[data-prototype-demo=chat-popout] > .prototype-desktop-window { transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .4s ease; }
[data-prototype-demo=chat-popout].is-main-minimized > .prototype-desktop-window { transform:translateY(80px) scale(.88); opacity:0; }
.prototype-chat-popout-window {
  position:absolute; right:14%; top:calc(50% + 13px); z-index:2; opacity:0;
  transform:translateY(calc(-50% + 12px)) scale(.96);
  transition:opacity .35s ease,transform .65s cubic-bezier(.22,1,.36,1);
}
.is-chat-detached .prototype-chat-popout-window { opacity:1; transform:translate(var(--chat-drag-x,0px),calc(-50% + var(--chat-drag-y,0px))) scale(1); }
.is-chat-repositioning .prototype-chat-popout-window,.is-chat-centered .prototype-chat-popout-window { transition:opacity .35s ease; }
.prototype-chat-popout-content { position:absolute; inset:0 auto auto 0; width:360px; height:600px; transform-origin:top left; }
.prototype-chat-popout-content iframe { display:block; width:360px; height:600px; max-width:none; border:0; pointer-events:none; }
@media(max-width:767px) {
  .prototype-desktop-preview[data-prototype-demo=chat-mobile] { height:clamp(520px,calc(var(--viewport-unit,1vh) * 80),640px); aspect-ratio:auto; }
}
@media(prefers-reduced-motion:reduce) {
  [data-prototype-demo=chat-popout] > .prototype-desktop-window,.prototype-chat-popout-window { transition:none; }
}

.prototype-window-cursor { position:absolute; z-index:4; left:0; top:0; width:22px; height:26px; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.prototype-window-cursor img { display:block; width:22px; height:26px; transform-origin:3px 2px; transition:transform .15s ease; }
.is-main-minimized:not(.is-chat-repositioning) .prototype-window-cursor { opacity:0!important; transition-delay:.25s; }
@media(prefers-reduced-motion:reduce) { .prototype-window-cursor { display:none; } }

/* QR walkthrough: dissolve into the phone at its final size, without minimizing. */
[data-prototype-demo=chat-qr] > .prototype-desktop-window { transition:opacity .6s ease; }
[data-prototype-demo=chat-qr].is-chat-on-phone > .prototype-desktop-window { opacity:0; }
.prototype-chat-phone {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .6s ease; pointer-events:none;
}
.is-chat-on-phone .prototype-chat-phone { opacity:1; transition-delay:.12s; }
.prototype-chat-phone-device {
  box-sizing:border-box; width:414px; height:824px; padding:12px;
  transform-origin:top left; background:#141518; border-radius:48px;
  box-shadow:inset 0 0 0 2px #65666b,inset 0 0 0 4px #25262a;
}
.prototype-chat-phone-screen { position:relative; width:390px; height:800px; overflow:hidden; border-radius:36px; background:#1e1e1e; }
.prototype-chat-phone-screen iframe { position:absolute; left:0; top:28px; width:390px; height:744px; max-width:none; border:0; pointer-events:none; }
.prototype-chat-phone-camera { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:60px; height:10px; border-radius:20px; background:#09090a; }
.prototype-chat-phone-home { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:100px; height:4px; border-radius:4px; background:#eee; }
@media(max-width:767px) {
  .prototype-desktop-preview[data-prototype-demo=chat-qr] { height:clamp(520px,calc(var(--viewport-unit,1vh) * 80),640px); aspect-ratio:auto; }
}
@media(prefers-reduced-motion:reduce) {
  [data-prototype-demo=chat-qr] > .prototype-desktop-window,.prototype-chat-phone { transition:none; }
}

/* Citi and future web flows use the same browser frame as Big Brother. */
.case-browser-demo { position:relative;display:grid;place-items:center;height:clamp(460px,42vw,580px);overflow:hidden;isolation:isolate;background:var(--case-canvas);border-radius:var(--nd-radius-preview-canvas);pointer-events:none; }
.case-browser-demo > .preview-browser { visibility:hidden; }
.case-browser-demo.is-ready > .preview-browser { visibility:visible; }
.case-browser-demo.has-poster > .preview-browser { visibility:visible; }
.case-browser-poster { position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top;pointer-events:none; }
.case-browser-demo.has-poster iframe { opacity:0; transition:opacity .24s ease; }
.case-browser-demo.has-poster.is-ready iframe { opacity:1; }
/* Keep the still below the live surface, including during a browser repaint. */
@media(prefers-reduced-motion:reduce) { .case-browser-demo.has-poster iframe { transition:none; } }
.case-browser-demo iframe { position:absolute;inset:0 auto auto 0;width:1440px;height:1000px;max-width:none;border:0;transform-origin:top left;pointer-events:none; }
.case-browser-demo--interactive, .case-browser-demo--interactive iframe { pointer-events:auto; }
.case-browser-demo--interactive .prototype-desktop-viewport { overflow:clip; }
.case-browser-demo--page { overflow:clip; }
.case-browser-demo--page > .preview-browser { position:absolute;left:50%;transform:translateX(-50%); }
.case-browser-demo--page .case-browser-poster { height:auto; }
.case-editorial[data-case-slug] .case-browser-demo.case-browser-demo--component { background:#f4f4f3; }
.case-browser-demo--component .preview-browser { background:transparent; }
.case-browser-demo--component .preview-browser-toolbar { display:none; }
@media(max-width:767px) { .case-browser-demo { height:auto;aspect-ratio:1.2;border-radius:var(--nd-radius-preview-canvas); } }

/* The homepage still and film use the same chrome as the player previews. */
.home-media-browser {
  --preview-browser-toolbar: clamp(14px, 3cqw, 26px);
  --preview-browser-rim: clamp(2px, .5cqw, 4px);
  width:100%; padding:calc(var(--preview-browser-toolbar) + var(--preview-browser-rim)) var(--preview-browser-rim) var(--preview-browser-rim);
  box-sizing:border-box;
}
.home-media-browser-content { overflow:hidden; border-radius:var(--preview-browser-inner-radius); }
.home-browser-demo .home-media-browser-content { position:relative; }
.home-browser-demo iframe { position:absolute;inset:0 auto auto 0;width:1440px;height:1024px;max-width:none;border:0;transform-origin:top left;pointer-events:none;opacity:0; }
.home-browser-demo.is-ready iframe { opacity:1; }
.home-browser-demo.is-ready .home-media-browser-content > img { opacity:0; }
.pilates-video-cover .home-media-browser .homepage-preview-media,
.pilates-video-cover .home-media-browser .homepage-preview-media > :is(video,img),
.pilates-video-cover .home-media-browser video { border-radius:0; box-shadow:none; }
.swiftly-admin-interface-cover .interface-cover-screen { border-radius:var(--preview-browser-radius); }
.home-media-browser .preview-browser-address-text { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
html.work-grid .home-project-visual .pilates-video-cover .home-media-browser { scale:1; }
html.work-grid .home-project-visual .pilates-video-cover .home-media-browser .homepage-preview-media { scale:1; }

/* A complete still covers the iframe until its fonts, UI and camera posters paint. */
.responsive-player-viewport { background:#141414; }
.responsive-player-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.responsive-player-frame iframe { opacity:0; }
.is-preview-ready .responsive-player-frame iframe { opacity:1; }
.is-preview-ready .responsive-player-poster { visibility:hidden; }
.responsive-player-loading { position:absolute; bottom:14px; left:16px; right:16px; display:flex; justify-content:center; align-items:center; gap:10px; color:var(--portfolio-copy); font:400 12px/1.4 var(--main-font); }
.responsive-player-loading[hidden], .responsive-player-loading button[hidden] { display:none; }
.responsive-player-loading button { border:1px solid currentColor; border-radius:8px; background:transparent; color:inherit; padding:5px 12px; font:inherit; cursor:pointer; }

/* Mobile websites use the shared browser shell; only the optional phone variant
   overrides its chrome and corner radii. */
.case-browser-demo--mobile {height:clamp(580px,50vw,740px)}
.case-browser-demo--mobile:not(.case-browser-demo--mobile-browser) .preview-browser {background:#191919;box-shadow:0 18px 45px #09031e28,0 0 0 1px #ffffff55}
.case-browser-demo--mobile:not(.case-browser-demo--mobile-browser) .preview-browser-toolbar {background:#f6f7f9;border-radius:var(--mobile-browser-radius) var(--mobile-browser-radius) 0 0}
.case-browser-demo--mobile:not(.case-browser-demo--mobile-browser) .prototype-desktop-viewport {overflow:hidden;border-radius:0 0 var(--mobile-browser-radius) var(--mobile-browser-radius)}
@media(max-width:767px){.case-browser-demo--mobile{height:auto;aspect-ratio:3/4}}
/* A moving demo must never capture a swipe intended to scroll the case study. */
@media(pointer:coarse){.case-browser-demo--mobile iframe{pointer-events:none}}

/* Keep Swiftly's browser white in both the homepage preview and the case study. */
.swiftly-admin-interface-cover .home-media-browser,
.case-editorial[data-case-slug="marketplace-control-panel"] .case-browser-demo:not(.case-browser-demo--component)>.preview-browser{background:#fff}
.case-editorial[data-case-slug="marketplace-control-panel"] .case-browser-demo:not(.case-browser-demo--component)>.preview-browser{box-shadow:0 18px 52px #26355c35,0 0 0 1px #ffffffc9}
.swiftly-admin-interface-cover .preview-browser-toolbar,
.case-editorial[data-case-slug="marketplace-control-panel"] .preview-browser-toolbar{background:#fff;color:#66718a}
.case-editorial[data-case-slug="marketplace-control-panel"] .case-browser-demo.case-browser-demo--component{background:var(--case-canvas)}
/* A transparent live scene cannot keep its still visible underneath it. */
/* Match the light-authored document: inheriting the portfolio's dark scheme
   makes the browser paint an opaque white iframe canvas despite transparency. */
.case-editorial[data-case-slug="marketplace-control-panel"] .case-browser-demo--component iframe{transition:none;color-scheme:light}
.case-editorial[data-case-slug="marketplace-control-panel"] .case-browser-demo--component.is-ready .case-browser-poster{visibility:hidden}
.swiftly-admin-hero .case-browser-demo{background:transparent;height:clamp(540px,56vw,840px);border-radius:var(--nd-radius-preview-canvas)}.swiftly-admin-hero{background:var(--case-canvas);border-radius:var(--nd-radius-preview-canvas);overflow:hidden}.swiftly-admin-hero>.case-editorial-figure{margin:0}.swiftly-admin-hero .case-prototype-entry{padding:4px 0 32px;margin:0;display:flex;justify-content:center}
@media(max-width:767px){.swiftly-admin-hero .case-browser-demo{background:transparent;height:auto;aspect-ratio:1.15}.swiftly-admin-hero .case-prototype-entry{padding:0 20px 22px}.swiftly-admin-hero .prototype-launch{font-size:12px;padding:11px 14px}}

/* Passive browser demos cannot regain input through descendant CSS. */
[data-passive-demo], [data-passive-demo] * { pointer-events:none !important; user-select:none; -webkit-user-select:none; }

/* Native video keeps its own small presentation surface; it does not need a
   transformed 1440px document or iframe compositor while the visitor zooms. */
.case-browser-demo--recorded .prototype-desktop-viewport > .recorded-demo {
  width:100%; height:100%; aspect-ratio:auto !important;
}

.responsive-player-stage > .responsive-player-frame { flex-shrink:0; }