@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);:root{--mono-light:#bfbfbf;--mono-dark:#575757;--primary-dark:#222831;--secondary-dark:#31363f;--midtone-dark:#e8e8e8;--primary-light:#f8f9fa;--secondary-light:#eee;--midtone-light:#333;--accent-color:#76abae;--success-color:#5e9e7e;--info-color:#5a9ca3;--warning-color:#ff9800;--error-color:#f44336}*,:after,:before{box-sizing:border-box;font-family:Poppins,Arial,Helvetica,sans-serif;margin:0;outline-color:#76abae;outline-color:var(--accent-color);padding:0;transition:.1s}*,:after,:before,a{-webkit-tap-highlight-color:transparent}a{color:#2f2f2f;text-decoration:none}.mono-light-bg{background-color:#bfbfbf;background-color:var(--mono-light)}.mono-light{color:#bfbfbf;color:var(--mono-light)}.mono-light-border{border-color:#bfbfbf!important;border-color:var(--mono-light)!important}.mono-dark-bg{background-color:#575757;background-color:var(--mono-dark)}.mono-dark{color:#575757;color:var(--mono-dark)}.mono-dark-border{border-color:#575757!important;border-color:var(--mono-dark)!important}.dark-shadow{box-shadow:1.5px 1.5px 4px 1px #31363f;box-shadow:1.5px 1.5px 4px 1px var(--secondary-dark);box-shadow:0 2px 6px #31363f,0 10px 20px #31363f4d}.dark-hover:hover{background-color:#31363f;background-color:var(--secondary-dark)}.primary-dark-bg{background-color:#222831;background-color:var(--primary-dark)}.primary-dark{color:#222831;color:var(--primary-dark)}.secondary-dark-bg{background-color:#31363f;background-color:var(--secondary-dark)}.secondary-dark{color:#31363f;color:var(--secondary-dark)}.midtone-dark{color:#e8e8e8;color:var(--midtone-dark)}.light-shadow{box-shadow:2px 2px 4px #eee;box-shadow:2px 2px 4px var(--secondary-light)}.light-hover:hover{background-color:#eee;background-color:var(--secondary-light)}.primary-light-bg{background-color:#f8f9fa;background-color:var(--primary-light)}.primary-light{color:#f8f9fa;color:var(--primary-light)}.secondary-light-bg{background-color:#eee;background-color:var(--secondary-light)}.secondary-light{color:#eee;color:var(--secondary-light)}.midtone-light{color:#333;color:var(--midtone-light)}.accent-color-bg{background-color:#76abae;background-color:var(--accent-color)}.accent-color{color:#76abae;color:var(--accent-color)}.red{background-color:red!important}.loading{align-items:center;display:flex;height:-webkit-min-content;height:min-content;height:100%;justify-content:center;padding:2rem;svg{height:min(5rem,30vw);width:min(5rem,30vw)}}#root>.loading{height:100vh}.login,.new-user{align-items:center;gap:3rem;height:100vh;justify-content:center;.header{align-items:center;h1{color:var(--accent-color);font-size:2.5rem}}.form{display:flex!important;flex-direction:column!important;gap:1rem;width:min(400px,90vw);.name{gap:1rem;*{width:100%}}input{border:.5px solid #949494;border-radius:3rem;height:3rem;outline-color:var(--accent-color);padding:1rem 1.5rem;&:focus{color:var(--accent-color)}}button{align-items:center!important;background-color:var(--accent-color);border:none;border-radius:3rem;color:#fff;cursor:pointer;display:flex!important;font-size:1rem;height:3rem;justify-content:center!important;padding:1rem 1.5rem;&:not(:disabled):hover{filter:brightness(.9)}&:disabled{cursor:default;opacity:.5}}.error-message{background-color:rgba(255,43,43,.871);color:#fff;font-size:.7rem;padding:.3rem;position:relative;text-align:center}&>p{color:#949494;font-size:.8rem;text-align:center;a{color:var(--accent-color)}}.login-btns{button{align-items:center!important;border:none;border-radius:3rem;cursor:pointer;display:flex!important;font-size:.85rem;height:3rem;justify-content:center!important;padding:1rem 1.5rem;width:100%}.google{background-color:initial;border:.5px solid #949494;color:#949494;gap:1rem;svg{font-size:1.5rem}&:hover{color:#000}}}}}.courses,.login,.new-user{display:flex;display:flex;display:flex;flex-direction:column;flex-direction:column}.courses{gap:2rem;overflow:hidden;padding:1rem 2rem;.header{color:var(--accent-color);gap:.5rem}.collection{gap:1rem;margin-bottom:2rem;.collection-name{font-weight:400}.courses-list{display:flex!important;gap:1rem;overflow-x:auto;padding:.5rem .1rem;scroll-behavior:smooth;&::-webkit-scrollbar{display:none}.card{border-radius:1rem;min-width:17.5rem;overflow:hidden;.banner{-webkit-backdrop-filter:brightness(.9);backdrop-filter:brightness(.9);min-height:12.5rem;padding:1rem;.title{color:var(--primary-light);font-size:1.5rem;font-weight:600;line-height:1.3;padding:.5rem 0}}.metrics{display:grid;grid-template-columns:repeat(3,1fr);padding:1rem;position:relative;&>*{position:relative;text-align:center;.count{font-size:1.5rem;font-weight:600}.label{font-size:.8rem}&.progress>*{left:50%;position:absolute;top:-3rem;transform:translateX(-50%);&.conic-progress{aspect-ratio:1;border-radius:50%;cursor:pointer;display:grid;font-size:1.2rem;padding:1.5rem;place-content:center;.enroll-btn{aspect-ratio:1;border-radius:50%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - .6rem);&.primary-dark-bg{box-shadow:0 0 0 1px var(--secondary-dark)}&.primary-light-bg{box-shadow:0 0 0 1px var(--secondary-light)}}&:hover{.enroll-btn{background-color:var(--accent-color)}&.secondary-light-bg{color:var(--primary-light)}}&>:not(.enroll-btn){transform:translateX(10%)}}&.percentile{font-size:1.2rem;top:calc(100% - 1.7rem)}}}}}}}}.exercises{display:flex;flex-direction:column;gap:2rem;padding:1rem 10rem 5rem 2rem;.header{color:var(--accent-color);flex-direction:column;gap:.5rem}.exercise,.header{display:flex}.exercise{cursor:pointer;gap:1rem;&:hover{.play.dark-hover{background-color:var(--secondary-dark);color:var(--accent-color)}}.thumbnail{aspect-ratio:1;border-radius:1rem;flex:0 0 10rem;overflow:hidden;img{height:100%;object-fit:cover;width:100%}}.details{flex:1 1;.title{flex-direction:column;gap:.2rem;.name{font-size:1.2rem;font-weight:600}.category{filter:brightness(.7);font-size:.8rem;font-weight:600}.easy{color:red}}.description{padding:.5rem 0 1.5rem}.pre-requisites{align-items:center;display:flex!important;flex-wrap:wrap;font-size:.9rem;gap:.5rem;.skill{border:1px solid;border-radius:1rem;font-size:.8rem;padding:.2rem 1rem}}}.play{align-items:center;border-radius:0 50% 50% 0;display:flex!important;line-height:1;padding:1.5rem;&:hover{color:var(--accent-color)}}}}@media (max-width:70em){.exercises{overflow:hidden;padding:1rem 1rem 5rem}}.playground{display:flex;flex-direction:column;min-height:100vh;padding:1rem 2rem;.header{color:var(--accent-color);display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.content{grid-gap:1.5rem;display:grid;flex:1 1;gap:1.5rem;grid-template-columns:2fr 1fr;.code-bits{display:flex;flex-direction:column;gap:.2rem;.tabs{display:flex;gap:.2rem;justify-content:space-evenly;a{color:inherit;padding:.5rem;text-align:center;width:100%;&.active{border-bottom:2px solid var(--accent-color)}}}.tab{display:flex;flex-direction:column;gap:.2rem;margin-top:.2rem;.code-bit{align-items:center;-webkit-backdrop-filter:brightness(1.1);backdrop-filter:brightness(1.1);background-color:inherit;border-radius:.5rem;cursor:pointer;display:flex;gap:1rem;padding:1rem;&:not(:has(.likes:hover)):hover{-webkit-backdrop-filter:brightness(1.2);backdrop-filter:brightness(1.2)}.icon{align-items:center;aspect-ratio:1;display:flex;width:3rem;img{height:100%;object-fit:contain;width:100%}}.info{display:flex;flex-direction:column;gap:.2rem;justify-content:center;margin-right:auto;.name{font-weight:600}.details{display:flex;filter:brightness(.9);font-size:.8rem;font-weight:200;gap:.5rem}}.likes{align-items:center;border-radius:2rem;display:flex;flex-direction:column;font-size:.7rem;justify-content:center;padding:.5rem;&.liked{color:var(--error-color)}svg{font-size:1.2rem}}.private{border-radius:1rem;font-size:.8rem;padding:.2rem 1rem}}.no-code{align-items:center;display:flex;flex-direction:column;padding:2rem 1rem;.message{filter:brightness(.9);font-size:1.5rem;font-weight:600}.sub-message{filter:brightness(.6);font-size:1rem}.create{background-color:var(--accent-color);border:none;border-radius:.5rem;color:var(--midtone-dark);cursor:pointer;font-size:1rem;margin-top:1rem;padding:.5rem 1rem}}}}.create{display:flex;flex-direction:column;gap:.5rem;.form{display:flex;flex-direction:column;gap:.5rem;&>*{border:none;border-radius:.5rem;font-size:1rem;padding:.5rem 1rem}label{cursor:pointer;font-size:.9rem;font-weight:600;padding:0}.create-btn{background-color:var(--accent-color);color:var(--midtone-dark);cursor:pointer;margin-top:1rem;&:hover{filter:brightness(1.1)}&:disabled{opacity:.5}}}}}}@media (max-width:35em){.playground{.content{display:flex;flex-direction:column-reverse;gap:3rem;.code-bits{min-height:calc(100vh - 2.5rem);.tabs a{white-space:nowrap}}}}}.select{align-items:center;border:1px solid gray;border-radius:2px;color:inherit;cursor:pointer;display:flex;gap:.5rem;position:relative;-webkit-user-select:none;user-select:none;.name{margin-right:auto}.options{background-color:inherit;border-radius:.5rem;display:none;filter:brightness(.9);left:0;max-height:250px;min-width:-webkit-fit-content;min-width:fit-content;overflow:hidden;overflow:auto;position:absolute;top:calc(100% + .2rem);width:100%;z-index:10;&::-webkit-scrollbar{height:.5rem;width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}&.open{display:block}.option{align-items:center;background-color:inherit;display:flex;gap:1rem;padding:1rem;.icon{align-items:center;aspect-ratio:1;display:flex;width:2rem;img{height:100%;object-fit:contain;width:100%}}.detail{display:flex;flex-direction:column;gap:.2rem;justify-content:center;.name{font-weight:600}.tech{filter:brightness(.9);font-size:.9rem}}&:hover{filter:brightness(1.1)}}}&:after{aspect-ratio:1;border-bottom:2px solid;border-right:2px solid;content:"";display:block;height:.4rem;margin:.2rem;rotate:45deg}&:has(.options.open):after{rotate:-135deg}}.toast-container{bottom:2rem;display:flex;flex-direction:column;gap:.5rem;position:fixed;right:1rem;z-index:1000;.toast{align-items:center;animation:countdown 3s linear forwards;background-repeat:no-repeat;border-radius:.5rem;color:#fff;display:flex;gap:1rem;justify-content:flex-start;min-width:20rem;padding:.5rem 1rem .5rem .5rem;.indicator{background-color:#f44336;border-radius:1rem;height:4.5rem;width:.3rem}.message{display:flex;flex-direction:column;height:4.5rem;justify-content:space-evenly;margin-right:auto;.title{font-size:1rem;font-weight:600}.content{font-size:.9rem;font-weight:400}}&.toast-success{background-color:color-mix(in srgb,var(--primary-dark),#fff 8%);background-image:linear-gradient(to right,color-mix(in srgb,var(--primary-dark),#fff 13%) 100%,#0000);.indicator{background-color:var(--success-color)}.message .title{color:var(--success-color)}}&.toast-error{background-color:color-mix(in srgb,var(--primary-dark),#fff 8%);background-image:linear-gradient(to right,color-mix(in srgb,var(--primary-dark),#fff 13%) 100%,#0000);.indicator{background-color:var(--error-color)}.message .title{color:var(--error-color)}}&.toast-warning{background-color:color-mix(in srgb,var(--primary-dark),#fff 8%);background-image:linear-gradient(to right,color-mix(in srgb,var(--primary-dark),#fff 13%) 100%,#0000);.indicator{background-color:var(--warning-color)}.message .title{color:var(--warning-color)}}&.toast-info{background-color:color-mix(in srgb,var(--primary-dark),#fff 8%);background-image:linear-gradient(to right,color-mix(in srgb,var(--primary-dark),#fff 13%) 100%,#0000);.indicator{background-color:var(--info-color)}.message .title{color:var(--info-color)}}button{background:#0000;border:none;color:inherit;cursor:pointer;font-size:1.5rem;font-weight:300}}}@keyframes countdown{0%{background-size:100% 100%}to{background-size:0 100%}}.main{display:grid;grid-template-columns:2fr 8fr;min-height:100vh;.left-panel{bottom:0;display:flex;flex-direction:column;height:100vh;max-height:100vh;padding-left:.2rem;position:-webkit-sticky;position:sticky;top:0;z-index:1;.nav{display:flex;flex-direction:column;.brand{align-items:center;display:flex;gap:.5rem;padding:1rem;text-decoration:none;.logo{display:flex;img{height:2rem}}.name{color:var(--accent-color);font-size:1.2rem;font-weight:800}}a:not(.brand){align-items:center;border-radius:3rem;color:inherit;display:flex;font-size:1rem;gap:1rem;padding:.7rem 1rem;text-decoration:none;& :not(span){font-size:1.5rem}&.active-link{color:var(--accent-color)}}&.mobile{display:none}}.shortcuts{flex:1 1}.profile{align-items:center;border-radius:3rem;cursor:pointer;display:flex;gap:.5rem;padding:1rem;position:relative;.display-picture{aspect-ratio:1;background-color:var(--mono-light);background-size:cover;border-radius:50%;overflow:hidden;width:2.3rem;img{height:100%;object-fit:cover;width:100%}}.name{display:flex;flex:1 1;flex-direction:column;gap:.5rem;.display-name{font-size:.9rem;font-weight:600;line-height:1;&.loading{background-color:var(--mono-light);height:.9rem;width:80%}}.username{font-size:.8rem;line-height:1;&.loading{background-color:var(--mono-light);height:.8rem;width:50%}}}.meatball-menu{cursor:pointer;padding:.2rem;svg{pointer-events:none;scale:1.3}}.menu{border-radius:.5rem;bottom:calc(100% + .5rem);display:flex;display:none;flex-direction:column;left:.5rem;padding:.5rem;position:absolute;width:100%;z-index:10;&.show{display:flex}&.dark-shadow :hover{background-color:var(--primary-dark);filter:brightness(1.2)}&.light-shadow :hover{background-color:var(--primary-light);filter:brightness(.9)}&>*{border-radius:.3rem;cursor:pointer;font-size:.8rem;padding:.7rem 1rem}&:after{aspect-ratio:1;background-color:inherit;bottom:0;content:"";left:50%;position:absolute;transform:translate(-50%,40%) rotate(45deg);transform-origin:center center;width:1rem;z-index:-1}}&:has(.menu.show):hover{background-color:initial}}}}@media (max-width:70em){.main{grid-template-columns:1fr 20fr;.left-panel{padding-top:1rem;.nav{a:not(.brand){justify-content:center;span{display:none}}.brand{justify-content:center;.name{display:none}}}.profile{flex-direction:column;.name{display:none}.menu{bottom:1rem;left:110%;width:min(250px,60vw);z-index:100;&:after{display:none}}}}}}@media (max-width:35em){.main{grid-template-columns:1fr;position:relative;.left-panel{bottom:0;flex-direction:row;height:-webkit-fit-content;height:fit-content;justify-content:center;left:0;padding:0;position:fixed;right:0;top:auto;z-index:1;.nav{align-items:center;display:none;width:100%;.brand{display:none}&.mobile{display:flex;flex-direction:row;justify-content:space-evenly}}.profile{display:none;flex-direction:row;&.mobile{display:flex}.meatball-menu{align-items:center;display:flex;font-size:1.3rem;justify-content:center}.menu{bottom:4rem;display:none;left:auto;position:fixed;right:.5rem;width:min(300px,70vw);z-index:100;.display-picture{aspect-ratio:1;background-color:var(--mono-light);background-size:cover;border-radius:50%;width:2.3rem}.user{display:flex;gap:.5rem;.name{display:flex;flex:1 1;flex-direction:column;gap:.5rem;.display-name{font-size:.9rem;font-weight:600;line-height:1;&.loading{background-color:var(--mono-light);height:.9rem;width:80%}}.username{font-size:.8rem;line-height:1;&.loading{background-color:var(--mono-light);height:.8rem;width:50%}}}}&.show{display:flex}&:after{display:none}}}.shortcuts{display:none}}}}.home{display:grid;grid-template-columns:6fr 2fr;min-height:100vh;overflow:hidden;.feed{display:flex;justify-content:center;position:relative;.news{display:flex;flex-direction:column;padding:2rem 0;width:min(500px,95vw);.create-post{border-radius:.5rem;display:flex;flex-direction:column;margin-bottom:2rem;overflow:hidden;padding:1rem .5rem;.context{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:2.5rem 1fr;.display-photo{aspect-ratio:1;border-radius:50%;overflow:hidden;padding-bottom:0;width:100%;img{height:100%;object-fit:cover;width:100%}}.datas{border-bottom-style:solid;border-bottom-width:1px;display:flex;flex-direction:column;gap:1rem;overflow-x:auto;position:relative;.post-area{background-color:initial;border:none;font-size:1rem;left:0;margin-right:.5rem;outline:none;overflow:hidden;padding:.5rem 0 .8rem;position:-webkit-sticky;position:sticky;resize:none}&.mono-dark-border{border-color:var(--mono-dark)}&.mono-light-border{border-color:var(--mono-light)}.medias{display:flex;gap:.5rem;padding:.5rem 0 1rem;.media{border-radius:1rem;flex-shrink:0;height:15rem;object-fit:fill;overflow:hidden;position:relative;width:-webkit-max-content;width:max-content;video{pointer-events:none}img,video{height:100%}.close{aspect-ratio:1;background-color:#000000a2;border-radius:50%;cursor:pointer;display:grid;place-items:center;position:absolute;right:.5rem;top:.5rem;width:1.5rem}.progress{background-color:var(--accent-color);bottom:0;height:3px;left:0;position:absolute}}}&::-webkit-scrollbar{display:none}}}.attachments{bottom:10;display:flex;padding:.5rem 0 .5rem 3rem;position:-webkit-sticky;position:sticky;#add-file{display:none}.add-file{cursor:pointer;font-size:1.3rem}button{background-color:var(--accent-color);border:none;border-radius:1rem;color:#fff;cursor:pointer;font-weight:600;margin-left:auto;padding:.5rem 1rem;&:disabled{opacity:.5}}}&.posting{opacity:.8;pointer-events:none}}.no-post{color:var(--primary-color);font-size:1.5rem;font-weight:600;opacity:.5;padding:5rem;text-align:center}.news-posts{display:flex;flex-direction:column}}}}@media (max-width:70em){.home{grid-template-columns:8fr;justify-items:center;.right-panel{display:none}}}.post{border-bottom-style:solid;border-bottom-width:.5px;cursor:default;padding:1rem .5rem .5em;position:relative;.edit-post-modal .body{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:2.675rem 1fr;.display-picture{align-self:self-start;background-color:orange;border-radius:50%;display:flex;overflow:hidden;img{aspect-ratio:1;object-fit:cover;width:100%}}.details{display:flex;flex-direction:column;.post-header{align-items:center;cursor:pointer;display:flex;font-size:.9rem;gap:.2rem;justify-content:flex-start;.name{font-weight:600;&:hover{text-decoration:underline}}.username{font-weight:300}.post-time{font-size:.8rem;margin-left:.2rem;&:hover{text-decoration:underline}}}.context{background-color:initial;border:none;font-size:1rem;left:0;margin-right:.5rem;outline:none;overflow:hidden;padding:.5rem 0 .8rem;position:-webkit-sticky;position:sticky;resize:none}}}&:last-child{border-bottom:none}&.comment .before{border-radius:0 0 0 .5rem;border-style:solid;border-width:2px;border-right:none;border-top:none;height:2.4rem;position:absolute;right:calc(100% - .4rem);top:0;width:2.4rem}&.hasReplies>.after{content:"";height:var(--height);left:1.5rem;position:absolute;top:3.6rem;width:2px}.repost-indicator{grid-gap:.85rem;align-items:center;display:grid;font-size:.8rem;gap:.85rem;grid-template-columns:2.5rem 1fr;padding-bottom:.2rem;&>:first-child{font-size:1rem;justify-self:end}}.post-details{display:grid;grid-template-columns:2.5rem 1fr;.display-picture{aspect-ratio:1;border-radius:50%;cursor:pointer;overflow:hidden;width:100%;img{height:100%;object-fit:cover;width:100%}}.menu{border-radius:.5rem;display:none;min-width:15rem;padding:0 .5rem;position:absolute;right:.5rem;top:3rem;z-index:2;&.show{display:block}&>:last-child{border:none!important}&.dark-shadow>*{border-bottom:1px solid var(--mono-dark);padding:.5rem 0;&.danger>*{color:#ff0034}&>*{align-items:center;border-radius:.5rem;cursor:pointer;display:flex;gap:1rem;justify-content:space-between;padding:.7rem;&.report{color:#ff0034}&>:not(span){font-size:1.3rem}&:hover{background-color:var(--primary-dark);filter:brightness(1.2)}}}&.light-shadow>*{border-bottom:1px solid var(--mono-light);padding:.5rem 0;&.danger>*{color:#ff0034}&>*{align-items:center;border-radius:.5rem;cursor:pointer;display:flex;gap:1rem;justify-content:space-between;padding:.7rem;&.report{color:#ff0034}&>:not(span){font-size:1.3rem}&:hover{background-color:var(--primary-light);filter:brightness(.9)}}}}.repost-options{border-radius:.5rem;display:none;left:10.5rem;min-width:10rem;padding:0 .5rem;position:absolute;top:calc(100% - .5rem);z-index:2;&.show{display:block}&>*{align-items:center;border-radius:.5rem;cursor:pointer;display:flex;gap:1rem;justify-content:space-between;padding:.7rem}&.primary-dark-bg>:hover{-webkit-backdrop-filter:brightness(1.2);backdrop-filter:brightness(1.2)}}.content{display:flex;flex-direction:column;overflow:hidden;padding-left:.85rem;position:relative;.post-header{align-items:center;cursor:pointer;display:flex;font-size:.9rem;gap:.2rem;justify-content:flex-start;.name{font-weight:600;&:hover{text-decoration:underline}}.username{font-weight:300}.post-time{font-size:.8rem;margin-left:.2rem;&:hover{text-decoration:underline}}.meatball{aspect-ratio:1;border-radius:50%;display:flex;font-size:1rem;margin-left:auto;padding:.3rem}}.context{font-size:.9rem;overflow-x:auto;position:relative;.repost{border:1px solid;border-radius:.5rem;padding:1rem;.repost-display-picture{aspect-ratio:1;border-radius:50%;cursor:pointer;overflow:hidden;width:2rem;img{height:100%;object-fit:cover;width:100%}}}.texts{left:0;padding:.5rem 0;position:-webkit-sticky;position:sticky}.medias{display:flex;gap:.5rem;.media{border-radius:.5rem;flex-shrink:0;overflow:hidden;position:relative;&:has(.video){max-width:100%}.video{cursor:pointer;height:auto;max-height:30rem;min-height:100%;position:relative;width:100%;video{display:block;width:100%}.toggle-pause{animation:none;background-color:#00000068;border-radius:50%;font-size:2rem;left:50%;line-height:0;opacity:0;padding:1rem;position:absolute;top:50%;transform:translate(-50%,-50%);&.paused,&.play{animation:show-toggle-pause .4s ease-out forwards}}.toggle-mute{aspect-ratio:1;background-color:rgba(57,57,57,.448);border-radius:50%;bottom:.3rem;cursor:pointer;font-size:1em;line-height:0;padding:.3rem;position:absolute;right:.3rem}}img{display:block;height:15rem;object-fit:cover;width:auto}}}&::-webkit-scrollbar{display:none}}.post-datas{align-items:center;display:flex;gap:.5rem;left:-.85rem;padding:.5rem 0 0;position:relative;.data{align-items:center;border-radius:2rem;color:#696969;cursor:pointer;display:flex;font-size:1.1rem;justify-content:center;padding:.5rem .8rem;position:relative;-webkit-user-select:none;user-select:none;*{pointer-events:none}&.likes{&.liked{color:#ff0034}:not(.count){font-size:1.2rem}}&.share :not(.count){font-size:1.1rem}.count{font-size:.8rem;margin-left:.2rem;&:empty{margin-left:0}}}}}}}@media (max-width:35em){.post .post-details .content .post-header .username{display:none}}@keyframes show-toggle-pause{0%{opacity:0}20%{opacity:1}to{opacity:0}}.repost-modal{align-items:center;background:#00000080;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:1000;.modal-content{border-radius:.5rem;max-height:90vh;overflow-y:auto;position:relative;width:min(500px,95vw);&::-webkit-scrollbar{height:.5rem;width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}.header{align-items:center;background-color:inherit;display:flex;left:0;padding:1rem 1rem .5rem;position:-webkit-sticky;position:sticky;top:0;z-index:10;h3{left:50%;position:absolute;transform:translateX(-50%)}.cancel{cursor:pointer}}.body{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:2.5rem 1fr;height:auto;padding:.5rem 1rem;.display-picture{aspect-ratio:1;border-radius:50%;cursor:pointer;overflow:hidden;width:100%;img{height:100%;object-fit:cover;width:100%}}.content{display:flex;flex-direction:column;gap:1rem;.post-area{background-color:initial;border:none;font-size:1rem;left:0;margin-right:.5rem;outline:none;overflow:hidden;padding:.5rem 0 .8rem;position:-webkit-sticky;position:sticky;resize:none}.repost{border:1px solid;border-radius:.5rem;padding:1rem;.post-header{align-items:center;cursor:pointer;display:flex;font-size:.9rem;gap:.2rem;justify-content:flex-start;.name{font-weight:600;&:hover{text-decoration:underline}}.username{font-weight:300}.post-time{font-size:.8rem;margin-left:.2rem;&:hover{text-decoration:underline}}.meatball{aspect-ratio:1;border-radius:50%;display:flex;font-size:1rem;margin-left:auto;padding:.3rem}}.context{font-size:.9rem;overflow-x:auto;padding:1rem 0 0;position:relative;.texts{left:0;padding:.5rem 0;position:-webkit-sticky;position:sticky}.medias{display:flex;gap:.5rem;.media{border-radius:.5rem;flex-shrink:0;overflow:hidden;position:relative;&:has(.video){max-width:100%}.video{cursor:pointer;height:auto;max-height:30rem;min-height:100%;position:relative;width:100%;video{display:block;width:100%}.toggle-pause{animation:none;background-color:#00000068;border-radius:50%;font-size:2rem;left:50%;line-height:0;opacity:0;padding:1rem;position:absolute;top:50%;transform:translate(-50%,-50%);&.paused,&.play{animation:show-toggle-pause .4s ease-out forwards}}.toggle-mute{aspect-ratio:1;background-color:rgba(57,57,57,.448);border-radius:50%;bottom:.3rem;cursor:pointer;font-size:1em;line-height:0;padding:.3rem;position:absolute;right:.3rem}}img{display:block;height:15rem;object-fit:cover;width:auto}}}&::-webkit-scrollbar{display:none}}.repost-display-picture{aspect-ratio:1;border-radius:50%;cursor:pointer;margin-right:.5rem;overflow:hidden;width:2rem;img{height:100%;object-fit:cover;width:100%}}}}}.submit{background-color:inherit;bottom:0;display:flex;justify-content:flex-end;left:0;padding:.5rem 1rem;position:-webkit-sticky;position:sticky;.post-btn{background-color:var(--accent-color);border:none;border-radius:1rem;color:var(--midtone-dark);cursor:pointer;filter:brightness(.8);font-weight:600;margin-left:auto;padding:.5rem 1rem;&:hover{filter:brightness(1)}}}}}.modal-overlay{align-items:center;background:#00000080;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000;.modal-content{border-radius:.5rem;max-height:90vh;overflow-y:auto;position:relative;width:min(500px,95vw);&::-webkit-scrollbar{height:.5rem;width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}.header{align-items:center;background-color:inherit;display:flex;left:0;padding:1rem 1rem .5rem;position:-webkit-sticky;position:sticky;top:0;z-index:10;h3{left:50%;position:absolute;transform:translateX(-50%)}.cancel{cursor:pointer}}.body{height:auto;padding:1rem}.submit{background-color:inherit;bottom:0;display:flex;justify-content:flex-end;left:0;padding:.5rem 1rem;position:-webkit-sticky;position:sticky;button{background-color:var(--accent-color);border:none;border-radius:1rem;color:var(--midtone-dark);cursor:pointer;filter:brightness(.8);font-weight:600;margin-left:auto;padding:.5rem 1rem;&:not(:disabled):hover{filter:brightness(1)}&:disabled{opacity:.5}}}}}.post-page{display:grid;grid-template-columns:1fr;min-height:100vh;padding-bottom:4rem;.post-container{align-items:center;display:flex;flex-direction:column;padding:1rem 0;&>*{width:min(500px,90vw)}.header{display:grid;grid-template-columns:1fr 11fr;padding:.5rem 0;.back{aspect-ratio:1;border-radius:50%;cursor:pointer;display:grid;place-content:center}p{text-align:center}}.divider{border-bottom-style:solid;border-bottom-width:.5px;display:flex;font-size:.9rem;justify-content:space-between;padding:.8rem .5rem;.replies{font-weight:600}.view-activity{color:#696969;cursor:pointer;&:hover{text-decoration:underline}}}.add-comment{align-items:center;display:flex;gap:.5rem;padding:.5rem .5rem 0;textarea{background-color:initial;border:1px solid #696969;border-radius:2rem;font-size:.9rem;height:-webkit-fit-content;height:fit-content;outline:none;overflow:hidden;padding:.5rem 1rem;resize:none;width:100%}.attachments{align-self:flex-end;display:flex;justify-content:flex-end;padding:.5rem 0;button{align-items:center;background-color:initial;border:none;color:#fff;color:var(--accent-color);cursor:pointer;display:flex;font-size:1.7rem;font-weight:600;justify-content:center;&:disabled{cursor:default;opacity:.5}}}}}}@media (max-width:70rem){.post-page{grid-template-columns:8fr}}.profile-page{display:grid;grid-template-columns:1fr;min-height:100vh;padding-bottom:4rem;.edit-profile-modal .body{display:flex;gap:1rem;.details{display:flex;flex:1 1;flex-direction:column;gap:1rem;&>div{border:1px solid;border-radius:.5rem;display:flex;flex-direction:column;overflow:hidden;label{font-size:.8rem;padding:.5rem .5rem 0;&:has(~input:focus){color:var(--accent-color)}}input{background:inherit;border:none;color:inherit;font-size:1rem;outline:none;padding:.5rem}}}.photo{align-self:flex-start;aspect-ratio:1;border-radius:50%;cursor:pointer;overflow:hidden;position:relative;width:7rem;img{object-fit:cover}.hover-overlay,img{height:100%;width:100%}.hover-overlay{background-color:rgba(0,0,0,.451);display:grid;font-size:1.5rem;left:0;opacity:0;place-items:center;position:absolute;top:0;z-index:10}&:hover .hover-overlay{opacity:1}}.change-dp{display:none}}.profile{align-items:center;display:flex;flex-direction:column;padding:1rem 0;&>*{width:min(500px,90vw)}.header{display:grid;grid-template-columns:1fr 10fr 1fr;padding:.5rem 0;&>*{display:grid;place-content:center}.back{aspect-ratio:1;border-radius:50%;cursor:pointer;font-size:1.3rem}p{text-align:center}.meatball{aspect-ratio:1;border-radius:50%;cursor:pointer;font-size:1.3rem}}.profile-card{padding:0 0 .5rem;.profile-details{align-items:center;display:flex;justify-content:space-between;padding:1rem 0;.display-names{display:flex;flex-direction:column;gap:.2rem;.name{font-size:1.5rem;font-weight:600}.username{filter:brightness(.8);font-size:1rem;font-weight:300}}.profile-picture{aspect-ratio:1;border-radius:50%;height:7rem;overflow:hidden;img{height:100%;object-fit:cover;width:100%}}}.bio{font-size:1rem}.metrics{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr);padding:1rem 0;&>*{align-items:center;border-radius:.5rem;color:inherit;cursor:pointer;display:flex;flex-direction:column;padding:.7rem;.count{font-size:1.5rem;font-weight:600}.title{filter:brightness(.8);font-size:.8rem;font-weight:300}}}.cta{display:flex;gap:.5rem;&>*{background-color:initial;border:1px solid;border-radius:.5rem;cursor:pointer;flex:1 1;font-size:1rem;padding:.5rem}.follow{background-color:var(--accent-color);border:none;color:var(--midtone-dark)}.follow-btn:disabled{cursor:default;opacity:.5}}}.profile-nav{display:flex;&>*{color:inherit;flex:1 1;padding:1rem;text-align:center}.active-link{border-bottom:1px solid var(--accent-color)}}.timeline{display:flex;flex-direction:column}}}.course-page{display:flex;flex-direction:column;.hero{align-items:center;background-color:#f0f8ff;color:var(--midtone-dark);display:flex;justify-content:center;min-height:50vh;padding:0 1rem;position:relative;text-align:center;.header{left:4rem;position:absolute;top:1rem;.back{align-items:center;cursor:pointer;display:flex;gap:1rem;padding:.5rem;& :not(span){font-size:1.3rem}&:hover{text-decoration:underline}}.burger-menu{display:none}}}.content{display:flex;padding:1rem 4rem;.chapters{border-radius:1rem;display:flex;flex:0 1 30%;flex-direction:column;gap:.2rem;overflow:hidden;padding:.5rem;position:relative;top:-3.5rem;transition:.2s ease-in;.header{display:none}a{border-radius:.5rem;color:inherit;font-size:1.3rem;font-weight:500;padding:1rem 1.5rem;&.active{color:var(--accent-color)}&:hover{-webkit-backdrop-filter:brightness(1.2);backdrop-filter:brightness(1.2)}}}.lessons{flex:1 1;.lessons-outlet{display:flex;flex-direction:column;gap:2rem;padding:1rem 3rem;.links{display:flex;flex-direction:column;gap:.5rem;a{border-radius:.5rem;padding:1.5rem 2rem}}}}}}@media (max-width:70em){.course-page{min-height:150vh;overflow:hidden;position:relative;.hero .header{align-items:center;display:flex;justify-content:space-between;left:1rem;right:1rem;.burger-menu{cursor:pointer;display:block;font-size:1.5rem}}.content .chapters{border-radius:0;height:100%;left:100%;padding-top:0;position:absolute;top:0;width:100%;&.show{left:0}.header{align-items:center;display:flex;font-size:1.5rem;font-weight:800;justify-content:space-between;left:auto;padding:0 0 1rem 1.5rem;position:relative;right:0;top:10px;.title{color:var(--accent-color)}.close{border-radius:.5rem;cursor:pointer;font-size:1.5rem;font-weight:600;padding:1rem}}}.content{padding:1rem;.lessons .lessons-outlet{padding:1rem}}}}.metrics-page,.post-activity{display:grid;grid-template-columns:1fr;min-height:100vh;padding-bottom:4rem;.activity,.metrics{align-items:center;display:flex;flex-direction:column;padding:1rem 0;&>*{width:min(500px,90vw)}.header{display:grid;grid-template-columns:1fr 10fr 1fr;padding:.5rem 0;&>*{display:grid;place-content:center}.back{aspect-ratio:1;border-radius:50%;cursor:pointer;font-size:1.3rem}p{text-align:center}.meatball{aspect-ratio:1;border-radius:50%;cursor:pointer;font-size:1.3rem}}nav{display:flex;a{flex:1 1;padding:1rem;text-align:center;&.active{border-bottom:2px solid var(--accent-color)}}}.list{display:flex;flex-direction:column;padding:.5rem 0}}}.user-item{align-items:center;cursor:pointer;display:flex;gap:1rem;padding:.5rem 0;position:relative;.display-photo{aspect-ratio:1/1;border-radius:50%;height:3rem;overflow:hidden;&.liked .heart{bottom:.2rem;color:red;font-size:1.5rem;position:absolute;transform:translateX(-70%)}img{height:100%;object-fit:cover;width:100%}}.name{flex:1 1;.display-name{font-size:.9rem;font-weight:600}.username{filter:brightness(.8);font-size:.9rem;font-weight:300}}button{background:none;border:1px solid var(--accent-color);border-radius:1rem;cursor:pointer;padding:.2rem 1rem;&.following{border:1px solid}&.follow{background-color:var(--accent-color)}&:disabled{cursor:default;opacity:.5}}}.typing-test{min-height:100vh;padding:3rem 10rem;.header{.sub{color:var(--accent-color);cursor:pointer;position:relative;&:before{content:"←";height:20px;opacity:0;position:absolute;right:calc(100% + 1rem);top:-.1rem;transition:.3s;width:20px}&:hover:before{opacity:1}}}.options{.timer{font-family:monospace;font-size:2rem;margin-block:3rem .5rem}}.typing-area{font-family:monospace;font-size:2.5rem;line-height:1.5;margin-bottom:2rem;max-height:11.25rem;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;.hidden{opacity:0;position:fixed;-webkit-user-select:none;user-select:none;z-index:-10}.blur{align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;font-family:monospace;font-size:1.5rem;gap:1rem;height:100%;justify-content:center;width:100%;z-index:10}.blur,.caret{position:absolute}.caret{animation:blink 1s ease-in-out infinite;background-color:var(--accent-color);border-radius:5px;display:inline-block;height:2.7rem;opacity:1;top:.5rem;width:3px}.char{font-family:inherit;position:relative;&.correct{color:var(--accent-color)}&.incorrect{color:var(--error-color)}&.not-space{background-color:var(--error-color);border-radius:.2rem;opacity:.4}}}.results{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;.illustration{aspect-ratio:1;flex:0 0 30%;img{height:100%;object-fit:cover;width:100%}}.metrics{flex:0 0 60%;.title{color:var(--accent-color);font-size:1.2rem;font-weight:800;padding-bottom:.5rem}.description{font-size:1rem;font-weight:400}.data{display:flex;gap:.2rem;margin-top:3rem;&>*{align-items:center;display:flex;flex:1 1;flex-direction:column;text-align:center;.value{font-size:2.5rem;font-weight:600}.label{font-size:.9rem;font-weight:300}}}}}.restart{font-size:3.5rem;text-align:center;svg{border-radius:50%;cursor:pointer;padding:1rem}}}@media (max-width:50em){.typing-test{overflow:hidden;padding:2rem;.results{.illustration{flex:0 0 50%}.metrics{flex:0 0 100%;.data{flex-wrap:wrap;justify-content:center;padding-bottom:3rem;&>*{flex:0 0 30%}}}}}}@keyframes blink{50%{background-color:initial}}.code-breaker{min-height:100vh;padding:3rem 10rem;.header{.sub{color:var(--accent-color);cursor:pointer;position:relative;&:before{content:"←";height:20px;opacity:0;position:absolute;right:calc(100% + 1rem);top:-.1rem;transition:.3s;width:20px}&:hover:before{opacity:1}}}.suggested{border-radius:1rem;display:flex;margin:2rem 0;.options{border-radius:1rem;display:flex;flex:0 0 30%;flex-direction:column;gap:2rem;height:-webkit-min-content;height:min-content;justify-content:space-between;padding:1rem 1.5rem;.title{font-size:1rem;font-weight:600}.dropdowns{display:flex;flex-direction:column;gap:.5rem;.focus,.language{background-color:#2c2c2c;border-radius:.5rem;select{-webkit-appearance:none;appearance:none;background-color:inherit;border-radius:.5rem;color:inherit;cursor:pointer;height:100%;padding:.5rem 1rem;width:100%;option{-webkit-appearance:none;appearance:none}}}}.buttons{display:flex;gap:.5rem;justify-content:center;&>*{background:none;border:1px solid #fff;border-radius:.5rem;color:#fff;cursor:pointer;padding:.5rem 1rem}.train{background-color:#fff3}&>:hover{background-color:#2c2c2c;border:1px solid #0000}}}.problem{display:flex;flex-direction:column;gap:1rem;overflow:auto;padding:1rem 1.5rem;.title{align-items:center;display:flex;flex:0 0 1rem;gap:.5rem;.rank{border:2px solid;border-radius:1rem;font-size:.7rem;font-weight:500;padding:.2rem .5rem;text-align:center}.name{font-size:1.3rem;font-weight:600}}.statement{flex:1 1;font-size:.9rem;overflow:auto;padding:.2rem 0;&::-webkit-scrollbar{height:.5rem;width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}&::-webkit-scrollbar-corner{background:#0000}.code{border:1px solid #c0c0c09d;border-radius:3px;padding:2px 4px}.code,.multi-code{font-family:monospace}.multi-code{border-radius:.5rem;margin-block:.5rem;overflow:auto;padding:.5rem;&::-webkit-scrollbar{height:.5rem;width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}&::-webkit-scrollbar-corner{background:#0000}}.title{margin-top:1rem}}.tags{align-items:center;display:flex;flex:0 1 0.5rem;gap:.5rem;.tag{font-size:.6rem;padding:.2rem .5rem;text-transform:uppercase}}}}.problems{display:flex;flex-direction:column;gap:1rem;.title{color:var(--accent-color);font-size:1.3rem;font-weight:600}table{display:grid;width:100%;thead{border-bottom:1px solid;margin-bottom:.5rem}tr{border-radius:.5rem;display:grid;grid-template-columns:1fr 9fr 2fr;&:nth-child(odd){background-color:initial}th{cursor:pointer}td,th{padding:.5rem 1rem;text-align:left}.problem:hover{text-decoration:underline}.problem:hover,.status{color:var(--accent-color)}.status{align-items:center;display:flex;font-size:1rem;font-size:1.1rem;justify-content:center}}}}}@media (max-width:70em){.code-breaker{padding:3rem 1rem}}@media (max-width:35em){.code-breaker{.suggested{flex-direction:column;height:auto}}}.css-duel{min-height:100vh;padding:3rem 10rem;.header{.sub{color:var(--accent-color);cursor:pointer;position:relative;&:before{content:"←";height:20px;opacity:0;position:absolute;right:calc(100% + 1rem);top:-.1rem;transition:.3s;width:20px}&:hover:before{opacity:1}}}.duels{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;.duel-container{border-radius:.5rem;cursor:pointer;flex-basis:calc(25% - 1rem);flex-grow:1;flex-shrink:1;max-width:200px;min-width:100px;overflow:hidden;position:relative;img{object-fit:cover}.detail,img{height:100%;width:100%}.detail{background-image:linear-gradient(0deg,#000,#0000);left:0;opacity:0;position:absolute;top:0;transition:.3s;z-index:10;.text{bottom:-5rem;color:var(--midtone-dark);font-family:monospace;left:1rem;position:absolute;-webkit-user-select:none;user-select:none}}&:hover{scale:1.05;.detail{opacity:1;.text{bottom:1rem}}}&:not(:hover){box-shadow:none}}&:hover .duel-container:not(:hover){opacity:.7}}}@media (max-width:35em){.css-duel{padding:3rem 2rem}}.problem-page{display:flex;flex-direction:column;gap:.5rem;min-height:100vh;nav{align-items:center;display:flex;justify-content:space-between;padding:1rem 1.5rem;position:relative;.submission{display:flex;gap:.5rem;justify-content:flex-end;left:50%;margin-top:.5rem;position:absolute;transform:translateX(-50%);button{align-items:center;border:none;border-radius:.5rem;cursor:pointer;display:flex;font-size:.9rem;gap:.5rem;padding:.5rem 1rem;&:hover{filter:brightness(1.1)}&.run-code svg{font-size:.8rem}&.submit{svg{font-size:1.3rem}&:hover{background-color:var(--accent-color);color:var(--midtone-dark)}}}}.back{cursor:pointer;font-size:1rem;font-weight:600;&:hover{color:var(--accent-color)}}}.split{display:flex;flex:auto;flex-direction:row;.gutter{background-color:#eee;background-position:50%;background-repeat:no-repeat;&.gutter-horizontal{background-color:inherit;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);cursor:col-resize;&:hover{filter:brightness(.9)}}}.problem-section{display:flex;flex-direction:column;height:100%;max-height:calc(100vh - 4rem);overflow:hidden;padding:0 .5rem 1.5rem 1.5rem;.back,.tabs,.title{display:flex;flex-grow:0;flex-shrink:0}.title{align-items:center;flex:0 0 1rem;gap:.5rem;padding:.5rem 0;.rank{border:2px solid;border-radius:1rem;font-size:.7rem;font-weight:500;padding:.2rem .5rem;text-align:center}.name{font-size:1.3rem;font-weight:600;margin-right:auto}.likes,.submissions{align-items:center;display:flex;font-size:1rem;gap:.5rem;svg{font-size:1.5rem}}.likes{border-radius:2rem;cursor:pointer;padding:.5rem}}.tabs{font-size:.8rem;font-weight:300;gap:.5rem;padding:1rem 0;.tab{border-radius:.5rem;cursor:pointer;padding:.3rem 1rem;&:not(.active){background-color:initial}}}.renderer{border-radius:.5rem;flex:1 1;overflow:auto;&::-webkit-scrollbar{width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}.problem{font-size:.9rem;height:100%;padding:1rem;.statement{border-bottom:1px solid;padding:.2rem 0 2rem;.code{border:1px solid #c0c0c09d;border-radius:3px;padding:2px 4px}.code,.multi-code{font-family:monospace}.multi-code{border-radius:.5rem;margin-top:.5rem;overflow:auto;padding:.5rem;&::-webkit-scrollbar{height:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}}.title{margin-top:1rem}}.tags{align-items:center;display:flex;flex:1 1 0.5rem;gap:.5rem;padding:1rem 0;.tag{background-color:#c8c8c832;font-size:.6rem;padding:.2rem .5rem;text-transform:uppercase}}}.output{display:flex;flex-direction:column;font-size:.9rem;gap:.1em;padding:1rem;.metrics{display:flex;gap:.5rem;padding-bottom:1rem;span{font-size:.8rem}.passed{color:var(--success-color)}.failed{color:var(--error-color)}}.title{border-left:4px solid;font-size:.9rem;padding:0 .5rem;&.passed{border-color:var(--success-color)}&.failed{border-color:var(--error-color)}}.result{cursor:pointer;display:flex;flex-direction:column;font-size:.8rem;padding:0 1rem;&.close{&.failed .message{color:var(--error-color)}.message:before{content:"›";display:block;font-size:1.5rem;position:relative;top:-.1rem}.response{display:none}}&.open{.message:before{content:"›";display:block;font-size:1.5rem;position:relative;rotate:90deg;top:-.1rem}}&.passed{.message:before,.response{color:var(--success-color)}}&.failed{.message:before,.response{color:var(--error-color)}}.message,.response{align-items:center;display:flex;gap:.5rem}.response{font-family:monospace;font-size:.9rem;padding-left:1rem}}}.submissions{background-color:initial;display:flex;flex-direction:column;gap:.2rem;.sub{align-items:center;background-color:inherit;border-radius:.5rem;display:flex;gap:1rem;padding:1.5rem 1rem;&:nth-child(2n){-webkit-backdrop-filter:brightness(1.2);backdrop-filter:brightness(1.2)}.status{font-size:1.1rem;font-weight:600;&.accepted{color:var(--accent-color)}&.wrong-answer{color:var(--error-color)}}.timestamp{font-size:.8rem;margin-right:auto}.view-code{border:none;border-radius:.5rem;cursor:pointer;padding:.5rem 1rem;&:hover{background-color:var(--accent-color);color:var(--midtone-dark)}}}}}.submission{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem;button{border:2px solid var(--accent-color);border-radius:.5rem;color:var(--midtone-dark);cursor:pointer;padding:.5rem 1rem}.run-code{background-color:initial;&:hover{background-color:var(--accent-color);filter:brightness(1.1)}}.submit{background-color:var(--accent-color);&:hover{filter:brightness(1.1)}}}}.code-section{.split-v{height:100%;max-height:calc(100vh - 4rem);.gutter{background-color:#eee;background-position:50%;background-repeat:no-repeat;&.gutter-vertical{background-color:inherit;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=);cursor:row-resize;&:hover{filter:brightness(.9)}}}.solution,.test-cases{display:flex;flex-direction:column;overflow:hidden;padding:0 1.5rem .5rem .5rem;.options{display:flex;margin-bottom:.5rem;.language{border-radius:.5rem;font-size:.8rem;padding:.3rem 1rem}}.tab{border-radius:.5rem .5rem 0 0;font-size:.7rem;padding:.2rem .5rem}.code-area{border-radius:0 0 .5rem .5rem;height:100%;outline:none!important;overflow:auto;&.light{background-color:#f0edf3}&.dark{background-color:#0d0d0d}&>*{height:100%}*{text-wrap:wrap;font-family:monospace;font-size:1rem;overflow:visible}&::-webkit-scrollbar{height:.5rem;width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}&::-webkit-scrollbar-corner{background:#0000}.cm-editor,.cm-gutters{background-color:inherit}.cm-foldGutter [title="Fold line"]{position:relative;top:-.3rem}}}.test-cases{padding:.5rem 1.5rem 1.5rem .5rem}}}}}@media (max-width:35em){.problem-page{nav{background-color:inherit;position:-webkit-sticky;position:sticky;top:0;z-index:20;.submission{display:flex;gap:.5rem;left:0;position:relative;transform:translateX(0)}}.problem-section{display:flex;flex-direction:column;height:100%;max-height:calc(100vh - 4rem);overflow:hidden;padding:0 1rem 1rem;.back,.tabs,.title{display:flex;flex-grow:0;flex-shrink:0}.title{align-items:center;flex:0 0 1rem;gap:.5rem;padding:.5rem 0;.rank{border:2px solid;border-radius:1rem;font-size:.7rem;font-weight:500;padding:.2rem .5rem;text-align:center}.name{font-size:1.3rem;font-weight:600;margin-right:auto}.likes,.submissions{align-items:center;display:flex;font-size:1rem;gap:.5rem;svg{font-size:1.5rem}}.likes{border-radius:2rem;cursor:pointer;padding:.5rem}}.tabs{font-size:.8rem;font-weight:300;gap:.5rem;padding:1rem 0;.tab{border-radius:.5rem;cursor:pointer;padding:.3rem 1rem;&:not(.active){background-color:initial}}}.renderer{border-radius:.5rem;flex:1 1;overflow:auto;&::-webkit-scrollbar{width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}.problem{font-size:.9rem;height:100%;padding:1rem;.statement{border-bottom:1px solid;padding:.2rem 0 2rem;.code{border:1px solid #c0c0c09d;border-radius:3px;padding:2px 4px}.code,.multi-code{font-family:monospace}.multi-code{border-radius:.5rem;margin-top:.5rem;overflow:auto;padding:.5rem;&::-webkit-scrollbar{height:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}}.title{margin-top:1rem}}.tags{align-items:center;display:flex;flex:1 1 0.5rem;gap:.5rem;padding:1rem 0;.tag{background-color:#c8c8c832;font-size:.6rem;padding:.2rem .5rem;text-transform:uppercase}}}.output{display:flex;flex-direction:column;font-size:.9rem;gap:.1em;padding:1rem;.metrics{display:flex;gap:.5rem;padding-bottom:1rem;span{font-size:.8rem}.passed{color:var(--success-color)}.failed{color:var(--error-color)}}.title{border-left:4px solid;font-size:.9rem;padding:0 .5rem;&.passed{border-color:var(--success-color)}&.failed{border-color:var(--error-color)}}.result{cursor:pointer;display:flex;flex-direction:column;font-size:.8rem;padding:0 1rem;&.close{&.failed .message{color:var(--error-color)}.message:before{content:"›";display:block;font-size:1.5rem;position:relative;top:-.1rem}.response{display:none}}&.open{.message:before{content:"›";display:block;font-size:1.5rem;position:relative;rotate:90deg;top:-.1rem}}&.passed{.message:before,.response{color:var(--success-color)}}&.failed{.message:before,.response{color:var(--error-color)}}.message,.response{align-items:center;display:flex;gap:.5rem}.response{font-family:monospace;font-size:.9rem;padding-left:1rem}}}.submissions{background-color:initial;display:flex;flex-direction:column;gap:.2rem;.sub{align-items:center;background-color:inherit;border-radius:.5rem;display:flex;gap:1rem;padding:1.5rem 1rem;&:nth-child(2n){-webkit-backdrop-filter:brightness(1.2);backdrop-filter:brightness(1.2)}.status{font-size:1.1rem;font-weight:600;&.accepted{color:var(--accent-color)}&.wrong-answer{color:var(--error-color)}}.timestamp{font-size:.8rem;margin-right:auto}.view-code{border:none;border-radius:.5rem;cursor:pointer;padding:.5rem 1rem;&:hover{background-color:var(--accent-color);color:var(--midtone-dark)}}}}}.submission{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem;button{border:2px solid var(--accent-color);border-radius:.5rem;color:var(--midtone-dark);cursor:pointer;padding:.5rem 1rem}.run-code{background-color:initial;&:hover{background-color:var(--accent-color);filter:brightness(1.1)}}.submit{background-color:var(--accent-color);&:hover{filter:brightness(1.1)}}}}.code-section{height:100vh;.split-v{height:100%;max-height:100vh;.gutter{background-color:#eee;background-position:50%;background-repeat:no-repeat;&.gutter-vertical{background-color:inherit;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=);cursor:row-resize;&:hover{filter:brightness(.9)}}}.solution,.test-cases{display:flex;flex-direction:column;overflow:hidden;padding:0 1.5rem .5rem .5rem;.options{display:flex;margin-bottom:.5rem;.language{border-radius:.5rem;font-size:.8rem;padding:.3rem 1rem}}.tab{border-radius:.5rem .5rem 0 0;font-size:.7rem;padding:.2rem .5rem}.code-area{background-color:#0d0d0d;border-radius:0 0 .5rem .5rem;height:100%;outline:none!important;overflow:auto;&>*{height:100%}*{text-wrap:wrap;font-family:monospace;font-size:1rem;overflow:visible}&::-webkit-scrollbar{height:.5rem;width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}&::-webkit-scrollbar-corner{background:#0000}.cm-editor,.cm-gutters{background-color:inherit}.cm-foldGutter [title="Fold line"]{position:relative;top:-.3rem}}}.test-cases{padding:.5rem 1.5rem 1.5rem .5rem}}}}}.duel{height:100vh;overflow:hidden;nav{align-items:center;display:flex;justify-content:space-between;padding:1rem 1.5rem;position:relative;.back{cursor:pointer;font-size:1rem;font-weight:600;&:hover{color:var(--accent-color)}}.title{align-items:center;display:flex;font-size:.9rem;gap:1rem;left:50%;position:absolute;transform:translateX(-50%);.btn{align-items:center;border:none;border-radius:.5rem;cursor:pointer;display:flex;padding:.5rem 1rem;&:hover{filter:brightness(1.1)}&:disabled{opacity:.3}}}}.split{display:flex;flex-direction:row;height:100%;max-height:calc(100vh - 4rem);.gutter{background-color:#eee;background-position:50%;background-repeat:no-repeat;&.gutter-horizontal{background-color:inherit;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);cursor:col-resize;&:hover{filter:brightness(.9)}}}.code-area{padding:0 .5rem;.code{background-color:#0d0d0d;border-radius:.5rem;height:100%;outline:none!important;overflow:auto;&.light{background-color:#f0edf3}&.dark{background-color:#0d0d0d}&>*{height:100%}*{text-wrap:wrap;font-family:monospace;font-size:1rem;overflow:visible}&::-webkit-scrollbar{height:.5rem;width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}.cm-editor,.cm-gutters{background-color:inherit}.cm-foldGutter [title="Fold line"]{position:relative;top:-.3rem}}}.output-area{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:1fr 1fr;padding:0 .5rem;.data{--scale:0.5;.output-container{aspect-ratio:4/3;position:relative;transition:0;width:100%;.output{aspect-ratio:4/3;background-color:#fff;border:none;margin:0;pointer-events:none;transform:scale(--scale,.5);transform-origin:top left;width:100%}img{left:0;width:100%}.slider,img{display:none;position:absolute;top:0}.slider{background-color:var(--error-color);bottom:6px;cursor:ew-resize;width:2px}}.separator{align-items:center;display:flex;font-size:.8rem;font-weight:600;gap:.5rem;padding:.5rem;&:after{border:1px solid;content:"";filter:brightness(.5);flex:1 1}}.stats{display:flex;gap:.5rem;&>*{border:1px solid;border-radius:.5rem;flex:1 1;padding:.5rem;text-align:center}.metric{font-size:1.2rem;font-weight:600}.label{font-size:.7rem}}.submit{border:none;border-radius:4rem;cursor:pointer;margin-top:.5rem;padding:.5rem;width:100%;&:hover{background-color:var(--accent-color);color:var(--midtone-dark)}}}.reference{img{width:100%}.separator{align-items:center;display:flex;font-size:.8rem;font-weight:600;gap:.5rem;padding:.5rem;&:after{border:1px solid;content:"";filter:brightness(.5);flex:1 1}}.colors{display:flex;flex-shrink:1;flex-wrap:wrap;gap:.5rem;padding:0 .5rem;text-transform:uppercase;.color{align-items:center;border-radius:2rem;cursor:pointer;display:flex;font-size:.8rem;font-weight:500;gap:.5rem;padding:.3rem .6rem;.circle{aspect-ratio:1;border-radius:50%;height:1.3rem}&:hover *{scale:1.05}}}}}}}@media (max-width:35em){.duel{.split{display:block;height:100%;max-height:calc(100vh - 4rem);.gutter{background-color:inherit;background-position:50%;background-repeat:no-repeat;&.gutter-vertical{background-color:inherit;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=);cursor:row-resize;&:hover{filter:brightness(.9)}}}.output-area{padding-top:1rem;.data .submit{background-color:var(--accent-color);color:var(--midtone-dark)}}}}}.code-bit-page{display:flex;flex-direction:column;min-height:100vh;.header{align-items:center;display:flex;gap:1rem;padding:1rem;position:relative;.logo{cursor:pointer;display:flex;img{height:2.5rem}}.details{display:flex;flex-direction:column;gap:.5rem;justify-content:center;margin-right:auto;.title{font-size:1rem;font-weight:600;line-height:1}.author{font-size:.8rem;line-height:1}}.switch{font-size:.9rem;padding:0 1rem}.buttons{display:flex;gap:.5rem;left:50%;position:absolute;transform:translateX(-50%);button{align-items:center;border:none;border-radius:.5rem;cursor:pointer;display:flex;font-size:.9rem;gap:.5rem;padding:.5rem 1rem;&:hover{filter:brightness(1.1)}&.run svg{font-size:.8rem}&.save{svg{font-size:1.3rem}&:hover{background-color:var(--accent-color);color:var(--midtone-dark)}}&:disabled{opacity:.5}}}}.split{display:flex;flex:auto;flex-direction:row;height:calc(100vh - 4.5rem);overflow:hidden;.gutter{background-color:#eee;background-position:50%;background-repeat:no-repeat;&.gutter-horizontal{background-color:inherit;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);cursor:col-resize;&:hover{filter:brightness(.9)}}}.code-area{height:100%;padding:0 0 .5rem .5rem;.code-editor{height:100%;.code{border-radius:0 0 .5rem .5rem;border-radius:.5rem;height:100%;outline:none!important;overflow:auto;&.light{background-color:#f0edf3}&.dark{background-color:#0d0d0d}&>*{height:100%}*{text-wrap:wrap;font-family:monospace;font-size:1rem;overflow:visible}&::-webkit-scrollbar{height:.5rem;width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}.cm-editor,.cm-gutters{background-color:inherit}.cm-foldGutter [title="Fold line"]{position:relative;top:-.3rem}}}.web{display:flex;flex-direction:column;height:100%;.tabs{display:flex;gap:.1rem;.tab{border-radius:.5rem .5rem 0 0;cursor:pointer;font-family:monospace;padding:.5rem 1rem;&.secondary-light-bg{background-color:#f0edf35f}&.active{&.secondary-light-bg{background-color:#f0edf3}&.secondary-dark-bg{background-color:#0d0d0d}}}}.code-renderer{height:calc(100% - 2rem);.code{border-radius:0 0 .5rem .5rem;height:100%;outline:none!important;overflow:auto;&.light{background-color:#f0edf3}&.dark{background-color:#0d0d0d}&>*{height:100%}*{text-wrap:wrap;font-family:monospace;font-size:1rem;overflow:visible}&::-webkit-scrollbar{height:.5rem;width:.5rem}&::-webkit-scrollbar-thumb{background:#888;border-radius:5px}&::-webkit-scrollbar-thumb:hover{background:#555}.cm-editor,.cm-gutters{background-color:inherit}.cm-foldGutter [title="Fold line"]{position:relative;top:-.3rem}}}}}.output{padding:0 .5rem .5rem;&:has(>.output-logs){padding:0 .5rem .5rem 0}.output-frame{background-color:#fff;border:none;height:100%;width:100%}.output-logs{border-radius:.5rem;font-family:monospace;font-size:1.1rem;height:100%;padding:.5rem 1rem;width:100%;&.light{background-color:#f0edf3}&.dark{background-color:#0d0d0d}&.error{color:var(--error-color)}}}}}@media (max-width:35em){.code-bit-page{height:100vh;.header{background-color:inherit;flex-wrap:wrap;position:-webkit-sticky;position:sticky;top:0;z-index:10;.buttons{left:0;position:static;transform:translateX(0);button{justify-content:center}}}.content{height:100%;.split{display:block;max-height:calc(100vh - 8rem);.gutter{background-color:inherit;background-position:50%;background-repeat:no-repeat;&.gutter-vertical{background-color:inherit;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=);cursor:row-resize;&:hover{filter:brightness(.9)}}}.code-area,.output-area{height:auto;overflow:hidden}}}}}
/*# sourceMappingURL=main.6c210b8b.css.map*/