:root{
  --bg:#f6f8fa; --card:#ffffff; --muted:#6b7280; --accent:#0b76ef; --radius:12px; --max-width:900px
}
*{box-sizing:border-box}
body{font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Arial; background:var(--bg); margin:0; padding:2rem; color:#0f172a}
.container{max-width:var(--max-width); margin:0 auto}
.site-header h1{margin:0 0 .25rem 0}
.muted{color:var(--muted); margin:0}
.card{background:var(--card); border-radius:var(--radius); box-shadow:0 6px 18px rgba(15,23,42,0.06); padding:1rem; margin-bottom:1rem}
.form-card{padding:1rem}
.input{width:100%; padding:.6rem .75rem; border-radius:8px; border:1px solid #e6edf3; margin-bottom:.75rem}
.textarea{width:100%; min-height:96px; padding:.6rem .75rem; border-radius:8px; border:1px solid #e6edf3; resize:vertical}
.form-actions{display:flex; gap:.5rem; justify-content:flex-end; margin-top:.5rem}
.btn{background:var(--accent); color:white; border:none; padding:.5rem .8rem; border-radius:8px; cursor:pointer}
.btn:hover{filter:brightness(.97)}
.btn-ghost{background:transparent; color:var(--accent); border:1px solid #dbeafe}
.btn-small{padding:.3rem .6rem; font-size:.9rem}
.posts-card{padding:0}
.posts-header{display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid #f1f5f9}
.posts{padding:1rem}
.post{padding:.75rem; border-radius:8px; background:linear-gradient(180deg,#fff,#fbfdff); margin-bottom:.75rem; box-shadow:0 1px 0 rgba(2,6,23,0.03)}
.post .meta{font-size:.85rem; color:var(--muted); margin-bottom:.4rem}
.site-footer{color:var(--muted); text-align:center; margin-top:1rem}
@media (min-width:720px){ .post-form{display:grid; grid-template-columns:1fr 320px; gap:1rem} .input{grid-column:1 / -1} .textarea{grid-column:1 / -1}}

.code{background:#f1f5f9; padding:.15rem .4rem; border-radius:4px; font-family:monospace}