* { box-sizing: border-box; }
body { margin: 0; background: #000; color: #ddd;
       font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }
a { color: inherit; }
header { padding: 20px 16px 8px; }
h1 { margin: 0; font-size: 20px; color: #fff; }
.back { display: inline-block; margin-bottom: 8px; font-size: 13px; color: #8ab4f8; text-decoration: none; }
.meta, .note { margin-top: 4px; font-size: 12px; color: #888; }
main { display: grid; gap: 20px; padding: 16px; }
main.works { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
main.images { grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }
.card { margin: 0; }
.frame { display: block; background: #fff; padding: 6px; border-radius: 6px; }
.frame img { display: block; width: 100%; height: auto; }
.work { display: block; text-decoration: none; }
.work .frame { aspect-ratio: 16 / 10; overflow: hidden; }
.work .frame img { height: 100%; object-fit: contain; }
.work h2 { margin: 8px 0 0; font-size: 15px; color: #fff; }
.work:hover h2 { text-decoration: underline; }
figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.name { color: #fff; word-break: break-all; }
time { color: #888; margin-left: auto; }
.kind { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #000; }
.kind.out { background: #7dd3a0; }
.kind.keep { background: #f5c86b; }
.kind.in { background: #8ab4f8; }
.empty { color: #888; }