.ond-app{--brand:#e8473f;--brand-d:#c5392f;--cream:#fff7f0;--surface:#fff;--ink:#3d2a20;--muted:#9a8678;--line:#f0e2d6;--ondoku:#1fa39e;--ondoku-l:#e4f6f5;--soft:0 8px 22px rgba(61,42,32,.08);
  color:var(--ink);font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;max-width:760px;margin:0 auto;padding:6px 2px 40px}
.ond-practice{max-width:480px!important;margin-left:auto!important;margin-right:auto!important;padding-left:16px;padding-right:16px;padding-bottom:80px}
/* 音読練習ページではページ側h1も480pxカラムに揃える */
.ond-app *{box-sizing:border-box}
.ond-app ruby rt{font-size:.55em;font-weight:700}

/* hero */
.ond-hero{display:flex;align-items:center;gap:16px;background:var(--surface);border:2px solid var(--line);border-radius:24px;padding:20px 22px;box-shadow:var(--soft);margin-bottom:18px}
.ond-hero-icn{width:64px;height:64px;border-radius:18px;background:var(--ondoku-l);display:grid;place-items:center;font-size:32px;flex-shrink:0}
.ond-hero h1{font-size:22px;margin:0 0 4px;font-weight:900}
.ond-hero p{margin:0;color:var(--muted);font-size:13px;font-weight:700;line-height:1.6}

