/*
 * DGOpenKS 学习页面公共设计系统
 * 规范来源：docs/DGOpenKS_HTML页面统一设计与三端响应式标准.md
 * 本文件是初高中衔接知识页面公共视觉规则的唯一实现。
 *
 * 颜色语义：
 * blue   原始对象、起点与主要学习路径
 * amber  第一类变化或混合项
 * purple 第二类变化或结构连接
 * cyan   整理后的结果与核心结论
 * red    删除、抵消、错误或被移除部分
 */

:root{
  color-scheme:light;

  --bg:#f4f2ec;
  --canvas:var(--bg);
  --paper:#fffdf8;
  --paper-strong:#ffffff;
  --soft:#f7f5ef;
  --ink:#17202f;
  --body:#3f4b5c;
  --muted:#6f7885;
  --line:#dcd9d0;
  --line-strong:#c8c3b8;
  --grid:#e5e0d6;

  --blue:#176b87;
  --blue-soft:#e8f4f6;
  --blue-line:#acd6dd;
  --blue-deep:#104b62;

  --amber:#a35f18;
  --amber-soft:#fff2dc;
  --amber-line:#ebc58e;
  --amber-deep:#7d4812;

  --purple:#7155a3;
  --purple-soft:#f1edf9;
  --purple-line:#d4c7e9;
  --purple-deep:#523b7d;

  --cyan:#2f765d;
  --cyan-soft:#e9f5ef;
  --cyan-line:#add4c2;
  --cyan-deep:#245c49;

  --green:var(--cyan);
  --green-soft:var(--cyan-soft);
  --green-line:var(--cyan-line);

  --red:#b54a43;
  --red-soft:#fbefec;
  --red-line:#e8bbb5;
  --red-deep:#84342f;

  --font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-serif:"Noto Serif SC","Songti SC","STSong",serif;
  --font-math:Georgia,"Times New Roman",serif;
  --font:var(--font-sans);
  --serif:var(--font-serif);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:20px;
  --radius-pill:999px;
  --radius:var(--radius-md);

  --shadow:0 20px 56px rgba(23,32,47,.09);
  --soft-shadow:0 1px 2px rgba(23,32,47,.05),0 9px 24px rgba(23,32,47,.055);
  --shadow-sm:var(--soft-shadow);
  --shadow-lg:var(--shadow);

  --page-max:1180px;
  --reading-max:920px;
  --page-gutter:20px;
  --section-space:3.5rem;
  --section-space-mobile:2.25rem;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:78px;
}

body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font-sans);
  font-size:16px;
  color:var(--ink);
  line-height:1.78;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(circle at 12% 3%,rgba(23,107,135,.08),transparent 27rem),
    radial-gradient(circle at 90% 20%,rgba(113,85,163,.06),transparent 25rem),
    var(--bg);
}

a{
  color:inherit;
}

p{
  margin:0 0 1rem;
  color:var(--body);
  text-wrap:pretty;
}

strong{
  color:var(--ink);
}

button,
input{
  color:inherit;
  font:inherit;
}

.math,
.equation,
.derivation,
.formula-line,
.formula-list,
.summary-formula,
.count b,
.cube-handout-counts span,
.cube-handout-term-name,
.cube-handout-final,
.handout-formula,
.handout-group-title,
.handout-label,
.handout-small-label,
.handout-dim,
.cube-mini-label,
.cube-formula-line{
  font-family:var(--font-math);
}

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid rgba(23,107,135,.48);
  outline-offset:3px;
}

.skip-link{
  position:fixed;
  top:.65rem;
  left:.65rem;
  z-index:100;
  transform:translateY(-160%);
  padding:.6rem .9rem;
  border-radius:var(--radius-sm);
  background:var(--ink);
  color:#fff;
  font-weight:800;
  text-decoration:none;
}

.skip-link:focus{
  transform:translateY(0);
}

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  border-bottom:1px solid rgba(200,195,184,.8);
  background:rgba(244,242,236,.9);
  backdrop-filter:blur(16px);
}

.topbar-inner{
  display:flex;
  width:min(var(--page-max),calc(100% - 2rem));
  max-width:none;
  min-height:62px;
  margin:auto;
  padding:0;
  align-items:center;
  gap:.35rem;
  overflow-x:auto;
  scrollbar-width:none;
}

.topbar-inner::-webkit-scrollbar{
  display:none;
}

