.school { padding: 26px 28px 30px; }
.school[hidden] { display: none; }
.school-goal { background: #edf7f8; border-left: 4px solid #218e9a; padding: 13px 16px; border-radius: 10px; margin: 12px 0 16px; }
.school-goal strong { color: #23556c; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.school-goal p { margin: 6px 0 0; line-height: 1.5; }
.school .practice-progress { margin-top: 20px; }
.school-support { color: #456575; font-size: .95rem; line-height: 1.5; }
.school-prompt-art { width: 150px; flex: 0 0 150px; border: 3px solid #d4e2e6; border-radius: 14px; }
.school .material { display: block; }
.school-picture-number, .school-check { position: absolute; bottom: 7px; right: 7px; background: #102c49; color: white; border-radius: 50%; min-width: 28px; height: 28px; display: grid; place-items: center; font-weight: 800; }
.school-check { background: #268157; }
.school .material:disabled:not(.matched) { opacity: .7; }
.school-help { margin: 18px 0; padding: 13px 15px; background: #f6fafb; border: 1px solid #c8dbe0; border-radius: 12px; line-height: 1.5; }
.school-help summary, .school-journey summary { cursor: pointer; font-weight: 800; padding: 4px 0; }
.school-help p { margin: 10px 0; }
.school-wordbank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; align-items: center; }
.school-sentence { font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.4; margin: 18px 0; }
.school-form { display: grid; gap: 9px; margin-top: 18px; }
.school-form label { font-weight: 800; }
.school-form input { width: 100%; min-height: 54px; padding: 12px 14px; border: 2px solid #9cc1c8; border-radius: 12px; font: inherit; color: #102c49; background: #fff; }
.school-form input:focus-visible { outline: 3px solid #0069a6; outline-offset: 2px; }
.school-form input:disabled { background: #eaf8e9; color: #174e39; }
.school .word.incorrect { background: #fff1e9; border-color: #d5733f; }
.visitor-counter { display: inline-block; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #dff2f3; color: #102c49; font-weight: 800; }
.school-form .again { margin-top: 0; justify-self: start; }
.school .listen { margin: 5px 8px 5px 0; }
.school button[hidden] { display: none; }
.school-journey { border-top: 1px solid #dce9ec; margin-top: 24px; padding-top: 14px; }
.school-stage-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.school-stage-link { text-align: left; padding: 12px; min-height: 52px; border: 1px solid #c8dbe0; border-radius: 10px; background: #f6fafb; color: #102c49; font-weight: 750; }
.school-stage-link.active { background: #102c49; color: white; }
.school-storage-note { color: #657b85; font-size: .82rem; line-height: 1.5; margin: 14px 0 0; }
.school-all-done { color: #174e39; font-weight: 800; }
@media (max-width: 560px) { .school { padding: 23px 19px 24px; } .school-prompt-art { width: 120px; flex-basis: 120px; } .school-stage-menu { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .school-wordbank { grid-template-columns: 1fr; } }