/* Mugato interactive demo player
   Tour chrome follows the Mugato brand (Josefin Sans 700 caps for statements,
   Source Sans for explanation, square corners, beige containers, red structure,
   one yellow proof mark). The portal recreation keeps the product's own look. */

:root {
  --md-power: #252525;
  --md-beige: #F2F0DE;
  --md-yellow: #FFE987;
  --md-gray: #726E66;
  --md-red: #BF5959;
  --md-white: #FFFFFF;
  --md-beige-muted: #BFBBA9;
  --md-ink-faint: #A9A597;
  --md-hairline: #D6D2B8;
  --md-frame: #3A3935;

  --md-display: 'Josefin Sans', 'Century Gothic', 'Futura', sans-serif;
  --md-body: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', system-ui, sans-serif;

  /* Portal recreation. Montserrat matches the product UI; swap to var(--md-body) if you prefer. */
  --p-font: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --p-title: 'Josefin Sans', 'Century Gothic', sans-serif;
  --p-bg: #FAFAF8;
  --p-head: #F2F0DE;
  --p-th: #F1EFDF;
  --p-line: #E6E4D8;
  --p-text: #1E1E1E;
  --p-muted: #6E6B64;
  --p-select: #ECECEA;
  --p-green: #67B84A;
  --p-server: #A9C3F5;
  --p-server-line: #5079D6;
  --p-edge: #8C8C8C;
  --p-edge-blue: #3F6FE0;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--md-power); }
.md-root:fullscreen { width: 100vw; height: 100vh; }
body { overflow: hidden; -webkit-font-smoothing: antialiased; }

.md-root {
  position: relative; width: 100%; height: 100%;
  /* full screen: the player fills the screen and rescales */
  display: flex; flex-direction: column;
  background: var(--md-frame); color: var(--md-power);
  font-family: var(--md-body); overflow: hidden;
  outline: none;
}

/* ---------- Top bar ---------- */
.md-bar {
  position: relative; flex: 0 0 40px; height: 40px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 0 14px; background: var(--md-power); color: var(--md-beige);
  z-index: 30;
}
.md-dots { flex: 0 0 auto; display: flex; gap: 8px; }
.md-dots i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #E0605A; }
.md-dots i:nth-child(2) { background: #E6B84A; }
.md-dots i:nth-child(3) { background: #5DB55E; }
.md-bar__spacer { flex: 1 1 auto; }
.md-count {
  font: 600 11px/1 var(--md-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--md-beige-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.md-count b { color: var(--md-beige); font-weight: 600; }
.md-iconbtn {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--md-beige-muted); cursor: pointer; border-radius: 0;
}
.md-iconbtn:hover { color: var(--md-beige); background: rgba(242,240,222,.08); }
.md-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 28px; padding: 0 14px;
  background: var(--md-beige); color: var(--md-power); text-decoration: none;
  font: 700 12px/1 var(--md-display); letter-spacing: .02em; text-transform: uppercase;
  padding-top: 2px; white-space: nowrap;
}
.md-cta:hover { background: var(--md-yellow); }
.md-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(242,240,222,.12); }
.md-progress i { display: block; height: 100%; width: 0; background: var(--md-red); transition: width .45s ease; }

/* ---------- Viewport, stage, screens ---------- */
.md-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--md-frame); }
.md-stage {
  position: absolute; left: 0; top: 0; width: 1280px; height: 696px;
  transform-origin: 0 0; background: var(--p-bg); overflow: hidden;
  transition: transform .6s cubic-bezier(.3,.7,.2,1);
}
.md-root.is-instant .md-stage { transition: none; }
.md-screen {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.md-screen.is-active { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }

/* ---------- Overlay: spotlight, beacon, tooltip ---------- */
.md-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.md-spot {
  position: absolute; border: 2px solid var(--md-beige);
  box-shadow: 0 0 0 9999px rgba(37,37,37,.5);
  opacity: 0; transition: opacity .3s ease;
}
.md-spot.is-on { opacity: 1; }

.md-beacon {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0;
  border: 3px solid var(--md-beige); border-radius: 50%; background: var(--md-red);
  cursor: pointer; pointer-events: auto; opacity: 0; transform: scale(.4);
  transition: opacity .25s ease, transform .25s ease;
}
.md-beacon.is-on { opacity: 1; transform: scale(1); }
.md-beacon::before, .md-beacon::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--md-red); animation: md-pulse 1.8s ease-out infinite;
}
.md-beacon::after { animation-delay: .9s; }
.md-beacon.is-nudge { animation: md-nudge .5s ease; }
@keyframes md-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes md-nudge { 0%,100% { transform: scale(1); } 30% { transform: scale(1.5); } 60% { transform: scale(.9); } }

