:root { --fg: #f1f5ee; --muted: #b9c6b4; --accent: #8fd18a; --bg: #0c140d; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
.stage { position: fixed; inset: 0; cursor: pointer; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity 1.2s ease, transform 7s ease-out; }
.stage img.on { opacity: 1; transform: scale(1); }
.shade { position: fixed; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.caption { position: fixed; left: 24px; right: 24px; bottom: 28px; pointer-events: none; }
.caption .n { font-size: 13px; letter-spacing: .12em; color: var(--accent); }
.caption .t { font-size: clamp(16px, 2.4vw, 26px); margin: 6px 0 4px; text-shadow: 0 1px 4px #000; }
.caption a { pointer-events: auto; color: var(--muted); font-size: 12px; }
.bar { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--accent); }
.bar.run { transition: width linear; width: 100%; }
.controls { position: fixed; top: 14px; right: 16px; display: flex; gap: 8px; }
.controls button { background: rgba(0,0,0,.45); color: var(--fg); border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.controls button:hover { background: rgba(0,0,0,.7); }
.hint { position: fixed; top: 18px; left: 16px; font-size: 12px; color: var(--muted);
  text-shadow: 0 1px 3px #000; }