@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --pink: #9f9f9f;
  --black: #111;
  --white: #fff;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--white);
  color: var(--black);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

/* ─── CAMERA LAYER ─── */
#camera-bg {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 0;
}
#video-el { display: none; }
#hand-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.camera-active #camera-bg { display: block; }
.camera-active .page-overlay {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(2px);
}

/* ─── PAGE WRAPPER ─── */
.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.page-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* ─── BUTTONS ─── */
.btn-pink {
  border: 1.5px solid var(--pink);
  color: var(--pink);
  background: transparent;
  padding: 10px 28px;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.18s, color 0.18s;
}
.btn-pink:hover { background: var(--pink); color: var(--white); }

.btn-back {
  position: fixed;
  top: 22px; left: 22px;
  width: 46px; height: 46px;
  border: 1.5px solid var(--pink);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--pink);
  font-size: 1.2rem;
  transition: background 0.18s, color 0.18s;
  z-index: 100;
  text-decoration: none;
}
.btn-back:hover { background: var(--pink); color: var(--white); }
.btn-back::before { content: '◀'; }

.btn-next {
  position: fixed;
  top: 22px; right: 22px;
  width: 46px; height: 46px;
  border: 1.5px solid var(--pink);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--pink);
  font-size: 1.2rem;
  transition: background 0.18s, color 0.18s;
  z-index: 100;
  text-decoration: none;
}
.btn-next:hover { background: var(--pink); color: var(--white); }
.btn-next::before { content: '▶'; }

/* ─── SLIDERS ─── */
.slider-group { display: flex; flex-direction: column; gap: 14px; }
.slider-row { display: flex; flex-direction: column; gap: 4px; }
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 1px;
  background: #222;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid #222;
  cursor: pointer;
}
.slider-limits { display: flex; justify-content: space-between; font-size: 0.7rem; color: #888; }

/* ─── SPLIT LAYOUT (calibration) ─── */
.split {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 10;
}
.split-left, .split-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 2rem;
}
.split-divider {
  width: 1px;
  background: repeating-linear-gradient(to bottom, #222 0, #222 6px, transparent 6px, transparent 12px);
  height: 100%;
  flex-shrink: 0;
}

/* ─── LABEL BOXES ─── */
.label-box {
  border: 1.5px solid var(--black);
  padding: 8px 18px;
  font-size: 1rem;
  font-weight: 500;
  background: rgba(255,255,255,0.85);
}

/* ─── STATUS FLASH ─── */
#status-flash {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pink);
  color: white;
  padding: 10px 28px;
  font-size: 0.95rem;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
#status-flash.show { opacity: 1; }