:root {
  color-scheme: light;
  --bg: oklch(1 0 0);
  --ink: oklch(.23 .018 343);
  --muted: oklch(.46 .015 343);
  --brand: oklch(.51 .20 343);
  --brand-dark: oklch(.40 .16 343);
  --rose: oklch(.96 .025 343);
  --surface: oklch(.975 .003 343);
  --line: oklch(.89 .009 343);
  --accent: oklch(.91 .11 125);
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 6rem;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  color: var(--ink);
  font-size: 16px;
  font-synthesis: none;
  font-kerning: normal;
}
* {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: 2rem}
body {margin: 0; background: var(--bg); line-height: 1.65}
button, input, select {font: inherit; color: inherit}
button, select {cursor: pointer}
button, a, input, select {-webkit-tap-highlight-color: transparent}
a {color: inherit; text-decoration: none}
button {background: none}
img {display: block; width: 100%; height: auto}
svg {display: block}
h1, h2, h3, p {margin: 0}
h1, h2, h3 {text-wrap: balance}
p {text-wrap: pretty}
[hidden] {display: none !important}
::selection {background: var(--accent); color: var(--ink)}
:focus-visible {outline: 3px solid var(--brand); outline-offset: 5px}
.wrap {width: min(100% - 6rem, 1248px); margin-inline: auto}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0}
.skip-link {position: absolute; left: 1rem; top: -6rem; padding: 1rem; background: var(--ink); color: var(--bg); z-index: 3}
.skip-link:focus {top: 1rem}
.site-header {height: 112px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 2rem}
.brand {display: flex; align-items: center; gap: .75rem; flex-shrink: 0; font-size: 1.25rem; font-weight: 750; line-height: 1.4}
.brand svg {width: 40px; height: 40px; fill: var(--brand)}
.brand small {display: block; font-size: .75rem; font-weight: 450; letter-spacing: .035em; color: var(--muted); margin-top: .25rem}
nav {display: flex; align-items: center; gap: 2rem; font-size: .875rem; font-weight: 550}
nav a {display: flex; align-items: center; min-height: 44px}
nav a:hover, .text-link:hover {color: var(--brand)}
.header-cta {gap: 1.5rem; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 6px}
.hero {display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; padding-block: 5.5rem 6.5rem}
.intro-label {display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--brand); font-weight: 600; margin-bottom: 1.5rem}
.intro-label > span {font-size: 1.5rem; line-height: 1}
h1 {font-size: clamp(2.75rem, 4.6vw, 4.25rem); line-height: 1.3; letter-spacing: -.035em; font-weight: 800}
h1 > span {color: var(--brand)}
.hero-description {font-size: 1rem; line-height: 1.95; color: var(--muted); margin-top: 1.5rem; max-width: 55ch}
.hero-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem}
.button {display: inline-flex; align-items: center; justify-content: center; gap: 2rem; min-height: 48px; padding: .875rem 1.5rem; border: 1px solid var(--line); border-radius: 6px; font-size: .9375rem; font-weight: 650; transition: background .18s ease-out, transform .18s ease-out}
.button:hover {transform: translateY(-2px); background: var(--rose)}
.button.primary {background: var(--brand); color: var(--bg); border: 0}
.button.primary:hover {background: var(--brand-dark)}
.hero-note {font-size: .8125rem; color: var(--muted)}
.hero-visual {position: relative; min-width: 0; padding: 1.5rem; background: var(--rose); border-radius: 12px; transform: rotate(1.5deg); animation: arrive .65s ease-out both}
.visual-heading {display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 550; padding-bottom: 1rem}
.live-dot {width: 7px; height: 7px; border-radius: 50%; background: var(--brand)}
.visual-plus {margin-left: auto; font-size: 1.25rem; font-weight: 400}
.hero-preview {display: block; position: relative; background: var(--bg); border-radius: 6px; overflow: hidden}
.hero-preview img {height: 300px; object-fit: cover; object-position: center}
.preview-open {position: absolute; bottom: 1rem; right: 1rem; padding: .5rem .875rem; border-radius: 4px; font-size: .8125rem; background: var(--ink); color: var(--bg); transition: background .2s ease-out}
.hero-preview:hover .preview-open {background: var(--brand)}
.visual-footer {display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; font-size: .875rem}
.visual-symbol {font-family: Georgia, serif; font-size: 2rem; line-height: 1}
.float-note {position: absolute; bottom: -1.25rem; right: 2rem; transform: rotate(-5deg); padding: .75rem 1.25rem; background: var(--accent); font-size: .8125rem; border-radius: 3px; color: var(--ink)}
.learning-strip {border-block: 1px solid var(--line)}
.strip-inner {display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 88px; padding-block: 1.5rem}
.strip-inner p {font-size: .9375rem; color: var(--muted)}
.strip-inner strong {color: var(--ink); font-weight: 600; margin-left: .5rem}
.strip-inner > div {display: flex; gap: 2rem; font-size: .8125rem; color: var(--muted)}
.strip-inner > div span::before {content: '↗'; color: var(--brand); margin-right: .5rem}
.featured-section {padding-block: 5rem}
.section-heading {display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem}
.section-note {display: block; font-size: .875rem; color: var(--muted); margin-bottom: .5rem}
h2 {font-size: clamp(1.75rem, 2.8vw, 2.25rem); line-height: 1.45; font-weight: 750; letter-spacing: -.025em}
.text-link {display: inline-flex; align-items: center; gap: 1.5rem; font-size: .875rem; font-weight: 550; min-height: 44px; flex-shrink: 0}
.featured-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 2rem}
.feature {display: block; min-width: 0}
.feature-image {padding: 1.5rem 1.5rem 0; background: var(--surface); border-radius: 8px; overflow: hidden; position: relative; aspect-ratio: 1.85}
.feature:nth-child(2) .feature-image {background: var(--rose)}
.feature-image img {width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 4px 4px 0 0; transition: transform .35s ease-out}
.feature:hover .feature-image img {transform: translateY(-4px)}
.image-caption {position: absolute; left: 2.5rem; bottom: .875rem; padding: .375rem .625rem; font-size: .75rem; background: var(--bg); color: var(--ink); border-radius: 3px}
.feature-heading {display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem}
.topic-label {color: var(--brand); font-size: .8125rem; font-weight: 550}
.feature h3 {font-size: 1.5rem; line-height: 1.5; margin-top: .25rem}
.feature-heading > span {font-size: 1.5rem; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; transition: background .2s ease-out}
.feature:hover .feature-heading > span {background: var(--accent); border-color: transparent}
.feature > p {color: var(--muted); font-size: 1rem; margin-top: .5rem}
.library-section {padding-block: 1rem 6rem}
.library-count {font-size: .875rem; color: var(--muted); white-space: nowrap; padding-bottom: .5rem}
.filter-panel {border-top: 1px solid var(--line); padding-top: 1.5rem; margin-bottom: .5rem}
.filter-top {display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap}
.subject-filters {display: flex; flex-wrap: wrap; gap: .5rem}
.subject-filters button {border: 0; padding: .625rem 1rem; border-radius: 5px; font-size: .875rem; min-height: 44px; color: var(--muted)}
.subject-filters button[aria-pressed="true"] {background: var(--ink); color: var(--bg)}
.subject-filters button:hover:not([aria-pressed="true"]) {background: var(--rose); color: var(--brand)}
.subject-filters span {font-size: .75rem; margin-left: .5rem}
.search-box {display: flex; align-items: center; gap: .75rem; padding-inline: 1rem .75rem; border: 1px solid var(--line); border-radius: 6px; width: min(100%, 360px); min-height: 48px}
.search-box:focus-within {outline: 2px solid var(--brand); outline-offset: 2px}
.search-box svg {width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.6; flex-shrink: 0}
.search-box input {border: 0; background: transparent; min-width: 0; width: 100%; outline: 0; height: 44px; font-size: .875rem}
.search-box input::placeholder {color: var(--muted); opacity: 1}
.search-box kbd {font-family: inherit; font-size: .8125rem; color: var(--muted); padding-inline: .375rem; border: 1px solid var(--line); border-radius: 3px}
.filter-bottom {display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; padding-block: 1rem; font-size: .8125rem; color: var(--muted)}
.filter-bottom label {display: flex; align-items: center; gap: .5rem}
select {border: 0; background: var(--bg); font-size: .8125rem; min-height: 44px; max-width: 180px; color: var(--ink); padding-inline: .5rem}
.reset-filters {margin-left: auto; border: 0; font-size: .8125rem; min-height: 44px; color: var(--brand); padding: .5rem}
.course {border-top: 1px solid var(--line)}
.course:last-child {border-bottom: 1px solid var(--line)}
.course-link {display: flex; align-items: center; gap: 2rem; padding: 1.5rem 0; transition: background .2s ease-out}
.course-link:hover {background: var(--surface)}
.course-image {width: 208px; flex: 0 0 208px; border-radius: 6px; overflow: hidden; background: var(--surface); aspect-ratio: 1.6}
.course-image img {width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .25s ease-out}
.course-link:hover img {transform: scale(1.025)}
.course-copy {flex: 1; min-width: 0}
.course-meta {display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .75rem; margin-bottom: .375rem}
.course-meta > span:last-child {background: var(--surface); padding-inline: .5rem; border-radius: 3px}
.course h3 {font-size: 1.25rem; line-height: 1.5; font-weight: 650}
.course-copy p {color: var(--muted); font-size: .875rem; line-height: 1.8; max-width: 68ch; margin-top: .375rem}
.version {display: inline-block; margin-top: .5rem; color: var(--brand); font-size: .75rem}
.course-arrow {font-size: 1.5rem; min-width: 44px; text-align: center; color: var(--muted)}
.course-link:hover .course-arrow {color: var(--brand)}
.empty-state {text-align: center; padding: 4rem 1rem; border-block: 1px solid var(--line)}
.empty-state > span {font-size: 3rem; color: var(--brand)}
.empty-state h3 {font-size: 1.25rem; margin: .5rem 0}
.empty-state p {font-size: 1rem; color: var(--muted); margin-bottom: 1.5rem}
.about-section {background: var(--rose)}
.about-inner {display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; padding-block: 4.5rem}
.about-inner > div:first-child {display: flex; align-items: center; gap: 1.5rem}
.about-mark {color: var(--brand); font-size: 5rem; line-height: 1}
.about-inner h2 {font-size: clamp(1.75rem, 2.8vw, 2.25rem); line-height: 1.55}
.about-copy p {font-size: .9375rem; color: var(--muted); line-height: 1.9; max-width: 60ch}
.about-copy p + p {margin-top: .75rem}
.about-copy .text-link {margin-top: 1rem; color: var(--brand)}
.site-footer {display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 112px; padding-block: 1.5rem; font-size: .75rem; color: var(--muted)}
.footer-brand {font-size: .875rem; font-weight: 650; color: var(--ink)}
.footer-brand span {font-size: .75rem; font-weight: 400; color: var(--muted); margin-left: .5rem}
.site-footer > a {min-height: 44px; display: flex; align-items: center}
@keyframes arrive {from {transform: translateY(12px) rotate(0)} to {transform: translateY(0) rotate(1.5deg)}}
@media (max-width: 1050px) {
  .wrap {width: calc(100% - 4rem)}
  .hero {gap: 2rem; padding-block: 4rem 5rem}
  .hero-preview img {height: 270px}
  .hero-note {display: none}
  .strip-inner {gap: 1rem}
  .strip-inner > div {gap: 1rem}
  .course-image {width: 176px; flex-basis: 176px}
  .about-inner {gap: 2rem}
}
@media (max-width: 760px) {
  .wrap {width: calc(100% - 3rem)}
  .site-header {height: 88px; gap: 1rem}
  .brand {font-size: 1rem}
  .brand svg {width: 32px; height: 32px}
  .brand small {font-size: .625rem}
  nav {gap: 1rem; font-size: .8125rem}
  nav .header-cta {display: none}
  .hero {grid-template-columns: 1fr; gap: 3rem; padding-block: 3rem 4rem}
  .hero-copy {max-width: 600px}
  h1 {font-size: clamp(2.5rem, 8vw, 3.5rem)}
  .hero-description {font-size: .9375rem}
  .hero-visual {transform: none; margin-inline: .5rem; animation: none}
  .hero-preview img {height: auto; aspect-ratio: 1.6}
  .strip-inner {align-items: flex-start; flex-direction: column; gap: .75rem}
  .strip-inner > div {gap: 1.5rem; font-size: .75rem}
  .featured-section {padding-block: 3rem}
  .section-heading {gap: 1rem}
  .section-note {font-size: .8125rem}
  h2 {font-size: 1.5rem}
  .featured-grid {gap: 1.5rem}
  .feature-image {padding: .75rem .75rem 0; aspect-ratio: 1.4}
  .image-caption {left: 1rem; bottom: .5rem; font-size: .625rem}
  .feature-heading {margin-top: 1rem}
  .feature h3 {font-size: 1.125rem}
  .feature-heading > span {width: 32px; height: 32px; font-size: 1.125rem; flex-shrink: 0}
  .feature > p {font-size: .875rem}
  .filter-top {align-items: stretch}
  .search-box {width: 100%}
  .filter-bottom {gap: .75rem}
  .library-section {padding-bottom: 3rem}
  .course-link {gap: 1rem; padding-block: 1.25rem}
  .course-image {width: 128px; flex-basis: 128px; aspect-ratio: 1.2}
  .course h3 {font-size: 1.125rem}
  .course-copy p {font-size: .8125rem}
  .course-meta {font-size: .6875rem; gap: .5rem; flex-wrap: wrap}
  .course-arrow {display: none}
  .about-inner {grid-template-columns: 1fr; gap: 1.5rem; padding-block: 3rem}
  .about-mark {font-size: 4rem}
  .site-footer {flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between}
  .site-footer p {order: 3; width: 100%}
}
@media (max-width: 430px) {
  .wrap {width: calc(100% - 2rem)}
  nav a[href="#about"] {display: none}
  .hero {padding-top: 2.5rem}
  .hero-visual {padding: 1rem}
  .intro-label {font-size: .75rem}
  .section-heading > .text-link {font-size: .75rem; gap: .5rem}
  .featured-grid {grid-template-columns: 1fr; gap: 2rem}
  .feature-image {aspect-ratio: 1.85}
  .feature h3 {font-size: 1.25rem}
  .image-caption {font-size: .75rem}
  .course-image {width: 88px; flex-basis: 88px; aspect-ratio: 1}
  .course-link {align-items: flex-start}
  .course h3 {font-size: 1rem}
  .course-meta > span:last-child {display: none}
  .course-copy p {font-size: .8125rem}
  .library-count {font-size: .75rem}
  .strip-inner > div {gap: .75rem}
  .strip-inner p {font-size: .8125rem}
  .visual-footer {font-size: .75rem}
  .float-note {font-size: .75rem; right: 1rem}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto}
  *, *::before, *::after {animation: none !important; transition: none !important}
}