/* Focused examples float above the softly blurred service page. */
.demo-dialog,
.order-module-dialog{
 width:min(1160px,calc(100vw - 64px));
 height:min(820px,calc(100dvh - 72px));
 max-width:none;max-height:none;margin:auto;padding:0;
 border:0;border-radius:0;background:transparent!important;
 color:#f0f2f3;box-shadow:none;overflow:hidden;
}
.demo-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.order-module-dialog[open]{display:flex;flex-direction:column}
.demo-dialog::backdrop,
.order-module-dialog::backdrop{
 background:rgba(5,9,12,.46);
 -webkit-backdrop-filter:blur(18px);
 backdrop-filter:blur(18px);
}
.demo-dialog .dialog-top,
.order-module-dialog .order-module-dialog-top{
 display:flex;align-items:center;justify-content:space-between;gap:20px;
 padding:0 0 14px;border:0;background:transparent;flex-shrink:0;
}
.demo-dialog .dialog-top h2,
.order-module-dialog .order-module-dialog-top h2{
 margin:0;font-size:18px;line-height:1.3;font-weight:500;letter-spacing:-.02em;
 color:#f0f2f3;text-shadow:0 2px 14px #0009;
}
.demo-dialog .dialog-top .eyebrow,
.order-module-dialog .order-module-dialog-top>div>span{
 display:none;
}
.demo-dialog .dialog-top [data-close-demo],
.order-module-dialog .order-module-dialog-top button[data-order-module-close]{
 display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
 width:34px;height:34px;min-width:34px;min-height:34px;padding:8px;border:0;
 border-radius:50%;background:transparent;color:#f0f2f3;
 font:400 13px/1.3 Supreme,Arial,sans-serif;text-shadow:none;
}
.demo-dialog .dialog-top [data-close-demo] svg,
.order-module-dialog .order-module-dialog-top button[data-order-module-close] svg{width:18px;height:18px;flex:none}
.demo-dialog .dialog-top [data-close-demo]:focus-visible,
.order-module-dialog .order-module-dialog-top button[data-order-module-close]:focus-visible{
 outline:2px solid #fff;outline-offset:3px;
}
.demo-dialog .dialog-bottom,
.order-module-dialog .order-module-dialog-bottom{display:none}
.demo-dialog iframe,
.order-module-dialog iframe{
 display:block;width:100%;height:100%;min-height:0;border:0;
 background:transparent!important;flex:1;
}

/* Embedded documents need transparent canvases too. Standalone demo URLs
   intentionally retain their dark page background. */
html[data-demo-embedded][data-demo-mode],
html[data-demo-embedded][data-demo-mode] body,
html[data-demo-embedded][data-demo-mode] #demo-shell,
html[data-demo-embedded][data-demo-mode] #demo-shell>#experience,
html:has(body.order-module-embedded[data-order-module]),
body.order-module-embedded[data-order-module],
body.order-module-embedded[data-order-module] :is(#main,#demo,#demo>.wrap){
 background:transparent!important;
}
html[data-demo-embedded][data-demo-mode],
html[data-demo-embedded][data-demo-mode] body,
html:has(body.order-module-embedded[data-order-module]),
body.order-module-embedded[data-order-module]{color-scheme:normal!important;scrollbar-width:thin;scrollbar-color:#596269 transparent}
html[data-demo-embedded][data-demo-mode] #demo-shell>#experience{
 padding:4px 4px 20px!important;
}
html[data-demo-mode="module"] #demo-shell :is(.product-app,.management-demo,.app-panel){
 background:transparent!important;border:0;box-shadow:none;
}
html[data-demo-mode="module"] #demo-shell :is(.workout-exercise,.session-summary,.meal-row,.community-grid>article,.nutrition-summary>div,.progress-totals>div,.session-history,.app-empty){
 background:rgba(12,17,21,.94);border-color:#ffffff24;
 box-shadow:0 8px 26px #0002;
}
html[data-demo-mode="module"] #demo-shell :is(.execution-result,.pass-detail,.member-offers){
 background:rgba(12,17,21,.92);border:1px solid #ffffff1f;
 border-radius:16px;padding:22px;
}
html[data-demo-mode="module"] #demo-shell .management-demo .week-grid article{
 padding:24px;background:rgba(12,17,21,.94);border:1px solid #ffffff24;border-radius:16px;
}
html[data-demo-mode="module"] #demo-shell :is(.panel-heading,.planner-head){
 background:transparent;border:0;
}
html[data-gym-module="workout"] #demo-shell .app-tabs{
 position:relative;top:auto;background:transparent;border-color:#ffffff24;
}
html[data-demo-mode="module"] #demo-shell :is(.flow-note,.execution-demo-note,.wallet-pass-caption,.gym-tour-caption,.planner-footer){
 color:#c3cbd1;text-shadow:0 1px 7px #000a;
}

