/* Paint only. Keep viewport dimensions, safe areas and scrolling in viewport.css.
   The outer canvas, browser chrome and visible surface share one top colour. */
:root{--surface-top:#281022}
html:has(.toast){--surface-top:#220e20}
html.stage-transition-active{--surface-top:var(--stage-transition-colour)}
html:has(.memories-overlay){--surface-top:#281022}
html:has(.memories-overlay.capture-full){--surface-top:#21101e}
html:has(.access-panel[open]){--surface-top:#421238}
html:has(.install-panel[open]){--surface-top:#1a0c19}
html:has(.display-dialog[open]){--surface-top:#100610}

@media(max-width:720px),(display-mode:standalone){
 html,html.card-view,html.stage-transition-active{background-color:var(--surface-top)}
 body::before{background:linear-gradient(var(--surface-top) 96px,transparent 280px),radial-gradient(ellipse at 100% 25%,#a5216920,transparent 55%),radial-gradient(ellipse at 0 70%,#7333b025,transparent 60%),var(--surface-top)}
 html:is(.stage-transition-active,:has(.toast,.memories-overlay,.access-panel[open],.install-panel[open],.display-dialog[open])) body::before{background:var(--surface-top)}
 .access-panel{background:linear-gradient(var(--surface-top) 96px,transparent 280px),radial-gradient(ellipse at 90% 10%,#702051 0,transparent 55%),#281022}
 .access-panel::backdrop{background:var(--surface-top)}
 .toast{background:linear-gradient(var(--surface-top) 96px,transparent 280px),#220e20ed}
 .install-panel::backdrop{background:linear-gradient(var(--surface-top) 96px,transparent 280px),#160b16c9}
 .display-dialog::backdrop{background:linear-gradient(var(--surface-top) 96px,transparent 280px),#100610c9}
}