:root{
  --bg:#f7f4ee;--card:#fff;--ink:#20211f;--muted:#6f716c;--line:#e4e0d8;
  --accent:#315c49;--accent2:#e9f0eb;--danger:#9a3e3e;--shadow:0 12px 28px rgba(50,45,37,.08)
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.top{padding:max(18px,env(safe-area-inset-top)) 18px 12px;display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
h1{font-size:24px;margin:2px 0 0}h2{margin:0 0 8px;font-size:21px}h3{margin:0 0 8px}
.eyebrow{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.08em}
.badge{font-size:12px;padding:7px 10px;border-radius:999px;background:#eee;color:#555;white-space:nowrap}
.badge.ok{background:#e5f2e9;color:#27543e}.badge.warn{background:#fff0d8;color:#78531f}
.tabs{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 12px;background:rgba(247,244,238,.95);backdrop-filter:blur(14px)}
.tab{border:0;border-radius:12px;padding:10px 6px;background:transparent;color:var(--muted);font-weight:700}
.tab.active{background:var(--card);color:var(--accent);box-shadow:0 3px 12px rgba(0,0,0,.05)}
main{max-width:760px;margin:0 auto;padding:10px 14px calc(40px + env(safe-area-inset-bottom))}
.screen{display:none}.screen.active{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;margin:10px 0;box-shadow:var(--shadow)}
.hero{display:flex;gap:16px;align-items:center;justify-content:space-between}.hero p{margin:6px 0;color:var(--muted);line-height:1.6}
.primary,.secondary,.danger{border-radius:14px;padding:12px 15px;font-weight:700;min-height:44px}
.primary{border:0;background:var(--accent);color:#fff}.secondary{border:1px solid var(--line);background:#fff;color:var(--ink)}.danger{border:1px solid #edc9c9;background:#fff3f3;color:var(--danger)}
.hidden{display:none!important}.muted{color:var(--muted)}
.progress{margin:10px 2px}.progress span{font-size:13px;color:var(--muted)}.progress>div{height:6px;border-radius:9px;background:#e7e4dd;margin-top:6px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s}
.lesson{padding:16px}.step-title{display:flex;gap:10px;align-items:center;margin-bottom:12px}.step-title span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent2);color:var(--accent);font-weight:800}
.kanji-big{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;text-align:center;font-size:min(40vw,180px);line-height:1.1;margin:8px 0}
.kanji-big.hidden-model{color:transparent;text-shadow:0 0 0 #d8d3ca}
.stroke-box{min-height:230px;border:1px dashed #d7d1c7;border-radius:16px;display:grid;place-items:center;padding:10px;background:#fdfcf9;overflow:hidden}
.stroke-box svg{width:min(70vw,280px);height:min(70vw,280px)}.stroke-box p{color:var(--muted)}
.stroke-box path.animated{fill:none!important;stroke:#222!important;stroke-width:3!important;stroke-linecap:round;stroke-linejoin:round}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.row>*{flex:1 1 150px;text-align:center}
.practice-box,.quiz-box,.reflection{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.practice-box p,.quiz-box p,.reflection p{color:var(--muted);line-height:1.6}
.photo-preview{min-height:140px;background:#f2f0eb;border-radius:14px;display:grid;place-items:center;overflow:hidden;color:var(--muted);margin-top:10px}.photo-preview img{display:block;width:100%;max-height:360px;object-fit:contain;background:#111}
.filebtn{display:block;position:relative;overflow:hidden}.filebtn input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.msg{margin-top:10px;font-size:13px;color:var(--muted)}.msg.error{color:var(--danger)}.msg.ok{color:var(--accent)}
.answer{margin-top:10px;text-align:center;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:92px;background:#f7f4ee;border-radius:16px;padding:14px}
.reflection label{display:block;padding:11px 8px;border-bottom:1px solid #eee}.reflection input{width:20px;height:20px;vertical-align:-4px;margin-right:8px}.parent-check{font-weight:700;color:var(--accent)}
.decision{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.kanji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:14px}.kg{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 6px;text-align:center}.kg b{display:block;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:32px}.kg small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.kg.due{border-color:#c9924d;background:#fff9ef}.kg.learned{background:#f0f7f2;border-color:#cce0d1}
.status-box{padding:12px 14px;border-radius:14px;background:#f4f2ed;margin:10px 0;line-height:1.6;font-size:14px}.note{background:#f0f7f2}
@media(max-width:520px){.top{align-items:center}.badge{max-width:42%;white-space:normal;text-align:center}.hero{display:block}.hero button{width:100%;margin-top:12px}.card{border-radius:16px;padding:15px}.tab{font-size:13px}.stroke-box{min-height:200px}}