:root{--paper:#f5efe6;--card:#fbf8f3;--ink:#3a3430;--muted:#8b8179;--line:#e4dbcd;--sakura:#e3aab2}
@media (prefers-color-scheme:dark){:root{--paper:#22201e;--card:#2a2725;--ink:#ece4d8;--muted:#9d9289;--line:#3a3632;--sakura:#c9939b}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 "Hiragino Sans","Noto Sans JP",system-ui,sans-serif}
header,footer,.grid{max-width:1100px;margin:0 auto;padding:0 20px}
header{padding-top:48px;padding-bottom:28px}
h1{margin:0;font:500 32px/1.2 "Hiragino Mincho ProN","Noto Serif JP",Georgia,serif}
h1 span{font-size:18px;color:var(--sakura);vertical-align:5px;margin-left:4px}
header p{margin:6px 0 0;color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.item{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .28s cubic-bezier(.22,.61,.36,1),border-color .28s}
.item:hover{transform:translateY(-2px);border-color:var(--sakura)}
.item img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.item span{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px;font-family:"Hiragino Mincho ProN","Noto Serif JP",Georgia,serif}
.item small{font:12px system-ui,sans-serif;color:var(--muted)}
footer{padding-top:40px;padding-bottom:48px;color:var(--muted);font-size:13px}
a{color:inherit}
.nf main{max-width:480px;margin:18vh auto;padding:0 20px;text-align:center}
.nf h1{font-size:56px}
.item em{font-style:normal;font:13px system-ui,sans-serif;color:var(--muted);margin-left:6px;margin-right:auto}