/* Sync wallpaper and Liquid Glass (Sync Home): a theme's own picture or the person's, fixed behind the page under a scrim;
   content sheets turn to glass over it. sync-theme.js sets <html data-wall="christmas|w…" data-glass="subtle|standard|strong">,
   data-wall-tone (dark|light: the picture's own brightness, for text that sits on it) and data-lowfx (a device too slow for
   blur). Loaded after sync-themes.css. Design and the measured contrast: docs/sync-themes.md "Wallpaper and glass". */
html[data-wall] { background: var(--ground) }
html[data-wall] body { background: transparent }
.sbx-wall { display: none }
html[data-wall] .sbx-wall { display: block; position: fixed; z-index: -1; left: 0; right: 0; top: 0; height: 100lvh; pointer-events: none; background: var(--ground) }
.sbx-wall::before, .sbx-wall::after { content: ''; position: absolute; inset: 0 }
.sbx-wall::before { background-position: center; background-size: cover; background-repeat: no-repeat }
html[data-wall^=w] .sbx-wall::before { background-image: var(--wall-url) }
/* the theme packs: AVIF where the browser has it, JPEG otherwise; a 0.5 KB picture under it paints at once */
html[data-wall=christmas] .sbx-wall::before {
  background-image: url(/wallpapers/christmas-portrait.jpg), url(data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAaAAwDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDAQb/xAAhEAABBAIABwAAAAAAAAAAAAABAAIRIQMxEzJRYXGBsf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/EABkRAQADAQEAAAAAAAAAAAAAAAEAAhEhMf/aAAwDAQACEQMRAD8A47gh9gye6R7QHQQKTkAV9Wy3JbgJ1tDYrVwHYEjrJKmcTp5o9IzK503ws8kq8n//2Q==);
  background-image: image-set(url(/wallpapers/christmas-portrait.avif) type('image/avif'), url(/wallpapers/christmas-portrait.jpg) type('image/jpeg')), url(data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAaAAwDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDAQb/xAAhEAABBAIABwAAAAAAAAAAAAABAAIRIQMxEzJRYXGBsf/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/EABkRAQADAQEAAAAAAAAAAAAAAAEAAhEhMf/aAAwDAQACEQMRAD8A47gh9gye6R7QHQQKTkAV9Wy3JbgJ1tDYrVwHYEjrJKmcTp5o9IzK503ws8kq8n//2Q==) }
@media (min-aspect-ratio: 4 / 5) { html[data-wall=christmas] .sbx-wall::before {
  background-image: url(/wallpapers/christmas-landscape.jpg), url(data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAASABgDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBv/EACAQAAICAQMFAAAAAAAAAAAAAAABAiERAxIxIjJRYXH/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAwH/xAAXEQEBAQEAAAAAAAAAAAAAAAAAAQIR/9oADAMBAAIRAxEAPwDjVKLk6ZrhHb01d+ioxpzrL4JtSTSz5Jq65balRzKrugXmOE7S4AJWQ7DdLif0AJ1OsADYx//Z);
  background-image: image-set(url(/wallpapers/christmas-landscape.avif) type('image/avif'), url(/wallpapers/christmas-landscape.jpg) type('image/jpeg')), url(data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAASABgDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBv/EACAQAAICAQMFAAAAAAAAAAAAAAABAiERAxIxIjJRYXH/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAwH/xAAXEQEBAQEAAAAAAAAAAAAAAAAAAQIR/9oADAMBAAIRAxEAPwDjVKLk6ZrhHb01d+ioxpzrL4JtSTSz5Jq65balRzKrugXmOE7S4AJWQ7DdLif0AJ1OsADYx//Z) } }
/* Christmas in light mode has its own bright picture (a red velvet bow on a pine sprig over a white, softly lit ground) */
html[data-wall=christmas][data-mode=light] .sbx-wall::before {
  background-image: url(/wallpapers/christmas-light-portrait.jpg), url(data:image/jpeg;base64,/9j/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAaAAwDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAABAUGAv/EACcQAAIBBAECBQUAAAAAAAAAAAECAwAEBRESITEGExRBoVFhcYHh/8QAFQEBAQAAAAAAAAAAAAAAAAAABAH/xAAdEQACAgEFAAAAAAAAAAAAAAAAAQIDEgQRITFh/9oADAMBAAIRAxEAPwAvL38ObtnureEpJYTKw5HZZD7n9iicVavkbT1KSNEGIHEfYAbpCsd7jbSZiHEFxHwYlNqw/NV3hQrJgonjA0xOx9D2o8Hk+RmqpjW8odP0i2yxkwJhG149Cu+jbP8AfimOJy0wxsMNq5jSFeBBPc9yfmpBCfIcbOietYZmXQViOnsaqWwVn//Z);
  background-image: image-set(url(/wallpapers/christmas-light-portrait.avif) type('image/avif'), url(/wallpapers/christmas-light-portrait.jpg) type('image/jpeg')), url(data:image/jpeg;base64,/9j/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAaAAwDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAABAUGAv/EACcQAAIBBAECBQUAAAAAAAAAAAECAwAEBRESITEGExRBoVFhcYHh/8QAFQEBAQAAAAAAAAAAAAAAAAAABAH/xAAdEQACAgEFAAAAAAAAAAAAAAAAAQIDEgQRITFh/9oADAMBAAIRAxEAPwAvL38ObtnureEpJYTKw5HZZD7n9iicVavkbT1KSNEGIHEfYAbpCsd7jbSZiHEFxHwYlNqw/NV3hQrJgonjA0xOx9D2o8Hk+RmqpjW8odP0i2yxkwJhG149Cu+jbP8AfimOJy0wxsMNq5jSFeBBPc9yfmpBCfIcbOietYZmXQViOnsaqWwVn//Z) }
@media (min-aspect-ratio: 4 / 5) { html[data-wall=christmas][data-mode=light] .sbx-wall::before {
  background-image: url(/wallpapers/christmas-light-landscape.jpg), url(data:image/jpeg;base64,/9j/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAQABgDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCBgf/xAAhEAACAQQCAgMAAAAAAAAAAAABAgMABAUREiEGMZGhsf/EABYBAQEBAAAAAAAAAAAAAAAAAAMBAv/EABsRAAIDAAMAAAAAAAAAAAAAAAECAAMRIWKB/9oADAMBAAIRAxEAPwDSA6AhCw2R0KpGXzMVhlri1gjkaNZA7oDoMy6J+aaYq7EOTmx9+4M0YAhZvbr3qkXkmLMNjNftOHmeY8112uz0fyicnOI9Qrwl/JAZBsveW88gSOdpjCUVdbiOj9HdFKY8vDyx0zRAPBJtyOiSPWzRWV7SWspbUGCf/9k=);
  background-image: image-set(url(/wallpapers/christmas-light-landscape.avif) type('image/avif'), url(/wallpapers/christmas-light-landscape.jpg) type('image/jpeg')), url(data:image/jpeg;base64,/9j/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAQABgDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCBgf/xAAhEAACAQQCAgMAAAAAAAAAAAABAgMABAUREiEGMZGhsf/EABYBAQEBAAAAAAAAAAAAAAAAAAMBAv/EABsRAAIDAAMAAAAAAAAAAAAAAAECAAMRIWKB/9oADAMBAAIRAxEAPwDSA6AhCw2R0KpGXzMVhlri1gjkaNZA7oDoMy6J+aaYq7EOTmx9+4M0YAhZvbr3qkXkmLMNjNftOHmeY8112uz0fyicnOI9Qrwl/JAZBsveW88gSOdpjCUVdbiOj9HdFKY8vDyx0zRAPBJtyOiSPWzRWV7SWspbUGCf/9k=) } }
/* the scrim: the picture dimmed a little more at the top (the page title) and the bottom (the tab bar), as iOS does */
html[data-wall] .sbx-wall::after { background: linear-gradient(180deg, rgba(8, 3, 5, .42) 0, rgba(8, 3, 5, .14) 26%, rgba(8, 3, 5, .1) 60%, rgba(8, 3, 5, .34) 100%) }
html[data-wall][data-wall-tone=light] .sbx-wall::after { background: linear-gradient(180deg, rgba(255, 252, 250, .5) 0, rgba(255, 252, 250, .2) 26%, rgba(255, 252, 250, .16) 60%, rgba(255, 252, 250, .4) 100%) }

/* the picture itself softened (data-wall-blur=on: tablets and desktops unless the person chose Off; a phone keeps it sharp): a
   little blur, a touch darker and calmer, so busy lights blend and text reads; the strength sets how much. The layer reaches past
   the screen so the blurred edge never shows; it is drawn once (its own layer), not on every scroll */
html[data-wall] { --wall-blur: 7px; --wall-dim: .9; --wall-sat: .9 } html[data-wall][data-glass=subtle] { --wall-blur: 5px } html[data-wall][data-glass=strong] { --wall-blur: 10px }
html[data-wall][data-mode=light] { --wall-dim: .96 }
html[data-wall][data-wall-blur=on] .sbx-wall { overflow: hidden }
html[data-wall][data-wall-blur=on] .sbx-wall::before { inset: calc(var(--wall-blur) * -3); filter: blur(var(--wall-blur)) brightness(var(--wall-dim)) saturate(var(--wall-sat)); will-change: transform }
@media (prefers-reduced-transparency: reduce) { html[data-wall][data-wall-blur=on] .sbx-wall::before { filter: blur(var(--wall-blur)) brightness(.85) saturate(.85) } }

/* glass, per strength: how much of the theme's tint, how much blur, how much colour comes through (Strong = iOS home screen) */
html[data-theme][data-wall] { --gl-k: 50%; --gl-sheet: 72%; --gl-blur: 32px; --gl-sat: 175%;
  --on-wall: #fbf6f4; --on-wall2: rgba(251, 246, 244, .84); --on-wall-glow: rgba(0, 0, 0, .42); --on-wall-sh: 0 0 1px rgba(0, 0, 0, .7), 0 0 4px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .6), 0 0 12px rgba(0, 0, 0, .7), 0 0 26px rgba(0, 0, 0, .45) }
html[data-theme][data-wall][data-glass=subtle] { --gl-k: 70%; --gl-sheet: 84%; --gl-blur: 24px; --gl-sat: 150% }
html[data-theme][data-wall][data-glass=strong] { --gl-k: 30%; --gl-sheet: 60%; --gl-blur: 40px; --gl-sat: 195% }
/* light sheets carry dark text: over a dark picture they need a thicker frost to keep every text pair at 4.5:1 (measured) */
html[data-theme][data-wall][data-mode=light] { --gl-k: 92%; --gl-sheet: 95% }
html[data-theme][data-wall][data-mode=light][data-glass=subtle] { --gl-k: 95%; --gl-sheet: 97% }
html[data-theme][data-wall][data-mode=light][data-glass=strong] { --gl-k: 88%; --gl-sheet: 93% }
/* a light picture (Christmas light, a bright photo) under light glass: genuinely see-through, white-tinted, the colour coming
   through (iOS light widgets); dark text stays at 4.5:1 on the measured composite because the picture behind is bright */
html[data-theme][data-wall][data-mode=light][data-wall-tone=light] { --gl-k: 76%; --gl-sheet: 84%; --gl-sat: 140% }
html[data-theme][data-wall][data-mode=light][data-wall-tone=light][data-glass=subtle] { --gl-k: 84%; --gl-sheet: 90% }
html[data-theme][data-wall][data-mode=light][data-wall-tone=light][data-glass=strong] { --gl-k: 72%; --gl-sheet: 80%; --gl-sat: 140% }
html[data-wall][data-mode=light][data-wall-tone=light] { --wall-dim: 1.02; --wall-sat: .9 }
/* secondary and caption text a step stronger over a picture than over a plain ground */
html[data-theme][data-wall] { --tx2: color-mix(in srgb, var(--tx1) 86%, transparent); --tx3: color-mix(in srgb, var(--tx1) 80%, transparent) }
html[data-theme][data-wall][data-mode=dark] { --tx2: color-mix(in srgb, var(--tx1) 88%, transparent); --tx3: color-mix(in srgb, var(--tx1) 76%, transparent) }
html[data-theme][data-wall][data-wall-tone=light] { --on-wall: #1c1416; --on-wall2: rgba(28, 20, 22, .84); --on-wall-glow: rgba(255, 255, 255, .45); --on-wall-sh: 0 0 1px rgba(255, 255, 255, .7), 0 0 10px rgba(255, 255, 255, .7), 0 0 22px rgba(255, 255, 255, .45) }
/* Christmas light: words on the picture in burgundy, with the white halo */
html[data-theme=christmas][data-wall][data-wall-tone=light] { --on-wall: #4a1626; --on-wall2: rgba(74, 22, 38, .86) }
/* a slow device: the content sheets stop blurring (the many layers) and thicken; the tab bar, sidebar and sheets keep their glass */
html[data-theme][data-wall][data-lowfx] { --gl-k: 86% } html[data-theme][data-wall][data-lowfx][data-mode=light] { --gl-k: 95% } html[data-theme][data-wall][data-lowfx][data-mode=light][data-wall-tone=light] { --gl-k: 86% }
/* reduced transparency (the device's setting): no blur anywhere, nearly solid tinted sheets */
@media (prefers-reduced-transparency: reduce) { html[data-theme][data-wall] { --gl-k: 92%; --gl-sheet: 96% } }

/* the tokens every sheet reads, turned to glass: content sheets, grouped lists, sheets, the tab bar and the sidebar */
html[data-theme][data-wall] {
  --card: color-mix(in srgb, var(--wall-tint) var(--gl-k), transparent); --grp: var(--card);
  --sheet-bg: color-mix(in srgb, var(--wall-tint) var(--gl-sheet), transparent); --side-bg: var(--sheet-bg);
  --toff: color-mix(in srgb, var(--tx1) 10%, transparent); --hline: color-mix(in srgb, var(--tx1) 12%, transparent);
  --gl-rim: inset 0 1px 0 rgba(255, 255, 255, .34), inset 1px 0 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 0 0 0 1px rgba(255, 255, 255, .09);
  --gl-glow: inset 0 18px 30px -24px rgba(255, 255, 255, .22);
  --cardsh: var(--gl-rim), var(--gl-glow), 0 18px 40px -22px rgba(0, 0, 0, .55); --sh-card: var(--cardsh); --tonshadow: var(--cardsh)
}
html[data-theme][data-wall][data-mode=light] { --gl-rim: inset 0 1px 0 rgba(255, 255, 255, .85), inset 1px 0 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .45); --gl-glow: inset 0 18px 30px -24px rgba(255, 255, 255, .7);
  --cardsh: var(--gl-rim), var(--gl-glow), 0 18px 40px -22px rgba(30, 8, 14, .45) }
html[data-wall] .dcard:not(.dc-welcome):not(.dc-notices):not(.dc-heading):not(.dc-categories):not(.dc-cams):not(.lk-flat), html[data-wall] .kpi, html[data-wall] .group, html[data-wall] .card, html[data-wall] .tile, html[data-wall] .ecard, html[data-wall] .etile,
html[data-wall] .alarm, html[data-wall] .nt-i, html[data-wall] .na, html[data-wall] .lostbar {
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat)); backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat)) }
html[data-wall] .sheet, html[data-wall] .dpop-s, html[data-wall] .tabbar, html[data-wall] .hs, html[data-wall] .dbar, html[data-wall] .dtabs {
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) + 8px)) saturate(var(--gl-sat)); backdrop-filter: blur(calc(var(--gl-blur) + 8px)) saturate(var(--gl-sat)); box-shadow: var(--gl-rim), 0 20px 50px -18px rgba(0, 0, 0, .6) }
/* the view tabs float on the picture as one glass capsule, like the dock */
html[data-wall] .dtabs { background: var(--side-bg) }
/* the content layer's own gradient and tints sit on the glass, not over it */
html[data-wall] .dc-notices .nt-i { background: color-mix(in srgb, var(--t, var(--hi3)) 12%, var(--sheet-bg)) }
html[data-wall][data-wall-tone=light] .dc-notices .nt-i { background: color-mix(in srgb, var(--t, var(--hi3)) 7%, color-mix(in srgb, var(--wall-tint) 88%, transparent)) }
html[data-wall] .dcard:not(.dc-welcome):not(.dc-categories):not(.dc-heading):not(.dc-camera):not(.dc-notices) { background: var(--card) }
/* the front gate card is glass like every other card (its theme colours: home.css); over a picture the gate buttons are
   glass buttons with the same rim */
html[data-wall] .dc-door .drg { background: color-mix(in srgb, var(--tx1) 8%, transparent); box-shadow: var(--gl-rim) }
html[data-wall] .dc-door .drg > svg { background: var(--toff) }
html[data-wall] .dc-door .drg.arm { background: color-mix(in srgb, var(--amber) 16%, transparent); box-shadow: var(--gl-rim), inset 0 0 0 2px var(--amber) }
html[data-wall] .dc-door .drg.arm > svg { background: var(--amber) }
html[data-wall] .dc-door .drg-w { background: var(--toff) }
html[data-wall][data-lowfx] .dcard, html[data-wall][data-lowfx] .kpi, html[data-wall][data-lowfx] .group, html[data-wall][data-lowfx] .card, html[data-wall][data-lowfx] .tile,
html[data-wall][data-lowfx] .ecard, html[data-wall][data-lowfx] .etile, html[data-wall][data-lowfx] .alarm, html[data-wall][data-lowfx] .nt-i { -webkit-backdrop-filter: none; backdrop-filter: none }
@media (prefers-reduced-transparency: reduce) { html[data-wall] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important } }

/* text that sits on the picture itself (section titles, the welcome, page titles): the picture's own tone, with a soft shadow */
html[data-wall] .dsec-t, html[data-wall] .wel-t, html[data-wall] header.top h1, html[data-wall] header.top .up, html[data-wall] .gh, html[data-wall] .gempty {
  color: var(--on-wall); text-shadow: var(--on-wall-sh) }
html[data-wall] .wel-t small, html[data-wall] .gh { color: var(--on-wall2) }
/* behind those words the picture is softened a little (no edge, no box), so a bright fairy light never sits under a letter */
html[data-wall] .dsec-t, html[data-wall] .wel-t, html[data-wall] header.top .tl, html[data-wall] .gh { position: relative }
html[data-wall] .dsec-t::before, html[data-wall] .wel-t::before, html[data-wall] header.top .tl::before, html[data-wall] .gh::before {
  content: ''; position: absolute; z-index: -1; inset: -10px -18px; pointer-events: none; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  background: radial-gradient(closest-side, var(--on-wall-glow), transparent); -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent) }

/* Account → Appearance over the picture: one glass sheet, like the other groups */
html[data-wall] #lookp { padding: 14px 12px 6px; border-radius: 24px; background: var(--card); box-shadow: var(--cardsh); -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat)); backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat)) }

/* the picker's extra rows (Account → Appearance, a dashboard's settings) */
.thh { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--hi3, var(--tx3)) }
.thfile { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 0; padding: 0 2px; font-size: 14.5px; font-weight: 600; color: var(--accent); cursor: pointer }

/* Lite rendering (data-lite, sync-theme.js: a weak wall tablet by itself, or chosen per dashboard or per screen): the same
   picture and glass, drawn cheaply. No live blur anywhere: the picture is a small copy blurred once (data-wall-lite) that
   the screen stretches, so a see-through sheet over it reads as frosted glass; the sheets' rim stays, the deep soft
   shadows and the glow go; nothing animates. Measured on a 6x slower processor: docs/sync-home-design.md §8 */
html[data-lite] *, html[data-lite] *::before, html[data-lite] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; transition: none !important }
html[data-lite][data-wall] .sbx-wall::before { filter: none; will-change: auto }
html[data-lite][data-wall][data-wall-blur=on] .sbx-wall::before { inset: 0 }
html[data-lite][data-wall-lite] .sbx-wall::before { background-image: var(--wall-lite) !important }
html[data-lite][data-wall-lite][data-wall-blur=on] .sbx-wall::before { inset: 0 }
html[data-theme][data-wall][data-lite] { --gl-k: 74%; --gl-sheet: 90%;
  --cardsh: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .09), 0 1px 2px rgba(0, 0, 0, .35);
  --on-wall-sh: 0 1px 3px rgba(0, 0, 0, .75) }
