@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&family=Montserrat:wght@200;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { background:#000; width:100vw; height:100vh; height:100svh; overflow:hidden; font-family:'Montserrat',sans-serif; }

#stage { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }

#wrapper { position:relative; flex-shrink:0; background:#000; overflow:hidden;
  filter:contrast(1.07) saturate(0.75) brightness(0.92); }

#v-live, #v-play { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#v-live { z-index:2; opacity:0; }
#v-play { z-index:1; opacity:0; }

#vignette { position:absolute; inset:0; z-index:10; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,.28) 65%, rgba(0,0,0,.78) 100%); }
canvas#grain { position:absolute; inset:0; z-index:12; pointer-events:none; width:100%; height:100%; opacity:.058; mix-blend-mode:screen; }
.bar { position:absolute; left:0; right:0; z-index:13; pointer-events:none; background:#000; height:4%; }
#bar-top { top:0; } #bar-bottom { bottom:0; }
#scanline { position:absolute; inset:0; z-index:14; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,.013) 3px, rgba(0,0,0,.013) 4px); }
#timecode { position:absolute; top:6.5%; right:2%; z-index:20; font-size:9px; letter-spacing:2px; font-weight:200;
  color:rgba(255,248,225,.18); pointer-events:none; font-variant-numeric:tabular-nums; }

#dbg { position:fixed; bottom:6px; left:50%; transform:translateX(-50%); z-index:300;
  font-size:9px; letter-spacing:1px; color:rgba(255,255,255,.28); pointer-events:none; white-space:nowrap; font-family:monospace; }

.material-symbols-outlined {
  font-family:'Material Symbols Outlined';
  font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal;
  text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal;
  direction:ltr; font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}

#btn-reset { position:fixed; top:20px; left:20px; z-index:200;
  width:48px; height:48px; padding:0; margin:0; border:none; border-radius:50%;
  background:transparent; color:#fff; cursor:pointer;
  display:none; align-items:center; justify-content:center;
  transition:color .3s, opacity .3s; }
#btn-reset.is-active { display:flex; }
#btn-reset:hover { color:rgba(255,255,255,.85); }
#btn-reset .material-symbols-outlined { font-size:24px; }

#btn-start { position:fixed; bottom:38px; left:50%; transform:translateX(-50%); z-index:200;
  width:80px; height:80px; padding:0; margin:0; border:none; border-radius:50%;
  background:transparent; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .35s, opacity .35s; }
#btn-start:hover { color:rgba(255,255,255,.92); }
#btn-start:disabled { opacity:.35; cursor:default; }
#btn-start .material-symbols-outlined { font-size:44px; }

#rec-wrap { position:fixed; top:20px; right:20px; z-index:200; display:flex; align-items:center; gap:7px; opacity:0; transition:opacity .8s; }
#rec-dot { width:6px; height:6px; border-radius:50%; background:#cc1f1f; animation:blink 2.4s infinite; }
@keyframes blink { 0%,100%{opacity:1} 55%{opacity:.08} }
#rec-text { font-size:8px; letter-spacing:3px; color:rgba(255,255,255,.28); font-weight:200; }

#clips-count { position:fixed; bottom:42px; right:22px; z-index:200; font-size:8px; letter-spacing:2px;
  color:rgba(255,255,255,.15); font-weight:200; opacity:0; transition:opacity .8s; }

#idle-screen { position:fixed; inset:0; background:#050303; z-index:150;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; transition:opacity 1.6s ease; }
#idle-title { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(32px,7.5vw,78px);
  letter-spacing:.06em; line-height:1.35; text-align:center; text-transform:none;
  padding:0 max(12px,4vw); box-sizing:border-box; color:rgba(255,255,255,.56); }