@font-face{font-family:Poppins;src:url('assets/fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Poppins;src:url('assets/fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}:root{--cream:#FFF9F0;--ink:#343044;--muted:#736c7a;--peach:#FFDCCB;--mint:#DDF0E6;--lavender:#EAE3FA}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Poppins,sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;min-height:56px;border:0}button:focus-visible,a:focus-visible{outline:3px solid #766096;outline-offset:5px}button{transition:background .18s,transform .18s}button:active{transform:scale(.98)}[hidden]{display:none!important}.topbar{max-width:1180px;margin:auto;padding:26px 36px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:600;font-size:22px;line-height:1.1;letter-spacing:-.8px}.brand-second{display:block;font-size:18px}.brand-icon{position:relative;font-size:40px;background:var(--peach);border-radius:18px;width:58px;height:58px;text-align:center;padding-top:5px}.brand-icon span{font-size:20px;color:#906a53;position:absolute;right:5px;top:5px}.language{display:flex;gap:9px;align-items:center;font-size:12px}.dot{width:7px;height:7px;border-radius:50%;background:#83a38e}main{max-width:1000px;margin:auto;padding:25px 24px 0}.intro{text-align:center}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.7px;color:#897868}h1{font-size:clamp(27px,4vw,44px);line-height:1.3;letter-spacing:-1.5px;margin:14px 0}h1 span{color:#8d739c}.intro p{line-height:1.9;color:var(--muted);margin:0}.mobile-break{display:none}.mode-switch{background:#F0EAE2;padding:5px;border-radius:18px;display:flex;width:max-content;max-width:100%;margin:29px auto 25px;gap:3px}.mode-switch button{padding:0 22px;min-height:48px;border-radius:14px;background:transparent;font-size:12px;font-weight:600}.mode-switch button[aria-pressed=true]{background:#fffdf8;box-shadow:0 3px 8px #756b5510}.learning-card{max-width:660px;margin:auto;background:#fffdfa;border:1px solid #EEE5D8;border-radius:30px;padding:23px 28px 0;box-shadow:0 12px 45px #A68B6810;overflow:hidden}.card-top{display:flex;align-items:center;justify-content:space-between}.pill{font-size:9px;letter-spacing:1.8px;background:var(--mint);padding:8px 12px;border-radius:8px;color:#426852;font-weight:600}.counter{font-size:11px;color:var(--muted);letter-spacing:2px}.object-card{position:relative;width:100%;background:transparent;display:flex;align-items:center;flex-direction:column;padding:0 0 21px}.letter-area{position:absolute;left:22px;top:21px;display:flex;align-items:baseline;gap:3px}#letter{font-size:100px;font-weight:600;line-height:1.2;color:#B48267}#lower-letter{font-size:49px;color:#DEC3AE}.illustration{position:relative;width:280px;height:253px;display:flex;align-items:center;justify-content:center;margin-top:12px;margin-left:90px}.art-circle{position:absolute;width:210px;height:210px;border-radius:50%;background:#F8F0DD}.illustration img{position:relative;width:265px;height:265px}#label{font-size:32px;font-weight:600;letter-spacing:-.5px}.tap-hint{color:var(--muted);font-size:11px;margin-top:8px}.tap-hint span{margin-left:5px}.card-bottom{border-top:1px dashed #E8DFD3;text-align:center;padding:16px 0;font-size:10px;color:#8D8177;display:flex;justify-content:center;gap:16px}.little-star{color:#B4976B}.navigation{display:flex;justify-content:center;gap:14px;margin-top:22px}.nav-button{width:58px;border-radius:18px;background:#EDE6DE;font-size:23px}.listen-button{background:var(--lavender);border-radius:18px;padding:0 32px;font-weight:600;font-size:13px}.listen-button span{margin-right:8px;font-size:20px}.listen-button.playing{background:#DDF0E6}.feedback{text-align:center;min-height:45px;font-size:11px;color:var(--muted)}#retry{background:var(--peach);padding:0 20px;border-radius:12px}.parent-note{display:flex;align-items:center;gap:17px;margin:20px auto 44px;max-width:660px;background:#F0F1E7;border:1px solid #E5E8D9;padding:15px 22px;border-radius:19px}.parent-note>span{font-size:31px;color:#8C9F7E}.parent-note p{font-size:11px;line-height:1.9;margin:0;color:#687061}.parent-note strong{font-weight:600;color:#4E5B48}footer{max-width:1110px;border-top:1px solid #EBE3D8;margin:38px auto 0;padding:26px 24px 30px;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#8C8279}
footer .credits{font-size:9px;color:#A79E95}
footer .credits a{color:inherit}footer span:first-child{font-weight:600;color:#716660}.grid-heading{text-align:center;margin:24px 0}.grid-heading h2{font-size:20px}.grid-heading p{color:var(--muted);font-size:12px}#alphabet-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px;max-width:850px;margin:auto}.letter-tile{background:#fffdf8;border:1px solid #EBE3D8;border-radius:20px;display:flex;align-items:center;flex-direction:column;padding:12px 6px}.letter-tile[aria-current=true]{border:2px solid #AA92BC;background:#F6F1FA}.letter-tile b{font-size:25px;line-height:1.2}.letter-tile img{width:85px;height:85px;max-width:100%}.letter-tile span{font-size:10px}.letter-tile:nth-child(3n+1) b{color:#AF7E65}.letter-tile:nth-child(3n+2) b{color:#739584}.letter-tile:nth-child(3n) b{color:#9782AB}@media(max-width:600px){.topbar{padding:20px}.brand{font-size:19px}.brand-icon{width:49px;height:49px;font-size:34px}.brand-second{font-size:16px}.language{font-size:9px;gap:5px}main{padding:20px 16px 0}.mobile-break{display:block}h1{letter-spacing:-1px}.intro p{font-size:12px}.learning-card{padding:18px 17px 0;border-radius:24px}.letter-area{left:4px;top:26px}#letter{font-size:74px}#lower-letter{font-size:36px}.illustration{width:210px;height:227px;margin-left:64px}.illustration img{width:225px;height:225px}.art-circle{width:173px;height:173px}#label{font-size:29px}.card-bottom{font-size:8px;gap:8px}.mode-switch button{padding:0 15px;min-height:56px}.parent-note{padding:14px 16px}.parent-note p{font-size:10px}footer{flex-wrap:wrap;justify-content:center;text-align:center}footer span:first-child{width:100%}#alphabet-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}.real-sound{background:#E4EEF7;border-radius:18px;padding:0 26px;font-weight:600;font-size:13px;white-space:nowrap}
.real-sound span{margin-right:8px;font-size:18px}
.real-sound[aria-pressed=true]{background:#CFE3F5}
@media(max-width:600px){.navigation{flex-wrap:wrap;gap:9px}.listen-button,.real-sound{padding:0 16px;font-size:12px}.real-sound span{margin-right:6px;font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}