.word-catalog-page {
    box-sizing: border-box;
    color: #244d60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto;
    max-width: 576px;
    padding: 8px;
}

.word-catalog-page [hidden] {
    display: none !important;
}

.word-catalog-hero,
.word-catalog-search,
.word-catalog-list-section,
.word-catalog-content,
.word-catalog-faq,
.word-catalog-related {
    background: rgb(255 255 255 / 84%);
    border: 1px solid rgb(182 213 255 / 88%);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 18%);
    box-sizing: border-box;
}

.word-catalog-hero {
    overflow: hidden;
    padding: 20px;
    position: relative;
}

.word-catalog-hero::after {
    color: rgb(23 78 166 / 8%);
    content: "Aa";
    font-family: "Nunito", Arial, sans-serif;
    font-size: 88px;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    right: 15px;
    top: 18px;
}

.word-catalog-eyebrow {
    color: #009688;
    display: block;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 7px;
    position: relative;
    text-transform: uppercase;
    z-index: 1;
}

.word-catalog-hero h1 {
    color: #174ea6;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0;
    max-width: 470px;
    position: relative;
    z-index: 1;
}

.word-catalog-hero p {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.42;
    margin: 12px 0 16px;
    max-width: 480px;
    position: relative;
    z-index: 1;
}

.word-catalog-primary-action,
.word-catalog-list-more {
    align-items: center;
    background: #20c91c;
    border: 2px solid #fff;
    border-radius: 16px;
    box-sizing: border-box;
    color: #fff;
    display: inline-flex;
    font-size: 14px;
    font-weight: 900;
    justify-content: center;
    letter-spacing: 1px;
    line-height: 1;
    min-height: 40px;
    padding: 10px 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 1;
}

