:root{--void:#060304;--panel:#0d0709;--ox:#4a0a0e;--red:#c41e25;--rt:#ff6d71;--bone:#efe6d6;--ash:#b6ab9e;--line:rgba(239,230,214,.18);--c:14px}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--void);color:var(--bone);font:400 1rem/1.5 'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
h1{margin:.2rem 0 1.2rem;font:800 2.5rem/1 'Big Shoulders Display','Arial Narrow',Impact,sans-serif}
small{display:block;color:var(--rt);font-weight:600;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}
a{color:var(--rt)}
:focus-visible{outline:2px solid #f0b23f;outline-offset:2px}
.card{max-width:26rem;margin:7vh auto;padding:2rem;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
@media(max-width:30rem){.card{margin:0;min-height:100dvh;clip-path:none}}
label{display:block;margin:0 0 1rem;font-size:.85rem;color:var(--ash)}
input,textarea{display:block;width:100%;margin-top:.3rem;padding:.7rem .8rem;background:#150c0e;color:var(--bone);border:1px solid var(--line);border-radius:0;font:inherit}
.btn{display:inline-flex;justify-content:center;align-items:center;padding:.75rem 1.4rem;background:var(--red);color:var(--bone);font-weight:600;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.btn:hover{background:#d8262d}
.card .btn{width:100%}
.err{margin:0 0 1rem;padding:.6rem .8rem;background:var(--ox);color:#ffd9da}
.alt{margin:1.2rem 0 0;color:var(--ash);font-size:.9rem}
.lnk{color:var(--rt);text-decoration:underline;font-size:.9rem}
/* chat */
body.chat{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:46rem;margin:0 auto;border-inline:1px solid var(--line)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1rem;background:var(--panel);border-bottom:1px solid var(--line)}
.bar form{display:flex;align-items:center;gap:.7rem;margin:0;color:var(--ash);font-size:.9rem}
#on{margin-left:.5rem;color:var(--ash);font-size:.85rem}
#log{flex:1;overflow-y:auto;margin:0;padding:1rem;list-style:none;display:flex;flex-direction:column;gap:.7rem}
#log li{max-width:82%;align-self:flex-start;padding:.55rem .8rem;background:#1b1012;border-left:3px solid var(--ash)}
#log li.me{align-self:flex-end;background:var(--ox);border-left-color:var(--rt)}
.who{font-size:.75rem;color:var(--ash)}
.txt{white-space:pre-wrap;overflow-wrap:anywhere}
.x{margin-left:.6rem;font-size:.75rem;color:var(--rt);text-decoration:underline}
#st{margin:0;padding:0 1rem;min-height:1.2rem;color:var(--rt);font-size:.85rem}
#f{display:flex;gap:.6rem;align-items:flex-end;padding:.7rem 1rem;padding-bottom:max(.7rem,env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line)}
#f textarea{margin:0;flex:1;max-height:8rem;resize:none;field-sizing:content}