/* ============================================================
   مخاطر الزلازل — تقرير مصوّر تفاعلي
   Design tokens (dark seismic-monitoring HUD)
   ============================================================ */
:root{
  --bg:#04060c;
  --bg-2:#080d1a;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.028);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.055);
  --txt:#eaf0fb;
  --txt-2:#a7b5cf;
  --muted:#6d7d9c;
  --primary:#3b82f6;
  --primary-d:#1e40af;
  --accent:#d97706;
  --accent-2:#fbbf24;
  --danger:#dc2626;
  --danger-2:#f87171;
  --ok:#22c55e;
  --font-d:'Noto Kufi Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-b:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --r:16px;
  --pad:clamp(18px,3.4vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-b);
  font-weight:400;
  line-height:1.75;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit}
ol,ul{margin:0;padding:0;list-style:none}
b,strong{font-weight:700;color:#fff}
em{font-style:normal}
::selection{background:rgba(59,130,246,.35)}
/* ---------- Stage shell ---------- */
.app{position:fixed;inset:0;display:grid;place-items:center}
.stage{
  position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;
  background:
    radial-gradient(120% 80% at 80% -12%,rgba(30,64,175,.32),transparent 60%),
    radial-gradient(95% 70% at 10% 112%,rgba(220,38,38,.15),transparent 62%),
    linear-gradient(165deg,var(--bg-2),var(--bg) 72%);
}
.viewport{position:absolute;inset:0}

/* ---------- HUD ---------- */
.hud{
  position:absolute;inset:0 0 auto 0;z-index:40;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(10px,1.7vw,20px) var(--pad);
  font-family:var(--font-m);font-size:clamp(9px,.95vw,12px);letter-spacing:.09em;
  color:var(--txt-2);border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(4,6,12,.9),rgba(4,6,12,0));
  backdrop-filter:blur(2px);
}
.hud__side{display:flex;align-items:center;gap:10px;min-width:clamp(80px,12vw,150px)}
.hud__side--end{justify-content:flex-end}
.hud__brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--txt);opacity:.9;
  font-family:var(--font-d);font-size:clamp(10px,1.15vw,13px);letter-spacing:.02em}
.hud__brand svg{width:1.15em;height:1.15em;color:var(--accent-2)}
.rec{display:inline-flex;align-items:center;gap:6px;color:var(--danger-2)}
.rec i{width:7px;height:7px;border-radius:50%;background:var(--danger);animation:blink 1.6s steps(1,end) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.15}}
.tc{font-variant-numeric:tabular-nums}
.tc--muted{color:var(--muted)}

