:root {
  color-scheme: light;
  --ink: #1d2835;
  --muted: #657386;
  --paper: #f7f9fc;
  --card: #ffffff;
  --line: #d8e0ea;
  --brand: #176b87;
  --brand-dark: #0d4053;
  --accent: #ef8b55;
  --soft: #eaf5f8;
  --success: #e6f5ed;
  font-family: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.75; }
a { color: var(--brand-dark); }
a:hover { color: var(--accent); }
.site-header, .topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 4rem); background: #fff; border-bottom: 1px solid var(--line);
}
.brand { color: var(--brand-dark); font-weight: 800; text-decoration: none; letter-spacing: .06em; }
.site-nav, .topnav { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.site-nav a, .topnav a { text-decoration: none; font-size: .95rem; }
.page-shell, .wrap { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.page-shell { padding: 3.5rem 0 5rem; }
.wrap { padding: 2rem 0 4rem; }
.eyebrow { margin: 0 0 .6rem; color: var(--accent); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
.page-title { max-width: 850px; margin: 0; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.15; letter-spacing: -.04em; }
.page-lead { max-width: 760px; color: var(--muted); font-size: 1.1rem; }
.hero { padding: clamp(2rem, 6vw, 5rem) 0 2.5rem; }
.hero h1 { max-width: 900px; margin: .25rem 0 1rem; font-size: clamp(2rem, 5vw, 4.3rem); line-height: 1.15; letter-spacing: -.04em; }
.hero p { max-width: 780px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.stat { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); }
.section { margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: 0 18px 50px rgba(33, 56, 76, .06); }
.section__heading, .section-heading { margin-top: 0; font-size: 1.45rem; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.task-card { display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.task-card h2, .task-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.45; }
.task-card p { margin: 0; color: var(--muted); }
.task-card__links { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; padding-top: .5rem; }
.action-link, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  width: fit-content; padding: .55rem .85rem; border: 1px solid var(--brand);
  border-radius: 10px; background: var(--brand); color: #fff; cursor: pointer;
  font: inherit; text-decoration: none;
}
.action-link:hover, .button:hover { background: var(--brand-dark); color: #fff; }
.action-link--quiet { background: #fff; color: var(--brand-dark); }
.code-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: .75rem 0; }
.copy-status { min-height: 1.6em; color: var(--muted); font-size: .92rem; }
.panel, .demo-board, .callout { padding: 1rem 1.15rem; border-radius: 16px; background: var(--soft); border: 1px solid #c8e4eb; }
.callout { background: #fff6ed; border-color: #f4cda9; }
.lesson-note { padding: 1.2rem 1.35rem; border: 1px solid #c8e4eb; border-radius: 16px; background: #f2fafb; }
.action-brief { border-color: #f4cda9; background: #fffaf5; }
.action-brief .section-heading { color: var(--brand-dark); }
.action-steps { display: grid; gap: .8rem; margin: 1rem 0; padding-left: 1.35rem; }
.action-steps li { padding-left: .2rem; }
.action-steps strong { color: var(--brand-dark); }
.action-brief .callout { margin-top: 1rem; }
.action-brief a { font-weight: 800; }
.concept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
.concept-card { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.concept-card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.concept-card p { margin: 0; color: var(--muted); }
.term-list { display: grid; grid-template-columns: minmax(130px, .35fr) 1fr; gap: .55rem 1rem; margin: 0; }
.term-list dt { font-weight: 800; color: var(--brand-dark); }
.term-list dd { margin: 0; color: var(--muted); }
.section-lead { max-width: 760px; margin-top: -.35rem; color: var(--muted); }
.glossary-grid { display: grid; grid-template-columns: 1fr; width: 100%; gap: 1rem; }
.glossary-explorer__meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .65rem; margin-bottom: .75rem; padding: .7rem .85rem; border: 1px solid #c8e4eb; border-radius: 12px; background: #f2fafb; color: var(--muted); }
.glossary-explorer__meta strong { color: var(--brand-dark); }
.glossary-explorer .stepper__tabs { grid-template-columns: repeat(var(--glossary-group-count, 4), minmax(0, 1fr)); }
.glossary-groups { margin: 0; }
.glossary-group { min-width: 0; }
.glossary-group__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; padding: .1rem 0 .55rem; border-bottom: 1px solid var(--line); }
.glossary-group__header h3 { margin: 0; color: var(--brand-dark); font-size: 1.05rem; }
.glossary-group__header span { flex: 0 0 auto; color: var(--muted); font-size: .86rem; font-weight: 800; }
.glossary-group .glossary-grid { gap: .75rem; }
.term-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.term-card summary { display: block; padding: 1rem 2.25rem 1rem 1.1rem; cursor: pointer; list-style: none; }
.term-card summary::-webkit-details-marker { display: none; }
.term-card summary::before { content: "›"; position: absolute; top: .85rem; right: .85rem; color: var(--brand-dark); font-size: 1rem; font-weight: 800; line-height: 1; }
.term-card[open] summary { border-bottom: 1px solid var(--line); background: #fbfdff; }
.term-card[open] summary::before { content: "⌄"; }
.term-card__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .65rem; }
.term-card__term, .style-key--term { display: inline-flex; align-items: center; padding: .12rem .55rem; border: 1px solid #b9dbe4; border-radius: 999px; background: var(--soft); color: var(--brand-dark); font-size: 1.02rem; font-weight: 800; line-height: 1.45; }
.term-card__english { display: inline-flex; align-items: center; padding: .12rem .45rem; border: 1px solid var(--line); border-radius: .45rem; background: #f5f7fa; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.term-card__plain { display: block; margin-top: .45rem; color: var(--ink); }
.term-card__hint { display: block; margin-top: .55rem; color: var(--muted); font-size: .86rem; }
.term-card__body { padding: 1rem 1.1rem 1.15rem; }
.term-card dl { display: grid; grid-template-columns: 6.2rem 1fr; gap: .55rem .8rem; margin: 0; }
.term-card dt { color: var(--brand-dark); font-size: .88rem; font-weight: 800; }
.term-card dd { min-width: 0; margin: 0; color: var(--muted); font-size: .93rem; overflow-wrap: anywhere; }
.term-inline { display: inline; padding: .04rem .22rem; border-bottom: 2px solid #9bcbd8; border-radius: .2rem; background: #eef8fa; color: var(--brand-dark); font-weight: 700; line-height: 1.45; vertical-align: middle; }
.example-text { color: var(--muted); }
.syntax-inline { display: inline-block; padding: .1rem .35rem; border: 1px solid #cbd7e4; border-radius: .35rem; background: #f1f5f9; color: #16465a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; line-height: 1.45; overflow-wrap: anywhere; vertical-align: middle; }
.syntax-example { display: inline; padding: .1rem .35rem; border: 1px solid #cbd7e4; border-radius: .35rem; background: #f1f5f9; color: #16465a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
.syntax-example { line-height: 1.65; }
.path-chip { display: inline-block; max-width: 100%; padding: .1rem .45rem; border: 1px solid #efcf9f; border-radius: .4rem; background: #fff8ed; color: #874b16; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; vertical-align: middle; }
.action-brief p, .action-brief li { line-height: 1.95; }
.file-map { display: grid; gap: .65rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.file-map li { display: grid; grid-template-columns: minmax(150px, .35fr) 1fr; gap: .8rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; }
.file-map li span { color: var(--muted); }
.file-map__entry { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .45rem; }
.file-map__open { display: inline-flex; align-items: center; padding: .28rem .55rem; border: 1px solid #b9dbe4; border-radius: .45rem; background: #fff; color: var(--brand-dark); font-size: .9rem; font-weight: 800; text-decoration: none; }
.file-map__open:hover { border-color: var(--brand); background: var(--soft); color: var(--brand-dark); }
.file-map__role { min-width: 0; }
.file-card { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #fbfdff; }
.file-card header { margin-bottom: .7rem; }
.file-card h3 { margin: 0; color: var(--brand-dark); }
.file-card header p { margin: .25rem 0 0; color: var(--muted); }
.file-card .code-block { background: #172331; }
.lab-step-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: lab-step; }
.lab-step { min-width: 0; padding: 1.15rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.lab-step__header { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; }
.lab-step__header h3 { margin: .15rem 0 0; color: var(--brand-dark); }
.lab-step__number { flex: 0 0 auto; padding: .25rem .55rem; border-radius: 8px; background: #fff1df; color: var(--brand-dark); font-size: .82rem; font-weight: 800; }
.lab-step__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.lab-step__details > div { min-width: 0; padding: .7rem; border-radius: 10px; background: #f6f9fb; }
.lab-step__details dt { color: var(--brand-dark); font-size: .84rem; font-weight: 800; }
.lab-step__details dd { min-width: 0; margin: .2rem 0 0; color: var(--muted); overflow-wrap: anywhere; }
.lab-step__details .path-chip, .lab-step__details .syntax-inline { font-size: .88em; }
.student-path { display: grid; gap: .85rem; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: student-path; }
.student-path__item { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.student-path__header { display: flex; align-items: center; gap: .65rem; margin-bottom: .45rem; }
.student-path__header h3 { margin: 0; color: var(--brand-dark); font-size: 1.05rem; }
.student-path__number { display: grid; place-items: center; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; }
.student-path__item p { margin: .45rem 0 0; }
.student-path__content { color: var(--ink); line-height: 1.7; overflow-wrap: anywhere; }
.student-path__content strong { color: var(--brand-dark); }
.student-path__content .path-chip, .student-path__content .syntax-inline { font-size: .9em; }
.student-path__check { color: var(--muted); }
.student-path__check strong { color: var(--brand-dark); }
.student-path__item .action-link { margin-top: .7rem; }
.stepper { margin-top: 1rem; }
.stepper__interactive { display: none; }
.stepper__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.stepper__tab { display: flex; min-width: 0; min-height: 3.25rem; align-items: center; justify-content: center; gap: .35rem; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--brand-dark); cursor: pointer; font: inherit; font-size: .86rem; font-weight: 800; line-height: 1.35; text-align: center; }
.stepper__tab:hover { border-color: var(--brand); background: var(--soft); }
.stepper__tab[aria-selected="true"] { border-color: var(--brand); background: var(--soft); box-shadow: inset 0 -3px 0 var(--brand); }
.stepper__tab-number { display: grid; place-items: center; flex: 0 0 auto; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: .78rem; }
.stepper__tab[aria-selected="true"] .stepper__tab-number { background: var(--accent); }
.stepper__tab-label { min-width: 0; overflow-wrap: anywhere; }
.stepper__status { margin: 0 0 .65rem; color: var(--muted); font-size: .9rem; font-weight: 800; }
[data-stepper-root].is-enhanced .stepper__interactive { display: grid; }
[data-stepper-root].is-enhanced .stepper__panels { display: block; }
[data-stepper-root].is-enhanced > .stepper__panels > .stepper__panel { display: none; }
[data-stepper-root].is-enhanced:not(.is-expanded) > .stepper__panels > .stepper__panel.is-active { display: block; }
[data-stepper-root].is-enhanced.is-expanded > .stepper__panels > .stepper__panel { display: block; }
[data-stepper-root].is-enhanced .lab-step-list,
[data-stepper-root].is-enhanced .student-path { margin-top: 0; }
.stepper__actions { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: .65rem; margin-top: .85rem; }
.stepper__actions-context { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .55rem; min-width: 0; padding: .45rem .65rem; border-radius: 10px; color: var(--brand-dark); font-size: .82rem; line-height: 1.45; }
.stepper__actions-kicker { color: var(--muted); font-weight: 800; }
.stepper__actions--outer { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.stepper__actions--outer .stepper__actions-context { border: 1px solid #efcf9f; background: #fffaf5; }
.stepper__actions .action-link { margin-top: 0; }
.stepper__actions [data-stepper-toggle] { justify-self: center; }
.stepper__actions button:disabled { cursor: not-allowed; opacity: .45; }
.stepper--lab-fields { margin-top: .35rem; }
.stepper--lab-fields .stepper__tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.stepper--lab-fields .stepper__tab { min-height: 2.65rem; padding: .35rem .4rem; font-size: .8rem; }
.stepper--lab-fields .stepper__panels { margin: 0; }
.stepper--lab-fields .lab-step__detail { min-width: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: #f6f9fb; }
.stepper--lab-fields .lab-step__detail dd { line-height: 1.7; }
.qa-section .qa-list { display: grid; gap: .85rem; }
.qa-section .qa-card { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.qa-section .qa-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "top toggle" "question toggle" "context toggle";
  align-items: start;
  column-gap: 1rem;
  row-gap: .4rem;
  padding: 1rem 1.15rem;
  color: var(--brand-dark);
  cursor: pointer;
  list-style: none;
}
.qa-section .qa-summary::-webkit-details-marker { display: none; }
.qa-section .qa-summary:focus-visible { outline: 3px solid #f1ab2c; outline-offset: -4px; }
.qa-section .qa-summary__topline { grid-area: top; display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .6rem; }
.qa-section .qa-summary__question { grid-area: question; min-width: 0; font-size: 1.06rem; font-weight: 800; line-height: 1.55; overflow-wrap: anywhere; }
.qa-section .qa-summary__context { grid-area: context; min-width: 0; color: var(--muted); font-size: .9rem; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.qa-section .qa-summary__context .path-chip,
.qa-section .qa-summary__context .syntax-inline { font-size: .84em; }
.qa-section .qa-summary__toggle { grid-area: toggle; align-self: center; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .6rem; border: 1px solid #b9dbe4; border-radius: 999px; background: #f7fcfd; color: var(--brand-dark); font-size: .82rem; font-weight: 800; white-space: nowrap; }
.qa-section .qa-summary__toggle-close { display: none; }
.qa-section .qa-summary__toggle::after { content: ""; width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.12rem) rotate(45deg); transition: transform .15s ease; }
.qa-section .qa-card[open] .qa-summary { background: #fbfdff; border-bottom: 1px solid var(--line); }
.qa-section .qa-card[open] .qa-summary__toggle { background: var(--soft); }
.qa-section .qa-card[open] .qa-summary__toggle-open { display: none; }
.qa-section .qa-card[open] .qa-summary__toggle-close { display: inline; }
.qa-section .qa-card[open] .qa-summary__toggle::after { transform: translateY(.12rem) rotate(225deg); }
.qa-section .qa-number { color: var(--muted); font-size: .9rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.qa-section .qa-type { padding: .16rem .55rem; border: 1px solid transparent; border-radius: 999px; font-size: .82rem; font-weight: 800; white-space: nowrap; }
.qa-section .qa-type--concept { border-color: #b9dbe4; background: var(--soft); color: var(--brand-dark); }
.qa-section .qa-type--code { border-color: #efcf9f; background: #fff8ed; color: #874b16; }
.qa-section .qa-type--compare { border-color: #d8c8eb; background: #f7f2fc; color: #5f3e82; }
.qa-section .qa-type--debug { border-color: #b9dec8; background: #eef9f2; color: #21603d; }
.qa-section .qa-answer { display: grid; gap: 0; padding: .1rem 1.15rem 1.15rem; }
.qa-section .qa-answer__item { padding: .8rem 0; }
.qa-section .qa-answer__item + .qa-answer__item { border-top: 1px solid var(--line); }
.qa-section .qa-answer__item h3 { margin: 0 0 .25rem; color: var(--brand-dark); font-size: .92rem; line-height: 1.4; }
.qa-section .qa-answer__item p { margin: 0; color: var(--ink); line-height: 1.7; overflow-wrap: anywhere; }
.qa-section .qa-answer__item--expected,
.qa-section .qa-answer__item--warning,
.qa-section .qa-answer__item--verify { margin: .55rem 0 0; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 12px; }
.qa-section .qa-answer__item--expected + .qa-answer__item,
.qa-section .qa-answer__item--warning + .qa-answer__item,
.qa-section .qa-answer__item--verify + .qa-answer__item { border-top: 0; }
.qa-section .qa-answer__item--expected { border-color: #c8e4eb; background: #f2fafb; }
.qa-section .qa-answer__item--warning { border-color: #f4cda9; background: #fffaf5; }
.qa-section .qa-answer__item--verify { border-color: #b9dec8; background: #eef9f2; }
.qa-section .qa-answer code { overflow-wrap: anywhere; color: var(--brand-dark); }
.qa-section .qa-check { padding: .75rem .9rem; border-left: 4px solid var(--accent); background: #fffaf5; color: var(--muted); }
.code-caption { margin: 0 0 .55rem; color: var(--muted); font-size: .92rem; }
.schedule-focus { max-width: 72rem; margin: 0 0 .45rem; color: var(--brand-dark); }
.schedule-lead { max-width: 72rem; margin: 0; color: var(--muted); font-size: .94rem; }
.schedule-list { display: grid; grid-template-columns: 1fr; width: 100%; gap: .8rem; margin-top: 1rem; }
.schedule-card { min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.schedule-card__header { display: flex; align-items: center; gap: .65rem; margin-bottom: .65rem; }
.schedule-card__header h3 { margin: 0; color: var(--brand-dark); font-size: 1.05rem; }
.schedule-time { flex: 0 0 auto; padding: .25rem .6rem; border-radius: 999px; background: var(--soft); color: var(--brand-dark); font-size: .88rem; font-weight: 800; white-space: nowrap; }
.schedule-card p { margin: .45rem 0 0; }
.schedule-card p strong { color: var(--brand-dark); }
.schedule-detail { margin-top: .75rem; border-top: 1px solid var(--line); padding-top: .65rem; }
.schedule-detail summary { color: var(--brand); cursor: pointer; font-weight: 700; }
.schedule-detail p { color: var(--muted); }
.schedule-lecturer-list { display: grid; gap: .85rem; margin-top: 1rem; }
.schedule-lecturer-card { min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.schedule-lecturer-card p { margin: .45rem 0 0; }
.schedule-lecturer-card p strong { color: var(--brand-dark); }
.schedule-detail__list { display: grid; gap: .65rem; margin: .7rem 0 0; }
.schedule-detail__list div { padding-top: .65rem; border-top: 1px solid var(--line); }
.schedule-detail__list dt { color: var(--brand-dark); font-weight: 800; }
.schedule-detail__list dd { margin: .15rem 0 0; color: var(--muted); }
.time-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 1rem; background: #fff; }
.time-table th, .time-table td { padding: .7rem; border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
.time-table th { background: var(--soft); color: var(--brand-dark); }
.workflow-list { display: grid; gap: .55rem; padding-left: 1.3rem; }
.workflow-list li { padding-left: .2rem; }
.demo-board { margin-top: 1rem; }
.demo-output { padding: 1rem; border-radius: 12px; background: #fff; border: 1px dashed #a9bdc8; }
.status { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: var(--success); color: #17643d; font-size: .86rem; }
pre {
  overflow: auto; margin: 0; padding: 1rem; border-radius: 14px;
  background: #172331; color: #e8f1f7; font: .88rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
code { font-family: inherit; }
.code-block { margin-top: .75rem; }
.check-grid { display: grid; gap: .6rem; padding-left: 1.25rem; }
.phase-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }
.phase-nav a { padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; text-decoration: none; }
.phase-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.25rem; }
.phase-step { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.phase-step--active { border-color: var(--accent); background: #fff6ed; }
.phase-step strong { display: block; margin-bottom: .2rem; }
.phase-step span { color: var(--muted); font-size: .9rem; }
.phase-meter { display: inline-block; margin-bottom: .8rem; padding: .25rem .65rem; border-radius: 999px; background: var(--soft); color: var(--brand-dark); font-size: .88rem; }
.diff-note { margin: .5rem 0 0; color: var(--muted); }
.phase-evidence { margin-top: 1rem; padding: .8rem 1rem; border-left: 4px solid var(--accent); background: #fffaf5; color: var(--muted); }
.site-footer { padding: 2rem clamp(1rem, 4vw, 4rem); border-top: 1px solid var(--line); color: var(--muted); background: #fff; }
.site-footer p { max-width: 1120px; margin: 0 auto; }
.small { color: var(--muted); font-size: .9rem; }
@media (max-width: 680px) {
  .site-header, .topbar { align-items: flex-start; flex-direction: column; }
  .page-shell { padding-top: 2.5rem; }
  .section { padding: 1rem; border-radius: 18px; }
  .phase-ladder { grid-template-columns: 1fr; }
  .term-list { grid-template-columns: 1fr; gap: .2rem; }
  .term-list dd { margin-bottom: .55rem; }
  .term-card summary { padding: .9rem 1.7rem .9rem .9rem; }
  .term-card summary::before { top: .85rem; right: .7rem; }
  .term-card__body { padding: .9rem; }
  .term-card dl, .file-map li { grid-template-columns: 1fr; gap: .15rem; }
  .term-card dt { margin-top: .4rem; }
  .glossary-explorer__meta { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .glossary-explorer .stepper__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glossary-group__header { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .qa-section .qa-summary { grid-template-columns: 1fr; grid-template-areas: "top" "question" "context" "toggle"; row-gap: .45rem; padding: .9rem .85rem; }
  .qa-section .qa-summary__toggle { justify-self: start; margin-top: .15rem; }
  .qa-section .qa-answer { padding-inline: .85rem; }
  .schedule-card, .schedule-lecturer-card { padding: .9rem; }
  .schedule-card__header { align-items: flex-start; flex-direction: column; gap: .45rem; }
  .lab-step { padding: .9rem; }
  .lab-step__details { grid-template-columns: 1fr; }
  .student-path__item { padding: .9rem; }
  .stepper__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .stepper__tab { min-height: 3rem; flex-direction: column; gap: .15rem; padding: .4rem .25rem; font-size: .78rem; }
  .stepper__tab-number { width: 1.3rem; height: 1.3rem; font-size: .72rem; }
  .stepper--lab-fields .stepper__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stepper--lab-fields .stepper__tab { min-height: 2.8rem; }
  .stepper__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepper__actions-context { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .stepper__actions--outer { margin-top: 1.35rem; padding-top: 1rem; }
  .stepper__actions--outer .stepper__actions-context { grid-row: 1; }
  .stepper__actions [data-stepper-toggle] { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; }
  .stepper__actions [data-stepper-prev] { grid-column: 1; grid-row: 2; }
  .stepper__actions [data-stepper-next] { grid-column: 2; grid-row: 2; }
  .stepper__actions--outer [data-stepper-toggle] { grid-row: 2; }
  .stepper__actions--outer [data-stepper-prev] { grid-row: 3; }
  .stepper__actions--outer [data-stepper-next] { grid-row: 3; }
  .time-table { display: block; }
  .time-table thead { display: none; }
  .time-table tbody, .time-table tr, .time-table td { display: block; width: 100%; }
  .time-table tr { margin-bottom: .85rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .time-table td { border: 0; border-top: 1px solid var(--line); }
  .time-table td:first-child { border-top: 0; background: var(--soft); color: var(--brand-dark); font-weight: 800; }
}
@media (min-width: 820px) {
  .schedule-list { grid-template-columns: 1fr; align-items: start; }
  .lab-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .glossary-group .glossary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
:focus-visible { outline: 3px solid #f1ab2c; outline-offset: 3px; }

.stage-step-list { display: grid; gap: 1rem; }
.stage-step { min-width: 0; padding: 1.15rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.stage-step__header { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; }
.stage-step__header h3 { margin: .15rem 0 0; color: var(--brand-dark); }
.stage-step__number { flex: 0 0 auto; padding: .25rem .55rem; border-radius: 8px; background: #fff1df; color: var(--brand-dark); font-size: .82rem; font-weight: 800; }
.stage-step__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.stage-step__meta > div { min-width: 0; padding: .7rem; border-radius: 10px; background: #f6f9fb; }
.stage-step__meta p { margin: 0; overflow-wrap: anywhere; }
.stage-step__meta-label { color: var(--brand-dark); font-size: .84rem; font-weight: 800; }
.stage-step__change, .stage-step__expected { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.stage-step__change p, .stage-step__expected p { margin: .45rem 0; }
.stage-step__change strong, .stage-step__expected strong { color: var(--brand-dark); }
.stage-hint { margin-top: .9rem; padding-top: .75rem; border-top: 1px dashed var(--line); }
.stage-hint summary { color: var(--brand); cursor: pointer; font-weight: 800; }
.stage-hint p { margin: .5rem 0 0; color: var(--muted); }
.stage-file-list { display: grid; gap: .75rem; margin-top: 1rem; }
.file-card { margin-top: 0; padding: 0; overflow: hidden; }
.file-card > summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem; color: var(--brand-dark); cursor: pointer; font-weight: 800; list-style: none; }
.file-card > summary::-webkit-details-marker { display: none; }
.file-card > summary::before { content: "查看"; flex: 0 0 auto; order: 2; padding: .2rem .5rem; border-radius: 999px; background: var(--soft); color: var(--brand-dark); font-size: .8rem; }
.file-card[open] > summary { border-bottom: 1px solid var(--line); background: #fbfdff; }
.file-card[open] > summary::before { content: "收合"; }
.file-card__body { padding: 0 1rem 1rem; }
.file-card__body .code-actions { margin-top: .8rem; }
@media (max-width: 680px) {
  .stage-step__header { flex-direction: column; gap: .45rem; }
  .stage-step__meta { grid-template-columns: 1fr; }
  .file-card > summary { flex-direction: column; gap: .5rem; }
  .file-card > summary::before { order: 0; }
}