:root{
  --navy:#0b1b3f;
  --navy2:#132a5c;
  --blue:#1763c4;
  --blue-d:#0a2a6b;
  --acc:#2563eb;
  --acc2:#38bdf8;
  --ink:#1f2937;
  --ink2:#4b5563;
  --mut:#6b7280;
  --mut2:#9ca3af;
  --line:#e5e7eb;
  --line2:#d1d5db;
  --card:#ffffff;
  --warn:#d97706;
  --warn-bg:#fffbeb;
  --ok:#059669;
  --red:#e11d48;
  --shadow:0 2px 10px rgba(5,20,55,.12);
  --shadow2:0 6px 22px rgba(5,20,55,.18);
  --r:16px;
  --bar:60px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:linear-gradient(170deg,var(--blue) 0%,var(--blue-d) 62%,var(--navy) 100%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---- 背景の光の粒（装飾） ---- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg i{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.5),rgba(56,189,248,0) 70%);
  animation:float 14s ease-in-out infinite;
}
.bg i:nth-child(1){width:180px;height:180px;left:-40px;top:8%;animation-duration:17s}
.bg i:nth-child(2){width:120px;height:120px;right:-20px;top:22%;animation-duration:13s;animation-delay:-3s}
.bg i:nth-child(3){width:220px;height:220px;left:30%;top:46%;animation-duration:21s;animation-delay:-7s;opacity:.7}
.bg i:nth-child(4){width:90px;height:90px;right:12%;top:62%;animation-duration:15s;animation-delay:-5s}
.bg i:nth-child(5){width:150px;height:150px;left:-30px;top:78%;animation-duration:19s;animation-delay:-11s}
.bg i:nth-child(6){width:70px;height:70px;right:28%;top:88%;animation-duration:12s;animation-delay:-2s}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(14px,-26px,0)}}
@media (prefers-reduced-motion:reduce){.bg i{animation:none}}

/* ---- ヘッダー ---- */
.hd{
  position:sticky;top:0;z-index:20;
  height:var(--bar);display:flex;align-items:center;gap:10px;
  padding:0 12px;padding-top:env(safe-area-inset-top,0px);
  background:rgba(11,27,63,.92);backdrop-filter:blur(8px);
  color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.hd-logo{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:block;overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.3);
}
.hd-logo svg{display:block;width:100%;height:100%}
.hd-ttl{flex:1;line-height:1.15;display:flex;flex-direction:column;gap:2px;min-width:0}
.hd-ttl b{font-size:14.5px;letter-spacing:.06em;white-space:nowrap}
.hd-ttl small{font-size:10px;color:#9fb6e0;letter-spacing:.06em;white-space:nowrap}
.hd-back{
  width:32px;height:32px;border:0;border-radius:10px;
  background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer;
}
.hd-add{
  flex:0 0 auto;border:0;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;
  background:var(--acc2);color:#06283c;cursor:pointer;
}

main{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:14px 14px calc(40px + var(--safe-b))}

/* ---- カード ---- */
.card{
  background:var(--card);border-radius:var(--r);padding:16px;
  box-shadow:var(--shadow);margin-bottom:14px;
}

/* ---- 進捗 ---- */
.prog-top b{font-size:15px}
.prog-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:10px 0 8px}
.prog-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .3s}
.prog-note{margin:0;font-size:12.5px;color:var(--mut);line-height:1.6}

/* ---- フィルタ ----
   2段ある（上がレベル / 下が状態）。同じ見た目だとどちらを触っているか分からないので、
   選択中の色を変えて段を区別する。 */
