/* Chapter 1 · single-layer teaching layout, large interaction area, hidden scrollbars */
:root{
  --cw-ink:#17243f;
  --cw-muted:#5d6b84;
  --cw-blue:#3155f5;
  --cw-cyan:#00a8c6;
  --cw-mint:#0b9f79;
  --cw-amber:#d98906;
  --cw-pink:#e93c88;
  --cw-line:rgba(35,65,122,.14);
  --cw-controls:68px;
  --cw-left:40%;
  --cw-right:60%;
  --cw-font:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Noto Sans CJK SC","Source Han Sans SC","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body,button,input,select,textarea{font-family:var(--cw-font)!important}
body{color:var(--cw-ink);background:#eef5ff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal;font-variant-ligatures:common-ligatures}
button,input,a{font:inherit}
a{color:inherit}
svg text{font-family:var(--cw-font)!important;text-rendering:geometricPrecision}

#presentation-container,#presentation,.presentation{
  position:fixed!important;
  inset:0 0 var(--cw-controls) 0!important;
  width:auto!important;height:auto!important;min-height:0!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#fbfdff 0%,#edf5ff 55%,#f8fbff 100%)!important
}
.slide{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
  margin:0!important;padding:0!important;
  display:none!important;opacity:0!important;visibility:hidden!important;
  overflow:hidden!important;background:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important
}
.slide.active{opacity:1!important;visibility:visible!important;z-index:2!important}
.slide.cw-split.active{display:grid!important;grid-template-columns:minmax(350px,var(--cw-left)) minmax(560px,var(--cw-right))!important;align-items:stretch!important}
.slide.cw-cover.active{display:grid!important;grid-template-columns:minmax(390px,44%) minmax(560px,56%)!important;align-items:stretch!important}
.slide.cw-practice.active,.slide.cw-fullvisual.active,.slide.cw-single.active{display:block!important}

/* Left teaching area: one flat layer, independently scrollable. */
.slide>.chalkboard{
  position:relative!important;width:auto!important;height:100%!important;min-width:0!important;min-height:0!important;
  margin:0!important;
  padding:clamp(26px,3vw,52px) clamp(28px,3.35vw,58px) clamp(42px,5vw,78px)!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  overscroll-behavior:contain;scroll-behavior:auto;scroll-padding-block:24px 96px;touch-action:pan-y;
  scrollbar-width:none!important;-ms-overflow-style:none;touch-action:pan-y;
  background:linear-gradient(90deg,rgba(255,255,255,.985),rgba(255,255,255,.90))!important;
  border:0!important;border-radius:0!important;box-shadow:none!important
}
.slide>.chalkboard::-webkit-scrollbar,.slide.cw-practice::-webkit-scrollbar,.slide>.visualization::-webkit-scrollbar,.math-formula::-webkit-scrollbar,.formula-box::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.slide>.chalkboard>*{max-width:100%;min-width:0}
.slide>.chalkboard>.cw-step{position:relative!important;inset:auto!important;float:none!important;clear:both!important;z-index:auto!important;max-width:100%!important}
.slide>.chalkboard h1,.slide>.chalkboard h2,.slide>.chalkboard h3,.slide>.chalkboard h4{font-family:var(--cw-font)!important;text-wrap:balance}
.slide>.chalkboard h2,.slide>.chalkboard h3{margin-top:0!important;color:var(--cw-ink)!important;letter-spacing:0!important;font-weight:700!important}
.slide>.chalkboard h2{font-size:clamp(30px,3.05vw,52px)!important;line-height:1.12!important}
.slide>.chalkboard h3{font-size:clamp(28px,2.55vw,44px)!important;line-height:1.16!important}
.slide>.chalkboard h4{font-size:clamp(20px,1.55vw,28px)!important;line-height:1.35!important;color:#293b67!important;font-weight:700!important}
.slide>.chalkboard p,.slide>.chalkboard li{font-size:clamp(17px,1.18vw,22px)!important;line-height:1.72!important;overflow-wrap:anywhere}
.slide>.chalkboard ul,.slide>.chalkboard ol{padding-left:1.45em!important}
.slide-kicker{color:var(--cw-blue)!important;font-size:clamp(13px,.95vw,16px)!important;font-weight:700!important;letter-spacing:.08em!important}
.lead{font-size:clamp(19px,1.45vw,26px)!important;line-height:1.65!important;color:#2b3e68!important}

/* Useful teaching blocks without a card-inside-card shell. */
.concept-card,.example,.ex-block,.tip-box,.link-note,.math-formula,.formula-box{
  margin:14px 0!important;padding:15px 18px!important;
  max-width:100%!important;min-width:0!important;
  border:0!important;border-left:5px solid rgba(49,85,245,.70)!important;
  border-radius:0 10px 10px 0!important;box-shadow:none!important;
  background:linear-gradient(90deg,rgba(49,85,245,.075),rgba(0,168,198,.025))!important
}
.tip-box,.link-note{border-left-color:var(--cw-mint)!important;background:linear-gradient(90deg,rgba(11,159,121,.09),transparent)!important}
.example,.ex-block{border-left-color:var(--cw-amber)!important;background:linear-gradient(90deg,rgba(217,137,6,.10),transparent)!important}
.math-formula,.formula-box{
  text-align:center!important;overflow-x:auto!important;overflow-y:visible!important;scrollbar-width:none!important;
  border-left-color:var(--cw-pink)!important;
  background:linear-gradient(90deg,rgba(233,60,136,.05),rgba(49,85,245,.06),rgba(0,168,198,.04))!important
}
.interval-grid,.io-chips,.rules{margin:14px 0!important}

/* Right interaction area: deliberately dominant and not clipped. */
.slide>.visualization{
  position:relative!important;width:auto!important;height:100%!important;min-width:0!important;min-height:0!important;
  margin:0!important;padding:clamp(12px,1.45vw,24px)!important;
  display:block!important;overflow:auto!important;overscroll-behavior:contain;scrollbar-width:none!important;
  opacity:1!important;visibility:visible!important;
  background:radial-gradient(circle at 84% 14%,rgba(0,168,198,.17),transparent 27%),radial-gradient(circle at 12% 88%,rgba(49,85,245,.14),transparent 33%),linear-gradient(145deg,#f7fbff,#e9f3ff)!important;
  border:0!important;border-left:1px solid var(--cw-line)!important;border-radius:0!important;box-shadow:none!important;isolation:isolate
}
.slide>.visualization>svg,.slide>.visualization>canvas{
  display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
  max-width:none!important;max-height:none!important;opacity:1!important;visibility:visible!important;
  overflow:visible!important;pointer-events:auto!important;touch-action:none
}
.slide.cw-fullvisual>.visualization{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;padding:clamp(20px,2.8vw,44px)!important;border-left:0!important}
.slide.cw-cover>.visualization{min-height:0!important}
.slide.cw-cover>.chalkboard.section-cover{padding:clamp(38px,4.7vw,78px)!important;display:flex!important;align-items:center!important}
.slide.cw-cover>.chalkboard.section-cover .section-cover-inner{width:100%!important}
.slide.cw-single>.slide-container.cover{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:linear-gradient(128deg,#fff 0%,#eef5ff 55%,#e6f7fb 100%)!important}

/* Practice pages scroll when the revealed answer grows. */
.slide.cw-practice{
  overflow-x:hidden!important;overflow-y:auto!important;scrollbar-width:none!important;overscroll-behavior:contain;
  padding:clamp(26px,3.5vw,54px) clamp(26px,3.5vw,54px) clamp(46px,5vw,82px)!important;background:linear-gradient(135deg,#fbfdff,#eef5ff)!important
}
.slide.cw-practice>.practice{
  width:min(1180px,100%)!important;min-height:calc(100% - 2px)!important;margin:0 auto!important;
  padding:clamp(22px,2.8vw,44px)!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:rgba(255,255,255,.76)!important
}
.practice-answer{position:relative!important;inset:auto!important;max-width:100%!important;transition:opacity .22s ease,transform .22s ease!important}

/* Step-by-step reveal stays in normal flow. */
.cw-step{transition:opacity .22s ease,transform .22s ease,filter .22s ease}
.cw-step-hidden{display:none!important}
.cw-step-reveal{animation:cw-rise .26s ease both}
@keyframes cw-rise{from{opacity:0;transform:translateY(8px);filter:blur(1.5px)}to{opacity:1;transform:none;filter:none}}

/* MathJax SVG output. */
mjx-container{max-width:100%!important;overflow-x:auto!important;overflow-y:visible!important;padding:2px 0;scrollbar-width:none!important}
mjx-container::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
mjx-container[jax="SVG"]>svg{max-width:100%!important;height:auto!important;vertical-align:middle!important;color:inherit!important}
.math-formula mjx-container[display="true"],.formula-box mjx-container[display="true"]{margin:.38em 0!important}
button mjx-container{display:inline-block!important;margin:0!important;padding:0!important;overflow:visible!important;vertical-align:middle!important;color:inherit!important}
button mjx-container[jax="SVG"]>svg{max-height:1.35em!important;width:auto!important;color:inherit!important}
.cw-math-svg-overlay{pointer-events:none!important;overflow:visible!important;color:inherit}
.cw-math-svg-overlay>svg{display:block;overflow:visible;color:inherit}
.cw-svg-math-host{pointer-events:none!important;overflow:visible!important;color:inherit}
.cw-svg-math-host>.cw-math-svg{display:block!important;overflow:visible!important;color:inherit!important}
.cw-svg-math-host>.cw-math-svg use,.cw-svg-math-host>.cw-math-svg path{fill:currentColor}
.cw-svg-math-host .cw-math-bg{vector-effect:non-scaling-stroke}

/* Formula and mode buttons in visualizations. */
.math-chip-layer,.viz-chips{font-family:var(--cw-font)!important}
.visualization.has-math-chips{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.visualization.has-math-chips>.math-chip-layer{order:-1!important;flex:0 0 auto!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:9px 11px!important;min-height:50px!important;padding:2px 4px 9px!important;position:relative!important;z-index:4!important}
.visualization.has-math-chips>svg{flex:1 1 0!important;width:100%!important;height:0!important;min-height:0!important;overflow:visible!important}
.math-chip,.viz-chip{font-family:var(--cw-font)!important;font-weight:700!important}
.math-chip{min-height:38px!important;padding:5px 16px!important}
.math-chip mjx-container,.viz-chip mjx-container{margin:0!important;color:inherit!important}
.math-chip.active mjx-container,.viz-chip.on mjx-container{color:#fff!important}
.svg-math-box{font-family:var(--cw-font)!important}

/* Unified bottom controls: directory + page/step controls only. */
.controls{
  position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
  width:100%!important;max-width:none!important;height:var(--cw-controls)!important;min-height:var(--cw-controls)!important;
  margin:0!important;transform:none!important;padding:8px clamp(12px,2vw,30px)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;
  overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;
  background:rgba(255,255,255,.97)!important;border:0!important;border-top:1px solid var(--cw-line)!important;border-radius:0!important;
  box-shadow:0 -8px 26px rgba(31,58,108,.07)!important;backdrop-filter:blur(14px);z-index:1000!important;white-space:nowrap
}
.controls::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.controls .nav-btn,.controls a.nav-btn,.controls .page-jump-btn{
  height:42px!important;min-width:0!important;margin:0!important;padding:0 14px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  border:1px solid rgba(49,85,245,.14)!important;border-radius:11px!important;background:#fff!important;color:#34415f!important;
  text-decoration:none!important;box-shadow:none!important;cursor:pointer!important;font-weight:600!important;font-size:14px!important;line-height:1!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important
}
.controls .nav-btn:hover,.controls a.nav-btn:hover,.controls .page-jump-btn:hover{transform:translateY(-1px)!important;border-color:rgba(49,85,245,.40)!important;background:#f5f8ff!important;color:var(--cw-blue)!important}
.controls #next-btn{background:linear-gradient(135deg,var(--cw-blue),#6d57ed)!important;color:#fff!important;border-color:transparent!important;padding-inline:19px!important}
.controls #prev-btn{padding-inline:18px!important}
.controls .nav-btn.cw-disabled{opacity:.34!important;pointer-events:none!important}
.nav-ico{font-size:18px!important;line-height:1!important}
.page-indicator{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:128px!important;height:42px!important;margin:0!important;padding:0 12px!important;border:0!important;border-radius:10px!important;background:#edf3ff!important;color:#385083!important;font-weight:700!important;font-size:13px!important;font-variant-numeric:tabular-nums!important}
.page-jump{height:42px!important;margin:0!important;padding:0 6px 0 10px!important;display:flex!important;align-items:center!important;gap:6px!important;border:1px solid rgba(49,85,245,.12)!important;border-radius:11px!important;background:#fff!important}
.page-jump-label{font-size:12px!important;color:var(--cw-muted)!important}
.page-jump-input{width:54px!important;height:30px!important;padding:0 5px!important;border:1px solid rgba(49,85,245,.18)!important;border-radius:7px!important;text-align:center!important;color:var(--cw-ink)!important;background:#f8fbff!important}
.controls .page-jump-btn{height:30px!important;padding:0 10px!important;border-radius:7px!important;font-size:12px!important;background:#edf3ff!important}
.lab-submenu{z-index:1200!important}
a.submenu-item{text-decoration:none!important;color:inherit}

@media (max-width:1180px){
  :root{--cw-left:42%;--cw-right:58%}
  .slide.cw-split.active,.slide.cw-cover.active{grid-template-columns:minmax(330px,var(--cw-left)) minmax(500px,var(--cw-right))!important}
  .controls .nav-label{font-size:12px!important}.controls .nav-btn,.controls a.nav-btn{padding-inline:11px!important}.page-indicator{min-width:110px!important}
}
@media (max-width:980px){
  html,body{overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none!important}
  #presentation-container,#presentation,.presentation{position:relative!important;inset:auto!important;height:auto!important;min-height:calc(100dvh - var(--cw-controls))!important;overflow:visible!important}
  .slide{position:relative!important;inset:auto!important;height:auto!important;min-height:calc(100dvh - var(--cw-controls))!important;overflow:visible!important;padding-bottom:calc(var(--cw-controls) + 14px)!important}
  .slide.cw-split.active,.slide.cw-cover.active{display:block!important}
  .slide>.chalkboard{height:auto!important;min-height:46vh!important;padding:30px 24px 42px!important;overflow:visible!important}
  .slide>.visualization{height:62vh!important;min-height:520px!important;border-left:0!important;border-top:1px solid var(--cw-line)!important;padding:14px!important;overflow:auto!important;scrollbar-width:none!important}
  .slide>.visualization>svg,.slide>.visualization>canvas{min-height:0!important}
  .slide.cw-fullvisual>.visualization{position:relative!important;inset:auto!important;height:calc(100dvh - var(--cw-controls))!important;min-height:620px!important}
  .slide.cw-single>.slide-container.cover{position:relative!important;min-height:calc(100dvh - var(--cw-controls))!important}
  .slide.cw-practice{overflow:visible!important;min-height:calc(100dvh - var(--cw-controls))!important}
  .page-jump-label,.controls .course-word{display:none!important}
}
@media (max-width:600px){
  :root{--cw-controls:62px}
  .controls{justify-content:flex-start!important;padding:7px 8px!important;gap:6px!important}
  .controls .nav-btn,.controls a.nav-btn{height:40px!important;padding:0 10px!important;font-size:12px!important}
  .controls .nav-label{display:none!important}.controls #prev-btn .nav-label,.controls #next-btn .nav-label{display:inline!important}
  .page-indicator{height:40px!important;min-width:98px!important;font-size:11px!important}.page-jump{display:none!important}
  .slide>.visualization{height:64vh!important;min-height:470px!important}
}

/* v4: non-compressing reveal flow and explicit exercise answers */
/* Ordinary teaching pages must use block flow. Legacy lesson styles used a
   column flexbox, which allowed newly revealed children to shrink older text. */
.slide:not(.cw-cover) > .chalkboard{
  display:block!important;
  align-content:initial!important;
  justify-content:initial!important;
  overflow-anchor:none!important;
}
.slide:not(.cw-cover) > .chalkboard > *{
  flex:0 0 auto!important;
  flex-shrink:0!important;
  min-height:max-content;
}
.slide:not(.cw-cover) > .chalkboard > .cw-step{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
}

/* Practice pages have one scroll owner only. Disable legacy inner flex
   centering/collapse so the question never gets squeezed when the answer opens. */
.slide.cw-practice > .practice{
  display:block!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow:visible!important;
  overflow-anchor:none!important;
}
.slide.cw-practice > .practice::before,
.slide.cw-practice > .practice::after{
  content:none!important;
  display:none!important;
}
.slide.cw-practice > .practice > *{
  flex:0 0 auto!important;
  flex-shrink:0!important;
}

/* The runtime owns answer visibility. These rules override the old 0fr/opacity
   animation in lessons 2-4 while preserving a clean reveal transition. */
.practice-answer.cw-step-hidden{
  display:none!important;
}
.practice-answer:not(.cw-step-hidden){
  display:block!important;
  grid-template-rows:1fr!important;
  height:auto!important;
  max-height:none!important;
  opacity:1!important;
  overflow:visible!important;
  margin-top:12px!important;
}
.practice-answer:not(.cw-step-hidden) > .answer-clip{
  overflow:visible!important;
  min-height:0!important;
}
.practice-answer:not(.cw-step-hidden) .answer-flex{
  opacity:1!important;
  transform:none!important;
}

.cw-answer-toggle{
  appearance:none;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:42px!important;
  margin:12px 0 4px 58px!important;
  padding:9px 16px!important;
  border:1px solid rgba(49,85,245,.24)!important;
  border-radius:10px!important;
  background:#f2f6ff!important;
  color:#2949c7!important;
  box-shadow:none!important;
  font-family:var(--cw-font)!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.25!important;
  cursor:pointer!important;
  user-select:none!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease!important;
}
.cw-answer-toggle:hover{
  background:#e9f0ff!important;
  border-color:rgba(49,85,245,.42)!important;
}
.cw-answer-toggle:active{transform:translateY(1px)!important}
.cw-answer-toggle:focus-visible{outline:3px solid rgba(49,85,245,.22)!important;outline-offset:3px!important}
.cw-answer-toggle.is-open{
  background:#eefaf6!important;
  border-color:rgba(11,159,121,.32)!important;
  color:#08795d!important;
}
.cw-answer-toggle.is-open .cw-answer-toggle-icon{background:#08795d!important}
.cw-answer-toggle-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:21px!important;
  height:21px!important;
  border-radius:50%!important;
  background:#2949c7!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1!important;
}
.cw-answer-toggle-text{white-space:nowrap!important}

@media (max-width:700px){
  .cw-answer-toggle{margin-left:0!important;width:100%!important}
  .slide:not(.cw-cover) > .chalkboard > *{min-height:0}
}