/* K-Vibe: a bright, tactile letter-and-message studio. */
:root{--paper:#faf8f2;--ink:#252237;--muted:#625e70;--accent:#6545bd;--lilac:#eee8ff;--mint:#e1f2e9;--green:#225e50;--peach:#ffe8dc;--coral:#8b3c35;--line:#e4dfd7;--card:#fffefa}
body{background:#eae7e2;color:var(--ink);font-family:Inter,"Segoe UI",Arial,"Malgun Gothic",sans-serif}
.app{background:var(--paper);max-width:480px;padding:24px;box-shadow:0 20px 80px #29243a12}
header a{font-size:25px;letter-spacing:-1.3px}header a span{color:var(--accent);font-size:24px;margin-left:5px}
header .quiet{background:#efebe5;color:var(--ink);font-size:12px}
.brandline{letter-spacing:.08em;color:var(--muted);font-size:11px;margin:10px 0 18px}
h1{font-size:34px;line-height:1.1;letter-spacing:-1.5px;font-weight:800}h2{letter-spacing:-.5px}h1 em{font-style:normal;color:var(--accent)}
p{color:var(--muted);font-size:14px;line-height:1.55}.tiny{color:var(--muted);font-size:12px}
.eyebrow{color:var(--accent);font-size:10px;letter-spacing:1.4px;line-height:1.5}
button{background:var(--accent);border-radius:15px;min-height:46px;transition:transform .15s,background .15s;line-height:1.35}
button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.48}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #225e50;outline-offset:3px}
.quiet,.secondary{background:var(--lilac);color:#503493}.secondary{border:1px solid #ded4f3}
.stepnav{background:#faf8f2f5;border-color:var(--line);padding:7px 0;margin-bottom:18px}
.stepnav button{background:#eeeae4;color:var(--ink);min-height:44px}.stepnav span{color:var(--muted)}
body[data-view="home"] .stepnav{display:none}
.homehero{padding-top:7px}.homehero h1{font-size:clamp(29px,8.4vw,37px);margin:10px 0 16px}.homehero p{max-width:330px;margin:12px 0 20px}
.coverart{display:flex;align-items:center;gap:9px;height:77px;position:relative;padding:4px 7px}
.tile{display:flex;align-items:center;justify-content:center;width:57px;height:59px;border:1px solid #29243a;border-bottom:4px solid #29243a;border-radius:15px;font-size:38px;font-weight:750}
.tile-one{background:#e1f2e9;transform:rotate(-8deg)}.tile-two{background:#eee8ff;transform:rotate(5deg)}.tile-three{background:#ffe8dc;transform:rotate(-3deg)}
.art-plus,.art-arrow{font-size:21px;color:var(--muted)}.art-star{position:absolute;right:4px;top:-4px;color:var(--accent);font-size:34px;transform:rotate(12deg)}
.pathheading{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:14px}.pathheading span{font-size:11px;color:var(--muted)}
.moduleintro{margin:0;gap:12px}.world.module-learn,.world.module-express{display:flex;align-items:center;gap:15px;border:1px solid transparent;padding:17px;color:var(--ink);border-radius:22px}
.world.module-learn{background:var(--mint);border-color:#c9e1d4}.world.module-express{background:var(--peach);border-color:#f2d0bd}
.module-symbol{display:flex;align-items:center;justify-content:center;flex:0 0 55px;height:66px;font-size:36px;background:#ffffff85;border:1px solid #ffffff;border-radius:16px}
.module-learn .module-symbol{color:var(--green);transform:rotate(-5deg)}.module-express .module-symbol{color:var(--coral);transform:rotate(5deg)}
.module-copy{flex:1;min-width:0}.module-copy>small{font-size:9px;letter-spacing:1px;color:var(--muted);opacity:1}
.module-copy h2{font-size:23px;margin:3px 0 5px}.module-copy p{font-size:12px;line-height:1.45;margin:0 0 10px;color:var(--muted)}
.module-action{display:flex;align-items:center;justify-content:space-between;font-size:12px}.module-action span{font-size:20px}
.firstphrase{display:flex;align-items:center;justify-content:space-between;text-align:left;width:100%;background:transparent;color:var(--ink);border:1px solid var(--line);padding:14px 17px;margin:17px 0 8px;border-radius:20px}
.firstphrase>span:first-child{display:grid;grid-template-columns:auto auto;column-gap:12px;align-items:center}.firstphrase small{grid-column:1/-1;font-size:9px;letter-spacing:1.1px;color:var(--muted);margin-bottom:4px}.firstphrase b{font-size:23px}.firstphrase span span{font-size:12px;font-weight:400;color:var(--muted)}
.round-arrow{display:grid;place-items:center;background:var(--lilac);width:37px;height:37px;border-radius:50%;font-size:22px;color:var(--accent)}
footer{color:#686271;font-size:10px;line-height:1.5;margin-top:22px;padding-bottom:env(safe-area-inset-bottom)}
.world:not(.module-learn):not(.module-express){background:var(--peach);border:1px solid #f0d2c2;color:var(--ink);padding:22px}
.world:not(.module-learn):not(.module-express):nth-child(2){background:var(--lilac);border-color:#dcd1f0}
.world .caticon{display:inline-grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#ffffffa0;font-size:27px}.world> b{font-size:12px}.world>p{font-size:13px;color:var(--muted)}.world>small{color:var(--muted);font-size:12px;opacity:1}
.category{background:#fffefa;border:1px solid var(--line);border-radius:19px;gap:8px;padding:17px;color:var(--ink);box-shadow:0 3px 0 #e9e4dc}
.category .caticon{color:var(--coral);background:var(--peach);border-radius:10px;padding:3px 8px}.category b{font-size:15px}.category small{color:var(--muted)}.category>span:last-child{color:var(--muted)}
.phrasepick{background:#fffefa;border:1px solid var(--line);border-left:4px solid #cebcf0;border-radius:16px;color:var(--ink);padding:16px 18px;gap:5px}
.phrasepick small{color:var(--muted);font-size:11px}.phrasepick .phraseko{font-size:23px}
.contextnote{background:#f2eadb;color:#594933;border:1px solid #e5dac5;line-height:1.6}
.journey{display:flex;list-style:none;padding:0;margin:0 0 23px;gap:8px}.journey li{display:flex;align-items:center;gap:6px;flex:1;font-size:11px;color:var(--muted);border-bottom:3px solid var(--line);padding:0 0 10px}
.journey li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ece7df;font-weight:700}.journey .current{color:var(--accent);border-color:var(--accent);font-weight:700}.journey .current span{background:var(--accent);color:#fff}.journey .complete{border-color:#aad2bf}.journey .complete span{background:var(--mint);color:var(--green)}
.phrasehero{background:var(--peach);border:1px solid #efcdbb;border-radius:25px;margin:18px 0;padding:24px 18px}
.phrasehero .korean{font-size:clamp(27px,8vw,36px);color:var(--ink);margin:22px 0 12px;line-height:1.5}
.phrasehero .english{color:#654b44;font-size:17px}.pill{color:#644f69;background:#ffffffbb;font-size:11px}
.buildhero{background:var(--lilac);border:1px solid #dcd0f0}.chip{border:1px solid #c9bbdf;border-bottom:4px solid #c9bbdf;color:var(--ink);border-radius:15px}.chip.done{background:var(--accent);border-color:#493083;color:#fff}
.keepsake{position:relative;background:var(--peach);padding:25px 22px 34px;border:1px solid #eccbb8;border-radius:25px;margin:22px 0;box-shadow:0 5px 0 #eeded2}
.keepsake>.eyebrow{color:#815149;font-size:9px}.keepsake .bubble{background:transparent;margin:20px 0 10px;padding:0;font-size:34px;color:var(--ink)}.keepsake-mark{position:absolute;bottom:10px;right:20px;font-size:28px;color:var(--coral)}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px}.card h2{font-size:26px}.nextstage{border-color:var(--line)}.sourceinfo a{color:var(--accent)}
.input{border-color:#d7cced;color:var(--ink);background:#fffefa}
.keyboard{background:#e9e5ed;border:1px solid #d7d0df}.keyboard .key{background:#fffefa;box-shadow:0 2px 0 #c6bdcf;color:var(--ink)}.keyboard .key.dim{background:#f5f1f7;color:#6f637a}
.keyboard .key.next{background:#dcd0fa;color:#422078;outline-color:var(--accent)}
.keyboard .key.function{background:#d9d1e3;color:#453653}.key.speaking{background:var(--accent)!important;color:#fff!important}
.lessonhead{margin-bottom:18px}.lessonhead .eyebrow{flex:1.2}.lessonhead button{flex:0 0 auto;min-height:44px}
.map-summary{display:flex;gap:15px;justify-content:space-between;align-items:center;background:var(--mint);border:1px solid #c9e1d4;border-radius:20px;padding:17px;margin:20px 0 12px}
.map-summary>span>b{font-size:32px;display:block;line-height:1.15;color:var(--green)}.map-summary b small{font-size:17px}.map-summary>span>small{font-size:11px;color:var(--green)}.map-summary button{font-size:12px;max-width:155px}
.hangul-guide{border-bottom:1px solid var(--line);padding:3px 0 12px;font-size:13px}.hangul-guide summary{min-height:44px;padding:12px 0;cursor:pointer;font-weight:600}
.map-group{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--green);margin:16px 0 0}
.fmap{gap:10px;margin:8px 0 20px}.flesson{background:#fffefa;color:var(--ink);padding:15px 13px;border:1px solid var(--line);border-radius:18px;gap:13px}
.fnumber{display:grid;place-items:center;min-width:35px;height:39px;border-radius:11px;background:var(--lilac);color:var(--accent);font-size:18px}
.flesson b{font-size:15px}.flesson small{color:var(--muted);font-size:11px;margin-top:5px}.flesson .lesson-state{font-size:10px;color:var(--green);font-weight:600}.lesson-ready .fnumber{background:var(--mint);color:var(--green)}
.intro-sample{background:var(--mint);border-radius:22px;border:1px solid #c9e1d4;padding:26px 15px;text-align:center;font-size:clamp(27px,8vw,40px);font-weight:700;color:var(--green);margin:20px 0}
.fmode-intro h1{font-size:30px}.fmode-intro .card{padding:18px}.fmode-intro .card p:first-child{margin-top:0}.fmode-intro .card p:last-child{margin-bottom:0}
.lesson-progress{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);gap:10px}.lesson-progress span:last-child{font-size:9px;letter-spacing:.7px;color:var(--accent)}
.session-track{height:5px;background:#e4ddec;border-radius:8px;margin:10px 0 18px;overflow:hidden}.session-track>span{display:block;height:100%;background:var(--accent);border-radius:8px}
.fmode-practice h2,.fmode-review h2{font-size:23px;margin:12px 0}
.fcard{background:#fffefa;border:1px solid var(--line);padding:19px 16px;border-radius:23px;margin:14px 0}
.ftarget{color:var(--ink);font-size:clamp(34px,9vw,52px);line-height:1.25}.target-meaning{text-align:center;margin:8px 0;font-size:13px}
.fmode-practice:has(.stroke-demo) .ftarget{font-size:30px}.fmode-practice:has(.stroke-demo) .target-meaning{margin:3px 0}
.stroke-demo{max-width:155px;margin:4px auto}.stroke-demo svg{max-height:120px}.stroke-grid{stroke:#c5bccc}.stroke-ink{stroke:var(--accent)}.stroke-pen{fill:#ae4838}.stroke-caption{color:var(--muted)}
.fcard .row button{font-size:11px;min-height:44px;padding:9px}.fcard .tiny{font-size:11px;margin:7px 0}
.fbuild{min-height:47px;font-size:27px}.foundations .keyboard{margin:13px -9px;padding:10px 4px 4px}
.foundations .keyrow{gap:3px}.foundations .key{min-height:46px;font-size:22px}.foundations .keyboard .functionrow [data-fkey=" "]{flex:5}
.fchoices{gap:10px}.fchoices button{background:var(--lilac);color:var(--ink);border:1px solid #d9cbed;min-height:75px}
.flisten{color:var(--accent);font-size:70px}.fstatus{color:var(--green);font-weight:600;line-height:1.5}.ferror{border:1px solid #e7bf9f}
.result-seal{display:grid;place-items:center;width:82px;height:82px;margin:28px auto 22px;border-radius:25px;background:var(--mint);color:var(--green);font-size:51px;transform:rotate(-6deg)}
.fmode-result{text-align:center}.fmode-result .lessonhead{text-align:left}.result-score{font-size:27px;color:var(--muted)}.result-score b{font-size:54px;color:var(--accent)}.result-score span{display:block;font-size:13px}
body:has(.fmode-practice) .brandline,body:has(.fmode-review) .brandline{display:none}
body:has(.fmode-practice) .stepnav,body:has(.fmode-review) .stepnav{position:relative;margin-bottom:10px}
body:has(.fmode-practice) .lessonhead,body:has(.fmode-review) .lessonhead{margin-bottom:12px}
body:has(.fmode-practice) header,body:has(.fmode-review) header{display:none}
.fmode-practice .fcard:has(.stroke-demo){padding:12px}
.fmode-practice .fcard:has(.stroke-demo) .ftarget{display:none}
.fmode-practice .fcard:has(.stroke-demo) .target-meaning{font-size:11px;margin:0}
.fmode-practice .fcard:has(.stroke-demo)>.tiny{display:none}
.fmode-practice .stroke-demo{max-width:125px;margin:2px auto}
.fmode-practice .stroke-demo svg{max-height:95px}
.fmode-practice .stroke-demo .stroke-caption{font-size:11px;min-height:16px}
.stroke-ghost{stroke:#9b91a7}
.fmode-practice .fcard:has(.stroke-demo) .wide{margin-top:7px}
body.practice .app{padding:12px 8px}body.practice .stepnav{margin-bottom:9px}body.practice .letterHint{color:var(--accent)}
@media(max-width:520px){body{background:var(--paper)}.app{padding:20px;min-height:100dvh;margin:0;border-radius:0;box-shadow:none}}
@media(max-width:370px){.app{padding:16px}.homehero h1{font-size:29px}.module-copy h2{font-size:22px}.world.module-learn,.world.module-express{padding:14px;gap:12px}.module-symbol{flex-basis:49px}.firstphrase span span{font-size:11px}.fcard{padding:16px 12px}.category{padding:14px}}
/* Keep both module entrances above the fold on short phones. */
@media(max-width:520px) and (max-height:740px){
 body:has(.fmode-practice .stroke-demo) .app{padding-top:8px}
 .fmode-practice:has(.stroke-demo) .fbuild{display:none}
 .fmode-practice:has(.stroke-demo) .functionrow{display:none}
 .fmode-practice:has(.stroke-demo) h2{margin:6px 0;font-size:22px}
 .fmode-practice:has(.stroke-demo) .keyboard{margin-top:10px;margin-bottom:8px}
 .fmode-practice:has(.stroke-demo) .stroke-demo svg{max-height:80px}
 .fmode-practice:has(.stroke-demo)>.row button{padding:8px;min-height:44px;font-size:11px}
}
@media(max-width:520px) and (max-height:740px){
 body[data-view="home"] .app{padding-top:12px}
 body[data-view="home"] .brandline{margin:6px 0 10px}
 .homehero{padding-top:0}.homehero h1{font-size:29px;margin:6px 0 10px}
 .homehero p{margin:8px 0 12px}.coverart{height:52px}.tile{height:43px;width:43px;font-size:28px;border-radius:12px}
 .world.module-learn,.world.module-express{padding:12px;gap:12px}
 .module-copy h2{font-size:22px}.module-copy p{margin-bottom:6px}.moduleintro{gap:10px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}.tile,.module-symbol,.result-seal{transform:none!important}}

.speech-icon{width:1em;height:1em;display:inline-block;vertical-align:middle}.module-symbol .speech-icon{width:40px;height:40px}.keepsake-mark .speech-icon{width:28px;height:28px}
.chips{gap:5px}.chips .chip{min-width:0;flex:1;padding:12px 4px;font-size:23px}.chips .chip small{font-size:10px;letter-spacing:-.3px}
.hulbert-note{display:flex;align-items:flex-start;gap:12px;margin:16px 0 20px;padding:14px 12px;border-block:1px solid #cfc4e1;background:linear-gradient(100deg,#eee8ff70,transparent);color:var(--ink);text-align:left}
.hulbert-code{flex:none;font:600 11px/1.6 ui-monospace,Consolas,monospace;letter-spacing:1px;color:var(--accent);padding-top:2px}
.hulbert-note strong{display:block;font-size:15px;line-height:1.4;font-weight:650;max-width:310px}
.hulbert-name{display:block;font-size:13px;line-height:1.5;margin-top:5px;color:#55436e}
.hulbert-note em{display:block;font-size:12px;line-height:1.5;margin-top:2px;color:var(--muted)}
@media(max-width:520px) and (max-height:740px){.hulbert-note{margin:10px 0 14px;padding:10px;gap:9px}.hulbert-note strong{font-size:14px}.hulbert-name{margin-top:3px;font-size:12px}}