:root {
  --bg: #fffdfb; --bar: #f6f1ec; --text: #222; --muted: #6b6b6b; --rule: #e6ddd5; --field: #c9bdb2;
  --ember: #c8400f; --on-ember: #fff; --ko: #b42318;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161412; --bar: #201c19; --text: #e8e4e0; --muted: #a39b94; --rule: #352f2a; --field: #4a423b;
    --ember: #ff7a45; --on-ember: #161412; --ko: #ff6b6b;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.55 var(--sans); }
a { color: var(--ember); }
.wrap { max-width: 920px; margin: 0 auto; padding: 0 16px; }
header { background: var(--bar); border-bottom: 1px solid var(--rule); }
header .wrap { display: flex; align-items: center; min-height: 52px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; }
.logo i { width: 12px; height: 12px; background: var(--ember); border-radius: 2px; }
main.wrap { padding-top: 28px; padding-bottom: 80px; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.cols { display: flex; flex-wrap: wrap; gap: 40px; }
.list { flex: 3 1 360px; min-width: 0; }
.side { flex: 2 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
#notes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
#notes li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
#notes li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--text); }
#notes li a:hover { color: var(--ember); }
.meta { color: var(--muted); font-size: 13px; white-space: nowrap; }
.empty { color: var(--muted); }
#note { background: var(--bar); border: 1px solid var(--rule); border-radius: 4px; padding: 14px 16px; }
#note h2 { margin: 0; overflow-wrap: anywhere; }
#note p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
input, textarea { font: 400 15px var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--field); border-radius: 3px; padding: 7px 10px; width: 100%; }
input:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
button { align-self: flex-start; font: 600 14px var(--sans); background: var(--ember); color: var(--on-ember); border: 0; border-radius: 3px; padding: 9px 16px; cursor: pointer; }
.error { color: var(--ko); margin: 0; min-height: 1em; font-size: 14px; }