.home-learning { background: var(--paper); }
.home-learning main { max-width: 90rem; margin-inline: auto; border-inline: var(--line-hair); }
.home-learning .hero { min-height: calc(100svh - 4rem); grid-template-columns: 1fr; }
.home-learning .hero-text { padding: 2.5rem 1.5rem; gap: 2rem; border-right: 0; }
.home-learning .hero h1 { font-size: clamp(2.5rem, 5.3vw, 4.75rem); letter-spacing: -.045em; line-height: 1.25; }
.home-learning .hero .sub { font-size: 1rem; line-height: 1.95; max-width: 29em; }
.home-learning .hero .kicker { font-size: .8rem; letter-spacing: .12em; }
.home-learning .course-facts { font-size: .85rem; letter-spacing: 0; gap: .5rem 1rem; }
.home-learning .cta-row { gap: .65rem; }
.home-learning .btn { letter-spacing: .02em; }
/* 首屏：会回应的构成 */
.compose { padding: 1.5rem; background: #edeae2; border-top: var(--line-hair); display: flex; flex-direction: column; justify-content: center; }
.compose-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.compose-no { font: 600 .82rem var(--sans); letter-spacing: .08em; color: var(--muted); transition: color var(--t-2) var(--ease-out); }
.compose h2 { margin-top: 1rem; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.025em; line-height: 1.45; }
.compose-stage { position: relative; margin-top: 1.4rem; aspect-ratio: 4 / 3; width: min(100%, calc(50svh * 4 / 3)); background: var(--paper); border: var(--line-hair); overflow: hidden; touch-action: pan-y; cursor: crosshair; }
.compose-stage::before { content: ''; position: absolute; inset: .6rem; pointer-events: none; background-image: radial-gradient(#c9c4b9 .8px, transparent .8px); background-size: 1rem 1rem; opacity: .45; transition: opacity var(--t-3) var(--ease-out); }
.compose-stage[data-rule="ground"]::before { opacity: 0; }
.cdot { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--ink); will-change: transform;
  transition: transform var(--t-4) var(--ease-out) var(--d, 0ms), border-radius var(--t-3) var(--ease-out) var(--d, 0ms), background-color var(--t-2) ease; }
.cdot.is-square { border-radius: 8%; }
.compose-stage.is-pulling .cdot { transition-duration: 160ms, var(--t-3), var(--t-2); transition-delay: 0ms; }
.compose-stage[data-rule="rhythm"] .cdot:nth-child(3n+1) { background: var(--red); }
.compose-rules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; margin-top: 1rem; }
.compose-rules button { min-height: 2.85rem; padding: .5rem .4rem; font: 600 .92rem var(--sans); cursor: pointer; border: var(--line-hair); background: transparent; color: var(--ink);
  transition: background var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out), transform var(--t-1) var(--ease-out); }
