/* Keep live scrolling frames out of backdrop-filter render surfaces.
   Case-study dialogs retain their original glass appearance. */
#demo-modal {
  --preview-window-radius: 22px;
  --preview-window-border: 1px;
  --preview-bar-inset: 12px;
  --preview-control-size: 38px;
  --preview-outer-inset: 24px;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  padding: var(--preview-outer-inset);
  overflow: hidden !important;
  overscroll-behavior: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(14,14,18,.9) !important;
}
#demo-modal:not([open]){display:none}
#demo-modal::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Keep the portfolio's decorative pulses still while a live site is active.
   This does not cross the iframe boundary or pause the project's own motion. */
body.is-previewing > :not(#demo-modal),
body.is-previewing > :not(#demo-modal) *{animation-play-state:paused!important}
/* Do not keep the entire Studio page's glass/canvas layers composited behind
   another scrolling website. Restore them normally when the preview closes. */
body.is-previewing > :not(#demo-modal){visibility:hidden!important}
#demo-modal .demo-window {
  min-height: 0;
  max-height: calc(100dvh - 2 * var(--preview-outer-inset));
  flex-shrink: 1;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: #303033 !important;
  border-radius: var(--preview-window-radius);
  box-shadow: -32px 0 80px #ffffff12,32px 0 80px #ffffff12,0 38px 108px #0009 !important;
}
#demo-modal.open .demo-window { transform: none !important; }

/* No filtered/transformed ancestors around the live document. */
#demo-modal .demo-frame-wrap,
#demo-modal #demo-frame {
  z-index: 1;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
  clip-path: none !important;
}
#demo-modal .demo-window { overflow: visible; }
/* One real rounded edge, not opaque corner overlays. `clip` adds no scrolling
   container and leaves the live document's viewport, scale and filters alone. */
#demo-modal .demo-frame-wrap {
  zoom: 1 !important;
  overflow: clip;
  border-radius: 0 0 calc(var(--preview-window-radius) - var(--preview-window-border)) calc(var(--preview-window-radius) - var(--preview-window-border));
}
#demo-modal .demo-bar {
  padding: var(--preview-bar-inset);
  min-height: 0;
  border-radius: calc(var(--preview-window-radius) - var(--preview-window-border)) calc(var(--preview-window-radius) - var(--preview-window-border)) 0 0;
}
#demo-modal .demo-left-actions { grid-column: 1; grid-row: 1; }
#demo-modal .demo-bar-actions { grid-column: 3; grid-row: 1; }
#demo-modal :is(.demo-newtab,.demo-close) {
  box-sizing: border-box;
  width: var(--preview-control-size);
  min-width: var(--preview-control-size);
  height: var(--preview-control-size);
  margin: 0;
  padding: 0;
  align-self: center;
}
@media(max-width:768px) {
  #demo-modal { --preview-window-border: 0px; --preview-control-size: 40px; --preview-outer-inset: 12px; }
  #demo-modal .demo-bar {
    padding-top: max(var(--preview-bar-inset),env(safe-area-inset-top));
    padding-left: max(var(--preview-bar-inset),env(safe-area-inset-left));
    padding-right: max(var(--preview-bar-inset),env(safe-area-inset-right));
  }
}
#demo-modal #demo-frame { border-radius: 0 !important; }
/* No fake bottom-corner plates: the stage itself clips to its rounded edge. */
#demo-modal .demo-frame-wrap:not(.is-native-phone)::after {
  content: none;
}
/* Preserve the project's viewport and approved presentation density. */
#demo-modal #demo-frame {
  zoom: 1 !important;
  transform: scale(var(--preview-frame-scale,1)) !important;
  transform-origin: 0 0;
}
#demo-modal .demo-bar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Toolbar controls already have a matte fill. An additional backdrop surface
   can drift relative to them when the browser itself scales the preview. */
