@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root { --blue:#415b9f; --blue-dark:#344c8d; --yellow:#edce68; --ink:#303846; --muted:#737b87; --paper:#ffffff; --line:#e6e9ee; }
.directory { display:block; max-width:960px; padding:clamp(48px,10vh,100px) 24px; }
.people { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:20px; }
.person-link { display:flex; align-items:center; min-height:144px; padding:32px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:#303b50; text-decoration:none; font:500 36px/1.2 'Source Serif 4',Georgia,serif; transition:border-color .18s,background .18s; }
.person-link:hover { border-color:#b6c5e3; background:#fcfdff; }
.person-dot { color:#dec363; }
.person-arrow { margin-left:auto; padding-left:24px; color:#8b9bb8; font:24px/1 Arial,sans-serif; }
a:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.back-link { display:inline-block; margin-bottom:20px; color:var(--muted); font-size:13px; text-decoration:none; }
.back-link:hover { color:var(--blue); }
* { box-sizing:border-box; }
body { margin:0; background:#f7f8fa; color:var(--ink); font:16px Arial,'Microsoft YaHei',sans-serif; }
header { max-width:1280px; margin:auto; padding:40px 48px 0; }
h1 { margin:0; font:500 39px/1.1 'Source Serif 4',Georgia,serif; letter-spacing:-1.2px; color:#303b50; }
h1 span { color:#dec363; }
main { max-width:1280px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:38px; align-items:start; padding:22px 48px 50px; }
.reading { min-width:0; }
.guide { display:flex; flex-wrap:wrap; gap:12px 24px; min-height:42px; padding-bottom:18px; color:#78808c; font-size:13px; line-height:1.5; }
.dot { display:inline-block; width:6px; height:6px; background:var(--yellow); border-radius:3px; margin-right:8px; }
.dot.blue { background:var(--blue); }
#sentences { display:grid; gap:16px; }
.sentence { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:28px 28px 24px; box-shadow:0 2px 8px #23354f03; cursor:pointer; transition:border-color .18s,box-shadow .18s; }
.sentence:hover { border-color:#ced7e5; }
.sentence.active { border-color:#b6c5e3; box-shadow:0 3px 12px #415b9f06; }
.text { font:400 23px/1.85 'Source Serif 4',Georgia,serif; margin:0; color:#37394b; }
.word { font:inherit; color:inherit; border:0; padding:1px 0; background:transparent; cursor:pointer; border-radius:3px; transition:background .13s; display:inline; }
.word:hover { background:#f4efda; }
.word.related { background:#f7edbd; color:#4d482e; box-shadow:none; }
.word.selected { background:var(--blue); color:white; box-shadow:none; }
button:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.sentence:focus-visible,#biography:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
#biography { cursor:pointer; }
.translate { min-height:34px; min-width:42px; border:0; background:#f1f3f7; color:#738097; border-radius:6px; padding:6px 10px; font-size:13px; cursor:pointer; margin:18px 0 0; transition:background .15s; }
.translate:hover,.translate[aria-expanded=true] { color:#415b9f; background:#edf1f9; }
.translation { font:400 16px/1.95 'Noto Serif SC',serif; padding:5px 0 5px 16px; margin:20px 0 0; color:#657084; background:transparent; border-left:2px solid #e7cf79; border-radius:0; animation:reveal .2s ease; }
.translation[hidden] { display:none; }
aside { position:sticky; top:26px; margin-top:0; background:white; color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:25px; box-shadow:0 3px 16px #23354f04; overflow:hidden; }
.aside-label { font-size:15px; font-weight:500; display:flex; justify-content:space-between; align-items:center; padding-bottom:20px; border-bottom:1px solid var(--line); }
.aside-label span { font-size:11px; letter-spacing:1.5px; color:#929bab; font-weight:400; }
.empty-icon { font:44px/1 'Source Serif 4',Georgia,serif; color:#b9c5dd; margin:26px 0 18px; letter-spacing:-2px; }
.empty-icon span { color:#d7bd65!important; margin-left:10px; }
.empty h2 { font-size:19px; line-height:1.6; font-weight:500; margin:0 0 12px; }
.empty p { font-size:14px; color:#78818f; line-height:1.95; }
.example { display:block; width:100%; text-align:left; border:0; border-radius:7px; background:#f7f4e7; color:#596384; padding:14px 13px; font-size:14px; font-weight:400; cursor:pointer; margin:25px 0 6px; box-shadow:none; }
.example:hover { background:#f3edda; }
.hint { font-size:13px; color:#8992a0; margin-top:22px; line-height:1.9; }
.detail-head { display:flex; justify-content:flex-end; align-items:center; margin-top:0; }
.eyebrow { font-size:12px; color:#8993a3; }
.close { border:0; background:#f2f4f7; color:#7d889b; border-radius:7px; width:32px; height:32px; font-size:20px; cursor:pointer; }
.close:hover { background:#e9edf4; }
#detail > .tag { margin-top:4px; margin-bottom:10px; }
#detail > .tag + .lemma { margin-top:0; }
.lemma { font:500 32px/1.2 'Source Serif 4',Georgia,serif; color:var(--blue); margin:16px 0 12px; overflow-wrap:anywhere; }
.meaning { font-size:16px; line-height:1.85; margin:0 0 20px; color:#4e5a6d; }
.variant { border:1px solid #e1e6ef; background:transparent; border-radius:6px; color:#768299; padding:8px 11px; font-size:13px; margin:5px 6px 0 0; cursor:pointer; }
.variant.on { background:#edf1f9; border-color:#ced8ec; color:#415b9f; }
.note { padding:20px 0 0; background:transparent; color:var(--ink); border-top:1px solid var(--line); margin-top:22px; }
.tag { display:inline-block; font-size:12px; color:#89743b; background:#f8f3df; padding:4px 8px; border-radius:4px; margin-bottom:13px; }
.history-title { font-size:15px; font-weight:500; line-height:1.7; color:#4e5a6d; margin:0 0 12px; }
.background-note p + p { margin-top:12px; }
.background-note .context-copy + .history-title { margin-top:18px; }
.reading-sources { margin-top:13px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.reading-sources .background-source { margin-top:0; }
.source-note .reading-sources { margin-top:0; }
.note-title { font:500 21px/1.4 'Source Serif 4',Georgia,serif; color:var(--blue); margin:0 0 12px; overflow-wrap:anywhere; }
.note p { font-size:14px; line-height:1.9; color:#717d90; margin:0; }
.note .translation-note { color:#303650; font-size:16px; font-weight:400; margin-bottom:10px; }
footer { font-size:12px; line-height:2; color:#929ba8; margin:28px 4px; }
@keyframes reveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media(max-width:1050px) {
  header { padding:32px 28px 0; }
  main { gap:22px; grid-template-columns:minmax(0,1fr) 300px; padding:22px 28px 40px; }
  .sentence { padding:26px 24px 22px; }
  aside { padding:22px; }
  .text { font-size:23px; }
}
@media(max-width:720px) {
  header { padding:27px 20px 0; }
  h1 { font-size:35px; }
  main { display:block; padding:20px 16px 30px; }
  .guide { gap:10px 16px; padding:0 4px 18px; font-size:12px; }
  #sentences { gap:18px; }
  .sentence { border-radius:10px; padding:20px; }
  .text { font-size:21px; line-height:1.85; }
  aside { position:static; margin:22px 0 0; border-radius:10px; }
  .sentence aside { margin:20px -8px -8px; padding:20px; cursor:default; }
  .sentence aside .aside-label { padding-bottom:16px; }
  .translation { padding:4px 0 4px 13px; }
  .lemma { font-size:29px; }
}
@media(prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }
.background-source { display:inline-block; margin-top:13px; font-size:12px; line-height:1.7; color:#6b7fa5; text-decoration:none; } .background-source:hover { text-decoration:underline; } @media(min-width:721px) { aside { max-height:calc(100dvh - 52px); overflow-y:auto; scrollbar-width:thin; } }
#biography { margin:0 0 26px; padding:0 4px 22px; border-bottom:1px solid var(--line); } .biography-sentence { padding:8px 0; border:0; border-radius:0; background:transparent; box-shadow:none; } .biography-sentence:hover,.biography-sentence.active { border:0; box-shadow:none; } .biography-sentence .text { font-size:19px; line-height:1.8; color:#647085; } .biography-sentence .translate { margin-top:6px; min-height:26px; min-width:28px; padding:3px 7px; font-size:12px; } .biography-sentence .translation { margin:10px 0; } .biography-source { font-size:12px; color:#8995a9; text-decoration:none; display:inline-block; margin-top:10px; } .biography-source:hover { text-decoration:underline; }
#biography > .translate { margin-top:8px; } #biography-translation p { margin:0 0 10px; } #biography-translation p:last-child { margin-bottom:0; }