:root{ --paper:#0b0a09; --ink:#e7e2d6; --dim:#5f5a50; --glow:#cfc8b8; }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);overflow:hidden;
  font-family:"JetBrains Mono","SF Mono","Menlo","Consolas",monospace;}
#stage{position:relative;width:100vw;height:100vh;overflow:hidden}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}

.chrome{position:absolute;z-index:3;letter-spacing:1px;line-height:1.4;color:var(--glow)}
.chrome.tl{top:26px;left:30px;font-size:20px;font-weight:700}
.chrome.tr{top:30px;right:30px;font-size:15px;font-weight:600;color:#9a9487}
/* 大字＝墨底浮水印，退到粒子後面 */
.chrome.bl{bottom:24px;left:30px;font-size:62px;font-weight:800;letter-spacing:5px;
  color:transparent;-webkit-text-stroke:1px #272219;z-index:1;pointer-events:none}
.chrome.br{bottom:26px;right:30px;font-size:13px;text-align:right;font-weight:600;color:#cfc8b8}
.chrome .dim{color:var(--dim);font-weight:500}
#hint{position:absolute;left:30px;top:58px;z-index:3;font-size:11px;letter-spacing:1px;
  color:#6f685b;transition:opacity 1.2s;opacity:.9}
#hint.gone{opacity:0}