:root{

  /*
   * 唯一逻辑母版。
   */

  --mx-master-w:1528px;
  --mx-master-h:828px;

  /*
   * 唯一整体缩放变量。
   */

  --mx-scale:1;

  --mx-stage-x:0px;
  --mx-stage-y:0px;

  /*
   * 与敏行物理正式网站一致。
   */

  --mx-bg:#f7f7f3;

  --mx-header-h-visible:70px;

}


*{
  box-sizing:border-box;
}


html,
body{

  width:100%;
  height:100%;

  margin:0;

  overflow:hidden;

  background:var(--mx-bg);

}


body{

  font-family:
    "Microsoft YaHei",
    "PingFang SC",
    "Noto Sans CJK SC",
    Arial,
    sans-serif;

}


/* =========================================================
   真实浏览器Viewport
   ========================================================= */

.mx-shell{

  position:fixed;
  inset:0;

  overflow:hidden;

  background:var(--mx-bg);

}


/* =========================================================
   外围Bleed

   与原网站完全相同的基础颜色。

   不使用另一套渐变。
   不使用新的业务元素。
   ========================================================= */

.mx-bleed{

  position:absolute;
  inset:0;

  z-index:0;

  overflow:hidden;

  background:var(--mx-bg);

  pointer-events:none;
  user-select:none;

}


/* =========================================================
   Header自然延展

   正式网站原规则：

   background:
   rgba(247,247,243,.985)

   border:
   rgba(216,222,218,.92)
   ========================================================= */

.mx-header-bleed{

  position:absolute;

  left:0;
  right:0;

  top:var(--mx-stage-y);

  height:
    var(--mx-header-h-visible);

  background:
    rgba(247,247,243,.985);

  border-bottom:
    1px solid
    rgba(216,222,218,.92);

}


/* =========================================================
   物理环境元素

   风格、透明度、运动方向参考原网站
   .physics-ambient。

   默认隐藏。

   Bleed足够大时才启用。
   ========================================================= */

.mx-ambient{

  position:absolute;

  z-index:0;

  display:block;

  height:auto;

  opacity:0;
  visibility:hidden;

  filter:saturate(.75);

  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;

  animation:
    mxAmbientFloat
    18s
    ease-in-out
    infinite
    alternate;

  animation-play-state:paused;

  will-change:transform;

}


.mx-ambient-wave{

  width:250px;

  left:4%;
  top:16%;

  animation-duration:22s;

}


.mx-ambient-orbit{

  width:220px;

  right:5%;
  top:12%;

  animation-duration:27s;
  animation-name:mxAmbientFloatB;

}


.mx-ambient-vector{

  width:230px;

  left:5%;
  bottom:10%;

  animation-duration:24s;

}


.mx-ambient-pendulum{

  width:150px;

  right:7%;
  bottom:10%;

  animation-duration:26s;
  animation-name:mxAmbientFloatB;

}


.mx-ambient-lens{

  width:235px;

  right:24%;
  top:38%;

  animation-duration:29s;

}


.mx-ambient-spring{

  width:230px;

  left:25%;
  top:6%;

  animation-duration:25s;

}


.mx-ambient-axis{

  width:175px;

  left:48%;
  bottom:4%;

  animation-duration:30s;
  animation-name:mxAmbientFloatB;

}


@keyframes mxAmbientFloat{

  to{
    transform:
      translate(18px,-16px)
      rotate(2deg);
  }

}


@keyframes mxAmbientFloatB{

  to{
    transform:
      translate(-15px,20px)
      rotate(-2deg);
  }

}


/* ---------------------------------------------------------
   Soft
   很少空间时只出现两个最淡的元素。
   --------------------------------------------------------- */

.mx-shell[data-bleed-level="soft"]
.mx-ambient-wave,

.mx-shell[data-bleed-level="soft"]
.mx-ambient-orbit{

  visibility:visible;

  opacity:.035;

  animation-play-state:running;

}


/* ---------------------------------------------------------
   Medium
   --------------------------------------------------------- */

.mx-shell[data-bleed-level="medium"]
.mx-ambient-wave,

.mx-shell[data-bleed-level="medium"]
.mx-ambient-orbit,

.mx-shell[data-bleed-level="medium"]
.mx-ambient-vector,

.mx-shell[data-bleed-level="medium"]
.mx-ambient-pendulum{

  visibility:visible;

  animation-play-state:running;

}


.mx-shell[data-bleed-level="medium"]
.mx-ambient-wave,

.mx-shell[data-bleed-level="medium"]
.mx-ambient-orbit,

