@font-face { font-family: "Monocraft"; src: url("/resources/Monocraft-otf/Monocraft.otf") format("opentype"); font-display: swap; }
* { box-sizing: border-box; }
body { margin: 0; background: white; color: #222; font-family: "Monocraft", "Courier New", monospace; font-size: 14px; }
.shell { width: 90%; max-width: 640px; margin: 0 auto; padding: 20px 0 40px; }
.panel { margin: 24px 0; padding: 12px; border: 1px solid #bbb; }
.narrow { max-width: 420px; }
.editor { display: block; }
.panel h1 { margin: 0 0 14px; font-family: "Monocraft", monospace; font-size: 16px; font-weight: normal; line-height: 1.6; }
.eyebrow { margin: 0 0 8px; font-size: 12px; }
.muted, small { color: #666; line-height: 1.4; }
.stack { display: grid; gap: 7px; }
label { margin-top: 6px; font-weight: bold; }
.optional { color: #666; font-weight: normal; }
input, textarea { width: 100%; padding: 7px; border: 1px solid #999; border-radius: 0; background: white; color: #222; font: inherit; }
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus { outline: 1px dotted #222; }
button[type="submit"] { margin-top: 8px; padding: 7px 10px; border: 1px solid #222; background: #eee; color: #222; font: inherit; cursor: pointer; }
button[type="submit"]:hover { background: #ddd; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slug-input { display: flex; border: 1px solid #999; }
.slug-input span { padding: 7px 0 7px 7px; }
.slug-input input { border: 0; }
small { display: block; margin-top: 2px; font-size: 12px; }
.alert { padding: 7px; border: 1px solid #bbb; background: #f5f5f5; }
.result { text-align: left; }
.share-link, .text-link { color: #00e; }
.share-link { display: block; margin: 14px 0; overflow-wrap: anywhere; }
.message-page { margin: 50px 0; text-align: center; }
.message-body { margin: 18px 0 26px; white-space: pre-wrap; font-size: 18px; line-height: 1.5; }
.message-image { display: flex; justify-content: center; margin: 18px 0; }
.message-image img { display: block; max-width: 100%; max-height: 55vh; }
.message-meta { margin-top: 18px; color: #666; font-size: 12px; }
.not-found-image { display: block; max-width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 600px) { .shell { width: calc(100% - 20px); } .field-grid { grid-template-columns: 1fr; } }