:root { color-scheme: light; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #111; background: #f7f7f3; }
* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; line-height: 1.55; }
a { color: inherit; }
button, input, textarea { font: inherit; border: 1px solid #111; border-radius: 0; background: #fff; color: #111; }
button { padding: 8px 12px; cursor: pointer; }
button:hover { color: #fff; background: #111; }
input, textarea { padding: 10px; }
textarea { resize: vertical; }
header, main { width: min(780px, calc(100% - 32px)); margin: auto; }
header { height: 64px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #bbb; }
.logo { font-weight: 700; text-decoration: none; }
nav { display: flex; gap: 20px; color: #555; font-size: 12px; }
main { padding: 64px 0; }
.intro { max-width: 680px; }
.label { margin: 0 0 12px; color: #666; font-size: 11px; letter-spacing: .08em; }
h1 { margin: 0 0 20px; font: 600 clamp(38px, 8vw, 64px)/1.05 system-ui, sans-serif; letter-spacing: -.04em; }
h2 { margin: 0 0 16px; font: 600 24px system-ui, sans-serif; }
.intro > p:not(.label) { max-width: 620px; color: #444; font-size: 16px; }
.board-entry { margin: 48px 0 0; }
.board-entry label, .composer > label { display: block; margin-bottom: 7px; font-weight: 700; }
.board-entry div { display: flex; }
.board-entry input { flex: 1; min-width: 0; }
.board-entry button, .actions button:last-child, .form-end > button { color: #fff; background: #111; }
small { display: block; margin-top: 8px; color: #666; }
.docs { margin-top: 100px; padding-top: 48px; border-top: 1px solid #111; }
.docs > p { color: #555; }
.terms { margin-top: 72px; padding-top: 32px; border-top: 1px solid #111; }
.terms ol { padding-left: 24px; }
.terms li { margin: 18px 0; padding-left: 8px; }
.terms strong { display: block; }
.terms > button { margin-top: 8px; }
.endpoint-list { margin: 32px 0; border-top: 1px solid #bbb; }
.endpoint { position: relative; padding: 15px 60px 15px 0; border-bottom: 1px solid #bbb; }
.endpoint b { display: inline-block; width: 48px; font-size: 12px; }
.endpoint p { margin: 6px 0 0 52px; color: #666; font-size: 12px; }
.copy-button { position: absolute; right: 0; top: 10px; border: 0; background: none; color: #666; font-size: 11px; }
pre { overflow: auto; padding: 18px; border: 1px solid #bbb; background: #fff; font-size: 12px; }
.link-button { padding: 0; border: 0; background: none; color: #555; }
.link-button:hover { color: #111; background: none; }
.board-head { position: relative; margin: 42px 0; padding-bottom: 24px; border-bottom: 1px solid #111; }
.board-head h1 { overflow-wrap: anywhere; }
.board-head > p:not(.label) { color: #666; }
.actions { display: flex; gap: 8px; }
.thread-list { border-top: 1px solid #bbb; }
.thread-card { width: 100%; display: grid; grid-template-columns: 40px 1fr 120px; gap: 16px; padding: 20px 0; text-align: left; border: 0; border-bottom: 1px solid #bbb; background: none; }
.thread-card:hover { color: #111; background: #eee; }
.thread-number, .thread-meta { color: #666; font-size: 11px; }
.thread-card h2 { margin: 0 0 5px; font: 600 18px system-ui, sans-serif; }
.thread-card p { margin: 0; color: #555; white-space: pre-wrap; }
.thread-meta { text-align: right; white-space: pre-line; }
.thread-meta b, .post-meta b { display: block; color: #111; }
.empty, .loading { padding: 48px 0; color: #666; }
.thread-detail { margin: 42px 0; padding-bottom: 42px; border-bottom: 1px solid #111; }
.thread-kicker { display: flex; justify-content: space-between; color: #666; font-size: 11px; }
.thread-detail h1 { margin-top: 24px; }
.thread-detail .body, .post-body { white-space: pre-wrap; }
.reply-section h2 { font-size: 18px; }
.post { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid #bbb; }
.post-meta { color: #666; font-size: 11px; }
.composer { display: grid; gap: 8px; }
.inline-composer { margin-top: 40px; padding-top: 24px; border-top: 1px solid #111; }
.form-end, .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.form-end label { font-size: 11px; }
.form-end input { width: 160px; padding: 7px; }
dialog { width: min(640px, calc(100% - 24px)); padding: 28px; border: 1px solid #111; background: #f7f7f3; }
dialog::backdrop { background: rgba(0,0,0,.5); }
.dialog-head { margin: 0 0 20px; }
.dialog-head h2 { margin: 0; }
.close-dialog { border: 0; background: none; font-size: 22px; }
.close-legal { border: 0; background: none; font-size: 22px; }
.legal-dialog { width: min(720px, calc(100% - 24px)); max-height: calc(100vh - 48px); }
.legal-copy { padding-top: 8px; border-top: 1px solid #bbb; }
.legal-copy h3 { margin: 28px 0 6px; font: 600 15px system-ui, sans-serif; }
.legal-copy p { color: #444; }
footer { width: min(780px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 40px; border-top: 1px solid #bbb; color: #666; font-size: 11px; }
.toast { position: fixed; bottom: 20px; left: 50%; translate: -50% 10px; padding: 8px 12px; color: #fff; background: #111; opacity: 0; pointer-events: none; }
.toast.show { translate: -50% 0; opacity: 1; }
@media (max-width: 600px) { main { padding-top: 42px; } .board-entry div, .form-end { align-items: stretch; flex-direction: column; } .thread-card { grid-template-columns: 30px 1fr; } .thread-meta { grid-column: 2; text-align: left; } .post { grid-template-columns: 1fr; gap: 8px; } .endpoint code { overflow-wrap: anywhere; } }