:root{
  --bg:#020617;
  --bg-2:#0b1126;
  --card:rgba(15,23,42,.72);
  --border:rgba(148,163,184,.22);
  --ink:#f8fafc;
  --muted:#9aa8bd;
  --accent:#22c55e;
  --helix:#7da4ff;
  --amber:#fbbf24;
  --font-ar:'Tajawal','Cairo','Noto Naskh Arabic',system-ui,sans-serif;
  --font-lat:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 620px at 72% -6%, rgba(34,197,94,.14), transparent 62%),
    radial-gradient(900px 560px at 12% 8%, rgba(125,164,255,.16), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-ar);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.app{max-width:1240px;margin:0 auto;padding:22px 18px 40px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.2px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(34,197,94,.85)}
.bar-note{color:var(--muted);font-size:14px;font-weight:500}
.stagewrap{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  border:1px solid var(--border);
  background:#020617;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03) inset;
}
canvas#stage{display:block;width:100%;height:100%}
.bigplay{
  position:absolute;inset:auto 50% 24px auto;transform:translateX(-50%);
  width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(2,6,23,.62);backdrop-filter:blur(12px);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, opacity .3s;
}
.bigplay svg{width:30px;height:30px;margin-inline-start:4px}
.bigplay:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 14px 34px rgba(34,197,94,.32)}
.bigplay.hidden{opacity:0;pointer-events:none}

.controls{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-ar);font-size:14px;font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;
  padding:9px 13px;cursor:pointer;backdrop-filter:blur(10px);
  transition:transform .18s cubic-bezier(.16,1,.3,1), background .18s, border-color .18s;
}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.09);border-color:rgba(148,163,184,.42)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:linear-gradient(180deg,rgba(34,197,94,.95),rgba(22,163,74,.95));border-color:rgba(34,197,94,.5);color:#04160a}
.btn.is-on{border-color:rgba(34,197,94,.75);background:rgba(34,197,94,.16)}
.btn[aria-pressed="true"]{border-color:rgba(34,197,94,.7);background:rgba(34,197,94,.14)}
.ic{width:16px;height:16px}
.tc{font-family:var(--font-lat);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:104px;text-align:center}
.seek{flex:1;appearance:none;height:6px;border-radius:99px;background:rgba(148,163,184,.22);cursor:pointer}
.seek::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(34,197,94,.7);border:none}
.seek::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--accent)}
.speeds{display:flex;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:4px}
.speeds .btn{padding:6px 11px;font-size:13px;background:transparent;border:none;border-radius:9px}
.speeds .btn.is-on{background:rgba(34,197,94,.18);color:#d7ffe8}
.chapters{display:flex;flex-wrap:wrap;gap:8px}
.chap{
  font-family:var(--font-ar);font-size:13px;font-weight:600;color:var(--muted);
  background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:99px;
  padding:7px 13px;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:7px;
}
.chap:hover{color:var(--ink);border-color:rgba(148,163,184,.45);transform:translateY(-2px)}
.chap.is-on{color:#04160a;background:var(--accent);border-color:var(--accent)}
.chap .n{font-family:var(--font-lat);font-size:11px;opacity:.75}
.foot{margin-top:18px;color:var(--muted);font-size:13.5px;line-height:1.9}
.foot p{margin:0}
.credit{opacity:.78}
@media (max-width:640px){
  .app{padding:14px 12px 30px}
  .brand{font-size:18px}
  .bar-note{display:none}
  .bigplay{width:62px;height:62px}
  .tc{min-width:88px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .btn,.chap,.bigplay{transition:none}
}