/* The small blocking bootstrap decides what paints before the app is ready.
   With JavaScript disabled these rules leave all public HTML visible. */
.app-loader,.app-boot-error{display:none}
html[data-app-state=loading] :is(#header,#main,#footer){visibility:hidden}
html[data-app-state=loading] body{overflow:hidden}
html[data-app-state=loading] .app-loader{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:32px;background:var(--paper,#f7f6f2);color:var(--ink,#20231e);text-align:center}
.app-loader img{display:block;width:56px;height:56px;border-radius:14px}
.app-loader-name{font-size:24px;font-weight:650;letter-spacing:-.04em;line-height:1.2}
.app-loader-progress{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted,#697064)}
.app-loader-progress .spinner{width:18px;height:18px;flex:none}
html[data-app-state=fallback] .app-boot-error{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line);background:var(--white);color:var(--ink);font-size:14px}
@media(prefers-reduced-motion:reduce){.app-loader .spinner{animation:none}}