@font-face{font-family:Hangul;src:url('../demo/assets/font.ttf')}*{box-sizing:border-box}body{margin:0;background:#f1ede9;color:#27213c;font-family:Arial,Hangul,sans-serif}.app{max-width:480px;margin:24px auto;background:#fffdf9;min-height:calc(100dvh - 48px);border-radius:30px;padding:24px;box-shadow:0 16px 70px #36244712}header{display:flex;align-items:center;justify-content:space-between}header a{font-size:23px;font-weight:900;letter-spacing:-1px;text-decoration:none;color:inherit}header a span{color:#ed737a;font-size:18px;margin:0 3px}.brandline{font-size:9px;letter-spacing:2px;color:#938b9e;margin:13px 0 26px}button{font:inherit;cursor:pointer;border:0;border-radius:14px;padding:14px 18px;background:#6c50bc;color:white;min-height:44px;font-weight:600}button:disabled{opacity:.4;cursor:default}button:hover:not(:disabled){filter:brightness(.96)}button:focus-visible,a:focus-visible{outline:3px solid #d07534;outline-offset:3px}.quiet{background:#f0ebf8;color:#614c92;font-size:12px}.quiet b{background:white;border-radius:20px;padding:3px 7px;margin-left:4px}h1{font-size:35px;line-height:1.12;letter-spacing:-1.3px;margin:10px 0 14px}h2{font-size:24px;margin:12px 0}p{font-size:14px;line-height:1.6;color:#756c82}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:1.6px;color:#8a6cb9}.hero{border-radius:24px;background:#eee7f8;padding:22px;text-align:center;position:relative;margin:22px 0}.hero .korean{font:700 48px Hangul,sans-serif;letter-spacing:3px;margin:24px 0 12px}.pill{display:inline-block;font-size:10px;border-radius:15px;padding:7px 10px;background:#ffffffa8;color:#775a96}.roman{color:#8d76a7;font-size:14px;letter-spacing:2px}.english{font-size:19px;color:#463855;margin:12px 0}.avatar{width:46px;height:46px;object-fit:contain;border-radius:50%;background:#f6e9d7;flex-shrink:0}.guide{display:flex;align-items:center;gap:12px;margin:18px 0}.guide p{margin:0;font-size:13px}.wide{width:100%;margin-top:10px}.secondary{background:#ede8f4;color:#654e93}.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}.tiny{font-size:11px;color:#8c8394;line-height:1.5}.center{text-align:center}.chips{display:flex;gap:8px;justify-content:center;margin:25px 0}.chip{background:white;color:#8b75a9;border:1px solid #dbcee9;min-width:58px;padding:14px 10px;font-size:26px}.chip small{display:block;font-size:11px;font-weight:normal;margin-top:7px}.chip.done{background:#6c50bc;color:white}.chip.next,.key.next{outline:2px solid #7953c8;outline-offset:2px;background:#e7dcfc;color:#4d2e89;animation:glow 1.6s infinite}.bubble{padding:25px;background:#eee7f8;border-radius:22px 22px 22px 4px;font:700 30px Hangul,sans-serif;margin:24px 0}.tag{font-size:11px;color:#957fb2;margin-top:15px}.settings{font-size:11px;color:#8e829d;display:flex;justify-content:space-between;margin:15px 0}.settings button{padding:5px 8px;min-height:32px;font-size:11px;background:none;color:#6c50bc}.progress{height:4px;border-radius:10px;background:#e8e0f1;margin:12px 0}.progress div{height:100%;background:#9673d6;border-radius:10px;transition:width .2s}.target{font:700 27px Hangul;text-align:center;margin:16px 0 4px}.syllables{display:flex;justify-content:center;gap:16px;margin:12px}.syllables span{text-align:center;color:#a194b0;font:22px Hangul}.syllables small{display:block;font:11px Arial;margin-top:5px}.syllables .active{color:#6c50bc}.jamo{text-align:center;height:28px;letter-spacing:10px;color:#a794b5}.jamo b{color:#6741a9;border-bottom:2px solid}.input{min-height:65px;background:white;border:1px solid #d9cce9;border-radius:15px;display:flex;align-items:center;justify-content:center;font:28px Hangul;margin:10px 0}.input:empty:before{content:'Your Korean appears here';font:13px Arial;color:#b0a4bd}.keyrow{display:flex;gap:4px;margin-bottom:7px}.key{flex:1;padding:0;min-width:0;min-height:48px;border-radius:8px;background:#fff;color:#3d3250;box-shadow:0 2px 0 #d5cadd;font:20px Hangul}.keyboard{background:#e9e3ed;border-radius:16px;padding:12px 7px 5px;margin-top:12px}.keyboard .quiet{min-height:38px;padding:5px}.help{background:#f3edf9;padding:14px;border-radius:14px}.card{padding:20px;background:#eee7f8;border-radius:18px;margin:18px 0}.card h2{font-family:Hangul}.native{width:100%;padding:18px;border:1px solid #c7b7dc;border-radius:14px;font:24px Hangul}footer{text-align:center;font-size:10px;color:#aaa0b2;margin-top:24px}#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#30273d;color:white;padding:12px 20px;border-radius:20px;font-size:13px;display:none;max-width:90vw}body.practice .app{padding-top:15px}body.practice .brandline{display:none}body.practice footer{margin-top:12px}@keyframes glow{50%{box-shadow:0 0 0 4px #b597e322}}@media(max-width:520px){body{background:#fffdf9}.app{margin:0;border-radius:0;padding:20px;box-shadow:none;min-height:100dvh}}@media(max-height:730px){body.practice .app{padding:12px 16px}body.practice h2{margin:8px 0;font-size:20px}body.practice .settings{margin:6px 0}body.practice .syllables{margin:7px}body.practice .target{margin:8px 0}body.practice .key{min-height:43px}body.practice footer{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Legible Korean sans serif and compact practice layout. */
.korean,.chip,.bubble,.target,.syllables span,.input,.key,.native,.card h2{font-family:"Malgun Gothic","Apple SD Gothic Neo",Arial,sans-serif!important}
body.practice .settings{position:relative}.jamo{letter-spacing:7px}
@media(max-height:730px){body.practice header a{font-size:20px}body.practice header button{min-height:32px;padding:8px}body.practice h2{font-size:18px}body.practice .progress{margin:7px 0}body.practice .input{min-height:43px;margin:7px 0}body.practice .row button{min-height:36px;padding:7px;font-size:10px}body.practice .keyboard{padding-top:8px;margin-top:8px}body.practice .keyrow{margin-bottom:5px}body.practice .key{min-height:42px}body.practice .wide{min-height:38px;padding:9px;margin-top:7px}body.practice .keyboard .quiet{min-height:32px}}

.stepnav{position:sticky;top:0;z-index:5;background:#fffdf9f5;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;margin-bottom:12px;border-bottom:1px solid #e9e0f0;backdrop-filter:blur(8px)}
.stepnav button{background:#eee7f8;color:#60468f;padding:9px 12px;min-height:40px;font-size:12px}.stepnav span{font-size:11px;color:#82738f;text-align:center}.stepnav button:disabled{opacity:.4}
body.practice .stepnav{margin-bottom:4px;padding:5px 0}
.chip.speaking{animation:syllablefade .8s ease-in-out infinite;background:#6c50bc;color:white;opacity:1}.nextstage{border-top:1px solid #ddd2e9;margin-top:24px;padding-top:20px}@keyframes syllablefade{50%{opacity:.35;transform:scale(.95)}}
.key.speaking,.jamo b.speaking{animation:syllablefade .9s ease-in-out infinite!important;opacity:1;color:#fff;background:#6c50bc}.keyVoiceStatus{text-align:center;font-size:12px;color:#6c50bc;min-height:20px;margin:6px 0}.soundNote{font-size:10px;margin:7px 0}

/* Phrase library: mobile-first, readable categories and long Korean text. */
.categories{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.category{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:7px;background:#eee7f8;color:#49376b;padding:16px}.category:last-child{grid-column:1/-1}.category .caticon{font-size:25px;color:#7951b1}.category b{font-size:15px}.category small{font-size:11px;font-weight:400;color:#82708f}.category>span:last-child{font-size:12px;line-height:1.45;font-weight:400}.phrasepick{display:flex;flex-direction:column;text-align:left;gap:7px;width:100%;margin:10px 0;background:#f4eff8;color:#4f3c70;border:1px solid #e7dcec;padding:16px}.phrasepick>span:not(.phraseko){font-size:13px;font-weight:400;line-height:1.45}.phrasepick small{font-size:10px;font-weight:400;color:#826d92}.phraseko{font:600 21px "Malgun Gothic","Apple SD Gothic Neo",sans-serif;overflow-wrap:anywhere;line-height:1.5}.sectionlabel{margin-top:28px}.sectionlabel>b{font-size:16px}.phrasehero .korean{font-size:31px;line-height:1.6;letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere;margin:20px 0 12px}.phrasehero .english{font-size:17px;line-height:1.5}.contextnote{background:#fbf1de;border-radius:12px;padding:14px;font-size:12px;color:#77603c}.sourceinfo{margin-top:22px;line-height:1.6}.sourceinfo summary,.keyboardhelp summary{cursor:pointer;min-height:38px;padding:10px 0}.buildhero{padding:15px 10px}.buildhero .chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 4px}.buildhero .chip{min-width:0;font-size:29px}.buildhero .input{padding:12px;display:block;min-height:64px;font-size:23px;overflow-wrap:anywhere;line-height:1.5}.bubble{overflow-wrap:anywhere;word-break:keep-all;line-height:1.55}.card h2{overflow-wrap:anywhere;line-height:1.55}.card .row button{padding:12px 8px;font-size:13px}.keyboardhelp p{font-size:11px}.keyboardhelp{margin:4px 0}.practice h2{font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;overflow-wrap:anywhere}.practice .input{overflow-wrap:anywhere;min-height:50px;line-height:1.45;padding:8px;font-size:24px}.practice .keyVoiceStatus{font-family:Arial,sans-serif;line-height:1.5}.native{min-height:100px}.pill{line-height:1.5}button{touch-action:manipulation}.app{overflow-wrap:break-word}
@media(max-width:370px){.category{padding:13px}.category b{font-size:14px}.phrasehero .korean{font-size:27px}.row button{padding:12px 8px}.buildhero .chip{padding:12px 7px}}

.morephrases summary{cursor:pointer;padding:16px 8px;color:#6c50bc;font-size:14px;min-height:48px}

.worlds{display:grid;gap:16px}.world{width:100%;text-align:left;padding:24px;border-radius:22px;white-space:normal}.world h2{margin:8px 0}.world p{font-weight:normal;color:inherit}.world:nth-child(2){background:#184d48;color:white}.world small{opacity:.85}