/* Search landing pages: readable previews and touch controls. */
.quick-practice,.score-note-preview{padding:20px;margin:20px 0;border:1px solid #cedce9;border-radius:18px;background:#f5f9fd;color:#20374d;min-width:0}
.quick-practice h2,.score-note-preview h2{font-size:1.25rem;margin:0 0 10px}.quick-practice p,.score-note-preview p{margin:8px 0;line-height:1.6}
.practice-keys{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:560px;margin:14px 0}
.practice-keys button{min-width:0;height:100px;border:1px solid #9eafbf;border-radius:0 0 9px 9px;background:white;color:#20374d;font:700 1.1rem system-ui;cursor:pointer;box-shadow:0 4px 0 #d9e2eb}
.practice-keys button:active,.practice-keys button.is-correct{background:#d3f3e1}.practice-keys button.is-wrong{background:#ffe5df}
.practice-keys button:focus-visible{outline:3px solid #286ac1;outline-offset:2px}.practice-options{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.practice-options input{width:20px;height:20px;vertical-align:middle}.practice-feedback{min-height:3.2em}
.preview-notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:620px}.preview-note{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #c6d7e7;background:#fff;border-radius:10px;padding:10px 4px;font:700 1rem system-ui;color:#20374d;min-width:0}.preview-note small{font-size:.85rem;font-weight:500}.score-note-preview .preview-help{font-size:.9rem;color:#4b6378}
@media(min-width:600px){.preview-notes{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:600px){.quick-practice,.score-note-preview{padding:15px}.practice-keys button{height:86px}.cta-row .btn{max-width:100%;white-space:normal;text-align:center}.hero h1{overflow-wrap:anywhere}}

.quick-practice .btn-outline{color:#244d74;background:#fff;border:1px solid #a9bfd3}.quick-practice .btn-outline:hover{color:#16334f;background:#e7f1fa}.quick-practice h2{color:#20374d}
.learning-languages{position:relative;margin-left:auto;color:inherit}.learning-languages summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 12px}.learning-languages>div{position:absolute;right:0;top:100%;z-index:20;display:grid;min-width:150px;padding:6px;background:#fff;border:1px solid #bacbd9;border-radius:12px;box-shadow:0 8px 24px #172d4933}.learning-languages>div a{color:#20374d!important;background:#fff!important;border:0!important;min-height:44px;padding:10px 12px;display:flex;align-items:center}.learning-languages>div a:hover{background:#eaf2fa!important}