* { box-sizing: border-box; }
body { margin: 0; background: #2a0a14; color: #f2e2c4; font: 17px/1.45 'Crimson Pro',Georgia,serif; }
main { max-width: 640px; margin: 0 auto; padding: 60px 14px 150px; }
h1 { margin: 0 0 4px; font: bold 36px/1.1 'Crimson Pro',Georgia,serif; color: #c9a24b; }
.say { font-style: italic; margin: 0 0 18px; }
.sign { padding: 14px; background: #f2e2c4; color: #2a0a14; border: 3px solid #c9a24b; border-radius: 10px; display: grid; gap: 10px; }
.ways { display: flex; flex-wrap: wrap; gap: 6px; }
.ways button { font: italic 15px Lora,Georgia,serif; color: #2a0a14; background: #fff8e6; border: 2px solid #2a0a14; border-radius: 14px; padding: 5px 12px; cursor: pointer; }
.ways button[aria-selected="true"] { background: #2a0a14; color: #f2e2c4; }
textarea, input { font: 17px/1.4 'Crimson Pro',Georgia,serif; color: #2a0a14; background: #fff8e6; border: 1px dashed #7a6a5c; padding: 8px; width: 100%; }
input { width: auto; max-width: 14em; }
#pad { display: block; width: 100%; max-width: 480px; aspect-ratio: 2 / 1; background: #fff8e6; border: 1px dashed #7a6a5c; border-radius: 4px; touch-action: none; cursor: crosshair; }
.stamps { display: flex; flex-wrap: wrap; gap: 8px; }
.stamps button { width: 58px; height: 58px; padding: 6px; border: 2px solid #2a0a14; border-radius: 8px; background: #fff8e6; cursor: pointer; }
.stamps button[aria-checked="true"] { background: #ffe9a8; box-shadow: 0 0 0 3px #c9a24b; }
.stamps svg { width: 100%; height: 100%; }
.note { margin: 0; font-style: italic; min-height: 1.4em; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; font-style: italic; }
.row label { display: flex; gap: 6px; align-items: center; }
#go { font: italic 16px Lora,Georgia,serif; color: #2a0a14; background: #e9d3a6; border: 0; padding: 9px 16px 9px 26px; cursor: pointer; clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%); }
#go:hover, #go:focus-visible { background: #ffe9a8; outline: none; }
.plain { border: 0; background: none; color: #7a1f3d; font: italic 15px Lora,Georgia,serif; cursor: pointer; text-decoration: underline; }
.entries { margin-top: 22px; display: grid; gap: 10px; }
.entry { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; padding: 10px 12px; background: #fff8e6; color: #2a0a14; border-radius: 6px; border: 1px solid #c9a24b; transform: rotate(var(--lean, 0deg)); }
.entry img, .entry svg { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid #2a0a1433; border-radius: 4px; }
.entry .words { font-size: 17px; white-space: pre-wrap; word-break: break-word; }
.entry .by { font: italic 13px Lora,Georgia,serif; color: #7a6a5c; margin-top: 4px; }
.back a { color: #c9a24b; margin-right: 14px; }