/* Personal photographs become wallpaper without changing any media or window surface. */
.wallpaper-effect-filters{position:absolute;overflow:hidden;pointer-events:none}
html[data-wallpaper-effect="infrared"][data-wallpaper-renderer="css"] body::before{filter:url(#hyd-infrared-photo);animation:wallpaper-soft-drift 28s ease-in-out infinite alternate;animation-play-state:running;will-change:transform}
html[data-wallpaper-photo] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#08132147,#08132116 48%,#08132138)}
html[data-theme][data-wallpaper-photo]{--wallpaper-title-ink:#fff;--wallpaper-title-muted:#f8f3f4;--wallpaper-title-shadow:0 1px 2px #000,0 2px 7px #000d;--desktop-caption-ink:#fff;--desktop-caption-shadow:0 1px 2px #000,0 0 5px #000,0 0 9px #000c}
html[data-theme][data-wallpaper-photo] #home .desktop-icons b{background:#14131a7d;box-shadow:0 0 4px #17121a42;border-radius:2px}
html[data-theme] #desktop-personalise{width:790px;max-width:calc(100vw - 28px)}
#desktop-personalise .photo-wallpaper-picker{margin:0 0 18px}
#desktop-personalise .photo-wallpaper-picker h3{margin:0 0 13px;font:700 14px/1.4 var(--desktop-font);color:var(--paper-text)}
#desktop-personalise .photo-wallpaper-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}
#desktop-personalise .wallpaper-preview{margin:0;min-width:0}
#desktop-personalise .wallpaper-preview-scene{position:relative;height:204px;overflow:hidden;border:1px solid #777b85;box-shadow:inset 0 0 0 2px #fff1,0 2px 4px #0005;background:var(--scene) center/cover no-repeat;border-radius:3px}
#desktop-personalise .wallpaper-preview-scene img{width:100%;height:100%;object-fit:cover}
html[data-wallpaper-renderer="css"] #desktop-personalise .wallpaper-preview[data-effect="infrared"] img{filter:url(#hyd-infrared-photo)}
#desktop-personalise #wallpaper-preview-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
html[data-wallpaper-effect="infrared"][data-wallpaper-renderer="canvas"] body::before{background-image:var(--wallpaper-infrared,var(--scene));filter:none;animation:wallpaper-soft-drift 28s ease-in-out infinite alternate;animation-play-state:running;will-change:transform}
#desktop-personalise .wallpaper-preview-scene>span{position:absolute;inset:19px 9px auto;text-align:center;color:#fff;text-shadow:0 1px 3px #000,0 0 8px #000;font:700 15px/1.3 var(--desktop-font)}
#desktop-personalise .wallpaper-preview figcaption{display:grid;gap:4px;padding:10px 0 3px}
#desktop-personalise .wallpaper-preview figcaption strong{font-size:12px;line-height:1.4;overflow-wrap:anywhere}
#desktop-personalise .wallpaper-preview figcaption small{font-size:10px;line-height:1.4;color:var(--paper-muted)}
#desktop-personalise .wallpaper-effect-options{gap:9px 12px;margin:10px 0 0;padding:10px 0 0;border:0;border-top:1px solid var(--paper-edge);border-radius:0;font-size:11px}
#desktop-personalise .wallpaper-effect-options legend{margin:0 0 4px;padding:0 5px 0 0;font-size:11px}
#desktop-personalise .wallpaper-effect-options small{font-size:10px}
#desktop-personalise .photo-wallpaper-library>label{display:flex;align-items:center;gap:8px;font:11px/1.4 var(--desktop-font)}
#desktop-personalise #wallpaper-photo-search{flex:1;min-width:0;width:100%;height:29px;padding:4px 7px;background:var(--paper-inset);color:var(--paper-text);border:1px solid var(--paper-edge);border-radius:3px;font:11px/1.4 var(--desktop-font)}
#desktop-personalise #wallpaper-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:342px;overflow:auto;padding:4px 5px 4px 2px;margin:8px -3px 0;scrollbar-width:thin}
#desktop-personalise #wallpaper-photo-grid button{min-width:0;display:flex;flex-direction:column;gap:5px;padding:4px;background:var(--paper-inset);color:var(--paper-text);border:1px solid var(--paper-edge);border-radius:2px;font:10px/1.3 var(--desktop-font);text-align:left;box-shadow:none}
#desktop-personalise #wallpaper-photo-grid button img{width:100%;height:64px;object-fit:cover;border:0}
#desktop-personalise #wallpaper-photo-grid button span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:26px}
#desktop-personalise #wallpaper-photo-grid button[aria-pressed="true"]{outline:2px solid var(--paper-accent);outline-offset:0;background:var(--paper-panel)}
#desktop-personalise #wallpaper-photo-count{margin:7px 0 0;color:var(--paper-muted);font:10px/1.4 var(--desktop-font)}
#desktop-personalise .classic-wallpaper-options{padding:12px 0 2px;margin-bottom:18px;border-top:1px solid var(--paper-edge);border-bottom:1px solid var(--paper-edge)}
#desktop-personalise .classic-wallpaper-options summary{font:700 12px/1.4 var(--desktop-font);cursor:pointer;margin-bottom:12px}
#desktop-personalise .classic-wallpaper-options fieldset{margin:0;border:0}
#desktop-personalise .classic-wallpaper-options .wallpaper-options>div{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
#desktop-personalise .classic-wallpaper-options button{font-size:10px}
#world #home .desktop-photo-tools .desktop-photo-wallpaper{min-width:80px;width:auto;flex:0 0 auto;padding:4px 9px;font:11px/1.3 var(--desktop-font)}
@media(max-width:620px){
 #desktop-personalise .photo-wallpaper-layout{grid-template-columns:1fr;gap:14px}
 #desktop-personalise .wallpaper-preview-scene{height:164px}
 #desktop-personalise #wallpaper-photo-grid{max-height:260px;grid-template-columns:repeat(3,minmax(0,1fr))}
 #desktop-personalise .classic-wallpaper-options .wallpaper-options>div{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){html[data-wallpaper-effect="infrared"] body::before{animation:none!important;will-change:auto}}

html:is([data-wallpaper-effect="original"],[data-wallpaper-effect="macpaint"],[data-wallpaper-effect="ascii"])[data-wallpaper-renderer="canvas"] body::before{background-image:var(--wallpaper-infrared,var(--scene));filter:none;animation:none;transform:none}

/* The original CSS image must not paint over the processed GPU canvas. */
html[data-wallpaper-renderer="webgl"] body::before{visibility:hidden}
html[data-wallpaper-renderer="webgl"] body.cinema-expanded #world::before{visibility:hidden}
html[data-wallpaper-effect="infrared"][data-wallpaper-renderer="css"] body::before{filter:sepia(.4) hue-rotate(300deg) saturate(.8) url(#hyd-infrared-photo)}

/* The intro hosts the live desktop canvas; retain the same treatment while it loads or falls back. */
html[data-wallpaper-effect="infrared"][data-wallpaper-renderer="css"] #hyd-boot .hyd-boot-wallpaper{filter:sepia(.4) hue-rotate(300deg) saturate(.8) url(#hyd-infrared-photo)}
html[data-wallpaper-renderer="canvas"] #hyd-boot .hyd-boot-wallpaper{background-image:var(--wallpaper-infrared,var(--scene))}
#hyd-boot .hyd-boot-wallpaper #hyd-wallpaper-effect{position:absolute;z-index:0}
