.alphabet-page { overflow-x: hidden; }
.alphabet-hero { display: grid; min-height: 590px; grid-template-columns: 1.03fr .97fr; align-items: center; gap: clamp(38px, 7vw, 86px); padding-block: 62px 80px; }
.alphabet-hero > div:first-child > p:last-of-type { max-width: 650px; color: var(--ink-soft); font-size: 18px; }
.alphabet-hero-art { position: relative; display: grid; min-height: 430px; place-items: center; }
.alphabet-hero-art span { position: absolute; display: grid; width: 145px; height: 125px; place-items: center; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); box-shadow: 6px 7px 0 var(--ink); font-family: var(--hand); font-size: 58px; }
.alphabet-hero-art span:nth-child(1) { top: 38px; left: 32px; background: var(--yellow); transform: rotate(-8deg); }
.alphabet-hero-art span:nth-child(2) { top: 15px; right: 38px; background: var(--blue); transform: rotate(7deg); }
.alphabet-hero-art span:nth-child(3) { bottom: 42px; left: 65px; background: var(--mint); transform: rotate(5deg); }
.alphabet-hero-art span:nth-child(4) { width: 92px; height: 76px; bottom: 145px; right: 36px; background: var(--peach); font-family: var(--sans); }
.alphabet-hero-art span:nth-child(5) { right: 58px; bottom: 8px; background: var(--coral); transform: rotate(-5deg); }
.teacher-board-callout { display: grid; grid-template-columns: .55fr 1.45fr; align-items: center; gap: clamp(28px, 6vw, 70px); margin-bottom: 38px; padding: clamp(28px, 5vw, 52px); border: 2px solid var(--ink); border-radius: var(--radius-large); background: linear-gradient(108deg,#fff5b9 0 49.7%,#ffdce9 50%); box-shadow: 7px 8px 0 var(--ink); }
.teacher-board-callout h2 { margin-bottom: 10px; }
.teacher-board-callout > div:last-child > p:not(.kicker) { max-width: 720px; color: var(--ink-soft); }
.teacher-board-art { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 210px; }
.phase-card { display: flex; width: 135px; height: 165px; flex-direction: column; align-items: center; justify-content: center; border: 3px solid var(--ink); border-radius: 24px; background: #ffd84f; box-shadow: 5px 6px 0 var(--ink); transform: rotate(-6deg); }
.phase-card-two { background: #f69abd; transform: translateY(18px) rotate(6deg); }
.phase-card b { font-family: var(--hand); font-size: 78px; font-weight: 400; line-height: .8; }
.phase-card small { margin-top: 11px; font-size: 28px; }
.teacher-board-note { align-self: center; color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.alphabet-section { padding-block: 92px; }
.alphabet-heading { display: flex; align-items: end; justify-content: space-between; gap: 45px; margin-bottom: 34px; }
.alphabet-heading h2, .alphabet-heading .kicker { margin-bottom: 0; }
.alphabet-heading > p { max-width: 430px; margin: 0; color: var(--ink-soft); }
.alphabet-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; }
.alphabet-tool-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alphabet-tool-card { display: flex; min-height: 330px; flex-direction: column; align-items: flex-start; padding: 25px; border: 1px solid rgba(23,60,58,.15); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-small); color: var(--ink); text-decoration: none; transition: transform 170ms ease, box-shadow 170ms ease; }
.alphabet-tool-card:hover { box-shadow: var(--shadow); transform: translateY(-5px); }
.alphabet-tool-card .tool-icon { display: grid; min-width: 68px; height: 64px; margin-bottom: 22px; padding-inline: 12px; place-items: center; border: 2px solid var(--ink); border-radius: 14px; background: var(--yellow); box-shadow: 3px 4px 0 var(--ink); font-family: var(--hand); font-size: 31px; }
.alphabet-tool-card:nth-child(2n) .tool-icon { background: var(--blue); }
.alphabet-tool-card:nth-child(3n) .tool-icon { background: var(--mint); }
.alphabet-tool-card h3 { margin: 15px 0 9px; }
.alphabet-tool-card p { margin-bottom: 18px; color: var(--ink-soft); }
.alphabet-tool-card > strong { margin-top: auto; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.tool-explorer, .tool-trace { min-height: 300px; }
.tool-first-steps { grid-column: span 2; }
.alphabet-games-band { background: var(--ink); color: var(--white); }
.alphabet-games-band .alphabet-heading > p { color: #c8d8d6; }
.alphabet-games-band .alphabet-tool-card { background: #224d49; color: var(--white); }
.alphabet-games-band .alphabet-tool-card:nth-child(2n) { background: #2f5d79; }
.alphabet-games-band .alphabet-tool-card p { color: #c8d8d6; }
.alphabet-routine { display: grid; max-width: 930px; grid-template-columns: auto 1fr; gap: 28px; padding-block: 85px 110px; }
.alphabet-routine h2 { font-size: 34px; }
.alphabet-routine p:last-child { margin: 0; color: var(--ink-soft); }
.alphabet-activity { max-width: 980px; }
.alphabet-activity-card { text-align: center; }
.alphabet-activity-card h1 { font-size: clamp(34px, 6vw, 54px); }
.alphabet-topline { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.alphabet-topline p { margin: 0; color: var(--ink-soft); font-weight: 800; }
.alphabet-cue { display: grid; min-height: 185px; margin: 24px 0; place-items: center; border: 2px dashed #c3cbc4; border-radius: 22px; background: #fdfbf5; }
.alphabet-cue .big-pair { display: flex; align-items: end; gap: 8px; color: var(--coral-dark); font-family: var(--hand); line-height: .8; }
.alphabet-cue .big-pair b { font-size: clamp(80px, 14vw, 120px); font-weight: 400; }
.alphabet-cue .big-pair b + b { font-size: clamp(62px, 11vw, 92px); }
.alphabet-cue .picture-cue { display: flex; flex-direction: column; gap: 7px; }
.alphabet-cue .picture-cue span { font-size: 72px; line-height: 1; }
.alphabet-cue .picture-cue strong { font-size: 28px; }
.alphabet-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 25px 0 12px; }
.alphabet-choice { display: grid; min-height: 125px; place-items: center; padding: 14px; border: 2px solid var(--ink); border-radius: 18px; background: var(--white); box-shadow: 4px 5px 0 var(--ink); color: var(--ink); cursor: pointer; font-family: var(--hand); font-size: 72px; transition: transform 140ms ease, background 140ms ease; }
.alphabet-choice:hover:not(:disabled) { background: #fff4ce; transform: translateY(-3px); }
.alphabet-choice.correct { background: var(--mint); }
.alphabet-choice.incorrect { border-color: var(--coral-dark); background: #ffe7e0; box-shadow: none; opacity: .55; }
.alphabet-result-links { justify-content: center; }
.individual-letter-section { padding-top: 35px; }
.letter-game-picker { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 11px; }
.letter-game-picker a { display: flex; min-height: 112px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 2px solid var(--ink); border-radius: 15px; background: var(--paper); box-shadow: 3px 4px 0 var(--ink); color: var(--ink); text-decoration: none; transition: transform 140ms ease, background 140ms ease; }
.letter-game-picker a:nth-child(4n+1) { background: #fff3ca; }.letter-game-picker a:nth-child(4n+2) { background: #e3f3fa; }.letter-game-picker a:nth-child(4n+3) { background: var(--mint-pale); }.letter-game-picker a:nth-child(4n) { background: #fff0e9; }
.letter-game-picker a:hover { background: var(--yellow); transform: translateY(-3px); }
.letter-game-picker span { font-family: var(--hand); font-size: 38px; line-height: 1; }
.letter-game-picker small { color: var(--ink-soft); font-size: 10px; font-weight: 800; text-align: center; }
.explorer-actions { align-items: center; }
.focus-intro-visual { display: grid; max-width: 650px; min-height: 260px; margin: 25px auto; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; border: 2px solid var(--ink); border-radius: 24px; background: #fff5d5; box-shadow: 5px 6px 0 var(--ink); }
.focus-intro-visual > span { color: var(--coral-dark); font-family: var(--hand); font-size: clamp(90px,17vw,145px); line-height: .8; }
.focus-intro-visual > div { display: flex; min-height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--mint-pale); }
.focus-intro-visual > div span { font-size: 75px; line-height: 1; }.focus-intro-visual > div strong { font-size: 27px; }
.focus-start-row { justify-content: center; }
.focus-picture-choice { display: flex; min-height: 145px; flex-direction: column; gap: 8px; font-family: var(--sans); font-size: 18px; font-weight: 850; }
.focus-choice-emoji { font-size: 60px; line-height: 1; }.focus-picture-choice small { font-size: 15px; }
.alphabet-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 10px; margin-top: 24px; }
.alphabet-tile { display: grid; min-height: 82px; place-items: center; border: 2px solid var(--ink); border-radius: 13px; background: var(--white); box-shadow: 2px 3px 0 var(--ink); color: var(--ink); cursor: pointer; font-family: var(--hand); font-size: 38px; }
.alphabet-tile:hover, .alphabet-tile.active { background: var(--yellow); transform: translateY(-2px); }
.explorer-detail { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 30px; margin-top: 30px; padding: 28px; border-radius: 22px; background: var(--mint-pale); }
.explorer-pair { color: var(--coral-dark); font-family: var(--hand); font-size: clamp(85px, 16vw, 145px); line-height: .8; }
.explorer-word { display: flex; align-items: center; gap: 20px; }
.explorer-word span { font-size: 75px; }
.explorer-word h2 { margin: 0; font-size: 40px; }
.train-cars { display: flex; justify-content: center; gap: 12px; }
.train-cars span { display: grid; width: 110px; height: 105px; place-items: center; border: 2px solid var(--ink); border-radius: 18px 18px 12px 12px; background: var(--blue); box-shadow: 4px 5px 0 var(--ink); font-family: var(--hand); font-size: 70px; }
.train-cars span:nth-child(2) { background: var(--yellow); }
.train-cars span:last-child { border-style: dashed; background: var(--paper); }
.trace-controls { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: 12px; margin-bottom: 20px; }
.trace-controls label { display: flex; flex-direction: column; gap: 5px; color: var(--ink-soft); font-size: 12px; font-weight: 800; text-align: left; }
.trace-controls select { min-height: 46px; padding: 8px 34px 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.trace-board { position: relative; overflow: hidden; width: 100%; min-height: 440px; border: 3px solid var(--ink); border-radius: 24px; background: repeating-linear-gradient(#fffdf8 0 109px,#dfe9e3 110px,#fffdf8 111px 219px); touch-action: none; cursor: crosshair; }
.trace-board canvas { display: block; width: 100%; height: 440px; }
.trace-word { margin: 15px 0 0; color: var(--ink-soft); font-size: 18px; font-weight: 800; }
@media (max-width:900px){.alphabet-hero{grid-template-columns:1fr}.alphabet-hero-art{width:min(520px,100%);margin:auto}.teacher-board-callout{grid-template-columns:1fr}.teacher-board-art{min-height:160px}.phase-card{width:115px;height:135px}.alphabet-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.alphabet-grid,.letter-game-picker{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.alphabet-hero{padding-block:45px 60px}.alphabet-hero-art{min-height:340px}.alphabet-hero-art span{width:108px;height:94px;font-size:44px}.teacher-board-callout{width:min(100% - 24px,1180px);padding:25px 18px;background:linear-gradient(160deg,#fff5b9 0 46%,#ffdce9 46.3%)}.teacher-board-art{min-height:145px}.phase-card{width:98px;height:118px}.phase-card b{font-size:62px}.teacher-board-note{width:100%}.alphabet-heading{display:block}.alphabet-heading>p{margin-top:14px}.alphabet-tool-grid,.alphabet-tool-grid-two{grid-template-columns:1fr}.tool-first-steps{grid-column:auto}.alphabet-tool-card{min-height:270px}.alphabet-routine{grid-template-columns:1fr}.alphabet-topline{align-items:flex-start;flex-direction:column}.alphabet-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.alphabet-choice{min-height:105px;font-size:60px}.alphabet-grid,.letter-game-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.letter-game-picker a{min-height:100px}.explorer-detail{grid-template-columns:1fr;text-align:center}.explorer-word{justify-content:center}.focus-intro-visual{grid-template-columns:1fr}.focus-intro-visual>span{padding:28px}.focus-intro-visual>div{padding:25px}.train-cars span{width:82px;height:82px;font-size:55px}.trace-board,.trace-board canvas{height:360px;min-height:360px}}