*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{font-family:Yu Gothic UI,Meiryo,sans-serif}.app-header{box-sizing:border-box;background:#fff;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;min-height:52px;padding:0 24px;display:flex}.app-brand{color:#2563eb;font-size:18px;font-weight:800;text-decoration:none}.app-navigation{gap:8px;display:flex}.nav-link{color:#475569;border-radius:8px;padding:8px 12px;text-decoration:none}.nav-link:hover,.nav-link-active{color:#1d4ed8;background:#eff6ff}.app{background:#f4f7fb;justify-content:center;align-items:center;min-height:calc(100vh - 52px);padding:16px;display:flex}.hero{box-sizing:border-box;text-align:center;background:#fff;border-radius:16px;width:min(760px,100%);padding:32px;box-shadow:0 12px 30px #00000014}.hero h1{color:#2563eb;margin:0 0 12px;font-size:2rem}.hero h2{color:#222;margin:0 0 16px;font-size:1.25rem;line-height:1.4}.hero p{color:#666;margin-bottom:24px;font-size:15px}.hero button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:12px;width:100%;padding:12px;font-size:15px;transition:all .2s}.hero button:hover{background:#1d4ed8}.hero button:focus-visible,.answer-form input:focus-visible{outline-offset:2px;outline:3px solid #93c5fd}.actions{gap:12px;display:grid}.hero .secondary-button{color:#2563eb;background:#fff;border:1px solid #2563eb}.hero .secondary-button:hover{background:#eff6ff}.hero .text-button{color:#64748b;background:0 0;padding:8px;font-size:14px}.hero .text-button:hover{color:#334155;background:0 0;text-decoration:underline}.hero .question-text{color:#1f2937;margin-top:20px;font-size:16px;line-height:1.65}.hero .question-meta{color:#b45309;margin:0;font-size:14px}.progress-card{background:#eff6ff;border-radius:12px;margin:24px 0;padding:16px}.progress-card h3,.progress-card p{margin:0}.progress-card p{color:#1e3a8a;margin-top:8px}.progress-card progress{accent-color:#2563eb;width:100%;height:10px;margin-top:12px}.progress-card .progress-detail{color:#475569;font-size:14px}.progress-card .progress-complete{color:#166534;font-size:14px;font-weight:700}.question-list{gap:12px;margin:24px 0;display:grid}.lesson-list{gap:16px;margin:24px 0;display:grid}.random-actions{gap:10px;margin:20px 0;display:grid}.practice-guidance{color:#92400e;background:#fef3c7;border-radius:8px;margin:16px 0;padding:10px 12px;font-size:14px}.word-problem-guide,.retry-hint{text-align:left;background:#f8fafc;border-left:4px solid #2563eb;margin:18px 0;padding:12px 16px}.word-problem-guide h3,.retry-hint h3,.word-problem-guide p,.retry-hint p{margin:0}.word-problem-guide ol{margin:8px 0 0;padding-left:22px}.word-problem-guide.compact{font-size:14px}.hero .lesson-button{color:#1e3a8a;text-align:left;background:#eff6ff;gap:6px;display:grid}.hero .lesson-button:hover{background:#dbeafe}.lesson-button strong{font-size:18px}.lesson-button .lesson-count{color:#2563eb;margin-top:4px;font-size:14px;font-weight:700}.hero .lesson-progress{color:#1e3a8a;margin:0;font-size:14px}.hero .question-button{color:#1e3a8a;text-align:left;background:#eff6ff;flex-direction:column;gap:4px;display:flex}.hero .question-button:hover{background:#dbeafe}.question-button span{font-size:14px}.question-button .status-correct,.question-button .status-pending{width:fit-content;font-size:13px}.question-button .difficulty{color:#b45309;font-size:13px}.review-list{gap:12px;margin:24px 0;display:grid}.review-filters{gap:8px;margin-top:24px;display:flex}.lesson-filter-label{color:#475569;text-align:left;margin-top:20px;font-size:14px;font-weight:700;display:block}.lesson-filter-select{font:inherit;border:1px solid #cbd5e1;border-radius:8px;width:100%;margin-top:8px;padding:10px}.hero .filter-button{color:#475569;background:#fff;border:1px solid #cbd5e1;width:auto;padding:8px 12px;font-size:14px}.hero .filter-button-active,.hero .filter-button:hover{color:#1d4ed8;background:#dbeafe;border-color:#2563eb}.review-item{text-align:left;background:#f8fafc;border-radius:12px;justify-content:space-between;align-items:center;padding:16px;display:flex}.review-item p,.review-item h3{margin:0}.review-item h3{margin:4px 0 8px}.review-item .review-category{color:#64748b;margin-bottom:8px;font-size:13px}.attempt-label{color:#64748b;margin-top:8px;font-size:13px;display:block}.review-item button{width:auto;padding:10px 16px}.status-correct,.status-pending{border-radius:999px;padding:4px 8px;font-size:13px}.status-correct{color:#166534;background:#dcfce7}.status-pending{color:#92400e;background:#fef3c7}.empty-message{color:#64748b;margin:24px 0}@media (width<=480px){.app-header{padding:0 16px}.app-brand{font-size:18px}.hero{border-radius:16px;padding:24px 18px}.hero h1{font-size:1.75rem}.review-item{flex-direction:column;align-items:flex-start;gap:12px}.review-item button{width:100%}}@media (height<=600px) and (orientation:landscape){.app{align-items:flex-start;padding:12px}.hero{width:min(920px,100%);padding:20px 28px}.hero h1{margin-bottom:8px;font-size:1.6rem}.hero h2{margin-bottom:10px;font-size:1.1rem}.hero p{margin-bottom:16px}.hero .question-text{margin-top:14px;font-size:15px}.hints,.answer-form{margin-top:16px}}.hints{text-align:left;margin-top:24px}.hints h3{margin-bottom:12px}.hints p{background:#f8fafc;border-left:4px solid #2563eb;margin:8px 0;padding:12px}.hints button{margin-top:8px}.answer-form{text-align:left;gap:12px;margin:32px 0 16px;display:grid}.answer-form label{color:#222;font-weight:700}.answer-form input{font:inherit;border:1px solid #cbd5e1;border-radius:12px;padding:14px}.answer-form input:focus{border-color:#2563eb;outline:2px solid #bfdbfe}.answer-form .input-error{color:#b91c1c;margin:0;font-size:14px}.explanation{text-align:left;background:#eff6ff;border-radius:12px;margin:24px 0;padding:20px}.explanation h3{margin-top:0}.explanation p{margin:8px 0}.attempt-count{color:#64748b;margin-top:-20px;font-size:14px}.completion-message{color:#166534;background:#dcfce7;border-radius:12px;padding:16px}.completion-message h3,.completion-message p{margin:0}.completion-message h3{font-size:18px}.completion-message p{margin-top:8px}@media (height<=600px) and (orientation:landscape){.hints{margin-top:16px}.answer-form{margin:16px 0 12px}.explanation{margin:16px 0;padding:16px}}