@font-face { font-family: "Source Serif"; src: url("/remote/fonts/serif.woff2") format("woff2"); font-weight: 200 900; }
  @font-face { font-family: "Source Sans"; src: url("/remote/fonts/sans.woff2") format("woff2"); font-weight: 200 900; }
  :root { --paper: #14120f; --ink: #ece5d6; --ink-2: #b7ae9c; --ink-3: #7d7566; --rule: #2c2822; --focus: #e8b75c; --red: #e06c5a; }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.45 "Source Serif", Georgia, serif; }
  main { max-width: 34rem; margin: 0 auto; padding: 1.4rem 1.1rem 3rem; }
  h1 { font-weight: 300; font-size: 2.2rem; margin: .2rem 0 1rem; }
  h2 { font: 600 .78rem "Source Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 2rem 0 .6rem; }
  .label { font: 600 .72rem "Source Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
  section { border-top: 1px solid var(--rule); padding: .9rem 0; }
  .latin { font-style: italic; color: var(--ink-2); }
  input[type=text] { width: 100%; font: inherit; color: var(--ink); background: #1c1915; border: 1px solid var(--rule); border-radius: .4rem; padding: .6rem .7rem; }
  button { font: 600 .95rem "Source Sans", sans-serif; color: var(--paper); background: var(--focus); border: 0; border-radius: .4rem; padding: .6rem 1rem; margin-top: .55rem; }
  button.quiet { background: transparent; color: var(--focus); border: 1px solid var(--focus); }
  .row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
  .msg { color: var(--ink-2); min-height: 1.4em; font-size: .92rem; }
  .msg.bad { color: var(--red); }
  label.toggle { display: flex; gap: .7rem; align-items: center; }