.hero-title {margin: 0;font-size:65px;font-weight: bold;color: #333333;line-height: 1;}
.hero-title span{color:#FE5400;text-align: justify;line-height: 30px;margin:14px 0 12px 0;}
.editor-wrap {overflow: hidden;}
.main-container {display: flex;flex-direction: row;height: 510px;overflow: hidden;padding: 20px 0 0 0;gap: 0;}
.pane {background: #fff;border-radius: var(--radius);box-shadow: var(--shadow-sm);display: flex;
  flex-direction: column;overflow: hidden;border: 1px solid var(--border-color);min-height: 0;
}
.pane-header {height: 49px;padding: 0 12px;border-bottom: 1px solid var(--border-color);display: flex;
  align-items: center;justify-content: space-between;background: #f8f9fa;flex-shrink: 0;gap: 8px;
}
.pane-title {font-size: 14px;color: #999999;white-space: nowrap;}
.actions {display: flex;gap: 6px;align-items: center;flex-wrap: nowrap;overflow: hidden;}
.actions button {border-radius:15px;border: 1px solid #E8E8E8;background: #FFFFFF;color: #333333;
   padding: 5px 10px;font-size: 14px;cursor: pointer;
  transition: all 0.2s ease;display: inline-flex;align-items: center;gap:3px;white-space: nowrap;
}
.actions .btn-primary {background:#5F7F50;color: #fff;border: none;}
.actions .btn-primary:hover {background: var(--green-dark);}
.actions .btn-primary:disabled {opacity: .65;cursor: wait;}
.actions .btn-primary.is-loading b {width:12px;height:12px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;background:none;animation:runner-spin .7s linear infinite;}
.language-picker {display:inline-flex;position:relative;align-items:center;}
.language-native-select {position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.actions .language-trigger {height:32px;min-width:126px;padding:0 10px;border:1px solid #E5E7E2;border-radius:16px;background:#fff;color:#333;gap:7px;justify-content:flex-start;}
.actions .language-trigger:hover,.actions .language-trigger.open {border-color:#789269;background:#f7faf5;box-shadow:0 0 0 3px rgba(95,127,80,.1);}
.language-dot {width:7px;height:7px;border-radius:50%;background:#FCBE00;box-shadow:0 0 0 3px rgba(252,190,0,.16);flex:none;}
.language-arrow {width:6px;height:6px;margin-left:auto;border-right:1.5px solid #777;border-bottom:1.5px solid #777;transform:rotate(45deg) translateY(-2px);transition:transform .2s;}
.language-trigger.open .language-arrow {transform:rotate(225deg) translate(-1px,-1px);}
.language-menu {position:fixed;z-index:10020;display:none;width:276px;max-height:330px;padding:8px;overflow:auto;border:1px solid #E5E7E2;border-radius:8px;background:#fff;box-shadow:0 12px 32px rgba(35,42,31,.18);grid-template-columns:1fr 1fr;gap:4px;}
.language-menu.open {display:grid;animation:language-menu-in .16s ease-out;}
.actions .language-menu button {width:100%;height:42px;padding:0 10px;border:0;border-radius:6px;background:transparent;justify-content:space-between;color:#333;}
.actions .language-menu button:hover {background:#f5f7f3;color:#45613a;}
.actions .language-menu button.active {background:#eef4eb;color:#45613a;font-weight:600;}
.language-menu button.active::before {content:'';width:6px;height:6px;border-radius:50%;background:#5F7F50;flex:none;}
.language-menu button.active span {margin-left:-3px;}
.language-menu small {color:#aaa;font-size:11px;font-weight:400;}
.runner-output {box-sizing:border-box;width:100%;height:100%;margin:0;padding:20px;overflow:auto;background:#171a1f;color:#e8eaed;font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;}
.runner-loading {box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fbfcfa;color:#333;}
.runner-loading strong {margin-top:18px;font-size:16px;font-weight:600;}
.runner-loading p {margin:7px 0 0;color:#999;font-size:13px;}
.runner-spinner {position:relative;width:48px;height:48px;animation:runner-spin 1.1s linear infinite;}
.runner-spinner span {position:absolute;border-radius:50%;background:#5F7F50;}
.runner-spinner span:nth-child(1) {width:13px;height:13px;left:18px;top:0;}
.runner-spinner span:nth-child(2) {width:10px;height:10px;right:2px;bottom:7px;opacity:.7;}
.runner-spinner span:nth-child(3) {width:8px;height:8px;left:3px;bottom:9px;opacity:.4;}
@keyframes runner-spin {to {transform:rotate(360deg);}}
@keyframes language-menu-in {from {opacity:0;transform:translateY(-5px);}to {opacity:1;transform:translateY(0);}}
.auto-run-label {display: inline-flex;align-items: center;gap:10px;font-size: 14px;
  color: #999999;cursor: pointer;white-space: nowrap;user-select: none;
}
.zdyx{gap:6px;}
.auto-run-label input { accent-color: var(--green); cursor: pointer; }
.pane-content {flex: 1;position: relative;overflow: hidden;min-height: 0;}
.btn-wb b{background:url(../image/icon25.png) no-repeat;width:16px ;height:15px ;background-size: contain; }
.btn-down b{background:url(../image/icon26.png) no-repeat;width:14px ;height: 15px;background-size: contain; }
.btn-cz b{background:url(../image/icon27.png) no-repeat;width:15px ;height:16px ;background-size: contain; }
.btn-primary b{background:url(../image/icon28.png) no-repeat;width:8px ;height:8px ;background-size: contain; }

.CodeMirror {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  height: 100% !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;line-height: 27px;
}
.CodeMirror-vscrollbar,.CodeMirror-hscrollbar{
  scrollbar-width: thin; 
  scrollbar-color: #C8C8C8 #FFFFFF; 
}
.CodeMirror-vscrollbar::-webkit-scrollbar{width: 4px;  }
.CodeMirror-vscrollbar::-webkit-scrollbar-track{background: #FFFFFF; }
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb{background: #C8C8C8; border-radius: 4px;}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover{background: #FCBE00; }
.pane-content iframe {width: 100%;height: 100%;border: none;display: block;background: #fff;}
.gutter {background-color: transparent;background-repeat: no-repeat;background-position: 50%;flex-shrink: 0;}
.gutter:hover { background-color: rgba(0,0,0,0.04); }
/* .gutter.gutter-horizontal {cursor: col-resize;width: 10px !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="20" viewBox="0 0 4 20"><circle cx="2" cy="4" r="1.5" fill="%23c7c7cc"/><circle cx="2" cy="10" r="1.5" fill="%23c7c7cc"/><circle cx="2" cy="16" r="1.5" fill="%23c7c7cc"/></svg>');
} */
.screens b{background:url(../image/icon29.png) no-repeat;width:14px ;height:14px ;background-size: contain; }
.gutter.gutter-vertical {cursor: row-resize;height: 10px !important;}
.pane.fullscreen {position: fixed !important;inset: 0;width: 100vw !important;height: 100vh !important;z-index: 9999;border-radius: 0;border: none;}
.kbd {display: inline-block;padding: 1px 5px;background: rgba(255,255,255,0.2);border-radius: 4px;font-size: 11px;font-family: ui-monospace, monospace;color: #fff;}
#framesize {font-size:14px;color:#FF0000;margin-left:4px;}
.sec-dis{margin:0 20px 0 15px;font-size: 16px;color: #333333;}
.secdisp{margin:20px 0 0 0;}
.sectleps{margin:0;}
.history ul {margin: 0;padding-left: 20px;font-size: 16px;color: #333333;}
.history li { margin-bottom:12px;font-size: 16px;color: #333333;}
.history li::marker {color:#E7E7E7;font-size: 1.1em;}
.secdis-item{margin:24px 0 0 0;}

.jbshowmore{position: relative;overflow: hidden;z-index: 1;width: 951px;height: 43px;background: #FAFAFA;
  border-radius: 23px;border: 1px solid #F3F3F3;margin: 25px auto 0 auto;font-size: 16px;color: #999999;
  text-decoration: none;cursor: pointer;transition: color 0.2s ease-in, border-color 0.2s ease-in;
}
.jbshowmore::before{content: "";position: absolute;left: 50%;transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;width: 140%;height: 180%;background-color: rgba(0, 0, 0, 0.05);border-radius: 50%;
  display: block;transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);z-index: -1;
}
.jbshowmore::after{content: "";position: absolute;left: 55%;transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;width: 160%;height: 190%;background-color: #FCBE00;border-radius: 50%;
  display: block;transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);z-index: -1;
}
.jbshowmore:hover{color: #FFFFFF;border-color: #FCBE00;text-decoration: none;background: #FAFAFA;}
.jbshowmore:hover::before{top: -35%;background-color: #FCBE00;transform: translateX(-50%) scaleY(1.3) scaleX(0.8);}
.jbshowmore:hover::after{top: -45%;background-color: #FCBE00;transform: translateX(-50%) scaleY(1.3) scaleX(0.8);}
.jbshowmore b{position: relative;z-index: 1;background: url(../image/icon13.png) no-repeat;width: 20px;height: 20px;
  background-size: contain;margin: 0 0 0 4px;
}
.jbshowmore:hover b{background: url(../image/icon14.png) no-repeat;background-size: contain;}
.jbshowmore span{position: relative;z-index: 1;}

@media (max-width: 1430px) and (min-width: 901px) {
  .idxbd .container { width: calc(100% - 32px); }
  .main-left { width: calc(100% - 380px); min-width: 0; }
  .main-right { width: 350px; }
}

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .idxbd .container,
  .container,
  .site-footer .container { width: 100%; }
  .site-header { height: 72px; }
  .site-header .container { gap: 18px; padding: 0 14px; overflow: hidden; }
  .logo { width: 204px; height: 48px; }
  .nav { flex: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; font-size: 16px; padding: 5px 12px; }
  .hero-bg { height: 900px; }
  .con-top { padding: 40px 0 24px; }
  .hero-title { font-size: 48px; }
  .main-grid { grid-template-columns: minmax(0, 1fr); padding: 0 14px; gap: 22px; }
  .main-left,
  .main-right { width: 100%; min-width: 0; }
  .main-container { flex-direction: column; height: 760px; }
  .card-grid,
  .card-grids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .right-top { height: auto; max-height: none; }
  .footer-grid { margin: 0; padding: 0 20px 28px; gap: 24px; }
  .footer-col ul { width: auto; grid-auto-flow: row; grid-template-rows: none; }
  .footer-bottom { padding: 24px 20px 28px; }
  .jbshowmore { width: calc(100% - 32px); }
}

@media (max-width: 560px) {
  .site-header .container { padding: 0 10px; gap: 12px; }
  .logo { width: 170px; height: 40px; }
  .nav a { font-size: 14px; padding: 5px 10px; }
  .con-top { padding: 34px 12px 22px; }
  .hero-title { font-size: 38px; }
  .hero-subtitle { margin-top: 16px; padding: 0 12px; font-size: 14px; line-height: 1.7; }
  .main-grid { padding: 0 10px; }
  .main-container { height: 720px; padding-top: 12px; }
  .pane-header { height: auto; min-height: 49px; padding: 8px 10px; align-items: flex-start; }
  .actions { overflow-x: auto; max-width: calc(100vw - 94px); padding-bottom: 2px; }
  .actions .btn-text { display: none; }
  .actions .btn-primary .btn-text { display: inline; }
  .kbd { display: none; }
  .section-title { margin-left: 14px; margin-right: 14px; font-size: 18px; }
  .card-grid,
  .card-grids { grid-template-columns: 1fr; gap: 12px; margin: 18px 12px 0; }
  .cdlai-tabs { max-width: calc(100vw - 120px); overflow-x: auto; }
  .itemd-right { display: none; }
  .itemd-left { margin-right: 16px; }
  .itemdl-down { align-items: flex-start; gap: 10px; }
  .itdl-lists { gap: 10px; flex-wrap: wrap; }
  .itdl-tab { display: none; }
  .footer-grid { flex-direction: column; }
  .footer-col { width: 100%; }
  .footer-col:nth-child(2) { margin-right: 0; }
  .fotbot-top,
  .fotgh { flex-wrap: wrap; justify-content: center; }
}

.legacy-home-static{display:none!important}
.home-featured-articles .card-grid{grid-template-columns:1fr}
.home-featured-articles .article-list{width:100%}
.home-featured-articles .section-title{padding:8px 8px 10px;margin-bottom:14px}
.home-featured-articles .section-title>.sectle-left{gap:18px;flex-wrap:wrap}
.home-featured-articles .section-title>.sectle-left>.sectle-left{flex:0 0 auto}
.home-featured-articles .cdlai-tabs{margin-left:0;gap:14px;flex-wrap:wrap}
.home-featured-articles .cdlai-tabs div{padding:7px 17px;white-space:nowrap}
@media(max-width:900px){
  .home-featured-articles .section-title>.sectle-left{gap:14px}
  .home-featured-articles .cdlai-tabs{gap:10px;max-width:none;overflow:visible}
  .home-featured-articles .cdlai-tabs div{padding:6px 13px}
}