:root { --k: 1; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: #ececec; }
body { font-family: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
canvas { display: block; position: fixed; }
:root { --x0: 0px; --y0: 0px; --cw: 100vw; --ch: 100vh; }

.act {
  position: fixed; top: calc(var(--y0) + 38px * var(--k)); left: var(--x0); width: var(--cw); text-align: center;
  font: calc(17px * var(--k)) "DejaVu Sans Mono", Menlo, Consolas, monospace; letter-spacing: .42em; color: #9aa3b2;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.act.on { opacity: .85; animation: rise .8s ease both; }

.sub {
  position: fixed; left: var(--x0); width: var(--cw); top: calc(var(--y0) + var(--ch) - 210px * var(--k));
  text-align: center; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease;
}
.sub.on { opacity: 1; transform: none; animation: rise .6s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { transform: none; } }
.sub-zh { font: 500 calc(34px * var(--k)) "Noto Serif CJK SC", "Songti SC", "STSong", serif; letter-spacing: .06em; color: #f1f1f1; text-shadow: 0 0 18px rgba(0,0,0,.9); }
.sub-en { margin-top: calc(14px * var(--k)); font: italic calc(18px * var(--k)) "DejaVu Sans Mono", Menlo, Consolas, monospace; letter-spacing: .08em; color: #9aa3b2; }
body.no-sub .sub { visibility: hidden; }

.hint {
  position: fixed; left: calc(var(--x0) + var(--cw) - 180px * var(--k)); top: calc(var(--y0) + var(--ch) - 150px * var(--k));
  font: calc(15px * var(--k)) "DejaVu Sans Mono", monospace; color: #7f8794; letter-spacing: .2em; opacity: 0; transition: opacity .5s; pointer-events: none;
}
.hint.on { opacity: 1; animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .25; } }

.controls {
  position: fixed; left: calc(var(--x0) + var(--cw) / 2); transform: translateX(-50%); top: calc(var(--y0) + var(--ch) - 76px);
  display: flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid #2b2f38; border-radius: 999px;
  background: rgba(8,9,13,.78); backdrop-filter: blur(6px); transition: opacity .5s; z-index: 5;
  font-size: 13px;
}
.controls button {
  font: 13px "Noto Sans CJK SC", sans-serif; color: #d9dde4; background: #1b1e26; border: 1px solid #343944;
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.controls button:hover { background: #262a34; }
.bar { position: relative; width: 300px; height: 18px; cursor: pointer; }
.bar::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: #333844; border-radius: 2px; }
.bar-fill { position: absolute; left: 0; top: 8px; height: 2px; background: #e6e9ee; border-radius: 2px; }
.tick { position: absolute; top: 4px; width: 1px; height: 10px; background: #59606d; }
.time { font: 12px "DejaVu Sans Mono", monospace; color: #9aa3b2; min-width: 92px; text-align: center; }
body.idle .controls, body.no-ui .controls, body.no-ui .hint { opacity: 0; pointer-events: none; }
body.idle { cursor: none; }

.notes {
  position: fixed; top: 0; right: 0; width: min(420px, 34vw); height: 100%; padding: 28px 26px; overflow: auto;
  background: rgba(6,7,11,.93); border-left: 1px solid #252a33; transform: translateX(100%); transition: transform .35s ease; z-index: 6;
  font-size: 15px; line-height: 1.75;
}
body.notes-on .notes { transform: none; }
.n-act { font: 12px "DejaVu Sans Mono", monospace; color: #7f8794; letter-spacing: .12em; margin-bottom: 18px; }
.n-label { margin-top: 18px; font-size: 12px; color: #58C4DD; letter-spacing: .3em; }
.n-say { font: 18px/1.8 "Noto Serif CJK SC", serif; color: #f2f2f2; }
.n-shot { color: #a7adb8; }
.n-next { color: #8a8f98; }
body.shot * { transition: none !important; animation: none !important; }