:root {
  --paper: #efe4cc;
  --ink: #1b2033;
  --mute: #5c5648;
  --rule: #c9b896;
  --seal: #9a1f2e;
  --sage: #2f4a38;
  --amber: #7a5420;
  --tinab: #ff9900;
  --card: #f7efdb;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Iowan Old Style", Palatino, Georgia, serif; min-height: 100%; }
body { padding-bottom: 4.6rem; }
header { padding: .9rem 1rem .6rem; border-bottom: 3px double var(--ink); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.brand img { height: 1.7rem; mix-blend-mode: multiply; }
.word { letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.who { font-size: .85rem; color: var(--mute); margin-top: .35rem; }
main { padding: .8rem 1rem 1.2rem; }
.card { background: var(--card); border: 1px solid var(--rule); padding: .75rem .85rem; margin: 0 0 .7rem; }
.card h2 { font-size: 1.05rem; margin: 0 0 .35rem; }
.card h2 button { all: unset; cursor: pointer; font: inherit; }
.kind { font-variant: small-caps; color: var(--amber); font-size: .8rem; }
.counts { font-size: .8rem; color: var(--mute); margin-top: .4rem; }
.seal { display: inline-block; border: 2px solid; padding: .15rem .45rem; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .06em; transform: rotate(-4deg); }
.seal.ok { color: var(--seal); }
.seal.fake { color: var(--seal); }
.seal.split { color: var(--seal); border-style: double; }
.seal.stuck { color: var(--mute); border-style: dashed; }
.row { display: flex; gap: .45rem; margin-top: .55rem; flex-wrap: wrap; }
.chips { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0 0 .7rem; }
.chips button { background: transparent; color: var(--ink); border: 1px solid var(--rule); font-size: .8rem; padding: .3rem .55rem; }
.chips button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button { font-family: inherit; font-size: 1rem; background: var(--ink); color: var(--paper);
  border: 0; padding: .45rem .75rem; }
button.warn { background: var(--seal); }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
input, textarea, select { width: 100%; font-family: inherit; font-size: 1rem;
  padding: .4rem; border: 1px solid var(--rule); background: #fbf6ea; margin: .25rem 0 .55rem; }
label { font-size: .9rem; }
.flash { padding: .5rem .65rem; margin: 0 0 .7rem; border: 1px solid var(--rule); }
.flash.err { color: var(--seal); border-color: var(--seal); }
nav.tab { position: fixed; bottom: 0; left: 0; right: 0; display: flex;
  border-top: 1px solid var(--rule); background: var(--paper); }
nav.tab button { flex: 1; background: transparent; color: var(--ink); padding: .85rem .3rem; font-size: .9rem; }
nav.tab button.on { font-weight: 700; }
.hash { font-family: "Courier New", monospace; font-size: .72rem; word-break: break-all; color: var(--mute); }
.hint { font-size: .85rem; color: var(--mute); }
.thumb { margin: .4rem 0; }
.thumb img, .thumb video { max-width: 100%; max-height: 14rem; }
.views { font-size: .8rem; color: var(--mute); max-height: 10rem; overflow: auto; }
.offline { background: var(--amber); color: #fff; text-align: center; padding: .3rem; font-size: .8rem; }