@font-face{font-family:"Amiri";src:url(/assets/amiri-regular-eec0c8d5.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Amiri";src:url(/assets/amiri-bold-797b084f.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Amiri Quran";src:url(/assets/amiri-quran-35f4f02b.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#f6f2ea;--card:#fffdf8;--ink:#1c1c1c;--mute:#5f5f5f;--accent:#1d5c4b;--gold:#8a6a12;--ongold:#fff;
  --onaccent:#fff;--line:#d9d1bc;--warn:#8a4b00;--done:#e3f1e8;--bar:#e6dfcc;--hdr:#f6f2ea;--audio:#2b4c7e;--err:#a32020;
  --fs:1;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#121615;--card:#1b2120;--ink:#ece8dc;--mute:#a6a69e;--accent:#5fc3a0;--gold:#d9b25a;--ongold:#1a1a1a;
  --onaccent:#10231c;--line:#33403c;--warn:#e0a45c;--done:#1d3a2f;--bar:#2a3330;--hdr:#121615;--audio:#8fb4ef;--err:#ff8a8a}}
:root[data-theme=dark]{
  --bg:#121615;--card:#1b2120;--ink:#ece8dc;--mute:#a6a69e;--accent:#5fc3a0;--gold:#d9b25a;--ongold:#1a1a1a;
  --onaccent:#10231c;--line:#33403c;--warn:#e0a45c;--done:#1d3a2f;--bar:#2a3330;--hdr:#121615;--audio:#8fb4ef;--err:#ff8a8a}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 120px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Amiri","Geeza Pro","Noto Naskh Arabic",serif;font-size:18px;line-height:1.7;
  min-height:100vh;touch-action:manipulation;padding-bottom:env(safe-area-inset-bottom,0px);overflow-wrap:anywhere}
:lang(ja){font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;inset-inline-start:8px;top:-60px;background:var(--card);padding:6px 12px;border-radius:8px;z-index:20}
.skip:focus{top:8px}

.bar{position:sticky;top:0;z-index:9;background:var(--hdr);padding:calc(env(safe-area-inset-top,0px) + 8px) 14px 0;border-bottom:1px solid var(--line)}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
h1{margin:0;font-size:19px;color:var(--accent);line-height:1.3}
.fs{display:flex;gap:6px}
.fs button{min-width:44px;height:40px;padding:0 10px;border:1px solid var(--line);background:var(--card);border-radius:10px;font-size:17px}
#lg{font-size:15px}
.tabs{display:flex;gap:6px;margin:8px 0 6px}
.tabs button{flex:1;min-height:44px;font-weight:700;font-size:18px;border:1px solid var(--line);background:var(--card);color:var(--mute);border-radius:12px}
.tabs button[aria-selected=true]{background:var(--accent);color:var(--onaccent);border-color:var(--accent)}
.progrow{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.prog{flex:1;height:6px;background:var(--bar);border-radius:3px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--gold)}
.pct{font-size:13px;color:var(--mute);min-width:3.5em;text-align:center;direction:ltr}

main{padding:12px 16px 40px;max-width:680px;margin:0 auto}
.when{font-size:15px;color:var(--mute);margin:0 4px 8px}
.when.sub{font-size:13px}
.when.ja,.ja{direction:ltr;text-align:left}
.when.ja{font-size:13px;color:var(--warn)}
.opts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 10px}
.speed{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--audio)}
#spd{display:flex;border:1px solid var(--audio);border-radius:20px;overflow:hidden}
#spd button{min-height:36px;min-width:44px;padding:0 6px;border:0;border-inline-start:1px solid var(--audio);background:transparent;color:var(--audio);font-size:14px;font-family:-apple-system,"Segoe UI",sans-serif}
#spd button:first-child{border-inline-start:0}
#spd button[aria-pressed=true]{background:var(--audio);color:var(--card);font-weight:700}
#sd{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:4px 12px;font-size:15px;min-height:40px}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin-bottom:14px}
.card.done{background:var(--done)}
.head{display:flex;align-items:flex-start;gap:8px}
.ttl{flex:1;margin:0;text-align:start;font-size:17px;font-weight:700;color:var(--accent);line-height:1.45}
.cnt{min-width:58px;text-align:center;background:var(--gold);color:var(--ongold);border-radius:14px;padding:2px 10px;font-size:18px;font-weight:700}
.cnt{direction:ltr;unicode-bidi:isolate}
.card.done .cnt{background:var(--accent);color:var(--onaccent)}
.txt{font-size:calc(27px*var(--fs));line-height:2.1;margin:8px 0 6px;padding:8px 10px;border-radius:12px;border:1px dashed transparent;
  cursor:pointer;user-select:none;-webkit-user-select:none;text-align:right;unicode-bidi:plaintext}
.txt:hover{border-color:var(--line)}
.txt:active{background:var(--bar)}
.txt.q{font-family:"Amiri Quran","Amiri","Geeza Pro",serif;line-height:2.3}
.kana,.mean{line-height:1.8;margin:4px 0 0}
.kana{font-size:calc(17px*var(--fs));color:var(--accent);padding-top:6px;border-top:1px dashed var(--line)}
.mean{font-size:calc(16px*var(--fs))}
.jsrc{font-size:12px;color:var(--mute);margin:4px 0 0}
.src,.note{font-size:14px;line-height:1.6;margin:6px 0 0}
.src{color:var(--mute);border-top:1px solid var(--line);padding-top:6px}
.note{color:var(--warn)}

.acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.acts button{min-height:40px;padding:2px 14px;background:transparent;border:1px solid var(--line);border-radius:10px;font-size:15px;color:var(--mute)}
.cntx{font-size:14px;color:var(--mute)}

.aud{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;padding:8px 10px;border-radius:12px;
  border:1px solid var(--audio);border-inline-start-width:4px}
.play{min-height:40px;padding:2px 16px;border-radius:20px;border:1px solid var(--audio);background:transparent;color:var(--audio);font-size:15px;font-weight:700}
.play.on{background:var(--audio);color:var(--card)}
.ast{font-size:14px;color:var(--mute)}
.ast.err{color:var(--err);font-weight:700}
.acred{font-size:12px;color:var(--mute);display:flex;flex-direction:column;flex-basis:100%}
.acred a{color:var(--audio)}
.anote{color:var(--warn)}

.tapnote{font-size:13px;color:var(--mute);text-align:center;margin:4px 0 14px}
.reset{display:block;margin:6px auto 0;font-size:16px;padding:8px 20px;min-height:44px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.credit{font-size:13px;color:var(--mute);text-align:center;margin:18px 0 0}
.credit p{margin:6px 0}
.credit a{color:var(--accent)}

@media (max-width:380px){
  body{font-size:17px}
  .tabs button{font-size:16px}
  main{padding:10px 12px 36px}
  .card{padding:10px 10px}
  .txt{padding:6px 4px}
}
@media (prefers-reduced-motion:no-preference){.prog i{transition:width .25s}}

.intro{font-size:15px;line-height:1.9;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--gold)}
.basm{font-family:"Amiri Quran","Amiri",serif;font-size:calc(24px*var(--fs));text-align:center;color:var(--accent);margin:6px 0 0;line-height:2}
.txt.long{text-align:justify;text-align-last:right}
.jnote{font-size:calc(15px*var(--fs));color:var(--mute);border-top:1px dashed var(--line);padding-top:6px}