@font-face{font-family:Andika;src:url('fonts/Andika-Regular.ttf')}@font-face{font-family:Andika;src:url('fonts/Andika-Bold.ttf');font-weight:700}
*{box-sizing:border-box}body{margin:0;background:#f3f8ff;color:#1d3152;font-family:Andika,sans-serif;-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:700 18px Andika,sans-serif;min-width:44px;min-height:48px;border:2px solid #245cb7;border-radius:14px;padding:8px 14px;background:#fff;color:#194f9e;cursor:pointer}button:hover:not(:disabled){background:#edf5ff}button:focus-visible,a:focus-visible{outline:4px solid #ed9c00;outline-offset:4px}button:disabled{opacity:.45;cursor:default}
#download-book{position:fixed;top:8px;right:8px;z-index:9;background:#ffd23f;color:#222;font-weight:700;padding:10px 14px;border-radius:22px;text-decoration:none;box-shadow:0 2px 6px #0003;min-height:44px;display:flex;align-items:center;font-size:15px}
.top{padding:16px 325px 16px 22px;background:#245cb7;color:#fff;font-size:22px;font-weight:700;min-height:66px}#app{max-width:1100px;margin:auto;padding:20px}h1{text-align:center;font-size:clamp(32px,5vw,50px);line-height:1.25;color:#245cb7;margin:22px 0 12px}.intro{text-align:center;font-size:21px;margin:12px auto 24px}.alphabet{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;max-width:900px;margin:0 auto}.letter{position:relative;font-size:34px;min-height:86px;background:#fff;border:3px solid #aac6f2;box-shadow:0 4px 0 #cdddf3}.letter:nth-child(3n+2){background:#fff6ca;border-color:#e1b637}.letter:nth-child(3n){background:#f2ecff;border-color:#b9a1e5}.check{color:#16812f;font-size:26px}.letter .check{position:absolute;right:6px;top:0;font-size:22px}.done{border-color:#16812f!important;background:#edfbee!important}
.heading{text-align:center;position:relative}.pair{margin:0;background:#fff2b5;border-color:#e1b637;font-size:clamp(56px,8vw,82px);line-height:1.3;padding:0 32px;letter-spacing:7px}.pagecheck{display:inline-block;margin-left:14px}.ins{max-width:830px;margin:15px auto;font-size:19px;text-align:center}.xnote{text-align:center;font-size:22px;font-weight:700;color:#91441e}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}.card{position:relative;background:#fff;border:3px solid #c7d8f2;border-radius:24px;padding:16px 10px;text-align:center;box-shadow:0 4px 0 #dee8f6}.model{display:block;border:0;background:transparent!important;padding:0 6px 12px;width:100%;color:#1d3152}.model img{display:block;width:100%;height:190px;object-fit:contain;margin:0 auto 8px}.word{display:block;font-size:clamp(25px,3vw,34px)}.hear{display:block;font-size:15px;color:#245cb7;font-weight:400;margin-top:4px}.controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.controls button{font-size:16px;padding:8px 10px}.rec{background:#fff2b5;border-color:#d4a71d;color:#604910}.rec.on{background:#c73636!important;color:white;border-color:#c73636}.card.good{background:#f3fff3;border-color:#16812f}.wordcheck{position:absolute;right:12px;top:5px;font-size:23px;color:#16812f}.status{min-height:26px;margin:10px 0 0;font-size:15px;color:#285b3b}.micnote{background:#fff1be;border:2px solid #e1b637;border-radius:14px;font-size:17px;padding:12px;margin:16px 0}.nav{display:flex;justify-content:center;align-items:center;gap:12px;margin:25px auto 10px;flex-wrap:wrap}.nav span{font-weight:700;font-size:18px;min-width:80px;text-align:center}.session{text-align:center;color:#4d6180;font-size:14px}footer{text-align:center;padding:20px 10px 28px;font-size:15px;color:#4d6180}
@media(max-width:800px){.alphabet{grid-template-columns:repeat(5,1fr)}.cards{gap:10px}.model img{height:160px}.top{font-size:19px}}
@media(max-width:600px){.top{padding:70px 16px 16px;font-size:20px}#app{padding:15px}.alphabet{grid-template-columns:repeat(4,1fr);gap:9px}.letter{min-height:72px;font-size:30px}.cards{grid-template-columns:1fr;max-width:420px;margin:22px auto;gap:18px}.model img{height:190px}.word{font-size:32px}.nav{gap:7px}.nav button{font-size:16px;padding:8px 10px}.ins{font-size:18px}.intro{font-size:19px}#download-book{font-size:14px}.pair{font-size:64px}h1{margin-top:12px}}
@media(max-width:350px){.alphabet{grid-template-columns:repeat(3,1fr)}#download-book{font-size:12px}}
@media print{#download-book,.nav,.controls,.hear,.micnote,.session{display:none!important}.top{padding:10px;color:#245cb7;background:white}.cards{grid-template-columns:repeat(3,1fr)}body{background:white}}