.brand,
.nav-link{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  border-radius:var(--radius-pill);
  text-decoration:none;
  white-space:nowrap;
}

.brand{
  margin-right:auto;
  color:var(--blue-deep);
  font-size:.92rem;
  font-weight:950;
  letter-spacing:.08em;
}

.brand img{
  display:block;
  width:auto;
  height:30px;
  max-width:none;
}

.nav-link{
  padding:.42rem .72rem;
  justify-content:center;
  border:0;
  color:var(--muted);
  font-size:.8rem;
  font-weight:800;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"]{
  outline:0;
  color:var(--blue-deep);
  border-color:transparent;
  background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line);
}

.hero{
  position:relative;
  display:flex;
  width:min(var(--page-max),calc(100% - 2rem));
  min-height:auto;
  max-width:var(--page-max);
  margin:auto;
  padding:4.5rem var(--page-gutter) 2.5rem;
  flex-direction:column;
  justify-content:center;
}

.eyebrow,
.kicker{
  display:inline-flex;
  width:max-content;
  align-items:center;
  margin-bottom:1.15rem;
  color:var(--blue-deep);
  font-size:.75rem;
  letter-spacing:.13em;
}

h1,
h2,
h3{
  margin-top:0;
  color:var(--ink);
  text-wrap:balance;
}

h1{
  max-width:820px;
  margin-bottom:1.1rem;
  font-family:var(--font-serif);
  font-size:clamp(2.4rem,4.7vw,4rem);
  font-weight:700;
  line-height:1.08;
}

.mobile-title-break{
  display:block;
}

h2{
  margin-bottom:.9rem;
  font-family:var(--font-serif);
  font-size:clamp(1.7rem,2.8vw,2.3rem);
  line-height:1.24;
}

h3{
  margin:1.6rem 0 .65rem;
  color:var(--ink);
  font-size:1.08rem;
  line-height:1.45;
}

.lead{
  max-width:820px;
  margin-bottom:1.4rem;
  color:#3f4b5c;
  font-size:clamp(1.04rem,1.7vw,1.22rem);
  line-height:1.86;
}

main{
  width:min(var(--page-max),calc(100% - 2rem));
  max-width:none;
  margin:auto;
  padding:0 0 6rem;
}

.section{
  display:grid;
  grid-template-columns:150px minmax(0,var(--reading-max));
  justify-content:center;
  gap:clamp(1.5rem,5vw,4.5rem);
  padding:var(--section-space) 0;
  border-top:1px solid var(--line);
  scroll-margin-top:78px;
}

.section-body,
.prose{
  min-width:0;
}

.marker{
  --marker-orb-size:clamp(2rem,5.2vw,3.25rem);
  position:sticky;
  top:92px;
  align-self:start;
  color:var(--blue-deep);
  font-size:clamp(.72rem,calc(.65rem + .3vw),.9rem);
  font-weight:900;
  letter-spacing:.05em;
}

h2.marker{
  margin:0;
  color:var(--blue-deep);
  font-family:var(--font-sans);
  font-size:clamp(.72rem,calc(.65rem + .3vw),.9rem);
  font-weight:900;
  line-height:1.4;
  letter-spacing:.05em;
  text-wrap:wrap;
}

.marker span{
  display:grid;
  width:var(--marker-orb-size);
  height:var(--marker-orb-size);
  margin-bottom:.75rem;
  flex:0 0 var(--marker-orb-size);
  place-items:center;
  border:1px solid var(--blue-line);
  border-radius:50%;
  border-color:var(--blue-line);
  background:var(--paper);
  color:var(--blue-deep);
  font-family:var(--font-serif);
  font-size:1rem;
  box-shadow:0 1px 2px rgba(23,32,47,.06),0 10px 24px rgba(23,107,135,.1);
}

@media screen and (min-width:821px){
  .marker{
    position:sticky;
    top:92px;
    display:grid;
    width:100%;
    min-height:108px;
    max-width:150px;
    padding:.9rem .8rem 1rem 1rem;
    align-self:start;
    justify-items:center;
    align-content:start;
    gap:.75rem;
    border-left:3px solid var(--blue);
    border-radius:0 var(--radius-md) var(--radius-md) 0;
    background:linear-gradient(90deg,rgba(232,244,246,.94),rgba(232,244,246,.32) 76%,transparent);
    text-align:center;
  }

  .marker span{
    margin:0;
  }
}

