:root{--ink:#172133;--muted:#5e6878;--navy:#12395b;--blue:#176b87;--pale:#eef7f8;--gold:#d49a35;--line:#d9e1e7;--white:#fff;--ok:#19724b;--bad:#a63434}*{box-sizing:border-box}html,body{margin:0;max-width:100%;overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;color:var(--ink);background:#f5f7f8;line-height:1.7;overflow-wrap:anywhere;word-break:normal}.wrap{width:min(1100px,calc(100% - 32px));margin:auto}.hero{background:linear-gradient(130deg,#102f4d,#176b87);color:#fff;padding:45px 0}.hero h1{font-family:Georgia,serif;font-size:clamp(2rem,7vw,3.4rem);line-height:1.1;margin:.25rem 0}.eyebrow{letter-spacing:.16em;font-size:.78rem;color:#ccecf2}.level-nav{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0}.level,button,select{font:inherit}.level,button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 14px;cursor:pointer}.level.active,.primary{background:var(--navy);color:#fff;border-color:var(--navy)}.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:18px;margin-bottom:32px}.topic-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 5px 18px #17334a0c}.topic-card h2{font-family:Georgia,serif;line-height:1.25}.topic-card button{width:100%;margin-top:10px}.badge{display:inline-block;background:var(--pale);color:var(--blue);border-radius:99px;padding:3px 10px;font-size:.82rem;font-weight:700}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(18px,4vw,34px);margin:24px 0;box-shadow:0 6px 24px #17334a0d}.hidden{display:none!important}.subtitle{font-weight:700;color:var(--blue)}.text-btn{border:0;padding:0;color:var(--blue);margin-bottom:18px}.settings{display:flex;align-items:end;gap:16px;flex-wrap:wrap;padding:18px;background:var(--pale);border-radius:12px;margin:20px 0}.settings fieldset{border:0;padding:0;margin:0}.settings legend{font-weight:700}.settings label{display:block}.settings .check{display:flex;align-items:center;gap:7px}.audio-box{padding:18px;border:1px solid var(--line);border-radius:12px;margin:12px 0}.audio-box audio{width:100%;max-width:100%}.audio-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.notice{background:#fff6df;border-left:4px solid var(--gold);padding:10px 14px}.question{border-top:1px solid var(--line);padding:20px 0}.question textarea{display:block;width:100%;min-height:90px;margin:10px 0;padding:12px;font:inherit;border:1px solid #aab8c2;border-radius:9px;resize:vertical}.translation,.model{background:#f6f8f9;padding:10px;border-radius:8px}.feedback.good{color:var(--ok)}.feedback.bad,.error{color:var(--bad)}.result{font-size:1.1rem;font-weight:700;padding:16px;background:var(--pale);margin:16px 0;border-radius:10px}.content-block{border-top:1px solid var(--line);padding:18px 0}.content-block summary{font-size:1.15rem;font-weight:700;cursor:pointer}.line,.expression{padding:11px 0;border-bottom:1px dotted var(--line)}.line p{margin:.2rem 0}.line .en{font-weight:650}.line .ja{color:var(--muted)}.expression h4{margin:0}.tag{display:inline-block;font-size:.75rem;background:#edf0f3;padding:2px 7px;border-radius:5px;margin:2px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.summary div{text-align:center;background:var(--pale);padding:14px;border-radius:10px}.summary strong,.summary span{display:block}.summary strong{font-size:1.8rem;color:var(--navy)}#progressChart{display:block;width:100%;height:auto;max-height:240px;margin:18px 0}.mistake-row{padding:10px;border-bottom:1px solid var(--line)}footer{background:var(--navy);color:#fff;margin-top:40px;padding:24px 0}.youtube-wrap{position:relative;width:100%;max-width:960px;margin:14px auto 0;padding-top:56.25%;overflow:hidden;border-radius:12px;background:#102f49}.youtube-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.reverse-training{margin:28px 0;padding:24px;border:1px solid #c8dce5;border-radius:18px;background:linear-gradient(180deg,#f5fbfd,#fff)}.reverse-training .eyebrow{color:var(--blue)}.reverse-training h3{margin:.2em 0;font-size:1.65rem}.reverse-settings{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:18px 0}.reverse-card{max-width:820px;margin:22px auto 0;padding:24px;border-radius:18px;background:#fff;border:2px solid #d8e6eb;box-shadow:0 8px 24px rgba(16,47,73,.08);text-align:center}.reverse-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.reverse-ja{margin:34px 0 14px;font-size:clamp(1.35rem,4vw,2rem);font-weight:700;line-height:1.6}.reverse-instruction{color:#687582}.reverse-answer{margin-top:22px;padding-top:20px;border-top:1px solid #dce5e9}.reverse-answer p{font-size:clamp(1.3rem,4vw,1.9rem);font-weight:700;line-height:1.5;color:#153f5b}.reverse-answer audio{width:min(100%,560px)}.reverse-judge{display:flex;justify-content:center;gap:14px;margin-top:20px}.reverse-judge button{min-width:120px}@media(max-width:620px){.wrap{width:min(100% - 20px,1100px)}.hero{padding:30px 0}.panel{border-radius:12px}.settings{display:block}.settings>*{margin:12px 0}.summary{gap:6px}.summary div{padding:9px 4px}.summary strong{font-size:1.35rem}.audio-controls button{flex:1 1 27%}.reverse-training{padding:16px}.reverse-settings{display:block}.reverse-settings>*{display:block;width:100%;margin:12px 0}.reverse-card{padding:17px}.reverse-judge{flex-direction:column}.reverse-judge button{width:100%}}