:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: #f6f1e7; color: #2b2620; font: 16px/1.5 Georgia, serif; }
#app { max-width: 680px; margin: 0 auto; padding: 24px 16px 40px; }
h1 { font-size: 28px; margin: 0 0 4px; }
.sub { color: #7a6f5e; margin: 0 0 20px; }
.row { display: flex; gap: 8px; }
input[type=text] { flex: 1; font: inherit; padding: 10px; border: 1px solid #c9bda6; border-radius: 8px; background: #fffdf8; }
button, .btn { font: inherit; padding: 10px 14px; border: 0; border-radius: 8px; background: #2b2620; color: #f6f1e7; cursor: pointer; text-decoration: none; }
button:disabled { opacity: .5; }
.msg { min-height: 1.5em; color: #8a4b2a; font-size: 14px; }
#result[hidden] { display: none; }
#list { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: w; }
#list li { background: #fffdf8; border: 1px solid #d8ccb5; border-radius: 999px; padding: 4px 12px; }
#list li:nth-child(-n+10) { background: #2b2620; color: #f6f1e7; }
#list small { opacity: .6; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
footer { margin-top: 32px; font-size: 13px; color: #7a6f5e; }
footer a { color: inherit; }