.article-shell { max-width:940px; }
.article-meta { font-size:.85rem; color:#586a7e; }
.article-intro { border-bottom:1px solid #dce4ee; padding-bottom:24px; margin-bottom:32px; }
.article-toc { border:1px solid #dce4ee; background:#fff; padding:24px; border-radius:12px; }
.jd-seo .article-toc h2 { font:700 1rem system-ui,sans-serif; margin:0 0 12px; }
.article-toc ol { margin:0; padding:0; list-style:none; }
.article-tag { font-size:.75rem; text-transform:uppercase; letter-spacing:.09em; color:#a6411e; font-weight:700; }
.jd-seo .article-card { display:flex; flex-direction:column; }
.article-card p { flex:1; }
.jd-seo .article-card h2 { font-size:1.55rem; margin:16px 0; }
.article-card a { text-decoration:none; }
.article-card a:hover { text-decoration:underline; }
.jd-seo .article-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
.article-task { background:#edf1f7; padding:20px 24px; border-radius:10px; margin-block:20px; }
.article-task p:last-child { margin:0; }
.article-table { overflow:auto; margin-block:24px; }
.article-table table { width:100%; border-collapse:collapse; background:#fff; font-size:.94rem; }
.article-table th,.article-table td { padding:16px; border:1px solid #dce4ee; text-align:left; vertical-align:top; min-width:150px; }
.article-table th { background:#edf1f7; }
.article-table caption { text-align:left; font-weight:700; margin-bottom:12px; }
.jd-seo details { border:1px solid #dce4ee; border-radius:8px; padding:16px 20px; margin:20px 0; background:white; }
.jd-seo summary { cursor:pointer; font-weight:650; }
.jd-seo details p { margin:12px 0 0; }
.article-links { border-top:1px solid #dce4ee; margin-top:48px; padding-top:8px; }
.code-example { border:1px solid #cfdae7; border-radius:12px; overflow:hidden; margin:24px 0; background:white; box-shadow:0 8px 24px #142b4606; }
.code-example:focus-within { border-color:#5778a1; }
.code-label { padding:14px 20px; color:#1b365d; font-weight:650; font-size:.88rem; background:#f0f4f9; }
.jd-seo .code-example pre { margin:0; border-radius:0; font-size:.9rem; }
.code-editor { max-height:430px; overflow:auto; }
.code-editor .cm-editor { min-height:150px; }
.code-editor .cm-editor.cm-focused { outline:2px solid #597da7; outline-offset:-2px; }
.code-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid #e3e9f1; }
.jd-seo .code-actions button,.jd-seo .code-actions a { min-height:44px; padding:9px 14px; border-radius:5px; font:600 .85rem/1.5 system-ui,sans-serif; text-decoration:none; background:#edf1f7; color:#1b365d; }
.jd-seo .code-actions .code-run { background:#1b365d; color:white; }
.jd-seo .code-actions button:hover:not(:disabled),.jd-seo .code-actions a:hover { background:#dce5ef; color:#142b46; }
.jd-seo .code-actions .code-run:hover:not(:disabled) { background:#304f76; color:white; }
.code-actions button:focus-visible { outline:3px solid #b95b26; outline-offset:3px; }
.code-status { padding:0 18px 12px; font-size:.85rem; color:#586a7e; }
.code-results { border-top:1px solid #e3e9f1; }
.code-figures img,.code-figures svg { display:block; width:100%; height:auto; max-height:560px; object-fit:contain; background:white; }
.jd-seo .code-console { max-height:250px; white-space:pre-wrap; overflow-wrap:anywhere; background:#132b45; color:#f4f7fc; padding:18px; }
.code-console:empty { display:none; }
.code-help { font-size:.85rem; color:#586a7e; }
.jd-seo .code-dialog { width:min(500px,calc(100% - 32px)); padding:28px; border:1px solid #cfdae7; border-radius:12px; color:#243449; box-shadow:0 20px 70px #142b4640; }
.jd-seo .code-dialog h2 { margin-top:0; }
.code-dialog::backdrop { background:#10243b80; }
@media(max-width:600px) { .jd-seo .article-overview { grid-template-columns:1fr; } .article-table th,.article-table td { padding:10px; } .code-actions { padding:12px; gap:8px; } .code-label { padding:12px; } }