:root {
  --middle-page: #f4efe6;
  --middle-surface: #fffdf8;
  --middle-soft-surface: #e8efea;
  --middle-ink: #17302d;
  --middle-soft: #65726e;
  --middle-line: #d5cec1;
  --middle-accent: #1d655d;
  --middle-gold: #aa7a2b;
  --middle-danger: #9b3c31;
  color: var(--middle-ink);
  background: var(--middle-page);
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--middle-page); color: var(--middle-ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--middle-accent); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

.middle-skip {
  position: fixed;
  z-index: 100;
  left: 12px;
  top: -80px;
  padding: 10px 14px;
  background: var(--middle-ink);
  color: white;
}

.middle-skip:focus { top: 10px; }
.middle-shell { min-height: 100dvh; padding-bottom: 82px; }

.middle-topbar {
  display: flex;
  width: min(1220px, calc(100% - 48px));
  min-height: 76px;
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--middle-line);
}

.middle-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}

.middle-wordmark svg { width: 52px; height: 32px; overflow: visible; }
.middle-wordmark path:not(:last-of-type) { fill: none; stroke: var(--middle-accent); stroke-width: 1.6; }
.middle-wordmark path:last-of-type,
.middle-wordmark circle { fill: var(--middle-accent); }
.middle-wordmark > span { display: grid; gap: 2px; }
.middle-wordmark strong { font: 700 1rem/1.2 "Noto Serif SC", "Songti SC", serif; }
.middle-wordmark small, .middle-notice { color: var(--middle-soft); font-size: .68rem; }
.middle-notice { font-weight: 650; }

.middle-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  width: min(1220px, calc(100% - 48px));
  margin-inline: auto;
  gap: clamp(40px, 6vw, 88px);
  padding: 46px 0 72px;
}

.middle-rail { position: sticky; top: 24px; align-self: start; }
.middle-rail-intro > span, .middle-screen-header > span, .middle-shortlist header span,
.middle-discovery header > span, .middle-target-guide header span, .middle-faq header span,
.middle-rules header span {
  color: var(--middle-accent);
  font-size: .68rem;
  font-weight: 780;
  letter-spacing: .07em;
}

.middle-rail-intro p { margin: 8px 0 28px; color: var(--middle-soft); font-size: .78rem; line-height: 1.65; }
.middle-progress { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.middle-progress li { display: grid; grid-template-columns: 28px 1fr; gap: 11px; min-height: 65px; color: #8b918e; }
.middle-progress li > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--middle-line);
  border-radius: 50%;
  background: var(--middle-page);
  font-size: .66rem;
  font-weight: 760;
}

.middle-progress li:not(:last-child)::after {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 1px;
  height: 40px;
  margin: 25px 0 0 12px;
  background: var(--middle-line);
}

.middle-progress p { display: grid; align-content: start; gap: 3px; margin: 3px 0 0; }
.middle-progress strong { font-size: .78rem; }
.middle-progress small { font-size: .67rem; line-height: 1.45; }
.middle-progress li.is-current, .middle-progress li.is-complete { color: var(--middle-ink); }
.middle-progress li.is-current > span, .middle-progress li.is-complete > span { border-color: var(--middle-accent); background: var(--middle-accent); color: white; }

.middle-rail-return { display: grid; gap: 6px; margin-top: 22px; padding: 17px 0; border-top: 1px solid var(--middle-line); }
.middle-rail-return span { color: var(--middle-soft); font-size: .65rem; }
.middle-rail-return strong { max-width: 21ch; font: 700 .82rem/1.55 "Noto Serif SC", "Songti SC", serif; }

