/* Scoped to the replacement animation. The original website stylesheet is unchanged. */
.fm2-wrap{max-width:1080px;margin:0 auto;border:1px solid #37516c;border-radius:16px;background:#0e2033;overflow:hidden;box-shadow:0 25px 70px #0003}
.fm2-topbar{padding:18px 24px;display:flex;justify-content:space-between;gap:16px;font:12px var(--font-mono);letter-spacing:.13em;color:#b4cee9;border-bottom:1px solid #29435e}.fm2-sample{color:#91a9c1;font-size:11px}.fm2-viewport{position:relative;width:100%;height:clamp(370px,58vw,620px);background:#102b48;overflow:hidden;touch-action:pan-y}.fm2-viewport canvas{display:block;width:100%;height:100%}.fm2-view-caption{position:absolute;left:24px;right:24px;bottom:17px;display:flex;justify-content:space-between;gap:15px;pointer-events:none;font:12px var(--font-mono);color:#b7cfe7}.fm2-view-caption span:first-child{background:#0d1f31b8;padding:6px 10px;border-radius:4px}.fm2-view-caption span:last-child{font-size:17px;color:#f0d096;align-self:center}.fm2-controls{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 24px;border-top:1px solid #29435e}.fm2-modes{display:flex;gap:6px;flex-wrap:wrap}.fm2-mode{font:12px var(--font-mono);text-transform:uppercase;letter-spacing:.07em;padding:11px 18px;border:1px solid #3a5571;border-radius:999px;color:#b4c7da;min-height:42px}.fm2-mode.active{background:var(--blue);border-color:var(--blue);color:white}.fm2-actions{display:flex;gap:18px;align-items:center}.fm2-actions button{font:12px var(--font-mono);color:#aac7e4;min-height:42px}.fm2-actions button[aria-pressed="true"]{color:#f0d096}.fm2-wrap button:focus-visible,.fm2-wrap input:focus-visible{outline:2px solid #f0d096;outline-offset:4px}.fm2-event{display:flex;align-items:center;gap:14px;padding:20px 26px;border-top:1px solid #29435e;background:#13283c;min-height:94px}.fm2-event-dot{width:9px;height:9px;border-radius:50%;background:#76bcff;box-shadow:0 0 16px #62b6ff88;flex:none}.fm2-event strong{font-size:16px;font-weight:500;color:#e3edf6}.fm2-event p{font-size:14px;margin:3px 0 0;color:#9bb1c6}.fm2-event>span:last-child{margin-left:auto;color:#9bb1c6;font:12px var(--font-mono);white-space:nowrap}.fm2-timeline{display:flex;gap:18px;align-items:center;padding:17px 26px;font:12px var(--font-mono);color:#9bb1c6}.fm2-timeline input{flex:1;min-width:30px;accent-color:#8abdf3;cursor:pointer}.fm2-timeline label,.fm2-timeline span{white-space:nowrap}.fm2-learning{margin:0 24px 20px;padding:16px 18px;display:grid;grid-template-columns:100px 1fr 160px;align-items:center;gap:16px;border:1px solid #3b5269;border-radius:8px;background:#192f4380}.fm2-learning>span{font:12px var(--font-mono);color:#accff3}.fm2-learning p{font-size:14px;line-height:1.65;color:#c6d5e4;margin:0}.fm2-spark svg{width:100%;display:block}.fm2-spark path{stroke:#9dc1ee;fill:none;stroke-width:2;stroke-dasharray:100;stroke-dashoffset:86;transition:stroke-dashoffset 1s}.fm2-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;padding:2px 20px 0;font-size:12px;color:#afc4d8}.fm2-legend span{display:inline-flex;gap:8px;align-items:center}.fm2-legend i{display:inline-block;width:8px;height:8px;background:#79b7f6}.fm2-pir{border-radius:50%}.fm2-person-key{background:#f0d096!important;border-radius:50%}.fm2-wrap .fm-note{padding:0 24px 22px;font-size:12px;max-width:820px;margin:17px auto 0;line-height:1.7}.fm2-fallback{padding:40px;font-size:16px;color:#b9d6ef}
@media(max-width:650px){.fm2-topbar{padding:14px 16px;letter-spacing:.06em;font-size:11px}.fm2-sample{font-size:10px}.fm2-controls{flex-direction:column;gap:10px;padding:14px 16px}.fm2-actions{gap:24px}.fm2-viewport{height:400px}.fm2-view-caption{left:12px;right:12px;bottom:12px;font-size:10px}.fm2-view-caption span:first-child{max-width:70%}.fm2-view-caption span:last-child{font-size:13px}.fm2-event{padding:18px 16px;gap:10px}.fm2-event strong{font-size:14px}.fm2-event p{font-size:12px}.fm2-timeline{padding:15px 16px;gap:10px;font-size:11px}.fm2-learning{margin:0 16px 18px;grid-template-columns:1fr 100px;gap:8px;padding:14px}.fm2-learning>span{grid-column:1/-1}.fm2-learning p{font-size:12px}.fm2-legend{font-size:11px;gap:12px}.fm2-wrap .fm-note{font-size:11px;padding:0 16px 20px}.fm2-mode{font-size:11px;padding:10px 15px}}
@media(prefers-reduced-motion:reduce){.fm2-spark path{transition:none}}

/* Keep the live map status separate from the clock on narrow screens. */
.fm2-view-caption{min-width:0;align-items:center}
.fm2-view-caption span:first-child{min-width:0;max-width:calc(100% - 78px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm2-view-caption span:last-child{flex:none;white-space:nowrap}
/* The clock is anchored independently so the status line gets the full row. */
.fm2-view-caption{display:block}
.fm2-view-caption span:first-child{display:block;width:100%;max-width:none;padding-right:86px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.fm2-view-caption span:last-child{position:absolute;right:0;top:50%;transform:translateY(-50%)}
@media(max-width:650px){
  .fm2-view-caption{display:flex;flex-direction:column;align-items:stretch;gap:3px;bottom:10px}
  .fm2-view-caption span:first-child{width:100%;max-width:none;padding-right:8px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
  .fm2-view-caption span:last-child{position:static;transform:none;align-self:flex-end;font-size:12px}
}
/* The live status is a full-width row beneath the map, separate from the canvas. */
.fm2-viewport{height:620px;flex:none}
.fm2-view-caption{position:relative;left:auto;right:auto;bottom:auto;height:54px;min-height:54px;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#0b1d2e;border-top:1px solid #29435e;box-sizing:border-box;z-index:3;visibility:visible;opacity:1;overflow:hidden}
.fm2-view-caption span:first-child{display:block;flex:1;min-width:0;max-width:none;padding:6px 10px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.fm2-view-caption span:last-child{position:static;transform:none;flex:none;white-space:nowrap;font-size:17px}
@media(max-width:650px){.fm2-viewport{height:400px}.fm2-view-caption{padding:9px 12px;align-items:flex-start}.fm2-view-caption span:first-child{padding:4px 7px}.fm2-view-caption span:last-child{align-self:flex-end;font-size:12px}}
.fm2-event{height:94px;min-height:94px;overflow:hidden;box-sizing:border-box}
@media(max-width:650px){.fm2-view-caption{height:64px;min-height:64px}.fm2-event{height:104px;min-height:104px}}
/* Keep the status strip inside the animation section's normal flow. */
.fmap{position:relative;display:block;clear:both;isolation:isolate}
.fm2-wrap{position:relative;display:block;overflow:hidden}
.fm2-view-caption{position:static !important;display:flex !important;transform:none !important;float:none;clear:both}
/* Compact phone canvas; status updates cannot change its dimensions. */
@media(max-width:650px){.fm2-viewport{height:clamp(250px,78vw,340px)}}
/* The activity text already includes the time; omit the duplicate clock. */
#fm2-clock{display:none}
/* The activity panel below the controls is the single visible status. */
.fm2-wrap .fm2-view-caption{display:none !important}
.fm2-wrap .fm2-actions{display:none}
.fm2-wrap .fm2-timeline{display:none}
.fm2-wrap .fm2-legend,.fm2-wrap .fm-note{display:none}
/* Give the activity title its own full-width line, including its timestamp. */
.fm2-event{position:relative;container-type:inline-size}
.fm2-event>div{flex:1;min-width:0}
.fm2-event strong{display:block;white-space:nowrap;font-size:clamp(10px,3.3cqw,16px);letter-spacing:-.015em}
.fm2-event>span:last-child{position:absolute;right:16px;bottom:12px;font-size:10px}
.fm2-event p{padding-right:52px}
/* The event time glows when the person reaches the sensor. */
.fm2-event strong.sensor-live{color:#f0d096;text-shadow:0 0 5px rgba(240,208,150,.65),0 0 14px rgba(240,208,150,.28);transition:color .25s ease,text-shadow .25s ease}