:root {
  --space-1: 0.75rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  color-scheme: light;
}

html {
  min-height: 100%;
  background: #fff;
}

body {
  min-height: 100%;
  background: #fff;
}

html.dark-mode,
html.dark-mode body,
body.dark-mode {
  color-scheme: dark;
  color: #f1f1f1;
  background: #111;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode button,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode button {
  color: #f1f1f1;
  background: #151515;
  border-color: #555;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #b8b8b8;
  opacity: 1;
}

html.dark-mode header,
html.dark-mode article,
html.dark-mode footer,
html.dark-mode .panel,
body.dark-mode header,
body.dark-mode article,
body.dark-mode footer,
body.dark-mode .panel {
  color: #f1f1f1;
  background: #1b1b1b;
  border-color: #383838;
}

html.dark-mode .option,
html.dark-mode .paste-view,
html.dark-mode .stats article,
body.dark-mode .option,
body.dark-mode .paste-view,
body.dark-mode .stats article {
  color: #f1f1f1;
  background: #1b1b1b;
  border-color: #383838;
}

html.dark-mode table,
html.dark-mode th,
html.dark-mode td,
body.dark-mode table,
body.dark-mode th,
body.dark-mode td {
  color: #f1f1f1;
  border-color: #383838;
}

.site-header {
  padding: 0;
  border-bottom: 1px solid #d8d8d8;
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: var(--space-2);
}

.site-brand-row {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.mini-logo {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px dotted currentColor;
  border-radius: 999px;
}

.site-brand img {
  width: 44px;
  height: 44px;
  border: 2px dotted currentColor;
  border-radius: 999px;
  object-fit: contain;
}

.site-nav {
  position: static;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  height: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.site-nav a {
  padding: 0.35rem 0.6rem;
  color: inherit;
  text-decoration: none;
  border-radius: 0.25rem;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: rgb(0 0 0 / 8%);
}

html.dark-mode .site-nav a:hover,
html.dark-mode .site-nav a[aria-current="page"] {
  background: rgb(255 255 255 / 12%);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 1px solid rgb(0 0 0 / 18%);
  border-radius: 999px;
}

.theme-toggle-dark {
  display: none;
}

html.dark-mode .theme-toggle-light,
body.dark-mode .theme-toggle-light {
  display: none;
}

html.dark-mode .theme-toggle-dark,
body.dark-mode .theme-toggle-dark {
  display: inline;
}

main {
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: var(--space-4) var(--space-2);
}

.page {
  display: grid;
  gap: var(--space-3);
}

.home-hero {
  padding: var(--space-5) var(--space-2);
  text-align: center;
}

.home-hero p {
  max-width: 44rem;
  margin: 0 auto;
}

.options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.option,
.panel,
.paste-view {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid #d8d8d8;
}

.panel label {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid transparent;
  cursor: pointer;
}

label:has(input[type="checkbox"]:checked) {
  color: #fff;
  background: #111;
  border-color: #111;
  font-weight: 700;
}

html.dark-mode label:has(input[type="checkbox"]:checked),
body.dark-mode label:has(input[type="checkbox"]:checked) {
  color: #111;
  background: #f5f5f5;
  border-color: #f5f5f5;
}

input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  accent-color: #111;
}

html.dark-mode input[type="checkbox"],
body.dark-mode input[type="checkbox"] {
  accent-color: #f5f5f5;
}

.panel input,
.panel textarea {
  width: 100%;
}

.panel textarea {
  min-height: 14rem;
  resize: vertical;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.inline-actions button {
  margin: 0;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.stats article {
  padding: var(--space-2);
  border: 1px solid #d8d8d8;
}

.stats strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.5rem;
  vertical-align: top;
  border: 1px solid #d8d8d8;
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
}

.media-item {
  max-width: 100%;
  max-height: 75vh;
}

.upload-progress {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
}

.upload-progress[hidden] {
  display: none;
}

.upload-progress svg {
  width: 2rem;
  height: 2rem;
  animation: upload-spin 900ms linear infinite;
}

.upload-progress circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 80 34;
}

@keyframes upload-spin {
  to {
    transform: rotate(360deg);
  }
}

.intermission {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
}

.intermission-ad {
  min-height: 250px;
}

[data-ad-status] {
  font-weight: 700;
}

.err {
  color: #a40008;
  font-weight: 700;
}

.ok {
  color: #0b5e00;
  font-weight: 700;
}

.site-footer {
  border-top: 1px solid #d8d8d8;
}

.footer-inner {
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: var(--space-2);
}

@media (max-width: 760px) {
  .site-header-inner,
  .options,
  .stats {
    grid-template-columns: 1fr;
  }

  .site-header-inner {
    display: grid;
  }

  .site-nav {
    justify-content: flex-start;
  }

  table {
    display: block;
    overflow-x: auto;
  }
}