:root { color-scheme: light; font-family: "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif; color: #1d2939; background: #f7fbff; }
* { box-sizing: border-box; }
body { width: min(760px, calc(100% - 2rem)); margin: 0 auto; padding: 28px 0 42px; }
header { padding: clamp(28px, 7vw, 54px); border-radius: 28px; background: linear-gradient(135deg, #123152, #216e65); color: white; box-shadow: 0 16px 35px rgb(18 49 82 / .2); }
.home { color: #e8fcf6; font-weight: 800; text-decoration: none; }
header p { margin: 32px 0 8px; color: #a9f0dc; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
h1 { margin: 0; font-size: clamp(32px, 9vw, 54px); letter-spacing: -.06em; }
header div { margin-top: 14px; color: #d5eee9; line-height: 1.7; }
main { margin-top: 26px; }
#status { color: #637083; font-size: 14px; }
#posts { display: grid; gap: 20px; }
article, #empty { padding: clamp(22px, 5vw, 36px); border: 1px solid #d8e3ef; border-radius: 24px; background: white; box-shadow: 0 10px 24px rgb(37 75 117 / .06); }
time { color: #287269; font-size: 13px; font-weight: 900; }
h2 { margin: 8px 0 18px; font-size: clamp(23px, 5vw, 32px); letter-spacing: -.04em; }
article img { display: block; width: 100%; max-height: 560px; margin: 14px 0; border-radius: 16px; object-fit: contain; background: #edf3f7; }
.body { margin: 20px 0 0; white-space: pre-wrap; line-height: 1.9; }
#empty { text-align: center; color: #637083; }
#empty h2 { color: #1d2939; }
footer { margin-top: 28px; text-align: center; font-size: 13px; }
footer a { color: #1c625a; }