:root {
  --paper: #f3eee3;
  --ink: #1b1a17;
  --accent: #e2471c;
  --accent-soft: #fbd9c9;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Fraunces', serif;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(27,26,23,.12) 1px, transparent 0);
  background-size: 18px 18px;
}
.font-display { font-family: 'Fraunces', serif; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.bg-paper { background: var(--paper); }
.bg-ink { background: var(--ink); }
.text-paper { color: var(--paper); }
.border-ink { border-color: var(--ink); }
.border-paper { border-color: var(--paper); }

.btn {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  border: 1px solid var(--ink); padding: 6px 12px; background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink); transition: transform .1s, box-shadow .1s;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .4; }
.btn.accent { background: var(--accent); color: #fff; }
.mini { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-decoration: underline; opacity: .75; }
.mini:hover { opacity: 1; color: var(--accent); }

.drop {
  position: relative; border: 2px dashed var(--ink); background: rgba(255,255,255,.55);
  padding: 10px; cursor: pointer; overflow: hidden; transition: background .2s;
}
.drop.drag { background: var(--accent-soft); border-style: solid; }
.drop.scanning::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3px; background: var(--accent);
  box-shadow: 0 0 18px 4px var(--accent); animation: scan 1.6s ease-in-out infinite alternate;
}
@keyframes scan { from { top: 0; } to { top: calc(100% - 3px); } }

.chips::-webkit-scrollbar { height: 4px; }
.chips::-webkit-scrollbar-thumb { background: var(--ink); }
.chip {
  white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  border: 1px solid var(--ink); padding: 5px 10px; background: #fff; border-radius: 999px;
  animation: rise .5s both; transition: transform .15s, background .15s;
}
.chip:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px) rotate(-1deg); }

.composer {
  display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--ink);
  background: #fff; padding: 6px; box-shadow: 4px 4px 0 var(--ink);
  position: sticky; bottom: 8px;
}
.err { border-color: var(--accent); background: #fff4ef; }

.md { font-size: 15px; line-height: 1.6; }
.md h1,.md h2,.md h3 { font-weight: 800; margin: .6em 0 .3em; }
.md h1 { font-size: 1.4em; } .md h2 { font-size: 1.2em; }
.md ul { list-style: disc; padding-left: 1.3em; } .md ol { list-style: decimal; padding-left: 1.3em; }
.md p { margin: .4em 0; }
.md code { font-family: 'IBM Plex Mono', monospace; font-size: .85em; background: #f0ebe0; padding: 1px 4px; }
.md pre { background: var(--ink); color: var(--paper); padding: 12px; overflow-x: auto; margin: .6em 0; }
.md pre code { background: none; color: inherit; }
.md table { border-collapse: collapse; margin: .5em 0; } .md td,.md th { border: 1px solid var(--ink); padding: 3px 8px; }
.md a { color: var(--accent); text-decoration: underline; }

.dots::after { content: '…'; animation: blink 1s steps(3) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.rise { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pop { animation: rise .35s both; }
.slidein { animation: slide .3s cubic-bezier(.2,.8,.2,1); }
@keyframes slide { from { transform: translateX(100%); } }