.prose{
  color:#3f4b5c;
}

.section-intro{
  margin-bottom:1.5rem;
  color:var(--body);
  font-size:1.03rem;
}

@media(min-width:1024px){
  #calculation.section,
  #model.section,
  #summary.section{
    padding-top:var(--section-space);
    padding-bottom:var(--section-space);
  }
}

.formula-card{
  margin:1.65rem 0;
  padding:clamp(1.1rem,2.5vw,1.7rem);
  border-color:var(--line);
  border-radius:var(--radius-md);
  background:rgba(255,253,248,.96);
  box-shadow:var(--soft-shadow);
}

.calc-step{
  border-color:var(--line);
}

.formula-line{
  color:var(--ink);
}

.step-note{
  border-color:var(--blue-line);
  color:#526071;
  line-height:1.76;
  text-wrap:wrap;
}

.static-model-sequence > .model-step,
.model-lab,
.diff-model-step,
.cube-sum-model-step,
.cube-diff-model-step,
.summary-panel,
.static-split,
.cube-template-board,
.cube-handout-wrap,
.static-figure,
.structure,
.equation-block,
.conditions,
.recognition-card,
.card,
.path-card,
.lesson-card{
  border-radius:var(--radius-lg);
}

.static-formula,
.count,
.cube-template-panel,
.cube-handout-card,
.cube-template-visual,
.cube-handout-visual,
.cube-template-note,
.cube-handout-note,
.cube-handout-term,
.cube-formula-card,
.cube-handout-final,
.diff-static-formula,
.cube-sum-static-formula,
.cube-diff-static-formula,
.difference-handout,
.difference-card,
.difference-visual,
.difference-note,
.difference-term,
.difference-final,
.signed-step,
.signed-visual,
.signed-formula,
.signed-choice-row,
.signed-product,
.signed-group,
.count,
.term,
.pair,
.result-box,
.formula-list article,
.compare-item,
.conclusion{
  border-radius:var(--radius-md);
}

.model-lab,
.diff-model-step,
.cube-sum-model-step,
.cube-diff-model-step,
.static-figure,
.structure,
.equation-block,
.conditions,
.recognition-card,
.card,
.path-card,
.lesson-card{
  border-color:var(--line);
  background:var(--paper);
  box-shadow:var(--soft-shadow);
}

.model-scene,
.diff-scene-wrap,
.cube-sum-scene-wrap,
.cube-diff-scene-wrap{
  background:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    var(--soft);
  background-size:32px 32px;
}

.scene-wrap canvas,
.model-scene canvas,
.diff-scene-wrap canvas,
.cube-sum-scene-wrap canvas,
.cube-diff-scene-wrap canvas{
  touch-action:pan-y pinch-zoom;
}

.scene-wrap canvas:focus-visible,
.model-scene canvas:focus-visible,
.diff-scene-wrap canvas:focus-visible,
.cube-sum-scene-wrap canvas:focus-visible,
.cube-diff-scene-wrap canvas:focus-visible{
  outline:3px solid rgba(23,107,135,.72);
  outline-offset:-4px;
}

.model-loader,
.diff-scene-loader{
  color:var(--muted);
  background:rgba(247,245,239,.76);
}

.model-panel .model-step{
  border-radius:var(--radius-sm);
}

.summary-panel{
  padding:1.5rem;
  overflow:hidden;
  border:1px solid var(--cyan-line);
  border-radius:var(--radius-lg);
  background:var(--cyan-soft);
  box-shadow:var(--soft-shadow);
}

.summary-panel::after{
  border-color:rgba(47,118,93,.06);
}

.summary-formula{
  border-color:var(--cyan-line);
  color:var(--ink);
}

.summary-path-index{
  border-color:var(--cyan-line);
  color:var(--cyan-deep);
  font-family:var(--font-serif);
}

.summary-path h3{
  color:var(--cyan-deep);
}

.summary-path p{
  color:#3f4b5c;
}

.note,
.purpose{
  border-color:var(--blue);
  background:var(--blue-soft);
  color:var(--blue-deep);
}

.structure.factor{
  border-color:var(--purple-line);
  background:var(--purple-soft);
}

.conclusion{
  border-color:var(--cyan-line);
  background:var(--cyan-soft);
  font-size:1rem;
}

