* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #101113; color: #eee; }
body { margin: 0; }
.viewport { position: fixed; inset: 0; display: flex; flex-direction: column; padding: 20px 24px 14px; }
header { display: flex; align-items: center; gap: 32px; padding-bottom: 20px; }
a { color: inherit; text-decoration: none; }
.back { font-size: 13px; letter-spacing: .12em; }
.title { flex: 1; }
h1 { margin: 0 0 5px; font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
p { margin: 0; color: #a3a6ac; font-size: 12px; }
#counter { font-size: 13px; font-variant-numeric: tabular-nums; }
#mosaic { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.tile { position: absolute; border: 0; padding: 0; background: #202226; overflow: hidden; cursor: zoom-in; }
#date-panel { position: absolute; left: 0; z-index: 2; padding: 16px 12px 16px 0; background: #101113; pointer-events: none; overflow: hidden; }
#date-panel[hidden] { display: none; }
.date-label { display: block; margin-bottom: 12px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #a3a6ac; }
#period { color: #eee; font-size: clamp(22px, min(3.8vw, 7vh), 72px); font-weight: 500; line-height: 1.08; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
#period time { display: block; white-space: nowrap; }
.date-divider { display: block; color: #777c85; line-height: .8; margin: 8px 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile:focus-visible { outline: 2px solid #baff8b; outline-offset: -3px; z-index: 1; }
footer { display: flex; gap: 24px; align-items: center; padding-top: 14px; font-size: 12px; }
footer small { display: block; margin-top: 5px; color: #777c85; font-size: 10px; }
footer label { margin-left: auto; display: flex; gap: 12px; align-items: center; color: #a3a6ac; }
input { accent-color: #baff8b; width: 150px; }
.hint { color: #a3a6ac; }
#scroll-track { height: 700vh; pointer-events: none; }
dialog { border: 1px solid #383b40; background: #101113; padding: 16px; max-width: 94vw; max-height: 94dvh; }
dialog::backdrop { background: #000c; }
dialog img { display: block; max-width: 85vw; max-height: 78dvh; object-fit: contain; }
dialog p { padding-top: 12px; }
#close-preview { position: absolute; right: 20px; top: 20px; border: 0; background: #111d; color: white; font-size: 26px; cursor: pointer; }
@media (max-width: 640px) { .viewport { padding: 12px; } header { gap: 16px; padding-bottom: 12px; } h1 { font-size: 18px; } .title p { max-width: 180px; font-size: 10px; } footer { flex-wrap: wrap; gap: 10px; } footer label { width: 100%; margin: 0; justify-content: space-between; } input { flex: 1; } .hint { display: none; } #counter { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } }