/* DropCat public catalog: light gray interface outlines with Candy pop product cards.
   Cover colors tint each card; yellow marks choices. */
:root {
  --smart-category-border: color-mix(in srgb, currentColor 15%, transparent);
  --ink: #000;
  --outline: #888;
  --shadow-color: #c2c2c2;
  --solid: #000;
  --paper: #fff;
  --ground: #f1f1f1;
  --wash: #f6f6f6;
  --tone: #cfcfcf;
  --muted: #555;
  --quiet: #777;
  --rule: #d9d9d9;
  --scroll-track: #fff;
  --scroll-thumb: #222;
  --honey: #ffd05c;
  --honey-soft: #fff1b8;
  --sakura: #ee62a1;
  --sakura-soft: #ffe1ec;
  --alarm: #c4161c;
  --alarm-soft: #ffe5e3;
  --focus: #2459ff;
  /* Text on the yellow choice surface stays black in both themes. */
  --on-honey: #000;
  --thumb: #fff;
  --thumb-hover: #e8e8e8;
  --thumb-inset: #ccc;
  --alarm-ink: #6e0b0f;
  --body-ink: #1d1d22;
  --rise: #c2005a;
  --added: #dff5df;
  --added-ink: #0b4d13;
  --removed: #ffe1df;
  --removed-ink: #7a0d0d;
  --disabled-ink: #b5b6bd;
  --preview-range: #fff8dc;
  --backdrop: #16161ecc;
  --backdrop-soft: #16161e59;
  --backdrop-mid: #16161e8c;
  --void: #00000008;
  --void-line: #0000001f;
  --card-ink: #000;
  --card-outline: #aaa;
  --card-shadow: #e0e0e0;
  --b: 2px;
  --shadow: 4px 4px 0 var(--shadow-color);
  --shadow-sm: 2px 2px 0 var(--shadow-color);
  --radius: 12px;
  --header: 72px;
  font-family:
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Segoe UI",
    "Yu Gothic UI",
    Meiryo,
    "Noto Sans JP",
    system-ui,
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  color-scheme: light;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}
/* Dark theme: neutral grays, the same yellow for choices and Candy pop card tints. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ink: #f1f1f1;
    --outline: #6c6c6c;
    --shadow-color: #050505;
    --solid: #f1f1f1;
    --paper: #1d1d1d;
    --ground: #131313;
    --wash: #272727;
    --tone: #343434;
    --muted: #b4b4b4;
    --quiet: #8e8e8e;
    --rule: #353535;
    --scroll-track: #1d1d1d;
    --scroll-thumb: #ddd;
    --honey-soft: #4a3c10;
    --sakura: #ff7db5;
    --sakura-soft: #4b2335;
    --alarm: #ff6464;
    --alarm-soft: #3f1a1a;
    --focus: #7f9dff;
    --thumb: #3a3a3a;
    --thumb-hover: #4a4a4a;
    --thumb-inset: #262626;
    --alarm-ink: #ffc9c9;
    --body-ink: #e6e6e6;
    --rise: #ff6fae;
    --added: #163a1c;
    --added-ink: #b8f0bf;
    --removed: #45191a;
    --removed-ink: #ffc4c0;
    --disabled-ink: #5b5b5b;
    --preview-range: #3a3214;
    --backdrop: #000000cc;
    --backdrop-soft: #00000080;
    --backdrop-mid: #000000a6;
    --void: #ffffff08;
    --void-line: #ffffff1f;
    --card-ink: #f1f1f1;
    --card-outline: #6c6c6c;
    --card-shadow: #050505;
    color-scheme: dark;
  }
}
:root:is([data-theme="dark"],[data-theme="midnight"],[data-theme="grape"]) {
  --ink: #f1f1f1;
  --outline: #6c6c6c;
  --shadow-color: #050505;
  --solid: #f1f1f1;
  --paper: #1d1d1d;
  --ground: #131313;
  --wash: #272727;
  --tone: #343434;
  --muted: #b4b4b4;
  --quiet: #8e8e8e;
  --rule: #353535;
  --scroll-track: #1d1d1d;
  --scroll-thumb: #ddd;
  --honey-soft: #4a3c10;
  --sakura: #ff7db5;
  --sakura-soft: #4b2335;
  --alarm: #ff6464;
  --alarm-soft: #3f1a1a;
  --focus: #7f9dff;
  --thumb: #3a3a3a;
  --thumb-hover: #4a4a4a;
  --thumb-inset: #262626;
  --alarm-ink: #ffc9c9;
  --body-ink: #e6e6e6;
  --rise: #ff6fae;
  --added: #163a1c;
  --added-ink: #b8f0bf;
  --removed: #45191a;
  --removed-ink: #ffc4c0;
  --disabled-ink: #5b5b5b;
  --preview-range: #3a3214;
  --backdrop: #000000cc;
  --backdrop-soft: #00000080;
  --backdrop-mid: #000000a6;
  --void: #ffffff08;
  --void-line: #ffffff1f;
  --card-ink: #f1f1f1;
  --card-outline: #6c6c6c;
  --card-shadow: #050505;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
/* Scrollbars share the interface's ink outlines, paper dots and pressed yellow state. */
@supports selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  margin: 6px;
  background:
    radial-gradient(var(--tone) 1px, transparent 1.3px) 0 0 / 7px 7px,
    var(--scroll-track);
  border: 1px solid var(--outline);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  min-width: 36px;
  min-height: 36px;
  background: var(--thumb);
  border: 2px solid var(--outline);
  border-radius: 999px;
  box-shadow: inset -2px -2px 0 var(--thumb-inset);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--thumb-hover);
}
::-webkit-scrollbar-thumb:active {
  background: var(--honey);
  color: var(--on-honey);
  box-shadow: none;
}
::-webkit-scrollbar-corner {
  background: var(--scroll-track);
  border: 1px solid var(--outline);
}
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
/* The viewport gutter follows the header surface; only the track is inset. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 24px;
  background: linear-gradient(
    to bottom,
    var(--paper) 0 var(--page-header-line, 69px),
    var(--outline) var(--page-header-line, 69px) var(--page-header-bottom, 72px),
    var(--ground) var(--page-header-bottom, 72px) 100%
  );
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  margin: calc(var(--page-header-bottom, var(--header)) + 12px) 0 6px;
  border: 6px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--outline);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  border: 6px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 2px var(--outline);
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
  background-clip: padding-box;
  box-shadow: inset 0 0 0 2px var(--outline);
}
html {
  background: var(--paper);
  scroll-padding-top: calc(var(--header) + 16px);
  /* The virtual grid replaces its cards on every render, so native anchoring would pin the
     load sentinel and follow the growing spacer, loading pages without end. */
  overflow-anchor: none;
}
body {
  margin: 0;
  background: var(--ground);
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: var(--b) solid var(--outline);
  background: var(--paper);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 700;
  line-height: 1.25;
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
a {
  color: inherit;
}
input,
select {
  width: 100%;
  min-width: 0;
  background: var(--paper);
  border: var(--b) solid var(--outline);
  border-radius: 8px;
  padding: 9px 12px;
}
input::placeholder {
  color: var(--quiet);
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 60;
  background: var(--paper);
  border: var(--b) solid var(--outline);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 800;
}
.skip:focus {
  top: 12px;
}

/* Pressable things: a hard shadow that the press removes, shifting by the same offset. */
.kind-tabs,
.sort-pills button,
.filters-toggle,
.saved-open,
.avatar-chip .face,
.public-card,
.timeline,
.filter-panel,
.vision-panel,
.avatar-banner,
.empty,
.load-area button,
.search-bar {
  box-shadow: var(--shadow);
}
.sort-pills button,
.filters-toggle,
.saved-open,
.segmented,
.period-options button,
.popular-tags button,
.active-filters button,
.timeline-windows button,
.timeline-tools button,
.load-area button,
.panel-close,
.booth-link,
.fit-all,
.fit-entry,
.desc-index button,
.desc-more,
.gallery-nav button,
.saved-toolbar button,
.rp-apply,
.rp-preset,
#vision-submit,
#vision-recheck,
.vision-donate,
.product-retry,
.feed-error button,
.empty button,
.translate-button,
.translate-link {
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
  .sort-pills button:not([aria-pressed="true"]):hover,
  .filters-toggle:hover,
  .saved-open:hover,
  .popular-tags button:hover,
  .period-options button:not([aria-pressed="true"]):hover,
  .timeline-windows button:not([aria-pressed="true"]):hover,
  .load-area button:hover {
    background: var(--wash);
  }
}
.sort-pills button:active,
.filters-toggle:active,
.saved-open:active,
.period-options button:active,
.popular-tags button:active,
.active-filters button:active,
.timeline-windows button:active,
.timeline-tools button:active,
.load-area button:active,
.panel-close:active,
.booth-link:active,
.fit-all:active,
.desc-index button:active,
.gallery-nav button:active,
.saved-toolbar button:active,
.rp-apply:active,
#vision-submit:not(:disabled):active,
#vision-recheck:active,
.vision-donate:active,
.empty button:active,
.feed-error button:active,
.translate-button:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}
/* Chosen = yellow, pressed in. */
.kind-tabs [aria-pressed="true"],
.sort-pills [aria-pressed="true"],
.segmented [aria-pressed="true"],
.period-options [aria-pressed="true"],
.timeline-windows [aria-pressed="true"] {
  background: var(--honey);
  color: var(--on-honey);
}
.sort-pills [aria-pressed="true"],
.period-options [aria-pressed="true"],
.timeline-windows [aria-pressed="true"] {
  box-shadow: none;
  transform: translate(2px, 2px);
}

