:root{--primary-green: #58a700;--primary-green-dark: #468400;--text-light: #e2e8f0;--text-medium: #a0aec0;--background-dark: #1a202c;--background-light: #2d3748;--surface-light: #4a5568;--feedback-correct: #48bb78;--feedback-incorrect: #f56565;--feedback-new: #4299e1;--feedback-mastered: #9f7aea}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;font-family:Noto Sans JP,sans-serif;background-color:var(--background-dark);color:var(--text-light);overflow-x:hidden}.landing-page-wrapper{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center}.main-header{position:absolute;top:0;left:0;width:100%;padding:20px 50px;display:flex;justify-content:space-between;align-items:center;z-index:10;box-sizing:border-box}.logo-container{display:flex;align-items:center;gap:10px}.logo-image{height:80px;width:auto}.logo-title{font-size:1.5rem;font-weight:700;color:#fff;text-decoration:none;background:linear-gradient(90deg,#a5d6a7,var(--primary-green),var(--text-light));background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradient-animation 4s ease infinite}.main-nav{display:flex;gap:30px}.nav-link{color:var(--text-medium);text-decoration:none;font-size:1rem;font-weight:700;position:relative;padding-bottom:5px}.nav-link:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:var(--primary-green);transform:scaleX(0);transform-origin:bottom right;transition:transform .25s ease-out}.nav-link:hover:after{transform:scaleX(1);transform-origin:bottom left}.expressive-content{text-align:center;max-width:800px}.expressive-title{font-size:4.5rem;font-weight:700;color:var(--text-light);line-height:1.2;margin-bottom:25px}.expressive-title span{display:inline-block;opacity:0;transform:translateY(20px);animation:fadeInUp .5s ease forwards;margin:0 5px}.expressive-subtitle{font-size:1.25rem;color:var(--text-medium);margin-bottom:40px;max-width:600px;margin-left:auto;margin-right:auto;opacity:0;animation:fadeInUp .5s ease .6s forwards}.home-actions{display:flex;flex-direction:column;align-items:center;gap:20px}.profile-button-home{font-size:1.2rem;color:var(--text-light);text-decoration:none;padding:10px 20px;border:1px solid var(--surface-light);border-radius:25px;transition:background-color .2s,color .2s}.profile-button-home:hover{background-color:var(--surface-light);color:#fff}.start-quiz-button-new{display:inline-block;background-color:var(--primary-green);color:#fff;padding:20px 40px;text-decoration:none;font-size:1.5rem;border-radius:35px;font-weight:700;border:none;cursor:pointer;transition:background-color .3s ease,transform .2s ease,box-shadow .3s ease;box-shadow:0 8px 20px #58a70066}.start-quiz-button-new:hover{background-color:var(--primary-green-dark);transform:translateY(-5px) scale(1.02);box-shadow:0 12px 25px #58a70099}.level-selection-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px}.level-title,.category-title{font-size:3rem;color:var(--primary-green);margin-bottom:50px;text-shadow:0 0 10px rgba(88,167,0,.5)}.level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px;width:100%;max-width:800px}.level-card{background:var(--background-light);color:var(--text-light);text-decoration:none;font-weight:700;padding:25px 20px;border-radius:10px;text-align:center;transition:transform .2s ease,background-color .2s ease;box-shadow:0 5px 15px #0000004d;border:none;cursor:pointer;font-family:inherit;margin:0 auto;width:100%;min-height:120px;display:flex;justify-content:center;align-items:center}.level-card-name{font-size:2.5rem}.level-card:hover{transform:translateY(-5px);background-color:var(--primary-green)}.creator-card{grid-column:1 / -1;border:2px dashed var(--surface-light);background:transparent;text-align:left;display:flex;align-items:center;padding:25px}.category-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.category-card{background:var(--background-light);color:var(--text-light);text-decoration:none;font-size:1.5rem;padding:30px 20px;border-radius:10px;transition:transform .2s,background-color .2s}.category-card:hover{transform:translateY(-5px);background-color:var(--surface-light)}.difficulty-selection-container{text-align:center;width:100%;max-width:600px}.difficulty-title{font-size:2.5rem;color:var(--primary-green);margin-bottom:40px}.difficulty-grid{display:flex;flex-direction:column;gap:20px;margin-bottom:40px}.difficulty-button{background:var(--background-light);color:var(--text-light);border:2px solid var(--surface-light);font-size:1.8rem;font-weight:700;padding:25px;border-radius:10px;cursor:pointer;transition:background-color .2s,transform .2s;display:flex;justify-content:center;align-items:center;gap:15px}.difficulty-button:not(:disabled):hover{background-color:var(--surface-light);transform:translateY(-3px)}.difficulty-button.locked{background-color:var(--background-dark);color:var(--surface-light);cursor:not-allowed;border-color:var(--background-light)}.back-to-levels-button{background:none;border:none;color:var(--text-medium);cursor:pointer;font-size:1rem}.back-to-levels-button:hover{color:#fff}.quiz-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.quiz-card{background:var(--background-light);padding:40px;border-radius:15px;width:100%;max-width:600px;box-shadow:0 10px 30px #0006;text-align:center}.quiz-title{color:var(--primary-green);margin-bottom:10px}.question-text{font-size:3rem;color:var(--text-light);margin-bottom:40px}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:30px}.option-button{background:var(--surface-light);color:var(--text-light);border:none;padding:20px;font-size:1.2rem;border-radius:8px;cursor:pointer;transition:background-color .2s}.option-button:hover:not(:disabled){background:#718096}.option-button.correct{background:var(--feedback-correct);color:#fff}.option-button.incorrect{background:var(--feedback-incorrect);color:#fff}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:var(--background-light);padding:40px;border-radius:15px;text-align:center;box-shadow:0 10px 30px #00000080;animation:fadeIn .3s ease-out}.modal-score-display{font-size:4rem;font-weight:700;color:var(--primary-green);margin-bottom:30px}.results-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.results-card{background:var(--background-light);padding:50px;border-radius:15px;text-align:center;box-shadow:0 10px 30px #0006}.percentage-circle{width:150px;height:150px;border-radius:50%;background:var(--surface-light);display:flex;justify-content:center;align-items:center;margin:0 auto 10px;font-size:2.5rem;font-weight:700;color:var(--text-light);border:5px solid var(--primary-green)}.action-button{display:block;padding:15px 20px;border-radius:8px;text-decoration:none;color:#fff;font-weight:700;font-size:1.1rem;transition:transform .2s,background-color .2s;border:none;cursor:pointer;font-family:inherit}.action-button:hover{transform:translateY(-2px)}.action-button.restart{background-color:var(--surface-light)}.action-button.next-level{background-color:var(--primary-green)}.action-button.home{background-color:var(--background-light);border:1px solid var(--surface-light)}.profile-container{max-width:1100px;margin:40px auto;padding:20px}.profile-title{font-size:3rem;color:var(--primary-green);text-align:center;margin-bottom:40px}.history-item{background:var(--background-light);padding:20px;border-radius:8px;box-shadow:0 4px 10px #0003}.history-item-header{border-bottom:1px solid var(--surface-light)}.progress-bar-container{background:var(--surface-light);border-radius:5px;height:8px;overflow:hidden}.progress-bar-fill{background-color:var(--primary-green);height:100%;border-radius:5px}.profile-grid-container{display:grid;grid-template-columns:2fr 1fr;gap:30px;align-items:start}.profile-main-content{display:flex;flex-direction:column;gap:20px}.profile-sidebar{background-color:var(--background-dark);padding:20px;border-radius:12px;position:sticky;top:100px}.profile-section{width:100%;margin-bottom:20px}.profile-subtitle{font-size:2rem;color:var(--text-light);padding-bottom:15px;border-bottom:1px solid var(--surface-light);margin-bottom:25px;margin-top:0}.custom-quiz-card{position:relative;text-align:center;padding:10px;background:var(--background-light);border-radius:12px;display:flex;flex-direction:column}.custom-quiz-date{font-size:.8rem;color:var(--text-medium);margin:0 0 15px;text-align:right}.custom-quiz-title{font-size:1.5rem;font-weight:700;color:var(--text-light);margin:0 0 20px;flex-grow:1}.custom-quiz-meta{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--surface-light);border-bottom:1px solid var(--surface-light);margin-bottom:20px}.meta-tag{font-weight:700;padding:4px 10px;border-radius:15px;font-size:.8rem;text-transform:capitalize}.meta-tag.tag-kanji{background-color:#9f7aea33;color:#c0a7f7}.meta-tag.tag-vocabulary{background-color:#4299e133;color:#70b3f0}.meta-count{font-size:.9rem;color:var(--text-medium)}.custom-quiz-actions{margin-top:auto}.custom-quiz-actions .action-button{display:flex;justify-content:center}.filter-tabs{display:grid;grid-template-columns:repeat(3,1fr);background-color:var(--background-dark);border-radius:8px;padding:5px;margin-bottom:25px}.filter-tabs button{padding:10px;border:none;background-color:transparent;color:var(--text-medium);font-weight:700;cursor:pointer;border-radius:6px;transition:background-color .2s,color .2s;font-size:.9rem}.filter-tabs button:hover{background-color:var(--surface-light)}.filter-tabs button.active{background-color:var(--primary-green);color:#fff}.history-item-actions{margin-top:15px;padding-top:15px;border-top:1px solid var(--surface-light);text-align:right}.history-item-actions .action-button{padding:8px 15px;font-size:.9rem}.unattended-item{display:flex;justify-content:space-between;align-items:center;padding:15px 20px}.unattended-item h3{margin:0;font-size:1.1rem;color:var(--text-light);text-align:left}.unattended-item .action-button{padding:8px 20px;font-size:.9rem;flex-shrink:0}.profile-sidebar .history-list{max-height:55vh;overflow-y:auto;padding-right:10px;gap:15px}.profile-sidebar .history-list::-webkit-scrollbar{width:6px}.profile-sidebar .history-list::-webkit-scrollbar-track{background:var(--surface-light);border-radius:10px}.profile-sidebar .history-list::-webkit-scrollbar-thumb{background-color:var(--primary-green);border-radius:10px}.creator-form-inline{display:flex;flex-direction:column;gap:15px;background-color:var(--background-dark);padding:20px;border-radius:8px}.creator-form-inline input,.creator-form-inline textarea{background-color:var(--background-light);border:1px solid var(--surface-light);color:var(--text-light);padding:15px;border-radius:8px;font-size:1rem;font-family:inherit}.tag-selector{display:flex;gap:15px}.tag-button{background:var(--background-light);border:1px solid var(--surface-light);color:var(--text-medium);padding:10px 20px;border-radius:20px;cursor:pointer;font-size:1rem;transition:background-color .2s,color .2s}.tag-button.active{background-color:var(--primary-green);color:#fff;border-color:var(--primary-green)}.create-button{align-self:flex-end;width:auto;padding:10px 30px}.empty-state-text{color:var(--text-medium);text-align:center;padding:20px}@keyframes gradient-animation{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.expressive-title span:nth-child(1){animation-delay:.1s}.expressive-title span:nth-child(2){animation-delay:.2s}.expressive-title span:nth-child(3){animation-delay:.3s}.expressive-title span:nth-child(4){animation-delay:.4s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.expressive-subtitle{animation:fadeInUp .5s ease .6s forwards}.start-quiz-button-new.expressive-button{opacity:0;animation:fadeInUp .5s ease .8s forwards}#background-characters{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}#background-characters span{position:absolute;color:#ffffff0a;-webkit-user-select:none;user-select:none;animation:floatUp linear infinite}@keyframes floatUp{0%{transform:translateY(100vh);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-10vh);opacity:0}}.content-overlay{position:relative;z-index:1}.creator-card{border:2px dashed var(--surface-light);background:transparent;text-align:left;display:flex;align-items:center;padding:25px}.creator-card:hover{border-color:var(--primary-green);background-color:#58a7001a;transform:translateY(0)}.creator-card:before{content:"+";font-size:4rem;font-weight:200;color:var(--primary-green);margin-right:25px;line-height:1}.creator-card-content h3{margin:0 0 10px;font-size:1.5rem;color:var(--text-light)}.creator-card-content p{margin:0;font-size:1rem;color:var(--text-medium);font-weight:400}.score-counter-container{display:flex;justify-content:space-between;flex-wrap:wrap;width:100%;margin-bottom:30px;padding-bottom:15px;border-bottom:1px solid var(--surface-light);font-size:1rem}.score-item{color:var(--text-medium)}.score-item span{font-weight:700;font-size:1.2rem;margin-left:8px}.score-item.unseen span{color:var(--feedback-new)}.score-item.correct span{color:var(--feedback-correct)}.score-item.incorrect span{color:var(--feedback-incorrect)}.score-item.mastered span{color:var(--feedback-mastered)}.modal-actions{display:flex;justify-content:center;gap:20px;margin-top:30px;width:100%}.modal-actions .action-button{flex:1;max-width:200px}.modal-actions .action-button.home{background-color:transparent;border:1px solid var(--surface-light)}.modal-actions .action-button.home:hover{background-color:var(--surface-light)}.results-actions{display:grid;grid-template-columns:1fr 1fr;gap:15px;width:100%;margin-top:40px}.action-button.next-level{background-color:var(--primary-green);border-color:var(--primary-green)}.action-button.next-level:hover{background-color:var(--primary-green-dark)}.action-button.restart{background-color:var(--surface-light);border-color:var(--surface-light)}.action-button.restart:hover{background-color:#718096}.action-button.profile,.action-button.home{background-color:transparent;border-color:var(--surface-light);color:var(--text-medium)}.action-button.profile:hover,.action-button.home:hover{background-color:var(--surface-light);color:var(--text-light)}@media (max-width: 992px){.expressive-title{font-size:3.5rem}.level-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:90%}.profile-grid-container{grid-template-columns:1fr}.profile-sidebar{position:static}}@media (max-width: 768px){.main-header{flex-direction:column;gap:15px;padding:15px 20px;position:relative}.landing-page-wrapper{height:auto;min-height:100vh;padding:20px}.main-nav{gap:20px}.expressive-content{padding:0 20px}.expressive-title{font-size:3rem;line-height:1.3}.expressive-subtitle{font-size:1.1rem}.level-grid,.category-grid{grid-template-columns:1fr;max-width:100%;padding:0 20px}.level-selection-container{padding:20px 10px}.level-title,.category-title,.profile-title{font-size:2.5rem;margin-bottom:30px}.quiz-card,.results-card,.modal-content{padding:25px;margin:0 15px}.question-text{font-size:2rem}.options-grid{grid-template-columns:1fr}}@media (max-width: 576px){body{font-size:14px}.logo-image{height:40px}.logo-title{font-size:1.2rem}.nav-link{font-size:.9rem}.expressive-title{font-size:2.2rem}.expressive-subtitle{font-size:1rem}.start-quiz-button-new{font-size:1.2rem;padding:15px 30px}.level-title,.category-title,.profile-title,.difficulty-title{font-size:2rem}.level-card{font-size:1.5rem;padding:30px 15px}.creator-card{flex-direction:column;text-align:center}.creator-card:before{margin-right:0;margin-bottom:15px}.difficulty-button{font-size:1.3rem;padding:20px}.question-text{font-size:1.8rem;margin-bottom:30px}.option-button{padding:15px;font-size:1rem}.modal-score-display{font-size:3rem}.percentage-circle{width:120px;height:120px;font-size:2rem}}@media (max-width: 480px){.modal-actions{flex-direction:column;gap:15px}.modal-actions .action-button{max-width:100%}}.profile-main-content .history-list{max-height:410px;overflow-y:auto;padding-right:15px}.profile-main-content .history-list::-webkit-scrollbar{width:8px}.profile-main-content .history-list::-webkit-scrollbar-track{background:var(--background-dark);border-radius:10px}.profile-main-content .history-list::-webkit-scrollbar-thumb{background-color:var(--surface-light);border-radius:10px}.profile-main-content .history-list::-webkit-scrollbar-thumb:hover{background-color:var(--primary-green)}.custom-quiz-card:not(:last-child){margin-bottom:10px}.history-list :not(:last-child){margin-bottom:10px}.delete-quiz-button{position:absolute;top:45px;right:35px;background:none;border:none;font-size:1.5rem;color:var(--feedback-incorrect);cursor:pointer;padding:5px;line-height:1;transition:color .2s ease,transform .2s ease}.delete-quiz-button:hover{color:var(--feedback-incorrect);transform:scale(1.1)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.status-badge{font-size:1rem;font-weight:700;padding:4px 10px;border-radius:15px;text-transform:capitalize}.status-badge.status-mastered{background-color:#48bb7833;color:#68d391}.status-badge.status-incomplete{background-color:#4299e133;color:#70b3f0}.status-badge.status-unattended{background-color:#4a556833;color:var(--text-medium)}.nav-link.active{color:var(--text-light)}.nav-link.active:after{transform:scaleX(1);transform-origin:bottom center}.profile-logout-section{margin-top:2rem}.logout-button{width:100%;padding:15px;font-size:1.1rem;font-weight:700;background-color:var(--accent-red);color:var(--text-light);border:none;cursor:pointer;transition:background-color .2s ease-in-out}.action-button.logout-button:hover{background-color:#c0392b}.datetime-display .date-part{color:#f4f5f7;font-weight:500;font-size:.7em}.datetime-display .time-part{color:#f9fbfc;margin-left:8px;font-size:.7em}.difficulty-details{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:5px}.loading-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;display:flex;justify-content:center;align-items:center;background-color:#ffffff1a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.loading-container{display:flex;flex-direction:column;align-items:center;gap:16px;color:#fff;background-color:transparent;padding:32px;border-radius:16px;box-shadow:0 8px 32px #1f26875e}.loading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin 1s linear infinite}.loading-text{font-size:1.25rem;font-weight:500;letter-spacing:1px;color:#fff}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.difficulty-button{position:relative;display:flex;justify-content:center;align-items:center;padding:20px 15px;min-height:120px}.difficulty-status-badge{position:absolute;top:10px;left:10px}.difficulty-main{display:flex;align-items:baseline;gap:15px;text-align:center}.difficulty-main-text{font-size:1.8rem;font-weight:700}.difficulty-timestamp{position:absolute;bottom:10px;right:15px;font-size:1.5rem;font-weight:500;color:var(--text-medium)}.difficulty-button .lock-icon{font-size:1.5rem}.difficulty-button.mastered{background-color:#e0f2fe;border-color:#0284c7;cursor:not-allowed;opacity:.8}.difficulty-button.mastered:hover{background-color:#e0f2fe;transform:none}.exercise-list-container{width:100%;max-width:1100px;margin:40px auto;padding:20px}.exercise-list-header{width:100%;display:flex;align-items:center;margin-bottom:40px;position:relative;justify-content:center}.exercise-list-title{text-transform:capitalize}.exercise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%}.exercise-grid .difficulty-main-text{font-size:1.25rem}.exercise-grid .difficulty-score{font-size:1.1rem}@media (max-width: 992px){.exercise-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.exercise-grid{grid-template-columns:1fr}}