/* EchoSpan guided demo player (10/2026) */
.echodemo { --ed-navy: #1f3a5f; --ed-ink: #1d2b3a; --ed-line: #e3e7ec; --ed-bg: #f5f6f8; --ed-accent: #f26b1d; --ed-green: #4cae4f; --ed-surface: #ffffff; --ed-muted: #6b7280; --ed-strong: #1f3a5f;
  max-width: 1040px; margin: 0 auto; font-family: Geologica, sans-serif; color: var(--ed-ink); outline: none; }
.echodemo * { box-sizing: border-box; }
.ed-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--ed-bg);
  border: 1px solid var(--ed-line); box-shadow: 0 10px 34px rgba(20, 40, 70, .12); }
.ed-world { position: absolute; left: 0; top: 0; width: 1280px; transform-origin: 0 0; transition-property: transform; transition-timing-function: cubic-bezier(.65, 0, .35, 1); }
.ed-frame { position: absolute; left: 0; top: 0; display: block; opacity: 0; transition-property: opacity; }
.ed-frame.on { opacity: 1; }
.ed-dim { position: absolute; left: -2000px; top: -2000px; width: 6000px; height: 8000px; background: rgba(30, 41, 59, .38); opacity: 0; transition: opacity 350ms; pointer-events: none; }
.ed-dim.on { opacity: 1; }
.ed-panel { position: absolute; display: block; opacity: 0; transform: translateY(14px); transition-property: opacity, transform; filter: drop-shadow(0 16px 36px rgba(15, 30, 50, .28)); }
.ed-panel.on { opacity: 1; transform: none; }
.ed-focus { position: absolute; border: 3px solid var(--ed-accent); border-radius: 10px; opacity: 0; transition: opacity 300ms; pointer-events: none; box-shadow: 0 0 0 6px rgba(242, 107, 29, .12); }
.ed-focus.on { opacity: 1; }
.ed-typed { position: absolute; background: #fff; color: #1d2b3a; border-radius: 6px; white-space: pre; overflow: hidden; opacity: 0; font-family: Geologica, Arial, sans-serif; }
.ed-typed.on { opacity: 1; }
.ed-caret { display: inline-block; width: 1px; height: 1.1em; background: #1d2b3a; vertical-align: -0.2em; margin-left: 1px; animation: ed-blink 1s steps(1) infinite; }
@keyframes ed-blink { 50% { opacity: 0; } }
.ed-dot { position: absolute; border-radius: 50%; background: #344e7e; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #344e7e; pointer-events: none; }
.ed-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 30px; pointer-events: none; transition-property: transform; transition-timing-function: cubic-bezier(.45, 0, .2, 1); filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); z-index: 5; }
.ed-cursor svg { width: 100%; height: 100%; display: block; }
.ed-ring { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid var(--ed-accent); opacity: 0; pointer-events: none; z-index: 4; }
.ed-ring.go { animation: ed-ring 620ms ease-out; }
@keyframes ed-ring { 0% { transform: scale(.3); opacity: .95; } 100% { transform: scale(1.45); opacity: 0; } }
.ed-toast { position: absolute; right: 3%; bottom: 5%; padding: 10px 16px 10px 14px; border-radius: 10px; background: #4cae4f; color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(10px); transition: opacity 300ms, transform 300ms; pointer-events: none; }
.ed-toast::before { content: "\2713"; margin-right: 8px; }
.ed-toast.on { opacity: 1; transform: none; }
.ed-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6%;
  background: linear-gradient(160deg, #1f3a5f 0%, #274f7f 100%); color: #fff; opacity: 0; visibility: hidden; transition: opacity 500ms, visibility 500ms; z-index: 10; }
.ed-card.on { opacity: 1; visibility: visible; }
.ed-card .ed-eyebrow { font-size: clamp(11px, 1.4vw, 14px); letter-spacing: .14em; text-transform: uppercase; color: #9fd29f; font-weight: 700; margin-bottom: 10px; }
.ed-card h2 { margin: 0 0 12px; font-size: clamp(22px, 3.6vw, 40px); line-height: 1.15; font-weight: 700; }
.ed-card p { margin: 0 auto; max-width: 620px; font-size: clamp(13px, 1.7vw, 18px); line-height: 1.5; color: rgba(255, 255, 255, .85); }
.ed-card .ed-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.ed-card .ed-cta { display: inline-block; padding: 12px 22px; border-radius: 10px; font-size: clamp(13px, 1.5vw, 16px); font-weight: 600; text-decoration: none; }
.ed-card .ed-cta-primary { background: var(--es-green, #4cae4f); color: #fff; }
.ed-card .ed-cta-secondary { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.ed-card .ed-cta:hover { filter: brightness(1.08); }
.ed-card .ed-note { margin-top: 18px; font-size: clamp(11px, 1.3vw, 13px); color: rgba(255, 255, 255, .6); }
.ed-bar { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; }
.ed-caption { flex: 1; min-width: 0; min-height: 50px; color: var(--ed-ink); font-size: 18px; line-height: 1.5; font-weight:400; margin-top:10px;}
.ed-caption b { color: var(--ed-strong); }
.ed-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--ed-navy); color: #fff;
  font-size: 12px; font-weight: 700; margin-right: 9px; vertical-align: 1px; }
.ed-controls { display: flex; gap: 6px; flex-shrink: 0; }
.ed-btn { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--ed-line); background: var(--ed-surface); color: var(--ed-strong); cursor: pointer; }
.ed-btn:hover { border-color: var(--ed-strong); }
.ed-btn:focus-visible, .ed-chap:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 2px; }
.ed-chapters { display: flex; gap: 6px; margin-top: 10px; }
.ed-chap { flex: 1; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
.ed-chap-bar { display: block; height: 5px; border-radius: 3px; background: var(--ed-line); overflow: hidden; }
.ed-chap-fill { display: block; height: 100%; width: 0; background: var(--ed-accent); transition: width 400ms; }
.ed-chap-label { display: block; margin-top: 6px; font-size: 13px; color: var(--ed-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-chap.on .ed-chap-label { color: var(--ed-strong); font-weight: 600; }
@media (max-width: 640px) {
  .ed-caption { font-size: 14px; }
  .ed-bar { flex-direction: column; }
  .ed-chap-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-world, .ed-cursor { transition-duration: 0ms !important; }
}