.compose-rules button:hover { border-color: var(--ink); }
.compose-rules button:active { transform: scale(.96); }
.compose-rules button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.compose-stage.is-demo ~ .compose-rules button[aria-pressed="true"] { background: var(--ink-2); }
.compose-caption { min-height: 5.6rem; margin-top: 1rem; font-size: .92rem; color: var(--ink-2); }
.compose-caption strong { display: block; color: var(--red); }
.home-lab-link { font-weight: 650; font-size: .9rem; min-height: 2.75rem; display: inline-flex; align-items: center; align-self: flex-start; }
.start-route { display: grid; grid-template-columns: 1fr; border-top: var(--line-strong); }
.start-route a { text-decoration: none; padding: 1.2rem 1.5rem; display: flex; align-items: center; gap: 1rem; border-bottom: var(--line-hair); transition: background .2s; }
.start-route a:hover { background: var(--paper-raise); }
.start-route .route-no { font: italic 1.6rem var(--latin-serif); color: var(--red); }
.start-route strong { display: block; font-size: 1rem; }
.start-route small { display: block; font-size: .85rem; color: var(--muted); }
.start-route .route-arrow { margin-left: auto; }
.home-learning .section-head h2 { letter-spacing: -.03em; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.3; }
.home-learning .section-head .note { letter-spacing: 0; font-size: .85rem; }
.course-tools { padding: 0 1.5rem 1.2rem; }
.course-search { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.course-search label { font-size: .9rem; font-weight: 650; }
.course-search input { flex: 1; min-width: 12rem; min-height: 2.85rem; background: var(--paper-raise); border: var(--line-hair); font: inherit; padding: .5rem .8rem; }
.phase-filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.phase-filters button { border: var(--line-hair); background: transparent; color: var(--ink-2); font: .9rem var(--sans); padding: .6rem .85rem; min-height: 2.75rem; cursor: pointer; }
.phase-filters button[aria-pressed="true"] { border-color: var(--red); color: var(--red); background: #f6e8e2; }
.course-count { margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.course-empty { padding: 2rem 1.5rem; }
.home-learning .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--line-hair); }
.home-learning .week-cell { border: 0; border-right: var(--line-hair); border-bottom: var(--line-hair); padding: 1.3rem; min-height: 13rem; display: flex; flex-direction: column; }
.home-learning .week-cell .num { font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1.15; letter-spacing: -.03em; }
.home-learning .week-cell .name { font-size: 1rem; letter-spacing: 0; margin-top: .85rem; }
.week-focus { font-size: .85rem; color: var(--muted); line-height: 1.7; margin-top: .6rem; }
.home-learning .week-cell .phase { margin-top: auto; padding-top: .8rem; letter-spacing: .02em; font-size: .78rem; }
.home-learning .week-cell.exam .week-focus { color: inherit; }
.home-learning .week-cell .tag { right: 1rem; top: 1.3rem; }
.home-learning .method-cell .d { font-size: .9rem; }
.home-learning .eye-test h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 768px) {
  .home-learning .hero { grid-template-columns: 1.12fr 1fr; }
  .home-learning .hero-text { padding: 3.5rem 2.5rem; border-right: var(--line-hair); }
  .compose { padding: 2.5rem; border-top: 0; }
  .start-route { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .start-route a { border-right: var(--line-hair); padding-inline: 2rem; }
  .home-learning .week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .course-tools { padding-inline: 2.5rem; }
  .course-search { max-width: 34rem; }
}
@media (max-width: 400px) {
  .home-learning .hero h1 { font-size: 2.4rem; }
  .home-learning .week-cell { padding: 1rem; }
  .home-learning .cta-row .btn { width: 100%; justify-content: center; }
}

.home-learning .week-cell .now-badge { position: static; align-self: flex-start; margin-top: .5rem; order: 2; font-size: .75rem; }

.course-state { display:flex; align-items:center; gap:.5rem; white-space:nowrap; }
.course-state select { font:inherit; background:var(--paper); color:var(--ink); border:var(--line-hair); padding:.65rem; min-height:2.85rem; }
.course-search { max-width:60rem; }
.learning-state { display:block; font-size:.75rem; color:var(--muted); margin-top:.6rem; }
.week-cell.done .learning-state { color:var(--red); }
.week-cell.exam .learning-state { color:inherit; }
.course-directory .week-cell:focus-visible { outline-offset:-4px; }
/* 目录首屏直接露出课程，减少重复介绍占用的高度。 */
.course-directory .catalog-hero { padding-block:2rem 1.5rem; }
.course-directory .catalog-hero h1 { line-height:1.3; margin:.5rem 0 .75rem; }
.course-directory .catalog-links { margin-top:1rem; }
.course-directory .section-head { padding-block:1.5rem 1rem; }
@media(max-width:600px){
  .course-directory .catalog-hero { padding:1.25rem 1.5rem; }
  .course-directory .catalog-hero h1 { font-size:2rem; }
  .course-directory .catalog-meta { gap:.3rem 1rem; font-size:.8rem; }
  .course-directory .catalog-links { gap:.5rem; }
  .course-directory .catalog-links .btn { padding:.65rem .8rem; min-height:2.75rem; font-size:.85rem; }
  .course-directory .course-tools { padding-bottom:.8rem; }
  .course-directory .phase-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:.3rem; }
  .course-directory .phase-filters button { flex-shrink:0; }
}
.course-directory #continue-strip { display:none; }
@media(max-width:600px){
  .course-directory .catalog-meta { display:none; }
  .course-directory .section-head { padding-top:1rem; gap:0; }
  .course-directory .section-head h2 { font-size:1.35rem; }
  .course-directory .section-head .note { display:none; }
  .course-directory .course-progress { margin-top:0; margin-bottom:1rem; }
  .course-directory .course-search { gap:.5rem; margin-bottom:.6rem; }
  .course-directory .catalog-hero .kicker { font-size:.7rem; }
}

/* 首屏完整占据导航以下的窗口，后续内容从下一屏开始。 */
@media (min-width:768px) {
  .home-learning .hero-text { padding-block:clamp(1.5rem, 5svh, 3.5rem); }
}
@media (min-width:768px) and (max-width:1100px) {
  .home-learning .hero h1 { font-size:clamp(2rem, 4.3vw, 3rem); }
  .home-learning .hero-text, .home-learning .compose { padding-inline:1.5rem; }
}
@media (min-width:768px) and (max-height:800px) {
  .home-learning .compose { padding-block:1.25rem; }
  .home-learning .compose h2 { font-size:clamp(1.35rem, 2.3vw, 1.65rem); margin-top:.6rem; }
  .home-learning .compose-stage { margin-top:1rem; }
  .home-learning .compose-caption { min-height:4.5rem; margin-top:.75rem; }
  .home-learning .hero-text { gap:1rem; }
  .home-learning .hero .sub, .home-learning .course-facts { margin-top:1.25rem; }
}
@media (max-width:767px) {
  .home-learning .hero-text { min-height:calc(100svh - 4rem); padding-block:clamp(1.5rem, 5svh, 2.5rem); }
  .home-learning .compose { min-height:calc(100svh - 4rem); }
}

/* 首屏左栏：标题、说明与行动聚成一组，不再被推到两端 */
@media (min-width: 768px) {
  .home-learning .hero-text { justify-content: center; gap: 3rem; }
}

@media (min-width: 768px) { .start-route a:has(+ a[hidden]) { border-right: 0; } }