:root {
  color-scheme: light;
  --ink: #162b29;
  --secondary: #4c625e;
  --paper: #f5f4ee;
  --white: #fffefa;
  --line: #dbe2d9;
  --accent: #176052;
  --gold: #f0d8a4;
  font: 16px/1.6 system-ui, "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); }
header { padding: 1.4rem max(1.1rem, calc((100% - 860px) / 2)) 2.2rem; background: #173934; color: #fffefa; }
.masthead { display: flex; justify-content: space-between; gap: .7rem; flex-wrap: wrap; }
.brand { color: var(--gold); font-size: .73rem; font-weight: 700; letter-spacing: .14em; }
.library-size { font-size: .8rem; color: #d0e5db; }
h1 { font: 700 clamp(2rem, 5vw, 3.2rem)/1.2 Georgia, "Microsoft YaHei", serif; margin: 1.55rem 0 .55rem; }
header p { margin: 0; color: #e0eee8; }
main { max-width: 900px; margin: auto; padding: 1.2rem 1.1rem 2rem; }
.panel, .passage { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: clamp(1rem, 3vw, 1.6rem); }
section, .catalog { margin: 0 0 1.25rem; }
h2 { font-size: 1.3rem; margin: 0 0 .7rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; line-height: 1.45; }
label { font-size: .93rem; }
textarea { width: 100%; border: 1px solid #a8bcb1; border-radius: 7px; background: #fff; color: var(--ink); padding: .7rem; font: inherit; margin: .35rem 0 .8rem; resize: vertical; min-height: 5.7rem; }
button { min-height: 44px; background: var(--accent); color: white; padding: .54rem 1rem; border: 1px solid transparent; border-radius: 7px; font: 650 .94rem/1.3 system-ui, "Microsoft YaHei", sans-serif; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #c49143; outline-offset: 2px; }
button.example { padding-left: 0; background: transparent; color: var(--accent); text-decoration: underline; }
.search-row { display: flex; align-items: end; gap: .75rem; justify-content: space-between; }
fieldset { display: flex; flex-wrap: wrap; gap: .35rem .8rem; border: 0; margin: 0; padding: 0; }
fieldset label { display: inline-flex; gap: .2rem; align-items: center; min-height: 36px; }
legend, .status, .file { color: var(--secondary); font-size: .88rem; }
.status, .file { margin: .35rem 0; overflow-wrap: anywhere; }
.status:empty { display: none; }
.step { font-size: .77rem; background: #dcebe3; color: #1d5b4b; padding: .23rem .45rem; border-radius: 4px; vertical-align: middle; }
.passage { margin: .65rem 0; scroll-margin-top: .8rem; }
.passage:target { border-color: var(--accent); }
.section-label { margin: .45rem 0; font-size: .86rem; font-weight: 650; }
blockquote { margin: .6rem 0; padding: .6rem .8rem; border-left: 3px solid #91b7a3; background: #f1f6f1; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
a { color: #135b4c; text-underline-offset: .15em; overflow-wrap: anywhere; }
ol { padding-left: 1.45rem; margin: .6rem 0 0; }
li { margin: .55rem 0; }
summary { cursor: pointer; font-weight: 650; }
#answer-button { margin-top: .45rem; }
footer { padding: 1rem; border-top: 1px solid var(--line); text-align: center; color: var(--secondary); font-size: .78rem; }
@media (max-width: 560px) {
  header { padding-bottom: 1.65rem; }
  .search-row { flex-direction: column; align-items: stretch; }
  #answer-button { width: 100%; }
}