/* Open space, a connected light rail and stage-specific brand accents. */
#path #mf-compact{--path-color:#d7dfa2;--path-reached:8.333%;--mi-accent:var(--path-color)}
#path #mf-compact .mi-product{overflow:visible}
#path #mf-compact .official-path-intro{margin:12px 0 28px;gap:50px}
#path #mf-compact .official-path-intro h2{font-size:clamp(25px,2.5cqw,36px);margin:0}
#path #mf-compact .mi-tabs{position:relative;isolation:isolate;border:0;padding:0 0 16px;gap:0}
#path #mf-compact .mi-tabs:before{content:'';position:absolute;top:27px;left:8.333%;right:8.333%;height:1px;background:linear-gradient(90deg,#d7dfa250,#a6d6c550,#e5c3a550,#bda5e450);z-index:-1}
#path #mf-compact .mi-tabs:after{content:'';position:absolute;left:8.333%;top:27px;width:max(0px,calc(var(--path-reached) - 8.333%));height:1px;background:linear-gradient(90deg,#d7dfa2,var(--path-color));box-shadow:0 0 10px var(--path-color);transition:width .8s cubic-bezier(.22,1,.36,1),background .8s;z-index:-1}
#path #mf-compact .mi-tabs button{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:118px;padding:0 7px;font-size:13px;color:#9aa496;line-height:1.4;border:0;border-radius:0}
#path #mf-compact .mi-tabs button:after{display:none}
#path #mf-compact .mi-tabs b{font-size:10px;line-height:1;letter-spacing:.13em;margin:2px 0 0;color:#86917f;transition:color .6s}
#path #mf-compact .path-symbol{display:grid;place-items:center;position:relative;flex:none;width:55px;height:55px;border-radius:50%;background:#181c16;box-shadow:0 0 0 6px #181c16;color:var(--step-color);border:1px solid color-mix(in srgb,var(--step-color) 22%,transparent);transition:box-shadow .7s,background .7s,border-color .7s,transform .7s}
#path #mf-compact .path-symbol svg{width:25px;height:25px;opacity:.65;transition:opacity .7s}
#path #mf-compact .path-symbol:after{content:'';position:absolute;inset:-5px;border:1px solid transparent;border-radius:50%;transition:border-color .7s,transform .7s}
#path #mf-compact .mi-tabs button[aria-pressed=true]{color:#f0f0e8}
#path #mf-compact .mi-tabs button[aria-pressed=true] b{color:var(--step-color)}
#path #mf-compact .mi-tabs button[aria-pressed=true] .path-symbol{background:color-mix(in srgb,var(--step-color) 13%,#151912);border-color:var(--step-color);box-shadow:0 0 0 6px #181c16,0 0 34px color-mix(in srgb,var(--step-color) 25%,transparent);transform:translateY(-2px)}
#path #mf-compact .mi-tabs button[aria-pressed=true] .path-symbol:after{border-color:color-mix(in srgb,var(--step-color) 28%,transparent);transform:scale(1.08)}
#path #mf-compact .mi-tabs button[aria-pressed=true] svg,#path #mf-compact .mi-tabs button:hover svg{opacity:1}
#path #mf-compact .mi-tabs button[data-passed=true] .path-symbol{border-color:color-mix(in srgb,var(--step-color) 50%,transparent)}
#path #mf-compact .mi-tabs button:focus-visible{outline:1px solid var(--step-color);outline-offset:5px;border-radius:8px}
#path #mf-compact .mi-layout{position:relative;min-height:218px;padding:36px 47% 26px 0;overflow:hidden;border:0;background:radial-gradient(ellipse at 73% 52%,color-mix(in srgb,var(--path-color) 9%,transparent),transparent 62%)}
#path #mf-compact .mi-layout:before{display:block;content:attr(data-chapter);position:absolute;left:44%;bottom:4px;line-height:1;font-size:180px;font-weight:300;letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--path-color) 12%,transparent);z-index:-1;pointer-events:none}
#path #mf-compact .mi-layout:after{content:'';position:absolute;left:5%;right:5%;top:0;width:auto;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--path-color) 35%,transparent),transparent);box-shadow:none;border:0;border-radius:0}
#path #mf-compact .mi-copy{min-height:140px;max-width:560px;display:flex;flex-direction:column;justify-content:center;padding:0}
#path #mf-compact .mi-count{display:block;margin:0 0 12px;letter-spacing:.2em;font-size:10px;color:var(--path-color)}
#path #mf-compact .mi-copy h2{font-size:clamp(27px,2.8cqw,40px);line-height:1.12;margin:0 0 12px;letter-spacing:-.045em}
#path #mf-compact .mi-description{font-size:14px;line-height:1.7;max-width:44ch}
#path #mf-compact .mi-art{position:absolute;right:11%;top:50%;width:300px;height:320px;transform:translateY(-50%) scale(.64);transform-origin:center;overflow:visible;max-width:none;margin:0}
#path #mf-compact .mi-art:before{inset:-20px;background:radial-gradient(ellipse,color-mix(in srgb,var(--path-color) 17%,transparent),transparent 67%);filter:blur(12px)}
#path #mf-compact .mi-window,#path #mf-compact .mi-paper,#path #mf-compact .mi-call{border-color:color-mix(in srgb,var(--path-color) 40%,transparent)}
#path #mf-compact .mi-feedback{background:linear-gradient(135deg,#254238,#182b25);border-color:#a6d6c560}
#path #mf-compact .mi-answer.correct{background:#c5b0df;color:#211a2a;border-color:#c5b0df}
#path #mf-compact .mi-art.animate>.mi-figure{animation:path-figure .65s cubic-bezier(.22,1,.36,1) both}
#path #mf-compact .mi-copy-enter{animation:path-copy .55s ease both}
@keyframes path-figure{from{opacity:0;translate:15px 10px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes path-copy{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:700px){
 #path #mf-compact .official-path-intro{display:block;margin:12px 0 24px}
 #path #mf-compact .official-path-intro h2{font-size:26px}
 #path #mf-compact .official-path-intro p{max-width:100%;font-size:12px;margin-top:12px}
 #path #mf-compact .mi-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 0;padding-bottom:19px}
 #path #mf-compact .mi-tabs:before{left:16.666%;right:16.666%;top:21px;box-shadow:0 102px 0 #bda5e425}
 #path #mf-compact .mi-tabs:after{display:none}
 #path #mf-compact .mi-tabs button{min-height:89px;gap:5px;padding:0 5px;font-size:11px}
 #path #mf-compact .mi-tabs b{font-size:9px}
 #path #mf-compact .path-symbol{width:42px;height:42px;box-shadow:0 0 0 5px #181c16}
 #path #mf-compact .path-symbol svg{width:21px;height:21px}
 #path #mf-compact .mi-layout{min-height:193px;padding:22px 43% 20px 0}
 #path #mf-compact .mi-copy{min-height:145px}
 #path #mf-compact .mi-copy h2{font-size:23px;line-height:1.15}
 #path #mf-compact .mi-description{font-size:12px;line-height:1.65}
 #path #mf-compact .mi-count{font-size:9px;margin-bottom:10px}
 #path #mf-compact .mi-art{right:calc(19% - 150px);transform:translateY(-50%) scale(.4)}
 #path #mf-compact .mi-layout:before{font-size:130px;left:40%;bottom:20px}
}
@media(prefers-reduced-motion:reduce){#path #mf-compact *,#path #mf-compact *:before,#path #mf-compact *:after{animation:none!important;transition:none!important}}