/* The map itself is the content, without a second heading or containing box. */
html[data-gym-module="map"] #demo-shell [data-gym-panel="map"]>.panel-heading{display:none}
html[data-input-mode="pointer"][data-demo-mode] #demo-shell [data-tour-viewport]:focus-visible{outline:none;box-shadow:none}
html[data-gym-module="map"] #demo-shell .gym-tour-room:not(.is-expanded){
 height:clamp(360px,calc(100dvh - 118px),760px);border:0;border-radius:16px;
}
html[data-gym-module="map"] #demo-shell .gym-tour-quick{border-color:#ffffff24}
html[data-spaces-module] #demo-shell .tour-journey{background:transparent}
html[data-spaces-module] #demo-shell .tour-scene:not(:fullscreen){
 height:clamp(440px,calc(100dvh - 110px),760px);min-height:440px;
 border:0;border-radius:16px;
}
html[data-spaces-module] #demo-shell .tour-app>.flow-note{background:transparent}

/* Order's actual phone, terminal and ticket surfaces remain solid and legible. */
body.order-module-embedded[data-order-module] #main{padding:4px 4px 20px}
body.order-module-embedded[data-order-module] .order-module-intro{background:transparent}
body.order-module-embedded[data-order-module] :is(.kitchen,.ticket){
 background:rgba(12,17,21,.96);border-color:#ffffff29;
}
body.order-module-embedded[data-order-module] .order-module-note{
 color:#c3cbd1;text-shadow:0 1px 7px #000a;
}
@media(hover:hover) and (pointer:fine){
 .demo-dialog .dialog-top [data-close-demo]:hover,
 .order-module-dialog .order-module-dialog-top button[data-order-module-close]:hover{background:#ffffff14}
}
@media(max-width:640px){
 .demo-dialog,.order-module-dialog{
  width:calc(100vw - 24px);height:calc(100dvh - 32px);
  margin:auto;border:0;border-radius:0;
 }
 .demo-dialog .dialog-top,.order-module-dialog .order-module-dialog-top{
  gap:12px;padding:0 0 10px;
 }
 .demo-dialog .dialog-top h2,.order-module-dialog .order-module-dialog-top h2{
  font-size:16px;overflow-wrap:anywhere;
 }
 .demo-dialog .dialog-top [data-close-demo],.order-module-dialog .order-module-dialog-top button[data-order-module-close]{
  padding:8px;font-size:12px;
 }
 html[data-demo-mode="module"] #demo-shell :is(.execution-result,.pass-detail,.member-offers),
 html[data-demo-mode="module"] #demo-shell .management-demo .week-grid article{padding:18px}
 html[data-gym-module="map"] #demo-shell .gym-tour-room:not(.is-expanded){
  height:clamp(360px,calc(100dvh - 135px),640px);border-radius:12px;
 }
 html[data-spaces-module] #demo-shell .tour-scene:not(:fullscreen){
  height:540px;min-height:540px;border-radius:12px;
 }
}
@supports not (backdrop-filter:blur(1px)){
 .demo-dialog::backdrop,.order-module-dialog::backdrop{
  background:rgba(5,9,12,.88);
 }
}