:root{--sakura:#ffb7c5;--sakura-light:#ffdce3;--indigo:#2c3e50;--indigo-light:#34495e;--matcha:#8da182;--matcha-light:#a9be9d;--bg-color:#f7f9fa;--text-main:#2d3436;--text-muted:#636e72;--card-bg:#fff;--primary:var(--indigo);--primary-hover:var(--indigo-light);--accent:#e74c3c;--success:#27ae60;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:30px;--shadow-sm:0 2px 4px #0000000d;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 10px 25px #0000001a;--shadow-hover:0 15px 35px #2c3e5026;--transition:all .3s cubic-bezier(.25, .8, .25, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Inter,Noto Sans JP,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;outline:none;font-family:inherit}.glass{-webkit-backdrop-filter:blur(10px);background:#ffffffb3;border:1px solid #ffffff4d}.container{max-width:1000px;margin:0 auto;padding:0 20px}.fade-in{animation:.5s ease-out forwards fadeIn}.slide-up{animation:.6s cubic-bezier(.16,1,.3,1) forwards slideUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.btn{border-radius:var(--radius-xl);transition:var(--transition);justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:1rem;font-weight:600;display:inline-flex}.btn-primary{background-color:var(--primary);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{background-color:var(--primary-hover);box-shadow:var(--shadow-hover);transform:translateY(-2px)}.btn-outline{color:var(--primary);border:2px solid var(--primary);background-color:#0000}.btn-outline:hover{background-color:var(--primary);color:#fff}.activity-wrapper{background:#fff;border-radius:1rem;width:100%;max-width:800px;margin-top:3rem;margin-left:auto;margin-right:auto;padding:1.5rem;box-shadow:0 4px 6px #0000000d}.activity-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.activity-header h3{color:#333;margin:0;font-size:1.25rem}.total-count{color:#666;font-size:.9rem;font-weight:600}.activity-graph-container{align-items:flex-start;gap:.5rem;display:flex}.days-of-week{color:#999;text-align:right;grid-template-rows:repeat(7,14px);gap:4px;padding-right:.5rem;font-size:.7rem;display:grid}.days-of-week span{height:14px;line-height:14px}.grid-scroll{padding-bottom:.5rem;overflow-x:auto}.grid-container{grid-template-rows:repeat(7,14px);grid-auto-flow:column;gap:4px;display:grid}.grid-cell{cursor:pointer;background-color:#ebedf0;border-radius:3px;width:14px;height:14px;transition:transform .1s}.grid-cell:hover{z-index:10;outline:1px solid #0000001a;transform:scale(1.2)}.level-0{background-color:#ebedf0}.level-1{background-color:#9be9a8}.level-2{background-color:#40c463}.level-3{background-color:#30a14e}.level-4{background-color:#216e39}.home-container{max-width:1200px;margin:0 auto;padding:40px 0}.hero{text-align:center;margin-bottom:60px}.title{color:var(--indigo);letter-spacing:-1px;margin-bottom:10px;font-size:3rem;font-weight:800}.subtitle{color:var(--text-muted);font-size:1.2rem}.levels-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;padding:0 20px;display:grid}.level-card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:var(--transition);cursor:pointer;flex-direction:column;align-items:flex-start;gap:15px;padding:30px;display:flex}.level-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-8px)}.level-card h2{color:var(--indigo);font-size:1.5rem}.level-card p{color:var(--text-muted);flex-grow:1}.level-icon{color:#fff;width:50px;height:50px;box-shadow:var(--shadow-sm);border-radius:12px;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;display:flex}.level-card .btn{width:100%;margin-top:10px}.level-card:hover .btn{background-color:currentColor;color:#fff!important}.quiz-container{flex-direction:column;max-width:800px;min-height:100vh;margin:0 auto;padding:20px;display:flex}.quiz-header{align-items:center;gap:20px;margin-bottom:40px;display:flex}.back-btn{border-color:var(--text-muted);color:var(--text-muted);padding:8px 16px;font-size:.9rem}.back-btn:hover{background-color:var(--text-muted);color:#fff}.progress-container{flex-grow:1;align-items:center;gap:15px;display:flex}.progress-bar{border-radius:var(--radius-xl);background-color:#e1e8ed;flex-grow:1;height:10px;overflow:hidden}.progress-fill{border-radius:var(--radius-xl);height:100%;transition:width .5s ease-out}.progress-text{color:var(--text-muted);font-weight:600}.question-card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex-direction:column;gap:20px;padding:40px;display:flex}.question-type{background-color:var(--bg-color);color:var(--indigo);border-radius:var(--radius-md);letter-spacing:1px;align-self:flex-start;padding:4px 12px;font-size:.8rem;font-weight:700}.kanji-display{text-align:center;color:var(--indigo);margin:20px 0;font-size:4rem}.question-text{text-align:center;margin-bottom:30px;font-size:1.5rem;font-weight:500}.options-grid{grid-template-columns:1fr 1fr;gap:15px;display:grid}@media (width<=600px){.options-grid{grid-template-columns:1fr}}.option-btn{border-radius:var(--radius-md);transition:var(--transition);text-align:left;color:var(--text-main);background-color:#fff;border:2px solid #e1e8ed;padding:15px 20px;font-size:1.1rem}.option-btn:hover:not(:disabled){border-color:var(--indigo-light);background-color:#f8fafc}.option-btn.selected{border-color:var(--primary);background-color:#f0f4f8;box-shadow:0 0 0 4px #2c3e501a}.option-btn.correct{border-color:var(--success);color:var(--success);background-color:#ebf7f0}.option-btn.incorrect{border-color:var(--accent);color:var(--accent);background-color:#fdf2f1}.explanation{border-radius:var(--radius-md);border-left:4px solid var(--indigo);background-color:#f8fafc;margin-top:20px;padding:20px}.explanation h4{color:var(--indigo);margin-bottom:8px}.quiz-actions{justify-content:flex-end;margin-top:30px;display:flex}.next-btn{background-color:var(--indigo)}.timer{color:var(--indigo);background-color:var(--card-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);align-items:center;gap:8px;padding:8px 16px;font-size:1.2rem;font-weight:700;display:flex}.timer-warning{color:var(--accent);animation:1s infinite pulse}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.result-container{flex-direction:column;gap:40px;max-width:800px;margin:0 auto;padding:40px 20px;display:flex}.score-card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;flex-direction:column;align-items:center;padding:50px 30px;display:flex}.score-title{color:var(--indigo);margin-bottom:30px;font-size:2rem}.score-circle{border:10px solid var(--primary);width:200px;height:200px;box-shadow:var(--shadow-sm);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;margin-bottom:25px;display:flex}.score-number{color:var(--text-main);font-size:3.5rem;font-weight:800;line-height:1}.score-text{color:var(--text-muted);margin-top:5px;font-size:1.2rem}.score-message{color:var(--indigo);margin-bottom:10px;font-size:1.8rem}.score-level{color:var(--text-muted);background-color:var(--bg-color);border-radius:var(--radius-xl);margin-bottom:30px;padding:6px 16px;font-size:1.1rem}.result-actions{gap:15px;display:flex}.review-section{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:40px}.review-section h3{color:var(--indigo);border-bottom:2px solid var(--bg-color);margin-bottom:25px;padding-bottom:15px;font-size:1.5rem}.review-list{flex-direction:column;gap:20px;display:flex}.review-item{border-radius:var(--radius-md);background-color:#fafbfc;border:1px solid #e1e8ed;padding:20px}.review-item.correct{border-left:5px solid var(--success)}.review-item.incorrect{border-left:5px solid var(--accent)}.review-header{justify-content:space-between;margin-bottom:15px;font-weight:600;display:flex}.q-num{color:var(--text-muted);background-color:#e1e8ed;border-radius:4px;padding:2px 8px;font-size:.9rem}.r-question{margin-bottom:15px;font-size:1.2rem;font-weight:500}.r-details{border-radius:var(--radius-sm);background-color:#fff;border:1px solid #f0f4f8;padding:15px}.r-details p{color:var(--text-main);margin-bottom:8px}.r-correct-answer{color:var(--success)}.r-explanation{border-top:1px dashed #e1e8ed;padding-top:15px;font-style:italic;color:var(--text-muted)!important;margin-top:15px!important}.package-container{max-width:1000px;margin:0 auto;padding:40px 0}.back-btn-home{position:absolute;top:40px;left:40px}.packages-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;padding:0 20px;display:grid}.package-card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:var(--transition);cursor:pointer;flex-direction:column;align-items:flex-start;gap:15px;padding:30px;display:flex}.package-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-8px)}.package-card h2{color:var(--indigo);font-size:1.5rem}.package-card p{color:var(--text-muted);flex-grow:1}.pkg-icon{color:#fff;width:50px;height:50px;box-shadow:var(--shadow-sm);border-radius:12px;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;display:flex}.package-card .btn{width:100%;margin-top:10px}.package-card:hover .btn{background-color:currentColor;color:#fff!important}