.middle-content { min-width: 0; outline: none; }
.middle-screen-header { max-width: 810px; margin-bottom: 34px; }
.middle-screen-header h1 {
  max-width: 18ch;
  margin: 9px 0 13px;
  font: 700 clamp(2rem, 4.4vw, 3.7rem)/1.1 "Noto Serif SC", "Songti SC", serif;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.middle-screen-header p { max-width: 68ch; margin: 0; color: var(--middle-soft); font-size: .9rem; line-height: 1.75; }
.middle-question-stack { display: grid; gap: 18px; }
.middle-question-stack fieldset {
  min-width: 0;
  margin: 0;
  padding: 23px;
  border: 1px solid var(--middle-line);
  border-radius: 14px;
  background: rgb(255 253 248 / 76%);
}

.middle-question-stack legend { padding: 0 8px; font: 700 1rem/1.4 "Noto Serif SC", "Songti SC", serif; }
.middle-question-stack fieldset > p { margin: 0 0 14px; color: var(--middle-soft); font-size: .72rem; }
.middle-choice-grid { display: grid; gap: 10px; }
.middle-grid-three { grid-template-columns: repeat(3, 1fr); }
.middle-grid-four { grid-template-columns: repeat(4, 1fr); }
.middle-choice {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 104px;
  padding: 17px;
  border: 1px solid var(--middle-line);
  border-radius: 11px;
  background: var(--middle-surface);
  cursor: pointer;
}

.middle-choice:hover { border-color: #8eaaa1; }
.middle-choice.is-selected { border: 2px solid var(--middle-accent); padding: 16px; background: #dfebe6; }
.middle-choice input { position: absolute; opacity: 0; pointer-events: none; }
.middle-choice span { display: grid; gap: 7px; }
.middle-choice strong { font-size: .82rem; line-height: 1.45; }
.middle-choice small { color: var(--middle-soft); font-size: .7rem; line-height: 1.48; }
.middle-choice:focus-within { outline: 3px solid rgb(29 101 93 / 20%); outline-offset: 2px; }
.middle-error { margin: 4px 0 0; color: var(--middle-danger); font-size: .76rem; font-weight: 700; }

.middle-actions {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  min-height: 70px;
  padding: 9px max(24px, calc((100% - 1172px) / 2));
  border-top: 1px solid var(--middle-line);
  background: rgb(244 239 230 / 95%);
  backdrop-filter: blur(14px);
}

.middle-actions > button:first-child { justify-self: start; }
.middle-actions > button:last-child { justify-self: end; }
.middle-actions > span { color: var(--middle-soft); font-size: .69rem; font-weight: 700; }

.middle-button,
.middle-primary,
.middle-school-card button,
.middle-choice-actions button {
  min-height: 43px;
  padding: 0 16px;
  border: 1px solid var(--middle-accent);
  border-radius: 9px;
  background: transparent;
  color: var(--middle-accent);
  font-size: .76rem;
  font-weight: 760;
}

.middle-primary, .middle-school-card button {
  background: var(--middle-accent);
  color: white;
}

.middle-button:focus-visible, .middle-primary:focus-visible, .middle-school-card button:focus-visible,
.middle-choice-actions button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid rgb(29 101 93 / 24%);
  outline-offset: 2px;
}

.middle-result-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .42fr);
  gap: 24px;
  align-items: end;
  margin: -10px 0 22px;
  padding: 23px;
  border-left: 4px solid var(--middle-accent);
  background: #e4ece7;
}

.middle-result-lead p { margin: 0; font: 700 1.04rem/1.62 "Noto Serif SC", "Songti SC", serif; }
.middle-result-lead span { color: var(--middle-soft); font-size: .7rem; line-height: 1.6; }
.middle-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.middle-result-grid article { padding: 24px; border: 1px solid var(--middle-line); background: var(--middle-surface); }
.middle-result-grid article > span { color: var(--middle-accent); font-size: .68rem; font-weight: 760; }
.middle-result-grid ol { display: grid; gap: 11px; margin: 16px 0 0; padding-left: 20px; }
.middle-result-grid li { padding-left: 4px; color: var(--middle-soft); font-size: .78rem; line-height: 1.65; }
.middle-result-boundaries { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 14px 0 30px; background: var(--middle-line); border: 1px solid var(--middle-line); }
.middle-result-boundaries p { display: grid; gap: 7px; margin: 0; padding: 19px; background: var(--middle-page); }
.middle-result-boundaries span { color: var(--middle-soft); font-size: .65rem; }
.middle-result-boundaries strong { font-size: .76rem; line-height: 1.58; }

.middle-rules, .middle-shortlist, .middle-discovery, .middle-target-guide, .middle-faq, .middle-sources {
  margin-top: 20px;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--middle-line);
  border-radius: 15px;
  background: var(--middle-surface);
}

.middle-rules header, .middle-shortlist > header, .middle-target-guide > header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: start;
}

.middle-rules h2, .middle-shortlist h2, .middle-discovery h2, .middle-target-guide h2, .middle-faq h2, .middle-sources h2 {
  max-width: 25ch;
  margin: 7px 0 0;
  font: 700 clamp(1.35rem, 2.7vw, 2rem)/1.25 "Noto Serif SC", "Songti SC", serif;
}

.middle-rules header small, .middle-target-guide header small {
  max-width: 21ch;
  color: var(--middle-soft);
  font-size: .65rem;
  line-height: 1.55;
  text-align: right;
}

.middle-rules ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 25px 0 17px;
  padding: 1px;
  background: var(--middle-line);
  list-style: none;
}

