/* The existing transparent artwork is also the alpha mask for line color.
   Keep body unisolated so glass panels sample the same ambient backdrop.
   The preview uses these same layers with its own frame dimensions. */
@media screen {
 /* Keep a real theme color behind the artwork for the status/overscroll
    areas managed by the browser. Decorative layers remain full-viewport. */
 html[data-suite-palette]:root{
  min-height:100%;background-color:var(--palette-panel,var(--palette-bg,#162019));color-scheme:dark;
 }
 html[data-suite-palette]:root:is([data-theme="light"],[data-suite-theme="light"]){color-scheme:light}
 @media (max-width:900px),(pointer:coarse){
  html[data-suite-palette]:root body{min-height:100vh;min-height:100dvh}
 }
 html[data-suite-pattern]:not([data-suite-pattern="none"]):root{
  background:var(--liquid-ambient,var(--palette-bg,#090d0b));
  background-color:var(--palette-panel,var(--palette-bg,#162019));
  background-attachment:fixed;
  --sg-pattern-artwork:var(--sg-pattern-landscape,none);
  --sg-pattern-aspect:1.5987903226;
  --sg-pattern-frame-width:calc(100vw / var(--sg-ui-scale,1));
  --sg-pattern-frame-height:calc(100vh / var(--sg-ui-scale,1));
 }
 html[data-suite-pattern]:not([data-suite-pattern="none"]):root body{background:transparent}
 @media (pointer:coarse){
  html[data-suite-pattern]:not([data-suite-pattern="none"]):root{background-attachment:scroll}
 }
 @media (max-width:767px),(orientation:portrait){
  html[data-suite-pattern]:not([data-suite-pattern="none"]):root{
   --sg-pattern-artwork:var(--sg-pattern-portrait,none);
   --sg-pattern-aspect:.5627990431;
  }
 }
 .sg-pattern-canvas{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;
  --sg-pattern-artwork:var(--sg-pattern-landscape,none);
  --sg-pattern-aspect:1.5987903226;
  --sg-pattern-frame-width:100cqw;
  --sg-pattern-frame-height:62.5cqw;
 }
 .sg-pattern-canvas[data-pattern-orientation="portrait"]{
  --sg-pattern-artwork:var(--sg-pattern-portrait,none);
  --sg-pattern-aspect:.5627990431;
  --sg-pattern-frame-height:177.7777778cqw;
 }
 /* A known detailed area of each original composition moves into the middle.
    The ellipse fades before an image edge; the artwork is never tiled. */
 html[data-suite-pattern],.sg-pattern-canvas{
  --sg-pattern-center-x:.25;--sg-pattern-center-y:.25;
  --sg-pattern-cover-bleed:1;--sg-pattern-center-content:"";
 }
 html[data-suite-pattern="waves"],.sg-pattern-canvas[data-sg-pattern="waves"]{--sg-pattern-center-x:.2;--sg-pattern-center-y:-.2}
 html[data-suite-pattern="industrial"],.sg-pattern-canvas[data-sg-pattern="industrial"]{--sg-pattern-center-x:-.25;--sg-pattern-center-y:-.25}
 html[data-suite-pattern="circuits"],.sg-pattern-canvas[data-sg-pattern="circuits"]{--sg-pattern-center-x:.3;--sg-pattern-center-y:.3}
 html[data-suite-pattern="mesh"],.sg-pattern-canvas[data-sg-pattern="mesh"]{--sg-pattern-center-x:.25;--sg-pattern-center-y:-.2}
 /* These square drawings already cover their whole canvas. The extra margin
    keeps every edge covered at the smallest 75% size, without repeating art.
    Resetting these variables on every canvas above keeps older previews intact
    when the application's selected background is one of these full-field motifs. */
 html[data-suite-pattern]:root:is([data-suite-pattern="hexagons"],[data-suite-pattern="dunes"],[data-suite-pattern="crystals"],[data-suite-pattern="weave"],[data-suite-pattern="constellations"]),
 .sg-pattern-canvas:is([data-sg-pattern="hexagons"],[data-sg-pattern="dunes"],[data-sg-pattern="crystals"],[data-sg-pattern="weave"],[data-sg-pattern="constellations"]){
  --sg-pattern-aspect:1;--sg-pattern-cover-bleed:1.3333333334;--sg-pattern-center-content:none;
 }
 html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::before,
 html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::after,
 .sg-pattern-canvas::before,.sg-pattern-canvas::after{
  position:absolute;inset:0;pointer-events:none;user-select:none;
  --sg-pattern-art-width:calc(max(var(--sg-pattern-frame-width),calc(var(--sg-pattern-frame-height) * var(--sg-pattern-aspect))) * var(--sg-pattern-scale,1) * var(--sg-pattern-cover-bleed,1));
  --sg-pattern-art-height:calc(var(--sg-pattern-art-width) / var(--sg-pattern-aspect));
 }
 html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::before,
 html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::after{position:fixed;z-index:-1}
 html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::before,
 .sg-pattern-canvas::before{
  content:"";
  background-image:var(--sg-pattern-artwork,none);
  background-repeat:no-repeat;background-position:center;
  background-size:var(--sg-pattern-art-width) auto;
  opacity:var(--sg-pattern-opacity,.35);
 }
 /* Browsers without alpha masks keep the original transparent black artwork. */
 @supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::before,
  .sg-pattern-canvas::before{
   background-image:none;background-color:var(--sg-pattern-color,#000000);
   -webkit-mask-image:var(--sg-pattern-artwork,none);mask-image:var(--sg-pattern-artwork,none);
   -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
   -webkit-mask-position:center;mask-position:center;
   -webkit-mask-size:var(--sg-pattern-art-width) auto;mask-size:var(--sg-pattern-art-width) auto;
   mask-mode:alpha;
  }
  html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::after,
  .sg-pattern-canvas::after{
   content:var(--sg-pattern-center-content,"");background-color:var(--sg-pattern-color,#000000);
   opacity:calc(var(--sg-pattern-opacity,.35) * .65);
   --sg-pattern-center-fade:radial-gradient(ellipse calc(var(--sg-pattern-art-width) * .19) calc(var(--sg-pattern-art-height) * .19) at 50% 50%,#000 28%,transparent 100%);
   --sg-pattern-center-position:calc(50% + var(--sg-pattern-art-width) * var(--sg-pattern-center-x)) calc(50% + var(--sg-pattern-art-height) * var(--sg-pattern-center-y));
   -webkit-mask-image:var(--sg-pattern-artwork,none),var(--sg-pattern-center-fade);mask-image:var(--sg-pattern-artwork,none),var(--sg-pattern-center-fade);
   -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
   -webkit-mask-position:var(--sg-pattern-center-position),center;mask-position:var(--sg-pattern-center-position),center;
   -webkit-mask-size:var(--sg-pattern-art-width) auto,100% 100%;mask-size:var(--sg-pattern-art-width) auto,100% 100%;
   -webkit-mask-composite:source-in;mask-composite:intersect;
   mask-mode:alpha;
  }
 }
 /* Only the decorative artwork moves. The viewport, glass surfaces and
    controls keep their original geometry, including the standalone height
    supplied by mobile-navigation.css. Overscan stays larger than the drift
    in both axes, so a moving composition never exposes a new canvas edge.
    Explicit preview opt-in keeps the pattern picker thumbnails still. */
 html[data-suite-pattern]:not([data-suite-pattern="none"])[data-suite-pattern-motion="on"]:root body::before,
 .sg-pattern-canvas[data-pattern-motion="on"]::before{
  transform-origin:50% 50%;
  animation:sg-pattern-drift 24s cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform;
 }
 html[data-suite-pattern]:not([data-suite-pattern="none"])[data-suite-pattern-motion="on"]:root body::after,
 .sg-pattern-canvas[data-pattern-motion="on"]::after{
  transform-origin:50% 50%;
  animation:sg-pattern-counter-drift 32s cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform;
 }
 @keyframes sg-pattern-drift{
  0%,100%{transform:translate3d(-4%,-3%,0) scale(1.2)}
  25%{transform:translate3d(4%,-1.5%,0) scale(1.24)}
  50%{transform:translate3d(3%,3.5%,0) scale(1.2)}
  75%{transform:translate3d(-3%,2%,0) scale(1.24)}
 }
 @keyframes sg-pattern-counter-drift{
  0%,100%{transform:translate3d(3%,2.5%,0) scale(1.16)}
  25%{transform:translate3d(-3%,3.5%,0) scale(1.22)}
  50%{transform:translate3d(-4%,-1.5%,0) scale(1.16)}
  75%{transform:translate3d(2%,-3%,0) scale(1.22)}
 }
 html[data-suite-pattern]:not([data-suite-pattern="none"])[data-suite-pattern-paused="true"][data-suite-pattern-motion="on"]:root body::before,
 html[data-suite-pattern]:not([data-suite-pattern="none"])[data-suite-pattern-paused="true"][data-suite-pattern-motion="on"]:root body::after,
 html[data-suite-pattern-paused="true"] .sg-pattern-canvas[data-pattern-motion="on"]::before,
 html[data-suite-pattern-paused="true"] .sg-pattern-canvas[data-pattern-motion="on"]::after{
  animation-play-state:paused!important;
  will-change:auto;
 }
 /* QG's existing concentration mode also keeps the page's own pseudo-layers
    still; its descendant-only animation rule does not include these layers. */
 html[data-sg-app="command-center"]:root body.concentration::before,
 html[data-sg-app="command-center"]:root body.concentration::after{
  animation:none!important;transform:none!important;will-change:auto!important;
 }
 @media (prefers-reduced-motion:reduce){
  html[data-suite-pattern][data-suite-pattern-motion="on"]:not([data-suite-pattern-motion-explicit="true"]):root body::before,
  html[data-suite-pattern][data-suite-pattern-motion="on"]:not([data-suite-pattern-motion-explicit="true"]):root body::after,
  .sg-pattern-canvas[data-pattern-motion="on"]:not([data-pattern-motion-explicit="true"])::before,
  .sg-pattern-canvas[data-pattern-motion="on"]:not([data-pattern-motion-explicit="true"])::after{
   animation:none!important;transform:none!important;will-change:auto!important;
  }
  /* Only the saved ON choice (or an explicit editor preview) overrides the
     automatic device preference. Other interface animations still reduce. */
  html[data-suite-pattern]:not([data-suite-pattern="none"])[data-suite-pattern-motion="on"][data-suite-pattern-motion-explicit="true"]:root body:not(.concentration)::before,
  .sg-pattern-canvas[data-pattern-motion="on"][data-pattern-motion-explicit="true"]::before{
   animation:sg-pattern-drift 24s cubic-bezier(.45,0,.55,1) infinite!important;
  }
  html[data-suite-pattern]:not([data-suite-pattern="none"])[data-suite-pattern-motion="on"][data-suite-pattern-motion-explicit="true"]:root body:not(.concentration)::after,
  .sg-pattern-canvas[data-pattern-motion="on"][data-pattern-motion-explicit="true"]::after{
   animation:sg-pattern-counter-drift 32s cubic-bezier(.45,0,.55,1) infinite!important;
  }
  /* Keep tab/background pauses stronger than the explicit animation shorthand. */
  html[data-suite-pattern-paused="true"][data-suite-pattern][data-suite-pattern-motion="on"][data-suite-pattern-motion-explicit="true"]:root body:not(.concentration)::before,
  html[data-suite-pattern-paused="true"][data-suite-pattern][data-suite-pattern-motion="on"][data-suite-pattern-motion-explicit="true"]:root body:not(.concentration)::after,
  html[data-suite-pattern-paused="true"] .sg-pattern-canvas[data-pattern-motion="on"][data-pattern-motion-explicit="true"]::before,
  html[data-suite-pattern-paused="true"] .sg-pattern-canvas[data-pattern-motion="on"][data-pattern-motion-explicit="true"]::after{
   animation-play-state:paused!important;
  }
 }
 @media (forced-colors:active),(prefers-contrast:more){
  html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::before,
  html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::after,
  .sg-pattern-canvas::before,.sg-pattern-canvas::after{display:none}
 }
}
@media print{
 html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::before,
 html[data-suite-pattern]:not([data-suite-pattern="none"]):root body::after,
 .sg-pattern-canvas{display:none!important}
}

/* Galaxie owns a full-colour canvas. Disable the line masks immediately,
   before its optional renderer stylesheet arrives, to prevent a colour flash. */
@media screen {
 html[data-suite-pattern="galaxy"]:root body::before,
 html[data-suite-pattern="galaxy"]:root body::after,
 .sg-pattern-canvas[data-sg-pattern="galaxy"]::before,
 .sg-pattern-canvas[data-sg-pattern="galaxy"]::after {
  content:none!important;display:none!important;animation:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;
 }
}

/* Full-colour nature scenes own their canvas; suppress monochrome masks
   immediately, including while the optional renderer is still loading. */
@media screen {
 html:is([data-suite-pattern="ocean"],[data-suite-pattern="storm"],[data-suite-pattern="embers"],[data-suite-pattern="forest"]):root body::before,
 html:is([data-suite-pattern="ocean"],[data-suite-pattern="storm"],[data-suite-pattern="embers"],[data-suite-pattern="forest"]):root body::after,
 .sg-pattern-canvas:is([data-sg-pattern="ocean"],[data-sg-pattern="storm"],[data-sg-pattern="embers"],[data-sg-pattern="forest"])::before,
 .sg-pattern-canvas:is([data-sg-pattern="ocean"],[data-sg-pattern="storm"],[data-sg-pattern="embers"],[data-sg-pattern="forest"])::after {
  content:none!important;display:none!important;animation:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;
 }
}