:root {
    color-scheme: light dark;
    --ink: #1b1b20; --muted: #6b6b76; --bg: #e9e7ef; --card: #fff; --line: #dedde4;
    --brand: #6d63c6; --bar: rgba(255,255,255,.92);
  }
  @media (prefers-color-scheme: dark) {
    :root { --ink: #ededf2; --muted: #9b9ba6; --bg: #121216; --card: #1d1d22; --line: #32323a;
            --brand: #8f86e8; --bar: rgba(24,24,28,.92); }
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  /* fullscreen: the root element is the one we request, so give it the page
     background explicitly rather than relying on propagation from body. */
  html { background: var(--bg); }
  body { margin: 0; background: var(--bg); color: var(--ink); overflow: hidden;
         font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

  /* top toolbar */
  .tools { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; justify-content: center;
           gap: 2px; padding: 6px 8px; background: var(--bar); border-bottom: 1px solid var(--line);
           backdrop-filter: blur(8px); flex-wrap: wrap; }
  .tools button, .tools a {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px;
    border: 0; border-radius: 8px; background: transparent; color: var(--ink);
    font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: none; white-space: nowrap;
  }
  .tools button:hover, .tools a:hover { background: rgba(127,127,140,.14); color: var(--brand); }
  .tools svg { width: 16px; height: 16px; flex: none; }
  .tools .lbl { display: inline; }
  @media (max-width: 640px) { .tools .lbl { display: none; } .tools button, .tools a { padding: 0 9px; } }

  /* the book */
  #stage { position: absolute; inset: 47px 0 56px 0; display: flex; align-items: center; justify-content: center; }
  #book { margin: 0 auto; }
  /* Never set `display` here: StPageFlip adds .stf__item to these same nodes
     and uses display:none to hide the leaves that are off view. */
  .pg { background: var(--card); overflow: hidden; }
  .pg img { width: 100%; height: 100%; object-fit: contain; display: block; }

  /* bottom pager */
  .pager { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; align-items: center;
           justify-content: center; gap: 6px; padding: 8px calc(8px + env(safe-area-inset-right))
           calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
           background: var(--bar); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
  .pager button { height: 34px; min-width: 36px; padding: 0 10px; border: 1px solid var(--line);
                  border-radius: 8px; background: var(--card); color: var(--ink); font: inherit;
                  font-weight: 600; cursor: pointer; }
  .pager button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
  .pager button:disabled { opacity: .35; cursor: default; }
  .pager .count { min-width: 86px; text-align: center; font-size: 13px; color: var(--muted);
                  font-variant-numeric: tabular-nums; }

  /* overview sheet */
  .sheet { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55); display: none; }
  .sheet.on { display: block; }
  .sheet .inner { position: absolute; inset: 0; overflow: auto; padding: 16px;
                  background: var(--bg); }
  .sheet h2 { margin: 2px 0 14px; font-size: 16px; }
  .sheet .close { position: fixed; top: 10px; right: 12px; z-index: 41; height: 34px; padding: 0 12px;
                  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
                  color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px;
          max-width: 1100px; margin: 0 auto; }
  .grid figure { margin: 0; cursor: pointer; }
  .grid img { width: 100%; display: block; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
  .grid figcaption { text-align: center; font-size: 12px; color: var(--muted); margin-top: 4px; }
  .grid figure:hover img { border-color: var(--brand); }

  .toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 50;
           background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 999px;
           font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .toast.on { opacity: 1; }
  /* loading screen - the book is held back until every page is cached */
  .loader { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
            justify-content: center; background: var(--bg); transition: opacity .35s; }
  .loader.done { opacity: 0; pointer-events: none; }
  .loader-box { width: min(260px, 70vw); text-align: center; }
  .loader-bar { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
  .loader-bar i { display: block; height: 100%; width: 0; border-radius: 999px;
                  background: var(--brand); transition: width .2s ease-out; }
  .loader p { margin: 12px 0 0; font-size: 13px; color: var(--muted);
              font-variant-numeric: tabular-nums; }

  @media print { .tools, .pager, .sheet, .toast, .loader { display: none !important; } }