.middle-rules li { display: grid; gap: 8px; padding: 17px; background: #f7f3eb; }
.middle-rules li strong { font-size: .73rem; line-height: 1.5; }
.middle-rules li span, .middle-rules > p { color: var(--middle-soft); font-size: .69rem; line-height: 1.58; }
.middle-rules > div, .middle-sources > div, .middle-target-guide > footer { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.middle-rules a, .middle-sources a, .middle-target-guide footer a { min-height: 42px; display: inline-flex; align-items: center; font-size: .72rem; font-weight: 720; }

.middle-shortlist > header > strong { font: 700 1.55rem/1 "Noto Serif SC", "Songti SC", serif; color: var(--middle-accent); }
.middle-shortlist form, .middle-discovery form { margin-top: 23px; }
.middle-shortlist form label, .middle-discovery form label { display: block; margin-bottom: 7px; font-size: .7rem; font-weight: 720; }
.middle-shortlist form > div, .middle-discovery form > div { display: flex; gap: 9px; }
.middle-shortlist input, .middle-discovery input {
  width: 100%;
  min-width: 0;
  min-height: 45px;
  padding: 0 13px;
  border: 1px solid #aaa69f;
  border-radius: 8px;
  background: white;
  color: var(--middle-ink);
}

.middle-search-matches, .middle-school-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.middle-school-card { display: grid; align-content: start; padding: 17px; border: 1px solid var(--middle-line); background: #f8f4ec; }
.middle-school-card > span { color: var(--middle-accent); font-size: .62rem; font-weight: 760; }
.middle-school-card h3 { margin: 7px 0 5px; font: 700 1rem/1.35 "Noto Serif SC", "Songti SC", serif; }
.middle-school-card p, .middle-school-card small { margin: 0; color: var(--middle-soft); font-size: .67rem; line-height: 1.55; }
.middle-school-card a { min-height: 38px; display: inline-flex; align-items: center; font-size: .68rem; }
.middle-school-card button { min-height: 39px; margin-top: 12px; }

.middle-choice-list { display: grid; gap: 7px; margin: 17px 0 0; padding: 0; list-style: none; }
.middle-choice-list > li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--middle-line);
}

.middle-choice-list > li > b { display: grid; place-items: center; width: 28px; height: 28px; background: var(--middle-accent); color: white; font-size: .7rem; }
.middle-choice-list > li > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.middle-choice-list strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.middle-choice-list span { color: var(--middle-soft); font-size: .64rem; }
.middle-choice-actions { display: flex; gap: 5px; }
.middle-choice-actions button { min-height: 34px; padding: 0 9px; border-color: var(--middle-line); color: var(--middle-soft); font-size: .64rem; }
.middle-choice-list .middle-empty { display: block; padding: 20px; color: var(--middle-soft); font-size: .73rem; }
.middle-boundary-note { margin: 13px 0 0; color: var(--middle-soft); font-size: .66rem; line-height: 1.55; }

.middle-discovery { background: var(--middle-soft-surface); }
.middle-discovery header p, .middle-target-guide header p, .middle-faq header + div, .middle-sources p {
  max-width: 72ch;
  margin: 10px 0 0;
  color: var(--middle-soft);
  font-size: .73rem;
  line-height: 1.66;
}

.middle-discovery form { max-width: 450px; }
.middle-discovery form small { display: block; margin-top: 7px; color: var(--middle-soft); font-size: .63rem; }
.middle-discovery-summary { display: grid; gap: 4px; margin-top: 20px; }
.middle-discovery-summary strong { font-size: .78rem; }
.middle-discovery-summary span { color: var(--middle-soft); font-size: .68rem; }

.middle-target-guide > dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 24px 0;
  padding: 1px;
  background: var(--middle-line);
}

.middle-target-guide dl > div { padding: 15px; background: #f8f4ec; }
.middle-target-guide dt { color: var(--middle-soft); font-size: .62rem; }
.middle-target-guide dd { margin: 5px 0 0; font-size: .72rem; line-height: 1.5; }
.middle-target-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.middle-target-columns article { padding: 20px; border: 1px solid var(--middle-line); }
.middle-target-columns h3 { margin: 0; font: 700 .9rem/1.4 "Noto Serif SC", "Songti SC", serif; }
.middle-target-columns ul { display: grid; gap: 7px; margin: 13px 0 0; padding-left: 18px; }
.middle-target-columns li { color: var(--middle-soft); font-size: .7rem; line-height: 1.55; }

.middle-timeline { display: grid; gap: 1px; margin: 20px 0; padding: 1px; background: var(--middle-line); list-style: none; }
.middle-timeline li { display: grid; grid-template-columns: 30px 1fr; gap: 13px; padding: 17px; background: #f8f4ec; }
.middle-timeline li > b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--middle-accent); border-radius: 50%; color: var(--middle-accent); font-size: .68rem; }
.middle-timeline li > div { display: grid; gap: 4px; }
.middle-timeline span { color: var(--middle-gold); font-size: .62rem; font-weight: 760; }
.middle-timeline h3 { margin: 0; font-size: .78rem; }
.middle-timeline p { margin: 0; color: var(--middle-soft); font-size: .69rem; line-height: 1.58; }

