:root{
  --ground:#0b0b0c; --ink:#e9e6df; --dim:rgba(233,230,223,.58); --line:rgba(233,230,223,.2);
  --panel:rgba(233,230,223,.06);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0; min-height:100%; background:var(--ground); color:var(--ink);
  font:15px/1.65 var(--mono); -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%}
main{max-width:560px; min-height:100dvh; margin:0 auto; display:flex; flex-direction:column; justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
section{display:flex; flex-direction:column; gap:14px}
h1{font-size:15px; font-weight:600; letter-spacing:.08em; margin:0}
p{margin:0; color:var(--dim)}
form{display:flex; flex-direction:column; gap:10px}
#joinForm{margin-top:18px}
label,.note{color:var(--dim); font-size:13px}
.note:empty{display:none}
textarea,output,.msg{width:100%; font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:12px}
textarea{resize:none; font-size:16px}
textarea:focus,button:focus-visible,summary:focus-visible{outline:1px solid var(--ink); outline-offset:1px}
output{display:block; word-break:break-all; user-select:all; -webkit-user-select:all}
button{font:inherit; color:var(--ink); background:none; border:1px solid var(--line); border-radius:6px; padding:10px 16px; cursor:pointer; min-height:44px}
button.main{background:var(--ink); color:var(--ground); border-color:var(--ink); font-weight:600}
button:disabled{opacity:.4; cursor:default}
details{margin-top:18px; font-size:13px}
details p{margin-top:10px}
summary{color:var(--dim); cursor:pointer}
.msg{white-space:pre-wrap; overflow-wrap:anywhere; min-height:0}
.msg:empty{display:none}
#them{border-color:var(--ink)}
#you{color:var(--dim); margin-left:24px; width:calc(100% - 24px)}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px}
#leave{align-self:flex-start; margin-top:6px; color:var(--dim)}