/* Header: logo, one search (with image search), saved, language. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header);
  padding: 12px max(32px, calc((100vw - 1600px) / 2 + 32px));
  background: var(--paper);
  border-bottom: 3px solid var(--outline);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  text-decoration: none;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
/* Only the cat from the favicon: the yellow tile stays in the browser tab. */
.brand-icon {
  width: 49px;
  height: 42px;
  flex: none;
}
.search-bar {
  flex: 1;
  max-width: 760px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto 0 12px;
  padding: 4px 4px 4px 14px;
  background: var(--paper);
  border: var(--b) solid var(--outline);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.search-bar:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.search-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.search-bar input {
  flex: 1;
  border: 0;
  background: none;
  padding: 8px 6px;
  font-size: 15px;
}
.search-bar input:focus-visible {
  outline: none;
}
.vision-launch {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border-color: transparent;
  background: none;
  flex: none;
}
.vision-launch svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.vision-launch:hover,
.vision-launch[aria-expanded="true"] {
  border-color: var(--outline);
  background: var(--wash);
}
.search-submit {
  flex: none;
  border-radius: 999px;
  background: var(--solid);
  color: var(--paper);
  padding: 9px 20px;
}
.saved-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 999px;
  flex: none;
}
/* Ko-fi's own coral, so support reads as Ko-fi and not as a DropCat control. */
.kofi-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px 14px 7px 11px;
  border: var(--b) solid #c93b39;
  border-radius: 999px;
  background: #ff5e5b;
  color: #fff;
  box-shadow: 2px 2px 0 #c93b39;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.kofi-link svg,
.vision-donate svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .kofi-link:hover {
    background: #ff716e;
  }
}
.kofi-link:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}
.kofi-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.saved-open svg,
.save-product svg {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linejoin: round;
}
#saved-count {
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--solid);
  color: var(--paper);
  font-size: 12px;
  text-align: center;
}
.language {
  position: relative;
  flex: none;
}
.lang-short {
  display: none;
}
.language summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border: var(--b) solid var(--outline);
  border-radius: 999px;
  background: var(--paper);
  font-size: 13px;
  font-weight: 700;
}
.language summary::-webkit-details-marker { display: none; }
.language summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px; margin-bottom: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.language-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(280px, calc(100vw - 32px));
  display: grid;
  gap: 16px;
  padding: 16px;
  background: var(--paper);
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.language-panel > label { display: grid; gap: 8px; }
.language-panel > .check { display: flex; align-items: flex-start; }
.language-panel .check input { flex: none; }


main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Avatar rail: the main way in. Pictures first, because people know avatars by sight. */
.avatar-rail {
  margin: 22px 0 0;
  padding: 16px 0 6px;
  overflow: hidden;
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
  background:
    radial-gradient(var(--tone) 1.1px, transparent 1.5px) 0 0 / 7px 7px,
    var(--paper);
}
.rail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  padding-inline: 18px;
}
.rail-head h2 {
  margin: 0;
  padding: 3px 12px;
  background: var(--solid);
  color: var(--paper);
  font-size: 17px;
  font-weight: 900;
  border-radius: 6px;
  transform: rotate(-1.5deg);
}
.rail-find {
  width: min(280px, 100%);
}
.rail-find input {
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
}
/* Suggestion lists of the avatar and tag fields (combo.ts), in the top layer. */
.combo-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.combo-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.combo-option + .combo-option {
  margin-top: 2px;
}
.combo-option:has(.face) {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}
.combo-option:not(:has(.face)) {
  padding-left: 10px;
}
.combo-option .face {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: none;
}
.combo-name {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}
.combo-name strong,
.combo-name small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.combo-name strong {
  font-size: 14px;
  font-weight: 800;
}
.combo-name small {
  font-size: 12px;
  color: var(--muted);
}
.combo-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .combo-option:hover {
    background: var(--wash);
  }
}
.combo-option[aria-selected="true"] {
  background: var(--wash);
  outline: var(--b) solid var(--outline);
  outline-offset: -2px;
}
.combo-option.chosen {
  background: var(--honey);
  color: var(--on-honey);
}
.rail-scroll {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.rail-scroll button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
/* Nudged toward where each arrow points, so it reads as optically centred. */
#rail-left svg {
  transform: translateX(-1.5px);
}
#rail-right svg {
  transform: translateX(1.5px);
}
.rail-scroll svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.avatar-chips {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 20px 10px;
  scroll-padding-inline: 20px;
}
/* Snapping helps finger swipes; with a mouse the rail is dragged by hand (dragScroll.ts) and a
   snap after release would jerk it to the nearest avatar. */
@media (pointer: coarse) {
  .avatar-chips {
    scroll-snap-type: x proximity;
  }
}
/* The grabbed avatar stays pressed while the rail is dragged; the others passing under the
   pointer stay at rest (no hover lift). The chosen avatar keeps its pressed look. */
.drag-scrolling .avatar-chip:not(:active):not([aria-pressed="true"]) .face {
  transform: none !important;
  box-shadow: var(--shadow) !important;
}
.avatar-chips::-webkit-scrollbar-track {
  margin-inline: 18px;
}
.filter-panel::-webkit-scrollbar-track {
  margin-block: 14px;
  border-radius: 999px;
}
.filter-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
}
.avatar-chip {
  flex: none;
  width: 92px;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  scroll-snap-align: start;
}
.avatar-chip .face {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  margin-bottom: 4px;
}
.rail-skeleton .face {
  border-color: var(--rule);
  background: linear-gradient(110deg, var(--wash) 20%, var(--paper) 40%, var(--wash) 60%);
  background-size: 300% 100%;
  animation: shimmer 1.6s infinite;
}
/* Same line height as the real chip buttons, so the rail does not move when they arrive. */
.rail-skeleton {
  line-height: 1.25;
}
.rail-skeleton .avatar-name {
  width: 64px;
  background: var(--wash);
}
.rail-skeleton small {
  width: 28px;
  border-radius: 4px;
  background: var(--wash);
}
.avatar-chip .face.blank {
  font-size: 30px;
}
.avatar-name {
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-chip small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
@media (hover: hover) {
  .avatar-chip:hover .face {
    transform: translate(-1px, -2px);
    box-shadow: 5px 6px 0 var(--shadow-color);
  }
}
.avatar-chip:active .face,
.avatar-chip[aria-pressed="true"] .face {
  transform: translate(4px, 4px);
  box-shadow: none;
}
.avatar-chip[aria-pressed="true"] .face {
  outline: 4px solid var(--honey);
  outline-offset: -1px;
}
.avatar-chip[aria-pressed="true"] .avatar-name {
  background: var(--honey);
  color: var(--on-honey);
}
.avatar-chip:focus-visible {
  outline: none;
}
.avatar-chip:focus-visible .face {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* An avatar picture anywhere: the cover of its own product, cropped toward the face. */
.face {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: var(--b) solid var(--outline);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--wash);
  color: var(--muted);
  font-weight: 900;
  transition: transform 0.12s, box-shadow 0.12s;
}

/* A persistent filter sidebar beside the catalog; narrow screens use a left drawer. */
.catalog {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-top: 22px;
  scroll-margin-top: calc(var(--header) + 12px);
}
.catalog-content {
  min-width: 0;
}
.filter-sidebar {
  position: sticky;
  top: calc(var(--header) + 16px);
  min-width: 0;
  z-index: 30;
  background: var(--paper);
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0 0 14px;
}
.kind-tabs {
  display: flex;
  border: var(--b) solid var(--outline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}
.kind-tabs button {
  border: 0;
  border-radius: 0;
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 800;
  background: none;
}
.kind-tabs button + button {
  border-left: var(--b) solid var(--outline);
}
.kind-tabs [aria-pressed="true"] {
  background: var(--honey);
  color: var(--on-honey);
}
.sort-pills {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.sort-pills button {
  white-space: nowrap;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
}
.filters-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 14px;
}
.filters-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.filters-toggle[aria-expanded="true"] {
  background: var(--wash);
}
.filter-count {
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--honey);
  color: var(--on-honey);
  border: var(--b) solid var(--outline);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.filter-panel {
  /* The extra width places the native gutter outside the sidebar's outlined frame. */
  width: calc(100% + 20px);
  max-height: calc(100dvh - var(--header) - 36px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: grid;
  gap: 18px;
  padding: 16px;
  padding-right: 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}
.panel-close {
  display: none;
  border-radius: 999px;
  padding: 6px 14px;
}
.field {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field legend,
.field-label {
  padding: 0;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
}
.field-label {
  margin-bottom: 0;
}
.segmented {
  display: inline-flex;
  justify-self: start;
  border: var(--b) solid var(--outline);
  border-radius: 999px;
  overflow: hidden;
}
.segmented button {
  border: 0;
  border-radius: 0;
  padding: 6px 16px;
  background: var(--paper);
}
.segmented button + button {
  border-left: var(--b) solid var(--outline);
}
.price-options {
  justify-self: stretch;
  width: 100%;
}
.price-options button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 5px;
  font-size: 13px;
}
.period {
  position: relative;
}
.period-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.period-options button,
.popular-tags button,
.timeline-windows button {
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
}
.period-options button:disabled {
  box-shadow: none;
}
.likes-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.likes-inputs label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.popular-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.popular-tags button {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  max-width: 100%;
}
.popular-tags button span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.popular-tags small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.checks {
  gap: 10px;
}
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
/* Checkboxes drawn like the other controls: outlined square, yellow and pressed when on. */
.check input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  padding: 0;
  border: var(--b) solid var(--outline);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.check input:checked {
  background: var(--honey) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  color: var(--on-honey);
  box-shadow: none;
  transform: translate(2px, 2px);
}
.check input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* Number fields without browser spinners; search fields without the native clear button. */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="search"] {
  appearance: none;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
.date-options {
  display: flex;
  justify-self: stretch;
}
.date-options button {
  flex: 1;
  padding: 6px 10px;
  font-size: 13px;
}
.language-field {
  display: grid;
  gap: 8px;
}
.language-options {
  display: grid;
  gap: 6px;
}
.language-options button {
  text-align: left;
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
  .language-options button:not([aria-pressed="true"]):hover {
    background: var(--wash);
  }
}
.language-options [aria-pressed="true"] {
  background: var(--honey);
  color: var(--on-honey);
  box-shadow: none;
  transform: translate(2px, 2px);
}
body.sheet-open {
  overflow: hidden;
}
@media (min-width: 1001px) {
  body.sheet-open {
    overflow: visible;
  }
}

/* Rising: the timeline appears under the toolbar. */
.timeline {
  margin: 0 0 16px;
  padding: 12px 16px 10px;
  background: var(--paper);
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
}
.timeline-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "windows label tools";
  align-items: center;
  gap: 10px;
}
.timeline-label {
  grid-area: label;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.timeline-tools {
  grid-area: tools;
  justify-self: end;
}
.timeline-windows {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  grid-area: windows;
  overflow-x: auto;
  padding: 2px 4px 4px 2px;
  scrollbar-width: none;
}
.timeline-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timeline-tools button {
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
}
#timeline-zoom-in,
#timeline-zoom-out {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
}
#timeline-zoom-in svg,
#timeline-zoom-out svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}
/* The chosen moment is the right edge of the full-height look-back band, fixed at the
   track's middle. A visually hidden range input keeps keyboard semantics. */
.timeline-track {
  position: relative;
  height: 64px;
  margin: 10px 0 2px;
  overflow: hidden;
  border: var(--b) solid var(--outline);
  border-radius: 10px;
  background: radial-gradient(var(--rule) 1px, transparent 1.4px) 0 0 / 7px 7px, var(--wash);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.timeline-track.grabbing {
  cursor: grabbing;
}
.timeline-track:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* The catalog-wide hype curve rests on the ruler line (app.ts drawHype). */
.timeline-hype {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 26px;
  overflow: visible;
  pointer-events: none;
}
.timeline-hype path {
  fill: color-mix(in srgb, var(--solid) 14%, transparent);
  stroke: color-mix(in srgb, var(--solid) 45%, transparent);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.timeline-ruler {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.timeline-ruler::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
  height: 2px;
  background: var(--solid);
}
.timeline-ruler .tick {
  position: absolute;
  top: 24px;
  width: 0;
  height: 6px;
  border-left: 1px solid var(--quiet);
}
.timeline-ruler .tick.day {
  height: 11px;
  border-left: 2px solid var(--outline);
}
.timeline-ruler .tick.major {
  height: 26px;
  display: flex;
  align-items: flex-end;
  padding-left: 5px;
  border-left: 2px solid var(--outline);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.timeline-boundary {
  position: absolute;
  top: 5px;
  width: 40px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
#timeline-start-time {
  text-align: right;
}
.timeline-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--honey) 55%, transparent);
  border-inline: var(--b) solid var(--outline);
  pointer-events: none;
}
/* Times without retained observations (before history, after now) cannot be chosen. */
.timeline-void {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--void-line) 6px 8px), var(--void);
}
.timeline-void span {
  display: none;
  position: absolute;
  top: 3px;
  right: 9px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.timeline-void.labelled span {
  display: block;
}
#timeline-slider {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Result line: count, active filter chips, status. */
.results-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 4px 0 16px;
}
.results-heading h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.active-filters:empty {
  display: none;
}
.active-filters button {
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12.5px;
  background: var(--paper);
}
.active-filters .clear-all {
  border-style: dashed;
  box-shadow: none;
}
.connection {
  margin: 0 0 0 auto;
  font-size: 12px;
  color: var(--muted);
}
.connection:empty {
  display: none;
}

