@import"https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap";@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap";.root{width:100%;min-height:100vh;display:flex;flex-direction:column}.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:3rem 2rem}.home .draw{width:100%;max-width:20rem}.home form{width:100%;max-width:25rem;display:flex;flex-direction:column;gap:1rem;justify-content:start}.home form .control.btn{width:100%;max-width:25rem}.home form .control.username{text-align:center;cursor:text}.home .btn-ranking{position:fixed;left:2rem;bottom:2rem}.intro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem}.intro .content{width:100%}.intro .control.btn{width:100%;max-width:25rem}.bg-load{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center}.bg-load .load{width:5rem;height:5rem;border-radius:2.5rem;border:.5rem solid var(--dark-8);border-right:.5rem solid var(--secondary-color);animation:spin .8s infinite linear}@keyframes spin{to{transform:rotate(1turn)}}.level{flex:1;display:flex;align-items:start;justify-content:start;max-width:100%;--width-side: 30%;--width-main: calc(100% - var(--width-side))}.level .side{width:var(--width-side);max-width:var(--width-side);min-width:var(--width-side);min-height:100vh;padding:2rem 1rem;overflow:hidden;z-index:10;position:sticky;top:0;left:0;display:flex;flex-direction:column;align-items:stretch;justify-content:start;gap:2.5rem;background-color:var(--light-2);border-right:2px solid var(--dark-8)}.level .side h2{font-size:2rem;color:var(--secondary-color);margin-top:1rem;margin-bottom:0}.level .side .score{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}.level .side .score .icon{--icon-size: 2rem}.level .side h3{font-size:1.5rem;color:var(--secondary-color);margin-top:0;margin-bottom:.5rem}.level .side h3+span{display:inline-block;margin-bottom:.5rem;color:var(--dark-8)}.level .side .helps{list-style:none;display:flex;flex-direction:column;gap:1rem}.level .side .tip{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:start;padding:.5rem;background-color:var(--light-1);border:var(--border-gray);border-radius:var(--border-rounded)}.level .side .tip svg{min-width:32px;min-height:32px}.level .side .tip .title{flex:1;display:inline-block;font-size:1rem;line-height:1.2rem;text-align:left;padding:0 .3rem;color:var(--dark-1)}.level .side .tip .tip-text{display:none}.level .side .tip:not(:disabled):hover{cursor:pointer;border:2px solid #6c6c6c}.level .side .tip.active .tip-text{display:inline-block;width:100%;font-size:1rem;line-height:1.2rem;text-align:right;padding:.3rem;color:var(--secondary-color)}.level .main{width:var(--width-main);max-width:var(--width-main);padding:2rem 4rem}.level .menu{display:none}@media (max-width: 900px){.level{--width-side: clamp(320px, 30vw, 30rem);--width-main: 100%}.level .side{position:fixed;left:calc(var(--width-side) * (-1));transition:left .2s ease-in-out}.level .side.open{left:0}.level .menu{display:flex;position:fixed;top:2rem;right:2rem;padding:.5rem;border:none;border-radius:var(--border-rounded);background-color:#c6c6c666;z-index:20}.level .main{padding:2rem}}@media (max-width: 480px){.level{--width-side: 100%}}.next{width:90vw;max-width:40rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;background-color:var(--light-1);border-radius:var(--border-rounded)}.next .illustration{width:100%;max-width:1200px;max-height:50vh;min-height:20rem;margin-top:1rem}.next .score{width:100%;display:flex;align-items:center;justify-content:center;color:var(--secondary-color);gap:.5rem;font-size:2rem}.next .score .icon{--icon-size: 3rem}.next .description{width:100%;text-align:center}.next .control.btn{width:100%;max-width:25rem}.table-container{width:100%;overflow:auto;margin:1rem 0}.table-container .feedback{font-size:1rem}.sql-form{display:flex;flex-direction:column;gap:1rem}.sql-form .query{width:100%;max-height:300px;min-height:100px;resize:vertical;padding:1rem;font-family:IBM Plex Mono,monospace}.sql-form-control{display:flex;gap:1rem}.sql-table{border-collapse:collapse}.sql-table th{background-color:var(--light-2);font-weight:600;font-size:1.1rem}.sql-table th,.sql-table td{border:var(--border-gray);padding:.8rem 1.5rem;min-width:150px}.diagram{width:70vw;height:90vh;max-width:1800px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.diagram .control.btn{border:none;align-self:end}.diagram .box{width:100%;overflow:auto}.diagram .box .image{width:100%;min-width:800px;border-radius:var(--border-rounded)}@media (max-width: 768px){.diagram{width:90vw}}.form-check{font-size:1.5rem;display:flex;flex-direction:column;align-items:stretch;justify-content:start;gap:1rem}.form-check .form{display:flex;flex-direction:column;gap:.8rem}.form-check .control.group{width:100%;padding:0;gap:0;overflow:hidden}.form-check .control.group label{text-transform:capitalize;padding:1rem 0 1rem 1rem}.form-check .control.group input[type=text]{width:100%;flex:1;align-self:stretch;padding:0 1rem;font-family:IBM Plex Mono,monospace;font-size:inherit;background:transparent;border:none}.dead{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:3rem 2rem}.dead .draw{width:100%;max-width:20rem}.dead .description{width:100%;max-width:40rem}.dead .control.btn{width:100%;max-width:25rem}.ranking{flex:1}.ranking h1{color:var(--secondary-color)}.ranking .ranking-table{width:100%;border-collapse:collapse}.ranking .ranking-col{padding:.5rem 1rem;border:var(--border-gray)}.ranking .ranking-score,.ranking .ranking-id{width:20%;min-width:48px}.ranking .ranking-player{flex:4}.ranking td.ranking-player:before{content:"";display:none;margin-right:10px;width:1rem;height:1rem;border-radius:50%}.ranking tr:nth-child(1) td.ranking-player:before{display:inline-block;background-color:gold}.ranking tr:nth-child(2) td.ranking-player:before{display:inline-block;background-color:silver}.ranking tr:nth-child(3) td.ranking-player:before{display:inline-block;background-color:#cd7f32}*{box-sizing:border-box;font-family:SUSE,sans-serif;--primary-color: #5BA5FB;--secondary-color: #3F3D56;--light-1: #F3F3F3;--light-2: #ECECEC;--dark-1: #474747;--dark-8: #9C9C9C;--border-gray: 2px solid var(--dark-8);--border-rounded: .8rem}div,form,section,body,main,aside,ol,ul{margin:0;padding:0}p,ul,ol,form{font-size:1.5rem}p{margin:1rem 0}button:focus,input:focus,textarea:focus,select:focus{outline:none}img{max-width:100%}.icon{--icon-size: 1.5rem;width:var(--icon-size);height:var(--icon-size)}.logo{width:100%;max-width:25rem}.error{font-size:1rem;color:tomato}.central{width:100%;display:flex;align-items:center;justify-content:center}.container{width:90vw;max-width:1200px;margin:0 auto;padding:2rem 0}.control{width:fit-content;display:flex;align-items:start;justify-content:center;gap:.5rem;padding:.5rem 1rem;font-size:1rem;background-color:var(--light-2);border:var(--border-gray);color:var(--dark-1);border-radius:var(--border-rounded);transition:all .1s linear}.control.btn{align-items:center;cursor:pointer}.control.btn:hover,.control.btn:focus{transform:scale(1.05);box-shadow:0 5px 10px #0003}.control.large{font-size:1.5rem;padding:1rem}.control.btn.large .icon{--icon-size: 2rem}.bg-modal{position:fixed;top:0;left:0;background-color:#000a;width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;z-index:99999}.control.btn.music{position:fixed;bottom:2rem;right:2rem}@media (max-width: 770px){:root{font-size:14px}}@media (max-width: 480px){:root{font-size:12px}}