@charset "UTF-8";.camera-demo-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);background:#08080ac7;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:cameraDemoFade .25s ease-out both}.camera-demo{position:relative;width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:var(--space-md);animation:cameraDemoPop .3s cubic-bezier(.4,0,.2,1) both}.camera-demo-close{position:absolute;top:-10px;right:-10px;z-index:20;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border);background:#141418eb;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.camera-demo-close:hover{color:#fff;border-color:#ffffff4d;transform:scale(1.05)}.camera-demo-stage{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--glass-radius);border:1px solid var(--border);background:#0c0c0e;box-shadow:0 30px 80px #00000080}.camera-demo-canvas-holder{position:absolute;inset:0}.camera-demo-canvas-holder .camera-demo-canvas,.camera-demo-canvas-holder canvas{width:100%!important;height:100%!important;object-fit:cover;display:block}.camera-demo-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:var(--space-xl);background:radial-gradient(circle at 50% 40%,#18181c99,#0a0a0cf2)}.camera-demo-overlay-title{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.camera-demo-overlay-sub{font-size:var(--font-size-sm);color:var(--text-secondary);max-width:32ch;line-height:1.5}.camera-demo-overlay-icon{color:var(--live-red)}.camera-demo-spinner{color:var(--accent-primary);animation:cameraDemoSpin .9s linear infinite}.camera-demo-retry{margin-top:6px;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-xl);border:1px solid var(--accent-primary);background:transparent;color:var(--accent-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast)}.camera-demo-retry:hover{background:var(--accent-glow)}.camera-demo-stage-live{position:absolute;top:12px;left:12px;z-index:4;display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:100px;background:#00000073;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:#ffffffb3}.camera-demo-stage-live-dot{width:6px;height:6px;border-radius:50%;background:var(--live-red);box-shadow:0 0 6px #ff3b3b99;animation:livePulse 1.5s infinite}.camera-demo-switcher{display:flex;gap:8px;width:100%;justify-content:center;flex-wrap:wrap}.camera-demo-chip{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:100px;border:1px solid var(--border);background:var(--glass-bg);color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}.camera-demo-chip:hover:not(:disabled){color:var(--text-primary);border-color:#fff3}.camera-demo-chip.is-active{color:var(--accent-primary);border-color:var(--accent-primary);background:var(--accent-glow)}.camera-demo-chip:disabled{opacity:.45;cursor:default}.camera-demo-chip-emoji{font-size:15px;line-height:1}.camera-demo-done{display:none;width:100%;max-width:320px;padding:14px 24px;border-radius:var(--radius-xl);border:1px solid var(--border);background:var(--glass-bg);color:var(--text-primary);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast)}.camera-demo-done:active{transform:scale(.98)}.camera-demo-footnote{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--text-tertiary);text-align:center}@keyframes cameraDemoFade{0%{opacity:0}to{opacity:1}}@keyframes cameraDemoPop{0%{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes cameraDemoSpin{to{transform:rotate(360deg)}}@media(max-width:640px){.camera-demo-backdrop{padding:calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 12px);align-items:stretch}.camera-demo{max-width:none;height:100%;justify-content:center;gap:var(--space-md)}.camera-demo-close{top:0;right:0;width:42px;height:42px}.camera-demo-stage{aspect-ratio:3/4;max-height:62vh;width:100%}.camera-demo-chip{padding:9px 13px;font-size:13px}.camera-demo-done{display:block}}
