.home-page {
  min-height: 100vh;
  padding: 0 var(--em-page-x) calc(150 * var(--rpx));
  overflow-x: hidden;
  color: var(--em-color-primary);
  background: #fbf9f8;
  font-family: var(--em-font-family);
}

.custom-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: calc(104 * var(--rpx));
  padding-left: 0;
  margin-bottom: calc(12 * var(--rpx));
}

.nav-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  max-width: calc(430 * var(--rpx));
  padding: calc(6 * var(--rpx)) calc(18 * var(--rpx)) calc(6 * var(--rpx)) 0;
  border-radius: var(--em-radius-pill);
}

.nav-avatar {
  flex-shrink: 0;
  width: calc(76 * var(--rpx));
  height: calc(76 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
  overflow: hidden;
  background: var(--em-color-primary-soft);
  border: calc(2 * var(--rpx)) solid rgba(254, 214, 91, 0.42);
  border-radius: 50%;
  box-shadow: 0 calc(12 * var(--rpx)) calc(28 * var(--rpx)) rgba(0, 39, 39, 0.14);
}

.nav-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
}

.nav-copy {
  flex: 1;
  min-width: 0;
}

.nav-title,
.nav-greeting {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-title {
  color: var(--em-color-primary);
  font-family: var(--em-font-serif);
  font-size: calc(34 * var(--rpx));
  font-weight: 600;
  line-height: 1.12;
}

.nav-greeting {
  margin-top: calc(6 * var(--rpx));
  color: var(--em-color-text-secondary);
  font-size: calc(24 * var(--rpx));
  font-weight: 700;
  line-height: 1;
}

.search-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(96 * var(--rpx));
  padding: 0 calc(32 * var(--rpx));
  margin: calc(16 * var(--rpx)) 0 calc(28 * var(--rpx));
  background: var(--em-color-surface);
  border: calc(1 * var(--rpx)) solid var(--em-color-border);
  border-radius: var(--em-radius-pill);
  box-shadow: 0 calc(10 * var(--rpx)) calc(34 * var(--rpx)) rgba(0, 39, 39, 0.06);
}

.search-lens {
  position: relative;
  flex-shrink: 0;
  width: calc(36 * var(--rpx));
  height: calc(36 * var(--rpx));
  margin-right: calc(28 * var(--rpx));
  border: calc(4 * var(--rpx)) solid #a7adad;
  border-radius: 50%;
}

.search-lens::after {
  position: absolute;
  right: calc(-14 * var(--rpx));
  bottom: calc(-9 * var(--rpx));
  width: calc(20 * var(--rpx));
  height: calc(4 * var(--rpx));
  content: "";
  background: #a7adad;
  border-radius: calc(4 * var(--rpx));
  transform: rotate(45deg);
}

.search-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--em-color-text-placeholder);
  font-size: calc(28 * var(--rpx));
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-page .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: calc(44 * var(--rpx)) 0 calc(22 * var(--rpx));
}

