.lookup-page { }
.lookup-heading { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 24px; padding: 24px 32px; margin: 20px 0 16px; border: 1px solid #dce7d2; border-radius: 24px; background: radial-gradient(ellipse at 90% 0, #fff1d2, transparent 55%), #edf4e5; }
.lookup-heading > div { min-width: 0; }
.lookup-heading .eyebrow { margin-bottom: 6px; font-size: 14px; }
.lookup-heading h1 { margin-bottom: 6px; font-size: 36px; }
.lookup-heading .lead { margin: 0; font-size: 18px; }
.lookup-heading.is-results { display: block; padding: 16px 24px; margin-block: 16px 12px; }
.lookup-heading.is-results h1 { font-size: 28px; margin-bottom: 2px; }
.lookup-heading.is-results .lead { font-size: 16px; }
.letter-art { position: relative; width: 220px; height: 128px; justify-self: center; }
.letter-art > span { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #fffc; border-radius: 20px; box-shadow: 0 6px 0 #263d3807; }
.han-letter { top: 12px; left: 10px; width: 90px; height: 104px; background: #dceaca; color: #27543c; font-size: 50px; line-height: 1.2; transform: rotate(-8deg); }
.en-letter { top: 4px; left: 108px; width: 90px; height: 100px; background: #ffe8bd; font-family: Georgia, serif; font-size: 40px; line-height: 1.4; transform: rotate(9deg); }
.letter-art small { font: 11px/1.6 system-ui, sans-serif; }
.letter-art i { position: absolute; right: 0; bottom: 0; color: #a66a2c; font-size: 26px; font-style: normal; }
.lookup-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 18px; padding: 20px 24px; border: 2px solid #baceab; border-radius: 20px; background: var(--white); box-shadow: 0 4px 0 #e1ebd9; }
.lookup-query { min-width: 0; }
.lookup-query > label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 15px; font-weight: 600; }
.lookup-query input { width: 100%; min-height: 56px; font-size: 21px; }
.lookup-search > .button { align-self: end; min-height: 56px; padding-inline: 28px; }
.lookup-search > .errorlist { grid-column: 1 / -1; margin: 0; }
.lookup-search .scope-group { grid-column: 1 / -1; min-width: 0; border: 0; margin: 0; padding: 0; }
.lookup-search .scope-legend { float: left; margin-right: 16px; padding: 10px 0; color: var(--muted); font-size: 14px; font-weight: 650; }
.lookup-search .scope-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.lookup-search .scope-radios div { display: contents; }
.lookup-search .scope-radios label { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin: 0; padding: 7px 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; font-size: 15px; font-weight: 650; }
.lookup-search .scope-radios input[type="radio"] { flex: 0 0 16px; width: 16px; height: 16px; min-width: 16px; min-height: 16px; padding: 0; margin: 0; border: 0; accent-color: var(--green); }
.lookup-search .scope-radios label:has(input:checked) { background: var(--green); border-color: var(--green); color: #fff; }
.lookup-search .scope-radios label:has(input:checked) input { accent-color: #fff; }
.lookup-search .scope-radios label:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
.lookup-examples { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 20px 4px 12px; }
.lookup-example-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lookup-example-group > span { margin-right: 2px; color: var(--muted); font-size: 14px; }
.lookup-example-group a, .lookup-source-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); color: var(--green-dark); font-size: 16px; }
.lookup-example-group a:hover, .lookup-source-links a:hover { background: #dce9ce; }
.lookup-source-browser { margin: 12px 0 24px; color: var(--muted); font-size: 15px; }
.lookup-source-browser summary { width: fit-content; min-height: 44px; padding: 9px 0; color: var(--green); cursor: pointer; }
.lookup-source-browser p { margin: 8px 0; }
.lookup-source-browser p a { text-decoration: underline; text-underline-offset: 4px; }
.lookup-source-links { display: flex; flex-wrap: wrap; gap: 8px; }

.lookup-results-heading h2 { overflow-wrap: anywhere; }
.dictionary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.dictionary-card { display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--line); border-bottom: 4px solid #d6e4c8; border-radius: 24px; background: var(--white); overflow-wrap: anywhere; transition: border-color .18s, transform .18s; }
.dictionary-card:hover { border-color: #8faa79; transform: translateY(-3px); }
.dictionary-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--green); }
.dictionary-card-top > span[aria-hidden] { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--soft); font-size: 24px; }
.dictionary-card h3 { margin: 22px 0 10px; font-size: 36px; line-height: 1.4; }
.character-card h3 { font-size: 64px; }
.reading { margin-bottom: 18px; color: var(--green); font-size: 21px; line-height: 1.8; overflow-wrap: anywhere; }
.reading > span { display: inline-block; padding: 3px 9px; margin-left: 12px; border-radius: 8px; background: var(--soft); font-size: 15px; }
.gloss-label { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.dictionary-excerpt { flex: 1; margin-bottom: 24px; font-size: 18px; line-height: 1.9; }
.dictionary-card-source { padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.8; }
.lookup-footnote { margin: 28px 0; color: var(--muted); font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.lookup-footnote a, .dictionary-evidence a, .dictionary-aside > a, .character-facts a, .dictionary-source a { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
.dictionary-teaching { margin-top: 48px; }
.dictionary-reader-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 23vw, 400px); gap: 32px; align-items: start; max-width: 1800px; margin-inline: auto; }
.dictionary-reader { min-width: 0; padding: clamp(28px, 3vw, 56px); border: 1px solid var(--line); border-radius: 26px; background: var(--white); overflow-wrap: anywhere; }
.entry-heading { padding-bottom: 24px; }
.entry-heading h1 { margin-bottom: 16px; font-size: 54px; }
.entry-heading .character-heading { font-size: 112px; line-height: 1.3; }
.character-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 26px; margin: 0; border-radius: 20px; background: #edf3e3; }
.character-facts dt { margin-bottom: 8px; color: var(--muted); font-size: 16px; }
.character-facts dd { margin: 0; font-size: 24px; line-height: 1.7; }
.character-facts a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.dictionary-sense { padding: 30px 0 22px; border-top: 1px solid var(--line); }
.sense-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.sense-number { display: grid; place-items: center; min-width: 42px; height: 42px; padding-inline: 6px; border-radius: 13px; background: var(--soft); color: var(--green); font-size: 20px; font-weight: 750; }
.pos { color: var(--muted); font-size: 16px; }
.dictionary-definition { max-width: 52rem; font-size: 22px; line-height: 1.95; }
.dictionary-examples { padding-left: 22px; margin: 24px 0; border-left: 4px solid #c8dcb8; }
.dictionary-examples h3 { margin-bottom: 12px; color: var(--muted); font-size: 17px; }
.dictionary-examples ul { padding-left: 20px; font-size: 20px; line-height: 1.9; }
.dictionary-examples li + li { margin-top: 10px; }
.dictionary-evidence { margin-top: 24px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.dictionary-evidence summary { min-height: 48px; padding: 10px 0; color: var(--green); cursor: pointer; }
.dictionary-evidence p { margin: 10px 0; }
.dictionary-evidence pre { padding: 22px; border-radius: 16px; background: #f0f3ea; font: 14px/1.85 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.dictionary-aside { position: sticky; top: 24px; padding: 28px; border: 1px solid #d5e3c9; border-radius: 24px; background: #eaf2df; }
.dictionary-aside h2 { font-size: 28px; }
.dictionary-aside p:not(.eyebrow) { margin-top: 28px; color: var(--muted); font-size: 17px; }
.dictionary-aside > a { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; }
.dictionary-source { margin-bottom: 28px; }
.dictionary-source dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; font-size: 18px; line-height: 1.9; }
.dictionary-source dt { color: var(--muted); }
.dictionary-source dd { margin: 0; }


@media (max-width: 1199px) {
  .dictionary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dictionary-reader-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; }
  .dictionary-reader { padding: 28px; }
  .dictionary-aside { padding: 24px; }
}

@media (max-width: 899px) {
  .dictionary-reader-layout { grid-template-columns: minmax(0, 1fr); }
  .dictionary-aside { position: static; }
}



@media (max-width: 599px) {
  .dictionary-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dictionary-card { padding: 24px; border-radius: 22px; }
  .dictionary-card h3 { margin-top: 18px; font-size: 34px; }
  .dictionary-card.character-card h3 { font-size: 60px; }
  .dictionary-excerpt { font-size: 18px; }
  .dictionary-reader { padding: 26px 22px; border-radius: 22px; }
  .dictionary-aside { padding: 24px; }
  .entry-heading h1 { font-size: 42px; }
  .entry-heading .character-heading { font-size: 96px; }
  .dictionary-definition { font-size: 21px; }
  .character-facts { gap: 18px; padding: 20px; border-radius: 16px; }
  .character-facts dt { font-size: 15px; }
  .character-facts dd { font-size: 22px; }
  .dictionary-source dl { grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: 17px; }
  .dictionary-source dd { margin-bottom: 14px; }
  .dictionary-evidence pre { padding: 16px; }
  .lookup-results-heading > p { width: 100%; margin-top: 8px; }
}

@media (max-width: 359px) {
  .character-facts { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .dictionary-card { transition: none; }
  .dictionary-card:hover { transform: none; }
}

.dictionary-reference { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.dictionary-reference > p { color: var(--muted); line-height: 1.8; }
.reference-definitions { padding-left: 20px; font-size: 17px; line-height: 1.8; }
.dictionary-reader .dictionary-reference .dictionary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px) {
  .dictionary-reader .dictionary-reference .dictionary-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 699px) {
  .lookup-heading { grid-template-columns: minmax(0, 1fr); padding: 20px 24px; margin-top: 16px; }
  .lookup-heading h1 { font-size: 30px; }
  .lookup-heading .lead { font-size: 16px; }
  .letter-art { display: none; }
  .lookup-search { gap: 12px; padding: 18px; }
  .lookup-search > .button { padding-inline: 18px; }
  .lookup-search .scope-legend { float: none; padding: 0; margin: 0 0 8px; }
  .lookup-search .scope-radios { gap: 6px; }
  .lookup-search .scope-radios label { padding-inline: 10px; }
  .lookup-examples { gap: 10px 20px; }
}
@media (max-width: 449px) {
  .lookup-search { grid-template-columns: minmax(0, 1fr); }
  .lookup-search > .button { grid-row: 3; width: 100%; }
  .lookup-search .scope-radios label { flex: 1 1 40%; justify-content: center; }
  .lookup-query input { font-size: 19px; }
  .lookup-example-group { gap: 6px; }
}