:root { --bg:#f4f1ea; --text:#1c1915; --muted:#6d645b; --elev:#fffdf8; --border:#e4dccf; --accent:#143d34; --accentText:#f6f3ee; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 Georgia, serif; }
a { color: var(--accent); }
.topbar, .page { max-width: 980px; margin: 0 auto; padding: 1rem; }
.topbar { display: flex; gap: 1rem; align-items: center; }
.who { margin-left: auto; }
.card { background: var(--elev); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; margin: .7rem 0; }
.stack { display: flex; flex-direction: column; gap: .6rem; }
.row { display: flex; justify-content: space-between; gap: .7rem; align-items: center; }
.input { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; }
.btn { border: 0; border-radius: 12px; min-height: 42px; padding: 0 1rem; background: var(--accent); color: var(--accentText); cursor: pointer; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field strong { font-size: .95rem; }
textarea.input { min-height: 4.5rem; }
.error { color: #9f1239; }
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; align-items: start; }
.preview { position: sticky; top: 1rem; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; min-height: 420px; }
.drawer { position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); background: var(--elev); border-left: 1px solid var(--border); padding: 1rem; transform: translateX(100%); transition: transform .2s ease; z-index: 5; overflow: auto; }
.drawer.open { transform: translateX(0); }
@media (max-width: 800px) { .layout { grid-template-columns: 1fr; } .preview { position: static; } }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }