.article-code.has-preview .preview-tabs{display:flex;gap:var(--cf-space-050);overflow-x:auto;padding:var(--cf-space-150) var(--cf-space-300) 0;border-bottom:1px solid var(--cf-color-border);background:var(--cf-color-surface-raised);scrollbar-width:thin}.article-code.has-preview .preview-tab{flex-shrink:0;margin:0 0 -1px;padding:var(--cf-space-150) var(--cf-space-300);border:1px solid rgba(0,0,0,0);border-bottom:0;border-radius:var(--cf-radius-100) var(--cf-radius-100) 0 0;background:none;color:var(--cf-color-text-tertiary);font:inherit;font-family:var(--cf-font-mono);font-size:var(--cf-font-size-275);cursor:pointer}.article-code.has-preview .preview-tab:hover{color:var(--cf-color-text)}.article-code.has-preview .preview-tab[aria-selected=true]{border-color:var(--cf-color-border);background:var(--cf-color-code-bg);color:var(--cf-color-text-strong)}.article-code.has-preview .preview-tab:focus-visible{outline:2px solid var(--cf-color-focus-ring);outline-offset:-2px}.article-code.has-preview .preview-code pre{max-height:560px;overflow:auto}.article-code.has-preview .preview-result{border-top:1px solid var(--cf-color-border)}.article-code.has-preview .preview-result-bar{display:flex;align-items:center;gap:var(--cf-space-200);padding:var(--cf-space-150) var(--cf-space-350);border-bottom:1px solid var(--cf-color-border);background:var(--cf-color-surface-raised);font-size:var(--cf-font-size-250)}.article-code.has-preview .preview-result-title{color:var(--cf-color-text-secondary);font-weight:var(--cf-font-weight-semibold)}.article-code.has-preview .preview-result-status{flex:1 1;min-width:0;color:var(--cf-color-text-tertiary);font-size:var(--cf-font-size-225)}.article-code.has-preview .preview-result[data-state=error] .preview-result-status{color:var(--cf-color-danger)}.article-code.has-preview .preview-button{display:inline-flex;align-items:center;gap:var(--cf-space-100);padding:var(--cf-space-050) var(--cf-space-200);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-full);background:var(--cf-color-surface);color:var(--cf-color-text-secondary);font:inherit;font-size:var(--cf-font-size-225);font-weight:var(--cf-font-weight-semibold);white-space:nowrap;cursor:pointer}.article-code.has-preview .preview-button .editor-icon{width:12px;height:12px}.article-code.has-preview .preview-button:hover{border-color:var(--cf-color-border-hover);color:var(--cf-color-text)}.article-code.has-preview .preview-button:focus-visible{outline:2px solid var(--cf-color-focus-ring);outline-offset:2px}.article-code.has-preview .preview-frame{position:relative;background:var(--cf-color-surface)}.article-code.has-preview .preview-frame iframe{display:block;width:100%;border:0;background:rgba(0,0,0,0)}.article-code.has-preview .preview-frame.has-error{display:flex;flex-direction:column}.article-code.has-preview .preview-frame.has-error iframe{position:absolute;inset:0;visibility:hidden}.article-code.has-preview .preview-frame.has-error .preview-error{flex:1 1}.article-code.has-preview .preview-error{display:flex;flex-direction:column;gap:var(--cf-space-100);padding:var(--cf-space-300) var(--cf-space-350);border-left:3px solid var(--cf-color-danger);background:var(--cf-color-danger-subtle);color:var(--cf-color-text);font-size:var(--cf-font-size-300);line-height:var(--cf-line-height-150)}.article-code.has-preview .preview-error strong{color:var(--cf-color-danger);font-weight:var(--cf-font-weight-semibold)}.article-code.has-preview .preview-error code{font-family:var(--cf-font-mono);font-size:var(--cf-font-size-300);white-space:pre-wrap;overflow-wrap:anywhere;background:none;padding:0}.article-code.has-preview .preview-error span{color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-275)}.article-code.has-preview .preview-placeholder{margin:0;padding:var(--cf-space-300) var(--cf-space-350);color:var(--cf-color-text-tertiary);font-size:var(--cf-font-size-300)}.article-code.has-preview .preview-console:is(#cf-editor,*){max-height:180px;overflow:auto;border-top:1px solid var(--cf-color-border)}.article-code.has-preview .preview-editor-bar:is(#cf-editor,*){border-top:0}.article-code.has-preview .preview-editor-loading{padding:var(--cf-space-300) var(--cf-space-350);color:var(--cf-color-text-tertiary);font-size:var(--cf-font-size-300)}@media(max-width:560px){.article-code.has-preview .preview-result-bar{padding-inline:var(--cf-space-300)}.article-code.has-preview .preview-code pre{max-height:420px}}