.morph-index { margin-top: 12px; padding-top: 24px; padding-bottom: 36px; }
.morph-index > header { max-width: 72ch; }
.morph-index h2 { margin: 10px 0 14px; }
.morph-index header p { line-height: 1.8; }
.morph-index-caption { font-size: .88em; color: #63766c; }
.morph-index-tools { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: flex-end; margin-top: 24px; }
.morph-index-tools > label { display: grid; gap: 8px; flex: 1 1 280px; max-width: 440px; font-size: .9em; }
.morph-index-tools input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #cdd8c5; border-radius: 10px; background: #fff; color: #173f37; font: inherit; }
.morph-index-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.morph-index-filters button { display: flex; gap: 7px; align-items: center; min-height: 42px; padding: 9px 12px; border: 1px solid #d5decd; border-radius: 9px; background: #fafbf7; color: #365b4e; font: inherit; font-size: .86em; cursor: pointer; }
.morph-index-filters button[aria-pressed="true"] { background: #e8efdb; border-color: #94a97a; color: #173f37; }
.morph-index-filters button span { font-size: .82em; opacity: .8; }
.morph-index-count { margin: 18px 0 10px; color: #63766c; font-size: .83em; }
.morph-index-list { border-top: 1px solid #dce3d4; }
.morph-index-row { padding: 17px 0; border-bottom: 1px solid #dce3d4; }
.morph-index-component { display: grid; grid-template-columns: minmax(150px,1fr) 2fr; gap: 12px 24px; line-height: 1.7; }
.morph-index-component strong { font-weight: 600; overflow-wrap: normal; word-break: normal; }
.morph-index-examples { display: flex; flex-wrap: wrap; gap: 5px 16px; margin: 10px 0 0; color: #63766c; font-size: .83em; line-height: 1.75; }
.morph-index-examples b { white-space: nowrap; font-weight: 500; color: #365b4e; }
.morph-index-more { margin-top: 20px; min-height: 44px; padding: 10px 20px; border: 1px solid #ccd8c2; border-radius: 9px; color: #173f37; background: #f9fbf5; font: inherit; cursor: pointer; }
.morph-index button:focus-visible,.morph-index input:focus-visible { outline: 2px solid #7c9663; outline-offset: 3px; }
.morph-practice { margin-top: 28px; padding: 20px 24px; border-left: 3px solid #94a97a; background: #f1f5ea; border-radius: 0 12px 12px 0; line-height: 1.85; }
.morph-practice h3 { margin: 0 0 12px; font-size: 1.05em; }
.morph-practice ol { margin: 0; padding-left: 1.5em; }
.morph-practice li + li { margin-top: 10px; }
.morph-practice p { font-size: .88em; color: #63766c; margin-bottom: 0; }
@media(max-width:600px){
 .morph-index { padding: 20px 18px 32px; }
 .morph-index-tools { gap: 14px; }
 .morph-index-tools > label { max-width: none; }
 .morph-index-filters { gap: 6px; }
 .morph-index-filters button { gap: 5px; padding: 9px 10px; }
 .morph-index-component { grid-template-columns: 1fr; gap: 4px; }
 .morph-index-examples { gap: 5px 12px; }
}