/* The chosen avatar: picture, name, its own products. */
/* One row: picture, name, the avatar's own products (scrollable), clear. */
.avatar-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--paper);
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
}
.banner-top {
  display: contents;
}
.banner-top .face {
  order: 0;
}
.banner-copy {
  order: 1;
  flex: 0 1 auto;
  max-width: 240px;
}
.avatar-products {
  order: 2;
  flex: 1 1 0;
  min-width: 0;
}
.banner-clear {
  order: 3;
}
.banner-top .face {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  outline: 4px solid var(--honey);
  outline-offset: -1px;
}
.banner-copy {
  display: grid;
  min-width: 0;
}
.banner-copy strong {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}
.banner-copy span {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.banner-clear {
  display: grid;
  place-items: center;
  flex: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.banner-clear svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.avatar-products {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 4px 6px 2px;
}
.avatar-products:empty {
  display: none;
}
/* Placeholders while the avatar's own products load (app.ts banner). */
.avatar-product.banner-skeleton {
  box-shadow: none;
  border-color: var(--rule);
}
.banner-skeleton .avatar-product-cover,
.banner-skeleton-lines,
.banner-copy .avatar-products-label.banner-skeleton {
  background: linear-gradient(110deg, var(--wash) 20%, var(--paper) 40%, var(--wash) 60%);
  background-size: 300% 100%;
  animation: shimmer 1.6s infinite;
}
.banner-skeleton .avatar-product-cover {
  display: block;
  border-color: var(--rule);
}
.banner-skeleton-lines {
  align-self: start;
  height: 34px;
  margin-top: 4px;
  border-radius: 6px;
}
.banner-copy .avatar-products-label.banner-skeleton {
  width: 110px;
}
/* "The avatar itself", under the name: introduces the products beside it. */
.banner-copy .avatar-products-label {
  justify-self: start;
  margin-top: 4px;
  padding: 2px 8px;
  background: var(--solid);
  color: var(--paper);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}
.avatar-product {
  flex: 0 0 260px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  border: var(--b) solid var(--outline);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.avatar-product-cover {
  width: 72px;
  height: 72px;
  padding: 0;
  border: var(--b) solid var(--outline);
  border-radius: 8px;
  overflow: hidden;
  background: var(--wash);
}
.avatar-product-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-product-info {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
}
.avatar-product-title {
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.avatar-product-title:hover {
  text-decoration: underline;
}
.avatar-product-creator {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-product-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
}

/* Catalog grid. Card height = square picture + --card-info (app.ts dimensions() reads it). */
.results {
  min-width: 0;
}
.catalog-grid {
  --columns: 4;
  --card-info: 126px;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: 20px;
}
.public-card {
  --ink: var(--card-ink);
  --outline: var(--card-outline);
  --shadow-color: var(--card-shadow);
  --solid: var(--card-ink);
  --shadow: 4px 4px 0 var(--shadow-color);
  --shadow-sm: 2px 2px 0 var(--shadow-color);
  position: relative;
  min-width: 0;
  border: var(--b) solid var(--outline);
  border-radius: 0;
  background: var(--paper);
  overflow: hidden;
}
/* Cover-colored cards (app.ts applyCardTint): pastel in light, deeper in dark. */
.public-card.tinted {
  --outline: hsl(var(--tint-h) var(--tint-s) var(--tint-l, 72%));
  --shadow-color: hsl(var(--tint-h) var(--tint-s2) var(--tint-l2, 88%));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .public-card.tinted {
    --tint-l: 58%;
    --tint-l2: 26%;
  }
}
:root:is([data-theme="dark"],[data-theme="midnight"],[data-theme="grape"]) .public-card.tinted {
  --tint-l: 58%;
  --tint-l2: 26%;
}
.card-media {
  position: relative;
  aspect-ratio: 1;
  background: var(--wash);
}
.card-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  touch-action: pan-y;
  background: none;
  overflow: hidden;
}
.card-cover img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}
/* The stored (or BOOTH 72px) preview, shown until the sharp image arrives. */
.card-cover .card-low:not([src]) {
  display: none;
}
.card-cover img.pending {
  opacity: 0;
}
/* Labels and actions live below the picture. */
.card-price,
.kind-label {
  position: absolute;
  padding: 2px 8px;
  border: var(--b) solid var(--outline);
  border-radius: 6px;
  background: var(--paper);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}
.card-price {
  position: static;
  min-width: 0;
  max-width: calc(100% - 140px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-booth {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  margin: 0 auto 0 -2px;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.card-booth svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .card-booth:hover {
    color: var(--ink);
    background: var(--wash);
  }
}
.card-booth:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}
.card-price.free {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--paper), 4px 4px 0 var(--shadow-color);
}
.kind-label {
  position: static;
  display: inline-block;
  justify-self: start;
  font-size: 12px;
  box-shadow: none;
}
.kind-label:empty {
  display: none;
}
.card-kind {
  flex: none;
  padding: 1px 5px;
  font-size: 10px;
  background: var(--paper);
}
/* Where the hovered image sits in the gallery: the cover scrubs with the mouse. */
.card-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--rule);
  pointer-events: none;
}
.card-track span {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 6px;
  background: var(--solid);
}
.save-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 40px;
  min-height: 40px;
  padding: 8px;
}
.save-product[aria-pressed="true"] path {
  fill: currentColor;
}
.save-cover {
  flex: none;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.save-cover svg {
  width: 17px;
  height: 17px;
}
.save-cover[aria-pressed="true"] {
  background: var(--solid);
  color: var(--paper);
}
/* With a mouse the save button appears on the hovered or focused card; a saved product keeps
   it visible, and touch screens always show it. */
@media (hover: hover) {
  .public-card .save-cover:not([aria-pressed="true"]) {
    opacity: 0;
    transition: opacity 0.12s;
  }
  .public-card:hover .save-cover,
  .public-card:focus-within .save-cover {
    opacity: 1;
  }
}
.card-info {
  position: relative;
  background: var(--paper);
  height: var(--card-info);
  border-top: var(--b) solid var(--outline);
  padding: 9px 11px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.card-heading,
.card-image-tools,
.card-badges,
.card-shop {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-shrink: 0;
}
.card-heading .card-title { flex: 1; min-width: 0; }
.card-image-tools { flex: none; gap: 4px; }
.card-badges {
  min-height: 30px;
  margin-top: auto;
}
.card-shop { min-height: 24px; }
.card-shop .card-creator { text-align: left; align-self: center; min-width: 0; }
.card-badges .card-foot { margin-top: 0; margin-left: auto; height: 30px; gap: 4px; }
.card-shop .card-fits { max-width: 58%; }
.card-ft {
  flex: none;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 20px;
  font-weight: 900;
  background: var(--honey);
  color: var(--on-honey);
}
.card-ft-options {
  width: min(340px, calc(100vw - 32px));
  max-height: min(480px, calc(100dvh - 48px));
  overflow: auto;
  padding: 18px;
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.card-ft-options:popover-open { display: grid; gap: 10px; }
.card-ft-options::backdrop { background: var(--backdrop-soft); }
.card-ft-options button { text-align: left; }


.card-shop .card-creator {
  flex: 1;
}
.card-title {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.33;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
  max-height: 36px;
}
.card-creator {
  align-self: flex-start;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) {
  .card-title:hover,
  .card-creator:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
}
.card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  margin-top: auto;
  min-width: 0;
}
.card-likes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  font-size: 13px;
  font-weight: 800;
}
.heart {
  color: var(--sakura);
  font-size: 15px;
  line-height: 1;
}
.card-gain {
  flex: none;
  padding: 0 6px;
  border: var(--b) solid var(--outline);
  border-radius: 6px;
  background: var(--sakura);
  color: var(--paper);
  font-size: 12px;
  font-weight: 900;
  line-height: 18px;
}
.card-fits {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin-left: auto;
  min-width: 0;
}
.card-fits button {
  border: 0;
  padding: 0;
  background: none;
  border-radius: 999px;
}
.fit-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 0 8px 0 0 !important;
  font-size: 12px;
  font-weight: 800;
}
.card-fits .fit-chip {
  border: var(--b) solid var(--outline) !important;
  background: var(--paper) !important;
}
.card-fits .fit-chip .face {
  margin: -2px 0 -2px -2px;
}
.fit-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fit-face {
  flex: none;
  margin-left: -6px;
}
.fit-face .face,
.card-fits .fit-chip .face {
  width: 26px;
  height: 26px;
}
.card-fits .fit-chip + .fit-face {
  margin-left: 4px;
}
.fit-more {
  flex: none;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
@media (hover: hover) {
  .card-fits .fit-chip:hover,
  .fit-face:hover .face {
    background: var(--honey) !important;
    color: var(--on-honey) !important;
  }
  .fit-more:hover {
    color: var(--ink);
    text-decoration: underline;
  }
}
.fit-link {
  padding: 2px 9px !important;
  border: var(--b) solid var(--outline) !important;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
@media (hover: hover) {
  .fit-link:hover {
    background: var(--honey) !important;
    color: var(--on-honey) !important;
  }
}
/* Newest: products grouped by local publication day under caption boxes (40px tall, see app.ts). */
.day-heading {
  grid-column: 1 / -1;
  height: 40px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 900;
}
.day-heading::before {
  content: "";
  order: 1;
  flex: 1;
  height: 2px;
  background: var(--solid);
}
.day-heading {
  padding: 0;
}
/* A day sharing a row with other small days: its heading spans only its own cards. */
.day-heading-inline {
  grid-column: auto;
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
}
.day-heading-rest {
  height: 40px;
}
.timeline-results .card-info {
  height: var(--card-info);
}
/* While a re-rank is computing, the previous order stays visible but subdued. */
#feed.reranking .public-card {
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.skeleton {
  box-shadow: none;
  border-color: var(--rule);
}
.skeleton .card-info {
  border-color: var(--rule);
}
.skeleton .card-media {
  background: linear-gradient(110deg, var(--wash) 20%, var(--paper) 40%, var(--wash) 60%);
  background-size: 300% 100%;
  animation: shimmer 1.6s infinite;
}
.skeleton .card-info {
  height: var(--card-info);
}
.skeleton .card-title {
  width: 80%;
  background: var(--wash);
  border-radius: 4px;
}
@keyframes shimmer {
  to {
    background-position: -300% 0;
  }
}
/* Newest after the end of Hot: its own block below the Hot list. */
.after-hot {
  display: grid;
  gap: 16px;
  margin: 8px 0 40px;
  padding-top: 24px;
  border-top: var(--b) solid var(--solid);
}
.after-hot[hidden] {
  display: none;
}
.after-hot h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}
#after-hot-all {
  justify-self: center;
  border-radius: 999px;
  padding: 9px 22px;
  box-shadow: var(--shadow-sm);
}
.load-area {
  padding: 30px 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
/* With no results the empty notice says it all; the load area adds no space under it. */
.empty:not([hidden]) ~ .load-area {
  padding: 0 0 16px;
}
.load-area button {
  min-width: 180px;
  border-radius: 999px;
  padding: 10px 20px;
}
.empty {
  text-align: center;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: var(--paper);
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
}
.empty h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 900;
}
.empty p {
  max-width: 52ch;
  margin: 0 auto 12px;
  color: var(--muted);
  line-height: 1.5;
}
.empty button {
  border-radius: 999px;
}
.error {
  padding: 12px 16px;
  margin: 12px 0;
  background: var(--alarm-soft);
  border: var(--b) solid var(--alarm);
  border-radius: 10px;
  color: var(--alarm-ink);
  line-height: 1.6;
}
.feed-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.feed-error button {
  flex: none;
}

