@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap";*{box-sizing:border-box}body{margin:0;background:#f7f5f1;color:#252525;font-family:DM Sans,sans-serif}button,input{font:inherit}.brand{font-size:23px;font-weight:700;letter-spacing:-1.3px}.brand span{font-size:9px;letter-spacing:1px;background:#f4b183;border-radius:5px;padding:3px 5px;margin-left:5px;vertical-align:middle}.landing{min-height:100vh;display:grid;grid-template-columns:1.25fr .75fr;max-width:1170px;margin:auto}.hero{padding:12vh 8vw}.hero h1{font:700 68px/1.02 Playfair Display;letter-spacing:-3px;margin:55px 0 20px}.hero mark{background:#b9dfd6;padding:0 7px}.hero>p{font-size:18px;line-height:1.65;max-width:500px;color:#6e6b67}.join{display:flex;gap:10px;margin-top:32px;max-width:500px}.join input{border:1px solid #d8d4cd;padding:15px;border-radius:9px;flex:1;background:#fff}.join button,.create,.connect{background:#20201e;color:#fff;border:0;border-radius:9px;padding:14px 18px;font-weight:600;cursor:pointer}.hero>small{display:block;color:#89847d;margin-top:14px}.roomlist{background:#ebe7df;padding:13vh 55px}.label{font-size:11px;letter-spacing:1.4px;color:#827c74;font-weight:700}.roomlist button{width:100%;text-align:left;border:0;background:#f8f7f4;border-radius:12px;padding:18px;margin:8px 0;cursor:pointer}.roomlist button span,.roomlist button small{display:block}.roomlist button small{color:#777;margin:6px 0}.roomlist button b,.room em{font-size:12px;color:#237164;font-style:normal}.app{height:100vh;display:grid;grid-template-columns:260px 1fr 300px;background:#fcfbf8}.app>aside{border-right:1px solid #e9e5de;padding:25px 15px;display:flex;flex-direction:column}.create{width:100%;margin:35px 0 20px;background:#8c5a46}.room{position:relative;text-align:left;border:0;background:transparent;padding:12px;border-radius:9px;cursor:pointer}.room b,.room small{display:block}.room small{font-size:12px;color:#7b7770;margin-top:4px}.room em{position:absolute;right:8px;top:13px}.room.selected{background:#eee7de}.profile{margin-top:auto;display:flex;gap:10px;align-items:center;padding:10px}.profile i,.avatar{display:grid;place-items:center;border-radius:50%;font-style:normal;color:#fff;background:#596f84}.profile i{width:34px;height:34px}.profile small{display:block;font-size:11px;color:#5b9582}.stage{display:flex;flex-direction:column;min-width:0}.stage header,.chat header{padding:25px 32px;border-bottom:1px solid #e9e5de;display:flex;justify-content:space-between}.stage h1,.chat h2{font-size:18px;margin:0}.stage header p,.chat header p{font-size:12px;color:#777;margin:5px 0 0}.outline{border:0;background:none;font-size:20px}.people{padding:50px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px;align-content:start}.person{text-align:center;position:relative}.avatar{height:88px;width:88px;margin:auto auto 12px;font-size:35px}.avatar.purple{background:#78628c}.avatar.orange{background:#ca7d4d}.avatar.blue{background:#4f7d98}.person b,.person small{display:block}.person small{font-size:12px;color:#858078;margin:4px}.person button{margin-top:8px;border:0;border-radius:6px;padding:6px 8px;background:#ded5ca;font-size:11px}.waves{color:#d66b56;margin:8px}.voicebar{margin-top:auto;padding:18px 30px;background:#f0ece5;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:12px}.voicebar span{color:#777}.voicebar button{border:0;border-radius:8px;padding:10px;margin-left:8px;cursor:pointer}.mic{background:#fff}.mic.live{background:#a4d8c8}.leave{color:#a04536;background:transparent}.chat{border-right:0!important;padding:0!important}.chat header{padding:25px}.messages{overflow:auto;flex:1;padding:15px 20px}.messages p{font-size:14px;line-height:1.4}.messages b{display:block;font-size:12px;color:#9a654d;margin-bottom:3px}.chat form{border-top:1px solid #e9e5de;padding:15px;display:flex;gap:6px}.chat input{min-width:0;flex:1;border:1px solid #ddd8d0;border-radius:8px;padding:10px}.chat form button{border:0;background:#8c5a46;color:#fff;border-radius:8px;padding:10px}@media (max-width:800px){.landing{grid-template-columns:1fr}.roomlist{padding:40px}.hero{padding:60px 30px}.hero h1{font-size:48px}.app{grid-template-columns:1fr;height:auto;min-height:100vh}.app>aside:first-child{display:none}.chat{min-height:360px}.people{padding:30px;grid-template-columns:repeat(2,1fr)}.voicebar{flex-direction:column;align-items:stretch}.voicebar button{margin:5px 3px}.stage{min-height:620px}}