:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--space: 1em;--radius: .75em;--shadow: 0 .15em .4em rgba(0, 0, 0, .05)}body:not(.code-area):lang(en){font-family:sans-serif}body:not(.code-area):lang(zh){font-family:Noto Sans SC,sans-serif}.page{height:100vh;display:flex;flex-direction:column;overflow:hidden}.title{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:var(--space);background-color:#838383;color:#fff;flex-shrink:0}.title-text{display:flex;flex-direction:row;gap:.3em}.title-components{display:flex;flex-direction:row;align-items:center;gap:.5em}.title h1{font-size:1.2em;font-family:sans-serif}.icon-link{width:2em;height:2em;display:flex;align-items:center;justify-content:center;background:#ebebeb;border-radius:1em}.icon-link a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.icon-link svg{width:1.5em;height:1.5em}.layout{display:flex;flex:auto;gap:var(--space);padding:var(--space);box-sizing:border-box;overflow:hidden}.right-column{flex:1;display:flex;max-width:50vw;flex-direction:column;gap:var(--space);overflow:hidden}.config-area,.code-area,.preview-area{flex:1;background:#f7f7f7;border-radius:var(--radius);padding:var(--space);box-shadow:var(--shadow);overflow:hidden}.code-area{display:flex;flex-direction:column;background:#fff}.code-area .code-area-head{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:.2em}.code-area .code-area-head button{margin-left:.5em}.code-area .code-block{flex:auto;overflow:auto}.preview-area{flex:0 0 300px;background:#fafafa;height:300px}.preview-area .preview-iframe-wrapper{display:flex;flex-direction:column;align-items:center;border:1px solid #ddd;height:auto}.preview-area iframe{width:450px;height:210px;border:none}h2{font-size:1.25em;font-weight:700;margin-top:0;margin-bottom:.5em}.code-block{white-space:pre-wrap;font-size:.9em;font-family:Consolas,monospace}.config-area{display:flex;flex-direction:column;overflow:auto}.input-box{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #e5e5e5}.input-box:first-of-type{border-top:1px solid #e5e5e5}.input-box>span,.input-box>label{display:inline-flex;align-items:center;min-width:120px;font-size:14px;color:#444}.input-box>label input[type=checkbox]{margin-right:6px}.input-box input[type=text],.input-box select{flex:1;padding:6px 8px;font-size:14px;border:1px solid #ccc;border-radius:4px}.config-social{margin-top:16px}.config-social button{padding:6px 12px;margin-top:6px;border:1px solid #ccc;background:#f7f7f7;border-radius:4px;cursor:pointer}.social-item{display:flex;flex-direction:column;padding:12px 0;border-bottom:1px solid #e5e5e5}.social-item:first-of-type{border-top:1px solid #e5e5e5}.social-item input[type=text]{width:90%;padding:6px 8px;margin-bottom:10px;font-size:14px;border:1px solid #ccc;border-radius:4px}.social-item label{display:flex;align-items:center;font-size:14px;margin-bottom:10px;color:#444}.social-item label input[type=checkbox]{margin-right:6px}.social-item button{align-self:flex-start;padding:6px 12px;border:1px solid #ccc;background:#f7f7f7;border-radius:4px;cursor:pointer;font-size:14px}.config-area ul{font-size:12px;padding-left:20px}.config-area ul code{font-family:consolas;background-color:#d1d1d1}code[class*=language-],pre[class*=language-]{color:#393a34;font-family:Consolas,Bitstream Vera Sans Mono,Courier New,Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;font-size:.9em;line-height:1.2em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre>code[class*=language-]{font-size:1em}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{background:#c1def1}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{background:#c1def1}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border:1px solid #dddddd;background-color:#fff}:not(pre)>code[class*=language-]{padding:1px .2em;background:#f8f8f8;border:1px solid #dddddd}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:green;font-style:italic}.token.namespace{opacity:.7}.token.string{color:#a31515}.token.punctuation,.token.operator{color:#393a34}.token.url,.token.symbol,.token.number,.token.boolean,.token.variable,.token.constant,.token.inserted{color:#36acaa}.token.atrule,.token.keyword,.token.attr-value,.language-autohotkey .token.selector,.language-json .token.boolean,.language-json .token.number,code[class*=language-css]{color:#00f}.token.function{color:#393a34}.token.deleted,.language-autohotkey .token.tag{color:#9a050f}.token.selector,.language-autohotkey .token.keyword{color:#00009f}.token.important{color:#e90}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.class-name,.language-json .token.property{color:#2b91af}.token.tag,.token.selector{color:maroon}.token.attr-name,.token.property,.token.regex,.token.entity{color:red}.token.directive.tag .tag{background:#ff0;color:#393a34}.line-numbers.line-numbers .line-numbers-rows{border-right-color:#a5a5a5}.line-numbers .line-numbers-rows>span:before{color:#2b91af}.line-highlight.line-highlight{background:#c1def133;background:-webkit-linear-gradient(left,rgba(193,222,241,.2) 70%,rgba(221,222,241,0));background:linear-gradient(to right,#c1def133 70%,#dddef100)}