@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
:root{--ink:#17201b;--muted:#6f7771;--paper:#f3f1ea;--card:#fcfbf7;--line:#d9d7cf;--acid:#c8f35d;--forest:#254a37}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:Manrope,system-ui,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.landing{min-height:100vh;background:radial-gradient(circle at 75% 15%,#dae9bb 0,transparent 29%),var(--paper);display:grid;place-items:center;padding:40px}.hero{width:min(900px,100%)}.eyebrow,.overline{font:500 12px DM Mono,monospace;text-transform:uppercase;letter-spacing:.14em}.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#73a629;box-shadow:0 0 0 5px #73a62920;margin-right:8px}.hero h1{font-size:clamp(54px,8vw,100px);line-height:.95;letter-spacing:-.065em;margin:32px 0}.hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--forest)}.lede{font-size:19px;line-height:1.65;color:var(--muted);max-width:600px}.create-card{margin-top:48px;background:var(--card);border:1px solid var(--line);padding:12px 12px 12px 22px;display:flex;align-items:end;justify-content:space-between;max-width:610px;box-shadow:0 16px 50px #24312710}.create-card label,.field label{display:block;font:500 10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:6px}.create-card select{background:none;border:0;font-weight:600;font-size:16px;outline:0}.create-card button,.join-form button{border:0;background:var(--ink);color:white;padding:17px 24px;font-weight:600}.create-card button span{color:var(--acid);margin-left:22px}.steps{display:flex;gap:56px;margin-top:80px;border-top:1px solid var(--line);padding-top:22px;font-size:13px}.steps span{display:flex;gap:12px}.steps b{font:400 11px DM Mono;color:#93a096}.error{color:#a33;font-size:13px}.room-page{height:100vh;overflow:hidden}.room-header{height:74px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:var(--card)}.brand{text-decoration:none;color:var(--ink);font-weight:700}.mark{font:500 15px DM Mono;background:var(--ink);color:var(--acid);padding:8px;margin-right:10px}.expiry{font:12px DM Mono;color:var(--muted)}.room-layout{height:calc(100vh - 74px);display:grid;grid-template-columns:minmax(0,1fr) 390px}.chat-panel{display:grid;grid-template-rows:auto 1fr auto;min-width:0}.chat-title{display:flex;justify-content:space-between;align-items:end;padding:32px 42px 24px;border-bottom:1px solid var(--line)}.chat-title h1{font-size:30px;margin:6px 0 0;letter-spacing:-.04em}.presence{font:12px DM Mono;color:var(--muted)}.messages{overflow:auto;padding:25px 42px}.empty{height:100%;display:grid;place-content:center;text-align:center;color:#9ba09c}.empty span{font-size:48px}.message{max-width:700px;padding:16px 0;border-bottom:1px solid #deddd7}.message-meta{display:flex;gap:10px;align-items:baseline}.message-meta strong{font-size:13px}.message-meta time{font:10px DM Mono;color:#979c98}.message p{margin:7px 0 0;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}.composer{display:flex;gap:10px;margin:18px 32px 28px;padding:9px;border:1px solid var(--line);background:var(--card);box-shadow:0 8px 25px #2431270b}.composer textarea{resize:none;border:0;background:none;outline:0;padding:12px;flex:1}.composer button{border:0;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--acid);font-size:21px}.composer button:disabled{opacity:.3}.share-panel{border-left:1px solid var(--line);background:var(--card);padding:38px 32px;overflow:auto}.share-panel h2{font-size:27px;letter-spacing:-.04em;margin:8px 0}.share-panel>div>p{color:var(--muted);line-height:1.6;font-size:14px}.field{margin-top:28px}.copy-row{display:flex;border-bottom:1px solid var(--line);padding-bottom:8px;gap:8px}.copy-row code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font:12px DM Mono}.copy-row button{border:0;background:none;font:500 11px DM Mono;text-transform:uppercase}.secret{filter:blur(4px);transition:.2s}.secret:hover{filter:none}.instructions-button{width:100%;margin:30px 0;border:0;background:var(--forest);color:white;padding:17px;text-align:left;display:flex;justify-content:space-between;font-weight:600}.instructions-button span{color:var(--acid)}details{border-top:1px solid var(--line);padding-top:18px}summary{font-size:13px;cursor:pointer}.block-code{display:block;font:11px DM Mono;overflow-wrap:anywhere;background:var(--paper);padding:12px}.hint{font-size:12px!important}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:white;padding:10px 18px;font-size:12px;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:0;padding:0;background:transparent}dialog::backdrop{background:#17201bcc;backdrop-filter:blur(5px)}dialog form{width:min(440px,calc(100vw - 30px));background:var(--card);padding:38px;box-shadow:0 30px 80px #0004}dialog h2{font-size:28px;margin:10px 0 26px}dialog label{display:block;font-size:12px;margin:16px 0 7px}dialog input{width:100%;padding:13px;border:1px solid var(--line);background:var(--paper);outline:none}dialog button{width:100%;margin-top:24px;border:0;background:var(--ink);color:white;padding:15px;font-weight:600}@media(max-width:800px){.room-layout{display:block;overflow:auto}.room-page{overflow:auto}.chat-panel{height:calc(100vh - 74px)}.share-panel{border-left:0;border-top:1px solid var(--line)}.steps{gap:20px;justify-content:space-between}.room-header{padding:0 18px}.chat-title,.messages{padding-left:20px;padding-right:20px}.composer{margin-left:14px;margin-right:14px}.hero h1{font-size:52px}.create-card{display:block;padding:20px}.create-card button{width:100%;margin-top:20px}.landing{padding:24px}}
