.alphabet-intro{max-width:850px}.alphabet-intro h1{font-size:clamp(2.7rem,6vw,4.8rem);line-height:1.05;margin:.4em 0}.alphabet-intro h1 em{color:#9d554e}.alphabet-intro .resource-lead{max-width:720px}.alphabet-print-preview{margin:26px 0}.alphabet-print-preview img{width:100%;height:auto;border:1px solid #ded8c6;border-radius:16px;display:block}.sound-console{border:1px solid #becfca;border-radius:18px;background:#f0f6f2;padding:20px;margin:32px 0 22px;scroll-margin-top:110px}.sound-console h2{margin:0 0 10px;font-size:1.5rem}.sound-console p{margin:8px 0;max-width:80ch}.sound-controls{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:14px}.sound-controls label{display:flex;align-items:center;gap:12px;font-weight:700}.sound-controls input{width:140px;accent-color:#245c60}.sound-controls button:disabled{opacity:.45;cursor:default}.sound-description{font-size:.93rem;color:#425a57;min-height:2.4em}.letter-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin:22px 0 30px}.letter-tile{position:relative;appearance:none;padding:9px 7px 10px;background:#fffefb;border:1px solid #d9d5c9;border-radius:16px;box-shadow:0 3px 0 #eae6da;cursor:pointer;display:flex;flex-direction:column;align-items:center;color:#243c40;font:inherit;transition:transform .14s,border-color .14s,box-shadow .14s;min-width:0}.letter-tile:hover{transform:translateY(-3px);border-color:#669e8b}.letter-tile:focus-visible{outline:4px solid #c88932;outline-offset:4px}.letter-tile.is-playing{border:3px solid #2d7a69;padding:7px 5px 8px;box-shadow:0 0 0 4px #d9eee3}.letter-big{font-weight:800;font-size:2.25rem;line-height:1.2;color:#297b77}.letter-tile:nth-child(4n+1) .letter-big{color:#b7494c}.letter-tile:nth-child(4n+3) .letter-big{color:#675181}.letter-tile:nth-child(4n) .letter-big{color:#ad671e}.letter-picture{display:block;width:100%;aspect-ratio:1;background-image:var(--alphabet-art);background-size:700% 300%;background-position:var(--px) var(--py);background-repeat:no-repeat;margin:6px 0;border-radius:5px}.letter-word{font-weight:800;font-size:.8rem;line-height:1.35;min-height:2.7em;display:flex;align-items:center;justify-content:center;text-align:center;overflow-wrap:anywhere}.sound-badge{font-size:.67rem;line-height:1.3;border-radius:20px;background:#e7f1e9;color:#285943;padding:4px 7px;margin-top:6px}.sound-badge--effect{background:#f4eadd;color:#80591f}.sound-badge--imitation{background:#eee8f4;color:#6d497e}.alphabet-key{display:flex;gap:12px;flex-wrap:wrap;font-size:.9rem;margin-bottom:20px}.audio-credits{font-size:.9rem;border-top:1px solid #d9d5c9;padding-top:16px}.audio-credits li{margin:12px 0}.audio-credits a{overflow-wrap:anywhere}.worksheet-outline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:24px 0}.worksheet-outline li{border:1px solid #ded8c6;padding:18px;border-radius:14px;background:#fffdf8}.worksheet-outline strong{display:block;margin-bottom:7px;color:#245c60}.worksheet-outline span{font-size:.95rem;line-height:1.65}.worksheet-outline .needs-images{background:#fbf1dd;border-color:#ddc59b}.worksheet-cover img{aspect-ratio:3/2;object-fit:cover}.offline-header{max-width:1100px;margin:25px auto 0;padding:0 20px}.offline-header a{color:#245c60}.offline-main{max-width:1150px;margin:0 auto;padding:24px 20px;font-family:system-ui,sans-serif;color:#243c40}.offline-main .resource-actions{display:flex;gap:12px;flex-wrap:wrap}.offline-main .button{border:1px solid #245c60;border-radius:24px;padding:12px 18px;color:#245c60;background:#fffefb;cursor:pointer;text-decoration:none;font-weight:700}.offline-main .button-primary{background:#245c60;color:white}.offline-main .teacher-note{padding:18px;background:#f8efdb;border-radius:14px;line-height:1.7}.offline-main p{line-height:1.7}
@media(max-width:1050px){.letter-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:760px){.letter-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.letter-word{font-size:.78rem}.worksheet-outline{grid-template-columns:1fr}}
@media(max-width:400px){.letter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sound-console{padding:15px}.sound-controls{gap:15px}}
@media(prefers-reduced-motion:reduce){.letter-tile{transition:none}.letter-tile:hover{transform:none}}
@media print{.site-header,.site-footer,.fairy-home,.sound-console,.letter-grid,.audio-credits,.resource-actions,.alphabet-key{display:none!important}.alphabet-print-preview img{border:0}.alphabet-intro h1{font-size:26pt}}