@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;700&display=swap');
:root{--ink:#17231e;--muted:#66716b;--paper:#f7f5ef;--card:#fff;--red:#d94b3d;--red-dark:#b6382e;--green:#2e7154;--mint:#e7f1eb;--line:#dedfd8;--shadow:0 18px 50px rgba(26,45,36,.09)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 'DM Sans',sans-serif}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);border-bottom:1px solid var(--line);background:rgba(247,245,239,.94);position:relative;z-index:2}.brand{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;font-size:17px;font-weight:700;line-height:1.15}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.13em;margin-top:3px}.brand-mark,.mini-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--red);color:#fff;border-radius:50%;font-family:'Noto Serif JP',serif;font-size:21px}.topbar nav{display:flex;align-items:center;gap:20px}.topbar nav a{color:var(--red);font-weight:600}.user-chip{padding:7px 13px;background:#fff;border:1px solid var(--line);border-radius:30px}main{min-height:calc(100vh - 140px)}footer{text-align:center;color:#7a827d;font-size:12px;padding:28px}.eyebrow{display:block;color:var(--red);font-size:11px;font-weight:700;letter-spacing:.16em;margin-bottom:8px}.auth-shell{min-height:calc(100vh - 135px);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:8vw;padding:7vh 10vw;background:radial-gradient(circle at 15% 70%,#efe2da 0,transparent 28%)}.auth-copy h1{font-family:'Noto Serif JP',serif;font-size:clamp(42px,6vw,76px);line-height:1.12;margin:14px 0}.auth-copy h1 em{color:var(--red);font-style:normal}.auth-copy p{max-width:520px;color:var(--muted);font-size:18px}.kana-cloud{font-family:'Noto Serif JP';font-size:32px;color:#cbbdb5;word-spacing:22px;margin-top:45px}.kana-cloud b{font-size:66px;color:#e9c9c1}.kana-cloud i{font-style:normal;color:#a8c3b2}.card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:6px}.login-card{padding:42px;max-width:460px}.login-card .mini-mark{margin-bottom:24px}.login-card h2{font-family:'Noto Serif JP';font-size:30px;margin:0}.muted{color:var(--muted)}label{display:block;font-weight:600;margin:18px 0 7px}input,textarea,select{width:100%;border:1px solid #ccd0cb;background:#fff;border-radius:4px;padding:13px 14px;font:inherit;color:var(--ink)}input:focus,textarea:focus,select:focus{outline:2px solid #e6aaa3;border-color:var(--red)}.btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;border:0;border-radius:4px;padding:12px 18px;font:600 14px 'DM Sans';cursor:pointer;text-decoration:none}.btn.primary{background:var(--red);color:#fff}.btn.primary:hover{background:var(--red-dark)}.btn.secondary,.btn.sound{background:#fff;color:var(--ink);border:1px solid var(--line)}.wide{width:100%;margin-top:18px}.demo-note{text-align:center;color:var(--muted);font-size:12px}.alert.error,.loading.error{color:#9e2e27;background:#fbe9e7;padding:11px}.dashboard-head{padding:64px max(6vw,30px) 32px;display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:auto}.dashboard-head h1{font-family:'Noto Serif JP';font-size:42px;margin:4px 0}.dashboard-head p{color:var(--muted)}.level-stamp{width:118px;height:118px;border:2px solid var(--red);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(4deg);color:var(--red)}.level-stamp small,.level-stamp span{font-size:9px;letter-spacing:.16em}.level-stamp b{font-size:36px;line-height:1}.stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:1400px;margin:0 auto 60px;padding:0 max(6vw,30px)}.stats article{background:#fff;border:1px solid var(--line);padding:24px 28px}.stats article+article{border-left:0}.stats span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.stats strong{font-family:'Noto Serif JP';font-size:36px}.stats small{color:var(--muted);margin-left:5px}.section-title{max-width:1400px;margin:0 auto 24px;padding:0 max(6vw,30px);display:flex;justify-content:space-between;align-items:end}.section-title h2{font:700 30px 'Noto Serif JP';margin:0}.section-title>p{color:var(--muted)}.topic-grid{max-width:1400px;margin:auto;padding:0 max(6vw,30px);display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.topic-card{position:relative;min-height:240px;padding:24px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:.2s}.topic-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfa9a4}.topic-icon{font-size:28px}.topic-number{position:absolute;right:18px;top:18px;color:#bbb;font-size:11px}.topic-card h3{font:700 25px 'Noto Serif JP';margin:18px 0 0}.topic-card strong{font-size:14px}.topic-card p{font-size:12px;color:var(--muted)}.topic-go{position:absolute;bottom:20px;color:var(--red);font-weight:700;font-size:12px}.history{margin:70px auto;max-width:1400px}.table-wrap{margin:0 max(6vw,30px);background:#fff;border:1px solid var(--line);overflow:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line)}th{font-size:11px;letter-spacing:.1em;color:var(--muted)}td a{color:var(--red)}.score-pill{background:var(--mint);color:var(--green);padding:5px 10px;border-radius:20px;font-weight:700}.conversation-shell{max-width:1320px;margin:34px auto;padding:0 24px}.conversation-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.conversation-top .back{color:var(--muted);text-decoration:none}.conversation-top>div{text-align:center}.conversation-top>div span,.conversation-top>div strong{display:block}.conversation-top>div span{font:700 20px 'Noto Serif JP'}.step-label{font-size:12px;background:#fff;border:1px solid var(--line);padding:7px 12px}.conversation-layout{display:grid;grid-template-columns:260px 1fr;min-height:650px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.sensei-panel{background:#203a2f;color:#fff;padding:48px 30px;text-align:center}.sensei-orb{width:132px;height:132px;border-radius:50%;background:linear-gradient(145deg,#f5d8cc,#d99883);border:5px solid rgba(255,255,255,.18);display:grid;place-items:center;margin:auto}.sensei-orb span{font:700 34px 'Noto Serif JP';color:#6d2e28}.status-dot{display:block;width:13px;height:13px;background:#63cf91;border:3px solid #203a2f;border-radius:50%;margin:-16px calc(50% - 53px) 0 auto;position:relative}.sensei-panel h2{margin:18px 0 0}.sensei-panel>p{margin:0;color:#aabdb4}.voice-state{display:flex;align-items:center;gap:12px;text-align:left;margin-top:45px;padding:14px;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}.voice-state b,.voice-state small{display:block}.voice-state small{color:#aabdb4}.practice-panel{padding:48px clamp(25px,6vw,80px)}.loading{text-align:center;padding:120px 20px;color:var(--muted)}.speaker-label{font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--red)}.question-box{padding:24px 0 26px;border-bottom:1px solid var(--line)}.question-box .jp{font:700 clamp(28px,4vw,42px) 'Noto Serif JP';margin:5px 0}.romaji{font-style:italic;color:#5e6862;margin:2px 0}.translation{color:var(--muted);margin:2px 0 20px}.furigana{font-size:13px;color:var(--red)}.controls{display:flex;flex-wrap:wrap;gap:7px 18px;padding:12px 0;border-bottom:1px solid var(--line)}.controls label{display:flex;align-items:center;gap:6px;margin:0;font-size:11px;color:var(--muted)}.controls input{width:auto}.controls select{width:auto;padding:3px}.answer-area{padding-top:28px}.mic-button{width:100%;display:flex;align-items:center;justify-content:center;gap:15px;padding:20px;border:1px dashed #c8c5bd;background:#faf9f5;margin-top:10px;cursor:pointer}.mic-button b,.mic-button small{display:block;text-align:left}.mic-button small{color:var(--muted)}.mic-icon{font-size:26px}.mic-button.listening{border-color:var(--red);background:#fcedeb;animation:pulse 1.2s infinite}.speech-status{text-align:center;color:var(--muted);font-size:12px;margin:8px}.transcript{background:var(--mint);border-left:3px solid var(--green);padding:13px 16px;margin-top:14px}.transcript p{font:600 20px 'Noto Serif JP';margin:3px 0}.text-link{border:0;background:none;color:var(--green);padding:0;cursor:pointer}#manual-wrap textarea{font-family:'Noto Serif JP';font-size:18px}.feedback{padding:22px;margin-top:22px;border:1px solid}.feedback.correct{background:#edf7f0;border-color:#aacdb6}.feedback.incorrect{background:#fff2ef;border-color:#e1b2ac}.feedback-title{font-weight:700;font-size:18px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:14px 0}.comparison>div{padding:12px;background:#fff}.comparison small{color:var(--muted);font-size:9px;letter-spacing:.1em}.comparison p{font:600 18px 'Noto Serif JP';margin:3px 0}.comparison>div:last-child p{color:var(--green)}.feedback-actions{display:flex;gap:10px}.teacher-reply{font:700 24px 'Noto Serif JP'}.result-shell{max-width:760px;margin:60px auto;padding:50px;background:#fff;border:1px solid var(--line);text-align:center;box-shadow:var(--shadow)}.result-shell h1{font:700 42px 'Noto Serif JP';margin:5px}.total-ring{width:150px;height:150px;border:10px solid var(--red);border-radius:50%;margin:30px auto;display:flex;flex-direction:column;justify-content:center}.total-ring strong{font-size:45px;line-height:1}.total-ring span{font-size:9px;letter-spacing:.12em}.score-bars{text-align:left}.score-bars span{display:flex;justify-content:space-between}.score-bars progress{width:100%;accent-color:var(--green)}.result-stats{display:flex;justify-content:center;gap:30px;margin:25px 0;padding:15px;background:var(--paper)}.result-stats b{display:block;font-size:22px}.mistake-list{text-align:left}.mistake-list article{padding:15px;border-left:3px solid var(--red);background:#fff6f4;margin:10px 0}.mistake-list p{margin:3px}.mistake-list .right{color:var(--green)}.result-actions{display:flex;gap:10px;justify-content:center;margin-top:30px}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(217,75,61,.1)}}
@media(max-width:1000px){.topic-grid{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-copy{display:none}.conversation-layout{grid-template-columns:1fr}.sensei-panel{padding:22px;display:grid;grid-template-columns:auto 1fr;align-items:center;text-align:left}.sensei-orb{width:70px;height:70px;grid-row:1/3}.sensei-orb span{font-size:20px}.sensei-panel h2,.sensei-panel p{margin:0 0 0 16px}.voice-state{display:none}.status-dot{display:none}}@media(max-width:620px){.topbar{height:65px}.user-chip{display:none}.dashboard-head{padding-top:35px}.dashboard-head h1{font-size:32px}.level-stamp{width:85px;height:85px}.stats{grid-template-columns:1fr;padding:0 20px}.stats article+article{border-left:1px solid var(--line);border-top:0}.section-title{display:block;padding:0 20px}.topic-grid{grid-template-columns:1fr;padding:0 20px}.topic-card{min-height:210px}.conversation-shell{padding:0 10px;margin:16px auto}.conversation-top .back{font-size:0}.conversation-top .back:after{content:'←';font-size:20px}.practice-panel{padding:25px 18px}.comparison{grid-template-columns:1fr}.feedback-actions,.result-actions{flex-direction:column}.auth-shell{padding:25px 18px}.login-card{padding:28px}.result-shell{margin:20px 10px;padding:28px 18px}}