.md-tip {
  position: absolute; left: 0; top: 0; width: 320px; max-width: calc(100% - 16px);
  background: var(--md-beige); color: var(--md-power); border: 1px solid var(--md-power);
  padding: 14px 18px 14px; pointer-events: auto;
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
.md-tip.is-on { opacity: 1; transform: none; }
.md-tip__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 600 11px/1 var(--md-body); letter-spacing: .12em; text-transform: uppercase; color: var(--md-gray);
  margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.md-tip__label b { color: var(--md-red); font-weight: 600; }
.md-tip__body p { margin: 0 0 8px; font: 400 15px/1.4 var(--md-body); text-wrap: pretty; }
.md-tip__body p:last-child { margin-bottom: 0; }
.md-tip mark, .md-modal mark {
  background: var(--md-yellow); color: var(--md-power); padding: 0 3px; margin: 0 -1px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.md-tip__action {
  display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--md-hairline);
  font: 700 14px/1.3 var(--md-body);
}
.md-tip__action::before {
  content: ""; flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--md-red);
  box-shadow: 0 0 0 3px rgba(191,89,89,.22);
}
.md-tip__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 10px; }
.md-tip__nav:empty { display: none; }
.md-btn {
  border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
  font: 700 13px/1 var(--md-display); letter-spacing: .02em; text-transform: uppercase;
  padding: 10px 16px 8px; background: var(--md-power); color: var(--md-beige);
  display: inline-flex; align-items: center; gap: 8px;
}
.md-btn:hover { background: #000; }
.md-btn--ghost {
  background: transparent; color: var(--md-gray); padding-left: 0; padding-right: 0;
  font: 600 11px/1 var(--md-body); letter-spacing: .12em;
}
.md-btn--ghost:hover { background: transparent; color: var(--md-power); }
.md-btn--ghost[disabled] { visibility: hidden; }
.md-tip__caret {
  position: absolute; width: 12px; height: 12px; background: var(--md-beige);
  border: 1px solid var(--md-power); transform: rotate(45deg);
}
.md-tip[data-side="right"] .md-tip__caret { left: -7px; border-top-color: transparent; border-right-color: transparent; }
.md-tip[data-side="left"] .md-tip__caret { right: -7px; border-bottom-color: transparent; border-left-color: transparent; }
.md-tip[data-side="bottom"] .md-tip__caret { top: -7px; border-bottom-color: transparent; border-right-color: transparent; }
.md-tip[data-side="top"] .md-tip__caret { bottom: -7px; border-top-color: transparent; border-left-color: transparent; }
.md-tip[data-side="center"] .md-tip__caret, .md-root.is-compact .md-tip__caret { display: none; }

/* ---------- Modal (intro / outro) ---------- */
.md-scrim {
  position: absolute; inset: 40px 0 0 0; background: rgba(37,37,37,.55); z-index: 20;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
}
.md-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.md-modal {
  position: absolute; z-index: 21; left: 50%; top: calc(50% + 20px);
  width: min(580px, calc(100% - 32px)); max-height: calc(100% - 64px); overflow: hidden auto;
  transform: translate(-50%, -46%); opacity: 0; visibility: hidden;
  background: var(--md-white); color: var(--md-power); padding: 38px 40px 30px;
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.md-modal.is-on { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .35s ease, transform .35s ease, visibility 0s; }
.md-modal__symbol { position: absolute; right: -78px; top: -78px; width: 230px; height: 230px; pointer-events: none; }
.md-modal__inner { position: relative; }
.md-modal h2 {
  margin: 0 0 16px; max-width: 15ch; font: 700 34px/1.12 var(--md-display);
  letter-spacing: .01em; text-transform: uppercase; color: var(--md-power); text-wrap: balance;
}
.md-modal h2 mark { padding: 4px 6px 0; }
.md-modal p { margin: 0 0 12px; max-width: 46ch; font: 400 17px/1.45 var(--md-body); color: var(--md-power); text-wrap: pretty; }
.md-modal p.md-modal__muted { color: #454338; }
.md-modal ul { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 9px; }
.md-modal li { position: relative; padding-left: 22px; font: 400 16px/1.4 var(--md-body); color: var(--md-power); }
.md-modal li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; background: var(--md-red); }
.md-modal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.md-modal .md-btn { background: var(--md-power); color: var(--md-beige); padding: 14px 22px 12px; font-size: 14px; }
.md-modal .md-btn:hover { background: #000; }
.md-modal .md-btn--outline { background: transparent; color: var(--md-power); box-shadow: inset 0 0 0 1px var(--md-power); }
.md-modal .md-btn--outline:hover { background: var(--md-beige); color: var(--md-power); }
.md-modal .md-btn--text { background: transparent; color: var(--md-gray); padding-left: 4px; padding-right: 4px; font: 600 11px/1 var(--md-body); letter-spacing: .12em; }
.md-modal .md-btn--text:hover { background: transparent; color: var(--md-power); }
.md-modal__meta {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--md-hairline);
  font: 600 11px/1 var(--md-body); letter-spacing: .12em; text-transform: uppercase; color: var(--md-gray);
}

/* ---------- Compact (phone) layout: tooltip docks under the stage ---------- */
.md-dock { display: none; }
.md-root.is-compact .md-dock {
  display: block; flex: 0 0 auto; position: relative; z-index: 15;
  background: var(--md-beige); border-top: 1px solid var(--md-power);
}
.md-root.is-compact .md-tip {
  position: static; width: auto; max-width: none; border: 0; padding: 14px 16px 14px;
  transform: none; min-height: 196px; display: flex; flex-direction: column;
}
.md-root.is-compact .md-tip__nav { margin-top: auto; padding-top: 12px; }
.md-root.is-compact .md-tip__body p { font-size: 15px; }
.md-root.is-compact .md-modal {
  left: 0; right: 0; top: 40px; bottom: 0; width: auto; max-height: none;
  transform: translateY(12px); padding: 26px 20px 22px;
}
.md-root.is-compact .md-modal.is-on { transform: none; }
.md-root.is-compact .md-modal h2 { font-size: 26px; }
.md-root.is-compact .md-modal p { font-size: 15px; }
.md-root.is-compact .md-modal li { font-size: 15px; }
.md-root.is-compact .md-modal__symbol { width: 170px; height: 170px; right: -60px; top: -60px; }
.md-root.is-compact .md-scrim { bottom: 0; }
.md-root.is-narrow .md-bar { gap: 6px; }
.md-root.is-narrow .md-dots { gap: 6px; }
.md-root.is-narrow .md-dots i { width: 10px; height: 10px; }

/* ---------- Focus and motion ---------- */
.md-root :focus-visible { outline: 2px solid var(--md-yellow); outline-offset: 2px; }
.md-modal :focus-visible, .md-tip :focus-visible { outline-color: var(--md-power); }
.md-hot { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .md-root *, .md-root *::before, .md-root *::after { transition-duration: 0s !important; animation: none !important; }
}

/* =====================================================================
   Portal recreation (stage coordinates: 1280 x 696)
   Sizes are measured from the portal at 1280 px wide.
   ===================================================================== */
.p { position: absolute; inset: 0; font-family: var(--p-font); color: var(--p-text); background: var(--p-bg); font-size: 9.5px; }
.p-head {
  position: absolute; left: 0; right: 0; top: 0; height: 36px; background: var(--p-head);
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 8px;
}
.p-head__logo { height: 18.5px; width: auto; display: block; }
.p-head__right { display: flex; align-items: center; gap: 6px; font: 400 11px/1 var(--p-font); color: #2a2a2a; }
.p-head__right svg { display: block; }
.p-head__right .gap { width: 4px; }

/* Tables */
.p-table { border-collapse: collapse; width: 100%; table-layout: fixed; background: #fff; }
.p-table th {
  background: var(--p-th); text-align: left; font: 700 9.4px/1 var(--p-font); color: #1b1b1b;
  padding: 0 7px; height: 21.5px; white-space: nowrap; position: relative;
}
.p-table th .p-sort { position: absolute; right: 9px; top: 7px; opacity: .5; }
.p-table td {
  padding: 0 7px; height: 23px; border-top: 1px solid var(--p-line); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font: 400 9.5px/1 var(--p-font); color: #3a3a3a;
}
.p-table td.b { font-weight: 700; color: #151515; }
.p-table tbody tr:hover td { background: #F6F6F3; }
.p-table tr.is-selected td { background: var(--p-select); }
.p-table tr.md-hot td { background: #F7F5E8; box-shadow: inset 0 1px 0 #E2DFC9, inset 0 -1px 0 #E2DFC9; }
.p-table--tall td { height: 24.2px; }
.p-table--compact td { height: 22.3px; }
.p-table .p-icon { display: inline-block; vertical-align: middle; margin-right: 6px; }
.p-scrollbar { position: absolute; width: 4px; background: #8d8d8d; border-radius: 2px; }

/* Application services list */
.p-apps__title { position: absolute; left: 15px; top: 47px; height: 24px; display: flex; align-items: center; gap: 6px; }
.p-apps__title h1 { margin: 0; font: 400 19.2px/1 var(--p-title); color: #232323; padding-top: 4px; }
.p-btn-small { font: 400 9.9px/1 var(--p-font); border: 1px solid #5a5a5a; border-radius: 4px; background: #fff; padding: 6px 6px 5px; color: #222; }
.p-search { position: absolute; left: 1044px; top: 46px; height: 25px; display: flex; align-items: center; gap: 9px; font: 400 9.5px/1 var(--p-font); color: #444; }
.p-search i { display: block; width: 182px; height: 25px; background: #fff; border: 1px solid #ddd; border-radius: 3px; }
.p-apps__table { position: absolute; left: 15px; width: 1252px; top: 79px; }

/* Application service detail */
.p-zone { position: absolute; left: 960px; right: 0; top: 36px; bottom: 0; background: #F1EFE0; }
.p-detail__title { position: absolute; left: 132px; top: 68px; display: flex; align-items: flex-end; gap: 10px; }
.p-detail__title h1 { margin: 0; font: 700 48px/1 var(--p-title); color: #222; text-transform: uppercase; }
.p-detail__title svg { margin-bottom: 7px; }
.p-detail__sum {
  position: absolute; left: 132px; top: 183px; display: flex; align-items: center; gap: 10px;
  font: 400 21.9px/1 var(--p-title); color: #6E6B64; text-transform: uppercase;
}
.p-detail__sum [data-anchor="map-icon"] { display: inline-flex; padding: 6px; margin: -6px; margin-top: -3px; }
.p-tabs { position: absolute; left: 132px; width: 1036px; top: 262px; display: grid; grid-template-columns: repeat(4, 1fr); }
.p-tab { font: 700 16.5px/1 var(--p-font); color: #7a7670; text-transform: uppercase; transition: color .3s; }
.p-tab.is-on { color: #111; }
.p-tab .plus { display: none; }
.p-tab.is-on .plus { display: inline; }
.p-pane { position: absolute; left: 132px; width: 1017px; top: 300px; transition: opacity .3s ease; }
.p-pane--split { top: 294px; width: 1017px; display: grid; grid-template-columns: 504px 510px; gap: 0 3px; }
.p-pane.is-hidden { opacity: 0; pointer-events: none; }
.p-scrollbox { position: relative; max-height: 362px; overflow: hidden; }

/* Dependency map */
.p-canvas { position: absolute; left: 25px; top: 50px; width: 1023px; height: 634px; border: 1px solid #444; background: #FAFAF9; overflow: hidden; }
.p-map { position: absolute; left: 0; top: 0; width: 1023px; height: 634px; overflow: visible; }
.p-map text { font-family: Arial, 'Helvetica Neue', sans-serif; font-size: 9.3px; fill: #222; pointer-events: none; }
.p-map .lbl-dark { fill: #EDEDED; }
.p-node { transition: transform .9s cubic-bezier(.3,.7,.2,1), opacity .6s ease; }
.p-node.is-hidden { opacity: 0; }
.p-node--server rect { fill: var(--p-server); stroke: var(--p-server-line); stroke-width: 1; transition: all .6s ease; }
.p-node--server text { font-size: 10.5px; transition: font-size .6s ease; }
.p-node--focus text { font-weight: 700; }
.p-edges path { fill: none; }
.p-edges .e { stroke: var(--p-edge); }
.p-edges .e--blue { stroke: var(--p-edge-blue); }
.p-edges .h { fill: var(--p-edge); }
.p-edges .h--blue { fill: var(--p-edge-blue); }
.p-edges { transition: opacity .25s ease; }
.p-edges.is-out { opacity: 0; }
.p-edge-hit { stroke: transparent; stroke-width: 20; fill: none; pointer-events: stroke; }
.p-ports { position: absolute; left: 513px; top: 327px; min-width: 66px; white-space: nowrap; background: #fff; border: 1px solid #cfcfcf; box-shadow: 1px 2px 4px rgba(0,0,0,.18); font: 400 10px/1 var(--p-font); color: #222; transition: opacity .3s; }
.p-ports div { padding: 9px 12px; }
.p-ports div + div { border-top: 1px solid #e6e6e6; }
.p-ports.is-hidden { opacity: 0; }
.p-mapnav { position: absolute; }
.p-panel > * { position: absolute; left: 1068px; width: 190px; }
.p-lbl { font: 400 9.5px/1 var(--p-font); color: #333; }
.p-select {
  height: 28px; background: #fff; border: 1px solid #e2e2e2; border-radius: 4px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 10px 0 11px; font: 400 12.5px/1 var(--p-font); color: #222;
}
.p-toggle { display: flex; align-items: center; gap: 6px; }
.p-switch {
  position: relative; width: 40px; height: 25px; border: 1px solid #cfc9a5; border-radius: 4px; background: #FDE98C;
  font: 400 10px/23px var(--p-font); padding-left: 7px; color: #222; transition: background .3s;
}
.p-switch::after { content: ""; position: absolute; right: 1px; top: 1px; width: 11px; height: 21px; background: #fff; border: 1px solid #cfc9a5; border-radius: 3px; transition: right .3s, left .3s; }
.p-switch.is-off { background: #fff; padding-left: 15px; }
.p-switch.is-off::after { right: auto; left: 1px; }
.p-date { display: flex; justify-content: space-between; font: 400 8.6px/1 var(--p-font); color: #444; }
.p-range { height: 9px; border: 1px solid #dcdcdc; background: #fff; border-radius: 5px; }
.p-range i { position: absolute; top: -3px; width: 12px; height: 13px; background: #F4F3EE; border: 1px solid #c8c8c8; border-radius: 2px; }
.p-range b { position: absolute; top: 1px; height: 5px; background: #FDE98C; }
.p-btn-cal { width: auto !important; padding: 8px 9px 7px; background: #F9EEB9; border: 1px solid #555; border-radius: 5px; font: 400 12.5px/1 var(--p-font); color: #222; }
.p-collapse { position: absolute; left: 1068px; top: 648px; padding: 7px 10px 6px; background: #F9EEB9; border: 1px solid #555; border-radius: 5px; font: 400 12.5px/1 var(--p-font); color: #222; }

/* Communication timeline */
.p-tl-scrim { position: absolute; inset: 0; background: rgba(60,60,60,.55); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.p-tl {
  position: absolute; left: 13px; top: 13px; width: 1253px; height: 672px; background: #fff; border-radius: 6px;
  opacity: 0; visibility: hidden; transform: translateY(10px); overflow: hidden;
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.p-tl.is-on, .p-tl-scrim.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s ease, visibility 0s; }
.p-tl__head { height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 13px; border-bottom: 1px solid #e9e9e9; }
.p-tl__head h2 { margin: 0; font: 700 15.4px/1 var(--p-title); color: #222; text-transform: uppercase; padding-top: 3px; }
.p-tl__svg { position: absolute; left: 0; top: 0; width: 1253px; height: 672px; }
.p-tl__svg text { font-family: var(--p-font); font-size: 9px; fill: #555; }
.p-tl__svg .yr { fill: #444; }
.p-tl__svg .lane-lbl { font-size: 8.7px; fill: #333; }
.p-tl__lane { fill: none; stroke-width: 7.4; stroke-linecap: butt; }
.p-tl__lane--a { stroke: #7C95D1; }
.p-tl__lane--b { stroke: #85B6D2; }