:root {
  color-scheme: dark;
  --s2-focus: #7dd3fc;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  min-height: 40px;
  touch-action: manipulation;
}

input[type="range"] {
  max-width: 100%;
  min-height: 32px;
}

canvas,
svg,
img {
  max-width: 100%;
}

.panel,
.box,
.card,
.pane {
  min-width: 0;
}

.controls,
.toolbar,
.buttons,
.btns,
.btnrow {
  flex-wrap: wrap;
}

:focus-visible {
  outline: 2px solid var(--s2-focus);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  body {
    margin-inline: auto !important;
    padding: 12px !important;
  }

  .wrap,
  .wrapper,
  .container,
  .w3-content,
  .w3-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .row,
  .grid,
  .layout,
  .control-row,
  .controls,
  .slider-group,
  .slidergrp {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .readouts {
    grid-auto-flow: row !important;
    justify-content: start !important;
    margin-left: 0 !important;
  }

  .content {
    flex-direction: column !important;
  }

  #plot,
  .js-plotly-plot,
  .plot-container,
  .svg-container,
  .gl-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  input[type="range"] {
    width: 100% !important;
  }

  h1 {
    font-size: clamp(1.15rem, 6vw, 1.65rem) !important;
    line-height: 1.2 !important;
  }
}