/* list */
.ond-grade{margin-bottom:22px}
.ond-grade-h{font-size:16px;font-weight:900;color:var(--ondoku);margin:0 0 11px;padding-left:4px}
.ond-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:11px}
.ond-card{display:flex;flex-direction:column;gap:9px;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:14px 15px;text-decoration:none;color:inherit;box-shadow:var(--soft);transition:transform .12s,border-color .12s}
.ond-card:hover{transform:translateY(-3px);border-color:var(--ondoku-l)}
.ond-card.is-preparing{border-style:dashed;background:#fffaf5}
.ond-card-title{font-size:15px;font-weight:900;line-height:1.45}
.ond-card-tags{display:flex;gap:6px}
.ond-tag{font-size:11px;font-weight:800;border-radius:999px;padding:2px 9px}
.ond-tag.is-vid{background:var(--ondoku-l);color:var(--ondoku)}
.ond-tag.is-ready{background:#e9f7ef;color:#16824c}
.ond-tag.is-prep{background:#fff1e2;color:#b76b14}
.ond-tag.is-guide{background:#f3eefc;color:#7a56a5}
.ond-tag.is-score{background:#fff1e2;color:#d9822b}

/* practice */
.ond-back{display:inline-block;margin:2px 0 12px;color:var(--muted);font-weight:800;font-size:13px;text-decoration:none}
.ond-back:hover{color:var(--ink)}
.ond-pdf-link{display:inline-flex;align-items:center;font-size:13px;font-weight:800;color:var(--ondoku);text-decoration:none;background:var(--ondoku-l);border:2px solid transparent;border-radius:999px;padding:4px 13px}
.ond-pdf-link:hover{opacity:.8}
.ond-p-head{margin-bottom:14px;text-align:center}
.ond-p-grade{display:inline-block;background:var(--ondoku-l);color:var(--ondoku);font-weight:800;font-size:12px;border-radius:999px;padding:2px 11px;margin-bottom:6px}
.ond-p-title{font-size:23px;font-weight:900;margin:0}
.ond-block{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:17px 18px;box-shadow:var(--soft);margin-bottom:16px}
.ond-block-h{font-size:15px;font-weight:900;margin:0 0 12px;color:var(--ink)}
.ond-try{margin:0 0 14px;font-size:13px;font-weight:800;line-height:1.7;color:var(--muted)}
.ond-note p{margin:0;font-weight:700;line-height:1.7;color:var(--muted)}
.ond-note a{color:var(--ondoku);font-weight:800}
.ond-empty{margin:0;font-size:14px;font-weight:800;line-height:1.7;color:var(--muted);background:var(--cream);border-radius:12px;padding:13px 15px}
.ond-quota{margin:0 0 14px;background:var(--cream);border:2px solid var(--line);border-radius:14px;padding:11px 13px;font-size:12px;font-weight:800;line-height:1.6;color:var(--muted)}
.ond-quota p{margin:0}
.ond-quota strong{color:var(--brand);font-weight:900}
.ond-quota a{color:var(--ondoku);font-weight:900;text-decoration:none}
.ond-quota-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ond-quota-actions a{display:inline-block;background:#fff;border:2px solid var(--ondoku);border-radius:999px;padding:5px 12px;color:var(--ondoku)}
.ond-prep-notice{margin:0 0 14px;background:#fff7e8;border:2px solid #f1d0a6;border-radius:14px;padding:12px 14px;color:#8a5b00;font-size:13px;font-weight:800;line-height:1.6}
.ond-prep-notice strong{display:block;font-size:14px;font-weight:900;margin-bottom:3px}
.ond-prep-notice p{margin:0}

/* lesson guidance */
.ond-guide{background:#fbf8ff;border:2px solid #eadff8;border-radius:18px;padding:15px 16px;margin-bottom:16px}
.ond-guide-h{font-size:15px;font-weight:900;margin:0 0 10px;color:var(--ink)}
.ond-guide-grid{display:grid;gap:10px}
.ond-guide-item{background:#fff;border:1px solid #eadff8;border-radius:12px;padding:11px 13px}
.ond-guide-item h3{margin:0 0 6px;font-size:13px;font-weight:900;color:#7a56a5}
.ond-guide-item p{margin:0;font-size:13px;font-weight:800;line-height:1.7;color:var(--ink)}

/* lesson link */
.ond-course-link{display:flex;width:fit-content;align-items:center;justify-content:center;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;font-weight:900;padding:10px 18px;margin:0 auto}
.ond-course-link:hover{opacity:.9}

/* recording stage (light, familiar voice-recorder) */
.ond-studio{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:20px 10px;box-shadow:var(--soft);margin-bottom:16px;aspect-ratio:1}
.ond-wave{display:block;width:100%;flex:1 1 0;min-height:0;max-height:200px;background:var(--cream);border-radius:14px}
.ond-rec-status{display:flex;align-items:center;justify-content:center;gap:7px;margin:0;text-align:center;font-size:14px;font-weight:800;color:var(--muted);line-height:1.6;min-height:1.5em}
.ond-app.is-rec .ond-rec-status{color:var(--brand)}
.ond-app.is-rec .ond-rec-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand);animation:ond-blink 1s steps(2,start) infinite}
@keyframes ond-blink{50%{opacity:.25}}

/* round record button */
.ond-mic-wrap{position:relative;display:grid;place-items:center;padding:4px;margin-top:auto}
.ond-btn.ond-mic{position:relative;box-sizing:border-box;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;padding:0;background:var(--brand);border:4px solid #fff;box-shadow:0 0 0 1.5px #d9ccbd,0 2px 8px rgba(61,42,32,.16)}
.ond-btn.ond-mic:disabled{cursor:not-allowed;background:#d6c8bb;box-shadow:0 0 0 1.5px #d9ccbd}
.ond-mic::before{content:"";box-sizing:border-box;width:0;height:0;border-radius:8px;background:#fff;transition:width .15s,height .15s}
.ond-app.is-rec .ond-mic::before{width:24px;height:24px}
.ond-mic:active{transform:translateY(2px);box-shadow:0 0 0 1.5px #d9ccbd,0 1px 5px rgba(61,42,32,.16)}
.ond-mic-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ond-app.is-rec .ond-mic-wrap::before{content:"";position:absolute;width:74px;height:74px;border-radius:50%;border:3px solid rgba(232,71,63,.45);animation:ond-pulse 1.8s ease-out infinite}
@keyframes ond-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.ond-app.is-rec .ond-mic-wrap::before{animation:none;opacity:.35}.ond-app.is-rec .ond-rec-status::before{animation:none}}

.ond-btn{border:none;border-radius:999px;font-family:inherit;font-weight:800;cursor:pointer;font-size:16px;padding:13px 22px}
.ond-btn-play{background:var(--ondoku);color:#fff;box-shadow:0 3px 0 #16726e}
.ond-btn-play:active{transform:translateY(3px);box-shadow:0 1px 0 #16726e}
.ond-players{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.ond-feedback{margin:0 0 16px;padding:0;background:transparent;font-size:14px;font-weight:800;color:#0e6d68;line-height:1.7}
.ond-feedback .ond-fb-warn{color:#b23129}
.ond-privacy{margin:14px 0 0;font-size:11px;font-weight:700;color:var(--muted);line-height:1.6;text-align:center}
.ond-app.no-voice .ond-privacy{display:none}

/* score result */
.ond-result{background:var(--ondoku-l);border:2px solid rgba(31,163,158,.28);border-radius:18px;padding:15px}
.ond-result-head{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}
.ond-result-head span{font-size:13px;color:#0e6d68;font-weight:900}
.ond-result-head strong{grid-row:1/3;grid-column:2;font-size:42px;line-height:1;color:#0e6d68;font-weight:900}
.ond-result-head strong small{font-size:16px;margin-left:2px}
.ond-result-head em{font-style:normal;font-size:18px;color:var(--ink);font-weight:900}
.ond-result-msg{margin:12px 0 14px;background:#fff;border-radius:12px;padding:10px 12px;color:var(--ink);font-size:14px;font-weight:900;line-height:1.6}
.ond-meters{display:grid;gap:10px}
.ond-meter{background:#fff;border-radius:12px;padding:10px 12px}
.ond-meter-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink);font-weight:900}
.ond-meter-top strong{color:#0e6d68;font-size:14px;white-space:nowrap}
.ond-meter-bar{height:9px;background:#d8efee;border-radius:999px;overflow:hidden;margin:8px 0 6px}
.ond-meter-bar span{display:block;height:100%;background:linear-gradient(90deg,#1fa39e,#f0a500);border-radius:999px}
.ond-meter p{margin:0;color:var(--muted);font-size:11px;font-weight:800;line-height:1.5}
.ond-assist{margin-top:12px;background:#fff;border:2px solid rgba(240,165,0,.35);border-radius:12px;padding:11px 12px;color:var(--ink)}
.ond-assist strong{display:block;margin-bottom:7px;color:#8a5b00;font-size:13px;font-weight:900}
.ond-assist ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.ond-assist li{font-size:12px;font-weight:800;line-height:1.55}
.ond-assist li span{display:inline-block;margin-right:6px;color:#0e6d68;font-weight:900}
.ond-assist p{margin:9px 0 0;color:var(--muted);font-size:12px;font-weight:900;line-height:1.55}
.ond-result-note{margin:10px 0 0;color:var(--muted);font-size:12px;font-weight:800;line-height:1.6}
.ond-result-time{margin:10px 0 0;color:#0e6d68;font-size:12px;font-weight:900}
.ond-result-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.ond-result-primary,.ond-result-secondary{border:none;border-radius:999px;font-family:inherit;font-size:14px;font-weight:900;padding:10px 16px;text-decoration:none;cursor:pointer}
.ond-result-primary{background:var(--brand);color:#fff;box-shadow:0 3px 0 var(--brand-d)}
.ond-result-secondary{background:#fff;color:var(--ondoku);border:2px solid var(--ondoku)}
.ond-result-primary:active,.ond-result-secondary:active{transform:translateY(2px)}

/* welcome banner */
.ond-welcome{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;background:var(--ondoku-l);border:2px solid var(--ondoku);border-radius:18px;padding:15px 18px;margin-bottom:18px;flex-wrap:wrap}
.ond-welcome-body{display:flex;align-items:flex-start;gap:12px;flex:1 1 240px}
.ond-welcome-icon{font-size:28px;line-height:1;flex-shrink:0}
.ond-welcome-msg{margin:0 0 8px;font-size:14px;font-weight:800;line-height:1.6;color:var(--ink)}
.ond-welcome-vid{display:inline-block;font-size:13px;font-weight:800;background:var(--ondoku);color:#fff;border-radius:999px;padding:5px 15px;text-decoration:none}
.ond-welcome-vid:hover{opacity:.85}
.ond-welcome-close{flex-shrink:0;align-self:center;border:2px solid var(--ondoku);background:transparent;color:var(--ondoku);border-radius:999px;font-family:inherit;font-size:12px;font-weight:800;padding:6px 14px;cursor:pointer;white-space:nowrap}
.ond-welcome-close:hover{background:var(--ondoku);color:#fff}

/* video link（練習ページ・小さく） */
.ond-p-links{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.ond-video-link{display:inline-flex;align-items:center;font-size:13px;font-weight:800;color:var(--muted);text-decoration:none;border:2px solid var(--line);border-radius:999px;padding:4px 13px;background:var(--cream)}
.ond-video-link:hover{border-color:var(--muted);color:var(--ink)}

@media(max-width:560px){
  .ond-app{padding:4px 0 80px}
  .ond-practice{padding-left:0;padding-right:0}
  .ond-hero{padding:16px}
  .ond-grid{grid-template-columns:repeat(2,1fr)}
  .ond-studio{padding:14px 12px 18px;aspect-ratio:auto}
  .ond-wave{flex:none;height:72px!important}
  .ond-p-title{font-size:21px}
}