:root{
  --bg:#ffffff; --breath-bg:#eaf3f9; --go-bg:#fff4ea;
  --fg:#18202b; --muted:#98a1ab; --line:#e8ecf0; --soft:#f4f6f8;
  --count:#d08a3c; --breath:#4f8fb3; --go:#e2643a;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ui:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ar:"Amiri Quran","Amiri","Scheherazade New","Geeza Pro","Noto Naskh Arabic",serif;
  color-scheme:light;
}
body.dark{--bg:#0d1117;--fg:#f3efe6;--muted:#7d8794;--line:#252c36;--soft:#161c24;--breath-bg:#10202c;--go-bg:#2a160e;color-scheme:dark}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--ui);overflow:hidden;touch-action:manipulation;overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
canvas.stage{position:fixed;inset:0;width:100%;height:100%;display:block}
.ar{font-family:var(--ar);direction:rtl;unicode-bidi:isolate;font-feature-settings:"calt","liga"}
button{font:inherit;color:inherit}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--breath);outline-offset:3px}

/* chrome */
.top{position:fixed;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;gap:14px;
  padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));
  font-size:.8rem;color:var(--muted);pointer-events:none}
.top>*{pointer-events:auto}
.top .back{color:var(--muted);text-decoration:none;font-weight:500;padding:6px 2px}
.top .back:hover{color:var(--fg)}
.top .where{display:flex;flex-direction:column;align-items:center;flex:1;line-height:1.3;pointer-events:none}
.top .sura{font-weight:600;color:var(--fg);letter-spacing:.01em}
.top .style-name{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--muted);min-width:70px;text-align:right}
.hint{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));text-align:center;z-index:3;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:opacity .4s;pointer-events:none}
body.playing .hint,body.paused .hint,body.idle .hint{opacity:0}
.dock{position:fixed;right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;gap:6px}
.round{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:opacity .3s,color .2s}
.round:hover{color:var(--fg)}
#voice{color:var(--fg)} #voice.off{color:var(--muted)}
body.playing #gearBtn{opacity:.35}
.prog{position:fixed;left:0;right:0;bottom:0;height:calc(10px + env(safe-area-inset-bottom,0px));z-index:4;pointer-events:none}
.prog i{position:absolute;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);height:3px;background:var(--fg);opacity:.18;transform-origin:left;transform:scaleX(0)}
.pausebar{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:5;
  display:none;align-items:center;gap:8px;max-width:min(560px,calc(100vw - 32px));width:max-content;
  background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:0 10px 30px rgba(24,32,43,.08)}
body.paused .pausebar,body.idle .pausebar,body.done .pausebar{display:flex}
.pausebar .nav{width:40px;height:40px;border-radius:12px;border:0;background:var(--soft);cursor:pointer;font-size:1.3rem;line-height:1}
.pmid{display:grid;justify-items:center;text-align:center;gap:2px;min-width:0;padding:0 6px}
.pmid b{font-size:.82rem;font-weight:600}
.pmid span{font-family:var(--ar);font-size:1.15rem;line-height:1.7;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmid small{font-size:.7rem;color:var(--muted);letter-spacing:.06em}

/* settings */
.sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;max-width:440px;max-height:86vh;overflow:auto;background:var(--bg);color:var(--fg);
  border-top:1px solid var(--line);box-shadow:0 -12px 40px rgba(24,32,43,.12);border-radius:20px 20px 0 0;
  padding:22px max(22px,env(safe-area-inset-left,0px)) calc(22px + env(safe-area-inset-bottom,0px));
  display:grid;gap:16px;box-sizing:border-box;z-index:9;user-select:auto;-webkit-user-select:auto}
.sheet[hidden]{display:none}
.sheet h2{font-family:var(--display);font-weight:400;font-size:1.6rem;margin:0}
.row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline}
.row label{font-size:.9rem;font-weight:500}
.row output{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.row input,.row select,.row .note{grid-column:1/-1;width:100%}
.row select{font:500 .9rem var(--ui);padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);box-sizing:border-box}
.row input{accent-color:var(--fg)}
.row .note{font-size:.75rem;color:var(--muted)}
.check{display:flex;gap:10px;align-items:center;font-size:.9rem;font-weight:500}
.check input{width:18px;height:18px;accent-color:var(--fg)}
.sheet .done{justify-self:end;font:600 .9rem var(--ui);background:var(--fg);color:var(--bg);border:0;border-radius:999px;padding:10px 22px;cursor:pointer}

/* shared bits styles use */
.wash{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease}
.notechip{display:inline-flex;align-items:baseline;gap:6px;font:600 .95rem var(--ui);font-variant-numeric:tabular-nums}
.notechip .from{color:var(--muted);font-weight:500}
.notechip .c{font-weight:500;font-size:.75rem;color:var(--muted)}
@media (max-width:520px){.top .style-name{display:none}.top .sura{font-size:.78rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.pill{height:40px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:0 14px;font:600 .8rem var(--ui);align-self:center}
.pill.off{color:var(--muted)} .pill.off span{text-decoration:line-through}