:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--primary-text: #333;--secondary-text: #999;--max-width: 1280px;--prominent-color: hsl(33, 68%, 54%);--prominent-color-light: hsl(33, 68%, 74%);--background-color: hsl(36, 31%, 81%);--background-color-light: hsl(37, 31%, 91%)}*{box-sizing:border-box}.secondaryText{color:var(--secondary-text)}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html,body{width:100%;height:100%}body{margin:0;background:linear-gradient(to left top,var(--background-color-light),var(--background-color))}h1{font-size:3.2em;line-height:1.1}img{width:3rem;aspect-ratio:1;border-radius:50%}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}}*{color:var(--primary-text)}#root{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.room-listing--empty,.loading-panel,.error-panel{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem;width:100%;height:100%}.app-container{position:relative;display:flex;height:100%;width:100%}.main-panel{position:relative;margin-inline:auto;height:100%;width:100%;flex:1}.center-column{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.hidden{display:none}@media screen and (max-width: 800px){#root{padding:0}.intro-area img{width:6rem}.app-container{flex-direction:column;overflow-y:hidden}}.str-video__avatar--initials-fallback{display:flex;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:1rem;background-color:var(--prominent-color);font-weight:600;border-radius:999px;text-transform:uppercase}.str-video__avatar{width:2rem;height:2rem}.speaker-image-container .str-video__avatar--initials-fallback{width:5rem;height:5rem;font-size:2rem}.listener .str-video__avatar--initials-fallback{width:3rem;height:3rem;font-size:1.5rem}.sidebar .str-video__avatar--initials-fallback{width:100px;height:100px;font-size:3rem}button,a.filled-button{border-radius:8px;border:1px solid transparent;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s;white-space:nowrap}button:disabled{cursor:not-allowed}.filled-button{display:flex;justify-content:center;align-items:center;gap:.375rem;padding:.6rem 1rem;transition:background-color .2s ease-out}.filled-button svg{height:1rem}.filled-button--blue{background:#00f}.filled-button--blue,.filled-button--blue *,a.filled-button--blue:hover{color:#fff}.filled-button:hover{background:#66f}.open-create-room-button{position:fixed;bottom:1rem;right:1rem}.form-modal-background-overlay{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.form-container{background:#fff;border:3px solid var(--prominent-color-light);padding:1rem;width:300px;border-radius:8px}.form-container__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.form-container__title{font-weight:700;font-size:1.25rem}.form-container__header button.form-container__close-button{padding:0;display:flex;align-items:center;justify-content:center;background-color:var(--background-color)}.form-container__header .form-container__close-button svg{width:1.5rem;height:1.5rem}form{width:100%}form input{width:100%;border:2px solid var(--prominent-color-light);border-radius:1rem;padding:.5rem .75rem;margin-bottom:.5rem;background-color:var(--background-color-light)}form button{margin-top:.75rem}.create-button{background:#00f;color:#fff;padding:.6rem 1.2rem}.create-button:hover{background:#66f}@media screen and (max-width: 800px){.open-create-room-button{padding:.875rem}.open-create-room-button span{display:none}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-icon{animation:rotation 2s infinite linear;fill:#fff}.intro-area{display:flex;flex-direction:column;align-items:start;text-align:left}.intro-area img{width:8rem;aspect-ratio:1;border-radius:2rem;background:transparent}.login-screen{display:flex;max-width:var(--max-width);flex-wrap:wrap;margin:auto;padding:2rem;align-items:center;gap:4rem;height:100%;overflow-y:auto}.login-screen>*{flex:1}.user-list{border-radius:1rem;max-width:300px}.user-list button{padding:.5rem 1rem;display:flex;width:100%;gap:1rem;align-items:center;font-weight:700;background-color:var(--background-color-light);transition:background .15s ease-out;cursor:pointer}.user-list button:hover{background:var(--background-color)}.user-list button:not(:last-child){margin-bottom:.5rem}.active-room{display:flex;justify-content:center;gap:1rem;width:100%;height:100%;padding:1rem}.active-room .rooms-overview{flex:1;max-width:400px;min-width:365px}.active-room .room-listing-tabs{padding-left:2rem}.room-detail{position:relative;display:flex;flex:1;flex-direction:column;align-items:start;border-radius:1rem;background:#fff;padding:1rem 1.5rem;height:100%;max-width:800px;min-width:0}.room-detail h2{margin-block:.75rem}.room-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem;text-align:center;border-radius:inherit;background:#ffffff80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.room-intro .room-host{display:flex;flex-direction:column;justify-content:center;align-items:center}.room-intro .room-host h3{margin:.5rem 0 0;font-size:1.5rem}.room-intro .host-avatar{width:80px;height:80px;font-size:2rem}.room-intro .room-description{margin-bottom:3rem;font-size:1.2rem}.participants-section{width:100%;display:flex;flex-direction:column;margin-bottom:2.5rem}.participants-section h3{margin:0 0 1rem}.speakers-list{display:flex;width:100%;overflow-x:auto;gap:3rem}.speakers-list svg{width:1rem;height:1rem;border-radius:50%;padding:.15rem}.speakers-list span{display:inline-block}.listeners-list{display:flex;flex-wrap:wrap;overflow-y:auto;width:100%;gap:1rem}.listener{display:flex;flex-direction:column;align-items:center}.listener-name{font-size:smaller}.room-access-controls{width:100%;bottom:0;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.room-access-controls-button{padding:.6rem 1.2rem;background:var(--prominent-color-light);transition:all ease-in-out .2s;display:flex;align-items:center;gap:.5rem}.room-access-controls-button svg{width:1rem;height:1rem}.room-access-controls-button:hover{background:var(--prominent-color);color:#fff}.icon-button{background:#000;border-radius:.5rem;padding:0;width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center}.icon-button.notifications{position:relative}.icon-button.notifications:after{position:absolute;left:4px;bottom:4px;content:"";border-radius:999px;background:#adff2f;width:8px;height:8px}.icon-button svg{display:inline-block;width:100%;height:100%;padding:.25rem}.mute-microphone-icon{fill:#ff4500;stroke-width:20%}.speaker-container{display:flex;flex-direction:column;align-items:flex-start}.speaker-image-container{position:relative}.speaker-container__controls{display:flex;align-items:center;justify-content:flex-start;position:absolute;right:0;top:0;background:var(--background-color-light);border-radius:8px;opacity:.2}.speaker-container__controls:hover{opacity:1}.speaker-container button{background:transparent;display:flex;align-items:center;justify-content:center;padding:0}.speaker-container svg{width:1.5rem;height:1.5rem}.speaker-container svg.mute-microphone-icon{position:absolute;bottom:0;right:5px;background:var(--background-color-light)}.speaker-container img{width:100px;border:6px solid transparent;transition:border .2s ease-out}.speaker-name{font-weight:700;display:flex;align-items:center;justify-content:center;width:100%}.speaking-indicator{border-color:var(--background-color)}.speaking-requests-container{position:absolute;top:15px;left:15px;right:15px;display:flex;flex-direction:column;align-items:start;gap:1rem;background:#fff;border:1px solid var(--background-color-light);border-radius:8px;padding:1rem;background:var(--background-color-light)}.speaking-requests-container__header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:.5rem}.speaking-requests-container__header h3{margin:0}.speaking-requests-container__header button{background:#fff;display:flex;align-items:center;justify-content:center;padding:0}.speaking-requests-container__header button svg{width:1.25rem;height:1.25rem}.speaking-request{box-sizing:border-box;padding:0 1rem;border-radius:1rem;border:1px solid var(--secondary-text);width:100%;display:flex;justify-content:space-between}.room-detail-header{justify-content:space-between;align-items:center;display:flex;width:100%}.user-counts{display:flex;align-items:center;gap:.5rem;margin:0 0 1.5rem}.user-counts svg{width:1rem;height:1rem}.live-room-controls{position:relative;display:flex;gap:.5rem}.live-room-controls__notificaton{position:absolute;right:0;top:calc(100% + .25rem);white-space:nowrap;background:#000;color:#fff;padding:.375rem .5rem;border-radius:4px;font-size:.75rem}.speaking-request-buttons{display:flex;align-items:center;gap:1rem}.speaking-request-buttons button{transition:background .2s ease-out}.reject-button svg,.accept-button svg{stroke:#fff}.reject-button:hover{background:#f66}.accept-button:hover{background:#00b300}.show-room-list-button{position:absolute;top:.5rem;left:.5rem;padding:.5rem;z-index:1}@media screen and (max-width: 800px){.active-room.with-room-list{padding:0}.active-room.with-room-list .room-detail{display:none}}.rooms-overview{height:100%;display:flex;flex-direction:column}.rooms-overview h2{text-align:center}.room-listing{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,400px));justify-content:center;gap:2rem;padding:1rem;overflow-y:auto}.room-listing-section{flex:1;overflow-y:auto;padding:0 1rem 1rem}.room-card-button{padding:0;background:transparent;border-radius:8px;border:1px solid transparent;overflow:hidden}.room-card-button:hover{border-color:var(--prominent-color)}.room-card{display:flex;flex-direction:column;text-align:start;border-radius:8px;background:var(--background-color-light);padding:.6rem 1.2rem;height:100%;max-width:400px;min-width:0}.room-card>span{font-weight:lighter;font-size:.8rem;font-style:italic}.hosts-grid{display:flex;width:100%;margin-top:.25rem;padding-bottom:1rem;border-bottom:2px solid var(--background-color)}.hosts-grid div{display:flex;align-items:center;gap:.5rem}.hosts-grid span{font-size:.8rem;font-weight:700;text-transform:capitalize}.room-listing__load-more-container{display:flex;justify-content:center;width:100%;padding-block:2rem .5rem}.room-listing-tabs{display:flex;justify-content:center;gap:1rem;width:100%;padding-block:1rem;font-size:1.25rem}.room-listing-tab{display:flex;align-items:flex-end;padding:.5rem .75rem;border-radius:8px;background:transparent;outline:none}.room-listing-tab.active,.room-listing-tab:hover{background:var(--background-color)}.room-listing-tab.active{font-weight:700;font-size:1.5rem}@media screen and (max-width: 800px){.active-room .rooms-overview{width:100%;overflow:unset;max-width:unset}.room-listing__load-more-container{padding-bottom:5rem}}.sidebar{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-right:2px solid #c4c4c4}.sidebar-top,.sidebar-bottom{display:flex;flex-direction:column;align-items:center;gap:1rem}.sidebar-bottom{position:relative}.sidebar img{width:100px;height:100px}.sidebar .profile{display:flex;flex-direction:column;gap:.5rem;align-items:center}.sidebar .username{font-size:1.25rem;font-weight:700}.sidebar .filled-button{width:100%}@media screen and (max-width: 800px){.sidebar{flex-direction:row-reverse;justify-content:space-between;align-items:center;border-right:unset;border-bottom:2px solid #c4c4c4;padding:.5rem;background:var(--background-color)}.sidebar .profile{flex-direction:row-reverse;align-items:flex-end}.sidebar .username{font-size:.75rem;padding-block:.375rem}.sidebar img{width:60px}.sidebar .sidebar-top{flex-direction:row-reverse}.sidebar .sidebar-top img,.sidebar .str-video__avatar--initials-fallback{width:50px;height:50px;font-size:1.25rem}.sidebar .sidebar-bottom{flex-direction:row-reverse}.sidebar .filled-button span{display:none}}