:root {
  --bg:     #0d1117;
  --ink:    rgba(255,255,255,0.88);
  --muted:  rgba(255,255,255,0.32);
  --soft:   rgba(255,255,255,0.08);
  --accent: #c0392b;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { min-height:100vh; background:var(--bg); color:var(--ink); font-family:"Avenir Next","Helvetica Neue",sans-serif; }
body { display:grid; grid-template-rows:auto 1fr auto; min-height:100vh; padding:28px 24px; }

.top {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding-bottom:24px; border-bottom:1px solid var(--soft); text-align:center;
}
.eyebrow { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); }
.question { font-size:12px; letter-spacing:0.18em; color:var(--accent); transition:color 700ms ease; }

.stage {
  display:grid; grid-template-columns:56px 1fr 56px;
  align-items:center; gap:16px;
  padding:32px 0; max-width:860px; margin:0 auto; width:100%;
}
.nav-prev, .nav-next { display:flex; justify-content:center; }
button {
  appearance:none; border:1px solid var(--soft); border-radius:12px;
  background:transparent; color:var(--muted); font-size:20px;
  padding:14px 16px; cursor:pointer;
  transition:border-color 300ms, color 300ms, box-shadow 300ms;
  user-select:none; -webkit-user-select:none;
}
button:hover { border-color:var(--accent); color:var(--ink); box-shadow:0 0 20px rgba(0,0,0,0.2); }
button:active { transform:scale(0.96); }
button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.citation {
  display:grid; gap:22px; text-align:center;
  opacity:1; transform:translateY(0);
  transition:opacity 600ms ease, transform 600ms ease;
}
.citation.out { opacity:0; transform:translateY(14px); }

.lang-tag { font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--accent); transition:color 700ms ease; }

blockquote { display:grid; gap:4px; border:none; }
blockquote .line { display:block; font-size:clamp(1.3rem,3.2vw,2rem); line-height:1.4; font-weight:300; font-style:italic; }

.translation { display:grid; gap:2px; opacity:0.4; }
.translation .line { display:block; font-size:clamp(0.82rem,1.8vw,1rem); line-height:1.55; font-weight:300; font-style:italic; }

.attribution { display:flex; flex-direction:column; gap:4px; }
#author { font-size:0.95rem; font-weight:400; color:var(--accent); letter-spacing:0.04em; transition:color 700ms ease; }
#source { font-size:0.8rem; color:var(--muted); letter-spacing:0.08em; }

.key-idea {
  font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(255,255,255,0.18); max-width:52ch; margin:0 auto; line-height:1.6;
}

.bottom {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding-top:20px; border-top:1px solid var(--soft);
  text-align:center;
}
#counter { font-size:12px; letter-spacing:0.14em; color:var(--muted); font-family:"SF Mono","Fira Code",monospace; }
.sig { font-size:10px; letter-spacing:0.12em; color:rgba(255,255,255,0.14); font-family:"SF Mono","Fira Code",monospace; }
.un { font-size:11px; letter-spacing:0.16em; color:rgba(255,255,255,0.2); margin-top:2px; }

@media (max-width:600px) {
  .stage { grid-template-columns:40px 1fr 40px; gap:8px; }
}