*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;font-family:monospace;overscroll-behavior:none}.Home{display:flex;flex-direction:column;height:100vh;height:100dvh;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.Home>.content{display:flex;flex:1;min-height:0}.Home>.content>.main{flex:1;display:flex;flex-direction:column;min-width:0}.Home>.content>.main>.header{padding:.5em;border-bottom:1px solid #ccc;font-size:14px;display:flex;justify-content:space-between;align-items:center}.Home>.content>.main>.header>.channel{font-weight:700}.Home>.content>.main>.header>.connection-status{background:none;border:none;font-family:monospace;font-size:12px;padding:.25em .5em;opacity:1;transition:opacity 1s ease-out}.Home>.content>.main>.header>.connection-status>.status-text{display:inline-block;width:12ch;text-align:center}.Home>.content>.main>.header>.connection-status.disconnected{color:#c00;cursor:pointer}.Home>.content>.main>.header>.connection-status.clickable:hover>.status-text{text-decoration:underline;color:#000}.Home>.content>.main>.header>.connection-status.connecting{color:#000;cursor:wait}.Home>.content>.main>.header>.connection-status.reconnected{color:#0a0;cursor:default}.Home>.content>.main>.void{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2em;color:#666;font-style:italic;line-height:1.5}.Home>.content>.main>.void>.hint{margin-top:0;font-style:normal;color:#999}.Home>.content>.main>.void>.hint:first-of-type{margin-top:1em}.Home>.content>.main>.void .channel-link{color:#1a4971;cursor:pointer;text-decoration:none;background:#e3f2fd;border:1px solid #b3d9f2;border-radius:4px;padding:.1em .4em}.Home>.content>.main>.void .channel-link:hover{background:#d0e8f7}.Home>.content>.main>.void>.notice{margin-top:1.5em;color:#000;font-weight:500;font-style:italic}.Home>.content>.main>.header>.menu-button{display:none;background:none;border:none;font-size:1.5em;cursor:pointer;padding:.25em;margin-right:.5em}.Home>.content>.main>.header>.menu-button:focus{outline:2px solid #e3f2fd;outline-offset:1px}@media(max-width:600px){.Home>.content>.ChannelList{display:none;position:fixed;top:0;left:0;bottom:0;width:80%;max-width:280px;z-index:100;background:#fff;box-shadow:2px 0 8px #0003;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}.Home>.content>.ChannelList.open{display:flex}.Home>.backdrop{display:none;position:fixed;inset:0;background:#0000004d;z-index:99}.Home>.backdrop.open{display:block}.Home>.content>.main>.header>.menu-button{display:flex;align-items:center;gap:.25em}.Home>.content>.main>.header{padding-top:calc(.5em - 2.5px);padding-bottom:calc(.5em - 2px)}}.Home>.content>.main>.header>.menu-button>.menu-badge{display:none}@media(max-width:600px){.Home>.content>.main>.header>.menu-button>.menu-badge{display:inline-block;font-size:.65em;font-weight:700;background:#888;color:#fff;padding:.1em .4em;border-radius:.8em;min-width:1.2em;text-align:center}.Home>.content>.main>.header>.menu-button>.menu-badge.mention{background:#c44}}