/* About: the data caveats, once. */
.about {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 28px;
  margin-top: 24px;
  padding: 36px 0 44px;
  border-top: 3px solid var(--outline);
}
.about h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
}
.about-lead p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.6;
}
.about h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 900;
}
.about p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px max(32px, calc((100vw - 1600px) / 2 + 32px)) 32px;
  background: var(--solid);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
}
footer a {
  text-decoration: underline;
}

/* Dialogs: product details, saved products. */
dialog:not(.image-viewer) {
  width: min(1000px, calc(100vw - 24px));
  max-height: 92dvh;
  padding: 0 26px 26px;
  overflow: auto;
  color: inherit;
  background: var(--paper);
  border: 3px solid var(--outline);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--shadow-color);
}
dialog::backdrop {
  background: var(--backdrop);
}
/* The dialog's own scrollbar is inset from its right edge and starts below the sticky heading. */
dialog:not(.image-viewer)::-webkit-scrollbar {
  width: 20px;
}
dialog:not(.image-viewer)::-webkit-scrollbar-track {
  margin: 72px 0 12px;
  border: 5px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--outline);
}
dialog:not(.image-viewer)::-webkit-scrollbar-thumb,
dialog:not(.image-viewer)::-webkit-scrollbar-thumb:hover,
dialog:not(.image-viewer)::-webkit-scrollbar-thumb:active {
  border: 5px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 2px var(--outline);
}
/* Under a modal dialog the page does not scroll: its scrollbar is removed and the same width is
   kept as padding (measured in app.ts), so nothing moves. Without a scrollbar the dialog backdrop
   covers that strip too, so it only needs the page color. */
html.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
  /* Continues the sticky header's surface and bottom line, like the scrollbar gutter did. */
  background: linear-gradient(
      to bottom,
      var(--paper) 0 var(--page-header-line, 69px),
      var(--outline) var(--page-header-line, 69px) var(--page-header-bottom, 72px),
      var(--ground) var(--page-header-bottom, 72px) 100%
    )
    fixed;
}
/* A scrollable list under the mouse can be grabbed (dragScroll.ts marks it `.can-drag` only
   when it overflows and Alt is not held); buttons and links inside keep their pointer cursor. */
