: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,
html.dark-mode .stats article,
body.dark-mode header,
body.dark-mode article,
body.dark-mode footer,
body.dark-mode .panel,
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;
}

html.dark-mode p,
body.dark-mode p {
  color: #c4c4c4;
}

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

.home-hero h1 {
  margin: 0 0 var(--space-1);
}

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

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

.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(1400px, 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;
}

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

.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;
  transform-style: flat;
  z-index: auto;
}

.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"],
body.dark-mode .site-nav a:hover,
body.dark-mode .site-nav a[aria-current="page"] {
  background: rgb(255 255 255 / 12%);
}

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

.theme-toggle:hover,
.theme-toggle:focus {
  background: rgb(0 0 0 / 8%);
  box-shadow: none;
}

body.dark-mode .theme-toggle,
html.dark-mode .theme-toggle {
  border-color: rgb(255 255 255 / 28%);
}

body.dark-mode .theme-toggle:hover,
body.dark-mode .theme-toggle:focus,
html.dark-mode .theme-toggle:hover,
html.dark-mode .theme-toggle:focus {
  background: rgb(255 255 255 / 12%);
}

.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(1400px, 100%);
  margin: 0 auto;
  padding: var(--space-4) var(--space-2);
}

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

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

.field-group {
  display: grid;
  gap: 0.35rem;
  font-weight: 700;
}

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

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

.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;
}

.dashboard-tabs {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  width: auto;
  height: auto;
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  background: transparent;
  border-bottom: 1px solid #d8d8d8;
  box-shadow: none;
  transform: none;
  z-index: auto;
}

.dashboard-tabs a {
  display: inline-flex;
  padding: 0.55rem 0.8rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid #d8d8d8;
  border-bottom: 0;
}

.dashboard-tabs a.is-active {
  font-weight: 700;
  background: rgb(0 0 0 / 6%);
}

html.dark-mode .dashboard-tabs,
body.dark-mode .dashboard-tabs,
html.dark-mode .dashboard-tabs a,
body.dark-mode .dashboard-tabs a {
  border-color: #383838;
}

html.dark-mode .dashboard-tabs a.is-active,
body.dark-mode .dashboard-tabs a.is-active {
  background: rgb(255 255 255 / 12%);
}

.dashboard-panel {
  display: grid;
  gap: var(--space-2);
}

.dashboard-panel[hidden] {
  display: none;
}

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

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
}

.metric-breakdown summary {
  display: inline-flex;
  padding: 0.25rem 0.45rem;
  cursor: pointer;
  border: 1px solid #d8d8d8;
}

.metric-breakdown[open] summary {
  margin-bottom: 0.4rem;
}

.metric-breakdown table {
  min-width: 28rem;
  font-size: 0.9rem;
}

html.dark-mode .metric-breakdown summary,
body.dark-mode .metric-breakdown summary {
  border-color: #383838;
}

.thumb-frame {
  display: grid;
  place-items: center;
  width: clamp(10rem, 18vw, 22rem);
  max-width: 100%;
  min-width: 9rem;
  max-height: 14rem;
  aspect-ratio: 16 / 9;
  background: rgb(0 0 0 / 4%);
  border: 1px solid #d8d8d8;
  overflow: hidden;
}

.thumb {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
}

section:has(> table) {
  overflow-x: auto;
}

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

code {
  white-space: pre-wrap;
  word-break: break-word;
}

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

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

.inline-actions,
.slot-actions form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--space-2);
}

.mini-form {
  display: grid;
  gap: 0.35rem;
  min-width: 12rem;
}

.mini-form input,
.mini-form select,
.mini-form textarea,
.inline-actions input {
  width: 100%;
  min-width: 0;
}

.mini-form textarea {
  min-height: 4rem;
  resize: vertical;
}

.row-actions summary {
  display: inline-flex;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  border: 1px solid #d8d8d8;
  border-radius: 0.25rem;
}

.row-actions[open] summary {
  margin-bottom: 0.5rem;
}

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),
label.is-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),
html.dark-mode label.is-checked,
body.dark-mode label.is-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;
}

.check-list {
  display: grid;
  gap: 0.25rem;
  max-height: 12rem;
  overflow: auto;
  padding: 0.4rem;
  border: 1px solid #d8d8d8;
}

.check-list label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 400;
}

.check-list label:has(input:checked) {
  color: #fff;
  background: #111;
  border-color: #111;
  font-weight: 700;
}

html.dark-mode .check-list label:has(input:checked),
body.dark-mode .check-list label:has(input:checked) {
  color: #111;
  background: #f5f5f5;
  border-color: #f5f5f5;
}

