.app{display:flex;align-items:center;justify-content:center;width:100dvw;flex-direction:column}.basic-text{color:var(--text-primary);width:100%;text-align:left}.basic-text-muted{color:var(--text-secondary);width:100%;text-align:left}.subheader{width:100%;margin:20px 0;text-align:left}.filler{min-height:60vh}.demo-label{width:100%;text-align:center;margin-top:20px;color:var(--text-secondary)}.comp-lib-wrap{width:100%;padding:100px var(--root-page-horizontal-padding);max-width:900px}.link{color:#eeeef0;text-underline-offset:2px;display:flex;align-items:center;justify-content:space-between;margin-top:20px}.cl-demo-wrap{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:40px var(--root-page-horizontal-padding)}.cdl-wrap{overflow:hidden;width:100%}.cdl-item-wrap{display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:100px;position:relative;cursor:pointer}.cdl-item-backdrop{top:50%;left:0;height:0;position:absolute;width:100vw;display:flex;align-items:center;overflow:hidden;background-color:#eee;color:#000;-webkit-user-select:none;user-select:none}.cdl-backdrop-item{display:flex;align-items:center;justify-content:center;gap:20px}.cdli-title{font-weight:400}.cdl-item-backdrop:where([data-state=hovering]){opacity:0}.is-wrap{--gap: 20px;height:100px;display:flex;align-items:center;gap:var(--gap);overflow:hidden;transition:all 1s ease-in}.is-span{animation:scroll 2s linear infinite}@keyframes scroll{to{transform:translate(calc(-100% - var(--gap)))}}.demo-title-wrap{width:100%;display:flex;flex-direction:column;padding:20px 0}.demo-title{font-weight:400;font-size:20px}.demo-area-wrap{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px 0;border-radius:10px;outline:var(--outline-muted);min-height:20dvh;position:relative;overflow:hidden}.demo-area-button{position:absolute;top:10px;right:10px;background-color:var(--background-secondary);color:var(--text-primary);border:none;padding:10px;border-radius:10px;height:35px;overflow:hidden}.expand-button-wrap{margin-top:-30px}.ib-wrap{--ib-bg: #003362;--ib-outline: #0090ff;width:100%;background-color:var(--ib-bg);margin-bottom:10px;outline:1px solid var(--ib-outline);border-radius:10px;padding:20px;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none}.icon{color:#fff;stroke-width:1px}@media (width > 768px){.ib-wrap{display:none}}.spotify-filter-demo{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:40px var(--root-page-horizontal-padding)}.filter-group{--filter-unselected: #25482d;--filter-selected: #53b365;display:flex;width:100%;align-items:center;-webkit-user-select:none;user-select:none}.filter{padding:10px 20px;border-radius:20px;cursor:pointer;margin-right:8px;background-color:var(--filter-unselected);color:var(--text-primary);border:none;transition:all .1s ease-in-out}.filter:where([data-state=true]){opacity:1!important;background-color:#53b365}.filter:where([data-state=true])+.filter:where([data-state=true]){padding-left:16px;margin-left:-25px;background-color:var(--filter-selected);border-left:1px solid var(--filter-selected);border-radius:0 20px 20px 0}.filter:focus{outline:none!important}@media (width < 400){.filter-group{width:100%}}.infinite-scroller-demo{padding:40px var(--root-page-horizontal-padding);width:100%}.asd-wrap{width:100%;padding:40px var(--root-page-horizontal-padding);display:flex;align-items:center;justify-content:center;flex-direction:column}.banner-wrap{width:80%;border-radius:inherit;outline:var(--outline);padding-top:20px;background-image:linear-gradient(45deg,#c2f3ff,#ffe0c2)}.icon-span{display:flex;align-items:center;justify-content:space-between}.icon{margin:20px;width:50px!important;height:50px!important;color:#000}.banner-title{padding:20px;color:#000}.ci-wrap{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px var(--root-page-horizontal-padding);max-width:800px}.chat-wrap{background-color:green;width:80%;min-width:320px;height:60px}.cv1-wrap{--chat-height: 80px;--backdrop-bg: #3b9eff;--chatv1-height: 80px;background-color:red;width:90%;max-width:500px;height:var(--chatv1-height);position:relative;overflow:hidden}.cv1-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:var(--backdrop-bg);color:#fff;z-index:inherit}.chat-wrap{background-color:#000;color:#fff;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:10;display:flex;gap:10px;align-items:center;padding:10px 20px}.cv1-profile-pic{height:80%;aspect-ratio:1;border-radius:50%;background-image:linear-gradient(135deg,#ff0,red)}.cv1-backdrop{display:flex;align-items:center;padding-left:20px}.cv1-chat-details{width:100%}.cv1-cd-row1{display:flex;width:100%;align-items:center;justify-content:space-between}.cv1-cd-row1>h4{font-weight:400}.cv1-cd-row1>small{opacity:.6}.small-circle{width:8px;aspect-ratio:1;border-radius:50%;background-color:transparent}.small-circle:where([data-state-read=false]){background-color:var(--backdrop-bg)}.cv1-cd-row2{display:flex;align-items:center}.cv-2-wrap{--chat-height: 80px;--backdrop-bg: #3b9eff;--backdrop-mute: #8e4ec6;--chat-bg: black;width:90%;display:flex;align-items:center;justify-content:center;flex-direction:column;height:var(--chat-height);max-width:500px;position:relative;overflow:hidden}.cv-2-wrap+.cv-2-wrap{border-top:var(--outline-muted)}.cv-2-backdrop{position:absolute;width:100%;left:0;display:flex;align-items:center;justify-content:space-between;z-index:-100}.cv-2-icon1{background-color:var(--backdrop-bg);width:50%;height:var(--chat-height);display:flex;align-items:center;padding:20px}.cv-2-icon2{background-color:var(--backdrop-mute);width:50%;height:var(--chat-height);display:flex;align-items:center;justify-content:flex-end;padding:20px}.cv-2-chat-wrap{width:100%;height:100%;height:30px;max-width:500px;height:var(--chat-height);background-image:linear-gradient(to right,gold,red)}.dc-wrap{background-color:var(--chat-bg);display:flex;gap:10px;align-items:center;padding:10px 20px;width:100%;height:100%}.dc-chat-details{width:100%}.dc-chat-row1,.dc-chat-row2{display:flex;align-items:center;justify-content:space-between;width:100%}.dc-pp{height:80%;aspect-ratio:1;border-radius:50%;background-image:linear-gradient(135deg,#00f,red)}.dc-chat-name{font-weight:400}.dc-chat-icons{display:flex;align-items:center;justify-content:space-around;gap:5px}.dc-chat-icon{display:flex;align-items:center;justify-content:center}.dc-read-circle{width:8px;aspect-ratio:1;border-radius:50%;background-color:transparent}.dc-read-circle:where([data-state-read=true]){background-color:var(--backdrop-bg)}.small-icon{scale:.7}.cv-3-wrap{--chat-height: 80px;--backdrop-bg: #3b9eff;--backdrop-mute: #8e4ec6;width:90%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-top:20px;height:var(--chat-height);max-width:500px;position:relative;overflow:hidden}.cv-3-chat-wrap{width:calc(100% + 60px);height:100%;height:30px;max-width:500px;height:var(--chat-height);background-image:linear-gradient(to right,gold,red)}.cv-3-backdrop{position:absolute;width:100%;height:var(--chat-height);left:0;display:flex;align-items:center;justify-content:space-between;z-index:-100;background-color:var(--backdrop-bg);padding:0 0 0 20px;outline:var(--outline)}.cv-3-icon{background-color:red;height:100%;width:60px;display:flex;align-items:center;justify-content:center;cursor:pointer}.str-wrap{--sender-bg: #2b292d;--reciever-bg: #3b9eff;background-color:#000;outline:var(--outline-muted);width:90%;max-width:500px;padding:20px;border-radius:10px;margin-top:40px;overflow:hidden}.message-wrap{width:100%;display:flex;align-items:center;justify-content:flex-start;z-index:-100}.reply-icon{opacity:0}.reply-icon{animation:reveal 1s ease-in-out}@keyframes reveal{0%{opacity:0}to{opacity:.8}}.message{margin-left:-22px;z-index:100;max-width:80%;display:flex;align-items:center;background-color:var(--sender-bg);border-radius:20px;padding:5px 15px;margin-bottom:1px}.message:where([data-state-sender=false]){justify-content:flex-end;background-color:var(--reciever-bg)}.message-wrap:where([data-state-sender=false]){justify-content:flex-end}.message-wrap.message-wrap:where([data-state-sender=false])+.message-wrap:where([data-state-sender=true]){margin-top:16px}.message-wrap.message-wrap:where([data-state-sender=true])+.message-wrap:where([data-state-sender=false]){margin-top:16px}.form{position:relative}.str-reply-text{position:absolute;top:-30px;margin-top:20px;margin-bottom:-15px;z-index:-100!important;background-color:#000;width:100%}.str-input{width:100%;margin-top:20px;padding:10px;border-radius:10px;border:none;font-size:16px;outline:var(--outline-muted);z-index:100}.str-input:focus{animation:in-focus 10ms ease-in-out;outline-offset:3px;outline:1px solid var(--reciever-bg)}@keyframes in-focus{0%{outline-offset:0px}to{outline-offset:3px}}.cd-wrap{outline:var(--outline-muted);width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-top:20px;margin-top:20px;border-radius:10px;overflow:hidden}.cd-label{padding:20px;margin-top:20px;background-color:var(--background-secondary);width:100%;display:flex;align-items:center;justify-content:center;text-align:center}.cd-li{text-decoration:none;list-style-type:none}.md-wrap{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px var(--root-page-horizontal-padding);max-width:800px}.am-wrap{--dimension: 50px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;max-width:600px;position:relative}.item{text-decoration:none;list-style:none;display:flex;align-items:center;gap:20px;width:100%;cursor:pointer;height:calc(var(--dimension) + 40px);overflow:hidden}.am-logo-wrap{background-image:linear-gradient(135deg,gold,red);width:var(--dimension);height:var(--dimension);border-radius:10px}.am-content{flex-grow:1;height:100%;display:flex;flex-direction:column;align-items:left;justify-content:center}.am-btn{width:60px;padding:10px 0;border-radius:20px;border:none}.am-content+.am-content{border-top:1px solid whitesmoke;background-color:red}.am-item-open{position:fixed;z-index:10;top:30%;width:calc(100% - 16px);max-width:600px;background-color:var(--background-secondary);padding:20px;border-radius:20px;display:flex;align-items:center;flex-direction:column;gap:20px;cursor:pointer}.item-open{z-index:inherit;width:100%;display:flex;align-items:center;gap:20px;cursor:pointer}.am-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent;z-index:-2}.am-text-span{overflow:hidden}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;width:100vw;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;--root-page-horizontal-padding: clamp(16px, 4vw, 5vw);--background-dark: #121113;--background-secondary: #2a2a2a;--text-primary: #ffffffed;--text-secondary: #e5edfd7b;--button-outline: 1px solid #60bafebd;--outline: 1px solid #d9edff5d;--outline-muted: 1px solid #d9edff1b;color-scheme:light dark;color:var(--text-primary);background-color:var(--background-dark)}input[type=text],input[type=number],textarea{font-size:16px}::-webkit-scrollbar{display:none}*{margin:0;padding:0;box-sizing:border-box}button{outline:none}button:focus{outline:var(--button-outline);outline-offset:3px}.muted{opacity:.6}code{background-color:var(--background-secondary);padding:2px 4px;border-radius:2px}