/* HTML 编辑器：工具栏 + 代码区 + 预览 + 控制台 */
.he-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem}
.he-auto{margin:0}
.he-example{width:auto;max-width:11rem}

.he-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.he-code{min-width:0}
textarea.he-area{display:block;width:100%;height:26rem;padding:.75rem .875rem;border-radius:.5rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:13.5px;line-height:1.7;
  white-space:pre;resize:vertical;tab-size:2}

.he-preview{display:flex;flex-direction:column;min-width:0;border:1px solid #eef1f5;border-radius:.5rem;overflow:hidden}
.he-preview-head{display:flex;align-items:center;gap:.5rem;padding:.4rem .625rem;background:#fafbfd;border-bottom:1px solid #eef1f5;font-size:13px;color:#5b6675}
.he-frame{flex:1;width:100%;height:26rem;border:0;background:#fff}
.he-preview:fullscreen{border:0;border-radius:0}
.he-preview:fullscreen .he-frame{height:calc(100vh - 2.1rem)}

.he-console{margin-top:.875rem;border:1px solid #eef1f5;border-radius:.5rem;overflow:hidden}
.he-console-head{display:flex;align-items:center;gap:.5rem;padding:.4rem .625rem;background:#fafbfd;border-bottom:1px solid #eef1f5;font-size:13px;color:#5b6675}
.he-console-body{max-height:11rem;overflow:auto;padding:.5rem .625rem;background:#0f172a;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.7}
.he-line{display:flex;gap:.5rem;color:#cbd5e1;word-break:break-all}
.he-line.is-error{color:#fca5a5}
.he-line.is-warn{color:#fcd34d}
.he-line.is-sys{color:#64748b}
.he-line .he-line-no{flex:0 0 2rem;color:#475569;text-align:right}

.he-notes li+li{margin-top:.375rem}
.he-notes kbd{vertical-align:.0625rem}

@media (max-width:991.98px){
  .he-wrap{grid-template-columns:1fr}
  textarea.he-area,.he-frame{height:18rem}
}