:root{color-scheme:light;--ink:#18201c;--muted:#68716c;--paper:#f6f5ef;--card:#fff;--line:#dedfd9;--accent:#176b4a;--soft:#e8f2ed}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:ui-rounded,"SF Pro Rounded",Inter,system-ui,sans-serif;background:var(--paper);color:var(--ink)}body{min-height:100dvh}button,input{font:inherit}main{width:min(100%,680px);min-height:100dvh;margin:auto;padding:24px 16px}.card{margin:8vh auto 0;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px;max-width:430px;box-shadow:0 14px 40px #18201c0c}.mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ink);color:white;font-weight:800}h1{font-size:34px;line-height:1;margin:22px 0 8px;letter-spacing:-1.4px}.muted{color:var(--muted);margin:0 0 28px}label{display:block;font-size:13px;font-weight:700;margin:0 0 7px}input{width:100%;border:1px solid var(--line);border-radius:13px;padding:14px 15px;background:#fff;color:var(--ink);outline:none;min-width:0}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #176b4a18}button{border:0;border-radius:13px;padding:14px 18px;font-weight:750;background:var(--accent);color:#fff;cursor:pointer}#create{width:100%;margin-top:12px}.secondary{background:var(--ink)}.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:22px 0}.or:before,.or:after{content:"";height:1px;background:var(--line);flex:1}.joinrow{display:flex;gap:8px}.joinrow input{text-transform:uppercase;letter-spacing:2px;font-weight:750}.error{color:#a32f2f;min-height:18px;font-size:13px;margin:12px 0 0}.hidden{display:none!important}.chat{height:calc(100dvh - 32px);background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:grid;grid-template-rows:auto auto 1fr auto}.chat header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.room-label{font-size:12px;color:var(--muted);margin-top:2px;letter-spacing:1px}.share{padding:9px 13px;background:var(--soft);color:var(--accent)}.people{padding:9px 18px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.messages{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}.msg{max-width:85%;align-self:flex-start}.msg.mine{align-self:flex-end}.meta{font-size:11px;color:var(--muted);margin:0 7px 4px}.mine .meta{text-align:right}.bubble{padding:10px 13px;border-radius:16px;background:#f0f1ed;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35}.mine .bubble{background:var(--accent);color:#fff}.system{text-align:center;color:#89908c;font-size:11px;margin:3px}.empty{margin:auto;text-align:center;color:var(--muted);font-size:14px}.empty strong{display:block;color:var(--ink);font-size:18px;margin-bottom:5px}#composer{display:flex;gap:8px;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-top:1px solid var(--line);background:#fff}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;border-radius:99px;padding:9px 15px;font-size:13px;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:520px){main{padding:0}.card{margin:0;min-height:100dvh;border:0;border-radius:0;padding:28px 20px;display:flex;flex-direction:column;justify-content:center}.chat{height:100dvh;border:0;border-radius:0}.messages{padding:14px 12px}.chat header{padding-top:max(14px,env(safe-area-inset-top))}.msg{max-width:90%}}