:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07111e;
  color: #f4f7fb;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% -20%, #203a54 0, transparent 42%),
    #07111e;
  overflow: hidden;
}

button, input { font: inherit; }

.reader {
  width: 100%;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.topbar, .controls {
  width: min(100%, 1672px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.brand-logo {
  width: min(100%, 280px);
  height: auto;
  aspect-ratio: 1276 / 216;
  overflow: hidden;
}

h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-weight: 650;
  letter-spacing: .01em;
  text-align: center;
}

.title-thai {
  font-family: "Leelawadee UI", Tahoma, sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.7rem);
  line-height: 1.35;
}

.title-transcription {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.4;
  font-weight: 400;
  color: #66c6c8;
}

.title-english {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.35;
  color: #efb843;
}

.progress {
  min-width: 100px;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 650;
  white-space: nowrap;
  text-align: right;
  color: #b9c8d8;
  font-variant-numeric: tabular-nums;
}

.stage {
  min-height: 0;
  position: relative;
  display: grid;
  place-items: center;
}

#slide {
  display: block;
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .46);
  user-select: none;
}

.nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  translate: 0 -50%;
  width: 50px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(3, 10, 18, .72);
  color: white;
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.nav:hover { background: rgba(20, 43, 65, .92); }
.nav:disabled { opacity: .2; cursor: default; }
.nav-prev { left: max(8px, calc((100vw - 1672px) / 2 - 64px)); }
.nav-next { right: max(8px, calc((100vw - 1672px) / 2 - 64px)); }

.controls { justify-content: center; }
.controls button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #38516a;
  border-radius: 10px;
  background: #12263a;
  color: #eef5fb;
  cursor: pointer;
}

.controls button:hover { background: #19344f; }
#scrubber { width: min(52vw, 700px); accent-color: #5cb7d5; }

:focus-visible { outline: 3px solid #73d0ef; outline-offset: 3px; }

@media (max-width: 700px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .brand-logo { width: min(100%, 190px); }
  .topbar h1 { grid-column: 1 / -1; grid-row: 2; }
  .progress { grid-column: 2; grid-row: 1; }
  .reader { gap: 8px; padding: 8px; }
  .nav { width: 42px; height: 58px; font-size: 2rem; opacity: .82; }
  .controls button { min-height: 38px; padding: 0 11px; font-size: .88rem; }
  #scrubber { width: 42vw; }
}

:fullscreen .reader {
  height: 100dvh;
  gap: 4px;
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}

:fullscreen .brand-logo { width: min(100%, 160px); }
:fullscreen h1 { gap: 0; }
:fullscreen .title-thai { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.2; }
:fullscreen .title-transcription { font-size: .875rem; line-height: 1.2; }
:fullscreen .title-english { font-size: 1rem; line-height: 1.2; }
:fullscreen .controls button { min-height: 32px; font-size: .875rem; }

:fullscreen .brand-logo,
:fullscreen h1,
:fullscreen .controls {
  opacity: .16;
  transition: opacity .2s ease;
}

:fullscreen .topbar:hover .brand-logo,
:fullscreen .topbar:hover h1,
:fullscreen .controls:hover,
:fullscreen .controls:focus-within { opacity: 1; }

:fullscreen .stage { overflow: hidden; }
:fullscreen #slide {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: none;
}