.function-complex-app{
  max-width:900px;
}

.function-complex-app .topbar{
  grid-template-columns:112px 1fr 104px;
}

.function-complex-app .topbar-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.topbar-tools{
  display:grid;
  grid-template-columns:64px 42px;
  gap:6px;
}

.topbar-tools .btn{
  min-width:0;
  padding-inline:0;
}

.topbar-tools .icon-btn{
  font-size:18px;
  line-height:1;
}

.function-complex-stage{
  background:#fbfcff;
}

.complex-grid-minor{
  stroke:#edf1f8;
  stroke-width:1;
}

.complex-grid-major{
  stroke:#dce4f2;
  stroke-width:1.4;
}

.complex-axis{
  stroke:#24304d;
  stroke-width:3;
}

.complex-axis-label,
.complex-tick-label,
.complex-label{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  pointer-events:none;
}

.complex-axis-label{
  fill:#657089;
  font-size:28px;
  font-weight:800;
}

.complex-tick-label{
  fill:#657089;
  font-size:19px;
  font-weight:650;
}

.complex-label{
  fill:#1f2430;
  font-size:31px;
  font-weight:800;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:7;
  stroke-linejoin:round;
  cursor:pointer;
  pointer-events:auto;
}

.complex-label.muted{
  fill:#687086;
  font-size:25px;
  font-weight:750;
}

.complex-point{
  stroke:#fff;
  stroke-width:4;
  cursor:pointer;
}

.complex-point-hit,
.complex-line-hit,
.complex-circle-hit,
.complex-angle-hit{
  fill:none;
  stroke:transparent;
  cursor:pointer;
}

.complex-point-hit{
  stroke-width:34;
}

.complex-line,
.complex-vector,
.complex-segment,
.complex-helper,
.complex-circle,
.complex-angle{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.complex-vector{
  stroke-width:6;
}

.complex-segment{
  stroke-width:5;
}

.complex-helper{
  stroke-width:4;
  stroke-dasharray:14 12;
}

.complex-circle{
  stroke-width:4;
}

.complex-angle{
  stroke-width:5;
}

.complex-fill{
  fill:rgba(42,91,215,.10);
  stroke:rgba(42,91,215,.34);
  stroke-width:2;
  cursor:pointer;
}

.complex-line-hit,
.complex-circle-hit,
.complex-angle-hit{
  stroke-width:36;
}

.complex-arrow{
  fill:context-stroke;
}

.bottom-bar.four-fields{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.complex-field-group{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  min-width:0;
}

.complex-readout{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0 12px;
  z-index:8;
}

.complex-readout-item{
  min-width:0;
  padding:7px 10px;
  border:1px solid #e4e8f3;
  border-radius:12px;
  background:rgba(255,255,255,.86);
  color:#334155;
  font-size:12px;
  font-weight:700;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.complex-modal-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

@media (max-width: 620px){
  .function-complex-app .topbar{
    grid-template-columns:112px minmax(0,1fr) 72px;
  }

  .bottom-bar,
  .bottom-bar.four-fields{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .complex-readout{
    grid-template-columns:1fr;
  }
}