h1 {
  font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif;
  font-size: var(--font-size-xxx-large, 1.75rem);
  font-weight: 400;
  line-height: var(--line-height-xxx-large, 2.375rem);
}
h2 {
  font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif;
  font-size: var(--font-size-xx-large, 1.5rem);
  font-weight: 400;
  line-height: var(--line-height-xx-large, 2.125rem);
}
h3 {
  font-family: sans-serif;
  font-size: var(--font-size-x-large, 1.25rem);
  font-weight: 700;
  line-height: var(--line-height-x-large, 1.875rem);
}
h4,
h5,
h6 {
  font-family: sans-serif;
  font-size: var(--font-size-medium, 1rem);
  font-weight: 700;
  line-height: var(--line-height-medium, 1.625rem);
}
p,
blockquote {
  font-family: sans-serif;
  font-size: var(--font-size-medium, 1rem);
  font-weight: 400;
  line-height: var(--line-height-medium, 1.625rem);
}
blockquote {
  font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif;
}
small,
figcaption,
cite {
  font-family: sans-serif;
  font-size: var(--font-size-small, 0.875rem);
  font-weight: 400;
  line-height: var(--line-height-small, 1.375rem);
}
code {
  font-family: 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;
}
.cdx-label,
.cdx-label * {
  font-weight: bold !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.canvas {
  min-width: 12rem;
  min-height: 12rem;
  max-width: 56rem;
  max-height: 28rem;
  font-size: 0;
  line-height: 0;
  position: relative;
}
.canvas__clear {
  position: absolute;
  right: 0;
  margin: 5px;
  transform: translateY(calc(-100% - 5px));
}
.canvas__pixel {
  border: 1px solid var(--border-color-base, #a2a9b1);
  width: calc(100% / var(--w));
  height: calc(100% / var(--h));
  display: inline-block;
  margin: 0;
}
.canvas__pixel--white {
  background: white;
}
.canvas__pixel--black {
  background: black;
}
.best-chip {
  padding: 12px;
}
.best-chip .cdx-info-chip__text > span {
  display: block;
  text-align: center;
}
.best-chip__value {
  font-weight: bold;
  font-size: var(--font-size-xx-large, 1.5rem);
}
.best-chip__value:not(.best-chip__value--unknown)::before {
  content: "您在画";
  color: var(--color-subtle, #54595d);
  font-size: var(--font-size-x-small, 0.75rem);
}
.best-chip__value--unknown {
  color: var(--color-error, #bf3c2c);
}
.best-chip__note {
  color: var(--color-neutral, #404244);
}
.number-bar {
  display: flex;
}
.number-bar__number {
  flex: 1;
  vertical-align: middle;
  font-weight: bold;
}
.number-bar__bar {
  flex: 9;
}
.number-bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.number-bars__bar {
  flex: 1;
}
.settings-dialog__entry {
  display: flex;
}
.settings-dialog__entry__label {
  flex: 2;
  font-weight: bold;
  align-self: center;
}
.settings-dialog__entry__widget {
  flex: 8;
  display: flex;
}
.settings-dialog__entry__widget > * {
  flex: 1;
}
.header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color-base, #a2a9b1);
}
.header__title {
  margin: 0;
}
.header__actions {
  align-self: center;
}
.results {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  min-height: 24rem;
}
.results__best {
  margin-bottom: 24px;
}
.results__bars:not(.results__bars--no-data) {
  min-width: 8rem;
}
.results__bars--no-data {
  margin-block: auto;
}
main {
  width: 100%;
}
main .body {
  display: flex;
}
main .body .canvas {
  flex: 8;
  width: 100%;
  height: 100%;
}
main .body .results {
  flex: 2;
}