/* One painted loader across boot, entry and room preparation. Artwork never scales with progress. */
.hb-load-screen { min-height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; color: #eee5c9; background: #090b08; position: relative; isolation: isolate; text-align: center; padding: 24px; }
.hb-load-screen::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hb-loader-paper) center / cover; opacity: .055; filter: grayscale(1); pointer-events: none; }
.hb-load-wordmark { width: min(300px, 78vw); height: auto; }
.hb-load-meter { --progress: 0; position: relative; flex: 0 0 auto; width: min(310px, 80vw); aspect-ratio: 310 / 58; }
.hb-load-shell { position: absolute; inset: 0; width: 100%; height: 100%; }
.hb-load-fill { position: absolute; left: 7.41935%; top: 37.931%; width: 85.16129%; height: 22.4138%; clip-path: inset(0 calc(100% - var(--progress) * 100%) 0 0); transition: clip-path 180ms linear; }
.hb-load-fill svg { width: 100%; height: 100%; display: block; }
.hb-load-marker { position: absolute; left: calc(7.41935% + var(--progress) * 85.16129%); top: 50%; width: 14.19355%; aspect-ratio: 1; transform: translate(-50%, -50%); transition: left 180ms linear; }
.hb-load-marker svg { display: block; width: 100%; height: 100%; animation: hb-load-spin 3.8s linear infinite; }
.hb-load-meter[data-running='false'] .hb-load-marker svg { animation-play-state: paused; }
.hb-load-meter[data-indeterminate='true'] .hb-load-fill { clip-path: inset(0 30% 0 30%); }
.hb-load-meter[data-indeterminate='true'] .hb-load-marker { left: 50%; }
.hb-load-count { font: 14px/1.4 Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: .04em; margin: 0; color: #eee5c9; }
.hb-load-screen button { min-height: 44px; padding: 8px 24px; background: #eee5c9; color: #090b08; border: 0; font: 18px Georgia,serif; clip-path: polygon(2% 3%,98% 0,100% 95%,1% 100%); cursor: pointer; }
.hb-load-screen button:focus-visible { outline: 2px dashed #8bcbac; outline-offset: 4px; }
.hb-load-screen button[hidden] { display: none; }
.hb-load-screen .hb-load-enter { width:min(310px,80vw); height:58px; padding:0; background:transparent; color:#eee5c9; clip-path:none; font:16px/1.4 Georgia,serif; letter-spacing:.09em; animation:hb-enter-pulse 2.8s ease-in-out infinite; }
.hb-load-screen .hb-load-enter:disabled { opacity:.8; animation:none; cursor:default; }
.hb-load-count { min-height:1.4em; }
@keyframes hb-enter-pulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .hb-load-screen .hb-load-enter { animation:none; } }
@keyframes hb-load-spin { to { rotate: 360deg; } }
@media(prefers-reduced-motion:reduce) { .hb-load-fill,.hb-load-marker { transition: none; } .hb-load-marker svg { animation: none; } }

.hb-load-wordmark { display:block; aspect-ratio:3; background:var(--hb-loader-wordmark) center/contain no-repeat; }
.hb-load-shell { display:block; background:var(--hb-loader-kit) 25% 11.5163% / 103.2258% 537.8151% no-repeat; }
.hb-load-fill > i { display:block; height:100%; width:100%; background:var(--hb-loader-kit) 45.4545% 42.7336% / 109.4017% 1032.2581% no-repeat; }
.hb-load-marker > i { display:block; height:100%; width:100%; background:var(--hb-loader-kit) 46.7949% 89.0411% / 256% 232.7273% no-repeat; animation:hb-load-spin 3.8s linear infinite; }
.hb-load-meter[data-running='false'] .hb-load-marker > i { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce){.hb-load-marker > i{animation:none;}}