:root { color-scheme: dark; background: #10152b; }
body { margin: 0; }
.bird-guide {
  --ink: #eee4cc;
  --muted: #b0bad0;
  --paper: #10152b;
  --surface: #191f38;
  --inset: #11172d;
  --line: #3c4762;
  --green: #9ddcec;
  --accent: #e2c277;
  color: var(--ink);
  background: radial-gradient(ellipse at 85% 0, #28325566, transparent 48rem), var(--paper);
  min-height: 100vh;
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
.bird-guide *, .bird-guide *::before, .bird-guide *::after { box-sizing: border-box; }
.bird-guide button, .bird-guide input { font: inherit; }
.bird-guide button { cursor: pointer; }
.bird-guide a { color: var(--green); text-underline-offset: 4px; }
.bird-guide :focus-visible, .bird-preview-skip:focus-visible { outline: 3px solid #e2c277; outline-offset: 4px; }
.bird-preview-skip { position: absolute; left: 16px; top: -80px; padding: 12px; color: #10152b; background: #eee4cc; z-index: 5; }
.bird-preview-skip:focus { top: 12px; }
.load-note { padding: 24px; color: #eee4cc; font: 16px/1.7 system-ui, sans-serif; }
.load-note a { color: #9ddcec; }
.bird-guide .masthead { max-width: 1264px; margin: auto; padding: 25px 36px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 13px; }
.bird-guide .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); text-decoration: none; min-height: 44px; }
.bird-guide .brand-mark { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); }
.bird-guide .edition { color: var(--muted); }
.bird-guide .hero { max-width: 1264px; margin: auto; padding: 40px 36px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.bird-guide .eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .09em; margin: 0 0 12px; }
.bird-guide h1, .bird-guide h2 { font-family: "Iowan Old Style", "Songti SC", "STSong", Georgia, serif; }
.bird-guide h1 { font-size: clamp(30px, 4vw, 49px); line-height: 1.25; margin: 0 0 17px; }
.bird-guide .subtitle { color: var(--muted); margin: 0; max-width: 680px; }
.bird-guide .hero-note { max-width: 210px; font-size: 13px; color: var(--muted); border-left: 2px solid var(--accent); padding-left: 18px; }
.bird-guide .hero-note strong { color: var(--ink); display: block; margin-bottom: 8px; font-size: 15px; }
.bird-guide .coverage-summary { max-width: 1192px; margin: 0 auto 15px; padding: 14px 18px; color: var(--ink); background: #b58a341c; border-left: 3px solid var(--accent); font-size: 14px; }
.bird-guide .guide-method { max-width: 1192px; margin: 0 auto 24px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 14px; }
.bird-guide .guide-method summary { cursor: pointer; color: var(--green); font-weight: 650; min-height: 30px; align-content: center; }
.bird-guide .guide-method p { margin: 12px 0 0; }
.bird-guide .guide-tools { max-width: 1192px; margin: 0 auto 20px; display: flex; align-items: start; gap: 16px; }
.bird-guide .guide-tools .guide-method { flex: 1; margin: 0; min-width: 0; }
.bird-guide .source-shortcut { flex-shrink: 0; padding: 4px 0; line-height: 1.5; }
.bird-guide .source-shortcut a { display: block; font-size: 14px; font-weight: 650; }
.bird-guide .source-shortcut small { display: block; font-size: 11px; color: var(--muted); }
.bird-guide .workbench { max-width: 1192px; margin: 0 auto 30px; border: 1px solid var(--line); border-top-color: var(--accent); background: var(--surface); border-radius: 10px; display: grid; grid-template-columns: 280px minmax(0, 1fr); overflow: hidden; min-height: 620px; }
.bird-guide .sidebar { padding: 24px 18px; border-right: 1px solid var(--line); background: #141a30; }
.bird-guide .picker-summary, .bird-guide .character-info > summary { display: none; }
.bird-guide .field-label { display: block; font-size: 14px; font-weight: 650; margin-bottom: 9px; }
.bird-guide .input-wrap { position: relative; }
.bird-guide .input-wrap::before { content: '⌕'; position: absolute; left: 13px; top: 7px; font-size: 24px; color: var(--muted); pointer-events: none; }
.bird-guide input { border: 1px solid #697691; border-radius: 7px; width: 100%; background: var(--inset); color: var(--ink); min-width: 0; padding: 12px 12px 12px 39px; }
.bird-guide input::placeholder { color: #abb6ca; opacity: 1; }
.bird-guide .list-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin: 20px 3px 10px; }
.bird-guide .character-list { display: flex; flex-direction: column; gap: 6px; max-height: 630px; overflow: auto; padding: 4px; scrollbar-color: #7c8ba7 var(--inset); }
.bird-guide .character { border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); padding: 12px; display: flex; justify-content: space-between; align-items: center; text-align: left; gap: 10px; width: 100%; min-height: 48px; }
.bird-guide .character:hover { background: #26314e; }
.bird-guide .character[aria-current=true] { background: #e2c277; border-color: #f4daa0; color: #1a2035; }
.bird-guide .character-name { display: block; font-size: 16px; font-weight: 650; }
.bird-guide .character-alias { display: block; font-size: 12px; opacity: .8; overflow-wrap: anywhere; }
.bird-guide .character-count { border: 1px solid #63718b; border-radius: 5px; padding: 2px 7px; font-size: 12px; white-space: nowrap; }
.bird-guide .character[aria-current=true] .character-count { border-color: #8f743b; }
.bird-guide .sidebar-note { color: var(--muted); font-size: 13px; margin-top: 24px; padding: 18px 3px 0; border-top: 1px solid var(--line); }
.bird-guide .main { padding: 30px 34px; min-width: 0; scroll-margin-top: 16px; }
.bird-guide .breadcrumb { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.bird-guide .character-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.bird-guide h2 { font-size: 33px; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.bird-guide .alias-line { color: var(--muted); font-size: 14px; margin: 8px 0 0; overflow-wrap: anywhere; }
.bird-guide .copy-link { color: var(--green); background: var(--inset); border: 1px solid #64748e; border-radius: 6px; padding: 9px 11px; font-size: 13px; min-height: 44px; white-space: nowrap; }
.bird-guide .stats-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 20px 0 12px; color: var(--muted); font-size: 14px; }
.bird-guide .badge { display: inline-block; font-size: 12px; font-weight: 650; padding: 4px 8px; background: #1b3e47; border: 1px solid #4b7e86; color: #b7e6eb; border-radius: 5px; }
.bird-guide .badge.pending { color: #f1d28c; border-color: #8e7746; background: #3e3423; }
.bird-guide .coverage-note { color: var(--accent); font-size: 14px; margin: 0 0 22px; }
.bird-guide .filter { padding: 19px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bird-guide .results-count { font-size: 14px; color: var(--muted); margin: 17px 0; }
.bird-guide .dialogues { display: grid; gap: 0; border: 1px solid #4b5874; border-radius: 7px; overflow: hidden; }
.bird-guide .dialogue { border: 0; border-bottom: 1px solid var(--line); padding: 0; background: #11182d; }
.bird-guide .dialogue:last-child { border-bottom: 0; }
.bird-guide .dialogue-summary { display: grid; grid-template-columns: 24px minmax(0,1.2fr) minmax(0,1fr) 24px; align-items: center; gap: 12px; padding: 13px 15px; min-height: 52px; cursor: pointer; list-style: none; }
.bird-guide .dialogue-summary::-webkit-details-marker { display: none; }
.bird-guide .dialogue-detail[open] > .dialogue-summary { background: #26314e; }
.bird-guide .dialogue-no { color: #b7c4d8; font-size: 12px; font-variant-numeric: tabular-nums; }
.bird-guide h3 { color: var(--ink); font-size: 16px; line-height: 1.35; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bird-guide .answer-text { color: #f5dda1; font-size: 16px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
.bird-guide .row-more { color: var(--green); font-size: 11px; border: 1px solid #4b7e86; border-radius: 4px; text-align: center; line-height: 20px; }
.bird-guide .row-more.pending { color: #f1d28c; border-color: #8e7746; }
.bird-guide .dialogue-extra { padding: 12px 16px; border-top: 1px solid var(--line); }
.bird-guide .notes { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.bird-guide .source-links { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: 9px; font-size: 13px; }
.bird-guide .source-links a { min-height: 38px; display: inline-flex; align-items: center; }
.bird-guide .empty { padding: 50px 22px; text-align: center; border: 1px dashed #697893; border-radius: 8px; color: var(--muted); font-size: 15px; }
.bird-guide .empty-symbol { display: block; font-size: 30px; color: var(--accent); margin-bottom: 10px; }
.bird-guide .empty strong { display: block; color: var(--ink); font-size: 19px; margin-bottom: 8px; }
.bird-guide .empty p { margin: 0; }
.bird-guide .footnote { font-size: 13px; color: var(--muted); margin: 24px 0 0; line-height: 1.9; }
.bird-guide .site-footer { max-width: 1192px; margin: auto; padding: 0 0 30px; display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 13px; }
.bird-guide .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1230px) {
  .bird-guide .coverage-summary, .bird-guide .guide-method, .bird-guide .workbench { margin-left: 24px; margin-right: 24px; }
  .bird-guide .site-footer { margin: 0 24px; }
  .bird-guide .guide-tools { margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 850px) {
  .bird-guide .hero-note { display: none; }
  .bird-guide .hero { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .bird-guide .workbench { grid-template-columns: 225px minmax(0, 1fr); }
  .bird-guide .main { padding: 26px 22px; }
  .bird-guide .sidebar { padding: 20px 12px; }
}
@media (max-width: 650px) {
  .bird-guide .masthead { padding: 2px 10px; font-size: 11px; gap: 8px; }
  .bird-guide .brand { min-height: 28px; gap: 6px; }
  .bird-guide .brand-mark { width: 18px; height: 18px; }
  .bird-guide .edition { font-size: 11px; }
  .bird-guide .hero { padding: 2px 10px 5px; }
  .bird-guide h1 { font-size: 20px; line-height: 1.3; margin: 0; }
  .bird-guide .eyebrow, .bird-guide .subtitle { display: none; }
  .bird-guide .coverage-summary { margin: 8px 0; padding: 8px; font-size: 13px; }
  .bird-guide .guide-method { margin: 0 8px 4px; padding: 2px 8px; font-size: 13px; }
  .bird-guide .guide-method > summary { min-height: 25px; font-size: 12px; }
  .bird-guide .guide-tools { margin: 0 8px 4px; gap: 8px; }
  .bird-guide .guide-tools .guide-method { padding: 3px 6px; }
  .bird-guide .source-shortcut { padding: 0; }
  .bird-guide .source-shortcut a { font-size: 13px; line-height: 20px; }
  .bird-guide .source-shortcut small { font-size: 10px; line-height: 13px; }
  .bird-guide .workbench { display: block; margin: 0 8px 4px; min-height: 0; border-radius: 6px; }
  .bird-guide .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 0; }
  .bird-guide .picker-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; cursor: pointer; list-style: none; }
  .bird-guide .picker-summary::-webkit-details-marker { display: none; }
  .bird-guide .picker-summary strong { font-size: 18px; line-height: 1.3; }
  .bird-guide .picker-summary span { font-size: 12px; color: var(--green); }
  .bird-guide .picker-body { padding: 12px; }
  .bird-guide .character-list { flex-direction: row; max-height: 160px; gap: 8px; flex-wrap: wrap; }
  .bird-guide .character { width: auto; min-height: 46px; padding: 9px 10px; border-color: #515e77; background: #1d253d; gap: 8px; }
  .bird-guide .character-name { font-size: 14px; }
  .bird-guide .character-alias { display: none; }
  .bird-guide .character-count { font-size: 11px; }
  .bird-guide .sidebar-note { display: none; }
  .bird-guide .main { display: flex; flex-direction: column; padding: 4px 6px 0; }
  .bird-guide .character-info { order: 5; margin-top: 3px; }
  .bird-guide .character-info > summary { display: block; min-height: 32px; padding: 7px 2px; cursor: pointer; font-size: 12px; color: var(--muted); }
  .bird-guide .character-info .footnote { margin: 10px 0; }
  .bird-guide h2 { font-size: 24px; }
  .bird-guide .character-heading { gap: 10px; flex-wrap: wrap; }
  .bird-guide .filter { padding: 0; border: 0; order: 0; }
  .bird-guide .filter .field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .bird-guide .filter input { height: 38px; padding: 7px 10px 7px 34px; }
  .bird-guide .filter .input-wrap::before { top: 1px; left: 10px; }
  .bird-guide .results-count { order: 1; margin: 3px 2px; font-size: 12px; line-height: 18px; }
  .bird-guide .dialogues { order: 2; }
  .bird-guide .dialogue-summary { grid-template-columns: 18px minmax(0,1.2fr) minmax(0,1fr) 20px; gap: 6px; padding: 8px 6px; min-height: 40px; }
  .bird-guide h3, .bird-guide .answer-text { font-size: 15px; line-height: 1.35; }
  .bird-guide .dialogue-no { font-size: 11px; }
  .bird-guide .dialogue-extra { padding: 10px; }
  .bird-guide .site-footer { display: block; margin: 3px 10px; padding-bottom: 8px; font-size: 11px; }
  .bird-guide .site-footer span { display: block; margin-bottom: 2px; }
  .bird-guide input { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .bird-guide .character { transition: background .15s, color .15s; }
}