.living-settings{display:grid;gap:16px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.living-settings label{display:grid;gap:8px}.living-settings select{width:100%}
.living-backdrop{pointer-events:none;isolation:isolate;animation:living-arrive .9s ease both}
.living-backdrop>img{position:absolute;inset:0;animation:living-camera 36s ease-in-out infinite alternate;animation-play-state:paused}
.living-backdrop.living-visible>img{animation-play-state:running}
.living-backdrop::after{z-index:3;pointer-events:none}
.living-backdrop>.living-previous{z-index:1;opacity:1;transition:opacity .9s ease}
.living-backdrop>.living-previous.living-fade{opacity:0}
.living-weather{position:absolute;inset:-12%;z-index:2;pointer-events:none;opacity:.25;animation:living-drift 18s linear infinite;animation-play-state:paused}
.living-visible .living-weather{animation-play-state:running}
[data-weather=none] .living-weather{display:none}
[data-weather=rain] .living-weather{background:linear-gradient(105deg,transparent 46%,#c8e0ec66 49%,transparent 52%);background-size:55px 90px;animation:living-rain 1.4s linear infinite}
[data-weather=snow] .living-weather{background-image:radial-gradient(circle,#fff 1px,transparent 3px),radial-gradient(circle,#fff9 2px,transparent 4px);background-size:91px 137px,173px 191px;animation-duration:14s;opacity:.45}
[data-weather=fog] .living-weather{background:radial-gradient(ellipse at 20% 65%,#dce6e999,transparent 50%),radial-gradient(ellipse at 80% 50%,#ccd6dc77,transparent 45%);animation-duration:24s;opacity:.35}
[data-weather=embers] .living-weather{background-image:radial-gradient(ellipse,#ffbf61cc 1px,transparent 4px);background-size:151px 193px;animation-direction:reverse}
[data-weather=dust] .living-weather{background-image:radial-gradient(circle,#ffe6a999 1px,transparent 2px);background-size:113px 97px;animation-duration:28s}
[data-weather=fog] .living-weather,[data-weather=dust] .living-weather{animation-direction:alternate}
.living-portrait{overflow:hidden}.living-portrait img{transition:transform .7s ease}
@media(hover:hover) and (pointer:fine){
  html:not([data-motion=off]) .living-portrait[data-tilt] img{transform:scale(1.045)}
  html:not([data-motion=off]) .living-portrait[data-tilt$=left] img{transform:scale(1.045) translateX(1.2%)}
  html:not([data-motion=off]) .living-portrait[data-tilt$=right] img{transform:scale(1.045) translateX(-1.2%)}
  html:not([data-motion=off]) .living-portrait[data-tilt^=up] img{transform:scale(1.045) translateY(1.2%)}
  html:not([data-motion=off]) .living-portrait[data-tilt^=down] img{transform:scale(1.045) translateY(-1.2%)}
}
@media(hover:none){html:not([data-motion=off]) dialog[open] .living-portrait.living-visible img{animation:living-portrait-reveal 1.4s ease both}}
[data-motion=full] .living-backdrop>img{animation-name:living-camera-full}
[data-motion=off] .living-backdrop>img{animation:none;transform:none}
[data-motion=off] .living-weather{display:none}
[data-motion=off] .living-previous{transition:none}
[data-motion=off] .living-backdrop{animation:none}
.living-paused .living-backdrop>img,.living-paused .living-weather,.living-paused .living-portrait img,.living-backdrop:not(.living-visible) .living-weather{animation-play-state:paused!important}
@keyframes living-camera{from{transform:scale(1.035) translate(-.3%,0)}to{transform:scale(1.065) translate(.3%,-.4%)}}
@keyframes living-camera-full{from{transform:scale(1.04) translate(-.6%,.3%)}to{transform:scale(1.1) translate(.6%,-.6%)}}
@keyframes living-drift{from{transform:translate(-2%,-4%)}to{transform:translate(2%,4%)}}
@keyframes living-rain{from{background-position:0 0}to{background-position:-110px 180px}}
@keyframes living-portrait-reveal{from{transform:scale(1.035)}to{transform:scale(1)}}
@keyframes living-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.living-backdrop>img,.living-weather,.living-portrait img{animation:none!important;transition:none!important;transform:none!important}.living-weather{display:none}.living-previous{transition:none!important}}