:root{font-family:Arial,Helvetica,sans-serif;color:#eef1ed;background:#111614;color-scheme:dark}*{box-sizing:border-box}body{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column}button{font:inherit;cursor:pointer;background:#202923;border:1px solid #39443c;color:#eaf0eb;border-radius:5px;padding:9px 13px;font-size:14px}button:hover{background:#334238}button:focus-visible{outline:2px solid #b3efc1;outline-offset:3px}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}header{padding:18px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #303932;gap:15px}.brand{font-size:23px;font-weight:800;display:flex;align-items:center;letter-spacing:-1px}.brand>span:first-child{color:#afe8bd}.divider{height:22px;width:1px;background:#4b574f;margin:0 22px}h1{font-size:15px;font-weight:400;letter-spacing:0;margin:0;color:#c9d2cb}main{min-height:0;flex:1;display:flex;flex-direction:column;padding:0 28px 18px}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 0;gap:12px}.toolbar>div:first-child{display:flex;align-items:center;gap:17px}#count{font-size:12px;color:#9ba99f;font-variant-numeric:tabular-nums}h2{font-size:17px;font-weight:400;margin:0}.tools{display:flex;align-items:center;gap:12px}.zoom{display:flex;gap:1px}.zoom button{border-radius:0;min-width:38px}.zoom button:first-child{border-radius:5px 0 0 5px}.zoom button:last-child{border-radius:0 5px 5px 0}#reset{font-size:12px;min-width:53px}#stage{flex:1;min-height:140px;position:relative;overflow:hidden;background:#090d0b;border:1px solid #29332d;touch-action:none}#canvas{position:absolute;inset:0;transform-origin:center;will-change:transform}#picture{width:100%;height:100%;object-fit:contain;user-select:none;display:block}.arrow{position:absolute;top:50%;transform:translateY(-50%);border:1px solid #80948766;background:#0d1717bb;font-size:32px;width:42px;height:54px;padding:0;z-index:2;line-height:1}.previous{left:14px}.next{right:14px}.hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:12px;color:#e2e9e4;background:#0c151bba;padding:6px 12px;border-radius:3px;white-space:nowrap;pointer-events:none}.bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}.bottom p{margin:0;font-size:14px;color:#cad5ce}.bottom>span{font-size:12px;color:#88998d;white-space:nowrap}#thumbnails{display:flex;gap:10px;overflow-x:auto;flex-shrink:0;padding:3px 3px 8px;scrollbar-width:thin;scrollbar-color:#546b5a #172019}#thumbnails button{background:transparent;padding:0;border:2px solid transparent;min-width:122px;flex:1;max-width:200px;border-radius:5px;overflow:hidden;text-align:left}#thumbnails button[aria-current=true]{border-color:#afe8bd;background:#233d2b}#thumbnails img{width:100%;height:64px;object-fit:cover;display:block;opacity:.7}#thumbnails button[aria-current=true] img,#thumbnails button:hover img{opacity:1}#thumbnails span{display:block;font-size:12px;padding:7px 8px;white-space:nowrap}body:fullscreen{background:#111614}@media(max-width:700px){header{padding:12px 14px}.brand{font-size:20px}.divider{margin:0 12px}h1{font-size:13px}header button{font-size:12px;padding:8px}main{padding:0 10px 8px}.toolbar{padding:12px 0;align-items:flex-start}.toolbar>div:first-child{display:block}#count{font-size:11px}h2{font-size:14px;margin-top:5px}.tools{gap:6px}button{padding:8px;font-size:12px}.zoom button{min-width:30px}#reset{min-width:42px}.bottom{padding:10px 0}.bottom p{font-size:12px}.bottom>span{display:none}#thumbnails button{min-width:105px}#thumbnails img{height:56px}.arrow{width:32px;height:44px}.previous{left:5px}.next{right:5px}.hint{font-size:10px;padding:5px 8px}#night{max-width:80px}}@media(max-height:550px){header{padding:8px 20px}.toolbar{padding:8px 0}#thumbnails img{height:40px}#thumbnails span{padding:4px 6px}.bottom{padding:6px 0}.hint{display:none}}

#dayNight{display:flex;align-items:center;gap:9px;font-size:13px;white-space:nowrap}#lightRange{width:130px;accent-color:#afe8bd;cursor:ew-resize}#nightPicture{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.zoom-note{font-size:13px;color:#a9b7ad;white-space:nowrap}.brand{flex-shrink:1}.brand h1{line-height:1.4;letter-spacing:0}header>button{flex-shrink:0}.tools{gap:22px}.toolbar{flex-wrap:wrap}@media(max-width:800px){.brand h1{font-size:13px;max-width:310px}.tools{gap:12px}#lightRange{width:105px}}@media(max-width:560px){header{align-items:flex-start}.brand{flex-wrap:wrap;max-width:75%}.brand .divider{display:none}.brand h1{flex-basis:100%;margin-top:6px;font-size:12px}.toolbar{gap:10px}.tools{margin-left:auto}#dayNight{font-size:12px}.zoom-note{font-size:11px}#lightRange{width:85px}#thumbnails button{min-width:145px}}

:root{--brand-green:#5a9837}.wordmark{width:120px;height:auto;display:block}.brand{letter-spacing:0}#dayNight{padding:8px 16px;background:#21341c;border:1px solid #5a9837;border-radius:7px;gap:14px;font-size:14px}#lightRange{appearance:none;-webkit-appearance:none;width:clamp(180px,24vw,420px);height:12px;border-radius:10px;background:linear-gradient(to right,#5a9837,#365c23);accent-color:var(--brand-green);outline-offset:6px}#lightRange::-webkit-slider-thumb{appearance:none;width:25px;height:25px;border-radius:50%;background:#5a9837;border:3px solid #d9edce;box-shadow:0 1px 5px #0008;cursor:ew-resize}#lightRange::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#5a9837;border:3px solid #d9edce;cursor:ew-resize}#lightRange:disabled{opacity:.45}#thumbnails button[aria-current=true]{border-color:var(--brand-green)}.toolbar{gap:16px}.tools{gap:24px}#chargingFlow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}#chargingFlow path{stroke:#a2df77;stroke-opacity:.9;stroke-width:2.2;stroke-dasharray:2 8;animation:charge 3s linear infinite;filter:none}@keyframes charge{to{stroke-dashoffset:-20}}#loadStatus{position:absolute;inset:0;display:grid;place-items:center;background:#090d0b;color:#a8b5aa;font-size:14px;pointer-events:none}@media(prefers-reduced-motion:reduce){#chargingFlow path{animation:none}}@media(max-width:1000px){.toolbar{align-items:flex-start}.toolbar>div:first-child{min-width:220px}.tools{flex-wrap:wrap;justify-content:flex-end}#lightRange{width:190px}.wordmark{width:105px}}@media(max-width:700px){.toolbar>div:first-child{min-width:0}.tools{width:100%;justify-content:space-between;gap:10px}#dayNight{flex:1;min-width:0;padding:9px 12px;gap:10px}#lightRange{width:auto;min-width:70px;flex:1}.wordmark{width:100px}header .brand{gap:0}.zoom-note{font-size:12px}.toolbar:has(#dayNight[hidden]) .tools{width:auto;margin-left:auto}}@media(max-height:550px){#dayNight{padding:5px 10px}#lightRange{height:8px}.toolbar{padding:6px 0}}

#chargingFlow{z-index:3}#chargingFlow path{filter:none}

#nightHint{position:absolute;right:16px;bottom:12px;z-index:4;font-size:12px;font-weight:400;letter-spacing:.1px;color:rgba(255,255,255,.65);text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none}@media(max-width:600px){#nightHint{right:10px;bottom:9px;font-size:11px}}

.arrow:disabled{opacity:.18;pointer-events:none;background:#101814;cursor:default}

.view-frame,.image-layer{position:absolute;inset:0;width:100%;height:100%}.image-layer>img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}.sign-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#loadStatus{inset:auto 12px 12px;padding:10px 14px;background:#101814e8;border-radius:4px;z-index:5}