:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:light-dark(#213547,#fff);background-color:light-dark(#fff,#333);background-image:radial-gradient(light-dark(#e0e0e050,#6c6c6c50) 1px,light-dark(#f0f0f050,#33333350) 1px);background-size:20px 20px;background-position-x:center;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:light-dark(#646cff,#9fa8da);text-decoration:inherit}a:hover{color:light-dark(#535bf2,#7986cb)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button:hover{border-color:light-dark(#646cff,#9fa8da)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}@layer login{@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes rotate{to{--angle: 360deg}}.username-wrapper{display:flex;flex-direction:column;align-items:center;gap:10px}.login-form{display:flex;flex-direction:column;align-items:center;padding:20px;border:2px solid transparent;border-radius:8px;box-shadow:0 4px 8px light-dark(rgba(0,0,0,.1),rgba(0,0,0,.5));background:linear-gradient(light-dark(#fff,#222)) padding-box,conic-gradient(from var(--angle),#007bff,#90caf9,#007bff) border-box}.login-form:hover{animation:rotate 2s linear infinite}.username-input{padding:10px;font-size:16px;border:1px solid light-dark(#ccc,#444);border-radius:4px;width:100%;max-width:30vw;box-sizing:border-box;margin-bottom:15px;background:light-dark(#fff,#222);color:light-dark(#222,#fff)}.connect-button{padding:.7rem 1.5rem;border-radius:8px;border:none;background:light-dark(#4caf50,#388e3c);color:light-dark(#111,#fff);font-size:1rem;cursor:pointer}}@layer header{.avatar{font-size:3rem;margin-bottom:1rem;cursor:pointer}.title{margin:.5rem 0;font-size:2rem;font-weight:700}.description{font-size:1rem;margin-bottom:1rem;text-align:center}.separator{width:100%;margin:1rem 0;border:none;border-top:1px solid #eee}.animate{animation:shake-slide 8s linear 0s 1}@keyframes shake-slide{0%{transform:translate(0) rotate(0)}2.5%{transform:translate(10px) rotate(-5deg)}5%{transform:translate(-10px) rotate(5deg)}7.5%{transform:translate(10px) rotate(-5deg)}10%{transform:translate(-10px) rotate(5deg)}12.5%{transform:translate(0) rotate(0)}50%{transform:translate(200%) rotate(0);opacity:1}51%{transform:translate(200%) rotate(0);opacity:0}52%{transform:translate(-200%) rotate(0);opacity:0}53%{transform:translate(-200%) rotate(0);opacity:1}to{transform:translate(0) rotate(0)}}}@layer chat{.card{overflow:hidden;max-width:400px;margin:40px auto;padding:2rem 2.5rem;border-radius:18px;border:2px solid light-dark(#007bff,#90caf9);display:flex;flex-direction:column;align-items:center;background:light-dark(#fff,#222)}.chat-form{width:100%;display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center}.input-wrapper{display:flex;flex-direction:column;gap:.5rem}.peer-id-input{padding:.7rem 1rem;border-radius:8px;border:1px solid light-dark(#ccc,#444);font-size:1rem;background:light-dark(#fff,#222);color:light-dark(#222,#fff)}.button-row{display:flex;gap:1rem;justify-content:center}.connect-button{padding:.7rem 1.5rem;border-radius:8px;border:none;background:light-dark(#4caf50,#388e3c);color:light-dark(#111,#fff);font-size:1rem;cursor:pointer}.connect-button:disabled{background:light-dark(#bdbdbd,#555);color:light-dark(#888,#ccc);cursor:not-allowed}.disconnect-button{background:light-dark(#e57373,#c62828);color:light-dark(#111,#fff)}.connections-list{width:100%;margin-top:2rem}.rooms-list{width:100%;display:flex;flex-direction:column;gap:1rem}}@layer room{@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes rotate{to{--angle: 360deg}}.room{width:100%;display:flex;flex-direction:column;gap:1rem;align-items:center;padding:.5rem 0;border:2px solid light-dark(#ccc,#444);border-radius:12px;transition:border-color .2s;background:light-dark(#fff,#222)}.room-active{border:2px solid transparent;box-shadow:0 4px 8px light-dark(rgba(0,0,0,.1),rgba(0,0,0,.5));background:linear-gradient(light-dark(#fff,#222)) padding-box,conic-gradient(from var(--angle),#007bff,#90caf9,#007bff) border-box;animation:rotate 5s linear infinite}.room:hover{border-color:light-dark(#007bff,#90caf9)}.room-name{font-size:1.25rem;color:light-dark(#222,#fff)}.room-button{width:50%;max-width:150px;padding:.5rem 1rem;border-radius:8px;border:none;background:light-dark(#007bff,#1976d2);color:light-dark(#111,#fff);cursor:pointer}}.ReloadPrompt-container{padding:0;margin:0;width:0;height:0}.ReloadPrompt-toast{position:fixed;right:0;bottom:0;margin:16px;padding:12px;border:1px solid light-dark(#8885,#4448);border-radius:4px;z-index:1;text-align:left;box-shadow:3px 4px 5px 0 light-dark(#8885,#2228);background-color:light-dark(#fff,#222);color:light-dark(#222,#fff)}.ReloadPrompt-toast-message{margin-bottom:8px}.ReloadPrompt-toast-button{border:1px solid light-dark(#8885,#4448);outline:none;margin-right:5px;border-radius:2px;padding:3px 10px;background:light-dark(#f9f9f9,#333);color:light-dark(#111,#fff);cursor:pointer}