:root {
  color-scheme: light;
  --ink: #172b27;
  --muted: #4c635b;
  --line: #d8e4de;
  --paper: #f4f7f4;
  --surface: #fff;
  --accent: #176247;
  --accent-dark: #0d4a35;
  --accent-light: #e4f2e9;
  --deep: #102c25;
  --danger: #8d2b31;
  --danger-light: #faeded;
  --warning: #754a09;
  --warning-light: #fff3d9;
  --radius: 18px;
  --wrap: 1160px;
  --sans: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Noto Sans CJK SC', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  overflow-wrap: anywhere;
}
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-dark); text-underline-offset: .2em; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; }
button:disabled { opacity: .55; cursor: not-allowed; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #237dff; outline-offset: 3px; }
a:focus-visible, button:focus-visible { border-radius: 5px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.3; }
h1 { font-size: clamp(1.8rem, 3.4vw, 2.65rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.25rem, 2.3vw, 1.65rem); letter-spacing: -.018em; }
h3 { font-size: 1.05rem; }
p + p { margin-top: .7rem; }

.wrap { width: min(var(--wrap), 100% - 2 * clamp(1rem, 4vw, 3rem)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 3; top: .6rem; left: .6rem; padding: .6rem 1rem; background: var(--surface); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: relative; border-bottom: 1px solid var(--line); background: var(--surface); }
.navbar { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: .8rem 2rem; }
.brand { display: inline-flex; min-height: 44px; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.brand-mark {
  flex: 0 0 38px;
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-dark);
  box-shadow: inset 0 0 0 1px #176247;
}
.brand-mark::before { content: ''; position: absolute; inset: 10px 8px; border: 1.5px solid #b7f0d6; border-radius: 6px; }
.brand-mark::after { content: ''; position: absolute; top: 17px; left: 13px; width: 4px; height: 4px; border-radius: 50%; background: #b7f0d6; box-shadow: 8px 0 #b7f0d6; }
.brand-name { display: block; font-size: .97rem; font-weight: 730; line-height: 1.27; }
.brand-subtitle { display: block; margin-top: .12rem; color: var(--muted); font-size: .72rem; line-height: 1.2; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .2rem .6rem; }
.nav-links form { display: flex; margin: 0; }
.nav-text { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .65rem; font-size: .89rem; font-weight: 620; text-decoration: none; }
.nav-text:hover { text-decoration: underline; }
.nav-user { color: var(--muted); font-size: .85rem; }
.site-footer { border-top: 1px solid var(--line); background: #edf3ed; }
.footer-inner { min-height: 68px; padding-block: .7rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .2rem 1rem; color: var(--muted); font-size: .83rem; }
.footer-inner a { display: inline-flex; align-items: center; min-height: 44px; }

.button {
  min-height: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  padding: .58rem 1rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--accent);
  color: white;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.35;
}
.button:hover { background: var(--accent-dark); color: white; }
.button.secondary { border-color: var(--line); background: var(--surface); color: var(--ink); }
.button.secondary:hover { border-color: var(--accent); background: var(--accent-light); color: var(--accent-dark); }
.button.ghost { background: transparent; color: var(--accent-dark); }
.button.ghost:hover { background: var(--accent-light); }
.button.small { padding-inline: .75rem; font-size: .88rem; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem .8rem; }
.button-row a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }
.text-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 650; }
.muted { color: var(--muted); }
.subtle { color: var(--muted); font-size: .88rem; }
.eyebrow { color: var(--accent-dark); font-size: .82rem; font-weight: 710; letter-spacing: .06em; }
.section { padding-block: clamp(1.5rem, 4vw, 3.75rem); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.05rem; }
.section-heading p, .heading p { margin-top: .45rem; color: var(--muted); }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.panel-pad { padding: clamp(1rem, 3vw, 1.65rem); }
.stack { display: grid; gap: 1rem; }
.flow > * + * { margin-top: .9rem; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin: 0 0 1rem; color: var(--muted); font-size: .88rem; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a + span::before { content: '/'; margin-right: .7rem; color: #779086; }
.notice-list { display: grid; gap: .5rem; list-style: none; margin: 1rem auto 0; padding: 0; }
.notice { padding: .72rem .93rem; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--accent-light); }
.notice.error { border-color: #eac2c5; background: var(--danger-light); color: var(--danger); }
.notice.warning { border-color: #ead9b4; background: var(--warning-light); color: var(--warning); }

.hero-wrap { padding-top: clamp(1.1rem, 4vw, 2.8rem); }
.hero {
  position: relative;
  isolation: isolate;
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(245px, .9fr);
  overflow: hidden;
  border: 1px solid #1b4a3c;
  border-radius: clamp(15px, 2vw, 26px);
  background: #102c25;
  color: #f5fbf7;
  box-shadow: 0 15px 28px #18423017;
}
.hero-copy { z-index: 1; align-self: center; padding: clamp(1.45rem, 5vw, 4rem); padding-right: 1rem; }
.hero h1 { margin-top: .55rem; font-size: clamp(2.05rem, 4.5vw, 3.65rem); line-height: 1.14; }
.hero h1 span { display: block; }
.hero .eyebrow { color: #a6e1c6; }
.hero .intro { max-width: 32rem; margin-top: .95rem; color: #c9dfd4; }
.hero .button-row { margin-top: 1.45rem; }
.hero .button { background: #bdeed3; color: #13372a; }
.hero .button:hover { background: #dbfae8; }
.hero .button.secondary { border-color: #568b76; background: transparent; color: #f5fbf7; }
.hero .button.secondary:hover { background: #2c5145; }
.hero-art {
  position: relative;
  min-height: 300px;
  display: grid;
  align-items: center;
  justify-items: center;
  background:
    radial-gradient(ellipse at center, #317c5e62, transparent 66%),
    repeating-linear-gradient(90deg, transparent 0 29px, #97ddbb16 29px 30px),
    repeating-linear-gradient(0deg, transparent 0 29px, #97ddbb16 29px 30px);
  mask-image: linear-gradient(90deg, transparent, #000 20%);
}
.hero-art::before, .hero-art::after { content: ''; position: absolute; border: 1px solid #afe4c942; border-radius: 50%; }
.hero-art::before { width: min(72%, 320px); aspect-ratio: 1; box-shadow: 0 0 0 18px #99dfbe0c, 0 0 0 44px #99dfbe09; }
.hero-art::after { width: min(87%, 385px); aspect-ratio: 1; border-style: dashed; }
.robot { position: relative; z-index: 1; width: 126px; height: 184px; filter: drop-shadow(0 12px 28px #0a1b176b); }
.robot-head { position: absolute; inset: 2px 9px auto; height: 55px; border: 1px solid #d9f4e4; border-radius: 22px 22px 17px 17px; background: linear-gradient(135deg, #c7f1da, #85bfa5); }
.robot-head::before { content: ''; position: absolute; inset: 9px 13px 12px; border: 1px solid #82af9b; border-radius: 12px; background: #23463b; }
.robot-head::after { content: ''; position: absolute; inset: 21px auto auto 36px; width: 9px; height: 9px; border-radius: 50%; background: #ccf7d9; box-shadow: 24px 0 #ccf7d9; }
.robot-neck { position: absolute; inset: 56px 43px auto; height: 13px; border-inline: 1px solid #b4e1cd; background: #80b5a1; }
.robot-body { position: absolute; inset: 67px 4px 13px; border: 1px solid #dcf5e7; border-radius: 22px 22px 33px 33px; background: linear-gradient(138deg, #d9f4e7, #9dd2b7 50%, #6aa38c); }
.robot-body::before { content: ''; position: absolute; inset: 14px 23px 32px; border: 1px solid #71ae93; border-radius: 7px; background: linear-gradient(151deg, #355d51, #142f26); }
.robot-body::after { content: ''; position: absolute; inset: auto 39px 14px; height: 4px; border-radius: 6px; background: #4c8a72; }
.robot-wheel { position: absolute; inset: auto 26px 3px; height: 12px; border: 1px solid #73a68f; border-radius: 0 0 10px 10px; background: #264b3e; z-index: -1; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.step { min-height: 138px; padding: 1.1rem; }
.step-index { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: .7rem; border-radius: 50%; background: var(--accent-light); color: var(--accent-dark); font: 720 .85rem var(--mono); }
.step p { margin-top: .36rem; color: var(--muted); font-size: .92rem; }

.auth-layout { width: min(100%, 760px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.auth-layout.narrow { width: min(100%, 510px); }
.auth-panel { padding: clamp(1.15rem, 4vw, 2.35rem); box-shadow: 0 14px 26px #20372e08; }
.auth-panel .heading { margin-bottom: 1.2rem; }
.form-fields { display: grid; gap: .87rem; }
.field { margin: 0; display: grid; min-width: 0; gap: .22rem; }
.field label { color: var(--ink); font-size: .9rem; font-weight: 690; }
.field label:has(input[type='checkbox']), .field.checkbox label { display: flex; align-items: start; gap: .55rem; }
.field input:not([type='checkbox'], [type='radio'], [type='hidden']), .field textarea, .field select {
  width: 100%;
  min-width: 0;
  min-height: 45px;
  border: 1px solid #a8beb1;
  border-radius: 8px;
  padding: .45rem .72rem;
  background: #fcfdfc;
  color: var(--ink);
}
.field select { padding-right: 1.2rem; }
.field textarea { min-height: 86px; resize: vertical; }
.field input[type='checkbox'], .field input[type='radio'] { width: 1.05rem; height: 1.05rem; margin: .25rem 0 0; accent-color: var(--accent); }
.field [aria-invalid='true'] { border-color: var(--danger) !important; }
.required-mark { margin-left: .25rem; color: var(--danger); }
.helptext { color: var(--muted); font-size: .84rem; line-height: 1.6; }
.helptext ul { margin: .15rem 0; padding-left: 1.25rem; }
.errorlist { margin: .1rem 0; padding-left: 1.15rem; color: var(--danger); font-size: .88rem; }
.form-fields > .errorlist { padding: .55rem .7rem .55rem 1.8rem; border-radius: 8px; background: var(--danger-light); }
.form-actions { margin-top: 1.1rem; }
.auth-links { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .75rem; color: var(--muted); font-size: .88rem; }
.auth-links a { min-height: 44px; display: inline-flex; align-items: center; }
.privacy-note { margin-block: .6rem .95rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: #f7faf7; color: var(--muted); font-size: .88rem; }
.privacy-note summary { min-height: 30px; color: var(--ink); font-weight: 680; cursor: pointer; }
.privacy-note p { margin: .28rem 0 0; }

.status-chip { display: inline-flex; align-items: center; width: fit-content; min-height: 25px; padding: .1rem .57rem; border-radius: 999px; background: var(--accent-light); color: var(--accent-dark); font-size: .76rem; font-weight: 700; }
.status-chip.pending, .status-chip.supplement { background: var(--warning-light); color: var(--warning); }
.status-chip.rejected, .status-chip.disabled { background: var(--danger-light); color: var(--danger); }
.account-heading { margin-bottom: 1.3rem; }
.account-heading .status-chip { margin-top: .7rem; }
.data-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem 1.2rem; margin: 0; }
.data-list div { min-width: 0; }
.data-list dt { color: var(--muted); font-size: .83rem; }
.data-list dd { margin: .15rem 0 0; font-weight: 630; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.course-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; border-top: 3px solid #79ae94; }
.course-card .description { margin-block: .4rem .8rem; color: var(--muted); font-size: .92rem; }
.course-card .button-row { margin-top: .85rem; }
.course-card .data-list { margin-top: .7rem; gap: .5rem; }
.course-meta { display: flex; align-items: center; gap: .4rem .65rem; flex-wrap: wrap; margin-bottom: .6rem; color: var(--muted); font-size: .82rem; }
.course-progress { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; align-items: center; margin-top: .8rem; }
.course-progress progress { grid-column: 1 / -1; width: 100%; height: 8px; appearance: none; border: none; border-radius: 1rem; accent-color: var(--accent); }
progress::-webkit-progress-bar { border-radius: 1rem; background: #e6efe8; }
progress::-webkit-progress-value { border-radius: 1rem; background: var(--accent); }
progress::-moz-progress-bar { border-radius: 1rem; background: var(--accent); }
.empty { min-height: 132px; display: grid; place-content: center start; }

.course-heading { margin-bottom: 1rem; }
.course-heading .subtle { margin-top: .42rem; }
.learning-layout { display: grid; grid-template-columns: minmax(220px, 275px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.lesson-list { padding: .7rem; min-width: 0; }
.lesson-list summary { display: list-item; min-height: 44px; padding: .45rem .5rem .58rem; font-size: .97rem; font-weight: 730; cursor: pointer; }
.lesson-list ol { margin: 0; padding: 0; display: grid; gap: .3rem; list-style: none; }
.lesson-list a, .lesson-list li > span { display: grid; grid-template-columns: auto 1fr; gap: .25rem .55rem; align-items: center; min-height: 44px; padding: .48rem .6rem; border: 1px solid transparent; border-radius: 7px; color: var(--ink); font-size: .91rem; text-decoration: none; }
.lesson-list a:hover { border-color: var(--line); background: #f0f7f1; }
.lesson-list [aria-current='page'] { border-color: #c0ddcc; background: var(--accent-light); color: var(--accent-dark); font-weight: 690; }
.lesson-number { color: var(--muted); font: 620 .77rem var(--mono); }
.lesson-main { min-width: 0; }
.lesson-intro { margin-block: .5rem 1rem; white-space: pre-wrap; color: var(--muted); }
.resource-list { display: grid; gap: .72rem; margin-block: 1rem; }
.resource-list > h3 { margin-top: .15rem; }
.resource-list ul { padding: 0; margin: 0; list-style: none; display: flex; gap: .45rem; flex-wrap: wrap; }
.resource-list a { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: .89rem; text-decoration: none; }
.resource-list a:hover, .resource-list [aria-current='page'] { border-color: #a3c7b3; background: var(--accent-light); color: var(--accent-dark); }
.media-panel { min-width: 0; overflow: hidden; }
.media-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: .75rem 1rem; gap: .45rem; border-bottom: 1px solid var(--line); }
.media-head h3 { font-size: .98rem; }
.media-frame { margin: 0; display: grid; justify-items: center; padding: .5rem; background: #e3ece5; }
.media-frame img { width: auto; max-width: 100%; max-height: 78vh; object-fit: contain; }
.media-frame img:fullscreen { max-height: none; width: 100%; height: 100%; background: #14221b; }
.media-frame.video { padding: 0; background: #12201b; }
.media-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 65vh; background: #12201b; }
.media-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .45rem .65rem; padding: .6rem .9rem; }
.media-bar .page-indicator { white-space: nowrap; }
.media-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.media-note { padding: .56rem .9rem; color: var(--muted); font-size: .83rem; }
.media-note:empty { display: none; }
.reader-pages { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.reader-pages a { min-width: 44px; }
.lesson-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }

@media (max-width: 800px) {
  .navbar { gap: .5rem; }
  .navigation-name { display: none; }
  .learning-layout { grid-template-columns: minmax(0, 1fr); }
  .lesson-list ol { grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); }
}
@media (max-width: 620px) {
  .navbar { min-height: 64px; }
  .brand { gap: .55rem; }
  .brand-mark { flex-basis: 32px; width: 32px; height: 32px; }
  .brand-mark::before { inset: 8px 6px; }
  .brand-mark::after { top: 14px; left: 10px; }
  .brand-name { font-size: .85rem; }
  .brand-subtitle { font-size: .67rem; }
  .nav-links { gap: .18rem; }
  .nav-text { padding-inline: .35rem; font-size: .8rem; }
  .nav-links .button { padding-inline: .5rem; font-size: .8rem; }
  .hero { display: block; min-height: 335px; }
  .hero-copy { position: relative; z-index: 1; max-width: 455px; padding: 1.55rem; }
  .hero-art { position: absolute; z-index: 0; inset: 0 0 0 40%; min-height: 0; opacity: .24; }
  .robot { transform: scale(.78); }
  .steps { grid-template-columns: 1fr; gap: .65rem; }
  .step { position: relative; min-height: 0; padding: .8rem .9rem .82rem 3.55rem; }
  .step-index { position: absolute; top: .78rem; left: .9rem; }
  .step p { margin-top: .15rem; }
  .media-bar { align-items: flex-start; }
}
@media (max-width: 360px) {
  .navbar { align-items: flex-start; flex-wrap: wrap; padding-block: .35rem; }
  .nav-links { justify-content: flex-start; }
  .hero-copy { padding: 1.2rem; }
  .hero h1 { font-size: 1.85rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .nav-text { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
}

.chapter-index { display: grid; margin: 0; padding: 0; list-style: none; }
.chapter-index li + li { border-top: 1px solid var(--line); }
.chapter-index a { min-height: 52px; display: grid; align-items: center; grid-template-columns: 1.4rem minmax(0, 1fr) auto auto; gap: .5rem .7rem; padding: .65rem .25rem; color: var(--ink); text-decoration: none; }
.chapter-index a:hover { color: var(--accent-dark); background: #f4faf5; }
.chapter-summary { display: block; margin-top: .2rem; color: var(--muted); font-size: .86rem; }
.index-arrow { grid-column: 4; color: var(--accent-dark); }
.demo-badge { margin-bottom: .6rem; }
.account-heading + .data-list + .notice { margin-top: 1rem; }
.resource-list a { gap: .2em; }
.lesson-bottom .text-link { min-height: 44px; }

.document-frame { display: block; overflow: auto; overscroll-behavior-inline: contain; }
.document-frame img { margin-inline: auto; }
.document-frame.is-enlarged img { width: max(100%, 880px); max-width: none; max-height: none; }
.document-frame.is-enlarged img:fullscreen { width: 100%; }
@media (hover: none) {
  .media-actions, .reader-pages { column-gap: .45rem; }
}