/*MainCodeEditorStyle*/.container{width: 1145px !important;}.code,.highlight code{white-space:pre;tab-size:2}.documentSection li,.post-body h3{color:#000!important}.dark .post-body p{color:#0d0d0de6!important}.static_page .item-post h1.entry-title{font-weight:900!important;font-size:29px!important;line-height:40px!important;text-align:left!important;margin:0!important;max-width:1100px!important}.post-inner-area{position:relative!important;float:left!important;width:100%!important;overflow:hidden!important;padding:0!important;box-sizing:border-box!important;margin:0 0 10px!important;background:0 0!important;border:none!important}.action-btn,.code,.gutter,.workspace{box-sizing:border-box}.workspace{max-width:1200px;margin:0 auto;padding:12px 0}.documentSection,.preview-wrap{margin-top:14px;overflow:hidden}.html-color{color:#ff6c43!important}.css-color{color:#7b96ff!important}.js-color{color:#f7df1e!important}.panes{background:#0b0c10;border:1px solid #171920;border-radius:10px;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}.code,.gutter,.highlight{overflow:auto}.pane{display:flex;flex-direction:column}.pane-header,.pane-title{align-items:center;display:flex}.pane+.pane{border-left:1px solid #1f2330}.pane-header{background:#11131a;color:#d1d5db;padding:8px 10px;justify-content:space-between;border-bottom:1px solid #1f2330}.pane-title{gap:8px;font-weight:700}.pane-title i{font-size:18px}.pane-title .html-icon{color:#e34f26}.pane-title .css-icon{color:#264de4}.pane-title .js-icon{color:#f7df1e}.documentTitle,.pane-actions,.preview-head,.preview-title{display:flex;align-items:center;gap:8px}.preview-head i{font-size:18px;color:#39e778}.code,.gutter,.highlight code{font-size:13px;line-height:1.6}.pane-header:hover{background:#161822}.code-area{position:relative;display:flex;height:340px}.code-area::before{content:'';position:absolute;inset:0;background:linear-gradient(to right,#0f1117,transparent 10px);pointer-events:none;z-index:2}.gutter{width:44px;background:#0c0e14;color:#6b7280;text-align:right;padding:0 16px 12px 7px;border-right:1px solid #1f2330;overflow: hidden;}.code{padding: 0px 2px 0px 6px;}.highlight,.preview-head{padding:10px 12px}.code-wrap{position:relative;flex:1}.highlight{position:absolute;inset:0;background:var(--code-bg);display:none}.code{position:relative;z-index:1;width:100%;background:#0f1117;color:#e5e7eb;caret-color:#e5e7eb;border:0;outline:0;resize:none}.code:focus{box-shadow:inset 0 0 0 1px #6c5ce7;transition:box-shadow .2s}.code,.gutter,.highlight{height:100%}.code::-webkit-scrollbar,.gutter::-webkit-scrollbar,.highlight::-webkit-scrollbar{width:8px;height:8px}.code::-webkit-scrollbar-thumb,.gutter::-webkit-scrollbar-thumb,.highlight::-webkit-scrollbar-thumb{background:#3a3f4b;border-radius:8px;border:2px solid #0f1117}.code::-webkit-scrollbar-thumb:hover,.gutter::-webkit-scrollbar-thumb:hover,.highlight::-webkit-scrollbar-thumb:hover{background:#4a4f5b}.code::-webkit-scrollbar-track,.gutter::-webkit-scrollbar-track,.highlight::-webkit-scrollbar-track{background:0 0}.preview-wrap{border:1px solid #171920;border-radius:10px}.preview-head{background:#11131a;font-weight:700;color:#ffff;display:flex;justify-content:space-between;align-items:center}.action-btn,.open-new-tab{background:#20232b;padding:6px 12px;cursor:pointer;font-size:12px;align-items:center;gap:6px;transition:.2s;color:#e5e7eb;display:flex}.open-new-tab{border:1px solid #2f3340;border-radius:8px}.action-btn:hover,.open-new-tab:hover{background:#2a2d36;border-color:#3f4356;transform:translateY(-1px)}.action-btn:active,.open-new-tab:active{transform:translateY(0)}.preview iframe{width:100%;height:635px;border:0;display:block;background:#ffff}.action-btn{border:1px solid #2f3340;border-radius:8px}.action-btn i{font-size:14px}.action-btn.success{background:#14532d;border-color:#166534;color:#bbf7d0}.documentSection{background:#fff;border-radius:10px;width:100%;padding:clamp(16px,4vw,24px)}.note,.tip,.warning{padding:15px;margin:20px 0;border-radius:4px}.documentTitle::before,.related-title::before{content:'';display:block;width:4px;height:24px;background:linear-gradient(to bottom,#6c5ce7,#a178df);border-radius:2px}.documentSection h2{color:#000!important;border-bottom:1px solid #e0e0e0;padding-bottom:10px}.documentSection h3{font-size:1.4rem!important;margin:20px 0 10px!important}.note{background-color:#e7f3fe;border-left:4px solid #2196f3}.tip{background-color:#e7f7e7;border-left:4px solid #4caf50}.warning{background-color:#fff8e1;border-left:4px solid #ffc107}.related-pages{margin-top:24px;padding:clamp(16px,4vw,24px);overflow:hidden}.related-title{font-size:clamp(1.25rem, 3vw, 1.5rem);font-weight:700;color:#e5e7eb;margin:0 0 clamp(16px,4vw,24px);display:flex;align-items:center;gap:8px}@media (max-width:1000px){.workspace{padding:12px}.panes{grid-template-columns:1fr}.pane+.pane{border-left:none;border-top:1px solid #1f2330}}@media (max-width:768px){.static_page .item-post h1.entry-title{margin-top:4px!important;margin-left:11px!important;font-size:20px!important;line-height:21px!important}}@media (max-width:480px){.workspace{padding:8px}}
/* Tailwind CSS */ button,html{line-height:1.15}body,button,figure{margin:0}.bg-blue-600,.bg-blue-800,.bg-gray-200,.bg-gray-700,.bg-gray-800,.bg-white{--tw-bg-opacity:1}.transition,.transition-colors{transition-duration:150ms;transition-timing-function:cubic-bezier(0.4,0,0.2,1)}.hover\:shadow-xl:hover,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition,.transition-colors,.transition-transform{transition-timing-function:cubic-bezier(0.4,0,0.2,1)}a,button{color:inherit}*,::after,::before{box-sizing:border-box;box-sizing:border-box;border:0 solid currentColor;--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity));--tw-shadow:0 0 #0000;--tw-ring-inset:var(--tw-empty,);/*!*//*!*/--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59, 130, 246, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000}html{-moz-tab-size:4;tab-size:4;-webkit-text-size-adjust:100%}::-moz-focus-inner{border-style:none;padding:0}button{font-size:100%;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}button{background-color:transparent;background-image:none;padding:0;line-height:inherit}[role=button],button{cursor:pointer}.max-w-6xl{max-width:72rem}.mx-auto{margin-left:auto;margin-right:auto}.pt-4{padding-top:1rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-8{padding-bottom:2rem}.mb-8{margin-bottom:2rem}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.justify-center{justify-content:center}.gap-3{gap:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.rounded-full{border-radius:9999px}.bg-blue-800{background-color:rgba(30,64,175,var(--tw-bg-opacity))}.group:hover .group-hover\:text-white,.hover\:text-white:hover,.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.bg-blue-600{background-color:rgba(37,99,235,var(--tw-bg-opacity))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgba(59,130,246,var(--tw-bg-opacity))}.transition-colors{transition-property:background-color,border-color,color,fill,stroke}.bg-gray-200{background-color:rgba(229,231,235,var(--tw-bg-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgba(55,65,81,var(--tw-text-opacity))}.bg-gray-700{background-color:rgba(55,65,81,var(--tw-bg-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgba(229,231,235,var(--tw-text-opacity))}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.gap-6{gap:1.5rem}.bg-white{background-color:rgba(255,255,255,var(--tw-bg-opacity))}.bg-gray-800{background-color:rgba(31,41,55,var(--tw-bg-opacity))}.rounded-xl{border-radius:.75rem}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05)}.overflow-hidden{overflow:hidden}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.opacity{opacity:1}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter}.duration-300{transition-duration:.3s}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.w-full{width:100%}.h-48{height:12rem}.object-cover{object-fit:cover}.transition-transform{transition-property:transform;transition-duration:150ms}.p-4{padding:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-semibold{font-weight:600}.mt-2{margin-top:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}img{border-style:solid;display:block;vertical-align:middle;max-width:100%;height:auto}a{text-decoration:inherit}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}