:root { --bg: #f6f4f0; --fg: #1b1a18; --muted: #6d6a64; --line: #d8d4cc; --green: #2f7d4f; }
@media (prefers-color-scheme: dark) { :root { --bg: #121110; --fg: #ece9e3; --muted: #9a958c; --line: #2c2a27; --green: #3f9e66; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 ui-serif, Georgia, serif; }
main { max-width: 1100px; margin: 0 auto; padding: 48px 16px 96px; }
form#unlock { max-width: 320px; margin: 20vh auto 0; display: grid; gap: 12px; }
form#unlock label { color: var(--muted); }
input, button { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--fg); }
button { cursor: pointer; }
#err { color: #b3261e; min-height: 1.5em; margin: 0; }
header { margin-bottom: 40px; }
h1 { font-weight: 400; font-size: 2rem; margin: 0 0 4px; }
.date { color: var(--muted); margin: 0 0 16px; font-family: ui-monospace, monospace; font-size: 13px; }
.note { max-width: 60ch; white-space: pre-line; }
body.unlocked main { max-width: none; padding: 32px 16px 96px; }
body.lv-open { overflow: hidden; }
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; top: 0; z-index: 5;
  background: var(--bg); padding: 8px 0 12px; margin-bottom: 4px; }
.bar .n { font: 13px ui-monospace, monospace; color: var(--muted); margin-right: auto; }
.bar button { font-size: 14px; padding: 6px 12px; }
.bar button.dl:not(:disabled) { background: var(--green); border-color: var(--green); color: #fff; }
button:disabled { opacity: .45; cursor: default; }
/* grid: fixed-height tiles, widths from each photo's aspect ratio, like the studio library */
.lg { display: flex; flex-wrap: wrap; gap: 4px; }
.lt { position: relative; margin: 0; cursor: zoom-in; }
.lt img { display: block; height: 160px; width: auto; max-width: calc(100vw - 32px); object-fit: cover;
  border-radius: 3px; background: var(--line); }
.lt .ck { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 14px; line-height: 26px; opacity: .45; }
.lt:hover .ck { opacity: .9; }
.lt.pk .ck { background: var(--green); opacity: 1; }
.lt.pk img { outline: 3px solid var(--green); outline-offset: -3px; }
@media (max-width: 600px) { .lt img { height: 110px; } }
/* lightbox */
.lv { position: fixed; inset: 0; background: rgba(0,0,0,.94); display: none; align-items: center;
  justify-content: center; z-index: 100; }
.lv.open { display: flex; }
.lv img { max-width: 94vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.lv button { position: absolute; background: rgba(255,255,255,.14); color: #fff; border: 0; font-size: 16px; }
.lv .prev, .lv .next { top: 50%; transform: translateY(-50%); font-size: 30px; line-height: 1; padding: 12px 16px; }
.lv .prev { left: 10px; } .lv .next { right: 10px; } .lv .close { right: 12px; top: 12px; }
.lv .pick { bottom: 16px; left: 50%; transform: translateX(-50%); }
.lv .pick.on { background: var(--green); }
.lv .cap { position: absolute; top: 18px; left: 16px; right: 70px; margin: 0; color: #ccc;
  font: 13px ui-monospace, monospace; }