.home-page .section-title {
  display: block;
  max-width: calc(420 * var(--rpx));
  margin: 0;
  overflow: hidden;
  color: var(--em-color-primary);
  font-family: var(--em-font-serif);
  font-size: calc(42 * var(--rpx));
  font-weight: 600;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep the existing public-class entry above the course recommendations. */
.public-class-entry { position:relative; overflow:hidden; padding:calc(42 * var(--rpx)) calc(36 * var(--rpx)) calc(36 * var(--rpx)); margin:calc(18 * var(--rpx)) 0 0; background:#002f30; color:#fff; border-radius:calc(28 * var(--rpx)); }
.hero-arch { position:absolute; width:calc(260 * var(--rpx)); height:calc(360 * var(--rpx)); top:calc(44 * var(--rpx)); right:calc(-80 * var(--rpx)); border:calc(1 * var(--rpx)) solid rgba(211,186,128,.24); border-radius:calc(160 * var(--rpx)) calc(160 * var(--rpx)) 0 0; transform:rotate(15deg); }
.hero-arch::after { content:""; position:absolute; inset:calc(24 * var(--rpx)); border:calc(1 * var(--rpx)) solid rgba(211,186,128,.16); border-radius:calc(140 * var(--rpx)) calc(140 * var(--rpx)) 0 0; }
.public-class-kicker,.public-class-title,.public-class-desc { position:relative; display:block; }
.public-class-kicker { color:#ddc48d; font-size: calc(24 * var(--rpx)); letter-spacing:calc(4 * var(--rpx)); }
.public-class-title { margin-top:calc(24 * var(--rpx)); font-family:var(--em-font-serif); font-size:calc(52 * var(--rpx)); line-height:1.38; letter-spacing:calc(2 * var(--rpx)); white-space:pre-line; }
.public-class-desc { margin-top:calc(20 * var(--rpx)); color:#c5d4d0; font-size:calc(24 * var(--rpx)); line-height:1.8; white-space:pre-line; }
.public-class-actions { position:relative; margin-top:calc(30 * var(--rpx)); }
.home-page .join-button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:calc(84 * var(--rpx)); padding:calc(20 * var(--rpx)) calc(26 * var(--rpx)); background:#e5ce99; color:#002727; border-radius:calc(12 * var(--rpx)); font-size:calc(27 * var(--rpx)); font-weight:600; line-height:1.4; }
.join-button text { font-size:calc(34 * var(--rpx)); font-weight:400; }
.home-paths { display:flex; margin:calc(24 * var(--rpx)) 0 calc(30 * var(--rpx)); border-bottom:calc(1 * var(--rpx)) solid #dedbd3; padding:calc(4 * var(--rpx)) 0 calc(28 * var(--rpx)); }
.home-path { flex:1; width:0; text-align:left; padding:calc(4 * var(--rpx)) calc(18 * var(--rpx)) calc(4 * var(--rpx)) 0; overflow:visible; }
.home-path + .home-path { border-left:calc(1 * var(--rpx)) solid #dedbd3; padding:calc(4 * var(--rpx)) 0 calc(4 * var(--rpx)) calc(24 * var(--rpx)); }
.path-number,.path-title,.path-desc { display:block; }
.path-number { color:#80714e; font-size: calc(24 * var(--rpx)); letter-spacing:calc(2 * var(--rpx)); }
.path-title { margin-top:calc(14 * var(--rpx)); color:#002727; font-size:calc(27 * var(--rpx)); font-weight:600; line-height:1.5; }
.path-title text { font-size:calc(24 * var(--rpx)); margin-left:calc(6 * var(--rpx)); }
.path-desc { margin-top:calc(8 * var(--rpx)); color:#717878; font-size: calc(24 * var(--rpx)); line-height:1.6; }
.section-kicker { display:block; font-size: calc(24 * var(--rpx)); color:#827452; letter-spacing:calc(3 * var(--rpx)); margin-bottom:calc(12 * var(--rpx)); }
.section-note { font-size:calc(21 * var(--rpx)); color:#717878; }
.home-page .section-head { align-items:flex-end; margin-top:calc(40 * var(--rpx)); }
.search-box { height:calc(80 * var(--rpx)); border-radius:calc(12 * var(--rpx)); box-shadow:none; margin-bottom:calc(16 * var(--rpx)); }
.search-text { font-weight:400; font-size:calc(24 * var(--rpx)); }
.search-lens { width:calc(26 * var(--rpx)); height:calc(26 * var(--rpx)); border-width:calc(3 * var(--rpx)); }
.nav-avatar { box-shadow:none; width:calc(64 * var(--rpx)); height:calc(64 * var(--rpx)); }
.nav-title { font-family:var(--em-font-family); font-size:calc(27 * var(--rpx)); }
.nav-greeting { font-weight:400; font-size: calc(24 * var(--rpx)); margin-top:calc(10 * var(--rpx)); }

.nav-brand { display:flex; align-items:center; justify-content:center; width:calc(96 * var(--rpx)); height:calc(96 * var(--rpx)); background:transparent; border:0; border-radius:0; }
.home-course-list { display:flex; flex-direction:column; gap:calc(28 * var(--rpx)); }
.home-course-card { overflow:hidden; border:calc(1 * var(--rpx)) solid #e6e1da; border-radius:calc(22 * var(--rpx)); background:#fff; }
.home-course-cover { position:relative; display:block; width:100%; height:auto; aspect-ratio:2752 / 1536; }
.home-series-entry { display:block; width:100%; padding:0; overflow:hidden; background:#fff; border:calc(1 * var(--rpx)) solid #e6e1da; border-radius:calc(18 * var(--rpx)); text-align:left; }
.home-series-entry:focus-visible { outline:calc(4 * var(--rpx)) solid #002727; outline-offset:calc(6 * var(--rpx)); }
.home-series-entry:active { background:#f2f6f4; }
.home-series-cover { width:100%; aspect-ratio:2752 / 1536; overflow:hidden; }
.home-series-link { display:flex; align-items:center; justify-content:space-between; padding:calc(26 * var(--rpx)) calc(30 * var(--rpx)); color:#002727; font-size:calc(26 * var(--rpx)); font-weight:600; line-height:1.5; }
.series-cover-image { display:block; width:100%; height:100%; }
.home-course-image { width:100%; height:100%; }
.home-course-badge { position:absolute; top:calc(22 * var(--rpx)); left:calc(22 * var(--rpx)); padding:calc(8 * var(--rpx)) calc(20 * var(--rpx)); border-radius:calc(6 * var(--rpx)); background:#e5ce99; color:#002727; font-size:calc(24 * var(--rpx)); }
.home-course-body { padding:calc(30 * var(--rpx)); }
.home-course-title { display:block; font-family:var(--em-font-serif); font-size:calc(36 * var(--rpx)); line-height:1.55; }
.home-course-subtitle { display:block; margin-top:calc(14 * var(--rpx)); color:#717878; font-size:calc(25 * var(--rpx)); line-height:1.8; }
.home-course-footer { display:flex; align-items:center; justify-content:space-between; gap:calc(16 * var(--rpx)); margin-top:calc(26 * var(--rpx)); padding-top:calc(24 * var(--rpx)); border-top:calc(1 * var(--rpx)) solid #e6e1da; }
.home-course-footer > text { flex:1; color:#717878; font-size:calc(23 * var(--rpx)); line-height:1.6; }
.course-button { flex-shrink:0; padding:calc(22 * var(--rpx)) calc(26 * var(--rpx)); min-height:calc(80 * var(--rpx)); border-radius:calc(12 * var(--rpx)); background:#002727; color:#fff; font-size:calc(25 * var(--rpx)); line-height:1.5; }

.series-entry { display:block; color:inherit; }
.series-entry-kicker { display:block; color:#80714e; font-size:calc(24 * var(--rpx)); letter-spacing:calc(3 * var(--rpx)); margin-bottom:calc(8 * var(--rpx)); }
.series-entry .home-course-title { font-size:calc(42 * var(--rpx)); }
.series-entry-footer { display:flex; align-items:center; justify-content:space-between; gap:calc(16 * var(--rpx)); margin-top:calc(20 * var(--rpx)); font-size:calc(24 * var(--rpx)); color:#717878; }
.series-entry-action { color:#002727; font-weight:600; }

.home-topic-list { display:flex; flex-direction:column; gap:calc(18 * var(--rpx)); }
.home-topic-card { display:block; box-sizing:border-box; width:100%; padding:calc(28 * var(--rpx)) calc(30 * var(--rpx)); border-radius:calc(18 * var(--rpx)); }
.topic-label { display:block; font-size:calc(22 * var(--rpx)); letter-spacing:calc(2 * var(--rpx)); }
.topic-title { display:block; margin-top:calc(14 * var(--rpx)); font-family:var(--em-font-serif); font-size:calc(36 * var(--rpx)); font-weight:600; line-height:1.4; }
.topic-footer { display:flex; align-items:center; justify-content:space-between; gap:calc(16 * var(--rpx)); margin-top:calc(24 * var(--rpx)); padding-top:calc(18 * var(--rpx)); border-top:calc(1 * var(--rpx)) solid rgba(0,39,39,.12); font-size:calc(23 * var(--rpx)); }
.topic-footer text:last-child { font-weight:600; }
.home-topic-card { overflow:hidden; padding:0; background:#fff; border:calc(1 * var(--rpx)) solid #e6e1da; }
.topic-cover { width:100%; aspect-ratio:16 / 9; overflow:hidden; background:#eee9df; }
.topic-cover-image { display:block; width:100%; height:100%; }
.topic-cover-fallback { display:flex; align-items:center; justify-content:center; height:100%; padding:calc(24 * var(--rpx)); color:#002727; font-family:var(--em-font-serif); font-size:calc(36 * var(--rpx)); }
.topic-body { padding:calc(28 * var(--rpx)) calc(30 * var(--rpx)); }
.topic-label { color:#827452; }
.topic-title { color:#002727; }
.topic-footer { color:#717878; }

.public-recording{overflow:hidden;margin-bottom:calc(24 * var(--rpx));background:#fff;border:calc(1 * var(--rpx)) solid #e6e1da;border-radius:calc(18 * var(--rpx))}
.public-recording-cover{display:block;width:100%;height:auto;aspect-ratio:3 / 2}
.archived-series{margin-top:calc(48 * var(--rpx))}.archived-series .library-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:calc(24 * var(--rpx))}.archived-series .library-title{font-family:var(--em-font-serif);font-size:calc(36 * var(--rpx));color:#002727}.archived-series .section-count{font-size:calc(24 * var(--rpx));color:#49625a}
.archived-course{overflow:hidden;background:#fff;border:calc(1 * var(--rpx)) solid #e6e1da;border-radius:calc(18 * var(--rpx))}.archived-course-copy{display:flex;justify-content:space-between;gap:calc(20 * var(--rpx));padding:calc(28 * var(--rpx)) calc(30 * var(--rpx));color:#49625a;font-size:calc(26 * var(--rpx));line-height:1.5}