.inner-main { padding-bottom: var(--s8); }
.inner-intro { max-width: 820px; padding-block: var(--s6) var(--s7); }
.inner-intro h1 { margin-top: var(--s2); }
.inner-intro > p { max-width: 66ch; margin-top: var(--s3); color: var(--muted); font-size: 18px; line-height: 28px; }
.breadcrumb { max-width: 100%; margin-bottom: var(--s5); overflow-x: auto; color: var(--muted); font-size: 13px; line-height: 20px; scrollbar-width: none; }
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb ol { display: flex; align-items: center; width: max-content; min-width: 0; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.breadcrumb li + li::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; margin-inline: 12px 14px; border-top: 1.5px solid #8793a1; border-right: 1.5px solid #8793a1; transform: rotate(45deg); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; margin-block: -6px; border-radius: 6px; color: var(--muted); font-weight: 550; text-decoration: none; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--blue); text-decoration: underline; }
.breadcrumb [aria-current="page"] { max-width: min(62vw, 360px); overflow: hidden; color: var(--ink); font-weight: 650; text-overflow: ellipsis; }
.breadcrumb + .page-kicker { margin-top: 0; }
.page-kicker { color: var(--blue); font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.page-lede-list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s4) 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.page-lede-list li::before { content: "✓"; margin-right: var(--s2); color: var(--success); font-weight: 700; }
.inner-section { padding-block: var(--s7); border-top: 1px solid var(--soft-line); scroll-margin-top: 24px; }
.inner-section-header { max-width: 720px; margin-bottom: var(--s6); }
.inner-section-header h2 { margin-top: var(--s2); }
.inner-section-header p { margin-top: var(--s3); color: var(--muted); line-height: 25px; }
.compact-header { margin-bottom: var(--s4); }
.tool-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.tool-card-main { padding: var(--s6); }
.tool-card-aside { padding: var(--s5) var(--s6); border-top: 1px solid var(--line); background: #f0f3f8; }
.tool-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.tool-topline h2 { font-size: 20px; }
.tool-topline p { margin-top: var(--s1); color: var(--muted); font-size: 14px; }
.input-label { display: block; margin-bottom: var(--s2); font-size: 14px; font-weight: 600; }
.checker-textarea, .report-fallback { display: block; width: 100%; min-height: 180px; padding: var(--s4); resize: vertical; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfe; color: var(--ink); line-height: 25px; }
.checker-textarea:focus, .report-fallback:focus { border-color: var(--blue); }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.tool-actions .button-primary { min-width: 180px; }
.button-quiet { min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: white; color: var(--blue); font-weight: 600; }
.button-quiet:hover { border-color: var(--blue); background: var(--blue-soft); }
.tool-limit { margin-left: auto; color: var(--muted); font-size: 13px; }
.checker-message { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.checker-message::before { content: "—"; display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--canvas); color: var(--muted); font-weight: 700; }
.checker-message[data-state="found"]::before { content: "!"; background: #fff3e8; color: #9a4d00; }
.checker-message[data-state="clear"]::before { content: "✓"; background: #eaf6ed; color: var(--success); }
.checker-message[data-state="error"]::before { content: "!"; background: #fff0ef; color: var(--error); }
.checker-message strong { display: block; }
.checker-message p { margin-top: var(--s1); color: var(--muted); font-size: 14px; line-height: 21px; }
.checker-results { padding-top: var(--s7); scroll-margin-top: 24px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; margin-bottom: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); gap: 1px; }
.metric-grid div { padding: var(--s4); background: white; }
.metric-grid dt { color: var(--muted); font-size: 13px; }
.metric-grid dd { margin: var(--s1) 0 0; font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }
.result-block { margin-top: var(--s5); }
.result-block-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); }
.result-block-header h3 { font-size: 18px; }
.toggle-control { display: inline-flex; gap: var(--s2); align-items: center; color: var(--muted); font-size: 14px; }
.annotated-preview { min-height: 104px; padding: var(--s4); overflow-wrap: anywhere; white-space: pre-wrap; unicode-bidi: isolate; direction: ltr; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfe; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 30px; }
.inspection-token { display: inline-block; margin-inline: 2px; padding-inline: 5px; border: 1px solid #9eb8ee; border-radius: 5px; background: var(--blue-soft); color: var(--blue-dark); font-size: 13px; white-space: nowrap; }
.layout-token { color: #7a4d00; background: #fff7e8; border-radius: 3px; white-space: pre; }
.finding-list { border-top: 1px solid var(--line); }
.finding-row { display: grid; grid-template-columns: 92px minmax(180px, 1fr) 100px auto; gap: var(--s4); align-items: center; padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.finding-position { color: var(--muted); font-size: 13px; }
.finding-identity strong, .finding-identity span { display: block; }
.finding-identity span { margin-top: 2px; color: var(--muted); font-size: 13px; }
.finding-row code { color: var(--blue); }
.finding-link { font-size: 14px; font-weight: 600; }
.empty-report { padding-block: var(--s4); color: var(--muted); }
.all-code-points { margin-top: var(--s5); border-bottom: 1px solid var(--line); }
.all-code-points summary { min-height: 52px; padding-block: var(--s3); font-weight: 600; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.data-table { width: 100%; border-collapse: collapse; min-width: 720px; text-align: left; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--soft-line); vertical-align: top; }
.data-table th { background: #f0f3f8; color: var(--muted); font-size: 12px; letter-spacing: .4px; text-transform: uppercase; }
.data-table td { font-size: 14px; }
.data-table tr:last-child td { border-bottom: 0; }
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.report-actions output { color: var(--muted); font-size: 14px; }
.report-fallback { min-height: 130px; margin-top: var(--s3); font-family: ui-monospace, monospace; font-size: 13px; }
.next-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6); }
.next-actions a { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: white; text-decoration: none; }
.next-actions strong, .next-actions span { display: block; }
.next-actions span { margin-top: var(--s1); color: var(--muted); font-size: 13px; line-height: 20px; }
.next-actions a:hover { border-color: var(--blue); background: var(--blue-soft); }
.trust-inline { display: flex; gap: var(--s3); margin-top: var(--s4); padding: var(--s4); border-radius: var(--radius); background: var(--blue-soft); color: var(--muted); font-size: 14px; line-height: 22px; }
.trust-inline strong { color: var(--ink); }

.choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.choice-card { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: white; color: var(--ink); text-decoration: none; }
.choice-card span, .choice-card strong { display: block; }
.choice-card span { color: var(--blue); font-family: ui-monospace, monospace; font-size: 13px; }
.choice-card strong { margin-top: var(--s2); }
.choice-card p { margin-top: var(--s1); color: var(--muted); font-size: 14px; line-height: 21px; }
.choice-card:hover { border-color: var(--blue); background: var(--blue-soft); }
.comparison-table { min-width: 940px; }
.comparison-table tr { scroll-margin-top: 24px; }
.character-name strong, .character-name span { display: block; }
.character-name span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.property-yes, .property-no { display: inline-flex; padding: 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 650; }
.property-yes { color: var(--success); background: #eaf6ed; }
.property-no { color: #7a4d00; background: #fff7e8; }
.row-action { white-space: nowrap; font-weight: 600; }
.demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.demo-card { min-width: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.demo-card p { margin-top: var(--s2); color: var(--muted); font-size: 14px; line-height: 22px; }
.character-sample { display: flex; align-items: center; justify-content: center; min-height: 86px; margin-top: var(--s4); border: 1px solid var(--soft-line); border-radius: var(--radius); background: #fbfcfe; font-family: ui-monospace, monospace; font-size: 22px; }
.wrap-sample { width: 188px; min-height: 78px; margin-top: var(--s4); padding: var(--s3); border: 1px solid var(--soft-line); border-radius: var(--radius); background: #fbfcfe; overflow-wrap: normal; }
.count-comparison { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s4); }
.count-comparison div { padding: var(--s3); border: 1px solid var(--soft-line); border-radius: var(--radius); background: #fbfcfe; text-align: center; }
.count-comparison code, .count-comparison strong { display: block; }
.count-comparison strong { margin-top: var(--s2); font-size: 24px; }
.definition-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.definition-list article { padding: var(--s4); border-left: 3px solid var(--blue); background: white; }
.definition-list p { margin-top: var(--s2); color: var(--muted); line-height: 23px; }

.symptom-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.symptom-nav a { display: flex; flex-direction: column; min-height: 136px; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: white; color: var(--ink); text-decoration: none; }
.symptom-nav .symptom-number { color: var(--blue); font-family: ui-monospace, monospace; font-size: 13px; }
.symptom-nav strong { margin-top: var(--s3); }
.symptom-nav span:last-child { margin-top: var(--s1); color: var(--muted); font-size: 13px; line-height: 20px; }
.symptom-nav a:hover { border-color: var(--blue); background: var(--blue-soft); }
.baseline-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--blue-soft); }
.baseline-check .baseline-number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: white; font-family: ui-monospace, monospace; }
.baseline-check p { margin-top: var(--s1); color: var(--muted); }
.recovery-path { display: grid; grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr); gap: var(--s7); padding-block: var(--s7); border-top: 1px solid var(--soft-line); scroll-margin-top: 24px; }
.recovery-path:first-of-type { margin-top: var(--s7); }
.recovery-path h2 { margin-top: var(--s2); }
.recovery-path > div:first-child p { margin-top: var(--s3); color: var(--muted); }
.step-list { counter-reset: steps; margin: 0; padding: 0; list-style: none; }
.step-list li { position: relative; padding: 0 0 var(--s5) 52px; }
.step-list li::before { counter-increment: steps; content: counter(steps); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); background: white; font-family: ui-monospace, monospace; font-size: 13px; }
.step-list li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 4px; width: 1px; background: var(--line); }
.step-list strong { display: block; }
.step-list p { margin-top: var(--s1); color: var(--muted); line-height: 23px; }
.stop-note { margin-top: var(--s2); padding: var(--s4); border-left: 3px solid #9a4d00; background: #fff7e8; color: #67420a; }
.contact-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); padding: var(--s6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; }
.contact-panel p { margin-top: var(--s2); color: var(--muted); }
.contact-checklist { margin: 0; padding-left: 20px; color: var(--muted); }
.contact-checklist li + li { margin-top: var(--s2); }
.contact-email { display: inline-flex; margin-top: var(--s4); font-size: 18px; font-weight: 650; overflow-wrap: anywhere; }

.document-layout { display: grid; grid-template-columns: minmax(180px, .42fr) minmax(0, 1.4fr); gap: var(--s8); align-items: start; }
.document-nav { position: sticky; top: var(--s5); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.document-nav strong { display: block; margin-bottom: var(--s2); font-size: 14px; }
.document-nav a { display: block; padding-block: 7px; color: var(--muted); font-size: 14px; }
.document-nav a:hover { color: var(--blue); }
.document-content { min-width: 0; }
.document-section { padding-block: var(--s6); border-top: 1px solid var(--soft-line); scroll-margin-top: 24px; }
.document-section:first-child { padding-top: 0; border-top: 0; }
.document-section h2 { font-size: 22px; }
.document-section h3 { margin-top: var(--s5); }
.document-section p, .document-section li { color: var(--muted); line-height: 25px; }
.document-section p { margin-top: var(--s3); }
.document-section ul { margin: var(--s3) 0 0; padding-left: 22px; }
.document-section li + li { margin-top: var(--s2); }
.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-top: var(--s4); }
.fact-card { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.fact-card span { display: block; color: var(--muted); font-size: 13px; }
.fact-card strong { display: block; margin-top: var(--s1); }
.policy-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-bottom: var(--s6); }
.policy-summary div { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.policy-summary strong, .policy-summary span { display: block; }
.policy-summary span { margin-top: var(--s1); color: var(--muted); font-size: 14px; line-height: 21px; }
.policy-table { min-width: 820px; }
.callout { margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--blue-soft); }
.callout strong { display: block; }
.callout p { margin-top: var(--s1); }
.source-list { display: grid; gap: var(--s3); margin-top: var(--s4); }
.source-list a { display: block; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: white; text-decoration: none; }
.source-list a span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }

.hub-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s8); }
.hub-tool { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: var(--s6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; }
.hub-tool-primary { border-color: #9eb8ee; box-shadow: inset 0 4px 0 var(--blue); }
.hub-type { color: var(--blue); font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .8px; }
.hub-tool h2 { margin-top: var(--s3); }
.hub-tool > p { margin-top: var(--s3); color: var(--muted); line-height: 24px; }
.hub-feature-list { margin: var(--s5) 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 22px; }
.hub-feature-list li + li { margin-top: var(--s2); }
.hub-tool .button { margin-top: auto; }
.hub-route-list { border-top: 1px solid var(--line); }
.hub-route-list a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 2px var(--s4); align-items: center; padding-block: var(--s4); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.hub-route-list a > span { grid-row: 1 / 3; color: var(--blue); font-family: ui-monospace, monospace; font-size: 13px; }
.hub-route-list strong { grid-column: 2; }
.hub-route-list p { grid-column: 2; color: var(--muted); font-size: 14px; line-height: 21px; }
.hub-route-list b { grid-column: 3; grid-row: 1 / 3; color: var(--blue); font-size: 20px; font-weight: 400; text-align: right; }
.hub-route-list a:hover strong { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.article-directory { padding-bottom: var(--s8); }
.article-directory-row { display: grid; grid-template-columns: 176px minmax(0, 1fr) 44px; gap: var(--s6); align-items: start; padding-block: var(--s6); border-top: 1px solid var(--line); }
.article-directory-row:last-child { border-bottom: 1px solid var(--line); }
.article-meta span, .article-meta code { display: block; }
.article-meta span { color: var(--blue); font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .8px; }
.article-meta code { margin-top: var(--s2); color: var(--muted); font-size: 12px; }
.article-directory-row h3 { font-size: 22px; line-height: 30px; }
.article-directory-row h3 a { color: var(--ink); text-decoration: none; }
.article-directory-row h3 a:hover { color: var(--blue); text-decoration: underline; }
.article-directory-row p { max-width: 64ch; margin-top: var(--s2); color: var(--muted); line-height: 24px; }
.article-directory-row ul { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s4) 0 0; padding: 0; color: var(--muted); font-size: 13px; list-style: none; }
.article-directory-row li::before { content: "✓"; margin-right: var(--s2); color: var(--success); font-weight: 700; }
.article-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: white; font-size: 20px; text-decoration: none; }
.article-arrow:hover { border-color: var(--blue); background: var(--blue-soft); }
.hub-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: center; padding: var(--s6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--blue-soft); }
.hub-callout h2 { margin-top: var(--s2); }
.hub-callout p { margin-top: var(--s2); color: var(--muted); }

