.note{
  position:absolute;left:50%;bottom:18px;translate:-50% 0;
  display:flex;align-items:center;justify-content:center;
  width:max-content;max-width:calc(100% - 48px);
  font-size:12px;color:color-mix(in srgb, var(--fg) 58%, transparent);line-height:1.6;text-align:center;
  text-shadow:0 0 4px var(--bg),0 0 10px var(--bg);
  opacity:0;transition:opacity .2s;
  pointer-events:none;
}
.note.on{opacity:1}
.note-line{display:flex;align-items:center;justify-content:center;gap:10px}
.note-text,.note-sub{white-space:nowrap}
.note-sub:empty{display:none}
@media not all and (hover: hover) and (pointer: fine){ .note{flex-direction:column;gap:2px} }
.note-icon{display:none;flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round}
.note-icon .dot{fill:currentColor;stroke:none}
.note.warn .note-icon{display:block}

.stage-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.stage-msg[hidden]{display:none}
.stage-msg-in{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:calc(100% - 48px);margin:0;text-align:center;line-height:1.6}
.stage-msg-title{font-size:14px;color:var(--fg)}
.stage-msg-sub{font-size:12px;color:color-mix(in srgb, var(--fg) 58%, transparent)}