:root{--color-bg:#f2f6ff;--color-surface:#fff;--color-text:#2b3a55;--color-primary:#4f7cff;--color-primary-dark:#3a63d9;--color-accent:#ffb03a;--color-success:#3ec97e;--color-danger:#e05a7a;--color-muted:#8494b3;--color-line:#dde6f5;--radius:16px;--shadow:0 4px 16px #2f52a01f;--font-body:"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;--font-display:"Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-body);color:var(--color-text);-webkit-font-smoothing:antialiased;background-color:var(--color-bg);background-image:linear-gradient(#f6f9ffc7,#f6f9ffe0),url(/bg.jpg);background-position:50%;background-size:cover;background-attachment:fixed}h1,h2,h3,button{font-family:var(--font-display)}.app-logo{font-family:var(--font-display);color:var(--color-primary-dark);background:var(--color-surface);box-shadow:var(--shadow);letter-spacing:.06em;border-radius:999px;padding:8px 22px;font-size:1.15rem;font-weight:800}.back-btn{background:var(--color-surface);border:2px solid var(--color-line);font-family:var(--font-display);color:var(--color-primary-dark);cursor:pointer;border-radius:999px;align-items:center;gap:7px;padding:8px 18px 8px 14px;font-size:.95rem;font-weight:800;transition:transform .12s,box-shadow .12s,border-color .12s;display:inline-flex;box-shadow:0 3px 10px #2f52a026}.back-btn:before{content:"↩";color:var(--color-accent);font-size:1.1rem}.back-btn:hover{border-color:var(--color-primary);transform:translate(-2px);box-shadow:0 5px 14px #2f52a038}.back-btn:active{transform:scale(.97)}.greeting-row{align-items:center;gap:12px;display:flex}.avatar{object-fit:cover;border:3px solid var(--color-surface);width:52px;height:52px;box-shadow:var(--shadow);background:var(--color-surface);border-radius:50%;justify-content:center;align-items:center;font-size:1.6rem;display:inline-flex}.avatar.big{width:84px;height:84px;font-size:2.4rem}.photo-row{align-items:center;gap:16px;display:flex}.photo-actions{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.file-btn{cursor:pointer;display:inline-block}.screen{flex-direction:column;align-items:center;max-width:720px;min-height:100%;margin:0 auto;padding:20px 16px 32px;display:flex}.card{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:14px;width:100%;max-width:480px;padding:24px;display:flex}.card h2{font-size:1.3rem}label{flex-direction:column;gap:6px;font-size:.9rem;font-weight:600;display:flex}input,select{border:2px solid var(--color-line);font-size:1.05rem;font-family:var(--font-body);color:var(--color-text);background:#fff;border-radius:12px;padding:10px 12px}input:focus,select:focus{border-color:var(--color-primary);outline:none}.btn-primary{background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color:#fff;font-size:1.05rem;font-weight:700;font-family:var(--font-body);cursor:pointer;border:none;border-radius:14px;padding:13px 22px;transition:transform .1s,box-shadow .15s;box-shadow:0 4px 10px #4f7cff59}.btn-primary:hover{transform:translateY(-1px)}.btn-primary:active{transform:translateY(1px)scale(.98)}.btn-primary:disabled{opacity:.45;cursor:default;transform:none}.btn-primary.big{padding:16px 28px;font-size:1.25rem}.btn-secondary{background:var(--color-surface);color:var(--color-primary);border:2px solid var(--color-primary);font-size:1rem;font-weight:700;font-family:var(--font-body);cursor:pointer;border-radius:14px;padding:11px 20px}.link-btn{color:var(--color-muted);cursor:pointer;font-size:.95rem;font-family:var(--font-body);background:0 0;border:none;padding:8px}.btn-row{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.btn-danger{background:var(--color-danger);color:#fff;font-size:1rem;font-weight:700;font-family:var(--font-body);cursor:pointer;border:none;border-radius:14px;padding:11px 20px}.settings-message{color:#1d7a4d;background:#e8f9f0;border-radius:10px;padding:10px 14px}.error{color:var(--color-danger);font-size:.9rem;font-weight:600}.note{color:var(--color-muted);font-size:.85rem;line-height:1.6}.app-title{color:var(--color-primary-dark);margin:12px 0 20px;font-size:1.6rem}.choice-btn{text-align:left;border:2px solid var(--color-line);font-size:1rem;font-family:var(--font-body);color:var(--color-text);cursor:pointer;background:#fff;border-radius:12px;padding:13px 16px}.choice-btn.selected{border-color:var(--color-primary);background:#eef3ff;font-weight:700}.child-home{gap:18px}.home-header{flex-direction:column;gap:10px;width:100%;display:flex}.stats-row{justify-content:center;gap:10px;display:flex}.stat-badge{background:var(--color-surface);box-shadow:var(--shadow);border-radius:999px;padding:8px 16px;font-weight:700}.greeting{text-align:center;font-size:1.5rem}.subject-tabs{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.subject-tab{font-size:.92rem;font-weight:700;font-family:var(--font-body);background:var(--color-surface);color:var(--color-text);cursor:pointer;box-shadow:var(--shadow);border:none;border-radius:999px;padding:9px 16px}.subject-tab.active{background:var(--color-primary);color:#fff}.subject-tab.disabled{opacity:.5;cursor:default}.mission-card{text-align:center;gap:16px;padding:32px 24px}.mission-card h2{font-size:1.4rem}.mission-card.done{border:3px solid var(--color-success)}.home-footer{flex-direction:column;align-items:center;gap:2px;margin-top:auto;padding-top:24px;display:flex}.version-note{color:var(--color-muted);opacity:.75;font-size:.7rem}.child-switcher{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.chip{border:2px solid var(--color-line);font-family:var(--font-body);cursor:pointer;color:var(--color-text);background:#fff;border-radius:999px;padding:6px 14px;font-weight:600}.chip.active{border-color:var(--color-primary);background:#eef3ff}.mission-screen{gap:10px;max-width:860px;height:100dvh;padding:12px 12px 16px}.mission-header{align-items:center;gap:12px;width:100%;display:flex}.progress-bar{background:var(--color-line);border-radius:999px;flex:1;height:12px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--color-success), var(--color-primary));height:100%;transition:width .3s}.progress-text{color:var(--color-muted);font-weight:700}.question-area{width:100%}.mission-name{text-align:center;color:var(--color-muted);margin-bottom:6px;font-size:.85rem;font-weight:700}.question-card{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:12px;padding:20px;display:flex}.question-text{font-size:1.35rem;font-weight:700;line-height:1.5}.answer-row{gap:10px;display:flex}.answer-input{text-align:center;flex:1;font-size:1.3rem;font-weight:700}.input-hint{color:var(--color-muted);font-size:.8rem}.feedback-retry{color:var(--color-accent);font-size:1.05rem;font-weight:700}.feedback{text-align:center;flex-direction:column;gap:12px;padding:8px 0;display:flex}.feedback-big{color:var(--color-success);font-size:1.6rem;font-weight:800}.feedback.reveal p{line-height:1.7}.canvas-pad{flex-direction:column;flex:1;gap:6px;width:100%;min-height:220px;display:flex}.canvas-toolbar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.canvas-label{color:var(--color-muted);margin-right:auto;font-size:.8rem;font-weight:700}.tool-btn{border:2px solid var(--color-line);font-family:var(--font-body);cursor:pointer;color:var(--color-text);background:#fff;border-radius:10px;padding:6px 12px;font-size:.85rem}.tool-btn.active{border-color:var(--color-primary);background:#eef3ff;font-weight:700}.canvas-wrap{border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;flex:1;min-height:200px;overflow:hidden}.hub-caption{color:var(--color-muted);text-align:center;font-size:.9rem}.reminder-banner{border:2px solid var(--color-accent);color:#8a6d00;text-align:center;background:#fff3cd;border-radius:12px;width:100%;max-width:720px;padding:10px 14px;font-weight:700}.toggle-row{flex-direction:row;align-items:center;gap:8px}.toggle-row input{width:20px;height:20px}.brain-caption{font-family:var(--font-display);color:var(--color-accent);-webkit-text-stroke:.5px var(--color-primary-dark);letter-spacing:.04em;margin-top:-4px;font-size:1.5rem;font-weight:800}.subject-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;width:100%;max-width:720px;display:grid}.subject-card{background:var(--color-surface);border:3px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;font-family:var(--font-body);flex-direction:column;align-items:center;gap:6px;padding:20px 16px;transition:transform .1s;display:flex}.subject-card:hover{transform:translateY(-2px)}.subject-card.alert{border-color:var(--color-danger);background:#fff5f7}.subject-card.done{border-color:var(--color-success)}.subject-icon{font-size:2.2rem}.subject-title{color:var(--color-text);font-size:1.2rem;font-weight:800}.subject-desc{color:var(--color-muted);font-size:.78rem}.subject-status{border-radius:999px;margin-top:6px;padding:5px 12px;font-size:.82rem;font-weight:700}.subject-status.ok{color:#1d7a4d;background:#e8f9f0}.subject-status.ng{color:#b3123f;background:#ffe3e9}.choices-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;display:grid}.question-row{align-items:flex-start;gap:10px;display:flex}.question-row .question-text{flex:1}.speak-btn{border:2px solid var(--color-line);cursor:pointer;background:#fff;border-radius:12px;padding:6px 12px;font-size:1.3rem}.mission-screen.no-canvas{height:auto;min-height:100dvh}.reading-setup{max-width:560px}.speed-row{flex-wrap:wrap;gap:8px;display:flex}.speed-chip.locked{opacity:.45;cursor:default}.speed-chip small{color:var(--color-muted);font-size:.65rem;display:block}.reading-screen{gap:10px;max-width:720px;height:100dvh}.work-list{border:1px solid var(--color-line);border-radius:12px;flex-direction:column;gap:6px;max-height:300px;padding:8px;display:flex;overflow-y:auto}.work-item{font-family:var(--font-body);cursor:pointer;text-align:left;background:#fff;border:2px solid #0000;border-radius:10px;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 12px;display:flex}.work-item.selected{border-color:var(--color-primary);background:#eef3ff}.work-title{color:var(--color-text);font-weight:700}.work-meta{color:var(--color-muted);white-space:nowrap;font-size:.75rem}.quiz-text{white-space:pre-line;font-size:1.1rem}.narration-badge{color:#1d7a4d;background:#e8f9f0;border-radius:999px;margin-left:8px;padding:2px 10px;font-size:.78rem;font-weight:700;display:inline-block}.reading-text{background:var(--color-surface);border-radius:var(--radius);width:100%;box-shadow:var(--shadow);flex:1;padding:24px;font-size:1.1rem;line-height:2.1;overflow-y:auto}.reading-line{border-radius:8px;padding:2px 6px;transition:background .2s,color .2s}.reading-line.current{background:#fff3cd;font-weight:700}.reading-line.read{color:var(--color-muted)}.lesson-screen{gap:10px;max-width:720px}.lesson-card{gap:16px;max-width:640px}.lesson-body{font-size:1.02rem;line-height:1.9}.lesson-examples{background:#f4f7ff;border-radius:12px;flex-direction:column;gap:8px;padding:14px;display:flex}.lesson-example{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.lesson-en{color:var(--color-primary-dark);min-width:90px;font-size:1.1rem;font-weight:800}.lesson-jp{color:var(--color-muted);font-size:.92rem}.speak-btn.small{padding:3px 8px;font-size:1rem}.lesson-nav{justify-content:space-between}.mission-card.lesson-ready{border:3px solid var(--color-accent);background:#fffaf0}.progress-text.time-up{color:var(--color-danger)}.goal-meter{text-align:center;flex-direction:column;gap:6px;width:100%;display:flex}.goal-meter.home-goal{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);max-width:480px;padding:12px 16px}.goal-label{color:var(--color-muted);font-size:.85rem;font-weight:700}.goal-dots{justify-content:center;gap:10px;font-size:1.4rem;display:flex}.result-screen{justify-content:center}.result-card{text-align:center;align-items:center;gap:16px}.result-emoji{font-size:3.5rem}.result-score{font-size:1.2rem}.result-sub{color:var(--color-success);font-weight:700}.result-rewards{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.reward-badge{border:2px solid var(--color-accent);background:#fff6e5;border-radius:999px;padding:8px 16px;font-weight:700}.reward-badge.rare{border-color:var(--color-danger);background:#ffe5ec}.gate-screen{justify-content:center}.pin-input{text-align:center;letter-spacing:12px;font-size:2rem}.parent-screen{align-items:stretch;gap:14px;max-width:860px}.parent-header{justify-content:space-between;align-items:center;display:flex}.parent-header h1{font-size:1.3rem}.tab-bar{gap:8px;display:flex}.tab{font-family:var(--font-body);background:var(--color-surface);color:var(--color-muted);cursor:pointer;box-shadow:var(--shadow);border:none;border-radius:12px;flex:1;padding:10px;font-size:.95rem;font-weight:700}.tab.active{background:var(--color-primary);color:#fff}.tab-content{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:14px;padding:20px;display:flex}.summary-cards{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;display:grid}.summary-card{background:#eef3ff;border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:14px;display:flex}.summary-value{color:var(--color-primary-dark);font-size:1.3rem;font-weight:800}.summary-label{color:var(--color-muted);font-size:.75rem;font-weight:600}.stats-table{border-collapse:collapse;width:100%;font-size:.85rem}.stats-table th,.stats-table td{text-align:left;border-bottom:1px solid var(--color-line);padding:8px 10px}.stats-table th{color:var(--color-muted);font-size:.75rem}.weak-row{background:#fff2f2}.notes-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;display:grid}.note-item{border:1px solid var(--color-line);border-radius:12px;overflow:hidden}.note-item img{background:#fff;width:100%;display:block}.note-item figcaption{color:var(--color-muted);padding:8px 10px;font-size:.78rem}.roadmap{color:var(--color-muted);padding-left:20px;font-size:.88rem;line-height:1.9}