:root {
  --ink: #e8edf5;
  --dim: rgba(232, 237, 245, 0.55);
  --faint: rgba(232, 237, 245, 0.28);
  --gold: #e8c87a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #04070e;
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  -webkit-user-select: none; user-select: none;
  cursor: crosshair;
}
#sea { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* 开场幕 */
#veil {
  position: fixed; inset: 0; z-index: 40; background: #04070e;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1.6s ease; pointer-events: none;
}
#veil.lift { opacity: 0; }
.veil-inner { text-align: center; }
.veil-title { font-size: 34px; letter-spacing: 18px; text-indent: 18px; color: var(--ink); margin-bottom: 26px; }
.veil-line { width: 180px; height: 1px; background: rgba(232,237,245,.14); margin: 0 auto; overflow: hidden; }
.veil-line span { display: block; height: 100%; width: 40%; background: var(--gold); animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%);} 100% { transform: translateX(450%);} }

/* 标题 */
.masthead { position: fixed; top: 34px; left: 40px; z-index: 10; pointer-events: none; opacity: 0; transition: opacity 2s ease .3s; }
body.ready .masthead { opacity: 1; }
.masthead h1 { font-size: 30px; font-weight: 500; letter-spacing: 12px; }
.masthead p { margin-top: 8px; font-size: 11px; letter-spacing: 6px; color: var(--faint); font-family: "Helvetica Neue", sans-serif; }
.masthead canvas { margin-top: 12px; opacity: 0.85; display: block; }

/* 提示 */
.hint {
  position: fixed; bottom: 44px; left: 50%; transform: translateX(-50%); z-index: 10;
  font-size: 13px; letter-spacing: 3px; color: var(--dim); white-space: nowrap;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9);
  opacity: 0; transition: opacity 1.6s ease 1s; pointer-events: none;
  font-family: "Noto Sans SC", sans-serif;
}
body.ready .hint { opacity: 1; }
.hint.gone { opacity: 0 !important; transition: opacity 1s ease; }

/* 控制 */
.panel {
  position: fixed; right: 40px; bottom: 40px; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  opacity: 0; transition: opacity 1.6s ease 1.4s;
}
body.ready .panel { opacity: 1; }
.panel label { font-size: 12px; letter-spacing: 4px; color: var(--dim); display: flex; align-items: center; gap: 12px; font-family: "Noto Sans SC", sans-serif; }
.panel input[type="range"] { width: 130px; accent-color: var(--gold); opacity: .7; cursor: pointer; }

@media (max-width: 640px) {
  .masthead { top: 22px; left: 24px; }
  .masthead h1 { font-size: 22px; letter-spacing: 8px; }
  .panel { right: 24px; bottom: 24px; }
  .hint { font-size: 11px; bottom: 84px; }
}