.mx-shell[data-bleed-level="medium"]
.mx-ambient-vector,

.mx-shell[data-bleed-level="medium"]
.mx-ambient-pendulum{

  opacity:.050;

}


/* ---------------------------------------------------------
   Large
   超宽 / 大面积扩展时才启用完整环境。

   透明度接近原网站physics ambient，
   但稍微再克制一点。
   --------------------------------------------------------- */

.mx-shell[data-bleed-level="large"]
.mx-ambient{

  visibility:visible;

  animation-play-state:running;

}


.mx-shell[data-bleed-level="large"]
.mx-ambient-wave,

.mx-shell[data-bleed-level="large"]
.mx-ambient-orbit,

.mx-shell[data-bleed-level="large"]
.mx-ambient-vector,

.mx-shell[data-bleed-level="large"]
.mx-ambient-pendulum{

  opacity:.068;

}


.mx-shell[data-bleed-level="large"]
.mx-ambient-lens{

  opacity:.042;

}


.mx-shell[data-bleed-level="large"]
.mx-ambient-spring,

.mx-shell[data-bleed-level="large"]
.mx-ambient-axis{

  opacity:.046;

}


/* =========================================================
   唯一核心母版

   注意：

   scale只能存在于这里。

   里面所有导航、标题、按钮、卡片、动画、间距
   全部由浏览器作为同一整体进行缩放。
   ========================================================= */

.mx-stage{

  position:absolute;

  z-index:2;

  left:var(--mx-stage-x);
  top:var(--mx-stage-y);

  width:var(--mx-master-w);
  height:var(--mx-master-h);

  transform-origin:0 0;

  transform:
    scale(var(--mx-scale));

  will-change:transform;

}


/*
 * iframe本身绝对不scale。
 */

.mx-frame{

  display:block;

  width:1528px;
  height:828px;

  margin:0;
  padding:0;

  border:0;

  transform:none !important;

  background:var(--mx-bg);

}


/* =========================================================
   加载提示
   ========================================================= */

.mx-loading{

  position:absolute;

  z-index:10;

  left:50%;
  bottom:16px;

  transform:
    translateX(-50%);

  padding:
    7px 12px;

  border:
    1px solid
    rgba(201,210,206,.75);

  border-radius:999px;

  background:
    rgba(247,247,243,.94);

  color:#6e7876;

  font-size:12px;

  opacity:0;

  pointer-events:none;

  transition:
    opacity .16s ease;

}


.mx-shell.is-loading
.mx-loading{

  opacity:.7;

}


/* =========================================================
   V3视觉测试面板

   不属于核心网站。
   不参与1528×828母版。
   ========================================================= */

.mx-visual-panel{

  position:fixed;

  z-index:100000;

  right:14px;
  top:14px;

  width:310px;

  overflow:hidden;

  border:
    1px solid
    rgba(195,205,201,.95);

  border-radius:12px;

  background:
    rgba(250,251,248,.97);

  box-shadow:
    0 14px 38px
    rgba(26,43,40,.14);

  color:#293633;

  font-size:12px;

}


.mx-visual-head{

  height:42px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:
    0 12px;

  border-bottom:
    1px solid #e2e7e4;

}


.mx-visual-head strong{

  font-size:13px;

}


.mx-visual-head button{

  border:0;
  background:transparent;

  color:#6f7b78;

  cursor:pointer;

  font-size:12px;

}


.mx-visual-content{

  padding:11px 12px 12px;

}


.mx-visual-note{

  line-height:1.55;

  color:#747f7c;

  margin-bottom:10px;

}


.mx-visual-buttons{

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:6px;

  margin-bottom:11px;

}


.mx-visual-buttons button{

  height:34px;

  border:
    1px solid #cad4d0;

  border-radius:7px;

  background:#fff;

  color:#3a4744;

  cursor:pointer;

  font-size:12px;

}


.mx-visual-buttons button.active{

  border-color:#28566a;

  background:#28566a;

  color:white;

}


.mx-visual-data{

  display:grid;

  gap:5px;

}


.mx-visual-data>div{

  display:flex;

  justify-content:space-between;

  gap:12px;

  padding:
    5px 7px;

  border-radius:6px;

  background:#f1f4f1;

}


.mx-visual-data span{

  color:#79837f;

}


.mx-visual-data b{

  font-weight:650;

  text-align:right;

}


/* =========================================================
   动画偏好
   ========================================================= */

@media
(prefers-reduced-motion:reduce){

  .mx-ambient{
    animation:none !important;
  }

  .mx-loading{
    transition:none;
  }

}