* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #000; overflow: hidden; }
#stage { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000; color: #e9e2d2;
  -webkit-font-smoothing: antialiased; }
#gl, #gl canvas { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }

.bar { position: absolute; left: 0; right: 0; height: 139px; background: #000; z-index: 5; }
#barTop { top: 0; } #barBot { bottom: 0; }

/* HUD: dimension counter */
#hud { position: absolute; right: 150px; top: 176px; z-index: 6; text-align: right; opacity: 0; }
#hudNum { font: 300 30px/1 "Didot", "Baskerville", serif; letter-spacing: .08em; color: #efe6d0; }
#hudNum::after { content: "D"; font-size: 15px; margin-left: 4px; letter-spacing: .2em; opacity: .6; }
#hudLbl { margin-top: 8px; font: 13px/1 "Songti SC", serif; letter-spacing: .5em; color: #b9b09c; margin-right: -.5em; }
#hudTicks { margin-top: 12px; display: flex; gap: 6px; justify-content: flex-end; }
#hudTicks i { width: 14px; height: 1px; background: #6f675a; transition: none; }
#hudTicks i.on { background: #f0d9a2; box-shadow: 0 0 6px rgba(240, 210, 150, .8); }

/* chapter card, top-left */
#chapter { position: absolute; left: 150px; top: 172px; z-index: 6; opacity: 0; }
#chapter .en { font: 400 13px/1 "Baskerville", serif; letter-spacing: .55em; color: #bdb29a; text-transform: uppercase; }
#chapter .zh { margin-top: 14px; font: 500 34px/1 "Songti SC", serif; letter-spacing: .32em; color: #f2ead8; }
#chapter .zh::before { content: ""; display: block; width: 36px; height: 1px; background: #c8a96a; margin-bottom: 16px; opacity: .8; }

/* quote, lower third */
#quote { position: absolute; left: 0; right: 0; bottom: 176px; z-index: 6; text-align: center; opacity: 0; }
#quote .en { font: italic 400 25px/1.45 "Baskerville", serif; color: #efe7d6; letter-spacing: .015em; }
#quote .zh { margin-top: 12px; font: 400 17px/1.6 "Songti SC", serif; letter-spacing: .28em; color: #a9a08d; }

/* centered statement */
#center { position: absolute; left: 0; right: 0; top: 37%; transform: translateY(-50%); z-index: 6; text-align: center; opacity: 0; }
#center .en { font: italic 400 50px/1.2 "Baskerville", serif; color: #f6efdf; letter-spacing: .02em;
  text-shadow: 0 0 30px rgba(0,0,0,.9), 0 0 60px rgba(0,0,0,.7); }
#center .zh { margin-top: 18px; font: 400 20px/1 "Songti SC", serif; letter-spacing: .8em; color: #c9bfa8; margin-right: -.8em;
  text-shadow: 0 0 20px rgba(0,0,0,.9); }

/* labels anchored to figures */
#tags { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; will-change: transform; }
.tag .ln { position: absolute; left: 0; top: 0; width: 1px; background: linear-gradient(#e9dcc0, rgba(233,220,192,0)); transform-origin: 0 0; }
.tag .dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border: 1px solid #efe1c2; border-radius: 50%; }
.tag .txt { position: absolute; left: 0; bottom: 0; transform: translate(-50%, 0); text-align: center; }
.tag .zh { font: 500 17px/1 "Songti SC", serif; letter-spacing: .3em; color: #f1e8d4; margin-right: -.3em; }
.tag .en { margin-top: 7px; font: italic 13px/1 "Baskerville", serif; letter-spacing: .08em; color: #a79e89; }

/* title */
#title { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 6; }
#title > div { opacity: 0; }
#title .zh { font: 500 64px/1 "Songti SC", serif; letter-spacing: .55em; margin-right: -.55em; color: #f5eddc; }
#title .en { margin-top: 30px; font: 400 21px/1 "Didot", serif; letter-spacing: 1.1em; margin-right: -1.1em; color: #d9ccae; }
#title .sub { margin-top: 18px; font: italic 17px/1 "Baskerville", serif; letter-spacing: .12em; color: #9d947f; }
#title .by { margin-top: 44px; font: 400 12px/1 "Baskerville", serif; letter-spacing: .5em; margin-right: -.5em; color: #857d6b; }