/* 冥想自然疗法 · 原理展示 */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;inset:0;pointer-events:none;font-family:"Songti SC","STSong","Noto Serif SC",serif;color:#e8ecf6}
#hud button{pointer-events:auto}

#title{position:absolute;top:30px;left:40px;text-shadow:0 2px 14px rgba(0,0,0,.8)}
#title .t1{font-size:34px;letter-spacing:.35em;font-weight:600;color:#f2ecdf}
#title .t2{margin-top:10px;font-size:16.5px;letter-spacing:.46em;color:rgba(210,220,240,.78)}

#fps{position:absolute;top:34px;right:40px;font-size:14.5px;letter-spacing:.15em;
  color:rgba(180,220,255,.9);border:1px solid rgba(140,190,255,.28);border-radius:16px;
  padding:6px 15px;background:rgba(8,12,28,.45);font-family:ui-monospace,Menlo,monospace}

#capBox{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);
  text-align:center;width:min(1060px,88vw);transition:opacity .3s}
#capPhase{font-size:17px;letter-spacing:.34em;color:#c5d6f3;opacity:.9;margin-bottom:12px;text-shadow:0 1px 8px rgba(0,0,0,.9)}
#capTitle{font-size:36px;letter-spacing:.28em;color:#f6efdd;text-shadow:0 0 22px rgba(255,215,150,.45),0 2px 10px rgba(0,0,0,.9);margin-bottom:16px}
#capDesc{font-size:19px;line-height:1.85;letter-spacing:.09em;color:rgba(218,227,244,.92);text-shadow:0 2px 10px rgba(0,0,0,.9)}

#controls{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);
  display:flex;align-items:center;gap:16px}
#controls>button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(160,200,255,.35);
  background:rgba(12,18,40,.55);color:#dce6fa;font-size:17px;cursor:pointer;transition:.2s}
#controls>button:hover{background:rgba(60,90,160,.5);border-color:rgba(190,220,255,.7)}
#dots{display:flex;gap:12px;margin-left:16px;align-items:center}
.dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(180,210,255,.5);
  background:transparent;cursor:pointer;transition:.25s;padding:0}
.dot.on{background:radial-gradient(circle,#ffe9c0,#f7b955);border-color:#ffe9c0;box-shadow:0 0 10px 2px rgba(255,205,120,.65)}
.dot:hover{border-color:#fff}
.dot.done{background:rgba(255,205,120,.32);border-color:rgba(255,220,150,.55)}

#progWrap{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(120,160,220,.14)}
#prog{height:100%;width:0;background:linear-gradient(90deg,#7db4ff,#ffe3ae,#ff9bd0);box-shadow:0 0 8px rgba(255,220,160,.6)}
#recTip{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:9;
  padding:9px 22px;border-radius:18px;background:rgba(10,14,28,.78);border:1px solid rgba(255,215,150,.35);
  color:#ffe9c0;font-size:15px;letter-spacing:.12em;pointer-events:none}
#labels{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.lab{position:absolute;font:15.5px/1.2 "Songti SC","Noto Serif SC",serif;letter-spacing:.16em;color:rgba(212,227,255,.95);text-shadow:0 0 6px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.9);white-space:nowrap}
.lab::after{content:"";position:absolute;top:50%;width:18px;height:1px;background:linear-gradient(90deg,rgba(190,210,255,.7),rgba(160,190,255,.12))}
.lab[style*="text-align: left"]::after{left:-20px}
.lab[style*="text-align: right"]::after{right:-20px;left:auto;background:linear-gradient(270deg,rgba(190,210,255,.7),rgba(160,190,255,.12))}

.lead{position:absolute;height:1px;background:linear-gradient(90deg,rgba(160,190,255,.08),rgba(190,210,255,.55));pointer-events:none}
.leadv{position:absolute;width:1px;background:linear-gradient(180deg,rgba(190,210,255,.5),rgba(160,190,255,.16));pointer-events:none}
.adot{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(255,240,210,.92);box-shadow:0 0 8px 2px rgba(255,225,160,.65);pointer-events:none}

#keysHint{position:fixed;right:18px;bottom:14px;font:14px/1 "Songti SC","Noto Serif SC",serif;letter-spacing:.12em;color:rgba(160,180,220,.6);pointer-events:none;z-index:5}

/* 小屏（手机）：标题收小避让 FPS 徽标，隐藏键盘提示 */
@media (max-width:700px){
  #title{top:18px;left:20px}
  #title .t1{font-size:23px;letter-spacing:.3em}
  #title .t2{margin-top:6px;font-size:11.5px;letter-spacing:.32em}
  #fps{top:20px;right:14px;font-size:11px;padding:4px 10px}
  #keysHint{display:none}
  #capBox{bottom:104px}
  #capTitle{font-size:26px}
  #capDesc{font-size:15.5px}
}