/* 第9课局部设计：核心代码常显，完整演示与答案按需展开。 */
html, body {
  font-family: "Times New Roman", "SimSun", "宋体", serif;
  color: #183347;
  background: #edf1f5;
}
.slide.course-slide {
  background: #fff;
  padding: 26px 40px 24px;
}
.slide h1, .slide h2, .slide h3 {
  font-family: "Times New Roman", "SimHei", "黑体", sans-serif;
}
.slide h2 { font-size: 36px; margin: 10px 0 14px; }
.slide.course-slide::before { display: none; }
body[data-theme] .slide.course-slide { background: #fff; border-top-color: #1765b5; }
body[data-theme] .slide.course-slide h2 { color: #183347; }
body[data-theme] .slide.course-slide .eyebrow { color: #1765b5; }
.slide h3 { font-size: 25px; margin: 0 0 8px; }
.slide p, .slide li { font-size: 23px; line-height: 1.5; }
.slide .eyebrow { margin: 16px 0 6px; font-size: 17px; }
.slide .lead { font-size: 24px; margin: 0 0 18px; }
.slide code, .slide pre, .slide .play-editor textarea,
.slide .play-colors {
  font-family: Consolas, "SimSun", monospace;
}
.lesson-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.lesson-columns > * { min-width: 0; }
.lesson-panel { border: 1px solid #d4e0eb; border-radius: 12px; padding: 18px 20px; background: #fff; min-width: 0; }
.lesson-panel p { margin: 8px 0; }
.lesson-panel > :last-child { margin-bottom: 0; }
.lesson-note { border-left: 4px solid #177f73; padding: 12px 18px; margin: 16px 0; background: #eff8f5; color: #173f38; border-radius: 6px; }
.lesson-note p { margin: 0; }
.slide .question-strip { margin: 16px 0 12px; padding: 10px 16px; border: 1px solid #c9dbea; border-left: 5px solid #1765b5; border-radius: 8px; background: #f1f6fc; font-size: 23px; line-height: 1.45; color: #183347; }
.question-strip p { margin: 0; }
.slide .lesson-answer, .slide .run-details { margin: 12px 0; border: 1px solid #c9dcd6; border-radius: 8px; padding: 0 16px; background: #f7fbf9; }
.slide .run-details { border-color: #d2dfeb; background: #f8fafc; }
.slide summary { cursor: pointer; font-size: 23px; line-height: 1.45; padding: 10px 0; color: #164e72; font-weight: 700; }
.lesson-answer[open], .run-details[open] { padding-bottom: 16px; }
.lesson-answer p { margin: 8px 0; }
.lesson-folds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.lesson-folds > details[open] { grid-column: 1 / -1; }
.slide pre.code-reference {
  font: 24px/1.45 Consolas, "SimSun", monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: none; overflow: visible;
  color: #183347; background: #f5f8fb;
  padding: 14px 18px; border-radius: 8px;
  border: 1px solid #dbe5ef; margin: 0;
}
.slide .code-reference code { font: inherit; }
.slide .play-editor textarea, .slide .play-colors { font-size: 23px; line-height: 1.45; }
.slide .page-nav { margin-top: 20px; padding-top: 12px; }
.slide .page-nav a { font-size: 18px; }
.lesson-label { display: block; font-size: 20px; color: #48617a; margin-bottom: 8px; }
.lesson-formula { margin: 12px 0; padding: 10px 14px; border-radius: 8px; background: #fff5df; color: #633e0d; font-size: 25px; }
.lesson-demo-frame { width: 100%; height: 330px; border: 1px solid #cad9e5; border-radius: 10px; background: white; }
.lesson-table { width: 100%; border-collapse: collapse; font-size: 22px; }
.lesson-table th, .lesson-table td { border: 1px solid #d2deea; padding: 10px 14px; text-align: left; background: #fff; }
.lesson-table th { background: #eef5fc; color: #183347; }
.lesson-table caption { text-align: left; padding-bottom: 8px; font-size: 22px; }
.lesson-source { font-size: 18px !important; overflow-wrap: anywhere; }
.box-diagram { padding: 18px 26px 26px; background: #fff0d7; border: 2px dashed #a7661c; text-align: center; font-size: 22px; border-radius: 12px; }
.box-diagram-border { margin-top: 12px; padding: 8px 8px 12px; background: #28736e; color: white; border-radius: 5px; }
.box-diagram-padding { margin-top: 8px; padding: 14px 22px 22px; background: #e1f0e8; color: #244e3d; }
.box-diagram-content { padding: 22px 8px; margin-top: 12px; background: #e0edfb; border: 1px solid #7aa6cf; color: #163a60; }
.lesson-definitions { margin: 0; }
.lesson-definitions dt { font-size: 24px; font-weight: bold; color: #1765b5; }
.lesson-definitions dd { margin: 2px 0 12px; font-size: 23px; line-height: 1.45; }
.width-ruler { border-top: 2px solid #1765b5; padding-top: 6px; margin: 16px 0; text-align: center; color: #174e7f; font-size: 22px; }
.width-strip { display: flex; align-items: stretch; height: 84px; margin-top: 18px; }
.width-strip > span { display: flex; align-items: center; justify-content: center; font-size: 20px; min-width: 0; }
.width-strip .edge { width: 7%; background: #28736e; color: #fff; }
.width-strip .pad { width: 15%; background: #dcefe5; }
.width-strip .content { flex: 1; background: #dfebfb; }
.width-strip-legend { font-size: 20px !important; color: #48617a; }
.cover-result { padding: 22px; border: 4px solid #177f73; border-radius: 10px; background: linear-gradient(to right, #e8f4ef, #fff1d9); color: #183347; }
.cover-result h3 { margin: 0 0 12px; }
.cover-result p { margin: 6px 0; }
.lesson-goals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 18px 0; }
.lesson-goals article { padding: 14px 18px; background: #f1f6fc; border-top: 3px solid #1765b5; border-radius: 8px; }
.lesson-goals article:nth-child(2) { background: #edf7f3; border-color: #177f73; }
.lesson-goals article:nth-child(3) { background: #fff7e8; border-color: #b56220; }
.lesson-goals p { margin: 6px 0 0; font-size: 22px; }
.overflow-samples { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 16px 0 52px; }
.overflow-samples .sample-text { height: 110px; padding: 8px 12px; border: 2px solid #1765b5; background: #f1f7fd; font-size: 22px; line-height: 1.5; }
.collapse-demo { display: flow-root; border: 1px solid #d5e0e9; padding: 16px; }
.collapse-demo > div { padding: 8px 16px; border: 2px solid #177f73; background: #eff8f5; font-size: 24px; }
.collapse-demo .first { margin: 0 0 30px; }
.collapse-demo .second { margin: 20px 0 0; }
.display-demo { margin: 12px 0; padding: 16px; border: 1px dashed #8aa4bc; font-size: 22px; }
.display-demo span { box-sizing: content-box; width: 140px; height: 50px; border: 2px solid #177f73; background: #eaf5ef; }
.display-demo .as-inline { display: inline; }
.display-demo .as-block { display: block; }
.display-demo .as-inline-block { display: inline-block; }
.background-swatch { min-height: 180px; padding: 18px; background-color: #fff1da; background-image: url("demo/stage-background.svg"); background-repeat: no-repeat; background-position: center; }
.background-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.background-comparison .background-swatch { width: min(100%, 360px); height: 240px; margin: 0 auto 12px; border: 2px solid #52728c; }
.gradient-swatch { height: 90px; border: 1px solid #b7c9d6; border-radius: 8px; }
.lesson-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; font-size: 22px; }
.lesson-controls button, .lesson-controls select { font: inherit; padding: 7px 12px; border: 1px solid #98afc4; border-radius: 6px; color: #183347; background: white; }
.lesson-controls input { accent-color: #1765b5; }
@media (max-width: 820px) {
  .slide.course-slide { padding: 20px 18px; }
  .lesson-columns, .lesson-goals, .background-comparison, .overflow-samples, .lesson-folds { grid-template-columns: 1fr; }
  .slide h2 { font-size: 29px; }
  .slide p, .slide li, .slide .lead, .slide .question-strip, .slide summary { font-size: 21px; }
  .slide pre.code-reference { font-size: 19px; padding: 12px; }
  .lesson-table { font-size: 18px; }
  .lesson-table th, .lesson-table td { padding: 8px; }
  .overflow-samples { gap: 48px; }
  .lesson-demo-frame { height: 390px; }
}
@media print {
  .slide.course-slide { padding: 10px; }
  .slide pre.code-reference { font-size: 16px; }
}
/* 常见投影高度下压缩装饰间距，保留核心代码的大字号。 */
@media (min-width: 1000px) and (max-height: 850px) {
  .slide.course-slide { margin: 12px auto; width: calc(100vw - 24px); min-height: calc(100vh - 24px); padding: 18px 30px 16px; }
  .slide .slide-top { padding-bottom: 8px; }
  .slide .eyebrow { margin-top: 10px; font-size: 16px; }
  .slide h2 { font-size: 34px; margin: 6px 0 10px; }
  .slide .lead { font-size: 22px; margin-bottom: 14px; }
  .slide p, .slide li { font-size: 22px; line-height: 1.4; }
  .slide h3 { font-size: 24px; }
  .lesson-panel { padding: 14px 16px; }
  .slide pre.code-reference { font-size: 24px; line-height: 1.32; padding: 12px 14px; }
  .lesson-note { padding: 10px 16px; margin: 12px 0; }
  .slide summary { font-size: 22px; padding: 8px 0; }
  .slide .question-strip { font-size: 22px; padding: 8px 14px; margin: 12px 0; }
  .slide .lesson-answer, .slide .run-details { margin: 10px 0; }
  .slide .page-nav { margin-top: 14px; padding-top: 10px; }
  .lesson-definitions dt { font-size: 23px; }
  .lesson-definitions dd { font-size: 22px; margin-bottom: 10px; line-height: 1.35; }
  .lesson-formula { font-size: 24px; margin: 10px 0; }
  .width-strip { height: 66px; margin-top: 12px; }
  .background-comparison .background-swatch { width: 270px; height: 180px; }
  .lesson-goals { margin: 14px 0; }
  .lesson-goals article { padding: 10px 16px; }
  .lesson-demo-frame { height: 300px; }
  .overflow-samples { margin-bottom: 40px; }
  .collapse-demo { padding: 12px; }
  .container-query-notes h3 { font-size: 23px; line-height: 1.25; }
  .slide .lesson-source { font-size: 18px; line-height: 1.3; margin: 8px 0; }
  .background-swatch { min-height: 150px; }
  .display-demo { margin: 8px 0; padding: 10px 16px; }
  .background-comparison .background-swatch { width: 240px; height: 160px; }
}