html, body { margin: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, sans-serif; color: #fff; }
#video-output {
  position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover;
  background: transparent; transform: scaleX(-1); pointer-events: none; z-index: 0;
}
.page-top {
  position: fixed; top: 3%; left: 0; right: 0; z-index: 20;
  text-align: center; pointer-events: none; background: transparent;
}
.page-logo { height: 64px; width: auto; max-width: 70%; object-fit: contain; background: transparent; }
.page-title {
  margin: 6px 0 0; font-size: 28px; font-weight: 700; letter-spacing: 0.04em;
  text-shadow: 0 2px 6px #000, 0 0 16px #000;
}
.dock {
  position: fixed; left: 28px; top: 50%; transform: translateY(-50%);
  z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: transparent;
}
.fx-row { display: flex; flex-direction: column; gap: 14px; padding: 14px; border: 1px solid rgba(255,255,255,0.18); background: transparent; }
.fx-btn {
  width: 108px; height: 108px;
  border: 2px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.25);
  font-size: 54px;
  cursor: pointer;
}
.fx-btn.active { border-color: #B8A48A; box-shadow: 0 0 16px rgba(184,164,138,0.45); }
.fx-reset {
  border: 1px solid rgba(255,255,255,0.22); background: rgba(0,0,0,0.25);
  color: #fff; letter-spacing: 0.12em; padding: 12px 20px; cursor: pointer; font-size: 16px;
  text-shadow: 0 2px 6px #000;
}
.status { position: fixed; left: 16px; bottom: 16px; z-index: 20; font-size: 12px; color: rgba(255,255,255,0.55); }
.status.hidden { display: none; }
.toast { position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%); background: rgba(0,0,0,0.7); padding: 10px 14px; font-size: 13px; z-index: 30; }
.toast.hidden { display: none; }