:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050505;
  color: #fff;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; min-height:100%; background:#050505; overscroll-behavior:none; }
body { min-height:100dvh; }
button, input { font: inherit; }
button { color:inherit; }
.view { display:none; min-height:100dvh; }
.view.active { display:flex; }
#cameraView { position:relative; overflow:hidden; background:#000; flex-direction:column; }
#preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.glass { background:rgba(15,15,15,.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border:1px solid rgba(255,255,255,.12); }
.topbar { position:absolute; z-index:5; left:12px; right:12px; top:calc(12px + var(--safe-top)); display:flex; justify-content:space-between; align-items:center; border-radius:18px; padding:12px 14px; }
.brand { font-weight:900; letter-spacing:.18em; font-size:17px; }
.subtle { margin-top:3px; font-size:12px; color:rgba(255,255,255,.72); }
.iconBtn,.roundBtn { border:0; width:46px; height:46px; border-radius:50%; background:rgba(22,22,22,.72); border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; font-size:21px; }
.statusPill { position:absolute; z-index:6; top:calc(88px + var(--safe-top)); left:50%; transform:translateX(-50%); border-radius:999px; padding:8px 12px; background:rgba(0,0,0,.72); font-size:12px; white-space:nowrap; }
.hidden { display:none !important; }
.cameraBottom { z-index:5; position:absolute; left:0; right:0; bottom:0; padding:16px 18px calc(18px + var(--safe-bottom)); background:linear-gradient(transparent,rgba(0,0,0,.82) 30%,rgba(0,0,0,.96)); }
.modeRail { width:max-content; max-width:100%; margin:0 auto 18px; padding:4px; border-radius:999px; display:flex; gap:3px; }
.mode { border:0; border-radius:999px; padding:9px 13px; background:transparent; color:rgba(255,255,255,.66); font-size:13px; }
.mode.active { background:#fff; color:#000; font-weight:800; }
.captureRow { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.captureRow .roundBtn:first-child { justify-self:start; }
.captureRow .roundBtn:last-child { justify-self:end; }
.shutter { position:relative; width:82px; height:82px; border-radius:50%; border:5px solid rgba(255,255,255,.95); background:transparent; }
.shutter::after { content:""; position:absolute; inset:7px; border-radius:50%; background:#fff; transition:.2s ease; }
.shutter.video::after,.shutter.frame::after { background:#ff3b30; }
.shutter.recording::after { inset:22px; border-radius:8px; }
.recordTimer { text-align:center; margin-top:10px; font-variant-numeric:tabular-nums; color:#ff5c54; font-weight:800; }
#libraryView,#frameView { flex-direction:column; background:#0b0b0b; }
.screenHeader { position:sticky; top:0; z-index:3; padding:calc(14px + var(--safe-top)) 16px 14px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:rgba(11,11,11,.9); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.08); }
.screenHeader h1 { margin:0; font-size:17px; }
.textBtn { border:0; background:none; padding:8px 0; text-align:left; color:#8ab4ff; }
.textBtn.danger { justify-self:end; color:#ff6b63; }
.headerSpacer { display:block; }
.libraryGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding-bottom:var(--safe-bottom); }
.mediaItem { border:0; padding:0; background:#111; aspect-ratio:1/1; overflow:hidden; position:relative; }
.mediaItem img,.mediaItem video { width:100%; height:100%; object-fit:cover; display:block; }
.mediaBadge { position:absolute; left:6px; bottom:6px; border-radius:999px; padding:4px 7px; font-size:10px; background:rgba(0,0,0,.68); }
.emptyState { margin:auto; text-align:center; padding:40px 28px; color:rgba(255,255,255,.72); max-width:420px; }
.emptyState h2 { color:#fff; margin-bottom:6px; }.emptyState p { line-height:1.5; }.emptyIcon{font-size:48px;}
.frameStage { width:100%; background:#000; display:grid; place-items:center; min-height:42dvh; }
#frameVideo { width:100%; max-height:52dvh; background:#000; }
.frameInfo { display:flex; justify-content:space-between; padding:14px 18px 8px; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.78); font-size:13px; }
.scrubber { width:calc(100% - 36px); margin:0 18px 16px; accent-color:#fff; }
.frameControls { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:0 18px; }
.frameControls button,.primaryBtn,.secondaryBtn { min-height:46px; border-radius:14px; border:1px solid rgba(255,255,255,.12); }
.frameControls button { background:#171717; }
.exportRow { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:18px; }
.primaryBtn { background:#fff; color:#000; font-weight:800; padding:0 16px; }
.secondaryBtn { background:#171717; color:#fff; font-weight:700; padding:0 16px; }
.frameNote { margin:0 18px calc(24px + var(--safe-bottom)); color:rgba(255,255,255,.56); line-height:1.5; font-size:12px; }
dialog { border:0; padding:0; background:transparent; color:#fff; max-width:92vw; }
dialog::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(8px); }
.dialogCard { width:min(520px,92vw); background:#151515; border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:20px; }
.dialogCard h2 { margin-top:0; }.details { font-size:13px; line-height:1.7; color:rgba(255,255,255,.75); margin-bottom:18px; word-break:break-word; }
@media (min-width:800px){
  #app{max-width:1100px;margin:0 auto;box-shadow:0 0 80px rgba(0,0,0,.5)}
  .libraryGrid{grid-template-columns:repeat(5,1fr)}
}

/* Camera options - Alpha 0.2 */
.cameraMenuBtn { display:flex; align-items:center; justify-content:center; gap:2px; padding:0; }
.cameraGlyph { font-size:21px; line-height:1; }
.menuChevron { font-size:12px; opacity:.72; transform:translateY(1px); }
.cameraMenu { position:absolute; z-index:9; right:12px; top:calc(76px + var(--safe-top)); width:min(330px,calc(100vw - 24px)); border-radius:20px; padding:8px; box-shadow:0 18px 60px rgba(0,0,0,.48); }
.cameraMenuAction,.cameraMenuRow,.cameraMenuSlider { width:100%; min-height:58px; border:0; border-radius:14px; background:transparent; padding:10px 11px; color:#fff; }
.cameraMenuAction { display:flex; align-items:center; gap:12px; text-align:left; }
.cameraMenuAction:active,.cameraMenuRow:active { background:rgba(255,255,255,.08); }
.cameraMenuAction.secondaryAction { border-top:1px solid rgba(255,255,255,.08); border-radius:0 0 14px 14px; margin-top:3px; }
.menuIcon { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; flex:0 0 auto; font-size:17px; }
.cameraMenuAction span:last-child,.cameraMenuRow > span,.sliderLabel span { display:flex; flex-direction:column; gap:2px; }
.cameraMenu strong { font-size:14px; font-weight:750; }
.cameraMenu small { font-size:11px; color:rgba(255,255,255,.58); line-height:1.25; }
.cameraMenuRow { display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; }
.toggleInput { appearance:none; -webkit-appearance:none; width:46px; height:27px; border-radius:999px; background:rgba(255,255,255,.18); position:relative; flex:0 0 auto; transition:.18s ease; }
.toggleInput::after { content:""; position:absolute; width:21px; height:21px; top:3px; left:3px; border-radius:50%; background:#fff; transition:.18s ease; }
.toggleInput:checked { background:#34c759; }
.toggleInput:checked::after { transform:translateX(19px); }
.cameraMenuSlider { padding-top:10px; padding-bottom:12px; }
.sliderLabel { display:flex; justify-content:space-between; margin-bottom:8px; }
.cameraMenuSlider input[type="range"] { width:100%; accent-color:#fff; }
#preview.mirrored { transform:scaleX(-1); }
.gridOverlay { position:absolute; z-index:3; inset:0; pointer-events:none; }
.gridOverlay span { position:absolute; background:rgba(255,255,255,.42); box-shadow:0 0 1px rgba(0,0,0,.7); }
.gridV { top:0; bottom:0; width:1px; }
.gridV1 { left:33.333%; }.gridV2 { left:66.666%; }
.gridH { left:0; right:0; height:1px; }
.gridH1 { top:33.333%; }.gridH2 { top:66.666%; }