.word-catalog-stats {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.word-catalog-stats > div {
    align-items: center;
    background: rgb(255 255 255 / 82%);
    border: 1px solid rgb(182 213 255 / 86%);
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 78px;
    padding: 8px;
    text-align: center;
}

.word-catalog-stats strong {
    color: #174ea6;
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
}

.word-catalog-stats span {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    margin-top: 5px;
}

.word-catalog-search {
    padding: 16px;
}

.word-catalog-search h2,
.word-catalog-list-section h2,
.word-catalog-content h2,
.word-catalog-faq h2 {
    color: #174ea6;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.15;
    margin: 0;
}

.word-catalog-search p,
.word-catalog-list-section header p,
.word-catalog-content p,
.word-catalog-faq p {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    margin: 6px 0 0;
}

.word-catalog-search form {
    display: grid;
    gap: 7px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 12px;
}

.word-catalog-search__field input,
.word-catalog-filter input {
    background: #fff;
    border: 2px solid #9fd7ff;
    border-radius: 13px;
    box-sizing: border-box;
    color: #174ea6;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    height: 42px;
    outline: 0;
    padding: 0 12px;
    width: 100%;
}

.word-catalog-search__field input:focus,
.word-catalog-filter input:focus {
    border-color: #174ea6;
    box-shadow: 0 0 0 3px rgb(23 78 166 / 12%);
}

.word-catalog-search button {
    background: #67aee8;
    border: 2px solid #fff;
    border-radius: 13px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 0 15px;
}

.word-catalog-search__reset {
    color: #174ea6;
    display: inline-block;
    font-size: 13px;
    font-weight: 900;
    margin-top: 9px;
}

.word-catalog-levels {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.word-catalog-level {
    align-items: center;
    background: rgb(255 255 255 / 82%);
    border: 2px solid rgb(159 215 255 / 88%);
    border-radius: 12px;
    box-sizing: border-box;
    color: #244d60;
    display: flex;
    flex-direction: column;
    min-height: 82px;
    padding: 8px 5px;
    text-align: center;
    text-decoration: none;
}

.word-catalog-level span {
    color: #174ea6;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.word-catalog-level strong {
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
    margin-top: 5px;
}

.word-catalog-level small {
    color: #64808d;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    margin-top: 5px;
}

.word-catalog-level--active {
    background: #ffcb05;
    border-color: #fff;
}

.word-catalog-list-section {
    overflow: hidden;
    padding: 16px;
}

.word-catalog-list-section > header {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 190px);
    margin-bottom: 13px;
}

.word-catalog-list-section > header > div:only-child {
    grid-column: 1 / -1;
}

.word-catalog-filter input {
    height: 38px;
}

.word-catalog-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.word-catalog-row {
    align-items: center;
    background: rgb(220 244 255 / 72%);
    border: 1px solid rgb(119 199 255 / 48%);
    border-radius: 10px;
    box-sizing: border-box;
    contain-intrinsic-size: auto 58px;
    content-visibility: auto;
    display: grid;
    gap: 8px;
    grid-template-columns: 34px minmax(105px, 0.8fr) minmax(90px, 1fr) 36px;
    min-height: 58px;
    padding: 7px 8px;
}

.word-catalog-row__number {
    color: #78909c;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.word-catalog-row__word {
    min-width: 0;
}

.word-catalog-row__word strong,
.word-catalog-row__word span {
    display: block;
    overflow-wrap: anywhere;
}

.word-catalog-row__word strong {
    color: #174ea6;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
}

.word-catalog-row__word span {
    color: #617a86;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    margin-top: 3px;
}

.word-catalog-row__translation {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.word-catalog-audio {
    align-items: center;
    background: #fff;
    border: 1px solid #8ed0ff;
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 36px;
}

.word-catalog-audio-slot {
    display: block;
    height: 36px;
    width: 36px;
}

.word-catalog-audio img {
    height: 21px;
    width: 21px;
}

.word-catalog-audio.is-playing {
    animation: word-catalog-pulse 0.8s ease-in-out infinite alternate;
    background: #d9f7d1;
    border-color: #20c91c;
}

.word-reference-page .word-catalog-row {
    grid-template-columns: 34px minmax(105px, 0.8fr) minmax(90px, 1fr) 76px;
}

.word-catalog-row__actions {
    align-items: center;
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(2, 36px);
    justify-content: end;
}

.word-catalog-add {
    align-items: center;
    background: #d9f7d1;
    border: 1px solid #20c91c;
    border-radius: 10px;
    box-sizing: border-box;
    color: #087a18;
    cursor: pointer;
    display: inline-flex;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 22px;
    font-weight: 900;
    height: 36px;
    justify-content: center;
    line-height: 1;
    padding: 0 0 2px;
    width: 36px;
}

.word-catalog-add.is-loading {
    opacity: 0.55;
}

.word-catalog-add.is-added {
    background: #20c91c;
    color: #fff;
}

.word-catalog-add.is-error {
    background: #ffe4df;
    border-color: tomato;
    color: #bd2d1d;
}

@keyframes word-catalog-pulse {
    from { filter: brightness(1); }
    to { filter: brightness(0.84); }
}

.word-catalog-empty {
    background: rgb(220 244 255 / 72%);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    margin: 0;
    padding: 14px;
}

.word-catalog-list-more {
    display: flex;
    margin: 14px auto 0;
    width: fit-content;
}

.word-catalog-content-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.word-catalog-content,
.word-catalog-faq {
    padding: 17px 18px;
}

.word-catalog-content p + p {
    margin-top: 9px;
}

.word-catalog-text-link {
    color: #174ea6;
    display: inline-block;
    font-size: 14px;
    font-weight: 900;
    margin-top: 11px;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.word-catalog-reference-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 13px;
}

.word-catalog-reference-grid a {
    background: rgb(220 244 255 / 76%);
    border: 1px solid rgb(119 199 255 / 44%);
    border-radius: 10px;
    box-sizing: border-box;
    color: #244d60;
    min-width: 0;
    padding: 11px;
    text-decoration: none;
}

.word-catalog-reference-grid strong,
.word-catalog-reference-grid span {
    display: block;
}

.word-catalog-reference-grid strong {
    color: #174ea6;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
}

.word-catalog-reference-grid span {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 5px;
}

.word-catalog-faq details {
    border-top: 1px solid rgb(119 199 255 / 38%);
    padding: 12px 0;
}

.word-catalog-faq summary {
    color: #174ea6;
    cursor: pointer;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.3;
}

.word-catalog-related {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px;
}

.word-catalog-related a {
    background: rgb(220 244 255 / 76%);
    border: 1px solid rgb(119 199 255 / 44%);
    border-radius: 10px;
    box-sizing: border-box;
    color: #244d60;
    min-width: 0;
    padding: 10px;
    text-decoration: none;
}

.word-catalog-related strong,
.word-catalog-related span {
    display: block;
}

.word-catalog-related strong {
    color: #174ea6;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
}

.word-catalog-related span {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 5px;
}

.visually-hidden {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 520px) {
    .word-catalog-hero {
        padding: 17px;
    }

    .word-catalog-hero h1 {
        font-size: 25px;
        padding-right: 18px;
    }

    .word-catalog-hero p {
        font-size: 15px;
    }

    .word-catalog-level {
        min-height: 76px;
    }

    .word-catalog-level strong {
        font-size: 10px;
    }

    .word-catalog-list-section > header {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .word-catalog-row {
        gap: 6px;
        grid-template-columns: 28px minmax(90px, 0.85fr) minmax(78px, 1fr) 34px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .word-catalog-row__word strong {
        font-size: 15px;
    }

    .word-catalog-row__translation {
        font-size: 12px;
    }

    .word-catalog-audio {
        height: 34px;
        width: 34px;
    }

    .word-catalog-audio-slot {
        height: 34px;
        width: 34px;
    }

    .word-catalog-related {
        grid-template-columns: 1fr;
    }

    .word-catalog-reference-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .word-catalog-stats strong {
        font-size: 16px;
    }

    .word-catalog-levels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .word-catalog-search form {
        grid-template-columns: 1fr;
    }

    .word-catalog-search button {
        min-height: 40px;
    }

    .word-catalog-row {
        grid-template-columns: 24px minmax(80px, 0.9fr) minmax(66px, 1fr) 32px;
    }

    .word-catalog-row__number {
        font-size: 10px;
    }

    .word-catalog-audio {
        height: 32px;
        width: 32px;
    }

    .word-catalog-audio-slot {
        height: 32px;
        width: 32px;
    }
}

.word-reference-hero::after {
    content: "ABC";
    font-size: 72px;
    right: 12px;
    top: 24px;
}

.word-reference-copy {
    scroll-margin-top: 12px;
}

.word-reference-steps {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.word-reference-steps li {
    background: rgb(220 244 255 / 76%);
    border: 1px solid rgb(119 199 255 / 44%);
    border-radius: 10px;
    box-sizing: border-box;
    min-width: 0;
    padding: 11px;
}

.word-reference-steps strong,
.word-reference-steps span {
    display: block;
}

.word-reference-steps strong {
    color: #174ea6;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
}

.word-reference-steps span {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 5px;
}

.word-reference-toc {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.word-reference-toc a {
    background: rgb(255 255 255 / 84%);
    border: 1px solid rgb(119 199 255 / 58%);
    border-radius: 12px;
    color: #174ea6;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.15;
    padding: 8px 11px;
    text-decoration: none;
}

.word-reference-toc a:nth-child(3n + 2) {
    background: rgb(255 238 164 / 90%);
    border-color: rgb(255 203 5 / 62%);
}

.word-reference-toc a:nth-child(3n) {
    background: rgb(210 247 205 / 90%);
    border-color: rgb(32 201 28 / 38%);
}

.word-reference-pagination a.is-current {
    background: #174ea6;
    border-color: #174ea6;
    color: #fff;
}

.word-reference-filter {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
}

.word-reference-filter .word-catalog-filter input {
    height: 42px;
}

.word-reference-list-section {
    scroll-margin-top: 10px;
}

.word-reference-examples {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.word-reference-examples li {
    border-top: 1px solid rgb(119 199 255 / 38%);
    display: grid;
    gap: 3px;
    grid-template-columns: minmax(125px, 0.75fr) minmax(180px, 1.25fr);
    padding: 10px 2px;
}

.word-reference-examples strong {
    color: #174ea6;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
    grid-row: 1 / span 2;
    line-height: 1.25;
}

.word-reference-examples span {
    color: #244d60;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.3;
}

.word-reference-examples small {
    color: #617a86;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.irregular-verbs-table {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.irregular-verbs-row {
    align-items: center;
    background: rgb(220 244 255 / 72%);
    border: 1px solid rgb(119 199 255 / 48%);
    border-radius: 10px;
    box-sizing: border-box;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(92px, 1fr) minmax(90px, 1fr) minmax(105px, 1.1fr) minmax(95px, 1fr) 76px;
    min-height: 58px;
    padding: 7px 8px;
}

.irregular-verbs-row--header {
    background: #174ea6;
    border-color: #174ea6;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    min-height: 40px;
}

.irregular-verbs-row:not(.irregular-verbs-row--header) > span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.irregular-verbs-base strong,
.irregular-verbs-base small {
    display: block;
}

.irregular-verbs-base strong {
    color: #174ea6;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 15px;
    font-weight: 900;
}

.irregular-verbs-base small {
    color: #617a86;
    font-size: 10px;
    font-weight: 800;
    margin-top: 3px;
}

.irregular-verbs-audio-cell {
    align-items: center;
    display: flex;
    justify-content: center;
}

@media (max-width: 520px) {
    .word-reference-steps {
        grid-template-columns: 1fr;
    }

    .word-reference-filter {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .irregular-verbs-row {
        gap: 5px;
        grid-template-columns: repeat(4, minmax(0, 1fr)) 64px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .word-reference-page .word-catalog-row {
        grid-template-columns: 25px minmax(80px, 0.85fr) minmax(66px, 1fr) 64px;
    }

    .word-catalog-row__actions {
        gap: 4px;
        grid-template-columns: repeat(2, 30px);
    }

    .word-reference-page .word-catalog-audio,
    .word-reference-page .word-catalog-audio-slot,
    .word-reference-page .word-catalog-add {
        height: 30px;
        width: 30px;
    }

    .word-catalog-add {
        font-size: 18px;
    }

    .word-reference-examples li {
        grid-template-columns: 1fr;
    }

    .word-reference-examples strong {
        grid-row: auto;
    }

    .irregular-verbs-row--header {
        font-size: 9px;
    }

    .irregular-verbs-row:not(.irregular-verbs-row--header) > span {
        font-size: 10px;
    }

    .irregular-verbs-base strong {
        font-size: 13px;
    }
}

@media (max-width: 390px) {
    .irregular-verbs-row {
        grid-template-columns: minmax(66px, 1fr) minmax(58px, 0.9fr) minmax(68px, 1fr) minmax(62px, 1fr) 30px;
    }

    .irregular-verbs-row--header {
        font-size: 8px;
    }
}