html, body {
  margin: 0; height: 100%; background: #07040f; color: #eeeaf6; overflow: hidden;
  font-family: system-ui, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  overscroll-behavior: none; user-select: none; -webkit-user-select: none;
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#start {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: rgba(7, 4, 15, .72); backdrop-filter: blur(6px); text-align: center; padding: 16px;
}
#start button {
  font: inherit; font-size: 18px; font-weight: 600; color: #150b26; background: #b48cff;
  border: 0; border-radius: 999px; padding: 14px 32px; cursor: pointer;
}
#start p { margin: 0; font-size: 13px; color: #a39fb3; line-height: 1.7; }

#note {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: 12px; color: #a39fb3;
  background: rgba(14, 11, 24, .8); padding: 6px 12px; border-radius: 999px; white-space: nowrap; display: none;
}

/* 調整パネル（?tune のときだけ出る） */
#tune-toggle {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 11;
  font: inherit; font-size: 12px; color: #eeeaf6; background: rgba(14, 11, 24, .85);
  border: 1px solid #3a3150; border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
#tune {
  position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 40px); right: 12px; z-index: 10;
  width: min(320px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; touch-action: pan-y;
  box-sizing: border-box; padding: 10px; font-size: 12px; user-select: text; -webkit-user-select: text;
  background: rgba(14, 11, 24, .9); border: 1px solid #3a3150; border-radius: 12px; display: none;
}
#tune.open { display: block; }
#tune details { border-top: 1px solid #2a2338; padding: 4px 0; }
#tune summary { cursor: pointer; padding: 4px 0; font-weight: 600; color: #b48cff; }
#tune label { display: grid; grid-template-columns: 9em 1fr 3.5em; align-items: center; gap: 6px; padding: 2px 0; }
#tune label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a39fb3; }
#tune output { text-align: right; font-variant-numeric: tabular-nums; }
#tune input[type=range] { width: 100%; margin: 0; accent-color: #b48cff; }
#tune .tune-actions { display: flex; gap: 8px; margin-bottom: 6px; }
#tune .tune-actions button {
  flex: 1; font: inherit; color: #150b26; background: #b48cff; border: 0; border-radius: 8px; padding: 6px; cursor: pointer;
}
#tune textarea { width: 100%; height: 160px; box-sizing: border-box; margin-top: 6px; font: 11px ui-monospace, monospace; }