/* faviconthing.com: one letter, one colour, every size. The kit (kit.css)
   is the look; this is the orange accent, and what only this page has: the
   rows of favicon previews, the generator site's ad, the tab strip where the
   attempts end up, and the blur a downscaled PNG gets. */

:root {
  --bg: #0c0b0a;
  --surface: #161412;
  --surface-up: #1d1b18;
  --ink: #f5f3f0;
  --muted: #aba59d;
  --dim: #8b857d;
  --accent: #f08a24;
  --accent-bright: #ffa64d;
  --accent-deep: #c86a0f;
  --accent-ink: #1c0f03;
  --me: "~/site ";
}

.specimen-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s4);
}

.specimen-row .fav {
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.55));
}

/* a row of previews: a mark at the sizes it will be seen at */
.l.shown {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s5);
  padding: var(--s3) 0;
  white-space: normal;
}

.at {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.6rem;
  font: 0.75rem/1.2 var(--mono);
  color: var(--dim);
}

.window.chat .l.shown {
  padding-left: 2.25rem;
}

.set-grid {
  gap: var(--s4) var(--s3);
}

.set-grid .at {
  flex-direction: column;
  align-items: center;
  width: 6.25rem;
  gap: 0.45rem;
  font-size: 0.6875rem;
}

.window.chat .l.note {
  min-height: 0;
  margin-left: 2.25rem;
  font: 0.8125rem/1.5 var(--mono);
  color: var(--warn);
}

.window.chat .l.note::before {
  content: "⚠ ";
}

.blurry {
  filter: blur(0.8px) saturate(0.5);
}

.ui-panel.ad {
  background: repeating-linear-gradient(-45deg, #fff8dc 0 10px, #fff1bf 10px 20px);
  border-color: #efd88f;
}

.ad small {
  font: 600 0.6875rem var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a7a3a;
}

.tabstrip {
  display: flex;
  min-width: 0;
  gap: 2px;
  padding: 0.5rem 0.5rem 0;
  border-radius: 8px;
  background: #d9dde4;
}

.window.browser .l.tabx {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  border-radius: 8px 8px 0 0;
  background: #eceff3;
  font: 0.8125rem var(--sans);
}

.window.browser .l.tabx:first-child {
  background: #fff;
}

.tabx span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabx svg {
  flex: none;
}

@media (max-width: 47.99rem) {
  .window.chat .l.shown,
  .window.chat .l.note {
    padding-left: 0;
    margin-left: 0;
  }

  .set-grid .at {
    width: 5rem;
  }
}