:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #041c34;
  color: #f5f9ff;
}

* { box-sizing: border-box; }

body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 50% -20%, #1766a2 0, transparent 42rem),
    linear-gradient(150deg, #063c6d 0%, #062641 44%, #04152a 100%);
}

button, input { font: inherit; }

.reader {
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2.5rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.reader__header {
  width: min(100%, 1440px);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.brand { display: flex; align-items: baseline; gap: .6rem; }
.brand__mark { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: .08em; }
.brand__detail, .reader__hint { color: #b9d9ef; font-size: .9rem; }
.reader__hint { margin: 0; }

.book-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  padding: clamp(.25rem, 1vw, 1rem);
}

.book {
  width: min(100%, 1440px);
  filter: drop-shadow(0 2rem 2.5rem rgba(0, 0, 0, .48));
}

.loading-message { color: #b9d9ef; margin: 1rem 0 0; text-align: center; }
.loading-message[hidden] { display: none; }

.reader__controls {
  width: min(100%, 1440px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .65rem;
}

.control, .page-jump {
  min-height: 2.7rem;
  border: 1px solid rgba(186, 223, 246, .42);
  border-radius: 999px;
  background: rgba(5, 37, 66, .7);
  color: #f5f9ff;
  padding: .55rem .9rem;
}

.control { cursor: pointer; transition: background .18s ease, transform .18s ease; }
.control:hover, .control:focus-visible { background: #0f639b; transform: translateY(-1px); outline: 2px solid #d7efff; outline-offset: 2px; }
.control--sound { min-width: 7.6rem; }
.page-status { min-width: 7rem; color: #c9e8fb; text-align: center; }
.page-jump { display: inline-flex; align-items: center; gap: .45rem; color: #c9e8fb; }
.page-jump input { width: 3.5rem; border: 0; border-radius: .4rem; padding: .25rem .4rem; color: #061d34; background: #f5f9ff; }

@media (max-width: 600px) {
  .reader { padding: .85rem; }
  .reader__header { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .reader__hint { display: none; }
  .reader__controls { gap: .45rem; }
  .control, .page-jump { min-height: 2.45rem; padding: .45rem .72rem; font-size: .88rem; }
  .control span { display: none; }
  .page-status { order: -1; width: 100%; }
}