.middle-faq details { border-top: 1px solid var(--middle-line); }
.middle-faq details:last-child { border-bottom: 1px solid var(--middle-line); }
.middle-faq summary { padding: 16px 0; cursor: pointer; font-size: .78rem; font-weight: 720; }
.middle-faq details > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding: 0 0 18px; }
.middle-faq details p { display: grid; gap: 4px; margin: 0; color: var(--middle-soft); font-size: .68rem; line-height: 1.58; }
.middle-faq details strong { color: var(--middle-ink); font-size: .62rem; }
.middle-faq > small { display: block; margin-top: 12px; color: var(--middle-soft); font-size: .62rem; }
.middle-sources { border-radius: 0; background: transparent; }
.middle-legal {
  display: flex;
  width: min(1220px, calc(100% - 48px));
  min-height: 105px;
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--middle-line);
  color: var(--middle-soft);
}

.middle-legal > div { display: grid; gap: 3px; font-size: .67rem; }
.middle-legal nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.middle-legal a { min-height: 42px; display: inline-flex; align-items: center; color: inherit; font-size: .68rem; font-weight: 650; text-decoration: none; }

@media (max-width: 880px) {
  .middle-workspace { grid-template-columns: 1fr; gap: 24px; }
  .middle-rail { position: static; }
  .middle-rail-intro, .middle-rail-return { display: none; }
  .middle-progress { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .middle-progress li { display: grid; grid-template-columns: 24px 1fr; min-height: 0; gap: 7px; }
  .middle-progress li:not(:last-child)::after, .middle-progress small { display: none; }
  .middle-progress li > span { width: 23px; height: 23px; }
  .middle-grid-four { grid-template-columns: repeat(2, 1fr); }
  .middle-rules ol { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .middle-shell { padding-bottom: 66px; }
  .middle-topbar, .middle-workspace, .middle-legal { width: min(100% - 30px, 560px); }
  .middle-topbar { min-height: 63px; }
  .middle-wordmark svg { width: 43px; height: 28px; }
  .middle-wordmark small, .middle-notice { display: none; }
  .middle-workspace { padding: 19px 0 40px; }
  .middle-progress { gap: 3px; }
  .middle-progress li { display: block; }
  .middle-progress li > span { margin-bottom: 4px; }
  .middle-progress li p { display: block; margin: 0; }
  .middle-progress li strong { font-size: .62rem; }
  .middle-screen-header { margin-bottom: 21px; }
  .middle-screen-header h1 { max-width: 16ch; margin-block: 7px 9px; font-size: 1.85rem; }
  .middle-screen-header p { font-size: .75rem; line-height: 1.58; }
  .middle-question-stack { gap: 12px; }
  .middle-question-stack fieldset { padding: 16px; border-radius: 11px; }
  .middle-question-stack legend { font-size: .87rem; }
  .middle-grid-three, .middle-grid-four { grid-template-columns: 1fr; }
  .middle-choice { min-height: 0; padding: 13px; }
  .middle-choice.is-selected { padding: 12px; }
  .middle-choice span { gap: 3px; }
  .middle-actions { grid-template-columns: 1fr auto 1fr; min-height: 62px; padding: 7px 15px; }
  .middle-actions > span { display: none; }
  .middle-actions > button:last-child { grid-column: 3; }
  .middle-button, .middle-primary { min-height: 43px; padding-inline: 13px; }
  .middle-result-lead, .middle-result-grid, .middle-result-boundaries { grid-template-columns: 1fr; }
  .middle-result-lead { gap: 9px; padding: 18px; }
  .middle-result-grid article { padding: 18px; }
  .middle-rules, .middle-shortlist, .middle-discovery, .middle-target-guide, .middle-faq, .middle-sources { padding: 18px; border-radius: 11px; }
  .middle-rules header, .middle-shortlist > header, .middle-target-guide > header { display: grid; gap: 9px; }
  .middle-rules header small, .middle-target-guide header small { max-width: none; text-align: left; }
  .middle-rules ol, .middle-search-matches, .middle-school-grid, .middle-target-columns,
  .middle-target-guide > dl, .middle-faq details > div { grid-template-columns: 1fr; }
  .middle-shortlist form > div, .middle-discovery form > div { align-items: stretch; flex-direction: column; }
  .middle-choice-list > li { grid-template-columns: 28px minmax(0, 1fr); }
  .middle-choice-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .middle-choice-actions button { min-height: 36px; }
  .middle-legal { min-height: 135px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}