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

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

.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;
}

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

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

.function-stage{
  background:#fbfcff;
}

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

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

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

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

.function-axis-label{
  font-size:28px;
  font-weight:800;
}

.function-tick-label{
  font-size:19px;
  font-weight:650;
}

.function-area{
  fill:rgba(42,91,215,.12);
  stroke:rgba(42,91,215,.35);
  stroke-width:2;
  cursor:pointer;
}

.function-line{
  fill:none;
  stroke:#2a5bd7;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.function-curve{
  fill:none;
  stroke:#2a5bd7;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.function-line.is-dashed{
  stroke-dasharray:18 14;
}

.function-segment-mark{
  fill:none;
  stroke:#2a5bd7;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.function-line-hit{
  fill:none;
  stroke:transparent;
  stroke-width:36;
  stroke-linecap:round;
  cursor:pointer;
}

.function-curve-hit{
  fill:none;
  stroke:transparent;
  stroke-width:38;
  stroke-linecap:round;
  stroke-linejoin:round;
  cursor:pointer;
}

.function-angle{
  fill:none;
  stroke:#7b61d1;
  stroke-width:5;
  stroke-linecap:round;
}

.function-angle-hit{
  fill:none;
  stroke:transparent;
  stroke-width:34;
  stroke-linecap:round;
  cursor:pointer;
}

.function-point{
  fill:#e25555;
  stroke:#fff;
  stroke-width:4;
  cursor:pointer;
}

.function-point.is-transparent,
.function-point-hit.is-transparent{
  fill:transparent;
  stroke:transparent;
  pointer-events:none;
}

.function-point-hit{
  fill:transparent;
  cursor:pointer;
}

.function-label{
  fill:#1f2430;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:34px;
  font-weight:800;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:7;
  stroke-linejoin:round;
  cursor:pointer;
}

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

.function-rich-label-source{
  opacity:.001;
}

.function-rich-label{
  pointer-events:none;
}

.function-rich-label-text{
  fill:#1f2430;
  font-family:var(--function-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif);
  font-weight:800;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:7;
  stroke-linejoin:round;
}

.function-rich-label.muted .function-rich-label-text{
  fill:#687086;
  font-weight:750;
}

.function-rich-fraction-rule,
.function-rich-sqrt-rule,
.function-rich-vector-arrow,
.function-rich-matrix-bracket{
  fill:none;
  stroke:#1f2430;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.function-rich-large-operator{
  font-weight:650;
  stroke-width:4;
}