.syllable-player{padding:0;border:0;max-width:none;max-height:none;width:100%;height:100%;margin:0;background:#fff8e9;color:#302445;overflow:auto}.syllable-player::backdrop{background:#30244580}.syl-shell{max-width:620px;min-height:100%;margin:auto;display:flex;flex-direction:column;background:radial-gradient(ellipse at 0% 40%,#fff1c6,transparent 60%),#fffaf0}.syl-header{padding:16px;display:grid;grid-template-columns:64px minmax(0,1fr)64px;gap:10px;align-items:center}.syl-header>strong{text-align:center;font:500 19px/1.15 Fredoka,system-ui}.syl-header button{width:64px;height:64px;display:grid;place-items:center;border:2px solid #fff;border-radius:23px;background:#efe5fb;color:#604097;box-shadow:0 5px 0 #d2c2df}.syl-header .world-icon{width:36px!important;height:36px!important}.syl-progress{display:flex;gap:8px;margin:8px 18px 20px}.syl-progress>span{height:8px;flex:1;border-radius:10px;background:#e7dbef}.syl-progress .current{background:#ffc950}.syl-progress .done{background:#60b49a}.syl-shell main{padding:0 18px 20px;text-align:center;flex:1}.syl-shell h1{font:600 28px/1.15 Fredoka,system-ui;margin:8px 0 16px}.syl-kicker{font:500 12px Fredoka;color:#75647c;margin:0}.syl-picture{display:flex;align-items:center;justify-content:center;gap:6px;height:142px;margin:8px auto 12px}.syl-picture img{height:142px;width:180px;object-fit:contain}.syl-picture.is-plural img{width:130px;height:130px}.syl-whole{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:80px;border:0;border-radius:24px;background:#eee4f8;color:#39294e;padding:12px;margin:8px auto 18px}.syl-whole>span{font:700 38px/1.2 Andika,system-ui;overflow-wrap:anywhere}.syl-whole .world-icon{width:32px!important;height:32px!important;flex:0 0 32px}.syl-parts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.syl-parts button{position:relative;min-height:108px;min-width:86px;max-width:100%;flex:1 1 80px;border:3px solid #e1d3e8;border-radius:25px;padding:22px 8px 10px;background:#fffdf8;color:#49395e;box-shadow:0 5px 0 #d8c7db;display:flex;align-items:center;justify-content:center;gap:4px;flex-direction:column}.syl-parts .active{background:#fff0a9;border-color:#f2b83e;box-shadow:0 5px 0 #d99f32}.syl-parts .heard{background:#ddf1df;border-color:#88c69a;box-shadow:0 5px 0 #7aad8a}.syl-chunk{font:700 32px/1.2 Andika,system-ui;overflow-wrap:anywhere}.syl-step{position:absolute;left:9px;top:7px;font:500 12px Fredoka;color:#79634a}.syl-parts .world-icon{width:23px!important;height:23px!important}.syl-parts button:disabled{opacity:.55}.syl-status{font:15px/1.5 Andika,system-ui;margin:22px 0 8px;min-height:46px;color:#61516c}.syl-shell footer{padding:16px 18px calc(20px + env(safe-area-inset-bottom,0px))}.syl-primary{min-height:72px;width:100%;border:2px solid #ac89d4;border-radius:25px;background:linear-gradient(145deg,#8e67c8,#6c47a4);box-shadow:inset 0 2px 0 #c3ace6,0 5px 0 #523780;color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;font:500 20px/1.2 Fredoka;padding:14px}.syl-primary:disabled{opacity:.4}.syl-primary .world-icon{width:28px!important;height:28px!important}.syl-listen{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:72px;border:2px solid #e1d0ee;background:#eee5f9;color:#53377a;border-radius:24px;font:500 19px Fredoka}.syl-listen .world-icon{width:30px!important;height:30px!important}.syl-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0}.syl-choices>button{position:relative;min-height:150px;border:3px solid #fff;border-radius:26px;background:#f0e4fb;box-shadow:0 5px 0 #d5c1e3;padding:10px;display:grid;place-items:center}.syl-choices>button:nth-child(2){background:#e1f3e5}.syl-choices>button:nth-child(3){background:#fff0cf}.syl-choice-art{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.syl-choice-art img{width:100%;height:120px;object-fit:contain}.syl-choice-art.is-plural img{height:62px;max-width:65px}.syl-choices>button>.world-icon{position:absolute;bottom:8px;right:8px;width:28px;height:28px;color:#308765}.syl-wopi{width:190px;height:220px;object-fit:contain;margin:24px auto}.syl-done-words{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0}.syl-done-words span{background:#e3f1d8;border-radius:20px;padding:12px 18px;font:500 20px Fredoka}.syllable-player button{touch-action:manipulation}.syllable-player button:active:not(:disabled){transform:translateY(2px) scale(.98)}@media(max-width:350px){.syl-header{grid-template-columns:56px minmax(0,1fr)56px;gap:8px;padding:12px}.syl-header button{width:56px;height:64px}.syl-header>strong{font-size:17px}.syl-shell h1{font-size:25px}.syl-picture,.syl-picture img{height:118px}.syl-whole>span{font-size:32px}.syl-chunk{font-size:28px}.syl-parts{gap:8px}.syl-parts button{min-width:72px;padding-left:5px;padding-right:5px}.syl-choices{gap:8px}.syl-choices>button{padding:6px;min-height:130px}.syl-choice-art img{height:100px}}@media(prefers-reduced-motion:reduce){.syllable-player button:active:not(:disabled){transform:none}}
.syl-parts button{min-width:120px;flex:1 1 120px}.syl-chunk{font-size:40px;white-space:nowrap;overflow-wrap:normal}.syl-whole>span{font-size:40px}@media(max-width:350px){.syl-chunk{font-size:36px}.syl-parts button{min-width:112px;flex-basis:112px}.syl-whole>span{font-size:34px}}
.syl-parts.count-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.syl-parts.count-3 button{min-width:0;padding:22px 4px 10px;min-height:118px}.syl-parts.count-3 .syl-chunk{font-size:32px}.syl-parts.count-3 .syl-chunk.is-long{font-size:26px}@media(max-width:350px){.syl-parts.count-3{gap:8px}.syl-parts.count-3 .syl-chunk{font-size:28px}.syl-parts.count-3 .syl-chunk.is-long{font-size:22px}}

.syl-secondary{min-height:72px;border:2px solid #d8c4f0;border-radius:24px;background:#eee5fb;color:#50327e;font:600 18px var(--font-ui);display:flex;gap:12px;align-items:center;justify-content:center;padding:14px}