.ad-frame,
.x-frame {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  color: #111;
  background: transparent;
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

.embed-ad,
.x-unit {
  position: relative;
  display: grid;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  max-width: var(--ad-w, var(--x-w, 100%));
  max-height: var(--ad-h, var(--x-h, 100vh));
  box-sizing: border-box;
  padding: 0.75rem;
  border: 1px solid #8c8484;
  background: #fff;
  overflow: hidden;
}

html.dark-mode .embed-ad,
html.dark-mode .x-unit,
body.dark-mode .embed-ad,
body.dark-mode .x-unit {
  color: #f1f1f1;
  background: #1b1b1b;
  border-color: #555;
}

.ad-click-surface,
.x-link {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.5rem;
  min-height: 0;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.ad-media-box,
.x-media {
  display: grid;
  min-height: 0;
  place-items: center;
  gap: 0.35rem;
  overflow: hidden;
}

.ad-text-fallback,
.x-copy {
  max-width: 100%;
  max-height: 4.5em;
  margin: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.embed-ad img,
.x-unit img,
.ad-media,
.x-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.embed-ad strong,
.x-unit strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-ad,
.x-compact {
  padding: 0.3rem;
}

.compact-ad .ad-click-surface,
.x-compact .x-link {
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}

.compact-ad strong,
.x-compact strong {
  display: none;
}

.compact-ad .ad-media-box,
.x-compact .x-media {
  justify-items: start;
}

.compact-ad .ad-text-fallback,
.x-compact .x-copy {
  display: none;
}

.responsive-ad,
.x-fluid {
  min-height: 180px;
}

.responsive-ad .ad-click-surface,
.x-fluid .x-link {
  grid-template-rows: auto minmax(0, 1fr);
}

.responsive-ad .ad-media-box,
.x-fluid .x-media {
  grid-template-rows: auto minmax(0, 1fr);
}

.billboard-embed,
.x-board {
  position: relative;
  display: grid;
  gap: 0;
  place-items: center;
  min-height: 240px;
  padding: 0.5rem;
}

.billboard-sign,
.x-board-face {
  display: grid;
  gap: 0.4rem;
  width: min(100%, 520px);
  min-height: 150px;
  padding: 1rem;
  text-align: center;
  color: #111;
  background: #f8f8f8;
  border: 6px solid #3a3a3a;
  box-shadow: 0 0.3rem 0 rgb(0 0 0 / 25%);
}

.billboard-click-surface,
.x-board-link {
  color: inherit;
  text-decoration: none;
}

.billboard-sign img,
.x-board-face img {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
  margin: 0 auto;
}

.billboard-posts,
.x-posts {
  width: 45%;
  height: 70px;
  border-left: 10px solid #3a3a3a;
  border-right: 10px solid #3a3a3a;
}

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

.billboard-status {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid #d8d8d8;
}

.billboard-preview-frame {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}

.host-pop {
  position: relative;
  display: inline-block;
}

.host-pop summary {
  display: inline-flex;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  border: 1px solid #d8d8d8;
}

.host-pop > div {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(90vw, 54rem);
  max-height: 24rem;
  overflow: auto;
  padding: var(--space-1);
  background: #fff;
  border: 1px solid #8c8484;
  box-shadow: 0 0.4rem 1rem rgb(0 0 0 / 15%);
}

html.dark-mode .host-pop > div,
body.dark-mode .host-pop > div {
  color: #f1f1f1;
  background: #1b1b1b;
  border-color: #555;
}

.info-pop,
.x-info {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
}

.info-pop summary,
.x-info summary {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  color: #111;
  background: #fff;
  border: 1px solid #8c8484;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
}

.info-pop summary::-webkit-details-marker,
.x-info summary::-webkit-details-marker {
  display: none;
}

.info-pop span,
.x-info span {
  position: absolute;
  top: 2rem;
  right: 0;
  width: 14rem;
  padding: 0.55rem;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 400;
  color: #111;
  background: #fff;
  border: 1px solid #8c8484;
}

html.dark-mode .info-pop summary,
html.dark-mode .x-info summary,
body.dark-mode .info-pop summary,
body.dark-mode .x-info summary,
html.dark-mode .info-pop span,
html.dark-mode .x-info span,
body.dark-mode .info-pop span,
body.dark-mode .x-info span {
  color: #f1f1f1;
  background: #151515;
  border-color: #555;
}

.info-pop:not([open]) span,
.x-info:not([open]) span {
  display: none;
}

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

.spot-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid #d8d8d8;
}

.spot-card h2,
.spot-card p {
  margin: 0;
}

.spot-preview {
  display: grid;
  place-items: center;
  width: min(100%, var(--spot-w, 300px));
  height: min(42vw, var(--spot-h, 250px));
  min-height: 50px;
  color: #444;
  background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 10px, #ececec 10px, #ececec 20px);
  border: 1px dashed #8c8484;
}

.custom-spot {
  --spot-w: 468px;
  --spot-h: 120px;
}

.responsive-spot {
  --spot-w: 100%;
  --spot-h: 220px;
}

.billboard-preview {
  --spot-w: 520px;
  --spot-h: 260px;
  border: 6px solid #3a3a3a;
  border-bottom-width: 16px;
}

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

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

.option {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 100%;
  padding: var(--space-3);
  border: 1px solid #d8d8d8;
  box-shadow: 0 0.2rem 0.75rem rgb(0 0 0 / 7%);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.option h2,
.option p {
  margin: 0;
}

.option .button {
  align-self: flex-start;
  margin-top: auto;
}

.option:hover {
  box-shadow: 0 0.45rem 1rem rgb(0 0 0 / 11%);
  transform: translateY(-2px);
}

html.dark-mode .option,
body.dark-mode .option {
  border-color: #383838;
  box-shadow: 0 0.15rem 0.5rem rgb(0 0 0 / 35%);
}

html.dark-mode .option:hover,
body.dark-mode .option:hover {
  box-shadow: 0 0.45rem 1rem rgb(0 0 0 / 45%);
}

.logo-button {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.logo-button:hover,
.logo-button:focus {
  background: transparent;
  box-shadow: none;
}

.logo-button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 8px;
  border-radius: 999px;
}

.homepagelogo {
  display: block;
  width: 200px;
  height: 200px;
  padding: 5px;
  color: #111;
  border: 3px dotted #111;
  border-radius: 999px;
  transform-origin: center;
  transition: border-color 200ms ease, filter 200ms ease;
}

html.dark-mode .homepagelogo,
body.dark-mode .homepagelogo {
  border-color: #111;
  border: 3px dotted #111;
  filter: invert(1);
}

html.dark-mode .site-brand img,
body.dark-mode .site-brand img {
  filter: invert(1);
}

.homepagelogo.is-spinning {
  animation: logo-spin-reflect 650ms ease-in-out;
}

@keyframes logo-spin-reflect {
  0% {
    transform: rotateZ(0deg) scaleX(1);
  }

  50% {
    transform: rotateZ(180deg) scaleX(-1);
  }

  100% {
    transform: rotateZ(360deg) scaleX(1);
  }
}

.site-footer {
  margin-top: var(--space-4);
  padding: var(--space-2);
  border-top: 1px solid #d8d8d8;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  width: min(1400px, 100%);
  margin: 0 auto;
}

.site-footer p {
  flex: 0 1 auto;
  margin: 0;
  white-space: nowrap;
}

.solar-status {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
  color: #555;
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgb(0 0 0 / 14%);
  border-radius: 200px;
  padding: 0.25rem 0.55rem 0.25rem 0.3rem;
}

.solar-status:hover,
.solar-status:focus {
  background: rgb(0 0 0 / 5%);
}

.solar-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  color: #777;
  font-size: 0.8rem;
  border: 1px solid rgb(0 0 0 / 18%);
  border-radius: 999px;
}

.solar-status.is-generating .solar-icon {
  color: #111;
  background: #f8e75c;
  border-color: #d8c633;
}

.solar-status.is-idle .solar-icon {
  color: #666;
  background: rgb(0 0 0 / 4%);
}

.solar-copy {
  display: inline-flex;
  gap: 0.3rem;
  min-width: 0;
}

.solar-countdown {
  color: #777;
}

html.dark-mode .solar-status,
body.dark-mode .solar-status,
html.dark-mode .solar-countdown,
body.dark-mode .solar-countdown {
  color: #c4c4c4;
}

html.dark-mode .solar-icon,
body.dark-mode .solar-icon {
  border-color: rgb(255 255 255 / 28%);
}

html.dark-mode .solar-status,
body.dark-mode .solar-status {
  border-color: rgb(255 255 255 / 18%);
}

html.dark-mode .solar-status:hover,
html.dark-mode .solar-status:focus,
body.dark-mode .solar-status:hover,
body.dark-mode .solar-status:focus {
  background: rgb(255 255 255 / 8%);
}

html.dark-mode .solar-status.is-generating .solar-icon,
body.dark-mode .solar-status.is-generating .solar-icon {
  color: #111;
  background: #f8e75c;
  border-color: #f8e75c;
}

html.dark-mode .solar-status.is-idle .solar-icon,
body.dark-mode .solar-status.is-idle .solar-icon {
  color: #ddd;
  background: rgb(255 255 255 / 8%);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .homepagelogo.is-spinning {
    animation-duration: 250ms;
  }
}

@media (max-width: 700px) {
  .home-hero {
    padding: var(--space-4) var(--space-2);
  }

  .site-header-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-brand-row {
    width: 100%;
  }

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

  main {
    padding: var(--space-3) var(--space-2);
  }

  .options {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .spot-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .billboard-status-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid,
  .stats {
    grid-template-columns: 1fr;
  }

  .dashboard-tabs {
    align-items: stretch;
    flex-direction: column;
  }

  .option {
    padding: var(--space-2);
  }

  .thumb-frame {
    width: min(100%, 14rem);
    min-width: 0;
  }

  .site-footer {
    padding: var(--space-1) var(--space-2);
  }

  .footer-inner {
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
  }

  .site-footer p {
    font-size: 0.82rem;
  }

  .solar-status {
    justify-content: center;
    width: 100%;
    font-size: 0.86rem;
    text-align: center;
  }

  .solar-copy {
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .solar-icon {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.72rem;
  }
}