#pane-container {
  opacity: 0.85;
  --tp-base-background-color: hsla(0, 0%, 0%, 1);
  --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
  --tp-button-background-color: hsla(0, 0%, 70%, 1);
  --tp-button-background-color-active: hsla(0, 0%, 85%, 1);
  --tp-button-background-color-focus: hsla(0, 0%, 80%, 1);
  --tp-button-background-color-hover: hsla(0, 0%, 75%, 1);
  --tp-button-foreground-color: hsla(0, 0%, 0%, 1);
  --tp-container-background-color: hsla(0, 0%, 10%, 1);
  --tp-container-background-color-active: hsla(0, 0%, 25%, 1);
  --tp-container-background-color-focus: hsla(0, 0%, 20%, 1);
  --tp-container-background-color-hover: hsla(0, 0%, 15%, 1);
  --tp-container-foreground-color: hsla(0, 0%, 50%, 1);
  --tp-groove-foreground-color: hsla(0, 0%, 10%, 1);
  --tp-input-background-color: hsla(0, 0%, 10%, 1);
  --tp-input-background-color-active: hsla(0, 0%, 25%, 1);
  --tp-input-background-color-focus: hsla(0, 0%, 20%, 1);
  --tp-input-background-color-hover: hsla(0, 0%, 15%, 1);
  --tp-input-foreground-color: hsla(0, 0%, 70%, 1);
  --tp-label-foreground-color: hsla(0, 0%, 50%, 1);
  --tp-monitor-background-color: hsla(0, 0%, 8%, 1);
  --tp-monitor-foreground-color: hsla(0, 0%, 48%, 1);
}

html[data-theme="light"] #pane-container {
  --tp-base-background-color: hsla(230, 5%, 90%, 1);
  --tp-base-shadow-color: hsla(0, 0%, 0%, 0.1);
  --tp-button-background-color: hsla(230, 7%, 75%, 1);
  --tp-button-background-color-active: hsla(230, 7%, 60%, 1);
  --tp-button-background-color-focus: hsla(230, 7%, 65%, 1);
  --tp-button-background-color-hover: hsla(230, 7%, 70%, 1);
  --tp-button-foreground-color: hsla(230, 10%, 30%, 1);
  --tp-container-background-color: hsla(230, 15%, 30%, 0.2);
  --tp-container-background-color-active: hsla(230, 15%, 30%, 0.32);
  --tp-container-background-color-focus: hsla(230, 15%, 30%, 0.28);
  --tp-container-background-color-hover: hsla(230, 15%, 30%, 0.24);
  --tp-container-foreground-color: hsla(230, 10%, 30%, 1);
  --tp-groove-foreground-color: hsla(230, 15%, 30%, 0.1);
  --tp-input-background-color: hsla(230, 15%, 30%, 0.1);
  --tp-input-background-color-active: hsla(230, 15%, 30%, 0.22);
  --tp-input-background-color-focus: hsla(230, 15%, 30%, 0.18);
  --tp-input-background-color-hover: hsla(230, 15%, 30%, 0.14);
  --tp-input-foreground-color: hsla(230, 10%, 30%, 1);
  --tp-label-foreground-color: hsla(230, 10%, 30%, 0.7);
  --tp-monitor-background-color: hsla(230, 15%, 30%, 0.1);
  --tp-monitor-foreground-color: hsla(230, 10%, 30%, 0.5);
}

article .canvas-element-wrapper {
  display: inline-flex;
}

canvas {
  display: block;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

main {
  padding: clamp(1rem, 3vw, 2rem);
}

.pico footer.fullscreen-mode {
  background-color: var(--pico-background-color);
  border-radius: var(--pico-border-radius);
  bottom: 8px;
  font-size: clamp(0.75rem, 0.75vw + 0.25rem, 1rem);
  padding: 0 2ex;
  left: 8px;
  position: absolute;
}

.pico footer.fullscreen-mode * {
  font-size: inherit;
}

.pico footer.fullscreen-mode li {
  padding: 1ex;
}

.pico footer.fullscreen-mode p {
  margin: 0;
  padding: 0;
}

.pico footer nav li a {
  cursor: pointer;
  font-size: 1em;
  line-height: 1em;
  text-decoration: none;
  vertical-align: middle;
}

.pico footer nav img {
  height: 2ex;
  width: auto;
}