@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap";:root{color:#262626;font-synthesis:none;--ink:#262626;--muted:#77756f;--line:#e8e4dc;--paper:#fffdf9;--accent:#d85b4d;--soft:#f4e8e0;background:#f7f5f0;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{background:#f7f5f0;margin:0}.app-shell{min-height:100vh;display:flex}.sidebar{background:#eeece5;border-right:1px solid #e4e0d8;flex-direction:column;flex-shrink:0;width:255px;padding:29px 17px 20px;display:flex}.brand{align-items:center;gap:11px;padding:0 12px 37px;display:flex}.brand-mark{color:#fff;background:#cf6857;border-radius:11px;place-items:center;width:38px;height:38px;font-family:serif;font-size:22px;display:grid;box-shadow:0 4px 10px #cf68572e}.brand strong,.mobile-brand strong{letter-spacing:-.7px;font-size:18px;display:block}.brand strong span,.mobile-brand span{color:#ce6656}.brand small{color:#99968d;letter-spacing:.3px;margin-top:2px;font-size:9px;display:block}.sidebar-label{color:#a3a097;letter-spacing:1.5px;padding:0 14px 13px;font-size:9px;font-weight:700}.nav-item{color:#76736c;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:9px;align-items:center;gap:13px;width:100%;margin:2px 0;padding:12px 14px;font-family:inherit;font-size:13px;transition:all .2s;display:flex}.nav-item:hover{color:var(--ink);background:#e6e3dc}.nav-item.active{color:#ba594b;background:#f8f4ed;font-weight:700;box-shadow:0 5px 12px #827a6620}.nav-arrow{margin-left:auto}.sidebar-bottom{margin-top:auto}.tip-card{color:#bd6555;background:#f8f4ed;border:1px solid #e6e0d5;border-radius:11px;padding:15px 14px}.tip-card strong{color:#3b3832;margin:10px 0 6px;font-size:11px;display:block}.tip-card p{color:#858078;margin:0;font-size:10px;line-height:1.55}.sidebar-foot{color:#8c8980;border-top:1px solid #dfdcd5;margin:23px 6px 0;padding:17px 7px 0;font-size:10px}.sidebar-foot span{color:#68ab81;vertical-align:-1px;margin-right:6px;font-size:14px}.main-content{flex:1;min-width:0}.topbar{background:#faf9f6;border-bottom:1px solid #e9e5dc;justify-content:flex-end;align-items:center;height:78px;padding:0 7%;display:flex}.top-actions{align-items:center;gap:21px;display:flex}.streak{color:#8d8982;align-items:center;gap:5px;font-size:11px;display:flex}.streak svg{color:#de7656}.icon-button{color:#79766f;cursor:pointer;background:0 0;border:0}.avatar{color:#9b5247;background:#e4c2b1;border-radius:50%;place-items:center;width:30px;height:30px;font-size:12px;font-weight:700;display:grid}.mobile-brand{display:none}.page{max-width:1120px;margin:auto;padding:44px 7% 70px}.hero{background:#f0e0d4;border-radius:15px;min-height:255px;padding:39px 43px;display:flex;position:relative;overflow:hidden}.eyebrow{color:#c65f51;letter-spacing:1.6px;align-items:center;gap:8px;font-size:9px;font-weight:700;display:flex}.eyebrow i{background:#d96757;border-radius:50%;width:6px;height:6px;display:inline-block}.hero h1,.page-title h1,.practice-intro h1,.result-page h1{letter-spacing:-1.6px;color:#2e2b28;margin:14px 0 10px;font-family:Fraunces,serif;font-size:35px;line-height:1.1}.hero h1 em,.page-title h1 em{color:#c4574b;font-style:normal}.hero p,.page-title p{color:#77716a;margin:0;font-size:12px;line-height:1.6}.hero-buttons{gap:9px;margin-top:25px;display:flex}.primary,.secondary{cursor:pointer;border-radius:7px;justify-content:center;align-items:center;gap:8px;padding:11px 15px;font-family:inherit;font-size:11px;font-weight:700;transition:all .2s;display:inline-flex}.primary{color:#fff;background:#cf604f;border:1px solid #d75e50;box-shadow:0 4px 9px #bd594833}.primary:hover{background:#bd5143}.secondary{color:#b15b4e;background:#f9eee7;border:1px solid #dfc5b7}.secondary:hover{background:#fff}.hero-art{width:48%;position:absolute;top:0;bottom:0;right:0;overflow:hidden}.sun{background:#e7a283;border-radius:50%;width:118px;height:118px;position:absolute;top:42px;right:119px}.mountain{width:185px;height:185px;position:absolute;bottom:-55px;transform:rotate(45deg)}.mountain.back{background:#d6a48d;right:115px}.mountain.front{background:#b97967;right:4px}.torii{border-top:7px solid #bd6659;width:86px;height:115px;position:absolute;bottom:40px;right:76px}.torii:before,.torii:after{content:"";background:#bd6659;height:9px;position:absolute;top:-19px}.torii:before{width:106px;left:-10px}.torii:after{width:94px;top:-7px;left:-4px}.torii i{background:#bd6659;width:9px;height:98px;position:absolute;bottom:0}.torii i:first-child{left:11px}.torii i:nth-child(2){right:11px}.torii b{background:#bd6659;height:8px;position:absolute;top:43px;left:0;right:0}.art-kana{color:#f7d9c9;font:600 23px serif;position:absolute}.art-kana.one{top:49px;right:43px}.art-kana.two{font-size:16px;top:93px;right:178px}.art-kana.three{font-size:17px;bottom:41px;right:214px}.section-head{justify-content:space-between;align-items:end;margin:39px 0 20px;display:flex}.section-head h2,.kana-toolbar h2,.setup-main h2{letter-spacing:-.5px;margin:0 0 5px;font-size:18px}.section-head p,.kana-toolbar p{color:#9a968d;margin:0;font-size:11px}.text-button{color:#c45a4c;cursor:pointer;background:0 0;border:0;align-items:center;gap:5px;font-family:inherit;font-size:10px;font-weight:700;display:flex}.stats-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.stat-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;gap:11px;min-height:91px;padding:15px 14px;display:flex;position:relative}.stat-icon{border-radius:8px;flex-shrink:0;place-items:center;width:31px;height:31px;display:grid}.stat-icon svg{width:16px}.stat-icon.mint{color:#5b9e79;background:#dcece3}.stat-icon.peach{color:#dc7556;background:#f7e2d6}.stat-icon.lavender{color:#7b68af;background:#e6e1f2}.stat-icon.yellow{color:#ad8b30;background:#f2e8c9}.stat-copy strong{font-family:Fraunces,serif;font-size:21px;line-height:1;display:block}.stat-copy span{margin-top:5px;font-size:10px;font-weight:700;display:block}.stat-copy small{color:#9c988f;margin-top:3px;font-size:9px;display:block}.mini-progress{background:#ece9e2;border-radius:4px;height:3px;position:absolute;bottom:9px;left:14px;right:14px}.mini-progress i,.bar i{background:#d36354;border-radius:4px;height:100%;display:block}.lesson-heading{margin-top:39px}.lesson-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.lesson-card{border:1px solid var(--line);background:var(--paper);text-align:left;cursor:pointer;border-radius:10px;gap:12px;min-height:175px;padding:18px 14px;transition:all .2s;display:flex;position:relative}.lesson-card:hover{border-color:#d89b8e;transform:translateY(-2px)}.lesson-symbol{border-radius:9px;flex-shrink:0;place-items:center;width:39px;height:39px;font:700 12px Fraunces,serif;display:grid}.lesson-symbol.pink{color:#c96553;background:#f1ddd3}.lesson-symbol.blue{color:#618aa4;background:#e0e9ef}.lesson-symbol.green{color:#629571;background:#deece1}.lesson-content{flex:1}.lesson-tag{color:#a6a198;letter-spacing:1.2px;font-size:8px;font-weight:700}.lesson-content h3{margin:9px 0 5px;font-family:Fraunces,serif;font-size:17px}.lesson-content p{color:#8b877f;margin:0;font-size:10px;line-height:1.5}.lesson-progress{position:absolute;bottom:17px;left:66px;right:17px}.lesson-progress div:first-child{color:#9b968e;justify-content:space-between;margin-bottom:5px;font-size:9px;display:flex}.lesson-progress b{color:#c95e50}.bar{background:#ebe8e1;border-radius:4px;height:4px;overflow:hidden}.lesson-chevron{color:#b5b0a7;width:15px;position:absolute;top:22px;right:14px}.page-title{justify-content:space-between;align-items:end;margin-bottom:31px;display:flex}.segmented{background:#eae8e2;border-radius:8px;margin-bottom:31px;padding:4px;display:inline-flex}.segmented button,.progress-tabs button{color:#908c83;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:9px 18px;font:600 11px DM Sans}.segmented button.selected,.progress-tabs button.active{color:#c2574a;background:#fffdf9;box-shadow:0 2px 7px #5c514524}.lesson-tabs{grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 28px;display:grid}.lesson-tabs button{border:1px solid var(--line);background:var(--paper);text-align:left;color:#77736c;cursor:pointer;border-radius:9px;gap:5px;padding:13px 14px;font-family:inherit;transition:all .2s;display:grid}.lesson-tabs button:hover{background:#fff8f4;border-color:#d89b8e}.lesson-tabs button.active{color:#bf594b;background:#fff5f0;border-color:#d46a5b;box-shadow:0 3px 8px #c86a5b1c}.lesson-tabs strong{font-size:11px;line-height:1.25}.lesson-tabs small{color:#9d988f;font-size:9px;line-height:1.25}.lesson-tabs button.active small{color:#c57a6d}.kana-toolbar{justify-content:space-between;align-items:end;margin-bottom:17px;display:flex}.kana-toolbar>span{color:#99958d;background:#eeeae3;border-radius:5px;padding:7px 10px;font-size:10px}.kana-table{background:var(--paper);border:1px solid var(--line);border-radius:11px;overflow:hidden}.kana-row{border-bottom:1px solid #f0ede8;min-height:88px;display:flex}.kana-row:last-child{border:0}.row-label{color:#c65c4e;align-items:center;width:86px;padding:14px;font-family:Fraunces,serif;font-size:14px;display:flex}.row-label small{color:#aaa59c;margin:4px 0 0 5px;font:9px DM Sans;display:block}.kana-cells{flex:1;grid-template-columns:repeat(5,1fr);align-items:center;gap:8px;padding:10px 14px;display:grid}.kana-grid{background:var(--paper);border:1px solid var(--line);border-radius:11px;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:16px;display:grid}.kana-card{cursor:pointer;background:#fffdf9;border:1px solid #e7e2da;border-radius:7px;flex-direction:column;justify-content:center;align-items:center;gap:4px;height:74px;transition:all .15s;display:flex}.kana-card:hover{background:#fff8f4;border-color:#d36a5b;transform:scale(1.03)}.kana-card span{font:26px serif}.kana-card b{color:#a39d94;font-size:10px;font-weight:600}.kana-grid .kana-card span{font-size:29px}.kana-grid .kana-card b{font-size:11px}.modal-backdrop{z-index:5;background:#2d241d7a;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{text-align:center;background:#fffdf9;border-radius:15px;width:min(350px,100%);padding:30px;position:relative;box-shadow:0 15px 50px #2c1b1533}.close{color:#847f77;cursor:pointer;background:#f1eee8;border:0;border-radius:50%;place-items:center;width:28px;height:28px;display:grid;position:absolute;top:13px;right:13px}.modal-kana{color:#c65d4d;font:65px serif}.modal-romaji{color:#9b968d;margin:4px 0 19px;font-size:13px}.sound-button{color:#c45a4c;cursor:pointer;background:#fff4ef;border:1px solid #eccfc2;border-radius:7px;align-items:center;gap:7px;padding:10px 13px;font:600 10px DM Sans;display:inline-flex}.example{text-align:left;background:#f5f1e9;border-radius:9px;margin-top:25px;padding:15px}.example small{color:#a09b91;letter-spacing:1px;font-size:8px;display:block}.example strong{color:#302d29;margin:5px 0;font:24px serif;display:block}.example span{color:#8d8880;font-size:11px}.modal-note{color:#99938a;margin:19px 0 0;font-size:10px;line-height:1.5}.practice-intro{align-items:center;gap:16px;margin-bottom:34px;display:flex}.practice-icon{color:#bd6855;background:#eadfd2;border-radius:13px;place-items:center;width:58px;height:58px;display:grid}.practice-intro h1{margin-top:8px}.setup-grid{grid-template-columns:1fr 270px;gap:18px;display:grid}.setup-main,.practice-side{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:26px}.muted{color:#9b968e;margin:0;font-size:11px}.type-choice{grid-template-columns:1fr 1fr;gap:11px;margin:24px 0;display:grid}.type-choice button{border:1px solid var(--line);text-align:left;cursor:pointer;background:#fffdf9;border-radius:9px;align-items:center;gap:12px;padding:15px;display:flex}.type-choice button.chosen{background:#fff7f3;border-color:#d46a5b}.type-choice button>span{color:#bd6555;font:30px serif}.type-choice button div{gap:4px;display:grid}.type-choice b{font-size:12px}.type-choice small{color:#9b968e;font-size:9px}.type-choice svg{color:#c75b4c;width:17px;margin-left:auto}.mode-info{color:#8e8980;background:#f6f2eb;border-radius:8px;align-items:center;gap:10px;padding:13px;display:flex}.mode-info svg{color:#bd6957}.mode-info div{gap:3px;display:grid}.mode-info b{color:#57534d;font-size:10px}.mode-info span{font-size:9px}.start-button{margin-top:25px}.practice-side{background:#f1e5db;border:0}.side-head{letter-spacing:1.2px;color:#bf6554;align-items:center;gap:7px;font-size:9px;font-weight:700;display:flex}.practice-side h3{margin:21px 0 8px;font:700 18px Fraunces,serif}.practice-side p{color:#8f8177;margin:0 0 25px;font-size:10px;line-height:1.6}.side-stat{border-top:1px solid #e1cfc2;justify-content:space-between;align-items:end;margin-top:13px;padding:13px 0 0;display:flex}.side-stat span{color:#9d8679;font-size:10px}.side-stat strong{color:#ad5b4b;font:22px Fraunces,serif}.side-stat small{color:#9c867c;font:10px DM Sans}.quiz-page{max-width:700px}.quiz-top{justify-content:space-between;align-items:center;margin-bottom:34px;display:flex}.back-button{color:#8d8980;cursor:pointer;background:0 0;border:0;font:600 11px DM Sans}.quiz-progress{width:300px}.quiz-progress span{letter-spacing:1px;color:#b35c4f;margin-bottom:7px;font-size:9px;font-weight:700;display:block}.quiz-progress i{color:#a8a29a;font-style:normal}.quiz-score{color:#bf6454;align-items:center;gap:4px;font-size:11px;font-weight:700;display:flex}.quiz-card{background:var(--paper);border:1px solid var(--line);text-align:center;border-radius:14px;padding:38px 45px}.question-label{color:#9d988f;letter-spacing:1.5px;font-size:9px;font-weight:700}.question-char{color:#c65d4e;margin:19px 0 5px;font:85px serif}.question-sound button{color:#c45b4d;cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;font:600 10px DM Sans;display:inline-flex}.options{grid-template-columns:1fr 1fr;gap:10px;margin-top:28px;display:grid}.option{border:1px solid var(--line);text-align:left;cursor:pointer;color:#514d47;background:#fffdf9;border-radius:8px;align-items:center;gap:11px;padding:13px;font-family:inherit;display:flex}.option:hover{border-color:#d58477}.option>span{color:#908a80;background:#f0ede7;border-radius:5px;place-items:center;width:23px;height:23px;font-size:10px;display:grid}.option b{font-size:13px}.option svg{margin-left:auto}.option.correct{color:#438152;background:#eef8ef;border-color:#75ad85}.option.correct>span{color:#428051;background:#d8eedc}.option.wrong{color:#bd5448;background:#fff0ed;border-color:#d78377}.quiz-help{color:#aaa59c;justify-content:center;align-items:center;gap:7px;margin-top:18px;font-size:10px;display:flex}.result-page{text-align:center;max-width:620px}.result-badge{color:#bc9337;background:#f2e5c5;border-radius:50%;place-items:center;width:70px;height:70px;margin:30px auto 22px;display:grid}.result-page h1{margin-top:14px}.result-page p{color:#99938a;font-size:11px}.result-score{gap:5px;margin:25px auto;display:grid}.result-score strong{color:#c65d4e;font:65px Fraunces,serif}.result-score span{color:#969087;font-size:11px}.result-actions{justify-content:center;gap:10px;display:flex}.progress-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.file-button{position:relative;overflow:hidden}.file-button input{opacity:0;cursor:pointer;position:absolute;inset:0}.progress-overview{background:var(--paper);border:1px solid var(--line);border-radius:12px;grid-template-columns:1fr 150px 150px;align-items:center;gap:25px;padding:24px;display:grid}.big-progress{align-items:center;gap:19px;display:flex}.ring{background:conic-gradient(#d36555 0 35%,#eeeae3 35%);border-radius:50%;place-items:center;width:76px;height:76px;display:grid;position:relative}.ring:after{content:"";background:var(--paper);border-radius:50%;position:absolute;inset:8px}.ring strong{z-index:1;color:#c65d4e;font:23px Fraunces,serif;position:relative}.ring small{font:10px DM Sans}.big-progress h2{margin:0 0 5px;font:18px Fraunces,serif}.big-progress p{color:#9d988f;margin:0;font-size:10px}.overview-stat{border-left:1px solid var(--line);padding-left:24px}.overview-stat span{color:#9d988f;font-size:10px;display:block}.overview-stat strong{color:#c65d4e;margin-top:6px;font:25px Fraunces,serif;display:block}.progress-tabs{border-bottom:1px solid var(--line);margin:29px 0 13px}.progress-tabs button{border-radius:0;padding:12px 16px}.progress-tabs button.active{box-shadow:inset 0 -2px #c96051}.progress-list{background:var(--paper);border:1px solid var(--line);border-radius:11px;overflow:hidden}.progress-line{border-bottom:1px solid #f0ede7;grid-template-columns:45px 65px 1fr 62px 45px;align-items:center;gap:12px;padding:11px 16px;display:grid}.progress-line:last-child{border:0}.progress-line>strong{color:#c65d4e;font:24px serif}.progress-line>span{color:#8e8980;font-size:10px}.progress-line small{color:#aaa49b;font-size:9px}.progress-line .ok{color:#5eaa79}.not-yet{color:#b4afa8!important;font-size:9px!important}@media (width<=900px){.sidebar{width:210px}.topbar{padding:0 4%}.page{padding-left:4%;padding-right:4%}.hero{padding-left:28px}.stats-grid{grid-template-columns:repeat(2,1fr)}.lesson-grid{grid-template-columns:1fr}.hero-art{opacity:.7}.setup-grid{grid-template-columns:1fr}.practice-side{display:none}}@media (width<=650px){.app-shell{display:block}.sidebar{width:100%;height:auto;padding:8px 10px 7px;display:block}.sidebar .brand,.sidebar-label,.sidebar-bottom{display:none}.sidebar nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;display:grid;overflow:visible}.nav-item{white-space:normal;text-align:center;border-radius:7px;flex-direction:column;justify-content:center;gap:4px;width:100%;margin:0;padding:8px 2px 7px}.nav-item span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:9px;line-height:1.1;overflow:hidden}.nav-arrow{display:none}.topbar{height:54px;padding:0 18px}.mobile-brand{align-items:center;gap:8px;display:flex}.mobile-brand .brand-mark{border-radius:8px;width:29px;height:29px;font-size:17px}.mobile-brand strong{font-size:15px}.topbar{justify-content:space-between}.top-actions{gap:12px}.streak{font-size:10px}.icon-button{display:none}.page{padding:29px 18px 50px}.hero{min-height:390px;padding:25px 21px}.hero h1,.page-title h1{font-size:29px}.hero-art{opacity:.85;width:100%;height:145px;top:auto;bottom:0}.hero-buttons{flex-wrap:wrap}.stats-grid{gap:8px}.stat-card{gap:7px;padding:12px 9px}.stat-icon{width:27px;height:27px}.stat-copy strong{font-size:18px}.stat-copy span{font-size:9px}.lesson-card{min-height:160px}.page-title{display:block}.page-title>.primary,.page-title>.secondary{margin-top:17px}.kana-row{min-height:75px}.row-label{width:48px;padding:27px 7px 7px;font-size:11px;display:block}.row-label small{display:none}.kana-cells{gap:4px;padding:7px}.kana-card{height:58px}.kana-card span{font-size:21px}.kana-card b{font-size:8px}.segmented{margin-bottom:22px}.type-choice{grid-template-columns:1fr}.setup-main{padding:20px}.quiz-card{padding:28px 17px}.question-char{font-size:70px}.quiz-progress{width:180px}.options{gap:7px}.option{gap:6px;padding:11px 8px}.option b{font-size:11px}.progress-overview{grid-template-columns:1fr 1fr;gap:16px;padding:18px}.big-progress{grid-column:1/-1}.overview-stat{padding-left:15px}.progress-line{grid-template-columns:32px 45px 1fr 48px 20px;gap:6px;padding:9px}.progress-line>strong{font-size:20px}.progress-line small,.not-yet{font-size:8px!important}.result-actions{flex-wrap:wrap}.lesson-tabs{grid-template-columns:1fr 1fr;gap:7px;margin-bottom:22px}.lesson-tabs button{padding:10px}.lesson-tabs strong{font-size:10px}.lesson-tabs small{font-size:8px}.kana-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px}.kana-grid .kana-card{height:62px}.kana-grid .kana-card span{font-size:24px}.kana-grid .kana-card b{font-size:8px}}