@font-face { font-family: Archivo; src: url('/fonts/archivo-latin-normal.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
:root { color-scheme: light dark; --board: #F1F2EE; --paper: #FBFBF9; --ink: #220621; --rule: #5E5260; --danger: #8E1C15; }
@media (prefers-color-scheme: dark) { :root { --board: #15111A; --paper: #1D1824; --ink: #F1F2EE; --rule: #B9AEBB; --danger: #FF9E91; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--board); color: var(--ink); font: 400 16px/1.55 Archivo, sans-serif; }
header, main { max-width: 70rem; margin: auto; padding: 24px; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--rule); }
header > a { font-size: 24px; font-weight: 700; }
nav { display: flex; flex-wrap: wrap; gap: 12px; }
a { color: inherit; text-underline-offset: .2em; }
header a { display: inline-flex; align-items: center; min-height: 44px; }
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin: 0 0 16px; }
h2 { font-size: 20px; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
p { margin: 12px 0; }
button, .reply { font: inherit; min-height: 44px; padding: 8px 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); cursor: pointer; }
button[aria-pressed=true] { font-weight: 700; border-width: 2px; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tabs { margin-block: 24px; }
#records { display: grid; gap: 16px; }
.record { padding: 20px; border: 1px solid var(--rule); background: var(--paper); min-width: 0; }
.record p { overflow-wrap: anywhere; }
.record .message { white-space: pre-wrap; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.reply { display: inline-flex; align-items: center; }
.delete { color: var(--danger); }
#more { margin-top: 24px; }
@media (width < 30em) { header, main { padding: 16px; } .record { padding: 16px; } }