/* ---------- Background layers ---------- */
.bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.bg__grid{
  position:absolute;inset:-2px;opacity:.8;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:clamp(40px,5vw,72px) clamp(40px,5vw,72px);
  -webkit-mask-image:radial-gradient(82% 72% at 50% 46%,#000 18%,transparent 80%);
  mask-image:radial-gradient(82% 72% at 50% 46%,#000 18%,transparent 80%);
}
.bg__glow{
  position:absolute;top:-28vw;left:-14vw;width:72vw;height:72vw;border-radius:50%;
  filter:blur(90px);opacity:.55;
  background:radial-gradient(circle,rgba(59,130,246,.3),transparent 66%);
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{to{transform:translate3d(12vw,8vh,0) scale(1.15)}}
.bg__scan{
  position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);
}
/* ---------- Scenes + reveal engine ---------- */
.scene{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  padding:clamp(62px,9vh,112px) var(--pad) clamp(96px,14vh,144px);
  opacity:0;visibility:hidden;transform:scale(1.02);
  transition:opacity .85s var(--ease),transform 1.25s var(--ease),visibility .85s;
}
.scene.is-active{opacity:1;visibility:visible;transform:none}
.scene__inner{position:relative;z-index:2;width:100%;max-width:1180px;display:flex;flex-direction:column;gap:clamp(12px,1.9vh,24px)}
.scene__inner--center{align-items:center;text-align:center}
.r{opacity:0}
.scene.is-active .r{animation:rise .78s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- Typography ---------- */
.display{
  margin:0;font-family:var(--font-d);font-weight:900;line-height:1.14;letter-spacing:-.012em;
  font-size:clamp(36px,8vw,108px);text-shadow:0 0 70px rgba(59,130,246,.32);
}
.display em{background:linear-gradient(100deg,var(--accent-2),var(--danger-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.display--sm{font-size:clamp(27px,5.2vw,66px)}
.h2{margin:0;font-family:var(--font-d);font-weight:900;font-size:clamp(23px,4vw,50px);line-height:1.3}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-weight:700;
  font-size:clamp(10px,1.1vw,13px);letter-spacing:.12em;color:var(--accent-2)}
.kicker svg{width:1.25em;height:1.25em;stroke-width:2}
.lede{margin:0;max-width:76ch;color:var(--txt-2);font-size:clamp(15px,1.7vw,21px);line-height:1.9}
.lede--wide{max-width:60ch}
.src{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);
  font-size:clamp(10px,1.05vw,12.5px);color:var(--muted);letter-spacing:.04em}
.src svg{width:1.2em;height:1.2em}
/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);color:var(--txt-2);font-size:clamp(11px,1.1vw,14px)}
.chip svg{width:1.1em;height:1.1em;color:var(--primary)}

/* ---------- Stat cards ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(10px,1.4vw,18px)}
.stat{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;
  padding:clamp(14px,1.8vw,24px);border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(12px);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.stat::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,var(--primary),transparent)}
.stat:hover{transform:translateY(-3px);border-color:rgba(59,130,246,.5);box-shadow:0 16px 42px rgba(0,0,0,.5)}
.stat__v{font-family:var(--font-m);font-weight:700;line-height:1;color:#fff;font-size:clamp(23px,3.2vw,42px)}
.stat__v span{font-size:.5em;color:var(--accent-2);margin-inline-start:3px}
.stat__l{color:var(--txt-2);font-size:clamp(12px,1.18vw,15px);line-height:1.65}

/* ---------- Note / callout ---------- */
.note{display:flex;align-items:flex-start;gap:10px;
  padding:clamp(11px,1.4vw,16px) clamp(13px,1.6vw,20px);border-radius:14px;
  background:rgba(59,130,246,.09);border:1px solid rgba(59,130,246,.28);
  color:#cfe0ff;font-size:clamp(12.5px,1.25vw,16px);line-height:1.75}
.note svg{flex:none;width:1.25em;height:1.25em;margin-top:.16em;color:var(--accent-2)}

/* ---------- Cards ---------- */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(10px,1.5vw,20px)}
.card{padding:clamp(15px,1.9vw,26px);border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line);backdrop-filter:blur(10px);
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:rgba(217,119,6,.45);background:rgba(255,255,255,.06)}
.card__ico{display:grid;place-items:center;margin-bottom:12px;border-radius:13px;
  width:clamp(38px,3.9vw,50px);height:clamp(38px,3.9vw,50px);
  background:linear-gradient(145deg,rgba(59,130,246,.3),rgba(30,64,175,.08));
  border:1px solid rgba(59,130,246,.35);color:#dbeafe}
.card__ico svg{width:54%;height:54%}
.card h3{margin:0 0 6px;font-family:var(--font-d);font-size:clamp(15px,1.55vw,20px)}
.card p{margin:0;color:var(--txt-2);font-size:clamp(12px,1.2vw,15px);line-height:1.8}

/* ---------- Two-column layout ---------- */
.scene__inner.duo{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(18px,3vw,52px);align-items:center}
.duo__col{display:flex;flex-direction:column;gap:clamp(10px,1.5vh,18px);min-width:0}
/* ---------- Bullet lists ---------- */
.bullets{display:flex;flex-direction:column;gap:11px}
.bullets li{display:flex;align-items:flex-start;gap:10px;color:var(--txt-2);font-size:clamp(12.5px,1.28vw,16px);line-height:1.78}
.bullets li svg{flex:none;width:1.15em;height:1.15em;margin-top:.24em;color:var(--primary)}
.bullets--row{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.bullets--two{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px 24px}

/* ---------- Seismograph ---------- */
.seismo{width:100%;height:clamp(58px,9.5vh,104px);margin-top:4px}
.seismo svg{width:100%;height:100%;overflow:visible}
.seismo__base{fill:none;stroke:var(--line);stroke-width:1.5}
.seismo__line{fill:none;stroke:var(--accent-2);stroke-width:1.7;stroke-linejoin:round;
  stroke-dasharray:2400;stroke-dashoffset:2400;filter:drop-shadow(0 0 7px rgba(251,191,36,.65))}
.scene.is-active .seismo__line{animation:draw 5.2s linear infinite}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Ripple rings (title scene) ---------- */
.rings{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.rings span{position:absolute;width:13vmin;height:13vmin;border-radius:50%;
  border:1px solid rgba(217,119,6,.45);animation:ripple 5.4s linear infinite}
.rings span:nth-child(2){animation-delay:1.35s}
.rings span:nth-child(3){animation-delay:2.7s}
.rings span:nth-child(4){animation-delay:4.05s}
@keyframes ripple{from{transform:scale(.35);opacity:.85}to{transform:scale(9.5);opacity:0}}

/* ---------- Wave panel (P vs S) ---------- */
.wave{position:relative;padding:clamp(14px,1.7vw,24px);border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line);backdrop-filter:blur(10px)}
.wave svg{width:100%;height:auto;display:block}
.wave__tags{display:flex;gap:8px;margin-bottom:2px}
.tag{font-family:var(--font-m);font-size:clamp(10px,.98vw,12px);padding:4px 10px;border-radius:999px}
.tag--p{background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.45);color:#cfe0ff}
.tag--s{background:rgba(220,38,38,.16);border:1px solid rgba(220,38,38,.45);color:#ffd5d5}
.wave__axis{fill:none;stroke:var(--line);stroke-width:1.5}
.wave__p,.wave__s{fill:none;stroke-width:2.4;stroke-linecap:round}
.wave__p{stroke:var(--primary);stroke-dasharray:900;stroke-dashoffset:900;filter:drop-shadow(0 0 7px rgba(59,130,246,.6))}
.wave__s{stroke:var(--danger);stroke-dasharray:1400;stroke-dashoffset:1400;filter:drop-shadow(0 0 7px rgba(220,38,38,.55))}
.scene.is-active .wave__p{animation:draw 1.5s var(--ease) .35s both}
.scene.is-active .wave__s{animation:draw 2.3s var(--ease) 1.15s both}
.wave__cap{display:block;margin-top:9px;color:var(--muted);font-size:clamp(11px,1.08vw,13.5px);line-height:1.72}
/* ---------- Risk factors row ---------- */
.factors{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(6px,.9vw,13px)}
.factor{padding:9px 17px;border-radius:12px;background:var(--panel);border:1px solid var(--line);
  color:var(--txt);font-family:var(--font-d);font-weight:700;font-size:clamp(12.5px,1.35vw,17px)}
.factor--risk{background:rgba(220,38,38,.14);border-color:rgba(220,38,38,.45);color:#ffd7d7}
.factor--out{color:#fff;border-color:rgba(217,119,6,.55);
  background:linear-gradient(120deg,rgba(217,119,6,.3),rgba(220,38,38,.22))}
.times{font-family:var(--font-m);color:var(--muted);font-size:clamp(13px,1.45vw,19px)}

/* ---------- Bar chart ---------- */
.chart{display:flex;flex-direction:column;gap:clamp(8px,1.25vh,15px);
  padding:clamp(14px,1.9vw,26px);border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line);backdrop-filter:blur(10px)}
.bar{display:grid;grid-template-columns:clamp(56px,7vw,92px) 1fr clamp(52px,6vw,86px);
  align-items:center;gap:clamp(8px,1.2vw,18px)}
.bar__k{font-family:var(--font-m);font-size:clamp(11px,1.1vw,14px);color:var(--txt-2)}
.bar__track{position:relative;height:clamp(13px,2vh,22px);border-radius:999px;
  background:rgba(255,255,255,.055);overflow:hidden}
.bar__fill{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:999px;
  background:linear-gradient(270deg,var(--primary),var(--accent),var(--danger));
  transition:width 1.15s var(--ease)}
.bar:nth-child(1) .bar__fill{transition-delay:.30s}
.bar:nth-child(2) .bar__fill{transition-delay:.44s}
.bar:nth-child(3) .bar__fill{transition-delay:.58s}
.bar:nth-child(4) .bar__fill{transition-delay:.72s}
.bar:nth-child(5) .bar__fill{transition-delay:.86s}
.scene.is-active .bar__fill{width:var(--w)}
.bar__v{font-family:var(--font-m);font-weight:700;text-align:end;color:var(--accent-2);font-size:clamp(12px,1.3vw,17px)}

/* ---------- Timeline ---------- */
.tl{position:relative;display:flex;flex-direction:column;gap:clamp(9px,1.4vh,17px);
  padding-inline-start:clamp(18px,2.4vw,32px)}
.tl::before{content:"";position:absolute;inset-block:8px;inset-inline-start:5px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent-2),rgba(220,38,38,.45))}
.tl li{position:relative;display:flex;flex-direction:column;gap:2px}
.tl li::before{content:"";position:absolute;top:.68em;inset-inline-start:calc(clamp(18px,2.4vw,32px) * -1 + 1px);
  width:10px;height:10px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 12px rgba(251,191,36,.85)}
.tl__y{font-family:var(--font-m);font-weight:700;font-size:clamp(11.5px,1.15vw,14px);color:var(--accent-2)}
.tl__b{color:var(--txt-2);font-size:clamp(11.8px,1.18vw,14.5px);line-height:1.72}
.tl__b b{color:#fff}
/* ---------- Hazard grid ---------- */
.hazard{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(9px,1.25vw,18px)}
.hz{display:flex;flex-direction:column;gap:7px;padding:clamp(13px,1.55vw,20px);border-radius:14px;
  background:var(--panel-2);border:1px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.hz:hover{transform:translateY(-4px);border-color:rgba(220,38,38,.4);background:rgba(255,255,255,.055)}
.hz svg{width:1.5em;height:1.5em;color:var(--accent-2)}
.hz b{font-family:var(--font-d);font-size:clamp(13px,1.32vw,17px)}
.hz span{color:var(--txt-2);font-size:clamp(11.4px,1.12vw,14px);line-height:1.74}

/* ---------- Step sequence ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:clamp(8px,1.15vw,16px)}
.step{position:relative;display:flex;flex-direction:column;gap:5px;
  padding:clamp(12px,1.45vw,18px);border-radius:14px;background:var(--panel-2);border:1px solid var(--line)}
.step__n{font-family:var(--font-m);font-weight:700;color:var(--accent-2);font-size:clamp(15px,1.85vw,24px)}
.step__n span{font-size:.55em;color:var(--muted);margin-inline-start:1px}
.step b{font-family:var(--font-d);font-size:clamp(12.4px,1.28vw,16px)}
.step>span:not(.step__n){color:var(--txt-2);font-size:clamp(10.9px,1.08vw,13.5px);line-height:1.68}
.step--risk{border-color:rgba(220,38,38,.45);background:rgba(220,38,38,.09)}
.step--risk .step__n{color:var(--danger-2)}

/* ---------- Checklist ---------- */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(9px,1.25vw,16px)}
.checks li{display:flex;align-items:flex-start;gap:11px;padding:clamp(12px,1.45vw,18px);
  border-radius:14px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--txt-2);font-size:clamp(12px,1.2vw,15px);line-height:1.76}
.checks li svg{flex:none;width:1.5em;height:1.5em;padding:.3em;border-radius:9px;
  color:#04240f;background:linear-gradient(145deg,#4ade80,#22c55e)}
.checks li b{color:#fff}

/* ---------- Pull quote ---------- */
.quote{margin:0;padding:clamp(13px,1.6vw,22px) clamp(15px,1.9vw,26px);border-radius:14px 0 0 14px;
  border-inline-start:3px solid var(--accent);
  background:linear-gradient(270deg,rgba(217,119,6,.12),transparent)}
.quote p{margin:0 0 9px;color:#fff;font-family:var(--font-d);font-weight:700;
  font-size:clamp(16px,2.25vw,29px);line-height:1.5}
.quote cite{font-style:normal;font-family:var(--font-m);color:var(--muted);font-size:clamp(10.4px,1.02vw,13px)}
/* ---------- Fact stack (tsunami) ---------- */
.facts{display:flex;flex-direction:column;gap:clamp(8px,1.15vh,14px)}
.fact{display:grid;grid-template-columns:auto 1fr;gap:3px 11px;
  padding:clamp(11px,1.35vw,16px);border-radius:13px;background:var(--panel-2);border:1px solid var(--line)}
.fact svg{grid-row:span 2;width:1.4em;height:1.4em;margin-top:.16em;color:var(--accent-2)}
.fact b{font-family:var(--font-d);font-size:clamp(12.4px,1.26vw,16px)}
.fact span{color:var(--txt-2);font-size:clamp(10.9px,1.08vw,13.5px);line-height:1.7}
.clock{display:flex;align-items:center;gap:14px;border-radius:14px;
  padding:clamp(12px,1.45vw,18px) clamp(14px,1.75vw,24px);
  background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.4)}
.clock__n{font-family:var(--font-d);font-weight:900;color:#ffd7d7;font-size:clamp(19px,2.7vw,33px);white-space:nowrap}
.clock__u{color:var(--txt-2);font-size:clamp(10.9px,1.12vw,14px);line-height:1.62}

/* ---------- Actions + signature (outro) ---------- */
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:clamp(9px,1.25vw,18px);
  width:100%;max-width:1000px}
.action{display:flex;flex-direction:column;gap:6px;text-align:start;border-radius:14px;
  padding:clamp(13px,1.55vw,22px);background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(10px);transition:transform .3s var(--ease),border-color .3s var(--ease)}
.action:hover{transform:translateY(-4px);border-color:rgba(217,119,6,.45)}
.action svg{width:1.6em;height:1.6em;color:var(--accent-2)}
.action b{font-family:var(--font-d);font-size:clamp(12.4px,1.28vw,17px)}
.action span{color:var(--txt-2);font-size:clamp(10.9px,1.08vw,13.5px);line-height:1.7}
.sign{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);
  color:var(--muted);font-size:clamp(10px,1.02vw,12.5px)}
.sign svg{width:1.2em;height:1.2em;color:var(--accent-2)}
/* ---------- Player controls ---------- */
.controls{
  position:absolute;inset:auto 0 0 0;z-index:45;
  display:flex;align-items:center;gap:clamp(6px,.95vw,14px);
  padding:clamp(10px,1.45vw,18px) var(--pad);
  border-top:1px solid var(--line-2);backdrop-filter:blur(6px);
  background:linear-gradient(0deg,rgba(4,6,12,.95),rgba(4,6,12,.6) 68%,transparent);
}
.ctl{display:grid;place-items:center;flex:none;cursor:pointer;color:var(--txt);
  width:clamp(34px,3.1vw,44px);height:clamp(34px,3.1vw,44px);border-radius:50%;
  border:1px solid var(--line);background:var(--panel);
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s}
.ctl:hover{transform:translateY(-2px);background:rgba(59,130,246,.22);border-color:rgba(59,130,246,.55);color:#fff}
.ctl:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.ctl svg{width:50%;height:50%}
#btnPlay .i-play,#btnPlay [data-lucide="play"]{display:none}
.stage.is-paused #btnPlay .i-play,.stage.is-paused #btnPlay [data-lucide="play"]{display:block}
.stage.is-paused #btnPlay .i-pause,.stage.is-paused #btnPlay [data-lucide="pause"]{display:none}
.ctl--ghost{width:auto;min-width:clamp(40px,3.5vw,52px);border-radius:999px;padding:0 10px;
  font-family:var(--font-m);font-size:clamp(10px,1.02vw,13px)}
.scrub{position:relative;flex:1;min-width:60px;height:clamp(6px,.95vh,10px);border-radius:999px;
  cursor:pointer;background:rgba(255,255,255,.08);overflow:hidden}
.scrub:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.scrub__fill{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:999px;
  background:linear-gradient(270deg,var(--primary),var(--accent))}
.scrub__segs{position:absolute;inset:0;display:flex}
.scrub__segs i{flex:1;border-inline-start:1px solid rgba(4,6,12,.85);cursor:pointer}
.scrub__segs i:first-child{border-inline-start:0}
.ctl__tc{flex:none;font-family:var(--font-m);font-size:clamp(10px,.98vw,12.5px);color:var(--txt-2);
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Chapter menu ---------- */
.menu{position:absolute;z-index:50;inset:auto 0 auto 0;bottom:clamp(56px,7.6vh,84px);
  margin-inline:var(--pad);max-height:46vh;overflow:auto;border-radius:16px;
  padding:clamp(12px,1.55vw,20px);border:1px solid var(--line);
  background:rgba(8,13,26,.97);backdrop-filter:blur(18px);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.menu[hidden]{display:none}
.menu__head{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-family:var(--font-d);font-weight:700;font-size:clamp(12.4px,1.28vw,16px);color:#fff}
.menu__head svg{width:1.3em;height:1.3em;color:var(--accent-2)}
.menu__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}
.menu__list button{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;text-align:start;
  padding:9px 12px;border-radius:11px;border:1px solid transparent;background:transparent;
  color:var(--txt-2);font-size:clamp(11.4px,1.12vw,14px);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.menu__list button:hover{background:rgba(255,255,255,.06);color:#fff}
.menu__list button.is-cur{background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.45);color:#fff}
.menu__list .mn{font-family:var(--font-m);color:var(--accent-2);min-width:2.4em}
/* ---------- Responsive ---------- */
@media (max-width:960px){
  .scene__inner.duo{grid-template-columns:1fr;gap:clamp(14px,2.4vh,22px)}
  .hud__brand span{display:none}
  .lede{max-width:none}
  .duo--tl .duo__col:last-child{order:2}
}
@media (max-width:640px){
  .hud__side{min-width:auto}
  .scene{align-items:start;overflow-y:auto;padding-top:52px;padding-bottom:80px}
  .scene__inner{gap:12px}
  .display--sm{font-size:clamp(23px,7vw,34px)}
  .stats,.cards3,.hazard,.checks,.steps,.actions{grid-template-columns:1fr}
  .facts{gap:7px}
  .controls{gap:5px}
  #btnSpeed{display:none}
  .ctl__tc{font-size:10px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .r{opacity:1}
  .seismo__line,.wave__p,.wave__s{stroke-dashoffset:0}
  .bar__fill{width:var(--w)}
  .rings span{display:none}
}