:root {
  --ink: #1c1914;
  --paper: #f4efe4;
  --rule: #d8d0c0;
  --accent: #b45309;
  --muted: #6b6458;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  background: var(--paper);
  color: var(--ink);
}
.frame { min-height: 100%; display: grid; grid-template-columns: 320px 1fr; }
.rail { padding: 36px 28px; border-right: 1px solid var(--rule); background: #efe8d8; }
.kicker { letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; color: var(--accent); font-family: ui-sans-serif, system-ui, sans-serif; }
h1 { font-size: 34px; line-height: 1; margin: 8px 0 16px; font-weight: 600; }
.lede { color: var(--muted); line-height: 1.45; }
.hints { padding-left: 18px; }
.hints li { margin: 10px 0; }
.status { margin-top: 28px; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }
.stage { display: flex; flex-direction: column; min-height: 100vh; }
.login, .chat { flex: 1; display: flex; flex-direction: column; }
.login { padding: 72px 56px; max-width: 520px; }
.login h2 { font-size: 28px; margin-bottom: 8px; }
label { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; font-size: 14px; }
input, textarea, button { font: inherit; border: 1px solid var(--ink); background: #fffdf8; color: var(--ink); padding: 12px 14px; }
textarea { width: 100%; resize: none; }
button { background: var(--ink); color: var(--paper); cursor: pointer; width: max-content; }
.ghost { margin-top: 18px; background: transparent; color: var(--ink); }
.err { color: #9f1239; min-height: 1.2em; }
.log { flex: 1; overflow: auto; padding: 36px 56px 16px; }
.bubble { max-width: 720px; margin: 0 0 22px; line-height: 1.5; }
.bubble.user { color: var(--accent); }
.bubble.assistant { white-space: pre-wrap; }
.bubble .who { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
#composer { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 16px 56px 28px; border-top: 1px solid var(--rule); align-items: end; }
@media (max-width: 860px) {
  .frame { grid-template-columns: 1fr; }
  .rail, .login, .log, #composer { padding-left: 20px; padding-right: 20px; }
  .rail { border-right: 0; border-bottom: 1px solid var(--rule); }
}