.metric-grid-two { grid-template-columns: repeat(2, 1fr); }
.change-note { margin: var(--s3) 0 var(--s4); color: var(--muted); font-size: 14px; line-height: 22px; }
.removal-list { border-top: 1px solid var(--line); }
.removal-row { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: var(--s2) var(--s4); align-items: start; padding-block: var(--s4); border-bottom: 1px solid var(--line); cursor: pointer; }
.removal-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.removal-identity strong, .removal-identity span { display: block; }
.removal-identity span { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 20px; }
.removal-row code { color: var(--blue); white-space: nowrap; }
.risk-note { grid-column: 2 / -1; color: #67420a; line-height: 19px; }
.normalizer-presets, .option-grid { min-width: 0; margin: var(--s5) 0 0; padding: 0; border: 0; }
.normalizer-presets legend, .option-grid legend { margin-bottom: var(--s3); font-size: 14px; font-weight: 650; }
.normalizer-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.normalizer-presets legend { grid-column: 1 / -1; }
.normalizer-presets button { min-height: 86px; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: white; color: var(--ink); text-align: left; }
.normalizer-presets button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.normalizer-presets strong, .normalizer-presets span { display: block; }
.normalizer-presets span { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 18px; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfe; }
.option-grid legend { float: left; width: 100%; }
.option-grid label { display: flex; align-items: center; gap: var(--s2); min-height: 40px; font-size: 14px; }
.option-grid input { width: 18px; height: 18px; accent-color: var(--blue); }
.option-grid .select-option { justify-content: space-between; }
.option-grid select { width: auto; min-width: 108px; padding: 8px 32px 8px 10px; }
.change-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; margin-bottom: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); gap: 1px; }
.change-grid div { padding: var(--s3); background: white; }
.change-grid dt { color: var(--muted); font-size: 12px; }
.change-grid dd { margin: var(--s1) 0 0; font-size: 21px; font-weight: 650; }
.split-output { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: var(--s5); }
.visible-panel { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfe; }
.visible-panel > p { margin: var(--s1) 0 var(--s4); color: var(--muted); font-size: 13px; }
.visible-panel > strong { display: block; margin-top: var(--s3); font-size: 13px; }
.visible-whitespace { min-height: 82px; margin-top: var(--s2); padding: var(--s3); overflow: auto; border: 1px solid var(--soft-line); border-radius: 8px; background: white; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--blue-dark); font-size: 13px; line-height: 22px; }

