:root { color-scheme: light dark; font: 17px/1.5 system-ui,sans-serif; background: #141618; color: #e6e9e7; }
* { box-sizing: border-box; }
main { max-width: 750px; margin: 2rem auto; padding: 0 1.25rem 3rem; }
header,.actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
h1 { flex: 1; font-size: 1.8rem; font-weight: 600; letter-spacing: -.04em; }
button { font: inherit; color: inherit; background: #29332e; border: 1px solid #53665b; border-radius: .6rem; padding: .45rem .8rem; cursor: pointer; }
button:hover { background: #3c4c42; }
button:disabled { opacity: .45; cursor: default; }
textarea { display: block; width: 100%; margin: .5rem 0; padding: .8rem; border: 1px solid #66756c; border-radius: .8rem; background: #202524; color: inherit; font: inherit; resize: vertical; }
article { border-left: 2px solid #607a68; padding: .5rem 1rem; margin: 1rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
article.user { border-color: #979cbd; }
small,.muted,details p { color: #aab2ad; }
#notice { min-height: 1.5em; color: #cadabf; }
details { margin-top: 2rem; border-top: 1px solid #4b554f; padding-top: 1rem; }
details label { display: block; margin: .8rem 0; }
input[type=number] { width: 7rem; padding: .3rem; font: inherit; }
:focus-visible { outline: 2px solid #b3cfbd; outline-offset: 3px; }