*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#000}
body{color:#fff;font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:#fff}
[hidden]{display:none !important}

.screen{position:fixed;inset:0;display:none}
.screen.on{display:block}

/* ---------- camera ---------- */
#video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.flash.go{animation:fl .35s ease-out}
@keyframes fl{0%{opacity:1}100%{opacity:0}}

.bar{position:absolute;left:0;right:0;bottom:0;height:150px;display:flex;align-items:center;
  justify-content:space-between;padding:0 28px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0))}

.thumb{width:50px;height:50px;border-radius:12px;background:rgba(255,255,255,.12) center/cover no-repeat;
  border:1.5px solid rgba(255,255,255,.5);flex:0 0 auto;transition:transform .25s}
.thumb.pop{animation:pop .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{0%{transform:scale(.4) rotate(-8deg)}100%{transform:scale(1) rotate(0)}}

.shutter{width:76px;height:76px;border-radius:50%;background:#fff;flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(0,0,0,.25),0 0 0 7px #fff;transition:transform .1s}
.shutter:active{transform:scale(.9)}
.shutter:disabled{opacity:.35}

.flip{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);flex:0 0 auto}
.flip:active{transform:scale(.92)}

/* fallback / errors */
.fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:32px;text-align:center;background:#000}
.fallback p{color:#9aa0ab;font-size:14px;max-width:320px;margin:0 0 4px}
.pill{padding:11px 22px;border-radius:999px;background:#fff;color:#000;font-weight:600;font-size:14px}
.pill.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);font-weight:500;text-decoration:none}

/* ---------- gallery ---------- */
#gal{background:#000;overflow-y:auto;overscroll-behavior:contain}
.ghead{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:rgba(0,0,0,.85);backdrop-filter:blur(12px)}
#gcount{font-size:14px;color:#8b909b}
.icobtn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.icobtn:active{background:rgba(255,255,255,.12)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:0 0 60px}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#111}
.empty{text-align:center;color:#555;padding:90px 20px;font-size:14px}

/* ---------- viewer ---------- */
.viewer{background:#000;display:flex !important;align-items:center;justify-content:center}
.viewer[hidden]{display:none !important}
#vImg{max-width:100%;max-height:100%;object-fit:contain}
.vtop{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent)}
.vmeta{position:absolute;left:0;right:0;bottom:0;padding:40px 20px calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(0,0,0,.88),transparent)}
.vmeta h2{margin:0;font-size:19px;font-weight:600}
.vmeta p{margin:3px 0 0;font-size:13px;color:#b9bec8}
.vlinks{display:flex;gap:16px;margin-top:12px}
.vlinks a{font-size:13px;color:#7aa7ff;text-decoration:none}
.vlinks a[hidden]{display:none}


/* ---------- time-lapse ---------- */
.lapse{background:#000;display:flex !important;align-items:center;justify-content:center}
.lapse[hidden]{display:none !important}
#lapseCv{max-width:100%;max-height:100%;object-fit:contain}
.lapse-date{position:absolute;top:calc(16px + env(safe-area-inset-top));left:0;right:0;text-align:center;
  font-size:14px;color:#fff;text-shadow:0 1px 6px #000}
.lapse-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;
  padding:18px 20px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}
.lapse-bar input{flex:1;accent-color:#fff}
.ghead-r{display:flex;gap:2px}