.directory-controls { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(200px, .65fr) minmax(190px, .45fr); gap: var(--s4); align-items: end; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; }
.directory-controls h2 { font-size: 22px; }
.directory-controls p { margin-top: var(--s1); color: var(--muted); font-size: 14px; }
.directory-controls label span { display: block; margin-bottom: var(--s2); font-size: 13px; font-weight: 650; }
.directory-controls input, .directory-controls select { width: 100%; min-height: 46px; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font-size: 15px; }
.directory-status { margin: var(--s4) 0; color: var(--muted); font-size: 14px; }
.character-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); padding-bottom: var(--s8); }
.directory-card { display: flex; min-width: 0; flex-direction: column; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.directory-card-top { display: flex; justify-content: space-between; gap: var(--s3); align-items: start; }
.directory-card h2 { font-size: 17px; line-height: 23px; }
.directory-card code { color: var(--blue); font-size: 12px; white-space: nowrap; }
.directory-category { align-self: flex-start; margin-top: var(--s3); padding: 2px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-size: 11px; font-weight: 650; }
.directory-card > p { margin: var(--s3) 0; color: var(--muted); font-size: 14px; line-height: 21px; }
.directory-card > a { margin-top: auto; font-size: 13px; font-weight: 650; }
.directory-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: auto; }
.directory-actions .button { min-height: 40px; padding: var(--s2) var(--s3); }
.directory-actions a { font-size: 13px; font-weight: 650; }

