* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #0b0b0b;
  --panel: #000000;
  --ink: #e8f1fc;
  --muted: #616161;
  --faint: #333333;
  --well: #212121;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  background: var(--bg);
  font-family: 'Roboto Mono', monospace;
  color: var(--ink);
  overflow: hidden;
}

/* ---------- Side panel ---------- */

.side-panel {
  position: relative;
  flex: 0 0 379px;
  min-height: 1024px;
  height: 100vh;
  background: var(--panel);
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-height: 1023px) {
  .side-panel {
    height: auto;
  }
  body {
    overflow-y: auto;
  }
}

.logo {
  position: absolute;
  left: 49px;
  top: 46px;
  width: 38.5px;
  height: 37px;
  display: block;
  z-index: 1; /* the title's text box overlaps the logo and would swallow clicks */
}

.logo:hover svg rect {
  fill: #ffffff;
}

.logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.title {
  position: absolute;
  left: 41px;
  top: 42px;
  width: 316px;
  height: 106px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 52px;
  line-height: normal;
  text-align: right;
  color: var(--ink);
}

.version {
  position: absolute;
  left: 309px;
  top: 165px;
  font-size: 10px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--faint);
}

.barcode {
  position: absolute;
}

.barcode-header {
  left: 0;
  top: 163px;
  width: 379px;
  height: 18px;
}

.barcode-footer {
  left: 0;
  bottom: 18px;
  width: 379px;
  height: 7px;
}

.barcode span {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--faint);
}

.description {
  position: absolute;
  left: 45px;
  top: 206px;
  width: 309px;
  font-size: 15px;
  letter-spacing: -0.75px;
  text-align: justify;
  color: var(--muted);
}

.section-heading {
  position: absolute;
  left: 45px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 29px;
  line-height: normal;
  color: var(--ink);
}

.heading-controls {
  top: 280px;
}

.heading-export {
  bottom: 205px;
}

/* ---------- Upload ---------- */

.upload-box {
  position: absolute;
  left: 47px;
  top: 326px;
  width: 293px;
  height: 118px;
  background: transparent;
  border: 1px solid var(--well);
  font-family: 'Roboto Mono', monospace;
  font-size: 20px;
  letter-spacing: -1px;
  color: var(--muted);
  cursor: pointer;
}

.upload-box:hover {
  border-color: var(--faint);
  color: var(--ink);
}

/* ---------- Sliders ---------- */

.slider-row {
  position: absolute;
  left: 45px;
  top: var(--row-top);
  width: 299px;
  height: 59px;
}

.toggle-row {
  position: absolute;
  left: 45px;
  top: var(--row-top);
  width: 299px;
  height: 26px;
}

.toggle-row .slider-label {
  position: absolute;
  top: 0;
}

.toggle-row .checkbox {
  top: 1px;
}

.mode-hint {
  position: absolute;
  left: 45px;
  top: var(--row-top);
  font-size: 12px;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.toggle-row .toggle-label-1 { left: 0; }
.toggle-row .toggle-box-1 { left: 69px; }
.toggle-row .toggle-label-2 { left: 116px; }
.toggle-row .toggle-box-2 { left: 176px; }
.toggle-row .toggle-label-3 { left: 223px; }
.toggle-row .toggle-box-3 { left: 265px; }
.toggle-row .toggle-box-solo { left: 265px; }

.slider-label {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 15px;
  letter-spacing: -0.75px;
  color: var(--muted);
}

.slider-value {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 15px;
  letter-spacing: -0.75px;
  text-transform: uppercase;
  text-align: right;
  color: var(--muted);
}

.slider {
  position: absolute;
  left: 2px;
  top: 33px;
  width: 293px;
  height: 22px;
  background: var(--well);
  cursor: ew-resize;
  touch-action: none;
}

.slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 144px;
  background: var(--faint);
  pointer-events: none;
}

.slider-thumb {
  position: absolute;
  left: 135px;
  top: 0;
  width: 9px;
  height: 22px;
  background: var(--ink);
  pointer-events: none;
}

/* ---------- Export ---------- */

.format-label {
  position: absolute;
  bottom: 160px;
  font-size: 15px;
  letter-spacing: -0.75px;
  text-transform: uppercase;
  color: var(--muted);
}

.label-png {
  left: 45px;
}

.label-jpeg {
  left: 152px;
}

.label-webp {
  left: 260px;
}

.checkbox {
  position: absolute;
  width: 27px;
  height: 24px;
  background: var(--ink);
  border: none;
  cursor: pointer;
  padding: 0;
}

.checkbox-png,
.checkbox-jpeg,
.checkbox-webp {
  bottom: 161px;
}

.checkbox-png {
  left: 92px;
}

.checkbox-jpeg {
  left: 205px;
}

.checkbox-webp {
  left: 313px;
}

.checkbox[aria-checked="false"] {
  background: transparent;
  border: 0.632px solid var(--faint);
}

.checkbox svg {
  display: block;
  width: 17px;
  height: 15px;
  margin: 4px auto 0;
  visibility: hidden;
}

.checkbox[aria-checked="true"] svg {
  visibility: visible;
}

/* ---------- Buttons ---------- */

.btn {
  position: absolute;
  left: 45px;
  width: 295px;
  height: 46px;
  border: none;
  font-family: 'Roboto Mono', monospace;
  font-size: 20px;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

.btn-half {
  width: 143px;
}

.btn-invert {
  bottom: 90px;
  background: var(--faint);
  color: var(--ink);
}

.btn-reset {
  left: 197px;
  bottom: 90px;
  background: var(--faint);
  color: var(--ink);
}

.btn-invert:hover,
.btn-reset:hover {
  background: #3d3d3d;
}

.btn-extract {
  bottom: 38px;
  background: var(--ink);
  color: #000000;
}

.btn-extract:hover {
  background: #ffffff;
}

/* ---------- Viewer ---------- */

.viewer {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 49px;
  min-width: 0;
}

.empty-state {
  font-size: 15px;
  letter-spacing: -0.75px;
  color: var(--faint);
  user-select: none;
}

.stats {
  position: absolute;
  left: 49px;
  bottom: 7px;
  font-size: 15px;
  letter-spacing: -0.75px;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
}

#canvas {
  max-width: 100%;
  max-height: 100%;
  cursor: crosshair;
  touch-action: none;
}