@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}
:root{--ink:#183d45;--red:#c52e33;--yellow:#ffd153;--green:#9edbb0;--coral:#ff9e8c;--paper:#fffdf6}*{box-sizing:border-box}body{margin:0;background:#edf5f1;color:var(--ink);font:18px/1.5 Andika,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}header{padding:18px 5%;border-bottom:1px solid #d6e5df;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:15px}.logo{font-size:clamp(24px,3vw,35px);font-weight:700;white-space:nowrap}.logo span{color:var(--red)}.logo b{color:#ffd042;text-shadow:0 1px #886b17}.school{font-size:13px;max-width:230px;text-align:right}main{width:min(1140px,94%);margin:30px auto;flex:1}h1,h2,h3,p{margin:0 0 15px}h1{font-size:clamp(36px,5vw,62px);line-height:1.13;letter-spacing:-1px}h2{font-size:27px;text-align:center}h3{font-size:25px}.eyebrow{font-size:12px;font-weight:bold;letter-spacing:2px;color:#35756b}.intro{font-size:24px;color:#35756b}.small{font-size:14px;color:#4e6669}.thai{font:17px/1.7 Tahoma,Arial,sans-serif}.cover-copy{padding:25px 0}.cover-image{width:100%;border-radius:28px;box-shadow:0 15px 35px #274d4420}#home:not([hidden]){display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:40px}.cover-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}button{font:700 17px/1.35 Andika,Arial,sans-serif;color:var(--ink);border:2px solid #173e4515;border-radius:14px;padding:13px 19px;background:white;min-height:51px;cursor:pointer;box-shadow:0 3px 0 #173e451a;touch-action:manipulation}button:hover:not(:disabled){filter:brightness(.97);transform:translateY(-1px)}button:focus-visible{outline:4px solid #2e7bcb;outline-offset:4px}button:disabled{opacity:.42;cursor:default}.primary{background:var(--ink);color:white;padding-inline:35px}.listen{background:var(--yellow)}.record{background:var(--coral)}.mine{background:var(--green)}.plain{font-size:15px;background:transparent;box-shadow:none}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.section-head h2{margin:0}#groups{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin:28px 0}.group{text-align:left;padding:18px 24px;background:var(--paper);border-radius:20px;position:relative}.group span{display:block;font-size:42px;color:var(--red)}.group small{font-size:17px;font-weight:400}.group:nth-child(3n+2){background:#fff2bf}.group:nth-child(3n){background:#e0efe6}.practice{display:grid;grid-template-columns:minmax(300px,1.3fr) minmax(280px,.8fr);gap:45px;align-items:center}.card-area{text-align:center}#card{display:block;width:100%;height:390px;background:var(--paper);padding:15px;border:2px solid #d8e6df;border-radius:28px;box-shadow:0 10px 30px #274d4412}#front:not([hidden]){height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}#picture{height:calc(100% - 30px);max-width:100%;object-fit:contain;border-radius:16px}.tap{display:block;font-size:13px;font-weight:400;color:#61736d;margin-top:8px}#back:not([hidden]){height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.badge{font-size:22px;background:#ffebac;color:var(--red);border-radius:99px;padding:5px 21px}.word{font-size:clamp(56px,6vw,85px);font-weight:700;margin:20px 0;line-height:1.3}.word strong{color:var(--red)}.flip{margin:14px 0;background:#e0efe6;min-width:190px}.card-nav{display:flex;justify-content:space-between;align-items:center;gap:10px}.card-nav button{font-size:15px}.card-nav span{white-space:nowrap;min-width:55px}.audio-buttons{display:grid;gap:13px;margin:20px 0}.audio-buttons button{text-align:left;padding:16px 20px}.recording{background:#b92e38!important;color:white}.playing{outline:3px solid #24705d;outline-offset:2px}#status{font-size:16px;max-width:850px;margin:20px auto 0}#status:empty{display:none}footer{text-align:center;font-size:15px;padding:14px;background:var(--paper);border-top:1px solid #d6e5df} [hidden]{display:none!important}
@media(min-width:1400px){main{margin-top:45px}#card{height:440px}}@media(max-width:750px){header{padding:12px 4%}.school{font-size:10px;max-width:135px}main{margin:20px auto}#home:not([hidden]){grid-template-columns:1fr;gap:12px}.cover-copy{padding:8px}.cover-image{max-height:280px;object-fit:cover;grid-row:1}h1 br{display:none}#groups{grid-template-columns:repeat(2,1fr);gap:12px}.group{padding:15px}.group span{font-size:34px}.practice{grid-template-columns:1fr;gap:23px}#card{height:330px}.section-head{flex-wrap:wrap}.section-head h2{font-size:22px;order:3;width:100%}.audio-buttons{grid-template-columns:1fr 1fr;gap:10px}.audio-buttons button{font-size:15px;text-align:center;padding:13px 8px}aside h3{font-size:22px}.card-nav button{padding:12px}.word{font-size:65px}footer{padding:12px} }@media(prefers-reduced-motion:no-preference){button{transition:transform .15s,filter .15s}}