/* Kitcherette — authoritative application background system.
   One renderer owns image, tint, blur, brightness and transitions for every route.
   Routes choose only the image/palette data; they do not implement background behaviour. */
:root{
  --bg-image-weight:.48;
  --bg-overlay-weight:.24;
  --bg-blur:8px;
  --bg-saturation:.90;
  --bg-brightness:.95;
  --bg-tint:248,247,242;
  --kitcherette-bg-a-opacity:1;
  --kitcherette-bg-b-opacity:0;
}
html{
  min-height:100%;
  background:#e9e5da!important;
  background-image:none!important;
}
html:has(body.dark-mode){background:#3b403a!important;}
body,body.dark-mode{
  min-height:100%;
  position:relative!important;
  isolation:isolate;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}
/* Retire every historical pseudo/root renderer. */
body::before,body::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
#kitcherette-background-root{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:transparent;
}
#kitcherette-background-root::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:rgba(var(--bg-tint),var(--bg-overlay-weight));
  transition:background-color .65s cubic-bezier(.2,.7,.2,1);
}
.kitcherette-background-layer{
  position:absolute;
  inset:-16px;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  filter:blur(var(--bg-blur)) saturate(var(--bg-saturation)) brightness(var(--bg-brightness));
  transform:scale(1.025);
  z-index:1;
  will-change:opacity;
  transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),filter .65s cubic-bezier(.2,.7,.2,1);
}
.kitcherette-background-layer-a{
  opacity:calc(var(--bg-image-weight) * var(--kitcherette-bg-a-opacity));
}
.kitcherette-background-layer-b{
  opacity:calc(var(--bg-image-weight) * var(--kitcherette-bg-b-opacity));
}
/* Keep application content above the shared renderer.
   v381 placed the renderer at z-index:-1 inside an isolated body stacking
   context, which put it behind the opaque html canvas and made every image
   invisible.  The renderer is now the bottom layer of the body stack. */
body > main{
  position:relative;
  z-index:1;
}
/* Route-sized shells are windows onto the single renderer. */
#app,.app-shell,main,.main,.content,.content-wrap,.app-view,.page,.screen,
.tab-page,.tab-content,.view,.view-content,.page-content,.screen-content,[id^="view-"]{
  background-color:transparent!important;
  background-image:none!important;
}
@media(prefers-reduced-motion:reduce){
  .kitcherette-background-layer{transition:none!important;}
}