:root{--ink:#202b36;--muted:#79828b;--line:#e8ebed;--red:#ae3d32;--paper:#f7f8f9;--font:'Segoe UI',Arial,'Yu Gothic',Meiryo,sans-serif}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font:14px var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7191ad;outline-offset:3px}button:disabled{cursor:default}aside{width:226px;position:fixed;inset:0 auto 0 0;border-right:1px solid var(--line);padding:30px 19px;display:flex;flex-direction:column;background:#fbfbfc}.brand{display:flex;gap:9px;align-items:center;padding:0 2px}.brand img{width:47px;height:47px;object-fit:contain}.brand b{font-size:19px;letter-spacing:-.5px}.brand small{display:block;color:#8a9299;font-size:9px;letter-spacing:1px;font-weight:400;margin-top:4px}aside label{font-size:9px;letter-spacing:1.4px;color:#929aa1;margin:42px 14px 15px}nav{display:grid;gap:5px}nav button{display:flex;align-items:center;gap:12px;text-align:left;border:0;border-radius:6px;padding:12px 14px;color:#6c7580;background:transparent;font-size:13px}nav svg{width:19px;height:19px;flex-shrink:0}nav button:hover{background:#f0f2f3;color:#273849}nav button.active{background:#f4eae7;color:#a4382e;font-weight:600}.aside-bottom{margin-top:auto;padding:18px 12px 0;border-top:1px solid var(--line);font-size:11px;color:#8c959c}.aside-bottom p{line-height:1.8;margin:0 0 8px}.aside-bottom small{font-size:10px}main{margin-left:226px;padding:0 48px;max-width:1600px}header{height:83px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#969da4}header b{color:#626e79;font-weight:500}.header-divider{margin:0 13px;color:#c7ccd0}.header-actions{display:flex;align-items:center;gap:18px}.header-actions a{color:#78818a;font-size:11px}.account-button{padding:9px 15px;background:#fff;border:1px solid #dce1e5;border-radius:5px;font-size:11px;color:#495661}#app{padding-top:39px}h1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:11px 0 10px;font-weight:650}h2{font-size:16px;font-weight:600;margin:0}h3{font-size:15px;font-weight:600}p{color:var(--muted);line-height:1.65}.eyebrow{font-size:10px;color:#969da2;letter-spacing:1px}.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:39px;gap:20px}.page-title p{font-size:12px;margin:0}.search-shortcut{display:flex;align-items:center;gap:12px;border:1px solid #e5e8eb;background:#fff;border-radius:6px;color:#9299a0;padding:12px 16px;font-size:12px;min-width:230px}.search-shortcut>span{font-size:23px;line-height:14px;color:#78838d}.search-shortcut small{margin-left:auto;color:#9ba3aa}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 253px;gap:38px}.chapters{min-width:0}.list-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px}.list-heading>span{font-size:11px;color:#8b939a}.count-badge{font-size:10px;color:#88919a;background:#f0f2f4;padding:3px 6px;border-radius:4px;vertical-align:middle;margin-left:6px;font-weight:400}.table-label{display:grid;grid-template-columns:47px 1fr 130px;background:#f5f6f7;padding:10px 12px;font-size:8px;letter-spacing:1px;color:#97a0a8;border-radius:4px}.table-label span:last-child{text-align:center}.chapter-row{display:flex;width:100%;text-align:left;align-items:center;gap:15px;min-height:86px;padding:17px 12px;border:0;border-bottom:1px solid #edf0f2;background:#fff;color:inherit;transition:background .15s}.chapter-row:hover{background:#faf8f6}.chapter-number{width:29px;height:29px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #e5e9ec;border-radius:5px;font-size:10px;color:#8b949c;font-variant-numeric:tabular-nums}.chapter-info{flex:1;min-width:0}.chapter-info strong{font-size:14px;font-weight:600;display:block;margin-bottom:6px}.chapter-info small{font-size:10px;color:#858f98}.chapter-info small span{color:#a1a8ae}.chapter-sample{font-family:'Yu Gothic',Meiryo,sans-serif;font-size:21px;letter-spacing:3px;color:#65717a;white-space:nowrap}.chapter-chevron{font-size:20px;color:#b9c0c5;margin-left:7px}.study-sidebar{padding-top:0}.progress-panel{background:#f7f8f9;border:1px solid #e8ecef;border-radius:7px;padding:22px}.panel-label{font-size:12px;font-weight:600;color:#5e6b77;display:flex;justify-content:space-between}.panel-label span{color:#a1acb4;font-size:15px}.progress-total{font-size:43px;letter-spacing:-1.5px;font-weight:600;margin-top:23px;line-height:1.2}.progress-total span{font-size:16px;font-weight:400;color:#9ca6ad;letter-spacing:0}.progress-panel p{font-size:11px;margin:6px 0 0}.track{height:4px;background:#e3e8eb;margin-top:18px;overflow:hidden;border-radius:2px}.track i{display:block;height:100%;background:var(--red)}.primary,.secondary{border-radius:5px;padding:11px 18px;font-size:12px;transition:background .15s}.primary{border:1px solid var(--red);background:var(--red);color:#fff}.primary:hover{background:#953329}.secondary{border:1px solid #dfe4e8;background:#fff;color:#52616d}.secondary:hover{background:#f5f7f8}.progress-panel .primary{width:100%;margin-top:22px;font-size:11px}.practice-panel{margin-top:31px}.practice-panel h2{font-size:12px;color:#5e6b77;padding-bottom:8px}.practice-panel button{display:flex;justify-content:space-between;align-items:center;background:#fff;border:0;border-bottom:1px solid var(--line);width:100%;padding:17px 0;text-align:left;color:#8f9aa3}.practice-panel strong{display:block;font-size:12px;font-weight:500;color:#3d4a55}.practice-panel small{display:block;font-size:10px;color:#9aa3aa;margin-top:5px}.practice-panel button:hover strong{color:var(--red)}.book-note{display:flex;gap:13px;padding-top:23px;margin-top:25px;border-top:1px solid var(--line)}.book-note>span{width:37px;height:45px;display:grid;place-items:center;border:1px solid #dfe4e8;background:#f8f9fa;color:#86929b;font-size:20px;border-radius:2px}.book-note p{margin:0;font-size:10px;color:#9aa3aa;line-height:1.8}.book-note strong{font-weight:500;color:#6b7883}footer{border-top:1px solid var(--line);font-size:10px;color:#9ba3aa;line-height:1.8;margin-top:37px;padding:24px 0}.toolbar{display:flex;gap:12px;margin:25px 0 22px;padding-bottom:19px;border-bottom:1px solid var(--line)}input,select{font:inherit;border:1px solid #e0e5e9;padding:12px 14px;border-radius:5px;background:#fff;color:#53616d;max-width:100%;font-size:12px}.toolbar input{flex:1;background:#fafbfc}.kanjis{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.kanji{background:#fff;border:1px solid #e3e8ec;border-radius:6px;text-align:center;padding:16px 10px 22px;color:#364550}.kanji:hover{background:#faf8f5;border-color:#c6b1a7}.kanji-topic{font-size:9px;color:#9ba4ab;display:block}.kanji strong{display:block;font-family:'Yu Gothic',Meiryo,sans-serif;font-weight:400;font-size:44px;margin:18px 0 14px}.kanji span{font-size:11px;color:#77838d}.empty-state{grid-column:1/-1;text-align:center;padding:55px 20px;background:#fafbfc;border:1px dashed #dde3e7}.empty-state strong{font-size:15px;font-weight:500}.empty-state p{font-size:12px}dialog{color:var(--ink);border:1px solid #e1e6ea;border-radius:8px;padding:30px;width:550px;max-width:93vw;max-height:88vh;overflow:auto;box-shadow:0 20px 80px #182f4226}dialog::backdrop{background:#22334466;backdrop-filter:blur(3px)}dialog>small{font-size:10px;color:#929ca5}.big{font:108px 'Yu Gothic',Meiryo,sans-serif;text-align:center;margin:35px 0 20px}.readings{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#f6f8f9;border-radius:5px;padding:20px;margin-top:25px;line-height:1.8}.readings small{display:block;color:#8d99a3;font-size:9px;letter-spacing:.8px;margin-bottom:7px}.examples{font-size:13px;line-height:1.9;white-space:pre-line;border-top:1px solid var(--line);padding:18px 0}.study{max-width:590px;margin:30px auto;text-align:center;border:1px solid #e2e7eb;border-radius:8px;padding:35px;position:relative;overflow:hidden;background:#fff}.study>small{font-size:11px;color:#9aa3aa}.study-progress{position:absolute;top:0;left:0;right:0;height:3px;background:#f0f2f4}.study-progress i{display:block;height:100%;background:#af6a60}.study>.big{margin:40px 0;font-size:115px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}.answers button{min-height:48px}.answers button:disabled{opacity:.65}.feedback{margin:22px 0;min-height:25px;font-size:13px;color:#a34639;line-height:1.6}#account-dialog{text-align:center;width:430px;padding:38px}#account-dialog h2{font-size:24px;margin-top:18px;letter-spacing:-.5px}#account-dialog p{font-size:13px}.close{position:absolute;right:14px;top:9px;border:0;background:none;color:#84909a;font-size:25px}.login-logo{width:78px;height:78px;display:block;margin:0 auto 23px}.google-button{width:100%;display:flex;justify-content:center;align-items:center;gap:13px;border:1px solid #dce2e7;border-radius:5px;padding:13px;background:#fff;margin-top:23px;font-size:13px}.google-button b{font-size:20px;color:#4285f4}.login-note{font-size:11px!important}.text-button{border:0;background:none;font-size:12px;color:#8f675c;padding:12px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,10px);opacity:0;pointer-events:none;transition:.15s;background:#263b4b;color:white;border-radius:5px;padding:13px 20px;z-index:100;font-size:12px;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:1450px){main{padding:0 65px}.workspace{gap:48px;grid-template-columns:minmax(0,1fr) 285px}}@media(max-width:1100px){main{padding:0 28px}.workspace{gap:23px;grid-template-columns:minmax(0,1fr) 220px}.chapter-sample{font-size:19px;letter-spacing:1px}.chapter-row{gap:12px}.search-shortcut{min-width:190px}.kanjis{grid-template-columns:repeat(4,1fr)}}@media(max-width:900px){aside{width:190px;padding:25px 13px}.brand b{font-size:16px}.brand img{width:40px;height:40px}main{margin-left:190px}.workspace{grid-template-columns:1fr}.study-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:24px}.practice-panel{margin:0}.book-note{display:none}.page-title{align-items:flex-start}.search-shortcut{min-width:0;font-size:0;margin-top:20px;padding:10px}.search-shortcut small{display:none}.search-shortcut>span{font-size:22px}}@media(max-width:700px){body{padding-bottom:77px}aside{position:static;width:auto;padding:13px 19px;border-right:0;border-bottom:1px solid var(--line);background:#fff}.brand b{font-size:18px}.brand img{width:39px;height:39px}.brand small{font-size:8px}aside label,.aside-bottom{display:none}nav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:7px 5px max(7px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}nav button{display:flex;flex-direction:column;align-items:center;gap:5px;justify-content:center;padding:7px 0;font-size:9px;min-height:51px}nav svg{width:20px;height:20px}nav button.active{background:#faf0ed}main{margin:0;padding:0 20px}header{height:57px;font-size:10px}header>span{display:none}.header-actions{width:100%;justify-content:space-between}.account-button{font-size:10px;padding:8px 12px}#app{padding-top:27px}h1{font-size:29px;letter-spacing:-.8px}.page-title{margin-bottom:29px;gap:14px}.page-title p{font-size:11px;max-width:235px;line-height:1.8}.eyebrow{font-size:9px}.search-shortcut{padding:10px;margin-top:22px}.workspace{display:flex;flex-direction:column;gap:25px}.study-sidebar{display:contents}.progress-panel{order:-1;display:grid;grid-template-columns:1fr auto;column-gap:15px;padding:17px 19px;border-radius:6px}.panel-label{grid-column:1;font-size:10px}.panel-label>span{display:none}.progress-total{grid-column:1;font-size:29px;margin-top:9px}.progress-total span{font-size:13px}.progress-panel p{grid-column:1;font-size:10px;margin-top:2px}.progress-panel .track{grid-column:1;margin-top:12px}.progress-panel .primary{grid-column:2;grid-row:1/5;align-self:center;width:auto;margin:0;padding:11px 13px;font-size:10px}.chapters{order:0}.practice-panel{order:1;margin-top:4px}.practice-panel button{padding:17px 0}.list-heading{padding-bottom:14px}.list-heading h2{font-size:15px}.list-heading>span{font-size:10px}.table-label{grid-template-columns:43px 1fr 95px;padding:9px 8px;font-size:7px}.chapter-row{padding:17px 7px;gap:12px;min-height:81px}.chapter-number{width:27px;height:27px;font-size:9px}.chapter-info strong{font-size:13px}.chapter-info small{font-size:9px}.chapter-sample{font-size:18px;letter-spacing:0}.chapter-chevron{font-size:18px;margin-left:0}.toolbar{flex-wrap:wrap;margin-top:23px}.toolbar input{width:100%;flex-basis:100%}.toolbar select{width:100%}.kanjis{grid-template-columns:repeat(3,1fr);gap:9px}.kanji{padding:14px 7px 18px}.kanji strong{font-size:36px;margin:16px 0 10px}.kanji-topic{font-size:8px}.kanji span{font-size:10px}.study{padding:28px 19px;margin-top:25px}.study>.big{font-size:100px}.answers{grid-template-columns:1fr;gap:10px}dialog{padding:23px}.readings{padding:16px;gap:12px}.big{font-size:95px}.primary,.secondary{font-size:11px;padding:11px 14px}footer{font-size:9px;margin-top:28px}#toast{bottom:90px;width:90%;text-align:center}#account-dialog{padding:35px 24px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Branded learning cover. */
:root{--red:#cd392b;--ink:#24323e}aside{background:#fff}nav button.active{background:#fff0eb;color:#bb382b}.brand b{font-weight:750}.page-title{margin-bottom:25px}h1{font-size:29px;letter-spacing:-.8px}.page-title .eyebrow{color:#b14b3d}.feature-band{background:#fbeee7;position:relative;overflow:hidden;min-height:232px;margin-bottom:36px;display:flex;align-items:center;justify-content:space-between;padding:29px 35px;border-radius:8px;border:1px solid #f3e1d7}.feature-copy{position:relative;z-index:2}.feature-kicker{font-size:9px;letter-spacing:1.8px;color:#a45c4d}.feature-copy h2{font-size:29px;line-height:1.2;letter-spacing:-.8px;color:#813d31;margin:14px 0 10px;font-weight:650}.feature-copy p{font-size:11px;color:#a06f60;margin:0 0 21px}.feature-copy button{background:#c53c2d;border:0;color:white;border-radius:4px;font-size:11px;padding:11px 15px;min-width:145px;display:flex;justify-content:space-between;gap:22px;align-items:center}.feature-copy button:hover{background:#ab3023}.feature-copy button span{font-size:16px}.feature-glyph{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-items:center;position:relative;z-index:1;margin-right:25px;transform:translateY(-4px)}.feature-glyph>span{font:77px 'Yu Gothic',Meiryo,sans-serif;color:#bd4935;display:grid;place-items:center;width:93px;height:106px;border-top:1px solid #d8afa0;border-bottom:1px solid #d8afa0;background:#ffffff40}.feature-glyph>span:nth-child(2){background:#c54633;color:#fff;border:0}.feature-glyph small{grid-column:1/-1;text-align:center;font-size:10px;letter-spacing:9px;color:#b4715c;margin-top:12px}.feature-index{position:absolute;right:17px;bottom:14px;font-size:9px;letter-spacing:2px;color:#b67a65}.chapter-row{border-bottom:1px solid #e9ecee;padding:16px 12px;min-height:84px;border-radius:5px}.chapter-row:hover{background:#fff7f2}.chapter-number{width:34px;height:38px;border:0;font-size:12px;font-weight:600;border-radius:5px}.tone-0{background:#f8eae4;color:#b15a43}.tone-1{background:#eaf0f2;color:#5d7e90}.tone-2{background:#edf0e6;color:#7d8a5d}.chapter-info strong{font-size:14px;font-weight:650}.chapter-sample{color:#435766;font-size:24px}.chapter-chevron{color:#a6b2ba}.table-label{background:#f3f5f6;color:#7d8b95}.list-heading{padding-bottom:16px}.list-heading h2{font-size:17px}.progress-panel{background:#243d4f;border:0;color:#fff;border-radius:7px}.panel-label{color:#dce6ed}.panel-label span{color:#aec2d0}.progress-total{color:#fff}.progress-total span{color:#9eb6c6}.progress-panel p{color:#b8ccd9}.progress-panel .track{background:#466071}.progress-panel .track i{background:#e9b68b}.progress-panel .primary{background:#fff;border-color:#fff;color:#344c5d;font-weight:600}.progress-panel .primary:hover{background:#e8eef2}.practice-panel{margin-top:27px}.practice-panel h2{color:#435a6b}.practice-panel button{padding:18px 0}.practice-panel button>span:last-child{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#f3f5f6;color:#5d7586}.search-shortcut{background:#f8fafb;border-color:#e9eef1}.primary{background:#c33e2f;border-color:#c33e2f}.kanji:hover{background:#fff7f0;border-color:#d9af97}.kanji strong{color:#304b5e}footer{margin-top:32px}@media(max-width:1150px){.feature-band{padding:27px}.feature-glyph{gap:5px;margin-right:0}.feature-glyph>span{font-size:59px;width:69px;height:86px}.feature-copy h2{font-size:27px}}@media(max-width:900px){.feature-glyph>span{font-size:49px;width:58px;height:77px}.feature-copy h2{font-size:24px}.feature-copy p{max-width:210px}.feature-band{gap:15px}}@media(max-width:700px){h1{font-size:26px}.page-title{margin-bottom:23px}.page-title p{font-size:11px}.feature-band{padding:23px 20px;align-items:flex-start;min-height:245px;margin-bottom:25px;border-radius:7px}.feature-copy{max-width:205px}.feature-copy h2{font-size:25px;line-height:1.22;margin-top:14px}.feature-copy p{font-size:10px;max-width:170px;line-height:1.7;margin-bottom:19px}.feature-kicker{font-size:8px;letter-spacing:1.4px}.feature-copy button{font-size:10px;min-width:135px;padding:10px 13px}.feature-glyph{position:absolute;right:17px;top:23px;grid-template-columns:1fr;gap:3px;margin:0;transform:none}.feature-glyph>span{font-size:38px;width:55px;height:58px;background:transparent;border:0;color:#c2674b}.feature-glyph>span:nth-child(2){color:#fff;border-radius:2px}.feature-glyph small{display:none}.feature-index{right:16px;bottom:15px;font-size:8px}.chapter-row{padding:17px 5px;gap:12px}.chapter-number{width:30px;height:33px;font-size:10px}.chapter-info strong{font-size:13px}.chapter-sample{font-size:20px}.list-heading h2{font-size:15px}.progress-panel{padding:18px}.progress-panel .primary{font-size:10px;padding:11px}.study-sidebar{gap:20px}.table-label{grid-template-columns:44px 1fr 95px}.kanji{border-radius:5px}}
/* Playful learning edition */
:root{--ink:#293745;--red:#e45a49;--font:'Arial Rounded MT Bold','Trebuchet MS','Segoe UI','Yu Gothic',sans-serif}body{font-family:var(--font);color:var(--ink)}aside{background:#fffdf9;border-right:2px solid #f0eeea;width:220px;padding:28px 17px}.brand b{font-size:20px;letter-spacing:-.6px}.brand small{font-family:'Segoe UI',sans-serif}nav{gap:9px}nav button{border-radius:12px;font-size:13px;padding:13px 14px;font-weight:600}nav button.active{background:#fff0d4;color:#a56b20;box-shadow:0 3px 0 #ecd9b7}nav button:hover{background:#f7f0e5}nav svg{stroke-width:1.8}main{margin-left:220px;padding:0 45px;max-width:1500px}header{height:76px;border-bottom:2px solid #f2f2ef}.account-button{border:2px solid #e8ebed;border-radius:10px;padding:9px 15px;box-shadow:0 2px 0 #e8ebed;font-weight:600}.header-actions a{font-size:12px}.eyebrow{letter-spacing:1px;font-size:10px;color:#a98150;font-weight:600}#app{padding-top:32px}.play-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}.play-heading h1{font-size:33px;font-weight:800;letter-spacing:-1.2px;margin:10px 0}.play-heading p{font-size:12px;color:#85909a;margin:0}.search-shortcut{border:2px solid #ecedef;background:#fff;border-radius:12px;padding:11px 15px;min-width:160px;color:#939ba2}.play-hero{border:2px solid #eee4cc;border-bottom:5px solid #e8d9b7;background:#fff6df;border-radius:22px;display:grid;grid-template-columns:1.25fr 1fr;min-height:292px;padding:30px 35px;position:relative;overflow:hidden}.hero-tag{font-size:9px;color:#9b824c;letter-spacing:1px;font-weight:700}.play-hero h2{font-size:36px;font-weight:800;letter-spacing:-1.4px;line-height:1.2;margin:16px 0 12px}.play-hero h2 span{color:#db6950}.play-hero p{font-size:12px;color:#8f846a;line-height:1.8;margin:0 0 21px}.primary{font-family:var(--font);background:#e45a49;border:2px solid #d64c3a;border-bottom:5px solid #b94132;border-radius:12px;padding:11px 20px;color:#fff;font-weight:700;font-size:13px;box-shadow:none}.primary:hover{background:#e96756}.primary:active{transform:translateY(2px);border-bottom-width:3px}.play-hero .primary{min-width:153px;display:flex;justify-content:space-between;align-items:center;gap:25px}.play-hero .primary span{font-size:20px}.mascot{position:relative;min-height:230px;align-self:center;display:grid;place-items:center}.character{width:162px;height:188px;background:#fff;border:3px solid #334956;border-radius:19px;box-shadow:8px 7px 0 #e3a970;transform:rotate(7deg);position:relative;z-index:2}.character-top{background:#de6952;color:white;border-bottom:3px solid #334956;border-radius:15px 15px 0 0;padding:10px 0;text-align:center;font-size:9px;letter-spacing:2px;font-weight:bold}.character-kanji{text-align:center;font:86px 'Yu Gothic',Meiryo,sans-serif;color:#334956;line-height:1.25}.character-face{display:flex;justify-content:center;align-items:center;gap:17px;height:30px;color:#334956}.character-face i{height:8px;width:7px;background:#334956;border-radius:50%;position:relative}.character-face i:after{content:'';position:absolute;top:10px;left:-5px;background:#fac7bc;width:17px;height:6px;border-radius:50%}.character-face b{font:bold 23px sans-serif}.character-shadow{position:absolute;bottom:0;width:165px;height:17px;background:#eadbb9;border-radius:50%}.float-word{position:absolute;background:#fff;border:2px solid #ddd0b4;padding:10px 13px;color:#657774;border-radius:14px;font:15px 'Yu Gothic',sans-serif;z-index:3}.word-one{left:0;top:17px;transform:rotate(-12deg);font-size:24px;color:#d76d53}.word-two{right:-8px;bottom:22px;transform:rotate(-7deg);font-size:12px}.spark{position:absolute;color:#d7a64a;font-size:30px}.spark-one{top:0;right:15px}.spark-two{bottom:20px;left:10px;font-size:22px}.play-progress{display:flex;gap:15px;align-items:center;padding:21px 4px;margin:5px 0 19px;border-bottom:2px solid #f1f3f2}.progress-symbol{width:38px;height:38px;background:#eaf3e7;border-radius:12px;color:#6b9669;display:grid;place-items:center;font-size:21px}.play-progress strong{display:block;font-size:12px;font-weight:700}.play-progress small{display:block;font:10px 'Segoe UI',sans-serif;color:#98a1a8;margin-top:5px}.play-track{height:9px;background:#edf2e9;border-radius:20px;overflow:hidden;flex:1;margin-left:25px;max-width:220px}.play-track i{display:block;background:#8ab67c;height:100%;border-radius:20px}.play-progress>b{font-size:12px;color:#7d9b70}.play-section{display:flex;align-items:center;justify-content:space-between;margin:24px 0 19px}.play-section h2{font-size:21px;font-weight:800;letter-spacing:-.5px}.play-section>span{font:11px 'Segoe UI',sans-serif;color:#9ba3aa}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lesson{--tint:#fff0e9;--edge:#edcfc0;--accent:#b96d50;border:2px solid var(--edge);border-bottom-width:5px;border-radius:16px;background:#fff;padding:18px 20px 17px;text-align:left;color:#344652;transition:transform .15s,background .15s;position:relative;overflow:hidden}.lesson-1{--tint:#eaf4f6;--edge:#cee2e7;--accent:#6c94a3}.lesson-2{--tint:#f0f3e6;--edge:#dce4c8;--accent:#8a9a62}.lesson-3{--tint:#f2edfa;--edge:#e0d6ef;--accent:#9680b2}.lesson:hover{transform:translateY(-4px);background:var(--tint)}.lesson:active{transform:translateY(1px)}.lesson-top{display:flex;align-items:center;justify-content:space-between;color:var(--accent)}.lesson-top>span{font-size:9px;font-weight:700;letter-spacing:1px}.lesson-top b{font-size:17px}.lesson-art{position:relative;display:flex;align-items:center;justify-content:center;width:83px;height:78px;background:var(--tint);border-radius:18px;margin:18px 0 16px;font:48px 'Yu Gothic',Meiryo,sans-serif;color:var(--accent)}.lesson-art small{position:absolute;right:-19px;bottom:-3px;display:grid;place-items:center;width:34px;height:35px;border:2px solid var(--edge);background:#fff;border-radius:9px;font-size:22px;transform:rotate(9deg)}.lesson h3{font-size:16px;letter-spacing:-.3px;font-weight:700;margin:0 0 13px}.lesson-bottom{display:flex;align-items:center;justify-content:space-between;gap:5px;color:#929ca4;font-size:10px}.lesson-bottom>span:last-child{color:var(--accent);font-weight:600}.practice-zone{display:grid;grid-template-columns:1.2fr 1fr 1fr;align-items:center;gap:15px;padding:28px 0 5px;margin-top:20px}.practice-zone h2{font-size:17px;margin-top:8px;letter-spacing:-.4px}.practice-zone button{display:flex;align-items:center;gap:10px;border:2px solid #e6eaec;border-bottom-width:4px;border-radius:12px;padding:18px 13px;background:#fff;color:#586e7c}.practice-zone button>span{font-size:23px}.practice-zone button strong{font-size:11px}.practice-zone button b{margin-left:auto}.practice-zone button:hover{background:#f7fafb}.secondary{border:2px solid #e4e9ed;border-bottom-width:4px;border-radius:10px;font-weight:600}.kanji{border:2px solid #e5eaed;border-bottom-width:4px;border-radius:13px}.kanji:hover{background:#fff6e6;border-color:#e9d5b2}.kanji strong{color:#476475}.study{border:2px solid #e8e6e0;border-bottom-width:5px;border-radius:20px;background:#fffefa}.study-progress{height:5px}.study-progress i{background:#d88f6f}.readings{border-radius:12px;background:#f1f6f7}dialog{border-radius:17px;border:2px solid #e7e9eb}.google-button{border-radius:10px;border-width:2px}.toolbar input,.toolbar select{border-width:2px;border-radius:10px}.study h2{font-weight:700}footer{font-family:'Segoe UI',sans-serif;border-top:2px solid #f1f2f1}.empty-state{border-radius:15px}.header-actions,.chapter-info small,.kanji-topic{font-family:'Segoe UI',sans-serif}@media(min-width:1450px){main{padding:0 65px}.play-hero{padding:35px 45px}.lesson-grid{gap:22px}.lesson{padding:22px}.mascot{margin-right:35px}}@media(max-width:1100px){main{padding:0 28px}.play-hero{padding:27px;grid-template-columns:1.2fr 1fr}.play-hero h2{font-size:31px}.character{width:143px;height:175px}.character-kanji{font-size:78px}.word-one{left:-6px}.word-two{right:-12px}.lesson{padding:16px}.lesson-grid{gap:13px}.practice-zone{grid-template-columns:1fr 1fr}.practice-zone>div{grid-column:1/-1}.play-heading h1{font-size:30px}}@media(max-width:900px){aside{width:190px;padding:25px 13px}main{margin-left:190px}.brand b{font-size:16px}.lesson-grid{grid-template-columns:repeat(2,1fr)}.play-hero{grid-template-columns:1fr 145px;padding:24px 20px}.play-hero h2{font-size:27px}.mascot{min-height:210px}.character{width:113px;height:152px;border-radius:15px;box-shadow:5px 5px 0 #e3a970}.character-top{border-radius:11px 11px 0 0;font-size:7px;padding:8px 0}.character-kanji{font-size:62px}.character-face{gap:12px}.word-one{font-size:15px;padding:6px;left:-9px}.word-two{font-size:9px;padding:7px;right:-8px;bottom:5px}.spark{font-size:22px}.character-shadow{width:110px}.play-track{margin-left:4px}.play-heading p{max-width:260px}.play-heading .search-shortcut{min-width:0;font-size:0;padding:10px}.play-heading .search-shortcut small{display:none}.play-heading .search-shortcut>span{font-size:22px}}@media(max-width:700px){body{padding-bottom:82px}aside{width:auto;padding:13px 18px;background:#fff}.brand b{font-size:19px}main{margin:0;padding:0 18px}nav{padding:7px 5px max(7px,env(safe-area-inset-bottom));border-top:2px solid #f0eeea;gap:4px;background:#fffdf9}nav button{font-size:9px;padding:7px 0;border-radius:10px;gap:5px}nav button.active{box-shadow:none}header{height:57px}#app{padding-top:25px}.play-heading{gap:12px;margin-bottom:23px}.play-heading h1{font-size:28px;letter-spacing:-1px}.play-heading p{font-size:11px;max-width:250px;line-height:1.7}.play-heading .eyebrow{font-size:8px}.play-hero{padding:24px 20px;min-height:275px;border-radius:18px;display:block}.play-hero>div:first-child{position:relative;z-index:3;max-width:210px}.hero-tag{font-size:8px;letter-spacing:.5px}.play-hero h2{font-size:28px;line-height:1.22;margin-top:17px}.play-hero p{font-size:10px;max-width:180px;margin-bottom:20px}.play-hero .primary{min-width:132px;max-width:150px;padding:9px 13px;font-size:11px}.mascot{position:absolute;right:7px;bottom:20px;width:112px;min-height:173px;opacity:1}.character{width:93px;height:132px;border-width:2px;border-radius:12px;transform:rotate(9deg);box-shadow:4px 5px 0 #e3a970}.character-top{font-size:6px;padding:7px 0;border-bottom-width:2px;letter-spacing:1px;border-radius:9px 9px 0 0}.character-kanji{font-size:54px}.character-face{gap:10px;height:23px}.character-face i{height:6px;width:5px}.character-face b{font-size:19px}.character-face i:after{width:12px;height:4px;top:8px;left:-3px}.character-shadow{width:87px;bottom:4px;height:10px}.word-one{top:-1px;left:9px;font-size:13px;border-radius:8px;transform:rotate(-8deg)}.word-two{display:none}.spark-one{top:12px;right:-2px;font-size:19px}.spark-two{display:none}.play-progress{gap:11px;padding:19px 0;margin:5px 0 14px;flex-wrap:wrap}.progress-symbol{width:34px;height:34px;border-radius:10px;font-size:18px}.play-progress strong{font-size:11px}.play-progress small{font-size:9px}.play-track{flex-basis:calc(100% - 45px);max-width:none;margin:2px 0 0;height:7px}.play-progress>b{font-size:10px}.play-section{margin:22px 0 15px;gap:10px}.play-section h2{font-size:19px}.play-section>span{font-size:10px}.lesson-grid{grid-template-columns:repeat(2,1fr);gap:12px}.lesson{padding:15px 13px;border-radius:14px;border-bottom-width:4px}.lesson-top>span{font-size:8px}.lesson-top b{font-size:15px}.lesson-art{width:65px;height:65px;font-size:39px;border-radius:15px;margin:17px 0 18px}.lesson-art small{width:28px;height:29px;font-size:18px;right:-14px;border-radius:8px}.lesson h3{font-size:14px;margin-bottom:12px}.lesson-bottom{font-size:8px;gap:3px}.practice-zone{grid-template-columns:1fr 1fr;gap:10px;padding-top:20px}.practice-zone h2{font-size:18px}.practice-zone>div{margin-bottom:8px}.practice-zone button{padding:15px 10px;gap:8px}.practice-zone button strong{font-size:10px}.practice-zone button>span{font-size:19px}.primary,.secondary{font-size:11px}.kanji{border-radius:12px}.study{border-radius:16px}.account-button{font-size:10px;padding:8px 12px}.search-shortcut{border-radius:10px}.book-note{display:none}}@media(max-width:370px){.play-hero h2{font-size:25px}.play-hero{padding:22px 16px}.mascot{right:0;width:95px;transform:scale(.86);transform-origin:right bottom}.play-hero p{max-width:168px}.lesson h3{font-size:13px}.play-heading h1{font-size:26px}}@media(prefers-reduced-motion:reduce){.lesson:hover{transform:none}}
.course-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.course-card{border:2px solid #eadbcb;border-bottom-width:5px;border-radius:20px;overflow:hidden;background:#fff}.course-cover{position:relative;display:flex;align-items:center;justify-content:center;gap:20px;background:#fff3dc;color:#c67d4c;height:170px;font:75px 'Yu Gothic',Meiryo,sans-serif;border-bottom:2px solid #eadbcb}.course-cover>span{font-size:55px;border:2px solid #ead0ae;border-radius:15px;padding:0 10px;transform:rotate(8deg);background:#fff9ed}.course-cover small{position:absolute;bottom:14px;left:20px;font:bold 9px 'Segoe UI',sans-serif;letter-spacing:2px}.course-bunpou{border-color:#d3e4e2}.course-bunpou .course-cover{background:#eaf5f2;color:#6e9e96;border-color:#d3e4e2}.course-bunpou .course-cover>span{border-color:#c6dfd9;background:#f4fbf9}.course-content{padding:25px}.course-level{font-size:9px;letter-spacing:1px;color:#9f8d75;font-weight:600}.course-content h2{font-size:27px;margin:12px 0;letter-spacing:-.6px}.course-content>p{font-size:12px;min-height:42px;line-height:1.8}.course-links{margin:19px 0}.course-links button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 0;background:#fff;border:0;border-bottom:1px solid #eee;color:#465c6b;text-align:left}.course-links strong{font-size:12px}.course-links span{font-size:10px;color:#9aa3a9}.course-links button:hover strong{color:#d3674d}.course-content>.primary,.course-content>.secondary{width:100%;margin-top:10px}.coming-note{padding:23px 19px;border:2px dashed #dbe9e5;border-radius:12px;background:#fafdfb;margin:25px 0}.coming-note strong{font-size:13px;color:#6f938a}.coming-note p{font-size:12px;line-height:1.9}.course-tabs{display:flex;gap:8px;border-bottom:2px solid #f1efeb;padding-bottom:13px;margin:15px 0 23px}.course-tabs button{border:0;border-radius:10px;background:#f7f8f8;color:#7b8c98;font-size:12px;padding:11px 24px;font-weight:600}.course-tabs button.selected{background:#fff0d7;color:#aa7536}.bunpou-symbol{font:55px 'Yu Gothic',sans-serif;color:#88aa9a;margin:15px auto 25px}.empty-state h2{margin-bottom:15px}@media(max-width:900px){.course-grid{gap:17px}.course-content{padding:19px}.course-links button{display:block}.course-links span{display:block;margin-top:6px}.course-cover{font-size:60px;height:145px;gap:12px}.course-cover>span{font-size:45px}.course-content h2{font-size:24px}}@media(max-width:700px){.course-grid{grid-template-columns:1fr;gap:22px}.course-cover{height:145px;font-size:65px}.course-content{padding:22px}.course-content>p{min-height:0}.course-links button{display:flex}.course-links span{margin:0;font-size:9px}.course-tabs button{flex:1;padding:11px 14px;font-size:11px}.coming-note{margin:20px 0}.course-content h2{font-size:26px}}
/* Step-by-step kanji writing */
#stroke-guide{margin:26px 0;padding:20px;background:#fcfaf6;border:1px solid #ede7de;border-radius:20px}.stroke-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.stroke-heading h3{margin:0;font-size:21px}.stroke-heading>span{font-size:12px;font-weight:700;background:#fff0e9;color:#b64637;padding:6px 10px;border-radius:20px}.stroke-hint{font-size:13px;margin:8px 0 16px;color:#68747d}.stroke-stage{width:190px;margin:0 auto 16px;background:white;border:2px solid #e4dfd5;border-radius:18px;overflow:hidden}.stroke-stage svg{display:block;width:100%}.stroke-line{fill:none;stroke:#334956;stroke-width:3.3;stroke-linecap:round;stroke-linejoin:round}.stroke-active{stroke:#e45a49}.stroke-grid{fill:none;stroke:#e7e4dd;stroke-width:.7;stroke-dasharray:3 4}.stroke-dot{fill:#a42f25;stroke:#fff;stroke-width:.7}.stroke-controls{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap}.stroke-controls button{min-height:42px;padding:9px 13px;font-size:13px}.stroke-controls label{display:flex;align-items:center;gap:7px;font-size:12px;color:#68747d}.stroke-controls select{padding:8px;background:#fff;border:1px solid #ddd7ce;border-radius:9px;color:#334956;font:inherit}.stroke-status{text-align:center;font-weight:700;font-size:13px;margin:14px 0}.stroke-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(65px,1fr));gap:8px}.stroke-steps button{min-width:0;position:relative;padding:4px 4px 7px;background:white;border:1.5px solid #e6e1d8;border-radius:12px;color:#64717a;cursor:pointer}.stroke-steps button[aria-pressed=true]{border-color:#e45a49;background:#fff2ed;box-shadow:0 2px 0 #e45a49}.stroke-steps svg{display:block;width:100%}.stroke-steps span{font-size:11px;font-weight:700}.stroke-key{font-size:11px;color:#65727b;display:flex;align-items:center;justify-content:center;gap:6px;margin:16px 0 8px}.stroke-key span{color:#e45a49}.stroke-key b{color:#334956;margin-left:8px}.stroke-credit{display:block;text-align:center;font-size:10px;color:#79828a}.stroke-credit a{color:inherit}#stroke-guide button:focus-visible{outline:3px solid #345e8c;outline-offset:3px}#stroke-guide button:disabled{opacity:.35;cursor:default}@media(max-width:480px){#stroke-guide{padding:14px}.stroke-stage{width:160px}.stroke-controls label{width:100%;justify-content:center;margin-top:4px}.stroke-key{flex-wrap:wrap}}
.kanji-title{text-align:center;clear:both;padding-top:8px}.kanji-title .big{margin-bottom:0}.title-romaji{margin:0 0 10px;color:#d55745;font-size:24px;font-weight:800;letter-spacing:.03em}.kanji-title h2{margin:0 0 24px;font-size:22px}.reading-romaji{display:block;margin-top:7px;color:#6c7880;font-size:13px;line-height:1.6}.card-romaji{display:block;color:#bd5141;font-size:14px;font-weight:700;margin:-4px 0 10px}.jukugo-section{margin:26px 0}.jukugo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.jukugo-heading h3{margin:0;font-size:23px}.jukugo-heading h3 span{font-size:16px;color:#a7aba7;margin-left:7px}.jukugo-heading>span{font-size:12px;color:#6e7b83}.jukugo-intro{font-size:13px;color:#7b858b;margin:8px 0 14px}.jukugo-list{padding:0;margin:0;list-style:none;display:grid;gap:10px}.jukugo-list li{background:#fff;border:1px solid #e5e8e5;border-left:4px solid #edb69d;border-radius:13px;padding:16px 18px}.jukugo-word{font-size:25px;font-weight:700;color:#293e4c;line-height:1.5;overflow-wrap:anywhere}.jukugo-kana{font-size:14px;color:#526873;margin-top:3px}.jukugo-romaji{font-size:13px;color:#bd5141;margin-top:3px}.jukugo-list li p{font-size:14px;color:#344b58;margin:9px 0 0}