:root{color-scheme:light;--ink:#142d46;--muted:#56697b;--line:#dce3ea;--accent:#006b80;--wash:#eef3f7}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--wash);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
body{height:100vh;height:100svh;display:flex;flex-direction:column}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}
button,select{border:1px solid #bdcbd7;background:#fff;color:var(--ink);border-radius:7px;padding:9px 13px;min-height:43px}button{cursor:pointer;font-weight:650}button:hover:not(:disabled){background:#edf6f8;border-color:var(--accent)}button:disabled{opacity:.42;cursor:default}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #ecaa40;outline-offset:3px}a{color:var(--accent)}
header{padding:19px 26px 17px;background:#fff;border-bottom:1px solid var(--line);display:flex;gap:20px;align-items:center;justify-content:space-between;flex-shrink:0}
.brand{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--accent)}h1{font-size:clamp(20px,2.2vw,30px);line-height:1.3;letter-spacing:.01em;margin:5px 0 0;overflow-wrap:anywhere}.description{font-size:13px;color:var(--muted);margin:6px 0 0;white-space:pre-wrap}.album-meta{font-size:13px;color:var(--muted);text-align:right;white-space:nowrap}
.layout{display:grid;grid-template-columns:266px minmax(0,1fr);flex:1;min-height:0;gap:18px;padding:18px 22px 20px;max-width:2200px;width:100%;align-self:center}
.sidebar{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}.sidebar-head{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid var(--line);font-size:13px}.sidebar-head span{font-size:11px;color:var(--muted)}
.thumbs{min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:10px;padding:12px;scrollbar-width:thin}
.thumb{display:block;min-width:0;height:122px;overflow:hidden;align-self:start;padding:4px;border:2px solid transparent;border-radius:7px;text-align:left;background:#f1f4f7;line-height:1.3;min-height:0;font-weight:400}.thumb:hover:not(:disabled){border-color:#9aaebd}.thumb[aria-current="true"]{border-color:var(--accent);background:#e3f3f4;box-shadow:0 0 0 1px var(--accent)}.thumb img{display:block;width:100%;height:78px;object-fit:contain;background:#e8edf1;border-radius:3px}.thumb span{display:block;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}.thumb .tn-date{color:var(--muted);font-size:9px;margin-top:2px}
.viewer{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}.stage{position:relative;flex:1;min-height:120px;background:#101820;display:flex;align-items:center;justify-content:center;overflow:hidden}.stage a{height:100%;width:100%;display:flex;align-items:center;justify-content:center}.stage img{width:100%;height:100%;object-fit:contain;display:block}.loading{position:absolute;top:14px;left:14px;color:#fff;background:#253442d9;padding:6px 10px;border-radius:5px;font-size:12px;pointer-events:none}.loading[hidden]{display:none}
.photo-meta{padding:14px 18px 10px;display:flex;gap:14px;justify-content:space-between;align-items:flex-start;border-top:1px solid var(--line)}.photo-meta h2{font-size:15px;margin:0 0 4px;font-weight:700;overflow-wrap:anywhere}.photo-meta p{font-size:12px;color:var(--muted);margin:0;line-height:1.65}.count{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--accent);font-weight:700}.credit{white-space:pre-wrap}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 18px 14px}.nav-buttons{display:flex;gap:7px}.controls .play{background:var(--accent);color:#fff;border-color:var(--accent);min-width:132px}.controls .play:hover:not(:disabled){background:#00566a}.controls label{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}.controls select{padding:8px 9px}.statusbar{padding:0 18px 11px;display:flex;gap:15px;flex-wrap:wrap;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);min-height:26px}.statusbar a{text-decoration:none}.error{color:#a12424;font-weight:650}.hint{opacity:.8}.progress{height:3px;background:#e6edf1;flex-shrink:0;overflow:hidden}.progress div{height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
noscript{display:block;padding:15px;background:#fff2d9}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){body{height:auto;min-height:100svh}header{padding:15px 16px;align-items:flex-start}.album-meta{font-size:11px}.layout{display:flex;flex-direction:column;padding:12px;gap:12px}.sidebar{flex:none}.sidebar-head{padding:9px 12px}.thumbs{display:flex;overflow-x:auto;overflow-y:hidden;padding:8px;gap:7px}.thumb{flex:0 0 105px;height:106px}.thumb img{height:62px}.thumb .tn-date{font-size:9px}.viewer{min-height:0}.stage{height:clamp(260px,48svh,560px);min-height:260px;flex:none}.controls{padding:10px 12px;gap:9px}.photo-meta{padding:12px}.statusbar{padding:0 12px 10px}.controls .play{min-width:121px}.hint{display:none}}
@media(max-width:420px){header{gap:8px}h1{font-size:20px}.album-meta{font-size:10px}.controls{gap:7px}.controls button{padding:8px 10px}.controls label{font-size:11px}.controls .play{min-width:116px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.progress div{transition:none!important}}

[hidden]{display:none!important}.stage video{width:100%;height:100%;object-fit:contain;background:#101820}.thumb .kind{color:var(--accent);font-weight:750}.stage .video-hint{position:absolute;left:14px;top:14px;background:#253442dd;color:#fff;border-radius:4px;padding:6px 9px;font-size:12px;pointer-events:none}.stage video:focus-visible{outline:3px solid #ecaa40;outline-offset:-3px}.controls label{white-space:nowrap}

#video-host{width:100%;height:100%}

/* Resizable split view. Media bytes and viewer playback are unaffected. */
:root {
  --thumb-display-size: 160px;
  --sidebar-width: calc(var(--thumb-display-size) * 2 + 44px);
}
header { padding: 16px 24px; }
h1 { margin: 0; }
.layout {
  grid-template-columns: min(var(--sidebar-width), calc(100% - 378px)) 18px minmax(0, 1fr);
  gap: 0;
}
.sidebar { min-width: 0; }
.sidebar-head { position: relative; gap: 8px; flex-wrap: nowrap; }
.sidebar-heading { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sidebar-heading span { white-space: nowrap; }
.thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
.thumb { height: auto; min-height: 0; padding: 5px; display: flex; flex-direction: column; }
.thumb img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; flex: none; }
.thumb span { font-size: 12px; margin-top: 6px; }
.thumb .tn-date { font-size: 11px; margin: 3px 0 2px; }
.layout-menu { flex: none; }
.layout-menu summary {
  list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.layout-menu summary::-webkit-details-marker { display: none; }
.layout-menu summary > span:not(.sr-only) { font-size: 23px; line-height: 1; color: inherit; }
.layout-menu summary:hover, .layout-menu[open] summary { background: var(--wash); color: var(--ink); }
.layout-menu summary:focus-visible { outline: 3px solid #ecaa40; outline-offset: 2px; }
.layout-presets {
  position: absolute; z-index: 5; top: calc(100% - 5px); right: 10px; min-width: 150px;
  padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  box-shadow: 0 5px 18px #142d4624; display: flex; flex-direction: column;
}
.layout-presets button { border: 0; text-align: left; min-height: 36px; font-size: 12px; font-weight: 500; }
.layout-presets button:last-child { border-top: 1px solid var(--line); border-radius: 0 0 5px 5px; }
.gallery-splitter {
  position: relative; align-self: stretch; min-width: 0; cursor: col-resize;
  touch-action: none; user-select: none; -webkit-user-select: none; outline: 0;
}
.gallery-splitter::before {
  content: ''; position: absolute; left: 8px; top: 9px; bottom: 9px; width: 2px;
  border-radius: 2px; background: var(--line);
}
.splitter-grip {
  position: absolute; left: 7px; top: 50%; width: 4px; height: 32px;
  transform: translateY(-50%); border-radius: 3px; background: #aebfcb;
}
.gallery-splitter:hover::before, .gallery-splitter:focus-visible::before,
.gallery-splitter.is-dragging::before { background: var(--accent); }
.gallery-splitter:hover .splitter-grip, .gallery-splitter.is-dragging .splitter-grip { background: var(--accent); }
.gallery-splitter:focus-visible { border-radius: 5px; box-shadow: inset 0 0 0 2px #ecaa40; }
body.gallery-resizing, body.gallery-resizing * { cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important; }
body.gallery-resizing-mobile, body.gallery-resizing-mobile * { cursor: row-resize !important; }
body.gallery-expanded .gallery-splitter { visibility: hidden; pointer-events: none; }
.photo-meta, .controls, .statusbar { flex-shrink: 0; }
.fullscreen-button { white-space: nowrap; }
#fullscreen-note { margin: 0; color: var(--muted); font-size: 11px; }
#fullscreen-note:empty { display: none; }
body.gallery-expanded { overflow: hidden; }
.viewer.is-expanded {
  width: 100%; height: 100%; max-width: none; max-height: none; min-height: 0; border: 0;
  border-radius: 0; box-sizing: border-box; background: #fff; display: flex; flex-direction: column;
}
.viewer.is-expanded .stage { height: auto; min-height: 0; flex: 1 1 0; }
.viewer.is-expanded .photo-meta { padding: 10px 18px 5px; }
.viewer.is-expanded .controls { padding: 8px 18px 10px; }
.viewer.is-expanded .statusbar { padding-bottom: 8px; min-height: 24px; }
.viewer.in-page-fullscreen { position: fixed; inset: 0; z-index: 10000; width: 100vw; height: 100vh; height: 100dvh; margin: 0; }
.viewer:fullscreen::backdrop { background: #101820; }
.viewer:-webkit-full-screen { margin: 0; width: 100%; height: 100%; }
@media (max-width: 760px) {
  header { padding: 14px 16px; }
  .layout { display: flex; gap: 0; }
  .sidebar-head { padding: 7px 12px; }
  .thumbs { gap: 10px; padding: 10px; }
  .thumb { flex: 0 0 var(--thumb-display-size); width: var(--thumb-display-size); height: auto; }
  .thumb img { height: auto; aspect-ratio: 4/3; }
  .thumb .tn-date { font-size: 11px; }
  .gallery-splitter { flex: 0 0 24px; width: 100%; height: 24px; cursor: row-resize; }
  .gallery-splitter::before { left: 9px; right: 9px; top: 11px; bottom: auto; width: auto; height: 2px; }
  .splitter-grip { left: 50%; top: 10px; width: 32px; height: 4px; transform: translateX(-50%); }
  .viewer.is-expanded .photo-meta { padding: 8px 12px 4px; }
  .viewer.is-expanded .controls { padding: 6px 12px 8px; gap: 7px; }
  .viewer.is-expanded .statusbar { padding: 0 12px 8px; }
}
@media (max-height: 500px) {
  .viewer.is-expanded .photo-meta { padding: 4px 10px; gap: 8px; }
  .viewer.is-expanded .photo-meta h2 { font-size: 13px; margin: 0; }
  .viewer.is-expanded #date, .viewer.is-expanded .credit, .viewer.is-expanded #media-note { display: none; }
  .viewer.is-expanded .controls { padding: 4px 10px; gap: 5px; }
  .viewer.is-expanded .controls button, .viewer.is-expanded .controls select { min-height: 32px; padding: 4px 8px; font-size: 12px; }
  .viewer.is-expanded .controls .play { min-width: 105px; }
  .viewer.is-expanded .statusbar { padding: 0 10px 4px; min-height: 18px; font-size: 10px; }
  .viewer.is-expanded .hint { display: none; }
}

/* Browse controls: one compact disclosure, no changes to generated media. */
.browse-panel { flex: none; border-bottom: 1px solid var(--line); }
.browse-panel > summary {
  padding: 10px 14px; cursor: pointer; font-size: 12px; line-height: 1.5;
  color: var(--ink); overflow-wrap: anywhere;
}
.browse-panel > summary:focus-visible { outline: 3px solid #ecaa40; outline-offset: -3px; }
.browse-title { font-weight: 650; }
.browse-panel #filter-summary { display: block; margin-left: 14px; color: var(--muted); font-size: 11px; }
.browse-fields { padding: 0 12px 10px; max-height: 45vh; max-height: 45svh; overflow-y: auto; }
.browse-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.browse-fields label { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.browse-fields select, .browse-fields input {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  min-height: 36px; padding: 6px; font: inherit; font-size: 12px; border: 1px solid #bdcbd7;
  border-radius: 6px; color: var(--ink); background: #fff;
}
.browse-fields input:focus-visible { outline: 3px solid #ecaa40; outline-offset: 2px; }
.browse-fields input[aria-invalid="true"] { border-color: #a12424; }
.browse-fields input[type="date"] { display: block; }
.browse-fields input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.browse-fields #date-range { grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr)); }
.browse-fields .jump-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.browse-fields button { min-height: 36px; font-size: 12px; padding: 6px 10px; }
.browse-fields .filter-reset { margin-top: 9px; background: var(--wash); }
.filter-help, .browse-message { font-size: 11px; line-height: 1.55; margin: 7px 0 0; }
.filter-help { color: var(--muted); }
.browse-message:empty { display: none; }
.filter-status { flex: none; margin: 0; padding: 8px 14px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); }
.filter-empty { flex: none; margin: 0; padding: 16px 14px; font-size: 12px; color: var(--muted); }
.empty-selection { padding: 24px; text-align: center; color: #e4ebef; max-width: 380px; font-size: 14px; line-height: 1.7; }
@media (max-width: 760px) {
  .browse-panel > summary { padding: 8px 12px; }
  .browse-panel #filter-summary { display: inline; margin-left: 7px; }
  .browse-fields { max-height: 40vh; max-height: 40svh; }
  .browse-fields select, .browse-fields input { font-size: 16px; min-height: 40px; }
  .browse-fields button { min-height: 40px; }
  .filter-status { padding: 5px 12px; }
}

:root{--thumb-display-size:160px}