.filters{display:flex;gap:7px;margin-bottom:8px;overflow-x:auto;padding-bottom:2px}
.filters + .filters{margin-bottom:12px}
.fil{
  flex:0 0 auto;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:7px 13px;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.1);color:#dce7fa;cursor:pointer;
}
.fil.is-on{background:#fff;color:var(--navy);border-color:#fff}
.fil[data-lv].is-on{background:var(--acc2);color:var(--navy);border-color:var(--acc2)}

/* ---- 一覧 ---- */
.item{
  display:block;width:100%;text-align:left;border:0;cursor:pointer;
  background:var(--card);border-radius:var(--r);padding:14px;margin-bottom:10px;
  box-shadow:var(--shadow);font-family:inherit;
}
.item-no{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;
  padding:3px 9px;border-radius:999px;background:var(--navy);color:#fff;
  margin:0 7px 8px 0;vertical-align:middle;
}
/* レベルで色を変える。初級=緑／中級=青／上級=赤寄り */
.item[data-lv="初級"] .item-no{background:var(--ok)}
.item[data-lv="中級"] .item-no{background:var(--acc)}
.item[data-lv="上級"] .item-no{background:var(--red)}
.item-tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  padding:3px 8px;border-radius:999px;background:var(--line);color:var(--mut);
  margin-bottom:8px;vertical-align:middle;
}
.item.is-doing .item-tag{background:#eff6ff;color:var(--acc)}
.item.is-clear .item-tag{background:#ecfdf5;color:var(--ok)}
.item-en{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.5}
.item-ja{display:block;font-size:12.5px;color:var(--mut);margin-top:4px}
/* ★未着手は英文も和訳も読めないようにぼかす。
   最初は「音だけ聞いて何と言っているか当てる」ようにしたいので、
   一覧で答えが見えていると当てる楽しみが消えるため。
   練習中・クリア済みは、どれをもう一度やるか選べないと困るのでそのまま出す。
   ぼかしは STEP2 の `.en-blur`（輪郭は見せる）とは別物で、読めない強さにする。 */
.item.is-todo .item-en,
.item.is-todo .item-ja{
  filter:blur(6px);-webkit-filter:blur(6px);
  user-select:none;-webkit-user-select:none;pointer-events:none;
}
.item-hint{display:none;font-size:12px;color:var(--mut);margin-top:8px}
.item.is-todo .item-hint{display:block}
.empty{color:#cfddf5;font-size:13px;text-align:center;padding:24px 0}

/* ---- ステップナビ ---- */
.steps{display:flex;gap:6px;margin-bottom:14px}
.stp{
  flex:1;border:0;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 2px;border-radius:12px;
  background:rgba(255,255,255,.1);color:#c9d9f2;transition:background .2s,color .2s;
}
.stp i{
  font-style:normal;font-size:12px;font-weight:800;
  width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.16);
}
.stp span{font-size:10px;font-weight:600;letter-spacing:-.02em}
.stp.is-done{color:#fff}
.stp.is-done i{background:var(--acc2);color:#06283c}
.stp.is-on{background:#fff;color:var(--navy)}
.stp.is-on i{background:var(--acc);color:#fff}
/* 「慣れたら省略」をONにしたステップは、押せるけど薄く見せる */
.stp.is-skip:not(.is-on){opacity:.42}

/* ---- ペイン ---- */
.pane-h{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.pane-n{
  font-size:10.5px;font-weight:800;letter-spacing:.08em;
  color:var(--acc);background:#eff6ff;padding:3px 8px;border-radius:999px;
}
.pane-h b{font-size:17px}
.lead{margin:0 0 12px;font-size:13.5px;line-height:1.85;color:var(--ink2)}
.lead b{color:var(--ink)}
.note{margin:0;font-size:12.5px;color:var(--mut);line-height:1.75}
.note b{color:var(--ink2)}
.note.sm{font-size:11.5px;margin-top:10px}
.src{margin:12px 0 0;font-size:11px;color:var(--mut2);line-height:1.6}
.rule{
  margin:0 0 12px;font-size:13.5px;font-weight:600;line-height:1.8;
  background:var(--warn-bg);border-left:3px solid var(--warn);
  padding:10px 12px;border-radius:0 10px 10px 0;color:#7c4a06;
}
.rule b{color:#5c3503}

/* ============ イラスト ============ */
.ill{
  margin:-4px -4px 12px;border-radius:13px;
  background:linear-gradient(140deg,#0e2559,#133a86 58%,#1763c4);
  padding:10px 6px;overflow:hidden;
}
.ill svg{display:block;width:100%;height:auto}

/* STEP0 聞く：ヘッドホンに音が入っていく */
.ill-listen .hp{fill:none;stroke:#cfe6ff;stroke-width:2.8;stroke-linecap:round}
.ill-listen .hp rect{fill:#cfe6ff;stroke:none}
.ill-listen .wv path{fill:none;stroke:var(--acc2);stroke-width:2.8;stroke-linecap:round;opacity:0;animation:arc 2.1s ease-out infinite}
.ill-listen .wv path:nth-child(1),.ill-listen .wv path:nth-child(2){animation-delay:0s}
.ill-listen .wv path:nth-child(3),.ill-listen .wv path:nth-child(4){animation-delay:.3s}
.ill-listen .wv path:nth-child(5),.ill-listen .wv path:nth-child(6){animation-delay:.6s}
@keyframes arc{0%{opacity:0}22%{opacity:1}65%{opacity:0}100%{opacity:0}}

/* STEP1 ベース音 */
.ill-base .fig{fill:none;stroke:#cfe6ff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ill-base .thr .glow{fill:rgba(125,240,208,.95);stroke:none}
.ill-base .thr .ring{fill:none;stroke:#7df0d0;stroke-width:2;opacity:0;transform-origin:60px 58px;animation:pulse 2s ease-out infinite}
.ill-base .thr .r2{animation-delay:1s}
@keyframes pulse{0%{opacity:.85;transform:scale(.45)}100%{opacity:0;transform:scale(1.5)}}
.ill-base .base-line{fill:none;stroke:var(--acc2);stroke-width:3;stroke-linecap:round}
.ill-base .runner{fill:#7df0d0;filter:drop-shadow(0 0 5px rgba(125,240,208,.9))}

/* STEP2 管楽器：肺 → 管 → ベル → 切れない1本の音 → その上に単語。
   管の中の息も、出てきた音も、線は絶対に切らない（破線にしない）。
   流れていることは「中を走る粒」だけで見せる。 */
.ill-tube .lung{fill:rgba(159,212,255,.14);stroke:#9fd4ff;stroke-width:2.2;stroke-linejoin:round;
  animation:breath 2.6s ease-in-out infinite;transform-origin:30px 72px}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.ill-tube .tube{fill:none;stroke:rgba(255,255,255,.28);stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.ill-tube .flow{fill:none;stroke:#7df0d0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.ill-tube .runner{fill:#7df0d0;filter:drop-shadow(0 0 5px rgba(125,240,208,.95))}
.ill-tube .holes circle{fill:#0e2559;stroke:var(--acc2);stroke-width:2}
.ill-tube .bell{fill:rgba(255,255,255,.3);stroke:rgba(255,255,255,.55);stroke-width:1.6;stroke-linejoin:round}
.ill-tube .out{fill:none;stroke:var(--acc2);stroke-width:3;stroke-linecap:round;
  animation:outglow 2.2s ease-in-out infinite}
@keyframes outglow{0%,100%{opacity:.6}50%{opacity:1}}
.ill-tube .words rect{fill:#ffb4c6;animation:ride 1.8s ease-in-out infinite}
.ill-tube .words rect:nth-child(2){animation-delay:.3s}
.ill-tube .words rect:nth-child(3){animation-delay:.6s}
@keyframes ride{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(-3px);opacity:1}}

/* STEP3 聞き比べ */
.ill-ab .bars rect{animation:bar 1.4s ease-in-out infinite;transform-origin:center}
.ill-ab .bars-a rect{fill:var(--acc2)}
.ill-ab .bars-b rect{fill:#ffb4c6}
.ill-ab .bars rect:nth-child(2){animation-delay:.12s}
.ill-ab .bars rect:nth-child(3){animation-delay:.24s}
.ill-ab .bars rect:nth-child(4){animation-delay:.36s}
.ill-ab .bars rect:nth-child(5){animation-delay:.48s}
.ill-ab .bars rect:nth-child(6){animation-delay:.6s}
.ill-ab .bars-b rect{animation-duration:1.9s}
@keyframes bar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.ill-ab .swap path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.75;animation:swap 2s ease-in-out infinite}
.ill-ab .swap path:nth-child(2){animation-delay:1s}
@keyframes swap{0%,100%{opacity:.3}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .ill *{animation:none !important;opacity:1 !important}
}

/* ---- ボタン ---- */
.btn{
  display:block;width:100%;border:0;cursor:pointer;font-family:inherit;
  padding:14px;border-radius:13px;font-size:15px;font-weight:700;
  background:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.3);
}
.btn:disabled{background:var(--line2);color:#fff;box-shadow:none;cursor:default}
.btn-ghost{background:#fff;color:var(--acc);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn-ghost:disabled{background:#f3f4f6;color:var(--mut2);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-next{background:var(--navy2);box-shadow:var(--shadow2);margin-bottom:6px}
/* 速度3段のボタン列。1タップで即その速さで鳴る（選んでから再生、にしない） */
.spd{display:flex;gap:7px;margin-bottom:12px}
.spd-b{
  flex:1;border:1.5px solid var(--line2);border-radius:12px;cursor:pointer;font-family:inherit;
  padding:13px 2px;font-size:13px;font-weight:800;background:#fff;color:var(--acc);
  transition:background .15s,color .15s,border-color .15s;
}
.spd-b.is-on{background:var(--acc);border-color:var(--acc);color:#fff}
.spd-b.is-play{animation:spdpulse .9s ease-in-out infinite}
@keyframes spdpulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.45)}50%{box-shadow:0 0 0 6px rgba(37,99,235,0)}}
.spd-b:disabled{opacity:.4;cursor:default}
@media (prefers-reduced-motion:reduce){.spd-b.is-play{animation:none}}

/* STEP2「もう一度、見本を聞く」 */
.again{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line2)}
.again-h{display:block;font-size:12.5px;color:var(--mut);margin-bottom:9px}
.btn-reveal{margin-top:2px}
.audio-ng{margin:0 0 12px;font-size:12.5px;color:var(--warn);font-weight:600}

/* ---- 英文表示 ---- */
.en{
  margin:14px 0 6px;font-size:21px;font-weight:600;line-height:1.75;
  letter-spacing:.01em;color:var(--ink);word-break:break-word;
}
.ja{margin:0;font-size:12.5px;color:var(--mut)}
.reveal{margin-top:6px;padding-top:12px;border-top:1px dashed var(--line2)}

/* だらだら読み：ぼかしは「はっきり読まなくていい」の合図。
   読めないほど潰すと意図が伝わらないので、Lv1でも輪郭が見える強さに抑える。 */
.en-blur .w{filter:blur(1.4px);opacity:.72;transition:filter .25s,opacity .25s}
.en-blur2 .w{filter:blur(.6px);opacity:.92;transition:filter .25s,opacity .25s}
.lv{display:flex;gap:7px;margin-bottom:4px}
.lv-b{
  flex:1;border:1.5px solid var(--line2);border-radius:11px;cursor:pointer;font-family:inherit;
  padding:9px 4px;font-size:12.5px;font-weight:700;background:#fff;color:var(--mut);
}
.lv-b.is-on{background:var(--acc);border-color:var(--acc);color:#fff}

/* ---- STEP1 口先 vs 喉 の比べ ---- */
.cmp{display:flex;gap:7px;margin-bottom:12px}
.cmp-b{
  flex:1;border:1.5px solid var(--line2);border-radius:11px;cursor:pointer;font-family:inherit;
  padding:10px 4px;font-size:12.5px;font-weight:700;background:#fff;color:var(--mut);
}
.cmp-b.is-on{background:var(--acc);border-color:var(--acc);color:#fff}
.cmp-view{
  background:#f7f9fd;border:1px solid var(--line);border-radius:13px;
  padding:14px;margin-bottom:12px;
}
.cmp-view svg{display:block;width:176px;max-width:100%;height:auto;margin:0 auto 6px}
.cmp-view .body{fill:none;stroke:#9aa7bd;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cmp-view .spot{fill:#9aa7bd;transition:fill .2s}
.cmp-view .eye{fill:#9aa7bd}
.cmp-view .mouth{fill:#e8edf5;stroke:#9aa7bd;stroke-width:1.6;transition:fill .2s,stroke .2s}
.cmp-view.is-mouth .mouth{fill:var(--acc);stroke:var(--acc)}
.cmp-view.is-throat .spot{fill:var(--acc)}
.cmp-view .fing rect{fill:#f6dcb6;stroke:#c99a62;stroke-width:1.3}
.cmp-view .lbl{font-size:9px;fill:var(--mut);text-anchor:middle;font-family:var(--font)}
.cmp-view .v{fill:none;stroke:var(--mut2);stroke-width:2;transform-origin:56px 72px;opacity:0}
.cmp-view.is-mouth .v{animation:vib 2.2s ease-out infinite}
.cmp-view.is-throat .v{animation:vibs 1.5s ease-out infinite;stroke:var(--acc)}
.cmp-view .v2{animation-delay:.5s}
.cmp-view .v3{animation-delay:1s}
@keyframes vib{0%{opacity:.45;transform:scale(.3)}100%{opacity:0;transform:scale(.6)}}
@keyframes vibs{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.cmp-note{margin:0;font-size:12.5px;line-height:1.8;color:var(--ink2)}
.cmp-note b{color:var(--acc);font-weight:800}
@media (prefers-reduced-motion:reduce){.cmp-view .v{animation:none !important}}

.skip{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  background:#eff6ff;border-radius:11px;padding:11px 12px;margin-top:4px;
  font-size:12.5px;font-weight:700;color:var(--acc);
}
.skip input{width:17px;height:17px;accent-color:var(--acc);margin:0;flex:0 0 auto}

/* ---- 録音 ---- */
.btn-rec{margin-top:14px;background:var(--red);box-shadow:0 2px 8px rgba(225,29,72,.3)}
.btn-rec.is-rec{background:var(--navy2);box-shadow:var(--shadow)}
.rec-status{margin:10px 0 0;font-size:13px;color:var(--mut);text-align:center;font-weight:600}
.rec-status.count{font-size:30px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
.rec-status.live{color:var(--red)}
.mic-ng{margin:10px 0 0;font-size:12.5px;color:var(--red);font-weight:600;line-height:1.7}
/* 聞き比べの2面。ネイティブは録音前から聞ける（「聞く」タブに戻らせない） */
.side{margin-top:14px}
.side-h{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;
  padding:3px 10px;border-radius:999px;margin-bottom:8px;
}
.side-n{background:#eff6ff;color:var(--acc)}
.side-m{background:#fff1f3;color:var(--red)}
.side-me .spd-b{border-color:rgba(225,29,72,.35);color:var(--red)}
.side-me .spd-b.is-on{background:var(--red);border-color:var(--red);color:#fff}
.side-me .spd-b.is-play{animation:spdpulse-r .9s ease-in-out infinite}
@keyframes spdpulse-r{0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.45)}50%{box-shadow:0 0 0 6px rgba(225,29,72,0)}}
@media (prefers-reduced-motion:reduce){.side-me .spd-b.is-play{animation:none}}

.mark-h{display:block;font-size:13px;margin-bottom:10px}
.mark{display:flex;gap:9px}
.mark .btn{margin:0;font-size:13.5px;padding:12px 6px}