:root{color-scheme:dark;font:15px system-ui,sans-serif;background:#0c0e10;color:#eee}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:18px;padding:18px;border-bottom:1px solid #30343a;flex-wrap:wrap}em{color:#dfc16e;font-style:normal}header span{margin-left:auto;color:#aaa}main{max-width:1300px;margin:auto;padding:16px}.setup{max-width:680px;margin:30px auto}.setup h1{font-size:32px}.setup p{color:#bac0c9;line-height:1.6}label{display:block;margin:14px 0}input,textarea,select{font:inherit;background:#171b20;color:#eee;border:1px solid #424954;border-radius:8px;padding:10px;width:100%;margin-top:6px}input[type=checkbox]{width:auto;margin-right:8px}textarea{resize:vertical;font:12px ui-monospace,monospace}button,a{font:inherit;color:inherit}button{background:#282d35;border:1px solid #444c58;border-radius:8px;padding:10px 14px;cursor:pointer}button:hover{border-color:#e5c775}button:disabled{opacity:.45;cursor:wait}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.toolbar label{margin:0}#viewer{height:60vh;min-height:240px;display:flex;align-items:center;justify-content:center;position:relative;background:#080a0c;margin:16px 0}#photo{max-width:100%;max-height:100%;object-fit:contain}#filename{position:absolute;bottom:0;background:#000a;padding:8px;border-radius:6px}#film{display:flex;overflow:auto;gap:8px;margin-top:18px;min-height:100px}#film button{flex:0 0 120px;padding:5px}#film img{width:108px;height:72px;object-fit:contain}#film small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#film .active{border-color:#dfc16e}#film .selected{background:#443d26}#rating{display:flex;gap:3px}#rating button{padding:8px;color:#dfc16e}#status{color:#dbc78f;overflow-wrap:anywhere}footer{padding:20px;text-align:center;color:#888;font-size:12px}section[hidden]{display:none}@media(max-width:600px){main{padding:10px}header{padding:12px;font-size:12px}.setup{margin:12px auto}.setup h1{font-size:25px}#viewer{height:48vh}button{padding:9px 10px}.toolbar{gap:6px}footer{padding-bottom:max(16px,env(safe-area-inset-bottom))}}

.pair-code{font-size:1.8rem;font-weight:700;letter-spacing:.12em;color:#e8c277}input#paircode{font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase}details{margin:1rem 0}summary{cursor:pointer;color:#b7bdc9}
/* Fit the actual image, including small camera thumbnails, to the viewport. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
body{padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}header{padding:8px 12px;gap:8px}main{padding-top:8px}#photo{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}#viewer{height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 240px);min-height:240px;margin:8px 0}#film{margin-top:8px;min-height:80px}#film button{flex-basis:92px}#film img{width:80px;height:54px}#status{margin:6px 0;font-size:13px}#camera-state{color:#dbc78f;font-size:13px}#exitfocus{display:none}body.immersive #viewer{position:fixed;inset:var(--safe-top) 0 var(--safe-bottom);height:auto;margin:0;z-index:20}body.immersive #exitfocus{display:block;position:absolute;right:10px;top:10px;z-index:22;background:#222b}body.offline #viewer{outline:2px solid #9c7533}#viewer:fullscreen{height:100%;width:100%;margin:0}#photo{touch-action:pinch-zoom}

body.immersive{overflow:hidden}body.immersive header,body.immersive .toolbar,body.immersive #film,body.immersive #more,body.immersive footer,body.immersive #status{visibility:hidden}#viewer-state{position:absolute;top:12px;left:12px;right:110px;color:#f3d08c;background:#0009;border-radius:6px;padding:4px;pointer-events:none}#viewer-state:empty{display:none}

html,body{min-height:100%;height:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}#photo{touch-action:auto;user-select:none;-webkit-user-select:none}#viewer{touch-action:pan-y pinch-zoom}#film{touch-action:auto}body.immersive{overflow:hidden}body.immersive #viewer{touch-action:pinch-zoom}