.can-drag {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
/* Alt held: the page is for reading. Text, button labels included, can be selected anywhere
   and nothing shows a press (dragScroll.ts also swallows the clicks). */
html.alt-select,
html.alt-select * {
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}
html.alt-select :is(button, a, summary, label, [role="button"]):not([aria-pressed="true"]):active {
  transform: none !important;
}
html.alt-select .avatar-chip:not([aria-pressed="true"]):active .face {
  transform: none !important;
  box-shadow: var(--shadow) !important;
}
.drag-scrolling,
.drag-scrolling * {
  cursor: grabbing !important;
  user-select: none;
}
.drag-scrolling {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}
.product-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 60px;
  padding: 14px 0 10px;
  background: var(--paper);
  border-bottom: var(--b) solid var(--outline);
  margin-bottom: 8px;
}
.product-heading button,
.saved-heading button {
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.kind-label.is-avatar {
  background: var(--solid);
  color: var(--paper);
}
#product-title {
  margin: 10px 0 10px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 14px;
}
.product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}
.booth-link {
  display: inline-block;
  padding: 10px 20px;
  border: var(--b) solid var(--outline);
  border-radius: 999px;
  background: var(--solid);
  color: var(--paper);
  text-decoration: none;
  font-weight: 800;
}
.save-detail {
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: var(--shadow-sm);
}
.save-detail[aria-pressed="true"] {
  background: var(--wash);
}
.fit-panel {
  margin-top: 20px;
  padding: 16px 18px;
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
  background: var(--paper);
}
.fit-panel h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 900;
}
.fit-panel p {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.fit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.fit-who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fit-who .face {
  width: 52px;
  height: 52px;
  border-radius: 10px;
}
.fit-all {
  flex: none;
  border-radius: 999px;
}
.fit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.fit-card {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 0 0 10px;
  overflow: hidden;
  border: var(--b) solid var(--outline);
  border-radius: 10px;
  background: var(--paper);
}
.fit-card-cover {
  padding: 0;
  border: 0;
  border-bottom: var(--b) solid var(--outline);
  border-radius: 0;
  background: var(--wash);
}
.fit-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.fit-card .fit-card-title {
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fit-card small {
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}
.fit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fit-entry {
  display: inline-flex;
  border: var(--b) solid var(--outline);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper);
}
.fit-entry button {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 5px 12px;
  font-size: 13px;
}
.fit-entry .fit-chip {
  padding: 3px 12px 3px 3px !important;
  gap: 7px;
}
.fit-entry .fit-chip .face {
  width: 30px;
  height: 30px;
}
.fit-entry .fit-chip small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.fit-open {
  border-left: var(--b) solid var(--outline) !important;
  font-size: 12px !important;
}
@media (hover: hover) {
  .fit-entry .fit-chip:hover,
  .fit-open:hover {
    background: var(--honey);
    color: var(--on-honey);
  }
}
/* Product pictures: one scrollable row at the top of the product page. */
.detail-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 132px;
  gap: 8px;
  margin: 12px 0 8px;
  padding-bottom: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.detail-gallery button {
  aspect-ratio: 1;
  padding: 0;
  border: var(--b) solid var(--outline);
  border-radius: 8px;
  overflow: hidden;
  background: var(--wash);
}
.detail-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallery-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 26px;
}
.gallery-nav button {
  border-radius: 999px;
}
.gallery-feedback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  color: var(--alarm);
  font-size: 13px;
}
.detail-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: var(--b) solid var(--outline);
}
.detail-section h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 900;
}
.detail-section summary {
  cursor: pointer;
  font-weight: 800;
}
.detail-section p {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.detail-section pre {
  font:
    13.5px/1.85 "Hiragino Sans",
    "Yu Gothic UI",
    Meiryo,
    "Noto Sans JP",
    system-ui,
    sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--body-ink);
  max-height: 400px;
  overflow: auto;
}
.translate-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 12px 0 4px;
}
.translate-button,
.translate-link {
  display: inline-block;
  padding: 6px 14px;
  border: var(--b) solid var(--outline);
  border-radius: 999px;
  background: var(--paper);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.translate-status {
  font-size: 12px;
  color: var(--muted);
}
/* Favorite observations: the measured counter, field changes pinned on the same time axis. */
.obs-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px 24px;
  flex-wrap: wrap;
}
.obs-head h3 {
  margin-bottom: 2px;
}
.detail-section .obs-note {
  margin: 0;
}
.obs-now {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}
.obs-now strong {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}
.obs-now span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.obs-now .up,
.obs-tip .up {
  color: var(--rise);
}
.obs-now .down,
.obs-tip .down {
  color: var(--alarm);
}
.obs-plot {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: 220px 26px;
  margin-top: 16px;
  padding: 18px 18px 6px 6px;
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
  background: var(--paper);
  outline: none;
}
.obs-plot:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.obs-y {
  position: relative;
}
.obs-y span,
.obs-x span {
  position: absolute;
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}
.obs-y span {
  right: 10px;
  transform: translateY(-50%);
}
.obs-x {
  grid-column: 2;
  position: relative;
}
.obs-x span {
  top: 10px;
  transform: translateX(-50%);
}
.obs-field {
  position: relative;
  touch-action: pan-y;
  cursor: crosshair;
}
.obs-field .chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart .grid-line {
  stroke: var(--rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.chart .area {
  fill: var(--sakura);
  opacity: 0.12;
}
.chart .line {
  stroke: var(--sakura);
  stroke-width: 2.5;
  stroke-linejoin: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.obs-sample,
.obs-dot {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.obs-sample {
  width: 5px;
  height: 5px;
  background: var(--sakura);
}
.obs-dot {
  width: 13px;
  height: 13px;
  background: var(--sakura);
  border: var(--b) solid var(--outline);
  z-index: 2;
}
.obs-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--solid);
  pointer-events: none;
}
.obs-tip {
  position: absolute;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 7px 11px;
  border: var(--b) solid var(--outline);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  transform: translateX(14px);
  pointer-events: none;
}
.obs-tip.flip {
  transform: translateX(calc(-100% - 14px));
}
.obs-tip strong {
  font-size: 17px;
  color: var(--ink);
}
/* A pin is a dashed rule through the plot with a tab on the baseline. */
.obs-pin {
  position: absolute;
  top: 0;
  bottom: -6px;
  width: 18px;
  margin-left: -9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  z-index: 1;
}
.obs-pin::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 6px;
  left: 50%;
  border-left: 1px dashed var(--outline);
}
.obs-pin::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  border: var(--b) solid var(--outline);
  border-radius: 2px;
  background: var(--paper);
  transform: translateX(-50%) rotate(45deg);
}
.obs-pin:hover::before,
.obs-pin:focus-visible::before {
  border-left-style: solid;
}
.obs-pin:hover::after,
.obs-pin:focus-visible::after {
  background: var(--honey);
  color: var(--on-honey);
}
.obs-pin:focus-visible {
  outline: none;
}
.obs-samples {
  margin-top: 12px;
  font-size: 13px;
}
.obs-samples .history-table {
  margin-top: 8px;
}
.history-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
.history-table td,
.history-table th {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--rule);
}
/* The creator's description: main text plus every headed section of the product page. */
.desc-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.desc-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.desc-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.desc-index button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desc-index button.changed::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sakura);
  border: 1.5px solid var(--outline);
}
.desc-body {
  max-width: 46em;
  margin-top: 14px;
}
.desc-body.clamped {
  max-height: 640px;
  overflow: hidden;
  mask-image: linear-gradient(#000 78%, transparent);
}
.detail-section .desc-body pre {
  max-height: none;
  overflow: visible;
  margin: 0;
}
.desc-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--outline);
  scroll-margin-top: 96px;
}
.desc-section h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.desc-section h4.untitled {
  font-weight: 700;
  color: var(--muted);
}
.desc-changed {
  padding: 1px 9px;
  border: var(--b) solid var(--outline);
  border-radius: 999px;
  background: var(--sakura-soft);
  font-size: 11px;
  font-weight: 800;
}
.desc-more {
  margin-top: 12px;
  border-radius: 999px;
}
.detail-section .desc-pending {
  margin: 18px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--outline);
}
.change-row {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  scroll-margin-top: 96px;
}
.change-row small {
  color: var(--muted);
}
.change-row button {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
}
.change-row.flash {
  animation: change-flash 1.8s ease-out;
}
@keyframes change-flash {
  from {
    background: var(--honey-soft);
    box-shadow: inset 4px 0 0 var(--shadow-color);
  }
}
.unified-diff {
  font:
    12px/1.8 ui-monospace,
    monospace !important;
  max-height: 400px;
  overflow: auto;
  padding: 12px 14px;
  background: var(--wash);
  border: var(--b) solid var(--outline);
  border-radius: 8px;
}
.unified-diff span {
  display: block;
}
.unified-diff .added {
  background: var(--added);
  color: var(--added-ink);
}
.unified-diff .removed {
  background: var(--removed);
  color: var(--removed-ink);
}

/* Saved products (saved.ts). */
.saved-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 10px;
  background: var(--paper);
  border-bottom: var(--b) solid var(--outline);
}
.saved-heading h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}
.saved-help {
  color: var(--muted);
  line-height: 1.6;
}
.saved-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 12px;
}
.saved-toolbar label {
  flex: 1 1 220px;
}
.saved-toolbar button {
  white-space: nowrap;
  border-radius: 999px;
}
.saved-feedback {
  font-weight: 700;
  line-height: 1.5;
}
.saved-feedback:empty {
  display: none;
}
.saved-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--muted);
  line-height: 1.7;
}
.saved-list {
  display: grid;
}
.saved-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.saved-row > img {
  width: 72px;
  height: 72px;
  flex: none;
  object-fit: contain;
  border: var(--b) solid var(--outline);
  border-radius: 8px;
  background: var(--wash);
}
.saved-info {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.saved-name {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
  font-weight: 800;
}
.saved-creator,
.saved-info small {
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: 12px;
}
.saved-booth {
  font-size: 12px;
  font-weight: 800;
}
.saved-remove {
  flex: none;
  font-size: 22px;
  min-width: 40px;
  min-height: 40px;
  padding: 4px 8px;
  border-radius: 50%;
}
.saved-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  color: var(--muted);
  font-size: 13px;
}
.saved-pagination button {
  border-radius: 999px;
}
.saved-toast {
  position: fixed;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  width: max-content;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: var(--b) solid var(--outline);
  border-radius: 12px;
  background: var(--solid);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--honey);
  line-height: 1.5;
  font-size: 13px;
  font-weight: 700;
}
.saved-toast button {
  flex: none;
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
}

/* Image search panel (vision.ts), opened from the camera in the search bar: the picture stage
   on the left, the choices and the search button on the right. */
