#ehpeek-reader {
  --color-reader-background: #070707;
  --color-reader-surface: #151515;
  --color-reader-elevated: #232323;
  --color-reader-text: #f3f3f3;
  --color-reader-accent: #4da3ff;
  --color-reader-border: color-mix(in srgb, var(--color-reader-text) 18%, transparent);
  --color-reader-muted: color-mix(in srgb, var(--color-reader-text) 72%, transparent);
  --color-reader-scrollbar: color-mix(in srgb, var(--color-reader-text) 56%, transparent);
  --color-background: var(--color-reader-background);
  --color-surface: var(--color-reader-surface);
  --color-elevated: var(--color-reader-elevated);
  --color-text: var(--color-reader-text);
  --color-accent: var(--color-reader-accent);
  --color-border: color-mix(in srgb, var(--color-text) 18%, transparent);
  --color-muted: color-mix(in srgb, var(--color-text) 72%, transparent);
  --color-track: color-mix(in srgb, var(--color-text) 34%, var(--color-background));
  --color-control: color-mix(in srgb, var(--color-elevated) 88%, transparent);
  --color-badge: color-mix(in srgb, var(--color-background) 34%, transparent);
}

#ehpeek-reader,
#ehpeek-reader * {
  box-sizing: border-box;
}

[data-ehpeek-overlay-host="true"]:fullscreen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-background);
}

[data-ehpeek-overlay-host="true"]:fullscreen .ehpeek-reader-fullscreen-status {
  top: 0;
  right: max(10px, env(safe-area-inset-right, 0px));
  left: auto;
  transform: translateY(50%);
}

[data-ehpeek-overlay-host="true"]:fullscreen .ehpeek-reader-page-number {
  top: 0;
  right: auto;
  left: max(10px, env(safe-area-inset-left, 0px));
  min-width: 0;
  transform: translateY(50%);
  text-align: left;
}

[data-ehpeek-overlay-host="true"]:fullscreen .ehpeek-reader-toolbar {
  top: calc(max(var(--ui-control-size-xs), env(safe-area-inset-top, 0px)) + 8px);
}

[data-ehpeek-overlay-host="true"]:fullscreen
  #ehpeek-reader[data-navigation-mode="scroll"][data-read-direction="ttb"]
  .ehpeek-reader-page-strip {
  padding-top: 0;
}

#ehpeek-reader[data-navigation-mode="paged"][data-page-layout="double"]:not([data-read-direction="ttb"])
  .ehpeek-page {
  width: calc(50% - 1.5px);
  flex: 0 0 calc(50% - 1.5px);
}