html[data-theme][data-wall][data-lite][data-mode=light] { --gl-k: 92%; --gl-sheet: 96%; --cardsh: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .45), 0 1px 3px rgba(30, 8, 14, .22) }
html[data-theme][data-wall][data-lite][data-mode=light][data-wall-tone=light] { --gl-k: 84%; --gl-sheet: 92% }
html[data-theme][data-wall][data-lite][data-wall-tone=light] { --on-wall-sh: 0 0 2px rgba(255, 255, 255, .9), 0 0 8px rgba(255, 255, 255, .7) }
/* sheets opened over the page are calm content: opaque, the theme's own tint, no glass (the page behind is veiled) */
html[data-wall] .card.sheet, html[data-wall] .dpop-s { background: var(--wall-tint); -webkit-backdrop-filter: none; backdrop-filter: none }
html[data-lite][data-wall] .sheet, html[data-lite][data-wall] .dpop-s, html[data-lite][data-wall] .tabbar, html[data-lite][data-wall] .hs, html[data-lite][data-wall] .dbar, html[data-lite][data-wall] .dtabs { box-shadow: var(--gl-rim), 0 8px 20px -12px rgba(0, 0, 0, .6) }
html[data-lite][data-wall] .dtabs { background: color-mix(in srgb, var(--wall-tint) 80%, transparent) }
html[data-lite][data-wall] .dsec-t::before, html[data-lite][data-wall] .wel-t::before, html[data-lite][data-wall] header.top .tl::before, html[data-lite][data-wall] .gh::before { -webkit-mask-image: none; mask-image: none; inset: -6px -12px; border-radius: 40px; opacity: .8 }
html[data-lite] .dcard:active, html[data-lite] button:active { transform: none }
/* sections out of view are not laid out or painted until scrolled near (long views on a phone) */
html[data-lite] body:not(.panel) .dpage > .dsec:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 420px }
html[data-lite] #dpop.ring-cd::after { animation: ringcd 5s linear forwards !important } /* the gate countdown still counts */