/* MALOA — soft stationery, a little Seoul cafe. */
:root{--paper:#fcfaf6;--ink:#374c69;--muted:#707d90;--green:#547aa9;--lime:#f8dce4;--line:#e5e7ef;--white:#fff;--orange:#e7b37c}
body{font-family:ui-rounded,'Hiragino Maru Gothic ProN','Yu Gothic',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;background-image:radial-gradient(#cad8e34d .8px,transparent .8px);background-size:16px 16px}button,a,select,textarea{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#648cc3}
.sidebar{background:#edf3fc;border-right:1px solid #dfe6f2}.brand{color:#486b9a;font-size:19px;letter-spacing:1px}.brandmark{box-shadow:0 4px 0 #d7e3f4;transform:rotate(-5deg);border-radius:17px}.brand small{letter-spacing:.5px}.sidebar-note{font-size:9px;color:#768da9;letter-spacing:1.7px}.nav-item{color:#61748f;border-radius:18px;min-height:54px;margin-bottom:12px}.nav-item.active{background:#fff;color:#486b9a;box-shadow:0 4px 0 #d8e3f5;border:1px solid #d8e3f5}.nav-icon{color:inherit}.side-foot{color:#647a98}.live-dot{background:#9baed2}.side-foot small{color:#71849d}
header{border-bottom:1px dashed #d9e1ee}.language-control label{color:#667b98}select{background:#fff;border-color:#dce4f1;border-radius:15px;color:#496788;min-height:44px}.help-button{background:#fff;border:1px solid #e6e7ed;border-radius:13px;padding:11px 14px;color:#6b7a8e}.welcome{position:relative;background:#edf3ff;border:1px solid #e1e9f6;border-radius:30px;padding:34px 32px;margin:28px 0 22px;min-height:250px;overflow:hidden}.welcome::before{content:'';position:absolute;left:46%;top:-15px;width:86px;height:28px;background:#f9e9c6b8;transform:rotate(-12deg)}.welcome>div:first-child{position:relative;z-index:1;max-width:70%}.eyebrow{color:#6c83a7;font-size:9px;letter-spacing:1.5px}h1{color:#3f5d85;font-weight:750;font-size:clamp(28px,3vw,42px);letter-spacing:.8px;line-height:1.65;margin:17px 0 12px}.welcome p{color:#687c9a;font-size:12px}.letter-art{width:210px;height:190px;transform:none}.art-circle{width:100px;height:100px;background:#fff8df;border:2px solid #e8d6a0;color:#af9256;top:48px;left:0;font-size:45px;box-shadow:3px 5px 0 #d9e3f4;transform:rotate(-14deg);font-family:inherit}.art-square{width:106px;height:106px;background:#fff;border:2px solid #c3d5ef;color:#6288bc;top:70px;right:5px;font-size:39px;border-radius:28px;box-shadow:4px 5px 0 #d7e1f3;transform:rotate(11deg);font-family:inherit}.letter-art i{font-size:25px;color:#c195ad;top:25px;right:25px}.art-caption{left:22px;bottom:0;color:#7188aa;letter-spacing:1.5px;font-size:8px}.daisy{position:absolute;top:0;left:56px;width:64px;height:64px;transform:rotate(8deg)}
.stats{background:#fff;border-radius:22px;border-color:#e4e8ef;box-shadow:0 4px 0 #f0ede6;padding:22px 15px;margin-bottom:31px}.stats>div{border-color:#edf0f4}.stat-icon{color:#9fa6cd;background:#f5f2fc;display:grid;place-items:center;width:37px;height:37px;border-radius:13px}.stats strong{color:#5275a2;font-size:22px}.stats div div>span{color:#71809a}h2{color:#415b7b;font-weight:700;font-size:20px}.section-heading small{color:#77869b}
.scene-grid{gap:14px}.scene{background:#fff;border:1px solid #e2e6ee;border-radius:21px;padding:19px 16px;min-height:121px;box-shadow:0 4px 0 #eeece5;position:relative}.scene:nth-child(1){background:#fff6e1}.scene:nth-child(2){background:#f8edef}.scene:nth-child(3){background:#eef1fd}.scene:nth-child(4){background:#edf5ee}.scene strong{color:#53637c;font-weight:700}.scene small{color:#6d7890;font-size:10px;line-height:1.6}.scene.selected{border:2px solid #7e9fc8;padding:18px 15px;background:#eaf1ff;box-shadow:0 4px 0 #ccdaee}.scene.selected::after{content:'✓';position:absolute;right:13px;top:13px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#7c9fc9;color:white;font-size:11px}.scene-emoji{font-size:25px;margin-bottom:12px}
.card{border:1px solid #e2e7f0;border-radius:25px;box-shadow:0 5px 0 #efede7;padding:27px;background:#fff}.card-top{color:#75839b}.pill{background:#edf2fc;color:#5876a1;border-radius:9px;letter-spacing:.4px;padding:8px 11px}.phrase{color:#405976;font-weight:700;line-height:1.75}.reading{color:#7385a1}.translation{color:#5f708c}.tiny-label{color:#6e7e95}.save{color:#9faac0}.save.is-saved{color:#bd8b48}.btn{background:#f1f5fc;color:#547299;border:1px solid #dfe7f3;border-radius:14px;padding:12px 16px;font-weight:600;min-height:46px}.btn.primary{background:#597eae;border-color:#597eae;box-shadow:0 3px 0 #41638f;color:white}.btn.lime{background:#f8dee5;border:1px solid #ebc7d2;color:#8a596d;box-shadow:0 3px 0 #efd1db}.btn:hover{filter:brightness(.98)}.circle-button{border-color:#e0e6f1;color:#6983a7;background:#f8faff;min-width:40px;min-height:40px}.study-bottom{border-top:1px dashed #dfe5ef}.hint-card{background:#fff5f6;border-color:#f0e0e5;box-shadow:0 5px 0 #f2e6e8}.hint-card .eyebrow{color:#ab7c90}.hint-card h3{color:#8d6379;font-size:15px}.hint-card .phrase{color:#6f6480}.hint-card .btn{background:#fff;border-color:#ecdde3;color:#91768b}.tip-box{background:#fff7df;border:1px dashed #e7d7af;border-radius:18px;color:#87724d;line-height:1.9}.tip-box strong{color:#8a7249}.toggle-line{color:#6c7d98}.toggle-line input{accent-color:#6488b7}.note{color:#6e7d93}.ai-banner{background:#eaf0fc;border:1px solid #dce5f5;border-radius:23px;box-shadow:0 4px 0 #e5eaf4}.ai-banner strong{color:#4d6f9f}.ai-banner p{color:#697c9b}.ai-spark{color:#b895be}.ai-banner .btn{background:#fff;color:#5678a6;border-color:#cfddf2;box-shadow:0 3px 0 #d4e0f1}textarea{background:#fbfcff;border:1px solid #dce4f1;border-radius:18px;color:#435a7a}textarea::placeholder{color:#8a96a7}.prompt-box{background:#f5f8ff;color:#5a7092;border-color:#e1e7f3}.feature-list{color:#69748c}footer{border-top:1px dashed #dbe3ef;color:#71819b}footer button{color:#71819b}.empty{background:#fff;border-color:#cdd9ec;color:#71809b;border-radius:24px}dialog{border:1px solid #e1e7f2;border-radius:26px;background:#fdfcff}.modal-head button{background:#edf2fc;color:#6584ac}dialog::backdrop{background:#4e638766;backdrop-filter:blur(3px)}#toast{background:#516f9b;border:1px solid #7793b7;border-radius:16px}
@media(max-width:1100px) and (min-width:761px){.welcome{padding:27px 22px}.letter-art{width:165px;transform:scale(.8);transform-origin:right center}.welcome>div:first-child{max-width:72%}.scene{padding:17px 12px}.scene.selected{padding:16px 11px}.card{padding:22px}}
@media(max-width:760px){main{padding-left:19px;padding-right:19px}header{padding-top:20px;gap:16px;min-height:124px;border-bottom:0}.mobile-brand{color:#486b9a;font-size:21px;font-weight:800;letter-spacing:1.3px;gap:10px}.mobile-brand::before{width:44px;height:44px;border-radius:15px;box-shadow:0 3px 0 #dbe6f4;transform:rotate(-5deg);font-size:27px}.mobile-brand span{font-size:11px;letter-spacing:.2px}.help-button{padding:10px 12px;background:#fff;border:1px solid #e3e8f0}select{min-height:42px}.welcome{margin:12px 0 19px;min-height:238px;border-radius:26px;padding:24px 19px 22px;overflow:hidden}.welcome>div:first-child{max-width:100%}.welcome::before{left:49%;width:63px;height:23px;top:-10px}.eyebrow{font-size:8px;letter-spacing:.8px}h1{font-size:27px;line-height:1.7;letter-spacing:.1px;margin:17px 0 12px}.welcome p{font-size:11px;line-height:1.8;max-width:235px;margin-bottom:0}.letter-art{width:108px;height:140px;right:7px;top:61px;opacity:1;z-index:0}.art-circle{width:60px;height:60px;font-size:27px;left:0;top:42px;box-shadow:2px 3px 0 #d9e3f4}.art-square{width:62px;height:66px;font-size:24px;right:-3px;top:73px;border-radius:20px;box-shadow:2px 3px 0 #d7e1f3}.letter-art i{font-size:16px;top:13px;right:5px}.daisy{width:37px;height:37px;left:30px;top:0}.art-caption{display:none}.stats{padding:17px 7px;border-radius:20px;margin-bottom:28px}.stats>div{gap:6px}.stat-icon{width:26px;height:30px;font-size:17px;background:transparent}.stats strong{font-size:20px}.stats div div>span{font-size:8px}.section-heading{margin-top:24px}h2{font-size:18px}.scene-grid{gap:12px}.scene{min-height:111px;padding:17px 14px;border-radius:20px}.scene.selected{padding:16px 13px}.scene-emoji{display:block;font-size:23px;margin-bottom:9px}.scene strong{font-size:12px}.scene small{font-size:9px;margin-top:6px}.scene.selected::after{width:18px;height:18px;top:11px;right:11px}.card{padding:23px 20px;border-radius:23px}.phrase{font-size:25px}.card-top{font-size:10px}.hint-card .phrase{font-size:21px}.hint-card h3{font-size:14px}.study-bottom{gap:6px}.study-bottom>.btn{font-size:11px;padding:11px 12px}.audio-controls .btn{font-size:12px}#mobile-nav{left:12px;right:12px;bottom:12px;border:1px solid #dce5f3;background:#ffffffed;border-radius:23px;box-shadow:0 6px 25px #748aa625;padding:7px 7px calc(7px + env(safe-area-inset-bottom));backdrop-filter:blur(16px)}#mobile-nav .nav-item{border:0;box-shadow:none;min-height:52px;margin:0;padding:7px 0;gap:4px;border-radius:17px;color:#7c8ca3;font-size:9px}#mobile-nav .nav-item.active{background:#eaf0fc;color:#5278ab}#mobile-nav .nav-icon{font-size:21px}.ai-banner{padding:21px;border-radius:23px}.ai-banner .btn{width:100%}.ai-banner p{font-size:11px;line-height:1.9}.tip-box{font-size:12px}footer{gap:12px;align-items:flex-start}footer>span{max-width:62%;line-height:1.8}footer button{font-size:10px}main{padding-bottom:calc(105px + env(safe-area-inset-bottom))}}
@media(max-width:380px){.welcome h1{font-size:24px}.welcome p{max-width:195px}.letter-art{right:2px;transform:scale(.87);transform-origin:right center}.stats>div{gap:2px}.stat-icon{width:20px}.stats div div>span{font-size:7px}.scene strong{font-size:11px}.scene small{font-size:8px}.section-heading small{font-size:8px}}