:root {
  color-scheme: dark;
  background: #0e1014;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(circle at 50% 34%, rgb(154 180 197 / 8%), transparent 31rem),
    #0e1014;
}

.widget-stage {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 0;
}

lynx-board {
  display: block;
  width: min(100%, 562px);
  min-height: 661px;
  border: 1px solid rgb(255 255 255 / 5%);
  background: #111318;
  box-shadow:
    0 30px 90px rgb(0 0 0 / 38%),
    0 0 50px rgb(154 180 197 / 3%);
}

.loading-copy {
  margin: 0;
  padding: 40px;
  color: #969faa;
  font: 15px/1.5 "Segoe UI", sans-serif;
}

@media (max-width: 562px) {
  .widget-stage {
    place-items: start stretch;
  }

  lynx-board {
    max-width: none;
    box-shadow: none;
  }
}