.character-copy-panel { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(200px, .55fr); gap: var(--s5); align-items: center; padding: var(--s6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; }
.character-copy-panel h2 { margin-top: var(--s2); }
.character-copy-panel > div:first-child > p { margin-top: var(--s3); color: var(--muted); line-height: 24px; }
.character-stage { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; min-height: 110px; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfe; color: var(--blue); font: 26px/1 ui-monospace, monospace; text-align: center; }
.character-stage b { min-width: 80px; min-height: 34px; border-bottom: 1px dashed #9eb8ee; }
.character-stage small { grid-column: 1 / -1; margin-top: var(--s3); color: var(--muted); font: 12px/18px system-ui, sans-serif; }
.quick-copy-buttons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s3); }
.copy-inline-status { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.character-copy-panel > .input-label, .character-manual { grid-column: 1 / -1; }
.character-manual { width: 100%; min-height: 52px; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfe; color: var(--ink); resize: none; }
.behavior-demo, .font-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.behavior-demo article, .font-demo-grid article { min-width: 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.behavior-demo p, .font-demo-grid p { margin-top: var(--s3); color: var(--muted); font-size: 14px; line-height: 21px; }
.wrap-proof { width: 150px; margin-top: var(--s4); padding: var(--s3); overflow: visible; border: 1px dashed #9eb8ee; background: #fbfcfe; color: var(--blue-dark); font: 16px/23px ui-monospace, monospace; }
.font-demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.font-demo-grid > article > span { color: var(--muted); font-size: 13px; }
.font-demo-grid > article > div { margin-top: var(--s4); font-size: 30px; }
.marked-blank { display: inline-block; min-width: 30px; min-height: 36px; outline: 2px solid #9eb8ee; background: var(--blue-soft); }
.code-representation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.code-representation-grid div { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.code-representation-grid span, .code-representation-grid code { display: block; }
.code-representation-grid span { color: var(--muted); font-size: 13px; }
.code-representation-grid code { margin-top: var(--s2); color: var(--blue-dark); font-size: 15px; }

@media (max-width: 900px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .choice-grid, .symptom-nav { grid-template-columns: repeat(2, 1fr); }
  .next-actions { grid-template-columns: 1fr; }
  .finding-row { grid-template-columns: 84px minmax(0, 1fr) 90px; }
  .finding-link { grid-column: 2 / -1; }
  .document-layout { grid-template-columns: 1fr; gap: var(--s5); }
  .article-directory-row { grid-template-columns: 140px minmax(0, 1fr) 44px; gap: var(--s4); }
  .document-nav { position: static; display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
  .document-nav strong { flex: 0 0 100%; }
  .directory-controls { grid-template-columns: 1fr 1fr; }
  .directory-controls > div { grid-column: 1 / -1; }
  .character-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-output { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .inner-intro { padding-block: var(--s4) var(--s6); }
  .inner-intro > p { font-size: 16px; line-height: 24px; }
  .inner-section { padding-block: var(--s6); }
  .tool-card-main, .tool-card-aside { padding: 20px; }
  .tool-topline { display: block; }
  .tool-topline .button-quiet { margin-top: var(--s3); width: 100%; }
  .tool-actions .button, .tool-actions .button-quiet { width: 100%; }
  .tool-limit { width: 100%; margin: 0; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-grid div { padding: var(--s3); }
  .metric-grid dd { font-size: 20px; }
  .result-block-header { align-items: flex-start; flex-direction: column; }
  .finding-row { grid-template-columns: 1fr auto; gap: var(--s2); }
  .finding-position { grid-column: 1 / -1; }
  .finding-link { grid-column: 1 / -1; }
  .choice-grid, .symptom-nav, .demo-grid, .definition-list, .policy-summary, .fact-grid { grid-template-columns: 1fr; }
  .count-comparison { grid-template-columns: 1fr; }
  .baseline-check { grid-template-columns: auto 1fr; }
  .baseline-check .button { grid-column: 1 / -1; }
  .recovery-path { grid-template-columns: 1fr; gap: var(--s5); padding-block: var(--s6); }
  .contact-panel { grid-template-columns: 1fr; padding: var(--s5); }
  .document-nav { gap: 0 var(--s3); }
  .hub-tool-grid { grid-template-columns: 1fr; margin-bottom: var(--s7); }
  .hub-tool { padding: var(--s5); }
  .article-directory-row { grid-template-columns: 1fr auto; gap: var(--s3); }
  .article-meta { grid-column: 1 / -1; }
  .article-arrow { grid-column: 2; grid-row: 2; }
  .article-directory-row > div:nth-child(2) { grid-column: 1; grid-row: 2; }
  .article-directory-row ul { display: block; }
  .article-directory-row li + li { margin-top: var(--s2); }
  .hub-callout { grid-template-columns: 1fr; padding: var(--s5); }
  .hub-callout .button { width: 100%; }
  .normalizer-presets, .option-grid, .change-grid, .directory-controls, .character-directory-grid, .character-copy-panel, .behavior-demo, .font-demo-grid, .code-representation-grid { grid-template-columns: 1fr; }
  .normalizer-presets legend { grid-column: 1; }
  .option-grid .select-option { align-items: flex-start; flex-direction: column; }
  .option-grid select { width: 100%; }
  .removal-row { grid-template-columns: auto minmax(0, 1fr); }
  .removal-row code { grid-column: 2; }
  .risk-note { grid-column: 2; }
  .character-copy-panel { padding: var(--s5); }
  .character-stage { grid-column: 1; }
  .quick-copy-buttons .button { flex: 1; }
}
.explanation-figure { margin: 24px 0; }
.diagram-scroll { overflow-x: auto; border: 1px solid #CBD2DA; border-radius: 12px; background: #F7F8FA; }
.diagram-scroll img { display: block; width: 100%; min-width: 620px; height: auto; }
.diagram-scroll:focus-visible { outline: 3px solid #1749B2; outline-offset: 3px; }
.explanation-figure figcaption { margin-top: 12px; color: #4D5966; font-size: 14px; line-height: 1.6; max-width: 75ch; }
.example-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.inner-section > h3 { margin: 24px 0 12px; }
.inner-section > p + p { margin-top: 12px; }
@media (max-width: 640px) {
  .example-actions .button { width: 100%; white-space: normal; }
  .diagram-scroll img { min-width: 0; width: 100%; }
}

/* v0.6 visual hierarchy refresh */
.inner-intro {
  max-width: none;
  margin-top: var(--s2);
  padding: 36px 40px 44px;
  overflow: hidden;
  border: 1px solid #e0e5f4;
  border-radius: 28px;
  background: linear-gradient(125deg, #eef7ff 0%, #f2f2ff 54%, #f8efff 100%);
}
.inner-intro > p { max-width: 70ch; }
.page-kicker {
  display: inline-flex;
  padding: 4px 9px;
  border: 1px solid #d4e0f7;
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
}
.tool-card,
.directory-controls,
.character-copy-panel,
.contact-panel,
.hub-callout {
  border-color: #d7deeb;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.tool-card-aside { border-color: #dce3ef; background: linear-gradient(155deg, #f3f6ff 0%, #eef8fb 100%); }
.checker-textarea,
.report-fallback,
.annotated-preview,
.visible-panel,
.character-manual { border-color: #d9e1ee; background: #fff; }
.checker-textarea:focus,
.report-fallback:focus { box-shadow: 0 0 0 4px rgba(36, 84, 198, .1); }
.checker-message,
.metric-grid div,
.change-grid div { border-color: #dfe5ef; }
.trust-inline,
.baseline-check,
.callout,
.hub-callout { background: linear-gradient(125deg, var(--blue-soft), var(--cyan-soft)); }
.choice-card,
.symptom-nav a,
.next-actions a,
.demo-card,
.fact-card,
.policy-summary div,
.hub-tool,
.directory-card,
.behavior-demo article,
.font-demo-grid article,
.code-representation-grid div,
.source-list a {
  border-color: #dce3ee;
  border-radius: 16px;
  box-shadow: 0 5px 16px rgba(35, 53, 89, .045);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.choice-card:hover,
.symptom-nav a:hover,
.next-actions a:hover,
.hub-tool:hover,
.directory-card:hover,
.source-list a:hover {
  border-color: #b7c7e8;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.hub-tool-primary { border-color: #9eb8ee; box-shadow: inset 0 4px 0 var(--blue), var(--shadow-sm); }
.directory-category { border: 1px solid #d9e2f5; }
.directory-controls { background: linear-gradient(125deg, #fff, #f6f8ff); }
.character-copy-panel { background: linear-gradient(135deg, #fff 0%, #f8fbff 100%); }
.character-stage,
.visible-panel,
.option-grid { background: linear-gradient(145deg, #fafcff, #f3f8ff); }
.normalizer-presets button { border-radius: 14px; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.normalizer-presets button:hover { border-color: #aebfe7; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.normalizer-presets button[aria-pressed="true"] { background: linear-gradient(135deg, var(--blue-soft), var(--cyan-soft)); }
.article-directory-row { padding-inline: var(--s4); border-radius: 16px; transition: background-color .16s ease, transform .16s ease; }
.article-directory-row:hover { background: rgba(255, 255, 255, .72); transform: translateX(2px); }
.article-arrow { border-color: #cfd9e8; box-shadow: 0 4px 12px rgba(35, 53, 89, .06); }
.diagram-scroll { border-color: #d9e1ee; border-radius: 18px; background: #f8faff; box-shadow: var(--shadow-sm); }
.explanation-figure figcaption { color: var(--muted); }

@media (max-width: 640px) {
  .inner-intro { margin-top: 0; padding: 26px 22px 30px; border-radius: 22px; }
  .breadcrumb { margin-bottom: var(--s4); }
  .tool-card, .directory-controls, .character-copy-panel, .contact-panel, .hub-callout { border-radius: 20px; box-shadow: 0 14px 36px rgba(35, 53, 89, .11); }
  .article-directory-row { padding-inline: 0; }
  .article-directory-row:hover { background: transparent; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .choice-card, .symptom-nav a, .next-actions a, .hub-tool, .directory-card, .source-list a, .normalizer-presets button, .article-directory-row { transform: none !important; }
}