:root{--color-bg:#fff;--color-surface:#f8f8f8;--color-surface-soft:#fafafa;--color-surface-hover:#f0f0f0;--color-surface-active:#e0e0e0;--color-surface-frosted:#fffffff2;--color-accent:#5ba3d0;--color-accent-hover:#4a93c0;--color-accent-soft:#e3f2fd;--color-accent-soft-hover:#d0e8f7;--color-accent-border:#b3d9f2;--color-accent-deep:#1a4971;--color-accent-bg:#f8fbfd;--color-text:#000;--color-text-heading:#333;--color-text-secondary:#555;--color-text-muted:#666;--color-text-subtle:#999;--color-text-on-accent:#fff;--color-border:#ccc;--color-border-type:#e0e0e0;--color-danger:#d32f2f;--color-danger-badge:#c44;--color-danger-status:#c00;--color-success:#2e7d32;--color-success-status:#0a0;--color-badge-bg:#888;--color-overlay:#0000004d;--color-shadow:#00000026;--color-shadow-strong:#0003;--font-mono:monospace;--font-size-xs:12px;--font-size-sm:13px;--font-size-base:14px;--font-size-md:16px;--line-height-tight:1;--line-height-normal:1.4;--line-height-relaxed:1.6;--space-1:.25em;--space-2:.5em;--space-3:.75em;--space-4:1em;--space-5:1.5em;--space-6:2em;--radius-sm:3px;--radius-md:4px;--radius-lg:8px;--radius-pill:.8em;--shadow-sm:0 2px 8px #00000026;--shadow-sidebar:2px 0 8px #0003;--duration-fast:.15s;--duration-normal:1s;--duration-slow:3s;--ease-out:ease-out}*,:before,:after{box-sizing:border-box}html,body{font-family:var(--font-mono);overscroll-behavior:none;margin:0;padding:0}.Home{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);flex-direction:column;display:flex;&>.content{flex:1;min-height:0;display:flex;&>.main{flex-direction:column;flex:1;min-width:0;display:flex}}&>.backdrop{display:none}}.Home>.content>.main>.header{padding:var(--space-2);border-bottom:1px solid var(--color-border);font-size:var(--font-size-base);justify-content:space-between;align-items:center;display:flex;&>.channel{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:700;overflow:hidden;&>.member-count{color:var(--color-text-muted);margin-left:var(--space-2);font-weight:400}&>.topic{color:var(--color-text-muted);margin-left:var(--space-3);font-weight:400;font-size:var(--font-size-sm)}}&>.connection-status{font-family:var(--font-mono);font-size:var(--font-size-xs);padding:var(--space-1)var(--space-2);opacity:1;transition:opacity var(--duration-normal)var(--ease-out);background:0 0;border:none;&>.status-text{text-align:center;width:12ch;display:inline-block}&.disconnected{color:var(--color-danger-status);cursor:pointer}&.clickable:hover>.status-text{color:var(--color-text);text-decoration:underline}&.connecting{color:var(--color-text);cursor:wait}&.reconnected{color:var(--color-success-status);cursor:default}}&>.menu-button{cursor:pointer;padding:var(--space-1);margin-right:var(--space-2);background:0 0;border:none;font-size:1.5em;display:none;&:focus{outline:2px solid var(--color-accent-soft);outline-offset:1px}&>.menu-badge{display:none}}}.Home>.content>.main>.void{text-align:center;padding:var(--space-6);color:var(--color-text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;font-style:italic;line-height:1.5;display:flex;&>.hint{color:var(--color-text-subtle);margin-top:0;font-style:normal;&:first-of-type{margin-top:var(--space-4)}}& .channel-link{color:var(--color-accent-deep);cursor:pointer;background:var(--color-accent-soft);border:1px solid var(--color-accent-border);border-radius:var(--radius-md);padding:.1em .4em;text-decoration:none;&:hover{background:var(--color-accent-soft-hover)}}&>.notice{margin-top:var(--space-5);color:var(--color-text);font-style:italic;font-weight:500}}@media (max-width:600px){.Home>.content>.ChannelList{z-index:100;background:var(--color-bg);width:80%;max-width:280px;box-shadow:var(--shadow-sidebar);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);display:none;position:fixed;top:0;bottom:0;left:0;&.open{display:flex}}.Home>.backdrop{background:var(--color-overlay);z-index:99;position:fixed;inset:0;&.open{display:block}}.Home>.content>.main>.header>.menu-button{align-items:center;gap:var(--space-1);display:flex;&>.menu-badge{background:var(--color-badge-bg);color:var(--color-text-on-accent);border-radius:var(--radius-pill);text-align:center;min-width:1.2em;padding:.1em .4em;font-size:.65em;font-weight:700;display:inline-block;&.mention{background:var(--color-danger-badge)}}}.Home>.content>.main>.header{padding-top:calc(.5em - 2.5px);padding-bottom:calc(.5em - 2px)}}