:root { --bg: #17110c; --leather: #2a2018; --leather2: #33271d; --brass: #b08d57; --text: #e8dcc0; --muted: #b9aa8a;
        --accent: #9fff3f; --bad: #ff8a6a; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 50% 0, #2b2016, var(--bg) 70%); color: var(--text);
       font: 16px/1.5 Georgia, "Palatino Linotype", "Book Antiqua", serif; min-height: 100vh; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
h1 { margin: 0; font-size: 2rem; letter-spacing: .04em; color: var(--accent); }
.by { margin: 0; color: var(--muted); font-style: italic; }
h2 { margin: 0 0 8px; font-size: 1.2rem; color: var(--brass); }
.panel { background: linear-gradient(var(--leather2), var(--leather)); border: 2px solid var(--brass); border-radius: 10px;
         padding: 16px 18px; margin-bottom: 18px; box-shadow: inset 0 0 0 1px #00000066, 0 4px 18px #0008; }
.small { font-size: .92rem; color: var(--muted); }
textarea { width: 100%; min-height: 180px; resize: vertical; background: #0f0b08; color: var(--text);
           border: 1px solid var(--brass); border-radius: 6px; padding: 10px; font: 13px/1.35 ui-monospace, Consolas, monospace; }
textarea:focus, button:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
button { margin-top: 10px; background: #1d2a12; color: var(--accent); border: 2px solid var(--accent); border-radius: 6px;
         padding: 8px 22px; font: inherit; font-weight: bold; cursor: pointer; }
button[disabled] { opacity: .5; cursor: wait; }
code { color: var(--accent); background: #0f0b08; padding: 0 4px; border-radius: 3px; }
#msg { min-height: 1.5em; margin: 12px 0 0; font-weight: bold; }
#msg.ok { color: var(--accent); }
#msg.bad { color: var(--bad); }