.vision-panel {
  position: relative;
  margin: 22px 0 0;
  padding: clamp(16px, 3vw, 28px);
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
  background: var(--paper);
}
.vision-heading {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  padding-right: 48px;
}
.vision-heading h2 {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.vision-badge {
  padding: 1px 9px;
  border: var(--b) solid var(--outline);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.vision-close {
  display: grid;
  place-items: center;
  position: absolute;
  top: clamp(12px, 2.4vw, 24px);
  right: clamp(12px, 2.4vw, 24px);
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.vision-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.vision-close:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}
.vision-panel p {
  margin: 0;
  line-height: 1.55;
}
.vision-panel .vision-lead {
  max-width: 68ch;
  margin-top: 6px;
  color: var(--muted);
}
/* Availability: one line with a state dot; the support offer only when nobody is online. */
.vision-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  margin: 18px 0;
  padding: 10px 10px 10px 14px;
  border: var(--b) solid var(--rule);
  border-radius: 10px;
  background: var(--wash);
}
.vision-status > p {
  font-size: 13.5px;
  font-weight: 700;
}
.vision-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--quiet);
}
.vision-status[data-state="ready"] .vision-dot {
  background: #1f9d55;
  box-shadow: 0 0 0 4px #d6f5e1;
}
.vision-status[data-state="busy"] .vision-dot {
  background: #e0a100;
  box-shadow: 0 0 0 4px var(--honey-soft);
}
.vision-status[data-state="offline"] .vision-dot {
  background: var(--alarm);
  box-shadow: 0 0 0 4px var(--alarm-soft);
}
.vision-status[data-state="checking"] .vision-dot {
  animation: vision-pulse 1.2s ease-in-out infinite;
}
@keyframes vision-pulse {
  50% {
    opacity: 0.3;
  }
}
#vision-recheck {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
}
.vision-support {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.vision-support[hidden] {
  display: none;
}
.vision-panel .vision-support p {
  flex: 1 1 280px;
  font-size: 13px;
  color: var(--muted);
}
.vision-donate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 11px;
  border: var(--b) solid var(--outline);
  border-radius: 999px;
  background: var(--paper);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.vision-form {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}
/* The stage: an empty drop target, then the chosen picture on screentone. */
.vision-stage {
  position: relative;
  display: grid;
  min-height: 340px;
  border: var(--b) dashed var(--outline);
  border-radius: var(--radius);
  background: radial-gradient(var(--tone) 1px, transparent 1.4px) 0 0 / 12px 12px, var(--wash);
  transition: border-color 0.15s, background-color 0.15s;
}
.vision-stage:has(.vision-preview:not([hidden])) {
  border-style: solid;
  border-color: var(--rule);
}
.vision-stage.dragging {
  border-style: dashed;
  border-color: var(--solid);
  background-color: var(--honey-soft);
}
.vision-drop {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
}
.vision-drop[hidden] {
  display: none;
}
.vision-drop-icon {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.vision-drop strong {
  font-size: 17px;
  font-weight: 900;
}
.vision-browse {
  margin-top: 4px;
  padding: 8px 20px;
  border: var(--b) solid var(--outline);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  font-weight: 800;
}
.vision-drop:hover .vision-browse {
  background: var(--wash);
}
.vision-drop:active .vision-browse {
  box-shadow: none;
  transform: translate(2px, 2px);
}
.vision-drop:focus-within .vision-browse {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.vision-drop small {
  font-size: 12px;
  color: var(--muted);
}
.vision-preview {
  position: relative;
  display: grid;
  place-items: center;
  padding: 14px;
}
.vision-preview[hidden] {
  display: none;
}
#vision-canvas {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: 480px;
  height: auto;
  touch-action: none;
  cursor: crosshair;
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.vision-replace {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 12px;
  border: var(--b) solid var(--outline);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.vision-replace:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}
.vision-controls {
  display: grid;
  gap: 20px;
}
@media (max-width: 860px) {
  .vision-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
.vision-field {
  display: grid;
  gap: 8px;
}
.vision-label {
  font-size: 13px;
  font-weight: 900;
}
.vision-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vision-chips button {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
  .vision-chips button:not([aria-pressed="true"]):not(:disabled):hover {
    background: var(--wash);
  }
}
.vision-chips [aria-pressed="true"] {
  background: var(--honey);
  color: var(--on-honey);
  box-shadow: none;
  transform: translate(2px, 2px);
}
.vision-hint {
  font-size: 12px;
  color: var(--muted);
}
.vision-field:has(button:disabled) .vision-hint {
  display: none;
}
.vision-actions {
  display: flex;
  gap: 10px;
}
#vision-submit {
  flex: 1;
  padding: 12px 18px;
  border-color: var(--solid);
  border-radius: 999px;
  background: var(--solid);
  color: var(--paper);
  font-size: 15px;
  font-weight: 900;
}
#vision-submit:disabled {
  opacity: 1;
  border-color: var(--rule);
  background: var(--rule);
  color: var(--quiet);
  box-shadow: none;
}
#vision-cancel {
  border-radius: 999px;
}
.vision-privacy {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.vision-privacy svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.vision-panel .vision-feedback:not(:empty) {
  margin: 22px 0 14px;
  font-weight: 700;
}
.vision-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 18px;
}
.vision-result .card-cover {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-bottom: var(--b) solid var(--outline);
}
.vision-result-info {
  padding: 12px;
}
.vision-result-info .card-title {
  width: 100%;
}
.vision-result-info p {
  color: var(--muted);
  margin: 8px 0;
}

/* Date range picker (datepicker.ts): opened from the filter panel, centred above everything so
   the scrolling panel never clips it. */
.range-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  display: grid;
  grid-template-columns: 150px auto;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--paper);
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--shadow-color), 0 0 0 100vmax var(--backdrop-soft);
  overflow: hidden;
}
.rp-presets {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 10px;
  background: var(--wash);
  border-right: var(--b) solid var(--outline);
}
.rp-preset {
  text-align: left;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
}
.rp-main {
  padding: 14px 16px 14px;
  min-width: 0;
}
.rp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.rp-nav {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}
.rp-jump {
  display: flex;
  gap: 6px;
}
.rp-select {
  width: auto;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
}
.rp-months {
  display: grid;
  grid-template-columns: repeat(2, 252px);
  gap: 24px;
}
.rp-title {
  margin: 0 0 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
}
.rp-grid {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  row-gap: 2px;
}
.rp-weekday {
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.rp-day {
  position: relative;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
}
@media (hover: hover) {
  .rp-day:hover:not(:disabled) {
    background: var(--wash);
  }
}
.rp-day:disabled {
  color: var(--disabled-ink);
  cursor: default;
}
.rp-day.is-today {
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.rp-day.in-range {
  background: var(--honey-soft);
}
.rp-day.is-preview.in-range {
  background: var(--preview-range);
}
.rp-day.is-start,
.rp-day.is-end {
  background: var(--honey);
  color: var(--on-honey);
  font-weight: 900;
  box-shadow: inset 0 0 0 2px var(--shadow-color);
}
.rp-day.is-start {
  border-radius: 10px 0 0 10px;
}
.rp-day.is-end {
  border-radius: 0 10px 10px 0;
}
.rp-day.is-start.is-end,
.rp-day.is-start:not(.in-range ~ *):not(:has(~ .in-range, ~ .is-end)) {
  border-radius: 10px;
}
.rp-day.is-preview.is-end {
  background: var(--honey-soft);
}
.rp-day:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  border-radius: 10px;
  z-index: 1;
}
.rp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: var(--b) solid var(--outline);
}
.rp-summary {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.rp-actions {
  display: flex;
  gap: 8px;
}
.rp-actions button {
  border-radius: 999px;
}
.rp-apply {
  background: var(--solid);
  color: var(--paper);
}

/* The shared image viewer (viewer.css) stays dark; `body` outranks its selectors. */
body .image-viewer {
  --viewer-accent: var(--honey);
}
body .image-viewer button {
  box-shadow: none;
  transform: none;
  font-weight: 500;
}

@media (max-width: 1350px) {
  .catalog-grid {
    --columns: 3;
  }
}
@media (max-width: 1080px) {
  .catalog-grid {
    --columns: 3;
  }
  .about {
    grid-template-columns: 1fr 1fr;
  }
  .search-submit {
    display: none;
  }
}
@media (max-width: 1000px) {
  .catalog {
    display: block;
  }
  .filter-sidebar {
    position: static;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .filters-toggle {
    display: inline-flex;
  }
  .panel-close {
    display: block;
  }
  .filter-panel {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;
    width: min(360px, calc(100vw - 40px));
    max-height: 100dvh;
    align-content: start;
    padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
    padding-right: 4px;
    background: var(--paper);
    border: var(--b) solid var(--outline);
    border-width: 0 var(--b) 0 0;
    border-radius: 0;
    box-shadow: 0 0 0 100vmax var(--backdrop-mid);
  }
}
@media (max-width: 900px) {
  /* The header controls take the first row; search gets a full row below them. */
  :root {
    --header: 131px;
  }
  .site-header {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .brand {
    margin-right: auto;
  }
  .search-bar {
    order: 5;
    flex-basis: 100%;
    max-width: none;
    margin: 0;
  }
  .kofi-link > span {
    display: none;
  }
  .kofi-link {
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
  }
  .fit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sort-pills {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    padding: 2px 6px 6px 2px;
    margin-bottom: -6px;
    scrollbar-width: none;
  }
}
@media (max-width: 650px) {
  :root {
    --header: 112px;
  }
  .site-header {
    flex-wrap: wrap;
    gap: 10px 8px;
    padding: 10px 16px 12px;
  }
  .brand {
    font-size: 19px;
    margin-right: auto;
  }
  .brand-icon {
    width: 42px;
    height: 36px;
  }
  .search-bar {
    order: 5;
    flex-basis: 100%;
    max-width: none;
    margin: 0;
  }
  .saved-open {
    padding: 6px 10px;
  }
  .saved-open > span[data-i18n],
  .kofi-link > span {
    display: none;
  }
  .lang-long {
    display: none;
  }
  .lang-short {
    display: inline;
  }

  .kofi-link {
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
  }
  main {
    padding: 0 16px;
  }
  .avatar-rail {
    margin-top: 14px;
    padding: 12px 0 2px;
    border-radius: 10px;
  }
  .rail-head {
    flex-wrap: wrap;
    gap: 10px;
    padding-inline: 12px;
    margin-bottom: 10px;
  }
  .rail-head h2 {
    font-size: 15px;
  }
  .rail-find {
    flex: 1;
    width: auto;
  }
  .rail-scroll {
    display: none;
  }
  .avatar-chips {
    gap: 10px;
    padding-inline: 14px;
    scroll-padding-inline: 14px;
  }
  .avatar-chips::-webkit-scrollbar-track {
    margin-inline: 12px;
  }
  .avatar-chip {
    width: 72px;
  }
  .avatar-chip .face {
    width: 66px;
    height: 66px;
    border-radius: 12px;
  }
  .avatar-name {
    font-size: 11.5px;
  }
  .toolbar {
    gap: 10px;
    margin-bottom: 10px;
  }
  .catalog {
    margin-top: 16px;
  }
  .kind-tabs {
    flex: 1;
  }
  .kind-tabs button {
    flex: 1;
    padding: 8px 6px;
    font-size: 14px;
  }
  .filters-toggle {
    padding: 7px 11px;
  }
  .filters-toggle > span[data-i18n] {
    display: none;
  }
  .results-heading h2 {
    font-size: 17px;
  }
  .catalog-grid {
    --columns: 2;
    --card-info: 120px;
    gap: 12px;
  }
  .public-card {
    box-shadow: 3px 3px 0 var(--shadow-color);
    border-radius: 0;
  }
  .card-info {
    padding: 7px 8px 8px;
  }
  .card-title {
    font-size: 12.5px;
    min-height: 34px;
    max-height: 34px;
  }
  .card-price {
    font-size: 12px;
    padding: 1px 6px;
  }
  .fit-chip span {
    max-width: 5.5em;
  }
  .timeline {
    padding: 10px 10px 8px;
  }
  .timeline-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .timeline-windows button {
    padding: 5px 10px;
  }
  /* Pinch zooms the scale on phones. */
  #timeline-zoom-in,
  #timeline-zoom-out {
    display: none;
  }
  .timeline-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "windows tools";
  }
  .timeline-track {
    margin-top: 8px;
  }
  .avatar-banner {
    flex-wrap: wrap;
    padding: 12px;
  }
  .avatar-products {
    order: 4;
    flex-basis: 100%;
  }
  .banner-top .face {
    width: 52px;
    height: 52px;
  }
  .banner-copy strong {
    font-size: 20px;
  }
  .avatar-product {
    flex-basis: 230px;
  }
  .about {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 28px 0;
  }
  footer {
    flex-direction: column;
    padding: 18px 16px 28px;
  }
  dialog:not(.image-viewer) {
    width: 100vw;
    max-width: 100vw;
    max-height: 94dvh;
    margin: auto 0 0;
    padding: 0 16px 18px;
    border-width: 3px 0 0;
    border-radius: 18px 18px 0 0;
    box-shadow: none;
  }
  #product-title {
    font-size: 20px;
  }
  .fit-head {
    flex-direction: column;
    align-items: stretch;
  }
  .fit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .detail-gallery {
    grid-auto-columns: 104px;
  }
  .gallery-nav {
    gap: 8px;
  }
  .obs-plot {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: 180px 26px;
    padding: 14px 12px 4px 2px;
  }
  .obs-now strong {
    font-size: 26px;
  }
  .obs-head {
    flex-direction: column;
  }
  .obs-now {
    justify-items: start;
    text-align: left;
  }
  .range-picker {
    position: fixed;
    transform: none;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    max-width: none;
    border-width: 3px 0 0;
    border-radius: 18px 18px 0 0;
    max-height: 92dvh;
    overflow-y: auto;
    box-shadow: 0 0 0 100vmax var(--backdrop-mid);
  }
  .rp-presets {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: var(--b) solid var(--outline);
    padding: 10px 12px;
  }
  .rp-preset {
    white-space: nowrap;
    flex: none;
    border-radius: 999px;
  }
  .rp-main {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .rp-months {
    grid-template-columns: minmax(0, 1fr);
  }
  .rp-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .rp-day {
    height: 42px;
    font-size: 15px;
  }
  .rp-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .rp-actions button {
    flex: 1;
    padding: 12px;
  }
  .saved-toolbar button {
    flex: 1;
    font-size: 12px;
  }
  .saved-row {
    gap: 10px;
  }
  .saved-row > img {
    width: 54px;
    height: 54px;
  }
  .saved-booth {
    display: none;
  }
  .vision-stage {
    min-height: 220px;
  }
  .vision-status {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .vision-dot {
    margin-top: 5px;
  }
  #vision-recheck,
  .vision-support {
    grid-column: 2;
    justify-self: start;
  }
}
@media (max-width: 440px) {
  .brand span {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .change-row.flash {
    background: var(--honey-soft);
  }
}

/* Colored themes: surfaces, outlines, text and the choice color (--honey) take the theme's hue;
   Light and Dark keep the brand yellow. */
:root[data-theme="sakura"] {
  --honey: #ff8fbf;
  --honey-soft: #ffd9e8;
  --on-honey: #000;
  --ground: #fbedf2;
  --wash: #fdf4f7;
  --paper: #fff;
  --tone: #f2cddb;
  --outline: #c48aa1;
  --shadow-color: #f0c4d5;
  --rule: #f1d7e1;
  --ink: #2b1520;
  --solid: #2b1520;
  --muted: #6c4a58;
  --quiet: #8f6b7a;
  --scroll-track: #fff;
  --thumb: #fff;
  --thumb-hover: #fbe3ec;
  --thumb-inset: #f0c4d5;
  --card-ink: #2b1520;
  --card-outline: #c48aa1;
  --card-shadow: #f0c4d5;
}
:root[data-theme="matcha"] {
  --honey: #9fd36a;
  --honey-soft: #e2f2cd;
  --on-honey: #000;
  --ground: #eef3e5;
  --wash: #f5f8ef;
  --paper: #fff;
  --tone: #cfdcba;
  --outline: #88a06d;
  --shadow-color: #cad8b4;
  --rule: #dce6cc;
  --ink: #1c2413;
  --solid: #1c2413;
  --muted: #4b5a3c;
  --quiet: #6b7b5b;
  --scroll-track: #fff;
  --thumb: #fff;
  --thumb-hover: #e8f0dc;
  --thumb-inset: #cad8b4;
  --card-ink: #1c2413;
  --card-outline: #88a06d;
  --card-shadow: #cad8b4;
}
:root[data-theme="soda"] {
  --honey: #7cc4ff;
  --honey-soft: #d6ecff;
  --on-honey: #000;
  --ground: #e8f1fb;
  --wash: #f2f7fd;
  --paper: #fff;
  --tone: #c5daf1;
  --outline: #7a9bc1;
  --shadow-color: #c1d5ee;
  --rule: #d5e3f4;
  --ink: #11202f;
  --solid: #11202f;
  --muted: #42566b;
  --quiet: #65798e;
  --scroll-track: #fff;
  --thumb: #fff;
  --thumb-hover: #dfeaf8;
  --thumb-inset: #c1d5ee;
  --card-ink: #11202f;
  --card-outline: #7a9bc1;
  --card-shadow: #c1d5ee;
}
:root[data-theme="midnight"] {
  --honey: #8ea6ff;
  --honey-soft: #2b3765;
  --on-honey: #000;
  --ground: #0e1323;
  --wash: #1e2843;
  --paper: #172036;
  --tone: #2a3657;
  --outline: #56658e;
  --shadow-color: #05070f;
  --rule: #28324f;
  --ink: #eef1ff;
  --solid: #eef1ff;
  --muted: #aab3d6;
  --quiet: #7f89ad;
  --scroll-track: #172036;
  --thumb: #2f3b5e;
  --thumb-hover: #3b4870;
  --thumb-inset: #1e2843;
  --card-ink: #eef1ff;
  --card-outline: #56658e;
  --card-shadow: #05070f;
}
:root[data-theme="grape"] {
  --honey: #c39bff;
  --honey-soft: #3d2d5c;
  --on-honey: #000;
  --ground: #160f1f;
  --wash: #2a2040;
  --paper: #21182f;
  --tone: #3a2d56;
  --outline: #705c98;
  --shadow-color: #08050d;
  --rule: #33284a;
  --ink: #f4effd;
  --solid: #f4effd;
  --muted: #c0b3db;
  --quiet: #8f81ad;
  --scroll-track: #21182f;
  --thumb: #3e3060;
  --thumb-hover: #4b3b72;
  --thumb-inset: #2a2040;
  --card-ink: #f4effd;
  --card-outline: #705c98;
  --card-shadow: #08050d;
}

/* Candy pop: a neutral light page where color carries meaning. Each hue has one role
   (favorites pink, hot yellow, fresh mint, time blue, money peach, avatars lilac) and every control or panel of that role
   uses it; chosen controls fill with their role color. */
:root[data-theme="candy"] {
  --ground: #f5f5f7;
  --wash: #f9f9fb;
  --paper: #fff;
  --tone: #dcdce3;
  --outline: #b8b8c4;
  --shadow-color: #e1e1e8;
  --rule: #e4e4ea;
  --ink: #1f1a2b;
  --solid: #1f1a2b;
  --muted: #55506a;
  --quiet: #7c7790;
  --honey: #ffcf3d;
  --honey-soft: #fff3c4;
  --on-honey: #000;
  --card-ink: #1f1a2b;
  --card-outline: #b8b8c4;
  --card-shadow: #e1e1e8;
  --candy-favorite: #ff7eb9;
  --candy-favorite-soft: #ffe3f0;
  --candy-hot: #ffcf3d;
  --candy-hot-soft: #fff3c4;
  --candy-fresh: #4fd1a5;
  --candy-fresh-soft: #dcf8ee;
  --candy-time: #5fb2ff;
  --candy-time-soft: #ddeeff;
  --candy-money: #ff9a62;
  --candy-money-soft: #ffe7da;
  --candy-avatar: #b38bff;
  --candy-avatar-soft: #efe5ff;
}
:root[data-theme="candy"] :is(.sort-pills [data-sort="trending"], .timeline-windows > button, .timeline-tools > button) {
  --pop: var(--candy-hot);
  --pop-soft: var(--candy-hot-soft);
}
:root[data-theme="candy"] :is(.sort-pills [data-sort="new"], .popular-tags > button, .active-filters > button) {
  --pop: var(--candy-fresh);
  --pop-soft: var(--candy-fresh-soft);
}
:root[data-theme="candy"] :is(.sort-pills [data-sort="likes"]) {
  --pop: var(--candy-favorite);
  --pop-soft: var(--candy-favorite-soft);
}
:root[data-theme="candy"] :is(.sort-pills [data-sort="changed"], .period-options > button, .date-options > button, .vision-chips > button) {
  --pop: var(--candy-time);
  --pop-soft: var(--candy-time-soft);
}
:root[data-theme="candy"] :is(.sort-pills [data-sort="price"], .price-options > button) {
  --pop: var(--candy-money);
  --pop-soft: var(--candy-money-soft);
}
:root[data-theme="candy"] :is(.kind-tabs > button, .rail-scroll > button, .language-options > button, .theme-panel > button) {
  --pop: var(--candy-avatar);
  --pop-soft: var(--candy-avatar-soft);
}
:root[data-theme="candy"] :is(.sort-pills [data-sort="trending"], .timeline-windows > button, .timeline-tools > button, .sort-pills [data-sort="new"], .popular-tags > button, .active-filters > button, .sort-pills [data-sort="likes"], .sort-pills [data-sort="changed"], .period-options > button, .date-options > button, .vision-chips > button, .sort-pills [data-sort="price"], .price-options > button, .kind-tabs > button, .rail-scroll > button, .language-options > button, .theme-panel > button) {
  border-color: var(--pop);
  box-shadow: 2px 2px 0 var(--pop-soft);
}
:root[data-theme="candy"] :is(.sort-pills [data-sort="trending"], .timeline-windows > button, .timeline-tools > button, .sort-pills [data-sort="new"], .popular-tags > button, .active-filters > button, .sort-pills [data-sort="likes"], .sort-pills [data-sort="changed"], .period-options > button, .date-options > button, .vision-chips > button, .sort-pills [data-sort="price"], .price-options > button, .kind-tabs > button, .rail-scroll > button, .language-options > button, .theme-panel > button)[aria-pressed="true"] {
  background: var(--pop);
  color: #000;
  box-shadow: none;
}
@media (hover: hover) {
  :root[data-theme="candy"] :is(.sort-pills [data-sort="trending"], .timeline-windows > button, .timeline-tools > button, .sort-pills [data-sort="new"], .popular-tags > button, .active-filters > button, .sort-pills [data-sort="likes"], .sort-pills [data-sort="changed"], .period-options > button, .date-options > button, .vision-chips > button, .sort-pills [data-sort="price"], .price-options > button, .kind-tabs > button, .rail-scroll > button, .language-options > button, .theme-panel > button):not([aria-pressed="true"]):hover {
    background: var(--pop-soft);
  }
}
:root[data-theme="candy"] :is(.avatar-rail, .avatar-banner, .language summary, .theme-menu summary) {
  border-color: var(--candy-avatar);
  --shadow-color: var(--candy-avatar-soft);
}
:root[data-theme="candy"] :is(.filter-panel) {
  border-color: var(--candy-fresh);
  --shadow-color: var(--candy-fresh-soft);
}
:root[data-theme="candy"] :is(.timeline) {
  border-color: var(--candy-hot);
  --shadow-color: var(--candy-hot-soft);
}
:root[data-theme="candy"] :is(.vision-panel, .site-header .search-bar) {
  border-color: var(--candy-time);
  --shadow-color: var(--candy-time-soft);
}
:root[data-theme="candy"] :is(.saved-open) {
  border-color: var(--candy-favorite);
  --shadow-color: var(--candy-favorite-soft);
}
:root[data-theme="candy"] .avatar-chip[aria-pressed="true"] .avatar-name,
:root[data-theme="candy"] .rail-head h2 {
  background: var(--candy-avatar);
  color: #000;
}
:root[data-theme="candy"] .timeline-band {
  --honey: var(--candy-hot);
}
:root[data-theme="candy"] #vision-submit:not(:disabled) {
  border-color: var(--candy-time);
  background: var(--candy-time);
  color: #000;
}
/* The track in muted yellows, the way Sakura tints everything pink: soft outline and screentone,
   dark ruler, quiet ticks and hatching. */
:root[data-theme="candy"] .timeline-track {
  --outline: #cfae5a;
  --rule: #f1e2b4;
  --wash: #fffaea;
  --quiet: #9b8752;
  --solid: #2e2614;
  --void: #8a6d1a0a;
  --void-line: #b08f3a33;
}
/* The avatar rail is green around its lilac avatar pictures. */
:root[data-theme="candy"] .avatar-rail.avatar-rail {
  border-color: var(--candy-fresh);
  --shadow-color: var(--candy-fresh-soft);
  background:
    radial-gradient(var(--candy-fresh-soft) 1.1px, transparent 1.5px) 0 0 / 7px 7px,
    #f7fdfa;
}
:root[data-theme="candy"] .rail-head h2 {
  background: var(--candy-fresh);
}
:root[data-theme="candy"] .rail-scroll > button {
  --pop: var(--candy-fresh);
  --pop-soft: var(--candy-fresh-soft);
}
:root[data-theme="candy"] .rail-find input {
  border-color: var(--candy-fresh);
}
:root[data-theme="candy"] .avatar-chips {
  --scroll-track: #f7fdfa;
  --tone: var(--candy-fresh-soft);
}
/* Avatar pictures in the rail cycle through all six candy colors. */
:root[data-theme="candy"] .avatar-chip:nth-child(6n + 1) .face {
  border-color: var(--candy-favorite);
  --shadow-color: var(--candy-favorite-soft);
}
:root[data-theme="candy"] .avatar-chip:nth-child(6n + 2) .face {
  border-color: var(--candy-hot);
  --shadow-color: var(--candy-hot-soft);
}
:root[data-theme="candy"] .avatar-chip:nth-child(6n + 3) .face {
  border-color: var(--candy-money);
  --shadow-color: var(--candy-money-soft);
}
:root[data-theme="candy"] .avatar-chip:nth-child(6n + 4) .face {
  border-color: var(--candy-fresh);
  --shadow-color: var(--candy-fresh-soft);
}
:root[data-theme="candy"] .avatar-chip:nth-child(6n + 5) .face {
  border-color: var(--candy-time);
  --shadow-color: var(--candy-time-soft);
}
:root[data-theme="candy"] .avatar-chip:nth-child(6n + 6) .face {
  border-color: var(--candy-avatar);
  --shadow-color: var(--candy-avatar-soft);
}
.theme-swatch[data-swatch="candy"] {
  --sw-line: #b8b8c4;
  background: conic-gradient(#ff7eb9 0 60deg, #ff9a62 0 120deg, #ffcf3d 0 180deg, #4fd1a5 0 240deg, #5fb2ff 0 300deg, #b38bff 0);
}

/* The logo cat stays black with brand-yellow eyes in every theme (favicon.svg body paths use
   currentColor); dark themes add a light outline (stacked drop shadows) so it reads on dark ground. */
.brand-icon {
  color: #000;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand-icon {
    filter: var(--cat-outline);
  }
}
:root:is([data-theme="dark"],[data-theme="midnight"],[data-theme="grape"]) .brand-icon {
  filter: var(--cat-outline);
}
:root {
  --cat-outline: drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink));
}

