.hidden{display:none!important}@keyframes loading{to{transform:rotate(.5turn)}}@keyframes bubbles{0%{background-position:18% 40%,20% 31%,30% 30%,40% 30%,50% 30%,57% 30%,65% 30%,80% 32%,15% 60%,83% 60%,18% 70%,25% 70%,41% 70%,50% 70%,64% 70%,80% 71%}50%{background-position:10% 44%,0 20%,15% 5%,30% 0,42% 0,62% -2%,75% 0,95% -2%,0 80%,95% 55%,7% 100%,24% 100%,41% 100%,55% 95%,68% 96%,95% 100%}to{background-position:5% 44%,-5% 20%,7% 5%,23% 0,37% 0,58% -2%,80% 0,100% -2%,-5% 80%,100% 55%,2% 100%,23% 100%,42% 100%,60% 95%,70% 96%,100% 100%;background-size:0 0}}body,html{min-height:101vh}body>.ace_editor>.ace_scrollbar::-webkit-scrollbar{width:8px!important;height:8px!important}body>.ace_editor>.ace_scrollbar::-webkit-scrollbar-track{box-shadow:var(--scrollbar-track-box-shadow);border-left:1px solid var(--scrollbar-track-border);background:var(--scrollbar-track-bg)}body>.ace_editor>.ace_scrollbar::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:8px!important}body>.ace_editor>.ace_scrollbar::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body>.ace_editor>.ace_scrollbar::-webkit-scrollbar-corner{background-color:#0000}.html-editor-page{background:var(--compiler-bg);padding-bottom:120px;overflow-x:hidden}.html-editor-page:before{content:"";background:var(--compiler-top-bg);width:100%;height:1000px;position:absolute;top:0;left:0}.html-editor-page>.compiler-code,.html-editor-page>.compiler-header,.html-editor-page>.compiler-intro,.html-editor-page>.compiler-list{z-index:1000;position:relative}.html-editor-page>.compiler-header{justify-content:center;display:flex}.html-editor-page>.compiler-header>.container{width:95%;padding:10px 0}.html-editor-page>.compiler-header>.container>div>a{width:105px;height:35px;display:block}.html-editor-page>.compiler-header>.container>div>a>img{width:105px;height:35px}.html-editor-page>.compiler-header>.container>h1{text-align:left;background-image:var(--compiler-h1-bg);-webkit-text-fill-color:transparent;-webkit-background-clip:text;width:200px;height:20px;margin-left:5px;font-size:13px;line-height:20px}.html-editor-page>.compiler-code{justify-content:center;margin-top:10px;display:flex}.html-editor-page>.compiler-code>.container{border-radius:6px;width:95%;box-shadow:0 2px 10px #00000026}.html-editor-page>.compiler-code>.container>.input{border:1px solid var(--border-transparent-black2);border-top-left-radius:6px;border-top-right-radius:6px;position:relative}.html-editor-page>.compiler-code>.container>.input>.input-header{background-color:var(--compiler-header-bg);border-bottom:1px solid var(--border-transparent-black2);border-top-left-radius:6px;border-top-right-radius:6px;justify-content:space-between;align-items:center;height:50px;line-height:50px;display:flex}.html-editor-page>.compiler-code>.container>.input>.input-header>.left{display:flex}.html-editor-page>.compiler-code>.container>.input>.input-header>.left>.reset-button,.html-editor-page>.compiler-code>.container>.input>.input-header>.left>.theme-button{margin-left:8px}.html-editor-page>.compiler-code>.container>.input>.input-header>.left>.reset-button>i,.html-editor-page>.compiler-code>.container>.input>.input-header>.left>.theme-button>i{border:1px solid var(--border-gray-black2);text-align:center;width:28px;height:28px;color:var(--compiler-icon-color);cursor:pointer;border-radius:3px;font-weight:700;line-height:28px;transition:all .2s linear;display:block}.html-editor-page>.compiler-code>.container>.input>.input-header>.left>.reset-button>i:hover,.html-editor-page>.compiler-code>.container>.input>.input-header>.left>.theme-button>i:hover{background-color:var(--compiler-icon-hover)}.html-editor-page>.compiler-code>.container>.input>.input-header>.right{justify-content:flex-end;align-items:center;display:flex}.html-editor-page>.compiler-code>.container>.input>.input-header>.right .languages-select{margin-right:10px}.html-editor-page>.compiler-code>.container>.input>.input-header>.right>.run-button{color:#fff;text-align:center;cursor:pointer;width:80px;height:32px;margin:0 8px;font-size:15px;line-height:32px;position:relative}.html-editor-page>.compiler-code>.container>.input>.input-header>.right>.run-button:after,.html-editor-page>.compiler-code>.container>.input>.input-header>.right>.run-button:before{content:"";border-radius:3px;position:absolute;inset:0}.html-editor-page>.compiler-code>.container>.input>.input-header>.right>.run-button:before{z-index:2;background-image:linear-gradient(90deg,#48aae7,#28c06f);transition:all .2s linear}.html-editor-page>.compiler-code>.container>.input>.input-header>.right>.run-button:after{z-index:1;background-image:linear-gradient(90deg,#239ce8,#0ba352)}.html-editor-page>.compiler-code>.container>.input>.input-header>.right>.run-button:hover:before{opacity:0}.html-editor-page>.compiler-code>.container>.input>.input-header>.right>.run-button>span{z-index:3;position:absolute;inset:0}.html-editor-page>.compiler-code>.container>.input>.input-header>.right>.run-button>span:before{content:"";z-index:10;pointer-events:none;background-image:radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0),radial-gradient(circle,#3ed3da 20%,#0000 0);background-position:18% 40%,20% 31%,30% 30%,40% 30%,50% 30%,57% 30%,65% 30%,80% 32%,15% 60%,83% 60%,18% 70%,25% 70%,41% 70%,50% 70%,64% 70%,80% 71%;background-repeat:no-repeat;background-size:10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%,15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,10% 10%,20% 20%;transition:all .5s ease-in-out;animation:.75s ease-in-out forwards bubbles;position:absolute;inset:-2em}.html-editor-page>.compiler-code>.container>.input>.input-header>.right>.run-button>span:active{background-color:#0a9ca3;transform:scale(.95)}.html-editor-page>.compiler-code>.container>.input>.input-header>.right>.run-button>span:active:before{background-size:0;animation:none}.html-editor-page>.compiler-code>.container>.input>.input-content{background-color:var(--compiler-input-bg);border-bottom-right-radius:6px;border-bottom-left-radius:6px;height:calc(100vh - 335px);min-height:300px}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor{border-bottom-right-radius:6px;border-bottom-left-radius:6px;width:100%;height:100%;font-family:Consolas,ui-monospace,SFMono-Regular,SF Mono,Menlo,Liberation Mono,monospace;font-size:14px;line-height:20px}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor>.ace_scrollbar::-webkit-scrollbar{width:6px!important;height:6px!important}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor>.ace_scrollbar::-webkit-scrollbar-track{box-shadow:var(--scrollbar-track-box-shadow);border-left:1px solid var(--scrollbar-track-border);background:var(--scrollbar-track-bg)}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor>.ace_scrollbar::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:6px!important}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor>.ace_scrollbar::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor>.ace_scrollbar::-webkit-scrollbar-corner{background-color:#0000}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor>.ace_mobile-menu{display:none}.html-editor-page>.compiler-code>.container>.input>.input-content>.copy-code-button{position:absolute;bottom:15px;right:15px}.html-editor-page>.compiler-code>.container>.input>.input-content>.copy-code-button>i{text-align:center;width:28px;height:28px;color:var(--copy-button-text);background-color:var(--copy-button-bg);border:1px solid var(--copy-button-border);cursor:pointer;border-radius:50%;font-size:12px;line-height:28px;transition:all .15s linear;display:block}.html-editor-page>.compiler-code>.container>.input>.input-content>.copy-code-button>i:hover{color:var(--copy-button-hover-text);background-color:var(--copy-button-hover-bg);border-color:var(--copy-button-hover-border)}.html-editor-page>.compiler-code>.container>.input>.input-content>.copy-code-button>span{text-align:center;color:var(--text-black1-white);font-size:12px;line-height:28px;display:block}.html-editor-page>.compiler-code>.container>.output{border:1px solid var(--border-transparent-black2);border-top:none;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.html-editor-page>.compiler-code>.container>.output>.output-header{border-bottom:1px solid var(--border-transparent-black2);background-color:var(--compiler-header-bg);border-top-left-radius:6px;border-top-right-radius:6px;justify-content:space-between;align-items:center;height:44px;padding:0;font-size:15px;line-height:44px;display:flex}.html-editor-page>.compiler-code>.container>.output>.output-header>div{text-align:center;width:50%;color:var(--compiler-icon-color);cursor:pointer}.html-editor-page>.compiler-code>.container>.output>.output-header>div.active{color:#13a586;position:relative}.html-editor-page>.compiler-code>.container>.output>.output-header>div.active:before{content:"";background-color:#13a586;width:100%;height:2.5px;position:absolute;bottom:-1px;left:0}.html-editor-page>.compiler-code>.container>.output>.output-content{background:var(--compiler-header-bg);border-bottom-right-radius:6px;border-bottom-left-radius:6px;flex-direction:column;height:300px;display:flex;position:relative;overflow:auto}.html-editor-page>.compiler-code>.container>.output>.output-content>iframe{background:var(--html-iframe-bg);border:none;border-bottom-right-radius:6px;border-bottom-left-radius:6px;flex-grow:1;position:relative;overflow:hidden}.html-editor-page>.compiler-code>.container>.output>.output-content>pre{background-color:var(--bg-white-black2);flex-grow:1;width:max-content;min-width:100%;padding:15px 0 0 20px;font-size:14px;line-height:24px}.html-editor-page>.compiler-code>.container>.output>.output-content::-webkit-scrollbar{width:8px!important;height:8px!important}.html-editor-page>.compiler-code>.container>.output>.output-content::-webkit-scrollbar-track{box-shadow:var(--scrollbar-track-box-shadow);border-left:1px solid var(--scrollbar-track-border);background:var(--scrollbar-track-bg)}.html-editor-page>.compiler-code>.container>.output>.output-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:8px!important}.html-editor-page>.compiler-code>.container>.output>.output-content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.html-editor-page>.compiler-code>.container>.output>.output-content::-webkit-scrollbar-corner{background:var(--scrollbar-corner-bg);background-color:#0000}.html-editor-page>.compiler-list{justify-content:center;margin-top:80px;display:flex}.html-editor-page>.compiler-list>.container{width:90%}.html-editor-page>.compiler-list>.container>.compiler-list-header{text-align:center}.html-editor-page>.compiler-list>.container>.compiler-list-header>.compiler-list-title{-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,#1ca5ed,#12d2af);-webkit-background-clip:text;font-size:24px;font-weight:700;display:inline-block;position:relative}.html-editor-page>.compiler-list>.container>.compiler-list-header>.compiler-list-title:after,.html-editor-page>.compiler-list>.container>.compiler-list-header>.compiler-list-title:before{content:"";border-radius:8px;width:12px;height:12px;position:absolute;top:12px}.html-editor-page>.compiler-list>.container>.compiler-list-header>.compiler-list-title:before{border:2px solid #1ca5ed;left:-25px}.html-editor-page>.compiler-list>.container>.compiler-list-header>.compiler-list-title:after{border:2px solid #12d2af;right:-25px}.html-editor-page>.compiler-list>.container>.compiler-list-header>.compiler-list-desc{color:#24cab7;margin-top:20px;font-size:14px;line-height:22px}.html-editor-page>.compiler-list>.container>ul{-moz-column-gap:15px;flex-wrap:wrap;justify-content:center;gap:15px;margin-top:50px;display:flex}.html-editor-page>.compiler-list>.container>ul>li>a{border:1px solid var(--compiler-list-item-border);width:40px;height:40px;color:var(--compiler-list-item-text);background-color:var(--compiler-list-item-bg);box-shadow:var(--box-shadow2);border-radius:5px;place-items:center;font-size:14px;line-height:40px;transition:all .2s linear;display:grid}.html-editor-page>.compiler-list>.container>ul>li>a:hover{transform:scale(1.08)}.html-editor-page>.compiler-list>.container>ul>li>a>i{color:var(--compiler-list-item-icon-text);font-size:24px;display:block}.html-editor-page>.compiler-list>.container>ul>li>a>span{display:none}.html-editor-page>.compiler-list>.container>ul>li>a.hot{background-color:var(--compiler-list-hot-bg);color:var(--compiler-list-hot-text)}.html-editor-page>.compiler-list>.container>ul>li>a.hot>i{color:var(--compiler-list-hot-icon-text)}.html-editor-page>.compiler-intro{justify-content:center;margin-top:80px;display:flex}.html-editor-page>.compiler-intro>.container{background-color:var(--bg-white-black2);border:1px solid var(--border-transparent-black2);width:calc(100% - 30px);min-height:600px;box-shadow:var(--box-shadow2);border-radius:10px;padding:40px 20px}.html-editor-page>.compiler-intro>.container>h2{text-align:center;background-image:var(--gradient-text1-bg);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:30px;font-size:24px;font-weight:700}.html-editor-page>.compiler-intro>.container>h3{border-bottom:1px solid var(--article-h2-border);background-image:var(--article-h2-bg);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:60px 0 24px;padding-bottom:10px;font-size:20px;font-weight:700;line-height:30px}.html-editor-page>.compiler-intro>.container>h4{background-image:var(--article-h3-bg);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:12px;font-size:16px;font-weight:700;line-height:28px}.html-editor-page>.compiler-intro>.container>h4.large{margin-top:32px!important;margin-bottom:20px!important;font-size:20px!important}.html-editor-page>.compiler-intro>.container p{margin-bottom:16px;font-size:16px;line-height:30px}.html-editor-page>.compiler-intro>.container kbd,.html-editor-page>.compiler-intro>.container p>code{color:var(--article-code-text);background-color:var(--article-code-bg);border-radius:2px;padding:0 5px}.html-editor-page>.compiler-intro>.container ul{margin-bottom:16px}.html-editor-page>.compiler-intro>.container ul>li{padding-left:32px;font-size:16px;line-height:32px;position:relative}.html-editor-page>.compiler-intro>.container ul>li:before{content:"❑";text-align:center;width:32px;height:32px;color:var(--text-black1-white);font-size:15px;font-weight:700;position:absolute;top:0;left:0}.html-editor-page>.compiler-intro>.container ul>li code{color:var(--article-code-text);background-color:var(--article-code-bg);border-radius:2px;padding:0 5px}.html-editor-page>.compiler-intro>.container ul strong{background:var(--article-strong-bg);background-position:100% 100%;background-repeat:no-repeat;background-size:100% 10px}.html-editor-page>.compiler-intro>.container strong{color:var(--article-strong-text);font-weight:700}.html-editor-page>.compiler-intro>.container a{color:var(--article-a-text);background-image:var(--article-a-bg);background-position:100% 100%;background-repeat:no-repeat;background-size:0 1px;transition:background-size .25s linear}.html-editor-page>.compiler-intro>.container a:hover{background-position:0 100%;background-size:100% 1px}.html-editor-page>.compiler-intro>.container p:has(>img){text-align:center;margin:34px 0 30px}.html-editor-page>.compiler-intro>.container p:has(>img)>img{max-width:90%;filter:var(--aritlce-img-filter);border-radius:3px}.html-editor-page>.compiler-intro>.container table{border:var(--article-table-border);width:100%;margin:24px 0;box-shadow:0 2px 10px #0000001f}.html-editor-page>.compiler-intro>.container table>caption{text-align:center;color:var(--text-black1-white);margin-bottom:12px;font-size:16px;font-weight:700}.html-editor-page>.compiler-intro>.container table>thead>tr{background-color:var(--article-table-thead-bg);color:var(--text-white-white);font-weight:700}.html-editor-page>.compiler-intro>.container table>thead>tr>th:first-child{border-top-left-radius:var(--article-table-radius)}.html-editor-page>.compiler-intro>.container table>thead>tr>th:last-child{border-top-right-radius:var(--article-table-radius)}.html-editor-page>.compiler-intro>.container table>tbody>tr:nth-child(2n){background-color:var(--article-table-tr-bg)}.html-editor-page>.compiler-intro>.container table>tbody>tr:last-child>td:first-child{border-bottom-left-radius:var(--article-table-radius)}.html-editor-page>.compiler-intro>.container table>tbody>tr:last-child>td:last-child{border-bottom-right-radius:var(--article-table-radius)}.html-editor-page>.compiler-intro>.container table>tbody>tr:last-child>td:has(img){padding:20px 0 15px 15px!important}.html-editor-page>.compiler-intro>.container table tr{line-height:28px}.html-editor-page>.compiler-intro>.container table tr>td,.html-editor-page>.compiler-intro>.container table tr>th{word-wrap:break-word;word-break:break-all;padding:5px 10px}.html-editor-page>.compiler-intro>.container table tr>td:first-child,.html-editor-page>.compiler-intro>.container table tr>th:first-child{width:120px}.html-editor-page>.compiler-intro>.container table .icon-success,.html-editor-page>.compiler-intro>.container table .icon-yes{color:#3cb371;margin-right:5px}.html-editor-page>.compiler-intro>.container table .icon-error,.html-editor-page>.compiler-intro>.container table .icon-no{color:#f76757;margin-right:5px}.html-editor-page>.compiler-intro>.container .info-box li code,.html-editor-page>.compiler-intro>.container .info-box p code,.html-editor-page>.compiler-intro>.container .note-box li code,.html-editor-page>.compiler-intro>.container .note-box p code{background-color:var(--article-box-code-bg);color:var(--article-box-code-text)}.html-editor-page>.compiler-intro>.container .note-box{border:1px solid var(--border-transparent-black1);background-color:var(--article-box-bg);border-radius:3px;margin:35px 0 35px 20px;padding:20px 20px 20px 30px;position:relative}.html-editor-page>.compiler-intro>.container .note-box strong{background:var(--article-box-strong-bg);background-position:100% 100%;background-repeat:no-repeat;background-size:100% 10px}.html-editor-page>.compiler-intro>.container .note-box>i{text-align:center;width:32px;height:32px;color:var(--text-white-white);background-color:var(--article-box-i-bg);border-radius:2px;font-size:22px;line-height:32px;display:block;position:absolute;top:15px;left:-20px}.html-editor-page>.compiler-intro>.container .note-box>i:after{content:"";border-top:5px solid var(--article-box-i-bg);border-right:10px solid var(--article-box-i-bg);border-bottom:5px solid #0000;border-left:10px solid #0000;position:absolute;bottom:-9px;left:0}.html-editor-page>.compiler-intro>.container .note-box>p:first-of-type{margin-bottom:0}.html-editor-page>.compiler-intro>.container .note-box>p:first-of-type>strong:first-of-type{background:0 0;margin-right:5px}.html-editor-page>.compiler-intro>.container .note-box>ul{margin-top:10px}.html-editor-page>.compiler-intro>.container .info-box{background-color:var(--article-box-bg);border:1px solid var(--border-transparent-black1);text-align:center;border-radius:3px;margin:30px 0;padding:0 20px 15px}.html-editor-page>.compiler-intro>.container .info-box strong{background:var(--article-box-strong-bg);background-position:100% 100%;background-repeat:no-repeat;background-size:100% 10px}.html-editor-page>.compiler-intro>.container .info-box>.box-title,.html-editor-page>.compiler-intro>.container .info-box>h3{border-bottom-right-radius:8px;border-bottom-left-radius:8px;align-items:center;max-width:95%;height:36px;margin-top:0;margin-bottom:16px;padding:0 18px;font-size:17px;font-weight:700;line-height:36px;display:inline-flex;position:relative;color:var(--text-white-white)!important;background-color:var(--article-box-i-bg)!important}.html-editor-page>.compiler-intro>.container .info-box>.box-title:before,.html-editor-page>.compiler-intro>.container .info-box>h3:before{content:"";background-color:var(--article-infobox-i-bg);pointer-events:none;width:36px;height:36px;position:absolute;top:-20px;left:-18px;transform:rotate(20deg);-webkit-mask:url(../imgs/sites/article/info-box-leaf.svg) 50%/contain no-repeat;mask:url(../imgs/sites/article/info-box-leaf.svg) 50%/contain no-repeat}.html-editor-page>.compiler-intro>.container .info-box>:not(h3){text-align:left}.html-editor-page>.compiler-intro>.container .info-box>p:has(>img){text-align:center}.html-editor-page>.compiler-intro>.container .info-box>.syntax>pre>code{background-color:var(--article-infobox-hljs-bg)}.html-editor-page>.compiler-intro>.container .syntax{border-radius:3px}.html-editor-page>.compiler-intro>.container .syntax code{background-color:var(--article-hljs-bg);border-radius:3px;margin-bottom:16px;padding:16px;font-size:14px;line-height:24px}.html-editor-page>.compiler-intro>.container .syntax code::-webkit-scrollbar{width:8px!important;height:8px!important}.html-editor-page>.compiler-intro>.container .syntax code::-webkit-scrollbar-track{box-shadow:var(--scrollbar-track-box-shadow);border-left:1px solid var(--scrollbar-track-border);background:var(--scrollbar-track-bg)}.html-editor-page>.compiler-intro>.container .syntax code::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:8px!important}.html-editor-page>.compiler-intro>.container .syntax code::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.html-editor-page>.compiler-intro>.container .syntax code::-webkit-scrollbar-corner{background-color:#0000}@media screen and (width>=376px){.html-editor-page>.compiler-code>.container>.input>.input-header>.left>.reset-button,.html-editor-page>.compiler-code>.container>.input>.input-header>.left>.theme-button{margin-left:10px}.html-editor-page>.compiler-code>.container>.input>.input-header>.right>.run-button{margin:0 10px}}@media screen and (width>=576px){.html-editor-page>.compiler-header>.container{padding:40px 0 30px}.html-editor-page>.compiler-header>.container>div>a,.html-editor-page>.compiler-header>.container>div>a>img{width:135px;height:45px}.html-editor-page>.compiler-header>.container>h1{height:25px;font-size:16px;line-height:25px}.html-editor-page>.compiler-code{margin-top:0}.html-editor-page>.compiler-code>.container{width:95%}.html-editor-page>.compiler-code>.container>.input>.input-content{height:calc(100vh - 470px)}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor{font-size:15px;line-height:20px}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor>.ace_scrollbar::-webkit-scrollbar{width:8px!important;height:8px!important}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor>.ace_scrollbar::-webkit-scrollbar-track{box-shadow:var(--scrollbar-track-box-shadow);border-left:1px solid var(--scrollbar-track-border);background:var(--scrollbar-track-bg)}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor>.ace_scrollbar::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:8px!important}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor>.ace_scrollbar::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.html-editor-page>.compiler-code>.container>.input>.input-content>.ace_editor>.ace_scrollbar::-webkit-scrollbar-corner{background-color:#0000}.html-editor-page>.compiler-code>.container>.output>.output-content::-webkit-scrollbar{width:8px!important;height:8px!important}.html-editor-page>.compiler-code>.container>.output>.output-content::-webkit-scrollbar-track{box-shadow:var(--scrollbar-track-box-shadow);border-left:1px solid var(--scrollbar-track-border);background:var(--scrollbar-track-bg)}.html-editor-page>.compiler-code>.container>.output>.output-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:8px!important}.html-editor-page>.compiler-code>.container>.output>.output-content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.html-editor-page>.compiler-code>.container>.output>.output-content::-webkit-scrollbar-corner{background:var(--scrollbar-corner-bg);background-color:#0000}.html-editor-page>.compiler-intro>.container{width:95%;padding:40px 30px}.html-editor-page>.compiler-intro>.container>h2{font-size:28px}.html-editor-page>.compiler-intro>.container>h3{font-size:26px}.html-editor-page>.compiler-intro>.container p{line-height:32px}.html-editor-page>.compiler-intro>.container table tr>td,.html-editor-page>.compiler-intro>.container table tr>th{padding:5px 15px}.html-editor-page>.compiler-intro>.container table tr>td:first-child,.html-editor-page>.compiler-intro>.container table tr>th:first-child{width:30%}.html-editor-page>.compiler-intro>.container .syntax code{font-size:16px}}@media screen and (width>=768px){.html-editor-page>.compiler-intro>.container{padding:40px 35px}}@media screen and (width>=992px){.html-editor-page{padding-bottom:50px;overflow:hidden}.html-editor-page:before{height:1000px}.html-editor-page>.compiler-code>.container{box-shadow:none;display:flex}.html-editor-page>.compiler-code>.container>.input,.html-editor-page>.compiler-code>.container>.output{min-width:300px;box-shadow:var(--box-shadow2)}.html-editor-page>.compiler-code>.container>.input{border-bottom-right-radius:8px;border-bottom-left-radius:8px;width:100%}.html-editor-page>.compiler-code>.container>.input>.input-content{height:calc(100vh - 240px);min-height:300px}.html-editor-page>.compiler-code>.container>.output{border-top:1px solid var(--border-transparent-black2);border-top-left-radius:8px;border-top-right-radius:8px;width:100%;margin-left:12px}.html-editor-page>.compiler-code>.container>.output>.output-header{border-top-left-radius:8px;border-top-right-radius:8px;justify-content:flex-start;height:50px;padding:0 15px;font-size:16px;line-height:50px}.html-editor-page>.compiler-code>.container>.output>.output-header>div{width:auto;padding:0 20px;font-weight:600}.html-editor-page>.compiler-code>.container>.output>.output-header>.console{margin-left:10px}.html-editor-page>.compiler-code>.container>.output>.output-content{height:calc(100vh - 240px)}.html-editor-page>.compiler-code>.container>.output>.output-content>pre{padding:25px 0 0 30px}.html-editor-page>.compiler-list>.container>ul{-moz-column-gap:24px;gap:18px 24px}.html-editor-page>.compiler-list>.container>ul>li>a{text-align:center;width:150px;height:44px;font-size:16px;line-height:44px;display:flex}.html-editor-page>.compiler-list>.container>ul>li>a>i{margin-left:10px}.html-editor-page>.compiler-list>.container>ul>li>a>span{margin-left:10px;font-weight:500;display:inline-block}.html-editor-page>.compiler-intro>.container{width:900px;padding:45px}.html-editor-page>.compiler-intro>.container>h3{line-height:36px}.html-editor-page>.compiler-intro>.container>h4{line-height:30px}}@media screen and (width>=1400px){.html-editor-page>.compiler-code>.container,.html-editor-page>.compiler-header>.container{width:90%}.html-editor-page>.compiler-list>.container{width:70%}}