.relation-component {
  --ink: #28221e;
  --muted: #8d837c;
  --line: #e6ded7;
  --panel: #fffefa;
  --accent: #748078;
  --accent-soft: #f2f5f2;
  font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  margin: 14px 0 0 40px;
}
.relation-component, .relation-component * { box-sizing: border-box; }
.relation-component button, .relation-component a { font: inherit; }

.relation-trigger { display: inline-grid; grid-template-columns: 26px auto 22px; gap: 9px; align-items: center; min-width: 202px; padding: 9px 11px; border: 1px solid #e2dbd5; border-radius: 9px; color: #766d67; background: #faf8f4; box-shadow: 0 3px 12px rgb(67 58 50 / 3%); text-align: left; cursor: pointer; transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.relation-trigger:hover { border-color: #cfc4bc; transform: translateY(-1px); box-shadow: 0 6px 16px rgb(67 58 50 / 6%); }
.relation-trigger-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #ded8d2; border-radius: 7px; color: #83786f; background: #f4f0eb; font-size: 15px; }
.relation-trigger-copy { display: grid; gap: 1px; }
.relation-trigger-copy strong { font-size: 13px; letter-spacing: .04em; }
.relation-trigger-copy small { color: #929b95; font-size: 10px; font-weight: 500; }
.relation-trigger-count { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #827970; background: #eeeae5; font-size: 10px; font-weight: 800; }
.relation-backdrop { position: fixed; inset: 0; z-index: 70; background: rgb(47 39 33 / 28%); backdrop-filter: blur(2px); }
.relation-panel { position: fixed; left: 50%; top: 50%; z-index: 71; width: min(610px, calc(100vw - 64px)); max-height: 72vh; overflow: visible; opacity: 0; pointer-events: none; transform: translate(-50%, -47%) scale(.975); transition: opacity 180ms ease, transform 220ms ease; }
.relation-panel.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.relation-panel-scroll { max-height: 72vh; overflow-y: auto; border: 1px solid #e4dcd5; border-radius: 14px; background: var(--panel); box-shadow: 0 20px 54px rgb(50 36 28 / 16%); }
.relation-panel-scroll > header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 9px 12px 3px; background: linear-gradient(rgb(255 254 250 / 98%) 72%, rgb(255 254 250 / 0%)); }
.relation-eyebrow { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.relation-panel header button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: #fffefa; font-size: 20px; cursor: pointer; }
.relation-panel-body { padding: 0 21px 22px; }
.relation-sense-tabs, .relation-topic-tabs { position: absolute; left: -58px; top: 68px; display: grid; gap: 6px; width: 58px; z-index: -1; }
.relation-sense-tabs button, .relation-topic-tabs button { padding: 10px 6px 10px 4px; border: 1px solid #ddd8d1; border-right: 0; border-radius: 8px 0 0 8px; color: #877e77; background: #f3f0eb; box-shadow: -5px 4px 12px rgb(50 36 28 / 5%); font-size: 11px; font-weight: 700; cursor: pointer; transition: transform 150ms ease, background 150ms ease; }
.relation-sense-tabs button[aria-selected="true"], .relation-topic-tabs button[aria-selected="true"] { color: #657069; background: var(--panel); transform: translateX(-4px); }
.relation-topic-tabs.is-inline { position: static; z-index: auto; display: flex; flex-wrap: wrap; width: auto; margin: 1px 0 12px; }
.relation-topic-tabs.is-inline button { padding: 6px 10px; border: 1px solid #ddd8d1; border-radius: 999px; box-shadow: none; }
.relation-topic-tabs.is-inline button[aria-selected="true"] { border-color: #c8d0ca; background: var(--accent-soft); transform: none; }
.relation-sense-panel[hidden] { display: none; }
.relation-group[hidden] { display: none; }
.relation-group h3 { margin: 2px 0 6px; color: #302925; font-size: 18px; line-height: 1.45; }
.relation-group + .relation-group { margin-top: 24px; padding-top: 18px; border-top: 1px solid #eee7e1; }
.relation-summary { margin: 9px 1px 11px; padding-left: 10px; border-left: 2px solid #d6d1ca; color: #776f69; font-size: 12px; line-height: 1.65; }
.relation-card-list { display: grid; gap: 8px; }
.relation-card { display: block; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; color: inherit; background: #fffefa; text-decoration: none; transition: border-color 150ms ease, transform 150ms ease; }
.relation-card:hover { border-color: #c5bbb3; transform: translateY(-1px); }
.relation-card.is-current { border-color: #bcc8c0; background: #f6f8f5; }
.relation-card-head { display: flex; align-items: center; gap: 9px; }
.relation-card-head strong { color: #302925; font-size: 17px; }
.relation-card-head > span { color: var(--muted); font-size: 11px; }
.relation-current { margin-left: auto; padding: 2px 7px; border-radius: 999px; color: var(--accent) !important; background: var(--accent-soft); font-size: 10px !important; font-weight: 800; }
.relation-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.relation-tags span { padding: 2px 7px; border-radius: 999px; color: #846348; background: #f8eee4; font-size: 11px; }
.relation-card p { margin: 8px 0; color: #4c4540; font-size: 12px; font-weight: 600; line-height: 1.6; }
.relation-example { margin: 6px 0; padding: 7px 9px; border-left: 2px solid #d0d6d1; background: #faf9f6; }
.relation-card p + .relation-example { margin-top: 9px; }
.relation-example span, .relation-example em { display: block; line-height: 1.7; }
.relation-example span { color: #3b3531; font-size: 13px; }
.relation-example em { margin-top: 1px; color: var(--muted); font-size: 12px; font-style: normal; }
.relation-example .relation-example-note { display: block; margin-top: 5px; padding: 5px 0 0; border-top: 1px dashed #e5e0db; color: #7d756f; font-size: 11px; line-height: 1.55; }
.relation-value { display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: start; padding: 3px 0; color: #9a9089; font-size: 11px; }
.relation-value strong { color: #454b46; font-weight: 500; line-height: 1.55; }
.relation-dots { display: inline-flex; gap: 5px; }
.relation-dot { width: 8px; height: 8px; border-radius: 50%; background: #e2e5e1; }
.relation-dot.is-filled { background: #607d8b; }
.relation-card > small { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); line-height: 1.55; }
.relation-caution { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.relation-caution > strong { color: #786b62; font-size: 12px; letter-spacing: .08em; }
.relation-caution > p { margin: 5px 0 9px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.relation-caution-example { padding: 9px 11px; border-left: 2px solid #c7d1ca; background: #fafaf7; }
.relation-caution-example span, .relation-caution-example em, .relation-caution-example small { display: block; line-height: 1.65; }
.relation-caution-example em { margin-top: 2px; color: var(--muted); font-size: 12px; font-style: normal; }
.relation-caution-example small { margin-top: 6px; color: #758078; font-size: 11px; }
.relation-group-caution { margin: 11px 0 2px; padding: 11px 12px; border: 1px solid #e4dcd3; border-radius: 10px; background: #faf7f2; }
.relation-group-caution > strong { color: #786b62; font-size: 12px; letter-spacing: .08em; }
.relation-group-caution > p { margin: 6px 0 9px; color: #514a44; font-size: 13px; font-weight: 650; line-height: 1.65; }
body.has-relation-panel { overflow: hidden; }

@media (max-width: 600px) {
  .relation-component { margin-left: 0; }
  .relation-panel-body { padding-left: 16px; padding-right: 16px; }
  .relation-panel { width: calc(100vw - 24px); max-height: 86vh; }
  .relation-panel-scroll { max-height: 86vh; border-radius: 13px; }
  .relation-sense-tabs, .relation-topic-tabs { position: absolute; left: 14px; right: 54px; top: -39px; z-index: -1; display: flex; width: auto; }
  .relation-sense-tabs button, .relation-topic-tabs button { min-height: 40px; padding: 9px 14px; border-right: 1px solid #ddd8d1; border-radius: 8px 8px 0 0; }
  .relation-sense-tabs button[aria-selected="true"], .relation-topic-tabs button[aria-selected="true"] { transform: translateY(-3px); }
  .relation-sense-tabs + .relation-panel-scroll .relation-panel-body, .relation-topic-tabs + .relation-panel-scroll .relation-panel-body { padding-top: 8px; }
  .relation-group h3 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .relation-panel, .relation-card { transition: none; }
}