.page-content{--gold:#f2a65a;}
.page-content *{box-sizing:border-box}
.page-content button,.page-content a{-webkit-tap-highlight-color:transparent}
.page-content button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.page-content button:disabled{cursor:default}
.page-content button:focus-visible,.page-content a:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
.page-content button{border:0}
.page-content a{color:var(--green);text-underline-offset:4px}
.page-content button[hidden],.page-content [hidden]{display:none!important}
.page-content .masthead{max-width:520px;margin:auto;padding:22px 24px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.page-content .masthead a{text-decoration:none;display:flex;align-items:center;gap:11px;color:var(--green);font-size:9px;font-weight:750;letter-spacing:1.55px;line-height:1.55}
.page-content .brand-mark{font:27px var(--deseret);letter-spacing:-2px}
.page-content .icon-button{width:40px;height:40px;border:1px solid var(--line);background:transparent;border-radius:50%;font-size:20px}
.page-content .icon-button:hover{background:var(--pale)}
.page-content .app-main{max-width:480px;margin:auto;padding:0 24px}
.page-content .screen{padding-top:28px;animation:appear .2s ease-out}
.page-content .eyebrow{font-size:10px;font-weight:750;letter-spacing:2.1px;line-height:1.5}
.page-content .home-bottom{padding:24px 0 8px}
.page-content h1{font-family:Georgia,serif;font-size:clamp(48px,11vw,64px);font-weight:400;letter-spacing:-2.8px;line-height:1.05;margin:11px 0 9px}
.page-content .title-dot{color:var(--rust)}
.page-content .lede{font-family:Georgia,serif;font-size:21px;margin:0;color:var(--muted)}
.page-content h2{font:400 30px/1.18 Georgia,serif;letter-spacing:-.7px;margin:20px 0 10px}
.page-content h3{font:400 22px Georgia,serif;margin:25px 0 8px}
.page-content .subtle{font-size:14px;line-height:1.6;color:var(--muted);margin:9px 0 18px}
.page-content .landscape{position:relative;overflow:hidden;isolation:isolate;background:#edf1e7}
.page-content .home-landscape{height:218px;margin:27px -24px 0;border-radius:48% 48% 0 0 / 14% 14% 0 0}
.page-content .sun{position:absolute;width:65px;height:65px;background:#f2d6a6;border-radius:50%;right:16%;top:25px}
.page-content .cloud{position:absolute;background:#f9f8f4;border-radius:50%;height:5px;opacity:.85;transform:rotate(-3deg)}
.page-content .cloud-one{width:72px;top:45px;left:13%}
.page-content .cloud-two{width:43px;top:73px;right:4%}
.page-content .distant-shore{position:absolute;left:-10%;right:-10%;height:38%;top:48%;background:#c6d3c1;clip-path:polygon(0 45%,18% 52%,40% 25%,62% 48%,79% 34%,100% 59%,100% 100%,0 100%)}
.page-content .sea{position:absolute;left:0;right:0;bottom:0;height:38%;background:#d6e3da}
.page-content .wave{position:absolute;height:1px;background:#f6faf2;border-radius:50%;width:38%;left:9%;bottom:24%}
.page-content .wave-two{width:23%;left:56%;bottom:16%}
.page-content .shore{position:absolute;background:#e5dbc2;bottom:-22px;right:-50px;width:185px;height:60px;border-radius:60% 0 0 0;transform:rotate(-9deg)}
.page-content .reeds{position:absolute;right:28px;bottom:0;width:4px;height:38px;background:#829783;transform:rotate(-14deg);border-radius:100%;box-shadow:12px 10px 0 -1px #829783,-11px 6px 0 -1px #829783}
.page-content .scene-caption{position:absolute;bottom:13px;left:24px;font-size:10px;letter-spacing:.25px;color:#567164}
.page-content .bird{position:absolute;width:145px;filter:drop-shadow(0 5px 4px #284d3c0d)}
.page-content .bird svg,.page-content .result-bird svg{width:100%;display:block;overflow:visible}
.page-content .home-bird{top:35px;left:25%;transform:rotate(-4deg);animation:soar 4s ease-in-out infinite}
.page-content .near-wing,.page-content .far-wing{transform-origin:263px 69px}
.page-content .flap .near-wing{animation:flap 1.1s cubic-bezier(.45,0,.55,1) 1}
.page-content .flap .far-wing{animation:far-flap 1.1s cubic-bezier(.45,0,.55,1) 1}
.page-content .progress-copy{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.page-content .progress-copy>span{font-weight:650}
.page-content .progress-copy strong{font-size:19px;font-weight:500}
.page-content .progress-copy strong span{font-size:12px;color:var(--muted);font-weight:400}
.page-content .alphabet-progress{display:flex;gap:3px;margin:11px 0 12px}
.page-content .alphabet-progress i{flex:1;height:5px;border-radius:3px;background:#dce2d9}
.page-content .alphabet-progress .learning{background:#eac99c}
.page-content .alphabet-progress .familiar{background:var(--green)}
.page-content .primary{background:var(--green);color:#fffefa;min-height:56px;padding:15px 21px;border-radius:14px;font-weight:650;font-size:15px;transition:background .15s,transform .15s}
.page-content .primary:hover{background:#2b4a3e}
.page-content .primary:active{transform:scale(.985)}
.page-content .primary:disabled{opacity:.6}
.page-content .wide{width:100%}
.page-content .text-button{background:transparent;min-height:48px;padding:12px 4px;font-size:13px;font-weight:600}
.page-content .text-button:hover{text-decoration:underline}
.page-content .small-note{color:var(--muted);font-size:11px;line-height:1.6;text-align:center;margin:10px 0}
.page-content .session-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:40px}
.page-content .back{width:40px;height:40px;background:transparent;font-size:25px;text-align:left}
.page-content .counter{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
.page-content .mini-gull{font-size:22px;color:var(--rust)}
.page-content .letter-card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:30px 20px 24px;text-align:center;margin:22px 0 10px;box-shadow:0 6px 24px #284d3c04}
.page-content .letter-pair{display:flex;justify-content:center;gap:32px;font:94px/1.25 var(--deseret);color:var(--green)}
.page-content .case-labels{display:flex;justify-content:center;gap:41px;margin:9px 0 28px;color:var(--muted);font-size:9px;letter-spacing:1.8px}
.page-content .listen-button{display:inline-flex;justify-content:center;align-items:center;gap:12px;background:#e9efe5;border:1px solid #d3decd;border-radius:30px;min-height:51px;padding:12px 23px;font-size:14px;font-weight:600;color:#304f41}
.page-content .listen-button:hover{background:#dce8d6}
.page-content .sound-icon{font-size:14px}
.page-content .listen-button.playing .sound-icon{animation:pulse .6s infinite alternate}
.page-content .example{font-family:Georgia,serif;font-size:21px;line-height:1.4;margin:22px 0 0}
.page-content .example strong{font-weight:normal;color:var(--rust)}
.page-content .frame-note{font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0 0}
.page-content .audio-status{font-size:12px;color:var(--rust);line-height:1.5;min-height:0;margin:8px 0}
.page-content .audio-status:empty{margin:0}
.page-content .round-track{display:flex;gap:5px;margin:12px 0 0}
.page-content .round-track i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.page-content .round-track i.current{background:#aebdb0}
.page-content .round-track i.correct{background:var(--green)}
.page-content .round-track i.missed{background:#cfa889}
.page-content .game-landscape{height:140px;margin:14px -24px 0}
.page-content .game-landscape .sun{width:47px;height:47px;top:16px;right:19%}
.page-content .game-landscape .cloud{top:30px}
.page-content .game-bird{width:105px;left:2%;top:21px;transition:left 1.1s cubic-bezier(.25,.1,.25,1),top 1.1s ease}
.page-content .game-landscape .shore{width:110px;height:45px}
.page-content .nest{position:absolute;right:15px;bottom:16px;width:33px;height:12px;background:#9a7954;border-radius:0 0 50% 50%;transform:rotate(-7deg)}
.page-content .nest:before,.page-content .nest:after{content:"";position:absolute;height:1px;background:#cfb98b;width:34px;transform:rotate(13deg);top:4px;left:0}
.page-content .nest:after{transform:rotate(-13deg);top:7px}
.page-content #game h2{font-size:27px;text-align:center;margin:22px 0 15px}
.page-content #game>.listen-button{display:flex;margin:auto}
.page-content .choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
.page-content .choice{position:relative;min-height:110px;border-radius:18px;border:1.5px solid #d5ddd1;background:var(--white);font:61px/1.2 var(--deseret);box-shadow:0 3px 0 #dfe4d8;transition:background .15s,border-color .15s,transform .15s}
.page-content .choice:enabled:hover{background:#edf2e8;border-color:var(--green)}
.page-content .choice:active{transform:translateY(2px)}
.page-content .choice:disabled{opacity:.78}
.page-content .choice.correct{background:#e3eddf;border-color:var(--green);opacity:1}
.page-content .choice.wrong{background:#f6e5da;border-color:#bb7963;opacity:1}
.page-content .choice .answer-mark{position:absolute;right:12px;top:10px;font:600 16px system-ui}
.page-content .feedback-space{min-height:95px;padding-top:13px;text-align:center}
.page-content #feedback{font-size:13px;line-height:1.6;margin:0 0 11px;min-height:21px}
.page-content #feedback .des{font:27px var(--deseret);vertical-align:middle}
.page-content .game-tip{font-size:11px;color:var(--muted);text-align:center;margin:0 0 12px}
.page-content #result{text-align:center;padding-top:18px}
.page-content .result-bird{width:155px;margin:14px auto 6px}
.page-content .result-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin:25px 0}
.page-content .result-stats>div+div{border-left:1px solid var(--line)}
.page-content .result-stats strong{display:block;font:35px Georgia,serif}
.page-content .result-stats span{display:block;font-size:11px;color:var(--muted);margin-top:7px}
.page-content .review-box{background:var(--pale);border-radius:16px;padding:15px;margin:0 0 22px}
.page-content .review-box p{font-size:12px;margin:0 0 10px}
.page-content #review-letters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.page-content #review-letters button{border:1px solid #cad6c5;background:var(--white);border-radius:12px;min-width:56px;min-height:54px;font:32px var(--deseret)}
.page-content .alphabet-key{display:flex;gap:17px;font-size:10px;color:var(--muted);margin:19px 0}
.page-content .alphabet-key span{display:flex;align-items:center;gap:5px}
.page-content .alphabet-key i,.page-content .letter-status{display:inline-block;width:7px;height:7px;border:1px solid #b8c4b4;border-radius:50%;background:transparent}
.page-content .alphabet-key i.learning,.page-content .letter-status.learning{background:#e2b979;border-color:#e2b979}
.page-content .alphabet-key i.familiar,.page-content .letter-status.familiar{background:var(--green);border-color:var(--green)}
.page-content .alphabet-section{font-size:10px;letter-spacing:1.8px;margin:23px 0 10px;font-weight:700}
.page-content .letter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.page-content .letter-tile{position:relative;border:1px solid var(--line);border-radius:14px;min-height:110px;background:var(--white);padding:14px 5px 10px}
.page-content .letter-tile:hover,.page-content .letter-tile.playing{background:#e9efe3;border-color:var(--green)}
.page-content .letter-tile .glyph{font:35px var(--deseret);display:block;margin-bottom:7px;white-space:nowrap}
.page-content .letter-tile .word{font-size:11px;color:var(--muted)}
.page-content .letter-status{position:absolute;top:8px;right:8px}
.page-content footer{max-width:480px;margin:20px auto 0;padding:16px 20px 22px;text-align:center;font-size:9px;color:var(--muted);letter-spacing:.15px}
.page-content dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:23px;max-width:470px;width:calc(100% - 28px);max-height:85dvh;padding:25px;box-shadow:0 22px 90px #183b3944}
.page-content dialog::backdrop{background:#223c3677;backdrop-filter:blur(3px)}
.page-content .dialog-head{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.page-content .dialog-head h2{margin:0;font-size:29px}
.page-content .dialog-head .icon-button{flex-shrink:0}
.page-content dialog p,.page-content dialog li{font-size:14px;line-height:1.65}
.page-content dialog ol{padding-left:20px}
.page-content dialog li{padding:4px 0}
.page-content .danger{color:var(--rust)}
.page-content .load-error{padding:20px;color:var(--rust)}
@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes soar{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(-1deg)}}
@keyframes flap{0%,100%{transform:rotate(0deg) scaleY(1)}50%{transform:rotate(0deg) scaleY(-.26)}}
@keyframes far-flap{0%,100%{transform:rotate(0deg) scaleY(1)}50%{transform:rotate(0deg) scaleY(-.3)}}
@keyframes pulse{to{opacity:.4}}
@media  (min-width:700px){.page-content .masthead{padding-top:28px}
.page-content .app-main{background:var(--paper);border-radius:24px;margin-top:24px;padding-top:1px;padding-bottom:15px;box-shadow:0 15px 60px #243f390a}
.page-content .home-landscape{margin-left:-24px;margin-right:-24px}
.page-content .game-landscape{border-radius:0}
.page-content .masthead{border-color:#ccd6c9}
.page-content footer{margin-top:8px}}
@media  (max-width:360px){.page-content .app-main{padding:0 18px}
.page-content .masthead{padding-left:18px;padding-right:18px}
.page-content .home-landscape,.page-content .game-landscape{margin-left:-18px;margin-right:-18px}
.page-content .home-landscape{height:180px}
.page-content .choice{min-height:91px}
.page-content .choices{gap:10px}
.page-content #game h2{font-size:24px}
.page-content .letter-pair{font-size:82px}
.page-content .letter-tile .glyph{font-size:29px}
.page-content .game-landscape{height:115px}}
@media  (max-height:720px) and (max-width:600px){.page-content .masthead{padding-top:12px;padding-bottom:9px}
.page-content .screen{padding-top:18px}
.page-content .home-landscape{height:170px;margin-top:20px}
.page-content .home-bottom{padding-top:18px}
.page-content .game-landscape{height:110px}
.page-content .choice{min-height:91px}
.page-content #game h2{margin-top:17px}
.page-content .choices{margin-top:16px}
.page-content .feedback-space{min-height:75px}
.page-content .letter-card{padding-top:18px;padding-bottom:18px}
.page-content .letter-pair{font-size:78px}}
@media  (prefers-reduced-motion:reduce){.page-content *,.page-content *:before,.page-content *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.page-content body[data-screen="game"] footer{display:none}
.page-content .choices:has(.choice:nth-child(3):last-child) .choice:last-child{grid-column:1/-1}
@media  (max-height:760px) and (max-width:600px){.page-content body[data-screen="game"] .masthead{padding-top:8px;padding-bottom:7px}
.page-content #game{padding-top:10px}
.page-content .game-landscape{height:95px;margin-top:10px}
.page-content .choice{min-height:80px}
.page-content .choices{margin-top:14px}
.page-content #game h2{margin-top:14px;margin-bottom:12px;font-size:25px}
.page-content .feedback-space{min-height:70px;padding-top:10px}}
.page-content .lake-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page-content .landscape .bird{z-index:1}
.page-content .scene-caption{z-index:2;font-size:10px;bottom:12px;left:24px;right:24px}
.page-content .home-bird{width:176px;top:13px;left:20%}
.page-content .game-bird{width:125px}
.page-content .result-bird{width:182px}
.page-content .near-wing,.page-content .far-wing{transform-box:view-box}
.page-content .case-labels{display:block;margin:9px 0 24px}
.page-content .case-note{font-size:11px;color:var(--muted);line-height:1.6;margin:18px 0 0}
.page-content .letter-pair{font-size:100px}
.page-content .lede{font-size:20px}
.page-content .game-landscape .lake-scene{opacity:.92}
@media  (max-width:360px){.page-content .home-bird{width:155px;left:17%}
.page-content .game-bird{width:112px}
.page-content .lede{font-size:18px}
.page-content .scene-caption{font-size:9px;left:18px;right:18px}}
.page-content .scene-sun{position:absolute;right:18%;top:16px;width:56px;height:56px;border-radius:50%;background:#eedabd;z-index:0;pointer-events:none}
.page-content .game-landscape .scene-sun{width:34px;height:34px;top:8px}
.page-content .home-bird{width:190px;left:19%;top:2px}
.page-content .game-bird{width:120px}
.page-content .result-bird{width:190px}
@media  (max-height:760px) and (max-width:600px){.page-content .game-bird{width:112px}}
@media  (max-width:360px){.page-content .home-bird{width:170px;left:16%}
.page-content .game-bird{width:112px}
.page-content .scene-sun{width:48px;height:48px;top:14px}
.page-content .game-landscape .scene-sun{width:32px;height:32px;top:8px}}
.page-content .home-bird{width:194px;top:0;left:19%}
.page-content .game-bird{width:110px}
.page-content .result-bird{width:194px}
@media  (max-width:360px){.page-content .home-bird{width:177px;left:16%}
.page-content .game-bird{width:104px}}