:root{--cf-primary:var(--main-primary);--cf-bg:#fff;--cf-bg-secondary:#f8fafc;--cf-bg-hover:#f1f5f9;--cf-text:#1e293b;--cf-text-muted:#64748b;--cf-border:#e2e8f0;--cf-border-focus:var(--main-primary);--cf-shadow:0 1px 3px #0000000f;--cf-radius:var(--main-radius);--cf-radius-lg:var(--main-radius-lg);--cf-success:#10b981;--cf-error:#ef4444;--cf-warning:#f59e0b;--cf-line-bg:#f1f5f9;--cf-line-text:#94a3b8;--cf-line-border:#e2e8f0}._cf-container{gap:var(--main-space-3);padding-left:var(--main-space-2);padding-right:var(--main-space-2);flex-direction:column;display:flex}._cf-hidden{display:none!important}._cf-panels{gap:var(--main-space-3);grid-template-columns:1fr 1fr;display:grid}._cf-panel{background:var(--cf-bg);border-radius:var(--cf-radius-lg);border-style:solid;border-width:1px;border-color:var(--cf-border);box-shadow:var(--cf-shadow);box-sizing:border-box;flex-direction:column;max-width:100%;display:flex;overflow:hidden}._cf-panel-header{padding:var(--main-space-2) var(--main-space-3);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cf-border);background:var(--cf-bg-secondary);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}._cf-panel-title{font-size:var(--main-text-xs);color:var(--cf-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}@media (max-width:768px){._cf-container{padding-left:1rem;padding-right:1rem}._cf-panels{grid-template-columns:1fr}}._cf-hub{width:100%;max-width:640px;margin:0 auto}._cf-hub-grid{gap:var(--main-space-3);grid-template-columns:repeat(2,1fr);display:grid}._cf-lang-card{align-items:center;gap:var(--main-space-3);padding:var(--main-space-4) var(--main-space-4);background:var(--cf-bg);border-radius:var(--cf-radius-lg);border-style:solid;border-width:1px;border-color:var(--cf-border);box-shadow:var(--cf-shadow);color:var(--cf-text);cursor:pointer;text-decoration:none;transition:box-shadow .15s,border-color .15s;display:flex}._cf-lang-card:hover{border-color:var(--cf-primary);box-shadow:0 2px 8px #6366f11f}._cf-lang-icon{flex-shrink:0}._cf-lang-badge{border-radius:var(--cf-radius);width:2.5rem;height:2.5rem;font-size:var(--main-text-xs);font-weight:700;font-family:var(--main-font-mono);text-transform:uppercase;letter-spacing:.02em;justify-content:center;align-items:center;display:flex}._cf-lang-js{color:#a16207;background:#facc1526}._cf-lang-html{color:#dc2626;background:#ef44441a}._cf-lang-css{color:#2563eb;background:#3b82f61a}._cf-lang-sql{color:#7c3aed;background:#a855f71a}._cf-lang-py{color:#16a34a;background:#22c55e1a}._cf-lang-php{color:#6366f1;background:#6366f11a}._cf-lang-info{flex-direction:column;flex:1;gap:.125rem;min-width:0;display:flex}._cf-lang-name{font-size:var(--main-text-base);color:var(--cf-text);font-weight:600}._cf-lang-ext{font-size:var(--main-text-xs);color:var(--cf-text-muted);font-family:var(--main-font-mono)}._cf-lang-arrow{color:var(--cf-text-muted);opacity:0;flex-shrink:0;transition:opacity .15s}._cf-lang-card:hover ._cf-lang-arrow{opacity:1}@media (max-width:480px){._cf-hub-grid{grid-template-columns:1fr}}._cf-lang-nav{gap:var(--main-space-2);flex-wrap:wrap;display:flex}._cf-lang-chip{background:var(--cf-bg);border-radius:var(--cf-radius-lg);border-style:solid;border-width:1px;border-color:var(--cf-border);box-shadow:var(--cf-shadow);color:var(--cf-text-muted);font-size:var(--main-text-sm);cursor:pointer;align-items:center;gap:.5rem;padding:.4375rem .875rem;font-weight:500;text-decoration:none;transition:border-color .15s,box-shadow .15s,color .15s;display:inline-flex}._cf-lang-chip:hover{border-color:var(--cf-primary);color:var(--cf-text);box-shadow:0 2px 8px #6366f11a}._cf-lang-chip-active{border-color:var(--cf-primary);color:var(--cf-text);background:var(--cf-bg);box-shadow:0 0 0 1px var(--cf-primary);cursor:default}._cf-chip-badge{border-radius:var(--cf-radius);width:1.625rem;height:1.625rem;font-size:.5625rem;font-weight:700;font-family:var(--main-font-mono);text-transform:uppercase;letter-spacing:.02em;justify-content:center;align-items:center;display:inline-flex}._cf-chip-js{color:#a16207;background:#facc1526}._cf-chip-html{color:#dc2626;background:#ef44441a}._cf-chip-css{color:#2563eb;background:#3b82f61a}._cf-chip-sql{color:#7c3aed;background:#a855f71a}._cf-chip-py{color:#16a34a;background:#22c55e1a}._cf-chip-php{color:#6366f1;background:#6366f11a}._cf-chip-label{line-height:1}._cf-toolbar{justify-content:space-between;align-items:center;gap:var(--main-space-3);padding:var(--main-space-2) var(--main-space-3);background:var(--cf-bg);border-radius:var(--cf-radius-lg);border-style:solid;border-width:1px;border-color:var(--cf-border);box-shadow:var(--cf-shadow);flex-wrap:wrap;display:flex}._cf-toolbar-left,._cf-toolbar-right{align-items:center;gap:var(--main-space-2);flex-wrap:wrap;display:flex}._cf-toolbar-label{font-size:var(--main-text-xs);color:var(--cf-text-muted);white-space:nowrap;font-weight:500}._cf-btn{border-radius:var(--cf-radius);cursor:pointer;white-space:nowrap;border:none;align-items:center;gap:.375rem;font-family:inherit;display:inline-flex}._cf-btn:focus-visible{outline:2px solid var(--cf-primary);outline-offset:2px}._cf-btn-icon{color:var(--cf-text-muted);background:0 0;padding:.4375rem;transition:background-color .15s,color .15s}._cf-btn-icon:hover{background:var(--cf-bg-hover);color:var(--cf-text)}._cf-btn-danger:hover{color:var(--cf-error)}._cf-indent-group{align-items:center;gap:var(--main-space-2);display:flex}._cf-indent-options{border-radius:var(--cf-radius);border-style:solid;border-width:1px;border-color:var(--cf-border);display:flex;overflow:hidden}._cf-indent-btn{font-size:var(--main-text-xs);background:var(--cf-bg);color:var(--cf-text-muted);cursor:pointer;font-weight:500;font-family:var(--main-font-mono);border:none;border-right:1px solid;border-right-color:var(--cf-border);padding:.25rem .5rem;transition:background-color .15s,color .15s}._cf-indent-btn:last-child{border-right:none}._cf-indent-btn:hover{background:var(--cf-bg-hover)}._cf-indent-btn._cf-indent-active{background:var(--cf-primary);color:#fff}._cf-inline-options{align-items:center;gap:var(--main-space-2) var(--main-space-3);flex-wrap:wrap;display:flex}._cf-option-item{align-items:center;gap:var(--main-space-2);display:flex}._cf-option-label{font-size:var(--main-text-xs);color:var(--cf-text-muted);white-space:nowrap;font-weight:500}._cf-option-select{font-size:var(--main-text-xs);background:var(--cf-bg);color:var(--cf-text);border-style:solid;border-width:1px;border-color:var(--cf-border);border-radius:var(--cf-radius);cursor:pointer;outline:none;padding:.25rem .5rem;font-family:inherit}._cf-option-select:focus{border-color:var(--cf-primary)}@media (max-width:768px){._cf-toolbar{padding:var(--main-space-2)}._cf-lang-nav{gap:var(--main-space-1)}._cf-lang-chip{font-size:var(--main-text-xs);padding:.375rem .625rem}._cf-chip-badge{width:1.375rem;height:1.375rem;font-size:.5rem}._cf-chip-label{display:none}}._cf-editor-wrapper{height:600px;max-height:80vh;display:flex;position:relative;overflow:hidden}._cf-editor-wrapper *,._cf-output-wrapper *{box-sizing:border-box}._cf-line-numbers{background:var(--cf-line-bg);border-right-style:solid;border-right-width:1px;border-right-color:var(--cf-line-border);-webkit-user-select:none;user-select:none;flex-shrink:0;width:3rem;overflow:hidden}._cf-line-numbers-inner{padding:var(--main-space-3) 0;font-family:var(--main-font-mono);color:var(--cf-line-text);text-align:right;white-space:nowrap;font-size:.875rem;line-height:1.625rem}._cf-line-numbers-inner span{height:1.625rem;padding-right:.5rem;line-height:1.625rem;display:block}._cf-line-numbers-inner span.is-active{color:var(--cf-primary);background:var(--cf-bg-secondary);font-weight:700}._cf-textarea{min-width:0;height:100%;padding:var(--main-space-3);resize:none;font-family:var(--main-font-mono);color:var(--cf-text);background:var(--cf-bg);-moz-tab-size:4;tab-size:4;white-space:pre;border:none;outline:none;flex:1 1 0;margin:0;font-size:.875rem;line-height:1.625rem;overflow:auto}._cf-textarea::placeholder{color:var(--cf-text-muted)}._cf-error-box{padding:var(--main-space-2) var(--main-space-3);background:#ef44440d;border-bottom:1px solid #ef444433;flex-shrink:0}._cf-error-header{font-size:var(--main-text-sm);color:var(--cf-error);margin-bottom:var(--main-space-1);align-items:center;gap:.375rem;font-weight:600;display:flex}._cf-error-message{font-family:var(--main-font-mono);font-size:var(--main-text-xs);color:var(--cf-text);white-space:pre-wrap;word-break:break-word;line-height:1.5}@media (max-width:768px){._cf-editor-wrapper{height:400px}._cf-textarea,._cf-line-numbers-inner{font-size:.8125rem}._cf-line-numbers{width:2.5rem}._cf-line-numbers-inner span{padding-right:.375rem}}._cf-output-wrapper{flex-direction:column;height:600px;max-height:80vh;display:flex;position:relative;overflow:hidden}._cf-prism-view{flex:1;width:100%;min-height:0;display:flex}._cf-prism-pre{min-width:0;height:100%;padding:var(--main-space-3);font-family:var(--main-font-mono);color:var(--cf-text);background:var(--cf-bg);-moz-tab-size:4;tab-size:4;white-space:pre;border:none;outline:none;flex:1 1 0;margin:0;font-size:.875rem;line-height:1.625rem;overflow:auto}._cf-prism-pre code{font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;background:0 0;padding:0}._cf-prism-pre .token.comment,._cf-prism-pre .token.prolog,._cf-prism-pre .token.doctype,._cf-prism-pre .token.cdata{color:#6a9955}._cf-prism-pre .token.punctuation{color:#393a34}._cf-prism-pre .token.property,._cf-prism-pre .token.tag,._cf-prism-pre .token.boolean,._cf-prism-pre .token.number,._cf-prism-pre .token.constant,._cf-prism-pre .token.symbol{color:#098658}._cf-prism-pre .token.selector,._cf-prism-pre .token.attr-name,._cf-prism-pre .token.string,._cf-prism-pre .token.char,._cf-prism-pre .token.builtin{color:#a31515}._cf-prism-pre .token.operator,._cf-prism-pre .token.entity,._cf-prism-pre .token.url{color:#d73a49}._cf-prism-pre .token.atrule,._cf-prism-pre .token.attr-value,._cf-prism-pre .token.keyword{color:#0070c1}._cf-prism-pre .token.function,._cf-prism-pre .token.class-name{color:#795e26}._cf-prism-pre .token.regex,._cf-prism-pre .token.important,._cf-prism-pre .token.variable{color:#e36209}._cf-prism-pre .token.important,._cf-prism-pre .token.bold{font-weight:700}._cf-prism-pre .token.italic{font-style:italic}._cf-cm-view{flex:1;width:100%;min-height:0;display:flex}._cf-cm-view .CodeMirror{height:100%;font-family:var(--main-font-mono);background:var(--cf-bg);color:var(--cf-text);flex:1;font-size:.875rem;line-height:1.625rem}._cf-cm-view .CodeMirror-gutters{background:var(--cf-line-bg);border-right-style:solid;border-right-width:1px;border-right-color:var(--cf-line-border)}._cf-cm-view .CodeMirror-linenumber{color:var(--cf-line-text);padding-right:.5rem;font-size:.875rem}._cf-cm-view .CodeMirror-cursor{border-left-color:var(--cf-text)}._cf-cm-view .CodeMirror-selected{background:#6366f126}._cf-cm-view .CodeMirror-focused .CodeMirror-selected{background:#6366f133}._cf-cm-view .CodeMirror-activeline-background{background:var(--cf-bg-hover)}._cf-empty-state{justify-content:center;align-items:center;gap:var(--main-space-3);color:var(--cf-text-muted);padding:var(--main-space-6);text-align:center;flex-direction:column;flex:1;display:flex}._cf-empty-state svg{opacity:.3}._cf-empty-state p{font-size:var(--main-text-sm);margin:0}@media (max-width:768px){._cf-output-wrapper{height:400px}._cf-prism-pre,._cf-prism-pre code,._cf-cm-view .CodeMirror,._cf-cm-view .CodeMirror-linenumber{font-size:.8125rem}}._cf-status-bar{padding:var(--main-space-2) var(--main-space-3);background:var(--cf-bg);border-radius:var(--cf-radius-lg);border-style:solid;border-width:1px;border-color:var(--cf-border);box-shadow:var(--cf-shadow);font-size:var(--main-text-xs);font-family:var(--main-font-mono);justify-content:space-between;align-items:center;min-height:2rem;display:flex}._cf-status-left,._cf-status-right{align-items:center;gap:var(--main-space-2);display:flex}._cf-status-indicator{align-items:center;gap:.375rem;font-weight:500;display:inline-flex}._cf-status-indicator svg{width:14px;height:14px}._cf-status-indicator.valid{color:var(--cf-success)}._cf-status-indicator.invalid{color:var(--cf-error)}._cf-status-indicator.empty,._cf-status-right span{color:var(--cf-text-muted)}._cf-status-sep{color:var(--cf-border)}@media (max-width:480px){._cf-status-bar{gap:var(--main-space-1);flex-wrap:wrap}}