body{background:radial-gradient(ellipse at 15% 0,#e5ecd8,transparent 45%),#f5f2e7}header{padding-bottom:20px}.village-hero{border-radius:30px;background:#fcf8eb;box-shadow:0 12px 40px #36503b05;min-height:340px}.village-hero .intro{padding:38px 42px}.village-hero h1{font-size:46px;margin:17px 0;line-height:1.28}.village-hero .art{background:radial-gradient(ellipse at center,#f7f4db 0,#e6ecd5 66%);overflow:hidden}.hero-lion{position:relative;z-index:1;animation:lionBreathe 4s ease-in-out infinite;transform-origin:center bottom}.hero-lion svg{display:block}.float{z-index:2}.f1{animation:floatOne 6s ease-in-out infinite}.f2{animation:floatTwo 7s ease-in-out infinite}.f3{font:14px sans-serif;border-radius:30px;padding:12px 18px;bottom:20px;left:50%;transform:translateX(-50%);white-space:nowrap;animation:greeting 700ms ease-out both}.leaf{position:absolute;color:#b4bc76;font-size:22px;animation:twinkle 4s infinite}.leaf1{right:24%;bottom:45px}.leaf2{left:17%;top:33%;animation-delay:2s}.section-title .eyebrow{margin-bottom:8px;font-size:9px}.stats{margin-bottom:26px}.scene-card{padding:0;overflow:hidden;min-height:0;animation:cardEnter .65s both;animation-delay:calc(var(--order)*90ms);border-radius:22px;box-shadow:0 5px 0 #dfe3d1}.scene{background:#e9efdb;position:relative;overflow:hidden;padding:15px 8px 0;height:175px}.story .scene{background:#f0ead5}.school .scene{background:#e1eae2}.scene svg{display:block;width:100%;height:100%}.scene-count{position:absolute;top:13px;right:13px;font-size:10px;background:#fffaf0d9;border:1px solid #d3dac1;border-radius:30px;padding:6px 9px;color:#5b7056}.scene-copy{position:relative;padding:20px 23px 22px}.path-num{font-size:9px;color:#8a8c74;letter-spacing:2px}.scene-copy h3{margin-top:10px;font-size:21px}.scene-copy p{margin:0;font-size:12px}.scene-copy .arrow{bottom:25px;right:20px}.scene-card:hover .scene svg{transform:translateY(-3px);transition:transform .3s}.smoke{animation:smoke 4s ease-in-out infinite}.fireflies{animation:twinkle 3s ease-in-out infinite}.floating-book{animation:bookFloat 4s ease-in-out infinite}.shelf-preview{margin-top:30px;background:#f9f5e8;border:1px solid #dddbc7;border-radius:22px;padding:25px 28px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left}.shelf-preview h3{margin:9px 0;font-size:18px}.shelf-preview p{font-size:12px;margin:0}.shelf-preview>span{font-size:12px;white-space:nowrap;color:#557055}.mini-books{display:flex;gap:4px;align-items:flex-end;border-bottom:8px solid #b39468;padding:0 12px;min-width:200px;height:83px;box-shadow:0 4px 0 #d7c7ab}.mini-books i{display:flex;align-items:center;justify-content:center;width:18px;height:calc(42px + mod(var(--i),3)*7px);min-height:46px;border-radius:3px 4px 0 0;font-size:9px;writing-mode:vertical-rl;font-style:normal}.mini-books .collected{background:#809b78;border-left:3px solid #5d7d55;color:#fff8e9;animation:bookArrive .6s both;animation-delay:calc(var(--i)*60ms)}.mini-books .collected:nth-child(3n+1){background:#c28e64;border-color:#a7734d;height:61px}.mini-books .collected:nth-child(3n+2){background:#93a9a3;border-color:#6b8d83;height:51px}.mini-books .ghost{border:1px dashed #c5c8b4;background:#eeeddf}.feedback{position:relative;padding-right:100px}.feedback-lion{position:absolute;right:5px;top:12px;width:92px}.feedback-lion svg{width:100%}.happy{animation:happyJump .65s ease-in-out 2}.gentle{animation:lionBreathe 3s ease-in-out 2}.reveal-feedback{animation:cardEnter .35s ease-out}.reward-overlay{position:fixed;inset:0;pointer-events:none;display:grid;place-items:center;z-index:50}.stamp{border:4px double #b54e39;border-radius:14px;color:#b54e39;padding:12px 18px;background:#fff7e9ed;font:40px serif;transform:rotate(-12deg);animation:stamp 1.5s both;box-shadow:0 6px 35px #9d6e3718}.stamp small{display:block;font:10px sans-serif;text-align:center;letter-spacing:2px;margin-top:5px}.spark{position:absolute;left:50%;top:50%;width:8px;height:8px;background:#caa35b;border-radius:2px;animation:spark 1s ease-out both;transform:rotate(var(--a)) translateY(0)}.gentle-reward{background:#fff8e8;padding:17px 24px;border:1px solid #d5dfc4;border-radius:30px;box-shadow:0 6px 30px #26433420;animation:gentleToast 1.5s both;font-size:14px}.wooden-shelf{gap:28px 16px;padding:15px 12px 24px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 190px,#c8ac7e 190px,#b89767 202px);grid-auto-rows:174px}.wooden-shelf .book{background:linear-gradient(100deg,#d5b98f 0,#d5b98f 7px,#fcf1d9 8px,#fff8e7 94%,#e6d4b5 95%);border:1px solid #d0b995;border-radius:4px 12px 12px 4px;box-shadow:3px 5px 0 #d7c5a5;animation:bookArrive .45s both;height:174px}.book strong{font-size:26px;letter-spacing:3px}.book small{line-height:1.6;font-size:10px}.finish-panel>div:nth-child(2){animation:happyJump 1s ease-in-out 2}.primary:active,.option:active{transform:scale(.97)}.option{transition:background .2s,transform .15s}.option.correct{animation:correctPulse .45s}.options{align-items:stretch}.panel{animation:cardEnter .35s both}dialog{max-height:85dvh;overflow-y:auto}dialog[open]{animation:cardEnter .25s both}.hanja{overflow-wrap:anywhere;letter-spacing:5px}.question{overflow-wrap:anywhere}
@keyframes lionBreathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes floatOne{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-8px) rotate(-4deg)}}@keyframes floatTwo{0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(7px) rotate(5deg)}}@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}@keyframes cardEnter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes greeting{from{opacity:0;bottom:10px}to{opacity:1;bottom:20px}}@keyframes smoke{0%,100%{opacity:.3;transform:translateY(2px)}50%{opacity:.7;transform:translateY(-6px)}}@keyframes bookFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes bookArrive{from{opacity:0;transform:translateY(-16px) rotate(-8deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes happyJump{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-12px) rotate(-5deg)}70%{transform:translateY(-4px) rotate(4deg)}}@keyframes stamp{0%{opacity:0;transform:scale(2) rotate(-20deg)}18%,65%{opacity:1;transform:scale(1) rotate(-12deg)}100%{opacity:0;transform:scale(.9) rotate(-12deg)}}@keyframes spark{0%{opacity:0}20%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(80deg)}}@keyframes gentleToast{0%,100%{opacity:0;transform:translateY(10px)}20%,75%{opacity:1;transform:translateY(0)}}@keyframes correctPulse{50%{box-shadow:0 0 0 4px #c6d9bb}}
@media(max-width:650px){header{padding:17px 16px 14px;gap:8px}.brand{font-size:14px;letter-spacing:-.6px}.brand small{font-size:7px;letter-spacing:1.7px}nav{gap:5px}nav .quiet{font-size:11px;padding:9px}.village-hero{display:grid;grid-template-columns:1.15fr 1fr;min-height:240px;border-radius:24px;position:relative}.village-hero .intro{padding:24px 0 22px 20px;z-index:3}.village-hero h1{font-size:27px;letter-spacing:-1.3px;margin:13px 0 10px}.village-hero .eyebrow{font-size:8px;letter-spacing:.5px;white-space:nowrap}.village-hero .intro p{font-size:11px;line-height:1.7;margin:0 0 17px}.village-hero .primary{font-size:11px;padding:13px 10px;white-space:nowrap;border-radius:11px}.village-hero .art{min-height:240px;background:radial-gradient(ellipse at center,#edf0d4,transparent 70%);overflow:visible}.hero-lion{width:170px;position:absolute;right:-5px;bottom:24px}.hero-lion svg{width:100%}.village-hero .art:before{width:130px;height:130px;bottom:50px;right:7px}.village-hero .float{font-size:23px;padding:6px 9px;border-radius:8px}.village-hero .f1{left:8px;top:24px}.village-hero .f2{right:9px;top:42px}.village-hero .f3{font-size:8px;padding:7px 9px;bottom:20px;left:51%;border-radius:20px}.leaf1{right:14%;bottom:30px}.leaf2{display:none}.stats{padding:16px 2px;margin-bottom:23px;gap:10px;flex-wrap:wrap}.stats .quiet{padding:8px 10px;font-size:11px}.stats strong{font-size:13px}.stats span{font-size:9px}.section-title{margin-bottom:15px}.section-title h2{font-size:21px}.section-title .eyebrow{font-size:8px;letter-spacing:1.7px}.village-paths{gap:15px}.scene-card{padding:0;display:grid;grid-template-columns:43% 57%;border-radius:20px;min-height:145px}.scene{height:100%;min-height:145px;padding:20px 0 0;display:flex;align-items:flex-end}.scene svg{height:auto;min-width:150px}.scene-copy{padding:26px 12px 22px 18px}.scene-copy h3{font-size:20px;margin:10px 0 6px}.scene-copy p{font-size:11px;line-height:1.6;max-width:150px;padding-right:7px;word-break:keep-all}.scene-count{top:10px;right:auto;left:12px;font-size:9px;padding:4px 8px}.scene-copy .arrow{bottom:12px;right:14px;font-size:22px}.path-num{font-size:8px;letter-spacing:1.5px}.shelf-preview{margin-top:25px;padding:20px;display:grid;grid-template-columns:1fr auto;gap:12px}.shelf-preview>div:first-child{grid-column:1/-1}.shelf-preview h3{font-size:17px}.shelf-preview .eyebrow{font-size:8px}.mini-books{min-width:180px;padding:0 6px;height:70px}.shelf-preview>span{font-size:10px}.feedback{padding:18px 70px 18px 16px}.feedback-lion{width:67px;right:0;top:12px}.feedback p{font-size:13px}.feedback h3{font-size:16px}.feedback .next{font-size:13px;padding:14px 10px}.wooden-shelf{gap:28px 12px;padding:12px 5px 24px;grid-auto-rows:174px}.wooden-shelf .book{padding:18px 14px}.book strong{font-size:23px;letter-spacing:1px}.foot{font-size:10px;margin-bottom:20px}.reward-overlay .stamp{font-size:33px}.panel .options{gap:10px}.hanja{font-size:46px}.empty .bigscore{font-size:54px}}
@media(max-width:360px){.brand{font-size:12px}nav .quiet{padding:8px 7px}.village-hero h1{font-size:24px}.hero-lion{width:150px;right:-10px}.village-hero .intro{padding-left:15px}.stats{gap:7px}.scene-copy h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reward-overlay{display:none}}
@media(max-width:650px){.village-hero h1{font-size:24px;letter-spacing:-1.4px;word-break:keep-all}.village-hero .intro{padding-left:17px}.scene{align-items:center}.scene svg{transform:translateY(12px)}.scene-card{animation-duration:.35s}.village-hero .f3{background:#fff9eb;border-color:#cdd6bb;color:#476149}}@media(max-width:360px){.village-hero h1{font-size:21px;letter-spacing:-1.3px}}
.course-section{margin:0 0 35px}.stage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0 14px}.stage{border:1px solid #d4dcc8;background:#faf8ed;border-radius:15px;padding:18px;text-align:left;display:flex;flex-direction:column;gap:8px}.stage small{font-size:9px;color:#89917b;letter-spacing:1.5px}.stage strong{font-size:17px;white-space:nowrap}.stage span{font-size:12px;color:#79826e}.stage.selected{background:#e0e9d4;border:2px solid #61805a;padding:17px}.stage.selected small,.stage.selected span{color:#4b6945}.course-desk{background:#fbf8eb;border:1px solid #d7ddc8;border-radius:20px;padding:24px;display:grid;grid-template-columns:1.5fr 1fr;gap:30px}.course-desk h3{font-size:23px;margin:15px 0 8px}.course-desk p{margin:7px 0;font-size:13px}.course-desk .chip{margin-top:0;font-size:11px}.course-actions{display:flex;flex-direction:column;justify-content:center;gap:10px}.course-progress{height:7px;background:#e4e7d5;border-radius:10px;margin-top:20px;overflow:hidden}.course-progress i{height:100%;display:block;background:#789867;min-width:0;transition:width .3s}.progress-copy{font-size:11px!important;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}.stage-note{font-size:11px;margin:10px 3px}.course-badge{border:1px solid #d6d9c4;border-radius:20px;padding:7px 10px;white-space:nowrap}.text-button{border:0;background:transparent;padding:7px 0;color:#587050;font-size:12px;text-decoration:underline;text-underline-offset:3px}.scope-choices{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.scope-choices button{white-space:nowrap;font-size:12px}.lesson-preview{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:22px 0}.lesson-preview>span{font:32px serif;background:#e9eddc;border-radius:9px;padding:10px 12px;text-align:center}.lesson-preview small{display:block;font:11px sans-serif;margin-top:5px;color:#637359}.lesson-preview .needs-review{background:#f1dfd1}.single-character{font:110px serif;text-align:center;line-height:1.35;color:#284f3c;margin:20px 0}.character-card{background:radial-gradient(ellipse,#fff9e8,#eef0de);border:1px solid #dce1cb;border-radius:24px;padding:15px;text-align:center;margin:20px auto;max-width:360px}.character-card h3{font-size:24px;margin:10px 0 15px;line-height:1.6}.character-card>span{font-size:12px;color:#6f7c64}.char-instruction{font-size:22px;text-align:center;margin:23px 0 12px;word-break:keep-all}.learning-note{text-align:center;word-break:keep-all;font-size:13px}.three-options{grid-template-columns:1fr}.quiz-character{margin:20px auto 25px}.catalog-panel{max-width:950px}.catalog-search{display:block;font-size:12px;color:#637359}.catalog-search input{display:block;width:100%;margin-top:8px;padding:13px 16px;border:1px solid #ccd5be;border-radius:12px;background:#fffdf5;font:16px sans-serif;color:#243e35}.char-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.char-tile{background:#f7f3e7;border:1px solid #d8ddc7;border-radius:13px;padding:13px 7px;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}.char-tile strong{font:42px serif}.char-tile span{font-size:11px;overflow-wrap:anywhere;text-align:center;line-height:1.5}.char-tile small{font-size:10px;color:#879078}.char-tile.mastered{background:#e4edd8;border-color:#9ab888}.char-tile.needs-review{border:2px solid #c69a74}.catalog-pagination{display:flex;align-items:center;justify-content:space-between;margin:20px 0;font-size:12px}.catalog-pagination button:disabled{opacity:.4}.music-button{font-size:19px;min-width:40px;padding:7px 12px}.music-playing{background:#e0e9d6;border-color:#b8c9a2}.music-playing:after{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:#648d4f;margin-left:3px;vertical-align:middle}.catalog-panel a{color:#456f52}.alternate-readings{font-size:13px;text-align:center}.char-panel .option{text-align:center}.course-section .section-title h2{white-space:nowrap}.scene-copy h3,.brand,.path-num,.topline>span,.qtype,.meta,.stage span{white-space:nowrap}.scene-copy p{word-break:keep-all}.hero h1{word-break:keep-all}.eyebrow{line-height:1.5}header nav{align-items:center}header .quiet{white-space:nowrap}
@media(max-width:650px){header{gap:6px;padding:14px 14px}.brand{font-size:12px;letter-spacing:-.7px}.brand small{font-size:6px;letter-spacing:1.4px}nav{gap:4px}nav .quiet{font-size:10px;padding:8px 7px}nav .music-button{font-size:17px;padding:5px 7px;min-width:30px}.music-playing:after{display:none}.course-section{margin-bottom:27px}.course-section .section-title{gap:5px}.course-section h2{font-size:19px}.course-section .eyebrow{font-size:7px;letter-spacing:1.3px}.course-badge{padding:6px 8px;font-size:9px!important}.stage-grid{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:15px}.stage{padding:13px 14px;gap:6px;border-radius:13px}.stage.selected{padding:12px 13px}.stage strong{font-size:16px}.stage small{font-size:8px}.stage span{font-size:11px}.course-desk{display:block;padding:18px}.course-desk h3{font-size:21px}.course-desk p{font-size:12px;word-break:keep-all}.course-desk .chip{font-size:10px}.course-actions{margin-top:18px;gap:9px;display:grid;grid-template-columns:1fr 1fr}.course-actions .primary{grid-column:1/-1;padding:15px;font-size:14px}.course-actions .quiet,.course-actions .text-button{font-size:10px;white-space:nowrap}.stage-note{font-size:10px;word-break:keep-all}.progress-copy{font-size:10px!important;line-height:1.8}.char-instruction{font-size:20px}.single-character{font-size:95px;margin:15px 0}.character-card{padding:10px}.character-card h3{font-size:22px}.char-grid{grid-template-columns:repeat(3,1fr);gap:8px}.char-tile strong{font-size:37px}.char-tile span{font-size:10px}.catalog-panel h2{font-size:22px}.catalog-panel p{font-size:11px}.catalog-pagination button{font-size:12px}.scope-choices{gap:7px}.scope-choices .quiet{padding:9px 11px;font-size:11px}.lesson-preview>span{font-size:27px;padding:9px 10px}.topline .quiet{font-size:11px;padding:9px 12px}.topline>span{font-size:11px}.char-panel .qtype{font-size:11px}.char-panel .options .option{font-size:17px}.char-panel .feedback h3{font-size:14px}.scene-copy h3{font-size:19px}.scene-copy p{font-size:10px}.village-hero h1{font-size:23px;letter-spacing:-1.4px}.village-hero .intro{padding-left:16px}}
@media(max-width:350px){header{flex-wrap:wrap}.brand{font-size:14px;flex-basis:100%;margin-bottom:6px}.brand small{display:none}header nav{width:100%;justify-content:flex-end}.village-hero h1{font-size:20px}.village-hero .primary{font-size:10px}.course-section h2{font-size:17px}.scene-copy h3{font-size:17px}.scene-copy p{font-size:10px}.char-grid{grid-template-columns:repeat(2,1fr)}}
.placement-banner{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;border:1px solid #c9d4b8;border-radius:18px;background:linear-gradient(110deg,#e3ebd4,#faf5e4);padding:21px 23px;margin:0 0 27px;text-align:left}.placement-banner strong,.placement-banner small{display:block;margin-top:7px}.placement-banner strong{font-size:19px}.placement-banner small{font-size:12px;color:#738263}.placement-banner>span{font-size:28px}.placement-guide{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.placement-guide span{padding:13px;background:#e9eddd;border-radius:10px;font-size:12px}.placement-guide b{display:block;margin-top:6px}.placement-override{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px auto;max-width:400px}.placement-override button{font-size:13px}.placement-result{max-width:620px}.play-dock{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:12px}.play-dock .next{margin:0}.play-dock .text-button{font-size:11px;padding:3px}.practice-panel .feedback{margin-top:12px}.practice-panel.answered .options{display:none}.practice-panel.answered.show-answered-options .options{display:grid}.practice-panel .feedback:empty{display:none}
@media(max-width:650px){body.practicing{height:100dvh;overflow:hidden}body.practicing header{height:56px;padding-top:8px;padding-bottom:8px;box-sizing:border-box}body.practicing header .brand small{display:none}body.practicing main{height:calc(100dvh - 56px);margin:0;padding:0 10px 8px;box-sizing:border-box}.practice-panel{height:100%;max-height:100%;margin:0!important;padding:14px 15px!important;border-radius:20px;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;animation:none}.practice-panel>.topline{flex-shrink:0}.practice-panel .bar{margin:11px 0 9px;height:4px;flex-shrink:0}.practice-panel .qtype{font-size:10px;line-height:1.3}.practice-panel .char-instruction{font-size:18px;line-height:1.4;margin:12px 0 5px;flex-shrink:0}.practice-panel .single-character{font-size:76px;line-height:1.15;margin:12px 0;flex-shrink:0}.practice-panel .character-card{margin:10px auto;padding:8px 20px;width:min(100%,290px);flex-shrink:1}.practice-panel .character-card .single-character{margin:8px 0}.practice-panel .character-card h3{font-size:20px;margin:9px 0}.practice-panel .character-card>span{font-size:11px}.practice-panel .learning-note{font-size:11px;line-height:1.5;margin:8px 0}.practice-panel .alternate-readings{font-size:11px;line-height:1.5;margin:6px 0}.practice-panel .options{gap:9px;flex-shrink:0;margin:10px 0}.practice-panel .option,.practice-panel.char-panel .option{font-size:15px;line-height:1.5;padding:13px 10px;min-height:47px;word-break:keep-all;overflow-wrap:anywhere}.practice-panel .question{font-size:19px;line-height:1.5;margin:12px 0;flex-shrink:0}.practice-panel .hanja{font-size:42px;margin:12px 0;line-height:1.3;flex-shrink:0}.practice-panel .hint{font-size:10px;line-height:1.5;margin:8px 0}.practice-panel.answered .hint{display:none}.practice-panel .feedback{margin-top:12px;padding:14px 55px 14px 13px}.practice-panel .feedback h3{font-size:14px;line-height:1.4;margin:0 0 7px}.practice-panel .feedback p{font-size:12px;line-height:1.6;margin:4px 0}.practice-panel .feedback-lion{width:52px;top:8px}.practice-panel .play-dock{position:sticky;bottom:-14px;background:#fbf7ec;padding:10px 0 calc(3px + env(safe-area-inset-bottom));z-index:5;flex-shrink:0;box-shadow:0 -10px 12px #fbf7ec}.practice-panel .play-dock>.primary{width:100%;font-size:14px;padding:14px 10px;min-height:46px}.practice-panel .play-dock>.quiet{min-height:46px;background:#eeeeda;font-size:13px}.practice-panel.answered .quiz-character{font-size:60px;margin:8px 0}.practice-panel.answered .question{font-size:17px}.placement-banner{padding:16px 17px;margin-bottom:22px}.placement-banner strong{font-size:16px}.placement-banner small{font-size:10px}.placement-banner .eyebrow{font-size:8px}.placement-result .bigscore{font-size:55px;margin:20px 0}.placement-result p{font-size:12px}}
@media(max-height:700px) and (max-width:650px){.practice-panel .single-character{font-size:60px;margin:7px 0}.practice-panel .char-instruction{font-size:16px;margin:8px 0 3px}.practice-panel .question{font-size:16px;line-height:1.4;margin:9px 0}.practice-panel .option,.practice-panel.char-panel .option{font-size:14px;padding:10px 8px;min-height:42px}.practice-panel .feedback{margin-top:8px;padding-top:10px;padding-bottom:10px}.practice-panel .hanja{font-size:35px;margin:9px 0}.practice-panel .character-card{margin:8px auto}.practice-panel .character-card h3{font-size:18px}.practice-panel .play-dock{padding-top:7px}}
@media(max-width:350px){body.practicing header{flex-wrap:nowrap}body.practicing .brand{flex-basis:auto;font-size:11px;margin:0}body.practicing header nav{width:auto}body.practicing nav .quiet{font-size:9px;padding:7px 6px}}
/* Bundled regular-script Han glyphs and a softer Korean UI. */
@font-face{font-family:SajaKai;src:url('fonts/SajaKai.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+20000-2FFFF}
@font-face{font-family:SajaSoft;src:url('fonts/SajaSoft.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
:root{--reading-font:'SajaKai','SajaSoft','Apple SD Gothic Neo',sans-serif}body,button,input,select,textarea{font-family:var(--reading-font)}.single-character,.hanja,.book strong,.char-tile strong,.float,.symbol,.lesson-preview>span,.lesson-preview small,.mini-books i,.stamp{font-family:var(--reading-font);font-style:normal}.single-character,.hanja,.book strong,.char-tile strong{font-weight:400;font-synthesis:none}.option,.char-panel .option,.practice-panel .option,.practice-panel.char-panel .option{text-align:center;display:flex;align-items:center;justify-content:center}.question{font-weight:700;line-height:1.6}header nav{display:flex;align-items:center;gap:7px}header nav .quiet{box-sizing:border-box;height:36px;min-height:36px;max-height:36px;border-width:1px;border-style:solid;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap;font-size:12px;padding:0 13px;margin:0;flex-shrink:0;vertical-align:middle}header nav #musicToggle,header nav #help{width:36px;min-width:36px;padding:0}header nav #musicToggle{font-size:inherit}header nav #musicToggle svg{display:block;width:21px;height:21px;flex-shrink:0}.music-playing:after{display:none!important}header nav #help{font-size:16px}.music-button.music-playing{background:#e0e9d6;border-color:#bdcda9}.option:disabled{opacity:1}.brand{font-weight:700}
@media(max-width:650px){header nav{gap:5px}header nav .quiet{height:34px;min-height:34px;max-height:34px;padding:0 10px;border-radius:17px;font-size:11px}header nav #musicToggle,header nav #help{width:34px;min-width:34px;padding:0}header nav #musicToggle svg{width:20px;height:20px}header .brand{font-size:12px;letter-spacing:-.6px}.practice-panel .question{line-height:1.55}.practice-panel .option,.practice-panel.char-panel .option{font-family:var(--reading-font)}.lesson-preview small{font-size:11px}.practice-panel .single-character{font-size:78px}}
@media(max-width:390px) and (min-width:351px){header{flex-wrap:wrap}header .brand{flex-basis:100%;margin-bottom:7px;font-size:15px}header .brand small{display:none}header nav{margin-left:auto}body.practicing header{flex-wrap:nowrap}body.practicing header .brand{flex-basis:auto;font-size:11px;margin:0;letter-spacing:-.7px}body.practicing header nav{gap:3px}body.practicing header nav .quiet{padding:0 7px;font-size:10px}body.practicing header nav #musicToggle,body.practicing header nav #help{padding:0;width:32px;min-width:32px}}
@media(max-width:350px){body.practicing header nav .quiet{font-size:9px;padding:0 6px}body.practicing header nav #musicToggle,body.practicing header nav #help{width:29px;min-width:29px}body.practicing header nav{gap:3px}body.practicing header .brand{font-size:10px}body.practicing header nav #musicToggle svg{width:18px;height:18px}}