/* Browser preview of the app's tint. Native macOS glass is supplied by AppKit. */
/* Cast the Watchtower shadow outside its iframe so the viewport cannot crop it. */
iframe[src^="hero-pop.html"],#ifr-pop{filter:drop-shadow(0 12px 16px rgba(0,0,0,.22))}
.web-preview:not(.island-glass){--preview-glass:linear-gradient(135deg,rgba(10,29,42,.8),rgba(23,21,37,.8))}
.web-preview:not(.island-glass) .pop,
.web-preview:not(.island-glass) .card:is(.expanded,.collapsing){
  background:linear-gradient(to bottom,#000 25%,transparent),var(--preview-glass);
  -webkit-backdrop-filter:blur(22px) saturate(115%);backdrop-filter:blur(22px) saturate(115%);
  border-color:rgba(255,255,255,.13);box-shadow:0 12px 32px rgba(0,0,0,.22),inset 0 -1px 0 rgba(255,255,255,.08);
}
.web-preview:not(.island-glass) .pop{box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.web-preview:not(.island-glass) .card:is(.expanded,.collapsing){--surface:rgba(255,255,255,.055);--surface-hi:rgba(255,255,255,.1);--panel:rgba(0,0,0,.3)}
.web-preview:not(.island-glass) .card:is(.expanded,.collapsing) .head{background:transparent}
@media(prefers-color-scheme:light){
  iframe[src^="hero-pop.html"],#ifr-pop{filter:drop-shadow(0 12px 16px rgba(0,0,0,.14))}
  .web-preview:not(.island-glass) .pop{background:linear-gradient(to bottom,#f5f5f5 25%,transparent),linear-gradient(135deg,rgba(226,237,244,.88),rgba(237,231,247,.88));border-color:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .web-preview .pop{background:var(--opaque-panel)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .web-preview .card{background:#111!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
.preview-limits #card{width:calc(100vw - 32px)!important;height:auto!important;border-radius:26px}
.preview-limits #head,.preview-limits .inner>:not(#quota){display:none}
.preview-limits #bodywrap{height:auto!important}
.preview-limits .quota{margin:8px;background:transparent;padding:12px 13px 14px}
.preview-projects #rail,.preview-projects #topbar,.preview-projects #v-stats>:not(#projects-sec){display:none}
.preview-projects #stage{left:0}
.preview-projects #v-stats{padding-top:8px}
.preview-projects #projects-sec{border:0}
.preview-projects #pane-pj,.preview-projects #pane-mm{pointer-events:none}
/* Website scene: a separate lens refracts the page backdrop; the app keeps its own tint and text. */
.glass-scene{overflow:visible!important;isolation:isolate}
.glass-scene>iframe{z-index:2;filter:none}
.scene-lens{position:absolute;z-index:1;pointer-events:none;background:linear-gradient(135deg,rgba(10,29,42,.56),rgba(23,21,37,.56));-webkit-backdrop-filter:blur(10px) saturate(115%);backdrop-filter:blur(10px) saturate(115%);box-shadow:0 12px 24px rgba(0,0,0,.22),inset 0 -1px 0 rgba(255,255,255,.12)}
@supports(backdrop-filter:url("#preview-refraction")){
  .scene-lens{backdrop-filter:url("#preview-refraction") blur(10px) saturate(115%)}
}
.web-preview.external-glass .pop,.web-preview.external-glass .card:is(.expanded,.collapsing){background:linear-gradient(to bottom,#000 25%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.scene-light .scene-lens{background:linear-gradient(135deg,rgba(226,237,244,.6),rgba(237,231,247,.6))}
@media(prefers-color-scheme:light){
  .web-preview.external-glass .pop{background:linear-gradient(to bottom,#f5f5f5 25%,transparent)}
}

@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.scene-lens{-webkit-backdrop-filter:none;backdrop-filter:none}}