:root{color-scheme:light;--paper:#f5f4f0;--ink:#18251f;--muted:#6d776f;--green:#28735b;--line:#dce0d8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{cursor:pointer}main{max-width:620px;margin:auto;padding:28px 22px 20px}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:38px}.brand{font-size:31px;font-weight:750;letter-spacing:-1.5px}.brand:before{content:' ';display:inline-block;width:14px;height:22px;border:3px solid var(--green);border-bottom:0;margin-right:10px;vertical-align:-1px}.status{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}.dot{width:7px;height:7px;border-radius:50%;background:#b8bcb5}.dot.online{background:var(--green);box-shadow:0 0 0 4px #28735b0d}.eyebrow{font-size:11px;font-weight:650;color:var(--muted);letter-spacing:1.8px;text-transform:uppercase}.heading{font-size:25px;font-weight:620;letter-spacing:-.8px;margin:9px 0 23px;line-height:1.18}.doorselect{width:100%;font-size:17px;font-weight:600;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 25px 15px 0;margin-bottom:22px;outline:none;text-overflow:ellipsis}.viewer{position:relative;background:#17231e;aspect-ratio:16/10;border-radius:3px;overflow:hidden}video{width:100%;height:100%;object-fit:cover;background:#17231e}.cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#c6d1ca;gap:12px;font-size:13px;pointer-events:none;background:#17231e;transition:opacity .3s}.cover.hidden{opacity:0}.loader{width:23px;height:23px;border:2px solid #ffffff25;border-top-color:#c5d4cc;border-radius:50%;animation:spin 1.3s linear infinite}.live{position:absolute;left:13px;top:13px;display:none;gap:6px;align-items:center;color:white;font-size:11px;background:#0007;padding:5px 8px;border-radius:2px}.live:before{content:'';height:5px;width:5px;background:#9ad7af;border-radius:50%}.under{display:flex;align-items:center;justify-content:space-between;padding:14px 0 23px;color:var(--muted);font-size:12px}.sound{border:1px solid var(--line);padding:9px 12px;border-radius:40px;background:transparent;color:var(--ink);font-size:12px;display:flex;gap:7px;align-items:center}.sound svg{width:16px;height:16px}.open{display:flex;width:100%;border:0;border-radius:4px;background:var(--green);color:white;align-items:center;justify-content:center;gap:11px;min-height:64px;font-size:18px;font-weight:620;transition:transform .12s,background .2s}.open:active{transform:scale(.985)}.open svg{width:21px;height:21px}.open:disabled{opacity:.55;cursor:default}.message{font-size:13px;min-height:36px;padding:12px 0;color:var(--muted);text-align:center}.error{color:#9a3f2f}.controls{border-top:1px solid var(--line);margin-top:14px;padding-top:20px;display:flex;align-items:center;justify-content:space-between}.controls label{font-size:13px;font-weight:550}.switch{border:0;border-radius:20px;background:#d4d9d2;width:46px;height:27px;padding:3px;transition:background .2s}.switch span{display:block;height:21px;width:21px;background:white;border-radius:50%;box-shadow:0 1px 3px #0002;transition:transform .2s}.switch.on{background:var(--green)}.switch.on span{transform:translateX(19px)}.setup{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap}.link{color:var(--muted);background:transparent;border:0;border-bottom:1px solid #bac3b8;padding:0 0 3px;font-size:11px}.footer{font-size:10px;color:#9ba399;margin-top:28px;letter-spacing:.5px}.login{padding-top:25px}.login p{color:var(--muted);font-size:14px;line-height:1.5}.login input{display:block;width:100%;background:white;border:1px solid var(--line);border-radius:4px;padding:16px;margin:24px 0 15px;outline-color:var(--green)}[hidden]{display:none!important}.incoming .eyebrow{color:var(--green)}.incoming .heading{animation:appear .25s ease-out}@keyframes spin{to{transform:rotate(360deg)}}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

main{padding-top:25px}.top{margin-bottom:29px}.heading{overflow-wrap:anywhere}.intro{display:flex;align-items:center;justify-content:space-between;gap:15px}.intro .heading{margin:7px 0 0;font-size:28px}.hint{font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0 21px}.refresh-icon{width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--green);display:grid;place-items:center}.refresh-icon svg{width:18px;height:18px}.refresh-icon.busy svg{animation:spin 1.4s linear infinite}.refresh-icon:disabled{opacity:.55}
.door-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px}.door-card{display:flex;flex-direction:column;min-width:0;padding:0;text-align:left;color:var(--ink);background:#fff;border:0;border-radius:7px;overflow:hidden;box-shadow:0 1px 0 #18251f0c;transition:transform .14s}.door-card:active{transform:scale(.975)}button:focus-visible{outline:2px solid var(--green);outline-offset:4px}.tile-image{position:relative;aspect-ratio:16/10;background:#e5e9e2;display:grid;place-items:center;overflow:hidden;width:100%}.tile-image img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .28s}.tile-image.ready img{opacity:1}.tile-placeholder{color:#8c9c90;display:flex;align-items:center;justify-content:center}.tile-placeholder svg{width:27px;height:27px;stroke-width:1.2}.tile-image.ready .tile-placeholder{visibility:hidden}.tile-image.loading .tile-placeholder{animation:breathe 1.5s ease-in-out infinite}.tile-body{width:100%;padding:12px;display:flex;flex-direction:column;flex:1;gap:8px}.tile-name{font-size:15px;font-weight:620;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}.tile-bottom{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-top:auto}.tile-meta{font-size:10px;color:var(--muted);line-height:1.35}.tile-arrow{font-size:17px;color:var(--green)}.empty{font-size:14px;color:var(--muted);padding:32px 0}.back{border:0;background:transparent;color:var(--green);padding:0 0 18px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:550}.back span{font-size:21px;line-height:1}.detail-title .heading{margin-bottom:22px}.controls{margin-top:23px}.message:empty{min-height:12px;padding:0}.screen{animation:appear .2s ease-out}#previewHost{position:fixed;bottom:0;right:0;width:2px;height:2px;opacity:0;pointer-events:none;overflow:hidden}#previewHost video{width:2px;height:2px}@keyframes breathe{50%{opacity:.4}}@media(max-width:350px){main{padding-left:15px;padding-right:15px}.tile-name{font-size:14px}.tile-body{padding:10px}.door-grid{gap:12px 10px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

main{padding-top:max(25px,env(safe-area-inset-top));padding-bottom:calc(25px + env(safe-area-inset-bottom))}.brand{font-size:clamp(21px,6.2vw,31px);letter-spacing:-1px;white-space:nowrap}.top{gap:12px;flex-wrap:wrap}.status{white-space:nowrap}.refresh-icon{font-size:26px}.notification-settings{border-top:1px solid var(--line);margin-top:20px;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.notification-settings .hint{margin:6px 0 0}.setting-title{font-size:14px;font-weight:600}.notification-settings .switch{flex-shrink:0}.incoming-banner{border:0;border-radius:5px;background:var(--green);color:white;text-align:left;padding:16px;width:100%;margin-bottom:24px;font:inherit;font-size:14px}.login label{display:block;font-size:12px;color:var(--muted);margin-top:24px}.login input{margin-top:9px;font-size:20px;letter-spacing:2px}.install{border-left:2px solid var(--green);padding-left:16px}.tile-placeholder{font-size:38px}.back{min-height:44px}.link{min-height:34px}.sound{min-height:44px}.live{display:flex}.busy{animation:spin 1.5s linear infinite} .switch:disabled{opacity:.45}.brand:before{width:12px;height:20px;margin-right:8px}.login .open{margin-top:20px}