/* D1ming learning home: content first, shared blue/yellow brand. */
.home-learning {
  --home-paper: #f6f8fc;
  --home-surface: #fff;
  --home-ink: #183653;
  --home-muted: #596c83;
  --home-blue: #176acb;
  --home-line: #e4eaf2;
  --home-yellow: #ffcc4c;
  margin: 0;
  background: var(--home-paper);
  color: var(--home-ink);
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.home-learning :where(h1, h2, h3, p) { margin: 0; }
.home-learning a { color: inherit; text-decoration: none; }
.home-learning :where(a, main):focus-visible { outline: 3px solid var(--home-blue); outline-offset: 5px; }
.home-learning :where(svg) { display: block; flex-shrink: 0; }
.home-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--home-line); background: var(--home-surface); }
.home-header-inner, .home-shell { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.home-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.home-learning .portal-brand { display: flex; align-items: center; flex-shrink: 0; }
.home-learning .portal-brand-logo { display: block; width: 148px; height: auto; }
.home-nav { display: flex; align-items: center; gap: 8px; }
.home-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 12px; font-size: 15px; font-weight: 600; }
.home-nav a[aria-current="page"] { background: #edf5ff; color: var(--home-blue); }
.home-nav a:hover { color: var(--home-blue); background: #f3f7fc; }
.header-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: #fff6db; font-size: 13px; font-weight: 600; }
.header-play svg { width: 24px; height: 24px; }
.header-play:hover { background: #ffecb1; }
.home-shell > main { display: grid; gap: 24px; padding-top: 24px; }
.learning-desk {
  position: relative; display: flex; align-items: center; min-height: 216px;
  overflow: hidden; padding: 24px 36px; border: 1px solid #d9e9fb;
  border-radius: 20px; background: #eaf4ff;
}
.learning-desk::after { content: ""; position: absolute; width: 450px; height: 450px; top: -112px; right: -52px; border-radius: 50%; border: 48px solid #e0efff; pointer-events: none; }
.welcome-copy { position: relative; z-index: 2; }
.welcome-kicker { display: flex; align-items: center; gap: 8px; color: #506d8d; font-size: 13px; font-weight: 500; }
.welcome-kicker svg { width: 24px; height: 24px; }
.learning-desk h1 { margin-top: 8px; font-size: clamp(30px, 3.3vw, 40px); line-height: 1.25; letter-spacing: -.04em; font-weight: 800; }
.learning-desk h1 span { color: var(--home-blue); }
.welcome-description { margin-top: 8px !important; color: #506d8d; font-size: 15px; }
.study-console { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.home-learning .start-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 46px; padding: 8px 20px; border-radius: 12px; background: var(--home-blue); box-shadow: 0 3px 0 #1156a9; color: #fff; font-size: 14px; font-weight: 600; }
.start-button span { font-size: 22px; line-height: 1; }
.home-learning .start-button:hover { background: #125aae; }
.study-console > span { color: #506d8d; font-size: 12px; }
.welcome-art { position: absolute; z-index: 1; top: 50%; right: 44px; width: 336px; height: auto; transform: translateY(-50%); pointer-events: none; }
.learning-app-strip { scroll-margin-top: 104px; }
.home-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.home-section-heading h2 { display: flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 750; line-height: 1.5; letter-spacing: -.025em; }
.home-section-heading > p { color: var(--home-muted); font-size: 13px; }
.heading-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--home-yellow); }
.heading-spark { width: 24px; height: 24px; }
.learning-app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.learning-app {
  --course-tone: #1565b7; --course-soft: #edf6ff; --course-border: #d8e8f9;
  display: block; min-width: 0; overflow: hidden; border: 1px solid var(--course-border); border-radius: 16px;
  background: var(--home-surface); transition: transform 180ms ease, box-shadow 180ms ease;
}
.learning-app-mid { --course-tone: #1d785d; --course-soft: #edf8f2; --course-border: #d9ebe1; }
.learning-app-write { --course-tone: #b44f39; --course-soft: #fff1eb; --course-border: #f2e0d7; }
.learning-app-math { --course-tone: #8f6119; --course-soft: #fff8e7; --course-border: #eee4cb; }
.learning-app:hover { transform: translateY(-4px); box-shadow: 0 8px 20px #1c3d6510; }
.course-cover { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 120px; padding: 16px 20px; background: var(--course-soft); }
.course-brand { color: var(--course-tone); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.course-cover h3 { margin-top: 4px; color: var(--home-ink); font-size: 23px; font-weight: 750; letter-spacing: -.025em; white-space: nowrap; }
.course-cover p { margin-top: 6px; font-size: 12px; color: var(--course-tone); white-space: nowrap; }
.course-illustration { width: 80px; height: 88px; }
.course-summary { padding: 16px 20px 12px; }
.course-summary > p { font-size: 12px; color: var(--home-muted); line-height: 1.7; }
.course-enter { display: flex; justify-content: space-between; align-items: center; min-height: 36px; margin-top: 4px; color: var(--course-tone); font-size: 13px; font-weight: 600; }
.course-enter b { font-size: 22px; font-weight: 400; }
.practice-strip { scroll-margin-top: 104px; }
.section-more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--home-muted) !important; font-size: 13px; }
.section-more:hover { color: var(--home-blue) !important; }
.section-more span { font-size: 20px; }
.practice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.practice-card { position: relative; display: flex; align-items: center; justify-content: space-between; min-width: 0; overflow: hidden; padding: 24px 28px; border: 1px solid #d6e9e3; border-radius: 16px; background: #eaf7f2; transition: transform 180ms ease, box-shadow 180ms ease; }
.practice-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #1c3d6510; }
.practice-sword { border-color: #eddfd1; background: #fff3e8; }
.practice-copy { position: relative; z-index: 2; }
.practice-tag { color: #347662; font-size: 11px; font-weight: 600; }
.practice-sword .practice-tag { color: #925535; }
.practice-copy h3 { margin-top: 5px; font-size: 24px; line-height: 1.5; font-weight: 750; }
.practice-copy p { margin-top: 4px; color: #526f68; font-size: 12px; }
.practice-sword .practice-copy p { color: #806754; }
.practice-start { display: inline-flex; align-items: center; gap: 20px; margin-top: 14px; font-size: 13px; font-weight: 600; color: #246e56; }
.practice-sword .practice-start { color: #a05c33; }
.practice-start b { font-size: 20px; line-height: 1; font-weight: 400; }
.keyboard-art, .sword-art { position: relative; width: 172px; height: 136px; flex: 0 0 172px; margin-left: 12px; }
.keyboard-art > svg { position: absolute; width: 172px; height: 116px; bottom: -4px; left: 0; transform: rotate(-7deg); transition: transform 180ms; }
.practice-card:hover .keyboard-art > svg { transform: rotate(-3deg); }
.floating-key { position: absolute; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid #fff; border-radius: 9px; box-shadow: 0 4px 0 #95bfae; background: #fff; color: #22785b; font-size: 19px; font-weight: 750; }
.key-a { top: 3px; left: 12px; transform: rotate(-12deg); }
.key-f { top: -3px; right: 34px; background: #ffcf57; color: #654921; box-shadow: 0 4px 0 #d2a239; transform: rotate(12deg); }
.sword-art > svg { width: 168px; height: 144px; }
.sword-spark { position: absolute; color: #e2a232; font-size: 22px; }
.spark-one { left: 5px; top: 8px; }
.spark-two { right: 0; bottom: 16px; font-size: 14px; }
.practice-note { display: flex; align-items: start; justify-content: center; gap: 7px; margin-top: 14px !important; color: var(--home-muted); font-size: 12px; }
.practice-note svg { width: 17px; height: 17px; margin-top: 1px; }
.progress-section { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 28px; scroll-margin-top: 104px; background: #fff; border: 1px solid var(--home-line); border-radius: 16px; }
.progress-intro { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.progress-intro > svg { width: 40px; height: 40px; }
.progress-intro h2 { font-size: 16px; font-weight: 650; }
.progress-intro p { margin-top: 4px; color: var(--home-muted); font-size: 12px; }
.progress-links { display: flex; align-items: center; gap: 12px; }
.progress-links a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; background: #f6f8fc; border-radius: 8px; color: #526b85; font-size: 12px; white-space: nowrap; }
.progress-links a:hover { background: #eaf3ff; color: var(--home-blue); }
.home-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; color: var(--home-muted); font-size: 12px; }
.home-footer strong { margin-right: 12px; font-size: 15px; color: #49627d; }
.home-footer a { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; }
.home-footer a:hover { color: var(--home-blue); }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 100; padding: 12px 20px; background: #fff; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1100px) {
  .home-header-inner, .home-shell { width: calc(100% - 48px); }
  .home-nav a { padding-inline: 14px; }
  .welcome-art { width: 320px; right: 16px; }
  .learning-desk { padding-inline: 32px; }
  .course-cover { padding: 16px; }
  .course-cover h3 { font-size: 21px; }
  .course-illustration { width: 62px; height: 72px; }
  .course-summary { padding-inline: 16px; }
  .course-summary > p { min-height: 40px; }
  .practice-card { padding: 24px; }
  .keyboard-art, .sword-art { flex-basis: 128px; width: 128px; }
  .keyboard-art > svg { width: 134px; }
  .sword-art > svg { width: 132px; }
  .progress-section { flex-wrap: wrap; gap: 16px; }
  .progress-links { flex: 1; justify-content: flex-end; }
}
@media (max-width: 900px) {
  .home-header-inner { gap: 16px; }
  .home-learning .portal-brand-logo { width: 124px; }
  .home-nav { gap: 0; }
  .home-nav a { padding-inline: 12px; font-size: 14px; }
  .header-play { padding-inline: 12px; }
  .header-play svg { display: none; }
  .learning-desk h1 { font-size: 36px; }
  .welcome-art { width: 240px; right: 8px; }
  .study-console > span { display: none; }
  .learning-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-cover { padding: 20px 24px; min-height: 124px; }
  .course-cover h3 { font-size: 23px; }
  .course-illustration { width: 88px; height: 88px; }
  .course-summary { padding: 12px 24px 10px; }
  .course-summary > p { min-height: 0; }
  .practice-card { padding: 20px; }
  .practice-copy h3 { font-size: 22px; }
  .practice-copy p { max-width: 15em; }
  .keyboard-art, .sword-art { flex-basis: 96px; width: 96px; margin-left: 4px; }
  .keyboard-art > svg { width: 110px; bottom: -5px; }
  .sword-art > svg { width: 110px; }
  .key-f { right: 0; }
  .progress-section { display: grid; }
  .progress-links { justify-content: start; }
}
@media (max-width: 720px) {
  .home-header-inner, .home-shell { width: calc(100% - 32px); }
  .home-header-inner { position: relative; flex-wrap: wrap; min-height: 0; gap: 8px; padding-top: 12px; }
  .home-learning .portal-brand-logo { width: 118px; }
  .header-play { position: absolute; top: 12px; right: 0; min-height: 44px; }
  .home-nav { order: 3; width: 100%; justify-content: space-between; padding-bottom: 8px; }
  .home-nav a { justify-content: center; flex: 1; min-height: 44px; padding-inline: 8px; font-size: 13px; }
  .home-shell > main { padding-top: 16px; gap: 24px; }
  .learning-desk { min-height: 224px; padding: 24px; border-radius: 16px; }
  .welcome-kicker { font-size: 11px; }
  .welcome-kicker svg { width: 20px; height: 20px; }
  .learning-desk h1 { max-width: 300px; margin-top: 12px; font-size: 32px; }
  .welcome-description { font-size: 13px; }
  .study-console { margin-top: 20px; }
  .home-learning .start-button { gap: 16px; min-height: 44px; padding-inline: 16px; font-size: 13px; }
  .welcome-art { width: 190px; right: -6px; top: 58%; }
  .home-section-heading { align-items: center; gap: 12px; margin-bottom: 12px; }
  .home-section-heading h2 { gap: 6px; font-size: 20px; }
  .home-section-heading > p { display: none; }
  .learning-app-grid { gap: 12px; }
  .course-cover { position: relative; min-height: 142px; align-items: start; overflow: hidden; padding: 16px; }
  .course-cover h3 { font-size: 21px; }
  .course-cover p { margin-top: 8px; font-size: 10px; }
  .course-brand { font-size: 10px; }
  .course-illustration { position: absolute; width: 62px; height: 66px; bottom: -2px; right: 0; opacity: .9; }
  .course-summary { padding: 12px 16px 10px; }
  .course-summary > p { display: none; }
  .course-enter { min-height: 28px; margin: 0; font-size: 12px; }
  .section-more { font-size: 12px; gap: 6px; }
  .heading-spark { width: 20px; height: 20px; }
  .practice-grid { grid-template-columns: 1fr; gap: 12px; }
  .practice-card { padding: 20px 24px; }
  .practice-copy p { max-width: none; font-size: 11px; }
  .keyboard-art, .sword-art { flex-basis: 120px; width: 120px; height: 124px; }
  .keyboard-art > svg { width: 128px; }
  .sword-art > svg { width: 124px; height: 128px; }
  .key-f { right: 12px; }
  .practice-note { justify-content: start; font-size: 11px; }
  .progress-section { padding: 20px; gap: 16px; }
  .progress-intro { gap: 12px; }
  .progress-intro > svg { width: 32px; height: 32px; }
  .progress-intro h2 { font-size: 15px; }
  .progress-intro p { font-size: 11px; }
  .progress-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .progress-links a { justify-content: space-between; }
  .learning-app-strip, .practice-strip, .progress-section { scroll-margin-top: 132px; }
  .home-footer { align-items: start; flex-direction: column; gap: 4px; padding-block: 20px; font-size: 11px; }
}
@media (max-width: 560px) {
  .welcome-art { width: 150px; top: auto; bottom: -8px; right: -12px; transform: none; opacity: .55; }
  .learning-desk::after { width: 240px; height: 240px; top: 70px; right: -100px; border-width: 28px; }
  .welcome-copy { width: 100%; }
  .learning-desk h1 { font-size: 30px; }
}
@media (max-width: 360px) {
  .home-header-inner, .home-shell { width: calc(100% - 24px); }
  .learning-desk { padding: 20px; }
  .learning-desk h1 { font-size: 27px; }
  .welcome-art { width: 120px; }
  .course-cover { padding: 14px 12px; }
  .course-cover h3 { font-size: 20px; }
  .course-summary { padding-inline: 12px; }
  .practice-card { padding-inline: 20px; }
  .keyboard-art, .sword-art { flex-basis: 76px; width: 76px; opacity: .8; }
  .keyboard-art > svg, .sword-art > svg { width: 92px; }
  .key-a { left: 0; }
  .key-f { right: -8px; }
  .practice-copy p { max-width: 15em; }
  .heading-spark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-learning *, .home-learning *::before, .home-learning *::after { transition: none !important; scroll-behavior: auto !important; }
}