#demo-modal .demo-bar *,
#demo-modal .demo-bar *::before,
#demo-modal .demo-bar *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.demo-native-phone { display: none; }
.is-native-phone {
  --phone-stage-paint: radial-gradient(ellipse calc(var(--native-phone-width) * 1.65) calc(var(--native-phone-height) * 1.4) at center,#38393b 0%,#1c1d1f 42%,#0d0e0f 76%,#070809 100%);
  background: var(--phone-stage-paint);
}
.is-native-phone .demo-native-phone {
  display: block;
  position: absolute;
  left: calc(50% - var(--native-phone-width) / 2);
  top: calc(50% - var(--native-phone-height) / 2);
  width: var(--native-phone-width);
  height: var(--native-phone-height);
  --phone-fit: var(--native-phone-scale);
  border-radius: calc(68px * var(--phone-fit));
  background: linear-gradient(145deg, #242428 0%, #080809 19%, #020202 76%, #303034 100%);
  box-shadow: inset 0 0 0 calc(3px * var(--phone-fit)) #080808;
  pointer-events: none;
}
/* The transformed document is its own layer. Keep the non-interactive bezel
   and home indicator above it, with no opaque plate covering the site. */
#demo-modal .demo-native-phone { z-index: 2; background: transparent; }
#demo-modal .demo-loading { z-index: 3; }
.demo-native-status {
  position: absolute;
  top: calc(11px * var(--phone-fit));
  left: calc(11px * var(--phone-fit));
  right: calc(11px * var(--phone-fit));
  height: calc(52px * var(--phone-fit));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(28px * var(--phone-fit));
  border-radius: calc(57px * var(--phone-fit)) calc(57px * var(--phone-fit)) 0 0;
  background: #18191b;
  color: #fff;
  font: 650 calc(15px * var(--phone-fit))/1 system-ui, sans-serif;
}
.demo-native-status i {
  position: absolute;
  width: calc(120px * var(--phone-fit));
  height: calc(34px * var(--phone-fit));
  left: calc(50% - 60px * var(--phone-fit));
  top: calc(8px * var(--phone-fit));
  border-radius: 20px;
  background: #000;
}
.demo-native-status>span:first-child{transform:translateX(calc(5px * var(--phone-fit)))}
.demo-native-home {
  position: absolute;
  z-index: 4;
  bottom: calc(18px * var(--phone-fit));
  left: 35%;
  width: 30%;
  height: calc(5px * var(--phone-fit));
  border-radius: 4px;
  background: #fff;
}
.demo-native-indicators { display: flex; align-items: center; gap: calc(5px * var(--phone-fit)); }
.demo-native-status svg { width: calc(17px * var(--phone-fit)); height: calc(17px * var(--phone-fit)); }
.demo-native-status .demo-native-battery { width: calc(25px * var(--phone-fit)); height: calc(13px * var(--phone-fit)); }
.demo-native-key {
  position: absolute;
  width: calc(5px * var(--phone-fit));
  border: 0;
  border-radius: calc(4px * var(--phone-fit));
  background: linear-gradient(90deg,#080809,#303033 42%,#18181b 78%,#050506);
  box-shadow: inset 1px 0 1px #45454860,-1px 0 2px #0008;
}
.demo-native-key.action { top: calc(128px * var(--phone-fit)); left: calc(-7px * var(--phone-fit)); height: calc(34px * var(--phone-fit)); }
.demo-native-key.volume-up { top: calc(184px * var(--phone-fit)); left: calc(-7px * var(--phone-fit)); height: calc(66px * var(--phone-fit)); }
.demo-native-key.volume-down { top: calc(263px * var(--phone-fit)); left: calc(-7px * var(--phone-fit)); height: calc(66px * var(--phone-fit)); }
.demo-native-key.power { top: calc(205px * var(--phone-fit)); right: calc(-7px * var(--phone-fit)); height: calc(104px * var(--phone-fit)); }
[data-preview-project="brownie"] .demo-native-status { background: #173f35; color: #f6f1e7; }
[data-preview-project="lumus"] .demo-native-status { background: #2d211c; color: #fff8f2; }
[data-preview-project="norden"] .demo-native-status { background: #19271f; color: #eef4ee; }
[data-preview-project="salon-manager"] .demo-native-status { background: #eef3f2; color: #111512; }

/* Cover fractional seams with a sibling bezel, not a mask on the live iframe. */
.demo-native-phone::before{content:'';position:absolute;z-index:5;inset:0;box-sizing:border-box;border:calc(12px * var(--phone-fit)) solid #080809;border-radius:inherit;pointer-events:none}
.demo-native-status{z-index:4}
.demo-native-home{z-index:6}
.demo-native-status .demo-native-battery rect:last-of-type{fill:currentColor;stroke:none;x:3px;y:3px;width:16px;height:8px;rx:1px}
.demo-native-key.action,.demo-native-key.volume-up,.demo-native-key.volume-down{left:calc(-4px * var(--phone-fit))}
.demo-native-key.power{right:calc(-4px * var(--phone-fit))}
/* The corner covers sample the same stage lighting at the same coordinates.
   A flat black fill here cuts rectangular holes in the surrounding glow.
   Only this decorative sibling is masked, never the live document. */
.demo-native-phone::after {
  content: ''; position: absolute; z-index: 7; pointer-events: none;
  inset: 0; --inner-corner: calc(57px * var(--phone-fit));
  --outer-corner: calc(68px * var(--phone-fit));
  background:
    radial-gradient(circle at top right,transparent calc(var(--inner-corner) - .5px),#080809 var(--inner-corner),#080809 calc(var(--outer-corner) - .5px),transparent var(--outer-corner)) left bottom / var(--outer-corner) var(--outer-corner) no-repeat,
    radial-gradient(circle at top left,transparent calc(var(--inner-corner) - .5px),#080809 var(--inner-corner),#080809 calc(var(--outer-corner) - .5px),transparent var(--outer-corner)) right bottom / var(--outer-corner) var(--outer-corner) no-repeat,
    var(--phone-stage-paint) calc((var(--native-phone-width) - var(--preview-stage-width)) / 2) calc((var(--native-phone-height) - var(--preview-stage-height)) / 2) / var(--preview-stage-width) var(--preview-stage-height) no-repeat;
  --corner-cutouts:
    radial-gradient(circle at top right,transparent calc(var(--inner-corner) - .5px),#000 var(--inner-corner)),
    radial-gradient(circle at top left,transparent calc(var(--inner-corner) - .5px),#000 var(--inner-corner));
  -webkit-mask-image: var(--corner-cutouts);
  mask-image: var(--corner-cutouts);
  -webkit-mask-size: var(--outer-corner) var(--outer-corner);
  mask-size: var(--outer-corner) var(--outer-corner);
  -webkit-mask-position: left bottom,right bottom;
  mask-position: left bottom,right bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Keep preparation feedback proportional to the phone, not the outer stage. */
.is-native-phone .preview-loading-inner{width:calc(220px * var(--native-phone-scale));max-width:60%}
.is-native-phone .preview-loading-brand{font-size:calc(28px * var(--native-phone-scale))}
.is-native-phone .preview-loading-label{font-size:calc(14px * var(--native-phone-scale));margin:calc(18px * var(--native-phone-scale)) 0 calc(12px * var(--native-phone-scale))}
.is-native-phone .preview-loading-note{font-size:calc(12px * var(--native-phone-scale))}
@media(max-width:760px){
 .site-loader-inner{width:min(220px,60vw)}
 .site-loader-title{font-size:26px}
 .site-loader-track{margin-top:20px}
 .site-loader-subtitle{font-size:12px}
 .preview-loading-inner{width:min(220px,60vw)}
 .preview-loading-brand{font-size:26px}
 .preview-loading-label{font-size:12px;margin:16px 0 10px}
 .preview-loading-note{font-size:11px}
}