/*
 * First paint before the bundle runs (design review W3): papel, the lockup and a quiet
 * skeleton of the rail and the day's total, so the page is never a blank cream screen.
 * React replaces #root's children on mount. Colors mirror the tokens (no var() yet: the
 * token stylesheet ships inside the bundle).
 */
html { background: #FAF5EA; }
@media (prefers-color-scheme: dark) { html { background: #14110E; } }
.boot { min-height: 100vh; display: flex; }
.boot-rail { width: 256px; padding: 26px 24px; border-right: 1px solid #DDD3C0; box-sizing: border-box; }
.boot-rail img { height: 26px; width: auto; display: block; }
.boot-main { flex: 1; padding: 64px 40px; display: grid; gap: 18px; align-content: start; max-width: 1200px; }
.boot-bar { height: 18px; border-radius: 6px; background: #F2EBDC; animation: boot 1.2s ease-in-out infinite alternate; }
.boot-bar.big { height: 64px; width: 46%; border-radius: 10px; }
.boot-bar.mid { width: 28%; }
.boot-bar.long { width: 62%; }
@media (prefers-color-scheme: dark) { .boot-rail { border-color: #3D362E; } .boot-bar { background: #2A251F; } }
@keyframes boot { to { opacity: 0.55; } }
@media (max-width: 860px) {
  .boot { flex-direction: column; }
  .boot-rail { width: auto; border-right: 0; border-bottom: 1px solid #DDD3C0; padding: 14px 16px; }
  .boot-main { padding: 24px 16px; }
  .boot-bar.big { width: 70%; }
}
@media (prefers-reduced-motion: reduce) { .boot-bar { animation: none; } }