:root{color-scheme:dark light;--app-width: 430px;--bg: #0f0f12;--surface: #1a1a20;--border: #2a2a33;--text: #f4f4f5;--muted: #a1a1aa;--radius: 16px;--shadow: 0 8px 32px rgb(0 0 0 / 24%)}@media(prefers-color-scheme:light){:root{--bg: #f4f4f5;--surface: #ffffff;--border: #e4e4e7;--text: #18181b;--muted: #71717a;--shadow: 0 8px 24px rgb(0 0 0 / 8%)}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:color-mix(in srgb,var(--bg) 88%,#000);color:var(--text);line-height:1.5}#app{width:100%;max-width:var(--app-width);min-height:100dvh;margin:0 auto;padding:max(.75rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-left));background:var(--bg)}.header{margin:0 0 1rem}.header__top{display:flex;align-items:center;justify-content:flex-start;gap:.75rem}.header__camera{display:flex;align-items:baseline;gap:.5rem;margin-top:.75rem;min-width:0}.title{margin:0;font-size:1.75rem;font-weight:700;letter-spacing:-.02em}.camera-title{margin:0;font-size:1.2rem;font-weight:600;letter-spacing:-.015em;line-height:1.3;min-width:0;overflow-wrap:anywhere}.subtitle{margin:.25rem 0 0;color:var(--muted);font-size:.95rem}.back-button{flex:none;margin:0;padding:.1rem .15rem .1rem 0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:1.15rem;line-height:1.3;cursor:pointer}.back-button:hover,.back-button:focus-visible{color:var(--text)}.menu-button{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;margin:0;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer}.menu-button:focus-visible{outline:2px solid var(--text);outline-offset:2px}.menu-button__icon,.menu-button__icon:before,.menu-button__icon:after{display:block;width:1rem;height:2px;border-radius:999px;background:currentColor}.menu-button__icon{position:relative}.menu-button__icon:before,.menu-button__icon:after{position:absolute;left:0;content:""}.menu-button__icon:before{top:-5px}.menu-button__icon:after{top:5px}.app-menu{position:relative}.app-menu__dropdown{position:absolute;top:calc(100% + .4rem);left:0;z-index:20;min-width:10rem;padding:.35rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease}.app-menu.is-open .app-menu__dropdown{opacity:1;pointer-events:auto;transform:translateY(0)}.app-menu__item{display:block;width:100%;margin:0;padding:.65rem .75rem;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}.app-menu__item:hover,.app-menu__item:focus-visible{background:color-mix(in srgb,var(--text) 8%,transparent)}.auth{display:grid;align-content:center;min-height:calc(100dvh - 2rem);width:100%}.auth__header{margin-bottom:1.5rem}.auth-form{display:grid;gap:1rem}.field{display:grid;gap:.4rem}.field__label{color:var(--muted);font-size:.9rem}.field__input{width:100%;padding:.85rem .95rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:1.05rem;letter-spacing:.02em}.field__input:focus{outline:2px solid var(--text);outline-offset:1px}.field__input:disabled{opacity:.45;cursor:not-allowed}.field__input::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}.auth-form__error{margin:0;color:#ef4444;font-size:.9rem}.camera-grid{display:grid;gap:.75rem;width:100%}.camera-card{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);cursor:pointer}.camera-card:focus-visible{outline:2px solid var(--text);outline-offset:2px}.camera-card__header{display:flex;align-items:center;gap:.5rem;padding:.75rem .875rem;border-bottom:1px solid var(--border)}.camera-card__title{margin:0;font-size:1rem;font-weight:600}.camera-card__stale{margin-left:auto;max-width:55%;padding:.15rem .45rem;border-radius:999px;background:color-mix(in srgb,#f59e0b 18%,transparent);color:#d97706;font-size:.75rem;font-weight:600;letter-spacing:.01em;line-height:1.2;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(prefers-color-scheme:dark){.camera-card__stale{background:color-mix(in srgb,#f59e0b 22%,transparent);color:#fbbf24}}.camera-card__preview{position:relative;aspect-ratio:16 / 9;background:#000;overflow:hidden}.player__frame{position:relative;aspect-ratio:6 / 5;background:#000;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.camera-card__preview canvas,.camera-card__preview video,.player__frame iframe,.player__frame video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.player__frame video{object-fit:contain;background:#000}.camera-card__preview canvas{z-index:1;display:block;object-fit:cover;opacity:0;pointer-events:none}.camera-card__preview canvas.has-frame{opacity:1}.camera-card__preview video{z-index:0;opacity:1;pointer-events:none;object-fit:cover}.player{width:100%}.recordings{margin-top:1.25rem}.recordings__title{margin:0 0 .75rem;font-size:1.05rem;font-weight:600;letter-spacing:-.015em}.recordings__grid{display:grid;gap:.75rem}.recording-card{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}.recording-card__header{padding:.75rem .875rem;border-bottom:1px solid var(--border)}.recording-card__title{margin:0;font-size:1rem;font-weight:600}.recording-card__media{position:relative;aspect-ratio:16 / 9;background:#000}.recording-card__media video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;object-fit:contain}