/* 课件代码实验区：无外部依赖，兼容离线打开。 */
.code-playground { margin: 16px 0; min-width: 0; color: #17233d; text-align: left; }
.code-playground label { display: block; font: 600 18px/1.5 sans-serif; margin: 8px 0; }
.code-playground textarea { display: block; width: 100%; min-height: 150px; max-height: 420px; resize: vertical; padding: 14px; border: 1px solid #9db3ce; border-radius: 8px; background: #f7faff; color: #142b45; font: 21px/1.5 Consolas, monospace; box-sizing: border-box; tab-size: 2; }
.code-playground .play-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.code-playground button { padding: 9px 16px; border: 1px solid #abc0d8; border-radius: 8px; color: #183958; background: #edf4fc; font: 18px/1.4 sans-serif; cursor: pointer; }
.code-playground .play-run { color: white; background: #1765b5; }
.code-playground .play-note { font: 16px/1.5 sans-serif; color: #50627b; margin: 8px 0; }
.code-playground details { margin: 8px 0; }
.code-playground summary { cursor: pointer; font: 18px/1.5 sans-serif; color: #1859a5; }
.code-playground iframe { display: block; width: 100%; height: 240px; border: 1px solid #b6c6da; background: white; border-radius: 8px; }
.code-playground .play-placeholder { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 240px; border: 1px solid #b6c6da; border-radius: 8px; background: #fff; color: #65758b; font: 20px/1.5 sans-serif; }
.code-playground .play-log { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto; font: 17px/1.45 Consolas, monospace; padding: 10px; background: #eef2f6; margin: 8px 0; }
.code-playground [hidden] { display: none !important; }
.play-dialog { width: min(1280px, 94vw); max-width: 94vw; max-height: 92vh; padding: 20px; border: 1px solid #adc0d9; border-radius: 12px; overflow: auto; }
.play-dialog::backdrop { background: #17233dbb; }
.play-dialog .code-playground textarea { min-height: 220px; }
.play-dialog .code-playground iframe { height: 320px; }
.example-pair.playground-expanded { grid-template-columns: 1fr; }
.example-pair.playground-expanded > [hidden] { display: none; }
@media (min-width: 900px) {
  /* 预览区始终可见，尚未运行时显示占位框。 */
  .concept-layout.with-code:has(.play-result:not([hidden])) { grid-template-columns: 1fr; }
  .code-playground:has(> .play-result:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; clear: both; align-items: start; }
  .code-playground:has(> .play-result:not([hidden])) > * { grid-column: 1; min-width: 0; }
  .code-playground:has(> .play-result:not([hidden])) > .play-result { grid-column: 2; grid-row: 1 / span 8; }
  .code-playground .play-result::before { content: "运行结果与报错"; display: block; margin: 8px 0; font: 600 18px/1.5 sans-serif; }
  .code-playground .play-result iframe { height: 320px; }
  .code-playground .play-placeholder { height: 320px; }
  .play-dialog .code-playground iframe { height: 55vh; }
  .play-dialog .code-playground .play-placeholder { height: 55vh; }
}
.play-dialog > button { float: right; font-size: 18px; padding: 8px 16px; }
/* 透明输入层保留原生编辑能力；下层仅展示语法颜色，两层排版完全一致。 */
.code-playground .play-editor { position: relative; min-width: 0; background: #f7faff; border-radius: 8px; }
.code-playground .play-editor textarea,
.code-playground .play-colors { font: 21px/1.5 Consolas, monospace; letter-spacing: normal; text-align: left; tab-size: 2; white-space: pre; overflow-wrap: normal; word-break: normal; padding: 14px; border: 1px solid transparent; box-sizing: border-box; }
.code-playground .play-colors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: #142b45; border-radius: 8px; }
.code-playground .play-editor textarea { position: relative; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: #142b45; border-color: #9db3ce; overflow: scroll; scrollbar-gutter: stable; scrollbar-color: #6585ab #e3ebf5; scrollbar-width: auto; }
/* 加宽滚动条，便于投影时拖动；输入层滚动仍同步到语法高亮层。 */
.code-playground textarea::-webkit-scrollbar { width: 16px; height: 16px; }
.code-playground textarea::-webkit-scrollbar-track,
.code-playground textarea::-webkit-scrollbar-corner { background: #e3ebf5; }
.code-playground textarea::-webkit-scrollbar-thumb { background: #6585ab; border: 3px solid #e3ebf5; border-radius: 8px; }
.code-playground textarea::-webkit-scrollbar-thumb:hover { background: #365f90; }
.code-playground .play-editor textarea::selection { background: #9cc9f780; }
.code-playground .play-editor:focus-within { outline: 2px solid #1765b5; outline-offset: 2px; }
.syntax-tag, .syntax-keyword { color: #004fbb; }
.syntax-property { color: #79509a; }
.syntax-string { color: #a33116; }
.syntax-number { color: #086c54; }
.syntax-comment { color: #47723d; }
@media (max-width: 700px) { .code-playground .play-editor textarea, .code-playground .play-colors { font-size: 18px; } }
@media (forced-colors: active) { .code-playground .play-colors { display: none; } .code-playground .play-editor textarea { color: CanvasText; -webkit-text-fill-color: CanvasText; } }
@media (max-width: 700px) { .code-playground textarea { font-size: 18px; } }
@media print { .code-playground .play-actions, .code-playground .play-result { display: none; } }