* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; margin: 0; background: #f6f7f9; color: #1f2328; }
header { background: #ffffff; border-bottom: 1px solid #e5e7eb; padding: 16px 20px; position: sticky; top: 0; }
h1 { margin: 0; font-size: 20px; }
.desc { margin: 6px 0 0; color: #4b5563; }
.status { margin-top: 8px; font-size: 12px; color: #64748b; }
main { max-width: 800px; margin: 24px auto; padding: 0 16px; }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.item { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; }
.item .date { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.item .text { white-space: pre-wrap; word-wrap: break-word; }
.item .media { margin-bottom: 8px; display: grid; gap: 8px; }
.item .media img { max-width: 100%; border-radius: 6px; display: block; }
.item video, .item audio { width: 100%; max-width: 100%; }
.item .links { margin-top: 6px; display: grid; gap: 4px; }
.item .links a { color: #2563eb; text-decoration: none; word-break: break-all; }
.item .links a:hover { text-decoration: underline; }
.item .raw { margin-top: 6px; font-size: 12px; }
.item .raw a { color: #64748b; text-decoration: none; }
.item .raw a:hover { text-decoration: underline; }
footer { max-width: 800px; margin: 24px auto; padding: 0 16px 16px; color: #6b7280; }