.footer{
  padding:2.6rem 1rem;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.8rem;
  text-align:center;
}

.pager{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  width:min(var(--page-max),calc(100% - 2rem));
  margin:0 auto 3rem;
  gap:.75rem;
}

.pager a{
  display:flex;
  min-width:0;
  min-height:48px;
  align-items:center;
  justify-content:center;
  padding:.7rem 1rem;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--muted);
  font-size:.86rem;
  font-weight:900;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
}

.pager-prev{grid-column:1}
.pager-home{grid-column:2}
.pager-next{grid-column:3}

.pager a:hover,
.pager a:focus-visible{
  border-color:var(--blue-line);
  background:var(--blue-soft);
  color:var(--blue-deep);
}

@media(max-width:1023px){
  .mobile-heading-unit{
    display:block;
  }

  .calc-step .step-note{
    display:block;
    width:100%;
    max-width:none;
    min-width:0;
    margin:0;
    padding:.55rem 0 0;
    border-top:1px dashed var(--blue-line);
    border-left:0;
    text-align:left;
    text-wrap:wrap;
    word-break:normal;
    overflow-wrap:break-word;
    line-break:strict;
  }

  .calc-step .mobile-note-math{
    display:inline;
    width:auto;
    max-width:none;
    margin:0;
    white-space:normal;
  }
}

@media(max-width:1023px){
  .hero{
    min-height:auto;
    padding-top:4.5rem;
  }

  .section,
  #model.section{
    grid-template-columns:110px minmax(0,1fr);
    gap:2rem;
  }

  .model-lab,
  .diff-model-step,
  .cube-sum-model-step,
  .cube-diff-model-step{
    grid-template-columns:minmax(0,1fr);
  }

  .diff-scene-wrap,
  .cube-sum-scene-wrap,
  .cube-diff-scene-wrap{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
}

@media(max-width:820px){
  .section,
  #model.section{
    grid-template-columns:minmax(0,1fr);
    gap:1.25rem;
  }

  .marker{
    position:static;
    display:flex;
    width:100%;
    max-width:none;
    min-height:auto;
    margin:0 0 .1rem;
    padding:.6rem .8rem;
    align-items:center;
    justify-content:flex-start;
    gap:clamp(.5rem,1.4vw,.7rem);
    border-left:3px solid var(--blue);
    border-radius:0 14px 14px 0;
    background:linear-gradient(90deg,rgba(232,244,246,.9),rgba(232,244,246,.28) 68%,transparent);
    text-align:left;
  }

  .marker span{
    margin:0;
  }
}

