:root { --bg: #fff8e7; --fg: #1a1a1a; --muted: #666; --transition-ms: 900ms; --cover-w: clamp(160px, 22vw, 320px); }
html, body { height: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font: 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }
.stage { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--transition-ms) ease-in-out; }
.slide.active { opacity: 1; }
.content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: var(--cover-w) minmax(0, calc(3 * var(--cover-w))); gap: clamp(16px,4vw,40px); align-items: start; padding: clamp(12px, 3vw, 24px); }
.cover { width: var(--cover-w); height: auto; object-fit: contain; background: #f9f9f9; box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
.title { font-weight: 700; font-size: clamp(18px, 2.6vw, 28px); margin: 2px 0 4px; }
.author { color: var(--muted); margin-bottom: 10px; font-size: clamp(14px, 1.8vw, 18px); }
.review { white-space: pre-wrap; font-size: clamp(15px, 2vw, 18px); max-height: 60vh; overflow: auto; }
.hint { position: fixed; right: 12px; top: 12px; color: #666; font-size: 13px; opacity: 0.7; }
.status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #555; font-size: 15px; }

.home-link { position: fixed; right: 12px; bottom: 12px; z-index: 1000; opacity: 0.4; }
.home-link img { width: 28px; height: 28px; display: block; }
.home-link:hover { opacity: 0.8; }

@media (max-width: 900px) {
  .content { grid-template-columns: 1fr; }
  .cover { width: clamp(180px, 45vw, 320px); justify-self: center; }
}