/* DS 1.24: visible gradients with a quiet grid behind the working surface. */
body,.demo,.theme-background{
  isolation:isolate;
  background-image:var(--ambient-page-image);
  background-size:100% var(--ambient-page-height);
  background-repeat:no-repeat;
}
body{position:relative;min-height:100dvh}
.theme-background{position:relative;background-color:var(--surface-page);color:var(--text-primary)}
body::before,.demo::before,.theme-background::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:min(100%,var(--ambient-grid-height));
  z-index:-1;
  pointer-events:none;
  background-image:var(--ambient-grid-image);
  background-size:var(--ambient-grid-size) var(--ambient-grid-size);
  mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.65) 42%,transparent);
}
body::before{top:var(--layout-topbar)}
.demo{background-size:100% 100%}
.demo.device-mobile{--ambient-grid-size:32px}
.site-sidebar,.demo-sidebar,.topbar,.demo-topbar,.lab-tools,.lab-stage,#mobile-menu{
  background-image:var(--ambient-chrome-image);
}
.panel,.app-card,.lab,.theme-menu,.apps-panel{
  background-image:var(--ambient-panel-image);
}
/* Dense rows have an opaque reading surface above the decorative page grid. */
.table-wrap{background-color:var(--surface-primary)}
.button.primary,.button.primary:hover{
  background-image:var(--ambient-button-image);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),0 4px 12px rgb(var(--ambient-rgb) / var(--ambient-button-alpha));
  transition:background-color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast);
}
.button.primary:hover:not(:disabled):not([aria-disabled="true"]){
  background-image:var(--ambient-button-hover-image);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 4px 16px rgb(var(--ambient-rgb) / var(--ambient-button-hover-alpha));
}
.button.primary:active:not(:disabled):not([aria-disabled="true"]){
  background-color:var(--action-primary-active);
  background-image:none;
  box-shadow:inset 0 1px 2px rgb(0 0 0 / .08);
}
.button.primary:disabled{background-image:none;box-shadow:none}
.theme-card-preview{
  background-image:var(--ambient-grid-image),radial-gradient(ellipse at top right,rgb(var(--ambient-rgb) / var(--ambient-page-alpha)),transparent 85%);
  background-size:16px 16px,16px 16px,100% 100%;
}
.theme-card-preview>i{background-image:var(--ambient-chrome-image)}
.theme-card-preview b:first-child{
  background-image:linear-gradient(115deg,transparent,rgb(0 0 0 / .12));
  box-shadow:0 2px 8px rgb(var(--ambient-rgb) / var(--ambient-button-alpha));
}
@media(forced-colors:active),(prefers-contrast:more){
  body,.theme-background,.site-sidebar,.demo-sidebar,.topbar,.demo-topbar,.lab-tools,.lab-stage,#mobile-menu,.demo,.panel,.app-card,.lab,.theme-menu,.apps-panel,.theme-card-preview,.theme-card-preview>i,.button.primary,.button.primary:hover,.button.primary:active{
    background-image:none!important;
    box-shadow:none!important;
  }
  body::before,.demo::before,.theme-background::before{display:none}
  .theme-card-preview b:first-child{background-image:none;box-shadow:none}
}