:root { color-scheme: light dark; font: 16px/1.45 system-ui, sans-serif; }
body { margin: 0 auto; max-width: 720px; padding: 1rem 1rem 5rem; }
header { display: flex; align-items: center; justify-content: space-between; }
button, input { font: inherit; padding: .65rem .8rem; }
input { width: min(100%, 28rem); box-sizing: border-box; }
.items { display: grid; gap: .65rem; }
.item { display: block; border: 1px solid #76809866; border-radius: .6rem; padding: .8rem; color: inherit; text-decoration: none; }
.item.unseen { border-left: .35rem solid #4d8dff; }
.meta { opacity: .7; font-size: .85rem; }
.error { color: #d33; }
nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 3rem; padding: 1rem; background: Canvas; border-top: 1px solid #76809866; }
nav a { color: inherit; }
.microphone { display: block; width: min(100%, 24rem); min-height: 4rem; margin: 1rem auto; border-radius: 2rem; touch-action: none; user-select: none; -webkit-user-select: none; }
.microphone.recording { background: #a92525; color: white; }
.microphone:disabled { opacity: .65; }
.mobile-text-form { display: grid; gap: .35rem; margin: 1rem 0; }
.mobile-text-form div { display: flex; gap: .5rem; }
.mobile-text-form input { flex: 1; min-width: 0; }
.voice-output { margin-top: 1.5rem; }
.voice-output h3 { margin-bottom: .25rem; }
.voice-output p { min-height: 1.5rem; margin-top: 0; white-space: pre-wrap; }