@media(max-width:640px){
  body{
    font-size:16px;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  .pager{
    grid-template-columns:minmax(0,1fr);
    width:min(var(--page-max),calc(100% - 1.75rem));
  }

  .pager a{
    grid-column:1;
    width:100%;
  }

  .topbar{
    position:sticky;
  }

  .topbar::after{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:18px;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(244,242,236,0),rgba(244,242,236,.96));
    content:"";
  }

  .topbar-inner{
    width:100%;
    min-height:56px;
    padding:0 28px 0 10px;
    gap:.2rem;
    justify-content:flex-start;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(23,107,135,.34) transparent;
    -webkit-overflow-scrolling:touch;
  }

  .topbar-inner::-webkit-scrollbar{
    display:block;
    height:3px;
  }

  .topbar-inner::-webkit-scrollbar-track{
    background:transparent;
  }

  .topbar-inner::-webkit-scrollbar-thumb{
    border-radius:var(--radius-pill);
    background:rgba(23,107,135,.34);
  }

  .brand{
    width:auto;
    flex:0 0 auto;
    margin-right:.35rem;
    overflow:visible;
    font-size:.78rem;
    letter-spacing:.06em;
    white-space:nowrap;
  }

  .brand img{
    height:26px;
  }

  .brand::after{
    content:none;
  }

  .nav-link{
    min-height:44px;
    padding:.48rem .62rem;
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    font-size:.76rem;
    white-space:nowrap;
  }

  .hero{
    width:calc(100% - 2rem);
    padding:2.4rem 0 2.65rem;
  }

  .hero h1{
    margin-bottom:.85rem;
    font-size:1.75rem;
    line-height:1.15;
  }

  .lead{
    font-size:1rem;
    line-height:1.8;
  }

  .section,
  #model.section{
    grid-template-columns:minmax(0,1fr);
    gap:.75rem;
    padding:var(--section-space-mobile) 0;
  }

  .marker{
    gap:.5rem;
    margin:0 0 .1rem;
    padding:.45rem .55rem;
    font-size:.7rem;
  }

  h2.marker{
    margin:0 0 .1rem;
    font-size:.7rem;
    line-height:1.4;
  }

  .marker span{
    width:32px;
    height:32px;
    flex:0 0 32px;
    font-size:.82rem;
    box-shadow:0 1px 2px rgba(23,32,47,.05);
  }

  .section,
  .section-body,
  .prose,
  .formula-card{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .static-model-sequence > .model-step,
  .model-lab,
  .diff-model-step,
  .cube-sum-model-step,
  .cube-diff-model-step{
    border-radius:var(--radius-lg);
  }

  .formula-card,
  .summary-panel{
    padding:1.25rem;
  }

  .formula-card{
    margin:.9rem 0;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .calc-steps{
    gap:.65rem;
  }

  .calc-step{
    grid-template-columns:minmax(0,1fr)!important;
    gap:.55rem;
    padding:.85rem;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    background:var(--paper);
    box-shadow:var(--soft-shadow);
  }

  .calc-step:last-child{
    padding-bottom:.85rem;
    border-bottom:1px solid var(--line);
  }

  .formula-line{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    font-size:clamp(.88rem,3.8vw,.98rem);
    line-height:1.55;
    letter-spacing:-.01em;
    scrollbar-width:none;
  }

  .formula-line::-webkit-scrollbar{
    display:none;
  }

  .calc-step .step-note{
    width:100%;
    margin:0;
    padding:.55rem 0 0;
    border-top:1px dashed var(--blue-line);
    border-left:0;
    font-size:.9rem;
    line-height:1.65;
    text-align:left;
    text-wrap:wrap;
    overflow-wrap:break-word;
  }

  .summary-panel{
    padding:1rem;
  }

  .summary-panel::after{
    display:none;
  }

  .summary-formula{
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:thin;
  }

  .summary-formula.is-split{
    display:grid;
    gap:.15rem;
    padding-bottom:.85rem;
    overflow:visible;
    font-size:1rem;
    line-height:1.5;
    text-align:center;
    white-space:normal;
  }

  .summary-formula-left,
  .summary-formula-right{
    white-space:nowrap;
  }

  .summary-paths{
    gap:.85rem;
    padding-top:.85rem;
  }

  .summary-path{
    grid-template-columns:30px minmax(0,1fr);
    gap:.65rem;
  }

  .summary-path-index{
    width:30px;
    height:30px;
    font-size:.8rem;
  }

  .summary-path h3{
    font-size:.96rem;
  }

  .summary-path p{
    margin:0;
  }

  .model-step-copy,
  .diff-step-copy,
  .cube-sum-step-copy,
  .cube-diff-step-copy{
    gap:.65rem;
    padding:1rem;
  }
}

@media(max-width:360px){
  .hero h1{
    font-size:1.625rem;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

@media print{
  body{
    background:#fff;
  }

  .topbar,
  .skip-link,
  .pager,
  .practice-actions{
    display:none!important;
  }

  .hero,
  main{
    width:100%;
    max-width:none;
    padding-right:0;
    padding-left:0;
  }

  .section{
    display:block;
    padding:2.2rem 0;
    break-inside:avoid;
  }

  .marker{
    position:static;
    margin-bottom:1rem;
  }
}

/* Module articles: persistent directory and separate in-page navigation. */
.module-article-nav .topbar-inner{overflow:visible}
.module-article-nav .brand{margin-right:.5rem;flex-shrink:0}
.module-directory{margin-right:auto;flex-shrink:0}
.article-sections{display:flex;min-width:0;overflow-x:auto;align-items:center;gap:.35rem}
.article-sections .nav-link{flex-shrink:0}
.pager.pager-sequential{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.pager-sequential a{width:auto;max-width:100%}
.pager-sequential .pager-prev{grid-column:1;justify-self:start}
.pager-sequential .pager-next{grid-column:2;justify-self:end}
@media(max-width:640px){
  .module-article-nav .topbar-inner{flex-wrap:wrap;padding:6px 14px;gap:0}
  .module-article-nav .module-directory{margin-left:auto;margin-right:0}
  .module-article-nav .article-sections{flex:0 0 100%;gap:.2rem}
}