.eme-story {
  --eme-navy: #101e36;
  --eme-blue: #1F3A5F;
  --eme-teal: #2CB1BC;
  box-sizing: border-box;
  position: relative;
  max-width: 1240px;
  margin: 2rem auto;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 74% 38%, rgba(44, 177, 188, .12), transparent 28%),
    radial-gradient(circle at 18% 85%, rgba(56, 116, 177, .11), transparent 30%),
    linear-gradient(145deg, #0b172a 0%, var(--eme-navy) 48%, #071222 100%);
  border: 1px solid rgba(111, 218, 225, .2);
  border-radius: 24px;
  box-shadow: 0 25px 70px rgba(4, 11, 23, .24), inset 0 1px 0 rgba(255, 255, 255, .04);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.eme-story *, .eme-story *::before, .eme-story *::after { box-sizing: border-box; }

.eme-story__brandbar {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  align-items: center;
  min-height: 62px;
  padding: .85rem clamp(1.25rem, 3vw, 2.25rem);
  background: rgba(5, 14, 28, .5);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.eme-story__brand { color: #fff; font-size: .92rem; font-weight: 850; letter-spacing: .025em; }
.eme-story__layout { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(540px, 1.22fr); min-height: 680px; }
.eme-story__copy { position: relative; z-index: 2; padding: clamp(2rem, 4.5vw, 4rem) clamp(1.5rem, 3.8vw, 3.4rem); }
.eme-story__copy h2 { max-width: 520px; margin: 0; color: #fff !important; font-size: clamp(2rem, 4vw, 3.65rem); font-weight: 820; letter-spacing: -.035em; line-height: 1.02; }
.eme-story__lead { max-width: 525px; margin: 1.2rem 0 1.7rem; color: rgba(255, 255, 255, .75); font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.62; }
.eme-story__prose { max-width: 530px; }
.eme-story__prose p { margin: 0 0 1rem; color: rgba(229, 239, 250, .75); font-size: .94rem; line-height: 1.78; }

.eme-story__term {
  display: inline;
  padding: .05em .18em;
  color: #89edf1;
  background: linear-gradient(transparent 62%, rgba(44, 177, 188, .19) 62%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  font-weight: 760;
  transition: color .16s, background .16s, text-shadow .16s;
}

.eme-story__term:hover, .eme-story__term:focus, .eme-story__term.is-active {
  color: #fff;
  background: rgba(44, 177, 188, .25);
  text-shadow: 0 0 12px rgba(75, 226, 233, .7);
}

.eme-story__insight { max-width: 530px; margin-top: 1.6rem; padding: 1rem 1.05rem; background: linear-gradient(90deg, rgba(44, 177, 188, .12), rgba(44, 177, 188, .025)); border: 1px solid rgba(44, 177, 188, .23); border-left: 3px solid var(--eme-teal); border-radius: 4px 12px 12px 4px; }
.eme-story__insight p { margin: 0; color: rgba(255, 255, 255, .82); font-size: .84rem; line-height: 1.55; }

.eme-story__figure { position: relative; min-width: 0; margin: 0; padding: 4rem 1rem 1.2rem; overflow: hidden; background: radial-gradient(circle at 50% 46%, rgba(23, 102, 130, .2), transparent 35%); border-left: 1px solid rgba(255, 255, 255, .07); }
.eme-story__figure::after { position: absolute; right: -18%; bottom: -25%; width: 68%; aspect-ratio: 1; content: ""; background: radial-gradient(circle, rgba(44, 177, 188, .1), transparent 65%); border-radius: 50%; pointer-events: none; }
.eme-story__figure-title { position: absolute; z-index: 2; top: 1.25rem; right: 1.4rem; left: 1.4rem; display: flex; gap: .65rem; align-items: center; color: rgba(255, 255, 255, .58); font-size: .67rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.eme-story__figure-title i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(44, 177, 188, .45), transparent); }
.eme-story__map { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-height: 610px; overflow: visible; }
.eme-story__map marker path { fill: #80e8ed; filter: drop-shadow(0 0 3px rgba(85, 224, 231, .9)); }
.eme-story__atmosphere circle { fill: none; stroke: rgba(67, 191, 204, .2); stroke-width: 1.2; stroke-dasharray: 2 11; }
.eme-story__atmosphere path { fill: none; stroke: rgba(45, 144, 173, .13); stroke-width: 1.2; }

.eme-story-rel { fill: none; stroke: #61d4dc; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 5; filter: drop-shadow(0 0 4px rgba(44, 177, 188, .55)); animation: eme-flow 7s linear infinite; transition: opacity .18s, stroke-width .18s; }
.eme-story-rel-label rect { fill: rgba(7, 19, 36, .92); stroke: rgba(101, 220, 227, .38); stroke-width: 1; }
.eme-story-rel-label text { fill: #d9fbfc; font-size: 10px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; letter-spacing: .015em; }
.eme-story-rel-label, .eme-story-rel { transition: opacity .18s, filter .18s; }

.eme-story-node { --node-color: #2CB1BC; --node-fill: #123d52; outline: none; cursor: pointer; transition: opacity .18s; }
.eme-story-node__halo { fill: none; stroke: var(--node-color); stroke-width: 2; opacity: .22; transform-box: fill-box; transform-origin: center; animation: eme-pulse 3.8s ease-in-out infinite; }
.eme-story-node__core { fill: var(--node-fill); stroke: var(--node-color); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--node-color)) drop-shadow(0 0 14px rgba(44, 177, 188, .25)); transition: stroke-width .18s, filter .18s, transform .18s; transform-box: fill-box; transform-origin: center; }
.eme-story-node__icon { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.eme-story-node__label { fill: #fff; font-size: 11px; font-weight: 760; text-anchor: middle; pointer-events: none; }
.eme-story-node__center-label { fill: #fff; font-size: 24px; font-weight: 820; text-anchor: middle; letter-spacing: -.02em; pointer-events: none; }
.eme-story-node:hover .eme-story-node__core, .eme-story-node:focus .eme-story-node__core, .eme-story-node.is-active .eme-story-node__core { stroke-width: 4; filter: drop-shadow(0 0 8px var(--node-color)) drop-shadow(0 0 22px var(--node-color)); transform: scale(1.045); }
.eme-story-node.is-related .eme-story-node__core { stroke-width: 3.2; }
.eme-story-node--amber { --node-color: #f3a13b; --node-fill: #4b2a15; }
.eme-story-node--violet { --node-color: #b573ee; --node-fill: #35204c; }
.eme-story-node--green { --node-color: #79d25a; --node-fill: #243f25; }
.eme-story-node--cyan { --node-color: #2CB1BC; --node-fill: #123e51; }
.eme-story-node--blue { --node-color: #5caee2; --node-fill: #1a3652; }
.eme-story-node--aqua { --node-color: #67dde2; --node-fill: #143d4e; }
.eme-story-node--center { --node-color: #61e3e9; --node-fill: #123c53; }
.eme-story-node--center .eme-story-node__halo { stroke-width: 2.5; opacity: .28; }

.eme-story.has-focus .eme-story-node.is-dim, .eme-story.has-focus .eme-story-rel.is-dim, .eme-story.has-focus .eme-story-rel-label.is-dim { opacity: .12; }
.eme-story-rel.is-active { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 7px #52e4eb); }
.eme-story-rel-label.is-active rect { stroke: #82f2f5; fill: rgba(16, 30, 54, .98); }
@keyframes eme-flow { to { stroke-dashoffset: -96; } }
@keyframes eme-pulse { 0%, 100% { opacity: .18; transform: scale(.96); } 50% { opacity: .38; transform: scale(1.06); } }

@media (max-width: 960px) {
  .eme-story__layout { grid-template-columns: 1fr; }
  .eme-story__figure { border-top: 1px solid rgba(255, 255, 255, .07); border-left: 0; }
  .eme-story__copy { padding-bottom: 2.4rem; }
  .eme-story__map { max-width: 760px; margin: 0 auto; }
}

@media (max-width: 600px) {
  .eme-story { border-radius: 17px; }
  .eme-story__brandbar { align-items: flex-start; flex-direction: column; }
  .eme-story__copy { padding: 2rem 1.25rem; }
  .eme-story__copy h2 { font-size: 2.15rem; }
  .eme-story__figure { padding: 3.7rem .25rem .9rem; }
  .eme-story__figure-title { right: 1rem; left: 1rem; }
  .eme-story-node__label { font-size: 12px; }
  .eme-story-rel-label text { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .eme-story *, .eme-story *::before, .eme-story *::after { animation: none !important; transition: none !important; }
}