.theme-menu {
  position: relative;
  flex: none;
}
.theme-menu summary {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  list-style: none;
  cursor: pointer;
  border: var(--b) solid var(--outline);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.theme-menu summary::-webkit-details-marker {
  display: none;
}
.theme-menu[open] summary {
  background: var(--honey);
  color: var(--on-honey);
  box-shadow: none;
  transform: translate(2px, 2px);
}
.theme-menu summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.theme-menu summary svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(300px, calc(100vw - 32px));
  padding: 14px;
  background: var(--paper);
  border: var(--b) solid var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.theme-panel .field-label {
  grid-column: 1 / -1;
}
.theme-panel button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  font-size: 13px;
  text-align: left;
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
  .theme-panel button:not([aria-pressed="true"]):hover {
    background: var(--wash);
  }
}
.theme-panel [aria-pressed="true"] {
  background: var(--honey);
  color: var(--on-honey);
  box-shadow: none;
  transform: translate(2px, 2px);
}
/* A swatch shows the theme's ground and its outline/text color. */
.theme-swatch {
  flex: none;
  width: 22px;
  height: 22px;
  border: var(--b) solid var(--sw-line);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sw-ground) 50%, var(--sw-paper) 50%);
}
.theme-swatch[data-swatch="auto"] { --sw-ground: #131313; --sw-paper: #f1f1f1; --sw-line: #888; }
.theme-swatch[data-swatch="light"] { --sw-ground: #f1f1f1; --sw-paper: #fff; --sw-line: #888; }
.theme-swatch[data-swatch="dark"] { --sw-ground: #131313; --sw-paper: #1d1d1d; --sw-line: #6c6c6c; }
.theme-swatch[data-swatch="sakura"] { --sw-ground: #fbedf2; --sw-paper: #fff; --sw-line: #c48aa1; }
.theme-swatch[data-swatch="matcha"] { --sw-ground: #eef3e5; --sw-paper: #fff; --sw-line: #88a06d; }
.theme-swatch[data-swatch="soda"] { --sw-ground: #e8f1fb; --sw-paper: #fff; --sw-line: #7a9bc1; }
.theme-swatch[data-swatch="midnight"] { --sw-ground: #0e1323; --sw-paper: #172036; --sw-line: #56658e; }
.theme-swatch[data-swatch="grape"] { --sw-ground: #160f1f; --sw-paper: #21182f; --sw-line: #705c98; }
@media (max-width: 650px) {
  .theme-menu summary {
    width: 36px;
    height: 36px;
  }
}
/* Switching themes: the new theme spreads from the chosen button as a wave (app.ts). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* Independent categories: a compact, searchable tree using the existing sidebar. */
#smart-categories > input { width: 100%; margin: .4rem 0; }
.smart-category-list { max-height: 26rem; overflow: auto; scrollbar-gutter: stable; }
.smart-category-list details { border-bottom: 1px solid var(--smart-category-border); padding: .3rem 0; }
.smart-category-list summary { cursor: pointer; padding: .3rem 0; font-weight: 650; }
.smart-category-choice { display: flex; align-items: center; gap: .45rem; padding: .3rem .2rem; cursor: pointer; }
.smart-category-choice input { flex: 0 0 auto; width: auto; }
.smart-category-choice span { flex: 1; min-width: 0; }
.smart-category-choice small { opacity: .65; font-variant-numeric: tabular-nums; }