:root {
  --paper: #f3eee4;
  --ink: #1c1914;
  --mute: #6a6156;
  --walnut: #6b4f2a;
  --line: #ddd4c4;
  --white: #fcfaf6;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Iowan Old Style", "Palatino Linotype", Palatino, serif; }
.shell { max-width: 720px; margin: 0 auto; padding: 40px 20px 80px; }
header { margin-bottom: 28px; }
.mark { letter-spacing: 0.28em; text-transform: uppercase; font-size: 11px; margin: 0; }
.sub { color: var(--mute); margin: 6px 0 0; font-size: 14px; }
.card { background: var(--white); border: 1px solid var(--line); padding: 22px 22px 24px; margin-bottom: 16px; }
h1, h2 { font-weight: 500; margin: 0 0 10px; }
h1 { font-size: 32px; letter-spacing: -0.02em; }
h2 { font-size: 18px; }
.lede { color: var(--mute); line-height: 1.45; margin: 0 0 14px; }
.code { letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; color: var(--walnut); margin: 0 0 6px; }
.variants { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; }
.variants li { border: 1px solid var(--line); padding: 6px 10px; font-size: 13px; }
.walk { font-size: 12px; color: var(--mute); margin: 0; word-break: break-all; }
.hint { font-size: 13px; color: var(--mute); margin: 0 0 14px; }
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; min-height: 40px; }
.looks img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper); }
.looks .empty { color: var(--mute); font-size: 14px; grid-column: 1 / -1; }
textarea, input[type="text"], input[type="password"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); font: inherit; margin-bottom: 10px;
}
button {
  background: var(--ink); color: var(--paper); border: 0; padding: 10px 16px;
  font: inherit; letter-spacing: 0.04em; cursor: pointer;
}
button.make { background: var(--walnut); }
button.dont { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.row { display: flex; gap: 8px; margin-bottom: 10px; }
.status, .err { font-size: 14px; min-height: 1.2em; }
.err { color: #8b2e1a; }
.verdicts { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--mute); }
.foot { color: var(--mute); font-size: 13px; margin: 24px 0 0; }
.hidden { display: none; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }