.thai-family { max-width: 850px; }
.thai-family .section-kicker { margin: 0 0 12px; }
.thai-action { margin: 8px 0 4px; }
.thai-table-details { max-width: 650px; margin-top: 28px; }
.thai-family summary { min-height: 44px; padding: 10px 0; font-weight: 750; cursor: pointer; }
.thai-family summary:focus-visible, .thai-action:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.thai-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 14px; font-size: 13px; font-weight: 750; }
.thai-legend > span { padding: 5px 9px; border-radius: 6px; }
.thai-pairs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.thai-pair { display: grid; gap: 3px; place-items: center; min-height: 44px; min-width: 24px; box-sizing: border-box; padding: 9px 2px 5px; border-radius: 7px; font-size: clamp(12px, 2.8vw, 19px); font-weight: 750; font-variant-numeric: tabular-nums; text-decoration: none; }
.thai-pair:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (hover: hover) { .thai-pair:hover { box-shadow: inset 0 0 0 2px currentColor; } }
.thai-pair > small { font-size: 10px; line-height: 1; }
.thai-green { background: #dfeee4; color: #214c35; }
.thai-amber { background: #f7edcb; color: #644b0b; }
.thai-pink { background: #f1dee6; color: #76304d; }
.thai-pair.thai-pink { color: #a0162a; }
body[data-theme="dark"] .thai-green { background: #243d30; color: #d5f2df; }
body[data-theme="dark"] .thai-amber { background: #494024; color: #f8e8aa; }
body[data-theme="dark"] .thai-pink { background: #4d2e3c; color: #f5d6e5; }
body[data-theme="dark"] .thai-pair.thai-pink { color: #ff8b96; }
.thai-research { margin-top: 24px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.thai-research summary { color: var(--text); }
.thai-research a { text-decoration: underline; text-underline-offset: 3px; }
.pair-finder { padding: 24px; margin: 24px 0; border: 1px solid var(--line, #80748e); border-radius: 16px; }
.pair-finder h3 { margin: 0 0 12px; }
.pair-finder p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.pair-input-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.pair-input-row label { display: grid; gap: 8px; flex: 1 1 250px; font-size: 14px; }
.pair-input-row input { width: 100%; min-height: 48px; box-sizing: border-box; border: 1px solid var(--line, #80748e); border-radius: 8px; padding: 12px; background: var(--bg); color: var(--text); font: inherit; }
.pair-input-row .pattern-all { margin: 0; min-height: 48px; }
.pair-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.pair-choice { min-width: 80px; border: 0; cursor: pointer; font: inherit; font-weight: 750; padding: 12px; }
.pair-finder .pair-chain { font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere; }
#pair-result[aria-disabled="true"] { opacity: .5; cursor: default; }
@media (max-width: 480px) { .thai-pairs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .pair-finder { padding: 16px; } .pair-input-row .pattern-all { width: 100%; } }
@media (max-width: 380px) { .thai-pairs { gap: 3px; } .thai-pair { padding-top: 7px; border-radius: 5px; } }