.hamburger-button{position:fixed;top:24px;right:24px;z-index:1000;width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:all .3s ease;padding:8px;box-shadow:0 1px 3px #0000004d}.hamburger-button:hover{background:#374151;border-color:#4b5563;box-shadow:0 4px 12px #0006;transform:translateY(-2px)}.hamburger-button:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.hamburger-line{width:22px;height:2px;background:#f9fafb;border-radius:2px;transition:all .3s ease;transform-origin:center}.hamburger-line:nth-child(1).open{transform:rotate(45deg) translate(6px,6px)}.hamburger-line:nth-child(2).open{opacity:0}.hamburger-line:nth-child(3).open{transform:rotate(-45deg) translate(6px,-6px)}.menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:998;animation:fadeIn .2s ease-out}.hamburger-menu{position:fixed;top:0;right:0;width:280px;height:100vh;background:#1f2937f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-left:1px solid rgba(255,255,255,.2);z-index:999;padding:80px 24px 24px;transform:translate(100%);transition:transform .3s ease-out;box-shadow:-4px 0 24px #0000004d}.hamburger-menu.open{transform:translate(0)}.menu-list{list-style:none;display:flex;flex-direction:column;gap:8px}.menu-link{display:block;padding:14px 18px;color:#f9fafb;text-decoration:none;font-family:Inter,sans-serif;font-size:1rem;font-weight:500;border-radius:8px;transition:all .2s ease;background:#37415199;border:1px solid rgba(255,255,255,.1)}.menu-link:hover{background:#374151e6;border-color:#ffffff4d;transform:translate(4px)}.menu-link:active{transform:translate(2px)}@media (max-width: 768px){.hamburger-button{top:16px;right:16px;width:36px;height:36px}.hamburger-menu{width:260px}}.flashcard-container{cursor:pointer;width:100%;max-width:520px;height:420px;margin:0 auto;animation:fadeInUp .6s ease-out}.flashcard{position:relative;width:100%;height:100%}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;border-radius:16px;box-shadow:0 4px 6px #0000004d;transition:opacity .25s ease,transform .25s ease,all .3s ease;overflow:hidden}.flashcard-front:before,.flashcard-back:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.flashcard-front{opacity:1;transform:scale(1);pointer-events:auto}.flashcard-back,.flashcard.flipped .flashcard-front{opacity:0;transform:scale(.98);pointer-events:none}.flashcard.flipped .flashcard-back{opacity:1;transform:scale(1);pointer-events:auto}.flashcard-container:hover .flashcard-front:before,.flashcard-container:hover .flashcard-back:before{left:100%;opacity:1}.flashcard-container:hover .flashcard-front,.flashcard-container:hover .flashcard-back{background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;box-shadow:0 8px 16px #0006;transform:translateY(-2px)}.flashcard-container:focus{outline:none}.flashcard-container:focus .flashcard-front,.flashcard-container:focus .flashcard-back{outline:none;border:none}.flashcard-front:focus,.flashcard-back:focus{outline:none;border:none}.flashcard-container:active .flashcard-front,.flashcard-container:active .flashcard-back{border:none;outline:none}.character{font-family:Noto Sans JP,sans-serif;font-size:10rem;font-weight:400;color:#f9fafb;-webkit-user-select:none;user-select:none}.romaji{font-family:Inter,sans-serif;font-size:5.5rem;font-weight:600;color:#f9fafb;-webkit-user-select:none;user-select:none;letter-spacing:.02em}.audio-button{position:absolute;bottom:24px;right:24px;background:#2563eb;border:none;border-radius:50%;width:56px;height:56px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 1px 3px #0000001a;color:#fff}.audio-button svg{width:32px;height:32px}.audio-button:hover{background:#3b82f6;transform:scale(1.05);box-shadow:0 2px 4px #00000026}.audio-button:active{transform:scale(.98)}.audio-button:focus{outline:none}@media (max-width: 768px){.flashcard-container{max-width:90%;height:350px}.character{font-size:8rem}.romaji{font-size:4.5rem}}@media (max-width: 480px){.flashcard-container{height:300px}.character{font-size:6rem}.romaji{font-size:3.5rem}}@media (prefers-reduced-motion: reduce){.flashcard-front,.flashcard-back{transition:none}.flashcard.flipped .flashcard-front{display:none}.flashcard:not(.flipped) .flashcard-back{display:none}}.deck-selector{display:flex;gap:10px;justify-content:center;margin-bottom:10px;animation:fadeIn .8s ease-out .2s both;flex-wrap:wrap}.deck-button{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif;font-size:.85rem;font-weight:500;color:#f9fafb;box-shadow:0 1px 3px #0000004d;position:relative;overflow:hidden;white-space:nowrap}.deck-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease;opacity:0}.deck-button:hover:before{left:100%;opacity:1}.deck-button:hover{background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#4b5563;box-shadow:0 4px 12px #0006;transform:translateY(-2px)}.deck-button:focus{outline:none}.deck-button.active{background:#3b82f6;border-color:#3b82f6;color:#fff;box-shadow:0 2px 4px #3b82f666}.deck-label{font-weight:600}.deck-example{font-family:Noto Sans JP,sans-serif;font-size:1rem;opacity:.8}@media (max-width: 768px){.deck-selector{gap:8px}.deck-button{padding:6px 10px;font-size:.8rem;gap:4px}.deck-example{font-size:.9rem}}@media (max-width: 480px){.deck-selector{gap:6px;margin-bottom:20px}.deck-button{padding:6px 8px;font-size:.75rem;gap:4px}.deck-example{font-size:.85rem}.deck-label{font-size:.75rem}}.mode-selector{display:flex;gap:12px;justify-content:center;margin-bottom:10px;flex-wrap:wrap;animation:fadeIn .8s ease-out .1s both}.mode-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif;font-size:.95rem;font-weight:500;color:#f9fafb;min-width:120px;box-shadow:0 1px 3px #0000004d;position:relative;overflow:hidden}.mode-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.mode-button:hover:before{left:100%;opacity:1}.mode-button:hover{background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#4b5563;box-shadow:0 4px 12px #0006;transform:translateY(-2px)}.mode-button:focus{outline:none}.mode-button.active{background:#3b82f6;border-color:#3b82f6;color:#fff;box-shadow:0 2px 4px #3b82f666}.mode-button svg{width:18px;height:18px}@media (max-width: 480px){.mode-selector{gap:10px;margin-bottom:20px}.mode-button{padding:8px 20px;font-size:.9rem;min-width:110px}.mode-button svg{width:16px;height:16px}}.navigation-controls{display:flex;gap:20px;justify-content:center;margin-top:32px;animation:fadeIn .8s ease-out .4s both}.nav-button{display:flex;align-items:center;gap:8px;padding:12px 24px;background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif;font-size:1rem;font-weight:500;color:#f9fafb;min-width:130px;box-shadow:0 1px 3px #0000004d;position:relative;overflow:hidden}.nav-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.nav-button:hover:not(:disabled):before{left:100%;opacity:1}.nav-button:hover:not(:disabled){background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;color:#fff;box-shadow:0 4px 12px #0006;transform:translateY(-2px)}.nav-button:focus{outline:none;border:none}.nav-button:active{border:none;outline:none}.nav-button:disabled{opacity:.5;cursor:not-allowed;background:#374151;color:#f9fafb}.nav-button svg{width:20px;height:20px}@media (max-width: 480px){.navigation-controls{gap:16px}.nav-button{padding:10px 20px;font-size:.9rem;min-width:110px}.nav-button svg{width:18px;height:18px}}.progress-indicator{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px;animation:fadeIn .8s ease-out .6s both}.progress-text{font-family:Inter,sans-serif;font-size:1rem;font-weight:500;color:#f9fafb}.progress-current{color:#9ca3af;font-weight:600}.progress-separator{margin:0 8px;color:#9ca3af}.progress-total{color:#9ca3af}.progress-bar{width:240px;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:#3b82f6;border-radius:3px;transition:width .3s ease}@media (max-width: 480px){.progress-text{font-size:1rem}.progress-bar{width:150px}}.settings-panel{display:flex;gap:12px;justify-content:center;margin-top:32px;animation:fadeIn .8s ease-out .5s both}.settings-button{display:flex;align-items:center;gap:8px;padding:10px 18px;background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:all .3s ease;font-family:Inter,sans-serif;font-size:.9rem;font-weight:500;color:#f9fafb;box-shadow:0 1px 3px #0000004d;position:relative;overflow:hidden}.settings-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.settings-button:hover:before{left:100%;opacity:1}.settings-button:hover{background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#4b5563;box-shadow:0 4px 12px #0006;transform:translateY(-2px)}.settings-button:focus{outline:none}.settings-button.active,.settings-button:active{background:#3b82f6;border-color:#3b82f6;color:#fff;box-shadow:0 1px 3px #3b82f64d}.settings-button svg{width:18px;height:18px}@media (max-width: 480px){.settings-panel{gap:10px}.settings-button{padding:8px 16px;font-size:.85rem}.settings-button svg{width:16px;height:16px}}.quiz-container,.quiz-wrapper{width:100%;max-width:600px;margin:0 auto}.quiz-wrapper.fade-in{animation:fadeIn .6s cubic-bezier(.4,0,.2,1)}.quiz-wrapper.fade-out{animation:fadeOut .4s cubic-bezier(.4,0,.2,1)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.quiz-character{background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;box-shadow:0 4px 6px #0000004d;padding:60px 40px;text-align:center;margin-bottom:32px;transition:all .3s ease}.quiz-character .character{font-family:Noto Sans JP,sans-serif;font-size:8rem;font-weight:400;color:#f9fafb;-webkit-user-select:none;user-select:none}.quiz-options{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}.quiz-option{padding:24px;background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;border-radius:8px;cursor:pointer;transition:background .5s ease,color .5s ease,box-shadow .5s ease;font-family:Inter,sans-serif;font-size:1.5rem;font-weight:500;color:#f9fafb;box-shadow:0 1px 3px #0000004d;position:relative;overflow:hidden}.quiz-option:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.quiz-option:hover:not(:disabled):before{left:100%;opacity:1}.quiz-option:hover:not(:disabled){background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;box-shadow:0 4px 12px #0006;transform:translateY(-2px)}.quiz-option.selected{background:#374151!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:none!important;box-shadow:0 4px 12px #0006!important;transform:translateY(-2px)}.quiz-option.selected.correct{background:#10b981!important;border:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:background .5s ease,color .5s ease,box-shadow .5s ease!important}.quiz-option.selected.incorrect{background:#ef4444!important;border:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:background .5s ease,color .5s ease,box-shadow .5s ease!important}.quiz-option:focus{outline:none}.quiz-option:disabled{cursor:not-allowed}.quiz-option.correct{background:#10b981;border:none;color:#fff;box-shadow:0 1px 3px #0000001a}.quiz-option.incorrect{background:#ef4444;border:none;color:#fff;box-shadow:0 1px 3px #0000001a}@media (max-width: 768px){.quiz-character{padding:50px 30px}.quiz-character .character{font-size:6rem}.quiz-options{gap:12px}.quiz-option{padding:20px;font-size:1.25rem}.quiz-feedback{font-size:1rem;padding:14px 20px}}@media (max-width: 480px){.quiz-container{max-width:100%}.quiz-character{padding:40px 20px}.quiz-character .character{font-size:5rem}.quiz-options{gap:10px}.quiz-option{padding:18px;font-size:1.1rem}.quiz-feedback{font-size:.95rem;padding:12px 16px}}.score-display{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px 28px;text-align:center;width:220px;margin:0 auto;box-shadow:0 1px 3px #0000001a;animation:fadeIn .8s ease-out .4s both;transition:all .2s ease;min-height:148px;display:flex;flex-direction:column;justify-content:center}.score-display.clickable{cursor:pointer}.score-display.clickable:hover{border-color:#d1d5db;box-shadow:0 2px 4px #0000001a}.score-hint{font-family:Inter,sans-serif;font-size:.7rem;font-weight:500;color:#718096;margin-top:8px;opacity:.7;min-height:1rem}.score-label{font-family:Inter,sans-serif;font-size:.875rem;font-weight:500;color:#6b7280;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.score-value{font-family:Inter,sans-serif;font-size:2rem;font-weight:600;color:#1a1a1a;margin-bottom:4px}.score-correct{color:#3b82f6}.score-separator{margin:0 8px;color:#9ca3af}.score-percentage{font-family:Inter,sans-serif;font-size:.875rem;font-weight:500;color:#6b7280;min-height:1.25rem;margin-top:4px}.results-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out;padding:20px}.results-modal{background:#fffffffa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.4);border-radius:24px;box-shadow:0 20px 60px #0000004d,0 8px 32px #0003;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;position:relative;animation:slideUp .4s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.results-close{position:absolute;top:16px;right:16px;background:#0000000d;border:none;border-radius:50%;width:36px;height:36px;font-size:24px;line-height:1;cursor:pointer;color:#4a5568;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:10}.results-close:hover{background:#0000001a;transform:scale(1.1)}.results-title{font-family:Inter,sans-serif;font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;padding:32px 32px 24px;margin:0}.results-content{padding:0 32px 32px}.results-section{margin-bottom:32px}.results-section:last-child{margin-bottom:0}.results-section-title{font-family:Inter,sans-serif;font-size:1.125rem;font-weight:700;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid}.correct-title{color:#48bb78;border-bottom-color:#48bb784d}.incorrect-title{color:#f56565;border-bottom-color:#f565654d}.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px}.result-item{background:#fffc;border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:12px;text-align:center;transition:all .2s ease}.result-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.correct-item{border-color:#48bb784d;background:#48bb780d}.incorrect-item{border-color:#f565654d;background:#f565650d}.result-character{font-family:Noto Sans JP,sans-serif;font-size:2rem;font-weight:400;color:#1a1a1a;margin-bottom:4px}.result-romaji{font-family:Inter,sans-serif;font-size:.9rem;font-weight:600;color:#f9fafb}.results-empty{font-family:Inter,sans-serif;font-size:.9rem;color:#718096;text-align:center;padding:24px;font-style:italic}@media (max-width: 480px){.score-display{padding:14px 20px;width:180px}.score-label{font-size:.8rem}.score-value{font-size:1.75rem}.score-percentage{font-size:.8rem}.results-modal{max-height:90vh;border-radius:20px}.results-title{font-size:1.5rem;padding:24px 20px 20px}.results-content{padding:0 20px 24px}.results-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px}.result-item{padding:10px}.result-character{font-size:1.75rem}}.matching-container{width:100%;max-width:700px;margin:0 auto;animation:fadeInUp .6s ease-out}.matching-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:24px}.matching-column{display:flex;flex-direction:column;gap:12px}.column-title{font-family:Inter,sans-serif;font-size:.875rem;font-weight:600;color:#6b7280;text-align:center;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.match-item{padding:20px;background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;font-family:Inter,sans-serif;font-size:1.5rem;font-weight:500;color:#f9fafb;min-height:100px;height:100px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0000004d;position:relative;overflow:hidden}.match-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.match-item:hover:not(:disabled):before{left:100%;opacity:1}.match-item:hover:not(:disabled){background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#4b5563;box-shadow:0 4px 12px #0006;transform:translateY(-2px)}.match-item:focus{outline:none}.match-item.selected{background:#4b5563!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid #6b7280!important;box-shadow:0 1px 3px #0000001a!important;transition:none}.match-item.selected:hover:not(:disabled){background:#4b5563!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid #6b7280!important;box-shadow:0 1px 3px #0000001a!important;transform:none}.match-item.matched{background:#10b981;border-color:#10b981;color:#fff;cursor:default;box-shadow:0 1px 3px #0000001a}.match-item.incorrect{background:#ef4444;border-color:#ef4444;color:#fff;animation:shake .4s ease-in-out;box-shadow:0 1px 3px #0000001a}.match-item:disabled{cursor:not-allowed}.match-character{font-family:Noto Sans JP,sans-serif;font-size:2.5rem}.match-romaji{font-family:Inter,sans-serif;font-size:1.75rem;color:#f9fafb}.matching-progress{text-align:center;font-family:Inter,sans-serif;font-size:1rem;font-weight:600;color:#f9fafb;padding:16px;background:#4b5563;border-radius:8px;border:1px solid #6b7280;box-shadow:0 1px 3px #0000001a}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@media (max-width: 768px){.matching-grid{gap:24px}.match-item{padding:16px;font-size:1.25rem;min-height:85px;height:85px}.match-character{font-size:2rem}.match-romaji{font-size:1.25rem}.column-title{font-size:.9rem}}@media (max-width: 480px){.matching-grid{gap:16px}.matching-column{gap:10px}.match-item{padding:14px;font-size:1.1rem;min-height:75px;height:75px}.match-character{font-size:1.75rem}.match-romaji{font-size:1.1rem}.column-title{font-size:.85rem;margin-bottom:4px}.matching-progress{font-size:1rem;padding:12px}}.review-container{width:100%;max-width:1000px;margin:0 auto;animation:fadeInUp .6s ease-out}.review-title{font-family:Inter,sans-serif;font-size:1.5rem;font-weight:600;color:#f9fafb;text-align:center;margin-bottom:40px}.review-section{margin-bottom:40px}.section-title{font-family:Inter,sans-serif;font-size:1.125rem;font-weight:600;color:#f9fafb;margin-bottom:20px;text-align:center}.review-grid{display:grid;gap:16px}.basic-grid,.diacritical-grid{grid-template-columns:repeat(5,1fr)}.contracted-grid{grid-template-columns:repeat(3,1fr);max-width:700px;margin-left:auto;margin-right:auto}.review-card{background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:20px;text-align:center;transition:all .3s ease;cursor:pointer;box-shadow:0 1px 3px #0000004d;position:relative;overflow:hidden}.review-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.review-card:hover:before{left:100%;opacity:1}.review-card:hover{background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#4b5563;box-shadow:0 4px 12px #0006;transform:translateY(-2px)}.review-card.empty-card{background:transparent;border:none;box-shadow:none;cursor:default;pointer-events:none}.review-card.empty-card:hover{transform:none}.review-audio-icon{position:absolute;bottom:8px;right:8px;display:flex;align-items:center;justify-content:center;padding:0;opacity:.6;transition:opacity .2s ease;color:#9ca3af;pointer-events:none}.review-audio-icon svg{width:18px;height:18px}.review-card:hover .review-audio-icon{opacity:1;color:#60a5fa}.review-card{position:relative}.review-character{font-family:Noto Sans JP,sans-serif;font-size:3rem;font-weight:400;color:#f9fafb;margin-bottom:8px}.review-romaji{font-family:Inter,sans-serif;font-size:1.25rem;font-weight:500;color:#f9fafb}.section-count{text-align:center;font-family:Inter,sans-serif;font-size:.9rem;font-weight:500;color:#999;padding:8px}.back-to-top-btn{position:fixed;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#374151d9;color:#f9fafb;font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px #00000059;transition:all .2s ease;z-index:1200;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-to-top-btn:hover{background:#3b82f6;border-color:#3b82f6;color:#fff;transform:translateY(-2px)}@media (max-width: 768px){.basic-grid,.diacritical-grid{grid-template-columns:repeat(5,1fr)}.contracted-grid{grid-template-columns:repeat(3,1fr)}.review-grid{gap:8px}.review-card{padding:12px}.review-character{font-size:2rem}.review-romaji{font-size:1.1rem}.review-title{font-size:1.25rem;margin-bottom:24px}.section-title{font-size:1rem;margin-bottom:16px}.review-section{margin-bottom:40px}.review-audio-icon svg{width:16px;height:16px}}@media (max-width: 480px){.basic-grid,.diacritical-grid{grid-template-columns:repeat(5,1fr)}.contracted-grid{grid-template-columns:repeat(3,1fr)}.review-grid{gap:6px}.review-card{padding:10px}.review-character{font-size:1.75rem}.review-romaji{font-size:.95rem}.review-title{font-size:1.125rem;margin-bottom:20px}.section-title{font-size:.95rem;margin-bottom:12px}.review-section{margin-bottom:32px}.review-count{font-size:1rem;padding:12px}.review-audio-icon{bottom:4px;right:4px}.review-audio-icon svg{width:14px;height:14px}}.character-selector-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out;padding:20px}.character-selector-modal{background:#1f2937;border-radius:12px;width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.character-selector-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;background:#1f2937;position:sticky;top:0;z-index:10}.character-selector-header h2{font-family:Inter,sans-serif;font-size:1.5rem;font-weight:600;color:#f9fafb;margin:0}.character-selector-close{background:transparent;border:none;color:#9ca3af;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.character-selector-close:hover{background:#ffffff1a;color:#f9fafb}.character-selector-controls{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap;gap:12px;flex-shrink:0;background:#1f2937}.character-selector-count{font-family:Inter,sans-serif;font-size:.9rem;color:#9ca3af;font-weight:500}.character-selector-buttons{display:flex;gap:8px}.selector-btn{padding:6px 16px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f9fafb;font-family:Inter,sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 1px 3px #0000004d;position:relative;overflow:hidden}.selector-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.selector-btn:hover:before{left:100%;opacity:1}.selector-btn:hover{background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#4b5563;transform:translateY(-2px);box-shadow:0 4px 12px #0006}.selector-btn.primary{background:#3b82f6;border-color:#3b82f6;color:#fff;box-shadow:0 2px 4px #3b82f666}.selector-btn.primary:hover{background:#2563eb;border-color:#2563eb;-webkit-backdrop-filter:none;backdrop-filter:none}.selector-btn.cancel{background:transparent;border-color:#fff3}.selector-btn.cancel:hover{background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.character-selector-section-buttons{display:flex;gap:12px;justify-content:center;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap;flex-shrink:0;background:#1f2937}.selector-section-btn{padding:8px 16px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f9fafb;font-family:Inter,sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 1px 3px #0000004d;position:relative;overflow:hidden}.selector-section-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.selector-section-btn:hover:before{left:100%;opacity:1}.selector-section-btn:hover{background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#4b5563;transform:translateY(-2px);box-shadow:0 4px 12px #0006}.selector-section-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff;box-shadow:0 2px 4px #3b82f666}.selector-section-btn.active:hover{background:#2563eb;border-color:#2563eb;-webkit-backdrop-filter:none;backdrop-filter:none}.character-selector-content{flex:1;overflow-y:auto;padding:20px 24px;max-height:calc(100vh - 300px);min-height:0}.character-selector-section{margin-bottom:32px}.character-selector-section:last-child{margin-bottom:0}.selector-section-title{font-family:Inter,sans-serif;font-size:1.125rem;font-weight:600;color:#f9fafb;margin-bottom:20px;text-align:center}.row-column-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;padding:12px;background:#1f293799;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.row-controls,.column-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.control-label{font-family:Inter,sans-serif;font-size:.85rem;font-weight:600;color:#9ca3af;margin-right:4px}.row-column-btn{padding:4px 10px;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:#37415199;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f9fafb;font-family:Inter,sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:32px;position:relative;overflow:hidden}.row-column-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.row-column-btn:hover:before{left:100%;opacity:1}.row-column-btn:hover{background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#4b5563;transform:translateY(-1px)}.row-column-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff;box-shadow:0 2px 4px #3b82f666}.row-column-btn.active:hover{background:#2563eb;border-color:#2563eb}.character-selector-grid{display:grid;gap:16px}.character-selector-grid.basic-grid,.character-selector-grid.diacritical-grid{grid-template-columns:repeat(5,1fr)}.character-selector-grid.contracted-grid{grid-template-columns:repeat(3,1fr);max-width:700px;margin-left:auto;margin-right:auto}.character-selector-grid-with-headers{display:grid;gap:8px}.character-selector-grid-with-headers.basic-grid-with-headers,.character-selector-grid-with-headers.diacritical-grid-with-headers{grid-template-columns:32px repeat(5,1fr)}.character-selector-grid-with-headers.contracted-grid-with-headers{grid-template-columns:32px repeat(3,1fr);max-width:700px;margin-left:auto;margin-right:auto}.grid-column-header-btn{width:100%;height:32px;padding:0;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:#37415199;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f9fafb;font-family:Inter,sans-serif;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.grid-column-header-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.grid-column-header-btn:hover:before{left:100%;opacity:1}.grid-column-header-btn:hover{background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#4b5563}.grid-row-header-btn{width:32px;height:100%;min-height:70px;padding:0;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:#37415199;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f9fafb;font-family:Inter,sans-serif;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.grid-row-header-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.grid-row-header-btn:hover:before{left:100%;opacity:1}.grid-row-header-btn:hover{background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#4b5563}.row-arrow{display:inline-block;transform:rotate(-90deg)}.column-arrow,.row-arrow{font-size:1.2rem;line-height:1;font-weight:700;font-family:Inter,sans-serif}.character-selector-card{background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:14px;text-align:center;cursor:pointer;transition:all .3s ease;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 1px 3px #0000004d;overflow:hidden}.character-selector-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease,opacity .2s ease;opacity:0}.character-selector-card:hover:before{left:100%;opacity:1}.character-selector-card.empty-card{background:transparent;border:none;box-shadow:none;cursor:default;pointer-events:none;padding:0}.character-selector-card.empty-card:before{display:none}.character-selector-card:hover{background:#374151;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#4b5563;transform:translateY(-2px);box-shadow:0 4px 12px #0006}.character-selector-card.selected{background:#3b82f633;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633}.selector-character{font-family:Noto Sans JP,sans-serif;font-size:2.5rem;font-weight:400;color:#f9fafb;margin-bottom:4px}.selector-romaji{font-family:Inter,sans-serif;font-size:1rem;font-weight:500;color:#f9fafb}.selector-checkmark{position:absolute;top:4px;right:4px;background:#3b82f6;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 4px #0003}.character-selector-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;padding-bottom:calc(16px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.1);background:#1f2937;position:sticky;bottom:0;z-index:10}@media (max-width: 768px){.character-selector-modal{max-width:100%;max-height:100vh;height:100vh;border-radius:0;display:flex;flex-direction:column}.character-selector-overlay{padding:0;align-items:stretch}.character-selector-content{padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));flex:1;overflow-y:auto;min-height:0}.character-selector-grid.basic-grid,.character-selector-grid.diacritical-grid{grid-template-columns:repeat(5,1fr)}.character-selector-grid.contracted-grid{grid-template-columns:repeat(3,1fr)}.character-selector-grid{gap:8px}.character-selector-card{padding:12px}.selector-character{font-size:2rem}.selector-romaji{font-size:1.1rem}.character-selector-header{padding:16px;padding-top:calc(16px + env(safe-area-inset-top))}.character-selector-header h2{font-size:1.25rem}.character-selector-controls,.character-selector-section-buttons{padding:12px 16px}.character-selector-footer{padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.selector-section-title{font-size:1rem;margin-bottom:16px}.character-selector-section{margin-bottom:24px}}@media (max-width: 480px){.character-selector-grid.basic-grid,.character-selector-grid.diacritical-grid{grid-template-columns:repeat(5,1fr)}.character-selector-grid.contracted-grid{grid-template-columns:repeat(3,1fr)}.character-selector-grid{gap:6px}.character-selector-card{padding:10px}.selector-character{font-size:1.75rem}.selector-romaji{font-size:.95rem}.selector-section-title{font-size:.95rem;margin-bottom:12px}.character-selector-section{margin-bottom:20px}}.articles-intro{font-size:1.1rem;color:#9ca3af;margin-bottom:32px;line-height:1.6}.articles-list{display:flex;flex-direction:column;gap:24px}.article-card{background:#37415199;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px;transition:all .3s ease}.article-card:hover{background:#374151cc;border-color:#fff3;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.article-link{text-decoration:none;color:inherit;display:block}.article-header{margin-bottom:12px}.article-title{font-size:1.5rem;font-weight:600;color:#f9fafb;margin-bottom:8px;font-family:Noto Sans JP,sans-serif}.article-meta{display:flex;gap:16px;font-size:.875rem;color:#9ca3af;margin-bottom:12px}.article-date,.article-reading-time{display:flex;align-items:center}.article-summary{font-size:1rem;color:#d1d5db;line-height:1.6;margin-bottom:16px}.article-tags{display:flex;flex-wrap:wrap;gap:8px}.article-tag{background:#3b82f633;border:1px solid rgba(59,130,246,.3);color:#93c5fd;padding:4px 12px;border-radius:16px;font-size:.75rem;font-weight:500;text-transform:capitalize}@media (max-width: 768px){.article-card{padding:20px}.article-title{font-size:1.25rem}.article-meta{flex-direction:column;gap:4px}}.back-link{display:inline-block;color:#9ca3af;text-decoration:none;font-size:.95rem;margin-bottom:24px;transition:color .2s ease}.back-link:hover{color:#f9fafb}.article-detail{max-width:800px;margin:0 auto}.article-detail-header{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1)}.article-detail-title{font-size:2.5rem;font-weight:600;color:#f9fafb;margin-bottom:16px;font-family:Noto Sans JP,sans-serif;line-height:1.2}.article-detail-meta{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:16px;font-size:.9rem}.meta-item{display:flex;gap:8px}.meta-label{color:#9ca3af}.meta-value{color:#d1d5db;font-weight:500}.article-detail-tags{display:flex;flex-wrap:wrap;gap:8px}.article-detail-tag{background:#3b82f633;border:1px solid rgba(59,130,246,.3);color:#93c5fd;padding:6px 14px;border-radius:16px;font-size:.8rem;font-weight:500;text-transform:capitalize}.article-detail-content{font-size:1.1rem;line-height:1.8;color:#e5e7eb;margin-bottom:48px}.article-detail-content h2{font-size:1.75rem;font-weight:600;color:#f9fafb;margin-top:32px;margin-bottom:16px;font-family:Noto Sans JP,sans-serif}.article-detail-content h3{font-size:1.5rem;font-weight:600;color:#f9fafb;margin-top:24px;margin-bottom:12px;font-family:Noto Sans JP,sans-serif}.article-detail-content h4{font-size:1.25rem;font-weight:600;color:#f9fafb;margin-top:20px;margin-bottom:10px}.article-detail-content p{margin-bottom:16px}.article-detail-content strong{color:#f9fafb;font-weight:600}.article-detail-content ul{margin-bottom:16px;margin-left:24px;padding-left:0}.article-detail-content li{margin-bottom:8px;list-style-type:disc;padding-left:8px}.article-navigation{display:flex;justify-content:space-between;gap:24px;padding-top:32px;border-top:1px solid rgba(255,255,255,.1);margin-top:48px}.nav-link{flex:1;display:flex;flex-direction:column;padding:16px;background:#37415199;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:8px;text-decoration:none;color:inherit;transition:all .2s ease}.nav-link:hover{background:#374151cc;border-color:#fff3;transform:translateY(-2px)}.nav-direction{font-size:.875rem;color:#9ca3af;margin-bottom:4px}.nav-title{font-size:.95rem;color:#f9fafb;font-weight:500}.nav-next{text-align:right;align-items:flex-end}@media (max-width: 768px){.article-detail-title{font-size:2rem}.article-detail-meta{flex-direction:column;gap:12px}.article-detail-content{font-size:1rem}.article-navigation{flex-direction:column}.nav-next{text-align:left;align-items:flex-start}}.about-content{max-width:800px;margin:0 auto}.about-section{margin-bottom:40px}.about-section h2{font-size:1.75rem;font-weight:600;color:#f9fafb;margin-bottom:16px;font-family:Noto Sans JP,sans-serif}.about-section p{font-size:1.1rem;line-height:1.8;color:#e5e7eb;margin-bottom:16px}.about-list{list-style:none;padding-left:0;margin:16px 0}.about-list li{font-size:1.05rem;line-height:1.8;color:#e5e7eb;margin-bottom:12px;padding-left:24px;position:relative}.about-list li:before{content:"•";color:#3b82f6;font-weight:700;position:absolute;left:0}.about-list li strong{color:#f9fafb;font-weight:600}@media (max-width: 768px){.about-section h2{font-size:1.5rem}.about-section p,.about-list li{font-size:1rem}}.privacy-last-updated{font-size:.9rem;color:#9ca3af;margin-bottom:32px;font-style:italic}.privacy-content{max-width:800px;margin:0 auto}.privacy-section{margin-bottom:40px}.privacy-section h2{font-size:1.75rem;font-weight:600;color:#f9fafb;margin-bottom:16px;font-family:Noto Sans JP,sans-serif}.privacy-section h3{font-size:1.4rem;font-weight:600;color:#f9fafb;margin-top:24px;margin-bottom:12px}.privacy-section p{font-size:1.05rem;line-height:1.8;color:#e5e7eb;margin-bottom:16px}.privacy-section p strong{color:#f9fafb;font-weight:600}.privacy-list{list-style:none;padding-left:0;margin:16px 0}.privacy-list li{font-size:1.05rem;line-height:1.8;color:#e5e7eb;margin-bottom:12px;padding-left:24px;position:relative}.privacy-list li:before{content:"•";color:#3b82f6;font-weight:700;position:absolute;left:0}.privacy-list li strong{color:#f9fafb;font-weight:600}.privacy-link{color:#93c5fd;text-decoration:underline;transition:color .2s ease}.privacy-link:hover{color:#dbeafe}@media (max-width: 768px){.privacy-section h2{font-size:1.5rem}.privacy-section h3{font-size:1.25rem}.privacy-section p,.privacy-list li{font-size:1rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#1f2937;min-height:100vh;color:#f9fafb;position:relative}.app{min-height:100vh;display:flex;flex-direction:column;padding:24px;position:relative;z-index:1}.app-header{text-align:center;margin-bottom:48px;animation:fadeInDown .6s ease-out}.app-title{font-family:Noto Sans JP,sans-serif;font-size:2.5rem;font-weight:600;color:#f9fafb;margin-bottom:8px;letter-spacing:-.02em}.app-subtitle{font-size:1rem;color:#9ca3af;font-weight:400}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.app-main{flex:1;display:flex;flex-direction:column;max-width:900px;width:100%;margin:0 auto}.instructions{text-align:center;font-size:.9rem;color:#9ca3af;margin-bottom:24px;font-weight:400;animation:fadeIn .8s ease-out}.character-selector-button{padding:8px 16px;background:#374151cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#f9fafb;font-family:Inter,sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px #0000004d}.character-selector-button:hover{background:#374151;border-color:#4b5563;transform:translateY(-1px);box-shadow:0 2px 6px #0006}.character-selector-button:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.match-rounds{text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px 28px;max-width:220px;margin:24px auto;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease,box-shadow .2s ease}.match-rounds:hover{transform:translateY(-1px);box-shadow:0 4px 6px #0000001a}.rounds-label{font-family:Inter,sans-serif;font-size:.875rem;font-weight:500;color:#6b7280;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.rounds-count{font-family:Inter,sans-serif;font-size:2rem;font-weight:600;color:#1a1a1a}@media (max-width: 768px){.app{padding:16px}.app-header{margin-bottom:32px}.app-title{font-size:2rem}.app-subtitle{font-size:.9rem}.instructions{font-size:.8rem;margin-bottom:16px}}@media (max-width: 480px){.app{padding:12px}.app-title{font-size:1.75rem}.app-subtitle{font-size:.85rem}.instructions{font-size:.75rem;margin-bottom:12px}}.page-container{max-width:900px;width:100%;margin:0 auto;padding:120px 24px 48px;min-height:100vh}.page-container h1{font-size:2.5rem;font-weight:600;color:#f9fafb;margin-bottom:24px;font-family:Noto Sans JP,sans-serif}.page-container p{font-size:1.1rem;color:#9ca3af;line-height:1.6}