html,body{
  margin:0;
  padding:0;
  background:#05060a;
  color:#fff;
  font-family:system-ui,-apple-system,sans-serif;
  overflow:hidden;
}

/* CAMERA */
#cameraWrap{
  position:fixed;
  inset:0;
  z-index:1;
}
#video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* HOLD HINT */
#holdHint{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
#holdHint.hidden{ opacity:0 }
#holdHint.show{ opacity:.9 }

.holdRing{
  width:88px;
  height:88px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.4);
  animation:spin 1.1s linear infinite;
}
@keyframes spin{
  to{ transform:rotate(360deg) }
}
.holdText{
  margin-top:12px;
  font-size:14px;
  opacity:.8;
}

/* SHELF */
#shelfOverlay{
  position:absolute;
  bottom:12%;
  left:50%;
  transform:translateX(-50%);
  width:68%;
  opacity:.55;
  pointer-events:none;
}

/* RECENT */
#recentSection{
  position:fixed;
  bottom:220px;
  left:0;
  right:0;
  padding:10px 16px;
  z-index:3;
}
.recentLabel{
  opacity:.7;
  margin-bottom:6px;
}
#recentGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}

/* SLIDE ADD */
#slideAdd{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  height:64px;
  background:rgba(20,20,30,.7);
  backdrop-filter:blur(14px);
  border-radius:18px;
  z-index:10;
  display:flex;
  align-items:center;
  padding:0 16px;
}
.slideText{
  flex:1;
  opacity:.85;
}
#slideKnob{
  font-size:20px;
}