* { box-sizing: border-box; }
body { margin: 0; background: #1d1a16; color: #efe6cf; font-family: Georgia, "Times New Roman", serif; }
.top { display: flex; align-items: center; gap: 18px; justify-content: center; padding: 22px 16px 8px; }
.topseal { width: 70px; height: 70px; }
h1 { margin: 0; font-size: 34px; letter-spacing: 4px; font-weight: 900; }
h1 .sm { font-size: 14px; letter-spacing: 1px; font-style: italic; font-weight: normal; color: #c8b98f; }
.tag { margin: 4px 0 0; color: #c8b98f; font-style: italic; }
main { display: grid; grid-template-columns: minmax(300px, 420px) minmax(300px, 640px); gap: 28px; justify-content: center; padding: 18px; }
main[hidden] { display: none; }
#view { grid-template-columns: minmax(300px, 760px); }
.form { background: #2a251e; border: 1px solid #5a4a2a; border-radius: 12px; padding: 18px 20px; align-self: start; }
.form h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: 2px; color: #e5c07b; }
label { display: block; margin: 12px 0 0; font-size: 14px; color: #d8cba8; }
.opt { color: #8f846a; font-style: italic; }
input, select, textarea { width: 100%; margin-top: 5px; padding: 9px 10px; border-radius: 8px; border: 1px solid #6b5a36; background: #f6f0dc; color: #1d1a14; font: 15px Georgia, serif; }
select + input { margin-top: 6px; }
textarea { resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btns.center { justify-content: center; }
button, .button { cursor: pointer; padding: 10px 16px; border-radius: 9px; border: 1px solid #b08a3e; background: #c9a44c; color: #1d1a14; font: bold 15px Georgia, serif; text-decoration: none; display: inline-block; }
button:hover, .button:hover { background: #e0bb5e; }
.ghost { background: transparent; color: #e5c07b; }
.ghost:hover { background: #3a3226; }
.msg { min-height: 1.2em; color: #8ce99a; margin: 10px 0 0; }
.note { color: #8f846a; font-size: 12.5px; font-style: italic; }
.paper canvas, .viewwrap canvas { width: 100%; height: auto; box-shadow: 0 10px 40px rgba(0,0,0,.6); border-radius: 2px; display: block; }
footer { text-align: center; color: #7a6f58; font-size: 12px; font-style: italic; padding: 20px 16px 30px; }
@media (max-width: 760px) { main { grid-template-columns: 1fr; } h1 { font-size: 24px; } .topseal { width: 50px; height: 50px; } }